/* ==========================================================================
   AgentIQ site — design tokens + components
   Token names mirror the platform's app.css (--aq-*) so both codebases stay
   legible to the same people. Palette: indigo on slate, matching the platform.
   ========================================================================== */

:root {
    /* Brand — indigo, identical to the platform */
    --aq-brand-300: #a5b4fc;
    --aq-brand-400: #818cf8;
    --aq-brand-500: #6366f1;
    --aq-brand-600: #4f46e5;
    --aq-brand-700: #4338ca;

    /* Neutrals — slate */
    --aq-slate-50: #f8fafc;
    --aq-slate-100: #f1f5f9;
    --aq-slate-200: #e2e8f0;
    --aq-slate-300: #cbd5e1;
    --aq-slate-400: #94a3b8;
    --aq-slate-500: #64748b;
    --aq-slate-600: #475569;
    --aq-slate-700: #334155;
    --aq-slate-800: #1e293b;
    --aq-slate-900: #0f172a;
    --aq-slate-950: #020617;

    /* Semantic accents — used sparingly, for evidence/status vocabulary */
    --aq-positive: #34d399;
    --aq-caution: #fbbf24;
    --aq-critical: #f87171;

    /* Surfaces */
    --aq-surface-dark: var(--aq-slate-950);
    --aq-surface-dark-raised: #0b1220;
    --aq-surface-light: var(--aq-slate-50);
    --aq-surface-light-raised: #ffffff;

    /* Text */
    --aq-text-on-dark: var(--aq-slate-100);
    --aq-text-on-dark-muted: var(--aq-slate-400);
    --aq-text-on-light: var(--aq-slate-900);
    --aq-text-on-light-muted: var(--aq-slate-600);

    /* Borders */
    --aq-border-dark: rgba(148, 163, 184, 0.16);
    --aq-border-light: var(--aq-slate-200);

    /* Typography */
    --aq-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Rhythm */
    --aq-shell: 1140px;
    --aq-shell-narrow: 820px;
    --aq-gutter: 1.5rem;
    --aq-band-y: 5.5rem;
    --aq-radius: 14px;
    --aq-radius-sm: 9px;

    /* The walkthrough's media stage. Wider than the reading measure on purpose:
       the video carries small on-screen type that a text column is too narrow
       to read. */
    --aq-video-stage: 1000px;
}

/* --------------------------------------------------------------------------
   Self-hosted Inter. No external font CDN: it costs a round trip and is a
   GDPR-relevant third-party request on a site that argues we are privacy-safe.
   Files live in wwwroot/fonts/ — see fonts/README.md.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

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

body {
    margin: 0;
    font-family: var(--aq-font-sans);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--aq-text-on-dark);
    background: var(--aq-surface-dark);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
    margin: 0 0 0.6em;
    line-height: 1.15;
    letter-spacing: -0.022em;
    font-weight: 640;
}

h1 {
    font-size: clamp(2.15rem, 1.35rem + 3.1vw, 3.6rem);
}

h2 {
    font-size: clamp(1.65rem, 1.2rem + 1.8vw, 2.4rem);
}

h3 {
    font-size: 1.2rem;
}

p {
    margin: 0 0 1.1em;
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--aq-brand-300);
    text-decoration-color: rgba(165, 180, 252, 0.4);
    text-underline-offset: 3px;
}

a:hover {
    text-decoration-color: currentColor;
}

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

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

:focus-visible {
    outline: 2px solid var(--aq-brand-400);
    outline-offset: 3px;
    border-radius: 4px;
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.aq-shell {
    width: 100%;
    max-width: var(--aq-shell);
    margin-inline: auto;
    padding-inline: var(--aq-gutter);
}

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

.aq-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.7rem 1.1rem;
    background: var(--aq-brand-600);
    color: #fff;
    border-radius: 0 0 var(--aq-radius-sm) 0;
    text-decoration: none;
}

.aq-skip:focus {
    left: 0;
}

.aq-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.aq-main {
    flex: 1;
}

.aq-eyebrow {
    display: block;
    margin-bottom: 0.9rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--aq-brand-400);
}

.aq-lead {
    font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.22rem);
    line-height: 1.65;
    color: var(--aq-text-on-dark-muted);
    max-width: 62ch;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.aq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.72rem 1.4rem;
    border: 1px solid transparent;
    border-radius: var(--aq-radius-sm);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 560;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease,
        color 0.15s ease;
}

.aq-btn--primary {
    background: var(--aq-brand-600);
    border-color: var(--aq-brand-600);
    color: #fff;
}

.aq-btn--primary:hover {
    background: var(--aq-brand-500);
    border-color: var(--aq-brand-500);
    color: #fff;
}

.aq-btn--secondary {
    background: transparent;
    border-color: var(--aq-border-dark);
    color: var(--aq-text-on-dark);
}

.aq-btn--secondary:hover {
    border-color: var(--aq-brand-400);
    color: #fff;
}

.aq-btn--sm {
    padding: 0.5rem 1rem;
    font-size: 0.88rem;
}

/* An action that points at a video rather than a page. Its own tier: heavier
   than the outline button next to it, lighter than the primary, and carrying a
   filled glyph so it reads as "press play" before the label is read. */
.aq-btn--play {
    background: rgba(99, 102, 241, 0.16);
    border-color: var(--aq-brand-500);
    color: #fff;
    padding-left: 1.05rem;
}

.aq-btn--play:hover {
    background: rgba(99, 102, 241, 0.28);
    border-color: var(--aq-brand-400);
    color: #fff;
}

.aq-btn__play-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--aq-brand-600);
    color: #fff;
}

/* Buttons sitting on a light band */
.aq-band--light .aq-btn--secondary {
    border-color: var(--aq-slate-300);
    color: var(--aq-text-on-light);
}

.aq-band--light .aq-btn--secondary:hover {
    border-color: var(--aq-brand-600);
    color: var(--aq-brand-700);
}

/* ==========================================================================
   Header
   ========================================================================== */

.aq-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(2, 6, 23, 0.86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--aq-border-dark);
}

.aq-header__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 68px;
}

.aq-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--aq-text-on-dark);
    text-decoration: none;
    font-weight: 640;
    letter-spacing: -0.02em;
    font-size: 1.06rem;
}

.aq-brand:hover {
    color: #fff;
}

.aq-brand__mark {
    flex: none;
}

.aq-nav {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin-left: auto;
}

.aq-nav__link {
    color: var(--aq-text-on-dark-muted);
    text-decoration: none;
    font-size: 0.93rem;
    font-weight: 500;
    padding: 0.3rem 0;
    border-bottom: 2px solid transparent;
}

.aq-nav__link:hover {
    color: var(--aq-text-on-dark);
}

.aq-nav__link.active {
    color: #fff;
    border-bottom-color: var(--aq-brand-500);
}

.aq-nav__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: 0.6rem;
}

.aq-nav-toggle {
    display: none;
    margin-left: auto;
    padding: 0.5rem;
    background: transparent;
    border: 1px solid var(--aq-border-dark);
    border-radius: var(--aq-radius-sm);
    color: var(--aq-text-on-dark);
    cursor: pointer;
}

/* 1040px, not 900: seven links plus the brand and the demo button need ~1010px
   on one row, so the horizontal nav is offered only where it actually fits. */
@media (max-width: 1040px) {
    .aq-nav-toggle {
        display: inline-flex;
    }

    .aq-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem var(--aq-gutter) 1.25rem;
        background: var(--aq-surface-dark);
        border-bottom: 1px solid var(--aq-border-dark);
    }

    .aq-nav[data-open="true"] {
        display: flex;
    }

    .aq-nav__link {
        padding: 0.7rem 0;
        border-bottom: 1px solid var(--aq-border-dark);
    }

    /* Stacked, the underline would read as the row separator it sits next to,
       so the current page is marked down its leading edge instead. */
    .aq-nav__link.active {
        border-bottom-color: var(--aq-border-dark);
        border-left: 2px solid var(--aq-brand-500);
        margin-left: -0.75rem;
        padding-left: 0.6rem;
    }

    .aq-nav__actions {
        margin: 1rem 0 0;
        flex-direction: column;
        align-items: stretch;
    }
}

/* ==========================================================================
   Bands
   ========================================================================== */

.aq-band {
    padding-block: var(--aq-band-y);
    /* Clears the sticky header when an in-page anchor jumps here. */
    scroll-margin-top: 68px;
}

.aq-band--dark {
    background: var(--aq-surface-dark);
    color: var(--aq-text-on-dark);
}

.aq-band--dark-raised {
    background: var(--aq-surface-dark-raised);
    color: var(--aq-text-on-dark);
    border-block: 1px solid var(--aq-border-dark);
}

.aq-band--light {
    background: var(--aq-surface-light);
    color: var(--aq-text-on-light);
}

.aq-band--light .aq-lead,
.aq-band--light .aq-band__intro {
    color: var(--aq-text-on-light-muted);
}

.aq-band--light .aq-eyebrow {
    color: var(--aq-brand-600);
}

.aq-band--light a {
    color: var(--aq-brand-700);
}

.aq-band__header {
    max-width: 62ch;
    margin-bottom: 2.75rem;
}

.aq-band__header--center {
    margin-inline: auto;
    text-align: center;
}

.aq-band__intro {
    color: var(--aq-text-on-dark-muted);
    font-size: 1.03rem;
    margin: 0;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.aq-hero {
    position: relative;
    padding-block: clamp(3.5rem, 2rem + 6vw, 7rem);
    background:
        radial-gradient(
            60rem 30rem at 15% -10%,
            rgba(79, 70, 229, 0.28),
            transparent 60%
        ),
        radial-gradient(
            45rem 25rem at 95% 0%,
            rgba(99, 102, 241, 0.16),
            transparent 55%
        ),
        var(--aq-surface-dark);
    border-bottom: 1px solid var(--aq-border-dark);
}

.aq-hero__grid {
    display: grid;
    gap: clamp(2rem, 1rem + 4vw, 3.5rem);
    align-items: center;
}

.aq-hero__grid--split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

@media (max-width: 900px) {
    .aq-hero__grid--split {
        grid-template-columns: minmax(0, 1fr);
    }
}

.aq-hero__title {
    margin-bottom: 1.1rem;
    max-width: 20ch;
}

.aq-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2rem;
}

.aq-hero__status {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 2rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--aq-border-dark);
    font-size: 0.9rem;
    color: var(--aq-text-on-dark-muted);
    max-width: 56ch;
}

.aq-hero__status-dot {
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: 0.55em;
    border-radius: 50%;
    background: var(--aq-caution);
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}

/* ==========================================================================
   StepFlow
   ========================================================================== */

.aq-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 1rem;
}

.aq-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.4rem 1.3rem;
    background: var(--aq-surface-dark-raised);
    border: 1px solid var(--aq-border-dark);
    border-radius: var(--aq-radius);
}

.aq-band--light .aq-step {
    background: var(--aq-surface-light-raised);
    border-color: var(--aq-border-light);
}

/* Connector arrow between steps — decorative, hidden from assistive tech */
.aq-steps--connected .aq-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -0.72rem;
    width: 0.9rem;
    height: 0.9rem;
    transform: translateY(-50%) rotate(45deg);
    border-top: 2px solid var(--aq-brand-500);
    border-right: 2px solid var(--aq-brand-500);
    opacity: 0.65;
}

@media (max-width: 640px) {
    .aq-steps--connected .aq-step:not(:last-child)::after {
        display: none;
    }
}

.aq-step__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.14);
    border: 1px solid rgba(129, 140, 248, 0.35);
    color: var(--aq-brand-300);
    font-size: 0.88rem;
    font-weight: 640;
    font-variant-numeric: tabular-nums;
}

.aq-band--light .aq-step__index {
    background: rgba(99, 102, 241, 0.1);
    color: var(--aq-brand-700);
}

.aq-step__label {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
}

.aq-step__text {
    margin: 0;
    font-size: 0.92rem;
    color: var(--aq-text-on-dark-muted);
}

.aq-band--light .aq-step__text {
    color: var(--aq-text-on-light-muted);
}

/* ==========================================================================
   CardGrid / FeatureCard
   ========================================================================== */

.aq-cards {
    display: grid;
    gap: 1.15rem;
}

/* Below the breakpoint the grid reflows on its own; above it, the requested
   column count is honoured exactly, so six cards read as 3 + 3 rather than
   4 + 2. */
.aq-cards--2,
.aq-cards--3,
.aq-cards--4,
.aq-cards--5 {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

@media (min-width: 900px) {
    .aq-cards--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aq-cards--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .aq-cards--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Five across needs more room than four before the columns get too narrow
       to read, so it waits for the wider breakpoint below. */
    .aq-cards--5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1160px) {
    .aq-cards--5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.9rem;
    }
}

.aq-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.6rem 1.45rem;
    background: var(--aq-surface-dark-raised);
    border: 1px solid var(--aq-border-dark);
    border-radius: var(--aq-radius);
}

.aq-band--light .aq-card {
    background: var(--aq-surface-light-raised);
    border-color: var(--aq-border-light);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.aq-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: 0.3rem;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.14);
    color: var(--aq-brand-300);
}

.aq-band--light .aq-card__icon {
    background: rgba(99, 102, 241, 0.1);
    color: var(--aq-brand-600);
}

.aq-card__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 620;
}

/* Delivery-status pill. Deliberately plain: it is a caveat, not a feature. */
.aq-status {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--aq-border-dark);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 620;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
    color: var(--aq-slate-400);
}

.aq-band--light .aq-status {
    border-color: var(--aq-slate-300);
    color: var(--aq-slate-500);
}

/* Live: the one status that is not a caveat. Kept rare on purpose — if most
   cards carried it, it would stop meaning anything. */
.aq-status--live {
    color: var(--aq-positive);
    border-color: currentColor;
    background: rgba(52, 211, 153, 0.1);
}

.aq-band--light .aq-status--live {
    /* #34d399 does not carry enough contrast on a light surface. */
    color: #047857;
    border-color: currentColor;
    background: rgba(4, 120, 87, 0.08);
}

.aq-card__text {
    margin: 0;
    font-size: 0.94rem;
    color: var(--aq-text-on-dark-muted);
}

.aq-band--light .aq-card__text {
    color: var(--aq-text-on-light-muted);
}

/* Founder cards — Company page */
.aq-founder {
    /* Name, role and a short biography; the LinkedIn link sits at the bottom
       whatever the sentence lengths turn out to be, so three cards of unequal
       text still line up along their last row. */
    gap: 0.45rem;
}

.aq-founder__bio + .aq-founder__bio {
    /* The card gap alone is too tight to read as a paragraph break at this
       size — enough air to separate them, not enough to look like a list. */
    margin-top: 0.35rem;
}

.aq-founder__photo {
    width: 72px;
    height: 72px;
    margin-bottom: 0.4rem;
    border-radius: 50%;
    object-fit: cover;
}

.aq-founder__photo--empty {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--aq-slate-300);
    font-size: 0.62rem;
    font-weight: 640;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.25;
}

.aq-founder__role {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--aq-brand-600);
}

.aq-founder .aq-card__text:last-child {
    margin-top: auto;
    padding-top: 0.35rem;
}

/* ==========================================================================
   CheckList
   ========================================================================== */

.aq-checklist__title {
    margin-bottom: 1.1rem;
    font-size: 1.1rem;
}

.aq-checklist__items {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.aq-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 0.96rem;
    color: var(--aq-text-on-dark-muted);
}

.aq-band--light .aq-checklist__item {
    color: var(--aq-text-on-light-muted);
}

.aq-checklist__tick {
    flex: none;
    margin-top: 0.28em;
    color: var(--aq-brand-400);
}

.aq-band--light .aq-checklist__tick {
    color: var(--aq-brand-600);
}

.aq-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
    gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
}

/* ==========================================================================
   QuoteBand
   ========================================================================== */

.aq-quote {
    padding-block: clamp(3.5rem, 2rem + 4vw, 5.5rem);
    background:
        linear-gradient(
            180deg,
            rgba(79, 70, 229, 0.1),
            rgba(79, 70, 229, 0)
        ),
        var(--aq-surface-dark-raised);
    border-block: 1px solid var(--aq-border-dark);
}

.aq-quote__text {
    margin: 0;
    max-width: 24ch;
    font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.35rem);
    font-weight: 620;
    line-height: 1.25;
    letter-spacing: -0.022em;
}

.aq-quote--center .aq-quote__text {
    margin-inline: auto;
    text-align: center;
    max-width: 26ch;
}

.aq-quote__attribution {
    margin-top: 1.2rem;
    font-size: 0.9rem;
    color: var(--aq-text-on-dark-muted);
}

/* ==========================================================================
   CtaBand
   ========================================================================== */

.aq-cta {
    padding-block: clamp(3.5rem, 2rem + 4vw, 5.5rem);
    background:
        radial-gradient(
            50rem 22rem at 50% 120%,
            rgba(79, 70, 229, 0.3),
            transparent 65%
        ),
        var(--aq-surface-dark);
    border-top: 1px solid var(--aq-border-dark);
    text-align: center;
}

.aq-cta__title {
    max-width: 22ch;
    margin-inline: auto;
}

.aq-cta__text {
    max-width: 56ch;
    margin-inline: auto;
    color: var(--aq-text-on-dark-muted);
}

.aq-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
    margin-top: 2rem;
}

/* Deliberately quieter than the buttons above it: smaller, muted, and set well
   below them so it reads as an alternative rather than a third CTA. */
.aq-cta__note {
    margin: 1.75rem auto 0;
    max-width: 52ch;
    font-size: 0.9rem;
    color: var(--aq-slate-500);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.aq-footer {
    padding-block: 3.5rem 2.5rem;
    background: var(--aq-slate-950);
    border-top: 1px solid var(--aq-border-dark);
    font-size: 0.92rem;
}

.aq-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 2.5rem;
}

/* Grid items default to min-width:auto, so an unbreakable string — the contact
   address is ~193px and has no space in it — forces its track wider than the
   track sizing allows, and the page scrolls sideways. */
.aq-footer__grid > * {
    min-width: 0;
}

.aq-footer__tagline {
    margin-top: 1rem;
    max-width: 34ch;
    color: var(--aq-text-on-dark-muted);
}

.aq-footer__heading {
    margin: 0 0 0.9rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--aq-slate-500);
}

.aq-footer__list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.aq-footer__list a {
    color: var(--aq-text-on-dark-muted);
    text-decoration: none;
    /* Last resort for the contact address: wrapping mid-string is ugly, but it
       beats a sideways-scrolling page. The stacking rule below means it should
       almost never come to this. */
    overflow-wrap: anywhere;
}

.aq-footer__list a:hover {
    color: var(--aq-text-on-dark);
    text-decoration: underline;
}

/* Below this the three columns leave the contact column too narrow for the
   address to sit on one line. Stacking is cheaper than breaking it. */
@media (max-width: 820px) {
    .aq-footer__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }
}

.aq-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--aq-border-dark);
    color: var(--aq-slate-500);
    font-size: 0.86rem;
}

/* ==========================================================================
   InvestigationDiagram — Home page

   Three columns: signal sources · the agent on a connecting rail · the evidence
   brief. The rail is drawn with pseudo-elements rather than an SVG so it scales
   with the text and needs no viewBox maintenance. Below 900px the columns stack
   and the rail becomes a single downward arrow.
   ========================================================================== */

.aq-diagram {
    --aq-diagram-gap: 2.75rem;

    display: grid;
    grid-template-columns: minmax(0, 0.85fr) auto minmax(0, 1.5fr);
    gap: var(--aq-diagram-gap);
    /* Sources span the brief's full height so the stubs fan in rather than
       clustering in the middle of an otherwise empty column. */
    align-items: stretch;
}

.aq-diagram__sources {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
}

.aq-diagram__source {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 1rem;
    background: var(--aq-surface-dark-raised);
    border: 1px solid var(--aq-border-dark);
    border-radius: var(--aq-radius-sm);
    font-size: 0.92rem;
}

/* Stub reaching across the grid gap towards the rail. */
.aq-diagram__source::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    width: var(--aq-diagram-gap);
    height: 1px;
    background: rgba(129, 140, 248, 0.6);
}

.aq-diagram__source-icon {
    display: inline-flex;
    flex: none;
    color: var(--aq-brand-400);
}

.aq-diagram__hub {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1px;
    /* The rail is the bus every source feeds into on its way to the agent. */
    background: linear-gradient(
        180deg,
        rgba(129, 140, 248, 0.08),
        rgba(129, 140, 248, 0.6) 50%,
        rgba(129, 140, 248, 0.08)
    );
}

.aq-diagram__hub {
    /* Two nodes on the rail, engine above agent. */
    flex-direction: column;
    gap: 1.4rem;
}

.aq-diagram__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.85rem 0.6rem;
    background: var(--aq-surface-dark);
    border: 1px solid rgba(129, 140, 248, 0.45);
    border-radius: 999px;
    color: var(--aq-brand-300);
    box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.12);
}

/* The agent is the node the brief comes out of, so it carries the accent. */
.aq-diagram__node--agent {
    background: rgba(79, 70, 229, 0.22);
    border-color: rgba(165, 180, 252, 0.7);
    color: #fff;
}

.aq-diagram__node-label {
    font-size: 0.68rem;
    font-weight: 640;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* Rail out to the brief, drawn from the agent rather than from the middle of
   the hub: the brief is the agent's output, and the line should say so. */
.aq-diagram__node--agent {
    position: relative;
}

.aq-diagram__node--agent::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    width: calc(var(--aq-diagram-gap) - 50%);
    height: 1px;
    background: rgba(129, 140, 248, 0.6);
}

.aq-diagram__brief {
    background: var(--aq-surface-dark-raised);
    border: 1px solid rgba(129, 140, 248, 0.28);
    border-radius: var(--aq-radius);
    overflow: hidden;
}

.aq-diagram__brief-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 1rem 1.4rem;
    background: rgba(99, 102, 241, 0.1);
    border-bottom: 1px solid var(--aq-border-dark);
}

.aq-diagram__brief-title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 640;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--aq-brand-300);
}

.aq-brief {
    margin: 0;
    padding: 0.4rem 1.4rem 1.4rem;
}

.aq-brief__row {
    padding-block: 0.85rem;
    border-bottom: 1px dashed var(--aq-border-dark);
}

.aq-brief__row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.aq-brief dt {
    margin-bottom: 0.3rem;
    font-size: 0.74rem;
    font-weight: 640;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--aq-slate-500);
}

.aq-brief dd {
    margin: 0;
    font-size: 0.94rem;
    color: var(--aq-text-on-dark);
}

.aq-brief__list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.aq-brief__list li {
    position: relative;
    padding-left: 1rem;
    color: var(--aq-text-on-dark-muted);
}

.aq-brief__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--aq-brand-500);
}

@media (max-width: 900px) {
    .aq-diagram {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .aq-diagram__sources {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    }

    /* Horizontal stubs make no sense once the columns stack. */
    .aq-diagram__source::after {
        display: none;
    }

    .aq-diagram__hub {
        width: auto;
        background: transparent;
        padding-block: 0.25rem;
        /* Stacked, the two nodes read left to right instead of top to bottom. */
        flex-direction: row;
        gap: 0.75rem;
    }

    .aq-diagram__node--agent::after {
        display: none;
    }

    .aq-diagram__node {
        flex-direction: row;
        gap: 0.5rem;
        border-radius: 999px;
        padding: 0.6rem 1.1rem;
    }
}

/* ==========================================================================
   InvestigationRecord — Trust page
   ========================================================================== */

.aq-record {
    background: var(--aq-surface-dark-raised);
    border: 1px solid var(--aq-border-dark);
    border-radius: var(--aq-radius);
    overflow: hidden;
}

.aq-record__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem 1.6rem;
    padding: 1.25rem 1.5rem;
    background: rgba(99, 102, 241, 0.07);
    border-bottom: 1px solid var(--aq-border-dark);
}

.aq-record__id {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 0.88rem;
    color: var(--aq-brand-300);
}

.aq-record__meta {
    font-size: 0.85rem;
    color: var(--aq-text-on-dark-muted);
}

.aq-record__meta strong {
    color: var(--aq-text-on-dark);
    font-weight: 560;
}

.aq-record__panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.aq-panel {
    padding: 1.4rem 1.5rem;
    border-top: 1px solid var(--aq-border-dark);
    border-right: 1px solid var(--aq-border-dark);
}

.aq-panel--accent {
    background: rgba(99, 102, 241, 0.06);
}

.aq-panel__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-size: 0.78rem;
    font-weight: 640;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--aq-slate-400);
}

/* Drill-in affordances from the product UI. Deliberately not link-coloured:
   this is an illustrative record, and nothing here is clickable. */
.aq-panel__more {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.86rem;
    color: var(--aq-slate-500);
}

.aq-evidence {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.aq-evidence__item {
    font-size: 0.93rem;
}

.aq-evidence__text {
    margin: 0 0 0.25rem;
}

.aq-evidence__source {
    font-size: 0.81rem;
    color: var(--aq-slate-500);
}

.aq-signal {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem 1rem;
    padding-block: 0.7rem;
    border-bottom: 1px dashed var(--aq-border-dark);
    font-size: 0.93rem;
}

.aq-signal:first-child {
    padding-top: 0;
}

.aq-signal:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.aq-confidence {
    flex: none;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 620;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid currentColor;
}

.aq-confidence--high {
    color: var(--aq-positive);
}

.aq-confidence--medium {
    color: var(--aq-caution);
}

.aq-confidence--low {
    color: var(--aq-slate-400);
}

.aq-hypothesis {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
}

.aq-meta-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    font-size: 0.9rem;
}

.aq-meta-list__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    justify-content: space-between;
}

.aq-meta-list__key {
    color: var(--aq-slate-400);
}

.aq-meta-list__value {
    font-weight: 560;
    text-align: right;
}

.aq-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.aq-timeline__item {
    position: relative;
    padding: 0 0 1.05rem 1.55rem;
    font-size: 0.92rem;
}

.aq-timeline__item:last-child {
    padding-bottom: 0;
}

.aq-timeline__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--aq-brand-500);
}

.aq-timeline__item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1.35em;
    bottom: 0.2rem;
    width: 1px;
    background: var(--aq-border-dark);
}

.aq-timeline__item--pending::before {
    background: transparent;
    border: 2px solid var(--aq-caution);
    width: 9px;
    height: 9px;
}

.aq-timeline__time {
    display: block;
    font-size: 0.8rem;
    color: var(--aq-slate-500);
}

/* ==========================================================================
   Delivery surfaces — Embedded page

   Two surfaces with the AgentIQ intelligence between them, drawn as a band
   rather than an arrow: it feeds both, it does not flow from one to the other.

   The class names still say "layer" — that is CSS geometry, not product
   vocabulary. In copy, "layer" belongs to the four architectural layers on
   /product and is not used here.
   ========================================================================== */

.aq-surfaces {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}

.aq-surface-card {
    padding: 1.6rem 1.5rem;
    background: var(--aq-surface-dark);
    border: 1px solid var(--aq-border-dark);
    border-radius: var(--aq-radius);
}

.aq-surface-card__title {
    margin: 0 0 0.6rem;
    font-size: 1.05rem;
    font-weight: 620;
}

.aq-surface-card__text {
    margin: 0;
    font-size: 0.94rem;
    color: var(--aq-text-on-dark-muted);
}

.aq-surfaces__layer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 0.5rem;
    border-radius: var(--aq-radius);
    background: linear-gradient(
        180deg,
        rgba(99, 102, 241, 0.22),
        rgba(99, 102, 241, 0.08)
    );
    border: 1px solid rgba(129, 140, 248, 0.35);
}

.aq-surfaces__layer-label {
    font-size: 0.76rem;
    font-weight: 640;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--aq-brand-300);
    /* Reads bottom-to-top between the two cards; becomes horizontal when the
       grid stacks. */
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
}

@media (max-width: 860px) {
    .aq-surfaces {
        grid-template-columns: minmax(0, 1fr);
    }

    .aq-surfaces__layer-label {
        writing-mode: horizontal-tb;
        transform: none;
    }
}

/* ==========================================================================
   Worked example — Product page

   Signals on the left, the agent's analysis on the right. Two columns rather
   than signals-above-analysis so the reader can see the inputs and what was
   made of them at the same time.
   ========================================================================== */

.aq-worked {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: clamp(1.75rem, 1rem + 3vw, 3rem);
}

.aq-worked__heading {
    margin-bottom: 1.1rem;
    font-size: 0.78rem;
    font-weight: 640;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--aq-slate-500);
}

.aq-analysis {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.aq-analysis__block {
    padding: 1.1rem 1.3rem;
    border-left: 2px solid var(--aq-slate-300);
    background: var(--aq-surface-light-raised);
    border-radius: 0 var(--aq-radius-sm) var(--aq-radius-sm) 0;
}

.aq-analysis__block--action {
    border-left-color: var(--aq-brand-600);
}

.aq-analysis__block h4 {
    margin: 0 0 0.4rem;
    font-size: 0.98rem;
    font-weight: 620;
}

.aq-analysis__block p {
    margin: 0;
    font-size: 0.93rem;
    color: var(--aq-text-on-light-muted);
}

/* ==========================================================================
   Notes / footnotes
   ========================================================================== */

.aq-note {
    padding: 1.1rem 1.3rem;
    border: 1px dashed var(--aq-border-dark);
    border-radius: var(--aq-radius-sm);
    font-size: 0.9rem;
    color: var(--aq-text-on-dark-muted);
}

.aq-band--light .aq-note {
    border-color: var(--aq-slate-300);
    color: var(--aq-text-on-light-muted);
}

.aq-footnote {
    margin-top: 2.5rem;
    font-size: 0.88rem;
    color: var(--aq-slate-500);
    max-width: 66ch;
}

.aq-closing {
    margin: 0;
    font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
    font-weight: 560;
    line-height: 1.45;
    max-width: 34ch;
}

/* ==========================================================================
   VideoPlayer
   ========================================================================== */

.aq-video {
    margin: 0;
}

/* The frame: a 1px blue-to-indigo gradient edge drawn as padding, and a glow
   kept well below the brightness of anything it sits next to. It is what makes
   this one band, on a page of dark bands, look like the thing to press. */
.aq-video__stage {
    position: relative;
    max-width: var(--aq-video-stage);
    margin-inline: auto;
    padding: 1px;
    border-radius: calc(var(--aq-radius) + 4px);
    background: linear-gradient(135deg, #2563eb, var(--aq-brand-500) 55%,
            var(--aq-brand-400));
    box-shadow: 0 22px 60px -30px rgba(99, 102, 241, 0.8);
}

.aq-video__player {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    border-radius: calc(var(--aq-radius) + 3px);
    /* Pinned rather than left to the intrinsic ratio. The poster is 1863x952 and
       the video is 1920x1080, so a box that follows its content would resize
       twice — once when the poster arrives, again when playback starts — moving
       everything below it both times. Fixed at the video's own ratio, nothing
       moves; the poster letterboxes inside it, and navy rather than black makes
       those two bands read as part of the frame. */
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: var(--aq-surface-dark-raised);
}

.aq-video__fallback {
    padding: 1.5rem;
    color: var(--aq-text-on-dark-muted);
}

/* Covers the whole media surface: the poster is the target, not just the disc.
   Rendered hidden and revealed by js/video.js — see VideoPlayer.razor. */
.aq-video__overlay {
    position: absolute;
    inset: 1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: calc(var(--aq-radius) + 3px);
    /* Dark enough to hold AA for white text over any part of the poster, light
       enough that the poster is still readable through it. */
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.42),
            rgba(2, 6, 23, 0.68));
    text-align: center;
    cursor: pointer;
}

/* display:flex would otherwise beat the hidden attribute and the overlay would
   stay on screen through playback, over the controls. */
.aq-video__overlay[hidden] {
    display: none;
}

/* Top right, which is the empty quarter of this poster. Wraps leftwards on a
   narrow screen rather than shrinking onto the artwork. */
.aq-video__meta {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    left: 0.9rem;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.aq-video__badge {
    padding: 0.3rem 0.7rem;
    border: 1px solid rgba(148, 163, 184, 0.38);
    border-radius: 999px;
    background: rgba(2, 6, 23, 0.78);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--aq-slate-100);
}

.aq-video__badge--quiet {
    font-weight: 500;
    color: var(--aq-slate-300);
}

/* The button box is the disc and nothing else, so centring the button centres
   the disc. The label hangs off it absolutely: in the flow it would push the
   disc above the centre by half its own height, which is exactly what it did. */
.aq-video__play {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font: inherit;
    color: #fff;
    cursor: pointer;
}

.aq-video__play-disc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--aq-brand-500),
            var(--aq-brand-700));
    box-shadow: 0 12px 32px -10px rgba(2, 6, 23, 0.9),
        inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    color: #fff;
    transition: transform 0.15s ease, filter 0.15s ease;
}

/* Under the disc, out of the flow, on its own chip — it lands on the middle
   card of the poster, and white text straight over that artwork is legible but
   reads as a collision. */
.aq-video__play-text {
    position: absolute;
    top: calc(100% + 0.8rem);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.32rem 0.8rem;
    border-radius: 999px;
    background: rgba(2, 6, 23, 0.72);
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Hovering anywhere on the poster brightens the disc, not only hovering the
   button — the whole surface is the control. */
.aq-video__overlay:hover .aq-video__play-disc,
.aq-video__play:focus-visible .aq-video__play-disc {
    transform: scale(1.05);
    filter: brightness(1.12);
}

.aq-video__caption {
    max-width: var(--aq-video-stage);
    margin: 0.9rem auto 0;
    font-size: 0.9rem;
    color: var(--aq-text-on-dark-muted);
}

.aq-band--light .aq-video__caption {
    color: var(--aq-text-on-light-muted);
}

@media (max-width: 640px) {
    .aq-video__play-disc {
        width: 68px;
        height: 68px;
    }

    .aq-video__play-text {
        font-size: 0.92rem;
    }

    /* Above the poster rather than on it. At this width the poster is 340px
       wide and any chip laid over it covers something that matters; the spec
       for this section allows either placement, and off the artwork is the one
       that stays readable. They still belong to the overlay, so they clear the
       frame the moment playback starts. */
    .aq-video__meta {
        top: auto;
        bottom: calc(100% + 0.55rem);
        left: 0;
        right: 0;
        justify-content: flex-start;
        gap: 0.4rem;
    }

    .aq-video__badge {
        padding: 0.24rem 0.6rem;
        font-size: 0.72rem;
    }
}

/* The global reduce rule flattens the duration, which leaves the scale applied
   instantly. Drop the movement itself and keep the brightness change. */
@media (prefers-reduced-motion: reduce) {

    .aq-video__overlay:hover .aq-video__play-disc,
    .aq-video__play:focus-visible .aq-video__play-disc {
        transform: none;
    }
}

/* ==========================================================================
   DeliveryDiagram
   One engine, several surfaces. The arrangement carries the argument: the
   engine sits above everything, and the surfaces are visibly downstream of it.
   ========================================================================== */

.aq-delivery {
    margin: 0;
}

.aq-delivery__caption {
    margin: 0 0 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    color: var(--aq-brand-400);
}

.aq-delivery__caption--inline {
    margin: 0 0 1.25rem;
}

/* The engine block. A brand-tinted surface rather than a card, so it reads as
   the thing everything else depends on instead of one item among peers. */
.aq-delivery__engine {
    padding: 1.6rem 1.5rem;
    border: 1px solid var(--aq-brand-600);
    border-radius: var(--aq-radius);
    background:
        linear-gradient(180deg, rgba(99, 102, 241, 0.14), rgba(99, 102, 241, 0.05));
    text-align: center;
}

.aq-delivery__engine-name {
    margin: 0 0 0.9rem;
    font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
    font-weight: 640;
    letter-spacing: -0.02em;
    color: var(--aq-text-on-dark);
}

.aq-delivery__properties {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.4rem;
    font-size: 0.9rem;
    color: var(--aq-text-on-dark-muted);
}

/* Separator dots between properties, not before the first one. */
.aq-delivery__properties li + li::before {
    content: "·";
    margin-right: 1.4rem;
    color: var(--aq-brand-400);
}

/* The line from engine to surfaces. Decorative, hidden from assistive tech. */
.aq-delivery__stem {
    width: 1px;
    height: 2.25rem;
    margin: 0 auto;
    background: linear-gradient(180deg, var(--aq-brand-600), var(--aq-border-dark));
}

.aq-delivery__surfaces {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.1rem;
}

.aq-delivery__surface {
    padding: 1.4rem 1.3rem;
    background: var(--aq-surface-dark);
    border: 1px solid var(--aq-border-dark);
    border-radius: var(--aq-radius);
}

.aq-band--dark-raised .aq-delivery__surface {
    background: var(--aq-surface-dark);
}

.aq-delivery__surface-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 0.9rem;
    border-radius: var(--aq-radius-sm);
    background: rgba(99, 102, 241, 0.14);
    color: var(--aq-brand-300);
}

.aq-delivery__surface-name {
    margin: 0 0 0.55rem;
    font-size: 1.02rem;
    font-weight: 620;
}

.aq-delivery__surface-text {
    margin: 0;
    font-size: 0.92rem;
    color: var(--aq-text-on-dark-muted);
}

@media (max-width: 640px) {
    .aq-delivery__properties {
        flex-direction: column;
        gap: 0.3rem;
    }

    /* Stacked, the dots would float at the start of each line. */
    .aq-delivery__properties li + li::before {
        content: none;
    }
}

/* The two destinations: wide, side by side, name and status only. */
.aq-delivery__destinations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.1rem;
}

.aq-delivery__destination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.1rem 1.3rem;
    background: var(--aq-surface-dark);
    border: 1px solid var(--aq-brand-600);
    border-radius: var(--aq-radius);
}

.aq-delivery__destination .aq-delivery__surface-icon {
    margin-bottom: 0;
}

.aq-delivery__destination-name {
    font-size: 1.05rem;
    font-weight: 620;
    color: var(--aq-text-on-dark);
}

.aq-delivery__destination .aq-status {
    margin-left: 0;
}

/* The delivery evolution: stages in sequence, connected. Terser than the
   destination cards on purpose — four of them share one row. */
.aq-delivery__stages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 1rem;
}

.aq-delivery__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1.3rem 1.2rem;
    background: var(--aq-surface-dark);
    /* The same brand outline as the engine block, the destinations and the
       invariants strip. These four were the only row on a neutral border, and
       the odd one out read as less finished rather than as deliberately
       quieter. */
    border: 1px solid var(--aq-brand-600);
    border-radius: var(--aq-radius);
}

.aq-delivery__stage .aq-status {
    margin-left: 0;
}

.aq-delivery__stage .aq-delivery__surface-icon {
    margin-bottom: 0;
}

.aq-delivery__stage .aq-delivery__surface-name {
    margin: 0;
}

/* Connector arrow between stages — decorative, hidden from assistive tech,
   and suppressed once the row wraps to a single column. */
.aq-delivery__stages--connected .aq-delivery__stage:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -0.72rem;
    width: 0.9rem;
    height: 0.9rem;
    transform: translateY(-50%) rotate(45deg);
    border-top: 1px solid var(--aq-brand-500);
    border-right: 1px solid var(--aq-brand-500);
    background: var(--aq-surface-dark);
}

@media (max-width: 780px) {
    .aq-delivery__stages--connected .aq-delivery__stage::after {
        content: none;
    }
}

/* The closing strip: what none of the stages changes. One row, dot-separated,
   inside a single bordered band so it reads as one statement rather than four. */
.aq-delivery__caption--invariant {
    margin-top: 2.25rem;
}

.aq-delivery__invariants {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem 1.6rem;
    padding: 1.1rem 1.4rem;
    border: 1px solid var(--aq-brand-600);
    border-radius: var(--aq-radius);
    background: rgba(99, 102, 241, 0.07);
}

.aq-delivery__invariant {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.94rem;
    font-weight: 560;
    color: var(--aq-text-on-dark);
}

.aq-delivery__invariant-icon {
    display: inline-flex;
    color: var(--aq-brand-300);
}

/* Separator dots between items, never before the first or after a wrap onto a
   line of its own. */
.aq-delivery__invariant + .aq-delivery__invariant::before {
    content: "·";
    margin-right: 1rem;
    color: var(--aq-brand-400);
}

@media (max-width: 640px) {
    .aq-delivery__invariants {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.7rem;
    }

    .aq-delivery__invariant + .aq-delivery__invariant::before {
        content: none;
    }
}

/* ==========================================================================
   LayerLadder — the four-layer promise (Home)
   Mark on the left, a connected vertical ladder on the right. The node colours
   are the four plates of the mark, passed in per item as --aq-ladder-node.
   ========================================================================== */

.aq-ladder {
    display: grid;
    grid-template-columns: minmax(200px, 0.62fr) 1fr;
    align-items: center;
    gap: 3.5rem;
    margin: 0;
}

.aq-ladder__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.aq-ladder__mark {
    width: clamp(120px, 14vw, 170px);
    height: auto;
}

.aq-ladder__wordmark {
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    /* The logo's own blue, not --aq-brand-400: the wordmark sits directly
       beside the artwork, and indigo next to it reads as a near-miss. */
    color: #3b82f6;
}

.aq-ladder__title {
    margin: 0 0 0.85rem;
}

.aq-ladder__title-accent {
    text-transform: uppercase;
    /* Capitals at heading size need the tracking opened up, or the letters
       crowd into a block. */
    letter-spacing: 0.01em;
}

.aq-ladder__lead {
    margin: 0;
    font-size: 1.05rem;
    color: var(--aq-text-on-dark-muted);
}

.aq-ladder__layers {
    /* The spine. Drawn as a background on the list so it starts and ends with
       the padding below, never overshooting the first and last nodes. */
    position: relative;
    margin: 2.25rem 0;
    padding: 0.35rem 0 0.35rem 3.1rem;
    list-style: none;
    background:
        linear-gradient(180deg, var(--aq-brand-600), var(--aq-brand-700))
        1.05rem 0 / 2px 100% no-repeat;
}

.aq-ladder__layer {
    position: relative;
    padding: 0.85rem 0;
}

.aq-ladder__node {
    position: absolute;
    left: -2.6rem;
    top: 1.05rem;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 30%,
            #ffffff 0%,
            var(--aq-ladder-node, var(--aq-brand-500)) 62%,
            rgba(2, 6, 23, 0.9) 100%);
    box-shadow:
        0 0 0 4px var(--aq-surface-dark),
        0 0 14px 1px var(--aq-ladder-node, var(--aq-brand-500));
}

.aq-band--dark-raised .aq-ladder__node {
    box-shadow:
        0 0 0 4px var(--aq-surface-dark-raised),
        0 0 14px 1px var(--aq-ladder-node, var(--aq-brand-500));
}

.aq-band--light .aq-ladder__node {
    box-shadow:
        0 0 0 4px var(--aq-surface-light),
        0 0 14px 1px var(--aq-ladder-node, var(--aq-brand-500));
}

.aq-ladder__text {
    margin: 0;
    font-size: clamp(1.02rem, 1.5vw, 1.2rem);
    color: var(--aq-text-on-dark);
}

.aq-ladder__result {
    font-style: italic;
    font-weight: 600;
    color: var(--aq-brand-300);
}

.aq-band--light .aq-ladder__text {
    color: var(--aq-text-on-light);
}

.aq-band--light .aq-ladder__result {
    color: var(--aq-brand-700);
}

.aq-band--light .aq-ladder__lead,
.aq-band--light .aq-ladder__close {
    color: var(--aq-text-on-light-muted);
}

.aq-ladder__close {
    margin: 0;
    max-width: 46rem;
    color: var(--aq-text-on-dark-muted);
}

@media (max-width: 860px) {
    .aq-ladder {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Side by side once stacked: a 170px mark over a wordmark wastes a whole
       screen of height on a phone. */
    .aq-ladder__brand {
        flex-direction: row;
        justify-content: flex-start;
        gap: 1rem;
    }

    .aq-ladder__mark {
        width: 74px;
    }
}

/* ==========================================================================
   CheckList — excluded tone
   ========================================================================== */

/* Dash rather than tick, and no brand colour: these lines are things the
   architecture refuses to do, and a bright tick beside them reads as the
   opposite of what they say. */
.aq-checklist__tick--excluded,
.aq-band--light .aq-checklist__tick--excluded {
    color: var(--aq-slate-500);
}

/* ==========================================================================
   PrincipleBand
   ========================================================================== */

.aq-principle {
    padding-block: clamp(3.5rem, 2rem + 4vw, 5.5rem);
    background:
        linear-gradient(
            135deg,
            rgba(99, 102, 241, 0.14),
            rgba(129, 140, 248, 0.05) 55%,
            rgba(2, 6, 23, 0)
        ),
        var(--aq-surface-dark-raised);
    border-block: 1px solid var(--aq-border-dark);
}

.aq-principle__inner {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
    align-items: start;
}

.aq-principle__aside-text {
    margin: 0;
    font-size: 0.95rem;
    color: var(--aq-text-on-dark-muted);
}

.aq-principle__quote {
    margin: 0;
    max-width: 62ch;
}

.aq-principle__statement {
    margin: 0 0 1.1rem;
    font-size: clamp(1.35rem, 1.05rem + 1.4vw, 1.95rem);
    font-weight: 620;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--aq-text-on-dark);
}

.aq-principle__paragraph {
    margin: 0 0 1rem;
    color: var(--aq-text-on-dark-muted);
}

.aq-principle__emphasis {
    margin: 1.5rem 0 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--aq-brand-300);
}

.aq-principle__attribution {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--aq-text-on-dark-muted);
}

@media (max-width: 720px) {
    .aq-principle__inner {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   AuditRecord
   ========================================================================== */

.aq-audit {
    margin: 0;
    border: 1px solid var(--aq-border-dark);
    border-radius: var(--aq-radius);
    background: var(--aq-surface-dark);
    overflow: hidden;
}

.aq-audit__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.2rem;
    border-bottom: 1px solid var(--aq-border-dark);
}

.aq-audit__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--aq-text-on-dark);
}

.aq-audit__pill {
    flex: none;
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--aq-border-dark);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--aq-brand-300);
}

.aq-audit__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    margin: 0;
}

.aq-audit__cell {
    padding: 0.95rem 1.2rem;
    border-top: 1px solid var(--aq-border-dark);
}

/* The grid reflows by available width, so a rule on one side only would land
   in the wrong place at some widths. An outline that repeats on every cell and
   collapses into its neighbour is stable at any column count. */
.aq-audit__cell + .aq-audit__cell {
    box-shadow: inset 1px 0 0 var(--aq-border-dark);
}

.aq-audit__label {
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
    color: var(--aq-text-on-dark-muted);
}

.aq-audit__value {
    margin: 0;
}

.aq-audit__value code {
    font-size: 0.92rem;
    color: var(--aq-text-on-dark);
    overflow-wrap: anywhere;
}

.aq-audit__caveat {
    margin: 0;
    padding: 0.85rem 1.2rem;
    border-top: 1px solid var(--aq-border-dark);
    font-size: 0.82rem;
    color: var(--aq-slate-500);
}

/* ==========================================================================
   FaqList
   ========================================================================== */

.aq-faq__item {
    border-top: 1px solid var(--aq-border-dark);
}

.aq-faq__item:last-child {
    border-bottom: 1px solid var(--aq-border-dark);
}

.aq-faq__question {
    padding: 1.05rem 2rem 1.05rem 0;
    position: relative;
    cursor: pointer;
    font-weight: 560;
    color: var(--aq-text-on-dark);
    list-style: none;
}

/* Safari still paints the disclosure triangle without this. */
.aq-faq__question::-webkit-details-marker {
    display: none;
}

.aq-faq__question::after {
    content: "";
    position: absolute;
    right: 0.4rem;
    top: 50%;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--aq-brand-400);
    border-bottom: 2px solid var(--aq-brand-400);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.15s ease;
}

.aq-faq__item[open] .aq-faq__question::after {
    transform: translateY(-20%) rotate(-135deg);
}

.aq-faq__answer {
    margin: 0 0 1.15rem;
    max-width: 68ch;
    color: var(--aq-text-on-dark-muted);
}

.aq-band--light .aq-faq__item,
.aq-band--light .aq-faq__item:last-child {
    border-color: var(--aq-border-light);
}

.aq-band--light .aq-faq__question {
    color: var(--aq-text-on-light);
}

.aq-band--light .aq-faq__answer {
    color: var(--aq-text-on-light-muted);
}

/* ==========================================================================
   Disclosure
   Native <details>. The chevron mirrors FaqList's so the two read as one
   pattern; the summary is a full-width row because what it opens is a panel,
   not a paragraph.
   ========================================================================== */

.aq-disclosure {
    border: 1px solid var(--aq-border-dark);
    border-radius: var(--aq-radius);
    background: rgba(15, 23, 42, 0.4);
}

.aq-disclosure__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.4rem 1.6rem;
    cursor: pointer;
    list-style: none;
}

.aq-disclosure__summary::-webkit-details-marker {
    display: none;
}

.aq-disclosure__summary:focus-visible {
    outline: 2px solid var(--aq-brand-400);
    outline-offset: 3px;
    border-radius: var(--aq-radius);
}

.aq-disclosure__heading {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.aq-disclosure__title {
    font-weight: 560;
    color: var(--aq-text-on-dark);
}

.aq-disclosure__hint {
    font-size: 0.9rem;
    max-width: 62ch;
    color: var(--aq-text-on-dark-muted);
}

.aq-disclosure__action {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 560;
    color: var(--aq-brand-400);
}

.aq-disclosure__action-open,
.aq-disclosure[open] .aq-disclosure__action-closed {
    display: none;
}

.aq-disclosure[open] .aq-disclosure__action-open {
    display: inline;
}

.aq-disclosure__action::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.15s ease;
}

.aq-disclosure[open] .aq-disclosure__action::after {
    transform: translateY(1px) rotate(-135deg);
}

.aq-disclosure__body {
    padding: 0 1.6rem 1.6rem;
}

@media (max-width: 640px) {
    /* The row has no width for two columns here: the heading is squeezed to a
       few words per line and the action label runs out of the card. Stack it. */
    .aq-disclosure__summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.9rem;
        padding: 1.15rem;
    }

    .aq-disclosure__body {
        padding: 0 1.15rem 1.15rem;
    }
}