/* ════════════════════════════════════════════════════════════════════
   Classie — mobile.css
   Loaded LAST on every site page. Native-feeling phone layouts, not just
   shrunk desktop. Primary phone breakpoint 640px; small-phone 400px.
   Everything here is additive / overriding — desktop is untouched.
   ════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────  GLOBAL  (≤640) ───────────────────────── */
@media(max-width:640px){
  :root{ --gutter:18px; }
  .wrap{ padding:0 var(--gutter); }

  /* calmer vertical rhythm so sections don't feel like endless scroll */
  .section{ padding:44px 0; }
  .section.tight{ padding:34px 0; }

  /* type: tighten the big display sizes for a phone column */
  .h2{ font-size:clamp(27px,8vw,34px); margin-top:14px; }
  .lead{ font-size:16.5px; margin-top:16px; line-height:1.5; }
  .eyebrow{ font-size:11.5px; letter-spacing:.18em; }

  /* NOTE: never hide <br> in headers — collapsing it fuses adjacent words
     ("problem"+"in" -> "problemin"). Let it break naturally on mobile. */

  /* full-width, thumb-friendly buttons in primary CTA rows */
  .cta-row{ gap:10px; }
}

/* ─────────────────────────  NAV  (≤640) ──────────────────────────── */
@media(max-width:640px){
  .site-nav{ padding:12px 18px; }
  .site-nav.scrolled{ padding-top:10px; padding-bottom:10px; }
  .nav-word{ font-size:20px; }
  .nav-actions{ gap:9px; }
  .theme-toggle{ width:40px; height:40px; }
  /* the "Book a Demo" pill in the header is redundant next to the burger
     and crowds the bar — the burger sheet already carries the CTA */
  .nav-actions .btn-primary{ display:none; }
}

/* ─────────────────────────  HERO  (≤640) ─────────────────────────── */
@media(max-width:640px){
  /* don't reserve a full empty viewport above the fold on a phone */
  .hero{ min-height:auto; padding-top:88px; padding-bottom:8px; }
  .hero-inner{ align-items:start; }
  .hero-live .hero-inner,
  .hero-board .hero-inner{ gap:24px; }

  /* headline sized to the column, not the desktop */
  .hero-live .h1{ font-size:clamp(36px,10.2vw,46px); line-height:1.04; }
  .hero-board .h1{ font-size:clamp(36px,10.2vw,46px); line-height:1.04; }
  .hero-sub,
  .hero-live .hero-sub,
  .hero-board .hero-sub{ font-size:16.5px; margin-top:16px; max-width:none; }
  .hero .cta-row{ margin-top:22px; }

  /* stack the two hero CTAs into full-width app-style buttons */
  .hero .cta-row{ flex-direction:column; align-items:stretch; }
  .hero .cta-row .btn{ width:100%; justify-content:center; padding:15px 20px; }

  /* the rings graphic: a clean, centered, contained first image */
  .hero-art{ justify-content:center; overflow:visible; margin-top:6px; }
  .rings-graphic{ transform:scale(.6); margin:-108px auto -96px; }
}
@media(max-width:400px){
  .hero-live .h1,.hero-board .h1{ font-size:35px; }
  .rings-graphic{ transform:scale(.52); margin:-130px auto -116px; }
}

/* ───────────────  HOME: kill the getting-started toast  ──────────── */
@media(max-width:640px){
  /* a fixed bottom popup on load is desktop-only behaviour; on a phone it
     covers content and feels broken. Hide it entirely. */
  .start-toast{ display:none !important; }
}

/* ─────────────────────────  PROOF BAR  (≤640) ────────────────────── */
@media(max-width:640px){
  .proof-cell{ padding:20px 16px; }
  .proof-n{ font-size:26px; }
  .proof-l{ font-size:10px; }
}

/* ═══════════════  SOLUTIONS  ═══════════════ */

/* Use-case cards: keep a 2×2 grid of compact tiles, not a tall single stack.
   (pages.css collapses .uc-grid to 1fr at 760 — restore the 2-up here.) */
@media(max-width:760px){
  .uc-grid{ grid-template-columns:repeat(2,1fr); gap:12px; margin-top:30px; }
}
@media(max-width:640px){
  .uc-card{ padding:13px 12px 14px; border-radius:13px; }
  .uc-top{ margin-bottom:9px; }
  .uc-ic{ width:30px; height:30px; border-radius:8px; }
  .uc-ic svg{ width:16px; height:16px; }
  .uc-tag{ font-size:9.5px; padding:3px 7px; }
  .uc-h{ font-size:13.5px; line-height:1.18; }
  .uc-b{ font-size:11.5px; line-height:1.4; margin-top:5px; }
}

/* Persona strip: comfortable single column with tighter cards */
@media(max-width:640px){
  .persona-grid{ gap:12px; margin-top:26px; }
  .persona-card{ padding:18px; border-radius:14px; }
}

/* Delivery: Slack + email windows.
   On a phone the desktop chrome (channel sidebar) is dead weight — drop it and
   let each window read like a single native message card, stacked. */
@media(max-width:640px){
  .deliver2{ gap:16px; margin-top:30px; }
  .dwin{ border-radius:14px;zoom: 0.5; }
  .dwin-side{ display:none !important; }
  .dwin-bar{ padding:11px 14px; }
  .dwin-app{ font-size:13px; }
  .dwin-tag{ font-size:10.5px; padding:3px 8px; }
  .dwin-body,.dwin-main{ padding-left:0; padding-right:0; }
  .par{zoom: 0.8;}
}

/* ═══════════  SUB-PAGE HERO (.phero — Product / Solutions / Company / Resources)
   Desktop reserves 168px of top padding and a 72px clamp headline. On a phone
   that's a near-empty first screen and an oversized title. Pull both in.  ═══════════ */
@media(max-width:640px){
  .phero{ padding:112px 0 40px; }
  .phero-inner{ max-width:none; }
  .phero-kicker{ font-size:12px; margin-bottom:13px; }
  .phero-h1{ font-size:clamp(34px,10vw,48px); letter-spacing:-.03em; }
  .phero-sub{ font-size:16px; margin-top:15px; }
  .phero .cta-row{ margin-top:24px; flex-direction:column; align-items:stretch; }
  .phero .cta-row .btn{ width:100%; justify-content:center; padding:14px 18px; }
}

/* ═══════════  PRODUCT PAGE — scale every mock down to read native  ═══════════
   product.css collapses its grids to one column at 760–980px but keeps desktop
   type, padding and fixed-pixel inner columns. Tune the phone density here. */
@media(max-width:640px){
  /* page rhythm — .page .section is (0,2,0), so match that specificity */
  .page .section{ padding:46px 0; }
  .page .section.tight{ padding:36px 0; }
  .page .section#overview,.page .section#surfaces,
  .page .section#policy,.page .section.pol-2-sec{ padding-top:38px; padding-bottom:38px; }
  .page .h2{ font-size:clamp(26px,7.4vw,34px); }
  .page .lead{ font-size:16px; margin-top:14px; }

  /* ① spine */
  .spine-flow{ gap:7px; margin-top:24px; }
  .sflow{ font-size:11.5px; padding:6px 12px; }
  .spine-grid{ margin-top:28px; gap:14px; }
  .spine-col{ padding:22px 20px; border-radius:15px; }
  .spine-name{ font-size:24px; }
  .spine-one{ font-size:14.5px; margin-top:10px; }
  .spine-caps{ gap:10px; margin-top:16px; }
  .spine-caps li{ font-size:14px; }
  .spine-bridge,.spine-cross{ padding:16px 18px; }

  /* section openers (big "Know every AI." numerals) */
  .sop-sub{ font-size:16px; margin-top:14px; }
  .sop-foot{ gap:13px; margin-top:24px; }
  .sop-detail{ margin-top:34px; }
  .sop-subhead{ margin-bottom:20px; }

  /* light D→A→S spine */
  .slite{ margin-top:28px; gap:10px; }
  .slite-card{ padding:18px 16px; }
  .slite-name{ font-size:19px; }

  /* coverage + data sovereignty */
  .cov-list{ grid-template-columns:repeat(2,1fr); gap:14px; margin-top:18px; }
  .cov-card{ padding:20px 18px; }
  .cov-name{ font-size:13.5px; }
  .cov-desc{ font-size:12px;margin-top: 0; }
  .sov-card{ padding:22px 20px; }
  .sov-h{ font-size:18px; }
  .sov-p{ font-size:14px; }

  /* control-plane dashboard mock (.db / .cp) */
  .cp-grid{ gap:26px;margin-top: 18px; }
  .cp-sov{ padding:18px; gap:13px; margin-top:24px; }
  .cp-sov b{ font-size:17px; }
  .cp-sov span{ font-size:14px; }
  .db-bar{ padding:10px 13px; }
  .db-main{ padding:12px; }
  .db-kpis{ gap:7px; }
  .db-kpi{ padding:9px; }
  .db-kpi .l{ font-size:9px; }
  .db-kpi .n{ font-size:15px; }
  .db-panel{ padding:11px 12px; }
  .db-irow{ grid-template-columns:24px 1fr auto 40px; gap:9px; padding:7px 0; }
  .db-irow .nm{ font-size:12.5px; }
  .db-irow .ti{ width:24px; height:24px; font-size:10px; }
  .db-tag{ font-size:9.5px; padding:3px 7px; }
  .db-irow .ct{ font-size:11.5px; }

  /* analyze flow (usage → risk) */
  .af{ gap:10px; }
  .af-h{ font-size:20px; }
  .af-card.output .af-score{ font-size:44px; }
  .af-scorewrap{ gap:8px; }

  /* AI Monitor / AI Meter */
  .meter-fig b{ font-size:19px; }
  .meter-row{ grid-template-columns:104px 1fr 50px; gap:10px; }
  .meter-row-l{ font-size:11.5px; }
  .meter-figrow{ gap:7px; }
  .meter-figrow .meter-fig b{ font-size:16px; }
  .meter-alert{ padding:12px 14px; gap:12px; }
  .meter-alert-ic{ width:34px; height:34px; }
  .gt-gauge-card{ padding:22px 18px !important; }
  .gtg-row{ flex-direction:column; gap:22px; }
  .gtg-vdiv{ display:none; }
  .gtg-figs{ padding-top:18px; }
  .gtg-fig .v{ font-size:24px; }
  .meter-lead{ gap:18px; }
  .meter-lead-h{ gap:10px; }

  /* console table mock (.pf) — the agent-profile deep-dive screen */
  .pf-main{ padding:13px; }
  .pf-h{ margin-bottom:13px; }
  .pf-h h3{ font-size:15px; }
  .pf-kpis{ gap:7px; margin-bottom:12px; }
  .pf-kpi{ padding:9px; }
  .pf-kpi .l{ font-size:9.5px; }
  .pf-kpi .n{ font-size:15px; }

  /* the agent table is a 5-col desktop grid; in 354px it wraps each row to
     two lines (83px tall). Collapse to the three columns that matter on a
     phone — Agent · Risk · Cost — so rows are a single ~44px line. */
  .pf-tbl{ padding:2px 13px; }
  .pf-row{ grid-template-columns:minmax(0,1fr) auto auto !important; gap:10px; padding:10px 0; }
  .pf-row > :nth-child(2),
  .pf-row > :nth-child(3){ display:none; }     /* Framework + Traces */
  .pf-row .nm{ font-size:13px; }
  .pf-risk{ font-size:10.5px; padding:3px 9px; }
  .pf-num{ font-size:12px; }

  /* aside detail panels: compact, not removed (we still show the work) */
  .pf-cols{ gap:13px; }
  .pf-mini{ padding:11px 12px; }
  .pf-mini .topapps-row{ grid-template-columns:78px 1fr 24px; }
  /* detector monitor: two small donuts belong side-by-side, not stacked */
  .pf-aside .detm{ grid-template-columns:1fr 1fr !important; gap:9px; }
  .detm-cell{ padding:12px 8px; }
  .detm-donut{ width:96px; height:96px; }
  .detm-legend{ font-size:9px; }

  /* policy hub */
  .hub-side{ padding:18px 16px; }
  .hub-core{ padding:20px 16px; }
  .hub-side-h{ font-size:16px; }
  .hub-chips span{ font-size:11.5px; padding:7px 10px; }
  .hub-core-rule{ font-size:13px; }

  /* supervise · integrations · every-surface · governance cards */
  .sup-pillar{ padding:20px 18px; }
  .sup-pillar-h{ font-size:17px; }
  .integ-card{ padding:20px 18px; }
  .es-meta{ padding:18px; }
  .es-meta h3{ font-size:21px; }
  .es-band{ padding:18px; gap:14px; }
  .es-band .bt{ font-size:20px; }
  .es-band .deploy .dn{ font-size:40px; }
  .esl-card{ padding:20px 18px; }
  .sgov-card{ padding:22px 20px; }
  .sgov-h{ font-size:18px; }

  /* connectivity graph — shrink nodes so they fit the narrow frame.
     Nodes are positioned by % so they scale, but at phone width the labels
     need to stay inside the frame: cap node width, drop the sublabel, and
     give the graph a touch more height so the three right-column nodes
     (24% / 50% / 76%) don't crowd. */
  .cg-node{ padding:7px 9px; gap:8px; max-width:46%; }
  .cg-node .cic{ width:26px; height:26px; }
  .cg-node b{ font-size:11px; white-space:normal; line-height:1.1; }
  .cg-node span{ display:none; }
  .cg-graph{ height:clamp(230px,60vw,290px); }
  .cg-cap{ font-size:9.5px; }
  
  .pf-tbl .pf-row:nth-child(5),.pf-tbl .pf-row:nth-child(6),.pf-tbl .pf-row:nth-child(7) {display: none;}
  .pf-aside .topapps .topapps-row:nth-child(4),.pf-aside .topapps .topapps-row:nth-child(5),.pf-aside .topapps .topapps-row:nth-child(6),.pf-aside .topapps .topapps-row:nth-child(7) {display: none;} 
}
@media(max-width:400px){
  .cov-list{ grid-template-columns:1fr; }
  .meter-row{ grid-template-columns:84px 1fr 46px; gap:8px; }
  .es-band .deploy .dn{ font-size:34px; }
  /* graph: give stacked nodes vertical room on the smallest phones */
  .cg-graph{ height:300px; }
  .cg-node{ max-width:50%; }
  .cg-node b{ font-size:8px; }
}

/* ═══════════  SOLUTIONS — interface mocks (dashboard / Ask / reports)  ═══════════ */
@media(max-width:640px){
  .if-grid{ gap:26px; margin-top:30px; }
  .if-body{ height:auto; min-height:196px; padding:16px; }
  .if-t{ font-size:18px; }
  .if-d{ font-size:14px; }
  .ifd-kpis{ gap:7px; }
  .ifd-kpi{ padding:9px; }
  .ifd-v{ font-size:18px; }
  .ifr-row{ padding:8px 14px; }
  /* report cards: 2-up tiles, 1-up on small phones */
  .rep-cards{ gap:11px; margin-top:32px; }
  .rep-card{ padding:17px 15px; }
  /* sample brief doc */
  .brief-doc{ padding:24px 18px 22px; }
  .brief-title{ font-size:clamp(23px,7vw,30px); }
  .brief-kpi-v{ font-size:22px; }
  .brief-summary{ font-size:14.5px; }
  /* delivery — drop chat sidebars, compact windows (both old + v2 markup) */
  .deliver2{ gap:14px; margin-top:30px; }
  .slack-card{ grid-template-columns:1fr; }
  .slk-side{ display:none !important; }
  .email-subject,.dml-subject{ font-size:16px; }
  .dml-kpis,.email-mini-kpis{ gap:7px; }
  .dml-kpis b,.email-mini-kpis b{ font-size:16px; }
}
@media(max-width:400px){
  .rep-cards{ grid-template-columns:1fr; }
}

/* ═══════════  HOME: control-plane dashboard mock (.pc)  ═══════════
   On desktop this is a wide console shot (5 KPIs in a row + 2 cards side by
   side). Naively stacked it explodes to ~900px tall. Rebuild it as a compact,
   in-proportion dashboard: a swipeable KPI strip + stacked, shrunk cards —
   readable, not a tower. */
@media(max-width:640px){
  .pc-bar{ padding:9px 12px; gap:8px; }
  .pc-dots i{ width:7px; height:7px; }
  .pc-org{ font-size:11px; }
  .pc-trial{ font-size:8px; }
  .pc-range{ display:none; }                 /* date filter is noise at this size */
  .pc-body{ padding:12px; }

  /* KPI strip → clean 2-column grid (nothing cut off; reads as native,
     not a half-card that looks like broken overflow) */
  .pc-kpis{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  .pc-kpi{ padding:12px 13px; min-width:0; }
  .pc-kpi-l{ font-size:10.5px; }
  .pc-kpi-v{ font-size:21px; margin-top:5px; }
  .pc-kpi-d{ font-size:9.5px; }

  /* the two analytics cards stack, but compact */
  .pc-cols{ grid-template-columns:1fr; gap:10px; margin-top:12px; }
  .pc-card{ padding:13px; }
  .pc-card-h{ font-size:13px; margin-bottom:10px; }
  .pc-donut{ width:108px; height:94px; }
  .pc-donut-num{ font-size:25px; }
  .pc-inv-row{ font-size:17px; }
  .pc-board{ gap:11px; }
  .pc-av{ width:27px; height:27px; }
}

/* ═══════════  COVERAGE MARQUEE + PARTNER WALL (home / product)  ═══════════
   The logo marquee auto-scrolls inside .mq{overflow:hidden}, so it can't spill
   the page — but the chips are desktop-chunky on a phone. Compact them. */
@media(max-width:640px){
  .coverage .mq-wrap{ margin-top:28px; gap:11px; }
  .cov-chip{ min-height:46px; padding:0 16px; border-radius:11px; }
  .cov-logo{ height:19px; max-width:118px; }
  .cov-word{ font-size:14px; }
  .partners .partner-grid{ margin-top:34px; }
  .partner-cell{ padding:22px 14px; gap:10px; }
  .partner-name{ font-size:15px; }
}

/* ═══════════  EXPLICIT PHONE BREAKPOINT (≤480)  ═══════════
   The 640 rules above already reflow and rescale every section for phones; this
   block is the dedicated small-phone pass the brief asked for — it nails the
   named holdouts and acts as a catch-all so no multi-column grid or horizontal
   row can spill the 390px viewport. Desktop is untouched (max-width only). */
@media(max-width:480px){
  /* horizontal rows that stay horizontal must scroll-snap, never spill */
  .subnav-links{ scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
  .subnav-links a{ scroll-snap-align:start; }
  .mq{ -webkit-overflow-scrolling:touch; }

  /* coverage / feature grids → single column on a true phone (no clipped tile) */
  .cov-list{ grid-template-columns: repeat(3, 1fr);margin-top: 28px; }

  /* one more step down on the largest display numerals so nothing shouts */
  .proof-n{ font-size:24px; }
  .pc-kpi-v{ font-size:20px; }

  /* never let an image force its own height — width drives it at natural ratio
     (guards the control-plane / coverage shots from vertical stretch) */
  .cov-logo{ height:auto; max-height:20px; }
}