/* ==========================================================================
   OpenSlot marketing site — stylesheet
   Structure: 1. Variables  2. Reset/base  3. Layout utilities  4. Nav
   5. Buttons  6. Hero  7. Sections (per-section)  8. Footer  9. Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS (CSS variables)
   Grounded in OpenSlot's product palette: deep navy ink, muted gold accent,
   teal secondary accent. Reuse these variables rather than hardcoding colors
   anywhere else in this file.
-------------------------------------------------------------------------- */
:root {
  /* Color */
  --color-ink: #0B1628;              /* primary text, dark surfaces */
  --color-ink-soft: #3A4356;         /* secondary dark tone */
  --color-paper: #FAF9F6;            /* page background, warm near-white */
  --color-surface: #FFFFFF;          /* card / raised surface background */
  --color-surface-alt: #F3F1EA;      /* alternating section background */
  --color-border: rgba(11, 22, 40, 0.12);
  --color-border-strong: rgba(11, 22, 40, 0.22);
  --color-text-primary: var(--color-ink);
  --color-text-secondary: #5B6478;
  --color-text-muted: #8891A3;
  --color-gold: #B8862F;             /* accent text/icons (AA on white) */
  --color-gold-fill: #D4A843;        /* accent fill (buttons, highlights) */
  --color-gold-fill-hover: #C4973A;
  --color-gold-on: #2B1D00;          /* text color on gold fill */
  --color-teal: #157A68;             /* secondary accent text */
  --color-teal-fill: #2BB5A0;        /* secondary accent fill */

  /* Typography — Plus Jakarta Sans is the approved display/heading face
     sitewide (Fraunces retired; its swashy italic "f" was the original
     complaint, and mixing the two read as inconsistent). */
  --font-display: "Plus Jakarta Sans", "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Layout */
  --max-width: 1160px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --nav-height: 72px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
  color: var(--color-text-primary);
}

p { margin: 0; color: var(--color-text-secondary); }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* Visible focus state for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-gold-fill);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-ink);
  color: #fff;
  padding: 12px 20px;
  z-index: 100;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------------------
   3. LAYOUT UTILITIES
-------------------------------------------------------------------------- */
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 88px 0; }
.section-alt { background: var(--color-surface-alt); }

.section-head { max-width: 680px; margin-bottom: 40px; }
.section-head h2 { font-size: 32px; margin-top: 8px; }
.section-head-center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head-center .btn { margin-top: 24px; }

.section-lede { font-size: 17px; max-width: 62ch; margin-top: 16px; }
.section-note { font-size: 14px; color: var(--color-text-muted); margin-top: 24px; max-width: 62ch; }

/* Problem section's closing statement only — centered, bolder, own max-width.
   Scoped by ID so the Revenue Leak Score section's .section-note is untouched. */
#problem .section-note {
  text-align: center;
  font-weight: 600;
  max-width: 56ch;
  margin: 32px auto 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0;
}

/* --------------------------------------------------------------------------
   4. STICKY NAVIGATION
-------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 249, 246, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  height: var(--nav-height);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: block;
  flex-shrink: 0;
}
.logo-wordmark { display: inline-flex; align-items: baseline; line-height: 1; }
.logo-accent { color: var(--color-teal-fill); }
/* vertical-align has no effect inside a flex container, so the native <sup>
   super-positioning is reasserted explicitly via align-self instead. */
.logo-tm { color: var(--color-teal-fill); font-size: 0.55em; margin-left: 1px; align-self: flex-start; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
  font-weight: 500;
}
.nav-links a {
  color: var(--color-text-secondary);
  transition: color 150ms var(--ease);
  white-space: nowrap;
}
.nav-links a:hover { color: var(--color-text-primary); }
.nav-cta { margin-left: 4px; white-space: nowrap; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  padding: 0;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--color-ink);
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   5. BUTTONS
-------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 120ms var(--ease), background 150ms var(--ease), border-color 150ms var(--ease);
}
.btn:active { transform: scale(0.98); }

.btn-primary { background: var(--color-gold-fill); color: var(--color-gold-on); }
.btn-primary:hover { background: var(--color-gold-fill-hover); }

.btn-ghost { background: transparent; color: var(--color-text-primary); border-color: var(--color-border-strong); }
.btn-ghost:hover { border-color: var(--color-ink); }

.btn-sm { padding: 9px 16px; font-size: 13px; }
.btn-lg { padding: 16px 32px; font-size: 16px; }

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

/* --------------------------------------------------------------------------
   6. HERO
-------------------------------------------------------------------------- */
.hero { padding: 112px 0 120px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: center;
}

/* Small, quiet brand/category identifier — stays visually secondary to the H1. */
.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 0 0 16px;
}

.hero-copy h1 {
  font-family: "Plus Jakarta Sans", var(--font-body), sans-serif;
  font-weight: 700;
  font-size: 56px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
}

.hero-lede { font-size: 21px; color: var(--color-text-primary); margin-top: 26px; font-weight: 500; max-width: 46ch; }

/* Illustrative "Revenue Command Center" preview panel — pure CSS/HTML, no image assets required. */
.hero-visual { display: flex; }
.rcc-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px;
  width: 100%;
  box-shadow: 0 24px 60px -32px rgba(11, 22, 40, 0.35);
}
.rcc-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; row-gap: 6px; margin-bottom: 20px; }
.rcc-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-teal); }
/* Clearly-visible illustrative-data label — must not read as a verified customer result. */
.rcc-live { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.static-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-muted);
}

.rcc-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.rcc-stat { display: flex; flex-direction: column; gap: 4px; }
.rcc-stat-label { font-size: 12px; color: var(--color-text-muted); }
.rcc-stat-value { font-family: "Plus Jakarta Sans", var(--font-body), sans-serif; font-weight: 700; font-size: 24px; font-variant-numeric: tabular-nums; }

.rcc-list { border-top: 1px solid var(--color-border); padding-top: 12px; display: flex; flex-direction: column; }
.rcc-list-row {
  display: flex; justify-content: space-between; gap: 12px; padding: 10px 0;
  font-size: 13.5px; color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border);
}
.rcc-list-row:last-child { border-bottom: none; }
.rcc-list-value { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-text-primary); }

/* --- Category statement — high-impact, full-bleed differentiation band --- */
.category-statement {
  background: var(--color-ink);
  padding: 104px 0;
  text-align: center;
}
.category-statement h2 {
  font-family: "Plus Jakarta Sans", var(--font-body), sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.3;
  color: #fff;
  max-width: 780px;
  margin: 0 auto;
}

/* --- Revenue Model — simple two-category mental model --- */
.model-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.model-pillar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 56px 40px;
  text-align: center;
}
.model-pillar-title {
  font-family: "Plus Jakarta Sans", var(--font-body), sans-serif;
  font-weight: 700;
  font-size: 34px;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.model-pillar-grow .model-pillar-title { color: var(--color-gold); }
.model-pillar-recover .model-pillar-title { color: var(--color-teal); }
.model-pillar-line {
  font-size: 17px;
  font-weight: 500;
  color: var(--color-text-primary);
  max-width: 32ch;
  margin: 0 auto;
}
.model-pillar-attribution {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 28px;
}
.model-pillar-grow .model-pillar-attribution { color: var(--color-gold); }
.model-pillar-recover .model-pillar-attribution { color: var(--color-teal); }

/* --------------------------------------------------------------------------
   7. SECTIONS
-------------------------------------------------------------------------- */

/* --- Revenue problem: growth vs. recovery opportunity groups --- */
.leak-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.leak-group { background: var(--color-surface); padding: 32px; }
.leak-group-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.leak-group-grow .leak-group-eyebrow { color: var(--color-gold); }
.leak-group-recover .leak-group-eyebrow { color: var(--color-teal); }
.leak-group-title { font-size: 20px; margin-bottom: 18px; }
.leak-group-list { display: flex; flex-direction: column; gap: 12px; }
.leak-group-list li {
  font-size: 14.5px;
  color: var(--color-text-secondary);
  padding-left: 22px;
  position: relative;
}
.leak-group-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.leak-group-grow .leak-group-list li::before { background: var(--color-gold-fill); }
.leak-group-recover .leak-group-list li::before { background: var(--color-teal-fill); }

/* --- AI Workforce cards --- */
.workforce-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.workforce-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 1 calc((100% - 40px) / 3);
  min-width: 240px;
}
.workforce-role {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-gold); margin: 0;
}
.workforce-name { font-size: 22px; }
.workforce-tagline {
  font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--color-teal); margin: 0;
}
.workforce-desc { font-size: 14px; margin-top: 2px; }
.workforce-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.workforce-caps li {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.workforce-caps-note { font-size: 11px; color: var(--color-text-muted); margin-top: 8px; }

/* --- Find the Money (chip grid + priority example) --- */
.money-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}
.money-chip {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 500;
}

.priority-example {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.priority-example-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
}
.priority-example-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold-on);
  background: var(--color-gold-fill);
  border-radius: var(--radius-sm);
  padding: 3px 9px;
  flex-shrink: 0;
}
.priority-example-note { font-size: 12.5px; color: var(--color-text-muted); }
.priority-example-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-border);
}
.priority-col {
  background: var(--color-surface);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.priority-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.priority-value { font-family: "Plus Jakarta Sans", var(--font-body), sans-serif; font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }

/* --- Revenue Command Center feature grid --- */
.rcc-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.rcc-feature { background: var(--color-surface); padding: 22px 20px; }
.rcc-feature h3 { font-size: 16px; margin-bottom: 6px; }
.rcc-feature p { font-size: 13px; }

/* --- Revenue Leak Score gauge --- */
.leak-score-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.score-gauge { text-align: center; }
.gauge-svg { width: 100%; max-width: 280px; }
.gauge-fill { transition: stroke-dashoffset 800ms var(--ease); }
.gauge-readout { margin-top: -36px; }
.gauge-number { font-family: "Plus Jakarta Sans", var(--font-body), sans-serif; font-weight: 700; font-size: 48px; font-variant-numeric: tabular-nums; }
.gauge-total { font-size: 16px; color: var(--color-text-muted); }
.gauge-caption { font-size: 13px; color: var(--color-text-muted); margin-top: 8px; }

/* --- How OpenSlot Works (numbered steps) --- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.step { display: flex; flex-direction: column; gap: 10px; }
.step-num {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--color-gold-fill);
}
.step h3 { font-size: 18px; }
.step p { font-size: 14px; }

/* --- Why OpenSlot Is Different (comparison) --- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.compare-col { background: var(--color-surface); padding: 32px; }
.compare-col-featured { background: var(--color-ink); }
.compare-col h3 { font-size: 19px; margin-bottom: 20px; }
.compare-col-featured h3 { color: #fff; }
.compare-col ul { display: flex; flex-direction: column; gap: 12px; }
.compare-col li { font-size: 14.5px; padding-left: 22px; position: relative; color: var(--color-text-secondary); }
.compare-col li::before { content: "\2013"; position: absolute; left: 0; color: var(--color-text-muted); }
.compare-col-featured li { color: rgba(255,255,255,0.82); }
.compare-col-featured li::before { content: "\2713"; color: var(--color-teal-fill); }

/* --- Interactive MVP section --- */
.section-mvp .section-head-center { margin-bottom: 32px; }
.mvp-includes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 780px;
  margin: 0 auto 40px;
}
.mvp-includes li {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
}
.mvp-cta { text-align: center; }
.mvp-disclaimer {
  font-size: 12.5px;
  color: var(--color-text-muted);
  max-width: 58ch;
  margin: 20px auto 0;
}

/* --- Final CTA strip --- */
.final-cta { text-align: center; }
.final-cta h2 { font-size: 28px; margin-bottom: 24px; }

/* --- About --- */
.about-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: start;
}
.about-grid .section-lede { margin-top: 0; margin-bottom: 18px; }
.about-grid .section-lede:last-child { margin-bottom: 0; }
.about-closer {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-top: 20px;
}

/* --- Contact --- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: 56px;
  align-items: start;
}
.contact-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-row { display: flex; flex-direction: column; gap: 8px; }
.form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-row-split > div { display: flex; flex-direction: column; gap: 8px; }
.form-legend { font-size: 14px; font-weight: 600; }

label { font-size: 13.5px; font-weight: 600; color: var(--color-text-primary); }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  background: var(--color-paper);
  color: var(--color-text-primary);
  width: 100%;
}
textarea { resize: vertical; min-height: 96px; }

.radio-group { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.radio-group label { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 14px; }
.radio-group input { accent-color: var(--color-gold-fill); }

.form-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Default styling reads as neutral/informational (gold) — used for the
   failure state, including the "not connected to a live server yet"
   case. The .form-confirm--success modifier below is applied only after
   contact-handler.php genuinely confirms the message was sent. */
.form-confirm {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gold);
  background: rgba(212, 168, 67, 0.1);
  border: 1px solid rgba(212, 168, 67, 0.3);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
}
.form-confirm a { color: var(--color-gold); font-weight: 600; text-decoration: underline; }
.form-confirm--success {
  color: var(--color-teal);
  background: rgba(43, 181, 160, 0.1);
  border-color: rgba(43, 181, 160, 0.3);
}

/* --------------------------------------------------------------------------
   8. FOOTER
-------------------------------------------------------------------------- */
.footer {
  padding: 56px 0 32px;
  border-top: 1px solid var(--color-border);
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-logo { margin-bottom: 10px; }
.footer-tagline { font-size: 13.5px; color: var(--color-text-secondary); }
.footer-tagline-muted { color: var(--color-text-muted); margin-top: 2px; }
.footer-links { display: flex; gap: 24px; font-size: 13.5px; }
.footer-links a { color: var(--color-text-muted); }
.footer-links a:hover { color: var(--color-text-primary); }
.footer-copy {
  margin-top: 40px;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   9. SCROLL-REVEAL ANIMATION (subtle, respects prefers-reduced-motion)
-------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* --------------------------------------------------------------------------
   10. RESPONSIVE — tablet and mobile
-------------------------------------------------------------------------- */

/* Nav switches to the hamburger menu well above the general 720px content
   breakpoint — with 9 items including "See OpenSlot in Action," the full
   desktop row needs roughly 1150px to lay out on one clean line without
   wrapping or overflowing. Below that, the hamburger menu is cleaner than
   a cramped or overflowing row. This breakpoint is intentionally separate
   from the 720px one below, which still governs everything else. */
@media (max-width: 1180px) {
  .nav-links {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--color-paper);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    align-items: stretch;
    padding: 16px 24px 24px;
    gap: 4px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms var(--ease), transform 180ms var(--ease);
  }
  .nav-links.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav-links a { padding: 12px 4px; border-bottom: 1px solid var(--color-border); white-space: normal; }
  .nav-cta { margin-left: 0; margin-top: 8px; text-align: center; }
  .nav-toggle { display: flex; }
}

/* Hero headline tuned specifically for tablet widths (~721–1000px) — at
   the full desktop size (56px H1, 112px top padding) the hero looks
   oversized once .hero-grid collapses to a single column at 960px. This
   range gets its own intermediate step rather than jumping straight from
   desktop sizing to the 720px mobile sizing below. */
@media (min-width: 721px) and (max-width: 1000px) {
  .hero { padding: 64px 0 80px; }
  .hero-copy h1 { font-size: 47px; line-height: 1.1; }
}

/* Between 961–1024px, .workforce-grid still uses its base 3-per-row layout
   (the 2-per-row rule below only applies at ≤960px), and flex's default
   row-stretch was forcing PULSE's card to match Benjamin/ECHO's taller
   height (now longer since both gained capability chip lists) — leaving a
   large empty gap at the bottom of PULSE's card. Scoped to ≤1024px only,
   so true desktop (1280px+) keeps its existing, unchanged behavior. */
@media (max-width: 1024px) {
  .workforce-grid { align-items: flex-start; }
}

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .workforce-card { flex-basis: calc((100% - 20px) / 2); }
  .rcc-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .leak-score-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .mvp-includes { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  /* At 36px, this 9-word headline wraps to 5–6 lines on most phones,
     pushing the CTA row at/below the fold on common viewport heights
     (confirmed at 320x568 through 375x667). Reduced font-size and
     tightened vertical spacing bring the CTA back into view. */
  .hero { padding: 56px 0 64px; }
  .hero-eyebrow { font-size: 13px; }
  .hero-copy h1 { font-size: 30px; line-height: 1.15; }
  .hero-lede { font-size: 17px; max-width: none; margin-top: 18px; }
  .hero .cta-row { margin-top: 22px; }
  .category-statement { padding: 64px 0; }
  .category-statement h2 { font-size: 26px; }

  .leak-groups { grid-template-columns: 1fr; }
  .model-pillars { grid-template-columns: 1fr; }
  .workforce-card { flex-basis: 100%; }
  .priority-example-grid { grid-template-columns: 1fr 1fr; }
  .rcc-feature-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .mvp-includes { grid-template-columns: 1fr; }
  .form-row-split { grid-template-columns: 1fr; }
  .cta-row-center { flex-direction: column; align-items: stretch; }
  .cta-row-center .btn { width: 100%; }
}