/* 00-fonts.css */
/* Fonts, vendored.
   The woff2 files are copied out of the app's own @fontsource packages
   (roost/web/node_modules/@fontsource/{barlow,barlow-condensed,ibm-plex-mono}), so the site and the
   product are the same faces at the same weights. No Google Fonts, no CDN, no remote origin: the
   same rule the app holds (roost/CLAUDE.md invariant 2), applied here. Latin and latin-ext only. */

@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/barlow-latin-ext-400-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/barlow-latin-400-normal.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: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/barlow-latin-ext-500-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/barlow-latin-500-normal.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: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/barlow-latin-ext-600-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/barlow-latin-600-normal.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: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/barlow-latin-ext-700-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/barlow-latin-700-normal.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: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/barlow-condensed-latin-ext-600-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/barlow-condensed-latin-600-normal.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: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/barlow-condensed-latin-ext-700-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/barlow-condensed-latin-700-normal.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: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-ext-400-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-400-normal.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: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-ext-500-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-500-normal.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; }

/* 10-tokens.css */
/* ==========================================================================================
   Tokens. Two design systems, copied verbatim, neither invented.

   Block A: the Raven Forge design system (Downloads/RavenForge Design System.html, :root blocks).
            The site frame. Dark native, one signal accent, condensed caps, hairlines, square
            corners, mechanical motion.
   Block B: the Roost app (roost/web/src/index.css and roost/web/tailwind.config.ts), scoped to
            .roost-plane. The app's warm light plane, used wherever the site shows the product.

   Both share the accent: Raven Forge --signal-500 and the app's --accent are both #E2542A, which
   is why the two planes sit together without a bridge colour.
   ========================================================================================== */

/* ---------- A: Raven Forge, families ---------- */
:root {
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', 'Helvetica Neue', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', 'Consolas', monospace;
}

/* ---------- A: Raven Forge, colour ---------- */
:root {
  /* Base neutrals. RavenForge is dark-native. Cold, low-chroma, near-black. */
  --ink-900: #08090a;
  --ink-850: #0d0f10;
  --ink-800: #121415;
  --ink-700: #1a1d1f;
  --ink-600: #24282b;
  --ink-500: #343a3e;
  --ink-400: #4e565b;
  --steel-300: #7c868c;
  --steel-200: #a8b0b5;
  --bone-100: #d9dcdd;
  --bone-000: #f2f1ee;

  /* Signal. The one brand accent. Burnt RF orange, used sparingly. */
  --signal-600: #b83f1a;
  --signal-500: #e2542a;
  --signal-400: #f07a4f;
  --signal-tint: rgba(226, 84, 42, 0.12);

  /* Spectrum. Data-viz and status only. Never decoration. */
  --spectrum-cyan: #35c7d8;
  --spectrum-amber: #e8a33d;
  --spectrum-violet: #8f7cd8;
  --status-ok: #4fa96b;
  --status-warn: #e8a33d;
  --status-alert: #d93a3a;
  --status-idle: #7c868c;

  --surface-page: var(--ink-900);
  --surface-panel: var(--ink-800);
  --surface-raised: var(--ink-700);
  --surface-inset: var(--ink-850);
  --surface-invert: var(--bone-000);

  --text-primary: var(--bone-000);
  --text-secondary: var(--steel-200);
  --text-muted: var(--steel-300);
  --text-accent: var(--signal-500);
  --text-invert: var(--ink-900);

  --border-hairline: rgba(168, 176, 181, 0.16);
  --border-strong: rgba(168, 176, 181, 0.32);
  --border-accent: var(--signal-500);
  --focus-ring: var(--signal-400);

  --accent: var(--signal-500);
  --accent-hover: var(--signal-400);
  --accent-press: var(--signal-600);
  --overlay-scrim: rgba(8, 9, 10, 0.72);

  /* Added here, not in the source system: the accent carries white text at 3.79:1, short of 4.5.
     Roost ADR-0006 solved this in the app with --accentfill, the darkest shade that still reads as
     the brand. The same rule applies to a web page, so the site uses the app's corrected value for
     any surface with white text on it, and the designed accent everywhere else. */
  --accent-fill: #c74821;
  /* Also from ADR-0006: a control's own edge needs 3:1 against the surface behind it (WCAG 1.4.11),
     which a decorative hairline does not reach on the light plane. */
  --control-edge: #908d88;

  /* Status text on the dark plane, lightened so a label reads at 4.5:1 on ink.
     Same values the app's dark palette uses for chip ink (roost/web/src/index.css). */
  --status-alert-ink: #ff8a80;
  --status-warn-ink: #f5c451;
  --status-ok-ink: #6fd396;
}

/* ---------- A: Raven Forge, type ---------- */
:root {
  --type-display-1: 700 76px/0.92 var(--font-display);
  --type-display-2: 700 54px/0.96 var(--font-display);
  --type-display-3: 600 38px/1 var(--font-display);
  --type-heading-1: 600 28px/1.08 var(--font-display);
  --type-heading-2: 600 21px/1.16 var(--font-display);

  --type-body-lg: 400 19px/1.5 var(--font-body);
  --type-body: 400 16px/1.55 var(--font-body);
  --type-body-sm: 400 14px/1.5 var(--font-body);

  --type-mono-lg: 500 15px/1.4 var(--font-mono);
  --type-mono: 500 13px/1.4 var(--font-mono);
  --type-mono-sm: 500 11px/1.3 var(--font-mono);

  --track-display: -0.01em;
  --track-label: 0.14em;
  --track-eyebrow: 0.22em;

  --measure-prose: 62ch;
  --measure-narrow: 44ch;
}

/* ---------- A: Raven Forge, space, radius, line ---------- */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 168px;

  --section-pad-y: var(--space-10);
  --section-pad-y-tight: var(--space-8);
  --gutter: var(--space-6);
  --content-max: 1240px;
  --content-narrow: 720px;

  /* Hard-edged. 0 is the default; 4px is the ceiling. */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;

  --line-hairline: 1px;
  --line-strong: 2px;
  --line-rule: 3px;
}

/* ---------- A: Raven Forge, depth and surface treatment ---------- */
:root {
  --shadow-none: none;
  --shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.6);

  --scrim-bottom: linear-gradient(to top, rgba(8, 9, 10, 0.92) 0%, rgba(8, 9, 10, 0.55) 38%, rgba(8, 9, 10, 0) 78%);
  --scrim-flat: rgba(8, 9, 10, 0.6);
  --blur-header: saturate(120%) blur(14px);

  /* A 1px hairline lattice used behind technical sections. */
  --texture-grid: repeating-linear-gradient(to right, rgba(168, 176, 181, 0.07) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(to bottom, rgba(168, 176, 181, 0.07) 0 1px, transparent 1px 48px);
}

/* ---------- A: Raven Forge, motion. Mechanical: no bounce, no spring, no overshoot. ---------- */
:root {
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  --transition-control: color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}

/* ==========================================================================================
   B: the Roost app plane. Values from roost/web/src/index.css (the light plane, which is the
   app's default) and roost/web/tailwind.config.ts (the type scale, radii and shadows).
   Add class="roost-plane" to any block to make it a window into the app.
   ========================================================================================== */
.roost-plane {
  color-scheme: light;

  --app-page: #f2f1ee;
  --app-chrome: #f2f1ee;
  --app-panel: #ffffff;
  --app-inset: #e8e7e3;
  --app-line: #e0dedb;
  --app-linestrong: #cfcdc9;
  --app-control: #908d88;

  --app-ink: #08090a;
  --app-ink2: #343a3e;
  --app-muted: #4e565b;

  --app-accent: #e2542a;
  --app-accent-hover: #f07a4f;
  --app-accent-press: #b83f1a;
  --app-accent-tint: #fbe7e0;
  --app-accent-ink: #b83f1a; /* accent as text on light: 4.9:1 on #f2f1ee */
  --app-accent-fill: #c74821; /* white text sits on this, never on the designed accent */
  --app-violet: #6f5cbe;

  /* Status base hues: bars, arcs, dots. Never small text on light. */
  --app-hue-urgent: #d93a3a;
  --app-hue-attention: #e8a33d;
  --app-hue-good: #4fa96b;

  /* Status chips: tint plus accessible ink. */
  --app-urgent-fill: #fbe9e9;
  --app-urgent-ink: #b02f2f;
  --app-attention-fill: #faefd7;
  --app-attention-ink: #8a6220;
  --app-good-fill: #e6f3ea;
  --app-good-ink: #2c7546;
  --app-neutral-fill: #e8e7e3;
  --app-neutral-ink: #343a3e;

  /* The app's type scale: body never below 15px. */
  --app-type-display: 700 62px/1 var(--font-display);
  --app-type-h1: 600 32px/1.25 var(--font-display);
  --app-type-h2: 600 23px/1.2 var(--font-display);
  --app-type-h3: 600 16px/1.4 var(--font-body);
  --app-type-body: 400 15px/1.55 var(--font-body);
  --app-type-label: 500 13px/1.4 var(--font-body);
  --app-type-caption: 400 12px/1.45 var(--font-body);
  --app-type-data: 400 13px/1.45 var(--font-mono);

  /* Sharp, not pill: 2px controls and chips, 4px cards and panels. */
  --app-radius-ctl: 2px;
  --app-radius-card: 4px;

  --app-shadow-card: 0 1px 2px rgba(20, 21, 25, 0.04);
  --app-shadow-board: 0 1px 2px rgba(20, 21, 25, 0.04), 0 8px 24px -12px rgba(20, 21, 25, 0.12);
}

/* The one block that shows the app in dark. A chosen palette, never an inversion. */
.roost-plane[data-app-theme='dark'] {
  color-scheme: dark;
  --app-page: #08090a;
  --app-chrome: #0d0f10;
  --app-panel: #121415;
  --app-inset: #1a1d1f;
  --app-line: #24282b;
  --app-linestrong: #2e3337;
  --app-control: #626b71;
  --app-ink: #f2f1ee;
  --app-ink2: #a8b0b5;
  --app-muted: #7c868c;
  --app-accent-ink: #f07a4f;
  --app-accent-tint: rgba(226, 84, 42, 0.16);
  --app-urgent-fill: rgba(217, 58, 58, 0.16);
  --app-urgent-ink: #ff8a80;
  --app-attention-fill: rgba(232, 163, 61, 0.16);
  --app-attention-ink: #f5c451;
  --app-good-fill: rgba(79, 169, 107, 0.16);
  --app-good-ink: #6fd396;
  --app-neutral-fill: rgba(168, 176, 181, 0.16);
  --app-neutral-ink: #a8b0b5;
}

/* 20-site.css */
/* ==========================================================================================
   The Raven Forge frame. Every value here comes from the design system's component kit
   (Button, EyebrowLabel, IndexBadge, Panel, Section, SectionHeading, StatusTag, CapabilityBlock,
   CapabilityList, SpecRow, SpecTable, StatBlock, Hero, ProductCard, SiteHeader, SiteFooter,
   Wordmark). docs/design/README.md records which component each rule came from.
   ========================================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img,
svg {
  max-width: 100%;
}

/* .btn sets display, which would otherwise beat the user agent's rule for [hidden] and leave the
   hero showing all three platform buttons at once. */
[hidden] {
  display: none !important;
}

/* Never the browser default. The lighter accent reads at 5.6:1 on the dark page. */
:focus-visible {
  outline: var(--line-strong) solid var(--focus-ring);
  outline-offset: 2px;
}

a {
  color: var(--text-accent);
  text-decoration-color: rgba(226, 84, 42, 0.45);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--accent-hover);
  text-decoration-color: currentColor;
}

/* ---------- skip link ---------- */
.skip {
  position: absolute;
  left: var(--space-4);
  top: -60px;
  z-index: 60;
  background: var(--accent-fill);
  color: #fff;
  padding: 10px 16px;
  font: var(--type-mono-sm);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-standard);
}

.skip:focus {
  top: var(--space-4);
  color: #fff;
}

/* ---------- layout ---------- */
.section {
  padding: var(--section-pad-y) var(--space-6);
  border-top: var(--line-hairline) solid var(--border-hairline);
}

.section--tight {
  padding-top: var(--section-pad-y-tight);
  padding-bottom: var(--section-pad-y-tight);
}

.section--flush {
  border-top: 0;
}

.section--panel {
  background: var(--surface-panel);
}

.section--inset {
  background: var(--surface-inset);
}

.section--texture {
  background-image: var(--texture-grid);
}

.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
}

.wrap--narrow {
  max-width: var(--content-narrow);
}

.prose {
  max-width: var(--measure-prose);
  text-wrap: pretty;
}

.narrow {
  max-width: var(--measure-narrow);
}

.stack {
  display: flex;
  flex-direction: column;
}

.stack > * {
  margin: 0;
}

.stack--2 { gap: var(--space-2); }
.stack--3 { gap: var(--space-3); }
.stack--4 { gap: var(--space-4); }
.stack--5 { gap: var(--space-5); }
.stack--6 { gap: var(--space-6); }
.stack--7 { gap: var(--space-7); }
.stack--8 { gap: var(--space-8); }

.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-8); }
.grid--aside { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: var(--space-8); }

/* ---------- type ---------- */
.display-1 { font: var(--type-display-1); letter-spacing: var(--track-display); text-transform: uppercase; text-wrap: balance; }
.display-2 { font: var(--type-display-2); letter-spacing: var(--track-display); text-transform: uppercase; text-wrap: balance; }
.display-3 { font: var(--type-display-3); letter-spacing: var(--track-display); text-transform: uppercase; text-wrap: balance; }
.heading-1 { font: var(--type-heading-1); letter-spacing: var(--track-display); text-transform: uppercase; text-wrap: balance; }
.heading-2 { font: var(--type-heading-2); letter-spacing: var(--track-display); text-transform: uppercase; }
.body-lg { font: var(--type-body-lg); color: var(--text-secondary); }
.body { font: var(--type-body); color: var(--text-secondary); }
.body-sm { font: var(--type-body-sm); color: var(--text-secondary); }
.ink { color: var(--text-primary); }
.mono { font: var(--type-mono); letter-spacing: var(--track-label); font-variant-numeric: tabular-nums; }
.mono-sm { font: var(--type-mono-sm); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted); }
.accent { color: var(--text-accent); }
.slash { color: var(--accent); font-weight: 400; margin-left: 0.35em; }

/* SectionHeading, and its trailing slash glyph. */
h1, h2, h3, h4 { margin: 0; }

/* EyebrowLabel: uppercase mono, optional leading accent tick rule. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font: var(--type-mono-sm);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: var(--line-strong);
  background: var(--accent);
  flex: 0 0 auto;
}

.eyebrow--bare::before { display: none; }

/* IndexBadge: the bracketed index. Mono, accent, never a filled circle. */
.index {
  font: var(--type-mono);
  letter-spacing: var(--track-label);
  color: var(--text-accent);
  font-variant-numeric: tabular-nums;
}

/* ---------- Button ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: var(--line-hairline) solid transparent;
  border-radius: var(--radius-0);
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-control);
  padding: 12px 22px;
  font-size: 12px;
}

.btn--sm { padding: 8px 14px; font-size: 11px; }
.btn--lg { padding: 16px 30px; font-size: 13px; }

/* White text sits on --accent-fill, not on the designed accent (ADR-0006). */
.btn--primary { background: var(--accent-fill); color: #fff; border-color: var(--accent-fill); }
.btn--primary:hover { background: var(--accent-press); border-color: var(--accent-press); color: #fff; }

.btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.btn--secondary:hover { background: rgba(242, 241, 238, 0.06); border-color: var(--text-primary); color: var(--text-primary); }

.btn--ghost { background: transparent; color: var(--text-accent); border-color: transparent; padding: 6px 0; }
.btn--ghost:hover { color: var(--accent-hover); }

.btn__glyph { font-weight: 400; opacity: 0.8; }

/* ---------- Panel ---------- */
.panel {
  background: var(--surface-panel);
  border: var(--line-hairline) solid var(--border-hairline);
  border-radius: var(--radius-0);
  padding: var(--space-6);
}

.panel--inset { background: var(--surface-inset); }
.panel--raised { background: var(--surface-raised); }
.panel--edge { border-left: var(--line-rule) solid var(--accent); }
.panel--texture { background-image: var(--texture-grid); }
.panel--tight { padding: var(--space-5); }

/* ---------- SpecTable / SpecRow ---------- */
.spec {
  display: grid;
  grid-template-columns: repeat(var(--spec-cols, 1), minmax(0, 1fr));
  column-gap: var(--space-8);
  border-top: var(--line-hairline) solid var(--border-hairline);
}

.spec--2 { --spec-cols: 2; }
.spec--3 { --spec-cols: 3; }

.spec__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-3) 0;
  border-bottom: var(--line-hairline) solid var(--border-hairline);
}

.spec__label {
  font: var(--type-mono-sm);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.spec__value {
  font: var(--type-mono);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.spec__value--accent { color: var(--text-accent); }

/* ---------- StatBlock ---------- */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: var(--line-hairline) solid var(--border-strong);
}

.stat__index { font: var(--type-mono-sm); color: var(--text-accent); letter-spacing: var(--track-label); font-variant-numeric: tabular-nums; }
.stat__label { font: var(--type-heading-2); text-transform: uppercase; letter-spacing: var(--track-display); color: var(--text-primary); }
.stat__value { font: var(--type-body-sm); color: var(--text-secondary); text-wrap: pretty; }

/* ---------- CapabilityBlock ---------- */
.cap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: var(--line-hairline) solid var(--border-hairline);
}

.cap__title { font: var(--type-heading-1); text-transform: uppercase; letter-spacing: var(--track-display); color: var(--text-primary); text-wrap: balance; }
.cap__body { font: var(--type-body); color: var(--text-secondary); max-width: var(--measure-narrow); text-wrap: pretty; }
.cap__title a { color: inherit; text-decoration: none; }
.cap__title a:hover { color: var(--accent-hover); text-decoration: underline; text-decoration-thickness: 2px; }

/* ---------- CapabilityList: square tick, never a bullet ---------- */
.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3) var(--space-6);
}

.ticks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ticks li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font: var(--type-body);
  color: var(--text-primary);
}

.ticks li::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--accent);
  flex: 0 0 auto;
  transform: translateY(-3px);
}

/* ---------- StatusTag. Icon plus label, always. ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px 8px;
  border: var(--line-hairline) solid var(--border-hairline);
  font: var(--type-mono-sm);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  border-radius: var(--radius-0);
  white-space: nowrap;
}

.tag svg { flex: 0 0 auto; }
.tag--ok { color: var(--status-ok-ink); }
.tag--warn { color: var(--status-warn-ink); }
.tag--alert { color: var(--status-alert-ink); }
.tag--idle { color: var(--text-muted); }
.tag--accent { color: var(--text-accent); border-color: rgba(226, 84, 42, 0.4); }

/* ---------- header ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(8, 9, 10, 0.82);
  backdrop-filter: var(--blur-header);
  -webkit-backdrop-filter: var(--blur-header);
  border-bottom: var(--line-hairline) solid var(--border-hairline);
}

.top__in {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--text-primary);
}

.wordmark__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
}

/* The Raven Forge mark, as a one colour bone silhouette. The supplied icon is drawn for a light
   ground: its body is the same value as this page, so full colour would read as an outline ghost
   here and as mush at 22px. scripts/make-logo.py derives it. */
.wordmark__mark {
  flex: 0 0 auto;
  height: 26px;
  width: auto;
  display: block;
}

.wordmark__mark--lg { height: 30px; }

.wordmark__tagline {
  font: var(--type-mono-sm);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.top__right {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav a {
  font: var(--type-mono-sm);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: var(--line-strong) solid transparent;
  transition: var(--transition-control);
}

.nav a:hover { color: var(--text-primary); }
.nav a[aria-current='page'] { color: var(--text-primary); border-bottom-color: var(--accent); }
.nav .btn { border-bottom: 0; }
.nav .btn--primary { color: #fff; }

.nav__toggle {
  display: none;
  background: transparent;
  border: var(--line-hairline) solid var(--border-strong);
  color: var(--text-primary);
  font: var(--type-mono-sm);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 8px 12px;
  cursor: pointer;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: var(--space-11) var(--space-6) var(--space-9);
  background: var(--surface-page);
  background-image: var(--texture-grid);
  overflow: hidden;
}

.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--border-hairline);
}

.hero__in {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-8);
  align-items: center;
}

.hero h1 { max-width: 18ch; }

.hero__note {
  font: var(--type-mono-sm);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* ---------- the arriving-devices figure. Mechanical, and it stands down. ---------- */
.arrive {
  border: var(--line-hairline) solid var(--border-hairline);
  background: var(--surface-panel);
  padding: var(--space-5);
}

.arrive__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 0;
  border-bottom: var(--line-hairline) solid var(--border-hairline);
  opacity: 0;
  animation: land var(--dur-base) var(--ease-standard) forwards;
}

.arrive__row:last-child { border-bottom: 0; }
.arrive__row:nth-child(1) { animation-delay: 120ms; }
.arrive__row:nth-child(2) { animation-delay: 340ms; }
.arrive__row:nth-child(3) { animation-delay: 560ms; }
.arrive__row:nth-child(4) { animation-delay: 780ms; }
.arrive__row:nth-child(5) { animation-delay: 1000ms; }

.arrive__name { font: var(--type-body-sm); color: var(--text-primary); }
.arrive__meta { font: var(--type-mono-sm); letter-spacing: var(--track-label); color: var(--text-muted); margin-left: auto; }
.arrive__icon { color: var(--steel-300); flex: 0 0 auto; }

@keyframes land {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .arrive__row {
    animation: none;
    opacity: 1;
  }
}

/* ---------- captions ---------- */
.caption {
  font: var(--type-mono-sm);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: var(--space-3);
}

/* ---------- footer ---------- */
.foot {
  border-top: var(--line-hairline) solid var(--border-hairline);
  background: var(--surface-page);
}

.foot__cols {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-6);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-8);
}

.foot__title {
  font: var(--type-mono-sm);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

.foot a,
.foot span.foot__item {
  font: var(--type-body-sm);
  color: var(--text-secondary);
  text-decoration: none;
  display: block;
  padding: 4px 0;
}

.foot a:hover { color: var(--text-primary); text-decoration: underline; }

.foot__legal {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-6) var(--space-7);
  border-top: var(--line-hairline) solid var(--border-hairline);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-5);
  font: var(--type-mono-sm);
  letter-spacing: var(--track-label);
  color: var(--text-muted);
}

/* ---------- small print, notes, callouts ---------- */
.note {
  border-left: var(--line-rule) solid var(--accent);
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  font: var(--type-body);
  color: var(--text-secondary);
  max-width: var(--measure-prose);
}

.note strong { color: var(--text-primary); }

.gap {
  border: var(--line-hairline) solid var(--border-strong);
  background: var(--surface-inset);
  padding: var(--space-5);
}

.gap__label {
  font: var(--type-mono-sm);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--status-warn-ink);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.cmd {
  display: block;
  background: var(--ink-900);
  border: var(--line-hairline) solid var(--border-hairline);
  padding: 10px 14px;
  font: var(--type-mono);
  letter-spacing: 0;
  color: var(--bone-100);
  overflow-x: auto;
  white-space: pre;
}

.copy {
  background: transparent;
  border: var(--line-hairline) solid var(--border-strong);
  color: var(--text-secondary);
  font: var(--type-mono-sm);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 6px 10px;
  cursor: pointer;
  transition: var(--transition-control);
}

.copy:hover { color: var(--text-primary); border-color: var(--text-primary); }

/* ---------- download cards ---------- */
.plat {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--surface-panel);
  border: var(--line-hairline) solid var(--border-hairline);
  padding: var(--space-5);
}

.plat--detected { border-color: var(--border-accent); }

.plat__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: var(--line-hairline) solid var(--border-hairline);
}

.plat__name { font: var(--type-heading-1); text-transform: uppercase; letter-spacing: var(--track-display); }
.plat__icon { color: var(--text-secondary); flex: 0 0 auto; }
.plat__foot { margin-top: auto; }

/* ---------- questions ---------- */
.qa { border-top: var(--line-hairline) solid var(--border-hairline); padding-top: var(--space-5); }
.qa__q { font: var(--type-heading-2); text-transform: none; letter-spacing: 0; color: var(--text-primary); margin-bottom: var(--space-3); }
.qa__a { font: var(--type-body); color: var(--text-secondary); max-width: var(--measure-prose); text-wrap: pretty; }
.qa__a + .qa__a { margin-top: var(--space-3); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hero__in { grid-template-columns: minmax(0, 1fr); }
  .grid--split,
  .grid--aside { grid-template-columns: minmax(0, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  :root {
    --section-pad-y: var(--space-8);
    --section-pad-y-tight: var(--space-7);
  }

  .display-1 { font: 700 48px/0.96 var(--font-display); letter-spacing: var(--track-display); }
  .display-2 { font: 700 40px/1 var(--font-display); letter-spacing: var(--track-display); }
  .display-3 { font: 600 30px/1.04 var(--font-display); letter-spacing: var(--track-display); }
  .heading-1 { font: 600 24px/1.1 var(--font-display); letter-spacing: var(--track-display); }
  .cap__title { font: 600 22px/1.12 var(--font-display); letter-spacing: var(--track-display); text-transform: uppercase; }

  .hero { padding-top: var(--space-8); }
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .spec--2,
  .spec--3 { --spec-cols: 1; }
  .ticks--2 { grid-template-columns: minmax(0, 1fr); }
  .foot__cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .prose,
  .cap__body,
  .qa__a,
  .narrow { max-width: none; }

  /* the nav collapses behind a disclosure; the download action never does */
  .top__in { position: relative; }
  .top__right { gap: var(--space-3); }
  .nav__toggle { display: inline-flex; align-items: center; min-height: 44px; }
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) var(--space-6) var(--space-4);
    background: var(--surface-panel);
    border-bottom: var(--line-hairline) solid var(--border-hairline);
  }
  .nav[data-open='true'] { display: flex; }
  .nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    border-bottom: var(--line-hairline) solid var(--border-hairline);
    padding: 0;
  }
  .nav a[aria-current='page'] { border-bottom-color: var(--accent); }
  /* With no script the toggle never runs, so the list must not be hidden by default. */
  .no-js .nav { display: flex; position: static; background: transparent; border: 0; padding: var(--space-3) 0 0; }
  .no-js .nav__toggle { display: none; }
}

@media (max-width: 560px) {
  .display-1 { font: 700 38px/1 var(--font-display); letter-spacing: 0; }
  .display-2 { font: 700 34px/1.02 var(--font-display); letter-spacing: 0; }
  .display-3 { font: 600 27px/1.06 var(--font-display); letter-spacing: 0; }
  .section { padding-left: var(--space-4); padding-right: var(--space-4); }
  .hero { padding-left: var(--space-4); padding-right: var(--space-4); }
  .top__in { padding-left: var(--space-4); padding-right: var(--space-4); }
  .nav { padding-left: var(--space-4); padding-right: var(--space-4); }
  .foot__cols,
  .foot__legal { padding-left: var(--space-4); padding-right: var(--space-4); }
  .panel { padding: var(--space-5) var(--space-4); }
  .gap { padding: var(--space-4); }

  /* a label and its value stop competing for one line */
  .spec__row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .spec__value { text-align: left; max-width: none !important; }

  /* a mono uppercase label at 12px can be wider than a 320px phone, and the design system's
     nowrap would then push the page sideways. The label wraps; the button stays square. */
  .btn { white-space: normal; max-width: 100%; text-align: center; }

  /* the hero's actions become full width targets rather than two half buttons */
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn { width: 100%; }
  .actions .btn--ghost { width: auto; }

  .hero h1 { max-width: none; }
  .eyebrow { letter-spacing: var(--track-label); }
  .foot__legal { flex-direction: column; gap: var(--space-2); }
}

/* Touch: every target reaches 44px, which several of these do not at desk sizes. */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn--ghost { min-height: 40px; }
  .copy { min-height: 44px; padding: 10px 14px; }
  .foot a { padding: 10px 0; }
  .wordmark { min-height: 44px; }
  /* a one line capability title is 27px of text; the target it sits in should not be */
  .cap__title a { display: inline-block; padding: 9px 0; }
  .qa { padding-top: var(--space-6); }
}

/* ---------- print: the spec-sheet plane the design system reserves for it ---------- */
@media print {
  .top,
  .skip,
  .arrive { display: none; }
  body { background: #fff; color: #08090a; }
  .section { border-color: rgba(8, 9, 10, 0.14); }
  .body, .body-lg, .body-sm, .cap__body, .qa__a, .prose { color: #343a3e; }
}

/* ---------- inline icons. One SVG grid (256), sized by its context's font-size. ---------- */
svg.i {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex: 0 0 auto;
}

.tag svg.i,
.eyebrow svg.i { font-size: 13px; }
.gap__label svg.i { font-size: 14px; }
.plat__icon svg.i { font-size: 28px; }
.arrive__icon svg.i { font-size: 17px; }
.btn svg.i { font-size: 15px; }
.app__navitem svg.i { font-size: 18px; }
.app__brandmark svg.i { font-size: 22px; }
.risk__icon svg.i { font-size: 21px; }
.chip svg.i { font-size: 13px; }
.tile svg.i { font-size: 18px; }
.summary svg.i { font-size: 19px; }
.risk__fix svg.i { font-size: 14px; }
.app__quietrow svg.i { font-size: 15px; }
.step-icon svg.i { font-size: 20px; }

/* 30-app-plane.css */
/* ==========================================================================================
   The Roost app plane. Anywhere the site shows the product, the surface switches to the app's
   own tokens, so a block reads as a window into the app rather than an impression of it.
   Rules mirror roost/web/src/index.css @layer components and the screens in roost/web/src/.
   There are no screenshots: every mock is rebuilt here and captioned as such.
   ========================================================================================== */

.roost-plane {
  background: var(--app-page);
  color: var(--app-ink);
  font: var(--app-type-body);
  border: var(--line-hairline) solid var(--app-linestrong);
}

.roost-plane :focus-visible {
  outline: var(--line-strong) solid var(--app-accent);
  outline-offset: 2px;
}

/* The window frame: the app's chrome plus its content column. */
.app {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 0;
}

.app__side {
  background: var(--app-chrome);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-right: var(--line-hairline) solid var(--app-line);
}

.app__brand { display: flex; flex-direction: column; gap: 6px; padding: 0 8px; }
.app__brandrow { display: flex; align-items: center; gap: 8px; }
.app__brandname { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: 0.01em; }
.app__brandmark { color: var(--app-accent); flex: 0 0 auto; }
.app__net { font: var(--app-type-label); color: var(--app-ink2); }
.app__when { font: var(--app-type-caption); color: var(--app-muted); }

.app__nav { display: flex; flex-direction: column; gap: 2px; }

.app__navitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--app-radius-ctl);
  font: var(--app-type-body);
  font-size: 14px;
  color: var(--app-ink2);
  text-decoration: none;
}

.app__navitem[aria-current='page'] {
  background: var(--app-accent-tint);
  color: var(--app-accent-ink);
  font-weight: 600;
}

.app__navitem svg { flex: 0 0 auto; }

.app__quiet { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 0 8px; }
.app__quietrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: var(--app-type-label); color: var(--app-ink2); }

.app__main { padding: 24px 32px 32px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }

/* ---------- app type ---------- */
.app-h1 { font: var(--app-type-h1); color: var(--app-ink); text-wrap: balance; }
.app-h2 { font: var(--app-type-h2); color: var(--app-ink); }
.app-h3 { font: var(--app-type-h3); color: var(--app-ink); }
.app-body { font: var(--app-type-body); color: var(--app-ink2); }
.app-label { font: var(--app-type-label); color: var(--app-muted); }
.app-caption { font: var(--app-type-caption); color: var(--app-muted); }
.app-data { font: var(--app-type-data); color: var(--app-ink2); font-variant-numeric: tabular-nums; }
.app-ink { color: var(--app-ink); }

/* ---------- card and button ---------- */
.app-card {
  background: var(--app-panel);
  border: var(--line-hairline) solid var(--app-line);
  border-radius: var(--app-radius-card);
  box-shadow: var(--app-shadow-card);
  padding: 20px;
}

.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--app-radius-ctl);
  padding: 10px 16px;
  font: var(--app-type-body);
  font-weight: 600;
  font-size: 14px;
  border: var(--line-hairline) solid transparent;
  text-decoration: none;
  cursor: default;
}

/* White text sits on --app-accent-fill, never on the designed accent. Roost ADR-0006. */
.app-btn--primary { background: var(--app-accent-fill); color: #fff; }
.app-btn--secondary { background: var(--app-panel); color: var(--app-ink); border-color: var(--app-control); }
.app-link { font: var(--app-type-body); font-size: 14px; font-weight: 500; color: var(--app-accent-ink); text-decoration: none; }

/* ---------- chips. A status colour never carries meaning alone: icon plus label, always. ---------- */
.chip {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  border-radius: var(--app-radius-ctl);
  padding: 4px 10px;
  font: var(--app-type-label);
  font-weight: 600;
}

.chip svg { flex: 0 0 auto; }
.chip--urgent { background: var(--app-urgent-fill); color: var(--app-urgent-ink); }
.chip--attention { background: var(--app-attention-fill); color: var(--app-attention-ink); }
.chip--good { background: var(--app-good-fill); color: var(--app-good-ink); }
.chip--neutral { background: var(--app-neutral-fill); color: var(--app-neutral-ink); }
.chip--accent { background: var(--app-accent-tint); color: var(--app-accent-ink); }

/* ---------- risk card, the hero of the Overview screen ---------- */
.risk { display: flex; gap: 16px; }
.risk__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--app-radius-ctl);
  background: var(--app-inset);
  color: var(--app-ink2);
}
.risk__body { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.risk__top { display: flex; align-items: flex-start; gap: 12px; }
.risk__names { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.risk__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.risk__fix { margin-left: auto; display: flex; align-items: center; gap: 6px; font: var(--app-type-label); color: var(--app-muted); }

/* ---------- score arc and category bars ---------- */
.score { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.score__arc { position: relative; width: 168px; height: 168px; }
.score__num {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.score__value { font-family: var(--font-display); font-weight: 700; font-size: 54px; line-height: 1; color: var(--app-ink); }
.score__grade { font: var(--app-type-label); color: var(--app-muted); }

.bars { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.bar__row { display: flex; align-items: center; gap: 10px; }
.bar__name { font: var(--app-type-label); color: var(--app-ink2); width: 132px; flex: 0 0 auto; }
.bar__track { flex: 1; height: 6px; background: var(--app-inset); border-radius: 1px; overflow: hidden; }
.bar__fill { height: 100%; display: block; }
.bar__fill--good { background: var(--app-hue-good); }
.bar__fill--attention { background: var(--app-hue-attention); }
.bar__fill--urgent { background: var(--app-hue-urgent); }
.bar__val { font: var(--app-type-data); color: var(--app-muted); width: 44px; text-align: right; flex: 0 0 auto; }

/* ---------- evidence block on a finding ---------- */
.ev { background: var(--app-inset); border-radius: var(--app-radius-card); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.ev__line { font: var(--app-type-body); color: var(--app-ink); }
.ev__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font: var(--app-type-caption); color: var(--app-muted); }

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: step; }
.steps li { display: flex; gap: 12px; }
.steps li::before {
  counter-increment: step;
  content: counter(step);
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--app-radius-ctl);
  background: var(--app-accent-tint);
  color: var(--app-accent-ink);
  font: var(--app-type-caption);
  font-weight: 600;
}
.steps__do { font: var(--app-type-body); color: var(--app-ink); font-weight: 500; }
.steps__see { font: var(--app-type-body); font-size: 14px; color: var(--app-muted); }

/* ---------- posture card and router tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--app-panel);
  border: var(--line-hairline) solid var(--app-line);
  border-radius: var(--app-radius-card);
}
.tile__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile__name { font: var(--app-type-body); font-size: 14px; font-weight: 600; color: var(--app-ink); }
.tile__sub { font: var(--app-type-caption); color: var(--app-muted); }
.tile--unread { background: var(--app-inset); }

.summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--app-panel); border: var(--line-hairline) solid var(--app-line); border-radius: var(--app-radius-card); font: var(--app-type-body); font-size: 14px; color: var(--app-ink2); }

/* ---------- the frame the mock sits in on the dark page ---------- */
.window {
  border: var(--line-hairline) solid var(--border-strong);
  background: var(--surface-panel);
  padding: 8px;
}

.window .roost-plane { display: block; }

/* On a phone the mock keeps the app's own proportions rather than pretending to be a phone app:
   the 240px chrome does not fit, so it stands down and the content column becomes the whole width.
   Roost has no phone version of these screens; the phone viewer is a different, smaller product. */
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app__side { display: none; }
  .app__main { padding: 20px; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .bar__name { width: 104px; }
}

@media (max-width: 560px) {
  .window { padding: 4px; }
  .app__main { padding: 16px; gap: 12px; }
  .app-card { padding: 16px; }
  .app-h1 { font: 600 26px/1.2 var(--font-display); }
  .risk { gap: 12px; }
  .risk__icon { width: 34px; height: 34px; }
  .risk__icon svg.i { font-size: 18px; }
  /* the fix preview stops fighting the buttons for the same line */
  .risk__fix { margin-left: 0; width: 100%; }
  .risk__actions { gap: 12px 16px; }
  .score__arc { width: 140px; height: 140px; }
  .score__arc svg { width: 140px; height: 140px; }
  .score__value { font-size: 44px; }
  .bar__name { width: 92px; font-size: 12px; }
  .bar__val { width: 38px; }
  .ev { padding: 14px; }
  .steps li { gap: 10px; }
}