/* ============================================================================
   Auracle web design system, "The Ledger".
   Secondary-page idiom. Authority: /DESIGN.md (2026-08-13).

   The small, boring sheet the simple secondary pages share: privacy, terms,
   refunds, recover. One header, one measure, one prose mapping, one footer.

   Depends on css/tokens.css and nothing else. These pages link exactly two
   sheets (tokens, then this one), so there is no legacy cascade to fight:
   factory.css, index.css and the tw- utilities are all off these pages.

   No JS. Nothing here may be needed for the content to render or read.

   Any /css edit MUST bump the ?v= token on every stylesheet link that ships
   this file.
   ========================================================================= */

/* ----------------------------------------------------------------------------
   1. Page frame.
-------------------------------------------------------------------------- */

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

/* The measure. ~46rem of legal prose, gutters that hold at 375px. */
.rs-wrap {
    width: 100%;
    max-width: 46rem;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

/* ----------------------------------------------------------------------------
   2. Header. The mark in ink, small, links home. One mono page label.
-------------------------------------------------------------------------- */

.rs-head {
    border-bottom: var(--rule);
}

.rs-head-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.125rem;
}

.rs-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
}

/* The source mark ships hard-white for the old dark chrome, so it is used
   here as a mask and painted ink. One request, exact token colour, and no
   second asset to keep in sync. */
.rs-mark {
    width: 1.375rem;
    height: 1.375rem;
    background-color: var(--ink);
    -webkit-mask-image: url("/assets/logo/auracle-mark.svg?v=2");
    mask-image: url("/assets/logo/auracle-mark.svg?v=2");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Carries the link's accessible name on screen, and becomes the visible
   wordmark in print, where a masked background never paints. */
.rs-brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.rs-page-label {
    color: var(--text-muted);
    text-align: right;
}

/* ----------------------------------------------------------------------------
   3. Prose. The legal measure: heading scale, list and paragraph rhythm.
-------------------------------------------------------------------------- */

.rs-main {
    flex: 1 0 auto;
    padding-block: clamp(2.5rem, 1.6rem + 3.8vw, 4.5rem) 4rem;
}

.rs-eyebrow {
    display: block;
    margin-bottom: 1.5rem;
    color: var(--text-muted);
}

.rs-prose h1 {
    font-size: var(--size-h2);
    margin-bottom: 1.25rem;
}

.rs-prose h2 {
    font-size: var(--size-h3);
    margin-top: 2.75rem;
    margin-bottom: 0.75rem;
    padding-top: 1.5rem;
    border-top: var(--rule);
}

.rs-prose h3 {
    font-size: var(--size-lead);
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
}

.rs-prose p,
.rs-prose ul,
.rs-prose ol {
    margin-bottom: 1.25rem;
}

/* Long tokens (emails, env var names, ids) must never push the page wide. */
.rs-prose p,
.rs-prose li {
    overflow-wrap: anywhere;
}

.rs-lead {
    font-size: var(--size-lead);
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.rs-prose ul,
.rs-prose ol {
    list-style: none;
    padding-left: 1.25rem;
}

.rs-prose li {
    position: relative;
    margin-bottom: 0.625rem;
}

.rs-prose ul > li::before {
    content: "";
    position: absolute;
    left: -1.25rem;
    top: 0.7em;
    width: 0.5rem;
    border-top: var(--rule);
}

/* The ordered lists on these pages already carry their own "1." / "2."
   markers in the copy, so no counter is generated here. */

.rs-prose strong {
    font-weight: var(--weight-strong);
}

.rs-prose code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    letter-spacing: var(--tracking-mono-tight);
}

/* Links are ink, underlined in the accent. Accent AS the text colour fails
   here: #FF9100 on cream is ~1.95:1, well under the 4.5:1 body-text bar.
   Ink on cream is ~13:1, so the accent marks the link and the ink carries
   the reading. */
.rs-prose a,
.rs-foot a {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.rs-prose a:hover,
.rs-foot a:hover {
    text-decoration-thickness: 2px;
}

/* ----------------------------------------------------------------------------
   4. Footer. Same links the page always had, in mono.
-------------------------------------------------------------------------- */

.rs-foot {
    border-top: var(--rule);
    padding-block: 2.5rem 3rem;
    font-family: var(--font-mono);
    font-size: var(--size-micro);
    letter-spacing: var(--tracking-mono-tight);
}

.rs-foot-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 3rem;
}

.rs-foot-k {
    margin-bottom: 0.875rem;
    color: var(--text-muted);
}

.rs-foot ul {
    list-style: none;
    padding: 0;
}

.rs-foot li {
    margin-bottom: 0.5rem;
}

.rs-foot-meta {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: var(--rule);
    color: var(--text-muted);
    line-height: 1.6;
}

.rs-foot-links {
    margin-bottom: 1.25rem;
}

.rs-foot-sep {
    margin-inline: 0.5rem;
    color: var(--line);
}

.rs-foot-fine {
    display: block;
    margin-top: 0.75rem;
}

/* ----------------------------------------------------------------------------
   5. Print. Legal pages get printed. Black on white, links still marked.
-------------------------------------------------------------------------- */

@media print {
    :root {
        --ground: #fff;
        --text: #000;
        --text-muted: #000;
        --line: #999;
        --accent: #000;
    }

    body {
        background: #fff;
        color: #000;
    }

    /* A masked background never paints in print; show the wordmark instead. */
    .rs-mark {
        display: none;
    }

    .rs-brand-name {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
        font-family: var(--font-mono);
        font-size: var(--size-micro);
        text-transform: uppercase;
        letter-spacing: var(--tracking-mono);
    }

    .rs-prose a,
    .rs-foot a {
        text-decoration-color: #000;
    }
}

/* ----------------------------------------------------------------------------
   6. App pages. Same header / measure / footer idiom as the legal pages, one
      size wider, plus the nav those pages have always carried.

      Scope: download, compare, welcome, account, product/ide, product/cli.
      The legal pages never match any of this, so it stays inert there.

      The two product pages additionally keep css/factory.css for their device
      mocks (see section 9). Everything here is written to out-specify it: the
      nav rules are scoped under .rs-head, which factory's `.fnav …` selectors
      can no longer reach once the header carries the new class.
-------------------------------------------------------------------------- */

/* Tables and product frames need more than the 46rem reading measure. */
.rs-wrap-wide {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

/* ----------------------------------------------------------------------------
   6.1 Header nav.

   The header sits in the flow rather than fixed, so the pages no longer need
   the 72px spacer the fixed bar required. The mega sheet anchors to the header
   instead of the viewport.
-------------------------------------------------------------------------- */

.rs-head {
    position: relative;
    background-color: var(--ground);
}

/* The wordmark stays visible here (it always has been on these pages); the
   sr-only .rs-brand-name of the legal idiom is not used. */
.rs-brand-word {
    font-family: var(--font-mono);
    font-size: var(--size-micro);
    font-weight: var(--weight-strong);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
}

.rs-nav-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Mono, uppercase, letter-spaced. Hidden under 900px exactly as before, which
   is also what keeps the bar from overflowing at 375px. */
.rs-nav {
    display: none;
    align-items: center;
    gap: 1.5rem;
}

@media (min-width: 900px) {
    .rs-nav {
        display: flex;
    }
}

.rs-head .fl {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-family: var(--font-mono);
    font-size: var(--size-micro);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text);
    cursor: pointer;
}

.rs-head .fl:hover {
    color: var(--text-muted);
}

.rs-head .chev {
    font-size: 0.5rem;
    opacity: 0.65;
}

.rs-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rs-head .rs-nav-btn,
.rs-head #clerk-auth a {
    display: inline-flex;
    align-items: center;
    height: 1.75rem;
    padding-inline: 0.8125rem;
    border: var(--rule);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: var(--size-micro);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text);
    background: transparent;
}

.rs-head .rs-nav-btn:hover,
.rs-head #clerk-auth a:hover {
    border-color: var(--ink);
}

/* The ink-filled nav action. The accent is spent on the page's own verb, never
   here, so no view ever shows two. */
.rs-head .rs-nav-btn-ink {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--cream);
}

.rs-head .rs-nav-btn-ink:hover {
    background: var(--black);
    border-color: var(--black);
}

/* Was `tw-hidden md:tw-inline-flex`: the sign-in action only from 768px up. */
.rs-nav-btn-md {
    display: none;
}

@media (min-width: 768px) {
    .rs-head .rs-nav-btn-md {
        display: inline-flex;
    }
}

/* ----------------------------------------------------------------------------
   6.2 Product mega sheet. Hover as before, plus :focus-within so it is
   reachable from the keyboard. Still no JS.
-------------------------------------------------------------------------- */

.rs-head .has-mega {
    position: static;
}

.rs-head .mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 55;
    background-color: var(--cream);
    border-bottom: var(--rule);
    padding-top: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition:
        opacity var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
}

.rs-head .has-mega:hover .mega,
.rs-head .has-mega:focus-within .mega,
.rs-head .mega:hover {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.rs-head .mega-in {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    max-width: 60rem;
    margin: 0 auto;
    padding: 1.625rem 1.5rem 2.5rem;
}

.rs-head .mega-col {
    padding-inline: 2rem;
    border-left: var(--rule);
}

.rs-head .mega-col:first-child {
    border-left: 0;
    padding-left: 0;
}

.rs-head .mega-k {
    font-family: var(--font-mono);
    font-size: var(--size-eyebrow);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1.125rem;
}

.rs-head .mega-col a {
    display: block;
    padding-block: 0.5rem;
    font-size: var(--size-small);
    color: var(--text);
}

.rs-head .mega-col a:hover {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.rs-head .mega-soon {
    display: block;
    padding-block: 0.5rem;
    font-size: var(--size-small);
    color: var(--text-muted);
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .rs-head .mega {
        transition: none;
    }
}

/* ----------------------------------------------------------------------------
   6.3 The one verb. An accent fill with ink text: #FF9100 behind #232323 is
   ~7.3:1, so the label carries its own contrast and the accent stays a verb
   rather than a text colour.
-------------------------------------------------------------------------- */

.rs-verb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8125rem 1.5rem;
    border: 1px solid var(--accent);
    border-radius: 4px;
    background: var(--accent);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--size-micro);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out);
}

.rs-verb:hover {
    background: transparent;
}

/* The quiet companion action. */
.rs-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8125rem 1.5rem;
    border: var(--rule);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: var(--size-micro);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text);
}

.rs-act:hover {
    border-color: var(--ink);
}

/* ----------------------------------------------------------------------------
   6.4 Cards and section rhythm shared by the app pages.
-------------------------------------------------------------------------- */

.rs-card {
    padding: 1.5rem;
    border: var(--rule);
    border-radius: 4px;
    background: var(--paper);
}

.rs-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Cards sitting inside the prose column: the rule-topped h2 of the reading
   measure would fight the card's own border, so the card head opts out. */
.rs-prose .rs-card {
    margin-bottom: 2rem;
}

.rs-prose .rs-card-h {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    font-size: var(--size-h3);
    margin-bottom: 0.75rem;
}

.rs-prose .rs-card p:last-child,
.rs-prose .rs-card ul:last-child {
    margin-bottom: 0;
}

/* Lists whose copy already carries "1." / "2." markers. */
.rs-prose .rs-list-num {
    padding-left: 0;
}

.rs-prose .rs-list-num > li::before {
    content: none;
}

/* Inline code inside prose, as the app pages label it. */
.mono-inline {
    font-family: var(--font-mono);
    font-size: 0.9em;
    letter-spacing: var(--tracking-mono-tight);
}

/* ----------------------------------------------------------------------------
   9. The two product pages (/product/ide, /product/cli).

   These are the one exception to "tokens.css and this file, nothing else".
   Their whole body is device mockery: the IDE window, the terminal, the live
   desk, the agent thread. That imagery is css/factory.css, and the brief for
   this slice is to re-skin their chrome and leave the imagery alone, so
   factory.css stays linked there and loads FIRST, for exactly the reason
   index.css has to: it carries a competing `:root` (--ink: #eeeeee) and a
   dark `body` ground, both of which tokens.css must win.

   Dark instruments on a cream page is the system working as designed: the
   frames are the counter-material, and the IDE keeps its own dark theme by
   DESIGN.md. Everything below re-materials only what surrounds them. Each
   selector matches factory's own and simply lands later in the cascade.
-------------------------------------------------------------------------- */

.phero {
    padding-top: clamp(2.5rem, 1.6rem + 3.8vw, 4rem);
    padding-bottom: 2.5rem;
}

.pkick {
    font-family: var(--font-mono);
    font-size: var(--size-eyebrow);
    letter-spacing: var(--tracking-mono);
    color: var(--text-muted);
    margin-bottom: 1.125rem;
}

.phero h1 {
    font-size: var(--size-h1);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    font-weight: var(--weight-display);
    color: var(--text);
    margin-bottom: 1.125rem;
}

.psub {
    font-family: var(--font-sans);
    font-size: var(--size-lead);
    line-height: var(--leading-body);
    letter-spacing: 0;
    color: var(--text-muted);
    margin-bottom: 1.75rem;
}

/* The hero pair: the one verb, then its quiet companion.
   The markup carries only the `-light` / `-dark` modifiers, never the `.fbtn`
   base, so the shape has to be declared on the modifiers themselves. Without
   this the buttons inherit nothing but a fill and render as bare text runs. */
.fbtn,
.fbtn-light,
.fbtn-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 0.75rem 1.25rem;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: var(--size-micro);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
}

.fbtn-light {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: var(--ink);
    transition: background-color var(--dur-fast) var(--ease-out);
}

.fbtn-light:hover {
    background: transparent;
}

.fbtn-dark {
    background: transparent;
    border: var(--rule);
    color: var(--text);
}

.fbtn-dark:hover {
    background: transparent;
    border-color: var(--ink);
}

.pfeat-label {
    font-family: var(--font-mono);
    font-size: var(--size-eyebrow);
    letter-spacing: var(--tracking-mono);
    color: var(--text-muted);
}

.prow-line {
    border-top: var(--rule);
}

.schap-dot {
    background: var(--ink);
}

.schap-para {
    font-family: var(--font-sans);
    font-size: var(--size-body);
    line-height: var(--leading-body);
    letter-spacing: 0;
    color: var(--text-muted);
    max-width: 46ch;
}

.schap-link {
    font-family: var(--font-mono);
    font-size: var(--size-micro);
    letter-spacing: var(--tracking-mono);
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.schap-link:hover {
    text-decoration-thickness: 2px;
}

/* The routing card and the closing card are raised paper on cream: a hairline
   and the material change, no noise fill and no glow. */
.route-card {
    background: var(--paper);
    border: var(--rule);
    border-radius: 4px;
    color: var(--text);
}

.route-card h2 {
    color: var(--text);
    font-weight: var(--weight-display);
    letter-spacing: var(--tracking-display);
}

.route-cols .rk {
    font-size: var(--size-eyebrow);
    letter-spacing: var(--tracking-mono);
    color: var(--text);
}

.route-cols p {
    font-family: var(--font-sans);
    font-size: var(--size-small);
    line-height: var(--leading-body);
    color: var(--text-muted);
}

.route-cols a:hover .rk {
    text-decoration-color: var(--accent);
}

.rs-cta-band {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    padding: clamp(3rem, 2rem + 4.2vw, 5.5rem) 1.5rem;
}

.cta-card,
.rs-cta-card {
    max-width: 36rem;
    padding: clamp(2rem, 1.5rem + 2.1vw, 3rem);
    border: var(--rule);
    border-radius: 4px;
    background-color: var(--paper);
    background-image: none;
    box-shadow: none;
    color: var(--text);
}

.rs-cta-mark {
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 3rem;
}

.rs-cta-h {
    max-width: 24rem;
    margin-bottom: 2rem;
    font-size: var(--size-h2);
}

.rs-cta-link {
    color: var(--text-muted);
}

.rs-cta-link:hover {
    color: var(--text);
}

.btn-cta-dark {
    background: var(--ink);
    color: var(--cream);
    border-radius: 4px;
    padding: 0.75rem 1.25rem;
    letter-spacing: var(--tracking-mono);
}

.btn-cta-dark:hover {
    background: var(--black);
}