/* ============================================================
   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; display: inline-block; padding: 10px 2px; }
.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; }
/* Standalone footer links get a real tap target (responsive pass,
   2026-11-06): block + vertical padding lifts them past the 24px
   floor without touching the copy or the layout rhythm. */
.footer-nav a { display: block; padding: 3px 0; }
.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; }
}

/* ---------- Responsive pass — owner device matrix (2026-11-06) ----------
   The audit behind this block (hidden_files/responsive-pass-verify):
   the single 860px breakpoint left three measured defects —
   (1) the desktop nav wrapped to two lines at EVERY width ≥1024
       (header 119px tall), because brand + 7 links exceed the
       1120px wrap;
   (2) index overflowed horizontally at 344/360px: the 6-column
       .cols plate's min-content (~366px) forced .charts-two wide,
       silently overhanging its container at 390/430 too;
   (3) at tablet widths (561–860) every grid collapsed to one
       column — correct but sparse, and the stat strip stacked.
   Fixes below are presentation only; the §6 floor is untouched. */

/* Grid children may shrink below min-content — a wide plate inside
   a panel must never widen the page (defect 2 hygiene, all widths). */
.chart-panel, .charts-two > *, .charts > *, .cards > *, .cycle-step { min-width: 0; }
.chart-head > * { min-width: 0; }

/* Defect 1: the header is a toggle menu up to 1240px (the pattern
   already proven at ≤860), and the full nav only appears where it
   provably fits on one line — tightened links at ≥1241. */
@media (min-width: 1241px) {
  .main-nav { gap: 2px; flex-wrap: nowrap; }
  .main-nav a { padding: 8px 10px; font-size: 14px; white-space: nowrap; }
}
@media (max-width: 1240px) {
  .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;
    flex-wrap: nowrap;
    padding: 12px 16px 16px;
    gap: 4px;
  }
  .main-nav a { padding: 10px 12px; }
  .main-nav.open { display: flex; }
}

/* Defect 3: tablet tier — two-column grids and a 3-up stat strip
   where the width honestly carries them (iPad portrait, Fold open). */
@media (min-width: 561px) and (max-width: 860px) {
  .cards, .cards.two, .cycle { grid-template-columns: repeat(2, 1fr); }
  .rhythm { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .lead-form { grid-template-columns: 1fr 1fr; }
  .stat-strip { grid-template-columns: repeat(3, 1fr); }
  .stat-strip .stat + .stat { border-left: 1px solid var(--line); border-top: 0; }
  .stat-strip.dark .stat + .stat { border-left-color: var(--line-dark); }
}

/* Small phones + Fold cover (≤560): restructure, never shrink. */
@media (max-width: 560px) {
  /* The payroll columns go 3 × 2 — each value gets a cell it fits
     (defect 2's root fix), bar heights are fixed px so the chart
     reads identically, just folded. */
  .cols { grid-template-columns: repeat(3, 1fr); gap: 18px 10px; }
  .col-val { font-size: 12px; }
  .col-lab { font-size: 12px; }
  /* Long Courier stamps wrap tighter instead of forcing width. */
  .stamp { letter-spacing: 1px; }
  /* The hero wall's plate gets its side padding back as figure room. */
  .wall { padding: 20px 12px 12px; }
  .wall-table { padding: 6px 12px 10px; }
  /* Glass step-down, second step: at phone widths a viewport can
     stack header + wall + panels + footer blurs; 10px keeps the
     frost (figures stay on their solid plates) at a fraction of
     the GPU cost on a mid phone. */
  .site-header, .site-footer, .offer-panel,
  .glass, .glass-strong, .cycle-step, .stat-strip, .wall, .chart-panel, .offer-band {
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
    backdrop-filter: blur(10px) saturate(1.15);
  }
}

/* ---------- Landing imagery (2026-11-09, second pass) ----------
   Four researched photos wired into index.html: hero (owner at his
   desk at dawn), pain→relief band, how-it-works glass tiles, and the
   dawn store texture band. Frames reuse the existing glass tokens;
   images carry no text of their own, so the §6 readability floor is
   untouched. */
.hero-photo {
  margin: 32px 0 0;
  border-radius: var(--radius-panel);
  overflow: hidden;
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-dark);
}
.hero-photo img, .band-photo img { display: block; width: 100%; height: auto; }
.band-photo {
  margin: 28px 0 4px;
  border-radius: var(--radius-panel);
  overflow: hidden;
  border: 1px solid rgba(20, 35, 29, 0.10);
  box-shadow: var(--shadow-lift);
}
.texture-band { margin-top: 48px; overflow: hidden; }
.texture-band img { display: block; width: 100%; height: 420px; object-fit: cover; }
@media (max-width: 860px) {
  .texture-band img { height: 260px; }
}