/* Mirth Provisions Reframe Mockup v4 — single nav row, brands menu, slim hero, compact footer */
:root {
  --bg: #faf8f4;
  --bg-warm: #f0ebe2;
  --bg-rich: #e8e0d2;
  --dark: #2a2118;
  --green: #3a6b35;
  --green-dark: #2d5429;
  --gold: #c4a35a;
  --gold-light: #d4b872;
  --text: #2a2118;
  --text-light: #4f463c;
  --text-muted: #6e655a;
  --link: #2d5429;
  --link-hover: #1f3d1c;
  --border: #ddd5ca;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 2px 12px rgba(42,33,24,0.07);
  --shadow-lg: 0 8px 32px rgba(42,33,24,0.1);
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --max-content: 1200px;
  --max-text: 680px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-body); color: var(--text); background: var(--bg); line-height: 1.65; font-size: 16px; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
/* links inside running copy read as links: underlined, dark green, heavier on hover */
.page-body p a, .page-body li a, .intro-block a, .band-card p a, .faq-item p a, .note a { color: var(--link); text-decoration: underline; text-decoration-color: rgba(45,84,41,0.45); text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 500; }
.page-body p a:hover, .page-body li a:hover, .band-card p a:hover, .faq-item p a:hover { color: var(--link-hover); text-decoration-color: currentColor; }
.text-link { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(45,84,41,0.45); }
.text-link:hover { color: var(--link-hover); text-decoration-color: currentColor; }
img { max-width: 100%; height: auto; display: block; }

/* ── Header: one row ─────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(250,248,244,0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.header-inner { max-width: var(--max-content); margin: 0 auto; padding: 0.55rem 2rem; display: flex; align-items: center; gap: 2rem; }
.logo { display: flex; align-items: center; gap: 0.85rem; color: var(--dark); flex: 0 0 auto; }
.logo:hover { text-decoration: none; }
.crest { display: block; }
.logo .crest { width: 66px; height: 54px; }
.logo .wordmark { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1; color: var(--dark); white-space: nowrap; }
.menu-toggle { display: none; }
.main-nav { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem; }
.main-nav > ul { list-style: none; display: flex; align-items: center; gap: 0 1.6rem; flex-wrap: nowrap; }
.main-nav li { position: relative; line-height: 1; white-space: nowrap; }
.main-nav a { color: var(--dark); font-size: 0.92rem; font-weight: 600; padding: 0.6rem 0; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; display: inline-block; white-space: nowrap; }
.main-nav a:hover { color: var(--green); border-bottom-color: var(--green); text-decoration: none; }
.main-nav li.current > a { color: var(--green-dark); border-bottom-color: var(--green); }
.main-nav a.nav-cta { display: inline-block; padding: 0.55rem 1.2rem; border-radius: 100px; background: var(--green); color: #fff; font-size: 0.85rem; font-weight: 600; white-space: nowrap; border: 2px solid var(--green); }
.main-nav a.nav-cta:hover, .main-nav a.nav-cta.current { background: var(--green-dark); border-color: var(--green-dark); color: #fff; text-decoration: none; }

/* Brands dropdown */
.has-menu > a::after { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-left: 0.45rem; position: relative; top: -3px; }
.submenu { position: absolute; top: 100%; left: 0; min-width: 170px; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-lg); padding: 0.4rem 0; list-style: none; display: none; z-index: 50; }
.has-menu:hover .submenu, .has-menu.open .submenu, .has-menu:focus-within .submenu { display: block; }
.submenu li { line-height: 1; }
.submenu a { display: block; padding: 0.6rem 1.1rem; border-bottom: 0; font-weight: 600; font-size: 0.9rem; white-space: nowrap; color: var(--dark); }
.submenu a:hover { background: var(--bg-warm); color: var(--green-dark); }
.submenu li.current a { color: var(--green-dark); }

/* ── Home hero: old-site photography, slim ───────────────────────────── */
.hero { position: relative; height: clamp(280px, 32vw, 420px); overflow: hidden; background: var(--dark); }
.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease; }
.hero-slide.active { opacity: 1; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(42,33,24,0.62) 0%, rgba(42,33,24,0.25) 45%, rgba(42,33,24,0.05) 100%), linear-gradient(180deg, rgba(42,33,24,0) 40%, rgba(42,33,24,0.7) 100%); }
.hero-inner { position: absolute; left: 0; right: 0; bottom: 0; }
.hero-lockup { max-width: var(--max-content); margin: 0 auto; padding: 0 2rem 1.75rem; color: #fff; }
.hero h1 { font-family: var(--font-display); font-size: 3.1rem; font-weight: 700; line-height: 1.05; margin-bottom: 0.15rem; text-shadow: 0 2px 14px rgba(0,0,0,0.35); }
.hero-tagline { font-family: var(--font-display); font-size: 1.45rem; color: var(--gold-light); font-style: italic; text-shadow: 0 1px 8px rgba(0,0,0,0.4); }
.hero-sub { font-size: 0.9rem; color: rgba(255,255,255,0.88); margin-top: 0.35rem; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }

/* Page heroes (interior) */
.page-hero { position: relative; background-size: cover; background-position: center 40%; overflow: hidden; display: flex; align-items: flex-end; min-height: 270px; }
.page-hero .hero-overlay { background: linear-gradient(90deg, rgba(42,33,24,0.78) 0%, rgba(42,33,24,0.45) 50%, rgba(42,33,24,0.2) 100%), linear-gradient(180deg, rgba(42,33,24,0.05) 0%, rgba(42,33,24,0.55) 100%); }
.page-hero .hero-inner { position: relative; width: 100%; max-width: var(--max-content); margin: 0 auto; padding: 3rem 2rem 2rem; color: #fff; }
.page-hero h1 { font-family: var(--font-display); font-size: 2.7rem; font-weight: 700; line-height: 1.12; text-shadow: 0 2px 12px rgba(0,0,0,0.35); }
.page-hero .hero-tagline { font-size: 1.25rem; }
/* Swift hero: the source is a wide 2.11:1 composition, bottle left and mist arc right,
   so the default 270px band crops the nozzle and the spray. Give it room on desktop;
   phone width already frames it correctly and is left alone. */
@media (min-width: 900px) { .page-hero-swift { min-height: 420px; background-position: center 45%; } }
.heritage-badge { display: inline-block; margin-top: 1rem; font-family: var(--font-display); font-size: 1.2rem; font-style: italic; color: var(--gold); border: 1px solid rgba(196,163,90,0.4); padding: 0.25rem 1.1rem; border-radius: 100px; }
.jc-hero { background: linear-gradient(135deg, #1a3a1a 0%, #2d5429 50%, #1a3a1a 100%); }
.soltura-hero { background: linear-gradient(135deg, #2a2118 0%, #5a4a2e 55%, #2a2118 100%); }
.ottos-hero { background: linear-gradient(135deg, #2f3d22 0%, #6b7a3c 55%, #2f3d22 100%); }

/* ── Intro ───────────────────────────────────────────────────────────── */
.intro-block { background: var(--bg); padding: 2.75rem 2rem 2.25rem; }
.intro-block p { max-width: var(--max-text); margin: 0 auto; font-size: 1.2rem; line-height: 1.7; color: var(--text); text-align: center; }

/* ── Our Brands grid: six equal cards ────────────────────────────────── */
.brands-grid { background: var(--bg-warm); padding: 3.5rem 2rem 4rem; }
.brands-grid h2, .section-title { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; text-align: center; margin-bottom: 0.4rem; color: var(--dark); }
.section-lede { text-align: center; color: var(--text-light); max-width: var(--max-text); margin: 0 auto 2.25rem; }
.brand-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1080px; margin: 0 auto; }
.brand-card { display: block; border-radius: var(--radius); overflow: hidden; color: var(--text); transition: all 0.25s; background: #fff; box-shadow: var(--shadow); }
.brand-card:hover { box-shadow: var(--shadow-lg); text-decoration: none; transform: translateY(-3px); }
.brand-card .brand-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-rich); }
.brand-card .brand-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.brand-card:hover .brand-img img { transform: scale(1.04); }
.brand-card h3 { padding: 0.9rem 1.2rem 0.1rem; font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; color: var(--dark); }
.brand-card p { padding: 0 1.2rem 1.1rem; font-size: 0.88rem; color: var(--text-muted); }

/* ── Bring your brand to Washington ──────────────────────────────────── */
.capabilities { position: relative; background-size: cover; background-position: center; padding: 4.5rem 2rem; }
.cap-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42,33,24,0.78) 0%, rgba(42,33,24,0.9) 100%); }
.cap-inner { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; }
.cap-head { max-width: 720px; margin: 0 auto 2.25rem; text-align: center; }
.cap-kicker { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 0.6rem; }
.capabilities h2 { font-family: var(--font-display); font-size: 2.2rem; color: #fff; margin-bottom: 0.9rem; line-height: 1.15; }
.cap-head p { color: rgba(255,255,255,0.9); font-size: 1.05rem; }
.cap-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
.cap-item { background: rgba(255,255,255,0.08); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.12); padding: 1.4rem 1.2rem; border-radius: var(--radius); }
.cap-item strong { display: block; font-size: 0.95rem; color: var(--gold-light); margin-bottom: 0.3rem; }
.cap-item span { font-size: 0.85rem; color: rgba(255,255,255,0.82); line-height: 1.5; display: block; }
.cap-actions { text-align: center; display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }
.cta-btn { display: inline-block; padding: 0.8rem 1.9rem; border-radius: 100px; font-weight: 600; font-size: 0.9rem; border: 2px solid var(--green); color: var(--green); transition: all 0.2s; }
.cta-btn:hover { background: var(--green); color: #fff; text-decoration: none; }
.cta-btn.primary { background: var(--green); color: #fff; }
.cta-btn.primary:hover { background: var(--green-dark); border-color: var(--green-dark); }
.cta-btn.light { border-color: rgba(255,255,255,0.5); color: #fff; }
.cta-btn.light:hover { background: #fff; color: var(--dark); border-color: #fff; }

/* ── Retail band: retailers + consumers ──────────────────────────────── */
.retail-band { background: var(--bg); padding: 3.5rem 2rem; }
.retail-band .band-inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.band-card { background: #fff; border-radius: var(--radius); padding: 2rem 2rem 1.75rem; box-shadow: var(--shadow); }
.band-card h2 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: var(--dark); margin-bottom: 0.4rem; }
.band-card p { color: var(--text-light); font-size: 0.97rem; margin-bottom: 1.1rem; }

/* ── Press + Learn strips ────────────────────────────────────────────── */
.press-strip { background: var(--bg-warm); padding: 3rem 2rem; text-align: center; }
.press-strip h2, .learn-teasers h2 { font-family: var(--font-display); font-size: 2rem; font-weight: 700; margin-bottom: 0.6rem; color: var(--dark); }
.text-link { font-weight: 600; }
.learn-teasers { background: var(--bg-rich); padding: 3rem 2rem; text-align: center; }
.teaser-row { display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap; margin-top: 1.25rem; }
.teaser { display: block; padding: 1.4rem 1.9rem; background: #fff; border-radius: var(--radius); color: var(--text); min-width: 240px; text-align: left; box-shadow: var(--shadow); transition: all 0.2s; }
.teaser:hover { box-shadow: var(--shadow-lg); text-decoration: none; transform: translateY(-2px); }
.teaser-title { display: block; font-weight: 600; margin-bottom: 0.15rem; }
.teaser-desc { display: block; font-size: 0.84rem; color: var(--text-muted); }

/* ── Page body ───────────────────────────────────────────────────────── */
.content { min-height: 60vh; }
.page-body { max-width: 900px; margin: 0 auto; padding: 3rem 2rem; }
.page-body h2 { font-family: var(--font-display); font-size: 1.95rem; font-weight: 700; line-height: 1.2; margin: 2.75rem 0 0.9rem; color: var(--dark); padding-bottom: 0.5rem; position: relative; }
.page-body h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 2px; background: var(--gold); }
.page-body h2:first-child { margin-top: 0; }
.page-body h3 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; color: var(--dark); margin: 1.5rem 0 0.4rem; }
.page-body ul { margin-left: 1.25rem; margin-bottom: 1rem; }
.page-body li { margin-bottom: 0.4rem; }
.page-body p { margin-bottom: 1rem; max-width: var(--max-text); color: var(--text); }
.page-body li { color: var(--text); }
.lead { font-size: 1.18rem; line-height: 1.6; color: var(--text); }

/* Product intro */
.product-intro { display: grid; grid-template-columns: 1fr 380px; gap: 3rem; align-items: start; margin-bottom: 2.5rem; }
.product-hero-img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.product-hero-img img { border-radius: var(--radius-lg); }

/* Product gallery */
.product-gallery { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; align-items: flex-end; margin: 2.5rem 0; padding: 2.5rem 2rem; background: var(--dark); border-radius: var(--radius-lg); }
.product-gallery img { width: 150px; border-radius: var(--radius); filter: drop-shadow(0 6px 16px rgba(0,0,0,0.35)); }
.giant-gallery { align-items: flex-start; }
.giant-gallery div { text-align: center; }
.giant-gallery img { width: 120px; }
.giant-gallery span { display: block; font-size: 0.8rem; color: var(--gold-light); margin-top: 0.6rem; font-family: var(--font-display); font-style: italic; }

/* Flavor cards */
.flavor-grid { display: flex; gap: 1.25rem; margin: 1.5rem 0 2rem; flex-wrap: wrap; }
.flavor-card { flex: 1; min-width: 200px; background: var(--dark); border-radius: var(--radius-lg); text-align: center; overflow: hidden; box-shadow: var(--shadow-lg); transition: transform 0.2s; }
.flavor-card:hover { transform: translateY(-2px); }
.flavor-card img { max-height: 200px; margin: 1.5rem auto 0; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25)); }
.flavor-card h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin: 1rem 0 0.2rem; color: var(--gold-light); }
.flavor-card p { color: rgba(255,255,255,0.72); font-size: 0.84rem; padding: 0 1rem 1.25rem; }
.flavor-card.text-only { padding-top: 0.5rem; }
.flavor-card.text-only h3 { margin-top: 1.25rem; }

/* Feature grid */
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
.feature { padding: 1.5rem; background: var(--bg-warm); border-radius: var(--radius); box-shadow: var(--shadow); }
.feature strong { display: block; font-size: 1rem; font-weight: 700; color: var(--dark); margin-bottom: 0.3rem; }
.feature p { font-size: 0.9rem; color: var(--text-light); margin: 0; }

/* Steps */
.steps { list-style: none; margin: 1.5rem 0 2rem; counter-reset: step; max-width: var(--max-text); }
.steps li { position: relative; padding-left: 3rem; margin-bottom: 1rem; }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0.05rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--green); color: #fff; font-weight: 600; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; }
.steps strong { display: block; color: var(--dark); }

.partner-cta { text-align: center; padding: 2rem 0 1rem; }
.partner-cta p { margin: 0 auto 1rem; color: var(--text-muted); }

/* Press list */
.press-list { margin: 1.5rem 0 2.5rem; border-top: 1px solid var(--border); }
.press-item { display: grid; grid-template-columns: 170px 1fr; gap: 0 2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--border); color: var(--text); }
.press-item:hover { text-decoration: none; }
.press-item:hover .press-title { color: var(--link-hover); text-decoration-color: currentColor; }
.press-item:hover .press-read { color: var(--green-dark); }
.press-meta { display: block; padding-top: 0.3rem; }
.press-outlet { display: block; font-weight: 700; color: var(--dark); font-size: 0.92rem; line-height: 1.35; }
.press-date { display: block; color: var(--text-muted); font-size: 0.8rem; margin-top: 0.15rem; }
.press-body { display: block; }
.press-title { display: block; font-family: var(--font-body); font-size: 1.12rem; font-weight: 700; color: var(--link); line-height: 1.35; text-decoration: underline; text-decoration-color: rgba(45,84,41,0.35); text-underline-offset: 3px; }
.press-title .ext { font-size: 0.85rem; font-weight: 600; position: relative; top: -1px; margin-left: 0.15rem; text-decoration: none; display: inline-block; }
.press-blurb { display: block; font-size: 0.95rem; color: var(--text-light); margin-top: 0.4rem; line-height: 1.55; }
.press-read { display: inline-block; margin-top: 0.55rem; font-size: 0.8rem; font-weight: 700; color: var(--link); letter-spacing: 0.02em; text-transform: uppercase; }
.press-read::after { content: " \2197"; }
@media (max-width: 640px) { .press-item { grid-template-columns: 1fr; gap: 0.35rem; } .press-meta { display: flex; gap: 0.6rem; align-items: baseline; padding-top: 0; } .press-date { margin-top: 0; } }

/* Order */
.order-cta { text-align: center; margin: 2rem 0; padding: 2.25rem; background: var(--bg-warm); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.order-cta p { margin: 0 auto 1rem; color: var(--text); }

/* Learn list */
.learn-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 2rem 0; }
.learn-link { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; background: #fff; border-radius: var(--radius); color: var(--text); box-shadow: var(--shadow); transition: all 0.15s; gap: 1rem; }
.learn-link:hover { box-shadow: var(--shadow-lg); text-decoration: none; transform: translateY(-1px); }
.ll-title { font-weight: 700; font-size: 0.95rem; color: var(--link); }
.ll-desc { font-size: 0.78rem; color: var(--text-muted); text-align: right; }
.learn-link:hover .ll-title { text-decoration: underline; text-underline-offset: 3px; }

/* FAQ */
.faq-item { padding: 1.5rem 0; border-bottom: 1px solid var(--border); }
.faq-item:first-child { padding-top: 0; }
.faq-item:last-child { border-bottom: none; }
.faq-item h3 { font-family: var(--font-body); font-size: 1.08rem; font-weight: 700; margin: 0 0 0.45rem; color: var(--dark); }

/* Retailer regions */
.retailer-regions { margin-top: 1rem; }
.retailer-regions h2 { font-size: 1.15rem; margin-top: 2rem; }
.placeholder-note { color: var(--text-muted); font-style: italic; font-size: 0.9rem; margin-bottom: 1rem; padding: 1rem; background: var(--bg-warm); border-radius: var(--radius); }

/* Misc */
.note { font-size: 0.82rem; color: var(--text-muted); font-style: italic; }

/* ── Footer: compact, left-aligned grid ──────────────────────────────── */
.site-footer { background: var(--dark); color: rgba(255,255,255,0.6); padding: 2.75rem 2rem 1.5rem; font-size: 0.85rem; }
.footer-inner { max-width: var(--max-content); margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2rem; padding-bottom: 1.75rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-brand .crest { width: 90px; height: 74px; color: #fff; opacity: 0.85; margin-bottom: 0.75rem; }
.footer-brand .f-tag { font-family: var(--font-display); font-style: italic; color: var(--gold-light); font-size: 1.05rem; margin-bottom: 0.5rem; }
.footer-brand p { color: rgba(255,255,255,0.5); line-height: 1.6; font-size: 0.8rem; }
.footer-col h4 { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 0.7rem; font-weight: 600; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.35rem; line-height: 1.4; }
.footer-col a { color: rgba(255,255,255,0.82); font-size: 0.88rem; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-col p { color: rgba(255,255,255,0.65); font-size: 0.85rem; margin-bottom: 0.5rem; line-height: 1.5; }
.mp-warn { padding: 1.25rem 0 0.75rem; }
.mp-warn p { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.55); margin-bottom: 0.4rem; max-width: 1000px; }
.footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.8rem; color: rgba(255,255,255,0.55); padding-top: 0.5rem; }
.footer-base a { color: rgba(255,255,255,0.8); }
.footer-base a:hover { color: #fff; }
.site-footer a { color: rgba(255,255,255,0.7); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1320px) { .main-nav > ul { gap: 0 1.1rem; } .logo .wordmark { font-size: 1.35rem; } .header-inner { gap: 1.25rem; } .main-nav { gap: 1rem; } }
@media (max-width: 1180px) {
  .header-inner { flex-wrap: wrap; gap: 0.75rem 1rem; padding: 0.6rem 1.25rem; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font-size: 1.3rem; color: var(--dark); cursor: pointer; }
  .main-nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0.75rem; padding: 0.5rem 0 0.75rem; border-top: 1px solid var(--border); }
  .main-nav.open { display: flex; }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav > ul > li > a { display: block; padding: 0.7rem 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
  .has-menu > a::after { display: none; }
  .submenu { position: static; display: block; box-shadow: none; border: 0; border-radius: 0; background: transparent; padding: 0 0 0 1.25rem; min-width: 0; }
  .submenu a { display: block; padding: 0.6rem 0; font-size: 0.88rem; border-bottom: 1px solid rgba(0,0,0,0.05); color: var(--text); }
  .submenu a:hover { background: transparent; }
  .nav-cta { text-align: center; }
  .product-intro { grid-template-columns: 1fr; } .product-hero-img { max-width: 400px; } .feature-grid { grid-template-columns: 1fr; } .learn-list { grid-template-columns: 1fr; } .cap-strip { grid-template-columns: 1fr 1fr; }
  .brand-row { grid-template-columns: repeat(2, 1fr); }
  .retail-band .band-inner { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .hero h1 { font-size: 2.1rem; } .hero-tagline { font-size: 1.15rem; } .hero-sub { display: none; } .hero-lockup { padding: 0 1.25rem 1.1rem; } .hero-overlay { background: linear-gradient(180deg, rgba(42,33,24,0.05) 30%, rgba(42,33,24,0.85) 100%); }
  .page-hero h1 { font-size: 1.8rem; } .page-hero .hero-inner { padding: 2.5rem 1.25rem 1.5rem; }
  .page-body { padding: 2.5rem 1.25rem; }
  .brand-row { grid-template-columns: 1fr 1fr; gap: 0.9rem; }
  .brand-card h3 { font-size: 1.2rem; padding: 0.7rem 0.9rem 0.05rem; } .brand-card p { padding: 0 0.9rem 0.9rem; font-size: 0.78rem; }
  .press-item { flex-direction: column; gap: 0.15rem; }
  .cap-strip { grid-template-columns: 1fr; }
  .brands-grid, .capabilities, .press-strip, .learn-teasers, .intro-block, .retail-band { padding-left: 1.25rem; padding-right: 1.25rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .logo .crest { width: 54px; height: 44px; } .logo .wordmark { font-size: 1.25rem; }
}

/* ── Manifesto scroll (About page) ───────────────────────────────────── */
.manifesto-wrap { max-width: 780px; margin: 4.5rem auto 1.5rem; padding: 0 1.25rem; }
.ms-label { text-align: center; font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.15rem; }
.ms-note { text-align: center; font-size: 0.72rem; color: var(--text-muted); margin-top: 1.15rem; font-style: italic; }

.scroll { position: relative; padding: 15px 0; filter: drop-shadow(0 12px 28px rgba(42,33,24,0.24)); }
.scroll::before, .scroll::after {
  content: ""; position: absolute; left: -14px; right: -14px; height: 30px; z-index: 2;
  border-radius: 16px / 15px;
  background: linear-gradient(180deg, #ab8850 0%, #e4c891 22%, #f4e3bd 42%, #d8b67b 68%, #98763f 100%);
  box-shadow: inset 0 0 0 1px rgba(90,64,28,0.35);
}
.scroll::before { top: 0; }
.scroll::after { bottom: 0; }

.scroll-sheet {
  position: relative; z-index: 1; padding: 3.25rem 2.75rem 3.5rem; color: #4a3720;
  background-color: #f2e4c4;
  background-image:
    radial-gradient(ellipse at 18% 12%, rgba(176,140,82,0.16), transparent 55%),
    radial-gradient(ellipse at 82% 78%, rgba(150,115,60,0.18), transparent 52%),
    radial-gradient(ellipse at 38% 68%, rgba(168,132,74,0.12), transparent 48%),
    radial-gradient(ellipse at 55% 45%, rgba(255,250,235,0.5), transparent 62%);
  box-shadow: inset 0 0 60px rgba(120,88,40,0.38), inset 0 0 150px rgba(140,105,55,0.18);
}
.scroll-sheet::before, .scroll-sheet::after { content: ""; position: absolute; top: 0; bottom: 0; width: 26px; pointer-events: none; }
.scroll-sheet::before { left: 0; background: linear-gradient(90deg, rgba(108,78,34,0.38), transparent); }
.scroll-sheet::after { right: 0; background: linear-gradient(270deg, rgba(108,78,34,0.38), transparent); }

.scroll-text {
  font-family: var(--font-display); font-size: 1.32rem; line-height: 1.72;
  text-align: justify; -webkit-hyphens: auto; hyphens: auto;
}
.scroll-text::first-letter { font-size: 3.6rem; line-height: 0.82; float: left; margin: 0.14em 0.1em 0 0; color: #7a5a24; font-weight: 700; }
.scroll-sig { margin-top: 1.7rem; text-align: right; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: #7a5a24; letter-spacing: 0.04em; }

@media (max-width: 640px) {
  .manifesto-wrap { margin-top: 3rem; }
  .scroll { padding: 11px 0; }
  .scroll::before, .scroll::after { height: 22px; left: -8px; right: -8px; }
  .scroll-sheet { padding: 2rem 1.4rem 2.25rem; }
  .scroll-text { font-size: 1.12rem; text-align: left; -webkit-hyphens: none; hyphens: none; }
  .scroll-text::first-letter { font-size: 3rem; }
}

/* ── Find Mirth: zip search + map ─────────────────────────────────────── */
.find-wrap { max-width: 1080px; margin: 0 auto; padding: 2.5rem 2rem 3rem; }
.find-wrap .lead { max-width: 720px; }
.zip-form { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin: 1.25rem 0 0.6rem; }
.zip-form input { font: inherit; font-size: 1.05rem; padding: 0.7rem 1rem; border: 1.5px solid var(--border); border-radius: 100px; width: 190px; background: #fff; color: var(--text); }
.zip-form input:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.zip-form .cta-btn { padding: 0.7rem 1.6rem; }
.zip-form .cta-btn.ghost { border-color: var(--border); color: var(--text); background: #fff; }
.zip-form .cta-btn.ghost:hover { border-color: var(--green); color: var(--green-dark); background: #fff; }
.search-status { font-size: 0.92rem; color: var(--text-light); margin-bottom: 1rem; min-height: 1.4em; }
.search-status.is-error { color: #8a2f1f; }
.find-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; align-items: start; }
#store-map { height: 540px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-warm); z-index: 1; }
.store-list { list-style: none; max-height: 540px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.store-list:empty { display: none; }
.store { display: flex; gap: 0.8rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); cursor: pointer; }
.store:last-child { border-bottom: 0; }
.store:hover { background: var(--bg-warm); }
.store-rank { flex: 0 0 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--green); color: #fff; font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 0.15rem; }
.store-body { display: block; min-width: 0; }
.store-name { display: block; font-weight: 700; color: var(--dark); font-size: 0.95rem; line-height: 1.3; }
.store-addr { display: block; font-size: 0.85rem; color: var(--text-light); }
.store-meta { display: block; font-size: 0.8rem; color: var(--text-muted); margin-top: 0.15rem; }
.store-meta a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.store-pop { font: 13px/1.45 var(--font-body); color: var(--text); }
.store-pop strong { font-size: 14px; color: var(--dark); }
.store-pop a { color: var(--link); text-decoration: underline; }
.store-dist { color: var(--text-muted); }
.leaflet-popup-content-wrapper { border-radius: 8px; }
.find-note { font-size: 0.85rem; color: var(--text-muted); margin-top: 1rem; }
@media (max-width: 900px) { .find-grid { grid-template-columns: 1fr; } #store-map { height: 420px; } .store-list { max-height: 360px; } }

/* ── Brand page: at-a-glance strip ───────────────────────────────────── */
.glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; margin: 0 0 2.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; overflow: hidden; }
.glance div { padding: 1rem 1.2rem; border-right: 1px solid var(--border); }
.glance div:last-child { border-right: 0; }
.glance dt { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 0.25rem; }
.glance dd { font-size: 0.95rem; font-weight: 600; color: var(--dark); line-height: 1.4; }
@media (max-width: 640px) { .glance { grid-template-columns: 1fr 1fr; } .glance div { border-bottom: 1px solid var(--border); } .glance div:nth-child(2n) { border-right: 0; } }

/* ── Age gate (product pages only; hidden before first paint once verified) ── */
html.age-ok #gateway, html.no-js #gateway { display: none !important; }
.gateway { position: fixed; inset: 0; z-index: 1000; background: rgba(42,33,24,0.93); display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.gate-card { text-align: center; color: #fff; max-width: 440px; width: 100%; }
.gate-card .crest { width: 120px; height: 99px; margin: 0 auto 1.25rem; opacity: 0.95; }
.gate-card h2 { font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1.15; margin-bottom: 1.5rem; }
.gate-actions { display: flex; gap: 0.75rem; justify-content: center; }
.gate-btn { display: inline-block; min-width: 130px; padding: 0.9rem 1.6rem; border-radius: 100px; font-weight: 700; font-size: 1rem; letter-spacing: 0.04em; border: 2px solid rgba(255,255,255,0.7); color: #fff; }
.gate-btn.yep { background: var(--green); border-color: var(--green); }
.gate-btn.yep:hover { background: var(--green-dark); border-color: var(--green-dark); text-decoration: none; }
.gate-btn.nope:hover { background: rgba(255,255,255,0.1); text-decoration: none; }
.gate-note { font-size: 0.78rem; color: rgba(255,255,255,0.6); margin-top: 1.25rem; }

/* ── Shelf dataset table ─────────────────────────────────────────────── */
.shelf-table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: 0.95rem; }
.shelf-table th { text-align: left; padding: 0.65rem 0.75rem; border-bottom: 2px solid var(--green); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-light); }
.shelf-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); }
.shelf-table tbody tr:hover { background: var(--bg-warm); }
.shelf-table a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.shelf-table a:hover { color: var(--green-dark); }
@media (max-width: 600px) {
  .shelf-table { font-size: 0.85rem; }
  .shelf-table th, .shelf-table td { padding: 0.45rem 0.4rem; }
}

/* ── Partner one-liner (home) ─────────────────────────────────────────── */
.partner-line { background: var(--bg-warm); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 1.4rem 2rem; text-align: center; }
.partner-line p { max-width: var(--max-text); margin: 0 auto; color: var(--text-light); font-size: 0.98rem; }
.partner-line a { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ── Carried article pages ───────────────────────────────────────────────
   The 17 learn articles, the WA law guide and the 20-question FAQ keep their
   own bodies and take the site shell (reskin-carried-pages.mjs). These rules
   restyle that legacy markup in the reframe's type and colour system, so the
   inlined 2016 stylesheets can come out without touching a word of copy. */
.carried { max-width: 900px; margin: 0 auto; padding: 2.5rem 2rem 4rem; }
.carried > h1 { font-family: var(--font-display); font-size: clamp(2rem, 4.2vw, 2.9rem); font-weight: 700; line-height: 1.12; color: var(--dark); margin: 0 0 0.6rem; }
.carried h2 { font-family: var(--font-display); font-size: 1.95rem; font-weight: 700; line-height: 1.2; color: var(--dark); margin: 2.75rem 0 0.9rem; padding-bottom: 0.5rem; position: relative; }
.carried h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 2px; background: var(--gold); }
.carried h3 { font-family: var(--font-body); font-size: 1.08rem; font-weight: 700; color: var(--dark); margin: 1.75rem 0 0.45rem; }
.carried h4 { font-family: var(--font-body); font-size: 0.97rem; font-weight: 700; color: var(--text-light); margin: 1.25rem 0 0.35rem; }
.carried p { margin-bottom: 1rem; max-width: var(--max-text); color: var(--text); }
.carried ul, .carried ol { margin: 0 0 1.15rem 1.3rem; max-width: var(--max-text); }
.carried li { margin-bottom: 0.4rem; color: var(--text); }
.carried strong { font-weight: 600; color: var(--dark); }
.carried p a, .carried li a, .carried td a { color: var(--link); text-decoration: underline; text-decoration-color: rgba(45,84,41,0.45); text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 500; }
.carried p a:hover, .carried li a:hover, .carried td a:hover { color: var(--link-hover); text-decoration-color: currentColor; }
.carried img { border-radius: var(--radius); margin: 1.5rem 0; }

/* Breadcrumb and byline */
.carried .breadcrumb { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.5rem; }
.carried .breadcrumb a { color: var(--text-muted); }
.carried .breadcrumb a:hover { color: var(--link); }
.carried .breadcrumb span, .carried .faq-breadcrumb .separator { margin: 0 0.5rem; opacity: 0.6; }
.carried .faq-breadcrumb { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2rem; }
.carried .faq-breadcrumb a { color: var(--text-muted); }
.carried .faq-breadcrumb a:hover { color: var(--link); }
.carried .article-meta, .carried .article-date, .carried .meta { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 1.5rem; }
.carried .article-header { margin-bottom: 1.5rem; }
.carried .subtitle { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--text-light); margin-bottom: 1.25rem; }
.carried .lead, .carried .article-lead { font-size: 1.18rem; line-height: 1.6; color: var(--text); }

/* Disclosure and callouts */
.carried .disclosure { background: var(--bg-warm); border-left: 3px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; padding: 1rem 1.25rem; margin: 1.75rem 0; font-size: 0.9rem; color: var(--text-light); max-width: var(--max-text); }
.carried .disclosure p:last-child { margin-bottom: 0; }
.carried .callout { background: var(--bg-warm); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 1.75rem 0; max-width: var(--max-text); }
.carried .callout-warning { background: #f6efe2; border-left: 3px solid var(--gold); }
.carried .callout h3, .carried .callout h4 { margin-top: 0; }
.carried .callout p:last-child, .carried .callout ul:last-child { margin-bottom: 0; }

/* Brand review blocks */
.carried .brand-review { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem 1.75rem; margin: 1.75rem 0; background: #fff; box-shadow: var(--shadow); }
.carried .brand-review h3 { margin-top: 0; font-size: 1.2rem; }
.carried .brand-name { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; color: var(--dark); display: block; margin-bottom: 0.3rem; }
.carried .brand-specs { font-size: 0.85rem; line-height: 1.7; color: var(--text-muted); padding: 0.5rem 0 0.9rem; border-bottom: 1px solid var(--border); margin-bottom: 1.15rem; }
.carried .brand-specs strong { font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-light); font-weight: 700; }
.carried .brand-list { list-style: none; margin-left: 0; }
.carried .limitations-list, .carried .checklist, .carried .do-not-list { max-width: var(--max-text); }
.carried .do-not-list li::marker { color: #9a3b2f; }

/* Tables */
/* Comparison tables are the signature content of these articles and eight columns do
   not fit the prose measure, so they break out past the container on wide screens and
   fall back to horizontal scroll on narrow ones. */
.carried .table-wrapper, .carried .comparison-table-wrapper { overflow-x: auto; margin: 1.75rem 0; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; width: min(1100px, calc(100vw - 3rem)); margin-left: 50%; transform: translateX(-50%); }
.carried table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
.carried th, .carried td { padding: 0.65rem 0.8rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.carried thead th { background: var(--bg-warm); font-family: var(--font-body); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-light); white-space: nowrap; }
.carried tbody tr:last-child td { border-bottom: none; }
.carried tbody tr:nth-child(even) { background: rgba(240,235,226,0.4); }

/* FAQ: plain pairs in the learn articles, an accordion on /faq/ */
.carried .faq-section { margin-top: 2.5rem; }
.carried .faq-item { padding: 1.4rem 0; border-bottom: 1px solid var(--border); max-width: var(--max-text); }
.carried .faq-item:last-child { border-bottom: none; }
.carried p.faq-question { font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; color: var(--dark); margin-bottom: 0.45rem; }
.carried .faq-answer { color: var(--text); }
.carried button.faq-question { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; color: var(--dark); padding: 0; line-height: 1.45; }
.carried button.faq-question:hover { color: var(--link); }
.carried .faq-icon { flex: 0 0 auto; width: 14px; height: 14px; position: relative; }
.carried .faq-icon::before, .carried .faq-icon::after { content: ""; position: absolute; background: var(--gold); border-radius: 1px; transition: transform 0.2s ease; }
.carried .faq-icon::before { left: 0; top: 6px; width: 14px; height: 2px; }
.carried .faq-icon::after { left: 6px; top: 0; width: 2px; height: 14px; }
.carried .is-open .faq-icon::after { transform: rotate(90deg); }
.carried button.faq-question + .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.25s ease, padding 0.25s ease; }
.carried .is-open button.faq-question + .faq-answer { max-height: 2400px; padding-top: 0.7rem; }
/* Without JS every answer stays open, so nothing is ever unreachable. */
.no-js .carried button.faq-question + .faq-answer { max-height: none; padding-top: 0.7rem; }
.no-js .carried .faq-icon { display: none; }

/* Related reading */
.carried .related-links, .carried .related-articles, .carried .related-reading { margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--border); }
.carried .related-links h2, .carried .related-articles h2, .carried .related-reading h2 { font-size: 1.35rem; margin-top: 0; }
.carried .related-links ul, .carried .related-articles ul, .carried .related-reading ul { list-style: none; margin-left: 0; }
.carried .related-links li, .carried .related-articles li, .carried .related-reading li { margin-bottom: 0.55rem; }
.carried .related-links a, .carried .related-articles a, .carried .related-reading a { font-weight: 600; }

/* Timeline */
.carried .timeline { list-style: none; margin-left: 0; }
.carried .timeline li { display: flex; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.carried .year { flex: 0 0 4.5rem; font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--gold); }
.carried .sep { color: var(--text-muted); margin: 0 0.4rem; }

@media (max-width: 720px) {
  .carried { padding: 1.75rem 1.25rem 3rem; }
  .carried h2 { font-size: 1.6rem; }
  .carried .brand-review { padding: 1.15rem 1.25rem; }
  .carried .brand-specs { font-size: 0.75rem; gap: 0.4rem 0.9rem; }
}

/* Archive essays (/about/archive/): the four 2014 posts, verbatim */
.archive .archive-toc ol { list-style: none; margin: 0 0 2.5rem; padding: 0.5rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; max-width: var(--max-text); }
.archive .archive-toc li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.archive .archive-toc li:last-child { border-bottom: 0; }
.archive .archive-toc li a { font-weight: 600; color: var(--link); text-decoration: underline; text-decoration-color: rgba(45,84,41,0.45); text-underline-offset: 3px; }
.archive .archive-toc li span { color: var(--text-muted); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.archive-essay { margin: 3.5rem 0 0; }
.archive-essay + .archive-essay { border-top: 1px solid var(--border); padding-top: 3rem; }
.archive-essay header { margin-bottom: 1.25rem; }
.archive-essay header h2 { margin-top: 0; }
.essay-summary { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; line-height: 1.35; color: var(--text); margin: 0.6rem 0 0.4rem; max-width: var(--max-text); }
.essay-meta { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.archive-essay h3 { margin-top: 1.75rem; }
.page-body blockquote { margin: 1.5rem 0; padding: 0.2rem 0 0.2rem 1.25rem; border-left: 3px solid var(--gold); font-family: var(--font-display); font-size: 1.35rem; line-height: 1.4; color: var(--dark); max-width: var(--max-text); }
.page-body blockquote p { margin: 0; color: inherit; }

/* Self-hosted video (the 2015 Legal commercial on /legal/ and /press/) */
.video-wrap { margin: 1rem 0 2.5rem; max-width: 900px; }
.video-wrap video { width: 100%; height: auto; display: block; background: #000; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,0.12); }

/* Brand-page questions (visible twin of the FAQPage schema) */
.brand-faq { margin-top: 2.5rem; max-width: var(--max-text); }
.brand-faq .faq-item { border-top: 1px solid var(--border); padding: 1rem 0 0.4rem; }
.brand-faq .faq-item:last-child { border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
.brand-faq h3 { margin: 0 0 0.35rem; font-size: 1.02rem; }
.brand-faq p { margin-bottom: 0.6rem; }

/* Privacy and Terms: no hero, plain document. One 680px column for every element, so
   paragraphs and lists sit at the same width (the page-body paragraph cap alone left
   bullets 136px wider than the prose above them). */
.legal-page { padding-top: 3.5rem; max-width: calc(var(--max-text) + 4rem); }
.legal-page p, .legal-page ul, .legal-page ol { max-width: var(--max-text); }
.legal-page h1 { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; line-height: 1.1; color: var(--dark); margin: 0 0 0.35rem; }
.legal-page code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; background: #f1ece2; padding: 0.05em 0.35em; border-radius: 3px; }

/* In-article table of contents on the carried learn pages and the law guide */
.article-toc { margin: 1.5rem 0 2.25rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--radius); background: #fff; max-width: 640px; }
.article-toc p { margin: 0 0 0.5rem; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.article-toc ol { margin: 0; padding-left: 1.25rem; columns: 2; column-gap: 2rem; }
.article-toc li { margin: 0 0 0.3rem; font-size: 0.95rem; break-inside: avoid; }
.article-toc a { color: var(--link); text-decoration: none; font-weight: 500; }
.article-toc a:hover { text-decoration: underline; }
@media (max-width: 640px) { .article-toc ol { columns: 1; } }