/* OWNER: Lane B (content and motion). Section styles. Linked by layouts/base.njk after header.css.
   Read tokens from tokens.css; never depend on Bootstrap.
   Ported from ../wireframe/src/css/wireframe.css (sections, grids, layouts), with the greyscale
   replaced by the brand tokens. A baseline, not a design round: the wireframe's structure, line
   breaks and proportions are kept. Every band has its own vertical padding, and each dark band
   has a white band on both sides, so stacked sections never touch (websites.md, "Sections Never
   Touch"). */

/* ── Bands ─────────────────────────────────────────────────────────────────────────────────── */
.cd-s { padding-block: var(--cd-section-y); }

/* ── Dark bands and their curves ───────────────────────────────────────────────────────────── */
/* pages.njk marks the dark bands (the odd bands after the hero, never the call to action or a
   pair): .cd-theme-dark switches the color roles (tokens.css), .cd-band-dark is styled here, and
   .cd-curve-a / .cd-curve-b alternate the two mirrored orientations by dark-band order
   (docs/planning/2026-10-27-palette-and-bands/06-final-plan.md, "Dark bands", "Curves").

   The band's fill is its ::before, so the edges can be shaped: a static, shallow, asymmetric
   "smile arc" top and bottom (only white ever meets a dark band; the hero and the footer never
   do), plus one stationary aqua corner glow at --cd-band-glow-alpha. The curve is reserved inside
   the section padding, never clips content or a focus ring, and ignores the pointer.

   THE CURVE, to tweak it: one path on a 1440 x 64 box, stretched to the edge's width and to
   --cdb-depth tall:   M0 4 C360 52 980 76 1440 14
   It starts 4 units down at the left, dips to its lowest point a little right of center, and ends
   14 units down at the right. --cdb-below is the region below it (closed V64 H0 Z), --cdb-above
   the region above it (closed V0 H0 Z); edit the curve in both. --cdb-depth is the one depth. The
   same curve shapes every curved edge: the dark bands' top and bottom (.cd-curve-b mirrors it),
   the hero's bottom (hero.css) and the footer's top (below). Without mask support every edge stays
   straight (@supports). */
:root {
  --cdb-depth: clamp(1rem, 2.95vw, 2.25rem);   /* 16px on phones, about 34px at 1160, 36px max */
  --cdb-below: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 4C360 52 980 76 1440 14V64H0Z'/%3E%3C/svg%3E");
  --cdb-above: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 4C360 52 980 76 1440 14V0H0Z'/%3E%3C/svg%3E");
}
.cd-band-dark {
  position: relative;
  isolation: isolate;
  background: none;   /* tokens.css paints the band; here the ::before does, shaped */
  padding-block: max(var(--cd-section-y), calc(var(--cdb-depth) + var(--cd-space-6)));
}
.cd-band-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  --cdm-glow: rgba(var(--cd-teal-glow-rgb), var(--cd-band-glow-alpha));
  --cdm-base: var(--cd-surface);
}
/* The dark-surface recipe, shared by the dark bands and the Plans tier media: the base colour and
   one stationary corner glow, top right, in the surface's own hue at --cd-band-glow-alpha. */
.cd-band-dark::before,
.cd-tierart {
  background: radial-gradient(ellipse 45% 75% at 100% 0%, var(--cdm-glow) 0%, transparent 70%), var(--cdm-base);
}
.cd-curve-b::before { transform: scaleX(-1); }
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
  .cd-band-dark::before {
    /* Three layers: the curved top strip, the straight middle (overlapping each strip by 2px so no
       seam shows at fractional zoom), the curved bottom strip. */
    -webkit-mask:
      var(--cdb-below) top / 100% var(--cdb-depth) no-repeat,
      linear-gradient(black, black) center / 100% calc(100% - 2 * var(--cdb-depth) + 4px) no-repeat,
      var(--cdb-above) bottom / 100% var(--cdb-depth) no-repeat;
    mask:
      var(--cdb-below) top / 100% var(--cdb-depth) no-repeat,
      linear-gradient(black, black) center / 100% calc(100% - 2 * var(--cdb-depth) + 4px) no-repeat,
      var(--cdb-above) bottom / 100% var(--cdb-depth) no-repeat;
  }
  /* The footer's top edge (Dan, 2026-10-27): the dark footer rises into the section above along
     the same curve. The strip sits in that section's bottom padding (every page ends on a white
     call-to-action band, whose own edges stay straight, so no double curve). */
  .cd-site-footer { position: relative; }
  .cd-site-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% - 1px);   /* 1px into the footer, so no seam shows at fractional zoom */
    height: var(--cdb-depth);
    background: var(--cd-surface-dark);
    pointer-events: none;
    -webkit-mask: var(--cdb-below) 0 0 / 100% 100% no-repeat;
    mask: var(--cdb-below) 0 0 / 100% 100% no-repeat;
  }
}
/* On a dark band (the roles come from .cd-theme-dark): headings aqua, body mist, links underlined
   bright aqua, cards opaque. The comparison table keeps its structure; its header and group rows
   take the card color. */
.cd-theme-dark .cd-compare thead th:not([scope="col"]),
.cd-theme-dark .cd-compare thead td,
.cd-theme-dark .cd-compare-group th { background: var(--cd-card-bg); }
.cd-theme-dark .cd-compare thead th { border-bottom-color: var(--cd-heading); }
.cd-theme-dark .cd-channels { border-top-color: var(--cd-heading); }
.cd-theme-dark .cd-links a { text-decoration-line: underline; }
.cd-page-eyebrow {
  margin: 0;
  padding: var(--cd-space-6) var(--cd-gutter) 0;
  text-align: center;
  font-size: var(--cd-text-xs);
  font-weight: var(--cd-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cd-teal);
}

/* Lists inside sections carry no bullets or indents of their own. */
.cd-grid,
.cd-channels,
.cd-links,
.cd-steps { margin: 0; padding: 0; list-style: none; }

/* ── Text pieces ───────────────────────────────────────────────────────────────────────────── */
.cd-narrow { max-width: var(--cd-measure); margin-inline: auto; }
.cd-centred { text-align: center; }
.cd-centred .cd-narrow,
.cd-narrow.cd-centred { margin-inline: auto; }
.cd-eyebrow {
  margin: 0 0 var(--cd-space-3);
  font-size: var(--cd-text-xs);
  font-weight: var(--cd-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cd-teal);
}
.cd-lede p { font-size: var(--cd-text-lg); line-height: 1.55; color: var(--cd-ink-2); }
.cd-body p { color: var(--cd-ink-2); }
.cd-section-head { max-width: 47.5rem; margin: 0 auto var(--cd-space-7); }
.cd-section-head .cd-lede p:last-child { margin-bottom: 0; }
/* A section whose heading is visually hidden (Plans tiers, Dan 2026-10-27) keeps no gap for it. */
.cd-section-head:has(> h2.cd-visually-hidden:only-child) { margin-bottom: 0; }
/* Two desktop lines when the data sets headlineBreak or bodyBreak; one run on phones. */
.cd-hline { display: block; }

.cd-actions { margin: var(--cd-space-5) 0 0; }
.cd-links { display: flex; flex-wrap: wrap; gap: var(--cd-space-2) var(--cd-space-5); margin-top: var(--cd-space-5); }
.cd-centred .cd-links { justify-content: center; }
.cd-links li { font-weight: var(--cd-weight-semibold); }
.cd-links-arrow { display: inline-block; margin-left: 0.35em; color: var(--cd-teal); }
/* The arrow nudges 2px toward its link's target on hover or focus; never under reduced motion or
   the stored pause. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.clue-motion-paused) .cd-links-arrow { transition: transform var(--cd-duration-fast) var(--cd-ease-out); }
  html:not(.clue-motion-paused) .cd-links li:hover .cd-links-arrow,
  html:not(.clue-motion-paused) .cd-links a:focus-visible + .cd-links-arrow { transform: translateX(var(--cd-nudge)); }
}

/* ── Images and placeholders ───────────────────────────────────────────────────────────────── */
.cd-figure { margin: 0; }
.cd-figure img { width: 100%; }
/* A real asset in a slot fills its container's width at the slot's aspect ratio, never inside a
   mat or padding (Dan, 2026-10-27).
   - Small and standalone (the Home feature grid, the How We Work steps): the bowed frame below,
     with 12px corners.
   - Large (splits, the recording, showcases, wide images): a plain rounded rectangle, 20px,
     with the hairline.
   - In a card (Plans tiers): no bow, radius or hairline; it runs to the card's top and side edges
     and takes the card's corners through the card's overflow clip. */
.cd-media-img,
.cd-recording-video { border-radius: var(--cd-radius-panel); }
.cd-media-img { border: var(--cd-hairline); }
.cd-figure:is(.cd-small, .cd-step-image, .cd-portrait) .cd-media-img { border-radius: var(--cd-radius-card); }
/* The bowed frame (small standalone images, figure.cd-bow): js/hero-motion.js draws a mask for
   the image's real size (bowed edges, the image's own 12px corners) into --cdm-bow and adds
   cd-bowed. A soft drop shadow on the unmasked figure replaces the hairline and follows the shape.
   Until then, or without mask support, the image keeps its plain rounded rectangle and hairline. */
.cd-bow.cd-bowed .cd-media-img {
  border: 0;
  border-radius: 0;
  -webkit-mask: var(--cdm-bow) 0 0 / 100% 100% no-repeat;
  mask: var(--cdm-bow) 0 0 / 100% 100% no-repeat;
}
.cd-bow.cd-bowed { filter: drop-shadow(0 0 0.5px var(--cd-line-strong)) drop-shadow(0 1px 1px var(--cd-line)); }

/* A recording: the loop sits over its poster image and shows only while motion is possible
   (html.cd-hero-motion, never under reduced motion); its small pause icon sits under its
   bottom right corner, on the band, where the glyph keeps its contrast. */
.cd-recording-frame { position: relative; }
/* The loop covers its poster, so it carries the same hairline and radius while it plays. */
.cd-recording-video { border: var(--cd-hairline); }
.cd-recording-video {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.cd-hero-motion .cd-recording-video { display: block; }
.cd-motion-toggle.cd-recording-toggle { margin: var(--cd-space-1) 0 0 auto; }
.cd-hero-motion .cd-motion-toggle.cd-recording-toggle { display: flex; }
@media (prefers-reduced-motion: reduce) {
  .cd-recording-video,
  .cd-motion-toggle.cd-recording-toggle { display: none !important; }
}
/* An image slot without its art: a block at the slot's aspect ratio (set inline from the data)
   showing the slot's description. data-cd-placeholder marks it for the launch check. */
.cd-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: var(--cd-space-4);
  border: 1px dashed var(--cd-line-strong);
  border-radius: var(--cd-radius-panel);
  background: var(--cd-surface-tint);
  color: var(--cd-muted);
  font-size: var(--cd-text-sm);
  line-height: var(--cd-leading-snug);
  text-align: center;
}
.cd-theme-dark .cd-ph { background: var(--cd-card-bg); }
.cd-ph:is(.cd-small, .cd-step-image, .cd-portrait) { border-radius: var(--cd-radius-card); }
.cd-ph.cd-wide,
.cd-figure.cd-wide { margin-top: var(--cd-space-8); }
/* Image to heading: 24px. Heading to body: 12px (below). */
.cd-ph.cd-small,
.cd-figure.cd-small { margin-bottom: var(--cd-space-5); }
.cd-ph.cd-portrait,
.cd-figure.cd-portrait { margin-bottom: var(--cd-space-5); aspect-ratio: 1 / 1; }

/* ── Grids and items ───────────────────────────────────────────────────────────────────────── */
.cd-grid { display: grid; gap: var(--cd-space-7) var(--cd-space-6); }
.cd-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cd-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cd-item p { font-size: var(--cd-text-sm); }
:is(.cd-item, .cd-card, .cd-step, .cd-channel, .cd-person) > h3 { margin-bottom: var(--cd-space-3); }
.cd-item p:last-child,
.cd-card p:last-child { margin-bottom: 0; }

/* Two-line item headings: a small kicker above the main line, one heading. */
h3.cd-two-line .cd-kicker,
h3.cd-two-line .cd-headline-main { display: block; }
h3.cd-two-line .cd-kicker {
  margin-bottom: var(--cd-space-1);
  font-size: var(--cd-text-xs);
  font-weight: var(--cd-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cd-teal);
}
h3.cd-two-line .cd-headline-main { font-size: 1.3rem; font-weight: var(--cd-weight-bold); color: var(--cd-heading); }

/* Features grid: each item is image / heading / body on shared row tracks (subgrid), so
   headings and body text line up across a row. */
.cd-features-grid > .cd-item {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
}
.cd-features-grid > .cd-item > h3 { align-self: start; }
/* 3 columns wide, 2 on intermediate widths, 1 on phones (the phone rule is below). */
@media (min-width: 47.5625em) and (max-width: 64em) {
  .cd-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Run-in items: a bold lead-in that continues as one sentence. */
.cd-lead-in { font-weight: var(--cd-weight-bold); color: var(--cd-heading); }
.cd-channel .cd-run-in p:first-child { font-size: 1.0625rem; }
.cd-channel .cd-lead-in,
.cd-person .cd-lead-in { font-size: 1.2em; letter-spacing: var(--cd-tracking-tight); }

/* ── split ─────────────────────────────────────────────────────────────────────────────────── */
.cd-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--cd-space-8);
  align-items: center;
}
.cd-is-even .cd-split-media { order: -1; }
/* mediaSide overrides the alternation. */
.cd-split.cd-media-left .cd-split-media { order: -1; }
.cd-split.cd-media-right .cd-split-media { order: 0; }
.cd-split-text .cd-body p:last-child { margin-bottom: 0; }
/* "You Speak Dental, / Your Website Speaks Patient" holds its two lines in the half-width column. */
#assistant h2 { font-size: clamp(1.5rem, 3.25vw, 2.35rem); }

/* Charts (inline SVG from the lineChart filter): one teal line, hairline grid, text in the text
   greys. Sizes inside the SVG are in its own units (400 wide), scaled with the column. */
.cd-chart-note {
  margin: 0 0 var(--cd-space-5);
  font-size: var(--cd-text-xs);
  font-weight: var(--cd-weight-semibold);
  letter-spacing: 0.02em;
  color: var(--cd-ink-2);
}
.cd-chart {
  margin: 0 0 var(--cd-space-5);
  padding: var(--cd-space-4) var(--cd-space-5) var(--cd-space-5);
  border: var(--cd-hairline);
  border-radius: var(--cd-radius-card);
  background: var(--cd-card-bg);
  box-shadow: var(--cd-shadow-card);
}
.cd-chart:last-child { margin-bottom: 0; }
.cd-chart-title { margin-bottom: var(--cd-space-2); font-size: 1rem; }
.cd-chart figcaption { margin-top: var(--cd-space-2); font-size: var(--cd-text-xs); color: var(--cd-muted); }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-svg text { font-family: inherit; font-size: 12px; fill: var(--cd-muted); font-variant-numeric: tabular-nums; }
.chart-svg .chart-value { font-size: 13px; font-weight: var(--cd-weight-bold); fill: var(--cd-ink); }
.chart-grid { stroke: var(--cd-line); stroke-width: 1; }
.chart-axis { stroke: var(--cd-line-strong); stroke-width: 1; }
.chart-line { fill: none; stroke: var(--cd-chart-line); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { fill: var(--cd-chart-line); stroke: var(--cd-card-bg); stroke-width: 2; }
.chart-hit { fill: transparent; }

/* ── steps: numbered, side by side ─────────────────────────────────────────────────────────── */
.cd-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cd-space-7); }
/* A 44px aqua circle with the step's number (decoration; the list carries the numbers), and on
   desktop a hairline connector running on to the next step's circle across the gap. */
.cd-step-num {
  display: flex;
  align-items: center;
  gap: var(--cd-space-3);
  margin-bottom: var(--cd-space-4);
}
.cd-step-dot {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--cd-teal-glow);
  color: var(--cd-ink);   /* 8:1 on the aqua circle (steps sit on light bands) */
  font-size: var(--cd-text-lg);
  font-weight: var(--cd-weight-bold);
  line-height: 1;
}
.cd-step:not(:last-child) .cd-step-num { margin-right: calc(-1 * var(--cd-space-7)); }
.cd-step:not(:last-child) .cd-step-num::after {
  content: "";
  flex: 1;
  margin-right: var(--cd-space-3);
  border-top: 2px dotted var(--cd-line-strong);
}
.cd-step h3 { font-size: 1.35rem; font-weight: var(--cd-weight-bold); }
.cd-step .cd-body p { font-size: var(--cd-text-sm); }
.cd-ph.cd-step-image,
.cd-figure.cd-step-image { margin-bottom: var(--cd-space-5); }

/* ── pair: two sections in one band, each with its own h2 ─────────────────────────────────── */
.cd-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cd-space-8); }
.cd-pair-cell + .cd-pair-cell { padding-left: var(--cd-space-6); margin-left: calc(-1 * var(--cd-space-6)); border-left: 1px solid var(--cd-line); }
.cd-pair-cell .cd-narrow { max-width: none; margin: 0; }
.cd-pair-cell h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }

/* ── channels ──────────────────────────────────────────────────────────────────────────────── */
.cd-channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--cd-teal); }
.cd-channel { padding: var(--cd-space-6) var(--cd-space-6) var(--cd-space-2); border-right: 1px solid var(--cd-line); }
.cd-channel:last-child { border-right: 0; }
.cd-channel h3 { font-size: var(--cd-text-xl); font-weight: var(--cd-weight-bold); }
/* Exactly four channels: two by two, a hairline between the rows. Three-item sections are untouched. */
.cd-channels:has(> .cd-channel:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cd-channels:has(> .cd-channel:nth-child(4):last-child) > .cd-channel:nth-child(2n) { border-right: 0; }
.cd-channels:has(> .cd-channel:nth-child(4):last-child) > .cd-channel:nth-child(n+3) { border-top: 1px solid var(--cd-line); }

/* ── compare: a real table; tier columns share the width, row labels take the rest ────────── */
/* position: relative keeps the hidden "Included" words inside the scroller, not off the page edge. */
/* A 12px frame; the last row drops its hairline so the frame's own edge closes the table. */
.cd-compare-scroll { position: relative; max-width: 60rem; margin: 0 auto; overflow-x: auto; border: var(--cd-hairline); border-radius: var(--cd-radius-card); background: var(--cd-card-bg); }
.cd-compare tbody:last-child tr:last-child > * { border-bottom: 0; }
.cd-compare {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--cd-text-sm);
  line-height: 1.4;
  overflow-wrap: normal; /* words wrap whole; below the minimum width the wrapper scrolls instead */
}
.cd-compare-corner { width: 34%; }
.cd-compare th,
.cd-compare td { padding: var(--cd-space-3) 0.875rem; border-bottom: 1px solid var(--cd-line); vertical-align: middle; }
.cd-compare td { text-align: center; color: var(--cd-ink-2); }
.cd-compare thead th { padding-bottom: 0.875rem; border-bottom: 2px solid var(--cd-teal); text-align: center; vertical-align: bottom; }
.cd-compare thead .cd-kicker { display: block; margin-bottom: 0.125rem; font-size: var(--cd-text-xs); font-weight: var(--cd-weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--cd-teal); }
.cd-compare thead .cd-tier-name { display: block; font-size: 1.1rem; font-weight: var(--cd-weight-bold); color: var(--cd-heading); }
/* Each tier's header cell takes the tier's colour from its card above (Dan, 2026-10-27), drawn as
   a block with rounded top corners and a little space either side (cells in a collapsed table
   cannot round their own corners, so a layer behind the text does it). White tier name, the
   kicker in the footer's light grey: both well above 4.5:1 on all three colours. */
.cd-compare thead th[scope="col"] { position: relative; z-index: 0; background: none; }
.cd-compare thead th[scope="col"]::before {
  content: "";
  position: absolute;
  inset: 0.375rem 0.25rem 0;
  z-index: -1;
  border-radius: var(--cd-radius-card) var(--cd-radius-card) 0 0;
  background: var(--cdm-th-bg);
}
.cd-compare thead th[scope="col"]:nth-child(2) { --cdm-th-bg: var(--cd-tier-1-bg); }
.cd-compare thead th[scope="col"]:nth-child(3) { --cdm-th-bg: var(--cd-tier-2-bg); }
.cd-compare thead th[scope="col"]:nth-child(4) { --cdm-th-bg: var(--cd-tier-3-bg); }
.cd-compare thead th[scope="col"] .cd-tier-name { color: var(--cd-on-dark); }
.cd-compare thead th[scope="col"] .cd-kicker { color: var(--cd-on-dark-muted); }
.cd-compare tbody th[scope="row"] { text-align: left; font-weight: var(--cd-weight-semibold); color: var(--cd-heading); }
.cd-compare-group th {
  padding-top: var(--cd-space-6);
  padding-bottom: var(--cd-space-2);
  text-align: left;
  font-size: var(--cd-text-xs);
  font-weight: var(--cd-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cd-muted);
  border-bottom-color: var(--cd-line-strong);
}
/* Inline icons: base.css makes svg a block, so the check mark sets its own display. */
.cd-mark-yes { display: inline-block; vertical-align: middle; width: 1.375rem; height: 1.375rem; fill: var(--cd-teal); }
.cd-mark-no::before { content: "\2013"; color: var(--cd-muted); }
/* A level meter: rounded segments, filled in the brand aqua, empty ones outlined in the control
   line color (at least 3:1 on the table's card surface, light or dark). Decorative; the cell's
   hidden words carry the level. */
.cd-meter { display: inline-flex; gap: 0.25rem; vertical-align: middle; }
.cd-meter-seg {
  width: 1.125rem;
  height: 0.5rem;
  border: 1.5px solid var(--cd-line-strong);
  border-radius: var(--cd-radius-pill);
}
.cd-meter-seg.cd-is-on { border-color: var(--cd-heading); background: var(--cd-heading); }
.cd-theme-dark .cd-meter-seg.cd-is-on { border-color: var(--cd-teal-glow); background: var(--cd-teal-glow); }
.cd-compare-note { max-width: 60rem; margin: var(--cd-space-4) auto 0; font-size: var(--cd-text-xs); color: var(--cd-muted); }

/* ── stat ──────────────────────────────────────────────────────────────────────────────────── */
.cd-stat {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--cd-space-8);
  align-items: stretch;
}
.cd-stat-head { display: flex; flex-direction: column; }
.cd-stat-head h2 { margin-bottom: 0; }
.cd-figure.cd-head-art { margin: -1.875rem 0 -3.5rem; align-self: flex-end; width: 55%; }
.cd-stat-body p { font-size: 1.15rem; color: var(--cd-ink-2); }
.cd-stat-body p:last-child { margin-bottom: 0; }
.figure {
  font-size: 1.6em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cd-teal);
}

/* ── cards ─────────────────────────────────────────────────────────────────────────────────── */
.cd-card {
  padding: var(--cd-space-5);
  border: var(--cd-hairline);
  border-radius: var(--cd-radius-card);
  background: var(--cd-card-bg);
  box-shadow: var(--cd-shadow-card);
}
.cd-card .cd-body p { font-size: var(--cd-text-sm); }
.cd-card { overflow: clip; }
.cd-card > .cd-figure.cd-media:first-child {
  margin: calc(-1 * var(--cd-space-5)) calc(-1 * var(--cd-space-5)) var(--cd-space-5);
}
.cd-card > .cd-figure.cd-media:first-child .cd-media-img { border: 0; border-radius: 0; }

/* ── team ──────────────────────────────────────────────────────────────────────────────────── */
.cd-team { max-width: 53.75rem; margin: 0 auto; }
.cd-person .cd-body p { font-size: var(--cd-text-base); }
.cd-team-close { margin-top: var(--cd-space-7); }
.cd-team-close .cd-body p:last-child { margin-bottom: 0; }

/* ── showcase ──────────────────────────────────────────────────────────────────────────────── */
.cd-ph.cd-showcase-image,
.cd-figure.cd-showcase-image { margin-top: 0; }
/* An identity board is the image itself: full width, the panel radius and the hairline, no mat
   (Dan, 2026-10-27: images are the size of their container). The wrapper only carries the fade. */
.cd-showcase-caption { margin-top: var(--cd-space-6); }
.cd-showcase-caption h2 { margin-bottom: 0; }
.cd-showcase-items { margin-top: var(--cd-space-6); }

/* ── cta: a tinted box inside its band, so it never meets the band edges ──────────────────── */
/* The closing band starts close under the band above (Dan, 2026-10-27: about half the old space).
   After a white band its own top padding goes, leaving the band above's bottom padding as the gap;
   after a dark band it adds back that band's curve depth plus 3rem, so the panel clears the curved
   edge comfortably (the rule follows any dark band, not one page). Its bottom padding, above the
   footer's curve, is unchanged. */
.cd-s.cd-s-cta { padding-top: 0; }
.cd-band-dark + .cd-s.cd-s-cta { padding-top: calc(var(--cdb-depth) + var(--cd-space-7)); }
.cd-cta-box {
  position: relative;
  max-width: 47.5rem;
  margin: 0 auto;
  padding: 3.5rem var(--cd-space-6);
  border: var(--cd-hairline);
  border-radius: var(--cd-radius-panel);
  background: var(--cd-cta-glow), var(--cd-cta-bg);
}
/* Two still doodles from the hero's art, in opposite corners, inside the panel's padding. */
.cd-cta-doodle {
  position: absolute;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--cd-doodle-ink);
  opacity: var(--cd-doodle-alpha);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.cd-cta-doodle-a { top: var(--cd-space-4); left: var(--cd-space-5); rotate: -8deg; }
.cd-cta-doodle-b { right: var(--cd-space-5); bottom: var(--cd-space-4); width: 1.5rem; height: 1.5rem; }
.cd-cta-box > h2:last-child { margin-bottom: 0; }
.cd-cta-box .cd-lede p:last-child { margin-bottom: 0; }

/* ── legal: the Privacy Policy and Terms of Use (sections/legal.njk) ──────────────────────────── */
/* One numbered part per section, the parts stacked as one reading column of about 70 characters,
   left aligned under the page hero. The bands give up their own padding so the parts read as one
   document: the first part takes the band spacing above, the last the spacing below. The hero's
   lede is the "Last updated" line, set small and muted. The summary part is a pale aqua box with a
   hairline. Section headings are smaller than marketing h2s: they are numbered document parts. */
.cd-s-hero:has(+ .cd-s-legal) .cd-lede p { font-size: var(--cd-text-base); color: var(--cd-muted); }
.cd-s.cd-s-legal { padding-block: 0; }
.cd-s-hero + .cd-s-legal { padding-top: var(--cd-section-y); }
.cd-s.cd-s-legal:last-child { padding-bottom: var(--cd-section-y); }
.cd-s-legal + .cd-s-legal { padding-top: var(--cd-space-6); }
.cd-legal { max-width: var(--cd-measure); margin-inline: auto; }
.cd-legal h2 { font-size: var(--cd-text-xl); line-height: var(--cd-leading-snug); margin-bottom: var(--cd-space-3); }
.cd-legal p,
.cd-legal li { color: var(--cd-ink-2); }
.cd-legal ul { margin: 0 0 1em; padding-left: 1.25em; }
.cd-legal li { margin-bottom: var(--cd-space-2); padding-left: 0.25em; }
.cd-legal li::marker { color: var(--cd-teal); }
.cd-legal > :last-child,
.cd-legal > ul:last-child > li:last-child { margin-bottom: 0; }
.cd-legal-summary {
  padding: var(--cd-space-5) var(--cd-space-6);
  background: var(--cd-surface-tint);
  border: var(--cd-hairline);
  border-radius: var(--cd-radius-card);
}
.cd-s-legal + .cd-s-legal:has(.cd-legal-summary),
.cd-s-legal:has(.cd-legal-summary) + .cd-s-legal { padding-top: var(--cd-space-7); }
@media (max-width: 47.5em) {
  .cd-legal-summary { padding: var(--cd-space-4) var(--cd-space-4); }
}

/* ── Phones: one column ────────────────────────────────────────────────────────────────────── */
@media (max-width: 47.5em) {
  .cd-hline { display: inline; }
  .cd-grid-2,
  .cd-grid-3,
  .cd-split,
  .cd-stat,
  .cd-steps,
  .cd-pair,
  .cd-channels { grid-template-columns: minmax(0, 1fr); gap: var(--cd-space-6); }
  .cd-is-even .cd-split-media,
  .cd-split.cd-media-left .cd-split-media { order: 0; }
  .cd-section-head { margin-bottom: var(--cd-space-6); }
  .cd-pair { gap: var(--cd-space-7); }
  .cd-pair-cell + .cd-pair-cell { padding: var(--cd-space-7) 0 0; margin: 0; border-left: 0; border-top: 1px solid var(--cd-line); }
  .cd-channel { border-right: 0; border-bottom: 1px solid var(--cd-line); padding: var(--cd-space-5) 0 var(--cd-space-4); }
  .cd-channels { gap: 0; } /* stacked icon lists: the divider and padding space the items (mobile polish, 2026-10-27) */
  .cd-channel:last-child { border-bottom: 0; }
  .cd-channels:has(> .cd-channel:nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); }
  .cd-channels:has(> .cd-channel:nth-child(4):last-child) > .cd-channel:nth-child(n+3) { border-top: 0; }
  .cd-figure.cd-head-art { margin: var(--cd-space-4) auto -1rem; align-self: center; width: min(55%, 14rem); }
  /* The table keeps a 340px minimum (21.25rem at the default text size) and scrolls inside its
     own focusable wrapper below that, or at high zoom. */
  .cd-compare { min-width: 21.25rem; font-size: var(--cd-text-xs); }
  .cd-compare-corner { width: 37%; }
  .cd-compare th,
  .cd-compare td { padding: 0.625rem 0.25rem; }
  .cd-compare thead .cd-tier-name { font-size: 0.95rem; }
  .cd-compare thead .cd-kicker { font-size: 0.75rem; }
  .cd-compare thead th[scope="col"]::before { inset: 0.25rem 0.125rem 0; border-radius: var(--cd-radius-control) var(--cd-radius-control) 0 0; }
  .cd-compare-group th { padding-top: 1.375rem; font-size: 0.75rem; }
  .cd-cta-box { padding: 2.75rem 1.25rem; }
  .cd-cta-doodle-a { top: var(--cd-space-2); left: var(--cd-space-3); width: 1.75rem; height: 1.75rem; }
  .cd-cta-doodle-b { right: var(--cd-space-3); bottom: var(--cd-space-2); }
  /* Stacked steps: no connector. */
  .cd-step:not(:last-child) .cd-step-num { margin-right: 0; }
  .cd-step:not(:last-child) .cd-step-num::after { content: none; }
  .cd-ph.cd-wide,
  .cd-figure.cd-wide { margin-top: var(--cd-space-7); }
  .cd-figure.cd-showcase-image { margin-top: 0; } /* the board leads its section, as on desktop */
}

/* ── Starfield and the floating robot (Home "AI-Savvy, Not AI-Slop"; Dan, 2026-10-27) ──────────
   A band whose stat section sets "starfield": true gets more vertical room, a robot that hovers,
   and stars streaming past it. Flight line: measured on the robot art (toothority-robot-flying.svg,
   the jet flames' centroid to the eyes' centroid) at 56 degrees above horizontal, up and right; the
   stars move the opposite way, down and left, so he flies through them.
   - Layers: three repeating tiles (far, mid, near), each a large square rotated onto the flight
     line, whose tile scrolls exactly one tile width per loop (seamless; transform only). Dots and
     short streaks along the line, aqua and white at low opacity (the brightest star pixel keeps the
     band's heading above 3:1 and its body text above 4.5:1; check migration measures it).
   - Motion only under html.cd-hero-motion; frozen under html.clue-motion-paused and while the band
     is off screen (js/hero-motion.js adds cd-offscreen); under reduced motion the stars stay still
     and the robot does not float.
   - The field is clipped to the band's curved shape by the same mask as the band's fill. */
.cd-s:has(> .cd-wrap > .cd-stars) {
  --cdm-star-rot: -56deg;   /* the flight line: x axis turned 56deg up from horizontal */
  padding-block: calc(1.3 * max(var(--cd-section-y), calc(var(--cdb-depth) + var(--cd-space-6))));
}
.cd-stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
/* A mirrored band mirrors its mask; the stars turn the other way first, so they still stream
   along the robot's line. */
.cd-curve-b > .cd-wrap > .cd-stars { transform: scaleX(-1); }
.cd-curve-b:has(> .cd-wrap > .cd-stars) { --cdm-star-rot: -124deg; }
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
  .cd-s > .cd-wrap > .cd-stars {
    -webkit-mask:
      var(--cdb-below) top / 100% var(--cdb-depth) no-repeat,
      linear-gradient(black, black) center / 100% calc(100% - 2 * var(--cdb-depth) + 4px) no-repeat,
      var(--cdb-above) bottom / 100% var(--cdb-depth) no-repeat;
    mask:
      var(--cdb-below) top / 100% var(--cdb-depth) no-repeat,
      linear-gradient(black, black) center / 100% calc(100% - 2 * var(--cdb-depth) + 4px) no-repeat,
      var(--cdb-above) bottom / 100% var(--cdb-depth) no-repeat;
  }
}
.cd-stars-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200rem;
  height: 200rem;
  margin: -100rem 0 0 -100rem;
  transform: rotate(var(--cdm-star-rot));
  will-change: transform;
}
/* Tiles, drawn along the flight line (x): dots, and streaks as thin ellipses lying on the line. */
/* Brightest single star: white at 0.2, aqua at 0.34. Over the band that keeps the aqua heading at
   about 3.4:1 (above the 3:1 large-text bar) and body text above 9:1; white above 0.2 would not. */
.cd-stars-far {
  --cdm-tile: 13.75rem;   /* 220px a loop */
  background:
    radial-gradient(circle at 30px 40px, rgba(255, 255, 255, 0.2) 0 0.7px, transparent 1.3px),
    radial-gradient(circle at 150px 20px, rgba(var(--cd-teal-glow-rgb), 0.32) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 95px 120px, rgba(255, 255, 255, 0.18) 0 0.7px, transparent 1.3px),
    radial-gradient(circle at 190px 150px, rgba(var(--cd-teal-glow-rgb), 0.27) 0 0.7px, transparent 1.3px),
    radial-gradient(circle at 60px 160px, rgba(255, 255, 255, 0.16) 0 0.6px, transparent 1.2px);
  background-size: var(--cdm-tile) 10.625rem;
}
.cd-stars-mid {
  --cdm-tile: 21.25rem;   /* 340px a loop */
  background:
    radial-gradient(circle at 60px 70px, rgba(255, 255, 255, 0.2) 0 1px, transparent 1.7px),
    radial-gradient(ellipse 18px 0.9px at 230px 30px, rgba(var(--cd-teal-glow-rgb), 0.34), transparent),
    radial-gradient(circle at 290px 200px, rgba(var(--cd-teal-glow-rgb), 0.32) 0 1px, transparent 1.7px),
    radial-gradient(ellipse 15px 0.8px at 140px 230px, rgba(var(--cd-teal-glow-rgb), 0.3), transparent),
    radial-gradient(circle at 200px 130px, rgba(255, 255, 255, 0.18) 0 0.8px, transparent 1.4px);
  background-size: var(--cdm-tile) 16.25rem;
}
.cd-stars-near {
  --cdm-tile: 32.5rem;    /* 520px a loop */
  background:
    radial-gradient(ellipse 37px 1.1px at 110px 90px, rgba(var(--cd-teal-glow-rgb), 0.34), transparent),
    radial-gradient(circle at 400px 40px, rgba(255, 255, 255, 0.2) 0 1.2px, transparent 2px),
    radial-gradient(ellipse 29px 1px at 330px 300px, rgba(var(--cd-teal-glow-rgb), 0.34), transparent),
    radial-gradient(ellipse 24px 0.9px at 470px 190px, rgba(255, 255, 255, 0.2), transparent);
  background-size: var(--cdm-tile) 23.75rem;
}
/* Loop times: far 12.6s, mid 9.8s, near 8.4s (one tile each; the ratio sets the depth). */
.cd-hero-motion .cd-stars-far { animation: cd-stars-stream 12.6s linear infinite; }
.cd-hero-motion .cd-stars-mid { animation: cd-stars-stream 9.8s linear infinite; }
.cd-hero-motion .cd-stars-near { animation: cd-stars-stream 8.4s linear infinite; }
@keyframes cd-stars-stream {
  from { transform: rotate(var(--cdm-star-rot)) translateX(0); }
  to { transform: rotate(var(--cdm-star-rot)) translateX(calc(-1 * var(--cdm-tile))); }
}
/* The robot hovers: a few px of drift and about a degree of tilt, on an 8s loop. */
.cd-hero-motion .cd-s:has(.cd-stars) .cd-head-art img { animation: cd-robot-hover 8s ease-in-out infinite; }
@keyframes cd-robot-hover {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(0.25rem, -0.3125rem) rotate(-1deg); }
  66% { transform: translate(-0.125rem, -0.4375rem) rotate(0.6deg); }
}
/* Frozen in place (same weight as the rules that start them, so they win): paused or off screen. */
.cd-hero-motion.clue-motion-paused .cd-s:has(.cd-stars) .cd-stars-layer,
.cd-hero-motion.clue-motion-paused .cd-s:has(.cd-stars) .cd-head-art img,
.cd-hero-motion .cd-s.cd-offscreen:has(.cd-stars) .cd-stars-layer,
.cd-hero-motion .cd-s.cd-offscreen:has(.cd-stars) .cd-head-art img { animation-play-state: paused; }

/* ── Plans tier art (tier-art.njk; Dan, 2026-10-27) ───────────────────────────────────────────
   The media area of each "Find Your Fit" card: a 3:2 box in the tier's own dark colour with the
   AI-Savvy starfield streaming behind, the
   laptop large in the middle (I3's parts, tinted per tier), and every feature the tier includes as
   a round icon bubble on an irregular necklace around it. src/_data/tierRing.js places and sizes
   each bubble and sets its motion values, all relative to the box (cqw: the box is the container),
   so the whole composition scales with the card. No labels at rest: a label opens beside its
   bubble on hover, focus or tap (.cd-open, js/hero-motion.js "Tier labels"), allowed past the box
   (nothing here clips), and the script flips it inward near the window edge.
   Motion, on transform, nested so the parts compose: .cd-tf-x drifts sideways and .cd-tf-y up and
   down (y 1.3x as fast, so each bubble wanders), .cd-tf-r rocks about 2deg on its own slower
   cycle, the shadow breathes with the rise and fall, and the button rests at 0.95-1 and now and
   then swells to 1.12-1.15 (.cd-swell, js "Swell"). Only under html.cd-hero-motion; frozen at the
   neutral state under the site's pause and off screen, still under reduced motion, and a bubble
   holds still while its label is open. */
.cd-card:has(> .cd-tierart) { overflow: visible; }
.cd-card > .cd-tierart:first-child { margin: calc(-1 * var(--cd-space-5)) calc(-1 * var(--cd-space-5)) var(--cd-space-5); }
.cd-tierart {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  aspect-ratio: 3 / 2;
  border-radius: calc(var(--cd-radius-card) - 1px) calc(var(--cd-radius-card) - 1px) 0 0;
  --cdm-base: var(--cdm-tier-bg);
}
/* Each tier its own dark colour, in the dark bands' recipe (above): a corner glow of the tier's
   hue at the bands' strength (the tier glow tokens are 0.22 and 0.40 alpha, scaled down to
   --cd-band-glow-alpha), and nothing behind the laptop (Dan, 2026-10-27). */
.cd-tierart-1 { --cdm-glow: color-mix(in srgb, var(--cd-tier-1-glow) calc(var(--cd-band-glow-alpha) * 454.5%), transparent); }
.cd-tierart-2 { --cdm-glow: color-mix(in srgb, var(--cd-tier-2-glow) calc(var(--cd-band-glow-alpha) * 250%), transparent); }
.cd-tierart-3 { --cdm-glow: color-mix(in srgb, var(--cd-tier-3-glow) calc(var(--cd-band-glow-alpha) * 250%), transparent); }
.cd-tierart-1 { --cdm-tier-bg: var(--cd-tier-1-bg); --cdm-tier-ink: var(--cd-tier-1-bubble-ink); --cdm-laptop-lid: var(--cd-tier-1-lid); --cdm-laptop-base: var(--cd-tier-1-base); }
.cd-tierart-2 { --cdm-tier-bg: var(--cd-tier-2-bg); --cdm-tier-ink: var(--cd-tier-2-bubble-ink); --cdm-laptop-lid: var(--cd-tier-2-lid); --cdm-laptop-base: var(--cd-tier-2-base); }
.cd-tierart-3 { --cdm-tier-bg: var(--cd-tier-3-bg); --cdm-tier-ink: var(--cd-tier-3-bubble-ink); --cdm-laptop-lid: var(--cd-tier-3-lid); --cdm-laptop-base: var(--cd-tier-3-base); }
/* The AI-Savvy band's starfield (sections.css "Starfield"), behind the laptop and the bubbles:
   the same flight line and look, the box's rounded top corners, and each box's loops started at
   a different point so the three boxes and the band never stream in step. */
.cd-tierart { --cdm-star-rot: -56deg; }
.cd-tierart .cd-stars { border-radius: inherit; }
.cd-tierart-1 .cd-stars-layer { animation-delay: -2.3s; }
.cd-tierart-2 .cd-stars-layer { animation-delay: -5.9s; }
.cd-tierart-3 .cd-stars-layer { animation-delay: -8.1s; }
.cd-tierart-1 .cd-stars-near { animation-delay: -4.4s; }
.cd-tierart-2 .cd-stars-near { animation-delay: -1.7s; }
.cd-tierart-3 .cd-stars-near { animation-delay: -6.6s; }
/* The laptop: 150 of the box's 350 units wide, centred (tierRing.js measures around the same
   artwork). Its overlays share its viewBox; the microsite windows sit above and behind it. */
.cd-tierart-device {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42.857%;
  translate: -50% -50%;
  filter: drop-shadow(var(--cd-laptop-shadow));
}
.cd-part { display: block; width: 100%; height: auto; max-width: none; }
.cd-part-laptop { position: relative; }
.cd-part-overlay-chat,
.cd-part-overlay-sparkle { position: absolute; left: 0; top: 0; }
.cd-part-windows { position: absolute; left: 0; bottom: 84.6%; }
.cd-tf-list { margin: 0; padding: 0; list-style: none; }
.cd-tf {
  position: absolute;
  left: var(--cdm-x);
  top: var(--cdm-y);
  width: var(--cdm-d);
  height: var(--cdm-d);
  translate: -50% -50%;
  z-index: 1;
}
.cd-tf.cd-open { z-index: 4; }
.cd-tf-x,
.cd-tf-y,
.cd-tf-r { position: relative; display: block; width: 100%; height: 100%; }
.cd-tf-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px solid var(--cd-tier-bubble-border);
  border-radius: 50%;
  background: var(--cd-tier-bubble);
  color: var(--cdm-tier-ink);
  cursor: pointer;
  transform: scale(var(--cdm-rest));
  transition: transform 800ms var(--cd-ease-out);
}
/* Every bubble is at least a 44px touch target, whatever its drawn size. */
.cd-tf-btn::before {
  content: "";
  position: absolute;
  inset: min(0px, calc((100% - 2.75rem) / 2));
  border-radius: 50%;
}
.cd-tf-btn .cd-icon { width: 52%; height: 52%; }
/* On the dark box a soft glow around each bubble, not a shadow beneath it; it breathes with the
   bubble's rise and fall. */
.cd-tf-shadow {
  position: absolute;
  inset: -28%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
}
.cd-tf.cd-swell .cd-tf-btn { transform: scale(var(--cdm-big)); }
/* The label: a pill beside its bubble. */
.cd-tf-label {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: none;
  padding: 0.3em 0.75em;
  border: var(--cd-hairline);
  border-radius: var(--cd-radius-pill);
  background: var(--cd-surface);
  box-shadow: var(--cd-shadow-md);
  font-size: 0.875rem;
  font-weight: var(--cd-weight-semibold);
  line-height: 1.2;
  color: var(--cd-heading);
  white-space: nowrap;
}
/* The label never takes the pointer (Dan, 2026-10-27): moving off the bubble, onto the label or
   past it, closes it, and a bubble underneath gets its own hover. */
.cd-tf-label { pointer-events: none; }
/* Its placement changes at once: the script measures it right after (base.css gives every
   property a 0.01ms transition while motion is paused, which would delay the new position by a
   frame and make the measurement stale). */
.cd-tf-label { transition: none; }
.cd-tf.cd-open .cd-tf-label { display: block; }
.cd-tip-r .cd-tf-label { left: calc(100% + 0.375rem); translate: var(--cdm-lx, 0px) -50%; }
.cd-tip-l .cd-tf-label { right: calc(100% + 0.375rem); translate: var(--cdm-lx, 0px) -50%; }
/* Where neither side fits (narrow phones), below the bubble; the script shifts it inside the window. */
.cd-tip-b .cd-tf-label { top: calc(100% + 0.375rem); left: 50%; translate: calc(-50% + var(--cdm-lx, 0px)) 0; }
/* The card's sticker: a small rotated pill over the card's top-right corner, overhanging it. */
.cd-tier-sticker {
  position: absolute;
  top: -0.75rem;
  right: -0.625rem;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin: 0;
  padding: 0.3em 1.05em 0.3em 0.7em;   /* room past the text for the pill's rounded ends */
  border-radius: var(--cd-radius-pill);
  box-shadow: var(--cd-shadow-md);
  font-size: 0.875rem;
  font-weight: var(--cd-weight-bold);
  line-height: 1.2;
  white-space: nowrap;
  rotate: 4deg;
}
.cd-tier-sticker .cd-icon { width: 1.15em; height: 1.15em; }
/* A brighter version of each tier's colour with white bold text (Dan, 2026-10-27); coral only as
   Tier 3's flame. */
.cd-tier-sticker { color: var(--cd-on-dark); }
.cd-tier-sticker-1 { background: var(--cd-tier-1-badge); }
.cd-tier-sticker-2 { background: var(--cd-tier-2-badge); }
.cd-tier-sticker-3 { background: var(--cd-tier-3-badge); }
.cd-part-flame { width: 1.1em; height: auto; }
@container (max-width: 20rem) {
  .cd-tierart .cd-tier-sticker { right: -0.25rem; top: -0.625rem; rotate: 3deg; }
}
@media (max-width: 47.5em) {
  .cd-tier-sticker { right: -0.25rem; top: -0.625rem; rotate: 3deg; }
}
/* The motion: drift on two axes, a slow rock, the shadow keeping time with the rise and fall. */
.cd-hero-motion .cd-tf-x { animation: cd-tf-x calc(var(--cdm-px) / 2) ease-in-out var(--cdm-ox) infinite alternate; }
.cd-hero-motion .cd-tf-y { animation: cd-tf-y calc(var(--cdm-py) / 2) ease-in-out var(--cdm-oy) infinite alternate; }
.cd-hero-motion .cd-tf-r { animation: cd-tf-r calc(var(--cdm-rp) / 2) ease-in-out var(--cdm-ro) infinite alternate; }
.cd-hero-motion .cd-tf-shadow { animation: cd-tf-shadow calc(var(--cdm-py) / 2) ease-in-out var(--cdm-oy) infinite alternate; }
@keyframes cd-tf-x { from { transform: translateX(calc(-1 * var(--cdm-ax))); } to { transform: translateX(var(--cdm-ax)); } }
@keyframes cd-tf-y { from { transform: translateY(calc(-1 * var(--cdm-ay))); } to { transform: translateY(var(--cdm-ay)); } }
@keyframes cd-tf-r { from { transform: rotate(calc(-1 * var(--cdm-ra))); } to { transform: rotate(var(--cdm-ra)); } }
/* The bubble is highest at the start of its y loop: the shadow is smallest and faintest then. */
@keyframes cd-tf-shadow { from { transform: scale(0.8); opacity: 0.55; } to { transform: scale(1.05); opacity: 0.9; } }
/* Paused, off screen: everything back at the neutral state. A bubble with its label open holds
   still where it is. */
.cd-hero-motion.clue-motion-paused :is(.cd-tf-x, .cd-tf-y, .cd-tf-r, .cd-tf-shadow),
.cd-hero-motion .cd-s.cd-offscreen :is(.cd-tf-x, .cd-tf-y, .cd-tf-r, .cd-tf-shadow) { animation: none; }
.cd-hero-motion .cd-tf.cd-open :is(.cd-tf-x, .cd-tf-y, .cd-tf-r, .cd-tf-shadow) { animation-play-state: paused; }
.cd-tf.cd-open .cd-tf-btn { transform: scale(var(--cdm-rest)); }

/* ── Floating (the Plans tier art; any .cd-float) ─────────────────────────────────────────────
   A slow drift of a few px, transform only, each element on its own duration and delay (set in
   the template as --cdm-fdur, --cdm-fdelay, --cdm-fx, --cdm-fy). Same rules as the robot: only
   under html.cd-hero-motion, frozen under the stored pause and while the band is off screen,
   still under reduced motion. */
.cd-hero-motion .cd-float { animation: cd-float var(--cdm-fdur, 7s) ease-in-out var(--cdm-fdelay, 0s) infinite alternate; }
@keyframes cd-float {
  from { transform: translate(0, 0); }
  to { transform: translate(var(--cdm-fx, 3px), var(--cdm-fy, -4px)); }
}
.cd-hero-motion.clue-motion-paused .cd-float,
.cd-hero-motion .cd-s.cd-offscreen .cd-float { animation-play-state: paused; }

/* ── Icon chips (icons.njk): a 24px line icon in a 40px tinted chip, above a channel's heading. ─ */
.cd-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cd-chip-size);
  height: var(--cd-chip-size);
  margin-bottom: var(--cd-space-4);
  border-radius: var(--cd-chip-radius);
  background: var(--cd-chip-bg);
  color: var(--cd-chip-ink);
}
.cd-icon {
  display: block;
  width: var(--cd-chip-icon);
  height: var(--cd-chip-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Reveals (js/hero-motion.js, design pass item 6) ──────────────────────────────────────── */
/* Nothing is hidden unless the script has armed html.cd-reveal-on, which it never does under
   reduced motion or the stored pause, and removes at once when either switches on. Section intros
   and process steps rise 12px over 500ms (steps 70ms apart, capped at 140ms); major media fades
   over 600ms; each reveals once, about 80% down the window. Focused content always shows. The
   feature grid carries no reveal. Charts (data-cd-draw) draw their line once over 700ms; axes,
   labels, dots and values never hide. */
.cd-reveal-on [data-cd-reveal]:not(.cd-in, [data-cd-reveal="fade"]),
.cd-reveal-on [data-cd-reveal-group]:not(.cd-in) > * {
  opacity: 0;
  translate: 0 var(--cd-reveal-distance);
}
.cd-reveal-on [data-cd-reveal="fade"]:not(.cd-in) { opacity: 0; }
.cd-reveal-on [data-cd-reveal],
.cd-reveal-on [data-cd-reveal-group] > * {
  transition:
    opacity var(--cd-duration-reveal) var(--cd-ease-out) var(--cdm-reveal-delay, 0ms),
    translate var(--cd-duration-reveal) var(--cd-ease-out) var(--cdm-reveal-delay, 0ms);
}
.cd-reveal-on [data-cd-reveal="fade"] { transition: opacity var(--cd-duration-media) var(--cd-ease-out); }
.cd-reveal-on [data-cd-reveal-group] > :nth-child(2) { --cdm-reveal-delay: var(--cd-reveal-stagger); }
.cd-reveal-on [data-cd-reveal-group] > :nth-child(n + 3) { --cdm-reveal-delay: var(--cd-reveal-stagger-max); }
.cd-reveal-on .cd-now,
.cd-reveal-on .cd-now > * { transition: none; }
.cd-reveal-on [data-cd-reveal]:focus-within,
.cd-reveal-on [data-cd-reveal-group] > :focus-within { opacity: 1; translate: none; transition: none; }
.cd-reveal-on [data-cd-draw] .chart-line {
  stroke-dasharray: 1 1;
  transition: stroke-dashoffset var(--cd-duration-draw) var(--cd-ease-out);
}
.cd-reveal-on [data-cd-draw]:not(.cd-in) .chart-line { stroke-dashoffset: 1; }
.cd-reveal-on [data-cd-draw].cd-now .chart-line { transition: none; }
@media print {
  .cd-reveal-on [data-cd-reveal],
  .cd-reveal-on [data-cd-reveal-group] > * { opacity: 1 !important; translate: none !important; }
  .cd-reveal-on [data-cd-draw] .chart-line { stroke-dashoffset: 0 !important; }
}