/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile mirrors desktop as closely as possible.
   Strategy: scale DOWN rather than restructure. Keep pinning,
   keep side-by-side, keep reveals. Use smaller type, tighter
   padding, and viewport-relative units.
   ══════════════════════════════════════════════════════════════ */

/* Menu button + mobile menu hidden by default (shown at ≤900) */
.menu-btn { display: none; }
.mobile-menu { display: none; }

/* Shared masthead styles for generated/static pages.
   Blog articles load this file but do not carry the homepage's
   inline header CSS, so the base desktop header rules live here. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--parchment);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--ease), background var(--ease);
}
.masthead.scrolled {
  background: var(--parchment);
  box-shadow: 0 1px 0 var(--border);
}
.mast-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 48px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
}
.mark {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 0;
  color: var(--ink);
  text-decoration: none;
}
.mark .mark-img {
  display: block;
  height: 32px;
  width: auto;
}
.mark .wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0;
  line-height: 1;
}
.mark .wordmark em { font-style: italic; }
.mark-sub {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gravel);
  display: block;
  margin-top: 4px;
}
.nav {
  display: flex;
  gap: 2px;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav a {
  color: var(--ink);
  padding: 10px 16px;
  border: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: color var(--ease);
}
.nav a:hover {
  opacity: 1;
  color: var(--ink);
}
.nav a .n {
  font-size: 9px;
  color: var(--gravel);
  letter-spacing: 0.14em;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
.nav a:hover::after,
.nav a.active::after {
  transform: scaleX(1);
}
.nav .divider {
  width: 1px;
  align-self: center;
  height: 14px;
  background: var(--border);
  margin: 0 8px;
}
.cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: end;
}
.btn {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid rgba(16, 25, 43, 0.2);
  background: transparent;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--ease);
}
.btn:hover {
  border-color: var(--ink);
  background: rgba(16, 25, 43, 0.03);
}
.btn.primary {
  background: var(--ink);
  color: var(--chalk);
  border-color: var(--ink);
}
.btn.primary:hover {
  background: var(--deep);
  transform: translateY(-1px);
}
.btn .arr {
  font-size: 12px;
  opacity: 0.8;
}
.btn.ghost {
  border-color: transparent;
  padding-left: 8px;
  padding-right: 8px;
}
.btn.ghost:hover {
  background: transparent;
  border-color: transparent;
  opacity: 0.65;
}

/* ─── "We're Hiring!" button in the desktop cta-row ───
       Matches the site's secondary button vocabulary ("See the
       Platform" / "See how it works"): ink text, thin ink-hairline
       border, transparent background.  A static rust pip on the
       left acts as a quiet "open roles" marker without blinking.
       Hover warms into a rust tint + 1px lift.  Hidden on mobile
       where the cta-row collapses to menu + primary only. */
.btn.btn-hiring {
  position: relative;
  padding-left: 32px;
  color: var(--ink);
  border-color: rgba(16, 25, 43, 0.22);
  background: transparent;
}
.btn.btn-hiring::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rust);
  transform: translateY(-50%);
}
.btn.btn-hiring:hover {
  color: var(--rust);
  border-color: var(--rust);
  background: rgba(154, 58, 31, 0.04);
  transform: translateY(-1px);
}
.btn.btn-hiring .arr { font-size: 12px; opacity: 0.8; }
@media (max-width: 900px) {
  .btn.btn-hiring { display: none; }
}

/* ─── Masthead edge-pinning + desktop scale-down ───
       Overrides the per-page inline `max-width: 1440px` on
       .mast-inner so the logo pins to the top-left edge and the
       cta-row pins to the top-right edge at every viewport size,
       regardless of how wide the browser is.  The existing grid
       template (auto 1fr auto) handles the three columns; removing
       the width cap lets the outer columns hug the screen edges,
       with the 48px padding providing a clean gutter.
       On desktop the logo and the masthead buttons are shrunk
       slightly so the header reads leaner, leaving more room for
       the nav and page content. */
.masthead .mast-inner {
  max-width: none;
}
/* Slightly smaller chrome on desktop — scoped to the masthead only
   so page-body buttons and the footer logo stay their default
   size.  Mobile breakpoints below 900px keep their own rules. */
@media (min-width: 901px) {
  .masthead .mark .mark-img { height: 28px; }
  .masthead .btn {
    padding: 11px 20px;
    font-size: 13px;
  }
  .masthead .btn.btn-hiring { padding: 11px 20px 11px 28px; }
  .masthead .btn.btn-hiring::before { left: 13px; width: 5px; height: 5px; }
  .masthead .btn .arr { font-size: 11px; }
}
/* Kill the underline sweep the default .nav a::after adds, the
   tag already has its own border frame so the sweep would double
   up visually. */
.nav a.nav-hiring::after { display: none !important; }
.nav a.nav-hiring::before { display: none; }
.nav a.nav-hiring:hover {
  background: rgba(154, 58, 31, 0.06);
  border-color: rgba(154, 58, 31, 0.5);
  color: var(--rust);
}

/* Contain horizontal overflow without breaking position:sticky */
body { overflow-x: clip; }
@supports not (overflow: clip) { body { overflow-x: hidden; } }
img, svg, video { max-width: 100%; height: auto; }

/* Kill the bright-blue iOS tap-highlight globally — aligns touch
   feedback with the site's design language (we use explicit :active
   states where we want feedback). */
* { -webkit-tap-highlight-color: transparent; }
a, button { -webkit-tap-highlight-color: transparent; }

/* Chapter 03/04/05 bridge background — lock to the darker tan used
   by .floor-sxn ("Running on American plants today."), at every
   breakpoint.  Asserted early so no subsequent mobile override can
   drop it back to parchment. */
.transition-bridge.tb-chapter-03,
.transition-bridge.tb-chapter-04,
.transition-bridge.tb-chapter-05 {
  background: #F5EDE5 !important;
  background-color: #F5EDE5 !important;
}

/* Every "Phase N · Name" button / label above the How We Work section
   titles is hidden on every mobile/tablet breakpoint.  Covers the
   progress-rail pills (.prog-step "1 Digitize" etc.), the per-card
   .t-id label, and the associated track/fill.  Only the section
   title inside each .t-card remains. */
@media (max-width: 900px) {
  .theatre-progress,
  .prog-track,
  .prog-fill,
  .prog-steps,
  .prog-step,
  .t-id { display: none !important; }
}

/* Seamless tan continuity at the bottom of .features-sxn + Chapter 04.
   Guarantees no parchment shows through any gap. */
.features-sxn,
.features-sxn .features-custom,
#features + .transition-bridge,
.features-sxn + .transition-bridge { background-color: #F5EDE5 !important; }

/* Touch devices (phones, tablets, touchscreens) — neutralize every
   desktop :hover effect that fires on tap and leaves a "black blob"
   or gradient bloom. */
@media (hover: none) {
  .floor-tile::after,
  .floor-tile:hover::after,
  .floor-tile:active::after { content: none !important; display: none !important; background: none !important; height: 0 !important; }
  .floor-tile:hover .floor-tile-art img,
  .floor-tile:active .floor-tile-art img { transform: none !important; filter: none !important; }
  .floor-tile:hover,
  .floor-tile:active { box-shadow: 0 20px 40px -22px rgba(8, 12, 22, 0.35) !important; outline-color: transparent !important; }
}

/* Safe-area padding on notched devices */
@supports (padding: env(safe-area-inset-left)) {
  .utility, .mast-inner {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
}

/* ═══════════ TABLET (≤1024) ═══════════ */
@media (max-width: 1024px) {
  .utility { padding: 9px 18px; font-size: 10px; letter-spacing: 0.16em; }
  .mast-inner { padding: 14px 20px !important; }
  .sxn { padding: 72px 28px !important; }
  .sxn-inner { padding: 0 !important; }
  .close-sxn { padding: 80px 28px !important; }
  .features-sxn { padding: 72px 28px !important; }
  .floor-sxn .floor-inner { padding: 80px 0 64px !important; }
  .floor-head { padding: 0 28px !important; }
}

/* ═══════════ MOBILE (≤900) — scale, don't restructure ═══════════ */
@media (max-width: 900px) {

  /* ─── Utility bar: allow horizontal scroll, keep all items ─── */
  .utility {
    padding: 8px 14px;
    font-size: 9.5px;
    letter-spacing: 0.14em;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .utility::-webkit-scrollbar { display: none; }
  .utility .u-left, .utility .u-right { gap: 14px; flex-wrap: nowrap; }

  /* ─── Masthead: single row, logo left + Menu button right ─── */
  .mast-inner {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    align-items: center;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  .mark {
    min-width: 0 !important;
    flex: 0 1 auto !important;
  }
  .mark .mark-img { height: 30px !important; image-rendering: -webkit-optimize-contrast; }
  .mark .mark-sub { display: none !important; }
  .nav { display: none !important; }
  .cta-row {
    gap: 8px !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
    justify-self: end !important;
    grid-column: auto !important;
  }
  /* Hide primary CTA in header on mobile; it lives in menu + throughout page */
  .cta-row .btn.primary { display: none !important; }
  .btn { padding: 12px 18px !important; font-size: 13px !important; letter-spacing: 0.04em !important; }
  .btn .arr { display: inline !important; }
  .btn.ghost { display: none !important; }

  /* ─── Menu button (hamburger) ─── */
  .menu-btn {
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto !important;
    gap: 10px;
    padding: 13px 18px 13px 20px;
    border-radius: 999px;
    border: 1px solid rgba(16,25,43,0.18);
    background: rgba(16,25,43,0.04);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    letter-spacing: 0;
    text-transform: none;
  }
  .menu-btn-lines {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 5px;
    width: 20px;
  }
  .menu-btn-lines span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--ink);
    border-radius: 2px;
  }

  /* ─── Mobile menu overlay — Freedom 250 style side panel ─── */
  .mobile-menu {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    left: 20%;
    background: var(--parchment);
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding: 14px 20px 20px;
    overflow-y: auto;
    box-shadow: -12px 0 40px rgba(16,25,43,0.18);
    transform: translateX(100%);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    visibility: hidden;
    will-change: transform;
  }
  /* Viewport ≤ 560 — panel becomes nearly full-width */
  @media (max-width: 560px) {
    .mobile-menu { left: 6%; padding: 14px 18px 18px; }
  }
  .mobile-menu.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  /* Scrim over the rest of the page */
  .mobile-menu-scrim {
    position: fixed; inset: 0;
    background: rgba(250,246,236,0.72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    pointer-events: none;
  }
  .mobile-menu-scrim.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
    pointer-events: auto;
  }

  /* First row: "Home" label with close button on right */
  .mobile-menu-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 4px 18px 4px;
    border-bottom: 1px solid rgba(16,25,43,0.14);
    margin: 0 0 4px;
    gap: 12px;
  }
  .mobile-menu-top .mark-img { display: none !important; }
  .mobile-menu-top .mobile-menu-item {
    border-bottom: 0 !important;
    padding: 0 !important;
    flex: 1;
  }
  .mobile-menu-close {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 11px 24px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--chalk);
    border: 0;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0;
    flex-shrink: 0;
    transform: scale(0.92);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s, opacity 0.25s ease 0.1s, background 0.2s ease;
  }
  .mobile-menu.is-open .mobile-menu-close {
    transform: scale(1);
    opacity: 1;
  }
  .mobile-menu-close:hover { background: #2a3142; }
  .mobile-menu-close:active { transform: scale(0.95); }

  .mobile-menu-list {
    display: flex; flex-direction: column;
    padding: 0;
    margin: 0 !important;
    flex: 1 0 auto;
  }
  .mobile-menu-item {
    display: flex; align-items: center; gap: 14px;
    padding: 20px 4px;
    border-bottom: 1px solid rgba(16,25,43,0.14);
    color: rgba(16,25,43,0.55);             /* lighter gray by default */
    text-decoration: none;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 26px;
    letter-spacing: -0.015em;
    line-height: 1;
    opacity: 0;
    transform: translateX(14px);
    /* Two transition blocks stacked: the "reveal-in on open" uses
       the slower 0.42s ease, and the hover micro-interaction
       (color + slight scoot right) runs on a tight cubic so it
       feels instant.  Color runs on its own very short timeline
       so the gray→ink darkening lands the moment the cursor
       arrives. */
    transition:
      opacity 0.35s ease,
      transform 0.22s cubic-bezier(.2,.7,.2,1),
      color 0.07s cubic-bezier(.2,.7,.2,1);
  }
  .mobile-menu-item:hover,
  .mobile-menu-item:active,
  .mobile-menu-item:focus-visible {
    color: var(--ink);                      /* darker on hover/active */
    /* Color change is INSTANT on hover.  The stagger
       transition-delay (up to 0.39s on item 7) was making hover
       feel laggy — we reset transition-delay and drop color's
       transition duration to zero so the gray→ink flip is
       immediate.  Transform (the 6px scoot) keeps a short cubic
       so it still glides. */
    transition:
      transform 0.13s cubic-bezier(.2,.7,.2,1),
      color 0s !important;
    transition-delay: 0s !important;
  }
  .mobile-menu.is-open .mobile-menu-item {
    opacity: 1;
    transform: translateX(0);
  }
  /* Microanimation on hover once the menu is open — a 6px scoot
     right pairs with the darker color + star reveal so every item
     gets a real physical acknowledgment when you move onto it. */
  .mobile-menu.is-open .mobile-menu-item:hover,
  .mobile-menu.is-open .mobile-menu-item:focus-visible {
    transform: translateX(6px);
  }
  .mobile-menu.is-open .mobile-menu-top .mobile-menu-item { transition-delay: 0.08s; }
  .mobile-menu.is-open .mobile-menu-list .mobile-menu-item:nth-child(1) { transition-delay: 0.14s; }
  .mobile-menu.is-open .mobile-menu-list .mobile-menu-item:nth-child(2) { transition-delay: 0.19s; }
  .mobile-menu.is-open .mobile-menu-list .mobile-menu-item:nth-child(3) { transition-delay: 0.23s; }
  .mobile-menu.is-open .mobile-menu-list .mobile-menu-item:nth-child(4) { transition-delay: 0.27s; }
  .mobile-menu.is-open .mobile-menu-list .mobile-menu-item:nth-child(5) { transition-delay: 0.31s; }
  .mobile-menu.is-open .mobile-menu-list .mobile-menu-item:nth-child(6) { transition-delay: 0.35s; }
  .mobile-menu.is-open .mobile-menu-list .mobile-menu-item:nth-child(7) { transition-delay: 0.39s; }
  .mobile-menu-item:active { color: rgba(16,25,43,0.55); }

  .mobile-menu-item .star {
    font-family: var(--serif);
    font-size: 22px;
    color: var(--ink);
    width: 22px;
    text-align: center;
    display: inline-block;
    flex-shrink: 0;
    line-height: 1;
    visibility: hidden;
    transform: rotate(-12deg);
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  /* Stars: Home always shows one; all other items reveal a star on
     hover / focus only.  Subtle, premium, intentional. */
  .mobile-menu-item .star {
    display: inline-block !important;
    visibility: hidden;
    width: 20px;
    text-align: left;
    font-family: var(--serif);
    font-size: 22px;
    color: inherit;
    line-height: 1;
    flex-shrink: 0;
    /* Near-instant star: opacity snaps in and rotation settles just
       behind it so the hover feels reactive, not animated. */
    transition:
      visibility 0s,
      opacity 0.06s cubic-bezier(.2,.7,.2,1),
      transform 0.12s cubic-bezier(.2,.7,.2,1);
    opacity: 0;
    transform: rotate(-8deg);
  }
  /* Home always shows a star AND reads darker than the other items so
     it feels like the active/primary row when the menu is open. */
  .mobile-menu-item.is-home {
    color: var(--ink) !important;
    font-weight: 500;
  }
  .mobile-menu-item.is-home .star {
    visibility: visible;
    opacity: 1;
    transform: rotate(0deg);
  }
  /* Other items: reveal star on hover / focus / active.  Small
     editorial WINK — a one-shot keyframe animation that tilts the
     star + lifts it, then settles it back to rest position
     (rotate 0deg, no lift).  Using an animation instead of a
     static hover transform means the star doesn't freeze in the
     tilted pose.  It does a quick acknowledgment gesture and then
     sits quiet at rotate(0deg). */
  .mobile-menu-item:hover .star,
  .mobile-menu-item:active .star,
  .mobile-menu-item:focus-visible .star {
    visibility: visible;
    opacity: 1;
    animation: mm-star-wink 0.48s cubic-bezier(.2,.7,.2,1) forwards;
  }
  /* Home's star is always visible — its hover motion still applies
     (it winks the same way when hovered). */
  .mobile-menu-item.is-home:hover .star,
  .mobile-menu-item.is-home:focus-visible .star {
    animation: mm-star-wink 0.48s cubic-bezier(.2,.7,.2,1) forwards;
  }
  @keyframes mm-star-wink {
    0%   { transform: rotate(-8deg) translateY(0); }
    45%  { transform: rotate(14deg) translateY(-3px); }
    100% { transform: rotate(0deg)  translateY(0); }
  }

  /* "We're Hiring!" — a slightly darker gray than the default muted
     menu item, so it reads as a quieter cue sitting above the
     Book a Demo CTA. On hover it darkens to full ink like the
     other items. */
  .mobile-menu-item.is-hiring {
    color: rgba(16,25,43,0.74) !important;
  }
  .mobile-menu-item.is-hiring:hover,
  .mobile-menu-item.is-hiring:active,
  .mobile-menu-item.is-hiring:focus-visible {
    color: var(--ink) !important;
  }

  /* Book a Demo — same editorial treatment as other items, but rust
     colored so it still reads as a CTA. */
  .mobile-menu-item.is-cta {
    color: var(--rust) !important;
    padding: 20px 4px !important;
  }
  .mobile-menu-item.is-cta:hover,
  .mobile-menu-item.is-cta:active {
    color: var(--rust) !important;
    opacity: 0.82;
  }
  .mobile-menu.is-open .mobile-menu-top .mobile-menu-item.is-primary .star { transition-delay: 0.22s; }
  .mobile-menu.is-open .mobile-menu-list .mobile-menu-item:nth-child(1).is-primary .star { transition-delay: 0.28s; }
  .mobile-menu.is-open .mobile-menu-list .mobile-menu-item:nth-child(2).is-primary .star { transition-delay: 0.33s; }
  .mobile-menu.is-open .mobile-menu-list .mobile-menu-item:nth-child(3).is-primary .star { transition-delay: 0.37s; }
  .mobile-menu.is-open .mobile-menu-list .mobile-menu-item:nth-child(4).is-primary .star { transition-delay: 0.41s; }
  .mobile-menu.is-open .mobile-menu-list .mobile-menu-item:nth-child(5).is-primary .star { transition-delay: 0.45s; }
  .mobile-menu.is-open .mobile-menu-list .mobile-menu-item:nth-child(6).is-primary .star { transition-delay: 0.49s; }

  .mobile-menu-item.is-muted { color: rgba(16,25,43,0.55); }
  .mobile-menu-item .ext {
    font-size: 16px;
    margin-left: -4px;
    opacity: 0.7;
    font-family: var(--sans);
    font-weight: 400;
  }

  /* Stacked CTA rows — hidden in Freedom 250 style (we want minimalism) */
  .mobile-menu-cta { display: none !important; }

  /* Bottom SOCIAL row */
  .mobile-menu-foot {
    display: flex; align-items: center; gap: 10px;
    padding: 28px 4px 4px;
    margin-top: auto;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease 0.42s, transform 0.4s ease 0.42s;
  }
  .mobile-menu.is-open .mobile-menu-foot {
    opacity: 1;
    transform: translateY(0);
  }
  .mobile-menu-foot-label {
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--gravel);
    margin-right: 8px;
  }
  .mobile-menu-foot a {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--chalk);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0;
    transition: background 0.2s ease, transform 0.15s ease;
  }
  .mobile-menu-foot a:hover { background: #2a3142; }
  .mobile-menu-foot a:active { transform: scale(0.96); }

  /* ─── Hero stage: takes about 78svh so Chapter 01 has a clear peek
     at the bottom of the landing viewport.  Content sits tighter,
     2-button CTA row breathes. */
  .stage {
    padding: 20px 14px 28px !important;
    min-height: 78svh !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
  }
  .core { margin-top: 20px !important; max-width: 100% !important; text-align: center; }
  .title {
    font-size: clamp(27px, 7.5vw, 42px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.022em !important;
    text-align: center !important;
    padding: 0 8px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: calc(100vw - 28px) !important;
  }
  .title .line1 {
    display: block !important;
    white-space: nowrap !important;
  }
  .title em {
    display: block !important;
    white-space: nowrap !important;
    margin-top: 2px !important;
  }
  .title-br { display: none !important; }
  .eyebrow {
    font-size: 9.5px !important;
    letter-spacing: 0.16em !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .flag { width: 34px !important; height: 20px !important; }
  /* Lede: narrower max-width + a touch larger type (per the "tiny
     bigger" ask) so it still wraps to ~3 clean lines on mobile. */
  .lede {
    font-size: 15px !important;
    line-height: 1.48 !important;
    max-width: 34ch !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-wrap: pretty;
  }

  /* Safety: the chat/prompt UI is fully removed from HTML, but hide
     any remnants (and the tweaks script's #cta-buttons) just in case. */
  .prompt, .prompt-chips, .chip, .prompt-hint, #cta-buttons { display: none !important; }

  /* Hero CTAs on mobile — less intense: shorter, lighter, subtler
     shadow.  Still premium and tappable, not overbearing. */
  .stage-ctas {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: 20px !important;
    margin-bottom: 8px;
    padding: 0 16px;
  }
  .stage-cta {
    width: 100% !important;
    height: 42px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 0 18px !important;
    letter-spacing: 0.005em !important;
  }
  .stage-cta-pri { box-shadow: 0 6px 14px -10px rgba(16,25,43,0.24) !important; }
  .stage-cta-sec { border-color: rgba(16,25,43,0.22) !important; }

  /* Hero collage plates: hide on mobile — they overlap text */
  .plate { display: none !important; }
  .p1, .p2, .p3, .p4, .p5, .p6, .p7, .p8, .p9 { display: none !important; }

  /* ─── Section base ─── */
  .sxn { padding: 64px 16px !important; }
  .sxn-inner { padding: 0 !important; }
  .sxn-display {
    font-size: clamp(28px, 7.8vw, 40px) !important;
    line-height: 1.08 !important;
  }
  .kicker { font-size: 10px !important; letter-spacing: 0.18em !important; }

  /* ─── Transition bridges — tighter + consistent across chapter 02/03+ ─── */
  .transition-bridge, .floor-bridge {
    padding: 20px 16px !important;
    min-height: 0 !important;
  }
  /* Chapter 01 sits directly below the hero; pull it up a touch so
     the hero and Chapter 01 feel connected and a portion peeks into
     the initial mobile viewport. */
  .stage + .transition-bridge {
    padding-top: 14px !important;
  }
  .tb-inner, .fb-inner {
    padding: 0 !important;
    gap: 12px !important;
  }
  .tb-meta, .fb-meta {
    font-size: 9px !important;
    letter-spacing: 0.18em !important;
    gap: 8px !important;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center !important;
    width: 100% !important;
  }
  .tb-phases {
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    font-size: 9px !important;
    letter-spacing: 0.10em !important;
    justify-content: center !important;
  }
  .fb-marks {
    gap: 8px !important;
    flex-wrap: wrap;
    justify-content: center;
  }
  .fb-cue {
    gap: 4px !important;
    margin-bottom: 28px !important;   /* breathing room under "Floor reveal" */
  }
  .fb-arrow { font-size: 14px !important; }
  .fb-cue-label { font-size: 9px !important; letter-spacing: 0.18em !important; }
  .floor-bridge { padding-bottom: 48px !important; }

  /* ─── Phase theatre: KEEP scroll pin, split stage vertically ─── */
  .phase-theatre {
    /* Full formula: stage height (95vh) + 10vh leading buffer +
       5*47vh per-phase scroll distance.  Stage is taller on mobile
       so the head + pill + visual + body all fit without clipping
       the SVG animation, even after the head display heading and
       per-phase title both bumped, plus extra breathing room added
       under the head and under the phase pill. */
    height: calc(95vh + 10vh + 5 * 47vh) !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }
  .theatre-stage {
    position: sticky !important;
    top: 0 !important;
    height: 95vh !important;
    min-height: 95vh !important;
    max-height: 95vh !important;
    padding: 12px 14px 10px !important;
    display: block !important;
    background: var(--parchment) !important;
    z-index: 1;
    overflow: hidden;
  }
  .theatre-grid {
    grid-template-columns: 1fr !important;
    /* visual top (capped), copy bottom (auto) */
    grid-template-rows: auto auto !important;
    gap: 8px !important;
    padding: 4px 0 !important;
    height: auto !important;
    max-height: 100%;
    align-items: start !important;
  }
  .theatre-visual {
    position: relative !important;
    min-height: 0 !important;
    /* 36vh: now that the stage is 88vh (was 72vh), give the SVG
       animation more room.  Narrow-aspect phases (P0/P1) fill the
       box by height; wide-aspect phases (P2-P5) center cleanly. */
    max-height: 36vh !important;
    height: 36vh !important;
    aspect-ratio: auto !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    box-shadow: 0 1px 0 rgba(16,25,43,0.14) !important;
    border-bottom: 0 !important;
  }

  /* Kill the 4px .plate-illo padding on mobile so the SVG fills the
     visual container entirely (every 4px eaten on each side reads as
     "cut off" on narrow-aspect phases like P0/P1 where width is the
     constraint). */
  .t-vis .plate-slot.phase-drawing .plate-illo {
    padding: 0 !important;
  }

  /* No scale transforms on mobile — the previous scale>1 was pushing
     edge content past the visual's `overflow: hidden` clip box,
     which read as the drawing being "cut off".  Let every SVG fit
     naturally at 100% inside the visual; any empty vertical space
     on wide-aspect phases (P2-P5) is better than clipping labels. */
  .t-vis .plate-slot.phase-drawing .plate-illo > svg.bp-svg {
    transform: none !important;
  }
  .theatre-visual .plate-slot {
    max-width: 100% !important;
    max-height: 100% !important;
  }
  .theatre-visual .plate-slot svg,
  .theatre-visual .plate-slot img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
  .t-vis {
    position: absolute !important;
    inset: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.45s cubic-bezier(.4,.0,.2,1), visibility 0s linear 0.45s !important;
  }
  .t-vis.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 0.45s cubic-bezier(.4,.0,.2,1), visibility 0s linear 0s !important;
  }
  .theatre-copy {
    padding-left: 0 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .theatre-text {
    position: relative !important;
    min-height: 190px !important;
    height: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-right: 0 !important;
    overflow: visible;
    flex: 1 1 auto !important;
    order: 1 !important;
  }
  .t-card {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    padding: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    /* Force GPU compositing with translateZ(0) — without this, each
       card gets re-rasterized on every opacity step and the pill
       appears to nudge by 1-2 subpixels.  With a dedicated GPU layer,
       every card composites as a single bitmap so the pill is pixel-
       perfect stationary across all phase swaps. */
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: opacity;
    transition:
      opacity 0.38s cubic-bezier(.4,.0,.2,1),
      visibility 0s linear 0.38s;
  }
  .t-card.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateZ(0);
    transition:
      opacity 0.38s cubic-bezier(.4,.0,.2,1),
      visibility 0s linear 0s;
  }
  /* .t-id and the entire progress rail (.theatre-progress, .prog-*) are
     kept HARD-HIDDEN on mobile. Earlier in this file (under the same
     @media (max-width: 900px) block) we set `display: none !important`
     for all of them — do not revive them here. The desktop "Phase N ·
     Name" pill and the dots-track are intentionally gone on mobile:
     the per-card .phase-badge rectangle is the only phase indicator. */
  /* Vertical rhythm locked to the P5 pattern — identical margins on
     every phase so P0-P4 look spatially identical to P5.  Gaps are
     driven by element margins (not flex gap) so content length can't
     shift the rhythm.  Same for all phases, regardless of title/body
     word count. */
  /* Phase-card reading order on mobile: title → body → red cap.
     Content flows naturally so shorter phases don't carry dead
     space.  The cap is pinned to the bottom of the card via flex
     auto-margin so it always lands at the same y regardless of body
     length — short bodies leave the gap between body and cap;
     long bodies sit closer to the cap.  No giant empty boxes. */
  .t-title {
    font-size: 25px !important;
    line-height: 1.12 !important;
    margin: 0 0 14px !important;
    letter-spacing: -0.018em !important;
    font-weight: 400 !important;
    display: block !important;
    order: 0 !important;
  }
  .t-body {
    font-size: 14px !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
    margin: 0 0 16px !important;
    display: block !important;
    order: 0 !important;
  }
  .t-cap {
    font-size: 10.5px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    display: block !important;
    color: var(--rust) !important;
    opacity: 0.88 !important;
    margin: 10px 0 0 !important;
    line-height: 1.45 !important;
    order: 0 !important;
  }
  .t-kicker { font-size: 10px !important; letter-spacing: 0.18em !important; }

  /* Phase badge — must be visible on EVERY phase card on mobile (P0 was
     previously invisible because the desktop default is `display: none`
     and the visible override in homepage.css only fires at ≤720px, while
     .t-id is hidden at ≤900px — creating a 721–900px gap where both
     phase indicators disappear).  Style here authoritatively inside the
     900px block so the badge is always present regardless of device
     width, and pin it to the top of every card so it doesn't jump
     vertically between phases. */
  /* Pin the badge absolutely at the top-left of every card.  Previously
     it was a flex child — which meant: (a) tall body copy would push
     the whole card past the overflow-hidden boundary and clip the
     badge, (b) if .t-id or any other element snuck in above, the badge
     would jump vertically between phases.  Absolute positioning fixes
     both: same exact pixel for P0-P5, never clipped by flex flow. */
  /* All 6 per-card pills are hidden on mobile — there is ONE
     persistent pill (#mobile-phase-pill) outside the cards whose
     text content is swapped by JS on phase change, so the pill's
     pixel position is physically impossible to shift.  See the
     .mobile-phase-pill rule below. */
  .t-card .phase-badge { display: none !important; }

  /* The single persistent pill.  Lives in .theatre-stage directly
     above .theatre-grid, so every phase renders the same DOM node at
     the same pixel — only its textContent changes. */
  .mobile-phase-pill {
    display: inline-block !important;
    align-self: flex-start !important;
    /* 14px above the pill for clear breathing room between the HWW
       head divider and the pill; 10px on the left so the pill sits
       close to the edge; 20px below so the pill never crowds the
       phase title (was 9px and felt jammed against "We come on-site
       to your factory"). */
    margin: 14px 16px 20px 10px !important;
    /* 5% bigger than 10px/3px/10px → now 10.5px/4px/11px */
    padding: 4px 11px !important;
    font-family: var(--mono) !important;
    font-weight: 400 !important;
    font-size: 10.5px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--rust) !important;
    background: rgba(194, 87, 45, 0.08) !important;
    border: 1px solid rgba(194, 87, 45, 0.22) !important;
    border-radius: 3px !important;
    line-height: 1 !important;
    position: relative !important;
    z-index: 3 !important;
    width: auto !important;
    height: auto !important;
  }

  /* ─── Floor section (customers carousel) ─── */
  .floor-sxn {
    border-radius: 18px 18px 0 0 !important;
    margin-top: -14px !important;
  }
  .floor-sxn .floor-inner {
    /* Tight bottom padding so the Book a Demo / Talk to a customer
       CTA row sits close to the Mossberg card below. */
    padding: 56px 0 12px !important;
  }
  .floor-head {
    padding: 0 16px !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .floor-display {
    font-size: clamp(30px, 8.2vw, 44px) !important;
    line-height: 1.04 !important;
  }
  .floor-lede { font-size: 14.5px !important; }

  .floor-ctas {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
    /* Tighter bottom margin so the tile row starts closer to these CTAs. */
    margin: 24px auto 12px !important;
    padding: 0 4px !important;
  }
  .floor-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 16px 22px !important;
    font-size: 14.5px !important;
  }

  /* Customer cards — native horizontal scroll-snap swipe.  No
     scrolljack; users swipe the tile row left/right to access every
     customer.  More reliable than transform-driven scrolljack on iOS,
     and users intuitively swipe horizontal card strips on phones. */
  .floor-sxn {
    min-height: 0 !important;
    padding-bottom: 20px !important;
    transform: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
  }
  .floor-sxn.is-in { transform: none !important; }
  .floor-inner { position: relative; z-index: 2; }
  .floor-tiles {
    position: static !important;
    top: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px 16px 20px !important;
    column-gap: 12px !important;
    gap: 12px !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 16px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    transform: none !important;  /* hard override any leftover scrolljack transform */
    box-sizing: border-box;
  }
  .floor-tiles::-webkit-scrollbar { display: none; }
  .floor-tile {
    /* Each tile takes 86% of viewport width so a bit of the next tile
       peeks — clear affordance for "swipe for more".  scroll-snap-align
       center ensures every card — especially the middle ones — lands
       properly centered in the viewport when swiped to. */
    flex: 0 0 86% !important;
    width: 86% !important;
    aspect-ratio: 4 / 5 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 62vh !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    transition: none !important;
  }
  .floor-tile > .floor-tile-art {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }
  .floor-tile > .floor-tile-art img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    image-rendering: auto;
  }
  .floor-tile:last-child { margin-right: 0 !important; }
  .floor-tile-join {
    aspect-ratio: auto !important;
    max-height: none !important;
  }

  /* On mobile, always show logo top-left so it's visible above the info gradient */
  .floor-tile-logo {
    position: absolute !important;
    height: 48px !important;
    max-width: calc(100% - 40px) !important;
    top: 20px !important;
    left: 20px !important;
    bottom: auto !important;
    right: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 5 !important;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,0.55)) !important;
  }
  .floor-tile[data-tile="mossberg"] .floor-tile-logo {
    height: 48px !important;
    left: 20px !important;
    right: auto !important;
    top: 40px !important;
  }
  .floor-tile[data-tile="icc"] .floor-tile-logo { height: 56px !important; }
  .floor-tile[data-tile="cls"] .floor-tile-logo { height: 48px !important; }
  .floor-tile-tag {
    left: 12px !important;
    right: auto !important;
    bottom: 20px !important;
    padding: 5px 8px !important;
    font-size: 7.5px !important;
    letter-spacing: 0.08em !important;
    gap: 4px !important;
    opacity: 1 !important;
    transform: none !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    max-width: calc(100% - 24px) !important;
  }
  /* Keep the tag visible even when the desktop :hover rule fires on
     touch — Mossberg's "Firearms · Est. 1919 · Family Owned" and
     equivalent tags must stay legible on mobile. */
  .floor-tile:hover .floor-tile-tag,
  .floor-tile:active .floor-tile-tag,
  .floor-tile:focus-within .floor-tile-tag {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Info panel hidden by default, photo unobstructed.  On tap the panel
     becomes a clean solid card that slides up from the bottom — no dark
     scrim, no harsh gradient line, always readable. */
  .floor-tile-info {
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    opacity: 0 !important;
    transform: translateY(14px) !important;
    pointer-events: none !important;
    background: #FDFAF4 !important;
    color: var(--ink) !important;
    padding: 18px 18px 20px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(16,25,43,0.08) !important;
    box-shadow: 0 22px 40px -20px rgba(8,12,22,0.35) !important;
    max-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(.2,.7,.2,1), max-height 0.4s cubic-bezier(.2,.7,.2,1) !important;
  }
  .floor-tile.is-expanded .floor-tile-info {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    max-height: calc(100% - 20px) !important;
  }
  .floor-tile.is-expanded .floor-tile-logo,
  .floor-tile.is-expanded .floor-tile-tag {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .floor-tile-info-meta {
    font-size: 9px !important;
    letter-spacing: 0.14em !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
    flex-wrap: wrap;
    color: rgba(16,25,43,0.60) !important;
    text-transform: uppercase;
  }
  .floor-tile-info-meta .dot { color: rgba(16,25,43,0.35) !important; }
  .floor-tile-info-body {
    font-family: var(--serif) !important;
    font-size: 13.5px !important;
    line-height: 1.42 !important;
    color: var(--ink) !important;
  }
  .floor-tile-info-clients {
    font-size: 9.5px !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(16,25,43,0.14) !important;
    opacity: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: opacity 0.3s ease, max-height 0.3s ease !important;
    color: rgba(16,25,43,0.60) !important;
  }
  .floor-tile-info-clients .clients-label { color: rgba(16,25,43,0.45) !important; }
  .floor-tile.is-expanded .floor-tile-info-clients {
    opacity: 1 !important;
    max-height: 200px !important;
  }
  .floor-tile-info-clients .clients-list { font-size: 12.5px !important; color: var(--ink) !important; font-style: italic; }

  /* Kill the desktop ::after gradient entirely on mobile.  The 'Tap for
     Details' affordance is a real .tap-hint element (see below) so the
     pseudo-element can't create a dark blob under any hover/touch state. */
  .floor-tile::after,
  .floor-tile:hover::after,
  .floor-tile:active::after,
  .floor-tile:focus::after {
    content: none !important;
    display: none !important;
    background: none !important;
    height: 0 !important;
  }

  /* Real 'Tap for Details' pill — locked to the top-right of every tile.
     15% smaller than before: font 9 → 8px, padding 6/10 → 5/9, letter
     spacing tuned so the word still reads comfortably. */
  .floor-tile .tap-hint {
    display: inline-flex !important;
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 6 !important;
    font-family: var(--mono) !important;
    font-size: 8px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(250,246,236,0.92) !important;
    background: rgba(16,25,43,0.70) !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(250,246,236,0.18) !important;
    pointer-events: none !important;
    transform: none !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: opacity 0.3s ease, transform 0.3s ease !important;
  }
  .floor-tile.is-expanded .tap-hint {
    opacity: 0 !important;
    transform: translateY(-4px) !important;
  }
  .floor-tile-join .tap-hint { display: none !important; }

  /* Neutralize desktop :hover artifacts on touch.  No image darkening,
     no gradient bloom, no panel pop. */
  .floor-tile:hover,
  .floor-tile:active,
  .floor-tile:focus-within {
    box-shadow: 0 20px 40px -22px rgba(8, 12, 22, 0.35) !important;
    outline-color: transparent !important;
  }
  .floor-tile:hover .floor-tile-art img,
  .floor-tile:active .floor-tile-art img,
  .floor-tile:focus-within .floor-tile-art img {
    transform: none !important;
    filter: none !important;
  }
  .floor-tile:hover .floor-tile-info,
  .floor-tile:active .floor-tile-info,
  .floor-tile:focus-within .floor-tile-info {
    opacity: 0 !important;
    transform: translateY(14px) !important;
    pointer-events: none !important;
    max-height: 0 !important;
    background: #FDFAF4 !important;
    padding: 18px 18px 20px !important;
  }
  .floor-tile.is-expanded .floor-tile-info,
  .floor-tile.is-expanded:hover .floor-tile-info,
  .floor-tile.is-expanded:focus-within .floor-tile-info {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    max-height: calc(100% - 20px) !important;
    padding: 18px 18px 20px !important;
    background: #FDFAF4 !important;
  }

  /* Vertical-stack version: gentle snap at tile start on mobile */
  .floor-tile {
    scroll-snap-stop: always !important;
    transition: transform 0.5s cubic-bezier(.2,.7,.2,1) !important;
  }

  /* CTA tile */
  .floor-tile-join-inner { padding: 28px 22px !important; gap: 18px !important; }
  .floor-tile-join-title { font-size: clamp(24px, 6.5vw, 32px) !important; }
  .floor-tile-join-body { font-size: 13.5px !important; }
  .floor-tile-join-actions { flex-direction: column !important; gap: 8px !important; }
  .floor-join-btn {
    padding: 16px 20px !important;
    font-size: 14px !important;
    width: 100% !important;
    justify-content: center !important;
  }

  /* ─── Features & Use Cases: mobile-dedicated scroll theatre ─── */
  .features-sxn {
    padding: 0 !important;
    position: relative;
    background: #F5EDE5 !important;
  }
  .features-sxn .sxn-inner { padding: 0 !important; }

  /* The desktop features-head (kicker + h2 + lede outside the pin) is
     hidden on mobile — an identical kicker + headline live INSIDE the
     pinned mod-stage (see .mod-mobile-head) so the pin engages at
     section entry.  M10 pattern. */
  .features-head { display: none !important; }

  /* In-stage mobile header — bigger title + a touch more padding above. */
  .mod-mobile-head {
    display: block !important;
    padding: 16px 16px 10px !important;
    background: #F5EDE5;
    border-bottom: 1px solid rgba(16,25,43,0.10);
    position: relative;
    z-index: 3;
  }
  .mod-mobile-head .kicker {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--rust);
    margin: 0 0 8px;
  }
  .mod-mobile-display {
    font-family: var(--serif);
    font-size: 25px;
    line-height: 1.07;
    letter-spacing: -0.018em;
    margin: 0;
    color: var(--ink);
  }
  .mod-mobile-display em { font-style: italic; }
  .mod-mobile-display .line {
    display: inline;
    font-size: 25px;
    line-height: 1.07;
  }
  .mod-mobile-display .line + .line::before { content: " "; }

  /* Scroll-pin wrapper: 1 viewport pinned + 8 × 120vh scroll per slide.
     Slight breathing room above, no extra padding below. */
  .mod-browser {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 0 !important;
    padding: 0 !important;
    margin-top: 24px !important;
    margin-bottom: 0 !important;
    height: calc(100vh + 8 * 120vh) !important;
    position: relative !important;
    background: #F5EDE5 !important;
  }
  /* Hide the pill-row index on mobile — scroll is the driver */
  .mod-idx { display: none !important; }

  /* Stage: sticky at top: 18vh so the resistance engages once the
     visual is already ~in the middle of the viewport, not after the
     user has scrolled past the top of the stage. */
  .mod-stage {
    position: sticky !important;
    top: 18vh !important;
    height: 78vh !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #F5EDE5 !important;
    display: block !important;
    contain: layout;
  }
  /* "Module N / 09" counter in the top-right of the stage — sits above
     the header, subtle label. */
  .mod-stage::before {
    content: "Module " attr(data-current) " / 09";
    position: absolute;
    top: 14px; right: 16px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(16,25,43,0.55);
    z-index: 4;
    pointer-events: none;
  }

  /* Slide layout — visual sized to its SVG, text immediately underneath.
     Top inset tightened to give the bigger visuals more room. */
  .mod-slide {
    position: absolute !important;
    top: 120px !important;                 /* below the mobile header */
    left: 18px !important;
    right: 18px !important;
    bottom: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease;
    z-index: 1;
  }
  .mod-slide-body, .mod-slide-text { grid-column: unset !important; grid-row: unset !important; }
  .mod-slide.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2;
  }

  /* Visual cell sizes to the SVG.  ~10% smaller than the prior bump
     so the section feels more balanced and less oversized on mobile.
     Extra top padding gives every drawing a little breathing room
     under the mobile header so M1-M9 don't feel jammed against it. */
  .mod-slide-body {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 16px 0 0 !important;
  }
  .mod-slide-body svg.bp-svg {
    max-width: 100% !important;
    max-height: 250px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    transform: none;
  }

  /* Text: order 2 (below visual).  Tight gap between title and desc. */
  .mod-slide-text {
    grid-column: 1 !important;
    grid-row: 2 !important;
    gap: 10px !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
  }
  .mod-slide-head { gap: 10px !important; align-items: center !important; margin: 0 !important; }
  .mod-slide-num { font-size: 11px !important; width: 28px !important; height: 28px !important; }
  .mod-slide-title {
    font-size: 22px !important;
    line-height: 1.06 !important;
    margin: 0 !important;
    letter-spacing: -0.02em !important;
  }
  .mod-slide-sub {
    font-size: 9.5px !important;
    letter-spacing: 0.18em !important;
    color: rgba(16,25,43,0.55) !important;
  }
  .mod-slide-desc {
    font-size: 15.5px !important;
    line-height: 1.46 !important;
    margin: 0 !important;
  }

  /* M10 — pinned like M1-M9 for ~100vh so the resistance beat continues
     through the tenth module, then the user free-scrolls onward. */
  .features-custom-pin {
    position: relative !important;
    height: calc(100vh + 80vh) !important;  /* 100vh pinned + 80vh pin-out */
    background: #F5EDE5 !important;
  }
  .features-custom {
    position: sticky !important;
    top: 48px !important;
    min-height: calc(100vh - 48px) !important;
    margin: 0 !important;
    padding: 32px 20px 40px !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 20px !important;
    border-top: 1px solid rgba(16,25,43,0.12) !important;
    background: #F5EDE5 !important;
  }
  .features-custom-visual {
    order: 1 !important;
    padding: 8px 0 !important;
    min-height: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .features-custom-visual svg.bp-svg {
    max-width: 100% !important;
    max-height: 260px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto;
    display: block;
  }
  .features-custom-text {
    order: 2 !important;
    gap: 14px !important;
    display: flex;
    flex-direction: column;
  }
  .features-custom-label { gap: 10px !important; align-items: center !important; }
  .features-custom-num {
    width: 32px !important;
    height: 32px !important;
    font-size: 10.5px !important;
    flex-shrink: 0;
  }
  .features-custom-meta {
    /* Even smaller eyebrow subtext on M10 — was 8.5px, now 7.5px
       so it reads as a very quiet caption under the M10 chip. */
    font-size: 7.5px !important;
    letter-spacing: 0.16em !important;
    line-height: 1.35 !important;
  }
  .features-custom-title {
    font-size: 27px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }
  .features-custom-body {
    font-size: 15.5px !important;
    line-height: 1.46 !important;
    max-width: 100% !important;
  }
  .features-custom-tags {
    gap: 6px !important;
    margin-top: 6px !important;
  }
  .features-custom-tags span {
    font-size: 9px !important;
    letter-spacing: 0.12em !important;
    padding: 6px 9px !important;
  }

  /* Blueprint cards */
  .bp-wrap { grid-template-columns: 1fr !important; gap: 12px !important; }
  .bp-title { font-size: 20px !important; }
  .bp-desc { font-size: 13.5px !important; }

  /* Capabilities */
  .cap-grid { gap: 36px !important; }
  .cap-block { grid-template-columns: 1fr !important; gap: 18px !important; }
  .cap-block:nth-child(even) .cap-copy,
  .cap-block:nth-child(even) .plate-slot { order: unset !important; }
  .cap-title { font-size: clamp(22px, 6vw, 28px) !important; }
  .cap-body { font-size: 14.5px !important; }

  .cust-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
  .phase-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Extra breathing room between Chapter 05 and the close CTA */
  .tb-chapter-05 { padding-top: 56px !important; padding-bottom: 72px !important; }

  /* Close / contact — generous vertical air above and below so the
     CTA doesn't feel jammed against the chapter bridge or footer. */
  .close-sxn {
    padding: 96px 20px 104px !important;
  }
  .close-display {
    font-size: clamp(30px, 9vw, 44px) !important;
    margin-bottom: 28px !important;
  }
  .close-sxn .btn-row {
    display: flex !important;
    flex-direction: column !important;
    row-gap: 0 !important;
    gap: 0 !important;
    align-items: stretch !important;
    margin-top: 44px !important;
    padding: 0 16px !important;
  }
  .close-sxn .btn-row .btn {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    justify-content: center !important;
    padding: 0 22px !important;
    font-size: 14px !important;
    border-radius: 999px !important;
    font-weight: 500 !important;
    margin: 0 0 6px 0 !important;
  }
  .close-sxn .btn-row .btn:last-child {
    margin-bottom: 0 !important;
  }
  /* Legacy class names retained for safety */
  .close-ctas {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .close-btn, .close-ctas a {
    width: 100% !important;
    justify-content: center !important;
    padding: 16px 22px !important;
    font-size: 14px !important;
    min-height: 48px !important;
  }

  /* Footer — legacy overrides that still apply on top of the new
     grid/type rules in homepage.css.  Keep these minimal. */
  .footer-brand-logo { height: 28px !important; }
  .footer-bottom-left {
    flex-direction: column !important;
    gap: 6px !important;
    align-items: center !important;
  }
}

/* ═══════════ SMALL PHONE (≤400) ═══════════ */
@media (max-width: 400px) {
  .utility { padding: 7px 12px; font-size: 9px; letter-spacing: 0.12em; }
  .mast-inner { gap: 8px !important; padding: 11px 12px !important; }
  .nav a { font-size: 9.5px !important; padding: 6px 8px !important; }
  .btn { padding: 7px 11px !important; font-size: 10.5px !important; }
  .mark .mark-img { height: 26px !important; }

  .stage { padding: 18px 12px 32px !important; }
  .title {
    font-size: clamp(23px, 6.7vw, 30px) !important;
    max-width: calc(100vw - 24px) !important;
  }
  .title .line1,
  .title em {
    white-space: nowrap !important;
  }
  .lede { font-size: 14px !important; }
  .close-sxn .btn-row .btn {
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 20px !important;
    font-size: 13.5px !important;
  }
  .stage-ctas { padding: 0 8px !important; }
  .stage-cta { height: 52px !important; font-size: 14px !important; }

  .sxn { padding: 52px 14px !important; }
  .sxn-display { font-size: clamp(24px, 8vw, 34px) !important; }
  .floor-display { font-size: clamp(26px, 9vw, 38px) !important; }

  /* narrow-phone tweak: slightly tighter inner padding on scrolljack tiles */
  .floor-tile { padding: 0 12px !important; }
  .floor-tile-info-body { font-size: 12.5px !important; }

  .mod-idx-title { font-size: 12.5px !important; }
  .mod-slide-title { font-size: 19px !important; }
  .mod-slide-desc { font-size: 14px !important; }

  .close-display { font-size: clamp(26px, 10vw, 36px) !important; }
  .t-title { font-size: clamp(20px, 6.5vw, 26px) !important; }
}