/* =========================================================================
   Org Access Assessment (landing page)
   Page-scoped styles. Reuses the site token system in ../../css/styles.css.
   No net-new tokens, fonts, or colors are introduced: every value below
   resolves to an existing site variable.
   ========================================================================= */

/* ---- Self-hosted fonts ---------------------------------------------------
   Served from the shared /fonts/ path, not copied into this directory. The same
   four files previously existed three times over under different URLs, so a
   visitor arriving from /bio re-downloaded every one of them here for zero
   cache reuse. One path means one download per visitor per font.
   ------------------------------------------------------------------------ */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 700;
    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;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('/fonts/jetbrains-mono-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;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Page scope --------------------------------------------------------- */
.oaa-page {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.oaa-mono {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-feature-settings: "tnum" 1;
}

/* ---- Shared page helpers ------------------------------------------------ */
.oaa-narrow {
    max-width: 760px;
}

.oaa-prose {
    font-size: 17px;
    color: var(--text-muted);
    line-height: 1.75;
    margin: 0 0 20px;
}
.oaa-prose:last-child {
    margin-bottom: 0;
}

/* No section-alt helper here on purpose: the site alternates section
   backgrounds automatically via .section:nth-child(even) in ../../css/styles.css.
   Adding an explicit alt class fights that rule and stacks alt on alt. */

.oaa-btn {
    display: inline-block;
    text-decoration: none;
}

/* ---- Hero --------------------------------------------------------------- */
.oaa-hero {
    position: relative;
    padding: 112px 0 72px;
    overflow: hidden;
}

/* Matches .oaa-narrow so the hero and body copy share one left edge. This page
   has no full-width components to justify a wider hero. */
.oaa-hero-inner {
    max-width: 760px;
}

.oaa-eyebrow {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--accent-primary);
    margin: 0 0 22px;
}

.oaa-hero-title {
    font-size: clamp(34px, 5.6vw, 58px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.06;
    color: var(--text-main);
    margin: 0 0 24px;
}

/* Hook is the emphasis line: it tells a first-time reader what the engagement
   does, before they meet the commercial terms. One step down from H1, full
   text color. */
.oaa-hero-hook {
    font-size: clamp(21px, 2.7vw, 28px);
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.35;
    letter-spacing: -0.015em;
    max-width: 26ch;
    margin: 0 0 16px;
}

/* Spec line is supporting detail, deliberately subordinate to the hook:
   smaller, regular weight, muted. It carries the commercial terms (fixed
   price, scoped on a call), so it stays plainly legible. */
.oaa-hero-spec {
    font-size: 17px;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 34px;
}

.oaa-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
}

/* Subtle, staggered hero fade-in (disabled under reduced motion) */
@keyframes oaa-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
.oaa-hero-inner > * {
    animation: oaa-fade-in 0.6s ease both;
}
.oaa-hero-inner > *:nth-child(2) { animation-delay: 0.06s; }
.oaa-hero-inner > *:nth-child(3) { animation-delay: 0.12s; }
.oaa-hero-inner > *:nth-child(4) { animation-delay: 0.18s; }
.oaa-hero-inner > *:nth-child(5) { animation-delay: 0.24s; }

/* Early attribution. Deliberately small and muted: a cold visitor decides
   whether to trust an unknown vendor in the first screen, but this must not
   compete with the hook or push the spec line below the fold at 375x812. The full
   credibility block stays where it is, near the CTA. */
.oaa-hero-attrib {
    font-size: 14.5px;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.5;
    margin: -6px 0 14px;
}

/* ---- Secondary text link (ungated asset) -------------------------------- */
.oaa-secondary-link {
    font-size: 15.5px;
    font-weight: 500;
    color: var(--accent-primary);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: color 0.18s ease, opacity 0.18s ease;
}
.oaa-secondary-link:hover,
.oaa-secondary-link:focus-visible {
    color: var(--accent-hover);
}

/* ---- "You receive" list ------------------------------------------------- */
.oaa-receive {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.oaa-receive-item {
    position: relative;
    padding: 18px 22px 18px 54px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--card-bg-soft);
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.65;
}

/* Numbered marker, mono, matches the site's numeric treatment */
.oaa-receive-item::before {
    counter-increment: oaa-receive;
    content: counter(oaa-receive, decimal-leading-zero);
    position: absolute;
    left: 20px;
    top: 18px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent-primary);
}

.oaa-receive {
    counter-reset: oaa-receive;
}

/* ---- Sample report link -------------------------------------------------
   Sits between the deliverables list and the disclosure. Body weight, not a
   CTA: it supports the list above it rather than competing with the booking
   button. Matches .saa-note on the Architecture Assessment page.
   ------------------------------------------------------------------------ */
.oaa-sample-note {
    margin: 22px 0 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--text-muted);
}

.oaa-sample-note a {
    color: var(--accent-primary);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.oaa-sample-note a:hover,
.oaa-sample-note a:focus-visible {
    color: var(--accent-hover);
}

/* ---- Disclosure --------------------------------------------------------- */
.oaa-disclosure {
    margin: 32px 0 0;
    padding: 20px 24px;
    border: 1px solid var(--card-border);
    border-left: 3px solid var(--text-soft);
    border-radius: 10px;
    background: var(--card-bg-soft);
    color: var(--text-muted);
    font-size: 15.5px;
    line-height: 1.7;
}

/* ---- Credit clause (emphasized block, not a list item) ------------------ */
.oaa-credit {
    margin: 0;
    padding: 26px 28px;
    border: 1px solid var(--card-border);
    border-left: 3px solid var(--accent-primary);
    border-radius: 12px;
    background: var(--card-bg-soft);
}

.oaa-credit-lead {
    margin: 0 0 10px;
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--text-main);
}

.oaa-credit-body {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-muted);
}

/* ---- Who this is for ----------------------------------------------------
   Two columns on desktop, stacked on mobile. The disqualifier column is
   deliberately given equal visual weight: its job is to let the wrong buyer
   rule themselves out, which only works if it is as readable as the fit list.
   ------------------------------------------------------------------------ */
.oaa-fit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 36px;
}

.oaa-fit-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent-primary);
}

/* Muted rule rather than a red one: this is a boundary, not a warning. */
.oaa-fit-title-no {
    border-bottom-color: var(--text-soft);
}

.oaa-fit-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.oaa-fit-list li {
    position: relative;
    padding-left: 20px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--text-muted);
}

.oaa-fit-list li::before {
    content: "+";
    position: absolute;
    left: 0;
    top: -1px;
    font-weight: 700;
    color: var(--accent-primary);
}

.oaa-fit-list-no li::before {
    content: "\2013";
    color: var(--text-soft);
}

/* Section-level redirect beneath the disqualifier list. Body text, not a
   callout: styling it as a CTA would compete with the booking button and undo
   the credibility the closed-door list buys. */
.oaa-fit-note {
    grid-column: 1 / -1;
    margin: 22px 0 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-muted);
}

.oaa-fit-note a {
    color: var(--accent-primary);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.oaa-fit-note a:hover,
.oaa-fit-note a:focus-visible {
    color: var(--accent-hover);
}

/* ---- Other engagements callout -----------------------------------------
   Borrows the .oaa-credit shape (bordered, left accent rule, bold lead over
   muted body) so the page has one callout language rather than two. Text
   links only, never a button: see the comment at this block in index.html.
   ------------------------------------------------------------------------ */
.oaa-also {
    margin: 30px 0 0;
    padding: 24px 26px;
    border: 1px solid var(--card-border);
    border-left: 3px solid var(--accent-primary);
    border-radius: 12px;
    background: var(--card-bg-soft);
}

.oaa-also-lead {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--text-main);
}

.oaa-also-body {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--text-muted);
}

.oaa-also-body a {
    color: var(--accent-primary);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.oaa-also-body a:hover,
.oaa-also-body a:focus-visible {
    color: var(--accent-hover);
}

/* Scannable exits for someone who has decided this engagement is not theirs. */
.oaa-also-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 16px 0 0;
}

.oaa-also-links a {
    font-size: 15px;
    font-weight: 600;
    color: var(--accent-primary);
    text-decoration: none;
}

.oaa-also-links a::after {
    content: " \2192";
    transition: transform 0.18s ease;
}

.oaa-also-links a:hover,
.oaa-also-links a:focus-visible {
    color: var(--accent-hover);
}

@media (max-width: 760px) {
    .oaa-also {
        padding: 20px 18px;
    }
}

/* ---- FAQ ----------------------------------------------------------------
   Same definition-list treatment as the retired readiness review page, so the
   pattern is reused rather than reinvented. Plain markup on purpose: no
   accordion, so every answer is readable with JavaScript disabled and is
   present in the page for search engines.
   ------------------------------------------------------------------------ */
.oaa-faq {
    border-top: 1px solid var(--card-border);
}

.oaa-faq-item {
    padding: 22px 0;
    border-bottom: 1px solid var(--card-border);
}

.oaa-faq-q {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 8px;
}

.oaa-faq-a {
    font-size: 15.5px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* ---- Who delivers this --------------------------------------------------- */
.oaa-bio-line {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-muted);
    margin: 0 0 12px;
}

.oaa-bio-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 16px 0 0;
}

/* Text links, deliberately subordinate to the booking CTA. */
.oaa-bio-links a {
    font-size: 15px;
    font-weight: 500;
    color: var(--accent-primary);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}

.oaa-bio-links a:hover,
.oaa-bio-links a:focus-visible {
    color: var(--accent-hover);
}

/* ---- Credit destination -------------------------------------------------- */
.oaa-credit-note {
    margin: 16px 0 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-muted);
}

/* ---- Final CTA band ----------------------------------------------------- */
.oaa-cta-band {
    padding: 92px 0;
    background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
}
.oaa-cta-inner {
    text-align: center;
}
.oaa-cta-title {
    max-width: 24ch;
    margin: 0 auto 28px;
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: #ffffff;
}
/* White button on the colored band (higher specificity than .btn-primary) */
.oaa-cta-btn.btn-primary {
    background: #ffffff;
    color: var(--accent-hover);
}
.oaa-cta-btn.btn-primary:hover {
    background: rgba(255, 255, 255, 0.9);
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 760px) {
    .oaa-hero {
        padding: 88px 0 56px;
    }
    /* Stack the fit columns; side by side leaves both too narrow to read. */
    .oaa-fit {
        grid-template-columns: 1fr;
        gap: 26px;
    }
    .oaa-receive-item {
        padding: 16px 18px 16px 48px;
    }
    .oaa-receive-item::before {
        left: 16px;
        top: 16px;
    }
    .oaa-credit {
        padding: 22px 20px;
    }
    .oaa-cta-band {
        padding: 72px 0;
    }
}

@media (max-width: 480px) {
    .oaa-page .container {
        padding: 0 20px;
    }
    .oaa-hero-actions {
        gap: 14px 18px;
    }
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .oaa-page *,
    .oaa-page *::before,
    .oaa-page *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .oaa-hero-inner > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}