/* Sprout web: shared by sprout-support-site and sprout-legal-site.
   Copied into each repo (no build step). Edit one, copy to the other.

   Color rule: green is the only button and link color. Leaf, carrot and
   tomato (from the app icon) are only ever big panel fills that hold real
   app UI, plus the one highlight pill in the home headline. They never
   carry small text.
   Shape rule: cards and panels 16px, buttons and pills full round, app
   screens get phone corners. Cards get a hairline, never a shadow; the
   only shadows are on app UI, to lift it off its panel. Flat fills, no
   gradients.
   Motion rule: everything moves only under prefers-reduced-motion:
   no-preference. Clips swap for stills when motion is reduced. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-var.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --canvas: #f3f0e8;
  --surface: #fcfbf7;
  --ink: #17231a;
  --ink-2: #4a574c;
  --line: rgb(23 35 26 / 0.11);
  --line-strong: rgb(23 35 26 / 0.2);
  --green: #2f5233;
  --green-hover: #243f27;
  --on-green: #f3f0e8;
  --link: #2f5233;
  --leaf: #9ccc65;
  --carrot: #f4a240;
  --tomato: #e5533d;
  --tint: #e4ead9;
  --shadow-ui: 0 30px 60px -24px rgb(23 35 26 / 0.45), 0 2px 8px rgb(23 35 26 / 0.08);

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-text: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --radius: 16px;
  --max: 1160px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #101611;
    --surface: #172019;
    --ink: #e9efe6;
    --ink-2: #aab6a9;
    --line: rgb(233 239 230 / 0.11);
    --line-strong: rgb(233 239 230 / 0.22);
    --green: #9ccc65;
    --green-hover: #b1d985;
    --on-green: #102010;
    --link: #b1d985;
    --leaf: #56723b;
    --carrot: #825d29;
    --tomato: #7b3527;
    --tint: #1d2a1f;
    --shadow-ui: 0 30px 60px -24px rgb(0 0 0 / 0.75), 0 2px 8px rgb(0 0 0 / 0.3);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }

a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3 { font-family: var(--font-display); color: var(--ink); text-wrap: balance; }
p { text-wrap: pretty; }

:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: 16px; top: -48px; z-index: 20;
  background: var(--green); color: var(--on-green);
  padding: 8px 16px; border-radius: 999px;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
@media (max-width: 480px) { .wrap { padding: 0 16px; } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  letter-spacing: -0.02em; color: var(--ink); text-decoration: none;
}
.brand img { width: 32px; height: 32px; border-radius: 8px; flex: none; }
.brand small {
  font-family: var(--font-text); font-weight: 500; font-size: 0.95rem;
  letter-spacing: 0; color: var(--ink-2);
}
.nav { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; align-items: center; }
.nav a {
  color: var(--ink-2); text-decoration: none; font-weight: 500; white-space: nowrap;
  padding: 8px 14px; border-radius: 999px; transition: color .2s ease, background-color .2s ease;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); background: var(--tint); }
@media (max-width: 640px) {
  .nav .hide-sm { display: none; }
  .brand small { display: none; }
}
@media (max-width: 520px) {
  .nav a { padding: 8px 10px; }
  /* Headers with a long nav keep only the icon; the name stays for
     screen readers. */
  .brand .tuck {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}
@media (max-width: 400px) {
  .site-header .wrap { gap: 8px; }
  .nav { gap: 0; }
  .nav a { padding: 8px 8px; font-size: 0.97rem; }
}

/* ---------- Buttons and pills ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 999px; min-height: 48px;
  font: inherit; font-weight: 600; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-primary { background: var(--green); color: var(--on-green); }
.btn-primary:hover { background: var(--green-hover); color: var(--on-green); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn svg { width: 18px; height: 18px; flex: none; }

.pill-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 0; margin: 0; list-style: none; }
.pill-links a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line-strong);
  color: var(--ink); text-decoration: none; font-weight: 500;
  transition: border-color .2s ease, background-color .2s ease;
}
.pill-links a:hover { border-color: var(--ink); background: var(--surface); }
.pill-links svg { width: 18px; height: 18px; color: var(--ink-2); }

.ico { width: 24px; height: 24px; flex: none; }

/* ---------- Section rhythm ---------- */
.block { padding: 112px 0 0; }
.block:last-of-type { padding-bottom: 112px; }
.block h2 {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.04;
  letter-spacing: -0.04em; font-weight: 700; margin: 0 0 16px;
}
.block .intro { color: var(--ink-2); font-size: clamp(1.1rem, 1.6vw, 1.25rem); max-width: 50ch; margin: 0 0 48px; }
.block-head { max-width: 720px; }
.block-head.center { margin: 0 auto; text-align: center; }
.block-head.center .intro { margin-left: auto; margin-right: auto; }
@media (max-width: 720px) {
  .block { padding-top: 80px; }
  .block:last-of-type { padding-bottom: 80px; }
  .block .intro { margin-bottom: 32px; }
}

/* ---------- App media: phones, clips, stills ---------- */
/* A phone screen: real screenshots and clips, 393x852, with phone corners. */
.phone {
  aspect-ratio: 393 / 852;
  border-radius: 13% / 6%;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-ui);
  outline: 1px solid rgb(23 35 26 / 0.08);
  outline-offset: -1px;
}
.phone > img, .phone > video, .phone > picture, .phone > picture img {
  width: 100%; height: 100%; object-fit: cover;
}
/* Clips swap for their end-state still when motion is reduced. The
   poster is a CSS background so it can follow the theme. */
.clip { background: center / cover no-repeat; }
.still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .clip { display: none; }
  .still { display: block; }
}
.clip-hero { background-image: url("media/hero-light-poster.webp"); }
.clip-sync { background-image: url("media/sync-light-poster.webp"); }
@media (prefers-color-scheme: dark) {
  .clip-hero { background-image: url("media/hero-dark-poster.webp"); }
  .clip-sync { background-image: url("media/sync-dark-poster.webp"); }
}

/* A close-up: part of a real screen, zoomed, on a colored panel.
   --y moves the screen up (percent of its height), --z zooms. */
.closeup {
  position: relative; overflow: hidden; border-radius: 14px;
  box-shadow: var(--shadow-ui); background: var(--surface);
  aspect-ratio: var(--ratio, 4 / 3);
}
.closeup img {
  position: absolute; left: 50%; top: 0; width: calc(var(--z, 1) * 100%); height: auto; max-width: none;
  transform: translate(-50%, calc(var(--y, 0) * -1%));
}

.panel { border-radius: var(--radius); position: relative; overflow: hidden; }
.panel-leaf { background: var(--leaf); }
.panel-carrot { background: var(--carrot); }
.panel-tomato { background: var(--tomato); }
.panel-green { background: #2f5233; }
@media (prefers-color-scheme: dark) { .panel-green { background: #203a24; } }

/* ---------- Home: hero ---------- */
.hero { padding: 56px 0 0; text-align: center; }
.hero .soon {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px;
  color: var(--ink-2); font-size: 1rem; font-weight: 500;
}
.hero .soon svg { width: 18px; height: 18px; color: var(--green); }
.hero h1 {
  font-size: clamp(2.7rem, 6.2vw, 5.4rem);
  line-height: 1.04; letter-spacing: -0.05em; font-weight: 750;
  margin: 0 auto 20px;
}
.hero h1 mark {
  background: var(--leaf); color: #17231a;
  padding: 0 0.22em 0.04em; border-radius: 999px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media (prefers-color-scheme: dark) { .hero h1 mark { background: #9ccc65; } }
.hero .lede {
  font-size: clamp(1.15rem, 1.8vw, 1.35rem); color: var(--ink-2);
  max-width: 44ch; margin: 0 auto 28px;
}

/* Three phones rising out of a leaf panel that crops their bottoms. */
.stage {
  --pw: clamp(210px, 25vw, 300px);
  position: relative; margin-top: 52px;
  height: calc(var(--pw) * 1.72);
  clip-path: inset(-100vh 0 0 0 round 0 0 var(--radius) var(--radius));
}
.stage .panel {
  position: absolute; left: 0; right: 0; bottom: 0; top: 24%;
  border-radius: var(--radius);
}
.stage .phone { position: absolute; left: 50%; width: var(--pw); }
.stage .phone-main { top: 0; transform: translateX(-50%); z-index: 2; }
.stage .phone-left, .stage .phone-right { top: 14%; width: calc(var(--pw) * 0.86); z-index: 1; }
.stage .phone-left { transform: translateX(-138%) rotate(-7deg); }
.stage .phone-right { transform: translateX(38%) rotate(7deg); }
.stage .dot { position: absolute; border-radius: 50%; }
.stage .dot-tomato { width: calc(var(--pw) * 0.62); aspect-ratio: 1; background: var(--tomato); left: 7%; top: 44%; }
.stage .dot-carrot { width: calc(var(--pw) * 0.42); aspect-ratio: 1; background: var(--carrot); right: 9%; top: 34%; }
@media (max-width: 720px) {
  .hero { padding-top: 48px; }
  .stage { --pw: min(56vw, 250px); margin-top: 48px; height: calc(var(--pw) * 1.62); }
  .stage .phone-left { transform: translateX(-118%) rotate(-7deg); }
  .stage .phone-right { transform: translateX(18%) rotate(7deg); }
  .stage .dot-tomato { left: -6%; }
  .stage .dot-carrot { right: -4%; }
}

/* ---------- Home: live sync ---------- */
.sync { margin: 0; }
.sync .panel { aspect-ratio: 860 / 700; max-height: 700px; margin: 0 auto; }
.sync .panel > video, .sync .panel > picture, .sync .panel > picture img {
  width: 100%; height: 100%; object-fit: cover;
}
.sync figcaption {
  display: grid; grid-template-columns: 1fr 1fr; padding: 20px 5.4% 0;
  text-align: center; color: var(--ink-2);
}
.sync figcaption strong { display: block; color: var(--ink); font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -0.01em; }
@media (max-width: 560px) { .sync figcaption { font-size: 0.95rem; padding: 16px 0 0; gap: 12px; } }

/* ---------- Home: inventory (text + panel) ---------- */
.split {
  display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center;
}
.split .copy p { color: var(--ink-2); font-size: 1.15rem; max-width: 42ch; }
.split .copy p:last-child { margin-bottom: 0; }
.split .panel {
  aspect-ratio: 6 / 5; padding-top: 56px;
  display: flex; justify-content: center; align-items: flex-start;
}
.split .panel .phone { width: min(60%, 330px); flex: none; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Home: feature cards (one wide on top, two below) ---------- */
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; display: flex; flex-direction: column; gap: 10px;
}
.card .ico { width: 30px; height: 30px; color: var(--green); margin-bottom: 6px; }
.card h3 { margin: 0; font-size: 1.45rem; line-height: 1.2; letter-spacing: -0.025em; font-weight: 700; }
.card p { margin: 0; color: var(--ink-2); }
.card .panel { margin-top: 18px; padding: 32px 12% 0; display: grid; place-items: end center; flex: 1; min-height: 240px; }
.card .closeup { width: 100%; border-radius: 12px 12px 0 0; }
.card-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 5fr 7fr; gap: 20px 48px; align-items: center; }
.card-wide .panel { margin-top: 0; min-height: 300px; }
.card-wide .text { display: grid; gap: 10px; align-content: center; }
@media (max-width: 800px) {
  .features { grid-template-columns: 1fr; }
  .card-wide { grid-template-columns: 1fr; }
}

/* ---------- Home: pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; display: flex; flex-direction: column; gap: 6px;
}
.plan h3 { margin: 0; font-size: 1.3rem; letter-spacing: -0.02em; }
.plan .who { color: var(--ink-2); margin: 0 0 20px; }
.plan .price {
  margin: auto 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: 2.6rem; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.plan .price span { font-family: var(--font-text); font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.plan .alt { margin: 8px 0 0; color: var(--ink-2); font-size: 0.97rem; }
.plan-family { background: #2f5233; border-color: #2f5233; color: #f3f0e8; }
.plan-family h3, .plan-family .price { color: #f3f0e8; }
.plan-family .who, .plan-family .price span, .plan-family .alt { color: rgb(243 240 232 / 0.8); }
@media (prefers-color-scheme: dark) { .plan-family { background: #203a24; border-color: #2c4c30; } }
.plans-note { color: var(--ink-2); font-size: 0.95rem; max-width: 80ch; margin: 20px 0 0; }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }

/* ---------- Home: closing help ---------- */
.closing { text-align: center; }
.closing .pill-links { margin: 0 0 28px; }

/* ---------- Page heads (FAQ, legal) ---------- */
.page-head { padding-top: 72px; padding-bottom: 40px; }
.page-head h1 {
  font-size: clamp(2.5rem, 6vw, 4.4rem); letter-spacing: -0.05em;
  line-height: 1.02; margin: 0 0 16px; font-weight: 750;
}
.page-head p { color: var(--ink-2); font-size: clamp(1.1rem, 1.6vw, 1.25rem); max-width: 56ch; margin: 0; }
.page-head .updated { font-size: 1rem; margin-top: 16px; }

/* ---------- FAQ ---------- */
.topics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.topics a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 20px 10px 14px;
  border-radius: 999px; text-decoration: none; color: #17231a;
  font-family: var(--font-display); font-weight: 650; font-size: 1.08rem; letter-spacing: -0.01em;
  transition: background-color .2s ease;
}
.topics a:hover { background: #f3f0e8; }
.topics a:nth-child(3n+1) { background: #9ccc65; }
.topics a:nth-child(3n+2) { background: #f4a240; }
.topics a:nth-child(3n+3) { background: #e2dccd; }
@media (prefers-color-scheme: dark) { .topics a:nth-child(3n+3) { background: #cfc8b7; } }
.topics .ico { width: 22px; height: 22px; }
@media (max-width: 420px) { .topics a { font-size: 1rem; } }

.faq-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; padding-bottom: 96px; }
.toc { position: sticky; top: 88px; align-self: start; display: flex; flex-direction: column; gap: 2px; }
.toc a { color: var(--ink-2); text-decoration: none; padding: 7px 14px; border-radius: 999px; transition: background-color .2s ease, color .2s ease; }
.toc a:hover { background: var(--tint); color: var(--ink); }
@media (max-width: 860px) {
  .faq-layout { grid-template-columns: 1fr; gap: 0; }
  .faq-layout > .toc { display: none; }
}

.faq-group { margin-bottom: 56px; }
.faq-group > h2 {
  font-size: clamp(1.6rem, 2.6vw, 2rem); letter-spacing: -0.03em; line-height: 1.1;
  margin: 0 0 16px; display: flex; align-items: center; gap: 12px;
}
.faq-group > h2 .ico { width: 28px; height: 28px; color: var(--green); }
.qa { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.qa details + details { border-top: 1px solid var(--line); }
.qa summary {
  list-style: none; cursor: pointer; padding: 20px 24px; font-weight: 600; font-size: 1.07rem;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--green); }
.qa summary .ico { width: 20px; height: 20px; color: var(--ink-2); transition: transform .25s ease; }
.qa details[open] summary .ico { transform: rotate(45deg); }
.qa .answer { padding: 0 24px 22px; color: var(--ink-2); max-width: 70ch; }
.qa .answer p { margin: 0 0 10px; }
.qa .answer p:last-child { margin: 0; }
.qa .answer strong { color: var(--ink); font-weight: 600; }
.qa .answer ol, .qa .answer ul { margin: 0 0 10px; padding-left: 22px; }
@media (max-width: 480px) {
  .qa summary { padding: 18px; }
  .qa .answer { padding: 0 18px 18px; }
}
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    :root { interpolate-size: allow-keywords; }
    .qa details::details-content {
      block-size: 0; overflow: clip;
      transition: block-size .28s ease, content-visibility .28s allow-discrete;
    }
    .qa details[open]::details-content { block-size: auto; }
  }
}

.contact {
  background: #2f5233; color: #f3f0e8; border-radius: var(--radius);
  padding: 40px; display: grid; gap: 10px;
}
@media (prefers-color-scheme: dark) { .contact { background: #203a24; } }
.contact h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.2rem); letter-spacing: -0.035em; color: #f3f0e8; }
.contact p { margin: 0; color: rgb(243 240 232 / 0.85); max-width: 60ch; }
.contact a { color: #f3f0e8; font-weight: 600; }
.contact .row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.contact .btn { background: #f3f0e8; color: #17231a; }
.contact .btn:hover { background: #fff; color: #17231a; }
.contact :focus-visible, .panel-green :focus-visible { outline-color: #f3f0e8; }
@media (max-width: 480px) { .contact { padding: 28px 22px; } }

/* ---------- Legal ---------- */
.docs { margin-bottom: 112px; max-width: 860px; }
.docs ul { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.docs li + li { border-top: 1px solid var(--line); }
.doc {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 20px; align-items: center;
  padding: 24px 28px; color: var(--ink); text-decoration: none;
}
.doc:hover h2 { color: var(--green); }
.doc .badge {
  grid-row: span 2; width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; color: #17231a;
}
.doc .badge svg { width: 28px; height: 28px; }
.docs li:nth-child(1) .badge { background: #9ccc65; }
.docs li:nth-child(2) .badge { background: #f4a240; }
.docs li:nth-child(3) .badge { background: #e2dccd; }
.doc h2 { margin: 0; font-size: 1.4rem; letter-spacing: -0.025em; line-height: 1.2; transition: color .2s ease; }
.doc p { margin: 0; color: var(--ink-2); grid-column: 2; }
.doc .go { grid-row: 1 / span 2; grid-column: 3; color: var(--ink-2); width: 22px; height: 22px; }
@media (max-width: 560px) {
  .doc { grid-template-columns: auto 1fr; padding: 20px; gap: 4px 16px; }
  .doc .badge { width: 44px; height: 44px; }
  .doc .go { display: none; }
}

.legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; padding-bottom: 112px; }
.legal .toc { font-size: 0.95rem; counter-reset: toc; }
.legal .toc a { padding: 6px 12px; display: flex; gap: 10px; }
.legal .toc a::before {
  counter-increment: toc; content: counter(toc);
  font-variant-numeric: tabular-nums; color: var(--ink-2); min-width: 1.2em; opacity: .7;
}
.prose { max-width: 70ch; counter-reset: sec; }
.prose h2 {
  font-size: clamp(1.45rem, 2.2vw, 1.75rem); letter-spacing: -0.025em; line-height: 1.2;
  margin: 56px 0 14px; padding-top: 28px; border-top: 1px solid var(--line);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 1.15rem; letter-spacing: -0.01em; margin: 30px 0 8px; }
.prose p, .prose li { color: var(--ink); }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--ink-2); }
.prose .note { background: var(--tint); border-radius: var(--radius); padding: 20px 24px; margin: 24px 0; }
.prose .note p { margin: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 20px 0 28px; font-size: 0.97rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; }
.prose thead th {
  font-family: var(--font-display); color: var(--ink); font-weight: 650; font-size: 0.95rem;
  border-bottom: 1px solid var(--line-strong);
}
.prose tbody tr + tr td { border-top: 1px solid var(--line); }
.prose td:first-child { font-weight: 550; }
.table-scroll { overflow-x: auto; }
.prose .updated { color: var(--ink-2); margin-top: 40px; font-size: 0.95rem; }
@media (max-width: 900px) {
  .legal { grid-template-columns: 1fr; gap: 28px; }
  .legal .toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .legal .toc a { background: var(--surface); border: 1px solid var(--line); }
}

/* ---------- 404 ---------- */
.lost { min-height: 72dvh; display: grid; align-content: center; justify-items: start; gap: 8px; padding-top: 64px; padding-bottom: 64px; }
.lost h1 { font-size: clamp(2.4rem, 6vw, 4rem); letter-spacing: -0.05em; line-height: 1.04; margin: 24px 0 8px; }
.lost p { color: var(--ink-2); font-size: 1.15rem; margin: 0 0 24px; }
.lost .row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 64px 0 40px; color: var(--ink-2); font-size: 0.97rem; }
.foot { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 40px; }
.foot .about p { margin: 12px 0 0; max-width: 30ch; }
.foot h2 { font-family: var(--font-text); font-size: 0.95rem; font-weight: 600; color: var(--ink); margin: 6px 0 14px; letter-spacing: 0; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 0.93rem;
}
.foot-base a { color: var(--ink-2); }
@media (max-width: 760px) {
  .foot { grid-template-columns: 1fr 1fr; }
  .foot .about { grid-column: 1 / -1; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Hero: the phones rise into place once, on load. */
  .stage .phone-main { animation: rise-main 1s .2s cubic-bezier(.16, 1, .3, 1) both; }
  .stage .phone-left { animation: rise-left 1s .32s cubic-bezier(.16, 1, .3, 1) both; }
  .stage .phone-right { animation: rise-right 1s .32s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes rise-main { from { opacity: 0; transform: translate(-50%, 60px); } }
  @keyframes rise-left { from { opacity: 0; transform: translate(-128%, 90px) rotate(-3deg); } }
  @keyframes rise-right { from { opacity: 0; transform: translate(28%, 90px) rotate(3deg); } }

  /* The header's hairline appears once the page scrolls, where supported. */
  @supports (animation-timeline: scroll()) {
    .site-header {
      animation: header-line linear both;
      animation-timeline: scroll(root);
      animation-range: 0 64px;
    }
    @keyframes header-line { from { border-bottom-color: transparent; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}