/* ==========================================================================
   RIC Design System — styles.css
   Version: 2.0
   Source spec: FRONTEND_GUIDELINES copy.md v2.0
   ~52 numbered sections

   Naming: BEM — .component, .component__element, .component--modifier
   Colors: All via CSS custom properties — no hardcoded hex in component CSS
   Fonts: System font stack — no web fonts
   ========================================================================== */

/* ==========================================================================
   §1 — CSS Variables & Design Tokens
   ========================================================================== */

:root {
    /* ---- Core palette ---- */
    --color-dark:             #0f172a;
    --color-dark-secondary:   #1e293b;
    --color-text:             #1e293b;
    --color-text-muted:       #64748b;
    --color-text-light:       #94a3b8;

    /* ---- Brand / interactive ---- */
    --color-primary:          #2563eb;
    --color-primary-dark:     #1d4ed8;

    /* ---- Success (green) ---- */
    --color-success:          #22c55e;
    --color-success-dark:     #16a34a;
    --color-success-bg:       #f0fdf4;
    --color-success-border:   #bbf7d0;
    --color-success-ring:     #dcfce7;
    --color-success-text:     #166534;

    /* ---- Mint (green) ---- */
    --color-mint-bg:          #ecfdf5;
    --color-mint-muted:       #a7f3d0;

    /* ---- Warning (amber) ---- */
    --color-warning:          #f59e0b;
    --color-warning-bg:       #fffbeb;
    --color-warning-border:   #fde68a;
    --color-warning-text:     #92400e;

    /* ---- Danger (red) ---- */
    --color-danger:           #ef4444;
    --color-danger-dark:      #dc2626;
    --color-danger-bg:        #fee2e2;
    --color-danger-border:    #fca5a5;
    --color-danger-text:      #991b1b;

    /* ---- Neutral ---- */
    --color-border:           #e2e8f0;
    --color-border-hover:     #d1d5db;
    --color-bg-light:         #f8fafc;
    --color-bg-subtle:        #fafafa;
    --color-surface:          #ffffff;
    --color-gray-text:        #374151;
    --color-gray-muted:       #4b5563;
    --color-gray-light:       #6b7280;
    --color-gray-badge-bg:    #f3f4f6;
    --color-gray-badge:       #9ca3af;

    /* ---- Slider-specific ---- */
    --color-slider-track:     #e2e8f0;
    --color-slider-thumb:     #0f172a;
    --color-candidate-border: #94a3b8;

    /* ---- Pilot/R&D (blue) ---- */
    --color-pilot-bg:         #dbeafe;
    --color-pilot-text:       #1e40af;

    /* ---- Coverage badge (moderate — yellow) ---- */
    --color-coverage-moderate-bg:     #fef9c3;
    --color-coverage-moderate-border: #fde047;
    --color-coverage-moderate-text:   #854d0e;

    /* ---- Spacing scale ---- */
    --space-xs:  0.25rem;  /* 4px */
    --space-sm:  0.5rem;   /* 8px */
    --space-md:  1rem;     /* 16px */
    --space-lg:  1.5rem;   /* 24px */
    --space-xl:  2rem;     /* 32px */
    --space-2xl: 3rem;     /* 48px */

    /* ---- Typography tokens ---- */
    --font-family: system-ui, -apple-system, BlinkMacSystemFont,
                   'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

    --font-size-h1:      2.25rem;
    --font-size-h2:      1.5rem;
    --font-size-h3:      1.25rem;
    --font-size-body:    1rem;
    --font-size-small:   0.875rem;
    --font-size-caption: 0.75rem;

    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --line-height-h1:   1.2;
    --line-height-h2:   1.3;
    --line-height-h3:   1.4;
    --line-height-body: 1.5;

    /* ---- Layout ---- */
    --content-max-width: 1100px;

    /* ---- Transitions ---- */
    --transition-default: 150ms ease-out;

    /* ============================================================
       design_redo v2 tokens (additive — do not remove legacy above)
       Source: design_redo.md §4
       ============================================================ */

    /* Surfaces */
    --surface-page:    #F7F7F5;
    --surface-card:    #FFFFFF;
    --surface-inset:   #F4F4F0;
    --surface-dark:    #0F1A2E;
    --surface-divider: #E4E4DC;
    --surface-border:  #D4D4CC;

    /* Section tint (teal wash — How RIC Works, Job Brief) */
    --color-section-tint:       #eef6f5;   /* Light teal background wash */
    --color-section-tint-muted: #c8deda;   /* Muted teal for watermark numerals */

    /* Ink */
    --ink-primary:   #0F1A2E;
    --ink-secondary: #4A5568;
    --ink-tertiary:  #6B7280;
    --ink-inverse:   #FFFFFF;

    /* Signal */
    --signal-deployed: #0F7B3E;
    --signal-ready:    #1F7A8C;
    --signal-emerging: #B8860B;
    --signal-manual:   #6B7280;
    --signal-alert:    #A8321C;

    /* Signal backgrounds */
    --signal-deployed-bg: #E3F2E9;
    --signal-ready-bg:    #E0ECF0;
    --signal-emerging-bg: #F5EAD1;
    --signal-manual-bg:   #EEEEEC;
    --signal-alert-bg:    #F5DCD5;

    /* Link */
    --link:       #1F5AA8;
    --link-hover: #153E77;

    /* Type */
    --font-body: "Inter", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;

    --text-xs:  11px;
    --text-sm:  13px;
    --text-base: 15px;
    --text-lg:  17px;
    --text-xl:  22px;
    --text-2xl: 28px;
    --text-3xl: 36px;

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;

    --lh-tight:  1.2;
    --lh-snug:   1.35;
    --lh-normal: 1.55;

    --tracking-tight: -0.01em;
    --tracking-wide:   0.06em;

    /* Spacing (design_redo scale) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Radius (strictly limited) */
    --radius-sm: 2px;
    --radius-md: 4px;

    /* Borders */
    --border-hairline: 1px solid var(--surface-divider);
    --border-card:     1px solid var(--surface-border);

    /* Layout */
    --container-max: 1200px;
    --rail-nav:   220px;
    --rail-aside: 320px;
    --gutter: var(--space-6);

    /* ---- Hero v2 accent ---- */
    --accent-glow:     #38BDF8;
    --accent-glow-rgb: 56, 189, 248;
    --radius-lg:       8px;
}


/* ==========================================================================
   §2 — Base Typography & Layout
   ========================================================================== */

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

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    color: var(--color-text);
    background-color: var(--color-bg-light);

    /* Sticky footer layout */
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

#main-content {
    flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: var(--space-sm);
    color: var(--color-text);
}

h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h1);
}

h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-h2);
}

h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-h3);
}

p {
    margin-top: 0;
    margin-bottom: var(--space-md);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-default);
}

a:hover {
    color: var(--color-primary-dark);
}

img {
    max-width: 100%;
    height: auto;
}


/* ==========================================================================
   §3 — Site Header / Navigation
   ========================================================================== */

.site-header {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: relative;
    z-index: 10;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    max-width: var(--container-max);
    margin: 0 auto;
}

.site-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.site-logo__img {
    height: 48px;
    width: auto;
}

.site-logo__name {
    font-size: 1.2rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.015em;
    color: #1f3b68;
    margin-left: var(--space-sm);
}

.site-logo__name--muted {
    font-weight: var(--font-weight-regular);
    opacity: 0.7;
}

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

.site-nav__link {
    font-size: 1.1rem;
    font-weight: var(--font-weight-semibold);
    color: #1f3b68;
    letter-spacing: -0.015em;
    text-decoration: none;
    transition: color var(--transition-default);
}

.site-nav__link:hover {
    color: var(--color-text);
}

.site-nav__link--active {
    color: #1f3b68;
    font-weight: var(--font-weight-semibold);
}


/* ==========================================================================
   §4 — Hero Section
   ========================================================================== */

.hero {
    background:
        linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.08) 100%),
        linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-secondary) 100%);
    color: white;
    padding: 100px 0 88px;
    text-align: center;
    position: relative;
    /* THE SITE-WIDE HORIZONTAL OVERFLOW (F4). Owner ruling 2026-08-13, option A.
       .hero::after below is a fixed 800px glow at left:50% translate(-50%): at a
       390px viewport that computes to left 195px, translate -400px, right edge
       595px -- 205px past the viewport. Measured at the act: every page carrying
       .hero overflowed 205px at 390 AND 16px at 768 (the 768 leg was NOT on the
       record; only 390 was). Org pages have no .hero at all, which is why they
       were the only clean ones.
       `clip`, NOT `hidden`: hidden would make .hero a scroll container.
       Two candidates were rejected on measurement, not argument:
         - the same declaration on `body` does NOTHING (205px survives) -- html,
           not body, is the scroll container. NB: this comment carries no closing
           brace character, deliberately. The rule-level guard in tests.py reads
           the brace body by scanning to the first one, so a brace in prose
           truncates the rule and the guard stops seeing the declaration below.
         - bounding the pseudo-element (width: min(800px, 100%)) also fixes it
           but rescales the glow, 126k-143k pixels different INSIDE the hero at
           <=768. This clips only what was already off-viewport.
       Collateral: nil. Full-page pixel diffs at 390/768/1280, with a
       baseline-vs-baseline null control in every cell, are identical wherever
       the instrument is stable, and no real element inside .hero overflows its
       box at any width. */
    overflow-x: clip;
}

/* Blueprint grid overlay */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}

/* Radial accent glow */
.hero::after {
    content: "";
    position: absolute;
    top: 40%;
    left: 50%;
    width: 800px;
    height: 500px;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        ellipse at center,
        rgba(var(--accent-glow-rgb), 0.12) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.hero h1 {
    color: white;
    margin-bottom: var(--space-md);
}

.hero p {
    color: rgba(255, 255, 255, 0.8);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.hero__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-5);
    position: relative;
    z-index: 1;
}

.hero__subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--text-base);
    line-height: var(--lh-normal);
    max-width: 68ch;
    margin: 0 auto;
}

/* Stat strip inside dark hero */
.hero .stat-strip {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}
.hero .stat-strip__item {
    border-right-color: rgba(255, 255, 255, 0.15);
    border-bottom-color: rgba(255, 255, 255, 0.15);
}
.hero .stat-strip__value { color: white; }
.hero .stat-strip__label { color: rgba(255, 255, 255, 0.7); }

/* Breadcrumb inside dark hero — use base white styles, override page-scoped dark overrides */
.hero .breadcrumb {
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
    padding: 0;
    margin: 0 0 var(--space-4);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}
.hero .breadcrumb__link {
    color: rgba(255, 255, 255, 0.6);
}
.hero .breadcrumb__link:hover {
    color: white;
}
.hero .breadcrumb__separator {
    color: rgba(255, 255, 255, 0.4);
}
.hero .breadcrumb__current {
    color: rgba(255, 255, 255, 0.9);
}

/* Verdict / confidence inside dark hero */
.hero .hero__verdict {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--text-base);
    line-height: var(--lh-normal);
    max-width: 700px;
    margin: var(--space-3) auto 0;
}
.hero .confidence-tier {
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

/* Homepage hero elements for dark bg */
.hero .home-hero__headline {
    color: white;
    font-size: 3.5em;
}
.hero .home-hero__subline {
    color: rgba(255, 255, 255, 0.85);
    font-size: 17px;
}
.hero .home-hero__search-input {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}
.hero .home-hero__search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.hero .home-hero__search-input:focus {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}
.hero .home-hero__search .search-icon {
    color: rgba(255, 255, 255, 0.5);
}
.hero .home-hero__browse {
    color: rgba(255, 255, 255, 0.7);
}
.hero .home-hero__browse a {
    color: rgba(255, 255, 255, 0.9);
}
.hero .home-hero__browse a:hover {
    color: white;
}
.hero .home-hero__browse-sep {
    color: rgba(255, 255, 255, 0.4);
}

/* Homepage variant */
.hero--homepage {
    padding: 40px 0 50px;
}

.hero--homepage h1 {
    font-weight: var(--font-weight-regular);
}

.hero__beta-tag {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
}

/* Back link */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color var(--transition-default);
    margin-bottom: var(--space-md);
}

.back-link:hover {
    color: white;
}


/* ==========================================================================
   §5 — Conclusion Callout
   ========================================================================== */

.conclusion-callout {
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.conclusion-callout__title {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-sm);
}

.conclusion-callout__text {
    color: var(--color-text-muted);
    line-height: var(--line-height-body);
}


/* ==========================================================================
   §6 — Section Dividers
   ========================================================================== */

.section-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-2xl) 0;
}


/* ==========================================================================
   §7 — What Changes Diagram
   ========================================================================== */

.changes-band {
    display: flex;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.changes-column {
    flex: 1;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--space-lg);
}

.changes-column__title {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.changes-column--before {
    border-left: 3px solid var(--color-danger);
}

.changes-column--after {
    border-left: 3px solid var(--color-success);
}


/* ==========================================================================
   §8 — Risks Container
   ========================================================================== */

.risks-container {
    margin-bottom: var(--space-xl);
}

.risks-container__title {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-md);
}

.risk-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.risk-row:last-child {
    border-bottom: none;
}

.risk-row__icon {
    color: var(--color-warning);
    flex-shrink: 0;
}

.risk-row__content {
    flex: 1;
}

.risk-row__title {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-xs);
}

.risk-row__description {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}


/* ==========================================================================
   §9 — Robots Container
   ========================================================================== */

.robots-container {
    margin-bottom: var(--space-xl);
}

.robots-container__title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-md);
}

.robots-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    background-color: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-default);
    margin-bottom: var(--space-lg);
}

.robots-toggle:hover {
    border-color: var(--color-border-hover);
    background-color: var(--color-bg-light);
}

.robots-toggle__icon {
    transition: transform 0.2s ease-out;
}

.robots-toggle.open .robots-toggle__icon {
    transform: rotate(45deg);
}

.robots-content {
    display: none;
}

.robots-content.show {
    display: block;
}

/* Sibling dimming when one card is expanded */
.robots-content.has-expanded .robot-card-v2:not(.open) {
    opacity: 0.65;
    filter: saturate(0.85);
    transition: opacity 0.25s ease-out, filter 0.25s ease-out;
}

.robots-empty {
    color: var(--color-text-muted);
    font-style: italic;
    padding: var(--space-lg) 0;
}


/* ==========================================================================
   §10 — Robot Cards V2 — Collapsed
   ========================================================================== */

.robot-card-v2 {
    position: relative;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--space-lg);
    padding-left: calc(var(--space-lg) + 12px);
    margin-bottom: var(--space-md);
    transition: opacity 0.25s ease-out, filter 0.25s ease-out;
}

/* Accent rail */
.robot-card-v2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 4px;
    border-radius: 0 2px 2px 0;
    background-color: var(--color-border);
}

.robot-card-v2[data-rail="high"]::before {
    background-color: var(--color-success);
}

.robot-card-v2[data-rail="med"]::before,
.robot-card-v2[data-rail="medium"]::before {
    background-color: var(--color-warning);
}

.robot-card-v2[data-rail="low"]::before {
    background-color: rgba(15, 23, 42, 0.18);
}

.robot-card-v2__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.robot-card-v2__name {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.robot-card-v2__manufacturer {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
}

.robot-card-v2__description {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    line-height: var(--line-height-body);
    margin-bottom: var(--space-sm);
}

.robot-card-v2__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.robot-card-v2__constraints {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.robot-card-v2__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Details button */
.robot-card-v2__details-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-default);
}

.robot-card-v2__details-btn:hover {
    background-color: var(--color-bg-light);
    border-color: var(--color-border-hover);
}

.robot-card-v2__details-btn .chevron {
    transition: transform var(--transition-default);
    font-size: 0.65rem;
}

.robot-card-v2.open .robot-card-v2__details-btn .chevron {
    transform: rotate(90deg);
}


/* ==========================================================================
   §10B — Robot Cards V2 — Expanded (4 Tabs)
   ========================================================================== */

.robot-card-v2__expanded {
    display: none;
    margin-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-md);
}

.robot-card-v2.open .robot-card-v2__expanded {
    display: block;
}

.robot-card-v2__tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-bg-subtle);
    margin-bottom: var(--space-md);
    overflow-x: auto;
}

.robot-card-v2__tab-panel {
    display: none;
}

.robot-card-v2__tab-panel.active {
    display: block;
}


/* ==========================================================================
   §11 — Evidence Section
   ========================================================================== */

.evidence-container {
    margin-bottom: var(--space-xl);
}

.evidence-container__title {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-md);
}

.evidence-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    transition: background-color var(--transition-default);
}

.evidence-toggle:hover {
    background-color: var(--color-bg-light);
}

.evidence-toggle__chevron {
    transition: transform 0.2s ease-out;
    color: var(--color-text-muted);
}

.evidence-toggle.open .evidence-toggle__chevron {
    transform: rotate(180deg);
}

.evidence-content {
    display: none;
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
}

.evidence-content.show {
    display: block;
}


/* ==========================================================================
   §12 — Utilities
   ========================================================================== */

.content-wrapper {
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}


/* ==========================================================================
   §13 — Automation Spectrum Slider
   ========================================================================== */

.spectrum-slider {
    width: 100%;
    max-width: 600px;
    margin: 0 auto var(--space-lg);
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 4px;
    outline: none;
    background: linear-gradient(to right,
        var(--color-text-muted) 0%,
        var(--color-text-light) 25%,
        var(--color-border) 50%,
        #86efac 75%,
        var(--color-success) 100%
    );
}

.spectrum-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background: var(--color-slider-thumb);
    border: 3px solid white;
    cursor: grab;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform var(--transition-default), box-shadow var(--transition-default);
}

.spectrum-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.spectrum-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
}

.spectrum-slider:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.3);
}

.spectrum-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background: var(--color-slider-thumb);
    border: 3px solid white;
    cursor: grab;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform var(--transition-default), box-shadow var(--transition-default);
}

.spectrum-slider::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.spectrum-slider::-moz-range-thumb:active {
    cursor: grabbing;
}

.spectrum-slider:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.3);
}

/* Spectrum labels */
.spectrum-labels {
    display: flex;
    justify-content: space-between;
    max-width: 600px;
    margin: 0 auto var(--space-lg);
    gap: var(--space-xs);
}

.spectrum-label {
    padding: var(--space-xs) var(--space-sm);
    border: none;
    border-radius: 0.25rem;
    background-color: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-default);
}

.spectrum-label:hover {
    color: var(--color-text);
    background-color: var(--color-bg-light);
}

.spectrum-label.active {
    background-color: var(--color-dark);
    color: white;
}

.spectrum-label__count {
    font-size: 0.65rem;
    opacity: 0.7;
    margin-left: var(--space-xs);
}

.spectrum-label:focus-visible {
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.2);
}

/* Show All button */
.spectrum-show-all {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    background-color: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-default);
}

.spectrum-show-all:hover {
    background-color: var(--color-bg-light);
}

.spectrum-show-all.active {
    background-color: var(--color-dark);
    color: white;
    border-color: var(--color-dark);
}


/* ==========================================================================
   §14 — Search Section
   ========================================================================== */

.search-section {
    max-width: 600px;
    margin: 0 auto var(--space-xl);
    position: relative;
}

.search-input {
    width: 100%;
    padding: 14px 16px 14px 44px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: 0.95rem;
    color: var(--color-text);
    background: var(--color-bg-light);
    transition: all var(--transition-default);
}

.search-input::placeholder {
    color: var(--color-text-light);
}

.search-input:focus {
    outline: none;
    border-color: var(--color-dark);
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.1);
    background: var(--color-surface);
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-light);
    pointer-events: none;
    font-size: 1rem;
}

.search-empty-state {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-xl) 0;
}


/* ==========================================================================
   §15 — Jobs Grid
   ========================================================================== */

.jobs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    max-width: 900px;
    margin: 0 auto;
}


/* ==========================================================================
   §16 — Job Cards
   ========================================================================== */

.job-card {
    position: relative;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: var(--space-lg);
    text-decoration: none;
    color: var(--color-text);
    display: block;
    transition: transform var(--transition-default),
                box-shadow var(--transition-default),
                opacity var(--transition-default);
}

/* Real (clickable) job card */
.job-card--real {
    cursor: pointer;
}

.job-card--real:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Persistent arrow */
.job-card--real::after {
    content: '\2192';
    position: absolute;
    right: var(--space-lg);
    bottom: var(--space-lg);
    font-size: 1.25rem;
    color: var(--color-text);
    opacity: 0.25;
    transition: opacity var(--transition-default);
}

.job-card--real:hover::after {
    opacity: 1;
}

/* Coming soon variant */
.job-card--coming-soon {
    border-style: dashed;
    background-color: var(--color-bg-subtle);
    cursor: default;
}

.job-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.job-card__title {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.job-card__trade {
    font-size: var(--font-size-caption);
    color: var(--color-text-muted);
    margin-bottom: var(--space-xs);
}

.job-card__description {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    line-height: var(--line-height-body);
    margin-bottom: var(--space-md);
}

.job-card__stats {
    display: flex;
    gap: var(--space-md);
    font-size: var(--font-size-caption);
    color: var(--color-text-muted);
}

.job-card__stat-value {
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

/* Card states */
.job-card--promoted {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.job-card--demoted {
    opacity: 0.75;
}


/* ==========================================================================
   §17 — Beta Notice
   ========================================================================== */

.beta-callout {
    background-color: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    border-radius: 8px;
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
    font-size: var(--font-size-small);
    color: var(--color-warning-text);
}

.beta-callout__title {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-xs);
}


/* ==========================================================================
   §18 — Site Footer
   ========================================================================== */

.site-footer {
    flex-shrink: 0;
    background-color: var(--surface-dark, var(--color-dark));
    color: rgba(255, 255, 255, 0.7);
    padding: var(--space-8, var(--space-lg)) 0 var(--space-5, var(--space-md));
}

.site-footer__inner {
    max-width: var(--container-max, var(--content-max-width));
    margin: 0 auto;
    padding: 0 var(--space-5, var(--space-md));
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr;
    gap: var(--space-6, var(--space-lg));
    text-align: left;
}

.site-footer__brand-name {
    font-size: 1.05rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.015em;
    color: var(--ink-inverse, #fff);
    margin: 0 0 var(--space-2, 0.5rem);
}

.site-footer__brand-name--muted {
    font-weight: var(--font-weight-regular, 400);
    opacity: 0.7;
}

.site-footer__tagline {
    font-size: var(--text-sm, var(--font-size-caption));
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.site-footer__nav-heading {
    font-size: var(--text-sm, 0.8rem);
    font-weight: var(--weight-semibold, var(--font-weight-semibold));
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 var(--space-3, 0.75rem);
}

.site-footer__nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
}

.site-footer__nav a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: var(--text-sm, 0.875rem);
    transition: color var(--transition-default, 0.2s ease);
}

.site-footer__nav a:hover {
    color: white;
}

.site-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: var(--space-6, var(--space-lg));
    padding-top: var(--space-5, var(--space-md));
}

.site-footer__copyright {
    font-size: var(--text-sm, var(--font-size-caption));
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

.site-footer__legal {
    font-size: var(--text-sm, var(--font-size-caption));
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

.site-footer__legal a {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: color var(--transition-default, 0.2s ease);
}

.site-footer__legal a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.site-footer__legal-sep {
    margin: 0 0.25em;
}

/* Override body.page-home blanket color rules */
body.page-home .site-footer p,
body.page-home .site-footer h3,
body.page-home .site-footer a {
    color: inherit;
}


/* ==========================================================================
   §19 — Accessibility
   ========================================================================== */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-dark);
    color: white;
    padding: 8px 16px;
    z-index: 100;
    text-decoration: none;
    font-size: var(--font-size-small);
    transition: top var(--transition-default);
}

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

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-announcement {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ==========================================================================
   §20 — Animation
   ========================================================================== */

@keyframes cardEnter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.job-card--entering {
    animation: cardEnter 0.3s ease-out;
}


/* ==========================================================================
   §21 — Readiness Badge
   ========================================================================== */

.badge-readiness {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.badge-readiness--high {
    background-color: var(--color-success-ring);
    color: var(--color-success-text);
}

.badge-readiness--moderate {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.badge-readiness--low {
    background-color: var(--color-danger-bg);
    color: var(--color-danger-text);
}

.badge-readiness--coming-soon {
    background-color: var(--color-gray-badge-bg);
    color: var(--color-gray-badge);
}

/* Hero variant — larger, with letter-spacing */
.hero .badge-readiness {
    letter-spacing: 2px;
}


/* ==========================================================================
   §22 — Deploy Status Badge
   ========================================================================== */

.badge-deploy {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.badge-deploy--deployable {
    background-color: var(--color-success-ring);
    color: var(--color-success-text);
}

.badge-deploy--conditional {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.badge-deploy--pilot {
    background-color: var(--color-pilot-bg);
    color: var(--color-pilot-text);
}

.badge-deploy--rd {
    background-color: var(--color-gray-badge-bg);
    color: var(--color-gray-muted);
}


/* ==========================================================================
   §23 — Evidence Level Badge
   ========================================================================== */

.badge-evidence {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.badge-evidence--high {
    background-color: var(--color-success-ring);
    color: var(--color-success-text);
}

.badge-evidence--medium {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.badge-evidence--low {
    background-color: var(--color-gray-badge-bg);
    color: var(--color-gray-light);
}


/* ==========================================================================
   §24 — Metric Chip
   ========================================================================== */

.metric-chip {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-xs);
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    padding: 6px 12px;
    font-size: var(--font-size-small);
}

.metric-chip__value {
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.metric-chip__unit {
    font-weight: var(--font-weight-regular);
    color: var(--color-text-muted);
}


/* ==========================================================================
   §25 — Constraint Chip
   ========================================================================== */

.constraint-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background-color: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    border-radius: 0.25rem;
    padding: 5px 10px;
    font-size: var(--font-size-caption);
    color: var(--color-warning-text);
}

.constraint-chip__icon {
    font-size: 0.7rem;
}


/* ==========================================================================
   §26 — Job Coverage Badge
   ========================================================================== */

.badge-coverage {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
    border: 1px solid;
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-medium);
    margin: 0.25rem;
}

.badge-coverage--strong {
    background-color: var(--color-success-ring);
    border-color: #86efac;
    color: var(--color-success-text);
}

.badge-coverage--moderate {
    background-color: var(--color-coverage-moderate-bg);
    border-color: var(--color-coverage-moderate-border);
    color: var(--color-coverage-moderate-text);
}

.badge-coverage--weak {
    background-color: var(--color-danger-bg);
    border-color: var(--color-danger-border);
    color: var(--color-danger-text);
}


/* ==========================================================================
   §27 — Evidence Quote Box
   ========================================================================== */

.evidence-quote {
    background-color: var(--color-bg-light);
    border-left: 3px solid var(--color-success);
    border-radius: 0 0.25rem 0.25rem 0;
    padding: 14px;
    margin-bottom: var(--space-md);
}

.evidence-quote__text {
    font-style: italic;
    color: var(--color-gray-muted);
    margin-bottom: var(--space-sm);
    line-height: var(--line-height-body);
}

.evidence-quote__attribution {
    font-size: var(--font-size-caption);
    color: var(--color-text-light);
}


/* ==========================================================================
   §28 — 5-Segment Readiness Meter
   ========================================================================== */

.readiness-meter {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.readiness-meter__label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.readiness-meter__segments {
    display: flex;
    gap: 3px;
}

.readiness-segment {
    width: 20px;
    height: 6px;
    border-radius: 2px;
    border: 1px solid var(--color-border);
    background-color: transparent;
}

.readiness-segment--filled {
    border-color: transparent;
}

/* Green fill: 4-5 segments (70-100 score) */
.readiness-segment--success {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

/* Amber fill: 2-3 segments (30-69 score) */
.readiness-segment--warning {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
}

/* Red fill: 1 segment (0-29 score) */
.readiness-segment--danger {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}


/* ==========================================================================
   §29 — Tab Component
   ========================================================================== */

.robot-tab {
    padding: var(--space-sm) var(--space-md);
    border: none;
    border-bottom: 2px solid transparent;
    background-color: transparent;
    color: var(--color-text-muted);
    font-family: var(--font-family);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-default);
    white-space: nowrap;
}

.robot-tab:hover {
    color: var(--color-text);
}

.robot-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    background-color: var(--color-surface);
}


/* ==========================================================================
   §30 — Works/Breaks Condition List
   ========================================================================== */

.conditions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.conditions-grid__column-title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-text);
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-body);
}

.conditions-grid__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.conditions-grid__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    font-size: var(--font-size-small);
    color: var(--color-text);
}

.conditions-grid__icon--works {
    color: var(--color-success);
    flex-shrink: 0;
}

.conditions-grid__icon--breaks {
    color: var(--color-danger);
    flex-shrink: 0;
}


/* ==========================================================================
   §31 — Fit Matrix
   ========================================================================== */

.fit-matrix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.fit-matrix__column {
    padding: var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.fit-matrix__column--works h4 {
    color: var(--color-success-dark);
}

.fit-matrix__column--works h4::before {
    content: '\25CF ';
    color: var(--color-success);
}

.fit-matrix__column--degrades h4 {
    color: var(--color-warning-text);
}

.fit-matrix__column--degrades h4::before {
    content: '\25CF ';
    color: var(--color-warning);
}

.fit-matrix__column--breaks h4 {
    color: var(--color-danger-dark);
}

.fit-matrix__column--breaks h4::before {
    content: '\25CF ';
    color: var(--color-danger);
}

.fit-matrix__item {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--color-border);
}

.fit-matrix__item:last-child {
    border-bottom: none;
}


/* ==========================================================================
   §32 — Breadcrumbs
   ========================================================================== */

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
    font-size: var(--font-size-small);
    margin-bottom: var(--space-md);
    list-style: none;
    padding: 0;
}

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

.breadcrumb__link {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color var(--transition-default);
}

.breadcrumb__link:hover {
    color: white;
}

.breadcrumb__separator {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.7rem;
}

.breadcrumb__current {
    color: rgba(255, 255, 255, 0.9);
}

/* aria-current="page" styling */
.breadcrumb__link[aria-current="page"] {
    color: rgba(255, 255, 255, 0.9);
    font-weight: var(--font-weight-medium);
    pointer-events: none;
}


/* ==========================================================================
   §33 — Hero — Job Detail Variant (now uses shared .hero)
   ========================================================================== */

/* .hero--job-detail rules removed — job detail now uses shared .hero class */

.hero__verdict {
    font-size: var(--font-size-body);
    color: rgba(255, 255, 255, 0.85);
    max-width: 700px;
    margin: var(--space-md) auto 0;
    line-height: var(--line-height-body);
}


/* ==========================================================================
   §34 — Subtask Breakdown
   ========================================================================== */

.subtask-breakdown {
    margin-bottom: var(--space-xl);
}

.subtask-breakdown__title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-md);
}

.subtask-breakdown__subtitle {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}

/* Group A: Where Robots Work */
.subtask-group-a {
    margin-bottom: var(--space-xl);
}

.subtask-group-a__title {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-md);
}

/* Subtask row */
.subtask-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-border);
    gap: var(--space-sm);
}

.subtask-row:last-child {
    border-bottom: none;
}

.subtask-row__name {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    flex: 1;
}

.subtask-row__meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

/* Status badges */
.status-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.status-badge--robot-ready {
    background-color: var(--color-success-ring);
    color: var(--color-success-text);
}

.status-badge--partial {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.status-badge--emerging {
    background-color: var(--color-pilot-bg);
    color: var(--color-pilot-text);
}

.status-badge--manual {
    background-color: var(--color-gray-badge-bg);
    color: var(--color-gray-muted);
}

/* Confidence tier */
.confidence-tier {
    font-size: var(--font-size-caption);
    color: var(--color-text-light);
    font-weight: var(--font-weight-medium);
}

/* Robot count */
.robot-count {
    font-size: var(--font-size-caption);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.deployment-count {
    font-size: var(--font-size-caption);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Group B: Still Crew-Led */
.subtask-group-b {
    margin-bottom: var(--space-xl);
}

.subtask-group-b__title {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.subtask-group-b__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.subtask-group-b__item {
    font-size: var(--font-size-small);
    color: var(--color-text-light);
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--color-bg-light);
    border-radius: 0.25rem;
}


/* ==========================================================================
   §35 — Brief Teaser
   ========================================================================== */

.brief-teaser {
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
    text-align: center;
}

.brief-teaser__headline {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-md);
}

.brief-teaser__description {
    color: var(--color-text-muted);
    max-width: 600px;
    margin: 0 auto var(--space-lg);
    line-height: var(--line-height-body);
}

.brief-teaser__cta {
    display: inline-block;
    padding: var(--space-sm) var(--space-xl);
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-default);
}

.brief-teaser__cta:hover {
    background-color: var(--color-primary-dark);
    color: white;
}

.brief-teaser__note {
    font-size: var(--font-size-small);
    color: var(--color-text-light);
    margin-top: var(--space-sm);
}


/* ==========================================================================
   §36 — CTA Footer Section
   ========================================================================== */

.cta-footer {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--space-2xl) var(--space-xl);
    margin-bottom: var(--space-xl);
    text-align: center;
}

.cta-footer__title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-lg);
}

.cta-footer__actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* Primary CTA */
.cta-primary {
    display: inline-block;
    padding: var(--space-sm) var(--space-xl);
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-default);
}

.cta-primary:hover {
    background-color: var(--color-primary-dark);
    color: white;
}

/* Secondary CTA */
.cta-secondary {
    display: inline-block;
    padding: var(--space-sm) var(--space-xl);
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-default);
}

.cta-secondary:hover {
    background-color: var(--color-primary);
    color: white;
}

/* Tertiary CTA */
.cta-tertiary {
    display: inline-block;
    padding: var(--space-sm) var(--space-md);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: color var(--transition-default);
}

.cta-tertiary:hover {
    color: var(--color-text);
}


/* ==========================================================================
   §37 — Auth Forms
   ========================================================================== */

.auth-container {
    max-width: 440px;
    margin: var(--space-2xl) auto;
    padding: 0 var(--space-md);
}

.auth-card {
    background-color: var(--color-surface);
    border-radius: 12px;
    padding: var(--space-xl);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.auth-card__title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    margin-bottom: var(--space-lg);
}

.auth-form__group {
    margin-bottom: var(--space-md);
}

.auth-form__label {
    display: block;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.auth-form__input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    color: var(--color-text);
    background-color: var(--color-surface);
    transition: all var(--transition-default);
}

.auth-form__input::placeholder {
    color: var(--color-text-light);
}

.auth-form__input:focus {
    outline: none;
    border-color: var(--color-dark);
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.1);
}

.auth-form__submit {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background-color var(--transition-default);
    margin-top: var(--space-sm);
}

.auth-form__submit:hover {
    background-color: var(--color-primary-dark);
}

.auth-form__footer {
    text-align: center;
    margin-top: var(--space-lg);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
}

.auth-form__footer a {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}


/* ==========================================================================
   §38 — Focus States (Per-Component)
   ========================================================================== */

/* General inputs */
.search-input:focus,
.auth-form__input:focus {
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.1);
}

/* Job cards */
.job-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.2);
}

/* Spectrum labels */
.spectrum-label:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.2);
}

/* Show-more toggle / robots toggle */
.robots-toggle:focus-visible,
.evidence-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.4);
}

/* Robot card details button */
.robot-card-v2__details-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.4);
}

/* Tab focus */
.robot-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.4);
}

/* CTA buttons */
.cta-primary:focus-visible,
.cta-secondary:focus-visible,
.brief-teaser__cta:focus-visible,
.auth-form__submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4);
}


/* ==========================================================================
   §39 — Hover Patterns (Per-Component)
   ========================================================================== */

/* Job card hover — see §16 (.job-card--real:hover) */

/* Robot card details hover — see §10 (.robot-card-v2__details-btn:hover) */

/* Tab hover — see §29 (.robot-tab:hover) */

/* Back link hover — see §4 (.back-link:hover) */

/* Blog tag hover — handled in blog.css */

/* Footer link hover — see §18 (.site-footer__link:hover) */

/* Slider thumb hover — see §13 */


/* ==========================================================================
   §40 — Responsive: Small (≥576px)
   ========================================================================== */

@media (min-width: 576px) {
    .jobs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fit-matrix {
        grid-template-columns: 1fr 1fr;
    }

    .hero {
        padding: 64px 0 56px;
    }

    .hero--homepage {
        padding: 45px 0 55px;
    }
}


/* ==========================================================================
   §41 — Responsive: Medium (≥768px)
   ========================================================================== */

@media (min-width: 768px) {
    .hero {
        padding: 100px 0 88px;
    }

    .hero--homepage {
        padding: 50px 0 60px;
    }

    .hero__verdict {
        font-size: 1.2rem;
    }

    .changes-band {
        flex-direction: row;
    }

    .conditions-grid {
        grid-template-columns: 1fr 1fr;
    }

    .site-header__inner {
        padding: var(--space-md) var(--space-xl);
    }
}


/* ==========================================================================
   §42 — Responsive: Large (≥992px)
   ========================================================================== */

@media (min-width: 992px) {
    .jobs-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ==========================================================================
   §43 — Responsive: Extra Large (≥1280px)
   ========================================================================== */

@media (min-width: 1280px) {
    .content-wrapper {
        padding-left: 0;
        padding-right: 0;
    }
}


/* ==========================================================================
   §44 — Responsive: Mobile-First Stacking (max-width adjustments)
   ========================================================================== */

@media (max-width: 575px) {
    .changes-band {
        flex-direction: column;
    }

    .conditions-grid {
        grid-template-columns: 1fr;
    }

    .fit-matrix {
        grid-template-columns: 1fr;
    }

    .site-header__inner {
        padding: var(--space-sm) var(--space-md);
    }

    .site-nav {
        gap: var(--space-md);
    }

    .site-logo__name {
        font-size: 0.95rem;
    }

    .site-nav__link {
        font-size: 0.95rem;
    }

    .subtask-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }

    .subtask-row__meta {
        flex-wrap: wrap;
    }

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    .cta-footer__actions {
        flex-direction: column;
    }
}


/* ==========================================================================
   §45 — Responsive: Slider Mobile
   ========================================================================== */

@media (max-width: 575px) {
    .spectrum-labels {
        flex-wrap: wrap;
        justify-content: center;
    }

    .spectrum-label {
        font-size: 0.65rem;
        padding: var(--space-xs) 6px;
    }
}


/* ==========================================================================
   §46 — Responsive: Robot Card Mobile
   ========================================================================== */

@media (max-width: 575px) {
    .robot-card-v2__tabs {
        gap: 0;
    }

    .robot-tab {
        padding: var(--space-xs) var(--space-sm);
        font-size: var(--font-size-caption);
    }

    .robot-card-v2__header {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ==========================================================================
   §47 — Responsive: Footer & Nav Mobile
   ========================================================================== */

@media (max-width: 768px) {
    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-5, var(--space-md));
    }

    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2, 0.5rem);
    }
}


/* ==========================================================================
   §48 — Responsive: Auth Forms Mobile
   ========================================================================== */

@media (max-width: 575px) {
    .auth-card {
        padding: var(--space-lg);
        border-radius: 8px;
    }
}


/* ==========================================================================
   §49 — Print Styles
   ========================================================================== */

@media print {
    .site-header,
    .site-footer,
    .skip-link,
    .back-link,
    .robots-toggle,
    .robot-card-v2__details-btn,
    .spectrum-slider,
    .spectrum-labels,
    .search-section,
    .cta-footer,
    .brief-teaser__cta,
    .cta-primary,
    .cta-secondary,
    .cta-tertiary {
        display: none !important;
    }

    body {
        background: white;
        color: black;
        font-size: 12pt;
    }

    .hero {
        background: none !important;
        color: black;
        padding: 10px 0;
    }

    .hero::before,
    .hero::after {
        display: none !important;
    }

    .hero h1,
    .hero p,
    .hero .breadcrumb__link,
    .hero .breadcrumb__current {
        color: black;
    }

    .job-card {
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }

    .robot-card-v2 {
        page-break-inside: avoid;
    }

    a {
        color: black;
        text-decoration: underline;
    }

    a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 0.8em;
        color: #555;
    }

    .content-wrapper {
        max-width: 100%;
        padding: 0;
    }
}


/* ==========================================================================
   §49B — Video Card Grid
   ========================================================================== */

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-md);
}

.video-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    transition: transform var(--transition-default),
                box-shadow var(--transition-default);
}

.video-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    color: var(--color-text);
}

.video-card__thumb-wrap {
    position: relative;
    background-color: var(--color-dark);
}

.video-card__thumb {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.video-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.85;
    transition: opacity var(--transition-default);
}

.video-card:hover .video-card__play {
    opacity: 1;
}

.video-card:hover .video-card__play svg path:first-child {
    fill: #f00;
    fill-opacity: 1;
}

.video-card__title {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    padding: var(--space-xs) var(--space-sm) 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-card__meta {
    font-size: var(--font-size-caption);
    color: var(--color-text-muted);
    padding: 0 var(--space-sm) var(--space-sm);
}

.video-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4);
}

@media (max-width: 575px) {
    .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: var(--space-sm);
    }
}

@media print {
    .video-grid {
        display: none !important;
    }
}


/* ==========================================================================
   §50 — Edge Cases: Empty States
   ========================================================================== */

.empty-state {
    text-align: center;
    padding: var(--space-2xl) var(--space-md);
    color: var(--color-text-muted);
}

.empty-state__text {
    font-size: var(--font-size-body);
    margin-bottom: var(--space-md);
}

.empty-state__link {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}


/* ==========================================================================
   §51 — Edge Cases: Long Content Overflow
   ========================================================================== */

.robot-card-v2__name,
.job-card__title,
.subtask-row__name {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Prevent layout break from very long metric values */
.metric-chip {
    max-width: 100%;
    overflow: hidden;
}

/* Table scrolling on small screens */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   §52 — Edge Cases: Single-item Grids & Minimum Heights
   ========================================================================== */

/* Ensure grid doesn't collapse with 1 item */
.jobs-grid:has(> :only-child) {
    max-width: 400px;
}

/* Minimum height for main content to maintain sticky footer */
#main-content {
    min-height: 200px;
}

/* Prevent robot card expanded area from collapsing */
.robot-card-v2__tab-panel {
    min-height: 60px;
}


/* ==========================================================================
   §53 — Homepage v2 (design_redo.md compliance)
   All rules in this section use design_redo tokens exclusively.
   Homepage-scoped overrides live under `.page-home` to avoid touching
   other pages.
   ========================================================================== */

/* -- Page-scoped surface + typography ------------------------------------ */
body.page-home {
    background-color: var(--surface-page);
    color: var(--ink-primary);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--lh-normal);
}

body.page-home h1,
body.page-home h2,
body.page-home h3,
body.page-home p {
    color: var(--ink-primary);
}

body.page-home a {
    color: var(--link);
}

body.page-home .site-nav__link {
    color: #1f3b68;
}

body.page-home a:hover {
    color: var(--link-hover);
}

/* Container shell for page sections */
.page-home .ric-container,
.page-about .ric-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-5);
}

.page-home .home-stack,
.page-about .home-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6) 0 var(--space-7);
}

/* -- Boxed Section (§6.1) ------------------------------------------------ */
.boxed-section {
    background-color: var(--surface-card);
    border: var(--border-card);
    border-radius: var(--radius-md);
    padding: var(--space-6);
}

.boxed-section__header {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-snug);
    color: var(--ink-primary);
    margin: 0 0 var(--space-4);
    letter-spacing: var(--tracking-tight);
}

.boxed-section__subline {
    font-size: var(--text-sm);
    color: var(--ink-tertiary);
    margin: 0 0 var(--space-5);
}

.boxed-section__body > p {
    color: var(--ink-secondary);
    margin: 0 0 var(--space-4);
}

.boxed-section__body > p:last-child {
    margin-bottom: 0;
}

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

/* -- Open Section (§6.2) — content on page background, no card wrapper -- */
.open-section {
    /* Intentionally no background, border, or border-radius */
}

.open-section__header {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-snug);
    color: var(--ink-primary);
    margin: 0 0 var(--space-4);
    letter-spacing: var(--tracking-tight);
}

/* -- Tinted Section (§6.3) — full-bleed teal wash, no card wrapper ------ */
.tinted-section {
    background-color: var(--color-section-tint);
    padding: var(--space-8) 0;
}
.tinted-section__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-5);
}
.tinted-section__header {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-snug);
    color: var(--ink-primary);
    margin: 0 0 var(--space-6);
    letter-spacing: var(--tracking-tight);
}

/* Steps timeline (3-col grid + connecting line) */
.steps-timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gutter);
    position: relative;
}

/* Horizontal connecting line at vertical center of numerals */
.steps-timeline::before {
    content: '';
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--surface-divider);
    z-index: 0;
}

/* Step element */
.step__numeral {
    font-size: 120px;
    font-weight: var(--weight-semibold);
    line-height: 1;
    color: var(--color-section-tint-muted);
    background-color: var(--color-section-tint);
    display: inline-block;
    position: relative;
    z-index: 1;
    padding-right: var(--space-3);
    margin: 0;
}
.step__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    color: var(--ink-tertiary);
    margin: var(--space-3) 0 var(--space-2);
}
.step__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-snug);
    color: var(--ink-primary);
    margin: 0 0 var(--space-2);
}
.step__body {
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
    color: var(--ink-secondary);
    margin: 0;
}

/* -- Hero (homepage) ----------------------------------------------------- */
.home-hero__headline {
    font-size: var(--text-3xl);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--ink-primary);
    margin: 0 0 var(--space-3);
}

.home-hero__subline {
    font-size: var(--text-base);
    line-height: var(--lh-normal);
    color: var(--ink-secondary);
    margin: 0 0 var(--space-5);
    max-width: 720px;
}

.home-hero__search {
    position: relative;
    margin: var(--space-5) auto var(--space-4);
    max-width: 640px;
}

.home-hero__search:first-child {
    margin-top: 0;
}

.home-hero__search .search-icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-tertiary);
    pointer-events: none;
    font-size: var(--text-base);
}

.home-hero__search-input {
    width: 100%;
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-7);
    border: var(--border-card);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--ink-primary);
    line-height: var(--lh-snug);
}

.home-hero__search-input::placeholder {
    color: var(--ink-tertiary);
}

.home-hero__search-input:focus {
    outline: none;
    border-color: var(--ink-primary);
    box-shadow: 0 0 0 2px var(--surface-inset);
}

.home-hero__browse {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    margin: 0;
}

.home-hero__browse a {
    color: var(--link);
    text-decoration: none;
}

.home-hero__browse a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

.home-hero__browse-sep {
    color: var(--ink-tertiary);
    margin: 0 var(--space-2);
}

/* Homepage search dropdown (scoped, squared) */
.home-hero__search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--surface-card);
    border: var(--border-card);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    max-height: 320px;
    overflow-y: auto;
    display: none;
}

.home-hero__search-dropdown.is-open {
    display: block;
}

.home-hero__search-dropdown .search-dropdown__item {
    display: block;
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    color: var(--ink-primary);
    border-bottom: var(--border-hairline);
    cursor: pointer;
}

.home-hero__search-dropdown .search-dropdown__item:last-child {
    border-bottom: none;
}

.home-hero__search-dropdown .search-dropdown__item:hover,
.home-hero__search-dropdown .search-dropdown__item.is-active {
    background: var(--surface-inset);
}

.home-hero__search-dropdown .search-dropdown__title {
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
}

.home-hero__search-dropdown .search-dropdown__meta {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    margin-top: 2px;
}

.home-hero__search-dropdown .search-dropdown__empty {
    padding: var(--space-4);
    color: var(--ink-tertiary);
    text-align: center;
}

/* -- Stat Strip (§6.3) --------------------------------------------------- */
.stat-strip {
    display: flex;
    background-color: var(--surface-inset);
    border: var(--border-hairline);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.stat-strip__item {
    flex: 1;
    padding: var(--space-4) var(--space-5);
    border-right: var(--border-hairline);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.stat-strip__item:last-child {
    border-right: none;
}

.stat-strip__value {
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
    line-height: var(--lh-tight);
    font-variant-numeric: tabular-nums;
}

.stat-strip__label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-tertiary);
}

/* -- Status Tag (§6.4) --------------------------------------------------- */
.status-tag {
    display: inline-block;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    line-height: var(--lh-snug);
    text-transform: none;
    background-color: var(--signal-manual-bg);
    color: var(--signal-manual);
}

.robot-card-v2__status-overlay {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
}

.status-tag--deployed {
    background-color: var(--signal-deployed-bg);
    color: var(--signal-deployed);
}

.status-tag--ready {
    background-color: var(--signal-ready-bg);
    color: var(--signal-ready);
}

.status-tag--emerging {
    background-color: var(--signal-emerging-bg);
    color: var(--signal-emerging);
}

.status-tag--manual {
    background-color: var(--signal-manual-bg);
    color: var(--signal-manual);
}

.status-tag--alert {
    background-color: var(--signal-alert-bg);
    color: var(--signal-alert);
}

/* -- Entity Card (§6.5 — homepage variant) ------------------------------ */
.entity-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 721px) {
    .entity-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .entity-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.entity-card {
    display: flex;
    flex-direction: column;
    padding: 22px 20px 20px;
    min-height: 180px;
    background-color: var(--surface-dark);
    border: 1px solid rgba(var(--accent-glow-rgb), 0.18);
    border-radius: var(--radius-md);
    color: var(--ink-inverse);
    text-decoration: none;
    transition: border-color var(--transition-default),
                background-color var(--transition-default);
    cursor: pointer;
}

.entity-card:hover {
    border-color: rgba(var(--accent-glow-rgb), 0.55);
    background-color: #122238;
    color: var(--ink-inverse);
}

.entity-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.entity-card .entity-card__title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    line-height: 1.3;
    color: var(--ink-inverse);
    word-break: break-word;
}

.entity-card__trade {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-tertiary);
    margin: 0;
}

.entity-card__description {
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
    color: var(--ink-secondary);
    margin: 0;
    /* explicit: no truncation */
    overflow: visible;
}

.entity-card__footer {
    display: flex;
    gap: 24px;
    margin-top: auto;
    padding-top: 0;
    border-top: none;
}

.entity-card__stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.entity-card__stat-value {
    font-size: 30px;
    font-weight: var(--weight-medium);
    line-height: 1;
    color: var(--accent-glow);
    font-variant-numeric: tabular-nums;
}

.entity-card__stat-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-weight: var(--weight-regular);
    color: #8B9AAE;
}

.entity-grid-footer {
    margin: var(--space-5) 0 0;
    font-size: var(--text-sm);
}

.entity-grid-footer a {
    color: var(--link);
    font-weight: var(--weight-medium);
}

.entity-grid-footer a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

/* -- Featured Hero Card ------------------------------------------------ */
.featured-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-6);
    background: var(--surface-card);
    border: var(--border-card);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-default);
    margin-bottom: var(--space-5);
}

.featured-hero:hover {
    border-color: var(--ink-primary);
}

.featured-hero__eyebrow {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-tertiary);
    margin: 0 0 var(--space-2) 0;
    font-weight: var(--weight-medium);
}

.featured-hero__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
    margin: 0 0 var(--space-4) 0;
}

.featured-hero__subtasks {
    display: flex;
    flex-direction: column;
}

.featured-hero__subtask-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: var(--border-hairline);
    gap: var(--space-4);
}

.featured-hero__subtask-row:last-child {
    border-bottom: none;
}

.featured-hero__subtask-name {
    font-size: var(--text-sm);
    color: var(--ink-primary);
}

.featured-hero__subtask-count {
    font-size: var(--text-xs);
    color: var(--ink-primary);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}

.featured-hero__stats {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-5);
    padding-left: var(--space-6);
    border-left: var(--border-hairline);
    min-width: 140px;
}

.featured-hero__stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.featured-hero__stat-value {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
    font-variant-numeric: tabular-nums;
}

.featured-hero__stat-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-tertiary);
}

/* -- Featured Tiles Grid ----------------------------------------------- */
.featured-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.featured-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--surface-card);
    border: var(--border-card);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-default);
}

.featured-tile:hover {
    border-color: var(--ink-primary);
}

.featured-tile__title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
    margin: 0 0 var(--space-3) 0;
}

.featured-tile__stats {
    display: flex;
    gap: var(--space-4);
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
}

.featured-tile__stat-value {
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
    font-variant-numeric: tabular-nums;
}

/* -- Featured Hero + Tiles Responsive ---------------------------------- */
@media (max-width: 959px) {
    .featured-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .featured-hero {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .featured-hero__stats {
        flex-direction: row;
        border-left: none;
        border-top: var(--border-hairline);
        padding-left: 0;
        padding-top: var(--space-4);
    }

    .featured-tiles {
        grid-template-columns: 1fr;
    }
}

/* -- Spectrum Dots (5-dot tier indicator on entity cards) --------------- */
.spectrum-dots {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
    flex-shrink: 0;
}

.spectrum-dots__row {
    display: flex;
    gap: 3px;
}

.spectrum-dots__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--ink-tertiary);
    background: transparent;
}

.spectrum-dots__dot--active {
    border-color: transparent;
}

.spectrum-dots__dot--alert.spectrum-dots__dot--active    { background-color: var(--signal-alert); }
.spectrum-dots__dot--manual.spectrum-dots__dot--active    { background-color: var(--signal-manual); }
.spectrum-dots__dot--emerging.spectrum-dots__dot--active  { background-color: var(--signal-emerging); }
.spectrum-dots__dot--ready.spectrum-dots__dot--active     { background-color: var(--signal-ready); }
.spectrum-dots__dot--deployed.spectrum-dots__dot--active  { background-color: var(--signal-deployed); }

.spectrum-dots__label {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    color: var(--ink-tertiary);
    white-space: nowrap;
}

/* -- Signal Bar (replaces rainbow spectrum) ----------------------------- */
.signal-bar {
    display: flex;
    width: 100%;
    height: 14px;
    border: var(--border-hairline);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background-color: var(--surface-inset);
}

.signal-bar__segment {
    height: 100%;
    border-right: 1px solid var(--surface-card);
}

.signal-bar__segment:last-child {
    border-right: none;
}

.signal-bar__segment--deployed { background-color: var(--signal-deployed); }
.signal-bar__segment--ready    { background-color: var(--signal-ready); }
.signal-bar__segment--emerging { background-color: var(--signal-emerging); }
.signal-bar__segment--manual   { background-color: var(--signal-manual); }
.signal-bar__segment--alert    { background-color: var(--signal-alert); }

.signal-legend {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.signal-legend__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-left: var(--space-3);
    border-left: 2px solid var(--signal-manual);
}

.signal-legend__item--deployed { border-left-color: var(--signal-deployed); }
.signal-legend__item--ready    { border-left-color: var(--signal-ready); }
.signal-legend__item--emerging { border-left-color: var(--signal-emerging); }
.signal-legend__item--manual   { border-left-color: var(--signal-manual); }
.signal-legend__item--alert    { border-left-color: var(--signal-alert); }

.signal-legend__count {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
    line-height: var(--lh-tight);
    font-variant-numeric: tabular-nums;
}

.signal-legend__label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-tertiary);
    line-height: var(--lh-snug);
}

.signal-insight {
    margin: var(--space-5) 0 0;
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    line-height: var(--lh-normal);
}

/* -- Spectrum Anchor (full-bleed dark band) ------------------------------ */
.spectrum-anchor {
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-secondary) 100%);
    color: var(--ink-inverse);
    padding: var(--space-8) 0;
}

.spectrum-anchor__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-5);
}

.spectrum-anchor__title,
body.page-home .spectrum-anchor__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    color: var(--ink-inverse);
    line-height: var(--lh-tight);
    margin: 0 0 var(--space-6);
}

.spectrum-anchor .signal-bar--lg {
    height: 24px;
    border: none;
    border-radius: var(--radius-sm);
}

.spectrum-anchor .signal-bar--lg .signal-bar__segment {
    border-right-color: var(--surface-dark);
}

.spectrum-anchor .signal-legend--dark {
    margin-top: var(--space-5);
}

.spectrum-anchor .signal-legend--dark .signal-legend__count {
    color: var(--ink-inverse);
}

.spectrum-anchor .signal-legend--dark .signal-legend__label {
    color: rgba(255, 255, 255, 0.7);
}

.spectrum-anchor .signal-legend--dark .signal-legend__item {
    border-left-color: rgba(255, 255, 255, 0.2);
}

.spectrum-anchor .signal-insight--dark {
    color: rgba(255, 255, 255, 0.75);
}

/* Dark evidence section overrides */
.spectrum-anchor .rd-section__heading {
    color: var(--ink-inverse);
}

/* The .rd-logo-grid* dark overrides were removed with the grid itself (§55):
   S4c replaced it and lives OUTSIDE .spectrum-anchor, on the page's normal
   ground, so it needs no inverse treatment. */

/* -- Depth Proof (subtask breakdown in dark anchor) ---------------------- */
.depth-proof__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 var(--space-3);
}

.depth-proof__headline,
body.page-home .depth-proof__headline {
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    color: var(--ink-inverse);
    line-height: var(--lh-tight);
    margin: 0 0 var(--space-6);
}

.depth-proof__rows {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.depth-proof__row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.depth-proof__row:last-child {
    border-bottom: none;
}

.depth-proof__dots {
    flex-shrink: 0;
    align-items: center;
}

.depth-proof__dots .spectrum-dots__dot {
    border-color: rgba(255, 255, 255, 0.25);
}

.depth-proof__name {
    font-weight: var(--weight-semibold);
    color: var(--ink-inverse);
    white-space: nowrap;
    min-width: 200px;
    flex-shrink: 0;
}

.depth-proof__note {
    flex: 1;
    color: rgba(255, 255, 255, 0.65);
    font-size: var(--text-sm);
    min-width: 0;
}

.depth-proof__count {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    text-align: right;
    min-width: 80px;
}

.depth-proof__divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: var(--space-2) 0;
}

.depth-proof__summary {
    margin-top: var(--space-5);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.75);
}

.depth-proof__cta {
    display: inline-block;
    margin-top: var(--space-4);
    color: var(--ink-inverse);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    transition: border-color 0.15s;
}

.depth-proof__cta:hover {
    border-bottom-color: var(--ink-inverse);
}

/* -- Persona grid -------------------------------------------------------- */
.persona-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.persona-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* -- Persona artifact (mini deliverable preview) -- */
.persona-artifact {
    background: var(--surface-card);
    border: var(--border-card);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
}
.persona-artifact__header {
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--surface-inset);
}
.persona-artifact__badge {
    font-size: 10px;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-tertiary);
}
.persona-artifact__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 6px;
}
.persona-artifact__row:last-child { margin-bottom: 0; }
.persona-artifact__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.persona-artifact__dot--ready { background-color: var(--color-success); }
.persona-artifact__dot--manual { background-color: var(--color-warning); }
.persona-artifact__line {
    height: 6px;
    background-color: var(--surface-inset);
    border-radius: 3px;
}
.persona-artifact__line--long { width: 100%; }
.persona-artifact__line--medium { width: 65%; }
.persona-artifact__line--short { width: 40%; }

.persona-artifact__row--metric {
    justify-content: space-between;
}
.persona-artifact__metric-label {
    color: var(--ink-tertiary);
    font-size: var(--text-xs);
}
.persona-artifact__metric-value {
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}
.persona-artifact__metric-value--positive {
    color: var(--color-success-text);
}

.persona-artifact__tag {
    font-size: 10px;
    font-weight: var(--weight-semibold);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    white-space: nowrap;
}
.persona-artifact__tag--ready {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
}
.persona-artifact__tag--emerging {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
}
.persona-artifact__tag--manual {
    background-color: var(--surface-inset);
    color: var(--ink-tertiary);
}

/* -- Persona role label -- */
.persona-item__role {
    font-size: 11px;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    margin: 0;
}

.persona-item__heading {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
    margin: 0;
    line-height: var(--lh-snug);
}

.persona-item__body {
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
    color: var(--ink-secondary);
    margin: 0;
}

.persona-grid-footer {
    margin: var(--space-5) 0 0;
    text-align: center;
}

.persona-grid-footer__btn {
    display: inline-block;
    padding: var(--space-2) var(--space-5);
    background-color: var(--color-primary);
    color: white;
    border-radius: 8px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.persona-grid-footer__btn:hover {
    background-color: var(--color-primary-dark);
    color: white;
}

/* -- Brief callout v2 (used by jobs_index.html only) -------------------- */
.brief-callout-v2__preview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-tertiary);
}

.brief-callout-v2__preview span {
    padding: 2px 6px;
    background-color: var(--surface-inset);
    border-radius: var(--radius-sm);
    color: var(--ink-secondary);
}

.brief-callout-v2__link {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--link);
    margin-top: var(--space-2);
}

.brief-callout-v2__link:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

/* -- Brief split layout (homepage S6, tinted two-column) ---------------- */
.brief-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
    align-items: center;
}
.brief-split__body {
    font-size: var(--text-base);
    line-height: var(--lh-normal);
    color: var(--ink-secondary);
    margin: 0 0 var(--space-5);
}
.brief-split__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-5);
}
.brief-split__pills span {
    padding: 4px 10px;
    background-color: var(--color-section-tint-muted);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--ink-secondary);
}
.brief-split__link {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--link);
}
.brief-split__link:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

/* -- Brief mock (static document preview card) -------------------------- */
.brief-mock {
    background: var(--surface-card);
    border: var(--border-card);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}
.brief-mock::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: linear-gradient(to bottom, transparent, var(--surface-card));
    pointer-events: none;
}
.brief-mock__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-4);
    border-bottom: var(--border-card);
}
.brief-mock__badge {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
    background-color: var(--color-section-tint);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}
.brief-mock__title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
}
.brief-mock__section {
    margin-bottom: var(--space-4);
}
.brief-mock__section:last-child {
    margin-bottom: 0;
}
.brief-mock__label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-tertiary);
    margin-bottom: var(--space-2);
}
.brief-mock__line {
    height: 6px;
    background-color: var(--surface-inset);
    border-radius: 3px;
    margin-bottom: 6px;
}
.brief-mock__line--long { width: 100%; }
.brief-mock__line--medium { width: 70%; }
.brief-mock__line--short { width: 45%; }
.brief-mock__check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 6px;
    color: var(--color-primary);
    font-size: var(--text-xs);
}
.brief-mock__check .brief-mock__line {
    flex: 1;
    margin-bottom: 0;
}
.brief-mock__two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

/* -- CTA footer (shared component — dark variant, squared) -------------- */
.boxed-section--cta {
    background-color: var(--surface-dark);
    color: var(--ink-inverse);
    border-color: var(--surface-dark);
    text-align: left;
    padding: var(--space-6);
}

.boxed-section--cta .cta-footer__title {
    color: var(--ink-inverse);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    margin: 0 0 var(--space-4);
    line-height: var(--lh-snug);
}

.boxed-section--cta .cta-footer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: flex-start;
}

.boxed-section--cta .cta-primary {
    background-color: var(--ink-inverse);
    color: var(--surface-dark);
    border: 1px solid var(--ink-inverse);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.boxed-section--cta .cta-primary:hover {
    background-color: var(--surface-inset);
    color: var(--surface-dark);
}

.boxed-section--cta .cta-secondary {
    background-color: transparent;
    color: var(--ink-inverse);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.boxed-section--cta .cta-secondary:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--ink-inverse);
    border-color: var(--ink-inverse);
}

.boxed-section--cta .cta-tertiary {
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--text-sm);
    padding: var(--space-3) var(--space-3);
}

.boxed-section--cta .cta-tertiary:hover {
    color: var(--ink-inverse);
}

/* -- Final CTA Anchor (full-bleed light band) ----------------------------- */
.cta-anchor {
    background-color: var(--color-section-tint);
    color: var(--ink-primary);
    padding: var(--space-8) 0;
    text-align: center;
}

.cta-anchor__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-5);
}

.cta-anchor__title,
body.page-home .cta-anchor__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
    line-height: var(--lh-tight);
    margin: 0 0 var(--space-6);
}

.cta-primary--on-dark {
    background-color: var(--ink-inverse);
    color: var(--surface-dark);
    border: 1px solid var(--ink-inverse);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    display: inline-block;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.cta-primary--on-dark:hover {
    background-color: var(--surface-inset);
    color: var(--surface-dark);
}

.cta-anchor__subtext,
body.page-home .cta-anchor__subtext {
    color: var(--ink-secondary);
    font-size: var(--text-base);
    margin: 0 0 var(--space-6);
}

.cta-anchor__actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

.cta-anchor .cta-primary {
    background-color: var(--surface-dark);
    color: white;
}

.cta-anchor .cta-primary:hover {
    background-color: var(--color-dark);
    color: white;
}

.cta-secondary--on-dark,
body.page-home .cta-secondary--on-dark {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cta-secondary--on-dark:hover,
body.page-home .cta-secondary--on-dark:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}

/* -- Responsive: tablet (≤ 959px) --------------------------------------- */
@media (max-width: 959px) {
    .steps-timeline {
        gap: var(--space-4);
    }
    .brief-split {
        gap: var(--space-5);
    }
}

/* -- Responsive: mobile stack (≤ 720px) --------------------------------- */
@media (max-width: 720px) {
    .hero {
        padding: 48px 0 40px;
    }

    .page-home .ric-container,
    .page-about .ric-container {
        padding: 0 var(--space-4);
    }

    .boxed-section {
        padding: var(--space-5);
    }

    .home-hero__headline {
        font-size: var(--text-2xl);
    }

    .stat-strip {
        flex-direction: column;
    }

    .stat-strip__item {
        border-right: none;
        border-bottom: var(--border-hairline);
    }

    .stat-strip__item:last-child {
        border-bottom: none;
    }

    .steps-timeline {
        grid-template-columns: 1fr;
    }
    .steps-timeline::before {
        display: none;
    }
    .step__numeral {
        font-size: 64px;
        background-color: transparent;
        padding-right: var(--space-2);
        float: left;
        margin-right: var(--space-3);
    }

    .persona-grid {
        grid-template-columns: 1fr;
    }

    .brief-split {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
    .brief-mock {
        max-width: 360px;
    }

    .signal-legend {
        grid-template-columns: 1fr 1fr;
    }

    .spectrum-anchor {
        padding: var(--space-7) 0;
    }

    .spectrum-anchor__title {
        font-size: var(--text-xl);
    }

    .spectrum-anchor .signal-bar--lg {
        height: 20px;
    }

    .spectrum-anchor .signal-legend--dark {
        grid-template-columns: 1fr;
    }

    .depth-proof__headline {
        font-size: var(--text-xl);
    }

    .depth-proof__row {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .depth-proof__name {
        min-width: 0;
        flex: 1 1 100%;
        order: 1;
    }

    .depth-proof__dots {
        order: 0;
    }

    .depth-proof__note {
        flex: 1 1 100%;
        order: 2;
    }

    .depth-proof__count {
        order: 3;
        min-width: auto;
    }

    .boxed-section--cta .cta-footer__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .boxed-section--cta .cta-primary,
    .boxed-section--cta .cta-secondary {
        text-align: center;
    }

    .cta-anchor {
        padding: var(--space-7) 0;
    }

    .cta-anchor__title {
        font-size: var(--text-xl);
    }

    .cta-anchor__actions {
        flex-direction: column;
        align-items: center;
        max-width: 320px;
        margin: 0 auto;
    }

    .cta-primary--on-dark,
    .cta-secondary--on-dark {
        display: block;
        text-align: center;
        width: 100%;
    }
}

/* ============================================================================
   § 54 — design_redo v2 for Jobs Index, Job Detail, About
   Page-scoped body overrides + component rebuilds that reuse §53 tokens.
   ============================================================================ */

body.page-jobs-index,
body.page-robots-index,
body.page-job-detail,
body.page-about,
body.page-humanoids-hub {
    background: var(--surface-page);
    color: var(--ink-primary);
    font-family: var(--font-body);
}

body.page-jobs-index .content-wrapper,
body.page-robots-index .content-wrapper,
body.page-job-detail .container,
body.page-about .content-wrapper {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}

/* Vertical stack for each page (same rhythm as .home-stack) */
body.page-jobs-index main,
body.page-robots-index main,
body.page-job-detail main,
body.page-about main,
body.page-humanoids-hub main {
    padding: 0;
}

body.page-jobs-index main > section,
body.page-robots-index main > section,
body.page-job-detail main > section,
body.page-job-detail main > .ric-container,
body.page-about main > .ric-container,
body.page-humanoids-hub main > section,
body.page-humanoids-hub main > .ric-container {
    margin-bottom: var(--space-6);
}

body.page-jobs-index main > section:last-of-type,
body.page-robots-index main > section:last-of-type,
body.page-job-detail main > section:last-of-type,
body.page-job-detail main > .ric-container:last-of-type,
body.page-about main > .ric-container:last-of-type,
body.page-humanoids-hub main > section:last-of-type,
body.page-humanoids-hub main > .ric-container:last-of-type {
    margin-bottom: 0;
}

/* No gap between robot cards section and CTA footer */
body.page-job-detail main > section.tinted-section:has(+ .cta-footer-section) {
    margin-bottom: 0;
}

/* -----------  JOBS INDEX  ----------- */

/* ── Hero compact variant ── */
.hero--compact {
    padding: var(--space-7) 0 var(--space-6);
}



/* ── Jobs/Robots layout: sidebar + main ── */
.jobs-layout,
.robots-layout {
    display: grid;
    grid-template-columns: var(--rail-nav) 1fr;
    gap: var(--gutter);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-5) var(--space-5) var(--space-7);
}

/* ── Sidebar ── */
.jobs-sidebar,
.robots-sidebar {
    position: sticky;
    top: var(--space-5);
    max-height: calc(100vh - var(--space-7));
    overflow-y: auto;
    background: var(--surface-card);
    border: var(--border-card);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.jobs-sidebar__close,
.robots-sidebar__close {
    display: none;
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    background: none;
    border: none;
    font-size: var(--text-2xl);
    color: var(--ink-secondary);
    cursor: pointer;
    line-height: 1;
}

.jobs-sidebar__section,
.robots-sidebar__section {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: var(--border-hairline);
}

.jobs-sidebar__section:last-of-type,
.robots-sidebar__section:last-of-type {
    border-bottom: none;
    margin-bottom: var(--space-2);
    padding-bottom: 0;
}

.jobs-sidebar__heading,
.robots-sidebar__heading {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--ink-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin: 0 0 var(--space-2);
}

.jobs-sidebar__sort-group,
.robots-sidebar__sort-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.jobs-sidebar__sort-btn,
.robots-sidebar__sort-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--space-1) var(--space-2);
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    font-size: var(--text-sm);
    font-family: var(--font-body);
    color: var(--ink-secondary);
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}

.jobs-sidebar__sort-btn:hover,
.robots-sidebar__sort-btn:hover {
    background: var(--surface-inset);
    color: var(--ink-primary);
}

.jobs-sidebar__sort-btn--active,
.robots-sidebar__sort-btn--active {
    background: var(--surface-inset);
    color: var(--ink-primary);
    font-weight: var(--weight-semibold);
}

.jobs-sidebar__filter-group,
.robots-sidebar__filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.jobs-sidebar__checkbox,
.robots-sidebar__checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    cursor: pointer;
    padding: var(--space-1) 0;
}

.jobs-sidebar__checkbox input[type="checkbox"],
.robots-sidebar__checkbox input[type="checkbox"] {
    accent-color: var(--link);
    margin: 0;
}

.jobs-sidebar__reset,
.robots-sidebar__reset {
    display: block;
    font-size: var(--text-xs);
    color: var(--link);
    text-decoration: none;
    margin-top: var(--space-2);
}

.jobs-sidebar__reset:hover,
.robots-sidebar__reset:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

/* ── Main content area ── */
.jobs-main,
.robots-main {
    min-width: 0;
}

/* ── Search bar ── */
.jobs-search,
.robots-search {
    margin-bottom: var(--space-4);
}

.jobs-search__bar,
.robots-search__bar {
    display: flex;
    gap: var(--space-3);
    align-items: stretch;
}

.jobs-search__input-wrap,
.robots-search__input-wrap {
    flex: 1;
    position: relative;
}

.jobs-search__icon,
.robots-search__icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-tertiary);
    pointer-events: none;
}

.jobs-search__input,
.robots-search__input {
    width: 100%;
    padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 20px);
    border: var(--border-hairline);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-family: var(--font-body);
    color: var(--ink-primary);
    background: var(--surface-card);
    outline: none;
    transition: border-color 150ms ease;
}

.jobs-search__input:focus,
.robots-search__input:focus {
    border-color: var(--link);
}

.jobs-search__filter-toggle,
.robots-search__filter-toggle {
    display: none;
    padding: var(--space-3) var(--space-4);
    border: var(--border-hairline);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    font-size: var(--text-sm);
    font-family: var(--font-body);
    color: var(--ink-secondary);
    cursor: pointer;
    white-space: nowrap;
    align-items: center;
    gap: var(--space-2);
}

.jobs-search__status,
.robots-search__status {
    font-size: var(--text-sm);
    color: var(--ink-tertiary);
    margin-top: var(--space-2);
}

.jobs-search__empty,
.robots-search__empty {
    text-align: center;
    padding: var(--space-5) var(--space-3);
    color: var(--ink-secondary);
    display: none;
    margin-top: var(--space-3);
}

.jobs-search__empty a,
.robots-search__empty a {
    color: var(--link);
}

/* ── Jobs search dropdown ── */
.jobs-search__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface-card);
    border: var(--border-hairline);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    max-height: 320px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.jobs-search__dropdown.is-open {
    display: block;
}

.jobs-search__dropdown .search-dropdown__item {
    display: block;
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    color: inherit;
    border-bottom: var(--border-hairline);
    cursor: pointer;
}

.jobs-search__dropdown .search-dropdown__item:last-child {
    border-bottom: none;
}

.jobs-search__dropdown .search-dropdown__item:hover,
.jobs-search__dropdown .search-dropdown__item.is-active {
    background: var(--surface-inset);
}

.jobs-search__dropdown .search-dropdown__title {
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
}

.jobs-search__dropdown .search-dropdown__meta {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    margin-top: 2px;
}

.jobs-search__dropdown .search-dropdown__empty {
    padding: var(--space-4);
    color: var(--ink-tertiary);
    text-align: center;
}

/* ── Card grid ── */
.page-jobs-index .jobs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

/* ── Redesigned job card ── */
.page-jobs-index .job-card,
.page-jobs-index .job-card--real {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--surface-card);
    border: var(--border-card);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--ink-primary);
    box-shadow: none;
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
    min-height: 0;
}

.page-jobs-index .job-card:hover,
.page-jobs-index .job-card--real:hover {
    border-color: var(--signal-ready);
    background: var(--surface-card);
    box-shadow: 0 4px 16px rgba(31, 122, 140, 0.10);
}

.page-jobs-index .job-card:focus-visible {
    border-color: var(--signal-ready);
    box-shadow: 0 0 0 3px rgba(31, 122, 140, 0.25);
    outline: none;
}

.page-jobs-index .job-card--real::after {
    display: none;
}

.page-jobs-index .job-card__trade-tag {
    display: inline-block;
    align-self: flex-start;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--ink-secondary);
    background: var(--surface-inset);
    border: var(--border-hairline);
    border-radius: var(--radius-sm);
    padding: 2px var(--space-2);
    margin: 0 0 var(--space-1);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.page-jobs-index .job-card__title {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
    margin: 0;
    line-height: var(--lh-snug);
    overflow: visible;
    text-overflow: clip;
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
}

/* ── Readiness fraction ── */
.page-jobs-index .job-card__readiness {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: var(--space-1) 0;
}

.page-jobs-index .job-card__readiness-fraction {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.page-jobs-index .job-card__readiness-num {
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
    line-height: 1;
}

.page-jobs-index .job-card__readiness-sep {
    font-size: var(--text-lg);
    color: var(--ink-tertiary);
}

.page-jobs-index .job-card__readiness-den {
    font-size: var(--text-lg);
    color: var(--ink-tertiary);
}

.page-jobs-index .job-card__readiness-label {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* ── Progress bar ── */
.page-jobs-index .job-card__progress {
    display: flex;
    gap: 2px;
    height: 6px;
    margin-bottom: var(--space-2);
}

.page-jobs-index .job-card__progress-block {
    flex: 1;
    border-radius: 1px;
    background: var(--surface-inset);
}

/* Coverage tier: None (0%) */
.page-jobs-index .job-card__progress[data-coverage-tier="none"] .job-card__progress-block {
    background: #F1EFE8;
}
.page-jobs-index .job-card__progress[data-coverage-tier="none"] .job-card__progress-block--filled {
    background: #D3D1C7;
}

/* Coverage tier: Emerging (1–33%) */
.page-jobs-index .job-card__progress[data-coverage-tier="emerging"] .job-card__progress-block {
    background: #FAEEDA;
}
.page-jobs-index .job-card__progress[data-coverage-tier="emerging"] .job-card__progress-block--filled {
    background: #EF9F27;
}

/* Coverage tier: Moderate (34–66%) */
.page-jobs-index .job-card__progress[data-coverage-tier="moderate"] .job-card__progress-block {
    background: #E1F5EE;
}
.page-jobs-index .job-card__progress[data-coverage-tier="moderate"] .job-card__progress-block--filled {
    background: #5DCAA5;
}

/* Coverage tier: Mature (67–100%) */
.page-jobs-index .job-card__progress[data-coverage-tier="mature"] .job-card__progress-block {
    background: #E1F5EE;
}
.page-jobs-index .job-card__progress[data-coverage-tier="mature"] .job-card__progress-block--filled {
    background: #0F6E56;
}

/* ── Top tasks ── */
.page-jobs-index .job-card__top-tasks {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    margin: 0;
    line-height: var(--lh-normal);
}

/* ── Stats block ── */
.page-jobs-index .job-card__stats {
    display: flex;
    padding-top: var(--space-3);
    border-top: var(--border-hairline);
    margin-top: auto;
}

.page-jobs-index .job-card__stat-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.page-jobs-index .job-card__stat-cell + .job-card__stat-cell {
    border-left: 1px solid var(--surface-divider);
}

.page-jobs-index .job-card__stat-value {
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
    line-height: 1;
}

.page-jobs-index .job-card__stat-label {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.page-jobs-index .job-card--search-hidden {
    display: none !important;
}

/* ── Brief callout (full-width below grid) ── */
.page-jobs-index .jobs-brief-callout {
    max-width: var(--container-max);
    margin: var(--space-7) auto var(--space-5);
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}

/* ── Mobile: sidebar overlay ── */
@media (max-width: 720px) {
    .jobs-layout,
    .robots-layout {
        grid-template-columns: 1fr;
    }

    .jobs-sidebar,
    .robots-sidebar {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1000;
        max-height: 100vh;
        border-radius: 0;
        border: none;
        overflow-y: auto;
        padding: var(--space-6) var(--space-5);
    }

    .jobs-sidebar--open,
    .robots-sidebar--open {
        display: block;
    }

    .jobs-sidebar__close,
    .robots-sidebar__close {
        display: block;
    }

    .jobs-search__filter-toggle,
    .robots-search__filter-toggle {
        display: flex;
    }

    .page-jobs-index .jobs-grid {
        grid-template-columns: 1fr;
    }

    .robots-grid {
        grid-template-columns: 1fr;
    }

    .hero--compact {
        padding: var(--space-6) 0 var(--space-5);
    }

    .hero--compact h1 {
        font-size: var(--text-xl);
    }
}

/* -----------  JOB DETAIL  ----------- */

/* Hero box — replaces dark gradient */
/* .hero--job-detail overrides removed — now uses shared .hero class */

/* Container shell for job-detail sections */
.page-job-detail .ric-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-6) var(--space-5);
}

/* Subtask breakdown box */
.page-job-detail .subtask-breakdown {
    padding: var(--space-6);
    background: var(--surface-card);
    border: var(--border-card);
    border-radius: var(--radius-md);
    max-width: none;
}

.page-job-detail .subtask-breakdown__title {
    font-family: var(--font-body);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
    letter-spacing: var(--tracking-tight);
    margin: 0 0 var(--space-2);
}

/* subtask-breakdown__subtitle removed — replaced by __readiness block */

.page-job-detail .subtask-group-a__title,
.page-job-detail .subtask-group-b__title {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
    letter-spacing: var(--tracking-tight);
    margin: var(--space-4) 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: var(--border-hairline);
}

.page-job-detail .subtask-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: var(--border-hairline);
    background: transparent;
    border-radius: 0;
}

.page-job-detail .subtask-row:last-child {
    border-bottom: none;
}

.page-job-detail .subtask-row__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.page-job-detail .subtask-row__name {
    color: var(--ink-primary);
    font-weight: var(--weight-medium);
    font-size: var(--text-sm);
}

.page-job-detail .subtask-row__condition,
.page-job-detail .subtask-row__blocker {
    color: var(--ink-tertiary);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular, 400);
    line-height: 1.4;
}

.page-job-detail .subtask-row__badge {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
}

.page-job-detail .subtask-row__badge--crew-led {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--ink-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    background: var(--surface-inset);
    border-radius: var(--radius-sm);
}

.page-job-detail .subtask-row--crew-led {
    padding: var(--space-3) 0;
    border-bottom: var(--border-hairline);
}

.page-job-detail .subtask-row--crew-led:last-child {
    border-bottom: none;
}

.page-job-detail .subtask-row__meta {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    font-size: var(--text-xs);
}

.page-job-detail .subtask-row__meta .confidence-tier {
    color: var(--ink-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.page-job-detail .subtask-row__meta .robot-count {
    color: var(--ink-secondary);
}

.page-job-detail .subtask-row__meta .deployment-count {
    color: var(--ink-secondary);
}

/* Group-a header flex wrapper */
.page-job-detail .subtask-group-a__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: var(--space-4) 0 var(--space-3);
}
.page-job-detail .subtask-group-a__col-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-tertiary);
    font-weight: var(--weight-semibold);
}

/* Right column (metrics + bar) */
.page-job-detail .subtask-row__metrics {
    flex-shrink: 0;
    width: 156px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.page-job-detail .subtask-row__metrics-line {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
}
.page-job-detail .subtask-row__metrics-num {
    font-weight: var(--weight-medium);
    color: var(--ink-primary);
}
.page-job-detail .subtask-row__metrics-unit {
    color: var(--ink-secondary);
}

/* Deployment bar (track + fill) */
.page-job-detail .subtask-row__bar-track {
    height: 4px;
    background: var(--surface-inset);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.page-job-detail .subtask-row__bar-fill {
    height: 100%;
    background: rgba(15, 26, 46, 0.7);
    border-radius: var(--radius-sm);
}

/* Status badges inside subtask rows — map to status-tag visual */
.page-job-detail .status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.page-job-detail .status-badge--robot-ready {
    background: var(--signal-deployed-bg);
    color: var(--signal-deployed);
    border-color: var(--signal-deployed);
}

.page-job-detail .status-badge--partial {
    background: var(--signal-ready-bg);
    color: var(--signal-ready);
    border-color: var(--signal-ready);
}

.page-job-detail .status-badge--emerging {
    background: var(--signal-emerging-bg);
    color: var(--signal-emerging);
    border-color: var(--signal-emerging);
}

.page-job-detail .status-badge--manual {
    background: var(--signal-manual-bg);
    color: var(--signal-manual);
    border-color: var(--signal-manual);
}

/* Group B (crew-led) — now rendered as rows, old pill styles removed */

/* Brief teaser box */
.page-job-detail .brief-teaser {
    padding: var(--space-6);
    background: var(--surface-card);
    border: var(--border-card);
    border-radius: var(--radius-md);
    text-align: left;
    box-shadow: none;
}

.page-job-detail .brief-teaser__headline {
    font-family: var(--font-body);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
    margin: 0 0 var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.page-job-detail .brief-teaser__headline i {
    color: var(--signal-deployed);
    font-size: 1.25em;
}

.page-job-detail .brief-teaser__description {
    color: var(--ink-secondary);
    font-size: var(--text-base);
    line-height: var(--lh-normal);
    margin: 0 0 var(--space-4);
}

.page-job-detail .brief-teaser__note {
    margin-top: var(--space-3);
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
}

/* Robot grid — image-forward 2-column layout */
.page-job-detail .robot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

.page-job-detail .robot-card-v2 {
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 0.5px solid var(--surface-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    padding: 0;
    margin-bottom: 0;
    position: relative;
}

.page-job-detail .robot-card-v2::before {
    display: none;
}

.page-job-detail .status-tag {
    font-weight: var(--weight-medium);
    letter-spacing: 0.02em;
    background-color: var(--surface-inset);
    color: var(--ink-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.page-job-detail .status-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--ink-tertiary);
}

.page-job-detail .status-tag--deployed::before { background-color: var(--signal-deployed); }
.page-job-detail .status-tag--ready::before    { background-color: var(--signal-ready); }
.page-job-detail .status-tag--emerging::before  { background-color: var(--signal-emerging); }

.page-job-detail .status-tag--deployed,
.page-job-detail .status-tag--ready,
.page-job-detail .status-tag--emerging {
    background-color: var(--surface-inset);
    color: var(--ink-secondary);
}

.page-job-detail .robot-card-v2__image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    display: flex;
}

.page-job-detail .robot-card-v2__image img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.page-job-detail .robot-card-v2__image picture {
    width: 100%;
    height: 100%;
}

.page-job-detail .robot-card-v2__video-link {
    height: auto;
}

.robot-card-v2__video-link {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.robot-card-v2__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.85;
    transition: opacity 0.2s;
    pointer-events: none;
}

.robot-card-v2__video-link:hover .robot-card-v2__play {
    opacity: 1;
}

.page-job-detail .robot-card-v2__company-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255, 255, 255, 0.92);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-secondary);
    line-height: 1;
}

.page-job-detail .robot-card-v2__body {
    padding: var(--space-3);
    flex: 1;
}

.page-job-detail .robot-card-v2__name {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
    margin: 0 0 var(--space-1) 0;
}

.page-job-detail .robot-card-v2__description {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    line-height: var(--lh-normal);
    margin-bottom: var(--space-2);
}

.page-job-detail .robot-card-v2__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.page-job-detail .robot-card-v2__metrics .subtask-group-b__item {
    display: inline-flex;
    padding: 2px var(--space-2);
    font-size: var(--text-xs);
    background: var(--surface-inset);
    border: var(--border-hairline);
    border-radius: var(--radius-sm);
    color: var(--ink-secondary);
}

.page-job-detail .robot-card-v2__metrics .subtask-group-b__item--overflow {
    background: transparent;
    border: var(--border-hairline);
    color: var(--ink-tertiary);
    font-weight: var(--weight-medium);
}

.page-job-detail .robot-card-v2__evidence {
    border-top: 0.5px solid var(--surface-divider);
    padding: 8px 12px 8px;
}

.page-job-detail .robot-card-v2__stat-strip {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}

.page-job-detail .robot-card-v2__stat {
    display: flex;
    flex-direction: column;
}

.page-job-detail .robot-card-v2__stat-value {
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    color: var(--ink-primary);
}

.page-job-detail .robot-card-v2__stat-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    color: var(--ink-tertiary);
}

.page-job-detail .robot-card-v2__track-record {
    font-size: var(--text-xs);
    font-style: italic;
    color: var(--ink-secondary);
}

.robot-card-v2__detail-link {
    display: none;
}

.page-job-detail .robot-card-v2__detail-link {
    display: block;
    background-color: var(--color-section-tint);
    border-top: 0.5px solid var(--surface-divider);
    padding: 8px 12px;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--ink-link, var(--ink-accent));
    text-decoration: none;
    font-weight: var(--weight-medium);
}

.page-job-detail a.robot-card-v2__detail-link:hover {
    text-decoration: underline;
}

.page-job-detail .robot-card-v2__detail-link--muted {
    color: var(--ink-tertiary);
    font-style: italic;
    font-weight: normal;
}

/* Deploy badge — map to signal tokens, square */
.page-job-detail .badge-deploy {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.page-job-detail .badge-deploy--deployable {
    background: var(--signal-deployed-bg);
    color: var(--signal-deployed);
    border-color: var(--signal-deployed);
}

.page-job-detail .badge-deploy--pilot {
    background: var(--signal-ready-bg);
    color: var(--signal-ready);
    border-color: var(--signal-ready);
}

.page-job-detail .badge-deploy--rd {
    background: var(--signal-emerging-bg);
    color: var(--signal-emerging);
    border-color: var(--signal-emerging);
}

.page-job-detail .badge-deploy--conditional {
    background: var(--signal-manual-bg);
    color: var(--signal-manual);
    border-color: var(--signal-manual);
}

/* -- Hero polish ---------------------------------------------------- */
.page-job-detail .hero__inner--narrow {
    max-width: 760px;
}

.page-job-detail .hero .stat-strip {
    background: transparent;
    border: none;
    border-radius: 0;
}

.page-job-detail .hero .stat-strip__item {
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.page-job-detail .hero .stat-strip__item:last-child {
    border-right: none;
}

.page-job-detail .hero .stat-strip__value {
    font-weight: 700;
}

.page-job-detail .hero__updated {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: rgba(255, 255, 255, 0.4);
}

/* -- Subtask readiness fraction + meter ----------------------------- */
.page-job-detail .subtask-breakdown__readiness {
    margin-bottom: var(--space-5);
}

.page-job-detail .subtask-breakdown__fraction {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-bottom: var(--space-2);
}

.page-job-detail .subtask-breakdown__readiness-num {
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
    line-height: var(--lh-tight);
}

.page-job-detail .subtask-breakdown__readiness-sep {
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    color: var(--ink-tertiary);
}

.page-job-detail .subtask-breakdown__readiness-den {
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    color: var(--ink-secondary);
}

.page-job-detail .subtask-breakdown__meter {
    display: flex;
    gap: 2px;
    height: 6px;
    margin-bottom: var(--space-2);
}

.page-job-detail .subtask-breakdown__meter-block {
    flex: 1;
    border-radius: 1px;
    background-color: var(--signal-deployed-bg);
}

.page-job-detail .subtask-breakdown__meter-block--filled {
    background-color: var(--signal-deployed);
}

/* Coverage tier: None (0%) */
.page-job-detail .subtask-breakdown__meter[data-coverage-tier="none"] .subtask-breakdown__meter-block {
    background: #F1EFE8;
}
.page-job-detail .subtask-breakdown__meter[data-coverage-tier="none"] .subtask-breakdown__meter-block--filled {
    background: #D3D1C7;
}

/* Coverage tier: Emerging (1–33%) */
.page-job-detail .subtask-breakdown__meter[data-coverage-tier="emerging"] .subtask-breakdown__meter-block {
    background: #FAEEDA;
}
.page-job-detail .subtask-breakdown__meter[data-coverage-tier="emerging"] .subtask-breakdown__meter-block--filled {
    background: #EF9F27;
}

/* Coverage tier: Moderate (34–66%) */
.page-job-detail .subtask-breakdown__meter[data-coverage-tier="moderate"] .subtask-breakdown__meter-block {
    background: #E1F5EE;
}
.page-job-detail .subtask-breakdown__meter[data-coverage-tier="moderate"] .subtask-breakdown__meter-block--filled {
    background: #5DCAA5;
}

/* Coverage tier: Mature (67–100%) */
.page-job-detail .subtask-breakdown__meter[data-coverage-tier="mature"] .subtask-breakdown__meter-block {
    background: #E1F5EE;
}
.page-job-detail .subtask-breakdown__meter[data-coverage-tier="mature"] .subtask-breakdown__meter-block--filled {
    background: #0F6E56;
}

.page-job-detail .subtask-breakdown__subcaption {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-tertiary);
    margin: 0;
}

/* -- Subtask group headings → sidebar-heading style ----------------- */
.page-job-detail .subtask-group-a__title,
.page-job-detail .subtask-group-b__title {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-tertiary);
    font-weight: var(--weight-semibold);
    border-bottom: none;
    padding-bottom: 0;
}

/* -- Brief teaser in tinted section --------------------------------- */
.tinted-section .brief-teaser {
    background: var(--surface-card);
    border: var(--border-card);
    border-radius: var(--radius-md);
    max-width: 760px;
}

.page-job-detail .brief-teaser__headline .bi-x-circle {
    color: var(--signal-alert);
}

.page-job-detail .brief-teaser__headline .bi-check-circle {
    color: var(--signal-deployed);
}

.page-job-detail .brief-teaser__note {
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* -- Videos open section -------------------------------------------- */
.page-job-detail .open-section__subline {
    font-size: var(--text-sm);
    color: var(--ink-tertiary);
    margin-top: calc(-1 * var(--space-2));
    margin-bottom: var(--space-4);
}

/* -- Video carousel ------------------------------------------------ */
.video-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.video-carousel__track {
    display: flex;
    gap: var(--space-md);
    overflow: hidden;
    scroll-behavior: smooth;
    flex: 1;
    min-width: 0;
}

.video-carousel__track .video-card {
    flex: 0 0 calc((100% - 2 * var(--space-md)) / 3);
    min-width: 0;
    border: var(--border-card);
    border-radius: var(--radius-md);
}

.video-carousel__btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--transition-default), opacity var(--transition-default);
}

.video-carousel__btn:hover:not(:disabled) {
    background: var(--color-border);
}

.video-carousel__btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* -- Robot options count label -------------------------------------- */
.jd-count-muted {
    color: var(--ink-tertiary);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
}

/* -- Responsive: job detail ----------------------------------------- */
@media (max-width: 900px) {
    .video-carousel__track .video-card {
        flex-basis: calc((100% - var(--space-md)) / 2);
    }
}

@media (max-width: 720px) {
    .page-job-detail .hero__inner--narrow {
        max-width: 100%;
    }

    .tinted-section .brief-teaser {
        max-width: 100%;
    }

    .page-job-detail .ric-container {
        padding: var(--space-5) var(--space-4);
    }

    .page-job-detail .hero .stat-strip {
        flex-direction: column;
    }

    .page-job-detail .hero .stat-strip__item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .page-job-detail .hero .stat-strip__item:last-child {
        border-bottom: none;
    }
}

@media (max-width: 575px) {
    .video-carousel__track .video-card {
        flex-basis: 100%;
    }

    .video-carousel__btn {
        width: 32px;
        height: 32px;
    }
}

/* -- Dark background for Robot Options section ------------------- */
.page-job-detail .tinted-section {
    background-color: var(--surface-dark);
}

.page-job-detail .tinted-section .tinted-section__header {
    color: var(--ink-inverse);
}

.page-job-detail .tinted-section .jd-count-muted {
    color: var(--ink-inverse);
    opacity: 0.6;
}

.page-job-detail .tinted-section .robot-filter-empty {
    color: var(--ink-inverse);
    opacity: 0.7;
}

.page-job-detail .tinted-section .robot-filter-empty a {
    color: var(--ink-inverse);
}

.page-job-detail .tinted-section .hero__verdict {
    color: var(--ink-inverse);
    opacity: 0.7;
}

/* -- Buyer's Compass (teal override) ---------------------------- */
.page-job-detail .tinted-section--teal {
    background-color: var(--color-section-tint);
    margin-bottom: 0;
}

.page-job-detail .tinted-section--teal .tinted-section__header {
    color: var(--ink-primary);
    margin-bottom: var(--space-1);
}

/* -- Remove gap between robot grid and brief section ------------ */
.page-job-detail .tinted-section + .tinted-section--mint {
    margin-top: calc(-1 * var(--space-6));
}

/* -- Brief preview (mint override) ------------------------------ */
.page-job-detail .tinted-section--mint {
    background-color: var(--color-section-tint);
}
.page-job-detail .tinted-section--mint .tinted-section__header {
    color: var(--ink-primary);
}
.tinted-section--mint .brief-split__pills span {
    background-color: var(--color-section-tint-muted);
}

.tinted-section__subtitle {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    margin: 0 0 var(--space-4);
}

/* Compass list (stacked rows: title left, body right) */
.compass-list {
    display: flex;
    flex-direction: column;
}

.compass-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-2) 0;
}

.compass-row__title {
    flex: 0 0 160px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-normal);
    color: var(--ink-primary);
}

.compass-row__body {
    flex: 1;
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
    color: var(--ink-secondary);
    margin: 0;
}

/* -- Robot filter panel & bar ----------------------------------- */
.page-job-detail .robot-filter-panel {
    background: var(--surface-card);
    border: var(--border-hairline);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}


.page-job-detail .robot-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.page-job-detail .robot-filter-bar__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.page-job-detail .robot-filter-bar__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px var(--space-3);
    font-size: var(--text-xs);
    font-family: var(--font-body);
    background: transparent;
    border: var(--border-hairline);
    border-radius: var(--radius-sm);
    color: var(--ink-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.page-job-detail .robot-filter-bar__chip:hover {
    background: var(--surface-inset);
}

.page-job-detail .robot-filter-bar__chip:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
    opacity: 0.7;
}

.page-job-detail .robot-filter-bar__chip--active {
    background: var(--color-section-tint);
    color: var(--link);
    border-color: var(--link);
}

.page-job-detail .robot-filter-bar__chip--active:hover {
    background: var(--color-section-tint);
    color: var(--link);
    border-color: var(--link);
}

.page-job-detail .robot-filter-bar__chip-count {
    font-size: 0.85em;
    opacity: 0.6;
}

.page-job-detail .robot-filter-bar__chip--active .robot-filter-bar__chip-count {
    color: var(--link);
    opacity: 0.7;
}

.page-job-detail .robot-filter-bar__controls {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.page-job-detail .robot-filter-bar__sort-wrapper {
    display: inline-flex;
    align-items: center;
    background: var(--surface-inset);
    border: 1px solid var(--surface-divider);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.page-job-detail .robot-filter-bar__sort-wrapper:focus-within {
    outline: 2px solid var(--link);
    outline-offset: 2px;
    opacity: 0.7;
}

.page-job-detail .robot-filter-bar__sort-label {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    padding: 6px 0 6px var(--space-3);
    line-height: 1;
    white-space: nowrap;
}

.page-job-detail .robot-filter-bar__sort-select {
    font-size: var(--text-xs);
    font-family: var(--font-body);
    color: var(--ink-secondary);
    background: transparent;
    border: none;
    padding: 6px var(--space-3) 6px 4px;
    line-height: 1;
    cursor: pointer;
}

.page-job-detail .robot-filter-bar__sort-select:focus-visible {
    outline: none;
}

.page-job-detail .robot-card-v2--filter-hidden {
    display: none !important;
}

.page-job-detail .robot-card-v2--family-member {
    display: none;
}

.page-job-detail .robot-card-v2__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-job-detail .robot-card-v2__model-count-pill {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: var(--weight-medium);
    line-height: 1;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--surface-inset);
    color: var(--ink-secondary);
    white-space: nowrap;
}

.page-job-detail .robot-card-v2__variant-list {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    line-height: 1.4;
    margin: 4px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-job-detail .robot-filter-empty {
    text-align: center;
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    padding: var(--space-6) 0;
}

.page-job-detail .robot-filter-empty a {
    color: var(--ink-primary);
    text-decoration: underline;
}

/* -----------  ABOUT  ----------- */

/* .hero--about overrides removed — now uses shared .hero class */

/* Problem — open-section, constrain prose width */
.page-about .about-problem__inner {
    max-width: 68ch;
    margin: 0;
}

.page-about .about-problem p {
    color: var(--ink-secondary);
    line-height: var(--lh-normal);
    margin: 0 0 var(--space-3);
    font-size: var(--text-base);
}

/* Stats — lives in boxed-section, just style the subtitle */
.page-about .about-stats__header p {
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    margin: 0 0 var(--space-4);
}

/* Who RIC Serves — custom 3-col grid replacing Bootstrap row/col */
.about-serves__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.page-about .about-serves__card {
    background: var(--surface-card);
    border: var(--border-card);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    height: 100%;
}

.page-about .about-serves__card h3 {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
    margin: 0 0 var(--space-2);
}

.page-about .about-serves__card p {
    color: var(--ink-secondary);
    line-height: var(--lh-normal);
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
}

.page-about .about-serves__card a {
    font-size: var(--text-sm);
    color: var(--link);
    font-weight: var(--weight-medium);
    text-decoration: none;
}

.page-about .about-serves__card a:hover {
    color: var(--link-hover);
}

/* What We Believe — inside full-bleed tinted-section */
.page-about .about-beliefs__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin: 0 0 var(--space-5);
}

.page-about .about-beliefs__card {
    background: var(--surface-card);
    border: var(--border-card);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}

.page-about .about-beliefs__card h3 {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
    margin: 0 0 var(--space-2);
}

.page-about .about-beliefs__card p {
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
    margin: 0;
}

/* Independence callout — left border accent on white bg for contrast on teal */
.page-about .about-beliefs__independence {
    margin: 0;
    border: var(--border-hairline);
    border-left: 3px solid var(--ink-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-4) var(--space-5);
    background: var(--surface-card);
}

.page-about .about-beliefs__independence p {
    color: var(--ink-secondary);
    line-height: var(--lh-normal);
    margin: 0;
    font-size: var(--text-sm);
}

/* Founder — square photo placeholder */
.page-about .about-founder__layout {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
    max-width: none;
}

.page-about .about-founder__photo {
    width: 140px;
    height: 140px;
    border-radius: var(--radius-sm);
    background: var(--surface-inset);
    border: var(--border-hairline);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-tertiary);
    font-size: var(--text-sm);
}

.page-about .about-founder__content h3 {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
    margin: 0 0 var(--space-1);
}

.page-about .about-founder__content .founder-title {
    color: var(--ink-tertiary);
    font-size: var(--text-sm);
    margin: 0 0 var(--space-4);
}

.page-about .about-founder__content p {
    color: var(--ink-secondary);
    line-height: var(--lh-normal);
    font-size: var(--text-sm);
    margin: 0 0 var(--space-3);
}

.page-about .about-founder__content p a {
    color: var(--link);
    text-decoration: none;
}

.page-about .about-founder__content p a:hover {
    color: var(--link-hover);
}

.page-about .about-founder__contact {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: var(--border-hairline);
    font-size: var(--text-sm);
}

.page-about .about-founder__contact a {
    color: var(--link);
    margin-right: var(--space-4);
    text-decoration: none;
}

.page-about .about-founder__contact a:hover {
    color: var(--link-hover);
}

/* Editorial Standards & Principles — two-column merged section */
.about-editorial-principles__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    align-items: start;
}

.about-editorial-principles__prose p {
    color: var(--ink-secondary);
    line-height: var(--lh-normal);
    margin: 0 0 var(--space-3);
    font-size: var(--text-base);
}

.about-editorial-principles__prose p a {
    color: var(--link);
    text-decoration: none;
}

.about-editorial-principles__prose p a:hover {
    color: var(--link-hover);
}

.about-editorial-principles__quotes {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Founder section — full-bleed warm band */
.about-founder-section {
    background-color: var(--color-bg-section-warm);
    padding: var(--space-8) 0;
}

.about-founder-section__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-5);
}

/* Scope — two-column grid */
.about-scope__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    margin: 0 0 var(--space-4);
}

.about-scope__col-heading {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
    margin: 0 0 var(--space-3);
}

.about-scope__footnote {
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
    margin: 0;
}

/* How We Score — 3-col card grid */
.page-about .about-scoring__intro {
    color: var(--ink-secondary);
    font-size: var(--text-base);
    line-height: var(--lh-normal);
    margin: 0 0 var(--space-4);
    max-width: 68ch;
}

.about-scoring__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin: 0 0 var(--space-4);
}

.about-scoring__card {
    background: var(--surface-card);
    border: var(--border-card);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}

.about-scoring__card h3 {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
    margin: 0 0 var(--space-2);
}

.about-scoring__card p {
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
    margin: 0 0 var(--space-2);
}

.about-scoring__card p:last-child {
    margin-bottom: 0;
}

.page-about .about-scoring__link {
    margin: 0;
}

.page-about .about-scoring__link a {
    font-size: var(--text-sm);
    color: var(--link);
    font-weight: var(--weight-medium);
    text-decoration: none;
}

.page-about .about-scoring__link a:hover {
    color: var(--link-hover);
}

/* Sections after tinted band — separate with top borders */
.page-about .about-scope,
.page-about .about-serves {
    border-top: var(--border-hairline);
    padding-top: var(--space-6);
}

/* Editorial Standards — prose block */
.page-about .about-editorial__inner {
    max-width: 68ch;
    margin: 0;
}

.page-about .about-editorial__inner p {
    color: var(--ink-secondary);
    line-height: var(--lh-normal);
    margin: 0 0 var(--space-3);
    font-size: var(--text-base);
}

.page-about .about-editorial__inner p a {
    color: var(--link);
    text-decoration: none;
}

.page-about .about-editorial__inner p a:hover {
    color: var(--link-hover);
}

/* Who's Behind RIC — minimal */
.page-about .about-behind__inner {
    max-width: 68ch;
    margin: 0;
}

.page-about .about-behind__inner p {
    color: var(--ink-secondary);
    line-height: var(--lh-normal);
    margin: 0 0 var(--space-3);
    font-size: var(--text-base);
}

.page-about .about-behind__contact a {
    color: var(--link);
    text-decoration: none;
}

.page-about .about-behind__contact a:hover {
    color: var(--link-hover);
}

/* What's Out of Scope — bullet list */
.page-about .about-scope__inner {
    max-width: 68ch;
    margin: 0;
}

.page-about .about-scope__inner p {
    color: var(--ink-secondary);
    line-height: var(--lh-normal);
    margin: 0 0 var(--space-3);
    font-size: var(--text-base);
}

.about-scope__list {
    list-style: disc;
    padding-left: var(--space-5);
    margin: 0 0 var(--space-4);
}

.about-scope__list li {
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
    margin: 0 0 var(--space-2);
}

.about-scope__list li:last-child {
    margin-bottom: 0;
}

/* Who It's For — compressed description list */
.about-serves__list {
    margin: 0;
    padding: 0;
}

.about-serves__item {
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
    padding: var(--space-3) 0;
    border-bottom: var(--border-hairline);
}

.about-serves__item:last-child {
    border-bottom: none;
}

.about-serves__item dt {
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    color: var(--ink-primary);
    white-space: nowrap;
    min-width: 10rem;
}

.about-serves__item dd {
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
    margin: 0;
}

.about-serves__item dd a {
    color: var(--link);
    text-decoration: none;
    font-weight: var(--weight-medium);
}

.about-serves__item dd a:hover {
    color: var(--link-hover);
}

/* CTA contact line */
.about-contact {
    margin: var(--space-4) 0 0;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.5);
}

.about-contact a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.about-contact a:hover {
    color: #fff;
}

/* ----------- BREADCRUMB (shared, scoped) ----------- */
/* Page-scoped breadcrumb overrides removed — breadcrumbs now live inside .hero
   which provides its own white/rgba color scheme. */

/* ----------- RESPONSIVE ----------- */
@media (max-width: 720px) {
    .page-jobs-index .jobs-grid {
        grid-template-columns: 1fr;
    }

    .about-scoring__grid,
    .page-about .about-beliefs__grid {
        grid-template-columns: 1fr;
    }

    .about-editorial-principles__grid {
        grid-template-columns: 1fr;
    }

    .about-scope__grid {
        grid-template-columns: 1fr;
    }

    .about-serves__grid {
        grid-template-columns: 1fr;
    }

    .page-about .about-founder__layout {
        flex-direction: column;
    }

    .page-job-detail .subtask-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .page-job-detail .subtask-row__meta {
        flex-wrap: wrap;
    }

    .page-job-detail .subtask-row__metrics {
        width: 100%;
    }

    /* Compass list — mobile: stack title above body */
    .compass-row {
        flex-direction: column;
        gap: var(--space-1);
    }
    .compass-row__title {
        flex: none;
    }
}

/* ==========================================================================
   §50 — Hero v2 (homepage-specific overrides)
   Background depth styles now on base .hero (§4).
   ========================================================================== */

/* Bottom vignette for depth separation */
.hero--home-v2::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.25) 100%);
    background-size: 48px 48px, 48px 48px, 100% 100%;
}

/* -- Elevated search bar ------------------------------------------------- */
.hero--home-v2 .home-hero__search-block {
    margin: var(--space-5) auto var(--space-3);
    max-width: 760px;
}

.hero--home-v2 .home-hero__search-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: var(--space-2);
}

.hero--home-v2 .home-hero__search {
    max-width: 720px;
    margin: 0 auto;
}

.hero--home-v2 .home-hero__search-input {
    padding: 24px var(--space-4) 24px var(--space-7);
    border-radius: 999px;
    font-size: 19px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.14);
    box-shadow: 0 0 20px rgba(var(--accent-glow-rgb), 0.14);
}

.hero--home-v2 .home-hero__search-input:focus {
    border-color: var(--accent-glow);
    box-shadow: 0 0 0 4px rgba(var(--accent-glow-rgb), 0.3), 0 0 20px rgba(var(--accent-glow-rgb), 0.12);
}

.hero--home-v2 .home-hero__search .search-icon {
    font-size: 20px;
}

/* Right-side search affordance — removed */

.hero--home-v2 .home-hero__search-dropdown {
    border-radius: var(--radius-lg);
    margin-top: var(--space-2);
}

.hero--home-v2 .home-hero__search-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin: 8px 0 0;
    text-align: center;
}

/* -- 3c: Browse CTA ------------------------------------------------------ */
.hero--home-v2 .home-hero__browse {
    margin-top: var(--space-5);
    margin-bottom: 36px;
}

.home-hero__browse-btn {
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px 24px;
    border-radius: 100px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: background var(--transition-default), border-color var(--transition-default);
}

.home-hero__browse-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
}

.hero--home-v2 .home-hero__arrow {
    color: var(--accent-glow);
    display: inline-block;
    transition: transform var(--transition-default);
}

.hero--home-v2 .home-hero__browse a:hover .home-hero__arrow {
    transform: translateX(4px);
}

/* -- Standalone stat bar (below hero) ------------------------------------ */
.home-statbar {
    background: var(--color-dark-secondary);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: var(--space-3) 0;
}

.home-statbar__inner {
    max-width: var(--container-max, 1120px);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.home-statbar .stats-inline {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.5);
}

.home-statbar .stats-inline__value {
    font-weight: var(--weight-semibold);
    color: rgba(255, 255, 255, 0.8);
}

.home-statbar .stats-inline__dot {
    color: rgba(255, 255, 255, 0.25);
}

/* -- Homepage responsive overrides --------------------------------------- */
@media (max-width: 720px) {
    .hero--home-v2 {
        padding: 64px 0 56px;
    }

    .hero--home-v2 .home-hero__search-block {
        margin-left: 0;
        margin-right: 0;
    }

    .hero--home-v2 .home-hero__search-input {
        padding: var(--space-3) var(--space-4) var(--space-3) var(--space-7);
        font-size: var(--text-base);
    }

    .hero--home-v2 .home-hero__browse {
        margin-bottom: var(--space-6);
    }

    .hero--home-v2 .home-hero__search-hint {
        font-size: 11px;
    }
}


/* ==========================================================================
   § — Prose / Stub Pages (Privacy, Terms)
   ========================================================================== */

.prose-page {
    padding: var(--space-8, 3rem) 0;
}

.prose-page__inner {
    max-width: var(--container-max, var(--content-max-width));
    margin: 0 auto;
    padding: 0 var(--space-5, var(--space-md));
}

.prose-page__inner h1 {
    margin: 0 0 var(--space-3, 0.75rem);
}

.prose-page__meta {
    font-size: var(--text-sm, 0.875rem);
    color: var(--ink-muted, var(--color-text-muted));
    margin: 0 0 var(--space-5, 1.5rem);
}

/* ── Brief email capture form ── */
.brief-email-form__row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.brief-email-form__input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    color: var(--color-text);
    background-color: var(--color-surface);
    transition: all var(--transition-default);
}

.brief-email-form__input::placeholder {
    color: var(--color-text-light);
}

.brief-email-form__input:focus {
    outline: none;
    border-color: var(--color-dark);
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.1);
}

.brief-email-form__sub {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

.brief-email-form__error {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: #dc2626;
}

.brief-email-form__success {
    margin: 0.5rem 0 0;
    font-size: var(--font-size-body);
    color: #16a34a;
}

@media (max-width: 600px) {
    .brief-email-form__row {
        flex-direction: column;
    }
}

.brief-email-form__stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 480px;
    margin: 0 auto;
}

.brief-email-form__stack .cta-primary {
    width: 100%;
}

.brief-email-form__textarea {
    resize: vertical;
    min-height: 80px;
}

/* ── CTA footer section (job detail) ── */
.cta-footer-section {
    background-color: var(--surface-page);
    padding: 96px 0;
}

.cta-footer-section__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-5);
    text-align: center;
}

.cta-footer-section__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-tertiary);
    margin: 0 0 var(--space-4);
}

.cta-footer-section__headline {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-snug);
    color: var(--ink-primary);
    margin: 0 0 20px;
    letter-spacing: var(--tracking-tight);
}

.cta-footer-section__subhead {
    font-size: var(--font-size-body);
    color: var(--color-text-muted);
    max-width: 560px;
    margin: 0 auto var(--space-6);
    line-height: var(--lh-relaxed, 1.7);
}

/* Dark navy button inside CTA footer */
.cta-footer-section .cta-primary {
    background-color: var(--color-dark);
    border-color: var(--color-dark);
}

.cta-footer-section .cta-primary:hover {
    background-color: var(--color-dark-secondary);
    border-color: var(--color-dark-secondary);
}

/* White fill for email input */
.cta-footer-section .brief-email-form__input {
    background-color: #fff;
}

/* Centered form row */
.cta-footer-section .brief-email-form__row {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.cta-footer-section .brief-email-form__input {
    flex: 3;
}

.cta-footer-section .brief-email-form__sub {
    margin-top: 0.75rem;
}

@media (max-width: 600px) {
    .cta-footer-section {
        padding: 56px 0;
    }
}

/* ==========================================================================
   Works When / Breaks When Callout
   ========================================================================== */

.works-breaks-callout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md, 8px);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
    font-size: var(--font-size-base, 1rem);
    line-height: 1.5;
}

.works-breaks-callout--works_when {
    background: #f0fdf4;
    border-left: 4px solid var(--color-success-dark);
}

.works-breaks-callout--breaks_when {
    background: #fef2f2;
    border-left: 4px solid var(--color-error, #c0392b);
}

.works-breaks-callout__icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1.5;
}

.works-breaks-callout--works_when .works-breaks-callout__icon {
    color: var(--color-success-dark);
}

.works-breaks-callout--breaks_when .works-breaks-callout__icon {
    color: var(--color-error, #c0392b);
}

.works-breaks-callout__text {
    color: var(--color-text);
}

/* ==========================================================================
   Robot Detail Page (rd-*)
   ========================================================================== */

/* ── Generic section wrapper ── */
.rd-section {
    padding: 64px 0;
}

.rd-section__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-5);
}

.rd-section__heading {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-6);
    color: var(--color-text);
}

/* ── TL;DR section ── */
.rd-tldr__subtasks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.page-robot-detail .rd-tldr__subtasks .subtask-group-b__item {
    display: inline-flex;
    padding: 2px var(--space-2);
    font-size: var(--text-xs);
    background: var(--surface-inset);
    border: var(--border-hairline);
    border-radius: var(--radius-sm);
    color: var(--ink-secondary);
}

.page-robot-detail .rd-tldr__subtasks .subtask-group-b__item--overflow {
    background: transparent;
    border: var(--border-hairline);
    color: var(--ink-tertiary);
    font-weight: var(--weight-medium);
}

.rd-tldr__layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-6);
    align-items: start;
}

.rd-tldr__paragraph {
    font-size: var(--font-size-body);
    line-height: 1.7;
    color: var(--color-text);
}

.rd-tldr__media {
    position: relative;
}

.rd-tldr__media .robot-card-v2__image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius-md, 8px);
    display: flex;
}

.rd-tldr__media .robot-card-v2__image img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.rd-tldr__media .robot-card-v2__image picture {
    width: 100%;
    height: 100%;
}

.rd-tldr__media-placeholder {
    background: var(--surface-inset);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-6);
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rd-tldr__media-tag {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* TLDR stat-strip */
.rd-tldr__stats {
    grid-column: 1;
    margin-top: var(--space-4);
}

@media (max-width: 720px) {
    .rd-tldr__layout {
        grid-template-columns: 1fr;
    }

    .rd-tldr__stats {
        flex-direction: column;
    }

    .rd-tldr__stats .stat-strip__item {
        border-right: none;
        border-bottom: var(--border-hairline);
    }

    .rd-tldr__stats .stat-strip__item:last-child {
        border-bottom: none;
    }
}

/* ── Subtask blocks ── */
.rd-subtask-block {
    border-bottom: 1px solid var(--surface-divider);
    padding: var(--space-6) 0;
}

.rd-subtask-block:last-child {
    border-bottom: none;
}

.rd-subtask-block__name {
    font-size: var(--text-lg, 1.125rem);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-2);
    color: var(--color-text);
}

.rd-subtask-block__subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
    font-style: italic;
}

.rd-subtask-block__narrative {
    font-size: var(--font-size-body);
    line-height: 1.7;
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

.rd-subtask-block__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-warning-bg);
    border-left: 4px solid var(--color-warning);
    border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
    font-size: var(--text-sm);
}

.rd-subtask-block__stat {
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
}

.rd-subtask-block__stat-value {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.rd-subtask-block__stat-context {
    color: var(--color-text-muted);
}

/* Muted modifier */
.rd-subtask-block--muted .rd-subtask-block__name,
.rd-subtask-block--muted .rd-subtask-block__narrative,
.rd-subtask-block--muted .rd-subtask-block__stat-value {
    color: var(--color-text-muted);
}

@media (max-width: 720px) {
    .rd-subtask-block__stats {
        flex-direction: column;
        gap: var(--space-1);
    }
}

/* ── Subtask card grid ── */
.rd-subtask-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-5);
}

.rd-subtask-card {
    background: var(--surface-card);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-5);
}

.rd-subtask-card__name {
    font-size: var(--text-lg, 1.125rem);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-2);
    color: var(--color-text);
}

.rd-subtask-card__narrative {
    color: var(--color-text-muted);
    margin: 0;
}

.rd-subtask-card--muted {
    opacity: 0.7;
}

.rd-subtask-card--muted .rd-subtask-card__name,
.rd-subtask-card--muted .rd-subtask-card__narrative {
    color: var(--color-text-muted);
}

@media (max-width: 720px) {
    .rd-subtask-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Evidence section ── */
.rd-evidence__cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

.rd-evidence-card {
    background: var(--surface-card);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-5);
}

.rd-evidence-card--has-logo {
    display: flex;
    gap: var(--space-5);
}

.rd-evidence-card__body {
    flex: 1;
    min-width: 0;
}

.rd-evidence-card__logo-area {
    flex: 0 0 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--color-border, #e2e8f0);
    padding-left: var(--space-5);
}

.rd-evidence-card__logo {
    width: 100%;
    height: 48px;
    object-fit: contain;
}

@media (max-width: 720px) {
    .rd-evidence-card--has-logo {
        flex-direction: column;
    }
    .rd-evidence-card__logo-area {
        border-left: none;
        border-top: 1px solid var(--color-border, #e2e8f0);
        padding-left: 0;
        padding-top: var(--space-4);
        justify-content: flex-start;
    }
}

.rd-evidence-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.rd-evidence-card__title {
    font-size: var(--text-lg, 1.125rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0;
}

.rd-evidence-card__subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.rd-evidence-card__proof-points {
    font-size: var(--font-size-body);
    line-height: 1.7;
    color: var(--color-text);
    margin: 0;
    padding-left: var(--space-5, 1.25rem);
}

.rd-evidence-card__proof-points li {
    margin-bottom: var(--space-2);
}

.rd-evidence-card__proof-points li:last-child {
    margin-bottom: 0;
}

/* ── Source tags ── */
.rd-source-tag {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: var(--weight-medium, 500);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    vertical-align: middle;
}

.rd-source-tag--independent {
    background: #dbeafe;
    color: #1e40af;
}

.rd-source-tag--neutral {
    background: #f1f5f9;
    color: #475569;
}

/* ── Logo grid — REMOVED 2026-08-11 ──
   `.rd-logo-grid*` styled robot_detail.html's "Robot also used by" block, which
   S4c replaced. Re-grepped at the act: no template, script or JS referenced any
   of these selectors once that block was deleted. The replacement is §55 at the
   end of this file. `.rd-logo-grid__claim` never had a rule at all -- the
   count_claim span it would have styled was populated on 0 of 604 rows. */

/* ── Labelled rows (site fit + can't do) ── */
.rd-labelled-rows {
    display: flex;
    flex-direction: column;
}

.rd-labelled-row {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.rd-labelled-row:last-child {
    border-bottom: none;
}

.rd-labelled-row__label {
    flex-shrink: 0;
    width: 160px;
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    color: var(--color-text);
}

.rd-labelled-row__detail {
    font-size: var(--font-size-body);
    line-height: 1.6;
    color: var(--color-text);
}

.rd-labelled-row__caveat,
.rd-labelled-row__context {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.rd-labelled-row__detail .rd-source-tag {
    margin-left: var(--space-2);
}

/* WI-1c step 6 (Q3). A gap row states that nothing attributable is on file.
   It is deliberately quiet -- italic and muted, not a warning colour: a gap is
   the honest state of our evidence, not an error on the page. Both tokens are
   already defined and in use above, so neither var() falls back silently.

   ⚠ UNUSED SINCE 2026-08-22, AND KEPT ON PURPOSE. A gap row no longer renders at
   all (owner: no source, no row), so nothing emits this class today -- but the
   gap DATA is not retired, exactly as the S6 "can't do" markup is not deleted.
   This is three declarations; deleting them would mean re-deriving the ruled
   quiet treatment from scratch if the section is ever switched back on. */
.rd-labelled-row__gap {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-style: italic;
}

@media (max-width: 720px) {
    .rd-labelled-row {
        flex-direction: column;
        gap: var(--space-1);
    }
    .rd-labelled-row__label {
        width: auto;
    }
}

/* ── Trajectory ── */
.rd-trajectory__prose {
    font-size: var(--font-size-body);
    line-height: 1.7;
    max-width: 68ch;
    color: var(--color-text);
}

/* ── Hero — match job_detail box-less stats ── */
.page-robot-detail .hero__inner--narrow {
    max-width: 760px;
}

.page-robot-detail .hero .stat-strip {
    background: transparent;
    border: none;
    border-radius: 0;
}
.page-robot-detail .hero .stat-strip__item {
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.page-robot-detail .hero .stat-strip__item:last-child {
    border-right: none;
}
.page-robot-detail .hero .stat-strip__value {
    font-weight: 700;
}
.page-robot-detail .hero__updated {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 720px) {
    .page-robot-detail .hero__inner--narrow {
        max-width: 100%;
    }
    .page-robot-detail .hero .stat-strip {
        flex-direction: column;
    }
    .page-robot-detail .hero .stat-strip__item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }
    .page-robot-detail .hero .stat-strip__item:last-child {
        border-bottom: none;
    }
}

/* ── TL;DR card panel ── */
.rd-tldr .rd-section__inner {
    background: var(--surface-page);
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    padding: var(--space-6);
}

/* ── Section rhythm — alternating backgrounds ── */
.rd-subtasks {
    background-color: var(--surface-page);
}

.rd-cant-do {
    background-color: var(--signal-emerging-bg);
}

.rd-cant-do .rd-labelled-row {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

.rd-trajectory {
    background-color: var(--surface-page);
}

/* ── Media carousel (robot detail) ── */
.rd-media-carousel {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.rd-media-carousel__track {
    display: flex;
    gap: var(--space-md);
    overflow-x: hidden;
    scroll-behavior: smooth;
    flex: 1;
    min-width: 0;
}

.rd-media-carousel__item {
    flex: 0 0 calc((100% - var(--space-md)) / 2);
    min-width: 0;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    position: relative;
    background: var(--surface-inset);
}

.rd-media-carousel__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rd-media-carousel__item--clickable {
    cursor: pointer;
}

.rd-media-carousel__item--video {
    text-decoration: none;
    display: block;
}

.rd-media-carousel__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.85;
    transition: opacity var(--transition-default);
    pointer-events: none;
}

.rd-media-carousel__item--video:hover .rd-media-carousel__play {
    opacity: 1;
}

.rd-media-carousel__item--video:hover .rd-media-carousel__play svg path:first-child {
    fill: #f00;
    fill-opacity: 1;
}

.rd-media-carousel__btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--transition-default), opacity var(--transition-default);
}

.rd-media-carousel__btn:hover:not(:disabled) {
    background: var(--color-border);
}

.rd-media-carousel__btn:disabled {
    opacity: 0.3;
    cursor: default;
}

@media (max-width: 720px) {
    .rd-media-carousel__item {
        flex-basis: 100%;
    }

    .rd-media-carousel__btn {
        width: 32px;
        height: 32px;
    }
}

/* ── Media lightbox modal ── */
.rd-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
}

.rd-lightbox--open {
    display: flex;
}

.rd-lightbox__img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.rd-lightbox__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease;
}

.rd-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   How-it-works two-column layout + subtask rows + media panel
   ========================================================================== */

/* ── Two-column grid ── */
.rd-howworks {
    display: grid;
    grid-template-columns: 58% 1fr;
    gap: 48px;
    align-items: start;
}

.rd-howworks--no-media {
    grid-template-columns: 1fr;
}

.rd-howworks__media {
    position: sticky;
    top: 24px;
    align-self: start;
}

.rd-howworks__media-credit {
    font-size: var(--font-size-body);
    line-height: 1.7;
    color: var(--color-text-muted);
    font-style: italic;
    padding-top: var(--space-3);
    margin: 0;
}

/* ── Subtask rows ── */
.rd-subtask-row {
    padding: 32px 0;
}

.rd-subtask-row:first-child {
    padding-top: 0;
}

.rd-subtask-row--divider {
    border-bottom: 1px solid #E2E8F0;
}

.rd-subtask-row__title {
    color: #0F172A;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
}

.rd-subtask-row__claim {
    font-size: 16px;
    font-weight: 500;
    color: #0F172A;
    margin: 0 0 12px;
}

.rd-subtask-row__prose {
    font-size: 15px;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

.rd-subtask-row__evidence {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.rd-subtask-row__evidence-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748B;
    font-weight: 600;
}

.rd-subtask-row__evidence-tag {
    font-size: 13px;
    color: #475569;
    background: #F1F5F9;
    padding: 2px 8px;
    border-radius: 4px;
}

/* ── Muted chip strip ── */
.rd-subtask-chips {
    margin-top: 64px;
    padding-top: 0;
}

.rd-subtask-chips__label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748B;
    font-weight: 600;
    margin-bottom: 12px;
}

.rd-subtask-chips__list {
    font-size: 14px;
    color: #475569;
    line-height: 1.7;
}

/* ── Media panel ── */
.rd-media-panel {
    outline: none;
}

.rd-media-panel__viewport {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    background: #F1F5F9;
}

.rd-media-panel__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 250ms ease;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rd-media-panel__slide--active {
    opacity: 1;
    pointer-events: auto;
}

.rd-media-panel__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

/* Controls row */
.rd-media-panel__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
}

.rd-media-panel__btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #E2E8F0;
    background: #fff;
    color: #334155;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 150ms ease, background 150ms ease;
    padding: 0;
}

.rd-media-panel__btn:hover:not(:disabled) {
    border-color: #CBD5E1;
    background: #F8FAFC;
}

.rd-media-panel__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Thumbnail strip */
.rd-media-panel__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.rd-media-panel__thumbs::-webkit-scrollbar {
    display: none;
}
.rd-media-panel__thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 42px;
    border-radius: 4px;
    border: 2px solid transparent;
    background: #F1F5F9;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    opacity: 0.45;
    transition: opacity 150ms ease, border-color 150ms ease;
}
.rd-media-panel__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rd-media-panel__thumb--active {
    opacity: 1;
    border-color: #334155;
}
.rd-media-panel__thumb:hover:not(.rd-media-panel__thumb--active) {
    opacity: 0.75;
}

.rd-media-panel__counter {
    font-size: 13px;
    color: #64748B;
    font-variant-numeric: tabular-nums;
    min-width: 40px;
    text-align: center;
}

/* Dots */
.rd-media-panel__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}

.rd-media-panel__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: none;
    background: #CBD5E1;
    padding: 0;
    cursor: pointer;
    transition: background 150ms ease;
}

.rd-media-panel__dot--active {
    background: #0F172A;
}

/* Caption */
.rd-media-panel__caption {
    margin-top: 10px;
    min-height: 20px;
}

.rd-media-panel__caption-item {
    display: none;
}

.rd-media-panel__caption-item--active {
    display: block;
}

.rd-media-panel__caption-context {
    font-size: 14px;
    color: #334155;
    margin: 0;
}

.rd-media-panel__caption-credit {
    font-size: 12px;
    color: #64748B;
    margin: 4px 0 0;
}

/* ── Responsive: tablet (768-1023px) ── */
@media (max-width: 1023px) {
    .rd-howworks {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .rd-howworks__media {
        order: -1;
        position: static;
        max-width: 560px;
    }
}

/* ── Responsive: mobile (<768px) ── */
@media (max-width: 767px) {
    .rd-howworks {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .rd-howworks__media {
        order: -1;
        position: static;
        margin-left: -16px;
        margin-right: -16px;
        max-width: none;
    }

    .rd-media-panel__viewport {
        border-radius: 0;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .rd-media-panel__slide {
        position: static;
        flex: 0 0 100%;
        opacity: 1;
        pointer-events: auto;
        scroll-snap-align: center;
        transition: none;
    }

    .rd-media-panel__controls {
        display: none;
    }

    .rd-media-panel__thumbs {
        display: none;
    }
}

/* ==========================================================================
   Robots Index Page (robot-index-*)
   ========================================================================== */

/* ── Card grid ── */
.robots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-5);
}

/* ── Robot index card ── */
.robot-index-card {
    text-decoration: none;
    color: inherit;
    display: block;
}

.robot-index-card--search-hidden {
    display: none;
}

.robot-index-card:hover .robot-card-v2 {
    border-color: var(--color-primary, var(--ink-tertiary));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ── Robot index: image-based card overrides ── */
.page-robots-index .robot-card-v2 {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface-card);
    border: 0.5px solid var(--surface-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    padding: 0;
    margin-bottom: 0;
    position: relative;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.page-robots-index .robot-card-v2::before {
    display: none;
}

.page-robots-index .status-tag {
    font-weight: var(--weight-medium);
    letter-spacing: 0.02em;
    background-color: var(--surface-inset);
    color: var(--ink-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.page-robots-index .status-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--ink-tertiary);
}

.page-robots-index .status-tag--deployed::before { background-color: var(--signal-deployed); }
.page-robots-index .status-tag--ready::before    { background-color: var(--signal-ready); }
.page-robots-index .status-tag--emerging::before  { background-color: var(--signal-emerging); }

.page-robots-index .status-tag--deployed,
.page-robots-index .status-tag--ready,
.page-robots-index .status-tag--emerging {
    background-color: var(--surface-inset);
    color: var(--ink-secondary);
}

.page-robots-index .robot-card-v2__image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    display: flex;
}

.page-robots-index .robot-card-v2__image img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.page-robots-index .robot-card-v2__image picture {
    width: 100%;
    height: 100%;
}

.page-robots-index .robot-card-v2__body {
    padding: var(--space-3);
    flex: 1;
}

.page-robots-index .robot-card-v2__name {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
    margin: 0 0 var(--space-1) 0;
}

.page-robots-index .robot-card-v2__description {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    line-height: var(--lh-normal);
    margin-bottom: var(--space-2);
}

.page-robots-index .robot-card-v2__metrics {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: var(--space-1);
    min-height: calc(3 * (var(--text-xs) + 4px) + 2 * var(--space-1));
}

.page-robots-index .robot-card-v2__metrics .subtask-group-b__item {
    display: inline-flex;
    padding: 2px var(--space-2);
    font-size: var(--text-xs);
    background: var(--surface-inset);
    border: var(--border-hairline);
    border-radius: var(--radius-sm);
    color: var(--ink-secondary);
}

.page-robots-index .robot-card-v2__metrics .subtask-group-b__item--overflow {
    background: transparent;
    border: var(--border-hairline);
    color: var(--ink-tertiary);
    font-weight: var(--weight-medium);
}

.page-robots-index .robot-card-v2__evidence {
    border-top: 0.5px solid var(--surface-divider);
    padding: 8px 12px 8px;
}

.page-robots-index .robot-card-v2__stat-strip {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}

.page-robots-index .robot-card-v2__stat {
    display: flex;
    flex-direction: column;
}

.page-robots-index .robot-card-v2__stat-value {
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    color: var(--ink-primary);
}

.page-robots-index .robot-card-v2__stat-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    color: var(--ink-tertiary);
}

.robot-index-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.robot-index-card__title {
    font-size: var(--text-lg, 1.125rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0;
}

.robot-index-card__status {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: var(--weight-medium, 500);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    text-transform: capitalize;
}

.robot-index-card__status--shipping {
    background: var(--signal-deployed-bg, #ecfdf5);
    color: var(--signal-deployed, #0F7B3E);
}

.robot-index-card__status--pilot {
    background: var(--signal-emerging-bg, #fffbeb);
    color: var(--signal-emerging, #B8860B);
}

.robot-index-card__status--prototype {
    background: #f1f5f9;
    color: #475569;
}

.robot-index-card__manufacturer {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.robot-index-card__class {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.robot-index-card__excerpt {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text);
    margin-bottom: var(--space-4);
    flex: 1;
}

.robot-index-card__stats {
    display: flex;
    gap: var(--space-5);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border, #e2e8f0);
    margin-top: auto;
}

.robot-index-card__stat {
    display: flex;
    flex-direction: column;
}

.robot-index-card__stat-value {
    font-size: var(--text-lg, 1.125rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.robot-index-card__stat-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ==========================================================================
   §53 — Humanoids Hub
   Layout modelled on job-detail page (§ job-detail .ric-container)
   ========================================================================== */

/* -- Layout -------------------------------------------------------------- */
.page-humanoids-hub .ric-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-6) var(--space-5);
}

.page-humanoids-hub .home-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* -- Prose sections (mirrors job-detail prose width) --------------------- */
.page-humanoids-hub .about-problem__inner {
    max-width: 68ch;
    margin: 0;
}

.page-humanoids-hub .about-problem__inner p,
.page-humanoids-hub .open-section p {
    color: var(--ink-secondary);
    line-height: var(--lh-normal);
    margin: 0 0 var(--space-3);
    font-size: var(--text-base);
}

/* -- Cards (matches robot-card-v2 from job-detail) ----------------------- */
.page-humanoids-hub .about-serves__card {
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 0.5px solid var(--surface-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: var(--space-3);
    height: 100%;
}

.page-humanoids-hub .about-serves__card h3 {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
    margin: 0 0 var(--space-2);
}

.page-humanoids-hub .about-serves__card p {
    color: var(--ink-secondary);
    line-height: var(--lh-normal);
    margin: 0;
    font-size: var(--text-sm);
}

/* -- Timeline ------------------------------------------------------------ */
.hh-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hh-timeline__stage {
    display: flex;
    gap: var(--space-5);
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--surface-divider);
}

.hh-timeline__stage:last-child {
    border-bottom: none;
}

.hh-timeline__marker {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--signal-ready);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hh-timeline__number {
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    color: var(--ink-inverse);
}

.hh-timeline__content {
    flex: 1;
}

.hh-timeline__name {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    margin: 0 0 var(--space-1);
}

.hh-timeline__timeframe {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    opacity: 0.7;
    margin-bottom: var(--space-1);
}

.hh-timeline__desc {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
}

/* -- Trigger list -------------------------------------------------------- */
.hh-triggers {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.hh-trigger {
    padding: var(--space-4) var(--space-5);
    background: var(--surface-inset);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--signal-ready);
}

.hh-trigger__title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    margin: 0 0 var(--space-1);
}

.hh-trigger__sig {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    line-height: var(--lh-normal);
}

/* -- Platform cards ------------------------------------------------------ */
.hh-platforms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.hh-platform-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 0.5px solid var(--surface-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: var(--space-3);
}

.hh-platform-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.hh-platform-card__model {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
    margin: 0;
}

.hh-platform-card__company {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
}

.hh-platform-card__hq {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    margin: 0 0 var(--space-2);
}

.hh-platform-card__signal {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    line-height: var(--lh-normal);
    margin: 0;
}

/* -- Evidence tier badges ------------------------------------------------ */
.badge {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.badge--warehouse_pilot,
.badge--warehousepilot {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
}

.badge--internal_testing,
.badge--internaltesting {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.badge--prototype {
    background: rgba(148, 163, 184, 0.1);
    color: #64748b;
}

.badge--commercial_sale,
.badge--commercialsale {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.badge--construction_pilot,
.badge--constructionpilot {
    background: rgba(34, 197, 94, 0.25);
    color: #16a34a;
}

.badge--automotive_pilot,
.badge--automotivepilot {
    background: rgba(234, 179, 8, 0.2);
    color: #ca8a04;
}

.badge--demo {
    background: rgba(148, 163, 184, 0.1);
    color: #64748b;
}

/* -- Construction posture badge ------------------------------------------ */
.hh-platform-card__posture {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
}

.hh-platform-card__posture--active {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.hh-platform-card__posture--roadmap {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.hh-platform-card__posture--aspiration {
    background: rgba(148, 163, 184, 0.1);
    color: var(--color-text-muted);
}

.hh-platform-card__posture--none {
    background: rgba(148, 163, 184, 0.05);
    color: var(--color-text-light);
}

/* -- Platform fit summary ------------------------------------------------ */
.hh-platform-card__fit {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
    line-height: var(--lh-normal);
    margin: var(--space-2) 0 0;
    padding-top: var(--space-2);
    border-top: 1px solid var(--surface-divider);
}

/* -- Job verdict chips --------------------------------------------------- */
.hh-verdict-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

.hh-verdict-chip {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: var(--weight-medium);
    padding: 1px var(--space-1);
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.hh-verdict-chip--clears {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.hh-verdict-chip--borderline {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.hh-verdict-chip--does_not_clear {
    background: rgba(148, 163, 184, 0.08);
    color: var(--color-text-light);
}

/* -- Gating capability sentence ------------------------------------------ */
.hh-timeline__gating {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--ink-secondary);
    margin: var(--space-1) 0 0;
    font-style: italic;
}

/* -- Tinted section subtitle --------------------------------------------- */
.tinted-section__subtitle {
    font-size: var(--text-sm);
    color: var(--ink-tertiary);
    margin-top: calc(-1 * var(--space-1));
}

/* -- Responsive ---------------------------------------------------------- */
@media (max-width: 640px) {
    .hh-platforms-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   §54 — Deployment ledger (rd-ledger) + org chips
   The record, rendered as a filings register rather than a testimonial wall.
   Design constraints this section encodes, each from a measurement:
     * duration is NOT the widest column. The "83% filled" figure counted the
       literal strings "Not stated"/"Not specified"; meaningful fill is 54.3%
       on rendering robots, so a widest-column treatment builds a column of
       blanks.
     * ~30% of orgs site-wide (and 80.6% on Kenrobo) have no logo, so the text
       chip is the primary state to design for, not the fallback. Uniform tile
       geometry is what makes typography look intentional next to a logo.
     * "Not stated" must read as a neutral register value, never as an error
       or a missing-image placeholder.
   ========================================================================== */

.rd-ledger__summary {
  font-size: var(--font-size-body);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.rd-ledger__tasks {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.rd-ledger__tasks-label {
  font-size: var(--font-size-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-right: var(--space-xs);
}

.rd-ledger__task {
  font-size: var(--font-size-caption);
  color: var(--color-text);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
}

/* ── Filter chips ── */
.rd-ledger__filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.rd-ledger__filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.rd-ledger__filter-label {
  font-size: var(--font-size-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  min-width: 5.5rem;
}

.rd-ledger__chip {
  font-family: inherit;
  font-size: var(--font-size-caption);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  cursor: pointer;
  transition: var(--transition-default);
}

.rd-ledger__chip:hover { border-color: var(--color-border-hover); }

.rd-ledger__chip--active {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: #fff;
}

.rd-ledger__chip-count { opacity: 0.6; }

/* ── Table ── */
.rd-ledger__table-wrap {
  /* Wide content scrolls inside its own container; the page body must never
     scroll horizontally. */
  overflow-x: auto;
}

.rd-ledger__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-small);
}

.rd-ledger__table thead th {
  text-align: left;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-xs) var(--space-sm) var(--space-xs) 0;
  white-space: nowrap;
}

.rd-ledger__row { border-bottom: 1px solid var(--color-border); }
.rd-ledger__row--collapsed,
.rd-ledger__row--filtered { display: none; }

/* P3/C3 -- row expansion. The expansion is a SECOND <tr> that deliberately does
   not carry .rd-ledger__row (see _rd_ledger.html), so it needs its own copy of
   the hide rules: the JS mirrors the parent's modifiers onto it. */
.rd-ledger__expansion--collapsed,
.rd-ledger__expansion.rd-ledger__row--collapsed,
.rd-ledger__expansion.rd-ledger__row--filtered { display: none; }

.rd-ledger__expansion > td {
  padding: 0 var(--space-sm) var(--space-md) 0;
  background: var(--color-bg-subtle);
}

/* The affordance. A button, not a link: it changes state on this page and
   goes nowhere, and a reader arriving by keyboard needs the aria-expanded a
   link would not carry. */
.rd-ledger__expand {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rd-ledger__expand:hover { text-decoration-thickness: 2px; }
.rd-ledger__expand::after { content: " ›"; }
.rd-ledger__expand[aria-expanded="true"]::after { content: " ⌄"; }

.rd-ledger__proof-points {
  margin: 0 0 var(--space-sm);
  padding-left: 1.1em;
  color: var(--color-text);
}
.rd-ledger__proof-points li { margin-bottom: var(--space-xs); }

/* Data points stand alone as a complete expansion: 127 of the 276 expandable
   rows carry no narrative, so this must never read as a remainder under a
   missing heading. */
.rd-ledger__points {
  margin: 0 0 var(--space-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
}
.rd-ledger__point { display: flex; gap: 0.4em; align-items: baseline; }
.rd-ledger__point dt {
  color: var(--color-text-muted);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.rd-ledger__point dd { margin: 0; color: var(--color-text); }

/* The owner's correction on this row (Deployment.source_note, 2026-08-24). It
   sits LAST in the expansion, under whatever evidence the row already carried,
   because a correction is a comment ON that evidence and reads wrong above it.
   The left rule is the only thing distinguishing it: an owner note is editorial
   and must not be mistakeable for a sourced proof point. Every token here is
   verified present in this stylesheet -- see the note below about var()
   falling back silently on an invented one. */
.rd-ledger__note {
  margin: 0 0 var(--space-sm);
  padding-left: var(--space-sm);
  border-left: 2px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.rd-ledger__expansion-foot {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: baseline;
  font-size: 0.875rem;
}
.rd-ledger__expansion-source { color: var(--color-text-muted); }
/* The ledger colours nothing: .rd-ledger__showall and .rd-org-chip both use
   --color-text and signal interactivity with a border or an underline. There is
   no --color-link token in this stylesheet -- an earlier draft of this block
   invented one, and var() fell back silently to body-text colour, which would
   have shipped links indistinguishable from prose. Underlined, like the button. */
.rd-ledger__expansion-org {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rd-ledger__cell {
  padding: var(--space-sm) var(--space-sm) var(--space-sm) 0;
  vertical-align: top;
  color: var(--color-text);
}

.rd-ledger__cell--project { min-width: 14rem; }
.rd-ledger__cell--orgs    { min-width: 13rem; }
.rd-ledger__cell--country { white-space: nowrap; }
/* Deliberately NOT the widest column — see the section note above. */
.rd-ledger__cell--duration { min-width: 11rem; }
.rd-ledger__cell--source  { white-space: nowrap; }

.rd-ledger__badge {
  display: inline-block;
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  margin-left: 6px;
  text-transform: capitalize;
}

.rd-ledger__country,
.rd-ledger__source { color: var(--color-text); }
.rd-ledger__source { text-transform: capitalize; }

/* A register value, not an error and not a missing asset. */
.rd-ledger__unstated {
  color: var(--color-text-light);
  font-style: italic;
}

.rd-ledger__empty td {
  padding: var(--space-md) 0;
  color: var(--color-text-muted);
  text-align: center;
}

.rd-ledger__showall {
  font-family: inherit;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-md);
  margin-top: var(--space-md);
  cursor: pointer;
  transition: var(--transition-default);
}

.rd-ledger__showall:hover { border-color: var(--color-border-hover); }

.rd-ledger__footer {
  margin-top: var(--space-md);
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  text-transform: capitalize;
}

/* ── Org chips (co-equal; used in ledger rows and, later, the S4c grid) ── */
.rd-org-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 0 6px 4px 0;
  padding: 3px 8px 3px 3px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--font-size-caption);
  transition: var(--transition-default);
}

.rd-org-chip:hover {
  border-color: var(--color-border-hover);
  background: var(--color-bg-subtle);
}

/* Logo and monogram share one geometry so a text chip reads as a deliberate
   tile rather than as a logo that failed to load. */
.rd-org-chip__logo,
.rd-org-chip__mark {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 3px;
  background: var(--color-bg-subtle);
}

.rd-org-chip__logo { object-fit: contain; }

.rd-org-chip__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

.rd-org-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 16rem;
}

/* ── People on record: the customer-voice section (owner, 2026-08-23) ── */

/* The link-less chip. It carries .rd-org-chip for geometry and then takes the
   interactive affordances back off: a span that lifts on hover reads as a link
   whose click does nothing. Measured on prod 2026-08-23, 33 of 203 rows render
   this form because their company resolves to no Org. */
.rd-org-chip--static {
  cursor: default;
}

.rd-org-chip--static:hover {
  border-color: var(--color-border);
  background: var(--color-surface);
}

.rd-voices__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
}

/* One person per row, company chip above the name. The chip is inline-flex and
   already carries its own bottom margin, so the row does not add one. */
.rd-voice {
  padding: 0 0 var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
}

.rd-voice:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.rd-voice__who {
  margin: 0;
  font-size: var(--font-size-body);
  color: var(--color-text);
}

.rd-voice__name {
  font-weight: var(--font-weight-semibold);
}

/* The role is absent on 46 of the 203 live entries -- 20 empty plus 26 stored
   placeholders that _stated normalizes away -- so the separator lives INSIDE
   this span. A separator in the markup between them would render as a dangling
   middot on every one of those 46. */
.rd-voice__role {
  color: var(--color-text-muted);
}

/* The owner's quotation (FieldVoiceControl.quote_text, 2026-08-24). It sits
   ABOVE .rd-voice__context and reads deliberately unlike it: context is analyst
   prose about how the person was sourced, this is the person's own words. The
   quote marks themselves come from the template, not from CSS `content` -- a
   generated quote mark is invisible to the copy buffer and to a screen reader,
   and a quotation nobody can quote back is not much of one. Tokens verified
   present in this stylesheet. */
.rd-voice__quote {
  margin: 4px 0 0 0;
  padding-left: var(--space-sm);
  border-left: 2px solid var(--color-border);
  color: var(--color-text);
}

.rd-voice__context {
  margin: 4px 0 0 0;
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

/* ── Stat strip: anchored stats ── */
.stat-strip__item--linked {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-default);
}

.stat-strip__item--linked:hover { opacity: 0.75; }

.stat-strip__note {
  display: block;
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  .rd-ledger__filter-label { min-width: 100%; }
  .rd-ledger__cell--project,
  .rd-ledger__cell--orgs,
  .rd-ledger__cell--duration { min-width: 10rem; }
}

/* ==========================================================================
   §55 — Organizations on record (S4c grid)
   ==========================================================================
   Scales §54's chip to a tile. The property being scaled is the one §54 already
   establishes: logo and monogram share ONE geometry, so a text chip reads as a
   deliberate tile rather than as a logo that failed to load. That matters more
   here than in a ledger cell -- measured 2026-08-11, 61.6% of chip instances
   site-wide have no local logo file and 26.4% have neither file nor resolvable
   domain, and on kenrobo-rebartying, the largest grid, 25 of 31 are monograms.
   The grid must look intentional when most of it is typography.

   No tier badges (design guard). Tier orders the tiles and never reaches here.

   auto-fill/minmax rather than a fixed 4 columns: the tile count runs 1..31, and
   a fixed track leaves a 1-org grid with three empty cells. */

.rd-org-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* The chip is inline-flex with chip margins in §54; as a tile it fills its
   cell instead. Everything else -- border, radius, logo/monogram box, hover --
   is inherited, so the two surfaces cannot drift apart. */
.rd-org-grid .rd-org-chip {
  display: flex;
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  min-width: 0;
}

/* max-width: none lets a tile use its whole cell instead of §54's 16rem chip
   cap. min-width: 0 is what makes that safe: a flex item defaults to
   min-width:auto, so without it a long org name refuses to shrink below its
   own text and pushes past its cell instead of ellipsizing. §54's
   overflow/text-overflow does the truncating once the item can shrink. Both
   properties are needed; neither works alone.

   NOT a fix for the horizontal overflow visible at 390px -- that is a
   pre-existing, site-wide condition, reproduced 2026-08-11 on production
   (origin/main, which contains none of this work) on /about/, and locally on a
   robot page carrying no S4c section at all. Recorded as a finding; out of
   scope here. Do not "fix" it inside §55. */
.rd-org-grid .rd-org-chip__name {
  max-width: none;
  min-width: 0;
}

/* Collapsed past ORG_GRID_COLLAPSE_AT. Same mechanism as the ledger's
   --collapsed row: a class toggle, never a node removal.

   MUST be selected at least as specifically as `.rd-org-grid .rd-org-chip`
   above. Written as a bare `.rd-org-chip--collapsed` it loses the cascade
   (0,1,0 against 0,2,0), the class applies, and every tile stays visible: the
   JS runs, the DOM is correct, and the page silently ignores the collapse.
   That shipped once and no HTML assertion could see it -- the class IS on the
   element -- which is why the screenshot pass is mandatory. */
.rd-org-grid .rd-org-chip--collapsed { display: none; }

.rd-orgs__summary {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  margin: 0;
}

.rd-orgs__showall {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  padding: var(--space-xs) var(--space-md);
  margin-top: var(--space-md);
  cursor: pointer;
  font-size: var(--font-size-caption);
  transition: var(--transition-default);
}

.rd-orgs__showall:hover { border-color: var(--color-border-hover); }

.rd-orgs__correct {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

@media (max-width: 720px) {
  .rd-org-grid { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
}


/* ==========================================================================
   §55b — S4c on the dark band
   ==========================================================================
   The SAME ground as job detail's S5 robot-options band: --surface-dark, set
   at `.page-job-detail .tinted-section`. Not a new colour, not a new token.

   .rd-section carries no background and its <section> is a direct child of
   main, so this one declaration is full-bleed edge-to-edge; the 64px vertical
   padding is already there. Nothing in the layout moves.

   TILES STAY WHITE. .rd-org-chip's --color-surface fill is untouched, exactly
   as .robot-card-v2 stays white inside the job page's dark band. Most org
   logos are transparent PNGs drawn for a light ground, so the tile is what
   keeps them readable; darkening it would be a per-logo gamble across 632 orgs
   that no assertion in the suite can see.

   NO ELEMENT SELECTORS IN THIS BLOCK -- not `.rd-orgs p`, not `.rd-orgs
   button`. The correction <dialog> lives INSIDE this section, and a <dialog>
   inherits from its DOM parent even though it paints in the top layer. Any
   element selector here would be (0,1,1), outrank the dialog's own child
   rules, and paint its form white-on-white. That is the R11 breakage the
   .rd-orgs__correct-cta block further down was written about.

   The blanket `color` below is safe BECAUSE .intake-dialog re-declares its own
   colour and every text child of it declares one too (measured in-browser, not
   assumed). It is kept deliberately: anything in this section not enumerated
   here lands legible-by-default rather than invisible.

   Every override is written `.rd-orgs .X` = (0,2,0) so it beats the (0,1,0)
   base rule on SPECIFICITY, not on file order -- the same trap §55 documents
   for .rd-org-chip--collapsed, where the class applies and the page ignores it.

   --color-primary cannot survive on this ground: #2563eb on #0F1A2E is ~2.5:1,
   under AA. The CTA goes inverse and keeps its existing underline-on-hover as
   the affordance, as .page-job-detail .tinted-section .robot-filter-empty a
   already does for the same problem. */

.rd-orgs {
  background-color: var(--surface-dark);
  color: var(--ink-inverse);
}

.rd-orgs .rd-section__heading { color: var(--ink-inverse); }

.rd-orgs .rd-orgs__summary { color: rgba(255, 255, 255, 0.7); }

.rd-orgs .rd-orgs__correct {
  color: rgba(255, 255, 255, 0.7);
  border-top-color: rgba(255, 255, 255, 0.15);
}

.rd-orgs .rd-orgs__showall {
  color: var(--ink-inverse);
  border-color: rgba(255, 255, 255, 0.3);
}

.rd-orgs .rd-orgs__showall:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
}

.rd-orgs .rd-orgs__correct-cta,
.rd-orgs .rd-orgs__correct-cta:hover { color: var(--ink-inverse); }


/* ==========================================================================
   §56 — Organization page (/organizations/<slug>/)
   ==========================================================================
   PHASE 3. THE SPARSE PAGE IS THE DESIGN TARGET, not an edge case.

   Measured 2026-08-11 across all 632 active orgs: 479 pages carry at least one
   robot row, 73 are identity-only, the largest deployment record anywhere is 7
   rows, and 229 orgs hold exactly one. Country is filled on 386, a logo file on
   175, a url on 432. So the median page is: a name, a role, one robot, maybe
   one row. It must read as a PROFILE THAT HAPPENS TO BE SPARSELY FILLED, not
   as a database row that came back nearly empty. If it fails, the fix is design
   -- the correction banner works BECAUSE of the undercount.

   Three devices carry that:
     * generous vertical rhythm, so few elements still occupy a composed page
       rather than huddling under the nav;
     * a left-aligned measure that does not stretch one fact across 1280px;
     * sections that simply do not render when empty (the templates guard), so
       the page never shows a heading over nothing.

   Reuses §54's chip geometry wholesale for the co-equal party chips in O5 --
   logo and monogram share one geometry there, which is what makes a text chip
   read as deliberate. Nothing here overrides it.

   No tier badges anywhere (design guard). O2's tier stat is a STAT, in the
   stat row's own typography, and is deliberately not chip- or badge-shaped.
   ========================================================================== */

.page-organization {
  background: var(--color-surface);
}

/* One measure for every section, and it is the SITE's measure -- the same
   --container-max the header, hero and footer use. An earlier draft narrowed it
   to 62rem on the theory that a short page reads better in a narrow column; the
   screenshot showed the real effect, which was the content column sitting inset
   from the site chrome above and below it and reading as a misalignment rather
   than as a choice. Composure on a sparse page comes from the vertical rhythm
   below, not from a narrower column. */
.org-identity__inner,
.org-website__inner,
.org-stats__inner,
.org-caps__inner,
.org-robots__inner,
.org-makes__inner,
.org-record__inner,
.org-correct__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

/* THE BREADCRUMB IS BUILT FOR A DARK GROUND. .breadcrumb__link is
   rgba(255,255,255,.6) and .breadcrumb__current rgba(255,255,255,.9), which are
   correct over the robot page's dark hero and INVISIBLE on this page's light
   one. The markup was present and every HTML assertion passed -- only the
   screenshot showed a blank strip where the trail should be. Restated here on
   light ground rather than changed at the source, because the dark-hero pages
   depend on the original values. */
.page-organization .breadcrumb__link {
  color: var(--color-text-muted);
}

.page-organization .breadcrumb__link:hover {
  color: var(--color-text);
}

.page-organization .breadcrumb__separator {
  color: var(--color-text-light);
}

.page-organization .breadcrumb__current {
  color: var(--color-text);
}

.org-section__heading {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

/* ── O1 — identity ── */

.org-identity {
  padding: var(--space-xl) 0 var(--space-lg);
}

.org-identity__head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.org-identity__logo {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}

.org-identity__logo-img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

/* The monogram gets the SAME box as the logo (the §54 property, scaled up):
   a logoless org must look like a company we have on record without a logo
   file, never like a broken image. 457 of 632 orgs reach this. */
.org-identity__mark {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

.org-identity__text {
  /* Without this a flex item refuses to shrink below its own text and pushes
     past the cell instead of wrapping. Needed alongside any max-width; neither
     works alone. */
  min-width: 0;
}

.org-identity__name {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
  line-height: 1.15;
}

.org-identity__role {
  margin: var(--space-xs) 0 0;
  font-size: var(--font-size-body);
  color: var(--color-text-muted);
}

.org-identity__sep {
  margin: 0 6px;
  color: var(--color-text-light);
}

/* ── O2 — stats. Renders on EVERY page, zeros included. ── */

.org-stats {
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.org-stats__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
}

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

/* Deliberately restrained. A zero rendered at hero scale reads as an
   indictment of the company; at this size it reads as the size of our record,
   which is what it actually measures and what makes O6 answerable. */
.org-stats__value {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  line-height: 1.1;
}

.org-stats__label {
  font-size: var(--font-size-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.org-stats__label--linked {
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}

.org-stats__label--linked:hover {
  color: var(--color-text);
  border-bottom-color: var(--color-border-hover);
}

/* The tier split names its own axis in the label. It sits BELOW the counts and
   in caption type because it qualifies them -- it is not a fourth headline
   number, and it must never be mistaken for the ledger's source split. */
.org-stats__tiers {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

.org-stats__tiers-label {
  font-size: var(--font-size-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.org-stats__tiers-values {
  font-size: var(--font-size-small);
  color: var(--color-text);
}

.org-stats__tier { text-transform: capitalize; }

.org-stats__sep {
  margin: 0 4px;
  color: var(--color-text-light);
}

/* ── O3 — capabilities ── */

.org-caps { padding: var(--space-lg) 0; }

.org-caps__note {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  margin: calc(-1 * var(--space-sm)) 0 var(--space-md);
}

.org-caps__group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.org-caps__group-label {
  font-size: var(--font-size-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-right: var(--space-xs);
}

.org-caps__chip {
  display: inline-block;
  font-size: var(--font-size-small);
  color: var(--color-text);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
}

/* ── O4 / O4b — robots operated, robots made ── */

.org-robots,
.org-makes { padding: var(--space-lg) 0; }

.org-robots__list,
.org-makes__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.org-robots__item,
.org-makes__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.org-robots__link,
.org-makes__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  min-width: 0;
  text-decoration: none;
  color: var(--color-text);
}

.org-robots__link:hover .org-robots__name,
.org-makes__link:hover .org-makes__name {
  color: var(--color-primary);
}

.org-robots__name,
.org-makes__name {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  /* Both properties are required: max-width lets the item use its cell, and
     min-width:0 is what actually permits the shrink. Neither works alone. */
  max-width: 100%;
  min-width: 0;
}

.org-robots__maker,
.org-makes__class {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  text-transform: capitalize;
}

/* Absent, not zero, when nothing public backs the pair -- the element simply
   is not rendered, so there is no empty-state style here on purpose. */
.org-robots__count,
.org-makes__count {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ── O5 — the record ── */

.org-record { padding: var(--space-lg) 0; }

.org-record__summary {
  font-size: var(--font-size-body);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.org-record__table-wrap {
  /* Wide content scrolls inside its own container; the page body must never
     scroll horizontally. */
  overflow-x: auto;
}

.org-record__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-small);
}

.org-record__table thead th {
  text-align: left;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-xs) var(--space-sm) var(--space-xs) 0;
  white-space: nowrap;
}

.org-record__row { border-bottom: 1px solid var(--color-border); }

/* SPECIFICITY, deliberately: this modifier must outrank any descendant rule
   that reaches .org-record__row through .org-record__table (0,2,0). Written at
   (0,2,0) itself so it cannot lose the cascade the way .rd-org-chip--collapsed
   did -- that failure put the class on the element, passed every HTML
   assertion, and left all 31 tiles visible. Only a screenshot caught it. */
.org-record__table .org-record__row--collapsed { display: none; }

.org-record__cell {
  padding: var(--space-sm) var(--space-sm) var(--space-sm) 0;
  vertical-align: top;
  color: var(--color-text);
}

.org-record__cell--robot   { min-width: 9rem; }
.org-record__cell--project { min-width: 14rem; }
.org-record__cell--orgs    { min-width: 13rem; }
.org-record__cell--country { white-space: nowrap; }
/* NOT the widest column: duration is 52.6% filled corpus-wide, and the "83%"
   that once justified sizing it widest counted the literal strings
   "Not stated"/"Not specified" as filled. */
.org-record__cell--duration { min-width: 11rem; }
.org-record__cell--source  { white-space: nowrap; }

.org-record__cell--robot a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}

.org-record__cell--robot a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-border-hover);
}

.org-record__badge {
  display: inline-block;
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  margin-left: 6px;
  text-transform: capitalize;
}

.org-record__country,
.org-record__source { color: var(--color-text); }
.org-record__source { text-transform: capitalize; }

/* A register value, not an error and not a missing asset. */
.org-record__unstated {
  color: var(--color-text-light);
  font-style: italic;
}

.org-record__showall {
  font-family: inherit;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-md);
  margin-top: var(--space-md);
  cursor: pointer;
  transition: var(--transition-default);
}

.org-record__showall:hover { border-color: var(--color-border-hover); }

/* ── O6 — the correction banner, the page's only CTA ── */

.org-correct {
  padding: var(--space-lg) 0 var(--space-xl);
}

.org-correct__inner {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg);
}

.org-correct__heading {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

/* Plain and quiet. This is the whole affordance on a page whose record may be
   two lines long, and it has to read as an invitation to correct rather than
   as an accusation of absence. */
.org-correct__body {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 44rem;
}

.org-correct__link {
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}

.org-correct__link:hover { text-decoration: underline; }

/* ── Narrow viewports ── */

@media (max-width: 720px) {
  .org-identity__head {
    gap: var(--space-sm);
  }

  .org-identity__logo {
    width: 56px;
    height: 56px;
  }

  .org-identity__name { font-size: var(--font-size-h3); }

  .org-stats__row { gap: var(--space-lg); }

  .org-robots__item,
  .org-makes__item {
    /* Name and count stop competing for one line and stack instead; the count
       is the thing that gives way, because the robot name is the link. */
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   §57 — Organization website link (gauge 1's surface)

   Its own element, OUTSIDE O1, per the owner ruling of 2026-08-11. Ruling 6
   fixed O1's contents ("logo, name, role line, country -- nothing else"), so
   this deliberately does not join the identity block's typography; it reads as
   a quiet continuation of it, sitting between identity and the O2 stat rule.

   Restrained on purpose. This is the one outbound path off an org page, and it
   is a fact from the record rather than a call to action -- O6 remains the only
   CTA. Rendering it at button weight would make the page look like a directory
   listing selling a click.

   Absent, not empty, on the 200 of 632 orgs with no url: the template emits no
   section at all, so there is no reserved space to collapse and no rule here
   that needs an empty state.
   ========================================================================== */

.org-website {
  padding: var(--space-md) 0 0;
}

.org-website__link {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  text-decoration: none;
  /* The host can be long (sumitomo-mitsui-construction.co.jp); it wraps at the
     dot rather than pushing the page wide. */
  overflow-wrap: anywhere;
}

.org-website__link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.org-website__arrow {
  /* Non-breaking with the last word so the arrow never orphans onto its own
     line, which reads as a rendering bug rather than as an affordance. */
  white-space: nowrap;
}

/* ==========================================================================
   §58 — R4 headline metric cards (spec v0.3 §3)

   The one evidence surface that reaches all 128 robots, so it is styled for
   the QUIET page first: on a robot with no baked JSON this section and the
   ledger are most of the page, and two cards must not read as a lonely widget
   floating in whitespace.

   Auto-FILL rather than a fixed pair. n=1 renders one card at its natural
   width with no stretch and no hero merge (§3.4 -- ruled): the asymmetry is
   information, not a layout bug to paper over. Five of the 128 robots land
   there, measured 2026-08-12.

   [CORRECTED 2026-08-12, build session 9. This paragraph said "auto-fit" and
   claimed the no-stretch behaviour that auto-fit specifically prevents -- the
   rule below stretched a lone card to the full 1152px container. The claim was
   reasoned and written down but never looked at; a screenshot caught it. See
   the rule's own comment for the measurement and the fix.]

   Deliberately NOT reusing .rd-ledger__chip, .rd-ledger__row or .rd-org-chip.
   robot_detail.js collects all three by class -- a metric card wearing one
   would silently enrol itself in the ledger's filter set or the org grid's
   collapse set.
   ========================================================================== */

.rd-metrics__grid {
  display: grid;
  /* auto-FILL, not auto-fit, and the difference is the whole point (fixed
     2026-08-12, build session 9, caught by looking at the rendered page).

     auto-FIT collapses the tracks no card occupies and lets the survivors
     absorb the freed space, so a robot with one headline claim rendered ONE
     card 1152px wide -- a full-container slab -- and a robot with two rendered
     568px each. That is exactly what §3.4 ruled against ("auto-fit grid, no
     stretch ... the asymmetry is information"), and exactly the slab the
     2026-08-12 ruling cited when it raised the row from two cards to three.
     Measured before the fix: 8 of 128 active robots stretched (5 at n=1, 3 at
     n=2), 3 of them listed. auto-FILL keeps the empty tracks, so a lone card
     stays the width it would have been as one of three.

     The floor moved 15rem -> 22rem to hold the count at exactly three across
     the 1152px container: under auto-fill the floor now decides the TRACK
     COUNT rather than just the fold point, and 15rem would have made four
     tracks of 276px, narrowing the 110 robots that render a full row. At
     22rem the three-card row measures 373px per card -- pixel-identical to
     before this change.

     min(22rem, 100%) rather than a bare 22rem: below a 22rem container a bare
     floor forces the track wider than its parent and authors a NEW horizontal
     overflow. Measured at 390px: 342px cards and scrollWidth 595 both before
     and after, i.e. the site-wide 390px overflow recorded in build_status §9
     is neither worsened nor touched here. Still no media query. */
  grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* RAISED OFF THE PAGE, deliberately. A white card on this section's near-white
   ground separated by a 1px hairline reads as a table row, not as a headline,
   and the numbers are the loudest thing R4 has to say. So: the stronger
   --surface-border rather than --color-border, 8px to match the TL;DR panel's
   radius, and a two-stop shadow -- a tight contact shadow to seat the edge plus
   a soft ambient one to lift it. */
.rd-metric-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  padding: var(--space-lg);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 6px 16px rgba(15, 23, 42, 0.07);
  /* THE GRID-ITEM OVERFLOW BUG. A grid item defaults to min-width:auto, which
     refuses to shrink below its content -- so one long string does not wrap,
     it pushes the track wider than 1fr and the page scrolls sideways. The
     corpus has the strings to do it: the longest provenance chip is 138
     characters ("From the record · Affordable Housing Cooperative Program —
     SMASH (Miami-Dade), Eden Village (Wilmington, NC), VPG Enterprise (New
     Orleans)"). This one line is what makes the auto-fill track actually
     responsive. */
  min-width: 0;
}

.rd-metric-card__value {
  /* Larger than an h1: on the quiet pages this is the biggest thing below the
     hero, and it should read as a figure rather than as a heading. */
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0;
  /* Values arrive with parenthesised tokens like "(Australia/Mexico)" that
     have no break opportunity; `anywhere` beats a horizontal scrollbar. */
  overflow-wrap: anywhere;
}

.rd-metric-card__suffix {
  /* Welded to the number, so it must not carry the number's weight: "61%"
     should read as a quantity, not as two competing glyphs. */
  font-size: var(--font-size-h2);
  font-weight: 600;
}

/* NOT h2-sized, and the corpus is why. `metric_unit` is a free-text column, so
   a "unit" can be 58 characters ("schedule x / cost pct reduction / hazard pct
   reduction") or a sentence fragment ("m2/crew-day (derived; midpoint of 50-63
   range)"). At heading weight those compete with the figure and blow the card
   open; at small-and-muted they read as the qualifier they are and wrap
   cleanly. The number is the headline, the unit is not. */
.rd-metric-card__unit {
  font-size: var(--font-size-small);
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: normal;
}

.rd-metric-card__label {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  margin: 4px 0 0;
}

.rd-metric-card__chip {
  display: inline-block;
  max-width: 100%;
  margin-top: var(--space-lg);
  font-size: var(--font-size-caption);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  overflow-wrap: anywhere;
}

/* The record chip names an org and a project straight off the row, and those
   run long -- 138 characters at the worst. Clamped to two lines rather than
   allowed to become a five-line paragraph wearing a chip's border.
   Truncating is safe HERE and nowhere else: this is the one chip that links,
   and the row it links to renders the same org and project in full. Display
   only -- nothing is truncated in Python, and a browser without line-clamp
   simply wraps. */
.rd-metric-card__chip--source {
  /* THE §3.2 RECONCILIATION, and the reason it is CSS and not Python: the
     ledger footer title-cases the identical stored vocabulary the identical
     way (.rd-ledger__footer, §54). records._claim_chip_label() emits the same
     bytes _source_split() buckets on -- `quasi independent`, space, lowercase
     -- so the card layer and the record beneath it cannot drift into two
     spellings of one token. Change this and you have shipped two vocabularies. */
  text-transform: capitalize;
}

/* NOT capitalized: this chip carries proper nouns straight off the record
   ("From the record · Webcor, SFO T-B"), and capitalize would title-case the
   prose around them into "From The Record".

   Clamped to two lines, and it becomes a full-width strip rather than a
   text-hugging pill to do it (-webkit-box is what line-clamp requires). The
   corpus forces the issue: an org-plus-project tail runs to 138 characters at
   the worst, which as an inline chip is a five-line paragraph wearing a
   border. Truncating is safe HERE and nowhere else -- this is the one chip
   that links, and the row it points at renders the same org and project in
   full. Display only: nothing is truncated in Python, and a browser without
   line-clamp just wraps. */
.rd-metric-card__chip--record {
  text-decoration: none;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rd-metric-card__chip--record:hover {
  border-color: var(--color-border-hover);
  color: var(--color-primary);
}

@media (max-width: 720px) {
  /* The grid needs no breakpoint -- auto-fill has already folded to one column
     by here. What does need one is the figure: 2.75rem is sized against a
     ~370px desktop card, and a four-digit value with a long unit beside it on
     a 320px phone is the one combination that still wants to overflow. */
  .rd-metric-card {
    padding: var(--space-md);
  }

  .rd-metric-card__value {
    font-size: 2.25rem;
  }
}

/* ==========================================================================
   §59 — R11 claim CTA / claimed badge (spec v0.3 §2.1)

   Identity-adjacent and QUIET. This is the OEM-facing twin of the correction
   banner, not a conversion unit: it sits under the Updated line at caption
   weight, because a page whose loudest element is a sales button stops reading
   as a census.

   The badge is profile metadata, NOT a trust seal. No checkmark, no colour that
   codes as approval, no border treatment that reads as a certificate -- claim
   is not verification, and the trust layer has not ruled that vocabulary.
   ========================================================================== */

.rd-claim {
  margin: var(--space-sm) 0 0;
}

/* THE HERO IS A DARK GROUND. `.hero` is a linear-gradient over --color-dark
   with `color: white`, so a muted-slate token here (--color-text-muted,
   #64748b) renders as near-invisible text on navy -- the same class of defect
   as the breadcrumb that once shipped white-on-white off this very hero, and
   one that NO HTML assertion can see: the markup is present and correct, the
   element is simply unreadable.

   So R11 uses the hero's own scale, exactly as .page-robot-detail
   .hero__updated does (rgba(255,255,255,0.4)) -- and one notch brighter than
   it, because this is a door and that is a timestamp. --color-primary is
   avoided on hover for the same reason: it is a brand colour picked against a
   light page. */
.rd-claim__cta {
  font-family: inherit;
  font-size: var(--font-size-caption);
  color: rgba(255, 255, 255, 0.6);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rd-claim__cta:hover {
  color: #fff;
}

.rd-claim__badge {
  margin: var(--space-sm) 0 0;
  font-size: var(--font-size-caption);
  color: rgba(255, 255, 255, 0.55);
}

.rd-claim__badge-org {
  color: rgba(255, 255, 255, 0.85);
}

.rd-claim__dialog {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  /* min() rather than a media query: the dialog is centred by the top layer,
     so it only ever needs to stop being wider than the viewport. */
  width: min(26rem, calc(100vw - 2rem));
  background: var(--surface-card);
  color: var(--color-text);
}

.rd-claim__dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.rd-claim__heading {
  font-size: var(--font-size-h2);
  margin: 0;
}

.rd-claim__blurb {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  margin: var(--space-sm) 0 var(--space-md);
}

.rd-claim__label {
  display: block;
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.rd-claim__input {
  width: 100%;
  font-family: inherit;
  font-size: var(--font-size-small);
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.rd-claim__actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--space-md);
}

.rd-claim__cancel {
  font-family: inherit;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  background: none;
  border: 0;
  cursor: pointer;
}

.rd-claim__error {
  font-size: var(--font-size-caption);
  color: var(--color-danger, #b91c1c);
  margin: var(--space-sm) 0 0;
}

.rd-claim__done {
  color: var(--color-text);
}

/* PP1 session C: see .intake-dialog__done. */
.rd-claim__done-msg {
  margin: 0;
  text-align: center;
  color: var(--color-text);
}

/* ==========================================================================
   R11 dialog text vs `.hero p` -- WHITE-ON-WHITE, fixed 2026-08-12 (session 9)

   The claim partial is included INSIDE the hero block (robot_detail.html:105),
   so `.hero p { color: rgba(255,255,255,0.8) }` (styles.css:405) matches every
   <p> in the dialog. A <dialog> paints in the top layer but still INHERITS AND
   MATCHES as a DOM descendant of its parent, so the dark-hero rule followed the
   dialog onto its white ground: specificity (0,1,1) beat `.rd-claim__blurb`
   (0,1,0) and beat the colour `.rd-claim__done` was inheriting from the dialog.

   Measured before the fix -- all three at contrast ratio 1.00, i.e. invisible:
     .rd-claim__blurb  "Leave an email and we'll get in touch..."
     .rd-claim__error  "Something went wrong. Please try again."
     .rd-claim__done   "Got it -- we'll be in touch."
   The last two are the ones that bite: a submit hid the form and revealed an
   invisible confirmation, so a successful claimant saw an empty box and read it
   as a failure -- on the one funnel the claim product exists to serve.

   Every element here already declared (or inherited) the right colour; none of
   them won. This restores the authored intent at (0,2,0). It does NOT touch
   `.hero p`, which is correct for the hero itself.

   No HTML assertion can see this -- the text is present and correct in the DOM
   either way -- and the 262 tests did not. A screenshot did. Third time this
   class has landed in this repo (breadcrumb, then the S4c grid, now this).
   ========================================================================== */
.rd-claim__dialog .rd-claim__blurb { color: var(--color-text-muted); }
.rd-claim__dialog .rd-claim__error { color: var(--color-danger-text, #991b1b); }
.rd-claim__dialog .rd-claim__done  { color: var(--color-text); }

/* PP1 SESSION C — THE FOURTH INSTANCE OF THE SAME CLASS, caught while making
   the change rather than by a screenshot afterwards.

   Defect 1 turned `.rd-claim__done` from a bare <p> into a CONTAINER holding a
   <p class="rd-claim__done-msg"> plus a Close button. The line above then stops
   protecting the message: it sets colour on the container, and the <p> only
   INHERITS that -- while `.hero p` at (0,1,1) matches the <p> directly, and a
   direct match always beats an inherited value regardless of the ancestor's
   specificity. So the confirmation text would have gone white-on-white again,
   in the exact element the ruling added to fix a different defect.

   (0,2,0), matching the <p> itself, is what actually holds. */
.rd-claim__dialog .rd-claim__done-msg { color: var(--color-text); }

/* ==========================================================================
   §60 — R1 hero rebuild (spec v0.4 §2, §4.5, §6.1; rulings at §0.8)

   Two rules only: the stat strip's TRACK COUNT, and the maker chip's ground.
   ========================================================================== */

/* THE TWO-CARD HERO IS A LAYOUT, NOT AN EDGE CASE. Measured 2026-08-13: 51 of
   128 active robots (40%) have zero located deployments and so render two
   cards, not three -- §6.1 rules that as two cards with no placeholder.

   The base .stat-strip is `display:flex` with `flex:1` items, which STRETCHES
   whatever is present to fill the row. That is exactly the defect §3.4 ruled
   against on R4 and that a screenshot caught in build session 9: a lone metric
   card rendered as a 1152px slab because auto-fit let survivors absorb the
   freed space. The owner's ruling applies that precedent here verbatim --
   "cards render at the three-card width, unfilled track collapses, no stretch,
   no re-centering."

   So this scopes to the ROBOT hero only (the job-detail hero keeps the flex
   behaviour it was designed with) and pins the track count at three. Two cards
   occupy two of three tracks at the width they would have had as three, and
   stay left-aligned; nothing re-centres and nothing grows. The asymmetry is
   information: this robot has no located deployments.

   `repeat(3, ...)` rather than R4's auto-fill: auto-fill derives the count
   from a floor width, which is what forced R4's floor from 15rem to 22rem to
   hold the count at three. Here the count IS the ruled quantity, so it is
   stated rather than derived from a width that a container change could move.

   minmax(0, 1fr) rather than 1fr: a bare 1fr floors at min-content, so the
   47-character source-split note measured on ROB_CIV_DOT
   ("10 vendor · 1 independent · 1 quasi independent") would push its track
   wider than a third and author a new horizontal overflow. The 0 floor lets
   the note wrap inside its track instead. */
.hero--robot-detail .stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* The item no longer needs flex:1 to size itself -- the track does it. Left
   as a grid item so the border-right hairlines still separate the cards. */
.hero--robot-detail .stat-strip__item {
  flex: none;
  min-width: 0;
}

/* The source split, and the N/+M headline suffix. Both sit under the value on
   the hero's DARK ground, so both are given an explicit colour: the base
   .stat-strip rules colour only __value and __label, and an uncoloured span
   here would inherit whatever the cascade last said -- the exact mechanism
   behind this build's three white-on-white defects.

   rgba(255,255,255,0.7) is the same token-free literal .hero .stat-strip__label
   already uses (styles.css:438), measured AA on this ground, rather than a
   var() that may not be defined -- P3 shipped three undefined custom
   properties that var() resolved silently to plausible colours. */
.hero--robot-detail .stat-strip__note,
.hero--robot-detail .stat-strip__headline-suffix,
.hero--robot-detail .stat-strip__withheld {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--text-xs);
  line-height: var(--lh-tight);
}

/* The withheld count is the one number in the strip that is NOT on the public
   record, so it is set apart from the split rather than beside it. */
.hero--robot-detail .stat-strip__withheld {
  display: block;
}

/* THE MAKER CHIP. It reuses .rd-org-chip wholesale, which carries its own
   light surface and dark text -- so on the hero's dark ground it reads as a
   light pill, high contrast in the safe direction, and nothing here overrides
   its colours. Only the spacing that puts it under the subtitle is new. */
/* PP1 session C, maker-chip ruling (owner 2026-08-13): `.hero__maker` held the
   P4 logo pill and is RETIRED with it. The maker route is the subtitle link
   below -- one occurrence, one route.

   Affordance MATCHES the site's existing in-hero link grammar rather than
   inventing one: `.rd-claim__cta` is the precedent, underline with a 2px
   offset. The colour lifts to full white against the subtitle's 0.8 so the
   link reads as interactive without a second treatment. */
.hero__maker-link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hero__maker-link:hover {
  text-decoration-thickness: 2px;
}

/* `.rd-org-chip__hint` is RETIRED (owner ruling 2026-08-13): the density hint
   is dropped from the hero, and no other caller of the shared chip ever passed
   one. The org page's "Robots this company makes" section enumerates them by
   name, which is strictly more than the count was. */


/* ==========================================================================
   §60 — Intake dialogs (PP1 session B, owner ruling 2026-08-13)
   ==========================================================================
   The three `corrections@` replacements: the robot page's correction footer
   and record-add zero state, and the org page's O6 banner. Modelled on R11's
   claim dialog (§ .rd-claim__dialog) rather than reinventing a second dialog
   language on one site.

   THE TRIGGERS WERE ANCHORS AND ARE NOW BUTTONS. A <button> carries UA styles
   an <a> does not -- its own font, a grey background, a border, padding and a
   centred text alignment -- so a door that was a quiet inline link becomes a
   grey chip in running prose unless every one of those is unset. This is not
   defensive styling; it is the actual visual regression of the change.

   GROUND CHECK. The `.hero p` colour rule near styles.css:427 -- deliberately
   NOT re-quoted here with its braces, because a closing brace in a comment
   truncates any rule-level guard that scans this file with a negated-brace
   character class, and four such guards exist in tests.py. (The R11 block
   below still carries that hazard in its own prose; pre-existing, recorded,
   not repaired here.) The rule is what made R11's dialog white-on-white when it
   shipped, because that partial
   is included INSIDE .hero and a <dialog> still inherits from its DOM parent
   even though it paints in the top layer. These three dialogs sit in
   .rd-section and .org-correct, not .hero, so that selector cannot reach them
   -- measured, not assumed, by reading computed colour in the browser at the
   act. Colours are still set explicitly here so the answer does not depend on
   which ground a future include chooses. */

.rd-orgs__correct-cta,
.rd-ledger__empty-cta,
.org-correct__link {
  font: inherit;
  color: var(--color-primary);
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: inherit;
  cursor: pointer;
}

.rd-orgs__correct-cta:hover,
.rd-ledger__empty-cta:hover,
.org-correct__link:hover { text-decoration: underline; }

.intake-dialog {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  /* min() rather than a media query, as R11: the dialog is centred by the top
     layer, so it only ever needs to stop being wider than the viewport. */
  width: min(30rem, calc(100vw - 2rem));
  background: var(--surface-card);
  color: var(--color-text);
}

.intake-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.intake-dialog__heading {
  font-size: var(--font-size-h2);
  margin: 0;
}

.intake-dialog__blurb {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  margin: var(--space-sm) 0 var(--space-md);
}

.intake-dialog__label {
  display: block;
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.intake-dialog__input,
.intake-dialog__textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--font-size-small);
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
  /* box-sizing is stated because width:100% + padding on a textarea overflows
     the dialog otherwise, and the dialog has no horizontal scroll to hide it. */
  box-sizing: border-box;
}

.intake-dialog__textarea {
  resize: vertical;
  min-height: 5rem;
}

.intake-dialog__actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--space-md);
}

.intake-dialog__cancel {
  font-family: inherit;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  background: none;
  border: 0;
  cursor: pointer;
}

.intake-dialog__error {
  font-size: var(--font-size-caption);
  color: var(--color-danger, #b91c1c);
  margin: var(--space-sm) 0 0;
}

/* PP1 session C: the confirmation is a CONTAINER now, not a bare <p> -- it
   carries its own Close button, because the success swap hides the form and
   the Cancel button lives inside it. */
.intake-dialog__done {
  color: var(--color-text);
}

.intake-dialog__done-msg {
  margin: 0;
  text-align: center;
  color: var(--color-text);
}


/* ==========================================================================
   §61 — /jobs/ grid: the 721-934 overflow band (PP1 session B)
   ==========================================================================
   MEASURED, not inferred. documentElement.scrollWidth - clientWidth on /jobs/:
   0 at 720 · 214 at 721 · 167 at 768 · 135 at 800 · 35 at 900 · 1 at 934 ·
   0 at 935 and above. A band, not the 768 point-defect it was first reported
   as -- 768 was simply the width someone happened to measure at.

   THE CAUSE. `.page-jobs-index .jobs-grid` is repeat(2, 1fr) above 720px, and
   the 1-column collapse below sits in the same @media (max-width: 720px) block
   as the sidebar's. But the sidebar does NOT collapse there for free: above
   720 it still occupies var(--rail-nav), so `.jobs-main` gets only
   viewport - 300px (24px padding x2 + 220px rail + 32px gutter). A job card's
   min-content is 321.48px -- driven by .job-card__stats at 271.48 plus 24px
   padding x2 -- and `1fr`'s automatic minimum IS min-content, so two tracks
   plus a 16px gap demand 659px of main and get 468 at 768. The tracks overrun
   their container and the card's right edge pins at 935px absolute, which is
   why the overflow is exactly 935 - viewport across the whole band.

   /robots/ is CLEAN and is deliberately untouched: .robots-grid stays
   1-column until 1024, by which width main is wide enough for two.

   WHY THE BREAKPOINT IS 934 AND NOT A ROUND NUMBER. 935 is where the overflow
   reaches zero, measured at 1px increments. Rounding up to 959 would collapse
   the grid at 935-959 where nothing is broken -- an effect outside the defect,
   which is what the differential is checking for. The number is derived from
   the card's min-content, so it moves if .job-card__stats does; that coupling
   is why shrinking that min-content is queued as the real fix.

   THIS IS THE BOUNDED HALF OF A TWO-PART RULING (owner, 2026-08-13). The other
   half -- shrink .job-card__stats so two columns can return on tablet -- is
   structural and is queued, not built. */
@media (max-width: 934px) {
    .page-jobs-index .jobs-grid {
        grid-template-columns: 1fr;
    }
}

/* ── §62: Video extras (Profile V2, admin-only) — added 2026-08-23 ──
   The robot detail page's SECOND video surface. The first is the TL;DR slot, which
   is unchanged furniture; this renders entries 2..n of the admin `video_urls` column
   as real embeds, and non-YouTube entries as plain links.

   ADMIN-ONLY BY CONSTRUCTION: no baked blob carries `video_urls`, and the column is
   empty on all 141 rows as of this deploy, so these selectors match nothing on any
   live page today. That is what lets them ship inside a byte-identical promise.

   The frame uses aspect-ratio rather than the padding-top hack because every browser
   in the support matrix has had it since 2021, and the hack needs an absolutely
   positioned child that would fight the iframe's own sizing. */
.rd-videos__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.rd-videos__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--color-dark);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.rd-videos__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.rd-videos__caption {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.rd-videos__link {
    display: inline-block;
    padding: var(--space-3) 0;
    font-size: var(--text-base);
    color: var(--color-primary);
    word-break: break-all;
}

/* ── §63: the WHOLE robot card is the link — owner request, 2026-08-23 ──
   Before this, only the bottom "See full profile" strip was clickable, because the
   card is a div and that strip was the only anchor inside it.

   WHY A STRETCHED PSEUDO-ELEMENT AND NOT A WRAPPING ANCHOR. /robots/ already wraps
   each card in its own outer anchor (robots_index.html:127), and its filter JS reads
   the data-attributes off that anchor. Wrapping the card again inside the partial
   would nest one anchor in another — invalid HTML that the parser silently unwinds —
   and moving the outer one would break the filter. The overlay adds no element to the
   DOM, so the markup of every page is unchanged and there is exactly one link per card.

   SCOPE IS JOB PAGES ONLY, and that is not a choice so much as a fact: the base rule
   sets .robot-card-v2__detail-link to display none, and only .page-job-detail turns it
   on. On /robots/ the anchor never renders, so this rule cannot match there — the index
   keeps the whole-card click it already had through its own outer anchor.

   The a:hover underline now fires from anywhere on the card, since the overlay IS part
   of the anchor. That is the affordance, for free.

   z-index 2 clears .robot-card-v2__status-overlay at 1 so the corner status tag does not
   punch a dead hole in the click target. The overlay is transparent, so nothing is
   hidden — only pointer events are captured, and the tag is not interactive.

   BOUND: the muted "profile coming soon" variant is a div, not an anchor, so the
   a. prefix here means a card with no detail page stays unclickable, which is the
   "if there is one" half of the request. */
.page-job-detail a.robot-card-v2__detail-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: pointer;
}