/* legal.bundle.b5-20260710.css — fonts + tokens + legal re-skin, one request */

/* ============================================================
   tryboringai.com — @font-face (self-hosted, latin subset)
   Faces per design-card-boring.md §2 (AMENDED 2026-07-09):
     Instrument Serif 400            (display serif — roman only;
                                      the accent device is a mark, not a style — B-1c)
     Space Grotesk    400/500/700    (body/UI grotesk — variable file, wght 300–700)
     Space Mono       400/700        (annotation layer — B-1b; IBM Plex Mono is
                                      GLP-house DNA and never appears on this site)
   All files self-hosted woff2 (latin subset). OFL.
   PRELOAD (the two above-the-fold display files):
     <link rel="preload" href="/assets/fonts/instrument-serif/instrument-serif-latin-400.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="/assets/fonts/space-grotesk/space-grotesk-latin-var.woff2" as="font" type="font/woff2" crossorigin>
   ============================================================ */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif/instrument-serif-latin-400.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;
}

/* Variable file: wght axis 300–700 covers the card's 400 / 500 / 700 */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk/space-grotesk-latin-var.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;
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/space-mono/space-mono-latin-400.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;
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/space-mono/space-mono-latin-700.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;
}


/* ============================================================
   flagship-v2 — shared reset/base
   Consumed by all three sites AFTER the site's fonts/<site>.css
   and BEFORE (or with) tokens/<site>.css.
   Pure CSS: copies verbatim into any static public/ tree.
   Rules sourced from playbook-distilled.md §1.3–1.5 (rem-based fluid
   type, reduced-motion baseline, WCAG AA focus, no template defaults).
   ============================================================ */

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* rem-based fluid type foundation: never lock root font-size in px */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: var(--text-body, 1rem);
  line-height: var(--leading-body, 1.6);
  background: var(--bg, #fff);
  color: var(--text, #111);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
  overflow-wrap: break-word;
}

p {
  overflow-wrap: break-word;
}

a {
  color: inherit;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

table {
  border-collapse: collapse;
}

/* ---- Accessibility baseline ---- */

/* WCAG-visible focus, tokenized per site accent */
:focus-visible {
  outline: 2px solid var(--focus-ring, var(--accent, currentColor));
  outline-offset: 2px;
}

/* Reduced-motion CSS floor (WCAG 2.3.3). The JS layer additionally uses
   gsap.matchMedia to REMOVE parallax/pinning entirely — this rule is only
   the no-JS / CSS-animation floor, per playbook §1.4. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Shared primitives (parameterized only by site tokens) ---- */

/* Hairline rule — the only line the flagship sites draw */
.rule {
  border: 0;
  border-top: var(--hairline, 1px) solid var(--rule, currentColor);
}

/* 2–4% CSS noise grain overlay (playbook §1.4) — free, never baked into
   assets. Opacity is a brand token (--grain-opacity). Apply the class to a
   band; the overlay never intercepts input. */
.grain {
  position: relative;
  isolation: isolate;
}

.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--grain-opacity, 0.03);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}

/* Mono label chrome: chips/indices/locators. Chips encode state, price, or
   eligibility only — never enthusiasm (all three cards). */
.mono {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-label, 0.8125rem);
  letter-spacing: var(--tracking-label, 0.08em);
  font-variant-numeric: tabular-nums;
}

.mono--caps {
  text-transform: uppercase;
}

/* Content measure for long-form / legal fine print */
.measure {
  max-width: var(--measure, 68ch);
}

/* Layout container: 12-col grid ceiling shared by the ledger systems */
.container {
  width: 100%;
  max-width: var(--max-width, 75rem);
  margin-inline: auto;
  padding-inline: var(--gutter, clamp(1rem, 4vw, 2.5rem));
}

/* Screen-reader-only utility (locators/indices are presentational text) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   BRAND TOKENS — tryboringai.com (Boring AI, B-4)
   Source of truth: design-card-boring.md ("The Work Order")
   Values marked CARD are verbatim from the card; values marked DERIVED
   fill gaps the card leaves open (comment says from what) — adjust only
   with a card change.
   Load order: fonts/boring.css -> tokens/base.css -> this file.
   ============================================================ */

:root {
  /* ---------------- TYPE FAMILIES (CARD §2) ---------------- */
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif; /* H1, H2 statements, giant prices; never below 2rem */
  --font-body: "Space Grotesk", system-ui, "Helvetica Neue", sans-serif; /* body, ledger descriptions, CTAs (500), forms, nav */
  --font-mono: "Space Mono", ui-monospace, "SF Mono", monospace;         /* indices, meta, receipt, legal stamp — B-1b: Space Mono; IBM Plex Mono is GLP-house only */

  --weight-body: 400;        /* CARD */
  --weight-ui: 500;          /* CARD: buttons/CTAs */
  --weight-strong: 700;      /* CARD: inline <strong> only */
  --weight-mono: 400;        /* CARD */
  --weight-mono-em: 700;     /* CARD (amended): Space Mono ships 400/700 only */

  /* ---------------- FLUID TYPE SCALE (CARD §2, verbatim) ----------------
     Mechanical clamp(), rem-based, verified 375->2560px; step ratio ~1.42
     (>= the 1.333 floor, playbook §1.3). */
  --step-display: clamp(3.05rem, 1.9rem + 6.8vw, 8rem);      /* H1, closer — 128px desktop */
  --step-3: clamp(2.15rem, 1.41rem + 3.15vw, 4.25rem);       /* H2 serif statements — 68px desktop (B-3 regenerated) */
  --step-2: clamp(1.5rem, 1.24rem + 1.13vw, 2.25rem);        /* ledger-row heads, H3 — 36px desktop (B-3 regenerated) */
  --step-1: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);       /* body */
  --step-0: 0.9375rem;                                       /* small body, form notes */
  --step-label: 0.8125rem;                                   /* mono labels/indices — fixed */

  /* Display:label contrast ratio ~9.8:1 at desktop (128px/13px).
     CARD floor: never below 8:1. Exposed for QA tooling: */
  --scale-contrast-ratio: 9.8;

  /* Type detail */
  --text-body: var(--step-1);
  --text-label: var(--step-label);
  --leading-display: 1.05;      /* DERIVED — card silent; tight display leading, Locomotive lane */
  --leading-body: 1.6;          /* DERIVED — playbook body default */
  --tracking-label: 0.08em;     /* CARD: mono letter-spacing; uppercase only at label size */

  /* ---------------- PALETTE (CARD §4, verbatim) ---------------- */
  /* Ink register (dark bands: hero, fragment story, closer) */
  --ink-900: #07111f;            /* dark band bg — existing brand token, keep */
  --ink-700: #0e1c30;            /* raised panels on dark */
  --text: #f8fafc;               /* text on ink — existing token, keep */
  --text-dim: #8fa3bd;           /* two-tone de-emphasis on ink */
  --amber: #ffb020;              /* THE accent — existing token, keep */
  --rule: rgba(248, 250, 252, 0.16);  /* hairlines on ink */
  --rule-hot: #ffb020;           /* hover rule state */

  /* Paper register (light editorial bands: process, capabilities, pricing, booking) */
  --paper: #f4f1ea;              /* warm work-order paper */
  --paper-ink: #111827;          /* text on paper */
  --paper-dim: #5b6472;          /* de-emphasis on paper */
  --rule-paper: rgba(17, 24, 39, 0.18); /* hairlines on paper */

  /* Semantic aliases (base.css contract; qa_gate.py keys map:
     background=--ink-900, foreground=--text, accent=--amber) */
  --bg: var(--ink-900);
  --surface: var(--ink-700);
  --accent: var(--amber);
  --text-2: var(--text-dim);
  --focus-ring: var(--amber);

  /* CTA tokens (CARD §8): on ink -> amber block + ink text;
     ghost = hairline outline. CTAs NEVER animate position/paint. */
  --cta-bg: var(--amber);
  --cta-text: #07111f;
  --cta-ghost-border: var(--rule);
  --cta-ghost-text: var(--text);

  /* CONTRAST NOTES (CARD §4, WCAG AA gate):
     amber #ffb020 on #07111f ~10.9:1 -> text/CTAs allowed on dark.
     amber on paper FAILS AA for text -> on paper bands amber is marks only
     (rule highlights, the deposit stamp, the ledger double-rule underscore —
     amber never sets glyphs on paper; B-1c). No purple-blue anywhere. No gradients on type
     or backgrounds. */

  /* ---------------- SPACING ---------------- */
  --space-1: 0.25rem;   /* DERIVED mechanical ramp (playbook: spacing scale is a token layer) */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --row-pad: clamp(1.5rem, 3vw, 2.75rem);          /* CARD §3: ledger-row block padding */
  --band-pad: clamp(4rem, 9vw, 8rem);              /* DERIVED: dark/paper band rhythm */
  --gutter: clamp(1rem, 4vw, 2.5rem);              /* DERIVED */
  --max-width: 75rem;                              /* DERIVED: 1200px ceiling, sibling cards */
  --ledger-cols: 6ch 1fr max-content;              /* CARD §3: grid-template-columns */

  /* ---------------- RADII (CARD §3/§8) ---------------- */
  --radius-0: 0;        /* ledger rows: no card backgrounds, no boxes, no radius */
  --radius-cta: 2px;    /* CARD §8: "2px radius (stamp, not pill)" */
  /* BAN: uniform 16px-radius / 24px-padding cards (§1.5) */

  /* ---------------- HAIRLINES ---------------- */
  --hairline: 1px;      /* CARD §3: border-top: 1px solid var(--rule) */

  /* ---------------- GRAIN (CARD §3) ---------------- */
  --grain-opacity: 0.03; /* 3% CSS noise — dark bands ONLY, never paper, never forms */

  /* ---------------- MOTION TOKENS (CARD §5) ---------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* CARD: expo-out family — entrances */
  --ease-in: cubic-bezier(0.64, 0, 0.78, 0);    /* CARD: exits. Never default ease/linear */
  --dur-nav: 100ms;         /* CARD M4: nav link underline */
  --dur-button: 120ms;      /* CARD M4: button microstate */
  --dur-row: 150ms;         /* CARD M4: ledger-row hover (index nudge + rule-hot) */
  --dur-transition: 400ms;  /* DERIVED: playbook 300–500ms transitions band */
  --dur-reveal: 900ms;      /* CARD M1: masked line reveal 0.9s */
  --stagger-reveal: 80ms;   /* CARD M1 */
  --parallax-max: 6%;       /* CARD M3: hero media layer only, <=6% viewport */
  --hover-nudge: 4px;       /* CARD M4: index translateX */
}

/* ---------------- BAND REGISTERS ----------------
   Hard cuts between ink-dark and paper-light bands (CARD §3) — no gradient
   transitions, no divider SVGs. Scope flips the semantic aliases. */
[data-band="paper"] {
  --bg: var(--paper);
  --text: var(--paper-ink);
  --text-2: var(--paper-dim);
  --rule: var(--rule-paper);
  --grain-opacity: 0;               /* grain on dark bands only */
  /* CTAs on paper are ink-filled (amber-as-text fails AA on paper) */
  --cta-bg: var(--paper-ink);
  --cta-text: var(--paper);
  --cta-ghost-border: var(--rule-paper);
  --cta-ghost-text: var(--paper-ink);
  background: var(--bg);
  color: var(--text);
}

[data-band="ink"] {
  background: var(--bg);
  color: var(--text);
}


/* ============================================================
   tryboringai.com — legal/support re-skin (B-5, 2026-07-10)
   Card §7.7: CONTENT UNTOUCHED — this stylesheet re-skins the existing
   legal markup (process-card/section-heading classes) as work-order
   paper: paper band, ruled headings, mono meta. No motion JS, no gtag,
   no hero media on these pages.
   Load order: fonts/boring.css -> tokens/base.css -> tokens/boring.css
   -> this file.
   ============================================================ */

body {
  background: var(--paper);
  color: var(--paper-ink);
}

::selection { background: var(--amber); color: var(--ink-900); }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 99;
  background: var(--amber);
  color: var(--ink-900);
  padding: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--step-label);
}

.skip-link:focus { left: 0; }

/* header — ink bar over paper */
.site-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
  padding: var(--space-4) var(--gutter);
  background: var(--ink-900);
  color: var(--text);
  border-bottom: var(--hairline) solid var(--rule);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  text-decoration: none;
  font-weight: var(--weight-ui);
  margin-right: auto;
}

.brand-mark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--amber);
}

.site-header nav {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.site-header nav a {
  text-decoration: none;
  color: var(--text-dim);
  font-size: var(--step-0);
  border-bottom: var(--hairline) solid transparent;
}

.site-header nav a:hover { color: var(--text); border-bottom-color: var(--amber); }

.nav-cta {
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: var(--tracking-label);
  color: var(--text);
  text-decoration: none;
  border: var(--hairline) solid var(--rule);
  padding: 0.5rem 0.9rem;
  border-radius: 2px;
}

@media (max-width: 720px) {
  .site-header nav { display: none; }
}

/* main shell */
main { display: block; }

.section-shell {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--space-7) var(--gutter) var(--space-8);
}

.section-heading { max-width: 62rem; }

/* mono kicker (renamed from .eyebrow at re-skin; text content unchanged) */
.page-kicker, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper-dim);
  border-top: var(--hairline) solid var(--rule-paper);
  padding-top: var(--space-3);
  margin-bottom: var(--space-4);
}

h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: 1.08;
  max-width: 24ch;
  margin-bottom: var(--space-4);
}

.section-heading > p {
  font-size: var(--step-0);
  color: var(--paper-dim);
  max-width: 68ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.button {
  display: inline-block;
  font-weight: var(--weight-ui);
  font-size: var(--step-0);
  text-decoration: none;
  padding: 0.8rem 1.4rem;
  border-radius: 2px;
  border: var(--hairline) solid transparent;
}

.button-primary { background: var(--paper-ink); color: var(--paper); }

.button-ghost { border-color: var(--rule-paper); color: var(--paper-ink); }

/* the legal sections render as ledger rows, not cards */
.process-grid {
  margin-top: var(--space-6);
  border-bottom: var(--hairline) solid var(--rule-paper);
}

.process-card {
  display: grid;
  grid-template-columns: 6ch 1fr;
  gap: var(--space-2) var(--space-5);
  border-top: var(--hairline) solid var(--rule-paper);
  padding-block: var(--space-5);
  background: none;
}

.process-card > span {
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: var(--tracking-label);
  color: var(--paper-dim);
  padding-top: 0.35em;
}

.process-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
  grid-column: 2;
  margin-bottom: 0.35em;
}

.process-card p {
  grid-column: 2;
  font-size: var(--step-0);
  color: var(--paper-dim);
  max-width: 68ch;
}

.process-card p + p { margin-top: var(--space-3); }

.process-card.policy-detail { margin-top: 0; }

.intake-note, .plain-email {
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.04em;
  color: var(--paper-dim);
}

.intake-note { margin-top: var(--space-5); }

.section-shell > p {
  font-size: var(--step-0);
  color: var(--paper-ink);
  max-width: 68ch;
  margin-top: var(--space-4);
}

a { color: inherit; }

/* footer — ink stamp bar */
.site-footer {
  background: var(--ink-900);
  color: var(--text);
  border-top: var(--hairline) solid var(--rule);
  padding: var(--space-6) var(--gutter);
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--text);
  text-decoration: none;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-block: var(--space-4);
  border-top: var(--hairline) solid var(--rule);
  padding-top: var(--space-4);
}

.footer-links a {
  text-decoration: none;
  color: var(--text-dim);
  font-size: var(--step-0);
}

.footer-links a:hover { color: var(--text); }

.footer-note {
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.04em;
  color: var(--text-dim);
  max-width: none;
}