/* ============================================================
   KENNECT — HOME (4-chapter premium redesign)
   Apple × WHOOP × Oura storytelling · evolving dark→light
   ============================================================ */
body.home{background:#06160c}

/* smooth animated ring fill */
@property --p{syntax:'<number>';inherits:false;initial-value:0}
.ring{transition:--p 1.2s var(--ease)}

/* ---- chapter scaffolding ---- */
.chap{position:relative;overflow:hidden;padding-block:clamp(96px,13vw,190px)}
.chap-in{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);position:relative;z-index:3}
.chap-head{max-width:760px;margin-bottom:clamp(40px,5vw,70px)}
.chap-head .t-h2{margin-top:18px}
.chap-head p{margin-top:18px}

/* evolving backgrounds (each top matches previous bottom) */
.chap--hero{background:
  radial-gradient(130% 90% at 82% 6%, rgba(164,190,92,.20), transparent 52%),
  radial-gradient(110% 80% at 6% 96%, rgba(20,68,25,.85), transparent 60%),
  linear-gradient(180deg,#06140a 0%,#0a2010 58%,#0e2a14 100%)}
.chap--sleep{background:linear-gradient(180deg,#0e2a14 0%,#16431f 48%,#2c6b34 100%)}
.chap--act{background:linear-gradient(180deg,#2c6b34 0%,#5e9a4a 52%,#b6e394 100%)}
.chap--rec{background:linear-gradient(180deg,#b6e394 0%,#dcf2cd 36%,#F2FFF2 100%)}

/* themes */
.chap--hero,.chap--sleep{color:rgba(242,255,242,.82)}
.chap--hero h1,.chap--hero h2,.chap--hero h3,.chap--sleep h2,.chap--sleep h3,.chap--sleep h4{color:var(--mint-cream)}
.chap--act{color:var(--ink)}.chap--rec{color:var(--ink)}
.chap--hero .eyebrow,.chap--sleep .eyebrow{color:var(--kiwi)}
.chap--hero .eyebrow::before,.chap--sleep .eyebrow::before{background:var(--kiwi)}

/* ---- glass systems ---- */
.glass-d{background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,.16);border-radius:24px;
  box-shadow:0 34px 70px -36px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.22)}
.glass-l{background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,.75);border-radius:24px;
  box-shadow:0 34px 70px -38px rgba(20,68,25,.3),inset 0 1px 0 rgba(255,255,255,.9)}

/* ---- particles + glow ---- */
.parts{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.parts span{position:absolute;border-radius:50%;background:var(--kiwi);opacity:.5;filter:blur(.5px);
  animation:drift var(--dur,16s) ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0)}33%{transform:translate(22px,-30px)}66%{transform:translate(-18px,18px)}}
.glow{position:absolute;border-radius:50%;filter:blur(70px);z-index:0;pointer-events:none}

/* ---- nav over dark hero ---- */
.nav--home .brand{color:var(--mint-cream)}
.nav--home .brand .bmark{background:var(--lemon);color:var(--parsley)}
.nav--home .nav-links a{position:relative;color:rgba(242,255,242,.74)}
.nav--home .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:2px;
  border-radius:2px;background:var(--lemon);transition:right .32s var(--ease)}
.nav--home .nav-links a:hover::after,.nav--home .nav-links a.active::after{right:0}
.nav--home .nav-links a:hover,.nav--home .nav-links a.active{color:var(--mint-cream)}
.nav--home .btn--ghost{color:var(--mint-cream);border-color:rgba(242,255,242,.3)}
.nav--home .btn--ghost:hover{border-color:var(--mint-cream)}
.nav--home::before{background:rgba(8,22,11,.72);border-bottom-color:rgba(242,255,242,.1)}
.nav--home.scrolled .brand,.nav--home.scrolled .nav-links a{color:var(--mint-cream)}

/* ============================================================
   INTERACTIVE PHONE (functional screens + tabs)
   ============================================================ */
.kp{position:relative}
.kp .phone-scr{background:var(--mint-cream)}
.kp-screens{position:absolute;inset:0}
.kp-screens .scr{position:absolute;inset:0;opacity:0;transform:translateY(10px) scale(.985);
  transition:opacity .55s var(--ease),transform .55s var(--ease);pointer-events:none;padding-bottom:70px}
.kp-screens .scr.on{opacity:1;transform:none;pointer-events:auto}
.kp-tabs{position:absolute;left:12px;right:12px;bottom:12px;z-index:9;display:flex;gap:3px;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(20,68,25,.08);border-radius:18px;padding:5px}
.kp-tabs button{flex:1;border:0;background:transparent;font-family:inherit;font-size:9.5px;font-weight:600;
  color:var(--soft);padding:8px 2px;border-radius:13px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:background .25s,color .25s}
.kp-tabs button svg{width:17px;height:17px}
.kp-tabs button.on{background:var(--parsley);color:var(--lemon)}
.kp-tabs button:hover:not(.on){color:var(--parsley)}

/* top tabs variant (activity/heart/workout) */
.kp-toptabs{position:absolute;left:14px;right:14px;top:34px;z-index:9;display:flex;gap:4px;
  background:rgba(20,68,25,.06);border-radius:13px;padding:3px}
.kp-toptabs button{flex:1;border:0;background:transparent;font-family:inherit;font-size:11px;font-weight:600;
  color:var(--soft);padding:8px;border-radius:10px;cursor:pointer;transition:.25s}
.kp-toptabs button.on{background:#fff;color:var(--parsley);box-shadow:0 2px 6px rgba(20,68,25,.12)}
.kp-toptabs ~ .kp-screens .scr{padding-top:74px}

/* segmented control */
.seg{display:flex;background:rgba(20,68,25,.08);border-radius:12px;padding:3px;gap:2px;margin-bottom:12px}
.seg button{flex:1;border:0;background:transparent;font-family:inherit;font-size:10.5px;font-weight:600;color:var(--soft);
  padding:8px;border-radius:9px;cursor:pointer;transition:.25s}
.seg button.on{background:#fff;color:var(--parsley);box-shadow:0 2px 6px rgba(20,68,25,.12)}

/* neon phone on dark */
.chap--hero .phone,.chap--sleep .phone{
  box-shadow:0 80px 150px -46px rgba(0,0,0,.84),0 30px 60px -40px rgba(0,0,0,.6),0 0 92px -24px rgba(164,190,92,.45),
    inset 0 1.5px 0 rgba(255,255,255,.28),inset 0 0 0 2px rgba(255,255,255,.08),inset 0 -18px 36px -28px rgba(0,0,0,.5),
    0 0 0 1.6px rgba(242,255,242,.9),0 0 0 4px rgba(164,190,92,.5)}
/* subtle frosted screen reflection (UI unchanged) */
.chap--hero .phone-scr::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;
  background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 18%,transparent 34%,transparent 88%,rgba(255,255,255,.05));
  mix-blend-mode:overlay}
.phone-glow{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:120%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(164,190,92,.4),transparent 60%);filter:blur(50px);z-index:0;pointer-events:none}

/* ============================================================
   CH 1 — HERO
   ============================================================ */
.hero2{min-height:820px;display:flex;align-items:center;padding-top:clamp(120px,15vh,170px);padding-bottom:clamp(60px,8vw,110px)}
.hero2-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px);align-items:center;width:100%}
.hero2-copy{position:relative;z-index:5}
@media(max-width:940px){.hero2-grid{grid-template-columns:1fr;gap:48px}}
.hero2 h1{font-size:clamp(54px,8.6vw,108px);line-height:.96;letter-spacing:-.045em;color:var(--mint-cream);margin-bottom:26px}
.hero2 h1 .gl{color:var(--lemon)}
/* 3-line product headline — large, each line on its own row */
.hero2 .hero2-h1{font-size:clamp(58px,8vw,104px);line-height:.98;letter-spacing:-.045em;margin:-24px 0 24px;text-align:left;white-space:nowrap}
@media(max-width:480px){.hero2 .hero2-h1{font-size:clamp(40px,12vw,60px);white-space:normal}}
.hero2 .sub{font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:rgba(242,255,242,.78);max-width:52ch;margin-bottom:34px}
.hero2-cta{display:flex;gap:14px;flex-wrap:wrap}
.chap--hero .btn--ghost{color:var(--mint-cream);border-color:rgba(242,255,242,.34)}
.chap--hero .btn--ghost:hover{border-color:var(--mint-cream);background:rgba(255,255,255,.06)}
.hero2-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:38px}
.hero2-strip .hs{padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.05);
  border:1px solid rgba(242,255,242,.13);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:transform .4s var(--ease),background .3s,border-color .3s}
.hero2-strip .hs:hover{transform:translateY(-4px);background:rgba(255,255,255,.09);border-color:rgba(164,190,92,.42)}
.hero2-strip .hs b{display:block;font-size:clamp(24px,2.6vw,34px);font-weight:700;letter-spacing:-.03em;color:var(--mint-cream);line-height:1}
.hero2-strip .hs span{display:block;margin-top:7px;font-size:12.5px;color:rgba(242,255,242,.62)}
.hero2-strip .hs:first-child b{color:var(--lemon)}

/* hero feature chips — larger, icon badges */
.hero2-chips{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:34px}
.hchip{display:inline-flex;align-items:center;gap:10px;padding:9px 18px 9px 9px;border-radius:999px;
  font-size:15px;font-weight:600;color:var(--mint-cream);background:rgba(255,255,255,.07);
  border:1px solid rgba(242,255,242,.16);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .45s var(--ease),filter .4s var(--ease)}
.hchip .hc-ic{width:30px;height:30px;border-radius:50%;background:rgba(164,190,92,.18);color:var(--kiwi);
  border:1px solid rgba(164,190,92,.3);display:grid;place-items:center;flex:none;transition:background .4s var(--ease),border-color .4s var(--ease)}
.hchip .hc-ic svg{width:16px;height:16px}
.hchip:hover{background:rgba(255,255,255,.1);border-color:rgba(164,190,92,.45);
  box-shadow:0 0 24px -8px rgba(164,190,92,.5);filter:brightness(1.05)}
.hchip:hover .hc-ic{background:rgba(164,190,92,.34);border-color:rgba(164,190,92,.55)}

/* hero CTA — larger button with inline glassy reviews */
.hero2-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero2-cta .btn{padding:20px 40px;font-size:18px}
.hero2-cta .btn .play{width:20px;height:20px}
.hero2-cta .btn--secondary{box-shadow:0 18px 44px -16px rgba(205,245,70,.55)}
.hero2-cta .btn--secondary:hover{box-shadow:0 24px 54px -16px rgba(205,245,70,.82)}

/* hero reviews — glassy pill beside the button */
.hero2-trust{display:inline-flex;align-items:center;gap:12px;padding:8px 18px 8px 10px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(242,255,242,.14);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.16)}
.trust-avs{display:flex}
.trust-avs span{width:34px;height:34px;border-radius:50%;border:2px solid rgba(8,20,11,.92);margin-left:-11px;
  display:grid;place-items:center;font-weight:700;font-size:12px}
.trust-avs span:first-child{margin-left:0}
.trust-avs span:nth-child(1){background:var(--parsley);color:var(--mint-cream)}
.trust-avs span:nth-child(2){background:var(--mint-cream);color:var(--parsley)}
.trust-avs span:nth-child(3){background:#0a2010;color:var(--kiwi)}
.trust-avs span:nth-child(4){background:rgba(242,255,242,.14);color:var(--mint-cream);font-size:12px}
.trust-meta{display:flex;flex-direction:column;gap:2px}
.hero2-trust .stars{display:flex;align-items:center;gap:8px;color:var(--lemon);letter-spacing:1px;font-size:14px;line-height:1}
.hero2-trust .stars b{color:var(--mint-cream);font-weight:700;letter-spacing:0;font-size:14px}
.hero2-trust .trust-sub{font-size:12.5px;color:rgba(242,255,242,.66);letter-spacing:0}

/* phone detail screens — fill the full screen height */
.kp-screens .scr-detail{padding-bottom:78px}
.scr-fill{flex:1;display:flex;flex-direction:column;min-height:0}
.scr-fill .bars{flex:1;height:auto!important;min-height:54px}
.scr-fill .hline{flex:1;height:auto!important;min-height:48px}
.scr-insight{display:flex;align-items:center;gap:9px;background:rgba(20,68,25,.06);border:1px solid var(--line);
  border-radius:14px;padding:11px 13px;font-size:10.5px;line-height:1.35;color:var(--soft);font-weight:500;margin-top:9px}
.scr-insight .si-ic{width:26px;height:26px;border-radius:8px;background:var(--kiwi);color:var(--parsley);display:grid;place-items:center;flex:none}
.scr-insight .si-ic svg{width:14px;height:14px}
.scr-insight b{color:var(--parsley);font-weight:700}
.scr-sublabel{font-size:10px;color:var(--soft);margin-top:2px}

/* phone in-screen card header */
.scr-cardhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;font-size:11px}
.scr-cardhead span{color:var(--soft);font-weight:600}
.scr-cardhead b{font-size:13px;font-weight:700;color:var(--parsley)}

/* ---- interactive phone: login + flow screens ---- */
.scr-login{justify-content:center;align-items:center;text-align:center;gap:12px;padding:30px 28px}
.login-logo{width:84px;height:84px;border-radius:26px;background:var(--parsley);display:grid;place-items:center;
  box-shadow:0 20px 44px -18px rgba(20,68,25,.55),inset 0 0 0 2px rgba(255,255,255,.06)}
.login-logo svg{width:46px;height:46px;color:var(--lemon)}
.login-brand{font-size:30px;font-weight:700;letter-spacing:-.045em;color:var(--parsley);line-height:1}
.login-sub{font-size:12.5px;color:var(--soft);margin-top:-4px}
.scr-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;width:100%;
  background:var(--parsley);color:var(--mint-cream);border:0;border-radius:999px;padding:15px;
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.scr-cta svg{width:16px;height:16px}
.scr-cta:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(20,68,25,.6)}
.login-alt{font-size:13px;color:var(--soft);cursor:pointer;transition:color .25s}
.login-alt:hover{color:var(--parsley)}
/* login: logo + name + tagline grouped in a frosted glass box */
.login-glass{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  width:210px;max-width:84%;aspect-ratio:1;align-self:center;
  background:rgba(9,26,14,.62);border:1px solid rgba(164,190,92,.2);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:24px;padding:22px}
/* CTAs are anchors now — remove the underline and nudge both buttons a little lower */
.scr-cta,.login-alt{text-decoration:none}
.scr-login .scr-cta{margin-top:26px}

.scr-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.scr-head .s-h{font-size:16px;font-weight:700;letter-spacing:-.02em}
.scr-back{width:30px;height:30px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--parsley);
  display:grid;place-items:center;cursor:pointer;flex:none;padding:0;transition:background .25s,transform .25s}
.scr-back svg{width:16px;height:16px}
.scr-back:hover{background:var(--bg);transform:translateX(-2px)}

.scr-tile{cursor:pointer;transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.scr-tile:hover{transform:translateY(-2px);border-color:var(--kiwi);box-shadow:0 10px 22px -14px rgba(20,68,25,.4)}
.tile-h{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--soft);font-weight:600;margin-bottom:5px}
.chev{color:var(--faint);font-size:14px;line-height:1}

/* bottom nav hidden on the login/auth screen */
.phone-scr[data-flow] .kp-tabs{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.phone-scr.flow-auth .kp-tabs{opacity:0;transform:translateY(18px);pointer-events:none}

/* ============================================================
   FLOATING COMPANION DEVICES — realistic watch + laptop
   ============================================================ */
.fdev{position:absolute;z-index:7;animation:floaty 8s var(--ease) infinite;will-change:translate;
  transition:scale .45s var(--ease),filter .45s var(--ease)}
.fdev::after{content:"";position:absolute;inset:-18px;z-index:-1;border-radius:34px;
  background:radial-gradient(circle,rgba(164,190,92,.3),transparent 70%);filter:blur(15px);pointer-events:none;animation:glowpulse 6s var(--ease) infinite}
.fdev:hover{z-index:9;filter:drop-shadow(0 0 30px rgba(164,190,92,.5)) brightness(1.05)}
/* watch + laptop scaled to 80% (composes with floaty/parallax) */

/* --- smartwatch (bottom-left) — time + heart monitor + strap --- */
.fdev-watch{top:6%;left:50%;margin-left:-76px;width:152px;z-index:7;animation-delay:.6s}
.watch-strap{position:absolute;left:50%;transform:translateX(-50%);width:74px;height:76px;z-index:1;
  background:linear-gradient(90deg,#061d0d,#124424 50%,#061d0d);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45),inset 0 0 16px rgba(0,0,0,.45)}
.watch-strap.top{top:-56px;border-radius:20px 20px 12px 12px}
.watch-strap.bot{top:138px;border-radius:12px 12px 20px 20px}
.watch-strap::after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:32px;height:4px;border-radius:3px;background:rgba(0,0,0,.32)}
.watch-strap.top::after{bottom:9px}.watch-strap.bot::after{top:9px}
.watch-body{position:relative;z-index:2;width:100%;height:158px;border-radius:44px;padding:8px;
  background:linear-gradient(150deg,#33372c,#0a0c08 78%);
  box-shadow:0 46px 80px -26px rgba(0,0,0,.92),0 0 58px -18px rgba(164,190,92,.45),
    inset 0 2px 2px rgba(255,255,255,.32),inset 0 -3px 8px rgba(0,0,0,.7),
    0 0 0 1.4px rgba(242,255,242,.85),0 0 0 3px rgba(164,190,92,.45)}
.watch-screen{position:relative;width:100%;height:100%;border-radius:37px;overflow:hidden;
  background:radial-gradient(120% 95% at 50% 0%,#143a26,#05110a 72%);
  padding:12px 12px 11px;display:flex;flex-direction:column;
  box-shadow:inset 0 0 0 1px rgba(242,255,242,.07),inset 0 16px 28px -18px rgba(164,190,92,.45)}
.watch-top{display:flex;align-items:center;justify-content:space-between;width:100%}
.wtime{font-size:11px;font-weight:700;color:var(--mint-cream);letter-spacing:.01em}
.wheart svg{width:13px;height:13px;color:var(--lemon);filter:drop-shadow(0 0 4px rgba(205,245,70,.6))}
.watch-ecg{flex:1;width:100%;display:flex;align-items:center;margin:6px 0}
.watch-ecg svg{width:100%;height:100%}
.watch-ecg path{fill:none;stroke:var(--lemon);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:240;stroke-dashoffset:0;animation:ecg 2.6s linear infinite}
@keyframes ecg{0%{stroke-dashoffset:240}100%{stroke-dashoffset:0}}
.watch-foot{display:flex;align-items:center;justify-content:center;gap:6px;line-height:1}
.watch-foot b{font-size:22px;font-weight:700;color:var(--mint-cream);letter-spacing:-.03em}
.watch-foot span{font-size:9px;color:rgba(242,255,242,.6);letter-spacing:.06em;font-weight:600}
.watch-crown{position:absolute;right:-3px;top:33%;width:7px;height:27px;border-radius:4px;
  background:linear-gradient(90deg,#41463a,#0c0e0b);box-shadow:0 2px 5px rgba(0,0,0,.6)}
.watch-btn{position:absolute;right:-2px;top:55%;width:5px;height:34px;border-radius:4px;background:#15170f}

/* --- laptop (bottom-right) --- */
.fdev-laptop{bottom:0%;right:-10%;width:250px;animation-delay:1.4s}
.lap-lid{background:linear-gradient(155deg,#33372c,#0a0c08 80%);border-radius:14px;padding:8px;
  box-shadow:0 46px 78px -28px rgba(0,0,0,.92),0 0 54px -20px rgba(164,190,92,.4),
    inset 0 2px 2px rgba(255,255,255,.28),inset 0 -3px 8px rgba(0,0,0,.6),
    0 0 0 1.4px rgba(242,255,242,.85),0 0 0 3px rgba(164,190,92,.45)}
.lap-screen{background:radial-gradient(120% 130% at 50% 0%,#123a26,#05120b 72%);border:1px solid rgba(242,255,242,.08);
  border-radius:8px;padding:11px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(242,255,242,.05),inset 0 16px 30px -20px rgba(164,190,92,.45)}
.lap-topbar{display:flex;align-items:center;gap:7px;margin-bottom:10px}
.lap-logo{width:18px;height:18px;border-radius:6px;background:var(--lemon);color:var(--parsley);display:grid;place-items:center;flex:none}
.lap-logo svg{width:11px;height:11px}
.lap-brand{font-size:12px;font-weight:700;color:var(--mint-cream);letter-spacing:-.03em}
.lap-dots{margin-left:auto;display:flex;gap:5px}
.lap-dots i{width:6px;height:6px;border-radius:50%;background:rgba(242,255,242,.22)}
.lap-grid{display:flex;gap:9px}
.lap-side{display:flex;flex-direction:column;gap:6px;width:22px;flex:none;padding-top:2px}
.lap-side i{height:6px;border-radius:3px;background:rgba(242,255,242,.13)}
.lap-side i.on{background:var(--kiwi)}
.lap-main{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.lap-cards{display:flex;gap:7px}
.lap-mini{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(242,255,242,.1);border-radius:9px;padding:7px 9px}
.lap-mini span{display:block;font-size:7px;color:rgba(242,255,242,.6);margin-bottom:3px;letter-spacing:.04em}
.lap-mini b{font-size:16px;color:var(--mint-cream);font-weight:700;letter-spacing:-.02em}
.lap-mini:first-child b{color:var(--lemon)}
.lap-chart{background:rgba(255,255,255,.04);border:1px solid rgba(242,255,242,.08);border-radius:9px;padding:8px 9px}
.lap-chart .ch-h{display:flex;justify-content:space-between;font-size:7px;color:rgba(242,255,242,.55);margin-bottom:7px;letter-spacing:.04em}
.lap-chart .ch-up{color:var(--kiwi);font-weight:700}
.lap-chart .bars{height:40px;gap:4px}
.lap-chart .bars i{background:var(--kiwi)}
.lap-chart .bars i.alt{background:var(--lemon)}
.lap-base{position:relative;height:10px;width:120%;margin-left:-10%;border-radius:2px 2px 12px 12px;
  background:linear-gradient(180deg,#2c3025,#0a0c08);box-shadow:0 16px 26px -10px rgba(0,0,0,.85)}
.lap-base::after{content:"";position:absolute;top:1px;left:50%;transform:translateX(-50%);width:56px;height:3px;border-radius:3px;background:rgba(242,255,242,.14)}

@media(max-width:940px){.fdev-watch{margin-left:-70px;width:140px}}
@media(max-width:520px){.fdev{display:none}}

/* ---- Health Journey: View Product → Sleep → Recovery → Activity → Hydration → phone ---- */
.journey{position:relative;width:100%;max-width:680px;height:210px;margin:88px 0 6px 34px}
.branch-cta{position:relative;padding:19px 40px;font-size:18px;
  background:linear-gradient(180deg,#daff72,#CDF546 72%);
  box-shadow:0 20px 48px -14px rgba(205,245,70,.55),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 7px rgba(20,68,25,.12)}
.branch-cta .play{width:21px;height:21px}
.branch-cta:hover{box-shadow:0 22px 52px -14px rgba(205,245,70,.7),0 0 30px -6px rgba(205,245,70,.6),inset 0 1px 0 rgba(255,255,255,.6);filter:brightness(1.05)}
.j-start{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:3}
.journey-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;pointer-events:none}
.j-line{fill:none;stroke:url(#jgrad);stroke-width:2.4;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(176,125,42,.5))}
.jcard{position:absolute;transform:translate(-50%,-50%);z-index:2;
  transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .45s var(--ease),filter .4s var(--ease)}
.jcard.j1{left:41%;top:29%}.jcard.j2{left:59%;top:71%}.jcard.j3{left:77%;top:29%}.jcard.j4{left:92%;top:63%}
.jcard:hover{background:rgba(255,255,255,.1);border-color:rgba(164,190,92,.55);box-shadow:0 0 26px -6px rgba(164,190,92,.55);filter:brightness(1.06);z-index:4}
@media(max-width:1024px){.journey{height:auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin:30px auto 6px}
  .j-start,.jcard{position:static;transform:none}.journey-path{display:none}}

.hero2-stage{position:relative;display:grid;place-items:center;align-content:start;min-height:640px}
.hero2-stage .phone{--pw:clamp(300px,40vw,362px);z-index:4}
/* floating health-insight glass cards — layered glass + depth */
.fmetric{position:absolute;z-index:6;display:flex;align-items:center;gap:14px;padding:17px 21px;border-radius:22px;
  color:var(--mint-cream);
  background:linear-gradient(155deg,rgba(36,48,36,.5),rgba(6,16,10,.64)),radial-gradient(130% 120% at 50% 0%,rgba(20,58,38,.46),transparent 70%);
  -webkit-backdrop-filter:blur(30px) saturate(1.7);backdrop-filter:blur(30px) saturate(1.7);
  border:1px solid rgba(242,255,242,.15);
  box-shadow:0 38px 70px -26px rgba(0,0,0,.94),0 0 50px -18px rgba(164,190,92,.42),
    inset 0 1px 0 rgba(255,255,255,.22),inset 0 -10px 22px -16px rgba(0,0,0,.6);
  animation:floaty 7s var(--ease) infinite;will-change:translate;
  transition:box-shadow .45s var(--ease),border-color .45s var(--ease),filter .4s var(--ease)}
.fmetric::after{content:"";position:absolute;inset:-16px;z-index:-1;border-radius:30px;
  background:radial-gradient(circle,rgba(164,190,92,.32),transparent 70%);filter:blur(13px);pointer-events:none;animation:glowpulse 5s var(--ease) infinite}
.fmetric:hover{z-index:9;border-color:rgba(164,190,92,.6);filter:brightness(1.06);
  box-shadow:0 42px 78px -24px rgba(0,0,0,.95),0 0 70px -14px rgba(164,190,92,.7),
    inset 0 1px 0 rgba(255,255,255,.4),inset 0 -10px 22px -16px rgba(0,0,0,.5)}
/* icon-style cards (CTA section) */
.fmetric .fm-ic{width:34px;height:34px;border-radius:11px;background:rgba(164,190,92,.24);color:var(--lemon);display:grid;place-items:center;flex:none}
.fmetric .fm-ic svg{width:17px;height:17px}
.fmetric .fm-ic+div b{display:block;font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1}
.fmetric .fm-ic+div small{font-size:11px;color:rgba(242,255,242,.7)}
/* card inner: ring viz */
.fm-viz{position:relative;width:46px;height:46px;flex:none;display:grid;place-items:center}
.fm-ring{width:46px;height:46px;transform:rotate(-90deg)}
.fm-ring .trk{fill:none;stroke:rgba(242,255,242,.16);stroke-width:4.5}
.fm-ring .rg{fill:none;stroke:var(--lemon);stroke-width:4.5;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(205,245,70,.55))}
.fm-rv{position:absolute;font-size:15px;font-weight:700;color:var(--mint-cream)}
/* card inner: meta + sparkline */
.fm-meta{display:flex;flex-direction:column;gap:4px}
.fm-meta small{font-size:11px;color:rgba(242,255,242,.62);font-weight:500;letter-spacing:.03em}
.fm-meta b{display:flex;align-items:center;gap:7px;font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--mint-cream);line-height:1}
.fm-u{font-size:10px;color:rgba(242,255,242,.6);font-weight:500;margin-left:-2px}
.fm-tag{font-size:10px;font-weight:700;padding:2px 6px;border-radius:7px;letter-spacing:0}
.fm-tag.up{background:rgba(164,190,92,.2);color:var(--kiwi)}
.fm-tag.down{background:rgba(164,190,92,.2);color:var(--kiwi)}
.fm-spark{width:62px;height:32px;flex:none}
.fm-spark path{fill:none;stroke:var(--kiwi);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px rgba(164,190,92,.5))}
/* water-glass + steps card visuals */
.fm-glass{position:relative;width:30px;height:42px;flex:none;overflow:hidden;
  clip-path:polygon(15% 0,85% 0,78% 100%,22% 100%);
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px rgba(242,255,242,.28)}
.fg-water{position:absolute;left:-12%;right:-12%;bottom:0;height:50%;background:linear-gradient(180deg,#c6f56e,#7fc24a)}
.fg-water::before{content:"";position:absolute;top:-4px;left:0;right:0;height:8px;border-radius:50%;background:#c6f56e;opacity:.7;animation:wave 3s ease-in-out infinite}
.fm-rv.ic{color:var(--kiwi)}
.fm-rv.ic svg{width:14px;height:14px;display:block}
.fm-goal{font-size:9.5px;color:rgba(242,255,242,.55);font-weight:500;letter-spacing:.02em}
/* cards positioned as callouts over the title letters (smaller, slight letter overlap) */
.fmetric.f1,.fmetric.f2{padding:15px 20px;gap:13px;border-radius:20px}
.fmetric.f1{top:-44px;left:calc(40% + 60px);animation-delay:0s}
.fmetric.f2{top:270px;left:-8px;animation-delay:1.1s}
@media(max-width:940px){.fmetric.f1{top:-38px;left:42%}.fmetric.f2{top:206px;left:0}}
@keyframes glowpulse{0%,100%{opacity:.62}50%{opacity:1}}
@media(max-width:520px){.fmetric{display:none}}
.hero2-scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;
  align-items:center;gap:8px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,255,242,.5)}
.hero2-scroll .ms{width:22px;height:34px;border:1.5px solid rgba(242,255,242,.4);border-radius:14px;position:relative}
.hero2-scroll .ms::after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:3px;height:7px;border-radius:2px;background:var(--lemon);animation:scrolldot 1.8s var(--ease) infinite}
@keyframes scrolldot{0%{opacity:0;top:6px}40%{opacity:1}100%{opacity:0;top:18px}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ============================================================
   CTA 2
   ============================================================ */
.cta2-wrap{padding-block:clamp(60px,7.5vw,114px);background:transparent}
.cta2{position:relative;overflow:hidden;border-radius:clamp(28px,4vw,48px);text-align:center;
  padding:clamp(60px,9vw,140px) clamp(28px,6vw,80px);
  border:1.5px solid rgba(164,190,92,.55);
  background:radial-gradient(120% 120% at 50% -10%,rgba(164,190,92,.22),transparent 55%),linear-gradient(180deg,#0e2a14,#06140a)}
.cta2 h2{color:var(--mint-cream);font-size:clamp(40px,7vw,96px);line-height:.95;letter-spacing:-.045em;margin-bottom:22px;position:relative;z-index:3}
.cta2 p{color:rgba(242,255,242,.74);font-size:clamp(16px,1.5vw,20px);max-width:46ch;margin:0 auto 36px;position:relative;z-index:3}
.cta2 .btn{position:relative;z-index:3}
.cta2 .fmetric{color:var(--mint-cream)}
.cta2 .cta-f1{top:14%;left:8%}.cta2 .cta-f2{bottom:16%;right:9%;animation-delay:1.3s}
@media(max-width:680px){.cta2 .fmetric{display:none}}
/* centered brand mark above the CTA heading (no background) */
.cta2-mark{display:block;width:clamp(74px,9.5vw,124px);height:clamp(74px,9.5vw,124px);margin:0 auto clamp(16px,2.4vw,28px);
  color:var(--lemon);position:relative;z-index:3}
.cta2-mark svg{width:100%;height:100%;filter:drop-shadow(0 0 22px rgba(205,245,70,.5));animation:floaty 7s var(--ease) infinite}

/* hero ambient sensor rings (replaces plant motifs) */
.sensor-ring{position:absolute;border-radius:50%;z-index:1;pointer-events:none;
  border:1.5px solid rgba(164,190,92,.3);
  box-shadow:0 0 32px -8px rgba(164,190,92,.4),inset 0 0 22px -8px rgba(164,190,92,.35);
  animation:sensorPulse 6s var(--ease) infinite}
.sensor-ring::after{content:"";position:absolute;inset:24%;border-radius:50%;border:1px solid rgba(164,190,92,.22)}
@keyframes sensorPulse{0%,100%{transform:scale(.94)}50%{transform:scale(1.06)}}
@media(max-width:520px){.sensor-ring{display:none}}

/* ---- reveal helpers for stagger ---- */
.st>*{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.st.in>*{opacity:1;transform:none}
.st.in>*:nth-child(1){transition-delay:.05s}.st.in>*:nth-child(2){transition-delay:.13s}
.st.in>*:nth-child(3){transition-delay:.21s}.st.in>*:nth-child(4){transition-delay:.29s}
.st.in>*:nth-child(5){transition-delay:.37s}.st.in>*:nth-child(6){transition-delay:.45s}

/* ============================================================
   PAGE 2 — DASHBOARD EMBED
   ============================================================ */
.dash-embed{position:relative;background:transparent}
.dash-intro{max-width:var(--maxw);margin-inline:auto;padding:clamp(76px,9vw,120px) var(--pad) clamp(28px,4vw,44px);text-align:center}
/* big heading sitting directly on top of the dashboard frame */
.dash-bigtitle{max-width:1320px;margin:0 auto;padding:clamp(110px,13vw,200px) clamp(12px,2vw,28px) 0;
  text-align:center;font-size:clamp(46px,9vw,132px);line-height:.92;letter-spacing:-.045em;color:var(--mint-cream)}
.dash-intro .t-h2{color:var(--mint-cream)}
.dash-intro .hl{color:var(--lemon)}
.dash-intro .eyebrow{color:var(--kiwi);justify-content:center}
.dash-intro .eyebrow::before{background:var(--kiwi)}
.dash-frame{max-width:1320px;margin:0 auto;padding:0 clamp(12px,2vw,28px) clamp(60px,7.5vw,114px)}
/* Embed renders at a fixed desktop width (dashboard looks exactly like it does at
   normal zoom — stat chips stay on one line, cards aligned) then scales down to fit
   the container. Proportions stay exact: no crop, no distortion, no empty space.
   The scaler's height is set to the scaled content height at runtime (JS). */
.dash-scaler{position:relative;width:100%;overflow:hidden;border-radius:28px;
  box-shadow:0 50px 110px -50px rgba(20,68,25,.5),0 0 0 1px rgba(20,68,25,.08)}
.dash-scaler iframe{display:block;width:1440px;height:1160px;border:0;transform-origin:top left}

/* ============================================================
   3 — FEATURES · triangular ecosystem (one immersive section)
   ============================================================ */
.chap--feat{background:linear-gradient(180deg,#E7F5DE 0%,#eef8e6 100%);color:var(--ink);padding-block:clamp(72px,9vw,140px)}
.chap--feat .chap-head{max-width:680px}
.chap--feat .chap-head p{margin-top:16px;max-width:54ch}
.chap--feat .eyebrow{color:var(--parsley)}
.chap--feat .phone{--pw:280px;z-index:4;box-shadow:0 60px 110px -46px rgba(20,68,25,.45),inset 0 0 0 2px rgba(255,255,255,.5)}
.feat-tri{display:grid;grid-template-columns:1fr 1fr;gap:clamp(54px,6vw,86px) clamp(40px,6vw,120px);
  max-width:1000px;margin:clamp(46px,5vw,76px) auto 0;align-items:start}
.ftr{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
.ftr-sleep{grid-column:1 / -1;justify-self:center;max-width:440px}
.ftr-phone{position:relative;display:grid;place-items:center;margin-bottom:26px}
.ftr-phone .phone-glow{background:radial-gradient(circle,rgba(164,190,92,.42),transparent 62%)}
.ftr-info .eyebrow{justify-content:center}
.ftr-metric{display:flex;flex-direction:column;align-items:center;margin:14px 0 10px}
.ftr-metric b{font-size:clamp(40px,5vw,58px);font-weight:700;letter-spacing:-.04em;color:var(--cafe);line-height:1}
.ftr-metric small{font-size:13px;color:var(--soft);margin-top:6px;font-weight:500}
.ftr-info p{font-size:15px;line-height:1.5;color:var(--soft);max-width:34ch;margin-inline:auto}
@media(max-width:760px){.feat-tri{grid-template-columns:1fr;gap:64px}.ftr-sleep{grid-column:auto;max-width:none}}

/* ============================================================
   4 — BRANDING · design language, interactive
   ============================================================ */
.chap--brand{background:linear-gradient(180deg,#eef8e6 0%,#F2FFF2 100%);color:var(--ink);padding-block:clamp(72px,9vw,140px)}
.brand-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center}
@media(max-width:880px){.brand-wrap{grid-template-columns:1fr;gap:34px}}
.brand-lead .eyebrow{color:var(--parsley)}
.brand-statement{font-size:clamp(30px,4.4vw,52px);line-height:1.06;letter-spacing:-.035em;color:var(--text);margin:18px 0}
.brand-lead .t-body{max-width:42ch}
.brand-tabs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bcard{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:rgba(255,255,255,.62);
  border-radius:18px;padding:16px 18px;font-family:inherit;font-size:15px;font-weight:600;color:var(--text);
  cursor:pointer;text-align:left;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s,border-color .3s}
.bcard:last-child{grid-column:1 / -1}
.bcard .bc-ic{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;background:rgba(20,68,25,.08);color:var(--parsley);transition:.3s}
.bcard .bc-ic svg{width:19px;height:19px}
.bcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.bcard.on{background:var(--parsley);color:var(--mint-cream);border-color:transparent}
.bcard.on .bc-ic{background:var(--lemon);color:var(--parsley)}
.brand-stage{margin-top:clamp(30px,4vw,52px)}
.bpanel{display:none}
.bpanel.on{display:block;animation:bpFade .5s var(--ease)}
@keyframes bpFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* brand */
.bp-logo{display:flex;align-items:center;gap:16px;justify-content:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);padding:clamp(30px,5vw,56px)}
.bp-logo .bmark{width:54px;height:54px;border-radius:16px;background:var(--parsley);color:var(--lemon);display:grid;place-items:center;flex:none}
.bp-logo .bmark svg{width:30px;height:30px}
.bp-logo .lw{font-size:clamp(34px,5vw,56px);font-weight:700;letter-spacing:-.05em;color:var(--text)}
.bp-note{text-align:center;color:var(--soft);font-size:14px;margin-top:16px}
/* colors */
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:780px){.swatches{grid-template-columns:repeat(3,1fr)}}
@media(max-width:460px){.swatches{grid-template-columns:repeat(2,1fr)}}
.swatch{border-radius:18px;padding:22px 18px;min-height:122px;display:flex;flex-direction:column;justify-content:flex-end;
  border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.swatch:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.swatch b{font-size:15px;font-weight:700;letter-spacing:-.02em}
.swatch span{font-size:12px;opacity:.72;margin-top:3px}
/* type */
.bp-type{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);padding:clamp(28px,4vw,52px)}
.type-mega{font-size:clamp(64px,12vw,150px);font-weight:700;letter-spacing:-.05em;line-height:.9;color:var(--text)}
.type-weights{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
@media(max-width:560px){.type-weights{grid-template-columns:repeat(2,1fr)}}
.type-weights>div{border-top:2px solid var(--line);padding-top:12px;font-size:clamp(18px,2vw,24px);letter-spacing:-.02em;color:var(--text)}
.type-weights .w4{font-weight:400}.type-weights .w5{font-weight:500}.type-weights .w6{font-weight:600}.type-weights .w7{font-weight:700}
.type-weights small{display:block;font-size:12px;color:var(--faint);font-weight:500;margin-top:6px}
/* icons */
.icongrid-b{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:780px){.icongrid-b{grid-template-columns:repeat(4,1fr)}}
@media(max-width:460px){.icongrid-b{grid-template-columns:repeat(3,1fr)}}
.icobox{aspect-ratio:1;display:grid;place-items:center;border-radius:18px;background:rgba(255,255,255,.62);
  border:1px solid var(--line);color:var(--parsley);transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s,color .3s}
.icobox svg{width:26px;height:26px}
.icobox:hover{transform:translateY(-4px);background:var(--parsley);color:var(--lemon);
  box-shadow:0 20px 40px -22px rgba(20,68,25,.5),0 0 32px -8px rgba(164,190,92,.65)}
/* components */
.comp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:880px){.comp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.comp-grid{grid-template-columns:1fr}}
.comp-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);padding:22px}
.comp-card h5{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:16px;font-weight:600}
.comp-stack{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.comp-stack .btn{width:100%;padding:13px 22px;font-size:14px}
.ui-input{display:flex;align-items:center;gap:10px;width:100%;background:var(--bg);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;font-size:13px;color:var(--soft)}
.ui-input svg{width:16px;height:16px;color:var(--parsley);flex:none}
.ui-input.focus{border-color:var(--parsley);color:var(--text);box-shadow:0 0 0 3px rgba(20,68,25,.08)}

/* ============================================================
   HERO scroll-life · phone scales toward the dashboard
   ============================================================ */
#heroPhone{transform-origin:center 40%;will-change:transform;animation:heroFloat 7s var(--ease) infinite;margin-left:22px;margin-top:12px}
@keyframes heroFloat{0%,100%{transform:translateY(0) scale(var(--hs,1))}50%{transform:translateY(-13px) scale(var(--hs,1))}}

@media (prefers-reduced-motion: reduce){
  .fmetric,.fdev,.dev-tag,.wnode,.parts span,.sleep-viz .wv,.eco2-lines path{animation:none!important}
  .st>*{opacity:1!important;transform:none!important}
  #heroPhone{transform:none!important;animation:none!important}
}

/* ============================================================
   HERO PHONE — dark-mode (inverted) UI · minimal · bold
   scoped to #heroPhone so other phones stay unchanged
   ============================================================ */
:is(#heroPhone,.bento){--soft:rgba(242,255,242,.55);--cafe:#A4BE5C;--line:rgba(242,255,242,.12)}
:is(#heroPhone,.bento) .phone-scr{background:#06140a}
:is(#heroPhone,.bento) .scr{background:radial-gradient(135% 90% at 50% 0%,#11331f,#06140a 80%);color:var(--mint-cream);font-weight:700}
:is(#heroPhone,.bento) .scr *{font-weight:700}
:is(#heroPhone,.bento) .scr-status{color:rgba(242,255,242,.8)}
:is(#heroPhone,.bento) .scr-card{background:rgba(255,255,255,.055);border-color:rgba(242,255,242,.1)}
:is(#heroPhone,.bento) .scr-top .s-h,:is(#heroPhone,.bento) .scr-head .s-h{color:var(--mint-cream)}
:is(#heroPhone,.bento) .scr-av{background:var(--lemon);color:#06140a}
/* rings */
:is(#heroPhone,.bento) .ring{background:conic-gradient(var(--rc) calc(var(--p)*1%),rgba(242,255,242,.12) 0)}
:is(#heroPhone,.bento) .ring::before{background:#0b2012}
:is(#heroPhone,.bento) .ring-c b{color:var(--mint-cream)}
:is(#heroPhone,.bento) .ring-c span{color:rgba(242,255,242,.55)}
/* bars (both light-green on dark) */
:is(#heroPhone,.bento) .bars i{background:var(--kiwi)}
:is(#heroPhone,.bento) .bars i.alt{background:var(--lemon)}
/* metric rows */
:is(#heroPhone,.bento) .mrow{color:rgba(242,255,242,.7)}
:is(#heroPhone,.bento) .mrow b{color:var(--mint-cream)}
/* segmented control (sleep) */
:is(#heroPhone,.bento) .seg{background:rgba(255,255,255,.07)}
:is(#heroPhone,.bento) .seg button{color:rgba(242,255,242,.55)}
:is(#heroPhone,.bento) .seg button.on{background:var(--lemon);color:#06140a;box-shadow:none}
/* card headers / tiles / sublabels */
:is(#heroPhone,.bento) .scr-cardhead span{color:rgba(242,255,242,.55)}
:is(#heroPhone,.bento) .scr-cardhead b{color:var(--mint-cream)}
:is(#heroPhone,.bento) .scr-sublabel{color:rgba(242,255,242,.55)}
:is(#heroPhone,.bento) .tile-h{color:rgba(242,255,242,.55)}
:is(#heroPhone,.bento) .chev{color:rgba(242,255,242,.4)}
:is(#heroPhone,.bento) .scr-tile:hover{border-color:var(--kiwi)}
/* back button */
:is(#heroPhone,.bento) .scr-back{background:rgba(255,255,255,.06);border-color:rgba(242,255,242,.14);color:var(--mint-cream)}
:is(#heroPhone,.bento) .scr-back:hover{background:rgba(255,255,255,.12)}
/* insight */
:is(#heroPhone,.bento) .scr-insight{background:rgba(255,255,255,.05);border-color:rgba(242,255,242,.1);color:rgba(242,255,242,.62)}
:is(#heroPhone,.bento) .scr-insight .si-ic{background:var(--lemon);color:#06140a}
:is(#heroPhone,.bento) .scr-insight b{color:var(--mint-cream)}
/* bottom nav */
:is(#heroPhone,.bento) .kp-tabs{background:rgba(255,255,255,.06);border-color:rgba(242,255,242,.1)}
:is(#heroPhone,.bento) .kp-tabs button{color:rgba(242,255,242,.5);font-weight:700}
:is(#heroPhone,.bento) .kp-tabs button.on{background:var(--lemon);color:#06140a}
:is(#heroPhone,.bento) .kp-tabs button:hover:not(.on){color:var(--mint-cream)}
/* login */
:is(#heroPhone,.bento) .login-logo{background:var(--lemon)}
:is(#heroPhone,.bento) .login-logo svg{color:#06140a}
:is(#heroPhone,.bento) .login-brand{color:var(--kiwi)}
:is(#heroPhone,.bento) .login-sub{color:var(--mint-cream)}
:is(#heroPhone,.bento) .login-alt{color:rgba(242,255,242,.55)}
:is(#heroPhone,.bento) .login-alt:hover{color:var(--mint-cream)}
:is(#heroPhone,.bento) .scr-cta{background:var(--lemon);color:#06140a}
:is(#heroPhone,.bento) .scr-cta:hover{box-shadow:0 16px 30px -12px rgba(205,245,70,.6)}

/* ============================================================
   CUSTOM CURSOR — soft green glow, trailing, magnetic feel
   ============================================================ */
.kcursor-dot,.kcursor-ring{position:fixed;left:0;top:0;border-radius:50%;pointer-events:none;z-index:9999;opacity:0;
  will-change:transform;transition:opacity .35s var(--ease)}
.kcursor-dot{width:7px;height:7px;background:var(--kiwi);box-shadow:0 0 10px rgba(164,190,92,.9)}
.kcursor-ring{width:34px;height:34px;border:1.5px solid rgba(164,190,92,.45);
  background:radial-gradient(circle,rgba(164,190,92,.1),transparent 68%);
  transition:width .35s var(--ease),height .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease),opacity .35s var(--ease)}
.kcursor-ring.k-hover{width:58px;height:58px;border-color:rgba(205,245,70,.7);background:radial-gradient(circle,rgba(164,190,92,.18),transparent 70%)}
.kcursor-ring.k-down{width:26px;height:26px;border-color:rgba(205,245,70,.85)}
html.has-kcursor,html.has-kcursor *{cursor:none!important}
@media (hover:none),(pointer:coarse){.kcursor-dot,.kcursor-ring{display:none!important}}

/* ============================================================
   TECHNOLOGY PAGE — merged sections (Apple-style overview)
   ============================================================ */
.sec-bigtitle{max-width:var(--maxw);margin:0 auto clamp(34px,5vw,60px);padding:0 var(--pad);
  text-align:center;font-size:clamp(40px,7vw,94px);line-height:.95;letter-spacing:-.045em;color:var(--text)}

/* TECH 01 · ecosystem */
.chap--eco{background:linear-gradient(180deg,#E7F5DE 0%,#eef8e6 100%);color:var(--ink)}
.chap--eco .phone{--pw:clamp(216px,22vw,264px);z-index:2;
  box-shadow:0 60px 110px -46px rgba(20,68,25,.45),inset 0 0 0 2px rgba(255,255,255,.5)}
.chap--eco .ftr-phone .phone-glow{background:radial-gradient(circle,rgba(164,190,92,.42),transparent 62%)}
.eco-wrap{display:flex;flex-direction:column;gap:clamp(30px,4vw,54px)}
.eco-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:start;justify-items:center;width:100%;max-width:940px;margin-inline:auto}
.eco-row--watch{max-width:660px}
.eco-device{display:flex;flex-direction:column;align-items:center;text-align:center}
.eco-cap{margin-top:20px;max-width:30ch}
.eco-cap b{display:block;font-size:18px;letter-spacing:-.02em;color:var(--text);margin-bottom:5px}
.eco-cap span{font-size:14px;line-height:1.5;color:var(--soft)}
@media(max-width:760px){.eco-row{grid-template-columns:1fr;gap:60px}}

/* static watch (reuses .watch-body / .watch-strap / .watch-screen styles) */
.eco-watch{position:relative;width:150px;height:158px;margin:56px 0 60px}
.watch-mid{margin:8px 0 4px;text-align:center;line-height:1}
.watch-mid b{font-size:30px;font-weight:700;color:var(--mint-cream);letter-spacing:-.03em}
.watch-mid b span{font-size:15px;color:rgba(242,255,242,.6)}
.watch-mid em{display:block;font-style:normal;font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,255,242,.55);margin-top:4px}
.watch-prog{height:6px;border-radius:99px;background:rgba(242,255,242,.16);overflow:hidden;margin:2px 4px 0}
.watch-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--kiwi),var(--lemon));border-radius:99px}

/* TECH 02 · design system */
.chap--ds2{background:linear-gradient(180deg,#eef8e6 0%,#F2FFF2 100%);color:var(--ink)}
.ds2-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:start;max-width:1080px;margin-inline:auto}
@media(max-width:820px){.ds2-grid{grid-template-columns:1fr;gap:34px}}

/* TECH 03 · icons & components */
.chap--blocks{background:#F2FFF2;color:var(--ink)}
.blocks-grid{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px);max-width:1080px;margin-inline:auto}

/* ============================================================
   TECHNOLOGY — constant dark theme · white headings · bento
   ============================================================ */
.chap--tech{background:transparent;color:var(--mint-cream);padding-block:clamp(60px,7.5vw,114px)}
.sec-glow{position:absolute;top:6%;left:50%;transform:translateX(-50%);width:min(880px,82%);height:62%;
  background:radial-gradient(circle,rgba(164,190,92,.16),transparent 64%);filter:blur(44px);z-index:0;pointer-events:none}
.sec-bigtitle{position:relative;z-index:2;max-width:1080px;margin:0 auto;padding:0 var(--pad);
  text-align:center;font-size:clamp(40px,7vw,92px);line-height:.95;letter-spacing:-.045em;color:var(--mint-cream)}
.chap--tech .chap-in{position:relative;z-index:2;margin-top:clamp(16px,2.2vw,28px)}

/* frosted box / divided bento */
.tech-box{position:relative;color:var(--mint-cream);max-width:1000px;margin-inline:auto;
  display:flex;flex-direction:column;gap:clamp(26px,3vw,40px);padding:clamp(28px,3.4vw,48px);
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid rgba(242,255,242,.14);border-radius:30px;
  box-shadow:0 50px 100px -50px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.18)}
.tech-sub{display:flex;flex-direction:column}
.bento{position:relative;max-width:1000px;margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,18px)}
@media(max-width:600px){.bento{grid-template-columns:1fr}}
.bento-cell{position:relative;color:var(--mint-cream);display:flex;flex-direction:column;align-items:center;
  background:linear-gradient(160deg,rgba(22,42,28,.82),rgba(8,18,11,.88));border:1px solid rgba(242,255,242,.12);border-radius:26px;
  box-shadow:0 34px 64px -40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1);
  padding:clamp(24px,3vw,40px) clamp(16px,2vw,28px)}
.bc-tag{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lemon);margin-bottom:14px}
.bento .eco-stage{position:relative;display:grid;place-items:center;width:100%}
.bento .phone{--pw:clamp(196px,20vw,236px);z-index:2;
  box-shadow:0 50px 90px -44px rgba(0,0,0,.7),0 0 0 1.5px rgba(242,255,242,.42),inset 0 0 0 2px rgba(255,255,255,.08)}
.bento .phone-glow{background:radial-gradient(circle,rgba(164,190,92,.4),transparent 60%)}
.eco-watch{position:relative;width:148px;height:158px;margin:38px 0 52px}
.watch-mid{margin:8px 0 4px;text-align:center;line-height:1}
.watch-mid b{font-size:30px;font-weight:700;color:var(--mint-cream);letter-spacing:-.03em}
.watch-mid b span{font-size:15px;color:rgba(242,255,242,.6)}
.watch-mid em{display:block;font-style:normal;font-size:7.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,255,242,.55);margin-top:4px}
.watch-prog{height:6px;border-radius:99px;background:rgba(242,255,242,.16);overflow:hidden;margin:2px 4px 0}
.watch-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--kiwi),var(--lemon));border-radius:99px}

/* swatches · one line, thick, colour only */
.tech-box .swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:640px){.tech-box .swatches{grid-template-columns:repeat(3,1fr)}}
@media(max-width:430px){.tech-box .swatches{grid-template-columns:repeat(2,1fr)}}
.tech-box .swatch{min-height:128px;border-radius:18px;border:1px solid rgba(242,255,242,.12);box-shadow:none}
.tech-box .swatch:hover{transform:none}
.tech-box .swatch b,.tech-box .swatch span{display:none}

/* typography · light on dark, no numbers */
.type-block .type-mega{font-size:clamp(54px,10vw,122px);font-weight:700;letter-spacing:-.05em;line-height:.9;color:var(--kiwi)}
.type-block .type-weights{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
@media(max-width:560px){.type-block .type-weights{grid-template-columns:repeat(2,1fr)}}
.type-block .type-weights>div{border-top:2px solid rgba(242,255,242,.18);padding-top:12px;font-size:clamp(17px,1.9vw,23px);letter-spacing:-.02em;color:var(--mint-cream)}
.type-block .w4{font-weight:400}.type-block .w5{font-weight:500}.type-block .w6{font-weight:600}.type-block .w7{font-weight:700}

/* icons · glassy tiles */
.ig-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
@media(max-width:780px){.ig-grid{grid-template-columns:repeat(6,1fr)}}
@media(max-width:460px){.ig-grid{grid-template-columns:repeat(4,1fr)}}
.ig-tile{aspect-ratio:1;display:grid;place-items:center;border-radius:16px;color:var(--kiwi);
  background:rgba(255,255,255,.05);border:1px solid rgba(242,255,242,.12);transition:background .3s,color .3s,transform .3s var(--ease)}
.ig-tile svg{width:24px;height:24px}
.ig-tile:hover{background:rgba(164,190,92,.18);color:var(--lemon);transform:translateY(-3px)}

/* components · glassy panels */
.cg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:880px){.cg-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.cg-grid{grid-template-columns:1fr}}
.cg-card{background:rgba(255,255,255,.05);border:1px solid rgba(242,255,242,.12);border-radius:18px;
  padding:20px;min-height:150px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px}
.cg-btns{display:flex;flex-direction:column;gap:10px;width:100%}
.cg-btn{text-align:center;padding:12px;border-radius:999px;font-size:14px;font-weight:700}
.cg-btn--lemon{background:var(--lemon);color:var(--parsley)}
.cg-btn--ghost{border:1.5px solid rgba(242,255,242,.3);color:var(--mint-cream)}
.cg-switch{width:48px;height:28px;border-radius:99px;background:var(--lemon);position:relative}
.cg-switch::after{content:"";position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;background:var(--parsley)}
.cg-card .bars{width:100%}.cg-card .bars i{background:var(--kiwi)}.cg-card .bars i.alt{background:var(--lemon)}
.tech-box .ring{background:conic-gradient(var(--rc) calc(var(--p)*1%),rgba(242,255,242,.14) 0)}
.tech-box .ring::before{background:#13251a}

/* cafe-royale leaves drifting in hero */
.leaf{position:absolute;z-index:1;color:#6D460D;pointer-events:none;opacity:.85}
.leaf svg{width:100%;height:100%;overflow:visible}
.leaf .fil{fill:currentColor}

/* ============================================================
   SITE BACKGROUND — fixed parallax branches + leaves
   ============================================================ */
.site-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* faint product grid (sensor field) */
.sb-grid{position:absolute;inset:-2px;
  background-image:linear-gradient(rgba(164,190,92,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(164,190,92,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(125% 100% at 50% 0%,#000 32%,transparent 80%);
  mask-image:radial-gradient(125% 100% at 50% 0%,#000 32%,transparent 80%)}
/* slow scanning sweep */
.sb-scan{position:absolute;left:0;right:0;height:42%;top:-42%;
  background:linear-gradient(180deg,transparent,rgba(164,190,92,.05),transparent);animation:sbScan 15s linear infinite}
@keyframes sbScan{0%{top:-42%}100%{top:100%}}
/* drifting biometric signal */
.sb-wave{position:absolute;left:0;right:0;bottom:9%;width:100%;height:160px;opacity:.55}
.sb-wave path{fill:none;stroke:rgba(164,190,92,.16);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:6 12;animation:sbWave 9s linear infinite}
@keyframes sbWave{to{stroke-dashoffset:-180}}
/* ambient data nodes */
.sb-node{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--kiwi);opacity:.4;
  box-shadow:0 0 0 4px rgba(164,190,92,.08),0 0 12px rgba(164,190,92,.5);animation:sbPulse 4.5s var(--ease) infinite}
.sb-node:nth-child(odd){animation-delay:1.4s}
.sb-node:nth-child(3n){animation-delay:2.7s}
@keyframes sbPulse{0%,100%{opacity:.22;transform:scale(.8)}50%{opacity:.6;transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){.sb-scan,.sb-wave path,.sb-node{animation:none!important}}

/* hero watch · landscape case · straps wrap left/right · content upright */
.fdev-watch .watch-body{width:100%;height:150px;border-radius:44px}
.fdev-watch .watch-screen{border-radius:36px;padding:14px;justify-content:center;gap:8px}
.fdev-watch .watch-ecg{flex:none;width:100%;height:50px;margin:0}
.fdev-watch .watch-foot b{font-size:26px}
.fdev-watch .watch-strap{top:50%;left:auto;transform:translateY(-50%);width:132px;height:90px}
.fdev-watch .watch-strap.top{left:-116px;border-radius:24px 8px 8px 24px}
.fdev-watch .watch-strap.bot{right:-116px;border-radius:8px 24px 24px 8px}
.fdev-watch .watch-strap::after{display:none}
.fdev-watch .watch-crown{top:50%;right:-3px;transform:translateY(-50%);width:6px;height:32px}
.fdev-watch .watch-btn{display:none}

/* bento glowing emote (replaces text label) */
.bc-emote{position:absolute;top:clamp(16px,2vw,24px);left:clamp(16px,2vw,24px);z-index:3;width:42px;height:42px;border-radius:13px;
  display:grid;place-items:center;color:var(--lemon);
  background:rgba(164,190,92,.15);border:1px solid rgba(164,190,92,.34);
  box-shadow:0 0 28px -6px rgba(205,245,70,.6),inset 0 1px 0 rgba(255,255,255,.2)}
.bc-emote svg{width:21px;height:21px;filter:drop-shadow(0 0 5px rgba(205,245,70,.55))}
/* colour names · black + bold over swatches */
.tech-box .swatch{display:flex;align-items:flex-end;padding:14px}
.tech-box .swatch b{display:block;font-size:13.5px;font-weight:700;color:#fff;letter-spacing:-.01em;text-shadow:0 1px 4px rgba(0,0,0,.45)}
.tech-box .swatch[style*="F2FFF2"] b{color:#0a140c;text-shadow:none}

/* watch strap pieces peeking from behind the phone sides */
.strap-back{position:absolute;z-index:3;width:54px;height:74px;border-radius:14px;
  background:linear-gradient(180deg,#0f3a20,#06160c);box-shadow:0 16px 26px -12px rgba(0,0,0,.65),inset 0 0 0 1px rgba(0,0,0,.4)}
.strap-back.sb-l{top:11%;left:calc(50% - 202px)}
.strap-back.sb-r{top:11%;left:calc(50% + 150px)}
@media(max-width:940px){.strap-back{display:none}}

/* ===== watch as part of the phone (move together) + realistic straps ===== */
.fdev-watch{position:absolute;top:30px;left:50%;margin-left:-76px;width:152px;z-index:8;animation:none}
.fdev-watch .watch-body{box-shadow:0 24px 44px -22px rgba(0,0,0,.7),0 0 0 1.6px rgba(242,255,242,.62),inset 0 1px 0 rgba(255,255,255,.22)}
.fdev-watch .watch-strap{top:50%;left:auto;transform:translateY(-50%);width:132px;height:92px;
  background:linear-gradient(180deg,#0f3c21,#082a13);border:1.6px solid rgba(242,255,242,.6);box-shadow:inset 0 0 14px rgba(0,0,0,.4)}
.fdev-watch .watch-strap.top{left:-116px;border-radius:9px 5px 5px 9px}
.fdev-watch .watch-strap.bot{right:-116px;border-radius:5px 9px 9px 5px}
.fdev-watch .watch-strap::after{content:"";display:block;position:absolute;top:11px;bottom:11px;left:auto;width:2px;height:auto;border-radius:2px;background:rgba(242,255,242,.4);transform:none}
.fdev-watch .watch-strap.top::after{right:9px}
.fdev-watch .watch-strap.bot::after{left:9px}
.fdev-watch .watch-crown{top:50%;right:-3px;transform:translateY(-50%);width:6px;height:30px}
/* front camera / notch · white boundary */
#heroPhone::after{box-shadow:0 0 0 1.6px rgba(242,255,242,.62)}

/* design system · brand (3rd content) */
.ds-brand{display:flex;align-items:center;gap:16px}
.ds-logo{width:52px;height:52px;border-radius:15px;background:var(--lemon);color:var(--parsley);display:grid;place-items:center;flex:none;box-shadow:0 0 26px -6px rgba(205,245,70,.5)}
.ds-logo svg{width:30px;height:30px}
.ds-name{font-size:clamp(30px,4vw,48px);font-weight:700;letter-spacing:-.045em;color:var(--mint-cream)}

/* bento · central brand row (between phones and watches) */
.bc-brand{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;
  display:inline-flex;align-items:center;gap:12px;padding:11px 24px 11px 11px;border-radius:999px;
  background:linear-gradient(160deg,rgba(22,42,28,.94),rgba(8,18,11,.96));
  border:1px solid rgba(242,255,242,.18);box-shadow:0 26px 54px -22px rgba(0,0,0,.75),0 0 34px -8px rgba(205,245,70,.45),inset 0 1px 0 rgba(255,255,255,.16)}
.bc-brand .ds-logo{width:42px;height:42px;border-radius:13px}
.bc-brand .ds-logo svg{width:24px;height:24px}
.bc-brand .ds-name{font-size:clamp(22px,2.4vw,30px)}

/* bento device UIs · cleaner / more visual (hide status + watch time) */
.bento .scr-status{display:none}
.bento .wtime{display:none}
.bento .watch-top{justify-content:center}
.bento .scr{padding-top:24px}

/* ============================================================
   ECOSYSTEM — connected intelligence system (refinement)
   per-card identity · floating metric chips · data links · core
   ============================================================ */
.bento-cell{overflow:hidden}
.bento .eco-stage,.bento .eco-watch{position:relative;z-index:1}

/* card identity: icon + name + descriptor (top-left of each cell) */
.bc-head{position:absolute;top:clamp(16px,2vw,24px);left:clamp(16px,2vw,24px);z-index:6;
  display:flex;align-items:center;gap:11px}
.bc-head .bc-emote{position:static;top:auto;left:auto;margin:0}
.bc-name{display:flex;flex-direction:column;line-height:1.05}
.bc-name b{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--mint-cream)}
.bc-name em{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.01em;color:rgba(242,255,242,.5);margin-top:2px}
@media(max-width:600px){.bc-name em{display:none}}

/* floating metric chips */
.eco-chip{position:absolute;z-index:7;display:inline-flex;align-items:center;gap:9px;
  padding:8px 13px 8px 8px;border-radius:14px;
  background:linear-gradient(155deg,rgba(28,46,32,.88),rgba(8,18,11,.93));
  border:1px solid rgba(242,255,242,.16);
  box-shadow:0 18px 34px -18px rgba(0,0,0,.8),0 0 24px -12px rgba(205,245,70,.45),inset 0 1px 0 rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  animation:ecoChipFloat 6s var(--ease) infinite;will-change:transform;
  transition:border-color .4s var(--ease),box-shadow .45s var(--ease),transform .4s var(--ease)}
.eco-chip .ecc-ic{width:26px;height:26px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:rgba(164,190,92,.16);border:1px solid rgba(164,190,92,.3);color:var(--lemon)}
.eco-chip .ecc-ic svg{width:14px;height:14px}
.eco-chip b{display:flex;flex-direction:column;font-size:14px;font-weight:700;letter-spacing:-.02em;color:var(--mint-cream);line-height:1.05}
.eco-chip small{font-size:9.5px;font-weight:600;letter-spacing:.02em;color:rgba(242,255,242,.5);margin-top:2px}
.eco-chip.up .ecc-ic{background:rgba(164,190,92,.24);color:var(--kiwi)}
.eco-chip:hover{border-color:rgba(164,190,92,.5);transform:translateY(-3px);
  box-shadow:0 22px 40px -16px rgba(0,0,0,.85),0 0 34px -8px rgba(205,245,70,.6)}
.ec-tr{top:clamp(16px,2vw,22px);right:clamp(14px,1.8vw,20px);animation-delay:.4s}
.ec-bl{bottom:clamp(44px,5vw,58px);left:clamp(14px,1.8vw,20px);animation-delay:1.2s}
.ec-br{bottom:clamp(44px,5vw,58px);right:clamp(14px,1.8vw,20px);animation-delay:.8s}
@keyframes ecoChipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(max-width:600px){.eco-chip{display:none}}

/* relationship flow tags — show the system links */
.eco-flowtag{position:absolute;z-index:6;bottom:clamp(16px,2vw,22px);right:clamp(16px,2vw,22px);
  font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;color:var(--kiwi);
  background:rgba(164,190,92,.1);border:1px solid rgba(164,190,92,.26);white-space:nowrap;
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.bento-cell:hover .eco-flowtag{background:rgba(164,190,92,.2);border-color:rgba(164,190,92,.5);color:var(--lemon)}
@media(max-width:600px){.eco-flowtag{display:none}}

/* watch secondary layer (body energy / glasses) — completes the watch cards */
.bc-watchcell .eco-watch{margin:30px 0 16px}
.eco-extra{position:relative;z-index:5;display:flex;align-items:center;gap:12px;margin:0 auto;
  padding:9px 15px 9px 11px;border-radius:15px;width:max-content;max-width:90%;
  background:rgba(255,255,255,.05);border:1px solid rgba(242,255,242,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.ee-meta{display:flex;flex-direction:column;line-height:1.1}
.ee-meta b{font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:var(--mint-cream)}
.ee-meta small{font-size:10px;color:rgba(242,255,242,.55);margin-top:2px}
.ee-batt{position:relative;width:44px;height:20px;border-radius:6px;border:1.6px solid rgba(242,255,242,.3);padding:2px;flex:none}
.ee-batt::after{content:"";position:absolute;right:-4px;top:50%;transform:translateY(-50%);width:3px;height:8px;border-radius:0 2px 2px 0;background:rgba(242,255,242,.3)}
.ee-batt i{display:block;height:100%;width:var(--lv,80%);border-radius:3px;background:linear-gradient(90deg,var(--kiwi),var(--lemon))}
.ee-dots{display:flex;gap:3px;flex:none}
.ee-dots i{width:6px;height:13px;border-radius:3px;background:rgba(242,255,242,.16)}
.ee-dots i.on{background:linear-gradient(180deg,var(--kiwi),#7fc24a)}

/* hydration fluid fill inside the watch face */
.watch-fill{position:absolute;left:0;right:0;bottom:0;height:var(--lv,80%);z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(164,190,92,.30),rgba(127,194,74,.42))}
.watch-fill::before{content:"";position:absolute;top:-5px;left:0;right:0;height:10px;border-radius:50%;
  background:rgba(164,190,92,.5);animation:wave 3s ease-in-out infinite}
.bc-watchcell .watch-screen>.watch-top,
.bc-watchcell .watch-screen>.watch-mid,
.bc-watchcell .watch-screen>.watch-prog,
.bc-watchcell .watch-screen>.watch-ecg,
.bc-watchcell .watch-screen>.watch-foot{position:relative;z-index:1}

/* data-link network + central intelligence core */
.eco-net{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.eco-net .enl{fill:none;stroke:rgba(164,190,92,.22);stroke-width:1.4;vector-effect:non-scaling-stroke;
  stroke-dasharray:3 5;stroke-linecap:round}
.eco-net .enl-flow{stroke:var(--lemon);stroke-width:2.4;vector-effect:non-scaling-stroke;
  stroke-dasharray:2 46;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(205,245,70,.7));
  animation:ecoFlow 2.6s linear infinite}
.eco-net .enl-flow.f2{animation-delay:.65s}.eco-net .enl-flow.f3{animation-delay:1.3s}.eco-net .enl-flow.f4{animation-delay:1.95s}
@keyframes ecoFlow{from{stroke-dashoffset:48}to{stroke-dashoffset:0}}
.eco-hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:8;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:9px}
.eco-hub-core{position:relative;width:62px;height:62px;border-radius:20px;display:grid;place-items:center;
  background:linear-gradient(160deg,#1d3c25,#0a1a10);color:var(--lemon);border:1px solid rgba(205,245,70,.42);
  box-shadow:0 22px 48px -16px rgba(0,0,0,.82),0 0 44px -8px rgba(205,245,70,.6),inset 0 1px 0 rgba(255,255,255,.2)}
.eco-hub-core svg{width:31px;height:31px}
.eco-hub-pulse{position:absolute;left:50%;top:31px;width:62px;height:62px;border-radius:20px;transform:translate(-50%,-50%);
  border:1.5px solid rgba(205,245,70,.5);animation:ecoPulse 2.8s var(--ease) infinite}
@keyframes ecoPulse{0%{transform:translate(-50%,-50%) scale(.82);opacity:.85}100%{transform:translate(-50%,-50%) scale(2.1);opacity:0}}
.eco-hub-label{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,255,242,.72);
  padding:5px 11px;border-radius:999px;background:rgba(8,18,11,.72);border:1px solid rgba(242,255,242,.14);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:nowrap}
@media(max-width:600px){.eco-net,.eco-hub{display:none}}

/* richer bento phone screens — modern glassy metric tiles + sleep stages */
.bento .mstat{display:flex;flex-direction:column;align-items:center;gap:1px;padding:11px 8px}
.bento .mstat-ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;margin-bottom:4px}
.bento .mstat-ic svg{width:16px;height:16px}
.bento .mstat b{font-size:16px;letter-spacing:-.02em;color:var(--mint-cream);line-height:1}
.bento .mstat small{font-size:9px;color:rgba(242,255,242,.55);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.bento .sleep-stage{display:flex;gap:3px;height:9px;margin-bottom:2px}
.bento .sleep-stage i{border-radius:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.bento .sdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle}

/* ============================================================
   DESIGN SYSTEM — Color ↓ Typography ↓ Brand Identity
   ============================================================ */
.ds-sys{gap:clamp(12px,1.8vw,20px)}
.ds-block-head{display:flex;align-items:center;gap:12px;margin-bottom:clamp(16px,2vw,22px)}
.ds-num{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lemon);
  height:30px;padding:0 12px;border-radius:9px;display:inline-grid;place-items:center;flex:none;white-space:nowrap;
  background:rgba(164,190,92,.14);border:1px solid rgba(164,190,92,.32)}
.ds-block-head b{font-size:clamp(17px,2vw,21px);font-weight:700;letter-spacing:-.02em;color:var(--mint-cream)}
.ds-tok{margin-left:auto;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(242,255,242,.5);padding:5px 12px;border-radius:999px;border:1px solid rgba(242,255,242,.14)}

/* clean hairline divider between the three blocks */
.ds-flow{height:1px;width:100%;margin:clamp(8px,1.4vw,16px) 0;
  background:linear-gradient(90deg,transparent,rgba(242,255,242,.14),transparent)}

/* color tokens visible (name + hex) */
.ds-sys .swatch{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:3px;padding:16px 14px}
/* each hex code sits in a frosted-glass box */
.ds-sys .swatch span{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.02em;color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.24);padding:3px 8px;border-radius:8px}
.ds-sys .swatch[style*="F2FFF2"] b,.ds-sys .swatch[style*="F2FFF2"] span,
.ds-sys .swatch[style*="CDF546"] b,.ds-sys .swatch[style*="CDF546"] span,
.ds-sys .swatch[style*="A4BE5C"] b,.ds-sys .swatch[style*="A4BE5C"] span{color:#0a140c;text-shadow:none}
/* light-background swatches: dark frosted glass so the box reads on the pale fill */
.ds-sys .swatch[style*="F2FFF2"] span,
.ds-sys .swatch[style*="CDF546"] span,
.ds-sys .swatch[style*="A4BE5C"] span{background:rgba(0,0,0,.1);border-color:rgba(0,0,0,.16)}

/* typography — specimen + visual Aa scale on one flowing row */
.type-row{display:flex;align-items:baseline;gap:clamp(22px,4vw,60px);flex-wrap:wrap}
.type-block .type-mega{margin-bottom:0}
.type-scale{display:flex;align-items:baseline;gap:clamp(14px,2.2vw,28px)}
.tsv{font-weight:700;letter-spacing:-.03em;color:var(--mint-cream);line-height:.9}
.tsv:nth-child(2){color:rgba(242,255,242,.82)}
.tsv:nth-child(3){color:rgba(242,255,242,.66)}
.tsv:nth-child(4){color:rgba(242,255,242,.5)}

/* brand identity row — integrated logo system */
.ds-brandrow{display:flex;align-items:center;gap:clamp(18px,2.4vw,30px);flex-wrap:wrap}
.ds-lockup{display:flex;align-items:center;gap:16px;padding:clamp(18px,2.2vw,28px) clamp(22px,2.6vw,34px);border-radius:20px;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(242,255,242,.12)}
.ds-mark{width:clamp(52px,5vw,64px);height:clamp(52px,5vw,64px);border-radius:18px;flex:none;display:grid;place-items:center;
  background:var(--lemon);color:var(--parsley);box-shadow:0 0 30px -6px rgba(205,245,70,.5)}
.ds-mark svg{width:58%;height:58%}
.ds-wordmark{font-size:clamp(32px,4.4vw,52px);font-weight:700;letter-spacing:-.05em;color:var(--mint-cream)}
.ds-marks{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.ds-markchip{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;flex:none;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.ds-markchip svg{width:25px;height:25px}
.ds-markchip:hover{transform:translateY(-4px)}
.mk-parsley{background:var(--parsley);color:var(--lemon)}
.mk-lemon{background:var(--lemon);color:var(--parsley)}
.mk-outline{background:transparent;border:1.5px solid rgba(242,255,242,.3);color:var(--mint-cream)}
.ds-clearspace{width:52px;height:52px;border-radius:15px;border:1.5px dashed rgba(242,255,242,.26);position:relative;flex:none}
.ds-clearspace i{position:absolute;inset:10px;border-radius:8px;background:rgba(164,190,92,.2)}
.ds-tokens{display:flex;gap:10px;flex-wrap:wrap}
.dtok{display:flex;flex-direction:column;align-items:center;gap:9px;padding:14px 16px;border-radius:14px;min-width:86px;
  background:rgba(255,255,255,.04);border:1px solid rgba(242,255,242,.1);transition:border-color .35s,transform .35s var(--ease)}
.dtok:hover{border-color:rgba(164,190,92,.4);transform:translateY(-3px)}
.dtok b{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--mint-cream)}
.dtok-vis{width:34px;height:34px;display:grid;place-items:center;color:var(--kiwi)}
.dv-radius{border:2.2px solid currentColor;border-radius:0 14px 0 14px;background:rgba(164,190,92,.1)}
.dv-grid{background-image:radial-gradient(currentColor 1.6px,transparent 1.7px);background-size:9px 9px;background-position:2px 2px;border-radius:4px;opacity:.9}
.dv-motion svg{width:36px;height:22px;color:var(--kiwi)}

/* token strip — full-width row of 3 big, hover-animated boxes */
.ds-tokstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px);margin-top:clamp(2px,1vw,8px)}
@media(max-width:600px){.ds-tokstrip{grid-template-columns:1fr}}
.dtok-lg{flex-direction:row;align-items:center;justify-content:center;gap:16px;min-width:0;border-radius:18px;
  padding:clamp(20px,2.6vw,34px);transition:transform .45s var(--ease),border-color .4s,box-shadow .5s var(--ease),background .4s}
.dtok-lg b{font-size:clamp(14px,1.6vw,18px)}
.dtok-lg .dtok-vis{transition:transform .45s var(--ease)}
.dtok-lg:hover{transform:translateY(-5px);border-color:rgba(164,190,92,.45);background:rgba(164,190,92,.06);
  box-shadow:0 30px 56px -30px rgba(0,0,0,.7),0 0 44px -12px rgba(164,190,92,.5)}
.dtok-lg:hover .dtok-vis{transform:scale(1.12) rotate(-2deg)}

/* icons — brand palette variety */
.ig-grid .ig-tile:nth-child(4n+1){color:var(--kiwi)}
.ig-grid .ig-tile:nth-child(4n+2){color:var(--lemon)}
.ig-grid .ig-tile:nth-child(4n+3){color:var(--mint-cream)}
.ig-grid .ig-tile:nth-child(4n){color:#d6a052}

/* ============================================================
   COMPONENT LIBRARY — expanded showcase board
   ============================================================ */
.cmp-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.4vw,16px)}
.cmp-3{grid-column:span 3}.cmp-4{grid-column:span 4}.cmp-6{grid-column:span 6}
@media(max-width:880px){.cmp-3{grid-column:span 6}.cmp-4{grid-column:span 6}.cmp-6{grid-column:span 12}}
@media(max-width:520px){.cmp-3,.cmp-4,.cmp-6{grid-column:span 12}}
.cmp{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(242,255,242,.12);border-radius:18px;
  padding:16px;min-height:134px;display:flex;flex-direction:column;gap:12px;
  transition:transform .4s var(--ease),border-color .35s,box-shadow .45s var(--ease),background .35s}
.cmp:hover{transform:translateY(-4px);border-color:rgba(164,190,92,.4);background:rgba(255,255,255,.07);
  box-shadow:0 26px 50px -28px rgba(0,0,0,.7),0 0 30px -10px rgba(164,190,92,.4)}
.cmp-lab{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,255,242,.42)}
.cmp-lab--abs{position:absolute;top:14px;left:16px}
.cmp-mid{align-items:center;justify-content:center}
.cmp-vc{justify-content:center}
.cmp .bars i{background:var(--kiwi)}.cmp .bars i.alt{background:var(--lemon)}

/* metric card */
.cmp-metric{display:flex;align-items:center;gap:12px}
.cmp-ic{width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:rgba(164,190,92,.16);border:1px solid rgba(164,190,92,.3);color:var(--lemon)}
.cmp-ic svg{width:18px;height:18px}
.cmp-ic.sm{width:30px;height:30px;border-radius:9px}.cmp-ic.sm svg{width:15px;height:15px}
.cmp-mval b{display:flex;align-items:baseline;gap:4px;font-size:24px;font-weight:700;letter-spacing:-.03em;color:var(--mint-cream);line-height:1}
.cmp-mval small{font-size:11px;font-weight:600;color:rgba(242,255,242,.5)}
.cmp-mval em{font-style:normal;font-size:11px;color:rgba(242,255,242,.5);margin-top:3px;display:block}
.cmp-spark{width:100%;height:30px;margin-top:auto}
.cmp-spark path{fill:none;stroke:var(--kiwi);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px rgba(164,190,92,.5))}

/* trend & goal */
.cmp-trend{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:15px;font-weight:700;letter-spacing:-.02em;
  color:var(--parsley);background:var(--kiwi);padding:6px 12px;border-radius:999px}
.cmp-trend svg{width:15px;height:15px}
.cmp-prog{height:8px;border-radius:99px;background:rgba(242,255,242,.14);overflow:hidden;margin-top:auto}
.cmp-prog i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--kiwi),var(--lemon))}
.cmp-sub{font-style:normal;font-size:11px;color:rgba(242,255,242,.5)}

/* notification */
.cmp-toast{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.04);border:1px solid rgba(242,255,242,.1);border-radius:13px;padding:11px;margin-top:auto}
.cmp-tmeta b{display:block;font-size:13px;font-weight:700;color:var(--mint-cream);letter-spacing:-.01em}
.cmp-tmeta small{font-size:10.5px;color:rgba(242,255,242,.5)}

/* segmented */
.cmp-seg{display:flex;gap:3px;background:rgba(255,255,255,.06);border-radius:11px;padding:3px}
.cmp-seg button{flex:1;border:0;background:transparent;font-family:inherit;font-size:12px;font-weight:600;color:rgba(242,255,242,.5);
  padding:8px;border-radius:8px;cursor:pointer;transition:.25s}
.cmp-seg button.on{background:var(--lemon);color:var(--parsley)}
.cmp-seg--alt{margin-top:2px}

/* status chips */
.cmp-chips{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.st-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:rgba(242,255,242,.7);
  background:rgba(255,255,255,.05);border:1px solid rgba(242,255,242,.12);padding:6px 11px;border-radius:999px}
.st-chip i{width:7px;height:7px;border-radius:50%;background:currentColor}
.st-chip.ok{color:var(--kiwi);border-color:rgba(164,190,92,.3)}
.st-chip.lemon{color:var(--parsley);background:var(--lemon);border-color:transparent}
.st-chip.warn{color:#e0b24a;border-color:rgba(224,178,74,.32)}

/* input */
.cmp-input{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.04);border:1px solid rgba(242,255,242,.12);
  border-radius:11px;padding:11px 13px;font-size:12.5px;color:rgba(242,255,242,.55)}
.cmp-input svg{width:15px;height:15px;color:var(--kiwi);flex:none}
.cmp-input.focus{border-color:rgba(164,190,92,.5);color:var(--mint-cream);box-shadow:0 0 0 3px rgba(164,190,92,.12)}
.cmp-cursor{width:1.5px;height:14px;background:var(--lemon);margin-left:-2px;animation:cmpBlink 1.1s steps(1) infinite}
@keyframes cmpBlink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* graph module */
.cmp-graph{flex:1;min-height:80px}
.cmp-graph svg{width:100%;height:100%;min-height:80px;overflow:visible}
.cmp-area{fill:url(#cmpg)}
.cmp-ln{fill:none;stroke:var(--kiwi);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(164,190,92,.5))}

/* activity widget */
.cmp-widget{flex:1;display:flex;flex-direction:column;gap:12px}
.cmp-wtop{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:rgba(242,255,242,.55);font-weight:600}
.cmp-wtrend{color:var(--parsley);background:var(--kiwi);padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700}
.cmp-widget .bars{margin-top:auto}

/* ============================================================
   MOTION POLISH — flowing, organic hover transitions
   ============================================================ */
/* ecosystem cells lift + the device gently breathes toward you */
.bento-cell{transition:transform .55s var(--ease),border-color .45s var(--ease),box-shadow .55s var(--ease)}
.bento-cell:hover{transform:translateY(-5px);border-color:rgba(164,190,92,.34);
  box-shadow:0 44px 84px -46px rgba(0,0,0,.72),0 0 54px -16px rgba(164,190,92,.42),inset 0 1px 0 rgba(255,255,255,.1)}
.bento-cell .eco-stage,.bento-cell .eco-watch{transition:transform .6s var(--ease)}
.bento-cell:hover .eco-stage,.bento-cell:hover .eco-watch{transform:scale(1.02)}
.bento-cell:hover .bc-emote{box-shadow:0 0 34px -4px rgba(205,245,70,.75),inset 0 1px 0 rgba(255,255,255,.2)}

/* design-system swatches breathe on hover (re-enabled inside the box) */
.ds-sys .swatch{transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .4s var(--ease)}
.ds-sys .swatch:hover{transform:translateY(-5px);box-shadow:0 24px 46px -24px rgba(0,0,0,.6);border-color:rgba(242,255,242,.3)}

/* brand mark chips flow up in sequence on hover of the row */
.ds-lockup{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.ds-lockup:hover{transform:translateY(-3px);box-shadow:0 26px 50px -28px rgba(0,0,0,.6)}

@media (prefers-reduced-motion:reduce){
  .bento-cell:hover .eco-stage,.bento-cell:hover .eco-watch{transform:none}
}

/* ============================================================
   FOOTER — minimal: brand + pills (left) · tagline + dev (right)
   ============================================================ */
.foot-new{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;flex-wrap:wrap;
  padding-block:clamp(26px,4vw,52px)}
.foot-left{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.foot-left .brand{font-size:clamp(28px,3.4vw,38px)}
.foot-left .brand .bmark{width:clamp(40px,4vw,48px);height:clamp(40px,4vw,48px);border-radius:13px}
.foot-left .brand .bmark svg{width:58%;height:58%}
.foot-left .pills-mini{display:flex;gap:9px}
.foot-right{display:flex;flex-direction:column;gap:2px;align-items:flex-end;text-align:right}
.foot-tag{font-size:clamp(26px,3vw,38px);font-weight:600;letter-spacing:-.025em;line-height:1.15;color:var(--kiwi)}
.foot-dev{font-size:clamp(16px,1.5vw,20px);font-weight:700;letter-spacing:-.01em;color:var(--mint-cream)}
@media(max-width:640px){.foot-new{flex-direction:column;align-items:flex-start}
  .foot-right{align-items:flex-start;text-align:left}}

/* footer divider line */
.foot-line{height:1px;background:rgba(242,255,242,.14);margin:clamp(14px,2.2vw,26px) 0 4px}

/* ============================================================
   ECOSYSTEM v2 — Active Activity · Intelligent Sleep · Connected
   purely additive: new viz layers, same palette / spacing / glow
   ============================================================ */

/* --- pointer spotlight (Linear/Stripe-style hover light) --- */
.bento-cell[data-spot]{--mx:50%;--my:50%}
.bento-cell[data-spot]::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .55s var(--ease);
  background:radial-gradient(340px circle at var(--mx) var(--my),rgba(164,190,92,.16),transparent 62%)}
.bento-cell[data-spot]:hover::before{opacity:1}

/* --- Activity: ring + daily-goal completion --- */
.eco-actring{display:flex;flex-direction:column;align-items:center;gap:9px}
.eco-goal{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:10px;font-weight:600;
  letter-spacing:.02em;color:rgba(242,255,242,.55)}
.eco-goal b{color:var(--mint-cream);font-weight:700}
.eco-goalbar{width:100%;height:6px;border-radius:99px;background:rgba(242,255,242,.12);overflow:hidden}
.eco-goalbar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--kiwi),var(--lemon));box-shadow:0 0 10px -2px rgba(205,245,70,.6);
  transition:width 1.2s var(--ease) .2s}
.in .eco-goalbar i{width:var(--w,70%)}

/* --- Activity: calories / distance mini progress --- */
.eco-mstat{position:relative}
.eco-mbar{display:block;width:100%;height:4px;border-radius:99px;margin-top:6px;background:rgba(242,255,242,.12);overflow:hidden}
.eco-mbar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--kiwi),var(--lemon));
  transition:width 1.1s var(--ease) .35s}
.in .eco-mbar i{width:var(--w,60%)}

/* refined Activity stat tiles (app-style: icon+label, big value, bar) */
.bento .eco-mstat{align-items:flex-start;gap:7px;padding:11px 12px}
.ems-top{display:flex;align-items:center;gap:7px}
.bento .eco-mstat .mstat-ic{width:26px;height:26px;border-radius:8px;margin:0}
.bento .eco-mstat .mstat-ic svg{width:14px;height:14px}
.ems-top small{font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(242,255,242,.52)}
.bento .eco-mstat b{display:flex;align-items:baseline;gap:3px;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--mint-cream);line-height:1}
.bento .eco-mstat b em{font-style:normal;font-size:10px;font-weight:600;color:rgba(242,255,242,.5)}

/* refined Sleep score stats — clean single-line rows */
.eco-ss{padding:4px 0;border-bottom:1px solid rgba(242,255,242,.08)}
.eco-ss:last-child{border-bottom:0}
.eco-ss small,.eco-ss b{white-space:nowrap}

/* fuller boxes — larger devices, vertically centred content */
.bento .phone{--pw:clamp(214px,21.5vw,254px)}
.bento-cell{justify-content:center}
.bc-watchcell .eco-watch{margin:24px 0 18px}

/* ============================================================
   ECOSYSTEM v3 — more colour · stronger graphs · less text · no grid
   ============================================================ */
/* drop the background grid */
.sb-grid{display:none}

/* bigger floating chips */
.eco-chip{padding:10px 15px 10px 9px;border-radius:15px}
.eco-chip .ecc-ic{width:30px;height:30px;border-radius:10px}
.eco-chip .ecc-ic svg{width:16px;height:16px}
.eco-chip b{font-size:15.5px}
.eco-chip small{font-size:10px}
.eco-rtag{font-size:12px;padding:7px 13px;border-radius:12px}
.eco-rtag small{font-size:9.5px}

/* colourful stat pills — solid light-green, dark-green text */
.eco-pillrow{gap:9px}
.eco-pill{display:flex;align-items:center;gap:9px;flex:1;border-radius:14px;padding:11px 13px}
.eco-pill .ep-ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;background:rgba(20,68,25,.18)}
.eco-pill .ep-ic svg{width:15px;height:15px}
.eco-pill b{display:flex;align-items:baseline;gap:3px;font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1}
.eco-pill b em{font-style:normal;font-size:10px;font-weight:700;opacity:.72}
.eco-pill--lemon{background:var(--lemon);color:var(--parsley)}
.eco-pill--kiwi{background:var(--kiwi);color:var(--parsley)}

/* dark-green analysis card + vivid gradient bars */
.bento .eco-chart{background:linear-gradient(165deg,#163a21,#0a1e12);border-color:rgba(164,190,92,.2)}
.bento .eco-chart .scr-cardhead span{color:rgba(242,255,242,.62)}
.bento .eco-chart .scr-cardhead b{color:var(--lemon);font-size:14px}
.eco-bars{align-items:flex-end;gap:7px}
.bento .eco-bars i{background:linear-gradient(180deg,var(--lemon),var(--kiwi));border-radius:5px 5px 2px 2px}

/* sleep score stats with mini progress bars */
.eco-ss2{display:flex;flex-direction:column;gap:3px}
.eco-ss2 small{font-size:9px;font-weight:600;letter-spacing:.02em;color:rgba(242,255,242,.5)}
.eco-ss2 b{font-size:15px;font-weight:700;color:var(--mint-cream);line-height:1}
.ss-bar{height:5px;border-radius:99px;background:rgba(242,255,242,.12);overflow:hidden;margin-top:1px}
.ss-bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--kiwi);transition:width 1.1s var(--ease) .3s}
.ss-bar.lemon i{background:var(--lemon)}
.in .ss-bar i{width:var(--w,80%)}

/* hypnogram — vivid, no gridlines */
.eco-hypno{background:transparent;border:0;height:clamp(58px,8.5vw,80px);margin-top:2px}
.eh-area{fill:rgba(164,190,92,.16)}
.eh-line{stroke:var(--lemon);stroke-width:2.6;filter:drop-shadow(0 0 5px rgba(205,245,70,.6))}
.eco-hlegend b{display:none}

@media (prefers-reduced-motion:reduce){.in .ss-bar i{transition:none!important}}

/* --- Activity: movement route micro-graphic --- */
.eco-route{position:absolute;z-index:1;width:clamp(108px,15vw,140px);height:auto;pointer-events:none;
  right:clamp(8px,1.6vw,20px);bottom:clamp(56px,7.5vw,82px)}
.eco-route path{fill:none}
.eco-route .er-trail{stroke:rgba(164,190,92,.22);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.eco-route .er-live{stroke:var(--lemon);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(205,245,70,.55));stroke-dasharray:230;stroke-dashoffset:230;
  animation:erDraw 4.2s var(--ease) infinite}
@keyframes erDraw{0%{stroke-dashoffset:230}45%{stroke-dashoffset:0}88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.55}}
.eco-route .er-start{fill:var(--kiwi)}
.eco-route .er-pin{fill:var(--lemon);filter:drop-shadow(0 0 6px rgba(205,245,70,.85));animation:erPin 2.4s var(--ease) infinite}
@keyframes erPin{0%,100%{r:3.2}50%{r:4.6}}
.eco-rtag{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:6px;
  right:clamp(12px,2vw,24px);bottom:clamp(118px,15.5vw,170px);
  font-size:11px;font-weight:700;letter-spacing:-.01em;color:var(--mint-cream);padding:6px 11px;border-radius:11px;
  background:linear-gradient(155deg,rgba(28,46,32,.9),rgba(8,18,11,.94));border:1px solid rgba(242,255,242,.16);
  box-shadow:0 12px 26px -14px rgba(0,0,0,.8),0 0 18px -9px rgba(205,245,70,.5)}
.eco-rtag small{font-size:9px;color:rgba(242,255,242,.55);font-weight:600}
.ert-dot{width:6px;height:6px;border-radius:50%;background:var(--lemon);box-shadow:0 0 8px rgba(205,245,70,.9);
  animation:glowpulse 2s var(--ease) infinite}
@media(max-width:600px){.eco-route,.eco-rtag{display:none}}

/* extra floating-chip slot (bottom-left) for the streak indicator */
.eco-chip.ec-bl{top:auto;bottom:clamp(18px,2.4vw,26px);left:clamp(14px,1.8vw,20px);right:auto;animation-delay:1.1s}
.eco-flame .ecc-ic{background:rgba(232,140,80,.2);border-color:rgba(232,140,80,.34);color:#f0a05a}

/* --- Sleep: score + intelligence micro-stats --- */
.eco-sleepscore{display:flex;align-items:center;gap:13px}
.eco-ss-stats{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.eco-ss{display:flex;align-items:center;justify-content:space-between;gap:8px}
.eco-ss small{font-size:9.5px;color:rgba(242,255,242,.5);font-weight:600;letter-spacing:.02em}
.eco-ss b{display:inline-flex;align-items:center;gap:3px;font-size:12.5px;font-weight:700;color:var(--mint-cream);letter-spacing:-.01em}
.eco-up{display:inline-grid;place-items:center;width:13px;height:13px;color:var(--kiwi)}
.eco-up svg{width:11px;height:11px}

/* --- Sleep: hypnogram cycle timeline (the centrepiece) --- */
.eco-hypno-card{gap:8px}
.eco-hypno{position:relative;width:100%;height:clamp(52px,7.5vw,68px);border-radius:10px;overflow:hidden;
  background:rgba(255,255,255,.03);border:1px solid rgba(242,255,242,.07)}
.eh-bands{position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgba(242,255,242,.045) 0 1px,transparent 1px 25%)}
.eco-hypno svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.eh-area{fill:rgba(205,245,70,.09)}
.eh-line{fill:none;stroke:var(--kiwi);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px rgba(164,190,92,.55));
  stroke-dasharray:1000;stroke-dashoffset:1000}
.in .eh-line{animation:draw 2s var(--ease) .25s forwards}
.eco-hlegend{display:flex;justify-content:space-between;gap:6px;margin-top:1px}
.eco-hlegend span{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:600;color:rgba(242,255,242,.55);white-space:nowrap}
.eco-hlegend i{width:7px;height:7px;border-radius:3px;flex:none}
.eco-hlegend b{font-size:9.5px;font-weight:700;color:var(--mint-cream)}

/* recovery-link chip (shared data state: same 92% as the watch) */
.eco-link .ecc-ic{background:rgba(205,245,70,.22);border-color:rgba(205,245,70,.4);color:var(--lemon)}

/* --- relationship flow tags → one connected system (in-flow, centred) --- */
.eco-flowtag{position:relative;bottom:auto;right:auto;left:auto;z-index:5;align-self:center;
  margin-top:clamp(10px,1.6vw,16px);display:inline-flex;align-items:center;gap:7px}
.eco-flowtag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--kiwi);
  box-shadow:0 0 8px rgba(164,190,92,.8);animation:glowpulse 2.4s var(--ease) infinite}

/* --- gentle watch micro-motion --- */
.eco-wfloat{animation:floaty 7s var(--ease) infinite;will-change:transform}
[data-eco="hydration"] .eco-wfloat{animation-delay:1.2s}

/* --- signal ports (shared-data indicators on each module) --- */
.eco-port{position:absolute;z-index:3;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;
  background:var(--kiwi);box-shadow:0 0 0 4px rgba(164,190,92,.12),0 0 12px rgba(164,190,92,.7);
  animation:sbPulse 3.4s var(--ease) infinite}
.eco-port:nth-of-type(2){animation-delay:.9s}.eco-port:nth-of-type(3){animation-delay:1.7s}.eco-port:nth-of-type(4){animation-delay:2.4s}
@media(max-width:600px){.eco-port{display:none}}

/* --- intelligence core (refined, smaller, ambient — not a flowchart) --- */
.eco-hub-core{width:50px;height:50px;border-radius:16px}
.eco-hub-core svg{width:25px;height:25px}
.eco-hub-pulse{top:25px;width:50px;height:50px;border-radius:16px}
.eco-hub-label{margin-top:1px}

/* ============================================================
   SITE-WIDE MOTION — premium, minimal, purposeful
   ============================================================ */
/* refined title focus-in (blur → sharp) */
.rv-title{filter:blur(13px);
  transition:opacity .9s var(--ease) .04s,transform .9s var(--ease) .04s,filter 1s var(--ease) .04s}
.rv-title.in{filter:blur(0)}

/* staggered children entrance (driven by --si set in JS) */
.bento.rv{transform:none}
.rv.in .stag{animation:ecoRise .72s var(--ease) backwards;animation-delay:calc(var(--si,0)*.06s)}
@keyframes ecoRise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

/* magnetic large buttons (translate composes with existing transforms) */
.btn--lg{transition:box-shadow .45s var(--ease),background .4s var(--ease),color .35s var(--ease),
  filter .4s var(--ease),border-color .4s var(--ease),translate .4s var(--ease);will-change:translate}

@media (prefers-reduced-motion:reduce){
  .rv-title{filter:none!important}
  .eco-route .er-live,.eco-port,.eco-wfloat,.ert-dot,.eco-flowtag::before,.eco-hub-pulse{animation:none!important}
  .rv.in .stag{animation:none!important}
  .in .eco-goalbar i,.in .eco-mbar i{transition:none!important}
}