:root {
  --ink: #003366;
  --ink-soft: #0a3f7a;
  --text: #202a3a;
  --text-muted: #657084;

  --bg: #E6EDF5;
  --card-bg: #fff;
  --border: #dce1ea;

  --primary: #0666CC;
  --primary-dark: #003366;
  --primary-tint: #e5f0fb;

  --accent: #3399FF;
  --accent-dark: #0666CC;
  --accent-tint: #e5f2ff;

  --pitch: #23865a;
  --pitch-tint: #e8f6ee;
  --amber: #b86a12;
  --amber-tint: #fdf1de;
  --red: #c0392b;
  --red-tint: #fbe9e6;
  --blue: #2f62b3;
  --blue-tint: #e8f0fc;

  --navy-900: #003366;

  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  --font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
html, body { margin: 0; padding: 0; }
body {
  font: 400 16px/1.6 var(--font-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--primary); text-decoration: none; }
img, svg { max-width: 100%; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-24); }
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(230,237,245,0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  height: 72px;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font: 700 18px/1 var(--font-body);
  color: var(--ink);
  white-space: nowrap;
}
.brand-logo { height: 50px; width: auto; display: block; }
.foot-logo { height: 58px; width: auto; display: block; }
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  flex: 0 0 34px;
}
.nav-links { display: flex; gap: var(--space-20); }
.nav-links a { font: 500 14px/1 var(--font-body); color: var(--text); white-space: nowrap; }
.nav-links a:hover { color: var(--primary); }
.nav-right { display: flex; align-items: center; gap: var(--space-16); }
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary);
  color: #fff;
  font: 600 14px/1 var(--font-body);
  padding: 11px 20px;
  border-radius: 8px;
  transition: background .12s ease;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--primary-dark); text-decoration: none; }

/* ---------- Buttons, pills ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary);
  color: #fff;
  font: 600 15px/1 var(--font-body);
  padding: 15px 26px;
  border-radius: 10px;
  transition: background .12s ease, transform .12s ease;
}
.btn-primary:hover { background: var(--primary-dark); text-decoration: none; transform: translateY(-1px); }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--ink);
  font: 600 15px/1 var(--font-body);
  padding: 15px 22px;
  border-radius: 10px;
  border: 1px solid var(--border);
  transition: border-color .12s ease;
}
.btn-ghost:hover { border-color: var(--primary); text-decoration: none; }
.launch-pill {
  display: inline-flex;
  align-items: center;
  font: 600 12px/1 var(--font-body);
  color: var(--primary-dark);
  background: var(--primary-tint);
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.eyebrow {
  display: inline-block;
  font: 600 12px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-tint);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: var(--space-16);
}

/* ---------- Hero ---------- */
.hero { padding: var(--space-64) 0 var(--space-48); }
.hero .wrap {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: var(--space-48);
  align-items: center;
}
h1 {
  font: 800 46px/1.12 var(--font-body);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--space-16);
  text-wrap: balance;
}
h1 em { font-style: normal; color: var(--primary); }
.hero-dek {
  font: 400 18px/1.6 var(--font-body);
  color: var(--text-muted);
  margin: 0 0 var(--space-24);
  max-width: 46ch;
}
.launch-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-12);
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 var(--space-20);
}
.hero-ctas { display: flex; gap: var(--space-16); flex-wrap: wrap; }
.hero-visual { position: relative; padding-bottom: var(--space-32); }
.hero-visual .phone { position: absolute; right: -14px; bottom: -8px; width: 174px; }
.hero-visual .app-main { padding-right: 160px; }
.hero-visual .phone-screen { min-height: 330px; }

/* ---------- Trust band ---------- */
.band { background: var(--card-bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: var(--space-24) 0; }
.band .wrap { display: flex; align-items: center; gap: var(--space-24); flex-wrap: wrap; justify-content: center; }
.band p { margin: 0; font: 600 13px/1.4 var(--font-body); color: var(--text-muted); }
.chips { display: flex; gap: var(--space-8); flex-wrap: wrap; justify-content: center; }
.chip { font: 600 13px/1 var(--font-body); color: var(--ink); background: var(--bg); border: 1px solid var(--border); padding: 9px 14px; border-radius: 999px; }

/* ---------- Sections ---------- */
.section { padding: var(--space-64) 0; }
.section-alt { background: var(--card-bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head { max-width: 62ch; margin: 0 0 var(--space-32); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-eyebrow {
  font: 600 12px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 var(--space-12);
}
h2 {
  font: 700 32px/1.22 var(--font-body);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 var(--space-12);
  text-wrap: balance;
}
h3 { text-wrap: balance; }
.section-dek { color: var(--text-muted); margin: 0; font-size: 17px; }

.role-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-32) var(--space-24); }
.role-grid-3 { grid-template-columns: repeat(3, 1fr); }
.role-grid-2 { grid-template-columns: repeat(2, 1fr); }
.role-card {
  padding: var(--space-16) 0 0;
  border-top: 1px solid var(--border);
}
.role-card-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  margin-bottom: var(--space-12);
  font-size: 22px;
  color: var(--primary);
}
.role-card-icon .icon { width: 24px; height: 24px; }
.role-card h3 { font: 600 16px/1.3 var(--font-body); color: var(--ink); margin: 0 0 var(--space-8); }
.role-card ul { margin: 0; padding-left: 1.1em; font-size: 14px; color: var(--text-muted); }
.role-card li { margin-bottom: 6px; }
.role-card li:last-child { margin-bottom: 0; }
.role-card p { margin: 0; color: var(--text-muted); font-size: 15px; }

/* Split feature rows: text one side, product visual the other */
.split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-48); align-items: center; }
.split.flip { grid-template-columns: 1.1fr 0.9fr; }
.split.flip .split-visual { order: -1; }
.split-text .section-head { margin-bottom: var(--space-20); }
.checks { list-style: none; margin: 0 0 var(--space-24); padding: 0; display: grid; gap: var(--space-12); }
.checks li { display: flex; gap: var(--space-12); font-size: 15px; color: var(--text); }
.checks li::before {
  content: "";
  flex: 0 0 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--pitch-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%2323865a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;
}
.center-note { text-align: center; margin: var(--space-24) auto 0; max-width: 62ch; font-size: 15px; }
.text-link { font: 600 15px/1 var(--font-body); }
.sub-cards { margin-top: var(--space-32); }

/* ---------- Product mock-ups (drawn from the real screens, demo data) ---------- */
.shot { margin: 0; }
.shot figcaption { margin-top: var(--space-12); font: 500 12px/1.4 var(--font-body); color: var(--text-muted); text-align: center; }
.browser {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 60px -24px rgba(20,22,31,0.35), 0 4px 12px rgba(20,22,31,0.06);
  overflow: hidden;
}
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #eceef4; border-bottom: 1px solid var(--border); }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #c8cddb; display: block; }
.browser-url { margin-left: 10px; flex: 1; background: #fff; border-radius: 6px; padding: 4px 10px; font: 500 11px/1.4 var(--font-body); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app { display: grid; grid-template-columns: 112px 1fr; min-height: 280px; font-size: 12px; }
.app-side { background: var(--navy-900); padding: 14px 10px; display: grid; gap: 4px; align-content: start; }
.app-side b { display: block; color: #fff; font: 700 11px/1 var(--font-body); padding: 4px 8px 12px; }
.app-side span { color: #aab2c8; font: 500 11px/1 var(--font-body); padding: 8px; border-radius: 6px; }
.app-side span.on { background: rgba(91,63,209,0.45); color: #fff; }
.app-main { padding: 14px 16px 16px; min-width: 0; }
.app-title { font: 700 14px/1.2 var(--font-body); color: var(--ink); margin: 0 0 10px; }
.app-chips { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.app-chips span { font: 600 10px/1 var(--font-body); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); }
.app-chips span.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.mini { width: 100%; border-collapse: collapse; }
.mini th { text-align: left; font: 600 9.5px/1.2 var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); padding: 7px 8px; border-bottom: 1px solid var(--border); background: #f7f8fb; }
.mini td { padding: 7px 8px; border-bottom: 1px solid #eef0f5; font: 500 11px/1.3 var(--font-body); color: var(--text); }
.mini .num { text-align: right; font-variant-numeric: tabular-nums; }
.mini small { display: block; color: var(--text-muted); font-size: 9.5px; font-weight: 400; }
.st { display: inline-block; font: 600 9.5px/1 var(--font-body); padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.st-ok { background: var(--pitch-tint); color: var(--pitch); }
.st-warn { background: var(--amber-tint); color: var(--amber); }
.st-bad { background: var(--red-tint); color: var(--red); }
.st-info { background: var(--blue-tint); color: var(--blue); }
.st-vio { background: var(--primary-tint); color: var(--primary-dark); }
.mini-btn { display: inline-block; font: 600 9.5px/1 var(--font-body); padding: 5px 9px; border-radius: 6px; background: var(--primary); color: #fff; }
.mini-btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--border); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.kpi { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.kpi b { display: block; font: 700 16px/1.1 var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi span { font: 500 9.5px/1.3 var(--font-body); color: var(--text-muted); }

.phone {
  background: var(--navy-900);
  border-radius: 28px;
  padding: 8px;
  box-shadow: 0 24px 50px -20px rgba(20,22,31,0.55);
  width: 232px;
  margin: 0 auto;
}
.phone-screen { background: #fff; border-radius: 21px; overflow: hidden; min-height: 380px; font-size: 11px; }
.phone-top { background: var(--primary); color: #fff; padding: 14px 14px 12px; }
.phone-top small { display: block; font: 500 9.5px/1.3 var(--font-body); opacity: 0.8; }
.phone-top b { font: 700 13px/1.3 var(--font-body); }
.phone-body { padding: 12px; display: grid; gap: 8px; }
.row-card { border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 500 11px/1.35 var(--font-body); color: var(--text); }
.row-card small { display: block; color: var(--text-muted); font-size: 9.5px; font-weight: 400; }
.clock { text-align: center; font: 700 30px/1 var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums; padding: 6px 0 2px; }
.clock small { display: block; font: 600 9.5px/1.4 var(--font-body); color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 4px; }
.tap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tap-grid span { text-align: center; font: 700 10px/1 var(--font-body); padding: 10px 4px; border-radius: 8px; background: var(--primary-tint); color: var(--primary-dark); }
.tap-grid span.y { background: var(--amber-tint); color: var(--amber); }
.tap-grid span.r { background: var(--red-tint); color: var(--red); }

/* Drawer (referee card) */
.drawer-mock { display: grid; grid-template-columns: 1fr 190px; min-height: 280px; }
.drawer-mock .app-main { border-right: 1px solid var(--border); }
.drawer-side { padding: 14px 14px; background: #fcfcfe; display: grid; gap: 6px; align-content: start; }
.drawer-side h4 { margin: 0 0 4px; font: 700 12px/1.2 var(--font-body); color: var(--ink); }
.drawer-side .kv { display: flex; justify-content: space-between; gap: 8px; font: 500 10.5px/1.3 var(--font-body); padding: 6px 0; border-bottom: 1px solid #eef0f5; color: var(--text); }


/* ---------- Match tracker mock-up (phone screens, sizes scale with each phone) ---------- */
.tk-stage { container-type: inline-size; position: relative; width: 100%; aspect-ratio: 100 / 91; }
.tk-stage .tk-phone { position: absolute; width: 38%; }
.tk-stage .tk-a { left: 0; top: 7%; z-index: 1; }
.tk-stage .tk-b { left: 31%; top: 0; z-index: 3; }
.tk-stage .tk-c { left: 62%; top: 8%; z-index: 2; }
.tk-a .tk-screen { padding-right: 9cqw; }
.tk-c .tk-screen { padding-left: 9cqw; }
.tk-phone { container-type: inline-size; }
.tk-frame { background: #05080f; border-radius: 10cqw; padding: 2.6cqw; box-shadow: 0 24px 50px -18px rgba(7,20,38,0.6); }
.tk-screen { background: #10162a; border-radius: 7.8cqw; overflow: hidden; color: #fff; font-family: var(--font-body); aspect-ratio: 1 / 2.12; position: relative; display: flex; flex-direction: column; }
.tk-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2cqw; padding: 5cqw 4cqw 2cqw; }
.tk-back { justify-self: start; width: 7cqw; height: 7cqw; border-radius: 2cqw; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 4.2cqw; line-height: 1; }
.tk-score { text-align: center; font-size: 3.1cqw; font-weight: 600; line-height: 1.2; }
.tk-score b { display: block; font-size: 6cqw; font-weight: 800; font-variant-numeric: tabular-nums; }
.tk-net { justify-self: end; font-size: 2.6cqw; font-weight: 700; padding: 1cqw 2.4cqw; border-radius: 99px; background: #dcf5e7; color: #146c3f; white-space: nowrap; }
.tk-net.off { background: #fde8e8; color: #a01818; }
.tk-clock { text-align: center; padding: 1cqw 4cqw 2cqw; }
.tk-clock b { display: block; font-size: 11cqw; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.tk-clock small { display: block; margin-top: 1cqw; font-size: 2.8cqw; color: rgba(255,255,255,0.6); font-weight: 600; }
.tk-btns { display: flex; justify-content: center; gap: 2.4cqw; margin-top: 2cqw; }
.tk-btns span { font-size: 3cqw; font-weight: 700; padding: 2.2cqw 4.4cqw; border-radius: 2.4cqw; background: var(--primary); }
.tk-btns span.g { background: rgba(255,255,255,0.12); }
.tk-pitchwrap { padding: 0 7cqw; }
.tk-pitch { position: relative; width: 100%; aspect-ratio: 68 / 98; border-radius: 3.6cqw; overflow: hidden; background: repeating-linear-gradient(180deg, #1c6b3d 0 11.11%, #1a6238 11.11% 22.22%); border: 0.6cqw solid rgba(255,255,255,0.25); }
.tk-pitch::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.55) 1px, transparent 1px); background-position: 0 50%; background-size: 100% 1px; background-repeat: no-repeat; }
.tk-circle { position: absolute; left: 50%; top: 50%; width: 17%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,0.55); border-radius: 50%; transform: translate(-50%,-50%); }
.tk-t { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5cqw; width: 14cqw; }
.tk-t i { font-style: normal; position: relative; width: 8.6cqw; height: 8.6cqw; border-radius: 50%; background: linear-gradient(135deg, #3399FF, var(--primary)); border: 0.5cqw solid rgba(255,255,255,0.85); box-shadow: 0 1cqw 2cqw rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; font-size: 2.7cqw; font-weight: 800; color: #fff; }
.tk-t i s { position: absolute; top: -0.6cqw; left: -0.6cqw; width: 2.6cqw; height: 2.6cqw; border-radius: 0.7cqw; border: 0.4cqw solid #10162a; background: #eab308; }
.tk-t b { font-size: 2.5cqw; font-weight: 800; line-height: 1; color: #f0b86e; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.tk-t u { text-decoration: none; font-size: 2.4cqw; font-weight: 700; line-height: 1; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.tk-t.hi i { box-shadow: 0 0 0 1cqw rgba(255,255,255,0.35), 0 2cqw 4cqw rgba(0,0,0,0.4); }
.tk-bench { padding: 2.4cqw 4cqw 0; }
.tk-bench p { margin: 0 0 1.6cqw; font-size: 2.2cqw; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.tk-bench div { display: flex; gap: 2cqw; }
.tk-bench .tk-t { position: static; transform: none; width: 11cqw; }
.tk-bench .tk-t i { width: 7.4cqw; height: 7.4cqw; font-size: 2.4cqw; }
.tk-sheet { margin: 2cqw 3cqw 0; background: #1b2340; border-radius: 4cqw; padding: 3.6cqw; }
.tk-sheet h5 { margin: 0 0 0.8cqw; font-size: 3.6cqw; font-weight: 800; }
.tk-sheet small { display: block; font-size: 2.6cqw; color: rgba(255,255,255,0.6); margin-bottom: 2.6cqw; }
.tk-menu { display: grid; gap: 1.8cqw; }
.tk-menu span { display: flex; align-items: center; gap: 2.4cqw; padding: 2.8cqw 3cqw; border-radius: 3cqw; background: rgba(255,255,255,0.1); font-size: 3.2cqw; font-weight: 700; }
.tk-menu span::before { content: ""; width: 3cqw; height: 3cqw; border-radius: 50%; background: #1f7a4d; flex: none; }
.tk-menu span.y::before { background: #eab308; border-radius: 0.8cqw; }
.tk-menu span.b::before { background: #1f5f8f; }
.tk-menu span.r::before { background: #c0392b; }
.tk-menu span.sel { background: var(--primary); }
.tk-cancel { margin-top: 2.4cqw; text-align: center; font-size: 3cqw; font-weight: 700; color: rgba(255,255,255,0.7); padding: 2.4cqw; }
.tk-banner { margin: 1cqw 4cqw 2.4cqw; padding: 2.4cqw 3cqw; border-radius: 3cqw; background: rgba(240,184,110,0.16); color: #f0b86e; font-size: 2.9cqw; font-weight: 700; display: flex; justify-content: space-between; gap: 2cqw; }
.tk-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; padding: 0 4cqw; }
.tk-tiles span { border-radius: 3cqw; padding: 3.6cqw 2cqw; text-align: center; font-size: 3.1cqw; font-weight: 800; }
.tk-tiles .t1 { background: #1f7a4d; } .tk-tiles .t2 { background: #1f5f8f; } .tk-tiles .t3 { background: #8a6d1f; } .tk-tiles .t4 { background: #1f5f8f; }
.tk-log { padding: 3cqw 4cqw 0; }
.tk-log h6 { margin: 0 0 1.4cqw; font-size: 2.4cqw; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.55); font-weight: 700; }
.tk-row { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; padding: 2.2cqw 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 3cqw; font-weight: 700; }
.tk-row small { display: block; margin-top: 0.4cqw; font-size: 2.5cqw; font-weight: 500; color: rgba(255,255,255,0.6); }
.tk-row em { font-style: normal; flex: none; font-size: 2.3cqw; font-weight: 700; padding: 0.9cqw 2cqw; border-radius: 99px; background: rgba(240,184,110,0.18); color: #f0b86e; }
.tk-row em.ok { background: rgba(35,134,90,0.25); color: #6ee6a8; }
.tk-hero { width: 174px; position: absolute; right: -14px; bottom: -8px; }
.hero-visual .tk-hero { position: absolute; }
@media (max-width: 760px) {
  .tk-stage .tk-c { display: none; }
  .tk-stage { aspect-ratio: 100 / 118; }
  .tk-stage .tk-phone { width: 50%; }
  .tk-stage .tk-a { left: 0; top: 8%; }
  .tk-stage .tk-b { left: 44%; top: 0; }
  .hero-visual .tk-hero { position: static; margin: var(--space-24) auto 0; width: 232px; }
}

/* ---------- Lineup builder screenshots (real phone screens in the same overlapping frames) ---------- */
.lu-stage { aspect-ratio: 100 / 76; }
.tk-img { display: block; width: 100%; height: auto; border-radius: 7.8cqw; background: #fff; }
.lu-block { margin-top: var(--space-64); }
@media (max-width: 760px) {
  .lu-stage { aspect-ratio: 100 / 98; }
  .lu-block { margin-top: var(--space-48); }
}

/* ---------- Eight questions (dark band of scenario cards) ---------- */
.section-dark { background: var(--navy-900); color: #fff; }
.section-dark .section-eyebrow { color: #b3d4f5; }
.section-dark h2 { color: #fff; }
.section-dark .section-dek { color: rgba(255,255,255,0.74); }
.q-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-16); }
.q-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: var(--space-24); }
.q-card.featured { background: rgba(255,107,74,0.12); border-color: rgba(255,107,74,0.55); }
.q-tag { display: block; font: 700 11px/1 var(--font-body); letter-spacing: 0.09em; text-transform: uppercase; color: #f0b86e; margin-bottom: var(--space-12); }
.q-card h3 { font: 700 20px/1.3 var(--font-body); color: #fff; margin: 0 0 var(--space-12); text-wrap: balance; }
.q-card h4 { font: 600 15px/1.4 var(--font-body); color: #b3d4f5; margin: 0 0 var(--space-4); }
.q-card.featured h4 { color: #ffb4a2; }
.q-card p { margin: 0; color: rgba(255,255,255,0.78); font-size: 15px; }
.q-foot { margin-top: var(--space-32); text-align: center; }
.section-dark .text-link { color: #b3d4f5; }
@media (max-width: 760px) { .q-grid { grid-template-columns: 1fr; } }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); counter-reset: step; }
.step { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: var(--space-24); }
.step::before {
  counter-increment: step;
  content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--primary); color: #fff; font: 700 15px/1 var(--font-body);
  margin-bottom: var(--space-16);
}
.step h3 { font: 600 17px/1.3 var(--font-body); color: var(--ink); margin: 0 0 var(--space-8); }
.step p { margin: 0; color: var(--text-muted); font-size: 15px; }

/* ---------- Strip ---------- */
.strip { background: var(--ink-soft); color: #dfe3ee; padding: var(--space-48) 0; }
.strip .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-32); flex-wrap: wrap; }
.strip h2 { color: #fff; margin: 0 0 8px; font-size: 26px; }
.strip p { color: #a8aec2; margin: 0; max-width: 52ch; }
.strip .btn-primary { flex: 0 0 auto; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-48); align-items: start; }
.contact-status { border-radius: 10px; padding: 14px 18px; font: 600 14px/1.5 var(--font-body); margin: 0 0 var(--space-24); max-width: 560px; }
.contact-status-ok { background: var(--pitch-tint); color: var(--pitch); }
.contact-status-error { background: var(--accent-tint); color: var(--accent-dark); }
.contact-form { max-width: 560px; display: grid; gap: var(--space-16); position: relative; }
.contact-field { display: grid; gap: 6px; }
.contact-field label { font: 600 13px/1 var(--font-body); color: var(--ink); }
.contact-field input, .contact-field textarea {
  font: 400 15px/1.5 var(--font-body);
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--font-body);
  width: 100%;
}
.contact-field input:focus, .contact-field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form button { justify-self: start; border: none; cursor: pointer; font-family: var(--font-body); }
.contact-points { list-style: none; margin: var(--space-24) 0 0; padding: 0; display: grid; gap: var(--space-12); font-size: 15px; color: var(--text-muted); }

/* ---------- Footer ---------- */
footer { background: var(--navy-900); color: #aab2c8; padding: var(--space-48) 0 var(--space-32); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-32); padding-bottom: var(--space-32); border-bottom: 1px solid rgba(255,255,255,0.1); }
.foot-brand { display: flex; align-items: center; gap: var(--space-12); font: 700 16px/1 var(--font-body); color: #fff; margin-bottom: var(--space-12); }
.foot-brand .brand-mark { width: 26px; height: 26px; border-radius: 7px; flex: 0 0 26px; }
.foot-grid p { margin: 0; font-size: 14px; max-width: 34ch; }
.foot-grid h4 { margin: 0 0 var(--space-12); font: 600 12px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.foot-grid a { color: #aab2c8; }
.foot-grid a:hover { color: #fff; }
.foot-note { font: 400 13px/1.4 var(--font-body); margin: var(--space-24) 0 0; display: flex; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav .launch-pill { display: none; }
}
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .hero-visual .app-main { padding-right: 16px !important; }
  .hero .wrap, .split, .split.flip, .contact-grid { grid-template-columns: 1fr; }
  .split.flip .split-visual { order: 0; }
  .role-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  h1 { font-size: 34px; }
  h2 { font-size: 26px; }
  .section { padding: var(--space-48) 0; }
  .role-grid, .role-grid-3, .role-grid-2, .steps { grid-template-columns: 1fr; }
  .nav .wrap { height: 64px; }
  .nav .launch-pill { display: none; }
  .hero { padding: var(--space-32) 0; }
  .hero-visual .phone { position: static; margin-top: var(--space-24); width: 232px; }
  .hero-visual .phone-screen { min-height: 380px; }
  .app { grid-template-columns: 1fr; }
  .app-side { display: none; }
  .drawer-mock { grid-template-columns: 1fr; }
  .drawer-mock .app-main { border-right: none; border-bottom: 1px solid var(--border); }
  .mini .hide-sm { display: none; }
  .strip .wrap { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .foot-grid { grid-template-columns: 1fr; }
  .app-main { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn-primary { transition: none; } }

/* ---------- Content pages (additions to the home page styles) ---------- */
.crumbs { font: 500 13px/1.4 var(--font-body); color: var(--text-muted); margin: 0 0 var(--space-16); }
.crumbs a { color: var(--text-muted); }
.crumbs span { margin: 0 6px; }
.hero-visual.solo { padding-bottom: var(--space-16); }
.hero-visual.solo .app-main { padding-right: 16px; }
.site-head { background: var(--navy-900); color: #fff; font: 700 13px/1 var(--font-body); padding: 12px 16px; }
.note-band { background: var(--primary-tint); border-radius: 14px; padding: var(--space-20) var(--space-24); color: var(--ink); font-size: 15.5px; max-width: 760px; }
.faq { max-width: 820px; margin: 0 auto; }
.faq details { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; padding: 0 20px; }
.faq summary { cursor: pointer; font: 600 16px/1.4 var(--font-body); color: var(--ink); padding: 16px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--primary); }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { color: var(--text-muted); font-size: 16px; margin: 0 0 16px; max-width: 68ch; }
.section-alt .faq details { background: var(--bg); }
.steps h3 { font-size: 16px; }
.app-main > .kv { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 500 11.5px/1.4 var(--font-body); padding: 8px 0; border-bottom: 1px solid #eef0f5; color: var(--text); }
.split > *, .hero .wrap > *, .contact-grid > * { min-width: 0; }
.mini td, .mini th { overflow-wrap: anywhere; }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }