/* ============ Variant D — "Ledger" ============
   Editorial premium: cream paper, espresso ink, Fraunces serif
   display, deep green accent. Light mockups with hairline borders. */

:root {
  --ink: #f6f2ea;
  --ink-soft: #efe9dd;
  --ink-card: #fffdf8;
  --line: rgba(43, 37, 24, 0.13);
  --bone: #231f17;
  --bone-dim: #5b5446;
  --bone-faint: #8a8273;
  --accent: #3a6b4f;
  --accent-deep: #2c5440;
  --accent-glow: rgba(58, 107, 79, 0.2);
  --live: #1e7f5c;
  --dev: #9a6b00;
  --danger: #b3403a;
  --font-display: 'Fraunces', Georgia, serif;
}

h1, h2, h3 { letter-spacing: -0.01em; font-weight: 600; }
.hero h1 { font-weight: 500; }
.wordmark { font-weight: 600; }
.wordmark .mark { color: var(--accent); }

.nav { background: rgba(246, 242, 234, 0.88); }
.hero-glow { background: radial-gradient(ellipse, rgba(58, 107, 79, 0.1), transparent 65%); }

.btn-primary {
  background: var(--accent);
  box-shadow: 0 2px 14px rgba(58, 107, 79, 0.28);
}
.btn-primary:hover { box-shadow: 0 6px 22px rgba(58, 107, 79, 0.34); }
.btn-ghost { background: #fffdf8; }
.btn-ghost:hover { background: #f3eee2; }
.shot-action { background: var(--accent); }

.hero-points li::before { background: var(--accent); }
.trust-strip li { background: #fffdf8; }
.why-item { background: #fffdf8; }
.why-icon { background: rgba(58, 107, 79, 0.1); color: var(--accent); }

.pill-live { background: rgba(30, 127, 92, 0.12); color: var(--live); }
.pill-dev { background: rgba(154, 107, 0, 0.12); color: var(--dev); }
.pill-soon { background: rgba(43, 37, 24, 0.07); color: var(--bone-faint); }
.check-list li::before, .module-list li::before { color: var(--live); }

.module-node { background: var(--ink); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(58, 107, 79, 0.14); }
.spine-line { background: linear-gradient(180deg, var(--accent), rgba(58, 107, 79, 0.06)); }
.module-card { box-shadow: 0 1px 3px rgba(60, 50, 20, 0.05); }
.module-card:hover { border-color: rgba(58, 107, 79, 0.45); }
.module-flagship {
  border-color: rgba(58, 107, 79, 0.4);
  background: linear-gradient(135deg, rgba(58, 107, 79, 0.07), #fffdf8 45%);
}
.seg.active { background: rgba(58, 107, 79, 0.13); color: var(--accent); }
.cta {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(58, 107, 79, 0.12), transparent 60%),
    var(--ink-soft);
}

/* ---- mockups go LIGHT: paper panels, hairline borders ---- */
.panel, .shot { box-shadow: 0 18px 48px rgba(60, 50, 20, 0.12); }
.panel-head .dot { background: rgba(43, 37, 24, 0.16); }
.phone-notch { background: rgba(43, 37, 24, 0.16); }
.shot-bar { background: rgba(43, 37, 24, 0.025); }
.st-cell { background: rgba(43, 37, 24, 0.022); }
.pt-row:not(.pt-head):not(:last-child) { border-bottom-color: rgba(43, 37, 24, 0.06); }
.feed-item:not(:last-child) { border-bottom-color: rgba(43, 37, 24, 0.06); }
.phone-panel { background: linear-gradient(180deg, #fbf7ee, #f3edDF); border: 1px solid var(--line); }
.phone-card { background: rgba(43, 37, 24, 0.035); }
.phone-toast {
  background: rgba(58, 107, 79, 0.1);
  border-color: rgba(58, 107, 79, 0.35);
  color: var(--accent-deep);
}
.shot-phone-wrap { background: none; border: none; box-shadow: none; }
.big-phone {
  background: linear-gradient(180deg, #fbf7ee, #f4eee0);
  box-shadow: 0 22px 56px rgba(60, 50, 20, 0.16);
}
.bp-card { background: rgba(43, 37, 24, 0.035); }
.bp-next { border-color: rgba(58, 107, 79, 0.4); background: rgba(58, 107, 79, 0.08); }
.bp-next .bp-label { color: var(--accent); }
.bp-line i.up { color: var(--accent); }
.bp-checkin { border-color: rgba(30, 127, 92, 0.4); background: rgba(30, 127, 92, 0.08); color: var(--live); }
.mg-assign .off.pulse { color: var(--accent); }

/* solid muted chips read better on paper */
.c1 { background: #3b5b8f; }
.c2 { background: #6d5a93; }
.c3 { background: #3a6b4f; }
.st-warn { border-color: rgba(179, 64, 58, 0.45); background: rgba(179, 64, 58, 0.06); }
.fi-warn { background: rgba(179, 64, 58, 0.1); } .fi-warn::after { background: var(--danger); }
.fi-ok { background: rgba(30, 127, 92, 0.1); } .fi-ok::after { background: var(--live); }
.fi-info { background: rgba(154, 107, 0, 0.1); } .fi-info::after { background: var(--dev); }
.fi-acc { background: rgba(58, 107, 79, 0.1); } .fi-acc::after { background: var(--accent); }
.fi-pay { background: rgba(109, 90, 147, 0.12); } .fi-pay::after { background: #6d5a93; }

.dswitch a.active { background: #3a6b4f; }