/* ============================================================
   Kit site.css overrides — applied AFTER site.css so they win
   without modifying the design system file. Targets React-port
   specific issues: hero-scoped frame, mobile drawer + responsive
   layout corrections the kit doesn't ship.
   ============================================================ */

/* ============================================================
   OLD HEADER RESTORATION — port the floating-notch + two-row
   instrument design from src/v2/Nav.tsx + TopStrip.tsx into the
   kit-chrome topbar. chrome.js now emits a `.tb-cockpit-strip`
   sub-row above `.topbar-inner` and toggles `[data-scrolled]` on
   the header itself once window.scrollY > 32. We:

     - At top of homepage (no [data-scrolled]): transparent
       background, no borders, no notch — same wash-through as
       the old v2 Hero (notch=false when isHome && !scrolled).
     - Once scrolled: solid `#080808`, 10px notch insets all
       around, vermillion top hairline border, hairline sides +
       bottom, sharp 0-radius, layered shadow recipe.

   The kit's tb-burger + tb-drawer (the "new drawer" the user
   asked us to keep) live INSIDE `.topbar-inner` and stay where
   they are.
   ============================================================ */
.topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  display: flex !important;
  flex-direction: column !important;
  transition: top 0.25s, left 0.25s, right 0.25s, background 0.25s, border-color 0.25s, box-shadow 0.2s ease !important;
}
.topbar[data-scrolled] {
  top: 10px !important;
  left: 10px !important;
  right: 10px !important;
  background: #080808 !important;
  border-top: 1px solid rgba(232,82,43,0.35) !important;
  border-left: 1px solid rgba(250,250,249,0.08) !important;
  border-right: 1px solid rgba(250,250,249,0.08) !important;
  border-bottom: 1px solid rgba(250,250,249,0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 16px 40px rgba(0,0,0,0.4),
    0 2px 8px rgba(0,0,0,0.3) !important;
}
/* When a SectionBanner is docked under the nav, add the extra
   downward projection shadow (matches old v2 src/Nav.tsx behaviour
   keyed off html[data-banner-docked]). */
html[data-banner-docked] .topbar[data-scrolled] {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 16px 40px rgba(0,0,0,0.4),
    0 2px 8px rgba(0,0,0,0.3),
    0 10px 20px -4px rgba(8,8,8,0.55),
    0 4px 8px rgba(8,8,8,0.35) !important;
}

/* ----- Cockpit sub-strip (mono instrument cells)
   v5 cream surface — white-ish bg with dark text. Reads as the
   instrument readout from src/v2/cockpit/TopStrip.tsx (which used
   `background: #edede8`). Solid regardless of scroll state. ----- */
.tb-cockpit-strip {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  height: 28px;
  border-bottom: 1px solid rgba(8,8,8,0.12);
  background: #FAFAF9;
  overflow: hidden;
}
.tb-cc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-right: 1px solid rgba(8,8,8,0.12);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(8,8,8,0.65);
  height: 100%;
  white-space: nowrap;
}
.tb-cc-pulse {
  width: 6px; height: 6px;
  background: #E8522B;
  display: inline-block; flex-shrink: 0;
  animation: tb-cc-pulse 1.6s ease-in-out infinite;
}
@keyframes tb-cc-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.tb-cc-bracket {
  justify-content: center;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(8,8,8,0.65);
}
.tb-cc-green {
  width: 5px; height: 5px;
  background: #16a34a;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(22,163,74,.15);
  display: inline-block;
}
.tb-cc-clock { border-right: none; color: #080808; }
.tb-cc-utc { color: rgba(8,8,8,0.45); }
@media (max-width: 640px) {
  .tb-cc-bracket { display: none !important; }
  .tb-cc { padding: 0 10px; font-size: 9px; letter-spacing: 0.10em; gap: 6px; }
}

/* ----- OLD NAV ROW — brand + nav links + CTA ----- */

/* Layout: flex, fixed height, max-width 1200, centered, side padding 16 */
.topbar > .topbar-inner {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 52px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  width: 100% !important;
}
@media (max-width: 640px) {
  .topbar > .topbar-inner { height: 48px !important; }
}

/* Brand: vermillion 5×5 spec dot + SVG logo. No "WAYPATH" text,
   no "// AGENT OS" subtitle. */
.brand-v2 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
/* ASCII sphere icon (replaces the orange-square spec dot + svg
   logo). Mirrors the AsciiStatus primitive from the platform repo. */
.brand-v2 .brand-ascii {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  flex-shrink: 0 !important;
}
/* Wordmark — uses the OLD site's Waypath SVG glyph
   (`/kit/assets/waypath-wordmark.svg`) as a CSS mask so the visible
   color comes from `background-color: currentColor`. That lets one
   SVG asset render as white on the notched dark header AND as dark
   on the transparent-at-top homepage state, no second file needed. */
.brand-v2 .brand-wordmark {
  display: inline-block !important;
  width: 90px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
  background-color: currentColor !important;
  -webkit-mask: url("/kit/assets/waypath-wordmark.svg") center / contain no-repeat !important;
  mask: url("/kit/assets/waypath-wordmark.svg") center / contain no-repeat !important;
  color: #FAFAF9 !important;
}
.topbar:not([data-scrolled]) .brand-v2 .brand-wordmark { color: #080808 !important; }

/* Nav links — DM Mono 9.5px uppercase, tight letterspacing. Lives
   between the ticker and Start Free CTA. */
.nav-v2 {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  flex-shrink: 0 !important;
}
.nav-v2 a {
  font-family: "DM Mono", ui-monospace, monospace !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(250,250,249,0.65) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  transition: color 0.2s !important;
}
.nav-v2 a:hover,
.nav-v2 a.active {
  color: #E8522B !important;
}
/* Transparent state (top of homepage, no [data-scrolled]): dark text. */
.topbar:not([data-scrolled]) .nav-v2 a { color: rgba(8,8,8,0.75) !important; }
.topbar:not([data-scrolled]) .nav-v2 a:hover,
.topbar:not([data-scrolled]) .nav-v2 a.active { color: #E8522B !important; }

/* tb-right: Start Free CTA + burger only. ops-pill, sign-in dropped. */
.topbar > .topbar-inner > .tb-right {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}
/* Start Free button — vermillion, DM Sans 700, sharp corners */
.tb-cta {
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: #FAFAF9 !important;
  background: #E8522B !important;
  padding: 6px 10px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  border-radius: 0 !important;
  border: none !important;
  white-space: nowrap !important;
  transition: background 160ms ease !important;
}
.tb-cta:hover { background: #c44420 !important; }
.tb-cta .glyph-arrow { font-size: 11px; line-height: 1; }

/* Portal-mounted ticker (BrandMarquee) appends as the last child
   of .topbar-inner. Use flex `order` to place it between brand and
   nav so the visual layout matches the OLD design. */
.topbar > .topbar-inner > .brand                   { order: 1; }
.topbar > .topbar-inner > .ticker.ticker-in-header { order: 2; }
.topbar > .topbar-inner > .nav                     { order: 3; }
.topbar > .topbar-inner > .tb-right                { order: 4; }

/* Ticker in header (now always, not just mobile) — flex 1, capped */
.topbar-inner > .ticker.ticker-in-header {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 480px !important;
  margin: 0 12px !important;
  border: none !important;
  border-left: 1px solid rgba(250,250,249,0.08) !important;
  border-right: 1px solid rgba(250,250,249,0.08) !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
}
.topbar:not([data-scrolled]) .topbar-inner > .ticker.ticker-in-header {
  border-left-color: rgba(8,8,8,0.12) !important;
  border-right-color: rgba(8,8,8,0.12) !important;
}
.topbar-inner > .ticker.ticker-in-header .ticker-track {
  padding: 0 !important;
  /* Match the kit's original ticker speed (site.css `animation:
     tickerScroll 60s linear infinite`). gap matches kit's 48px too
     so the per-row spacing reads consistent with the page ticker. */
  gap: 48px !important;
  animation-duration: 60s !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  color: rgba(250,250,249,0.55) !important;
}
.topbar:not([data-scrolled]) .topbar-inner > .ticker.ticker-in-header .ticker-track {
  color: rgba(8,8,8,0.6) !important;
}
.topbar-inner > .ticker.ticker-in-header .ticker-track b {
  color: #E8522B !important;
}
/* The (now-empty) #site-ticker slot below the header — hide it */
#site-ticker:empty { display: none !important; }

/* Hide kit's old chrome bits that we removed from the markup but
   may still be styled by the kit's CSS for descendant defaults. */
.topbar .ops-pill,
.topbar .tb-signin,
.topbar .brand-mark,
.topbar .brand-sub { display: none !important; }

/* Mobile: hide desktop nav links + cta in topbar (drawer carries them) */
@media (max-width: 1100px) {
  .topbar > .topbar-inner > .nav-v2 { display: none !important; }
}
@media (max-width: 640px) {
  .topbar > .topbar-inner > .tb-right > .tb-cta { display: none !important; }
}

/* Mobile: always notch (matches v2/Nav.tsx `isMobile => notch=true`).
   Overrides the kit's responsive .nav { display:none } media + the
   earlier mobile floating-pill rules elsewhere in this file. */
@media (max-width: 768px) {
  .topbar {
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    background: #080808 !important;
    border-top: 1px solid rgba(232,82,43,0.35) !important;
    border-left: 1px solid rgba(250,250,249,0.08) !important;
    border-right: 1px solid rgba(250,250,249,0.08) !important;
    border-bottom: 1px solid rgba(250,250,249,0.08) !important;
    border-radius: 0 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 16px 40px rgba(0,0,0,0.4),
      0 2px 8px rgba(0,0,0,0.3) !important;
  }
  /* Drawer flushes to bottom of the (now 0-radius) topbar */
  .tb-drawer:not([hidden]) {
    border-radius: 0 !important;
  }
  /* Body padding — OLD design uses 28 cockpit-strip + 48 nav-row +
     10 notch = 86, plus a small breathing buffer. */
  body { padding-top: 96px !important; }
}

/* ============================================================
   OLD SECTION BANNERS — vermillion sticky strips between sections
   on the home page. Mounted by mountSectionBanners() in
   src/components/kit/sectionBanners.ts; this file owns the visuals.

   Behavior: position: sticky inside the .v2-snap-section element so
   the strip pins to the nav bottom (top: 90) for the duration of
   the section's height, then un-pins as the next section scrolls in.
   Matches the OLD src/v2/cockpit/SectionBanner.tsx visual exactly:
   semi-transparent vermillion + backdrop blur, mono code on left,
   white tick row + meta on right, pulsing dot. Hairline borders top
   + sides match the nav's vermillion-on-dark border recipe.
   ============================================================ */
.v2-section-banner-sticky {
  position: sticky;
  /* 92 = 10 notch + 28 cockpit + 52 nav-row + ~2px borders.
     Tuned to sit flush with the header bottom (measured 92px). */
  top: 92px;
  z-index: 50;
  /* Match the header's exact horizontal footprint: header is
     position:fixed; left:10; right:10 → width = 100vw - 20px.
     The strip lives inside `.v2-snap-section` which often has
     horizontal padding (16px mobile, etc.) that would otherwise
     shrink it. Escape parent padding via the classic full-bleed
     calc — pulls left edge to viewport_left, then +10 to align
     with the header's 10px inset. */
  width: calc(100vw - 20px);
  margin-left: calc(50% - 50vw + 10px);
  margin-right: 0;
  pointer-events: none;
  /* GPU-promote so smooth-scroll (Lenis) doesn't re-rasterize the
     backdrop-filter every frame at subpixel-different positions.
     Without this the strip visibly shakes under the header during
     interpolated scroll. translateZ(0) forces a new compositor
     layer; will-change tells the browser to keep it promoted. */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}
.v2-section-banner {
  box-sizing: border-box;
  background: rgba(232,82,43,0.85);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  /* No top border — when docked under the nav, the strip should
     read as a continuous extension of the header (no double hairline).
     Inset highlight provides the visual seam without adding 1px. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 20px -4px rgba(0,0,0,0.35);
  color: #FAFAF9;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: none;
  border-left: 1px solid rgba(250,250,249,0.12);
  border-right: 1px solid rgba(250,250,249,0.12);
  pointer-events: auto;
}
.v2-sb-l { display: inline-flex; align-items: center; gap: 10px; }
.v2-sb-pulse {
  width: 6px; height: 6px;
  background: #FAFAF9;
  display: inline-block;
  animation: v2-sb-pulse 1.4s ease-in-out infinite;
}
@keyframes v2-sb-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.v2-sb-r { display: inline-flex; align-items: center; gap: 4px; opacity: 0.92; }
.v2-sb-tick {
  display: inline-block;
  width: 2px; height: 8px;
  background: rgba(250,250,249,0.6);
}
.v2-sb-tick.v2-sb-tick-mid { height: 12px; background: #FAFAF9; }
.v2-sb-meta { margin-left: 10px; }

/* ----- Tagged variant — strip hosts the kit's own .section-tag,
   moved out of the section to avoid a redundant title below the
   strip. The .section-tag visual is NOT restyled (kit owns it).
   Strip bg switches to dark so the kit's section-tag (vermillion
   num + dash, dim/white name) — designed for dark surfaces — reads
   as intended. */
.v2-section-banner-tagged {
  padding: 14px 22px !important;
  align-items: center;
  background: rgba(8,8,8,0.85) !important;
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-top: 1px solid rgba(232,82,43,0.35) !important;
  border-left: 1px solid rgba(250,250,249,0.08) !important;
  border-right: 1px solid rgba(250,250,249,0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 20px -4px rgba(0,0,0,0.4);
}
/* Layout-only override: kit's .section-tag has margin-bottom: 28px
   (designed to space it from the section body). Inside the strip
   it's the only child, so zero the margin so it doesn't bloat the
   strip height. Does NOT touch any visual design tokens. */
.v2-section-banner-tagged .section-tag {
  margin: 0 !important;
  width: 100%;
}

@media (max-width: 640px) {
  .v2-section-banner-tagged { padding: 12px 16px !important; }
}

@media (max-width: 640px) {
  /* 10 notch + 28 cockpit + 48 nav-row + 2px borders = 88 */
  .v2-section-banner-sticky { top: 88px; }
  .v2-section-banner {
    padding: 10px 14px;
    font-size: 10px;
    letter-spacing: 0.12em;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .v2-section-banner .v2-sb-tick { display: none; }
  .v2-sb-meta { margin-left: 0; }
  .v2-section-banner > span {
    white-space: nowrap;
    min-width: 0;
  }
  .v2-section-banner > span.v2-sb-r {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* FRAME — kit ships position:fixed (viewport-bracketing CCTV border).
   We move the .frame inside the hero (chrome.js injects there) and
   override the positioning so brackets bound the hero box and scroll
   away once the hero leaves the viewport. */
.frame {
  position: absolute !important;
  inset: 14px !important;
  height: auto !important;
}

/* ============================================================
   MOBILE DRAWER (kit-only addition for the React port)
   The kit's @media (max-width:1100px) hides .nav entirely with no
   replacement. We add a hamburger that opens a vertical drawer
   listing the same links, plus Sign-in / Start-free.
   ============================================================ */
/* ============================================================
   MOBILE DRAWER MICROINTERACTIONS
   ============================================================ */

.tb-burger {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--white);
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  border-radius: 4px;
  transition: border-color 200ms ease, background 200ms ease, transform 200ms cubic-bezier(0.34,1.56,0.64,1);
}
.tb-burger:hover {
  border-color: var(--orange);
  background: rgba(255,90,31,0.08);
}
.tb-burger:hover span { background: var(--orange); }
.tb-burger:active { transform: scale(0.94); }
.tb-burger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,90,31,0.55);
}
.tb-burger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--white);
  transition: transform 280ms cubic-bezier(0.34,1.56,0.64,1), opacity 180ms ease, background 200ms ease;
  transform-origin: center;
}
.tb-burger.open { border-color: var(--orange); background: rgba(255,90,31,0.12); }
.tb-burger.open span { background: var(--orange); }
.tb-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.tb-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.tb-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.tb-drawer {
  display: none;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(11,11,11,0.97);
  backdrop-filter: blur(12px);
  padding: 14px 16px 18px;
  /* Slide-down + fade-in opening animation */
  animation: tb-drawer-in 280ms cubic-bezier(0.25,0.1,0.25,1);
  transform-origin: top center;
}
@keyframes tb-drawer-in {
  0%   { opacity: 0; transform: translateY(-6px) scaleY(0.985); }
  100% { opacity: 1; transform: translateY(0)    scaleY(1); }
}
/* Restart entrance animation when drawer re-opens (toggled by JS) */
.tb-drawer-replay { animation-name: tb-drawer-in; }
.tb-drawer-replay .tb-drawer-inner > * { animation-name: tb-link-in; }
@media (prefers-reduced-motion: reduce) {
  .tb-drawer, .tb-drawer-inner > *, .tb-burger, .tb-burger span,
  .tb-drawer-inner a, .tb-drawer-inner .btn {
    animation: none !important;
    transition: none !important;
  }
}
.tb-drawer[hidden] { display: none !important; }
.tb-drawer-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tb-drawer-inner a {
  position: relative;
  display: flex;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242,239,230,0.55);
  padding: 12px 14px;
  border-left: 2px solid transparent;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, padding-left 220ms cubic-bezier(0.25,0.1,0.25,1);
  /* Staggered fade-up per item, driven by --i custom prop set in JS */
  opacity: 0;
  transform: translateY(6px);
  animation: tb-link-in 380ms cubic-bezier(0.25,0.1,0.25,1) forwards;
  animation-delay: calc(60ms + var(--i, 0) * 36ms);
}
@keyframes tb-link-in {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.tb-drawer-inner a::after {
  content: "→";
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--orange);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 200ms ease, transform 240ms cubic-bezier(0.34,1.56,0.64,1);
}
.tb-drawer-inner a:hover,
.tb-drawer-inner a:focus-visible {
  color: var(--white);
  background: rgba(255,90,31,0.06);
  border-left-color: var(--orange);
  padding-left: 18px;
  outline: none;
}
.tb-drawer-inner a:hover::after,
.tb-drawer-inner a:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}
.tb-drawer-inner a:active {
  background: rgba(255,90,31,0.12);
}
.tb-drawer-inner a.active {
  color: var(--orange);
  border-left-color: var(--orange);
  background: rgba(255,90,31,0.04);
}
.tb-drawer-inner a.active::after { opacity: 1; transform: translateX(0); }
.tb-drawer-inner .btn {
  align-self: stretch;
  justify-content: space-between;
  margin-top: 14px;
  animation: tb-link-in 420ms cubic-bezier(0.25,0.1,0.25,1) forwards;
  animation-delay: calc(60ms + var(--i, 0) * 36ms);
  opacity: 0;
  transition: transform 200ms cubic-bezier(0.34,1.56,0.64,1), box-shadow 200ms ease;
}
.tb-drawer-inner .btn:hover {
  transform: translateY(-2px);
  box-shadow: 4px 4px 0 0 var(--ink-3);
}
.tb-drawer-inner .btn.ghost:hover {
  transform: translateY(-2px);
  box-shadow: none;
}

/* ============================================================
   MOBILE — < 768px
   ============================================================ */
@media (max-width: 768px) {
  /* MOBILE TOPBAR — OLD-design floating notch, sharp 0-radius. The
     v5 floating-pill design was rolled back per user request; the
     OLD HEADER RESTORATION block at the top of this file owns the
     primary styling. These rules just keep the kit's mobile-only
     concerns (drawer visibility, burger display) tidy. */
  .tb-right { gap: 8px !important; }
  .tb-burger { display: inline-flex !important; }
  .tb-drawer:not([hidden]) {
    display: block !important;
    border-radius: 0 !important;
    background: rgba(8,8,8,0.96) !important;
  }
  .brand { font-size: 15px !important; gap: 6px !important; }
  .brand-sub { display: none !important; }

  /* Mobile ticker-in-header tuning — keep the kit's 60s animation
     speed; just trim the gap a touch and shrink the font slightly. */
  .topbar-inner > .ticker.ticker-in-header {
    margin: 0 8px !important;
    height: 28px !important;
  }
  .topbar-inner > .ticker.ticker-in-header .ticker-track {
    gap: 32px !important;
    animation-duration: 60s !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
  }

  /* Page padding caps */
  section { padding: 28px 16px !important; }

  /* Headlines — pull min sizes down so they fit a 360-390 viewport.
     The kit uses page-specific class names (.h-title, .pr-head h1,
     .blg-head h1, etc.) on top of the generic .h1 / .h-poster. We
     sweep them all + the bare h1/h2/h3 elements as a safety net. */
  .h-poster,
  .h-title,
  .pr-head h1, .ft-head h1, .fp-head h1, .blg-head h1,
  .agents-head h1, .agt-head h1, .cl-head h1, .su-l h1,
  .ag-head h1, .pl-head h1, .inv-head h1, .signin-head h1,
  .sup-head h1, .sys-head h1, .sm-head h1,
  body h1 {
    font-size: clamp(38px, 11vw, 60px) !important;
    line-height: .92 !important;
    letter-spacing: -.02em !important;
  }
  .h1 { font-size: clamp(34px, 10vw, 52px) !important; line-height: .92 !important; }
  .h2, body h2 { font-size: clamp(24px, 7.5vw, 38px) !important; line-height: .96 !important; }
  .h3, body h3 { font-size: clamp(18px, 5vw, 26px)   !important; line-height: 1   !important; }
  .h4, body h4 { font-size: 18px !important; }
  .lede        { font-size: 15.5px !important; }
  p, .label    { font-size: 13.5px !important; }
  /* Stamp / orange-fill in hero h-title can ride 1-2px smaller for fit */
  .h-title .stamp { font-size: 9px !important; right: -6px !important; padding: 4px 6px !important; }

  /* Hero — single column, kill the 460px right rail */
  .hero { padding: 24px 16px 36px !important; min-height: auto !important; }
  .hero-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .hero-eyebrow { gap: 12px !important; margin-bottom: 16px !important; }

  /* Page heads — keep them 1-column */
  .page-head .container,
  .pr-head .container,
  .fp-head .container,
  .blg-head .container,
  .pl-head .container,
  .agt-head .container { grid-template-columns: 1fr !important; gap: 24px !important; }
  .pr-head, .fp-head, .blg-head, .pl-head, .agt-head { padding: 56px 16px 20px !important; min-height: auto !important; }

  /* Generic grids → 1 column. Sweep covers kit's section-level grids
     (feature, pricing, blog, footer, etc.) AND the homepage product /
     PMF / about / flow grids that have their own names. */
  .grid-2, .grid-3, .grid-4,
  .price-grid, .blg-grid, .fp-grid,
  .kpi-strip, .feature-grid, .col-4, .col-3, .col-2,
  .feat-grid, .pc-grid, .pmf-grid, .about-grid,
  .product-console, .product-split,
  .flow, .journey, .scores, .feat-row {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-auto-rows: auto !important;
    min-height: auto !important;
  }
  /* Reset any `grid-column / grid-row` spans on cards so the featured
     card in .feat-grid doesn't try to span 2 rows on a 1-col grid. */
  .feat,
  .feat.featured,
  .pmf > *,
  .feat-grid > * {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  /* Feature card padding tighter on mobile + smaller featured h4 */
  .feat { padding: 18px !important; }
  .feat.featured h4 { font-size: clamp(34px, 10vw, 48px) !important; }
  .feat h4 { font-size: clamp(26px, 8vw, 38px) !important; }
  /* Product console / pmf-grid / about-grid inner padding */
  .product-console, .pmf-grid, .about-grid { gap: 16px !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .closing { margin: 24px -16px -24px !important; padding: 40px 18px 28px !important; }
  .frame { inset: 8px !important; }

  /* Ticker — kit's marquee is fine; just make sure it stays single-row */
  .ticker { overflow: hidden; }
  .ticker-track { gap: 14px !important; padding: 0 14px !important; }

  /* Cookie consent — clamp to viewport so the 380px panel doesn't
     punch out the right side. Sit above the chat launcher so the two
     don't fight for the bottom-right corner. */
  .wp-cookie-banner {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    bottom: 68px !important; /* clear the CHAT pill */
    padding: 14px 14px 12px !important;
    box-sizing: border-box !important;
  }
  /* Cookie buttons: stack so PREFERENCES doesn't clip */
  .wp-cookie-banner > div:last-child { flex-wrap: wrap !important; gap: 6px !important; }
  .wp-cookie-banner button {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 10px !important;
    padding: 8px 10px !important;
    letter-spacing: 0.1em !important;
  }
  .wp-cookie-widget { left: 14px !important; bottom: 14px !important; }

  /* The previous WaypathAgent mock is unmounted; CrispLauncher now
     ships its own v5-spec mobile drawer (bottom 12 / left 8 / right 8
     / 16px radius, all 4 corners, height 60vh) — no override needed.
     If WaypathAgent ever returns, hide it here. */
  .wp-agent-panel, .wp-agent-launcher { display: none !important; }

  /* Buttons — bigger tap targets */
  .btn { padding: 10px 12px !important; font-size: 11px !important; }
  .btn.ghost { padding: 9px 12px !important; }

  /* ASCII fields — the kit anchors masks to 30%/50% horizontal which
     on narrow viewports squeezes the field into the left edge. Center
     the mask and shrink the falloff so the field reads as a full
     backdrop. Also kill the desktop offset hack on the hero canvas
     (handled in ascii-engine.js too — this is the CSS safety net). */
  .section-ascii {
    mask-image: radial-gradient(circle at 50% 50%, black 0%, black 55%, transparent 95%) !important;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 0%, black 55%, transparent 95%) !important;
  }
  .ascii-bg-host > .micro-ascii {
    inset: -8px !important;
    mask-image: radial-gradient(ellipse at 50% 50%, black, transparent 85%) !important;
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black, transparent 85%) !important;
  }
  .hero-ascii-bg { opacity: .55 !important; }

  /* Generic safety nets — anything image/iframe/video that exceeds
     viewport width gets capped. Canvas explicitly EXCLUDED — kit
     hero canvases use `position: absolute; inset: 0` to full-bleed
     the section background, and `height: auto` collapses them to
     their intrinsic 300x150 default. Was breaking the hero ASCII
     on every page beyond /, same root cause as the home-hero fix
     in mobile-hero-ascii.css. */
  img, svg, iframe, video, table { max-width: 100% !important; height: auto !important; }
  table { display: block; overflow-x: auto; }
  pre, code { white-space: pre-wrap !important; word-break: break-word !important; }

  /* Agents page .mcp box ships margin:32 40px + 32px padding which
     overflows narrow viewports. Pull margins/padding in. */
  .mcp {
    margin: 24px 16px !important;
    grid-template-columns: 1fr !important;
  }
  .mcp-l, .mcp-r { padding: 18px !important; }
  .mcp-r { border-left: none !important; border-top: 1px solid var(--line) !important; }

  /* Page-specific containers that ship large desktop margins/padding
     and still overflow narrow viewports after the generic rules. */
  .subscribe {
    margin: 28px 16px !important;
    padding: 20px !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .subscribe form { flex-wrap: wrap !important; gap: 10px !important; }
  .subscribe input { min-width: 0 !important; width: 100% !important; }
  .subscribe button { width: 100% !important; }

  /* Feature post / blog cards — fully fluid */
  .feature-post,
  .blg-grid > .post,
  .post.featured-block { grid-template-columns: 1fr !important; }
  .fp-l, .fp-r { padding: 16px !important; }

  /* Pricing tier ribbon overflow */
  .tier { padding: 18px 14px 20px !important; }
  .tier .pr { font-size: 48px !important; }

  /* Matrix table on pricing overflows horizontally — already overflow:auto
     in kit, but reduce min-width so it doesn't stretch viewport. */
  .matrix table { min-width: 0 !important; font-size: 11px !important; }
  .matrix th, .matrix td { padding: 10px 12px !important; }

  /* Form rows — let inputs shrink with viewport */
  input, textarea, select, button { max-width: 100% !important; }
  .field-row, .form-row { grid-template-columns: 1fr !important; }

  /* Universal: any element with hardcoded margin > viewport-share gets
     a sane left/right margin cap. Catches per-page sections that ship
     `margin: 48px 40px` style. Exempt the sticky section banner —
     it intentionally exceeds the section's content box to span the
     viewport (minus header insets). */
  section > *:not(.v2-section-banner-sticky),
  main > *:not(.v2-section-banner-sticky) { max-width: 100% !important; }
}

/* Tablet — between 768 and 1100 — keep desktop nav hidden (kit
   already does this) but tighten padding so dense pages don't blow
   out. */
@media (min-width: 769px) and (max-width: 1100px) {
  .topbar-inner { grid-template-columns: 1fr auto !important; }
  .tb-burger { display: inline-flex !important; }
  .tb-drawer:not([hidden]) { display: block !important; }
  section { padding: 48px 24px !important; }
}