/*
  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; }
/* A LINK TO ANOTHER PAGE LOOKS LIKE A BUTTON (the owner, 2026-10-27: "i barely saw the button, you
   need to make it look more like a clickable button"): a soft teal pill, 44 px high, the arrow
   moving on hover. */
.more {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px;
  border-radius: 999px; background: var(--teal-50); box-shadow: inset 0 0 0 1.5px rgba(18, 52, 59, 0.14);
  font-weight: 800; color: var(--teal-ink); text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.more .ic { width: 18px; height: 18px; transition: transform 0.15s ease; }
.more:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); transform: translateY(-1px); }
.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); }
/* FEATURES OPENS ITS TWO PAGES (the owner, 2026-10-27), on a hover or keyboard focus */
.has-sub { position: relative; }
.has-sub > a { display: flex; align-items: center; gap: 4px; }
.nav-caret { width: 16px; height: 16px; transition: transform 0.15s ease; }
.has-sub:hover .nav-caret, .has-sub:focus-within .nav-caret { transform: rotate(180deg); }
.nav-sub {
  position: absolute; left: 50%; top: 100%; z-index: 60; padding-top: 10px;
  transform: translateX(-50%); visibility: hidden; opacity: 0; transition: opacity 0.15s ease, visibility 0.15s;
}
.has-sub:hover .nav-sub, .has-sub:focus-within .nav-sub { visibility: visible; opacity: 1; }
.nav-sub ul {
  list-style: none; width: 280px; padding: 8px; display: grid; gap: 2px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
}
.nav-sub a { display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; }
.nav-sub b { font-size: 0.98rem; color: var(--ink); }
.nav-sub span { font-weight: 500; font-size: 0.86rem; color: var(--ink-2); }
.nav-sub a[aria-current="page"] { 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; }
.mobile-head {
  padding: 12px 14px 4px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-2);
}
.mobile-panel a.mobile-sub { padding-left: 26px; font-weight: 600; }

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

.section { padding-block: clamp(64px, 8.5vw, 112px); }
/* TWO SECTIONS ON THE SAME GROUND READ AS ONE PAGE (the owner, 2026-10-27: "some sections still have
   excess paddings, that make it look disattached like before the video section"): the second keeps
   only a little of its top, since the first's foot already holds the space between them. */
.section:not(.section--tint, .section--night, .section--ready, .section--try, .section--cta)
  + .section:not(.section--tint, .section--night, .section--ready, .section--try, .section--cta) {
  padding-top: clamp(8px, 1.5vw, 16px);
}
.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; }
/* every page opens under the home page's clothesline, on the page's own ground (the owner,
   2026-10-25: "should we have the clothesline on the subpages too?"; `.garland` is drawn with the
   home hero's rules below) */
.page-hero--line { padding-top: calc(var(--garland-h) * 0.7 + clamp(12px, 2.4vw, 32px)); }
.page-hero--line > .wrap { position: relative; z-index: 1; }
.page-hero--line .page-hero-aside > .ck-badge { margin-inline: auto; }
@media (max-width: 640px) { .page-hero--line .page-hero-aside > .ck-badge { display: none; } }
.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 ───────────────────────────────────────────────────────────────── */

/*
  THE PHONE AS THE STORE'S SCREENSHOTS DRAW IT (the owner, 2026-11-07: the store listing is the
  reference for how the screens are displayed; `phone()` in tools/store/screenshots.mjs): a
  titanium body, a bezel of 3% of the width, the glass's corners at 13.5% of the screen's width,
  the volume and action buttons on the left and the side button on the right, and the store's soft
  two-layer shadow. Every size is a share of the phone's own width, so a small phone is the same
  phone, smaller. The status bar and the island are drawn into each screen (`screens.mjs`).
*/
.phone {
  position: relative; width: min(340px, 100%);
  padding: 3%; border-radius: 16% / 7.4%;
  background: linear-gradient(145deg, #3a4448 0%, #1b2124 38%, #0e1214 62%, #2c3438 100%);
  box-shadow:
    0 34px 60px -30px rgba(18, 52, 59, 0.55),
    0 8px 18px -6px rgba(18, 52, 59, 0.22),
    inset 0 0 0 1.2px rgba(255, 255, 255, 0.12);
}
/* the action button and the two volume buttons on the left */
.phone::before {
  content: ""; position: absolute; left: -1%; top: 19%; width: 1.5%; height: 27%; border-radius: 2px 0 0 2px;
  background: linear-gradient(
    180deg,
    #2c3438 0 17%, transparent 17% 30%, #2c3438 30% 61%, transparent 61% 69%, #2c3438 69% 100%
  );
  pointer-events: none;
}
/* the side button on the right */
.phone::after {
  content: ""; position: absolute; right: -1%; top: 29%; width: 1.5%; height: 13%; border-radius: 0 2px 2px 0;
  background: #2c3438; pointer-events: none;
}
.phone--md { width: min(300px, 100%); }
.phone--sm { width: min(250px, 100%); }
.shot {
  display: block; width: 100%; height: auto; aspect-ratio: 390 / 844;
  border-radius: 13.5% / 6.25%; background: #f4f0fb; object-fit: cover;
}
.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); }
/* THE FREE AND PLUS TABLE FITS A PHONE (the website review, 2026-11-10: at 560 px wide its tick
   columns were off a 390 px screen). Two narrow tick columns and a wrapping name column fit with
   no sideways scroll; the app comparison keeps its own scroll, as it has seven columns. */
@media (max-width: 600px) {
  .compare:not(.compare--apps) { min-width: 0; table-layout: fixed; }
  .compare:not(.compare--apps) th, .compare:not(.compare--apps) td { padding: 12px 10px; }
  .compare:not(.compare--apps) thead th:not(:first-child), .compare:not(.compare--apps) td { width: 76px; }
  .compare:not(.compare--apps) tbody th { font-size: 0.92rem; overflow-wrap: anywhere; }
  .compare:not(.compare--apps) .cell-note { font-size: 0.78rem; }
}
/* THE OUTLOOK AGAINST SWEETSPOT (the sleep outlook page, 2026-11-10): two columns of words, not
   ticks, so they read left-aligned and share the width; on a phone the row's name sits above its two
   answers' columns rather than squeezing a third. */
.compare.compare--two { table-layout: fixed; }
.compare.compare--two thead th:not(:first-child), .compare.compare--two td {
  text-align: left; width: auto; vertical-align: top; font-size: 0.95rem; line-height: 1.45;
}
.compare.compare--two tbody th { width: 26%; vertical-align: top; }
.compare.compare--two td:nth-child(2) { color: var(--ink); font-weight: 600; }
@media (max-width: 600px) {
  .compare.compare--two thead th:not(:first-child), .compare.compare--two td { width: auto; font-size: 0.86rem; }
  .compare.compare--two tbody th { width: 30%; font-size: 0.86rem; }
}
.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); }
.rights--why li { font-weight: 400; background: var(--paper); }
.rights--why .ic { flex: none; margin-top: 2px; }
.rights--why b { display: block; font-family: var(--display); font-weight: 800; color: var(--ink); line-height: 1.3; }
.rights--why b + span { display: block; margin-top: 3px; font-size: 0.94rem; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 640px) { .rights--why { grid-template-columns: minmax(0, 1fr); } }
.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; }
/* every activity in one card (the owner, 2026-10-25: "put all activities in a single major
   category that explains it when the + is added"): its name, its pictures in a row, and a line on
   each under the plus, two columns where there is room. The card takes a whole row. */
.feat--group, .feat--group + .feat:last-child { grid-column: 1 / -1; }
.feat--group > .fold { flex: 1; min-width: 0; }
.feat-group-name { flex: 1; min-width: 0; display: grid; gap: 12px; }
.feat-group-name h3 { margin: 0; }
.feat-pics { display: flex; flex-wrap: wrap; gap: 6px; }
.feat .feat-pics .pic { width: 36px; height: 36px; border-radius: 12px; }
/* open, each picture stands beside its own line, so the row would only say them twice */
.feat--group .fold[open] .feat-pics { display: none; }
.feat-sub { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin-top: 8px; }
.feat-sub > li { display: flex; gap: 12px; align-items: flex-start; }
.feat .feat-sub .pic { flex: none; width: 40px; height: 40px; border-radius: 12px; }
.feat-sub b { font-family: var(--display); font-size: 0.98rem; color: var(--ink); }
.feat-sub .tag { margin-left: 6px; vertical-align: 2px; }
.feat-sub p { margin: 2px 0 0; font-size: 0.9rem; }
@media (max-width: 640px) { .feat-sub { grid-template-columns: minmax(0, 1fr); } }

/* ── 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);
}

/* ── 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;
}

/* ── 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%); }
  .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 .garland, .page-hero .ck-badge { display: none !important; }
  .page-hero--line { padding-top: 0; }
  .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); background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.22); }
.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; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.22); }
.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);
  /* the store's own body and shadow (`tablet()` in tools/store/screenshots.mjs, 2026-11-07) */
  background: linear-gradient(145deg, #3a4448 0%, #1b2124 38%, #0e1214 62%, #2c3438 100%);
  box-shadow:
    0 40px 80px -36px rgba(18, 52, 59, 0.6),
    0 10px 22px -8px rgba(18, 52, 59, 0.24),
    inset 0 0 0 1.2px rgba(255, 255, 255, 0.12);
}
.tablet::before {
  content: ""; position: absolute; left: 50%; top: calc(var(--bezel) / 2 - 2.5px);
  width: 5px; height: 5px; border-radius: 50%; background: #05080a;
  box-shadow: inset 0 0 0 1px #2a3236; 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); }
  .phone--sm, .moment-phone .phone { width: min(168px, 46vw); }
  .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`), once: the section about the weeks before the birth
  had a second, and the owner (same day) saw two lines one above the other that "look similar". 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);
}
.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;
  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); }

/* 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); }
/* an upright video (Getting ready, on /before-the-birth/): a phone's shape, never wider than one,
   centered; it keeps that width past the full-measure rule below, as a phone picture does */
.film.film--tall { max-width: 380px; }
.film--tall video { aspect-ratio: 9 / 16; }
/* the getting-ready video: lying down on a computer, upright on a phone (2026-10-27) */
.film.film--wide { max-width: 1040px; margin-inline: auto; }
.film--wide video { aspect-ratio: 16 / 9; }
.film--tall { display: none; }
@media (max-width: 760px) {
  .film--wide { display: none; }
  .film--tall { display: block; }
}

/* the sleep outlook on the home page: the getting-ready section's frame, mirrored, in the night's
   lavender rather than the morning's amber, its three lines one under another */
.section--outlook {
  background:
    radial-gradient(45% 55% at 88% 55%, rgba(167, 139, 250, 0.18), transparent 70%),
    radial-gradient(35% 45% at 8% 30%, rgba(125, 196, 228, 0.14), transparent 70%),
    var(--cream);
}
.ready-grid--flip { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); }
.section--outlook .ready-list { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.section--outlook .float-card--ready-a { left: -12%; top: 8%; }
@media (max-width: 640px) { .section--outlook .float-card--ready-a { left: 0; top: 2%; } }
@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); }
  /* below the screen's title ("Hospital bag", "Edit item"), so the picture still says what it is */
  .float-card--ready-a { left: -2%; top: 40%; }
  .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; }
.feat--group .fold-body { padding-left: 0; }

.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); }

/* 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; }

/* ── THE HOME PAGE, TRIMMED (the owner, 2026-10-24: "the main page shows too much things. we need
  to make it simpler and less the better") ───────────────────────────────────────────────────────

  Less room after the film; the shared day's row gets arrows and a count where it scrolls sideways
  ("should we add an arrow so user knows to slide?"); the closing band carries the links to what
  left the page; and the two stores' badges wear the same corners ("it bothers me a little how the
  google play and app store badge have different radius"). Apple's badge is drawn the rounder, so
  Google's is clipped to Apple's corner and its hairline drawn again along the curve. */
.section--film { padding-bottom: clamp(28px, 4vw, 48px); }

.slider-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.slider-nav[hidden] { display: none; }
.slider-btn {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--line-2); border-radius: 50%; background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow-sm); cursor: pointer;
}
.slider-btn:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.slider-btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.slider-ic--back { transform: rotate(180deg); }
.slider-count {
  min-width: 64px; color: var(--ink-2); font-size: 0.92rem; font-weight: 800; text-align: center;
  font-variant-numeric: tabular-nums;
}

.section--cta .more-row { margin-top: 18px; }
.hero-facts li + li a { color: inherit; }

.store-badge { border-radius: 8.5px; }
.store-badge--play { position: relative; overflow: hidden; }
.store-badge--play::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px #a6a6a6; pointer-events: none;
}
/* the pop-up's badges, the same way: Google's own margin taken back so both stand the same height,
   and both on Apple's corner (8.5 px at 48 px tall, so a sixth of a badge's height less a little) */
.get-store { --bh: 42px; }
.get-store img { height: var(--bh); }
.get-badge { display: block; line-height: 0; border-radius: calc(var(--bh) * 0.177); }
.get-badge--play { position: relative; overflow: hidden; }
.get-badge--play img { height: calc(var(--bh) * 1.5); max-width: none; margin: calc(var(--bh) * -0.25); }
.get-badge--play::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px #a6a6a6; pointer-events: none;
}
@media (max-width: 560px) {
  .get-store { --bh: 38px; }
}

/* ── GETTING READY, TWO TO A ROW ON A PHONE (the owner, 2026-10-24: "Can this on mobile phone show in
  2 columns like in PC? It's rather too long") ──────────────────────────────────────────────────

  Each card stands its picture over its name, with the plus beside the picture, so a two-word name
  keeps its width in half a phone's screen. */
@media (max-width: 640px) {
  .ready-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ready-list li { padding: 10px 10px 12px 12px; }
  .ready-list .fold > summary {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'pic ic' 'name name';
    align-items: start; gap: 6px 8px;
  }
  .ready-list .fold > summary .pic { grid-area: pic; width: 44px; height: 44px; }
  .ready-list .fold > summary > b { grid-area: name; font-size: 0.98rem; }
  .ready-list .fold > summary .fold-ic { grid-area: ic; width: 30px; height: 30px; margin: 0; }
  .ready-list .fold-body { padding: 6px 0 2px; }
  .ready-list .fold-body > p { font-size: 0.88rem; }
}

/* ── THE HOME PAGE'S FOOTER ON A PHONE (the owner, 2026-10-24: "Footer for mobile version is too
  long because it's listed per row. Can we cut them all only from mobile first page except for the
  logo and grown with yours line?") ────────────────────────────────────────────────────────────

  The logo and the tagline, then the small print: the copyright, the line that the app gives no
  medical advice, the stores' trademark lines for the badges on the page, and the two legal links.
  The link columns and the footer's badges stay on every other page, and on a computer. */
@media (max-width: 640px) {
  body.home .foot-col, body.home .foot-brand .store-badges { display: none; }
  body.home .foot-grid { grid-template-columns: minmax(0, 1fr); }
  body.home .foot-brand { justify-items: center; gap: 10px; text-align: center; }
  body.home .foot-bottom { justify-items: center; margin-top: 24px; text-align: center; }
  body.home .foot-legal { justify-content: center; }
}

/* ── THE FOOTER, AS APP SITES KEEP IT (the owner, 2026-10-24: "just make one list consists of the
  actual pages", then "are you sure this is optimized? make it industry standard") ───────────────

  The brand, then three even columns (Product, Help, Company) on a computer; on a tablet the brand
  above the three; on a phone Product and Help side by side and Company across. Under them one quiet
  row: the copyright, the legal pages as inline links, and the line that the app gives no medical
  advice. */
.foot-grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px 40px; }
.foot-bottom {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 32px;
}
.foot-copy { white-space: nowrap; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 22px; }
.site-foot .foot-legal a { color: var(--night-muted); }
.site-foot .foot-legal a:hover { color: #fff; }
.foot-note { grid-column: 1 / -1; color: var(--night-muted); font-size: 0.8rem; }
@media (max-width: 1040px) {
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .foot-bottom { grid-template-columns: minmax(0, 1fr); }
  .foot-legal { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .foot-col:last-child { grid-column: 1 / -1; }
  .foot-col:last-child ul { display: flex; flex-wrap: wrap; gap: 10px 24px; }
  .foot-legal { gap: 0 20px; }
  .foot-legal a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Features: the first cards under a group's words, beside its phones (the owner, 2026-10-25: "the
   points can be underneath the plan the day your way, because there is still empty space there";
   `features.mjs` `besideCount`). The phones stand centered against the words and those cards; on a
   phone the order is the words, the phones, then the cards. */
.feat-group-head--beside {
  grid-template-areas: "copy shots" "beside shots"; grid-template-rows: auto 1fr;
  align-items: start; row-gap: 26px;
}
.feat-group-head--beside > .feat-copy { grid-area: copy; }
.feat-group-head--beside > .feat-shots { grid-area: shots; align-self: center; }
.feat-group-head--beside > .feat-list--beside { grid-area: beside; }
.feat-group-head:last-child { margin-bottom: 0; }
.feat-list--beside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feat-list--beside > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 880px) {
  .feat-group-head--beside { grid-template-areas: "copy" "shots" "beside"; grid-template-rows: auto; }
}
@media (max-width: 640px) {
  .feat-list--beside { grid-template-columns: minmax(0, 1fr); }
}

/* ROOM TO WRITE, ON PAPER (`resources.mjs` `writeIns`, 2026-10-25): empty boxes for the family's own
   things and ruled lines for notes, under a getting-ready list. Paper only: on the page the app is
   where a family adds its own lines. */
.print-only { display: none; }
@media print {
  .print-only { display: block; }
  .write-ins-head { display: block; font-size: 11pt; margin-bottom: 1.5mm; color: var(--ink); }
  .check-blanks li { display: flex; align-items: flex-end; gap: 2mm; min-height: 7mm; }
  .blank-box { flex: none; width: 3.4mm; height: 3.4mm; margin-bottom: 0.6mm; border: 0.3mm solid #7a8f93; border-radius: 0.8mm; }
  .blank-line { flex: 1; border-bottom: 0.25mm solid #9aabae; }
  .note-lines { display: block; }
  .note-lines span { display: block; height: 7.5mm; border-bottom: 0.25mm solid #9aabae; }
}

/* ── THE CHECKLISTS IN THE DESIGNER'S LOOK (the owner, 2026-10-25: "weve decided to design the
   checklist this way … then it should ultimately be the same in the web too"). The pins' colors
   (`tools/site/checklist-look.mjs` `LOOK`), the pill, the badge and the two cards, under the home
   page's own clothesline (`.garland`; the owner, the same day: "why did you change the clothesline
   design from what we have in the main menu? … we already have a nice design that we agreed and
   used"), on the page's own ground. ──────────────────────────────────────────────────────────── */
.ck-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--garland-h) * 0.7 + clamp(12px, 2.4vw, 32px)) 0 clamp(48px, 6vw, 80px);
}
.ck-hero-grid {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 56px); align-items: center;
}
.ck-hero h1 {
  margin: 10px 0 18px; font-size: clamp(2.3rem, 5.6vw, 4.2rem); line-height: 1.04; letter-spacing: -0.02em;
  color: #12343b; text-wrap: balance;
}
.ck-hero h1 em { position: relative; z-index: 0; font-style: normal; color: #ee8a74; white-space: nowrap; }
.ck-hero h1 em::after {
  content: ""; position: absolute; z-index: -1; left: -2px; right: -6px; bottom: -0.06em; height: 0.16em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M4 13 C 60 7, 140 6, 196 9' fill='none' stroke='%23f8c978' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.ck-pill {
  display: inline-flex; align-items: center; min-height: 48px; margin: 0 0 18px; padding: 8px 22px;
  border-radius: 999px; background: #fff; box-shadow: 0 6px 16px -10px rgba(18, 52, 59, 0.35);
  font-family: var(--display); font-weight: 800; font-size: clamp(1rem, 1.8vw, 1.2rem); color: #3d6b70;
}
.ck-hero .lead { max-width: 38em; }
.ck-badge {
  position: relative; display: grid; place-items: center; width: clamp(150px, 18vw, 220px); aspect-ratio: 1;
  border-radius: 50%; background: #fff; box-shadow: 0 18px 36px -22px rgba(18, 52, 59, 0.35);
}
.ck-badge::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; border: 2.5px dashed #f2c6b6; }
.ck-badge .ck-badge-pic { position: relative; width: 66%; height: auto; }

/* the cards on the cream, the pins' two columns */
.section--checklist { padding-top: 0; }
.section--checklist .callout { background: #fffefb; border-color: #e8e0d4; }
.ck-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); align-items: stretch; margin-top: 34px; }
.ck-card {
  --ck-head: #dff1ee; --ck-ink: #2d7b78; --ck-box: #86c9c4; --ck-tape: #c8e9e3; --ck-tape2: #e4f4f1; --ck-sub: #eef7f5;
  position: relative; padding: 14px 14px 34px; border-radius: 30px; background: #fffefb;
  border: 1.5px solid #e8e0d4; box-shadow: 0 22px 44px -30px rgba(18, 52, 59, 0.35);
}
.ck-card--coral { --ck-head: #fce5dc; --ck-ink: #c2654f; --ck-box: #f2ae9c; --ck-tape: #fad9ce; --ck-tape2: #fdeee8; --ck-sub: #fdf0ea; }
.ck-tape {
  position: absolute; top: -18px; left: 24px; width: 112px; height: 36px; border-radius: 3px; transform: rotate(-4deg);
  background: repeating-linear-gradient(135deg, var(--ck-tape) 0 9px, var(--ck-tape2) 9px 18px);
}
.ck-card--coral .ck-tape { left: auto; right: 24px; transform: rotate(4deg); }
.ck-card .check-group { padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; }
.ck-card .check-group + .check-group { margin-top: 18px; }
.ck-card .check-group legend { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: inherit; }
.ck-head {
  display: flex; align-items: center; gap: 12px; flex: 1; min-height: 60px; padding: 0 20px; border-radius: 20px;
  background: var(--ck-head); color: var(--ck-ink); font-family: var(--display); font-weight: 800; font-size: 1.35rem;
}
.ck-head svg { flex: none; }
.ck-sub {
  display: inline-block; margin-left: 10px; padding: 6px 16px; border-radius: 999px; background: var(--ck-sub);
  color: var(--ck-ink); font-family: var(--display); font-weight: 800; font-size: 1.02rem;
}
.ck-card .check-count { margin-left: 0; color: var(--ck-ink); opacity: 0.8; white-space: nowrap; }
.ck-head + .check-count { position: absolute; right: 34px; margin-top: 0; }
.ck-card legend:has(.ck-head) { position: relative; }
.ck-card .check-note { margin: 4px 18px 6px; }
.ck-card .check-items { display: block; padding: 0 12px; }
.ck-card .check-items li { border-bottom: 2px dotted #ede5da; }
.ck-card .check-items li:last-child { border-bottom: 0; }
.ck-card .check-items label { gap: 14px; min-height: 52px; padding: 9px 6px; border-radius: 10px; font-weight: 500; color: #2a4752; font-size: 1.04rem; }
.ck-card .check-items label:hover { background: transparent; }
.ck-card .check-items label:hover input { border-color: var(--ck-ink); }
.ck-card .check-items input {
  appearance: none; -webkit-appearance: none; display: grid; place-items: center; width: 28px; height: 28px; margin: 0;
  border: 2.5px solid var(--ck-box); border-radius: 8px; background: #fff; transition: background 0.15s ease, border-color 0.15s ease;
}
.ck-card .check-items input::after {
  content: ""; width: 8px; height: 14px; margin-top: -3px; border: solid #fff; border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(0); transition: transform 0.15s ease;
}
.ck-card .check-items input:checked { background: var(--ck-box); border-color: var(--ck-box); }
.ck-card .check-items input:checked::after { transform: rotate(45deg) scale(1); }
.ck-card .check-items input:focus-visible { outline: 3px solid var(--ck-ink); outline-offset: 2px; }
.ck-card .check-items input:checked + span { text-decoration-color: var(--ck-box); }
.ck-sticker { position: absolute; bottom: -22px; left: -24px; width: 84px; transform: rotate(-8deg); pointer-events: none; }
.ck-card--coral .ck-sticker { left: auto; right: -24px; transform: rotate(8deg); }
.ck-sticker .pic { width: 100%; height: auto; }
.ck-end { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 56px); }
.ck-button {
  display: inline-flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 38px; border: 0; border-radius: 999px;
  background: #f2957f; box-shadow: 0 8px 0 #e07f69, 0 22px 36px -18px rgba(224, 127, 105, 0.6); color: #fff;
  font-family: var(--display); font-weight: 900; font-size: 1.35rem; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ck-button:hover { transform: translateY(-1px); }
.ck-button:active { transform: translateY(6px); box-shadow: 0 2px 0 #e07f69; }
.ck-button .ic { width: 24px; height: 24px; fill: #fff; }
@media (max-width: 860px) {
  .ck-cols { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 640px) {
  /* a phone keeps the words and the clothesline; the badge is the pin's ornament, and has no room */
  .ck-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .ck-badge { display: none; }
  .ck-pill { font-size: 0.98rem; border-radius: 24px; }
  .ck-head { font-size: 1.2rem; min-height: 54px; }
  .ck-card .check-items label { font-size: 1rem; }
  .ck-sticker { width: 66px; left: -12px; }
  .ck-card--coral .ck-sticker { right: -12px; }
}
/* a card of short names runs them in columns (the first foods, `cols` in `checklist-look.mjs`) */
.ck-card[style*="--ck-cols"] .check-items { display: grid; grid-template-columns: repeat(var(--ck-cols), minmax(0, 1fr)); column-gap: 18px; }
.ck-card[style*="--ck-cols"] .check-items li:last-child { border-bottom: 2px dotted #ede5da; }

/* ON PAPER THE SHEET IS THE PIN, ON ONE PAGE (the owner, 2026-10-25, of the printed hospital bag:
   "is showing in 2 pages, can we have it in one page and the design to be similar with our standard
   design? should be applied to all"). The peach band runs to the paper's edges with the clothesline
   across it, the logo over the title, the coral word on its yellow stroke, the pill and the badge;
   then the two taped cards with their drawings, the room to write, and the address it came from.
   How tight the lines sit follows the longest card (`data-print` on the cards, `resources.mjs`):
   the hospital bag's 57 lines fit one sheet on Letter and on A4. */
@media print {
  /* a sheet of its own with no margin, so the clothesline reaches the paper's edges (a browser
     clips what runs into a page's margin); the list keeps its own margin inside it */
  @page checklist { margin: 0; background: #faf7f0; }
  body.print-sheet:has(.ck-hero) { page: checklist; }
  .section--checklist .wrap { padding: 0 11mm 6mm; }
  .ck-end, .ck-hero .crumbs, .ck-hero .eyebrow, .ck-hero .cta, .ck-hero .lead { display: none !important; }
  .ck-hero { margin: 0; padding: 15mm 0 2.5mm; background: none; }
  .ck-hero .garland { height: 20mm; -webkit-mask-image: none; mask-image: none; }
  .ck-hero .wrap { padding: 0 13mm; }
  .ck-hero-grid { gap: 6mm; }
  .ck-print-logo { width: auto; height: 6mm; margin: 0 0 1mm; }
  .ck-hero h1 { margin: 0 0 2mm; font-size: 23pt; line-height: 1.05; }
  .ck-pill { min-height: 0; margin: 0; padding: 1.4mm 4.5mm; font-size: 10pt; box-shadow: none; border: 0.3mm solid #f1dfd4; }
  .ck-badge { width: 25mm; box-shadow: none; border: 0.3mm solid #f1dfd4; }
  .ck-badge::before { border-width: 0.45mm; }

  .section--checklist { background: none; }
  .section--checklist .callout { margin-bottom: 0; padding: 1.8mm 3.5mm; font-size: 7.6pt; line-height: 1.35; }
  .section--checklist .callout .ic-lg { width: 4.5mm; height: 4.5mm; }
  .ck-cols { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 5mm; margin-top: 4.8mm; }
  .ck-card { padding: 2.5mm 2.5mm 4mm; border-radius: 4.5mm; border-width: 0.3mm; box-shadow: none; break-inside: avoid; }
  .ck-tape { top: -2.6mm; left: 5mm; width: 19mm; height: 5mm; border-radius: 0.6mm;
    background: repeating-linear-gradient(135deg, var(--ck-tape) 0 1.6mm, var(--ck-tape2) 1.6mm 3.2mm); }
  .ck-card--coral .ck-tape { right: 5mm; }
  .ck-sticker { bottom: -3mm; left: -3mm; width: 12mm; }
  .ck-card--coral .ck-sticker { right: -3mm; }
  .ck-card .check-group + .check-group { margin-top: 2mm; }
  .ck-card .check-group legend { margin-bottom: 0.8mm; gap: 2mm; }
  .ck-head { min-height: 0; padding: 1.6mm 3mm; border-radius: 3mm; font-size: 11pt; gap: 2mm; }
  .ck-head svg { width: 4.6mm; height: 4.6mm; }
  .ck-sub { padding: 0.6mm 2.6mm; font-size: 9pt; margin-left: 1mm; }
  .ck-card .check-note { margin: 0.5mm 2mm 1mm; font-size: 7.8pt; }
  .ck-card .check-items { padding: 0 1.5mm; }
  .ck-card .check-items li { border-bottom-width: 0.3mm; }
  .ck-card[style*="--ck-cols"] .check-items { column-gap: 4mm; }
  .ck-card[style*="--ck-cols"] .check-items li:last-child { border-bottom-width: 0.3mm; }
  .ck-card .check-items label { min-height: 0; padding: 1mm 0.5mm; gap: 2.2mm; font-size: 9.4pt; line-height: 1.25; }
  .ck-card .check-items input { width: 3.6mm; height: 3.6mm; border-width: 0.35mm; border-radius: 0.9mm; }
  .ck-card .check-items input::after { display: none; }
  .ck-cols[data-print="dense"] .check-items label { padding: 0.2mm 0.5mm; font-size: 8.3pt; line-height: 1.18; }
  .ck-cols[data-print="dense"] .ck-head { padding: 1.2mm 3mm; font-size: 10.5pt; }
  .ck-cols[data-print="dense"] .ck-sub { padding: 0.4mm 2.4mm; font-size: 8.4pt; }
  /* the longest list keeps less room to write, so the whole of it stays on one sheet */
  .ck-cols[data-print="dense"] ~ .write-ins .check-blanks li:nth-child(n + 5),
  .ck-cols[data-print="dense"] ~ .write-ins .note-lines span:nth-child(n + 4) { display: none; }
  .ck-cols[data-print="dense"] .check-items input { width: 3.1mm; height: 3.1mm; }
  .ck-cols[data-print="dense"] .ck-card .check-items li { border-bottom-width: 0.25mm; }
  .ck-cols[data-print="dense"] .ck-card .check-group + .check-group { margin-top: 1.4mm; }
  .ck-cols[data-print="roomy"] .check-items label { padding: 2.2mm 1mm; font-size: 11pt; }
  .ck-cols[data-print="roomy"] .check-items input { width: 4.4mm; height: 4.4mm; }
  .ck-cols[data-print="roomy"] .ck-head { padding: 2.4mm 3.5mm; font-size: 12.5pt; }

  /* the room to write: two cards side by side under the list */
  .section--checklist .write-ins { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5mm; margin-top: 3mm; }
  .write-ins .check-group { padding: 2.5mm 4mm 3mm; border: 0.3mm solid #e8e0d4; border-radius: 4.5mm; background: #fffefb; }
  .write-ins-head { font-family: var(--display); font-weight: 800; font-size: 10pt; margin-bottom: 0.5mm; }
  .write-ins .check-blanks { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .write-ins .check-blanks li { min-height: 6.5mm; }
  .write-ins .note-lines span { height: 6.5mm; }
  .ck-print-foot { margin: 2.5mm 0 0; text-align: center; font-size: 8pt; font-weight: 700; color: var(--ink-3); }
}

/* AFTER THE BIRTH, MODULE BY MODULE (2026-10-27): a module's second screen and its cards sit close
   under its first row */
.module .feature-row + .feature-row { margin-top: clamp(40px, 6vw, 72px); }
.module .land-cards { margin-top: clamp(36px, 5vw, 56px); }
.module .more-row { margin-top: 28px; }

/* THE DOWNLOAD PAGE ON A COMPUTER (the owner, 2026-10-27: "get cuddlecue site should look nice"):
   the sheet's pieces laid out wide, the app at the right with the code a phone reads */
.get-page { position: relative; overflow: hidden; padding-bottom: clamp(56px, 8vw, 104px); }
.get-page > .wrap { position: relative; z-index: 1; }
.get-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(36px, 6vw, 88px); align-items: center;
}
.get-copy { max-width: 520px; }
.get-copy .get-icon { width: 76px; height: 76px; }
.get-copy h1 { margin: 22px 0 6px; font-size: clamp(2.4rem, 5vw, 3.6rem); }
.get-copy .get-line { font-size: clamp(1.2rem, 2vw, 1.45rem); }
.get-copy .get-why { margin-top: 26px; }
.get-copy .get-ask { text-align: left; }
.get-copy .get-fine { text-align: left; margin-top: 14px; }
.get-more { margin-top: 22px; }
.get-side { position: relative; display: grid; justify-items: center; }
.get-phones { display: flex; justify-content: center; }
.get-phones .phone { width: min(240px, 44%); }
.get-phones .phone:first-child { transform: rotate(-5deg) translate(18px, 26px); z-index: 1; }
.get-phones .phone:last-child { transform: rotate(4deg) translateX(-18px); z-index: 2; }
.get-side .get-qr {
  display: flex; position: relative; z-index: 3; margin-top: -54px; max-width: 360px;
  background: var(--paper); border-style: solid; border-color: var(--line); box-shadow: var(--shadow);
}
@media (max-width: 900px) {
  .get-grid { grid-template-columns: minmax(0, 1fr); }
  .get-copy { max-width: none; }
  .get-side .get-qr { display: none; }
}

/* ── A SECTION'S HIGHLIGHTS, WITHOUT A WALL OF BOXES (the owner, 2026-11-07: "showing these many
   boxes (more than 6) is just not right … not to be so 'basic'"; `layout.mjs` `highlights`) ───────
   A few, each its drawing, its name and one line on the paper itself, then a quiet "Show all" that
   opens the rest as a list of names. Two across beside a picture, as many as fit on their own. */
.hl { margin-top: clamp(22px, 2.6vw, 32px); }
.hl-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(18px, 2.2vw, 26px) clamp(20px, 2.6vw, 34px);
}
.hl-item { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; }
.hl-art .pic, .hl-art .pic--icon { width: 52px; height: 52px; }
.hl-art .pic--icon { border-radius: 16px; }
.hl-art .pic--icon .ic { width: 24px; height: 24px; }
.hl-words h3 {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  font-size: 1.04rem; line-height: 1.3; margin-top: 4px;
}
.hl-words h3 .plus-chip, .hl-rest .plus-chip { height: 1.15rem; }
.hl-words .tag, .hl-rest .tag { padding: 0; background: none; box-shadow: none; }
.hl-words p { margin: 5px 0 0; color: var(--ink-2); font-size: 0.94rem; line-height: 1.5; }
.hl-more { margin-top: clamp(18px, 2vw, 24px); border-top: 1px solid var(--line); padding-top: 14px; }
.hl-more > summary {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none;
  font-weight: 800; color: var(--coral-ink);
}
.hl-more > summary::-webkit-details-marker { display: none; }
.hl-more[open] > summary .fold-ic { transform: rotate(45deg); }
.hl-rest {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px 28px;
  animation: fold-in 0.2s ease;
}
.hl-rest li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; }
.hl-rest-art .pic, .hl-rest-art .pic--icon { width: 30px; height: 30px; border-radius: 10px; }
.hl-rest-art .pic--icon .ic { width: 16px; height: 16px; }
.hl-rest b { font-size: 0.95rem; }
.hl-rest li span:last-child { display: block; color: var(--ink-3); font-size: 0.88rem; line-height: 1.45; margin-top: 2px; }
.hl-rest .tag { margin-left: 6px; }
@media (prefers-reduced-motion: reduce) { .hl-rest { animation: none; } }

/* Features: each group its phones beside its words, the phones changing sides */
.feat-row {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 80px); align-items: center;
}
.feat-row--flip .feat-media { order: 2; }
.feat-row--flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.feat-row--solo { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.feat-media { display: flex; justify-content: center; }
.feat-more { margin-top: 22px; }
@media (max-width: 880px) {
  .feat-row, .feat-row--flip { grid-template-columns: minmax(0, 1fr); }
  .feat-row--flip .feat-media { order: 0; }
  .feat-media { gap: 14px; }
}
.feat-media .phone { width: min(260px, 100%); }
.feat-media .phone + .phone { margin-top: 48px; }
/* the words beside a picture keep their width, whichever side the picture is on */
.feature-row--reverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
@media (max-width: 880px) {
  .feature-row--reverse { grid-template-columns: minmax(0, 1fr); }
  .feat-media .phone { width: min(200px, 46%); }
  .feat-media .phone + .phone { margin-top: 28px; }
}

/* The sister app's strip on the home page (2026-11-08): one quiet row to the shared page */
.sibling{padding:0 0 56px}
.sibling-row{display:flex;align-items:center;gap:16px;border-radius:22px;background:#e5f2dc;padding:16px 20px;text-decoration:none;color:#12343b;box-shadow:0 0 0 1.5px #d3e7c6}
.sibling-row img{width:56px;height:56px;border-radius:15px;flex:none}
.sibling-row span{font-size:1rem;line-height:1.4}
.sibling-row b{font-weight:800}
.sibling-go{margin-left:auto;white-space:nowrap;font-weight:800;color:#3a7d18;display:inline-flex;align-items:center;gap:6px}
.sibling-go svg{width:18px;height:18px}
@media (max-width:640px){.sibling-row{flex-wrap:wrap}.sibling-go{margin-left:72px}}

/* How to choose a baby tracker app (2026-11-08; the owner: "the boxes are definitely too long,
   this is too much text"): eight small tiles, a picture, the question, the answer in a few words */
.choose-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.choose-tile{background:#fff;border-radius:22px;padding:20px 18px;box-shadow:0 0 0 1.5px #ece6db;display:flex;flex-direction:column;gap:8px}
.choose-tile .pic{width:52px;height:52px}
.choose-tile .pic--icon{display:grid;place-items:center;border-radius:16px;background:#e3eef8;color:#1d5c96}
.choose-tile h2{font-size:1.02rem;line-height:1.3;margin:4px 0 0}
.choose-tile p{margin:0;font-size:.92rem;color:#4c666b;line-height:1.4}
.choose-tile p b{color:#1d5c96;font-weight:800}
.choose-not{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:34px auto 0}
.choose-not h2{font-size:1rem;margin:0 6px 0 0;color:#4c666b;font-weight:700}
.choose-not span{background:#fff;border-radius:999px;padding:8px 14px;font-weight:700;font-size:.9rem;box-shadow:0 0 0 1.5px #ece6db}
@media (max-width:900px){.choose-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.choose-grid{gap:12px}.choose-tile{padding:16px 14px}.choose-tile h2{font-size:.95rem}}

/* ── baby apps compared (2026-11-10): five apps, a note under a mark, "Not stated" kept quiet ── */
.compare--apps { min-width: 760px; }
.compare--apps thead th:not(:first-child), .compare--apps td { width: 116px; vertical-align: top; }
.compare--apps thead th:nth-child(2), .compare--apps td:nth-child(2) { background: var(--teal-50); }
.compare--apps tbody th { font-size: 0.95rem; }
.cmp-note { display: block; margin-top: 6px; font-size: 0.78rem; font-weight: 600; line-height: 1.3; color: var(--ink-2); }
.cmp-unknown { font-size: 0.8rem; font-weight: 600; color: var(--ink-3); }
.cmp-foot { margin: 16px auto 0; max-width: 46rem; text-align: center; font-size: 0.88rem; color: var(--ink-2); }
.cmp-fits { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.cmp-fit { padding: 20px 22px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.cmp-fit:first-child { border-color: var(--teal-ink); }
.cmp-fit h3 { margin: 0 0 6px; font-size: 1.05rem; }
.cmp-fit p { margin: 0; color: var(--ink-2); }
.cmp-legal { text-align: center; font-size: 0.8rem; color: var(--ink-3); }
/* on a phone the table scrolls sideways inside its box; the row names stay put */
.compare--apps tbody th, .compare--apps thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--paper); min-width: 150px; }
.compare--apps thead th:first-child { background: var(--cream); z-index: 2; }

/* TAP TARGETS OF AT LEAST 24 PX ON A PHONE (WCAG 2.2 target size; the website review, 2026-11-10,
   W23): the footer's columns and the breadcrumbs were about 20 px tall. */
@media (max-width: 760px) {
  .foot-col a, .crumbs a { display: inline-flex; align-items: center; min-height: 32px; }
  .foot-col ul { gap: 4px; }
}

/* WHAT'S NEW (2026-11-10, W26): one release a block, its date under its name */
.releases .release + .release { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.releases .release h2 { margin-bottom: 4px; }
.releases .release ul { margin-top: 12px; }