:root {
  --cream: #FBF8F1;
  --cream-card: #FFFDF7;
  --cream-border: #EAE3D2;
  --oolong: #2F4A3C;
  --oolong-pressed: #263F33;
  --ink: #22362C;
  --ink-secondary: #5C6B5E;
  --amber: #C08A3E;
  --on-green: #FBF8F1;
  --focus: rgba(47,74,60,0.18);
  --edge: clamp(20px, 3vw, 48px); /* side padding shared by the top bar and all content */
  --content: 1200px;               /* content column on every page; the top bar stays full width */
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
  width: 100%;
  max-width: calc(var(--content) + 2 * var(--edge));
  margin: 0 auto;
  padding: 96px var(--edge) 48px;
}
main:not(.home) > * { max-width: 560px; }
.brand {
  margin: 0 0 24px;
  line-height: 0;
}
.brand img {
  display: block;
  width: 120px;
  height: auto;
}
h1 {
  font-size: 34px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0 0 16px;
}
.sub {
  font-size: 18px;
  color: var(--ink-secondary);
  margin: 0 0 40px;
}
p { margin: 0 0 16px; }
a { color: var(--oolong); font-weight: 600; text-decoration: none; }
a:hover { text-decoration: underline; }

form { display: flex; flex-wrap: wrap; gap: 12px; }
input[type="email"] {
  flex: 1 1 240px;
  font: inherit;
  padding: 14px 16px;
  border: 1px solid #E0D8C6;
  border-radius: 12px;
  background: var(--cream-card);
  color: var(--ink);
}
input[type="email"]:focus {
  outline: none;
  border-color: var(--oolong);
  box-shadow: 0 0 0 4px var(--focus);
}
button {
  font: inherit;
  font-weight: 600;
  padding: 14px 24px;
  border: 0;
  border-radius: 12px;
  background: var(--oolong);
  color: var(--on-green);
  cursor: pointer;
}
button:hover { background: var(--oolong-pressed); }
button:disabled { opacity: 0.6; cursor: default; }
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.status { min-height: 24px; margin-top: 16px; color: var(--ink-secondary); }
.status.done { color: var(--ink); font-weight: 600; }

footer {
  border-top: 1px solid var(--cream-border);
  padding: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-secondary);
}
footer a { margin: 0 8px; }
.foot-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

/* ---- Home page (index.html). Scoped to .home so privacy/support keep their layout. ---- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
main.home { max-width: none; padding: 0; }
.wrap { width: 100%; max-width: calc(var(--content) + 2 * var(--edge)); margin: 0 auto; padding: 0 var(--edge); }
.home section { padding: 72px 0; }
.home section + section { border-top: 1px solid var(--cream-border); }
.home section { scroll-margin-top: 60px; }
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 12px;
}
.home h2 {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin: 0 0 16px;
  max-width: 22ch;
}
.home h3 { font-size: 19px; line-height: 1.3; margin: 0 0 8px; }
:where(.home) p { max-width: 65ch; } /* lowest specificity: tighter caps (.lede, .caption, ...) still win */
.lede { font-size: 18px; color: var(--ink-secondary); margin: 0 0 32px; max-width: 46ch; }
.muted { color: var(--ink-secondary); }
.small { font-size: 14px; }
.button {
  display: inline-block;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: 12px;
  background: var(--oolong);
  color: var(--on-green);
}
.button:hover { background: var(--oolong-pressed); text-decoration: none; }

/* Top bar (the intro lands on the logo here) */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--cream);
  border-bottom: 1px solid var(--cream-border);
}
.topbar .wrap { max-width: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 60px; }
.topbar .brand { margin: 0; justify-self: start; }
.topbar .button { padding: 9px 16px; font-size: 14px; border-radius: 10px; }
.topnav { display: flex; align-items: center; gap: 20px; white-space: nowrap; } /* centered column; right column stays empty */
.topnav a:not(.button) { font-size: 14px; font-weight: 600; color: var(--ink); }
.topnav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
/* Phones: logo and the button only; Privacy/Support move to the footer. The button reads "Join" below 480px. */
.topnav .nav-link { display: none; }
.btn-more { display: none; }
@media (min-width: 480px) { .btn-more { display: inline; } }
@media (min-width: 640px) {
  .topnav .nav-link { display: inline; }
  .foot-links { display: none; }
}

/* Hero */
.home .hero { padding: 56px 0 72px; }
.hero-grid { display: grid; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(28px, 8.5vw, 32px); margin: 0 0 16px; text-wrap: balance; max-width: 13em; } /* 13em: two sentences never share a line */
@media (min-width: 480px) { .hero h1 { font-size: clamp(32px, 1rem + 3.2vw, 60px); } }
.hero .sub { margin: 0 0 20px; }
.hero .desc { margin: 0 0 32px; max-width: 44ch; }
.hero-visual { display: flex; justify-content: center; }
.hero .phone { width: 260px; }

/* Phone frame around real screenshots */
.phone {
  position: relative;
  width: 240px;
  border: 9px solid var(--ink);
  border-radius: 40px;
  background: var(--cream);
  overflow: hidden;
  flex: none;
}
.phone::before { /* status-bar strip + island; the real status bars were cropped out */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 26px;
  background: var(--cream);
  z-index: 1;
}
.phone::after {
  content: "";
  position: absolute;
  top: 8px; left: 50%;
  width: 72px; height: 20px;
  margin-left: -36px;
  border-radius: 12px;
  background: var(--ink);
  z-index: 2;
}
.phone picture, .phone img { display: block; width: 100%; height: auto; }
.phone img { margin-top: 26px; }

/* Scroll reveals: only hidden when JS is running, so the page reads fine without it. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--d, 0ms);
}
.js .reveal.reveal-phone { transform: translateY(40px) rotate(3deg); }
.js .reveal.reveal-grow { transform: scale(0.9); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.reveal-phone, .js .reveal.reveal-grow {
    opacity: 1; transform: none; transition: none;
  }
}

@media (min-width: 800px) {
  .home section { padding: 112px 0; }
  .home h2 { font-size: 40px; }
  .home .hero { padding: 72px 0 112px; }
  .hero h1 { letter-spacing: -1px; }
  .phone { width: clamp(240px, 22vw, 320px); }
}
@media (min-width: 900px) {
  /* two-column hero from 900px: text and phone sit together as one centered block */
  .hero-grid { grid-template-columns: minmax(0, max-content) auto; justify-content: center; gap: clamp(48px, 5vw, 72px); }
  .hero h1 { max-width: 10.6em; } /* just wider than the longest sentence, so the column hugs the headline */
  .hero .phone { width: clamp(260px, 24vw, 340px); }
}

/* Problem */
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.points li {
  background: var(--cream-card);
  border: 1px solid var(--cream-border);
  border-radius: 16px;
  padding: 24px;
}
.points .num { display: block; font-size: 13px; font-weight: 700; color: var(--amber); margin-bottom: 12px; }
.points p { margin: 0; color: var(--ink-secondary); }
@media (min-width: 800px) {
  .points { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* How it works */
.steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: 72px; }
.step { display: grid; gap: 32px; justify-items: center; }
.step-text { max-width: 30rem; justify-self: start; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--oolong); color: var(--on-green);
  font-size: 14px; font-weight: 700; margin-bottom: 16px;
}
.step-text p { color: var(--ink-secondary); }
.fineprint { font-size: 13px; color: var(--ink-secondary); border-left: 2px solid var(--cream-border); padding-left: 12px; }
@media (min-width: 800px) {
  .steps { gap: 112px; }
  .step { grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; }
  .step-text { justify-self: end; }
  .step:nth-child(even) .step-text { order: 2; justify-self: start; }
  .step:nth-child(even) .phone { order: 1; }
}

/* Honest by design */
.honest-grid { display: grid; gap: 48px; align-items: center; }
.honest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.honest-list li { padding-left: 20px; border-left: 2px solid var(--oolong); }
.honest-list p { margin: 4px 0 0; color: var(--ink-secondary); }
.advisory-wrap { display: grid; justify-items: center; gap: 12px; }
.advisory {
  width: 100%;
  max-width: 360px;
  background: var(--cream-card);
  border: 1px solid var(--cream-border);
  border-radius: 20px;
  padding: 24px;
}
.advisory .eyebrow { color: var(--oolong); }
.advisory .rule { font-weight: 600; margin: 0 0 20px; }
.routine { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cream-border); }
.routine li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--cream-border);
}
.routine .when { font-size: 13px; color: var(--ink-secondary); }
/* Final (static) state is the default: skipped row dimmed and struck. JS pre-state below. */
.routine .skip { opacity: 0.45; transition: opacity 0.5s ease 0.6s; }
.routine .skip .name { position: relative; }
.routine .skip .name::after {
  content: ""; position: absolute; left: 0; right: 0; top: 52%;
  height: 1.5px; background: var(--ink);
  transform-origin: left center;
  transition: transform 0.5s ease 0.6s;
}
.js .advisory:not(.is-in) .skip { opacity: 1; }
.js .advisory:not(.is-in) .skip .name::after { transform: scaleX(0); }
.caption { font-size: 13px; color: var(--ink-secondary); text-align: center; max-width: 360px; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .routine .skip, .routine .skip .name::after { transition: none; }
}
@media (min-width: 800px) {
  .honest-grid { grid-template-columns: 1.1fr 0.9fr; gap: 64px; }
}

/* Steeping journey */
.journey-list { list-style: none; margin: 48px 0 0; padding: 0; max-width: 640px; }
.stage { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding-bottom: 44px; }
.stage:last-child { padding-bottom: 0; }
.stage::before { /* connector to the next stage; final state drawn */
  content: ""; position: absolute; left: 27px; top: 60px; bottom: 4px; width: 2px;
  background: var(--oolong); transform-origin: top center;
  transition: transform 0.8s ease 0.25s;
}
.stage:last-child::before { display: none; }
.node {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--cream-card); border: 1px solid var(--cream-border);
  display: flex; align-items: center; justify-content: center;
}
.node svg { height: 38px; width: auto; transform: scale(var(--s, 1)); transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s; }
.stage-days { font-size: 13px; font-weight: 600; color: var(--amber); margin: 4px 0 4px; }
.stage p { margin: 0; color: var(--ink-secondary); }
.js .stage:not(.is-in)::before { transform: scaleY(0); }
.js .stage:not(.is-in) .node svg { transform: scale(0.3); }
@media (prefers-reduced-motion: reduce) {
  .stage::before, .node svg { transition: none; }
}

/* Where we are */
.status-grid { display: grid; gap: 40px; margin-top: 40px; }
.status-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.status-list li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.status-list .mark {
  width: 22px; height: 22px; border-radius: 50%; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.status-list .done { background: var(--oolong); color: var(--on-green); }
.status-list .next { border: 2px solid var(--amber); }
.status-head { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-secondary); margin: 0 0 16px; }
@media (min-width: 800px) {
  .status-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
}

/* Waitlist CTA */
.join .cta {
  max-width: 640px; margin: 0 auto; text-align: center;
  background: var(--cream-card); border: 1px solid var(--cream-border);
  border-radius: 24px; padding: 40px 24px;
}
.join .cta h2 { margin: 0 auto 12px; }
.join .cta .lede { margin: 0 auto 28px; }
.join form { justify-content: center; text-align: left; }
.join .status { text-align: center; }
@media (min-width: 800px) {
  .join .cta { padding: 56px 48px; }
}

/* Mascot (two spots only: honesty card and waitlist card) */
.mascot { display: block; height: auto; }
.mascot img { display: block; width: 100%; height: auto; }
.advisory-wrap .mascot {
  width: 104px;
  justify-self: end;
  margin: 0 12px -22px 0;   /* sits on the card's top edge */
  position: relative;
  z-index: 1;
}
.join .cta { position: relative; margin-top: 72px; }
.join .cta .mascot { width: 88px; margin: -124px auto 12px; }
@media (min-width: 800px) {
  .advisory-wrap .mascot { width: 124px; margin-bottom: -26px; }
  .join .cta .mascot { width: 104px; margin-top: -150px; }
}

/* ---- Scroll motion. Everything below needs html.motion (JS on, no reduced-motion), so the
   page is static and complete without it. Transform and opacity only. ---- */

/* Problem cards and "Where we are" items rise further than the default reveal */
.motion .reveal.rise { transform: translateY(48px); }

/* Section headings: words rise in, staggered (spans are added by JS) */
.motion .split .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i) * 60ms);
}
.motion .split.is-in .word { opacity: 1; transform: none; }

/* Mascot: small pop on entry, then a gentle idle bob */
.motion .reveal.reveal-pop {
  transform: scale(0.6);
  transform-origin: 50% 100%;
  transition: opacity 0.4s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--d, 0ms);
}
.motion .reveal.reveal-pop.is-in { transform: none; }
.motion .mascot.is-in img { animation: bob 3.5s ease-in-out 0.9s infinite; transform-origin: 50% 100%; }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(-1.5deg); }
}

/* Hero phone: JS moves .hero-visual for parallax; the phone inside floats */
.motion .hero-visual { will-change: transform; }
.motion .phone.float { animation: float 6s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Steeping journey: each connector follows scroll progress (--c, set by JS) instead of a one-off draw */
.motion .stage::before { transform: scaleY(var(--c, 0)); transition: none; }

/* How it works, desktop: one sticky phone that crossfades to the step in view.
   Phones, JS off and reduced motion keep the stacked steps. */
.how-sticky { display: none; }
@media (min-width: 900px) {
  .motion .how-layout {
    display: grid;
    grid-template-columns: minmax(0, 32rem) auto; /* text and phone centered together, like the hero */
    justify-content: center;
    gap: clamp(48px, 7vw, 120px);
    margin-top: 24px;
  }
  .motion .steps { margin: 0; gap: 0; }
  .motion .step { display: flex; align-items: center; min-height: 75vh; }
  .motion .step:last-child { min-height: 100vh; } /* phone stays pinned until the last step has passed the middle */
  .motion .step-text { max-width: 32rem; }
  .motion .step .step-text.is-in { transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .motion .step:not(.is-current) .step-text.is-in { opacity: 0.35; }
  .motion .step .phone { /* kept for screen readers (it carries the alt text), hidden visually */
    position: absolute; width: 1px; height: 1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .motion .how-sticky {
    display: flex;
    align-items: center;
    position: sticky;
    top: 60px;
    height: calc(100vh - 60px);
  }
  .motion .stack {
    display: grid;
    /* fits the screen height on short laptops: phone height is about 2.03 x its width */
    width: min(clamp(260px, 24vw, 320px), calc((100vh - 152px) * 0.493 + 18px));
  }
  .motion .stack .screen { grid-area: 1 / 1; opacity: 0; transition: opacity 0.5s ease; }
  .motion .stack .screen.is-active { opacity: 1; }
}

/* ---- Legal pages (privacy.html). Scoped to .legal; wider column for tables. ---- */
main.legal > * { max-width: 720px; }
.legal .updated { color: var(--ink-secondary); margin: 0 0 32px; }
.legal h2 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  margin: 40px 0 12px;
}
.legal h3 { font-size: 16px; font-weight: 700; margin: 24px 0 8px; }
.legal ul, .legal ol { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin: 0 0 8px; }
.legal .table-wrap { overflow-x: auto; margin: 0 0 16px; }
.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: var(--cream-card);
  border: 1px solid var(--cream-border);
  border-radius: 12px;
}
.legal th, .legal td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--cream-border);
}
.legal th { font-weight: 700; }
.legal tr:last-child td { border-bottom: 0; }
.legal td:first-child { font-weight: 600; white-space: nowrap; }
@media (max-width: 600px) { .legal td:first-child { white-space: normal; } }
.legal .toc { padding-left: 22px; }