/* ============ tokens ============ */
:root{
  --paper:#FFFFFF; --mist:#F4F4FB; --sink:#ECECF7;
  --ink:#12132A; --ink-soft:#4A4C68; --line:#E4E4F0;
  --violet:#5B3DF5; --teal:#00A88E; --amber:#E07800; --pink:#E0326F; --sky:#1B7FD4;
  --violet-wash:#EFECFF; --teal-wash:#E2F7F3; --amber-wash:#FFF1DE;
  --pink-wash:#FFE9F1; --sky-wash:#E4F1FD;
  --shadow:0 1px 2px rgba(18,19,42,.06), 0 12px 32px -12px rgba(18,19,42,.18);
  --shadow-lift:0 2px 6px rgba(18,19,42,.08), 0 30px 60px -20px rgba(18,19,42,.30);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.22,.61,.36,1);
  --r-sm:10px; --r-md:16px; --r-lg:26px; --r-xl:38px; --r-pill:999px;
  --maxw:1180px;
  --disp:Poppins,"Segoe UI",system-ui,-apple-system,sans-serif;
  --body:Figtree,"Segoe UI",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E0F1C; --mist:#171930; --sink:#1F2140;
    --ink:#F2F2FA; --ink-soft:#A6A8C4; --line:#2A2C4A;
    --violet:#8B79FF; --teal:#2BD9BC; --amber:#FFAA47; --pink:#FF6FA3; --sky:#5CB4FF;
    --violet-wash:#1E1B3E; --teal-wash:#0E2E2B; --amber-wash:#33220B;
    --pink-wash:#331327; --sky-wash:#0F2438;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -12px rgba(0,0,0,.7);
    --shadow-lift:0 2px 6px rgba(0,0,0,.55), 0 30px 60px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#0E0F1C; --mist:#171930; --sink:#1F2140;
  --ink:#F2F2FA; --ink-soft:#A6A8C4; --line:#2A2C4A;
  --violet:#8B79FF; --teal:#2BD9BC; --amber:#FFAA47; --pink:#FF6FA3; --sky:#5CB4FF;
  --violet-wash:#1E1B3E; --teal-wash:#0E2E2B; --amber-wash:#33220B;
  --pink-wash:#331327; --sky-wash:#0F2438;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -12px rgba(0,0,0,.7);
  --shadow-lift:0 2px 6px rgba(0,0,0,.55), 0 30px 60px -20px rgba(0,0,0,.8);
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--disp); font-weight:700; letter-spacing:-.035em;
  line-height:1.04; text-wrap:balance; margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%; display:block}
:focus-visible{outline:3px solid var(--violet); outline-offset:3px; border-radius:8px}
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:20px}
.section{padding-block:clamp(44px,5.4vw,78px)}
.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper);
  padding:12px 18px; z-index:200; font-weight:600}
.skip:focus{left:0}

/* ============ scroll progress ============ */
.prog{position:fixed; top:env(safe-area-inset-top,0px); left:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--violet),var(--pink),var(--amber));
  z-index:120; transition:width .1s linear}

/* ============ chips & buttons ============ */
.eyebrow{font-family:var(--disp); font-size:12.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); margin:0}
.chip{display:inline-flex; align-items:center; gap:7px; font-family:var(--disp); font-size:12.5px;
  font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:7px 14px;
  border-radius:var(--r-pill)}
.chip .dot{width:7px; height:7px; border-radius:50%; background:currentColor}
.c-violet{background:var(--violet-wash); color:var(--violet)}
.c-teal{background:var(--teal-wash); color:var(--teal)}
.c-amber{background:var(--amber-wash); color:var(--amber)}
.c-pink{background:var(--pink-wash); color:var(--pink)}
.c-sky{background:var(--sky-wash); color:var(--sky)}

.btn{position:relative; display:inline-flex; align-items:center; gap:9px; font-family:var(--disp);
  font-size:16px; font-weight:600; padding:15px 27px; border-radius:var(--r-pill);
  border:2px solid transparent; text-decoration:none; cursor:pointer; overflow:hidden;
  transition:transform .4s var(--spring), box-shadow .3s var(--ease), background .2s, border-color .2s}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}
.btn-primary{background:var(--violet); color:#fff; box-shadow:0 10px 24px -10px var(--violet)}
.btn-primary:hover{box-shadow:0 20px 38px -12px var(--violet)}
/* sheen sweep on hover */
.btn-primary::after{content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent)}
.btn-primary:hover::after{transform:translateX(120%); transition:transform .75s var(--ease)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink); background:var(--mist)}
.arr{display:inline-block; transition:transform .4s var(--spring)}
.btn:hover .arr{transform:translate(3px,-3px)}

/* ============ header ============ */
.hdr{position:sticky; top:env(safe-area-inset-top,0px); z-index:100;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(16px); border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease)}
.hdr.stuck{border-bottom-color:var(--line); box-shadow:0 6px 24px -14px rgba(18,19,42,.35)}
.hdr-in{display:flex; align-items:center; gap:22px; height:74px;
  transition:height .32s var(--ease)}
.hdr.stuck .hdr-in{height:62px}
.logo{font-family:var(--disp); font-weight:700; font-size:25px; letter-spacing:-.045em;
  text-decoration:none; display:inline-flex; align-items:baseline; gap:1px}
.logo .tick{color:var(--violet); font-size:16px; transition:transform .4s var(--spring)}
.logo:hover .tick{transform:translate(2px,-2px)}
.nav{display:flex; gap:2px; margin-left:auto; align-items:center}
.nav a{position:relative; text-decoration:none; font-family:var(--disp); font-weight:500;
  font-size:15.5px; padding:9px 15px; border-radius:var(--r-pill); color:var(--ink-soft);
  transition:color .22s, background .22s}
.nav a::after{content:""; position:absolute; left:15px; right:15px; bottom:4px; height:2px;
  border-radius:2px; background:var(--violet); transform:scaleX(0); transform-origin:left;
  transition:transform .34s var(--spring)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
.hdr .btn{padding:11px 20px; font-size:15px}
.menu{display:none; margin-left:auto; position:relative}
.menu>summary{list-style:none; cursor:pointer; font-family:var(--disp); font-weight:600;
  font-size:15px; padding:10px 18px; border:2px solid var(--line); border-radius:var(--r-pill);
  display:inline-flex; align-items:center; gap:8px}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary .pl{display:inline-block; font-size:18px; line-height:1;
  transition:transform .38s var(--spring)}
.menu[open]>summary .pl{transform:rotate(135deg)}
.menu-panel{position:absolute; right:0; top:calc(100% + 12px); width:min(74vw,290px);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  padding:8px; box-shadow:var(--shadow-lift)}
.menu-panel a{display:block; padding:13px 14px; text-decoration:none; font-family:var(--disp);
  font-weight:600; font-size:17px; border-radius:var(--r-sm)}
.menu-panel a:hover{background:var(--mist)}

/* ============ hero ============ */
.hero{padding-top:clamp(36px,5vw,66px); padding-bottom:clamp(40px,5vw,72px);
  background:
    radial-gradient(780px 440px at 84% -10%, var(--violet-wash), transparent 66%),
    radial-gradient(620px 380px at 4% 6%, var(--amber-wash), transparent 60%);}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(28px,4.4vw,62px); align-items:center}
.hero h1{font-size:clamp(42px,6.2vw,76px); font-weight:800; margin:18px 0 0}
.hero h1 .l2{display:block;
  background:linear-gradient(96deg,var(--violet) 8%,var(--pink) 88%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-sub{font-size:clamp(17px,1.5vw,20px); color:var(--ink-soft); margin-top:20px; max-width:37ch}
.hero-kicker{font-size:15.5px; color:var(--ink-soft); margin-top:12px; max-width:42ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}

/* rotating word — cycles Further's three content formats */
.rot{display:inline-grid; vertical-align:bottom; text-align:left}
.rot>span{grid-area:1/1; font-weight:700; color:var(--violet); white-space:nowrap}
/* Three words, 3.5s apart on a 10.5s cycle, so each must own a full third. The visible
   window runs 4%-31% with the hand-over fades just overlapping — any less and the sentence
   shows a hole between words. */
@keyframes rotWord{
  0%{opacity:0; transform:translateY(8px)}
  4%,31%{opacity:1; transform:translateY(0)}
  35%,100%{opacity:0; transform:translateY(-8px)}
}
/* Resting state shows exactly one word. Do NOT scope these to .anim — that class lives on
   the board, not on the hero text, so a .anim-scoped rule never matches here and all three
   spans paint at once in the same grid cell. */
.rot>span{opacity:0}
.rot>span:nth-child(1){opacity:1}
@media (prefers-reduced-motion:no-preference){
  .rot>span{animation:rotWord 10.5s var(--ease) infinite}
  .rot>span:nth-child(1){animation-delay:0s}
  .rot>span:nth-child(2){animation-delay:3.5s}
  .rot>span:nth-child(3){animation-delay:7s}
}

/* ============ hero entrance choreography ============ */
@keyframes riseIn{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:no-preference){
  .hero-stage>*{animation:riseIn .8s var(--spring) both}
  .hero-stage>*:nth-child(1){animation-delay:.02s}
  .hero-stage>*:nth-child(2){animation-delay:.10s}
  .hero-stage>*:nth-child(3){animation-delay:.18s}
  .hero-stage>*:nth-child(4){animation-delay:.26s}
  .hero-stage>*:nth-child(5){animation-delay:.34s}
  .board-wrap{animation:riseIn .95s var(--spring) both .30s}
}

/* ============ hero board ============ */
.board-wrap{position:relative}
.board{position:relative; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lift); overflow:hidden; z-index:1}
/* a second card breaking the board's edge — depth, and somewhere for the lens preview */
/* Sits low enough that it only breaks the board's bottom edge and its footer strip — any
   higher and it covers the last row's text. The footer reserves matching left padding. */
.float-card{position:absolute; left:-26px; bottom:-64px; z-index:2; width:min(250px,64%);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-lift); padding:15px 17px;
  transition:transform .55s var(--spring)}
.float-card:hover{transform:translateY(-6px) rotate(-1.2deg)}
.float-card .fc-t{font-family:var(--disp); font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--pink)}
.float-card .fc-q{font-family:var(--disp); font-weight:700; font-size:15.5px; line-height:1.2;
  letter-spacing:-.02em; margin-top:6px}
.fc-bars{display:flex; gap:5px; margin-top:11px}
.fc-bars i{height:6px; border-radius:var(--r-pill); flex:1}
@media (max-width:940px){.float-card{left:auto; right:8px; bottom:-22px; width:220px}}
@media (max-width:620px){.float-card{display:none}}
.board-top{display:flex; align-items:center; gap:8px; padding:14px 18px;
  border-bottom:1px solid var(--line); background:var(--mist)}
.board-top .tl{width:11px; height:11px; border-radius:50%}
.board-title{font-family:var(--disp); font-size:12.5px; font-weight:600; color:var(--ink-soft);
  margin-left:7px}
.board input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.hb-tabs{display:flex; gap:6px; padding:14px 18px 0; flex-wrap:wrap}
.hb-tabs label{cursor:pointer; font-family:var(--disp); font-weight:600; font-size:13.5px;
  padding:8px 16px; border-radius:var(--r-pill); color:var(--ink-soft);
  background:var(--mist); border:1.5px solid transparent;
  transition:transform .32s var(--spring), background .2s, color .2s, border-color .2s}
.hb-tabs label:hover{transform:translateY(-2px)}
.hb-panel{display:none; padding-bottom:4px}
#hb-a:checked~.hb-tabs label[for=hb-a]{background:var(--amber-wash); color:var(--amber); border-color:currentColor}
#hb-b:checked~.hb-tabs label[for=hb-b]{background:var(--teal-wash); color:var(--teal); border-color:currentColor}
#hb-c:checked~.hb-tabs label[for=hb-c]{background:var(--pink-wash); color:var(--pink); border-color:currentColor}
#hb-a:checked~#hbp-a,#hb-b:checked~#hbp-b,#hb-c:checked~#hbp-c{display:block}
.board-head{display:grid; grid-template-columns:104px 1fr; gap:14px; padding:14px 18px 8px;
  font-family:var(--disp); font-size:11px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-soft)}
.row{display:grid; grid-template-columns:104px 1fr; gap:14px; align-items:center;
  padding:14px 18px; border-top:1px solid var(--line)}
.row-tag{font-family:var(--disp); font-size:11.5px; font-weight:600; padding:6px 11px;
  border-radius:var(--r-pill); text-align:center}
.swap{display:grid; min-height:1.55em}
.swap>span{grid-area:1/1; font-size:15.5px; line-height:1.45}
.swap .spec{color:var(--ink-soft); font-variant-numeric:tabular-nums; opacity:0}
.swap .story{color:var(--ink); font-weight:600; opacity:1}
.board-foot{padding:12px 18px; border-top:1px solid var(--line); background:var(--mist);
  font-size:12.5px; color:var(--ink-soft)}
/* reserve the strip the floating card overlaps, so its text is never hidden */
@media (min-width:941px){.board-foot{padding-left:242px}}
@media (max-width:940px) and (min-width:621px){.board-foot{padding-right:236px}}
/* sequenced, never crossfaded: the spec clears before the story arrives */
@keyframes showSpec{0%,38%{opacity:1; transform:translateY(0)}
  44%,96%{opacity:0; transform:translateY(-7px)} 100%{opacity:1; transform:translateY(0)}}
@keyframes showStory{0%,44%{opacity:0; transform:translateY(7px)}
  50%,92%{opacity:1; transform:translateY(0)} 96%,100%{opacity:0; transform:translateY(7px)}}
.anim .swap .spec{animation:showSpec 9s var(--ease) infinite}
.anim .swap .story{animation:showStory 9s var(--ease) infinite}
.anim .r2 .spec,.anim .r2 .story{animation-delay:.45s}
.anim .r3 .spec,.anim .r3 .story{animation-delay:.9s}
/* comparison meters */
.meter{height:7px; border-radius:var(--r-pill); background:var(--sink); overflow:hidden; margin-top:7px}
.meter i{display:block; height:100%; border-radius:var(--r-pill); width:0;
  transition:width 1.1s var(--ease) .15s}
.board.seen .meter i{width:var(--w)}
.qline{font-size:15px; color:var(--ink-soft)}
.qname{font-weight:600; color:var(--ink); font-size:15.5px}

/* ============ marquee (Further's own questions) ============ */
.marq{border-block:1px solid var(--line); background:var(--mist); overflow:hidden;
  padding-block:16px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marq-track{display:flex; gap:0; width:max-content}
/* same scoping trap as .rot — .anim is on the board, not here */
@media (prefers-reduced-motion:no-preference){
  .marq-track{animation:marq 34s linear infinite}
}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marq-item{display:inline-flex; align-items:center; gap:14px; padding-inline:22px;
  font-family:var(--disp); font-weight:500; font-size:16px; color:var(--ink-soft); white-space:nowrap}
.marq-item::after{content:""; width:6px; height:6px; border-radius:50%; background:var(--violet); opacity:.5}

/* ============ cards ============ */
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(22px,3.4vw,52px)}
.card{position:relative; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:30px; overflow:hidden;
  transition:transform .46s var(--spring), box-shadow .36s var(--ease), border-color .3s}
/* One accent line per card only — the rule above the heading. A second bar across the card's
   top edge on hover was redundant. */
.card:hover{transform:translateY(-7px); box-shadow:0 26px 52px -22px var(--accent,var(--violet));
  border-color:color-mix(in srgb, var(--accent,var(--violet)) 40%, var(--line))}
.card h3{font-size:23px; margin-bottom:11px}
.card p{color:var(--ink-soft); font-size:16px}
.bar{height:5px; width:46px; border-radius:var(--r-pill); margin-bottom:19px;
  background:var(--accent,var(--violet)); transition:width .44s var(--spring)}
.card:hover .bar{width:74px}
.lead{font-size:clamp(17.5px,1.65vw,20.5px); color:var(--ink-soft); max-width:60ch; margin-top:20px}
.h2big{font-size:clamp(33px,4.5vw,57px); font-weight:800}
.h2big .l2{display:block}
.sect-head{max-width:64ch}
/* Headline left, supporting copy right. Previously both stacked on the left and the whole
   right half of every section header sat empty. */
.sect-split{display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  gap:clamp(20px,3.6vw,56px); align-items:end; max-width:none}
.sect-split .lead:first-of-type{margin-top:0}
@media (max-width:860px){
  .sect-split{grid-template-columns:1fr; gap:14px; align-items:start}
  .sect-split .lead:first-of-type{margin-top:18px}
}
.stack{display:flex; flex-direction:column; gap:14px; margin-top:20px}

/* ============ feature rows ============ */
.feat{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.66fr);
  gap:clamp(24px,4vw,56px); align-items:center; padding-block:clamp(28px,3.4vw,46px);
  border-top:1px solid var(--line)}
/* Push each image toward the page's outer edge instead of floating centred in its column,
   which left a wide gutter of empty ground on the inside. */
.feat .feat-media{max-width:420px; margin-inline:auto 0}
.feat.flip .feat-media{margin-inline:0 auto}
@media (max-width:940px){.feat .feat-media,.feat.flip .feat-media{margin-inline:0}}
/* On a flipped row the media moves to the first slot, so the columns must swap too —
   otherwise the 420px image sits in the WIDE column leaving ~230px dead, and the copy gets
   squeezed into the narrow one. */
.feat.flip{grid-template-columns:minmax(0,.66fr) minmax(0,1fr)}
.feat.flip .feat-media{order:-1}
/* Format three carries a live decision lens, so it needs no illustration beside it —
   the working widget is the visual. Give it the full width. */
.feat.solo{grid-template-columns:1fr}
/* full width — it is the interactive centrepiece of this row, not a sidebar element */
.feat.solo .lens{max-width:none}
.feat.solo .lens-cols{grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.feat h3{font-size:clamp(26px,2.9vw,37px); margin:14px 0 13px}
.feat p{color:var(--ink-soft)}
.feat-media{border-radius:var(--r-lg); overflow:hidden; background:var(--paper);
  border:1px solid var(--line); transition:transform .5s var(--spring), box-shadow .4s}
.feat-media:hover{transform:translateY(-6px) rotate(-.6deg); box-shadow:var(--shadow-lift)}
/* height:auto is load-bearing. The <img> carries height="720" as a presentational hint, and
   aspect-ratio is ignored unless height resolves to auto — without this the box renders
   398x720 portrait and object-fit crops the subject's top and side away. */
.feat-media img{aspect-ratio:1/1; object-fit:cover; width:100%; height:auto; display:block}
.mini{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  padding:17px 20px; transition:transform .42s var(--spring), border-color .25s, box-shadow .3s}
.mini:hover{transform:translateX(7px); border-color:var(--teal); box-shadow:var(--shadow)}
.mini .mt{font-family:var(--disp); font-weight:600; font-size:16.5px; display:flex;
  align-items:center; justify-content:space-between; gap:12px}
.mini .mb{color:var(--ink-soft); font-size:15.5px; margin-top:2px}
.quote-card{background:var(--amber-wash); border-radius:var(--r-lg); padding:26px 28px;
  border:1px solid color-mix(in srgb, var(--amber) 26%, transparent); margin-top:20px}
.quote-card .lbl{font-family:var(--disp); font-size:11.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--amber)}
.quote-card .q{font-family:var(--disp); font-weight:700; font-size:clamp(21px,2.3vw,29px);
  line-height:1.12; letter-spacing:-.03em; margin:11px 0 11px}
.quote-card p{color:var(--ink-soft); font-size:15.5px}

/* ============ decision lens (no-JS: radios + :checked) ============ */
.lens{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); overflow:hidden; margin-top:20px}
.lens-head{padding:20px 24px 0}
.lens-q{font-family:var(--disp); font-weight:700; font-size:20px; letter-spacing:-.025em}
.lens input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.lens-tabs{display:flex; gap:8px; flex-wrap:wrap; padding:15px 24px 19px}
.lens-tabs label{cursor:pointer; font-family:var(--disp); font-weight:600; font-size:15px;
  padding:11px 22px; border-radius:var(--r-pill); border:2px solid var(--line);
  color:var(--ink-soft);
  transition:transform .34s var(--spring), background .2s, color .2s, border-color .2s}
.lens-tabs label:hover{transform:translateY(-2px); border-color:var(--pink)}
.lens-panel{display:none; padding:0 24px 25px; border-top:1px solid var(--line)}
.lens-panel .pq{font-family:var(--disp); font-weight:700; font-size:clamp(20px,2.2vw,26px);
  letter-spacing:-.028em; margin:21px 0 17px}
.lens-cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.lens-cols .lc{background:var(--mist); border-radius:var(--r-md); padding:17px 19px}
.lens-cols .lt{font-family:var(--disp); font-size:11.5px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px}
.lens-cols .lv{font-size:16px}
.lens-note{margin-top:16px; font-size:14.5px; color:var(--ink-soft)}
#lens-fit:checked~.lens-tabs label[for=lens-fit],
#lens-cost:checked~.lens-tabs label[for=lens-cost],
#lens-trade:checked~.lens-tabs label[for=lens-trade]{background:var(--pink); border-color:var(--pink); color:#fff}
#lens-fit:checked~#p-fit,#lens-cost:checked~#p-cost,#lens-trade:checked~#p-trade{display:block}

/* ============ AI section ============ */
.band{background:var(--mist)}
.ai-list{display:flex; flex-direction:column; gap:13px; margin-top:24px}
.ai-item{display:grid; grid-template-columns:38px 1fr; gap:16px; align-items:start;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:19px 21px;
  transition:transform .42s var(--spring), box-shadow .3s, border-color .25s}
.ai-item:hover{transform:translateY(-5px); box-shadow:var(--shadow);
  border-color:color-mix(in srgb, var(--accent,var(--sky)) 45%, var(--line))}
.ai-num{width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  font-family:var(--disp); font-weight:700; font-size:16px; color:#fff;
  background:var(--accent,var(--sky)); transition:transform .44s var(--spring)}
.ai-item:hover .ai-num{transform:rotate(-8deg) scale(1.08)}
.ai-item h4{font-size:18.5px; margin-bottom:3px}
.ai-item p{color:var(--ink-soft); font-size:15.5px}

/* ============ brands ============ */
.brand-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:32px}
.bc{position:relative; border-radius:var(--r-lg); padding:28px; color:#fff; overflow:hidden;
  transition:transform .48s var(--spring), box-shadow .4s}
.bc::after{content:""; position:absolute; right:-40px; bottom:-56px; width:150px; height:150px;
  border-radius:50%; background:rgba(255,255,255,.12); transition:transform .6s var(--spring)}
.bc:hover{transform:translateY(-9px) rotate(-.7deg); box-shadow:var(--shadow-lift)}
.bc:hover::after{transform:scale(1.5)}
.bc h4{font-size:20.5px; margin-bottom:9px; color:#fff; position:relative}
.bc p{font-size:15.5px; color:rgba(255,255,255,.92); position:relative}
.bc-1{background:var(--violet)} .bc-2{background:var(--teal)} .bc-3{background:var(--pink)}

/* ============ CTA ============ */
/* ~20% shorter than before (was clamp(40px,5.8vw,76px)) */
.cta{position:relative; background:var(--ink); border-radius:var(--r-xl);
  padding:clamp(32px,4.4vw,58px); text-align:center; color:#fff; overflow:hidden}
.cta p{margin-top:13px}
.cta .hero-cta{margin-top:22px}
.cta::before{content:""; position:absolute; inset:0;
  background:radial-gradient(520px 300px at 20% 0%, rgba(91,61,245,.5), transparent 68%),
             radial-gradient(460px 280px at 82% 100%, rgba(224,50,111,.42), transparent 66%)}
.cta>*{position:relative}
.cta h2{font-size:clamp(30px,4.2vw,52px); color:#fff; font-weight:800}
.cta p{color:rgba(255,255,255,.76); margin:17px auto 0; max-width:52ch; font-size:17.5px}
.cta .btn-ghost{color:#fff; border-color:rgba(255,255,255,.36)}
.cta .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.1)}

/* ============ footer ============ */
.ftr{border-top:1px solid var(--line); padding-block:34px 38px; background:var(--paper)}
.ftr-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px}
.ftr-col h5{font-family:var(--disp); font-size:12px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 14px}
.ftr-col a{display:block; text-decoration:none; font-size:15.5px; color:var(--ink-soft);
  padding:5px 0; transition:color .2s, transform .3s var(--spring)}
.ftr-col a:hover{color:var(--violet); transform:translateX(4px)}
.ftr-blurb{color:var(--ink-soft); font-size:15px; margin-top:10px; max-width:34ch}
/* Registration details sit under the brand column instead of a full-width band below the
   grid. That band left the brand column's lower half empty and added footer height. */
.legal{margin-top:30px; font-size:12.5px; line-height:1.5; color:var(--ink-soft); max-width:42ch}

/* ============ reveal: only below-fold elements are ever hidden ============ */
.js-reveal .reveal.pre{opacity:0; transform:translateY(20px)}
/* Copy blocks slide in from the right so each section assembles as you scroll. Body has
   overflow-x:hidden, so the offset start is clipped rather than creating a scrollbar. */
.js-reveal .reveal.from-right.pre{transform:translateX(52px)}
.js-reveal .reveal.from-left.pre{transform:translateX(-52px)}
.js-reveal .reveal.pre.in{opacity:1; transform:none;
  transition:opacity .68s var(--ease), transform .78s var(--spring)}

/* ============ responsive ============ */
@media (max-width:940px){
  .hero-grid,.grid-2,.feat,.ftr-grid{grid-template-columns:1fr}
  .feat.flip .feat-media{order:0}
  .nav,.hdr .btn{display:none}
  .menu{display:block}
  .grid-3,.brand-cards{grid-template-columns:1fr}
  .feat-media{max-width:440px}
  .ftr-grid{gap:26px}
}
@media (max-width:620px){
  body{font-size:16px}
  .lens-cols{grid-template-columns:1fr}
  .row,.board-head{grid-template-columns:86px 1fr; gap:10px; padding-inline:14px}
  .card{padding:24px}
  .btn{padding:14px 22px; font-size:15px}
  .hero-cta .btn{flex:1 1 auto; justify-content:center}
  .cta{border-radius:var(--r-lg)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important}
  .swap .spec{opacity:0} .swap .story{opacity:1}
  .rot>span{opacity:0} .rot>span:nth-child(1){opacity:1}
  .meter i{width:var(--w)}
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---- policy pages + production-only bits ---- */
.policy{padding-block:clamp(40px,5vw,72px)}
.policy .lead{max-width:62ch}
.policy-date{margin-top:14px; font-size:14.5px; color:var(--ink-soft)}
.policy-sec{margin-top:clamp(26px,3vw,40px); max-width:74ch}
.policy-sec h2{font-size:clamp(21px,2.2vw,27px); margin-bottom:12px}
.policy-sec p{color:var(--ink-soft); margin-top:12px}
.policy-sec a{color:var(--violet); text-underline-offset:3px}
.policy-sec code{background:var(--mist); padding:2px 6px; border-radius:6px; font-size:.92em}
.ftr-contact{margin-top:12px; font-size:15px}
.ftr-contact a{color:var(--violet); font-weight:600; text-underline-offset:3px}
/* the consent dialog builds its own DOM; keep it above the sticky header */
#further-analytics-consent,[data-further-consent]{z-index:300}