/* apps/site/styles.css -- the public website (www.unhurriedyears.com).
   The look (2026-11-03 redesign, #90): calm and airy, a sea-mist ground with a sunrise glow, the brand teal, and a dawn amber that matches the
   rising-sun mark. The signature is the "horizon": a ruler of years with the dates a plan adds up to.
   Rules of this file: the site has no JavaScript and its security policy blocks inline style attributes, so every look lives here, and the
   one interactive part (the "what if" toggle) is plain radio buttons and CSS. Fonts are served from this site. */
@font-face { font-family: 'Jakarta'; src: url('/fonts/PlusJakartaSans_800ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter_400Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter_600SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }

:root {
  --ground: #f7faf9;    /* the page */
  --mist: #edf3f1;      /* tinted fills */
  --paper: #ffffff;     /* cards and white bands */
  --pine: #10231f;      /* headings and strong text */
  --body: #33433f;      /* body copy */
  --soft: #556662;      /* secondary text (5.6:1 on white) */
  --line: #dfe9e6;      /* hairlines */
  --rule: #b9ccc7;      /* the ruler */
  --teal: #0f766e;      /* the brand */
  --teal-ink: #0b5f59;  /* teal text */
  --teal-wash: #e3f2ef;
  --teal-mid: #7cc7bd;
  --dawn: #f5b65a;      /* the sun, the debt-free marker */
  --dawn-ink: #8a4f05;  /* amber text (6.4:1 on white) */
  --dawn-wash: #fbeed8;
  --dawn-line: #e1a043;
  --on-teal: #ffffff;
  --shadow: 0 18px 40px rgba(16, 35, 31, 0.10);
  --shadow-big: 0 40px 80px rgba(16, 35, 31, 0.22);
  --glow-sun: #fde7c4;
  --glow-sea: #d9efea;
  --panel-a: linear-gradient(135deg, #fdf1df 0%, #f4f8f1 55%, #e6f3ef 100%);
  --panel-b: linear-gradient(135deg, #e3f2ef 0%, #f1f6f4 50%, #fbefe0 100%);
  --panel-c: linear-gradient(160deg, #eaf5f2 0%, #f7faf9 100%);
  --panel-d: linear-gradient(160deg, #fbefe0 0%, #f7faf9 100%);
  --band: linear-gradient(180deg, #0f4c47 0%, #0f766e 58%, #d98f2e 100%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0b1513; --mist: #16261f; --paper: #13231f; --pine: #eef5f3; --body: #c9d6d2; --soft: #a3b4af; --line: #24392f; --rule: #35514a;
    --teal: #2dd4bf; --teal-ink: #7ff0de; --teal-wash: #12302b; --teal-mid: #1f8f82;
    --dawn: #f5b65a; --dawn-ink: #f6c27a; --dawn-wash: #2e2414; --dawn-line: #c9862c;
    --on-teal: #062420;
    --shadow: 0 18px 40px rgba(0, 0, 0, 0.35); --shadow-big: 0 40px 80px rgba(0, 0, 0, 0.5);
    --glow-sun: #3a2a12; --glow-sea: #10302b;
    --panel-a: linear-gradient(135deg, #2a2113 0%, #141f1c 55%, #10302b 100%);
    --panel-b: linear-gradient(135deg, #10302b 0%, #13211e 50%, #2a2113 100%);
    --panel-c: linear-gradient(160deg, #10302b 0%, #0f1d1a 100%);
    --panel-d: linear-gradient(160deg, #2a2113 0%, #0f1d1a 100%);
    --band: linear-gradient(180deg, #07302c 0%, #0c5a53 58%, #a8681b 100%);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--body); font: 400 1.0625rem/1.65 Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
a { color: var(--teal-ink); text-underline-offset: 0.18em; }
a:focus-visible, .button:focus-visible, summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { color: var(--pine); font-family: Jakarta, Inter, system-ui, sans-serif; font-weight: 800; letter-spacing: -0.03em; }
h1 { font-size: clamp(2.6rem, 7vw, 4.4rem); line-height: 1.03; margin: 0; }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.1; margin: 0; }
h3 { font-size: clamp(1.5rem, 3vw, 2.35rem); line-height: 1.12; margin: 0; letter-spacing: -0.025em; }
p { margin: 0; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: var(--paper); padding: 8px 12px; z-index: 10; }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.stop { margin-left: -0.1em; } /* the display face sets its full stops and commas loosely */

/* buttons */
.button { white-space: nowrap; display: inline-block; background: var(--teal); color: var(--on-teal); text-decoration: none; font-weight: 600; padding: 14px 26px; border-radius: 999px; border: 1px solid var(--teal); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.button:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(15, 118, 110, 0.28); color: var(--on-teal); }
.button.ghost { background: var(--paper); color: var(--pine); border-color: var(--line); }
.button.ghost:hover { box-shadow: var(--shadow); color: var(--pine); }
.button.small { padding: 9px 16px; font-size: 0.93rem; }
.button.white { background: #ffffff; border-color: #ffffff; color: #0b5f59; }
.button.white:hover { color: #0b5f59; }

/* header (every page) */
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.brand { white-space: nowrap; display: flex; align-items: center; gap: 10px; color: var(--pine); text-decoration: none; font-family: Jakarta, Inter, sans-serif; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
nav.top { display: flex; align-items: center; gap: 22px; font-weight: 600; font-size: 0.95rem; }
nav.top a:not(.button) { text-decoration: none; color: var(--body); }
nav.top a:not(.button):hover { color: var(--teal-ink); }
nav.top .links { display: flex; gap: 26px; }
nav.top .cta { display: flex; gap: 10px; }

/* ============ home: hero ============ */
/* the glow sits on the hero and reaches up behind the header, which stays on top */
.home header.site { position: relative; z-index: 2; }
.hero { background:
  radial-gradient(ellipse 70% 55% at 50% 100%, var(--glow-sun) 0%, transparent 70%),
  radial-gradient(ellipse 60% 60% at 12% 8%, var(--glow-sea) 0%, transparent 65%),
  radial-gradient(ellipse 55% 50% at 92% 18%, var(--glow-sea) 0%, transparent 60%), var(--ground); }
.hero { text-align: center; margin-top: -90px; padding: 138px 0 0; }
.hero .inner { max-width: 840px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--body); text-decoration: none; font-size: 0.9rem; }
.pill b { background: var(--dawn-wash); color: var(--dawn-ink); font-weight: 600; font-size: 0.78rem; padding: 3px 10px; border-radius: 999px; }
.pill:hover { box-shadow: var(--shadow); color: var(--pine); }
.hero .lead { max-width: 36em; font-size: 1.22rem; color: var(--body); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; font-size: 0.84rem; color: var(--soft); }
.badges li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.badges svg { width: 15px; height: 15px; flex: none; }
.icon { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the stage: a phone with cards around it (the phone is the app's Home screen, drawn in the app's light colors) */
.stage { max-width: 1100px; margin: 0 auto; padding: 60px 0 88px; display: flex; justify-content: center; align-items: center; gap: 32px; }
.stage .side { flex: 1 1 240px; max-width: 290px; display: flex; flex-direction: column; gap: 20px; }
.stage .side.left { align-items: flex-end; }
.stage .side.right { align-items: flex-start; }
.float { background: var(--paper); border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow); text-align: left; animation: bob 7s ease-in-out infinite alternate; }
.float:nth-child(2) { animation-delay: -3s; }
.side.right .float { animation-delay: -1.5s; }
.side.right .float:nth-child(2) { animation-delay: -5s; }
.float.row { width: 280px; display: flex; align-items: center; gap: 12px; }
.float.nudge-in { margin-right: 36px; }
.side.right .float.nudge-in { margin-left: 36px; margin-right: 0; }
.float .tile { width: 40px; height: 40px; border-radius: 12px; background: var(--dawn-wash); display: grid; place-items: center; flex: none; }
.float .tile.teal { background: var(--teal-wash); }
.float .tile svg { width: 20px; height: 20px; }
.float .tile .icon { stroke: var(--dawn-ink); }
.float .tile.teal .icon { stroke: var(--teal-ink); }
.float .grow { flex: 1; min-width: 0; }
.float .t { font-weight: 600; color: var(--pine); font-size: 0.95rem; }
.float .s { font-size: 0.82rem; color: var(--soft); }
.float .big { font-family: Jakarta, Inter, sans-serif; font-weight: 800; font-size: 1.55rem; color: var(--teal-ink); line-height: 1.2; }
.float .big.ink { color: var(--pine); font-size: 1.3rem; }
.float .good { font-size: 0.85rem; color: var(--teal-ink); font-weight: 600; }
.float.wide { width: 260px; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-10px); } }

.phone { width: 300px; height: 600px; flex: none; border-radius: 48px; background: #10231f; padding: 12px; box-shadow: var(--shadow-big); }
.phone .screen { height: 100%; border-radius: 38px; background: #f3f7f6; overflow: hidden; display: flex; flex-direction: column; text-align: left; color: #10231f; }
.phone .notch { height: 34px; flex: none; display: flex; justify-content: center; align-items: flex-end; }
.phone .notch i { width: 90px; height: 24px; border-radius: 999px; background: #10231f; }
.phone .body { padding: 14px 14px 0; display: flex; flex-direction: column; gap: 10px; }
.phone .label { font-size: 11px; color: #556662; }
.phone .worth { font-family: Jakarta, Inter, sans-serif; font-weight: 800; font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; }
.phone .up { font-size: 11px; color: #0b5f59; font-weight: 600; }
.phone .tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.phone .tiles div { background: #ffffff; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; }
.phone .tiles b { font-size: 12px; }
.phone .card { background: #ffffff; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 7px; }
.phone .card .head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 600; }
.phone .card .head span { font-size: 10px; color: #556662; font-weight: 400; }
.phone .line { display: flex; justify-content: space-between; font-size: 12px; }
.phone .line small { color: #556662; font-size: 10px; margin-left: 4px; }
.phone .line.due-soon small { color: #8a4f05; font-weight: 600; }
.phone .worth.small { font-size: 18px; }
.phone .tabs { margin-top: auto; display: flex; justify-content: space-around; padding: 10px 0 18px; background: #ffffff; border-top: 1px solid #e3ece9; font-size: 10px; color: #556662; }
.phone .tabs b { color: #0b5f59; font-weight: 600; }
.bar { height: 8px; border-radius: 4px; background: #e3ece9; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 4px; background: #0f766e; }
.bar.amber { background: #f6e3c6; }
.bar.amber i { background: #e1a043; }
.ui .bar { background: var(--line); }
.ui .bar i { background: var(--teal); }
.ui .bar.amber { background: var(--dawn-wash); }
.ui .bar.amber i { background: var(--dawn-line); }
.w26 { width: 26%; } .w30 { width: 30%; } .w55 { width: 55%; } .w62 { width: 62%; } .w74 { width: 74%; } .w80 { width: 80%; }

/* ============ sections ============ */
section.block { padding: 112px 0; }
section.white { background: var(--paper); }
.center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.center p { max-width: 38em; font-size: 1.18rem; }
.eyebrow { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dawn-ink); display: inline-flex; align-items: center; gap: 8px; }
.eyebrow.teal { color: var(--teal-ink); }
.soon-pill { text-transform: none; letter-spacing: 0; font-size: 0.75rem; font-weight: 600; color: var(--dawn-ink); background: var(--paper); border: 1px solid var(--dawn-line); padding: 2px 9px; border-radius: 999px; }
.section-head { margin-bottom: 52px; }

/* the horizon, with the "what if" toggle */
.horizon-card { margin: 0; border: 0; min-width: 0; border-radius: 32px; background: linear-gradient(180deg, var(--teal-wash) 0%, var(--dawn-wash) 100%); padding: 48px 48px 40px; display: flex; flex-direction: column; gap: 30px; }
.horizon-card legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.horizon-card input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.chips span { display: inline-flex; align-items: center; gap: 10px; background: var(--paper); padding: 10px 16px; border-radius: 14px; box-shadow: 0 8px 20px rgba(16, 35, 31, 0.06); font-size: 0.95rem; color: var(--pine); }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.dot.sun { background: var(--dawn); border: 1px solid var(--dawn-line); }
.dot.house { background: var(--teal-mid); border: 1px solid var(--teal); }
.dot.retire { background: var(--teal); }
.ruler { position: relative; height: 116px; }
.ruler .base { position: absolute; left: 0; right: 0; top: 64px; height: 2px; background: var(--rule); }
.ruler .seg { position: absolute; top: 62px; height: 6px; border-radius: 3px; transition: left 0.6s cubic-bezier(.2,.7,.2,1), width 0.6s cubic-bezier(.2,.7,.2,1); }
.ruler .seg.debt { left: 0; width: 8.1%; background: var(--dawn); }
.ruler .seg.house { background: var(--teal-mid); left: 8.1%; width: 11.9%; }
.ruler .seg.retire { background: var(--teal); left: 20%; width: 55%; }
.ruler .mark { position: absolute; top: 51px; left: 8.1%; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; border: 4px solid var(--paper); transition: left 0.6s cubic-bezier(.2,.7,.2,1); }
.ruler .mark.debt { background: var(--dawn); box-shadow: 0 0 0 1px var(--dawn-line); }
.ruler .mark.house { left: 20%; background: var(--teal-mid); box-shadow: 0 0 0 1px var(--teal); }
.ruler .mark.retire { left: 75%; background: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.ruler .tag { position: absolute; top: 0; left: 8.1%; transform: translateX(-50%); font-family: Jakarta, Inter, sans-serif; font-weight: 800; font-size: 0.95rem; color: var(--pine); white-space: nowrap; transition: left 0.6s cubic-bezier(.2,.7,.2,1); text-align: center; line-height: 1.25; }
.ruler .tag small { display: block; font-family: Inter, sans-serif; font-weight: 400; font-size: 0.8rem; color: var(--soft); }
.ruler .tag.debt { color: var(--dawn-ink); transform: translateX(-30%); }
.ruler .tag.debt small span { display: none; }
.ruler .tag.house { left: 20%; transform: translateX(-20%); }
.ruler .tag.retire { left: 75%; }
.ruler .years { position: absolute; left: 0; right: 0; top: 92px; height: 22px; font-size: 0.8rem; color: var(--soft); font-variant-numeric: tabular-nums; }
.ruler .years span { position: absolute; transform: translateX(-50%); }
.ruler .years span:first-child { transform: none; }
.ruler .years span:nth-child(1) { left: 0%; }
.ruler .years span:nth-child(2) { left: 10%; }
.ruler .years span:nth-child(3) { left: 22.5%; }
.ruler .years span:nth-child(4) { left: 35%; }
.ruler .years span:nth-child(5) { left: 47.5%; }
.ruler .years span:nth-child(6) { left: 60%; }
.ruler .years span:nth-child(7) { left: 72.5%; }
.ruler .years span:nth-child(8) { left: 85%; }
.ruler .years span:nth-child(9) { left: 100%; transform: translateX(-100%); }
/* the three choices: +$0 (January 2030), +$100 (March 2029, the default), +$250 (June 2028); 2026 is 0% and each year 2.5% */
#x0:checked ~ .ruler .seg.debt { width: 10%; }
#x0:checked ~ .ruler .seg.house { left: 10%; width: 10%; }
#x0:checked ~ .ruler .mark.debt, #x0:checked ~ .ruler .tag.debt { left: 10%; }
#x250:checked ~ .ruler .seg.debt { width: 6.1%; }
#x250:checked ~ .ruler .seg.house { left: 6.1%; width: 13.9%; }
#x250:checked ~ .ruler .mark.debt, #x250:checked ~ .ruler .tag.debt { left: 6.1%; }
#x0:checked ~ .ruler .tag.debt .d0, #x100:checked ~ .ruler .tag.debt .d100, #x250:checked ~ .ruler .tag.debt .d250 { display: inline; }
.whatif { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }
.whatif .q { font-size: 1rem; color: var(--body); }
.seg-control { display: inline-flex; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); padding: 4px; gap: 4px; }
.seg-control label { padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; color: var(--body); cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; }
.seg-control label:hover { color: var(--pine); background: var(--mist); }
#x0:checked ~ .whatif label[for="x0"], #x100:checked ~ .whatif label[for="x100"], #x250:checked ~ .whatif label[for="x250"] { background: var(--teal); color: var(--on-teal); }
#x0:focus-visible ~ .whatif label[for="x0"], #x100:focus-visible ~ .whatif label[for="x100"], #x250:focus-visible ~ .whatif label[for="x250"] { outline: 3px solid var(--teal); outline-offset: 2px; }
.whatif .r { display: none; font-weight: 600; color: var(--pine); }
#x0:checked ~ .whatif .r0, #x100:checked ~ .whatif .r100, #x250:checked ~ .whatif .r250 { display: inline; }
.caption { text-align: center; font-size: 0.88rem; color: var(--soft); }

/* how it works */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.steps li { background: var(--paper); border: 1px solid var(--line); border-radius: 24px; padding: 30px; display: flex; flex-direction: column; gap: 10px; }
.steps .n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-wash); color: var(--teal-ink); font-family: Jakarta, Inter, sans-serif; font-weight: 800; }
.steps li:nth-child(3) .n { background: var(--dawn-wash); color: var(--dawn-ink); }
.steps h4, .grid h4 { margin: 4px 0 0; font-size: 1.12rem; color: var(--pine); line-height: 1.3; }
.steps p { color: var(--body); font-size: 0.98rem; }

/* feature panels */
.panels { display: flex; flex-direction: column; gap: 28px; }
.panel { border-radius: 32px; padding: 64px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.panel.a { background: var(--panel-a); }
.panel.b { background: var(--panel-b); flex-wrap: wrap-reverse; }
.panel .copy { flex: 1 1 340px; display: flex; flex-direction: column; gap: 14px; }
.panel .show { flex: 1 1 420px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.pair { display: flex; flex-wrap: wrap; gap: 28px; }
.pair .panel { flex: 1 1 420px; padding: 48px; align-items: stretch; flex-direction: column; flex-wrap: nowrap; gap: 24px; }
.pair .panel.c { background: var(--panel-c); }
.pair .panel.d { background: var(--panel-d); }
.pair .copy { flex: none; }
.pair h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.ui { background: var(--paper); border-radius: 22px; padding: 22px; width: 100%; max-width: 430px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; color: var(--pine); }
.pair .ui { max-width: none; padding: 16px 18px; gap: 8px; border-radius: 18px; }
.ui .stats { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.ui .k { font-size: 0.82rem; color: var(--soft); }
.ui .v { font-family: Jakarta, Inter, sans-serif; font-weight: 800; font-size: 1.65rem; line-height: 1.2; }
.ui hr { border: 0; height: 1px; background: var(--line); margin: 0; }
.ui .line { display: flex; justify-content: space-between; gap: 12px; font-size: 0.97rem; }
.ui .line b { font-weight: 600; white-space: nowrap; }
.ui .line .m { color: var(--soft); white-space: nowrap; }
.ui .due { color: var(--dawn-ink); font-size: 0.75rem; font-weight: 600; background: var(--dawn-wash); padding: 2px 8px; border-radius: 999px; margin-left: 6px; white-space: nowrap; }
.ui .note-good { font-size: 0.85rem; color: var(--teal-ink); }
.ui .note-sun { font-size: 0.85rem; color: var(--dawn-ink); }
.ui .stack { display: flex; flex-direction: column; gap: 5px; }
.seg-mini { display: inline-flex; align-self: flex-start; border-radius: 999px; background: var(--mist); padding: 4px; gap: 4px; font-size: 0.82rem; font-weight: 600; flex-wrap: wrap; }
.seg-mini span { padding: 6px 12px; border-radius: 999px; color: var(--soft); }
.seg-mini span:first-child { background: var(--paper); color: var(--pine); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.bubble { border-radius: 18px; padding: 12px 16px; font-size: 0.95rem; max-width: 330px; }
.bubble.me { align-self: flex-end; background: var(--teal); color: var(--on-teal); border-bottom-right-radius: 4px; box-shadow: 0 12px 28px rgba(15, 118, 110, 0.22); }
.bubble.them { align-self: flex-start; background: var(--paper); color: var(--body); border-bottom-left-radius: 4px; box-shadow: var(--shadow); max-width: 380px; }
.chat { display: flex; flex-direction: column; gap: 12px; }

/* learn */
.learn { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.learn .copy { flex: 1 1 360px; display: flex; flex-direction: column; gap: 14px; }
.learn .copy p { font-size: 1.12rem; }
.words { flex: 1 1 480px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.words div { border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 6px; background: var(--teal-wash); }
.words div:nth-child(2), .words div:nth-child(3) { background: var(--dawn-wash); }
.words dt { font-family: Jakarta, Inter, sans-serif; font-weight: 800; font-size: 1.35rem; color: var(--teal-ink); }
.words div:nth-child(2) dt, .words div:nth-child(3) dt { color: var(--dawn-ink); }
.words dd { margin: 0; font-size: 0.97rem; color: var(--body); }

/* everyday grid */
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.grid li { background: var(--paper); border-radius: 22px; padding: 26px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.grid li:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.grid svg { width: 26px; height: 26px; }
.grid p { font-size: 0.96rem; }

/* promises */
.promise { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 48px; align-items: start; }
.promise .copy { display: flex; flex-direction: column; gap: 14px; }
.promise ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.promise li { display: flex; gap: 14px; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; }
.promise li svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }

/* pricing */
.pricing { background: radial-gradient(ellipse 50% 60% at 50% 60%, var(--glow-sun) 0%, transparent 70%), var(--ground); }
.plan { width: 100%; max-width: 440px; margin: 0 auto; background: var(--paper); border-radius: 28px; padding: 34px; box-shadow: var(--shadow-big); display: flex; flex-direction: column; gap: 16px; }
.plan .price { text-align: center; }
.plan .price b { display: block; font-family: Jakarta, Inter, sans-serif; font-weight: 800; font-size: 3rem; color: var(--pine); line-height: 1.1; }
.plan .price span { color: var(--soft); }
.plan hr { border: 0; height: 1px; background: var(--line); margin: 0; }
.plan .line { display: flex; justify-content: space-between; gap: 12px; font-size: 0.97rem; }
.plan .yes { color: var(--teal-ink); font-weight: 600; white-space: nowrap; }
.plan .later { color: var(--dawn-ink); font-weight: 600; white-space: nowrap; }
.plan .fine { font-size: 0.85rem; color: var(--soft); text-align: center; }
.plan .button { text-align: center; }

/* questions */
.faq { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 0 22px; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 600; color: var(--pine); display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.4rem; line-height: 1; color: var(--teal-ink); transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; color: var(--body); }

/* closing band with the sunrise */
.band-wrap { padding: 0 0 80px; }
.band { border-radius: 36px; background: var(--band); padding: 96px 32px 0; text-align: center; color: #ffffff; display: flex; flex-direction: column; align-items: center; gap: 20px; overflow: hidden; }
.band h2 { color: #ffffff; font-size: clamp(2.1rem, 5vw, 3.3rem); }
.band p { color: #e8f4f1; font-size: 1.15rem; }
.sunrise { width: min(520px, 100%); height: auto; margin-top: 30px; display: block; overflow: hidden; }
.sunrise .sun { fill: #f5b65a; }
.sunrise .rays { stroke: #f5b65a; stroke-width: 4; stroke-linecap: round; opacity: 0.8; }
.sunrise .horizon-line { stroke: #ffffff; stroke-opacity: 0.6; stroke-width: 2; }

/* footer */
footer.site { border-top: 1px solid var(--line); padding: 32px 0 48px; font-size: 0.92rem; color: var(--soft); }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; }
footer.site nav { display: flex; flex-wrap: wrap; gap: 12px 22px; }
footer.big .wrap { gap: 40px; }
footer.big .about { max-width: 340px; display: flex; flex-direction: column; gap: 10px; }
footer.big .col { display: flex; flex-direction: column; gap: 8px; }
footer.big .col b { color: var(--pine); font-weight: 600; }
footer.big .col a { color: var(--soft); text-decoration: none; }
footer.big .col a:hover { color: var(--teal-ink); }

/* legal pages */
article.legal { max-width: 720px; padding: 40px 0 72px; }
article.legal h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 20px; }
article.legal h2 { font-size: 1.3rem; margin: 40px 0 12px; letter-spacing: -0.015em; }
article.legal p, article.legal ul { margin: 0 0 14px; max-width: 62ch; }
article.legal .updated { color: var(--soft); }
article.legal li { margin: 6px 0; }

/* gentle motion where the browser can tie it to scrolling; nothing moves for people who ask for less motion */
@supports (animation-timeline: view()) {
  .rise { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  .sunrise .sun, .sunrise .rays { animation: sun-up linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
  @keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  @keyframes sun-up { from { transform: translateY(70px); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .float, .rise, .sunrise .sun, .sunrise .rays { animation: none !important; }
  .ruler .seg, .ruler .mark, .ruler .tag, .button, .grid li { transition: none; }
}

/* narrower screens */
@media (max-width: 980px) {
  nav.top .links { display: none; }
  .stage { flex-wrap: wrap; gap: 20px; }
  .stage .phone { order: -1; }
  .stage .side { flex: 1 1 100%; max-width: none; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; }
  .float.nudge-in, .side.right .float.nudge-in { margin: 0; }
  .float.row, .float.wide { width: auto; flex: 0 1 260px; }
  .steps { grid-template-columns: 1fr; }
  .promise { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  section.block { padding: 72px 0; }
  .panel, .pair .panel { padding: 28px 22px; border-radius: 26px; }
  .horizon-card { padding: 28px 18px; border-radius: 26px; }
  .ruler .tag { font-size: 0.82rem; }
  .ruler .tag.house, .chips .house-chip { display: none; }
  .ruler .years span:nth-child(even) { display: none; }
  .words { grid-template-columns: 1fr; }
  .seg-mini span { padding: 6px 9px; }
  .band { padding: 64px 22px 0; border-radius: 28px; }
  nav.top .cta .ghost { display: none; }
  .hero { padding-top: 118px; }
  .hero .lead { font-size: 1.08rem; }
}
@media (max-width: 400px) {
  .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* still read out, not shown */
  .stage .float { flex: 1 1 100%; }
}