/* NeverStill page CSS: only what sits inside a visual and the kit lacks (references/system.md).
   The phone frames hold the app's own screens as live HTML, in the app's own type: the serif claim,
   the sans labels, paper ground. Values mirror ios/NavigateKit DesignTokens.swift (day theme). */

/* the client's own mark beside the name */
.brand-mark { width: 26px; height: 26px; color: var(--accent); flex: none; margin-right: var(--s-2); }
.nav__logo { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: 20px; }

/* ---- the phone: one box (the frame is its border), the screen inside it has no box of its own */
.device {
  --dw: 320px; width: min(var(--dw), 100%); aspect-ratio: 9 / 18.5; position: relative; overflow: hidden;
  border: 10px solid #1d2127; border-radius: 44px; background: #f4f1eb; color: #23272c;
}
.device__screen { height: 100%; padding: 40px 20px 20px; display: flex; flex-direction: column; gap: 10px; font-family: var(--font-text); }
.device--sm { --dw: 260px; }
.device--sm .device__screen { padding: 32px 16px 16px; }
.app-top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; color: #4a5a64; margin-bottom: 6px; }
.app-glance { display: grid; grid-template-columns: 76px 1fr; gap: 8px 10px; margin: 0 0 8px; font-size: 13px; }
.app-glance dt { color: #4a5a64; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.app-glance dd { margin: 0; font-family: var(--font-display); font-size: 14px; line-height: 1.35; }
.app-glance .sw { width: 10px; height: 10px; border-radius: 50%; background: #E9C27A; display: inline-block; }
.app-claim { font-family: var(--font-display); font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; margin: 6px 0 0; }
.app-claim--sm { font-size: 22px; }
.app-why { font-size: 14px; color: #4a5a64; margin: 0; }
.app-move { font-family: var(--font-display); font-size: 17px; line-height: 1.3; margin: 10px 0 0; }
.app-note { font-size: 13px; color: #4a5a64; margin: 0; }
.app-answers { display: flex; gap: 8px; margin-top: 4px; }
.app-answers span { flex: 1; text-align: center; font-size: 14px; font-weight: 500; padding: 10px 0; border-radius: 999px; border: 1px solid rgba(35,39,44,.18); }
.app-answers span:first-child { background: #2f7566; border-color: #2f7566; color: #f4f1eb; }
.bubble { font-size: 14px; line-height: 1.45; margin: 0; padding: 10px 12px; border-radius: 16px; background: #ece8e0; max-width: 92%; }
.bubble--me { align-self: flex-end; background: #2f7566; color: #f4f1eb; }
.rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rooms > div { background: #ece8e0; border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; }
.rooms b { font-family: var(--font-display); font-weight: 400; font-size: 16px; }
.rooms span { font-size: 13px; color: #4a5a64; }
.rooms .warm { color: #a85a30; }

/* the hero's picture: the phone standing on the surface panel */
.hero__media--device { display: flex; align-items: center; justify-content: center; padding: var(--s-6); }
.hero__media--device .device { height: 100%; max-height: 640px; width: auto; max-width: 100%; }
.panel--device { --p-h: 440px; height: var(--p-h); display: grid; place-items: end center; padding-top: var(--s-6); overflow: hidden; background: var(--surface); }
.panel--device .device { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; aspect-ratio: auto; height: 100%; }
.limits__visual { display: grid; justify-items: center; }
.limits__visual .device { --dw: 300px; }

/* the reading setting: a two-way switch */
.seg { display: grid; grid-template-columns: 1fr 1fr; background: #ece8e0; border-radius: 999px; padding: 3px; font-size: 13px; font-weight: 500; margin-top: 8px; }
.seg span { text-align: center; padding: 7px 0; border-radius: 999px; color: #4a5a64; }
.seg .is-on { background: #f4f1eb; color: #23272c; box-shadow: 0 0 0 1px rgba(35,39,44,.12); }

/* the two registers, the same line said two ways */
.registers { display: grid; gap: var(--s-5); align-content: start; }
.register { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); display: grid; gap: var(--s-3); }
.register__line { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.25; margin: 0; }
.rows--steps { counter-reset: step; padding: 0 !important; margin-left: 0 !important; list-style: none; }
.rows--steps > li { counter-increment: step; }

/* plans */
.plans { margin-top: 0; align-items: start; }
.card.card--plan > h3 { margin: 0; }
.plan__price { font-size: var(--t-lead); color: var(--muted); margin: 0; }
.plan__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); }
.plan__list li { padding-left: var(--s-5); position: relative; }
.plan__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.plans__note { margin-top: var(--s-6); max-width: 62ch; color: var(--ink); }

/* journal cards */
.post-card { text-decoration: none; color: inherit; }
.post-card .t-label { margin: 0; }
.post-card .panel { --p-h: 200px; height: var(--p-h); background: var(--surface); border-radius: var(--r-md); display: grid; place-items: center; }
.post-card .panel svg { width: 72%; height: 72%; color: var(--accent); }

/* the waitlist form: the kit's field recipe, one column, the chips as real checkboxes */
.wl { display: grid; gap: var(--s-5); --error: #A4453A; }
.wl .btn { width: 100%; }
.chips { border: 0; padding: 0; margin: 0; }
.chips legend { font-size: var(--t-small); font-weight: 500; padding: 0; margin-bottom: var(--s-2); }
.chips__row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--bg); font-size: var(--t-body); font-weight: 400; transition: background .15s, color .15s, border-color .15s; }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip input:focus-visible + span { outline: 2px solid var(--action); outline-offset: 2px; }
.chip input:disabled + span { opacity: .45; }
.form__status.is-ok { color: var(--accent); font-weight: 500; }
.form__status.is-err { color: var(--error); font-weight: 500; }

@media (min-width: 1024px) and (max-width: 1279px) { .panel--device { --p-h: 340px; } #app { --h: 2; } #pricing .card--plan { padding: var(--s-5); } #pricing .plan__list { gap: var(--s-2); } #pricing .faq { row-gap: var(--s-5); } }
@media (min-width: 640px) and (max-width: 1023px) {
  #app { --h: 2; }
  #private .card--plan { min-height: 400px; }
  #how-this-works .limits__visual .device { --dw: 250px; }
}
@media (max-width: 1023px) {
  .hero__media--device { padding: var(--s-5); }
  .hero__media--device .device { height: 100%; }
}
@media (max-width: 639px) {
  .panel--device { --p-h: 340px; }
  .hero__media--device { align-items: flex-start; padding: var(--s-4) var(--s-4) 0; }
  .hero__media--device .device { width: min(300px, 100%); height: 100%; aspect-ratio: auto; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .hero__media--device .device__screen { padding-top: 28px; }
  /* the hero's phone at phone width: the glance rows and the move go, the claim stays whole */
  .hero__media--device .app-glance, .hero__media--device .app-move, .hero__media--device .app-note { display: none; }
  .limits__visual .device { --dw: 300px; }
  #limits .limits__visual { display: none; }
  #waitlist .limits__visual { display: none; }
  #how-this-works .limits__visual .device { --dw: 250px; }
  .post-card .panel { --p-h: 290px; }
}
@media (max-width: 359px) { header.nav .nav__bar > .nav__actions { display: none !important; } }
#waitlist .limits__visual .device { --dw: 280px; }
.wl__pair { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-4); }


/* ---------------------------------------------------------------- Paper and Land, from the app's design system
   design-system/pastel-library.html (life areas, planets, the two pulls), design-system/nature-icons.html (24 grid,
   1.8 stroke, round caps, one solid grain = "this is about your life") and the land scene of
   mockups/paper-and-land-prototype.html (two grains at most, the light falling from each, two hill bands, water,
   the lit patch, two trees). Values copied from those files, not re-picked. */

/* the land behind the hero phone */
.hero__media--device { background: #f6f1e8; }
.hero__media--device .land { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media--device .device { position: relative; z-index: 1; }

/* the planets as grains, each in its own pastel (the pastel library's planet family) */
.grains { list-style: none; padding: 0; margin: 0 0 var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); }
.grains li { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-small); color: var(--ink); }
.grains li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--g); box-shadow: inset 0 0 0 1px rgba(35,39,44,.18), 0 0 0 5px color-mix(in srgb, var(--g) 35%, transparent); }

/* nature icons */
.ni { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ni .g { fill: currentColor; stroke: none; }

/* the waitlist's life areas, each in its area's pastel: tint at rest, fill when chosen, the area's ink on it */
.chip[data-area="work"]     { --a-fill: #AFC3E3; --a-ink: #4B6389; --a-on: #1B2E4C; }
.chip[data-area="love"]     { --a-fill: #F2BCC8; --a-ink: #8F5061; --a-on: #4C1A29; }
.chip[data-area="money"]    { --a-fill: #EDD89A; --a-ink: #7C6100; --a-on: #3E2A00; }
.chip[data-area="family"]   { --a-fill: #EAC9A8; --a-ink: #835C31; --a-on: #442500; }
.chip[data-area="home"]     { --a-fill: #D9C8B4; --a-ink: #746047; --a-on: #3A2A16; }
.chip[data-area="growth"]   { --a-fill: #CBBEEB; --a-ink: #6A598F; --a-on: #33244F; }
.chip[data-area="decision"] { --a-fill: #B5DDE6; --a-ink: #376C77; --a-on: #00343D; }
.chip[data-area] span { gap: var(--s-2); border-color: color-mix(in srgb, var(--a-fill) 70%, var(--ink) 10%); background: color-mix(in srgb, var(--a-fill) 22%, var(--bg)); }
.chip[data-area] .ni { color: var(--a-ink); }
.chip[data-area] input:checked + span { background: var(--a-fill); border-color: var(--a-fill); color: var(--a-on); }
.chip[data-area] input:checked + span .ni { color: var(--a-on); }

/* the two pulls on the Your life rooms: mint gives ease, peach asks more (inks measured in the library) */
.rooms .room--help { background: color-mix(in srgb, #9FD9CF 40%, #f4f1eb); }
.rooms .room--help span { color: #137065; }
.rooms .room--asks { background: color-mix(in srgb, #ECB79B 40%, #f4f1eb); }
.rooms .room--asks span { color: #8F512C; }

/* ---------------------------------------------------------------- Night: the app's night grounds and inks
   (DesignTokens.swift ground0/ground1 night, text-hi/mid, accent night #9FD9CF). The phone screens stay in Day. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --p-bg: #1d2127; --p-surface: #15181d; --p-ink: #f2f6fa; --p-muted: #a7b6c5;
    --p-accent: #9fd9cf; --p-accent-ink: #003931; --p-action: #9fd9cf; --p-action-ink: #003931;
    --p-inv-bg: #f4f1eb; --p-inv-surface: #ece8e0; --p-inv-ink: #23272c; --p-inv-muted: #4a5a64;
    --p-inv-accent: #2f7566; --p-inv-accent-ink: #f4f1eb; --p-inv-action: #2f7566; --p-inv-action-ink: #f4f1eb;
  }
  :root:not([data-theme="light"]) .hero__media--device { background: #1c1f28; }
  :root:not([data-theme="light"]) .land__sky { fill: #1a1d2b; }
  :root:not([data-theme="light"]) .device { border-color: #15181D; }
  :root:not([data-theme="light"]) .chip[data-area] .ni { color: var(--a-fill); }
}

/* ================================================================ round 3 (founder 2026-11-11): more Paper and Land,
   more to do, less to read. Every colour below is from design-system/pastel-library.html (scene tones, family fills)
   or the land of mockups/paper-and-land-prototype.html. */
:root {
  --pl-dawn: #F8E3D2; --pl-paper: #F6F1E8; --pl-haze: #EFEBF6; --pl-mid: #F5F0EA; --pl-low: #ECE6F0;
  --pl-water: #E4EEF1; --pl-neb-lilac: #E2D8F4; --pl-neb-peach: #F8DCCB; --pl-neb-mint: #D2EEE6;
  --pl-hill-b: #B9DECF; --pl-hill-f: #93D1C5; --pl-lake: #BFD9EE; --pl-tree: #6FB5A5;
  --pl-gold: #E9C27A; --pl-lilac: #B9A5E0; --pl-mint: #9FD9CF; --pl-peach: #ECB79B;
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* section grounds */
.g-haze  { background: linear-gradient(180deg, var(--pl-haze), var(--pl-mid)); }
.g-water { background: linear-gradient(180deg, var(--pl-water), var(--pl-mid)); }
.g-dawn  { background: linear-gradient(180deg, var(--pl-dawn), var(--pl-paper)); }
.g-mid   { background: var(--pl-mid); }
.g-hill  { background: linear-gradient(180deg, var(--pl-paper) 0%, var(--pl-neb-mint) 70%, var(--pl-hill-b) 100%); }

/* hero: the land answers the buttons. Gold gives ease, lilac asks more; the other grain dims. */
.sky-top { stop-color: var(--pl-dawn); } .sky-low { stop-color: var(--pl-paper); }
.hero__media--device .shaft, .hero__media--device .grain { transition: opacity .6s ease; }
.hero__media--device[data-pull="help"] .shaft--lilac, .hero__media--device[data-pull="help"] .grain--lilac { opacity: .3; }
.hero__media--device[data-pull="asks"] .shaft--gold, .hero__media--device[data-pull="asks"] .grain--gold { opacity: .3; }
.hero__media--device[data-pull="asks"] .sky-top { stop-color: var(--pl-haze); }
.sky-top, .sky-low { transition: stop-color .6s ease; }
[data-try-screen].is-swapping .app-claim, [data-try-screen].is-swapping .app-why, [data-try-screen].is-swapping .app-move { animation: ns-swap .45s ease both; }
@keyframes ns-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tryit { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-6) 0 0; }
.tryit + .btn-row { margin-top: var(--s-6); }
.tryit__b { min-height: 44px; padding: 0 var(--s-4); border-radius: 999px; font: 500 var(--t-body)/1 var(--font-text); cursor: pointer;
  color: var(--a-ink); border: 1px solid color-mix(in srgb, var(--a-fill) 80%, var(--ink) 8%); background: color-mix(in srgb, var(--a-fill) 30%, var(--bg));
  transition: background .2s, color .2s, transform .15s; }
.tryit__b:hover { transform: translateY(-1px); }
.tryit__b:active { transform: translateY(0) scale(.98); }
.tryit__b[aria-pressed="true"] { background: var(--a-fill); color: var(--a-on); border-color: var(--a-fill); }
.tryit__b:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.tryit__b[data-area="family"] { --a-fill: #EAC9A8; --a-ink: #835C31; --a-on: #442500; }
.tryit__b[data-area="love"]   { --a-fill: #F2BCC8; --a-ink: #8F5061; --a-on: #4C1A29; }
.tryit__b[data-area="work"]   { --a-fill: #AFC3E3; --a-ink: #4B6389; --a-on: #1B2E4C; }
.tryit__b[data-area="money"]  { --a-fill: #EDD89A; --a-ink: #7C6100; --a-on: #3E2A00; }

/* years: the land as the section's ground, the sky and the sun follow the scrubber */
.years { position: relative; overflow: hidden; background: var(--pl-paper); }
.years__land { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.yr-top { stop-color: #FFF6DD; transition: stop-color .7s ease; } .yr-low { stop-color: var(--pl-paper); transition: stop-color .7s ease; }
.yr-sun { transition: transform .7s cubic-bezier(.25,.6,.25,1); }
.years .wrap { position: relative; z-index: 1; }
.years__card { margin-top: var(--s-6); max-width: 640px; min-height: 248px; background: color-mix(in srgb, #fff 72%, transparent);
  border: 1px solid rgba(35,39,44,.08); border-radius: var(--r-lg); padding: var(--s-6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.years__when { margin: 0 0 var(--s-3); color: #4a5a64; }
.years__line { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.2; margin: 0 0 var(--s-3); color: #23272c; }
.years__grain { margin: 0; color: #4a5a64; }
.years__answers { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.years__answers[hidden] { display: none; }
.pill-b { min-height: 44px; padding: 0 var(--s-5); border-radius: 999px; border: 1px solid rgba(35,39,44,.2); background: #fff; color: #23272c; font: 500 var(--t-body)/1 var(--font-text); cursor: pointer; transition: transform .15s, background .2s; }
.pill-b:hover { transform: translateY(-1px); }
.pill-b[aria-pressed="true"] { background: #2f7566; border-color: #2f7566; color: #f4f1eb; }
.years__scrub { margin-top: var(--s-7); max-width: 900px; }
.years__scrub input[type="range"] { width: 100%; accent-color: #2f7566; height: 44px; cursor: pointer; }
.years__ticks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); font-size: var(--t-small); color: #4a5a64; }
.years__ticks li { text-align: center; cursor: pointer; padding: var(--s-2) 0; }
.years__ticks li:first-child { text-align: left; } .years__ticks li:last-child { text-align: right; }
.years__ticks li.is-on { color: #23272c; font-weight: 500; }

/* app panels in the scene's nebula tones */
.panel--device { background: var(--pn, var(--surface)); }

/* the method phone's switch is real now */
.seg__b { appearance: none; border: 0; background: transparent; font: inherit; color: #4a5a64; text-align: center; padding: 7px 0; border-radius: 999px; cursor: pointer; min-height: 32px; }
.seg__b.is-on { background: #f4f1eb; color: #23272c; box-shadow: 0 0 0 1px rgba(35,39,44,.12); }
.seg__b:focus-visible { outline: 2px solid #2f7566; outline-offset: 2px; }

/* three things it never does: tiles in nature pastels */
.never { align-items: stretch; }
.never__t { background: color-mix(in srgb, var(--nv) 45%, var(--bg)); border-color: color-mix(in srgb, var(--nv) 70%, transparent); min-height: 300px; justify-content: flex-start; gap: var(--s-3); transition: transform .2s, background .2s; }
.never__t:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--nv) 65%, var(--bg)); }
.never__t > h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-h3); color: var(--ink); margin-top: auto; }
.ni--big { width: 48px; height: 48px; color: var(--nv-ink); stroke-width: 1.6; }

/* plans: free on the mint of "gives ease", Private on gold light */
.plan--free { background: color-mix(in srgb, var(--pl-mint) 30%, var(--bg)); border-color: color-mix(in srgb, var(--pl-mint) 70%, transparent); }
.plan--private { background: color-mix(in srgb, #F7DE9C 38%, var(--bg)); border-color: color-mix(in srgb, #F7DE9C 80%, transparent); }
.plan--free .plan__list li::before { background: #137065; }
.plan--private .plan__list li::before { background: #816100; }

/* journal card panels each take a planet pastel */
.post-card:nth-child(1) .panel { background: #F5D48A55; } .post-card:nth-child(1) .panel svg { color: #865D00; }
.post-card:nth-child(2) .panel { background: #B8C2E655; } .post-card:nth-child(2) .panel svg { color: #55608B; }
.post-card:nth-child(3) .panel { background: #C3E3A955; } .post-card:nth-child(3) .panel svg { color: #4A6F22; }

/* footer: the hills as its top edge */
.footer--land { position: relative; background: var(--pl-hill-b); padding-top: calc(var(--padt) + 40px); }
.footer__hills { position: absolute; left: 0; right: 0; top: -1px; width: 100%; height: 120px; transform: translateY(-99%); }
.footer--land .wrap { position: relative; }

/* a wide screen: the wrap stays 1280, grounds run full width; a short landscape phone: sections grow with their content */
@media (max-height: 560px) and (orientation: landscape) {
  main > section, footer.closing { height: auto !important; min-height: 100svh; }
  .hero__media--device .device { max-height: 420px; }
}
@media (max-width: 639px) {
  .years__card { min-height: 280px; padding: var(--s-5); }
  .years__ticks { font-size: 12px; }
  .years__ticks li:nth-child(even) { visibility: hidden; }
  .never__t { min-height: 0; }
  .footer__hills { height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .yr-sun, .yr-top, .yr-low, .sky-top, .sky-low, .hero__media--device .shaft, .hero__media--device .grain { transition: none; }
  [data-try-screen].is-swapping * { animation: none !important; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .g-haze { background: linear-gradient(180deg, #1A1D2B, #1C1F28); }
  :root:not([data-theme="light"]) .g-water { background: linear-gradient(180deg, #1B2530, #1C1F28); }
  :root:not([data-theme="light"]) .g-dawn { background: linear-gradient(180deg, #3B3560, #1C1F28); }
  :root:not([data-theme="light"]) .g-mid { background: #1C1F28; }
  :root:not([data-theme="light"]) .g-hill { background: linear-gradient(180deg, #1C1F28, #1E4642); }
  :root:not([data-theme="light"]) .footer--land { background: #1E4642; }
  :root:not([data-theme="light"]) .never__t { background: color-mix(in srgb, var(--nv) 18%, var(--bg)); }
  :root:not([data-theme="light"]) .ni--big { color: var(--nv); }
  :root:not([data-theme="light"]) .plan--free { background: color-mix(in srgb, var(--pl-mint) 14%, var(--bg)); }
  :root:not([data-theme="light"]) .plan--private { background: color-mix(in srgb, #F7DE9C 14%, var(--bg)); }
  :root:not([data-theme="light"]) .tryit__b { color: var(--a-fill); background: color-mix(in srgb, var(--a-fill) 14%, var(--bg)); }
  :root:not([data-theme="light"]) .tryit__b[aria-pressed="true"] { color: var(--a-on); background: var(--a-fill); }
}

/* ---- screen sizes (round 3) */
/* fuller tiles where a section read light at 1440 */
@media (min-width: 1024px) {
  .never__t { min-height: 400px; }
  .post-card .panel { --p-h: 300px; }
}
/* small phones: the hero may grow past one screen rather than crush the phone or the buttons */
@media (max-width: 639px) {
  .hero__kicker { font-size: 13px; }
  .tryit { margin-top: var(--s-5); }
  .tryit__b { padding: 0 var(--s-3); }
}
@media (max-width: 359px), (max-width: 639px) and (max-height: 700px) {
  .hero { height: auto !important; min-height: 100svh; }
  .hero__media--device { height: 320px; flex: none; }
  main > section, footer.closing { height: auto !important; min-height: 100lvh; }
}


/* ================================================================ FLUID LAYOUT (round 4, founder 2026-11-11:
   "I use a large external monitor and it's all going haywire").
   The design kit sizes every section to exactly one screen. On a tall or wide monitor that leaves each section a
   mostly empty screen with its content stuck at the top. Here sections size to their content instead, the gaps
   between them scale with the window, and the content column and type grow with the screen up to a cap, so a
   1440 laptop, a 2560 monitor and a 3440 ultrawide all read as one composed page. This overrides the kit's
   screen rhythm on purpose (its layout checker will report "not one screen"; that is expected). */
:root {
  --container: clamp(1100px, 78vw, 1560px);
  --sec-pad: clamp(72px, 7vw, 148px);
}
main > :is(section, .section):not(.hero), footer.closing {
  height: auto !important; min-height: 0 !important;
  padding: var(--sec-pad) 0 calc(var(--sec-pad) + var(--bar, 0px)) !important;
}
main > :is(section, .section):not(.hero) > :is(.wrap, .container), footer.closing > .wrap { height: auto !important; }
main > :is(section, .section).g2 > .wrap { grid-template-rows: auto auto !important; row-gap: clamp(56px, 5vw, 104px) !important; }
/* the hero: about one screen on a laptop, never taller than it needs on a tall monitor */
.hero { height: auto !important; min-height: min(100svh, 1040px); padding-bottom: clamp(40px, 4vw, 80px) !important; }
.hero > .wrap > .hero-text { height: auto !important; min-height: calc(min(100svh, 1040px) - var(--nav) - var(--hgap, 48px) - 64px); align-items: center; }
.hero__media--device { height: clamp(560px, 72svh, 900px); }
@media (max-width: 1023px) { .hero__media--device { height: clamp(420px, 60svh, 640px); } }
@media (max-width: 639px) { .hero { min-height: 0; } .hero > .wrap > .hero-text { min-height: 0; } .hero__media--device { height: 360px; } }
/* the statement and the years keep a sense of space without an empty screen */
#past { min-height: clamp(420px, 60svh, 720px) !important; display: flex; align-items: center; }
#past > .wrap { width: min(100% - 2 * var(--gut), var(--container)); }
.years { min-height: clamp(680px, 92svh, 1100px) !important; }
/* type grows with big screens (laptops keep the kit's sizes) */
@media (min-width: 1600px) {
  :root {
    --ly-scale: 1.16;
    --t-body: 17px; --t-lead: 20px; --t-card: 20px; --t-h3: 28px;
    --t-h2: clamp(48px, 2.6vw, 64px);
  }
  .device { --dw: 360px; }
  .device--sm { --dw: 300px; }
  .panel--device { --p-h: 500px; }
  .app-claim { font-size: 30px; } .app-claim--sm { font-size: 25px; } .app-why, .bubble { font-size: 15px; }
}
@media (min-width: 2200px) {
  :root { --ly-scale: 1.3; --t-body: 18px; --t-lead: 22px; --t-h3: 32px; --t-h2: clamp(56px, 2.6vw, 72px); }
  .device { --dw: 400px; } .device--sm { --dw: 330px; } .panel--device { --p-h: 560px; }
}

/* ================================================================ round 4: more of the app's own interactions */
.tryit__hint { margin: var(--s-6) 0 0; font-size: var(--t-small); color: var(--muted); }
.tryit__hint + .tryit { margin-top: var(--s-3); }

/* years: big stops a finger can hit, back and next, a plain caption */
.years__hint { margin: var(--s-5) 0 0; max-width: 56ch; color: #4a5a64; }
.years__scrub { display: grid; grid-template-columns: 52px 1fr 52px; gap: var(--s-4); align-items: center; margin-top: var(--s-5); max-width: 1000px; }
.years__track { display: grid; gap: var(--s-1); }
.years__step { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(35,39,44,.18); background: #fff; color: #23272c; font-size: 20px; cursor: pointer; transition: transform .15s, background .2s; }
.years__step:hover:not(:disabled) { transform: translateY(-1px); background: #f4f1eb; }
.years__step:disabled { opacity: .35; cursor: default; }
.years__ticks { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.years__ticks button { appearance: none; border: 0; background: transparent; min-height: 44px; border-radius: 999px; font: 500 var(--t-small)/1.2 var(--font-text); color: #4a5a64; cursor: pointer; padding: 0 4px; }
.years__ticks button:hover { background: rgba(255,255,255,.6); color: #23272c; }
.years__ticks button.is-on { background: #2f7566; color: #f4f1eb; }
.years__ticks button:focus-visible, .years__step:focus-visible { outline: 2px solid #2f7566; outline-offset: 2px; }
@media (max-width: 639px) {
  .years__scrub { grid-template-columns: 44px 1fr 44px; gap: var(--s-2); }
  .years__step { width: 44px; height: 44px; }
  .years__ticks { grid-template-columns: repeat(4, 1fr); }
  .years__ticks button:nth-child(2), .years__ticks button:nth-child(4), .years__ticks button:nth-child(6) { display: none; }
}

/* method: four illustrated steps */
.flow { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; gap: var(--s-3); counter-reset: fl; }
.flow li { display: grid; grid-template-columns: 52px 1fr; gap: var(--s-4); align-items: center; background: color-mix(in srgb, #fff 55%, transparent);
  border: 1px solid rgba(35,39,44,.07); border-radius: var(--r-lg); padding: var(--s-4); }
.flow .ni { width: 52px; height: 52px; padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--fl) 55%, #fff); color: #23272c; box-sizing: border-box; }
.flow b { display: block; font-weight: 500; }
.flow span { color: var(--ink); line-height: 1.45; }

/* the ladder phone */
.ladder .device__screen { gap: 12px; }
.ladder__step { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.ladder__step.is-in > * { animation: ns-swap .4s ease both; }
.ladder__k { margin: 0; font-size: 13px; font-weight: 500; color: #2f7566; }
.ladder__go { margin-top: auto; min-height: 46px; border: 0; border-radius: 999px; background: #2f7566; color: #f4f1eb; font: 500 16px/1 var(--font-text); cursor: pointer; transition: transform .15s; }
.ladder__go:hover { transform: translateY(-1px); }
.ladder__go.is-done { background: #9FD9CF; color: #003931; }
.ladder__back { appearance: none; border: 0; background: none; padding: 0; color: #2f7566; font: 500 13px/1 var(--font-text); cursor: pointer; min-height: 32px; }
.ladder__quiet { appearance: none; border: 0; background: none; color: #4a5a64; font: 400 14px/1 var(--font-text); cursor: pointer; min-height: 36px; }
.ladder__ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ladder__ways li { background: #ece8e0; border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.ladder__hint { margin: var(--s-4) 0 0; text-align: center; color: var(--muted); font-size: var(--t-small); }
.ladder__go:focus-visible, .ladder__back:focus-visible, .ladder__quiet:focus-visible { outline: 2px solid #2f7566; outline-offset: 2px; }

/* the statement sits on the land */
#past { position: relative; overflow: hidden; }
.past__land { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34%; z-index: 0; }
#past > .wrap { position: relative; z-index: 1; }

/* ways: water ground, big tiles in the nature icons */
.g-lake { background: linear-gradient(180deg, #E4EEF1 0%, #D6E6F2 60%, #BFD9EE 100%); }
.ways { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); }
.way { appearance: none; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--s-6); min-height: 200px;
  padding: var(--s-5); border-radius: var(--r-lg); border: 1px solid rgba(35,39,44,.08); background: color-mix(in srgb, #fff 70%, transparent);
  font: 400 var(--t-card)/1.3 var(--font-display); color: #23272c; text-align: left; cursor: pointer; transition: transform .2s, background .2s, box-shadow .2s; }
.way .ni { width: 40px; height: 40px; color: #2B6C7A; }
.way:hover { transform: translateY(-3px); background: #fff; }
.way[aria-pressed="true"] { background: #A9D8E3; border-color: #2B6C7A; box-shadow: inset 0 0 0 1px #2B6C7A; }
.way[aria-pressed="true"] .ni { color: #003540; }
.way:focus-visible { outline: 2px solid #2f7566; outline-offset: 3px; }
.ways__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); margin-top: var(--s-6); }
.ways__do.is-done { background: #9FD9CF; border-color: #9FD9CF; color: #003931; }
.ways__note { margin: 0; color: #23272c; max-width: 60ch; }
@media (max-width: 1023px) { .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) { .ways { grid-template-columns: 1fr 1fr; } .way { min-height: 140px; } .way:last-child { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--s-4); } }

.never__t { min-height: 0 !important; padding-block: var(--s-6); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .g-lake { background: linear-gradient(180deg, #1B2530, #1C1F28); }
  :root:not([data-theme="light"]) .way { background: color-mix(in srgb, #A9D8E3 10%, var(--bg)); color: var(--ink); }
  :root:not([data-theme="light"]) .way .ni { color: #A9D8E3; }
  :root:not([data-theme="light"]) .flow li { background: color-mix(in srgb, #fff 6%, transparent); }
  :root:not([data-theme="light"]) .ways__note { color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) { .ladder__step.is-in > * { animation: none; } }
/* the homepage's journal cards are the journal's own illustrated cards */
#journal .grid > .art-card { grid-column: auto / span 4; }
@media (max-width: 1023px) { #journal .grid > .art-card { grid-column: 1 / -1; } }
/* nothing in the hero may be wider than its column at any width */
.hero__text, .hero__media { min-width: 0; max-width: 100%; }
.hero-text > * { min-width: 0; }
/* the year stops sit on the hills: a light backing keeps them readable (4.5:1 and up) */
.years__ticks { background: rgba(255,255,255,.82); border-radius: 999px; padding: 4px; }
.years__ticks button { color: #4A5A64; }
.years__hint { background: rgba(255,255,255,.7); display: inline-block; padding: 6px 12px; border-radius: 10px; }

/* ================================================================ round 5: fixes from a screen-by-screen audit */
/* 1. headlines never hyphenate ("astrol-ogy") */
h1, h2, h3, .hero h1, .mo-wh__text { hyphens: manual !important; -webkit-hyphens: manual !important; }

/* 2. the hero's land: grains placed inside any crop; the phone always fits its panel */
.hero__media--device { display: grid !important; place-items: center; padding: 24px !important; }
.hero__media--device .device { height: min(640px, 100%) !important; width: auto !important; max-width: 100%; aspect-ratio: 9 / 18.5; }
@media (max-width: 639px) {
  .hero__media--device { place-items: start center; padding: 16px 16px 0 !important; }
  .hero__media--device .device { height: 100% !important; width: min(300px, 100%) !important; aspect-ratio: auto; }
}

/* 3. years: the land is its own picture beside the words, never behind them */
.years { min-height: 0 !important; overflow: visible; }
.years .wrap { position: static; }
.years__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: stretch; }
.years__pic { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 420px; background: #F6F1E8; }
.years__pic .years__land { position: absolute; inset: 0; width: 100%; height: 100%; }
.years__side { display: flex; flex-direction: column; gap: var(--s-5); justify-content: center; min-width: 0; }
.years__card { margin: 0; max-width: none; min-height: 0; background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.years__answers[hidden] { display: flex !important; visibility: hidden; }
.years__ctrl { display: grid; grid-template-columns: 52px 1fr 52px; gap: var(--s-3); align-items: center; }
.years__ctrl input[type="range"] { width: 100%; accent-color: #2f7566; height: 44px; cursor: pointer; margin: 0; }
.years__ticks { display: flex; flex-wrap: wrap; gap: 6px; background: none; padding: 0; border-radius: 0; }
.years__ticks button { flex: 1 1 auto; border: 1px solid rgba(35,39,44,.14); background: #fff; color: #23272c; padding: 0 12px; min-width: 64px; }
.years__ticks button.is-on { background: #2f7566; border-color: #2f7566; color: #f4f1eb; }
.years__hint { background: none; padding: 0; margin: 0; color: var(--muted); }
@media (max-width: 899px) {
  .years__grid { grid-template-columns: 1fr; }
  .years__pic { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 639px) {
  .years__ticks button:nth-child(n) { display: block; }
  .years__ticks button { min-width: calc(25% - 6px); flex: 0 1 calc(25% - 6px); font-size: 13px; padding: 0 4px; }
  .years__ctrl { grid-template-columns: 44px 1fr 44px; }
}

/* 4. the ladder phone is as tall as its step, not a half-empty phone */
.ladder { aspect-ratio: auto !important; min-height: 0; height: auto; }
.ladder .device__screen { height: auto; min-height: 420px; padding-bottom: 24px; }
.ladder__step { height: auto; min-height: 360px; }

/* 5. the waitlist phone's answers are real buttons */
.app-answers button { flex: 1; min-height: 40px; border-radius: 999px; border: 1px solid rgba(35,39,44,.18); background: #fff; color: #23272c; font: 500 14px/1 var(--font-text); cursor: pointer; }
.app-answers button[aria-pressed="true"] { background: #2f7566; border-color: #2f7566; color: #f4f1eb; }
.app-answers button:focus-visible { outline: 2px solid #2f7566; outline-offset: 2px; }

/* 6, 7. the form: no gap before its fine print; email alone on a narrow phone */
.wl .form__status:empty { display: none; }
.wl { gap: var(--s-4); }
@media (max-width: 519px) { .wl__pair { grid-template-columns: 1fr; } }

/* 8. prices in the text face */
.plan__price { font-family: var(--font-text) !important; font-weight: 500; font-size: var(--t-body) !important; color: var(--ink) !important; }

/* panels in the app section: the phone fills its frame at every width */
.panel--device .device { height: 100%; }
/* the hero fits the screen it is on: the picture never taller than the window, the headline a size that fits */
@media (min-width: 1024px) {
  .hero__media--device { height: min(calc(100svh - 150px), 860px) !important; min-height: 460px; align-self: center; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .hero h1 { font-size: clamp(44px, 4.6vw, 58px); } }
@media (min-width: 1024px) and (max-height: 820px) { .hero h1 { font-size: clamp(44px, 4.2vw, 62px); } .tryit__hint { margin-top: var(--s-4); } .tryit + .btn-row { margin-top: var(--s-5); } }
/* year stops: two even rows at every width */
.years__ticks { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.years__ticks button { min-width: 0 !important; width: 100%; }

/* ================================================================ round 6: night, legible (founder 2026-11-11: "it all
   goes dark, almost illegible"). The night is a dusk, not a black: the grounds lift to a slate blue, the inks go to
   paper white, quiet text stays at 7:1 or more, and every Paper and Land tint sits on a card a step lighter than the
   page. The phone screens stay in Day. Measured, not eyeballed: every text node on every page at 4.5:1 or better. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --p-bg: #2A2F3B; --p-surface: #1D2127; --p-ink: #F4F1EB; --p-muted: #D6E6F2;
    --n-card: #353B4A; --n-card-2: #3F4657;
    --line: rgb(246 242 234 / .14); --line-strong: rgb(246 242 234 / .3);
  }
  :root:not([data-theme="light"]) body { background: var(--p-bg); }
  /* section grounds: dusk tones from the same scene, never darker than the page */
  :root:not([data-theme="light"]) .g-haze { background: linear-gradient(180deg, #3B3560, #2A2F3B); }
  :root:not([data-theme="light"]) .g-water, :root:not([data-theme="light"]) .g-lake { background: linear-gradient(180deg, #34495E, #2A2F3B); }
  :root:not([data-theme="light"]) .g-dawn { background: linear-gradient(180deg, #3B3560, #2A2F3B); }
  :root:not([data-theme="light"]) .g-mid { background: #2A2F3B; }
  :root:not([data-theme="light"]) .g-hill { background: linear-gradient(180deg, #2A2F3B, #34504B); }
  :root:not([data-theme="light"]) .hero__media--device { background: #3B3560; }
  /* the word-by-word statement: unlit words still read (about 5:1), lit words are paper white */
  :root:not([data-theme="light"]) .mo-wh .mo-w { color: color-mix(in oklab, var(--ink) 66%, #3B3560); }
  :root:not([data-theme="light"]) .mo-wh .mo-w.is-on { color: var(--ink); }
  :root:not([data-theme="light"]) .mo-wh strong .mo-w.is-on { color: var(--pl-mint); }
  /* cards: a step lighter than the page, the pastel as a tint on top */
  :root:not([data-theme="light"]) .never__t { background: color-mix(in srgb, var(--nv) 16%, var(--n-card)); border-color: color-mix(in srgb, var(--nv) 40%, transparent); }
  :root:not([data-theme="light"]) .never__t:hover { background: color-mix(in srgb, var(--nv) 24%, var(--n-card)); }
  :root:not([data-theme="light"]) .never__t > p, :root:not([data-theme="light"]) .card > p { color: var(--muted); }
  :root:not([data-theme="light"]) .plan--free { background: color-mix(in srgb, var(--pl-mint) 16%, var(--n-card)); }
  :root:not([data-theme="light"]) .plan--private { background: color-mix(in srgb, #F7DE9C 14%, var(--n-card)); }
  :root:not([data-theme="light"]) .plan--free .plan__list li::before { background: var(--pl-mint); }
  :root:not([data-theme="light"]) .way { background: color-mix(in srgb, #A9D8E3 12%, var(--n-card)); }
  :root:not([data-theme="light"]) .ways__note { color: var(--muted); }
  :root:not([data-theme="light"]) .wl.card, :root:not([data-theme="light"]) .card { --card: var(--n-card); }
  :root:not([data-theme="light"]) .chip span { background: var(--n-card); }
  :root:not([data-theme="light"]) .chip[data-area] span { background: color-mix(in srgb, var(--a-fill) 14%, var(--n-card)); color: var(--ink); }
  :root:not([data-theme="light"]) .chip[data-area] input:checked + span { color: var(--a-on); }
  :root:not([data-theme="light"]) .form__status.is-ok { color: var(--pl-mint); }
  :root:not([data-theme="light"]) .wl { --error: #ffb4a8; }
  /* the closing footer on the hills: a night green with paper inks (the kit's lit-ground inks are for a light ground) */
  :root:not([data-theme="light"]) .footer--land {
    background: #3E625B; color: #F4F1EB;
    --bg: #3E625B; --surface: #34504B; --ink: #F4F1EB; --muted: #D2EEE6;
    --action: #F4F1EB; --action-ink: #1E4642; --accent: #9FD9CF;
    --line: rgb(246 242 234 / .18); --line-strong: rgb(246 242 234 / .34);
  }
  :root:not([data-theme="light"]) .footer__hills path:first-child { fill: #34504B; }
  :root:not([data-theme="light"]) .footer__hills path:last-child { fill: #3E625B; }
  /* journal and glossary */
  :root:not([data-theme="light"]) .art-top { background: linear-gradient(180deg, color-mix(in srgb, var(--af) 22%, #2A2F3B), #2A2F3B); }
  :root:not([data-theme="light"]) :is(.art-card, .art-fig, .short-answer, .prose-side .prose-toc, .prose-toc-m) { background: var(--n-card); color: var(--ink); }
  :root:not([data-theme="light"]) .gl-term { background: color-mix(in srgb, var(--gc) 14%, var(--n-card)); color: var(--ink); border-color: color-mix(in srgb, var(--gc) 40%, transparent); }
  :root:not([data-theme="light"]) .gl-jump a { background: var(--n-card); color: var(--ink); }
  :root:not([data-theme="light"]) .gl-jump a:hover { background: var(--n-card-2); }
  :root:not([data-theme="light"]) :is(.fg-legend li > span:last-child, .vb__ends, .fg-steps span) { color: var(--muted); }
  :root:not([data-theme="light"]) .fg-steps li { background: color-mix(in srgb, var(--k) 16%, var(--n-card-2)); }
  :root:not([data-theme="light"]) .fg-name { fill: var(--ink); } :root:not([data-theme="light"]) .fg-num { fill: var(--muted); }
  :root:not([data-theme="light"]) :is(.prose-body p .link, .prose-body li .link, .gl-term .link, .short-answer .link) { color: var(--pl-mint); }
  :root:not([data-theme="light"]) .short-answer .t-label { color: var(--pl-mint); }
  :root:not([data-theme="light"]) :is(.art-card__desc, .art-fig figcaption) { color: var(--muted); }
  :root:not([data-theme="light"]) .prose-body tbody tr:nth-child(even) td { background: var(--n-card); }
}

/* ================================================================ round 7 (founder 2026-11-12): every colour from the
   library, design-system/pastel-library.html 0.2. backend/tests/test_site_palette.py fails on a literal that is not in
   it. Fills carry their day ink for text on Day and the fill itself on Night, as the library measures them. */
:root { --ground-bg: #B9DECF; --ground-surface: #F6F1E8; --ground-ink: #23272C; --ground-muted: #4A5A64; --ground-accent: #2F7566; }
.chip[data-area="health"] { --a-fill: #B9E2C0; --a-ink: #3C7048; --a-on: #073818; }
.flow .ni { color: var(--fi, #23272C); }
.grains li { background: var(--g); color: var(--go); padding: 6px 12px; border-radius: 999px; font-weight: 500; }
.grains li::before { display: none; }
.fg-legend b { color: var(--ki, inherit); }
.gl-term h2 { color: var(--gi, inherit); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .flow .ni { color: var(--fl); background: color-mix(in srgb, var(--fl) 22%, #353B4A); }
  :root:not([data-theme="light"]) .fg-legend li[style*="--ki"] b { color: var(--k); }
  :root:not([data-theme="light"]) .gl-term h2 { color: var(--gc); }
  :root:not([data-theme="light"]) .g-haze { background: linear-gradient(180deg, #4B3538, #2A2F3B); }
}