/* ==========================================================================
   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;
}

/* 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);
}

.spectrum-anchor .rd-logo-grid-section {
    border-top-color: rgba(255, 255, 255, 0.15);
}

.spectrum-anchor .rd-logo-grid__heading {
    color: rgba(255, 255, 255, 0.7);
}

/* -- 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 {
    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 {
    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 {
    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 {
    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 ── */
.rd-logo-grid-section {
    border-top: 1px solid var(--color-border, #e2e8f0);
    padding-top: var(--space-5);
}

.rd-logo-grid__heading {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-4);
}

.rd-logo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}

.rd-logo-grid__item {
    background: var(--surface-card);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-3) var(--space-4);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}

.rd-logo-grid__name {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium, 500);
    color: var(--color-text);
}

.rd-logo-grid__logo {
    width: 100%;
    height: 36px;
    object-fit: contain;
}

@media (max-width: 720px) {
    .rd-logo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── 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);
}

@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);
}