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

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

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

@media (max-width: 900px) {
    .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);
    }

    .aq-nav__link.active {
        border-bottom-color: var(--aq-border-dark);
    }

    .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 one line of background; the LinkedIn link sits at the
       bottom whatever the sentence lengths turn out to be. */
    gap: 0.45rem;
}

.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;
}

/* Unfilled content. Loud on purpose — a placeholder that blends in is a
   placeholder that ships. */
.aq-todo {
    color: #b45309;
    background: rgba(180, 83, 9, 0.08);
    border-radius: 6px;
    padding: 0.2rem 0.45rem;
}

/* The photo slot is also a .aq-todo, whose radius and padding would otherwise
   square off a circle that has to match the real portraits. */
.aq-founder .aq-founder__photo--empty {
    border-radius: 50%;
    padding: 0;
}

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