/* ===========================================================================
   /v2 MOBILE. NO hamburger, NO drawer - the shared bottom bar IS the mobile
   navigation (same items/IA as site-wide), re-skinned here in the v2 language:
   navy glass ground, aqua active color, the Yetty RING as the More button
   (aqua->pink gradient stroke), fa-light icons, Bricolage labels. The bar's
   markup/JS stay shared (site/inc/bottom-bar.php); everything below is
   page-scoped CSS. `html body` prefixes out-rank the bar's own late-emitted
   rules. Reduced-motion: instant open/close. RTL: logical properties.
   =========================================================================== */

/* header goes minimal: logo + plain-text Start free. Nav + signin hide. */
@media(max-width:860px){
 .v2hd-nav,.v2hd-signin{display:none}
 .v2hd-in{height:60px;gap:12px}
 .v2 .hero{padding-top:calc(60px + 40px)}
}

/* ---- bottom bar: v2 skin ---- */
@media(max-width:680px){
 html body .bbar{background:rgba(5,15,24,.94);backdrop-filter:blur(16px);border-top:1px solid rgba(34,211,238,.16)}
 html body .bbar a{color:#8FA9BC;font-family:var(--head)}
 html body .bbar a .bi i{font-weight:300}
 html body .bbar a:active{transform:translateY(2px) scale(.96)}
 html body .bbar .pub,html body .bbar .pub .bi{color:var(--cyan)}
 /* the More opener: plain glyph like its siblings - no ring (Avni 2026-08-16) */
 html body .bbar #bMore .bi{display:inline-flex;align-items:center;justify-content:center;
  transition:transform .18s var(--ez)}
 html body .bbar #bMore .bi i{font-size:18px;color:#EAF6FB;font-weight:300}
 html body .bbar #bMore:active .bi{transform:scale(.88)}
 /* the sheet: navy glass, spacing-grouped links (RULE A), smooth slide-up */
 html body .bsheet{background:rgba(7,21,33,.97);backdrop-filter:blur(18px);border:1px solid rgba(34,211,238,.15);
  box-shadow:0 -24px 70px rgba(0,0,0,.6);border-radius:20px;
  transform:translateY(14px);transition:transform .24s var(--ez),opacity .24s var(--ez)}
 html body .bsheet.open{transform:translateY(0)}
 html body .bsheet::after{background:#0B2231;border-color:rgba(34,211,238,.15)}
 /* sheet titles = pink; icons = ONE light tone, no alternating (Avni 2026-08-16) */
 html body .bsheet .bcat{color:#FF7FAE;font-family:var(--head);letter-spacing:.14em;padding-top:16px}
 html body .bsheet a{color:#DCEAF3;font-family:var(--head)}
 html body .bsheet a .bi{color:#A6C0D2}
 html body .bsheet a:active{background:rgba(34,211,238,.08)}
 html body .bscrim{background:rgba(3,10,16,.5)}
}
@media(prefers-reduced-motion:reduce){
 html body .bsheet{transition:none}
 html body .bbar #bMore .bi{transition:none}
}

/* ---- mobile compact tab rows (Avni): the tall stacked tab list becomes a
   slim horizontally-scrolling CHIP ROW right above the pane, so the selector
   AND the selected content share one viewport. NO edge-fade masks (no fades
   anywhere): the row bleeds to the viewport edge and the partially visible
   next chip is the scroll hint. Snap + active ring treatment; RTL scrolls
   natively; desktop untouched. ---- */
@media(max-width:700px){
 .v2 .tabs{flex-direction:row;justify-content:flex-start;overflow-x:auto;gap:8px;margin:0 calc(-1*var(--gut));padding:4px var(--gut) 12px;
  scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .v2 .tabs::-webkit-scrollbar{display:none}
 .v2 .tab{flex:0 0 auto;width:auto;scroll-snap-align:start;align-items:center;gap:8px;
  border:1.5px solid var(--line);border-inline-start-width:1.5px;border-radius:99px;
  padding:11px 15px;min-height:44px;background:#fff} /* >=44px tap target */
 .v2 .tab .tn{width:auto;height:auto;font-size:15px}
 .v2 .tab b{font-size:13px;white-space:nowrap}
 .v2 .tab>span:last-child>span{display:none} /* chip = icon + short label only */
 .v2 .tab.on{border-color:var(--aqua);background:#EFFAFD;box-shadow:0 0 0 3px rgba(6,182,212,.14)}
 .v2 .tab.on .tn{color:var(--aqua2);transform:none}
 .v2 .tab.on b{color:var(--aqua2)}
 .v2 .swgrid{gap:14px}
 .v2 .stage{min-height:0}
 .v2 .pane{justify-content:flex-start}
 .v2 .pane .plink{margin-top:4px}
 .v2 .pane .ghost{font-size:120px}
}

/* ---- hero stats: equal aligned columns on mobile (was a wrapping flex row
   with uneven tracks - "50 pages" started at a different x). Grid = identical
   tracks + shared gaps; all-logical properties so RTL mirrors cleanly. ---- */
@media(max-width:700px){
 .v2 .stats{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
 .v2 .stat{margin:0;min-width:0}
 .v2 .stat span{max-width:none}
}

/* ---- small-screen section tuning + bottom-bar clearance ---- */
@media(max-width:680px){
 .v2 .close{padding-bottom:calc(110px + env(safe-area-inset-bottom))} /* floating CTA clears the bar on notched phones */
 .v2 .band{padding:56px 0}
 .v2 .big{font-size:2.2rem}
 .v2 .stats{margin-top:32px}
 .v2 .stage{max-width:100%}
 .v2 .chat{height:380px}
 .v2 .cmpwrap{-webkit-overflow-scrolling:touch}
 .v2 .prc.hot{padding:28px 22px}
}

/* ---- phone-only polish sweep (2026-08-16) ---- */
@media(max-width:700px){
 /* hero: h1 a notch smaller so lines break on phrase seams, not mid-phrase */
 .v2 .hero h1{font-size:2.35rem}
 /* value row: compact so 7 pills wrap cleanly without stretching the hero -
    tighter type/padding/gaps, and less top air above + below it */
 .v2 .hero .hvals{margin-top:18px;gap:7px;max-width:none}
 .v2 .hero .hvals span{font-size:11.5px;padding:8px 12px;gap:7px}
 .v2 .hero .hbrow{margin-top:18px}
 /* the film tightens: the settled halo only needs ~300px - kills the dead
    band between the trust line and the chips */
 .v2 .hero .readsline{margin-top:14px}
 /* marquee drifts slower on a narrow screen (same track, less px/s) */
 .v2 .mtrack{animation-duration:56s}
 /* compare table: bleed to the viewport edge so the cut column IS the scroll
    hint (no fades), and the row copy sets tighter */
 .v2 .cmpwrap{margin-inline:calc(-1*var(--gut));padding-inline:var(--gut)}
 .v2 table.cmp th,.v2 table.cmp td{padding:14px 14px}
 /* comparison deep links: 44px touch rows */
 .v2 .dives a{min-height:44px}
 /* no-more list: tighter rhythm - 12 rows read as one strip, not a page */
 .v2 .nmgrid{gap:16px}
 .v2 .nmgrid s{font-size:15px}
 /* FAQ: slightly tighter rows, same >=44px comfort */
 .v2 details.q summary{padding:18px 0;font-size:16px}
}

/* ---- DECLUTTER (Avni 2026-08-17): "too many small texts" on mobile. The tiny
   uppercase eyebrows above big headings are the main offender. "You drop" /
   "You get" are gone in markup (the headings carry the meaning). Two more that
   the heading below already covers get hidden on phones only (desktop keeps
   them as tasteful mini-labels): the MCP "The MCP control plane" kicker. ---- */
@media(max-width:700px){
 .v2 .mcp .kick{display:none}              /* heading "Your AI runs the whole site" is enough */
}

/* ---- hero film: phone safe-area insets (adversarial review 2026-08-17).
   At 390 the file-scatter staging offset (--zx0:-100px from the 960 rule)
   pushed index.html/style.css/about.html past x=0 (left edge -22px = clipped
   corners), and the settled halo's bottom chips (Media library, Custom
   domain, Backups) ended under the fixed bottom bar at the initial view.
   Fix: pull the staging cluster inward, drop the film's dead band to the
   ~300px the settled halo actually needs (the intent already noted above),
   and flatten the halo's Y so every settled chip clears the bar. ---- */
@media(max-width:700px){
 .v2 .hfilm{padding-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right))}
 /* film box was 300px but the scaled chip cloud only fills ~182px, leaving
    ~59px dead at top+bottom - tighten so the hero doesn't gap (Avni 2026-08-17) */
 .v2 .film{--zx0:-56px;height:232px}
 [dir="rtl"] .v2 .film{--zx0:56px}
 .v2 .fl-chip{--Y:calc(var(--y)*var(--R)*.75)}
}

/* ---- MCP mobile order (Avni 2026-08-17): on phones the terminal/diagram was
   showing BEFORE the text - "not good". Desired stack: heading + lead + steps
   (the content) FIRST, then the diagram, then the button/link LAST. The text
   lives in one wrapper (.mtext) so `order` alone can't drop the diagram between
   the steps and the button (they are at different DOM depths). display:contents
   dissolves the wrapper so its children join .mgrid's grid, and then `order`
   interleaves them with .chat - CSS only, ZERO markup duplication. Applies at
   the same width the grid already stacks (<=940). RTL-safe (order is logical). */
@media(max-width:940px){
 .v2 .mgrid>.mtext{display:contents}
 .v2 .mgrid>.chat{order:2}          /* diagram sits after the content... */
 .v2 .mgrid .mtext>.ctarow{order:3} /* ...and before the button/link */
}

/* ---- SWIPE CARDS (Avni): one reusable phone pattern - .vswipe turns a
   stacked card grid into a horizontal scroll-snap carousel: active card ~90vw
   snap-aligned to the FRAME START, next card peeking, momentum scroll, hidden
   scrollbar. RTL scrolls natively (logical props only). Desktop untouched -
   the class only means anything under 700px. Applied to: #who persona cards
   ONLY (pricing STACKS on phones - Avni 2026-08-17: the Live card must sit
   right below Free, fully visible by normal vertical scrolling). ---- */
@media(max-width:700px){
 .v2 .vswipe{display:grid;grid-auto-flow:column;grid-auto-columns:calc(90vw - var(--gut));grid-template-columns:none;
  gap:12px;overflow-x:auto;margin-inline:calc(-1*var(--gut));padding-inline:var(--gut);
  padding-top:16px;padding-bottom:8px; /* room for card shadows */
  scroll-snap-type:x mandatory;scroll-padding-inline-start:var(--gut);
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .v2 .vswipe::-webkit-scrollbar{display:none}
 .v2 .vswipe>*{scroll-snap-align:start;min-width:0}
 /* persona cards share one row height */
 .v2 .vswipe .pcard{height:100%}
}