/* About page: same roles as the homepage hero. Navy hero, cyan = AI, amber = primary action.
   Amber and cyan are local to homepage/about stylesheets and not part of the shared palette. */
@layer tokens {
body[data-yitm-design-mode="about"] { --about-amber:#F5A524; --about-amber-hover:#FFB93D; --about-cyan:#52DDFF; --about-on-amber:#14243E; }
html:root:root:root:root body[data-yitm-design-mode="about"] .about-hero#top {
  background: radial-gradient(ellipse at 95% 0%, #124A70 0%, #0B2344 55%, #071A33 100%) !important; color:#EAF4FA !important;
}
html:root:root:root:root body[data-yitm-design-mode="about"] .about-hero#top :is(h1, .lede, p) { color:#fff !important; -webkit-text-fill-color:#fff !important; }
html:root:root:root:root body[data-yitm-design-mode="about"] .about-hero#top .lede { color:#EAF4FA !important; -webkit-text-fill-color:#EAF4FA !important; }
html:root:root:root:root body[data-yitm-design-mode="about"] .about-hero#top h1 .about-ai-accent { color:var(--about-cyan) !important; -webkit-text-fill-color:var(--about-cyan) !important; }
html:root:root:root:root body[data-yitm-design-mode="about"] .about-hero#top .eyebrow { background:rgba(82,221,255,.14) !important; color:var(--about-cyan) !important; border-color:rgba(82,221,255,.4) !important; -webkit-text-fill-color:var(--about-cyan) !important; }
html:root:root:root:root body[data-yitm-design-mode="about"] .about-hero#top .about-proof-row span,
html:root:root:root:root body[data-yitm-design-mode="about"] .about-hero#top .about-proof-row span.about-proof-row span { background:rgba(255,255,255,.08) !important; color:#EAF4FA !important; -webkit-text-fill-color:#EAF4FA !important; border:1px solid rgba(82,221,255,.45) !important; }
html:root:root:root:root body[data-yitm-design-mode="about"] .about-hero#top a.btn-secondary.btn-secondary { background:transparent !important; color:#fff !important; -webkit-text-fill-color:#fff !important; border:2px solid #52a7c8 !important; text-decoration:none !important; }
html:root:root:root:root:root body[data-yitm-design-mode="about"] :is(.about-hero#top a.btn-primary.btn-primary, #ownership a.btn-primary.btn-primary, .site-header a.nav-cta.nav-cta),
html:root:root:root:root:root body[data-yitm-design-mode="about"] :is(.about-hero#top a.btn-primary.btn-primary, #ownership a.btn-primary.btn-primary, .site-header a.nav-cta.nav-cta):visited {
  background:var(--about-amber) !important; color:var(--about-on-amber) !important; -webkit-text-fill-color:var(--about-on-amber) !important; border-color:var(--about-amber) !important; text-decoration:none !important; box-shadow:none !important;
}
html:root:root:root:root:root body[data-yitm-design-mode="about"] :is(.about-hero#top a.btn-primary.btn-primary, #ownership a.btn-primary.btn-primary, .site-header a.nav-cta.nav-cta):hover { background:var(--about-amber-hover) !important; }
html:root:root:root:root body[data-yitm-design-mode="about"] :is(.about-hero#top a.btn, #ownership a.btn, .site-header a.nav-cta):focus-visible { outline:3px solid #52DDFF; outline-offset:3px; }
/* Two connected ideas: the cards were squeezed into a narrow left column; make them a two-column grid. */
html:root:root:root:root body[data-yitm-design-mode="about"] #ownership .trust-grid { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:20px !important; max-width:none !important; }
html:root:root:root:root body[data-yitm-design-mode="about"] #ownership .trust-grid .card { width:auto !important; max-width:none !important; }
html:root:root:root:root body[data-yitm-design-mode="about"] .about-reviewed { font-size:.875rem; opacity:.8; margin-top:14px; }
@media (max-width:760px) { html:root:root body[data-yitm-design-mode="about"] #ownership .trust-grid { grid-template-columns:1fr !important; } }
}