/* Tokens lifted verbatim from docs/BRAND.md, which Jack owns. Not approximated:
   a landing page in slightly-wrong greens is worse than one in no greens at all. */
:root {
  --brand-900: #0A2E24;
  --brand-700: #11493A;
  --brand-500: #3E7C6B;
  --brand-100: #DCE8E2;
  --accent-500: #EFB33D;
  --ink-900: #15201C;
  --ink-700: #3A4742;
  --ink-500: #5E6E66;
  --line-200: #DFDACC;
  --bone-100: #F6F4EE;
  --bone-000: #FFFDF8;
  --radius-card: 16px;
  --radius-control: 12px;
}

/* Fraunces is for moments, not paragraphs — BRAND.md §4. Wordmark and headings
   only; everything read at length is the sans. */
@font-face { font-family: 'Fraunces'; src: local('Fraunces'); font-display: swap; }

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bone-100);
  color: var(--ink-900);
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.48;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 62rem; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 44rem; }

h1, h2, h3 { font-family: Fraunces, Georgia, 'Times New Roman', serif; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1.1; color: var(--brand-700); }
h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); line-height: 1.2; margin: 48px 0 12px; }
h3 { font-size: 1.15rem; margin: 32px 0 8px; font-family: 'Instrument Sans', sans-serif; font-weight: 600; }
p { margin: 0 0 16px; max-width: 38rem; }
a { color: var(--brand-700); }

header {
  border-bottom: 1px solid var(--line-200);
  background: var(--bone-000);
  padding: 20px 0;
}
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mark {
  font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 1.5rem;
  color: var(--brand-700); text-decoration: none; letter-spacing: -0.02em;
}
.bar nav { display: flex; gap: 20px; font-size: 0.95rem; }
.bar nav a { color: var(--ink-700); text-decoration: none; }
.bar nav a:hover { color: var(--brand-700); }

.hero { padding: 72px 0 56px; }
.lede { font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: var(--ink-700); max-width: 32rem; margin-top: 20px; }

.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.store {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--brand-700); color: var(--bone-000);
  padding: 14px 22px; border-radius: var(--radius-control);
  text-decoration: none; font-weight: 600; font-size: 0.98rem;
}
.store:hover { background: var(--brand-900); }
.store[aria-disabled='true'] { background: var(--brand-100); color: var(--ink-500); cursor: default; }

.soon {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--ink-500); margin-top: 14px;
}

.points { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 8px 0 72px; }
.point {
  background: var(--bone-000); border: 1px solid var(--line-200);
  border-radius: var(--radius-card); padding: 24px;
}
.point h3 { margin-top: 0; }
.point p { font-size: 0.96rem; color: var(--ink-700); margin-bottom: 0; }

.drivers { background: var(--brand-700); color: var(--bone-000); padding: 56px 0; }
.drivers h2 { color: var(--bone-000); margin-top: 0; }
.drivers p { color: var(--brand-100); }
.drivers strong { color: var(--accent-500); }

footer {
  border-top: 1px solid var(--line-200); background: var(--bone-000);
  padding: 40px 0; margin-top: 72px; font-size: 0.9rem; color: var(--ink-500);
}
footer nav { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; }
footer a { color: var(--ink-700); }
.legal { max-width: 42rem; }

/* Long-form legal pages */
.doc { padding: 56px 0 24px; }
.doc h2 { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 1.3rem; }
.doc p, .doc li { color: var(--ink-700); font-size: 0.98rem; }
.doc ul { margin: 0 0 16px 20px; }
.doc li { margin-bottom: 8px; }
.doc table { border-collapse: collapse; width: 100%; margin: 16px 0 24px; font-size: 0.93rem; }
.doc th, .doc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-200); vertical-align: top; }
.doc th { font-weight: 600; color: var(--ink-900); }
.updated { color: var(--ink-500); font-size: 0.9rem; }

.notice {
  background: var(--brand-100); border-left: 3px solid var(--brand-500);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  padding: 16px 20px; margin: 24px 0; font-size: 0.95rem; color: var(--ink-700);
}
.notice p:last-child { margin-bottom: 0; }

@media (prefers-color-scheme: dark) {
  :root {
    --bone-100: #101614; --bone-000: #182220;
    --ink-900: #E8EDE9; --ink-700: #C2CCC7; --ink-500: #93A099;
    --line-200: #2B3733; --brand-700: #4E9A82; --brand-100: #22322C;
  }
  .store { color: #0A1512; }
  .drivers { background: #143A30; }
}