/* Seal Results motion layer (2026-10-05).
   Rules: animate transform and opacity only; everything degrades to static under
   prefers-reduced-motion; content is visible without JavaScript (html.js gates the hidden states). */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Long benchmark label sits on the line from md up; below that the cited legend under the chart carries it. */
@media (max-width: 767px) { .bench-line span { display: none; } }

/* Reserve the injected nav's height so the page does not jump when shared.js mounts it. */
#site-nav { min-height: 84px; }
@media (min-width: 640px) { #site-nav { min-height: 92px; } }

/* Without JavaScript nothing stays hidden. */
html:not(.js) [data-reveal] { opacity: 1; transform: none; }

/* ---------- Ambient background ---------- */
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
.ambient__orb { position: absolute; border-radius: 9999px; will-change: transform; }
.ambient__orb--a { width: 70vmax; height: 70vmax; left: -20vmax; top: -30vmax;
  background: radial-gradient(closest-side, rgba(47,128,255,0.13), rgba(47,128,255,0) 70%);
  animation: orb-a 48s ease-in-out infinite alternate; }
.ambient__orb--b { width: 60vmax; height: 60vmax; right: -25vmax; top: 20vh;
  background: radial-gradient(closest-side, rgba(155,199,178,0.08), rgba(155,199,178,0) 70%);
  animation: orb-b 62s ease-in-out infinite alternate; }
.ambient__orb--c { width: 55vmax; height: 55vmax; left: 15vw; bottom: -35vmax;
  background: radial-gradient(closest-side, rgba(47,128,255,0.08), rgba(47,128,255,0) 70%);
  animation: orb-c 54s ease-in-out infinite alternate; }
@keyframes orb-a { to { transform: translate3d(18vw, 14vh, 0) scale(1.12); } }
@keyframes orb-b { to { transform: translate3d(-16vw, -12vh, 0) scale(0.9); } }
@keyframes orb-c { to { transform: translate3d(-10vw, -18vh, 0) scale(1.1); } }
.ambient__grid { position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(245,243,238,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,243,238,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%); }

/* Pointer spotlight (fine pointers only; JS adds it) */
.spotlight { position: fixed; left: 0; top: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px;
  border-radius: 9999px; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(closest-side, rgba(47,128,255,0.10), rgba(47,128,255,0) 70%);
  will-change: transform; }
.spotlight.is-on { opacity: 1; }

/* Scroll progress hairline: CSS scroll-driven where supported, absent elsewhere. */
.scroll-progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 60; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #2F80FF, #9BC7B2); }
@supports (animation-timeline: scroll()) {
  .scroll-progress { animation: progress linear both; animation-timeline: scroll(root); }
  @keyframes progress { to { transform: scaleX(1); } }
}

/* Section hairline that sweeps in when the section enters */
section.border-t::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(47,128,255,0.55), rgba(155,199,178,0.4), transparent);
  transform: scaleX(0); transform-origin: 50% 50%; transition: transform 1.4s var(--ease-out); }
html:not(.js) section.border-t::before, section.border-t.in-view::before { transform: scaleX(1); }

/* ---------- Hero ---------- */
.seal-wrap { position: relative; display: inline-block; }
.seal-wrap::before { content: ''; position: absolute; inset: -30%; border-radius: 9999px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(47,128,255,0.28), rgba(47,128,255,0) 70%);
  opacity: 0; animation: seal-glow 1.6s var(--ease-out) 1.9s forwards; }
.seal-mark { display: block; height: 100%; width: auto; overflow: visible; animation: seal-float 7s ease-in-out 3s infinite; }
.seal-path { fill: #F5F3EE; fill-opacity: 0; stroke: #F5F3EE; stroke-width: 7; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  animation: seal-draw 2.2s cubic-bezier(.65,0,.35,1) .15s forwards, seal-fill .9s ease 2.05s forwards; }
html:not(.js) .seal-path { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; animation: none; }
@keyframes seal-draw { to { stroke-dashoffset: 0; } }
@keyframes seal-fill { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes seal-glow { to { opacity: 1; } }
@keyframes seal-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* Word-by-word headline reveal (JS splits [data-split]) */
.js [data-split]:not(.is-split) { opacity: 0; animation: split-failsafe 0s linear 2.5s forwards; } /* if motion.js never runs, the headline still appears */
@keyframes split-failsafe { to { opacity: 1; } }
.split-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split-i { display: inline-block; transform: translate3d(0, 105%, 0); opacity: 0;
  animation: word-in .9s var(--ease-out) forwards; animation-delay: calc(var(--base, .35s) + var(--i) * 55ms); }
@keyframes word-in { to { transform: translate3d(0, 0, 0); opacity: 1; } }

.hero-in { opacity: 0; transform: translate3d(0, 14px, 0); animation: hero-in .9s var(--ease-out) forwards; animation-delay: var(--d, 0s); }
html:not(.js) .hero-in { opacity: 1; transform: none; animation: none; }
@keyframes hero-in { to { opacity: 1; transform: translate3d(0, 0, 0); } }

/* ---------- Cards: hover depth ---------- */
[data-tilt][data-tilt].is-visible, html:not(.js) [data-tilt][data-tilt] {
  transform: perspective(1000px) translate3d(0, var(--tw-translate-y, 0), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .7s var(--ease-spring), opacity .8s var(--ease-out), box-shadow .5s ease, border-color .4s ease;
}
[data-tilt][data-tilt].is-tilting { transition: transform .12s linear, box-shadow .5s ease, border-color .4s ease; }
[data-tilt]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(245,243,238,0.09), transparent 45%);
  transition: opacity .4s ease; }
[data-tilt].is-tilting::after { opacity: 1; }

/* Magnetic CTAs (JS sets --mx/--my on fine pointers) */
[class].is-magnetic.is-magnetic { transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + var(--tw-translate-y, 0px)), 0);
  transition: transform .5s var(--ease-spring), box-shadow .3s ease, background-color .3s ease; }
[class].is-magnetic.is-magnetic.is-pulling { transition: transform .15s linear, box-shadow .3s ease, background-color .3s ease; }

/* ---------- Proof ---------- */
.proof-card { position: relative; border: 1px solid rgba(245,243,238,0.1); background: linear-gradient(180deg, #131d34, #0e1628);
  border-radius: 28px; box-shadow: 0 40px 90px -40px rgba(0,0,0,0.75), inset 0 1px 0 rgba(245,243,238,0.04); }

.roas-chart { --lw: 6.25rem; --vw: 4.25rem; --g: .9rem; }
@media (max-width: 639px) { .roas-chart { --lw: 5.6rem; --vw: 3.9rem; --g: .5rem; } }
.roas-rows { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: .55rem; }
.roas-row { display: grid; grid-template-columns: var(--lw) 1fr var(--vw); align-items: center; column-gap: var(--g); row-gap: .25rem;
  width: 100%; padding: .3rem 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 12px; }
.roas-row:focus-visible { outline: none; }
.roas-meta { grid-column: 2 / 4; padding-left: 10px; }
@media (min-width: 640px) and (hover: hover) { .roas-meta { display: none; } }
.roas-track { position: relative; height: 34px; border-radius: 10px; background: rgba(245,243,238,0.04); }
.roas-fill { position: absolute; inset: 0 auto 0 0; width: var(--w); min-width: 6px; border-radius: 10px;
  background: linear-gradient(90deg, rgba(47,128,255,0.55), #2F80FF);
  box-shadow: 0 0 24px -6px rgba(47,128,255,0.7);
  transform-origin: 0 50%; transition: transform 1.3s var(--ease-out) calc(var(--i) * 110ms), width .7s var(--ease-out), filter .3s ease; }
.roas-chart.is-zoomed .roas-fill { width: var(--wz); }
.roas-row--breaks .roas-fill::after { content: ''; position: absolute; top: -4px; bottom: -4px; right: 18px; width: 9px; opacity: 0;
  background: #101a30; border-left: 2px solid #6aa8ff; border-right: 2px solid #6aa8ff; transform: skewX(-22deg); transition: opacity .3s ease; }
.roas-chart.is-zoomed .roas-row--breaks .roas-fill::after { opacity: 1; }
.roas-row--top .roas-fill { background: linear-gradient(90deg, rgba(155,199,178,0.6), #2F80FF 55%, #6aa8ff); }
.js [data-animate-group]:not(.in-view) .roas-fill { transform: scaleX(0); }
.roas-row:hover .roas-fill, .roas-row:focus-within .roas-fill { filter: brightness(1.25); }
.roas-tip { position: absolute; z-index: 5; left: min(calc(var(--w) + 12px), calc(100% - 15rem)); top: 50%; width: 14.5rem;
  transform: translate3d(0, -50%, 0) scale(.96); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .3s var(--ease-spring);
  border: 1px solid rgba(245,243,238,0.14); background: rgba(11,19,34,0.96); border-radius: 14px; padding: .7rem .85rem;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.8); }
@media (hover: hover) {
  .roas-row:hover .roas-tip, .roas-row:focus-within .roas-tip { opacity: 1; transform: translate3d(0, -50%, 0) scale(1); }
}
.roas-row:focus-visible .roas-track { outline: 2px solid rgba(47,128,255,0.8); outline-offset: 3px; }

.bench-line { position: absolute; top: -10px; bottom: -10px; left: calc(var(--lw) + var(--g) + (100% - var(--lw) - var(--vw) - 2 * var(--g)) * var(--bpx, var(--bp))); width: 0; transition: left .7s var(--ease-out); border-left: 2px dashed rgba(155,199,178,0.85); z-index: 4; pointer-events: none; }
.roas-chart.is-zoomed .bench-line { --bpx: var(--bpz); }
.bench-line span { position: absolute; top: -26px; left: 6px; white-space: nowrap; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #9BC7B2; }

.ba-delta { transition: opacity .6s ease 1.2s, transform .8s var(--ease-spring) 1.2s; }
.js [data-animate-group]:not(.in-view) .ba-delta { opacity: 0; transform: translate3d(0, 8px, 0) scale(.9); }


/* Toggles */
.zoom-toggle, .dollar-pill { border: 1px solid rgba(245,243,238,0.16); border-radius: 9999px; padding: .4rem .85rem; font-size: 12px; font-weight: 600;
  color: rgba(245,243,238,0.8); background: rgba(245,243,238,0.03); cursor: pointer;
  transition: transform .3s var(--ease-spring), background-color .25s ease, border-color .25s ease, color .25s ease; }
.zoom-toggle:hover, .dollar-pill:hover { border-color: rgba(47,128,255,0.6); color: #F5F3EE; transform: translate3d(0, -1px, 0); }
.zoom-toggle:active, .dollar-pill:active { transform: translate3d(0, 0, 0) scale(.97); }
.zoom-toggle:focus-visible, .dollar-pill:focus-visible { outline: 2px solid #2F80FF; outline-offset: 2px; }
.zoom-toggle[aria-pressed="true"] { background: rgba(47,128,255,0.16); border-color: rgba(47,128,255,0.7); color: #9cc4ff; }
.dollar-pill[aria-pressed="true"] { background: #2F80FF; border-color: #2F80FF; color: #F5F3EE; box-shadow: 0 10px 26px -10px rgba(47,128,255,0.8); }
[data-dollar-value] { font-variant-numeric: tabular-nums; }
.store-arrow { filter: drop-shadow(0 0 10px rgba(47,128,255,0.6)); }

/* Receipts */
.receipt { position: relative; display: block; width: 100%; overflow: hidden; border-radius: 14px; cursor: zoom-in;
  border: 1px solid rgba(245,243,238,0.12); background: #fff; padding: 0;
  transition: transform .5s var(--ease-spring), box-shadow .4s ease, border-color .3s ease; }
.receipt img { display: block; width: 100%; height: auto; }
.receipt:hover, .receipt:focus-visible { transform: translate3d(0, -3px, 0); border-color: rgba(47,128,255,0.6);
  box-shadow: 0 24px 50px -22px rgba(47,128,255,0.55); outline: none; }
.receipt:focus-visible { outline: 2px solid #2F80FF; outline-offset: 3px; }
.receipt--thumb img { height: 54px; object-fit: cover; object-position: left top; }
.receipt-tag { position: absolute; right: 8px; bottom: 8px; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #F5F3EE; background: rgba(15,23,42,0.85); border-radius: 9999px; padding: 3px 8px; }

.lightbox { padding: 0; border: 0; background: transparent; max-width: min(96vw, 1100px); width: 100%; color: #F5F3EE; overflow: visible; }
.lightbox::backdrop { background: rgba(6,10,20,0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lightbox[open] { animation: lb-in .35s var(--ease-out); }
@keyframes lb-in { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.98); } }
.lightbox__frame { overflow: auto; max-height: 78vh; border-radius: 16px; background: #fff; touch-action: pan-x pan-y pinch-zoom; }
.lightbox__frame .lightbox__img + .lightbox__img { border-top: 8px solid #0F172A; }
.lightbox__img { display: block; width: 100%; max-width: none; height: auto; cursor: zoom-in; }
.lightbox__img.is-zoomed { width: 200%; cursor: zoom-out; } /* layout zoom: the frame scrolls to every edge */
.lightbox__close { position: absolute; top: -14px; right: -6px; width: 40px; height: 40px; border-radius: 9999px; border: 1px solid rgba(245,243,238,0.2);
  background: #0F172A; color: #F5F3EE; font-size: 22px; line-height: 1; cursor: pointer; }
.lightbox__close:hover { background: #2F80FF; }
.lightbox__close:focus-visible { outline: 2px solid #2F80FF; outline-offset: 2px; }

/* Dev-only marker for unsupplied data (shown on localhost only) */
.todo-flag { display: none; }
.is-dev .todo-flag { display: inline-flex; border: 1px dashed #f5a524; color: #f5a524; border-radius: 8px; padding: 2px 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Sliders and pickers ([data-slider], wired in motion.js, 2026-10-05) ----------
   Default (JS off, motion.js blocked, or reduced motion on data-static-reduced): every panel stacked and readable.
   .is-ready (set by JS) turns the panels into one stacked grid cell that slides between them. */
.slider-nav { display: none; }
.is-ready .slider-nav { display: flex; }
.slides { display: grid; gap: 1.25rem; }
.is-ready .slides { gap: 0; touch-action: pan-y; }
.is-ready .slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate3d(var(--from, 56px), 0, 0) scale(.985);
  transition: opacity .45s var(--ease-out), transform .75s var(--ease-out), visibility 0s linear .75s; }
.is-ready .slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity .6s var(--ease-out) .08s, transform .75s var(--ease-out), visibility 0s; }
.is-ready .slide.no-tr { transition: none !important; }
.slide:focus-visible { outline: 2px solid #2F80FF; outline-offset: 6px; border-radius: 28px; }
.dollar-pill[aria-selected="true"] { background: #2F80FF; border-color: #2F80FF; color: #F5F3EE; box-shadow: 0 10px 26px -10px rgba(47,128,255,0.8); }

/* The pain picker: the owner's line, then the reply */
.pain-card { position: relative; border: 1px solid rgba(245,243,238,0.1); border-radius: 26px; padding: 1.75rem;
  background: linear-gradient(180deg, #131d34, #0e1628); box-shadow: 0 40px 90px -40px rgba(0,0,0,0.75), inset 0 1px 0 rgba(245,243,238,0.04); }
@media (min-width: 640px) { .pain-card { padding: 2.25rem 2.5rem; } }
.pain-who { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #9BC7B2; }
.is-ready .pain-who { display: none; }
.pain-quote { margin: .9rem 0 1.4rem; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 20px; line-height: 1.45; letter-spacing: -.015em;
  color: #F5F3EE; padding-left: 1rem; border-left: 2px solid rgba(47,128,255,0.7); }
.is-ready .pain-quote { margin-top: 0; }
@media (min-width: 640px) { .pain-quote { font-size: 23px; } }
.pain-reply { font-size: 15px; line-height: 1.7; color: rgba(245,243,238,0.62); }
.pain-reply + .pain-reply { margin-top: .5rem; }

/* The step slider */
.step-tabs { gap: .75rem; }
.step-tab { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
  padding: 1rem .25rem .6rem 0; border: 0; background: none; color: rgba(245,243,238,0.42); font: inherit; text-align: left; cursor: pointer;
  transition: color .3s ease, transform .3s var(--ease-spring); }
.step-tab::before, .step-tab .tab-fill { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 3px; }
.step-tab::before { background: rgba(245,243,238,0.1); }
.step-tab .tab-fill { background: linear-gradient(90deg, #2F80FF, #9BC7B2); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-out); }
.step-tab[aria-selected="true"] { color: #F5F3EE; }
.step-tab[aria-selected="true"] .tab-fill { transform: scaleX(1); }
.is-playing .step-tab[aria-selected="true"] .tab-fill { animation: tab-fill var(--dur, 7s) linear both; }
.is-playing.is-paused .step-tab[aria-selected="true"] .tab-fill { animation-play-state: paused; }
@keyframes tab-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.step-tab:hover { color: rgba(245,243,238,0.8); }
.step-tab:active { transform: translate3d(0, 1px, 0); }
.step-tab:focus-visible { outline: 2px solid #2F80FF; outline-offset: 4px; border-radius: 6px; }
.step-tab__n { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .18em; }
.step-tab__t { font-size: 12px; color: inherit; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.step-card { position: relative; overflow: hidden; display: grid; gap: 1.25rem; border: 1px solid rgba(245,243,238,0.1); border-radius: 28px;
  padding: 1.75rem; background: linear-gradient(160deg, #16223d, #0c1424 70%);
  box-shadow: 0 50px 100px -40px rgba(47,128,255,0.28), inset 0 1px 0 rgba(245,243,238,0.05); }
@media (min-width: 768px) { .step-card { grid-template-columns: 220px 1fr; gap: 2.5rem; padding: 3rem 3.25rem; align-items: start; } }
.step-mark { font-family: 'Sora', sans-serif; font-weight: 800; line-height: .85; letter-spacing: -.05em; font-size: 96px;
  color: #2F80FF; background: linear-gradient(180deg, #6aa8ff 0%, #2F80FF 45%, rgba(47,128,255,0.08) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 18px 40px rgba(47,128,255,0.25)); }
@media (min-width: 768px) { .step-mark { font-size: 168px; } }
.step-mark span { display: block; margin-bottom: .6rem; font-size: 13px; line-height: 1; letter-spacing: .32em; text-transform: uppercase;
  color: #9BC7B2; -webkit-text-fill-color: #9BC7B2; background: none; letter-spacing: .32em; }
.step-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 24px; line-height: 1.25; letter-spacing: -.02em; color: #F5F3EE; }
@media (min-width: 640px) { .step-title { font-size: 28px; } }
.step-body p { margin-top: .85rem; font-size: 15px; line-height: 1.7; color: rgba(245,243,238,0.62); }
.step-body strong { font-weight: 700; color: #F5F3EE; }
/* the active panel's words arrive a beat after the card */
.is-ready .slide .step-mark, .is-ready .slide .step-body > * { opacity: 0; transform: translate3d(0, 10px, 0);
  transition: opacity .5s var(--ease-out), transform .7s var(--ease-out); }
.is-ready .slide.is-active .step-mark, .is-ready .slide.is-active .step-body > * { opacity: 1; transform: none; }
.is-ready .slide.is-active .step-mark { transition-delay: .12s; }
.is-ready .slide.is-active .step-body > *:nth-child(1) { transition-delay: .18s; }
.is-ready .slide.is-active .step-body > *:nth-child(2) { transition-delay: .24s; }
.is-ready .slide.is-active .step-body > *:nth-child(3) { transition-delay: .30s; }
.is-ready .slide.is-active .step-body > *:nth-child(4) { transition-delay: .36s; }
.is-ready .slide.no-tr .step-mark, .is-ready .slide.no-tr .step-body > * { transition: none !important; }

.step-controls { align-items: center; gap: .6rem; }
.step-btn, .step-play { display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(245,243,238,0.16); border-radius: 9999px;
  background: rgba(245,243,238,0.03); color: rgba(245,243,238,0.85); cursor: pointer;
  transition: transform .3s var(--ease-spring), background-color .25s ease, border-color .25s ease, color .25s ease; }
.step-btn { width: 44px; height: 44px; }
.step-btn svg { width: 18px; height: 18px; }
.step-play { height: 44px; padding: 0 1rem; font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.step-btn:hover, .step-play:hover { border-color: rgba(47,128,255,0.6); color: #F5F3EE; transform: translate3d(0, -1px, 0); }
.step-btn:active, .step-play:active { transform: scale(.95); }
.step-btn:focus-visible, .step-play:focus-visible { outline: 2px solid #2F80FF; outline-offset: 2px; }
.step-count { margin-left: auto; font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .12em; color: rgba(245,243,238,0.45); font-variant-numeric: tabular-nums; }

/* ---------- Reduced motion: everything static and visible ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; transition-delay: 0s !important; }
  .ambient__orb, .seal-mark { animation: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .split-i, .hero-in { opacity: 1 !important; transform: none !important; animation: none !important; }
  .js [data-split]:not(.is-split) { opacity: 1; }
  .seal-path { animation: none !important; stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
  .seal-wrap::before { animation: none !important; opacity: 1; }
  .js [data-animate-group]:not(.in-view) .roas-fill { transform: none; }
  .js [data-animate-group]:not(.in-view) .ba-delta { opacity: 1; transform: none; }
  section.border-t::before { transform: scaleX(1); }
  .spotlight, .scroll-progress { display: none; }
  .animate-ping, .animate-pulse, .lock-ring { animation: none !important; }
}

/* Strike-through that survives the word-split animation: text-decoration does not reach inline-block
   descendants, so the line is drawn on every word span inside the <s> as well (2026-10-05). */
s.strike, s, s .split-w, s .split-i { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: currentColor; }

/* ---------- "Not a fit" list (DTC guarantee, Local close; his edit 2026-10-05) ---------- */
.no-fit { list-style: none; padding: 0; }
.no-fit li { position: relative; padding-left: 1.6rem; }
.no-fit li + li { margin-top: .35rem; }
.no-fit li::before { content: ''; position: absolute; left: .2rem; top: .62em; width: .7rem; height: 2px; border-radius: 2px; background: #2F80FF;
  box-shadow: 0 0 0 0 transparent; transform: rotate(45deg); }
.no-fit li::after { content: ''; position: absolute; left: .2rem; top: .62em; width: .7rem; height: 2px; border-radius: 2px; background: #2F80FF; transform: rotate(-45deg); }

/* ---------- The ad switch ([data-switch], wired in motion.js, Local page 2026-10-05) ----------
   An Ads Manager style on/off toggle that flips the card from the current state to the dream state.
   Default (JS off or motion.js blocked): no toggle, both states stacked and readable. */
.ad-switch { position: relative; overflow: hidden; border: 1px solid rgba(245,243,238,0.1); border-radius: 28px;
  background: linear-gradient(160deg, #141d33, #0c1424 70%); box-shadow: 0 50px 100px -40px rgba(0,0,0,0.7), inset 0 1px 0 rgba(245,243,238,0.05);
  transition: border-color .5s ease, box-shadow .6s ease; }
.ad-switch.is-on { border-color: rgba(155,199,178,0.35); box-shadow: 0 50px 110px -40px rgba(155,199,178,0.28), inset 0 1px 0 rgba(245,243,238,0.06); }
.ad-switch__bar { display: none; }
.ad-switch.is-ready .ad-switch__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.5rem; border-bottom: 1px solid rgba(245,243,238,0.08); background: rgba(245,243,238,0.02); }
@media (min-width: 640px) { .ad-switch.is-ready .ad-switch__bar { padding: 1.1rem 2.25rem; } }
.ad-switch__name { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(245,243,238,0.5); }
.ad-switch__name b { color: #F5F3EE; font-weight: 600; }
.ad-switch__ctl { display: inline-flex; align-items: center; gap: .75rem; }
.ad-switch__state { font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(245,243,238,0.45); min-width: 2.2em; text-align: right; }
.is-on .ad-switch__state { color: #9BC7B2; }
.ad-switch__toggle { position: relative; width: 60px; height: 34px; flex: none; border-radius: 9999px; border: 1px solid rgba(245,243,238,0.18);
  background: rgba(245,243,238,0.08); cursor: pointer; transition: background-color .35s ease, border-color .35s ease, transform .3s var(--ease-spring); }
.ad-switch__toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 9999px; background: #F5F3EE;
  box-shadow: 0 4px 12px -2px rgba(0,0,0,0.5); transition: transform .45s var(--ease-spring); }
.ad-switch__toggle[aria-checked="true"] { background: #2F80FF; border-color: #2F80FF; }
.ad-switch__toggle[aria-checked="true"]::after { transform: translate3d(26px, 0, 0); }
.ad-switch__toggle:hover { border-color: rgba(47,128,255,0.7); }
.ad-switch__toggle:active { transform: scale(.94); }
.ad-switch__toggle:focus-visible { outline: 2px solid #2F80FF; outline-offset: 3px; }
.ad-switch.is-ready:not(.was-flipped) .ad-switch__toggle { animation: switch-nudge 2.8s var(--ease-out) 1.2s 2; }
@keyframes switch-nudge { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(47,128,255,0); } 80% { box-shadow: 0 0 0 8px rgba(47,128,255,0.22); } }
.ad-switch__panels { display: grid; gap: 0; }
.switch-panel { padding: 1.75rem 1.5rem 2rem; }
.switch-panel + .switch-panel { border-top: 1px solid rgba(245,243,238,0.08); }
@media (min-width: 640px) { .switch-panel { padding: 2.5rem 2.25rem 2.75rem; } }
.ad-switch.is-ready .switch-panel { grid-area: 1 / 1; border-top: 0; opacity: 0; visibility: hidden; transform: translate3d(0, 10px, 0);
  transition: opacity .4s var(--ease-out), transform .6s var(--ease-out), visibility 0s linear .6s; }
.ad-switch.is-ready .switch-panel.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .55s var(--ease-out) .05s, transform .6s var(--ease-out), visibility 0s; }
.switch-tag { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(245,243,238,0.4); }
.switch-panel--on .switch-tag { color: #9BC7B2; }
.switch-head { margin-top: .6rem; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 28px; line-height: 1.15; letter-spacing: -.03em; color: #F5F3EE; }
@media (min-width: 640px) { .switch-head { font-size: 40px; } }
.switch-head em { color: rgba(245,243,238,0.55); }
.switch-panel--on .switch-head em { color: #9BC7B2; }
.switch-list { margin-top: 1.4rem; list-style: none; padding: 0; display: grid; gap: .7rem; }
@media (min-width: 768px) { .switch-list { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
.switch-list li { position: relative; padding-left: 1.3rem; font-size: 15px; line-height: 1.6; color: rgba(245,243,238,0.62); }
.switch-list li::before { content: ''; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 9999px; background: rgba(245,243,238,0.25); }
.switch-panel--on .switch-list li::before { background: #9BC7B2; box-shadow: 0 0 0 4px rgba(155,199,178,0.15); }
.switch-list strong { color: #F5F3EE; font-weight: 700; }

/* ---------- The roads that don't get there (Local gap section) ---------- */
.roads { display: grid; gap: 1px; overflow: hidden; border: 1px solid rgba(245,243,238,0.08); border-radius: 24px; background: rgba(245,243,238,0.08); }
@media (min-width: 768px) { .roads { grid-template-columns: 1fr 1fr; } }
.road { background: #0f1729; padding: 1.5rem 1.5rem 1.6rem; transition: background-color .35s ease; }
.road:hover { background: #121c31; }
@media (min-width: 640px) { .road { padding: 1.75rem 2rem 1.9rem; } }
.road .road__name { margin-top: 0; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -.01em; color: rgba(245,243,238,0.78); }
@media (min-width: 640px) { .road .road__name { font-size: 24px; } }
.road__name s.strike { text-decoration-thickness: 2px; text-decoration-color: rgba(47,128,255,0.9); }
.road p { margin-top: .5rem; font-size: 15px; line-height: 1.65; color: rgba(245,243,238,0.6); }
.road strong { color: #F5F3EE; font-weight: 700; }

/* ---------- The disclaimer ring ([data-disclaimer], wired in motion.js, his order 2026-10-06) ----------
   Default (JS off, motion.js blocked, or prefers-reduced-motion): a heading and a plain X-bulleted list.
   .is-ready (set by JS): numbered nodes on a ring around the heading; the active line sits big in the centre,
   a beam joins it to its node, and a progress arc on the node counts down to the next one. */
.disclaimer { --accent: #2F80FF; --accent-rgb: 47,128,255; position: relative; overflow: hidden; border: 1px solid rgba(245,243,238,0.1); border-radius: 28px;
  padding: 1.75rem; background: radial-gradient(120% 80% at 50% 0%, rgba(var(--accent-rgb),0.10), transparent 60%), #121b30;
  box-shadow: 0 30px 80px -25px rgba(0,0,0,0.7), inset 0 1px 0 rgba(245,243,238,0.05); }
.disclaimer--sage { --accent: #9BC7B2; --accent-rgb: 155,199,178; }
.disclaimer__head { margin: 0; font-family: 'Sora', sans-serif; }
.disclaimer__tag { display: block; font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.disclaimer__sub { display: block; margin-top: .4rem; font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: #F5F3EE; }
.disclaimer__list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .7rem; }
.disclaimer__list li { position: relative; padding-left: 1.75rem; font-size: 16px; line-height: 1.5; color: rgba(245,243,238,0.78); }
.disclaimer__list li::before, .disclaimer__list li::after { content: ''; position: absolute; left: .2rem; top: .72em; width: .8rem; height: 2px; border-radius: 2px; background: var(--accent); }
.disclaimer__list li::before { transform: rotate(45deg); }
.disclaimer__list li::after { transform: rotate(-45deg); }
.disclaimer s.strike { color: rgba(245,243,238,0.5); text-decoration-color: var(--accent); }

.disclaimer.is-ready { padding: 1.6rem 1rem .9rem; }
@media (min-width: 640px) { .disclaimer.is-ready { padding: 1.9rem 1.5rem 1.1rem; } }
.disclaimer.is-ready .disclaimer__list { display: none; }
.disc-stage { --node: 44px; --r: calc(50cqw - 26px); container-type: inline-size; position: relative; width: 100%; aspect-ratio: 1; }
.disc-stage > * { --r: calc(50cqw - 26px); }
.disc-orbit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.disc-orbit circle { fill: none; vector-effect: non-scaling-stroke; }
.disc-orbit__track { stroke: rgba(245,243,238,0.1); stroke-width: 1.5; }
.disc-orbit__dash { stroke: rgba(var(--accent-rgb),0.22); stroke-width: 1; stroke-dasharray: 2 7; transform-origin: 50% 50%; animation: disc-spin 60s linear infinite; }
@keyframes disc-spin { to { transform: rotate(360deg); } }
.disc-beam { position: absolute; left: 50%; top: 50%; width: var(--r); height: 0; transform-origin: 0 0; transform: rotate(var(--ba, -90deg));
  transition: transform .7s var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)); pointer-events: none; }
.disc-glow { position: absolute; left: 50%; top: 50%; width: calc(100cqw - 112px); aspect-ratio: 1; border-radius: 9999px; pointer-events: none; z-index: 1;
  transform: translate(-50%, -50%) rotate(var(--ba, -90deg)); transition: transform .7s var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1));
  background: conic-gradient(from 40deg, rgba(var(--accent-rgb),0) 0deg, rgba(var(--accent-rgb),1) 50deg, rgba(var(--accent-rgb),0) 100deg, rgba(var(--accent-rgb),0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb),0.8)); }
.disc-beam span { position: absolute; top: -1.5px; left: calc(50cqw - 57px); right: calc(var(--node) / 2 + 2px); height: 3px; border-radius: 3px; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0.9), rgba(var(--accent-rgb),0.5)); box-shadow: 0 0 12px rgba(var(--accent-rgb),0.6); }
.disc-beam.is-drawing span { animation: disc-draw .6s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) both; }
@keyframes disc-draw { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

.disc-core { z-index: 0; position: absolute; left: 50%; top: 50%; width: calc(100cqw - 120px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 9999px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 6%;
  background: radial-gradient(circle at 50% 30%, rgba(var(--accent-rgb),0.13), rgba(15,23,42,0.85) 70%); border: 1px solid rgba(var(--accent-rgb),0.25);
  box-shadow: 0 0 60px -10px rgba(var(--accent-rgb),0.35), inset 0 1px 0 rgba(245,243,238,0.06); }
.disc-core .disclaimer__tag { font-size: 11px; letter-spacing: .24em; }
.disc-core .disclaimer__sub { margin-top: .25rem; font-family: 'Inter', sans-serif; font-size: clamp(12px, 3.6cqw, 13px); font-weight: 500; letter-spacing: 0; color: rgba(245,243,238,0.6); }
.disc-line { margin: .7rem 0 0; min-height: 3.75em; display: block; font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: clamp(15px, 5.4cqw, 21px); line-height: 1.25; letter-spacing: -.02em; color: #F5F3EE; text-wrap: balance; }
.disc-line .nw { white-space: nowrap; }
.disc-line.is-in { animation: disc-in .55s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) both; }
@keyframes disc-in { from { opacity: 0; transform: translate3d(0, 10px, 0); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.disc-node { position: absolute; left: 50%; top: 50%; width: var(--node); height: var(--node); margin: calc(var(--node) / -2) 0 0 calc(var(--node) / -2);
  transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); display: grid; place-items: center; border-radius: 9999px; cursor: pointer;
  border: 1.5px solid rgba(245,243,238,0.2); background: #0f1729; color: rgba(245,243,238,0.6); font: 700 13px/1 'Sora', sans-serif; letter-spacing: .04em;
  transition: background-color .35s ease, border-color .35s ease, color .35s ease, scale .45s var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)), box-shadow .4s ease; }
.disc-node:hover { border-color: rgba(var(--accent-rgb),0.8); color: #F5F3EE; scale: 1.06; }
.disc-node:focus-visible { outline: 2px solid #F5F3EE; outline-offset: 4px; }
.disc-node.is-seen { color: rgba(245,243,238,0.75); border-color: rgba(var(--accent-rgb),0.4); }
.disc-node[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: #0F172A; scale: 1.14; box-shadow: 0 0 0 6px rgba(var(--accent-rgb),0.16), 0 10px 30px -6px rgba(var(--accent-rgb),0.8); }
.disc-node[aria-current="true"]::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--accent); animation: disc-pulse 1.8s var(--ease-out, ease-out) infinite; pointer-events: none; }
@keyframes disc-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(1.7); opacity: 0; } }
.disc-node svg { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); pointer-events: none; opacity: 0; }
.disc-node svg circle { fill: none; stroke: #F5F3EE; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 157.08; stroke-dashoffset: 157.08; }
.is-playing .disc-node[aria-current="true"] svg { opacity: .9; }
.is-playing .disc-node[aria-current="true"] svg circle { animation: disc-count var(--dur, 3.5s) linear both; }
.is-playing.is-paused .disc-node[aria-current="true"] svg circle { animation-play-state: paused; }
@keyframes disc-count { to { stroke-dashoffset: 0; } }

.disc-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .6rem; }
.disc-count { font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .12em; color: rgba(245,243,238,0.45); font-variant-numeric: tabular-nums; }
.disc-hint { font-size: 12px; color: rgba(245,243,238,0.4); }
.disc-play { height: 36px; padding: 0 .9rem; border: 1px solid rgba(245,243,238,0.16); border-radius: 9999px; background: rgba(245,243,238,0.03);
  color: rgba(245,243,238,0.85); font-size: 12px; font-weight: 600; letter-spacing: .06em; cursor: pointer; transition: border-color .25s ease, color .25s ease, transform .3s var(--ease-spring, ease); }
.disc-play:hover { border-color: rgba(var(--accent-rgb),0.7); color: #F5F3EE; }
.disc-play:active { transform: scale(.95); }
.disc-play:focus-visible { outline: 2px solid #F5F3EE; outline-offset: 2px; }

/* No sideways scroll on phones: off-screen slider panels stuck out by 29px (2026-10-06). clip, not hidden, so sticky elements keep working. */
html, body { overflow-x: clip; }