:root {
    --ground: #050a18;
    --band: #0b1329;
    --paper: #ffffff;
    --ink: #f3f5fa;
    --ink-dim: #b9c1d6;
    --navy: #0b1329;
    --navy-dim: #4a5470;
    --accent: #8fbcff;        /* on dark backgrounds */
    --accent-deep: #1e40af;   /* on white backgrounds */
    --veil: 5 10 24;
    --gutter: clamp(20px, 6vw, 104px);
    /* how far the pictures beside the words (the receipt, the Care Plan phone) stand in from the right edge: 64px on a
       laptop and up, easing to nothing near 1000px, where the words need all the width they can get (Barrett, 2026-09-26) */
    --pic-inset: clamp(0px, 16vw - 160px, 64px);
    --ease-out: cubic-bezier(.16, .8, .2, 1);
    color-scheme: dark;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
  }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  a { color: inherit; }
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .wrap { max-width: 1320px; margin: 0 auto; }
  .band { padding: clamp(56px, 9vw, 120px) var(--gutter); }
  .band-dark { background: var(--band); color: var(--ink); }
  .band-light { background: var(--paper); color: var(--navy); }
  .band + .band-dark { border-top: 1px solid rgb(255 255 255 / .06); }
  /* A link to #before-you-pay lands on the No risk band, which is shorter than a screen: the Client work headline below
     it arrived on the same screen, and the two headlines competed. Give it a screen of its own, but only while it is
     the link's target, so nothing moves for a visitor who simply scrolls past it. The content is already centred by
     .offer-grid, so it sits in the middle of the taller band rather than at its top. The hero's "Learn more" was that
     link until it was removed on 2026-09-21; this stays for any old link to the band. */
  #before-you-pay:target { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
  /* the section labels ("No risk", "Client work", "Samples"…): 18px on phones to 20px on a wide screen, in Archivo's
     heaviest loaded weight (800). They were 13px and 700 until Barrett asked for them "larger", then "a little bigger and
     bold" (2026-09-21); the room under them grew with them. */
  .eyebrow {
    margin: 0 0 18px;
    font-size: clamp(18px, .25vw + 16.5px, 20px); font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent);
  }
  .band-light .eyebrow { color: var(--accent-deep); }
  h2 {
    margin: 0 0 18px;
    max-width: 18em;
    font-size: clamp(1.75rem, 2.4vw + .7rem, 3rem);
    font-weight: 700; font-stretch: 105%;
    line-height: 1.06; letter-spacing: -.025em;
    text-wrap: balance;
  }
  .lede { margin: 0; max-width: 40em; font-size: clamp(1.05rem, .4vw + .95rem, 1.3rem); color: var(--ink-dim); }
  .band-light .lede { color: var(--navy-dim); }
  /* The Website: the $1,500 website's case, an introduction, seven points under subheadings, and a close, in one
     readable column (Barrett, 2026-09-24); the introduction and the close are ledes, bookends in the same voice */
  .deal { max-width: 44em; }
  /* the seven points open and shut (Barrett, 2026-09-24: "can the bolded website section headings be drop down menu
     like with a litte caret down on the left"): each a <details>, its heading the summary behind a caret that turns
     over when it opens; all shut at first. Native, so it works with the keyboard and without the script. */
  .deal-points { margin: 32px 0; border-top: 1px solid rgb(11 19 41 / .12); }
  .deal-point { border-bottom: 1px solid rgb(11 19 41 / .12); }
  .deal-point summary { display: flex; align-items: center; gap: 10px; padding: 15px 0; cursor: pointer; list-style: none; border-radius: 6px; }
  .deal-point summary::-webkit-details-marker { display: none; }
  .deal-point summary:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
  .deal-caret { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--accent-deep); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease-out); }
  .deal-point[open] .deal-caret { transform: rotate(180deg); }
  .deal-point h3 { margin: 0; font-size: clamp(1.15rem, .3vw + 1.05rem, 1.35rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; color: var(--navy); transition: color .2s var(--ease-out); }
  .deal-point summary:hover h3 { color: var(--accent-deep); }
  .deal-point p { margin: 0; padding: 0 0 18px 28px; font-size: clamp(1rem, .2vw + .95rem, 1.1rem); line-height: 1.6; color: var(--navy-dim); }
  .deal-point[open] p { animation: deal-open .3s var(--ease-out); }
  @keyframes deal-open { from { opacity: 0; transform: translateY(-6px); } }
  @media (prefers-reduced-motion: reduce) { .deal-caret { transition: none; } .deal-point[open] p { animation: none; } }
  /* ---------- The Website's receipt (Barrett, 2026-09-24: "build the receipt"): what the $1,500 buys, itemized, every
     line "Included", the total, and "Due today $0.00". A navy printer, a slot, and a paper slip with a torn foot. It
     prints once as it comes on screen, top to bottom, each line ticking as it appears, then a "See it first" stamp;
     with reduced motion or without the script it is simply there. From 1000px it stands beside the words and stays in
     view while they are read, and the lines for the point in the middle of the screen light up. Sans-serif like the
     rest: tabular figures, not a typewriter face. ---------- */
  .website-grid { display: grid; gap: 40px; }
  .receipt-wrap { width: 100%; max-width: 420px; justify-self: center; --pace: 1; }
  .receipt-wrap.touch { --pace: 1.3; }   /* a phone's one entrance, a little slower */
  @media (min-width: 1000px) {
    .website-grid { grid-template-columns: minmax(0, 1fr) clamp(330px, 30vw, 420px); grid-template-areas: "copy receipt" "go receipt"; column-gap: clamp(48px, 6vw, 112px); row-gap: 30px; align-items: start; }
    .website-copy { grid-area: copy; }
    .website-grid > .deal-go { grid-area: go; }
    .receipt-wrap { grid-area: receipt; }
    .receipt-wrap.stick { position: sticky; top: var(--stick-top, 48px); }   /* only where it fits the screen whole, centred in it (the script decides) */
    /* the receipt in from the right edge by the Care Plan phone's inset, so the two pictures stand on one line (Barrett,
       2026-09-26: "the receipt in the website section needs shifted to the left, you decide"). The space comes off the
       words' column, which on a wide screen stops short of its edge anyway */
    .website-grid { padding-right: var(--pic-inset); }
  }
  .printer { padding: 18px 16px 24px; border-radius: 22px; background: var(--navy); box-shadow: 0 24px 60px rgb(11 19 41 / .28); }
  .printer-slot { position: relative; z-index: 1; height: 10px; border-radius: 999px; background: #02050d; box-shadow: inset 0 2px 3px rgb(0 0 0 / .9), 0 1px 0 rgb(255 255 255 / .08); }
  .receipt-clip { margin: -5px 10px 0; }
  .receipt {
    --t: 8px;   /* the torn foot's teeth */
    position: relative; padding: 24px 20px calc(18px + var(--t));
    background: #fffdf7; color: var(--navy); font-size: 14.5px; line-height: 1.35; font-variant-numeric: tabular-nums;
    filter: drop-shadow(0 10px 14px rgb(0 0 0 / .35));
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--t) + 1px) no-repeat, conic-gradient(from 135deg at top, #0000 90deg, #000 0) bottom / calc(2 * var(--t)) var(--t) repeat-x;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--t) + 1px) no-repeat, conic-gradient(from 135deg at top, #0000 90deg, #000 0) bottom / calc(2 * var(--t)) var(--t) repeat-x;
  }
  .rc-head { text-align: center; padding-bottom: 14px; border-bottom: 1.5px dashed rgb(11 19 41 / .28); }
  .rc-head img { display: block; width: 30px; height: auto; margin: 0 auto 8px; }
  .rc-brand { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
  .rc-sub { margin: 3px 0 0; font-size: 13px; color: var(--navy-dim); }
  .rc-lines { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 1px; }
  .rc-lines li, .rc-due { display: flex; align-items: center; gap: 10px; margin: 0 -8px; padding: 5px 8px; border-radius: 6px; transition: background-color .35s var(--ease-out); }
  .rc-item { flex: 1; min-width: 0; }
  .rc-lines li > b { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-dim); }
  .rc-check { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-deep); }
  .rc-check svg { width: 10px; height: 10px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .rc-sum { position: relative; display: grid; gap: 4px; padding-top: 12px; border-top: 1.5px dashed rgb(11 19 41 / .28); }
  .rc-total, .rc-due { display: flex; justify-content: space-between; align-items: baseline; margin: 0; }
  .rc-total { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
  .rc-due { font-size: 16px; font-weight: 750; color: var(--accent-deep); }
  .rc-lines li.lit, .rc-due.lit { background: rgb(30 64 175 / .09); }   /* the point being read, on a wide screen */
  .rc-note { margin: 16px 0 10px; text-align: center; font-size: 13px; color: var(--navy-dim); }
  .rc-code { display: block; width: 72%; height: 30px; margin: 0 auto; fill: var(--navy); }
  .rc-stamp {
    position: absolute; right: 12px; bottom: 22px; padding: 6px 12px 5px;   /* over the barcode's end, clear of the words */
    border: 3px solid currentColor; border-radius: 8px; color: var(--accent-deep);
    font-size: 15px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
    background: #fffdf7;   /* the paper's own colour, so the bars under it never cross the words */
    transform: rotate(-11deg); opacity: .92; pointer-events: none;
  }
  /* the print: the slip is uncovered from the slot down, each line ticks as it appears, then the stamp lands */
  .receipt-wrap.ready .receipt { clip-path: inset(0 -40px 100% -40px); }
  .receipt-wrap.ready .rc-check { transform: scale(0); }
  .receipt-wrap.ready .rc-stamp { opacity: 0; transform: rotate(-11deg) scale(1.9); }
  .receipt-wrap.go .receipt { clip-path: inset(0 -40px -40px -40px); transition: clip-path calc(2.4s * var(--pace)) cubic-bezier(.45, .1, .35, 1); }
  .receipt-wrap.go .rc-check { transform: none; transition: transform calc(.35s * var(--pace)) cubic-bezier(.3, 1.5, .5, 1) calc((.55s + var(--n, 0) * .14s) * var(--pace)); }
  .receipt-wrap.go .rc-stamp { opacity: .92; transform: rotate(-11deg); transition: opacity .15s linear calc(2.6s * var(--pace)), transform calc(.4s * var(--pace)) cubic-bezier(.3, 1.4, .5, 1) calc(2.6s * var(--pace)); }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 54px; padding: 0 26px;
    border: 0; border-radius: 8px;
    background: #fff; color: var(--ground);
    font: inherit; font-size: clamp(15px, .2vw + 14px, 17px); font-weight: 700; letter-spacing: -.004em; line-height: 1.1;
    text-decoration: none; cursor: pointer;
    box-shadow: 0 14px 34px rgb(var(--veil) / .45);
    transition: background-color .2s var(--ease-out), transform .15s var(--ease-out);
  }
  .btn:hover { background: #e9edf5; }
  .btn:active { transform: translateY(1px); }
  .btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
  .band-light .btn:focus-visible { outline-color: var(--navy); }
  .btn-ghost {
    background: transparent; color: inherit; box-shadow: none;
    border: 1.5px solid currentColor;
  }
  .btn-ghost:hover { background: rgb(255 255 255 / .08); }
  .band-light .btn-ghost:hover { background: rgb(11 19 41 / .06); }
  footer {
    padding: 36px var(--gutter) calc(36px + env(safe-area-inset-bottom, 0px));
    background: var(--ground); color: var(--ink-dim);
    font-size: 15px;
  }
  footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; }
  footer strong { color: var(--ink); font-weight: 700; }
  footer a { text-decoration: none; }
  footer a:hover, footer a:focus-visible { text-decoration: underline; }
  footer a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  /* ---------- Hero: the splash, kept as it was, now the first screen of a page that scrolls ---------- */
  .hero { position: relative; min-height: 100svh; overflow: hidden; background: var(--ground); display: flex; }
  /* a thin white band between the hero and No risk (Barrett, 2026-09-24), hung from the top of the section under it, so
     the hero fills the first screen and the band comes into view only with the first scroll ("make it hanging downward
     so you don't see it until you scroll"); 7px at first, now 4px */
  .hero + .band { border-top: 4px solid var(--paper); }
  /* ---------- The wall (back 2026-09-23, Barrett: "create a full half page from the very bottom to the very top
     animation of the floating and scrolling screenshots that I had previously"). Ten sample websites float on a tilted
     plane, each scrolling its own page, drawn by WebGL. On a wide screen it fills the right of the hero from top to
     bottom, with no wash over it, and meets the black along a straight up-and-down line in the accent blue (Barrett, the
     same day: "remove the blur on the homepage wall. Make a shape, divide", then "make the line straight up and down";
     it faded in over its first 9%, then was cut on a diagonal). The words keep to the left half, clear of it. On a phone there is no half to give, so it runs behind the words as it did
     before, with the veil holding them. */
  .wall, .veil, .fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
  .wall { display: block; }
  .wall-edge { display: none; }   /* the dividing line, on a wide screen only */
  .veil {
    pointer-events: none;
    background:
      linear-gradient(180deg, rgb(var(--veil) / .95) 0%, rgb(var(--veil) / .88) 30%, rgb(var(--veil) / .67) 50%, rgb(var(--veil) / .28) 65%, rgb(var(--veil) / 0) 78%),
      radial-gradient(90% 80% at 0% 0%, rgb(var(--veil) / .86) 0%, rgb(var(--veil) / .52) 45%, rgb(var(--veil) / 0) 75%),
      linear-gradient(100deg, rgb(var(--veil) / .76) 0%, rgb(var(--veil) / .56) 40%, rgb(var(--veil) / 0) 62%),
      linear-gradient(0deg, rgb(var(--veil) / .55) 0%, rgb(var(--veil) / 0) 22%);
  }
  @media (min-width: 1000px) {
    /* the wall starts a margin past the half, so the words have room before the line (Barrett, 2026-09-24: "make the
       wall less wide there isn't enough margin", then "just a tad bit wider"): 65px at 1440 wide on top of the copy's own gap */
    .hero { --wall-x: calc(50% + clamp(44px, 4.5vw, 108px)); }
    /* the words' side: deep navy in the top corner, easing to the ground by the foot and toward the wall, so the black is
       not a flat fill (Barrett, 2026-09-24, choosing "a depth gradient"); white text keeps 13:1 at its lightest */
    .hero { background: radial-gradient(ellipse 72% 105% at 0% 0%, rgb(22 40 88) 0%, rgb(15 28 64) 28%, rgb(10 19 44) 52%, var(--ground) 82%), var(--ground); }
    .wall, .fallback { left: var(--wall-x); width: calc(100% - var(--wall-x)); }
    .wall-edge { display: block; position: absolute; top: 0; bottom: 0; left: var(--wall-x); width: 4px; margin-left: -2px; background: var(--accent); pointer-events: none; }   /* 4px ("make the blue line thicker"; it was 2px) */
    .veil { display: none; }
    /* the words end short of the half, on the same left edge as the sections below, and the headline shrinks to fit */
    .hero .copy {
      container-type: inline-size; max-width: none; margin: 0;
      padding-left: calc(env(safe-area-inset-left, 0px) + max(var(--gutter), (100% - 1320px) / 2));
      padding-right: calc(50% + clamp(28px, 2.5vw, 64px));
    }
    .hero .headline { font-size: min(clamp(2.3rem, 3.6vw + 1.4vh, 6rem), 10.2cqi); }
  }
  .copy {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: calc(1320px + 2 * var(--gutter));   /* same column as the sections below, so wide screens line up too */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(26px, 6vh, 64px);
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(24px, 7vh, 88px));
    padding-bottom: clamp(40px, 8vh, 96px);
    padding-left: calc(env(safe-area-inset-left, 0px) + var(--gutter));
    padding-right: calc(env(safe-area-inset-right, 0px) + var(--gutter));
    pointer-events: none;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: .5em;
    font-size: clamp(19px, 1.1vw + 11px, 30px);
    font-weight: 800;
    letter-spacing: -.012em;
    animation: rise 1s var(--ease-out) both;
  }
  .brand img { width: 1.6em; height: auto; filter: invert(1); }
  .headline {
    margin: 0;
    max-width: 16em;
    font-size: clamp(2.3rem, 3.6vw + 1.4vh, 6rem);
    font-weight: 640;
    font-stretch: 108%;
    line-height: 1;
    letter-spacing: -.03em;
    text-wrap: balance;
    text-shadow: 0 .04em .5em rgb(var(--veil) / .55);
  }
  .headline > span { display: block; animation: rise 1.15s var(--ease-out) .1s both; }
  .headline > span + span { animation-delay: .22s; }
  .sub {
    margin: clamp(16px, 2.4vh, 26px) 0 0;
    max-width: 30em;
    font-size: clamp(1.05rem, .55vw + .9rem, 1.4rem);
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);
    text-shadow: 0 .04em .5em rgb(var(--veil) / .95), 0 0 1.2em rgb(var(--veil) / .9);
    animation: rise 1.2s var(--ease-out) .3s both;
  }
  /* Phones and tablets: Text us + Call us first, and Start the questionnaire on its own row below them, the rows lined up
     at both ends (Barrett, 2026-09-22): the column is as wide as its widest row and stretches the rest to it, so Start the
     questionnaire widens to span the pair, keeping its words where they were and taking its disc to the end. With a mouse
     it is one row again, Start the questionnaire first and the number beside it at its own size (below). */
  .actions { display: flex; flex-direction: column; align-self: flex-start; align-items: stretch; gap: 14px; animation: rise 1.2s var(--ease-out) .38s both; }
  .actions > * { pointer-events: auto; }
  .actions .cta { justify-content: space-between; }
  .actions .cta-go { order: 1; }   /* first in the page, as the row with a mouse reads; last in the column */
  .actions .reach > * { flex-grow: 1; }   /* a 320px phone, where Call us drops under Text us: each as wide as the rest */
  /* Text us and Call us travel as a pair: where a row runs out of room they wrap together, never one alone */
  .reach { display: flex; flex-wrap: wrap; gap: 14px; }
  /* On a phone the hero carries the way into the questionnaire alone (Barrett, 2026-09-23, and once more after a
     change of mind); Text us and Call us are still under the pricing and in Contact, and tablets keep them here. The
     page's phone test: a coarse pointer on a screen 760px or narrower, or 500px or shorter, so a phone held sideways counts too. */
  @media (pointer: coarse) and (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
    .actions .reach { display: none; }
  }
  /* A dark edge so the control keeps a boundary when a near-white card drifts under it */
  .cta { min-height: 62px; padding: 0 10px 0 32px; gap: 18px; font-size: clamp(18px, .3vw + 17px, 21px); border-radius: 999px; border: 1.5px solid rgb(5 10 24 / .9); box-shadow: 0 14px 34px rgb(var(--veil) / .55); }
  .cta .badge { width: 42px; height: 42px; }
  /* The arrow sits in its own dark disc at the end of the pill */
  .cta .badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; flex: none;
    background: var(--ground); color: #fff;
    transition: transform .25s var(--ease-out), background-color .2s var(--ease-out);
  }
  .cta .badge svg { width: 22px; height: 22px; }
  .cta:hover .badge, .cta:focus-visible .badge { transform: scale(1.08); background: #1a2340; }
  /* Text us and Call us: a dark fill with a white edge and a white disc, so the blue Start the questionnaire still reads
     first. The fill is what holds the white text's contrast over the hero's art. */
  .cta-alt { background: rgb(var(--veil) / .78); color: #fff; border-color: rgb(255 255 255 / .8); }
  .cta-alt:hover { background: rgb(var(--veil) / .92); }
  .cta-alt .badge { background: #fff; color: var(--ground); }
  .cta-alt:hover .badge, .cta-alt:focus-visible .badge { background: #e9edf5; }
  .cta-alt .badge svg { width: 20px; height: 20px; }
  @media (max-width: 400px) { .cta { padding-left: 22px; gap: 12px; } }   /* narrow phones (360-400): Text us and Call us still share one row */
  /* A computer can't text or call, so with a mouse the two are replaced by one pill in the same style that shows the
     number, "Text or call" above it; a click copies it. Phones and tablets keep Text us and Call us. */
  .cta-phone { display: none; }
  .cta-phone-text { display: grid; text-align: left; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .cta-phone-text small { margin-bottom: 3px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
  @media (hover: hover) and (pointer: fine) {
    .reach { display: none; }
    .cta-phone { display: inline-flex; }
    /* one row, flush top and bottom: Start the questionnaire on the left, the number to its right at its own size */
    .actions { flex-direction: row; flex-wrap: wrap; }
    .actions .cta-go { order: 0; }
  }
  @keyframes rise { from { opacity: .15; transform: translateY(.45em); } }

  /* ---------- The voice: the whole page spoken in 72 seconds (Barrett's recording, audio/duna-summary.mp3), played
     from the hero. A card under the subline: a white play disc inside a ring of bars and a progress ring, and beside it
     "Duna Marketing Offer · 1:12". Pressed, the bars move with the voice, the ring fills, and the card speaks its captions word by word
     (the promises in the accent). The art behind takes no part. When the
     voice says "start the questionnaire below", the hero's Start the questionnaire glows once. Scrolled
     away while it plays, a dock at the foot of the screen carries the captions and the pause. The card keeps one height
     from idle to the longest caption, so nothing around it moves. The script shows it; without it there is nothing. */
  .voice-row { animation: rise 1.2s var(--ease-out) .32s both; }
  .voice-row[hidden] { display: none; }
  .voice-row > * { pointer-events: auto; }
  .voice {
    display: flex; align-items: center; gap: 16px;
    width: min(100%, 34rem); min-height: 104px; margin: 0; padding: 10px 22px 10px 12px;
    border-radius: 26px; border: 1.5px solid rgb(255 255 255 / .22);
    background: rgb(var(--veil) / .74); color: var(--ink);
    box-shadow: 0 14px 34px rgb(var(--veil) / .55);
    font: inherit; text-align: left; cursor: pointer;
    transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out);
  }
  .voice:hover, .voice.is-on { border-color: rgb(143 188 255 / .6); }
  .voice.is-on { background: rgb(var(--veil) / .84); }
  .voice:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
  .voice-orb { position: relative; flex: none; width: 76px; height: 76px; }
  .voice-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .voice-bars line { stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; }
  .voice-track { fill: none; stroke: rgb(255 255 255 / .16); stroke-width: 2.6; }
  .voice-prog { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0 100; transform: rotate(-90deg); transform-origin: 50% 50%; }
  .voice-disc { position: absolute; inset: 25%; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--ground); transition: transform .25s var(--ease-out); }
  .voice:hover .voice-disc { transform: scale(1.07); }
  .voice-disc svg, .voice-dock-btn > svg:not(.voice-dock-ring) { grid-area: 1 / 1; width: 46%; height: 46%; fill: currentColor; }
  .voice .i-pause, .voice-dock .i-pause { display: none; }
  .voice.is-playing .i-play, .voice-dock.is-playing .i-play { display: none; }
  .voice.is-playing .i-pause, .voice-dock.is-playing .i-pause { display: block; }
  .voice-text { flex: 1; min-width: 0; display: grid; container-type: inline-size; }   /* measured by the label, below */
  .voice-idle, .voice-cap { grid-area: 1 / 1; align-self: center; }
  /* "Duna Marketing Offer · 1:12" on one line: its usual size where it fits, and on a narrower phone a little smaller,
     as the text column allows (7.2% of its width), down to 14.5px; the time wraps whole if it must (a 320px phone) */
  .voice-idle b { display: block; font-size: max(14.5px, min(clamp(18px, .3vw + 17px, 21px), 7.2cqi)); font-weight: 750; letter-spacing: -.01em; line-height: 1.2; color: #fff; }
  .voice-len { font-weight: 500; color: var(--ink-dim); white-space: nowrap; }
  .voice-idle small { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.3; color: var(--ink-dim); }
  .voice-cap { visibility: hidden; font-size: clamp(16px, .35vw + 14.8px, 19.5px); font-weight: 650; line-height: 1.32; letter-spacing: -.005em; color: rgb(255 255 255 / .32); }
  .voice-cap span, .voice-dock-cap span { transition: color .18s linear; }
  .voice-cap .on, .voice-dock-cap .on { color: #fff; }
  .voice-cap .hl.on, .voice-dock-cap .hl.on { color: var(--accent); }
  .voice.is-on .voice-idle { visibility: hidden; }
  .voice.is-on .voice-cap { visibility: visible; }
  .voice-cap.fresh, .voice-dock-cap.fresh { animation: cap-in .35s var(--ease-out); }
  /* the progress line under the card (Barrett, 2026-09-22: "so it can be rewound, make it blue"): blue as far as the voice
     has got, a white handle ringed in blue to drag it back or on, the time so far on its left and the whole on its right,
     on a dark pill so it reads over the art. Tap it, drag it, or use its arrow keys (5 s a press). */
  .voice-seek { display: flex; align-items: center; gap: 12px; width: min(100%, 34rem); margin-top: 10px; padding: 3px 16px; border-radius: 999px; background: rgb(var(--veil) / .66); }
  .voice-seek-time { flex: none; min-width: 2.4em; font-size: 13px; font-weight: 650; line-height: 1; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
  .voice-seek-time:last-child { text-align: right; }
  .voice-seek input { --p: 0%; flex: 1; min-width: 0; height: 30px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
  .voice-seek input::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: linear-gradient(to right, var(--accent) 0 var(--p), rgb(255 255 255 / .2) var(--p) 100%); }
  .voice-seek input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6.5px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); box-shadow: 0 2px 8px rgb(0 0 0 / .45); }
  .voice-seek input::-moz-range-track { height: 5px; border-radius: 999px; background: rgb(255 255 255 / .2); }
  .voice-seek input::-moz-range-progress { height: 5px; border-radius: 999px; background: var(--accent); }
  .voice-seek input::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); box-shadow: 0 2px 8px rgb(0 0 0 / .45); }
  .voice-seek input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
  @keyframes cap-in { from { opacity: 0; transform: translateY(6px); } }
  @media (max-width: 760px) {
    .voice { gap: 14px; min-height: 92px; padding: 8px 16px 8px 10px; border-radius: 22px; }
    .voice-orb { width: 66px; height: 66px; }
  }
  @media (max-width: 340px) { .voice-cap { font-size: 15px; } .voice-idle small { font-size: 13.5px; } }
  /* the hand-off: when the voice reaches "start the questionnaire below", the button to it glows once */
  .cta-go.nudge { animation: nudge 1.9s var(--ease-out) 1; }
  /* The hero's way in changes its words every 2.5 s: "Start the questionnaire" and "Ready to get started?" (Barrett's
     idea, 2026-09-22; a script of its own keeps that time). They scroll rather than turn, quickly: the new words come
     down from above as the old leave below, one strip moving down, the cell clipping whatever is outside it. Both
     faces share that one cell, so the pill is as wide as the longer of them and nothing around it moves. A screen
     reader hears the link's own label, not the moving words. */
  .cta-flip { display: grid; overflow: hidden; }
  .cta-face { grid-area: 1 / 1; line-height: 1.3; transition: transform .28s cubic-bezier(.32, .72, .26, 1); }
  .samples-go .cta-face, .step-go .cta-face { text-align: center; }   /* these two pills centre what is in them */
  .cta-face-b { transform: translateY(-105%); }
  .cta-go.turned .cta-face-a { transform: translateY(105%); }
  .cta-go.turned .cta-face-b { transform: translateY(0); }
  @keyframes nudge {
    0% { box-shadow: 0 0 0 0 rgb(143 188 255 / .85), 0 14px 34px rgb(var(--veil) / .55); transform: scale(1); }
    18% { transform: scale(1.045); }
    100% { box-shadow: 0 0 0 26px rgb(143 188 255 / 0), 0 14px 34px rgb(var(--veil) / .55); transform: scale(1); }
  }
  /* the dock: the voice at the foot of the screen, while it plays and the hero is out of sight */
  .voice-dock {
    position: fixed; z-index: 40; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: min(calc(100% - 32px), 42rem); display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 8px;
    border-radius: 20px; background: rgb(11 19 41 / .96); border: 1px solid rgb(143 188 255 / .4); color: var(--ink);
    box-shadow: 0 18px 44px rgb(0 0 0 / .5);
    opacity: 0; visibility: hidden; transform: translate(-50%, 20px);
    transition: opacity .3s var(--ease-out), transform .35s var(--ease-out), visibility 0s linear .35s;
  }
  .voice-dock.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .3s var(--ease-out), transform .35s var(--ease-out), visibility 0s; }
  .voice-dock-btn { position: relative; flex: none; display: grid; place-items: center; width: 50px; height: 50px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--ground); cursor: pointer; }
  .voice-dock-ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); overflow: visible; }
  .voice-dock-ring .voice-track { stroke: rgb(255 255 255 / .12); }
  .voice-dock-cap { flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 650; line-height: 1.3; color: rgb(255 255 255 / .32); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .voice-dock-x { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-dim); cursor: pointer; }
  .voice-dock-x:hover { color: #fff; background: rgb(255 255 255 / .08); }
  .voice-dock-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
  .voice-dock-btn:focus-visible, .voice-dock-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) {
    .voice-row { animation: none; }
    .voice-cap.fresh, .voice-dock-cap.fresh, .cta-go.nudge { animation: none; }
    .cta-face { transition: none; }   /* the words never turn: the script leaves them alone too */
    .voice-dock, .voice-dock.show { transition: none; transform: translate(-50%, 0); }
  }

  /* Static tilted grid for browsers without WebGL2 */
  .fallback { display: none; overflow: hidden; perspective: 2400px; }
  .no-gl .fallback { display: block; }
  .no-gl .wall { display: none; }
  .fallback-plane {
    position: absolute; left: 58%; top: 62%;
    display: grid;
    grid-template-columns: repeat(6, 30vmax);
    gap: 2.2vmax;
    transform: translate(-50%, -50%) rotateX(45deg) rotateZ(18deg);
  }
  .fallback-plane div {
    aspect-ratio: 4 / 3;
    border-radius: 1.3vmax;
    background: center top / 100% auto no-repeat;
    box-shadow: 0 2vmax 4vmax rgb(0 0 0 / .5);
  }

  @media (max-width: 760px) {
    .copy { padding-top: calc(env(safe-area-inset-top, 0px) + 22px); gap: 30px; }
    .headline { font-size: min(8vw, 2.4rem); }
  }
  @media (prefers-reduced-motion: reduce) {
    .brand, .headline > span, .sub, .actions { animation: none; }
    .cta, .cta .badge { transition: none; }
  }

  /* ---------- Sections ---------- */
  /* The mark beside the offer: once the section scrolls in, the stripes slide into place and the wordmark
     follows, then everything stays put. Readers who prefer reduced motion see it already in place. */
  .offer-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px 72px; align-items: center; }
  @media (max-width: 860px) { .offer-grid { grid-template-columns: 1fr; } .mark-wrap { justify-self: center; } }
  .mark-wrap { display: flex; flex-direction: column; align-items: center; }   /* the wordmark may run wider than the mark and stays centred under it */
  .mark-anim { display: block; width: clamp(150px, 18vw, 260px); height: auto; color: #fff; overflow: visible; }
  .wordmark {
    margin-top: clamp(18px, 2.2vw, 30px); text-align: center;
    font-weight: 800; font-stretch: 108%; font-size: clamp(15px, 1.75vw, 26px);
    letter-spacing: .16em; text-indent: .16em; line-height: 1; color: #fff; white-space: nowrap;
    opacity: 0; transform: translateY(6px);
    transition: opacity .8s var(--ease-out) 1.4s, transform 1s var(--ease-out) 1.4s;
  }
  .mark-wrap.in .wordmark { opacity: 1; transform: none; }
  @media (max-width: 760px) { .wordmark { font-size: 19px; } }   /* phones only: the wordmark reads larger under the small mark */
  .mk-l, .mk-r {
    opacity: 0; transform: translate(var(--dx), var(--dy));
    transition: opacity 1.1s var(--ease-out), transform 1.4s var(--ease-out);
    transition-delay: calc(var(--i) * 95ms);
  }
  .mark-wrap.in .mk-l, .mark-wrap.in .mk-r { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .mk-l, .mk-r { opacity: 1; transform: none; transition: none; }
    .wordmark { opacity: 1; transform: none; transition: none; }
  }
  /* ---------- Client work: Deep Roots Hydro, the one real client website on this page. The samples below it are
     demonstrations; this one is live on a client's own domain, so the section is built to be checked rather than
     believed: the shop's real screenshot inside browser chrome showing the real address, and two ways to open it.
     A white band, Barrett's call. The frame rises once when it comes on screen and then holds still, the rule the
     sample cards follow on a phone; with a mouse it lifts on hover. ---------- */
  /* --rg is the space between the grid's rows. .client-copy, the first paragraph of the detail, has the same space under
     it, so it sits centred between what is above it (the caption, or beside the picture the lede) and the checklist
     below it (Barrett, 2026-09-21). */
  .client .wrap { --rg: 34px; display: grid; gap: var(--rg); grid-template-areas: "head" "media" "body"; }
  @media (min-width: 1000px) {
    /* The picture takes the right column for both rows, so the heading sits beside it and the detail runs under the
       heading. Narrower, the order is heading, picture, detail: the proof arrives before the reading does. */
    .client .wrap {
      --rg: 30px;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
      grid-template-areas: "head media" "body media";
      column-gap: 64px; row-gap: var(--rg); align-items: start;
    }
    /* The detail runs longer than the picture, so the picture centres against the whole column instead of
       hanging from the top and leaving a well of white under it. */
    .client-media { align-self: center; }
  }
  .client-head { grid-area: head; }
  .client-media { grid-area: media; }
  .client-body { grid-area: body; }
  .client-head h2 { max-width: 15em; }

  /* the picture: a browser frame, because the address is the point. It is a link, and so is the button below. */
  .client-frame {
    display: block; text-decoration: none; color: inherit;
    border-radius: 14px; overflow: hidden; background: #fff;
    border: 1px solid rgb(11 19 41 / .12);
    box-shadow: 0 22px 48px rgb(11 19 41 / .18);
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
  }
  @media (hover: hover) { .client-frame:hover { transform: translateY(-4px); box-shadow: 0 30px 60px rgb(11 19 41 / .24); } }
  .client-frame:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 4px; }
  .client-bar { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; background: #eef1f6; border-bottom: 1px solid #dde2ec; color: #3b4660; font-size: 13px; }
  .client-dots { display: flex; gap: 5px; flex: none; }
  .client-dots i { width: 9px; height: 9px; border-radius: 50%; background: #c9d0de; }
  .client-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: #fff; border: 1px solid #dde2ec; }
  .client-url svg { flex: none; width: 12px; height: 12px; color: var(--accent-deep); }
  .client-url b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
  .client-live { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--accent-deep); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  /* The picture is the whole homepage, 1280x10343 captured top to footer, travelling up behind a window the shape of
     a browser's, so a visitor sees the entire page without leaving this one. --travel is how far it has to go: the
     window is 1/1.6 of its own width tall and the picture is 8.1 of it, so the picture must rise by all but
     (1 / 1.6) / 8.1 of its height. Recapture at a different length and this number changes with it. */
  .client-view { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #f5f2ec; --travel: -92.27%; }
  .client-shot { position: absolute; left: 0; top: 0; display: block; width: 100%; height: auto; }
  /* Down the page at a reading pace, a beat at the footer, then a quick eased rewind and away again. The long
     descent is linear so it reads as scrolling; only the rewind is eased, which is what makes it read as a reset
     rather than as part of the tour. */
  /* Of the 44.9s cycle: 0.5s held at the top, 40s down, 2s held at the footer, 1.8s of rewind, 0.6s held again. The
     two holds at the top meet across the loop's seam, so what a viewer sees there is one pause of 1.1s. */
  @keyframes client-scroll {
    0%      { transform: translateY(0); }
    1.114%  { transform: translateY(0); animation-timing-function: linear; }
    90.2%   { transform: translateY(var(--travel)); }
    94.655% { transform: translateY(var(--travel)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
    98.664% { transform: translateY(0); }
    100%    { transform: translateY(0); }
  }
  .client-media.roll .client-shot { animation: client-scroll 44.9s linear .9s infinite; }   /* .9s: the frame finishes rising first */
  .client-media.rest .client-shot { animation-play-state: paused; }   /* scrolled away, on any screen */
  @media (prefers-reduced-motion: reduce) {
    .client-media .client-shot { animation: none !important; transform: none !important; }
  }
  .client-cap { margin: 14px 0 0; max-width: 34em; font-size: 14px; line-height: 1.5; color: var(--navy-dim); }

  /* the detail under the heading: what the website had to do, then what was built */
  .client-body p:first-child { margin-top: 0; }
  .client-copy { margin: 0 0 var(--rg); max-width: 40em; color: var(--navy-dim); }
  .client-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 40em; }
  .client-points li { position: relative; padding-left: 28px; }
  .client-points li::before {
    content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--accent-deep);
  }
  .client-points li::after {
    content: ""; position: absolute; left: 4px; top: 10px; width: 8px; height: 5px;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
  }
  .client-who { margin: 26px 0 0; display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; line-height: 1.3; }
  .client-who strong { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
  .client-who span { font-size: 14px; color: var(--navy-dim); }
  /* The page's .btn is white, which would vanish on this band, so the call to action here is the navy one. */
  .client-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 54px; padding: 0 26px; margin: 26px 0 0;
    border-radius: 8px; background: var(--navy); color: #fff;
    font-size: clamp(15px, .2vw + 14px, 17px); font-weight: 700; letter-spacing: -.004em; line-height: 1.1;
    text-decoration: none;
    box-shadow: 0 14px 34px rgb(11 19 41 / .22);
    transition: background-color .2s var(--ease-out), transform .15s var(--ease-out);
  }
  .client-cta:hover { background: #16204a; }
  .client-cta:active { transform: translateY(1px); }
  .client-cta:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
  .client-cta svg { flex: none; width: 17px; height: 17px; }

  /* one entrance, then stillness. The script adds .ready only when it runs and motion is welcome. */
  .client-media.ready .client-frame { opacity: 0; }
  .client-media.in .client-frame { opacity: 1; animation: client-rise 1.1s var(--ease-out) backwards; }
  @keyframes client-rise { from { opacity: 0; transform: translateY(20px); } }
  @media (prefers-reduced-motion: reduce) {
    .client-media .client-frame { opacity: 1 !important; animation: none !important; }
  }

  .samples-grid {
    display: grid; gap: 18px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 36px;
  }
  @media (max-width: 760px) { .samples-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
  /* Start the questionnaire under the ten samples, the hero's button exactly (Barrett, 2026-09-21), centred under the grid
     (his call the same day), with more room above it than the grid has above it: 44px on phones to 64px on a wide screen
     (it was 36px until Barrett asked for more) */
  .samples-go { margin-top: clamp(44px, 4vw + 20px, 64px); display: flex; justify-content: center; }
  #samples { padding-bottom: clamp(44px, 4vw + 20px, 64px); }   /* as much under the button as above it (Barrett, 2026-09-22: less under it; the band's own 56-120px was more) */
  .card {
    display: block; text-decoration: none; color: inherit;
    border-radius: 12px; overflow: hidden;
    background: #111a33;
    border: 1px solid rgb(255 255 255 / .1);
    box-shadow: 0 18px 40px rgb(0 0 0 / .45);
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
  }
  .card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px rgb(0 0 0 / .55); }
  .card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
  .card .shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: #1a2340; }
  .card .meta { display: block; padding: 12px 14px 14px; }
  .card .meta strong { display: block; font-size: clamp(12px, .5vw + 7px, 14px); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
  .card .meta span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.35; color: var(--ink-dim); }
  /* The samples move the way the hero's art once did, lying back on a tilted plane. With a pointer, each card rises into place once, the moment its top
     edge comes on screen, and after that the card under the pointer or the keyboard focus travels slowly down its own
     page and back. A touch screen has nothing to point with, and cards that kept moving were too much on a phone, so
     there each card gets one entrance and then stays still: it starts on that tilted,
     turned plane, and settles upright into its place while the script glides its page up to the first screen. The
     script adds .ready only when it is running and motion is welcome, so without it the cards are simply there. */
  .card .view { display: block; position: relative; overflow: hidden; border-radius: 11px 11px 0 0; }
  .card .tall { position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0; transition: opacity .3s var(--ease-out); }
  .card .tall.on { opacity: 1; }
  .samples-grid.ready .card { opacity: 0; }
  .samples-grid.ready .card.in { opacity: 1; animation: card-rise 1.1s var(--ease-out) backwards; }
  .samples-grid.touch.ready .card.in { animation: card-land 3s var(--ease-out) backwards; }   /* much slower than the desktop rise: Barrett found the quick landing flashy on his phone, twice */
  @keyframes card-rise { from { opacity: 0; transform: translateY(18px); } }
  @keyframes card-land { from { opacity: 0; transform: perspective(1100px) translate3d(0, 22px, 0) rotateX(14deg) rotateZ(3deg) scale(1.02); } }
  #samples { overflow-x: hidden; overflow-x: clip; }   /* a card still turned on its plane must never widen the page */
  @media (prefers-reduced-motion: reduce) {
    .samples-grid .card { opacity: 1 !important; animation: none !important; }
    .card .tall { display: none; }
  }

  /* ---------- Care plan: the case for the monthly plan, with a looping text exchange ---------- */
  .care-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head demo" "body demo";
    gap: 8px 72px; align-items: center;
  }
  .care-head { grid-area: head; }
  .care-body { grid-area: body; }
  .demo { grid-area: demo; align-self: center; }
  /* the phone a little in from the right edge (Barrett, 2026-09-26: "move the phone to the left a little", 40px, then
     "a little more": 64px, now --pic-inset, shared with the receipt); side by side only, since stacked it is centred.
     It is margin, not a nudge, so the 72px gap to the words always holds */
  @media (min-width: 901px) { .demo { margin-right: var(--pic-inset); } }
  .care-voice { margin: 4px 0 24px; }   /* the section read aloud, over the headline (Barrett, 2026-09-23), as the founder's is */
  .client-voice, .pricing-voice, .website-voice { margin: 4px 0 24px; }   /* Client work read aloud, over its headline (Barrett, 2026-09-23: "with the same style and everything the same") */
  /* On the white band the card is the one on the dark bands: its see-through wash would turn grey over white, so here it
     is solid in the colour it shows there, with the white band's softer shadow. */
  .band-light .voice, .band-light .voice.is-on, .band-light .voice-seek { background: rgb(var(--veil)); }
  .band-light .voice { box-shadow: 0 14px 34px rgb(11 19 41 / .22); }
  @media (max-width: 900px) {
    .care-grid { grid-template-columns: 1fr; grid-template-areas: "head" "demo" "body"; gap: 28px; }
    .demo { justify-self: center; }
  }
  .care-intro { margin: 28px 0 0; max-width: 40em; font-weight: 700; color: var(--ink); }   /* leads into the list, so it sits close above it */
  .care-list { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 40em; }
  .care-intro + .care-list { margin-top: 14px; }
  .care-list li { position: relative; padding-left: 26px; color: var(--ink); }
  .care-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
  .care-note { margin: 22px 0 0; max-width: 40em; color: var(--ink-dim); }
  /* A price just below a section's headline, above its lede: the Care Plan's ("Care Plan / $149 a month") and, in the
     same format, the website's in No risk ("Your website / $1,500 one time"), both Barrett's, 2026-09-21. The Care Plan's
     sat in a card at first; Barrett asked for it "more inline with the text", then moved it under the headline, then had
     the website's made the same. Part of the text column: no card, the label and the price start at the text's own left
     edge, 22px above and below (the headline's own 18px bottom margin folds into the 22px above), and the price a size
     smaller than the plan boxes'. The words after the price match the Pricing box's. The ROI calculator reads its prices
     from the Pricing box only (#pricing), never from these. */
  .price-line { margin: 22px 0; }
  /* the label over each price must not be a replica of the sections' eyebrows (Barrett, 2026-09-21), and the page is
     sans-serif only: a serif tried here was "ugly and doesn't match the website". So it is the page's Archivo, set apart
     by style: plain case and semibold, where the eyebrows are spaced capitals. Colour, Barrett's call the
     same day: the whole dollar amount, sign included, in the eyebrow's accent blue, and everything else in the block
     white (the label and the terms), so the block no longer reads as a white wall of text. */
  .price-line-label { margin: 0 0 4px; font-size: clamp(16px, .25vw + 15px, 18px); font-weight: 650; line-height: 1.3; letter-spacing: -.005em; color: var(--ink); }
  .price-line .price { margin: 0; }
  /* The amount a step above the lede, still in the accent blue (Barrett, 2026-09-22): at 32-40px the website's price
     "dominates the section", matching or outsizing the headline (28px on a phone), and he had the Care Plan's match it */
  .price-line .price strong { font-size: clamp(1.4rem, .5vw + 1.2rem, 1.7rem); font-weight: 700; letter-spacing: -.02em; color: var(--accent); }
  .price-line .price > span { color: var(--ink); }

  .stage { display: flex; gap: 22px; align-items: flex-start; }
  .phone {
    width: 312px; max-width: 100%; flex: none;
    background: #0f1730; border: 1.5px solid rgb(255 255 255 / .16); border-radius: 30px;
    padding: 10px 12px 16px; box-shadow: 0 24px 60px rgb(0 0 0 / .45);
    font-size: 14px;
  }
  .status { display: flex; align-items: center; gap: 6px; padding: 2px 8px 6px; font-size: 12px; font-weight: 700; color: var(--ink); }
  .status .clock { margin-right: auto; }
  .status .sig { display: inline-flex; align-items: flex-end; gap: 2px; }
  .status .sig i { display: block; width: 3px; background: var(--ink); border-radius: 1px; }
  .status .sig i:nth-child(1) { height: 4px; } .status .sig i:nth-child(2) { height: 6px; } .status .sig i:nth-child(3) { height: 8px; } .status .sig i:nth-child(4) { height: 10px; }
  .status .batt { display: inline-block; width: 22px; height: 10px; border: 1.5px solid var(--ink); border-radius: 3px; padding: 1.5px; }
  .status .batt i { display: block; width: 80%; height: 100%; background: var(--ink); border-radius: 1px; }
  .contact { display: flex; align-items: center; gap: 10px; padding: 6px 6px 12px; border-bottom: 1px solid rgb(255 255 255 / .1); margin-bottom: 10px; }
  .contact .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--ground); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
  .contact strong { display: block; font-size: 14px; }
  .contact small { display: block; font-size: 11px; color: var(--ink-dim); letter-spacing: .04em; }
  .thread { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; height: 452px; overflow: hidden; }   /* fixed: nothing shifts while it plays */
  .bubble { margin: 0; max-width: 86%; padding: 9px 13px; border-radius: 18px; line-height: 1.35; opacity: 0; transform: translateY(10px); }
  .bubble.from { align-self: flex-end; background: #2a3d78; color: #fff; border-bottom-right-radius: 6px; }
  .slot { position: relative; align-self: flex-start; max-width: 86%; }
  .bubble.reply { max-width: none; background: #fff; color: var(--ground); border-bottom-left-radius: 6px; }
  .bubble.reply time { display: block; margin-top: 3px; font-size: 11px; color: #5a6480; }
  .bubble.typing { position: absolute; left: 0; top: 0; display: flex; gap: 5px; align-items: center; padding: 12px 13px; background: #fff; border-bottom-left-radius: 6px; }
  .bubble.typing span { width: 7px; height: 7px; border-radius: 50%; background: #7f89a6; }
  .attach { display: flex; align-items: center; gap: 8px; margin-top: 7px; padding: 6px 8px; background: rgb(255 255 255 / .12); border-radius: 10px; font-size: 12px; }
  .thumb { width: 28px; height: 28px; border-radius: 6px; background: #d6b48c; color: #3b2a14; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }

  .phone-caption { margin: 14px 0 0; text-align: center; font-size: 14px; color: var(--ink-dim); }
  .thread { transition: opacity .4s ease; }
  .fade .thread { opacity: 0; }
  @media (max-width: 700px) {
    .stage { flex-direction: column; align-items: center; gap: 16px; }
    .phone { font-size: 13px; }
    .thread { height: 452px; }
  }

  /* the sequence: three exchanges, about twelve seconds; the script holds the finished thread, fades it and starts over */
  .play .m1 { animation: bubble-in .5s var(--ease-out) .3s forwards; }
  .play .t1 { animation: bubble-in .3s var(--ease-out) 1.5s forwards, bubble-out .2s ease 2.5s forwards; }
  .play .t1 span { animation: dot .6s ease-in-out 1.55s 2; }
  .play .r1 { animation: bubble-in .5s var(--ease-out) 2.65s forwards; }
  .play .m2 { animation: bubble-in .5s var(--ease-out) 4.7s forwards; }
  .play .t2 { animation: bubble-in .3s var(--ease-out) 5.9s forwards, bubble-out .2s ease 6.9s forwards; }
  .play .t2 span { animation: dot .6s ease-in-out 5.95s 2; }
  .play .r2 { animation: bubble-in .5s var(--ease-out) 7.05s forwards; }
  .play .m3 { animation: bubble-in .5s var(--ease-out) 8.9s forwards; }
  .play .t3 { animation: bubble-in .3s var(--ease-out) 10.1s forwards, bubble-out .2s ease 11.2s forwards; }
  .play .t3 span { animation: dot .6s ease-in-out 10.15s 2; }
  .play .r3 { animation: bubble-in .5s var(--ease-out) 11.35s forwards; }
  .play .t1 span:nth-child(2), .play .t2 span:nth-child(2), .play .t3 span:nth-child(2) { animation-delay: inherit; }
  @keyframes bubble-in { to { opacity: 1; transform: none; } }
  @keyframes bubble-out { to { opacity: 0; transform: none; } }
  @keyframes dot { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-3px); opacity: 1; } }
  .done .bubble.from, .done .bubble.reply { opacity: 1; transform: none; }
  .done .bubble.typing { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .demo .bubble.from, .demo .bubble.reply { opacity: 1; transform: none; animation: none; }
    .demo .bubble.typing { display: none; }
  }
  .plan { position: relative; }
  .plan .tag {
    position: absolute; top: -13px; right: 20px;
    background: var(--accent-deep); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 5px 11px; border-radius: 999px;
  }
  .steps { display: grid; gap: 28px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; max-width: 1120px; }
  @media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: 22px; } }
  .step { position: relative; padding: 26px 24px 26px; border: 1px solid rgb(11 19 41 / .16); border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgb(11 19 41 / .06); }
  .step .num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--accent-deep); color: #fff; font-weight: 800; font-size: 17px;
    margin-bottom: 16px;
  }
  .step h3 { margin: 0 0 8px; font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
  .step p { margin: 0; color: var(--navy-dim); }
  /* Step 1 ends with the way into the questionnaire, the pill from under the pricing, worded "Start the questionnaire"
     (Barrett, 2026-09-21). The card is a column so the pill sits at its foot even when a row of three stretches the cards
     to one height. The pill fits itself to the card, which the wrapper measures (a container, so the card itself is not
     one: that would trap the connector line that runs from card 1 into card 2): its own size where it fits, a full-width
     and smaller pill in a narrower card, and without the arrow disc in the narrowest. The two widths below are where the
     words "Start the questionnaire" stop fitting on one line in the size before; change the words, measure again. */
  .step { display: flex; flex-direction: column; }
  .step-go { container-type: inline-size; margin-top: auto; padding-top: 22px; }
  @container (max-width: 285px) {
    .step-go .cta-go { width: 100%; padding-left: 16px; gap: 8px; font-size: 16px; }
    .step-go .cta-go .badge { width: 32px; height: 32px; }
  }
  @container (max-width: 260px) {
    .step-go .cta-go { padding: 8px 12px; justify-content: center; text-align: center; }
    .step-go .cta-go .badge { display: none; }
  }

  /* ---------- How it works, the demo beside the steps. One owner's answer becomes their website and goes live, in three
     acts that light up the matching card. Without JavaScript, or with reduced motion, it is the finished picture. ---------- */
  .how-grid { display: grid; gap: 28px; margin-top: 40px; }
  .how-grid .steps { margin-top: 0; }
  @media (min-width: 1100px) {
    .how-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
    .how-grid .steps { grid-template-columns: 1fr; gap: 22px; max-width: none; }
  }
  @media (max-width: 1099px) { .how-demo { max-width: 720px; } }
  .step { transition: border-color .4s var(--ease-out), box-shadow .4s var(--ease-out); }
  .step.is-now { border-color: var(--accent-deep); box-shadow: 0 0 0 1px var(--accent-deep), 0 12px 28px rgb(11 19 41 / .1); }
  .hd { container-type: inline-size; padding: 18px 18px 16px; border-radius: 16px; background: var(--band); color: var(--ink); box-shadow: 0 18px 40px rgb(11 19 41 / .22); }
  .hd.hd-still, .hd.hd-still *, .hd.hd-still *::before, .hd.hd-still *::after { transition: none !important; }   /* resets happen out of sight, without animating */
  .hd-tag { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
  .hd-stage { position: relative; transition: opacity .5s var(--ease-out); }
  .hd-browser { border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgb(0 0 0 / .35); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
  .hd-bar { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; background: #eef1f6; border-bottom: 1px solid #dde2ec; color: #3b4660; font-size: clamp(11px, 2cqi, 13px); }
  .hd-dots { display: flex; gap: 5px; flex: none; }
  .hd-dots i { width: 9px; height: 9px; border-radius: 50%; background: #c9d0de; }
  .hd-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 999px; background: #fff; border: 1px solid #dde2ec; }
  .hd-lock { flex: none; width: 12px; height: 12px; color: var(--accent-deep); transition: opacity .4s var(--ease-out); }
  .hd-url-text { display: grid; min-width: 0; }
  .hd-url-text > span { grid-area: 1 / 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .4s var(--ease-out); }
  .hd-url-preview { opacity: 0; }
  .hd-live { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--accent-deep); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
  .hd-view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fbf8f1; }
  .hd-skel { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease-out); }
  .hd-skel i { position: absolute; display: block; border-radius: 5px; background: #ebe4d4; }
  .hd-skel .k1 { left: 0; top: 0; width: 100%; height: 8.3%; border-radius: 0; }
  .hd-skel .k2 { left: 9%; top: 26%; width: 21%; height: 6.5%; }
  .hd-skel .k3 { left: 9%; top: 35%; width: 24%; height: 6.5%; }
  .hd-skel .k4 { left: 9%; top: 44%; width: 18%; height: 6.5%; }
  .hd-skel .k5 { left: 9%; top: 55%; width: 32%; height: 2.6%; }
  .hd-skel .k6 { left: 9%; top: 59%; width: 33%; height: 2.6%; }
  .hd-skel .k7 { left: 9%; top: 63%; width: 24%; height: 2.6%; }
  .hd-skel .k8 { left: 9%; top: 69%; width: 14%; height: 7%; }
  .hd-skel .k9 { left: 50%; top: 8.3%; width: 50%; height: 91.7%; border-radius: 0; }
  .hd-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; clip-path: inset(0); transition: clip-path 1.6s var(--ease-out); }
  .hd-mark { position: absolute; left: 7.8%; top: 23.5%; width: 27.5%; height: 29.5%; border: 2px solid var(--accent-deep); border-radius: 8px; box-shadow: 0 0 0 4px rgb(30 64 175 / .15); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
  .hd-note { position: absolute; left: 7.8%; top: 23.5%; transform: translateY(calc(-100% - 6px)); padding: 4px 9px; border-radius: 999px; background: var(--accent-deep); color: #fff; font-size: clamp(10px, 1.9cqi, 12.5px); font-weight: 700; white-space: nowrap; transition: opacity .5s var(--ease-out); }
  .hd-approve { position: absolute; left: 4%; right: 4%; bottom: 4%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 12px; background: var(--band); color: #fff; box-shadow: 0 10px 28px rgb(0 0 0 / .35); font-size: clamp(11px, 2.1cqi, 14px); font-weight: 600; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
  .hd:not(.run) .hd-approve { display: none; }
  .hd-btn { position: relative; display: grid; padding: 7px 14px; border-radius: 8px; background: #fff; color: var(--ground); font-weight: 700; transition: background-color .3s var(--ease-out); }
  .hd-btn > span { grid-area: 1 / 1; text-align: center; transition: opacity .3s var(--ease-out); }
  .hd-btn-b { opacity: 0; }
  .hd-cursor { position: absolute; left: 58%; top: 52%; width: 22px; height: 22px; fill: #fff; stroke: var(--ground); stroke-width: 1.5; stroke-linejoin: round; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .4)); opacity: 0; transition: transform .8s var(--ease-out), opacity .4s var(--ease-out); }
  .hd-clock { position: absolute; right: 3%; top: calc(34px + 3%); display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--band); color: var(--accent); font-size: clamp(10px, 1.9cqi, 12.5px); font-weight: 700; box-shadow: 0 6px 18px rgb(0 0 0 / .3); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
  .hd-clock svg, .hd-photos svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .hd-chat { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 3% 2%; font-size: clamp(12px, 2.7cqi, 17px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
  .hd:not(.run) .hd-chat { display: none; }
  .hd-msg { margin: 0; max-width: 84%; padding: 9px 13px; border-radius: 18px; line-height: 1.35; transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
  .hd-duna { align-self: flex-start; background: #fff; color: var(--ground); border-bottom-left-radius: 6px; }
  .hd-you { align-self: flex-end; background: #2a3d78; color: #fff; border-bottom-right-radius: 6px; }
  /* the answer's bubble keeps its final size from the start: the text not yet typed is there, but invisible, so each
     letter appears in place and nothing grows, wraps or re-centres while it types */
  .hd-rest { color: transparent; }
  .hd-caret { display: inline-block; width: 2px; height: 1.1em; margin-right: -2px; vertical-align: -.15em; background: #fff; }   /* no width of its own, so it never moves a word to the next line */
  .hd-meta { align-self: flex-end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
  .hd-photos { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .16); font-size: .85em; color: var(--ink-dim); }
  .hd-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .hd-steps li { position: relative; display: flex; align-items: center; gap: 7px; padding-top: 10px; font-size: 13px; font-weight: 600; color: var(--ink-dim); transition: color .3s var(--ease-out); }
  .hd-steps b { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; background: rgb(255 255 255 / .12); color: var(--ink); transition: background-color .3s var(--ease-out), color .3s var(--ease-out); }
  .hd-steps li::before, .hd-steps li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .14); }
  .hd-steps li::after { background: var(--accent); transform: scaleX(0); transform-origin: left center; }
  .hd-steps li.is-on::after { transform: scaleX(1); transition: transform var(--dur, 4s) linear; }
  .hd-steps li.is-done::after { transform: scaleX(1); }
  .hd-steps li.is-on, .hd-steps li.is-done { color: #fff; }
  .hd-steps li.is-on b, .hd-steps li.is-done b { background: var(--accent); color: var(--ground); }
  /* the acts, when the script runs it: each phase class shows the next thing */
  .hd.run .hd-browser { opacity: 0; transform: translateY(14px) scale(.98); }
  .hd.run.p-build .hd-browser { opacity: 1; transform: none; }
  .hd.run.p-build .hd-chat { opacity: 0; transform: translateX(-18px); }
  .hd.run .hd-duna, .hd.run .hd-you, .hd.run .hd-meta { opacity: 0; transform: translateY(10px); }
  .hd.run.p-q .hd-duna { opacity: 1; transform: none; }
  .hd.run.p-dots .hd-you { opacity: 1; transform: none; }   /* the reply appears first, empty but for the caret, then the typing starts */
  .hd.run.p-typed .hd-caret { display: none; }
  .hd.run.p-meta .hd-meta { opacity: 1; transform: none; }
  .hd.run .hd-skel { opacity: 1; }
  .hd.run.p-render .hd-skel { opacity: 0; transition-delay: 1s; }
  .hd.run .hd-shot { clip-path: inset(0 0 100% 0); }
  .hd.run.p-render .hd-shot { clip-path: inset(0); }
  .hd.run .hd-clock { opacity: 0; transform: translateY(-6px); }
  .hd.run.p-clock .hd-clock { opacity: 1; transform: none; }
  .hd.run .hd-mark { opacity: 0; transform: scale(1.04); }
  .hd.run .hd-note { opacity: 0; }
  .hd.run.p-mark .hd-mark { opacity: 1; transform: none; }
  .hd.run.p-mark .hd-note { opacity: 1; }
  .hd.run .hd-approve { opacity: 0; transform: translateY(24px); }
  .hd.run.p-approve .hd-approve { opacity: 1; transform: none; }
  .hd.run .hd-cursor { transform: translate(70px, 60px); }
  .hd.run.p-cursor .hd-cursor { opacity: 1; transform: none; }
  .hd.run.p-approved .hd-btn { background: var(--accent); }
  .hd.run.p-approved .hd-btn-a { opacity: 0; }
  .hd.run.p-approved .hd-btn-b { opacity: 1; }
  .hd.run.p-live .hd-cursor { opacity: 0; }
  .hd.run .hd-url-preview { opacity: 1; }
  .hd.run .hd-url-live, .hd.run .hd-lock { opacity: 0; }
  .hd.run.p-live .hd-url-preview { opacity: 0; }
  .hd.run.p-live .hd-url-live, .hd.run.p-live .hd-lock { opacity: 1; }
  .hd.run .hd-live { opacity: 0; transform: scale(.7); }
  .hd.run.p-live .hd-live { opacity: 1; transform: none; }
  .hd.run.p-done .hd-approve { opacity: 0; transform: translateY(24px); }
  .hd.run.p-out .hd-stage { opacity: 0; }
  /* The three steps arrive as one sequence, once, when the row is a little way up the screen: card 1 rises and its
     disc fills, a line draws from its disc to the next, that disc fills and its card rises, and on to the third. Then
     nothing moves again. The script only marks the row ready and, when it comes into view, says go; these timings do
     the rest. Without the script the cards are simply there, solid discs and no line. */
  .steps {
    --rise: 1.1s;    /* a card's rise */
    --line: .45s;    /* the line drawing from one disc to the next; it sets off so that it arrives as the next card starts */
    --fill: .35s;    /* a disc filling in */
    --beat: .7s;     /* card to card */
    --lag: .15s;     /* a disc fills this long after its card starts to rise */
  }
  .step:nth-child(1) { --i: 0; } .step:nth-child(2) { --i: 1; } .step:nth-child(3) { --i: 2; }
  .steps.ready .step { opacity: 0; }
  .steps.go .step { opacity: 1; animation: step-rise var(--rise) var(--ease-out) backwards; animation-delay: calc(var(--i) * var(--beat)); }
  @keyframes step-rise { from { opacity: 0; transform: translateY(18px); } }
  /* the discs: a ring until their turn, then the fill grows behind the number and the number turns white as it lands */
  .steps.ready .num { position: relative; z-index: 0; background: #fff; color: var(--accent-deep); box-shadow: inset 0 0 0 2px var(--accent-deep); }
  .steps.ready .num::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--accent-deep); transform: scale(0); }
  .steps.go .num::before { animation: disc-fill var(--fill) var(--ease-out) forwards; animation-delay: calc(var(--i) * var(--beat) + var(--lag)); }
  .steps.go .num { animation: disc-ink calc(var(--fill) / 2) step-end forwards; animation-delay: calc(var(--i) * var(--beat) + var(--lag)); }   /* the number turns white half way through the fill, once the circle is under it */
  @keyframes disc-fill { to { transform: scale(1); } }
  @keyframes disc-ink { to { color: #fff; } }
  /* the line: from 6px past a disc to 6px before the next one. In a row it runs at the discs' height through the gap
     and into the next card (z-index lifts it above that card's white). Stacked, it is a short stroke in the gap
     beneath the disc. The last card has nothing to lead to. */
  .steps.ready .step::after {
    content: ""; position: absolute; z-index: 1; background: var(--accent-deep);
    left: 70px; top: 45px; height: 2px; width: calc(100% - 22px);
    transform: scaleX(0); transform-origin: left center;
  }
  .steps.ready .step:last-child::after { display: none; }
  .steps.go .step::after { animation: line-draw var(--line) var(--ease-out) forwards; animation-delay: calc(var(--i) * var(--beat) + var(--beat) - var(--line)); }
  @keyframes line-draw { to { transform: scale(1); } }
  @media (max-width: 760px), (min-width: 1100px) {   /* the cards are stacked here: on phones, and beside the demo on wide screens */
    .steps.ready .step::after { left: 43px; top: calc(100% + 1px); width: 2px; height: 22px; transform: scaleY(0); transform-origin: center top; }
  }
  /* Stacked (phones and narrow windows), the three cards run to about 710px, so a single trigger at the top played
     cards 2 and 3 below the fold, unseen. There each card plays as it comes into view: the line above it draws down
     first, then the card rises and its disc fills. Cards that come into view together still take turns (--k is a
     card's place in that batch, --kl the place of the card a line leads to). The script sets .each and the numbers. */
  .steps.each .step.go { opacity: 1; animation: step-rise var(--rise) var(--ease-out) backwards; animation-delay: calc(var(--k) * var(--beat) + var(--line)); }
  .steps.each .step.go .num::before { animation: disc-fill var(--fill) var(--ease-out) forwards; animation-delay: calc(var(--k) * var(--beat) + var(--line) + var(--lag)); }
  .steps.each .step.go .num { animation: disc-ink calc(var(--fill) / 2) step-end forwards; animation-delay: calc(var(--k) * var(--beat) + var(--line) + var(--lag)); }
  .steps.each .step:first-child.go { animation-delay: calc(var(--k) * var(--beat)); }   /* nothing leads to the first card, so it does not wait for a line */
  .steps.each .step:first-child.go .num::before, .steps.each .step:first-child.go .num { animation-delay: calc(var(--k) * var(--beat) + var(--lag)); }
  .steps.each .step.led::after { animation: line-draw var(--line) var(--ease-out) forwards; animation-delay: calc(var(--kl) * var(--beat)); }
  @media (prefers-reduced-motion: reduce) {
    .steps.ready .step, .steps.ready .step::after, .steps.ready .num, .steps.ready .num::before { animation: none !important; }
    .steps.ready .step { opacity: 1; }
    .steps.ready .step::after, .steps.ready .num::before { transform: none; }
    .steps.ready .num { color: #fff; }
  }

  .plans { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; max-width: 1040px; }
  @media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }
  .plan { padding: 30px 28px 32px; border-radius: 14px; background: #fff; border: 1px solid rgb(11 19 41 / .16); box-shadow: 0 8px 24px rgb(11 19 41 / .06); }
  .plan.featured { border: 2px solid var(--accent-deep); }
  .plan h3 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--navy-dim); }
  .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 6px; }
  .price strong { font-size: clamp(2.4rem, 3vw + 1rem, 3.6rem); font-weight: 750; letter-spacing: -.035em; line-height: 1; }
  .price span { font-size: 1.05rem; color: var(--navy-dim); font-weight: 500; }
  .plan .terms { margin: 0 0 20px; color: var(--navy-dim); font-size: 15px; }
  .plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
  .plan li { position: relative; padding-left: 28px; }
  .plan li::before {
    content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--accent-deep);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E");
  }
  .plan li::after {
    content: ""; position: absolute; left: 4px; top: 10px; width: 8px; height: 5px;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
  }
  .pay-later { margin: 28px 0 0; font-size: 1.15rem; font-weight: 600; }
  /* Text us and Call us under the pricing and in the Contact section: the hero's pills, with the same classes and rules,
     so with a mouse the pair gives way to the number, which copies on a click. On the white band (pricing) they are solid
     navy instead of dark glass; on the dark Contact band they look exactly as in the hero. */
  .contact-pills { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px; margin-top: 22px; }
  .start .contact-pills { margin-top: 30px; }   /* the Contact section: under its intro, the email card beside it */
  .band-light .cta-alt { background: var(--navy); border-color: var(--navy); box-shadow: 0 14px 34px rgb(11 19 41 / .22); }
  .band-light .cta-alt:hover { background: #16204a; }
  /* Start the questionnaire in the page's deep blue: How it works' step 1 has it from its white band, and `.cta-deep`
     carries the same colour onto the dark ones, under the founder's headshot, at the foot of the Care Plan and under the
     contact pills (Barrett, 2026-09-22). (It also led the contact pills under the pricing until he had it removed.) */
  .founder-left { min-width: 0; }   /* the photo column: the headshot, his name, then the way in under them */
  .founder-voice { margin: 4px 0 24px; }   /* the founder's reading, over his headline (Barrett, 2026-09-23) */
  .care-go { margin-top: 30px; }      /* the foot of the Care Plan */
  /* No risk's way in (Barrett, 2026-09-24): it comes after the mark in the page, so on a phone, where the grid is one
     column, it sits under the logo and the name, centred as they are ("the questionnaire must go below the logo and
     company name in no risk on mobile"); from 861px the grid puts it back in the left column, 30px under the words */
  .norisk-go { justify-self: center; }
  .deal-go { justify-self: start; }   /* after The Website's receipt (Barrett, 2026-09-24: "on the bottom of the text"), under the words on a wide screen */
  @media (min-width: 861px) {
    .offer-grid { grid-template-areas: "words mark" "go mark"; row-gap: 30px; }
    .offer-grid > div:first-child { grid-area: words; }
    .offer-grid > .mark-wrap { grid-area: mark; }
    .norisk-go { grid-area: go; justify-self: start; }
  }
  .start-go { margin-top: 26px; }     /* under the Contact section's pills */
  .founder-go { margin-top: 36px; }   /* under the headshot (Barrett, 2026-09-22; 26px felt tight under his name), the deep blue of How it works' step 1;
     it is outside .founder-photo, so the pill keeps its own width where the photo narrows to 260px */
  .band-light .cta-go, .cta-deep { background: var(--accent-deep); color: #fff; border-color: var(--accent-deep); box-shadow: 0 14px 34px rgb(30 64 175 / .28); }
  .band-light .cta-go:hover, .cta-deep:hover { background: #1b3a9c; }
  .band-light .cta-go .badge, .cta-deep .badge { background: #fff; color: var(--accent-deep); }
  .band-light .cta-go:hover .badge, .band-light .cta-go:focus-visible .badge,
  .cta-deep:hover .badge, .cta-deep:focus-visible .badge { background: #e9edf5; }
  @media (max-width: 340px) { .cta-go { font-size: 16px; } }   /* "Start the questionnaire" on one line on the smallest phones */

  /* ---------- ROI calculator: beside the plans on wide screens, under them otherwise. A navy card, so it reads as a tool
     next to the two white plan cards. The script shows it; without the script it stays hidden. ---------- */
  .pricing-grid { display: grid; gap: 24px; margin-top: 40px; }
  .pricing-grid .plans { margin-top: 0; max-width: none; }
  @media (min-width: 1200px) {
    /* the four boxes join the calculator's own grid, so the calculator can stretch to the first row alone: website and
       care plan beside it and flush with it, animations and micro-apps in the row underneath */
    .pricing-grid { grid-template-columns: repeat(2, minmax(0, 3fr)) minmax(0, 4fr); }
    .pricing-grid .plans { display: contents; }
    .pricing-grid > .roi { grid-column: 3; grid-row: 1; }
  }
  @media (max-width: 1199px) { .pricing-grid > * { max-width: 1040px; } }
  .roi[hidden] { display: none !important; }
  .roi {
    container-type: inline-size;
    padding: 28px 26px 24px; border-radius: 14px;
    background: var(--band); color: var(--ink);
    box-shadow: 0 18px 40px rgb(11 19 41 / .22);
  }
  @media (max-width: 760px) { .roi { padding: 24px 20px 20px; } }
  .roi-eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
  .roi-title { margin: 0 0 22px; font-size: clamp(1.3rem, .6vw + 1rem, 1.6rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; color: #fff; }
  .roi-body { display: grid; gap: 24px; }
  @container (min-width: 640px) { .roi-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 32px; align-items: start; } }
  .roi-inputs { display: grid; gap: 20px; }
  .roi-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
  .roi-label-row label { font-size: 15px; font-weight: 600; color: var(--ink); }
  .roi-value { font-size: 17px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
  /* the sliders: a filled track up to the thumb (the script sets --fill), and a thumb big enough for a thumb */
  .roi input[type="range"] { --fill: 50%; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; }
  .roi input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--accent) 0 var(--fill), rgb(255 255 255 / .18) var(--fill) 100%); }
  .roi input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); box-shadow: 0 3px 10px rgb(0 0 0 / .4); }
  .roi input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: rgb(255 255 255 / .18); }
  .roi input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--accent); }
  .roi input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); box-shadow: 0 3px 10px rgb(0 0 0 / .4); }
  .roi input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 8px; }
  .roi-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  @container (max-width: 349px) { .roi-cols { grid-template-columns: 1fr; } }
  .roi-col { min-width: 0; padding: 14px 14px 12px; border-radius: 12px; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .1); }
  .roi-col-head { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
  .roi-fees { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
  .roi-net-label { margin: 12px 0 0; font-size: 13px; color: var(--ink-dim); }
  .roi-net { margin: 2px 0 0; font-size: clamp(1.45rem, 1vw + 1rem, 1.8rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .roi-rows { margin: 12px 0 0; display: grid; gap: 4px; font-size: 13.5px; }
  .roi-rows div { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 8px; }
  .roi-rows dt { color: var(--ink-dim); }
  .roi-rows dd { margin: 0 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; }
  .roi .loss { color: #ff9e9e; }   /* a loss is shown as one, in a soft red that reads on navy */
  .roi-summary { margin-top: 16px; display: grid; gap: 6px; font-size: 14.5px; color: var(--ink); }
  .roi-summary p { margin: 0; }
  .roi-summary strong { color: var(--accent); font-variant-numeric: tabular-nums; }
  .roi-fine { margin: 18px 0 0; font-size: 12.5px; color: var(--ink-dim); }

  /* ---------- Our founder: the headshot beside the bio, on the navy band (Barrett's call over white). The photo has a
     white background, so it sits as a card, like the sample cards, with the same border and shadow. ---------- */
  .founder .wrap { display: grid; gap: 48px; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: start; }
  @media (max-width: 860px) { .founder .wrap { grid-template-columns: 1fr; gap: 28px; } }
  .founder-photo { max-width: 380px; }
  @media (max-width: 860px) { .founder-photo { max-width: 260px; } }
  .founder-photo img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid rgb(255 255 255 / .1); box-shadow: 0 18px 40px rgb(0 0 0 / .45); }
  .founder-name { margin: 14px 0 0; line-height: 1.3; }
  .founder-name strong { display: block; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
  .founder-name span { display: block; font-size: 14px; color: var(--ink-dim); }
  .founder-copy { margin: 18px 0 0; max-width: 40em; color: var(--ink-dim); }
  .founder-quote { margin: 26px 0 0; max-width: 40em; padding: 0 0 0 18px; border-left: 3px solid var(--accent); }
  .founder-quote p { margin: 0; font-size: 1.1rem; font-weight: 500; letter-spacing: -.005em; }
  .founder-quote .founder-cite { margin: 8px 0 0; font-size: 14px; font-weight: 400; color: var(--ink-dim); }   /* not a <footer>: the page's footer rules would paint it dark */

  /* ---------- Animations: an add-on at $350 each, with an example animation playing beside the offer. The offer is a navy
     card, the page's colour for a thing to look at twice (the ROI calculator is one too), with the plan boxes' check discs
     and a faint isometric grid that echoes the example's drawing. It sells motion, so it moves: when it comes on screen it
     rises, the price rises, and each check disc fills the way the How it works numbers do, then it holds still. Slower on
     touch screens. The script adds .ready only when it runs and motion is welcome; otherwise the card is simply there. */
  /* Stacked (phones and tablets) the three read in the order Barrett asked for, 2026-09-22: the words, then the example
     animation, then the offer. Side by side from 1000px they sit as before, the words over the offer beside the example. */
  .anim .wrap { display: grid; gap: 40px; }
  @media (min-width: 1000px) {
    .anim .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 56px; align-items: start; }
    .anim-copy { grid-column: 1; grid-row: 1; }
    .anim-offer { grid-column: 1; grid-row: 2; }
    .anim-media { grid-column: 2; grid-row: 1 / span 2; }
  }
  .anim-offer {
    --pace: 1;
    position: relative; isolation: isolate; overflow: hidden;
    max-width: 30em; padding: 30px 28px 32px;
    border-radius: 14px; background: var(--band); color: var(--ink);
    box-shadow: 0 18px 40px rgb(11 19 41 / .18);
  }
  .anim-offer::before {   /* the grid, strongest at the right edge and gone before the text */
    content: ""; position: absolute; inset: -40px; z-index: -1;
    background:
      repeating-linear-gradient(150deg, rgb(143 188 255 / .16) 0 1px, transparent 1.5px 26px),
      repeating-linear-gradient(210deg, rgb(143 188 255 / .16) 0 1px, transparent 1.5px 26px);
    -webkit-mask-image: linear-gradient(to left, #000 12%, transparent 72%);
    mask-image: linear-gradient(to left, #000 12%, transparent 72%);
  }
  .anim-offer .price { margin: 0; }
  .anim-offer .price span { color: var(--ink-dim); }
  .anim-points { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
  .anim-points li { position: relative; padding-left: 32px; font-size: 1.05rem; font-weight: 600; }
  .anim-points li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); }
  .anim-points li::after {
    content: ""; position: absolute; left: 5.5px; top: 9px; width: 9px; height: 5px;
    border-left: 2px solid var(--band); border-bottom: 2px solid var(--band); transform: rotate(-45deg);
  }
  .anim-offer.touch { --pace: 1.7; }
  .anim-offer.ready { opacity: 0; }
  .anim-offer.go { opacity: 1; animation: offer-rise calc(1s * var(--pace)) var(--ease-out) backwards; }
  .anim-offer.go::before { animation: grid-settle calc(1.8s * var(--pace)) var(--ease-out) calc(.1s * var(--pace)) backwards; }
  .anim-offer.go .price > * { animation: rise calc(1s * var(--pace)) var(--ease-out) calc(.25s * var(--pace)) backwards; }
  .anim-offer.go .price span { animation-delay: calc(.35s * var(--pace)); }
  .anim-points li:nth-child(2) { --n: 1; }
  .anim-points li:nth-child(3) { --n: 2; }
  .anim-points li:nth-child(4) { --n: 3; }
  .anim-offer.go .anim-points li { animation: point-in calc(.7s * var(--pace)) var(--ease-out) calc((.55s + var(--n, 0) * .2s) * var(--pace)) backwards; }
  .anim-offer.go .anim-points li::before { animation: disc-grow calc(.6s * var(--pace)) var(--ease-out) calc((.6s + var(--n, 0) * .2s) * var(--pace)) backwards; }
  .anim-offer.go .anim-points li::after { animation: check-draw calc(.35s * var(--pace)) var(--ease-out) calc((.95s + var(--n, 0) * .2s) * var(--pace)) backwards; }
  @keyframes offer-rise { 0% { opacity: 0; transform: translateY(24px); } 30% { opacity: 1; } }   /* solid early: a half-faded navy card reads gray */
  @keyframes grid-settle { from { opacity: 0; transform: translate(-45px, 26px); } }   /* in along the grid's own 30-degree line */
  @keyframes point-in { from { opacity: 0; transform: translateX(-10px); } }
  @keyframes check-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
  @keyframes disc-grow { from { transform: scale(0); } }
  /* the example video: cropped to the illustration, on the same pure white as the band, its edges faded so the drawing's
     grid runs out into the page instead of stopping at a box */
  .anim-media { align-self: center; }
  .anim-video {
    display: block; width: 100%; height: auto; aspect-ratio: 1152 / 1004; background: #fff;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
    mask-composite: intersect;
  }

  .faq { margin-top: 32px; max-width: 760px; border-top: 1px solid rgb(11 19 41 / .14); }
  .faq details { border-bottom: 1px solid rgb(11 19 41 / .14); }
  .faq summary {
    cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 18px 0; font-size: 1.15rem; font-weight: 650; letter-spacing: -.01em;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--navy-dim); flex: none; }
  .faq details[open] summary::after { content: "\2212"; }
  .faq summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 4px; }
  .faq .a { margin: 0; padding: 0 0 20px; color: var(--navy-dim); max-width: 60ch; }

  /* ---------- Questionnaire (in test): a message-and-reply thread. It borrows the look of the Care Plan demo's thread,
     white bubbles for us on the left and blue for the visitor on the right, but under its own names, because the demo's
     bubbles start invisible and are driven by the demo's animation. It is a panel, not a phone: a real conversation needs
     the width. The section is hidden in the HTML and the script shows it, so it never appears without its script. ---------- */
  .ask [hidden] { display: none !important; }   /* the rules below set display, which would otherwise beat the hidden attribute */
  .ask .wrap { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
  @media (max-width: 860px) { .ask .wrap { grid-template-columns: 1fr; gap: 28px; } }
  /* more room between the words and the panel, taken from the words' side so the panel stays exactly where it was
     (Barrett, 2026-09-26: "keep the questionnaire box where it is, just push the right hand boundary of the text a
     little bit to the left", then "a little less margin": 32px became 20px); side by side only, since stacked on a phone
     there is nothing beside the text */
  @media (min-width: 861px) { .ask .wrap > :first-child { padding-right: 20px; } }
  .q-intro { margin: 0; max-width: 40em; color: var(--ink-dim); }   /* normal paragraph size, like the founder bio, not the larger lede */
  .q-intro + .q-intro { margin-top: .9em; }
  .q-offer { margin: 26px 0 0; max-width: 20em; font-size: clamp(1.25rem, .6vw + 1rem, 1.6rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; color: var(--ink); text-wrap: balance; }
  /* the points rules as an offer card: one rule a line, the Care Plan's blue dots, and the numbers picked out in the accent */
  .q-offer-rules {
    list-style: none; margin: 14px 0 0; padding: 18px 20px; display: grid; gap: 10px;
    border-radius: 12px; background: rgb(143 188 255 / .08); border: 1.5px solid rgb(143 188 255 / .45);
    font-size: clamp(15px, .3vw + 14px, 17px); line-height: 1.45; color: var(--ink);
  }
  .q-offer-rules li { position: relative; padding-left: 22px; }
  .q-offer-rules li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
  .q-offer-rules strong { color: var(--accent); font-weight: 700; }
  /* "Remember, you don't pay a dime ...": the size of the paragraphs above and flush left with them, and as far below
     them as they are from each other (Barrett, 2026-09-25: first "vertically centered", 26px above it, then "a little
     less margin on top, make it the same between the first and second paragraph"). It had shared .q-note with the
     note under the chat's input, whose later rule made it 13px, indented 14px and tight to the paragraph above. */
  .q-remember { margin: .9em 0 0; max-width: 40em; color: var(--ink-dim); }
  /* the paragraphs set flush on both sides, so their right edge meets the points box under them, which fills the column
     too (Barrett, 2026-09-26: "make the text flush with the box below it"; the box had stopped at 34em). Side by side
     only: a phone's column is too narrow to justify without wide gaps between the words. */
  @media (min-width: 861px) { .q-intro, .q-remember { text-align: justify; } }
  .q-panel {
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: 16px; background: #111a33;
    border: 1px solid rgb(255 255 255 / .1);
    box-shadow: 0 18px 40px rgb(0 0 0 / .45);
  }
  .q-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgb(255 255 255 / .1); }
  .q-avatar { flex: none; width: 40px; height: auto; filter: invert(1); }   /* the logo mark, white, as in the hero (the file has padding, so 40px reads like the old 34px circle) */
  .q-head strong { display: block; font-size: 15px; line-height: 1.2; }
  .q-head small { display: block; font-size: 12px; color: var(--ink-dim); letter-spacing: .04em; }
  /* fixed height, scrolling inside itself, so the page never jumps as messages arrive; the first child's auto margin
     keeps a short thread at the bottom without cutting off the top of a long one */
  .q-thread { display: flex; flex-direction: column; gap: 8px; height: min(52svh, 400px); overflow-y: auto; overscroll-behavior: contain; scroll-behavior: auto; padding: 16px; }
  .q-thread > :first-child { margin-top: auto; }
  /* A phone scrolls the page by swiping, and a thread that scrolls inside itself swallows the swipe, so the page would
     not move with a finger on the panel. On a phone the thread grows with the conversation instead, and the page does
     all the scrolling; the script keeps the input above the keyboard as the panel grows. */
  @media (max-width: 760px) { .q-thread { height: auto; min-height: 240px; overflow: visible; overscroll-behavior: auto; } }
  .q-thread:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .q-msg { margin: 0; max-width: 86%; padding: 9px 13px; border-radius: 18px; line-height: 1.35; overflow-wrap: anywhere; white-space: pre-wrap; animation: q-in .4s var(--ease-out) backwards; }
  .q-duna { align-self: flex-start; background: #fff; color: var(--ground); border-bottom-left-radius: 6px; }
  .q-you { align-self: flex-end; background: #2a3d78; color: #fff; border-bottom-right-radius: 6px; }
  .q-typing { display: flex; gap: 5px; align-items: center; padding: 13px; }
  .q-typing span { width: 7px; height: 7px; border-radius: 50%; background: #7f89a6; animation: dot .6s ease-in-out infinite; }
  .q-typing span:nth-child(2) { animation-delay: .12s; }
  .q-typing span:nth-child(3) { animation-delay: .24s; }
  @keyframes q-in { from { opacity: 0; transform: translateY(10px); } }
  .q-recap { align-self: stretch; max-width: none; margin: 4px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px solid rgb(255 255 255 / .16); background: rgb(255 255 255 / .04); font-size: 14px; animation: q-in .4s var(--ease-out) backwards; }
  .q-recap div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 10px; padding: 3px 0; }
  .q-recap dt { color: var(--ink-dim); }
  .q-recap dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
  /* the clock and the discount, in a strip right above the input, so they stay in view while someone types, on a phone
     too, where the top of the panel scrolls away as the conversation grows */
  .q-stats { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 10px 16px; border-top: 1px solid rgb(255 255 255 / .1); }
  .q-stat { display: flex; align-items: baseline; gap: 8px; }
  .q-stat-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
  .q-stat-value { font-size: 17px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: #fff; }
  .q-money { color: var(--accent); }
  .q-stat-value.q-out { color: var(--ink-dim); }   /* time ran out */
  .q-bar { display: flex; align-items: flex-end; gap: 10px; padding: 12px; border-top: 1px solid rgb(255 255 255 / .1); }
  .q-input {
    flex: 1; min-width: 0; display: block; resize: none;
    font: inherit; font-size: 16px; line-height: 1.35; color: var(--ink);   /* 16px: anything smaller makes an iPhone zoom in on focus */
    background: var(--band); border: 1.5px solid rgb(255 255 255 / .18); border-radius: 22px; padding: 11px 16px; max-height: 7.4em;
  }
  .q-input::placeholder { color: #8a94b0; }
  .q-input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(143 188 255 / .28); }   /* one soft ring; the border itself turns accent, so focus is still plain to see */
  .q-send {
    flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; padding: 0;
    display: grid; place-items: center; cursor: pointer;
    background: #fff; color: var(--ground);
    transition: background-color .2s var(--ease-out), transform .15s var(--ease-out), opacity .2s var(--ease-out);
  }
  .q-send svg { width: 20px; height: 20px; }
  .q-send:hover { background: #e9edf5; }
  .q-send:active { transform: translateY(1px); }
  .q-send:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  .q-send:disabled { opacity: .35; cursor: default; }
  /* Speak the answer: the send button's twin, outlined rather than white so the send button still leads. It is shown
     on phones and tablets, where the browser can hear (Barrett, 2026-09-22); listening, it turns red and breathes. */
  .q-mic {
    flex: none; width: 46px; height: 46px; padding: 0; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: transparent; color: #fff; border: 1.5px solid rgb(255 255 255 / .38);
    transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), transform .15s var(--ease-out);
  }
  .q-mic svg { width: 20px; height: 20px; }
  .q-mic:hover { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .6); }
  .q-mic:active { transform: translateY(1px); }
  .q-mic:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  .q-mic.on { background: #e5484d; border-color: #e5484d; color: #fff; animation: q-listen 1.6s var(--ease-out) infinite; }
  @keyframes q-listen { 0% { box-shadow: 0 0 0 0 rgb(229 72 77 / .55); } 70%, 100% { box-shadow: 0 0 0 12px rgb(229 72 77 / 0); } }
  .q-note { margin: 0; padding: 0 14px 12px; font-size: 13px; color: var(--ink-dim); }
  .q-note[hidden] { display: none; }
  .q-again { margin: 12px; align-self: flex-start; min-height: 46px; }
  @media (prefers-reduced-motion: reduce) {
    .q-msg, .q-recap { animation: none; }
    .q-typing span { animation: none; }
    .q-send, .q-mic { transition: none; }
    .q-mic.on { animation: none; }
  }

  .start .wrap { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
  @media (max-width: 860px) { .start .wrap { grid-template-columns: 1fr; gap: 28px; } }
  .contact-grid { display: grid; gap: 14px; }
  .tile {
    display: grid; gap: 4px;
    padding: 20px 22px;
    border-radius: 12px;
    background: #111a33;
    border: 1.5px solid rgb(255 255 255 / .14);
    text-decoration: none; color: inherit;
    transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out), transform .15s var(--ease-out);
  }
  .tile:hover { border-color: var(--accent); background: #142042; }
  .tile:active { transform: translateY(1px); }
  .tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .tile-label { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
  .tile-value { font-size: clamp(1.35rem, 1vw + 1rem, 1.8rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
  .tile-email { font-size: clamp(1.05rem, .8vw + .8rem, 1.4rem); overflow-wrap: anywhere; }
  .tile-note { font-size: 14px; color: var(--ink-dim); }
  .copy-row { margin: 6px 0 0; font-size: 15px; color: var(--ink-dim); display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
  .copy-btn {
    font: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
    background: transparent; border: 1.5px solid rgb(255 255 255 / .3); border-radius: 6px; padding: 6px 10px; cursor: pointer;
  }
  .copy-btn:hover { border-color: var(--accent); }
  .copy-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .copy-btn.done { border-color: var(--accent); color: var(--accent); }
  @media (hover: none) and (pointer: coarse) { .copy-row { display: none; } }