/* Bluvli: Pregnancy Planner · loaded only by the Bluvli pages (body.bv), generated by bluvli.py.
   Tokens = the app's palette (bluvli-app docs/design/SYSTEM_V1.md §2, light and dark). Type = §3: New York for display
   (ui-serif on Apple devices, Source Serif 4 elsewhere), SF Pro for text (system-ui). Sentence case, no all-caps.
   site.css stays untouched: the Bluvli pages remap its variables under body.bv, so the shared header and footer keep their structure. */

body.bv{
  --bv-canvas:#FBF4F1;--bv-surface:#FFFAF8;--bv-raised:#FFFFFF;--bv-hairline:#F1E0DC;--bv-line:rgba(59,28,48,.22);
  --bv-hero-a:#FCE0E9;--bv-hero-b:#FDEFE9;--bv-ink:#3B1C30;--bv-ink2:#6D5165;--bv-action:#A8345E;--bv-on-action:#FFFAF8;
  --bv-accent-fill:#FBE2EA;--bv-done:#3F6B4E;--bv-done-fill:#E6F0E8;--bv-muted-fill:#F3E7E5;
  --bv-wash-plan:#F2E9F5;--bv-wash-prepare:#EDF3EB;--bv-wash-list:#FCEEE6;--bv-wash-memory:#FBE2EA;
  --bv-nav:rgba(251,244,241,.86);
  --bv-display:ui-serif,"New York","Source Serif 4",Georgia,"Times New Roman",serif;
  --bv-text:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --bv-shadow:0 30px 60px -30px rgba(59,28,48,.25),0 10px 24px -12px rgba(59,28,48,.12);
}
@media (prefers-color-scheme:dark){
  body.bv{
    --bv-canvas:#1C1218;--bv-surface:#26191F;--bv-raised:#2F2028;--bv-hairline:#432F3A;--bv-line:rgba(248,234,240,.26);
    --bv-hero-a:#45233A;--bv-hero-b:#2A1A22;--bv-ink:#F8EAF0;--bv-ink2:#CDB4C1;--bv-action:#F2A5BF;--bv-on-action:#2C0F1D;
    --bv-accent-fill:#412433;--bv-done:#9FD0AE;--bv-done-fill:#22332A;--bv-muted-fill:#35282F;
    --bv-wash-plan:#2C2438;--bv-wash-prepare:#22302A;--bv-wash-list:#34281F;--bv-wash-memory:#412433;
    --bv-nav:rgba(28,18,24,.86);
    --bv-shadow:0 30px 60px -30px rgba(0,0,0,.6),0 10px 24px -12px rgba(0,0,0,.4);
  }
}

/* ---- Remap site.css variables ---- */
body.bv{
  --cream:var(--bv-canvas);--ink:var(--bv-ink);--ink2:var(--bv-ink2);--teal:var(--bv-action);--orange:var(--bv-action);
  --sand:var(--bv-muted-fill);--mint:var(--bv-accent-fill);--peach:var(--bv-accent-fill);--butter:var(--bv-muted-fill);--sky:var(--bv-muted-fill);
  --serif:var(--bv-display);--sans:var(--bv-text);--shadow:var(--bv-shadow);--r:24px;
  font-family:var(--bv-text);
}
body.bv h1,body.bv h2{font-weight:600;letter-spacing:-.01em;line-height:1.08}
body.bv h1{font-size:clamp(40px,6vw,76px)}
body.bv h2{font-size:clamp(30px,4vw,50px)}
body.bv h3{font-family:var(--bv-text);font-size:19px;font-weight:600;letter-spacing:0;line-height:1.3}
body.bv .accent{font-style:italic;color:var(--bv-action)}
body.bv :is(.brand,.btn,.lang,.platforms,b,strong,.faq summary){font-weight:600}
body.bv .eyebrow{text-transform:none;letter-spacing:.01em;font:600 15px/1.2 var(--bv-text);color:var(--bv-action)}
body.bv .eyebrow::before{background:var(--bv-action)}
body.bv a{color:inherit}
body.bv .skip:focus{background:var(--bv-surface);color:var(--bv-ink)}
body.bv .lead{color:var(--bv-ink2)}

/* Shared header and footer: same structure, Bluvli surfaces (and dark mode) */
body.bv .nav{background:var(--bv-nav);border-bottom-color:var(--bv-hairline)}
body.bv .lang{border-color:var(--bv-line)}
body.bv .langs div{background:var(--bv-surface);box-shadow:var(--bv-shadow);border:1px solid var(--bv-hairline)}
body.bv footer .wrap{border-top-color:var(--bv-hairline)}

/* Buttons and pills */
body.bv .btn{min-height:48px;border-radius:999px}
body.bv :is(.btn-orange,.btn-ink){background:var(--bv-action);color:var(--bv-on-action);box-shadow:none}
body.bv .btn-ghost{border-color:var(--bv-line);color:var(--bv-ink)}
body.bv .soon{color:var(--bv-ink2)}
body.bv .soon b{text-transform:none;letter-spacing:.01em;font-size:13px;font-weight:600;background:var(--bv-accent-fill);color:var(--bv-action);padding:6px 10px;white-space:nowrap}
body.bv .platforms{color:var(--bv-action)}

/* Hero: the app's petal gradient, the real icon and three promises */
.bv-meta{margin-top:22px;font-size:15px;color:var(--bv-ink2)}
.bv-stage{position:relative;border-radius:40px;aspect-ratio:1/1;max-width:520px;width:100%;margin-left:auto;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--bv-hero-a),var(--bv-hero-b));box-shadow:inset 0 0 0 1px var(--bv-hairline)}
.bv-stage picture{display:block;width:46%}
img.bv-icon{border-radius:22.5%}
.bv-hero-icon{display:block;width:100%;height:auto;box-shadow:var(--bv-shadow)}
.bv-chips{list-style:none;margin:0;padding:0}
.bv-chip{position:absolute;background:var(--bv-surface);color:var(--bv-ink);border:1px solid var(--bv-hairline);border-radius:999px;
  padding:9px 15px;font:600 14px/1.2 var(--bv-text);box-shadow:var(--bv-shadow);white-space:nowrap}
.bv-chip::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--bv-action);margin-right:8px;vertical-align:1px}
.bv-chip.c0{left:6%;top:7%}
.bv-chip.c1{right:5%;bottom:16%}
.bv-chip.c2{left:8%;bottom:5%}
@media(max-width:900px){.bv-stage{margin:0 auto;max-width:440px}}
@media(max-width:420px){.bv-chip{font-size:13px;padding:8px 12px}.bv-chip.c1{right:3%}.bv-chip.c2{left:4%}}

/* Feature cards: the app's module washes */
.bv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bv-card{border-radius:24px;padding:clamp(24px,3vw,32px);background:var(--bv-surface);border:1px solid var(--bv-hairline)}
.bv-card.w-week{background:var(--bv-wash-prepare);border-color:transparent}
.bv-card.w-plan{background:var(--bv-wash-plan);border-color:transparent}
.bv-card.w-things{background:var(--bv-wash-list);border-color:transparent}
.bv-card.w-memories{background:var(--bv-wash-memory);border-color:transparent}
.bv-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--bv-raised);color:var(--bv-action)}
.bv-ico svg{width:24px;height:24px}
.bv-card h3{margin:16px 0 10px;color:var(--bv-ink)}
.bv-card ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.bv-card li{position:relative;padding-left:16px;color:var(--bv-ink2);font-size:15.5px;line-height:1.5}
.bv-card li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--bv-action);opacity:.7}
@media(max-width:980px){.bv-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.bv-grid{grid-template-columns:1fr}}

/* Checklists (drawn in CSS so they follow light and dark): "done" green, like "Always free" in the app */
.bv-checks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.bv-checks li{position:relative;padding-left:30px;color:var(--bv-ink2);max-width:60ch}
.bv-checks li::before{content:"";position:absolute;left:0;top:.25em;width:20px;height:20px;border-radius:50%;background:var(--bv-done-fill)}
.bv-checks li::after{content:"";position:absolute;left:7.5px;top:calc(.25em + 4.5px);width:5px;height:9px;border:solid var(--bv-done);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Always free */
.bv-free{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:start;background:var(--bv-surface);border:1px solid var(--bv-hairline);border-radius:32px;padding:clamp(28px,5vw,60px)}
.bv-free h2{margin:14px 0 14px}
.bv-free .bv-checks{margin-top:6px}
.bv-fine{color:var(--bv-ink2);font-size:15px;max-width:40ch}
@media(max-width:860px){.bv-free{grid-template-columns:1fr}}

/* Not a medical device */
.bv-safe{background:var(--bv-surface);border-radius:24px;padding:clamp(26px,3.4vw,40px);border:1px solid var(--bv-hairline);border-left:6px solid var(--bv-action)}
body.bv .bv-safe h2{font-size:clamp(26px,3vw,36px);margin-bottom:12px}
.bv-safe p{color:var(--bv-ink2);max-width:70ch}
body.bv .bv-safe a{display:inline-block;margin-top:14px;font-weight:600;color:var(--bv-action)}

/* Final block and the support header */
body.bv .final{background:var(--bv-surface);border:1px solid var(--bv-hairline)}
body.bv .final picture{display:block}
body.bv .final img.logo.bv-icon{width:clamp(130px,15vw,200px);height:auto;animation:none;filter:none;box-shadow:var(--bv-shadow)}
body.bv .final.bv-head{grid-template-columns:auto 1fr}
@media(max-width:760px){body.bv .final.bv-head{grid-template-columns:1fr}body.bv .final.bv-head img.logo.bv-icon{width:104px}}

/* FAQ */
body.bv .faq details{border-bottom-color:var(--bv-hairline)}
body.bv .faq summary::after{color:var(--bv-action)}
body.bv .faq p{color:var(--bv-ink2)}
body.bv .faq a{color:var(--bv-action)}

/* Legal and support pages (the Velita layout, Bluvli colours) */
.bv-crumbs{font-size:14px;color:var(--bv-ink2);margin-bottom:18px}
body.bv .bv-crumbs a{color:var(--bv-action);text-decoration:none}
.bv-crumbs a:hover{text-decoration:underline}
body.bv .legal{max-width:780px;margin:0 auto}
body.bv .legal h1{font-size:clamp(38px,5vw,60px)}
body.bv .legal .updated{margin-top:14px;color:var(--bv-ink2);font-size:15px}
body.bv .legal .tldr{background:var(--bv-muted-fill);border-radius:24px;padding:clamp(24px,3vw,34px);margin-top:34px}
body.bv .legal .tldr h2,body.bv .legal .toc h2{font-size:clamp(22px,2.2vw,26px);margin-bottom:14px}
body.bv .legal .toc{margin-top:34px}
body.bv .legal .toc ol{margin:0;padding:0;list-style:none;columns:2;column-gap:36px;font-size:15.5px}
body.bv .legal .toc li{margin:0 0 8px;break-inside:avoid}
body.bv .legal .toc a{color:var(--bv-action);text-decoration:none}
body.bv .legal .toc a:hover{text-decoration:underline}
body.bv .legal section{scroll-margin-top:84px}
body.bv .legal section>h2{font-size:clamp(24px,2.5vw,30px);margin:56px 0 16px}
body.bv .legal p{margin-top:12px}
body.bv .legal ul{margin:12px 0 0;padding-left:22px}
body.bv .legal li{margin-top:8px}
body.bv .legal li ul{margin-top:4px}
body.bv .legal ul.bv-checks{padding-left:0;margin-top:0}
body.bv .legal ul.bv-checks li{margin-top:0}
body.bv .legal a{color:var(--bv-action);text-underline-offset:3px}
@media(max-width:640px){body.bv .legal .toc ol{columns:1}}
.bv-topics{max-width:820px;margin:0 auto}
.bv-topics section{scroll-margin-top:84px}
body.bv .bv-topics h2{font-size:clamp(26px,3vw,36px);margin:64px 0 6px}
.bv-topics section:first-child h2{margin-top:0}
.bv-jump{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 auto 10px;max-width:820px;padding:0;list-style:none}
body.bv .bv-jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:99px;border:1.5px solid var(--bv-line);text-decoration:none;font-weight:600;font-size:14.5px}
body.bv .bv-jump a:hover{border-color:var(--bv-action);color:var(--bv-action)}
.bv-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px;font-weight:600;font-size:15px}
body.bv .bv-links a{color:var(--bv-action)}
