/* Q2's public front door.
 *
 * The ONE stylesheet for the landing + sign-in page. It consumes the
 * shared design tokens from `insights_tokens.css` (linked first by
 * `q2_public_base.html`) and RESPELLS NO NAVY VALUE — `--acc` and its
 * family are declared there, once, and changing the identity means
 * changing that file. What this sheet adds is the scale a marketing-shaped
 * page needs and an analyst page does not: a display type ramp, a hero
 * gradient, section rhythm, and the dark half of every token, since
 * `insights_tokens.css` declares light only.
 *
 * Theme: light on bare `:root`, dark redefined twice — under
 * `prefers-color-scheme` guarded by `:not([data-theme="light"])` so an
 * explicit light choice wins, and under `[data-theme="dark"]` so an
 * explicit dark choice wins on a light system. No colour is defined only
 * inside a media query.
 *
 * Provenance: generated by Claude (Claude Code AI session, the Q2 build
 * program, 2026-09-04) for the Q2 fork of quboxe.
 */

/* ---------------------------------------------------------------- tokens */

:root {
    /* Identity, mapped from the shared source — never respelled. */
    --q2-navy: var(--acc);
    --q2-navy-deep: var(--acc-strong);
    --q2-navy-soft: var(--acc-soft);
    --q2-azure: #2f76c4;
    --q2-sky: #9fc6f0;

    /* Surfaces and ink. */
    --q2-bg: var(--bg);
    --q2-panel: #ffffff;
    --q2-panel-2: #f3f6fb;
    --q2-ink: var(--ink);
    --q2-ink-soft: #3a4a63;
    --q2-muted: var(--mut);
    --q2-faint: #7c8899;
    --q2-line: var(--ln);
    --q2-line-2: #d5dde8;

    /* On the navy ground. */
    --q2-on-dark: #eaf1f9;
    --q2-on-dark-soft: #b9cbe1;
    --q2-on-dark-faint: #8ba3c0;
    --q2-dark-panel: rgba(255, 255, 255, .05);
    --q2-dark-line: rgba(255, 255, 255, .12);

    /* The ink this marketing page puts on its OWN navy masses — the header
     * bar, the hero, the band and the closing. Local rather than bound to a
     * shared name: the shared sheet holds `#ffffff` three times (`--card`,
     * `--on-acc`, `--on-rail`) and each is bound to a ROLE — a card ground, a
     * label on the accent, a label on the rail — none of which is this one.
     * NOT redefined in the dark blocks: the value does not move with the
     * theme, so a themed name here would repaint the dark page. */
    --q2-on-navy: #ffffff;

    /* The hero's grid wash. An alpha veil, not a colour: the same value is
     * correct on the light and the dark ground, so it carries no dark twin. */
    --q2-hero-grid: rgba(255, 255, 255, .045);

    /* The opaque stop of the hero's `mask-image` gradient. In a mask `#000`
     * means "fully opaque", which is a geometry input rather than a themed
     * colour — named here only so the sheet holds no stray literal. */
    --q2-mask: #000;

    --q2-hero: radial-gradient(120% 120% at 15% 10%, #1f5285 0%, #163a5f 45%, #0e2740 100%);

    /* Signals — the shared tokens' own families. */
    --q2-ok: var(--ok);
    --q2-ok-bg: var(--ok-bg);
    --q2-warn: var(--warn);
    --q2-warn-bg: var(--warn-bg);
    --q2-warn-line: #e7c79b;
    --q2-bad: var(--bad);
    --q2-bad-bg: #fdeded;
    --q2-bad-line: #edc4c4;

    --q2-sh-sm: 0 1px 2px rgba(18, 42, 68, .05);
    --q2-sh: 0 1px 3px rgba(18, 42, 68, .06), 0 6px 18px rgba(18, 42, 68, .06);
    --q2-sh-lg: 0 12px 40px rgba(18, 42, 68, .14);

    --q2-r: 14px;
    --q2-r-sm: 10px;
    --q2-wrap: 1180px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --q2-navy: #5f9ad6;
        --q2-navy-deep: #7cb0e4;
        --q2-navy-soft: #16283c;
        --q2-azure: #6aa4de;
        --q2-sky: #a8cbf0;

        --q2-bg: #0c141e;
        --q2-panel: #151f2c;
        --q2-panel-2: #111a26;
        --q2-ink: #e9eff6;
        --q2-ink-soft: #c3cdd9;
        --q2-muted: #94a1b1;
        --q2-faint: #6a7889;
        --q2-line: #22303f;
        --q2-line-2: #30404f;

        --q2-on-dark: #eaf1f9;
        --q2-on-dark-soft: #b3c6de;
        --q2-on-dark-faint: #8298b4;
        --q2-dark-panel: rgba(255, 255, 255, .05);
        --q2-dark-line: rgba(255, 255, 255, .11);

        --q2-hero: radial-gradient(120% 120% at 15% 10%, #1a3a5c 0%, #12283f 45%, #0a1826 100%);

        --q2-ok: #3fc088;
        --q2-ok-bg: #10261b;
        --q2-warn: #d9a748;
        --q2-warn-bg: #2a2210;
        --q2-warn-line: #4a3c1c;
        --q2-bad: #e98282;
        --q2-bad-bg: #2b1414;
        --q2-bad-line: #542626;

        --q2-sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --q2-sh: 0 2px 10px rgba(0, 0, 0, .4);
        --q2-sh-lg: 0 14px 44px rgba(0, 0, 0, .55);
    }
}

:root[data-theme="dark"] {
    --q2-navy: #5f9ad6;
    --q2-navy-deep: #7cb0e4;
    --q2-navy-soft: #16283c;
    --q2-azure: #6aa4de;
    --q2-sky: #a8cbf0;

    --q2-bg: #0c141e;
    --q2-panel: #151f2c;
    --q2-panel-2: #111a26;
    --q2-ink: #e9eff6;
    --q2-ink-soft: #c3cdd9;
    --q2-muted: #94a1b1;
    --q2-faint: #6a7889;
    --q2-line: #22303f;
    --q2-line-2: #30404f;

    --q2-on-dark: #eaf1f9;
    --q2-on-dark-soft: #b3c6de;
    --q2-on-dark-faint: #8298b4;
    --q2-dark-panel: rgba(255, 255, 255, .05);
    --q2-dark-line: rgba(255, 255, 255, .11);

    --q2-hero: radial-gradient(120% 120% at 15% 10%, #1a3a5c 0%, #12283f 45%, #0a1826 100%);

    --q2-ok: #3fc088;
    --q2-ok-bg: #10261b;
    --q2-warn: #d9a748;
    --q2-warn-bg: #2a2210;
    --q2-warn-line: #4a3c1c;
    --q2-bad: #e98282;
    --q2-bad-bg: #2b1414;
    --q2-bad-line: #542626;

    --q2-sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --q2-sh: 0 2px 10px rgba(0, 0, 0, .4);
    --q2-sh-lg: 0 14px 44px rgba(0, 0, 0, .55);
}

/* ------------------------------------------------------------- structure */

* { box-sizing: border-box; }

body.q2-public {
    margin: 0;
    background: var(--q2-bg);
    color: var(--q2-ink);
    font-family: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.q2-public h1,
.q2-public h2,
.q2-public h3,
.q2-public h4 { margin: 0; letter-spacing: -.02em; line-height: 1.2; }

.q2-public p { margin: 0; }
.q2-public a { color: var(--q2-navy); }

.q2-wrap {
    width: 100%;
    max-width: var(--q2-wrap);
    margin: 0 auto;
    padding: 0 24px;
}

.q2-sec { padding: 84px 0; }
.q2-sec.alt { background: var(--q2-panel-2); border-top: 1px solid var(--q2-line); border-bottom: 1px solid var(--q2-line); }
@media (max-width: 720px) { .q2-sec { padding: 56px 0; } }

.q2-eyebrow {
    font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 11.5px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--q2-azure);
    font-weight: 500;
    margin: 0;
}

.q2-sec h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; margin-top: 12px; color: var(--q2-ink); }
.q2-sec .q2-lede { font-size: 17.5px; color: var(--q2-muted); margin-top: 16px; max-width: 68ch; line-height: 1.6; }

/* The icon sprite. A zero-sized inline SVG is still an inline box, so it
 * opened the page with an 18px blank strip above the header until it was
 * taken out of flow. `display: none` is not the fix — a hidden sprite can
 * stop `<use>` resolving. */
.q2-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.q2-ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.q2-ic-lg { width: 24px; height: 24px; }

/* ------------------------------------------------------------------ chrome */

.q2-top {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--q2-hero);
    border-bottom: 1px solid var(--q2-dark-line);
}
.q2-top .q2-wrap { display: flex; align-items: center; gap: 18px; padding-top: 14px; padding-bottom: 14px; }

/* Scoped under `.q2-public` on purpose. `.q2-public a { color: … }` above
 * is specificity (0,1,1); a bare `.q2-mark` is (0,1,0) and LOSES to it, so
 * the wordmark and every anchor-shaped button rendered navy-on-navy —
 * invisible on the dark bar. Caught in the first headless render. */
.q2-public .q2-mark {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    text-decoration: none;
    font-weight: 800;
    font-size: 21px;
    letter-spacing: -.03em;
    color: var(--q2-on-navy);
}
/* The wordmark and the brand line are ONE block in the header flex row, so
 * the line sits under the mark rather than beside it. `min-width: 0` lets
 * the block shrink instead of pushing the sign-in button off a 390 screen;
 * the line wraps rather than overflowing. */
.q2-brandblock { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* `--q2-on-dark-soft`, not `-faint`: the faint token measures 3.1:1 against
 * the light end of the header gradient at 11.5px, which is under AA. The
 * hierarchy is carried by size and weight against a 21px/800 wordmark, not
 * by making the line hard to read. */
.q2-brandline {
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: .01em;
    color: var(--q2-on-dark-soft);
}
@media (max-width: 460px) { .q2-brandline { font-size: 10.5px; } }

.q2-top nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.q2-top nav a {
    color: var(--q2-on-dark-soft);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.q2-top nav a:hover { color: var(--q2-on-navy); }
@media (max-width: 860px) { .q2-top nav a.q2-navlink { display: none; } }

/* ------------------------------------------------------------------ buttons */

.q2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    padding: 13px 22px;
    border-radius: 11px;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: filter .12s, transform .12s, border-color .12s, background .12s, color .12s;
}
.q2-btn:focus-visible { outline: 3px solid var(--q2-azure); outline-offset: 2px; }

/* Every button variant is scoped under `.q2-public` for the same
 * specificity reason as the wordmark: these buttons are anchors, and
 * `.q2-public a` would otherwise paint their text navy — which on the
 * navy-filled primary button means an invisible label. The `.q2-top nav a`
 * rule is (0,2,1), so the nav's own button needs the extra class too. */
.q2-public .q2-btn-primary,
.q2-top nav a.q2-btn-primary {
    background: linear-gradient(180deg, var(--acc-grad-1), var(--acc));
    color: var(--on-acc);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--acc) 32%, transparent);
}
.q2-public .q2-btn-primary:hover,
.q2-top nav a.q2-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); color: var(--on-acc); }
.q2-public .q2-btn-ghost,
.q2-top nav a.q2-btn-ghost {
    background: transparent;
    color: var(--q2-on-dark);
    border-color: rgba(255, 255, 255, .3);
}
.q2-public .q2-btn-ghost:hover { border-color: var(--q2-on-navy); background: rgba(255, 255, 255, .07); color: var(--q2-on-navy); }
.q2-btn-sm { font-size: 13.5px; padding: 9px 15px; border-radius: 9px; }
.q2-btn-block { width: 100%; }

.q2-pq {
    width: 24px; height: 24px; border-radius: 7px; flex: none;
    background: rgba(255, 255, 255, .2);
    display: grid; place-items: center;
    font-size: 12px; font-weight: 800; letter-spacing: -.02em;
}

/* --------------------------------------------------------------------- hero */

.q2-hero {
    position: relative;
    background: var(--q2-hero);
    color: var(--q2-on-dark);
    overflow: hidden;
}
.q2-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--q2-hero-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--q2-hero-grid) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(80% 70% at 30% 20%, var(--q2-mask) 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(80% 70% at 30% 20%, var(--q2-mask) 0%, transparent 75%);
    pointer-events: none;
}
.q2-hero-in {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.06fr .94fr;
    gap: 56px;
    align-items: center;
    padding: 72px 24px 84px;
}
@media (max-width: 980px) {
    .q2-hero-in { grid-template-columns: 1fr; gap: 40px; padding: 48px 24px 56px; }
}

/* The hero carries the positioning alone — the sign-in card lives in the
 * platform section, where it belongs on a page selling an engagement
 * rather than a login. One column, and the lead gets the width back. */
.q2-hero-in.one { grid-template-columns: 1fr; }
.q2-hero-in.one .q2-hero-sub { max-width: 64ch; }
.q2-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.q2-hero .q2-eyebrow { color: var(--q2-sky); }
.q2-hero h1 {
    font-size: clamp(34px, 4.8vw, 56px);
    font-weight: 800;
    color: var(--q2-on-navy);
    margin-top: 16px;
    letter-spacing: -.03em;
}
.q2-hero h1 .hl { color: var(--q2-sky); }
.q2-hero .q2-hero-sub {
    font-size: clamp(16.5px, 1.7vw, 19.5px);
    color: var(--q2-on-dark-soft);
    margin-top: 20px;
    max-width: 40ch;
    line-height: 1.55;
}
.q2-hero-facts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.q2-hero-facts span {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--q2-on-dark-soft);
    background: var(--q2-dark-panel);
    border: 1px solid var(--q2-dark-line);
    border-radius: 999px;
    padding: 6px 13px;
}

/* ------------------------------------------------------------- sign-in card */

.q2-signin {
    background: var(--q2-panel);
    border: 1px solid var(--q2-line);
    border-radius: 18px;
    box-shadow: var(--q2-sh-lg);
    padding: 28px;
    color: var(--q2-ink);
}
.q2-signin h2 { font-size: 21px; font-weight: 800; color: var(--q2-ink); }
.q2-signin .q2-signin-lede { font-size: 14.5px; color: var(--q2-muted); margin-top: 9px; line-height: 1.55; }
.q2-signin .q2-btn-primary { margin-top: 20px; }
.q2-signin-help {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--q2-line);
    font-size: 13px;
    color: var(--q2-muted);
    line-height: 1.6;
}
.q2-signin-help a { font-weight: 700; text-decoration: none; }
.q2-signin-help a:hover { text-decoration: underline; }
.q2-signin-help p + p { margin-top: 9px; }

/* The platform section: the lead one side, the sign-in card the other. The
 * card is the page's only sign-in surface, so it never shrinks below a
 * readable width — under 900px it stacks under the lead instead. */
.q2-platform-in {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 52px;
    align-items: start;
    margin-top: 30px;
}
@media (max-width: 900px) { .q2-platform-in { grid-template-columns: 1fr; gap: 32px; } }
.q2-platform-in .q2-lede { margin-top: 0; }

/* The refusal band. A failed sign-in is the only thing its reader is
 * looking for, so it sits at the top of the page under the header rather
 * than beside a card most of the page away. */
.q2-alert-band {
    background: var(--q2-bad-bg);
    border-bottom: 1px solid var(--q2-bad-line);
}
.q2-alert-in {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding-top: 18px;
    padding-bottom: 18px;
}
.q2-alert-in .q2-ic { color: var(--q2-bad); margin-top: 2px; }
.q2-alert-band h2 { font-size: 16px; font-weight: 800; color: var(--q2-bad); letter-spacing: -.01em; }
.q2-alert-band p { font-size: 14px; color: var(--q2-ink-soft); margin-top: 6px; line-height: 1.55; max-width: 82ch; }
.q2-alert-band code {
    display: inline-block;
    margin-top: 8px;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    font-size: 11.5px;
    color: var(--q2-muted);
}
.q2-alert-band .q2-btn { margin-left: auto; flex: none; }
@media (max-width: 720px) {
    .q2-alert-in { flex-wrap: wrap; }
    .q2-alert-band .q2-btn { margin-left: 34px; }
}

/* The honest notice a deployment with no sign-in configured shows in place
 * of a button that could not work. */
.q2-notice {
    border: 1px solid var(--q2-warn-line);
    background: var(--q2-warn-bg);
    border-radius: var(--q2-r-sm);
    padding: 14px 16px;
    font-size: 13.5px;
    color: var(--q2-ink-soft);
    line-height: 1.55;
    margin-top: 18px;
}
.q2-notice b { color: var(--q2-warn); }

/* --------------------------------------------------------------- mock screen */

.q2-mock {
    background: var(--q2-panel);
    border: 1px solid var(--q2-line);
    border-radius: var(--q2-r);
    box-shadow: var(--q2-sh);
    overflow: hidden;
}
.q2-mock-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--q2-panel-2);
    border-bottom: 1px solid var(--q2-line);
}
.q2-mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--q2-line-2); }
.q2-mock-bar span { margin-left: 6px; font-size: 11.5px; font-weight: 700; color: var(--q2-muted); }
.q2-mock-body { padding: 16px 18px 18px; }
/* Block, not flex: the caption is a SENTENCE whose last word wears a label
 * pill, and a flex container turned the sentence's final period into a
 * floating flex item of its own. */
.q2-mock-cap {
    font-size: 12px;
    color: var(--q2-faint);
    margin-top: 10px;
    line-height: 1.5;
}
.q2-mock-cap .q2-repr { margin-left: 5px; }

.q2-rowline { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--q2-line); font-size: 13px; }
.q2-rowline:last-child { border-bottom: none; }
.q2-rowline .t { flex: 1; color: var(--q2-ink); font-weight: 600; }
.q2-rowline .t small { display: block; font-weight: 500; color: var(--q2-muted); font-size: 11.5px; margin-top: 2px; }
.q2-chip {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--q2-panel-2);
    color: var(--q2-muted);
    border: 1px solid var(--q2-line);
    white-space: nowrap;
}
.q2-chip.ok { background: var(--q2-ok-bg); color: var(--q2-ok); border-color: transparent; }
.q2-chip.warn { background: var(--q2-warn-bg); color: var(--q2-warn); border-color: transparent; }
.q2-chip.acc { background: var(--q2-navy-soft); color: var(--q2-navy); border-color: transparent; }

/* A share bar — shares as percentages, which is how this practice states
 * an effect: always a percentage, never a bare decimal and never a
 * scale-confounded coefficient. (Spelled around, so that a scan of this
 * tree for the forbidden vocabulary is not tripped by the comment
 * explaining the rule — this repo has learned that one twice.) */
.q2-share { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 7px 0; }
.q2-share .lb { font-size: 12.5px; color: var(--q2-ink-soft); font-weight: 600; }
.q2-share .pc { font-size: 12.5px; font-weight: 700; color: var(--q2-ink); font-variant-numeric: tabular-nums; }
.q2-share .track { grid-column: 1 / -1; height: 7px; border-radius: 999px; background: var(--q2-line); overflow: hidden; }
/* `display: block` is load-bearing. The track's child is a span, and an
 * INLINE box ignores width and height — so every share bar rendered as
 * an empty track until a zoomed render showed it. `.q2-share` is a grid,
 * which blockifies the track itself; nothing blockifies its child. */
.q2-share .fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--q2-azure), var(--q2-navy)); }
.q2-share .fill.alt { background: linear-gradient(90deg, var(--q2-line-2), var(--q2-faint)); }
/* Bar lengths live here rather than on a style attribute: the page's whole
 * appearance is meant to be in this file, illustration included. */
.q2-share .fill.w13 { width: 13%; }
.q2-share .fill.w21 { width: 21%; }
.q2-share .fill.w28 { width: 28%; }
.q2-share .fill.w38 { width: 38%; }

/* The chat mock, for the interview blocks. */
.q2-turn { display: flex; gap: 10px; margin-bottom: 10px; align-items: flex-start; }
.q2-turn .who {
    width: 26px; height: 26px; border-radius: 8px; flex: none;
    display: grid; place-items: center;
    font-size: 10.5px; font-weight: 800;
    background: var(--q2-navy-soft); color: var(--q2-navy);
}
.q2-turn.r .who { background: var(--q2-panel-2); color: var(--q2-muted); border: 1px solid var(--q2-line); }
.q2-turn .said {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--q2-ink-soft);
    background: var(--q2-panel-2);
    border: 1px solid var(--q2-line);
    border-radius: 10px;
    padding: 9px 12px;
}
.q2-turn.m .said { background: var(--q2-navy-soft); border-color: transparent; color: var(--q2-ink); }

/* ------------------------------------------------------------------- cards */

.q2-grid { display: grid; gap: 20px; margin-top: 40px; }
.q2-grid.three { grid-template-columns: repeat(3, 1fr); }
.q2-grid.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 940px) { .q2-grid.three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .q2-grid.three, .q2-grid.two { grid-template-columns: 1fr; } }

.q2-card {
    background: var(--q2-panel);
    border: 1px solid var(--q2-line);
    border-radius: var(--q2-r);
    padding: 24px;
    box-shadow: var(--q2-sh-sm);
}
.q2-card .q2-cardic {
    width: 40px; height: 40px; border-radius: 11px;
    background: var(--q2-navy-soft); color: var(--q2-navy);
    display: grid; place-items: center;
    margin-bottom: 15px;
}
.q2-card h3 { font-size: 17px; font-weight: 700; color: var(--q2-ink); }
.q2-card p { font-size: 14.5px; color: var(--q2-muted); margin-top: 10px; line-height: 1.6; }

/* A capability block: prose one side, a representative screen the other,
 * alternating so a long page has a rhythm rather than a list. */
.q2-cap { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.q2-cap + .q2-cap { margin-top: 76px; }
.q2-cap.flip .q2-cap-art { order: -1; }
@media (max-width: 920px) {
    .q2-cap { grid-template-columns: 1fr; gap: 32px; }
    .q2-cap.flip .q2-cap-art { order: 0; }
    .q2-cap + .q2-cap { margin-top: 52px; }
}
/* `h2` as well as `h3`: the three capability blocks are top-level sections
 * of this page — they are the deck's own H2s and the header nav's own
 * destinations — so they carry `h2` and a screen reader hears them as
 * peers of "Why firms bring us in", not as sub-parts of whichever section
 * happens to precede them. The block's TYPE is unchanged: this selector is
 * what keeps a capability heading smaller than a section heading. */
.q2-cap h2,
.q2-cap h3 { font-size: clamp(21px, 2.4vw, 27px); font-weight: 800; color: var(--q2-ink); margin-top: 11px; }
.q2-cap p { font-size: 15.5px; color: var(--q2-muted); margin-top: 14px; line-height: 1.65; }
.q2-cap ul { margin: 16px 0 0; padding: 0; list-style: none; }
.q2-cap li {
    position: relative;
    padding-left: 26px;
    font-size: 14.5px;
    color: var(--q2-ink-soft);
    line-height: 1.55;
    margin-top: 10px;
}
.q2-cap li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 8px;
    width: 8px; height: 8px;
    border-radius: 2px;
    background: var(--q2-azure);
}

/* ------------------------------------------------------- sources and bullets */

/* The seven sources. A grid rather than a column because the point of the
 * section is that they arrive TOGETHER — a single tall list reads as seven
 * separate offers, which is the opposite of what the copy says. */
.q2-sources {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 30px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}
@media (max-width: 940px) { .q2-sources { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px) { .q2-sources { grid-template-columns: 1fr; } }

/* A standalone bullet list, for the sections that carry no illustration.
 * Same marker and rhythm as `.q2-cap li`, which is scoped to the capability
 * blocks and cannot be reused outside them. */
.q2-bullets { margin: 28px 0 0; padding: 0; list-style: none; max-width: 82ch; }
.q2-sources li,
.q2-bullets li {
    position: relative;
    padding-left: 26px;
    font-size: 14.5px;
    color: var(--q2-ink-soft);
    line-height: 1.55;
    margin-top: 10px;
}
.q2-sources li::before,
.q2-bullets li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 8px;
    width: 8px; height: 8px;
    border-radius: 2px;
    background: var(--q2-azure);
}
.q2-sources li b,
.q2-bullets li b { color: var(--q2-ink); }

/* The one-sentence close a section lands on. The rule above it is
 * load-bearing: without it the sentence sat directly under the last grid
 * item at the same left edge and read as a fourth bullet in column one,
 * rather than as the section's conclusion. Caught in the render. */
.q2-secline {
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid var(--q2-line);
    font-size: 17px;
    font-weight: 700;
    color: var(--q2-ink);
    letter-spacing: -.01em;
}
.q2-secline-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ---------------------------------------------------------------- how it works */

.q2-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 42px; }
.q2-steps.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1040px) { .q2-steps.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .q2-steps { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .q2-steps.four { grid-template-columns: 1fr; } }
.q2-step {
    background: var(--q2-panel);
    border: 1px solid var(--q2-line);
    border-radius: var(--q2-r);
    padding: 26px;
    box-shadow: var(--q2-sh-sm);
    position: relative;
}
/* The step label is uppercased in the PAINT, not in the markup: the deck's
 * own casing stays in the document, which is what a reader's copy-paste and
 * the copy check both see. */
.q2-step .n {
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--q2-azure);
}
.q2-step h3 { font-size: 19px; font-weight: 800; margin-top: 10px; color: var(--q2-ink); }
.q2-step p { font-size: 14.5px; color: var(--q2-muted); margin-top: 11px; line-height: 1.6; }

/* --------------------------------------------------------------- deliverables */

/* What lands on the client's desk: one list, one marker, no card frame —
 * the section is short on purpose and a grid of five boxes would make a
 * five-item list look like a product catalog. */
.q2-list { margin: 34px 0 0; padding: 0; list-style: none; max-width: 78ch; }
.q2-list li {
    position: relative;
    padding: 14px 0 14px 30px;
    border-bottom: 1px solid var(--q2-line);
    font-size: 16px;
    font-weight: 600;
    color: var(--q2-ink-soft);
    line-height: 1.5;
}
.q2-list li:last-child { border-bottom: none; }
.q2-list li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 21px;
    width: 8px; height: 8px;
    border-radius: 2px;
    background: var(--q2-azure);
}

/* ---------------------------------------------------------------- dark band */

.q2-band { background: var(--q2-hero); color: var(--q2-on-dark); }
.q2-band h2 { color: var(--q2-on-navy); }
.q2-band .q2-eyebrow { color: var(--q2-sky); }
.q2-band .q2-lede { color: var(--q2-on-dark-soft); }
.q2-band .q2-card {
    background: var(--q2-dark-panel);
    border-color: var(--q2-dark-line);
    box-shadow: none;
}
.q2-band .q2-card h3 { color: var(--q2-on-navy); }
.q2-band .q2-card p { color: var(--q2-on-dark-soft); }
.q2-band .q2-card .q2-cardic { background: rgba(159, 198, 240, .16); color: var(--q2-sky); }

/* The sign-in card is a WHITE panel standing on the dark band, so the
 * band's own `h2` ink has to be undone inside it — otherwise
 * the card's heading is white on white and the card opens with a blank
 * strip where its title should be. The mirror image of the navy-on-navy
 * button bug, and caught the same way: by looking at the render. */
.q2-band .q2-signin h2 { color: var(--q2-ink); }
.q2-band .q2-signin p { color: var(--q2-muted); }

/* ------------------------------------------------------------------ closing */

.q2-close-in {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 52px;
    align-items: center;
    padding: 76px 24px;
}
/* The closing headline is an h2 so the page keeps ONE h1, but it is the
 * page's second hero and reads as one. */
.q2-close-in h2 {
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    color: var(--q2-on-navy);
    letter-spacing: -.03em;
    margin-top: 16px;
}
@media (max-width: 900px) { .q2-close-in { grid-template-columns: 1fr; gap: 36px; padding: 52px 24px; } }
.q2-close-in.one { grid-template-columns: 1fr; }
.q2-close-in.one .q2-hero-sub { max-width: 62ch; }

.q2-foot {
    background: var(--q2-panel-2);
    border-top: 1px solid var(--q2-line);
    padding: 28px 0;
    font-size: 13px;
    color: var(--q2-faint);
}
.q2-foot .q2-wrap { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
.q2-foot a { color: var(--q2-muted); text-decoration: none; font-weight: 600; }
.q2-foot a:hover { color: var(--q2-navy); }
.q2-foot .sp { margin-left: auto; }

/* A label the honesty rules require wherever an illustration stands in for
 * a screenshot. It is small, but it is never absent. */
.q2-repr {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--q2-faint);
    border: 1px dashed var(--q2-line-2);
    border-radius: 6px;
    padding: 3px 8px;
}
.q2-band .q2-repr { color: var(--q2-on-dark-faint); border-color: var(--q2-dark-line); }

.q2-skip {
    position: absolute;
    left: -9999px;
    top: 0;
}
.q2-skip:focus {
    left: 12px;
    top: 12px;
    z-index: 100;
    background: var(--q2-panel);
    color: var(--q2-ink);
    padding: 10px 16px;
    border-radius: 8px;
    box-shadow: var(--q2-sh-lg);
}

/* ============================================================================
 * THE CAPABILITY PAGES
 *
 * Added when the front door became the first of eight public pages (deck
 * `docs/design/capability-pages-deck-v1.md`). Everything above is reused as
 * it stands — the hero, the section rhythm, the mock-screen chrome, the
 * share bars, the cards, the dark band, the footer — and what follows is
 * only what a multi-page presentation needs and a single page did not: a
 * navigation menu, a subsection type scale, running prose outside a
 * capability block, an FAQ, and three more drawings' worth of bar widths.
 *
 * The file keeps its NAME deliberately. `q2_public.css` would read better,
 * and the production-image smoke gate identifies the deployed front door by
 * `/static/css/q2_landing.css` (with the `q2-landing` body class) — markers
 * chosen precisely because they do not move when copy is rewritten. Renaming
 * the stylesheet is a separate, deliberate step that moves the gate with it.
 * ========================================================================= */

/* ---------------------------------------------------------- the header menu */

/* `<details>` rather than a hover panel: it opens on click AND on Enter, so
 * it works on a touch screen and from the keyboard, and the public base
 * loads no JavaScript by design. */
.q2-menu { position: relative; }
.q2-menu > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--q2-on-dark-soft);
    font-size: 14px;
    font-weight: 600;
}
.q2-menu > summary::-webkit-details-marker { display: none; }
.q2-menu > summary::marker { content: ""; }
.q2-menu > summary:hover,
.q2-menu[open] > summary { color: var(--q2-on-navy); }
.q2-menu > summary:focus-visible { outline: 3px solid var(--q2-azure); outline-offset: 3px; border-radius: 6px; }
.q2-caret { font-size: 10px; line-height: 1; }

.q2-menu > ul {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    z-index: 40;
    min-width: 236px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: var(--q2-panel);
    border: 1px solid var(--q2-line);
    border-radius: var(--q2-r-sm);
    box-shadow: var(--q2-sh-lg);
}
/* Scoped under `.q2-public` for the same reason every button variant is:
 * `.q2-public a { color: … }` is (0,1,1) and beats a bare class. */
.q2-public .q2-menu > ul a {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--q2-ink-soft);
    text-decoration: none;
}
.q2-public .q2-menu > ul a:hover { background: var(--q2-panel-2); color: var(--q2-navy); }
.q2-public .q2-menu > ul a[aria-current="page"] { background: var(--q2-navy-soft); color: var(--q2-navy); }
.q2-top nav a[aria-current="page"] { color: var(--q2-on-navy); }

/* The header wraps instead of hiding its links. The front door could hide
 * them because they were in-page anchors to sections the reader was already
 * scrolling through; on a capability page they are the only way to the other
 * seven pages, and a nav that disappears on a phone is a site with one page
 * on a phone. */
@media (max-width: 860px) {
    .q2-top .q2-wrap { flex-wrap: wrap; row-gap: 12px; }
    .q2-top nav { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 14px 18px; }
    /* Undoing the front door's own `display: none` above, on purpose and in
     * the same file rather than by deleting that rule: the two states are a
     * pair, and reading them together is what says the links used to be
     * skippable and no longer are. */
    .q2-top nav a.q2-navlink { display: inline; }
    .q2-menu > ul { position: static; min-width: 0; width: 100%; box-shadow: none; margin-top: 10px; }
}

/* --------------------------------------------------------- the capability page */

/* An `h2` on these pages is a SUBSECTION under the page's own `h1`, not a
 * top-level section heading as it is on the front door — so the scale steps
 * down. Scoped to the body class rather than changing `.q2-sec h2`, which
 * the front door still owns. */
.q2-cappage .q2-sec h2 { font-size: clamp(21px, 2.6vw, 29px); }
.q2-cappage .q2-hero h1 { max-width: 22ch; }

/* The source sentence under the hero lead: this capability named as one of
 * the places a commercial answer comes from. */
.q2-source {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--q2-dark-line);
    max-width: 60ch;
    font-size: 15px;
    font-weight: 600;
    color: var(--q2-sky);
    letter-spacing: -.005em;
}

/* Running prose in a section that carries no illustration. Inside a
 * `.q2-cap` the existing `.q2-cap p` rule is more specific and still wins,
 * so the two layouts stay in one voice. */
.q2-prose {
    font-size: 16px;
    color: var(--q2-muted);
    line-height: 1.65;
    max-width: 74ch;
    margin-top: 16px;
}
.q2-prose + .q2-prose { margin-top: 14px; }
.q2-cappage .q2-sec h2 + .q2-prose { margin-top: 18px; }

/* The note beside a `Representative` badge, where the drawing carries
 * numbers. The badge says it is a rendering; this says the values in it are
 * invented, which is the stricter half of the honesty rule. */
.q2-mock-note { color: var(--q2-faint); font-size: 12px; }

/* ------------------------------------------------------------------- the FAQ */

.q2-faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 40px; margin-top: 36px; }
@media (max-width: 860px) { .q2-faq { grid-template-columns: 1fr; gap: 20px; } }
.q2-faq-item {
    padding: 20px 22px;
    background: var(--q2-panel);
    border: 1px solid var(--q2-line);
    border-radius: var(--q2-r);
    box-shadow: var(--q2-sh-sm);
}
.q2-faq-item h3 { font-size: 15.5px; font-weight: 700; color: var(--q2-ink); line-height: 1.35; }
.q2-faq-a { font-size: 14.5px; color: var(--q2-muted); margin-top: 9px; line-height: 1.6; }

/* --------------------------------------------------- the copilot drawer mock */

/* Two columns inside one mock screen: the exchange, and what the moderator
 * sees beside it. It collapses at 620px rather than at the `.q2-cap`
 * breakpoint because the art column is full-width well before the viewport
 * is narrow — what matters is the column's own width, not the page's. */
.q2-mock-split { display: grid; grid-template-columns: 1.3fr .85fr; gap: 14px; }
@media (max-width: 620px) { .q2-mock-split { grid-template-columns: 1fr; } }
.q2-mock-main { min-width: 0; }
.q2-drawer {
    min-width: 0;
    padding: 12px 13px;
    background: var(--q2-panel-2);
    border: 1px solid var(--q2-line);
    border-radius: var(--q2-r-sm);
}
.q2-drawer-h {
    font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--q2-faint);
}
.q2-drawer .q2-rowline { font-size: 12px; padding: 8px 0; }
.q2-drawer .q2-rowline .t { font-size: 12px; }
.q2-drawer-probe { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--q2-line); }
.q2-drawer-probe p { font-size: 12.5px; color: var(--q2-ink-soft); line-height: 1.5; margin-top: 6px; }
.q2-drawer-probe .q2-drawer-note { color: var(--q2-faint); font-size: 11.5px; margin-top: 8px; }

/* ------------------------------------------------------ more bar widths */

/* Same rule as the front door's four: an illustrative bar length is a CLASS,
 * never a `style` attribute, because these pages carry no inline styling at
 * all and a test asserts it against the rendered page. */
.q2-share .fill.w8 { width: 8%; }
.q2-share .fill.w10 { width: 10%; }
.q2-share .fill.w14 { width: 14%; }
.q2-share .fill.w16 { width: 16%; }
.q2-share .fill.w18 { width: 18%; }
.q2-share .fill.w19 { width: 19%; }
.q2-share .fill.w24 { width: 24%; }
.q2-share .fill.w26 { width: 26%; }
.q2-share .fill.w31 { width: 31%; }

/* ------------------------------------------------- the front door's page links */

/* The front door summarises what the capability pages say in full, so each
 * summary carries the way through to its page. An arrow via `::after` rather
 * than in the markup: it is decoration, and a screen reader should hear
 * "Decision modeling in full", not "Decision modeling in full right arrow". */
.q2-more { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; }
.q2-public .q2-more a {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--q2-navy);
    text-decoration: none;
}
.q2-public .q2-more a::after { content: " \2192"; }
.q2-public .q2-more a:hover { text-decoration: underline; }
.q2-band .q2-more a,
.q2-hero .q2-more a { color: var(--q2-sky); }

/* A section with no illustration: heading one side, body the other, so the
 * page uses its width instead of running a narrow column down the left of an
 * empty 1440. Collapses at the same breakpoint `.q2-cap` does, so the two
 * section shapes stack together rather than at different widths. */
.q2-secgrid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.45fr); gap: 22px 56px; }
@media (max-width: 920px) { .q2-secgrid { grid-template-columns: 1fr; gap: 6px; } }
.q2-secgrid .q2-prose:first-child,
.q2-secgrid ul:first-child { margin-top: 6px; }
.q2-cappage .q2-secgrid h2 { margin-top: 0; }

/* The capabilities menu on a page that is one of them. */
.q2-menu.is-active > summary { color: var(--q2-on-navy); }