/* Velita: Baby Sleep Planner · loaded only by the Velita pages (body.vl) and, for the Velita card, the studio home (.vl-app).
   Tokens = the app's NidoColor / docs/DESIGN_SYSTEM.md (Day + Evening). Type = Figtree (BRAND_AND_NAME §3.3: OFL humanist sans,
   ~500 headings, +1–2 % tracking on large sizes, no serif, no all-caps). Figures: ui-rounded on Apple devices, tabular digits.
   site.css stays untouched: Velita pages remap its variables under body.vl, so the shared header/footer keep their structure. */

body.vl,.vl-app{
  --vl-canvas:#F6F1E8;--vl-surface:#FFFDF8;--vl-raised:#FFFFFF;--vl-ink:#1B2340;--vl-ink2:#5B6275;
  --vl-action:#2F6F6B;--vl-on-action:#FFFDF8;--vl-teal-soft:#5E9C97;--vl-sleep:#B7AEDC;--vl-sleep-ink:#5B5196;
  --vl-hairline:#E5DDD0;--vl-line:rgba(27,35,64,.22);--vl-shade:#EDE6DA;--vl-caution:#9A5B12;
  --vl-tint-sleep:#EEEAF8;--vl-tint-action:#E3EFED;--vl-tint-caution:#F6E7CF;
  /* "night" band (the explainer and Premium card): navy in the day, raised navy in the evening */
  --vl-deep:#1B2340;--vl-deep-ink:#EFE8DC;--vl-deep-ink2:#C7CAD6;--vl-deep-sleep:#C4BDEB;--vl-deep-line:rgba(239,232,220,.14);
  --vl-bezel:#1B2340;
  /* Ember (the app's night mode): warm black, no blue */
  --vl-ember:#050404;--vl-ember-surface:#0E0B09;--vl-ember-ink:#C08A62;--vl-ember-action:#2A1D15;
  --vl-font:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --vl-figures:ui-rounded,"Figtree",system-ui,-apple-system,sans-serif;
  --vl-shadow:0 30px 60px -30px rgba(27,35,64,.28),0 10px 24px -12px rgba(27,35,64,.14);
}
@media (prefers-color-scheme:dark){
  body.vl{
    --vl-canvas:#0E1424;--vl-surface:#161D33;--vl-raised:#1C2440;--vl-ink:#EFE8DC;--vl-ink2:#A7ADBF;
    --vl-action:#7FBDB6;--vl-on-action:#0E1424;--vl-sleep:#7F76B8;--vl-sleep-ink:#C4BDEB;
    --vl-hairline:#26304D;--vl-line:rgba(239,232,220,.26);--vl-shade:#121A2E;--vl-caution:#E2B26A;
    --vl-tint-sleep:#232A4A;--vl-tint-action:#173133;--vl-tint-caution:#2B2416;
    --vl-deep:#1C2440;--vl-deep-line:rgba(239,232,220,.12);--vl-bezel:#05070D;
    --vl-shadow:0 30px 60px -30px rgba(0,0,0,.6),0 10px 24px -12px rgba(0,0,0,.4);
  }
}

/* ---- Remap site.css variables on Velita pages ---- */
body.vl{
  --cream:var(--vl-canvas);--ink:var(--vl-ink);--ink2:var(--vl-ink2);--teal:var(--vl-action);--orange:var(--vl-sleep-ink);
  --sand:var(--vl-shade);--mint:var(--vl-tint-action);--peach:var(--vl-tint-sleep);--butter:var(--vl-tint-sleep);--sky:var(--vl-tint-sleep);
  --serif:var(--vl-font);--sans:var(--vl-font);--shadow:var(--vl-shadow);--r:24px;
  font-family:var(--vl-font);
}
body.vl h1,body.vl h2{font-weight:500;letter-spacing:.012em;line-height:1.08}
body.vl h1{font-size:clamp(40px,6.2vw,78px)}
body.vl h2{font-size:clamp(30px,4vw,52px)}
body.vl h3{font-weight:600;letter-spacing:.005em;line-height:1.2}
body.vl .accent,.vl-app .accent{font-style:normal;color:var(--vl-sleep-ink)}
body.vl :is(.brand,.btn,.chip,.lang,.platforms,b,strong,.faq summary){font-weight:600}
body.vl .eyebrow,.vl-app .eyebrow{text-transform:none;letter-spacing:.01em;font:600 15px/1.2 var(--vl-font);color:var(--vl-action)}
body.vl .eyebrow::before{background:var(--vl-sleep)}
.vl-num,body.vl .vl-num{font-family:var(--vl-figures);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
body.vl a{color:inherit}
body.vl .skip:focus{background:var(--vl-surface);color:var(--vl-ink)}

/* Shared header and footer: same structure, Velita surfaces (and dark mode) */
body.vl .nav{background:rgba(246,241,232,.86);border-bottom-color:var(--vl-hairline)}
@media (prefers-color-scheme:dark){body.vl .nav{background:rgba(14,20,36,.86)}}
body.vl .lang{border-color:var(--vl-line)}
body.vl .langs div{background:var(--vl-surface);box-shadow:var(--vl-shadow);border:1px solid var(--vl-hairline)}
body.vl footer .wrap{border-top-color:var(--vl-hairline)}

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

/* Cards, FAQ, final block */
body.vl .card{background:var(--vl-surface);border:1px solid var(--vl-hairline);box-shadow:none}
body.vl .card p{color:var(--vl-ink2)}
body.vl .card .ico{background:var(--vl-tint-sleep);color:var(--vl-sleep-ink)}
body.vl .faq details{border-bottom-color:var(--vl-hairline)}
body.vl .faq summary::after{color:var(--vl-sleep-ink)}
body.vl .final{background:var(--vl-surface);border:1px solid var(--vl-hairline)}
body.vl .platforms{color:var(--vl-action)}
body.vl .lead{color:var(--vl-ink2)}

/* Phone frames */
body.vl .phone,.vl-app .phone{background:var(--vl-bezel)}
body.vl .phone::after,.vl-app .phone::after{background:var(--vl-bezel)}
body.vl .phone picture{display:contents}
@media (prefers-color-scheme:dark){body.vl .phone{box-shadow:0 0 0 1px rgba(239,232,220,.10),var(--vl-shadow)}}

/* Hero stage: soft haze with the horizon arcs of the app icon */
.vl-sky{position:absolute;inset:6% 0 8% 6%;border-radius:40px;overflow:hidden;background:linear-gradient(160deg,var(--vl-tint-sleep),var(--vl-canvas) 55%,var(--vl-tint-action));box-shadow:inset 0 0 0 1px var(--vl-hairline)}
.vl-sky svg{position:absolute;inset:0;width:100%;height:100%}
.vl-glow{fill:var(--vl-surface);fill-opacity:.55}
.vl-arc{stroke-opacity:.6;stroke-dasharray:1;stroke-dashoffset:1;animation:vldraw 2.4s cubic-bezier(.6,.1,.2,1) forwards}
.vl-arc.a{stroke:var(--vl-sleep)}.vl-arc.b{stroke:var(--vl-teal-soft)}
@keyframes vldraw{to{stroke-dashoffset:0}}
body.vl .stage .chip{background:var(--vl-surface);color:var(--vl-ink);border:1px solid var(--vl-hairline);box-shadow:var(--vl-shadow)}
body.vl .chip small{color:var(--vl-ink2)}
.stage .chip i.vl-i{background:var(--vl-tint-sleep);color:var(--vl-sleep-ink)}
.stage .chip i.vl-i.t{background:var(--vl-tint-action);color:var(--vl-action)}
.vl-meta{margin-top:22px;font-size:14.5px;color:var(--vl-ink2)}
.vl-caption{margin:14px 0 0;font-size:13px;color:var(--vl-ink2);text-align:right}
@media(max-width:900px){.vl-caption{text-align:center}}

/* "A range, not a schedule": the explainer band */
body.vl .chaos{background:var(--vl-deep);color:var(--vl-deep-ink)}
body.vl .chaos .eyebrow{color:var(--vl-deep-sleep)}
body.vl .chaos .eyebrow::before{background:var(--vl-deep-sleep)}
body.vl .chaos .accent{color:var(--vl-deep-sleep)}
body.vl .chaos .sec-head .lead{color:var(--vl-deep-ink2)}
.vl-compare{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,56px);align-items:start}
.vl-rails{background:rgba(239,232,220,.06);border:1px solid var(--vl-deep-line);border-radius:24px;padding:clamp(22px,3vw,34px)}
.vl-row+.vl-row{margin-top:30px}
.vl-row h3{font:600 15px/1.3 var(--vl-font);color:var(--vl-deep-ink);display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.vl-row h3 b{font:600 clamp(24px,2.6vw,32px)/1 var(--vl-figures);color:var(--vl-deep-sleep)}
.vl-row p{color:var(--vl-deep-ink2);font-size:14px;margin-top:6px}
.vl-rail{position:relative;height:46px;margin-top:14px;border-radius:14px;background:rgba(239,232,220,.08)}
.vl-rail .r{position:absolute;top:6px;bottom:6px;border-radius:10px}
.vl-rail .r.wide{background:linear-gradient(90deg,rgba(183,174,220,0),rgba(183,174,220,.5) 22%,rgba(183,174,220,.5) 78%,rgba(183,174,220,0))}
.vl-rail .r.could{background:linear-gradient(90deg,rgba(183,174,220,0),rgba(183,174,220,.6) 30%,rgba(183,174,220,.6) 70%,rgba(183,174,220,0))}
.vl-rail .r.core{background:#B7AEDC;top:4px;bottom:4px}
.vl-rail .n{position:absolute;top:-4px;bottom:-4px;width:2px;background:#7FBDB6;border-radius:2px}
.vl-rail .n::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;background:#7FBDB6;translate:-50% -50%}
.vl-ticks{position:relative;height:20px;margin-top:6px;font-size:12.5px;color:var(--vl-deep-ink2)}
.vl-ticks span{position:absolute;translate:-50% 0}
.vl-tag{display:inline-block;margin-top:22px;font:600 12.5px/1 var(--vl-font);letter-spacing:.01em;color:#1B2340;background:#C4BDEB;padding:6px 10px;border-radius:99px}
.vl-why h3{color:var(--vl-deep-ink);margin-bottom:14px}
.vl-why ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.vl-why li{position:relative;padding-left:28px;color:var(--vl-deep-ink2);font-size:15.5px}
.vl-why li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:14px;border-radius:5px;background:#B7AEDC}
.vl-note{margin-top:22px;color:var(--vl-deep-ink);font-weight:600}
.vl-search{margin-top:40px;max-width:70ch;color:var(--vl-deep-ink2);font-size:15px;border-top:1px solid var(--vl-deep-line);padding-top:22px}
@media(max-width:860px){.vl-compare{grid-template-columns:1fr}}

/* Feature cards: the night card is Ember, the app's night mode */
body.vl .bento .card{border-radius:24px}
body.vl .c-a{background:var(--vl-ember);border-color:var(--vl-ember-surface)}
body.vl .c-a h3,body.vl .c-a p{color:var(--vl-ember-ink)}
body.vl .c-a .ico{background:var(--vl-ember-action);color:var(--vl-ember-ink)}
body.vl .c-a .phone{background:#000;box-shadow:0 0 0 1px var(--vl-ember-action),0 30px 60px -30px #000}
body.vl .c-b{background:var(--vl-tint-sleep);border-color:transparent}
body.vl .c-c{background:var(--vl-tint-action);border-color:transparent}
body.vl .c-b .ico,body.vl .c-c .ico{background:var(--vl-surface)}
body.vl .c-c .ico{color:var(--vl-action)}
.card.vl-flat{padding-bottom:34px}
/* The three small cards show the whole screen (the Lock Screen's Live Activity sits at the bottom), same size for all three */
body.vl .bento :is(.c-c,.c-d,.c-e){display:flex;flex-direction:column}
body.vl .bento :is(.c-c,.c-d,.c-e) p{margin-bottom:26px}
body.vl .bento :is(.c-c,.c-d,.c-e) .phone{--w:190px;margin:auto auto 0;flex:none}
@media(max-width:900px){body.vl .bento :is(.c-c,.c-d,.c-e) .phone{--w:210px}}

/* Companions (never next to safety, crisis or Premium content) */
.vl-trio{border-radius:32px;background:linear-gradient(160deg,var(--vl-tint-sleep),var(--vl-canvas) 55%,var(--vl-tint-action));padding:clamp(24px,4vw,48px);box-shadow:inset 0 0 0 1px var(--vl-hairline)}
.vl-trio img{width:100%;height:auto}
.vl-comps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(30px,4vw,48px)}
.vl-comp{text-align:center;padding-top:26px}
.vl-comp img{height:150px;width:auto;margin:0 auto 6px;object-fit:contain}
.vl-comp p{margin:0 auto}
body.vl .vl-comp .vl-quote{margin-top:10px;font:500 18px/1.3 var(--vl-font);color:var(--vl-sleep-ink)}
@media(max-width:760px){.vl-comps{grid-template-columns:1fr}.vl-comp img{height:130px}}

/* Stages */
body.vl .card .ico.vl-age{display:inline-grid;width:auto;min-width:46px;padding:0 12px;background:var(--vl-tint-sleep);color:var(--vl-sleep-ink);font-size:15px;font-weight:600}
.vl-stage-note{margin-top:22px;color:var(--vl-ink2);font-size:15px;max-width:70ch}

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

/* Free and Premium */
.vl-tiers{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vl-tier{border-radius:24px;padding:clamp(28px,4vw,44px);background:var(--vl-surface);border:1px solid var(--vl-hairline)}
.vl-tier ul{margin-top:18px}
.vl-tier.prem{background:var(--vl-deep);color:var(--vl-deep-ink);border-color:var(--vl-deep-line)}
.vl-tier.prem li::before{background:rgba(196,189,235,.18)}
.vl-tier.prem li::after{border-color:var(--vl-deep-sleep)}
.vl-tier .fine{margin-top:20px;font-size:14px;color:var(--vl-ink2)}
.vl-tier.prem .fine{color:var(--vl-deep-ink2)}
.vl-price{margin-top:26px;font:600 clamp(21px,2.3vw,27px)/1.25 var(--vl-font);color:var(--vl-deep-sleep)}
@media(max-width:860px){.vl-tiers{grid-template-columns:1fr}}
@media (prefers-color-scheme:dark){body.vl .vl-tier.prem{border-color:rgba(196,189,235,.4)}}

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

/* App icon (iOS-style corners) */
img.vl-icon{border-radius:22.5%}
.final img.logo.vl-icon{width:clamp(130px,15vw,200px)}

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

/* ---- Velita card on the studio home (light only, like the rest of that page) ---- */
.vl-app{margin-top:22px;background:var(--vl-deep);color:var(--vl-deep-ink);font-family:var(--vl-font)}
.vl-app h2{font-family:var(--vl-font);font-weight:500;letter-spacing:.012em}
.vl-app .txt .lead{color:var(--vl-deep-ink2)}
.vl-app .txt .eyebrow{color:var(--vl-deep-sleep)}
.vl-app .eyebrow::before{background:#B7AEDC}
.vl-app .btn{font-family:var(--vl-font);font-weight:600}
.vl-app .btn-orange{background:#7FBDB6;color:#0E1424;box-shadow:none}
.vl-app .soon{color:var(--vl-deep-ink2)}
.vl-app .soon b{background:rgba(127,189,182,.16);color:#7FBDB6}
.vl-app .btn.vl-store{background:var(--vl-surface);color:var(--vl-ink)}
.vl-app .vis{background:linear-gradient(160deg,var(--vl-tint-sleep),var(--vl-canvas) 55%,var(--vl-tint-action))}

@media(prefers-reduced-motion:reduce){.vl-arc{stroke-dashoffset:0}}