/* MRIaudio quote page. Mobile first from the 402px frames; desktop from 1024px, drawn to the 1440px frames (Figma kGJJ5sGQWZdBBrZ5ygcPMc). */
@font-face { font-family: "Mona Sans"; src: url("../fonts/MonaSans-VF.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

.mq {
  --p400:#D0FFFB; --p500:#81D8D0; --p600:#52B7AE; --p700:#3F8E87; --p800:#2E645F; --p900:#194541;
  --black:#0D1819; --n20:#F8F8F8; --n50:#F2F2F2; --n100:#D9D9D9; --n200:#BFBFBF; --n300:#A6A6A6; --n400:#8C8C8C;
  --n500:#737373; --n600:#595959; --n700:#404040; --n800:#262626; --n900:#131313;
  --sans:"Mona Sans", system-ui, sans-serif; --mono:"IBM Plex Mono", ui-monospace, monospace;
  --pad:14px;
  margin:0; background:#fff; color:var(--black); font:400 16px/1.5 var(--sans); font-variation-settings:"opsz" 20;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
:where(.mq) *, :where(.mq) *::before, :where(.mq) *::after { box-sizing:border-box; }
.mq [hidden] { display:none !important; }
:where(.mq) img { display:block; max-width:none; }
:where(.mq) :is(h1, h2, h3, p, ul, dl, dd, blockquote, fieldset) { margin:0; padding:0; }
:where(.mq) ul { list-style:none; }
:where(.mq) fieldset { border:0; min-width:0; }
:where(.mq) a { color:inherit; }
:where(.mq) :is(strong, b) { font-weight:inherit; }
.label { font:500 12px/12px var(--mono); letter-spacing:1px; text-transform:uppercase; color:var(--black); }
.index { font:700 64px/1.1 var(--mono); letter-spacing:-1.28px; color:var(--n100); opacity:.4; font-feature-settings:"ss03" 1; }
@media (max-width:1023.98px) { .only-desk { display:none !important; } }
@media (min-width:1024px) { .mq { --pad:44px; } .only-mob { display:none !important; } }

/* Mona Sans optical size: Figma's text widths and line breaks match a fixed opsz 20 (measured 2026-10-03), not the browser's automatic optical sizing. */
.hero__title, .qform__title, .sec-title, .tcard__quote, .vcard__panel h3, .trial__text, .article__card h2, .band__text, .site-footer__headline, .after__title,
.site-header__title, .video__title, .qresult__price, .pcard__body h3, .ipad h3, .after__spec-name, .logo__word { font-variation-settings:"opsz" 20; }

/* Header */
.site-header { position:sticky; z-index:10; top:0; left:0; right:0; }   /* phones: the site's white header, staying put (Simon, 2026-10-20) */
.site-header__in { height:56px; padding:0 var(--pad); display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid var(--n100); }
.logo { display:flex; align-items:center; gap:4px; color:inherit; text-decoration:none; }
.logo:focus-visible { outline:2px solid var(--p700); outline-offset:4px; border-radius:2px; }
.logo__mark--desk { display:none; }
.logo__mark--dark { display:block; width:19px; height:32px; }
.logo__word { display:block; font:500 22px/1 var(--sans); letter-spacing:-1.1px; color:#000; }
.logo__word b { font-weight:700; }
.burger { width:44px; height:44px; margin-right:-10px; padding:0; border:0; background:none; color:var(--black); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.burger svg { width:26px; height:26px; }
.burger__x, .burger[aria-expanded="true"] .burger__lines { display:none; }
.burger[aria-expanded="true"] .burger__x { display:block; }
.sheet { position:fixed; z-index:9; left:0; right:0; top:56px; bottom:0; display:flex; flex-direction:column; background:#fff; overflow:auto; padding-bottom:24px; }
.sheet .label { color:var(--p800); padding:18px var(--pad) 10px; }
.sheet__row { display:flex; align-items:center; justify-content:space-between; padding:16px var(--pad); border-bottom:1px solid var(--n50); font:500 17px/1.3 var(--sans); color:var(--black); text-decoration:none; }
.sheet__row i { font-style:normal; font-size:22px; line-height:1; color:var(--n400); }
.sheet__foot { padding:20px var(--pad) 0; }
.sheet__foot .btn { width:100%; }
.is-sheet-open { overflow:hidden; }
.m-top { display:flex; flex-direction:column; gap:10px; padding:22px var(--pad) 0; }
.m-top__title { font:400 40px/1.05 var(--sans); letter-spacing:-.8px; }
.m-partners { padding:14px 0 6px; }
.site-header__title { font:400 24px/1.2 var(--sans); letter-spacing:-.24px; color:var(--n20); white-space:nowrap; }
.index--header { font-size:24px; line-height:1; letter-spacing:-.48px; }
@media (max-width:1023.98px) {
  .site-header { transition:transform .25s; }
  .is-cal-open .site-header { transform:translateY(-100%); }
  .is-after .site-header { position:static; transform:none; }
  #quote { scroll-margin-top:56px; }
  .qrow { gap:18px; }   /* the form compact on phones (Simon, 2026-10-20: the form within the first screen) */
  .qform__fields { gap:24px; }
  .hero__form { padding:12px var(--pad) 24px; }
}
@media (min-width:1024px) {
  .site-header { position:static; padding:25px var(--pad) 0; }
  .site-header__in { height:66px; padding:0 0 10px; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:1px solid var(--n200); }
  .logo__mark--dark { display:none; }
  .logo__mark--desk { display:block; width:45.134px; height:56px; }
  .logo__word { font:500 30.545px/1 var(--sans); letter-spacing:-1.5273px; }
  .logo__word b { font-weight:700; }
}

/* Partner strip: official colour logos scrolling continuously (Simon, 2026-10-03). The track holds the list twice and moves by half its width, so it loops without a seam. */
.partners { display:flex; align-items:center; height:64px; overflow:hidden; background:#fff; }
.partners__track { display:flex; align-items:center; width:max-content; animation:partners-scroll 172.4s linear infinite; }   /* ~34 px/s over the 45-slot loop (+20%, Simon, 2026-10-04; 5 logos and 3 figures since 2026-10-09; shorter with the smaller logos, 2026-10-13) */
.partners li { flex:none; display:flex; align-items:center; justify-content:center; height:40px; padding:0 22px; }
.partners img { height:calc(var(--h) * .56); width:auto; filter:grayscale(1); }   /* greyscale and a fifth smaller: "too important right now" (Ornella; Simon 2026-10-13) */
.partners__stat { flex-direction:column; gap:3.6px; height:auto !important; } /* figures 20% larger than first built (Simon, 2026-10-04) */
.partners__num { font:500 26.4px/1 var(--sans); letter-spacing:-.48px; color:var(--p700); font-variation-settings:"opsz" 20; }
.partners__what { font:400 10.8px/1 var(--mono); letter-spacing:.72px; text-transform:uppercase; color:var(--n600); white-space:nowrap; }
@keyframes partners-scroll { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) { .partners__track { animation:none; } }
@media (min-width:1024px) {
  .partners { height:157px; }
  .partners__track { animation-duration:225.1s; } /* about 39px a second over the 45-slot loop (+20%, Simon, 2026-10-04; 5 logos and 3 figures since 2026-10-09) */
  .partners li { height:97px; padding:0 40px; }
  .partners img { height:calc(var(--h) * .8); }
  .partners__stat { gap:9.6px; }
  .partners__num { font-size:48px; letter-spacing:-1.2px; }
  .partners__what { font-size:13.2px; letter-spacing:1.2px; }
}

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:12.5px; border:0; border-radius:5px; cursor:pointer; text-decoration:none;
  font:500 12px/16px var(--sans); text-transform:uppercase; white-space:nowrap; }
.btn--primary { flex:1 0 0; min-width:0; padding:12px 24px; background:var(--p500); color:var(--p800); }
.btn--primary img { width:16px; height:16px; }
/* Continue: pale until the name and a valid email are in, then the full teal with a small nudge of the arrow; never disabled
   (Ornella's proposal, as Simon decided it, 2026-10-13). */
.qform__continue { transition:background-color .25s ease; }
.qform__continue:not(.is-ready) { background:var(--p400); }
.qform__continue.is-ready img { animation:continue-nudge .5s ease-in-out 2; }
@keyframes continue-nudge { 50% { transform:translateX(5px); } }
@media (prefers-reduced-motion:reduce) { .qform__continue { transition:none; } .qform__continue.is-ready img { animation:none; } }
.btn--outline { padding:8px 24px; border:.615px solid var(--p800); border-radius:2.46px; color:var(--p800); background:#fff; font-size:12px; line-height:14.5px; }
.btn--square { width:32px; height:32px; padding:8px; border:.615px solid var(--p800); border-radius:2.46px; background:var(--p500); }
.btn--white { background:#fff; color:var(--black); font-size:14px; line-height:26.7px; padding:8px 44px; border-radius:4.45px; }
.btn--dark { height:44px; padding:12px 52px; border-radius:4px; background:var(--black); color:var(--p500); font-size:14px; line-height:20px; }
.btn--dark.btn--square { width:44px; padding:10px; border:0; }
.btn:focus-visible, .tile:focus-within, .chip:focus-within, .qinput:focus-visible { outline:2px solid var(--p700); outline-offset:2px; }
.btn-plus { display:inline-flex; align-items:center; justify-content:center; width:23px; height:23px; background:var(--p500); border:.6px solid var(--n800); border-radius:2.4px; }
.cta-row { display:flex; align-items:center; }
.reps { display:flex; flex:none; }
.reps__face { display:flex; padding:1.28px; border-radius:999px; }
.reps__face--dark { background:var(--black); margin-right:-12.78px; position:relative; z-index:1; }
.reps__face--teal { background:var(--p500); }
.reps img { width:37.4px; height:37.4px; border-radius:999px; object-fit:cover; object-position:50% 20%; }
@media (min-width:1024px) {
  .btn--primary { padding:16px 52px; }
  .btn--lg { height:62px; font-size:16px; line-height:30px; padding:16px 52px; }
  .btn--lg img { width:24px; height:24px; }
  .qform__cta .reps__face { padding:1.98px; }
  .qform__cta .reps__face--dark { margin-right:-19.8px; }
  .qform__cta .reps img { width:58px; height:58px; }
  .btn--white { font-size:16px; line-height:30px; padding:8px 55px; }
}
.link-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9.6px 0; border-bottom:1px solid var(--n700);
  font:500 12px/16px var(--sans); text-transform:uppercase; color:var(--n700); text-decoration:none; }
.link-row--light { color:#fff; border-bottom-color:#fff; }

/* Hero */
.hero { position:relative; }
.hero__top { display:none; }
/* Email and phone: desktop top right in the header (Simon, 2026-10-04); phones under the heading (2026-10-20). */
.hero__contact { display:flex; gap:24px; }
.hero__contact a { display:flex; align-items:center; gap:8px; font:400 13px/1.5 var(--mono); color:var(--p700); text-decoration:none; font-feature-settings:"ss03" 1; white-space:nowrap; }
.hero__icon { flex:none; width:15px; height:15px; fill:currentColor; } /* filled mail and phone: Material Icons (Apache 2.0) */
.site-header__contact { display:none; }
.backed { font:400 10px/32px var(--mono); letter-spacing:1px; text-transform:uppercase; color:var(--n200); }
.tv { position:relative; width:calc(100% + 3px); margin-left:-3px; aspect-ratio:405 / 540; overflow:hidden; }
.tv__stand { position:absolute; width:118.7%; height:106.94%; left:-6.52%; top:-3.58%; transform:scaleX(-1); }
.tv__arm { position:absolute; left:44%; top:37.8%; width:52.5%; height:auto; }

.hero__main { position:relative; }
.hero__visual { position:absolute; inset:0; overflow:hidden; z-index:0; }
.hero__tv-bg { position:absolute; top:0; left:-3px; width:calc(100% + 3px); height:auto; transform:scaleX(-1); opacity:.9; }
.hero__form { position:relative; z-index:1; padding:15px var(--pad) 24px; background:rgba(255,255,255,.8); -webkit-backdrop-filter:blur(32px); backdrop-filter:blur(32px); }
@media (min-width:1024px) {
  .hero { max-width:1440px; margin:0 auto 25px; }
  .hero__top { display:block; position:relative; height:157px; margin:0 var(--pad); border-bottom:1px solid var(--n100); }
  .hero__title { position:absolute; left:0; top:11px; font:400 90px/118.26px var(--sans); letter-spacing:-1.8px; color:#000; }   /* the letters centred in the band, 38 px above and below (Simon, 2026-10-04) */
  .site-header__contact { display:flex; gap:44px; }   /* top right, level with the logo (Simon, 2026-10-04) */
  .hero__contact a { font-size:16px; }
  .hero__icon { width:17px; height:17px; }
  .hero__partners { position:absolute; left:591px; right:calc(-1 * var(--pad)); top:0; height:156px; overflow:hidden; }
  .hero__partners::before, .hero__partners::after { content:""; position:absolute; top:0; bottom:0; width:238px; z-index:1; pointer-events:none; }
  .hero__partners::before { left:-32px; background:linear-gradient(to right, #fff 0, #fff 14.3%, rgba(255,255,255,0) 100%); }
  .hero__partners::after { right:0; background:linear-gradient(to left, #fff 0, rgba(255,255,255,0) 100%); }
  /* 516 = the Submit button's foot (492: Name and Email on one line, Submit and the demo tick on one row, Simon 2026-10-04) plus the
     24 px the explorer's buttons sit under the top line (Figma had 819). */
  .hero__main { display:grid; grid-template-columns:618px minmax(0, 1fr); column-gap:46px; min-height:548px; margin-left:var(--pad); }   /* 516 + the privacy line's two rows (2026-10-09) */
  .hero__main::after { content:""; position:absolute; left:calc(-1 * var(--pad) - 4px); right:0; bottom:0; height:1px; background:var(--n100); }
  /* Step 2 can run longer than the 516px frame: the explorer (or the calendar) then stays in view beside it. */
  .hero__visual { position:sticky; inset:0 auto auto; grid-column:2; grid-row:1; align-self:start; height:548px; border-left:1px solid var(--n100); }
  .items-group--packs .items { display:grid; grid-template-columns:1fr 1fr; column-gap:27px; }
  .hero__tv-bg { display:none; }
  .hero__visual .explorer { --x-foot:56px; }   /* 24 + the privacy line's 32 px (2026-10-09) */   /* the control room ends level with the Submit button (Simon, 2026-10-04) */
  .hero__form { grid-column:1; grid-row:1; display:flex; flex-direction:column; padding:16px 0 16px; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* Form */
.qform { display:flex; flex-direction:column; gap:24px; }
.qform__title { font:400 24px/1.2 var(--sans); letter-spacing:-.24px; color:#000; }
.qform__fields { display:flex; flex-direction:column; gap:32px; }
.qrow { display:flex; flex-direction:column; gap:27px; }
.qfield { display:flex; flex-direction:column; gap:9px; min-width:0; }
.qfield > legend { margin-bottom:9px; }
.qhelp { font-size:14px; line-height:1.5; color:var(--n600); }
.qfield .qhelp { margin-top:1px; }
/* Must-fill labels (NAME*, EMAIL*) carry the checkboxes' light teal, like a highlighter: the letters and the fields stay where they were (Simon, 2026-10-04). */
.qfield:has(> .qinput[required]) > .label { align-self:flex-start; margin:-3px 0 -3px -5px; padding:3px 4px 3px 5px; background:var(--p400); }   /* 4 on the right: the letter-spacing after "*" makes up the fifth */
.qinput { width:100%; padding:10px; border:0; border-bottom:.5px solid var(--black); border-radius:0; background:transparent; font:400 16px/1.5 var(--sans); color:var(--black); appearance:none; }
.qinput::placeholder { color:var(--n400); opacity:1; }
.qinput:focus { outline:none; border-bottom-color:var(--p700); box-shadow:0 1px 0 var(--p700); }
.qselect { background:transparent url("../img/caret-down.svg") no-repeat right 4px center / 20px; padding-right:32px; }
.qerr { font-size:13px; line-height:1.4; color:#B3261E; }
.qconsent { margin-top:-12px; font-size:13px; line-height:1.4; color:var(--n600); }   /* privacy line under the button (copy brief, Simon 2026-10-09) */
.qconsent a { display:block; width:fit-content; color:inherit; text-decoration:underline; text-underline-offset:2px; }   /* on its own line (Simon, 2026-10-09) */
/* Desktop: two lines under the button row; Submit's foot stays at 740 and the hero ends 16 px under the line (Simon, 2026-10-09). */
@media (min-width:1024px) { .qconsent { margin-top:-36px; font-size:12px; line-height:16px; } }   /* 8 px under the button row (the form's gap is 44) */
.tiles { display:flex; gap:9px; }
.tile { position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; height:116px; border:1px solid var(--n50); border-radius:4px; overflow:hidden; cursor:pointer; background:#fff; }
.tile input { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.tile__label { display:flex; align-items:center; justify-content:center; font:300 14px/1.5 var(--sans); color:var(--n500); white-space:nowrap; }
.tile:has(input:checked) { border-color:var(--p500); }
.tile:has(input:checked) .tile__label { background:var(--p500); color:var(--n900); font-weight:400; }

/* Product choice (step 1): the products themselves, larger, on a soft spotlight that turns teal when ticked; a round tick, no boxes (Simon, 2026-10-03). */
.tiles--products { gap:6px; }
.tiles--products .tile { height:auto; border:0; border-radius:0; overflow:visible; background:none; align-items:center; gap:6px; }
.tiles--products .tile:focus-within { outline:none; }
.tiles--products .tile:has(input:focus-visible) .tile__img { outline:2px solid var(--p700); outline-offset:2px; }
.tile__img { position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:144px; border-radius:50%; }
.tile__img::before { content:""; position:absolute; inset:4% 2% 0; border-radius:50%; transition:background .25s, transform .25s;
  background:radial-gradient(closest-side, #fff 0, var(--n50) 62%, rgba(242,242,242,0) 100%); }
.tile__img::after { content:""; position:absolute; left:22%; right:22%; bottom:6px; height:10px; border-radius:50%; background:radial-gradient(closest-side, rgba(13,24,25,.16), rgba(13,24,25,0)); }
.tile__img img { position:relative; z-index:1; width:auto; height:auto; max-width:94%; max-height:92%; object-fit:contain; transition:transform .25s;
  filter:drop-shadow(0 8px 10px rgba(13,24,25,.16)); }
.tile__img--flat img { max-width:100%; filter:none; mix-blend-mode:multiply; } /* the audio set is photographed on white */
.tile__img--tv img { max-height:100%; transform:scaleX(-1); }
.tile__check { position:absolute; top:6px; right:6px; z-index:2; width:15.3px; height:15.3px; background:var(--p400); border:.62px solid var(--p800); border-radius:2.95px; } /* same box as the demo checkbox */
.tiles--products .tile__label { gap:8px; height:auto; padding:0; background:none; font:600 14px/1.3 var(--sans); color:var(--n600); white-space:normal; text-align:left; }
.tiles--products .tile__check { position:relative; inset:auto; flex:none; margin:-1px 0; }   /* beside the name, not in the corner (Simon, 2026-10-04); -1 px so the 22 px box adds no height to the name's line (Submit stays put) */
@media (max-width:380px) { .tiles--products .tile__label { gap:6px; font-size:13px; } }   /* each name on one line beside its box on 360 px phones */
.tiles--products .tile:has(input:checked) .tile__img::before { background:radial-gradient(closest-side, var(--p400) 0, rgba(129,216,208,.55) 60%, rgba(129,216,208,0) 100%); transform:scale(1.04); }
.tiles--products .tile:has(input:checked) .tile__img img { transform:scale(1.06); }
.tiles--products .tile:has(input:checked) .tile__img--tv img { transform:scaleX(-1) scale(1.06); }
.tiles--products .tile:has(input:checked) .tile__check::after { content:""; position:absolute; inset:2.33px; background:var(--p800); border-radius:1.5px; }
.tiles--products .tile:has(input:checked) .tile__label { background:none; color:var(--black); font-weight:600; }   /* names bold throughout (Simon, 2026-10-04) */
@media (hover:hover) {
  .tiles--products .tile:hover .tile__img img { transform:translateY(-3px) scale(1.04); }
  .tiles--products .tile:hover .tile__img--tv img { transform:scaleX(-1) translateY(-3px) scale(1.04); }
}
@media (prefers-reduced-motion:reduce) { .tile__img::before, .tile__img img { transition:none; } }
.tiles--text .tile { height:auto; }
.tiles--text .tile__label { position:static; height:44px; justify-content:center; padding:0 10px; white-space:normal; text-align:center; line-height:1.2; }
/* Box left of the label, in line with the Audio system square above (Simon, 2026-10-04): that square sits where its centred label starts,
   half of (a tile's width - the label's width) in; --x-gap is the tiles' gap, --x-lw the rendered width of "☐ Audio system". */
.qdemo { display:flex; align-items:flex-start; gap:12px; cursor:pointer; }
.qdemo__text { display:flex; flex-direction:column; gap:6px; }   /* the label, its message on the next line (Simon, 2026-10-04) */
.qdemo .qcheck__box { margin-top:3.35px; }   /* centred on the label's 22 px line */
@media (min-width:1024px) { .qdemo .qcheck__box { margin-top:-5px; } }   /* centred on the label's 12 px line */
.qdemo .qhelp { line-height:17px; }
.qdemo__text .label { font-feature-settings:"ss03" 1; line-height:22px; }
.qcheck { position:absolute; opacity:0; width:1px; height:1px; }
.qcheck__box { flex:none; position:relative; width:15.3px; height:15.3px; margin-top:4px; background:var(--p400); border:.62px solid var(--p800); border-radius:50%; }   /* round (Simon, 2026-10-04) */
.qcheck:checked + .qcheck__box::after { content:""; position:absolute; left:50%; top:46%; width:28%; height:52%; border:solid var(--p800);
  border-width:0 1.6px 1.6px 0; transform:translate(-50%, -50%) rotate(45deg); }   /* a tick, not a dot, same colour (Simon, 2026-10-13) */
.qcheck:focus-visible + .qcheck__box { outline:2px solid var(--p700); outline-offset:2px; }
.hp { display:none; }
/* Phones: the reps and the demo tick, then a full-width Submit; desktop: the same on one row, Submit at its right end (Simon, 2026-10-04/05). */
.qform__cta { display:flex; flex-direction:column; gap:16px; margin-top:8px; }
.qform__demo { display:flex; align-items:center; gap:14px; }
.qform__cta .btn { flex:none; width:100%; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { position:relative; cursor:pointer; }
.chip input { position:absolute; opacity:0; }
.chip span { display:block; padding:6px 10px; border:1px solid var(--n50); border-radius:4px; font:300 14px/1.4 var(--sans); color:var(--n500); }
.chip input:checked + span { border-color:var(--p500); background:var(--p500); color:var(--n900); font-weight:400; }
.qfield--count .qinput { max-width:140px; }
/* The number: a phone icon at its left (Simon, 2026-10-14); its Save sits at the field's right end (Simon, 2026-10-14); once saved it reads "Saved" with a tick and the line turns teal. */
.qphone { position:relative; }
.qphone .qinput { padding-left:38px; padding-right:96px; }
.qphone--plain .qinput { padding-right:10px; }
.qphone__icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); width:18px; height:18px; fill:var(--p700); pointer-events:none; }
.qphone .qinput.is-saved { border-bottom-color:var(--p700); }
.qphone__save { position:absolute; right:0; top:50%; transform:translateY(-50%); padding:6px 14px; border:0; border-radius:4px; background:var(--p500); color:var(--p800);
  font:500 12px/16px var(--sans); text-transform:uppercase; cursor:pointer; }
.qphone__save:focus-visible { outline:2px solid var(--p700); outline-offset:2px; }
.qphone__save.is-saved { background:none; color:var(--p700); padding-right:0; cursor:default; }
.qphone__save.is-saved::before { content:""; display:inline-block; width:9px; height:5px; margin:0 7px 3px 0; border:solid currentColor; border-width:0 0 2px 2px; transform:rotate(-45deg); }
.qfor { display:flex; align-items:baseline; gap:10px; margin-top:-8px; font-size:14px; line-height:1.4; color:var(--n700); }
.qfor .label { color:var(--n500); }
.qfor__change { margin-left:auto; padding:0; border:0; background:none; font:500 12px/16px var(--sans); text-transform:uppercase; color:var(--p700); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.items-group { display:flex; flex-direction:column; gap:4px; margin-top:12px; }
.items-group__title { font:400 12px/20px var(--mono); text-transform:uppercase; color:var(--n500); font-feature-settings:"ss03" 1; }
.items { display:flex; flex-direction:column; }
.item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:.5px solid var(--n100); font-size:14px; line-height:1.4; }
.item__img { flex:none; width:56px; height:56px; border-radius:4px; background:#fff; }
.item__text { display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
.item__unit { display:flex; flex-direction:column; align-items:flex-start; font-size:12px; color:var(--n500); }   /* the price, then "Buy now" under it, on every row (Simon, 2026-10-14) */
.item__buy { white-space:nowrap; font:500 12px/16px var(--sans); text-transform:uppercase; color:var(--p700); text-decoration:underline; text-underline-offset:3px; }
.qhelp a { color:var(--p700); text-decoration:underline; text-underline-offset:3px; }
.stepper { display:flex; align-items:center; flex:none; border:1px solid var(--n50); border-radius:4px; }
.stepper button { width:32px; height:32px; border:0; background:none; font:400 18px/1 var(--sans); color:var(--p800); cursor:pointer; }
.stepper input { width:44px; height:32px; border:0; text-align:center; font:400 15px/1 var(--sans); -moz-appearance:textfield; }
.stepper input::-webkit-inner-spin-button { -webkit-appearance:none; }
.qresult { margin-top:32px; padding-top:24px; border-top:1px solid var(--n100); display:flex; flex-direction:column; gap:10px; }
.qresult__parts { display:flex; flex-direction:column; gap:20px; }
.qresult__part { display:flex; flex-direction:column; gap:8px; }
.qresult__part + .qresult__part { padding-top:20px; border-top:.5px solid var(--n100); }
.qresult__part .label { color:var(--n600); }
.qresult__price { font:400 40px/48px var(--sans); letter-spacing:-1px; color:var(--black); }
.qresult__store { display:flex; flex-direction:column; }
.qresult__note { font-size:14px; line-height:1.5; color:var(--n700); }
/* The systems line by line: count × name, price each, amount (Simon, 2026-10-14). */
.qlines { display:flex; flex-direction:column; gap:6px; margin:4px 0 6px; font-size:14px; line-height:1.4; color:var(--n700); }
.qlines__row { display:grid; grid-template-columns:1fr auto auto; column-gap:16px; align-items:baseline; }
.qlines__row dd { margin:0; text-align:right; }
.qlines__each { font-size:12px; color:var(--n500); }
.qlines__amount { color:var(--n900); }
.qlines__row--credit .qlines__amount { color:var(--p800); }
/* Step 2 opens by confirming the request is in (Simon, 2026-10-14). */
.qconfirm { display:flex; flex-direction:column; gap:4px; margin-bottom:28px; padding:14px 16px; border-left:3px solid var(--p600); background:color-mix(in srgb, var(--p400) 45%, #fff); }
.qconfirm__title { display:flex; align-items:baseline; gap:10px; font:500 16px/1.4 var(--sans); color:var(--n900); }
.qconfirm__tick { flex:none; width:10px; height:6px; position:relative; top:-3px; border:solid var(--p800); border-width:0 0 2px 2px; transform:rotate(-45deg); }
.qconfirm__text { padding-left:20px; font-size:14px; line-height:1.5; color:var(--n700); }
.qconfirm__test { padding-left:20px; font:400 12px/1.5 var(--mono); text-transform:uppercase; color:var(--p800); }
.qconfirm__test[hidden] { display:none; }
/* The $0, 30-day trial, next to the price and the demo (Simon, 2026-10-14). */
.qtrial { display:flex; flex-direction:column; gap:4px; margin-top:6px; padding:14px 16px; border:1px solid var(--p500); border-radius:4px; background:#fff; }
.qtrial[hidden] { display:none; }
.qtrial__title { font:600 16px/1.4 var(--sans); color:var(--p800); }
.qtrial__text { font-size:14px; line-height:1.5; color:var(--n700); }
.qresult__volume { display:flex; flex-direction:column; gap:4px; font-size:14px; line-height:1.5; color:var(--n700); }
.qresult__volume[hidden] { display:none; }
.qresult__call { font-size:16px; line-height:1.5; color:var(--n700); }
.qresult__call a { color:var(--n900); font-weight:600; text-decoration:none; white-space:nowrap; }
.qresult__call a:hover { text-decoration:underline; }
.qresult__demo { align-self:flex-start; gap:10px; }
@media (min-width:1024px) {
  .qform { gap:44px; flex:1; }
  .qform__title { font-size:40px; line-height:48px; letter-spacing:-.4px; }
  .qform__fields { gap:44px; }
  .qrow { flex-direction:row; gap:27px; }
  .qrow > * { flex:1 1 0; }
  .qform__fields { padding-bottom:0; }
  .tiles { gap:9px; }
  .tiles--text .tile { flex:1 1 0; }
  /* Each product in its own container, the whole container the choice; chosen, it fills light teal (Ornella's frame 212:872, Simon 2026-10-05).
     211 px tall, not her 220, so Submit's foot stays at 740 above the fold. The pictures sit where she placed them in her 200 px containers. */
  .tiles--products { gap:9px; }
  .tiles--products .tile { height:211px; padding:24px 16px; justify-content:space-between; gap:0; border:1px solid var(--n100); border-radius:4px; overflow:hidden; background:#fff; transition:background .25s, border-color .25s; }
  .tiles--products .tile:has(input:checked) { background:var(--p400); border-color:var(--p500); }
  .tiles--products .tile:has(input:focus-visible) { outline:2px solid var(--p700); outline-offset:2px; }
  .tiles--products .tile:has(input:focus-visible) .tile__img { outline:none; }
  .tiles--products .tile__img { flex:none; align-items:flex-start; width:calc(100% + 32px); height:149px; margin:-18px -16px 0; border-radius:0; }
  .tiles--products .tile__img::before, .tiles--products .tile__img::after { display:none; }
  .tiles--products .tile__img img { max-width:none; max-height:none; height:auto; filter:none; width:99.5%; margin-top:7px; }   /* the headphones */
  .tiles--products .tile__img--flat img { width:88%; margin-top:13px; }
  .tiles--products .tile__img--tv img { width:60.5%; margin-top:0; }
  .tiles--products .tile:has(input:checked) .tile__img img { transform:none; }
  .tiles--products .tile:has(input:checked) .tile__img--tv img { transform:scaleX(-1); }
  .tiles--products .tile__check { display:none; }
  .tiles--products .tile__label, .tiles--products .tile:has(input:checked) .tile__label { justify-content:center; font:400 14px/1.5 var(--sans); color:var(--n900); white-space:nowrap; text-align:center; }
  .qcheck__box { width:22.1px; height:22.1px; border-width:.94px; border-radius:50%; margin-top:-5px; }   /* centred on the 12 px label line */
  .qcheck:checked + .qcheck__box::after { border-width:0 2.2px 2.2px 0; }
  /* The demo tick on the reps' faces, across the teal face's right edge and centred on them; its words follow (Ornella's frame, Simon 2026-10-05). */
  .qdemo { align-items:center; }
  .qdemo .qcheck__box { z-index:2; margin:0 0 0 -27px; }
  .qdemo__text { max-width:410px; }
  .qdemo__text .label { line-height:12px; }
  .qform__cta { flex-direction:row; align-items:center; gap:16px; margin-top:0; }
  .qform__cta .btn { width:224px; margin-left:auto; padding-left:0; padding-right:0; }   /* after the demo, at the row's right end (Simon, 2026-10-05) */
  .qdemo__text .label { white-space:nowrap; }
  #quote-step1 .qform__fields { padding-top:28px; }
}
@media (hover:hover) and (min-width:1024px) {
  .tiles--products .tile:hover .tile__img img { transform:translateY(-3px); }   /* in the containers: a lift, no growing past the edge */
  .tiles--products .tile:hover .tile__img--tv img { transform:scaleX(-1) translateY(-3px); }
}

/* Calendar (HubSpot embed). Mobile: an overlay over the blurred page (frames 169:7142, 169:7198); desktop: in place of the image, beside step 2. */
.qcal { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:72px 18px 96px;
  background:rgba(242,242,242,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.qcal__card { display:flex; flex-direction:column; width:100%; max-width:420px; height:100%; max-height:640px; background:#fff; box-shadow:0 12px 40px rgba(13,24,25,.18); }
.qcal__head { flex:none; display:flex; align-items:center; justify-content:space-between; padding:8px 8px 8px 16px; border-bottom:1px solid var(--n100); }
.qcal__close { width:40px; height:40px; border:0; background:none; font:300 28px/1 var(--sans); color:var(--n700); cursor:pointer; }
.qcal__embed { flex:1; min-height:0; }
.qcal__embed iframe { display:block; width:100%; height:100%; border:0; }
.is-cal-open #sticky-cta { visibility:hidden; }
@media (min-width:1024px) {
  .qcal { position:sticky; inset:0 auto auto; grid-column:2; grid-row:1; align-self:start; height:min(734px, 100vh); z-index:2; display:block; padding:0; background:#fff;
    backdrop-filter:none; -webkit-backdrop-filter:none; border-left:1px solid var(--n100); }
  .qcal__card { max-width:none; max-height:none; box-shadow:none; }
  .qcal__head { padding:16px 24px 16px 32px; }
  .is-cal-open .hero__visual { visibility:hidden; }
}

/* Section heads */
.sec-head { position:relative; display:flex; flex-direction:column; gap:17px; padding:0 var(--pad); }
.kicker { display:flex; align-items:center; gap:9px; font:400 14px/20px var(--mono); color:var(--p600); text-transform:uppercase; font-feature-settings:"ss03" 1; white-space:nowrap; }
.kicker::before { content:""; flex:none; width:8px; height:8px; border-radius:2px; background:var(--p600); }
.sec-title { font:400 36px/1.2 var(--sans); letter-spacing:-.36px; color:var(--n900); }
.sec-title span { color:var(--n500); }
.sec-text { font-size:14px; line-height:20px; color:var(--n600); text-align:justify; }
.sec-text strong { color:var(--n900); }
.dots { position:absolute; inset:10px; pointer-events:none; z-index:2;
  background: linear-gradient(var(--p500),var(--p500)) left top/13px 13px no-repeat, linear-gradient(var(--p500),var(--p500)) right top/13px 13px no-repeat,
              linear-gradient(var(--p500),var(--p500)) left bottom/13px 13px no-repeat, linear-gradient(var(--p500),var(--p500)) right bottom/13px 13px no-repeat; }
.dots--dark { background: linear-gradient(var(--black),var(--black)) left top/13px 13px no-repeat, linear-gradient(var(--black),var(--black)) right top/13px 13px no-repeat,
              linear-gradient(var(--black),var(--black)) left bottom/13px 13px no-repeat, linear-gradient(var(--black),var(--black)) right bottom/13px 13px no-repeat; }
@media (min-width:1024px) {
  .sec-head { max-width:1440px; margin:0 auto; }
  .sec-head .index { font-size:96px; line-height:96px; letter-spacing:-1.92px; }
  .sec-title { font-size:50.09px; line-height:60.108px; letter-spacing:-.5px; }
  .sec-text { font-size:16px; line-height:1.5; }
}

/* Testimonials [02] (desktop 169:6586, mobile 169:7470) */
.testimonials { padding:39px 0 0; }
.testimonials .sec-head { gap:0; }
.t-top { display:flex; align-items:center; justify-content:space-between; }
.t-headline { margin-top:44px; display:flex; flex-direction:column; gap:17px; }
.t-rating { margin-top:12px; display:flex; align-items:center; gap:6px; font:400 16px/1.2 var(--sans); color:var(--n900); }   /* once above the cards, not 5/5 on each (Simon, 2026-10-09) */
.t-rating b { font:400 19px/24px system-ui, sans-serif; color:var(--p600); }
.btn-pair { display:flex; gap:5.8px; }
.carousel-nav { display:none; }
.tcards { display:flex; flex-direction:column; gap:16px; padding:24px var(--pad) 0; }
.tcard { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"quote quote" "body body" "who top"; gap:16px; align-items:end;
  padding:24px; background:var(--n20); }
.tcard::after { content:""; position:absolute; right:9px; top:8px; width:12px; height:12px; border-radius:2px; background:var(--p500); }
.tcard blockquote { display:contents; }
.tcard__mark { position:absolute; left:6.95px; top:7.29px; width:54.06px; height:41.88px; }
.tcard__quote { grid-area:quote; position:relative; font:600 16px/1.5 var(--sans); color:var(--n900); }
.tcard__body { grid-area:body; font-size:14px; line-height:20px; color:var(--n900); text-align:justify; }
.tcard__who { grid-area:who; display:flex; flex-direction:column; gap:4px; padding:16px 8px 0; border-left:1px solid var(--n300); font-size:14px; line-height:20px; }
.tcard__who b { font-weight:700; color:var(--n900); max-width:197px; }
.tcard__who span { font:400 12px/20px var(--mono); color:var(--n300); text-transform:uppercase; }
.tcard__top { grid-area:top; display:flex; align-items:center; gap:10px; height:38px; }
.tcard__avatar { display:flex; padding:2.2px; border-radius:999px; background:var(--black); }
.tcard__avatar img { width:39.6px; height:39.6px; border-radius:999px; background:#fff; object-fit:cover; }
.rating { display:flex; align-items:center; gap:2px; font:400 16px/1.2 var(--sans); letter-spacing:-.16px; color:var(--n900); white-space:nowrap; }
.rating span { color:var(--n400); }
.rating b { font:400 19px/24px system-ui, sans-serif; color:var(--p600); }
@media (min-width:1024px) {
  .testimonials { position:relative; max-width:1440px; margin:0 auto; height:1058px; padding:28px 0 0; }
  .t-top { display:block; }
  .testimonials .sec-head .kicker { margin:22px 0 0 6px; }
  .t-headline { display:block; margin-top:7px; max-width:1008px; }
  .testimonials .sec-title { display:inline; }
  .btn-pair { display:inline-flex; gap:8px; vertical-align:top; margin:11px 0 0 24px; }
  .btn--outline { height:44px; padding:10.15px 37.2px; border-width:.846px; border-radius:3.385px; font-size:14px; line-height:20px; }
  .btn--square { width:44px; height:44px; padding:10px; border-width:.846px; border-radius:3.385px; }
  .btn--square img { width:20px; height:20px; }
  .carousel-nav { display:flex; gap:6px; position:absolute; right:var(--pad); top:216px; }
  .carousel-nav__btn { display:flex; align-items:center; justify-content:center; padding:10.265px; border:1.109px solid var(--n800); border-radius:4.436px; background:rgba(255,255,255,.05); cursor:pointer; }
  .carousel-nav__btn:first-child { border-color:var(--n300); }
  .carousel-nav__btn img { width:21.25px; height:21.25px; }
  .tcards { position:absolute; left:0; right:0; top:381px; flex-direction:row; gap:24px; padding:0 var(--pad); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .tcards::-webkit-scrollbar { display:none; }
  .tcard { flex:none; width:548px; height:513px; scroll-snap-align:start; grid-template-columns:minmax(0,1fr); grid-template-areas:"top" "gap" "quote" "body" "who";
    grid-template-rows:38px 52px auto auto auto; align-content:center; align-items:start; }
  .tcard:nth-child(1) { width:549px; } .tcard:nth-child(2) { width:664px; } .tcard:nth-child(3) { width:407px; }
  .tcard__mark { position:static; grid-area:gap; align-self:end; margin:0 0 -1px 0.95px; }
  .tcard__quote { font:500 32px/40px var(--sans); letter-spacing:-.32px; }
  .tcard__body { font-size:16px; line-height:1.4; letter-spacing:-.16px; }
  .tcard__who b { font-weight:600; font-size:16px; line-height:1.2; letter-spacing:-.16px; max-width:none; }
  .tcard__avatar { padding:2.6px; }
  .tcard__avatar img { width:46.8px; height:46.8px; }
}

/* Video [03] (desktop 169:6212, mobile 169:7579) */
.video { position:relative; height:751px; overflow:hidden; background:var(--black); color:#fff; margin-top:67px; }
.video iframe { position:absolute; inset:0; z-index:3; width:100%; height:100%; border:0; background:#000; }
.video__films { position:absolute; right:14px; top:18px; z-index:4; display:flex; gap:8px; }
.video__film { display:flex; flex-direction:column; gap:6px; width:96px; padding:0; border:0; background:none; color:var(--n200); cursor:pointer; text-align:left; }
.video__film img { width:96px; height:54px; object-fit:cover; border:1.5px solid rgba(255,255,255,.35); border-radius:4px; }
.video__film[aria-pressed="true"] img { border-color:var(--p600); }
.video__film-name { font:400 10px/1.2 var(--mono); letter-spacing:.5px; text-transform:uppercase; }
.video__film[aria-pressed="true"] .video__film-name { color:#fff; }
.video__film:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.video__poster { position:absolute; top:0; left:-711px; width:1448px; height:751px; object-fit:cover; }
.video::before { content:""; position:absolute; inset:0; z-index:1; background:rgba(0,0,0,.4); }
.video .index { position:absolute; left:13px; top:18px; z-index:2; }
.video__title { position:absolute; left:13px; top:104px; z-index:2; font:400 36px/1.2 var(--sans); letter-spacing:-.36px; color:#F2F2F2; }
.video__title span { color:var(--n200); display:block; }
.video__play { position:absolute; left:50%; top:353px; z-index:2; width:44px; height:44px; margin-left:-22px; display:flex; align-items:center; justify-content:center; padding:2.857px;
  border:0; border-radius:28.3px; background:var(--p500); cursor:pointer; }
.video__play img { width:14.86px; height:14.86px; }
.video__text { position:absolute; left:14px; right:14px; top:509px; z-index:2; font-size:14px; line-height:20px; color:var(--n200); text-align:justify; }
.video__text span { color:var(--n100); }
.video__cta { position:absolute; left:13px; right:14px; top:679px; z-index:2; border:1.113px solid #fff; }
.video__cta img { width:21.33px; height:21.33px; }
@media (min-width:1024px) {
  .video { max-width:1440px; margin:0 auto; }
  .video__poster { left:0; width:1448px; }
  .video .index { left:var(--pad); top:34px; font-size:96px; line-height:96px; letter-spacing:-1.92px; }
  .video__films { right:var(--pad); top:44px; gap:16px; }
  .video__film, .video__film img { width:160px; }
  .video__film img { height:90px; }
  .video__film-name { font-size:12px; }
  .video__play { top:277px; width:154px; height:154px; margin-left:-77px; border-radius:99px; padding:10px; }
  .video__play img { width:52px; height:52px; }
  .video__title { left:44px; top:520px; font-size:50.09px; line-height:60.108px; letter-spacing:-.5px; }
  .video__text { left:879px; right:auto; width:481px; top:557px; font-size:16px; line-height:1.5; }
  .video__cta { left:44px; right:auto; top:651px; border-width:1.252px; border-radius:5px; }
  .video__cta img { width:24px; height:24px; }
}

/* Values [04] (desktop 169:6222 top part, mobile 169:7589) */
.values { padding:67px 0 0; }
.values .sec-head { gap:44px; }
.values .sec-text { margin-top:-28px; }
.values .sec-title span { display:block; }
.vgrid { display:flex; flex-direction:column; gap:16px; padding:16px var(--pad) 0; }
.vcard { position:relative; display:flex; flex-direction:column; }
.vcard__img { width:100%; height:300px; object-fit:cover; }
.vcard--2 .vcard__img { height:258px; }
.vcard--3 .vcard__img, .vcard--4 .vcard__img { height:258px; }
.vcard--2 .vcard__img, .vcard--3 .vcard__img, .vcard--4 .vcard__img { transform:scaleX(-1); }
.vcard .dots { inset:10px 9px auto 11px; height:280px; }
.vcard--2 .dots, .vcard--3 .dots, .vcard--4 .dots { display:none; }
.vcard__panel { display:flex; flex-direction:column; gap:16px; padding-top:16px; }
.vcard__copy { display:flex; flex-direction:column; gap:8px; }
.vcard__panel h3 { font:400 24px/1.2 var(--sans); letter-spacing:-.24px; color:var(--n900); }
.vcard__panel p { font-size:14px; line-height:20px; color:var(--n600); }
.vcard__panel .link-row { border-bottom-color:var(--n700); color:var(--n700); }
.trial { position:relative; display:flex; flex-direction:column; gap:24px; padding:20px 24px 32px; background:var(--p500); }
.trial .dots { inset:14px 18px 15px 20px; background-size:0 0, 13px 13px, 13px 13px, 13px 13px; }
.trial__kicker { display:flex; align-items:center; gap:8px; font:400 16px/1.5 var(--mono); color:var(--black); text-transform:uppercase; }
.trial__kicker::before { content:""; width:14px; height:14px; border-radius:2px; background:var(--black); }
.trial__text { margin-top:56px; font:400 26px/1.3 var(--sans); letter-spacing:-.5px; color:var(--n800); }
.trial__text strong { font-weight:500; color:var(--n900); }
.trial .cta-row { gap:4px; }
.trial .reps { margin-right:0; }
.trial .reps__face { padding:2px; }
.trial .reps__face--dark { margin-right:-13.5px; }
.trial .reps__face--teal { background:#fff; }
.trial .reps img { width:39.6px; height:39.6px; }
.trial .btn--dark:not(.btn--square) { padding:12px 40px; }
@media (min-width:1024px) {
  .values { max-width:1440px; margin:0 auto; padding:60px 0 0; }
  .values .sec-head { padding:0 0 0 45px; max-width:1365px; gap:49px; display:grid; grid-template-columns:1fr 506px; align-items:start; }
  .values .index { grid-column:1 / -1; }
  .values .sec-text { margin-top:0; }
  .vgrid { display:grid; grid-template-columns:548px 312px 445px; column-gap:24px; row-gap:35px; padding:140px 0 0 45px; }
  .vcard, .trial { height:542px; }
  .vcard { display:block; overflow:hidden; }
  .vcard--1 { grid-column:1; } .vcard--2 { grid-column:2 / 4; } .vcard--3 { grid-column:1 / 4; } .vcard--4 { grid-column:1 / 3; } .trial { grid-column:3; }
  .vcard__img, .vcard--2 .vcard__img, .vcard--3 .vcard__img, .vcard--4 .vcard__img { position:absolute; inset:0; height:100%; }
  .vcard--1 .vcard__img { inset:auto; width:201.44%; height:135.79%; left:-53.29%; top:-14.35%; object-fit:fill; }
  .vcard--3 .vcard__img { object-fit:fill; }
  .vcard .dots, .vcard--2 .dots, .vcard--3 .dots, .vcard--4 .dots { display:block; inset:15px 16px 14px 16px; height:auto; }
  .vcard__panel { position:absolute; left:0; bottom:0; padding:32px 44px 32px 32px; gap:16px; border-radius:2px;
    background:rgba(129,216,208,.1); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); }
  .vcard--1 .vcard__panel { left:114px; width:434px; height:213px; padding:16px 32px 24px; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
  .vcard--2 .vcard__panel { width:435px; height:213px; padding:16px 44px 32px 32px; }
  .vcard--3 .vcard__panel { width:458px; }
  .vcard--4 .vcard__panel { width:442px; }
  .vcard__panel h3 { font:500 32px/40px var(--sans); letter-spacing:-.32px; white-space:nowrap; }
  .vcard__panel p { font-size:20px; line-height:1.2; letter-spacing:-.2px; max-width:366px; }
  .vcard--2 .vcard__panel p, .vcard--3 .vcard__panel p, .vcard--4 .vcard__panel p { width:366px; max-width:none; }
  .vcard__panel .link-row { margin-top:auto; font-size:14px; line-height:24px; color:var(--black); border-bottom-color:var(--black); }
  .vcard--3 .vcard__panel .link-row, .vcard--4 .vcard__panel .link-row { margin-top:0; }
  .vcard--light .vcard__panel h3 { color:#F2F2F2; }
  .vcard--2 .vcard__panel h3 { color:var(--n100); }
  .vcard--light .vcard__panel p { color:var(--n100); }
  .vcard--light .vcard__panel .link-row { color:#fff; border-bottom-color:#fff; }
  .trial { display:block; padding:0; }
  .trial__kicker { position:absolute; left:20px; top:12px; }
  .trial__text { position:absolute; left:24px; top:173px; width:398px; margin:0; font-size:30px; letter-spacing:-.6px; }
  .trial .cta-row { position:absolute; left:24px; top:392px; }
}

/* Article (desktop 169:6223 + 169:6494) */
.article { position:relative; margin:16px var(--pad) 0; overflow:hidden; display:flex; flex-direction:column; }
.article__img { position:relative; width:100%; height:330px; object-fit:cover; object-position:50% 40%; }
.article__kicker { position:absolute; left:38px; top:9px; z-index:2; font:400 14px/20px var(--mono); color:var(--p500); text-transform:uppercase; font-feature-settings:"ss03" 1; }
.article .dots { inset:12px 14px auto 15px; height:306px; }
.article__card { display:flex; flex-direction:column; gap:16px; padding:32px 24px; background:var(--p700); color:#F2F2F2; }
.article__copy { display:flex; flex-direction:column; gap:8px; }
.article__card h2 { font:500 26px/1.25 var(--sans); letter-spacing:-.26px; color:#F2F2F2; }
.article__card p { font-size:16px; line-height:1.3; color:var(--n100); }
.article__meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; }
.article__source { display:flex; align-items:center; gap:24px; }
.article__source img { width:130px; height:auto; }
.article__date { font:400 12px/20px var(--mono); text-transform:uppercase; color:var(--n100); max-width:120px; }
.article .link-row { gap:10px; font-size:14px; line-height:24px; }
@media (min-width:1024px) {
  .article { max-width:1350px; margin:33px auto 0; height:731px; display:block; }
  .article__img { position:absolute; width:143.53%; height:143.7%; left:-21.76%; top:-43.64%; object-fit:fill; max-width:none; }
  .article .dots { inset:12px 14px 13px 15px; height:auto; }
  .article__card { position:absolute; left:0; bottom:0; padding:32px 44px 32px 32px; border-radius:2px; -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); }
  .article__card h2 { font-size:32px; line-height:40px; letter-spacing:-.32px; white-space:nowrap; }
  .article__card p { width:623px; font-size:20px; line-height:1.2; letter-spacing:-.2px; }
  .article__meta { flex-wrap:nowrap; }
  .article__source { gap:32px; }
  .article__source img { width:163px; height:50.94px; object-fit:cover; }
}

/* Band (desktop 169:6400) */
.band { position:relative; margin:0 var(--pad); padding:64px 0 72px; display:flex; flex-direction:column; gap:24px; }
.band .dots { inset:30px 0 40px; }
.band__text { font:400 26px/1.3 var(--sans); letter-spacing:-.26px; color:var(--n900); }
.band__text span { color:var(--n400); }
.band__stat { position:relative; }
.band__stat img { width:100%; height:auto; }
.band__caption { position:absolute; left:11.7%; top:62%; width:34%; font:300 13px/1.2 var(--mono); letter-spacing:-.6px; text-transform:uppercase; color:var(--n300); }
@media (min-width:1024px) {
  .band { max-width:1353px; height:372px; margin:49px auto 0; padding:0; display:block; }
  .band .dots { inset:-3px 17px 13px 18px; }
  .band__text { position:absolute; left:18px; top:42px; width:330px; font-size:32px; line-height:40px; letter-spacing:-.32px; }
  .band__stat { position:absolute; left:317px; top:60px; width:998px; height:270px; }
  .band__stat img { width:998px; height:270px; }
  .band__caption { left:116px; top:173px; width:161px; font-size:21px; line-height:1.2; letter-spacing:-1.05px; }
}

/* Footer (reduced to logo, phone, email, privacy and terms) */
.site-footer { background:var(--black); color:var(--n200); padding:32px var(--pad) 96px; }
.site-footer__top { position:relative; border-bottom:.5px solid var(--p800); }
.site-footer__headline { font:300 24px/1.2 var(--sans); letter-spacing:-.24px; max-width:374px; }
.site-footer__headline strong { font-weight:700; }
.site-footer__arc { display:block; height:126px; overflow:hidden; margin:0 0 0 auto; width:215px; }   /* sits on the line (169:7330); starts under the headline, which wraps to a longer last line on 360 px phones */
.site-footer__arc img { width:215.5px; height:auto; }
/* One colour for the whole line: the design's #404040 is 1.7:1 on the footer, too faint to read; --n400 is 5.4:1. */
.site-footer__bottom { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:32px 24px; padding-top:15px; font:400 12px/12px var(--mono); letter-spacing:1px; text-transform:uppercase;
  color:var(--n400); font-feature-settings:"ss03" 1; }
.site-footer__bottom a { color:inherit; text-decoration:none; }
.site-footer__bottom a:hover { color:var(--p500); }
.site-footer__bottom a[href^="mailto:"] { text-transform:none; } /* the email is shown in lowercase everywhere (Simon, 2026-10-03) */
@media (min-width:1024px) {
  .site-footer { margin-top:110px; padding:132px var(--pad) 85px; }   /* the page's margins; 85 under the bottom line, as in 169:6668 */
  .site-footer__top::after { content:""; position:absolute; right:-5px; bottom:-5px; width:10px; height:10px; border-radius:3.3px; background:var(--p800); }
  .site-footer__top, .site-footer__bottom { max-width:1352px; margin:0 auto; }
  .site-footer__top { min-height:153px; padding-bottom:0; }
  .site-footer__headline { max-width:min(930px, calc(100% - 380px)); font-size:52px; line-height:1.3; letter-spacing:-.52px; }   /* wraps before the arc (340 + 12 from the right) */
  .site-footer__headline strong { font-weight:600; }
  .site-footer__arc { position:absolute; right:12px; bottom:0; width:340px; height:199px; margin:0; }
  .site-footer__arc img { width:340.8px; }
  /* One line where it fits (about 1310 and wider), as designed; narrower, two rows of three. */
  .site-footer__bottom { grid-template-columns:repeat(3, auto); justify-content:space-between; gap:14px 24px; padding-top:14px; white-space:nowrap; }
}

@media (min-width:1360px) { .site-footer__bottom { display:flex; gap:24px; } }

/* Sticky CTA */
#sticky-cta { position:fixed; left:0; right:0; bottom:0; z-index:50; padding:10px 10px 32px; background:rgba(255,255,255,.1); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
  transform:translateY(110%); visibility:hidden; transition:transform .25s, visibility .25s; }
#sticky-cta.is-visible { transform:none; visibility:visible; }
@media (min-width:1024px) { #sticky-cta { left:50%; right:auto; width:520px; margin-left:-260px; bottom:16px; padding:10px; border-radius:8px; } }

/* After submission. Session 4's script adds .is-after to <body> when #quote-after is shown (frames 169:7636, 169:7420). */
.is-after .hero { display:none; }
.index__after { display:none; }
.is-after .site-header { position:static; padding:10px var(--pad) 0; }
.is-after .site-header__in { height:46px; padding:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom:1px solid var(--n100); align-items:flex-start; }
.is-after .logo__mark--white, .is-after .site-header__title, .is-after .index__normal { display:none; }
.is-after .index__after { display:inline; }
.kicker--products { color:var(--p600); }
.after { padding-top:20px; }
.after__top { position:relative; display:flex; flex-direction:column; padding:0 var(--pad); }
.after__thanks { display:contents; }
.after__thanks .reps img { width:39.6px; height:39.6px; }
.after__thanks .reps__face { padding:2.2px; }
.after__title { font:400 36px/1.2 var(--sans); letter-spacing:-.36px; color:var(--n900); }
.after__title span { color:var(--n500); display:block; }
.after__title { margin-top:30px; }
.after__note { margin-top:12px; max-width:520px; font-size:16px; line-height:1.5; color:var(--n700); }
.after__facts { position:relative; z-index:1; display:flex; flex-direction:column; gap:18px; order:3; height:194px; margin:-199px calc(-1 * var(--pad)) 0; padding:0 16px;
  background:rgba(255,255,255,.1); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.after__facts::before { content:""; width:12px; height:12px; border-radius:2px; background:var(--p500); }
.after__facts div { display:flex; flex-direction:column; gap:9px; }
.after__facts dt { color:var(--n400); }
.after__facts dd { padding:10px 0; font-size:16px; line-height:1.5; color:var(--n900); }
.after__product { position:relative; order:2; margin:5px 0 0; }
.after__product .tv { width:100%; margin:0; aspect-ratio:380.7 / 507.84; }
.after__spec { display:none; }
.index--corner { display:none; }
.products { padding:40px 0 24px; }
.products .sec-head { gap:20px; }
.products .sec-title span { display:block; }
.products .sec-head .kicker { position:absolute; right:var(--pad); top:24px; }
.products__cards { display:flex; flex-direction:column; gap:24px; padding:24px var(--pad) 0; }
.pcard { position:relative; display:flex; flex-direction:column; background:var(--n20); }
.pcard__img { width:100%; height:420px; object-fit:contain; }
.pcard__img--headphones { height:240px; }
.pcard__body { display:flex; flex-direction:column; gap:8px; padding:16px 24px 24px; }
.pcard__body h3 { font:500 26px/1.25 var(--sans); letter-spacing:-.26px; color:var(--n900); }
.pcard__body p { font-size:16px; line-height:1.3; color:var(--n600); }
.ipad { margin:24px var(--pad) 0; padding:32px 24px; background:var(--p500); display:flex; flex-direction:column; gap:24px; }
.ipad h3 { font:500 26px/1.25 var(--sans); color:var(--n900); }
.ipad p { margin-top:12px; font-size:16px; line-height:1.3; color:var(--n600); }
.ipad .link-row { margin-top:24px; color:var(--black); border-bottom-color:var(--black); }
.ipad__img { width:100%; height:auto; border-radius:20px; }
@media (min-width:1024px) {
  .after { max-width:1440px; margin:0 auto; padding-top:0; }
  .after__top { display:grid; grid-template-columns:618px minmax(0, 1fr); column-gap:46px; min-height:970px; padding:0 0 0 var(--pad); border-bottom:1px solid var(--n100); }
  .after__thanks { display:flex; flex-direction:column; padding-top:39px; gap:24px; }
  .after__title { margin-top:0; }
  .after__thanks .reps img { width:64.8px; height:64.8px; }
  .after__thanks .reps__face { padding:3.6px; }
  .after__thanks .reps__face--dark { margin-right:-22px; }
  .after__title { font-size:50.09px; line-height:60.1px; letter-spacing:-.5px; max-width:758px; }
  .after__facts { position:absolute; left:48px; top:776px; height:auto; margin:0; padding:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .is-after .site-header { padding:31px var(--pad) 0; }
  .is-after .site-header__in { height:66px; padding:0 0 10px; align-items:center; }
  .products .sec-head .kicker { position:static; }
  .kicker--products { color:var(--p500); }
  .kicker--products::before { width:6px; height:6px; border-radius:0; background:var(--p500); }
  .after__product { grid-column:2; grid-row:1 / span 2; margin:10px 0 0; border-left:1px solid var(--n100); height:819px; }
  .after__product .tv { position:absolute; left:85px; top:6px; width:591px; height:788px; aspect-ratio:auto; margin:0; }
  .after__spec { display:block; position:absolute; left:47px; top:459px; width:249px; }
  .after__spec-name { font:400 40px/48px var(--sans); letter-spacing:-.4px; color:var(--n500); }
  .bullets li { position:relative; padding-left:12px; font:400 16px/32px var(--mono); letter-spacing:-.8px; text-transform:uppercase; color:var(--n500); }
  .bullets li::before { content:""; position:absolute; left:0; top:14px; width:5px; height:5px; background:var(--n200); }
  .index--corner { display:block; position:absolute; right:40px; top:10px; font-size:60.587px; line-height:60.587px; }
  .products { padding:186px 0 72px; }
  .products .sec-head { display:grid; grid-template-columns:1fr 506px; column-gap:48px; align-items:start; }
  .products .index { grid-column:1 / -1; }
  .products .kicker { grid-column:1; }
  .products .sec-title { grid-column:1; }
  .products .sec-text { grid-column:2; grid-row:2 / 4; align-self:end; }
  .products__cards { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:1440px; margin:0 auto; padding:72px var(--pad) 0; }
  .pcard { height:518px; display:block; overflow:hidden; }
  .pcard__img { position:absolute; left:0; top:0; height:100%; width:auto; max-width:60%; object-fit:contain; object-position:0 50%; }
  .pcard__img--headphones { width:100%; max-width:none; height:76%; object-position:50% 20%; }
  .pcard__body { position:absolute; right:0; bottom:0; width:434px; height:213px; padding:16px 32px 24px; background:rgba(255,255,255,.2);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
  .pcard:nth-child(2) .pcard__body { left:0; width:auto; }
  .pcard__body h3 { font-size:32px; line-height:40px; letter-spacing:-.32px; }
  .pcard__body p { font-size:20px; line-height:1.2; letter-spacing:-.2px; }
  .pcard__body .link-row { margin-top:auto; color:var(--black); border-bottom-color:var(--black); }
  .ipad { position:relative; max-width:1348px; height:542px; margin:24px auto 0; padding:103px 52px 40px; display:block; overflow:hidden; }
  .ipad__body { width:444px; height:100%; display:flex; flex-direction:column; }
  .ipad h3 { font-size:32px; line-height:40px; letter-spacing:-.32px; }
  .ipad p { font-size:20px; line-height:1.2; letter-spacing:-.2px; text-align:justify; }
  .ipad .link-row { margin-top:auto; width:382px; font-size:14px; }
  .ipad__img { position:absolute; left:592px; top:70px; width:693px; height:531px; object-fit:cover; border-radius:32px; }
}

.dots--ipad { display:none; }
@media (min-width:1024px) { .dots--ipad { display:block; inset:12px 16px 12px 9px; z-index:2; background: linear-gradient(#131313,#131313) left top/12px 12px no-repeat, linear-gradient(#131313,#131313) right top/12px 12px no-repeat, linear-gradient(#131313,#131313) left bottom/12px 12px no-repeat, linear-gradient(#131313,#131313) right bottom/12px 12px no-repeat; } }

/* ── System Explorer (spec SPEC-EXPLORER-2026-10-04; design approved by Simon 2026-10-04 on the companion, v7).
   Desktop column beside the form. Positions are in stage units (1508 × 1330); the stage fits under the buttons and its foot sits
   --x-foot above the column's foot (in the hero: level with the Submit button, Simon 2026-10-04). ── */
.explorer { display:none; }
@media (min-width:1024px) {
  .explorer { display:block; position:absolute; inset:0; container-type:size; overflow:hidden; background:#fff; color:var(--black); }
  /* The scene rises to the buttons (Simon, 2026-10-04): the picture fills the column's width with its foot level with Submit, and its empty
     white top slides up out of view. The cap keeps the scanner's top (--x-sky, 270 of the picture's 1330 units, the highest thing under the
     buttons) at least --x-top below the column's top; the TV and its dot, on the right, clear the buttons. */
  .explorer { --x-top:70px; --x-foot:24px; --x-sky:270; }
  .explorer__stage { position:absolute; left:50%; bottom:var(--x-foot); width:min(100cqw, (100cqh - var(--x-top) - var(--x-foot)) * 1508 / (1330 - var(--x-sky))); aspect-ratio:1508 / 1330; transform:translateX(-50%); }
  .explorer__picture, .explorer__pic { position:absolute; inset:0; width:100%; height:100%; }
  .explorer__inset { position:absolute; border:3px solid #fff; border-radius:6px; overflow:hidden; background:#fff; box-shadow:0 4px 18px rgba(13,24,25,.16); }
  .explorer__inset img { width:100%; height:100%; }
  .explorer__inset .label { position:absolute; left:8px; bottom:8px; padding:4px 6px; font-size:10px; line-height:10px; white-space:nowrap; background:var(--black); color:#fff; }
  .explorer__screens { position:absolute; left:0; top:0; width:1508px; height:1330px; transform:scale(var(--k, .5)); transform-origin:0 0; pointer-events:none; }
  .explorer__tv { position:absolute; left:0; top:0; width:384px; height:216px; transform-origin:0 0; object-fit:cover; background:#0D1819; }
  .explorer__ghost { position:absolute; pointer-events:none; }   /* the scanner's translucent shell, over the TV's clip */
  .explorer__xray { position:absolute; mix-blend-mode:multiply; pointer-events:none; }
  .explorer__paths { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
  .explorer__sight { fill:none; stroke:var(--p600); stroke-width:4; stroke-dasharray:10 10; stroke-linecap:round; }   /* the page teal (Simon, 2026-10-04) */
  .explorer__reveal { fill:none; stroke:#fff; stroke-width:60; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1 1; stroke-dashoffset:0; }
  .explorer__paths.is-drawing .explorer__reveal { animation:x-draw 1.2s ease-in-out .3s both; }
  .explorer__leads path { fill:none; stroke:var(--n400); stroke-width:2; }
  .explorer__ticks path { fill:none; stroke:var(--p700); stroke-width:2.5; }
  .explorer__ticks circle { fill:var(--p700); }
  .explorer__veil { position:absolute; inset:0; background:rgba(255,255,255,.62); opacity:0; transition:opacity .2s; pointer-events:none;
    -webkit-mask:radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), transparent var(--sr, 0px), #000 calc(var(--sr, 0px) + 60px));
            mask:radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), transparent var(--sr, 0px), #000 calc(var(--sr, 0px) + 60px)); }
  .explorer.is-card .explorer__veil { opacity:1; }
  /* 64 px hover and click area, twice the old 32; the dot and its ring keep their size (Simon, 2026-10-09). */
  .explorer__spot { position:absolute; width:64px; height:64px; margin:-32px 0 0 -32px; padding:0; border:0; border-radius:50%; background:none; cursor:pointer; }
  .explorer__spot::before { content:""; position:absolute; inset:25px; border-radius:50%; background:var(--p500); box-shadow:0 0 0 2px #fff, 0 1px 4px rgba(13,24,25,.3); transition:transform .15s, background .15s; }
  .explorer__spot::after { content:""; position:absolute; inset:20px; border-radius:50%; border:2px solid var(--p500); opacity:0; animation:x-ring 2.4s ease-out infinite; }
  /* On landing, three strong pulses (a wider, brighter ring and a bump of the dot), then the gentle pulse for good (Simon, 2026-10-05). */
  .explorer__spot.is-intro::after { animation:x-ring-strong 1.6s ease-out 3, x-ring 2.4s ease-out 4.8s infinite; }
  .explorer__spot.is-intro::before { animation:x-bump 1.6s ease-out 3; }
  /* On landing, an arrow in marker black draws in with the second strong pulse (one pulse in) and fades when the three are over
     (Simon, 2026-10-06); explorer.js aims it at the tablet. */
  .explorer__arrow { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; animation:x-fade-out .5s ease-in 4.8s forwards; }
  .explorer__arrow[hidden] { display:none; }
  .explorer__arrow path { fill:none; stroke:var(--black); stroke-width:6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1 1; }
  .explorer__arrow-line { animation:x-draw .45s ease-out 1.6s both; }
  .explorer__arrow-head { animation:x-draw .15s ease-out 2.05s both; }
  .explorer__spot[aria-expanded="true"]::before { background:var(--black); box-shadow:0 0 0 3px var(--p500); transform:scale(1.15); }
  .explorer__spot:focus-visible { outline:2px solid var(--p700); outline-offset:2px; }
  /* A short tag beside a dot, e.g. "Mirror fits all head coils" to the mirror's left, shown with its state (Simon, 2026-10-04).
     The tag and the notes wrap at the stage's edge on narrow desktops (max-width set by explorer.js); one line from about 1280. */
  /* A highlighter stroke across the text, not a box (Simon, 2026-10-05): a drawn band with wavy edges and ragged chisel-tip ends that runs a
     little past the words, a fainter second pass for the streaks, multiplied into the picture like ink on paper; the text stays crisp on top. */
  .explorer__tag { position:absolute; transform:translate(calc(-100% - 18px), -50%); padding:4px 6px; mix-blend-mode:multiply; font:500 10.5px/1.3 var(--mono); letter-spacing:.5px; text-transform:uppercase; color:var(--black); text-align:right; text-wrap:balance; pointer-events:none; }
  .explorer__tag::before { content:""; position:absolute; inset:-2px -6px; z-index:-1; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40' preserveAspectRatio='none'%3E%3Cpath d='M6 11 L3 14 L5 17 L2 21 L4 25 L2 29 L5 33 C40 34 80 32 120 33 C160 34 200 31 234 31 L237 27 L235 23 L238 19 L236 15 L238 11 C200 8 160 10 120 8 C80 7 40 9 6 11 Z' fill='%23FFE45C' fill-opacity='.92'/%3E%3Cpath d='M10 15 C70 13 140 15 230 13 L231 18 C150 19 80 17 9 19 Z' fill='%23F5CF2E' fill-opacity='.35'/%3E%3Cpath d='M8 27 C80 28 150 26 232 27 L231 30 C150 30 80 31 9 31 Z' fill='%23F5CF2E' fill-opacity='.25'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }   /* bleeds past the words */
  .explorer__tag--at { transform:translate(-50%, 0); text-align:center; white-space:pre-line; text-wrap:nowrap; }   /* centred at its own point, its lines as written (Simon, 2026-10-09) */
  .explorer__note { position:absolute; transform:translate(0, -50%); padding:4px 6px; background:rgba(255,255,255,.92); font:500 10.5px/1.3 var(--mono); letter-spacing:.5px; text-transform:uppercase; color:var(--n600); text-wrap:balance; }
  .explorer__bar { position:absolute; z-index:5; top:24px; left:28px; right:28px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; pointer-events:none; }
  .explorer__bar > * { pointer-events:auto; }
  /* Scan / TV mount: a quiet second level — small label, text options, the chosen one underlined (Simon, 2026-10-04). */
  .explorer__group { flex-basis:100%; display:flex; align-items:center; gap:14px; }
  .explorer__group .label { font-size:10.5px; line-height:10.5px; color:var(--n500); }
  .explorer__options { display:flex; gap:16px; }
  .explorer__options label { position:relative; }
  .explorer__options input { position:absolute; opacity:0; pointer-events:none; }
  .explorer__options span { display:block; padding:4px 0 3px; border-bottom:2px solid transparent; font:500 13px/1 var(--sans); color:var(--n500); cursor:pointer; white-space:nowrap; }
  .explorer__options label:hover span { color:var(--p800); }
  .explorer__options input:checked + span { color:var(--black); border-bottom-color:var(--p500); }
  .explorer__options input:focus-visible + span { outline:2px solid var(--p700); outline-offset:2px; }
  .explorer__systems { display:flex; gap:8px; }
  .explorer__systems label { position:relative; }
  .explorer__systems input { position:absolute; opacity:0; pointer-events:none; }
  /* Secondary to Continue (Simon, 2026-10-13: "they look more primary than Continue"): an outline, the selected one a translucent teal. */
  .explorer__systems span { display:block; padding:10px 16px; border:1px solid rgba(63, 142, 135, .35); border-radius:4px; background:transparent; font:500 14px/1 var(--sans); color:var(--p800); cursor:pointer; white-space:nowrap; transition:background .15s; }
  .explorer__systems label:hover span { background:rgba(129, 216, 208, .15); }
  .explorer__systems input:checked + span { background:rgba(129, 216, 208, .3); border-color:rgba(129, 216, 208, .6); color:var(--p800); }
  .explorer__systems input:focus-visible + span { outline:2px solid var(--p700); outline-offset:2px; }
  .explorer__card { position:absolute; z-index:6; right:24px; bottom:var(--x-foot); pointer-events:none; width:min(280px, calc(100% - 48px)); padding:16px 18px 18px; background:#fff; border:1px solid var(--n100); border-radius:6px; box-shadow:0 12px 32px rgba(13,24,25,.14); }
  .explorer__card .label { margin-bottom:8px; font-size:11px; line-height:11px; color:var(--p800); }
  .explorer__card h3 { margin:0 0 6px; font:600 17px/1.3 var(--sans); }
  .explorer__card p:last-child { font-size:14px; line-height:1.5; color:var(--n700); }
  .explorer__illus { position:absolute; z-index:3; right:16px; bottom:calc(var(--x-foot) - 20px); font:400 10px/1 var(--mono); letter-spacing:1px; text-transform:uppercase; color:var(--n400); }
  .explorer__index { position:absolute; z-index:2; right:36px; bottom:calc(var(--x-foot) + 12px); font-size:60.587px; line-height:.8; letter-spacing:-1.21px; pointer-events:none; }   /* under the cards (Simon, 2026-10-05) */
  @container (max-width:420px) {
    .explorer__bar { left:12px; right:12px; }
    .explorer__systems { flex:1; gap:6px; }
    .explorer__systems label { flex:1; }
    .explorer__systems span { padding:10px 4px; font-size:12px; text-align:center; }
    .explorer__inset .label { display:none; }
  }
  @container (max-width:500px) { .explorer__index { display:none; } }
  @container (max-width:560px) { .explorer__tag--at { font-size:9px; padding:3px 5px; translate:0 -8px; } }   /* the stand's tag, smaller in a narrow column (2026-10-09) */   /* no room for it in the narrow column */
}
@keyframes x-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes x-ring { 0% { transform:scale(.6); opacity:.7; } 100% { transform:scale(1.5); opacity:0; } }
@keyframes x-ring-strong { 0% { transform:scale(.6); opacity:.95; border-width:3px; } 100% { transform:scale(2.4); opacity:0; border-width:3px; } }
@keyframes x-fade-out { to { opacity:0; } }
@keyframes x-bump { 0%, 60%, 100% { transform:scale(1); } 20% { transform:scale(1.35); } }
@media (prefers-reduced-motion:reduce) {
  .explorer__paths.is-drawing .explorer__reveal, .explorer__spot::after, .explorer__spot.is-intro::after, .explorer__spot.is-intro::before { animation:none; }
  .explorer__veil, .explorer__systems span { transition:none; }
}

/* Site-wide plugin markup printed in wp_footer whose styles and script this page doesn't load: HurryTimer's countdown
   showed "Hurry Up!" as bare text under the footer (2026-10-12). */
.hurrytimer-campaign { display: none !important; }

/* The site-wide cookie banner (Complianz) as a slim bar along the bottom, on this page only (Simon, 2026-10-13): the same text,
   Accept, the links and the ×. As a card it covered the calendar's Confirm on desktop (HubSpot's chat frame even covered its ×)
   and a third of the first screen on phones. Its controls keep out of the chat button's corner (96 px). */
.mq .cmplz-cookiebanner { top:auto; left:0; right:0; bottom:0; transform:none; width:100%; min-width:0; max-width:none; max-height:none;
  display:flex; align-items:center; gap:10px 20px; padding:10px 96px 10px 24px; border-radius:0; border-top:1px solid var(--n100);
  box-shadow:0 -6px 16px rgba(13, 24, 25, .06); }
.mq .cmplz-cookiebanner.cmplz-show:hover { box-shadow:0 -6px 16px rgba(13, 24, 25, .06); }
.mq .cmplz-cookiebanner .cmplz-logo, .mq .cmplz-cookiebanner .cmplz-title, .mq .cmplz-cookiebanner .cmplz-divider { display:none; }
.mq .cmplz-cookiebanner .cmplz-body { order:1; flex:1 1 auto; width:auto; min-width:0; max-height:none; overflow:visible; }
.mq .cmplz-cookiebanner .cmplz-message { width:auto; margin:0; font-size:12px; line-height:16px; }
.mq .cmplz-cookiebanner .cmplz-buttons { order:2; flex:none; flex-direction:row; }
.mq .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { width:auto; min-height:32px; padding:6px 18px; font-size:13px; line-height:18px; }
.mq .cmplz-cookiebanner .cmplz-documents { order:3; flex:none; }
.mq .cmplz-cookiebanner .cmplz-documents ul { gap:12px; }
.mq .cmplz-cookiebanner .cmplz-header { order:4; display:block; flex:none; }
.mq .cmplz-cookiebanner .cmplz-close { display:block; }
@media (max-width:767px) {
  /* Phones: the text on its own row (one size smaller), Accept and the links under it, the × top right. */
  .mq .cmplz-cookiebanner { flex-wrap:wrap; gap:8px 14px; padding:10px 40px 10px 14px; }
  .mq .cmplz-cookiebanner .cmplz-body { flex-basis:100%; }
  .mq .cmplz-cookiebanner .cmplz-message { font-size:11px; line-height:15px; }
  .mq .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { padding:6px 14px; }
  .mq .cmplz-cookiebanner .cmplz-documents ul { gap:8px; }
  .mq .cmplz-cookiebanner .cmplz-links .cmplz-link { font-size:11px; }
  .mq .cmplz-cookiebanner .cmplz-header { position:absolute; top:10px; right:12px; }
}

/* HubSpot's chat (button and its pop-up greeting) steps aside while the demo calendar is open: on desktop it covered the
   calendar's Confirm, on phones the calendar fills the screen (2026-10-13). */
.mq.is-cal-open #hubspot-messages-iframe-container { display:none !important; }