/* ============================================================
   CRUMA MARKETING — shared stylesheet
   ============================================================ */

@font-face {
  font-family: 'Arkhip';
  src: url('/fonts/Arkhip.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

/* ============================================================
   SLATE + CORAL SIGNATURE
   Everything is quiet Slate. Coral (#E05A3E) is THE brand color —
   every primary CTA, every key moment, the icon mark. Treated
   like Gojiberry's orange or Stripe's indigo: restrained
   canvas + one unmistakable accent that defines recognition.
   ============================================================ */
:root {
  --cream: #F7F7F5;          /* bone — base surface */
  --cream-warm: #F0EFEC;     /* slightly darker card surface */
  --cream-deep: #E6E5E1;     /* deepest tonal layer */
  --forest: #1A1A1A;         /* near-black — text & ink-on-ink buttons */
  --forest-deep: #0A0A0A;    /* pure ink — footer */
  --forest-warm: #2A2A2A;    /* button hover for ink variants */
  --forest-soft: #4A5568;    /* slate — muted text */
  --rule: rgba(26, 26, 26, 0.1);
  --rule-strong: rgba(26, 26, 26, 0.2);

  /* THE signature colors — MERLOT + SAFFRON.
     Merlot is the serious primary (CTAs, wordmark, eyebrow).
     Saffron is the youthful pop (highlights, accents, key moments). */
  --accent: #592C3A;          /* merlot — primary buttons, brand color */
  --accent-hover: #431F2B;    /* darker merlot for hover */
  --accent-soft: #E8D4DD;     /* faint merlot tint for backgrounds */
  --pop: #FFA500;             /* saffron — youthful highlight pop */
  --pop-hover: #E89400;       /* darker saffron */
  --pop-soft: #FFF3D9;        /* pale saffron tint */

  --success: #1FA373;
}


* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { background: var(--cream); color: var(--forest); overflow-x: hidden; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   TYPE
   ============================================================ */
.display {
  font-family: 'Arkhip', serif;
  letter-spacing: -0.022em;
  line-height: 0.95;
  font-weight: 400;
}
.display-xl { font-size: clamp(32px, 6.4vw, 96px); letter-spacing: -0.028em; line-height: 0.92; }
.display-lg { font-size: clamp(26px, 4vw, 56px); letter-spacing: -0.022em; }
.display-md { font-size: clamp(20px, 2.6vw, 34px); letter-spacing: -0.015em; }

.eyebrow {
  font-family: 'Arkhip', serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.55;
  display: inline-block;
}

.lead { font-size: 18px; line-height: 1.5; opacity: 0.88; }
.body-md { font-size: 15px; line-height: 1.55; opacity: 0.78; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; }

section { padding: 96px 0; }
section + section { border-top: 1px solid var(--rule); }

/* ============================================================
   ABSTRACT VISUAL LIBRARY
   Editorial / Swiss-modernist / schematic. Reusable across pages.
   No stock photos, no AI-gradient swooshes, no floating 3D blobs.
   ============================================================ */

/* --- Big typographic hero — editorial / magazine spread feel --- */
.hero-editorial {
  padding: 180px 0 120px;
  position: relative;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: center;
}
.hero-editorial .eyebrow { margin-bottom: 22px; position: relative; }
.hero-editorial .eyebrow::after {
  content: '';
  display: inline-block;
  width: 36px; height: 2px;
  background: var(--pop);
  vertical-align: middle;
  margin-left: 14px;
}
.hero-editorial h1,
.hero-editorial .display {
  max-width: 1000px;
  margin-bottom: 32px;
  letter-spacing: -0.032em;
  line-height: 0.92;
  position: relative;
}
.hero-editorial .lead { max-width: 620px; margin-bottom: 44px; font-size: 19px; opacity: 0.82; }

/* Giant wordmark backdrop — dramatic, bleeds off, sits behind H1 */
.hero-editorial .backdrop-word {
  position: absolute;
  right: -6%;
  top: 42%;
  transform: translateY(-42%);
  font-family: 'Arkhip', serif;
  font-size: clamp(220px, 32vw, 520px);
  letter-spacing: -0.045em;
  line-height: 0.82;
  color: var(--forest);
  opacity: 0.055;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
}
.hero-editorial .container,
.hero-editorial > *:not(.backdrop-word) { position: relative; z-index: 1; }

/* Magazine caption below hero — date / issue / section number */
.hero-editorial .spread-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-strong);
  max-width: 620px;
}
.hero-editorial .spread-meta .num {
  font-family: 'Arkhip', serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--pop);
}
.hero-editorial .spread-meta .cap {
  font-family: 'Arkhip', serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* --- Decorative pattern fills --- */
/* Subtle dot grid — Bauhaus texture, not tech-pixel */
.pattern-dots {
  background-image: radial-gradient(rgba(26,26,26,0.12) 1px, transparent 1px);
  background-size: 16px 16px;
}
.pattern-dots-dense {
  background-image: radial-gradient(rgba(26,26,26,0.1) 1px, transparent 1px);
  background-size: 8px 8px;
}
/* Diagonal hatching — architectural / engineering drawing */
.pattern-hatch {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(26,26,26,0.05) 0,
    rgba(26,26,26,0.05) 1px,
    transparent 1px,
    transparent 10px
  );
}
/* Ruled paper — editorial */
.pattern-ruled {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 31px,
    rgba(26,26,26,0.06) 31px,
    rgba(26,26,26,0.06) 32px
  );
}

/* --- Color-field callout block --- */
.field-block {
  background: var(--forest);
  color: var(--cream);
  padding: 96px 0;
  position: relative;
  overflow: hidden;
  border-top: 0 !important;
}
.field-block.cream { background: var(--cream-warm); color: var(--forest); }
.field-block.pop   { background: var(--pop); color: var(--forest); }
.field-block .eyebrow { opacity: 0.55; }
.field-block h2 {
  font-family: 'Arkhip', serif;
  font-size: clamp(40px, 5.2vw, 72px);
  letter-spacing: -0.028em;
  line-height: 0.98;
  max-width: 1000px;
  margin-top: 18px;
}
.field-block .kicker-lg {
  font-family: 'Arkhip', serif;
  font-size: clamp(24px, 3vw, 40px);
  letter-spacing: -0.012em;
  max-width: 800px;
  margin-top: 28px;
  line-height: 1.15;
  opacity: 0.88;
}

/* --- Editorial rule + tag combo — appears under eyebrows --- */
.rule-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.rule-eyebrow::before {
  content: '';
  flex: 1; height: 1px;
  background: var(--rule-strong);
  opacity: 0.8;
}
.rule-eyebrow .tag {
  font-family: 'Arkhip', serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* --- Schematic diagram container --- */
.schematic {
  background: var(--cream);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  padding: 32px;
  position: relative;
}
.schematic-dark { background: var(--forest-deep); color: var(--cream); border-color: transparent; }
.schematic-dark .sch-label { color: var(--cream); opacity: 0.7; }
.sch-label {
  font-family: 'Arkhip', serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
}
.sch-caption {
  font-family: 'Arkhip', serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
}
/* The "gather curl" brand motif — used as decorative anchor */
.motif-curl {
  width: 48px; height: 48px;
  flex-shrink: 0;
}

/* --- Use-case card (for the use-case library) --- */
.usecase-card-lg {
  background: var(--cream);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}
.usecase-card-lg .uc-head {
  padding: 36px 40px 20px;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.usecase-card-lg .uc-head .eyebrow { margin-bottom: 16px; }
.usecase-card-lg .uc-head h3 {
  font-family: 'Arkhip', serif;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.018em;
  line-height: 1.04;
  font-weight: 400;
  margin-bottom: 10px;
}
.usecase-card-lg .uc-head .subhead {
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.72;
  max-width: 620px;
}
.usecase-card-lg .uc-body { padding: 32px 40px 36px; background: var(--cream-warm); }
.usecase-card-lg .uc-agents {
  display: inline-flex; gap: 8px; margin-bottom: 14px;
}
.usecase-card-lg .uc-agents .agent-pill {
  font-family: 'Arkhip', serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: var(--forest);
  color: var(--cream);
  border-radius: 3px;
}
.usecase-card-lg .uc-agents .agent-pill.closer { background: var(--forest-warm); }
.usecase-card-lg .uc-agents .agent-pill.architect { background: var(--forest-soft); }
.usecase-card-lg .uc-agents .agent-pill.operator { background: var(--success); }
.usecase-card-lg .uc-agents .agent-pill.collector { background: var(--pop); color: var(--forest); }

/* --- Two-column feature with schematic --- */
.feature-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
.feature-split.reverse { grid-template-columns: 1fr 1.1fr; }
.feature-split.reverse .fs-copy { order: 2; }
.feature-split.reverse .fs-visual { order: 1; }

/* --- Small schematic marks (typography + geometry) --- */
.mark-circle {
  width: 12px; height: 12px;
  border: 1.5px solid var(--forest);
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}
.mark-cross {
  width: 14px; height: 14px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
.mark-cross::before,
.mark-cross::after {
  content: ''; position: absolute; background: var(--forest);
}
.mark-cross::before { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.mark-cross::after  { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }

/* --- Responsive --- */
@media (max-width: 1000px) {
  .hero-editorial { padding: 140px 0 64px; }
  .hero-editorial .backdrop-word { font-size: clamp(120px, 30vw, 200px); }
  .field-block { padding: 64px 0; }
  .field-block h2 { font-size: clamp(32px, 7vw, 48px); }
  .feature-split { grid-template-columns: 1fr; gap: 40px; }
  .feature-split.reverse .fs-copy { order: 1; }
  .feature-split.reverse .fs-visual { order: 2; }
  .usecase-card-lg .uc-head,
  .usecase-card-lg .uc-body { padding: 28px 24px; }
}

/* ============================================================
   NAV
   ============================================================ */
nav.m-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(244, 239, 230, 0.92);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
nav.m-nav .inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
nav.m-nav .brand { text-decoration: none; color: var(--forest); }
nav.m-nav .brand .wordmark { font-family: 'Arkhip', serif; font-size: 17px; letter-spacing: 0.14em; }
nav.m-nav .links { display: flex; gap: 28px; list-style: none; }
nav.m-nav .links a {
  font-size: 13px;
  color: var(--forest);
  text-decoration: none;
  opacity: 0.68;
  transition: opacity 0.15s;
}
nav.m-nav .links a:hover, nav.m-nav .links a.active { opacity: 1; }
nav.m-nav .cta-group { display: flex; align-items: center; gap: 18px; }
nav.m-nav .signin { font-size: 13px; color: var(--forest); text-decoration: none; opacity: 0.68; }

/* ============================================================
   SHARED MOBILE NAV (hamburger + overlay) — injected by nav.js
   ============================================================ */
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--forest);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.2s;
}
body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--cream);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  padding: 80px 24px 32px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }

.mobile-menu-inner {
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.mobile-links { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.mobile-links a {
  display: block;
  padding: 16px 0;
  font-family: 'Arkhip', serif;
  font-size: 28px;
  letter-spacing: -0.015em;
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: opacity 0.15s, padding-left 0.15s;
}
.mobile-links a:hover { padding-left: 6px; }
.mobile-cta-group { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; }
.mobile-signin {
  font-size: 15px;
  color: var(--forest);
  text-decoration: none;
  opacity: 0.68;
  padding: 12px 0;
  text-align: center;
}
.mobile-cta { width: 100%; justify-content: center; padding: 14px 20px; font-size: 14px; }

@media (max-width: 1000px) {
  nav.m-nav .links,
  nav.m-nav .cta-group { display: none; }
  nav.m-nav .nav-toggle { display: flex; }
}

/* Primary CTA — CORAL. This is the signature brand color. */
.cta {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 16px;
  background: var(--accent);
  color: #FFFFFF;
  text-decoration: none;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s;
}
.cta:hover { background: var(--accent-hover); }
.cta-ghost-dark { background: transparent; color: var(--forest); border-color: var(--rule-strong); }
.cta-ghost-dark:hover { border-color: var(--forest); }
/* Cream CTA variant (kept for dark-background contexts like hero over video) */
.cta-light { background: var(--cream); color: var(--forest); }
.cta-light:hover { background: #FFFFFF; }

.arrow { display: inline-block; transition: transform 0.15s; }
.cta:hover .arrow { transform: translateX(2px); }

/* Pull-quote / callout rule — saffron line under key headings */
.pop-rule {
  display: block;
  width: 48px;
  height: 3px;
  background: var(--pop);
  margin: 8px 0 20px;
  border-radius: 2px;
}

/* Nav CTA — saffron, dark text. Makes the "Book a demo" glow in the navbar. */
.cta-nav {
  background: var(--pop) !important;
  color: var(--forest) !important;
}
.cta-nav:hover {
  background: var(--pop-hover) !important;
}

/* (.pop-highlight removed — saffron is reserved for buttons, badges, rules,
   and icons. Never applied to text content.) */

/* Saffron text accent */
.pop-text { color: var(--pop); }

/* ============================================================
   PAGE HERO (used on inner pages)
   ============================================================ */
.page-hero { padding: 180px 0 96px; }
.page-hero h1 { max-width: 960px; margin: 20px 0 28px; }
.page-hero .lead { max-width: 680px; margin-bottom: 40px; }
.page-hero .cta-row { display: flex; gap: 10px; }

/* ============================================================
   FOOTER CTA
   ============================================================ */
.footer-cta {
  padding: 128px 0;
  text-align: center;
  background: var(--cream-warm);
  border-top: 0 !important;
}
.footer-cta .eyebrow { margin-bottom: 20px; }
.footer-cta h2 { margin: 0 auto 24px; max-width: 900px; }
.footer-cta .lead { max-width: 540px; margin: 0 auto 32px; }
.footer-cta .cta-row { display: flex; gap: 10px; justify-content: center; }

/* ============================================================
   FOOTER
   ============================================================ */
footer.m-footer {
  background: var(--forest-deep);
  color: var(--cream);
  padding: 56px 0 28px;
  border-top: 0 !important;
}
footer.m-footer .top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 56px;
  margin-bottom: 56px;
}
footer.m-footer h3 {
  font-family: 'Arkhip', serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 14px;
  font-weight: 400;
}
footer.m-footer ul { list-style: none; }
footer.m-footer li { margin-bottom: 8px; }
footer.m-footer a {
  color: var(--cream);
  text-decoration: none;
  font-size: 13px;
  opacity: 0.72;
  transition: opacity 0.15s;
}
footer.m-footer a:hover { opacity: 1; }
footer.m-footer .brand-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
footer.m-footer .brand-wrap .w { font-family: 'Arkhip', serif; font-size: 19px; letter-spacing: 0.14em; }
footer.m-footer .brand p { font-size: 13px; opacity: 0.6; margin-top: 14px; max-width: 280px; line-height: 1.5; }
footer.m-footer .bottom {
  padding-top: 24px;
  border-top: 1px solid rgba(244, 239, 230, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  opacity: 0.5;
}

/* ============================================================
   GENERIC RESPONSIVE
   ============================================================ */
/* ── Tablet ────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  section { padding: 64px 0; }
  nav.m-nav .links { display: none; }
  .container { padding: 0 20px; }
  nav.m-nav .inner { padding: 14px 20px; }

  /* Footer: brand takes full width on top, 2×2 link grid below */
  footer.m-footer { padding: 48px 0 24px; }
  footer.m-footer .top {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
    margin-bottom: 40px;
  }
  footer.m-footer .brand { grid-column: 1 / -1; margin-bottom: 8px; }
  footer.m-footer .brand p { max-width: 520px; }

  /* Footer CTA: tighter vertical */
  .footer-cta { padding: 72px 0; }
}

/* ── Mobile ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  footer.m-footer { padding: 40px 0 20px; }
  footer.m-footer .top {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 32px;
  }
  footer.m-footer .brand { margin-bottom: 4px; }
  footer.m-footer .brand p { max-width: 100%; font-size: 12.5px; }
  footer.m-footer h3 { margin-bottom: 10px; }
  footer.m-footer li { margin-bottom: 6px; }
  footer.m-footer a { font-size: 14px; } /* lift tap target */
  footer.m-footer .bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    font-size: 11px;
  }

  /* Footer CTA: compact mobile */
  .footer-cta { padding: 56px 0; }
  .footer-cta h2 { font-size: clamp(28px, 8vw, 40px); }
  .footer-cta .lead { font-size: 15px; }
  .footer-cta .cta-row { flex-direction: column; }
  .footer-cta .cta, .footer-cta .cta-ghost-dark { width: 100%; justify-content: center; }
}

/* ============================================================
   CROSS-PAGE RESPONSIVE SAFETY NET
   ------------------------------------------------------------
   Catches grid classes that live in individual page <style>
   blocks. Per-page rules declared after this external sheet
   win the cascade at equal specificity, so !important is used
   here — we're intentionally overriding page-local layouts on
   small viewports where they don't collapse on their own.

   Breakpoints:
     ≤1000px  existing (nav, container, footer)
     ≤768px   tablet — 3/4/5-col grids go 2-col (NEW)
     ≤640px   phone  — everything collapses to 1 col (NEW)
     ≤480px   phone narrow — typography + padding tighten (NEW)
   ============================================================ */

/* ── Tablet (≤ 768px) ───────────────────────────────────── */
@media (max-width: 768px) {
  /* 3-col grids → 2-up on iPad portrait */
  .why-grid, .metrics-grid, .integrations-cols, .shape-grid,
  .contact-grid, .principles, .values, .roadmap-list,
  .resources-grid, .quotes-grid, .mock-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* 4-col and 5-col grids → 2-up */
  .security-grid, .bf-steps, .stats-grid, .crew-index,
  footer.m-footer .top, footer .top {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Two-up feature rows → stacked on narrow tablets */
  .two-col, .feature-split, .feature-split.reverse, .workflow-stage,
  .bf-layout, .testimonial, .feature, .pain-card, .before-after,
  .live-row, .mw-card .inner, .demo-layout, .agent-section {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Kill fixed first-column widths (stack-math, role rows, faq summary) */
  .stack-math .sm-row,
  .role-row,
  .faq-list summary {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Hero wordmark backdrop — keeps blowing past viewport on 768-900
     because right: -6% + white-space: nowrap on Arkhip at 32vw still
     exceeds 768px. Clamp hard here, reveal stays decorative. */
  .hero-editorial .backdrop-word {
    font-size: clamp(80px, 22vw, 200px) !important;
    right: auto !important;
    left: auto !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Grid/flex children with native min-width: auto can pin the track
     wider than the container (selects, inputs, long words). Force
     min-width: 0 on common form + layout blocks so they actually flex. */
  .demo-layout > *,
  .demo-card,
  .demo-card .row-2,
  .demo-card .row-2 > *,
  .demo-card .field,
  .demo-card input,
  .demo-card select,
  .demo-card textarea,
  .contact-grid > *,
  .usecase-card-lg,
  .usecase-card-lg .uc-head,
  .usecase-card-lg .uc-body,
  .usecase-card-lg .sample,
  .sample .row,
  .sample .row .body {
    min-width: 0 !important;
  }

  /* Long words in sample output mocks break cleanly */
  .sample .row .body,
  .sample .row .body strong,
  .sample .row .sub {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Section padding tighter */
  section { padding: 56px 0; }

  /* Container padding matches the @1000px rule for missing pages */
  .container, .container-narrow { padding: 0 20px; }
}

/* ── Phone (≤ 640px) ─────────────────────────────────────── */
@media (max-width: 640px) {
  /* Every multi-column grid goes single-column on phone */
  .why-grid, .metrics-grid, .integrations-cols, .shape-grid,
  .contact-grid, .principles, .values, .roadmap-list,
  .resources-grid, .quotes-grid,
  .security-grid, .bf-steps, .stats-grid, .crew-index,
  .two-col, .feature-split, .feature-split.reverse, .workflow-stage,
  .bf-layout, .testimonial, .feature, .pain-card, .before-after,
  .live-row, .mw-card .inner, .demo-layout, .agent-section,
  .mock-kanban, .mock-grid, .dash-cols,
  footer.m-footer .top, footer .top {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Stats card separator grid: reset borders that were 2-per-row */
  .stat, .stats-grid > * {
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule);
  }
  .stats-grid > *:last-child { border-bottom: 0 !important; }

  /* Horizontal tab rails: let pages that want row-scroll scroll,
     but don't force rails that stack on mobile (index.html's
     workflow-tabs collapse to column). Only clamp overflow. */
  .workflow-tabs, .bf-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 100%;
  }
  .workflow-tabs::-webkit-scrollbar,
  .bf-tabs::-webkit-scrollbar { display: none; }
  /* When a rail IS in row mode (bf-tabs at ≤1000 on index), keep
     tabs sized-to-content so they scroll horizontally instead of
     wrapping + overflowing. Stacked column rails ignore this. */
  .workflow-tabs[data-rail="row"] .workflow-tab,
  .bf-tabs .bf-tab { flex: 0 0 auto; white-space: nowrap; min-width: 0; }

  /* Mock panels — drop padding + rule thickness on phone */
  .mock-panel, .usecase-card-lg { padding: 20px !important; }
  .mock-row { gap: 10px !important; }
  .mock-row .text { font-size: 13px; }

  /* Typography floor for hero display */
  .display-xl { font-size: clamp(32px, 9vw, 68px) !important; line-height: 1 !important; }

  /* Editorial backdrop word — keep small on phone */
  .hero-editorial .backdrop-word {
    font-size: clamp(72px, 24vw, 180px) !important;
  }

  /* Hero editorial padding trim */
  .hero-editorial { padding: 120px 0 56px !important; min-height: 420px !important; }

  /* Container padding tighter on phone */
  .container, .container-narrow { padding: 0 18px !important; }

  /* CTAs full-width on phone where paired in rows */
  .cta-row .cta, .cta-row .cta-ghost, .cta-row .cta-ghost-dark,
  .cta-row .cta-light {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Tap targets — lift to 44px min on primary CTA */
  .cta, .cta-ghost-dark, .cta-ghost, .cta-light {
    min-height: 44px;
  }
}

/* ── Phone narrow (≤ 480px) ─────────────────────────────── */
@media (max-width: 480px) {
  section { padding: 44px 0 !important; }
  .container, .container-narrow { padding: 0 16px !important; }
  .display-xl { font-size: clamp(28px, 10vw, 48px) !important; }
  .eyebrow { font-size: 9px; letter-spacing: 0.24em; }
  .hero-editorial .backdrop-word { display: none !important; }
}