/* =================================================================
   Guppy — landing page styles
   Design tokens ported 1:1 from the app (GuppyColors / Fonts / Spacing)
   ================================================================= */

:root{
  /* brand palette */
  --teal:#4ABFBF; --teal-light:#5CD6D6; --teal-dark:#2A8A8A;
  --coral:#F28B82; --coral-light:#F5A49D; --coral-dark:#C75B52;
  --amber:#E8A33D; --amber-light:#F2B860;
  --green:#81C784;

  /* text */
  --ink:#2C3E50; --ink-2:#6B8299; --ink-3:#9BB0C4;

  /* surfaces */
  --bg:#FFFFFF; --bg-2:#F0F7FA; --wave:#E6F3F5; --sep:#D6E4EC;
  --cream:#FFF6E9;
  --navy:#1A1A2E; --navy-2:#222240; --navy-3:#2A2A4A;

  /* radii (app: 8/12/16/24) */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;

  /* soft shadows (app tiers) */
  --sh-sm:0 2px 4px rgba(0,0,0,.06);
  --sh-md:0 6px 18px rgba(44,62,80,.10);
  --sh-lg:0 18px 50px rgba(44,62,80,.16);
  --sh-phone:0 30px 70px -18px rgba(28,46,66,.45), 0 8px 22px -10px rgba(28,46,66,.30);

  --font-display:'Fredoka', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --font-body:'Nunito', ui-rounded, system-ui, -apple-system, sans-serif;

  --wrap:1120px;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:78px}
body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:var(--bg); line-height:1.6; font-size:17px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
h1,h2,h3{margin:0; line-height:1.08; letter-spacing:-.01em}
p{margin:0}
i[data-lucide]{width:1em; height:1em; stroke-width:2.1}

/* ---------- layout helpers ---------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:22px}
.narrow{max-width:760px}
.center{text-align:center; display:flex; flex-direction:column; align-items:center}
.section{position:relative; padding-block:clamp(64px,10vw,120px); overflow:hidden}
.display{font-family:var(--font-display); font-weight:600}
.lede{font-size:clamp(1.02rem,2.6vw,1.22rem); color:var(--ink-2); max-width:60ch}
.center .lede{margin-inline:auto}

.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-display); font-weight:600; font-size:.82rem;
  letter-spacing:.02em; text-transform:none;
  color:var(--teal-dark); background:rgba(74,191,191,.12);
  padding:.42em .9em; border-radius:var(--r-pill); margin-bottom:18px;
}
.eyebrow i{color:var(--teal)}
.eyebrow--amber{color:#B7791F; background:rgba(232,163,61,.16)}
.eyebrow--amber i{color:var(--amber)}
.eyebrow--dark{color:#BfeFef; background:rgba(92,214,214,.14)}
.eyebrow--dark i{color:var(--teal-light)}

h2.display{font-size:clamp(1.85rem,5.4vw,3rem); margin-bottom:16px; text-wrap:balance}
h1.display{font-weight:600}

.grad{
  background-image:linear-gradient(120deg,var(--teal),var(--teal-dark));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.grad--teal{background-image:linear-gradient(120deg,var(--teal-light),var(--teal))}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-display); font-weight:600; font-size:1.02rem;
  padding:.85em 1.4em; border-radius:var(--r-pill); border:0; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  min-height:52px; white-space:nowrap;
}
.btn--appstore{
  background:linear-gradient(135deg,var(--coral),var(--coral-dark)); color:#fff;
  box-shadow:0 12px 26px -10px rgba(199,91,82,.7);
  padding-inline:1.5em;
}
.btn--appstore i{width:1.5em; height:1.5em}
.btn--appstore span{display:flex; flex-direction:column; align-items:flex-start; line-height:1.05; text-align:left}
.btn--appstore small{font-family:var(--font-body); font-weight:600; font-size:.62rem; opacity:.85; letter-spacing:.02em}
.btn--appstore:hover{transform:translateY(-3px); box-shadow:0 18px 34px -10px rgba(199,91,82,.75)}
.btn--big{font-size:1.18rem; min-height:62px}
.btn--ghost{background:transparent; color:var(--teal-dark); font-family:var(--font-body); font-weight:700}
.btn--ghost:hover{transform:translateY(-2px)}
.btn--ghost i{transition:transform .3s var(--ease)}
.btn--ghost:hover i{transform:translateY(3px)}
.btn--ghost-pill{
  background:rgba(74,191,191,.1); color:var(--teal-dark); font-size:.95rem;
  padding:.6em 1.1em; min-height:44px; border:1px solid rgba(74,191,191,.25);
}
.btn--ghost-pill:hover{background:rgba(74,191,191,.18); transform:translateY(-2px)}

/* ===================================================================
   NAV
   =================================================================== */
.nav{position:fixed; inset:0 0 auto 0; z-index:60; transition:background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease}
.nav__inner{display:flex; align-items:center; gap:16px; max-width:var(--wrap); margin-inline:auto; padding:14px 22px}
.nav.scrolled{background:rgba(255,255,255,.72); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); box-shadow:0 1px 0 rgba(214,228,236,.9)}
.brand{display:flex; align-items:center; gap:9px; margin-right:auto; font-family:var(--font-display); font-weight:600; font-size:1.35rem; color:var(--ink)}
.brand__mark img{filter:drop-shadow(0 4px 8px rgba(44,62,80,.18))}
.nav__links{display:none; gap:6px}
.nav__links a{font-weight:700; color:var(--ink-2); padding:8px 12px; border-radius:var(--r-pill); transition:color .2s,background .2s}
.nav__links a:hover{color:var(--teal-dark); background:rgba(74,191,191,.1)}
.nav__cta i{width:1.05em;height:1.05em}

/* ===================================================================
   PHONE COMPONENT  (status bar injected by JS)
   =================================================================== */
.phone{ --pw:260px; width:var(--pw); margin:0; padding:calc(var(--pw)*.03); border-radius:calc(var(--pw)*.165);
  background:linear-gradient(150deg,#3a3f4c,#1b1e26 55%,#2c303b);
  box-shadow:var(--sh-phone); flex:none;
}
.phone__screen{position:relative; aspect-ratio:402/874; border-radius:calc(var(--pw)*.13);
  overflow:hidden; container-type:size; display:flex; flex-direction:column;
  background:#fff;
}
.phone[data-variant=dark] .phone__screen{background:var(--navy)}
.phone__screen img{flex:1 1 auto; width:100%; height:100%; object-fit:cover; object-position:top center}

/* injected status bar */
.statusbar{flex:0 0 6.75%; position:relative; display:flex; align-items:center; justify-content:space-between;
  padding:0 7cqw; color:var(--ink); z-index:2}
.phone[data-variant=dark] .statusbar{color:#fff}
.statusbar .sb-time{font-family:var(--font-display); font-weight:600; font-size:4.4cqw; letter-spacing:.02em}
.statusbar .sb-island{position:absolute; left:50%; top:18%; transform:translateX(-50%);
  width:30cqw; height:62%; background:#000; border-radius:999px}
.statusbar .sb-right{display:flex; align-items:center; gap:1.6cqw}
.statusbar .sb-right svg{height:3.4cqw; width:auto; display:block; fill:currentColor}

/* phone variants */
.phone--hero{--pw:clamp(240px,76vw,310px)}
.phone--peek{--pw:clamp(180px,56vw,230px); position:absolute; opacity:.9; display:none}
.phone--mini{--pw:clamp(150px,40vw,210px)}
.phone--lift{--pw:clamp(230px,70vw,300px)}

/* ===================================================================
   HERO
   =================================================================== */
.hero{padding-top:130px;
  background:
    radial-gradient(120% 90% at 22% 8%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(80% 70% at 78% 30%, rgba(74,191,191,.22), transparent 60%),
    linear-gradient(180deg,#ffffff 0%, #EAF6F7 60%, var(--wave) 100%);
}
.hero__inner{display:flex; flex-direction:column; gap:34px; align-items:center; text-align:center}
.hero__copy{max-width:640px; display:flex; flex-direction:column; align-items:center}
.hero__title{font-size:clamp(2.1rem,8vw,4rem); font-weight:600; margin-bottom:18px}
.hero__sub{font-size:clamp(1.05rem,3vw,1.28rem); color:var(--ink-2); max-width:54ch; margin-bottom:28px}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center; margin-bottom:24px}
.trust-row{display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:center; list-style:none; margin:0; padding:0}
.trust-row li{display:inline-flex; align-items:center; gap:.4em; font-weight:700; font-size:.9rem; color:var(--ink-2)}
.trust-row i{color:var(--teal); width:1.1em; height:1.1em}

.hero__art{position:relative; display:flex; justify-content:center; align-items:flex-end; width:100%;
  padding-block:20px 40px; min-height:380px}
.hero__glow{position:absolute; width:min(560px,92%); aspect-ratio:1; left:50%; top:46%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(74,191,191,.34), rgba(74,191,191,0) 65%); filter:blur(8px); z-index:0}
.phone--hero{position:relative; z-index:2; transform:rotate(-4deg)}
.hero__art .phone--peek{z-index:1; right:6%; bottom:36px; transform:rotate(6deg)}

.chip{position:absolute; z-index:3; display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--font-display); font-weight:600; font-size:.82rem; color:var(--ink);
  background:rgba(255,255,255,.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:.5em .8em; border-radius:var(--r-pill); box-shadow:var(--sh-md); border:1px solid rgba(255,255,255,.7)}
.chip i{width:1.15em; height:1.15em}
.chip--coral{top:15%; right:1%} .chip--coral i{color:var(--coral)}
.chip--amber{top:47%; left:0} .chip--amber i{color:var(--amber)}
.chip--teal{bottom:15%; right:0} .chip--teal i{color:var(--teal)}

/* ===================================================================
   WAVE DIVIDER  (pure CSS, layered + drifting)
   =================================================================== */
.wave-divider{position:absolute; left:0; right:0; bottom:-1px; height:70px; pointer-events:none; z-index:4}
.wave-divider::before, .wave-divider::after{
  content:""; position:absolute; inset:0; background-repeat:repeat-x; background-position:bottom;
}
.wave-divider::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='70' viewBox='0 0 1200 70'%3E%3Cpath fill='%23F0F7FA' d='M0 40 C150 5 300 5 450 30 C620 58 760 58 920 32 C1050 12 1130 18 1200 34 L1200 70 L0 70 Z'/%3E%3C/svg%3E");
  background-size:1200px 70px; animation:waveDrift 26s linear infinite; opacity:.9}
.wave-divider::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='70' viewBox='0 0 1200 70'%3E%3Cpath fill='%23F0F7FA' d='M0 48 C180 22 340 64 520 46 C700 28 840 60 1010 44 C1100 35 1160 40 1200 46 L1200 70 L0 70 Z'/%3E%3C/svg%3E");
  background-size:900px 70px; animation:waveDrift 16s linear infinite reverse; opacity:1}
@keyframes waveDrift{from{background-position-x:0}to{background-position-x:1200px}}

/* ===================================================================
   STORY — grows with you
   =================================================================== */
.story{background:var(--bg-2)}
.story .lede{margin-bottom:8px}
.timeline{position:relative; display:grid; gap:26px; margin-top:48px}
.tl-line{display:none}
.tl-step{background:#fff; border-radius:var(--r-xl); padding:26px 24px; box-shadow:var(--sh-sm);
  border:1px solid rgba(214,228,236,.7); text-align:center}
.tl-ico{display:inline-flex; width:56px; height:56px; align-items:center; justify-content:center;
  border-radius:var(--r-lg); margin-bottom:14px; font-size:1.5rem}
.tl-ico--teal{background:rgba(74,191,191,.14); color:var(--teal-dark)}
.tl-ico--coral{background:rgba(242,139,130,.16); color:var(--coral-dark)}
.tl-ico--amber{background:rgba(232,163,61,.16); color:#B7791F}
.tl-step h3{font-family:var(--font-display); font-weight:600; font-size:1.3rem; margin-bottom:6px}
.tl-step p{color:var(--ink-2); font-size:.98rem}

/* ===================================================================
   EASE
   =================================================================== */
.ease{background:linear-gradient(180deg,var(--bg-2) 0%, #F4F4EF 100%)}
.split{display:flex; flex-direction:column; gap:40px; align-items:center}
.ease__copy{max-width:560px}
.benefits{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:16px}
.benefits li{display:flex; gap:14px; align-items:flex-start}
.b-ico{flex:none; width:46px; height:46px; display:grid; place-items:center; border-radius:var(--r-md);
  background:rgba(74,191,191,.12); color:var(--teal-dark); font-size:1.25rem}
.benefits strong{display:block; font-family:var(--font-display); font-weight:600; font-size:1.06rem; color:var(--ink)}
.benefits div span{display:block; color:var(--ink-2); font-size:.96rem; line-height:1.45}
.ease__art{position:relative; display:grid; place-items:center; padding:20px 0}
.soft-glow{position:absolute; width:120%; aspect-ratio:1; background:radial-gradient(circle,rgba(74,191,191,.22),transparent 62%); z-index:0}
.ease__art .phone{position:relative; z-index:1}

.strip-label{font-family:var(--font-display); font-weight:600; font-size:1.15rem; text-align:center; margin:56px 0 22px}
.shot-strip{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; align-items:flex-start}
.shot{margin:0; display:flex; flex-direction:column; align-items:center; gap:12px}
.shot figcaption{font-weight:700; font-size:.9rem; color:var(--ink-2); max-width:18ch; text-align:center}

/* ===================================================================
   CARE — medications & pediatrician questions
   =================================================================== */
.sunshine{background:linear-gradient(180deg,#F4F4EF 0%, var(--cream) 45%, #FFF1DC 100%)}
.sun-glow{position:absolute; top:-10%; left:50%; transform:translateX(-50%); width:min(680px,120%); aspect-ratio:1;
  background:radial-gradient(circle, rgba(242,184,96,.5), rgba(242,184,96,0) 60%); z-index:0; animation:sunPulse 5s ease-in-out infinite}
.sunshine .wrap{position:relative; z-index:1}
@keyframes sunPulse{0%,100%{opacity:.7; transform:translateX(-50%) scale(1)}50%{opacity:1; transform:translateX(-50%) scale(1.06)}}

.care{display:grid; grid-template-columns:1fr; gap:60px; margin-top:52px; align-items:start}
.care__col{display:flex; flex-direction:column; align-items:center}
.care__title{font-family:var(--font-display); font-weight:600; font-size:1.35rem; color:var(--ink); margin-bottom:8px}
.care__sub{color:var(--ink-2); font-size:.98rem; max-width:40ch; margin-inline:auto}

/* multi-dose medication check */
.dose{position:relative; width:120px; height:120px; border-radius:50%; border:0; cursor:pointer; margin:30px 0 16px;
  background:radial-gradient(circle at 35% 30%, #FFE6BC, #F2B860); box-shadow:0 16px 36px -10px rgba(232,163,61,.6), inset 0 2px 6px rgba(255,255,255,.6);
  display:grid; place-items:center; transition:transform .3s var(--ease), background .4s}
.dose:hover{transform:translateY(-3px) scale(1.03)}
.dose:active{transform:scale(.94)}
.dose__ring{position:absolute; inset:-10px; border-radius:50%; border:2px dashed rgba(232,163,61,.4); opacity:0; transition:opacity .4s}
.dose__icon{font-size:2.6rem; color:#fff; transition:opacity .25s, transform .35s var(--ease)}
.dose__check{position:absolute; font-size:2.8rem; color:#fff; opacity:0; transform:scale(.4); transition:opacity .3s, transform .45s var(--ease)}
.dose.checked{background:radial-gradient(circle at 35% 30%, #C6E8B0, var(--green))}
.dose.checked .dose__icon{opacity:0; transform:scale(.5)}
.dose.checked .dose__check{opacity:1; transform:scale(1)}
.dose.checked .dose__ring{opacity:1}
.dose__dots{display:flex; gap:9px; margin-bottom:10px}
.dose__dots span{width:11px; height:11px; border-radius:50%; border:2px solid rgba(190,140,50,.5); transition:background .3s, border-color .3s, transform .3s var(--ease)}
.dose__dots span.filled{background:#E8A33D; border-color:#E8A33D; transform:scale(1.15)}
.dose.checked ~ .dose__dots span.filled, .dose__dots span.filled.done{background:var(--green); border-color:var(--green)}
.dose__caption{font-family:var(--font-display); font-weight:500; color:#9a6b1d}

/* pediatrician question list */
.pedcard{width:min(400px,100%); margin-top:28px; text-align:left; background:#fff; border:1px solid rgba(190,140,50,.18);
  border-radius:var(--r-xl); box-shadow:0 22px 44px -20px rgba(154,107,29,.35); overflow:hidden}
.pedcard__head{display:flex; justify-content:space-between; align-items:center; padding:16px 18px 13px;
  border-bottom:1px solid rgba(190,140,50,.15)}
.pedcard__title{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; color:var(--ink)}
.pedcard__title i, .pedcard__title svg{color:var(--teal-dark)}
.pedcard__badge{font-size:.78rem; font-weight:800; color:#fff; background:var(--coral); border-radius:999px; padding:4px 10px; transition:background .3s}
.pedcard__badge.clear{background:var(--green)}
.pednote{display:flex; align-items:flex-start; gap:12px; width:100%; padding:13px 18px; border:0; background:none;
  cursor:pointer; text-align:left; font:inherit; font-size:.95rem; color:var(--ink); transition:background .2s}
.pednote + .pednote{border-top:1px solid rgba(190,140,50,.12)}
.pednote:hover{background:rgba(242,184,96,.08)}
.pednote__box{flex:none; width:23px; height:23px; margin-top:1px; border-radius:50%; border:2px solid var(--teal);
  display:grid; place-items:center; color:#fff; font-size:.8rem; transition:background .25s, border-color .25s}
.pednote__box i, .pednote__box svg{opacity:0; transform:scale(.5); transition:opacity .2s, transform .3s var(--ease)}
.pednote__text{transition:color .25s}
.pednote.done .pednote__box{background:var(--green); border-color:var(--green)}
.pednote.done .pednote__box i, .pednote.done .pednote__box svg{opacity:1; transform:scale(1)}
.pednote.done .pednote__text{color:var(--ink-3); text-decoration:line-through}

/* ===================================================================
   PRIVACY — the deep end (dark)
   =================================================================== */
.dark{color:#EEF3F6}
.privacy{background:radial-gradient(120% 80% at 50% -10%, #243049, #1A1A2E 60%)}
.privacy::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E")}
.privacy .wrap{position:relative; z-index:2}
.lede--dark{color:#A8BFD4}
.privacy__headline{font-size:clamp(2rem,6vw,3.3rem)}
.privacy__grid{display:grid; gap:16px; margin-top:48px; grid-template-columns:1fr}
.pcard{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid rgba(146,182,212,.18); border-radius:var(--r-xl); padding:26px 24px;
  backdrop-filter:blur(6px); box-shadow:0 20px 40px -24px rgba(0,0,0,.8)}
.pcard__ico{display:inline-flex; width:54px; height:54px; align-items:center; justify-content:center;
  border-radius:var(--r-md); font-size:1.5rem; margin-bottom:14px;
  background:rgba(92,214,214,.14); color:var(--teal-light); box-shadow:0 0 24px rgba(92,214,214,.25)}
.pcard h3{font-family:var(--font-display); font-weight:600; font-size:1.18rem; margin-bottom:8px; color:#fff}
.pcard p{color:#A8BFD4; font-size:.96rem}

/* flow diagram */
.flow{display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:50px}
.flow__node,.flow__none{display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center;
  padding:18px 22px; border-radius:var(--r-lg); min-width:150px}
.flow__node i{font-size:1.8rem}
.flow__node span,.flow__none span{font-family:var(--font-display); font-weight:600; color:#fff}
.flow__node small,.flow__none small{font-size:.78rem; color:#8FA7BF}
.flow__node--phone{background:rgba(92,214,214,.12); border:1px solid rgba(92,214,214,.3); color:var(--teal-light)}
.flow__node--cloud{background:rgba(242,139,130,.1); border:1px solid rgba(242,139,130,.28); color:var(--coral-light)}
.flow__none{background:rgba(255,255,255,.03); border:1px dashed rgba(146,182,212,.25); color:#7A8FA3; opacity:.75}
.flow__none span{color:#9fb2c7}
.flow__link{position:relative; width:100%; max-width:260px; height:56px; display:grid; place-items:center}
.flow__link svg{width:100%; height:36px}
.flow__dash{fill:none; stroke:var(--coral-light); stroke-width:2.5; stroke-dasharray:7 7; stroke-linecap:round;
  stroke-dashoffset:240; transition:stroke-dashoffset 1.4s ease}
.flow__link.drawn .flow__dash{stroke-dashoffset:0}
.flow__tag{position:absolute; font-size:.72rem; font-weight:700; color:var(--coral-light);
  background:rgba(26,26,46,.85); padding:3px 10px; border-radius:var(--r-pill); white-space:nowrap}

.punchline{font-family:var(--font-display); font-weight:500; font-size:clamp(1.2rem,3.6vw,1.7rem);
  text-align:center; color:#fff; max-width:22ch; margin:46px auto 0; padding-inline:22px}
.fineprint{text-align:center; color:#8FA7BF; font-size:.9rem; max-width:60ch; margin:18px auto 0; padding-inline:22px}
.fineprint strong{color:var(--teal-light)}

.darkshow{display:flex; flex-direction:column; gap:30px; align-items:center; margin-top:72px;
  padding-top:48px; border-top:1px solid rgba(146,182,212,.15)}
.darkshow__copy{text-align:center; max-width:520px}
.darkshow__copy h3{font-size:clamp(1.5rem,4.4vw,2.1rem); color:#fff; margin-bottom:12px}
.darkshow__copy p{color:#A8BFD4}
.darkshow__art{display:flex; gap:18px; justify-content:center}

/* ===================================================================
   SIRI
   =================================================================== */
.siri{background:linear-gradient(180deg,#1A1A2E 0%, #16263a 55%, #13303a 100%); color:#EEF3F6}
.siri__stage{margin-top:46px; align-items:center}
.lockscreen{width:min(330px,90vw); margin-inline:auto; border-radius:30px; padding:26px 18px 20px;
  background:linear-gradient(165deg,#20283f,#161d30); border:1px solid rgba(146,182,212,.16);
  box-shadow:var(--sh-phone); text-align:center}
.lockscreen__top{margin-bottom:22px; color:#fff}
.lockscreen__top i{width:1.1em;height:1.1em; opacity:.7}
.lockscreen__time{font-family:var(--font-display); font-weight:500; font-size:3.6rem; line-height:1; margin-top:4px}
.lockscreen__date{color:#A8BFD4; font-size:.92rem}
.liveact{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-lg);
  padding:14px; text-align:left; backdrop-filter:blur(8px); box-shadow:0 8px 30px rgba(0,0,0,.35)}
.liveact__head{display:flex; justify-content:space-between; align-items:center; font-size:.8rem; color:#A8BFD4; margin-bottom:8px}
.liveact__app{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:600; color:#fff}
.liveact__side{color:var(--teal-light); font-weight:700}
.liveact__body{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px}
.liveact__label{font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:#fff}
.liveact__timer{font-family:var(--font-display); font-weight:600; font-size:1.6rem; color:var(--teal-light); font-variant-numeric:tabular-nums}
.liveact__btns{display:flex; gap:8px}
.liveact__btns button{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:5px;
  font-family:var(--font-body); font-weight:700; font-size:.82rem; color:#EAF6F7;
  background:rgba(92,214,214,.16); border:0; border-radius:var(--r-md); padding:9px 6px; cursor:pointer; transition:background .2s}
.liveact__btns button i{width:1em;height:1em}
.liveact__btns button:hover{background:rgba(92,214,214,.28)}
.liveact__btns .end{background:rgba(242,139,130,.2); color:var(--coral-light)}
.liveact__btns .end:hover{background:rgba(242,139,130,.32)}
.lockscreen__hint{margin-top:14px; font-size:.78rem; color:#7A8FA3}

.siri__chat{width:100%; max-width:460px; margin-inline:auto}
.chat{display:flex; flex-direction:column; gap:14px}
.chat__pair{display:flex; flex-direction:column; gap:7px}
.say,.reply{padding:12px 16px; border-radius:18px; font-size:.96rem; max-width:88%; line-height:1.4}
.say{align-self:flex-end; background:linear-gradient(135deg,var(--teal),var(--teal-dark)); color:#fff;
  border-bottom-right-radius:6px; font-weight:600; display:flex; gap:.5em; align-items:center}
.say__wave{flex:none; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle,#fff,rgba(255,255,255,.4)); box-shadow:0 0 10px rgba(255,255,255,.6)}
.reply{align-self:flex-start; background:rgba(255,255,255,.08); color:#cfe; border:1px solid rgba(146,182,212,.16);
  border-bottom-left-radius:6px}
.siri__caps{list-style:none; display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center; padding:0; margin:30px 0 0}
.siri__caps li{display:inline-flex; align-items:center; gap:.5em; font-weight:700; font-size:.9rem; color:#A8BFD4}
.siri__caps i{color:var(--teal-light)}

/* ===================================================================
   KICK COUNTER SPOTLIGHT
   =================================================================== */
.kick{background:radial-gradient(90% 70% at 50% 40%, #ffffff, var(--bg-2) 70%)}
.kick__glow{position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); width:min(560px,100%); aspect-ratio:1;
  background:radial-gradient(circle,rgba(74,191,191,.3),transparent 62%); z-index:0}
.kick .wrap{position:relative; z-index:1}

.tapbubble{position:relative; width:clamp(220px,62vw,290px); aspect-ratio:1; border-radius:50%; border:0; cursor:pointer;
  margin:38px 0 10px; background:transparent; -webkit-tap-highlight-color:transparent;
  transition:transform .35s var(--ease)}
.tapbubble:active{transform:scale(.9)}
.tapbubble.pop{animation:bubblePop .5s var(--ease)}
@keyframes bubblePop{0%{transform:scale(.84)}55%{transform:scale(1.06)}100%{transform:scale(1)}}
.tapbubble__glow{position:absolute; inset:-16%; border-radius:50%;
  background:radial-gradient(circle,rgba(74,191,191,.4),rgba(74,191,191,0) 66%); transition:opacity .4s; filter:blur(2px)}
.tapbubble.active .tapbubble__glow{background:radial-gradient(circle,rgba(92,214,214,.6),rgba(92,214,214,0) 66%)}
.tapbubble::before{content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.85), rgba(214,242,242,.5) 38%, rgba(74,191,191,.22) 100%);
  box-shadow:inset 0 -16px 30px rgba(74,191,191,.18), inset 0 8px 20px rgba(255,255,255,.7), var(--sh-md)}
.tapbubble__ring{position:absolute; inset:0; border-radius:50%; padding:2px;
  background:linear-gradient(135deg, rgba(255,255,255,.85), rgba(74,191,191,.35) 45%, rgba(255,255,255,.15));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.tapbubble__spec{position:absolute; left:20%; top:14%; width:46%; height:26%; border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0)); transform:rotate(-22deg); filter:blur(1px)}
.tapbubble__fish{position:absolute; inset:0; display:grid; place-items:center; z-index:2}
.tapbubble__fish img{width:58%; filter:drop-shadow(0 6px 12px rgba(44,62,80,.18)); animation:fishSway 5s ease-in-out infinite}
@keyframes fishSway{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-3deg)}}

.kick__count{font-family:var(--font-display); margin-top:6px; display:flex; align-items:baseline; gap:8px; justify-content:center}
.kick__count #kickCount{font-size:2.6rem; font-weight:600; color:var(--teal-dark); font-variant-numeric:tabular-nums}
.kick__count small{color:var(--ink-3); font-weight:500}
.kick__more{display:grid; gap:12px; margin-top:40px; max-width:460px; margin-inline:auto}
.kick__more div{display:flex; align-items:center; gap:12px; justify-content:center; color:var(--ink-2); font-weight:600; font-size:.98rem}
.kick__more i{color:var(--teal); flex:none}

.kbubble{position:absolute; bottom:8%; border-radius:50%; background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),rgba(92,214,214,.4));
  pointer-events:none; z-index:3; opacity:.9}

/* ===================================================================
   FEATURES GRID
   =================================================================== */
.features{background:var(--bg-2)}
.fgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:46px}
.fcard{background:#fff; border-radius:var(--r-lg); padding:22px 18px; box-shadow:var(--sh-sm);
  border:1px solid rgba(214,228,236,.7); transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.fcard:hover{transform:translateY(-5px); box-shadow:var(--sh-md)}
.fcard__ico{display:inline-flex; width:48px; height:48px; align-items:center; justify-content:center;
  border-radius:var(--r-md); font-size:1.4rem; margin-bottom:12px}
.fcard:hover .fcard__ico{animation:iconBounce .5s var(--ease)}
@keyframes iconBounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}
.i-teal{background:rgba(74,191,191,.14); color:var(--teal-dark)}
.i-coral{background:rgba(242,139,130,.16); color:var(--coral-dark)}
.i-amber{background:rgba(232,163,61,.16); color:#B7791F}
.fcard h3{font-family:var(--font-display); font-weight:600; font-size:1.06rem; margin-bottom:5px}
.fcard p{color:var(--ink-2); font-size:.9rem; line-height:1.45}

/* ===================================================================
   CTA / CLOSE
   =================================================================== */
.cta{background:linear-gradient(180deg,#ffffff 0%, #EAF6F7 60%, var(--wave) 100%)}
.cta__inner{position:relative; z-index:1}
.cta__fish{margin-bottom:10px; filter:drop-shadow(0 12px 22px rgba(44,62,80,.2))}
.cta h2{margin-bottom:14px}
.cta .lede{margin-bottom:30px}
.breathe{animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:0 12px 26px -10px rgba(199,91,82,.7)}50%{box-shadow:0 16px 40px -8px rgba(242,139,130,.85)}}
.stats{list-style:none; display:flex; gap:18px 36px; justify-content:center; flex-wrap:wrap; padding:0; margin:42px 0 0}
.stats li{display:flex; flex-direction:column; align-items:center}
.stats .stat{font-family:var(--font-display); font-weight:600; font-size:2.4rem; color:var(--teal-dark); font-variant-numeric:tabular-nums; line-height:1}
.stats small{color:var(--ink-2); font-weight:700; font-size:.85rem; margin-top:4px}

/* ===================================================================
   FOOTER
   =================================================================== */
.footer{background:linear-gradient(180deg,var(--wave),#D5EAEC); padding:56px 0 30px; color:var(--ink)}
.footer__inner{display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center}
.brand--footer{font-size:1.2rem}
.footer__tag{font-family:var(--font-display); font-weight:500; color:var(--ink); line-height:1.4}
.footer__tag small{font-family:var(--font-body); font-weight:600; color:var(--ink-2); font-size:.85rem}
.footer__links{display:flex; gap:8px 22px; flex-wrap:wrap; justify-content:center}
.footer__links a{font-weight:700; color:var(--teal-dark)}
.footer__links a:hover{text-decoration:underline}
.footer__copy{text-align:center; color:var(--ink-2); font-size:.82rem; margin-top:28px}

/* ===================================================================
   LEGAL — privacy policy page
   =================================================================== */
.legal-hero{padding-block:150px 90px;
  background:
    radial-gradient(120% 90% at 22% 8%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(80% 70% at 78% 30%, rgba(74,191,191,.22), transparent 60%),
    linear-gradient(180deg,#ffffff 0%, #EAF6F7 60%, var(--wave) 100%)}
.legal-hero__title{font-size:clamp(2.1rem,7vw,3.4rem); margin-bottom:16px}
.legal-hero__meta{margin-top:18px; font-weight:700; font-size:.88rem; color:var(--ink-3)}

.legal{background:var(--bg); padding-block:56px 96px}
.legal__wrap{max-width:720px}
.legal h2{font-family:var(--font-display); font-weight:600; font-size:1.4rem; margin:44px 0 12px; color:var(--ink)}
.legal p{color:var(--ink-2); margin-bottom:14px}
.legal p strong, .legal li strong{color:var(--ink)}
.legal ul{margin:0 0 14px; padding-left:22px; color:var(--ink-2)}
.legal li{margin-bottom:8px}
.legal a{color:var(--teal-dark); font-weight:700}
.legal a:hover{text-decoration:underline}
.legal code{font-size:.88em; background:var(--bg-2); border:1px solid var(--sep);
  border-radius:6px; padding:.1em .4em; color:var(--ink)}

.legal__tldr{background:var(--bg-2); border:1px solid var(--sep); border-radius:var(--r-xl);
  padding:26px 26px 20px; margin-bottom:20px; box-shadow:var(--sh-sm)}
.legal__tldr h2{margin:0 0 14px; font-size:1.25rem}
.legal__tldr ul{list-style:none; padding:0; margin:0}
.legal__tldr li{display:flex; gap:.6em; align-items:flex-start; font-size:.96rem; margin-bottom:10px}
.legal__tldr li i, .legal__tldr li svg{flex:none; color:var(--teal); width:1.2em; height:1.2em; margin-top:.2em}

/* ===================================================================
   RISING BUBBLES (JS-generated)
   =================================================================== */
.bubbles{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.bubble{position:absolute; bottom:-40px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.7), rgba(74,191,191,.18));
  animation:rise linear forwards}
.bubbles--glow .bubble{background:radial-gradient(circle at 35% 30%, rgba(160,240,240,.9), rgba(92,214,214,.25));
  box-shadow:0 0 14px rgba(92,214,214,.55)}
@keyframes rise{0%{transform:translateY(0) translateX(0); opacity:0}10%{opacity:.8}90%{opacity:.5}100%{transform:translateY(-115vh) translateX(var(--dx,20px)); opacity:0}}

/* ===================================================================
   SCROLL REVEAL + float
   =================================================================== */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms)}
.reveal.in-view{opacity:1; transform:none}
.float{animation:floaty 5s ease-in-out infinite; animation-delay:var(--d,0s)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.phone--hero.floaty-on{animation:floatyHero 5.5s ease-in-out infinite}
@keyframes floatyHero{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-10px)}}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (min-width:720px){
  .nav__links{display:flex}
  .timeline{grid-template-columns:repeat(3,1fr); gap:20px}
  .care{grid-template-columns:1fr 1fr; gap:40px}
  .fgrid{grid-template-columns:repeat(3,1fr); gap:18px}
  .privacy__grid{grid-template-columns:repeat(2,1fr); gap:18px}
  .flow{flex-direction:row; justify-content:center; align-items:center; gap:6px}
  .flow__link{width:auto; min-width:200px}
  .siri__stage{flex-direction:row; align-items:center; gap:48px}
  .darkshow{flex-direction:row; justify-content:center; align-items:center; gap:44px; text-align:left}
  .darkshow__copy{text-align:left}
}

@media (min-width:980px){
  body{font-size:18px}
  .hero__inner{flex-direction:row; text-align:left; gap:30px; align-items:center}
  .hero__copy{align-items:flex-start; flex:1.1}
  .hero .center, .hero__copy{text-align:left}
  .hero__art{flex:1; min-height:560px}
  .phone--peek{display:block}
  .hero__cta{justify-content:flex-start}
  .trust-row{justify-content:flex-start}
  .split{flex-direction:row; align-items:center; gap:60px}
  .ease__copy{flex:1}
  .ease h2.display{font-size:clamp(2rem,3.6vw,2.6rem)}
  .ease__art{flex:1}
  .fgrid{grid-template-columns:repeat(4,1fr)}
  .privacy__grid{grid-template-columns:repeat(4,1fr)}
}

/* ===================================================================
   REDUCED MOTION — hard off switch
   =================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1 !important; transform:none !important}
  .flow__dash{stroke-dashoffset:0 !important}
  .bubbles{display:none}
}