/* Variant + sub-page styles */
.variant-banner {
  background: var(--bg-dark); color: var(--fg-on-dark);
  padding: 8px 0; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; text-align: center;
}
.variant-banner b { color: var(--signal); font-weight: 500; }
.variant-banner a { color: var(--fg-on-dark); border-bottom: 1px solid rgba(255,255,255,0.2); }

.vertical-cases {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; margin-top: 24px;
}
@media (max-width: 800px) { .vertical-cases { grid-template-columns: 1fr; } }
.vc { background: var(--bg); padding: 24px; min-height: 200px; display: flex; flex-direction: column; }
.vc .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); }
.vc h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.015em; margin: 10px 0 8px; line-height: 1.25; }
.vc p { font-size: 14px; color: var(--fg2); line-height: 1.5; flex: 1; }
.vc .out { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); font-family: var(--font-mono); font-size: 12px; color: var(--fg1); }
.vc .out b { color: var(--success); font-weight: 500; }

/* Sub-page hero (smaller) */
.subhero { padding: 56px 0 32px; }
.subhero h1 { font-size: clamp(40px, 5vw, 64px); font-weight: 500; line-height: 1.04; letter-spacing: -0.03em; margin: 0; max-width: 22ch; text-wrap: balance; }
.subhero h1 .ed { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.subhero .lead { font-size: 18px; color: var(--fg2); margin: 20px 0 24px; max-width: 60ch; line-height: 1.5; }

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE + POLISH PATCH
   Tightens layout in the 900–1200px range, prevents pill-button text wrap,
   fixes integrations bar overflow, footer column wrap, badge clipping.
   ════════════════════════════════════════════════════════════════════════ */

/* All buttons: never wrap their label */
.btn { white-space: nowrap; }

/* Fix: a:hover global rule was bleeding into anchor-buttons, killing contrast.
   Each variant flips to its own correct hover-text color. */
.btn-primary:hover { color: #fff !important; border-bottom-color: transparent !important; }
.btn-secondary:hover { color: var(--bg) !important; border-bottom-color: transparent !important; }
.btn-onDark:hover { color: var(--fg-on-dark) !important; border-bottom-color: transparent !important; }
.btn:hover { border-bottom-color: transparent !important; }

/* Nav links: never break a single link onto two lines */
.nav .nav-links a { white-space: nowrap; }

/* Container: smaller side margins on mid-sized viewports */
@media (max-width: 1100px) {
  :root { --margin-desktop: 40px; }
}
@media (max-width: 900px) {
  :root { --margin-desktop: 28px; }
}

/* ── MOBILE PASS (≤500px): single-column collapse ─────────────────────── */
@media (max-width: 500px) {
  .container { padding-left: 20px !important; padding-right: 20px !important; }
  .nav .row { padding: 16px 20px !important; flex-wrap: wrap; gap: 12px; }
  .nav-links { display: none !important; }
  .hero h1 { font-size: clamp(36px, 9vw, 48px) !important; }
  .hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .proof-row { grid-template-columns: 1fr !important; gap: 20px !important; }
  .fleet-grid, .use-grid, .how-grid, .team-grid, .pricing-row,
  .footer-grid, .calc-callout { grid-template-columns: 1fr !important; gap: 24px !important; }
  .section-head { grid-template-columns: 1fr !important; gap: 12px !important; }
  .price-big .num { font-size: 44px !important; }
  .footer-grid h5 { margin-top: 8px; }
  .calc-table { font-size: 13px; }
  .calc-table th, .calc-table td { padding: 10px 8px !important; }
  body { overflow-x: hidden; }
  .meta-strip { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .calc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .calc { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .integ-row { grid-template-columns: 1fr !important; }
  .integ-row .lbl { border-right: 0 !important; border-bottom: 1px solid var(--border) !important; padding: 12px 18px !important; }
  .hero h1 .ed { font-size: inherit !important; }
  /* Buttons: allow wrap rather than overflow on tiny widths */
  .cta-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .cta-row .btn { width: 100%; justify-content: center; }
}

/* Section vertical rhythm: tighten via --section-y so .tight modifier scales */
@media (max-width: 1100px) {
  body { --section-y: 80px; }
}
@media (max-width: 768px) {
  body { --section-y: 56px; }
}

/* Add a section--loose modifier for major dividers (final CTA, etc.) */
.section--loose { padding: calc(var(--section-y) * 1.25) 0; }

/* Hero already has its own padding; no top padding on the proof section */
.proof { margin-top: -8px; } /* pull proof slightly closer to hero */

/* Section-head: tighter internal rhythm so the head→grid gap reads as a unit */
.section-head { margin-bottom: 36px !important; }
.section-head h2 { margin-top: 8px !important; }

/* When two related sections are stacked, kill the doubled padding between them */
.section + .section--tight { padding-top: calc(var(--section-y) * 0.4); }
.section--tight + .section--tight { padding-top: calc(var(--section-y) * 0.35); padding-bottom: calc(var(--section-y) * 0.5); }
.section--tight + .section { padding-top: calc(var(--section-y) * 0.7); }

/* Trust block sits in its own .section--tight; pull the next pricing closer */
.section--tight:has(.trust) { padding-bottom: calc(var(--section-y) * 0.3) !important; }
.section--tight:has(.trust) + .section--tight { padding-top: calc(var(--section-y) * 0.3) !important; }

/* Final CTA section needs breathing room above; footer hugs */
.section + footer { margin-top: 0; }

/* ── Nav: tighter spacing, lift mobile breakpoint to 880 ─────────────── */
@media (max-width: 1024px) {
  .nav .row { gap: 16px; }
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 13px; }
}
@media (max-width: 920px) {
  .nav-links { display: none; }
}

/* ── Hero CTAs: don't let the row crunch the buttons ─────────────────── */
.hero-cta { flex-wrap: wrap; gap: 10px; }
.hero-cta .btn { padding: 12px 18px; }

/* ── Proof-row: tighten + allow cleaner wrapping ─────────────────────── */
.proof-row { gap: 24px 32px !important; }
@media (max-width: 1024px) {
  .proof-row { grid-template-columns: 1fr 1fr 1fr !important; }
  .proof-row > .lead-line { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .proof-row { grid-template-columns: 1fr !important; }
}

/* ── Integrations: items must stay on a single line each ─────────────── */
.integ-row .items { gap: 10px 18px !important; }
.integ-row .item { white-space: nowrap; }
.integ-row.req .items { gap: 8px 16px !important; }
.integ-row.req .item { white-space: nowrap; }
@media (max-width: 1024px) {
  .integ-row { grid-template-columns: 140px 1fr; }
  .integ-row .lbl { padding: 20px 18px; }
  .integ-row .items { padding: 18px 22px; }
}
@media (max-width: 720px) {
  .integ-row { grid-template-columns: 1fr; }
  .integ-row .lbl { border-right: 0; border-bottom: 1px solid var(--border); padding: 12px 18px; }
  .integ-row .items { padding: 14px 18px; }
}

/* ── Pricing: badge no longer overlaps card border, table responsive ── */
.price-big { padding-top: 28px; }
.price-big .badge { 
  position: static !important; 
  display: inline-flex; align-items: center;
  white-space: nowrap;
  margin-bottom: 14px;
  background: var(--amber-soft) !important;
  padding: 4px 10px !important;
}
@media (max-width: 900px) {
  .price-big { padding: 28px 22px 22px; }
}
.addon-table { font-size: 14px; }
.addon-table th, .addon-table td { padding: 14px 16px; }

/* Price unit shouldn't wrap */
.price-big .per { white-space: nowrap; }

/* Calc table: keep totals legible on narrow widths */
@media (max-width: 900px) {
  .calc-table th, .calc-table td { padding: 12px 14px; font-size: 13px; }
  .calc-table .num { font-size: 14px; }
}

/* ── Use cases: cleaner mockup containment ───────────────────────────── */
.use-grid { gap: 20px; }
@media (max-width: 1024px) {
  .use-grid { gap: 16px; }
}

/* ── Final CTA: button label wraps were ugly ─────────────────────────── */
.final-cta .btn-primary { padding: 14px 26px; white-space: nowrap; }

/* ── Footer: 3 columns mid-range, prevents Verticals wrap collisions ── */
@media (max-width: 1024px) and (min-width: 801px) {
  footer .top { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; }
  footer .top a { font-size: 13px; }
}
footer .top a { white-space: normal; }

/* ── Section heads: stack the right-side blurb on narrow ─────────────── */
@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr !important; gap: 16px !important; }
  .section-head .right { text-align: left !important; }
}

/* ── Use-case card title shouldn't get cramped ───────────────────────── */
.use-card { padding-bottom: 4px; }

/* ── Trust block (What this is NOT): better wrap ──────────────────────── */
.trust { padding: 48px 44px !important; }
@media (max-width: 900px) {
  .trust { grid-template-columns: 1fr !important; gap: 28px !important; padding: 32px !important; }
}

/* Vertical pages: hero eyebrow is dot+long text; allow flex-wrap so middot stays close */
.subhero .eyebrow,
.hero .eyebrow {
  flex-wrap: wrap;
  row-gap: 4px;
}
.team-signoff {
  margin-left: auto !important; margin-right: auto !important;
  text-align: center;
  max-width: 56ch !important;
  padding: 32px 40px !important;
  margin-top: 56px !important;
}
@media (max-width: 700px) {
  .team-signoff { padding: 24px 22px !important; font-size: 18px !important; }
}

/* ── Team grid: ensure 3-up holds, gracefully stacks ─────────────────── */
@media (max-width: 900px) {
  .team-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .team-grid { grid-template-columns: 1fr !important; }
}

/* ── Vertical-cases: same stack rule ─────────────────────────────────── */
@media (max-width: 900px) {
  .vertical-cases { grid-template-columns: 1fr !important; }
}

/* ── How-it-works: 3 → stacked ────────────────────────────────────────── */
@media (max-width: 900px) {
  .how-grid { grid-template-columns: 1fr !important; }
}

/* ── Calc-callout (the divide-by-three quote box) ─────────────────────── */
@media (max-width: 800px) {
  .calc-callout { grid-template-columns: 1fr !important; gap: 20px !important; padding: 28px !important; }
  .calc-callout .quote { font-size: 22px !important; }
}

/* ── Pricing-row: stack a touch later, prevents card squeeze ─────────── */
@media (max-width: 980px) {
  .pricing-row { grid-template-columns: 1fr !important; gap: 28px !important; }
}

/* ── Hero: better mid-range balance ──────────────────────────────────── */
@media (max-width: 1100px) and (min-width: 801px) {
  .hero h1 { font-size: clamp(48px, 7vw, 72px) !important; }
}

/* ── FAQ: tighten width, keep readable ────────────────────────────────── */
.faq details { padding: 18px 0; }
.faq summary { font-size: 16px; }
.faq details > p { font-size: 14px; }