/*
 * pages.css: shared layout for the persona pages that sit outside the
 * homepage (start, staff, press, 404). Loaded after site.css and only uses
 * its tokens, so a page built from these classes matches the rest of the site
 * without adding rules to site.css.
 *
 * Phone first: every interactive element is at least 44px tall, nothing sets
 * a fixed width, and nothing animates (so prefers-reduced-motion has nothing
 * to turn off here).
 */

.pg-hero .lede { margin-top: 18px; }
.pg-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pg-actions .btn { min-height: 48px; justify-content: center; }
.pg-actions .btn-ghost { color: var(--ink); }
.pg-note { margin-top: 18px; font-size: 14.5px; color: var(--muted); max-width: 62ch; }
.pg-note a, .pg-body a:not(.btn), .pg-card a:not(.btn) { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }

.pg-section { padding: clamp(40px, 6vw, 80px) 0; position: relative; }
.pg-section + .pg-section { border-top: 1px solid var(--line); }
.pg-section h2 { font-size: clamp(24px, 3vw, 36px); line-height: 1.15; margin-bottom: 12px; }
.pg-section .pg-intro { color: var(--muted); max-width: 62ch; margin-bottom: 28px; }

.pg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.pg-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: rgba(255, 255, 255, 0.025); display: flex; flex-direction: column; gap: 8px; }
.pg-card h3 { font-size: 19px; line-height: 1.3; }
.pg-card p { color: var(--muted); font-size: 15.5px; }
.pg-card .pg-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; font-weight: 600; }
.pg-card .pg-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); }

/* Numbered steps: an ordered list, so screen readers announce "1 of 5". */
.pg-steps { list-style: none; counter-reset: pgstep; display: grid; gap: 14px; max-width: 760px; }
.pg-steps li { counter-increment: pgstep; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.pg-steps li::before { content: counter(pgstep); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: 14px; color: var(--green); }
.pg-steps h3 { font-size: 18px; line-height: 1.3; margin: 8px 0 4px; }
.pg-steps p { color: var(--muted); font-size: 15.5px; }

/* Checklist: each row names one go-live gate the product checks. */
.pg-check { list-style: none; display: grid; gap: 10px; max-width: 760px; }
.pg-check li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.02); }
/* A drawn tick, not a box: an empty square reads as a checkbox to tap. */
.pg-check li::before { content: ""; width: 7px; height: 13px; margin: 3px 0 0 7px; border: solid var(--green); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.pg-check.is-conditional li::before { width: 10px; height: 10px; margin: 7px 0 0 5px; border: 2px solid var(--muted); border-radius: 50%; transform: none; }
.pg-check strong { display: block; font-size: 16px; }
.pg-check span { display: block; color: var(--muted); font-size: 14.5px; }

/* Facts list for press: a definition list reads as label / value pairs. */
.pg-facts { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 0; max-width: 760px; border-top: 1px solid var(--line); }
.pg-facts dt, .pg-facts dd { padding: 14px 0; border-bottom: 1px solid var(--line); }
.pg-facts dt { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-right: 16px; }
.pg-facts dd { color: var(--ink); }
.pg-facts dd a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; margin: -12px 16px -12px 0; }

.pg-assets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.pg-asset { border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 10px; }
.pg-asset .pg-asset-img { height: 72px; display: grid; place-items: center; border-radius: 10px; background: #000; }
.pg-asset.is-light .pg-asset-img { background: #f4f7f5; }
.pg-asset img { max-height: 48px; width: auto; }
.pg-asset a { display: inline-flex; align-items: center; min-height: 44px; color: var(--green); font-weight: 600; }

/* Footer headings on these pages are h2 (no skipped level after the h1).
 * Small text uses --muted, not --dim: --dim on the footer background is
 * 3.5:1, under the 4.5:1 WCAG AA minimum for text this size. */
.footer-col h2 { line-height: 1.4; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; font-weight: 500; }
.footer-base { color: var(--muted); }
.footer-base a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }

.pg-skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 12px 18px; border-radius: 10px; background: var(--green); color: #04140a; font-weight: 600; }
.pg-skip:focus { top: 12px; }

@media (max-width: 640px) {
  .pg-actions .btn { flex: 1 1 100%; white-space: normal; text-align: center; }
  .pg-facts { grid-template-columns: 1fr; }
  .pg-facts dt { padding-bottom: 2px; border-bottom: 0; }
  .pg-facts dd { padding-top: 0; }
}