/* ───────────────────────────────────────────────────────────────────
   Bracket — Mobile responsive overrides.

   The site is built with React inline styles + hardcoded pixel values
   for a 1280px desktop layout. Rather than rewriting every component,
   this stylesheet uses media queries + attribute selectors against the
   literal style strings React emits, with !important to win the
   specificity fight. Targets phones (≤640px) and tablets (≤900px).

   Strategy:
   - Reduce side padding from 80px → 20px
   - Convert multi-column grids → single column
   - Scale display type down
   - Stack flex rows that don't fit
   - Mobile nav: hide desktop links, show hamburger overlay
   - Sheets (modals) → full-screen
   ─────────────────────────────────────────────────────────────────── */

/* ────────── 0. Foundations ────────── */
/* NOTE: do NOT set overflow-x:hidden on html/body — it breaks
   position:sticky on descendants (the LayeredStack section relies on it
   on desktop). Instead we control overflow per-component on mobile only. */
img { max-width: 100%; height: auto; }

/* Marquee keyframes — used by the trusted-by row on mobile only.
   We translate by -50% because mobile-extras.js duplicates the logos so
   the row contains the full set twice; -50% makes the loop seamless. */
@keyframes bk-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Mobile: hide the cursor-reactive grid <canvas> in the hero.
   Phones don't have a cursor, the canvas adds CPU/GPU cost for nothing,
   and the user explicitly asked for no animation in the hero on mobile.
   Selector: any <canvas> with pointer-events:none + position:absolute
   inset:0 — that's the HeroGridCanvas signature. */
@media (max-width: 900px) {
  canvas[style*="pointer-events: none"][style*="position: absolute"] {
    display: none !important;
  }
}

@media (max-width: 640px) {
  html, body {
    /* `overflow-x: clip` prevents horizontal scroll WITHOUT creating a new
       scroll container (unlike `overflow-x: hidden` which breaks
       position:sticky on descendants). Supported on all modern mobile
       browsers including iOS Safari 16+. */
    overflow-x: clip;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

/* Reduce default body font slightly on mobile */
@media (max-width: 640px) {
  html, body { font-size: 15px; }
}

/* ════════════════════════════════════════════════════════════════════
   TABLET (≤ 900px)
   Mostly: shrink horizontal padding, collapse 4/5-col → 2-col
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Section padding: 120px 80px → 80px 32px */
  [style*="padding: 120px 80px"] { padding: 80px 32px !important; }
  [style*="padding: 110px 40px"] { padding: 72px 28px !important; }
  [style*="padding: '120px 80px'"] { padding: 80px 32px !important; }

  /* Sheet hero */
  [style*="padding: 80px 80px 72px"] { padding: 56px 28px 48px !important; }
  [style*="padding: 0 80px"] { padding: 0 28px !important; }

  /* Footer padding */
  [style*="padding: 80px 80px 40px"] { padding: 64px 28px 32px !important; }

  /* Footer 5-col → logo full-width on top, then 2x2 grid for the four
     link columns, all centered on mobile. */
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1fr"],
  [style*="gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr'"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 24px !important;
    text-align: center !important;
    justify-items: center !important;
  }
  /* Logo cell spans both columns */
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1fr"] > div:first-child,
  [style*="gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr'"] > div:first-child {
    grid-column: 1 / -1 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   PHONE (≤ 640px)
   Stack everything to a single column. Aggressive type & padding.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ────────── 1. Section padding & wrappers ────────── */
  /* All "120px 80px" → "56px 20px" */
  [style*="padding: 120px 80px"] { padding: 56px 20px !important; }
  [style*="padding: 110px 40px"] { padding: 56px 20px !important; }
  [style*="padding: 80px 80px 40px"] { padding: 56px 20px 32px !important; }
  [style*="padding: 80px 80px 72px"] { padding: 48px 20px 40px !important; }
  [style*="padding: 56px 0 24px"],
  [style*="padding: 56px 0px 24px"] { padding: 40px 0 16px !important; }
  [style*="padding: 64px 0 24px"],
  [style*="padding: 64px 0px 24px"] { padding: 40px 0 16px !important; }
  [style*="padding: 64px 0 96px"],
  [style*="padding: 64px 0px 96px"] { padding: 48px 0 64px !important; }
  [style*="padding: 48px 0 24px"],
  [style*="padding: 48px 0px 24px"] { padding: 32px 0 16px !important; }
  [style*="padding: 48px 0 72px"],
  [style*="padding: 48px 0px 72px"] { padding: 32px 0 48px !important; }
  [style*="padding: 0 80px"],
  [style*="padding: 0px 80px"] { padding: 0 16px !important; }
  [style*="padding: '0 80px'"] { padding: 0 16px !important; }
  [style*="padding: 32px 80px 36px"] { padding: 24px 16px !important; }
  [style*="padding: 24px 80px"] { padding: 16px 16px !important; height: auto !important; }

  /* Hero: 190px 80px 30px → vertically center hero text/CTA within the
     purple region. Use a fixed top padding for the nav + flex-grow to
     center the rest. (The padding rule alone isn't enough; we override
     and combine with vertical centering below.) */
  [style*="padding: 190px 80px 30px"] {
    padding: 20px 20px 24px !important;
    min-height: calc(100dvh - 86px) !important; /* hero - stripe area */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }
  /* ────────── 5b. "A running process in days" — mobile layout ──────────
     Source DOM:
       <section> "A running process in days" h2
         <div grid 1fr 1.4fr>            ← becomes 1col on mobile
           <div>                          ← LEFT: tabs + crossfade copy
             <div role="tablist">         (the horizontal tab strip)
             <div minHeight: 280>         (the body copy crossfade)
           </div>
           <div>                          ← RIGHT: image specimen
         </div>
       </section>
     Mobile order user wants:  tabs → image → text.
     We use `display: contents` to flatten the LEFT wrapper so its two
     children (tabs + copy) become direct flex children of the grid,
     then assign `order` to interleave with the RIGHT image. */
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="gridTemplateColumns: '1fr 1.4fr'"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 24px 16px 0 !important;
  }
  /* Trim the section's outer top/bottom padding + min-height on mobile.
     Section is the one whose immediate child is the grid container. */
  section:has(> div > [style*="grid-template-columns: 1fr 1.4fr"]),
  section:has(> div > [style*="gridTemplateColumns: '1fr 1.4fr'"]) {
    min-height: 0 !important;
    padding-top: 16px !important;
    padding-bottom: 0 !important;
  }
  /* Flatten the LEFT column wrapper so its tab-strip + copy become
     direct flex children of the grid container. */
  [style*="grid-template-columns: 1fr 1.4fr"] > div:first-child,
  [style*="gridTemplateColumns: '1fr 1.4fr'"] > div:first-child {
    display: contents !important;
  }
  /* Tabs first, centered horizontally as a block; tab buttons centered
     within the tablist when there's room */
  [style*="grid-template-columns: 1fr 1.4fr"] [role="tablist"],
  [style*="gridTemplateColumns: '1fr 1.4fr'"] [role="tablist"] {
    order: 1 !important;
    margin: 0 auto !important;
    align-self: center !important;
    width: auto !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    border-bottom: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Tab buttons — kill the right-margin on the last so spacing is symmetric */
  [style*="grid-template-columns: 1fr 1.4fr"] [role="tablist"] button,
  [style*="gridTemplateColumns: '1fr 1.4fr'"] [role="tablist"] button {
    margin-right: 18px !important;
  }
  [style*="grid-template-columns: 1fr 1.4fr"] [role="tablist"] button:last-child,
  [style*="gridTemplateColumns: '1fr 1.4fr'"] [role="tablist"] button:last-child {
    margin-right: 0 !important;
  }
  /* Image specimen second, centered */
  [style*="grid-template-columns: 1fr 1.4fr"] > div:last-child,
  [style*="gridTemplateColumns: '1fr 1.4fr'"] > div:last-child {
    order: 2 !important;
    align-self: center !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
  }
  /* Hide the duplicate Describe/Build/Run headline below the image
     (it's already shown in the tabs above). Keep only the body text. */
  [style*="grid-template-columns: 1fr 1.4fr"] [style*="min-height: 280"] [style*="font-size: 72px"],
  [style*="gridTemplateColumns: '1fr 1.4fr'"] [style*="minHeight: 280"] [style*="font-size: 72px"] {
    display: none !important;
  }
  /* Body copy block last, centered */
  [style*="grid-template-columns: 1fr 1.4fr"] [style*="min-height: 280"],
  [style*="gridTemplateColumns: '1fr 1.4fr'"] [style*="minHeight: 280"] {
    order: 3 !important;
    min-height: 0 !important;
    position: static !important;
    text-align: center !important;
  }
  /* Each crossfading copy item — let active item flow in normal layout */
  [style*="grid-template-columns: 1fr 1.4fr"] [style*="min-height: 280"] > div,
  [style*="gridTemplateColumns: '1fr 1.4fr'"] [style*="minHeight: 280"] > div {
    position: static !important;
    text-align: center !important;
  }
  [style*="grid-template-columns: 1fr 1.4fr"] [style*="min-height: 280"] > div[style*="opacity: 0"],
  [style*="gridTemplateColumns: '1fr 1.4fr'"] [style*="minHeight: 280"] > div[style*="opacity: 0"] {
    display: none !important;
  }
  /* Body paragraph inside crossfade — center-aligned, no max-width.
     The selector for the inner <div style="font-size: 19px"> didn't always
     match (some items render font-size on a parent). Catch all descendants. */
  [style*="grid-template-columns: 1fr 1.4fr"] [style*="min-height: 280"] *,
  [style*="gridTemplateColumns: '1fr 1.4fr'"] [style*="minHeight: 280"] * {
    text-align: center !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* H2 "A running process in days" — center & smaller */
  [style*="font-size: 56px"][style*="letter-spacing: -1.8"][style*="text-align: left"] {
    text-align: center !important;
  }
  [style*="padding: 190px 80px 30px"] [style*="font-size: 66px"] {
    font-size: 46px !important;
    letter-spacing: -1.4px !important;
    line-height: 1.05 !important;
    text-align: center !important;
    max-width: 100% !important;
  }
  /* Hero spacing — center grid contents and tighten H1 → body gap */
  [style*="padding: 20px 20px 24px"][style*="display: flex"] > [style*="display: grid"][style*="margin-top: 44"],
  [style*="padding: 190px 80px 30px"] > [style*="display: grid"][style*="marginTop: 44"] {
    margin-top: 20px !important;
    gap: 28px !important;
    justify-items: center !important;
    text-align: center !important;
  }
  /* Body paragraph — center, no max-width constraint, smaller */
  [style*="padding: 190px 80px 30px"] p {
    text-align: center !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  /* CTA buttons row — single row, centered */
  [style*="padding: 190px 80px 30px"] [style*="justify-content: flex-end"][style*="display: flex"] {
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }

  /* Departments megamenu */
  [style*="padding: 24px 80px 40px"] { padding: 16px 20px 24px !important; }

  /* ────────── 2. Top nav ────────── */
  /* Nav bar: shrink horizontal padding */
  [style*="padding: 18px 80px"] { padding: 14px 20px !important; }

  /* HIDE the desktop link cluster + the right-side CTA cluster.
     We replace them with a single hamburger via JS injection (mobile-nav.js). */
  /* The middle nav row contains 5 links — hide it on mobile */
  nav-mobile-hide-target {} /* placeholder */

  /* Departments megamenu: collapse multi-col to single col */
  [style*="grid-template-columns: minmax(0, 1fr) 360px"],
  [style*="gridTemplateColumns: 'minmax(0, 1fr) 360px'"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"],
  [style*="gridTemplateColumns: 'repeat(4, minmax(0, 1fr))'"] {
    grid-template-columns: 1fr 1fr !important;
    column-gap: 16px !important;
  }

  /* ────────── 3. Generic grid collapses ────────── */
  /* 5-col footer — logo full-width on top, four link cols in a 2x2 grid,
     all centered on mobile. */
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1fr"],
  [style*="gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr'"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 24px !important;
    text-align: center !important;
    justify-items: center !important;
  }
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1fr"] > div:first-child,
  [style*="gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr'"] > div:first-child {
    grid-column: 1 / -1 !important;
  }
  /* Center the logo row inside the first cell */
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1fr"] > div:first-child > div,
  [style*="gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr'"] > div:first-child > div {
    justify-content: center !important;
    margin-bottom: 0 !important;
  }
  /* Footer bottom rule (©, compliance) — stack & center */
  footer [style*="justify-content: space-between"][style*="border-top"] {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
    align-items: center !important;
  }
  /* 4-col grids → 2-col */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="gridTemplateColumns: 'repeat(4, 1fr)'"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  /* 3-col grids → 1-col */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="gridTemplateColumns: 'repeat(3, 1fr)'"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* 2-col split layouts */
  [style*="grid-template-columns: 1.35fr 1fr"],
  [style*="gridTemplateColumns: '1.35fr 1fr'"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="gridTemplateColumns: '1fr 1fr'"],
  [style*="grid-template-columns: 1fr auto"],
  [style*="gridTemplateColumns: '1fr auto'"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* 2-row table layouts using rows: leave alone but reset gap */
  [style*="gridTemplateRows: '1fr 1.6fr'"] { gap: 8px !important; }

  /* Specific grids in modules sheet "How it runs" – 4 columns to 1 */
  [style*="grid-template-columns: repeat(4, 1fr)"][style*="gap: 1px"],
  [style*="gridTemplateColumns: 'repeat(4, 1fr)'"][style*="gap: 1"] {
    grid-template-columns: 1fr !important;
  }

  /* ────────── 4. Display headings ────────── */
  /* BKHeading sizes — all scale down */
  [style*="font-size: 76px"]  { font-size: 40px !important; letter-spacing: -1.4px !important; line-height: 1.05 !important; }
  [style*="font-size: 66px"]  { font-size: 36px !important; letter-spacing: -1.2px !important; line-height: 1.08 !important; }
  [style*="font-size: 56px"]  { font-size: 32px !important; letter-spacing: -1.0px !important; line-height: 1.1 !important; }
  [style*="font-size: 52px"]  { font-size: 30px !important; letter-spacing: -0.9px !important; line-height: 1.1 !important; }
  [style*="font-size: 44px"]  { font-size: 28px !important; letter-spacing: -0.8px !important; }
  [style*="font-size: 40px"]  { font-size: 26px !important; letter-spacing: -0.6px !important; line-height: 1.15 !important; }
  [style*="font-size: 36px"]  { font-size: 24px !important; letter-spacing: -0.5px !important; line-height: 1.15 !important; }
  [style*="font-size: 32px"]  { font-size: 22px !important; letter-spacing: -0.4px !important; line-height: 1.2 !important; }
  [style*="font-size: 28px"]  { font-size: 20px !important; letter-spacing: -0.3px !important; }
  [style*="font-size: 24px"]  { font-size: 18px !important; letter-spacing: -0.2px !important; }
  [style*="font-size: 22px"]  { font-size: 17px !important; line-height: 1.5 !important; }

  /* Body text — keep at 15-16, but trim oversized */
  [style*="font-size: 19px"] { font-size: 16px !important; }
  [style*="font-size: 18px"] { font-size: 16px !important; }

  /* ────────── 5. Hero specific ────────── */
  /* Purple hero block — fill the viewport on mobile AND extend to cover
     all hero content. Strategy:
       (a) make the HomeHero outer wrapper at least 100dvh tall so it always
           reaches the bottom of the viewport;
       (b) stretch the absolute purple backdrop to fill that wrapper via
           top:0/bottom:0 (overriding the fixed height: 700px);
       (c) lift the logo-strip above the purple (z-index) and anchor it to
           the bottom edge of the hero so it shows as a white stripe with
           the marquee, sitting at the very bottom of the purple. */
  /* (a) Outer wrapper — the hero white-bg div containing purple + content */
  [style*="background: rgb(255, 255, 255)"][style*="position: relative"][style*="overflow: hidden"]:has([style*="height: 700px"]) {
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }
  /* (b) Purple backdrop fills wrapper EXCEPT the strip reserved for the
     white logo stripe (stripe height ~50px, stripe bottom offset 18px). */
  [style*="height: 700px"] {
    height: auto !important;
    top: 0 !important;
    bottom: 68px !important;
  }
  /* (c) Logo strip — white stripe at the bottom of the hero. */
  [style*="padding: 32px 80px 36px"][style*="background: rgb(255, 255, 255)"],
  [style*="padding: 24px 16px"][style*="background: rgb(255, 255, 255)"]:has(img) {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 18px !important;
    margin-top: 0 !important;
    padding: 16px 16px !important;
    z-index: 2 !important;
    background: #fff !important;
  }
  /* Hide the "Trusted by operators at" label inside the hero logo strip */
  [style*="padding: 32px 80px 36px"][style*="background: rgb(255, 255, 255)"] [style*="margin-bottom: 32"],
  [style*="padding: 32px 80px 36px"][style*="background: rgb(255, 255, 255)"] [style*="marginBottom: 32"] {
    display: none !important;
  }

  /* CTA row in hero: the right-side flex with two buttons —
     allow it to wrap and align left */
  [style*="justify-content: flex-end"][style*="display: flex"] {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  /* Hero generate-card animated demo — hide entirely on mobile.
     React's marginLeft/marginRight: auto override the shorthand,
     so the live attribute is `margin: 24px auto 0px` not `24px 80px 0`. */
  [style*="height: 440px"][style*="margin: 24px auto 0"],
  [style*="height: 440px"][style*="margin: 24px 80px 0"] {
    display: none !important;
  }
  /* The iframe inside renders an internal "card" sized 720px wide max.
     On a 390px viewport, max-width:calc(100% - 48px) handles width;
     we just need the parent box to not dwarf the 240px card. */

  /* ────────── 6. LayeredStack — KEEP the sticky scroll-pinned behavior on mobile ──────────
     The section is 300vh tall + 100vh sticky pin. We DON'T flatten it on
     mobile — instead we shrink the asset and reposition labels so a
     smaller phone-friendly version of the same scroll experience plays.
     The React component already drives an `active` state from scrollY,
     so we just restyle: smaller cube, no perspective rotate (so plates
     stack flat & centered for the asset), labels move below the asset
     and are positioned over each other in the same slot — only the
     active one is visible (others fade via the existing opacity rule). */

  /* Section keeps height 300vh; sticky child keeps top:0/height:100vh.
     We override its inner padding only. */
  [style*="position: sticky"][style*="top: 0"][style*="height: 100vh"] {
    padding: 60px 16px 0 !important;
    justify-content: flex-start !important;
  }

  /* Stage container — fills the sticky viewport so its bottom edge IS
     the viewport bottom. Cube is aligned to upper portion via padding-top;
     labels (position:absolute children) anchor to bottom edge = viewport
     bottom. */
  [style*="perspective: 2000"] {
    perspective: 1200px !important;
    height: calc(100vh - 60px) !important;
    margin: 0 !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 120px !important;
  }

  /* The rotating cube — smaller so isometric projection fits in 460px viewport */
  [style*="transform: rotateX(58deg) rotateZ(-45deg)"],
  [style*="transform: 'rotateX(58deg) rotateZ(-45deg)'"] {
    width: 200px !important;
    height: 200px !important;
  }

  /* Plate-inner: RESTORE original grid templates that the generic 4-col /
     1fr-1fr collapse rules above accidentally hit via substring match.
     The PlateContentUI table uses `1fr 1fr 1fr 80px` (matched by the
     generic `1fr 1fr` rule and collapsed to one column → long list).
     The PlateContentBlocks uses `repeat(4, 1fr)` (matched by the 4-col
     rule and collapsed to 2-col).
     Anything inside `inset:22px` belongs to the plate content; force it
     back to the inline grid template. */
  [style*="inset: 22px"] [style*="grid-template-columns: 1fr 1fr 1fr 80px"],
  [style*="inset: 22px"] [style*="gridTemplateColumns: '1fr 1fr 1fr 80px'"] {
    grid-template-columns: 1fr 1fr 1fr 80px !important;
  }
  [style*="inset: 22px"][style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="inset: 22px"][style*="gridTemplateColumns: 'repeat(4, 1fr)'"],
  [style*="inset: 22px"] [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* Plate-inner content scaling.
     The plate is 200×200 on mobile (vs 460×460 on desktop) — a 0.435 scale.
     The inner content wrapper is `position:absolute; inset:22px` with the
     sparkline / 4-col table / icon grid / doc-rows laid out for the desktop
     plate size. Rather than clip overflow (which truncates the design),
     we lay it out at its natural ~416×416 size and visually scale it down
     so the entire composition fits inside the 156×156 inner box of the
     mobile plate. */
  [style*="inset: 22px"] {
    /* Restore desktop layout dimensions for the inner content so its grid
       templates / fixed widths still work, then scale visually. */
    inset: 22px !important;
    width: calc(416px) !important;
    height: calc(416px) !important;
    transform: scale(0.375) !important;
    transform-origin: top left !important;
  }

  /* Plates stay absolute & translateZ-stacked — just inherit smaller cube */

  /* Side labels: stop being side labels.
     Stack them all in the SAME slot below the asset; the existing
     React opacity (active=1, inactive=0.32) drives which is visible.
     We bump the inactive opacity down to 0 so only the active label
     shows, with a fade. */
  /* Phase label position: stack all 3 in same slot below the asset.
     Only the active one is visible (opacity:1 inline) — others fade
     to opacity 0 (rule below) so they cross-fade as you scroll. */
  [style*="top: 50%"][style*="width: 220px"][style*="position: absolute"] {
    top: auto !important;
    bottom: 130px !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    transform: none !important;
    text-align: center !important;
    transition: opacity 360ms ease !important;
    z-index: 5 !important;
  }
  /* Phase label text — make title and description larger on mobile */
  [style*="width: 220px"][style*="position: absolute"] [style*="font-size: 18px"] {
    font-size: 22px !important;
    letter-spacing: -0.4px !important;
  }
  [style*="width: 220px"][style*="position: absolute"] [style*="font-size: 13px"] {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  /* Inactive labels (opacity 0.32) → fade to 0 on mobile so only the
     active phase shows. Selector combines the inactive opacity with the
     LayerLabel's 220px width so it doesn't match anything else. */
  [style*="opacity: 0.32"][style*="width: 220px"][style*="position: absolute"] {
    opacity: 0 !important;
  }
  /* Center the coral underline accent inside each label */
  [style*="top: 50%"][style*="width: 220px"][style*="position: absolute"] > div:first-child {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Headline at top — sticky on mobile so it pins through the 3 phases */
  /* Section title "One agent platform for every process" — sticky during
     the section, fades out as the section scrolls past so it doesn't
     overlap the 3D asset / phase labels. Uses scroll-driven animations
     (Safari iOS 17.5+, Chrome 115+); falls back to plain sticky. */
  [style*="height: 300vh"][style*="background"] {
    scroll-timeline-name: --bk-platform;
    scroll-timeline-axis: block;
    view-timeline-name: --bk-platform-view;
    view-timeline-axis: block;
  }
  [style*="position: absolute"][style*="top: 80"][style*="font-size"] {
    position: sticky !important;
    top: 110px !important;
    margin-top: 56px !important;
    padding: 0 20px !important;
    text-align: center !important;
    font-size: 36px !important;
    letter-spacing: -0.8px !important;
    line-height: 1.1 !important;
    z-index: 6 !important;
  }
  @supports (animation-timeline: view()) {
    [style*="position: absolute"][style*="top: 80"][style*="font-size"] {
      animation: bk-headline-fade linear both;
      animation-timeline: --bk-platform-view;
      animation-range: cover 38% cover 75%;
    }
  }
  @keyframes bk-headline-fade {
    0%   { opacity: 1; transform: translateY(0); }
    50%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-16px); }
  }
  /* Scroll progress dots — keep them, move closer to bottom */
  [style*="position: absolute"][style*="bottom: 40"] {
    bottom: 24px !important;
  }

  /* ────────── 7. Sheets (Module + Customer modal) ────────── */
  /* The bottom-sheet modal: 85vw → full width.
     Height is set explicitly later (85vh / 85dvh) — don't set it here
     or the older `100vh` value can leak through if the more-specific
     rule fails to compute (e.g. dvh unsupported on old iOS). */
  [style*="width: 85vw"] {
    width: 100vw !important;
    max-width: 100vw !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }

  /* ────────── 8. Hover-only effects: disable transforms ────────── */
  /* Card grids in modules — many use translateY on hover; mobile is fine */

  /* ────────── 9. Trusted-by logos — horizontal clipping marquee ────────── */
  /* Don't wrap; clip the strip and slide it. The trusted-by section's
     wrapper has padding `32px 80px 36px`; we use that to find it.
     The inner row has flex-wrap:nowrap. We turn its parent into an
     overflow:hidden viewport, and animate the row across with CSS. */
  [style*="flex-wrap: nowrap"] {
    flex-wrap: nowrap !important;
    /* Ensure logos don't shrink */
    flex: 0 0 auto !important;
  }
  /* The wrapper that contains the "Trusted by operators at" label and
     the logo row — give it overflow:hidden and a relative parent.
     We target via the section padding pattern (now 24px 20px on mobile). */
  [style*="padding: 24px 20px"] > div,
  [style*="padding: 32px 20px"] > div,
  [style*="padding: 32px 80px 36px"] > div {
    overflow: hidden !important;
  }
  /* The logo row itself: switch from space-between to a left-aligned
     marquee. justify-content:space-between would force evenly-spaced
     logos that don't slide; we override to flex-start. */
  [style*="gap: 40px"][style*="flex-wrap: nowrap"],
  [style*="justify-content: space-between"][style*="flex-wrap: nowrap"] {
    justify-content: flex-start !important;
    width: max-content !important;
    gap: 36px !important;
    animation: bk-marquee 22s linear infinite;
  }
  /* Pause on touch (iOS uses :active for tap) */
  [style*="gap: 40px"][style*="flex-wrap: nowrap"]:active,
  [style*="justify-content: space-between"][style*="flex-wrap: nowrap"]:active {
    animation-play-state: paused;
  }
  /* Each logo: prevent shrink, smaller heights */
  [style*="gap: 40px"][style*="flex-wrap: nowrap"] img,
  [style*="justify-content: space-between"][style*="flex-wrap: nowrap"] img {
    flex: 0 0 auto !important;
    height: 30px !important;
  }

  /* ────────── 10. How it works cards (3 across) ────────── */
  /* The card row already covered by repeat(3,1fr) → 1col */

  /* ────────── 11. Buttons sizing ────────── */
  /* Make CTA buttons full-width when they're inside a stacked CTA row */

  /* ────────── 12. Misc max-widths ────────── */
  [style*="max-width: 1280"] { max-width: 100% !important; }
  [style*="max-width: 1040"] { max-width: 100% !important; }
  [style*="max-width: 900"] { max-width: 100% !important; }
  [style*="max-width: 820"] { max-width: 100% !important; }
  [style*="max-width: 720"] { max-width: 100% !important; }
  [style*="max-width: 620"] { max-width: 100% !important; }

  /* ────────── 13. Popup sheets — Industries (department-sheet.js)
                  and Case-study (customer-sections.js) — fit mobile ────────── */

  /* Sheet outer panel — both sheets sit at bottom-end of viewport.
     Department sheet: maxWidth 1100, height 90vh.
     Customer sheet: width 85vw, maxWidth 1600, height calc(100vh - 56px).
     We force them to full-width 100vh on mobile so there's no wasted
     edge gap and we get the full screen for content. */
  [style*="max-width: 1100"][style*="height: 90vh"],
  [style*="width: 85vw"][style*="max-width: 1600"],
  [style*="width: 85vw"][style*="max-width:1600"],
  [style*="height: calc(100vh - 56px)"] {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 85vh !important;
    height: 85dvh !important;
    max-height: 85vh !important;
    max-height: 85dvh !important;
    min-height: 0 !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    margin: 0 !important;
  }

  /* Department-sheet header (tabs + close X): make it sticky so it
     stays visible as the body scrolls. The header has overflow-x:auto
     and padding 10px 12px (overridden below from 14/20). */
  [style*="overflow-x: auto"][style*="border-bottom"] {
    position: sticky !important;
    top: 0 !important;
    background: #fff !important;
    z-index: 10 !important;
    flex: 0 0 auto !important;
  }

  /* Department-sheet body: must take remaining height + scroll inside,
     not push the sheet taller than viewport. */
  [style*="grid-template-columns: 1.1fr 1fr"] {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  /* Department-sheet body grid: 1.1fr 1fr → single column.
     The body uses gridTemplateColumns:'1.1fr 1fr', gap:64,
     padding:'48px 64px 64px'. Tighten everything. */
  [style*="grid-template-columns: 1.1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 28px 20px 40px !important;
  }
  /* The padding on the same element comes via the inline style; the
     above selector matches it. But the original style has the padding
     declared separately — be explicit to override: */
  [style*="padding: 48px 64px 64px"] {
    padding: 28px 20px 40px !important;
  }

  /* Department-sheet hero h2 — was 44px; mobile typography rules
     elsewhere reduce 44px to 28px which is fine. Tagline ok. */

  /* Department-sheet right placeholder panel — hide entirely on mobile.
     It's identified by min-height:360 + cream bg + 28px padding on the
     same div. The grid-collapse rule above already turns the body into
     1 column; this hides the second cell. */
  [style*="min-height: 360"] {
    display: none !important;
  }

  /* Department-sheet top switcher row — already overflow-x:auto.
     Reduce padding so buttons get more room. */
  [style*="padding: 14px 20px"][style*="overflow-x: auto"] {
    padding: 10px 12px !important;
    gap: 4px !important;
  }

  /* Customer-sheet "More stories" grid: repeat(2|3, 1fr) → 1col */
  [style*="grid-template-columns: repeat(3, 1fr)"][style*="gap: 16"],
  [style*="grid-template-columns: repeat(2, 1fr)"][style*="gap: 16"] {
    grid-template-columns: 1fr !important;
  }

  /* Customer-sheet metrics grid: repeat(4, 1fr) → 2col on mobile */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Customer page metrics rail — 3-column inset border layout */
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Process list item rows in dept-sheet — keep a tighter gap */
  [style*="padding: 14px 0"][style*="border-bottom"] {
    padding: 12px 0 !important;
  }

  /* CTA button inside dept-sheet — full width on mobile */
  [style*="padding: 14px 22px"][style*="border-radius: 10"] {
    width: 100%;
    justify-content: center;
  }

  /* ────────── 14. Industries section — hide caption + CTA row on mobile ──────────
     The bottom caption row of the Departments stripe is a 1fr auto grid
     with [text block] [button]. Hide the entire row on mobile — the
     industry tiles in the marquee are themselves clickable. */
  [style*="grid-template-columns: 1fr auto"][style*="align-items: end"] {
    display: none !important;
  }
  /* Industries stripe — taller skewed band + bigger cards on mobile.
     Stripe = the inner div with `padding: 90px 0` inside the skewed band.
     Cards = DepartmentCard with `width: 280px; min-height: 264px`. */
  [style*="padding: 90px 0"] {
    padding: 100px 0 !important;
  }
  [style*="width: 280px"][style*="min-height: 264px"] {
    width: 285px !important;
    min-height: 285px !important;
  }
  /* Industries section — trim ONLY the top spacing on mobile */
  #industries {
    padding-top: 0 !important;
    padding-bottom: 120px !important;
    min-height: 0 !important;
  }
  /* "Start where you are." footer CTA stripe — stack & center on mobile.
     Identified by the unique `gCta` pattern. */
  section:has(pattern#gCta) [style*="grid-template-columns: 1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    text-align: center !important;
    justify-items: center !important;
  }
  section:has(pattern#gCta) [style*="grid-template-columns: 1fr auto"] > div {
    text-align: center !important;
    justify-content: center !important;
  }
  section:has(pattern#gCta) [style*="grid-template-columns: 1fr auto"] > div:last-child {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  #industries > div:first-child {
    margin-bottom: 72px !important;
  }

  /* ────────── 15. Customer-sheet internal layout — fit mobile ──────────
     The sheet reuses the full-page CustomerHero/Metrics/Body/Quote/Close
     components, which are designed for a 1280px wide page. On mobile we
     need to compress vertical padding so the content fits the 85dvh sheet
     without huge dead zones, and shrink display type so the headline
     doesn't overflow. */

  /* Hero section: '60px 0 80px' → tighter */
  [style*="padding: 60px 0 80px"],
  [style*="padding: 60px 0px 80px"] { padding: 32px 0 32px !important; }

  /* CustomerBody: '80px 0 40px' → tighter */
  [style*="padding: 80px 0 40px"],
  [style*="padding: 80px 0px 40px"] { padding: 24px 0 16px !important; }

  /* CustomerPullQuote: '40px 0 40px' → tighter */
  [style*="padding: 40px 0 40px"],
  [style*="padding: 40px 0px 40px"] { padding: 16px 0 16px !important; }

  /* CustomerClose: '40px 0 120px' → much tighter */
  [style*="padding: 40px 0 120px"],
  [style*="padding: 40px 0px 120px"] { padding: 16px 0 32px !important; }

  /* SheetMoreStories: '80px 0 120px' → tighter */
  [style*="padding: 80px 0 120px"],
  [style*="padding: 80px 0px 120px"] { padding: 32px 0 24px !important; }

  /* Customer hero headline (h1 with fontSize 64) — already covered by
     the generic 64px rule? Let me match the closest preset. CustomerHero
     uses fontSize: 64, which isn't in the type table; map it down. */
  [style*="font-size: 64px"] {
    font-size: 36px !important;
    letter-spacing: -1.2px !important;
    line-height: 1.05 !important;
  }

  /* Customer metrics dt (fontSize 56) — type rule already shrinks to 32. */
  /* Each metrics cell — drop side padding so two columns fit nicely */
  [style*="padding: 40px 32px"] {
    padding: 24px 16px !important;
  }

  /* Pull quote body (32px serif) — cap line-height tight */
  /* Already handled by 32px → 22px rule. */

  /* CustomerBody body copy: 19px → 16px is already in generic rules.
     But the wrapper has padding 0 80px which now becomes 0 16px. */

  /* Brand row gap shrink + smaller logo tile */
  [style*="gap: 20px"][style*="margin-bottom: 40px"] {
    gap: 14px !important;
    margin-bottom: 24px !important;
  }
  /* The brand-tile div uses width/height 72 — keep as-is, it's fine.
     The story.name display is 22px; map to a smaller line. */
  [style*="font-size: 22px"][style*="font-weight: 500"][style*="letter-spacing: -0.4px"] {
    font-size: 18px !important;
  }

  /* SheetMoreStories card art — 180px height is fine but tile padding was
     designed for desktop. Already covered by repeat(3,1fr) → 1col rule. */

  /* ────────── 16. FAQ section — single column, centered ──────────
     Source: <BKSection> with grid 380px 1fr, gap 80. Left col is sticky
     headline + "Ask the integrator agent" link. Right col is the Q&A list.
     On mobile we collapse to 1 column, kill the sticky positioning,
     center the heading area, and tighten typography. */
  [style*="grid-template-columns: 380px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 0 !important;
    margin: 0 -18px !important;
  }
  /* The left sticky column — kill sticky on mobile, center its contents */
  [style*="grid-template-columns: 380px 1fr"] > div:first-child {
    position: static !important;
    top: auto !important;
    text-align: center !important;
  }
  /* The "Ask the integrator agent" helper line — center it */
  [style*="grid-template-columns: 380px 1fr"] > div:first-child > div {
    text-align: center !important;
  }
  /* FAQ question button — keep left-aligned text but tighten padding & gap */
  [style*="grid-template-columns: 380px 1fr"] button[style*="text-align: left"] {
    padding: 18px 0 !important;
    gap: 12px !important;
  }
  [style*="grid-template-columns: 380px 1fr"] button[style*="text-align: left"] > span:first-child {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }
  /* FAQ + button (toggle) — keep on same line, don't shrink */
  [style*="grid-template-columns: 380px 1fr"] button[style*="text-align: left"] > span:last-child {
    width: 24px !important;
    height: 24px !important;
    font-size: 14px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Mobile nav overlay — driven by mobile-nav.js
   The script injects a hamburger button (.bk-mobile-burger), a full-
   screen overlay (.bk-mobile-menu), and toggles .bk-menu-open on
   <body> when the menu is opened.
   ════════════════════════════════════════════════════════════════════ */

.bk-mobile-burger { display: none; }
.bk-mobile-menu   { display: none; }

@media (max-width: 640px) {
  /* Hide desktop nav middle section + sign-in link.
     The desktop nav root has padding "18px 80px" (now 14px 20px on mobile).
     Its three direct children are: logo, links, cta cluster.
     We hide children #2 (links) and the "Sign in" anchor inside #3,
     leaving the "Get in touch" CTA visible alongside the burger. */
  body > div > div > div > div[style*="padding: 14px 20px"] > div:nth-child(2),
  div[style*="padding: 18px 80px"] > div:nth-child(2),
  /* fallback if React keeps the old padding string */
  div[style*="display: flex"][style*="gap: 36"] {
    display: none !important;
  }
  /* Sign-in link is the first child of the right cluster */
  div[style*="display: flex"][style*="gap: 20"] > a[href*="app.getbracket"] {
    display: none !important;
  }

  /* Show hamburger */
  .bk-mobile-burger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  .bk-mobile-burger svg { display: block; }

  /* Full-screen menu overlay */
  .bk-mobile-menu {
    display: flex !important;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #FBFAF7;
    flex-direction: column;
    padding: 80px 28px 32px;
    gap: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 200ms ease, transform 200ms ease;
  }
  body.bk-menu-open .bk-mobile-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  body.bk-menu-open { overflow: hidden; }
  .bk-mobile-menu .bk-mm-link {
    display: block;
    font-family: "Switzer", -apple-system, system-ui, sans-serif;
    font-size: 26px;
    font-weight: 400;
    letter-spacing: -0.5px;
    color: #0E0D0C;
    text-decoration: none;
    padding: 18px 0;
    border-bottom: 1px solid rgba(14,13,12,0.08);
  }
  .bk-mobile-menu .bk-mm-cta {
    display: block;
    margin-top: 24px;
    padding: 14px 20px;
    background: #7D52F4;
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
  }
  .bk-mobile-menu .bk-mm-signin {
    display: block;
    margin-top: 12px;
    padding: 14px 20px;
    color: #6B6775;
    font-size: 16px;
    text-decoration: none;
    text-align: center;
  }
  .bk-mobile-menu .bk-mm-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #0E0D0C;
  }
}