/*
  bpnc.app — the one stylesheet every page links (the website redesign, 2026-10-01).

  The generated product pages (tools/site/build-site.mjs) and the hand-written studio pages both
  use it, so a change here restyles the whole site. Colors are the brand kit's: CuddleCue teal,
  coral, blush, sun and ink, on the studio's cream. Text colors are chosen for at least 4.5:1
  against the grounds they sit on. Headings are Nunito, body text Nunito Sans.
*/

:root {
  /* the brand kit */
  --ink: #12343b;
  --ink-2: #33545a;
  --ink-3: #50696e;
  --teal: #3fb1b4;
  --teal-ink: #1d6b6f;
  --teal-50: #e8f6f4;
  --teal-100: #d3efec;
  --coral: #f8907c;
  --coral-ink: #b4442e;
  --coral-50: #feeee9;
  --sun: #f8b965;
  --sun-ink: #855011;
  --sun-50: #fef3e1;
  --blush: #f2b199;
  --blush-50: #fcf0ea;
  --cream: #faf7f0;
  --cream-2: #f3eee3;
  --paper: #ffffff;
  --line: #e7e1d5;
  --line-2: #d8d0c0;
  --night: #12343b;
  --night-2: #1b434b;
  --night-3: #245258;
  --night-line: #2f6169;
  --night-text: #f1f7f6;
  --night-muted: #b4cdcf;

  /* the names the older pages and the coin shop's own stylesheet read */
  --navy: #12343b;
  --navy-2: #1b434b;
  --coral-text: #b4442e;
  --coral-tint: #ffe3de;
  --yellow: #fecd31;
  --yellow-tint: #fff3c4;
  --mint-tint: #ddf5e8;
  --sky-tint: #ddf1ff;

  --display: 'Nunito', 'Nunito Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --sans: 'Nunito Sans', 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --gutter: clamp(16px, 5vw, 56px);
  --max: 1180px;
  --radius: 22px;
  --radius-lg: 30px;
  --shadow-sm: 0 1px 2px rgba(18, 52, 59, 0.06), 0 2px 8px -2px rgba(18, 52, 59, 0.08);
  --shadow: 0 2px 6px rgba(18, 52, 59, 0.05), 0 18px 40px -22px rgba(18, 52, 59, 0.35);
  --shadow-lg: 0 40px 80px -36px rgba(18, 52, 59, 0.55), 0 0 0 1px rgba(18, 52, 59, 0.06);
}

/* ── base ─────────────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--teal-ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 800; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.06; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.12; letter-spacing: -0.02em; }
h3 { font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.005em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
strong, b { font-weight: 800; }
code { font-family: var(--mono); font-size: 0.86em; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 8px; }
.section--night :focus-visible, .site-foot :focus-visible, .cta-band :focus-visible { outline-color: var(--sun); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -999px; top: 10px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px;
  text-decoration: none; font-weight: 800;
}
.skip:focus { left: 10px; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ── type helpers ─────────────────────────────────────────────────────────────────────────── */

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.76rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--coral-ink);
}
.eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--coral); }
.lead { font-size: clamp(1.06rem, 1.45vw, 1.22rem); color: var(--ink-2); max-width: 36em; }
.display { font-size: clamp(2.6rem, 6vw, 4.5rem); line-height: 1.02; letter-spacing: -0.032em; }
.more {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; color: var(--teal-ink); text-decoration: none;
}
.more .ic { width: 18px; height: 18px; transition: transform 0.15s ease; }
.more:hover { color: var(--ink); }
.more:hover .ic { transform: translateX(3px); }
.center-link { text-align: center; margin-top: 36px; }
.ic { width: 22px; height: 22px; flex: none; }
.ic-lg { width: 28px; height: 28px; }
.ic-xl { width: 36px; height: 36px; }

/* ── buttons and tags ─────────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 0;
  font-weight: 800; font-size: 1rem; line-height: 1.2; text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.btn .ic { width: 20px; height: 20px; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--ink); color: #fff; box-shadow: 0 10px 24px -14px rgba(18, 52, 59, 0.8); }
.btn-primary:hover { background: var(--night-3); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.btn-sm { min-height: 40px; padding: 9px 18px; font-size: 0.92rem; }
.tag {
  display: inline-flex; align-items: center; vertical-align: middle;
  padding: 3px 9px; border-radius: 999px;
  font-family: var(--sans); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1.5;
}
.tag--free { background: var(--teal-50); color: var(--teal-ink); box-shadow: inset 0 0 0 1px var(--teal-100); }
.tag--plus { background: var(--sun-50); color: var(--sun-ink); box-shadow: inset 0 0 0 1px #f7dfb6; }

/* ── header ───────────────────────────────────────────────────────────────────────────────── */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 247, 240, 0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.site-head.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 24px -20px rgba(18, 52, 59, 0.5); }
.head-row { display: flex; align-items: center; gap: 24px; height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; color: var(--ink); }
.brand-logo { height: 42px; width: auto; }
.brand-sub {
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); padding-top: 2px;
}
.nav { margin-left: auto; }
.nav-links { display: flex; gap: 4px; list-style: none; }
.nav-links a {
  display: block; padding: 8px 12px; border-radius: 999px;
  text-decoration: none; font-weight: 700; font-size: 0.95rem; color: var(--ink-2);
}
.nav-links a:hover { color: var(--ink); background: rgba(18, 52, 59, 0.05); }
.nav-links a[aria-current="page"] { color: var(--ink); background: var(--teal-50); }
.head-actions { display: flex; align-items: center; gap: 10px; }
.mobile-menu { display: none; position: relative; }
.mobile-menu summary {
  list-style: none; cursor: pointer; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.burger, .burger::before, .burger::after {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -6px; }
.burger::after { top: 6px; }
.mobile-menu[open] .burger { background: transparent; }
.mobile-menu[open] .burger::before { transform: translateY(6px) rotate(45deg); }
.mobile-menu[open] .burger::after { transform: translateY(-6px) rotate(-45deg); }
.mobile-panel {
  position: absolute; right: 0; top: 54px; width: min(300px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 2px; padding: 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow);
}
.mobile-panel a { padding: 12px 14px; border-radius: 12px; text-decoration: none; font-weight: 700; color: var(--ink); }
.mobile-panel a:hover, .mobile-panel a[aria-current="page"] { background: var(--teal-50); }
.mobile-panel .btn { margin-top: 8px; color: #fff; }

/* ── sections ─────────────────────────────────────────────────────────────────────────────── */

.section { padding-block: clamp(64px, 8.5vw, 112px); }
.section--first { padding-top: clamp(28px, 4vw, 48px); }
.section--tight { padding-top: 0; }
.section--tint { background: var(--paper); border-block: 1px solid var(--line); }
.section--night { background: var(--night); color: var(--night-text); }
.section--night h2, .section--night h3 { color: #fff; }
.section--night .eyebrow { color: var(--sun); }
.section--night .eyebrow::before { background: var(--sun); }
.section--night .section-head p { color: var(--night-muted); }
.section-head { max-width: 46rem; margin-bottom: clamp(32px, 5vw, 52px); }
.section-head h2 { margin: 14px 0 14px; }
.section-head p { font-size: 1.1rem; color: var(--ink-2); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* ── the home page hero ───────────────────────────────────────────────────────────────────── */

.hero { position: relative; overflow: hidden; padding-block: clamp(36px, 6vw, 80px) clamp(56px, 7vw, 96px); }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 60% at 88% 18%, rgba(63, 177, 180, 0.2), transparent 70%),
    radial-gradient(40% 45% at 6% 92%, rgba(248, 144, 124, 0.16), transparent 70%),
    radial-gradient(30% 35% at 55% 0%, rgba(248, 185, 101, 0.14), transparent 70%);
}
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
.hero-copy { min-width: 0; }
.hero-copy .display { margin: 18px 0 22px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 28px; }
.hero-note {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; max-width: 32em;
  font-size: 0.97rem; font-weight: 700; color: var(--ink-2);
}
.hero-note .ic { color: var(--sun-ink); margin-top: 1px; }
.hero-facts {
  display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 30px; list-style: none;
}
.hero-facts li {
  padding: 7px 14px; border-radius: 999px; background: var(--paper); box-shadow: var(--shadow-sm);
  font-size: 0.86rem; font-weight: 800; color: var(--ink-2);
}
.hero-media { position: relative; display: grid; justify-items: center; min-width: 0; }
.hero-glow {
  position: absolute; top: 46%; left: 50%; width: min(620px, 120%); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(63, 177, 180, 0.28), rgba(63, 177, 180, 0) 72%);
}
.phone-stage { position: relative; width: min(340px, 100%); }
.phone-stage .phone { width: 100%; }
.media-cap { margin-top: 16px; font-size: 0.86rem; color: var(--ink-3); text-align: center; }

/* ── page heroes and breadcrumbs ──────────────────────────────────────────────────────────── */

.page-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(28px, 4.5vw, 56px) clamp(36px, 5vw, 64px);
  background:
    radial-gradient(50% 80% at 92% 0%, rgba(63, 177, 180, 0.16), transparent 70%),
    radial-gradient(35% 60% at 0% 100%, rgba(248, 144, 124, 0.1), transparent 70%);
}
.page-hero h1 { margin: 14px 0 16px; max-width: 18em; }
.page-hero .lead { max-width: 40em; }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 40px; align-items: center; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; font-size: 0.86rem; color: var(--ink-3); margin-bottom: 18px; }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--line-2); }
.crumbs a { color: var(--ink-3); text-decoration: none; font-weight: 700; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink-2); font-weight: 700; }

/* ── phones and screenshots ───────────────────────────────────────────────────────────────── */

.phone {
  position: relative; width: min(340px, 100%);
  padding: 10px; border-radius: 46px; background: #0d272d;
  box-shadow: var(--shadow-lg);
}
.phone::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.08);
}
.phone--md { width: min(300px, 100%); border-radius: 42px; padding: 9px; }
.phone--sm { width: min(250px, 100%); border-radius: 36px; padding: 8px; }
.shot { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; border-radius: 36px; background: #f4f0fb; object-fit: cover; }
.phone--md .shot { border-radius: 33px; }
.phone--sm .shot { border-radius: 28px; }
.shot-ph {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px;
  padding: 26px 20px; text-align: center; min-height: 0; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(63, 177, 180, 0.07) 0 12px, transparent 12px 24px),
    var(--teal-50);
  box-shadow: inset 0 0 0 2px var(--teal-100);
}
.shot-ph-tag {
  padding: 4px 10px; border-radius: 999px; background: var(--paper);
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-ink);
}
.shot-ph-needs { font-family: var(--display); font-weight: 800; font-size: 1rem; line-height: 1.35; color: var(--ink); }
.shot-ph-file { padding: 4px 8px; border-radius: 8px; background: var(--paper); font-size: 0.74rem; color: var(--ink-2); overflow-wrap: anywhere; }
.shot-ph-size { font-size: 0.78rem; color: var(--ink-3); }
.phone--sm .shot-ph { gap: 8px; padding: 18px 12px; }
.phone--sm .shot-ph-tag { padding: 4px 8px; font-size: 0.6rem; letter-spacing: 0.06em; white-space: nowrap; }
.phone--sm .shot-ph-needs { font-size: 0.8rem; line-height: 1.3; }
.phone--sm .shot-ph-file { font-size: 0.64rem; }
.phone--sm .shot-ph-size { font-size: 0.68rem; }

/* ── the promises strip ───────────────────────────────────────────────────────────────────── */

.trust { background: var(--paper); border-block: 1px solid var(--line); }
.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 24px; padding-block: 26px; }
.trust-item { display: flex; align-items: flex-start; gap: 14px; }
.trust-item .ic { color: var(--teal-ink); margin-top: 2px; }
.trust-item b { display: block; font-family: var(--display); font-size: 1rem; line-height: 1.3; }
.trust-item span { display: block; font-size: 0.9rem; color: var(--ink-3); line-height: 1.45; }

/* ── cards and pictures ───────────────────────────────────────────────────────────────────── */

.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; }
.card {
  background: var(--paper); border-radius: var(--radius); padding: clamp(22px, 2.6vw, 30px);
  box-shadow: var(--shadow-sm); border: 1px solid var(--line);
}
.card h3 { margin: 14px 0 8px; font-size: 1.2rem; }
.card p { color: var(--ink-2); }
.card > .ic { color: var(--teal-ink); }
.card--soft { background: var(--paper); }
.card--night { background: var(--night-2); border-color: var(--night-line); box-shadow: none; }
.card--night p { color: var(--night-muted); }
.card--night > .ic { color: var(--sun); }
.pic { width: 64px; height: 64px; object-fit: contain; flex: none; }
.pic--icon {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px;
  background: var(--teal-50); color: var(--teal-ink);
}
.pic--xl { width: min(220px, 60%); height: auto; aspect-ratio: 1; margin-inline: auto; }

/* ── the home page's feature rows ─────────────────────────────────────────────────────────── */

.feature-row {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 88px); align-items: center;
  padding-block: clamp(28px, 4vw, 52px);
}
.feature-row + .feature-row { border-top: 1px dashed var(--line-2); }
.feature-row--reverse .feature-media { order: 2; }
.feature-media { display: flex; justify-content: center; align-items: flex-start; gap: 18px; }
.feature-media--pair .phone { width: min(240px, 48%); }
.feature-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral-ink);
}
.feature-eyebrow .pic { width: 44px; height: 44px; }
.feature-copy h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.15; letter-spacing: -0.015em; margin: 12px 0 14px; }
.feature-copy > p { font-size: 1.08rem; color: var(--ink-2); max-width: 34em; }
.ticks { list-style: none; display: grid; gap: 10px; margin: 22px 0 24px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); font-weight: 600; }
.ic-tick {
  width: 24px; height: 24px; padding: 4px; border-radius: 50%; margin-top: 1px;
  background: var(--teal-50); color: var(--teal-ink);
}

/* ── steps ────────────────────────────────────────────────────────────────────────────────── */

.steps-3 { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: none; }
.steps-3 li {
  position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-sm);
}
.steps-3 h3 { margin: 16px 0 8px; font-size: 1.2rem; }
.steps-3 p { color: var(--ink-2); }
.step-n {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: #fff; font-family: var(--display); font-weight: 900; font-size: 1.1rem;
}

/* ── plans ────────────────────────────────────────────────────────────────────────────────── */

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.plan {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px);
}
.plan--plus { background: var(--paper); border: 2px solid var(--teal); box-shadow: var(--shadow); }
.plan-head h3 { font-size: 1.5rem; margin: 12px 0 6px; }
.plan-head p { color: var(--ink-2); }
.plan-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin-top: 22px; }
.plan-list li { display: flex; align-items: flex-start; gap: 10px; font-weight: 700; font-size: 0.95rem; line-height: 1.35; }
.plan-list .ic-tick { width: 22px; height: 22px; }
.plan-note { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--ink-2); }

.trial-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px 28px; align-items: center;
  padding: clamp(24px, 3.4vw, 40px); border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--night) 0%, var(--night-3) 100%); color: var(--night-text);
  box-shadow: var(--shadow);
}
.trial-card > .ic { color: var(--sun); }
.trial-card h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 8px; }
.trial-card p { color: var(--night-muted); max-width: 40em; }
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow-sm); }
.compare { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare th, .compare td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.compare thead th { background: var(--cream); font-size: 0.86rem; color: var(--ink-2); position: sticky; top: 0; }
.compare thead th:not(:first-child), .compare td { text-align: center; width: 120px; }
.compare tbody th { font-weight: 600; color: var(--ink); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare-group th {
  background: var(--teal-50); color: var(--teal-ink) !important; text-align: left !important;
  font-size: 0.78rem; font-weight: 800 !important; letter-spacing: 0.1em; text-transform: uppercase;
}
.yes { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--teal-50); color: var(--teal-ink); }
.yes .ic { width: 18px; height: 18px; }
.no { display: inline-block; width: 14px; height: 2px; border-radius: 2px; background: var(--line-2); vertical-align: middle; }
.cell-note { font-size: 0.86rem; font-weight: 700; color: var(--ink-2); }
.rights { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.rights li { display: flex; gap: 12px; align-items: flex-start; font-weight: 700; padding: 14px 16px; background: var(--cream); border-radius: 16px; border: 1px solid var(--line); }
.rights .ic { color: var(--teal-ink); }
.why-plus {
  margin: 44px auto 0; max-width: 46rem; text-align: center;
  font-family: var(--display); font-weight: 800; font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.4; color: var(--ink);
}
.why-plus footer { margin-top: 12px; font-family: var(--sans); font-size: 0.92rem; font-weight: 700; color: var(--ink-3); }

/* ── resources ────────────────────────────────────────────────────────────────────────────── */

/* as many across as fit, so a new resource joins the grid with nothing to change here */
.res-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.res-card {
  display: flex; align-items: center; gap: 20px; padding: 24px; border-radius: var(--radius);
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  text-decoration: none; color: var(--ink); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.res-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--ink); }
.res-card > span { flex: 1; display: grid; gap: 6px; }
.res-card b { font-family: var(--display); font-size: 1.2rem; }
.res-card > span > span { color: var(--ink-2); font-size: 0.97rem; }
.res-card > .ic { color: var(--teal-ink); }
.res-card .pic { width: 72px; height: 72px; }
.res-cards--big .res-card { padding: 30px; }
.res-tag { justify-self: start; padding: 3px 10px; border-radius: 999px; background: var(--teal-50); color: var(--teal-ink) !important; font-size: 0.74rem !important; font-weight: 800; }
.res-more { margin-top: 28px; color: var(--ink-2); text-align: center; }

/* ── story ────────────────────────────────────────────────────────────────────────────────── */

.story-teaser { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.story-teaser h2 { margin: 14px 0 16px; }
.story-art { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 28px; border-radius: var(--radius-lg); background: var(--cream); border: 1px solid var(--line); }
.story-art .pic { width: 100%; height: auto; aspect-ratio: 1; }
.family-line { margin: 18px 0; font-family: var(--display); font-weight: 800; color: var(--coral-ink); letter-spacing: 0.02em; }
.story-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.story-body { display: grid; gap: 22px; font-size: 1.08rem; color: var(--ink-2); max-width: 40em; }
.story-body strong { color: var(--ink); }
.pull {
  margin: 4px 0; padding: 6px 0 6px 22px; border-left: 4px solid var(--coral);
  font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.3; color: var(--ink);
}
.story-side { position: sticky; top: 104px; display: grid; gap: 20px; }
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.member { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 0.82rem; color: var(--ink-3); }
.member b { color: var(--ink); font-size: 0.9rem; }
.member-ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--coral-50); color: var(--coral-ink); }
.member:nth-child(2) .member-ic { background: var(--sun-50); color: var(--sun-ink); }
.member:nth-child(3) .member-ic { background: var(--teal-50); color: var(--teal-ink); }
.drawings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 18px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.drawings .pic { width: 100%; height: auto; aspect-ratio: 1; }
.split-2 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.split-2 h2 { margin: 14px 0 14px; }
.split-media { display: grid; place-items: center; }

/* ── questions ────────────────────────────────────────────────────────────────────────────── */

.faq { max-width: 860px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: 1.1rem; }
.faq-item summary::after {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 12px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 12px no-repeat,
    var(--teal-50);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-a { padding: 0 46px 22px 0; color: var(--ink-2); }

/* ── the download band ────────────────────────────────────────────────────────────────────── */

.section--cta { padding-top: 0; }
.cta-band {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center;
  padding: clamp(28px, 4.5vw, 56px); border-radius: var(--radius-lg);
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(63, 177, 180, 0.35), transparent 60%),
    radial-gradient(40% 90% at 0% 100%, rgba(248, 144, 124, 0.22), transparent 60%),
    var(--night);
  color: var(--night-text); box-shadow: var(--shadow-lg);
}
.cta-band h2 { color: #fff; margin-bottom: 10px; }
.cta-band p { color: var(--night-muted); max-width: 34em; }
/* the iPhone line on a dark ground: light words, a light outline */
.cta-band .store-soon, .trial-card .store-soon, .foot-brand .store-soon {
  color: var(--night-muted); box-shadow: inset 0 0 0 1.5px var(--night-line);
}

/* ── features page ────────────────────────────────────────────────────────────────────────── */

.chip-nav { position: sticky; top: 72px; z-index: 20; background: rgba(250, 247, 240, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-block: 1px solid var(--line); }
.chip-nav .wrap { display: flex; gap: 8px; overflow-x: auto; padding-block: 10px; scrollbar-width: none; }
.chip-nav .wrap::-webkit-scrollbar { display: none; }
.chip-nav a {
  flex: none; padding: 8px 14px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line);
  text-decoration: none; font-weight: 800; font-size: 0.88rem; color: var(--ink-2);
}
.chip-nav a:hover { color: var(--ink); border-color: var(--line-2); }
.legend .wrap { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-block: 18px 0; font-size: 0.9rem; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.feat-group { padding-block: clamp(48px, 7vw, 88px); scroll-margin-top: 130px; }
.feat-group--tint { background: var(--paper); border-block: 1px solid var(--line); }
.feat-group-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(24px, 5vw, 64px); align-items: center; margin-bottom: 40px; }
.feat-group-head--solo { grid-template-columns: minmax(0, 1fr); }
.feat-group-head h2 { margin: 14px 0 14px; }
.feat-shots { display: flex; justify-content: center; align-items: flex-start; gap: 16px; }
.feat-shots--pair .phone { width: min(220px, 48%); }
.feat-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feat {
  position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: 20px;
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.feat-group--tint .feat { background: var(--cream); }
.feat .pic, .feat .pic--icon { width: 52px; height: 52px; border-radius: 16px; }
.feat h3 { font-size: 1.02rem; margin-bottom: 4px; padding-right: 56px; }
.feat > .tag { position: absolute; top: 18px; right: 16px; }
.feat p { font-size: 0.94rem; color: var(--ink-2); line-height: 1.5; }

/* ── how-to page ──────────────────────────────────────────────────────────────────────────── */

.docs { padding-block: clamp(24px, 4vw, 48px) clamp(64px, 8vw, 104px); }
.docs-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.toc { position: sticky; top: 92px; max-height: calc(100vh - 110px); overflow-y: auto; }
.toc nav { display: grid; gap: 2px; padding: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; }
.toc a { padding: 7px 12px; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 0.92rem; color: var(--ink-2); }
.toc a:hover { background: var(--teal-50); color: var(--ink); }
.toc-group { padding: 12px 12px 4px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.docs-body { display: grid; gap: clamp(40px, 6vw, 72px); min-width: 0; }
.docs-section { display: grid; gap: 20px; scroll-margin-top: 92px; }
.docs-lede { color: var(--ink-2); font-size: 1.05rem; max-width: 42em; }
.start-steps { list-style: none; display: grid; gap: 14px; counter-reset: step; }
.start-steps li {
  position: relative; padding: 22px 24px 22px 76px; border-radius: 20px;
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  counter-increment: step;
}
.start-steps li::before {
  content: counter(step); position: absolute; left: 22px; top: 20px;
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: #fff; font-family: var(--display); font-weight: 900;
}
.start-steps h3 { margin-bottom: 6px; }
.start-steps p { color: var(--ink-2); }
.guide {
  padding: clamp(20px, 3vw, 30px); border-radius: var(--radius); scroll-margin-top: 92px;
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.guide-head { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.guide-head .pic, .guide-head .pic--icon { width: 56px; height: 56px; border-radius: 16px; }
.guide-head h3 { font-size: 1.3rem; }
.guide-head p { color: var(--ink-3); font-size: 0.95rem; }
.guide-steps { display: grid; gap: 10px; padding-left: 1.4em; color: var(--ink-2); }
.guide-steps li { padding-left: 4px; }
.guide-steps li::marker { font-family: var(--display); font-weight: 900; color: var(--teal-ink); }
.ctl {
  display: inline; padding: 1px 7px; border-radius: 7px; background: var(--teal-50);
  color: var(--ink); font-weight: 800; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.good-to-know { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--sun-50); color: var(--ink-2); }
.good-to-know b { color: var(--sun-ink); margin-right: 4px; }
/*
  THE MANUAL: one card per entry, its name with the Free or Plus tag the plan matrix gives it, where
  it is in the app, then plain paragraphs; and the A to Z, a letter bar and a short line for each.
*/
.man-entry {
  display: grid; gap: 10px; padding: clamp(18px, 2.6vw, 26px); border-radius: var(--radius);
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-sm); scroll-margin-top: 92px;
}
.man-entry p { color: var(--ink-2); }
.man-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.man-head h3 { font-size: 1.22rem; }
.man-tags { display: inline-flex; gap: 6px; }
.man-where { display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px; border-radius: 12px; background: var(--teal-50); color: var(--ink); font-size: 0.95rem; }
.man-where .ic { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--teal-ink); }
.man-where b { margin-right: 2px; }
/* the manual's contents on a narrow screen: the sidebar's links, folded into one row that opens */
.toc-fold { display: none; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; }
.toc-fold summary {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 18px;
  font-weight: 800; color: var(--ink); cursor: pointer; list-style: none;
}
.toc-fold summary::-webkit-details-marker { display: none; }
.toc-fold summary span { margin-left: auto; font-weight: 600; font-size: 0.9rem; color: var(--ink-3); }
.toc-fold summary::after {
  content: ''; flex: none; width: 9px; height: 9px; margin: -4px 4px 0 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.toc-fold[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.toc-fold nav { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 14px; }
.toc-fold a { padding: 7px 12px; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 0.92rem; color: var(--ink-2); }
.toc-fold a:hover { background: var(--teal-50); color: var(--ink); }
.toc-fold .toc-group { flex-basis: 100%; }
.az-jump { display: flex; flex-wrap: wrap; gap: 6px; }
.az-jump a {
  display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 12px;
  background: var(--paper); border: 1px solid var(--line); font-family: var(--display); font-weight: 900;
  color: var(--ink); text-decoration: none;
}
.az-jump a:hover { background: var(--teal-50); }
.az-letter { scroll-margin-top: 92px; padding: 18px 22px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.az-letter h3 { font-size: 1.4rem; color: var(--teal-ink); margin-bottom: 6px; }
.az-letter dl { display: grid; gap: 10px; }
.az-letter dl > div { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 4px 18px; padding-top: 10px; border-top: 1px solid var(--line); }
.az-letter dl > div:first-child { border-top: 0; padding-top: 0; }
.az-letter dt a { font-weight: 800; color: var(--ink); }
.az-letter dd { margin: 0; color: var(--ink-2); font-size: 0.95rem; }
@media (max-width: 640px) {
  .az-letter dl > div { grid-template-columns: minmax(0, 1fr); }
}
.help-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.help-card {
  display: grid; gap: 6px; padding: 22px; border-radius: 20px; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.help-card .ic { color: var(--teal-ink); }
.help-card b { font-family: var(--display); font-size: 1.1rem; margin-top: 6px; }
.help-card span { color: var(--ink-2); font-size: 0.94rem; }
.help-card:hover { box-shadow: var(--shadow); color: var(--ink); }

/* ── resource pages ───────────────────────────────────────────────────────────────────────── */

/*
  THE MILK CHART: each storage place a card in its own color, drawn with the picture the app's milk
  stash draws for it, the times on a white panel so the numbers read first. Three across and then
  two on a wide screen (the guidance file has five places; a sixth would wrap to a half-width row,
  never break), two on a tablet, one on a phone. On paper the cards become rows (the print block).
*/
.storage-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.storage-card {
  --place: var(--teal); --place-50: var(--teal-50); --place-line: #bfe5e1;
  grid-column: span 2; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 22px 22px 20px;
  border-radius: var(--radius); background: var(--place-50); border: 1px solid var(--place-line);
  border-top: 6px solid var(--place); box-shadow: var(--shadow-sm);
}
.storage-card:nth-child(n + 4) { grid-column: span 3; }
.storage-card--room { --place: var(--sun); --place-50: var(--sun-50); --place-line: #f6dcb3; }
.storage-card--fridge { --place: var(--teal); --place-50: var(--teal-50); --place-line: #bfe5e1; }
.storage-card--freezer { --place: #6fa8dc; --place-50: #e8f2fb; --place-line: #c5dcf2; }
.storage-card--deep_freezer { --place: #7f8fd6; --place-50: #eceffb; --place-line: #cdd4f3; }
.storage-card--thawed { --place: var(--coral); --place-50: var(--coral-50); --place-line: #f8d2c8; }
.storage-head { display: flex; align-items: center; gap: 14px; }
.storage-pic {
  flex: none; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--place);
}
.storage-pic img { width: 46px; height: 46px; }
.storage-card h3 { font-size: 1.2rem; }
.storage-detail { margin-top: 2px; color: var(--ink-2); font-size: 0.92rem; }
.storage-times { display: grid; align-content: center; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--paper); }
.storage-time { display: grid; }
.storage-time b { font-family: var(--display); font-size: clamp(1.4rem, 2.1vw, 1.75rem); line-height: 1.1; color: var(--ink); }
.storage-time--limit b { font-size: 1.15rem; color: var(--ink-2); }
.storage-time b::first-letter { text-transform: uppercase; }
.storage-cap { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.storage-from { font-size: 0.88rem; color: var(--ink-2); }
@media (max-width: 880px) {
  .storage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .storage-card, .storage-card:nth-child(n + 4) { grid-column: auto; }
  .storage-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .storage-grid { grid-template-columns: minmax(0, 1fr); }
}
.source-box, .callout {
  display: flex; gap: 16px; align-items: flex-start; margin-top: 28px; padding: 22px 24px;
  border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line);
}
.source-box > div { display: grid; gap: 8px; color: var(--ink-2); }
.source-box .ic, .callout .ic { color: var(--teal-ink); }
.callout { margin: 0 0 28px; background: var(--blush-50); border-color: #f4d9cd; color: var(--ink); }
.callout .ic { color: var(--coral-ink); }
.print-head { display: none; }
.checklist { display: grid; gap: 18px; }
.checklist-bar {
  position: sticky; top: 80px; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding: 14px 18px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.checklist-count { font-weight: 800; }
.checklist-count b { font-family: var(--display); font-size: 1.3rem; }
.meter { flex: 1; min-width: 120px; height: 10px; border-radius: 999px; background: var(--teal-50); overflow: hidden; }
.meter > span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--teal); transition: width 0.3s ease; }
.checklist-privacy { font-size: 0.88rem; color: var(--ink-3); }
.check-group {
  margin: 0; padding: 22px 24px 24px; border-radius: var(--radius);
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.check-group legend {
  float: left; width: 100%; margin-bottom: 12px; padding: 0;
  font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: var(--ink);
}
.check-count { margin-left: 8px; font-family: var(--sans); font-size: 0.86rem; font-weight: 700; color: var(--ink-3); }
.check-note { clear: both; margin-bottom: 14px; font-size: 0.94rem; color: var(--ink-2); }
.check-items { clear: both; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; }
.check-items label {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px; border-radius: 12px;
  cursor: pointer; font-weight: 600; transition: background 0.15s ease;
}
.check-items label:hover { background: var(--teal-50); }
.check-items input { width: 22px; height: 22px; flex: none; accent-color: var(--teal-ink); cursor: pointer; }
.check-items input:checked + span { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--teal); text-decoration-thickness: 2px; }
.app-tie { margin-top: clamp(40px, 6vw, 72px); padding: clamp(24px, 4vw, 44px); border-radius: var(--radius-lg); background: var(--paper); border: 1px solid var(--line); }

/* ── the generated legal, support and coin pages ──────────────────────────────────────────── */

.legal { max-width: 820px; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 16px; }
.legal h2 { font-size: 1.45rem; margin: 32px 0 12px; }
.legal p { margin-bottom: 16px; color: var(--ink-2); }
.legal .lede { font-size: 1.15rem; color: var(--ink-2); margin-bottom: 20px; }
.legal .muted { color: var(--ink-3); font-size: 0.95rem; }
.legal .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.legal .summary { list-style: disc; padding-left: 20px; margin: 0 0 28px; color: var(--ink-2); }
.legal .summary li { margin-bottom: 10px; }
.legal .steps { list-style: decimal; padding-left: 22px; margin: 0 0 20px; color: var(--ink-2); }
.legal .steps li { margin-bottom: 8px; }
.legal a.btn-primary { color: #fff; }

/* ── store badges ─────────────────────────────────────────────────────────────────────────── */

.store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.store-badge { display: block; border-radius: 10px; line-height: 0; }
.store-badge img { height: 48px; width: auto; }
.store-badge--play img { height: 72px; max-width: none; margin: -12px; }
.store-soon {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px var(--line-2); font-weight: 800; font-size: 0.9rem; color: var(--ink-2);
}
.store-marks { display: block; font-size: 0.72rem; line-height: 1.5; }

/* ── footer ───────────────────────────────────────────────────────────────────────────────── */

.site-foot { background: var(--night); color: var(--night-muted); padding-block: clamp(48px, 6vw, 72px) 28px; font-size: 0.94rem; }
.site-foot a { color: var(--night-text); text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 32px 28px; }
.foot-brand { display: grid; gap: 16px; align-content: start; }
.foot-logo { width: 190px; height: auto; }
.foot-line { font-family: var(--display); font-weight: 800; color: var(--night-text); font-size: 1.05rem; }
.foot-title { font-family: var(--sans); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--night-muted); margin-bottom: 14px; }
.foot-col ul { list-style: none; display: grid; gap: 10px; }
.foot-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--night-line); font-size: 0.86rem;
}
.foot-bottom .store-marks { flex-basis: 100%; color: var(--night-muted); }

/* ── the studio's own pages ───────────────────────────────────────────────────────────────── */

.studio-hero .display { max-width: 12em; }
.panel {
  border-radius: var(--radius-lg); padding: clamp(24px, 3.2vw, 40px); display: grid; gap: 22px;
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.panel-tag { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--coral-ink); }
.panel h3 { font-size: 1.55rem; line-height: 1.15; }
.panel p { color: var(--ink-2); }
.spec { display: grid; gap: 22px; padding-top: 24px; border-top: 1px solid var(--line); }
.spec-row { display: grid; gap: 12px; min-width: 0; }
.spec-lbl { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); }
.spec-lockup { width: min(320px, 100%); height: auto; }
.swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.sw { display: grid; gap: 5px; font-size: 0.78rem; min-width: 0; }
.sw i { display: block; height: 50px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(18, 52, 59, 0.08); }
.sw code { font-size: 0.68rem; color: var(--ink-3); }
.spec-pair { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 28px; align-items: start; }
.spec-icon { display: flex; align-items: center; gap: 14px; }
.spec-icon img { width: 56px; height: 56px; border-radius: 15px; box-shadow: 0 6px 16px -8px rgba(18, 52, 59, 0.4); }
.spec-icon small, .spec-letter small { display: block; font-size: 0.8rem; color: var(--ink-3); line-height: 1.4; max-width: 13em; }
.spec-letter img { width: min(200px, 100%); height: auto; margin: 6px 0 10px; }
.contact { position: relative; overflow: hidden; background: var(--cream-2); border-top: 1px solid var(--line); }
.amp-bg { position: absolute; right: clamp(-40px, 2vw, 80px); top: 50%; transform: translateY(-50%) rotate(-8deg); width: clamp(180px, 26vw, 360px); opacity: 0.14; pointer-events: none; user-select: none; }
.contact .wrap { position: relative; }
.contact p { max-width: 34em; color: var(--ink-2); font-size: 1.1rem; }
.contact .btn { margin-top: 26px; }

/* ── responsive ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1040px) {
  .nav { display: none; }
  .mobile-menu { display: block; }
  .head-actions { margin-left: auto; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
  .feat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
}
@media (max-width: 880px) {
  .hero-grid, .page-hero-grid, .feature-row, .story-teaser, .story-grid, .split-2, .feat-group-head { grid-template-columns: minmax(0, 1fr); }
  .feature-row--reverse .feature-media { order: 0; }
  .hero-media { margin-top: 8px; }
  .cards-3, .steps-3, .help-cards { grid-template-columns: minmax(0, 1fr); }
  .plans, .rights { grid-template-columns: minmax(0, 1fr); }
  .trial-card, .cta-band { grid-template-columns: minmax(0, 1fr); }
  .docs-grid { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; max-height: none; }
  .toc nav { display: flex; flex-wrap: wrap; gap: 6px; }
  .toc-group { flex-basis: 100%; }
  .toc-side { display: none; }
  .toc-fold { display: block; }
  .story-side { position: static; }
  .feat-shots { justify-content: flex-start; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .head-row { height: 64px; gap: 12px; }
  .brand-logo { height: 34px; }
  .brand-sub { display: none; }
  .head-cta { padding: 8px 14px; min-height: 40px; font-size: 0.86rem; }
  .chip-nav { top: 64px; }
  .feat-list, .plan-list, .foot-grid, .trust-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-media--pair .phone, .feat-shots--pair .phone { width: min(200px, 48%); }
  .phone { border-radius: 40px; padding: 8px; }
  .shot { border-radius: 32px; }
  .start-steps li { padding: 20px 18px 20px 66px; }
  .start-steps li::before { left: 16px; }
  .faq-a { padding-right: 0; }
  .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec-pair { grid-template-columns: minmax(0, 1fr); }
  .checklist-bar { top: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── print: the resources are made to be printed ──────────────────────────────────────────── */

/*
  A PRINTED SHEET IS IN COLOR, ON OUR CREAM (the owner, 2026-10-01: "why dont print this chart for
  breat milk show color? make it look nice (add our icons) and in one page show our background color
  too"). Browsers print without backgrounds unless a page asks, so a resource page (`print-sheet` on
  its body) asks with `print-color-adjust: exact`, on the root as well as the body, because the
  page's own ground is painted from the root. The cream reaches the paper's edges through a named
  page, `sheet`, whose background covers the margins too; every other page of the site prints plain,
  black on white, as it always did. The milk chart is laid out to fit one page on Letter and on A4.
*/
@media print {
  @page { margin: 14mm; }
  @page sheet { margin: 9mm 11mm; background: #faf7f0; }
  html:has(> body.print-sheet) { -webkit-print-color-adjust: exact; print-color-adjust: exact; background: #faf7f0; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .site-head, .site-foot, .skip, .page-hero .cta, .crumbs, .no-print, .chip-nav, .toc, .toc-fold { display: none !important; }
  .page-hero { padding: 0 0 8pt; background: none; }
  .page-hero h1 { font-size: 20pt; margin: 0 0 4pt; }
  .page-hero .eyebrow, .page-hero .lead { display: none; }
  .section { padding: 0 !important; border: 0 !important; background: none !important; }
  .wrap { max-width: none; padding: 0; }
  a { color: inherit; text-decoration: none; }

  /* the sheet: our cream, our ink, our logo at the top */
  body.print-sheet {
    page: sheet; background: #faf7f0; color: var(--ink); font-size: 10pt;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .print-sheet .page-hero { display: none !important; }
  .print-head { display: grid; gap: 1.2mm; margin: 0 0 4mm; padding-bottom: 3mm; border-bottom: 0.7mm solid var(--teal); }
  .print-brand { display: flex; justify-content: space-between; align-items: center; gap: 6mm; margin-bottom: 2mm; }
  .print-brand img { width: auto; height: 9.5mm; }
  .print-brand span { font-size: 8.5pt; font-weight: 700; color: var(--ink-3); }
  .print-title { font-family: var(--display); font-size: 21pt; font-weight: 900; line-height: 1.1; color: var(--ink); }
  .print-line { font-size: 9.5pt; color: var(--ink-2); }

  /* the milk chart: one row per place, the picture, the place, then the times on white */
  .storage-grid { grid-template-columns: minmax(0, 1fr); gap: 3mm; }
  .storage-card, .storage-card:nth-child(n + 4), .storage-card:last-child:nth-child(odd) {
    grid-column: auto; grid-template-columns: minmax(0, 1fr) 64mm; grid-template-areas: "head times" "from times";
    align-items: center; gap: 1mm 6mm; padding: 3.5mm 4.5mm; border-radius: 4mm; box-shadow: none;
    border-top-width: 1px; border-left: 2.2mm solid var(--place); break-inside: avoid;
  }
  .storage-head { grid-area: head; gap: 4mm; }
  .storage-pic { width: 19mm; height: 19mm; border-width: 0.6mm; }
  .storage-pic img { width: 13mm; height: 13mm; }
  .storage-card h3 { font-size: 14pt; }
  .storage-detail { font-size: 9.5pt; }
  .storage-times { grid-area: times; gap: 1.5mm; padding: 3mm 4mm; border-radius: 3mm; }
  .storage-time b { font-size: 17pt; }
  .storage-time--limit b { font-size: 11pt; }
  .storage-cap { font-size: 7pt; }
  .storage-from { grid-area: from; padding-left: 23mm; font-size: 9pt; }

  .storage-card, .check-group, .source-box, .callout { box-shadow: none; break-inside: avoid; }
  .source-box { margin-top: 4mm; padding: 3.5mm 4.5mm; gap: 3.5mm; border-radius: 4mm; font-size: 8.5pt; }
  .source-box > div { gap: 1.2mm; }
  .source-box .ic-lg { width: 7mm; height: 7mm; }
  .callout { margin-bottom: 3mm; padding: 2.5mm 4mm; gap: 3mm; border-radius: 4mm; font-size: 8.5pt; }
  .callout .ic-lg { width: 6mm; height: 6mm; }

  /* the checklists: groups as white cards on the cream, the names in columns, a box to tick by
     pen (drawn here, so every browser prints the same square), and no running count on paper */
  .checklist { gap: 2mm; }
  .check-group { padding: 2mm 4mm 2.5mm; border-radius: 4mm; }
  .check-group legend { font-size: 11pt; margin-bottom: 0.6mm; }
  .check-count { display: none; }
  .check-items { grid-template-columns: repeat(var(--print-cols, 3), minmax(0, 1fr)); gap: 0 4mm; }
  .check-items label { align-items: flex-start; gap: 2mm; min-height: 0; padding: 0.3mm 0; font-size: 8.8pt; font-weight: 400; line-height: 1.3; }
  .check-items input {
    -webkit-appearance: none; appearance: none; flex: none; width: 3.3mm; height: 3.3mm; margin: 0.25mm 0 0;
    border: 0.3mm solid var(--ink-2); border-radius: 0.8mm; background: #fff;
  }
  .check-items input:checked { background: var(--teal); border-color: var(--teal-ink); }
  .check-note { font-size: 8.5pt; margin-bottom: 1mm; }
}

/* ── the studio's own chrome ──────────────────────────────────────────────────────────────── */

.brand-logo--studio { height: 34px; }
.foot-logo--studio { width: 150px; filter: brightness(0) invert(1); opacity: 0.92; }
.foot-grid--studio { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
.cc-title img { height: clamp(56px, 7vw, 76px); width: auto; }
.section--night .tagline {
  font-family: var(--display); font-weight: 800; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.3;
  color: #8fd8da; margin-bottom: 16px; max-width: 24em;
}
.section--night .section-head p { max-width: 42em; }
.studio-status { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--night-line); }
.studio-status .store-soon { color: var(--night-muted); box-shadow: inset 0 0 0 1.5px var(--night-line); }
.more--light { color: var(--night-text); }
.more--light:hover { color: #fff; }
.split-2--top { align-items: start; }
/* the studio's "What we do": the design panel holds the palette and two specimens side by side, so
   it takes the wider column; the heading beside it reads fine narrow */
@media (min-width: 881px) { .split-2--panel { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
@media (max-width: 1040px) { .foot-grid--studio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .foot-grid--studio { grid-template-columns: minmax(0, 1fr); } }

/* ── the product home, 2026-10-10 (the owner: "make the website way more interesting for users and
      make users trust our system"): two phones in the hero, a day told in real screens, one row of them, a tour
      of the app one screen at a time, the messy days, and how the log is kept ───────────────── */

.ic-sm { width: 16px; height: 16px; }
/* a band of one heading and its line: the same air above and below, so the words sit in the
   middle (the owner, 2026-10-12, of "When was the last feed?": "also make this middle aligned";
   it had a full section's top and no bottom at all) */
.section--compact { padding-block: clamp(48px, 6vw, 80px); }
.section--compact .section-head { margin-bottom: 0; }

/* the hero's two phones: the evening's Who's on behind, Today in front, two cards between them */
.phone-duo { position: relative; width: min(470px, 100%); aspect-ratio: 470 / 640; }
.duo-back, .duo-front { position: absolute; width: 62%; }
.duo-back { left: 0; top: 7%; transform: rotate(-5deg); opacity: 0.96; }
.duo-front { right: 0; top: 0; }
.duo-back .phone, .duo-front .phone { width: 100%; }
.float-card {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px;
  max-width: 250px; padding: 10px 14px 10px 10px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.94); box-shadow: var(--shadow);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 0.86rem; line-height: 1.3; color: var(--ink);
  animation: float-in 0.7s ease-out both, float 6s ease-in-out 0.7s infinite;
}
.float-card b { display: block; font-family: var(--display); font-weight: 800; }
.float-card small { display: block; color: var(--ink-3); font-weight: 600; }
.float-card--a { left: -4%; top: 4%; }
.float-card--b { right: -2%; bottom: 9%; animation-delay: 0.25s, 1.4s; }
.float-ic { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: #ece6fb; color: #5b47a8; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes float-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* a day, shared: the moments, each a small phone over its clock and one line, ALWAYS ONE ROW (the
   owner, 2026-10-12: "this needs to be in one row, except when it does not fit. the 1 screenshot
   underneath feel out of place otherwise"). Columns are made for as many moments as there are, so
   a sixth no longer wraps alone under five; where the row does not fit, it scrolls sideways
   (below), still one row. */
.moments { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; }
.moment { display: grid; gap: 16px; align-content: start; }
.moment-phone .phone { width: 100%; margin-inline: auto; }
/* the clock stays beside its words: a time that wrapped left the clock alone on a line of its own
   ("Her month-day" in a sixth of the row) */
.moment-time {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  font-family: var(--display); font-weight: 900; font-size: 1.05rem; color: var(--teal-ink);
}
.moment-who {
  margin-left: 4px; padding: 2px 9px; border-radius: 999px; background: var(--coral-50);
  font-size: 0.74rem; font-weight: 800; color: var(--coral-ink);
}
.moment h3 { margin: 6px 0 6px; font-size: 1.05rem; line-height: 1.3; }
.moment p { font-size: 0.93rem; color: var(--ink-2); }

/* the tour: tabs over one phone and what it does; without the script every panel shows */
.tour-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: clamp(28px, 4vw, 44px); }
.tour-tab {
  min-height: 44px; padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--line-2);
  background: var(--paper); color: var(--ink-2); font: 800 0.95rem/1 var(--display); cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tour-tab:hover { border-color: var(--teal); color: var(--ink); }
.tour-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tour:not(.is-live) .tour-tabs { display: none; }
.tour-panel {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 6vw, 88px); align-items: center;
}
.tour:not(.is-live) .tour-panel + .tour-panel { margin-top: 56px; }
.tour.is-live .tour-panel[data-hidden] { display: none; }
.tour.is-live .tour-panel { animation: float-in 0.35s ease-out both; }
.tour-media { display: flex; justify-content: center; }
.tour-copy h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.15; letter-spacing: -0.015em; margin: 12px 0 14px; }
.tour-copy > p { font-size: 1.08rem; color: var(--ink-2); max-width: 34em; }

/* built for real life */
.real-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.real-card {
  padding: 26px 24px; border-radius: var(--radius); background: var(--cream);
  border: 1px solid var(--line);
}
.real-card .pic, .real-card .pic--icon { width: 56px; height: 56px; }
.real-card h3 { margin: 16px 0 6px; font-size: 1.15rem; }
.real-card p { color: var(--ink-2); font-size: 0.97rem; }

/* safe and honest */
.safe-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.safe-col { padding: clamp(24px, 3vw, 34px); border-radius: var(--radius); background: var(--night-2); border: 1px solid var(--night-line); }
.safe-col h3 { display: flex; align-items: center; gap: 12px; font-size: 1.3rem; margin-bottom: 6px; }
.safe-col h3 .ic { color: var(--sun); }
.ticks--night li { color: var(--night-text); }
.ticks--night .ic-tick { background: rgba(143, 216, 218, 0.16); color: #8fd8da; }
.nevers { list-style: none; display: grid; gap: 10px; margin: 22px 0 24px; }
.nevers li { display: flex; gap: 12px; align-items: flex-start; color: var(--night-text); font-weight: 600; }
.ic-x { width: 24px; height: 24px; padding: 5px; border-radius: 50%; margin-top: 1px; background: rgba(248, 144, 124, 0.18); color: var(--coral); }
.safe-note { display: flex; gap: 10px; align-items: flex-start; padding-top: 18px; border-top: 1px solid var(--night-line); color: var(--night-muted); font-size: 0.93rem; }
.safe-note .ic { color: var(--sun); }
.section--night .section-head a { color: #8fd8da; }
.more--night { color: #8fd8da; }
.more--night:hover { color: #fff; }

@media (max-width: 1040px) {
  .moments { grid-auto-columns: minmax(200px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
  .moment { scroll-snap-align: start; }
  .real-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .tour-panel, .safe-grid { grid-template-columns: minmax(0, 1fr); }
  .phone-duo { width: min(400px, 100%); }
}
@media (max-width: 640px) {
  .real-grid { grid-template-columns: minmax(0, 1fr); }
  .moments { grid-auto-columns: minmax(72%, 1fr); }
  .moment-phone .phone { width: min(230px, 100%); }
  .tour-tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
  .tour-tab { flex: none; }
  .float-card { max-width: 210px; font-size: 0.78rem; padding: 8px 10px 8px 8px; }
  .float-ic { width: 28px; height: 28px; }
  .float-card--a { left: 0; }
  .float-card--b { right: 0; }
}

/* ── the guides (2026-10-10): an index with a search box, and one page per task ─────────────── */
/* the search hides what does not match; a card's own display would otherwise win over `hidden` */
[data-guides] [hidden] { display: none !important; }
.gsearch { display: flex; gap: 10px; margin-top: 22px; max-width: 34rem; }
.gsearch input {
  flex: 1; min-width: 0; min-height: 48px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--line-2);
  background: var(--paper); color: var(--ink); font: inherit; font-size: 1rem;
}
.gsearch input:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-color: var(--teal-ink); }
.gsearch .btn { min-height: 48px; }
.gchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.gchip {
  min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--paper);
  color: var(--ink); font: inherit; font-weight: 700; font-size: 0.92rem; cursor: pointer;
}
.gchip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.gchip:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.ghub { display: grid; gap: clamp(36px, 5vw, 56px); }
.gcount { color: var(--ink-3); font-weight: 700; font-size: 0.95rem; }
.gsection { display: grid; gap: 18px; scroll-margin-top: 92px; }
.gsection header h2 { margin: 0 0 6px; }
.gsection header p { color: var(--ink-2); }
.gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.gcard {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 20px; color: var(--ink); text-decoration: none;
  transition: box-shadow 140ms ease, transform 140ms ease;
}
.gcard:hover { box-shadow: var(--shadow); transform: translateY(-1px); color: var(--ink); }
.gcard:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.gcard-pic { display: block; height: 124px; border-radius: 12px; overflow: hidden; background: var(--cream-2); border: 1px solid var(--line); }
.gcard-pic img { display: block; width: 100%; height: auto; }
.gcard-pic--ph { display: grid; place-items: center; color: var(--teal-ink); }
.gcard-copy { display: grid; gap: 6px; min-width: 0; }
.gcard-copy b { font-family: var(--display); font-size: 1.08rem; line-height: 1.25; }
.gcard-copy > span { color: var(--ink-2); font-size: 0.93rem; }
.gcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ink-3); font-size: 0.82rem; font-weight: 700; }
.gmanual-list { list-style: none; display: grid; gap: 10px; padding: 0; margin: 0; }
.gmanual-list a { display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.gmanual-list a:hover { box-shadow: var(--shadow); }
.gmanual-list b { font-family: var(--display); }
.gmanual-list small { color: var(--ink-3); font-weight: 700; }
.gmanual-list span { color: var(--ink-2); font-size: 0.93rem; }
.gnone { padding: 24px; border-radius: 20px; background: var(--paper); border: 1px dashed var(--line-2); }
.gnone h2 { margin: 0 0 8px; font-size: 1.3rem; }

.gpost { max-width: 980px; }
.gpost-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--ink-3); font-weight: 700; font-size: 0.9rem; }
.gpost-body { display: grid; gap: 28px; min-width: 0; }
.gpost-intro { font-size: 1.08rem; color: var(--ink-2); max-width: 44em; }
.gpost-toc { padding: 18px 20px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.gpost-toc ol { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 6px; }
.gpost-toc a { color: var(--ink); }
.gsteps { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(28px, 4vw, 44px); }
.gstep {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: clamp(20px, 4vw, 44px); align-items: start;
  padding: clamp(18px, 3vw, 28px); border-radius: 24px; background: var(--paper); border: 1px solid var(--line);
  scroll-margin-top: 92px;
}
.gstep-copy { display: grid; gap: 10px; align-content: start; min-width: 0; }
.gstep-copy h2 { margin: 0; font-size: clamp(1.2rem, 2.2vw, 1.45rem); }
.gstep-copy p { color: var(--ink-2); }
.gstep-n {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--teal-50); color: var(--teal-ink); font-family: var(--display); font-weight: 900; box-shadow: inset 0 0 0 1px var(--teal-100);
}
.gstep-shot { margin: 0; justify-self: center; width: min(300px, 100%); }
.gstep-shot img { display: block; width: 100%; height: auto; border-radius: 22px; border: 1px solid var(--line-2); box-shadow: 0 18px 40px -26px rgba(18, 52, 59, 0.55); background: var(--cream-2); }
.gstep-shot--ph { aspect-ratio: 600 / 1226; display: grid; place-items: center; border-radius: 22px; border: 1.5px dashed var(--line-2); color: var(--ink-3); font-weight: 700; }
.gtips { padding: 20px 22px; border-radius: 20px; background: var(--sun-50); border: 1px solid #f7dfb6; }
.gtips h2 { margin: 0 0 10px; font-size: 1.2rem; }
.gtips ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.grelated { display: grid; gap: 14px; }
.grelated h2 { margin: 0; font-size: 1.3rem; }
.gpost-back { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 760px) {
  .gstep { grid-template-columns: minmax(0, 1fr); }
  .gstep-shot { width: min(280px, 100%); }
}
@media (max-width: 520px) {
  .gsearch { flex-direction: column; }
  .gcard { grid-template-columns: 76px minmax(0, 1fr); }
  .gcard-pic { height: 104px; }
}

/*
  THE MANUAL'S SEARCH AND PICTURES (the owner, 2026-10-12). The search sits before the contents,
  under the page's heading; a part that names a picture draws the real screen beside its opening
  line, phone-shaped and small, so the entries under it read against what they describe.
*/
.man-search-wrap { padding-top: clamp(4px, 1vw, 12px); }
.man-search-wrap .gsearch { margin-top: 0; }
.man-search-wrap .gcount:empty { display: none; }
.man-intro { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: clamp(16px, 3vw, 32px); align-items: start; }
.man-shot { margin: 0; }
.man-shot img {
  display: block; width: 100%; height: auto; border-radius: 22px;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: var(--paper);
}
@media (max-width: 640px) {
  .man-intro { grid-template-columns: minmax(0, 1fr) 120px; }
  .man-shot img { border-radius: 14px; }
}
/* a part or entry the search left out: `hidden` must win over the grid these are drawn with */
.docs-section[hidden], .man-entry[hidden], .gnone[hidden] { display: none; }

/* the manual's door under the guides (2026-10-12): one card, as wide as a guide card */
.gmanual-door .help-card { max-width: 30rem; }

/* THE APP'S "PLUS +" CHIP AND THE PLUS WORDMARK (the owner, 2026-10-12): the chip stands in for the
   old Plus word tag, at the height of the line it sits in; the wordmark heads Free and Plus */
.tag--plus { padding: 0; background: none; box-shadow: none; }
.plus-chip { display: block; height: 1.45rem; width: auto; }
.plus-wordmark { display: block; width: min(320px, 78%); height: auto; margin: 4px 0 18px; }
.group-plus { display: inline-flex; align-items: center; gap: 10px; }

/* ── the tablet and the watch (the owner, 2026-10-14: "i want to market this especially the tablet
      view as 'command center' … make sure the tablet will have a nice section to entice user who
      sees it"). `tools/site/pages/devices.mjs` writes both; the pictures are the real app's ──── */

/* the quiet line while a device is not in the stores yet (`tools/site/content/devices.json`) */
.soon {
  display: flex; align-items: center; gap: 8px; margin: 0 0 14px;
  font-size: 0.9rem !important; font-weight: 700; letter-spacing: 0.01em; color: var(--ink-3) !important;
}
.soon .ic { width: 16px; height: 16px; opacity: 0.85; }
.section-head--center .soon { justify-content: center; }
.section--night .soon { color: var(--night-muted) !important; }

/* a tablet in its case: a dark bezel, a camera on the long edge, the real screen inside */
.tablet {
  --bezel: clamp(8px, 1.4vw, 15px);
  position: relative; padding: var(--bezel); border-radius: calc(var(--bezel) * 2.4);
  background: linear-gradient(160deg, #24464c, #0d272d 55%);
  box-shadow: 0 60px 110px -50px rgba(0, 0, 0, 0.75), 0 24px 48px -30px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.09);
}
.tablet::before {
  content: ""; position: absolute; left: 50%; top: calc(var(--bezel) / 2 - 2.5px);
  width: 5px; height: 5px; border-radius: 50%; background: #3a5d63; transform: translateX(-50%);
}
.tablet--upright { --bezel: clamp(5px, 0.8vw, 9px); }
.tablet picture { display: block; }
.tablet-shot {
  display: block; width: 100%; height: auto; border-radius: calc(var(--bezel) * 1.3);
  background: var(--cream-2);
}
.tablet--land .tablet-shot { aspect-ratio: 1024 / 768; }
.tablet--upright .tablet-shot { aspect-ratio: 768 / 1024; }

/* the command center: the night ground, a soft glow, the tablet lying down with the upright one
   standing in front of its corner, and what it does in four cards */
.section--command { position: relative; overflow: hidden; }
.section--command::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 50% 58%, rgba(63, 177, 180, 0.22), transparent 70%),
    radial-gradient(ellipse 40% 30% at 85% 90%, rgba(248, 144, 124, 0.12), transparent 70%);
}
.section--command .wrap { position: relative; }
.section--command .section-head { max-width: 50rem; }
.section--command h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -0.025em; }
.cc-stage { position: relative; max-width: 1060px; margin: 0 auto; padding: 0 12% 7% 0; }
.cc-land { width: 100%; }
.cc-upright { position: absolute; right: 0; bottom: 0; width: 27%; }
.cc-float { z-index: 3; }
.cc-float--a { left: -3.5%; bottom: 3%; }
.media-cap--night { color: var(--night-muted); margin-top: 26px; }
.cc-points {
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  margin-top: clamp(36px, 5vw, 56px);
}
.cc-point {
  padding: 22px 20px 22px; border-radius: var(--radius); background: rgba(27, 67, 75, 0.82);
  border: 1px solid var(--night-line);
}
.cc-ic {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(143, 216, 218, 0.14); color: #8fd8da;
}
.cc-point h3 { margin: 14px 0 6px; font-size: 1.08rem; }
.cc-point p { color: var(--night-muted); font-size: 0.94rem; line-height: 1.5; }

/* the watch: the owner's frame over its glass, the watch app's home behind it (`devices.mjs`
   `watchFrame`). Sizes inside are shares of the watch's width, so the screen scales with it. */
.watch {
  position: relative; display: block; width: clamp(150px, 17vw, 210px); container-type: inline-size;
  filter: drop-shadow(0 18px 26px rgba(18, 52, 59, 0.22));
}
.watch-frame { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.watch-glass {
  position: absolute; z-index: 0; overflow: hidden; background: #000;
  display: flex; flex-direction: column; justify-content: center; gap: 3.5cqw; padding: 7cqw;
}
.watch-name { color: #fff; font-weight: 700; font-size: 10.5cqw; line-height: 1.1; }
.watch-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5cqw; }
.watch-tile {
  display: grid; justify-items: center; gap: 0.8cqw; padding: 4cqw 1cqw;
  border-radius: 7cqw; background: var(--teal); color: var(--ink);
  font-weight: 600; font-size: 5.2cqw; line-height: 1.1; white-space: nowrap;
}
.watch-tile img { width: 12.5cqw; height: 12.5cqw; }
.watch-real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wrist-pair {
  display: flex; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 56px);
  padding-block: clamp(28px, 4vw, 48px);
}

/* the watch's section: smaller than the tablet's, the two watches beside the words */
.wrist-grid {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 88px); align-items: center; max-width: 1080px;
}
.wrist-media {
  border-radius: var(--radius-lg); padding: 8px 12px 22px;
  background: linear-gradient(160deg, var(--teal-50), var(--blush-50));
  border: 1px solid var(--teal-100);
}
.wrist-media .media-cap { margin-top: 0; }
.wrist-copy h2 { margin: 14px 0 12px; }
.wrist-copy .lead { margin-top: 4px; }
.wrist-copy .ticks { margin: 20px 0 22px; }
.wrist-plan { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--ink-2); }

/* Features' group for both: two cards, the tablet's wider */
.dev-cards { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.dev-card {
  display: grid; grid-template-rows: auto 1fr; gap: 26px; padding: clamp(20px, 3vw, 30px);
  border-radius: var(--radius-lg); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.feat-group--tint .dev-card { background: var(--cream); }
.dev-media {
  display: grid; place-items: center; padding: clamp(16px, 3vw, 28px); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--teal-50), var(--blush-50));
}
.dev-card--tablet .tablet { width: 100%; }
.dev-card--watch .dev-media { padding-block: 0; }
.dev-card .watch { width: clamp(140px, 13vw, 180px); }
.dev-card .wrist-pair { gap: clamp(20px, 3vw, 36px); }
.dev-copy h3 { font-size: clamp(1.3rem, 2vw, 1.55rem); margin-bottom: 10px; }
.dev-copy p { color: var(--ink-2); }
.dev-copy .ticks { margin: 18px 0 0; }
.dev-copy .wrist-plan { margin-top: 18px; }

@media (max-width: 1040px) {
  .cc-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dev-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 880px) {
  .wrist-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cc-stage { padding: 0; }
  .cc-upright, .cc-float { display: none; }
  .cc-points { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cc-point { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 4px 14px; padding: 18px; }
  .cc-point .cc-ic { grid-row: span 2; }
  .cc-point h3 { margin: 2px 0 0; }
  .tablet { --bezel: 7px; }
}

/* ── the studio's corporate pages (the owner, 2026-10-16: "design the proper 'corporate' website for
   bpnc.app … include FirstCue, but just keep it coming soon") ─────────────────────────────────── */

.btn-light { background: #fff; color: var(--ink); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.6); }
.btn-light:hover { background: var(--cream); color: var(--ink); }

/* the hero's small "next from the studio" chip, pinned to the phone's corner */
.next-chip {
  position: absolute; left: -18%; bottom: 12%; display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 14px; border-radius: 18px; background: var(--night); color: #fff;
  text-decoration: none; box-shadow: var(--shadow-lg);
}
.next-chip small { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--night-muted); }
.next-chip b { display: block; font-family: var(--display); font-size: 1.1rem; line-height: 1.2; }
.next-chip:hover { color: #fff; transform: translateY(-1px); }
.next-chip-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 5px rgba(248, 185, 101, 0.22); flex: none; }

/* our apps: the live one wider, the coming one beside it */
.apps-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.app-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 18px;
  padding: clamp(26px, 3.2vw, 40px); border-radius: var(--radius-lg);
  background: var(--cream); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.app-card p { color: var(--ink-2); }
.app-name { margin: 0; line-height: 1; }
.app-lockup { width: min(300px, 82%); height: auto; }
.app-tagline { font-size: 1.12rem; max-width: 30em; }
.app-status {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  border-radius: 999px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.app-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.app-status--live { background: var(--teal-50); color: var(--teal-ink); box-shadow: inset 0 0 0 1px var(--teal-100); }
.app-status--soon { background: rgba(248, 185, 101, 0.14); color: var(--sun); box-shadow: inset 0 0 0 1px rgba(248, 185, 101, 0.45); }
.app-points { list-style: none; display: grid; gap: 12px; }
.app-points li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink-2); font-weight: 600; }
.app-points .ic { width: 22px; height: 22px; color: var(--teal-ink); margin-top: 1px; }
.app-actions {
  margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
  padding-top: 22px; border-top: 1px solid var(--line);
}

.app-card--soon { background: var(--night); border-color: var(--night-line); color: var(--night-text); }
.app-card--soon p { color: var(--night-muted); }
.app-card--soon .app-actions { border-top-color: var(--night-line); }
.app-card--soon > :not(.soon-orbs) { position: relative; }
.soon-orbs { position: absolute; inset: 0; pointer-events: none; }
.soon-orbs i { position: absolute; border-radius: 50%; filter: blur(46px); opacity: 0.55; }
.soon-orbs i:nth-child(1) { width: 260px; height: 260px; right: -70px; top: -80px; background: var(--teal); }
.soon-orbs i:nth-child(2) { width: 200px; height: 200px; left: -60px; bottom: -70px; background: var(--coral); opacity: 0.4; }
.soon-orbs i:nth-child(3) { width: 150px; height: 150px; right: 30%; bottom: 18%; background: var(--sun); opacity: 0.28; }
.soon-name {
  margin: 0; font-family: var(--display); font-weight: 900; line-height: 1;
  font-size: clamp(2.6rem, 5vw, 3.6rem); letter-spacing: -0.035em; color: #fff;
}
.soon-name span {
  background: linear-gradient(100deg, var(--sun) 10%, var(--coral) 60%, #ffc9bb);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.soon-name--sm { font-size: 2rem; }
/* a veiled preview: shapes of an app, nothing of it */
.soon-veil {
  position: relative; display: grid; gap: 12px; padding: 22px; border-radius: 20px; overflow: hidden;
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
}
.soon-bar { display: block; height: 14px; border-radius: 8px; background: rgba(255, 255, 255, 0.14); }
.soon-bar--a { width: 72%; }
.soon-bar--b { width: 54%; }
.soon-bar--c { width: 86%; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, 0.09); }
.soon-lock { position: absolute; right: 22px; top: 18px; color: var(--sun); }
.soon-veil::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.12) 50%, transparent 80%);
  animation: veil-shine 3.6s ease-in-out infinite;
}
@keyframes veil-shine { 0%, 30% { transform: translateX(-100%); } 70%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .soon-veil::after { animation: none; display: none; } }

/* how we work */
.principles { margin-bottom: clamp(48px, 7vw, 88px); }
.principles .card h3 { margin-top: 18px; }
.studio-craft h2 { margin: 14px 0; }

/* the company facts */
.company-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.company-grid h2 { margin: 14px 0; }
.company-grid .lead { margin-bottom: 20px; }
.company-grid .lead a { color: var(--teal-ink); font-weight: 700; }
.facts { border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.facts > div { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 16px; padding: 18px 24px; border-top: 1px solid var(--line); }
.facts > div:first-child { border-top: 0; }
.facts dt { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.facts dd { margin: 0; font-weight: 700; color: var(--ink); line-height: 1.6; }
.facts dd a { color: var(--teal-ink); }
.facts-note { margin-left: 6px; font-size: 0.82rem; font-weight: 700; color: var(--ink-3); }
.facts--plain { box-shadow: none; background: transparent; border: 0; }
.facts--plain > div { padding-inline: 0; }

/* the legal center */
.page-hero--studio h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); }
.doc-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.doc-group {
  padding: clamp(24px, 2.8vw, 34px); border-radius: var(--radius); background: var(--paper);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.doc-group h2 { font-size: 1.35rem; margin: 14px 0 6px; }
.doc-group > p { color: var(--ink-2); margin-bottom: 12px; }
.doc-group-logo { height: 34px; width: auto; }
.doc-group-logo--studio { height: 40px; }
.doc-group--soon { position: relative; overflow: hidden; background: var(--night); border-color: var(--night-line); color: var(--night-text); }
.doc-group--soon > p { color: var(--night-muted); }
.doc-group--soon > :not(.soon-orbs) { position: relative; }
.doc-group--soon .soon-name { margin-top: 18px; }
.doc-links { list-style: none; }
.doc-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0;
  border-top: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.doc-links b { display: block; font-family: var(--display); font-weight: 800; }
.doc-links small { display: block; font-size: 0.9rem; color: var(--ink-3); }
.doc-links .ic { width: 18px; height: 18px; color: var(--teal-ink); transition: transform 0.15s ease; }
.doc-links a:hover b { color: var(--teal-ink); }
.doc-links a:hover .ic { transform: translateX(3px); }

/* a studio notice, with its related documents beside it */
.legal-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: clamp(28px, 5vw, 64px); align-items: start; }
.legal-related {
  position: sticky; top: 96px; padding: 24px; border-radius: var(--radius);
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.legal-related h2 { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.legal-related ul { list-style: none; margin-bottom: 14px; }
.legal-related li a { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.legal-related li:first-child a { border-top: 0; }
.legal-related .ic { width: 20px; height: 20px; color: var(--teal-ink); margin-top: 2px; }
.legal-related b { display: block; font-weight: 800; }
.legal-related small { display: block; color: var(--ink-3); font-size: 0.88rem; }
.legal-related li a:hover b { color: var(--teal-ink); }

.foot-soon { color: var(--night-muted); }
.foot-soon em { font-style: normal; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; color: var(--sun); box-shadow: inset 0 0 0 1px rgba(248, 185, 101, 0.45); }

@media (max-width: 1040px) {
  .next-chip { left: -6%; }
}
@media (max-width: 880px) {
  .apps-grid, .company-grid, .doc-groups, .legal-layout { grid-template-columns: minmax(0, 1fr); }
  .legal-related { position: static; }
  .next-chip { left: 50%; bottom: -18px; transform: translateX(-50%); white-space: nowrap; }
  .next-chip:hover { transform: translateX(-50%) translateY(-1px); }
}
@media (max-width: 520px) {
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px 18px; }
}

/* PICTURES OF THE APP, SIZED FOR A PHONE (the owner, 2026-10-18: "the image look fine on desktop,
   but on phone they are sized very very big"). On a 390 point screen a phone picture was 230 to 300
   points wide and up to 630 tall, most of a screen each. Here each is about half the screen's width,
   enough to read the app's cards and short enough that the words around it stay in view. Desktop and
   tablets are unchanged. */
@media (max-width: 640px) {
  .phone--md { width: min(200px, 56vw); border-radius: 34px; padding: 7px; }
  .phone--md .shot { border-radius: 28px; }
  .phone--sm, .moment-phone .phone { width: min(168px, 46vw); border-radius: 30px; padding: 6px; }
  .phone--sm .shot { border-radius: 25px; }
  .moments { grid-auto-columns: minmax(48%, 1fr); }
  .phone-stage { width: min(220px, 62vw); margin-inline: auto; }
  .phone-duo { width: min(300px, 84vw); margin-inline: auto; }
  .feature-media--pair .phone, .feat-shots--pair .phone { width: min(150px, 44%); }
  .tablet-shot { max-width: min(320px, 100%); margin-inline: auto; }
}

/* ── THE CLOTHESLINE, BEFORE THE BIRTH, AND THE APP IN TWO MINUTES (2026-10-24) ─────────────────

  The owner, 2026-10-24: "redesign the cuddlecue.com website to adjust to all the new changes we've
  done. more importantly introduce that the app now is available from before birth". The store's
  screenshots and videos all stand on the owner's clothesline drawing; the home page hangs the same
  line across its top (`tools/site/garland.mjs`) and again over the section about the weeks before
  the birth. The headline wears the listing's accent: its second sentence in coral italic with the
  sun's hand-drawn line under it.

  THE CORAL OF THE ACCENT is darker than the brand's coral on purpose: #f8907c is 2.2:1 on the cream,
  and even large text needs 3:1. #c9503a is 4.2:1 on the cream and 4.6:1 on white, still read as
  the listing's coral. */
:root {
  --coral-accent: #c9503a;
  /* the strip is 4834 by 450: at its natural shape it spans the window from about 770 px wide;
     narrower, it keeps its height and shows its left end, where the clothes are */
  --garland-h: clamp(72px, 9.31vw, 200px);
}
.garland {
  position: absolute; top: 0; left: 0; right: 0; height: var(--garland-h); pointer-events: none;
  background: url('/assets/clothesline.webp') left top / auto 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}
/* the second line, turned around so it does not repeat the first's clothes in the same places */
.garland--section { transform: scaleX(-1); }
.hero--line { padding-top: calc(var(--garland-h) * 0.7 + clamp(12px, 2.4vw, 32px)); }

/* two short lines, each on one line where the column allows: the italic black is wider than the
   display's own weight, so the size comes down a step to keep "More time together." whole */
.display--accent { font-size: clamp(2.3rem, 4.3vw, 3.5rem); }
.display--accent > span { display: block; }
.accent {
  position: relative; display: inline-block; font-style: italic; font-weight: 900;
  color: var(--coral-accent); padding-right: 0.06em;
}
.accent-under {
  position: absolute; left: 1%; bottom: -0.16em; width: 98%; height: 0.24em; overflow: visible;
  fill: none; stroke: var(--sun); stroke-width: 3.5; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.h2--accent .accent { font-weight: 900; }

.hero-facts li:first-child { background: var(--coral-50); }
.hero-facts a { color: var(--coral-ink); text-decoration: none; }
.hero-facts a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* the pictures on the floating cards: the drawings of the app's own Getting ready */
.float-pic { width: 40px; height: 40px; }

/* before the birth */
.section--ready {
  position: relative; overflow: hidden;
  padding-top: calc(var(--garland-h) * 0.7 + clamp(28px, 4vw, 56px));
  background:
    radial-gradient(45% 55% at 12% 60%, rgba(248, 185, 101, 0.2), transparent 70%),
    radial-gradient(35% 45% at 92% 30%, rgba(248, 144, 124, 0.14), transparent 70%),
    var(--cream);
  border-block: 1px solid var(--line);
}
.ready-grid {
  position: relative; display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 5vw, 72px); align-items: center;
}
.ready-media { position: relative; display: grid; justify-items: center; min-width: 0; }
.hero-glow--warm { background: radial-gradient(closest-side, rgba(248, 185, 101, 0.34), rgba(248, 185, 101, 0) 72%); }
.ready-media .phone { position: relative; }
.float-card--ready-a { left: -8%; top: -2%; }
.float-card--ready-b { right: -6%; bottom: 18%; animation-delay: 0.25s, 1.4s; }
.ready-copy { min-width: 0; }
.ready-copy h2 { margin: 14px 0 16px; }
.ready-list {
  list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px; margin: 26px 0 20px;
}
.ready-list li {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px 13px 10px;
  border-radius: 18px; background: var(--paper); box-shadow: var(--shadow-sm);
}
.ready-list .pic { width: 52px; height: 52px; }
.ready-list li > span { min-width: 0; }
.ready-list b { display: block; font-family: var(--display); font-weight: 800; color: var(--ink); line-height: 1.25; }
.ready-list b + span { display: block; margin-top: 3px; font-size: 0.92rem; line-height: 1.4; color: var(--ink-2); }
.ready-note {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; padding: 14px 16px;
  border-radius: 16px; background: var(--teal-50); color: var(--ink-2); font-weight: 600;
}
.ready-note b { color: var(--ink); }
.ready-note .ic { color: var(--coral-ink); margin-top: 1px; }

/* the app in two minutes: nothing loads until a visitor presses play */
.film {
  margin: 0 auto; max-width: 980px; border-radius: clamp(16px, 2.4vw, 28px); overflow: hidden;
  background: var(--night); box-shadow: var(--shadow-lg);
}
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--night); }

@media (max-width: 880px) {
  .ready-grid { grid-template-columns: minmax(0, 1fr); }
  .ready-media { order: 1; margin-top: 8px; }
}
@media (max-width: 640px) {
  .ready-list { grid-template-columns: minmax(0, 1fr); }
  .float-card--ready-a { left: -2%; top: 8%; }
  .float-card--ready-b { right: -2%; bottom: 14%; }
  .float-card { max-width: 200px; font-size: 0.8rem; }
  .float-pic { width: 32px; height: 32px; }
}
/* the back phone's card stays over the back phone, clear of the front one's header */
.hero--line .float-card--a { left: -13%; top: 15%; }
@media (max-width: 640px) { .hero--line .float-card--a { left: -4%; top: 6%; } }

/* ── WORDS A TAP AWAY (the owner, 2026-10-24: "it has too many texts ... collapsible section ...
   if they tap it expands with the text ... cleaner the better") ─────────────────────────────────

  `fold` in tools/site/layout.mjs: a details element whose summary is a card's picture and title,
  with a plus that turns into a cross; its words open under it. The summary is at least 44 px tall,
  the size of a finger. Grids that hold folds line their cards up at the top, so one card opening
  does not stretch its neighbors. */
.fold > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary > h3, .fold > summary > b { flex: 1; min-width: 0; margin: 0; }
.fold-ic {
  position: relative; flex: none; width: 26px; height: 26px; margin-left: auto; border-radius: 50%;
  background: var(--teal-50); transition: transform 0.2s ease, background-color 0.2s ease;
}
.fold-ic::before, .fold-ic::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; margin: -1px 0 0 -5.5px;
  border-radius: 1px; background: var(--teal-ink);
}
.fold-ic::after { transform: rotate(90deg); }
.fold[open] > summary .fold-ic { transform: rotate(45deg); background: var(--coral-50); }
.fold > summary:hover .fold-ic { background: var(--teal-100); }
.fold-body { padding-top: 10px; animation: fold-in 0.22s ease-out; }
.fold-body > p { margin: 0; color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; }
@keyframes fold-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* a fold of more words under a section's own text: a quiet pill, "What it covers +" */
.fold--more { margin: 18px 0 6px; }
.fold--more > summary {
  display: inline-flex; min-height: 40px; padding: 6px 8px 6px 16px; border-radius: 999px; gap: 10px;
  background: var(--paper); border: 1px solid var(--line); font-family: var(--display); font-weight: 800;
  font-size: 0.95rem; color: var(--ink);
}
.fold--more > summary .fold-ic { width: 24px; height: 24px; margin-left: 0; }
.fold--more .ticks { margin: 6px 0 4px; }
.fold--more .plan-list { margin-top: 10px; }

/* the cards that hold one */
.feat-list, .ready-list, .real-grid, .cc-points, .steps-3 { align-items: start; }
.feat { display: block; padding: 14px 16px; }
.feat .fold > summary { padding-right: 62px; }
.feat .fold > summary .fold-ic { position: absolute; right: 16px; top: 23px; }
.feat .fold > summary h3 { padding-right: 0; margin-bottom: 0; }
.feat .pic, .feat .pic--icon { width: 44px; height: 44px; border-radius: 14px; }
.feat > .tag { top: 24px; right: 50px; }
.feat .fold-body { padding: 8px 0 4px 56px; }

.ready-list li { display: block; padding: 10px 14px 10px 10px; }
.ready-list .pic { width: 46px; height: 46px; }
.ready-list .fold-body { padding: 4px 0 6px 58px; }
.ready-list .fold-body > p { font-size: 0.92rem; }

.real-card { padding: 16px 18px; }
.real-card .pic, .real-card .pic--icon { width: 48px; height: 48px; }
.real-card .fold > summary h3 { font-size: 1.08rem; }
.real-card .fold-body { padding-left: 60px; }

.moment .fold > summary { align-items: flex-start; }
.moment .fold > summary h3 { margin: 6px 0 0; }
.moment .fold-ic { margin-top: 6px; width: 24px; height: 24px; }

.cc-point { padding: 16px 18px; }
.cc-point .fold > summary h3 { font-size: 1.02rem; color: #fff; }
.cc-point .fold-ic { background: rgba(143, 216, 218, 0.14); }
.cc-point .fold-ic::before, .cc-point .fold-ic::after { background: #8fd8da; }
.cc-point .fold[open] > summary .fold-ic { background: rgba(248, 185, 101, 0.2); }
.cc-point .fold-body { padding-left: 54px; }
.cc-point .fold-body > p { color: var(--night-muted); font-size: 0.94rem; }

.steps-3 li { padding: 22px 24px; }
.steps-3 .fold { margin-top: 14px; }
.steps-3 .fold > summary h3 { font-size: 1.15rem; }

@media print {
  .fold-body { display: block !important; }
  .fold-ic { display: none; }
}

/* GETTING STARTED AS A PATH (the owner, 2026-10-24, of the folded steps: "this is rather ambiguous
   and look disinteresting"): three things to do, each a picture in a soft circle with its number,
   a title that is an action and one line, joined by a dotted line; the stores right under them. */
.steps-path {
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4vw, 48px);
  max-width: 980px; margin: 0 auto; text-align: center;
}
.path-step { position: relative; display: grid; justify-items: center; }
.path-art {
  position: relative; display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--paper), var(--sun-50) 70%);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
}
.path-art .pic { width: 84px; height: 84px; border-radius: 20px; }
.path-art .step-n { position: absolute; left: 2px; top: 6px; }
/* the dotted path from one circle to the next */
.path-step:not(:last-child)::after {
  content: ""; position: absolute; top: 66px; left: calc(50% + 82px); width: calc(100% - 164px + clamp(20px, 4vw, 48px));
  border-top: 3px dotted var(--coral); opacity: 0.55;
}
.path-step h3 { margin: 18px 0 6px; font-size: 1.25rem; }
.path-step p { max-width: 17em; color: var(--ink-2); font-size: 0.98rem; line-height: 1.45; }
.cta--center { justify-content: center; margin-top: clamp(28px, 4vw, 40px); }

@media (max-width: 760px) {
  .steps-path { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .path-step:not(:last-child)::after {
    top: auto; bottom: -30px; left: 50%; width: 0; height: 24px; border-top: 0;
    border-left: 3px dotted var(--coral);
  }
  .path-art { width: 112px; height: 112px; }
  .path-art .pic { width: 72px; height: 72px; }
}

/* SIDE BY SIDE, THE SAME HEIGHT (the owner, 2026-10-24: "can you make the length the same, to make
   it look more proportional"): the cards in a row stretch to the tallest one, open or closed, so
   a row never stands ragged. */
.feat-list, .ready-list, .real-grid, .cc-points { align-items: stretch; }

/* A CENTERED HEAD'S NARROWER LINES SIT IN ITS MIDDLE (the owner, 2026-10-24, of the tablet's
   "Coming in the next update": "should be more center in the middle"). A line given a narrower
   measure than its head (the night's 42em) kept the head's left edge, and so stood left of center. */
.section-head--center > p { margin-inline: auto; text-wrap: balance; }
.section-head--center > .soon { max-width: none; }

/* THE PLAN ON THE CARD'S TOP EDGE (the owner, 2026-10-24, of "Grandparents, nannies and night
   nurses": "the plus icon got overlapped with the text"). In the title's row the tag took the room a
   long title needed; on the card's top edge, like a label, it leaves the whole row to the title. */
.feat-list { row-gap: 26px; }
.feat > .tag { top: 0; right: 18px; transform: translateY(-50%); }
.feat .fold > summary { padding-right: 40px; }

/* THE PRINTABLES, SAME HEIGHT, SAME ROWS (the owner, 2026-10-24: "can we make it same height, same
   rows? just to make it more balanced and look better in the eye"): `resCards` in resources.mjs.
   The picture, the title, the line and the foot stack down the card; the foot is pushed to the
   bottom, so across a row every part sits on the same line. */
.res-cards { align-items: stretch; }
.res-card { flex-direction: column; align-items: flex-start; gap: 0; padding: 26px 26px 22px; }
.res-cards--big .res-card { padding: 30px 30px 24px; }
.res-card .pic { width: 64px; height: 64px; margin-bottom: 16px; }
.res-card > b { font-size: 1.2rem; line-height: 1.25; }
.res-card > .res-text { flex: none; display: block; margin-top: 8px; color: var(--ink-2); font-size: 0.97rem; line-height: 1.5; }
.res-card > .res-foot {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  margin-top: auto; padding-top: 18px;
}
.res-foot .ic { color: var(--teal-ink); transition: transform 0.15s ease; }
.res-card:hover .res-foot .ic { transform: translateX(3px); }

/* the tablet's cards on a phone: the fold is the card's one child now, so it takes the whole row */
@media (max-width: 640px) {
  .cc-point { display: block; padding: 14px 16px; }
}

/* ONE SET OF EDGES FOR EVERY SECTION (the owner, 2026-10-24: "why does the left and right margins
   doesnt match with the upper section, and bottom sections"). A section narrower than the page's
   measure, centered in it, stood in from both edges of the sections around it. Every section now
   spans the measure; long reading text keeps a comfortable line inside it, from the same left edge. */
.faq, .film, .steps-path, .wrist-grid { max-width: none; }
.wrap.faq, .wrap.wrist-grid { max-width: var(--max); }
.faq-a { max-width: 72ch; }
.wrap.legal, .wrap.gpost { max-width: var(--max); }
.wrap.legal > * { max-width: 780px; }
.gpost-body { max-width: 900px; margin-inline: 0; }
/* Free and Plus side by side, the same height (the Plus card carries the preview's line) */
.plans { align-items: stretch; }

/* ── "GET THE APP", AS A SHEET (the owner, 2026-10-24: "make it look super nice and clean") ─────

  `getSheet` in tools/site/layout.mjs, opened by site.js. A card in the middle of a dimmed page on a
  computer, a sheet rising from the bottom on a phone. The app's icon under the clothesline, the
  headline, three reasons, then the one question, with the visitor's own phone marked first. */
html.has-sheet { overflow: hidden; }
.get-sheet {
  width: min(500px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px);
  padding: 0; border: 0; border-radius: 30px; background: transparent; color: var(--ink); overflow: visible;
}
.get-sheet::backdrop { background: rgba(18, 52, 59, 0.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.get-sheet[open] .get-in { animation: sheet-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.get-sheet[open]::backdrop { animation: sheet-dim 0.3s ease-out; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes sheet-dim { from { opacity: 0; } to { opacity: 1; } }
.get-in {
  position: relative; overflow: auto; max-height: calc(100vh - 32px); border-radius: 30px;
  padding: 58px 26px 20px;
  background:
    url('/assets/clothesline.webp') left top / auto 74px no-repeat,
    radial-gradient(120% 60% at 50% 0%, var(--sun-50), var(--paper) 62%);
  box-shadow: var(--shadow-lg);
}
.get-x {
  position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center;
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.92); color: var(--ink); box-shadow: var(--shadow-sm);
}
.get-x:hover { background: var(--paper); }
.get-x .ic { width: 18px; height: 18px; }
.get-top { display: grid; justify-items: center; text-align: center; }
.get-icon { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 10px 24px -8px rgba(18, 52, 59, 0.35); }
.get-top h2 { margin: 14px 0 4px; font-size: clamp(1.6rem, 5vw, 1.9rem); }
.get-line { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.08rem; color: var(--ink); }
.get-line .accent { font-weight: 900; }
.get-why { list-style: none; display: grid; gap: 8px; margin: 20px 0 0; padding: 0; }
.get-why li {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 16px;
  background: var(--cream); font-weight: 700; font-size: 0.97rem; line-height: 1.3; color: var(--ink);
}
.get-why .pic { width: 40px; height: 40px; }
.get-ask {
  margin: 22px 0 10px; text-align: center; font-family: var(--display); font-weight: 900;
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral-ink);
}
.get-stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.get-store {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 12px;
  min-height: 112px; padding: 16px 10px; border-radius: 20px; text-decoration: none;
  background: var(--paper); border: 1.5px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.get-store:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--teal); }
.get-os { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 800; font-size: 1.1rem; color: var(--ink); }
.get-store img { display: block; height: 42px; width: auto; }
.get-yours {
  display: none; padding: 2px 8px; border-radius: 999px; background: var(--teal-ink); color: #fff;
  font-family: var(--sans); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.get-store.is-mine { border-color: var(--teal); background: var(--teal-50); box-shadow: 0 0 0 4px rgba(63, 177, 180, 0.18); }
.get-store.is-mine .get-yours { display: inline-block; }
.get-store--soon { color: var(--ink-3); }
/* a computer: the code its phone's camera reads */
.get-qr { display: none; align-items: center; gap: 14px; margin-top: 14px; padding: 12px; border-radius: 18px; border: 1.5px dashed var(--line-2); }
.get-sheet[data-os='desktop'] .get-qr { display: flex; }
.get-qr img { flex: none; width: 92px; height: 92px; padding: 6px; border-radius: 12px; background: #fff; }
.get-qr p { margin: 0; font-size: 0.92rem; line-height: 1.45; color: var(--ink-2); }
.get-qr b { color: var(--ink); }
.get-fine { margin: 16px 4px 6px; text-align: center; font-size: 0.82rem; line-height: 1.5; color: var(--ink-3); }
.get-sheet .store-marks { display: block; text-align: center; font-size: 0.64rem; line-height: 1.4; color: var(--ink-3); opacity: 0.85; }

/* a phone: a sheet from the bottom edge */
@media (max-width: 560px) {
  .get-sheet { width: 100vw; max-height: 94vh; margin: auto 0 0; border-radius: 28px 28px 0 0; }
  .get-in { max-height: 94vh; border-radius: 28px 28px 0 0; padding: 54px 18px 18px; }
  .get-sheet[open] .get-in { animation: sheet-up 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
  @keyframes sheet-up { from { transform: translateY(40px); opacity: 0.6; } to { transform: none; opacity: 1; } }
  .get-icon { width: 72px; height: 72px; border-radius: 19px; }
  .get-store { min-height: 104px; }
  .get-store img { height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .get-sheet[open] .get-in, .get-sheet[open]::backdrop { animation: none; } }
/* "Your phone" on the tile's top edge, so the phone's name keeps its one line */
.get-stores { padding-top: 8px; }
.get-yours { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; padding: 3px 10px; }

/* THE HOME PAGE'S h1 IS THE LINE UNDER THE HEADLINE (the SEO pass, 2026-10-24): drawn as the lead
   it was, not as a heading */
.hero-copy .hero-lead {
  margin: 0; font-family: var(--sans); font-weight: 400; font-size: clamp(1.06rem, 1.45vw, 1.22rem);
  line-height: 1.6; letter-spacing: normal; color: var(--ink-2); max-width: 36em; text-wrap: pretty;
}

/* ── THE SEARCH PAGES (the SEO pass, 2026-10-24: tools/site/pages/landing.mjs) ───────────────── */
.land-cards {
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  margin: 0; padding: 0; align-items: stretch;
}
.land-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 24px 24px 22px;
  border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.section--tint .land-card { background: var(--paper); }
.land-card .pic, .land-card .pic--icon { width: 56px; height: 56px; }
.land-card h3 { margin: 14px 0 6px; font-size: 1.12rem; line-height: 1.3; }
.land-card p { margin: 0; color: var(--ink-2); font-size: 0.96rem; line-height: 1.5; }
.land-card > .tag { position: absolute; top: 0; right: 18px; transform: translateY(-50%); }
.land-note {
  display: flex; align-items: flex-start; gap: 10px; max-width: 46rem; margin: 28px auto 0; padding: 14px 18px;
  border-radius: 16px; background: var(--teal-50); color: var(--ink-2); font-weight: 600;
}
.land-note b { color: var(--ink); }
.land-note .ic { color: var(--coral-ink); margin-top: 1px; flex: none; }
.page-hero-aside .phone-stage { margin-inline: auto; }
/* a ready-made list's notes, under each line */
.check-note-line { display: block; margin-top: 2px; font-size: 0.86rem; font-weight: 500; color: var(--ink-3); }
.sources { margin-top: 36px; padding: 22px 24px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.sources h2 { font-size: 1.15rem; margin-bottom: 10px; }
.sources ul { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.sources li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 0.95rem; }
.sources li span { color: var(--ink-3); font-size: 0.86rem; }
@media (max-width: 880px) { .land-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .land-cards { grid-template-columns: minmax(0, 1fr); } }
/* two links side by side under a section (the SEO pass, 2026-10-24) */
.more-row { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.more-row--center { justify-content: center; }