/* ═══════════════════════════════════════════════════════════════
   Rime — shared responsive layer
   One consistent breakpoint set for every surface:
     desktop  ≥ 1025px  (unchanged)
     tablet   641–1024px
     mobile   ≤ 640px
   Desktop styles are inline in each DC; these rules only ADD
   adaptation below the breakpoints.
   NOTE: inline styles are serialized by the renderer with a space
   after the colon (e.g. "font-size: 78px") and after commas inside
   repeat() (e.g. "repeat(3, 1fr)"). Every attribute selector below
   includes BOTH the authored (unspaced) and serialized (spaced)
   forms so the rules match in every browser.
   ═══════════════════════════════════════════════════════════════ */

html, body { overflow-x: hidden; }
img, svg, video { max-width: 100%; }

/* utilities — visible only on one side of the mobile breakpoint */
.rsp-mobile { display: none !important; }

/* ── TABLET ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* headers collapse to the hamburger for the whole tablet+mobile range */
  .rsp-mobile { display: flex !important; }
  .rsp-desktop { display: none !important; }

  /* 3/4-up card rows → 2-up */
  [style*="repeat(3,1fr)"],
  [style*="repeat(4,1fr)"],
  [style*="repeat(5,1fr)"],
  [style*="repeat(3, 1fr)"],
  [style*="repeat(4, 1fr)"],
  [style*="repeat(5, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* 6-up logo walls → 3-up */
  [style*="repeat(6,1fr)"],
  [style*="repeat(6, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }

  /* footer's asymmetric five-column split tightens */
  [style*="grid-template-columns:1.6fr 1fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
}

/* ── MOBILE ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* every multi-column grid pattern used in the project → single column */
  [style*="repeat(2,1fr)"],
  [style*="repeat(3,1fr)"],
  [style*="repeat(4,1fr)"],
  [style*="repeat(5,1fr)"],
  [style*="repeat(2, 1fr)"],
  [style*="repeat(3, 1fr)"],
  [style*="repeat(4, 1fr)"],
  [style*="repeat(5, 1fr)"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1.4fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns:1fr 1.2fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns:1fr 1.1fr"],
  [style*="grid-template-columns: 1fr 1.1fr"],
  [style*="grid-template-columns:1fr 1.4fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns:1.6fr 1fr"],
  [style*="grid-template-columns: 1.6fr 1fr"],
  [style*="grid-template-columns:1.1fr 1fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns:1.1fr 0.9fr"],
  [style*="grid-template-columns: 1.1fr 0.9fr"],
  [style*="grid-template-columns:0.9fr 1.1fr"],
  [style*="grid-template-columns: 0.9fr 1.1fr"],
  [style*="grid-template-columns:1.05fr 0.95fr"],
  [style*="grid-template-columns: 1.05fr 0.95fr"],
  [style*="grid-template-columns:0.95fr 1.05fr"],
  [style*="grid-template-columns: 0.95fr 1.05fr"],
  [style*="grid-template-columns:auto 1fr auto"],
  [style*="grid-template-columns: auto 1fr auto"],
  [style*="grid-template-columns:1fr 380px"],
  [style*="grid-template-columns: 1fr 380px"],
  [style*="grid-template-columns:380px 1fr"],
  [style*="grid-template-columns: 380px 1fr"],
  [style*="grid-template-columns:320px 1fr"],
  [style*="grid-template-columns: 320px 1fr"],
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns: 1fr 320px"] { grid-template-columns: 1fr !important; }

  /* 6-up logo walls → 2-up */
  [style*="repeat(6,1fr)"],
  [style*="repeat(6, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* headline scale — keep Funnel Display character, fit the viewport */
  [style*="font-size:104px"], [style*="font-size: 104px"] { font-size: 46px !important; }
  [style*="font-size:88px"],  [style*="font-size: 88px"]  { font-size: 42px !important; }
  [style*="font-size:78px"],  [style*="font-size: 78px"]  { font-size: 40px !important; }
  [style*="font-size:76px"],  [style*="font-size: 76px"]  { font-size: 40px !important; }
  [style*="font-size:72px"],  [style*="font-size: 72px"]  { font-size: 40px !important; }
  [style*="font-size:64px"],  [style*="font-size: 64px"]  { font-size: 38px !important; }
  [style*="font-size:56px"],  [style*="font-size: 56px"]  { font-size: 34px !important; }
  [style*="font-size:52px"],  [style*="font-size: 52px"]  { font-size: 33px !important; }
  [style*="font-size:46px"],  [style*="font-size: 46px"]  { font-size: 31px !important; }
  [style*="font-size:44px"],  [style*="font-size: 44px"]  { font-size: 30px !important; }
  [style*="font-size:42px"],  [style*="font-size: 42px"]  { font-size: 30px !important; }
  [style*="font-size:40px"],  [style*="font-size: 40px"]  { font-size: 29px !important; }
  [style*="font-size:38px"],  [style*="font-size: 38px"]  { font-size: 28px !important; }
  [style*="font-size:36px"],  [style*="font-size: 36px"]  { font-size: 27px !important; }
  [style*="font-size:34px"],  [style*="font-size: 34px"]  { font-size: 26px !important; }
  [style*="font-size:32px"],  [style*="font-size: 32px"]  { font-size: 25px !important; }

  /* dense card/panel padding relaxes */
  [style*="padding:64px"],      [style*="padding: 64px"]      { padding: 32px 22px !important; }
  [style*="padding:60px 56px"], [style*="padding: 60px 56px"] { padding: 32px 22px !important; }
  [style*="padding:56px"],      [style*="padding: 56px"]      { padding: 30px 22px !important; }
  [style*="padding:44px"],      [style*="padding: 44px"]      { padding: 26px 20px !important; }
  [style*="padding:40px"],      [style*="padding: 40px"]      { padding: 24px 20px !important; }
  [style*="padding:36px 40px"], [style*="padding: 36px 40px"] { padding: 24px 20px !important; }
  [style*="padding:36px 38px"], [style*="padding: 36px 38px"] { padding: 24px 20px !important; }
  [style*="padding:34px 36px"], [style*="padding: 34px 36px"] { padding: 24px 20px !important; }
  [style*="padding:32px 36px"], [style*="padding: 32px 36px"] { padding: 22px 20px !important; }
  [style*="padding:30px 32px"], [style*="padding: 30px 32px"] { padding: 22px 20px !important; }
  [style*="padding:28px 32px"], [style*="padding: 28px 32px"] { padding: 20px 18px !important; }

  /* oversized grid gaps tighten once columns have folded */
  [style*="gap:80px"], [style*="gap: 80px"],
  [style*="gap:64px"], [style*="gap: 64px"] { gap: 32px !important; }

  /* wide flex rows (hero splits, two-panel sections) stack */
  [style*="display:flex"][style*="gap:48px"],
  [style*="display: flex"][style*="gap: 48px"],
  [style*="display:flex"][style*="gap:40px"],
  [style*="display: flex"][style*="gap: 40px"],
  [style*="display:flex"][style*="gap:36px"],
  [style*="display: flex"][style*="gap: 36px"] { flex-wrap: wrap; }

  /* fixed-width showpieces (hero chat animation, previews) fit the screen */
  [style*="width:438px"], [style*="width: 438px"],
  [style*="width:460px"], [style*="width: 460px"],
  [style*="width:480px"], [style*="width: 480px"],
  [style*="width:520px"][style*="border-radius:22px"],
  [style*="width: 520px"][style*="border-radius: 22px"] { width: 100% !important; }

  /* OTP digit boxes fit narrow screens */
  input[style*="width:52px"][style*="height:60px"],
  input[style*="width: 52px"][style*="height: 60px"] { width: 44px !important; height: 54px !important; }

  /* fixed side sheets / modals become full-width sheets */
  [data-rsp="sheet"] {
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important; max-width: 100vw !important;
    border-radius: 0 !important;
  }
  [data-rsp="modal"] {
    width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important;
    padding: 24px 20px !important;
  }

  /* the 60px pixel-grid motif recedes on small screens */
  [data-rsp="grid-bg"] { opacity: 0.5; }

  /* key-facts / label-value tables reflow */
  [data-rsp="kv"] { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }

  /* generic full-width helper for CTAs on mobile */
  .rsp-full { width: 100% !important; justify-content: center !important; }

  /* dashboard top-bar nav scrolls within itself instead of overflowing the page */
  [data-rsp="navscroll"] { overflow-x: auto; scrollbar-width: none; }
  [data-rsp="navscroll"]::-webkit-scrollbar { display: none; }
  [data-rsp="navscroll"] > * { flex: none; }
}