/* Interior pages (/fleet, /desk) — components the homepage does not use.
   Everything shared (tokens, buttons, nav, forms, footer, concierge panel) lives
   in css/pop.css, which is a verbatim copy of index.html's inline <style> body
   and is drift-guarded by functions/_lib/shared-assets.test.ts. Add nothing here
   that belongs in pop.css, or the two will disagree about the brand. */

/* Interior hero — one column, no disco-ball art. */
.hero-solo { max-width: 48rem; }
.hero-solo h1 { font-size: clamp(40px, 5.6vw, 84px); }
.hero-solo .lede { margin-top: 20px; color: var(--muted); }
.hero-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-solo .note { margin-top: 26px; display: inline-block; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); padding: 8px 16px 10px; transform: rotate(-2deg); box-shadow: 5px 5px 0 var(--cyan); }

/* Quiet receipt section — the sober counterweight to a loud headline.
   Ink-on-ink with a hard rule, so it reads as a statement of record. */
.receipt { margin-top: 56px; background: var(--ink-2); border: 3px solid var(--paper); border-left: 10px solid var(--cyan); padding: 30px 30px 32px; }
.receipt h2 { font-size: clamp(28px, 3.2vw, 44px); color: var(--paper); }
.receipt p { margin-top: 16px; color: var(--muted); font-size: 17px; max-width: 46em; }
.receipt .stamp { display: inline-block; margin-bottom: 14px; font-weight: 800; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); }
.receipt.warm { border-left-color: var(--yellow); }
.receipt.warm .stamp { color: var(--yellow); }

/* Diamond bullet list — same marker language as .arm li and .gov li. */
.points { list-style: none; margin-top: 24px; display: flex; flex-direction: column; gap: 12px; max-width: 42em; }
.points li { font-size: 16px; font-weight: 700; display: flex; gap: 12px; align-items: flex-start; color: var(--paper); }
.points li::before { content: ""; flex: none; width: 11px; height: 11px; margin-top: 6px; background: var(--pink); transform: rotate(45deg); }
/* On a bright fill, body text and markers go to ink — never paper on yellow. */
.on-light .points li { color: var(--ink); }
.on-light .points li::before { background: var(--ink); }

/* Pull quote — the one line to remember off the page. */
.pullquote { margin-top: 44px; background: var(--yellow); color: var(--ink); border: var(--edge); box-shadow: var(--pop-shadow); padding: 30px 32px; font-family: var(--font-display); text-transform: uppercase; font-size: clamp(26px, 3.4vw, 46px); line-height: 1.08; }

/* Cross-link to the sibling interior page. */
.crosslink { margin-top: 40px; display: inline-flex; align-items: center; gap: 14px; background: var(--ink); color: var(--yellow); border: var(--edge); box-shadow: 8px 8px 0 var(--pink); padding: 20px 26px; text-decoration: none; font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 32px); text-transform: uppercase; transition: transform .15s ease, box-shadow .15s ease; }
.crosslink:hover { transform: translate(-2px,-2px); box-shadow: 10px 10px 0 var(--pink); }
.crosslink span { font-family: var(--font-sans); font-weight: 800; font-size: 26px; }

/* A measured statement under a section — how we know the thing is working. */
.measure { margin-top: 24px; font-weight: 800; font-size: 15px; letter-spacing: 0.04em; color: var(--cyan); max-width: 42em; }
.on-light .measure { color: var(--ink); }

/* Two-beat headlines. The second beat drops to its own line; which treatment it
   gets depends on what is BEHIND it, so each use picks one explicitly:
     .beat-pink — pink on a dark ground only (fails contrast on any bright fill)
     .beat-ink  — ink block, yellow text; safe on pink, yellow, cyan and orange
   Brand guide section 2: never a bright on a bright at display size. */
.two-beat .beat2 { display: block; }
.two-beat .beat-pink { color: var(--pink); }
.two-beat .beat-ink { background: var(--ink); color: var(--yellow); padding: 0 0.15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Nav: mark the page you are on. */
.nav-links a[aria-current="page"] { color: var(--yellow); text-decoration: underline; text-underline-offset: 5px; }