/* Open eLMS 2026 identity: forest navy on cream, serif display type, one accent per product (each product's tile colour).
   Loaded after css/style.css by RebrandRewriter; it only overrides the tokens style.css already uses.
   html:root outranks a page's own :root block, which comes later: pages carrying the join-page styles set --accent: var(--orange),
   and the rebrand made --orange var(--accent), a loop that left their Register buttons with no background at all. */
html:root {
  --brand-navy: #18362F;
  --brand-navy-900: #112521;
  --brand-green: #18362F;
  --brand-cream: #F4F3EE;
  --accent: var(--brand-navy);
  --accent-dark: #112521;
  --accent-light: #EDF2F1;
  --orange: var(--accent);
  --orange-dark: var(--accent-dark);
  --orange-light: var(--accent-light);
  --indigo: var(--brand-green);
  --indigo-dark: #112521;
  --indigo-light: #EDF2F1;
  --text-primary: #16211C;
  /* WCAG 1.4.3: style.css's greys (#6e6e73, #86868b) fall to 3.3:1 on the cream; the palette's "Grey - text" and a step lighter give 4.9:1 or more on white, cream, off-white and sage. */
  --text-secondary: #5F6368;
  --text-light: #66696D;
  --bg-light: var(--brand-cream);
  --bg-dark: var(--brand-navy-900);
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
}
body.brand-lms { --accent: #781030; --accent-dark: #5A0C24; --accent-light: #F5E6EB; }
body.brand-os { --accent: #C86B45; --accent-dark: #A4532F; --accent-light: #F8ECE6; }
body.brand-generator { --accent: #3C6E5A; --accent-dark: #2C5243; --accent-light: #E3EDE8; }
/* The homepage hero fades from white into the cream like the product pages (its own rule points at a background image the site does not have). */
body.brand-home .hero-split { background: linear-gradient(180deg, var(--bg-white) 0%, var(--bg-light) 100%); }
/* The homepage product cards: the product lockup in the title's place (squares the same height, as on the product pages),
   the copy beneath it and Learn more at the foot; no photo box, so the card keeps the site's edge-to-edge padding itself. */
body.brand-home .product-card.brand-card { padding: 0; border: none; min-height: 440px; }
body.brand-home .brand-card .product-card-body { flex: 1; padding: 36px 32px 32px; }
body.brand-home .brand-card h3.brand-lockup { margin: 0 0 24px; line-height: 0; }
body.brand-home .brand-card h3.brand-lockup img { width: 100%; height: auto; display: block; }
body.brand-home .brand-card-os h3.brand-lockup img { width: 70.3%; }
body.brand-home .brand-card-generator h3.brand-lockup img { width: 69.9%; }
body.brand-home .brand-card-store h3.brand-lockup img { width: 71.6%; }
body.brand-home .brand-card p { margin-bottom: 24px; }
body.brand-home .brand-card .product-card-body .btn { margin-top: auto; align-self: flex-start; }
/* The store tile is a light grey (#80868B), too pale for buttons, so the store pages take the master Forest Navy,
   which is also what the embedded Library store wears in its 2026 look. */
body.brand-store { --accent: #18362F; --accent-dark: #112521; --accent-light: #EDF2F1; }
h1, h2, h3, .feature-panel-title h3, .product-card h3, .compare-feature { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; }
h1, h2 { color: var(--brand-green); }
img.brand-logo { max-width: 320px; height: auto; }
.nav-logo .brand-logo { height: 40px; width: auto; display: block; }
.footer .brand-logo { height: 36px; width: auto; display: block; }
/* Product lockups: the LMS one fills the hero column; the others are scaled so the leaf square is the same height
   (every square is the full 240 of its image; widths LMS 1112, OS 782, Generator 777, Store 796). */
h1.brand-lockup { margin: 0 0 24px; line-height: 0; }
h1.brand-lockup img { width: 100%; max-width: 100%; height: auto; display: block; aspect-ratio: 1112 / 240; }
body.brand-os h1.brand-lockup img { width: 70.3%; aspect-ratio: 782 / 240; }
body.brand-generator h1.brand-lockup img { width: 69.9%; aspect-ratio: 777 / 240; }
body.brand-store h1.brand-lockup img { width: 71.6%; aspect-ratio: 796 / 240; }
/* A product's name as an eyebrow label over a page heading (landing-page-ai), shown as its lockup. */
.brand-label-lockup { margin: 0 0 20px; line-height: 0; }
.brand-label-lockup img { height: 110px; width: auto; max-width: 100%; display: block; }
.highlight { color: var(--accent); }
/* style.css gives the featured pricing card an orange glow of its own. */
.pricing-card.featured { box-shadow: 0 8px 40px rgba(24, 54, 47, 0.15); }
.section-label { color: var(--accent); letter-spacing: 0.14em; }
.nav-cta, .btn-primary, .mega-cta { background: var(--accent); border-color: var(--accent); }
.nav-cta:hover, .btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
/* Management Team: square portraits on square-cornered cards, like the leaf square of the lockups; the old pages used circular cut-outs. */
.team-card { border-radius: 0; }
.team-card img { height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: center top; display: block; }
@media (max-width: 760px) { .nav-logo .brand-logo { height: 34px; } h1.brand-lockup img { margin: 0 auto; } }
/* Footer contrast (WCAG 1.4.3): style.css greys its text to 40-50% white, 3.7:1 at worst on the dark footer; these give 9.5:1 or more. Hover was the accent, which on the dark footer all but vanished; it is white and underlined instead. */
.footer { color: rgba(255,255,255,0.85); }
.footer-brand p, .footer-col a { color: rgba(255,255,255,0.82); }
.footer-social a { color: #fff; background: rgba(255,255,255,0.14); }
.footer-bottom p, .footer-bottom-links a { color: rgba(255,255,255,0.75); }
.footer-col a:hover, .footer-col a:focus-visible, .footer-bottom-links a:hover, .footer-bottom-links a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-social a:hover, .footer-social a:focus-visible { background: #fff; color: var(--accent-dark); }
.footer a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Contrast on dark panels: the accent (Forest Navy) and the greys are for light backgrounds, so dark footers and panels get light versions of them (9:1 or more). */
.footer, .site-footer, .cta-banner, [style*="background:var(--bg-dark)"], [style*="background: var(--bg-dark)"] { --text-light: rgba(255,255,255,0.75); --text-secondary: rgba(255,255,255,0.82); --orange: #C9DDD4; --accent: #C9DDD4; --indigo: #C9DDD4; --indigo-dark: #FFFFFF; }
html body .footer .nav-cta, html body .footer .btn-primary, html body .cta-banner .btn-primary, html body [style*="background:var(--bg-dark)"] .btn-primary { background: #EDF2F1; border-color: #EDF2F1; color: #112521; }
html body .footer .nav-cta:hover, html body .footer .btn-primary:hover, html body .cta-banner .btn-primary:hover, html body [style*="background:var(--bg-dark)"] .btn-primary:hover { background: #FFFFFF; border-color: #FFFFFF; color: #112521; }
html body .site-footer-bottom, html body .site-footer-bottom p, html body .site-footer-bottom a { color: rgba(255,255,255,0.75); }
/* Pages' own style blocks come after this stylesheet, so these carry more weight: the old team page's orange titles, and the comparison tables' pale reds, greens and greys. */
html body .team-card-content h4 { color: var(--accent); }
html body .bento-card .badge { background-color: var(--accent); }
html body .legacy-tool { color: #A12D2A; }
html body .everything-feature { color: #1E6B43; }
html body .feature-tag { color: #5F6368; }
html body p[style*="#7a7a7a"] { color: #5F6368 !important; }
html body h3[style*="#72bf44"] { color: #2F6B2F !important; }
html body .cert-badge span[style*="#878787"] { color: #5F6368 !important; }
html body .comparison-table td:last-child { color: #5F6368; }
html body .forgot-password { color: #0056B3; }
/* The reseller brand guide keeps the old orange as content, but its notice heading is styling: the darker orange reads (5.9:1). */
html body .release-card > h4[style*="#F7941D"] { color: #9A5200 !important; }
/* The Register button on terracotta (the OS accent) is 3.7:1 with white text; its darker shade is 5.4:1. */
body.brand-os .nav-cta, body.brand-os .btn-primary { background: var(--accent-dark); border-color: var(--accent-dark); }
/* Roundtable join pages: the host's initials in the accent on its light tint (11.5:1). */
html body .join-host-initials { background: var(--accent-light); color: var(--accent); }

/* Logos built from the gallery masters by website:apply-rebrand. */
h1.brand-lockup img { aspect-ratio: 1105 / 240; }
body.brand-os h1.brand-lockup img { width: 67.8%; aspect-ratio: 721 / 240; }
body.brand-home .brand-card-os h3.brand-lockup img { width: 67.8%; }
body.brand-generator h1.brand-lockup img { width: 68.4%; aspect-ratio: 756 / 240; }
body.brand-home .brand-card-generator h3.brand-lockup img { width: 68.4%; }
body.brand-store h1.brand-lockup img { width: 72.3%; aspect-ratio: 796 / 240; }
body.brand-home .brand-card-store h3.brand-lockup img { width: 72.3%; }