/*
 * Styling for the landing page (index.html) only.
 *
 * This is the shared spaikz.com house style — the same palette, serif, and card
 * language as literachi.spaikz.com and neoshodo.spaikz.com — and it is
 * deliberately NOT the app's palette. The app (app.html / styles.css) is dark
 * mint-on-near-black; a visitor crosses from cream to dark when they press
 * "Start talking". That break is intentional: the landing belongs to the family
 * of sites, the app belongs to itself.
 *
 * Keeping the two stylesheets separate rather than sharing tokens is the same
 * call legal.css already made — the palettes have nothing in common, so an
 * import would only buy a name collision.
 *
 * The one exception is the sign-in dialog, which appears on both surfaces. It
 * is styled in signin.css against a small named palette (--auth-*), and each
 * page fills those in from its own tokens. A named contract, not a shared
 * namespace — which is precisely what stops --bg meaning two things.
 */

:root {
  --bg: #f6f4ef;
  --surface: #ffffff;
  --ink: #23201b;
  --muted: #6b665c;
  /* Brand blue, deepened for the light theme.
     #59AEE4 straight from the mark measures 2.22:1 on this cream — unreadable as
     text or as a link, and the same trap the mint hit. #1F6FA8 is the same hue at
     4.90:1, with white on it at 5.39:1, so it works for both text and buttons.
     The pure brand colours are used at full strength in the dark theme, where they
     measure 7.8:1 and 8.5:1, and on artwork, which is not text. */
  --accent: #1f6fa8;
  --accent-ink: #14507b;
  --line: #e7e2d8;
  --soft: #eaf2f8;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(35, 32, 27, 0.07);
  --serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  /* The sign-in dialog reads its palette from whichever page opens it, so the
     same card is cream here and near-black in the app. See signin.css. */
  --auth-surface: var(--surface);
  --auth-ink: var(--ink);
  --auth-dim: var(--muted);
  --auth-line: var(--line);
  --auth-field: #faf8f4;
  --auth-accent: var(--accent);
  --auth-scrim: rgba(35, 32, 27, 0.42);
  --auth-radius: 16px;
}

/* The house style is a light one, so dark is a translation of it rather than a
   second design: same structure, same accent family, inked down. */
:root[data-theme="dark"] {
  --bg: #12100f;
  --surface: #1d1a18;
  --ink: #f5efe8;
  --muted: #a89e95;
  /* Full strength: 7.8:1 on this near-black. */
  --accent: #59aee4;
  --accent-ink: #8cc8ee;
  --line: #332d29;
  --soft: #191f1d;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.35);

  --auth-field: #262220;
  --auth-scrim: rgba(0, 0, 0, 0.62);
  --auth-error-bg: #3a2220;
  --auth-error-edge: #f87171;
  --auth-error-ink: #fca5a5;
}

/* The dialog is the one piece of shared furniture between the two houses, so it
   has to opt back into this page's typeface. */
.auth-dialog { font-family: var(--serif); }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 var(--serif);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

/* Every band shares one measure, so the header, hero, and cards all line up. */
.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: inherit;
  font-weight: 700;
  font-size: 21px;
}

.brand img { display: block; border-radius: 8px; }

/* The one-line pitch beside the wordmark, as on neoshodo. Dropped on narrow
   screens before the nav is, since the hero repeats it immediately below. */
.brand-tag {
  color: var(--muted);
  font-size: 15px;
  font-style: italic;
}

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 15.5px;
}

.site-nav a:hover { color: var(--ink); }

/* Sign-in reads as a pill so it stays the obvious target next to plain links. */
.site-nav .pill {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 20px;
  font-weight: 700;
  box-shadow: var(--shadow);
}

.site-nav .pill:hover { border-color: var(--accent); }

/* ------------------------------------------------------------------ hero */

.hero {
  text-align: center;
  padding: 76px 0 88px;
}

.hero h1 {
  margin: 0 0 22px;
  font-size: clamp(38px, 6.2vw, 64px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-weight: 700;
}

/* The second line carries the accent — the shared hero signature across the
   family of sites. */
.hero h1 .accent {
  display: block;
  color: var(--accent);
}

.hero .lede {
  margin: 0 auto 34px;
  max-width: 580px;
  font-size: 19px;
  line-height: 1.65;
  color: var(--muted);
}

.cta-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.btn {
  display: inline-block;
  border-radius: 12px;
  padding: 16px 30px;
  font: 700 17px/1 var(--serif);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
  color: var(--bg);
  box-shadow: var(--shadow);
}

.btn-primary:hover { background: var(--accent-ink); }

.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

.btn-secondary:hover { border-color: var(--accent); }

.fineprint {
  margin: 18px 0 0;
  font-size: 14.5px;
  color: var(--muted);
}

/* ---------------------------------------------------------------- bands */

/* Alternating background is the only separator between sections — no rules,
   no dividers. --soft is a tinted version of the accent, not a grey. */
.band { padding: 78px 0; }
.band-soft { background: var(--soft); }
.band-plain { background: var(--bg); }

/* The header is sticky, so an anchor jump would otherwise park the eyebrow
   underneath it. Clears the 68px bar plus a little air. */
.band[id] { scroll-margin-top: 84px; }

.eyebrow {
  margin: 0 0 12px;
  text-align: center;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The default assumes the title is followed straight by the grid. Where an
   intro paragraph sits between them, the pair reads as one block, so the title
   tightens up and the intro owns the gap instead. Browsers without :has() just
   get the roomier spacing — no layout breaks. */
.band h2 {
  margin: 0 0 44px;
  text-align: center;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.2;
  font-weight: 700;
}

.band h2:has(+ .band-intro) { margin-bottom: 14px; }

.band-intro {
  margin: 0 auto 44px;
  max-width: 620px;
  text-align: center;
  color: var(--muted);
  font-size: 17px;
}

/* -------------------------------------------------------------- features */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
}

/* The first card is the one to read first, so it gets the accent outline. */
.card-lead { border-color: var(--accent); }

.tag {
  display: inline-block;
  margin-bottom: 14px;
  background: var(--accent);
  color: var(--bg);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card .glyph {
  display: block;
  font-size: 26px;
  line-height: 1;
  margin-bottom: 14px;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.65;
}

/* ----------------------------------------------------------------- steps */

.steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 20px;
}

.step { text-align: center; }

.step .num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-size: 19px;
  font-weight: 700;
}

.step h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; }

.step p {
  margin: 0 auto;
  max-width: 300px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.65;
}

/* Sits level with the numbered discs rather than centred on the whole column,
   so the three steps read as one line however long the copy runs.
   Decorative: the numbers already carry the order for a screen reader. */
.step-arrow {
  align-self: start;
  margin-top: 8px;
  color: #c4bcac;
  font-size: 26px;
  line-height: 1;
}

/* --------------------------------------------------------------- pricing */

.tiers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.tier {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px;
}

.tier-current { border-color: var(--accent); }

.tier-name {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.tier-soon {
  display: inline-block;
  /* .tier is a flex column, which would otherwise stretch this pill to the full
     card width and turn it into a banner. */
  align-self: flex-start;
  margin-bottom: 10px;
  background: var(--soft);
  color: var(--accent-ink);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tier-price {
  margin: 0 0 4px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
}

.tier-price span {
  font-size: 16px;
  font-weight: 400;
  color: var(--muted);
}

/* A sentence where the other card has a figure. Set smaller so it doesn't read
   as a headline, but padded to keep the two cards' rows roughly level. */
.tier-price-tbd {
  font-size: 21px;
  font-weight: 400;
  color: var(--muted);
  padding: 8px 0 5px;
}

.tier-note {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 15px;
}

.tier ul {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  font-size: 15.5px;
}

.tier li {
  padding: 7px 0 7px 26px;
  position: relative;
  line-height: 1.5;
}

.tier li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* Pushes the button to the bottom so both tiers' CTAs align however long the
   feature lists are. */
.tier .btn { margin-top: auto; text-align: center; }

/* ---------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 40px 0 56px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}

.site-footer nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-bottom: 16px;
}

.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }

.site-footer .colophon { margin: 0; font-size: 14.5px; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  .brand-tag { display: none; }
  .cards { grid-template-columns: repeat(2, 1fr); }

  /* The arrows only make sense reading across; stacked, the numbers suffice. */
  .steps { grid-template-columns: 1fr; gap: 36px; }
  .step-arrow { display: none; }
}

@media (max-width: 620px) {
  .hero { padding: 52px 0 60px; }
  .band { padding: 56px 0; }
  .cards { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .site-nav { gap: 16px; }
  .site-nav .nav-link { display: none; }
  .btn { padding: 15px 24px; font-size: 16px; }
  .cta-row { flex-direction: column; align-items: stretch; }
}

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