/* Shared stylesheet for the static SEO content pages.
   Brand tokens copied from platform/index.html (lines 57 to 61) so these pages look
   like the same product as the waitlist page. Keep in sync if the palette changes.

   Deliberately plain: no React, no build step, no framework. These pages exist to be
   readable by a crawler that does not execute JavaScript. */

:root {
  --bg: #F1F5F9;
  --bg-2: #DBEAFE;
  --bg-3: #E2E8F0;
  --ink: #040d1b;
  --ink-2: #374151;
  --ink-3: #6B7280;
  --line: #D1D5DB;
  --accent: #2A9388;
  --accent-2: #0F766E;
  --gold: #B5894A;
  --f-display: 'Cormorant Garamond', Georgia, serif;
  --f-body: 'Newsreader', Georgia, serif;
  --f-mono: 'Space Grotesk', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

/* ── Masthead ─────────────────────────────────────────────── */

.masthead {
  border-bottom: 1px solid var(--line);
  margin-bottom: 44px;
  padding: 22px 0 18px;
}
.masthead a.brand {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.masthead a.brand:hover { color: var(--accent-2); }

nav.breadcrumb {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 6px;
}
nav.breadcrumb a { color: var(--ink-3); }

/* ── Type ─────────────────────────────────────────────────── */

h1 {
  font-family: var(--f-display);
  font-size: clamp(32px, 6vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 18px;
}

h2 {
  font-family: var(--f-display);
  font-size: clamp(25px, 4vw, 33px);
  line-height: 1.2;
  color: var(--ink);
  margin: 52px 0 14px;
}

h3 {
  font-family: var(--f-mono);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  margin: 34px 0 10px;
}

.standfirst {
  font-family: var(--f-body);
  font-size: 21px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 34px;
}

p { margin: 0 0 20px; }

a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

strong { color: var(--ink); font-weight: 600; }

ul, ol { margin: 0 0 22px; padding-left: 24px; }
li { margin-bottom: 9px; }

figure { margin: 32px 0; }
figure img { width: 100%; height: auto; border-radius: 8px; display: block; }
figcaption {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 9px;
  text-align: center;
}

/* ── Pull quote ───────────────────────────────────────────── */

blockquote {
  margin: 34px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--accent);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 24px;
  line-height: 1.4;
  color: var(--ink);
}
blockquote p { margin: 0; }

/* ── Call to action ───────────────────────────────────────── */

.cta {
  margin: 44px 0;
  padding: 30px 28px;
  background: rgba(42, 147, 136, 0.07);
  border: 1px solid rgba(42, 147, 136, 0.32);
  border-radius: 10px;
  text-align: center;
}
.cta h2 {
  margin: 0 0 10px;
  font-size: clamp(23px, 3.6vw, 29px);
}
.cta p {
  font-family: var(--f-mono);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 20px;
}
.cta a.btn {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 13px 26px;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
}
.cta a.btn:hover { background: var(--accent-2); color: #fff; }
.cta .eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 14px 0 0;
}

/* ── Author / attribution ─────────────────────────────────── */

.attribution {
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-3);
}
.attribution strong { color: var(--ink); }

/* ── Related pages + footer ───────────────────────────────── */

.related {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.related h2 {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 12px;
}
.related ul { list-style: none; padding: 0; margin: 0; }
.related li { margin-bottom: 7px; font-family: var(--f-mono); font-size: 15px; }

/* A port of SiteFooterBase in platform/index.html, rendered with topPad=0: the
   .footnav band above draws the divider, so this block carries no top border and
   no top padding. Values copied from its inline styles. Horizontal padding is 0
   rather than the React 24px, because .wrap already supplies that here. */
footer.sitefoot {
  padding: 0 0 52px;
  text-align: center;
  font-family: var(--f-mono);
  color: var(--ink-3);
}
footer.sitefoot .foot-logo {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 12px;
}
footer.sitefoot .foot-loc {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
footer.sitefoot .foot-copy { font-size: 11px; margin: 0; }

/* Sitewide content links. A port of ContentLinksFooter in platform/index.html
   (the band on /start-dancing), values copied from its inline styles so the two
   look identical. Same link set as SEO_CONTENT_PAGES.onezeibekiko.

   Horizontal padding is 0 rather than the React 24px, because .wrap already
   supplies that on these pages and it would otherwise double up.

   Like the React version, this draws its own top border and the site footer
   below drops its divider, mirroring SiteFooterBase topPad={0}. */
.footnav {
  padding: 56px 0 40px;
  border-top: 1px solid var(--line);
  text-align: center;
  margin-top: 44px;
}
.footnav .footnav-h {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
}
.footnav .footnav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: center;
}
.footnav .footnav-links a {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.footnav .footnav-links a:hover {
  color: var(--accent-2);
  border-bottom-color: var(--accent-2);
}

@media (max-width: 600px) {
  body { font-size: 17px; }
  .wrap { padding: 0 20px 60px; }
  .standfirst { font-size: 19px; }
  blockquote { font-size: 21px; }
}