/* CoVince feature site — shared stylesheet for the index and every feature page.
   Same glass language as all-in-one-pricing.html: light by default, dark on request,
   every colour behind a token so a page never carries a raw hex. */

:root[data-theme="light"]{
  --bg:#eef3ef; --text:#0d1a12; --muted:#5b7365; --muted-2:#8aa294;
  --accent:#34d17a; --accent-2:#12a150; --accent-text:#0f8f4c;
  --accent-soft:rgba(52,209,122,.14); --accent-line:rgba(18,161,80,.34);
  --warn-text:#a86a06; --warn-soft:rgba(245,166,35,.13); --warn-line:rgba(245,166,35,.45);
  --danger-text:#b4453f; --danger-soft:rgba(214,86,79,.10); --danger-line:rgba(214,86,79,.30);
  --glass:rgba(255,255,255,.55); --glass-2:rgba(255,255,255,.78);
  --glass-line:rgba(255,255,255,.85); --glass-line-2:rgba(16,48,32,.14);
  --surface-1:rgba(255,255,255,.5); --surface-2:rgba(255,255,255,.72);
  --nav-bg:rgba(255,255,255,.62); --track-bg:rgba(16,48,32,.09);
  --inset:inset 0 1px 0 rgba(255,255,255,.9);
  --shadow:0 30px 70px -26px rgba(15,50,33,.35);
  --shadow-sm:0 16px 40px -20px rgba(15,50,33,.28);
  --orb-1:rgba(52,209,122,.34); --orb-2:rgba(18,161,80,.22); --orb-3:rgba(245,166,35,.20);
}
:root[data-theme="dark"]{
  --bg:#07110c; --text:#eaf5ee; --muted:#9db3a6; --muted-2:#7d9488;
  --accent:#34d17a; --accent-2:#12a150; --accent-text:#5ce49b;
  --accent-soft:rgba(52,209,122,.13); --accent-line:rgba(52,209,122,.32);
  --warn-text:#f5c069; --warn-soft:rgba(245,166,35,.12); --warn-line:rgba(245,166,35,.34);
  --danger-text:#ef8a84; --danger-soft:rgba(214,86,79,.12); --danger-line:rgba(214,86,79,.30);
  --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.07);
  --glass-line:rgba(255,255,255,.09); --glass-line-2:rgba(255,255,255,.14);
  --surface-1:rgba(255,255,255,.04); --surface-2:rgba(255,255,255,.07);
  --nav-bg:rgba(7,17,12,.72); --track-bg:rgba(255,255,255,.09);
  --inset:inset 0 1px 0 rgba(255,255,255,.06);
  --shadow:0 30px 70px -26px rgba(0,0,0,.8);
  --shadow-sm:0 16px 40px -20px rgba(0,0,0,.7);
  --orb-1:rgba(52,209,122,.20); --orb-2:rgba(18,161,80,.15); --orb-3:rgba(245,166,35,.12);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ color-scheme:dark; }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{width:min(1180px,92vw);margin:0 auto}

/* floating background orbs, same as the pricing page */
.orbs{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.orb{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}
.o1{width:520px;height:520px;background:var(--orb-1);top:-160px;left:-120px;animation:drift1 26s ease-in-out infinite}
.o2{width:420px;height:420px;background:var(--orb-2);top:38%;right:-140px;animation:drift2 32s ease-in-out infinite}
.o3{width:380px;height:380px;background:var(--orb-3);bottom:-120px;left:22%;animation:drift3 38s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(70px,50px,0) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-60px,-40px,0) scale(1.08)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(40px,-60px,0) scale(1.15)}}
body>*:not(.orbs){position:relative;z-index:1}

/* ── cinema: everything enters, nothing pops ─────────────────────────────
   A page that assembles itself as you scroll reads as something built with care.
   Purely additive: without JS or with reduced motion everything is simply visible. */
.rise{opacity:0;transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.16,.84,.44,1),transform .75s cubic-bezier(.16,.84,.44,1)}
.rise.in{opacity:1;transform:none}
.rise.d1{transition-delay:.07s}.rise.d2{transition-delay:.14s}.rise.d3{transition-delay:.21s}
.rise.d4{transition-delay:.28s}.rise.d5{transition-delay:.35s}.rise.d6{transition-delay:.42s}

/* Screenshots arrive with a slight scale — the one place a little drama is honest,
   because the screen IS the product. */
.shot.rise{transform:translateY(34px) scale(.965)}
.shot.rise.in{transform:none}

/* Hero letters lift on load, staggered by line. */
.f-hero h1,.i-hero h1{animation:heroIn .9s cubic-bezier(.16,.84,.44,1) both}
.promise,.i-hero .lead{animation:heroIn .9s cubic-bezier(.16,.84,.44,1) .12s both}
.f-hero__meta,.i-stats{animation:heroIn .9s cubic-bezier(.16,.84,.44,1) .2s both}
.f-hero .start-row{animation:heroIn .9s cubic-bezier(.16,.84,.44,1) .28s both}
@keyframes heroIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* A slow sheen across the gradient headline. */
.grad{background:linear-gradient(100deg,var(--accent-2) 0%,var(--accent) 38%,var(--accent-2) 62%,var(--accent) 100%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 9s ease-in-out infinite}
@keyframes sheen{0%,100%{background-position:0% 0}50%{background-position:100% 0}}

/* Reading-progress hairline: cheap, and it makes a long page feel authored. */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--accent-2),var(--accent));box-shadow:0 0 12px var(--accent)}

@media (prefers-reduced-motion:reduce){
  .orb{animation:none}
  .rise{opacity:1;transform:none;transition:none}
  .shot.rise{transform:none}
  .f-hero h1,.i-hero h1,.promise,.i-hero .lead,.f-hero__meta,.i-stats,.f-hero .start-row{animation:none}
  .grad{animation:none}
  html{scroll-behavior:auto}
}

/* ── nav ─────────────────────────────────────────────────────────────── */
/* body > nav, not nav: the orb rule above is `body>*:not(.orbs)`, which carries a class in its
   :not() and therefore OUT-SPECIFIES a bare element selector. The nav was silently relative on
   every sub-page — invisible until a dark hero landed underneath it. */
body > nav:not(.orbs){position:sticky;top:0;z-index:50;background:var(--nav-bg);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--glass-line-2)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:13px 0}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18px}
.brand .logo,footer .logo{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  overflow:hidden;background:var(--surface-2);border:1px solid var(--glass-line-2);box-shadow:var(--inset)}
.brand .logo img,footer .logo img{width:100%;height:100%;object-fit:contain;display:block}
.nav-links{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:600;color:var(--muted)}
.nav-links a:hover{color:var(--text)}
.nav-links .cta{padding:9px 17px;border-radius:100px;background:linear-gradient(140deg,var(--accent),var(--accent-2));
  color:#04140a;font-weight:800;box-shadow:0 10px 26px -8px rgba(18,161,80,.6)}
.nav-links .cta:hover{color:#04140a;transform:translateY(-1px)}
@media(max-width:760px){.nav-links a:not(.cta){display:none}}

/* ── index hero ──────────────────────────────────────────────────────── */
.i-hero{padding:74px 0 42px;text-align:center}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:100px;
  background:var(--glass);border:1px solid var(--glass-line-2);font-size:13px;font-weight:650;color:var(--muted)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.i-hero h1{font-size:clamp(38px,6.4vw,70px);line-height:1.03;letter-spacing:-2px;margin:22px 0 0;font-weight:850}
.grad{background:linear-gradient(120deg,var(--accent-2),var(--accent));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.lead{font-size:17px;color:var(--muted);max-width:66ch;margin:18px auto 0}
.i-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px}
.stat{background:var(--glass);border:1px solid var(--glass-line-2);border-radius:16px;
  padding:16px 24px;box-shadow:var(--inset);min-width:190px}
.stat b{display:block;font-size:27px;font-weight:850;letter-spacing:-.6px}
.stat span{font-size:12.5px;color:var(--muted-2)}

/* ── bands ───────────────────────────────────────────────────────────── */
.band{padding:52px 0}
.band--pain{background:var(--surface-1);border-block:1px solid var(--glass-line-2)}
.band--how{background:var(--surface-1);border-block:1px solid var(--glass-line-2)}
.h2{font-size:clamp(24px,3vw,33px);letter-spacing:-.7px;font-weight:820;margin:0 0 8px}
.band .lead{margin:0 0 26px}

/* ── index grid ──────────────────────────────────────────────────────── */
.group{margin-bottom:46px}
.group-head h2{font-size:23px;font-weight:820;letter-spacing:-.5px;margin:0}
.group-head p{margin:4px 0 20px;color:var(--muted);font-size:14.5px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.tile{position:relative;display:flex;flex-direction:column;gap:9px;padding:20px;border-radius:18px;overflow:hidden;
  background:var(--glass);border:1px solid var(--glass-line-2);box-shadow:var(--inset);
  transition:transform .28s cubic-bezier(.16,.84,.44,1),box-shadow .28s,border-color .28s}
.tile:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--accent-line)}
/* A light that follows the cursor across the card. */
.tile::before{content:"";position:absolute;inset:-1px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),var(--accent-soft),transparent 62%)}
.tile:hover::before{opacity:1}
.tile:hover .tile-shot img{transform:scale(1.035)}
.tile-shot img{transition:transform .5s cubic-bezier(.16,.84,.44,1)}
.tile h3{margin:0;font-size:17px;font-weight:800;letter-spacing:-.3px}
.tile p{margin:0;font-size:14px;color:var(--muted)}
.ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--accent-soft);border:1px solid var(--accent-line)}
.ic svg{width:19px;height:19px;fill:none;stroke:var(--accent-text);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.ic.big{width:56px;height:56px;border-radius:16px;flex:0 0 auto}
.ic.big svg{width:27px;height:27px}
.tile-shot{display:block;border-radius:11px;overflow:hidden;border:1px solid var(--glass-line-2);
  background:var(--surface-2);margin-top:2px}
.tile-shot img{width:100%;height:132px;object-fit:contain;object-position:center top;display:block}
.tile-foot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:10px;border-top:1px solid var(--glass-line-2);font-size:12px}
.tile-foot .repl{color:var(--muted-2)}
.tile-foot .price{color:var(--warn-text);font-weight:750;white-space:nowrap}

/* ── feature hero ────────────────────────────────────────────────────── */
.f-hero{padding:38px 0 46px}
.back{display:inline-block;font-size:13.5px;font-weight:650;color:var(--muted);margin-bottom:22px}
.back:hover{color:var(--accent-text)}
.f-hero__top{display:flex;align-items:center;gap:16px}
.eyebrow{display:block;font-size:11.5px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--accent-text)}
.f-hero h1{font-size:clamp(31px,4.6vw,50px);line-height:1.06;letter-spacing:-1.4px;margin:2px 0 0;font-weight:850}
.promise{font-size:clamp(17px,2vw,21px);color:var(--muted);max-width:60ch;margin:18px 0 0;font-weight:600}
.f-hero__meta{display:flex;flex-wrap:wrap;gap:13px;margin-top:28px}
.meta-card{padding:15px 20px;border-radius:15px;background:var(--glass);border:1px solid var(--glass-line-2);
  box-shadow:var(--inset);min-width:210px}
.meta-card span{display:block;font-size:12px;color:var(--muted-2)}
.meta-card b{display:block;font-size:29px;font-weight:850;letter-spacing:-.8px;color:var(--warn-text)}
.meta-card i{font-size:12px;color:var(--muted);font-style:normal}
.meta-card--ours{background:var(--accent-soft);border-color:var(--accent-line)}
.meta-card--ours b{color:var(--accent-text)}

.start-row{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:24px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:100px;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));color:#04140a;font-weight:800;font-size:14.5px;
  box-shadow:0 14px 30px -10px rgba(18,161,80,.65);transition:transform .18s}
.btn:hover{transform:translateY(-2px);color:#04140a}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.btn--big{padding:15px 30px;font-size:16px}
.btn--ghost{background:none;border:1px solid var(--glass-line-2);color:var(--text);box-shadow:none}
.btn--ghost:hover{color:var(--text);border-color:var(--accent-line)}
.hint{font-size:13px;color:var(--muted-2)}

/* ── cards: problem / value ──────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px}
.card{display:flex;gap:13px;padding:19px;border-radius:16px;background:var(--glass);
  border:1px solid var(--glass-line-2);box-shadow:var(--inset)}
.card p{margin:0;font-size:14.5px;color:var(--muted)}
.card--pain{background:var(--danger-soft);border-color:var(--danger-line)}
.card--pain p{color:var(--text)}
.card .x,.card .v{width:26px;height:26px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center}
.card .x{background:var(--danger-soft);border:1px solid var(--danger-line)}
.card .v{background:var(--accent-soft);border:1px solid var(--accent-line)}
.card .x svg,.card .v svg{width:14px;height:14px;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.card .x svg{stroke:var(--danger-text)}
.card .v svg{stroke:var(--accent-text)}
.card--value p b{color:var(--text)}

/* ── screenshots ─────────────────────────────────────────────────────── */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:18px}
@media(max-width:560px){.shots{grid-template-columns:1fr}}
.shot{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--glass-line-2);
  box-shadow:var(--shadow-sm);background:var(--surface-2);cursor:zoom-in;transition:transform .2s}
.shot:hover{transform:translateY(-3px)}
.shot .bar{display:flex;align-items:center;gap:7px;padding:9px 13px;background:var(--glass-2);
  border-bottom:1px solid var(--glass-line)}
.shot .bar i{width:9px;height:9px;border-radius:50%;background:var(--track-bg);display:block}
.shot .bar .u{margin-left:8px;font-size:11px;color:var(--muted-2)}
.shot img{width:100%;display:block;background:var(--surface-2);object-fit:contain;object-position:top center}
.shot figcaption{padding:11px 14px;font-size:13px;color:var(--muted);border-top:1px solid var(--glass-line-2)}

/* lightbox — closes on the X or Escape only, never on a stray backdrop click */
.lb{position:fixed;inset:0;z-index:999;display:none;place-items:center;padding:20px;
  background:rgba(6,14,10,.74);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.lb.on{display:grid}
.lb-inner{position:relative;width:100%;max-width:1600px;max-height:calc(100vh - 40px);
  display:flex;flex-direction:column;border-radius:18px;overflow:hidden;
  border:1px solid var(--glass-line-2);box-shadow:0 40px 100px -30px rgba(0,0,0,.8)}
.lb-inner .bar,.lb-cap{flex:0 0 auto}
.lb-inner .bar{display:flex;align-items:center;gap:7px;padding:10px 14px;
  background:rgba(255,255,255,.9);border-bottom:1px solid rgba(0,0,0,.08)}
.lb-inner .bar i{width:9px;height:9px;border-radius:50%;background:rgba(0,0,0,.12);display:block}
.lb-inner .bar .u{margin-left:8px;font-size:11.5px;color:#5b7365}
.lb-inner img{width:100%;flex:1 1 auto;min-height:0;object-fit:contain;background:#fff;display:block}
.lb-cap{padding:13px 16px;font-size:13.5px;font-weight:650;background:rgba(255,255,255,.94);color:#0d1a12}
.lb-close{position:absolute;top:9px;right:11px;width:32px;height:32px;border-radius:10px;display:grid;
  place-items:center;cursor:pointer;background:rgba(8,20,14,.14);color:#0d1a12}
.lb-close:hover{background:rgba(8,20,14,.3)}
.lb-close svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}

/* ── steps ───────────────────────────────────────────────────────────── */
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.steps li{display:flex;gap:13px;padding:19px;border-radius:16px;background:var(--glass);
  border:1px solid var(--glass-line-2);box-shadow:var(--inset)}
.steps .n{width:27px;height:27px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-text);
  font-weight:850;font-size:13px}
.steps p{margin:0;font-size:14.5px;color:var(--muted)}

/* ── replaces + cocentric ────────────────────────────────────────────── */
.repl-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  padding:22px 24px;border-radius:18px;background:var(--warn-soft);border:1px solid var(--warn-line)}
.repl-box .repl{margin:4px 0 0;font-size:16px;font-weight:750}
.repl-num{text-align:right}
.repl-num b{display:block;font-size:27px;font-weight:850;color:var(--warn-text);letter-spacing:-.6px}
.repl-num span{font-size:12px;color:var(--muted)}
.cocentric{margin:22px 0 0;font-size:14.5px;color:var(--muted);max-width:76ch}

/* ── cta + prev/next + footer ────────────────────────────────────────── */
.band--cta{background:var(--surface-1);border-block:1px solid var(--glass-line-2)}
.cta-wrap{text-align:center}
.cta-wrap h2{font-size:clamp(24px,3.2vw,36px);letter-spacing:-1px;font-weight:850;margin:0 0 10px}
.cta-wrap p{color:var(--muted);margin:0 0 24px}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.prevnext{display:flex;gap:14px;justify-content:space-between;padding:34px 0}
.pn{flex:1 1 0;padding:17px 20px;border-radius:16px;background:var(--glass);
  border:1px solid var(--glass-line-2);box-shadow:var(--inset);transition:border-color .2s}
.pn:hover{border-color:var(--accent-line)}
.pn span{display:block;font-size:12px;color:var(--muted-2)}
.pn b{font-size:15.5px;font-weight:780}
.pn--next{text-align:right}
footer{border-top:1px solid var(--glass-line-2);background:var(--surface-1);padding:26px 0;margin-top:10px}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.f-left{display:flex;align-items:center;gap:12px}
.f-left b{display:block;font-size:15px}
.f-left span{font-size:12.5px;color:var(--muted-2)}
.f-right{display:flex;gap:20px;font-size:13.5px;font-weight:650;color:var(--muted)}
.f-right a:hover{color:var(--accent-text)}

/* ══ cinematic feature page ════════════════════════════════════════════════
   A feature page opens on a room, the way the main page does. Without a photo it falls back
   to the plain hero — no page ever depends on an image being there. */
.fh{position:relative;padding:44px 0 54px;isolation:isolate;overflow:clip}
.fh--photo{min-height:76vh;display:grid;align-items:center;color:#fff;background:#050d09}
.fh-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;
  z-index:-2;transform:scale(1.08);animation:fhPush 22s ease-out both}
@keyframes fhPush{from{transform:scale(1.16)}to{transform:scale(1.04)}}
.fh-scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(5,13,9,.94),rgba(5,13,9,.6) 48%,rgba(5,13,9,.25)),
             linear-gradient(0deg,rgba(5,13,9,.92),transparent 55%)}
.fh-grain{position:absolute;inset:0;z-index:-1;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>")}
.fh-body{position:relative;z-index:1;max-width:760px}
.fh--photo .back{color:rgba(234,245,238,.75)}
.fh--photo .back:hover{color:#5ce49b}
.fh--photo .ic.big{background:rgba(52,209,122,.16);border-color:rgba(92,228,155,.45)}
.fh--photo .ic.big svg{stroke:#5ce49b}
.fh--photo .eyebrow{color:#5ce49b}
.fh--photo h1{color:#fff;text-shadow:0 2px 40px rgba(0,0,0,.6)}
.fh--photo .promise{color:rgba(234,245,238,.88);text-shadow:0 1px 22px rgba(0,0,0,.7)}
.fh--photo .meta-card{background:rgba(5,13,9,.55);border-color:rgba(255,255,255,.16);backdrop-filter:blur(8px)}
.fh--photo .meta-card span{color:rgba(234,245,238,.6)}
.fh--photo .meta-card i{color:rgba(234,245,238,.75)}
.fh--photo .meta-card b{color:#f5c069}
.fh--photo .meta-card--ours{background:rgba(52,209,122,.16);border-color:rgba(92,228,155,.45)}
.fh--photo .meta-card--ours b{color:#7dffb9}
.fh--photo .hint{color:rgba(234,245,238,.65)}
.fh .ic.big{margin-bottom:16px}
.fh h1{font-size:clamp(34px,5.6vw,64px);line-height:1.02;letter-spacing:-2px;margin:6px 0 0}
.fh-scroll{display:none;margin-top:34px;font-size:11px;font-weight:800;letter-spacing:2.4px;
  text-transform:uppercase;color:rgba(234,245,238,.5)}
.fh--photo .fh-scroll{display:inline-block;animation:fhBob 2.6s ease-in-out infinite}
@keyframes fhBob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:.9}}

/* chapter strip */
body > .chapters:not(.orbs){position:sticky;top:67px;z-index:40;background:var(--nav-bg);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--glass-line-2)}
.chapters .wrap{display:flex;gap:22px;overflow-x:auto;padding:11px 0;scrollbar-width:none}
.chapters .wrap::-webkit-scrollbar{display:none}
.chapters a{font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
.chapters a:hover{color:var(--accent-text)}
.band-eyebrow{display:block;font-size:11px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--accent-text);margin-bottom:8px}

/* the screen walkthrough */
.walk{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:start;margin-top:8px}
.walk--single .walk-steps{display:none}
.walk--single{grid-template-columns:1fr}
@media(max-width:900px){.walk{grid-template-columns:1fr;gap:18px}}
.walk-stage{position:sticky;top:118px;aspect-ratio:16/10;border-radius:16px;overflow:hidden;
  border:1px solid var(--glass-line-2);box-shadow:var(--shadow);background:var(--surface-2)}
@media(max-width:900px){.walk-stage{position:relative;top:0}}
.walk-frame{position:absolute;inset:0;margin:0;opacity:0;cursor:zoom-in;
  transition:opacity .6s cubic-bezier(.16,.84,.44,1)}
.walk-frame.on{opacity:1}
.walk-frame .bar{position:relative;z-index:2;display:flex;align-items:center;gap:7px;padding:9px 13px;
  background:var(--glass-2);border-bottom:1px solid var(--glass-line)}
.walk-frame .bar i{width:9px;height:9px;border-radius:50%;background:var(--track-bg);display:block}
.walk-frame .bar .u{margin-left:8px;font-size:11px;color:var(--muted-2)}
.walk-frame .zoom{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--accent-text);opacity:0;transition:opacity .2s}
.walk-frame:hover .zoom{opacity:1}
.walk-frame img{width:100%;height:calc(100% - 37px);object-fit:contain;object-position:top center;
  display:block;background:var(--surface-2)}
.walk-steps{display:flex;flex-direction:column}
.walk-step{min-height:58vh;display:flex;align-items:center}
.walk-step .inner{opacity:.25;transform:translateY(12px);
  transition:opacity .45s cubic-bezier(.16,.84,.44,1),transform .45s cubic-bezier(.16,.84,.44,1)}
.walk-step.on .inner{opacity:1;transform:none}
.walk-step .n{display:block;font-size:11.5px;font-weight:800;letter-spacing:1.8px;color:var(--accent-text);margin-bottom:10px}
.walk-step p{margin:0;font-size:17px;line-height:1.5;color:var(--text);font-weight:600}
@media(max-width:900px){.walk-step{min-height:0;padding:14px 0}.walk-step .inner{opacity:1;transform:none}}

/* ══ more cinema on the sub-pages ═════════════════════════════════════════
   The page should feel authored between the blocks, not only inside them. */

/* Bands alternate their light, so scrolling reads as scenes rather than a stack. */
.band{position:relative;isolation:isolate}
.band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 60% at 20% 0%,var(--accent-soft),transparent 65%)}
.band--pain::before{background:radial-gradient(70% 60% at 80% 0%,var(--danger-soft),transparent 65%)}
.band--how::before{background:radial-gradient(70% 60% at 50% 100%,var(--accent-soft),transparent 65%)}
.band + .band::after{content:"";position:absolute;left:14%;right:14%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--glass-line-2),transparent)}

/* Section headings arrive with their eyebrow, a beat apart. */
.band-eyebrow{opacity:0;transform:translateY(10px);
  transition:opacity .6s cubic-bezier(.16,.84,.44,1),transform .6s cubic-bezier(.16,.84,.44,1)}
.band-eyebrow.in{opacity:1;transform:none}

/* The problem cards lean in slightly, the value cards settle — two moods, one motion system. */
.card--pain.rise{transform:translateY(26px) rotate(-.4deg)}
.card--pain.rise.in{transform:none}
.card--value.rise{transform:translateY(26px) scale(.985)}
.card--value.rise.in{transform:none}

/* The numbered steps draw a line down the column as they appear. */
.steps{position:relative}
@media(min-width:920px){
  .steps li{position:relative}
  .steps li::after{content:"";position:absolute;top:50%;right:-7px;width:14px;height:1px;
    background:var(--glass-line-2)}
  .steps li:last-child::after{display:none}
}
.steps .n{transition:transform .5s cubic-bezier(.16,.84,.44,1),box-shadow .5s}
.steps li.in .n{box-shadow:0 0 0 6px var(--accent-soft)}

/* Replaces box: the price counts up like the ones on the main page. */
.repl-num b{font-variant-numeric:tabular-nums}

/* Prev / next become photo doors when the neighbour has a hero image. */
.prevnext{gap:16px}
.pn{position:relative;overflow:hidden;min-height:104px;display:flex;flex-direction:column;justify-content:center}
.pn-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22;z-index:-1;
  transition:opacity .35s,transform .6s cubic-bezier(.16,.84,.44,1);transform:scale(1.06)}
.pn:hover .pn-bg{opacity:.4;transform:scale(1.12)}
.pn span,.pn b{position:relative}

/* The hero's own scrim lifts a touch as you scroll away from it, so the page "opens". */
.fh--photo .fh-body{will-change:transform}