/* Shared WCAG 2.1 AA helpers — load last in . Pages own --ink-mute (and the rest of the palette). Do not override tokens here. */ :focus-visible { outline: 2px solid var(--accent-ink, var(--accent, oklch(0.42 0.11 155))); outline-offset: 2px; } .skip-link:focus, .skip-link:focus-visible, .skip-to-main:focus, .skip-to-main:focus-visible, .skip:focus, .skip:focus-visible { top: 0; } img, video, canvas, svg { max-width: 100%; } .site-header__inner, .site-nav, .layout, .sidebar, .hero__inner, .hero, .content, .topbar, .brand, .brand__name, .cta-band__inner, .market-card__head, .plans, .stats-section { min-width: 0; max-width: 100%; } .brand__name, .topbar__brand, .sector-badge, .proof-strip__item { overflow-wrap: anywhere; } /* Light brand tokens fail 4.5:1 as link text — prefer the ink variant. */ .hero__sub a { color: var(--accent-ink, var(--ink-soft)); } .btn, .nav-toggle, [type="submit"], .topbar__cta, .btn-primary, .plan__cta, .account-nav-cta, .header-account-link, [data-account-nav-cta] { min-height: 44px; } @media (max-width: 720px) { .site-header__inner, .topbar { flex-wrap: wrap; height: auto; min-height: 52px; } .cta-band__inner, .cta-band__actions, .market-card__head, .hero__actions { flex-wrap: wrap; } .us-controls select, .us-controls input { min-width: 0 !important; width: 100%; } } /* Wide-screen shell — keep page chrome centered; do not pin columns to the viewport edges. Pages keep their own --max / --max-w when set. Do not constrain .hero itself (hub is full-bleed). */ :root { --shell-max: 1200px; --shell-gutter: clamp(16px, 3vw, 40px); } @media (min-width: 1600px) { :root { --shell-max: 1280px; } } .site-header__inner, .hero__inner, .content, .section, .cta-band__inner, .site-footer__inner, .proof-strip__inner, .stats-wrap, .scenarios-section, .roles-section, .engine__inner, .qualities-band__inner, .trust, .plans, .wrap { width: min(100%, var(--max-w, var(--max, var(--shell-max)))); max-width: var(--max-w, var(--max, var(--shell-max))); margin-inline: auto; box-sizing: border-box; } .app-header__inner, .app-main { width: min(100%, var(--app-max, var(--shell-max))); max-width: var(--app-max, var(--shell-max)); margin-inline: auto; } @media (min-width: 961px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(240px, 440px); } } @media (max-width: 960px) { .hero { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 1100px) { body:has(.nav-toggle) .nav-toggle { display: inline-flex !important; align-items: center; justify-content: center; } body:has(.nav-toggle) .site-nav { display: none; position: absolute; top: 64px; left: var(--shell-gutter); right: var(--shell-gutter); flex-direction: column; align-items: stretch; z-index: 200; padding: 10px; background: var(--paper, var(--bg, #fff)); border: 1px solid var(--line, rgba(0, 0, 0, 0.12)); border-radius: 12px; } body:has(.nav-toggle) .site-nav.is-open { display: flex; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }