/* Habibee marketing site.
   Design principles (from Aug 2026 landing-page research):
   cream backgrounds (never pure white) · chunky rounded type (Nunito 800) ·
   flat colors, no gradients · pressable "toy" CTAs with collapsing bottom edge ·
   organic wave dividers · warm dark-gray text (never #000) */

@font-face {
  font-family: "Nunito"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/nunito-400-latin-94abb8b4.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Nunito"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/nunito-400-latinext-5b7acd40.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF;
}
@font-face {
  font-family: "Nunito"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/assets/nunito-700-latin-dfba34d4.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Nunito"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/assets/nunito-700-latinext-113df1cc.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF;
}
@font-face {
  font-family: "Nunito"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("/assets/nunito-800-latin-717bb17d.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Nunito"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("/assets/nunito-800-latinext-05fbc891.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF;
}

/* Metric-matched fallbacks: Arial (or Roboto on Android) scaled to Nunito's advance widths and
   vertical metrics, so text wraps the same before and after the web font swaps in (no layout shift).
   size-adjust = Nunito width / Arial width per weight; ascent/descent = Nunito's 1011/353 ÷ size-adjust. */
@font-face {
  font-family: "Nunito Fallback"; font-weight: 400; font-style: normal;
  src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular");
  size-adjust: 100.6%; ascent-override: 100.5%; descent-override: 35.1%; line-gap-override: 0%;
}
@font-face {
  font-family: "Nunito Fallback"; font-weight: 700; font-style: normal;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold");
  size-adjust: 97.2%; ascent-override: 104%; descent-override: 36.3%; line-gap-override: 0%;
}
@font-face {
  font-family: "Nunito Fallback"; font-weight: 800; font-style: normal;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold");
  size-adjust: 99.5%; ascent-override: 101.6%; descent-override: 35.5%; line-gap-override: 0%;
}

:root {
  /* brand */
  --honey: #ffb800;
  --honey-deep: #e09b00;
  --honey-edge: #c98a00;
  /* flat support colors */
  --coral: #ff6b5e;
  --coral-edge: #e05548;
  --teal: #2bb3a3;
  --teal-soft: #d9f2ef;
  --leaf: #58cc02;
  /* surfaces & text */
  --cream: #fff8f0;
  --cream-deep: #fdf1e0;
  --card: #fffdfa;
  --ink: #4a4238;
  --ink-strong: #2f2a23;
  --muted: #776750; /* ≥4.5:1 on cream, tint and card */
  --line: #f0e4d2;
  --link: #8a5f00; /* honey text that stays ≥4.5:1 on cream and tint (--honey-deep is ~2.5:1) */
  --radius: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Nunito", "Nunito Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  font-size: 17px;
}
.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { color: #6b4a00; }
:where(a, button, summary, .btn, [tabindex]):focus-visible { outline: 3px solid var(--link); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { color: var(--ink-strong); line-height: 1.15; font-weight: 800; overflow-wrap: break-word; }
h1 { font-size: clamp(2.2rem, 5.5vw, 3.4rem); margin: 0.2em 0 0.4em; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); margin: 0 0 0.9em; }
.lead { font-size: 1.16rem; color: var(--muted); font-weight: 400; text-wrap: balance; }
p, li { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
.muted { color: var(--muted); }
.small { font-size: 0.88rem; }

/* ---------- header ---------- */
.site-header { background: var(--cream); position: sticky; top: 0; z-index: 20; }
.nav-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; gap: 9px; font-weight: 800; font-size: 1.3rem; color: var(--ink-strong); text-decoration: none; }
.brand-mark { width: 36px; height: 36px; object-fit: contain; }
.site-footer .brand-mark { width: 32px; height: 32px; }
.site-footer .brand { color: #fff; }
.site-nav { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.site-nav a { text-decoration: none; color: var(--ink); font-weight: 700; font-size: 0.95rem; }
.site-nav a:hover { color: var(--honey-deep); }

/* ---------- pressable toy buttons ---------- */
.btn {
  display: inline-block; border: none; cursor: pointer; text-decoration: none;
  font-family: inherit; font-weight: 800; font-size: 1rem;
  background: var(--honey); color: var(--ink-strong);
  padding: 13px 28px; border-radius: 16px;
  border-bottom: 4px solid var(--honey-edge);
  transition: filter 0.12s ease;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { border-bottom-width: 0; transform: translateY(4px); }
.btn-large { padding: 16px 36px; font-size: 1.12rem; text-align: center; text-wrap: balance; }
.btn-small { display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.2; padding: 9px 18px; font-size: 0.9rem; border-bottom-width: 3px; min-height: 44px; }
.btn-coral { background: var(--coral); color: #fff; border-bottom-color: var(--coral-edge); }

/* ---------- hero ---------- */
.hero { padding: 48px 0 8px; }
.hero-grid { display: grid; grid-template-columns: 6fr 5fr; gap: 40px; align-items: center; }
.kicker {
  display: inline-block; font-weight: 800; font-size: 0.95rem;
  color: #8a5f00; background: #fff3d6;
  padding: 6px 16px; border-radius: 999px;
}
.kicker-link {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  box-shadow: inset 0 0 0 1.5px #f5c542; transition: background 0.15s ease;
}
.kicker-link:hover, .kicker-link:focus-visible { background: #ffe9a8; }
.kicker-icon { display: block; width: 22px; height: 22px; }
.hero .lead { margin-bottom: 0.4em; }
.hero h1 .sentence { display: inline-block; } /* wrap between sentences, not inside them */
.hero-hint { margin: 0.2em 0 0; }
.chip-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1.2em; }
.chip-row-center { justify-content: center; margin: 0 0 1.2em; }
.chip.chip-free { background: #fff3d6; border-color: #ffe08a; color: #6b4a00; }
.chip {
  background: var(--card); border: 1.5px solid var(--line); color: var(--ink);
  padding: 7px 16px; border-radius: 999px; font-weight: 700; font-size: 0.86rem;
}
.hero-art { position: relative; display: flex; justify-content: center; padding: 8px 0 24px; }
.blob {
  position: absolute; inset: 8% 2%; z-index: 0;
  background: var(--cream-deep);
  border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%;
}
.hero-art .phone { --pw: 290px; }
/* One phone, centred in its column: Buddy peeks from its left edge, Habi hovers at its bottom right. */
.hero-phone-front { position: relative; z-index: 1; flex-shrink: 0; }
.hero-habi { position: absolute; z-index: 2; right: 0; bottom: 6%; width: 38%; max-width: 180px; }
.hero-habi img { display: block; width: 100%; height: auto; }
/* Buddy peeks out from behind the front phone: his flat-cut right edge tucks under the bezel
   (the phone paints above him), so only the side facing the honey shows. Everything is absolutely
   positioned inside the phone wrapper, so nothing reflows when the image arrives. The bubble sits on
   the phone (there is no free space beside it next to the headline), level with Buddy's snout. */
.hero-buddy { position: absolute; z-index: 0; right: calc(100% - 9px); top: 36%; width: clamp(72px, 7.6vw, 96px); animation: buddy-peek 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) 0.9s both; }
.hero-buddy img { display: block; width: 100%; height: auto; }
.hero-buddy-bubble {
  position: absolute; z-index: 2; left: 18px; top: calc(36% + 12px); width: max-content; max-width: 210px;
  background: var(--ink-strong); border-radius: 14px; padding: 6px 13px;
  font-weight: 800; font-size: 0.84rem; line-height: 1.25; color: #fff; text-wrap: balance;
  box-shadow: 0 4px 0 rgba(47, 42, 35, 0.15);
  animation: buddy-bubble 0.35s ease-out 1.6s both;
}
.hero-buddy-bubble::before { /* tail pointing left at Buddy */
  content: ""; position: absolute; left: -7px; top: 50%; margin-top: -6px; width: 11px; height: 11px;
  background: var(--ink-strong); transform: rotate(45deg); border-bottom-left-radius: 2px;
}
@keyframes buddy-peek { from { transform: translateX(70%); } to { transform: none; } }
@keyframes buddy-bubble { from { opacity: 0; transform: translateY(6px) scale(0.9); } to { opacity: 1; transform: none; } }

/* trust strip: inline pills in a balanced block, so wrapped rows come out even (3 + 2), never 4 + 1 */
.trust-list { list-style: none; margin: 32px 0 0; padding: 0; text-align: center; text-wrap: balance; }
.trust-list li {
  display: inline-flex; align-items: center; gap: 8px; margin: 5px 3px; vertical-align: middle; text-align: left;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 999px;
  padding: 8px 16px; font-weight: 700; font-size: 0.92rem; line-height: 1.35; color: var(--ink-strong);
}
.trust-list li.trust-free { background: #fff3d6; border-color: #ffe08a; color: #6b4a00; }
.trust-list svg {
  width: 20px; height: 20px; flex-shrink: 0;
  fill: none; stroke: var(--teal); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.trust-list .trust-free svg { stroke: #b07800; }

/* ---------- phone frame: a CSS bezel, no device photography ----------
   --pw is the frame width; everything else scales from it. The screen keeps the
   1206×2622 (iPhone 16 Pro) capture ratio, so nothing shifts when images load. */
.phone {
  --pw: 270px;
  position: relative; z-index: 1; flex-shrink: 0;
  width: var(--pw); max-width: 100%;
  padding: calc(var(--pw) * 0.035);
  background: var(--ink-strong);
  border-radius: calc(var(--pw) * 0.165);
  box-shadow: 0 12px 0 rgba(74, 66, 56, 0.12);
}
.phone::before, .phone::after {
  content: ""; position: absolute; width: 4px; background: var(--ink-strong); border-radius: 2px;
}
.phone::before { right: -3px; top: 27%; height: 12%; }
.phone::after { left: -3px; top: 21%; height: 16%; }
.phone-screen {
  position: relative; overflow: hidden; aspect-ratio: 1206 / 2622;
  border-radius: calc(var(--pw) * 0.13);
  background: var(--cream);
}
.phone-screen::after { /* camera pill */
  content: ""; position: absolute; z-index: 2; left: 50%; transform: translateX(-50%);
  top: calc(var(--pw) * 0.03); width: 31%; height: calc(var(--pw) * 0.085);
  background: #1f1b16; border-radius: 999px;
}
.phone-screen picture, .phone-shot { display: block; width: 100%; height: 100%; }
.phone-shot { object-fit: cover; }
.phone-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--pw) * 0.24) calc(var(--pw) * 0.07) calc(var(--pw) * 0.08);
  gap: calc(var(--pw) * 0.03); background: var(--cream);
}
.phone-placeholder-child-home { background: #ffe8a3; }
.phone-placeholder-hive { background: #ffcf70; }
.phone-placeholder-task-focus { background: #fff3d6; }
.phone-placeholder-child-home-big { background: var(--cream-deep); }
.ph-habi { width: 52%; height: auto; }
.ph-label { font-weight: 800; font-size: calc(var(--pw) * 0.075); color: var(--ink-strong); text-align: center; line-height: 1.2; }
.ph-cards { display: flex; flex-direction: column; gap: calc(var(--pw) * 0.035); width: 100%; margin-top: auto; }
.ph-card {
  display: block; height: calc(var(--pw) * 0.15); border-radius: calc(var(--pw) * 0.05);
  background: var(--card); border-bottom: 3px solid rgba(74, 66, 56, 0.1);
}

/* ---------- wave divider ---------- */
.wave { display: block; width: 100%; height: 70px; margin-bottom: -1px; }
.wave-on-card { background: var(--card); }
.wave-on-tint { background: var(--cream-deep); }

/* ---------- sections ---------- */
.section { padding: 72px 0; }
.section-card { background: var(--card); }
.section-tint { background: var(--cream-deep); }
.section-center h2, .section-center > .container > .lead, .section-center > .container > .btn { text-align: center; }
.pricing .container > .btn { display: table; margin: 0 auto; }

/* tick lists (showcase rows, pricing) */
.ticks { list-style: none; padding: 0; margin: 1.1em 0 0; }
.ticks li { margin: 0.5em 0; padding-left: 34px; position: relative; font-weight: 700; color: var(--ink-strong); }
.ticks li::before {
  content: "✓"; position: absolute; left: 0; top: 0.1em;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--teal-soft); color: #1f7f74;
  font-weight: 800; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- showcase: alternating selling point + screenshot ---------- */
.showcase { padding-top: 40px; }
.showcase-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 40px 0; }
.showcase-row.is-flipped .showcase-art { order: -1; }
.showcase-copy { max-width: 470px; }
.showcase-row:not(.is-flipped) .showcase-copy { justify-self: end; }
.showcase-copy h2 { margin: 0.45em 0 0.45em; }
.showcase-copy p { margin: 0; font-size: 1.06rem; }
.showcase-art { position: relative; display: flex; justify-content: center; padding: 16px 0; }
.showcase-art .blob { inset: 10% 8%; background: var(--accent-soft); }
.accent-honey { --accent-soft: #fff0c7; --accent-ink: #8a5f00; }
.accent-teal { --accent-soft: var(--teal-soft); --accent-ink: #1f7f74; }
.accent-coral { --accent-soft: #ffe4e1; --accent-ink: #b8392f; }
.eyebrow {
  display: inline-block; font-weight: 800; font-size: 0.86rem;
  padding: 5px 14px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink);
}

/* ---------- "tap a task" demo: the child's home in miniature ----------
   Everything has a fixed size, so tapping never moves the page; the honey drop flies on
   its own absolutely positioned layer (honey_demo_controller.js). */
.demo-section { padding-top: 48px; }
.demo-grid { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: 48px; align-items: center; }
.demo-grid.has-video { grid-template-columns: 1fr minmax(0, 400px) auto; gap: 36px; }
.demo-copy { max-width: 470px; }
.demo-copy h2 { margin: 0.45em 0 0.45em; }
.demo-copy p { margin: 0; font-size: 1.06rem; }
.demo-copy .demo-note { margin-top: 1em; font-size: 0.9rem; }
.demo {
  position: relative; width: 100%; max-width: 420px; justify-self: center;
  background: var(--cream); border-radius: 32px; overflow: hidden;
  border: 1.5px solid var(--line); box-shadow: 0 10px 0 rgba(74, 66, 56, 0.08);
}
.demo-top { display: flex; align-items: center; gap: 14px; background: #ffcb3d; padding: 18px 18px 16px; }
.demo-habi { position: relative; width: 104px; height: 104px; flex-shrink: 0; }
.demo-habi img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity 0.2s ease;
}
.demo[data-pose="rest"] .pose-rest, .demo[data-pose="happy"] .pose-happy, .demo[data-pose="thrilled"] .pose-thrilled { opacity: 1; }
.demo[data-pose="happy"] .pose-happy, .demo[data-pose="thrilled"] .pose-thrilled { animation: demo-hop 0.5s ease-out; }
.demo-top-side { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.demo-bubble {
  position: relative; margin: 0; background: var(--card); border-radius: 16px; padding: 8px 14px;
  font-weight: 800; color: var(--ink-strong); font-size: 0.98rem; line-height: 1.3;
  min-height: calc(2 * 1.3em + 16px); display: flex; align-items: center; width: 100%;
}
.demo-bubble::before { /* tail pointing at Habi */
  content: ""; position: absolute; left: -7px; top: 50%; margin-top: -7px;
  border: 7px solid transparent; border-left: 0; border-right-color: var(--card);
}
.demo-pot {
  margin: 0; display: inline-flex; align-items: center; gap: 6px; background: var(--card);
  border-radius: 999px; padding: 3px 16px 3px 5px; font-weight: 800; font-size: 1.3rem;
  color: var(--ink-strong); font-variant-numeric: tabular-nums;
}
.demo-pot img { width: 38px; height: 38px; }
.demo-goal {
  display: flex; align-items: center; gap: 12px; margin: 14px 14px 4px; padding: 12px 14px;
  background: var(--card); border-radius: 20px;
}
.demo-goal-text { flex: 1; min-width: 0; }
.demo-goal-text p { margin: 0 0 6px; color: var(--ink-strong); display: flex; justify-content: space-between; gap: 8px; }
.demo-progress { font-weight: 800; color: #8a5f00; font-variant-numeric: tabular-nums; }
.demo-cells { display: flex; gap: 4px; }
.demo-cell, .demo-hex { clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.demo-cell { width: 24px; height: 22px; background: var(--cream-deep); transition: background-color 0.25s ease; }
.demo-cell.is-full { background: var(--honey); }
.demo-hex { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 58px; height: 52px; }
.demo-hex img { width: 34px; height: 34px; }
.hex-coral { background: #ffe4e1; }
.hex-teal { background: var(--teal-soft); }
.hex-honey { background: #fff0c7; }
.demo-tasks { list-style: none; margin: 0; padding: 10px 14px 16px; display: grid; gap: 10px; }
.demo-task {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  background: var(--card); border: 2px solid transparent; border-radius: 20px;
  border-bottom: 4px solid var(--line); padding: 10px 12px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.demo-task:hover { border-color: #ffe08a; border-bottom-color: #ffe08a; }
.demo-task:focus-visible { outline: 3px solid var(--honey-deep); outline-offset: 2px; }
.demo-task:active { transform: translateY(2px); }
.demo-task[aria-pressed="true"] { background: #effaf8; border-bottom-color: #bfe8e2; }
.demo-task-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.demo-task-name { font-weight: 800; font-size: 1.05rem; color: var(--ink-strong); line-height: 1.2; }
.demo-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.demo-honey, .demo-status { border-radius: 999px; padding: 1px 10px; font-weight: 800; font-size: 0.85rem; }
.demo-honey { background: #fff0c7; color: var(--ink-strong); }
.demo-status { background: var(--cream-deep); color: var(--muted); }
.demo-task[aria-pressed="true"] .demo-status { background: var(--teal-soft); color: #1f7f74; }
.demo-check {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  border: 2.5px solid var(--line); display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; transition: background-color 0.2s ease, border-color 0.2s ease;
}
.demo-task[aria-pressed="true"] .demo-check { background: var(--teal); border-color: var(--teal); }
.demo-task[aria-pressed="true"] .demo-check::after { content: "✓"; }
.demo-drop { /* a honey drop: a rounded teardrop */
  position: absolute; z-index: 5; width: 18px; height: 22px; pointer-events: none;
  background: var(--honey); border: 2px solid var(--honey-edge);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
.demo-video-frame { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.demo-video-frame .phone { --pw: 230px; }
.demo-video-frame figcaption { text-align: center; max-width: 230px; }
.demo-video { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes demo-hop { 0% { transform: translateY(0) scale(0.92); } 40% { transform: translateY(-10px) scale(1.04); } 100% { transform: none; } }

/* ---------- honest comparison ---------- */
.compare-lead { max-width: 780px; margin: -0.4em auto 1.8em; }
.compare-wrap { max-width: 860px; margin: 0 auto; background: var(--card); border: 1.5px solid var(--line); border-radius: 24px; overflow: hidden; }
.compare-table { width: 100%; border-collapse: collapse; text-align: left; }
.compare-table th, .compare-table td { padding: 14px 18px; vertical-align: top; border-top: 1.5px solid var(--line); }
.compare-table thead th { border-top: 0; font-weight: 800; color: var(--ink-strong); padding-top: 18px; padding-bottom: 14px; }
.compare-table tbody th { font-weight: 800; color: var(--ink-strong); width: 38%; text-wrap: balance; }
.compare-table td.compare-us { position: relative; padding-left: 48px; }
.compare-table .compare-us { background: #fff6dc; color: var(--ink-strong); font-weight: 700; width: 32%; }
.compare-them { color: var(--muted); }
.compare-habi { width: 28px; height: 28px; vertical-align: -8px; margin-right: 6px; }
.compare-yes {
  position: absolute; left: 18px; top: 16px;
  display: inline-flex; width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal); color: #fff; font-size: 0.8rem; font-weight: 800; align-items: center; justify-content: center;
}
.compare-note { max-width: 640px; margin: 1.4em auto 0; text-align: center; }

/* how it works — colored step cards */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step-card { background: var(--card); border-radius: var(--radius); padding: 28px 26px; border: 1.5px solid var(--line); }
.step-num {
  display: inline-flex; width: 44px; height: 44px; border-radius: 14px;
  font-weight: 800; font-size: 1.2rem; color: #fff;
  align-items: center; justify-content: center; margin-bottom: 14px;
}
.step-card:nth-child(1) .step-num { background: var(--honey); color: var(--ink-strong); }
.step-card:nth-child(2) .step-num { background: var(--coral); }
.step-card:nth-child(3) .step-num { background: var(--teal); }
.step-card h3 { margin: 0 0 0.4em; font-size: 1.18rem; }
.step-card p { margin: 0; color: var(--muted); }

/* ---------- meet Buddy: a 3-beat story ---------- */
.meet-buddy { text-align: center; }
.meet-buddy h2 { margin-top: 0.45em; }
.buddy-lead { max-width: 640px; margin: -0.4em auto 2em; }
.buddy-story {
  list-style: none; margin: 0 auto; padding: 0; max-width: 960px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.buddy-beat { position: relative; background: var(--cream); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 22px 22px 26px; }
.buddy-beat:not(:last-child)::after { /* arrow to the next beat */
  content: "→"; position: absolute; z-index: 1; right: -20px; top: 94px;
  width: 34px; height: 34px; border-radius: 50%; background: var(--honey); color: var(--ink-strong);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; line-height: 1;
}
.buddy-art {
  display: block; width: 168px; height: 168px; margin: 0 auto 10px;
  background: var(--accent-soft); border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%;
}
.buddy-art img { display: block; width: 100%; height: 100%; }
.buddy-beat:hover .buddy-art img { animation: buddy-wiggle 0.6s ease-in-out; }
.buddy-beat h3 { margin: 0 0 0.3em; font-size: 1.18rem; }
.buddy-beat p { margin: 0; color: var(--muted); text-wrap: balance; }
:lang(ja) :is(h1, h2, h3, .lead, .hero-buddy-bubble) { word-break: auto-phrase; } /* no breaks mid-word in Japanese headings */
.buddy-note { max-width: 700px; margin: 2em auto 0; padding: 14px 22px; background: #fff3d6; border-radius: 18px; color: var(--ink-strong); }
@keyframes buddy-wiggle { 0%, 100% { transform: none; } 25% { transform: rotate(-4deg); } 50% { transform: rotate(3deg); } 75% { transform: rotate(-1.5deg); } }

/* features — icon chips instead of emoji-in-heading */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 26px; }
.feature .icon {
  display: inline-flex; width: 72px; height: 72px; border-radius: 20px;
  align-items: center; justify-content: center; margin-bottom: 12px;
}
.feature .icon img { width: 60px; height: 60px; object-fit: contain; }
.habi-mini, .post-body img.habi-mini { display: inline-block; height: 1.1em; width: auto; vertical-align: -0.18em; border-radius: 0; }
.icon-honey { background: #fff3d6; }
.icon-teal { background: var(--teal-soft); }
.icon-coral { background: #ffe4e1; }
.feature h3 { margin: 0 0 0.4em; font-size: 1.12rem; }
.feature p { margin: 0; color: var(--muted); font-size: 0.98rem; }

/* ---------- privacy in plain words (home, before the FAQ) ---------- */
.privacy-head { text-align: center; max-width: 720px; margin: 0 auto; }
.privacy-head h2 { margin: 0.45em 0 0.35em; }
.privacy-head .lead { margin: 0 0 1.8em; }
.privacy-points { list-style: none; padding: 0; margin: 0 auto; max-width: 900px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.privacy-point {
  display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start;
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 22px 22px 22px 18px;
}
.privacy-icon { display: inline-flex; width: 56px; height: 56px; border-radius: 16px; align-items: center; justify-content: center; }
.privacy-icon img { width: 40px; height: 40px; object-fit: contain; }
.privacy-point h3 { margin: 0.1em 0 0.3em; font-size: 1.1rem; }
.privacy-point p { margin: 0; color: var(--muted); font-size: 0.98rem; }
.privacy-more { text-align: center; margin: 1.6em 0 0; }
.privacy-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 800; }

/* ---------- pricing teaser ---------- */
.pricing-lead { max-width: 780px; margin: -0.4em auto 2em; }
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 860px; margin: 0 auto; text-align: left; }
.plan {
  position: relative; background: var(--cream); border: 1.5px solid var(--line);
  border-radius: 24px; padding: 28px 28px 24px;
}
.plan-premium { background: var(--card); border: 3px solid var(--honey); }
.plan h3 { margin: 0; font-size: 1.3rem; }
.plan-badge {
  position: absolute; top: -15px; right: 22px;
  background: var(--honey); color: var(--ink-strong); font-weight: 800; font-size: 0.82rem;
  padding: 5px 14px; border-radius: 999px;
}
.plan-offer {
  display: inline-block; margin-top: 12px; font-weight: 800; font-size: 0.82rem;
  background: #ffe4e1; color: #b8392f; padding: 4px 12px; border-radius: 999px;
}
.plan-price { font-size: 1.55rem; font-weight: 800; color: var(--ink-strong); margin: 0.3em 0 0; line-height: 1.25; }
.plan-options { margin: 0.9em 0 0; display: grid; gap: 6px; }
.plan-options div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  background: var(--cream); border-radius: 12px; padding: 8px 14px; font-size: 0.95rem;
}
.plan-options dt { font-weight: 800; color: var(--ink-strong); }
.plan-options dd { margin: 0; text-align: right; text-wrap: balance; }
.plan-intro { margin: 1.1em 0 0; font-weight: 800; color: var(--ink-strong); }
.plan-intro + .ticks { margin-top: 0.3em; }
.plan-sync { margin: 1.1em 0 0; font-size: 0.9rem; color: var(--muted); }
.pricing-trial {
  max-width: 640px; margin: 1.8em auto 0; padding: 14px 22px; text-align: center;
  background: #fff3d6; border-radius: 18px; font-weight: 700; color: var(--ink-strong);
}
.pricing-note { max-width: 640px; margin: 1.6em auto; text-align: center; }

/* FAQ */
.faq { max-width: 780px; margin: 0 auto; }
.faq-item {
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: 18px; padding: 8px 24px; margin-bottom: 12px;
}
.faq-item summary {
  font-weight: 800; cursor: pointer; padding: 14px 0; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  color: var(--ink-strong); text-wrap: balance;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--honey-deep); flex-shrink: 0; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin: 0 0 16px; color: var(--muted); }

/* waitlist */
.section-waitlist { background: var(--cream-deep); padding: 80px 0; }
.waitlist-box { text-align: center; max-width: 620px; }
/* iPhone now, Android soon (AppLaunch): the App Store badge first, then a smaller waitlist for Android. */
.waitlist-box .store-badges { justify-content: center; }
.waitlist-android-title { margin: 1.6em 0 0.2em; font-size: 1.25rem; }
.android-soon { margin: 0.4em 0 0; }
/* A grid, so the Turnstile check (when Cloudflare shows one) spans exactly the email + button row
   and lines up with the field's left edge. */
.waitlist-form { display: grid; grid-template-columns: 300px auto; gap: 12px; justify-content: center; margin: 1.6em 0 0.8em; }
.waitlist-form-hero { justify-content: start; margin: 1.4em 0 0.6em; }
.waitlist-habi { display: block; margin: 0 auto 8px; width: 96px; height: 96px; }
.waitlist-form input[type="email"] {
  padding: 14px 20px; border-radius: 16px; border: 2px solid var(--line);
  font-size: 1rem; width: 100%; min-width: 0; font-family: inherit; background: #fff;
}
.waitlist-form input[type="email"]:focus { outline: none; border-color: var(--honey); }
.waitlist-turnstile { grid-column: 1 / -1; min-width: 0; }
.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;
}
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.confirm-box { background: var(--card); border-radius: 28px; padding: 40px 32px; box-shadow: 0 8px 0 var(--line); width: min(620px, calc(100% - 32px)); }
.confirm-habi { display: block; margin: 0 auto 12px; mix-blend-mode: multiply; } /* the email PNGs have a white backdrop */
.confirm-box h3 { margin: 1.4em 0 0.4em; }
.confirm-steps { list-style: none; padding: 0; margin: 0 auto 1.8em; width: fit-content; max-width: 440px; text-align: left; }
.confirm-steps li { padding: 8px 0 8px 32px; position: relative; color: var(--muted); }
.confirm-steps li::before { content: "🍯"; position: absolute; left: 0; }

.waitlist-result {
  display: flex; gap: 12px; align-items: flex-start; text-align: left;
  padding: 16px 18px; border-radius: 18px; margin: 0; max-width: 560px;
}
.waitlist-result-notice { background: #e9f7e0; color: #2f6410; }
.waitlist-result-alert { background: #ffe9e6; color: #a8322a; }
.waitlist-result-icon { font-size: 1.5rem; line-height: 1.2; }
.waitlist-result-message { margin: 0; font-weight: 800; }
.waitlist-result-hint { margin: 4px 0 0; font-size: 0.92rem; }
.waitlist-result-hint a { color: inherit; font-weight: 800; }
.section-center .waitlist-result { margin-inline: auto; }
.flash { padding: 13px 22px; border-radius: 16px; margin: 16px auto; font-weight: 700; }
.flash-notice { background: #e9f7e0; color: #3c7a12; }
.flash-alert { background: #ffe9e6; color: #c0392b; }

/* footer */
.site-footer { background: var(--ink-strong); color: #cfc4b2; padding: 56px 0 28px; }
.site-footer a { color: #ffd75e; text-decoration: none; }
.site-footer .muted { color: #b8ab96; } /* --muted is for light surfaces; this is ≥6:1 on the dark footer */
.site-footer .brand { display: flex; margin: 0 0 12px; }
.site-footer p { margin: 0 0 0.8em; }
.site-footer h4 { color: #fff; margin: 0 0 4px; min-height: 44px; display: flex; align-items: center; }
.site-footer a:hover { text-decoration: underline; }
.site-footer a:focus-visible { outline-color: #ffd75e; }
.footer-cols { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 36px; }
.footer-guides a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.footer-legal a { display: flex; align-items: center; width: fit-content; min-height: 34px; }
.footer-locales { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0 14px; }
.footer-locales h4 { flex-basis: 100%; }
.footer-locales a { display: inline-flex; align-items: center; min-height: 34px; min-width: 44px; font-size: 0.92rem; }
@media (max-width: 640px) { .footer-legal a, .footer-locales a { min-height: 44px; } }
.copyright { margin: 32px 0 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.85rem; }

/* ---------- blog: shared ---------- */
.breadcrumbs {
  list-style: none; margin: 0 0 18px; padding: 0; display: flex; gap: 4px 0; white-space: nowrap;
  font-size: 0.88rem; font-weight: 700; color: var(--muted);
}
.breadcrumbs li { display: flex; flex-shrink: 0; white-space: nowrap; } /* li resets wrapping via text-wrap */
.breadcrumbs li:last-child { flex-shrink: 1; min-width: 0; }
.breadcrumbs li + li::before { content: "›"; margin: 0 8px; color: var(--muted); }
.breadcrumbs a { color: var(--muted); text-decoration: none; padding: 12px 0; margin: -12px 0; } /* 44px hit area, same layout */
.breadcrumbs a:hover { color: var(--honey-deep); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--ink); min-width: 0; max-width: 36ch; overflow: hidden; text-overflow: ellipsis; }

/* article cards (blog index, related articles) */
.post-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.post-card {
  display: flex; flex-direction: column; background: var(--card); border: 1.5px solid var(--line);
  border-radius: var(--radius); overflow: hidden; position: relative;
}
.post-card-cover { display: block; background: #ffcb3d; }
.post-cover { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
.post-card-text { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.post-card-category { font-weight: 800; font-size: 0.8rem; color: #8a5f00; text-transform: uppercase; letter-spacing: 0.04em; }
.post-card-title { font-size: 1.2rem; margin: 0.3em 0 0.4em; line-height: 1.25; }
.post-card-title a { color: var(--ink-strong); text-decoration: none; }
.post-card-title a::after { content: ""; position: absolute; inset: 0; } /* whole card is the link */
.post-card-title a:focus-visible { outline: none; }
.post-card:focus-within { outline: 3px solid var(--honey-deep); outline-offset: 2px; }
.post-card:hover { border-color: #ffe08a; }
.post-card-excerpt { margin: 0 0 0.8em; color: var(--muted); font-size: 0.97rem; }
.post-card-meta { margin: auto 0 0; }
.post-card-featured .post-card-title { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
.post-card-btn { position: relative; z-index: 1; align-self: flex-start; margin-top: 14px; }

/* ---------- blog index ---------- */
.blog-hero { padding: 36px 0 24px; }
.blog-hero-grid { display: grid; gap: 40px; align-items: center; }
.blog-hero-grid.has-featured { grid-template-columns: 5fr 6fr; }
.blog-hero-copy h1 { margin-bottom: 0.25em; font-size: clamp(2.2rem, 4.4vw, 3.1rem); }
.blog-empty { display: flex; align-items: center; gap: 16px; max-width: 640px; margin: 0; padding: 18px 22px; background: #fff3d6; border-radius: 18px; color: var(--ink-strong); font-weight: 700; }
.blog-empty img { width: 56px; height: 56px; flex-shrink: 0; }
.blog-intro { margin: 0; }
.blog-featured .eyebrow { margin: 0 0 10px; }
.blog-featured .post-card { box-shadow: 0 10px 0 rgba(74, 66, 56, 0.08); }
.blog-list { padding-top: 40px; }
.blog-list h2 { font-size: 1.6rem; margin-bottom: 0.6em; }
.blog-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
.blog-chips .chip { text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; }
.blog-chips .chip:hover { border-color: #ffe08a; }
.blog-chips .chip[aria-current] { background: var(--honey); border-color: var(--honey-edge); color: var(--ink-strong); }

/* ---------- printables (/printables) ---------- */
.printables-hero h1 { font-size: clamp(2rem, 4.4vw, 3rem); max-width: 22ch; margin: 0.35em 0 0.35em; }
.printables-hero .lead { max-width: 60ch; margin: 0 0 0.6em; }
.printables-note { margin: 0; font-weight: 700; color: var(--ink-strong); }
.printables-list { padding-top: 24px; }
.printable-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.printable-card { scroll-margin-top: 88px; display: flex; flex-direction: column; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.printable-preview { display: block; padding: 22px 22px 0; background: var(--cream-deep); }
.printable-preview img { display: block; width: 100%; height: auto; border-radius: 8px 8px 0 0; box-shadow: 0 0 0 1.5px var(--line); background: #fff; }
.printable-text { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.printable-text h2 { font-size: 1.35rem; margin: 0 0 0.4em; }
.printable-text p { margin: 0 0 0.6em; }
.printable-downloads { display: flex; flex-wrap: wrap; gap: 10px; margin: auto 0 0; padding-top: 6px; }
.printable-downloads .printable-alt { background: var(--card); box-shadow: inset 0 0 0 1.5px #f5c542; border-bottom-color: #f5c542; }
.printable-downloads .btn { gap: 6px; }
.printable-arrow { width: 16px; height: 16px; flex: none; }
.printable-size { font-weight: 400; font-size: 0.82rem; }
.printable-guide { font-weight: 700; font-size: 0.95rem; }
.maker-banner { display: flex; align-items: center; gap: 20px; margin: 0 0 28px; padding: 18px 22px; border-radius: var(--radius); background: #fff3d6; box-shadow: inset 0 0 0 1.5px #ffe08a; }
.maker-banner-art { width: 48px; height: 60px; flex: none; }
.maker-banner-text { flex: 1; min-width: 0; }
.maker-banner-text h2 { font-size: 1.3rem; margin: 0 0 0.2em; }
.maker-banner-text p { margin: 0; }
.maker-banner .btn { flex: none; }
.printables-how .ticks { max-width: 760px; }
.printables-how .ticks li { font-weight: 400; color: var(--ink); }
.printable-text h2 a { color: inherit; text-decoration: none; }
.printable-text h2 a:hover { color: var(--link); text-decoration: underline; }
.printable-make { margin-top: 10px; align-self: flex-start; gap: 6px; color: var(--ink-strong); }
/* a chart's own page (/printables/<slug>) */
.printable-page { padding-top: 24px; }
.printable-page-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 40px; align-items: start; }
.printable-page-preview { display: block; padding: 22px; background: var(--cream-deep); border-radius: var(--radius); }
.printable-page-preview img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 0 0 1.5px var(--line); background: #fff; }
.printable-page-get { max-width: 620px; }
.printable-page-get h2 { font-size: 1.6rem; margin: 0 0 0.4em; }
.printable-page-get .printable-downloads { margin: 14px 0 0; }
.printable-page-maker { margin-top: 28px; padding: 18px 22px; border-radius: var(--radius); background: #fff3d6; box-shadow: inset 0 0 0 1.5px #ffe08a; }
.printable-page-maker h3 { font-size: 1.2rem; margin: 0 0 0.3em; }
.printable-page-maker p { margin: 0; }
.printable-page-ages-title { margin-top: 1.6em; }
.printable-page-ages { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; max-width: 980px; }
.printable-page-age { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 16px 20px; }
.printable-page-age h3 { font-size: 1.1rem; margin: 0 0 0.35em; }
.printable-page-age p { margin: 0; }
.printable-page-narrow > h2, .printable-page-narrow > h3, .printable-page-narrow > p, .printable-page-narrow > .printable-strip { max-width: 760px; }
.printable-page-faq h3 { font-size: 1.12rem; margin: 1.3em 0 0.3em; }
.printable-page-faq p { margin: 0 0 0.6em; }
.printable-strip { display: flex; align-items: center; gap: 14px; margin: 28px 0 0; padding: 12px 16px; border-radius: 14px; background: var(--cream-deep); color: var(--ink); text-decoration: none; }
.printable-strip:hover b { text-decoration: underline; }
.printable-strip-icon { width: 48px; height: 48px; flex: none; border-radius: 12px; }
.printable-strip b { color: var(--ink-strong); margin-right: 4px; }
.printable-page-more-title { margin-top: 1.8em; }
.printable-mini-cards { list-style: none; padding: 0; margin: 0.6em 0 1em; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.printable-mini { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 10px 10px 12px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--cream); color: var(--ink-strong); font-weight: 700; font-size: 0.92rem; line-height: 1.25; text-decoration: none; }
.printable-mini img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 0 0 1px var(--line); background: #fff; }
.printable-mini:hover span { text-decoration: underline; }
/* the small card under an article paragraph that links a chart (ArticleDocument#add_printable_cards) */
.post-body .article-printables { display: flex; flex-wrap: wrap; gap: 12px; margin: -0.2em 0 1.4em; }
.post-body .article-printable { display: flex; align-items: center; gap: 14px; flex: 1 1 260px; max-width: 380px; padding: 10px 14px 10px 10px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); text-decoration: none; font-size: 0.95rem; line-height: 1.3; }
.post-body .article-printable:hover { border-color: #f5c542; }
.post-body .article-printable img { width: 64px; height: auto; flex: none; border-radius: 4px; box-shadow: 0 0 0 1px var(--line); background: #fff; }
.post-body .article-printable-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.post-body .article-printable-title { font-weight: 800; color: var(--ink-strong); }
.post-body .article-printable-meta { color: var(--muted); font-size: 0.86rem; }
.post-body .article-printable-open { font-weight: 700; color: var(--link); }
.post-body .article-printable:hover .article-printable-open { text-decoration: underline; }
@media (max-width: 860px) { .printable-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .printable-page-grid { grid-template-columns: 1fr; gap: 24px; }
  .printable-page-preview { max-width: 300px; }
}
@media (max-width: 640px) {
  .maker-banner { flex-wrap: wrap; }
  .maker-banner .btn { width: 100%; text-align: center; }
  .printable-cards { grid-template-columns: 1fr; }
  .printable-preview img { max-width: 260px; margin: 0 auto; }
  .printable-mini-cards { grid-template-columns: 1fr 1fr; }
}

/* ---------- article ---------- */
.post-header { padding: 32px 0 8px; }
.post-header-inner { max-width: 1080px; }
.post-category { position: relative; text-decoration: none; }
.post-category::after { content: ""; position: absolute; inset: -6px 0; }
.post-header h1 { font-size: clamp(2rem, 4.6vw, 3rem); max-width: 22ch; margin: 0.35em 0 0.45em; }
.post-meta { display: flex; align-items: center; gap: 12px; }
.post-meta p { margin: 0; font-size: 0.93rem; line-height: 1.5; }
.post-meta p span { white-space: nowrap; }
.post-meta p span + span::before { content: "·"; margin: 0 8px; }
.post-meta-author { font-weight: 800; color: var(--ink-strong); }
@media (max-width: 640px) {
  .post-meta p span { display: block; }
  .post-meta p span + span::before { content: none; }
}
.post-meta-avatar { width: 40px; height: 40px; border-radius: 50%; background: #fff0c7; padding: 4px; flex-shrink: 0; }

.post-layout { display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; padding-top: 24px; padding-bottom: 56px; }
.post-body { max-width: 720px; min-width: 0; font-size: 1.07rem; }
.post-body > p:first-child { font-size: 1.16rem; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.post-body h2 { font-size: clamp(1.45rem, 3vw, 1.75rem); margin: 1.8em 0 0.6em; scroll-margin-top: 90px; }
.post-body h3 { font-size: 1.2rem; margin: 1.5em 0 0.4em; scroll-margin-top: 90px; }
.post-body li { margin: 0.35em 0; }
.post-body blockquote { margin: 1.4em 0; padding: 14px 20px; background: #fff3d6; border-radius: 16px; }
.post-body blockquote p { margin: 0; }
.post-body hr { border: 0; border-top: 1.5px solid var(--line); margin: 2.4em 0; }
.post-body table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.4em 0; font-size: 0.95rem; background: var(--card); border-radius: 16px; border: 1.5px solid var(--line); }
.post-body th, .post-body td { padding: 10px 14px; border-top: 1.5px solid var(--line); text-align: left; vertical-align: top; }
.post-body thead th { border-top: 0; color: var(--ink-strong); background: #fff6dc; }
.post-sources { font-size: 0.92rem; color: var(--muted); padding-left: 1.3em; }
.post-sources a { overflow-wrap: anywhere; }
.post-body td[data-label] > span { display: block; }
.nowrap { white-space: nowrap; } /* "6-year-olds", "3–6" in titles (ArticleDocument.keep_together) */
/* Wide data tables (ArticleDocument labels their cells): one card per row on phones instead of
   five squeezed columns. The first cell is the card's title; the others get their column label. */
@media (max-width: 640px) {
  .post-body table:has(td[data-label]) { display: block; width: auto; overflow: visible; background: none; border: 0; border-radius: 0; }
  .post-body table:has(td[data-label]) thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .post-body table:has(td[data-label]) :is(tbody, tr) { display: block; }
  .post-body tr:has(td[data-label]) { background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 12px 16px; margin: 0 0 10px; }
  .post-body td[data-label] { display: grid; grid-template-columns: minmax(0, 7.2em) minmax(0, 1fr); gap: 12px; border: 0; padding: 3px 0; }
  .post-body td[data-label]::before { content: attr(data-label); font-weight: 700; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }
  .post-body td[data-label]:first-child { display: block; padding: 0 0 6px; font-weight: 800; font-size: 1.05rem; color: var(--ink-strong); }
  .post-body td[data-label]:first-child::before { content: none; }
  /* Printable grids (a task column + one box per weekday) scroll sideways; keep the task readable. */
  .post-body table:has(th:nth-child(6)) :is(th, td) { padding: 10px; }
  .post-body table:has(th:nth-child(6)) :is(th, td):first-child { min-width: 9em; }
}
:lang(ja) :is(.post-cta-title, .post-toc a, .post-pager-link strong, .post-body th, .post-body td, .sticky-cta-link span) { word-break: auto-phrase; overflow-wrap: break-word; }
:lang(ja) :is(.post-header h1, .post-body h2, .post-body h3, .post-card-title, .post-cta-end h2, .post-cta-title) { line-height: 1.4; }
/* Full-width glyphs look a size larger than Latin text at the same font size. */
:lang(ja) .post-header h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }

/* table of contents: collapsible above the article on phones, sticky sidebar on desktop */
.post-toc details { background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; padding: 4px 18px; margin-bottom: 8px; }
.post-toc summary { font-weight: 800; color: var(--ink-strong); cursor: pointer; padding: 10px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.post-toc summary::-webkit-details-marker { display: none; }
.post-toc summary::after { content: "+"; color: var(--honey-deep); font-size: 1.3rem; line-height: 1; }
.post-toc details[open] summary::after { content: "–"; }
.post-toc ol { margin: 0 0 12px; padding-left: 1.2em; font-size: 0.94rem; }
.post-toc li { margin: 0.45em 0; text-wrap: balance; }
.post-toc a { color: var(--ink); text-decoration: none; text-wrap: balance; }
.post-toc a:hover { color: var(--honey-deep); text-decoration: underline; }
@media (min-width: 1024px) {
  .post-layout.has-toc { grid-template-columns: minmax(0, 720px) minmax(220px, 1fr); gap: 56px; justify-content: stretch; }
  .post-layout.has-toc .post-toc { grid-column: 2; grid-row: 1; align-self: start; position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; }
  .post-layout.has-toc .post-body { grid-column: 1; grid-row: 1; }
  .post-toc details { background: transparent; border: 0; padding: 0; }
  .post-toc summary { cursor: default; pointer-events: none; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
  .post-toc summary::after, .post-toc details[open] summary::after { content: none; }
  .post-toc ol { list-style: none; padding: 0; border-left: 2px solid var(--line); }
  .post-toc li { margin: 0; }
  .post-toc a { display: block; padding: 5px 0 5px 14px; margin-left: -2px; border-left: 2px solid transparent; line-height: 1.35; }
  .post-toc a:hover { border-left-color: var(--honey); text-decoration: none; }
}

/* in-article CTA card */
/* Phones: copy beside the screenshot, form and note full width below. Wider: the form and note
   sit under the copy, the screenshot spans the card's full height on the right. */
.post-cta {
  margin: 2.4em 0; padding: 22px 22px 16px; background: #fff3d6; border-radius: 24px;
  border-bottom: 4px solid #ffe08a;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; column-gap: 18px;
}
.post-cta-top { display: contents; }
.post-cta-copy { grid-column: 1; grid-row: 1; min-width: 0; }
.post-cta-shot { grid-column: 2; grid-row: 1; }
.post-cta > :not(.post-cta-top) { grid-column: 1 / -1; }
@media (min-width: 641px) {
  .post-cta-shot { grid-row: 1 / -1; align-self: center; }
  .post-cta > :not(.post-cta-top) { grid-column: 1; align-self: start; }
}
.post-cta-title { margin: 0 0 0.35em; font-weight: 800; font-size: 1.28rem; line-height: 1.25; color: var(--ink-strong); }
.post-cta-title .habi-mini { height: 1.35em; vertical-align: -0.3em; margin-right: 2px; }
.post-cta-body { margin: 0; font-size: 1rem; }
.post-cta-shot { flex-shrink: 0; }
.post-cta-shot .phone { --pw: 118px; box-shadow: 0 6px 0 rgba(74, 66, 56, 0.12); }
.post-cta .waitlist-form, .post-cta-end .waitlist-form { grid-template-columns: minmax(0, 1fr) auto; justify-content: stretch; margin: 16px 0 8px; }
.post-cta .waitlist-result, .post-cta-end .waitlist-result { margin: 16px 0 8px; } /* same spot as the form it replaces */
.post-cta-note { margin: 0; }
.post-cta-note a, .post-cta-end-links a { font-weight: 700; }

/* author box */
.author-box {
  display: flex; gap: 16px; align-items: flex-start; margin: 2.6em 0 0; padding: 20px 22px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius);
}
.author-avatar { width: 64px; height: 64px; flex-shrink: 0; border-radius: 18px; background: var(--teal-soft); padding: 6px; }
.author-name { margin: 0 0 0.2em; color: var(--ink-strong); display: flex; flex-direction: column; }
.author-bio { margin: 0; font-size: 0.97rem; color: var(--muted); }

/* end-of-article / blog index CTA */
.post-cta-end-grid { display: grid; grid-template-columns: 1fr minmax(0, 440px); gap: 48px; align-items: center; }
.post-cta-end-copy { max-width: 540px; }
.post-cta-end-habi { display: block; width: 80px; height: 80px; margin-bottom: 6px; }
.post-cta-end h2 { margin: 0 0 0.35em; }
.post-cta-end .lead { margin: 0; }
.post-cta-end .chip-row { margin-top: 1em; }
.post-cta-end-links { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0.3em 0 0; }
.post-cta-end-links a { display: inline-flex; align-items: center; min-height: 44px; }
.post-cta-end-shots { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 18px; padding: 12px 0; }
.post-cta-end-shots .blob { inset: 6% 0; background: #fff0c7; }
.post-cta-end-shots .phone { --pw: 190px; }
.post-cta-end-shots .phone:last-of-type { margin-top: 36px; }

/* related + prev/next */
.post-more h2 { font-size: 1.6rem; margin-bottom: 0.8em; }
.post-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 32px; }
.post-pager-link {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; text-decoration: none;
  background: var(--cream); border: 1.5px solid var(--line); border-radius: 18px; color: var(--ink-strong);
}
.post-pager-link:hover { border-color: #ffe08a; }
.post-pager-next { grid-column: 2; text-align: right; }

/* store badges (after launch, via AppCtaHelper) */
.store-badges { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 8px; }
.store-badge {
  display: inline-flex; align-items: center; min-height: 48px; padding: 8px 18px; border-radius: 12px;
  background: var(--ink-strong); color: #fff; font-weight: 800; text-decoration: none;
}
.store-badge img { display: block; height: 48px; width: auto; }
.store-badge:has(img) { padding: 0; background: none; }

/* sticky CTA bar: phones only, fixed so it never shifts the layout */
.sticky-cta {
  position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 8px;
  background: var(--ink-strong); border-radius: 18px; box-shadow: 0 6px 0 rgba(47, 42, 35, 0.18);
  transform: translateY(calc(100% + 24px)); visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
.sticky-cta[data-visible="true"] { transform: none; visibility: visible; transition: transform 0.25s ease, visibility 0s; }
.sticky-cta[hidden] { display: none; }
.sticky-cta-link {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 10px;
  color: #fff; font-weight: 800; font-size: 0.98rem; text-decoration: none; line-height: 1.25;
}
.sticky-cta-link .habi-mini { height: 32px; flex-shrink: 0; }
.sticky-cta-close {
  flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 12px; cursor: pointer;
  background: transparent; display: inline-flex; align-items: center; justify-content: center;
}
.sticky-cta-close svg { width: 20px; height: 20px; fill: none; stroke: #cfc4b2; stroke-width: 2.4; stroke-linecap: round; }
.sticky-cta-close:focus-visible, .sticky-cta-link:focus-visible { outline: 3px solid var(--honey); outline-offset: 1px; }
@media (min-width: 861px) { .sticky-cta { display: none; } }

.legal h2 { font-size: 1.25rem; margin-top: 1.8em; }
.legal h1, .support h1 { font-size: clamp(2rem, 4.6vw, 3rem); hyphens: auto; }

@media (max-width: 860px) {
  .hero { padding-top: 28px; }
  .hero-grid, .steps, .features-grid, .footer-cols, .showcase-row, .pricing-grid { grid-template-columns: 1fr; }
  .hero-grid { gap: 12px; }
  .hero-art { width: 100%; max-width: 460px; justify-self: center; } /* keeps Habi and Buddy next to the phone on tablets */
  .hero-art .phone { --pw: min(250px, 64vw); }
  .hero-buddy { width: min(76px, 17vw); top: 34%; right: calc(100% - 7px); }
  .hero-buddy-bubble { left: 14px; top: calc(34% + 6px); font-size: 0.78rem; padding: 5px 11px; max-width: 176px; }
  .hero-habi { right: 2%; width: 34%; }
  .showcase-row { gap: 20px; padding: 28px 0; }
  .showcase-row.is-flipped .showcase-art { order: 0; }
  .showcase-copy, .showcase-row:not(.is-flipped) .showcase-copy { max-width: none; justify-self: stretch; }
  .showcase-art .phone { --pw: min(240px, 62vw); }
  .site-nav { gap: 14px; font-size: 0.88rem; }
  .section { padding: 52px 0; }
  .pricing-grid { gap: 32px; max-width: 560px; }
  .features-grid { grid-template-columns: 1fr 1fr; }
  .footer-cols { grid-template-columns: 1fr 1.6fr; gap: 24px 36px; }
  .footer-cols > :first-child { grid-column: 1 / -1; }
  .demo-grid, .demo-grid.has-video { grid-template-columns: 1fr; gap: 28px; }
  .demo-copy { max-width: none; }
  .post-cards { grid-template-columns: 1fr 1fr; }
  .blog-hero-grid.has-featured, .post-cta-end-grid { grid-template-columns: 1fr; gap: 28px; }
  .post-cta-end-copy { max-width: none; }
}

@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .nav-row { padding: 12px 16px; }
  .site-nav a:not(.btn) { display: none; }
  .footer-cols { grid-template-columns: 1fr; }
  .kicker { font-size: 0.86rem; padding: 6px 14px; border-radius: 16px; text-wrap: balance; }
  .features-grid, .privacy-points { grid-template-columns: 1fr; }
  .privacy-point { grid-template-columns: 48px 1fr; gap: 14px; padding: 16px 16px 16px 14px; }
  .privacy-icon { width: 48px; height: 48px; border-radius: 14px; }
  .privacy-icon img { width: 34px; height: 34px; }
  .compare-table td.compare-us { padding-left: 42px; }
  .compare-yes { left: 12px; top: 10px; }
  .waitlist-form, .post-cta .waitlist-form, .post-cta-end .waitlist-form { grid-template-columns: minmax(0, 1fr); }
  .waitlist-form .btn { width: 100%; }
  .btn-large { padding: 15px 22px; font-size: 1.06rem; }
  /* phones: one tidy card, one promise per row (the free plan highlighted) instead of ragged pills */
  .trust-list {
    display: flex; flex-direction: column; gap: 2px; margin-top: 24px; padding: 8px;
    background: var(--card); border: 1.5px solid var(--line); border-radius: 20px;
  }
  .trust-list li { display: flex; margin: 0; padding: 8px 10px; border: 0; border-radius: 12px; background: none; font-size: 0.93rem; gap: 10px; }
  .demo-habi { width: 84px; height: 84px; }
  .demo-top { padding: 14px; gap: 10px; }
  .demo-tasks { padding: 8px 10px 12px; }
  .demo-goal { margin: 12px 10px 4px; }
  .demo-hex { width: 50px; height: 45px; }
  .demo-hex img { width: 30px; height: 30px; }
  /* phones: the row label spans the card, the two answers sit side by side under it */
  .compare-table tr { display: grid; grid-template-columns: 1fr 1fr; }
  .compare-table thead th:first-child { display: none; }
  .compare-table th, .compare-table td { padding: 10px 12px; font-size: 0.92rem; }
  .compare-table tbody th { grid-column: 1 / -1; width: auto; padding-bottom: 2px; }
  .compare-table tbody td { border-top: 0; padding-top: 6px; }
  .compare-table .compare-us { width: auto; }
  .post-cards { grid-template-columns: 1fr; }
  .post-header { padding-top: 20px; }
  .post-cta { padding: 18px 16px 14px; margin: 2em -4px; }
  .post-cta-shot .phone { --pw: 92px; }
  .post-cta-title { font-size: 1.14rem; }
  .post-cta-end-shots .phone { --pw: min(160px, 40vw); }
  .post-pager { grid-template-columns: 1fr; }
  .buddy-story { grid-template-columns: 1fr; gap: 20px; }
  .buddy-beat { display: grid; grid-template-columns: 104px 1fr; gap: 16px; align-items: center; text-align: left; padding: 14px 18px 14px 14px; }
  .buddy-beat:not(:last-child)::after { content: "↓"; right: auto; top: auto; left: 50px; bottom: -24px; width: 30px; height: 30px; font-size: 0.95rem; }
  .buddy-art { width: 104px; height: 104px; margin: 0; }
  .buddy-note { text-align: left; padding: 14px 18px; }
  .post-pager-next { grid-column: auto; }
  .breadcrumbs [aria-current] { max-width: none; }
}

@media (max-width: 400px) {
  .nav-row { gap: 12px; }
  .brand { font-size: 1.2rem; gap: 7px; }
  .site-nav .btn-small { padding: 8px 14px; font-size: 0.86rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .demo-habi img, .demo-cell, .demo-task, .demo-check { transition: none; }
  .demo[data-pose] .pose-happy, .demo[data-pose] .pose-thrilled { animation: none; }
  .demo-task:active { transform: none; }
  .sticky-cta, .sticky-cta[data-visible="true"] { transition: none; }
  .hero-buddy, .hero-buddy-bubble, .buddy-beat:hover .buddy-art img { animation: none; }
}

/* Account pages (/account/delete, /pair) */
.account-form { display: grid; gap: 10px; max-width: 420px; margin: 1.6em 0 1em; }
.account-form label { font-weight: 700; }
.account-form input[type="email"], .account-form input[type="text"] {
  font: inherit; padding: 13px 16px; border: 2px solid var(--line, #f3e3c7); border-radius: 14px; background: #fff; width: 100%;
}
.account-form input:focus { outline: none; border-color: var(--honey); }
.account-form .btn { justify-self: start; }

/* ---------- founding families (/founding, plan D21) ---------- */
.founding-hero { padding-bottom: 32px; }
.founding-hero-grid { display: grid; grid-template-columns: 7fr 4fr; gap: 40px; align-items: center; }
.founding-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 1.4em; }
.founding-counter {
  display: inline-flex; align-items: center; gap: 9px; font-weight: 800; color: #2f6410;
  background: #e9f7e0; border-radius: 999px; padding: 8px 16px;
}
.founding-counter.is-full { color: #8a5f00; background: #fff3d6; }
.founding-counter-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--leaf); flex-shrink: 0; }
.founding-hero-art { position: relative; display: flex; justify-content: center; padding: 24px 0; }
.founding-habi { position: relative; z-index: 1; width: min(220px, 60vw); height: auto; }
.founding-steps { list-style: none; padding: 0; margin: 0; grid-template-columns: repeat(4, 1fr); text-align: left; }
.founding-steps .step-card:nth-child(4) .step-num { background: var(--ink-strong); }
.founding-deal { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.founding-deal-card { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 28px 28px 22px; }
.founding-deal-card h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin: 0; }
.founding-form-card {
  background: var(--card); border-radius: 28px; padding: 36px 36px 28px; box-shadow: 0 8px 0 var(--line);
  max-width: 640px; margin: 0 auto;
}
.founding-form-card h2 { margin: 0 0 0.3em; }
.founding-form-card > .lead { margin-top: 0; }
.founding-form { display: grid; gap: 22px; margin-top: 1.4em; }
.founding-field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.founding-field[hidden], .founding-age[hidden] { display: none; }
.founding-field > label, .founding-field legend { font-weight: 800; color: var(--ink-strong); padding: 0; margin-bottom: 8px; }
.founding-field legend .small { font-weight: 400; }
.founding-field input[type="email"], .founding-field select {
  font: inherit; padding: 13px 16px; border: 2px solid var(--line); border-radius: 14px; background: #fff;
  width: 100%; min-width: 0; color: var(--ink);
}
.founding-field input:focus, .founding-field select:focus { outline: none; border-color: var(--honey); }
.founding-field.has-error input, .founding-field.has-error select, .founding-field.has-error .founding-option span { border-color: #e05548; }
.founding-hint { margin: 0; }
.founding-options { display: flex; flex-wrap: wrap; gap: 10px; }
.founding-option { position: relative; cursor: pointer; }
.founding-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.founding-option span {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 18px;
  border: 2px solid var(--line); border-radius: 14px; background: #fff; font-weight: 700;
}
.founding-option input:checked + span { border-color: var(--honey-deep); background: #fff3d6; color: var(--ink-strong); }
.founding-option input:focus-visible + span { outline: 3px solid var(--link); outline-offset: 2px; }
.founding-option-round span { width: 48px; padding: 0; border-radius: 50%; }
.founding-sublabel { font-weight: 700; margin: 10px 0 0; }
.founding-ages { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.founding-submit { justify-self: start; }
.founding-privacy { margin: -6px 0 0; }
.founding-errors ul { margin: 6px 0 0; padding-left: 1.2em; }
.founding-apply .waitlist-result { margin: 0 auto; }
.founding-code {
  display: grid; gap: 4px; justify-items: center; margin: 1.4em auto 0; padding: 18px 20px;
  background: #fff3d6; border-radius: 20px; max-width: 420px;
}
.founding-code-label { font-weight: 800; color: #6b4a00; }
.founding-code-value { font-size: 2rem; letter-spacing: 0.12em; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
/* A small pointer to /founding next to the waitlist CTAs (landing, waitlist confirmed page). */
.founding-teaser {
  display: flex; gap: 14px; align-items: center; text-align: left; max-width: 560px; margin: 1.6em auto 0;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 20px; padding: 14px 18px;
}
.founding-teaser img { flex-shrink: 0; }
.founding-teaser p { margin: 0; font-size: 0.95rem; color: var(--muted); }
.founding-teaser strong { color: var(--ink-strong); }
.founding-teaser a { font-weight: 800; white-space: nowrap; }

@media (max-width: 860px) {
  .founding-hero-grid { grid-template-columns: 1fr; gap: 0; }
  .founding-hero-art { display: none; }
  .founding-steps { grid-template-columns: 1fr 1fr; }
  .founding-deal { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .founding-steps { grid-template-columns: 1fr; }
  .founding-form-card { padding: 26px 18px 22px; border-radius: 22px; }
  .founding-submit { justify-self: stretch; }
  .founding-deal-card { padding: 22px 20px 16px; }
  .founding-teaser a { white-space: normal; }
  .founding-count { gap: 8px; }
  .founding-option-round span { width: 44px; min-height: 44px; }
}

/* ---------- pain points strip (home, right under the hero) ----------
   Four everyday frictions, each with what Habibee does about it. Cards on the hero's cream. */
.pains { padding: 36px 0 60px; }
.pains-head { text-align: center; max-width: 720px; margin: 0 auto 26px; }
.pains-head h2 { margin: 0.45em 0 0; }
.pains-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pain { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 20px 20px 22px; }
.pain-icon { display: inline-flex; width: 52px; height: 52px; border-radius: 16px; align-items: center; justify-content: center; }
.pain-icon img { width: 36px; height: 36px; object-fit: contain; }
.pain h3 { margin: 12px 0 0; font-size: 1.08rem; }
.pain p { margin: 10px 0 0; padding-top: 10px; border-top: 1.5px dashed var(--line); color: var(--muted); font-size: 0.97rem; }
@media (max-width: 1023px) { .pains-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .pains { padding: 28px 0 44px; }
  .pains-list { grid-template-columns: 1fr; gap: 14px; }
  .pain { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; padding: 16px 16px 18px 14px; }
  .pain-icon { width: 48px; height: 48px; border-radius: 14px; grid-row: span 2; }
  .pain-icon img { width: 34px; height: 34px; }
  .pain h3 { margin: 2px 0 0; }
  .pain p { margin-top: 8px; padding-top: 8px; }
}

/* ---------- 404 / 500 (ErrorsController; static fallbacks live in public/) ---------- */
.error-page { padding: 32px 0 80px; }
.error-box { max-width: 640px; text-align: center; }
.error-habi { position: relative; width: 180px; margin: 0 auto 4px; }
.error-habi .blob { inset: 4%; }
.error-habi picture { position: relative; z-index: 1; display: block; }
.error-habi img { display: block; width: 100%; height: auto; }
.error-code { margin: 0; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.06em; color: var(--link); }
.error-page h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: 0.2em 0 0.35em; }
.error-page .lead { margin: 0 auto 1.4em; max-width: 520px; }
.error-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn-soft { background: var(--card); border: 1.5px solid var(--line); border-bottom: 4px solid var(--line); }
@media (max-width: 640px) {
  .error-habi { width: 140px; }
  .error-actions .btn { flex: 1 1 100%; text-align: center; }
}

/* Founding families teaser under the blog's end CTA: aligned with the copy column, not centred. */
.post-cta-end .founding-teaser { margin: 1.2em 0 0; }