/* Q1 2026 Strategic Read — page-specific styles
   Editorial long-form for an iPad-first leadership audience.
   Reuses the dashboard's brand color foundation; overrides typography
   and rhythm for an editorial voice distinct from the dashboard surface.
   Light theme only (per .impeccable.md / CLAUDE.md design context).
*/

/* ──────────────────────────────────────────────────────────────────────────
   Page-scoped tokens
   ────────────────────────────────────────────────────────────────────────── */
.q1-read,
body:has(.q1-read) {
    /* Brand hue, restated in OKLCH so tints/darkens are perceptually uniform. */
    --q1-purple: oklch(0.46 0.115 285);          /* ≈ #5B5BA9 (Abound purple) */
    --q1-purple-deep: oklch(0.36 0.13 285);
    --q1-purple-soft: oklch(0.62 0.09 285);
    --q1-purple-50:  oklch(0.97 0.012 285);      /* hairline tint */
    --q1-purple-100: oklch(0.95 0.018 285);
    --q1-purple-200: oklch(0.91 0.025 285);

    /* Tinted neutrals (warm-purple-tinted), not pure gray. */
    --q1-ink:        oklch(0.21 0.012 285);      /* body text */
    --q1-ink-soft:   oklch(0.40 0.014 285);      /* secondary text */
    --q1-ink-mute:   oklch(0.55 0.012 285);      /* tertiary / meta */

    --q1-paper:      oklch(0.985 0.005 285);     /* page background */
    --q1-paper-warm: oklch(0.97 0.009 285);      /* card surfaces */
    --q1-rule:       oklch(0.90 0.012 285);      /* hairlines */
    --q1-rule-strong: oklch(0.82 0.018 285);

    /* Status hues for VRIO verdicts — kept calm, low-chroma. */
    --q1-pos: oklch(0.45 0.12 150);              /* deep green */
    --q1-warn: oklch(0.52 0.13 70);              /* warm amber */
    --q1-neutral: oklch(0.50 0.012 285);         /* tinted gray */

    /* Spacing scale — 4pt grid, semantic names. */
    --q1-s-1: 0.25rem;   /* 4 */
    --q1-s-2: 0.5rem;    /* 8 */
    --q1-s-3: 0.75rem;   /* 12 */
    --q1-s-4: 1rem;      /* 16 */
    --q1-s-5: 1.5rem;    /* 24 */
    --q1-s-6: 2rem;      /* 32 */
    --q1-s-7: 3rem;      /* 48 */
    --q1-s-8: 4rem;      /* 64 */
    --q1-s-9: 6rem;      /* 96 */

    /* Type scale — sized for two contexts: iPad at arm's length and projection in
       a meeting room. Meta floor held at 16px so eyebrows, citations, and table
       meta stay legible at projection distance. Body at 19px is already large for
       SaaS norms; the readability lift comes from raising the floor, not the body. */
    --q1-t-meta:  1rem;       /* 16px */
    --q1-t-body:  1.1875rem;  /* 19px */
    --q1-t-lede:  1.375rem;   /* 22px */
    --q1-t-h3:    1.5rem;     /* 24px */
    --q1-t-h2:    clamp(1.75rem, 1.3rem + 1.6vw, 2.375rem);
    --q1-t-h1:    clamp(2.5rem, 1.8rem + 3vw, 3.5rem);

    --q1-radius: 10px;
    --q1-radius-lg: 14px;

    --q1-easing: cubic-bezier(0.22, 1, 0.36, 1);  /* ease-out-quart */
}

/* ──────────────────────────────────────────────────────────────────────────
   Page shell
   ────────────────────────────────────────────────────────────────────────── */
body:has(.q1-read) {
    background: var(--q1-paper);
    color: var(--q1-ink);
    font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: var(--q1-t-body);
    line-height: 1.7;
    font-feature-settings: "ss01", "kern", "liga";
}

/* The .q1-layout wraps <main class="q1-read"> + <aside class="q1-toc"> from
   the outside. At >=980px, content + TOC sit side-by-side. Below 980px, the
   TOC hides and the layout collapses to a single column at the same 720px
   reading width as before. */
.q1-layout {
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--q1-s-7) var(--q1-s-4) var(--q1-s-9);
}

.q1-read {
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
}

@media (min-width: 768px) {
    .q1-layout {
        padding: var(--q1-s-8) var(--q1-s-6) var(--q1-s-9);
    }
}

@media (min-width: 980px) {
    .q1-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 220px;
        gap: var(--q1-s-7);
        align-items: start;
    }
    .q1-layout > .q1-read {
        grid-column: 1;
        margin: 0;
        max-width: 760px;
        justify-self: end;
    }
    .q1-layout > .q1-toc {
        grid-column: 2;
    }
}

/* Sticky table of contents on the right at >=980px. Hides below that
   breakpoint and in print. The TOC's <ol> uses a CSS counter to render
   `01 02 03 ...` in the system mono stack as a quiet structural cue. */
.q1-toc {
    display: none;
}

@media (min-width: 980px) {
    .q1-toc {
        display: block;
        position: sticky;
        top: var(--q1-s-5);
        font-size: var(--q1-t-meta);
        border-left: 1px solid var(--q1-rule);
        padding-left: var(--q1-s-4);
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }
}

/* .q1-toc-label inherits Public Sans, uppercase, letter-spacing 0.08em,
   font-size --q1-t-meta, and font-weight 600 from the small-caps eyebrow
   group above. Only color and margin live here. */
.q1-toc-label {
    color: var(--q1-ink-mute);
    margin: 0 0 var(--q1-s-3);
}

.q1-toc ol {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: toc;
}

.q1-toc li {
    counter-increment: toc;
    margin: var(--q1-s-2) 0;
    position: relative;
}

.q1-toc li::before {
    content: counter(toc, decimal-leading-zero);
    position: absolute;
    left: -28px;
    top: 0.65rem;
    font-family: ui-monospace, "SF Mono", Menlo, "Cascadia Mono", monospace;
    font-size: 0.72rem;
    color: var(--q1-ink-mute);
    font-feature-settings: "tnum";
}

.q1-toc a {
    color: var(--q1-ink-soft);
    text-decoration: none;
    display: block;
    padding: var(--q1-s-2) var(--q1-s-2) var(--q1-s-2) var(--q1-s-3);
    border-left: 2px solid transparent;
    margin-left: -2px;
    min-height: 32px;
    box-sizing: border-box;
    transition: color 0.15s var(--q1-easing), border-color 0.15s var(--q1-easing);
    line-height: 1.35;
}

.q1-toc a:hover {
    color: var(--q1-purple);
}

.q1-toc a[aria-current="location"] {
    color: var(--q1-purple-deep);
    font-weight: 600;
    border-left-color: var(--q1-purple);
}

/* ──────────────────────────────────────────────────────────────────────────
   Editorial type — Spectral for display, Public Sans for body
   ────────────────────────────────────────────────────────────────────────── */
.q1-read h1,
.q1-read h2,
.q1-read .q1-display {
    font-family: "Spectral", "Iowan Old Style", Georgia, serif;
    font-feature-settings: "kern", "liga", "onum";
    color: var(--q1-ink);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-align: left;
    /* Intentionally NOT text-wrap: balance — that produces visually centered-
       looking breaks. Left-aligned, ragged-right reads cleaner here. */
}

.q1-read h3,
.q1-read h4 {
    font-family: "Public Sans", system-ui, sans-serif;
    color: var(--q1-ink);
    letter-spacing: -0.005em;
    text-align: left;
}

.q1-read p {
    text-wrap: pretty;
}

.q1-read a {
    color: var(--q1-purple-deep);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in oklch, var(--q1-purple-deep) 35%, transparent);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s var(--q1-easing), color 0.15s var(--q1-easing);
}

.q1-read a:hover {
    color: var(--q1-purple);
    text-decoration-color: var(--q1-purple);
}

/* Visible, on-brand focus ring everywhere. The .q1-layout selector covers
   both the main content column (.q1-read) and the sticky TOC aside, which
   sit as siblings inside the layout grid; descendant scoping on .q1-read
   alone would miss the TOC. */
.q1-layout :focus-visible,
.q1-prep-drawer :focus-visible,
#password-overlay :focus-visible {
    outline: 2px solid var(--q1-purple);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Small caps eyebrow type */
.q1-section-eyebrow,
.q1-cascade-source,
.q1-orientation-howto h3,
.q1-headline-block .q1-block-label,
.q1-toc-label {
    font-family: "Public Sans", system-ui, sans-serif;
    font-size: var(--q1-t-meta);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    font-feature-settings: "tnum";
}

/* ──────────────────────────────────────────────────────────────────────────
   Header
   ────────────────────────────────────────────────────────────────────────── */
/* The shared styles.css applies text-align: center to every <header> element.
   Override that here so the page-level header reads left-aligned like the rest
   of the editorial column. */
.q1-header {
    margin-bottom: var(--q1-s-8);
    padding-bottom: var(--q1-s-6);
    border-bottom: 1px solid var(--q1-rule);
    text-align: left;
    position: relative;
}

.q1-header .site-nav {
    margin-bottom: 1rem;
}

.q1-header .logo {
    height: 48px;
    width: auto;
    margin: var(--q1-s-2) 0 var(--q1-s-5);
}

.q1-header h1 {
    font-size: var(--q1-t-h1);
    margin: 0 0 var(--q1-s-3);
    font-weight: 500;
    color: var(--q1-purple-deep);
    line-height: 1.1;
}

.q1-header .subtitle {
    font-family: "Spectral", Georgia, serif;
    font-style: italic;
    font-size: var(--q1-t-lede);
    color: var(--q1-ink-soft);
    margin: 0 0 var(--q1-s-4);
    max-width: 60ch;
    line-height: 1.5;
}

.q1-version-note {
    font-size: var(--q1-t-meta);
    color: var(--q1-ink-soft);
    background: var(--q1-purple-50);
    border-left: 3px solid var(--q1-purple-soft);
    padding: var(--q1-s-3) var(--q1-s-4);
    margin: 0 0 var(--q1-s-4);
    border-radius: 4px;
}

.q1-version-note a {
    color: var(--q1-purple);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.q1-header .last-updated {
    font-size: var(--q1-t-meta);
    color: var(--q1-ink-mute);
    margin: 0 0 var(--q1-s-5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.q1-header .last-updated time {
    color: var(--q1-ink-soft);
}

.q1-print-controls {
    display: flex;
    gap: var(--q1-s-2);
    flex-wrap: wrap;
}

.q1-print-btn {
    background: var(--q1-paper-warm);
    border: 1px solid var(--q1-rule-strong);
    color: var(--q1-ink);
    padding: 0.625rem 1.125rem;
    border-radius: 999px;
    font-family: inherit;
    font-size: var(--q1-t-meta);
    font-weight: 500;
    cursor: pointer;
    min-height: 44px;
    transition: background 0.15s var(--q1-easing), border-color 0.15s var(--q1-easing), color 0.15s var(--q1-easing);
}

.q1-print-btn:hover {
    background: var(--q1-purple-100);
    border-color: var(--q1-purple-soft);
    color: var(--q1-purple-deep);
}

/* ──────────────────────────────────────────────────────────────────────────
   Executive summary — clean editorial bullets at the top
   ────────────────────────────────────────────────────────────────────────── */
.q1-exec {
    margin-bottom: var(--q1-s-7);
    padding-bottom: var(--q1-s-2);
}

.q1-exec h2 {
    font-size: var(--q1-t-h2);
    margin: 0 0 var(--q1-s-6);
    color: var(--q1-ink);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.q1-exec-list {
    list-style: none;
    counter-reset: exec;
    padding: 0;
    margin: 0;
}

.q1-exec-list > li {
    counter-increment: exec;
    padding: 0 0 var(--q1-s-6) calc(var(--q1-s-4) * 2.75);
    margin-bottom: var(--q1-s-6);
    border-bottom: 1px solid var(--q1-rule);
    position: relative;
    line-height: 1.7;
}

.q1-exec-list > li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.q1-exec-list > li::before {
    content: counter(exec, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    font-family: "Spectral", Georgia, serif;
    font-size: 1.875rem;
    font-weight: 500;
    color: var(--q1-purple);
    line-height: 1;
    font-feature-settings: "lnum";
}

.q1-exec-list > li strong:first-child {
    display: block;
    font-family: "Spectral", Georgia, serif;
    font-weight: 500;
    font-size: var(--q1-t-h3);
    color: var(--q1-ink);
    margin-bottom: var(--q1-s-1);
    line-height: 1.25;
}

/* ──────────────────────────────────────────────────────────────────────────
   Orientation block — uses the canonical .q1-callout.subtle surface
   pattern. Orientation-specific descendants (lede + howto subgrid) stay
   here. The callout shell provides padding, background, border-radius,
   and border via the unified .q1-callout / .q1-callout.subtle rules above.
   ────────────────────────────────────────────────────────────────────────── */
.q1-orientation {
    margin-bottom: var(--q1-s-8);
    position: relative;
}

.q1-orientation-lede {
    font-family: "Spectral", Georgia, serif;
    font-size: var(--q1-t-lede);
    line-height: 1.5;
    color: var(--q1-ink);
    margin: 0 0 var(--q1-s-3);
    text-wrap: pretty;
}

.q1-orientation > p {
    margin: 0 0 var(--q1-s-5);
    color: var(--q1-ink);
    line-height: 1.7;
}

.q1-orientation-howto {
    display: block;
    margin-top: var(--q1-s-6);
    padding-top: var(--q1-s-6);
    border-top: 1px solid var(--q1-rule);
}

.q1-orientation-howto > div {
    margin-bottom: var(--q1-s-6);
}

.q1-orientation-howto > div:last-child {
    margin-bottom: 0;
}

.q1-orientation-howto h3 {
    color: var(--q1-purple-deep);
    margin: 0 0 var(--q1-s-3);
}

.q1-orientation-howto ol {
    margin: 0;
    padding-left: 1.5rem;
}

.q1-orientation-howto li {
    margin-bottom: var(--q1-s-3);
    line-height: 1.7;
}

.q1-orientation-howto p {
    margin: 0 0 var(--q1-s-4);
    line-height: 1.7;
}

/* ──────────────────────────────────────────────────────────────────────────
   Headline read (Layer 1) — magazine lede
   ────────────────────────────────────────────────────────────────────────── */
.q1-headline {
    margin-bottom: var(--q1-s-7);
    padding-bottom: var(--q1-s-2);
}

.q1-section-eyebrow {
    color: var(--q1-purple-deep);
    margin: 0 0 var(--q1-s-2);
}

.q1-headline h2 {
    font-size: var(--q1-t-h2);
    margin: 0 0 var(--q1-s-6);
    color: var(--q1-ink);
    font-weight: 500;
}

.q1-headline-block {
    margin-bottom: var(--q1-s-7);
    padding: 0;
}

.q1-headline-block .q1-block-label {
    display: block;
    margin: 0 0 var(--q1-s-2);
    color: var(--q1-purple-deep);
    line-height: 1.3;
}

.q1-headline-block p {
    margin: 0 0 var(--q1-s-4);
    line-height: 1.7;
    font-size: var(--q1-t-body);
    color: var(--q1-ink);
}

.q1-headline-block p:last-child {
    margin-bottom: 0;
}

.q1-headline-lede {
    font-family: "Spectral", Georgia, serif;
    font-size: var(--q1-t-lede);
    color: var(--q1-ink);
    line-height: 1.45;
}

.q1-headline-block ul {
    margin: 0 0 0 0;
    padding-left: 1.5rem;
}

.q1-headline-block li {
    margin-bottom: var(--q1-s-4);
    line-height: 1.7;
}

.q1-headline-block li:last-child {
    margin-bottom: 0;
}

/* Drop-cap on the first headline block, "The challenge" */
.q1-headline-block.q1-headline-lead .q1-headline-lede::first-letter {
    font-family: "Spectral", Georgia, serif;
    font-size: 3.25em;
    line-height: 0.85;
    float: left;
    padding: 0.05em 0.12em 0 0;
    color: var(--q1-purple-deep);
    font-weight: 500;
}

/* Lede line at top of any expanded section body */
.q1-body-lede {
    font-family: "Spectral", Georgia, serif;
    font-size: var(--q1-t-lede);
    color: var(--q1-ink);
    line-height: 1.4;
    font-style: italic;
    margin: 0 0 var(--q1-s-3) !important;
    max-width: 60ch;
}

.q1-headline-handoff {
    margin-top: var(--q1-s-7);
    padding-top: var(--q1-s-5);
    border-top: 1px solid var(--q1-rule);
    font-size: var(--q1-t-meta);
    color: var(--q1-ink-soft);
    line-height: 1.7;
    font-style: italic;
    font-family: "Spectral", Georgia, serif;
    letter-spacing: 0.005em;
    max-width: 65ch;
}

/* ──────────────────────────────────────────────────────────────────────────
   Body sections
   ────────────────────────────────────────────────────────────────────────── */
/* Hairline rule between sections so the eye sees the structure even when the
   eyebrow is the only visible cue. Each q1-section opens with a 1px tinted
   rule, generous top padding, and a gap before the content starts. The
   bibliography keeps its existing spacing but inherits the rule. */
.q1-section {
    margin-bottom: var(--q1-s-8);
    padding-top: var(--q1-s-8);
    border-top: 1px solid var(--q1-rule);
    scroll-margin-top: var(--q1-s-5);
}

/* Simple left-aligned stack: section-num → title.
   The eyebrow + stamp triple was retired during the readability cleanup; numbered
   sections now lead with a quiet mono section-num above the h2. Front-matter
   sections (exec, orientation, headline) remain unnumbered and keep their
   eyebrow-led pattern via the .q1-section-eyebrow rule defined elsewhere. */
.q1-section-head {
    margin-bottom: var(--q1-s-6);
}

.q1-section-head .q1-section-num {
    margin: 0 0 var(--q1-s-2);
    font-family: ui-monospace, "SF Mono", Menlo, "Cascadia Mono", monospace;
    font-size: var(--q1-t-meta);
    font-weight: 500;
    color: var(--q1-ink-mute);
    letter-spacing: 0.08em;
    font-feature-settings: "tnum";
    text-align: left;
}

.q1-section-head h2 {
    font-size: var(--q1-t-h2);
    margin: 0 0 var(--q1-s-3);
    color: var(--q1-ink);
    font-weight: 500;
    line-height: 1.15;
    max-width: 32ch;
    text-align: left;
}

/* Inline framework attribution at the start of select section summaries.
   Italic, color ink-soft. Reads as a quiet caption that flows into the body
   prose rather than competing for header attention. */
.q1-section-framework-credit {
    font-style: italic;
    color: var(--q1-ink-soft);
}

/* Optional caveat line below the section-summary for sections that need a
   one-line "this is a working draft" or similar disclaimer. Kept quiet:
   smaller than body text, italic. Used by Section 5 VRIO. */
.q1-section-caveat {
    font-family: "Public Sans", system-ui, sans-serif;
    font-size: var(--q1-t-meta);
    font-style: italic;
    color: var(--q1-ink-mute);
    margin: calc(-1 * var(--q1-s-4)) 0 var(--q1-s-6);
    max-width: 65ch;
}

.q1-section-summary {
    font-family: "Spectral", Georgia, serif;
    font-size: var(--q1-t-lede);
    line-height: 1.6;
    color: var(--q1-ink);
    margin: 0 0 var(--q1-s-6);
    max-width: 65ch;
    text-wrap: pretty;
}

/* The "Read in full" disclosure — flat, no side stripe. */
.q1-section-detail {
    margin: var(--q1-s-5) 0 0;
}

.q1-section-detail > summary {
    cursor: pointer;
    font-family: "Public Sans", system-ui, sans-serif;
    font-size: var(--q1-t-meta);
    font-weight: 600;
    color: var(--q1-purple-deep);
    list-style: none;
    padding: var(--q1-s-3) 0;
    min-height: 44px;
    user-select: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: var(--q1-s-2);
    border-radius: 4px;
}

.q1-section-detail > summary::-webkit-details-marker {
    display: none;
}

.q1-section-detail > summary::after {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s var(--q1-easing), margin-bottom 0.2s var(--q1-easing);
    margin-left: 0.125rem;
    margin-bottom: 0.2rem;
}

.q1-section-detail[open] > summary::after {
    transform: rotate(-135deg);
    margin-bottom: -0.05rem;
}

.q1-section-detail > summary:hover {
    color: var(--q1-purple);
}

.q1-section-body {
    padding: var(--q1-s-5) 0 var(--q1-s-3);
    line-height: 1.7;
    max-width: 65ch;
}

.q1-section-body h3 {
    font-size: var(--q1-t-h3);
    color: var(--q1-ink);
    margin: var(--q1-s-7) 0 var(--q1-s-4);
    font-weight: 600;
    line-height: 1.3;
}

.q1-section-body h3:first-child {
    margin-top: var(--q1-s-4);
}

.q1-section-body h4 {
    font-size: 1rem;
    color: var(--q1-purple-deep);
    margin: var(--q1-s-5) 0 var(--q1-s-3);
    font-weight: 700;
}

.q1-section-body p {
    margin: 0 0 var(--q1-s-5);
    color: var(--q1-ink);
    line-height: 1.7;
}

.q1-section-body ul,
.q1-section-body ol {
    margin: 0 0 var(--q1-s-5);
    padding-left: 1.5rem;
}

.q1-section-body li {
    margin-bottom: var(--q1-s-4);
    line-height: 1.7;
}

.q1-section-body li:last-child {
    margin-bottom: 0;
}

.q1-section-body sup a,
.q1-exec-list sup a,
.q1-headline sup a,
.q1-section-frame sup a {
    text-decoration: none;
    background: var(--q1-purple-100);
    color: var(--q1-purple-deep);
    padding: 0.18em 0.45em;
    border-radius: 4px;
    font-size: 0.72em;
    font-weight: 600;
    margin-left: 0.15em;
    font-feature-settings: "tnum";
    transition: background 0.15s var(--q1-easing), color 0.15s var(--q1-easing);
}

.q1-section-body sup a:hover,
.q1-exec-list sup a:hover,
.q1-headline sup a:hover,
.q1-section-frame sup a:hover {
    background: var(--q1-purple);
    color: white;
}

/* The original .q1-section-body sup a:hover rule below is kept for safety; the
   selector list above already covers it. */

/* ──────────────────────────────────────────────────────────────────────────
   Callout — tinted bg with HTML label, NO side stripe
   ────────────────────────────────────────────────────────────────────────── */
/* Canonical surface for asides, pull-quotes, and structured framing notes.
   Two variants: brand-tinted (default) for emphasis, neutral-muted (.subtle)
   for quieter context. Surfaces with distinct shapes — the VRIO scoring
   table, the Playing-to-Win cascade, the Reflection prompts list — stay on
   their own patterns; the callout exists for surfaces that would otherwise
   each invent their own treatment. */
.q1-callout {
    background: var(--q1-purple-50);
    padding: var(--q1-s-6);
    border-radius: var(--q1-radius);
    margin: var(--q1-s-6) 0;
    font-size: var(--q1-t-body);
    border: 1px solid var(--q1-purple-200);
    line-height: 1.7;
}

.q1-callout.subtle {
    background: var(--q1-paper-warm);
    border-color: var(--q1-rule);
}

/* Section label inside a callout — set in HTML so screen readers get it
   reliably (CSS-generated content is announced inconsistently). */
.q1-callout-label {
    display: block;
    font-family: "Public Sans", system-ui, sans-serif;
    font-size: var(--q1-t-meta);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--q1-purple-deep);
    margin: 0 0 var(--q1-s-2);
}

.q1-callout p:last-child {
    margin-bottom: 0;
}

.q1-callout ul {
    margin: 0 0 var(--q1-s-3);
}

.q1-inline-question {
    background: var(--q1-purple-50);
    border: 1px solid var(--q1-purple-200);
    border-radius: var(--q1-radius);
    padding: var(--q1-s-5);
    margin: var(--q1-s-5) 0;
    font-size: var(--q1-t-body);
    line-height: 1.7;
}

.q1-inline-question-label {
    display: block;
    font-family: "Public Sans", system-ui, sans-serif;
    font-size: var(--q1-t-meta);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--q1-purple-deep);
    margin: 0 0 var(--q1-s-2);
}

.q1-inline-question p:last-child {
    margin-bottom: 0;
}

/* Closing frame paragraph at end of Five Forces */
.q1-section-frame {
    margin-top: var(--q1-s-6);
    padding: var(--q1-s-6);
    background: var(--q1-paper-warm);
    border: 1px solid var(--q1-rule);
    border-radius: var(--q1-radius);
    font-size: var(--q1-t-body);
    line-height: 1.7;
    font-family: "Spectral", Georgia, serif;
    color: var(--q1-ink);
}

/* ──────────────────────────────────────────────────────────────────────────
   Porter Five Forces — flat cards with leading numeral, no stripe
   ────────────────────────────────────────────────────────────────────────── */
.q1-force {
    border: 1px solid var(--q1-rule);
    border-radius: var(--q1-radius);
    margin-bottom: var(--q1-s-4);
    background: var(--q1-paper-warm);
    overflow: hidden;
    transition: border-color 0.15s var(--q1-easing);
}

.q1-force[open],
.q1-force:hover {
    border-color: var(--q1-purple-soft);
}

.q1-force > summary {
    cursor: pointer;
    padding: var(--q1-s-5);
    min-height: 64px;
    font-size: var(--q1-t-body);
    line-height: 1.55;
    list-style: none;
    user-select: none;
    display: flex;
    align-items: baseline;
    gap: var(--q1-s-3);
    font-family: "Public Sans", system-ui, sans-serif;
}

.q1-force > summary::-webkit-details-marker {
    display: none;
}

.q1-force > summary::before {
    counter-increment: forces;
    content: counter(forces, decimal-leading-zero);
    flex: 0 0 auto;
    font-family: "Spectral", Georgia, serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--q1-purple-deep);
    font-feature-settings: "tnum";
    min-width: 1.5rem;
}

.q1-force > summary::after {
    content: "";
    margin-left: auto;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 1.5px solid var(--q1-ink-mute);
    border-bottom: 1.5px solid var(--q1-ink-mute);
    transform: rotate(45deg);
    transition: transform 0.2s var(--q1-easing);
    align-self: center;
    flex: 0 0 auto;
}

.q1-force[open] > summary::after {
    transform: rotate(-135deg);
}

.q1-force > summary:hover {
    background: var(--q1-purple-50);
}

.q1-force > .q1-section-body {
    border-top: 1px solid var(--q1-rule);
    padding: var(--q1-s-5);
    margin: 0;
}

#five-forces,
.q1-forces-list {
    counter-reset: forces;
}

/* ──────────────────────────────────────────────────────────────────────────
   VRIO table
   ────────────────────────────────────────────────────────────────────────── */
.q1-vrio-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--q1-s-4) 0;
    font-size: 1.0625rem;            /* 17px — bumped from 15px for projection legibility */
    background: var(--q1-paper-warm);
    border: 1px solid var(--q1-rule);
    border-radius: var(--q1-radius);
    overflow: hidden;
}

.q1-vrio-table th,
.q1-vrio-table td {
    padding: var(--q1-s-5) var(--q1-s-4);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--q1-rule);
    line-height: 1.55;
}

.q1-vrio-table thead th {
    background: var(--q1-purple-50);
    font-family: "Public Sans", system-ui, sans-serif;
    font-weight: 700;
    color: var(--q1-purple-deep);
    font-size: var(--q1-t-meta);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--q1-purple-200);
}

.q1-vrio-table tbody th {
    font-weight: 500;
    color: var(--q1-ink);
    width: 32%;
    font-size: var(--q1-t-body);
}

.q1-vrio-table tbody tr:last-child th,
.q1-vrio-table tbody tr:last-child td {
    border-bottom: none;
}

.q1-vrio-verdict {
    font-weight: 700;
    font-size: 1.125rem;             /* 18px — bumped so the most-scanned column reads from across a meeting room */
    line-height: 1.35;
}

.q1-vrio-strong {
    color: var(--q1-pos);
}

.q1-vrio-temporary {
    /* darkened from oklch(0.52 0.13 70) — clears WCAG AA at any size against paper-warm */
    color: oklch(0.46 0.13 70);
}

.q1-vrio-parity {
    color: var(--q1-ink-soft);       /* lifted from --q1-ink-mute for readability */
}

/* VRIO table stacks to a vertical card layout when its column gets narrow.
   Triggers at <=720px (single-column phone/tablet) AND at 980-1100px (the
   range where the two-column layout shrinks the content column below the
   single-column 720px width). */
@media (max-width: 720px), (min-width: 980px) and (max-width: 1100px) {
    .q1-vrio-table,
    .q1-vrio-table thead,
    .q1-vrio-table tbody,
    .q1-vrio-table tr,
    .q1-vrio-table th,
    .q1-vrio-table td {
        display: block;
        width: 100%;
    }
    .q1-vrio-table thead {
        position: absolute;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        width: 1px;
        overflow: hidden;
        white-space: nowrap;
    }
    .q1-vrio-table tbody tr {
        border-bottom: 1px solid var(--q1-rule);
        padding: var(--q1-s-3) 0;
    }
    .q1-vrio-table tbody th {
        background: var(--q1-purple-50);
        padding: var(--q1-s-3);
        font-size: var(--q1-t-body);
        border-radius: 6px;
    }
    .q1-vrio-table td {
        padding: var(--q1-s-1) var(--q1-s-3);
        font-size: var(--q1-t-meta);
        border-bottom: none;
    }
    .q1-vrio-table td::before {
        content: attr(data-label) " ";
        font-weight: 600;
        color: var(--q1-ink-mute);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-right: 0.5em;
        font-size: 0.75rem;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Roadmap (Ray's three phases)
   ────────────────────────────────────────────────────────────────────────── */
.q1-roadmap {
    list-style: none;
    counter-reset: roadmap;
    padding: 0;
    margin: var(--q1-s-4) 0;
}

.q1-roadmap > li {
    counter-increment: roadmap;
    padding: var(--q1-s-6) var(--q1-s-6) var(--q1-s-6) calc(var(--q1-s-6) * 1.75);
    margin-bottom: var(--q1-s-4);
    background: var(--q1-paper-warm);
    border: 1px solid var(--q1-rule);
    border-radius: var(--q1-radius);
    position: relative;
    transition: border-color 0.15s var(--q1-easing);
}

.q1-roadmap > li:hover {
    border-color: var(--q1-purple-soft);
}

.q1-roadmap > li::before {
    content: counter(roadmap);
    position: absolute;
    left: var(--q1-s-6);
    top: var(--q1-s-6);
    font-family: "Spectral", Georgia, serif;
    font-size: 2rem;
    font-weight: 500;
    color: var(--q1-purple-deep);
    line-height: 1;
    font-feature-settings: "lnum";
}

.q1-roadmap h4 {
    margin: 0 0 var(--q1-s-3);
    font-size: var(--q1-t-h3);
    color: var(--q1-ink);
    font-weight: 600;
    line-height: 1.25;
}

.q1-roadmap ul {
    margin: 0;
    padding-left: 1.5rem;
}

/* ──────────────────────────────────────────────────────────────────────────
   Playing to Win cascade — leading numeral, NO side stripe
   ────────────────────────────────────────────────────────────────────────── */
.q1-cascade {
    list-style: none;
    counter-reset: cascade;
    padding: 0;
    margin: var(--q1-s-5) 0;
}

.q1-cascade > li {
    counter-increment: cascade;
    padding: var(--q1-s-6) var(--q1-s-6) var(--q1-s-6) calc(var(--q1-s-6) * 2.25);
    margin-bottom: var(--q1-s-5);
    background: var(--q1-paper-warm);
    border: 1px solid var(--q1-rule);
    border-radius: var(--q1-radius);
    position: relative;
}

.q1-cascade > li::before {
    content: counter(cascade);
    position: absolute;
    left: var(--q1-s-6);
    top: var(--q1-s-6);
    font-family: "Spectral", Georgia, serif;
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--q1-purple);
    line-height: 0.9;
    font-feature-settings: "lnum";
}

.q1-cascade h3 {
    margin: 0 0 var(--q1-s-4);
    color: var(--q1-ink);
    font-size: var(--q1-t-h3);
    font-weight: 600;
    line-height: 1.3;
}

.q1-cascade h4 {
    margin: var(--q1-s-6) 0 var(--q1-s-3);
    color: var(--q1-purple-deep);
    font-family: "Public Sans", system-ui, sans-serif;
    font-size: var(--q1-t-meta);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.q1-cascade h4:first-of-type {
    /* tighter top margin when an h4 is the first child after a paragraph */
    margin-top: var(--q1-s-5);
}

.q1-cascade ul {
    margin: 0 0 var(--q1-s-5);
    padding-left: 1.5rem;
}

.q1-cascade li {
    margin-bottom: var(--q1-s-4);
    line-height: 1.7;
}

.q1-cascade p {
    margin: 0 0 var(--q1-s-4);
    line-height: 1.7;
    font-size: var(--q1-t-body);
}

.q1-cascade-source {
    color: var(--q1-purple-deep);
    margin: 0 0 var(--q1-s-4) !important;
    font-weight: 700;
}

/* Strip the original "1." numbering written into the headings */
.q1-cascade h3::first-letter {
    /* no special drop cap — the numeral already lives outside the box */
}

/* ──────────────────────────────────────────────────────────────────────────
   Reflection prompts
   ────────────────────────────────────────────────────────────────────────── */
.q1-prompts {
    counter-reset: prompts;
    list-style: none;
    padding: 0;
    margin: var(--q1-s-4) 0;
}

.q1-prompts > li {
    counter-increment: prompts;
    padding: var(--q1-s-6) var(--q1-s-6) var(--q1-s-6) calc(var(--q1-s-6) * 1.85);
    margin-bottom: var(--q1-s-4);
    background: var(--q1-purple-50);
    border-radius: var(--q1-radius);
    line-height: 1.7;
    position: relative;
    border: 1px solid var(--q1-purple-200);
    font-size: var(--q1-t-body);
}

.q1-prompts > li::before {
    content: counter(prompts);
    position: absolute;
    left: var(--q1-s-6);
    top: var(--q1-s-6);
    font-family: "Spectral", Georgia, serif;
    font-size: 1.875rem;
    font-weight: 500;
    color: var(--q1-purple-deep);
    line-height: 1;
}

.q1-prompts strong {
    display: block;
    margin-bottom: var(--q1-s-3);
    font-family: "Spectral", Georgia, serif;
    font-weight: 600;
    font-size: var(--q1-t-h3);
    color: var(--q1-ink);
    line-height: 1.3;
}

.q1-prompts ul {
    margin: var(--q1-s-4) 0 0;
    padding-left: 1.5rem;
}

.q1-prompts ul li {
    margin-bottom: var(--q1-s-4);
    line-height: 1.7;
}

.q1-prompts ul li:last-child {
    margin-bottom: 0;
}

.q1-prompt-note {
    margin: var(--q1-s-3) 0 0;
    font-size: var(--q1-t-body);
    color: var(--q1-ink-soft);
    line-height: 1.65;
}

.q1-dashboard-link {
    margin: var(--q1-s-4) 0 0;
    padding-top: var(--q1-s-3);
    border-top: 1px dashed var(--q1-purple-200);
    font-size: var(--q1-t-meta);
    color: var(--q1-ink-mute);
    letter-spacing: 0.02em;
}

.q1-dashboard-link a {
    color: var(--q1-purple-deep);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.q1-dashboard-link a:hover {
    color: var(--q1-purple);
}

abbr[title] {
    text-decoration: underline dotted;
    text-underline-offset: 0.18em;
    cursor: help;
}

/* ──────────────────────────────────────────────────────────────────────────
   Bibliography
   ────────────────────────────────────────────────────────────────────────── */
/* The .q1-section base rule already provides the rule + padding-top. */
.q1-bibliography {
    margin-top: 0;
}

.q1-sources-link {
    border-top: 1px solid var(--q1-rule);
    padding-top: var(--q1-s-5);
    margin-top: var(--q1-s-6);
    font-size: var(--q1-t-meta);
    color: var(--q1-ink-soft);
}

.q1-bibliography-list {
    margin: var(--q1-s-5) 0;
    padding-left: 1.5rem;
    line-height: 1.7;
    font-size: var(--q1-t-meta);
    color: var(--q1-ink-soft);
}

.q1-bibliography-list li {
    margin-bottom: var(--q1-s-4);
    padding-left: var(--q1-s-1);
}

.q1-bibliography-list li:target {
    background: var(--q1-purple-100);
    border-radius: 4px;
    padding: var(--q1-s-1) var(--q1-s-2);
    margin-left: -0.5rem;
}

.q1-method-note {
    margin-top: var(--q1-s-6);
    padding: var(--q1-s-6);
    background: var(--q1-paper-warm);
    border: 1px solid var(--q1-rule);
    border-radius: var(--q1-radius);
    font-size: var(--q1-t-meta);
    line-height: 1.7;
    color: var(--q1-ink-soft);
}

/* ──────────────────────────────────────────────────────────────────────────
   Per-section notes
   ────────────────────────────────────────────────────────────────────────── */
.q1-notes {
    margin-top: var(--q1-s-4);
    padding-top: var(--q1-s-3);
    border-top: 1px dashed var(--q1-rule);
}

.q1-notes-toggle {
    background: none;
    border: none;
    color: var(--q1-purple-deep);
    font-family: inherit;
    font-size: var(--q1-t-meta);
    font-weight: 600;
    cursor: pointer;
    padding: var(--q1-s-2) 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: var(--q1-s-2);
}

.q1-notes-toggle::before {
    content: "✎";
    font-size: 1rem;
}

.q1-notes-toggle:hover {
    color: var(--q1-purple);
}

.q1-notes-editor {
    margin-top: var(--q1-s-2);
}

.q1-notes-textarea,
.q1-prep-textarea {
    width: 100%;
    padding: var(--q1-s-3);
    border: 1px solid var(--q1-rule-strong);
    border-radius: 6px;
    font-family: inherit;
    font-size: var(--q1-t-body);
    line-height: 1.5;
    color: var(--q1-ink);
    background: white;
    resize: vertical;
    box-sizing: border-box;
    min-height: 80px;
}

.q1-notes-textarea:focus,
.q1-prep-textarea:focus {
    outline: 2px solid var(--q1-purple);
    outline-offset: 2px;
    border-color: var(--q1-purple);
}

.q1-notes-caption {
    margin: var(--q1-s-1) 0 0;
    font-size: var(--q1-t-meta);
    color: var(--q1-ink-mute);
    font-style: italic;
}

/* ──────────────────────────────────────────────────────────────────────────
   Footer
   ────────────────────────────────────────────────────────────────────────── */
.q1-footer {
    margin-top: var(--q1-s-9);
    padding-top: var(--q1-s-5);
    border-top: 1px solid var(--q1-rule);
    text-align: left;
}

.q1-footer-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--q1-s-4);
    margin-bottom: var(--q1-s-4);
}

.q1-footer-logo {
    height: 32px;
    width: auto;
    opacity: 0.85;
}

.q1-footer-logo-abound {
    height: 38px;
}

.q1-footer-divider {
    color: var(--q1-ink-mute);
    font-size: 1rem;
}

.q1-footer-note {
    font-size: var(--q1-t-meta);
    color: var(--q1-ink-mute);
    margin: 0 0 var(--q1-s-2);
    font-style: italic;
    font-family: "Spectral", Georgia, serif;
    max-width: 65ch;
}

.q1-footer-meta {
    font-size: var(--q1-t-meta);
    color: var(--q1-ink-mute);
    margin: 0;
}

.q1-link-btn {
    background: none;
    border: none;
    color: var(--q1-purple-deep);
    font-family: inherit;
    font-size: var(--q1-t-meta);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: color-mix(in oklch, var(--q1-purple-deep) 35%, transparent);
    text-underline-offset: 2px;
    padding: var(--q1-s-2) 0;
    min-height: 44px;
}

.q1-link-btn:hover {
    color: var(--q1-purple);
    text-decoration-color: var(--q1-purple);
}

/* ──────────────────────────────────────────────────────────────────────────
   Floating prep panel
   ────────────────────────────────────────────────────────────────────────── */
.q1-prep-trigger {
    position: fixed;
    bottom: var(--q1-s-4);
    right: var(--q1-s-4);
    background: var(--q1-purple-deep);
    color: white;
    border: none;
    padding: var(--q1-s-3) var(--q1-s-4);
    border-radius: 999px;
    font-family: inherit;
    font-size: var(--q1-t-meta);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--q1-s-2);
    box-shadow:
        0 1px 2px oklch(0 0 0 / 0.1),
        0 8px 24px oklch(0.36 0.13 285 / 0.28);
    z-index: 50;
    transition: transform 0.2s var(--q1-easing), box-shadow 0.2s var(--q1-easing);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    min-height: 44px;
}

.q1-prep-trigger:hover {
    transform: translateY(-1px);
    box-shadow:
        0 1px 2px oklch(0 0 0 / 0.12),
        0 12px 32px oklch(0.36 0.13 285 / 0.34);
}

.q1-prep-trigger.hidden {
    display: none;
}

.q1-prep-trigger-icon {
    font-size: 1rem;
}

.q1-prep-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    max-width: 100vw;
    height: 100vh;
    background: var(--q1-paper);
    box-shadow: -12px 0 48px oklch(0 0 0 / 0.18);
    transform: translateX(100%);
    transition: transform 0.32s var(--q1-easing);
    display: flex;
    flex-direction: column;
    z-index: 60;
    border-left: 1px solid var(--q1-rule);
}

.q1-prep-drawer:not(.hidden) {
    transform: translateX(0);
}

.q1-prep-drawer.hidden {
    pointer-events: none;
}

.q1-prep-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--q1-s-4) var(--q1-s-5);
    border-bottom: 1px solid var(--q1-rule);
    background: var(--q1-purple-50);
}

.q1-prep-drawer-head h2 {
    margin: 0;
    font-family: "Spectral", Georgia, serif;
    font-size: var(--q1-t-h3);
    font-weight: 500;
    color: var(--q1-purple-deep);
}

.q1-prep-close {
    background: none;
    border: none;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--q1-ink-soft);
    cursor: pointer;
    padding: var(--q1-s-1) var(--q1-s-2);
    border-radius: 6px;
    min-width: 36px;
    min-height: 36px;
}

.q1-prep-close:hover {
    color: var(--q1-ink);
    background: var(--q1-paper);
}

.q1-prep-drawer-body {
    padding: var(--q1-s-5);
    overflow-y: auto;
    flex: 1;
}

.q1-prep-intro {
    margin: 0 0 var(--q1-s-4);
    font-size: var(--q1-t-meta);
    line-height: 1.5;
    color: var(--q1-ink-soft);
    font-family: "Spectral", Georgia, serif;
    font-style: italic;
}

.q1-prep-prompts {
    counter-reset: drawer-prompts;
    list-style: none;
    padding: 0;
    margin: 0 0 var(--q1-s-5);
    font-size: var(--q1-t-meta);
    line-height: 1.45;
}

.q1-prep-prompts li {
    counter-increment: drawer-prompts;
    padding: var(--q1-s-3) 0 var(--q1-s-3) calc(var(--q1-s-5) + 0.5rem);
    border-bottom: 1px solid var(--q1-rule);
    position: relative;
    color: var(--q1-ink);
}

.q1-prep-prompts li:last-child {
    border-bottom: none;
}

.q1-prep-prompts li::before {
    content: counter(drawer-prompts, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: var(--q1-s-3);
    font-family: "Spectral", Georgia, serif;
    color: var(--q1-purple-deep);
    font-weight: 500;
    font-size: 1.0625rem;
    line-height: 1;
    font-feature-settings: "tnum";
}

.q1-prep-label {
    display: block;
    font-family: "Public Sans", system-ui, sans-serif;
    font-size: var(--q1-t-meta);
    font-weight: 700;
    color: var(--q1-ink);
    margin-bottom: var(--q1-s-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.q1-prep-textarea {
    min-height: 180px;
}

@media (max-width: 767px) {
    .q1-prep-drawer {
        width: 100vw;
        height: 88vh;
        top: auto;
        bottom: 0;
        right: 0;
        transform: translateY(100%);
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border-left: none;
        border-top: 1px solid var(--q1-rule);
    }
    .q1-prep-drawer:not(.hidden) {
        transform: translateY(0);
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Small-screen tightening (phones <=480px)
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .q1-exec-list > li {
        padding-left: var(--q1-s-7);
    }
    .q1-exec-list > li::before {
        font-size: 1.5rem;
    }
    .q1-prompts > li {
        padding: var(--q1-s-4) var(--q1-s-4) var(--q1-s-4) var(--q1-s-7);
    }
    .q1-prompts > li::before {
        font-size: 1.5rem;
        left: var(--q1-s-4);
        top: var(--q1-s-4);
    }
    .q1-prompts strong {
        font-size: 1.25rem;
    }
    .q1-callout {
        padding: var(--q1-s-4);
    }
    .q1-inline-question {
        padding: var(--q1-s-4);
    }
    .q1-section-frame {
        padding: var(--q1-s-4);
    }
    .q1-method-note {
        padding: var(--q1-s-4);
    }
    .q1-cascade > li {
        padding: var(--q1-s-4) var(--q1-s-4) var(--q1-s-4) var(--q1-s-7);
    }
    .q1-cascade > li::before {
        font-size: 2rem;
        left: var(--q1-s-4);
        top: var(--q1-s-4);
    }
    .q1-roadmap > li {
        padding: var(--q1-s-4) var(--q1-s-4) var(--q1-s-4) var(--q1-s-7);
    }
    .q1-roadmap > li::before {
        font-size: 1.5rem;
        left: var(--q1-s-4);
        top: var(--q1-s-4);
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Reduced motion + high-contrast support
   ────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .q1-read *,
    .q1-prep-drawer,
    .q1-prep-trigger {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

@media (forced-colors: active) {
    .q1-read,
    .q1-prep-drawer {
        forced-color-adjust: none;
    }
    .q1-orientation,
    .q1-callout,
    .q1-section-frame,
    .q1-force,
    .q1-roadmap > li,
    .q1-cascade > li,
    .q1-prompts > li,
    .q1-vrio-table {
        border: 1px solid CanvasText;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Print stylesheet (full + headline-only)
   ────────────────────────────────────────────────────────────────────────── */
@media print {
    @page {
        margin: 0.55in 0.6in;
    }

    .q1-print-controls,
    .q1-prep-trigger,
    .q1-prep-drawer,
    .site-nav,
    .skip-nav,
    #password-overlay,
    .q1-notes,
    .q1-link-btn,
    .q1-toc {
        display: none !important;
    }

    body {
        background: white;
        color: black;
        font-size: 9.5pt;
        line-height: 1.35;
    }

    .q1-layout {
        display: block;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .q1-read {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }

    h2, h3, h4 {
        page-break-after: avoid;
        break-after: avoid;
    }

    p, ul, ol, li {
        orphans: 3;
        widows: 3;
    }

    /* Force-open every disclosure for print. */
    details > summary {
        display: none !important;
    }
    details:not([open]) > *:not(summary) {
        display: revert !important;
    }
    details {
        display: block !important;
    }

    .q1-section,
    .q1-headline,
    .q1-orientation {
        background: white !important;
        border: none !important;
    }

    .q1-section-detail {
        margin-top: 0.4rem;
    }

    .q1-force,
    .q1-callout,
    .q1-section-frame {
        border: 1px solid #ccc !important;
        background: white !important;
        page-break-inside: avoid;
    }

    .q1-roadmap > li,
    .q1-cascade > li,
    .q1-prompts > li {
        border: 1px solid #ccc !important;
        background: white !important;
    }

    .q1-orientation {
        border: 1px solid #ccc !important;
        background: #fafafa !important;
    }

    .q1-vrio-table {
        page-break-inside: avoid;
    }

    .q1-footer {
        margin-top: var(--q1-s-4);
    }

    .q1-footer-logo {
        opacity: 1;
    }

    a {
        color: black;
        text-decoration: underline;
    }

    sup a {
        background: none !important;
        text-decoration: none;
        color: black !important;
        padding: 0;
    }

    .q1-orientation-tag {
        background: white !important;
    }
}

@media print {
    body.print-headline-only #exec-summary,
    body.print-headline-only .q1-footer,
    body.print-headline-only .q1-header {
        display: block !important;
    }
    body.print-headline-only .q1-section:not(#exec-summary) {
        display: none !important;
    }
    body.print-headline-only .q1-bibliography {
        display: none !important;
    }
}

/* Skip-link visible on focus (overrides any global default). */
.skip-nav {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 100;
}

.skip-nav:focus,
.skip-nav:focus-visible {
    position: fixed;
    top: 1rem;
    left: 1rem;
    width: auto;
    height: auto;
    padding: 0.625rem 1rem;
    background: var(--q1-purple-deep);
    color: white;
    font-size: var(--q1-t-meta);
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    box-shadow: 0 8px 24px oklch(0 0 0 / 0.18);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ──────────────────────────────────────────────────────────────────────────
   Utilities — formerly inherited from styles.css. Restated here so this page
   ships a single stylesheet and the password gate, drawer, and skip link work
   without the dashboard sheet loading.
   ────────────────────────────────────────────────────────────────────────── */
.hidden {
    display: none;
}

/* Keep the gate utility as well in case anything ever relies on the more
   specific selector. */
.q1-read.hidden {
    display: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Password modal styles intentionally live in styles.css so this page's gate
   matches the rest of the site. Do not restate them here. */