/* Xeyo landing. Nordic stone ground, warm black panels lit orange from behind, frosted glass for data. */
@font-face{font-family:"Hanken Grotesk";src:url("/fonts/hanken-grotesk.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Fallback";src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans"),local("Arimo");size-adjust:97%;ascent-override:102%;descent-override:30%;line-gap-override:0%}

:root{
 --font:"Hanken Grotesk","Hanken Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
 /* Ground: Copenhagen stone, not paper. */
 --stone:#ebe7e1;--stone-2:#e2ddd5;--card:#f6f4f0;
 --ink:#141210;--ink-2:#57524c;--line:rgb(20 18 16 / .1);
 /* Night: warm black, lit from behind. */
 --night:#0c0807;--white:#fff;--w2:rgb(255 255 255 / .8);--w3:rgb(255 255 255 / .66);
 --orange:#ff5f1f;
 --glass:linear-gradient(155deg,rgb(255 255 255 / .2),rgb(255 255 255 / .05) 55%),rgb(255 255 255 / .04);
 --glass-edge:rgb(255 255 255 / .26);
 --blur:blur(22px) saturate(160%);
 --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 --r-xl:32px;--r-lg:24px;--r-md:16px;--r-pill:999px;
 --content:1144px;--gut:clamp(20px,4vw,48px);--inset:clamp(8px,1vw,12px);--pad:clamp(24px,4.4vw,64px);
 /* Inside a full-width night card, the padding that puts content on the shared edge. */
 --side:max(var(--pad),calc((100vw - 2*var(--inset) - var(--content)) / 2));
 --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--stone)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--font);font-size:17px;line-height:1.55;color:var(--ink);background:var(--stone);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ol,ul,figure,table{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--ink);color:var(--white);padding:10px 16px;border-radius:var(--r-pill);font-weight:500;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:calc(var(--content) + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:760px}
.h2{font-size:clamp(34px,4.2vw,56px);font-weight:400;line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.sec-head{text-align:center;display:grid;gap:12px;justify-items:center}
.sec-head p{color:var(--ink-2);font-size:17px}


/* Liquid glass ------------------------------------------------------------------------------------- */
.lg{position:relative;isolation:isolate;background:linear-gradient(135deg,rgb(255 255 255 / .18),rgb(255 255 255 / .05) 38%,rgb(255 255 255 / .02) 62%,rgb(255 255 255 / .12)),rgb(28 10 4 / .32);-webkit-backdrop-filter:blur(12px) saturate(185%) brightness(.86);backdrop-filter:blur(12px) saturate(185%) brightness(.86);box-shadow:inset 0 1px 0 rgb(255 255 255 / .5),inset 0 -1px 0 rgb(255 255 255 / .14),inset 0 0 0 1px rgb(255 255 255 / .12),inset 0 0 28px rgb(255 255 255 / .07),0 30px 60px -30px rgb(0 0 0 / .6)}
.lg::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1.3px;pointer-events:none;background:conic-gradient(from 200deg,rgb(255 255 255 / .95),rgb(255 255 255 / .12) 16%,rgb(255 255 255 / .04) 34%,rgb(255 255 255 / .5) 50%,rgb(255 255 255 / .06) 64%,rgb(255 255 255 / .03) 84%,rgb(255 255 255 / .95));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.lg::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(90% 55% at 18% -8%,rgb(255 255 255 / .26),transparent 55%),radial-gradient(60% 40% at 100% 108%,rgb(255 255 255 / .1),transparent 60%)}
.refract .lg{-webkit-backdrop-filter:url(#lg-lens) blur(10px) saturate(185%) brightness(.86);backdrop-filter:url(#lg-lens) blur(10px) saturate(185%) brightness(.86)}
/* On stone: milk glass over warm light, ink text. */
.lg-light{color:var(--ink);background:linear-gradient(135deg,rgb(255 255 255 / .72),rgb(255 255 255 / .42) 45%,rgb(255 255 255 / .55)),rgb(255 248 242 / .2);-webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgb(255 255 255 / .6),inset 0 0 0 1px rgb(255 255 255 / .5),0 1px 2px rgb(20 18 16 / .06),0 30px 60px -36px rgb(120 40 10 / .45)}
.refract .lg-light{-webkit-backdrop-filter:url(#lg-lens) blur(24px) saturate(170%);backdrop-filter:url(#lg-lens) blur(24px) saturate(170%)}
.lg-light::after{background:radial-gradient(90% 55% at 18% -8%,rgb(255 255 255 / .7),transparent 55%)}
/* Warm light behind the glass on the stone sections. */
.lit{position:relative;isolation:isolate}
.light{position:absolute;z-index:-1;inset:0;overflow:hidden;pointer-events:none}
.light i{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgb(255 106 30 / .85),rgb(242 84 26 / .5) 45%,rgb(255 150 90 / .18) 72%,transparent)}
.price .light i:nth-child(1){width:520px;height:520px;left:calc(50% - 470px);top:34%}
.price .light i:nth-child(2){width:420px;height:420px;left:calc(50% + 120px);top:52%;background:radial-gradient(closest-side,rgb(255 170 90 / .8),rgb(255 120 50 / .35) 55%,transparent)}
.price .light i:nth-child(3){width:260px;height:260px;left:calc(50% - 60px);top:24%;background:radial-gradient(closest-side,rgb(214 60 23 / .6),transparent)}
.faq .light i:nth-child(1){width:560px;height:560px;right:-120px;top:10%}
.faq .light i:nth-child(2){width:360px;height:360px;right:30%;bottom:-80px;background:radial-gradient(closest-side,rgb(255 170 90 / .7),transparent)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border-radius:var(--r-pill);font-size:15px;font-weight:500;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;transition:background-color .25s var(--ease),transform .25s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-light{background:var(--white);color:var(--ink)}
.btn-light:hover{background:#f1ede8}
.btn-dark{background:var(--ink);color:var(--white)}
.btn-dark:hover{background:#2b2622}
.btn-ghost{color:var(--white);background:rgb(255 255 255 / .1);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .22);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.btn-ghost:hover{background:rgb(255 255 255 / .18)}
.btn-small{min-height:40px;padding:0 18px;font-size:15px}

/* Nav: one floating pill of smoked glass, readable on stone and on night. */
.site-head{position:fixed;z-index:40;top:14px;left:0;right:0;display:flex;justify-content:center;padding:0 calc(var(--inset) + 8px);pointer-events:none}
.nav{pointer-events:auto;display:flex;align-items:center;gap:8px;width:min(calc(var(--content) + 28px),100%);padding:6px 6px 6px 14px;border-radius:var(--r-pill);background:linear-gradient(135deg,rgb(255 255 255 / .14),rgb(255 255 255 / .03) 50%,rgb(255 255 255 / .08)),rgb(16 12 10 / .92);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:0 10px 30px -12px rgb(0 0 0 / .45);color:var(--white)}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-size:17px;font-weight:500;letter-spacing:-.02em}
.brand img{width:28px;height:28px}
.nav-links{display:flex;gap:2px;margin:0 auto}
.nav-links a{display:block;padding:9px 14px;border-radius:var(--r-pill);font-size:15px;text-decoration:none;color:var(--w2);transition:color .2s,background-color .2s}
.nav-links a:hover{color:var(--white);background:rgb(255 255 255 / .1)}
.nav-end{display:flex;align-items:center;gap:6px}
.nav-signin{font-size:15px;text-decoration:none;padding:9px 14px;border-radius:var(--r-pill);color:var(--w2)}
.nav-signin:hover{color:var(--white);background:rgb(255 255 255 / .1)}

/* 1 · Hero ------------------------------------------------------------------------------------------ */
.hero{padding:var(--inset)}
.hero-card{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100svh - 2*var(--inset));border-radius:var(--r-xl);background:var(--night);color:var(--white);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:1fr auto;padding:clamp(96px,12vh,140px) var(--side) 0}
/* The orange light behind the head. */
.hero-glow{position:absolute;z-index:-1;inset:0;background:radial-gradient(50% 40% at 72% 100%,rgb(255 95 31 / .28),transparent 75%)}
.hero-glow::after,.tile::after,.feat-glow::after,.foot-glow::after{content:"";position:absolute;inset:0;opacity:.18;mix-blend-mode:overlay;pointer-events:none;background-image:var(--grain)}
.hero-copy{position:relative;z-index:3;align-self:center;max-width:600px;padding-bottom:40px}
h1{font-size:clamp(46px,6.2vw,92px);font-weight:400;line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.lede{margin-top:22px;font-size:19px;line-height:1.45;color:var(--w2);max-width:30ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}

.hero-visual{position:relative;z-index:2;min-height:0;margin-right:calc(-1 * min(48px, var(--side) - 16px))}
/* The subject: a woman and a man back to back, with the instrument ring behind them.
   At rest each figure carries a low orange flare and a calm heartbeat. Lit (pointer over it, or its turn on
   touch screens) the colour rises smoothly to full strength and the heart beats harder and faster. */
.subject{position:absolute;z-index:0;left:47%;top:-7%;height:min(76%,calc(72svh - 110px));aspect-ratio:1.32;transform:translateX(-50%)}
.reticle{position:absolute;z-index:0;left:50%;width:84%;top:-12%;aspect-ratio:1;translate:-50% 0;overflow:visible;fill:none;pointer-events:none}
.reticle .ticks{stroke:rgb(255 255 255 / .2);stroke-width:7;stroke-dasharray:1 11.06}
.reticle .ring{stroke:rgb(255 255 255 / .1);stroke-width:1}
.reticle .arc{stroke:rgb(255 255 255 / .45);stroke-width:1.5;stroke-linecap:round}
.reticle .node{fill:var(--white)}
.figures{position:absolute;z-index:1;inset:0;pointer-events:none}
.figure{position:absolute;top:0;height:100%;aspect-ratio:3/4;pointer-events:auto;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 97%);mask-image:linear-gradient(to bottom,#000 70%,transparent 97%)}
.f-woman{left:0;--hx:42.5%;--hy:75.5%;--hw:13%;--hh:14%}
.f-man{right:0;--hx:61%;--hy:81%;--hw:12%;--hh:11%}
.figure picture{position:absolute;inset:0}
.figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* At rest: a low flare. */
.figure .base{filter:saturate(.5) brightness(.7)}
/* Lit: the full colour, a little stronger than the source, faded in smoothly. */
.figure .live{opacity:0;filter:saturate(1.35) brightness(1.2);transition:opacity 1.2s cubic-bezier(.4,0,.2,1)}
/* The heart itself: its own copy, cut out softly, that swells and settles with each beat. */
.figure .heart{-webkit-mask-image:radial-gradient(var(--hw) var(--hh) at var(--hx) var(--hy),#000 45%,transparent 100%);mask-image:radial-gradient(var(--hw) var(--hh) at var(--hx) var(--hy),#000 45%,transparent 100%);transform-origin:var(--hx) var(--hy);opacity:.55;transition:opacity 1.2s cubic-bezier(.4,0,.2,1)}
.figure .beat{position:absolute;left:var(--hx);top:var(--hy);width:30%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgb(255 168 84 / .55),rgb(255 95 31 / .22) 50%,transparent 80%);mix-blend-mode:screen;opacity:.35;transition:opacity 1.2s cubic-bezier(.4,0,.2,1);pointer-events:none}
.figure.lit .live,.figure.lit .heart,.figure.lit .beat{opacity:1}
@media (hover:hover){.figure:hover .live,.figure:hover .heart,.figure:hover .beat{opacity:1}}

/* The pane held over the body: this morning's read in one sheet of liquid glass. */
.lens{position:absolute;z-index:3;left:-6%;right:0;bottom:6%;padding:16px 20px 20px;border-radius:28px;overflow:hidden;background:linear-gradient(135deg,rgb(255 255 255 / .2),rgb(255 255 255 / .04) 40%,rgb(255 255 255 / .02) 60%,rgb(255 255 255 / .14)),rgb(30 10 4 / .38);-webkit-backdrop-filter:blur(10px) saturate(170%) brightness(.66);backdrop-filter:blur(10px) saturate(170%) brightness(.66)}
.refract .lens{-webkit-backdrop-filter:url(#lg-lens) blur(8px) saturate(170%) brightness(.66);backdrop-filter:url(#lg-lens) blur(8px) saturate(170%) brightness(.66)}
.lens-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:500}
.lens-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px}
.cell{display:grid;align-content:start;gap:6px;min-width:0}
.cell + .cell{padding-left:18px;margin-left:18px;border-left:1px solid rgb(255 255 255 / .18)}
.cell-k{font-size:13px;color:var(--white)}
.cell-num{font-size:clamp(34px,3vw,44px);font-weight:300;line-height:1;letter-spacing:-.045em}
.cell-num small{margin-left:4px;font-size:13px;font-weight:400;letter-spacing:0}
.cell-foot{font-size:13px;color:var(--white)}
.cell-foot.split{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.meter{height:6px;margin:12px 0 4px;border-radius:3px;background:rgb(255 255 255 / .22);overflow:hidden}
.meter i{display:block;height:100%;width:calc(var(--f)*100%);border-radius:3px;background:var(--white)}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--white)}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px rgb(255 95 31 / .25)}
.bars{display:flex;align-items:flex-end;gap:4px;height:30px;margin-top:6px}
.bars i{flex:1;height:calc(var(--h)*100%);border-radius:3px;background:rgb(255 255 255 / .34);transform-origin:bottom}
.bars i.now{background:var(--white)}
.macros{display:grid;gap:7px;margin-top:12px}
.macros li{display:grid;grid-template-columns:1fr auto;font-size:13px;position:relative;padding-bottom:6px}
.macros li::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;border-radius:2px;background:linear-gradient(90deg,var(--white) calc(var(--w)*100%),rgb(255 255 255 / .22) 0)}
.macros b{font-weight:500}
.range{position:relative;height:6px;margin:12px 0 4px;border-radius:3px;background:linear-gradient(90deg,rgb(255 255 255 / .2) 0 18%,rgb(255 255 255 / .6) 18% 100%)}
.range i{position:absolute;top:50%;left:calc(var(--at)*100%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--white);box-shadow:0 0 0 4px rgb(255 95 31 / .6)}
.flag{display:inline-block;padding:1px 8px;border-radius:var(--r-pill);background:var(--white);color:var(--ink);font-size:12px;font-weight:600}

/* The facts row along the bottom, like a spec line. */
.hero-facts{position:relative;z-index:4;grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 calc(-1*var(--side));padding:22px var(--side) 26px;border-top:1px solid rgb(255 255 255 / .14);background:linear-gradient(to top,rgb(12 8 7 / .78),rgb(12 8 7 / .4));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hero-facts li{display:grid;gap:2px;padding-right:24px;font-size:15px}
.hero-facts li + li{padding-left:24px;border-left:1px solid rgb(255 255 255 / .14)}
.hero-facts b{font-weight:500}
.hero-facts span{color:var(--w2)}

/* 2 · How it works ---------------------------------------------------------------------------------- */
.how{padding:clamp(96px,12vw,160px) 0 clamp(80px,10vw,140px)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin-top:clamp(44px,5vw,64px)}
.step > h3{margin-top:20px;font-size:19px;font-weight:500;letter-spacing:-.015em}
.step > p{margin-top:6px;color:var(--ink-2);font-size:15px;line-height:1.5}
/* Each tile: warm spheres on black behind frosted glass (owner's reference 3). */
.tile{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1;border-radius:var(--r-lg);background:var(--night);display:grid;place-items:center;padding:18px}
.tile::before{content:"";position:absolute;z-index:-1;inset:0;background:var(--spheres)}
.t1{--spheres:radial-gradient(circle at 30% 30%,#ff8a3d 0,#e2480f 16%,transparent 34%),radial-gradient(circle at 76% 74%,#c7380c 0,#7a1e05 18%,transparent 36%)}
.t2{--spheres:radial-gradient(circle at 70% 28%,#ffa25a 0,#f05a17 18%,transparent 38%),radial-gradient(circle at 22% 80%,#b8330c 0,#5e1604 16%,transparent 34%)}
.t3{--spheres:radial-gradient(circle at 50% 22%,#ff7a2e 0,#d1420f 20%,transparent 40%),radial-gradient(circle at 84% 86%,#e2480f 0,#6e1a05 14%,transparent 30%)}
.t4{--spheres:radial-gradient(circle at 26% 70%,#ff8a3d 0,#e2480f 18%,transparent 38%),radial-gradient(circle at 80% 24%,#c7380c 0,#5e1604 18%,transparent 36%)}
.num{position:absolute;left:14px;top:14px;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:rgb(255 255 255 / .16);color:var(--white);font-size:13px;font-weight:500;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.chip-ui{width:100%;max-width:250px;display:grid;gap:8px;padding:12px;border-radius:18px;color:var(--white);font-size:13px;line-height:1.35}
.chip-ui .row{display:flex;align-items:center;gap:10px}
.chip-ui .row > span:not([class]){display:grid;flex:1;min-width:0}
.chip-ui b{font-weight:500}
.chip-ui small{font-size:12px;color:var(--white);opacity:.86}
.chip-ui img{width:28px;height:28px;flex:none}
.ok{flex:none;width:20px;height:20px;border-radius:50%;background:var(--white);position:relative}
.ok::after{content:"";position:absolute;left:6px;top:5px;width:7px;height:4px;border-left:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:rotate(-45deg)}
.bubble{justify-self:end;max-width:90%;padding:8px 12px;border-radius:14px 14px 4px 14px;background:var(--white);color:var(--ink)}
.result{padding:2px 2px 0;text-align:right;justify-content:flex-end}
.file{flex:none;width:28px;height:34px;border-radius:5px;background:var(--white);position:relative}
.file::after{content:"PDF";position:absolute;left:0;right:0;bottom:5px;text-align:center;font-size:9px;font-weight:700;color:var(--ink)}
.chip-ui.list{gap:0;padding:6px 14px}
.chip-ui.list p{display:flex;justify-content:space-between;padding:8px 0}
.chip-ui.list p + p{border-top:1px solid rgb(255 255 255 / .16)}

/* 3 · Features: four night cards; on a wide screen each sticks and the next slides over it. --------- */
.features{display:grid;gap:var(--inset);padding:0 var(--inset)}
.feat-card{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-xl);background:var(--night);color:var(--white);padding:clamp(28px,4vw,56px) var(--side);display:grid;align-content:center;row-gap:clamp(24px,3.4vh,40px)}
.feat-glow{position:absolute;z-index:-1;inset:0;background:radial-gradient(40% 60% at 78% 55%,rgb(255 106 30 / .55),rgb(184 50 13 / .25) 45%,transparent 75%),radial-gradient(30% 40% at 0% 100%,rgb(255 95 31 / .22),transparent 70%)}
.feat-card:nth-child(odd) .feat-glow{background:radial-gradient(40% 60% at 72% 40%,rgb(255 106 30 / .5),rgb(184 50 13 / .22) 45%,transparent 75%),radial-gradient(34% 44% at 100% 100%,rgb(255 95 31 / .24),transparent 70%)}
.feat-nav{display:flex;flex-wrap:wrap;gap:6px}
.feat-nav a{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 6px;border-radius:var(--r-pill);color:var(--w2);font-size:15px;text-decoration:none;transition:background-color .3s var(--ease),color .3s var(--ease)}
.feat-nav span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .34);font-size:12px;font-variant-numeric:tabular-nums}
.feat-nav em{font-style:normal;display:none}
.feat-nav [aria-current]{background:var(--white);color:var(--ink);padding-right:16px}
.feat-nav [aria-current] span{box-shadow:inset 0 0 0 1px rgb(20 18 16 / .25)}
.feat-nav [aria-current] em{display:inline}
.feat-nav a:hover:not([aria-current]){background:rgb(255 255 255 / .08);color:var(--white)}
.feat-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:center}
@media (min-width:901px) and (min-height:620px){
 .features{gap:0}
 .feat-card{position:sticky;top:var(--inset);min-height:calc(100svh - 2*var(--inset));padding-top:clamp(84px,11vh,108px);margin-bottom:var(--inset);box-shadow:inset 0 1px 0 rgb(255 255 255 / .12),0 -24px 60px -20px rgb(0 0 0 / .55)}
 .feat-card:last-child{margin-bottom:0}
 /* The card being covered sinks back a little as the next one arrives. */
 /* The card being covered sinks back as the next one slides up, driven by the next card's own
    progress into view (a stuck card doesn't move, so it can't drive itself). */
 @supports (timeline-scope:--a){
  @media (prefers-reduced-motion:no-preference){
   .features{timeline-scope:--c2,--c3,--c4}
   #fp-2{view-timeline-name:--c2}#fp-3{view-timeline-name:--c3}#fp-4{view-timeline-name:--c4}
   #fp-1 .feat-panel,#fp-2 .feat-panel,#fp-3 .feat-panel{animation:sink linear both;animation-range:entry 0% entry 100%}
   #fp-1 .feat-panel{animation-timeline:--c2}#fp-2 .feat-panel{animation-timeline:--c3}#fp-3 .feat-panel{animation-timeline:--c4}
  }
 }
}
@keyframes sink{to{transform:scale(.94) translateY(-2%);opacity:.6;filter:blur(1.5px)}}
.feat-k{display:none}
.feat-copy h3{font-size:clamp(30px,3.2vw,46px);font-weight:400;line-height:1.05;letter-spacing:-.035em;text-wrap:balance}
.feat-copy p:not(.feat-k){margin-top:16px;font-size:17px;color:var(--w2);max-width:34ch}
.feat-shot{border-radius:26px}
.board{display:grid;gap:16px;padding:clamp(18px,2vw,26px)}
.board-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:500;color:var(--white)}
.board .big{font-size:clamp(40px,3.6vw,54px);font-weight:300;line-height:1;letter-spacing:-.045em}
.board .big small{margin-left:6px;font-size:15px;font-weight:400;letter-spacing:0;color:var(--w2)}
.board .note{margin-top:8px;font-size:13px;color:var(--w2)}
.board-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:end;padding:18px;border-radius:18px;background:rgb(255 255 255 / .06);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .1)}
.stages{display:flex;gap:3px;height:6px;margin-top:18px}
.stages i{flex:var(--f);border-radius:3px;background:var(--white)}
.stages i:nth-child(2){background:var(--orange)}.stages i:nth-child(3){background:rgb(255 255 255 / .35)}
.legend{display:flex;gap:14px;margin-top:10px;font-size:13px;color:var(--w2)}
.nights{display:flex;align-items:flex-end;gap:4px;height:120px}
.nights i{flex:1;height:calc(var(--h)*100%);border-radius:3px;background:rgb(255 255 255 / .22)}
.nights i.now{background:var(--orange)}
.tiles3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tiles3 li{display:grid;gap:2px;padding:14px 16px;border-radius:16px;background:rgb(255 255 255 / .06);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .1);font-size:13px}
.tiles3 span{color:var(--w2)}
.tiles3 b{font-size:28px;font-weight:300;letter-spacing:-.04em;line-height:1.15}
.tiles3 em{font-style:normal;color:var(--w2)}
.board-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.meal,.day{display:grid;gap:12px;align-content:start;padding:18px;border-radius:18px;background:rgb(255 255 255 / .06);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .1)}
.meal .msg{max-width:none}
.logged{display:grid;gap:8px}
.logged-name{font-size:15px;font-weight:500}
.macro-row{display:flex;gap:18px;font-size:13px;color:var(--w2)}
.macro-row b{display:block;font-size:17px;font-weight:500;color:var(--white)}
.day-k{font-size:13px;color:var(--w2)}
.burn{height:6px;border-radius:3px;background:rgb(255 255 255 / .2);overflow:hidden}
.burn i{display:block;height:100%;width:calc(var(--f)*100%);border-radius:3px;background:var(--orange)}
.big-macros{margin-top:4px}
.markers{display:grid;gap:10px}
.markers li{display:grid;grid-template-columns:minmax(0,1.1fr) auto minmax(0,1.4fr);grid-template-rows:auto auto;column-gap:22px;align-items:center;padding:16px 18px;border-radius:18px;background:rgb(255 255 255 / .06);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .1)}
.markers li > div{display:grid;gap:6px;justify-items:start;grid-row:span 2}
.markers li > div b{font-size:17px;font-weight:500}
.markers .big{grid-row:span 2;font-size:clamp(34px,3vw,44px)}
.markers .range{margin-top:0}
.markers .note{margin-top:0;grid-column:3}
.ok-t{display:inline-block;padding:1px 8px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .4);font-size:12px;font-weight:500}
.chat{display:grid;gap:12px;padding:clamp(16px,2vw,24px);border-radius:18px;background:rgb(12 8 7 / .45);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .1)}
.msg{max-width:80%;padding:12px 16px;border-radius:18px;font-size:15px;line-height:1.5}
.msg.me{justify-self:end;background:var(--white);color:var(--ink);border-bottom-right-radius:5px}
.msg.xeyo{justify-self:start;background:rgb(255 255 255 / .1);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .14);border-bottom-left-radius:5px}

/* 4 · Price ----------------------------------------------------------------------------------------- */
.price{padding:clamp(96px,12vw,160px) 0 clamp(64px,7vw,100px)}
.pre{font-size:17px;color:var(--ink-2)}
.incl-glass{margin-top:clamp(36px,4vw,52px);border-radius:24px;padding:6px 8px}
.incl{width:100%;border-collapse:collapse;font-size:17px}
.incl th,.incl td{padding:15px 22px;text-align:left}
.incl tr + tr th,.incl tr + tr td{border-top:1px solid var(--line)}
.incl th{width:42%;font-weight:500}
.incl td{color:#4a4540}
.price-cta{display:grid;justify-items:center;gap:14px;margin-top:36px;text-align:center}
.price-cta p{font-size:15px;color:var(--ink-2)}

/* 5 · FAQ ------------------------------------------------------------------------------------------- */
.faq{padding:clamp(40px,6vw,80px) 0 clamp(96px,12vw,150px)}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,80px);align-items:start}
.faq-side p{margin-top:16px;color:var(--ink-2)}
.faq-side a:not(.btn){color:var(--ink);text-underline-offset:3px}
.faq-cta{margin-top:28px}
.faq-side{position:sticky;top:110px}
.faq-list{border-radius:24px;padding:4px 28px}
.qa + .qa{border-top:1px solid var(--line)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 2px;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa h3{font-size:19px;font-weight:500;letter-spacing:-.015em}
.qa-icon{flex:none;position:relative;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px rgb(20 18 16 / .35);transition:background-color .25s var(--ease)}
.qa-icon::before,.qa-icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;margin:-.8px 0 0 -6px;background:var(--ink);transition:transform .35s var(--ease)}
.qa-icon::after{transform:rotate(90deg)}
.qa summary:hover .qa-icon{background:var(--stone-2)}
.qa[open] .qa-icon,.qa[open] summary:hover .qa-icon{background:var(--ink)}
.qa[open] .qa-icon::before,.qa[open] .qa-icon::after{background:var(--white)}
.qa[open] .qa-icon::after{transform:rotate(0)}
.qa p{padding:0 56px 24px 2px;color:#4a4540;max-width:62ch}

/* Footer: the last night panel, the wordmark set into the light. ---------------------------------- */
.foot{padding:0 var(--inset) var(--inset)}
.foot-k{margin-bottom:14px;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--w3)}
.foot-card{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-xl);background:var(--night);color:var(--white);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;padding:clamp(48px,6vw,88px) var(--side) 0}
.foot-glow{position:absolute;z-index:-1;inset:0;background:radial-gradient(70% 80% at 50% 118%,#ff7a2e 0%,#f2541a 20%,#b8320d 38%,#4a1205 58%,transparent 78%)}
.foot-h{font-size:clamp(34px,4.2vw,56px);font-weight:400;line-height:1.02;letter-spacing:-.04em;max-width:18ch;text-wrap:balance}
.foot-cta .btn{margin-top:30px}
.foot-cols{display:flex;gap:clamp(40px,6vw,96px);font-size:15px}
.foot-cols ul{display:grid;gap:12px;align-content:start}
.foot-cols a{color:var(--w2);text-decoration:none}
.foot-cols a:hover{color:var(--white)}
.wordmark{grid-column:1 / -1;margin:clamp(24px,4vw,56px) 0 0 -.04em;font-size:clamp(120px,24vw,380px);font-weight:500;line-height:1.02;letter-spacing:-.065em;color:var(--white)}
.foot-base{grid-column:1 / -1;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:clamp(16px,2vw,28px) calc(-1*var(--side)) 0;padding:18px var(--side) 22px;border-top:1px solid rgb(255 255 255 / .12);font-size:13px;color:var(--w2)}

/* Motion --------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
 /* Hero settles on load: the subject rises out of the light, the pane slides up, the ring turns. */
 .js .subject{animation:settle 1.4s var(--ease) both}
 .js .lens{animation:float-in 1s var(--ease) .4s both}
 .reticle{animation:spin 90s linear infinite}
 .light i{animation:drift 22s ease-in-out infinite alternate}
 .light i:nth-child(2){animation-duration:28s;animation-direction:alternate-reverse}
 .js .hero-copy > *{animation:float-in .9s var(--ease) both}
 .js .hero-copy .lede{animation-delay:.08s}.js .hero-copy .hero-actions{animation-delay:.16s}
 .js .bars i{animation:grow .7s var(--ease) .7s both}
 .js .bars i:nth-child(2){animation-delay:.75s}.js .bars i:nth-child(3){animation-delay:.8s}.js .bars i:nth-child(4){animation-delay:.85s}.js .bars i:nth-child(5){animation-delay:.9s}.js .bars i:nth-child(6){animation-delay:.95s}.js .bars i:nth-child(7){animation-delay:1s}.js .bars i:nth-child(8){animation-delay:1.05s}
 /* The heartbeat: lub-dub at rest (about 60 a minute), quicker and harder when lit (about 100). */
 .figure .heart{animation:heart 1s cubic-bezier(.3,0,.3,1) infinite}
 .figure .beat{animation:glow 1s cubic-bezier(.3,0,.3,1) infinite}
 .figure.lit .heart{animation:heart-hard .6s cubic-bezier(.3,0,.3,1) infinite}
 .figure.lit .beat{animation:glow-hard .6s cubic-bezier(.3,0,.3,1) infinite}
 @media (hover:hover){
  .figure:hover .heart{animation:heart-hard .6s cubic-bezier(.3,0,.3,1) infinite}
  .figure:hover .beat{animation:glow-hard .6s cubic-bezier(.3,0,.3,1) infinite}
 }
 /* Scroll-driven: sections rise in as they enter, the hero recedes as it leaves. Browsers without
    scroll timelines show everything in place. */
 @supports (animation-timeline:view()){
  .rise{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .steps .step:nth-child(2){animation-range:entry 6% entry 76%}
  .steps .step:nth-child(3){animation-range:entry 12% entry 82%}
  .steps .step:nth-child(4){animation-range:entry 18% entry 88%}
  .hero-card{animation:recede linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  .wordmark{animation:lift linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
 }
}
@keyframes settle{from{opacity:0;transform:translateX(-50%) translateY(40px) scale(1.04)}to{opacity:1;transform:translateX(-50%)}}
@keyframes heart{0%,100%{transform:scale(1)}12%{transform:scale(1.07)}24%{transform:scale(.99)}34%{transform:scale(1.04)}55%{transform:scale(1)}}
@keyframes heart-hard{0%,100%{transform:scale(1);filter:brightness(1)}14%{transform:scale(1.13);filter:brightness(1.35)}28%{transform:scale(.98);filter:brightness(1.05)}40%{transform:scale(1.08);filter:brightness(1.2)}62%{transform:scale(1);filter:brightness(1)}}
@keyframes glow{0%,100%{transform:scale(.92)}12%{transform:scale(1.08)}24%{transform:scale(.97)}34%{transform:scale(1.03)}55%{transform:scale(.92)}}
@keyframes glow-hard{0%,100%{transform:scale(.9)}14%{transform:scale(1.22)}28%{transform:scale(.98)}40%{transform:scale(1.12)}62%{transform:scale(.9)}}
@keyframes float-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift{from{transform:translate3d(-30px,0,0) scale(1)}to{transform:translate3d(40px,-30px,0) scale(1.08)}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes breathe{from{opacity:.85;transform:scale(.98)}to{opacity:1;transform:scale(1.03)}}
@keyframes rise{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
@keyframes recede{to{transform:scale(.94) translateY(4%)}}
@keyframes lift{from{transform:translateY(.4em)}to{transform:translateY(.06em)}}

/* Tablet --------------------------------------------------------------------------------------------- */
@media (max-width:1100px){
 .nav-links{display:none}
 .nav-end{margin-left:auto}
 .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
 .hero-facts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}
 .hero-facts li:nth-child(3){padding-left:0;border-left:0}
 .faq-side{position:static}
 /* Hero stacks: copy, then the subject with the glass pane across the shoulders. */
 .hero-card{grid-template-columns:1fr;grid-template-rows:auto auto auto;min-height:0;padding-top:128px}
 .hero-copy{padding-bottom:8px}
 .hero-visual{height:min(92vw,760px);margin:0 calc(-1*var(--pad))}
 .subject{height:min(72%,540px);top:7%;left:50%}
 .lens{left:var(--pad);right:var(--pad);bottom:24px}
}
/* Phone: copy first, then the subject and its pane, then the facts. ----------------------------- */
@media (max-width:760px){
 :root{--r-xl:26px}
 .site-head{top:10px}
 .nav-signin{display:none}
 .hero-card{padding:96px 20px 0}
 h1{font-size:clamp(42px,12vw,54px)}
 .lede{font-size:17px}
 .hero-actions .btn{flex:1 1 100%}
 .hero-visual{height:108vw;max-height:520px;margin:0 -20px}
 /* On a phone the pane keeps labels and numbers only. */
 .lens{left:12px;right:12px;bottom:14px;padding:12px 14px 14px;border-radius:22px}
 .lens-grid{margin-top:10px}
 .cell + .cell{padding-left:10px;margin-left:10px}
 .cell .bars,.cell .meter,.cell .range,.cell .cell-foot{display:none}
 .cell-k{font-size:12px}
 .cell-num{font-size:26px}
 .cell-num small{font-size:12px;margin-left:2px}
 .hero-facts{grid-template-columns:1fr;margin:0 -20px;padding:6px 20px 10px}
 .hero-facts li{grid-template-columns:110px 1fr;padding:12px 0}
 .hero-facts{row-gap:0}
 .hero-facts li + li{padding-left:0;border-left:0;border-top:1px solid rgb(255 255 255 / .12)}
 .steps{grid-template-columns:1fr;gap:36px}
 .tile{aspect-ratio:4/3}
 .feat-panel{grid-template-columns:1fr;gap:24px}
 .board-main,.board-split{grid-template-columns:1fr}
 .nights{height:72px}
 .tiles3{grid-template-columns:1fr}
 .tiles3 li{grid-template-columns:1fr auto;align-items:baseline;padding:12px 14px}
 .tiles3 em{grid-column:1 / -1}
 .tiles3 b{grid-row:1;grid-column:2;font-size:24px}
 .markers li{grid-template-columns:1fr auto;row-gap:10px}
 .markers li > div{grid-row:auto}
 .markers .big{grid-row:auto;font-size:34px}
 .markers .range,.markers .note{grid-column:1 / -1}
 /* The second action becomes a quiet link so the first screen stays short. */
 .hero-actions .btn-ghost{flex:0 0 auto;min-height:44px;padding:0 4px;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgb(255 255 255 / .4)}
 .hero-actions{gap:6px;margin-top:28px}
 .faq-grid{grid-template-columns:1fr}
 .msg{max-width:92%}
 .qa p{padding-right:8px}
 .incl th,.incl td{padding:12px 14px;font-size:15px}
 .foot-card{grid-template-columns:1fr}
 .foot-cta .btn{width:100%}
}
@media (forced-colors:active){
 .lg,.feat-shot,.tile{border:1px solid CanvasText}
 .light,.halo,.reticle{display:none}
 .btn{border:1px solid ButtonText}
 .bars i,.range,.macros li::after{background:CanvasText}
}