/* ============================================================
   OpsLedger — marketing site
   Lane C2 styling pass (2026-11-06) to the SIGNED direction
   five-liner (files/design/direction-five-liner_2026-11-06.md):
   the banker's ledger room — dark House Glass over deep green
   #0d1a15, brass gold #c9a227, cream #f2eddf; marketing pages are
   a dark hero over cream sections (dashboard spec §1/§3).

   Conformance (unslop-audit_2026-11-06.md + spec §2/§6):
   - Gold budget (§2.1): gold appears ONLY as the LEDGER half of
     the wordmark, the 4px header rule, the Courier stamp, the
     focus ring, and the totals hairline inside the sample wall.
     Buttons are cream (on dark) or deep green (on cream).
   - B1: uppercase Courier is reserved for the header/footer
     tagline and the period/source stamp. All other labels are
     sentence case at normal tracking.
   - B2: no italic emphasis; emphasis is weight (500) or ink step.
   - B3: one gold; text roles from one ramp per theme; #8a6f1c
     and the computed --gold-text are retired (no gold text).
   - B4: spacing on the 4px grid only.
   - B7: the 4px gold rule appears once per surface (header).
   - C1: no hue gradients, no glow shadows; ambient is tonal only —
     green-family washes on the dark sections, a brand-tinted wash
     layer behind the cream sections (House Glass ambience).
   - C2/§6 + OWNER ADDENDUM (2026-11-06 23:20, glass amplification):
     showcase shells (header, hero panels, offer band/panel, cards,
     footer) are real glass — translucent brand-tinted panels with
     backdrop blur and a 1px edge light — over the green ambient.
     The §6 floor is NOT repealed: no figure ever sits over blur —
     every figure rests on a solid inner plate (#12241c: .wall-table,
     .chart-svg, .bars, .cols) and computed contrast on the
     composited panel holds figures ≥7:1, body text ≥4.5:1.
   - C4/§8: one easing curve, named transitions only, one short
     fade-and-rise entrance for the main content, press = .98.
   ============================================================ */

:root {
  /* Light ramp (cream sections) — from the brochures, verbatim */
  --paper: #fbfaf7;
  --ink: #14231d;
  --body: #33403a;
  --muted: #637368; /* brochure #6b7a72 measures 4.32:1 on paper — darkened to the lightest step passing the §6.2 floor (4.81:1), per spec: muted is a measured step, not a fixed hex */
  --line: #e3ddd0;
  --link: #0b6b4f;
  /* Dark ramp (ledger room) */
  --dark: #0d1a15;
  --dark-2: #12241c;
  --cream: #f2eddf;
  --cream-step: #d9d3c1;
  --muted-dark: #93a398;
  --line-dark: rgba(242, 237, 223, 0.14);
  --link-dark: #8fd0b2;
  /* The one gold — seal, not a button color */
  --gold: #c9a227;
  /* Glass amplification tokens (owner addendum, 2026-11-06) */
  --glass-dark: rgba(18, 36, 28, 0.55);
  --glass-blur: blur(18px) saturate(1.25);
  --glass-edge: inset 0 1px 0 rgba(242, 237, 223, 0.12), inset 0 24px 36px -24px rgba(242, 237, 223, 0.10);
  --glass-line: rgba(242, 237, 223, 0.16);
  --plate: #12241c;
  --plate-line: rgba(242, 237, 223, 0.08);
  --glass-card: rgba(255, 255, 255, 0.72);
  --glass-card-blur: blur(16px) saturate(1.25);
  --glass-card-edge: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  /* Type + shape + motion */
  --radius-card: 16px;
  --radius-panel: 20px;
  --radius-ctl: 8px;
  --shadow-soft: 0 16px 44px rgba(13, 26, 21, 0.12);
  --shadow-lift: 0 8px 24px rgba(13, 26, 21, 0.10);
  --shadow-dark: 0 24px 48px rgba(0, 0, 0, 0.32);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --max: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--body);
  background-color: var(--paper);
}

/* Brand-tinted ambient behind the cream sections (House Glass):
   a fixed wash layer so the white-glass cards have green light
   to frost over. Dark sections paint their own ambient and cover
   this layer; it never carries content. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(880px 520px at 8% 12%, rgba(11, 107, 79, 0.07), rgba(11, 107, 79, 0) 65%),
    radial-gradient(760px 480px at 94% 78%, rgba(201, 162, 39, 0.05), rgba(201, 162, 39, 0) 62%),
    radial-gradient(700px 500px at 70% 8%, rgba(11, 107, 79, 0.045), rgba(11, 107, 79, 0) 60%);
}

h1, h2, h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
  margin: 0 0 16px;
}
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }

p { margin: 0 0 16px; }
a { color: var(--link); }
strong { font-weight: 500; color: var(--ink); }
em { font-style: normal; font-weight: 500; color: var(--ink); }

a, button, input, select, textarea { transition: color 120ms var(--ease), background-color 120ms var(--ease), border-color 120ms var(--ease), opacity 120ms var(--ease), transform 120ms var(--ease); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* One entrance per screen: the main content fades and rises 4px (§8) */
main { animation: rise 240ms var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  main { animation: none; }
  html { scroll-behavior: auto; }
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }

/* ---------- Header: dark glass shell + the one gold rule ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 26, 21, 0.90);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 4px solid var(--gold);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(242, 237, 223, 0.10);
}
.header-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0 12px;
  position: relative;
}
.wordmark {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--cream);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark span { color: var(--gold); }
.tagline {
  /* Courier device 1 of 2: the tagline (audit B1). */
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted-dark);
  margin-top: 4px;
}
.main-nav { display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: wrap; }
.main-nav a {
  color: var(--cream);
  text-decoration: none;
  font-size: 15px;
  padding: 8px 12px;
  border-radius: 999px;
}
@media (min-width: 861px) {
  .site-header .tagline { white-space: nowrap; }
}
.main-nav a:hover { background: rgba(242, 237, 223, 0.12); }
.main-nav a[aria-current="page"] { background: rgba(242, 237, 223, 0.16); }
.main-nav a.nav-login { font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(242, 237, 223, 0.4);
  color: var(--cream);
  border-radius: var(--radius-ctl);
  font-size: 18px;
  padding: 8px 12px;
  cursor: pointer;
}

/* ---------- Surfaces: white glass on cream; figures stay on plates ---------- */
.glass, .glass-strong {
  background: var(--glass-card);
  -webkit-backdrop-filter: var(--glass-card-blur);
  backdrop-filter: var(--glass-card-blur);
  border: 1px solid rgba(20, 35, 29, 0.10);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift), var(--glass-card-edge);
}
.glass-strong { border-radius: var(--radius-panel); box-shadow: var(--shadow-soft), var(--glass-card-edge); }

/* ---------- Dark hero: the ledger room (every page) ---------- */
.hero-dark {
  background-color: var(--dark);
  background-image:
    radial-gradient(920px 500px at 12% -10%, rgba(32, 70, 52, 0.55), rgba(32, 70, 52, 0) 62%),
    radial-gradient(820px 460px at 90% -6%, rgba(23, 56, 42, 0.5), rgba(23, 56, 42, 0) 60%),
    radial-gradient(1080px 560px at 50% 118%, rgba(143, 208, 178, 0.07), rgba(143, 208, 178, 0) 65%);
  color: var(--cream);
  padding: 64px 0 56px;
}
.hero-dark h1 { color: var(--cream); }
.hero-dark .lede {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 19px;
  line-height: 1.55;
  color: var(--cream-step);
  max-width: 44em;
  margin: 0;
}
.hero-dark a:not(.btn) { color: var(--link-dark); }
.hero-dark strong, .hero-dark em { color: inherit; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 28px; }
.link-light { color: var(--cream); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.hero-dark a.link-light { color: var(--cream); }

/* ---------- Buttons: cream on dark, deep green on cream — never gold ---------- */
.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: var(--radius-ctl);
  border: 1px solid transparent;
  cursor: pointer;
}
.btn:active { transform: scale(0.98); }
.btn-light { background: var(--cream); color: var(--dark); box-shadow: var(--shadow-dark); }
.btn-light:hover { background: #ffffff; }
.btn-dark { background: var(--dark); color: var(--cream); box-shadow: var(--shadow-lift); }
.btn-dark:hover { background: var(--dark-2); }
.btn-quiet {
  background: transparent;
  color: var(--ink);
  border-color: rgba(20, 35, 29, 0.28);
}
.btn-quiet:hover { border-color: var(--ink); }

/* ---------- The sample portfolio wall (Moment 1, spec §3/§5.1) ---------- */
.wall {
  margin-top: 40px;
  background: var(--glass-dark);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-dark), var(--glass-edge);
  padding: 28px 28px 20px;
}
.wall-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.wall-title { font-size: 15px; font-weight: 500; color: var(--cream); }
.stamp {
  /* Courier device 2 of 2: the period/source stamp (audit B1). */
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
}
/* The figures' inner plate (§6): solid #12241c inside the glass
   shell, so no number ever sits over the frost. */
.wall-table {
  margin-top: 16px;
  background: var(--plate);
  border: 1px solid var(--plate-line);
  border-radius: 14px;
  padding: 6px 18px 10px;
}
.wall-row {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr 0.8fr 0.8fr;
  gap: 16px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--line-dark);
}
.wall-row.head { padding: 8px 0; border-top: 0; }
.wall-row.head span {
  font-size: 12px;
  color: var(--muted-dark);
}
.wall-row.head span:not(:first-child), .wall-fig { text-align: right; }
.wall-store { font-weight: 500; color: var(--cream); }
.wall-store small { display: block; font-weight: 400; font-size: 13px; color: var(--muted-dark); }
.wall-fig {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--cream);
  white-space: nowrap;
}
.wall-row.total { border-top: 1px solid var(--gold); }
.wall-row.total .wall-store, .wall-row.total .wall-fig { font-weight: 500; }
.wall-note { margin-top: 16px; font-size: 13px; color: var(--muted-dark); }

/* ---------- Sample charts (homepage showcase, 2026-11-06) ----------
   Cream-ramp data marks on the dark-2 panel; gold stays on its §2.1
   budget — the Courier stamp, the trend's latest point, and the P&L
   net bar (the "bottom line") are the only gold in the charts. */
.charts-title { color: var(--cream); margin-top: 44px; }
.charts-lede { color: var(--muted-dark); max-width: 70ch; }
.charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.chart-panel {
  background: var(--glass-dark);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-dark), var(--glass-edge);
  padding: 20px 20px 12px;
  margin: 0;
}
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.chart-title { font-size: 14px; font-weight: 500; color: var(--cream); }
.chart-svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 12px;
  background: var(--plate);
  border: 1px solid var(--plate-line);
  border-radius: 12px;
  padding: 10px 10px 6px;
}
.chart-svg text { font-family: Arial, Helvetica, sans-serif; }
.chart-cap { font-size: 12px; color: var(--muted-dark); margin: 10px 0 4px; }

/* ---------- New-client offer panel (2026-11-06) ---------- */
.offer-panel {
  background: rgba(13, 26, 21, 0.92);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-dark), inset 0 1px 0 rgba(242, 237, 223, 0.14), inset 0 28px 44px -28px rgba(242, 237, 223, 0.12);
  padding: 36px 36px 20px;
}
.offer-panel h2 { color: var(--cream); margin-top: 10px; }
.offer-panel p { color: var(--cream-step); max-width: 68ch; }

/* ---------- Stat strip (proof, restyled; numbers only — audit C3) ---------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  margin: 32px 0 8px;
  background: var(--glass-card);
  -webkit-backdrop-filter: var(--glass-card-blur);
  backdrop-filter: var(--glass-card-blur);
  border: 1px solid rgba(20, 35, 29, 0.10);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift), var(--glass-card-edge);
}
.stat-strip .stat { padding: 20px 24px; text-align: center; }
.stat-strip .stat + .stat { border-left: 1px solid var(--line); }
.stat .stat-k { font-size: 13px; color: var(--muted); }
.stat .stat-v { font-size: 20px; font-weight: 500; color: var(--ink); padding-top: 4px; line-height: 1.35; }
.stat-strip.dark {
  background: rgba(18, 36, 28, 0.62);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  border-color: var(--glass-line);
  box-shadow: var(--shadow-dark), var(--glass-edge);
}
.stat-strip.dark .stat + .stat { border-left-color: var(--line-dark); }
.stat-strip.dark .stat-k { color: var(--muted-dark); }
.stat-strip.dark .stat-v { color: var(--cream); }

/* ---------- Sections & cards (cream) ---------- */
.section { padding: 48px 0 8px; }
.section-head { max-width: 46em; }
.eyebrow {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 8px;
}
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.card { padding: 28px 28px 12px; }
.card .num, .svc-num {
  font-weight: 500;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 8px;
}
.panel { padding: 32px 32px 16px; margin-top: 24px; }
.panel.flush-top { margin-top: 0; }

.rhythm { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 28px; margin: 8px 0 20px; padding: 0; list-style: none; }
.rhythm li { padding-left: 28px; position: relative; }
.rhythm li::before {
  content: "";
  position: absolute;
  left: 0; top: 12px;
  width: 12px; height: 4px;
  background: var(--dark);
  border-radius: 2px;
}
.steps { counter-reset: step; margin: 8px 0 16px; padding: 0; list-style: none; }
.steps li { padding: 12px 0 12px 52px; position: relative; border-bottom: 1px dashed var(--line); }
.steps li:last-child { border-bottom: 0; }
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0; top: 8px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--dark);
  color: var(--cream);
  font-family: Georgia, serif;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
}

.callout {
  border-left: 4px solid var(--dark);
  padding: 20px 28px 8px;
  margin: 28px 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 19px;
  color: var(--ink);
}
.fineprint { font-size: 14px; color: var(--muted); }

/* ---------- Forms (contact / lead) ---------- */
.lead-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.lead-form .full { grid-column: 1 / -1; }
.lead-form label { display: block; font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.lead-form input, .lead-form select, .lead-form textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  padding: 12px;
  border: 1px solid rgba(20, 35, 29, 0.28);
  border-radius: var(--radius-ctl);
  background: #ffffff;
}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.form-note { font-size: 14px; color: var(--muted); margin-top: 12px; }
.form-status { display: none; margin-top: 16px; padding: 12px 16px; border-radius: var(--radius-ctl); background: rgba(11, 107, 79, 0.1); color: var(--ink); }
.form-status.show { display: block; }

/* ---------- Footer: dark band, hairline — the gold rule lives in the header only (B7) ---------- */
.site-footer {
  margin-top: 72px;
  background: rgba(13, 26, 21, 0.94);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  color: #b9c6bd;
  border-top: 1px solid var(--line-dark);
  box-shadow: inset 0 1px 0 rgba(242, 237, 223, 0.08);
}
.site-footer .wrap { padding-top: 32px; padding-bottom: 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
.site-footer a { color: var(--cream); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer strong { color: var(--cream); }
.footer-nav { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin-bottom: 8px; }
.footer-proof {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line-dark);
  font-size: 13px;
  color: var(--muted-dark);
}
.site-footer .fineprint { color: var(--muted-dark); margin-top: 12px; }

/* ---------- Offer band (owner direction, 2026-11-06: first two months free) ---------- */
.offer-band {
  margin-top: 28px;
  background: rgba(18, 36, 28, 0.52);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(242, 237, 223, 0.18);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-dark), var(--glass-edge);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
}
.offer-main {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 20px;
  line-height: 1.35;
  color: var(--cream);
  margin: 0;
}
.offer-sub { color: var(--cream-step); font-size: 14px; margin: 4px 0 0; max-width: 40em; }
.offer-band .btn { flex: none; }

/* ---------- Dark charts band: the sample visuals (marketing upgrade, 2026-11-06) ----------
   Same ledger room as the hero wall: glass shells (owner addendum,
   2026-11-06) with every figure on a solid #12241c inner plate,
   cream figures (tabular, ≥7:1), gold only as the stamp and the
   current-period dot — the §2.1 gold budget is unchanged. Every
   chart is SAMPLE data and is stamped Sample in its header, its
   aria label, and its closing note. */
.section-dark {
  background-color: var(--dark);
  background-image:
    radial-gradient(900px 480px at 85% -10%, rgba(28, 62, 47, 0.5), rgba(28, 62, 47, 0) 60%),
    radial-gradient(1000px 520px at 8% 110%, rgba(143, 208, 178, 0.05), rgba(143, 208, 178, 0) 65%);
  color: var(--cream);
  padding: 56px 0 64px;
  margin-top: 48px;
}
.section-dark h2 { color: var(--cream); }
.section-dark .eyebrow { color: var(--muted-dark); }
.section-dark .section-sub { color: var(--cream-step); max-width: 46em; margin: 0; }
.charts-stack { display: grid; gap: 20px; margin-top: 28px; }
.charts-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.chart-panel {
  background: var(--glass-dark);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-dark), var(--glass-edge);
  padding: 24px 24px 16px;
}
.chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.chart-title { font-size: 15px; font-weight: 500; color: var(--cream); }
.chart-note { margin-top: 12px; font-size: 13px; color: var(--muted-dark); }
.chart-svg {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 8px;
  background: var(--plate);
  border: 1px solid var(--plate-line);
  border-radius: 12px;
  padding: 10px 10px 6px;
}
.chart-svg text { font-family: Arial, Helvetica, sans-serif; }
.sv-val { fill: var(--cream); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.sv-meta { fill: var(--muted-dark); font-size: 11px; }
.sv-line { fill: none; stroke: var(--cream-step); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sv-area { fill: rgba(242, 237, 223, 0.07); }
.sv-grid { stroke: rgba(242, 237, 223, 0.10); stroke-width: 1; }
.sv-pt { fill: var(--dark-2); stroke: var(--cream-step); stroke-width: 2; }
.sv-now { fill: var(--gold); stroke: var(--dark-2); stroke-width: 2; }

/* Per-store comparison bars (sample) — on the solid plate (§6) */
.bars {
  margin-top: 16px;
  display: grid;
  gap: 14px;
  background: var(--plate);
  border: 1px solid var(--plate-line);
  border-radius: 12px;
  padding: 14px 16px 12px;
}
.bar-row { display: grid; grid-template-columns: 116px 1fr 64px; gap: 12px; align-items: center; }
.bar-name { font-size: 13px; color: var(--cream-step); white-space: nowrap; }
.bar-track { height: 10px; background: rgba(242, 237, 223, 0.10); border-radius: 5px; overflow: hidden; }
/* Chart marks are colored glass (owner addendum, 2026-11-06):
   translucent tinted fills, a light catch on the top edge, a soft
   vertical sheen, and a faint inner glow at the base. */
.bar-fill {
  height: 100%;
  background: linear-gradient(180deg, rgba(247, 243, 230, 0.95), rgba(217, 211, 193, 0.58) 55%, rgba(143, 168, 152, 0.48));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -6px 8px -6px rgba(242, 237, 223, 0.28);
  border-radius: 5px;
}
.bar-val {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--cream);
  text-align: right;
  font-size: 14px;
  white-space: nowrap;
}
.bars-total {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--gold);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.bars-total .bar-name { font-size: 14px; font-weight: 500; color: var(--cream); }
.bars-total .bar-val { font-size: 15px; }

/* Payroll hours columns (sample) — on the solid plate (§6) */
.cols {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 16px;
  background: var(--plate);
  border: 1px solid var(--plate-line);
  border-radius: 12px;
  padding: 14px 16px 10px;
}
.col-x { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; }
.col-val { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--cream); font-size: 13px; white-space: nowrap; }
.col-bar {
  width: 100%;
  max-width: 56px;
  background: linear-gradient(180deg, rgba(247, 243, 230, 0.98), rgba(217, 211, 193, 0.62) 58%, rgba(143, 168, 152, 0.52));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -10px 14px -10px rgba(242, 237, 223, 0.30);
  border-radius: 6px 6px 0 0;
}
/* Gold glass is reserved for the current period (§2.1 budget) */
.col-bar.current {
  background: linear-gradient(180deg, rgba(236, 210, 122, 0.98), rgba(201, 162, 39, 0.78) 55%, rgba(154, 123, 30, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 244, 200, 0.65), inset 0 -10px 14px -10px rgba(255, 236, 170, 0.38);
}
.col-lab { font-size: 12px; color: var(--muted-dark); text-align: center; }

/* ---------- The cycle (services): one rhythm, three deliveries ---------- */
.cycle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.cycle-step {
  background: var(--glass-card);
  -webkit-backdrop-filter: var(--glass-card-blur);
  backdrop-filter: var(--glass-card-blur);
  border: 1px solid rgba(20, 35, 29, 0.10);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift), var(--glass-card-edge);
  padding: 24px 24px 12px;
  position: relative;
}
.cycle-step::before {
  content: "";
  position: absolute;
  top: 0; left: 24px;
  width: 28px; height: 4px;
  background: var(--dark);
  border-radius: 0 0 2px 2px;
}
.cycle-when { font-weight: 500; color: var(--ink); font-size: 15px; margin-bottom: 8px; }
.cycle-when .num { color: var(--muted); font-size: 13px; margin-right: 8px; }

/* ---------- Responsive (mobile check: 390px) ---------- */
@media (max-width: 860px) {
  .wrap { padding: 0 16px; }
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  .cards, .cards.two, .charts { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: 1fr; }
  .stat-strip .stat + .stat { border-left: 0; border-top: 1px solid var(--line); }
  .stat-strip.dark .stat + .stat { border-top-color: var(--line-dark); }
  .rhythm { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .lead-form { grid-template-columns: 1fr; }
  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: rgba(13, 26, 21, 0.97);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px 16px;
    gap: 4px;
  }
  /* Blur is GPU-costly: one step down on small screens (House Glass perf note) */
  .glass, .glass-strong, .cycle-step, .stat-strip, .wall, .chart-panel, .offer-band {
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
  }
  .main-nav.open { display: flex; }
  .hero-dark { padding: 48px 0 40px; }
  .panel { padding: 24px 20px 12px; }
  .offer-panel { padding: 28px 20px 12px; }
  .wall { padding: 20px 16px 12px; }
  .wall-row { grid-template-columns: 1.4fr 0.8fr 0.8fr; gap: 12px; }
  .wall-row .col-pl { display: none; }
  .offer-band { padding: 16px; }
  .offer-band .btn { width: 100%; text-align: center; }
  .section-dark { padding: 40px 0 44px; }
  .charts-two { grid-template-columns: 1fr; }
  .chart-panel { padding: 20px 16px 12px; }
  .bar-row { grid-template-columns: 96px 1fr 58px; gap: 8px; }
  .cols { gap: 8px; }
  .col-val { font-size: 11px; }
  .col-lab { font-size: 11px; }
  .cycle { grid-template-columns: 1fr; }
}