/* ═══════════════════════════════════════════════════════════════════════════
   HumanDeploy — Mobile Foundations
   Single source of truth for mobile behavior across every page.

   Depends on /design-system/tokens.css. Load order, every page:
     1. tokens.css          — tokens + reset
     2. components.css      — shared components
     3. v4-shared.css       — legacy aliases + nav/footer/buttons
     4. mobile.css          — THIS FILE — overrides for phone/tablet
     5. page-local <style>  — last in cascade, can override when needed

   Contract:
     • Two breakpoints. 640px (phone) and 880px (tablet/narrow laptop).
     • No new ones without touching tokens.css --bp-sm / --bp-md.
     • 16px body minimum. 44px touch targets minimum.
     • No horizontal scroll. Ever.
     • Every grid collapses cleanly. No cramping. No towers.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 1. OVERFLOW GUARDS ────────────────────────────────────────────────────
   A page-level horizontal scrollbar on mobile is the most common tell that a
   site wasn't designed for mobile. Clamp the body at narrow widths only —
   NEVER touch html and NEVER apply globally. `overflow-x: hidden` on html
   silently breaks `position: sticky` on every descendant (including the
   desktop nav) and can stall trackpad scroll momentum. Scope it to mobile.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  body {
    overflow-x: clip;              /* clip > hidden — doesn't create a scroll container */
    overscroll-behavior-y: none;   /* no iOS rubber-band into whitespace */
  }
}

/* Fixed-width product-UI mocks can force reflow. Trap them inside their
   containers at narrow widths. */
img, svg, video, canvas, iframe {
  max-width: 100%;
  height: auto;
}


/* ── 2. CONTAINER — mobile gutter ──────────────────────────────────────────
   Every page uses either .container (v4-shared) or .hd-container (index).
   Both should shrink gutters together. 20px is the minimum — tighter than
   that and text runs into the screen edge.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .container,
  .hd-container {
    padding-left: var(--gutter-mobile);
    padding-right: var(--gutter-mobile);
  }
}


/* ── 3. TYPOGRAPHY — mobile floors ─────────────────────────────────────────
   Body copy shouldn't fall under 15.5px on mobile. Display serifs already
   scale via clamp() but need a floor and a sensible measure. Headlines at
   phone widths lock to ~12ch so long words don't punch out of the screen.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body { font-size: 16px; line-height: 1.55; }

  /* Homepage hero — the one headline that needs to breathe */
  .hero-headline {
    font-size: clamp(42px, 11.5vw, 64px);
    letter-spacing: -0.03em;
    line-height: 1.02;
    max-width: 12ch;
  }

  .hero-sub {
    font-size: 17px;
    line-height: 1.5;
    max-width: 30ch;
  }

  .hero-eyebrow { margin-bottom: 18px; }

  /* Any v4-shared section H1 / display headline */
  h1.display,
  .display-xl,
  .pricing-hero-headline,
  .about-hero-headline {
    font-size: clamp(40px, 10vw, 56px) !important;
    line-height: 1.04;
    max-width: 14ch;
  }

  /* Section H2 across pages */
  .pillars-hl,
  .feat-hl,
  .seam-hl,
  .section-hl {
    font-size: clamp(28px, 7vw, 36px);
    line-height: 1.08;
  }

  /* Body on interior pages */
  .lede { font-size: 17px; line-height: 1.55; max-width: 38ch; }
  .subhead { font-size: 16px; line-height: 1.55; max-width: 38ch; }
}


/* ── 4. TOUCH TARGETS ──────────────────────────────────────────────────────
   Every interactive thing on mobile deserves at least 44×44px of area.
   Buttons, links in lists, theme toggles, form inputs. Hover-only affordances
   go away.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Primary + ghost buttons — lift to 48px */
  .btn,
  .btn-sm,
  .hero-cta,
  .btn-primary,
  .btn-accent,
  .btn-ghost,
  .btn-outline {
    min-height: 48px;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 15px;
  }

  .btn-sm { min-height: 40px; font-size: 13px; padding: 10px 16px; }

  /* Theme toggle rows — already small, give them a proper tap area */
  .theme-toggle button {
    width: 36px;
    height: 36px;
  }
  .theme-toggle svg { width: 18px; height: 18px; }
}


/* ── 5. HERO CTA — stack on narrow ─────────────────────────────────────────
   Hero CTAs wrap to two lines at narrow widths. On real phones (<= 440px)
   they should stack full-width vertically — nothing says "this wasn't
   designed for mobile" like a 160px-wide button floating left.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .hero-actions > .hero-cta,
  .hero-actions > .btn {
    width: 100%;
    justify-content: center;
  }
}


/* ── 6. FOOTER — clean three-step collapse ─────────────────────────────────
   The .m-footer grid is 1.4fr + 3 cols on desktop, 1fr + 1fr at <=720px
   (from components.css). Below 640 we collapse to a single column, stack
   the bottom meta, and let the theme toggle sit alongside status.

   We also cover legacy .foot- classes so any leftover surfaces stack.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Canonical m- footer */
  .m-footer { padding: 48px 0 40px !important; margin-top: 64px; }
  .m-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin-bottom: 36px;
  }
  .m-footer-brand p { max-width: none; }
  .m-footer-link { padding: 6px 0; font-size: 15px; }
  .m-footer-col-title { margin-bottom: 10px; }
  .m-footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px;
  }
  .m-footer-bottom-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
  }
  .m-theme-toggle { margin-left: 0 !important; }
  .m-footer-meta {
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 12px;
  }

  /* Legacy .foot- classes (if still used anywhere) */
  .foot-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .foot-brand { grid-column: auto !important; }
  .foot-brand p { max-width: none; }
  .foot-col a { padding: 8px 0; font-size: 15px; }
  .foot-bottom {
    margin-top: 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .foot-bottom > div:first-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .theme-toggle { margin-left: 0; }
  .foot-meta { flex-wrap: wrap; gap: 8px 12px; row-gap: 4px; }
}
/* Tablet step — ensure 2-col is preserved between 640 and 880 without
   colliding with other page-local rules. */
@media (max-width: 880px) and (min-width: 641px) {
  .m-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  .m-footer-brand { grid-column: 1 / -1 !important; }
}


/* ── 7. NAVIGATION — show hamburger below tablet ──────────────────────────
   components.css hides .m-nav-link / .m-nav-signin at 720px. We widen that
   gate to 880px so the primary nav stays uncluttered across tablet too, and
   the drawer becomes the single way to reach secondary pages on narrow
   surfaces. The hamburger shows <=880, hides >=881.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .m-nav-link,
  .m-nav-signin { display: none !important; }
  /* Hide the inline "Add to Slack" CTA on mobile — the drawer owns the CTA
     so the top-bar composition stays wordmark + hamburger, the cleanest
     mobile composition in the reference set (Linear, Vercel, Claude). */
  .m-nav .m-nav-links .m-btn--primary,
  .m-nav .m-nav-cta-slack { display: none !important; }
}
@media (min-width: 881px) {
  /* On desktop, strip the mobile drawer from the DOM entirely. The drawer
     uses `position: fixed` + `transform: translateX(100%)` to live offscreen,
     which is safe in theory but belt-and-braces on desktop where it has no
     job. Hiding removes any risk of it contributing to layout. */
  .m-nav-toggle,
  .m-nav-scrim,
  .m-nav-drawer { display: none !important; }
}


/* ── 8. MOBILE NAV DRAWER ──────────────────────────────────────────────────
   Full-height side sheet. Paper background. Gradient-fade hairline dividers.
   Source Serif 4 for the link names — editorial moment, not UI chrome.
   One coral element: the primary "Add to Slack" CTA at the bottom.

   Injected by m-components.js alongside the nav. Trigger: .m-nav-toggle.
   State lives on <html data-nav-open>. This lets the cascade handle scroll
   lock and overlay visibility without touching inline styles.
   ────────────────────────────────────────────────────────────────────────── */
.m-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;               /* visually centered vs. the 20px gutter */
  border-radius: var(--r-md);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast) var(--ease-standard);
}
.m-nav-toggle:hover { background: var(--paper-soft); }
.m-nav-toggle:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.m-nav-toggle svg { width: 22px; height: 22px; display: block; }

/* The two icon states — hamburger / close — swap via data-nav-open */
.m-nav-toggle .m-ico-close { display: none; }
html[data-nav-open] .m-nav-toggle .m-ico-menu  { display: none; }
html[data-nav-open] .m-nav-toggle .m-ico-close { display: block; }

/* Scrim — darkens the page behind the drawer */
.m-nav-scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  pointer-events: none;
  z-index: calc(var(--z-modal) - 1);
  transition: opacity var(--dur-base) var(--ease-standard);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
html[data-nav-open] .m-nav-scrim {
  opacity: 1;
  pointer-events: auto;
}

/* The sheet itself — slides in from the right, 88% of viewport, max 420px */
.m-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(88vw, 420px);
  background: var(--paper);
  border-left: 1px solid var(--hairline);
  box-shadow: -1px 0 24px rgba(20, 17, 15, 0.08);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-standard),
              visibility 0s linear var(--dur-slow);
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  padding: 12px var(--gutter-mobile) calc(var(--gutter-mobile) + env(safe-area-inset-bottom, 0px));
  outline: none;
}
html[data-nav-open] .m-nav-drawer {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dur-slow) var(--ease-standard),
              visibility 0s linear 0s;
}

/* Drawer header — wordmark on the left, close button on the right.
   Mirrors the main nav so the handoff reads as one interface. */
.m-nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;                      /* matches .m-nav-inner height */
  padding-right: 0;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--hairline) 10%, var(--hairline) 90%, transparent) 1;
}
.m-nav-drawer-head .m-nav-brand { display: inline-flex; align-items: center; }
.m-nav-drawer-head .m-nav-wordmark { height: 24px; }

.m-nav-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border-radius: var(--r-md);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.m-nav-drawer-close:hover { background: var(--paper-soft); }
.m-nav-drawer-close:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.m-nav-drawer-close svg { width: 22px; height: 22px; display: block; }

/* Link list — Source Serif 4 at reading scale. */
.m-nav-drawer-nav { margin: 0; }
.m-nav-drawer-links {
  list-style: none;
  margin: 0;
  padding: 16px 0 8px;
  display: flex;
  flex-direction: column;
}
.m-nav-drawer-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--touch);
  padding: 14px 4px;
  font-family: var(--serif);
  font-variation-settings: "opsz" 32;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, var(--hairline) 0%, var(--hairline) 80%, transparent) 1;
  transition: color var(--dur-base) var(--ease-standard);
}
.m-nav-drawer-links li:last-child a { border-image: none; }
.m-nav-drawer-links a::after {
  content: "→";
  font-family: var(--sans);
  font-weight: 400;
  font-size: 20px;
  color: var(--ink-quiet);
  transition: transform var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
.m-nav-drawer-links a:hover { color: var(--ember); }
.m-nav-drawer-links a:hover::after { color: var(--coral); transform: translateX(3px); }
.m-nav-drawer-links a:active { background: var(--paper-soft); }

/* Secondary row — auth / sign-in. Quieter than primary links. */
.m-nav-drawer-secondary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px 0 16px;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--hairline) 10%, var(--hairline) 90%, transparent) 1;
}
.m-nav-drawer-secondary a {
  min-height: var(--touch);
  display: flex;
  align-items: center;
  padding: 10px 4px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color var(--dur-fast) var(--ease-standard);
}
.m-nav-drawer-secondary a:hover { color: var(--ink); }

/* CTA pinned to the bottom — the one coral element in the drawer */
.m-nav-drawer-foot {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--hairline) 10%, var(--hairline) 90%, transparent) 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.m-nav-drawer-foot .m-btn {
  width: 100%;
  justify-content: center;
  min-height: 52px;
  font-size: 15px;
}
.m-nav-drawer-meta {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  text-align: center;
  padding-top: 4px;
}

/* Body scroll lock when drawer is open */
html[data-nav-open],
html[data-nav-open] body {
  overflow: hidden;
  touch-action: none;
}

/* Reduced motion — drawer slides instantly, no scrim fade */
@media (prefers-reduced-motion: reduce) {
  .m-nav-drawer,
  .m-nav-scrim { transition: none; }
}


/* ── 9. HOMEPAGE — surgical mobile fixes ───────────────────────────────────
   Homepage-specific sections that can't be fixed from the page file without
   editing 8600 lines of CSS. We target them here so they stay consistent
   with the foundations above.
   ────────────────────────────────────────────────────────────────────────── */

/* Demo shell — locked at 640px desktop / 540px tablet. On phone it should be
   a framed vignette, not a tower. Give it a paper surface that breathes at
   phone width and caps at 420px tall. Sidebar + right panel already hidden
   at 880px; we reinforce here with a tighter min-height + readable padding. */
@media (max-width: 640px) {
  .demo { padding: 8px 0 64px; }
  .demo-shell {
    min-height: 420px;
    max-height: 560px;
    border-radius: var(--r-card);
  }
  .demo-main { padding: 0 !important; }
  .demo-composer-shell,
  .demo-composer { padding: 10px 12px !important; }
  .msg { padding: 10px 12px; font-size: 14px; }
  .msg-body { font-size: 14px; }
}

/* Pillars — replace the hard-coded 420px max-width with a fluid clamp that
   lets the card breathe at 375 (phones) but still caps nicely at 440. */
@media (max-width: 880px) {
  .pillars-grid {
    grid-template-columns: 1fr;
    max-width: min(92vw, 440px);
    gap: 28px;
  }
}

/* Product-UI visuals inside pillars — keep them readable at phone width.
   The 3/2 aspect ratio was fine on desktop but crushes the Slack mock when
   the card is 320px wide. Loosen it. */
@media (max-width: 640px) {
  .pv-card {
    aspect-ratio: 4 / 3;
    padding: 18px 18px !important;
    border-radius: var(--r-md);
  }
  .pv-slack-channel { font-size: 11px; }
  .pv-msg-text { font-size: 13px; }
  .pv-msg-meta strong { font-size: 12.5px; }
  .pv-msg .avatar--agent { width: 26px; height: 26px; }
  .pv-spec-avatar { width: 32px; height: 32px; }
  .pv-spec-name { font-size: 13px; }
  .pv-spec-role { font-size: 10px; }
}

/* Feature frames — lose the locked 640px height on mobile; let content flow. */
@media (max-width: 880px) {
  .feat-frame,
  .feature-frame,
  .product-frame {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto;
  }
}

/* Context grid — 4 → 2 → 1 at consistent breakpoints. */
@media (max-width: 880px) { .ctx-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px) { .ctx-grid { grid-template-columns: 1fr !important; gap: 16px !important; } }


/* ── 10. PRICING — plan cards stack, matrix scrolls ────────────────────────
   Pricing has a 3-column card row that collapses at 880 already. We clean up
   the plan card paddings and let the compare matrix scroll horizontally
   instead of squishing type under 10px.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .plan-card,
  .pricing-card {
    padding: 28px 24px !important;
    border-radius: var(--r-card);
  }
  .plan-price,
  .pricing-price {
    font-size: clamp(40px, 12vw, 56px) !important;
  }

  /* Compare matrix — don't try to cram a 3-col feature table into 375px.
     Let it scroll. Mark the overflow with a subtle hairline. */
  .compare-matrix,
  .compare-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .compare-matrix table,
  .compare-table { min-width: 640px; }
}


/* ── 11. ABOUT + MANIFESTO — reading measure ───────────────────────────────
   Long-form prose pages. Reading width at 375px is already ~335px which is
   fine, but displays need to hit the 12ch cap and paragraphs need a proper
   leading so they don't feel like SMS.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .about-hero h1,
  .manifesto-hero h1,
  .longform h1 {
    font-size: clamp(40px, 10vw, 56px);
    line-height: 1.05;
    max-width: 13ch;
  }
  .longform p,
  .manifesto-body p,
  .about-body p {
    font-size: 17px;
    line-height: 1.65;
  }
}


/* ── 12. SPECIALISTS — grid collapse ───────────────────────────────────────
   The specialist grid should stack cleanly below 640, with enough padding
   that the cards don't feel like contact-card clones.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .specialists-grid,
  .spec-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}
@media (max-width: 640px) {
  .specialists-grid,
  .spec-grid {
    grid-template-columns: 1fr !important;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ── 13. HERO ATMOSPHERE — pull the glow in on small screens ───────────────
   The hero atmospheric gradient is positioned at far off-canvas anchors
   that work great at 1400px but create big empty bands at 375px. Tighten
   the inset so the warmth actually reaches the content.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .hero { padding: clamp(72px, 12vh, 112px) 0 clamp(24px, 4vh, 40px); }
  .hero-atmo {
    inset: -10% -10% 0 -10%;
    background:
      radial-gradient(60% 45% at 70% 15%, rgba(232, 106, 78, 0.06) 0%, transparent 70%),
      radial-gradient(50% 35% at 20% 70%, rgba(232, 106, 78, 0.03), transparent 60%) !important;
  }
}


/* ── 14. SAFE-AREA — iOS notch + home indicator ────────────────────────────
   Any fixed-positioned element respects the safe area. Nav is sticky; the
   announce bar sits above it. Footer bottom padding extends past the home
   indicator so the last link doesn't feel like it's falling off.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  footer { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
  .m-nav-drawer { padding-top: max(12px, env(safe-area-inset-top, 0px)); }
}


/* ── 15. SELECTION + FOCUS ─────────────────────────────────────────────────
   Mobile defaults for selection color and focus rings. Selection should be
   coral-wash; focus rings should be visible enough to be accessible even on
   touch devices when a Bluetooth keyboard is attached.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :focus-visible {
    box-shadow: 0 0 0 3px var(--coral-glow);
  }
}


/* ── 16. FINAL CTA — close-the-page pattern ────────────────────────────────
   Every page closes with a centered paper CTA: eyebrow, serif headline,
   sub, action row, mono caption. On desktop the serif is 64–72px and the
   buttons sit shoulder-to-shoulder. On phones the clamp min (34–36px) still
   wraps "Deploy more humans." awkwardly, the two-button row packs into a
   narrow column with uneven widths, and the wide-tracked mono caption
   clips at viewport edges.

   Normalize here for every page — covers .final-cta-* (index, pricing,
   specialists), .mf-cta-* (manifesto), and .about-cta-* (about). All four
   patterns share the same structural grammar; we constrain them together
   so the close-the-page beat is consistent across the site.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Headlines — balance two short lines ("Deploy more / humans.") at
     phone widths. Two balanced lines feels intentional. One cramped line
     plus a lone "humans." line-break is what we had before. Pair the
     period's pixel-period mark with "humans." so the coral square always
     closes the line, never stranding on its own row. */
  .final-cta-headline,
  .mf-cta-headline,
  .about-cta-headline {
    font-size: clamp(34px, 9.2vw, 42px) !important;
    max-width: 11ch !important;
    line-height: 1.04 !important;
    text-wrap: balance;
    margin-left: auto;
    margin-right: auto;
  }
  .final-cta-headline .pixel-period,
  .mf-cta-headline .pixel-period,
  .about-cta-headline .pixel-period {
    /* Keep the pixel period visually locked to the last word (e.g. "humans.") */
    margin-left: 0.04em;
  }

  /* Sub copy — tighten to phone measure so lines don't run to the gutter. */
  .final-cta-sub,
  .mf-cta-sub,
  .about-cta-sub {
    font-size: 15px !important;
    max-width: 34ch !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* Actions — stack full-width. Two shoulder-to-shoulder buttons squeeze
     on phones and create uneven widths (Slack's logo makes it ~15% wider
     than a bare-text button). Stacking makes the primary coral dominate
     the viewport and gives the secondary equal presence. */
  .final-cta-actions,
  .mf-cta-actions,
  .about-cta-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  .final-cta-actions > *,
  .mf-cta-actions > *,
  .about-cta-actions > * {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Mono caption — tighter tracking so it wraps cleanly inside the gutter.
     Center-align and cap width so the three-dot rhythm reads as a unit. */
  .final-cta-micro,
  .mf-cta-micro,
  .about-cta-micro {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    line-height: 1.55;
    max-width: 32ch;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  /* Section padding — tighten the top/bottom so the CTA doesn't feel
     marooned in a sea of paper on a 640px-tall viewport. */
  .final-cta,
  .mf-cta,
  .about-cta {
    padding-top: clamp(64px, 9vh, 88px) !important;
    padding-bottom: clamp(64px, 9vh, 88px) !important;
  }
}