/* Public site styles (Epic 18, Story 18.1 — UX direction 1 «La mañana en una
   tarjeta»). Mobile-first, single 576px breakpoint; the 2-second test is
   judged at 375px. Design tokens mirror ramon.css. No animation — calm. */

/* ------------------------------------------------------------------ fonts */
/* Self-hosted Poppins (GDPR + speed — no Google Fonts CDN on public pages). */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/poppins-400-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: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/poppins-400-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: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/poppins-600-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: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/poppins-600-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;
}

/* ----------------------------------------------------------------- tokens */
:root {
    /* shared with ramon.css */
    --color-primary-action: #e92063;
    --color-chrome-bg: #0d1a15;
    --color-body-bg: #f8f6f6;
    --color-surface: #ffffff;
    --radius-card: 16px;

    /* site-only */
    /* The app's light-rose «you're with the AI» session tint (18.3) — a
       TINT, never the action rose; ramon.css isn't loaded on site pages. */
    --color-session-tint: #fdf2f6;
    --color-ink: #1c2321;
    --color-ink-soft: #5a6662;
    --color-on-chrome: #ffffff;
    --color-on-chrome-soft: rgba(255, 255, 255, 0.72);
    --pill-overdue-bg: #fdecec;
    --pill-overdue-fg: #c62828;
    --pill-due-bg: #fff6e8;
    --pill-due-fg: #a8660a;
    --pill-answered-bg: #eaf6ef;
    --pill-answered-fg: #1d8a4e;
    --space-section: 3.5rem;
    --site-max-width: 44rem;

    /* docs (Story 18.4) */
    --docs-max-width: 62rem;
    --docs-sidebar-bg: #f0eeee;
    --docs-hairline: rgba(13, 26, 21, 0.08);
}

/* ------------------------------------------------------------------- base */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: auto; /* calm: no smooth-scroll animation */
}

.site-body {
    margin: 0;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-weight: 400;
    color: var(--color-ink);
    background-color: var(--color-body-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.site-body a:focus-visible,
.site-body .site-cta:focus-visible {
    outline: 3px solid var(--color-primary-action);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ----------------------------------------------------------------- header */
/* Mobile-first: two rows — brand + login, then nav links + locale switch.
   Collapses to a single slim row at the 576px breakpoint. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1rem;
    padding: 0.6rem 1rem;
    background-color: var(--color-chrome-bg);
    color: var(--color-on-chrome);
}

.site-brand {
    order: 1;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--color-on-chrome);
    text-decoration: none;
}

.site-nav {
    order: 3;
    display: flex;
    gap: 0.9rem;
}

.site-locales {
    order: 4;
    margin-left: auto;
}

.site-login {
    order: 2;
    margin-left: auto;
}

.site-nav-link {
    color: var(--color-on-chrome-soft);
    text-decoration: none;
    font-size: 0.85rem;
    padding: 0.35rem 0;
}

.site-nav-link:hover {
    color: var(--color-on-chrome);
}

.site-locales {
    display: flex;
    gap: 0.45rem;
}

@media (min-width: 576px) {
    .site-header {
        flex-wrap: nowrap;
    }

    .site-nav {
        order: 2;
        margin-left: auto;
    }

    .site-locales {
        order: 3;
        margin-left: 0;
    }

    .site-login {
        order: 4;
        margin-left: 0;
    }
}

.site-locale {
    color: var(--color-on-chrome-soft);
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    padding: 0.35rem 0.15rem;
}

.site-locale.current {
    color: var(--color-on-chrome);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Quiet login entry for existing users — white outline pill, never rose. */
.site-login {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0.2rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    color: var(--color-on-chrome);
    text-decoration: none;
    font-size: 0.8rem;
    white-space: nowrap;
}

.site-login:hover {
    border-color: var(--color-on-chrome);
}

/* ------------------------------------------------------------------- main */
.site-main {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 0 1rem;
}

.site-main section {
    padding: var(--space-section) 0 0;
}

/* ------------------------------------------------------------------- hero */
.site-hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.site-eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary-action);
}

.site-headline {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.site-lede {
    margin: 0 0 2rem;
    max-width: 36rem;
    font-size: 1.05rem;
    color: var(--color-ink-soft);
}

/* ------------------------------------------- morning-summary artifact card */
.msa {
    width: 100%;
    background-color: var(--color-surface);
    border-radius: var(--radius-card);
    box-shadow: 0 8px 30px rgba(13, 26, 21, 0.08);
    padding: 1.1rem 1.1rem 0.9rem;
}

.msa-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.msa-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.msa-date {
    font-size: 0.75rem;
    color: var(--color-ink-soft);
}

/* Example panels — all three are in the HTML; a client-side Datastar signal
   shows one at a time. min-height keeps the hero CTA from bouncing when the
   visible example changes. */
.msa-panels {
    min-height: 15rem;
}

.msa-ex-label {
    margin: 0 0 0.3rem;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--color-ink-soft);
}

/* .msa prefix outranks the page-level `.site-main section` padding rule. */
.msa .msa-sec {
    padding: 0.45rem 0;
}

.msa-sec + .msa-sec {
    border-top: 1px solid rgba(13, 26, 21, 0.06);
}

.msa-sec-title {
    margin: 0 0 0.2rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-ink-soft);
}

/* Mirrors the app's .summary-prose: the LLM voice line, italic. */
.msa-prose {
    margin: 0 0 0.3rem;
    font-style: italic;
    font-size: 0.85rem;
    color: var(--color-ink-soft);
}

.msa-chats {
    list-style: none;
    margin: 0;
    padding: 0;
}

.msa-chat {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.25rem 0;
    font-size: 0.85rem;
}

.msa-chat-label {
    font-weight: 600;
}

.msa-chat-count {
    flex: 1;
    font-size: 0.78rem;
    color: var(--color-ink-soft);
}

/* Counterparty word marker — the word carries the meaning, never rose. */
.msa-cp {
    font-size: 0.72rem;
    color: var(--pill-due-fg);
    white-space: nowrap;
}

.msa-chat-amount {
    font-weight: 600;
    white-space: nowrap;
}

.msa-pill {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.msa-pill-overdue {
    background-color: var(--pill-overdue-bg);
    color: var(--pill-overdue-fg);
}

.msa-pill-due {
    background-color: var(--pill-due-bg);
    color: var(--pill-due-fg);
}

.msa-pill-answered {
    background-color: var(--pill-answered-bg);
    color: var(--pill-answered-fg);
}

.msa-fin {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: 0.7rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(13, 26, 21, 0.1);
}

.msa-fin-cell {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.msa-fin-label {
    font-size: 0.7rem;
    color: var(--color-ink-soft);
}

.msa-fin-value {
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
}

/* Settled sub-line — the already-paid/collected split, app vocabulary. */
.msa-fin-done {
    font-size: 0.7rem;
    color: var(--color-ink-soft);
    white-space: nowrap;
}

.msa-fin-net {
    color: var(--pill-answered-fg);
}

.msa-fin-net-neg {
    color: var(--pill-overdue-fg);
}

/* Example navigation — arrows + dots, ink on surface (never rose; the CTA
   owns the viewport's one rose element). Hidden without JS via inline
   display:none + data-show. */
.msa-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.8rem;
}

.msa-arrow {
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(13, 26, 21, 0.12);
    border-radius: 999px;
    background: transparent;
    color: var(--color-ink);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.msa-dots {
    display: flex;
}

/* 10px dot with a padded ~44px hit area via content-box background clip. */
.msa-dot {
    width: 2.6rem;
    height: 2.6rem;
    padding: 1rem;
    border: none;
    border-radius: 999px;
    background-color: rgba(13, 26, 21, 0.18);
    background-clip: content-box;
    cursor: pointer;
}

.msa-dot-on {
    background-color: var(--color-ink);
}

/* -------------------------------------------------------------------- CTA */
/* The ONE rose element per viewport. ≥44px touch target. */
.site-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: 2rem;
    padding: 0.75rem 1.8rem;
    border-radius: 999px;
    background-color: var(--color-primary-action);
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(233, 32, 99, 0.35);
}

/* ------------------------------------------------ definition (FR102, 18.5) */
/* The one-sentence «What is Ramon» retell — quiet plain prose, no heading,
   no rose (the hero CTA owns the viewport's one rose element). */
.site-definition {
    padding-bottom: var(--space-section);
}

.site-definition p {
    margin: 0;
    max-width: 36rem;
    color: var(--color-ink-soft);
    line-height: 1.6;
}

/* -------------------------------------- conviction sections (18.3, FR99) */
/* Shared rhythm: every section already gets --space-section from
   `.site-main section`; whitespace separates — no divider lines. */
.site-section-title {
    margin: 0 0 0.75rem;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;
}

.site-section-lede {
    margin: 0 0 1.4rem;
    max-width: 36rem;
    color: var(--color-ink-soft);
}

/* Financial story — white proof card reusing the .msa-fin cell idiom. */
.fin-story-card {
    max-width: 32rem;
    background-color: var(--color-surface);
    border-radius: var(--radius-card);
    box-shadow: 0 6px 20px rgba(13, 26, 21, 0.06);
    padding: 1.1rem 1.1rem 1rem;
}

.fin-story-card .msa-fin {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.fin-story-settled {
    margin: 0.8rem 0 0;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(13, 26, 21, 0.1);
    font-size: 0.8rem;
    color: var(--color-ink-soft);
}

/* Tell-Ramon session block — the light-rose tint (never the action rose).
   Static, no animation (calm; the reduced-motion guard below stays moot). */
.site-main .tell-ramon {
    margin-top: var(--space-section);
    padding: 1.5rem 1.25rem;
    border-radius: var(--radius-card);
    background-color: var(--color-session-tint);
}

.tell-exchange {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 28rem;
}

.tell-bubble {
    margin: 0;
    max-width: 85%;
    padding: 0.6rem 0.9rem;
    border-radius: 14px;
    font-size: 0.9rem;
    background-color: var(--color-surface);
    box-shadow: 0 2px 8px rgba(13, 26, 21, 0.05);
}

.tell-bubble-user {
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.tell-bubble-ramon {
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.tell-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.3rem;
    padding: 0.55rem 0.9rem;
    border-radius: 10px;
    background-color: var(--color-surface);
    font-size: 0.85rem;
}

/* The paid state: word + tick carry it; green is reinforcement only. */
.tell-result-state {
    font-weight: 600;
    color: var(--pill-answered-fg);
    white-space: nowrap;
}

/* Shared-chat negotiation card — msa row idiom, per-row attribution. */
.shared-chat-card {
    list-style: none;
    margin: 0;
    padding: 0.35rem 1.1rem;
    max-width: 32rem;
    background-color: var(--color-surface);
    border-radius: var(--radius-card);
    box-shadow: 0 6px 20px rgba(13, 26, 21, 0.06);
}

.shared-chat-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0;
}

.shared-chat-row + .shared-chat-row {
    border-top: 1px solid rgba(13, 26, 21, 0.06);
}

.shared-chat-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.shared-chat-title {
    font-size: 0.9rem;
    font-weight: 600;
}

.shared-chat-attr {
    font-size: 0.8rem;
    color: var(--color-ink-soft);
}

.shared-chat-value {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Vignette strip — contained horizontal scroll on mobile (never page-level
   overflow), wrapping row at the breakpoint. Cards keep a readable width. */
.vignette-strip {
    list-style: none;
    display: flex;
    gap: 0.9rem;
    margin: 0;
    padding: 0.25rem 0 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.vignette-card {
    flex: 0 0 auto;
    width: 16rem;
    scroll-snap-align: start;
    background-color: var(--color-surface);
    border-radius: var(--radius-card);
    box-shadow: 0 6px 20px rgba(13, 26, 21, 0.06);
    padding: 1.1rem 1.1rem 1rem;
}

.vignette-quote {
    margin: 0 0 0.7rem;
    font-size: 0.9rem;
    line-height: 1.55;
}

.vignette-attr {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-ink-soft);
}

/* Trust block (#trust) — white Q&A card + the quiet back-to-invitation
   line (plain text, never a rose CTA). */
.trust-card {
    margin: 0;
    max-width: 36rem;
    background-color: var(--color-surface);
    border-radius: var(--radius-card);
    box-shadow: 0 6px 20px rgba(13, 26, 21, 0.06);
    padding: 0.4rem 1.25rem;
}

.trust-qa {
    padding: 0.85rem 0;
}

.trust-qa + .trust-qa {
    border-top: 1px solid rgba(13, 26, 21, 0.06);
}

.trust-q {
    margin: 0 0 0.25rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.trust-a {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-ink-soft);
}

.trust-back-line {
    margin: 1.1rem 0 0;
    font-size: 0.9rem;
    color: var(--color-ink-soft);
}

/* Anchor targets sit clear of the sticky header when anchor-jumped. */
#trust,
#unete {
    scroll-margin-top: 6rem;
}

@media (min-width: 576px) {
    .vignette-strip {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .vignette-card {
        flex: 1 1 16rem;
        width: auto;
        min-width: 16rem;
    }
}

/* ------------------------------------------- waitlist form (#unete, 18.2) */
.site-join {
    padding-bottom: var(--space-section);
}

.site-join-title {
    margin: 0 0 1rem;
    font-size: 1.35rem;
    font-weight: 600;
}

.site-form-card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    max-width: 28rem;
    padding: 1.5rem 1.25rem;
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    box-shadow: 0 6px 20px rgba(13, 26, 21, 0.06);
}

.site-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.site-form-field label {
    font-size: 0.85rem;
    font-weight: 600;
}

.site-form-field input {
    padding: 0.65rem 0.8rem;
    border: 1px solid #dddddd;
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    background-color: var(--color-surface);
    color: var(--color-ink);
}

.site-form-field input:focus-visible {
    outline: 3px solid var(--color-primary-action);
    outline-offset: 1px;
}

.site-input-error {
    border-color: var(--color-error, #c62828);
}

.site-form-error {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-error, #c62828);
}

.site-form-submit {
    margin-top: 0.25rem;
    width: 100%;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.site-form-note {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-ink-soft);
    text-align: center;
}

.site-form-note a {
    color: inherit;
}

.site-form-success {
    align-items: flex-start;
    gap: 0.4rem;
}

.site-form-success-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background-color: #eaf6ef;
    color: #1d8a4e;
    font-weight: 600;
}

.site-form-success-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
}

.site-form-success p {
    margin: 0;
    color: var(--color-ink-soft);
}

/* Honeypot: off-screen, not display:none (bots skip display:none more often).
   Also the generic visually-hidden utility for the site. */
.site-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (min-width: 576px) {
    .site-form-submit {
        width: auto;
        align-self: flex-start;
        padding-left: 2.2rem;
        padding-right: 2.2rem;
    }

    .site-form-note {
        text-align: left;
    }
}

/* ---------------------------------------------------- privacy page (18.2) */
.site-privacy {
    padding-bottom: var(--space-section);
}

/* --------------------------------------------------------- message pages */
.site-message {
    padding-bottom: var(--space-section);
}

/* ----------------------------------------------------------------- footer */
.site-footer {
    margin-top: var(--space-section);
    padding: 2rem 1rem 2.5rem;
    background-color: var(--color-chrome-bg);
    color: var(--color-on-chrome-soft);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.site-footer-tagline {
    margin: 0;
    color: var(--color-on-chrome);
    font-weight: 600;
    font-size: 0.9rem;
}

.site-footer-links {
    display: flex;
    gap: 1rem;
}

.site-footer-link {
    color: var(--color-on-chrome-soft);
    text-decoration: none;
    font-size: 0.85rem;
    padding: 0.3rem 0;
}

.site-footer-link:hover {
    color: var(--color-on-chrome);
}

.site-copyright {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-on-chrome-soft);
}

/* The hidden /tbc backdoor — a period that looks like normal punctuation. */
.site-hidden-link {
    color: inherit;
    text-decoration: none;
    cursor: default;
}

/* ------------------------------------------------------------ docs shell */
/* Quieter than the landing: white content card on the light body, light-gray
   sidebar, rose ONLY for links + the current-page marker. Mobile-first: the
   sidebar collapses into a native <details> section nav below 576px. */
.docs-shell {
    max-width: var(--docs-max-width);
    margin: 0 auto;
    padding: 1.25rem 1rem var(--space-section);
}

/* Desktop sidebar — hidden on mobile (the <details> nav takes over). */
.docs-sidebar {
    display: none;
}

.docs-nav-section {
    margin: 0;
}

.docs-section-title {
    margin: 1rem 0 0.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}

.docs-nav-section:first-of-type .docs-section-title {
    margin-top: 0.4rem;
}

.docs-section-pages {
    list-style: none;
    margin: 0;
    padding: 0;
}

.docs-page-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    color: var(--color-ink);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.35;
}

.docs-page-link:hover {
    background-color: rgba(13, 26, 21, 0.05);
}

/* Current page marked in rose. */
.docs-page-link.current {
    color: var(--color-primary-action);
    font-weight: 600;
}

/* Mobile section nav — native <details>/<summary>, zero JS. */
.docs-nav {
    margin-bottom: 1rem;
    background-color: var(--docs-sidebar-bg);
    border-radius: var(--radius-card);
    padding: 0 0.9rem;
}

.docs-nav-toggle {
    display: flex;
    align-items: center;
    min-height: 44px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-ink);
}

.docs-nav[open] {
    padding-bottom: 0.7rem;
}

/* The white content card. */
.docs-main {
    background-color: var(--color-surface);
    border-radius: var(--radius-card);
    box-shadow: 0 8px 30px rgba(13, 26, 21, 0.06);
    padding: 1.5rem 1.25rem 1.75rem;
}

/* ------------------------------------------------------------ docs prose */
.docs-prose {
    max-width: 65ch;
    font-size: 1.06rem;
    line-height: 1.7;
}

.docs-prose h1 {
    margin: 0 0 1rem;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.docs-prose h2 {
    margin: 2.1rem 0 0.6rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}

.docs-prose h3 {
    margin: 1.5rem 0 0.4rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.docs-prose p {
    margin: 0 0 1rem;
}

.docs-prose ul,
.docs-prose ol {
    margin: 0 0 1rem;
    padding-left: 1.4rem;
}

.docs-prose li {
    margin-bottom: 0.35rem;
}

.docs-prose a {
    color: var(--color-primary-action);
}

/* Quiet tables, styled for scanning. */
.docs-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

.docs-prose th,
.docs-prose td {
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--docs-hairline);
}

.docs-prose th {
    font-weight: 600;
}

/* Heading anchors: visible on hover/focus only. */
.docs-anchor {
    margin-left: 0.4rem;
    color: var(--color-primary-action);
    text-decoration: none;
    font-weight: 400;
    opacity: 0;
}

.docs-prose h2:hover .docs-anchor,
.docs-prose h3:hover .docs-anchor,
.docs-anchor:focus {
    opacity: 1;
}

/* ------------------------------------------------------- docs breadcrumb */
.docs-breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 1.4rem;
    padding: 0;
    font-size: 0.8rem;
    color: var(--color-ink-soft);
}

.docs-breadcrumb li + li::before {
    content: "›";
    margin-right: 0.35rem;
}

.docs-breadcrumb a {
    color: var(--color-primary-action);
    text-decoration: none;
}

/* -------------------------------------------------- docs fallback notice */
.docs-fallback-notice {
    margin: 0 0 1.4rem;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    background-color: var(--pill-due-bg);
    color: var(--pill-due-fg);
    font-size: 0.85rem;
}

/* ------------------------------------------------------ docs prev / next */
.docs-pager {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--docs-hairline);
}

.docs-pager a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    min-height: 44px;
    text-decoration: none;
}

.docs-pager-next {
    margin-left: auto;
    text-align: right;
}

.docs-pager-label {
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}

.docs-pager-title {
    color: var(--color-primary-action);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Docs at the single 576px breakpoint: persistent light-gray sidebar. */
@media (min-width: 576px) {
    .docs-shell {
        display: grid;
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 2rem;
        align-items: start;
        padding: 2rem 2rem var(--space-section);
    }

    .docs-nav {
        display: none;
    }

    .docs-sidebar {
        display: block;
        position: sticky;
        top: 4.5rem;
        background-color: var(--docs-sidebar-bg);
        border-radius: var(--radius-card);
        padding: 0.9rem;
    }

    .docs-main {
        padding: 2.2rem 2.5rem 2.5rem;
    }
}

/* --------------------------------------------------- single breakpoint */
@media (min-width: 576px) {
    .site-header {
        padding: 0.6rem 2rem;
    }

    .site-main {
        padding: 0 2rem;
    }

    .msa {
        padding: 1.4rem 1.5rem 1.1rem;
    }

    .site-footer {
        padding: 2.5rem 2rem 3rem;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .site-footer-tagline {
        white-space: nowrap;
    }

    /* copyright (with its hidden period) gets its own full-width line */
    .site-copyright {
        flex-basis: 100%;
    }
}

/* Calm: any future reveal honors reduced motion. */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}