/* PlainSlate typography and Slate palette, preserving the product-digest layout. */
:root {
  --bg: var(--slate); --surface: var(--slate-2); --surface-elevated: var(--paper-2);
  --surface-paper: #EFEDE6; --text: #15181A; --text-muted: var(--ink-muted);
  --border: var(--paper-line); --border-dark: var(--slate-line);
  --accent: var(--lime); --accent-positive: var(--olive); --accent-attention: var(--coral-deep);
  --display: "Bodoni Moda", Georgia, serif; --mono: "JetBrains Mono", ui-monospace, monospace;
  --body: "Schibsted Grotesk", Arial, sans-serif;
}
body { font: 17px/1.6 var(--body); background: var(--slate); color: var(--on-slate); font-optical-sizing: none; font-variation-settings: "opsz" 12; }
body :is(span, small, b, strong, dt, dd, label, button, code, svg text) { font-family: var(--mono); }
body :is(h1, h2, h3, h4) :is(span, b, strong, em) { font-family: var(--display); }
body p :is(span, b, strong, em) { font-family: var(--body); }
h1, h2, h3, h4, h1 em, h2 em, h3 em { font-family: var(--display); font-optical-sizing: none; font-variation-settings: "opsz" 12; }
h1, h2, h3, h4 { letter-spacing: -.02em !important; }
body p:not(.micro):not(.eyebrow) { font-family: var(--body); font-size: 17px; }
:is(.micro, .eyebrow, .section-label, .panel-label, .status, .confirmed,
  .footer-bottom, .digest-rule, .demo-controls, .app-topbar,
  nav, button, .button, .text-link, code, small) {
  font-family: var(--mono); font-size: 12px; text-transform: uppercase;
}
:is(button, .button, .text-link) { font-size: 13px; }
body :is(nav a, .button, button, .text-link) { font: 500 13px/1.4 var(--mono) !important; text-transform: uppercase; }
.dark, .site-header, .site-footer { background: var(--slate); color: var(--on-slate); --text-muted: var(--on-slate-muted); --border: var(--slate-line); --accent-attention: var(--coral); }
.paper, .price-card, .hero-digest { background: var(--paper); color: var(--ink); --text-muted: var(--ink-muted); --border: var(--paper-line); --accent-attention: var(--coral-deep); }
.dark :is(h1, h2, h3) em { color: var(--lime); }
.paper :is(h1, h2, h3) em, .hero-digest :is(h1, h2, h3) em {
  color: var(--ink); background: linear-gradient(transparent 66%, var(--marker) 66%);
}
.paper .lime, .paper .confirmed, .paper .positive, .paper .text-link,
.hero-digest .confirmed { color: var(--olive); }
.paper .attention, .hero-digest .attention { color: var(--coral-deep); }
.dark .confirmed { color: var(--lime); }
.hero .hero-issue .confirmed { display: inline-flex; align-self: flex-start; padding: 6px 10px; background: var(--slate); color: var(--lime); }
.dark .section-label, .footer-bottom { border-color: var(--slate-line); }
.paper .section-label { border-color: var(--paper-line); }
.skip-link { color: var(--ink); }
.paper :is(.scope-tags span, .issue-index, .issue-metadata dt, .suggestion small,
  .report-footer, .feature-index, .use-number, .app-issue small, .app-issue > span:first-child,
  .faq-list summary > span, .anecdotes p, .tangled-flow i, .philosophy-pipeline i,
  .scope-comparison i) { color: var(--ink-muted); }
.paper :is(.philosophy h2 em, .aside-statement em) {
  color: var(--ink); background: linear-gradient(transparent 66%, var(--marker) 66%);
}
.paper .step > p, .paper .small { color: var(--ink-muted); }
.hero-digest .mini-issues li > span, .focused-scope > span:not(.micro),
.trend-fragment i, .app-divider { color: var(--ink-muted); }
.price, .price-five, .app-metrics b, .exception-stats strong, .report-total strong { font-family: var(--mono); }
.site-footer .studio-credit a { max-width: 100%; background: var(--slate-2); }
.site-footer .studio-credit a:hover { background: var(--slate-3); }
.site-footer .studio-credit img { width: min(320px, calc(100vw - 80px)); height: auto; max-width: 100%; max-height: 50px; }

/* The legacy landing components had hard-coded olive surfaces. Keep their layout,
   but bring their backgrounds and UI strokes onto the shared Slate palette. */
.analysis-frame { background: var(--slate-2); border-color: var(--slate-line); }
.frame-bar, .demo-status { background: var(--slate); border-color: var(--slate-line); }
.message { background: var(--slate-3); border-color: var(--slate-line); }
.cluster-quotes p, .after-flow ol, .access-panel { background: var(--slate-2); border-color: var(--slate-line); }
.cluster-result { background: var(--slate-3); border-color: var(--slate-line); }
.access-panel input { background: var(--slate); border-color: var(--slate-line); color: var(--on-slate); }
.menu-toggle { background: var(--slate-2); border-color: var(--slate-line); color: var(--on-slate); }

.today-workflow { background: color-mix(in srgb, var(--paper) 70%, var(--paper-line)); }
.feature-last, .app-sidebar, .app-context, .price-artifact, .price-card { background: var(--paper-2); }
.tangled-flow > span, .app-topbar { background: var(--paper); }
.app-issue.selected, .clean-workflow li.highlight { background: var(--marker); color: var(--ink); }
.suggestion { background: rgba(217,249,154,.22); }
.hero-digest .mini-issues li { border-color: var(--paper-line); }
.hero-digest .mini-issues small { color: var(--ink-muted); }
.paper .margin-line { background: var(--paper-line); }
.digest-sheet, .price-card { border-color: var(--paper-line); }
.hero-digest .issue-dot { background: var(--coral-deep); }
.five-rule-lines i { background: var(--olive); }
.final-noise i { background: var(--slate-line); }
.final-noise i:nth-child(n+7) { background: var(--olive); }
.site-footer .studio-credit { border-color: var(--slate-line); color: var(--on-slate-muted); }