/* a11y.css and theme.css are linked by each page ahead of this file, not
   @imported here: an @import is only discovered once this file has arrived,
   which chained two more round trips in front of the first paint. */
/* Shared design system for the public marketing pages (index, about, pricing).
   Tokens, type, the floating nav, buttons, section furniture and the footer
   live here so the three pages cannot drift apart; each page keeps only the
   CSS for its own sections inline. The signed-in app uses app-shell.css. */

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

:root {
  --bg: #f2ecdf;
  --bg-2: #e9e3d5;
  --surface: #ffffff;
  --ink: #14211e;
  --text: #1e2d2a;
  --muted: #576965;
  --line: rgba(20, 33, 30, 0.10);
  --line-strong: rgba(20, 33, 30, 0.20);
  --accent: #0b7268;
  --accent-ink: #0a5e56;
  --accent-soft: rgba(13, 124, 114, 0.08);
  --accent-glow: rgba(13, 124, 114, 0.14);
  --mint: #2dd4bf;
  --navy: #0f2d26;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;
  --wrap: 1120px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  /* Older names still read by some page-specific rules. */
  --border: var(--line);
  --accent-dim: var(--accent-soft);
  --pill-bg: var(--accent-soft);
}

html { scroll-behavior: smooth; overflow-y: scroll; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.22); }
::selection { background: rgba(var(--accent-rgb), 0.18); }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Serif display face for every headline: the one typographic move that does
   most of the "not a template" work. */
h1, h2, .serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; }
h1 { color: var(--ink); line-height: 0.98; letter-spacing: -0.025em; text-wrap: balance; }
h2 { font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1.05; color: var(--ink); }
h1 em, h2 em, h1 .highlight { font-style: italic; color: var(--accent); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
section[id], div[id].block { scroll-margin-top: 96px; }

/* The soft teal field behind the top of every page. */
body::before {
  content: '';
  position: fixed;
  top: -220px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 560px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.14), transparent);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

/* ── NAV — a floating glass pill ──
   The 14px gap is padding rather than `top`, so scripts that measure the
   nav's height to offset the page get the gap included. */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 14px var(--gutter) 0;
  pointer-events: none;
}
.nav-inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0.45rem 0.5rem 0.45rem 1rem;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 10px 34px var(--shadow-soft), 0 1px 0 var(--hl) inset;
}
.logo { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ink); text-decoration: none; cursor: pointer; }
.logo .brand-mark { height: 34px; width: auto; display: block; }
.logo .brand-word { height: 16px; width: auto; display: block; }
nav ul { display: flex; align-items: center; gap: 0.15rem; list-style: none; }
nav ul a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 500;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  transition: color 0.2s, background 0.2s;
}
nav ul a:hover { color: var(--ink); background: var(--ink-tint-2); }
nav ul a[aria-current="page"] { color: var(--ink); font-weight: 600; }
nav ul li:last-child { margin-left: 0.4rem; }
.nav-cta {
  background: var(--accent);
  color: var(--on-accent) !important;
  padding: 0.5rem 1.05rem !important;
  font-weight: 600 !important;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.nav-cta:hover { background: var(--accent-ink) !important; transform: translateY(-1px); box-shadow: 0 6px 18px var(--accent-glow); }

/* ── BUTTONS ── */
.btn-hero, .btn-full, .btn-fill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.btn-hero:hover, .btn-full:hover, .btn-fill:hover {
  transform: translateY(-2px);
  background: var(--accent-ink);
  box-shadow: 0 12px 28px var(--accent-glow);
}
.btn-hero:active, .btn-full:active, .btn-fill:active { transform: translateY(0); }
.btn-hero { padding: 0.95rem 1.7rem; font-size: 1rem; }
.btn-full { width: 100%; padding: 0.8rem 1.4rem; font-size: 0.92rem; }
.btn-fill { padding: 0.8rem 1.6rem; font-size: 0.92rem; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.95rem;
  padding: 0.95rem 1.2rem; border-radius: 999px;
  transition: background 0.2s;
}
.btn-ghost:hover { background: var(--ink-tint-2); }
.btn-outline {
  width: 100%;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--sans);
  transition: border-color 0.2s, background 0.2s;
}
.btn-outline:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ── SECTION FURNITURE — eyebrow + serif headline, sub copy alongside ── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1rem;
}
.eyebrow::before { content: ''; width: 18px; height: 1px; background: currentColor; opacity: 0.6; }
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 1.5rem 4rem;
  align-items: end;
  margin-bottom: 3rem;
}
.sec-head.center { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.sec-head.center .section-sub { max-width: 620px; }
.sec-head.center .eyebrow::before { display: none; }
.section-sub { color: var(--muted); font-size: 1.02rem; line-height: 1.65; }
.section-sub b { color: var(--text); font-weight: 600; }
/* Links inside running text stay underlined: colour alone is invisible to
   a colour-blind reader, and bold is too easy to mistake for emphasis. */
.section-sub a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.section-sub a:hover { color: var(--accent-ink); }

/* Hero entrance, shared by every page's hero. Never from opacity 0: the
   browser does not count an element as painted while its opacity is 0, so a
   faded-in H1 handed the "largest contentful paint" to the rotating badge and
   pushed the measured load time back by the length of the fade. 0.01 looks
   the same as 0 but is painted, so the text is the LCP from the first frame
   and still fades in. A slide alone read as no animation at all. */
@keyframes rise {
  from { opacity: 0.01; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── CTA BAND ── */
.cta-card {
  background: linear-gradient(135deg, var(--wash-a), var(--wash-b));
  border: 1px solid var(--wash-line);
  border-radius: var(--r-lg);
  padding: 4.5rem 2rem 5rem;
  text-align: center;
}
.cta-card h2 { font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; margin-bottom: 1.1rem; color: var(--wash-ink); }
:root[data-theme="dark"] .cta-card { background: linear-gradient(135deg, #12302b, #152622); border-color: rgba(47, 184, 167, 0.22); }
:root[data-theme="dark"] .cta-card h2 { color: var(--ink); }
.cta-card p { color: var(--muted); font-size: 1.05rem; margin-bottom: 2rem; }

/* ── FOOTER ── */
footer {
  max-width: var(--wrap);
  margin: 2rem auto 0;
  padding: 2.25rem var(--gutter) 3rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.84rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
}
footer .logo .brand-word, .ft-logo img { height: 15px; width: auto; display: block; }
.ft-logo { display: inline-flex; align-items: center; text-decoration: none; }
/* Each link is padded out to a 44px-tall target for a thumb; the gap shrinks
   by the same amount, so the row looks as it did. */
.ft-links { display: flex; gap: 0 0.55rem; list-style: none; flex-wrap: wrap; }
.ft-links a { display: inline-block; padding: 0.75rem 0.35rem; font-size: 0.84rem; color: var(--muted); text-decoration: none; transition: color 0.2s; }
.ft-links a:hover { color: var(--ink); }
.ft-copy { font-size: 0.8rem; color: var(--muted); }
footer p a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s; }
footer p a:hover { color: var(--accent-ink); }

@media (max-width: 900px) {
  .sec-head { grid-template-columns: 1fr; gap: 0.75rem; }
  nav ul a { padding: 0.4rem 0.6rem; font-size: 0.82rem; }
}
@media (max-width: 700px) {
  /* Mobile nav: brand + CTA only. */
  nav ul li:not(:last-child) { display: none; }
  nav ul li:last-child { margin-left: 0; }
  footer { justify-content: center; text-align: center; }
}

/* ── Legal pages (privacy, terms, refunds) ──────────────────────────────────
   One narrow reading column. Plain paragraphs and short lists, no cards: a
   policy is read once, top to bottom, and should look like a document. */
.legal { max-width: 760px; margin: 0 auto; padding: 8rem var(--gutter) 2rem; }
.legal-head { margin-bottom: 2.5rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--line-strong); }
.legal-head h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1.05; letter-spacing: -0.02em;
  color: var(--ink); margin-bottom: 0.9rem;
}
.legal-head h1 em { font-style: italic; color: var(--accent); }
.legal-head .legal-meta { font-size: 0.86rem; color: var(--muted); display: flex; gap: 1.25rem; flex-wrap: wrap; }
.legal-head .legal-meta a { color: var(--accent); text-decoration: none; font-weight: 600; }
.legal-head .legal-meta a:hover { text-decoration: underline; }
.legal-summary {
  margin-top: 1.4rem; padding: 1.1rem 1.3rem;
  background: var(--accent-soft); border-radius: var(--r-md);
  font-size: 0.95rem; line-height: 1.65; color: var(--text);
}
.legal-summary b { color: var(--accent-ink); }

.legal h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: 1.6rem; line-height: 1.15; letter-spacing: -0.015em;
  color: var(--ink); margin: 2.6rem 0 0.8rem; scroll-margin-top: 5.5rem;
}
.legal h3 { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 1.5rem 0 0.45rem; }
.legal p, .legal li { font-size: 0.97rem; line-height: 1.72; color: var(--text); }
.legal p + p { margin-top: 0.85rem; }
.legal ul, .legal ol { margin: 0.7rem 0 0.9rem 1.3rem; }
.legal li { margin-bottom: 0.45rem; }
.legal li b, .legal p b { font-weight: 700; color: var(--ink); }
.legal a { color: var(--accent); font-weight: 600; text-decoration: none; }
.legal a:hover { text-decoration: underline; }
.legal .muted { color: var(--muted); font-size: 0.9rem; }

.legal table { width: 100%; border-collapse: collapse; margin: 0.9rem 0 1.2rem; font-size: 0.9rem; }
.legal th, .legal td { text-align: left; padding: 0.65rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
.legal th { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.legal td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
.legal .table-wrap { overflow-x: auto; }

.legal-toc { margin: 0 0 0.5rem; padding: 0; list-style: none; columns: 2; column-gap: 2rem; }
.legal-toc li { margin-bottom: 0.35rem; font-size: 0.9rem; break-inside: avoid; }
.legal-toc a { font-weight: 500; color: var(--text); }
.legal-toc a:hover { color: var(--accent); }
@media (max-width: 600px) { .legal-toc { columns: 1; } .legal td:first-child { white-space: normal; } }