/* ============================================================
   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.
   ============================================================ */

/* About-section founder portrait — replaces the kit's diagonal-stripe
   placeholder background + "FOUNDER · PORTRAIT 1200x960" ::before
   text label with the real Michael Sylvester portrait. */
.qc-shot.qc-shot-img {
  background: #080808 !important;
  padding: 0 !important;
  overflow: hidden;
}
.qc-shot.qc-shot-img::before { content: none !important; }
.qc-shot.qc-shot-img { position: relative; }
.qc-shot.qc-shot-img picture,
.qc-shot.qc-shot-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Black & white — editorial photo treatment that matches the
     kit's industrial / instrument visual register and stops the
     portrait from competing with the single vermillion accent. */
  filter: grayscale(100%) contrast(1.05);
  -webkit-filter: grayscale(100%) contrast(1.05);
}
/* Film-grain overlay — SVG fractalNoise data URI tiled over the
   portrait, blended in via overlay so highlights stay bright and
   shadows take the grain. Matches the kit's "industrial print"
   register without needing a raster noise asset. */
.qc-shot.qc-shot-img::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  opacity: 0.45;
  mix-blend-mode: overlay;
}

/* ============================================================
   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: var(--white, #f2efe6);
  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: var(--f-mono), "JetBrains 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, FULL WIDTH (no 1200 cap). The
   topbar's outer card spans viewport - 20px (10px insets); the
   nav row stretches to fill that, so the dark bg reaches both
   edges of the floating header instead of being a centered island
   with hero content visible on either side. */
.topbar > .topbar-inner {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 52px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 24px !important;
  width: 100% !important;
}
@media (max-width: 640px) {
  .topbar > .topbar-inner { height: 48px !important; padding: 0 14px !important; }
}

/* Brand: vermillion 5×5 spec dot + SVG logo. No "WAYPATH" text,
   no "// ORCHESTRATOR" 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?v=uncropped-20260603") center / contain no-repeat !important;
  mask: url("/kit/assets/waypath-wordmark.svg?v=uncropped-20260603") center / contain no-repeat !important;
  color: #FAFAF9 !important;
}
/* Nav row is now always solid dark, so brand wordmark stays cream
   in every state (dropped the dark-text-on-transparent rule). */

/* 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: var(--f-mono), "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(250,250,249,0.88) !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;
}
/* (Removed `.topbar:not([data-scrolled]) .nav-v2 a { color: dark }`
   rule — the nav row is now always solid `#080808`, so nav links
   stay cream `rgba(250,250,249,0.88)` in every state, not flipped
   to dark when at top of page.) */

/* 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, JetBrains Mono, kit's notched
   chamfer (bottom-right corner clipped — the brand signature on
   filled-orange buttons that the kit applies to .btn). */
.tb-cta {
  font-family: var(--f-mono), "JetBrains Mono", monospace !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: #FAFAF9 !important;
  background: var(--orange, #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;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%) !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 fills the MIDDLE — grows to claim all available space
   between the brand on the left and the nav+CTA cluster on the
   right. Dropped the 480px cap. */
.topbar-inner > .ticker.ticker-in-header {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 20px !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;
}
/* (Removed dark-on-light border-color override on the ticker — the
   nav row is now always solid dark, so the ticker's hairline
   dividers stay light always.) */
.topbar-inner > .ticker.ticker-in-header .ticker-track {
  padding: 0 !important;
  /* Kit's original ticker speed (60s) preserved. Tighter gap +
     letter-spacing so the text doesn't read airy/disjointed at
     the header scale. Force-win the kit's per-page Waypath.css
     which sets `.ticker-track { gap: 48px }` at low specificity
     but loads AFTER us via KitPage's <style data-kit-page>. */
  gap: 14px !important;
  animation-duration: 60s !important;
  font-size: 11px !important;
  letter-spacing: 0.02em !important;
  color: rgba(250,250,249,0.78) !important;
}
/* Belt + suspenders — bump selector specificity higher so per-page
   CSS can never overpower us, and zero margins on the inline <b>
   tags so word-spacing inside the anchor reads as plain prose. */
body .topbar.topbar .topbar-inner > .ticker.ticker-in-header .ticker-track {
  gap: 14px !important;
}
.topbar-inner > .ticker.ticker-in-header .ticker-track > a {
  margin: 0 !important;
  padding: 0 !important;
  word-spacing: normal !important;
}
.topbar-inner > .ticker.ticker-in-header .ticker-track > a > b {
  margin: 0 !important;
  padding: 0 !important;
}
/* Kit ships `.ticker-track span::after { content:"//"; margin-left:48px }`
   on plain spans. Our anchor uses <b> not <span> so it shouldn't fire,
   but neutralize in case someone wraps the marquee differently. */
.topbar-inner > .ticker.ticker-in-header .ticker-track *::after {
  content: none !important;
  margin: 0 !important;
}
/* (Removed dark text override on the ticker for unscrolled state —
   nav row is solid dark always, so the ticker text stays cream
   rgba(250,250,249,0.78) in every state.) */
.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: 14px !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;
  }

  .tb-drawer:not([hidden]) {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 12px !important;
    border-radius: 16px !important;
    overflow: hidden !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; }
}

/* Desktop body padding — the header is position:fixed with the
   marquee integrated into the first header row, so it takes 0px
   in document flow. Push the hero down JUST enough to clear the
   floating nav row (~52px nav + ~10px notch top + small buffer)
   without producing an awkward big gap. */
@media (min-width: 769px) {
  body { padding-top: 72px !important; }
}

/* Nav row ALWAYS has a solid dark fill — at top of page AND when
   docked. Without this, the topbar's outer `background:transparent`
   (top-of-homepage state) lets the hero ASCII + page grid lines
   bleed through under the brand/marquee/nav/CTA row. */
.topbar > .topbar-inner {
  background: #080808 !important;
}

/* Desktop nav visibility — kit's site.css ships
   `@media (max-width:1100px) { .nav { display: none } }` to swap to
   the mobile drawer. Our `.nav.nav-v2` is the SAME element with an
   added class, so that rule kills it on every viewport ≤1100px.
   Force it visible from 769px up so laptop-class desktops (1024,
   1152, 1280, 1366) still see PRODUCT/01 / AGENTS/02 / FEATURES/03
   / PRICING/04 / BLOG/05 / DOCS/08. The mobile drawer remains the
   nav at ≤768. */
@media (min-width: 769px) {
  .topbar > .topbar-inner > .nav.nav-v2 {
    display: flex !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 measured nav bottom 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;
  /* JS keeps this synced to the fixed header's measured bottom. */
  top: var(--wp-section-banner-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(var(--wp-layout-viewport-width, 100vw) - 20px);
  margin-left: calc(50% - var(--wp-layout-viewport-half, 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: var(--f-mono), "JetBrains 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;
  min-height: 34px;
  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: 5px 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%;
  min-height: 28px;
  gap: 12px !important;
}
.v2-section-banner-tagged .section-tag .dash {
  flex-basis: 48px !important;
}
.v2-section-banner-tagged .section-tag .num {
  font-size: 26px !important;
  line-height: 1 !important;
}
.v2-section-banner-tagged .section-tag .name {
  font-size: 10px !important;
  letter-spacing: 0.20em !important;
}

@media (max-width: 640px) {
  .v2-section-banner-tagged { padding: 5px 14px !important; }
  .v2-section-banner-tagged .section-tag .dash { flex-basis: 32px !important; }
  .v2-section-banner-tagged .section-tag .num { font-size: 24px !important; }
  .v2-section-banner-tagged .section-tag .name { font-size: 9px !important; letter-spacing: 0.16em !important; }
}

@media (max-width: 640px) {
  .v2-section-banner-sticky { top: var(--wp-section-banner-top, 88px); }
  .v2-section-banner {
    padding: 7px 14px;
    min-height: 32px;
    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: 16px !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; }
}

/* ----- Arrow glyphs — replace the ↗ unicode char (emojified on
   iOS / Android even with U+FE0E + font-variant-emoji) with a real
   SVG mask. Pure CSS override — no HTML edits. font-size:0 hides
   the unicode char, ::before renders the monoline NE arrow via
   mask-image filled with currentColor (so the chip's existing
   color rules — orange-on-ink for solid btn, ink-on-orange for
   ghost — still apply automatically). */
.glyph-arrow {
  font-size: 0 !important;
  line-height: 0 !important;
  position: relative;
}
.glyph-arrow::before {
  content: "";
  display: block;
  width: 60%;
  height: 60%;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="black" stroke-width="2.25" stroke-linecap="square"><path d="M4.5 11.5L11.5 4.5M5.5 4.5h6v6"/></svg>') no-repeat center / contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="black" stroke-width="2.25" stroke-linecap="square"><path d="M4.5 11.5L11.5 4.5M5.5 4.5h6v6"/></svg>') no-repeat center / contain;
}

/* .big-arrow — used in CTA row, kit renders as huge display text.
   Same SVG mask, no font-size:0 needed since there's no chip box —
   we set the size explicitly. */
.big-arrow {
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  font-size: 42px;
  line-height: 1;
  color: transparent;
  background-color: var(--ink, #080808);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="black" stroke-width="1.75" stroke-linecap="square"><path d="M4.5 11.5L11.5 4.5M5.5 4.5h6v6"/></svg>') no-repeat center / contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="black" stroke-width="1.75" stroke-linecap="square"><path d="M4.5 11.5L11.5 4.5M5.5 4.5h6v6"/></svg>') no-repeat center / contain;
}

/* ----- Mobile section-tag layout — keep dash + number + details on
   one row. The home section labels are short enough to stay together
   if the mobile strip uses tighter spacing instead of stacking .name. */
@media (max-width: 640px) {
  .section-tag {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 20px !important;
  }
  .section-tag .dash {
    flex: 0 0 14px !important;
  }
  .section-tag .num {
    flex: 0 0 auto !important;
    font-size: clamp(18px, 5vw, 22px) !important;
  }
  .section-tag .name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: clamp(12px, 3vw, 14px) !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    margin-left: 0 !important;
  }
  .v2-section-banner-tagged .section-tag {
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }
  .v2-section-banner-tagged .section-tag .dash {
    flex-basis: 14px !important;
  }
  .v2-section-banner-tagged .section-tag .num {
    font-size: clamp(18px, 5vw, 22px) !important;
  }
  .v2-section-banner-tagged .section-tag .name {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: clamp(12px, 3vw, 14px) !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
  }

  /* ----- Section 08 "Get Started" .cta-row — kit uses flex
     justify-content:space-between with 4 items (UNIT · WAYPATH,
     decorative big-arrow, Start Free button, NYC · 2026). At 390px
     this distributes unevenly because the button is wider than the
     spans. Stack vertically + center; drop the decorative arrow
     since the button already carries one. */
  section#start .cta-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    text-align: center;
    padding-top: 22px;
  }
  section#start .cta-row .big-arrow {
    display: none !important;
  }
  section#start .cta-row .cta-btn {
    width: auto;
    align-self: center;
  }

  /* ----- PMF reality-list (.rl) chip placement on mobile. Kit
     mobile rule sets grid-template-columns:30px 1fr 70px and gives
     .why grid-column:1/-1 (wraps to row 2). But .tag follows .why
     in source order with auto placement, so it lands on row 3 col 1
     instead of row 1 col 3 — leaves the chip floating below the
     copy, hanging off the card. Pin it to row 1 col 3 explicitly. */
  .rl {
    grid-template-rows: auto auto !important;
    row-gap: 6px;
  }
  .rl .tag {
    grid-column: 3 / 4 !important;
    grid-row: 1 / 2 !important;
    align-self: center;
    justify-self: end !important;
  }
  /* .why already spans 1/-1 from the kit's own mobile rule */
}

/* ----- /blog/:slug article shell. Kit's blog.css only covers the
   index (head + feature + grid + subscribe). Single-post layout
   adapted from the docs.css typography pattern, scoped to .blg-article
   so it doesn't leak into the index. */
.blg-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 40px 24px;
}
.blg-article-head {
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.blg-article-head .page-eyebrow {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.blg-article-head .page-eyebrow .badge {
  text-decoration: none;
}
.blg-article-head h1 {
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(48px, 6.5vw, 96px);
  line-height: 0.88;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--white);
}
.blg-article-head h1 em {
  font-style: normal;
  color: var(--orange);
}
.blg-article-head .lede {
  font-family: var(--f-sans);
  font-size: 19px;
  line-height: 1.55;
  color: var(--paper);
  margin: 0 0 24px;
  max-width: 64ch;
}
.blg-article-head .meta {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.blg-article-head .meta b {
  color: var(--white);
  font-weight: 700;
}
.blg-body {
  font-family: var(--f-sans);
}
.blg-body h2 {
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 48px 0 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--white);
}
.blg-body h2:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.blg-body p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--paper);
  margin: 0 0 18px;
  max-width: 68ch;
}
.blg-body p b,
.blg-body p strong {
  color: var(--orange);
  font-weight: 600;
}
.blg-body ul {
  padding-left: 18px;
  margin: 0 0 22px;
  max-width: 68ch;
}
.blg-body ul li {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--paper);
  margin-bottom: 8px;
  list-style: none;
  position: relative;
}
.blg-body ul li::before {
  content: "+";
  color: var(--orange);
  position: absolute;
  left: -16px;
  font-weight: 700;
  font-family: var(--f-mono);
}
.blg-callout {
  border-left: 3px solid var(--orange);
  background: rgba(255, 90, 31, 0.05);
  padding: 18px 24px;
  margin: 24px 0;
  max-width: 68ch;
}
.blg-callout p {
  font-family: var(--f-mono);
  font-size: 14px;
  line-height: 1.7;
  color: var(--paper);
  margin: 0;
  letter-spacing: 0.02em;
}
.blg-callout cite {
  display: block;
  margin-top: 10px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  font-style: normal;
}

@media (max-width: 640px) {
  .blg-article {
    padding: 40px 18px 16px;
  }
  .blg-article-head h1 {
    font-size: clamp(36px, 10vw, 56px);
  }
  .blg-article-head .lede {
    font-size: 16px;
  }
  .blg-body p {
    font-size: 15.5px;
  }
  .blg-body h2 {
    font-size: clamp(24px, 7vw, 32px);
    margin-top: 36px;
  }
}

/* ============================================================
   Light website skin
   Default marketing theme: cream-white, friendlier sage panels,
   dark text, and vermillion used as a sharp accent.
   ============================================================ */
body.wp-light-site {
  --ink: #fafaf9;
  --ink-2: #fffdf8;
  --ink-3: #eef4ed;
  --line: rgba(18, 24, 20, 0.13);
  --paper: #252821;
  --paper-2: #5b6258;
  --white: #0d100c;
  --orange: #e8522b;
  --orange-2: #c94724;
  --orange-3: #ff7348;
  --signal: #e8522b;
  --grid: rgba(18, 24, 20, 0.045);
  --grid-strong: rgba(18, 24, 20, 0.10);
  --dim: rgba(18, 24, 20, 0.52);
  --wp-sage: #edf3ec;
  --wp-paper-bg: #fafaf9;
  --wp-white: #fafaf9;
  --wp-dark: #0d100c;

  background:
    linear-gradient(rgba(18,24,20,.045) 1px, transparent 1px) 0 0 / 72px 72px fixed,
    linear-gradient(90deg, rgba(18,24,20,.045) 1px, transparent 1px) 0 0 / 72px 72px fixed,
    radial-gradient(900px 480px at 82% -10%, rgba(232,82,43,.08), transparent 62%) fixed,
    radial-gradient(780px 420px at -10% 24%, rgba(226,232,228,.95), transparent 66%) fixed,
    #fafaf9 !important;

  color: var(--white) !important;
}

body.wp-light-site::after {
  opacity: 0.12 !important;
  mix-blend-mode: multiply !important;
}

body.wp-light-site p,
body.wp-light-site .lede,
body.wp-light-site .blg-body p {
  color: var(--paper) !important;
}

body.wp-light-site .label,
body.wp-light-site .mono,
body.wp-light-site .stub,
body.wp-light-site .ft-eyebrow,
body.wp-light-site .meta,
body.wp-light-site .name,
body.wp-light-site .tier-id,
body.wp-light-site .tier-cap,
body.wp-light-site .cadence,
body.wp-light-site .role,
body.wp-light-site .ac-role,
body.wp-light-site .qc-name,
body.wp-light-site .qc-loc {
  color: var(--dim) !important;
}

body.wp-light-site .h1,
body.wp-light-site .h2,
body.wp-light-site .h3,
body.wp-light-site .h4,
body.wp-light-site .h-title,
body.wp-light-site .price-head,
body.wp-light-site .about-head,
body.wp-light-site .pmf-head,
body.wp-light-site .ac-name,
body.wp-light-site .feat h4,
body.wp-light-site .tier h5,
body.wp-light-site .post h3,
body.wp-light-site .blg-article-head h1,
body.wp-light-site .blg-body h2,
body.wp-light-site .section-tag .name b,
body.wp-light-site .pc-frame-head .ws,
body.wp-light-site .cl-tag-stack b {
  color: var(--white) !important;
}

body.wp-light-site .h-title .ink-fill,
body.wp-light-site .agents-head h1 em {
  color: transparent !important;
  -webkit-text-stroke-color: var(--white) !important;
}

body.wp-light-site .frame {
  border-color: rgba(18,24,20,.13) !important;
}

body.wp-light-site .corner,
body.wp-light-site .surveyed::before,
body.wp-light-site .surveyed::after,
body.wp-light-site .surveyed > .c-tr,
body.wp-light-site .surveyed > .c-bl,
body.wp-light-site .hv-crosshair span,
body.wp-light-site .cl-corner {
  border-color: rgba(232,82,43,.7) !important;
}

body.wp-light-site .kanji {
  -webkit-text-stroke-color: rgba(232,82,43,.16) !important;
}

body.wp-light-site .hero-ascii-bg,
body.wp-light-site .section-ascii,
body.wp-light-site canvas.micro-ascii,
body.wp-light-site #hero-ascii {
  filter: none !important;
  mix-blend-mode: multiply !important;
  opacity: 0.42 !important;
}

body.wp-light-site .ascii-bg-host > .micro-ascii {
  opacity: 0.32 !important;
}

body.wp-light-site .topbar,
body.wp-light-site .topbar[data-scrolled] {
  background: #080808 !important;
  border: 1px solid rgba(250,250,249,.12) !important;
  box-shadow:
    0 18px 48px rgba(18,24,20,.18),
    inset 0 1px 0 rgba(250,250,249,.08) !important;
}

body.wp-light-site .topbar > .topbar-inner {
  background: #080808 !important;
}

body.wp-light-site .tb-cockpit-strip {
  background: #0d0d0d !important;
  border-bottom-color: rgba(250,250,249,.10) !important;
}

body.wp-light-site .tb-cc,
body.wp-light-site .tb-cc-bracket {
  color: rgba(250,250,249,.56) !important;
  border-right-color: rgba(250,250,249,.12) !important;
}

body.wp-light-site .tb-cc-clock {
  color: #fafaf9 !important;
}

body.wp-light-site .brand-v2 .brand-wordmark {
  color: #fafaf9 !important;
}

body.wp-light-site .nav-v2 a,
body.wp-light-site .topbar-inner > .ticker.ticker-in-header .ticker-track {
  color: rgba(250,250,249,.72) !important;
}

body.wp-light-site .nav-v2 a:hover,
body.wp-light-site .nav-v2 a.active,
body.wp-light-site .topbar-inner > .ticker.ticker-in-header .ticker-track b {
  color: var(--orange) !important;
}

body.wp-light-site .topbar-inner > .ticker.ticker-in-header {
  border-left-color: rgba(250,250,249,.10) !important;
  border-right-color: rgba(250,250,249,.10) !important;
}

body.wp-light-site .tb-cta,
body.wp-light-site .btn {
  background: var(--orange) !important;
  color: #fffdf8 !important;
  box-shadow: none !important;
}

body.wp-light-site .tb-cta:hover,
body.wp-light-site .btn:hover {
  background: var(--orange-2) !important;
  transform: translateY(-1px) !important;
}

body.wp-light-site .btn.ghost {
  background: rgba(255,253,248,.72) !important;
  color: var(--white) !important;
  border: 1px solid rgba(18,24,20,.16) !important;
}

body.wp-light-site .btn.ghost:hover {
  color: var(--orange) !important;
  border-color: rgba(232,82,43,.48) !important;
  background: rgba(232,82,43,.08) !important;
}

body.wp-light-site .glyph-arrow,
body.wp-light-site .btn .glyph-arrow {
  background: rgba(13,16,12,.10) !important;
  color: currentcolor !important;
}

body.wp-light-site .tb-burger {
  border-color: rgba(18,24,20,.16) !important;
  background: rgba(255,253,248,.76) !important;
}

body.wp-light-site .tb-burger span {
  background: #0d100c !important;
}

body.wp-light-site .tb-drawer:not([hidden]) {
  background: rgba(250,250,249,.98) !important;
  border-top: 1px solid rgba(18,24,20,.12) !important;
}

body.wp-light-site .tb-drawer-inner a {
  color: var(--white) !important;
  border-left-color: rgba(18,24,20,.12) !important;
}

body.wp-light-site .badge,
body.wp-light-site .chip,
body.wp-light-site .int-chip,
body.wp-light-site .tag,
body.wp-light-site .ac-status {
  background: rgba(255,253,248,.76) !important;
  border-color: rgba(18,24,20,.14) !important;
  color: rgba(18,24,20,.70) !important;
}

body.wp-light-site .badge.live,
body.wp-light-site .chip.on,
body.wp-light-site .rl.signal .tag,
body.wp-light-site .ac-status {
  color: var(--orange) !important;
  border-color: rgba(232,82,43,.45) !important;
  background: rgba(232,82,43,.08) !important;
}

body.wp-light-site :is(
  .card,
  .tier,
  .feat,
  .flow-card,
  .quote-card,
  .pc-frame,
  .pc-tile,
  .product-console,
  .pmf-body,
  .reality-list,
  .feature-post,
  .post,
  .subscribe,
  .matrix,
  .compare,
  .agent-card,
  .mcp,
  .mcp-l,
  .faq-list,
  .code,
  .terminal,
  .tbl,
  .blg-callout
) {
  background: rgba(255,253,248,.82) !important;
  border-color: rgba(18,24,20,.13) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.92) inset,
    0 18px 56px rgba(18,24,20,.06) !important;
}

body.wp-light-site :is(.tier, .feat, .flow-card, .quote-card, .pc-frame, .pc-tile, .post, .agent-card, .mcp, .feature-post) {
  overflow: hidden;
}

body.wp-light-site :is(
  .hero-visual,
  .hv-frame,
  .hv-terminal,
  .pc-frame-head,
  .pc-frame-foot,
  .pc-tile-img,
  .feat-viz,
  .fp-l,
  .ac-glyph,
  .ac-side,
  .mcp-r,
  .code-head,
  .matrix th,
  .matrix tr.section-row td,
  .compare-head
) {
  background: #edf3ec !important;
  border-color: rgba(18,24,20,.13) !important;
  color: var(--paper) !important;
}

body.wp-light-site .feat-viz [style*="background:#000"],
body.wp-light-site .feat-viz [style*="background: #000"],
body.wp-light-site .cnsl-shot {
  background: #111611 !important;
}

body.wp-light-site .cnsl-shot {
  border-color: rgba(18,24,20,.14) !important;
  box-shadow: 0 28px 72px rgba(18,24,20,.12) !important;
  overflow: hidden !important;
}

body.wp-light-site .pc-frame:hover,
body.wp-light-site .pc-tile:hover,
body.wp-light-site .post:hover,
body.wp-light-site .tier:hover {
  border-color: rgba(232,82,43,.50) !important;
}

body.wp-light-site .kpi-strip {
  background: #edf3ec !important;
  color: var(--white) !important;
  border-color: rgba(18,24,20,.14) !important;
}

body.wp-light-site .kpi {
  border-right-color: rgba(18,24,20,.12) !important;
}

body.wp-light-site .kpi .v,
body.wp-light-site .kpi .d,
body.wp-light-site .kpi .k {
  color: var(--white) !important;
}

body.wp-light-site .pmf-grid,
body.wp-light-site .about-grid,
body.wp-light-site .about-cols {
  gap: 24px !important;
}

body.wp-light-site .ascii-bg-host {
  background: #edf3ec !important;
  border: 1px solid rgba(18,24,20,.12) !important;
  padding: clamp(24px, 4vw, 52px) !important;
  overflow: hidden !important;
}

body.wp-light-site .rl,
body.wp-light-site .rl-head,
body.wp-light-site .q,
body.wp-light-site .compare-row,
body.wp-light-site .matrix th,
body.wp-light-site .matrix td,
body.wp-light-site .tier-top,
body.wp-light-site .tier-pr,
body.wp-light-site .tier li,
body.wp-light-site .feat .meta,
body.wp-light-site .ac-meta,
body.wp-light-site .about-points,
body.wp-light-site .ap,
body.wp-light-site .fp-r .by,
body.wp-light-site .post .by {
  border-color: rgba(18,24,20,.12) !important;
}

body.wp-light-site .rl.signal {
  background: rgba(232,82,43,.06) !important;
}

body.wp-light-site .rl-head {
  background: #0d100c !important;
  color: rgba(255,253,248,.86) !important;
}

body.wp-light-site .rl-head span {
  color: inherit !important;
}

body.wp-light-site .flow-card.alt,
body.wp-light-site .feat.signal,
body.wp-light-site .tier.featured,
body.wp-light-site .cta,
body.wp-light-site .v2-section-banner {
  background: var(--orange) !important;
  color: #fffdf8 !important;
  border-color: var(--orange) !important;
}

body.wp-light-site .flow-card.alt *,
body.wp-light-site .feat.signal *,
body.wp-light-site .tier.featured *,
body.wp-light-site .cta *,
body.wp-light-site .v2-section-banner * {
  color: inherit !important;
}

body.wp-light-site .tier.featured .btn,
body.wp-light-site .cta-btn {
  background: #0d100c !important;
  color: #fffdf8 !important;
}

body.wp-light-site .tier.featured .glyph-arrow,
body.wp-light-site .cta-btn .glyph-arrow {
  background: rgba(255,253,248,.14) !important;
}

body.wp-light-site .ribbon {
  background: #0d100c !important;
  color: #fffdf8 !important;
}

body.wp-light-site .integrations {
  background: #fafaf9 !important;
  border-top: 1px solid rgba(18,24,20,.10) !important;
  border-bottom: 1px solid rgba(18,24,20,.10) !important;
}

body.wp-light-site footer.site {
  background: #edf3ec !important;
  color: var(--white) !important;
  border-top-color: rgba(18,24,20,.13) !important;
}

body.wp-light-site .ft-col a,
body.wp-light-site .ft-brand .blurb,
body.wp-light-site .ft-meta,
body.wp-light-site .cl-tag-stack em,
body.wp-light-site .closing-meta {
  color: rgba(18,24,20,.62) !important;
}

body.wp-light-site .closing {
  background: #fafaf9 !important;
  border-top-color: rgba(18,24,20,.12) !important;
}

body.wp-light-site .closing-hatch {
  background-image: repeating-linear-gradient(135deg, rgba(232,82,43,.08) 0 10px, transparent 10px 22px) !important;
}

body.wp-light-site .closing-grid {
  background-image:
    linear-gradient(rgba(18,24,20,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,24,20,.055) 1px, transparent 1px) !important;
}

body.wp-light-site .closing-spot,
body.wp-light-site .cl-mark-spot {
  mix-blend-mode: multiply !important;
  opacity: .55 !important;
}

body.wp-light-site .closing-mark {
  color: transparent !important;
  -webkit-text-stroke-color: rgba(18,24,20,.26) !important;
}

body.wp-light-site .closing-mark .cl-letter:hover {
  color: var(--orange) !important;
  -webkit-text-stroke-color: var(--orange) !important;
}

body.wp-light-site input,
body.wp-light-site textarea,
body.wp-light-site select,
body.wp-light-site .field input,
body.wp-light-site .field textarea,
body.wp-light-site .field select,
body.wp-light-site .subscribe input {
  background: #fffdf8 !important;
  border-color: rgba(18,24,20,.16) !important;
  color: var(--white) !important;
}

body.wp-light-site .wp-cookie-banner,
body.wp-light-site .wp-agent-panel,
body.wp-light-site .wp-agent-launcher,
body.wp-light-site [style*="background: rgb(8, 8, 8)"] {
  box-shadow: 0 18px 56px rgba(18,24,20,.10) !important;
}

body.wp-light-site ::selection {
  background: rgba(232,82,43,.26) !important;
  color: #0d100c !important;
}

@media (max-width: 768px) {
  body.wp-light-site .topbar {
    background: rgba(250,250,249,.96) !important;
    border-color: rgba(18,24,20,.12) !important;
    box-shadow: 0 16px 44px rgba(18,24,20,.10) !important;
  }

  body.wp-light-site .topbar > .topbar-inner {
    background: rgba(250,250,249,.96) !important;
  }

  body.wp-light-site .topbar-inner > .ticker.ticker-in-header {
    border-color: rgba(18,24,20,.10) !important;
  }
}

/* ============================================================
   Friendly white pass
   Keep the cockpit grammar, but make the marketing site read as a
   real light website instead of a dark site on a pale backing.
   ============================================================ */
body.wp-light-site {
  --ink: #fffefb;
  --ink-2: #ffffff;
  --ink-3: #f6faf5;
  --line: rgba(18, 24, 20, 0.105);
  --paper: #222820;
  --paper-2: rgba(34, 40, 32, 0.68);
  --white: #0d100c;
  --dim: rgba(34, 40, 32, 0.46);
  --grid: rgba(18, 24, 20, 0.026);
  --grid-strong: rgba(18, 24, 20, 0.065);
  --wp-sage: #f2f7f1;
  --wp-paper-bg: #fffefb;

  background:
    linear-gradient(rgba(18,24,20,.026) 1px, transparent 1px) 0 0 / 80px 80px fixed,
    linear-gradient(90deg, rgba(18,24,20,.026) 1px, transparent 1px) 0 0 / 80px 80px fixed,
    radial-gradient(900px 520px at 86% -8%, rgba(232,82,43,.045), transparent 64%) fixed,
    radial-gradient(780px 460px at -12% 22%, rgba(226,238,225,.68), transparent 68%) fixed,
    #fffefb !important;

}

body.wp-light-site::after {
  opacity: 0.055 !important;
}

body.wp-light-site .kanji {
  -webkit-text-stroke-color: rgba(232,82,43,.08) !important;
}

body.wp-light-site .hero {
  background:
    linear-gradient(135deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.50) 48%, rgba(243,248,242,.58) 100%),
    #fffefb !important;
  border-bottom: 1px solid rgba(18,24,20,.075);
}

body.wp-light-site .hero::before {
  content: "";
  position: absolute;
  inset: 84px 2.8% 44px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(18,24,20,.075);
  background: rgba(255,255,255,.32);
  box-shadow: 0 32px 80px rgba(18,24,20,.035);
}

body.wp-light-site .hero-bg {
  opacity: .48 !important;
}

body.wp-light-site .hero-ascii-bg {
  opacity: .18 !important;
  mix-blend-mode: multiply !important;
  mask-image: radial-gradient(ellipse at 72% 45%, black 0%, black 30%, transparent 74%) !important;
}

body.wp-light-site .section-ascii,
body.wp-light-site canvas.micro-ascii {
  opacity: .12 !important;
}

body.wp-light-site .ascii-bg-host > .micro-ascii {
  opacity: .18 !important;
}

body.wp-light-site .h-after-title {
  border-top-color: rgba(18,24,20,.10) !important;
}

body.wp-light-site .h-after-title .lede,
body.wp-light-site .lede {
  color: rgba(34,40,32,.76) !important;
}

body.wp-light-site .topbar,
body.wp-light-site .topbar[data-scrolled] {
  background: rgba(255,254,251,.96) !important;
  border-color: rgba(18,24,20,.09) !important;
  box-shadow:
    0 18px 42px rgba(18,24,20,.055),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

body.wp-light-site .topbar > .topbar-inner,
body.wp-light-site .tb-cockpit-strip {
  background: rgba(255,254,251,.97) !important;
}

body.wp-light-site .tb-cockpit-strip {
  border-bottom-color: rgba(18,24,20,.085) !important;
}

body.wp-light-site .nav-v2 a,
body.wp-light-site .topbar-inner > .ticker.ticker-in-header .ticker-track {
  color: rgba(34,40,32,.62) !important;
}

body.wp-light-site .topbar-inner > .ticker.ticker-in-header {
  background: rgba(245,250,244,.62) !important;
}

body.wp-light-site .btn,
body.wp-light-site .tb-cta {
  box-shadow: 0 10px 22px rgba(232,82,43,.14) !important;
}

body.wp-light-site .btn.ghost {
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 8px 18px rgba(18,24,20,.045) !important;
}

body.wp-light-site :is(
  .card,
  .tier,
  .feat,
  .flow-card,
  .quote-card,
  .pc-frame,
  .pc-tile,
  .product-console,
  .pmf-body,
  .reality-list,
  .feature-post,
  .post,
  .subscribe,
  .matrix,
  .compare,
  .agent-card,
  .mcp,
  .mcp-l,
  .faq-list,
  .code,
  .terminal,
  .tbl,
  .blg-callout
) {
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(18,24,20,.095) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.96) inset,
    0 16px 44px rgba(18,24,20,.045) !important;
}

body.wp-light-site :is(
  .hero-visual,
  .hv-frame,
  .pc-frame-head,
  .pc-frame-foot,
  .pc-tile-img,
  .feat-viz,
  .fp-l,
  .ac-glyph,
  .ac-side,
  .mcp-r,
  .code-head,
  .matrix th,
  .matrix tr.section-row td,
  .compare-head,
  .ascii-bg-host
) {
  background: #f4faf3 !important;
  border-color: rgba(18,24,20,.095) !important;
}

body.wp-light-site .cnsl-shot {
  box-shadow: 0 26px 62px rgba(18,24,20,.095) !important;
}

body.wp-light-site .v2-section-banner,
body.wp-light-site .v2-section-banner-tagged {
  background: rgba(13,16,12,.96) !important;
  color: #fffdf8 !important;
  border-color: rgba(232,82,43,.42) !important;
  box-shadow:
    0 16px 34px rgba(18,24,20,.14),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body.wp-light-site .v2-sb-pulse {
  background: var(--orange) !important;
}

body.wp-light-site .v2-sb-tick {
  background: rgba(255,253,248,.46) !important;
}

body.wp-light-site .v2-sb-tick.v2-sb-tick-mid {
  background: var(--orange) !important;
}

body.wp-light-site .v2-section-banner .section-tag .name,
body.wp-light-site .v2-section-banner .v2-sb-r {
  color: rgba(255,253,248,.72) !important;
}

body.wp-light-site .v2-section-banner .section-tag .num {
  color: var(--orange) !important;
}

body.wp-light-site .v2-section-banner .section-tag .name b {
  color: #fffdf8 !important;
}

body.wp-light-site .v2-section-banner .section-tag .dash {
  background: var(--orange) !important;
}

body.wp-light-site .integrations,
body.wp-light-site .closing,
body.wp-light-site footer.site {
  background: #fffefb !important;
}

body.wp-light-site .wp-cookie-banner,
body.wp-light-site .wp-cookie-widget {
  background: #fffefb !important;
  border-color: rgba(18,24,20,.13) !important;
  color: #0d100c !important;
  box-shadow:
    0 18px 46px rgba(18,24,20,.11),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

body.wp-light-site .wp-cookie-banner p,
body.wp-light-site .wp-cookie-banner div,
body.wp-light-site .wp-cookie-widget span {
  color: #0d100c !important;
}

body.wp-light-site .wp-chat-launcher:not([data-open="true"]) {
  background: #0d100c !important;
  border-color: rgba(232,82,43,.45) !important;
  color: #fffefb !important;
  box-shadow:
    0 6px 14px -4px rgba(8,8,8,.55),
    0 2px 4px rgba(8,8,8,.30) !important;
}

body.wp-light-site .wp-chat-launcher:not([data-open="true"]) span {
  color: #fffefb !important;
}

body.wp-light-site .wp-chat-panel .wp-chat-textarea {
  background: transparent !important;
  border-color: transparent !important;
  color: #fafaf9 !important;
}

body.wp-light-site .wp-chat-panel .wp-chat-textarea::placeholder {
  color: rgba(250,250,249,.40) !important;
}

body.wp-light-site .wp-cookie-banner button:first-of-type {
  background: var(--orange) !important;
  color: #fffefb !important;
  border-color: var(--orange) !important;
}

body.wp-light-site .wp-cookie-banner button:not(:first-of-type) {
  background: rgba(255,255,255,.78) !important;
  color: #0d100c !important;
  border-color: rgba(18,24,20,.14) !important;
}

body.wp-light-site .wp-chat-launcher:not([data-open="true"]) span span,
body.wp-light-site .wp-cookie-widget span span {
  background: var(--orange) !important;
}

@media (max-width: 768px) {
  body.wp-light-site .hero::before {
    inset: 76px 12px 24px;
  }

  body.wp-light-site .hero-ascii-bg {
    opacity: .12 !important;
  }

  body.wp-light-site .section-ascii,
  body.wp-light-site canvas.micro-ascii {
    opacity: .08 !important;
  }
}

body.wp-light-site #hero-ascii.hero-ascii-bg {
  filter: none !important;
  mix-blend-mode: multiply !important;
  opacity: 1 !important;
}

@media (max-width: 768px) {
  body.wp-light-site #hero-ascii.hero-ascii-bg {
    opacity: .92 !important;
  }
}

body.wp-light-site .section-ascii {
  filter: none !important;
  mix-blend-mode: multiply !important;
  opacity: .58 !important;
  pointer-events: none !important;
}

body.wp-light-site canvas.micro-ascii.section-ascii {
  opacity: .58 !important;
}

body.wp-light-site canvas.micro-ascii:not(.section-ascii) {
  filter: none !important;
  mix-blend-mode: multiply !important;
  opacity: .22 !important;
  pointer-events: none !important;
}

body.wp-light-site .ascii-bg-host > canvas.micro-ascii {
  opacity: .14 !important;
}

body.wp-light-site .cta > canvas.micro-ascii,
body.wp-light-site .closing > canvas.micro-ascii {
  opacity: .18 !important;
}

body.wp-light-site #console .container > p {
  display: inline-block;
  position: relative;
  z-index: 3;
  max-width: 62ch;
  padding: 2px 4px;
  background:
    linear-gradient(90deg,
      rgba(255,254,251,.82) 0%,
      rgba(255,254,251,.66) 72%,
      rgba(255,254,251,.34) 100%) !important;
  box-shadow:
    0 0 0 6px rgba(255,254,251,.52),
    0 12px 28px rgba(255,254,251,.28) !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: #0d100c !important;
  font-weight: 650 !important;
  text-shadow:
    0 1px 0 rgba(255,254,251,.72),
    0 -1px 0 rgba(255,254,251,.72),
    1px 0 0 rgba(255,254,251,.72),
    -1px 0 0 rgba(255,254,251,.72),
    0 0 14px rgba(255,254,251,.62),
    0 0 30px rgba(255,254,251,.38) !important;
}

body.wp-light-site .v2-section-banner-sticky {
  margin-bottom: 28px;
}

@media (max-width: 768px) {
  body.wp-light-site .section-ascii {
    opacity: .48 !important;
  }

  body.wp-light-site canvas.micro-ascii.section-ascii {
    opacity: .48 !important;
  }

  body.wp-light-site canvas.micro-ascii:not(.section-ascii) {
    opacity: .16 !important;
  }

  body.wp-light-site .ascii-bg-host > canvas.micro-ascii {
    opacity: .12 !important;
  }

  body.wp-light-site #hero-ascii.hero-ascii-bg {
    opacity: .92 !important;
  }

  body.wp-light-site .v2-section-banner-sticky {
    margin-bottom: 24px;
  }
}