/* ============================================================
   VARIANT A — TONAL BREAK (Restrained)
   Solves homogeneity without abandoning the spec-sheet voice.
   - 2 strategic inversions (Philosophy cream, Case Study cool reticle)
   - Subtle warm/cool tonal drift across the remaining dark anchors
   - Padding rhythm audit
   - Opening-ritual variations per section
   This file is loaded AFTER styles.css and bg-effects.css and
   uses !important where bg-effects.css fights us with !important.
   ============================================================ */

/* ─── Tonal tokens specific to Variant A ──────────────────── */
body.variant-a {
  /* Anchor warm-near-black stays from --bg.
     Define the off-axis tones ONLY here so they never leak. */
  --va-warm: #14100a;     /* +5-7% warmer — Problem (heavy/weighty BOM section) */
  --va-warm-faint: #0c0a08; /* +1-2% warmer — FAQ (appendix, subtle) */
  --va-cool: #07090d;     /* +3-4% cooler (Offer — computed/data-leaning) */
  --va-case: #050609;     /* coolest — case study */
  --va-blueprint: #1a1d22; /* mid-tone charcoal — financial/spec page (Comparison) */
  --va-blueprint-ink: rgba(230,232,238,0.92);
  --va-cream: #f1ede4;    /* tinted off-white, paper, NOT pure white */
  --va-cream-deep: #e8e2d3; /* slight shadow on cream surface */
  --va-ink: #0a0a0a;      /* type on cream */
  --va-ink-muted: rgba(10,10,10,0.62);
  --va-ink-faint: rgba(10,10,10,0.18);
  --va-ink-hairline: rgba(10,10,10,0.14);
}

/* ─── Section tonal drifts (override bg-effects.css) ──────── */
/* bg-effects.css does:  body:not(.glass-solid) section { background: var(--ldl-glass-bg) !important; }
   We win because we load later AND use higher specificity (id+class). */

body.variant-a #problem {
  background: var(--va-warm) !important;
}

body.variant-a #faq {
  background: var(--va-warm-faint) !important;
}

body.variant-a #offer {
  background: var(--va-cool) !important;
}

body.variant-a #case-study {
  background: var(--va-case) !important;
}

body.variant-a #philosophy {
  background: var(--va-cream) !important;
}

body.variant-a #comparison {
  background: var(--va-blueprint) !important;
}

/* bg-effects.css also paints .section-container — override per section so
   our tonal shifts actually show through. */
body.variant-a #problem    .section-container { background: var(--va-warm) !important; }
body.variant-a #faq        .section-container { background: var(--va-warm-faint) !important; }
body.variant-a #offer      .section-container { background: var(--va-cool) !important; }
body.variant-a #case-study .section-container { background: transparent !important; }
body.variant-a #philosophy .section-container { background: transparent !important; }
body.variant-a #comparison .section-container { background: transparent !important; }

/* Problem BOM nodes inherit panel bg — repaint to match warm shift */
body.variant-a #problem .problem-bom-node {
  background: var(--va-warm) !important;
}

/* Problem warm shift earns a top hairline so the Hero→Problem seam reads
   as a page-turn, not an accidental gradient. */
body.variant-a #problem {
  box-shadow: inset 0 1px 0 rgba(255,140,80,0.06);
}

/* Offer cards/case-study card glass override */
body.variant-a #offer .offer-card,
body.variant-a #case-study .case-study-card {
  background: transparent !important;
}

/* FAQ items glass override (warm shift) */
body.variant-a #faq .faq-item {
  background: transparent !important;
}

/* ─── Padding rhythm audit ────────────────────────────────── */
/* Vary the breath. Cream demands roomy. Comparison stays dense.
   FAQ tightens (it's the appendix). */
body.variant-a #problem    { padding: 9rem 2rem 7.5rem; }
body.variant-a #philosophy { padding: 11rem 2rem 12rem; }   /* roomy: cream needs space */
body.variant-a #offer      { padding: 6rem 2rem 7rem; }
body.variant-a #comparison { padding: 5rem 2rem 4.5rem; }   /* tighter, financial-doc */
body.variant-a #case-study { padding: 8rem 2rem 9rem; }     /* narrative-paced */
body.variant-a #faq        { padding: 4rem 2rem 5rem; }     /* tight appendix */
body.variant-a #contact    { padding: 8rem 2rem 6rem; }

@media (max-width: 768px) {
  body.variant-a #problem    { padding: 5.5rem 1.25rem 4.5rem; }
  body.variant-a #philosophy { padding: 6.5rem 1.5rem 7rem; }
  body.variant-a #offer      { padding: 4.5rem 1.25rem 5rem; }
  body.variant-a #comparison { padding: 4rem 1.25rem 3.5rem; }
  body.variant-a #case-study { padding: 5rem 1.25rem 5.5rem; }
  body.variant-a #faq        { padding: 3.5rem 1.25rem 4rem; }
  body.variant-a #contact    { padding: 5rem 1.25rem 4.5rem; }
}

/* ============================================================
   PHILOSOPHY — cream drench inversion
   The "human-judgment page" of the datasheet.
   Lime section marker (taxonomy: green = human judgment).
   Hairline-bordered ink-printed quote-cards, museum-caption feel.
   ============================================================ */

body.variant-a #philosophy {
  color: var(--va-ink);
  /* faint paper texture: tight orthogonal hairlines, very low opacity */
  background-image:
    linear-gradient(to bottom, rgba(10,10,10,0.025) 1px, transparent 1px),
    linear-gradient(to right, rgba(10,10,10,0.020) 1px, transparent 1px) !important;
  background-size: 100% 56px, 56px 100% !important;
  background-color: var(--va-cream) !important;
}

/* Top + bottom seam — hairline rule against adjacent dark sections */
body.variant-a #philosophy {
  box-shadow:
    0 -1px 0 rgba(10,10,10,0.08),
    0 1px 0 rgba(10,10,10,0.08);
}

/* The vertical 33/66 hairlines were tuned for dark — invert ink */
body.variant-a #philosophy .section-container::before,
body.variant-a #philosophy .section-container::after {
  background: rgba(10,10,10,0.06);
}

/* Section marker: lime bar (human judgment), green eyebrow */
body.variant-a #philosophy .section-marker .bar {
  background: var(--green);
}
body.variant-a #philosophy .section-marker .num {
  color: var(--va-ink);
}

/* Philosophy is the editorial-quote chapter, not a binder page.
   Tie it to the binder with one mono caption — "from the field manual" —
   so the reader knows this cream surface still belongs to the same document. */
body.variant-a #philosophy .section-marker::after {
  content: 'FROM THE FIELD MANUAL · CHAPTER 04';
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.42);
  font-weight: 500;
  margin-left: 1rem;
}

@media (max-width: 640px) {
  body.variant-a #philosophy .section-marker::after {
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    margin-left: 0;
    flex-basis: 100%;
  }
}

/* Headline — oversized statement, cream demands a bigger voice */
body.variant-a #philosophy .section-headline {
  font-size: clamp(2.8rem, 7vw, 6rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--va-ink);
  margin-bottom: 4rem;
  max-width: 16ch;
}
/* Re-color emphasis word — orange still reads clean on cream */
body.variant-a #philosophy .section-headline .text-orange { color: var(--orange); }
body.variant-a #philosophy .section-headline .text-green  { color: #5e8a1e; } /* darker lime for contrast */

/* Cards: hairline-bordered ink-printed quotes against cream */
body.variant-a #philosophy .philosophy-grid {
  background: transparent;
  border: none;
  gap: 0;
  margin-top: 4rem;
  grid-template-columns: 1.6fr 1fr;
  /* hairlines drawn by cards themselves */
}

body.variant-a #philosophy .philosophy-card {
  background: transparent !important;
  padding: 3rem 2.75rem;
  border-top: 1px solid var(--va-ink-faint);
  border-left: 1px solid var(--va-ink-faint);
  /* visual reset of dark hover */
}
body.variant-a #philosophy .philosophy-card:hover {
  background: rgba(10,10,10,0.025) !important;
}

/* dominant card */
body.variant-a #philosophy .philosophy-card:first-child {
  padding: 4.5rem 4rem;
  border-bottom: 1px solid var(--va-ink-faint);
}

/* right column rightmost border */
body.variant-a #philosophy .philosophy-card:nth-child(2),
body.variant-a #philosophy .philosophy-card:nth-child(3) {
  border-right: 1px solid var(--va-ink-faint);
}
body.variant-a #philosophy .philosophy-card:last-child {
  border-bottom: 1px solid var(--va-ink-faint);
}

/* Card label — green eyebrow on cream, deeper for contrast */
body.variant-a #philosophy .philosophy-card-label {
  color: #5e8a1e;
  position: relative;
}

/* Serial-number prefix on each card label: FRAG-01/02/03.
   Builds on the Case Study REPORT FRAGMENT vocabulary —
   Philosophy cards are museum-caption fragments of the same binder. */
body.variant-a #philosophy .philosophy-card:nth-child(1) .philosophy-card-label::before { content: 'FRAG-01 · '; opacity: 0.55; }
body.variant-a #philosophy .philosophy-card:nth-child(2) .philosophy-card-label::before { content: 'FRAG-02 · '; opacity: 0.55; }
body.variant-a #philosophy .philosophy-card:nth-child(3) .philosophy-card-label::before { content: 'FRAG-03 · '; opacity: 0.55; }

/* Card quote — ink */
body.variant-a #philosophy .philosophy-card-quote {
  color: var(--va-ink);
}
body.variant-a #philosophy .philosophy-card:first-child .philosophy-card-quote {
  font-size: clamp(2rem, 3.6vw, 3.4rem);
}

/* Card body */
body.variant-a #philosophy .philosophy-card-body {
  color: var(--va-ink-muted);
}
body.variant-a #philosophy .philosophy-card:first-child .philosophy-card-body {
  color: rgba(10,10,10,0.78);
}

@media (max-width: 768px) {
  body.variant-a #philosophy .philosophy-grid {
    grid-template-columns: 1fr;
  }
  body.variant-a #philosophy .philosophy-card {
    padding: 2.5rem 1.75rem;
    border-right: 1px solid var(--va-ink-faint);
  }
  body.variant-a #philosophy .philosophy-card:first-child {
    padding: 3rem 1.75rem;
  }
}

/* ============================================================
   CASE STUDY — cooler near-black + technical reticle
   Project ID stamp leads, headline follows. Report fragment.
   ============================================================ */

body.variant-a #case-study {
  /* Engineering reticle: 80px coarse + 16px fine, very low opacity */
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.018) 1px, transparent 1px) !important;
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px !important;
  background-color: var(--va-case) !important;
}

/* Reverse the opening ritual: project stamp first, headline below.
   Re-style the section-marker to read as a project header. */
body.variant-a #case-study .section-marker {
  margin-bottom: 1.25rem;
}
body.variant-a #case-study .section-marker .bar {
  width: 88px;
  height: 4px;
}

/* Inject the project stamp via ::before on the headline */
body.variant-a #case-study .section-headline {
  position: relative;
  padding-top: 1.5rem;
  margin-bottom: 2.25rem;
}
body.variant-a #case-study .section-headline::before {
  content: 'PROJECT // BJJF-MERCH-OPS · CLASS: PUBLIC · REV: 2026.04';
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(230,230,230,0.5);
  font-weight: 500;
  margin-bottom: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 1.25rem;
}

/* The card becomes a printed report excerpt: classification stamp at top,
   sharper hairlines, more telemetry feel */
body.variant-a #case-study .case-study-card {
  position: relative;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255,69,0,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 4rem; /* room for sign-off */
  margin-top: 3.5rem;
}

/* Report sign-off: bottom-right corner of the card, mirrors the top stamp.
   Reads as a real engineering doc footer. */
body.variant-a #case-study .case-study-card::after {
  content: 'END OF REPORT · SIGNED A.PIRES · 2026.04.30';
  position: absolute;
  bottom: -1px;
  right: 0;
  transform: translateY(50%);
  background: var(--va-case);
  padding: 0 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(140,198,63,0.65);
  font-weight: 600;
}

/* Document header strip on the card */
body.variant-a #case-study .case-study-card::before {
  content: 'REPORT FRAGMENT · DOC-CS-001 · 2026.04.30';
  position: absolute;
  top: -1px;
  left: 0;
  transform: translateY(-50%);
  background: var(--va-case);
  padding: 0 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 600;
}

/* Existing label — promote to project ID stamp visual */
body.variant-a #case-study .case-study-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(140,198,63,0.35);
  background: rgba(140,198,63,0.04);
  letter-spacing: 0.2em;
  margin-bottom: 1.75rem;
}
body.variant-a #case-study .case-study-label::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  display: inline-block;
}

@media (max-width: 768px) {
  body.variant-a #case-study .section-headline::before {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
  }
  body.variant-a #case-study .case-study-card::before {
    font-size: 0.55rem;
    letter-spacing: 0.18em;
  }
}

/* ============================================================
   PROOF CARD — cream paper testimonial sticker (second cream moment)
   The glass-card-over-marquee was the only "card on dark over media"
   moment on the page. Inverts to cream paper: a printed testimonial
   stuck onto the marquee, like a clipping pinned to a board.
   ============================================================ */
body.variant-a #proof .glass-card {
  background: var(--va-cream) !important;
  border: 1px solid rgba(10,10,10,0.18) !important;
  box-shadow:
    0 0 0 1px rgba(10,10,10,0.04),
    0 2px 0 rgba(255,69,0,0.42),
    0 22px 44px -16px rgba(0,0,0,0.55),
    0 32px 0 -27px rgba(10,10,10,0.16) !important;
}
body.variant-a #proof .glass-card-mono {
  color: #b13a00; /* deeper orange for cream contrast */
}
body.variant-a #proof .glass-card-logo {
  filter: brightness(0); /* logo goes black, was white-on-dark */
}
body.variant-a #proof .glass-card-desc {
  color: var(--va-ink);
}
body.variant-a #proof .glass-card-divider {
  border-top-color: var(--va-ink-faint);
}
body.variant-a #proof .glass-card-quote {
  color: var(--va-ink);
}
body.variant-a #proof .glass-card-quote cite {
  color: #b13a00;
}
/* Proof-log telemetry rows: re-tint for cream */
body.variant-a #proof .proof-log {
  background: rgba(10,10,10,0.04);
}
body.variant-a #proof .proof-log-row {
  color: rgba(10,10,10,0.70);
}
body.variant-a #proof .proof-log-row:hover {
  color: var(--va-ink);
}
body.variant-a #proof .proof-log-id {
  color: #b13a00;
}
body.variant-a #proof .proof-log-name {
  color: rgba(10,10,10,0.55);
}
body.variant-a #proof .proof-log-leader {
  border-bottom-color: rgba(10,10,10,0.20);
}
body.variant-a #proof .proof-log-value {
  color: #b13a00;
}
body.variant-a #proof .proof-log-row--clean .proof-log-value {
  color: var(--va-ink);
}
body.variant-a #proof .proof-log-tag {
  background: rgba(94,138,30,0.14);
  border-color: rgba(94,138,30,0.45);
  color: #5e8a1e;
}

/* ============================================================
   PROBLEM — warmer dark, BOM-INDEX architectural intro
   ============================================================ */
body.variant-a #problem .section-headline {
  position: relative;
  padding-top: 1.5rem;
}
body.variant-a #problem .section-headline::before {
  content: 'BOM // BUILD-OF-MATERIALS · CLASS: PUBLIC · PAGE 03/09';
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,200,160,0.42);
  font-weight: 500;
  margin-bottom: 1.25rem;
  border-top: 1px solid rgba(255,180,120,0.10);
  padding-top: 1.25rem;
}

@media (max-width: 768px) {
  body.variant-a #problem .section-headline::before {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
  }
}

/* ============================================================
   OFFER — cooler dark (computed) + MODULES stamp
   Card backgrounds + small accent pull
   ============================================================ */
body.variant-a #offer .section-headline {
  position: relative;
  padding-top: 1.5rem;
}
body.variant-a #offer .section-headline::before {
  content: 'MODULES // CAPABILITIES.INDEX · CLASS: PUBLIC · PAGE 05/09';
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(160,180,220,0.42);
  font-weight: 500;
  margin-bottom: 1.25rem;
  border-top: 1px solid rgba(160,180,220,0.10);
  padding-top: 1.25rem;
}

@media (max-width: 768px) {
  body.variant-a #offer .section-headline::before {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
  }
}

/* ============================================================
   FAQ — appendix small-print treatment
   Drop the section headline visually (keep semantic for SEO).
   Tighter pad, smaller marker, smaller list.
   ============================================================ */
body.variant-a #faq .section-marker {
  margin-bottom: 1.25rem;
}
body.variant-a #faq .section-marker .bar {
  width: 64px;
  height: 3px;
}
body.variant-a #faq .section-marker .num {
  font-size: 0.7rem;
}

/* Visually-hidden (but still in DOM, accessible, indexed) section headline */
body.variant-a #faq .section-headline {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Replace the missing visual headline with a small mono caption */
body.variant-a #faq .section-marker::after {
  content: 'questions · the small print · expand to read';
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(230,230,230,0.42);
  font-weight: 500;
  margin-left: 1rem;
}

/* Squeeze the list a touch — appendix density */
body.variant-a #faq .faq-list {
  margin-top: 1.5rem;
  max-width: 760px;
}
body.variant-a #faq .faq-question {
  padding: 1.25rem 1.5rem;
  font-size: 1.02rem;
}
body.variant-a #faq .faq-answer p {
  padding: 0 1.5rem 1.25rem 3.6rem;
  font-size: 0.94rem;
}

@media (max-width: 640px) {
  body.variant-a #faq .section-marker::after {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    margin-left: 0;
    flex-basis: 100%;
  }
}

/* ============================================================
   CONTACT — anchor surface, INTAKE stamp closes the binder
   Form section already has // INTAKE_FORM marker; the section
   stamp acts as the cover page.
   ============================================================ */
body.variant-a #contact .section-headline {
  position: relative;
  padding-top: 1.5rem;
}
body.variant-a #contact .section-headline::before {
  content: 'INTAKE // CALL.REQUEST · CLASS: CONFIDENTIAL · PAGE 09/09';
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,200,160,0.45);
  font-weight: 500;
  margin-bottom: 1.25rem;
  border-top: 1px solid rgba(255,180,120,0.12);
  padding-top: 1.25rem;
}

@media (max-width: 768px) {
  body.variant-a #contact .section-headline::before {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
  }
}

/* ============================================================
   COMPARISON — blueprint mid-tone (third surface)
   Charcoal-graphite page. Financial datasheet / spec-sheet
   feel. Distinct from both the dark anchor and the cream.
   Top + bottom hairlines articulate the page-turn.
   ============================================================ */
body.variant-a #comparison {
  color: var(--va-blueprint-ink);
  /* Blueprint grid: 40px coarse, 8px fine. Higher contrast than case-study
     reticle since this surface is lighter (-1.7% from charcoal) */
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.022) 1px, transparent 1px) !important;
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px !important;
  background-color: var(--va-blueprint) !important;
  /* Top + bottom hairlines: page-turn cue */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(255,255,255,0.06);
}

body.variant-a #comparison .section-headline { margin-bottom: 1.5rem; }

/* 33/66 hairlines — re-tint for blueprint surface */
body.variant-a #comparison .section-container::before,
body.variant-a #comparison .section-container::after {
  background: rgba(255,255,255,0.05);
}

/* Mono section marker — push the doc-stamp feel */
body.variant-a #comparison .section-marker .num {
  color: rgba(230,232,238,0.65);
}

/* Comparison gets a "spec sheet" stamp prepended to the headline.
   Mirrors the case-study project-stamp move but in blueprint register. */
body.variant-a #comparison .section-headline {
  position: relative;
  padding-top: 1.5rem;
  margin-bottom: 2.25rem;
}
body.variant-a #comparison .section-headline::before {
  content: 'SPEC SHEET // COST.SUBSTITUTION · CLASS: PUBLIC · PAGE 06/09';
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(230,232,238,0.45);
  font-weight: 500;
  margin-bottom: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 1.25rem;
}

@media (max-width: 768px) {
  body.variant-a #comparison .section-headline::before {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
  }
}

/* Comparison table — let blueprint surface show through (override bg-effects) */
body.variant-a #comparison .comparison-table {
  margin-top: 1.75rem;
  background: transparent !important;
}
body.variant-a #comparison .comparison-table thead th {
  color: rgba(230,232,238,0.55);
  border-bottom-color: rgba(255,255,255,0.18);
}
body.variant-a #comparison .comparison-table tbody td {
  padding-top: 0.95rem;
  padding-bottom: 0.95rem;
  border-bottom-color: rgba(255,255,255,0.07);
}
body.variant-a #comparison .comparison-table tbody tr:hover td {
  background: rgba(255,255,255,0.025);
}

/* Cost cells — keep the bar visualization visible on lighter surface */
body.variant-a #comparison .cost-cell {
  color: rgba(230,232,238,0.92);
}
body.variant-a #comparison .cost-cell::before {
  background: rgba(255,255,255,0.06) !important;
}
body.variant-a #comparison .cost-cell::after {
  background: rgba(255,69,0,0.55) !important;
}
body.variant-a #comparison .cost-unit {
  color: rgba(230,232,238,0.45);
}

/* Status pills — re-tint */
body.variant-a #comparison .status-pill {
  background: rgba(140,198,63,0.10);
  border-color: rgba(140,198,63,0.30);
  color: rgba(190,222,135,0.95);
}

/* Total row visual emphasis */
body.variant-a #comparison .comparison-total td {
  border-top-color: rgba(255,255,255,0.18) !important;
}

/* Savings line — bigger contrast on lighter surface */
body.variant-a #comparison .comparison-savings .savings-line {
  background: rgba(255,69,0,0.06);
  border-color: rgba(255,69,0,0.32);
}
body.variant-a #comparison .savings-label {
  color: rgba(255,180,140,0.70);
}
body.variant-a #comparison .savings-value {
  color: var(--orange);
}
body.variant-a #comparison .savings-unit {
  color: rgba(230,232,238,0.55);
}

/* ============================================================
   VARIANT CHIP — corner fixed marker, looks intentional
   Monospace, low-key. Off-white background, near-black ink.
   ============================================================ */
.variant-chip {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  background: #f1ede4;
  color: #0a0a0a;
  border: 1px solid rgba(10,10,10,0.18);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  user-select: none;
  pointer-events: none;
  box-shadow: 0 1px 0 rgba(10,10,10,0.04), 0 6px 18px rgba(0,0,0,0.18);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}
.variant-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--orange);
  flex-shrink: 0;
  display: inline-block;
}
.variant-chip .va-sep {
  color: rgba(10,10,10,0.35);
  font-weight: 400;
}
.variant-chip .va-sub {
  color: rgba(10,10,10,0.62);
  font-weight: 500;
  letter-spacing: 0.16em;
}
.variant-chip .va-rev {
  color: var(--orange);
  font-weight: 600;
  letter-spacing: 0.18em;
}

@media (max-width: 480px) {
  .variant-chip { font-size: 0.55rem; padding: 0.45rem 0.7rem; bottom: 0.75rem; right: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .variant-chip { box-shadow: 0 1px 0 rgba(10,10,10,0.04); }
}

/* ============================================================
   OPS subdomain additions — hero lead + executive summary
   ============================================================ */

/* Hero lead — punchier second-line tagline above the subheadline */
body.variant-a .hero-lead {
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--orange);
  margin: 0.5rem 0 0.75rem;
  line-height: 1.3;
}

/* Executive Summary — bridge section between hero and social proof */
body.variant-a .executive-summary {
  background: var(--va-warm-faint) !important;
  padding: 4rem 0 3.5rem;
  border-top: 1px solid rgba(255,69,0,0.08);
  border-bottom: 1px solid rgba(140,198,63,0.06);
}
body.variant-a .executive-summary .section-container {
  background: transparent !important;
  max-width: 980px;
  padding-left: 2rem;
  padding-right: 2rem;
}

body.variant-a .doc-stamp-summary {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 2.5rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
body.variant-a .doc-stamp-summary .stamp-class {
  color: var(--orange);
  font-weight: 600;
  letter-spacing: 0.22em;
}
body.variant-a .doc-stamp-summary .stamp-meta {
  color: rgba(255,255,255,0.32);
  font-weight: 400;
}

body.variant-a .summary-statements {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

body.variant-a .summary-statement {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 0;
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.86);
}
body.variant-a .summary-statement .statement-marker {
  flex: 0 0 auto;
  color: var(--orange);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.85em;
  font-weight: 600;
  transform: translateY(-0.05em);
}
body.variant-a .summary-statement-emphasized {
  color: #fff;
  font-weight: 600;
  margin-top: 0.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
body.variant-a .summary-statement-emphasized .statement-marker {
  color: var(--green);
}

@media (max-width: 640px) {
  body.variant-a .executive-summary { padding: 2.5rem 0 2.25rem; }
  body.variant-a .doc-stamp-summary { margin-bottom: 1.75rem; }
  body.variant-a .summary-statements { gap: 0.85rem; }
  body.variant-a .summary-statement { gap: 0.7rem; font-size: 1.1rem; }
  body.variant-a .hero-lead { font-size: 1.1rem; margin: 0.4rem 0 0.6rem; }
}