/* ════════════════════════════════════════════════════════════════════════════
   FirmForge marketing web layer
   Consumes the design tokens defined in firmforge.css (the --color-*, --space-*,
   --radius-*, --font-*, --shadow-* custom properties). Never redefine the
   generated token region here; edit tokens.md and regenerate firmforge.css.

   All classes are namespaced (ff- / site- / component-specific) so they do not
   collide with the documentation component classes in firmforge.css.

   CLIENT-FACING, SO AA EVERYWHERE. tokens.md accepts the ember control label
   at 3.78 for internal tools and says it would not be for anything
   client-facing; this is. So controls and the ember band sit on ember-hover
   (4.86 under text-inverse), and small ember text on light grounds is
   ember-dark (6.13 on page-bg).
   ════════════════════════════════════════════════════════════════════════════ */

/* Inter, self-hosted (SIL Open Font License, fonts/OFL.txt) so no visitor
   request goes to Google. One variable file per character set covers the
   400-600 weights the site uses; the browser fetches latin-ext only when a
   page needs it. Same files Google Fonts served on 2026-10-21 (Inter v20). */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Site-local names for values firmforge.css has no token for yet. */
:root {
  /* standard-gaps decision #7: a 1240px page, and the bar's contents always
     match the page column. Every centred band reads this one value. */
  --site-page-width: 1240px;
  --site-surface-raised: #FFFFFF;                 /* tokens.md surface_raised */
  --site-inverse-strong: rgba(248,244,240,0.75);  /* body copy on obsidian */
  --site-inverse-muted: rgba(248,244,240,0.65);   /* secondary copy on obsidian */
  --site-inverse-faint: rgba(248,244,240,0.5);    /* captions; 4.87 on obsidian */
  --site-line-inverse: rgba(255,255,255,0.12);    /* hairlines on obsidian */
  --site-line-inverse-strong: rgba(255,255,255,0.2);
  --site-ember-tint: rgba(212,84,26,0.06);        /* outline-button hover on light */
  --site-ember-light-tint: rgba(240,124,58,0.10); /* outline-button hover on obsidian */
}

/* In-page links (#products, #contact, ...) stop below the sticky nav (65px,
   69px on phones) instead of under it. */
html { scroll-padding-top: 72px; }

body {
  font-family: var(--font-web);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-page-bg);
}

/* ── Focus ───────────────────────────────────────────────────────────────── */
/* interaction-patterns-guide §3: focus is always visible. Ember (focus_ring)
   reads at 4.29 on obsidian and 3.95 on page-bg; the ember band overrides it. */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--color-ember); outline-offset: 2px; border-radius: var(--radius-sm);
}
.cta-band a:focus-visible { outline-color: var(--color-text-inverse); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
/* Part 1 §6: radius sm, min-height 34px, 16px side padding; hover and pressed
   darken. Not firmforge.css's .btn-primary, whose hover lightens. */
.ff-btn {
  font-family: var(--font-web); font-size: 14px; font-weight: 500; line-height: 1;
  min-height: 34px; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer; transition: all var(--transition-fast);
  display: inline-flex; align-items: center; gap: var(--space-sm); white-space: nowrap; text-decoration: none;
}
.ff-btn-primary { background: var(--color-ember-hover); color: var(--color-text-inverse); }
.ff-btn-primary:hover, .ff-btn-primary:active { background: var(--color-ember-dark); color: var(--color-text-inverse); }
.ff-btn-secondary { background: transparent; color: var(--color-ember-dark); border-color: var(--color-ember-dark); }
.ff-btn-secondary:hover { background: var(--site-ember-tint); }
.ff-btn-secondary-inverse { background: transparent; color: var(--color-ember-light); border-color: var(--color-ember-light); }
.ff-btn-secondary-inverse:hover { background: var(--site-ember-light-tint); color: var(--color-ember-light); }
.ff-btn-on-ember { background: var(--color-obsidian); color: var(--color-text-inverse); }
.ff-btn-on-ember:hover { background: var(--color-obsidian-light); color: var(--color-text-inverse); }
.ff-btn-lg { font-size: 15px; padding: var(--space-lg) var(--space-xl); }

.cta-note { font-size: 12px; color: var(--color-muted); margin-top: var(--space-sm); }
.cta-note-inverse { color: var(--site-inverse-muted); }
.cta-note-on-ember { color: var(--color-text-inverse); }

/* ── Sticky site nav ─────────────────────────────────────────────────────── */
/* The bar runs edge to edge; its contents sit in the page column, with the
   same side padding as the sections, so the mark lines up with the headings. */
.site-nav {
  position: sticky; top: 0; z-index: 100; background: var(--color-obsidian);
  border-bottom: var(--border-dark);
  padding: var(--space-md) 0;
}
.site-nav-inner {
  display: flex; align-items: center; gap: var(--space-lg);
  max-width: var(--site-page-width); margin: 0 auto; padding: 0 var(--space-2xl);
}
.site-nav-brand { display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; }
.site-nav-brand img { height: 32px; width: 32px; }
.site-nav-wordmark { font-size: 19px; font-weight: 500; letter-spacing: -0.02em; color: var(--color-text-inverse); }
.site-nav-links { display: flex; gap: var(--space-xl); margin-left: var(--space-2xl); }
.site-nav-links a {
  font-size: 14px; color: var(--site-inverse-muted); text-decoration: none;
  border-bottom: 2px solid transparent; padding-bottom: var(--space-xs); transition: color var(--transition-fast);
}
.site-nav-links a:hover { color: var(--color-text-inverse); }
.site-nav-links a.is-current { color: var(--color-ember-light); border-bottom-color: var(--color-ember); }
.site-nav-cta { margin-left: auto; }
/* Icon button (standard-gaps: square, inline SVG), 44px because it only shows
   on phones, where touch targets are 44px or more. */
.site-nav-toggle {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px;
  margin-left: auto; background: transparent; border: 1px solid var(--site-line-inverse-strong);
  border-radius: var(--radius-sm); color: var(--color-text-inverse); cursor: pointer;
}
.site-nav-toggle svg { width: 20px; height: 20px; }

/* ── Hero (two-column: copy + product visual) ────────────────────────────── */
.hero-band { background: var(--color-obsidian); }
.ff-hero {
  color: var(--color-text-inverse); padding: var(--space-4xl) var(--space-2xl);
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-4xl);
  max-width: var(--site-page-width); margin: 0 auto;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-sm); font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ember-light); margin-bottom: var(--space-md);
}
/* Brand guide minimum: the mark is never smaller than 24px on screen
   (16px is allowed only for favicon/tab contexts). */
.hero-eyebrow img { height: 24px; width: 24px; }
.ff-hero-title { font-size: 48px; font-weight: 600; line-height: 1.06; letter-spacing: -0.02em; margin-bottom: var(--space-lg); }
.ff-hero-subtitle { font-size: 17px; line-height: 1.6; color: var(--site-inverse-strong); margin-bottom: var(--space-2xl); }
.hero-cta-row { display: flex; gap: var(--space-md); flex-wrap: wrap; }

/* ── Representative app window: FirmForge Conflict's Results panel ─────────
   Drawn after the locked contract (Conflict Docs/Design/design_previewer.html)
   and the shipped PySide6 code, scaled to the hero column. Severity is the
   contract's default style A: a neutral row, a 4px edge in sev-*-edge and a
   HIGH/MED/LOW badge on the sev-* fill; rows are never tinted. 11px is the
   floor for any text (standard-gaps, web type scale). */
.app-window { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--site-line-inverse); background: var(--site-surface-raised); }
/* A Windows app: the title, no traffic-light dots. */
.app-titlebar {
  height: 28px; display: flex; align-items: center; padding: 0 var(--space-md);
  background: var(--color-obsidian); border-bottom: 1px solid var(--color-obsidian-light);
  font-size: 11px; color: var(--site-inverse-muted);
}
.app-body { display: flex; height: 320px; }
/* 200px in the app (Part 2 §2), scaled to the illustration. */
.app-sidebar { width: 132px; background: var(--color-obsidian); padding: var(--space-md) 0; flex-shrink: 0; }
.app-brand {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-xs);
  padding: 0 var(--space-sm) var(--space-md); margin-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-obsidian-light);
}
.app-brand img { width: 32px; height: 32px; }
.app-brand-name { font-size: 12px; font-weight: 600; color: var(--color-text-inverse); line-height: 1.2; }
/* The product sub-label: lowercase, ember (brand guide; Part 1 §1). */
.app-brand-sub { font-size: 11px; color: var(--color-ember-light); line-height: 1.2; }
.app-nav-row { position: relative; font-size: 11px; color: var(--color-text-inverse); padding: var(--space-sm) var(--space-md); }
.app-nav-row.active { color: var(--color-ember-light); font-weight: 600; background: var(--color-obsidian-light); }
.app-nav-row.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-ember); }
.app-content { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--color-page-bg); }
.app-main { flex: 1; padding: var(--space-md); }
.app-heading { font-size: 14px; font-weight: 600; color: var(--color-obsidian); margin-bottom: var(--space-sm); }
.app-card { border: 1px solid var(--color-warn-border); background: var(--color-warn-bg); border-radius: var(--radius-md); margin-bottom: var(--space-sm); }
.app-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) var(--space-md) 0; }
/* The code's warning title ink (firmforge_ui/result_card.py), 6.2 on warn-bg. */
.app-card-title { font-size: 12px; font-weight: 600; color: #8A5900; }
.app-card-ref { font-family: var(--font-mono); font-size: 11px; color: var(--color-muted); }
.app-card-body { display: flex; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); }
.app-chip { font-size: 11px; line-height: 1.4; padding: 0 var(--space-sm); border-radius: var(--radius-full); background: var(--color-success-bg); border: 1px solid var(--color-success-border); color: #0F7A56; }
.app-tbl { width: 100%; border-collapse: collapse; font-size: 11px; background: var(--site-surface-raised); border: 1px solid var(--color-border); }
.app-tbl th { background: var(--color-obsidian); color: var(--color-text-inverse); text-align: left; font-weight: 600; padding: var(--space-xs) var(--space-sm); }
.app-tbl td { height: 32px; padding: 0 var(--space-sm); border-bottom: 1px solid var(--color-border); color: var(--color-ink); white-space: nowrap; }
.app-tbl .c-sev { position: relative; text-align: center; width: 52px; }
.app-tbl tr td.c-sev::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.app-tbl tr.sev-high td.c-sev::before { background: var(--color-sev-high-edge); }
.app-tbl tr.sev-med td.c-sev::before { background: var(--color-sev-med-edge); }
.app-tbl tr.sev-low td.c-sev::before { background: var(--color-sev-low-edge); }
.app-name { font-weight: 600; }
/* Badge inks from the contract's .b-high/.b-med/.b-low. */
.app-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em; line-height: 1.4; padding: 0 var(--space-xs); border-radius: var(--radius-full); border: 1px solid rgba(0,0,0,0.12); }
.sev-high .app-badge { background: var(--color-sev-high); color: #8A1F1F; }
.sev-med .app-badge { background: var(--color-sev-medium); color: #8A5A00; }
.sev-low .app-badge { background: var(--color-sev-low); color: #6A6A1F; }
.app-type { font-size: 11px; padding: 0 var(--space-sm); border-radius: var(--radius-full); background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-slate); }
/* Part 2 §11 action bar: status on the left, the one primary on the far right. */
.app-actionbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--color-surface); border-top: 1px solid var(--color-border); }
.app-status { font-size: 11px; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-btn { flex-shrink: 0; font-size: 11px; font-weight: 500; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-sm); background: var(--color-ember-hover); color: var(--color-text-inverse); }
.app-caption { font-size: 11px; color: var(--site-inverse-faint); margin-top: var(--space-sm); font-style: italic; }

/* ── Proof strip ─────────────────────────────────────────────────────────── */
.proof { background: var(--color-obsidian-light); }
.proof-inner { max-width: var(--site-page-width); margin: 0 auto; padding: var(--space-2xl); text-align: center; }
.proof-label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--site-inverse-muted); margin-bottom: var(--space-lg); }
.proof-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); }
.proof-logo {
  font-size: 15px; font-weight: 500; color: var(--color-text-inverse);
  border: 1px solid var(--site-line-inverse-strong); border-radius: var(--radius-full); padding: var(--space-sm) var(--space-lg);
}

/* ── Generic marketing section shell + headings ──────────────────────────── */
.ff-section { max-width: var(--site-page-width); margin: 0 auto; padding: var(--space-4xl) var(--space-2xl); }
/* ember-dark, not ember: brand guide §8 keeps ember on light grounds to large
   text and icons. The security band's eyebrow is overridden to ember-light. */
.ff-eyebrow { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ember-dark); margin-bottom: var(--space-sm); }
.ff-title { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: var(--space-md); }
.ff-lede { font-size: 17px; line-height: 1.6; color: var(--color-muted); max-width: 720px; }

/* ── Positioning band ────────────────────────────────────────────────────── */
.positioning { background: var(--color-surface); }
.claim-chips { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-xl); }
.claim-chip { font-size: 14px; font-weight: 500; color: var(--color-ink); background: var(--color-page-bg); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: var(--space-sm) var(--space-lg); }
.claim-chip::before { content: "\2713"; color: var(--color-ember); font-weight: 600; margin-right: var(--space-sm); }

/* ── Product grid ────────────────────────────────────────────────────────── */
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); margin-top: var(--space-2xl); }
/* Not clickable as a whole, so no hover lift (interaction-patterns-guide §3). */
.product-card { display: flex; flex-direction: column; background: var(--site-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-sm); }
.product-sublabel { font-size: 15px; font-weight: 400; letter-spacing: 0.04em; line-height: 1.6; color: var(--color-ember-dark); margin-bottom: var(--space-sm); }
/* Part 1 §6 badge: tint panel and border, ink text, status in a 6px dot. */
.product-status {
  align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-sm);
  font-size: 11px; font-weight: 500; letter-spacing: 0.03em; color: var(--color-ink);
  background: var(--color-success-bg); border: 1px solid var(--color-success-border);
  border-radius: var(--radius-full); padding: var(--space-xs) var(--space-md); margin-bottom: var(--space-md);
}
.product-status::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-success); }
/* Not yet generally available: a neutral panel, the brand dot, not green. */
.product-status-early { background: var(--color-surface); border-color: var(--color-border); }
.product-status-early::before { background: var(--color-ember); }
.product-oneliner { font-size: 15px; color: var(--color-ink); line-height: 1.6; margin-bottom: var(--space-xl); flex: 1; }
.product-card .ff-btn { align-self: flex-start; }
.roadmap-strip { margin-top: var(--space-xl); font-size: 14px; color: var(--color-muted); font-style: italic; }

/* ── How it works ────────────────────────────────────────────────────────── */
.how { background: var(--color-surface); }
.how-row { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-2xl); }
.how-node { flex: 1; min-width: 200px; background: var(--color-page-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-lg); }
.how-node .how-name { display: block; font-size: 15px; font-weight: 600; color: var(--color-obsidian); margin-bottom: var(--space-xs); }
.how-node .how-desc { font-size: 13px; color: var(--color-muted); }

/* ── Security band ───────────────────────────────────────────────────────── */
.security { background: var(--color-obsidian); color: var(--color-text-inverse); }
.security .ff-eyebrow { color: var(--color-ember-light); }
.security .ff-title { color: var(--color-text-inverse); }
.security .ff-lede { color: var(--site-inverse-strong); }
.security-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-lg); margin-top: var(--space-2xl); }
.security-card { background: var(--color-obsidian-light); border: 1px solid var(--site-line-inverse); border-radius: var(--radius-lg); padding: var(--space-xl); }
.security-card h3 { font-size: 16px; font-weight: 600; color: var(--color-text-inverse); margin-bottom: var(--space-sm); }
.security-card p { font-size: 14px; color: var(--site-inverse-strong); line-height: 1.6; }
.security-card .mark { color: var(--color-ember-light); font-weight: 600; }

/* ── FAQ / objections ────────────────────────────────────────────────────── */
.faq-list { margin-top: var(--space-2xl); max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--color-border); padding: var(--space-lg) 0; }
.faq-item summary { font-size: 17px; font-weight: 500; color: var(--color-obsidian); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-md); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--color-ember); font-weight: 600; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { font-size: 15px; color: var(--color-muted); line-height: 1.6; margin-top: var(--space-md); }

/* ── About ───────────────────────────────────────────────────────────────── */
.about-body { font-size: 17px; line-height: 1.7; color: var(--color-ink); max-width: 720px; margin-top: var(--space-md); }

/* ── Final CTA band ──────────────────────────────────────────────────────── */
/* ember-hover, not ember: the 12px note under the button needs 4.5, and
   text-inverse reaches 3.78 on ember, 4.86 on ember-hover. */
.cta-band { background: var(--color-ember-hover); color: var(--color-text-inverse); text-align: center; }
.cta-band .inner { max-width: var(--site-page-width); margin: 0 auto; padding: var(--space-4xl) var(--space-2xl); }
.cta-band h2 { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: var(--space-lg); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer { background: var(--color-obsidian); color: var(--site-inverse-muted); padding: var(--space-2xl); font-size: 13px; text-align: center; letter-spacing: 0.02em; }
.site-footer strong { color: var(--color-text-inverse); font-weight: 500; }
.site-footer a { color: var(--color-ember-light); }
.site-footer .sep { margin: 0 var(--space-sm); opacity: 0.4; }

/* ── Contact form (on the ember band, index.html #contact) ──────────────── */
/* Labels are text-inverse on ember-hover (4.86). Fields are white with ink
   text; focus uses the band's text-inverse ring, like its buttons. */
.contact-intro { margin: 0 auto var(--space-2xl); }
.contact-form { max-width: 720px; margin: 0 auto; text-align: left; display: flex; flex-direction: column; gap: var(--space-lg); }
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.contact-field { display: flex; flex-direction: column; gap: var(--space-xs); }
.contact-field label { font-size: 14px; font-weight: 500; color: var(--color-text-inverse); }
.contact-optional { font-weight: 400; }
.contact-field input, .contact-field select, .contact-field textarea {
  font-family: var(--font-web); font-size: 16px; color: var(--color-ink);
  background: var(--site-surface-raised); border: 1px solid var(--color-ember-dark);
  border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); min-height: 44px; width: 100%;
}
.contact-field textarea { resize: vertical; line-height: 1.5; }
.contact-field input:focus-visible, .contact-field select:focus-visible, .contact-field textarea:focus-visible {
  outline: 2px solid var(--color-text-inverse); outline-offset: 2px;
}
.cta-band button:focus-visible { outline-color: var(--color-text-inverse); }
/* Off-screen, not display:none: some bots skip fields that are not rendered. */
.contact-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-actions { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.contact-actions .ff-btn[disabled] { opacity: 0.7; cursor: progress; }
.contact-status { font-size: 15px; font-weight: 500; color: var(--color-text-inverse); }
.contact-fineprint { font-size: 13px; color: var(--color-text-inverse); }
.cta-band .contact-fineprint a { color: var(--color-text-inverse); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 600px) {
  .contact-row { grid-template-columns: 1fr; }
}

/* ── 404 page ────────────────────────────────────────────────────────────── */
.not-found { min-height: 60vh; }
.not-found .ff-lede { margin-bottom: var(--space-2xl); }

/* ── Legal pages (privacy.html) ──────────────────────────────────────────── */
/* Long-form reading: the about-body measure (720px) inside the page column. */
.legal > * { max-width: 720px; }
.legal-meta { font-size: 14px; color: var(--color-muted); margin-bottom: var(--space-xl); }
.legal section { margin-top: var(--space-2xl); }
.legal h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--color-obsidian); margin-bottom: var(--space-md); }
.legal h3 { font-size: 16px; font-weight: 600; color: var(--color-obsidian); margin: var(--space-lg) 0 var(--space-xs); }
.legal p, .legal li { font-size: 16px; line-height: 1.7; color: var(--color-ink); }
.legal p + p { margin-top: var(--space-md); }
.legal ul { padding-left: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-sm); }
.legal a { color: var(--color-ember-dark); text-decoration: underline; text-underline-offset: 2px; }
.legal code { font-family: var(--font-mono); font-size: 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 var(--space-xs); }

/* ── Konami panel (site.js) ──────────────────────────────────────────────── */
/* standard-gaps "Konami panel": a centred dialog, Esc and backdrop close it. */
.konami-backdrop {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: var(--space-lg); background: rgba(17,24,39,0.55);
}
.konami-panel {
  width: min(480px, 100%); max-height: 100%; overflow-y: auto;
  background: var(--site-surface-raised); color: var(--color-ink);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
}
.konami-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.konami-head h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--color-obsidian); }
.konami-close { min-height: 34px; padding: var(--space-sm) var(--space-md); background: transparent; color: var(--color-ink); border-color: var(--color-border); }
.konami-close:hover { background: var(--color-surface); }
.konami-credits { margin-top: var(--space-md); font-size: 14px; }
.konami-section { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.konami-h { margin-bottom: var(--space-sm); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); }
.konami-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-xs) var(--space-lg); font-size: 13px; }
.konami-facts dt { color: var(--color-muted); }
.konami-facts dd { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.konami-facts code { font-family: var(--font-mono); font-size: 12px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
/* standard-gaps decision #8: 900 stacks grids, 760 is the phone shell. */
@media (max-width: 900px) {
  .site-nav-inner { padding: 0 var(--space-xl); }
  .site-nav-links { margin-left: var(--space-lg); gap: var(--space-lg); }
  .ff-hero { grid-template-columns: 1fr; gap: var(--space-2xl); padding: var(--space-3xl) var(--space-xl); }
  .ff-hero-title { font-size: 36px; }
  .ff-section { padding: var(--space-3xl) var(--space-xl); }
  .cta-band .inner, .proof-inner { padding-left: var(--space-xl); padding-right: var(--space-xl); }
}

/* Phone shell. The links collapse behind the toggle only once site.js has
   run (it adds .js to <html> in the head); without JavaScript they stay
   listed. */
@media (max-width: 760px) {
  /* gap sm: mark, demo button and toggle need 347px at gap lg and a 390px
     phone has 342, so the toggle used to wrap to a second row. */
  .site-nav-inner { flex-wrap: wrap; gap: var(--space-sm); }
  .site-nav-links {
    order: 3; width: 100%; margin-left: 0; margin-top: var(--space-sm);
    flex-direction: column; gap: var(--space-sm);
  }
  .js .site-nav-links { display: none; }
  .js .site-nav-links.is-open { display: flex; }
  .site-nav-cta { margin-left: 0; }
  .js .site-nav-toggle { display: inline-flex; margin-left: 0; order: 2; }
  .site-nav-brand { margin-right: auto; }
}

/* standard-gaps #8: 600px is where content becomes the phone layout. The
   illustration keeps its story (the review card and the ranked matches) and
   drops the sidebar and the Type column, so it fits a phone column without
   scrolling the page sideways. */
@media (max-width: 600px) {
  .app-sidebar, .app-tbl .c-type { display: none; }
  .app-body { height: auto; }
}