/* ============================================================
   FOUNDERS — shared responsive layer  (Stage 2 / Cowork)
   The approved screens are desktop-first. This makes them usable
   on iPad + phone by fitting wide containers and stacking the
   recurring DNA card grids. Full per-screen polish is a Stage-3 task.
   Loaded on every screen; only acts below the breakpoints.
   ============================================================ */

/* ---------- tablet & below ---------- */
@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  /* wide window / page containers fit the viewport */
  .macbook, .win, .os-mockup, .container, .nav-inner, .wrap,
  .results-preview-grid, .desk-page, .winbar { max-width: 100% !important; }

  /* two-column splits stack */
  .opening-inner, .os-grid, .results-preview-grid, .wizard-grid,
  .concept-grid, .brain-grid, .split, .two-col, .cols { grid-template-columns: 1fr !important; }

  /* 3–5 column card grids → 2 columns */
  .agents-buckets, .howit-grid, .pricing-grid, .paywall-features, .trust-logos,
  .os-folders-grid, .folders-zone, .cards, .card-grid, .util-grid, .grid,
  .sector-grid, .stats, .cstrip { grid-template-columns: 1fr 1fr !important; }
}

/* ---------- phone ---------- */
@media (max-width: 600px) {
  /* nearly everything to a single column */
  .agents-buckets, .howit-grid, .pricing-grid, .paywall-features, .trust-logos,
  .os-folders-grid, .folders-zone, .cards, .card-grid, .util-grid, .grid,
  .sector-grid, .stats, .roles-list { grid-template-columns: 1fr !important; }

  /* collapse desktop nav link bars (keep the action buttons).
     Scoped so the pages' own burger menu (.nav.menu-open reveals
     .nav-links via max-height/opacity) still works: hide only while
     the menu is NOT open, otherwise display:none!important would
     permanently defeat the dropdown on phones. */
  .nav:not(.menu-open) .nav-links, .menu-items { display: none !important; }

  /* shrink big display headings so they don't overflow */
  .opening-title { font-size: 32px !important; }
  .hero-headline, .greeting-title, .hero-split-amount { font-size: 30px !important; }

  /* tighten wide horizontal padding */
  .container, .wrap, .desk-page, .section, .hero-section, .paywall-section { padding-left: 16px !important; padding-right: 16px !important; }

  /* soften the window chrome so it fits the screen edge */
  .macbook, .win, .os-mockup { border-radius: 10px !important; }
  body { padding-left: 0 !important; padding-right: 0 !important; }

  /* pill bars, docks and area grids wrap instead of overflowing */
  .emirate-bar, .dock, .area-grid, .lang-switch { flex-wrap: wrap !important; }

  /* wizard: sidebar sits above the question on phone */
  .sidebar { border-right: none !important; border-bottom: 0.5px solid rgba(31,27,22,0.12) !important; }

  /* keep the prototype's own pills out of each other's way */
  #fr-cmt-panel, #fa-panel { max-width: 94vw !important; }
}

/* ============================================================
   DEEP RESPONSIVE PASS (Stage 2.1)
   Extends the basic shim above. Layout-only — no colors touched.
   Tiers: 1024px (iPad) and 640px (phone). Desktop unchanged.
   ============================================================ */

/* === iPad tier (max-width: 1024px) === */
@media (max-width: 1024px) {

  /* --- OS desktop (os.html): the absolutely-positioned widget rail
         reserved 320px of right margin; reclaim it and let the
         widgets flow inline under the folders --- */
  .desk-page .section-head, .folders-zone { margin-right: 0 !important; }
  .widget-welcome, .widget-today {
    position: static !important;
    top: auto !important; right: auto !important; left: auto !important;
    width: 100% !important; max-width: 440px;
    margin: 16px 0 0 !important;
    animation: none !important;
  }

  /* --- Staff dashboard (staff.html has no media queries of its own):
         5 KPI tiles → 3 across on iPad --- */
  .kpis { grid-template-columns: repeat(3, 1fr) !important; }
}

/* === Phone tier (max-width: 640px) === */
@media (max-width: 640px) {

  /* --- Mac window chrome: keep the chrome, drop the fake URL,
         condense the in-window OS menu bar to logo + status pill --- */
  .win-url, .wu { display: none !important; }
  .menubar { overflow-x: auto; }
  .menubar .mb-item, .mb-item { display: none !important; }

  /* === App windows (app-crm / crm-business / app-projects) === */
  .app { height: auto !important; min-height: 540px; }
  .app > .side { display: none !important; }          /* nav sidebar: phone hides it (matches the other app screens) */
  .tb-top { flex-wrap: wrap !important; }
  .tb-actions { margin-left: 0 !important; width: 100%; flex-wrap: wrap !important; justify-content: flex-start !important; }
  .tabs { overflow-x: auto !important; }
  /* kanban columns slightly narrower so 1.5 columns peek (scroll affordance) */
  #board .col, .scroll > .col { width: 218px !important; }
  /* CRM list rows: drop the fixed-width company column */
  .lrow { flex-wrap: wrap !important; }
  .lrow .lco { width: auto !important; }
  /* CRM table view: keep columns readable, scroll sideways */
  #table table { min-width: 600px; }

  /* === Comparison matrices (pricing.html, concept-benchmark.html) === */
  .matrix, .matrix-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .matrix table { min-width: 540px; }
  .matrix .mrow { min-width: 520px; }

  /* === Wizard (stages 1–13): option/compare grids stack === */
  .bank-specs, .bank-proscons, .reco-body, .fz-compare,
  .downstream-grid, .total-bar { grid-template-columns: 1fr !important; }
  .areas-grid, .sectors-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* === Plan report (plan-full / plan-free): remaining 2-col card
         rows go single column === */
  .cards4, .cards2, .phases, .streams, .mitems, .becards,
  .cards3 { grid-template-columns: 1fr !important; }

  /* === Staff dashboard === */
  .kpis { grid-template-columns: 1fr 1fr !important; }
  .cstrip { grid-template-columns: 1fr !important; }

  /* === OS hub === */
  .primary-stats { grid-template-columns: 1fr !important; }

  /* === Oversized display type → fluid clamp() === */
  .h1 { font-size: clamp(24px, 7.5vw, 28px) !important; }
  .big { font-size: clamp(36px, 12vw, 48px) !important; }
  .page-title { font-size: clamp(26px, 8vw, 32px) !important; }
  .greeting-title { font-size: clamp(26px, 8vw, 30px) !important; }

  /* === Dock: condense so all apps fit a phone width === */
  .dock { padding: 6px 8px !important; gap: 4px !important; max-width: 96vw; overflow-x: auto; }
  .dock-app { width: 40px !important; height: 40px !important; }

  /* === Marketing footer: five columns → two === */
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ============================================================
   HOMEPAGE OVERHAUL — spacing/responsive/motion (Stage 2.2 / Cowork)
   Scoped to homepage classes. Desktop (>=1280) is unchanged; this
   only tunes the half-screen (~720–1024) and phone (<=640) views,
   condenses the nav, reflows the [[ ]] handwriting notes, and keeps
   the mac-window mockups from overflowing. Layout/spacing only —
   no colours touched (DNA-safe).
   ============================================================ */

/* --- [[ ]] handwriting notes (.fnote): never leak off-screen; wrap as a
       unit; on small screens they sit inline-block and break to the next
       line cleanly instead of overlapping or overflowing. --- */
.fnote{ max-width:100%; overflow-wrap:break-word; word-break:normal; white-space:normal; }
@media (max-width:640px){
  /* notes drop below / reflow with the line; the brackets line ([[free]] [[full]] etc.)
     centre and wrap as pills rather than running off the edge */
  .results-preview-sub,
  .brain-caption .label,
  .opening-trust{ flex-wrap:wrap; }
  /* keep inline-block so each note wraps as a UNIT to the next line (never mid-word),
     and can never exceed the container width or leak off-screen */
  .fnote{ display:inline-block; max-width:100%; vertical-align:baseline; }
  .fnote.in::before{ display:none; }        /* drop the travelling pen-nib on phone (keep motion light) */
}

/* --- NAV: condense on tablet/half-screen and wrap cleanly on phone --- */
@media (max-width:1024px){
  .nav-actions{ flex-wrap:wrap; justify-content:flex-end; gap:8px; }
}
@media (max-width:560px){
  .nav .nav-inner{ flex-wrap:wrap; row-gap:10px; }
  .nav-actions{ gap:6px; }
  .lang-switch{ font-size:11px; padding:2px; }
  .lang-switch span{ padding:4px 8px; }
  .nav-actions .btn-sm{ padding:7px 12px; font-size:12.5px; }
}
@media (max-width:380px){
  /* tightest phones: keep the wordmark + primary CTA prominent, let the row wrap */
  .logo-founders{ font-size:30px; }
  .nav-actions{ width:100%; justify-content:space-between; }
}

/* --- TRUST BAND grid: 3-up → 2-up on half-screen, single-feel on phone --- */
@media (max-width:1024px){ .trust-logos{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){  .trust-logos{ grid-template-columns:1fr 1fr; gap:12px; } }

/* --- Mac-window mockups: graceful scale on the half-screen stage so the
       absolutely-stacked cards never spill past their container. --- */
@media (max-width:1024px) and (min-width:641px){
  .opening-visual, .results-preview-visual{ overflow:visible; }
  .stack-card, .result-stack{ width:100%; }
}

/* --- Brain graph: keep the aspect-ratio box from getting too tall on phone --- */
@media (max-width:640px){
  .brain-graph-wrap{ aspect-ratio:1/1; }
}

/* --- Footer: 5 cols → 2 on tablet already; brand spans full width on phone --- */
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
  .footer-bottom{ justify-content:center; text-align:center; }
}

/* --- OS desktop folders: 8 small icon squares read best as a tidy grid, not a tall
       single stack. Override the generic shim (which collapses to 1 col on phone). --- */
@media (max-width:900px){ .os-folders-grid{ grid-template-columns:repeat(4,1fr) !important; gap:18px !important; } }
@media (max-width:600px){ .os-folders-grid{ grid-template-columns:repeat(3,1fr) !important; gap:16px !important; } }
@media (max-width:360px){ .os-folders-grid{ grid-template-columns:repeat(2,1fr) !important; } }

/* --- Utilities: the generic shim makes these 1 col on phone; 2-up reads better for
       the small tool cards. Keep the inline 2-up and just confirm it survives the shim. --- */
@media (max-width:600px){ .utils-grid{ grid-template-columns:1fr 1fr !important; } }