/* Landing-page-specific styles. Brand tokens come from brand.css,
   resets from base.css, nav from nav.css, footer from footer.css.
   This file owns: hero, IV-bag stage, trust strip, sections, how-it-
   works, team grid, "Built for you" personalization, FAQ, final CTA,
   and the chat panel that slides up on CTA tap.

   Anything you find here that's not landing-specific should be lifted
   to a shared file. Don't grow this file further — split components
   instead.
*/

/* Landing-only typography accents. */
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* Dim-and-blur the marketing layer when the chat panel slides up. */
.hero-page.dimmed{filter:brightness(0.65) blur(3px);pointer-events:none;transition:filter 0.35s ease}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;border-radius:999px;font-size:14px;font-weight:500;transition:all .2s;cursor:pointer;border:1px solid transparent;min-height:48px}
.btn.primary{background:var(--ink);color:var(--bg)}
.btn.primary:hover{background:var(--accent)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
.btn.full{width:100%}

/* ============ HERO ============ */
.hero{padding:32px 0 56px}
/* Mobile: compact IV-bag crest to the right of the headline. The
   bag shouldn't lead the page — the message does — but a small
   bag next to the copy preserves the brand cue without pushing
   content below the fold. Desktop overrides to the full two-column
   grid at ≥720px. */
.hero-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
/* Mobile: show the carousel ABOVE the headline so the brand cue lands
   in the first viewport. We rely on flex `order` overrides at ≥720px
   to put the image back to the right of the copy on desktop. */
.hero-content{order:2}
.hero-img{order:1;align-self:center;padding-top:0;width:100%}
/* Auto-cycling hero carousel — 15s loop, ~4s dwell per image, 1s cross-fade. Works on desktop + mobile. */
/* Mobile: keep the carousel compact so hero copy + CTA stay above the fold. Desktop override below. */
/* Explicit min-height fallback for older iOS that doesn't compute
   aspect-ratio reliably with absolutely-positioned children — without
   this the carousel collapses to 0 and looks like the image is missing. */
.hero-carousel{position:relative;aspect-ratio:4/5;min-height:280px;max-width:240px;width:100%;margin:0 auto;border-radius:18px;overflow:hidden;background:var(--surface,#f5f0e8);box-shadow:0 20px 60px rgba(0,0,0,.08)}
.hero-carousel picture{position:absolute;inset:0;display:block;opacity:0;animation:uivHeroFade 15s ease-in-out infinite}
.hero-carousel picture img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.hero-carousel picture:nth-child(1){animation-delay:-1s}
.hero-carousel picture:nth-child(2){animation-delay:4s}
.hero-carousel picture:nth-child(3){animation-delay:9s}
@keyframes uivHeroFade{0%{opacity:0}6.67%,33.33%{opacity:1}40%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hero-carousel picture{animation:none;opacity:1}.hero-carousel picture:nth-child(n+2){display:none}}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px}
.hero-eyebrow::before{content:"";width:20px;height:1px;background:var(--ink)}
h1.hero-h{font-family:var(--serif);font-weight:400;font-size:clamp(44px,11vw,92px);line-height:1;letter-spacing:-.02em;text-wrap:pretty}
h1.hero-h em{font-style:italic;color:var(--accent);font-size:1.12em}
.flair{font-family:var(--hand);font-weight:600;color:var(--accent);font-style:normal;font-size:1.22em;line-height:.9;vertical-align:-0.04em;transform:rotate(-2deg);display:inline-block;margin:0;padding:0}
/* Smaller flair for body copy — same warm handwriting + green, less bounce so inline text stays readable. */
p .flair, li .flair, .eyebrow .flair, .role .flair, .kicker .flair,
.sec-head p .flair, .builder-note .flair, .builder-foot .flair,
.col-label .flair, .hero-sub .flair, .hero-note .flair,
.btn .flair, .nav-cta .flair,
.final p .flair { font-size:1.15em; transform:rotate(-1.5deg); margin:0; padding:0 .02em; }
.hero-sub{max-width:440px;margin-top:20px;font-size:16px;color:var(--ink-2)}
.hero-cta{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}
.hero-cta .btn{flex:1 1 auto;min-width:160px}
.hero-note{margin-top:18px;font-size:13px;color:var(--muted);max-width:420px;line-height:1.55}
.hero-figure{display:flex;flex-direction:column;gap:12px}
.hero-figure figcaption{font-size:13px;color:var(--muted);text-align:center;max-width:320px;margin:0 auto;line-height:1.5}
.local-note{margin-top:14px;font-size:13px;color:var(--muted);max-width:62ch}

/* Terms & privacy agreement row under Start CTA. Start button is
   disabled until the box is checked (see inline JS near body end). */
.tcs{margin-top:16px;display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--ink-2);max-width:440px;line-height:1.5;cursor:pointer;user-select:none}
.tcs input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1.5px solid var(--line);border-radius:4px;background:var(--surface);cursor:pointer;flex-shrink:0;margin-top:2px;position:relative;transition:all .15s}
.tcs input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
.tcs input[type=checkbox]:checked::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:10px;border:solid var(--bg);border-width:0 2px 2px 0;transform:translate(-50%,-58%) rotate(45deg)}
.tcs a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.tcs a:hover{color:var(--ink)}
.btn.primary[disabled]{background:#bfc2bd;cursor:not-allowed;box-shadow:none}
.btn.primary[disabled]:hover{background:#bfc2bd}

/* ============ IV BAG ============ */
.iv-stage{position:relative;max-width:88px;width:100%;margin:0;padding:0;overflow:visible}
@media (min-width:720px){.iv-stage{max-width:440px;margin:0 auto;padding:12px 0 20px}}
.iv-svg{display:block;width:100%;height:auto;filter:drop-shadow(0 40px 48px rgba(30,26,18,.12)) drop-shadow(0 12px 16px rgba(30,26,18,.08))}
#iv-name-el{fill:var(--accent)}
.iv-tag{position:absolute;background:var(--surface);border:1px solid var(--line);padding:10px 12px;border-radius:2px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);box-shadow:0 20px 40px -24px rgba(0,0,0,.25);max-width:170px;z-index:4}
.iv-tag b{color:var(--ink);display:block;font-size:10px;letter-spacing:.08em;margin-bottom:3px}
.iv-tag.t1{top:20%;left:-18px}
.iv-tag.t2{bottom:8%;right:-18px}
@media (max-width:720px){.iv-tag{display:none}}

/* ============ TRUST STRIP ============ */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;background:var(--bg-2)}
.trust-row{display:flex;gap:18px 28px;align-items:center;justify-content:center;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.trust-row span{display:inline-flex;align-items:center;gap:8px}
.trust-row .dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* ============ SECTIONS ============ */
section{padding:64px 0}
.sec-head{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:36px}
.sec-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,8vw,60px);line-height:1.02;letter-spacing:-.015em;max-width:22ch}
.sec-head h2 em{font-style:italic;color:var(--accent);font-size:1.12em}
.sec-head .kicker{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.sec-head .kicker::before{content:"";display:inline-block;width:16px;height:1px;background:var(--ink);vertical-align:middle;margin-right:10px}
.sec-head p{max-width:58ch;color:var(--ink-2);font-size:16px;line-height:1.6}

/* ============ HOW IT WORKS ============ */
.ai-banner{margin-bottom:24px;padding:16px 18px;border:1px dashed color-mix(in oklab, var(--accent) 60%, var(--line));border-radius:var(--r);background:color-mix(in oklab, var(--accent) 6%, var(--surface));display:flex;gap:14px;align-items:flex-start}
.ai-banner .ai-ic{width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--bg);display:grid;place-items:center;flex-shrink:0;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em}
.ai-banner p{font-size:14px;color:var(--ink-2);line-height:1.55}
.ai-banner p b{color:var(--ink);font-weight:600}
.steps{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.step{padding:28px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.step:last-child{border-bottom:0}
.step .num{font-family:var(--serif);font-style:italic;font-size:44px;color:var(--accent);font-weight:400;line-height:.9;min-width:52px}
.step .role{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2);margin-bottom:4px}
.step h3{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.15;letter-spacing:-.01em}
.step p{margin-top:10px;color:var(--muted);font-size:14px;line-height:1.6;max-width:50ch}
.step .tag{margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);display:inline-block;padding:4px 8px;border:1px solid var(--line);border-radius:999px}

/* ============ BUILT FOR YOU ============ */
.builder{display:grid;grid-template-columns:1fr;gap:28px;align-items:stretch;margin-top:8px}
.builder-col{display:flex;flex-direction:column;gap:14px}
.col-label{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.signal-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.signal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:2px;transition:all .2s;min-height:56px}
.signal:hover,.signal.active{border-color:var(--ink);background:var(--bg)}
.signal .sg{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.signal .sv{font-family:var(--serif);font-size:17px;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.signal.active .sg{color:var(--accent)}
.builder-note{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.phys-flow{display:flex;flex-direction:row;align-items:center;gap:12px;justify-content:center;padding:12px 0}
.phys-line{flex:1;height:1px;background:var(--line);position:relative}
.phys-line::before,.phys-line::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--accent);top:-2px}
.phys-line::before{left:0}
.phys-line::after{right:0}
.phys-chip{background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:999px;display:flex;flex-direction:column;gap:2px;align-items:center;white-space:nowrap;flex-shrink:0}
.phys-chip .pd{font-family:var(--serif);font-size:16px;font-style:italic;letter-spacing:-.01em}
.phys-chip .ps{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.you-bag{background:#F7F1E3;border:1px solid color-mix(in oklab, var(--ink) 30%, var(--line));border-radius:4px;padding:24px 22px 20px;position:relative;box-shadow:0 30px 60px -30px rgba(30,26,18,.18)}
.you-bag::before{content:"";position:absolute;top:-6px;left:20px;right:20px;height:6px;background:repeating-linear-gradient(90deg, transparent 0 6px, color-mix(in oklab, var(--ink) 30%, var(--line)) 6px 7px);opacity:.35}
.you-name{font-family:var(--hand);font-weight:600;font-size:48px;color:var(--accent);transform:rotate(-3deg);line-height:.95;margin-bottom:8px}
.you-mix{list-style:none;padding:0;margin:14px 0 0;border-top:1px dashed color-mix(in oklab, var(--ink) 30%, transparent);padding-top:12px}
.you-mix li{display:flex;align-items:center;gap:10px;padding:7px 0;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink);border-bottom:1px dashed color-mix(in oklab, var(--ink) 12%, transparent);transition:background .2s, padding .2s}
.you-mix li:last-child{border-bottom:0}
.you-mix li .d{width:4px;height:4px;border-radius:50%;background:var(--ink);flex-shrink:0}
.you-mix li b{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--accent);letter-spacing:.1em}
.you-mix li.hl{background:color-mix(in oklab, var(--accent) 14%, transparent);padding-left:8px;padding-right:8px;margin:0 -8px;border-radius:2px}
.you-sig{margin-top:18px;padding-top:14px;border-top:1px solid color-mix(in oklab, var(--ink) 20%, transparent);display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.you-sig .sigName{font-family:var(--hand);font-size:22px;color:var(--ink);transform:rotate(-4deg);flex:1}
.you-sig .stamp{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:3px 7px;border-radius:2px;transform:rotate(-3deg);opacity:.75}
.builder-foot{margin-top:28px;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted);max-width:56ch;margin-left:auto;margin-right:auto;line-height:1.6}
@media (min-width:860px){
  .builder{grid-template-columns:1fr auto 1fr;gap:32px;align-items:stretch}
  .builder-col.physician{justify-content:center}
  .phys-flow{flex-direction:column;height:100%;gap:14px;padding:0}
  .phys-line{width:1px;height:100%;flex:1;background:none;border-left:1px dashed var(--line)}
  .phys-line::before,.phys-line::after{left:50%;transform:translateX(-50%)}
  .phys-line::before{top:-2px}
  .phys-line::after{bottom:-2px;top:auto}
}
@media (min-width:1100px){
  .builder{gap:56px}
  .signal-grid{grid-template-columns:1fr 1fr;gap:10px}
}

/* ============ FAQ ============ */
.faq{max-width:860px;margin:0 auto}
.q{border-top:1px solid var(--line);padding:22px 0}
.q:last-child{border-bottom:1px solid var(--line)}
.q summary{display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;list-style:none}
.q summary::-webkit-details-marker{display:none}
.q summary h4{font-family:var(--serif);font-size:20px;font-weight:500;letter-spacing:-.01em;line-height:1.2}
.q summary .plus{width:28px;height:28px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:14px;flex-shrink:0;transition:all .25s}
.q[open] summary .plus{transform:rotate(45deg);background:var(--ink);color:var(--bg);border-color:var(--ink)}
.q .a{margin-top:12px;max-width:64ch;color:var(--ink-2);font-size:14px;line-height:1.6}

/* ============ FINAL CTA ============ */
.final{padding:80px 0;text-align:center;background:var(--bg-2)}
.final h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,10vw,78px);line-height:1;letter-spacing:-.02em;max-width:16ch;margin:0 auto}
.final h2 em{font-style:italic;color:var(--accent)}
.final p{margin:22px auto 28px;max-width:48ch;color:var(--ink-2);font-size:16px}
.final .cta-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:420px;margin:0 auto}
.final .cta-row .btn{flex:1 1 auto;min-width:160px}
.final .micro{margin-top:22px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ============ RESPONSIVE (≥720px) ============ */
@media (min-width:720px){
  .wrap{padding:0 32px}
  section{padding:88px 0}
  .hero{padding:56px 0 88px}
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
  /* Desktop: revert mobile's image-first ordering so content (left) +
     image (right) lays out left-to-right as designed. */
  .hero-content{order:0}
  .hero-img{order:0;align-self:start;padding-top:8px;width:auto}
  .hero-carousel{max-width:none;margin:0;min-height:auto}
  .hero-sub{font-size:17px}
  .sec-head{grid-template-columns:1fr;gap:24px;margin-bottom:56px}
  .steps{grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
  .step{padding:32px 24px 36px;border-right:1px solid var(--line);border-bottom:0;grid-template-columns:1fr;min-height:280px}
  .step:last-child{border-right:0}
  .final{padding:120px 0}
  .iv-tag.t1{top:22%;left:-12px}
  .iv-tag.t2{bottom:24%;right:-12px}
}

/* Chat panel + intake form CSS lives in intake.css */