/* ─────────────────────────────────────────────────────────────────────────
   STACKWISE v2 — research-led longevity, peptide-first protocols
   Light/paper, deep greens, academic but warm.
   ───────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Field (canonical light) ─────────────────────────── */
  --bg:        #f4f2e8;
  --bg-deep:   #ebe8da;
  --surface:   #ffffff;
  --surface-2: #f7f5ea;
  --rule:      #dad6c2;
  --rule-soft: #e8e5d4;
  --rule-strong: #b9b39b;

  --ink:       #14241a;
  --ink-2:     #2c3d32;
  --muted:     #5b6b5d;
  --dim:       #8a9489;
  --faint:     #c2c6b8;

  /* "gold" = brand primary green (kept name for compatibility) */
  --gold:      #2e6a3e;
  --gold-hi:   #468a55;
  --gold-deep: #1a4628;

  --green:     #2e6a3e;
  --moss:      #4f6b48;
  --sage:      #8aa97c;
  --leaf:      #d4e3c9;
  --fern:      #b8d3a8;
  --brown:     #7a5a35;
  --rust:      #b86340;
  --warm:      #b5945a;     /* a subtle warm accent */

  --paper-grain: 0.025;
  --vignette: 0;

  /* Type */
  --f-display:    'Geist', 'Söhne', 'Inter Tight', system-ui, sans-serif;
  --f-display-sc: 'Geist', system-ui, sans-serif;
  --f-body:       'Geist', 'Söhne', system-ui, sans-serif;
  --f-italic:     'Instrument Serif', Georgia, serif;
  --f-slab:       'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  --f-mono:       'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
}

/* Spruce — dark inverted */
[data-colorway="spruce"] {
  --bg:        #0f1d14;
  --bg-deep:   #0a1410;
  --surface:   #142a1d;
  --surface-2: #173322;
  --rule:      #2a4232;
  --rule-soft: #1f3326;
  --rule-strong: #3e5b46;

  --ink:       #ece8d8;
  --ink-2:     #c5c7b7;
  --muted:     #8a9588;
  --dim:       #5d6b5e;
  --faint:     #2a3a2d;

  --gold:      #88c08f;
  --gold-hi:   #b3deba;
  --gold-deep: #4d8a5a;
  --green:     #88c08f;
  --moss:      #6a8a5e;
  --sage:      #9fbf8c;
  --leaf:      #3a5a3e;
  --fern:      #4d7050;
  --warm:      #c9a978;

  --paper-grain: 0.04;
}

/* Mist — cool clinical white */
[data-colorway="mist"] {
  --bg:        #f6f7f4;
  --bg-deep:   #ecede9;
  --surface:   #ffffff;
  --surface-2: #f0f2ed;
  --rule:      #d8dad2;
  --rule-soft: #e8e9e3;
  --rule-strong: #b9bcb0;

  --ink:       #1a221e;
  --ink-2:     #354038;
  --muted:     #6a7268;
  --dim:       #94998e;
  --faint:     #c8cbc1;

  --gold:      #3a8a52;
  --gold-hi:   #5aab73;
  --gold-deep: #1f5a32;
  --green:     #3a8a52;
  --moss:      #5a7a4f;
  --sage:      #94b287;
  --leaf:      #d6e9cd;
  --fern:      #b4ceae;
  --warm:      #a89978;

  --paper-grain: 0.03;
}

/* Bloom — warm cream with deeper amber */
[data-colorway="bloom"] {
  --bg:        #f5ede0;
  --bg-deep:   #ebe1cf;
  --surface:   #fbf6ec;
  --surface-2: #f0e6d3;
  --rule:      #d8c9ab;
  --rule-soft: #e8dfca;
  --rule-strong: #b9a884;

  --ink:       #1c2618;
  --ink-2:     #3a3a26;
  --muted:     #6a6048;
  --dim:       #948a6c;
  --faint:     #c8baa0;

  --gold:      #2e5d3a;
  --gold-hi:   #4d8255;
  --gold-deep: #1c3a22;
  --green:     #2e5d3a;
  --moss:      #4a6a3e;
  --sage:      #9aaf80;
  --leaf:      #d6e2c4;
  --fern:      #b8caa4;
  --warm:      #c89456;

  --paper-grain: 0.08;
}

/* ── Base ──────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--f-body);
  font-size: 15.5px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "kern";
}

/* Soft paper grain — much subtler than v1 */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.15  0 0 0 0 0.18  0 0 0 0 0.12  0 0 0 0.65 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  opacity: calc(var(--paper-grain) * var(--grain-scale, 1));
  mix-blend-mode: multiply;
}

/* No vignette by default in light themes — keep variable for tweaks */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(120% 90% at 50% 50%, transparent 50%, var(--bg-deep) 110%);
  opacity: calc(var(--vignette) * var(--vignette-scale, 1));
}

#root { position: relative; z-index: 2; }

::selection { background: var(--green); color: var(--bg); }

a { color: inherit; text-decoration: none; }

/* ── Typography roles ──────────────────────────── */

.t-eyebrow {
  font-family: var(--f-display-sc);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}

.t-mono {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--muted);
  line-height: 1.6;
  font-weight: 400;
}
.t-mono-hi { color: var(--ink-2); }

.t-num {
  font-family: var(--f-slab);
  font-feature-settings: "tnum", "lnum";
  font-weight: 400;
}

.t-italic {
  font-family: var(--f-italic);
  font-style: italic;
  color: var(--ink-2);
  font-weight: 400;
  letter-spacing: 0;
}

.t-h1 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(54px, 7.8vw, 140px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.t-h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(34px, 4.4vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}

.t-h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.14;
  letter-spacing: -0.022em;
  margin: 0;
}

.t-quote {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(20px, 1.85vw, 28px);
  line-height: 1.4;
  letter-spacing: -0.018em;
  color: var(--ink-2);
  margin: 0;
}

.drop-cap::first-letter {
  font-family: var(--f-italic);
  font-style: italic;
  font-weight: 400;
  font-size: 4.4em;
  float: left;
  line-height: 0.82;
  padding: 0.06em 0.16em 0 0;
  color: var(--green);
}

/* ── Rules ─────────────────────────────────────── */

.rule        { height: 1px; background: var(--rule); border: 0; margin: 0; }
.rule-soft   { height: 1px; background: var(--rule-soft); border: 0; margin: 0; }
.rule-gold   { height: 1px; background: var(--green); border: 0; margin: 0; opacity: 0.5; }
.rule-dashed { height: 0; border: 0; border-top: 1px dashed var(--rule); margin: 0; }
.rule-dotted { height: 0; border: 0; border-top: 1px dotted var(--rule-strong); margin: 0; }

.divider-ornament {
  display: flex; align-items: center; gap: 14px;
  color: var(--green);
  font-size: 14px;
}
.divider-ornament::before,
.divider-ornament::after {
  content: ''; flex: 1; height: 1px;
  background: var(--rule);
}

/* ── Buttons ───────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-display-sc);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 13px 22px;
  border: 1px solid var(--green);
  color: var(--green);
  background: transparent;
  cursor: pointer;
  transition: all 200ms ease;
  border-radius: 999px;
}
.btn:hover { background: var(--green); color: var(--bg); }
.btn-solid { background: var(--green); color: var(--bg); border-color: var(--green); }
.btn-solid:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--bg); }
.btn-ghost { border-color: var(--rule-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn .arrow { font-family: var(--f-italic); font-style: italic; letter-spacing: 0; font-weight: 400; }

/* ── Sysbar ──────────────────────────────────── */

.sysbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 30px; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.sysbar .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  margin-right: 7px; vertical-align: 1px;
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.45 } }

/* ── Nav ───────────────────────────────────────── */

.nav {
  position: fixed; top: 44px; left: 26px; right: 26px;
  z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 10px 10px 10px 24px;
}
.nav-mark {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.04em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
.nav-mark .amp { color: var(--green); font-family: var(--f-italic); font-style: italic; font-weight: 400; }
.nav-links {
  display: flex; gap: 2px;
  font-family: var(--f-display-sc);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.005em;
}
.nav-link {
  padding: 8px 16px;
  color: var(--muted);
  cursor: pointer;
  border-radius: 999px;
  transition: all 160ms ease;
  font-weight: 500;
}
.nav-link:hover { color: var(--ink); background: var(--surface-2); }
.nav-link.active {
  color: var(--bg);
  background: var(--green);
}

/* ── Layout primitives ─────────────────────────── */

main { padding-top: 110px; }

.page {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 36px 140px;
  position: relative;
  animation: fadeUp 0.6s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

.section-label {
  display: flex; align-items: baseline; gap: 16px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 36px;
}
.section-label .num {
  font-family: var(--f-mono);
  color: var(--green);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.section-label .right { margin-left: auto; color: var(--dim); }

/* Console grid */
.console-grid {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}
.console-grid > * {
  background: var(--bg);
  padding: 26px;
}

/* Ledger row */
.ledger-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: baseline;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.ledger-row .lr-num { font-family: var(--f-mono); color: var(--green); font-size: 13px; letter-spacing: 0.02em; }

/* ── Specimen frame — kept as soft research card ── */
.specimen {
  border: 1px solid var(--rule);
  padding: 28px;
  background: var(--surface);
  border-radius: 8px;
  position: relative;
}
.specimen-corner { display: none; }

.card {
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 10px;
  padding: 28px;
}

/* Footnote markers */
sup.fn {
  font-family: var(--f-body);
  font-size: 0.7em;
  color: var(--green);
  vertical-align: super;
  margin-left: 2px;
  font-weight: 500;
}

/* Marginalia — now a side note in italic serif */
.marginalia {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.5;
  font-weight: 300;
}

/* Tables — ledger */
.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.ledger th, .ledger td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
.ledger th {
  font-family: var(--f-display-sc);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 500;
  padding-top: 14px; padding-bottom: 14px;
  background: transparent;
  border-bottom: 1px solid var(--rule);
}
.ledger td.num { font-family: var(--f-body); font-feature-settings: "tnum"; color: var(--ink); }
.ledger td.italic { font-family: var(--f-italic); font-style: italic; color: var(--ink-2); font-weight: 400; }
.ledger tr:hover td { background: var(--surface-2); }

/* ── Helix ─────────────────────────────────────── */
.helix-glow { filter: drop-shadow(0 6px 24px color-mix(in srgb, var(--green) 14%, transparent)); }

/* ── Form / inputs ─────────────────────────────── */
.input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 14px 16px;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  outline: none;
  transition: border-color 160ms ease;
}
.input:focus { border-color: var(--green); }

/* ── Pills / tags ──────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-family: var(--f-display-sc);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--rule);
  letter-spacing: -0.002em;
}
.pill-green { background: var(--leaf); color: var(--gold-deep); border-color: var(--fern); }
.pill-line  { background: transparent; border-color: var(--rule-strong); color: var(--muted); }

/* ── Misc utilities ────────────────────────────── */
.grid { display: grid; }
.flex { display: flex; }
.between { justify-content: space-between; }
.center { align-items: center; }
.gold { color: var(--green); }
.green { color: var(--green); }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.ink-2 { color: var(--ink-2); }
.italic { font-style: italic; font-family: var(--f-italic); font-weight: 400; letter-spacing: 0; }
.sc { font-family: var(--f-display-sc); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; }
.mono { font-family: var(--f-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.02em; }
.tnum { font-feature-settings: "tnum", "lnum"; }
.no-wrap { white-space: nowrap; }
.uppercase { text-transform: uppercase; letter-spacing: 0.12em; }

html { scroll-behavior: smooth; }

/* Hero watermark — VERY subtle now */
.hero-watermark {
  position: absolute;
  pointer-events: none;
  font-family: var(--f-display);
  color: var(--green);
  opacity: 0.05;
  font-size: 30vw;
  line-height: 0.8;
  top: 8%; left: -2%;
  z-index: 0;
  user-select: none;
  font-style: italic;
  letter-spacing: -0.03em;
}

/* Corner rule — drop */
.corner-rule::before, .corner-rule::after { display: none; }

/* Footnotes */
.footnotes {
  font-family: var(--f-body);
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
}
.footnotes .fnum {
  font-family: var(--f-mono);
  color: var(--green);
  margin-right: 8px;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* Scroll-x */
.scroll-x { overflow-x: auto; scrollbar-width: thin; }

/* Stat — used in hero stats grid */
.stat {
  padding: 22px 0;
}
.stat-num {
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--green);
  font-size: clamp(44px, 5.4vw, 80px);
  line-height: 1;
  letter-spacing: -0.05em;
  font-feature-settings: "tnum","lnum";
}
.stat-label {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 12px;
  font-weight: 500;
}

/* Sparkline placeholder */
.spark { height: 36px; width: 100%; color: var(--green); }

/* Tag on hero */
.brand-tag {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--f-display-sc);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.brand-tag::before {
  content: ''; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--green);
}

/* Citation [1] inline */
.cite {
  font-family: var(--f-body);
  font-size: 0.74em;
  vertical-align: super;
  color: var(--green);
  font-weight: 500;
  letter-spacing: 0;
}


/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE — Tablet (≤1100px) + Mobile (≤768px)
   All overrides use !important because inline styles win specificity.
   Targets the common grid patterns used throughout the app.
   ───────────────────────────────────────────────────────────────────────── */

/* Tablet — single column for 2-col layouts, smaller padding */
@media (max-width: 1100px) {
  main, .page {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  /* Hero 2-col → stack */
  [style*="grid-template-columns: 1fr 480px"],
  [style*="gridTemplateColumns:'1fr 480px'"],
  [style*="grid-template-columns: 1fr 380px"],
  [style*="gridTemplateColumns:'1fr 380px'"],
  [style*="grid-template-columns: 1.5fr 1fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* 3-col cards → 2-col */
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* 4-col cards → 2-col */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* 5-col → 2-col */
  [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile — full single column, larger touch targets, smaller hero text */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
  }
  main, .page {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* All multi-col grids → single column */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* Special case: tight info grids stay 2-col */
  .stat-grid, .info-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Sysbar hides on mobile (cramped) */
  .sysbar {
    display: none !important;
  }

  /* Nav — compact + wrap */
  .nav {
    flex-wrap: wrap !important;
    padding: 12px 16px !important;
    gap: 12px !important;
    position: sticky !important;
    top: 0 !important;
    background: var(--bg) !important;
    z-index: 100 !important;
    border-bottom: 1px solid var(--rule) !important;
  }
  .nav-links {
    order: 3 !important;
    width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    padding: 4px 0 8px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .nav-links::-webkit-scrollbar { display: none !important; }
  .nav-link {
    flex-shrink: 0 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
  .nav .btn {
    padding: 10px 14px !important;
    font-size: 12px !important;
  }
  .nav .brand-tag {
    display: none !important;
  }

  /* Hero typography — tighten */
  .t-h1 {
    font-size: clamp(38px, 9vw, 60px) !important;
    line-height: 1.05 !important;
  }
  .t-h2 {
    font-size: clamp(28px, 7vw, 44px) !important;
  }
  .t-h3 {
    font-size: 18px !important;
  }
  .t-quote {
    font-size: 17px !important;
    line-height: 1.5 !important;
  }

  /* Section labels and rules */
  .section-label {
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 11px !important;
  }
  .section-label .right {
    flex-basis: 100% !important;
    text-align: left !important;
    margin-top: 4px !important;
  }

  /* Cards: less padding */
  .card {
    padding: 18px 16px !important;
  }

  /* Buttons: larger touch targets */
  .btn {
    padding: 12px 18px !important;
    font-size: 14px !important;
    min-height: 44px !important;
  }
  .btn-solid, .btn-ghost {
    width: 100% !important;
    justify-content: center !important;
  }
  /* Exception: pill-style buttons in filter rows */
  .pill {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  /* Pill in filter rows should not stretch */
  [style*="flex-wrap: wrap"] .btn {
    width: auto !important;
  }

  /* Footer */
  footer, .footer {
    text-align: center !important;
  }

  /* Intake step indicator: scrollable horizontal */
  .intake-steps {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Store cart sticky → bottom bar */
  .cart-sticky {
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    border-bottom: none !important;
    box-shadow: 0 -8px 24px color-mix(in srgb, var(--green) 18%, transparent) !important;
  }

  /* Inputs: bigger for mobile typing */
  .input {
    padding: 12px 14px !important;
    font-size: 16px !important; /* prevents iOS auto-zoom */
  }

  /* Ledger tables: scroll horizontally if too wide */
  table.ledger {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  /* Tweaks panel: full width drawer */
  .tweaks-panel {
    width: 100% !important;
    max-width: 100% !important;
    right: 0 !important;
  }

  /* Hide some decorative elements that crowd mobile */
  .marginalia {
    display: none !important;
  }
}

/* Mobile-only floating CTA — appears bottom-fixed for intake jump */
@media (max-width: 768px) {
  .mobile-cta-float {
    display: flex !important;
    position: fixed !important;
    bottom: 16px !important;
    left: 16px !important;
    right: 16px !important;
    z-index: 90 !important;
    background: var(--green) !important;
    color: var(--bg) !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    font-family: var(--f-display) !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--green) 35%, transparent) !important;
    cursor: pointer !important;
    border: 0 !important;
  }
}
.mobile-cta-float {
  display: none;
}