/* MeetPi marketing site — one stylesheet, no build step.
   Tokens mirror web/src/styles/tokens.css (the product is the source of truth).
   Colour appears only as functional status, never as mood. */

/* ---------- Fonts (self-hosted, variable, latin subset) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/inter.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("assets/jetbrains-mono.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  --paper: #f4f2ec;
  --paper-raised: #fbfaf5;
  --ink: #17150f;
  --ink-soft: #59554a;
  --ink-faint: #726c5c;
  --hairline: #ded9cd;
  --hairline-strong: #c9c3b4;

  --in: #2e6b44;
  --in-tint: #e4ede4;
  --out: #a23b32;
  --out-tint: #f1e3e0;
  --wait: #8a6a1f;
  --wait-tint: #efe8d6;

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --radius: 12px;
  --radius-pill: 999px;
  --tap-min: 44px;
  --measure: 62ch;
  --page: 1080px;

  --texture-opacity: 0.4;
  --texture-blend: multiply;
  --texture-filter: none;

  color-scheme: light;
}

/* Light is the default for everyone, regardless of the OS setting.
   Dark stays available only as an explicit opt-in via the toggle below. */
:root[data-theme="light"] {
  --paper: #f4f2ec; --paper-raised: #fbfaf5; --ink: #17150f; --ink-soft: #59554a;
  --ink-faint: #726c5c; --hairline: #ded9cd; --hairline-strong: #c9c3b4;
  --in: #2e6b44; --in-tint: #e4ede4; --out: #a23b32; --out-tint: #f1e3e0;
  --wait: #8a6a1f; --wait-tint: #efe8d6;
  --texture-opacity: 0.4; --texture-blend: multiply; --texture-filter: none;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #0f0e0b; --paper-raised: #191712; --ink: #f1eee4; --ink-soft: #a9a392;
  --ink-faint: #858071; --hairline: #29251d; --hairline-strong: #38332a;
  --in: #6fb98a; --in-tint: #17231a; --out: #e08a80; --out-tint: #2a1815;
  --wait: #d6b25e; --wait-tint: #241e10;
  --texture-opacity: 0.25; --texture-blend: screen; --texture-filter: invert(1);
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; }

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 5.5rem; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem; /* 16px floor, never smaller for body copy */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* safety net: the page body never scrolls sideways */
}

/* Paper grain: the one piece of atmosphere the brand permits. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: url("assets/paper-texture.webp");
  background-size: 640px;
  mix-blend-mode: var(--texture-blend);
  filter: var(--texture-filter);
  opacity: var(--texture-opacity);
  pointer-events: none;
  transform: translateZ(0);
}
body > * { position: relative; z-index: 1; }

::selection { background: var(--ink); color: var(--paper); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--ink); /* focus is ink, not a stray blue */
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  z-index: 50;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- Type ---------- */
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; font-weight: 800; text-wrap: balance; overflow-wrap: break-word; }

.display {
  font-size: clamp(1.9rem, 1rem + 4.4vw, 4.25rem);
  letter-spacing: -0.03em;
}
h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
h3 { font-size: 1.375rem; font-weight: 700; }

p { max-width: var(--measure); }
.lede { font-size: 1.125rem; color: var(--ink-soft); }
.small { font-size: 0.9375rem; color: var(--ink-soft); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 1rem;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
time, .asof { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-soft); }

/* ---------- Status (colour never appears without its word) ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.15em 0.7em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.pill::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; }
.pill-in { color: var(--in); background: var(--in-tint); }
.pill-out { color: var(--out); background: var(--out-tint); }
.pill-wait { color: var(--wait); background: var(--wait-tint); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 1.25rem; }

section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
section + section { border-top: 1px solid var(--hairline); }

.grid2 { display: grid; gap: 3rem; align-items: center; }
.grid3 { display: grid; gap: 2rem; }
@media (min-width: 880px) {
  .grid2 { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .grid3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---------- Header / nav ---------- */
.site-header {
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 20;
}
@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) and (background: color-mix(in srgb, red 50%, transparent)) {
  .site-header {
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}
@media (max-width: 560px) {
  .site-header { position: static; }
}
.nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 64px;
  flex-wrap: wrap;
  padding: 0.5rem 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.brand svg { width: 30px; height: auto; display: block; }
.brand-svg { width: 34px; height: auto; display: block; flex: none; }
.site-footer .brand-svg { width: 30px; }
.nav-links {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto;
  list-style: none;
  padding: 0;
}
.nav-links a { text-decoration: none; font-size: 0.9375rem; padding: 0.5rem 0; }
.nav-links a:hover { text-decoration: underline; }
.nav-links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: var(--tap-min);
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.btn:hover { opacity: 0.9; }
.btn:active { transform: translateY(1px); }
.btn .cost {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.85;
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
}
.btn-row { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center; }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(3rem, 7vw, 5.5rem); }
.hero .display { margin: 0.25rem 0 1.25rem; font-variant-numeric: tabular-nums; }
.hero .lede { margin-bottom: 2rem; }

/* ---------- Demo caption ---------- */
.demo-note {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- The status card (hero + platform previews) ---------- */
.board {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
  padding: 1.1rem 1.2rem;
  display: grid;
  gap: 0.6rem;
}
.board-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-weight: 700;
}
.board-tally {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  align-items: center;
}
.board-names { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---------- Hero demo tour (progressive enhancement over the static board) ----------
   Without JS, .board-fallback stands (same pattern as html.can3d below).
   With JS, an interactive tour replaces it: autoplaying, device-appropriate,
   switchable either way by the visitor. */
.hero-demo { display: grid; gap: 1rem; margin-top: clamp(2.5rem, 6vw, 4rem); }
.board-fallback { max-width: 460px; }
.demo-embed { display: none; }
html.js .demo-embed { display: grid; gap: 1rem; justify-items: start; }
html.js .board-fallback { display: none; }

.demo-toggle {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  background: var(--paper-raised);
}
.demo-tab {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.45rem 1rem;
  min-height: 36px;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.demo-tab[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.demo-tab:hover:not([aria-pressed="true"]) { color: var(--ink); }

/* The tour's video canvas is a FIXED aspect ratio (its stage is 1280x720 on
   desktop, 390x800 on mobile) and it scales that canvas to fill its width.
   So we give the iframe the exact same ratio: the canvas then fills the
   iframe precisely, top and bottom flush and symmetric, with no measurement
   and no scrollbar. The tour's own transport bar and footer sit BELOW the
   canvas in its document, so at this height they fall outside the iframe and
   are simply not shown — exactly what we want. (site.js still zeroes the
   tour's default body margin so the canvas starts flush at the top edge.) */
/* The aspect ratio lives on this WRAPPER div (not the iframe): browsers honor
   aspect-ratio on a block reliably, whereas on the iframe element itself it is
   applied inconsistently (it held for the wide desktop ratio but not the tall
   mobile one). The iframe then fills the wrapper absolutely, so the tour's
   canvas exactly fills the frame, top and bottom flush, with its transport bar
   and footer clipped below. */
.demo-frame-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 1280 / 720; /* default; JS sets data-active before paint */
}
.demo-frame-wrap[data-active="desktop"] { aspect-ratio: 1280 / 720; }
.demo-frame-wrap[data-active="mobile"] {
  aspect-ratio: 390 / 800;
  max-width: 22rem;
  margin-inline: auto;
}
.demo-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}
.demo-frame[hidden] { display: none; }

/* ---------- Cards / steps ---------- */
.card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper-raised);
  padding: 1.75rem;
}
.card h3 { margin-bottom: 0.6rem; }
.step-num {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 0.75rem;
}

/* ---------- The week strip ---------- */
.week {
  display: grid;
  gap: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper-raised);
  overflow: hidden;
}
.week-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  align-items: baseline;
}
.week-row + .week-row { border-top: 1px solid var(--hairline); }
.week-day {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.week-line { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.9375rem; }
@media (max-width: 520px) {
  .week-row { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* ---------- Fact strip ---------- */
.facts { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 880px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { background: var(--paper-raised); padding: 1.5rem; }
.fact .mono { display: block; font-size: 1.375rem; font-weight: 700; margin-bottom: 0.35rem; }

/* ---------- Pricing ---------- */
.plans { display: grid; gap: 1.25rem; align-items: stretch; }
@media (min-width: 880px) { .plans { grid-template-columns: repeat(4, 1fr); } }
.plan {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.plan-name { font-weight: 800; font-size: 1.125rem; letter-spacing: -0.01em; }
.plan-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.plan-price .per { font-size: 0.8125rem; font-weight: 500; color: var(--ink-soft); display: block; }
.plan ul { list-style: none; padding: 0; display: grid; gap: 0.45rem; font-size: 0.9375rem; }
.plan li { padding-left: 1.1rem; position: relative; }
.plan li::before { content: "·"; position: absolute; left: 0.25rem; font-weight: 800; }
.plan .who { margin-top: auto; font-size: 0.875rem; color: var(--ink-soft); border-top: 1px solid var(--hairline); padding-top: 0.9rem; }
.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  padding: 0.2em 0.8em;
  color: var(--ink-soft);
}

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  cursor: pointer;
  font-weight: 700;
  padding: 1.1rem 0.25rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--tap-min);
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.25rem; color: var(--ink-soft); flex-shrink: 0; }
.faq details[open] summary::after { content: "−"; }
.faq .answer { padding: 0 0.25rem 1.25rem; display: grid; gap: 0.75rem; }

/* ---------- Refusals ---------- */
.refusals { display: grid; gap: 0; counter-reset: refusal; border-top: 1px solid var(--hairline); }
.refusal {
  counter-increment: refusal;
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1.5rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--hairline);
}
.refusal::before {
  content: counter(refusal, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 1.125rem;
  color: var(--ink-faint);
  padding-top: 0.4rem;
}
.refusal .r-title { font-size: clamp(1.375rem, 1rem + 1.5vw, 1.75rem); font-weight: 700; margin-bottom: 0.5rem; }
@media (max-width: 520px) {
  .refusal { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* ---------- The ground-marks plate (the site's one generated image) ----------
/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 3rem 0 4rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 880px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.site-footer .brand { color: var(--ink); margin-bottom: 0.75rem; }
.theme-toggle {
  font: inherit;
  font-size: 0.875rem;
  background: none;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  color: inherit;
  padding: 0.4rem 1rem;
  min-height: var(--tap-min);
  cursor: pointer;
}
html:not(.js) .theme-toggle { display: none; }

/* ============================================================
   Platform refinement pass — modules, AI, the floating showcase,
   the premium CTA. Same tokens, same restraint, more surface.
   ============================================================ */

/* ---------- Premium primary CTA ---------- */
.btn {
  box-shadow: 0 1px 0 rgba(23,21,15,0.04);
}
.btn:not(.btn-ghost) {
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.15s ease;
}
.btn:not(.btn-ghost):hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -8px rgba(23,21,15,0.5);
}
.btn .arrow {
  display: inline-block;
  transition: transform 0.2s ease;
  margin-left: 0.1em;
}
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- The OS line (one platform / one login / one truth) ---------- */
.osline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 1.25rem 0;
  margin-top: 2.5rem;
}
.osline b { color: var(--ink); font-weight: 700; }

/* ---------- Platform module grid ---------- */
.modules {
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 2.5rem;
}
@media (min-width: 660px) { .modules { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .modules { grid-template-columns: 1fr 1fr 1fr; } }
.module {
  background: var(--paper-raised);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
a.module:hover { background: color-mix(in srgb, var(--paper-raised) 82%, var(--ink)); }
.module .ico {
  width: 30px; height: 30px;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.module .ico svg { width: 100%; height: 100%; display: block; }
.module h3 { font-size: 1.0625rem; font-weight: 700; margin: 0; }
.module p { font-size: 0.9375rem; color: var(--ink-soft); margin: 0; }
.module .more {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin-top: auto;
  padding-top: 0.5rem;
}
a.module:hover .more { color: var(--ink); }

/* ---------- Mockup cards (the "glass" UI-snippet cards used across the site) ---------- */
.glass {
  border-radius: 18px;
  border: 1px solid var(--hairline-strong);
  background: var(--paper-raised); /* opaque fallback — stays legible without color-mix */
  box-shadow: 0 20px 40px -28px rgba(23,21,15,0.4);
  padding: 1.1rem 1.2rem;
  overflow: hidden;
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .glass { background: color-mix(in srgb, var(--paper-raised) 90%, transparent); }
}
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .glass { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
:root[data-theme="dark"] .glass,
.glass {
  box-shadow: 0 20px 40px -28px rgba(0,0,0,0.6);
}

/* ---------- Mini real-UI inside panels ---------- */
.ui-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: 0.7rem;
}
.ui-title { font-weight: 700; font-size: 1rem; }
.ui-asof { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-soft); }
.ui-fline {
  font-family: var(--font-mono); font-weight: 700; font-size: 1.0625rem;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1.35;
  padding: 0.5rem 0 0.9rem;
}
.ui-row {
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
  padding: 0.55rem 0; border-top: 1px solid var(--hairline);
  font-size: 0.9375rem;
}
.ui-row .r { display: flex; align-items: center; gap: 0.6rem; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.ui-btn {
  margin-top: 0.9rem; width: 100%; text-align: center;
  background: var(--ink); color: var(--paper); border-radius: 10px;
  padding: 0.6rem; font-weight: 600; font-size: 0.9375rem;
}
.ui-btn .c { font-family: var(--font-mono); font-size: 0.75rem; opacity: 0.8; }

/* ladder */
.ui-ladder { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.ui-ladder th {
  text-align: left; font-family: var(--font-mono); font-weight: 600;
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft); padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--hairline-strong);
}
.ui-ladder td { padding: 0.42rem 0.4rem; border-bottom: 1px solid var(--hairline); font-variant-numeric: tabular-nums; }
.ui-ladder td:first-child { color: var(--ink-soft); width: 1.5rem; }
.ui-ladder .num { text-align: right; font-family: var(--font-mono); }
.ui-ladder tr.me td { font-weight: 700; }
.ui-ladder tr.me td:first-child { color: var(--in); }

/* fixture / match centre */
.ui-fixture { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; padding: 0.5rem 0; }
.ui-team { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.9375rem; }
.ui-team.away { justify-content: flex-end; text-align: right; }
.ui-crest { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--hairline-strong); flex: none; }
.ui-score { font-family: var(--font-mono); font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.ui-meta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-soft); text-align: center; margin-top: 0.5rem; }

/* AI draft */
.ui-aihead { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.ui-badge {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  border: 1px solid var(--hairline-strong); border-radius: 999px; padding: 0.15em 0.6em; color: var(--ink-soft);
}
.ui-draft { font-size: 0.9375rem; line-height: 1.5; color: var(--ink); }
.ui-draft .cursor { border-right: 2px solid var(--ink); }
.ui-draftfoot { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.ui-chip { flex: 1; text-align: center; border-radius: 9px; padding: 0.5rem; font-weight: 600; font-size: 0.875rem; border: 1px solid var(--hairline-strong); }
.ui-chip.send { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- AI band ---------- */
.ai-band {
  display: grid; gap: 1.5rem; margin-top: 2.5rem;
}
@media (min-width: 820px) { .ai-band { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } }
.ai-list { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 0.9rem; }
.ai-list li { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.75rem; align-items: start; font-size: 1rem; }
.ai-list .tick { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; color: var(--in); flex: none; }
.ai-note {
  margin-top: 1.5rem; padding: 1rem 1.2rem; border-left: 2px solid var(--ink);
  background: var(--paper-raised); border-radius: 0 10px 10px 0;
  font-size: 0.9375rem; color: var(--ink-soft);
}
.ai-note b { color: var(--ink); }

/* ---------- Section eyebrow-centered variant for showcase ---------- */
.tighttop { padding-top: clamp(2.5rem, 6vw, 4rem); }

/* ---------- One Line illustrations ----------
   Cells split from docs/design/illustrations (founder-approved master style:
   thin ink outlines, occasional solid fills). Inlined so they draw in
   currentColor; interior paper knockouts use var(--paper-raised), so both
   themes come free. Illustration is a guest here, never wallpaper. */
.illo { display: block; color: var(--ink); }
.illo svg { display: block; height: 100%; width: auto; max-width: 100%; }
.module .illo { height: 72px; margin-bottom: 0.4rem; }
.illo-side { height: 64px; margin-bottom: 1.25rem; }
.illo-cta { height: 72px; margin: 0 auto 1.5rem; width: fit-content; }

/* The field-plan key art: the one large plate, drawn for this site.
   External file (cacheable); dark theme inverts it, same as the paper grain. */
.keyart { display: block; width: min(100%, 880px); margin: 3rem auto 0; }
.keyart img { width: 100%; height: auto; display: block; }
:root[data-theme="dark"] .keyart img { filter: invert(0.93) hue-rotate(180deg); }

/* Setup steps (product page) */
.setup-steps { list-style: none; padding: 0; display: grid; gap: 0.55rem; font-size: 0.9375rem; }
.setup-steps .mono { display: inline-block; min-width: 1.4rem; color: var(--ink-soft); font-weight: 600; }

/* ---------- Closing CTA, set on a whisper of chalk ground-marks ----------
   Reuses the one sanctioned duotone plate as faint atmosphere, never a wash. */
.cta-marks { position: relative; overflow: hidden; }
.cta-marks::before {
  content: "";
  position: absolute;
  right: -6%;
  bottom: -30%;
  width: min(560px, 70%);
  aspect-ratio: 4 / 5;
  background: url("assets/ground-marks.webp") no-repeat center / contain;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 700px) { .cta-marks::before { opacity: 0.05; right: -20%; } }

/* ---------- Print ---------- */
@media print {
  .site-header, .skip-link, .theme-toggle, .showcase-scroll { display: none; }
  body::before { display: none; }
  .faq details { break-inside: avoid; }
}

/* ---------- Motion discipline ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}