/* ═══════════════════════════════════════════════════════════════════════════════
   meridianwealth.tech — the public corporate site

   PLAIN CSS, no Tailwind. `symfonycasts/tailwind-bundle` processes exactly one input
   (`app.css`), so a second Tailwind entry point would mean configuring a second build for
   three static pages that need about twenty rules. AssetMapper serves this file as-is,
   which also means this site renders correctly on a checkout where `tailwind:build` has
   never run — the one surface where that matters, since it is the public one.

   ⚠️ SAME SIX TOKENS AS `app.css`, and `tests/Corporate/CorporateStyleTest.php` fails if the
   two files disagree. `app.css` is the source of truth: it declares them inside Tailwind's
   `@theme`, which cannot be imported from here without pulling the whole framework and the
   admin component layer with it. So the values are repeated and the agreement is ASSERTED —
   the same trade this codebase makes for the company facts in `CompanyIdentity`.

   🔴 The register is "company document", not "instrument". `/admin` is a navigational
   instrument for an operator reading tables; this is a document for a stranger reading prose
   while deciding whether to trust us. Same bones — hairlines, one accent, no webfonts — at
   document measure and rhythm. Density is the ONLY dimension that differs.

   No webfonts: `script-src 'self'` is enforced and a display face would mean vendoring
   binaries and widening the CSP with `font-src`.
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
    --color-ink: #16203a;
    --color-ink-soft: #4a5570;
    --color-paper: #fbfaf7;
    --color-paper-sunk: #f2f1ec;
    --color-rule: #c6cad4;
    --color-verdigris: #2f6f63;

    --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-exact: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

    /* Document measure — prose, not tables. ~65 characters at the body size.
       ⚠️ In `rem`, NOT `ch`, on purpose: `ch` resolves against each element's own font-size, so the
       footer (which is smaller) would compute a narrower measure and its left edge would sit inboard
       of the body text. Same number, three different widths, and it reads as carelessness on the one
       page whose job is looking considered. */
    --measure: 34.5rem;
    --rhythm: 1.75rem;

    /* Centres a full-width band on the measure without needing a wrapper element, and keeps the
       1.5rem gutter on narrow screens. Header, document and footer all share it, so their left
       edges line up exactly. */
    --gutter: max(1.5rem, calc((100% - var(--measure)) / 2));
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-ink: #e8eaf0;
        --color-ink-soft: #97a1b8;
        --color-paper: #12161f;
        --color-paper-sunk: #1a1f2b;
        --color-rule: #2f3646;
        --color-verdigris: #64a99b;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-ui);
    font-size: 1.0625rem;
    line-height: 1.65;
    /* Better than a hard `text-rendering` override; keeps the OS decision. */
    -webkit-font-smoothing: antialiased;
}

/* ── Header: a wordmark and nothing else. A trust page needs no navigation bar. ─────── */

.doc-head {
    border-bottom: 1px solid var(--color-rule);
    padding: 1.25rem var(--gutter);
}

.doc-head__mark {
    color: var(--color-ink);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
}

/* ── The document ──────────────────────────────────────────────────────────────────── */

.doc {
    padding: calc(var(--rhythm) * 1.5) var(--gutter) calc(var(--rhythm) * 2);
}

.doc h1 {
    margin: 0 0 var(--rhythm);
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.doc h2 {
    /* Hairlines separate sections here and nowhere else — sparing, unlike /admin. */
    margin: calc(var(--rhythm) * 1.75) 0 var(--rhythm);
    border-top: 1px solid var(--color-rule);
    padding-top: var(--rhythm);
    font-size: 1.125rem;
    font-weight: 600;
}

.doc p {
    margin: 0 0 var(--rhythm);
}

.doc a {
    color: var(--color-ink);
    text-decoration-color: var(--color-rule);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.doc a:hover {
    text-decoration-color: var(--color-verdigris);
}

.lede {
    color: var(--color-ink-soft);
    font-size: 1.1875rem;
}

/* ── The four facts. A definition list, because that is what they are. ─────────────── */

.facts {
    margin: 0 0 var(--rhythm);
    display: grid;
    grid-template-columns: minmax(6rem, 9rem) 1fr;
    gap: 0.75rem 1.5rem;
}

.facts dt {
    color: var(--color-ink-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding-top: 0.15rem;
    text-transform: uppercase;
}

.facts dd {
    margin: 0;
}

/* ── Products ──────────────────────────────────────────────────────────────────────── */

.products {
    list-style: none;
    margin: 0 0 var(--rhythm);
    padding: 0;
}

.products__item + .products__item {
    border-top: 1px solid var(--color-rule);
    margin-top: var(--rhythm);
    padding-top: var(--rhythm);
}

.products__name {
    margin: 0 0 0.35rem;
    font-size: 1.0625rem;
    font-weight: 600;
}

/* The accent marks status and confirmation only — never decoration. Here it says
   "this one is not available yet", which is the page's one honest caveat. */
.products__status {
    background: var(--color-paper-sunk);
    border: 1px solid var(--color-rule);
    border-radius: 2px;
    color: var(--color-ink-soft);
    font-family: var(--font-exact);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    margin-left: 0.5rem;
    padding: 0.15rem 0.4rem;
    text-transform: uppercase;
    vertical-align: 0.1em;
    white-space: nowrap;
}

.products__blurb {
    color: var(--color-ink-soft);
    margin: 0;
}

/* ── The one sentence on this site with a security function. ───────────────────────── */

.pledge {
    background: var(--color-paper-sunk);
    /* The single accent on the page, and it marks the thing worth remembering. */
    border-left: 2px solid var(--color-verdigris);
    padding: var(--rhythm) 1.25rem;
}

.note {
    color: var(--color-ink-soft);
    font-size: 0.9375rem;
}

.doc ul:not(.products) {
    margin: 0 0 var(--rhythm);
    padding-left: 1.25rem;
}

.doc li {
    margin-bottom: 0.5rem;
}

/* ── Footer: the legal block. This is the part a suspicious reader scrolls to. ─────── */

.doc-foot {
    border-top: 1px solid var(--color-rule);
    color: var(--color-ink-soft);
    font-size: 0.9375rem;
    padding: var(--rhythm) var(--gutter) calc(var(--rhythm) * 2);
}

.doc-foot p {
    margin: 0 0 0.35rem;
}

.doc-foot__legal {
    color: var(--color-ink);
    font-weight: 600;
}

.doc-foot a {
    color: var(--color-ink-soft);
    text-decoration-color: var(--color-rule);
    text-underline-offset: 0.2em;
}

.doc-foot__nav {
    margin-top: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}