:root {
    --bg-deep: #05070d;
    --bg-panel: #0e1526;
    --bg-panel-hover: #131c33;
    /* #253150 measured 1.42:1 / 1.57:1 against the two backgrounds — well short of the 3:1
       minimum for a UI component boundary, and the only thing marking each answer box as
       clickable. Raised to a value that clears 3:1 against both backgrounds. */
    --border-color: #4d6394;
    --text-main: #f3f5f9;
    --text-muted: #9aa4bb;
    --text-quote: #93c5fd;
    --primary-color: #3b82f6;
    --primary-hover: #60a5fa;
    /* Separate from --primary-color: white button text on #3b82f6 measured only 3.68:1,
       below the 4.5:1 minimum for normal text. --primary-color itself is fine as a foreground
       color for links/accents, so it stays; only the button's background needed darkening. */
    --button-bg: #2563eb;
    --button-bg-hover: #1d4ed8;

    /* Pillar accent colors themselves live in data/propositions.json (pillars[].color) and are
       applied per-card via an inline --pillar-color custom property set in script.js — not
       here. (agentic-operations was lightened from #8b5cf6 to #a78bfa there: the darker value
       measured 4.3:1 as pillar-label text, just under the 4.5:1 minimum.) */
}

* {
    box-sizing: border-box;
}

body,
html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: var(--text-main);
    background: var(--bg-deep);
    line-height: 1.6;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: 8px;
    left: -9999px;
    z-index: 2000;
    background: var(--primary-color);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
}

.skip-link:focus {
    left: 8px;
}

/* Hero / intro, matching the deck's title-slide gradient */
.hero {
    background: linear-gradient(100deg, #0d1b3a 0%, #05070d 65%);
    padding: 64px 24px 56px;
    border-bottom: 1px solid var(--border-color);
}

.hero-content {
    max-width: 720px;
    margin: 0 auto;
}

.hero h1 {
    font-size: 2.1rem;
    font-weight: 800;
    margin: 0 0 16px;
    line-height: 1.25;
}

.hero p {
    color: #cbd5e1;
    font-size: 1.05rem;
    max-width: 600px;
    margin: 0;
}

/* Homepage only: the strapline block (eyebrow label + core-offer line + why-it-matters
   sentence), set off from the functional "what these pages do" paragraph below it with a left
   accent border — the same left-border-accent language already used elsewhere on the site
   (proposition cards, tile links) for "this is a distinct, labelled thing", just using
   --primary-color here since there's no pillar context on the homepage.
   Selectors are qualified as ".hero .hero-x" (not just ".hero-x") so they reliably beat ".hero
   p"'s specificity — a single-class selector alone loses to that, silently falling back to the
   plain paragraph's font-size/color. */
.hero-strapline {
    margin: 0 0 20px;
    padding-left: 16px;
    border-left: 3px solid var(--primary-color);
}

.hero .hero-eyebrow {
    color: var(--text-quote);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 6px;
}

.hero .hero-tagline {
    color: var(--text-main);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 6px;
}

.hero .hero-tagline-explainer {
    color: var(--text-muted);
    font-size: 0.95rem;
    max-width: 520px;
    margin: 0;
}

.hero-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

/* --border-color only measures ~2.86:1 against the lightest edge of the hero's gradient,
   just under the 3:1 non-text minimum — use --text-muted instead here (6.8:1, verified against
   the gradient's lightest point) so the button boundary stays clear across the whole gradient. */
.hero-top-row .button.secondary {
    border-color: var(--text-muted);
}

.logo-badge {
    display: inline-block;
    background: #ffffff;
    border-radius: 8px;
    padding: 10px 16px;
    line-height: 0;
}

.logo-badge .logo {
    height: 28px;
    width: auto;
    display: block;
}

main {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 24px 80px;
}

/* Progress indicator — just "Question N", no total/segmented bar (see diagnostic.js) */
.progress-label {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0 0 24px;
}

/* Question card */
.question-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px;
}

.question-fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.question-legend {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 24px;
    padding: 0;
    line-height: 1.4;
}

/* Not :focus or :focus-visible — tabindex="-1" (needed so JS can move focus here
   programmatically) also makes this clickable-focusable, and a mouse click directly on the
   question text isn't meaningful (nothing happens), so it shouldn't show an outline. Instead,
   diagnostic.js adds .is-focused itself at the exact moment it calls legend.focus() after a
   Next/Back click, decoupling the visible ring from real DOM focus state entirely. */
/* Suppresses the browser's own default focus outline, which appears on any focused element
   regardless of author CSS — this was still showing on a direct click even after the .is-focused
   change below, since removing our own :focus rule doesn't remove the browser's built-in one. */
.question-legend:focus {
    outline: none;
}

.question-legend.is-focused {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
    border-radius: 4px;
}

.question-subtext {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: -12px 0 20px;
}

.option {
    display: block;
    margin-bottom: 12px;
}

.option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.option label {
    position: relative;
    display: block;
    padding: 14px 18px 14px 50px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-deep);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.option label::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translate(0, -50%);
    width: 18px;
    height: 18px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-panel);
    box-sizing: border-box;
}

.option label:hover {
    border-color: var(--primary-color);
    background: var(--bg-panel-hover);
}

.option input[type="radio"]:checked + label {
    border-color: var(--primary-color);
    background: rgba(59, 130, 246, 0.12);
}

.option input[type="radio"]:checked + label::before {
    border-color: var(--primary-color);
    border-width: 5px;
}

.option input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.wizard-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 28px;
}

.button {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-block;
    background-color: var(--button-bg);
    color: #fff;
    border: 1px solid transparent;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.button:hover {
    background-color: var(--button-bg-hover);
}

.button:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.button.secondary {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-muted);
}

.button.secondary:hover {
    border-color: var(--text-muted);
    background: var(--bg-panel-hover);
    color: var(--text-main);
}

.button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Results */
.results h2 {
    outline: none;
    font-size: 1.6rem;
    margin-bottom: 4px;
}

.results-intro {
    color: var(--text-muted);
    margin-bottom: 32px;
}

.pillar-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pillar-color, var(--primary-color));
    margin: 0 0 8px;
}

.proposition-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--pillar-color, var(--primary-color));
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
}

.proposition-card h3 {
    margin: 0 0 12px;
    font-size: 1.2rem;
}

.how-it-helps {
    color: #dbe2f0;
    margin: 0 0 16px;
}

.section-label {
    font-weight: 700;
    color: var(--text-quote);
    margin: 0 0 4px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.proposition-card p {
    color: #dbe2f0;
    margin: 0 0 4px;
}

.proposition-card ul {
    margin: 0 0 8px;
    padding-left: 20px;
    color: #dbe2f0;
}

.no-case-studies {
    color: var(--text-muted);
    font-style: italic;
}

.case-study-item {
    margin-bottom: 10px;
}

.case-study-item:last-child {
    margin-bottom: 0;
}

/* Plain text by default (no published link yet) — .case-study-headline is only ever an <a> when
   buildCaseStudiesList() has a real http(s) url for it, in which case the generic `a` rule above
   already colors it; this just keeps the two forms the same weight/size either way. */
.case-study-headline {
    font-weight: 600;
    display: block;
}

p.case-study-headline {
    color: #dbe2f0;
    margin: 0;
}

.case-study-stats {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 2px 0 0;
}

/* Full case-study detail card (proposition.html, case-studies.html) — buildCaseStudyCard() in
   shared.js. .case-study-card itself carries no chrome of its own; it's a content wrapper
   inside whichever card the caller already draws (.proposition-card), so nesting several case
   studies under one proposition doesn't nest borders inside borders. */
.case-study-card {
    padding: 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    margin-bottom: 16px;
}

.case-study-card + .case-study-card {
    margin-top: 0;
    padding-top: 16px;
    border-top: none;
}

.case-study-summary {
    color: #dbe2f0;
    margin: 0 0 16px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.case-study-relations {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 12px 0 0;
}

.case-study-relations a {
    color: var(--text-muted);
    text-decoration: underline;
}

.case-study-relations a:hover {
    color: var(--primary-hover);
}

/* Updated case study card styling with logo support and grid layouts */

.case-study-client-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--pillar-color, #14b8a6);
}

.case-study-logo {
    width: 48px;
    height: 48px;
    min-width: 48px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
}

.case-study-client-name {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-main);
}

/* Highlights displayed in a responsive grid instead of bullet list */
.case-study-highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.case-study-highlight-card {
    background: rgba(255, 255, 255, 0.03);
    padding: 12px;
    border-radius: 6px;
    border-left: 3px solid var(--pillar-color, #14b8a6);
    transition: background 0.2s ease;
}

.case-study-highlight-card:hover {
    background: rgba(255, 255, 255, 0.06);
}

.highlight-title {
    display: block;
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 6px;
}

.highlight-description {
    color: #dbe2f0;
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.5;
}

/* Stats displayed as a grid of badges instead of dot-separated line */
.case-study-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.case-study-stat {
    background: rgba(255, 255, 255, 0.05);
    padding: 12px;
    border-radius: 6px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.case-study-stat:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--pillar-color, #14b8a6);
}

.case-study-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--pillar-color, #14b8a6);
    display: block;
}

.case-study-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.3;
}

/* Case studies page: toggle between grouping by case study and grouping by proposition. Real
   <button>s with aria-pressed, not a styled radio/checkbox pair, so the pressed state is
   announced without extra ARIA wiring. */
.view-toggle {
    display: flex;
    gap: 8px;
    margin: 0 0 24px;
}

.view-toggle-button {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.view-toggle-button:hover {
    border-color: var(--text-muted);
    background: var(--bg-panel-hover);
    color: var(--text-main);
}

.view-toggle-button:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.view-toggle-button[aria-pressed="true"] {
    background-color: var(--button-bg);
    border-color: var(--button-bg);
    color: #fff;
}

.view-toggle-button[aria-pressed="true"]:hover {
    background-color: var(--button-bg-hover);
    border-color: var(--button-bg-hover);
    color: #fff;
}

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

.pairing-note {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-style: italic;
    margin: 0 0 16px;
}

/* Homepage nav cards */
.nav-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.nav-card {
    display: block;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    border-radius: 12px;
    padding: 24px;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.nav-card:hover {
    background: var(--bg-panel-hover);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.nav-card:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.nav-card h2 {
    margin: 0 0 8px;
    font-size: 1.25rem;
    color: var(--text-main);
}

.nav-card p {
    margin: 0;
    color: var(--text-muted);
}

/* Homepage "Our approach" — three principle statements below the nav cards, expanding on the
   strapline's "why". */
.approach-section {
    margin-top: 48px;
}

.approach-section h2 {
    font-size: 1.1rem;
    margin: 0 0 20px;
}

.approach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.approach-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    border-radius: 12px;
    padding: 20px;
}

.approach-statement {
    color: var(--text-main);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
}

/* Propositions browse page */
.pillar-section {
    margin-bottom: 40px;
}

.pillar-section-heading {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pillar-color, var(--primary-color));
    padding-bottom: 8px;
    margin: 0 0 20px;
    border-bottom: 1px solid var(--border-color);
}

.propositions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    align-items: start;
    gap: 16px;
}

.proposition-tile-link {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--pillar-color, var(--primary-color));
    border-radius: 12px;
    padding: 20px 44px 20px 20px;
    text-decoration: none;
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.proposition-tile-link:hover {
    background: var(--bg-panel-hover);
    border-color: var(--primary-color);
}

.proposition-tile-link:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

.proposition-tile-link .pillar-label {
    margin: 0;
}

.tile-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-main);
}

.tile-quote {
    font-style: italic;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.tile-arrow {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1.2rem;
    color: var(--text-muted);
}

/* Proposition detail page. Uses its own class (.section-body) rather than a generic
   "#proposition-detail p" element selector — an ID-qualified rule like that would beat
   .section-label/.pairing-note/etc.'s plain-class color on specificity, collapsing them all to
   this same color regardless of source order. */
.section-body {
    color: #dbe2f0;
    margin: 0 0 4px;
}

.back-link {
    display: inline-block;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.back-link:hover {
    color: var(--primary-hover);
}

/* Case studies empty state */
.empty-state {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 32px;
}

.empty-state h2 {
    margin: 0 0 8px;
    font-size: 1.2rem;
}

.empty-state p {
    color: var(--text-muted);
    margin: 0;
}

/* Delivery plan (diagnostic results). Breaks out to full viewport width — a real 5-column data
   grid doesn't fit the page's normal 720px reading column — while .delivery-plan-inner keeps its
   own content within a wider but still bounded, centered column. */
.delivery-plan {
    margin: 40px calc(50% - 50vw) 0;
    padding: 32px 24px 0;
    border-top: 1px solid var(--border-color);
}

.delivery-plan-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.delivery-plan-heading {
    font-size: 1.3rem;
    margin: 0 0 4px;
}

.delivery-plan-intro {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0 0 24px;
}

.delivery-grid-scroll {
    overflow-x: auto;
    padding-bottom: 8px;
}

.delivery-grid {
    display: grid;
    grid-template-columns: 200px repeat(var(--stage-count, 4), minmax(180px, 1fr));
    gap: 1px;
    background: var(--border-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    min-width: 920px;
}

.delivery-stage-heading {
    background: var(--bg-panel);
    color: var(--text-main);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 12px 14px;
}

.delivery-row-label {
    background: var(--bg-deep);
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--pillar-color, var(--primary-color));
    padding: 12px 14px;
    border-left: 3px solid var(--pillar-color, var(--primary-color));
}

.delivery-cell {
    background: var(--bg-panel);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
}

.delivery-chip {
    background: var(--bg-deep);
    border: 1px solid var(--pillar-color, var(--border-color));
    border-radius: 8px;
    padding: 8px 10px;
}

.delivery-chip-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #dbe2f0;
    margin: 0 0 4px;
}

.delivery-chip-items {
    margin: 0;
    padding-left: 16px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.delivery-chip-items li {
    margin-bottom: 2px;
}

/* Solo delivery plan (proposition.html). The grid needs the same full-viewport-width breakout
   .delivery-plan gives the shared plan above — otherwise it's stuck inside main's 720px reading
   column and needs horizontal scroll on every screen size, not just narrow ones. No heading or
   intro here (the page's own "Outline plan" heading already introduces it), so this only needs
   the margin/padding, not .delivery-plan's border-top. */
.delivery-grid-breakout {
    margin: 24px calc(50% - 50vw) 0;
    padding: 0 24px;
}

/* Collapsible Decision Matrix */
.collapsible-matrix {
    margin: 32px 0;
}

.matrix-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.matrix-toggle:hover {
    background: var(--bg-panel-hover);
    border-color: var(--primary-color);
}

.matrix-toggle:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.matrix-content {
    margin-top: 12px;
}

/* Decision Matrix Table */
.decision-matrix-section {
    margin: 0;
    overflow-x: auto;
}

.decision-matrix {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.85rem;
}

.decision-matrix thead {
    background: var(--bg-deep);
    position: sticky;
    top: 0;
}

.decision-matrix th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 700;
    color: var(--text-main);
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.decision-matrix td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.decision-matrix tbody tr:last-child td {
    border-bottom: none;
}

.decision-matrix tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.2);
}

.decision-matrix .matrix-question {
    font-weight: 600;
    color: var(--text-main);
    min-width: 180px;
    max-width: 200px;
}

.decision-matrix .matrix-question strong {
    display: block;
    margin-bottom: 4px;
    line-height: 1.3;
}

.decision-matrix .matrix-answer {
    min-width: 100px;
    white-space: normal;
}

.answer-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.answer-this-isn't-an-issue-for-us {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.answer-this-is-somewhat-of-a-concern {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
}

.answer-this-is-a-key-challenge-for-us {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.decision-matrix .matrix-propositions {
    min-width: 140px;
}

.decision-matrix .matrix-why {
    min-width: 250px;
}

.decision-matrix .matrix-propositions ul,
.decision-matrix .matrix-why ul {
    margin: 0;
    padding-left: 18px;
}

.decision-matrix .matrix-propositions li,
.decision-matrix .matrix-why li {
    margin-bottom: 3px;
    color: var(--text-main);
    line-height: 1.3;
}

.decision-matrix .matrix-why li {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Triggered By section in proposition cards */
.triggered-by-section {
    background: var(--bg-panel);
    padding: 12px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
}

.triggered-by-section strong {
    display: block;
    margin-bottom: 8px;
    color: var(--text-main);
    font-weight: 600;
}

.trigger-reasons {
    margin: 0;
    padding-left: 20px;
}

.trigger-reasons li {
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Email capture on results page */
.results-email-capture {
    margin: 32px 0;
    padding: 24px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 500px;
}

.results-email-capture label {
    display: block;
    font-size: 0.95rem;
    color: var(--text-main);
    font-weight: 500;
}

.results-email-notice {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: -8px 0 8px 0;
    padding: 0;
}

.results-email-input {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-deep);
    color: var(--text-main);
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.results-email-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.results-email-input.error {
    border-color: #ef4444;
    animation: shake 0.3s;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.results-email-button {
    padding: 10px 16px;
    background: var(--button-bg);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.results-email-button:hover:not(:disabled) {
    background: var(--button-bg-hover);
}

.results-email-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}