@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&family=Nunito+Sans:wght@400;600;700&display=swap');

/* Brand palette. Primary values are measured from the artwork itself; the
   secondary set is the complementary one Val specified. Single source of truth:
   Marketing Materials/BRAND.md. Everything below is expressed as a token, so a
   palette change is an edit HERE and nowhere else. */
:root {
  /* primary, from the artwork */
  --brown: #261705;
  --yellow: #f7c212;
  --orange: #ffb81b;
  --yellow-light: #fff3c3;
  --beige: #eae0c5;
  --blue-pale: #c8e2eb;
  /* secondary / complementary */
  --brown-deep: #140d03;
  --yellow-warm: #ffc828;
  --brown-light: #68410e;

  /* surfaces and type, derived from the palette */
  --bg: #fffdf7;
  --panel: #ffffff;
  --surface-2: #f7f3e9;
  --surface-2-line: #e4dbc6;
  --ink: var(--brown);
  --ink-soft: #4a3a22;
  --muted: #756449;
  --line: var(--beige);
  --line-strong: #d8c9a6;

  --accent: var(--yellow);
  --accent-ink: var(--brown-deep);
  --accent-wash: #fff8e2;
  --accent-tint: var(--yellow-light);
  --accent-line: #f2dfa0;
  --accent-deep: #7a5600;
  --primary: var(--brown-light);

  /* status. Semantic, so the green and the red keep their hue and only warm
     enough to sit with the palette; "considering" uses the brand pale blue. */
  --ok-bg: #e9f5ec;   --ok-ink: #1e6b39;   --ok-line: #cbe4d3;
  --err-bg: #fdeceb;  --err-ink: #8c2b23;  --err-line: #f4cfcb;
  --info-bg: #eaf4f8; --info-ink: #2f5f72; --info-line: var(--blue-pale);

  /* Type. Quicksand is a rounded monoline geometric sans, the same construction
     as the wordmark: round terminals, circular bowls, single-storey g with a
     straight tail. It carries headings, nav and buttons so the page and the
     logo read as one thing. Body text is Nunito Sans, which is built for
     running text - Quicksand goes airy and tiring at paragraph sizes. Both
     fall back to the native stack, so a blocked webfont degrades to what the
     site used before rather than to a serif. See Marketing Materials/BRAND.md. */
  --font-display: 'Quicksand', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Nunito Sans', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --max: 1080px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink); background: var(--bg);
  font-family: var(--font-body);
  line-height: 1.55;
}
img { display: block; }

/* Display face on everything structural. Deliberately NOT on body copy. */
h1, h2, h3, h4,
.brand, .foot-brand, .btn, .nav-links a, .foot-links a,
.eyebrow, .badge-status, .slogan p, .seg button, .vote .n {
  font-family: var(--font-display);
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.btn {
  display: inline-block; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  padding: 10px 18px; border-radius: 10px; font-weight: 700; font-size: 15px; cursor: pointer;
}
.btn:hover { text-decoration: none; border-color: var(--line-strong); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-ghost { background: var(--panel); }
.btn-lg { padding: 13px 24px; font-size: 16px; }

/* nav: sticky top bar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 253, 247, 0.9); backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav {
  max-width: var(--max); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 20px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a { color: var(--ink); font-weight: 600; }
.nav-links .btn-primary { color: var(--accent-ink); }

/* hero */
.hero {
  max-width: var(--max); margin: 0 auto; padding: 48px 24px 40px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center;
}
.hero h1 { font-size: clamp(30px, 5vw, 50px); line-height: 1.08; margin: 0 0 16px; letter-spacing: -0.02em; }
.lede { font-size: 18px; color: var(--ink-soft); margin: 0 0 26px; max-width: 42ch; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.badges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.badge-soon {
  font-size: 13px; font-weight: 600; color: var(--muted);
  border: 1px dashed var(--line-strong); border-radius: 999px; padding: 6px 13px; background: var(--panel);
}
.hero-art { display: flex; justify-content: center; }
.hero-art img { filter: drop-shadow(0 12px 30px rgba(245,179,1,.28)); }

/* features */
.features { max-width: var(--max); margin: 0 auto; padding: 40px 24px; }
.features h2, .build h2 { font-size: 28px; margin: 0 0 8px; letter-spacing: -0.01em; }
.section-lead { color: var(--muted); font-size: 16px; margin: 0 0 22px; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px;
}
.card .ico { font-size: 26px; margin-bottom: 10px; }
.card h3 { margin: 0 0 8px; font-size: 17px; }
.card p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* build band */
.build { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 24px; }
.build-copy { max-width: var(--max); margin: 0 auto; padding: 48px 24px; }
.build-copy p { font-size: 17px; color: var(--ink-soft); max-width: 56ch; margin: 0 0 22px; }

/* footer */
.footer {
  max-width: var(--max); margin: 0 auto; padding: 36px 24px 48px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
}
.foot-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-links a { color: var(--ink); font-weight: 600; }
.copyright { width: 100%; color: var(--muted); font-size: 13px; margin: 6px 0 0; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: 32px; }
  .hero-art { order: -1; }
  .hero-art img { width: 150px; height: 150px; }
  .grid { grid-template-columns: 1fr 1fr; }
  /* The nav used to `display:none` its links here, back when the only one was
     "Features" and the landing page had the same content one scroll down. With
     real sub-pages that would hide the entire site on a phone, so the links wrap
     onto a second row instead. */
  .nav { flex-wrap: wrap; row-gap: 10px; }
  .nav-links { gap: 16px; font-size: 15px; flex-wrap: wrap; }
}
@media (max-width: 460px) {
  .grid { grid-template-columns: 1fr; }
  .nav-links { gap: 12px; font-size: 14px; }
  .nav-links a:not(.btn) { font-weight: 600; }
}

/* ===========================================================================
   SUB-PAGES (about / how it works / faq / what's next)
   One shared shell: .pagehead for the title band, .prose for the body column.
   =========================================================================== */
/* Same column as .prose below it, so the h1 starts on the same left edge as the
   body text. At the 1080 site width they don't line up and the page reads as two
   documents stacked. */
.pagehead { max-width: 780px; margin: 0 auto; padding: 44px 24px 8px; }
.pagehead h1 { font-size: clamp(28px, 4.6vw, 44px); line-height: 1.1; margin: 0 0 12px; letter-spacing: -0.02em; }
.pagehead .kicker { text-transform: uppercase; letter-spacing: .09em; font-size: 12px;
  font-weight: 800; color: var(--primary); margin: 0 0 10px; }
.pagehead .lede { font-size: 19px; max-width: 56ch; }

.prose { max-width: 780px; margin: 0 auto; padding: 8px 24px 64px; }
.prose h2 { font-size: 24px; margin: 38px 0 10px; letter-spacing: -0.01em; }
.prose h3 { font-size: 17px; margin: 22px 0 6px; }
.prose p { color: var(--ink-soft); margin: 0 0 14px; font-size: 16.5px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 14px; }
.prose li { margin: 7px 0; color: var(--ink-soft); }
.prose strong { color: var(--ink); }
.prose .small { font-size: 14px; color: var(--muted); }

/* pull-quote / slogan band */
.slogan { border-left: 4px solid var(--accent); background: var(--accent-wash);
  padding: 16px 20px; border-radius: 0 12px 12px 0; margin: 22px 0 26px; }
.slogan p { margin: 0; font-size: 19px; font-weight: 600; color: var(--ink); }
.slogan .sub { font-size: 15px; font-weight: 400; color: var(--ink-soft); margin-top: 6px; }

/* three-up value cards inside a prose page */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px 0 8px; }
.trio .card h3 { margin: 0 0 6px; font-size: 16px; }
.trio .card p { margin: 0; font-size: 14.5px; color: var(--muted); }

/* numbered pipeline steps */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 18px 0 8px; }
.steps li { counter-increment: step; position: relative; padding: 0 0 18px 46px; margin: 0; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%; background: var(--accent);
  color: var(--accent-ink); font-weight: 800; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.steps li::after {
  content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px;
  background: var(--line);
}
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps h3 { margin: 4px 0 4px; font-size: 17px; }
.steps p { margin: 0; font-size: 15.5px; }

/* data-source cards */
.sources { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 18px 0 8px; }
.source { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 15px 17px; }
.source h3 { margin: 0 0 4px; font-size: 15.5px; }
.source p { margin: 0; font-size: 14px; color: var(--muted); }

/* unit-economics table */
.econ { width: 100%; border-collapse: collapse; margin: 14px 0 8px; font-size: 15px; }
.econ th, .econ td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.econ th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.econ td.num { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.econ tr:last-child td { border-bottom: none; }
.table-scroll { overflow-x: auto; }

/* FAQ */
.faq { margin: 8px 0 0; }
.faq-item { border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
  padding: 18px 20px; margin: 0 0 16px; }
.faq-item h2 { margin: 0 0 10px; font-size: 19px; letter-spacing: -0.01em; }
.faq-item p:last-child { margin-bottom: 0; }

/* ===========================================================================
   IDEAS BOARD (what's next)
   =========================================================================== */
.board-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 16px; }
.board-bar .spacer { flex: 1; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--panel); }
.seg button { border: 0; background: transparent; padding: 7px 15px; font-size: 14px;
  font-weight: 600; color: var(--muted); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

.idea { display: grid; grid-template-columns: 62px 1fr; gap: 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; margin: 0 0 14px; }
.idea h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -0.01em; }
.idea p { margin: 0 0 8px; color: var(--ink-soft); font-size: 15.5px; white-space: pre-wrap; }
.idea .by { color: var(--muted); font-size: 12.5px; margin: 0; }

.vote { display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 2px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  padding: 8px 0; cursor: pointer; font: inherit; color: var(--ink); height: fit-content; }
.vote:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-wash); }
.vote[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-tint); }
.vote:disabled { cursor: default; opacity: .85; }
.vote .caret { font-size: 13px; line-height: 1; color: var(--primary); }
.vote .n { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.vote .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

.badge-status { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; border-radius: 999px; padding: 3px 10px; margin-left: 8px;
  vertical-align: 2px; border: 1px solid transparent; }
.st-considering { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-line); }
.st-planned     { background: var(--accent-tint); color: var(--accent-deep); border-color: var(--accent-line); }
.st-shipped     { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line); }
.st-declined    { background: var(--surface-2); color: var(--muted); border-color: var(--surface-2-line); }

.reply { border-left: 3px solid var(--accent); background: var(--accent-wash); border-radius: 0 8px 8px 0;
  padding: 9px 13px; margin: 10px 0 8px; }
.reply .who { font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); margin: 0 0 3px; }
.reply p { margin: 0; font-size: 14.5px; }

/* On the marketing site the vote control is a LINK into the app, not a button
   that votes here. Same shape so the board reads the same, but it navigates. */
.vote-link { text-decoration: none; }
.vote-link:hover { text-decoration: none; }
.vote-link .lbl { color: var(--primary); }

.empty-board { border: 1px dashed var(--line-strong); border-radius: 14px; padding: 26px 20px;
  text-align: center; color: var(--muted); background: var(--panel); }

@media (max-width: 700px) {
  .trio { grid-template-columns: 1fr; }
  .sources { grid-template-columns: 1fr; }
  .idea { grid-template-columns: 54px 1fr; gap: 12px; }
}

/* long-form legal / prose pages (privacy) */
.legal { max-width: 760px; margin: 0 auto; padding: 16px 24px 56px; }
.legal h1 { font-size: clamp(26px, 4vw, 34px); margin: 8px 0 4px; letter-spacing: -0.01em; }
.legal .meta { color: var(--muted); font-size: 14px; margin: 0 0 20px; }
.legal h2 { font-size: 20px; margin: 30px 0 8px; }
.legal p { color: var(--ink-soft); margin: 0 0 12px; }
.legal ul { padding-left: 22px; margin: 0 0 12px; }
.legal li { margin: 6px 0; color: var(--ink-soft); }
.legal a { color: var(--primary); }
.legal code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 0.92em; }
.legal .updated { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 14px;
  color: var(--muted); font-size: 13px; }