/* ============================================================
   Data System School — Neo-Brutalist Blueprint
   Used only by index.html (the landing page). Paper + hard black borders +
   offset shadows + clashing flat blocks + oversized grotesk,
   kept on a disciplined grid so it stays usable.
   ============================================================ */

/* ============ Reset + Base ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
:root {
  --bg: #fdfcf8;
  --bg-warm: #f4f1e7;
  --paper: #ffffff;
  /* Warm charcoal, not pure black — softens text, borders, the offset shadows
     and the dark bands together while staying well above WCAG-AA on the cream. */
  --ink: #201d17;
  --blue: #2563eb;
  --yellow: #ffe14d;
  /* Deeper, less-neon red so the accent stops vibrating against the paper. */
  --red: #d83c29;
  --tint-blue: #e3f0fb;
  --tint-red: #fbe7e2;
  --muted: #4a4a44;
  --muted2: #6d6a60;
  --grid-line: #ece9dd;
  /* Offset-shadow colour — a translucent warm charcoal, softer than the solid
     black slabs it replaces, so the brutalist shadows read as depth, not glare. */
  --shadow: rgba(32, 29, 23, 0.45);

  /* legacy aliases — keep the hero SVG + any residual refs mapped */
  --text-primary: #201d17;
  --text-secondary: #333333;
  --text-tertiary: #6d6a60;
  --border: #201d17;
  --border-strong: #201d17;
  --accent-blue: #2563eb;
  --accent-teal: #2563eb;
  --accent-red: #d83c29;

  --max-width: 1100px;
  /* Shared reading measure for the left-aligned section intros — one knob so the
     copy column is consistent across What-you-get / Outline / Who-it's-for. */
  --measure: 680px;
  --section-padding: 92px;
  --section-padding-mobile: 56px;
}
body {
  font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ============ Typography ============ */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; line-height: 0.98; }
h1 { font-size: clamp(38px, 5.6vw, 66px); text-transform: uppercase; }
/* Section headlines: one line on tablet/desktop (the clamp governs). On phones
   they split at the colour boundary into two punchy lines — see the
   max-width:600px block below. */
h2 { font-size: clamp(28px, 3.8vw, 42px); text-transform: uppercase; }
@media (max-width: 600px) {
  /* Drop the blue half of each section headline to its own line so the headline
     stays big and bold instead of shrinking to fit one line. The font caps so
     the wider half ("THE SINGLE-MACHINE CORE.", ~12.66em) never wraps to a third
     line. The final-CTA headline manages its own two lines, so it's excluded. */
  section h2:not(.final-headline) em { display: block; }
  section h2:not(.final-headline) {
    font-size: min(clamp(28px, 3.8vw, 42px), calc((100vw - 48px) / 13.3));
  }
}
h3 { font-size: clamp(18px, 2vw, 22px); letter-spacing: -0.01em; }
h4 { font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
p { font-size: 16px; line-height: 1.6; color: #26241f; }
strong { font-weight: 700; color: var(--ink); }
em { font-style: normal; }
h2 em { color: var(--blue); }

/* Line-wrap quality — even out ragged line endings WITHOUT justifying, so the
   page stays left-aligned / ragged-right (the brutalist idiom).
   • balance: short display blocks — section headlines + section intros.
   • pretty:  body copy — trims orphans / lone short last lines.
   The hero headline is excluded on purpose (its <br>s are hard-coded). */
h2,
.get-intro, .curriculum-intro, .fit-intro, .enroll-intro { text-wrap: balance; }
p, li, summary, dd { text-wrap: pretty; }

/* Chinese section headlines: when the headline wraps, keep the blue clause (<em>)
   whole and let it drop to the second line as a unit, with the black clause on the
   first — so the blue text always lands together on line 2. Greedy wrap (not
   balance) so the short black clause fills line 1 and balance can't strand one of
   its characters on line 2 (e.g. 一切都通往一場 / 系統解剖。). Headlines that fit a
   single line stay on one line. ≤600px already blocks the <em> onto its own line
   (see the 600px rule); this covers the wider widths. Scoped to zh-TW via
   <html data-lang>; English keeps text-wrap: balance. */
[data-lang="zh-TW"] section h2:not(.final-headline) { text-wrap: wrap; }
[data-lang="zh-TW"] section h2:not(.final-headline) em { white-space: nowrap; }

/* ============ Layout ============ */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
section { padding: var(--section-padding) 0; }
@media (max-width: 768px) {
  section { padding: var(--section-padding-mobile) 0; }
}

/* ============ Skip link ============ */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 12px 16px;
  z-index: 9999; font-weight: 700; border: 2px solid var(--ink);
}
.skip-link:focus { left: 16px; top: 16px; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px;
  border: 2px solid var(--ink);
  font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--shadow);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--shadow); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--shadow); }
.btn-primary { background: var(--red); color: #fff; }
.btn-secondary { background: var(--bg); color: var(--ink); }
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ============ Labels / eyebrows ============ */
.label-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted2);
  margin-bottom: 16px;
}
.label-eyebrow::before { content: "// "; color: var(--blue); }

/* ============ Hero ============ */
.hero {
  background: transparent;
  padding: 140px 0 84px 0;
  position: relative;
  border-bottom: 3px solid var(--ink);
  overflow: hidden;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 52px;
  align-items: center;
}
/* Establishes the sizing context for the headline below: its font tracks THIS
   column's width (cqi), not the viewport — see .hero-headline. */
.hero-content { min-width: 0; container-type: inline-size; }
.hero-headline {
  max-width: 660px;
  margin-bottom: 26px;
  /* Two hard-coded lines (see index.html):
       AI WRITES THE QUERY. / YOU UNDERSTAND THE SYSTEM.
     Line 2 is the widest at ~14.7em (26 chars incl. letter-spacing, plus the
     highlight's 0.24em padding). At desktop the hero is two columns, so this
     headline lives in a ~470-535px cell — far narrower than the viewport — which
     is why we size off the COLUMN via a container query (.hero-content is the
     container), not 100vw. 6.4cqi keeps line 2 on ONE line with ~6% slack at
     every width (100/14.7 = 6.8cqi is the exact fit); the cap bounds it on the
     widest column, the floor guards the narrowest phones (where line 2 is
     allowed to wrap). */
  font-size: clamp(16px, 6.4cqi, 38px);
  text-transform: uppercase;
  line-height: 1.06;
  white-space: normal;
}
/* First line reads as the lighter setup; "the system" is the highlighted payoff. */
.hero-headline .hl-lead { color: var(--muted); }
/* The trailing noun rotates as a vertical carousel: JS (see index.html) stacks the
   words in .hl-rotate__track, measures each, and slides the track up one line at a
   time. .hl-rotate masks the slot to a single line; its width glides to each word
   so the slot stays tight to the current word (any following text hugs it, no dead
   trailing space) instead of snapping to the widest word. Height/width/transform
   are set inline by the JS (measured px, so it survives the responsive cqi font and
   webfont swap). Reduced motion and viewports at or below 980px keep one static
   inline word and skip all of this. */
.hero-headline .hl-rotate {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  white-space: nowrap;
  transition: width 520ms cubic-bezier(.22, .61, .36, 1);
}
.hero-headline .hl-rotate__track {
  display: block;
  transition: transform 520ms cubic-bezier(.22, .61, .36, 1);
}
/* max-content so each word shrink-wraps to its own text (a plain block would
   fill the track, making every word measure at the widest word's width and
   killing the width glide — the slot would freeze at the widest word's width). */
.hero-headline .hl-rotate__word { display: block; width: max-content; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .hero-headline .hl-rotate,
  .hero-headline .hl-rotate__track { transition: none; }
}
.hero-headline em {
  font-style: normal;
  background: var(--blue);
  color: #fff;
  padding: 0 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hero-sub {
  max-width: 540px;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 500;
  color: #26241f;
  margin-bottom: 26px;
}
.hero-sub + .hero-sub { margin-top: -12px; }
.hero-sub strong { color: var(--ink); font-weight: 700; }
.hero-ctas {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
}
.hero-note {
  margin-top: 22px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--muted2);
}
.hero-note strong { color: var(--ink); font-weight: 700; }
.hero-note a { color: var(--blue); border-bottom: 2px solid var(--blue); }
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin-left: auto;
}
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { display: none; }
  .hero-headline { max-width: 900px; }
}
@media (max-width: 768px) {
  .hero { padding: 96px 0 60px 0; }
}

/* ============ Hero visual: Query Autopsy (light re-skin) ============ */
.query-autopsy {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(5px 5px 0 rgba(32, 29, 23, 0.4));
}
.ql-sql-box { fill: #ffffff; stroke: var(--ink); stroke-width: 2; }
.qa-panel { fill: #ffffff; stroke: var(--ink); stroke-width: 2; }
.qa-verdict-box { fill: var(--tint-blue); stroke: var(--ink); stroke-width: 2; }
.ql-label {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px; letter-spacing: 0.12em;
  fill: var(--muted2); text-transform: uppercase; font-weight: 700;
}
.ql-code-kw { fill: var(--blue); font-weight: 700; }
.ql-code-id { fill: var(--ink); }
.ql-code-str { fill: var(--red); }
.qa-op { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 12px; fill: var(--ink); }
.qa-op-slow { fill: var(--red); font-weight: 700; }
.qa-time { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 11.5px; fill: var(--muted2); }
.qa-time-slow { fill: var(--red); font-weight: 700; }
.qa-bar-ok { fill: var(--blue); }
.qa-bar-slow { fill: var(--red); animation: qa-pulse 2.6s ease-in-out infinite; }
.qa-flag { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 10px; fill: var(--red); font-weight: 700; }
.qa-total { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; fill: var(--muted2); }
.qa-scan { stroke: var(--blue); stroke-width: 1.5; opacity: 0; animation: qa-scan-move 4.6s cubic-bezier(0.5,0.2,0.45,0.95) infinite; }
.qa-verdict-label { fill: var(--blue); font-weight: 700; }
.qa-slow-num { fill: #a7a08c; }
.qa-arrow { fill: var(--ink); }
.qa-fast-num { fill: var(--blue); animation: qa-glow 2.6s ease-in-out infinite; }
.qa-strike { stroke: #a7a08c; stroke-width: 2; opacity: 0.9; }
.qa-fix { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 11px; fill: var(--ink); }
.ql-caption {
  margin-top: 18px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--muted2); text-align: center; text-transform: uppercase;
}
.ql-caption span { color: var(--blue); font-weight: 700; }
@keyframes qa-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes qa-glow { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
@keyframes qa-scan-move {
  0% { transform: translateY(0); opacity: 0; }
  8% { opacity: 0.5; }
  60% { transform: translateY(150px); opacity: 0.5; }
  72% { opacity: 0; }
  100% { transform: translateY(150px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .qa-bar-slow, .qa-fast-num, .qa-scan { animation: none !important; }
  .qa-scan { opacity: 0; }
}

/* ============ MECAD method — the loop ============ */
.mecad { background: var(--bg); border-bottom: 3px solid var(--ink); }
.mecad h2 { margin-bottom: 16px; }
.mecad-intro {
  max-width: 720px; font-size: 17px; line-height: 1.55; font-weight: 500;
  margin-bottom: 44px; color: #26241f;
}
.mecad-intro strong { color: var(--ink); font-weight: 700; }
.mecad-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.mecad-steps li {
  position: relative;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow);
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mecad-steps li:nth-child(1) { background: var(--yellow); }
.mecad-steps li:nth-child(4) { background: var(--tint-blue); }
.mecad-steps li:nth-child(6) { background: var(--tint-red); }
.mecad-letter {
  font-size: 34px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.mecad-steps li strong {
  font-size: 16px;
  color: var(--ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.mecad-steps li p {
  font-size: 13.5px;
  line-height: 1.45;
  color: #2a2822;
  font-weight: 500;
  margin: 0;
}
.mecad-steps li::after { content: none; }
@media (max-width: 900px) {
  .mecad-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .mecad-steps { grid-template-columns: 1fr; }
}

/* ============ System Autopsy card ============ */
.autopsy { background: var(--bg-warm); border-bottom: 3px solid var(--ink); }
.autopsy h2 { margin-bottom: 16px; }
.autopsy-intro {
  max-width: 720px; font-size: 17px; line-height: 1.55; font-weight: 500;
  margin-bottom: 36px; color: #26241f;
}
.autopsy-intro strong { color: var(--ink); font-weight: 700; }
.autopsy-card {
  max-width: 720px;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
  overflow: hidden;
}
.autopsy-card-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 22px;
  background: var(--ink);
  color: #fff;
}
.autopsy-id {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--yellow); text-transform: uppercase; font-weight: 700;
}
.autopsy-title { font-size: 14px; font-weight: 600; color: #fff; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
.autopsy-rows { display: flex; flex-direction: column; padding: 6px 22px 4px; }
.autopsy-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 2px solid #ece9dd;
}
.autopsy-row dt {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted2); font-weight: 700;
  padding-top: 2px;
}
.autopsy-row dd { font-size: 14.5px; line-height: 1.5; color: #26241f; margin: 0; font-weight: 500; }
.autopsy-row dd code {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 13px; color: var(--blue); background: var(--tint-blue);
  padding: 1px 6px; border: 1px solid var(--ink);
}
.autopsy-num { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; color: var(--blue); font-weight: 700; }
.autopsy-row-decision { border-bottom: none; }
.autopsy-row-decision dt { color: var(--blue); }
.autopsy-row-decision dd { color: var(--ink); font-weight: 600; }
.autopsy-row-decision dd strong { color: var(--red); font-weight: 700; }
.autopsy-card-foot {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 16px 22px;
  border-top: 2px solid var(--ink);
  background: var(--bg-warm);
}
.mecad-chip {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink);
  border: 2px solid var(--ink); background: var(--yellow);
  padding: 3px 9px;
}
.autopsy-footnote {
  max-width: 720px;
  margin-top: 26px;
  font-size: 14.5px; line-height: 1.6; color: #26241f; font-weight: 500;
}
.autopsy-footnote strong {
  color: var(--ink); font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 13.5px;
}
@media (max-width: 560px) {
  .autopsy-row { grid-template-columns: 1fr; gap: 6px; }
  .autopsy-card-head { flex-direction: column; gap: 6px; }
}

/* ============ Pricing tier (used by the single enroll card) ============ */
.tier {
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
  padding: 30px 28px;
  display: flex; flex-direction: column;
  position: relative;
}
.tier-founding {
  background: var(--blue);
  color: #fff;
  border-color: var(--ink);
}
.tier-founding h3, .tier-founding .tier-price { color: #fff; }
.tier-founding .tier-tagline { color: #dce8ff; }
.tier-founding .tier-features { color: #eaf1ff; }
.tier-founding .tier-features strong { color: inherit; }
.tier-founding .tier-features li::before { color: var(--yellow); }
.tier-founding .tier-cta { background: var(--red); color: #fff; }
.tier-badge {
  position: absolute; top: -16px; left: 24px;
  background: var(--yellow); color: var(--ink);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 5px 10px; border: 2px solid var(--ink);
}
.tier h3 { margin-bottom: 6px; text-transform: uppercase; font-size: 22px; }
.tier-price {
  font-size: 56px; font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -0.03em;
  line-height: 1;
}
.tier-tagline {
  font-size: 14px; color: #dce8ff;
  margin-bottom: 22px; font-weight: 500;
}
.tier-features { flex-grow: 1; margin-bottom: 24px; }
.tier-features li {
  font-size: 14px; line-height: 1.45; font-weight: 500;
  padding-left: 22px; position: relative;
  margin-bottom: 10px;
}
.tier-features li::before {
  content: "\2726"; position: absolute; left: 0; top: 0;
  color: var(--yellow); font-weight: 700;
}
.tier-cta { width: 100%; justify-content: center; }

/* ============ FAQ ============ */
.faq { background: var(--bg); border-bottom: 3px solid var(--ink); }
.faq h2 { max-width: none; margin-bottom: 16px; }
.faq-intro {
  max-width: 720px; font-size: 17px; line-height: 1.55; font-weight: 500;
  margin-bottom: 40px; color: #26241f;
}
.faq-list {
  max-width: 860px;
  display: flex; flex-direction: column; gap: 14px;
}
.faq-item {
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
  overflow: hidden;
}
.faq-item[open] { box-shadow: 5px 5px 0 var(--blue); }
.faq-item summary {
  cursor: pointer;
  padding: 18px 56px 18px 22px;
  font-size: 16px; font-weight: 700;
  color: var(--ink);
  list-style: none;
  position: relative;
  line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 22px; color: var(--blue); font-weight: 700; line-height: 1;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.faq-body { padding: 0 22px 20px; }
.faq-body p { font-size: 15px; line-height: 1.65; color: #2a2822; font-weight: 500; }
.faq-body strong { color: var(--ink); font-weight: 700; }
.faq-body code {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 13px; color: var(--blue); background: var(--tint-blue);
  padding: 1px 5px; border: 1px solid var(--ink);
}
@media (max-width: 560px) {
  .faq-item summary { padding: 16px 48px 16px 18px; font-size: 15px; }
  .faq-item summary::after { right: 16px; }
  .faq-body { padding: 0 18px 16px; }
}

/* ============ Final CTA ============ */
.final-cta {
  background: var(--ink);
  color: #fff;
  text-align: left;
  border-bottom: 3px solid var(--ink);
}
/* Fluid size keeps the longest line ("Understand data systems") on ONE line at
   every viewport width — the divisor is that line's measured width in em (+ slack)
   and the leading `100vw - Npx` accounts for the container's horizontal padding,
   so the clamp floor never forces a wrap the way a fixed min would. */
.final-headline {
  color: #fff; max-width: none; margin: 0 0 22px;
  /* 1.25 (not tighter) so the inline .final-headline em highlight — whose blue
     background fills Space Grotesk's full ~1.18em glyph box — clears the line
     above instead of colliding with it, most visibly on narrow/mobile widths. */
  line-height: 1.25; letter-spacing: -0.03em;
  font-size: clamp(16px, calc((100vw - 52px) / 13.8), 54px);
}
.final-headline .fh-line { display: block; white-space: nowrap; }
.final-headline em { font-style: normal; background: var(--blue); color: #fff; padding: 0 0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.final-sub {
  color: #cfccc4; font-weight: 500;
  font-size: 17px; margin-bottom: 30px;
  max-width: 640px; margin-left: 0; margin-right: 0;
}
.final-btn { background: var(--yellow); color: var(--ink); box-shadow: 4px 4px 0 var(--blue); }
.final-btn:hover { box-shadow: 2px 2px 0 var(--blue); }
.final-cta .btn:focus-visible { outline-color: var(--yellow); }

/* ============ Footer ============ */
.footer {
  background: var(--bg);
  padding: 52px 0;
}
.footer-inner {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; flex-wrap: wrap;
}
.footer-logo {
  display: block; width: 36px; height: 36px; flex-shrink: 0;
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--shadow);
}
.footer-brand-name { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 17px; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }
.footer-brand-tagline {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 12px; color: var(--muted2);
}
.footer-meta { text-align: right; }
.footer-fineprint {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 12px; color: var(--muted2); letter-spacing: 0.02em;
}
@media (max-width: 700px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-meta { text-align: left; }
}

/* ============ Modal + Waitlist form ============ */
.modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(17,17,17,0.55);
}
.modal-panel {
  position: relative;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 7px 7px 0 var(--shadow);
  max-width: 560px; width: 100%;
  /* dvh tracks the *visible* viewport (excludes iOS/iPadOS browser chrome so the
     panel can scroll instead of hiding its bottom behind the toolbar); vh = fallback. */
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  animation: modalFadeIn 0.15s ease;
}
@keyframes modalFadeIn { from { opacity: 0; transform: translate(4px, 4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal-panel { animation: none; } }
.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); background: var(--bg);
}
.modal-close:hover { background: var(--red); color: #fff; }
.modal-close:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.modal-body { padding: 40px 34px 32px; }
.modal-body h2 { font-size: 30px; margin-bottom: 8px; }
.modal-sub { font-size: 15px; color: #2a2822; font-weight: 500; margin-bottom: 26px; }

.waitlist-form .field { margin-bottom: 20px; }
.waitlist-form fieldset { border: none; }
.waitlist-form label, .waitlist-form legend {
  display: block;
  font-size: 12px; font-weight: 700;
  color: var(--ink); margin-bottom: 8px;
  letter-spacing: 0.06em; text-transform: uppercase;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}
.waitlist-form .required { color: var(--red); }
.waitlist-form .optional { color: var(--muted2); font-weight: 400; }
.waitlist-form input[type="email"], .waitlist-form input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--ink);
  font: inherit; font-size: 15px;
  background: var(--paper); color: var(--ink);
}
.waitlist-form input::placeholder { color: var(--muted2); }
.waitlist-form input[type="email"]:focus-visible, .waitlist-form input[type="text"]:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 2px;
}
.radio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.radio-grid label {
  display: flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 14px; cursor: pointer;
  padding: 8px 10px; margin-bottom: 0;
  border: 2px solid var(--ink); background: var(--paper);
  letter-spacing: 0; text-transform: none;
  font-family: 'Space Grotesk', sans-serif;
}
.radio-grid label:hover { background: var(--tint-blue); }
.radio-grid label:has(input:checked) { background: var(--yellow); }
.radio-grid label:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }
.radio-grid input[type="radio"] { margin: 0; accent-color: var(--ink); }
.form-actions { display: flex; gap: 14px; align-items: center; margin-top: 26px; }
.form-submit { flex-grow: 1; justify-content: center; }
.form-submit:disabled { opacity: 0.6; cursor: wait; }
.form-error { font-size: 13px; color: var(--red); font-weight: 700; margin-top: 12px; }
.form-error a { text-decoration: underline; }
.form-success { text-align: center; padding: 24px 0; }
.form-success svg { margin: 0 auto 20px; color: var(--blue); }
.form-success h3 { color: var(--ink); margin-bottom: 8px; font-size: 24px; text-transform: uppercase; }
.form-success p { color: #2a2822; font-size: 15px; font-weight: 500; }
@media (max-width: 560px) {
  /* Centered card on mobile (was a top-anchored full-bleed sheet). 16px gutters +
     align-items:center; max-height caps the panel to the visible viewport (dvh) minus
     the gutters so it stays fully on-screen and scrolls internally when content is tall. */
  .modal { padding: 16px; align-items: center; }
  .modal-panel {
    box-shadow: 5px 5px 0 var(--shadow);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
  }
  .modal-body { padding: 28px 22px max(24px, env(safe-area-inset-bottom)); }
  .radio-grid { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column; }
  .form-actions .btn { width: 100%; justify-content: center; }
}