/* ==========================================================================
   Annota8 — mobile.css  (loaded LAST, after sections.css)
   Coherent phone overhaul (<=640px, +<=380px tier). Rebuilt 2026-06-23
   from 7 component passes. Scoped per component; minimal !important.
   ========================================================================== */

/* ===== GLOBAL ===== */
/* ============================================================
   COMPONENT: global + tokens  (mobile baseline ONLY)
   Owns: box-sizing, page overflow-x guard, base font-size,
   .container padding-inline + max-width, generic section /
   .section-pad vertical rhythm, generic h1/h2/h3 clamp scale,
   generic .btn tap-targets. Does NOT touch component-scoped
   selectors (.a8nav*, .stage-hero*, .astu*, #astuTabs,
   .twall*, .tools-*, .sops-*, #templates/#tools/#scale-ops
   id-scoped overrides) — those belong to other agents.
   Equal specificity + source-order (loaded last) wins over
   base.css/tokens.css; !important used only to beat the
   higher-specificity desktop rules noted inline.
   ============================================================ */
@media (max-width: 640px){

  /* ---- Page-level horizontal-scroll guard -------------------------- */
  /* body already sets overflow-x:hidden in base.css; reassert on the
     root with overflow-x:clip (sticky-safe — does not create a scroll
     container, so the sticky nav + Lenis smooth-scroll keep working)
     and cap widths so nothing can push the page sideways. */
  *, *::before, *::after{ box-sizing: border-box; }
  html, body{
    max-width: 100%;
    overflow-x: clip;
  }

  /* ---- Base type: hold a 16px body floor --------------------------- */
  body{ font-size: 16px; line-height: 1.55; }

  /* ---- Container: 16px gutter, full-bleed measure ------------------ */
  /* Overrides --gutter (clamp ≈19.5px @390) + --max (1200px floor) so
     the page never out-measures the viewport. margin-inline:auto kept;
     padding-inline is logical → RTL mirrors automatically. */
  .container{
    max-width: 100%;
    padding-inline: 16px;
  }

  /* ---- Generic heading clamp scale --------------------------------- */
  /* Retunes the GLOBAL h1/h2/h3 base only (var(--h1/2/3) min values
     were 41.6 / 32 / 20px → too large/uneven for phones). Section
     headings that opt out via their own tokens (--sx-h2) or scoped
     selectors are unaffected and stay owned by their agents. */
  h1{ font-size: clamp(1.9rem, 7.4vw, 2.125rem); line-height: 1.06; } /* ~30–34px */
  h2{ font-size: clamp(1.5rem, 6vw, 1.625rem); line-height: 1.12; }   /* ~24–26px */
  h3{ font-size: clamp(1.125rem, 4.4vw, 1.25rem); line-height: 1.2; } /* ~18–20px */

  /* ---- Section vertical rhythm ------------------------------------- */
  /* Kills the global oversized cadence (.section-pad = --s7 = 160px).
     No !important: the deliberate id-scoped cadence set by the section
     agents (#tools/#scale-ops/#templates.section-pad) is higher
     specificity and intentionally wins; this is the baseline for every
     other section + a sane default for .section-pad with no id rule. */
  .section-pad{ padding-block: 56px; }
  section > .container{ /* belt: keep first/last block off the seam */
    padding-block: 0;
  }

  /* ---- Generic buttons: 44px tap target --------------------------- */
  /* .btn font/padding stay as authored (13px / 13px 26px = at the type
     floor). Add a min tap height + flex-centering + safe wrap so labels
     never overflow the 16px gutter. Scoped-button overrides (hero,
     footer) carry higher specificity for their own padding and are not
     disturbed — min-height layers on top for the tap target. */
  .btn{
    min-height: 44px;
    justify-content: center;
    max-width: 100%;
  }

  /* full-width primary CTAs read cleaner on a narrow column when the
     author already let them grow (flex:1 1 auto in footer/cta rows);
     do not force width here — only guarantee they don't overflow. */
}

/* ---- 380px refinement ------------------------------------------- */
@media (max-width: 380px){
  .container{ padding-inline: 14px; }
  .section-pad{ padding-block: 44px; }
  /* nudge the largest heads down a touch more on the narrowest phones */
  h1{ font-size: clamp(1.8rem, 8vw, 2rem); }   /* ~29–32px */
  h2{ font-size: clamp(1.4rem, 6.4vw, 1.55rem); }
}

/* ===== NAV ===== */
/* ============================================================
   Annota8 — MOBILE overrides (loaded LAST, after sections.css)
   COMPONENT: nav / header (.a8nav and children)
   No new JS, no new markup. The header's authoritative rules are
   inline in <body>, so they win on source order — !important is
   required here to beat them on mobile only.
   ============================================================ */

@media (max-width: 640px){

  /* ---- Compact sticky brand bar ------------------------------------ */
  /* Always glassy on mobile so the bar is legible over hero/photo even
     before scroll fires .nav--solid. */
  .a8nav{
    /* Lighter blur (18→10px) + a touch more opacity for legibility — a big cut
       in continuous compositing cost on low-end phones. */
    background: var(--nav-bg, rgba(250,250,248,0.92)) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid var(--rule, rgba(11,11,15,0.08)) !important;
  }

  .a8nav__inner{
    height: 56px !important;               /* single clean brand-bar row */
    min-height: 56px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding-block: 0 !important;
    padding-inline: 16px !important;       /* container gutter, border-box safe */
    column-gap: 8px !important;
  }

  /* Logo ~100px wide (30px tall keeps the brand lockup ~96–110px) */
  .a8nav__logo{ flex: 0 0 auto !important; }
  .a8nav__logo-img{ height: 30px !important; width: auto !important; }

  /* Right cluster: lang + Book Demo, no crowding (theme hidden below) */
  .a8nav__actions{
    flex: 0 0 auto !important;
    margin-inline-start: auto !important;  /* push to trailing edge, RTL-safe */
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Language toggle — visible & tappable on mobile (was hidden < 520px) */
  .a8nav__lang{
    display: inline-flex !important;
    height: 40px !important;
    min-height: 40px !important;
    padding-inline: 12px !important;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
  }

  /* Theme toggle is non-functional ("coming soon") — keep it hidden to
     free space for the CTA + lang. */

  /* Book Demo — compact but keeps a 44px tap target */
  .a8nav__cta{
    min-height: 44px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  /* ---- Nav links: hamburger drawer (styled inline in index.html @<=1100px). ----
     The drawer (position/visibility/transition) is owned by the inline nav
     <style>; mobile.css only tunes the tap-row sizing for phones. */
  .a8nav__links a{
    min-height: 48px !important;
    font-size: 16px !important;            /* comfortable phone reading size */
  }

  /* hamburger button — keep a clean 42px tap target */
  .a8nav__burger{
    width: 42px !important;
    height: 42px !important;
  }
}

/* ---- 380px refinement: tighten gutter & chips ---------------------- */
@media (max-width: 380px){
  .a8nav__inner{
    padding-inline: 14px !important;
    column-gap: 8px !important;
  }
  .a8nav__logo-img{ height: 28px !important; }

  .a8nav__lang{
    padding-inline: 10px !important;
    font-size: 11px !important;            /* lang glyph badge, still legible */
  }
  .a8nav__cta{
    padding: 0 14px !important;
    font-size: 12px !important;
  }
  /* keep the drawer gutter matched to the 14px page gutter */
  .a8nav__links{ padding-inline: 14px !important; }
}

/* ===== HERO ===== */
/* ============================================================
   HERO — #hero / .laptop-stage--bright (mobile)
   Caps the ~3038px scroll-dive reservation to ~one viewport,
   shrinks H1 to phone scale, fits the laptop/screen film,
   and keeps the misty scene covering without overflow.
   Loaded LAST (after sections.css) — equal-specificity rules
   win by source order; !important only beats higher-specificity
   desktop rules and GSAP inline pin-spacer styles.
   ============================================================ */
@media (max-width: 640px) {

  /* --- 1. Cap the camera-dive scroll reservation -----------------
     Desktop reserves 100vh pin + ~2.6x viewport scrub track
     (≈3.6 screens). On phones the long scrub is a chore: pin the
     sticky to ~one viewport and clamp the GSAP-generated pin-spacer
     so the section no longer hoards ~3 extra screens of scroll. */
  #hero.laptop-stage { height: auto; min-height: 0; }

  #hero .laptop-stage__sticky,
  #hero.laptop-stage--bright .laptop-stage__sticky {
    min-height: 92vh !important;          /* fallback for browsers without svh */
    height: 92vh !important;
    min-height: 100svh !important;        /* the intro fills the whole phone screen */
    height: 100svh !important;
    padding-block: 0 !important;
    overflow: hidden !important;
  }

  /* NOTE: do NOT clamp .pin-spacer height/padding here — GSAP sizes it to
     reserve the scrub track, and the JS already keeps the mobile dive short
     (ScrollTrigger end = +115vh on phones). Clamping it strangles the pin so
     the next section scrolls up over the film mid-dive. */

  /* --- 2. Misty scene plate: cover, never overflow ---------------
     .scene-plate is sized width:max(100vw,179.2vh) to over-cover.
     Keep it covering the 88vh stage but clip to the sticky so the
     oversized plate can't push page-level horizontal scroll. */
  #hero .laptop-stage__sticky { contain: paint; }

  #hero .desk-scene--bright {
    position: absolute; inset: 0;
    width: 100%; max-width: none;
    overflow: hidden;
  }

  #hero .scene-plate {
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    /* aspect-locked plate (1920:1072) covers the full 100svh stage; the laptop
       anchor stays aligned for the dive. 184vh slightly over-covers so there's
       never a gap when the address bar hides. */
    width: max(100vw, 184vh);
    max-width: none;
  }

  #hero .scene-plate .scene-photo {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
  }

  /* --- 3. Hero copy: phone type scale ----------------------------
     Live markup: h1 > .hl-line/.hl-2/.grad-text, sub = .stage-id.
     Desktop H1 computes ~43px (clamp 2.7rem). Bring to 30-34px,
     2-3 lines OK, tight leading, no overflow. */
  #hero.laptop-stage--bright .stage-hero {
    padding-top: clamp(72px, 14vh, 104px) !important;
    padding-inline: 16px;
    gap: var(--s1);
    text-align: center;
    box-sizing: border-box;
    max-width: 100%;
  }

  #hero.laptop-stage--bright .stage-hero h1 {
    font-size: clamp(30px, 8.4vw, 34px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    max-width: 16ch;
    margin-inline: auto;
    overflow-wrap: anywhere;
  }
  #hero.laptop-stage--bright .stage-hero h1 .hl-line { display: block; }

  /* sub-headline (.stage-id) — keep visible & legible, never <13px */
  #hero.laptop-stage--bright .stage-hero .stage-id,
  #hero.laptop-stage--bright .stage-hero .lead,
  #hero.laptop-stage--bright .stage-hero .stage-sub {
    display: block !important;
    font-size: clamp(15px, 4vw, 17px) !important;
    line-height: 1.5 !important;
    max-width: 34ch;
    margin: 0.6rem auto 0;
    padding-inline: 4px;
  }

  /* hero CTAs — comfy tap targets, wrap centered */
  #hero.laptop-stage--bright .stage-hero .hero__actions {
    margin-top: var(--s2);
    display: flex; flex-wrap: wrap;
    gap: 10px; justify-content: center;
  }
  #hero.laptop-stage--bright .stage-hero .hero__actions .btn {
    min-height: 44px;
    display: inline-flex; align-items: center;
    padding: 12px 22px !important;
  }

  /* --- 4. Laptop screen film — fit, never crop to mush -----------
     #hero-film tracks the screen rect then morphs to a floating
     card; the floating size is JS-driven from the sticky box, so
     capping the sticky already keeps it on-screen. Force contain
     on a dark plate so the desktop-UI clip is never cut off. */
  #hero #hero-film {
    object-fit: contain !important;
    background: #0b1020 !important;
    border-radius: 14px;
    max-width: 92vw;
  }

  /* live screen seated in the laptop (when shown in-frame) */
  #hero .scene-screen .laptop__screen,
  #hero .scene-screen .scene--video video {
    object-fit: contain !important;
    background: #0b1020;
  }
}

/* RTL: the Arabic hero shares these classes. Latin -0.02em tracking
   breaks Arabic cursive joining and the tight 1.05 leading clips
   shadda/tall letters — loosen + zero the tracking on phones too. */
@media (max-width: 640px) {
  [dir="rtl"] #hero.laptop-stage--bright .stage-hero h1 {
    letter-spacing: 0 !important;
    line-height: 1.22 !important;
    font-size: clamp(28px, 7.6vw, 32px) !important;
  }
}

/* --- 5. Small-phone refinement (<=380px) ----------------------- */
@media (max-width: 380px) {
  #hero.laptop-stage--bright .stage-hero {
    padding-inline: 14px !important;
  }
  #hero.laptop-stage--bright .stage-hero h1 {
    font-size: clamp(28px, 8vw, 31px) !important;
  }
  #hero.laptop-stage--bright .stage-hero .stage-id,
  #hero.laptop-stage--bright .stage-hero .lead,
  #hero.laptop-stage--bright .stage-hero .stage-sub {
    font-size: 15px !important;
  }
  #hero .laptop-stage__sticky,
  #hero.laptop-stage--bright .laptop-stage__sticky {
    min-height: 90vh !important;          /* fallback for no svh */
    height: 90vh !important;
    min-height: 100svh !important;        /* small phones: still fill the screen */
    height: 100svh !important;
  }
}

/* ===== ENGINE ===== */
/* ============================================================
   #tools — Annotation Engine explorer (engine showcase)
   selectors: #tools, .tx-cols3, .tx-col, .tx-use, .tx-cats,
              .tx-search, .tools-cine__deck
   ============================================================ */
@media (max-width: 640px){

  /* --- section rhythm + horizontal safety --- */
  #tools.section-pad{ padding-block: 56px !important; }
  #tools .container,
  #tools .tools-explorer,
  #tools .tools-engine__head{ padding-inline: 16px; max-width: 100%; }
  #tools .tools-explorer{ margin-top: 24px; }
  #tools *{ box-sizing: border-box; }

  /* engine heading — trim to phone scale */
  #tools .tools-engine__title{ font-size: clamp(28px, 9vw, 34px) !important; line-height: 1.05 !important; }
  #tools .tools-engine__sub{ font-size: 17px !important; line-height: 1.4 !important; }
  #tools .tools-engine__lede{ font-size: 15px !important; line-height: 1.6 !important; }
  #tools .tools-engine__proof{ font-size: 13px !important; line-height: 1.55 !important; }

  /* --- single-column stack (already stacks at 900px; lock it + clean gaps) --- */
  #tools .tx-cols3,
  #tools .tx-cols3.has-timeline{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    max-width: 100% !important;
  }
  /* rails grow to content on mobile — no inner scroll boxes */
  #tools .tx-cols3 .tx-col{
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  /* player FIRST so the demo leads; rails follow */
  #tools .tx-stage--center{ order: -1; }

  /* --- DEMO DECK: full-width clean framed video, nothing cropped --- */
  #tools .tx-stage--center .tools-cine__deck,
  #tools .tools-cine__deck{
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 14px !important;
    background: #0b1020 !important;
    margin-top: 0 !important;
  }
  /* desktop labeling-UI clip: contain so the whole UI stays readable */
  #tools .tools-cine__deck > video,
  #tools .tools-cine__deck .sops-cine__poster,
  #tools .tools-cine__deck > .sops-cine__poster{
    object-fit: contain !important;
    background: #0b1020 !important;
  }
  #tools .tx-hint{ font-size: 13px !important; margin-top: 14px; }

  /* --- breadcrumb caption --- */
  #tools .tx-cap{
    font-size: 13px !important;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto 16px !important;
  }

  /* --- column heads (CONFIGURATION / I'm working on…) >=13px --- */
  #tools .tx-col__head{
    font-size: 13px !important;
    letter-spacing: .06em;
    margin: 0 0 10px !important;
  }
  #tools .tx-sub{ font-size: 13px !important; margin: 14px 0 6px !important; }

  /* --- category top tabs (rail) — 44px comfortable rows --- */
  #tools .tx-railtop .tools-cine__tab{
    min-height: 44px;
    font-size: 14px !important;
    padding: 8px 16px;
  }

  /* --- configuration + use-case rows: 14px text, 44px tap rows --- */
  #tools .tx-config,
  #tools .tx-use{
    font-size: 14px !important;
    min-height: 44px;
    padding-block: 9px !important;
    padding-inline: 12px !important;
    border-radius: 10px;
    gap: 11px;
  }
  #tools .tx-config__name,
  #tools .tx-use__name{ font-size: 14px !important; line-height: 1.3; }
  #tools .tx-config__n,
  #tools .tx-cat__n{ font-size: 13px !important; }

  /* timeline rows: keep the spine, give breathing room */
  #tools .tx-timeline .tx-use{
    gap: 12px;
    padding-block: 7px !important;
    font-size: 14px !important;
  }
  #tools .tx-timeline:not(.is-search)::before{ inset-inline-start: 18px; }

  /* numbered 01/02 nodes — legible, larger circle */
  #tools .tx-use__node{
    width: 30px !important;
    height: 30px !important;
    font-size: 13px !important;
  }
  #tools .tx-use__node--dot{ width: 11px !important; height: 11px !important; }

  /* --- SEARCH / config row: full width, real 44px input --- */
  #tools .tx-uses__top{ margin-bottom: 8px; }
  #tools .tx-search{
    width: 100%;
    min-height: 44px;
    padding: 8px 14px !important;
    margin: 0 0 8px !important;
    border-radius: var(--r-pill);
  }
  #tools .tx-search input{
    font-size: 16px !important; /* 16px avoids iOS zoom-on-focus */
    min-height: 28px;
  }
}

/* --- #tools 380px refinement: tighter container, keep type >=13px --- */
@media (max-width: 380px){
  #tools.section-pad{ padding-block: 44px !important; }
  #tools .container,
  #tools .tools-explorer,
  #tools .tools-engine__head{ padding-inline: 14px; }
  #tools .tools-engine__title{ font-size: 28px !important; }
  #tools .tx-config,
  #tools .tx-use,
  #tools .tx-config__name,
  #tools .tx-use__name,
  #tools .tx-timeline .tx-use{ font-size: 13.5px !important; }
}

/* ===== ENGINE — horizontal timeline lanes (mobile only) =================
   Category · Configuration · Use-cases each become a swipeable horizontal
   stepper (circular node + label + connector line + active highlight),
   mirroring the #scale-ops launch-journey for one consistent mobile UX.
   Reuses existing elements: category dot, config count, use-case number
   all become the node. Loaded last → overrides the vertical-list rules.
   ====================================================================== */
@media (max-width: 640px){

  /* Order: category → DECK (video, visible + auto-plays on view) → configuration
     → use-cases. The video sits high so it's seen immediately; sections.js
     scrolls it back into view whenever you tap a config/use-case node that's
     below the fold, so navigating always shows the demo update. */
  #tools .tx-cols3,
  #tools .tx-cols3.has-timeline{
    display: flex !important; flex-direction: column !important; gap: 20px !important;
    align-items: stretch !important;   /* CRITICAL: full-width children — else the
       deck collapses to ~4px before the video loads (the "videos not shown" bug) */
  }
  #tools .tx-stage--center{ order: 0 !important; width: 100% !important; }   /* deck high — seen immediately */
  #tools .tx-col.tx-configs{ order: 1 !important; width: 100% !important; }
  #tools .tx-col.tx-uses{ order: 2 !important; width: 100% !important; }
  /* deck always reserves its 16:9 box (poster shows on the dark plate while the
     clip loads) so the video area is never an invisible sliver */
  #tools .tx-stage--center .tools-cine__deck{ width: 100% !important; min-height: 0; }

  /* lane container — full-bleed horizontal scroll-snap track */
  #tools .tx-railtop,
  #tools #show-configs,
  #tools #show-uses.tx-timeline,
  #tools #show-uses.tx-use-list{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 22px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: none !important;
    max-height: none !important;
    margin: 6px -16px 0 !important;
    padding: 8px 22px 6px !important;
    /* connector line behind the nodes (scrolls with content) */
    background-image: linear-gradient(var(--card-border, rgba(11,11,15,0.12)), var(--card-border, rgba(11,11,15,0.12)));
    background-repeat: no-repeat;
    background-position: 0 27px;
    background-size: 100% 2px;
    background-attachment: local;
  }
  #tools .tx-railtop::-webkit-scrollbar,
  #tools #show-configs::-webkit-scrollbar,
  #tools #show-uses::-webkit-scrollbar{ display: none !important; }
  /* the timeline's own vertical spine pseudo is not used in horizontal mode */
  #tools #show-uses.tx-timeline::before{ display: none !important; }

  /* node-item — node circle stacked over a centered label */
  #tools .tx-railtop .tools-cine__tab,
  #tools #show-configs .tx-config,
  #tools #show-uses .tx-use{
    flex: 0 0 auto !important;
    scroll-snap-align: center;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    width: auto !important;
    min-width: 58px !important;
    max-width: 96px !important;
    min-height: 0 !important;
    padding: 0 2px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    position: relative;
    z-index: 1;
  }

  /* the node circle (38px) — shared shape for all three levels */
  #tools .tools-cine__tab .tools-cine__tabdot,
  #tools .tx-config .tx-config__n,
  #tools .tx-use .tx-use__node{
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    font-family: var(--font-ui, 'Space Grotesk', sans-serif) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border: 2px solid var(--card-border, rgba(11,11,15,0.14)) !important;
    background: var(--bg, #FAFAF8) !important;
    color: var(--fg2, #3D4361) !important;
    /* opaque ring masks the connector line passing behind the node */
    box-shadow: 0 0 0 5px var(--bg, #FAFAF8) !important;
    transition: transform .25s var(--ease-out, ease), background .25s, border-color .25s, color .25s, box-shadow .25s !important;
  }
  /* category node: tinted by the modality colour, no number inside */
  #tools .tools-cine__tab .tools-cine__tabdot{
    border-color: color-mix(in srgb, var(--c, var(--brand)) 60%, transparent) !important;
    background: color-mix(in srgb, var(--c, var(--brand)) 16%, var(--bg)) !important;
  }
  #tools .tools-cine__tab .tools-cine__tabdot::after{
    content: ""; width: 11px; height: 11px; border-radius: 50%;
    background: var(--c, var(--brand));
  }
  /* config count node: order it ABOVE its name (markup has name first) */
  #tools .tx-config .tx-config__n{ order: -1 !important; }

  /* labels under the node */
  #tools .tx-railtop .tools-cine__tab,        /* category label is a bare text node on the button */
  #tools #show-configs .tx-config .tx-config__name,
  #tools #show-uses .tx-use .tx-use__name{
    font-family: var(--font-ui, 'Space Grotesk', sans-serif) !important;
    font-size: 12px !important;
    line-height: 1.22 !important;
    font-weight: 500 !important;
    color: var(--fg3, #6B7184) !important;
    text-align: center !important;
    white-space: normal !important;
    max-width: 92px !important;
  }

  /* active node + label (all three lanes) */
  #tools .tools-cine__tab.is-active .tools-cine__tabdot,
  #tools .tx-config.is-active .tx-config__n,
  #tools .tx-use.is-active .tx-use__node{
    border-color: var(--brand, #3F6FC8) !important;
    background: var(--brand, #3F6FC8) !important;
    color: #fff !important;
    transform: scale(1.1);
    box-shadow: 0 0 0 5px var(--bg, #FAFAF8),
                0 0 0 8px color-mix(in srgb, var(--brand, #3F6FC8) 18%, transparent),
                0 6px 16px rgba(63,111,200,0.32) !important;
  }
  #tools .tools-cine__tab.is-active .tools-cine__tabdot::after{ background: #fff; }
  #tools .tx-railtop .tools-cine__tab.is-active,
  #tools .tx-config.is-active .tx-config__name,
  #tools .tx-use.is-active .tx-use__name{
    color: var(--fg, #0B0B0F) !important;
    font-weight: 600 !important;
  }

  /* hide the "Single tool / Combined tools" sub-group labels inside the lane */
  #tools #show-configs .tx-sub{ display: none !important; }

  /* section heads + search sit centred above their lane */
  #tools .tx-col__head{ text-align: center !important; margin: 0 auto 2px !important; }
  #tools .tx-uses__top{ display: block !important; }
  #tools .tx-uses__top .tx-search{ margin: 8px auto 0 !important; max-width: 320px; }

  /* drop the breadcrumb caption duplication noise; keep it tidy + centred */
  #tools .tx-cap{ margin: 4px auto 2px !important; }
}

/* ===== SCALE ===== */
/* ============================================================
   #scale-ops — Operating Layer (console + launch-journey)
   Mobile fixes: cap section padding, full-width 16/9 console
   (contain, never cropped), and turn the 1216px journey track
   into ONE clean swipeable scroll-snap lane with 44px hit areas.
   ============================================================ */
@media (max-width: 640px) {
  /* tame the 160px (var(--s7)) vertical padding on this section */
  #scale-ops.sops.section-pad { padding-block: 56px !important; }

  /* both containers: 16px inline gutter, no horizontal overflow */
  #scale-ops .sops__intro,
  #scale-ops .sops-cine {
    max-width: 100% !important;
    padding-inline: 16px !important;
    box-sizing: border-box;
  }

  /* stack the split layout cleanly: cap -> console -> journey lane */
  #scale-ops .sops-cine--split {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
    max-width: 100% !important;
    margin-inline: auto;
  }
  #scale-ops .sops-cine--split .sops-cine__nav { margin-top: 0; min-width: 0; width: 100%; }

  /* caption: wraps from the start edge, comfortable size */
  #scale-ops .sops-cine__cap {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 4px;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
  }

  /* the console device — full-width, clean 16/9, nothing cropped to mush */
  #scale-ops .sops-cine__deck {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    background: #0b1020;
  }
  #scale-ops .sops-cine__panel video,
  #scale-ops .sops-cine__poster {
    object-fit: contain !important;
    background: #0b1020;
  }

  /* ---- launch journey: ONE swipeable scroll-snap lane ---- */
  #scale-ops .sops-cine__dots {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-top: 8px !important;
    padding: 6px 0 4px;
    /* let the lane bleed to the screen edges so the first/last
       node can center; cancels the 16px container gutter */
    margin-inline: -16px;
    padding-inline: 16px;
  }
  #scale-ops .sops-cine__dots::-webkit-scrollbar { display: none; }

  /* horizontal track (base orientation — desktop column kicks in >900px) */
  #scale-ops .sops-journey__track {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    width: max-content;
    min-width: 100%;
    height: auto;
    gap: 14px;
  }
  /* horizontal connector line/fill (override desktop's vertical geometry) */
  #scale-ops .sops-journey__line,
  #scale-ops .sops-journey__fill {
    top: 21px;
    bottom: auto;
    left: 0;
    right: auto;
    width: auto;
    height: 2px;
  }
  #scale-ops .sops-journey__line { left: 0; right: 0; }
  [dir="rtl"] #scale-ops .sops-journey__fill { left: auto; right: 0; }

  /* each step: column node+label, 44px tap target, snap point */
  #scale-ops .sops-cine__btn {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: auto;
    min-width: 56px;
    min-height: 44px;
    padding: 0 6px !important;
    scroll-snap-align: center;
  }
  #scale-ops .sops-cine__node {
    width: 42px;
    height: 42px;
    font-size: 13px;
  }
  #scale-ops .sops-cine__lbl {
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--fg3);
  }
}

@media (max-width: 380px) {
  #scale-ops.sops.section-pad { padding-block: 44px !important; }
  #scale-ops .sops__intro,
  #scale-ops .sops-cine { padding-inline: 14px !important; }
  #scale-ops .sops-cine__dots { margin-inline: -14px; padding-inline: 14px; }
  #scale-ops .sops-journey__track { gap: 12px; }
  #scale-ops .sops-cine__btn { min-width: 52px; padding: 0 4px !important; }
}

/* ===== ASSISTANT ===== */
/* ============================================================
   ASSISTANT STUDIO — .astu / #assistant-gallery  (mobile)
   Owns: section padding, persona tab swipe-row (#astuTabs),
   video player (.astu__frame/.astu__video), persona meta,
   use-case picker (tx-* reused inside .astu__right).
   Loaded after sections.css -> wins by source order.
   !important used ONLY to beat higher-specificity desktop rules
   (.section-pad = var(--s7), .astu__grid 760px rule, .tx-* rules).
   ============================================================ */
@media (max-width: 640px){

  /* --- section rhythm: kill the 160px (.section-pad = var(--s7)) --- */
  #assistant-gallery.astu.section-pad{ padding-block: 48px !important; }
  .astu{ overflow-x: clip; }

  /* --- heading block --- */
  .astu__head{ margin: 0 auto 22px; padding-inline: 16px; }
  .astu__h2{ font-size: clamp(24px, 7.2vw, 28px); line-height: 1.08; }
  .astu__sub{ font-size: clamp(17px, 5vw, 20px); margin: 0 0 10px; }
  .astu__lede{ font-size: 15px; line-height: 1.55; }

  /* --- persona tabs: ONE horizontal scroll-snap chip row --- */
  .astu__tabs{
    display: flex;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    gap: 8px;
    max-width: 100%;
    margin: 0 0 18px;
    padding-inline: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-padding-inline: 16px;
  }
  .astu__tabs::-webkit-scrollbar{ display: none; }
  .astu__tab{
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    padding: 10px 16px;
    white-space: nowrap;
  }

  /* --- grid -> single column (overrides desktop minmax + 760px rule) --- */
  .astu__grid{ grid-template-columns: 1fr !important; gap: 16px; max-width: 100%; }
  .astu__personarow{ margin: 0 auto 14px; max-width: 100%; padding-inline: 16px; }
  .astu__persona{ min-height: 0; }
  .astu__pmeta{ flex-direction: column; gap: 12px; }
  .astu__persona h3{ font-size: 18px; }

  /* --- pains: stack, readable (>=13px) --- */
  .astu__pains{ grid-template-columns: 1fr; gap: 10px; }
  .astu__pain{ font-size: 13px; line-height: 1.45; padding-block: 12px; }

  /* --- metrics row stays readable --- */
  .astu__metrics{ margin-top: 14px; padding-top: 12px; }
  .astu__metric b{ font-size: 18px; }
  .astu__metric span{ font-size: 13px; }

  /* --- video player: full-width 16/9, contain on dark, rounded --- */
  .astu__mid{ padding-inline: 16px; }
  .astu__frame{ border-radius: 14px; }
  .astu__bar{ height: 34px; padding: 0 14px; }
  .astu__bar span{ font-size: 13px; margin-left: 10px; }
  .astu__video{
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #07080D;
    border-radius: 0;
  }
  /* hear-the-agent button: keep tappable, out of the way */
  .astu__vo{ bottom: 50px; }
  .astu__vo.is-on{ inset-block-start: 10px; inset-inline-end: 10px; }

  /* --- "see this" caption + ask bar --- */
  .astu__see{ margin: 14px 16px 0; }
  .astu__seetxt{ font-size: 14px; line-height: 1.5; }
  .astu__ask{ margin: 0 16px 12px; padding: 9px 9px 9px 14px; }
  .astu__askq{ font-size: 13px; }
  .astu__send{ width: 36px; height: 36px; flex-shrink: 0; }

  /* --- use-case picker (.astu__right reuses .tx-* timeline) --- */
  .astu__right{ padding-inline: 16px; }
  .astu__right .tx-col__head{ font-size: 13px; margin: 0 0 9px 2px; }
  .astu__right .tx-uses__top{ padding-top: 0; }
  .astu__right .tx-search{ padding: 8px 12px; margin: 0 2px 8px; }
  .astu__right .tx-search input{ font-size: 13px; }
  /* use-case rows: bump to >=13px, give 44px tap height */
  .astu__right .tx-timeline .tx-use{
    min-height: 44px;
    font-size: 13px;
    gap: 12px;
    padding-block: 7px;
  }
  .astu__right .tx-use__node{ width: 28px; height: 28px; font-size: 11px; }
  .astu__right .tx-use__name{ font-size: 13px; line-height: 1.35; }
  /* timeline rail uses logical inset already in source; nudge for new node size */
  .astu__right .tx-timeline:not(.is-search)::before{ inset-inline-start: 19px; left: auto; }
}

/* RTL mirror: rail + ask-bar padding use logical props above; explicit
   left:auto guard so the LTR ::before fallback never leaks into RTL */
@media (max-width: 640px){
  [dir="rtl"] .astu__right .tx-timeline:not(.is-search)::before{ left: auto; inset-inline-start: 19px; }
  [dir="rtl"] .astu__ask{ padding: 9px 14px 9px 9px; }
}

/* ---------- 380px refinement ---------- */
@media (max-width: 380px){
  #assistant-gallery.astu.section-pad{ padding-block: 40px !important; }
  .astu__head{ padding-inline: 14px; }
  .astu__h2{ font-size: clamp(22px, 7.6vw, 25px); }
  .astu__lede{ font-size: 14px; }
  .astu__tabs{ padding-inline: 14px; scroll-padding-inline: 14px; gap: 7px; }
  .astu__tab{ padding: 10px 14px; }
  .astu__personarow,
  .astu__mid,
  .astu__right,
  .astu__head{ padding-inline: 14px; }
  .astu__see{ margin-inline: 14px; }
  .astu__ask{ margin-inline: 14px; }
  .astu__pain{ font-size: 13px; }
  .astu__right .tx-use__name{ font-size: 13px; }
}

/* ===== TEMPLATES ===== */
/* ============================================================
   MOBILE — templates wall + roadmap logo marquee + backers band
   Scope: #templates .twall*, #roadmap .rm-marquee*, .backers*
   Loaded LAST (after sections.css). !important only where needed
   to beat ID-scoped / inline desktop rules.
   ============================================================ */
@media (max-width: 640px){

  /* ---- lane overflow guard: marquee lanes never push page width ---- */
  #templates .twall,
  #templates .twall__row,
  #roadmap .rm-marquee,
  .backers,
  .backers-marquee{
    max-width: 100%;
    overflow: hidden;
  }

  /* ============ §template wall (#templates) ============ */

  /* section cadence — kill the big trio padding on phone */
  #templates.section-pad{
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    padding-inline: 16px;
  }
  #templates .twall__head{
    max-width: 100% !important;
    margin-bottom: 24px;
    text-align: start;
  }
  /* H2 ~41px -> ~25px (beats --sx-h2 ID rule) */
  #templates .twall__head h2{
    font-size: clamp(24px, 6.4vw, 26px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
  }
  /* lede readable, full measure */
  #templates .twall__head .lead{
    font-size: 16px !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
  }
  #templates .twall__head .eyebrow{
    font-size: 13px;
  }
  /* centering override from desktop -> start-aligned block */
  #templates .twall__head > *{
    margin-inline: 0 !important;
  }

  /* rows: compact vertical rhythm, keep infinite scroll */
  #templates .twall__rows{ gap: 12px; }
  #templates .twall__track{ gap: 12px; }

  /* cards sized so ~2 peek; phone-tight (was clamp 250–350) */
  #templates .twall__card{
    width: 200px;
    border-radius: 12px;
  }
  /* 16/9 media stays clean; caption legible (>=13px) */
  #templates .twall__card video,
  #templates .twall__card img{
    aspect-ratio: 16/9;
    object-fit: cover;
  }
  #templates .twall__card figcaption{
    font-size: 13px;
    padding: 0.6em 0.75em;
    line-height: 1.3;
  }

  /* ============ §roadmap logo marquee (#roadmap .rm-marquee) ============ */
  #roadmap .rm-marquee{
    border-radius: 14px;
  }
  /* compact lane row height + logo card */
  #roadmap .rm-logo{
    min-width: 230px;
    height: 72px;
    padding: 12px 18px;
    gap: 12px;
    margin-right: 16px;
    border-radius: 14px;
  }
  #roadmap .rm-logo img{
    height: 34px;
    max-width: 120px;
  }
  #roadmap .rm-logo__t{ font-size: 14px; }
  #roadmap .rm-logo__s{ font-size: 13px; letter-spacing: 0.06em; } /* 10px -> 13px floor */

  /* ============ §backers band (.backers / .backers-track) ============ */
  .backers{
    padding-block: 56px !important;
    padding-inline: 16px;
  }
  .backers__head{
    max-width: 100%;
    margin-bottom: 24px;
  }
  .backers__title{
    font-size: clamp(24px, 6.4vw, 26px) !important;
    line-height: 1.15;
  }
  .backers__head .lead{
    font-size: 16px;
    max-width: 100%;
  }
  .backers__head .eyebrow{ font-size: 13px; }
  .backers-marquee{ border-radius: 14px; }
  /* compact logo lane padding so row height shrinks */
  .backers-track{
    gap: 16px;
    padding: 16px 18px;
  }
  .backer-card{
    min-width: 220px;
    height: 72px;
    padding: 12px 18px;
    gap: 12px;
    border-radius: 14px;
  }
  .backer-card__logo{
    height: 30px;
    max-width: 100px;
  }
  .backer-card__meta b{ font-size: 14px; }
  .backer-card__meta i{ font-size: 13px; letter-spacing: 0.08em; } /* 10px -> 13px floor */
}

/* ---- 380px refinement: tighter inline padding + slightly smaller cards ---- */
@media (max-width: 380px){
  #templates.section-pad{
    padding-top: 44px !important;
    padding-bottom: 44px !important;
    padding-inline: 14px;
  }
  #templates .twall__card{ width: 184px; }
  #templates .twall__head h2{ font-size: 24px !important; }

  .backers{
    padding-block: 44px !important;
    padding-inline: 14px;
  }
  .backers__title{ font-size: 24px !important; }
  .backer-card{ min-width: 200px; }
  #roadmap .rm-logo{ min-width: 210px; }
}

/* ---- RTL parity: lanes stay LTR-authored (matches source); start-align heads ---- */
@media (max-width: 640px){
  html[dir="rtl"] #templates .twall__head,
  html[dir="rtl"] .backers__head{ text-align: start; }
  html[dir="rtl"] #templates .twall__head > *{ margin-inline: 0 !important; }
}

/* ===== PERF OVERRIDE (mobile): drop content-visibility ============
   sections.css applies content-visibility:auto with DESKTOP
   contain-intrinsic-size placeholders (1500–1720px). On phones the
   real single-column heights differ wildly, so the placeholders cause
   scrollbar jumps + deferred-paint white flashes on first approach,
   and interfere with scroll-reveal timing. Phones render this page
   fine without it — disable on mobile; desktop keeps the optimisation.
   ================================================================ */
@media (max-width: 640px){
  #tools, #scale-ops, #assistant-gallery, #roadmap, #templates, .a8-footer{
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
  }
}

/* ===== REVEAL SAFETY (mobile) =====================================
   Scroll-reveals that fade content in from opacity:0 are fragile on
   phones: the long pinned hero + content-visibility:auto make the
   rect/ScrollTrigger checks mis-fire, leaving copy stuck faded or
   invisible (esp. the roadmap "What's next" cards). On phones we
   prioritise guaranteed legibility over the entrance flourish and
   pin every reveal to its final visible state. Heavier GSAP set
   pieces (hero film, marquees) are untouched — they run their own
   timelines and are not gated on these classes.
   ================================================================ */
@media (max-width: 640px){
  /* roadmap fade-rise (.in toggle) + generic data-reveal */
  [data-reveal],
  #roadmap .rm-rise,
  #roadmap .rmx-card,
  html:not(.no-js) #roadmap .rm-rise,
  html:not(.no-js) #roadmap .rmx-card,
  /* section-head assemble reveal (sections.js assembleHead → gsap.set inline
     opacity:0 + y/blur on #tools/#scale-ops/#templates heads). !important
     beats the inline gsap styles so the copy is never stuck invisible. */
  #tools .tools-engine__sub,
  #tools .tools-engine__lede,
  #tools .tools-engine__proof,
  #tools .tools-engine__title .a8-ch,
  #scale-ops .sops__intro .lead,
  #scale-ops .sops-h2-txt,
  #scale-ops .sops__intro .a8-ch,
  #templates .twall__head .lead,
  #templates .twall-h2-txt,
  #templates .twall__head .a8-ch,
  /* kinetic char splits + proof/stat reveals elsewhere on the page */
  .a8-ch,
  #tools .tools-engine__head .eyebrow{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ===== MICRO-TYPE FLOOR (mobile) — lift the genuinely-too-small 10px chrome ===== */
@media (max-width: 640px){
  /* footer microcopy was 10–10.5px → 12px (still secondary, now legible) */
  .a8-footer__col-title,
  .a8-footer__regions-label,
  .a8-footer__regions span,
  .a8-footer small{ font-size: 12px !important; }
  /* roadmap/template status pills were 10–11px uppercase → 11.5px floor */
  .rm-logo__s,
  #roadmap .badge, #roadmap span.tag,
  .badge--live, .badge{ font-size: 11.5px !important; }
  /* eyebrows: hold a clean 11.5px (uppercase kickers stay small but readable) */
  .eyebrow{ font-size: 11.5px !important; }
}

/* numbered timeline nodes: enlarge circle so a 12px digit is legible */
@media (max-width: 640px){
  .tx-use__node{ width:26px !important; height:26px !important; font-size:12px !important; }
  /* roadmap phase pills are classless inline-styled 10px spans → lift to 11.5px */
  span[style*="font-size:10px"]{ font-size:11.5px !important; }
}