/* Nura — the site, v2 ("daybreak", light).
   The page moves like the app's day: it opens on a morning sky with the day's path,
   the work happens in clear daylight, and it closes on a warm horizon. Coral stays for the one thing to do. */
/* Inter Tight from this site, not Google: no second and third origin to reach before
   the text shows. The Latin set only (Google's own split); fonts/OFL.txt is its licence. */
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/InterTight-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/InterTight-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/InterTight-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --cream: #FAF7F0; --layer: #F3EEE2; --subtle: #EFE9DB; --card: #FFFFFF;
  --ink: #171313; --ink-2: #4A4340; --ink-3: #7B7360; --mute: #958B77;
  --coral: #FF6B35; --coral-deep: #C2410C; --on-coral: #3B1204; --ink-nu: #1B1830;
  --navy: #0B1029; --navy-2: #111838; --navy-3: #161D42; --blue: #2F4BC9;
  --star: #F2F4FB;
  --font: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease-pop: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(16px, 5vw, 40px);
  --r-lg: 28px; --r-md: 20px;
}

/* ─── a section's light: the same names, different values ─── */
.day   { --bg: #FFFFFF; --text: var(--ink); --sub: var(--ink-2); --mh: var(--ink-3); --line: rgba(23,19,19,.08);
         --tile: #FFFFFF; --tile-2: #FBF6F1; --card-border: rgba(23,19,19,.09);
         --card-bg: #FFFFFF; }
.cream { --bg: var(--cream); }
/* the sky (hero), the tint (Nu's blue wash) and the dawn (the close) share the daylight values */
.sky, .tint, .dawn {
  --bg: #FFFFFF; --text: var(--ink); --sub: var(--ink-2); --mh: var(--ink-3); --line: rgba(23,19,19,.08);
  --tile: #FFFFFF; --tile-2: #FBF6F1; --card-border: rgba(23,19,19,.09);
  --card-bg: #FFFFFF;
}
/* Nu's blue at the top warming to Ra's orange at the bottom */
.tint { background-image: linear-gradient(180deg, #FFFFFF 0%, #EFF4FC 20%, #FFFFFF 52%, #FFF3EA 82%, #FFFFFF 100%); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body { margin: 0; background: #FFFFFF; color: var(--ink); font: 500 16px/1.5 var(--font); letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
section { position: relative; background-color: var(--bg); color: var(--text); overflow-x: clip; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
/* the room above and under a section: two of these sit between one section and the next */
.pad { padding-block: clamp(32px, 3.6vw, 52px); }
.pt0 { padding-top: 0; }
p { margin: 0; }

/* ─── type ─── */
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.045em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: clamp(40px, 6.2vw, 78px); line-height: 1; }
h2 { font-size: clamp(34px, 4.8vw, 60px); }
h3 { font-size: 21px; letter-spacing: -0.03em; line-height: 1.15; }
.mh { color: var(--mh); }
.block { display: block; }
.lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--sub); max-width: 34em; margin: 18px 0 0; text-wrap: pretty; }
.kicker, .eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 24px; padding: 7px 14px 7px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--tile-2); font-size: 13px; font-weight: 500; letter-spacing: .01em; color: var(--sub); }
.kicker::before, .eyebrow i { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.eyebrow i { display: block; }
.saga .kicker { padding: 0; border: 0; background: none; }
.saga .kicker::before { display: none; }

/* ─── buttons: the one action is coral, the other is a ghost ─── */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 26px; border-radius: 26px;
       font: 600 16px var(--font); letter-spacing: -0.01em; text-decoration: none; border: 0; cursor: pointer;
       transition: transform .25s var(--ease-pop), background-color .2s, box-shadow .25s; }
.btn:active { transform: scale(.97); }
.btn-coral { background: var(--coral); color: var(--on-coral); }
.btn-sm { height: 40px; padding: 0 18px; border-radius: 20px; font-size: 14.5px; }
.link { display: inline-flex; align-items: center; height: 52px; padding: 0 22px; border-radius: 26px; border: 1px solid var(--line);
        font-weight: 600; text-decoration: none; color: var(--text); transition: background-color .2s, border-color .2s; }
.link:hover { background: var(--tile-2); border-color: var(--sub); }
button.link { background: none; font: 600 14px var(--font); cursor: pointer; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 8px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 36px; }

/* ─── header: clear over the sky, solid white once it moves ─── */
header { position: sticky; top: 0; z-index: 10; background: #FFFFFF; border-bottom: 1px solid transparent;
  transition: background-color .25s, border-color .25s; }
header.scrolled { border-bottom-color: rgba(23,19,19,.08); }
.bar { display: flex; align-items: center; gap: 28px; height: 64px; }
.wordmark { display: block; width: 77px; height: 22px; background: var(--ink); transition: background-color .25s;
  -webkit-mask: url(assets/wordmark.png) center / contain no-repeat; mask: url(assets/wordmark.png) center / contain no-repeat; }
.bar nav { display: flex; gap: 26px; margin-left: auto; font-size: 15px; color: var(--ink-2); transition: color .25s; }
.bar nav a { text-decoration: none; }
.bar nav a:hover { color: var(--ink); }
.bar nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
/* small screens: the pages are behind a menu button (site.js adds it), and
   open as a panel under the bar */
.menu-btn { display: none; }
@media (max-width: 800px) {
  .bar { gap: 10px; }
  .bar .btn { margin-left: auto; white-space: nowrap; }
  .bar .wordmark { flex: none; }
  .menu-btn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%;
    border: 1px solid rgba(23,19,19,.14); background: #FFFFFF; color: var(--ink); cursor: pointer; }
  .menu-btn svg path { transition: transform .25s var(--ease-pop), opacity .2s; transform-origin: 12px 12px; }
  header.open .menu-btn .a { transform: translateY(4px) rotate(45deg); }
  header.open .menu-btn .b { transform: translateY(-4px) rotate(-45deg); }
  header.open, body:has(.hero.sky) header.open:not(.scrolled) { background: #FFFFFF; border-bottom-color: transparent; }
  .bar nav { display: none; position: absolute; left: 0; right: 0; top: 64px; margin: 0; padding: 4px 24px 14px; flex-direction: column; gap: 0;
    background: #FFFFFF; border-bottom: 1px solid rgba(23,19,19,.08); font-size: 18px; color: var(--ink); }
  header.open .bar nav { display: flex; }
  .bar nav a { display: flex; align-items: center; min-height: 54px; border-bottom: 1px solid rgba(23,19,19,.07); }
  .bar nav a:last-child { border-bottom: 0; }
}
/* the narrowest phones: the button gives up some padding before its words wrap */
@media (max-width: 340px) {
  .bar .btn { padding-inline: 14px; font-size: 14px; }
}

/* over the sky hero the header is clear until the page moves */
body:has(.hero.sky) header { margin-bottom: -65px; }
body:has(.hero.sky) header:not(.scrolled) { background: transparent; }

/* ─── a phone: the real screenshot in a dark bezel ─── */
.phone { position: relative; width: 100%; max-width: 300px; margin: 0; padding: 7px; border-radius: 46px; background: #171313; }
.phone img, .phone video { width: 100%; border-radius: 39px; background: #F3EEE2; }
.phone video { display: block; height: auto; }
.phone::after { content: ""; position: absolute; top: 7px; left: 50%; width: 30%; aspect-ratio: 126 / 37; margin-top: 2.6%; transform: translateX(-50%); border-radius: 999px; background: #000; }
.stage { position: relative; display: grid; place-items: center; }
.stage .phone { position: relative; }

/* ─── the sky hero ─── */
.hero { padding-block: clamp(48px, 7vw, 96px) clamp(56px, 8vw, 104px); }
.hero.sky { overflow: hidden; overflow: clip; isolation: isolate; padding: calc(65px + clamp(28px, 4vw, 52px)) 0 0; background:
    radial-gradient(55% 60% at 88% 18%, rgba(255,150,100,.16), transparent 70%),
    radial-gradient(45% 50% at 0% 100%, rgba(255,190,150,.16), transparent 70%), #FFFFFF; }
.hx-copy { position: relative; z-index: 2; text-align: center; max-width: 1040px; }
.hx-copy h1 { margin: 0 auto; max-width: 20ch; font-size: clamp(46px, 8vw, 112px); line-height: .96; letter-spacing: -0.055em; }
/* the second half of the headline in the sun's colour, coral into a deeper
   orange: dark enough to read on the light sky at this size */
.hx-copy h1 .mh { color: #E8551C; background: linear-gradient(95deg, #FF6B35 0%, #F25C22 45%, #D9480F 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hx-copy .lead { margin: 20px auto 0; }
.hx-copy .cta { justify-content: center; }

/* the horizon: the app's day path, the phone rising behind it */
.hx-stage { position: relative; height: clamp(440px, 52vw, 620px); margin-top: clamp(40px, 5vw, 64px); }
.hx-arc { position: absolute; inset: 0; width: 100%; height: 100%; }
.hx-sun { position: absolute; left: 50%; bottom: -30%; width: min(1100px, 120vw); aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255,150,100,.22), rgba(255,190,150,.10) 50%, transparent 75%); }
.hx-stage .phone { position: absolute; left: 50%; top: 0; width: clamp(260px, 26vw, 340px); max-width: none; transform: translateX(-50%); z-index: 2; }
/* three phones fanned out (how it works) */
.hx-stage.fan .phone { width: clamp(220px, 21vw, 290px); }
.hx-stage.fan .phone:nth-of-type(1) { transform: translateX(-148%) translateY(70px) rotate(-7deg); z-index: 1; }
.hx-stage.fan .phone:nth-of-type(3) { transform: translateX(48%) translateY(70px) rotate(7deg); z-index: 1; }

/* floating cards: what Nu is holding */
.hx-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px;
  border-radius: 18px; border: 1px solid rgba(23,19,19,.09); background: #FFFFFF;
  color: var(--ink); font-size: 14px; white-space: nowrap; animation: hx-float 7s ease-in-out infinite; }
.hx-chip b { font-weight: 600; }
.hx-chip small { display: block; font-size: 12px; color: var(--ink-3); }
.hx-chip .dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; flex: none; background: #F1F3FB; color: var(--blue); }
.hx-chip .t { margin-left: 14px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.hx-chip .t em { font-style: normal; font-size: 11px; color: var(--ink-3); margin-left: 1px; }
.hx-chip.c1 { right: calc(50% + clamp(170px, 16vw, 210px)); top: 12%; }
.hx-chip.c2 { right: calc(50% + clamp(150px, 14vw, 190px)); top: 34%; animation-delay: -2.5s; }
.hx-chip.c2 .dot { background: #FBF6F1; color: var(--ink-2); }
.hx-chip.c3 { left: calc(50% + clamp(160px, 15vw, 200px)); top: 48%; background: var(--coral); border-color: transparent; color: var(--on-coral); animation-delay: -4.5s; }
.hx-chip.c3 small, .hx-chip.c3 .t em { color: rgba(59,18,4,.68); }
.hx-chip.c3 .dot { background: rgba(59,18,4,.14); color: var(--on-coral); }
@keyframes hx-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* the sun rides one line across the page and through the phone, where it is
   the day's path (site.js). As it passes, each of the day's things comes up
   beside the phone and lands in its stack, and stays. Hidden only once the
   script is running, so without it the phone simply shows its day. */
.hx-line { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* the home page's stage: bigger on a big screen, and pinned while the sun
   crosses it when the window is tall enough to hold all of it (site.js sets
   .pin and the run's height) */
.hx-run { position: relative; margin-top: clamp(28px, 3.5vw, 44px); }
.hx-run .hx-stage { margin-top: 0; height: clamp(440px, 52vw, 760px); }
.hx-run .hx-stage .phone { width: clamp(260px, 22vw, 520px); }
.hx-run.pin .hx-stage { position: sticky; top: 84px; }
.hx-stage .hx-chip { z-index: 4; transition: opacity .6s ease, translate .6s ease; }
.hx-stage.rising .hx-chip:not(.on) { opacity: 0; translate: 0 14px; }
.hx-stage .hx-chip.fly { animation-play-state: paused; opacity: 0;
  transition: translate .75s cubic-bezier(.55,0,.2,1), scale .75s cubic-bezier(.55,0,.2,1), opacity .25s ease .5s; }
.phone.live [data-slot] { transition: opacity .45s ease, translate .55s cubic-bezier(.2,.8,.2,1); }
.hx-stage.rising .phone.live [data-slot]:not(.in) { opacity: 0; translate: 0 -10px; }

/* the phone in the hero, drawn instead of a screenshot: the app's Home in
   its own points (--u is one), so it scales with the phone */
.phone.live { container-type: inline-size; }
.scr { --u: calc(100cqw / 390); position: relative; overflow: hidden; aspect-ratio: 780 / 1696; border-radius: 39px;
  background: var(--cream); color: var(--ink); font-size: calc(16 * var(--u)); line-height: 1.2; letter-spacing: -0.02em; }
/* not a screenshot: its pictures are cut out, with no card behind them */
.scr img { border-radius: 0; background: none; }
.scr .sb { display: flex; align-items: center; justify-content: space-between; height: calc(50 * var(--u));
  padding: calc(6 * var(--u)) calc(34 * var(--u)) 0 calc(52 * var(--u)); font-size: calc(16.5 * var(--u)); font-weight: 600; letter-spacing: 0; }
.scr .sbi { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.scr .sig { width: calc(17 * var(--u)); height: calc(11 * var(--u)); background:
  linear-gradient(var(--ink), var(--ink)) 0 100% / 19% 35% no-repeat, linear-gradient(var(--ink), var(--ink)) 27% 100% / 19% 55% no-repeat,
  linear-gradient(var(--ink), var(--ink)) 54% 100% / 19% 78% no-repeat, linear-gradient(var(--ink), var(--ink)) 100% 100% / 19% 100% no-repeat; }
.scr .bat { position: relative; width: calc(24 * var(--u)); height: calc(12 * var(--u)); border-radius: calc(3.5 * var(--u));
  border: 1px solid rgba(23,19,19,.35); background: linear-gradient(90deg, var(--ink) 72%, transparent 72%) content-box; padding: 1.5px; }
.scr .tp { display: flex; align-items: center; justify-content: space-between; padding: calc(10 * var(--u)) calc(22 * var(--u)) 0 calc(24 * var(--u)); }
.scr .wordmark { width: calc(72 * var(--u)); height: calc(21 * var(--u)); }
.scr .av { display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%;
  background: #FFFFFF; border: 1px solid rgba(23,19,19,.07); }
.scr .av img { width: 58%; }
.scr .hi { margin: calc(18 * var(--u)) calc(24 * var(--u)) 0; font-size: calc(32 * var(--u)); line-height: 1.04; font-weight: 600; letter-spacing: -0.055em; }
.scr .hi .n { display: block; color: var(--mute); }
/* the day: the page's line crosses the horizon at Start and Day ends */
.scr .day { position: relative; height: calc(148 * var(--u)); margin: 0 calc(23 * var(--u)); }
.scr .day .hz { position: absolute; left: 0; right: 0; top: calc(92 * var(--u)); height: 1px; background: rgba(23,19,19,.16); }
.scr .day .s, .scr .day .e { position: absolute; z-index: 1; top: calc(92 * var(--u)); width: calc(9 * var(--u)); height: calc(9 * var(--u));
  margin: calc(-4 * var(--u)) 0 0 calc(-4.5 * var(--u)); border-radius: 50%; background: var(--ink); }
.scr .day .s { left: 10%; }
.scr .day .e { left: 90%; }
/* inside the two dots: outside them the line runs down off the day */
.scr .ends { position: absolute; left: calc(10% + 6 * var(--u)); right: calc(10% + 6 * var(--u)); top: calc(100 * var(--u)); display: flex; justify-content: space-between;
  font-size: calc(11.5 * var(--u)); color: var(--ink-2); }
.scr .ends b { display: block; margin-bottom: 1px; font-size: calc(21 * var(--u)); font-weight: 400; letter-spacing: -0.05em; color: var(--ink); }
.scr .ends .r { text-align: right; }
.scr .hold { margin: calc(4 * var(--u)) calc(24 * var(--u)) calc(9 * var(--u)); font-size: calc(10.5 * var(--u)); font-weight: 600; letter-spacing: .14em; color: var(--ink-3); }
/* the stack: stones behind, the one Nu found in front (TodayStack in the app) */
.scr .stack { margin: 0 calc(12 * var(--u)); }
.scr .row { position: relative; display: flex; align-items: center; gap: calc(11 * var(--u)); height: calc(80 * var(--u));
  margin-bottom: calc(-24 * var(--u)); padding: 0 calc(16 * var(--u)) calc(24 * var(--u)); border-radius: calc(28 * var(--u)); border: 1px solid rgba(255,255,255,.6); }
.scr .row.lil { background: #D9DAF2; color: #4338CA; }
.scr .row.pnk { background: #FCDBE2; color: #BE185D; }
.scr .g { display: grid; place-items: center; flex: none; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; background: rgba(255,255,255,.4); }
.scr .g svg { width: 54%; height: 54%; }
.scr .row b { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: calc(15 * var(--u)); font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }
.scr .row .v { font-size: calc(20 * var(--u)); letter-spacing: -0.05em; color: var(--ink); }
.scr .row .v small { font-size: calc(10.5 * var(--u)); letter-spacing: 0; color: var(--ink-3); }
.scr .front { position: relative; width: auto; border-radius: calc(28 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u)); }
.scr .front .nu { position: absolute; top: calc(-12 * var(--u)); right: calc(14 * var(--u)); width: calc(60 * var(--u)); }
.scr .front small { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(13.5 * var(--u)); font-weight: 600; opacity: 1; }
.scr .front small .g { width: calc(28 * var(--u)); height: calc(28 * var(--u)); background: rgba(59,18,4,.10); }
.scr .front b { margin: calc(10 * var(--u)) calc(64 * var(--u)) 0 0; font-size: calc(22 * var(--u)); letter-spacing: -0.05em; line-height: 1.1; }
.scr .front em { margin: calc(6 * var(--u)) 0 0; font-size: calc(12 * var(--u)); opacity: .75; }
.scr .front .row2 { display: flex; align-items: flex-end; justify-content: space-between; margin-top: calc(14 * var(--u)); }
.scr .front .begin { width: calc(60 * var(--u)); height: calc(60 * var(--u)); font-size: calc(14 * var(--u)); }
.scr .front .m { font-size: calc(48 * var(--u)); line-height: .82; }
.scr .front .m small { display: inline; font-size: calc(12 * var(--u)); }
.scr .tb { position: absolute; left: calc(16 * var(--u)); right: calc(16 * var(--u)); bottom: calc(26 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); }
.scr .pill { flex: 1; display: flex; height: calc(58 * var(--u)); padding: calc(4 * var(--u)); border-radius: 999px; border: 1px solid rgba(23,19,19,.12); background: var(--layer); }
.scr .pill span { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--u));
  border-radius: 999px; font-size: calc(10 * var(--u)); color: var(--ink-2); letter-spacing: 0; }
.scr .pill span.on { background: #FBE3D2; color: var(--ink); }
.scr .pill svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.scr .pill span.on svg { color: var(--coral-deep); }
.scr .plus { display: grid; place-items: center; flex: none; width: calc(58 * var(--u)); height: calc(58 * var(--u)); border-radius: 50%;
  background: var(--ink-nu); color: #FFFFFF; font-size: calc(28 * var(--u)); font-weight: 300; }
@media (max-width: 900px) {
  .hx-chip { display: none; }
  .hx-stage.fan .phone:nth-of-type(1), .hx-stage.fan .phone:nth-of-type(3) { display: none; }
}

/* a page hero without a picture (how it works has phones; legal pages are light) */
.hero.sky.short { padding-bottom: clamp(72px, 10vw, 128px); }
.hero:not(.sky) { background: radial-gradient(55% 70% at 85% 0%, rgba(255,150,100,.14), transparent 70%), #FFFFFF; }


/* ─── section heads ─── */
.head { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 6vw, 80px); align-items: end; }
.head.center { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.head.center .lead { margin-inline: auto; }
/* every numbered section opens the same way: its number, its title and its
   line centred, what it shows under them (Kim, 28 September) */
.head.center .rest-ra { display: block; margin: 0 auto 10px; }
.panel > .split.under { margin-top: clamp(24px, 3vw, 36px); }
.split.under .points { margin-top: 0; }
.points.trio { grid-template-columns: repeat(3, 1fr); column-gap: clamp(20px, 3vw, 44px); max-width: none; margin: clamp(20px, 2.6vw, 32px) 0 0; align-items: start; }
.points.trio li { border-bottom: 1px solid var(--line); }
.learn-stack .learn-demo { justify-self: auto; margin: clamp(24px, 3vw, 36px) auto 0; }
@media (max-width: 860px) { .points.trio { grid-template-columns: 1fr; } .points.trio li:not(:last-child) { border-bottom: 0; } }
@media (max-width: 860px) { .head { grid-template-columns: 1fr; } }
.num { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--coral-deep); font-variant-numeric: tabular-nums; }

/* ─── cards: one recipe, a fill and a hairline ─── */
.card, .tile, .roadmap, .suggest, .who, .path, .demo-in, .demo-out, .bd-say, .bd-sort, .nm-move, .nm-card, .learn-task {
  border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text); }
.tile { border-radius: var(--r-lg); padding: 28px; transition: transform .5s var(--ease-pop); }
.tile p { margin-top: 8px; color: var(--sub); font-size: 15.5px; }
@media (hover: hover) { .tile:hover { transform: translateY(-4px); } }

/* bullet list with rings */
.points { list-style: none; margin: 30px 0 0; padding: 0; display: grid; max-width: 32em; }
.points li { display: flex; gap: 14px; align-items: baseline; padding: 15px 0; border-top: 1px solid var(--line); color: var(--sub); }
.points li:last-child { border-bottom: 1px solid var(--line); }
.points b { color: var(--text); font-weight: 600; }
.points i { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--coral); transform: translateY(1px); }

/* words on one side, the picture on the other */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 96px); align-items: center; }
.split.flip > :first-child { order: 2; }
.split .stage .phone { max-width: 290px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split.flip > :first-child { order: 0; } }

/* ─── "You see one move": the whole project as one path ─── */
.path { position: relative; margin-top: clamp(44px, 6vw, 72px); padding: 32px clamp(20px, 3vw, 40px) 36px; border-radius: 32px; }
.path-title { font-size: 21px; font-weight: 600; letter-spacing: -0.035em; }
.path-title span { display: block; font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--sub); margin-bottom: 4px; }
.path-steps { list-style: none; margin: 0; padding: 230px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; position: relative; }
.path-steps::before { content: ""; position: absolute; left: 8px; right: 8px; top: 237px; border-top: 2px dotted rgba(23,19,19,.22); }
.path-steps li { position: relative; display: grid; gap: 6px; align-content: start; padding-top: 30px; font-size: 15px; }
.path-steps li > i { position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--coral); background: #fff; }
.path-steps li b { font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.path-steps li > em { font-style: normal; font-size: 12.5px; color: var(--sub); }
.path-steps li.done b { color: var(--sub); text-decoration: line-through; font-weight: 500; }
.path-steps li.done > i { background: var(--coral); }
.path-steps li.now > i { background: var(--coral); box-shadow: 0 0 0 6px rgba(255,107,53,.18); }
.path-steps li.now > em { color: var(--coral-deep); font-weight: 600; }
.path-steps .note { margin-top: 6px; padding: 8px 10px; border-radius: 12px; background: #FBF6F1; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; display: block; }
.path-steps .note b { font-weight: 600; }
.path-card { position: absolute; left: -18px; bottom: calc(100% + 18px); width: 260px; box-shadow: 0 22px 40px -16px rgba(190,70,20,.45); }
.path-card small { font-weight: 600; }
.path-card em { display: block; font-style: normal; font-size: 12px; font-weight: 500; opacity: .75; margin: -8px 0 12px; }
.path-card::after { content: ""; position: absolute; left: 22px; top: 100%; height: 18px; border-left: 2px dotted rgba(255,107,53,.6); }
.path-ra { position: absolute; left: 248px; bottom: calc(100% + 40px); width: 120px; pointer-events: none; }
@media (max-width: 900px) {
  .path-steps { grid-template-columns: 1fr; padding: 18px 0 0 34px; gap: 18px; }
  .path-steps::before { left: 7px; right: auto; top: 26px; bottom: 16px; border-top: 0; border-left: 2px dotted rgba(23,19,19,.22); }
  .path-steps li { padding-top: 0; }
  .path-steps li > i { left: -34px; top: 1px; }
  .path-card { position: relative; left: auto; bottom: auto; width: auto; max-width: 300px; margin-top: 10px; }
  .path-card::after, .path-ra { display: none; }
}

/* the one move: Home's front card */
.front { width: 100%; background: var(--coral); color: var(--on-coral); border-radius: 22px; padding: 16px 16px 14px; }
.front small { display: block; font-size: 11.5px; font-weight: 600; opacity: .8; }
.front b { display: block; font-size: 19px; letter-spacing: -0.04em; line-height: 1.1; margin: 6px 0 14px; font-weight: 600; }
.front em { display: block; font-style: normal; font-size: 11.5px; font-weight: 500; opacity: .75; margin: -8px 0 12px; }
.front .row { display: flex; align-items: flex-end; justify-content: space-between; }
.front .begin { width: 52px; height: 52px; border-radius: 50%; background: var(--ink-nu); color: var(--cream); display: grid; place-items: center; font-size: 12.5px; font-weight: 600; }
.front .m { font-size: 40px; line-height: .9; letter-spacing: -0.06em; font-weight: 400; }
.front .m small { display: inline; font-size: 12px; letter-spacing: 0; font-weight: 500; opacity: 1; }

/* ─── "It learns you" (on Nu's blue wash) ─── */
.learn-split { align-items: center; }
.learn-demo { display: grid; gap: 14px; max-width: 540px; justify-self: end; width: 100%; }
.learn-task { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 22px; transition: background-color .5s, border-color .5s; }
.learn-task .glyph { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: #F1F3FB; color: var(--blue); flex: none; }
.learn-task .t { flex: 1; font-size: 16px; letter-spacing: -0.02em; }
.learn-task .v b { font-size: 30px; font-weight: 400; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.learn-task .v small { font-size: 12px; color: var(--sub); margin-left: 2px; }
.learn-task.bumped { background: #FFF1E8; border-color: rgba(255,107,53,.4); }
.suggest { border-radius: 22px; padding: 16px; display: grid; grid-template-columns: 52px 1fr; gap: 12px; max-width: 460px; }
.suggest img { width: 52px; height: 52px; }
.suggest p { font-size: 15px; color: var(--text); line-height: 1.45; }
.suggest small { display: block; margin-top: 8px; font-size: 12.5px; color: var(--sub); }
.suggest .act { display: flex; gap: 16px; align-items: center; margin-top: 12px; }
.suggest .yes { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--text); background: var(--tile-2); font-size: 13.5px; font-weight: 600; color: var(--text); }
.suggest .no { font-size: 13.5px; color: var(--sub); }
.suggest.big { max-width: none; grid-template-columns: 60px 1fr; gap: 16px; padding: 24px; border-radius: 26px; transition: opacity .45s var(--ease-pop), transform .45s var(--ease-pop); }
.suggest.big img { width: 60px; height: 60px; }
.suggest.big p { font-size: clamp(16px, 1.6vw, 18px); letter-spacing: -0.015em; }
.suggest.big small { font-size: 13.5px; }
.suggest.big .act { margin-top: 18px; gap: 18px; }
.suggest.big button { font: 600 15px var(--font); cursor: pointer; background: none; border: 0; }
.suggest.big .yes { padding: 10px 24px; border: 0; background: var(--coral); color: var(--on-coral); }
.suggest.big .yes:hover { background: var(--ink); color: #fff; }
.suggest.big .no { color: var(--sub); padding: 9px 4px; }
.suggest.big .no:hover { color: var(--text); }
.suggest.big.gone { opacity: 0; transform: translateY(-8px) scale(.98); pointer-events: none; }
.learn-after { min-height: 24px; margin: 0; font-size: 15px; color: var(--text); }
.learn-again { justify-self: start; height: 40px; }
.stack-cards { display: grid; gap: 12px; margin-top: 30px; }

/* ─── the live demo: say it, Nu sorts it ─── */
.demo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(36px, 5vw, 56px); }
.demo-in, .demo-out { border-radius: var(--r-lg); padding: 24px; }
.demo-k { font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--sub); margin-bottom: 12px; }
.pile { position: relative; height: 180px; overflow: hidden; border-radius: 18px; background: #FBF6F1; }
.pile span { position: absolute; left: var(--l); bottom: var(--b); transform: rotate(var(--r)); padding: 6px 12px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(23,19,19,.12); color: var(--ink-2); font-size: 13px; white-space: nowrap;
  animation: fall .9s both; transition: opacity .35s, transform .35s; }
.pile span.away { opacity: 0; transform: translateX(40px) rotate(var(--r)) scale(.9); }
@keyframes fall {
  0%   { transform: translateY(-240px) rotate(calc(var(--r) * -2)); animation-timing-function: cubic-bezier(.5, 0, .9, .4); }
  70%  { transform: translateY(0) rotate(var(--r)); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  83%  { transform: translateY(-8px) rotate(calc(var(--r) * 1.2)); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  100% { transform: translateY(0) rotate(var(--r)); }
}
.demo-form { display: flex; gap: 8px; margin-top: 14px; }
.demo-form input { flex: 1; min-width: 0; height: 48px; padding: 0 18px; border-radius: 24px; border: 1px solid rgba(23,19,19,.16); font: 500 16px var(--font); background: #fff; color: var(--ink); }
.demo-form input:focus { outline: 2px solid var(--coral); outline-offset: 2px; }
.demo-form button { height: 48px; padding: 0 20px; border-radius: 24px; border: 0; background: var(--ink-nu); color: #fff; font: 600 15px var(--font); cursor: pointer; }
.demo-tries { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; font-size: 13px; color: var(--sub); }
.demo-tries span { margin-right: 2px; }
.demo-tries button { padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(23,19,19,.14); background: #fff; font: 500 13px var(--font); color: var(--ink-2); cursor: pointer; }
.demo-tries button:hover { border-color: var(--ink); color: var(--ink); }
.demo-front { margin-bottom: 12px; animation: rise .6s var(--ease-pop) both; }
.demo-front em { min-height: 14px; }
.demo-list { list-style: none; margin: 0; padding: 0; display: grid; }
.demo-list li { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid rgba(23,19,19,.08); animation: rise .5s var(--ease-pop) both; }
.demo-list li:last-child { border-bottom: 0; }
.demo-list li b { font-size: 15px; font-weight: 500; letter-spacing: -0.02em; }
.demo-list .chips-row { display: flex; flex-wrap: wrap; gap: 5px; }
.demo-list .chips-row span { padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(23,19,19,.1); font-size: 12px; color: var(--ink-2); background: #fff; }
.demo-list .chips-row span.held { color: var(--sub); border-style: dashed; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .demo { grid-template-columns: 1fr; } }

/* your next move (site.js): the one thing at full size with the planner's
   facts, what comes after it, the day you have, and what Nu says when you
   tell it the day changed */
.nm-when { display: flex; justify-content: center; gap: 4px; width: max-content; max-width: 100%; margin: clamp(20px, 2.6vw, 30px) auto 0; padding: 4px; border-radius: 999px; background: rgba(23,19,19,.05); }
.nm-when button { height: 44px; padding: 0 20px; border-radius: 999px; border: 0; background: transparent; font: 500 15.5px var(--font); letter-spacing: -0.01em; color: var(--ink-2); cursor: pointer; }
.nm-when button[aria-pressed="true"] { background: #FFFFFF; color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(23,19,19,.12); }
.nm-when + .nm { margin-top: 18px; }
.nm { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; margin-top: clamp(24px, 3vw, 36px); align-items: start; }
.nm-move { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: clamp(24px, 3vw, 34px); }
.nm-move::before { content: ""; position: absolute; right: -90px; top: -100px; width: 340px; height: 340px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,176,103,.42), rgba(255,138,92,.16) 45%, rgba(255,107,53,0) 100%); }
.nm-ra { position: absolute; right: 22px; top: 18px; width: 96px; height: 96px; pointer-events: none; }
.nm-k { position: relative; display: block; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--coral-deep); }
.nm-title { position: relative; display: block; margin: 12px 120px 0 0; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -0.045em; font-weight: 600; text-wrap: balance; }
.nm-about { position: relative; margin: 10px 0 0; font-size: 17px; color: var(--ink-2); }
.nm-facts { position: relative; list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-height: 30px; }
.nm-facts li { padding: 5px 11px; border-radius: 8px; background: rgba(23,19,19,.05); font-size: 14.5px; color: var(--ink-2); }
.nm-acts { position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.nm-acts .btn { height: 52px; padding-inline: 34px; font-size: 17px; border: 0; cursor: pointer; font-family: var(--font); }
.nm-q, .nm-changed button { height: 52px; padding: 0 22px; border-radius: 26px; border: 1px solid rgba(23,19,19,.18); background: transparent;
  font: 500 16px var(--font); letter-spacing: -0.01em; color: var(--ink); cursor: pointer; transition: background-color .2s, border-color .2s; }
.nm-q:hover, .nm-changed button:hover, .nm-q[aria-expanded="true"] { background: rgba(23,19,19,.05); border-color: rgba(23,19,19,.3); }
.nm-changed { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); animation: rise .35s var(--ease-pop) both; }
.nm-changed[hidden] { display: none; }
.nm-changed button { height: 44px; padding: 0 16px; border-radius: 22px; font-size: 15px; }
.nm-note { position: relative; display: flex; align-items: center; gap: 12px; margin: 18px 0 0; padding: 12px 14px; border-radius: 16px; background: #EFF4FC; font-size: 15.5px; color: var(--ink); animation: rise .4s var(--ease-pop) both; }
.nm-note[hidden] { display: none; }
.nm-note img { flex: none; width: 40px; height: 40px; }
.nm-note span { flex: 1; min-width: 0; }
.nm-note .link { flex: none; }
.nm-move.swap .nm-title, .nm-move.swap .nm-about, .nm-move.swap .nm-facts { animation: rise .45s var(--ease-pop) both; }
.nm-move.going .nm-facts li { background: rgba(255,107,53,.14); color: var(--coral-deep); font-weight: 600; }
.nm-side { display: grid; gap: 16px; }
.nm-then { grid-column: 1 / -1; }
.nm-card { border-radius: var(--r-lg); padding: 22px 24px; }
.nm-after { list-style: none; margin: 0; padding: 0; }
.nm-after li { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 6px 0; border-bottom: 1px solid var(--line); animation: rise .4s var(--ease-pop) both; }
.nm-after li:last-child { border-bottom: 0; }
.nm-after i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(23,19,19,.18); font-style: normal; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.nm-after span { flex: 1; min-width: 0; }
.nm-after b { display: block; font-size: 16px; font-weight: 500; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-after small { display: block; font-size: 13.5px; color: var(--ink-2); }
.nm-after em { flex: none; font-style: normal; font-size: 14.5px; color: var(--ink-2); }
.nm-after .none { min-height: 0; padding: 8px 0 2px; font-size: 15px; color: var(--ink-2); border: 0; }
.nm-day .demo-k { display: flex; justify-content: space-between; }
.nm-clock { letter-spacing: 0; text-transform: none; font-weight: 500; font-size: 13.5px; }
.nm-left { display: block; font-size: 32px; letter-spacing: -0.05em; font-weight: 600; line-height: 1.1; }
.nm-leftk, .nm-done { display: block; font-size: 15px; color: var(--ink-2); }
.nm-done { margin-top: 10px; }
.nm-done[hidden] { display: none; }
.nm-learned ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nm-learned li { display: flex; align-items: baseline; gap: 12px; font-size: 15px; color: var(--ink-2); }
.nm-learned b { flex: none; min-width: 58px; font-size: 22px; letter-spacing: -0.04em; font-weight: 600; color: var(--ink); }
.nm-learned small { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.nm-last { display: block; margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.nm-events { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); font-size: 15px; }
.nm-events li { display: flex; gap: 12px; padding: 3px 0; }
.nm-events em { font-style: normal; color: var(--ink-2); min-width: 72px; }
@media (max-width: 860px) {
  .nm { grid-template-columns: 1fr; }
  .nm-then { order: 1; }
  .nm-side { order: 2; }
  .nm-title { margin-right: 84px; }
  .nm-ra { width: 72px; height: 72px; right: 14px; top: 14px; }
  .nm-acts .btn, .nm-q { height: 50px; }
}

/* the breakdown (Try it, site.js): what you said, each piece marked and named
   as Nu reads it, then the pieces sorted, the big one in steps, and the
   planner's pick in front */
.bd { display: grid; grid-template-columns: 1.05fr 1fr; gap: 16px; margin-top: clamp(24px, 3vw, 36px); align-items: start; }
.bd-say, .bd-sort { border-radius: var(--r-lg); padding: 24px 26px; }
.bd-mess { margin: 6px 0 0; min-height: 170px; font-size: clamp(19px, 1.9vw, 24px); line-height: 2.05; letter-spacing: -0.02em; color: var(--ink); overflow-wrap: anywhere; }
.bd-mess .f { transition: color .5s ease; }
.bd-mess.read .f { color: var(--mute); }
.bd-mess.typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.12em; background: var(--coral); animation: bd-caret 1s steps(1) infinite; }
@keyframes bd-caret { 50% { opacity: 0; } }
.bd-mess mark { position: relative; color: inherit; background: none; border-radius: 6px; padding: 2px 3px; margin: 0 -3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: box-shadow .45s ease; }
.bd-mess mark.on { box-shadow: inset 0 -0.5em 0 var(--hl); }
.bd-mess mark::before { content: attr(data-tag); position: absolute; left: 3px; bottom: calc(100% - 4px); white-space: nowrap; line-height: 1;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tag);
  opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease; }
.bd-mess mark.on::before { opacity: 1; transform: none; }
.bd-mess .k-task { --hl: rgba(47,75,201,.16); --tag: var(--blue); }
.bd-mess .k-project { --hl: rgba(255,107,53,.24); --tag: var(--coral-deep); }
.bd-mess .k-feel { --hl: rgba(149,139,119,.2); --tag: var(--ink-3); }
.bd .demo-form input { font-size: 15.5px; }
.bd-wait { display: flex; align-items: center; gap: 12px; margin: 8px 0 0; font-size: 15px; color: var(--ink-2); }
.bd-wait[hidden] { display: none; }
.bd-wait img { width: 64px; height: 64px; animation: hx-float 3s ease-in-out infinite; }
.bd-reply { margin: 0 0 14px; font-size: 16px; color: var(--ink-2); animation: rise .5s var(--ease-pop) both; }
.bd-reply b { color: var(--ink); font-weight: 600; }
.bd-front { margin-bottom: 14px; animation: rise .6s var(--ease-pop) both; }
.bd-front em { min-height: 14px; }
.bd-list { list-style: none; margin: 0; padding: 0; }
.bd-list > li { display: grid; gap: 7px; padding: 12px 0; border-bottom: 1px solid rgba(23,19,19,.08); animation: rise .45s var(--ease-pop) both; }
.bd-list > li:last-child { border-bottom: 0; }
.bd-list > li.picked { opacity: .45; }
.bd-list b { font-size: 15.5px; font-weight: 500; letter-spacing: -0.02em; }
.bd-list .chips-row { display: flex; flex-wrap: wrap; gap: 5px; }
.bd-list .chips-row span { padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(23,19,19,.1); font-size: 12px; color: var(--ink-2); background: #fff; }
.bd-list .chips-row span.proj { border-color: transparent; background: rgba(255,107,53,.14); color: var(--coral-deep); font-weight: 600; }
.bd-say { position: sticky; top: 88px; }
.bd-plan { margin: 6px 0 2px; padding-left: 14px; border-left: 2px solid rgba(255,107,53,.4); display: grid; gap: 4px; }
.bd-phase { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; animation: rise .4s var(--ease-pop) both; }
.bd-phase:first-child { margin-top: 2px; }
.bd-rest { display: grid; gap: 4px; }
.bd-rest[hidden] { display: none; }
.bd-rest .bd-phase:first-child { margin-top: 12px; }
.bd-more { justify-self: start; height: 40px; margin: 8px 0 4px; padding: 0 16px; border-radius: 20px; border: 1px solid rgba(23,19,19,.18); background: #fff;
  font: 500 14px var(--font); letter-spacing: -0.01em; color: var(--ink); cursor: pointer; animation: rise .4s var(--ease-pop) both; }
.bd-more:hover { background: rgba(23,19,19,.05); border-color: rgba(23,19,19,.3); }
.bd-list > li { scroll-margin-top: 96px; }
.bd-phase b { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--coral-deep); }
.bd-phase span { font-size: 12px; color: var(--sub); }
.bd-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.bd-steps > li { display: grid; gap: 5px; padding: 7px 0; font-size: 14px; color: var(--ink-2); animation: rise .4s var(--ease-pop) both; }
.bd-steps .st { display: flex; align-items: baseline; gap: 10px; }
.bd-steps .n { flex: none; width: 18px; font-size: 12px; color: var(--sub); font-variant-numeric: tabular-nums; }
.bd-steps .t { flex: 1; min-width: 0; }
.bd-steps .m { flex: none; font-size: 12.5px; color: var(--sub); }
.bd-steps > li.first .t { color: var(--ink); font-weight: 600; }
.bd-steps small { margin-left: 28px; font-size: 12px; color: var(--sub); }
.bd-need { list-style: none; margin: 0 0 2px 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.bd-need li { display: flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 8px; background: #FBF6F1; font-size: 12.5px; color: var(--ink-2); }
.bd-need li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 3px; border: 1.5px solid rgba(23,19,19,.3); }
@media (max-width: 860px) { .bd { grid-template-columns: 1fr; } .bd-mess { min-height: 0; } .bd-say { position: static; } }

/* ─── recovery: a quiet panel ─── */
.panel { border-radius: 36px; padding: clamp(24px, 3.4vw, 44px); background: #FBF6F1; border: 1px solid var(--line); }
.rest-ra { width: 140px; margin: 0 0 8px -10px; }

/* ─── the tour (how it works) ─── */
.tour { display: grid; gap: clamp(48px, 6vw, 80px); }
.tour .split .stage .phone { max-width: 280px; }
.part-n { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; font-size: 14px; font-weight: 600; color: var(--sub); }
/* how it works: each part's number and title centred over its column */
.tour .part-n { justify-content: center; }
.tour .split h2, .tour .learn h2 { text-align: center; }
.part-n b { font-size: clamp(44px, 5vw, 64px); font-weight: 600; letter-spacing: -0.06em; line-height: .9; color: var(--coral-deep); font-variant-numeric: tabular-nums; }
.tour-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; margin-top: 44px; }
.tour-cards .suggest { max-width: none; }
@media (max-width: 760px) { .tour-cards { grid-template-columns: 1fr; } }
.tour .learn { grid-template-columns: 1fr; }
.tour .learn .stack-cards { grid-template-columns: repeat(2, minmax(0, 460px)); }
@media (max-width: 860px) { .tour .learn .stack-cards { grid-template-columns: 1fr; } }

.roadmap { border-radius: var(--r-lg); padding: 24px 24px 20px; }
.roadmap .t { font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--sub); }
.roadmap .g { font-size: 20px; font-weight: 600; letter-spacing: -0.035em; margin: 4px 0 12px; }
.roadmap ol { list-style: none; margin: 0; padding: 0; }
.roadmap li { position: relative; display: grid; grid-template-columns: 12px 1fr auto; gap: 12px; align-items: baseline; padding: 9px 0; font-size: 14.5px; line-height: 1.3; }
.roadmap li + li::before { content: ""; position: absolute; left: 5px; top: -9px; height: 20px; border-left: 2px dotted rgba(23,19,19,.2); }
.roadmap li i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--coral); transform: translateY(1px); }
.roadmap li.done { color: var(--sub); }
.roadmap li.done span { text-decoration: line-through; }
.roadmap li.done i { background: var(--coral); }
.roadmap li.now { font-weight: 600; }
.roadmap li.now i { background: var(--coral); box-shadow: 0 0 0 4px rgba(255,107,53,.18); }
.roadmap li em { font-style: normal; font-size: 12px; color: var(--sub); font-weight: 500; }
.roadmap li.now em { color: var(--coral-deep); font-weight: 600; }
.roadmap .fix { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: var(--tile-2); font-size: 13px; color: var(--ink-2); }
.roadmap .fix b { font-weight: 600; color: var(--text); }

/* on a phone, what sits beside a phone mockup stays beside it */
@media (max-width: 860px) {
  .split.side { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); grid-auto-flow: row dense; column-gap: 14px; row-gap: 0; align-items: start; }
  .split.side > .rv:not(.stage) { display: contents; }
  .split.side > .rv:not(.stage) > * { grid-column: 1 / -1; }
  .split.side > .rv:not(.stage) > .points, .split.side > .rv:not(.stage) > .stack-cards { grid-column: 2; margin-top: 24px; }
  .split.side > .stage { grid-column: 1; margin-top: 24px; }
  .split.side.flip > :first-child { order: 0; }
  .split.side .stage .phone { max-width: 100%; padding: 5px; border-radius: 30px; }
  .split.side .stage .phone img { border-radius: 25px; }
  .split.side .points li { font-size: 13.5px; line-height: 1.4; padding: 10px 0; gap: 10px; }
  .split.side .points i { width: 8px; height: 8px; }
  .split.side .suggest { grid-template-columns: 28px 1fr; gap: 8px; padding: 12px 11px; border-radius: 18px; }
  .split.side .suggest img { width: 28px; height: 28px; }
  .split.side .suggest p { font-size: 12.5px; }
}
@media (max-width: 560px) { .split.side .stage .phone { padding: 4px; border-radius: 24px; } .split.side .stage .phone img { border-radius: 20px; } }

/* ─── the story page, below the saga ─── */
.story-p { font-size: clamp(19px, 2vw, 24px); line-height: 1.5; color: var(--sub); max-width: 30em; margin-top: 26px; text-wrap: pretty; }
.story-p b { color: var(--text); font-weight: 600; }
/* the pull line and the roles list are story.css's */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(36px, 5vw, 56px); }
.trio .tile { display: grid; grid-template-rows: 150px auto auto 1fr; }
.trio .tile img { height: 140px; width: auto; justify-self: start; object-fit: contain; }
.trio .tile h3 { font-size: 22px; margin-top: 10px; }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; } }
.does { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.does li { display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; color: var(--ink-2); }
.does li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-1px); background: var(--coral); }
.does.nu li::before { background: var(--blue); }
.does.bb li::before { background: #1E6FD9; }

/* ─── prose (privacy, terms, support) ─── */
.prose { max-width: 740px; }
.prose h1 { font-size: clamp(38px, 5vw, 62px); }
.prose h2 { font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -0.035em; margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(23,19,19,.08); }
.prose p, .prose li { color: var(--ink-2); font-size: 17px; line-height: 1.65; }
.prose p { margin-top: 14px; }
.prose ul { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.prose li::marker { color: var(--coral); }
.prose b { color: var(--ink); font-weight: 600; }
.prose a { color: var(--coral-deep); text-underline-offset: 3px; }
.prose .updated { margin-top: 18px; font-size: 14px; color: var(--ink-2); }
/* the legal documents: numbered sections, a key points card, contents, tables */
.legal h1 + .updated + p { margin-top: 32px; }
.legal h2 { scroll-margin-top: 88px; }
.legal h2 .n { color: var(--ink-2); margin-right: 10px; font-variant-numeric: tabular-nums; }
.legal h3 { margin: 32px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: var(--ink); }
.legal ol { margin: 14px 0 0; padding-left: 22px; display: grid; gap: 6px; }
.legal address { margin-top: 14px; font-style: normal; color: var(--ink-2); font-size: 17px; line-height: 1.65; }
.legal .conspicuous { color: var(--ink); font-weight: 600; }
.legal .summary, .legal .toc { margin-top: 40px; padding: 24px 26px 26px; border: 1px solid rgba(23,19,19,.08); border-radius: 20px; background: #FFF8F2; }
.legal .toc { background: #FFFFFF; }
.legal .summary h2, .legal .toc h2 { margin: 0; padding: 0; border: 0; font-size: 13px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-2); }
.legal .summary ul { margin-top: 14px; }
.legal .summary > p { font-size: 14px; color: var(--ink-2); }
.legal .toc ol { columns: 2; column-gap: 32px; display: block; margin-top: 14px; }
.legal .toc li { break-inside: avoid; margin-bottom: 6px; font-size: 15.5px; }
.legal .toc li::marker { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.legal .toc a { color: var(--ink-2); text-decoration: none; }
.legal .toc a:hover { color: var(--coral-deep); text-decoration: underline; }
.legal .table-wrap { margin-top: 18px; overflow-x: auto; border: 1px solid rgba(23,19,19,.08); border-radius: 16px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.legal th, .legal td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(23,19,19,.08); color: var(--ink-2); }
.legal th { background: #FFF8F2; color: var(--ink); font-weight: 600; font-size: 14px; }
.legal tr:last-child td { border-bottom: 0; }
.legal td:first-child { color: var(--ink); }
@media (max-width: 640px) {
  .legal .toc ol { columns: 1; }
  .legal .summary, .legal .toc { padding: 20px; }
  .legal table { font-size: 14px; }
  .legal th, .legal td { padding: 10px 12px; min-width: 140px; }
}
.faq { max-width: 760px; margin-top: 40px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--cream); font-weight: 400; font-size: 20px; line-height: 1; color: var(--ink-2); transition: transform .3s var(--ease-pop); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--sub); max-width: 40em; }

/* ─── the close: the horizon warming, Done's ground ─── */
.dawn { text-align: center; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #FFFDFA 0%, #FFF1E6 45%, #FFD6BD 100%); }
.dawn .wrap { display: grid; justify-items: center; }
.dawn h2 { max-width: 16em; }
.dawn .ra { width: 200px; height: 200px; object-fit: contain; }
.dawn .lead { margin-inline: auto; }
.dawn .cta { justify-content: center; }
.signup { display: flex; gap: 8px; width: 100%; max-width: 500px; margin: 34px auto 0; padding: 6px; border-radius: 32px;
  background: #FFFFFF; border: 1px solid rgba(59,18,4,.18); }
.signup input[type="email"] { flex: 1; min-width: 0; height: 50px; padding: 0 20px; border-radius: 26px; border: 0; background: transparent;
  color: var(--ink); font: 500 16px var(--font); letter-spacing: -0.01em; }
.signup input[type="email"]::placeholder { color: #A89E8C; }
.signup input[type="email"]:focus { outline: none; }
.signup:focus-within { border-color: rgba(255,107,53,.6); }
.signup button { flex: none; height: 50px; }
.signup button[disabled] { opacity: .6; cursor: default; }
.form-state { min-height: 22px; margin-top: 12px; font-size: 14.5px; color: var(--sub); }
.form-state.ok { color: var(--on-coral); font-weight: 600; }
.answers { list-style: none; margin: 26px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; font-size: 13.5px; color: var(--sub); }
.answers li { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--tile-2); }
.answers a { color: var(--coral-deep); font-weight: 600; text-decoration: none; }
.badge { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px; border-radius: 16px; background: #000; color: #fff; margin-top: 34px; text-align: left; }
.badge small { display: block; font-size: 11px; opacity: .8; font-weight: 500; letter-spacing: 0; }
.badge span { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; }
@media (max-width: 520px) { .signup { flex-direction: column; border-radius: 24px; } .signup button { width: 100%; } }

/* ─── footer ─── */
footer { background: #FFD6BD; color: var(--on-coral); }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-block: 32px 40px; font-size: 14px; }
footer .wordmark { background: var(--on-coral); width: 63px; height: 18px; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer nav a { text-decoration: none; opacity: .75; }
footer nav a:hover { opacity: 1; }
footer .c { margin-left: auto; opacity: .7; }

/* ─── the moving characters ─── */
.mover { height: auto; pointer-events: none; }

/* ─── sections ease in once; nothing moves for people who asked for less motion ─── */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease-pop), transform .8s var(--ease-pop); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; }
  .hx-chip, .pile span, .demo-front, .demo-list li, .bd-reply, .bd-front, .bd-list > li, .bd-steps li, .bd-phase, .bd-mess.typing::after, .nm-note, .nm-changed, .nm-after li, .nm-move.swap .nm-title, .nm-move.swap .nm-about, .nm-move.swap .nm-facts { animation: none !important; }
}

/* ─── small screens: nothing to read is under 14px, running text is 16px
   (Kim, 28 September). The phones are pictures of the app and keep their own
   sizes. ─── */
@media (max-width: 860px) {
  body { font-size: 16px; }
  .lead { font-size: 17px; }
  .points li, .tile p, .does li, .roadmap li, .suggest p, .path-steps li, .bd-list b, .demo-list li b,
  .learn-after, .form-state, .answers, .legal .toc li, .bd-wait, .bd-reply, .demo-form button, .suggest.big button,
  .bd .demo-form input, .learn-task .t { font-size: 16px; }
  .split.side .points li, .split.side .suggest p, .bd-steps > li, footer .wrap, .legal table, .legal .summary > p,
  .prose .updated, button.link, .btn-sm { font-size: 15px; }
  .num, .kicker, .eyebrow, .demo-k, .demo-tries, .demo-tries button, .bd-list .chips-row span, .demo-list .chips-row span,
  .bd-phase b, .bd-phase span, .bd-steps .n, .bd-steps .m, .bd-steps small, .bd-need li, .suggest small, .suggest.big small,
  .suggest .yes, .suggest .no, .front small, .front em, .front .begin, .front .m small, .learn-task .v small, .badge small,
  .roadmap .t, .roadmap li em, .roadmap .fix, .path-title span, .path-card em, .path-steps .note, .path-steps li > em,
  .part-n, .legal th, .legal .summary h2, .legal .toc h2, .pile span, .nm-k, .nm-after i, .nm-after small, .nm-clock, .nm-learned small { font-size: 14px; }
  .nm-when button { padding: 0 14px; font-size: 15px; }
  .nm-facts li, .nm-after em, .nm-changed button { font-size: 15px; }
  .bd-mess { line-height: 2.5; }
  .bd-mess mark::before { font-size: 14px; letter-spacing: .02em; }
  .bd-steps .n { width: 22px; }
  .bd-more { height: 44px; border-radius: 22px; font-size: 15px; }
  .bd-steps small, .bd-need { margin-left: 32px; }
  .front .begin { width: 58px; height: 58px; }
}