/* ==========================================================================
   PULSE · Statement — Vantage Fit site prototype
   Home + Solutions + Features + About + Pricing behind a hash router.
   Apple Health grammar: color fields, statement type, tinted chapters.
   ========================================================================== */
:root{
  --red:#F15162; --red2:#F4705A;
  --mint:#41D8B4; --orange:#FF9D57;
  --ink:#1D2228; --ink2:#303740;
  --ink78:rgba(29,34,40,.78); --ink55:rgba(29,34,40,.55); --ink40:rgba(29,34,40,.40);
  --hair:rgba(29,34,40,.08);
  --paper:#fff;
  --tint-red:rgba(241,81,98,.08); --tint-mint:rgba(65,216,180,.10); --tint-orange:rgba(255,157,87,.10);
  --pill:42.5px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{font-family:'Poppins',-apple-system,'Segoe UI',sans-serif; background:var(--paper); color:var(--ink);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip}
img,svg{display:block}
.col{max-width:1100px; margin:0 auto; padding:0 40px}
@media(max-width:700px){.col{padding:0 22px}}

/* CTAs */
.cta{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:54px; padding:0 32px;
  border-radius:var(--pill); background:linear-gradient(125deg,var(--red) 5%,var(--red2) 125%);
  color:#fff; font-size:16px; font-weight:500; text-decoration:none; white-space:nowrap;
  transition:transform .2s var(--ease), box-shadow .2s}
.cta:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(241,81,98,.3)}
.ghostw{display:inline-flex; align-items:center; justify-content:center; height:54px; padding:0 28px;
  border-radius:var(--pill); border:1px solid rgba(255,255,255,.45); color:#fff;
  font-size:16px; font-weight:500; text-decoration:none; transition:background .2s, transform .2s}
.ghostw:hover{background:rgba(255,255,255,.09); transform:translateY(-2px)}
.ghostd{display:inline-flex; align-items:center; justify-content:center; height:54px; padding:0 28px;
  border-radius:var(--pill); border:1px solid var(--red); color:var(--red); font-size:16px; font-weight:500;
  text-decoration:none; transition:background .2s, transform .2s}
.ghostd:hover{background:var(--tint-red); transform:translateY(-2px)}
a:focus-visible,button:focus-visible{outline:2px solid var(--red); outline-offset:3px; border-radius:6px}

/* settle reveal */
.settle{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease),transform .7s var(--ease); transition-delay:var(--d,0ms)}
.in .settle,.settle.in{opacity:1; transform:none}

/* ==========================================================================
   NAV — real site taxonomy, provided logo, mega dropdowns
   ========================================================================== */
nav.top{position:fixed; inset:0 0 auto 0; z-index:60; height:66px; transition:background .35s, box-shadow .35s}
.navin{max-width:1280px; margin:0 auto; height:100%; padding:0 28px; display:flex; align-items:center; justify-content:space-between; gap:18px}
.brand{display:flex; align-items:center; text-decoration:none}
.brand img{height:32px; width:auto; transition:filter .35s}
.brand .pos{display:none}
.brand .neg{display:block}
nav.top.light .brand .pos{display:block}
nav.top.light .brand .neg{display:none}
.navlinks{display:flex; gap:4px; align-items:center}
.nl{position:relative}
.nl>a,.nl>button{display:inline-flex; align-items:center; gap:6px; padding:10px 14px; border:0; background:none; cursor:pointer;
  font-family:inherit; font-size:14.5px; font-weight:500; color:rgba(255,255,255,.78); text-decoration:none; transition:color .2s; border-radius:8px}
.nl>a:hover,.nl>button:hover{color:#fff}
nav.top.light .nl>a,nav.top.light .nl>button{color:var(--ink55)}
nav.top.light .nl>a:hover,nav.top.light .nl>button:hover{color:var(--ink)}
.nl .chev{font-size:.6rem; opacity:.6}
nav.top.light{background:rgba(255,255,255,.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--hair)}
.navcta{height:42px; padding:0 24px; font-size:14px}
/* dropdown panels: always light */
.panel{position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(6px);
  background:#fff; border:1px solid var(--hair); border-radius:18px; box-shadow:0 24px 64px rgba(29,34,40,.16);
  padding:22px; display:grid; gap:2px 28px; opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease}
.nl:hover .panel,.nl:focus-within .panel{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0)}
.panel.closing{opacity:0 !important; pointer-events:none !important}
.panel.two{grid-template-columns:1fr 1fr; width:640px}
.panel .grp{font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink40);
  padding:8px 10px 6px; grid-column:span 1}
.panel a{display:block; padding:8px 10px; border-radius:10px; text-decoration:none; transition:background .15s}
.panel a:hover{background:#F8F8F9}
.panel a b{display:block; font-size:13.5px; font-weight:600; color:var(--ink); letter-spacing:-.01em}
.panel a span{display:block; font-size:11.5px; color:var(--ink55); line-height:1.45}
.panel a .newtag{display:inline-block; margin-left:6px; padding:1px 7px; border-radius:99px; background:var(--tint-red); color:var(--red); font-size:9px; font-weight:600; letter-spacing:.04em; vertical-align:2px}
/* mobile */
.mtoggle{display:none; width:40px; height:40px; border:0; background:none; cursor:pointer; position:relative}
.mtoggle i{position:absolute; left:9px; right:9px; height:2px; border-radius:2px; background:#fff; transition:background .35s}
nav.top.light .mtoggle i{background:var(--ink)}
.mtoggle i:nth-child(1){top:13px}.mtoggle i:nth-child(2){top:19px}.mtoggle i:nth-child(3){top:25px}
.msheet{position:fixed; inset:66px 0 0 0; z-index:55; background:#fff; padding:20px 24px 40px; overflow-y:auto; display:none}
.msheet.open{display:block}
.msheet a{display:block; padding:14px 4px; font-size:17px; font-weight:500; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--hair)}
.msheet .msub{font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink40); padding:20px 4px 6px}
@media(max-width:980px){.navlinks{display:none}.mtoggle{display:block}}

/* ==========================================================================
   SHARED FIELD (dark hero band) + chapter grammar
   ========================================================================== */
.field{position:relative; overflow:clip; color:#fff;
  background:linear-gradient(175deg,#2A313A 0%, #1D2228 68%, #191d22 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:150px 24px 96px}
.field.tall{min-height:100vh; padding-top:120px}
.field .kick{font-size:13px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:22px}
.field h1{font-size:clamp(2.3rem,5.6vw,4.3rem); font-weight:600; letter-spacing:-.033em; line-height:1.07; max-width:900px}
.field.tall h1{font-size:clamp(2.6rem,7vw,5.6rem); max-width:1000px; line-height:1.06}
.field .sub{font-size:clamp(1.02rem,1.5vw,1.25rem); color:rgba(255,255,255,.66); max-width:640px; margin:26px auto 0}
.field .ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:42px}
.field .pricenote{font-size:13.5px; color:rgba(255,255,255,.5); margin-top:14px}
.tracks{position:absolute; inset:0; pointer-events:none}
.track{position:absolute; border-radius:200px; border:2px solid rgba(255,255,255,.05)}
.track.fill{background:rgba(255,255,255,.028); border:0}
.t1{width:340px; height:820px; left:4%; top:-180px; animation:drift 34s ease-in-out infinite alternate}
.t2{width:300px; height:680px; left:24%; bottom:-260px; animation:drift 44s ease-in-out infinite alternate-reverse}
.t3{width:360px; height:900px; right:18%; top:-320px; animation:drift 40s ease-in-out infinite alternate}
.t4{width:300px; height:640px; right:-90px; top:16%; animation:drift 36s ease-in-out infinite alternate-reverse}
.t5{width:260px; height:560px; left:44%; top:56%; animation:drift 48s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateY(-28px)}to{transform:translateY(28px)}}
.glyph{width:56px; height:56px; margin:0 auto 14px}
.wordmark{font-size:clamp(1.15rem,2vw,1.5rem); font-weight:600; color:rgba(255,255,255,.62); margin-bottom:clamp(28px,5vh,52px)}
.wclip{display:inline-block; overflow:hidden; vertical-align:bottom; margin-right:.24em}
.wclip:last-child{margin-right:0}
.w{display:inline-block; transform:translateY(112%); animation:wup .8s var(--ease) forwards; animation-delay:var(--wd,0ms)}
@keyframes wup{to{transform:translateY(0)}}
.l2{display:block}
.scrollcue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); width:2px; height:40px; overflow:hidden; border-radius:2px; background:rgba(255,255,255,.12)}
.scrollcue i{position:absolute; inset:0; background:var(--red); border-radius:2px; animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}55%{transform:translateY(0)}100%{transform:translateY(100%)}}

.chapter{padding:130px 0 110px}
@media(max-width:700px){.chapter{padding:88px 0 72px}}
.ch-red{background:linear-gradient(180deg,#fff 0%, var(--tint-red) 55%, #fff 100%)}
.ch-mint{background:linear-gradient(180deg,#fff 0%, var(--tint-mint) 55%, #fff 100%)}
.ch-orange{background:linear-gradient(180deg,#fff 0%, var(--tint-orange) 55%, #fff 100%)}
.chapter .glyph2{width:52px; height:52px; margin-bottom:22px}
.chapter h2{font-size:clamp(2rem,4.6vw,3.6rem); font-weight:600; letter-spacing:-.033em; line-height:1.06; max-width:17ch}
.chapter .body{font-size:clamp(1.02rem,1.45vw,1.22rem); line-height:1.7; color:var(--ink78); max-width:660px; margin-top:24px; font-weight:500}
.hl-red{color:var(--red)} .hl-mint{color:#169d7e} .hl-orange{color:#d97a2d}

/* cards */
.cards{display:grid; grid-template-columns:1.25fr .75fr; gap:22px; margin-top:60px}
@media(max-width:900px){.cards{grid-template-columns:1fr}}
.card{background:#fff; border-radius:28px; box-shadow:0 12px 44px rgba(29,34,40,.09); padding:44px; overflow:clip; position:relative}
.card.dark{color:#fff; background:
  radial-gradient(130% 95% at 82% 88%, rgba(255,157,87,.16) 0%, transparent 58%),
  linear-gradient(170deg,#1E2227 0%,#121517 100%)}
.card h3{font-size:20px; font-weight:600; letter-spacing:-.02em; margin-bottom:8px}
.card .csub{font-size:14px; color:var(--ink55); max-width:340px}
.card.dark .csub{color:rgba(255,255,255,.6)}
.card .stat-inline{font-size:clamp(3rem,5vw,4.4rem); font-weight:300; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; margin:18px 0 6px}
/* item-card grid for solutions/features */
.igrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:56px}
@media(max-width:960px){.igrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.igrid{grid-template-columns:1fr}}
.icard{background:#fff; border-radius:22px; box-shadow:0 10px 36px rgba(29,34,40,.07); padding:30px 28px;
  text-decoration:none; display:flex; flex-direction:column; gap:8px; transition:transform .25s var(--ease), box-shadow .25s}
.icard:hover{transform:translateY(-4px); box-shadow:0 18px 48px rgba(29,34,40,.12)}
.icard .idot{width:34px; height:34px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:8px}
.icard .idot svg{width:18px; height:18px}
.icard b{font-size:16.5px; font-weight:600; letter-spacing:-.015em; color:var(--ink)}
.icard b .newtag{display:inline-block; margin-left:8px; padding:2px 8px; border-radius:99px; background:var(--tint-red); color:var(--red); font-size:9.5px; font-weight:600; letter-spacing:.04em; vertical-align:2px}
.icard span{font-size:13.5px; color:var(--ink55); line-height:1.55; flex:1}
.icard i{font-style:normal; font-size:13px; font-weight:600; color:var(--red)}

/* sticker chips */
.stick-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.schip{display:inline-flex; padding:7px 14px; border-radius:99px; font-size:12.5px; font-weight:600}
.schip.r{background:var(--tint-red); color:var(--red)}
.schip.m{background:rgba(65,216,180,.16); color:#14856a}
.schip.o{background:rgba(255,157,87,.18); color:#c06a20}

/* ==========================================================================
   HOME — illumination, numbers, money (from the approved statement direction)
   ========================================================================== */
.illume{background:linear-gradient(180deg,#C23D4C 0%, #A93242 52%, #8E2938 100%); color:#fff; position:relative}
.illume .inner{min-height:210vh}
.illume .stick{position:sticky; top:0; min-height:100vh; display:flex; align-items:center}
.illume p{font-size:clamp(1.5rem,3.4vw,2.6rem); font-weight:600; letter-spacing:-.02em; line-height:1.42; max-width:900px; margin:0 auto; text-align:center}
.illume .w-lit{opacity:.22; transition:opacity .35s linear}
.illume .w-lit.on{opacity:1}
.illume .fine{display:block; margin-top:34px; font-size:14px; font-weight:400; color:rgba(255,255,255,.55)}
/* phone + dashboard specimens */
.phone{width:min(280px,86vw); margin:36px auto 0; border:2px solid var(--ink); border-radius:38px; background:#fff; box-shadow:0 24px 56px rgba(29,34,40,.16); padding:12px}
.screen{border-radius:27px; background:linear-gradient(180deg,#fff,#FAFBFC); overflow:hidden; padding:16px 14px 10px}
.sbar{display:flex; justify-content:space-between; font-size:10.5px; font-weight:600; color:var(--ink78); padding:0 4px 10px}
.greet{font-size:12px; color:var(--ink55)}
.greet b{display:block; font-size:15.5px; font-weight:600; color:var(--ink)}
.ringrow{display:flex; align-items:center; gap:14px; margin:14px 0 4px}
.rings{width:104px; height:104px; flex:none}
.rings circle{fill:none; stroke-linecap:round}
.leg{font-size:11px; color:var(--ink55); display:flex; flex-direction:column; gap:6px}
.leg b{font-size:13px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.dot{display:inline-block; width:7px; height:7px; border-radius:99px; margin-right:5px}
.mcard{border:1px solid var(--hair); border-radius:12px; padding:10px 12px; margin-top:10px}
.mcard .t{display:flex; justify-content:space-between; font-size:11px; font-weight:600}
.mcard .t em{font-style:normal; color:var(--ink40); font-weight:500}
.mbar{height:5px; border-radius:5px; background:var(--tint-mint); margin-top:8px; overflow:hidden}
.mbar i{display:block; height:100%; width:64%; border-radius:5px; background:var(--mint)}
.lb .row{display:flex; align-items:center; gap:8px; padding:7px 2px; border-bottom:1px solid var(--hair); font-size:11.5px}
.lb .row:last-child{border-bottom:0}
.av{width:22px; height:22px; border-radius:99px; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:600; color:#fff; flex:none}
.lb .who{flex:1; font-weight:500}
.lb .st{font-variant-numeric:tabular-nums; color:var(--ink55)}
.browser{border:1px solid var(--hair); border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 24px 56px rgba(29,34,40,.10); margin-top:36px}
.browser .tb{display:flex; gap:5px; padding:10px 13px; border-bottom:1px solid var(--hair); background:#FAFAFB}
.browser .tb i{width:8px; height:8px; border-radius:99px; background:rgba(29,34,40,.16)}
.dash{display:grid; grid-template-columns:76px 1fr; min-height:230px}
.side{border-right:1px solid var(--hair); padding:12px 10px; display:flex; flex-direction:column; gap:10px}
.side i{height:6px; border-radius:4px; background:var(--hair)}
.side i.on{background:var(--tint-red); position:relative}
.side i.on::before{content:""; position:absolute; left:0; top:0; bottom:0; width:45%; background:var(--red); border-radius:4px}
.main{padding:14px}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.kpi{border:1px solid var(--hair); border-radius:10px; padding:8px 10px}
.kpi small{display:block; font-size:8.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink40)}
.kpi b{font-size:17px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.chartbx{margin-top:10px; border:1px solid var(--hair); border-radius:10px; padding:10px}
.chartbx small{font-size:8.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink40)}
.spark{width:100%; height:56px; margin-top:4px}
.spark .line{stroke:var(--mint); stroke-width:2; fill:none; stroke-linecap:round}
.spark .fillp{fill:var(--tint-mint); stroke:none}
.minibtn{display:inline-block; margin-top:10px; padding:6px 14px; border-radius:99px; background:linear-gradient(125deg,var(--red),var(--red2)); color:#fff; font-size:10px; font-weight:500}
/* numbers */
.numbers h2{margin-bottom:14px}
.numbers .lead{font-size:15px; color:var(--ink55); max-width:520px}
.numgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:36px; margin-top:60px}
@media(max-width:960px){.numgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.numgrid{grid-template-columns:1fr}}
.numcell .n{font-size:clamp(3.4rem,5.4vw,4.9rem); font-weight:300; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums}
.numcell p{font-size:14px; color:var(--ink78); margin-top:12px; max-width:210px}
.numcell a{font-size:11.5px; color:var(--ink40)}
.orgline{margin-top:54px; font-size:13px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink40)}
.orgs{display:flex; flex-wrap:wrap; gap:10px 34px; margin-top:16px}
.orgs span{font-size:14.5px; font-weight:600; color:var(--ink40)}
/* money field */
.moneyf{background:linear-gradient(175deg,#2A313A,#1D2228); color:#fff; text-align:center; padding:140px 24px}
.moneyf .k{font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.45)}
.moneyf .eq{display:flex; align-items:center; justify-content:center; gap:clamp(18px,4vw,54px); flex-wrap:wrap; margin-top:44px}
.moneyf .val{font-size:clamp(4.2rem,10vw,8.2rem); font-weight:300; letter-spacing:-.025em; line-height:1; font-variant-numeric:tabular-nums}
.moneyf .val.out{color:var(--red2)}
.moneyf figcaption{font-size:14px; color:rgba(255,255,255,.55); max-width:230px; margin:16px auto 0}
.moneyf .arrow{font-size:clamp(1.8rem,3.4vw,3rem); color:rgba(255,255,255,.35); font-weight:300}
.moneyf .note{margin-top:44px; font-size:15.5px; color:rgba(255,255,255,.7)}
.moneyf .ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:36px}
/* closer */
.closer{background:#fff; text-align:center; padding:130px 24px 110px}
.closer h2{font-size:clamp(2rem,4.4vw,3.3rem); font-weight:600; letter-spacing:-.03em; line-height:1.1; max-width:22ch; margin:0 auto}
.closer .ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:44px}
.closer .pricenote{font-size:13.5px; color:var(--ink40); margin-top:14px}

/* ==========================================================================
   ABOUT — trust band, story beats, footprint
   ========================================================================== */
.belief{background:#fff; padding:130px 0}
.belief p{font-size:clamp(1.4rem,2.6vw,2rem); font-weight:600; letter-spacing:-.02em; line-height:1.5; max-width:820px}
.belief p .hl-red{color:var(--red)}
.ratings{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:56px; max-width:760px}
@media(max-width:700px){.ratings{grid-template-columns:repeat(2,1fr)}}
.rating .n{font-size:clamp(2.6rem,4vw,3.6rem); font-weight:300; line-height:1}
.rating small{display:block; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink40); margin-top:8px}
.rating .stars{color:var(--orange); font-size:12px; letter-spacing:2px}
.beats{margin-top:60px; border-top:1px solid var(--hair)}
.beat{display:grid; grid-template-columns:130px 1fr; gap:28px; padding:30px 0; border-bottom:1px solid var(--hair)}
@media(max-width:600px){.beat{grid-template-columns:70px 1fr; gap:16px}}
.beat .y{font-size:clamp(1.8rem,3vw,2.6rem); font-weight:300; letter-spacing:-.02em; line-height:1.1; color:var(--red)}
.beat p{font-size:15.5px; color:var(--ink78); max-width:560px; align-self:center}
.footprint{font-size:15px; color:var(--ink55); margin-top:44px}

/* ==========================================================================
   PRICING — plan cards
   ========================================================================== */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:64px; align-items:start}
@media(max-width:960px){.plans{grid-template-columns:1fr; max-width:520px; margin-left:auto; margin-right:auto}}
.plan{background:#fff; border-radius:26px; box-shadow:0 12px 44px rgba(29,34,40,.09); padding:38px 32px; position:relative; border-top:5px solid var(--planc,var(--ink))}
.plan.popular{box-shadow:0 24px 64px rgba(29,34,40,.14)}
.plan .pop{position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--mint); color:#0b4b3c;
  font-size:11px; font-weight:600; letter-spacing:.05em; padding:5px 16px; border-radius:99px; white-space:nowrap}
.plan h3{font-size:24px; font-weight:600; letter-spacing:-.02em}
.plan .tag{font-size:13.5px; color:var(--ink55); margin-top:6px; min-height:42px}
.plan .price{margin:22px 0 4px; display:flex; align-items:baseline; gap:8px}
.plan .price b{font-size:clamp(2.6rem,3.4vw,3.2rem); font-weight:300; letter-spacing:-.02em; line-height:1}
.plan .price span{font-size:13px; color:var(--ink55)}
.plan .incl{font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink40); margin:22px 0 4px}
.plan ul{list-style:none; margin-top:8px}
.plan li{position:relative; padding:8px 0 8px 26px; font-size:13.5px; color:var(--ink78); border-bottom:1px solid var(--hair); line-height:1.5}
.plan li:last-child{border-bottom:0}
.plan li::before{content:""; position:absolute; left:2px; top:14px; width:12px; height:7px;
  border-left:2px solid var(--planc,var(--mint)); border-bottom:2px solid var(--planc,var(--mint)); transform:rotate(-45deg)}
.plan li b{font-weight:600; color:var(--ink)}
.plan .pcta{display:flex; justify-content:center; margin-top:26px}
.plan .addons{margin-top:20px; font-size:12px; color:var(--ink55)}
.plan .addons b{display:block; font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink40); margin-bottom:6px}

/* footer */
footer{border-top:1px solid var(--hair); padding:48px 0 40px; background:#fff}
footer .col{display:flex; justify-content:space-between; gap:28px; flex-wrap:wrap; align-items:flex-start}
footer .fbrand img{height:26px; width:auto}
footer .fbrand p{font-size:12.5px; color:var(--ink40); margin-top:12px; max-width:280px}
.fcols{display:flex; gap:56px; flex-wrap:wrap}
.fcol b{display:block; font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink40); margin-bottom:12px}
.fcol a{display:block; font-size:13.5px; color:var(--ink55); text-decoration:none; padding:4px 0}
.fcol a:hover{color:var(--ink)}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .settle{opacity:1; transform:none; transition:none}
  .w{animation:none; transform:none}
  .track{animation:none}
  .scrollcue i{animation:none}
  .illume .inner{min-height:auto}
  .illume .stick{position:static; min-height:auto; padding:120px 0}
  .illume .w-lit{opacity:1 !important; transition:none}
  .cta:hover,.ghostw:hover,.ghostd:hover,.icard:hover{transform:none}
}

/* multi-page additions */
.icard,.numcell{scroll-margin-top:110px}
.nl>a.on{color:#fff}
nav.top.light .nl>a.on{color:var(--ink); font-weight:600}

/* detail pages */
.back{display:inline-block; font-size:13px; font-weight:500; color:rgba(255,255,255,.55); text-decoration:none; margin-bottom:26px; transition:color .2s}
.back:hover{color:#fff}
.blts{list-style:none; margin-top:12px; padding:0}
.blts li{position:relative; padding:7px 0 7px 22px; font-size:13px; color:var(--ink78); line-height:1.55}
.blts li::before{content:""; position:absolute; left:2px; top:13px; width:10px; height:6px;
  border-left:2px solid var(--mint); border-bottom:2px solid var(--mint); transform:rotate(-45deg)}
.ilabel{display:block; font-style:normal; font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink40); margin-bottom:6px}
.belief .body{font-size:16px; color:var(--ink55); max-width:640px; font-weight:400}
.qcard{background:#fff; border-radius:26px; box-shadow:0 12px 44px rgba(29,34,40,.09); padding:52px 56px; max-width:820px; margin:0}
@media(max-width:700px){.qcard{padding:32px 24px}}
.qcard .qmark{display:block; font-family:Georgia,serif; font-size:4rem; line-height:1; color:var(--red); opacity:.3; margin-bottom:6px}
.qcard blockquote{font-size:clamp(1.1rem,1.8vw,1.35rem); line-height:1.6; color:var(--ink); border:0; margin:0}
.qcard figcaption{margin-top:22px; font-size:14px; font-weight:600; color:var(--ink55)}
.faqs{margin-top:36px; max-width:820px}
.faq{border:1px solid var(--hair); border-radius:16px; padding:0; margin-bottom:12px; background:#fff; overflow:clip}
.faq summary{cursor:pointer; list-style:none; padding:20px 24px; font-size:15.5px; font-weight:600; color:var(--ink); position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-50%); font-size:20px; font-weight:300; color:var(--red)}
.faq[open] summary::after{content:"–"}
.faq p{padding:0 24px 20px; font-size:14.5px; color:var(--ink78); max-width:680px}
.closer .closesub{font-size:15.5px; color:var(--ink55); max-width:560px; margin:16px auto 0}
.icard b .newtag,.panel a b .newtag{white-space:nowrap}

/* gift-card fan in the Real rewards card — absolute, so it never grows the box */
.gcards{position:absolute; left:34px; bottom:-70px; width:320px; height:auto;
  transform:rotate(-5deg); filter:drop-shadow(0 20px 36px rgba(0,0,0,.5));
  transition:transform .35s var(--ease); pointer-events:none}
.card.dark:hover .gcards{transform:rotate(-2deg) translateY(-8px)}
@media(max-width:900px){.card.dark{min-height:520px}.gcards{width:290px; left:-20px; bottom:-48px}}
@media (prefers-reduced-motion: reduce){.card.dark:hover .gcards{transform:rotate(-4deg)}}

/* employee's day: real app composite, absolutely placed so the box never grows,
   cropped by the card frame */
.card.eday{min-height:640px}
.edayimg{position:absolute; left:50%; top:138px; transform:translateX(-50%);
  width:calc(100% + 40px); max-width:620px; height:auto;
  filter:drop-shadow(0 18px 40px rgba(29,34,40,.12))}
@media(max-width:900px){.card.eday{min-height:540px}.edayimg{top:150px; max-width:520px}}

/* solution detail v2 */
.dfield{padding-bottom:72px}
.dheroimg{max-width:760px; margin:52px auto -140px}
.dheroimg img{width:100%; height:auto; border-radius:20px; box-shadow:0 32px 72px rgba(0,0,0,.4)}
.dfield:has(.dheroimg){padding-bottom:0}
main:has(.dheroimg) .painband, main:has(.dheroimg) .chapter:first-of-type{padding-top:190px}
.painflex{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
@media(max-width:900px){.painflex{grid-template-columns:1fr}}
.painimg img{width:100%; height:auto; border-radius:22px}
.storyrows{display:flex; flex-direction:column; gap:clamp(56px,7vw,96px); margin-top:56px}
.storyrow{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center}
.storyrow.rev .srimg{order:2}
@media(max-width:900px){.storyrow{grid-template-columns:1fr}.storyrow.rev .srimg{order:0}}
.srimg img{width:100%; height:auto; border-radius:22px; box-shadow:0 18px 48px rgba(29,34,40,.10)}
.srtext h3{font-size:clamp(1.3rem,2.2vw,1.7rem); font-weight:600; letter-spacing:-.02em; margin-bottom:10px}
.srbody{font-size:15.5px; color:var(--ink78); margin-top:4px}
.stepnum{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:99px;
  background:var(--tint-red); color:var(--red); font-size:16px; font-weight:600; margin-bottom:14px}
.qflex{display:flex; gap:36px; align-items:center}
@media(max-width:700px){.qflex{flex-direction:column; align-items:flex-start}}
.qphoto{width:110px; height:110px; border-radius:24px; object-fit:cover; flex:none}

/* ==========================================================================
   interaction layer — detail pages feel touchable
   ========================================================================== */
/* hero entrance stagger (added by JS as .rise with --rd delays) */
.rise{opacity:0; transform:translateY(24px); animation:riseIn .7s cubic-bezier(.22,1,.36,1) forwards; animation-delay:var(--rd,0ms)}
@keyframes riseIn{to{opacity:1; transform:none}}

/* story rows: image and text arrive from opposite sides, per row */
.storyrow.settle{opacity:1; transform:none; transition:none}
.storyrow .srimg{opacity:0; transform:translateX(-44px) scale(.97); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1)}
.storyrow .srtext{opacity:0; transform:translateX(36px); transition:opacity .7s cubic-bezier(.22,1,.36,1) .08s, transform .7s cubic-bezier(.22,1,.36,1) .08s}
.storyrow.rev .srimg{transform:translateX(44px) scale(.97)}
.storyrow.rev .srtext{transform:translateX(-36px)}
.storyrow.in .srimg,.storyrow.in .srtext{opacity:1; transform:none}

/* bullets check themselves off */
.storyrow .blts li,.painband .blts li{opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .45s ease}
.storyrow.in .blts li,.painband.in .blts li{opacity:1; transform:none}
.storyrow.in .blts li:nth-child(1){transition-delay:.25s}
.storyrow.in .blts li:nth-child(2){transition-delay:.37s}
.storyrow.in .blts li:nth-child(3){transition-delay:.49s}
.storyrow.in .blts li:nth-child(4){transition-delay:.61s}
.storyrow.in .blts li:nth-child(5){transition-delay:.73s}
.blts li::before{transition:transform .3s cubic-bezier(.34,1.56,.64,1) .15s; transform:rotate(-45deg) scale(0)}
.storyrow.in .blts li::before,.painband.in .blts li::before,.icard .blts li::before{transform:rotate(-45deg) scale(1)}

/* product images: 3D tilt + sheen, cursor invited */
.tiltable{transform-style:preserve-3d; transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) scale(var(--ts,1));
  transition:transform .35s cubic-bezier(.2,.8,.2,1); will-change:transform; position:relative; overflow:clip; border-radius:22px; cursor:pointer}
.tiltable::after{content:""; position:absolute; inset:0; border-radius:22px; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.22) 50%, transparent 62%);
  transform:translateX(-130%); transition:transform .7s ease}
.tiltable:hover::after{transform:translateX(130%)}
.tiltable img{border-radius:22px}

/* scroll progress rail with clickable chapter dots */
.prail{position:fixed; left:22px; top:50%; transform:translateY(-50%); z-index:40; display:flex; flex-direction:column; align-items:center; gap:0}
@media(max-width:1180px){.prail{display:none}}
.prail .line{width:2px; flex:1; min-height:34px; background:rgba(29,34,40,.1); position:relative; overflow:hidden}
.prail .line i{position:absolute; top:0; left:0; right:0; height:calc(var(--p,0)*100%); background:var(--red); transition:height .2s linear}
.prail .pdot{width:12px; height:12px; border-radius:99px; border:2px solid rgba(29,34,40,.25); background:#fff; margin:4px 0; cursor:pointer; padding:0; transition:border-color .2s, background .2s, transform .2s; position:relative}
.prail .pdot:hover{transform:scale(1.35)}
.prail .pdot.on{border-color:var(--red); background:var(--red)}
.prail .pdot .tip{position:absolute; left:22px; top:50%; transform:translateY(-50%) translateX(-6px); white-space:nowrap;
  background:var(--ink); color:#fff; font-size:11.5px; font-weight:500; padding:5px 12px; border-radius:8px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s}
.prail .pdot:hover .tip,.prail .pdot:focus-visible .tip{opacity:1; transform:translateY(-50%) translateX(0)}

/* FAQ: animated open + rotating marker */
.faq summary::after{content:"+"; transition:transform .3s cubic-bezier(.22,1,.36,1)}
.faq[open] summary::after{content:"+"; transform:translateY(-50%) rotate(45deg) !important}
.faq p{animation:faqIn .35s cubic-bezier(.22,1,.36,1)}
@keyframes faqIn{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
.faq summary:hover{color:var(--red)}

/* magnetic primary CTA */
.cta{transform:translate(var(--mx,0px),var(--my,0px))}

/* pain band reveal */
.painband .settle{transition-delay:0ms}
.painimg.settle{transform:translateX(36px) scale(.98)}

/* reduced motion: everything lands complete */
@media (prefers-reduced-motion: reduce){
  .rise{animation:none; opacity:1; transform:none}
  .storyrow .srimg,.storyrow .srtext{opacity:1; transform:none; transition:none}
  .storyrow .blts li,.painband .blts li{opacity:1; transform:none; transition:none}
  .blts li::before{transform:rotate(-45deg) scale(1); transition:none}
  .tiltable{transform:none !important}
  .tiltable::after{display:none}
  .prail .line i{transition:none}
  .faq p{animation:none}
  .cta{transform:none !important}
}

/* apple-style solution chapters */
.bigstmt{max-width:20ch}
.secchap .secintro{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,72px); align-items:end; margin-bottom:44px}
@media(max-width:900px){.secchap .secintro{grid-template-columns:1fr; align-items:start; gap:18px; margin-bottom:30px}}
.secnum{display:inline-flex; align-items:center; justify-content:center; padding:6px 16px; border-radius:99px;
  font-size:14px; font-weight:600; letter-spacing:.05em; margin-bottom:18px}
.secstep{font-size:clamp(1.3rem,2.4vw,1.9rem) !important; max-width:26ch}
.blts-big li{font-size:15px; padding:10px 0 10px 28px}
.blts-big li::before{width:12px; height:7px; top:17px}
.applecard{background:#fff; border-radius:28px; padding:clamp(14px,2.4vw,28px); box-shadow:0 18px 56px rgba(29,34,40,.10)}
.applecard img{width:100%; height:auto; border-radius:18px; display:block}
.applecard.srimg{opacity:1; transform:none}

/* solution pages v4: apple color fields */
.sfield--red{background:linear-gradient(175deg,#C8404F 0%,#A93242 55%,#8E2938 100%)}
.sfield--teal{background:linear-gradient(175deg,#1F8A72 0%,#15705B 55%,#0E5647 100%)}
.sfield--amber{background:linear-gradient(175deg,#D97B33 0%,#BC6323 55%,#9A4E17 100%)}
.sfield .orbs{position:absolute; inset:0; pointer-events:none; overflow:clip}
.sfield .orb{position:absolute; border-radius:999px; background:rgba(255,255,255,.07)}
.sfield .o1{width:420px; height:420px; left:-120px; top:-140px; animation:drift 38s ease-in-out infinite alternate}
.sfield .o2{width:300px; height:300px; right:6%; top:8%; background:rgba(255,255,255,.05); animation:drift 46s ease-in-out infinite alternate-reverse}
.sfield .o3{width:560px; height:560px; right:-180px; bottom:-260px; background:rgba(0,0,0,.10); animation:drift 42s ease-in-out infinite alternate}
.pagelabel{font-size:clamp(1rem,1.6vw,1.25rem); font-weight:600; color:rgba(255,255,255,.75); margin-bottom:14px}
.sfield .back{color:rgba(255,255,255,.6)}
.chglyph{width:46px; height:46px; margin-bottom:18px}
.stmts{list-style:none; margin:26px 0 0; padding:0; max-width:620px}
.stmts li{padding:13px 0; border-bottom:1px solid rgba(29,34,40,.08); font-size:16.5px; font-weight:500; color:var(--ink78); line-height:1.55}
.stmts li:last-child{border-bottom:0}
.stmts li.lead{color:var(--acc,var(--red)); font-weight:600}
.bento{display:grid; grid-template-columns:1.45fr .55fr; gap:18px; margin-top:44px; align-items:stretch}
.bento.solo{grid-template-columns:1fr}
@media(max-width:900px){.bento{grid-template-columns:1fr}}
.bento .applecard{margin:0}
.capcard{background:linear-gradient(170deg,#23272E,#15181C); border-radius:28px; padding:28px; display:flex; align-items:flex-end}
.capcard p{color:rgba(255,255,255,.85); font-size:15px; font-weight:500; line-height:1.6; margin:0}
.qband{padding:110px 24px; color:#fff}
.qband--red{background:linear-gradient(175deg,#A93242,#8E2938)}
.qband--teal{background:linear-gradient(175deg,#15705B,#0E5647)}
.qband--amber{background:linear-gradient(175deg,#BC6323,#9A4E17)}
.qbphoto{width:84px; height:84px; border-radius:999px; object-fit:cover; margin:0 auto 26px; border:3px solid rgba(255,255,255,.35)}
.qband blockquote{font-size:clamp(1.3rem,2.6vw,1.9rem); font-weight:600; letter-spacing:-.02em; line-height:1.45; max-width:780px; margin:0 auto; border:0}
.qband .qwho{margin-top:22px; font-size:14px; color:rgba(255,255,255,.65)}
@media (prefers-reduced-motion: reduce){.sfield .orb{animation:none}}

/* v6: full-bleed hero background video under hue veil */
.vbg{position:relative; overflow:clip}
.bgvid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.veil{position:absolute; inset:0; z-index:0}
.sfield--red .veil{background:linear-gradient(180deg,rgba(200,64,79,.55) 0%,rgba(169,50,66,.72) 48%,rgba(94,22,32,.94) 100%)}
.sfield--teal .veil{background:linear-gradient(180deg,rgba(31,138,114,.55) 0%,rgba(21,112,91,.72) 48%,rgba(7,48,40,.94) 100%)}
.sfield--amber .veil{background:linear-gradient(180deg,rgba(217,123,51,.55) 0%,rgba(188,99,35,.72) 48%,rgba(84,42,10,.94) 100%)}
.vbg .back{position:absolute; top:108px; left:clamp(24px,4vw,48px); z-index:2}
.vbg .cta{background:#fff; color:#1D2228}
.vbg .cta:hover{background:#fff; color:#1D2228}
.vbg .ghostw{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.42);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.vbg .ghostw:hover{background:rgba(255,255,255,.2)}
.vbg .tracks{z-index:0}
.vbg .track{position:absolute}
.vbg .v1{width:340px; height:860px; left:5%; top:-240px; animation:drift 38s ease-in-out infinite alternate}
.vbg .v2{width:380px; height:920px; right:9%; top:-320px; animation:drift 46s ease-in-out infinite alternate-reverse}
@media(max-width:900px){.vbg .v2{right:-160px}}
.vwrap{position:relative; z-index:1; max-width:920px; margin:0 auto; padding:0 40px; text-align:center}
.vwrap .sub{margin-left:auto; margin-right:auto}
.vwrap .ctas{justify-content:center}
@media (prefers-reduced-motion: reduce){.bgvid{display:none}}

/* v5: hero videos + proof bands */
.vhero{padding-bottom:96px}
.vherogrid{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px);
  align-items:center; max-width:1200px; margin:0 auto; padding:0 40px; text-align:left}
.vherogrid h1{max-width:none}
.vherogrid .sub{margin-left:0}
.vherogrid .ctas{justify-content:flex-start}
@media(max-width:980px){.vherogrid{grid-template-columns:1fr; text-align:center}
  .vherogrid .ctas{justify-content:center}.vherogrid .sub{margin:26px auto 0}}
.herovid{border-radius:24px; overflow:clip; box-shadow:0 32px 72px rgba(0,0,0,.35); background:rgba(255,255,255,.06)}
.herovid video{display:block; width:100%; height:auto}
.proofband .bignum{font-size:clamp(4rem,9vw,7.2rem); font-weight:300; line-height:.95; font-variant-numeric:tabular-nums}
.prooflbl{font-size:16px; color:var(--ink78); max-width:460px; margin-top:14px}
.proofband .caption{margin-top:10px}
.calloutlbl{font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:18px}
@media (prefers-reduced-motion: reduce){.herovid video{display:none}.herovid::after{content:"Product preview video (motion disabled)"; display:block; padding:40px 20px; color:rgba(255,255,255,.6); font-size:13px; text-align:center}}