/* ==========================================================================
   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{
    background: var(--nav-bg, rgba(250,250,248,0.86)) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
    border-bottom: 1px solid var(--rule, rgba(11,11,15,0.08)) !important;
  }

  .a8nav__inner{
    height: auto !important;
    min-height: 56px !important;
    flex-wrap: wrap !important;            /* brand bar row + links lane row */
    align-items: center !important;
    gap: 8px !important;
    padding-block: 8px !important;
    padding-inline: 16px !important;       /* container gutter, border-box safe */
    column-gap: 10px !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. */
  .a8nav__theme{ display: none !important; }

  /* 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 → single scroll-snap lane (no hamburger, no JS) ---- */
  /* Was display:none on mobile (links unreachable). Restore as one clean
     swipeable row beneath the brand bar — 44px tap rows, never wraps. */
  .a8nav__links{
    display: flex !important;
    order: 3 !important;                   /* force onto its own wrapped row */
    flex: 1 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin: 0 !important;
    padding-block: 2px 4px !important;
    /* bleed to the bar edges so the lane reads as full-width and the last
       chip can scroll fully into view */
    margin-inline: -16px !important;
    padding-inline: 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;      /* Firefox */
  }
  .a8nav__links::-webkit-scrollbar{ display: none !important; }

  .a8nav__links a{
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    border: 1px solid var(--card-border, rgba(11,11,15,0.10)) !important;
    background: color-mix(in srgb, var(--fg, #0B0B0F) 4%, transparent) !important;
    color: var(--fg2, #3D4361) !important;
    font-size: 13px !important;            /* never below the 13px floor */
    font-weight: 500 !important;
    white-space: nowrap !important;
  }
  .a8nav__links a:hover,
  .a8nav__links a:active,
  .a8nav__links a:focus-visible{
    color: var(--fg, #0B0B0F) !important;
    border-color: var(--fg3, #6B7184) !important;
  }

  /* RTL: lane flows right→left; the edge bleed is symmetric (margin-inline
     is logical, so it mirrors automatically). Restore the desktop RTL font
     down-shift back up to the 13px floor so Arabic labels stay legible. */
  [dir="rtl"] .a8nav__links a{ font-size: 13px !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 lane edge-bleed matched to the 14px gutter */
  .a8nav__links{
    margin-inline: -14px !important;
    padding-inline: 14px !important;
    gap: 6px !important;
  }
  .a8nav__links a{
    padding: 0 12px !important;
    font-size: 13px !important;            /* hold the 13px floor */
  }
}

/* ===== 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: 88vh !important;
    height: 88vh !important;
    padding-block: 0 !important;
    overflow: hidden !important;
  }

  /* GSAP wraps the pinned sticky in a .pin-spacer whose height/
     padding-bottom reserve the scrub track. Clamp that reservation
     on phones so the dive resolves in ~1.4 viewports, not ~3.6. */
  #hero .pin-spacer {
    min-height: 0 !important;
    max-height: 140vh !important;
    padding-bottom: 0 !important;
  }

  /* --- 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%);
    width: max(100vw, 156.6vh); /* keep 1376:768 aspect, cover 88vh */
    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: 14px !important;
  }
  #hero .laptop-stage__sticky,
  #hero.laptop-stage--bright .laptop-stage__sticky {
    min-height: 86vh !important;
    height: 86vh !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; }
}

/* ===== 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; }
}

/* ===== 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; }
}