/* Verenity brand styles, shared by every Verenity site. System fonts, no external resources.
   Source of truth: shared/brand.css. Do not edit the copies in <site>/assets/. Light and dark.

   PALETTE. Four brand colors, used exactly, and nothing else blue or orange anywhere:
     royal blue #2563EB   navy #1E3A8A   orange #F97316   light gray #E5E7EB
   Everything else is a neutral (ink, grays, deep-navy dark surfaces), a status color (green
   for "available"), or a tint of a brand color written out as a hex so contrast can be
   checked (scripts/check-contrast.py reads this file and fails the build below WCAG AA).
   Rules:
   - Orange is a fill behind dark text, or a non-text mark. Never orange text, never behind
     white text.
   - Royal blue is text on light (5.2:1 on white). On dark it is too dim for text (3.9:1 on
     deep navy), so link text on dark uses the lighter blue #7FA8FF (7.8:1). The lighter blue
     is for link text on dark only. The logo's blue on dark is #4B7BFF, set in the logo files.
   - Buttons are royal blue with white text in both themes. */

:root {
  --royal: #2563eb;
  --navy: #1e3a8a;
  --orange: #f97316;
  --gray: #e5e7eb;

  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f4f6;
  --text: #0b1426;
  --muted: #4b5563;
  --border: var(--gray);
  --accent: var(--royal);              /* link and accent text */
  --accent-hover: var(--navy);
  --accent-ink: #ffffff;               /* text on --accent fills */
  --accent-soft: #eef3fd;              /* royal blue at 8% on white */
  --btn: var(--royal);
  --btn-hover: var(--navy);
  --btn-ink: #ffffff;
  --hero-glow: rgba(37, 99, 235, 0.1);
  --ok-bg: #dff3e8;
  --ok-text: #0b5a37;
  --mid-bg: #fee9da;                   /* orange at 16% on white; text stays ink */
  --mid-text: var(--text);
  --soon-bg: var(--orange);            /* "coming soon": dark text on orange */
  --soon-text: #0b1426;
  --on-orange: #0b1426;
  --shadow: 0 1px 2px rgba(11, 20, 38, 0.06), 0 12px 32px rgba(11, 20, 38, 0.1);
  --radius: 14px;
  --maxw: 1120px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1426;
    --surface: #111c33;
    --surface-2: #18253f;
    --text: #e8edf7;
    --muted: #a9b6ce;
    --border: #26344f;
    --accent: #7fa8ff;                 /* lighter blue, link text on dark only */
    --accent-hover: #a8c3ff;
    --accent-ink: #0b1426;
    --accent-soft: #132a5c;            /* royal blue at 28% on deep navy */
    --btn: var(--royal);
    --btn-hover: var(--navy);
    --btn-ink: #ffffff;
    --hero-glow: rgba(37, 99, 235, 0.18);
    --ok-bg: #123524;
    --ok-text: #8fe0b4;
    --mid-bg: #3b2723;                 /* orange at 20% on deep navy */
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] {
  --bg: #0b1426;
  --surface: #111c33;
  --surface-2: #18253f;
  --text: #e8edf7;
  --muted: #a9b6ce;
  --border: #26344f;
  --accent: #7fa8ff;
  --accent-hover: #a8c3ff;
  --accent-ink: #0b1426;
  --accent-soft: #132a5c;
  --btn: var(--royal);
  --btn-hover: var(--navy);
  --btn-ink: #ffffff;
  --hero-glow: rgba(37, 99, 235, 0.18);
  --ok-bg: #123524;
  --ok-text: #8fe0b4;
  --mid-bg: #3b2723;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

:root[data-theme="light"] { color-scheme: light; }

/* ---- base ---------------------------------------------------------------------- */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.6 var(--font);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
img, svg { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { color: var(--accent-hover); }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.2rem); font-weight: 750; }
h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.2em; }
code, .mono { font-family: var(--mono); font-size: 0.92em; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: 8px; font-weight: 700;
}
.skip:focus { top: 12px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- header -------------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.bar { display: flex; align-items: center; gap: 14px; min-height: 64px; flex-wrap: wrap; }
.brand {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text);
  font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em; margin-right: auto;
}
.brand b { font-weight: 800; }
.brand:hover { color: var(--text); }
/* Logos are SVG files, one per theme. Both images are in the page and CSS shows the one that
   matches the theme, so it works without JS and follows the manual toggle. !important so a
   site rule that sets display on a logo can never show both. */
.brand img { height: 36px; width: auto; display: block; }
.logo-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none !important; }
  :root:not([data-theme="light"]) .logo-dark { display: block !important; }
}
:root[data-theme="dark"] .logo-light { display: none !important; }
:root[data-theme="dark"] .logo-dark { display: block !important; }
img.logo-light, img.logo-dark { object-fit: contain; object-position: left center; }
.logo { width: 30px; height: 30px; flex: none; }
.nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav a {
  color: var(--muted); text-decoration: none; padding: 8px 12px; border-radius: 8px; font-weight: 600; font-size: 0.95rem;
}
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--text); background: var(--accent-soft); }
.menu-btn, .theme-btn {
  font: inherit; font-weight: 600; color: var(--text); background: transparent;
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; cursor: pointer; line-height: 1;
}
.theme-btn { width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center; }
.theme-btn svg { width: 20px; height: 20px; }
.menu-btn:hover, .theme-btn:hover { background: var(--surface-2); }

/* With JS the nav collapses on narrow screens. Without JS it simply wraps. */
@media (max-width: 880px) {
  .js .nav { display: none; width: 100%; order: 10; flex-direction: column; align-items: stretch; padding-bottom: 12px; }
  .js .nav.open { display: flex; }
  .js .nav a { padding: 12px; }
  .bar .btn.small { display: none; }
}
@media (min-width: 881px) { .menu-btn { display: none !important; } }

/* ---- buttons ------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  padding: 13px 22px; border-radius: 12px; border: 1px solid transparent; line-height: 1.1;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.btn.primary { background: var(--btn); color: var(--btn-ink); }
.btn.primary:hover { background: var(--btn-hover); color: var(--btn-ink); }
.btn.secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn.secondary:hover { background: var(--surface-2); color: var(--text); }
.btn.small { padding: 9px 16px; font-size: 0.95rem; border-radius: 10px; }
.btn:active { transform: translateY(1px); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- hero text ----------------------------------------------------------------- */

.eyebrow {
  display: inline-block; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 38em; margin-bottom: 1.6em; }
.fine { font-size: 0.9rem; color: var(--muted); }

/* ---- sections ------------------------------------------------------------------ */

.section { padding: clamp(44px, 7vw, 84px) 0; }
.section.alt { background: var(--surface); border-block: 1px solid var(--border); }
.section-head { max-width: 46em; margin-bottom: 36px; }
.section-head p { color: var(--muted); font-size: 1.08rem; }

.facts {
  list-style: none; margin: 0; padding: 18px 0; display: grid; gap: 10px 28px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.facts li { display: flex; align-items: center; gap: 10px; font-weight: 650; }
.facts svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.strip { background: var(--surface); border-block: 1px solid var(--border); }

.grid { display: grid; gap: 18px; }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px;
}
.section.alt .card { background: var(--bg); }
.card p:last-child { margin-bottom: 0; }
.card p { color: var(--muted); }
.icon {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 16px;
}
.icon svg { width: 24px; height: 24px; }

.soon { background: var(--soon-bg); color: var(--soon-text); font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; display: inline-block; margin-bottom: 12px; }

.cta {
  text-align: center; padding: clamp(44px, 7vw, 80px) 20px; border-radius: 22px;
  background: var(--accent-soft); border: 1px solid var(--border);
}
.cta p { color: var(--muted); max-width: 36em; margin-inline: auto; margin-bottom: 1.4em; }
.cta .actions { justify-content: center; }

/* ---- footer -------------------------------------------------------------------- */

.site-footer { background: var(--surface); border-top: 1px solid var(--border); padding: 44px 0 28px; margin-top: 40px; }
.cols { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 28px; }
.cols h2 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 12px; }
.cols ul { list-style: none; margin: 0; padding: 0; }
.cols li { margin-bottom: 8px; }
.cols a { text-decoration: none; color: var(--text); }
.cols a:hover { color: var(--accent); text-decoration: underline; }
.cols p { color: var(--muted); font-size: 0.95rem; max-width: 22em; }
.site-footer .fine { border-top: 1px solid var(--border); padding-top: 18px; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}
@media print {
  .site-header, .site-footer, .skip { display: none; }
  body { background: #fff; color: #000; }
}