:root {
  /* Surfaces, deep and quiet */
  --fd-bg-0: #06070d;          /* page */
  --fd-bg-1: #090b14;          /* lifted */
  --fd-panel: #0c0e18;         /* card */
  --fd-panel-2: #11131f;       /* card, raised */
  --fd-panel-3: #161827;       /* inset / inputs */
  /* Ink */
  --fd-ink: #f2f4fb;
  --fd-ink-soft: rgba(228,232,245,0.70);
  --fd-ink-faint: rgba(196,204,226,0.46);
  --fd-ink-ghost: rgba(176,186,214,0.26);
  /* One restrained accent: teal to violet */
  --fd-teal: #45e3d0;
  --fd-violet: #7c83ff;
  /* #theme-polish (2026-07-24): ink-safe accents. IDENTICAL to --fd-teal/--fd-violet in dark (so dark is
     byte-unchanged), but darkened in the light block below so accent TEXT reads on white. Use these ONLY for
     text/labels; fills, gradients, glows and borders keep the bright --fd-teal/--fd-violet (and their
     --fd-on-* inks), which is why darkening the base tokens in light was unsafe. */
  --fd-teal-ink: #45e3d0;
  --fd-violet-ink: #7c83ff;
  --fd-accent-soft: #a9b0ff;
  /* Hairlines */
  --fd-hair: rgba(150,168,224,0.10);
  --fd-hair-2: rgba(150,168,224,0.16);
  --fd-hair-3: rgba(150,168,224,0.24);
  /* Market movement (calm mint rise, soft coral cool) */
  --fd-rise: #4fe0a6;
  --fd-rise-soft: rgba(79,224,166,0.16);
  --fd-cool: #ff7d8a;
  --fd-cool-soft: rgba(255,125,138,0.16);
  /* Accent tints (soft fills, focus rings, glows) so a page never hardcodes a teal/violet alpha. */
  --fd-teal-soft: rgba(69,227,208,0.16);
  --fd-violet-soft: rgba(124,131,255,0.16);
  /* Warning amber (objection pills, medium severity) + its tint. The one warm accent outside rise/cool. */
  --fd-warn: #f0b968;
  --fd-warn-soft: rgba(240,185,104,0.16);
  /* #cinema-3d (2026-07-27, Sebastian's explicit call): MONEY IS GREEN. The front door's money shot must read as
     money, and money that is not green does not. A deliberate, tokenized break from the teal/violet-only accent
     rule, so the parity guard stays at zero literals. */
  --fd-money: #3ce97e;
  /* #paper-tags (2026-07-28): the front door's readable objection tags are DOM paper matching the film's
     tag stock. Sampled from the film's own lit tag faces (v10 frames at the step dwells: 225-247 per
     channel, average ~rgb(235,235,232)); the token sits within a few points so a DOM tag reads as the
     one in focus, not a different material. Slight translucency is applied at use, never here. */
  --fd-paper: #e9e8e3;
  --fd-sans: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --fd-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* #design-converge (2026-07-24): the shared scales the base stylesheet + every converged page builds on.
     Spacing is a 4px rhythm; radii, the touch target (Apple/Material 44px min), and the fluid container max. */
  --fd-space-1: 4px; --fd-space-2: 8px; --fd-space-3: 12px; --fd-space-4: 16px;
  --fd-space-5: 24px; --fd-space-6: 32px; --fd-space-7: 48px; --fd-space-8: 64px;
  --fd-radius-sm: 8px; --fd-radius-md: 12px; --fd-radius-lg: 18px; --fd-radius-full: 999px;
  --fd-touch: 44px;            /* minimum comfortable tap target on touch devices */
  --fd-container: 1200px;      /* fluid content max width */
  /* On-accent foreground inks (text that sits ON a colored button) + the modal scrim, tokenized so the base
     stylesheet carries ZERO hardcoded colors. */
  --fd-on-violet: #ffffff; --fd-on-teal: #04121a; --fd-on-cool: #1a0708;
  --fd-scrim: rgba(4,6,12,0.66);
  --fd-text-xs: 11px; --fd-text-sm: 13px; --fd-text-base: 15px; --fd-text-lg: 18px; --fd-text-xl: 24px; --fd-text-2xl: 32px;
  /* #dark-bleed fix (2026-07-15): tell the BROWSER the page is dark, so every native surface follows —
     scrollbar tracks on unstyled panels, select/checkbox/date controls, and the default iframe canvas
     (the dialer softphone panel flashed WHITE on each load without this). Flipped with the theme below. */
  color-scheme: dark;
}
/* LIGHT MODE — flip the shared Fundio tokens when data-theme="light" is set. Every page maps its own vars
   onto these --fd-* tokens, so flipping the tokens here flips the ENTIRE page. Higher specificity than :root,
   so no !important needed. */
html[data-theme="light"] {
  --fd-bg-0:#f5f7fc; --fd-bg-1:#eef1f9; --fd-panel:#ffffff; --fd-panel-2:#f6f8fd; --fd-panel-3:#eceffb;
  --fd-ink:#161a2c; --fd-ink-soft:rgba(28,33,58,0.74); --fd-ink-faint:rgba(28,33,58,0.54); --fd-ink-ghost:rgba(28,33,58,0.34);
  --fd-accent-soft:#5860d6;
  /* #theme-polish: darkened accent TEXT inks, readable on the white surfaces (teal ~4.9:1, violet ~4.6:1). */
  --fd-teal-ink:#0f766e; --fd-violet-ink:#5860d6;
  --fd-hair:rgba(30,45,100,0.10); --fd-hair-2:rgba(30,45,100,0.16); --fd-hair-3:rgba(30,45,100,0.22);
  --fd-rise:#0f9d6b; --fd-cool:#e0556a;
  /* #light-triggered (2026-07-28): the -soft TINTS were absent from the light block, so every
     status chip composited a dark-tuned wash over white and its text lost contrast. They are
     re-stated here at the light accents so a chip reads on a white surface. */
  --fd-rise-soft:rgba(15,157,107,0.14); --fd-cool-soft:rgba(224,85,106,0.14);
  --fd-teal-soft:rgba(15,118,110,0.13); --fd-violet-soft:rgba(88,96,214,0.13);
  --fd-paper:#e9e8e3;
  --fd-scrim:rgba(20,26,44,0.44);
  --fd-warn:#b26f1a; --fd-warn-soft:rgba(178,111,26,0.14);
  color-scheme: light;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }


html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ===== Fundio base: reset-lite (safe globals only) ===== */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas { max-width: 100%; height: auto; }   /* never overflow a phone viewport */

/* ===== Layout primitives ===== */
.fd-container { width: 100%; max-width: var(--fd-container); margin-inline: auto; padding-inline: var(--fd-space-4); }
.fd-stack { display: flex; flex-direction: column; gap: var(--fd-space-4); }
.fd-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fd-space-3); }
.fd-grid { display: grid; gap: var(--fd-space-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.fd-spread { display: flex; align-items: center; justify-content: space-between; gap: var(--fd-space-3); }

/* ===== Typography ===== */
.fd-h1 { font: 700 var(--fd-text-2xl)/1.15 var(--fd-sans); color: var(--fd-ink); margin: 0; letter-spacing: -0.02em; }
.fd-h2 { font: 700 var(--fd-text-xl)/1.2 var(--fd-sans); color: var(--fd-ink); margin: 0; letter-spacing: -0.01em; }
.fd-h3 { font: 600 var(--fd-text-lg)/1.25 var(--fd-sans); color: var(--fd-ink); margin: 0; }
.fd-text { font: 400 var(--fd-text-base)/1.5 var(--fd-sans); color: var(--fd-ink); }
.fd-muted { color: var(--fd-ink-soft); }
.fd-faint { color: var(--fd-ink-faint); }
.fd-mono { font-family: var(--fd-mono); }

/* ===== Cards ===== */
.fd-card { background: var(--fd-panel); border: 1px solid var(--fd-hair-2); border-radius: var(--fd-radius-lg); padding: var(--fd-space-5); }
.fd-card-2 { background: var(--fd-panel-2); }

/* ===== Buttons (comfortable tap target, token colors) ===== */
.fd-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--fd-space-2);
  min-height: var(--fd-touch); padding: 0 var(--fd-space-4); border-radius: var(--fd-radius-md);
  border: 1px solid var(--fd-hair-3); background: var(--fd-panel-2); color: var(--fd-ink);
  font: 600 var(--fd-text-sm)/1 var(--fd-sans); cursor: pointer; text-decoration: none; transition: filter .15s, background .15s; }
.fd-btn:hover { filter: brightness(1.08); }
.fd-btn:focus-visible { outline: 2px solid var(--fd-teal); outline-offset: 2px; }
.fd-btn-primary { background: var(--fd-violet); border-color: var(--fd-violet); color: var(--fd-on-violet); }
.fd-btn-accent { background: var(--fd-teal); border-color: var(--fd-teal); color: var(--fd-on-teal); }
.fd-btn-ghost { background: transparent; }
.fd-btn-danger { background: var(--fd-cool); border-color: var(--fd-cool); color: var(--fd-on-cool); }
.fd-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ===== Inputs ===== */
.fd-field { display: flex; flex-direction: column; gap: var(--fd-space-2); }
.fd-label { font: 600 var(--fd-text-sm)/1 var(--fd-sans); color: var(--fd-ink-soft); }
/* #mobile-16px (2026-07-29): iOS Safari ZOOMS THE PAGE whenever a focused form control is under 16px,
   which made every CRM field jolt the layout on tap (43 of 43 were under it, plus 4 of 4 on signup and
   2 of 2 on login). This is the floor, set on the BARE ELEMENTS at the one shared layer every converged
   page builds on, rather than page by page: the offenders are plain inputs that never took the
   .fd-input class. Scoped to the phone breakpoint so desktop typography is untouched, which is also
   what keeps the desktop rendering byte identical. */
@media (max-width: 768px) {
  input, select, textarea, .fd-input, .fd-select, .fd-textarea { font-size: 16px; }
}
.fd-input, .fd-select, .fd-textarea { width: 100%; min-height: var(--fd-touch); padding: var(--fd-space-2) var(--fd-space-3);
  background: var(--fd-panel-3); border: 1px solid var(--fd-hair-2); border-radius: var(--fd-radius-sm);
  color: var(--fd-ink); font: 400 var(--fd-text-base)/1.4 var(--fd-sans); }
.fd-input:focus, .fd-select:focus, .fd-textarea:focus { outline: none; border-color: var(--fd-teal); }
.fd-textarea { min-height: calc(var(--fd-touch) * 2); resize: vertical; }

/* ===== Chips ===== */
.fd-chip { display: inline-flex; align-items: center; gap: var(--fd-space-1); padding: var(--fd-space-1) var(--fd-space-3);
  border-radius: var(--fd-radius-full); background: var(--fd-panel-3); border: 1px solid var(--fd-hair-2);
  color: var(--fd-ink-soft); font: 600 var(--fd-text-xs)/1.4 var(--fd-sans); white-space: nowrap; }

/* ===== Tables (scroll on a phone via the wrap; optional stack mode) ===== */
.fd-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fd-table { width: 100%; border-collapse: collapse; font: 400 var(--fd-text-sm)/1.4 var(--fd-sans); color: var(--fd-ink); }
.fd-table th, .fd-table td { text-align: left; padding: var(--fd-space-3); border-bottom: 1px solid var(--fd-hair); }
.fd-table th { color: var(--fd-ink-soft); font-weight: 600; }

/* ===== Modals ===== */
.fd-modal-backdrop { position: fixed; inset: 0; background: var(--fd-scrim); display: flex; align-items: center;
  justify-content: center; padding: var(--fd-space-4); z-index: 1000; }
.fd-modal { width: 100%; max-width: 520px; max-height: 90vh; overflow: auto; background: var(--fd-panel);
  border: 1px solid var(--fd-hair-3); border-radius: var(--fd-radius-lg); padding: var(--fd-space-5); }

/* ===== Responsive helpers ===== */
.fd-hide-mobile { }
.fd-only-mobile { display: none; }

/* ===== Mobile-first breakpoints ===== */
@media (max-width: 768px) {
  .fd-container { padding-inline: var(--fd-space-3); }
  .fd-hide-mobile { display: none !important; }
  .fd-only-mobile { display: revert; }
  .fd-h1 { font-size: var(--fd-text-xl); }
  .fd-h2 { font-size: var(--fd-text-lg); }
  .fd-grid { grid-template-columns: 1fr; }
  /* a nav marked responsive collapses to a column on a phone */
  .fd-nav { flex-direction: column; align-items: stretch; }
  /* opt-in: a table that should STACK into cards on a phone (label via data-label on each td) */
  .fd-table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fd-table-stack tr { display: block; margin-bottom: var(--fd-space-3); border: 1px solid var(--fd-hair-2); border-radius: var(--fd-radius-md); padding: var(--fd-space-2); }
  .fd-table-stack td { display: flex; justify-content: space-between; gap: var(--fd-space-4); border: 0; padding: var(--fd-space-2) var(--fd-space-1); }
  .fd-table-stack td::before { content: attr(data-label); color: var(--fd-ink-soft); font-weight: 600; }
}

/* On touch devices, guarantee the comfortable tap target even where a page sets a smaller one. */
@media (hover: none) and (pointer: coarse) {
  .fd-btn, .fd-input, .fd-select { min-height: var(--fd-touch); }
}