/* Trescudo — component styles.
   Reads the colour, spacing and radius custom properties from tokens.css (generated from tokens.json).
   .grid-bg, .eyebrow, .btn-primary, .btn-ghost and .live-dot are copied from the site's src/styles.css;
   the .tr-* classes reproduce the Tailwind utility strings the site writes inline (each noted). */
@import "./fonts.css"; /* self-hosted IBM Plex (§15; @coo 75a904df). Was: Google Fonts @import. */

:root {
  --font-display: "IBM Plex Serif", Georgia, serif;
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* ---- base (src/styles.css @layer base) ---- */
*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }
body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
/* Intentional addition: the source sets no visible focus style. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* ---- utilities copied from src/styles.css ---- */
.grid-bg {
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--border) 60%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--border) 60%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, black 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at 70% 30%, black 20%, transparent 75%);
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
}
.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.4rem; border-radius: var(--radius);
  font-family: var(--font-sans); font-weight: 500; font-size: 0.9rem; line-height: 1.25rem;
  cursor: pointer; text-decoration: none;
}
.btn-primary {
  background: var(--primary); color: var(--primary-foreground);
  border: 0; transition: opacity .2s;
}
.btn-primary:hover { opacity: 0.88; }
.btn-ghost {
  background: transparent; border: 1px solid var(--border); color: var(--foreground);
  transition: border-color .2s;
}
.btn-ghost:hover { border-color: var(--primary); }
.btn-primary:disabled, .btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.875rem; } /* header CTA: !py-2 text-sm */

@keyframes pulse-dot { 0%,100% { opacity: .3 } 50% { opacity: 1 } }
.live-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 9999px; background: var(--signal);
  animation: pulse-dot 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; opacity: 1; } }

/* ---- composites (Tailwind strings from the routes, as plain CSS) ---- */
.tr-container { max-width: 72rem; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* live label: flex items-center gap-2 font-mono text-xs text-muted-foreground */
.tr-live { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--muted-foreground); text-transform: uppercase; }

/* PageHeader: relative overflow-hidden border-b; inner py-20 */
.tr-page-header { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.tr-page-header > .grid-bg { position: absolute; inset: 0; }
.tr-page-header__inner { position: relative; padding-top: 80px; padding-bottom: 80px; }
.tr-page-header h1 { margin-top: 16px; max-width: 48rem; font-size: 48px; line-height: 1; }
.tr-page-header .tr-lead { margin-top: 24px; max-width: 42rem; }
@media (max-width: 767px) { .tr-page-header h1 { font-size: 36px; line-height: 40px; } }

.tr-lead { font-size: 18px; line-height: 28px; color: var(--muted-foreground); }
.tr-muted { color: var(--muted-foreground); }
.tr-em { font-style: italic; color: var(--primary); }

/* Hero */
.tr-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.tr-hero { background: var(--background); } /* W-5e: the no-JS / no-WebGL ground (flat; no gradient) */
.tr-hero__field { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.tr-hero__mark { position: absolute; z-index: 1; right: -96px; top: 40px; width: 520px; opacity: .06; pointer-events: none; }
.tr-hero__inner { position: relative; z-index: 2; padding-top: 144px; padding-bottom: 144px; }
.tr-hero h1 { margin-top: 24px; max-width: 56rem; font-size: 72px; line-height: 1.05; }
.tr-hero .tr-lead { margin-top: 32px; max-width: 42rem; }
.tr-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
@media (max-width: 767px) {
  .tr-hero__inner { padding-top: 112px; padding-bottom: 112px; }
  .tr-hero h1 { font-size: 48px; }
}
@media (max-width: 1023px) { .tr-hero__mark { display: none; } }

/* Section heading block: eyebrow + h2 */
.tr-section { padding-top: 96px; padding-bottom: 96px; }
.tr-section h2 { margin-top: 16px; max-width: 42rem; font-size: 36px; line-height: 40px; }
@media (max-width: 767px) { .tr-section h2 { font-size: 30px; line-height: 36px; } }

/* Card: border border-border bg-card p-8 */
.tr-card { border: 1px solid var(--border); background: var(--card); color: var(--card-foreground); padding: 32px; }
.tr-index { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--primary); }
.tr-card h2, .tr-card h3 { margin-top: 16px; font-size: 20px; line-height: 28px; }
.tr-card .tr-desc { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--muted-foreground); }

/* Capability list: space-y-3 text-sm; bullet h-1 w-1 rounded-full bg-signal */
.tr-bullets { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
.tr-bullets li { display: flex; align-items: center; gap: 12px; }
.tr-bullets li::before { content: ""; width: 4px; height: 4px; border-radius: 9999px; background: var(--signal); flex-shrink: 0; }

/* Domain grid: grid gap-px overflow-hidden rounded-md border bg-border md:grid-cols-5; cell bg-card p-6 */
.tr-domain-grid { display: grid; gap: 1px; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--border); grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); }
.tr-domain-grid > div { background: var(--card); padding: 24px; }
.tr-domain-grid h3 { margin-top: 24px; font-size: 18px; line-height: 28px; }
.tr-domain-grid p { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
.tr-domain-grid--cols-3 { --cols: 3; } .tr-domain-grid--cols-4 { --cols: 4; } .tr-domain-grid--cols-6 { --cols: 6; } /* W-1b n69-1: no inline style under the CSP */
.tr-domain-grid--cols-5 { --cols: 5; }
@media (max-width: 767px) { .tr-domain-grid { grid-template-columns: 1fr; } }

/* Focus list: divide-y border-y; item flex gap-6 py-7; rule mt-2 h-px w-8 bg-primary */
.tr-focus-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.tr-focus-list li { display: flex; gap: 24px; padding: 28px 0; }
.tr-focus-list li + li { border-top: 1px solid var(--border); }
.tr-focus-list li::before { content: ""; margin-top: 8px; height: 1px; width: 32px; flex-shrink: 0; background: var(--primary); }
.tr-focus-list h3 { font-size: 20px; line-height: 28px; }
.tr-focus-list p { margin-top: 8px; color: var(--muted-foreground); }

/* Tag: rounded-sm border px-3 py-1.5 font-mono text-xs text-muted-foreground */
.tr-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-tag { display: inline-block; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 12px; font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--muted-foreground); }

/* Statement: max-w-4xl py-28 text-center */
.tr-statement { max-width: 56rem; margin: 0 auto; padding: 112px 24px; text-align: center; }
.tr-statement__was { margin-top: 32px; font-family: var(--font-display); font-size: 24px; line-height: 32px; color: var(--muted-foreground); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--primary) 60%, transparent); }
.tr-statement__now { margin-top: 16px; font-family: var(--font-display); font-size: 48px; line-height: 1; }
.tr-statement__note { margin: 32px auto 0; max-width: 36rem; color: var(--muted-foreground); }
@media (max-width: 767px) { .tr-statement__now { font-size: 36px; line-height: 40px; } }

/* Form: label text-sm muted; input mt-2 w-full border bg-background px-3 py-2 text-sm focus:border-primary */
.tr-field { display: block; font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
.tr-input {
  display: block; margin-top: 8px; width: 100%;
  border: 1px solid var(--input); border-radius: 0; background: var(--background);
  padding: 8px 12px; font: inherit; font-size: 14px; line-height: 20px; color: var(--foreground); outline: none;
}
.tr-input:focus { border-color: var(--primary); }
.tr-input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* W-5d: the ring the checklist asks for; .tr-input sets outline: none */
.tr-input[aria-invalid="true"] { border-color: var(--destructive); }
.tr-error { margin-top: 16px; font-size: 14px; line-height: 20px; color: var(--destructive); }

/* Site shell */
.tr-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--background) 85%, transparent); backdrop-filter: blur(8px); }
.tr-header__inner { display: flex; height: 64px; align-items: center; justify-content: space-between; }
.tr-brand { display: flex; align-items: center; gap: 12px; }
.tr-brand img { height: 32px; width: auto; }
.tr-wordmark { font-family: var(--font-display); font-size: 18px; line-height: 28px; letter-spacing: 0.025em; }
.tr-nav { display: flex; align-items: center; gap: 32px; font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
.tr-nav a { transition: color .15s; }
.tr-nav a:hover, .tr-nav a[aria-current="page"] { color: var(--foreground); }
@media (max-width: 767px) { .tr-nav { display: none; } }
/* W-5a mobile menu (tokens only): a <details> disclosure; the toggle reads like an eyebrow (mono 12px, uppercase); the
   panel is a full-width popover sheet under the 64px header, hairline-bordered, one link per row, accent fill on hover. */
.tr-menu { position: static; }
.tr-menu__toggle { list-style: none; cursor: pointer; padding: 8px 4px; font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
.tr-menu__toggle::-webkit-details-marker { display: none; }
.tr-menu[open] .tr-menu__toggle, .tr-menu__toggle:hover { color: var(--foreground); }
.tr-menu__panel { position: absolute; left: 0; right: 0; top: 64px; display: flex; flex-direction: column; background: var(--popover); border-bottom: 1px solid var(--border); padding: 8px 0; }
.tr-menu__panel > a { padding: 12px 24px; font-size: 16px; line-height: 24px; color: var(--muted-foreground); }
.tr-menu__panel > a:hover { background: var(--accent); color: var(--foreground); }
.tr-menu__panel > a[aria-current="page"] { color: var(--foreground); }
.tr-menu__cta { padding: 12px 24px 8px; }
/* Below 768px the header is brand + Menu; the one CTA moves to the end of the menu panel (one visible CTA at any width). */
@media (max-width: 767px) { .tr-header__cta { display: none; } }
@media (min-width: 768px) { .tr-menu { display: none; } }
.tr-footer { border-top: 1px solid var(--border); }
.tr-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 40px; padding-bottom: 40px; font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
.tr-footer__inner img { height: 24px; width: auto; }
.tr-footer a:hover { color: var(--foreground); }
.tr-credit { padding-left: 36px; margin-top: 8px; font-size: 12px; line-height: 16px; color: color-mix(in oklab, var(--muted-foreground) 60%, transparent); }
@media (max-width: 767px) { .tr-footer__inner { flex-direction: column; align-items: flex-start; } }

/* W-1a additions (tokens only, no new values). */
/* Footer links: visible at every width (.tr-nav hides below 768px). Source: flex flex-wrap gap-6 */
.tr-footer__links { display: flex; flex-wrap: wrap; gap: 24px; }
/* Owner line: required text, so full muted-foreground (6.3:1), never the 60% .tr-credit (3.1:1). brand-book "States and accessibility" */
.tr-owner { padding-left: 36px; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }

/* W-1b layout classes for the ported pages (tokens only; each notes the source Tailwind string). */
/* Section body: heading-to-content 56px (brand book Layout; source mt-14) */
.tr-section__body { margin-top: 56px; }
/* Tinted band: border-y border-border bg-card/40 */
.tr-band { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--card) 40%, transparent); }
/* Split: grid gap-16 py-24 md:grid-cols-[1fr_1.4fr] */
.tr-split { display: grid; gap: 64px; padding-top: 96px; padding-bottom: 96px; }
.tr-split h2 { margin-top: 16px; font-size: 36px; line-height: 40px; }
.tr-split .tr-lead { margin-top: 24px; }
@media (min-width: 768px) { .tr-split { grid-template-columns: 1fr 1.4fr; } }
/* Split rows: a stack of compact Split rows between hairlines (About; @cmo Q3 on #69) */
.tr-split--row { padding-top: 48px; padding-bottom: 48px; }
.tr-split--row h2 { margin-top: 0; font-size: 24px; line-height: 32px; }
.tr-split--row .tr-lead { margin-top: 0; }
@media (max-width: 767px) { .tr-split--row { gap: 16px; } }
.tr-split--row + .tr-split--row { border-top: 1px solid var(--border); }
.tr-rows { padding-top: 32px; padding-bottom: 80px; }
@media (max-width: 767px) { .tr-split h2 { font-size: 30px; line-height: 36px; } }
/* One shrinkable column below 768px: an implicit grid column grows to its longest word and pushes the page
   wider than a phone (measured at 375px on /contact, W-1b). */
@media (max-width: 767px) { .tr-split, .tr-two-col, .tr-card-grid { grid-template-columns: minmax(0, 1fr); } } /* phones only: a plain rule here overrode the 768px+ columns of .tr-split (measured W-1b) */
/* Two columns: grid gap-12 py-20 md:grid-cols-2 (contact: gap-10) */
.tr-two-col { display: grid; gap: 48px; padding-top: 80px; padding-bottom: 80px; }
.tr-two-col--tight { gap: 40px; }
@media (min-width: 768px) { .tr-two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Card grid: grid gap-px py-20 md:grid-cols-3 */
.tr-card-grid { display: grid; gap: 1px; padding-top: 80px; padding-bottom: 80px; }
@media (min-width: 768px) { .tr-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* CTA band: flex flex-col items-start justify-between gap-8 py-20 md:flex-row md:items-center */
.tr-cta-band { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 32px; padding-top: 80px; padding-bottom: 80px; }
.tr-cta-band h2 { margin-top: 16px; font-size: 36px; line-height: 40px; }
@media (max-width: 767px) { .tr-cta-band h2 { font-size: 30px; line-height: 36px; } } /* W-5d: section-title steps down on mobile */
.tr-cta-band .tr-actions { margin-top: 0; }
@media (min-width: 768px) { .tr-cta-band { flex-direction: row; align-items: center; } }
/* Form rows: mt-6 grid gap-4 sm:grid-cols-2; stacked fields 16px apart */
.tr-field-row { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 640px) { .tr-field-row--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tr-form-note { margin-top: 16px; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
/* Follow links: font-display text-2xl */
.tr-follow { display: grid; gap: 24px; margin-top: 24px; }
.tr-follow a { font-family: var(--font-display); font-size: 24px; line-height: 32px; }
@media (max-width: 767px) { .tr-follow a { font-size: 20px; line-height: 28px; } }
.tr-follow a:hover { color: var(--primary); }
.tr-follow p { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
/* A column heading inside .tr-two-col (source: "Recurring themes", font-display text-2xl), tags 24px below */
.tr-two-col h2 { font-size: 24px; line-height: 32px; }
.tr-two-col h2 + .tr-tags { margin-top: 24px; }
.tr-two-col .tr-tags + .tr-lead { margin-top: 32px; }
/* Briefing list (W-3a fills it): divide-y; date in mono label */
.tr-list { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--border); }
.tr-list li { padding: 20px 0; border-bottom: 1px solid var(--border); }

/* A link inside running text must look like a link without relying on colour (WCAG 1.4.1): underline in
   foreground, hover to primary (brand book: link hover). C-1, the About corrections address. */
.tr-lead a, .tr-desc a { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tr-lead a:hover, .tr-desc a:hover { color: var(--primary); }

/* /privacy (and W-3a briefings): long-form legal or editorial text. Reading width; structure from hairlines. */
.tr-prose { max-width: 760px; padding-top: 48px; padding-bottom: 48px; }
.tr-prose section { margin-top: 48px; }
.tr-prose h2 { margin-top: 48px; font-size: 24px; line-height: 32px; } /* W-5d: title-lg (was 28px, off the scale) */
.tr-prose section > h2 { margin-top: 0; }
.tr-prose p { margin-top: 20px; font-size: 18px; line-height: 30px; color: var(--foreground); }
.tr-prose .tr-desc { margin-top: 0; font-size: 14px; line-height: 20px; color: var(--muted-foreground); font-family: var(--font-mono); }
.tr-prose ul { margin: 20px 0 0; padding-left: 20px; }
.tr-prose li { margin-top: 8px; font-size: 18px; line-height: 30px; color: var(--foreground); }
.tr-prose a { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.tr-prose a:hover { color: var(--primary); }
/* A table scrolls inside its own box on a phone, never the page. */
.tr-table-wrap { margin-top: 24px; overflow-x: auto; }
.tr-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--border); font-size: 16px; line-height: 24px; }
.tr-table th { text-align: left; padding: 12px 16px 12px 0; font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); border-bottom: 1px solid var(--border); }
.tr-table td { vertical-align: top; padding: 16px 16px 16px 0; color: var(--foreground); border-bottom: 1px solid var(--border); min-width: 160px; }
/* On a phone, a table row becomes a stack: each cell is a block with its column name above it (data-label). */
@media (max-width: 767px) {
  .tr-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tr-table, .tr-table tbody, .tr-table tr, .tr-table td { display: block; width: 100%; }
  .tr-table tr { padding: 8px 0; border-bottom: 1px solid var(--border); }
  .tr-table td { min-width: 0; padding: 8px 0; border-bottom: 0; }
  .tr-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
}

/* W-3a briefings: the subset's other blocks. A quote sits between two hairlines (never a coloured left border). */
.tr-prose h3 { margin-top: 32px; font-size: 20px; line-height: 28px; } /* W-5d: title (was 22px, off the scale) */
.tr-prose blockquote { margin: 24px 0 0; padding: 4px 0 20px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.tr-prose blockquote p { color: var(--muted-foreground); }
.tr-prose code { font-family: var(--font-mono); font-size: 0.9em; }
/* The meta line: no top space as the article's first line (/privacy "Last updated"), space after a briefing body. */
.tr-prose > .tr-desc:not(:first-child) { margin-top: 40px; }