:root{
    --ink:#111814;
    --ink-soft:#39463f;
    --gray:#5f6a63;
    --gray-soft:#59645d;
    --page:#ffffff;
    --surface:#ffffff;
    --card:#f6f8f6;
    --card-border:#eef1ee;
    --green:#2d6a4f;
    --green-deep:#22543d;
    --green-tint:#e8f1eb;
    --nav:#ffffff;
    --radius-lg:24px;
    --radius-md:16px;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    background:var(--page);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  .page{
    max-width:1240px;
    margin:16px auto;
    background:var(--surface);
    border-radius:8px;
    overflow:hidden;
  }
  .container{max-width:980px;margin:0 auto;padding:0 24px;}

  /* ---------- Nav ---------- */
  .nav-wrap{position:relative;z-index:50;display:flex;justify-content:center;padding:8px 24px 0;}
  nav{
    position:relative;
    display:flex;align-items:center;gap:28px;
    background:var(--nav);border-radius:14px;
    padding:10px 12px 10px 18px;
    border:1px solid #edf0ed;
    box-shadow:0 6px 20px rgba(18,28,22,.06);
    width:100%;max-width:780px;justify-content:space-between;
  }
  .brand{display:flex;align-items:center;gap:9px;color:var(--green);text-decoration:none;}
  .brand-mark{
    width:28px;height:28px;border-radius:8px;overflow:hidden;flex-shrink:0;
    display:block;box-shadow:0 1px 5px rgba(18,28,22,.10),0 0 0 1px #eef1ee;
  }
  .brand-mark svg{width:100%;height:100%;display:block;}
  .brand-word{display:flex;}
  .brand-word svg{height:17px;width:auto;display:block;}
  .nav-right{display:flex;align-items:center;gap:14px;}
  .nav-links{display:flex;gap:18px;}
  .nav-links a{color:var(--gray-soft);font-size:12.5px;font-weight:500;text-decoration:none;transition:color .15s;}
  .nav-links a:hover{color:var(--ink);}
  .nav-cta{
    background:var(--green);color:#fff;font-size:12.5px;font-weight:600;
    padding:9px 18px;border-radius:999px;text-decoration:none;
    border:2px solid transparent;transition:background .15s;
  }
  .nav-cta:hover{background:var(--green-deep);}
  .nav-toggle{
    display:none;width:34px;height:34px;border:1px solid #e4e9e5;border-radius:9px;
    background:#fff;cursor:pointer;align-items:center;justify-content:center;color:var(--ink-soft);
  }
  .nav-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;}

  /* ---------- Eyebrow / headings ---------- */
  .eyebrow{font-size:13px;color:var(--gray);font-weight:500;text-align:center;margin-bottom:10px;}
  h1,h2{font-weight:700;letter-spacing:-.02em;}
  .h-gray{color:var(--gray);}
  .h-ink{color:var(--ink);}

  /* dark400 (#787878) text overrides — scoped so Expert's
     "Medical advisor, EaseIn" eyebrow and "The clinician" heading are untouched */
  .section-head .eyebrow,
  .challenge .eyebrow,
  .orbit-copy .eyebrow{color:#787878;}
  .faq .h-gray,
  .start .h-gray{color:#787878;}

  /* Expert heading "The clinician behind your care." — black (both spans) */
  .expert .section-head h2 .h-gray,
  .expert .section-head h2 .h-ink{color:#000000;}

  /* ---------- Hero ---------- */
  .hero{padding:72px 24px 0;text-align:center;}
  .hero h1{font-size:clamp(30px,4.6vw,44px);line-height:1.18;}
  .hero h1 .h-gray{color:#787878;}
  .hero-sub{
    margin:18px auto 26px;max-width:460px;
    color:var(--gray-soft);font-size:13.5px;line-height:1.65;
  }
  .store-badges{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
  .badge{
    display:flex;align-items:center;gap:8px;text-decoration:none;
    padding:8px 16px;border-radius:12px;font-size:12px;font-weight:600;
    box-shadow:0 5px 14px rgba(18,28,22,.08);transition:transform .15s;
  }
  .badge:hover{transform:translateY(-2px);}
  .badge svg{width:20px;height:20px;flex-shrink:0;}
  .badge .b-lines{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;}
  .badge .b-top{font-size:8.5px;font-weight:500;opacity:.85;}
  .badge-apple{background:#111418;color:#fff;}
  .badge-play{background:#fff;color:var(--ink);}

  /* Hero phones: both screens, shown in full (no cropping), gently overlapped */
  .hero-phones{
    display:flex;justify-content:center;align-items:flex-start;
    max-width:640px;margin:56px auto 0;
  }
  .phone{
    background:#16181c;border-radius:38px;padding:10px;
    box-shadow:0 20px 44px rgba(18,28,22,.16);
    display:inline-block;
  }
  .phone img{display:block;width:100%;border-radius:28px;}
  /* Hero phones — matched to the reference mockup: a metallic titanium rim
     (gradient) + a crisp BLACK BEZEL (the img border) around the screen + a
     soft float shadow. Front = natural silver titanium, back = graphite.
     Scoped to the two hero phones only; screenshots unchanged; keeps --py parallax. */
  .hero-phone-a,.hero-phone-b{
    padding:4px;border-radius:52px;position:relative;
  }
  /* Bottom fade: a per-phone overlay that fades to the page background (white),
     following each phone's tilt. Fading to the bg colour (not transparent) keeps
     the FRONT phone opaque over the back one — transparent would show it through. */
  .hero-phone-a::after,.hero-phone-b::after{
    content:'';position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;
    background:linear-gradient(to bottom,rgba(255,255,255,0) 55%,var(--page) 85%);
  }
  .hero-phone-a{
    width:224px;margin:0 -34px 0 0;z-index:1;
    transform:rotate(-7deg) translateY(var(--py,0px));
    background:linear-gradient(135deg,#6d7078 0%,#303237 20%,#565961 40%,#2a2c31 62%,#4a4d54 82%,#313338 100%);
    box-shadow:inset 0 1px 2px rgba(255,255,255,.16),inset 0 -1px 2px rgba(0,0,0,.42);
  }
  .hero-phone-b{
    width:236px;margin-left:-34px;z-index:2;
    transform:rotate(7deg) translateY(var(--py,0px));
    background:linear-gradient(135deg,#f6f7f8 0%,#b7bbc2 20%,#eceef0 40%,#a7abb3 62%,#e0e2e6 82%,#b2b6be 100%);
    box-shadow:inset 0 1px 2px rgba(255,255,255,.75),inset 0 -1px 2px rgba(0,0,0,.18);
  }
  /* the black bezel that sits between the titanium rim and the screen */
  .hero-phone-a img,.hero-phone-b img{border:5px solid #0a0b0d;border-radius:46px;}
  .hero-fade{opacity:0;transition:opacity .9s ease;}
  .hero-fade.is-in{opacity:1;}

  /* ---------- Challenge ---------- */
  .challenge{padding:56px 24px 120px;text-align:center;}
  .challenge p{
    max-width:480px;margin:0 auto;
    font-size:clamp(19px,2.4vw,23px);font-weight:600;line-height:1.5;
    color:#787878;
  }
  .challenge p strong{color:var(--ink);font-weight:700;}

  /* ---------- Section heads ---------- */
  .section-head{text-align:center;margin-bottom:40px;}
  .section-head h2{font-size:clamp(22px,3vw,27px);line-height:1.3;}

  /* ---------- Dose-cycle cards ---------- */
  .cycle{padding:0 24px 110px;}
  .cycle-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
    max-width:980px;margin:0 auto;
  }
  .cycle-card{
    background:var(--card);border:1px solid var(--card-border);
    border-radius:var(--radius-lg);overflow:hidden;
    display:flex;flex-direction:column;
  }
  .cycle-card .cc-body{padding:26px 26px 18px;}
  .cycle-card h3{font-size:14px;font-weight:700;margin-bottom:8px;}
  .cycle-card p{font-size:12.5px;color:var(--gray-soft);line-height:1.6;}
  .cc-shot{position:relative;padding:8px 34px 0;margin-top:auto;overflow:hidden;height:200px;}
  .cc-shot .phone{width:100%;border-radius:30px 30px 0 0;padding:8px 8px 0;}
  .cc-shot .phone img{border-radius:22px 22px 0 0;}
  .cc-shot::after{
    content:'';position:absolute;inset:auto 0 0 0;height:70px;
    background:linear-gradient(to bottom,rgba(246,248,246,0),var(--card) 90%);
  }
  /* middle card: image on top */
  .cycle-card.flip .cc-shot{order:-1;height:210px;padding:0 34px;display:flex;align-items:flex-end;}
  /* no shadow: .cc-shot has overflow:hidden, which clips the phone's drop shadow
     at the container's bottom edge and leaves a hard grey/white line */
  .cycle-card.flip .cc-shot .phone{border-radius:0 0 30px 30px;padding:0 8px 8px;transform:translateY(0);box-shadow:none;}
  .cycle-card.flip .cc-shot .phone img{border-radius:0 0 22px 22px;object-fit:cover;object-position:bottom;height:100%;}
  /* mirror of the other cards: they frame the top and fade the bottom, so the
     flip card frames the bottom and fades the top */
  .cycle-card.flip .cc-shot::after{
    inset:0 0 auto 0;height:60px;
    background:linear-gradient(to top,rgba(246,248,246,0),var(--card) 90%);
  }
  .cc-crop{height:100%;overflow:hidden;display:flex;align-items:flex-start;}
  .cycle-card.flip .cc-crop{align-items:flex-end;}

  /* ---------- What sets us apart (USP spotlight rows) ----------
     Distinct from the 3-up cycle grid, but reuses the same card surface,
     phone frame, brand type and bottom-fade so it stays on-brand. */
  .usp{padding:0 24px 110px;}
  .usp-list{max-width:940px;margin:0 auto;display:flex;flex-direction:column;gap:22px;}
  .usp-row{
    background:var(--card);border:1px solid var(--card-border);
    border-radius:var(--radius-lg);overflow:hidden;
    display:grid;grid-template-columns:1fr 320px;align-items:center;
  }
  .usp-row.rev{grid-template-columns:320px 1fr;}
  .usp-body{padding:40px 44px;}
  /* reversed rows: push the text toward the right edge (mirrors the left cards) */
  .usp-row.rev .usp-body{padding-left:230px;padding-right:24px;}
  .usp-body h3{font-size:18px;font-weight:700;letter-spacing:-.01em;margin-bottom:10px;}
  .usp-body p{font-size:13px;color:var(--gray-soft);line-height:1.7;max-width:360px;}
  .usp-shot{position:relative;height:270px;overflow:hidden;display:flex;justify-content:center;padding:26px 30px 0;}
  .usp-shot .phone{width:100%;max-width:214px;align-self:flex-start;border-radius:30px 30px 0 0;padding:8px 8px 0;box-shadow:none;}
  .usp-shot .phone img{border-radius:22px 22px 0 0;}
  .usp-shot::after{content:'';position:absolute;inset:auto 0 0 0;height:64px;background:linear-gradient(to bottom,rgba(246,248,246,0),var(--card) 90%);}
  @media(max-width:760px){
    .usp-row,.usp-row.rev{grid-template-columns:1fr;}
    .usp-body{padding:30px 28px 4px;text-align:center;}
    .usp-row.rev .usp-body{padding-left:28px;}
    /* stacked mobile: text first, then image (matches the other cards) */
    .usp-row.rev .usp-shot{order:1;}
    .usp-body p{margin:0 auto;}
    .usp-shot{height:250px;}
  }

  /* ---------- Features ---------- */
  .features{padding:0 24px 110px;}
  .features-grid{
    display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:22px;
    max-width:980px;margin:0 auto;align-items:center;
  }
  .f-col{display:flex;flex-direction:column;gap:18px;}
  .f-card{
    background:var(--card);border:1px solid var(--card-border);
    border-radius:var(--radius-md);padding:22px;
  }
  .f-icon{
    width:34px;height:34px;border-radius:10px;background:var(--green-tint);
    color:var(--green);
    display:flex;align-items:center;justify-content:center;margin-bottom:12px;
  }
  .f-icon svg,.s-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .f-card h3{font-size:13.5px;font-weight:600;margin-bottom:6px;}
  .f-title-short{display:none;}
  .f-card p{font-size:12px;color:var(--gray-soft);line-height:1.6;}
  .f-phone-wrap{display:flex;justify-content:center;}
  .f-phone{width:100%;max-width:290px;position:relative;}
  .f-phone .phone{width:100%;box-shadow:0 10px 24px rgba(18,28,22,.09);}
  .f-phone .shot-stack{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:1125/2436;}
  .shot-stack img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:0;transition:opacity .8s ease;
  }
  .shot-stack img.active{opacity:1;}

  /* ---------- Personalized ---------- */
  .personal{padding:0 24px 120px;}
  .personal-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
    max-width:980px;margin:0 auto;
  }
  .p-card .p-shot{
    background:linear-gradient(150deg,#e6f1ea,#cfe6d8);
    border-radius:var(--radius-lg);height:230px;overflow:hidden;
    display:flex;justify-content:center;padding:26px 40px 0;
  }
  .p-card .p-shot .phone{width:100%;border-radius:26px 26px 0 0;padding:7px 7px 0;box-shadow:0 14px 30px rgba(28,74,52,.15);}
  .p-card .p-shot .phone img{border-radius:20px 20px 0 0;}
  .p-card h3{font-size:13px;font-weight:700;margin:18px 0 8px;}
  .p-card p{font-size:12px;color:var(--gray-soft);line-height:1.65;}

  /* ---------- Integrations orbit ---------- */
  .orbit-sec{padding:20px 24px 140px;display:flex;justify-content:center;}
  .orbit{
    position:relative;width:560px;max-width:100%;aspect-ratio:1;
    display:flex;align-items:center;justify-content:center;text-align:center;
    --orbit-dur:60s;--breathe-dur:4.5s;
  }
  /* rotating layer that carries the 6 badges around the outer ring */
  .orbit-ring{position:absolute;inset:0;z-index:1;animation:orbit-spin var(--orbit-dur) linear infinite;}
  .orbit::before,.orbit::after{
    content:'';position:absolute;border-radius:50%;border:1px solid #e7ece8;
  }
  .orbit::before{inset:0;}
  .orbit::after{inset:14%;}
  .orbit-copy{max-width:290px;position:relative;z-index:2;}
  .orbit-copy .eyebrow{margin-bottom:8px;}
  .orbit-copy h2{font-size:22px;color:#000000;line-height:1.35;margin-bottom:12px;}
  .orbit-copy p{font-size:12px;color:var(--gray-soft);line-height:1.65;}
  /* .orb = a slot on the ring: positioned by top/left, counter-rotates so the
     badge stays upright while the ring spins */
  .orb{
    position:absolute;width:52px;height:52px;margin:-26px 0 0 -26px;
    animation:orbit-counter var(--orbit-dur) linear infinite;
  }
  /* .orb-face = the visible badge; breathes (gentle scale) on its own timing */
  .orb-face{
    width:100%;height:100%;border-radius:16px;background:#fff;
    box-shadow:0 8px 20px rgba(18,28,22,.07);border:1px solid #eef2ef;
    display:flex;align-items:center;justify-content:center;color:var(--green);
    animation:orb-breathe var(--breathe-dur) ease-in-out infinite;
    transition:box-shadow .3s ease, border-color .3s ease;
  }
  .orb-face svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
  /* even hexagon on the outer ring (~46% radius); mirrors the prior arrangement */
  .orb-1{top:10.2%;left:27%;}
  .orb-2{top:10.2%;left:73%;}
  .orb-3{top:50%;left:4%;}
  .orb-4{top:50%;left:96%;}
  .orb-5{top:89.8%;left:27%;}
  .orb-6{top:89.8%;left:73%;}
  /* stagger the breathing so they don't pulse in unison */
  .orb-1 .orb-face{animation-delay:0s;}
  .orb-2 .orb-face{animation-delay:-.75s;}
  .orb-3 .orb-face{animation-delay:-1.5s;}
  .orb-4 .orb-face{animation-delay:-2.25s;}
  .orb-5 .orb-face{animation-delay:-3s;}
  .orb-6 .orb-face{animation-delay:-3.75s;}
  @keyframes orbit-spin{to{transform:rotate(360deg);}}
  @keyframes orbit-counter{to{transform:rotate(-360deg);}}
  @keyframes orb-breathe{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}

  /* ---------- Testimonial ---------- */
  .testimonial{padding:0 24px 120px;text-align:center;}
  .t-card{
    position:relative;max-width:480px;margin:0 auto;
    background:var(--card);border-radius:28px;padding:64px 48px 44px;
  }
  .t-card::before{
    content:'';position:absolute;top:-16px;left:38%;width:64px;height:52px;
    background:var(--card);border-radius:16px;
  }
  .t-quote{font-size:15px;font-weight:600;color:var(--ink-soft);line-height:1.65;max-width:320px;margin:0 auto 28px;}
  .t-person{display:flex;align-items:center;justify-content:center;gap:10px;}
  .t-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#3d7a5c,#22543d);}
  .t-name{text-align:left;}
  .t-name strong{display:block;font-size:12px;font-weight:700;}
  .t-name span{font-size:10.5px;color:var(--gray);}
  .t-arrows{display:flex;gap:10px;justify-content:center;margin-top:26px;}
  .t-arrows button{
    width:32px;height:32px;border-radius:50%;border:1px solid #e4eae6;background:#fff;
    cursor:pointer;color:var(--ink-soft);
    display:flex;align-items:center;justify-content:center;transition:background .15s;
  }
  .t-arrows button svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .t-arrows button:hover{background:var(--card);}

  /* ---------- Pricing ---------- */
  .pricing{padding:0 24px 120px;}
  .price-band{
    max-width:980px;margin:0 auto;background:var(--card);
    border-radius:var(--radius-lg);
    display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;
    padding:40px 44px 0;overflow:hidden;
  }
  .price-main{padding:4px 0 40px;}
  .price-main .p-label{font-size:12px;color:var(--gray-soft);font-weight:600;margin-bottom:6px;}
  .price-amount{font-size:38px;font-weight:800;margin-bottom:20px;letter-spacing:-.02em;}
  .price-amount span{font-size:13px;font-weight:500;color:var(--gray);}
  .feat-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:22px;}
  .feat-list.feat-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;}
  .feat-list li{font-size:11.5px;color:var(--ink-soft);display:flex;align-items:center;gap:9px;font-weight:500;}
  .feat-list li svg{width:14px;height:14px;flex-shrink:0;stroke:var(--green);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
  .btn-blue{
    display:inline-block;background:var(--green);color:#fff;text-decoration:none;
    font-size:12px;font-weight:700;padding:11px 22px;border-radius:10px;
    box-shadow:0 6px 15px rgba(45,106,79,.24);transition:background .15s;
  }
  .btn-blue:hover{background:var(--green-deep);}
  .price-phone{width:230px;position:relative;height:290px;overflow:hidden;align-self:end;}
  .price-phone .phone{position:absolute;top:22px;left:0;width:100%;border-radius:34px 34px 0 0;padding:9px 9px 0;}
  .price-phone .phone img{border-radius:26px 26px 0 0;}

  /* ---------- FAQ ---------- */
  .faq{padding:0 24px 120px;}
  .faq .section-head h2{line-height:1.35;}
  .faq-list{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
  .faq-item{background:var(--card);border-radius:14px;overflow:hidden;}
  .faq-q{
    width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;
    background:none;border:none;cursor:pointer;
    padding:17px 20px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink);text-align:left;
  }
  .faq-q .chev{color:var(--gray);transition:transform .25s;display:flex;}
  .faq-q .chev svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .faq-item.open .chev{transform:rotate(180deg);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
  .faq-a p{padding:0 20px 18px;font-size:12px;color:var(--gray-soft);line-height:1.65;}
  .faq-note{text-align:center;margin-top:26px;font-size:11px;color:var(--gray);}
  .faq-note a{color:var(--gray-soft);}

  /* ---------- Get started ---------- */
  .start{padding:0 24px 90px;}
  .start-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
    max-width:980px;margin:0 auto 44px;
  }
  .s-card{position:relative;background:var(--card);border-radius:var(--radius-md);padding:24px 20px;}
  .s-icon{
    width:34px;height:34px;border-radius:10px;background:var(--green-tint);color:var(--green);
    display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  }
  /* step number — hidden on desktop/tablet; shown only as the timeline node
     in the phone stepper (re-enabled in the max-width:520px block) */
  .s-num{
    position:absolute;top:20px;right:18px;width:24px;height:24px;border-radius:50%;
    background:var(--green-tint);color:var(--green);font-size:11px;font-weight:700;
    display:none;align-items:center;justify-content:center;z-index:2;
  }
  .s-card h3{font-size:12.5px;font-weight:700;margin-bottom:7px;}
  .s-card p{font-size:11.5px;color:var(--gray-soft);line-height:1.6;}

  /* ---------- Footer ---------- */
  footer{border-top:1px solid #eef1ee;padding:56px 24px 40px;}
  .foot-grid{
    max-width:980px;margin:0 auto;display:grid;
    grid-template-columns:1.6fr 1fr;gap:40px;
  }
  .foot-brand .brand{color:var(--green);margin-bottom:16px;}
  .foot-brand .brand-mark{box-shadow:0 2px 8px rgba(18,28,22,.10),0 0 0 1px #eef1ee;}
  .foot-brand p{font-size:11.5px;color:var(--gray-soft);line-height:1.65;max-width:300px;margin-bottom:20px;}
  .foot-brand p a{color:var(--ink);text-decoration:none;}
  .foot-brand p a:hover{text-decoration:underline;}
  .foot-social{display:flex;gap:10px;align-items:center;}
  .soc{
    width:30px;height:30px;border-radius:50%;border:1px solid #e2e8e4;
    display:flex;align-items:center;justify-content:center;color:var(--ink-soft);
    text-decoration:none;transition:background .15s;
  }
  .soc svg{width:14px;height:14px;}
  .soc:hover{background:var(--card);}
  .soc-contact{
    border:1px solid #e2e8e4;border-radius:999px;padding:7px 16px;
    font-size:11.5px;font-weight:600;color:var(--ink);text-decoration:none;transition:background .15s;
  }
  .soc-contact:hover{background:var(--card);}
  .foot-cols{display:flex;gap:64px;justify-content:flex-end;}
  .foot-col h4{font-size:12px;font-weight:700;margin-bottom:14px;}
  .foot-col a{display:block;font-size:11.5px;color:var(--gray-soft);text-decoration:none;margin-bottom:10px;}
  .foot-col a:hover{color:var(--ink);}
  .foot-legal{max-width:980px;margin:44px auto 0;font-size:10.5px;color:var(--gray);}

  /* ---------- Medication strip ---------- */
  .med-strip{margin:20px auto 0;display:flex;justify-content:center;padding:0 20px;}
  .med-strip .med-label{font-size:11.5px;color:var(--gray-soft);font-weight:500;text-align:center;}

  /* ---------- Ambassadors ---------- */
  .amb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:980px;margin:0 auto;}
  .amb-card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius-lg);overflow:hidden;text-align:left;display:flex;flex-direction:column;}
  .amb-photo{position:relative;height:210px;background:linear-gradient(150deg,#e6f1ea,#cde4d6);overflow:hidden;}
  .amb-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
  .amb-photo .amb-initials{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:800;color:#2d6a4f;opacity:.5;}
  .amb-delta{position:absolute;top:14px;left:14px;background:var(--green);color:#fff;font-size:13px;font-weight:800;padding:6px 12px;border-radius:999px;z-index:2;letter-spacing:-.01em;}
  .amb-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:14px;flex:1;}
  .amb-quote{font-size:13px;color:var(--ink-soft);line-height:1.6;font-weight:500;}
  .amb-meta{margin-top:auto;display:flex;align-items:center;gap:10px;}
  .amb-av{width:34px;height:34px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#3d7a5c,#22543d);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
  .amb-who strong{display:block;font-size:12.5px;font-weight:700;color:var(--ink);}
  .amb-who span{font-size:10.5px;color:var(--gray-soft);}

  /* ---------- Expert block ---------- */
  .expert{padding:0 24px 120px;}
  .expert-card{max-width:820px;margin:0 auto;background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius-lg);display:grid;grid-template-columns:230px 1fr;overflow:hidden;}
  .expert-photo{position:relative;background:linear-gradient(160deg,#e6f1ea,#c7e0d3);min-height:250px;}
  .expert-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
  .expert-photo .amb-initials{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:800;color:#2d6a4f;opacity:.45;z-index:0;}
  .expert-body{padding:30px 34px;}
  .expert-body .eyebrow{text-align:left;margin-bottom:8px;}
  .expert-body h3{font-size:18px;font-weight:700;letter-spacing:-.01em;margin-bottom:5px;}
  .expert-role{font-size:12px;color:var(--green);font-weight:600;margin-bottom:16px;}
  .expert-body p{font-size:12.5px;color:var(--gray-soft);line-height:1.7;margin-bottom:16px;}
  .expert-creds{list-style:none;display:flex;flex-direction:column;gap:9px;}
  .expert-creds li{font-size:11.5px;color:var(--ink-soft);font-weight:500;display:flex;gap:9px;align-items:flex-start;}
  .expert-creds li svg{width:14px;height:14px;flex-shrink:0;margin-top:1px;stroke:var(--green);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}

  /* ---------- Sticky CTA ---------- */
  .sticky-cta{position:fixed;z-index:80;left:0;right:0;bottom:20px;display:flex;justify-content:center;padding:0 16px;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .32s ease,transform .32s ease;}
  .sticky-cta.show{opacity:1;transform:none;pointer-events:auto;}
  .sc-card{
    display:flex;align-items:center;gap:12px;width:100%;max-width:430px;
    background:rgba(255,255,255,.94);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);
    border:1px solid rgba(230,236,231,.9);border-radius:20px;padding:11px 12px 11px 13px;
    box-shadow:0 12px 32px rgba(18,28,22,.13);
  }
  .sc-icon{width:46px;height:46px;border-radius:12px;overflow:hidden;flex-shrink:0;box-shadow:0 2px 7px rgba(18,28,22,.12);}
  .sc-icon svg{width:100%;height:100%;display:block;}
  .sc-txt{display:flex;flex-direction:column;line-height:1.25;margin-right:auto;min-width:0;}
  .sc-txt strong{font-size:14px;font-weight:700;color:var(--ink);}
  .sc-txt span{font-size:11.5px;color:var(--gray-soft);}
  .sc-btn{background:var(--green);color:#fff;font-size:13px;font-weight:700;padding:11px 20px;border-radius:999px;text-decoration:none;flex-shrink:0;transition:background .15s;}
  .sc-btn:hover{background:var(--green-deep);}

  /* ---------- Footer disclaimer ---------- */
  .foot-disclaimer{max-width:980px;margin:40px auto 0;padding:16px 18px;background:var(--card);border:1px solid var(--card-border);border-radius:12px;font-size:11px;color:var(--gray-soft);line-height:1.65;display:flex;gap:11px;align-items:flex-start;}
  .foot-disclaimer svg{width:17px;height:17px;flex-shrink:0;margin-top:1px;stroke:var(--green);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .foot-disclaimer strong{color:var(--ink-soft);font-weight:700;}

  /* ---------- Scroll reveals ---------- */
  .reveal{
    opacity:0;transform:translateY(32px);
    transition:opacity .6s ease, transform .55s cubic-bezier(.22,.61,.36,1);
    will-change:opacity,transform;
  }
  .reveal.rev-left{transform:translateX(-46px);}
  .reveal.rev-right{transform:translateX(46px);}
  .reveal.rev-scale{transform:scale(.9);}
  .reveal.is-in{opacity:1;transform:none;}

  /* ============================================================
     Typography — per design spec (Inter). Type properties ONLY
     (weight / size / letter-spacing / line-height / balanced wrap).
     Colors and the current centered alignment are left untouched.
     Scope = only the texts listed in the spec — Expert, Features,
     Pricing, Nav and Footer are NOT in the spec, so left as-is.
     ============================================================ */
  /* H1 (3rem desktop/tablet; 2.5rem phone — see max-width:700px) */
  .hero h1{font-weight:600;font-size:3rem;letter-spacing:-.04em;line-height:1.2;}
  /* H2 — specced section headings + orbit heading
     (Expert's "The clinician" H2 is not in the spec, so excluded) */
  .cycle .section-head h2,
  .usp .section-head h2,
  .features .section-head h2,
  .personal .section-head h2,
  .faq .section-head h2,
  .start .section-head h2,
  .orbit-copy h2{font-weight:600;font-size:2rem;letter-spacing:-.04em;line-height:1.3;text-wrap:balance;}
  /* H3 — challenge statement (weight 600 & #787878 kept from base) */
  .challenge p{font-size:26px;letter-spacing:-.04em;line-height:1.4;text-wrap:balance;}
  /* H6 — card / step titles */
  .cycle-card h3,
  .p-card h3,
  .s-card h3{font-weight:500;font-size:1rem;letter-spacing:-.02em;line-height:1.4;text-wrap:balance;}
  /* Body */
  .hero-sub,
  .cycle-card p,
  .p-card p,
  .s-card p{font-weight:500;font-size:1rem;letter-spacing:-.04em;line-height:1.6;text-wrap:balance;}
  /* Body — orbit paragraph (spec lists no balanced wrapping) */
  .orbit-copy p{font-weight:500;font-size:1rem;letter-spacing:-.04em;line-height:1.6;}
  /* Body SM — FAQ note */
  .faq-note{font-weight:500;font-size:.88rem;letter-spacing:-.04em;line-height:1.5;text-wrap:balance;}

  /* ---------- Hover polish (desktop pointers only) ---------- */
  @media(hover:hover) and (pointer:fine){
    .cycle-card,.f-card,.s-card,.amb-card,.expert-card,.faq-item,.p-shot,.usp-shot .phone{
      transition:transform .3s ease, box-shadow .3s ease, opacity .6s ease, background .15s;
    }
    .cycle-card:hover,.amb-card:hover,.expert-card:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(18,28,22,.08);}
    .f-card:hover,.s-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(18,28,22,.07);}
    /* p-card is a transparent wrapper — lift the actual card surface (the shot) */
    .p-card:hover .p-shot{transform:translateY(-6px);box-shadow:0 20px 40px rgba(28,74,52,.14);}
    /* USP spotlight phones: subtle lift + soft shadow on hover */
    .usp-shot .phone:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(18,28,22,.13);}
    /* Health-data orbit: freeze the system while a badge is hovered, and pop that badge */
    .orbit:has(.orb:hover) .orbit-ring,
    .orbit:has(.orb:hover) .orb,
    .orbit:has(.orb:hover) .orb-face{animation-play-state:paused;}
    .orb-face:hover{box-shadow:0 14px 30px rgba(18,28,22,.16);border-color:#dfe7e1;}
    .price-band{transition:box-shadow .3s ease;}
    .price-band:hover{box-shadow:0 20px 42px rgba(18,28,22,.06);}
  }

  /* ---------- Responsive ---------- */
  @media(max-width:900px){
    .cycle-grid,.personal-grid{grid-template-columns:1fr;max-width:400px;}
    /* stacked mobile: centre the card heading + copy */
    .cycle-card .cc-body{text-align:center;}
    /* Features: compact 2-column icon tiles (descriptions hidden) */
    .features-grid{grid-template-columns:1fr 1fr;max-width:420px;gap:12px;align-items:stretch;}
    .f-col{display:contents;}
    .f-phone-wrap{order:-1;grid-column:1/-1;margin-bottom:6px;}
    .f-card{padding:15px 14px;}
    .f-card p{display:none;}
    .f-card h3{font-size:12.5px;margin-bottom:0;}
    .f-title-full{display:none;}
    .f-title-short{display:inline;}
    .f-icon{margin-bottom:9px;}
    .amb-grid{grid-template-columns:1fr;max-width:360px;}
    .expert-card{grid-template-columns:1fr;}
    /* Square box matches the 1:1 headshot so cover shows the whole face, no top-crop. */
    .expert-photo{aspect-ratio:1/1;min-height:0;}
    .expert-photo img{object-position:center top;}
    .expert-body{padding:26px 26px;}
    .price-band{grid-template-columns:1fr;padding:32px 28px;gap:24px;}
    .price-main{padding-bottom:0;}
    .price-phone{display:none;}
    .start-grid{grid-template-columns:1fr 1fr;max-width:560px;}
    .foot-grid{grid-template-columns:1fr;}
    .foot-cols{justify-content:flex-start;}
    /* Mobile nav: hamburger reveals a dropdown of the section links */
    .nav-toggle{display:flex;}
    .nav-links{
      display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;
      flex-direction:column;gap:0;
      background:#fff;border:1px solid #edf0ed;border-radius:14px;
      box-shadow:0 12px 28px rgba(18,28,22,.10);padding:6px;z-index:60;
    }
    .nav-links.open{display:flex;}
    .nav-links a{padding:12px 14px;border-radius:9px;font-size:13.5px;}
    .nav-links a:hover{background:var(--card);}
    /* Health-data orbit: keep both rings, shrink orbs + tighten center copy */
    .orbit{max-width:330px;}
    .orbit::after{inset:16%;}
    .orb{width:44px;height:44px;margin:-22px 0 0 -22px;}
    .orb-face{border-radius:13px;}
    .orb-face svg{width:21px;height:21px;}
    .orbit-copy{max-width:188px;}
    .orbit-copy h2{font-size:17px;margin-bottom:8px;}
    .orbit-copy p{font-size:11px;}
    /* Constrain the "peek" phones so screenshots keep the same crop
       proportion as desktop instead of thinning to a sliver. */
    .cc-shot{height:236px;padding:8px 0 0;text-align:center;}
    .cc-shot .phone{width:238px;max-width:82%;}
    .cycle-card.flip .cc-shot{height:236px;padding:0;justify-content:center;}
    .cycle-card.flip .cc-shot .phone{width:238px;max-width:82%;}
    .p-card .p-shot{height:250px;padding:24px 0 0;}
    .p-card .p-shot .phone{width:238px;max-width:82%;}
    /* Hero on mobile: both phones, scaled down but shown in full */
    .hero-phones{margin-top:30px;}
    .hero-phone-a{width:150px;margin:20px -26px 0 0;}
    .hero-phone-b{width:158px;margin-left:-26px;}
    /* Scale the phone frame down with the phone so the bezel isn't chunky */
    .hero-phone-a,.hero-phone-b{padding:5px;border-radius:28px;}
    .hero-phone-a img,.hero-phone-b img{border:3px solid #0a0b0d;border-radius:23px;}
    /* Nav: drop the CTA on mobile (hero badges + floating card cover download) */
    .nav-cta{display:none;}
    .nav-right{gap:0;}
  }
  @media(max-width:520px){
    /* 4 steps become a vertical numbered stepper with a connecting line */
    .start-grid{grid-template-columns:1fr;gap:0;max-width:420px;}
    .s-card{background:none;border-radius:0;padding:0 0 26px 46px;position:relative;}
    .s-card:last-child{padding-bottom:0;}
    .s-icon{display:none;}
    .s-num{display:flex;position:absolute;left:0;top:0;width:30px;height:30px;background:var(--green);color:#fff;font-size:13px;}
    .s-card:not(:last-child)::after{content:'';position:absolute;left:14px;top:34px;bottom:6px;width:2px;background:var(--green-tint);z-index:0;}
    .s-card h3{margin-bottom:5px;}
    .feat-list.feat-2col{grid-template-columns:1fr;}
    .sticky-cta{right:0;left:0;bottom:16px;display:flex;justify-content:center;}
  }
  @media(max-width:400px){
    .hero-phone-a{width:128px;margin-right:-22px;}
    .hero-phone-b{width:136px;margin-left:-22px;}
    .hero-phone-a,.hero-phone-b{padding:4px;border-radius:24px;}
    .hero-phone-a img,.hero-phone-b img{border-radius:20px;}
    .cc-shot .phone,.cycle-card.flip .cc-shot .phone,.p-card .p-shot .phone{width:208px;}
  }
  /* Tighter vertical rhythm on phones */
  @media(max-width:700px){
    .hero{padding-top:40px;}
    .hero h1{font-size:2.5rem;}
    .challenge{padding:72px 24px 68px;}
    .cycle,.features,.personal,.pricing,.faq,.expert{padding-bottom:64px;}
    .orbit-sec{padding:8px 24px 70px;}
    .start{padding-bottom:60px;}
    .section-head{margin-bottom:28px;}
  }
  @media(prefers-reduced-motion:reduce){
    *{transition:none!important;animation:none!important;}
    .reveal,.hero-fade{opacity:1!important;transform:none!important;}
  }


/* ── Legal pages (privacy, terms) — matches the landing design ───────────── */
.legal{background:var(--page);padding:24px 24px 88px;}
.legal-wrap{max-width:820px;margin:0 auto;color:var(--ink-soft);font-size:16px;line-height:1.72;text-align:left;}

.legal-wrap .hero{text-align:center;padding:40px 0 8px;min-height:0;background:none;}
.legal-wrap .eyebrow{font-size:13px;color:var(--gray);font-weight:600;text-align:center;margin-bottom:10px;text-transform:uppercase;letter-spacing:.08em;}
.legal-wrap h1{font-size:clamp(30px,5vw,40px);line-height:1.1;color:var(--ink);letter-spacing:-.02em;margin:0 0 16px;}
.legal-wrap .meta-pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 22px;}
.legal-wrap .pill{background:var(--green-tint);color:var(--green-deep);font-size:13px;padding:5px 12px;border-radius:999px;}
.legal-wrap .lead{font-size:16.5px;color:var(--gray-soft);max-width:680px;margin:0 auto 14px;}

.legal-wrap .toc{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius-md);padding:22px 26px;margin:34px 0;}
.legal-wrap .toc h2{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--gray);margin:0 0 12px;display:block;}
.legal-wrap .toc ol{margin:0;padding-left:20px;columns:2;column-gap:32px;}
.legal-wrap .toc li{margin:6px 0;break-inside:avoid;}
.legal-wrap .toc a{color:var(--green);text-decoration:none;}
.legal-wrap .toc a:hover{text-decoration:underline;}

.legal-wrap section{margin:0 0 8px;scroll-margin-top:90px;}
.legal-wrap h2{font-size:22px;color:var(--ink);letter-spacing:-.01em;margin:40px 0 12px;display:flex;gap:10px;align-items:baseline;}
.legal-wrap h2 .n{color:var(--green);font-weight:700;}
.legal-wrap h3{font-size:17px;color:var(--ink);margin:26px 0 8px;}
.legal-wrap p{margin:0 0 16px;}
.legal-wrap ul,.legal-wrap ol{margin:0 0 18px;padding-left:22px;}
.legal-wrap li{margin:7px 0;}
.legal-wrap a{color:var(--green);text-decoration:underline;text-underline-offset:2px;}
.legal-wrap strong,.legal-wrap b{color:var(--ink);font-weight:600;}

.legal-wrap .callout,.legal-wrap .contact{background:var(--green-tint);border:1px solid var(--card-border);border-radius:var(--radius-md);padding:18px 22px;margin:24px 0;}
.legal-wrap .callout p:last-child,.legal-wrap .contact p:last-child{margin-bottom:0;}

.legal-wrap table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14px;}
.legal-wrap th,.legal-wrap td{border:1px solid var(--card-border);padding:10px 12px;text-align:left;vertical-align:top;}
.legal-wrap th{background:var(--card);color:var(--ink);font-weight:600;}

@media(max-width:640px){.legal-wrap .toc ol{columns:1;}}