/* ==========================================================================
   Rung — shared styles for the static customer frontend (no build step).
   Tokens below are copied VERBATIM from assets/brand/final/tokens.css
   (locked final kit, 2026-09-08 — do not hand-edit hexes; source of truth
   docs/brand.md, generated by generate_kit.py).
   Layout classes implement the wireframes in ../wireframes/*.html against
   the visual target in ../mockups/e-light-green/landing.html.
   ========================================================================== */

/* Rung design tokens — Fresh Green (locked final kit, 2026-09-08)
   Source of truth: docs/brand.md · generated by generate_kit.py — do not hand-edit hexes. */
:root {
  /* brand */
  --rung-green: #3CBB7C;            /* primary actions, links, booked states */
  --rung-green-hover: #37AA72;
  --rung-green-active: #329A67;
  --rung-deep: #1A4D36;                /* badge, headers, dark surfaces on light theme */
  --rung-mint: #8FE0B4;              /* accents, charts secondary */
  --rung-g-bowl: #287952;              /* the g counter — also 'subtle badge' tint */

  /* surfaces */
  --rung-bg: #F3FAF5;
  --rung-card: #FFFFFF;
  --rung-border: #DCEDE2;

  /* text */
  --rung-text: #173B2E;
  --rung-muted: #5F7A6E;
  --rung-on-deep: #FFFFFF;

  /* semantic */
  --rung-success: #3CBB7C;
  --rung-warning: #E8B24B;
  --rung-danger: #D64545;
  --rung-info: #4DA3C4;

  /* shape & type */
  --rung-radius: 14px;
  --rung-radius-lg: 16px;
  --rung-font: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* Forms: keep text inputs and the button that follows them apart (CEO note:
   the onboarding step-1 fields sat flush against "Create account →"). */
input[type="text"], input[type="email"], input[type="password"] {
  margin-bottom: 10px;
}

/* Dark theme — Night Shift pairing (badge stays full-colour on dark) */
[data-theme="dark"] {
  --rung-bg: #10171F;
  --rung-card: #16202B;
  --rung-border: #24313F;
  --rung-text: #E8F3EC;
  --rung-muted: #93A8A0;
  --rung-deep: #0C1218;
  --rung-on-deep: #E8F3EC;
}

/* Derived layout tokens (this file only — used by the wireframes' sidebar text
   and light tint surfaces; NOT part of the locked kit). */
:root {
  --rung-on-deep-muted: #B9D9C6;
  --rung-tint: #EAF6F0;
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--rung-font);
  font-size: 16px;
  background: var(--rung-bg);
  color: var(--rung-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
em.accent { font-style: normal; color: var(--rung-green); }

.muted { color: var(--rung-muted); }
.small { font-size: 13px; }
.mt8 { margin-top: 8px; }  .mt14 { margin-top: 14px; }  .mt20 { margin-top: 20px; }
.mb8 { margin-bottom: 8px; }  .mb14 { margin-bottom: 14px; }  .mb20 { margin-bottom: 20px; }

/* --------------------------------------------------------------------------
   2. Layout containers
   -------------------------------------------------------------------------- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 32px; }

/* --------------------------------------------------------------------------
   3. Buttons & links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--rung-green); color: var(--rung-on-deep);
  font-weight: 700; font-size: 15px; padding: 12px 22px;
  border: 1.5px solid transparent; border-radius: 10px; cursor: pointer;
  transition: background .15s ease;
}
.btn:hover { background: var(--rung-green-hover); }
.btn:active { background: var(--rung-green-active); }
.btn.ghost { background: var(--rung-card); color: var(--rung-text); border-color: var(--rung-border); }
.btn.ghost:hover { background: var(--rung-tint); }
.btn.sm { padding: 7px 14px; font-size: 13.5px; border-radius: 8px; }
.btn.block { display: flex; width: 100%; }
.link { color: var(--rung-green-active); font-weight: 600; }
.link:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   4. Marketing header
   -------------------------------------------------------------------------- */
.site-header { background: var(--rung-deep); color: var(--rung-on-deep); }
.site-header .wrap { display: flex; align-items: center; gap: 12px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 21px; letter-spacing: -0.5px; }
.brand img { width: 30px; height: 30px; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 24px; font-size: 14.5px; color: var(--rung-on-deep-muted); }
.site-nav a:hover { color: #fff; }
.site-nav a.strong { color: #fff; font-weight: 700; }
.site-nav .stepnote { font-size: 12.5px; letter-spacing: .4px; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   5. Hero, eyebrow, pills
   -------------------------------------------------------------------------- */
.hero { text-align: center; padding: 76px 0 52px; }
.hero h1 { font-size: 52px; line-height: 1.08; letter-spacing: -1.5px; font-weight: 800; max-width: 760px; margin: 18px auto 0; }
.hero h1 em { font-style: normal; color: var(--rung-green); }
.hero .sub { font-size: 19px; color: var(--rung-muted); max-width: 640px; margin: 18px auto 28px; }
.hero .pillrow { justify-content: center; margin-top: 26px; }

.eyebrow {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
  background: var(--rung-deep); color: #fff; padding: 5px 12px; border-radius: 99px;
}

.pillrow { display: flex; gap: 10px; flex-wrap: wrap; }
.pillrow.center { justify-content: center; }
.pill {
  font-size: 13px; color: var(--rung-muted);
  border: 1px solid var(--rung-border); background: var(--rung-card);
  padding: 6px 14px; border-radius: 99px;
}

/* --------------------------------------------------------------------------
   6. Sections, grids, cards
   -------------------------------------------------------------------------- */
section { padding: 44px 0; }
.sect-head { margin-bottom: 24px; }
h2.sect { font-size: 28px; letter-spacing: -0.5px; }
p.sectsub { color: var(--rung-muted); margin-top: 6px; }
.sect-head.center { text-align: center; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.split { display: grid; grid-template-columns: 380px 1fr; gap: 20px; align-items: start; }
/* Two-col splits that used inline grid-template-columns — inline styles beat the
   mobile media query below, which kept onboarding/demo two cramped columns on
   phones (CEO mobile pass). Same declarations as the inlines they replaced. */
.split-side { grid-template-columns: 1fr 340px; }
.form-split { grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }

.card {
  background: var(--rung-card);
  border: 1px solid var(--rung-border);
  border-radius: var(--rung-radius-lg);
  padding: 22px;
}
.card.tight { padding: 16px 18px; }
.card h4 { font-size: 16px; margin-bottom: 6px; }
.card h5, .k {
  font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--rung-muted); margin-bottom: 10px; font-weight: 700;
}
.card p + p { margin-top: 8px; }
.card .body { font-size: 14px; color: var(--rung-muted); }
.card .tag { margin-bottom: 12px; }

/* --------------------------------------------------------------------------
   7. Stat tiles
   -------------------------------------------------------------------------- */
.stat {
  background: var(--rung-card); border: 1px solid var(--rung-border);
  border-radius: var(--rung-radius); padding: 14px 16px;
}
.stat .v { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat .d { font-size: 12.5px; color: var(--rung-green-active); font-weight: 700; margin-top: 4px; }
.k, .stat .k { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--rung-muted); font-weight: 700; }

/* --------------------------------------------------------------------------
   8. Chips / status tags
   -------------------------------------------------------------------------- */
.chip {
  display: inline-block; font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 99px; white-space: nowrap;
}
.chip.ok      { color: #1F7A4D; background: rgba(60, 187, 124, .16); }
.chip.info    { color: #2E7D99; background: rgba(77, 163, 196, .16); }
.chip.warn    { color: #96690F; background: rgba(232, 178, 75, .22); }
.chip.bad     { color: #B03636; background: rgba(214, 69, 69, .13); }
.chip.neutral { color: var(--rung-muted); background: rgba(95, 122, 110, .10); }
.chip.deep    { color: #fff; background: var(--rung-g-bowl); }

.k-inline { font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--rung-muted); font-weight: 600; }

/* --------------------------------------------------------------------------
   9. Tables
   -------------------------------------------------------------------------- */
.table-card {
  background: var(--rung-card); border: 1px solid var(--rung-border);
  border-radius: var(--rung-radius-lg);
  /* overflow-x: auto on mobile (section 20) — desktop keeps the clip so the
     rounded corners crop the table; phones must be able to scroll the table. */
  overflow: hidden;
}
.table-card table { font-size: 14px; }
th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--rung-muted); padding: 11px 14px; background: var(--rung-bg);
  border-bottom: 1px solid var(--rung-border); font-weight: 700;
}
td { padding: 12px 14px; border-bottom: 1px solid var(--rung-border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--rung-tint); }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
td .sub { display: block; font-size: 12px; color: var(--rung-muted); }

/* --------------------------------------------------------------------------
   10. Bar chart (pure CSS)
   -------------------------------------------------------------------------- */
.bars { display: flex; align-items: flex-end; gap: 10px; height: 140px; margin: 6px 0 8px; }
.bars i { flex: 1; background: var(--rung-green); border-radius: 6px 6px 2px 2px; opacity: .92; min-height: 6px; }
.bars i.alt { background: var(--rung-mint); }
.axis { display: flex; gap: 10px; font-size: 11px; color: var(--rung-muted); }
.axis span { flex: 1; text-align: center; }

/* --------------------------------------------------------------------------
   11. Outcome rows (overview "Outcomes" panel)
   -------------------------------------------------------------------------- */
.orow {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px dashed var(--rung-border); font-size: 14px;
}
.orow:last-child { border-bottom: none; }
.orow .grow { flex: 1; }
.orow .cnt { font-weight: 800; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   12. Steps (onboarding wizard)
   -------------------------------------------------------------------------- */
.steps { display: grid; }
.step { display: flex; gap: 14px; }
.step .dot {
  width: 28px; height: 28px; border-radius: 99px; flex-shrink: 0;
  background: var(--rung-green); color: var(--rung-on-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.step.done .dot { background: var(--rung-tint); color: var(--rung-green-active); }
.step.pend .dot { background: transparent; border: 2px dashed var(--rung-border); color: var(--rung-muted); }
.step .ln { width: 2px; flex: 1; background: var(--rung-border); margin: 2px 0 2px 13px; min-height: 20px; }
.step .bd { padding-bottom: 20px; }
.step h5 { font-size: 15px; }
.step h5 .st { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin-left: 8px; }
.step h5 .st.ok { color: var(--rung-green-active); }
.step h5 .st.now { color: var(--rung-green-active); }
.step p { font-size: 13.5px; color: var(--rung-muted); margin-top: 3px; max-width: 640px; }

/* --------------------------------------------------------------------------
   13. Transcript bubbles & audio player
   -------------------------------------------------------------------------- */
.bubble {
  max-width: 84%; padding: 10px 13px; border-radius: 14px;
  font-size: 13.5px; margin: 6px 0; color: var(--rung-text);
  background: var(--rung-card); border: 1px solid var(--rung-border);
}
.bubble.out { margin-left: auto; background: var(--rung-tint); border-color: transparent; }
.bubble .who {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--rung-muted); margin-bottom: 3px;
}
.bubble.sms { border-radius: 12px; }

.player {
  display: flex; align-items: center; gap: 12px;
  background: var(--rung-bg); border: 1px solid var(--rung-border);
  border-radius: 12px; padding: 10px 14px;
}
.playbtn {
  width: 38px; height: 38px; border-radius: 99px; flex-shrink: 0;
  background: var(--rung-green); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; cursor: pointer;
}
.playbtn:hover { background: var(--rung-green-hover); }
.wave {
  flex: 1; height: 30px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--rung-mint) 0 3px, transparent 3px 8px);
  position: relative;
}
/* played portion of the wave (set via --played by demo-player.js) */
.wave::before {
  content: ''; position: absolute; inset: 0;
  width: var(--played, 0%);
  background: repeating-linear-gradient(90deg, var(--rung-green) 0 3px, transparent 3px 8px);
  transition: width .2s linear;
}
/* the exchange line currently being spoken */
.bubble.speaking { border-color: var(--rung-green); background: #F3FAF5; }
.player .t { font-size: 12.5px; color: var(--rung-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Session drill-in drawer (CEO round 7): View → the four QA artifacts */
#session-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 92vw);
  background: var(--card, #fff); border-left: 1px solid var(--border, #DCEDE2);
  box-shadow: -8px 0 28px rgba(23, 59, 46, .12);
  padding: 18px 20px; overflow-y: auto; z-index: 80;
}
#session-drawer .dhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
#session-drawer .drow { display: flex; gap: 10px; font-size: 13.5px; padding: 6px 0; border-bottom: 1px solid var(--border, #DCEDE2); }
#session-drawer .dk { color: var(--muted, #5F7A6E); min-width: 110px; flex: 0 0 auto; white-space: nowrap; }
/* the value takes the rest of the row and wraps (2026-09-27: the longer
   "Deepgram nova-3 text" label wrapped onto two lines without this) */
#session-drawer .drow > span:last-child { flex: 1 1 auto; min-width: 0; word-break: break-word; }
#session-drawer .dtranscript { margin-top: 14px; display: grid; gap: 8px; }
#session-drawer .dbubble { border: 1px solid var(--border, #DCEDE2); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; white-space: pre-line; }
#session-drawer .dbubble.out { background: var(--rung-tint, #EAF6F0); margin-left: 24px; }
#session-drawer .who { display: block; font-size: 11px; font-weight: 700; color: var(--muted, #5F7A6E); margin-bottom: 3px; text-transform: uppercase; }
/* ky4 (CEO 2026-09-30): in-place editing of Caller / Business / Site
   address — a quiet pencil that reveals inputs in the row itself. */
#session-drawer .dedit { opacity: .45; margin-left: 6px; padding: 1px 7px; font-size: 12px; }
#session-drawer .drow:hover .dedit { opacity: 1; }
#session-drawer .dinput { font: inherit; padding: 3px 8px; border: 1px solid var(--border, #DCEDE2); border-radius: 8px; background: var(--card, #fff); color: inherit; }
#session-drawer .dedit-actions { white-space: nowrap; }

/* Keyboard focus ring (round 8): visible for keyboard users only */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--rung-green);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Dashboard table pagination (CEO round 7): centred, Rung-styled */
.table-card .pager {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  padding: 12px 0 4px; border-top: 1px solid var(--rung-border); margin-top: 2px;
}
.table-card .pager .pg {
  min-width: 30px; text-align: center; padding: 5px 9px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--rung-green-active); border-radius: 8px;
}
.table-card .pager .pg:hover { background: var(--rung-tint); }
.table-card .pager .pg.on { background: var(--rung-green); color: #fff; }

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */
.field { margin: 14px 0; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field .help { font-size: 12.5px; color: var(--rung-muted); margin-top: 5px; }
input[type="text"], input[type="tel"], input[type="email"], textarea, select {
  width: 100%; background: var(--rung-card);
  border: 1.5px solid var(--rung-border); border-radius: 10px;
  padding: 10px 12px; font-size: 14.5px;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--rung-green);
  box-shadow: 0 0 0 3px rgba(60, 187, 124, .18);
}
textarea { resize: vertical; min-height: 72px; }

/* Toggle switch (checkbox-driven) */
/* label.switch needs >= specificity of `.field label` (0-1-1) or its display:block wins
   and the 0x0 track collapses onto the text (CEO: "radio input still overlaps content"). */
label.switch, .switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track {
  width: 40px; height: 23px; border-radius: 99px; position: relative; flex-shrink: 0;
  background: var(--rung-border); transition: background .15s ease;
}
.switch .track::after {
  content: ''; position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px;
  border-radius: 99px; background: #fff; box-shadow: 0 1px 2px rgba(23, 59, 46, .25);
  transition: left .15s ease;
}
.switch input:checked + .track { background: var(--rung-green); }
.switch input:checked + .track::after { left: 19.5px; }
.switch input:disabled + .track { opacity: .55; }

/* --------------------------------------------------------------------------
   15. Notices
   -------------------------------------------------------------------------- */
.notice {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--rung-tint); border: 1px solid var(--rung-border);
  border-left: 4px solid var(--rung-green); border-radius: 12px;
  padding: 12px 16px; font-size: 13.5px;
}
.notice.warn { border-left-color: var(--rung-warning); }
.notice.bad  { border-left-color: var(--rung-danger); }
.notice b { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   16. Dashboard shell (deep-green sidebar)
   -------------------------------------------------------------------------- */
.shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.side {
  /* light sidebar (CEO feedback: dark-green panel out) — surface mirrors cards */
  background: var(--rung-card); color: var(--rung-muted);
  border-right: 1px solid var(--rung-border);
  padding: 20px 14px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; align-self: start; max-height: 100vh; overflow: auto;
}
.side .brand { color: var(--rung-text); margin: 4px 6px 22px; }
.side nav { display: flex; flex-direction: column; gap: 3px; }
.side nav a { padding: 9px 12px; border-radius: 9px; font-size: 14px; color: var(--rung-muted); }
.side nav a:hover { color: var(--rung-text); background: var(--rung-tint); }
.side nav a.on { background: var(--rung-green); color: var(--rung-on-deep); font-weight: 600; }
.side nav a#logout-link { color: var(--rung-green-active); }
.side .spacer { flex: 1; min-height: 24px; }
.side .sidefoot {
  font-size: 11.5px; color: var(--rung-muted);
  padding: 10px 6px 2px; border-top: 1px solid var(--rung-border);
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  min-height: 30px;
}
.side .sidefoot a { color: var(--rung-green-active); text-decoration: none; font-weight: 600; }
.side .sidefoot a:hover { text-decoration: underline; }

.main { padding: 26px 30px 40px; min-width: 0; }
.pagehead h1 { font-size: 24px; letter-spacing: -0.4px; }
.pagehead .sub { color: var(--rung-muted); font-size: 14px; margin: 4px 0 22px; }
.src { font-size: 11.5px; color: var(--rung-muted); margin-top: 10px; }

.dashfoot {
  margin-top: 32px; padding-top: 14px;
  border-top: 1px solid var(--rung-border);
  font-size: 12.5px; color: var(--rung-muted);
}

/* --------------------------------------------------------------------------
   17. Pricing tiers (marketing)
   -------------------------------------------------------------------------- */
.tier { position: relative; display: flex; flex-direction: column; }
.tier h3 { font-size: 17px; }
.price { font-size: 40px; font-weight: 800; letter-spacing: -1px; margin: 8px 0 2px; }
.price small { font-size: 15px; font-weight: 600; color: var(--rung-muted); }
.flag { font-size: 12.5px; font-weight: 700; color: var(--rung-green-active); }
.tier .ticks { list-style: none; margin: 14px 0 20px; display: grid; gap: 9px; font-size: 14px; color: var(--rung-text); }
.tier .ticks li::before { content: '✓'; color: var(--rung-green); font-weight: 800; margin-right: 9px; }
.tier .btn { margin-top: auto; }
.tier.pop { border: 2px solid var(--rung-green); }
.tier.pop .tag {
  position: absolute; top: -11px; left: 20px; background: var(--rung-green);
  color: var(--rung-on-deep); font-size: 11px; font-weight: 800;
  padding: 3px 10px; border-radius: 99px; letter-spacing: .5px;
}

/* key-value list rows (integrations, sync states, plan summaries) */
.klist .row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 14px; padding: 8px 0; border-bottom: 1px dashed var(--rung-border);
}
.klist .row:last-child { border-bottom: none; }
.klist .row .free { color: var(--rung-green-active); font-weight: 700; }
.klist .row.total { font-weight: 800; font-size: 15px; border-bottom: none; }

/* a11y helper */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   18. Page footer (marketing)
   -------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--rung-border); margin-top: 40px; }
.site-footer .wrap {
  padding: 22px 32px; font-size: 13px; color: var(--rung-muted);
  display: flex; flex-wrap: wrap; gap: 8px 18px;
}
.site-footer .right { margin-left: auto; display: flex; gap: 18px; }
.site-footer a:hover { color: var(--rung-text); }

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .grid4 { grid-template-columns: repeat(2, 1fr); }
  .grid3, .grid2, .split { grid-template-columns: 1fr; }
  .hero { padding: 48px 0 36px; }
  .hero h1 { font-size: 38px; letter-spacing: -1px; }
  .shell { grid-template-columns: 1fr; }
  .side { position: static; max-height: none; }
  .side nav { flex-direction: row; flex-wrap: wrap; }
  .side .brand { margin-bottom: 12px; }
  .side .spacer { display: none; }
  .side .sidefoot { margin-top: 10px; border-top: none; padding-top: 0; }
  .site-header .wrap { gap: 16px; }
  .site-nav { gap: 16px; }
}
@media (max-width: 560px) {
  .grid4 { grid-template-columns: 1fr; }
  .site-header .wrap { height: auto; padding: 12px 20px; flex-wrap: wrap; }
  .site-nav { margin-left: 0; width: 100%; }
}
/* --------------------------------------------------------------------------
   20. Mobile pass (CEO, bead ai-ops-7dy) — phones and small tablets.
   Sections 19's breakpoints handle grids; this block fixes what they didn't:
   data tables (no horizontal scroll, no 8-column squeeze), the hero, the
   wizard form, touch target sizes and iOS zoom-on-focus.
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  /* Grid auto-minimum: without minmax(0,1fr) the shell column grows to the
     table's intrinsic width (~754px) instead of the viewport — the whole page
     zoomed out on phones even though the table-card scrolled internally. */
  .shell { grid-template-columns: minmax(0, 1fr); }
  .main { min-width: 0; }

  /* Data tables scroll inside their card instead of blowing the layout.
     contain:paint works around the mobile-viewport quirk where an
     overflow-x:auto box's table still contributes scrollable overflow to the
     ICB (verified empirically: 754 → 390; the internal swipe still works). */
  .card, .table-card { overflow-x: auto; contain: paint; }
  .card table, .table-card table { min-width: 620px; }

  /* Sidebar becomes a horizontal scroller, not a wrapped mega-nav */
  .side nav {
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; padding-bottom: 4px;
  }
  .side nav a { white-space: nowrap; flex: 0 0 auto; }

  .hero h1 { font-size: 32px; }
  .site-footer .wrap { flex-direction: column; gap: 8px; }
  .site-footer .right { margin-left: 0; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 16px; }

  /* Type scale down; keep hierarchy */
  .hero h1 { font-size: 28px; letter-spacing: -.5px; }
  .hero .sub { font-size: 15px; }
  h2.sect { font-size: 22px; }

  /* Touch targets ≥ 44px; prevent iOS zoom-on-focus (needs 16px font) */
  .btn { padding: 12px 18px; font-size: 15px; }
  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], select, textarea {
    font-size: 16px; padding: 11px 12px; margin-bottom: 10px;
  }

  /* Hero pills wrap instead of pushing width */
  .pillrow { gap: 8px; }
  .pill { font-size: 12px; padding: 6px 12px; }

  /* Wizard: single column with breathing room */
  .split-side { grid-template-columns: 1fr; }
  .form-split { grid-template-columns: 1fr; }
  .klist { gap: 10px; }

  /* Cards lose heavy padding */
  .card { padding: 16px 14px; }
  .card.feat { padding: 18px 16px; }

  /* Stat tiles stack cleanly */
  .grid4 { gap: 10px; }
  .stat .v { font-size: 24px; }

  /* Page header rows wrap */
  .pagehead { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Footer stacks */
  .site-footer .wrap { padding: 18px 16px; }

  /* Login card fits small screens */
  .auth-card { margin: 40px auto; padding: 28px 22px; }

  /* Demo-call form full width */
  .form-split { display: block; }
  .form-split .field { margin-bottom: 14px; }
}