/* ───────────────────────────────────────────────────────────────
   Auromone experiential home.
   Cream base + dark hero + deep "theater" beats (Reveal · Proof · Reserve).
   Pulse: HERO(dark) · Tension(L) · Reveal(D) · How(L) · Measures(L)
          · Proof(D) · App(L) · Roadmap(L) · Reserve(D) · FAQ(L)
   Scope: body.xhome   (loaded after assets/site.css)
   ─────────────────────────────────────────────────────────────── */

/* PP Neue Montreal — brand typeface, used only for the footer wordmark */
@font-face{ font-family:'PP Neue Montreal'; src:url('fonts/PPNeueMontreal-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }

body.xhome{ background:var(--bg); color:var(--ink); }
/* brand wordmark in the footer uses the PP Neue Montreal brand typeface */
.xhome .foot-mark span{ font-family:'PP Neue Montreal','Schibsted Grotesk',sans-serif; font-weight:400; }
.xhome ::selection{ background:#FE3A48; color:#fff; }
.xhome .xpending{ display:none !important; }   /* sections still being designed */

/* shared dark-theater tokens */
.xhome{ --dink:#F4ECE9; --dmut:#B79A93; --dfaint:#8A6A66; --dline:rgba(255,255,255,0.10); --dline2:rgba(255,255,255,0.18); --dsurf:rgba(255,255,255,0.04); --pink:#FE7FA6; }

/* ════════════════════════════════════════════════════════════════
   NAV — transparent/light over the dark hero, flips to cream on scroll
   ════════════════════════════════════════════════════════════════ */
.xhome .nav{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:1px solid transparent; }
.xhome .nav-mark img{ filter:brightness(0) invert(1); transition:filter .3s; }
.xhome .nav-links{ color:rgba(244,236,233,0.76); }
.xhome .nav-links a:hover{ color:#fff; }
.xhome .nav-shop-btn{ color:rgba(244,236,233,0.76); }
.xhome .nav-shop:hover .nav-shop-btn, .xhome .nav-shop:focus-within .nav-shop-btn{ color:#fff; }
.xhome .nav-toggle{ color:#FCF8F1; }
.xhome .nav-cta{ background:var(--grad); color:#fff; text-shadow:0 1px 7px rgba(74,12,18,0.4); }

.xhome .nav.scrolled{ background:rgba(252,248,241,0.86); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom-color:var(--line); }
.xhome .nav.scrolled .nav-mark img{ filter:none; }
.xhome .nav.scrolled .nav-links{ color:var(--ink-soft); }
.xhome .nav.scrolled .nav-links a:hover{ color:var(--violet); }
.xhome .nav.scrolled .nav-shop-btn{ color:var(--ink-soft); }
.xhome .nav.scrolled .nav-toggle{ color:var(--ink); }
@media(max-width:920px){
  .xhome .nav.open{ background:rgba(252,248,241,0.98); }
  .xhome .nav.open .nav-mark img{ filter:none; }
  .xhome .nav.open .nav-links{ color:var(--ink-soft); }
  .xhome .nav.open .nav-toggle{ color:var(--ink); }
}

/* ════════════════════════════════════════════════════════════════
   §1 HERO — the live 24h cortisol instrument (dark)
   ════════════════════════════════════════════════════════════════ */
.xhome .xhero{ position:relative; min-height:100dvh; overflow:hidden; background:#0B0708; color:var(--dink); }
.xhome .xglow{ position:absolute; inset:0; z-index:0; background:radial-gradient(38% 38% at 50% 36%, rgba(254,92,149,0.17), transparent 66%); }
.xhome .xgrain{ position:absolute; inset:0; z-index:1; opacity:0.4; mix-blend-mode:soft-light; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,0.5) .5px, transparent .5px); background-size:3px 3px; }
.xhome .xscrim{ position:absolute; inset:0; z-index:4; pointer-events:none; background:linear-gradient(102deg, rgba(11,7,8,0.95) 0%, rgba(11,7,8,0.7) 23%, rgba(11,7,8,0.12) 46%, transparent 60%); }

.xhome .xscope{ position:absolute; left:0; right:0; bottom:0; height:clamp(330px,56vh,640px); z-index:2; pointer-events:none; }
.xhome .xscope svg{ width:100%; height:100%; }
.xhome .xscope .area{ opacity:0; animation:xfade 1.4s var(--ease) 1.5s forwards; }
.xhome .xscope .ln{ fill:none; stroke:url(#xln); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1; animation:xdraw 2.6s var(--ease) .6s forwards; filter:drop-shadow(0 0 9px rgba(254,92,149,0.45)); }
.xhome .xscope .glo{ fill:none; stroke:url(#xln); stroke-width:9; opacity:0.4; stroke-linecap:round; filter:blur(8px); stroke-dasharray:1; stroke-dashoffset:1; animation:xdraw 2.6s var(--ease) .6s forwards; }
.xhome .xscope .nowln{ stroke:rgba(254,124,166,0.5); stroke-width:1; vector-effect:non-scaling-stroke; stroke-dasharray:3 5; }
.xhome .xscope .nowdot{ fill:#FE5C95; filter:drop-shadow(0 0 12px rgba(254,92,149,1)); }
.xhome .xscope .nowring{ fill:none; stroke:#FE7FA6; stroke-width:1.5; vector-effect:non-scaling-stroke; transform-box:fill-box; transform-origin:center; animation:xping 2.8s var(--ease) 2.4s infinite; }
.xhome .xaxis{ position:absolute; left:0; right:0; bottom:22px; z-index:3; display:flex; justify-content:space-between; padding:0 clamp(20px,5vw,72px); font-family:'Schibsted Grotesk',sans-serif; font-size:11px; letter-spacing:0.12em; color:var(--dfaint); }
.xhome .xdevice{ position:absolute; left:50%; z-index:3; transform:translate(-50%,0); animation:xfloat 8s var(--ease) infinite; filter:drop-shadow(0 34px 64px rgba(0,0,0,0.6)); aspect-ratio:1; }

.xhome .xread{ position:absolute; left:50%; transform:translateX(-50%); text-align:center; z-index:5; }
.xhome .xread-in{ opacity:0; transform:translateY(16px); animation:xrise .9s var(--ease) 2.1s forwards; }
.xhome .xread .lab{ display:inline-flex; align-items:center; gap:7px; font-family:'Schibsted Grotesk',sans-serif; font-weight:600; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--pink); white-space:nowrap; }
.xhome .xread .lab .dot{ width:7px; height:7px; border-radius:50%; background:#FE5C95; box-shadow:0 0 0 0 rgba(254,92,149,0.7); animation:xbeat 2.4s var(--ease) infinite; }
.xhome .xread .v{ margin-top:4px; font-family:'Schibsted Grotesk',sans-serif; font-weight:800; font-size:clamp(40px,4.6vw,64px); line-height:0.84; letter-spacing:-0.04em; color:#FCF8F1; font-variant-numeric:tabular-nums; }
.xhome .xread .meta{ margin-top:4px; font-size:12px; color:var(--dmut); }
.xhome .xread .meta b{ color:var(--dink); font-weight:600; }

.xhome .xcopy{ position:absolute; left:clamp(20px,5vw,72px); bottom:clamp(56px,9vh,104px); max-width:430px; z-index:6; }
.xhome .xcopy > *{ opacity:0; transform:translateY(16px); animation:xrise .9s var(--ease) forwards; }
.xhome .xcopy .pillrow{ animation-delay:0.08s; display:inline-flex; margin-bottom:16px; }
.xhome .xcopy .pill{ display:inline-flex; align-items:center; gap:7px; padding:5px 12px; background:transparent; box-shadow:none; border:1px solid rgba(254,124,166,0.3); border-radius:999px; font-family:'Schibsted Grotesk',sans-serif; font-weight:600; font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:#FE9FB6; }
.xhome .xcopy h1{ animation-delay:0.2s; font-family:'Schibsted Grotesk',sans-serif; font-weight:500; font-size:clamp(38px,4.6vw,62px); line-height:0.98; letter-spacing:-0.025em; color:#FCF8F1; }
.xhome .xcopy h1 .g{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.xhome .xcopy .sub{ animation-delay:0.34s; margin-top:16px; font-size:clamp(15px,1.25vw,18px); line-height:1.58; color:var(--dmut); max-width:42ch; }
.xhome .xcopy .cta{ animation-delay:0.46s; margin-top:26px; display:flex; gap:13px; align-items:center; flex-wrap:wrap; }
.xhome .xcopy .xbtn{ display:inline-flex; align-items:center; gap:9px; height:52px; padding:0 28px; border-radius:999px; background:var(--grad); color:#fff; text-shadow:0 1px 7px rgba(74,12,18,0.4); font-family:'Schibsted Grotesk',sans-serif; font-weight:700; font-size:15px; transition:transform .15s, filter .2s; }
.xhome .xcopy .xbtn:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.xhome .xcopy .xbtn.ghost{ background:transparent; border:1px solid var(--dline2); color:var(--dink); }
.xhome .xcopy .xbtn.ghost:hover{ border-color:var(--pink); color:#fff; }
.xhome .xcopy .proof{ animation-delay:0.56s; margin-top:18px; font-size:12.5px; color:var(--dfaint); }
.xhome .xcopy .proof b{ color:var(--dmut); font-weight:600; }

@keyframes xrise{ to{ opacity:1; transform:none; } }
@keyframes xdraw{ to{ stroke-dashoffset:0; } }
@keyframes xfade{ to{ opacity:1; } }
@keyframes xbeat{ 0%{ box-shadow:0 0 0 0 rgba(254,92,149,0.6); } 70%{ box-shadow:0 0 0 7px rgba(254,92,149,0); } 100%{ box-shadow:0 0 0 0 rgba(254,92,149,0); } }
@keyframes xping{ 0%{ transform:scale(1); opacity:0.7; } 70%{ transform:scale(3); opacity:0; } 100%{ opacity:0; } }
@keyframes xfloat{ 0%,100%{ transform:translate(-50%,-6px); } 50%{ transform:translate(-50%,8px); } }

/* ── stats banner (under the hero): icons beside metrics, accuracy note below ── */
.xhome .xbanner{ background:radial-gradient(85% 130% at 50% 0%, rgba(254,92,149,0.15), rgba(254,92,149,0.04) 55%, var(--bg) 100%); border-bottom:1px solid var(--line); padding:clamp(22px,2.8vw,36px) var(--gutter); }
.xhome .xbanner-stats{ list-style:none; max-width:var(--measure); margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0; }
.xhome .xbanner-stats li{ flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:14px; padding:8px clamp(16px,2.4vw,38px); }
.xhome .xbanner-stats li + li{ border-left:1px solid var(--line); }
.xhome .xbanner-stats .ic{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center; background:rgba(254,58,72,0.10); color:var(--violet); flex:none; }
.xhome .xbanner-stats .ic svg{ width:25px; height:25px; }
.xhome .xbanner-stats .txt{ display:flex; flex-direction:column; line-height:1.05; }
.xhome .xbanner-stats b{ font-family:'Schibsted Grotesk',sans-serif; font-weight:800; font-size:clamp(32px,3.4vw,46px); letter-spacing:-0.025em; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.xhome .xbanner-stats .lab{ margin-top:4px; font-family:'Schibsted Grotesk',sans-serif; font-weight:600; font-size:14.5px; color:var(--ink-soft); }
.xhome .xbanner-note{ text-align:center; margin-top:clamp(26px,3vw,40px); font-family:'Schibsted Grotesk',sans-serif; font-size:13.5px; letter-spacing:0.01em; color:var(--ink-mute); }
.xhome .xbanner-note b{ color:var(--ink-soft); font-weight:600; }
@media(max-width:760px){
  .xhome .xbanner-stats{ flex-direction:column; align-items:stretch; max-width:320px; }
  .xhome .xbanner-stats li{ justify-content:flex-start; padding:18px 4px; }
  .xhome .xbanner-stats li + li{ border-left:0; border-top:1px solid var(--line); }
}

/* ════════════════════════════════════════════════════════════════
   SECTION SYSTEM
   ════════════════════════════════════════════════════════════════ */
.xhome .xsec{ position:relative; padding:clamp(80px,12vh,150px) clamp(20px,5vw,72px); }
/* tighten the How → Difference transition (two cream sections in a row) */
.xhome .xhow{ padding-bottom:clamp(44px,6vw,72px); }
.xhome .xmeasure{ padding-top:clamp(44px,6vw,72px); }
.xhome .xwrap{ max-width:1120px; margin:0 auto; }
.xhome .xsec-head{ max-width:820px; }
.xhome .xeyebrow{ display:inline-flex; align-items:center; gap:11px; font-family:'Schibsted Grotesk',sans-serif; font-weight:600; font-size:12px; letter-spacing:0.17em; text-transform:uppercase; color:var(--violet); margin-bottom:20px; }
.xhome .xeyebrow::before{ content:''; width:26px; height:2px; background:var(--grad); }
.xhome .xdisplay{ font-family:'Schibsted Grotesk',sans-serif; font-weight:500; letter-spacing:-0.022em; line-height:1.04; font-size:clamp(34px,5vw,62px); color:var(--ink); text-wrap:balance; }
.xhome .xdisplay .g, .xhome .xblind-close .g{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.xhome .xlede{ margin-top:22px; font-size:clamp(17px,1.45vw,21px); line-height:1.6; color:var(--ink-soft); max-width:60ch; }
.xhome .xpull{ font-family:'Schibsted Grotesk',sans-serif; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }

/* deep theater */
.xhome .xtheater{ background:radial-gradient(120% 90% at 50% -10%, #4a1722 0%, #2A1010 46%, #1c0c0c 100%); color:var(--dink); }
.xhome .xtheater .xeyebrow{ color:var(--pink); }
.xhome .xtheater .xdisplay{ color:#FCF8F1; }
.xhome .xtheater .xlede{ color:rgba(244,233,226,0.82); }

/* reveal on scroll */
.xhome .xrise{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.xhome .xrise.in{ opacity:1; transform:none; }

/* ════════════════════════════════════════════════════════════════
   §2 THE BLIND SPOT (cream) — felt cortisol moments no device can see
   ════════════════════════════════════════════════════════════════ */
.xhome .xblind{ border-bottom:1px solid var(--line); }
.xhome .xblind-head{ max-width:940px; }
.xhome .xblind-head .xdisplay{ font-size:clamp(33px,4.4vw,56px); text-wrap:balance; }
.xhome .xblind-head .xlede{ margin-top:22px; max-width:54ch; }
.xhome .xblind-grid{ list-style:none; margin:clamp(44px,5.5vw,72px) 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,32px); }
.xhome .xblind-card{ padding:clamp(26px,2.6vw,34px); border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:var(--sh-sm); transition:transform .2s var(--ease), box-shadow .25s var(--ease); }
.xhome .xblind-card:hover{ transform:translateY(-3px); box-shadow:var(--sh); }
.xhome .xblind-card .ic{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:rgba(254,58,72,0.10); color:var(--violet); }
.xhome .xblind-card .ic svg{ width:26px; height:26px; }
.xhome .xblind-card h3{ margin-top:22px; font-family:'Schibsted Grotesk',sans-serif; font-weight:600; font-size:clamp(18px,1.5vw,21px); letter-spacing:-0.01em; color:var(--ink); }
.xhome .xblind-card p{ margin-top:9px; font-size:15px; line-height:1.56; color:var(--ink-soft); }
.xhome .xblind-close{ margin:clamp(40px,4.5vw,60px) auto 0; max-width:660px; text-align:center; font-family:'Schibsted Grotesk',sans-serif; font-weight:500; font-size:clamp(21px,2.4vw,31px); line-height:1.3; letter-spacing:-0.015em; color:var(--ink); text-wrap:balance; }
@media(max-width:780px){ .xhome .xblind-grid{ grid-template-columns:1fr; } }

/* ════════════════════════════════════════════════════════════════
   §3 REVEAL (theater) — "Watch a day appear": full-day curve drawn
   ════════════════════════════════════════════════════════════════ */
.xhome .xreveal .xsec-head{ max-width:none; }
.xhome .xreveal .quote{ margin-top:18px; font-family:'Schibsted Grotesk',sans-serif; font-weight:500; font-size:clamp(15px,1.2vw,17px); color:var(--pink); }
.xhome .xreveal-head{ margin-bottom:clamp(28px,4vw,46px); }
.xhome .xreveal-top{ display:grid; grid-template-columns:1.02fr 0.98fr; gap:clamp(28px,4vw,64px); align-items:center; }
.xhome .xreveal-points{ list-style:none; margin-top:24px; display:grid; gap:12px; max-width:52ch; }
.xhome .xreveal-points li{ position:relative; padding-left:28px; font-size:14.5px; line-height:1.5; color:rgba(244,233,226,0.86); }
.xhome .xreveal-points li::before{ content:''; position:absolute; left:0; top:6px; width:13px; height:13px; border-radius:50%; background:var(--grad); box-shadow:0 0 8px rgba(254,92,149,0.6); }
.xhome .xlink-btn{ display:inline-flex; align-items:center; gap:9px; margin-top:28px; height:50px; padding:0 26px; border-radius:999px; background:var(--grad); color:#fff; text-shadow:0 1px 7px rgba(74,12,18,0.4); font-family:'Schibsted Grotesk',sans-serif; font-weight:700; font-size:15px; transition:transform .15s, filter .2s; }
.xhome .xlink-btn:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.xhome .xreveal-dev-hero{ width:100%; aspect-ratio:1.15; max-height:460px; filter:drop-shadow(0 44px 84px rgba(0,0,0,0.55)); }
.xhome .xreveal-stage{ position:relative; margin-top:clamp(4px,1.2vw,18px); height:clamp(360px,46vw,560px); }
.xhome .xreveal-stage svg{ width:100%; height:100%; overflow:visible; }
.xhome .xreveal .area{ opacity:0; transition:opacity 1.2s var(--ease) .9s; }
.xhome .xreveal.in .area{ opacity:1; }
.xhome .xreveal .glo{ stroke-dasharray:1; stroke-dashoffset:1; }
.xhome .xreveal.in .glo{ animation:xdraw 2.4s var(--ease) .2s forwards; }
.xhome .xreveal .ln{ fill:none; stroke:url(#rln); stroke-width:3.6; stroke-linecap:round; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 13px rgba(254,127,166,0.7)); opacity:0; transition:opacity 1s var(--ease) .3s; }
.xhome .xreveal.in .ln{ opacity:1; }
.xhome .xreveal .glo{ fill:none; stroke:url(#rln); stroke-width:11; opacity:0.45; stroke-linecap:round; filter:blur(9px); }
.xhome .xreveal .gdot{ fill:#FE5C95; filter:drop-shadow(0 0 10px rgba(254,92,149,0.95)); }
.xhome .xreveal .lab{ position:absolute; transform:translate(-50%,-50%); text-align:center; opacity:0; transition:opacity .6s var(--ease); }
.xhome .xreveal.in .lab{ opacity:1; }
.xhome .xreveal .lab .t{ font-family:'Schibsted Grotesk',sans-serif; font-weight:700; font-size:13px; color:#FCF8F1; }
.xhome .xreveal .lab .s{ display:block; margin-top:3px; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--pink); }
.xhome .xreveal .xraxis{ position:absolute; left:0; right:0; bottom:-30px; display:flex; justify-content:space-between; font-family:'Schibsted Grotesk',sans-serif; font-size:11px; letter-spacing:0.1em; color:var(--dfaint); }
.xhome .xreveal-dev{ position:absolute; right:0; top:-72px; width:clamp(96px,11vw,140px); aspect-ratio:1; opacity:0.95; }

/* §3 range band + in/out-of-range data points */
.xhome .xreveal .band{ opacity:0; transition:opacity 1s var(--ease) .5s; }
.xhome .xreveal.in .band{ opacity:1; }
.xhome .xreveal .bound{ fill:none; stroke:rgba(255,255,255,0.16); stroke-width:1; vector-effect:non-scaling-stroke; stroke-dasharray:4 5; opacity:0; transition:opacity .8s var(--ease) .6s; }
.xhome .xreveal.in .bound{ opacity:1; }
.xhome .xreveal #rev-dots circle, .xhome .xreveal #rev-glows circle{ opacity:0; transition:opacity .5s var(--ease) 1.9s; }
.xhome .xreveal.in #rev-dots circle{ opacity:1; }
.xhome .xreveal.in #rev-glows circle{ opacity:0.55; }
.xhome .xreveal.in #rev-glows circle.pred{ opacity:0.28; }
.xhome .xreveal .dot-in{ fill:#FE9FB6; }
.xhome .xreveal .dot-out{ fill:#FCF8F1; stroke:#FE3A48; stroke-width:2.5; vector-effect:non-scaling-stroke; }
.xhome .xreveal .dot-glow{ fill:#FE3A48; opacity:0.55; filter:blur(5px); }
.xhome .xreveal .rlab{ position:absolute; transform:translate(-50%,-50%); text-align:center; opacity:0; transition:opacity .6s var(--ease) 1.5s; }
.xhome .xreveal.in .rlab{ opacity:1; }
.xhome .xreveal .rlab.range{ font-family:'Schibsted Grotesk',sans-serif; font-weight:600; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(254,159,182,0.9); white-space:nowrap; }
.xhome .xreveal .rlab.out .t{ font-family:'Schibsted Grotesk',sans-serif; font-weight:700; font-size:13px; color:#FCF8F1; white-space:nowrap; }
.xhome .xreveal .rlab.out .s{ display:block; margin-top:3px; font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; color:#FE7FA6; white-space:nowrap; }
/* §3 prediction: dotted line + hollow estimate dot + "predicted" flags */
.xhome .xreveal .ln-pred{ fill:none; stroke:url(#rln); stroke-width:3; stroke-linecap:round; stroke-dasharray:2.5 11; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 7px rgba(254,92,149,0.3)); opacity:0; transition:opacity .9s var(--ease) 1.7s; }
.xhome .xreveal.in .ln-pred{ opacity:0.9; }
.xhome .xreveal .split{ stroke:rgba(255,255,255,0.16); stroke-width:1; stroke-dasharray:2 6; vector-effect:non-scaling-stroke; opacity:0; transition:opacity .8s var(--ease) 1.6s; }
.xhome .xreveal.in .split{ opacity:1; }
.xhome .xreveal .dot-pred{ fill:#1c0c0c; stroke:#FE9FB6; stroke-width:2.5; stroke-dasharray:3.4 3.4; vector-effect:non-scaling-stroke; }
.xhome .xreveal .dot-glow.pred{ fill:#FE7FA6; opacity:0.28; }
.xhome .xreveal .rlab .tag{ display:inline-block; margin-bottom:6px; font-family:'Schibsted Grotesk',sans-serif; font-weight:600; font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:#FE9FB6; padding:2px 9px; border:1px dashed rgba(254,159,182,0.55); border-radius:999px; }
.xhome .xreveal .rlab.pflag{ font-family:'Schibsted Grotesk',sans-serif; font-weight:600; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:#FE9FB6; padding:5px 12px; border:1px dashed rgba(254,159,182,0.5); border-radius:999px; white-space:nowrap; background:rgba(28,12,12,0.35); }
@media(max-width:920px){
  .xhome .xreveal-top{ grid-template-columns:1fr; }
  .xhome .xreveal-dev-hero{ order:-1; max-height:280px; }
  .xhome .xreveal .rlab.out .s{ display:none; }
  .xhome .xreveal .rlab.pflag{ display:none; }
}

/* ════════════════════════════════════════════════════════════════
   §4 HOW IT WORKS (cream) — three steps + exploded device anatomy
   ════════════════════════════════════════════════════════════════ */
.xhome .xhow-steps3{ margin-top:clamp(44px,5vw,68px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3.5vw,56px); }
.xhome .xstep3{ position:relative; }
.xhome .xstep3 .num{ display:block; font-family:'Schibsted Grotesk',sans-serif; font-weight:800; font-size:clamp(46px,5.4vw,76px); line-height:0.9; letter-spacing:-0.04em; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.xhome .xstep3 .ic{ display:grid; place-items:center; width:46px; height:46px; border-radius:13px; background:var(--surface); border:1px solid var(--line); color:var(--violet); margin:22px 0 18px; }
.xhome .xstep3 .ic svg{ width:23px; height:23px; }
.xhome .xstep3 h3{ font-family:'Schibsted Grotesk',sans-serif; font-weight:600; font-size:21px; color:var(--ink); margin-bottom:9px; letter-spacing:-0.01em; }
.xhome .xstep3 p{ font-size:14.5px; line-height:1.6; color:var(--ink-soft); max-width:34ch; }
.xhome .xhow-foot{ margin-top:clamp(38px,4.5vw,56px); padding-top:24px; border-top:1px solid var(--line); font-size:14px; color:var(--ink-mute); }
.xhome .xhow-foot a{ color:var(--violet); font-weight:600; white-space:nowrap; }
.xhome .xhow-foot a:hover{ text-decoration:underline; }
@media(max-width:760px){ .xhome .xhow-steps3{ grid-template-columns:1fr; gap:0; } .xhome .xstep3{ padding:24px 0; } .xhome .xstep3:first-child{ padding-top:0; border-top:0; } }

/* ════════════════════════════════════════════════════════════════
   §5 MEASURES, NOT GUESSES (cream) — vivid curve vs grey proxy
   ════════════════════════════════════════════════════════════════ */
.xhome .xmeasure-grid{ margin-top:clamp(40px,5vw,64px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); align-items:center; }
.xhome .xmeasure-grid > div:first-child{ order:2; }
.xhome .xmeasure-grid .xvs{ order:1; }
.xhome .xmeasure-copy .mbody{ margin-top:22px; }
.xhome .xmeasure .mbody{ font-size:clamp(16px,1.3vw,19px); line-height:1.64; color:var(--ink-soft); max-width:46ch; }
.xhome .xmeasure .link{ display:inline-flex; align-items:center; gap:7px; margin-top:26px; font-family:'Schibsted Grotesk',sans-serif; font-weight:600; font-size:15px; color:var(--violet); }
.xhome .xmeasure .link:hover{ text-decoration:underline; }
/* side-by-side contrast card (no graph) */
.xhome .xvs{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:24px; overflow:hidden; background:#fff; box-shadow:var(--sh); }
.xhome .xvs-col{ padding:clamp(24px,2.6vw,34px); }
.xhome .xvs-col.muted{ background:var(--bg-soft); border-right:1px solid var(--line); }
.xhome .xvs-col.curve{ position:relative; }
.xhome .xvs-col.curve::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad); }
.xhome .xvs-col h3{ font-family:'Schibsted Grotesk',sans-serif; font-weight:600; font-size:17px; letter-spacing:-0.01em; color:var(--ink); }
.xhome .xvs-col.muted h3{ color:var(--ink-mute); }
.xhome .xvs-sub{ display:block; margin-top:5px; margin-bottom:20px; font-family:'Schibsted Grotesk',sans-serif; font-size:11.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-faint); }
.xhome .xvs-col ul{ list-style:none; display:grid; gap:14px; }
.xhome .xvs-col li{ position:relative; padding-left:28px; font-size:14px; line-height:1.45; color:var(--ink-soft); }
.xhome .xvs-col li::before{ position:absolute; left:0; top:0; font-family:'Schibsted Grotesk',sans-serif; font-weight:700; font-size:15px; }
.xhome .xvs-col.muted li::before{ content:'\00d7'; color:var(--ink-faint); }
.xhome .xvs-col.curve li{ color:var(--ink); }
.xhome .xvs-col.curve li::before{ content:'\2713'; color:var(--violet); }
@media(max-width:560px){ .xhome .xvs{ grid-template-columns:1fr; } .xhome .xvs-col.muted{ border-right:0; border-bottom:1px solid var(--line); } }

/* ════════════════════════════════════════════════════════════════
   §6 THE PROOF (theater) — lab-grade stats, count-up
   ════════════════════════════════════════════════════════════════ */
.xhome .xproof .xstat-row{ margin-top:clamp(44px,5vw,68px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,46px); max-width:860px; }
.xhome .xproof .xstat .k{ font-family:'Schibsted Grotesk',sans-serif; font-weight:800; font-size:clamp(38px,4.6vw,62px); letter-spacing:-0.03em; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.xhome .xproof .xstat .k .u{ font-size:0.32em; -webkit-text-fill-color:var(--dmut); letter-spacing:0; }
.xhome .xproof .xstat .l{ margin-top:14px; font-size:13.5px; line-height:1.5; color:rgba(244,233,226,0.76); }
.xhome .xproof .pbody{ margin-top:clamp(34px,4vw,52px); max-width:64ch; color:rgba(244,233,226,0.82); font-size:clamp(15px,1.2vw,17px); line-height:1.66; }
.xhome .xproof .link{ display:inline-flex; align-items:center; gap:7px; margin-top:20px; font-family:'Schibsted Grotesk',sans-serif; font-weight:600; font-size:15px; color:var(--pink); }
.xhome .xproof .link:hover{ text-decoration:underline; }
@media(max-width:920px){
  .xhome .xmeasure-grid{ grid-template-columns:1fr; }
  .xhome .xmeasure-grid > div:first-child{ order:0; }
  .xhome .xmeasure-grid .xvs{ order:0; }
  .xhome .xproof .xstat-row{ grid-template-columns:1fr; row-gap:28px; }
}

/* ════════════════════════════════════════════════════════════════
   §7 YOUR DAY, IN THE APP (cream) — two phone screens + annotations
   ════════════════════════════════════════════════════════════════ */
.xhome .xapp{ background:radial-gradient(60% 70% at 82% 26%, rgba(254,92,149,0.07), transparent 70%); }
.xhome .xapp-grid{ margin-top:clamp(40px,5vw,64px); display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(30px,5vw,64px); align-items:center; }
.xhome .xapp-grid > div:first-child{ order:2; }
.xhome .xapp-grid .xapp-stage{ order:1; }
.xhome .xapp-copy .mbody{ margin-top:22px; font-size:clamp(16px,1.3vw,19px); line-height:1.64; color:var(--ink-soft); max-width:44ch; }
.xhome .xapp-copy .xapp-list{ margin-top:26px; }
.xhome .xapp-os{ margin-top:24px; font-family:'Schibsted Grotesk',sans-serif; font-weight:600; font-size:13px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-mute); }
.xhome .xapp-list{ list-style:none; display:grid; gap:16px; margin-top:6px; }
.xhome .xapp-list li{ position:relative; padding-left:28px; font-size:15.5px; line-height:1.55; color:var(--ink-soft); }
.xhome .xapp-list li b{ color:var(--ink); font-weight:600; }
.xhome .xapp-list li::before{ content:''; position:absolute; left:0; top:7px; width:11px; height:11px; border-radius:50%; background:var(--grad); box-shadow:0 0 10px rgba(254,92,149,0.5); }
.xhome .xapp-stage{ position:relative; display:flex; justify-content:center; align-items:flex-start; gap:clamp(12px,2vw,24px); }
.xhome .xapp-stage img{ width:clamp(150px,20vw,228px); height:auto; filter:drop-shadow(0 34px 60px rgba(67,22,22,0.34)); }
.xhome .xapp-stage img.back{ margin-top:46px; }
.xhome .xapp-chip{ position:absolute; display:inline-flex; align-items:center; gap:7px; padding:8px 13px; background:#fff; border:1px solid var(--line); border-radius:999px; box-shadow:var(--sh-sm); font-family:'Schibsted Grotesk',sans-serif; font-weight:600; font-size:12px; color:var(--ink); }
.xhome .xapp-chip .d{ width:7px; height:7px; border-radius:50%; background:var(--accent); }
.xhome .xapp-chip.c1{ top:8%; left:-4%; }
.xhome .xapp-chip.c2{ bottom:14%; right:-2%; }

/* ════════════════════════════════════════════════════════════════
   §8 ONE BAND, EVERY HORMONE (cream) — roadmap timeline
   ════════════════════════════════════════════════════════════════ */
.xhome .xroadmap2{ position:relative; margin-top:clamp(48px,5.5vw,76px); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,28px); }
.xhome .xroadmap2::before{ content:''; position:absolute; top:34px; left:12.5%; right:12.5%; height:2px; background:var(--line); z-index:1; }
.xhome .xhormone{ position:relative; text-align:center; display:flex; flex-direction:column; align-items:center; }
.xhome .xhormone > *{ position:relative; z-index:2; }
/* highlight the shipping step as a card; the timeline line still runs through */
.xhome .xhormone.now::before{ content:''; position:absolute; inset:-26px -12px -30px; background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--sh); z-index:0; }
.xhome .xhormone .tok{ width:68px; height:68px; border-radius:50%; display:grid; place-items:center; background:#fff; border:2px solid var(--line-2); color:var(--ink-mute); }
.xhome .xhormone .tok svg{ width:32px; height:32px; }
.xhome .xhormone.now .tok{ background:var(--grad); border-color:transparent; color:#fff; }
.xhome .xhormone h3{ margin-top:20px; font-family:'Schibsted Grotesk',sans-serif; font-weight:600; font-size:20px; color:var(--ink); letter-spacing:-0.01em; }
.xhome .xhormone .tag{ display:inline-block; margin-top:8px; font-family:'Schibsted Grotesk',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint); }
.xhome .xhormone.now .tag{ color:var(--violet); }
.xhome .xhormone .desc{ margin-top:12px; max-width:220px; font-family:'Schibsted Grotesk',sans-serif; font-size:13.5px; line-height:1.5; color:var(--ink-soft); }
.xhome .xhormone .hlink{ display:inline-flex; align-items:center; gap:8px; margin-top:28px; height:44px; padding:0 20px; border-radius:999px; background:var(--grad); color:#fff; text-shadow:0 1px 7px rgba(74,12,18,0.4); font-family:'Schibsted Grotesk',sans-serif; font-weight:700; font-size:13.5px; box-shadow:0 12px 26px -12px rgba(254,58,72,0.6); transition:transform .15s, filter .2s; }
.xhome .xhormone .hlink svg{ width:15px; height:15px; }
.xhome .xhormone .hlink:hover{ transform:translateY(-2px); filter:brightness(1.05); }
@media(max-width:920px){
  .xhome .xapp-grid{ grid-template-columns:1fr; }
  .xhome .xapp-stage{ order:-1; }
  .xhome .xroadmap2{ grid-template-columns:repeat(2,1fr); row-gap:42px; }
  .xhome .xroadmap2::before{ display:none; }
}

/* ════════════════════════════════════════════════════════════════
   §9 RESERVE (theater) — reused v8 form, dark
   ════════════════════════════════════════════════════════════════ */
.xhome .reserve{ background:radial-gradient(120% 90% at 50% -10%, #4a1722 0%, #2A1010 46%, #1c0c0c 100%); padding:clamp(80px,12vh,150px) clamp(20px,5vw,72px); }
.xhome .reserve-card{ max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(28px,4vw,64px); align-items:center; border:1px solid var(--dline); border-radius:28px; background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)); padding:clamp(28px,3.6vw,52px); position:relative; overflow:hidden; }
.xhome .reserve-left .eyebrow{ color:var(--pink); }
.xhome .reserve-left .h-1{ color:#FCF8F1; font-weight:500; letter-spacing:-0.02em; }
.xhome .reserve-left .lede{ color:var(--dmut); }
.xhome .price-row{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 0; border-top:1px solid var(--dline); }
.xhome .price-row:first-of-type{ margin-top:8px; }
.xhome .price-row .pl-l b{ display:block; font-family:'Schibsted Grotesk',sans-serif; font-weight:700; font-size:15px; color:#FCF8F1; }
.xhome .price-row .pl-l span{ font-size:12.5px; color:var(--dmut); }
.xhome .price-row .pl-v{ text-align:right; }
.xhome .price-row .pl-v b{ font-family:'Schibsted Grotesk',sans-serif; font-weight:800; font-size:18px; color:#FCF8F1; }
.xhome .price-row .pl-v .grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.xhome .price-row .pl-v span{ display:block; font-size:12px; color:var(--dfaint); }
.xhome .price-row .pl-v .strike{ text-decoration:line-through; }
.xhome .scarcity{ display:inline-flex; align-items:center; gap:9px; margin-top:20px; font-size:13px; color:var(--dmut); }
.xhome .scarcity b{ color:var(--pink); }
.xhome .scarcity .d{ width:8px; height:8px; border-radius:50%; background:#FE3A48; box-shadow:0 0 0 0 rgba(255,68,58,0.6); animation:xbeat 2s var(--ease) infinite; }
.xhome .reserve-form{ display:flex; gap:10px; margin-top:24px; flex-wrap:wrap; background:transparent; border:0; padding:0; box-shadow:none; }
.xhome .reserve-form:focus-within{ box-shadow:none; }
.xhome .reserve-form input[type=email]{ flex:1; min-width:210px; height:54px; padding:0 18px; border-radius:999px; border:1px solid var(--dline2); background:rgba(0,0,0,0.3); color:#fff; font-size:15px; font-family:inherit; }
.xhome .reserve-form input[type=email]::placeholder{ color:var(--dfaint); }
.xhome .reserve-form input[type=email]:focus{ outline:none; border-color:var(--pink); }
.xhome .reserve-form button{ height:54px; padding:0 26px; border:0; border-radius:999px; background:var(--grad); color:#fff; text-shadow:0 1px 7px rgba(74,12,18,0.4); font-family:'Schibsted Grotesk',sans-serif; font-weight:700; font-size:15px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:transform .15s, filter .2s; }
.xhome .reserve-form button:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.xhome .reserve-trust{ margin-top:14px; font-size:13px; color:var(--dmut); }
.xhome .price-note{ margin-top:8px; font-size:11.5px; color:var(--dfaint); }
.xhome .reserve-stage{ position:relative; min-height:300px; display:grid; place-items:center; }
.xhome .reserve-stage .ring{ position:absolute; width:78%; aspect-ratio:1; border-radius:50%; border:1px solid var(--dline); box-shadow:0 0 120px -20px rgba(254,92,149,0.4) inset; }
.xhome .reserve-3d{ position:relative; z-index:2; width:clamp(220px,24vw,340px); aspect-ratio:1; }
.xhome .reserve-phone{ display:none; }

/* ════════════════════════════════════════════════════════════════
   §10 FAQ (cream)
   ════════════════════════════════════════════════════════════════ */
.xhome .xsec .faq-list{ margin-top:clamp(34px,4vw,52px); max-width:840px; }
.xhome .faq-item .ans{ max-width:none; }

/* ── responsive ── */
@media(max-width:920px){
  .xhome .reserve-card{ grid-template-columns:1fr; }
  .xhome .reserve-stage{ order:-1; min-height:220px; }

  /* HERO mobile: full viewport height, full-bleed graph, bigger device, text below */
  .xhome .xhero{ display:flex; flex-direction:column; justify-content:flex-start; gap:0; min-height:100dvh; padding:74px 0 22px; }
  .xhome .xread{ order:1; position:relative; left:auto; transform:none; margin:0 auto; padding:0 16px; }
  .xhome .xread .v{ font-size:clamp(42px,13vw,58px); }
  .xhome .xdevice{ order:2; position:relative; left:auto; top:auto; width:min(64vw,300px); transform:none; animation:none; margin:2px auto 0; }
  .xhome .xscope{ order:3; position:relative; left:auto; right:auto; flex:1 1 auto; min-height:130px; height:auto; width:100%; margin:0; bottom:auto; }
  .xhome .xaxis{ order:4; position:relative; bottom:auto; margin-top:6px; padding:0 16px; font-size:10px; }
  .xhome .xcopy{ order:5; position:relative; left:auto; bottom:auto; max-width:none; margin-top:16px; padding:0 clamp(16px,5vw,24px); }
  .xhome .xcopy h1{ font-size:28px; line-height:1.02; }
  .xhome .xcopy .pillrow{ margin-bottom:11px; }
  .xhome .xcopy .sub{ font-size:13.5px; margin-top:9px; line-height:1.5; }
  .xhome .xcopy .cta{ margin-top:14px; gap:10px; }
  .xhome .xcopy .xbtn{ height:48px; padding:0 19px; font-size:14px; }
  .xhome .xcopy .proof{ margin-top:9px; font-size:11.5px; }
  .xhome .xscrim{ display:none; }
}

@media(prefers-reduced-motion:reduce){
  .xhome .xread-in, .xhome .xcopy > *, .xhome .xrise{ opacity:1 !important; transform:none !important; }
  .xhome .xscope .ln, .xhome .xscope .glo,
  .xhome .xreveal .ln, .xhome .xreveal .glo{ stroke-dashoffset:0 !important; animation:none !important; }
  .xhome .xscope .area, .xhome .xreveal .area, .xhome .xreveal .lab{ opacity:1 !important; }
  .xhome .xreveal .ln-pred, .xhome .xreveal .split{ opacity:1 !important; transition:none !important; }
  .xhome .xdevice{ transform:translate(-50%,0) !important; animation:none !important; }
}