/* ── Newborn Weeks — heirloom paper planner ─────────────────────────────── */
/* rev: article cards rebuilt to definite-height flex (no grid overlap on iOS Safari) */
@font-face { font-family: 'Young Serif'; src: url('../fonts/young-serif-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('../fonts/newsreader-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('../fonts/newsreader-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('../fonts/newsreader-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('../fonts/archivo-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('../fonts/archivo-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
:root {
--paper: #FAF7F1;
--paper-deep: #F2ECDF;
--card: #FFFFFF;
--ink: #2B2724;
--soft: #5C544A;
/* --faint is the small-print color: dates, read times, breadcrumbs, "Details".
It was #8C7F6D, which reads at 3.3–3.9 against the cream backgrounds it sits
on — under the 4.5 minimum for text this size. Darkened by the smallest step
that clears 4.5 on every background it is actually used on (4.54–5.34), so the
tone is unchanged and the words are legible. */
--faint: #74695A;
--line: #E6DECF;
--line-strong: #D3C7AE;
/* Lightened a touch from #7C8B72 for the same reason: it is used BOTH as pale
text on the dark ink panels and as a button background under dark text, and at
the old value both directions sat at 4.08. #839379 puts both at 4.52. */
--sage: #839379;
--sage-deep: #5F7057;
--sage-wash: #EEF1EA;
--apricot: #C97B54;
/* Same accent, mixed for TEXT on the light backgrounds. The plain --apricot is
tuned to sit on the dark ink panels (4.54 there) and is too pale for small
words on cream (3.05). Two tokens because no single value can do both. */
--apricot-ink: #A16243;
--apricot-soft: #F5E3D7;
--sand: #E9E1D2;
--serif-display: 'Young Serif', Georgia, serif;
--serif-text: 'Newsreader', Georgia, serif;
--sans: 'Archivo', 'Helvetica Neue', sans-serif;
--radius: 16px;
--shadow: 0 1px 2px rgba(43, 39, 36, 0.05), 0 10px 34px -12px rgba(43, 39, 36, 0.14);
--head-h: 60px; /* height of the sticky top nav — the planner filters pin just below it */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
background: var(--paper);
color: var(--ink);
font-family: var(--serif-text);
font-size: 17px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
position: relative;
}
/* paper grain */
body::before {
content: '';
position: fixed; inset: 0;
pointer-events: none; z-index: 40;
opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
/* Side gutters ONLY — never the `padding` shorthand.
Sections wear two classes at once, e.g. class="wrap gsection", and .gsection
is what supplies the space above and below the block. A `padding: 0 28px`
here has the same weight as `.gsection { padding: 56px 0 8px }`, so whichever
is written later in this file wins the WHOLE shorthand and silently resets the
other three sides to zero. That is exactly what happened: the phone rule at
the bottom of this file wiped every section's top and bottom spacing, so the
gear page read fine on a desktop and had its blocks jammed together at 1px
apart on a phone. Longhand can only ever touch the sides it names. */
.wrap { max-width: 1120px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.wrap--narrow { max-width: 860px; }
/* Every ![]()
here carries width/height attributes so the browser can reserve the
right space before the picture loads. The side effect: that height attribute
behaves like a real CSS height, which SILENTLY CANCELS the `aspect-ratio` the
stylesheet asks for. The product photos were the proof — a square 760x760 shot
rendered into a 414x640 box, so every product page had the item shrunk into the
middle with a stack of dead cream below it.
`:where()` gives this zero weight, so it only beats the attribute: any rule that
sets a height on purpose (.sheet-card img, .trust-media img) still wins. */
:where(img[width][height]) { height: auto; }
a { color: var(--sage-deep); text-decoration-color: color-mix(in srgb, var(--sage-deep) 40%, transparent); text-underline-offset: 3px; }
/* Text links darken on hover — but NOT links that paint their own background.
Those are buttons, and this rule outranks the color a button sets on itself
(`a:hover` beats `.btn`), so it used to repaint every button label near-black
on top of a near-black or sage background: the words vanished under the mouse.
That shipped on the gear cards, both buy buttons, the email-capture button and
the home-page CTAs before anyone caught it.
The `:not(:where(...))` keeps this rule exactly as powerful as it was — it just
stops it reaching buttons, which now keep their own label color in every state.
ADDING A NEW SOLID-BACKGROUND LINK CLASS? Add it to this list. The build gate
`check-interactive-contrast.mjs` fails the deploy if you forget. */
a:hover:not(:where(.btn, .pcard-cta, .gfeat-cta, .cta-band, .gear-cta-band)) { color: var(--ink); }
.kicker {
font-family: var(--sans); font-weight: 600;
font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--faint);
}
/* ── header (sticky) ── */
.site-head {
padding: 14px 0;
position: sticky; top: 0; z-index: 50;
background: color-mix(in srgb, var(--paper) 90%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.head-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.lockup svg { display: block; }
.lockup .word {
font-family: var(--serif-display); font-size: 23px; letter-spacing: 0.01em; line-height: 1;
}
.lockup .word span { color: var(--sage-deep); }
.site-nav { display: flex; gap: 26px; align-items: center; }
.site-nav a {
font-family: var(--sans); font-weight: 500; font-size: 13.5px; letter-spacing: 0.04em;
color: var(--soft); text-decoration: none;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a.active { color: var(--ink); border-bottom: 2px solid var(--sage); padding-bottom: 3px; }
/* ── hero ── */
.hero { padding: 36px 0 26px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.hero h1 {
font-family: var(--serif-display); font-weight: 400;
font-size: clamp(30px, 4.6vw, 54px); line-height: 1.08; letter-spacing: -0.01em;
margin: 18px 0 20px;
}
.hero h1 em { font-style: normal; color: var(--sage-deep); }
.hero .lede { font-size: 19px; color: var(--soft); max-width: 54ch; margin-bottom: 28px; }
.hero .lede strong { font-weight: 500; color: var(--ink); }
.hero-media { position: relative; }
.hero-media img {
width: 100%; aspect-ratio: 4 / 3; max-height: 460px; object-fit: cover; display: block;
border-radius: 18px;
box-shadow: var(--shadow);
}
.hero-media::after {
content: ''; position: absolute; inset: 12px -12px -12px 12px;
border: 1px solid var(--line); border-radius: 18px; z-index: -1;
}
/* due date entry — custom inline calendar */
.due-widget { max-width: 520px; }
.due-trigger {
display: flex; align-items: center; gap: 12px; width: 100%;
background: var(--card); border: 1px solid var(--line); border-radius: 14px;
padding: 16px 18px; box-shadow: var(--shadow); cursor: pointer; text-align: left;
font-family: var(--sans); font-weight: 500; font-size: 16.5px; color: var(--ink);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.due-trigger:hover { border-color: var(--sage); }
.due-trigger:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 2px; }
.due-trigger .ico-cal { color: var(--sage-deep); flex-shrink: 0; }
.due-trigger-text { flex: 1; min-width: 0; }
.due-trigger.placeholder .due-trigger-text { color: var(--faint); }
.due-caret { color: var(--faint); flex-shrink: 0; transition: transform 0.2s ease; }
.due-trigger[aria-expanded='true'] .due-caret { transform: rotate(180deg); }
.due-cal {
margin-top: 10px; max-width: 380px;
background: var(--card); border: 1px solid var(--line); border-radius: 16px;
box-shadow: var(--shadow); padding: 16px 16px 12px;
}
.due-cal[hidden] { display: none; }
.due-cal-prompt {
font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--sage-deep); text-align: center; margin-bottom: 12px;
}
.due-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.due-cal-title { font-family: var(--serif-display); font-weight: 400; font-size: 19px; color: var(--ink); }
.due-nav {
width: 40px; height: 40px; border: 1px solid var(--line); background: var(--paper);
border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink);
transition: background 0.12s ease, border-color 0.12s ease;
}
.due-nav:hover:not(:disabled) { background: var(--sage-wash); border-color: var(--sage); }
.due-nav:disabled { opacity: 0.28; cursor: default; }
.due-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 2px; }
.due-cal-dow span { text-align: center; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.03em; color: var(--faint); padding: 6px 0; }
.due-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.due-day {
aspect-ratio: 1 / 1; border: 0; background: transparent; border-radius: 10px; cursor: pointer;
font-family: var(--sans); font-size: 15px; color: var(--ink);
display: flex; align-items: center; justify-content: center; transition: background 0.12s ease;
}
.due-day.empty { visibility: hidden; cursor: default; }
.due-day:hover:not(:disabled):not(.sel) { background: var(--sage-wash); }
.due-day:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: -2px; }
.due-day:disabled { color: color-mix(in srgb, var(--faint) 42%, transparent); cursor: default; }
.due-day.today { box-shadow: inset 0 0 0 1.5px var(--sand); }
.due-day.sel { background: var(--sage-deep); color: #fff; font-weight: 600; }
.due-lmp-link {
display: block; width: 100%; margin-top: 10px; padding: 10px 6px; border: 0; background: transparent;
font-family: var(--sans); font-size: 13.5px; color: var(--sage-deep);
text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: center;
}
.due-lmp-link:hover { color: var(--ink); }
.due-go { margin-top: 14px; }
.btn {
display: inline-block; font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: 0.02em;
background: var(--ink); color: var(--paper); border: 0; cursor: pointer;
border-radius: 10px; padding: 13px 24px; text-decoration: none; line-height: 1;
transition: transform 0.15s ease, background 0.2s ease;
}
.btn:hover { background: var(--sage-deep); transform: translateY(-1px); }
.btn--sage { background: var(--sage-deep); }
.btn--sage:hover { background: var(--ink); }
.due-note { font-size: 13.5px; color: var(--faint); margin-top: 12px; font-style: italic; }
/* ── the plan in one picture ── */
.plan-picture { padding: 56px 0 8px; }
.plan-card {
background: var(--paper-deep); border: 1px solid var(--line); border-radius: var(--radius);
padding: 40px 44px;
display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 44px; align-items: center;
}
.plan-card h2 { font-family: var(--serif-display); font-weight: 400; font-size: 30px; margin: 10px 0 12px; }
.plan-card p { color: var(--soft); font-size: 16px; }
/* The count column is wide enough for the number AND its unit. A bare "9" next
to "Weeks 8-13" is unreadable — nine of what? Each number now carries the
thing it counts, and each bar names its trimester, which is the only thing the
three colors ever meant. */
.tri-legend { font-family: var(--sans); font-weight: 600; font-size: 12.5px; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--faint); margin-bottom: 16px; }
.tri-bars { display: grid; gap: 18px; }
.tri-bar { display: grid; grid-template-columns: 150px 1fr 92px; gap: 14px; align-items: center; }
.tri-bar .name { font-family: var(--sans); }
.tri-bar .tri-name { display: block; font-weight: 600; font-size: 13px; color: var(--ink); }
.tri-bar .tri-wk { display: block; font-size: 12px; color: var(--faint); margin-top: 2px; }
.tri-bar .track { background: var(--card); border: 1px solid var(--line); border-radius: 999px; height: 26px; overflow: hidden; }
.tri-bar .fill { height: 100%; border-radius: 999px; width: 0; transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
.tri-bar:nth-child(1) .fill { background: var(--sand); }
.tri-bar:nth-child(2) .fill { background: var(--sage); }
.tri-bar:nth-child(3) .fill { background: var(--apricot-soft); border-right: 3px solid var(--apricot); }
.tri-bar .count { font-family: var(--serif-display); font-size: 19px; color: var(--ink); text-align: right; white-space: nowrap; }
.tri-bar .tri-unit { font-family: var(--sans); font-size: 12px; color: var(--faint); }
.plan-foot { margin-top: 14px; font-size: 13.5px; color: var(--faint); font-style: italic; }
/* ── personalized panel ── */
.you-panel { padding: 40px 0 12px; display: none; }
.you-panel.visible { display: block; }
.you-card {
background: var(--sage-wash); border: 1px solid color-mix(in srgb, var(--sage) 42%, var(--line));
border-radius: var(--radius); padding: 40px 44px; position: relative; overflow: hidden;
}
.you-card .weekno {
font-family: var(--serif-display); font-size: clamp(46px, 6vw, 64px); line-height: 1; margin: 8px 0 6px;
}
.you-card .weekno em { font-style: normal; color: var(--sage-deep); }
.you-card .you-sub { color: var(--soft); max-width: 60ch; }
.you-card .countdown { position: absolute; top: 34px; right: 44px; text-align: right; }
.you-card .countdown .n { font-family: var(--serif-display); font-size: 30px; display: block; }
.you-card .countdown .l { font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
/* ── timeline ── */
.timeline { padding: 56px 0 30px; }
.timeline-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.timeline-head h2 { font-family: var(--serif-display); font-weight: 400; font-size: 34px; }
.timeline-head p { color: var(--faint); font-size: 14.5px; font-style: italic; }
.chapter { margin: 0 0 18px; }
.chapter-band {
display: flex; align-items: center; gap: 16px; margin: 34px 0 22px;
}
.chapter-band .rule { flex: 1; height: 1px; background: var(--line); }
.chapter-band .tag {
font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--soft);
}
.chapter-band.t2 .tag { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; }
.chapter-band.t3 .tag { background: var(--apricot-soft); border-color: var(--apricot-soft); color: var(--ink); }
.chapter-note { text-align: center; font-style: italic; color: var(--faint); font-size: 14.5px; margin: -10px 0 24px; }
.week-row {
display: grid; grid-template-columns: 96px 1fr; gap: 26px;
padding: 26px 0; border-top: 1px solid var(--line);
}
.week-row:last-child { border-bottom: 1px solid var(--line); }
.week-row .wk { position: relative; }
.week-row .wk .n { font-family: var(--serif-display); font-size: 30px; line-height: 1; display: block; }
.week-row .wk .l { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.week-row { position: relative; scroll-margin-top: 90px; }
.week-row.current {
background: linear-gradient(90deg, color-mix(in srgb, var(--sage-wash) 70%, transparent), transparent 70%);
border-radius: 0 10px 10px 0; border-top-color: var(--sage);
box-shadow: inset 3px 0 0 var(--sage-deep);
padding-left: 16px;
}
.week-row.current .wk .n { color: var(--sage-deep); }
.week-row.current .wk .l { color: var(--sage-deep); font-weight: 600; }
/* Past weeks stay full-strength — no greying out; the green marker shows "now". */
.task { padding: 0 0 18px; }
.task:last-child { padding-bottom: 0; }
.task .t-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.task h3 { font-family: var(--serif-text); font-weight: 500; font-size: 19px; }
.task .chip {
font-family: var(--sans); font-weight: 600; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
padding: 3px 10px; border-radius: 999px; background: var(--paper-deep); color: var(--soft); border: 1px solid var(--line);
}
.task .chip.quick { background: var(--sage-wash); }
.task .chip.project { background: var(--apricot-soft); }
/* Effort chips are passive labels — never let them read as buttons. */
.task .chip { cursor: default; }
.task p { color: var(--soft); font-size: 15.5px; max-width: 74ch; margin-top: 4px; }
.task .src { font-family: var(--sans); font-size: 12.5px; color: var(--faint); }
.task .src a { color: var(--faint); }
.task .src a:hover { color: var(--sage-deep); }
/* ── week-by-week planner: controls, tabs, size badge ── */
.week-row[hidden], .tri-panel[hidden], .task[hidden],
.planner-note[hidden], .planner-empty[hidden] { display: none; }
/* The search + subject filter + trimester tabs pin below the top nav so you can
filter the long to-do list without scrolling back up. */
.planner-sticky {
position: sticky; top: var(--head-h); z-index: 20;
background: var(--paper);
padding: 14px 0 12px;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
border-bottom: 1px solid transparent;
}
.planner-sticky.is-stuck {
border-bottom-color: var(--line);
box-shadow: 0 10px 20px -14px rgba(43, 39, 36, 0.28);
}
.planner-sticky .tri-tabs { margin-bottom: 0; }
/* On phones the pinned bar shares a small screen with the list, so keep it lean. */
@media (max-width: 680px) {
.planner-sticky { padding: 10px 0 8px; }
.planner-sticky .planner-controls { margin-bottom: 10px; }
}
.planner-controls {
display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
margin: 0 0 14px;
}
.planner-search {
flex: 1 1 320px; min-width: 240px; position: relative;
display: flex; align-items: center;
}
.planner-search svg { position: absolute; left: 16px; color: var(--soft); pointer-events: none; }
.planner-search input {
width: 100%; font-family: var(--sans); font-size: 15.5px; color: var(--ink);
padding: 13px 16px 13px 44px; border: 1px solid var(--line-strong); border-radius: 12px;
background: var(--card); box-shadow: var(--shadow); -webkit-appearance: none; appearance: none;
}
.planner-search input::placeholder { color: var(--faint); }
.planner-search input:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px var(--sage-wash); }
.planner-subject { display: flex; align-items: center; gap: 10px; }
.planner-subject label {
font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--soft);
}
.select-wrap { position: relative; display: inline-flex; align-items: center; }
.select-wrap select {
font-family: var(--sans); font-size: 14.5px; font-weight: 500; color: var(--ink);
padding: 12px 40px 12px 16px; border: 1px solid var(--line-strong); border-radius: 12px;
background: var(--card); box-shadow: var(--shadow); cursor: pointer; -webkit-appearance: none; appearance: none;
}
.select-wrap select:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px var(--sage-wash); }
.select-wrap svg { position: absolute; right: 14px; color: var(--soft); pointer-events: none; }
.tri-tabs {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
background: var(--paper-deep); border: 1px solid var(--line); border-radius: 14px;
padding: 6px; margin-bottom: 16px;
}
.tri-tab {
display: flex; flex-direction: column; gap: 2px; text-align: center;
padding: 12px 10px; border: 0; border-radius: 10px; background: transparent;
cursor: pointer; color: var(--soft); transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.tri-tab:hover { background: color-mix(in srgb, var(--paper) 60%, transparent); color: var(--ink); }
.tri-tab.active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(43,39,36,0.09); }
.tri-tab.active .tri-tab-name { color: var(--sage-deep); }
.tri-tab-name { font-family: var(--serif-text); font-weight: 500; font-size: 16px; }
.tri-tab-sub { font-family: var(--sans); font-size: 11.5px; color: var(--faint); }
/* While searching, the trimester tabs don't apply (results span all three), so
hide them rather than leaving a dimmed control that reads as "greyed out". */
.tri-tabs.searching { display: none; }
.effort-legend { font-family: var(--sans); font-size: 12.5px; color: var(--faint); margin: 0 0 6px; line-height: 1.9; }
.effort-legend .chip {
font-weight: 600; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
padding: 2px 9px; border-radius: 999px; background: var(--paper-deep); color: var(--soft);
border: 1px solid var(--line); cursor: default;
}
.effort-legend .chip.quick { background: var(--sage-wash); }
.effort-legend .chip.project { background: var(--apricot-soft); }
.planner-note { font-family: var(--sans); font-size: 13px; font-style: italic; color: var(--sage-deep); margin: 0 0 14px; }
.planner-empty {
text-align: center; font-style: italic; color: var(--soft); font-size: 15px;
padding: 40px 20px; border: 1px dashed var(--line); border-radius: 14px; margin-top: 8px;
}
.wk-size {
display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px;
font-family: var(--sans); font-size: 12px; line-height: 1.3; color: var(--sage-deep);
background: var(--sage-wash); border: 1px solid color-mix(in srgb, var(--sage) 26%, var(--line));
border-radius: 999px; padding: 4px 12px 4px 9px; cursor: default;
text-decoration: none; transition: background 0.15s, border-color 0.15s;
}
/* When it links to the weekly guide it becomes interactive; plain label otherwise. */
a.wk-size { cursor: pointer; }
a.wk-size:hover { background: color-mix(in srgb, var(--sage) 18%, var(--paper)); border-color: var(--sage); color: var(--sage-deep); }
.wk-size .wk-seed { color: var(--sage-deep); flex-shrink: 0; }
.wk-size .wk-arrow { color: var(--sage-deep); opacity: 0.6; flex-shrink: 0; margin-left: 1px; }
/* ── help you may qualify for (intake + resources) ── */
.resources { padding: 40px 0 8px; }
.res-head { max-width: 640px; margin-bottom: 24px; }
.res-head h2 { font-family: var(--serif-display); font-weight: 400; font-size: clamp(24px, 3vw, 32px); margin: 8px 0 10px; }
.res-head p { color: var(--soft); font-size: 16px; line-height: 1.6; }
.res-ask { display: flex; flex-wrap: wrap; gap: 26px; margin-bottom: 24px; }
.res-q { display: flex; flex-direction: column; gap: 9px; }
.res-q-l { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--ink); }
.res-opts { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.res-opts button {
font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink);
padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.res-opts button:hover { border-color: var(--sage); }
.res-opts button.on { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; }
.res-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.res-card {
position: relative; display: flex; flex-direction: column; text-decoration: none;
background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px 20px 18px;
transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.res-card:hover { border-color: var(--sage); box-shadow: var(--shadow); transform: translateY(-2px); }
.res-card h3 { font-family: var(--serif-text); font-weight: 500; font-size: 18px; color: var(--ink); margin-bottom: 7px; }
.res-card p { color: var(--soft); font-size: 14.5px; line-height: 1.55; flex: 1; }
.res-go { margin-top: 14px; font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--sage-deep); }
.res-go::after { content: " \2192"; }
.res-card.res-emph { border-color: var(--sage-deep); box-shadow: 0 0 0 1px var(--sage-deep); background: var(--sage-wash); }
.res-badge {
position: absolute; top: -10px; left: 18px; font-family: var(--sans); font-weight: 600;
font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
background: var(--sage-deep); padding: 3px 10px; border-radius: 999px;
}
.res-fine { color: var(--faint); font-size: 12.5px; line-height: 1.6; margin-top: 16px; max-width: 720px; }
/* ── how baby grows — interactive week slider ── */
.wg-tool { padding: 8px 0 40px; }
.wg-panel { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 30px 34px 34px; box-shadow: var(--shadow); }
.wg-stage-tag { display: inline-block; font-family: var(--sans); font-weight: 600; font-size: 11.5px; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--sage-deep); background: var(--sage-wash); border-radius: 999px; padding: 6px 14px; margin-bottom: 18px; }
.wg-viz { display: flex; align-items: center; gap: 26px; min-height: 340px; }
.wg-belly { position: relative; flex: 0 0 270px; width: 270px; height: 360px; }
.wg-figure { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* the growing illustration floats over her belly; multiply drops its cream
background so only the fruit shows against her skin-tone bump */
.wg-womb { position: absolute; left: 42%; top: 50.5%; transform: translate(-50%, -50%);
display: flex; align-items: center; justify-content: center; }
/* multiply drops most of the cream; a soft radial mask feathers the square edge
so only the fruit reads, floating on her bump */
.wg-img { mix-blend-mode: multiply;
-webkit-mask-image: radial-gradient(circle, #000 52%, transparent 70%);
mask-image: radial-gradient(circle, #000 52%, transparent 70%);
transition: width 0.55s cubic-bezier(0.22,1,0.36,1), height 0.55s cubic-bezier(0.22,1,0.36,1), opacity 0.35s ease; }
.wg-viz-text { flex: 1; }
.wg-week-label { display: flex; align-items: baseline; gap: 8px; }
.wg-week-label #wg-week-num { font-family: var(--serif-display); font-size: clamp(46px, 8vw, 68px); line-height: 1; color: var(--ink); }
.wg-week-word { font-family: var(--sans); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.wg-size-name { font-family: var(--serif-text); font-size: clamp(20px, 2.4vw, 26px); color: var(--sage-deep); margin: 6px 0 4px; }
.wg-dims { font-family: var(--sans); font-size: 14px; color: var(--soft); }
.wg-slider-row { display: flex; align-items: center; gap: 14px; margin: 26px 0 6px; }
.wg-step { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line);
background: var(--paper); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.wg-step:hover { border-color: var(--sage); background: var(--sage-wash); }
#wg-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 999px;
background: linear-gradient(90deg, var(--sand), var(--sage) 55%, var(--apricot-soft)); outline: none; }
#wg-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 999px;
background: var(--sage-deep); border: 3px solid var(--paper); box-shadow: 0 2px 8px rgba(43,39,36,0.3); cursor: pointer; }
#wg-slider::-moz-range-thumb { width: 26px; height: 26px; border-radius: 999px; background: var(--sage-deep); border: 3px solid var(--paper); cursor: pointer; }
.wg-detail { margin-top: 26px; display: grid; gap: 18px; }
.wg-block-k { font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-deep); margin-bottom: 6px; }
.wg-block p:not(.wg-block-k) { color: var(--ink); font-size: 16px; line-height: 1.62; }
#wg-you { color: var(--soft); }
.wg-watch-block { border-top: 1px solid var(--line); padding-top: 16px; }
.wg-watch-block .wg-block-k { color: var(--ink); }
.wg-watch-block ul { margin: 0; padding-left: 18px; }
.wg-watch-block li { color: var(--soft); font-size: 14.5px; line-height: 1.55; margin-bottom: 5px; }
.wg-src { font-family: var(--sans); font-size: 12.5px; color: var(--faint); line-height: 1.6; margin-top: 20px; text-align: center; }
.wg-fallback { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 680px) {
.wg-panel { padding: 22px 18px 26px; }
.wg-viz { flex-direction: column; gap: 8px; min-height: 0; text-align: center; }
.wg-belly { transform: scale(0.82); margin: -26px 0; }
.wg-week-label { justify-content: center; }
}
/* ── overnight-help lead-gen page ── */
.lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-hero { background-size: cover; background-position: center; padding: 66px 0 54px; position: relative; }
.lead-hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: 44px; align-items: start; }
.lead-hero-copy { padding-top: 18px; }
.lead-hero-copy .kicker { color: color-mix(in srgb, #F3E9D8 82%, transparent); }
.lead-hero-copy h1 { font-family: var(--serif-display); font-weight: 400; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.04; margin: 14px 0 18px; color: #FBF7EF; }
.lead-hero-copy h1 em { font-style: normal; color: #C7D3B6; }
.lead-hero-copy .lede { color: color-mix(in srgb, #F3E9D8 88%, transparent); font-size: 17.5px; line-height: 1.62; max-width: 42ch; }
.lead-proof { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 34px; margin-top: 8px;
padding-top: 24px; border-top: 1px solid color-mix(in srgb, #F3E9D8 26%, transparent); }
.lead-proof div { display: flex; flex-direction: column; }
.lead-proof .np { font-family: var(--serif-display); font-size: 30px; color: #FBF7EF; line-height: 1; }
.lead-proof .nl { font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, #F3E9D8 66%, transparent); margin-top: 5px; }
.lead-hero-form { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 24px 24px 20px; box-shadow: 0 24px 60px rgba(20,16,12,0.4); }
/* City pages carry the same hero as the directory page — copy on one side, the
form on the other — but with no photo behind it. Ninety-nine cities cannot
honestly share one picture of a nursery, and a page whose form sits below the
first screen is asking for a lead the reader never sees. */
.lead-hero--plain { background: var(--paper-deep); padding: 34px 0 36px; }
.lead-hero--plain .lead-hero-copy .kicker { color: var(--faint); }
.lead-hero--plain .lead-hero-copy h1 { color: var(--ink); }
.lead-hero--plain .lead-hero-copy .lede { color: var(--soft); }
.lead-hero--plain .lead-hero-form { box-shadow: var(--shadow); }
.lead-form-t { font-family: var(--serif-display); font-size: 22px; margin-bottom: 2px; }
.lead-form-sub { font-family: var(--sans); font-size: 13px; color: var(--faint); margin-bottom: 14px; }
.lead-form { display: grid; gap: 12px; }
/* `display: grid` above outranks the browser's own rule for the hidden
attribute, so without this the form stayed on screen next to the "your
request is in" panel after a successful submit. Caught by driving the page. */
.lead-form[hidden], .lead-done[hidden] { display: none; }
.lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lf-field { display: flex; flex-direction: column; gap: 5px; }
.lf-field label, .lf-field span { font-family: var(--sans); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); }
.lf-field .lf-opt { text-transform: none; letter-spacing: 0; color: var(--faint); font-size: 11px; }
.lf-field input, .lf-field textarea {
font-family: var(--sans); font-size: 15px; color: var(--ink); background: var(--paper);
border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; width: 100%; -webkit-appearance: none; appearance: none;
}
.lf-field input:focus, .lf-field textarea:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px var(--sage-wash); }
.lf-field textarea { resize: vertical; }
/* Helper text stays neutral; red is reserved for errors only, so nothing that
is not an error can be mistaken for one. */
.lf-hint { font-family: var(--sans); font-size: 11.5px; color: var(--faint); margin: 0; }
.lf-err { font-family: var(--sans); font-size: 12.5px; line-height: 1.4; color: var(--apricot-ink); margin: 0; }
.lf-err:empty { display: none; }
.lf-field.has-err .lf-hint { display: none; } /* the correction supersedes the hint */
.lf-field.has-err input, .lf-field.has-err textarea { border-color: var(--apricot-ink); }
.lf-field.has-err input:focus, .lf-field.has-err textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--apricot-ink) 18%, transparent); }
.lead-form .btn { margin-top: 4px; width: 100%; }
.lead-form .btn.is-busy { opacity: 0.75; cursor: progress; }
.lf-micro { font-family: var(--sans); font-size: 12px; color: var(--faint); text-align: center; }
.lead-status { font-family: var(--sans); font-size: 13.5px; margin-top: 2px; }
.lead-status.ok { color: var(--sage-deep); }
.lead-status.err { color: var(--apricot-ink); }
.lead-status:empty { display: none; }
/* Sent. This replaces the form outright — the old version reset the fields and
printed one small green line under the button, which read as nothing having
happened. */
.lead-sent .lead-form-t, .lead-sent .lead-form-sub, .lead-sent .lead-cta-intro { display: none; }
/* Only while the card is easing from the form's height to the confirmation's —
the inline height and this class are both removed the moment it lands. */
.lead-hero-form.is-resizing, .lead-cta-card.is-resizing { overflow: hidden; transition: height 380ms cubic-bezier(0.4, 0, 0.2, 1); }
@media (prefers-reduced-motion: reduce) {
.lead-hero-form.is-resizing, .lead-cta-card.is-resizing { transition: none; }
}
/* Clearance for the sticky top nav when the panel is scrolled into view. */
.lead-done { text-align: left; scroll-margin-top: calc(var(--head-h) + 18px); }
.lead-done-mark {
display: flex; align-items: center; justify-content: center;
width: 46px; height: 46px; border-radius: 50%;
background: var(--sage-wash); color: var(--sage-deep); margin-bottom: 14px;
}
.lead-done h3 {
font-family: var(--serif-display); font-weight: 400; font-size: clamp(22px, 2.6vw, 28px);
line-height: 1.2; margin: 0 0 8px; color: var(--ink);
}
.lead-done h3:focus { outline: none; }
.lead-done-city { font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--soft); margin: 0 0 16px; }
.lead-done-next { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.lead-done-next li {
position: relative; padding-left: 22px;
font-family: var(--sans); font-size: 14.5px; line-height: 1.55; color: var(--soft);
}
.lead-done-next li::before {
content: ""; position: absolute; left: 4px; top: 8px;
width: 6px; height: 6px; border-radius: 50%; background: var(--sage);
}
.lead-done-ask { font-family: var(--sans); font-size: 13px; line-height: 1.6; color: var(--faint); margin: 0; }
.lead-done-ask a { color: var(--sage-deep); }
.lead-empathy { padding: 60px 0 44px; }
.lead-empathy .kicker { color: var(--sage-deep); margin-bottom: 14px; }
.lead-empathy p:not(.kicker) { font-family: var(--serif-text); font-size: clamp(20px, 2.5vw, 27px); line-height: 1.5; color: var(--ink); text-align: center; max-width: 34ch; margin: 0 auto; }
.lead-steps { padding: 46px 0; background: var(--paper-deep); }
.steps-h { font-family: var(--serif-display); font-weight: 400; font-size: clamp(24px, 3vw, 34px); text-align: center; margin: 8px 0 4px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 28px; }
.step { text-align: center; padding: 0 12px; }
.step-n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px;
background: var(--sage-wash); color: var(--sage-deep); font-family: var(--serif-display); font-size: 20px; margin-bottom: 12px; }
.step h3 { font-family: var(--serif-text); font-weight: 500; font-size: 18px; margin-bottom: 6px; }
.step p { color: var(--soft); font-size: 14.5px; line-height: 1.55; }
.lead-proof-strip { padding: 44px 0; background: var(--paper-deep); }
.lead-proof-head { max-width: 620px; margin-bottom: 24px; }
.lead-proof-head h2 { font-family: var(--serif-display); font-weight: 400; font-size: clamp(24px, 3vw, 32px); margin: 8px 0 10px; }
.lead-proof-head p { color: var(--soft); font-size: 15.5px; line-height: 1.6; }
.proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.proof-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 16px; }
.proof-rating { display: inline-flex; align-items: center; gap: 4px; color: #C8951F; font-family: var(--sans); font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.proof-card h3 { font-family: var(--serif-text); font-weight: 500; font-size: 17px; color: var(--ink); margin-bottom: 4px; }
.proof-meta { font-family: var(--sans); font-size: 12.5px; color: var(--faint); }
.lead-proof-foot { margin-top: 18px; font-family: var(--sans); font-size: 13.5px; color: var(--soft); }
/* US coverage map */
.us-map-wrap { position: relative; max-width: 820px; margin: 8px auto 0; }
.us-map { width: 100%; height: auto; display: block; overflow: visible; }
.us-states { fill: none; }
.us-state { fill: none; stroke: color-mix(in srgb, var(--sage-deep) 42%, var(--paper)); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map-hi-label { font-family: var(--sans); font-size: 12px; fill: var(--faint); letter-spacing: 0.04em; }
.map-dot { cursor: pointer; }
.map-dot .dot-core { fill: var(--sage-deep); transition: transform 0.15s ease; transform-origin: center; }
.map-dot .dot-halo { fill: var(--paper); opacity: 0.5; transition: opacity 0.15s ease; }
.map-dot:hover .dot-core, .map-dot.on .dot-core { transform: scale(1.18); }
.map-dot:hover .dot-halo, .map-dot.on .dot-halo { opacity: 0.85; }
/* a little stork flutters up from the city and dissolves on hover */
.map-stork { position: absolute; width: 99px; height: auto; pointer-events: none; z-index: 7;
transform: translate(-50%, -50%); will-change: transform, opacity; animation: storkFly 1.5s cubic-bezier(0.33, 0, 0.2, 1) forwards; }
@keyframes storkFly {
0% { opacity: 0; transform: translate(-50%, -42%) scale(0.85) rotate(-2deg); }
18% { opacity: 1; transform: translate(-54%, calc(-50% - 14px)) scale(1) rotate(-4deg); }
70% { opacity: 1; transform: translate(-62%, calc(-50% - 72px)) scale(1.04) rotate(-8deg); }
100% { opacity: 0; transform: translate(-68%, calc(-50% - 108px)) scale(1.08) rotate(-10deg); }
}
@media (max-width: 640px) { .map-stork { width: 78px; } }
.map-tip { position: absolute; z-index: 5; pointer-events: none; white-space: nowrap;
background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 12.5px; font-weight: 500;
padding: 7px 12px; border-radius: 8px; box-shadow: 0 6px 18px rgba(20,16,12,0.28); }
.map-tip[hidden] { display: none; }
@media (max-width: 640px) { .map-tip { font-size: 11.5px; padding: 6px 9px; } }
.lead-trust { padding: 54px 0; }
.trust-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 44px; align-items: center; }
.trust-media img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; border-radius: 18px; display: block; }
.trust-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.trust-list li { padding-left: 26px; position: relative; color: var(--soft); font-size: 15.5px; line-height: 1.55; }
.trust-list li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 8px; height: 8px; border-radius: 999px; background: var(--sage); }
.trust-list strong { color: var(--ink); font-weight: 600; }
.lead-cta { padding: 20px 0 44px; }
.lead-cta-card { background: var(--sage-wash); border: 1px solid color-mix(in srgb, var(--sage) 34%, var(--line)); border-radius: 22px;
padding: 36px 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 36px; align-items: center; }
.lead-cta-card h2 { font-family: var(--serif-display); font-weight: 400; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; margin: 8px 0 8px; }
.lead-cta-card .sub { color: var(--soft); font-size: 15px; }
.lead-cta-card .lead-form .btn { background: var(--sage-deep); }
.city-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 18px; }
.city-links a { font-size: 14px; padding: 4px 0; color: var(--soft); text-decoration: none; }
.city-links a:hover { color: var(--sage-deep); }
@media (max-width: 860px) {
.lead-hero { padding: 32px 0 30px; }
.lead-hero-grid { grid-template-columns: 1fr; gap: 20px; }
.lead-hero-copy { padding-top: 0; }
.lead-hero-copy h1 { font-size: clamp(30px, 8vw, 40px); margin: 10px 0 12px; }
.lead-hero-copy .lede { font-size: 16px; }
.lead-proof { gap: 22px; margin-top: 4px; padding-top: 18px; }
.lead-proof .np { font-size: 24px; }
.steps-grid { grid-template-columns: 1fr; gap: 26px; }
.trust-grid { grid-template-columns: 1fr; gap: 24px; }
.trust-media { order: 2; }
.lead-cta-card { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; }
.lf-row { grid-template-columns: 1fr; }
}
/* ── email capture ── */
.capture { padding: 64px 0; }
.capture-card {
background: var(--ink); color: var(--paper); border-radius: 24px;
padding: 52px 54px; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 44px; align-items: center;
box-shadow: var(--shadow);
}
.capture-card .kicker { color: color-mix(in srgb, var(--paper) 55%, transparent); }
.capture-card h2 { font-family: var(--serif-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.15; margin: 12px 0 10px; }
.capture-card .sub { color: color-mix(in srgb, var(--paper) 75%, transparent); font-size: 16px; }
.capture-form { display: grid; gap: 12px; }
.capture-form .field {
background: color-mix(in srgb, var(--paper) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
border-radius: 12px; padding: 4px 4px 4px 18px;
display: flex; align-items: center; gap: 10px;
}
.capture-form .field span { font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 55%, transparent); white-space: nowrap; }
.capture-form input {
flex: 1; background: transparent; border: 0; outline: none; color: var(--paper);
font-family: var(--sans); font-weight: 500; font-size: 15.5px; padding: 12px 8px; min-width: 0;
}
.capture-form input::placeholder { color: color-mix(in srgb, var(--paper) 40%, transparent); }
.capture-form input[type='date'] { color-scheme: dark; }
.capture-form .btn { background: var(--sage); color: var(--ink); font-weight: 600; }
.capture-form .btn:hover { background: var(--paper); }
.capture-micro { font-size: 12.5px; color: color-mix(in srgb, var(--paper) 55%, transparent); font-family: var(--sans); }
.capture-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
/* The same ask, sitting in the light panel that appears the moment someone
enters their due date — the one point on the page where they have just been
given something. The full version below is styled for the dark card, so every
color here is restated for a light one; inheriting would have produced pale
text on pale paper. */
.you-signup { margin-top: 26px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--sage) 34%, var(--line)); }
.you-signup-t { font-family: var(--serif-display); font-size: 20px; margin-bottom: 12px; color: var(--ink); }
.capture-form--inline { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.capture-form--inline .field { background: var(--paper); border-color: var(--line); }
.capture-form--inline .field span { color: var(--faint); }
.capture-form--inline input { color: var(--ink); }
.capture-form--inline input::placeholder { color: var(--faint); }
.capture-form--inline .btn { background: var(--sage-deep); color: var(--paper); white-space: nowrap; }
.capture-form--inline .btn:hover { background: var(--ink); color: var(--paper); }
.you-signup-micro { font-size: 12.5px; color: var(--faint); font-family: var(--sans); margin-top: 10px; }
/* The confirmation is the most important sentence on this panel — it is the only
thing telling someone their signup worked. The shared styles paint it
paper-white for the dark card, which on this light one is near-invisible. */
.you-signup .capture-status:empty { display: none; }
.you-signup .capture-status { padding: 10px 0 0; border-radius: 0; font-weight: 600; }
.you-signup .capture-status.ok { background: none; color: var(--sage-deep); }
.you-signup .capture-status.err { background: none; color: var(--apricot-ink); }
@media (max-width: 700px) {
.capture-form--inline { grid-template-columns: 1fr; }
.you-card .countdown { position: static; text-align: left; margin-top: 12px; }
}
.capture-status { font-family: var(--sans); font-size: 14px; padding: 12px 16px; border-radius: 10px; display: none; }
.capture-status.ok { display: block; background: color-mix(in srgb, var(--sage) 30%, transparent); color: var(--paper); }
.capture-status.err { display: block; background: color-mix(in srgb, var(--apricot) 34%, transparent); color: var(--paper); }
/* ── cheat sheet cards on home ── */
.sheets { padding: 26px 0 72px; }
.sheets .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 30px; }
/* Flex column (not a fixed-row grid) with a DEFINITE px image height.
iOS Safari can't resolve `height:100%` on an ![]()
inside a grid track, so it
lets the image balloon to full size and the text slides up over it. A fixed
px height + object-fit:cover is bulletproof: image and text can never overlap. */
.sheet-card {
display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sheet-card:hover { transform: translateY(-4px); box-shadow: 0 2px 3px rgba(43,39,36,0.05), 0 22px 44px -14px rgba(43,39,36,0.2); }
.sheet-card img { display: block; width: 100%; height: 210px; object-fit: cover; flex: 0 0 auto; }
.sheet-card .body { padding: 24px 26px 26px; background: var(--card); position: relative; z-index: 1; flex: 1 1 auto; }
.sheet-card h3 { font-family: var(--serif-display); font-weight: 400; font-size: 23px; margin: 8px 0 6px; }
.sheet-card p { color: var(--soft); font-size: 15px; }
.sheet-card .go { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--sage-deep); margin-top: 12px; display: inline-block; }
/* ── cheat sheet pages ── */
.sheet-hero { padding: 30px 0 10px; }
.sheet-hero .band { border-radius: var(--radius); overflow: hidden; height: 280px; box-shadow: var(--shadow); }
.sheet-hero img { width: 100%; height: 100%; object-fit: cover; }
.sheet-hero h1 { font-family: var(--serif-display); font-weight: 400; font-size: clamp(34px, 4.6vw, 50px); margin: 30px 0 12px; }
.sheet-hero .lede { font-size: 18px; color: var(--soft); max-width: 68ch; }
.sheet-actions { margin: 22px 0 4px; display: flex; gap: 14px; align-items: center; }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn--ghost:hover { background: var(--paper-deep); color: var(--ink); transform: none; }
.sheet-section { padding: 26px 0 4px; }
.sheet-section h2 {
font-family: var(--serif-display); font-weight: 400; font-size: 26px; margin-bottom: 6px;
display: flex; align-items: center; gap: 14px;
}
.sheet-section h2 .num { font-size: 15px; color: var(--faint); font-family: var(--sans); font-weight: 600; letter-spacing: 0.08em; }
.check-list { list-style: none; margin-top: 14px; }
.check-list li { border-top: 1px solid var(--line); }
.check-list li:last-child { border-bottom: 1px solid var(--line); }
.check-list label {
display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 16px 0;
align-items: start; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.check-list .box {
width: 26px; height: 26px; border: 1.5px solid var(--faint); border-radius: 7px; margin-top: 2px;
position: relative; background: var(--card); flex-shrink: 0;
}
.check-list input { position: absolute; opacity: 0; inset: -8px; cursor: pointer; }
.check-list input:checked + .mark { opacity: 1; transform: scale(1); }
.check-list .mark {
position: absolute; inset: 3px; opacity: 0; transform: scale(0.6);
transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
color: var(--sage-deep); pointer-events: none;
}
.check-list li:has(input:checked) .txt { color: var(--faint); }
.check-list li:has(input:checked) .box { border-color: var(--sage-deep); background: var(--sage-wash); }
.check-list .txt strong { font-weight: 500; font-size: 17px; display: block; }
.check-list .txt p { color: var(--soft); font-size: 14.5px; margin-top: 3px; max-width: 74ch; }
.check-list .src { font-family: var(--sans); font-size: 12px; color: var(--faint); margin-top: 4px; display: block; }
.check-list .src a { color: var(--faint); }
/* ── footer ── */
.site-foot { margin-top: 60px; border-top: 1px solid var(--line); background: var(--paper-deep); }
.site-foot .wrap { padding: 44px 28px 50px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 40px; }
/* Every store category, on every page.
Google reaches a page by following links from a page it has already indexed.
The whole 700-page store hung off ONE link — /gear/ — and Google had not
indexed /gear/ itself, so 38 categories and 533 products sat behind a door it
had never opened: 17 pages in, 700 out. These links put every category one
click from the pages Google DOES have, including the homepage. It is also
plainly useful to a shopper, which is the test a link has to pass. */
.foot-aisles { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 26px; }
.foot-aisles-h { font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.foot-aisle-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 7px 26px; }
.foot-aisle-list a { font-family: var(--sans); font-size: 13.5px; color: var(--soft); text-decoration: none; line-height: 1.45; }
.foot-aisle-list a:hover { color: var(--sage-deep); text-decoration: underline; }
@media (max-width: 560px) {
.foot-aisles { padding-top: 22px; }
.foot-aisle-list { grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.foot-aisle-list a { font-size: 13px; }
}
.site-foot .fine { font-size: 13.5px; color: var(--faint); line-height: 1.7; }
.site-foot .fine a { color: var(--faint); }
.site-foot nav { display: grid; gap: 8px; justify-items: start; }
.site-foot nav a { font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--soft); text-decoration: none; }
.site-foot nav a:hover { color: var(--ink); }
/* ── reveal animation ── */
.reveal { opacity: 0; transform: translateY(18px); animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.reveal.d1 { animation-delay: 0.08s; } .reveal.d2 { animation-delay: 0.18s; }
.reveal.d3 { animation-delay: 0.28s; } .reveal.d4 { animation-delay: 0.4s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; opacity: 1; transform: none; } .tri-bar .fill { transition: none; } }
/* ── newborn basics course ── */
.guide-list { list-style: none; margin-top: 14px; }
.guide-list li { border-top: 1px solid var(--line); padding: 16px 0; }
.guide-list li:last-child { border-bottom: 1px solid var(--line); }
.guide-list .txt strong { font-weight: 500; font-size: 17px; display: block; }
.guide-list .txt p { color: var(--soft); font-size: 14.5px; margin-top: 3px; max-width: 74ch; }
.guide-list .src { font-family: var(--sans); font-size: 12px; color: var(--faint); margin-top: 4px; display: block; }
.guide-list .src a { color: var(--faint); }
.grid--course { grid-template-columns: repeat(3, 1fr); }
/* ── the registry edit (gear guide) ─────────────────────────────────────── */
/* Emotional, image-led hero — a real parent + newborn (life in it) */
.gear-hero2 { padding: 22px 0 4px; }
.gear-hero2-img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.gear-hero2-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.gear-hero2-copy { padding-top: 26px; }
.gear-hero-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.gear-hero-note { font-family: var(--sans); font-size: 13px; color: var(--faint); }
/* email band is the PRIMARY action */
.gear-capture { padding: 18px 0 6px; }
/* trust + honest disclosure, centered under the capture */
.gear-trust { padding: 18px 28px 0; }
.gear-trust p { font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: var(--soft); max-width: 72ch; margin: 0 auto; text-align: center; }
.gear-trust strong { color: var(--ink); }
.gear-disclosure-wrap { padding: 12px 28px 0; }
.gear-disclosure {
margin: 0 auto; padding: 12px 18px; border: 1px solid var(--line);
border-radius: var(--radius); background: var(--sage-wash);
font-family: var(--sans); font-size: 12.5px; line-height: 1.5; color: var(--soft); text-align: center;
}
/* category heading + product-card grid */
.gear-cat { padding: 34px 0 6px; }
.gear-cat-head h2 { font-family: var(--serif-display); font-weight: 400; font-size: 27px; display: flex; gap: 12px; align-items: baseline; }
.gear-cat-head h2 .num { font-size: 15px; color: var(--faint); font-family: var(--sans); font-weight: 600; letter-spacing: 0.08em; }
.gear-cat-intro { color: var(--soft); font-size: 16px; max-width: 74ch; margin-top: 8px; }
.gear-cat-note { font-family: var(--sans); font-size: 13px; color: var(--faint); margin-top: 8px; max-width: 74ch; }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 22px; }
.pcard { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pcard-img { background: #FAF7F1; }
.pcard-img img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.pcard-img--none { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.pcard-img--none span { font-family: var(--serif-text); font-size: 18px; color: var(--faint); }
.pcard-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1 1 auto; }
.pcard-top { display: flex; align-items: center; gap: 10px; }
.pick-tier { font-family: var(--sans); font-weight: 600; font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--sage-deep); background: var(--sage-wash); padding: 3px 9px; border-radius: 999px; flex: 0 0 auto; }
.pcard-price { margin-left: auto; font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--ink); }
.pcard h3 { font-family: var(--serif-text); font-weight: 500; font-size: 19px; margin: 10px 0 6px; }
.pcard-why { color: var(--soft); font-size: 14.5px; line-height: 1.5; }
.pcard-for { color: var(--ink); }
.pcard-caveat { font-size: 13px; color: var(--soft); background: var(--apricot-soft); border-radius: 10px; padding: 9px 12px; margin-top: 10px; }
.pcard-caveat strong { color: var(--ink); }
.pcard-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; }
.pcard-foot .src { font-family: var(--sans); font-size: 11.5px; color: var(--faint); line-height: 1.4; }
.pcard-foot .src a { color: var(--faint); text-decoration: underline; }
.pcard-foot .src a:hover { color: var(--sage-deep); }
/* buy link deliberately SECONDARY — the primary action is the email capture */
.pick-buy { margin-left: auto; font-family: var(--sans); font-weight: 600; font-size: 12.5px; color: var(--sage-deep); text-decoration: none; white-space: nowrap; }
.pick-buy:hover { text-decoration: underline; }
/* closing CTA band → scrolls back to the email capture */
.gear-cta-band { display: block; margin: 26px 0 8px; padding: 30px 34px; text-decoration: none; background: var(--ink); color: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform 0.2s ease; }
.gear-cta-band:hover { transform: translateY(-3px); }
.gear-cta-k { font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; display: block; }
.gear-cta-t { font-family: var(--serif-display); font-weight: 400; font-size: 24px; color: var(--paper); display: block; margin: 8px 0 10px; max-width: 32ch; }
.gear-cta-go { font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--apricot); }
@media (max-width: 900px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
/* stay 2-up on phones (like a real product grid) so the page isn't an endless
single-column scroll; tighten spacing to fit. */
@media (max-width: 560px) {
/* One per row on a phone, laid out sideways: photo on the left, everything
else on the right.
Two cards abreast left the text column 141px wide, and a real product name
does not fit in it — "Goodbaby No-Touch Forehead Thermometer" rendered as
"Goodbaby No- / Touch / Forehead Thermo / meter", with the word itself
chopped in half. There is no wording fix for that: at 141px the name either
breaks mid-word or strands its last word on a line alone. The column has to
be wider. Sideways keeps the cards compact vertically, so a shopper still
sees several at once while every name reads properly. */
.pgrid { grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
.pcard { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: stretch; }
.pcard-img, .pcard-img--none { height: 100%; }
.pcard-img img { height: 100%; object-fit: contain; padding: 8px; }
.pcard-body { padding: 13px 15px 14px; }
.pcard h3 { font-size: 17px; margin: 7px 0 5px; }
.pcard-why { font-size: 13px; }
.pcard-price { font-size: 13.5px; }
.pick-tier { font-size: 9.5px; padding: 2px 7px; }
.pcard-caveat { font-size: 12px; }
.pcard-foot { flex-direction: column; align-items: flex-start; gap: 7px; padding-top: 11px; }
.pick-buy { margin-left: 0; }
}
/* ── gear: full-bleed photo hero (real photo + copy + CTA above the fold) ── */
.ghero { position: relative; width: 100%; height: 74vh; min-height: 540px; max-height: 720px;
background-size: cover; background-position: 72% center; background-repeat: no-repeat;
display: flex; align-items: center; overflow: hidden; }
.ghero-scrim { position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(90deg, rgba(250,247,241,.94) 0%, rgba(250,247,241,.62) 38%, rgba(250,247,241,0) 68%); }
.ghero-inner { position: relative; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 30px;
display: flex; justify-content: flex-start; }
.ghero-copy { width: 47%; max-width: 500px; text-align: left; }
.ghero-copy h1 { font-family: var(--serif-display); font-weight: 400; font-size: clamp(30px, 4.6vw, 54px); line-height: 1.08; letter-spacing: -0.01em; margin: 10px 0 0; }
.ghero-copy .lede { margin-top: 16px; }
.ghero-copy .btn { margin-top: 26px; }
@media (max-width: 760px) {
.ghero { height: auto; min-height: 0; aspect-ratio: 4 / 5; max-height: 78vh;
background-position: 60% 20%; align-items: flex-end; }
.ghero-scrim { background: linear-gradient(0deg, rgba(250,247,241,1) 26%, rgba(250,247,241,.94) 46%, rgba(250,247,241,.4) 64%, rgba(250,247,241,0) 82%); }
.ghero-inner { justify-content: flex-start; padding: 0 22px 30px; }
.ghero-copy { width: 100%; max-width: none; }
.ghero-copy .lede { margin-top: 13px; }
.ghero-copy .btn { margin-top: 22px; width: 100%; text-align: center; padding: 15px 24px; }
}
/* ── buy-focused product card: the WHOLE card is a link to buy ── */
.pcard { text-decoration: none; color: inherit; cursor: pointer; }
.pcard-rating { display: flex; align-items: center; gap: 7px; margin: 3px 0 9px; }
.stars { position: relative; display: inline-block; width: 84px; height: 15px; }
.stars::before { content: '★★★★★'; position: absolute; inset: 0; color: var(--line); font-size: 15px; letter-spacing: 2px; line-height: 15px; }
.stars-on { position: absolute; inset: 0; overflow: hidden; white-space: nowrap; }
.stars-on::before { content: '★★★★★'; color: #E0A34E; font-size: 15px; letter-spacing: 2px; line-height: 15px; }
.pcard-rnum { font-family: var(--sans); font-weight: 700; font-size: 12.5px; color: var(--ink); }
.pcard-rcount { font-family: var(--sans); font-size: 11.5px; color: var(--faint); }
.pcard-cta {
margin-top: auto; display: block; text-align: center; background: var(--sage-deep); color: var(--paper);
font-family: var(--sans); font-weight: 600; font-size: 14px; padding: 12px 14px; border-radius: 11px;
transition: background 0.15s ease;
}
.pcard:hover .pcard-cta { background: var(--ink); }
.pcard-why { margin-bottom: 14px; }
.pcard-note { display: block; text-align: center; font-family: var(--sans); font-size: 11px; color: var(--faint); margin-top: 8px; }
.gear-trustline { font-family: var(--sans); font-size: 13.5px; color: var(--sage-deep); text-align: center; max-width: 68ch; margin: 14px auto 4px; line-height: 1.5; }
/* ── gear hub: trust strip ── */
.gtrust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
background: color-mix(in srgb, var(--paper-deep) 50%, var(--paper)); }
.gtrust-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-top: 24px; padding-bottom: 24px; }
.gtrust-item { display: flex; gap: 13px; align-items: flex-start; }
.gtrust-item svg { width: 26px; height: 26px; color: var(--sage-deep); flex-shrink: 0; margin-top: 1px; }
.gtrust-t { display: block; font-family: var(--sans); font-weight: 600; font-size: 14.5px; color: var(--ink); }
.gtrust-d { display: block; font-family: var(--sans); font-size: 12.5px; line-height: 1.5; color: var(--faint); margin-top: 3px; }
/* ── gear hub: sections ── */
.gsection { padding: 56px 0 8px; }
.gsection--cat { padding-top: 34px; }
.gsection-head { text-align: center; max-width: 58ch; margin: 0 auto 30px; }
.gsection-head h2 { font-family: var(--serif-display); font-weight: 400; font-size: clamp(27px, 3.4vw, 35px); line-height: 1.08; }
.gsection-head p { font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--soft); margin-top: 11px; }
/* ── gear hub: featured 'editors picks' cards ── */
.gfeat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.gfeat-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
transition: transform 0.18s ease, box-shadow 0.18s ease; }
.gfeat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.gfeat-img { position: relative; background: #FAF7F1; padding: 16px; }
.gfeat-img img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.gfeat-tier { position: absolute; top: 12px; left: 12px; font-family: var(--sans); font-weight: 600;
font-size: 11px; letter-spacing: 0.02em; color: var(--paper); background: var(--sage-deep);
padding: 5px 11px; border-radius: 999px; }
.gfeat-body { padding: 15px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.gfeat-eyebrow { font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--faint); }
.gfeat-body h3 { font-family: var(--serif-display); font-weight: 400; font-size: 20px; line-height: 1.15; margin: 5px 0 8px; }
.gfeat-body .pcard-rating { margin: 0 0 9px; }
.gfeat-why { font-family: var(--serif-text); font-size: 14px; line-height: 1.5; color: var(--soft); margin-bottom: 14px;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gfeat-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gfeat-price { font-family: var(--sans); font-weight: 700; font-size: 15px; color: var(--ink); }
/* NOTE: .gfeat-cta is a solid buy BUTTON now — it is styled in the rebuilt block
further down (search ".gfeat-cta {"). The old text-link rules that used to sit
here turned the label dark on card-hover, which made it vanish against the
dark hover background. Do not re-add a card-hover color rule here. */
.gcat-card-benefit { font-family: var(--serif-text); font-size: 14px; line-height: 1.45; color: var(--soft); margin-top: 7px; }
@media (max-width: 960px) { .gfeat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .gtrust-in { grid-template-columns: 1fr; gap: 16px; } .gsection { padding: 42px 0 6px; } }
@media (max-width: 520px) {
.gfeat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.gfeat-body { padding: 12px 13px 14px; }
.gfeat-body h3 { font-size: 16.5px; }
.gfeat-why { display: none; }
/* stacking is now the rule at every width (see .gfeat-foot further down); this
only tightens the gap on a phone. align-items must stay stretch, or the buy
button shrinks to its text and stops looking like the main action. */
.gfeat-foot { gap: 7px; }
.gcat-card-benefit { display: none; }
}
/* ── gear HUB (legacy centered form hero — kept for reference) + category tiles ── */
.ghub-hero { padding: 44px 0 26px; }
.ghub-hero-in { text-align: center; max-width: 760px; }
.ghub-hero .lede { margin: 14px auto 0; max-width: 60ch; }
.ghub-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 26px auto 0; max-width: 620px; }
.ghub-form input[type=email], .ghub-form input[type=date] {
font-family: var(--sans); font-size: 15px; padding: 13px 15px; border: 1px solid var(--line-strong, var(--line));
border-radius: 12px; background: var(--card); color: var(--ink); min-width: 0;
}
.ghub-form input[type=email] { flex: 1 1 220px; }
.ghub-form input[type=date] { flex: 0 1 170px; color: var(--soft); }
.ghub-form .btn { flex: 0 0 auto; }
.ghub-micro { font-family: var(--sans); font-size: 12.5px; color: var(--faint); text-align: center; margin-top: 12px; }
.gcat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 8px 0 10px; }
/* Aisle grouping on the gear hub. Forty categories in one grid is a wall; these
headings + the jump row turn it into a store you can navigate. */
.gaisle-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: 0 auto 34px; max-width: 900px; }
.gaisle-nav a { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--ink); text-decoration: none;
background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px;
transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease; }
.gaisle-nav a:hover, .gaisle-nav a:focus-visible { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; }
.gaisle { scroll-margin-top: 84px; }
.gaisle + .gaisle { margin-top: 46px; }
.gaisle-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.gaisle-head h3 { font-family: var(--serif-display); font-weight: 400; font-size: clamp(23px, 2.6vw, 28px); line-height: 1.1; }
.gaisle-head p { font-family: var(--serif-text); font-size: 14.5px; line-height: 1.45; color: var(--soft); flex: 1 1 260px; }
@media (max-width: 620px) {
.gaisle-nav { gap: 7px 8px; margin-bottom: 26px; }
.gaisle-nav a { font-size: 12.5px; padding: 7px 13px; }
.gaisle + .gaisle { margin-top: 34px; }
.gaisle-head { display: block; margin-bottom: 16px; }
.gaisle-head p { margin-top: 5px; }
}
.gcat-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
transition: transform 0.18s ease, box-shadow 0.18s ease; }
.gcat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.gcat-card-img { background: #FAF7F1; padding: 14px; }
.gcat-card-img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.gcat-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.gcat-card-body h3, .gcat-card-body h4 { font-family: var(--serif-display); font-weight: 400; font-size: 22px; line-height: 1.12; }
.gcat-card-meta { font-family: var(--sans); font-weight: 600; font-size: 12.5px; color: var(--sage-deep); margin-top: 12px; display: block; }
.gcat-card-benefit + .gcat-card-meta { margin-top: auto; padding-top: 12px; }
/* category page */
.gcat-hero { padding: 34px 0 6px; }
.gcat-back { color: var(--sage-deep); text-decoration: none; }
.gcat-back:hover { text-decoration: underline; }
.gcat-note { font-family: var(--sans); font-size: 13.5px; color: var(--faint); margin-top: 10px; max-width: 74ch; }
.gcat-more { padding: 30px 28px 8px; text-align: center; }
.gcat-more-links { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; margin-top: 12px; }
.gcat-more-links a { font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; }
.gcat-more-links a:hover { color: var(--sage-deep); }
@media (max-width: 820px) { .gcat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
.gcat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.gcat-card-body { padding: 12px 13px 14px; }
.gcat-card-body h3, .gcat-card-body h4 { font-size: 17px; }
.ghub-form input[type=email], .ghub-form input[type=date] { flex: 1 1 100%; }
.ghub-form .btn { width: 100%; }
}
.course-band {
display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch;
margin: 14px 0 28px; text-decoration: none; color: var(--paper);
background: var(--ink); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.course-band:hover { transform: translateY(-4px); box-shadow: 0 2px 3px rgba(43,39,36,0.05), 0 22px 44px -14px rgba(43,39,36,0.25); }
.course-band img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.course-band .course-body { padding: 30px 34px; display: block; }
.course-band h3 { font-family: var(--serif-display); font-weight: 400; font-size: 28px; margin: 10px 0 8px; color: var(--paper); }
.course-band p { color: color-mix(in srgb, var(--paper) 72%, transparent); font-size: 15.5px; max-width: 52ch; }
.course-band .go { font-family: var(--sans); font-weight: 600; font-size: 13px; margin-top: 14px; display: inline-block; }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 44px; padding-bottom: 10px; }
.pn-card {
display: block; text-decoration: none; color: var(--ink);
background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pn-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.pn-card .pn-title { display: block; font-family: var(--serif-display); font-size: 19px; margin-top: 6px; }
.pn-next { text-align: right; }
/* ── night-help finder: browse-by-state index ── */
.state-cols { columns: 3; column-gap: 48px; margin-top: 26px; }
.state-group { break-inside: avoid; margin-bottom: 30px; }
.state-name {
font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.09em;
text-transform: uppercase; color: var(--sage-deep);
padding-bottom: 9px; border-bottom: 1px solid var(--ink); margin-bottom: 2px;
}
.state-cities { list-style: none; margin: 0; padding: 0; }
.state-cities li {
display: flex; justify-content: space-between; align-items: baseline;
padding: 9px 0; border-bottom: 1px dotted var(--line);
}
.state-cities li:last-child { border-bottom: none; }
.state-cities a { font-family: var(--serif-text); font-size: 17px; color: var(--ink); text-decoration: none; }
.state-cities a:hover { color: var(--sage-deep); text-decoration: underline; text-underline-offset: 3px; }
.state-cities .n { font-family: var(--sans); font-size: 12px; color: var(--faint); }
.honesty {
background: var(--paper-deep); border: 1px solid var(--line); border-radius: var(--radius);
padding: 22px 26px; margin: 26px auto; font-size: 14.5px; color: var(--soft); line-height: 1.65;
}
/* ── chapter images ── */
.chapter-img { border-radius: 14px; overflow: hidden; margin: 8px 0 6px; box-shadow: var(--shadow); }
.chapter-img img { width: 100%; height: 190px; object-fit: cover; display: block; }
.sheet-img { border-radius: 14px; overflow: hidden; margin: 34px 0 8px; box-shadow: var(--shadow); }
.sheet-img img { width: 100%; height: 220px; object-fit: cover; display: block; }
/* ── responsive ── */
@media (max-width: 900px) {
body { font-size: 16px; }
/* Sides only — see the note on .wrap above. Writing the shorthand here is what
flattened every section's vertical spacing on phones. */
.wrap { padding-left: 22px; padding-right: 22px; }
.site-head { padding: 10px 0 0; }
.site-head .wrap { flex-direction: column; align-items: flex-start; gap: 8px; }
.head-left { width: 100%; justify-content: space-between; }
.site-nav { width: 100%; overflow-x: auto; gap: 22px; padding-bottom: 10px; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { flex-shrink: 0; white-space: nowrap; font-size: 13px; }
.hero { padding: 18px 0 20px; }
.hero .wrap, .plan-card, .capture-card, .site-foot .wrap { grid-template-columns: 1fr; }
.hero .wrap { gap: 30px; }
.hero h1 { font-size: clamp(30px, 8.6vw, 40px); margin: 12px 0 14px; }
.hero .lede { font-size: 16.5px; margin-bottom: 22px; }
.hero-media img { aspect-ratio: 16 / 10; max-height: 260px; border-radius: 14px; }
.hero-media::after { display: none; }
.due-widget { max-width: none; }
.due-cal { max-width: none; }
.due-go { width: 100%; padding: 15px 24px; }
.plan-picture { padding: 36px 0 4px; }
.plan-card { padding: 26px 22px; gap: 26px; }
/* Phone: the trimester name sits on its own line above its bar, and the count
column widens to fit the number plus what it counts. */
.tri-bar { grid-template-columns: 1fr 88px; row-gap: 7px; }
.tri-bar .tri-name { display: inline; }
.tri-bar .tri-wk { display: inline; margin-left: 8px; }
.tri-bar .name { grid-column: 1 / -1; }
.you-card { padding: 28px 22px; }
.you-card .countdown { position: static; text-align: left; margin-top: 14px; }
.timeline { padding: 40px 0 20px; }
.timeline-head { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 22px; }
.week-row { grid-template-columns: 56px 1fr; gap: 14px; padding: 20px 0; }
.week-row.current { padding-left: 12px; }
.week-row .wk .n { font-size: 25px; }
.task h3 { font-size: 17.5px; }
.task p { font-size: 14.5px; }
.chapter-img img { height: 130px; }
.capture { padding: 40px 0; }
.capture-card { padding: 30px 22px; gap: 26px; border-radius: 18px; }
.sheets { padding: 14px 0 48px; }
.sheets .grid { grid-template-columns: 1fr; gap: 18px; }
.grid--course { grid-template-columns: 1fr; }
.sheet-card img { height: 200px; }
.course-band { grid-template-columns: 1fr; }
.course-band img { min-height: 0; height: 170px; }
.course-band .course-body { padding: 24px 22px; }
.pn { grid-template-columns: 1fr; }
.pn-next { text-align: left; }
.sheet-hero .band { height: 180px; }
.sheet-hero h1 { margin-top: 22px; }
.sheet-hero .lede { font-size: 16.5px; }
.sheet-img img { height: 150px; }
.sheet-actions { flex-wrap: wrap; }
.site-foot .wrap { padding: 34px 20px 40px; gap: 26px; }
.state-cols { columns: 1; }
/* NOTE: blog/journal mobile overrides (.feature-card, .a-body, .a-check,
.a-callout, .cta-band) live in the media block at the END of this file,
because their base rules are defined below — a later rule of equal
specificity would otherwise cancel a mobile override placed here. */
.honesty { padding: 18px 18px; }
}
/* ── the journal (blog) ── */
.a-meta { font-family: var(--sans); font-size: 13px; letter-spacing: 0.02em; color: var(--faint); margin-top: 14px; }
.a-tldr {
margin-top: 26px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--sage-deep);
border-radius: 0 14px 14px 0; padding: 20px 24px;
}
.a-tldr .a-tldr-t { font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sage-deep); margin-bottom: 8px; }
.a-tldr p:last-child { font-size: 17px; line-height: 1.65; }
.a-body { padding-bottom: 20px; }
.a-body > p, .a-body .a-list li { font-size: 17.5px; line-height: 1.75; color: var(--ink); }
.a-body > p { margin: 18px 0; }
.a-body > p:first-of-type::first-letter {
font-family: var(--serif-display); font-size: 64px; line-height: 0.85;
float: left; padding: 8px 12px 0 0; color: var(--sage-deep);
}
.a-body h2 {
font-family: var(--serif-display); font-weight: 400; font-size: 30px; line-height: 1.2;
margin: 44px 0 6px; padding-top: 26px; border-top: 1px solid var(--line);
display: flex; align-items: baseline; gap: 14px;
}
.a-body h2 .num { font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; color: var(--apricot-ink); }
.a-body h3 { font-family: var(--serif-text); font-weight: 500; font-size: 21px; margin: 28px 0 4px; }
.a-body a { color: var(--sage-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.a-list { list-style: none; margin: 16px 0; padding: 0; }
.a-list li { padding: 7px 0 7px 26px; position: relative; }
.a-list li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 7px; height: 7px; border-radius: 50%; background: var(--apricot); }
.a-band { margin: 36px 0; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.a-band img { width: 100%; display: block; aspect-ratio: 1200 / 560; object-fit: cover; }
/* The photo strip that opens an article, a cheat sheet or the twelve-weeks page.
It had no styling of its own and was relying on the browser default, so when a
price-meter rule claimed the same `.band` name it inherited inline-flex and
collapsed. Stated explicitly now: as wide as the column it sits in, always. */
.band { display: block; width: 100%; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.band img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 560; object-fit: cover; }
/* …except the cheat-sheet hero, which is deliberately a shorter, wider crop. */
.sheet-hero .band img { height: 100%; aspect-ratio: auto; }
.a-check {
margin: 30px 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px 30px;
box-shadow: 0 1px 2px rgba(43,39,36,0.04);
}
.a-check-t { font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sage-deep); margin-bottom: 12px; }
.a-check ul { list-style: none; margin: 0; padding: 0; }
.a-check li { padding: 10px 0 10px 34px; position: relative; border-bottom: 1px dotted var(--line); font-size: 16.5px; line-height: 1.6; }
.a-check li:last-child { border-bottom: none; }
/* Filled "done" check — a static article list, NOT an interactive checkbox.
(Interactive to-dos use .check-list with real inputs.) Reads as included,
never as tickable, so it can't look clickable when it isn't. */
.a-check li::before { content: ""; position: absolute; left: 0; top: 12px; width: 17px; height: 17px; background: var(--sage-deep); border-radius: 5px; }
.a-check li::after { content: ""; position: absolute; left: 6px; top: 15px; width: 4.5px; height: 8.5px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.a-callout { margin: 30px 0; background: rgba(201,123,84,0.09); border: 1px solid rgba(201,123,84,0.35); border-radius: 16px; padding: 24px 28px; }
.a-callout .a-callout-t { font-family: var(--serif-text); font-weight: 600; font-size: 18px; color: var(--ink); margin-bottom: 8px; }
.a-callout p:last-child { font-size: 16px; line-height: 1.65; color: var(--ink); }
.a-faq-h { margin-top: 48px; }
.a-faq { border-bottom: 1px solid var(--line); }
.a-faq summary {
font-family: var(--serif-text); font-weight: 500; font-size: 19px; padding: 18px 34px 18px 0;
cursor: pointer; list-style: none; position: relative;
}
.a-faq summary::-webkit-details-marker { display: none; }
.a-faq summary::after {
content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px;
border-right: 2px solid var(--sage-deep); border-bottom: 2px solid var(--sage-deep);
transform: translateY(-70%) rotate(45deg); transition: transform 0.2s ease;
}
.a-faq[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.a-faq p { padding: 0 0 20px; font-size: 16.5px; line-height: 1.7; color: var(--soft); }
.a-sources { margin-top: 40px; background: var(--paper-deep); border: 1px solid var(--line); border-radius: 16px; padding: 24px 28px; }
.a-sources ol { margin: 0; padding-left: 20px; }
.a-sources li { font-family: var(--sans); font-size: 13.5px; line-height: 1.7; color: var(--soft); padding: 3px 0; }
.a-sources a { color: var(--sage-deep); }
.cta-band {
display: block; text-decoration: none; background: var(--sage-deep); color: #fff;
border-radius: 18px; padding: 34px 38px; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta-band:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.cta-band .kicker { color: rgba(255,255,255,0.92); }
.cta-band .cta-t { display: block; font-family: var(--serif-display); font-size: 27px; margin: 8px 0 6px; }
.cta-band .cta-s { display: block; font-family: var(--sans); font-size: 15px; color: rgba(255,255,255,0.95); }
.feature-card {
display: grid; grid-template-columns: 1.15fr 1fr; text-decoration: none; color: var(--ink);
background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
box-shadow: 0 1px 2px rgba(43,39,36,0.04); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 2px 3px rgba(43,39,36,0.05), 0 22px 44px -14px rgba(43,39,36,0.2); }
.feature-card img { display: block; width: 100%; height: 100%; object-fit: cover; min-height: 300px; }
.feature-card .body { padding: 36px 38px; display: flex; flex-direction: column; justify-content: center; background: var(--card); position: relative; z-index: 1; }
.feature-card h2 { font-family: var(--serif-display); font-weight: 400; font-size: 32px; line-height: 1.15; margin: 12px 0 10px; }
.feature-card p { color: var(--soft); font-size: 15.5px; }
.feature-card .go { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--sage-deep); margin-top: 16px; }
/* ── mobile overrides for the blog/journal ──
Declared AFTER the base rules above so they actually win on phones.
(An identical override placed in the earlier @media block was being
canceled by these base rules, which come later in the file.) */
@media (max-width: 900px) {
.feature-card { grid-template-columns: 1fr; }
.feature-card img { min-height: 0; height: 220px; }
.feature-card .body { padding: 24px 22px; }
.feature-card h2 { font-size: 25px; }
.a-body > p, .a-body .a-list li { font-size: 16.5px; }
.a-body h2 { font-size: 25px; }
.a-check { padding: 20px 18px; }
.a-callout { padding: 20px 18px; }
.cta-band { padding: 26px 24px; }
.cta-band .cta-t { font-size: 22px; }
}
/* ── print (cheat sheets) ── */
@media print {
body::before, .site-head, .site-foot, .sheet-actions, .sheet-hero .band { display: none; }
body { background: #fff; font-size: 12px; }
.sheet-hero h1 { margin-top: 0; font-size: 28px; }
.check-list li { padding: 8px 0; break-inside: avoid; }
a { text-decoration: none; color: inherit; }
.check-list .src { display: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
STORE UPGRADE — product cards route to product pages (PDPs); price band
replaces live dollar figures; product-detail page layout. Added 2026-07-13.
═══════════════════════════════════════════════════════════════════════════ */
/* Relative price band — $–$$$$, never a live number (stays fresh forever).
Called .pband, NOT .band: `.band` was already taken by the full-width photo
strip at the top of every article and cheat sheet. When this arrived as `.band`
it silently applied `display: inline-flex` to those photos, shrink-wrapping
every hero image to less than the width of the words underneath it. Two
different things must never share a class name. */
.pband { display: inline-flex; gap: 1px; font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: 0.5px; }
.pband-d { color: var(--line-strong); }
.pband-d.on { color: var(--sage-deep); }
/* Compact inline rating used on cards + featured (rating-first, then stars) */
.pcard-rating { display: inline-flex; align-items: center; gap: 6px; }
.pcard-rnum { font-family: var(--sans); font-weight: 700; font-size: 12.5px; color: var(--ink); }
.pcard-rcount { font-family: var(--sans); font-size: 11.5px; color: var(--faint); }
/* ── product card, rebuilt: article (not one big buy-link) ── */
.pcard { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
border-radius: var(--radius); overflow: hidden; cursor: default; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pcard-img { position: relative; display: block; background: #FAF7F1; }
.pcard-img img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.pcard-img .pick-tier { position: absolute; top: 10px; left: 10px; z-index: 1; }
.pcard-body { padding: 15px 18px 18px; display: flex; flex-direction: column; flex: 1 1 auto; }
.pcard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 18px; }
.pcard h3 { font-family: var(--serif-text); font-weight: 500; font-size: 18.5px; line-height: 1.2; margin: 9px 0 7px; }
.pcard h3 a { color: var(--ink); text-decoration: none; }
.pcard h3 a:hover { color: var(--sage-deep); }
.pcard-why { color: var(--soft); font-size: 14px; line-height: 1.5; margin-bottom: 15px; }
.pcard-actions { margin-top: auto; display: flex; flex-direction: column; gap: 9px; }
.pcard-cta { display: block; text-align: center; background: var(--sage-deep); color: var(--paper);
font-family: var(--sans); font-weight: 600; font-size: 14px; padding: 12px 14px; border-radius: 11px;
text-decoration: none; transition: background 0.15s ease; }
.pcard-cta:hover { background: var(--ink); }
.pcard-details { text-align: center; font-family: var(--sans); font-weight: 600; font-size: 13px;
color: var(--faint); text-decoration: none; }
.pcard-details:hover { color: var(--sage-deep); }
/* ── featured card, rebuilt to match (article + real buy button) ── */
.gfeat-card { cursor: default; }
.gfeat-img { display: block; }
.gfeat-body h3 a { color: var(--ink); text-decoration: none; }
.gfeat-body h3 a:hover { color: var(--sage-deep); }
/* Wraps rather than clips: on a phone the card body is ~140px wide and the price
meter + score + stars + review count do not fit on one line. They used to run
off the edge and get cut. */
.gfeat-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 9px; min-height: 16px; }
/* Buy button on its own line with the quieter link centered underneath — the same
shape as the product cards. Side by side, "Specs & alternatives" was wider than
the space left over and hung off the card at every screen size. */
.gfeat-foot { margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: 9px; }
.gfeat-cta { flex: 0 0 auto; text-align: center; background: var(--sage-deep); color: var(--paper);
font-family: var(--sans); font-weight: 600; font-size: 13.5px; padding: 11px 12px; border-radius: 10px;
text-decoration: none; white-space: nowrap; transition: background 0.15s ease; }
.gfeat-cta:hover { background: var(--ink); color: var(--paper); }
.gfeat-details { display: block; text-align: center; font-family: var(--sans); font-weight: 600;
font-size: 13px; color: var(--faint); text-decoration: none; }
.gfeat-details:hover { color: var(--sage-deep); }
/* ── breadcrumb ── */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 22px;
font-family: var(--sans); font-size: 12.5px; color: var(--faint); }
.crumbs a { color: var(--sage-deep); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-hidden] { color: var(--line-strong); }
.crumbs-here { color: var(--soft); }
/* ── product-detail page (PDP) ── */
.pdp-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 44px;
align-items: start; padding-top: 22px; padding-bottom: 8px; }
.pdp-media { background: #FAF7F1; border: 1px solid var(--line); border-radius: var(--radius);
padding: 24px; }
.pdp-media img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.pdp-buy { padding-top: 6px; }
.pdp-eyebrow { font-family: var(--sans); font-weight: 600; font-size: 11.5px; letter-spacing: 0.09em;
text-transform: uppercase; color: var(--sage-deep); }
.pdp-buy h1 { font-family: var(--serif-display); font-weight: 400; font-size: clamp(28px, 4vw, 40px);
line-height: 1.05; margin: 8px 0 0; }
.pdp-badges { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.pdp-rating { margin-top: 13px; }
.pdp-rating .pcard-rcount { font-size: 12.5px; }
.pdp-lede { font-family: var(--serif-text); font-size: 17.5px; line-height: 1.55; color: var(--soft);
margin-top: 16px; }
.pdp-btn { display: block; width: 100%; text-align: center; margin-top: 22px; padding: 16px 24px; font-size: 15.5px; }
.pdp-trust { font-family: var(--sans); font-size: 12.5px; line-height: 1.55; color: var(--faint); margin-top: 12px; }
/* callouts: best-for + good-to-know */
.pdp-callouts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 40px; }
.pdp-callout { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--sage);
border-radius: 12px; padding: 18px 20px; }
.pdp-callout--know { border-left-color: var(--apricot); }
.pdp-callout-k { display: block; font-family: var(--sans); font-weight: 600; font-size: 11.5px;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-bottom: 7px; }
.pdp-callout p { font-family: var(--serif-text); font-size: 15.5px; line-height: 1.55; color: var(--ink); }
/* blocks: specs, safe-sleep note */
.pdp-block { padding-top: 40px; }
.pdp-block h2 { font-family: var(--serif-display); font-weight: 400; font-size: 24px; margin-bottom: 16px; }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.spec-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0;
border-bottom: 1px solid var(--line); }
.spec-row dt { font-family: var(--sans); font-size: 13.5px; color: var(--faint); }
.spec-row dd { font-family: var(--sans); font-weight: 600; font-size: 13.5px; color: var(--ink); text-align: right; }
.pdp-safenote { font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: var(--soft);
background: var(--apricot-soft); border-radius: 12px; padding: 15px 18px; }
.pdp-related { padding-top: 52px; }
@media (max-width: 860px) {
.pdp-top { grid-template-columns: 1fr; gap: 22px; }
.pdp-media { padding: 18px; max-width: 460px; margin: 0 auto; }
.pdp-callouts { grid-template-columns: 1fr; gap: 14px; padding-top: 30px; }
.spec-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.pcard-body { padding: 13px 14px 15px; }
.pcard h3 { font-size: 17px; }
.pdp-callout p { font-size: 15px; }
}
/* ── stars v3: two-layer width-clip rating ──
gray base + gold overlay clipped by WIDTH (overflow:hidden), never an SVG
clip-path. A clip-path url(#id) reference is dropped by WebKit when an
ancestor gets a transform (the card lifts on hover) — the stars would snap
to all-gold and stay that way. Width-overflow survives ancestor transforms. */
.stars::before, .stars-on, .stars-on::before { content: none !important; display: none !important; }
.stars { position: relative; display: inline-block; width: 86px; height: 15.5px; line-height: 0; vertical-align: middle; }
.stars-base, .stars-fill { position: absolute; top: 0; left: 0; height: 100%; }
.stars-base { width: 100%; }
.stars-fill { overflow: hidden; } /* inline width:pct% reveals the left fraction */
.stars-base svg, .stars-fill svg { display: block; width: 86px; height: 100%; }
/* rating line on product cards: 4.7 ★★★★★ 1,254 ratings */
.pcard-proof { display: flex; align-items: center; gap: 7px; margin: 3px 0 10px; font-family: var(--sans); }
/* The stars are two stacked layers sized in pixels, and the gold one shows the
rating by clipping to a percentage of that width. As a flex item the whole
thing was allowed to shrink — so on a phone, inside a two-column card, the
86px star strip was squeezed to about 50px while the SVGs inside stayed 86px.
The gold layer then clipped at the wrong place (4.8 stars rendered as three)
and the review count printed straight over the top of it. Stars never shrink;
the count wraps to its own line instead. */
.pcard-proof { flex-wrap: wrap; }
.pcard-proof .stars, .gfeat-meta .stars { flex: 0 0 auto; }
.pcard-proof .pcard-rcount { flex: 0 1 auto; min-width: 0; }
.pcard-proof .pcard-rnum { font-weight: 700; font-size: 13px; color: var(--ink); }
.pcard-proof .pcard-rcount { font-size: 12px; color: var(--faint); }
.pcard-rating { display: inline-flex; align-items: center; gap: 6px; }
/* "N bought in past month" — real Amazon demand signal */
.bought-pill { display: inline-block; align-self: flex-start; font-family: var(--sans); font-weight: 600;
font-size: 11.5px; color: var(--sage-deep); background: var(--sage-wash);
padding: 4px 10px; border-radius: 999px; margin: 0 0 12px; }
.pdp-rating + .bought-pill { margin-top: 12px; }
.gfeat-meta + .gfeat-why + .bought-pill, .gfeat-why + .bought-pill { margin-top: 0; }
/* homepage store section */
.gshop-home { padding-top: 8px; }
.gshop-more { text-align: center; margin-top: 22px; }
/* ── phone: the featured gear cards ───────────────────────────────────────────
Two of these sit side by side on a 390px screen, which leaves about 141px
inside each card — narrower than "Check price on Amazon" set on a single line.
With nowrap the button grew wider than the card and bled past both edges.
This block has to live at the END of the file: an identical rule placed in the
earlier 520px block was overridden by the rebuilt .gfeat-cta further down,
because a media query adds no weight — only source order decides. */
@media (max-width: 520px) {
.gfeat-cta { white-space: normal; font-size: 13px; padding: 10px 9px; line-height: 1.25; }
.gfeat-details { font-size: 12.5px; }
}
/* ── never let one long word push the page sideways ───────────────────────────
A real business in the Charleston listings is called
"Cindi Doula Services/Birthdoula/ChildbirthClasses" — one unbroken 46-character
token with no spaces. On a 390px phone it forced the whole page 516px wide, so
the entire site scrolled sideways on that page. Names come from the outside
world and will do this again; the layout has to survive it. */
body { overflow-wrap: break-word; }
/* Phone: the star row inside a featured gear card. Two cards abreast leaves 141px,
and score + full-size stars + review count needs 145. Slightly smaller stars fit
all three rather than cutting the review count in half. */
@media (max-width: 520px) {
.gfeat-meta .stars { width: 70px; }
.gfeat-meta .stars-base svg, .gfeat-meta .stars-fill svg { width: 70px; }
}
/* ── gear cards sitting side by side must line up, row for row ──
Two cards next to each other were ragged: a two-line product name next to a
three-line one pushed the price, stars, buy button and details link ~19px out
of step, and the cards ended at different heights. It reads as broken.
Letting each card size itself (the old `align-items: start`) hid a stretching
bug but caused this one. Stretching alone is not enough either — equal outer
heights still leave the insides at different heights, and pinning only the
button to the bottom opens a hole in the middle of the shorter card.
The fix is one shared grid: every card spans the same rows of the parent, and
both the card and its body opt into those rows with `subgrid`, so image,
eyebrow, name, price/stars, blurb, purchase pill and buttons each get a row
whose height is the tallest across the pair. Everything aligns and the cards
end level, with no hole anywhere.
Row count must match the number of children exactly, which is why the phone
block below re-declares it: `.gfeat-why` is hidden at that width, so the card
has one row fewer. */
@supports (grid-template-rows: subgrid) {
.gfeat-grid { align-items: stretch; grid-auto-rows: auto; }
.gfeat-card { grid-row: span 7; display: grid; grid-template-rows: subgrid; }
.gfeat-body { grid-row: span 6; display: grid; grid-template-rows: subgrid; padding-top: 15px; }
/* A grid item refuses to shrink below the width of its own content unless it
is told it may. Without this a long product name — "Baby Delight Beside Me
Dreamer" — pushed the card 21px wider than its column and ran off the edge
instead of wrapping. */
.gfeat-card, .gfeat-body, .gfeat-body > * { min-width: 0; }
/* The row itself now positions the footer; `margin-top: auto` would push it
down inside its own row and reopen the gap this block exists to close. */
.gfeat-foot { margin-top: 0; align-self: end; }
.bought-pill[data-empty] { margin: 0; }
@media (max-width: 520px) {
.gfeat-card { grid-row: span 6; }
.gfeat-body { grid-row: span 5; }
}
}
/* Older browsers with no subgrid keep what they had: each card its own height,
imperfect but it never leaves a hole. */
@supports not (grid-template-rows: subgrid) {
@media (max-width: 520px) { .gfeat-grid { align-items: start; } }
}
/* ── store search ──
The gear hero used to end in an email-capture button. On a store that is a
leak: the shopper came to find a bassinet, and the loudest thing on the page
asked for their address instead. Search replaces it. The signup still exists,
at the foot of the page, after the selling is done. */
.visually-hidden {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.gsearch { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 26px;
max-width: 520px; background: var(--paper); border: 1px solid var(--line);
border-radius: 999px; padding: 6px 6px 6px 18px; box-shadow: 0 6px 20px rgba(31, 28, 24, 0.07); }
.gsearch:focus-within { border-color: var(--sage-deep); box-shadow: 0 0 0 3px rgba(122, 141, 111, 0.18); }
.gsearch-icon { width: 19px; height: 19px; color: var(--faint); flex: 0 0 auto; }
.gsearch input { flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
font-family: var(--sans); font-size: 16px; color: var(--ink); padding: 11px 0; }
.gsearch input::placeholder { color: var(--faint); }
.gsearch input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.gsearch button { flex: 0 0 auto; border: 0; cursor: pointer; font-family: var(--sans);
font-weight: 600; font-size: 14px; color: var(--paper); background: var(--sage-deep);
border-radius: 999px; padding: 11px 20px; }
.gsearch button:hover { background: var(--ink); }
.gsearch-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
max-height: 62vh; overflow-y: auto; background: var(--paper); border: 1px solid var(--line);
border-radius: 16px; box-shadow: 0 18px 44px rgba(31, 28, 24, 0.16); padding: 6px; }
.gsearch-hit { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: 11px;
text-decoration: none; color: var(--ink); }
.gsearch-hit:hover, .gsearch-hit[aria-selected="true"] { background: var(--sage-wash); }
.gsearch-hit img { width: 42px; height: 42px; object-fit: contain; flex: 0 0 auto;
background: #FAF7F1; border-radius: 8px; }
/* Both must be block: as inline spans they ran together and read
"Bottle warmersCategory". */
.gsearch-hit-t { display: block; font-family: var(--sans); font-weight: 600; font-size: 14.5px; line-height: 1.25; }
.gsearch-hit-c { display: block; font-family: var(--sans); font-size: 12.5px; color: var(--faint); margin-top: 3px; }
.gsearch-none { font-family: var(--sans); font-size: 14px; color: var(--soft); padding: 14px 12px; }
@media (max-width: 520px) {
/* Full width on a phone, and the button keeps its label rather than shrinking
to an icon — a bare magnifying glass is the least tapped control on a page. */
.gsearch { max-width: none; padding-left: 14px; gap: 6px; }
.gsearch button { padding: 11px 15px; font-size: 13.5px; }
.gsearch input { font-size: 16px; } /* 16px or iOS zooms the whole page on focus */
}
/* Search outside the hero — on category and product pages it sits inline, in the
page's own colors rather than floating over a photograph. */
.gsearch--inline { margin-top: 18px; margin-bottom: 4px; background: var(--card); }
.gsearch-bar { margin-top: 4px; }
@media (max-width: 520px) { .gsearch--inline { margin-top: 14px; } }