/* mybabynotes marketing site — translated from the Claude Design comp (Landing.dc.html).
   The comp's design tokens and section styles are kept verbatim; the comp's
   style-hover/style-focus attributes become the h-* classes at the bottom. */

:root{color-scheme:light;--bg:#FAF6EF;--surface:#FFFDF8;--ink:#26231D;--ink2:#3D392F;--muted:#6E6659;--soft:#8C8474;--faint:#B5AC98;--accent:#E8957A;--accent-deep:#B5566A;--accent-hover:#D9846A;--accent-text:#A34D62;--on-accent:#FCFBF6;--warn:#A85A45;--frame:#EDE7DC;--hair:rgba(38,35,29,0.10);--hair2:rgba(38,35,29,0.08);--tint:rgba(232,149,122,0.16);--tint-rose:rgba(181,86,106,0.14);--code:#F1EBE0;--shadow:0 2px 8px rgba(38,35,29,0.08);--shadow-lg:0 30px 60px rgba(38,35,29,0.16), 0 0 0 1px rgba(38,35,29,0.08)}
:root[data-theme="dark"]{color-scheme:dark;--bg:#161019;--surface:color-mix(in oklab,#161019 90%,#F0E9F1);--ink:#F0E9F1;--ink2:#E3DAE4;--muted:#AB9FAD;--soft:#968A98;--faint:#766A78;--accent-deep:#F4C2CC;--accent-text:#E8A5B3;--warn:#D08069;--frame:#0A070C;--hair:rgba(240,233,241,0.12);--hair2:rgba(240,233,241,0.08);--tint:rgba(232,149,122,0.22);--tint-rose:rgba(232,165,179,0.18);--code:#100B13;--shadow:0 2px 8px rgba(0,0,0,0.35);--shadow-lg:0 30px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(240,233,241,0.10)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#161019;--surface:color-mix(in oklab,#161019 90%,#F0E9F1);--ink:#F0E9F1;--ink2:#E3DAE4;--muted:#AB9FAD;--soft:#968A98;--faint:#766A78;--accent-deep:#F4C2CC;--accent-text:#E8A5B3;--warn:#D08069;--frame:#0A070C;--hair:rgba(240,233,241,0.12);--hair2:rgba(240,233,241,0.08);--tint:rgba(232,149,122,0.22);--tint-rose:rgba(232,165,179,0.18);--code:#100B13;--shadow:0 2px 8px rgba(0,0,0,0.35);--shadow-lg:0 30px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(240,233,241,0.10)}}

html,body{margin:0;color:var(--ink);font-family:'Nunito Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
html{background:var(--bg)} body{background:transparent}
html{scroll-behavior:smooth;scroll-padding-top:84px}
a{color:var(--accent-text);text-decoration:none} a:hover{color:var(--accent-deep)}
h1,h2,h3,p{margin:0}
/* Headings balance across their lines; body copy avoids a single-word last
   line. !important because the comp sets text-wrap in inline styles. */
h1,h2,h3{text-wrap:balance !important}
p,li,summary,label,figcaption,dd,td,th{text-wrap:pretty !important}
summary{list-style:none} summary::-webkit-details-marker{display:none}
details[open] summary [data-chev]{transform:rotate(180deg)}
input{font-family:inherit}
pre,code{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace}
table{border-collapse:collapse}
#waitlist-email::placeholder{color:rgba(252,251,246,0.55)}
/* "Get early access" CTAs anchor to the form itself, not the section top —
   the extra margin (on top of the global scroll-padding) keeps the label line
   clear of the sticky header when the jump lands. */
#waitlist-form{scroll-margin-top:26px}

[data-grid-4]{grid-template-columns:repeat(2,1fr) !important}
[data-grid-3]{grid-template-columns:1fr !important}
@media (min-width:1000px){[data-grid-4]{grid-template-columns:repeat(4,1fr) !important}[data-grid-3]{grid-template-columns:repeat(3,1fr) !important}}
@media (max-width:560px){[data-grid-4]{grid-template-columns:1fr !important}}
@media (max-width:760px){[data-desktop]{display:none !important}}
@media (min-width:761px){[data-mobile]{display:none !important}}

/* ---- hosted-state variants (waitlist is the shipping default; the "live"
   variant is fully designed and unhidden by setting HOSTED_STATE='live' in js/site.js) ---- */
[data-when="live"]{display:none !important}
html[data-hosted="live"] [data-when="live"]{display:revert !important}
html[data-hosted="live"] [data-when="waitlist"]{display:none !important}

/* ---- hover/focus states (from the comp's style-hover / style-focus attributes) ---- */
.h-btn-accent,.h-btn-outline,.h-btn-outline-soft,.h-btn-cream,.h-btn-ink{white-space:nowrap}
.h-navlink{color:var(--muted)} .h-navlink:hover{color:var(--ink)}
.h-btn-accent:hover{background:var(--accent-hover) !important;color:var(--on-accent)}
.h-btn-outline:hover{border-color:rgba(38,35,29,0.24) !important;color:var(--ink) !important}
.h-btn-outline-soft:hover{color:var(--ink) !important}
.h-btn-cream:hover{background:#EDE7DC !important;color:#B5566A !important}
.h-btn-ink:hover{opacity:0.88;color:var(--bg)}
.h-faq:hover{color:var(--accent-text)}
.h-feature-link:hover{color:#FAF0F2}
#waitlist-email:focus{border-color:rgba(252,251,246,0.6) !important;outline:none}
.tour-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .h-btn-outline:hover{border-color:rgba(240,233,241,0.28) !important}
}

/* ---- tour (progressive enhancement: with no JS all four point-lists read in
   order and the first screenshot shows; JS turns it into the rotating tabs) ---- */
.tour-tab{text-align:left;background:transparent;border:1px solid transparent;border-radius:20px;padding:16px 18px;cursor:pointer;display:flex;gap:14px;align-items:flex-start;color:var(--ink);font-family:inherit;transition:background 0.2s, border-color 0.2s}
.tour-tab .tour-icon{width:38px;height:38px;border-radius:12px;background:var(--tint);color:var(--accent-text);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s}
.tour-tab.is-active{background:var(--tint);border-color:rgba(232,149,122,0.55)}
.tour-tab.is-active .tour-icon{background:var(--accent);color:var(--on-accent)}
.tour-shot{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:12% / 5.5%;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(14px) scale(0.97);transition:opacity 0.45s ease, transform 0.55s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.tour-shot.is-active{opacity:1;transform:translateY(0) scale(1)}
.tour-shot.is-before{transform:translateY(-14px) scale(0.97)}
.tour-panel{list-style:none;margin:0;padding:0 4px;display:flex;flex-direction:column;gap:10px}
html.js .tour-panel{display:none}
html.js .tour-panel.is-active{display:flex}
.tour-dot{width:8px;height:8px;border-radius:999px;border:none;padding:0;background:var(--hair);cursor:pointer;transition:width 0.3s, background 0.3s}
.tour-dot.is-active{width:26px;background:var(--accent)}
html:not(.js) .tour-dots{display:none}
html:not(.js) .tour-shot:first-child{opacity:1;transform:none}