/* ────────────────────────────────────────────────────────────────
 LegallyHeard, main stylesheet
 Visual tokens locked per brand brief: deep navy + off-white +
 single warm-gold accent. Court-serious.
 ──────────────────────────────────────────────────────────────── */

:root {
 --navy: #0B1B33;
 --navy-700: #122847;
 --navy-500: #21385a;
 --off-white: #FAFAF7;
 --white: #FFFFFF;
 --gold: #C8A964;
 --gold-700: #b08f48;
 --ink: #111111;
 --ink-muted: #5C6479;
 --rule: #E6E4DE;
 --soft: #F1EFE9;
 --danger: #b3261e;
 --max: 1200px;
 --pad: clamp(1rem, 3vw, 2rem);
 --radius: 4px;
 --serif: 'Cormorant Garamond', 'Times New Roman', serif;
 --sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; overflow-x: hidden; }
body { overflow-x: hidden; }
body {
 margin: 0; padding: 0;
 font-family: var(--sans);
 font-size: 17px;
 line-height: 1.6;
 color: var(--ink);
 background: var(--off-white);
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; display: block; }
/* Text links have one native underline. Component borders belong to controls,
   never to every anchor: block links must not draw a second full-width line. */
a { color: var(--navy); text-decoration: none; transition: border-color .2s ease, color .2s ease, text-decoration-color .2s ease; }
/* Prose links keep a visible text-sized affordance. Named controls and navigation
   retain their own appearance, even when a paragraph wraps them. */
:where(main p, main li, .site-footer p) a:not(:where(.btn, .button, .rp-button, .lh-action-button, [role="button"], nav a, [role="navigation"] a)) {
 text-decoration-line: underline;
 text-decoration-thickness: 1px;
 text-underline-offset: 3px;
}
a:hover { text-decoration-color: var(--gold); }
@media (prefers-reduced-motion: reduce) { a { transition: none; } }

/* ── Typography ───────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; color: var(--navy); letter-spacing: -0.01em; margin: 0 0 0.6em; line-height: 1.15; }
h1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; color: var(--ink); }
.lead { font-size: 1.2rem; color: var(--ink-muted); line-height: 1.55; }
.eyebrow { display: inline-block; font-family: var(--sans); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 1.2em; }
.serif { font-family: var(--serif); }
.muted { color: var(--ink-muted); }
.small { font-size: 0.875rem; }
.center { text-align: center; }

/* ── Layout primitives ───────────────────────────────────────── */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: clamp(2.8rem, 5vw, 4.5rem) 0; }
/* Pages use <section class="section container">: .section's horizontal 0 was
   overriding .container's gutter (same specificity, later rule), so content
   touched the screen edge on anything narrower than --max. Keep both paddings. */
.section.container { padding: clamp(2.8rem, 5vw, 4.5rem) var(--pad); }
.section-dark { background: var(--navy); color: var(--white); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--white); }
.section-dark .lead, .section-dark p { color: rgba(255,255,255,0.82); }
.section-dark a:not(.btn) { color: var(--gold); }
.section-muted { background: var(--soft); }
.section-rule { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
.two-col { grid-template-columns: 1fr; }
.three-col { grid-template-columns: 1fr; }
.four-col { grid-template-columns: 1fr; }
@media (min-width: 760px) {
 .two-col { grid-template-columns: 1.05fr 0.95fr; align-items: center; }
 .three-col { grid-template-columns: repeat(3, 1fr); }
 .four-col { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
 .four-col { grid-template-columns: repeat(4, 1fr); }
}

.hero-grid { gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero { padding: clamp(3.5rem, 6vw, 6rem) 0 clamp(3rem, 5vw, 5rem); position: relative; overflow: hidden; }
.hero::after {
 content: ""; position: absolute; right: -10%; top: -10%; width: 60%; height: 120%;
 background: radial-gradient(ellipse at center, rgba(200,169,100,0.13), transparent 60%);
 pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-card {
 background: rgba(255,255,255,0.05);
 border: 1px solid rgba(200,169,100,0.35);
 padding: 2rem;
 display: grid;
 gap: 1.5rem;
 border-radius: var(--radius);
 backdrop-filter: blur(8px);
}
.mini-kpi { display: flex; flex-direction: column; gap: 0.2rem; border-left: 2px solid var(--gold); padding-left: 1rem; }
.mini-kpi strong { font-family: var(--serif); font-size: 2rem; color: var(--white); font-weight: 600; }
.mini-kpi span { font-size: 0.85rem; color: rgba(255,255,255,0.7); }

/* ── Header / Nav ────────────────────────────────────────────── */
.site-header {
 position: sticky; top: 0; z-index: 100;
 background: var(--navy); color: var(--white);
 border-bottom: 1px solid rgba(255,255,255,0.08);
 transition: padding .2s ease;
}
.nav { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; gap: 1rem; }
.brand { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--white); letter-spacing: 0.01em; border: none; }
.brand .brand-dot { color: var(--gold); }
.nav-links { display: none; align-items: center; gap: 1.8rem; }
.nav-links a { color: rgba(255,255,255,0.78); font-size: 14px; font-weight: 500; border: none; }
.nav-links a:hover, .nav-links a.active { color: var(--gold); }
.nav-cta { display: none; }
.nav-burger { background: none; border: none; color: var(--white); cursor: pointer; padding: 0.5rem; }
.nav-burger svg { width: 28px; height: 28px; }
@media (min-width: 920px) {
 .nav-links { display: flex; }
 .nav-cta { display: inline-flex; }
 .nav-burger { display: none; }
}
.mobile-menu { display: none; padding: 0 var(--pad) 1.5rem; }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: 0.75rem 0; color: rgba(255,255,255,0.8); border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-menu a:last-child { border-bottom: none; }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
 display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
 padding: 0.85rem 1.6rem;
 border-radius: var(--radius);
 font-family: var(--sans); font-size: 15px; font-weight: 600;
 cursor: pointer; transition: all .2s ease;
 border: 1px solid transparent;
 white-space: nowrap;
 line-height: 1;
}
.btn-accent { background: var(--gold); color: var(--navy); }
.btn-accent:hover { background: var(--gold-700); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.25); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { background: var(--navy-700); }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn-sm { padding: 0.55rem 1rem; font-size: 13px; }
.btn-lg { padding: 1.05rem 2.2rem; font-size: 16px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.5rem; }

/* ── Cards / surfaces ─────────────────────────────────────────── */
.card {
 background: var(--white);
 border: 1px solid var(--rule);
 border-radius: var(--radius);
 padding: 1.8rem;
 transition: border-color .2s ease, transform .2s ease;
}
.card:hover { border-color: var(--gold); }
.cards { gap: 1.5rem; }
.cards .card h3 { margin-top: 0; }
.icon-badge {
 width: 44px; height: 44px; border-radius: 50%;
 display: inline-flex; align-items: center; justify-content: center;
 background: rgba(200,169,100,0.15); color: var(--gold);
 margin-bottom: 1rem; font-family: var(--serif); font-size: 1.3rem; font-weight: 600;
}

/* Pricing cards */
.tier-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .tier-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tier-grid { grid-template-columns: repeat(4, 1fr); } }
.tier {
 background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius);
 padding: 2rem 1.8rem; display: flex; flex-direction: column;
}
.tier.featured { border-color: var(--gold); border-width: 2px; position: relative; }
.tier.featured::before {
 content: "Most popular"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
 background: var(--gold); color: var(--navy); padding: 4px 14px; font-size: 12px; font-weight: 600;
 text-transform: uppercase; letter-spacing: 0.12em; border-radius: 12px;
}
.tier h3 { color: var(--navy); margin-bottom: 0.3em; }
.tier .price { font-family: var(--serif); font-size: 2.6rem; color: var(--navy); margin: 0.5rem 0 0.2rem; line-height: 1; }
.tier .price small { font-size: 0.9rem; font-family: var(--sans); color: var(--ink-muted); font-weight: 400; }
.tier .price-sub { font-size: 0.85rem; color: var(--ink-muted); margin-bottom: 1.4rem; }
.tier ul { list-style: none; padding: 0; margin: 0 0 1.8rem; font-size: 0.95rem; }
.tier ul li { padding: 0.45rem 0 0.45rem 1.4rem; position: relative; color: var(--ink); border-bottom: 1px solid var(--rule); }
.tier ul li:last-child { border-bottom: none; }
.tier ul li::before { content: "✓"; color: var(--gold); position: absolute; left: 0; font-weight: 600; }
.tier ul li.muted { color: var(--ink-muted); }
.tier ul li.muted::before { content: "·"; color: var(--ink-muted); }
.tier .btn { width: 100%; margin-top: auto; }

/* ── Comparison table ────────────────────────────────────────── */
.compare-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.compare-table th, .compare-table td { padding: 1rem 1.2rem; text-align: left; border-bottom: 1px solid var(--rule); font-size: 0.95rem; }
.compare-table th { background: var(--soft); font-family: var(--serif); color: var(--navy); font-weight: 600; font-size: 1.05rem; }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table .yes { color: var(--gold); font-weight: 600; }
.compare-table .no { color: var(--ink-muted); }
.compare-table .partial { color: var(--ink-muted); font-style: italic; }
.compare-table .col-highlight { background: rgba(200,169,100,0.05); }
.table-wrap { overflow-x: auto; }

/* ── Forms ───────────────────────────────────────────────────── */
.form { display: grid; gap: 1.2rem; max-width: 640px; }
.form-row { display: grid; gap: 0.4rem; }
.form-row label { font-size: 13px; font-weight: 600; color: var(--navy); letter-spacing: 0.02em; }
.form-row input, .form-row select, .form-row textarea {
 font-family: var(--sans); font-size: 15px;
 padding: 0.85rem 1rem;
 border: 1px solid var(--rule); background: var(--white); color: var(--ink);
 border-radius: var(--radius);
 transition: border-color .2s ease;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
 outline: none; border-color: var(--gold);
}
.form-row textarea { min-height: 130px; resize: vertical; font-family: var(--sans); }
.form-row .hint { font-size: 13px; color: var(--ink-muted); overflow-wrap: anywhere; word-break: break-word; }
.form-success { background: rgba(200,169,100,0.12); border-left: 3px solid var(--gold); padding: 1.2rem; margin: 1rem 0; border-radius: var(--radius); }
.form-error { background: rgba(179,38,30,0.08); border-left: 3px solid var(--danger); padding: 1.2rem; margin: 1rem 0; }

/* ── Demo page ───────────────────────────────────────────────── */
/* Stacked, full-width demo: input card on top, analysis full-width below */
.demo-wrap { display: block; }
.demo-input { margin-bottom: 2rem; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.6rem; }
.demo-input .form { display: grid; gap: 1.2rem; max-width: none; width: 100%; }
/* Desktop: wide textarea left; right column = upload + all buttons in one panel */
@media (min-width: 820px) {
  .demo-input .form { grid-template-columns: 1fr minmax(240px, 340px); gap: 2rem; align-items: stretch; }
  .demo-paste { display: grid; grid-template-rows: auto 1fr auto; }
  /* The textarea fills the middle track, so the white box always matches the
     height of the action panel next to it, including when the "Supported file
     types" details opens and closes. Manual drag-resize still works; the
     inline height it sets is cleared on details toggle so the columns re-sync. */
  .demo-input textarea { min-height: 220px; height: 100%; }
}
.demo-input textarea { width: 100%; max-width: 100%; min-height: 200px; font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace; font-size: 13px; box-sizing: border-box; }

/* Right-hand action panel: upload control + buttons stacked, uniform full-width */
.demo-actions { background: var(--soft); border: 1px dashed #cfc9bc; border-radius: var(--radius); padding: 1.3rem; display: flex; flex-direction: column; gap: 1.1rem; }
.demo-actions .form-row { gap: 0.5rem; }
/* Hide native file input; style its label as a matching button */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.btn-file { width: 100%; justify-content: center; text-align: center; cursor: pointer; }
.btn-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-btns { display: flex; flex-direction: column; gap: 0.7rem; margin-top: auto; }
.demo-btns .btn { width: 100%; justify-content: center; text-align: center; }
.demo-empty { margin-top: 0; }
.demo-results { background: var(--white); border: 1px solid var(--rule); padding: 1.8rem; border-radius: var(--radius); }
.demo-empty { padding: 4rem 2rem; text-align: center; color: var(--ink-muted); }
.kpi-strip { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin-bottom: 1.5rem; }
@media (min-width: 600px) { .kpi-strip { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .kpi-strip { grid-template-columns: repeat(6, 1fr); } }
.kpi { background: var(--soft); padding: 1rem; border-radius: var(--radius); text-align: center; }
.kpi strong { display: block; font-family: var(--serif); font-size: 1.6rem; color: var(--navy); }
.kpi span { display: block; font-size: 13px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }
.demo-section { margin-top: 2rem; }
.demo-section h4 { color: var(--navy); margin-bottom: 0.8rem; font-family: var(--serif); }
/* Full-width analysis: charts in a responsive 2-up grid */
.chart-grid { display: grid; gap: 1.4rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 780px) { .chart-grid { grid-template-columns: repeat(2, 1fr); } }
.chart-cell { margin-top: 0; background: var(--soft); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.2rem 1.3rem; }
.chart-cell h4 { margin-bottom: 0.9rem; }
.demo-night { background: rgba(179,38,30,0.06); border-left: 3px solid var(--danger); padding: 0.5rem 0.7rem; border-radius: 2px; }
.demo-night strong { color: var(--danger); }
.author-bar { display: grid; grid-template-columns: 120px 1fr 60px; gap: 0.8rem; align-items: center; margin-bottom: 0.6rem; font-size: 13px; }
.author-bar-fill { height: 8px; background: var(--rule); border-radius: 4px; overflow: hidden; }
.author-bar-fill > div { height: 100%; background: var(--gold); transition: width .4s ease; }
.key-moments { list-style: none; padding: 0; margin: 0; }
.key-moments li { padding: 0.8rem 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 100px 1fr; gap: 1rem; font-size: 14px; }
.key-moments li:last-child { border-bottom: none; }
.key-moments time { color: var(--gold); font-weight: 600; font-size: 13px; letter-spacing: 0.05em; }
.disclaimer-box {
 background: rgba(11,27,51,0.04);
 border-left: 3px solid var(--navy);
 padding: 1.2rem 1.5rem;
 margin: 1.5rem 0;
 font-size: 14px;
 color: var(--ink-muted);
}
.disclaimer-box strong { color: var(--navy); }

/* ── Calculator ──────────────────────────────────────────────── */
.calc { background: var(--white); border: 1px solid var(--rule); padding: 2rem; border-radius: var(--radius); }
.calc-row { display: grid; grid-template-columns: 1fr; gap: 0.4rem; margin-bottom: 1.4rem; }
.calc-row label { font-weight: 600; color: var(--navy); }
.calc-row .val { color: var(--gold); font-family: var(--serif); font-size: 1.4rem; font-weight: 600; }
.calc-row input[type=range] { width: 100%; accent-color: var(--gold); }
.calc-results { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.calc-result { text-align: center; padding: 1.2rem; background: var(--soft); border-radius: var(--radius); }
.calc-result.them { background: rgba(179,38,30,0.06); }
.calc-result.us { background: rgba(200,169,100,0.1); border: 1px solid var(--gold); }
.calc-result strong { font-family: var(--serif); font-size: 2.2rem; color: var(--navy); display: block; }
.calc-result span { font-size: 13px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.calc-savings { text-align: center; padding: 1.5rem; background: var(--navy); color: var(--white); border-radius: var(--radius); margin-top: 1rem; }
.calc-savings strong { font-family: var(--serif); font-size: 2.5rem; color: var(--gold); display: block; }

/* ── Use cases ──────────────────────────────────────────────── */
.usecase {
 background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius);
 padding: 2rem; margin-bottom: 1.5rem;
 display: grid; gap: 1.5rem; grid-template-columns: 1fr;
}
@media (min-width: 800px) { .usecase { grid-template-columns: 0.7fr 1.3fr; } }
.usecase .badge { display: inline-block; background: var(--soft); color: var(--navy); padding: 4px 10px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; border-radius: 2px; margin-bottom: 0.6rem; }
.usecase h3 { margin-bottom: 0.5rem; }
.usecase .illustrative { color: var(--ink-muted); font-style: italic; font-size: 13px; margin-top: 1rem; }

/* ── Feature matrix ──────────────────────────────────────────── */
.matrix { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); }
.matrix th, .matrix td { padding: 0.9rem 1rem; text-align: center; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); font-size: 0.9rem; }
.matrix th:last-child, .matrix td:last-child { border-right: none; }
.matrix thead th { background: var(--navy); color: var(--white); font-family: var(--serif); font-weight: 600; }
.matrix tbody th { text-align: left; background: var(--soft); color: var(--navy); }
.matrix .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }

/* ── Pipeline cards (how-it-works) ────────────────────────────── */
.pipeline {
 background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius);
 padding: 2rem; margin-bottom: 1.5rem;
 display: grid; gap: 2rem; grid-template-columns: 1fr;
}
@media (min-width: 900px) { .pipeline { grid-template-columns: 0.4fr 1.6fr; align-items: start; } }
.pipeline .pipe-head { padding-right: 1rem; border-right: none; }
@media (min-width: 900px) { .pipeline .pipe-head { border-right: 1px solid var(--rule); } }
.pipeline h3 { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.4rem; }
.pipeline h3 .step-num { font-family: var(--serif); color: var(--gold); font-size: 2.2rem; line-height: 1; }
.pipeline .pipe-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.pipeline .pipe-list li { padding-left: 1.4rem; position: relative; color: var(--ink); font-size: 0.95rem; }
.pipeline .pipe-list li::before { content: "→"; position: absolute; left: 0; color: var(--gold); font-weight: 600; }

/* ── Steps strip ─────────────────────────────────────────────── */
.steps { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { text-align: left; }
.step .step-num { font-family: var(--serif); color: var(--gold); font-size: 3rem; font-weight: 600; line-height: 1; margin-bottom: 0.4rem; display: block; }
.step h3 { margin-bottom: 0.4rem; }

/* ── FAQ ─────────────────────────────────────────────────────── */
details.faq-item { border-bottom: 1px solid var(--rule); padding: 1.4rem 0; }
details.faq-item summary { cursor: pointer; font-family: var(--serif); font-size: 1.2rem; color: var(--navy); font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after { content: "+"; color: var(--gold); font-size: 1.5rem; line-height: 1; font-weight: 400; transition: transform .2s ease; }
details.faq-item[open] summary::after { transform: rotate(45deg); }
details.faq-item p { margin-top: 1rem; color: var(--ink); }

/* ── Testimonials ─────────────────────────────────────────────── */
.quote-card { background: var(--navy); color: var(--white); padding: 2.5rem; border-radius: var(--radius); border-left: 3px solid var(--gold); }
.quote-card blockquote { margin: 0; font-family: var(--serif); font-size: 1.3rem; line-height: 1.4; }
.quote-card cite { display: block; margin-top: 1.2rem; font-style: normal; color: var(--gold); font-size: 13px; letter-spacing: 0.05em; font-family: var(--sans); }
.quote-tag { display: inline-block; background: rgba(255,255,255,0.08); padding: 3px 8px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); border-radius: 2px; margin-top: 0.6rem; }

/* ── Social proof / logo bar ─────────────────────────────────── */
.logo-strip { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: center; align-items: center; padding: 2rem 0; opacity: 0.7; }
.logo-strip span { font-family: var(--serif); font-size: 1.15rem; color: var(--ink-muted); letter-spacing: 0.02em; }

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer { background: var(--navy); color: rgba(255,255,255,0.7); padding: 4rem 0 2rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-bottom: 3rem; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.footer-col h4 { color: var(--white); font-family: var(--sans); font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 1rem; font-weight: 600; }
.footer-col a { display: block; color: rgba(255,255,255,0.6); padding: 0.3rem 0; font-size: 14px; border: none; }
.footer-col a:hover { color: var(--gold); }
.footer-col p { color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.6; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; font-size: 13px; color: rgba(255,255,255,0.5); }

/* ── Cookie banner (compact bottom-right, non-blocking) ──────── */
.cookie-banner {
 position: fixed; bottom: 1rem; right: 1rem; left: auto; max-width: 320px;
 background: var(--navy); color: var(--white); padding: 1rem 1.2rem;
 border-radius: var(--radius); border: 1px solid var(--gold);
 box-shadow: 0 12px 32px rgba(0,0,0,0.25);
 z-index: 200; font-size: 13px;
}
.cookie-banner.hide { display: none; }
.cookie-banner p { margin: 0 0 0.7rem; color: rgba(255,255,255,0.85); font-size: 13px; line-height: 1.5; }
.cookie-banner .cookie-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
@media (max-width: 520px) {
 .cookie-banner { left: 1rem; max-width: none; }
}

/* ── Reveal-on-scroll animation ──────────────────────────────── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease-out, transform .6s ease-out; }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Hero illustration shapes ─────────────────────────────────── */
.hero-svg { width: 100%; max-width: 460px; margin-left: auto; }

/* ── Banner / callout strips ─────────────────────────────────── */
.callout { background: var(--navy); color: var(--white); padding: 3rem 0; text-align: center; }
.callout h2 { color: var(--white); }
.callout p { color: rgba(255,255,255,0.85); max-width: 640px; margin: 0 auto 1.5rem; }

/* ── 404 / empty states ──────────────────────────────────────── */
.empty-state { padding: 6rem 0; text-align: center; }
.empty-state h1 { font-size: 5rem; color: var(--gold); margin-bottom: 0.4em; }

/* ── Print styles for pricing and comparison ─────────────────── */
/* ── Demo: behavioural stat cards ─────────────────────────────── */
.bstat-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .bstat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bstat-grid { grid-template-columns: repeat(3, 1fr); } }
.bstat-card { background: var(--soft); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.1rem; }
.bstat-head { display: flex; gap: 0.7rem; align-items: flex-start; margin-bottom: 0.6rem; }
.bstat-icon { line-height: 0; color: var(--navy); }
.bstat-icon svg { width: 24px; height: 24px; }
.bstat-head strong { display: block; font-size: 14px; color: var(--navy); }
.bstat-head .small { display: block; font-size: 12px; }
.bstat-leader { font-family: var(--serif); font-size: 1.5rem; color: var(--navy); margin: 0.2rem 0 0.7rem; }
.bstat-row { display: grid; grid-template-columns: 90px 1fr 28px; gap: 0.5rem; align-items: center; font-size: 13px; margin-bottom: 0.35rem; }
.bstat-name { color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bstat-track { height: 7px; background: var(--rule); border-radius: 4px; overflow: hidden; }
.bstat-fill { height: 100%; background: var(--gold); transition: width .4s ease; }
.bstat-val { text-align: right; font-weight: 600; color: var(--navy); }

/* Response-time pills */
.rt-strip { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.rt-pill { display: flex; align-items: center; gap: 0.4rem; background: var(--soft); border: 1px solid var(--rule); border-radius: 999px; padding: 0.35rem 0.8rem; font-size: 13px; color: var(--ink-muted); }
.rt-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.rt-pill strong { color: var(--navy); font-weight: 600; }

/* ── Demo: context clusters (key moments) ─────────────────────── */
.cluster { border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 1.2rem; overflow: hidden; }
.cluster-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; background: var(--soft); padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--rule); font-size: 13px; }
.cluster-num { font-weight: 700; color: var(--navy); letter-spacing: 0.03em; }
.cluster-span { color: var(--ink-muted); font-family: 'SF Mono', Menlo, monospace; font-size: 12px; }
.cluster-count { color: var(--ink-muted); }
.flag { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.flag-threat { background: rgba(179,38,30,0.12); color: var(--danger); }
.flag-swear { background: rgba(200,169,100,0.2); color: var(--gold-700); }
.cluster-body { padding: 0.4rem 0.9rem; }
.cl-line { display: grid; grid-template-columns: 48px 90px 1fr; gap: 0.6rem; padding: 0.32rem 0; border-bottom: 1px solid #f2f0ea; font-size: 13.5px; align-items: baseline; }
.cl-line:last-child { border-bottom: none; }
.cl-ts { font-family: 'SF Mono', Menlo, monospace; font-size: 12px; color: var(--ink-muted); }
.cl-author { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-body { white-space: pre-wrap; word-break: break-word; }
.cl-hot { background: rgba(179,38,30,0.045); }
.cl-peak { background: rgba(179,38,30,0.1); border-left: 3px solid var(--danger); padding-left: 0.5rem; margin-left: -0.5rem; }
.cluster-note { padding: 0.4rem 0.9rem 0.7rem; margin: 0; }

/* ── Demo: cherry-pick showcase ───────────────────────────────── */
.cp-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .cp-grid { grid-template-columns: 1fr 1.3fr; align-items: start; } }
.cp-col { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.1rem; }
.cp-bad { border-color: rgba(179,38,30,0.3); background: rgba(179,38,30,0.03); }
.cp-good { border-color: rgba(91,138,114,0.4); background: rgba(91,138,114,0.04); }
.cp-tag { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--danger); margin-bottom: 0.7rem; }
.cp-tag-good { color: #4e7a63; }
.cp-single { margin: 0 0 0.6rem; padding: 0.7rem 0.9rem; background: var(--white); border-left: 3px solid var(--danger); border-radius: 2px; font-size: 14px; }
.cp-single .cl-ts, .cp-single .cl-author { display: inline; margin-right: 0.5rem; }
.cp-single .cl-body { display: block; margin-top: 0.3rem; white-space: pre-wrap; word-break: break-word; font-style: italic; }
.cp-context { background: var(--white); border-radius: 2px; padding: 0.3rem 0.6rem; margin-bottom: 0.6rem; }
.cp-line { display: grid; grid-template-columns: 48px 90px 1fr; gap: 0.5rem; padding: 0.28rem 0; border-bottom: 1px solid #f2f0ea; font-size: 13px; align-items: baseline; }
.cp-line:last-child { border-bottom: none; }
.cp-peak { background: rgba(179,38,30,0.09); border-left: 3px solid var(--danger); padding-left: 0.4rem; margin-left: -0.4rem; }

/* ── Court-ready anatomy + sample doc ─────────────────────────── */
.cr-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-top: 2rem; align-items: start; }
@media (min-width: 940px) { .cr-grid { grid-template-columns: 1.05fr 0.95fr; } }
.cr-checks { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.7rem; }
.cr-checks li { position: relative; padding-left: 1.7rem; font-size: 14.5px; line-height: 1.5; }
.cr-checks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--gold-700); font-weight: 700; }
.cr-checks strong { color: var(--navy); }

.crdoc { background: #fff; border: 1px solid #d8d5cc; border-radius: 3px; box-shadow: 0 12px 30px rgba(11,27,51,0.1); padding: 1.4rem 1.5rem; font-family: 'Times New Roman', Georgia, serif; color: #1a1a1a; font-size: 13px; line-height: 1.5; }
.crdoc-head { display: flex; justify-content: space-between; font-size: 12.5px; letter-spacing: 0.02em; border-bottom: 1px solid #e2ded3; padding-bottom: 0.5rem; margin-bottom: 0.7rem; }
.crdoc-parties { font-size: 13px; margin-bottom: 0.9rem; }
.crdoc-parties span { display: block; font-size: 12px; letter-spacing: 0.12em; color: #666; margin-bottom: 0.2rem; }
.crdoc-title { text-align: center; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 13px; margin: 0.6rem 0 0.9rem; }
.crdoc-rows { border-top: 1px solid #e2ded3; }
.crdoc-row { display: grid; grid-template-columns: 105px 78px 1fr; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid #efece3; font-size: 13px; align-items: baseline; }
.crdoc-row span:first-child { font-family: 'SF Mono', Menlo, monospace; font-size: 12px; color: #555; }
.crdoc-row span:nth-child(2) { font-weight: 700; font-size: 12px; }
.crdoc-row.hot { background: rgba(179,38,30,0.07); border-left: 3px solid var(--danger); padding-left: 0.4rem; margin-left: -0.4rem; }
.crdoc-foot { display: flex; justify-content: space-between; border-top: 1px solid #e2ded3; margin-top: 0.7rem; padding-top: 0.5rem; font-size: 12px; color: #666; font-family: 'SF Mono', Menlo, monospace; }
.crdoc-sot { background: #fff; border: 1px dashed #cfc9bc; border-radius: 3px; padding: 1rem 1.2rem; margin-top: 1rem; font-family: 'Times New Roman', Georgia, serif; color: #222; }
.crdoc-sot strong { display: block; text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; margin-bottom: 0.4rem; }
.crdoc-sot p { font-size: 13px; font-style: italic; margin: 0 0 0.8rem; }
.crdoc-sig { font-size: 13px; color: #444; }

@media print {
 body { background: white; color: black; font-size: 11pt; }
 .site-header, .site-footer, .cookie-banner, .nav-burger, .cta-row, .btn { display: none !important; }
 .section { padding: 1rem 0; page-break-inside: avoid; }
 .tier { border: 1px solid #999 !important; box-shadow: none !important; page-break-inside: avoid; }
 .hero { padding: 1rem 0; }
 a { color: black; }
 h1, h2, h3 { color: black; }
 .section-dark { background: white; color: black; border: 1px solid #999; }
 .section-dark h1, .section-dark h2, .section-dark h3 { color: black; }
 .compare-table th { background: #eee; color: black; }
}

/* ── Legal guides ─────────────────────────────────────────────── */
.law-quote {
 background: var(--white); border: 1px solid var(--rule); border-left: 3px solid var(--gold);
 padding: 1.3rem 1.5rem; margin: 1.2rem 0; border-radius: var(--radius);
}
.law-quote blockquote { margin: 0; font-family: var(--serif); font-size: 1.08rem; line-height: 1.5; color: var(--navy); font-style: italic; }
.law-quote cite { display: block; margin-top: 0.7rem; font-style: normal; font-size: 13px; color: var(--ink-muted); }
.law-quote cite a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .2em; }
.helpline-box {
 background: var(--navy); color: var(--white); border-radius: var(--radius);
 border-left: 4px solid var(--gold); padding: 1.6rem 1.8rem; margin: 2rem 0;
}
.helpline-box h3, .helpline-box h4 { color: var(--white); margin-bottom: 0.6rem; }
.helpline-box p { color: rgba(255,255,255,0.85); font-size: 14.5px; }
.helpline-box ul { list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; gap: 0.45rem; }
.helpline-box li { font-size: 14.5px; color: rgba(255,255,255,0.85); }
.helpline-box strong { color: var(--gold); }
.helpline-box a { color: var(--gold); }
.resource-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.7rem; }
.resource-list li { position: relative; padding-left: 1.6rem; font-size: 15px; line-height: 1.55; }
.resource-list li::before { content: "→"; position: absolute; left: 0; color: var(--gold); font-weight: 600; }
.resource-list a { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .2em; }
.pdf-tag { display: inline-block; background: rgba(200,169,100,0.18); color: var(--gold-700); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; margin-left: 0.4rem; vertical-align: middle; }
.chart-panel { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.6rem 1.8rem; margin: 1.5rem 0; }
.chart-panel h4 { margin-bottom: 0.3rem; }
.chart-panel .chart-note { font-size: 13px; color: var(--ink-muted); margin-bottom: 1rem; }
.illustrative-tag { display: inline-block; background: rgba(11,27,51,0.07); color: var(--navy); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; margin-left: 0.5rem; vertical-align: middle; }
.guide-cards { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 760px) { .guide-cards { grid-template-columns: repeat(2, 1fr); } }
.guide-card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.9rem; display: flex; flex-direction: column; transition: border-color .2s ease; }
.guide-card:hover { border-color: var(--gold); }
.guide-card h3 { margin-bottom: 0.4rem; }
.guide-card .badge { display: inline-block; background: var(--soft); color: var(--navy); padding: 4px 10px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; border-radius: 2px; margin-bottom: 0.8rem; align-self: flex-start; }
.guide-card p { font-size: 15px; color: var(--ink-muted); flex: 1; }
.guide-card .btn { align-self: flex-start; margin-top: 1rem; }
.alleg-grid details { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.1rem 1.4rem; margin-bottom: 0.8rem; }
.alleg-grid summary { cursor: pointer; font-family: var(--serif); font-size: 1.15rem; color: var(--navy); font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.alleg-grid summary::-webkit-details-marker { display: none; }
.alleg-grid summary::after { content: "+"; color: var(--gold); font-size: 1.4rem; line-height: 1; }
.alleg-grid details[open] summary::after { content: "–"; }
.alleg-grid details p { margin: 0.8rem 0 0.2rem; font-size: 14.5px; color: var(--ink); }
.alleg-grid .signpost { font-size: 13px; color: var(--ink-muted); font-style: italic; margin-top: 0.5rem; }
.scenario-row { display: grid; gap: 0.5rem; }
.scenario-row .scenario-label { font-size: 13px; font-weight: 600; color: var(--navy); letter-spacing: 0.02em; }
.scenario-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.scenario-btns .btn { width: 100%; justify-content: center; font-size: 13px; padding: 0.55rem 0.5rem; white-space: normal; line-height: 1.2; }

/* Demo, multi-format upload (added 2026-08-02) */
.demo-upload #demo-file-status { display: block; margin-top: 0.4rem; }
.demo-upload #demo-file-status.is-error { color: var(--danger); }
.demo-formats { margin-top: 0.6rem; font-size: 13px; color: var(--ink-muted); }
.demo-formats > summary { cursor: pointer; }
.demo-formats ul { margin: 0.5rem 0 0; padding-left: 1.1rem; line-height: 1.7; }
.demo-formats ul li strong { font-family: var(--mono, monospace); font-weight: 600; }
.demo-formats p { margin: 0.6rem 0 0; }
.demo-formats .demo-formats-note { font-style: italic; }

/* How-to-export guide (added 2026-08-02): links must look like links */
.export-guide a:not(.btn) { color: #8a6d2f; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 500; border-bottom: 0; }
.export-guide a:not(.btn):hover { color: var(--navy); text-decoration-thickness: 2.5px; }
.export-toc { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; align-items: baseline; background: var(--soft); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.9rem 1.2rem; margin: 1.4rem 0 2rem; font-size: 14px; }
.export-toc strong { color: var(--ink-muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }
.export-guide h2 { margin-top: 2.6rem; scroll-margin-top: 90px; }
.export-guide h3 { margin-top: 1.8rem; }
.export-guide h4 { margin-top: 1.5rem; font-size: 1.02rem; }
.export-steps { counter-reset: step; list-style: none; padding-left: 0; margin: 1rem 0; }
.export-steps > li { counter-increment: step; position: relative; padding: 0 0 0.75rem 2.4rem; line-height: 1.6; }
.export-steps > li::before { content: counter(step); position: absolute; left: 0; top: 0.05em; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--navy); color: var(--gold); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.export-action { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.7rem 0 1.2rem; }
.export-action .btn { text-decoration: none; }

/* "How to export" call-to-action button used on the demo and in the app */
.btn-howto { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; }


/* ── Homepage hero v2 (2026-08-05): punchline hero + bill contrast ── */
.hero h1.punch { font-size: clamp(2.6rem, 6.5vw, 4.6rem); line-height: 1.04; letter-spacing: -0.01em; }
.hero h1.punch .flip { color: var(--gold); }
.bill-compare { display: grid; gap: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255,255,255,0.14); }
.bill-compare .bc-row { padding: 1.1rem 1.3rem; }
.bill-compare .bc-them { background: rgba(255,255,255,0.05); }
.bill-compare .bc-us { background: rgba(200,169,100,0.12); border-top: 1px solid rgba(200,169,100,0.35); }
.bill-compare .bc-label { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.85); margin-bottom: 0.3rem; }
.bill-compare .bc-us .bc-label { color: var(--gold); }
.bill-compare .bc-num { font-family: var(--serif); font-size: 1.9rem; color: #fff; line-height: 1.1; }
.bill-compare .bc-us .bc-num { color: var(--gold); }
.bill-compare .bc-sub { font-size: 13px; color: rgba(255,255,255,0.65); margin-top: 0.15rem; }
.bill-compare .bc-verify { padding: 0.8rem 1.3rem; background: rgba(255,255,255,0.03); border-top: 1px solid rgba(255,255,255,0.1); font-size: 13px; color: rgba(255,255,255,0.75); }
.punch-band { background: var(--navy); color: #fff; padding: clamp(2.2rem, 4vw, 3.4rem) 0; }
.punch-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .punch-grid { grid-template-columns: repeat(3, 1fr); } }
.punch-item { border-left: 3px solid var(--gold); padding: 0.2rem 0 0.2rem 1.1rem; }
.punch-item h3 { font-family: var(--serif); font-size: clamp(1.35rem, 2.2vw, 1.7rem); color: #fff; margin: 0 0 0.35rem; }
.punch-item p { color: rgba(255,255,255,0.75); font-size: 14px; margin: 0; line-height: 1.55; }
.www-cards .card h3 { display: flex; align-items: baseline; gap: 0.55rem; }
.www-cards .card h3 .www-no { font-family: var(--serif); color: var(--gold); font-size: 1.1rem; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.15fr 0.85fr; } }

/* ── Reveal must never hide a full-width navy band (2026-08-27) ───
   .reveal's opacity:0 hides the section BACKGROUND too, painting a cream
   void where the band belongs until the observer fires. Bands opt out. */
section.callout.reveal { opacity: 1 !important; transform: none !important; }

/* ── Flush footer (2026-08-27) ────────────────────────────────────
   The last section's bottom margin painted a cream bar between the final
   navy band and the navy footer. The footer's own 4rem padding is the gap. */
main > section:last-child, main > .section:last-child { margin-bottom: 0 !important; padding-bottom: 4rem; }

/* ── Slogan / tagline (2026-08-27 identity rollout) ───────────────
   "Every word. Verified." is the slogan; "Court-ready evidence." the tagline. */
.footer-tagline { font-family: var(--serif); color: var(--gold); font-size: 1.02rem;
  margin: 0.5rem 0 0; letter-spacing: 0.01em; }

/* ── Trademark mark (2026-08-27, registration granted) ────────────
   The ® rides the wordmark: small, midnight navy, superscript. Applied to the nav and
   footer brand across every page; body copy stays unmarked. */
.brand .tm { font-size: 0.45em; color: #0B1B33; vertical-align: super; letter-spacing: 0; margin-left: 1px; }

/* ── Inline note box (2026-08-27) ─────────────────────────────────
   For in-flow explanatory notes inside guide content. NOT .callout, which is
   the full-width navy CTA banner and looks broken wrapped around body text. */
.note-box {
  background: rgba(200, 169, 100, 0.08);
  border: 1px solid rgba(200, 169, 100, 0.35);
  border-left: 4px solid var(--gold);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 1rem 0 1.25rem;
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.6;
}
.note-box > strong:first-child { display: block; color: var(--navy); margin-bottom: 0.35rem; }
.note-box ul { margin: 0.4rem 0 0; padding-left: 1.15rem; text-align: left; }
.note-box li { margin-bottom: 0.55rem; }
.note-box li:last-child { margin-bottom: 0; }
.note-box p { margin: 0; max-width: none; }

/* ── Gutter guarantee (added 2026-08-02) ──────────────────────────
   Keep this block LAST in the file. Several elements combine .container with
   classes that also set shorthand padding (.nav's "1rem 0", .section's
   "... 0"); whichever rule comes later in source order wins and silently
   removes the horizontal gutter, which is how header and body text ended up
   flush against the screen edge on phones. Being the final rules, these
   re-assert the gutter for every .container regardless of what it is combined
   with. Any rule added BELOW this block could reintroduce the bug. */
.container { padding-left: var(--pad); padding-right: var(--pad); }