/* ===== Design tokens (from the SilicoSchool logo: navy shield + gold circuit) ===== */
:root {
  --navy-900: #0E1338;
  --navy-800: #121A4A;
  --navy-700: #1A2152;
  --navy-600: #232C66;
  --blue-500: #2F5FC4;
  --blue-400: #4A74D8;
  --gold-500: #F0A92E;
  --gold-400: #F5C25E;
  --ink: #1A2152;
  --muted: #4A5278;
  --muted-2: #8A94C2;
  --border: #DCE2F5;
  --surface: #F5F7FC;
  --surface-2: #EEF2FB;
  --white: #FFFFFF;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 10px rgba(26, 33, 82, 0.06);
  --shadow-md: 0 12px 30px rgba(26, 33, 82, 0.08);
  --shadow-lg: 0 24px 60px rgba(14, 19, 56, 0.18);

  --container: 1200px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Safety net against horizontal scroll — in particular the off-canvas mobile nav
   (.nav-links), which sits at `transform: translateX(100%)` when closed: Chromium counts
   that transformed position toward the page's scrollable overflow even though it's visually
   off-screen, which otherwise lets the whole page scroll sideways by one viewport width. */
html, body { overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blue-500); text-decoration: none; }
a:hover { color: var(--navy-700); }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
p { margin: 0; line-height: 1.65; color: var(--muted); }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 15px;
  border: 1px solid transparent;
  min-height: 48px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--gold-500); color: var(--navy-900); }
.btn-primary:hover { background: var(--gold-400); color: var(--navy-900); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-secondary { background: var(--white); color: var(--navy-700); border-color: var(--border); }
.btn-secondary:hover { background: var(--surface); color: var(--navy-700); border-color: var(--navy-700); }
.btn-ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.3); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.1); color: var(--white); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn:disabled:hover { transform: none; box-shadow: none; }
.btn-block { width: 100%; }
.btn-lg { padding: 16px 30px; font-size: 16px; }

/* ===== Top navigation ===== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  /* Solid, not translucent + backdrop-filter: a filter/backdrop-filter on an ancestor creates a
     new containing block for any `position: fixed` descendant (CSS Filter Effects spec) — which
     broke the open mobile nav drawer (.nav-links, position: fixed, inset: 72px 0 0 0): its
     `bottom: 0` was resolving against this ~72px header instead of the viewport, so the drawer
     collapsed to its content height instead of covering the screen. */
  background: var(--navy-700);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* padding-top/bottom only — see the .feature-row comment below for why: this is on the same
   element as .container (`class="container nav-row"`) in the header on every page, and the
   `padding: 10px 0` shorthand's implicit left/right 0 was winning over .container's own
   `padding: 0 24px`, leaving the header flush against the screen edge site-wide. */
.nav-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 72px; padding-top: 10px; padding-bottom: 10px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--white); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.brand img { width: 32px; height: 38px; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { color: #DCE2F5; font-size: 14.5px; font-weight: 500; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--white); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-toggle {
  display: none; background: none; border: none; color: var(--white); padding: 8px;
}
.nav-toggle svg { width: 24px; height: 24px; }

@media (max-width: 880px) {
  .nav-links { position: fixed; inset: 72px 0 0 0; background: var(--navy-700); flex-direction: column; justify-content: flex-start; align-items: stretch; padding: 24px; gap: 4px; transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 16px; }
  .nav-toggle { display: block; }
  .nav-cta .btn-secondary { display: none; }
  /* With .nav-links taken out of flow (position: fixed, closed state), only .brand and .nav-cta
     share the row — on a narrow phone their combined intrinsic width doesn't fit, so let the
     brand shrink/truncate rather than visually overlap the "Book a demo" button. */
  .nav-cta { gap: 10px; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 13.5px; }
  .brand { min-width: 0; flex: 1 1 auto; }
  .brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ===== Hero ===== */
.hero {
  background: var(--navy-700);
  color: var(--white);
  padding: 72px 0 96px;
  overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .hero { padding: 48px 0 64px; } }
.eyebrow { color: var(--gold-500); font-size: 13.5px; font-weight: 700; margin-bottom: 16px; }
.hero h1 { font-size: clamp(34px, 4.6vw, 54px); color: var(--white); margin-bottom: 20px; }
.hero .lede { color: #C9D1EE; font-size: 18px; max-width: 540px; margin-bottom: 30px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.fine-print { color: var(--muted-2); font-size: 13.5px; }

/* ===== Dashboard mock preview ===== */
.dash-card {
  background: var(--navy-600);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-lg);
}
.dash-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dash-tag { font-size: 12px; color: var(--muted-2); font-weight: 700; }
.dash-dots { display: flex; gap: 6px; }
.dash-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 12px; }
.stat-tile { background: var(--navy-900); border-radius: 12px; padding: 14px; }
.stat-tile .label { color: var(--muted-2); font-size: 13px; }
.stat-tile .value { color: var(--gold-500); font-size: 22px; font-weight: 800; margin-top: 2px; }
.bar-tile { background: var(--navy-900); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.bar-tile .label { color: var(--muted-2); font-size: 12.5px; margin-bottom: 10px; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 56px; }
.bars span { flex: 1; background: rgba(255,255,255,0.14); border-radius: 3px 3px 0 0; }
.bars span.is-current { background: var(--gold-500); }
.feed-tile { background: var(--navy-900); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: #C9D1EE; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.feed-tile .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-500); flex-shrink: 0; }
.ai-tile { background: var(--navy-900); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 14px; font-size: 13px; color: #C9D1EE; }
.ai-tile strong { color: var(--gold-500); font-weight: 700; }

/* ===== Section scaffolding ===== */
.section { padding: 88px 0; }
.section-tight { padding: 64px 0; }
/* Inner pages open with a short text-only intro (.section-tight, first child of main) followed
   by the page's first real content section — on a tall viewport the combined 64px+88px gap
   between them reads as a dead empty band before anything else loads. Tighten just that one
   transition; every other section-to-section gap on the site is untouched. */
main > .section-tight:first-child { padding-bottom: 28px; }
main > .section-tight:first-child + section { padding-top: 32px; }
/* A .feature-row carries its own 56px padding-top (the breathing room between rows further down
   the page) — stacked on top of the reduced 32px above, the very first one after the intro still
   left a ~160px dead gap before any heading appeared, worse on mobile where it reads as nearly
   two screens of blank space. Only the first row right after the intro needs this zeroed. */
main > .section-tight:first-child + section > .feature-row:first-of-type { padding-top: 0; border-top: none; }
.section-alt { background: var(--surface); }
.section-dark { background: var(--navy-700); color: var(--white); }
.section-dark p { color: #C9D1EE; }
.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.kicker { color: var(--blue-500); font-size: 13.5px; font-weight: 700; margin-bottom: 12px; display: block; }
.section-dark .kicker { color: var(--gold-500); }
.section-head h1, .section-head h2 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 14px; }
.section-head p { font-size: 17px; }

/* ===== Stats strip ===== */
.stats-strip { margin-top: -56px; position: relative; z-index: 2; }
.stats-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 36px 28px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.stat { text-align: center; }
.stat .num { font-size: 32px; font-weight: 800; color: var(--navy-700); font-variant-numeric: tabular-nums; }
.stat .num .plus { color: var(--gold-500); }
.stat .cap { font-size: 13px; color: var(--muted); margin-top: 4px; }
@media (max-width: 880px) { .stats-card { grid-template-columns: repeat(2, 1fr); } }

/* ===== Cards & grids ===== */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 28px;
}
.card-flat { background: var(--surface); border: none; border-radius: var(--radius-md); padding: 28px; }
.card-icon {
  width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--blue-500); margin-bottom: 16px;
}
.card-icon svg { width: 22px; height: 22px; }
.card h3 { font-size: 18px; margin-bottom: 8px; }
.card p { font-size: 14.5px; }
.card .tag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--blue-500); margin-bottom: 10px; }
/* Not scoped to .card — this list style is reused standalone in .feature-copy, benefit-panel
   tabs and elsewhere, and silently lost its bullet/spacing everywhere outside a .card wrapper
   when scoped that way (the global `ul { list-style: none }` reset above left it with nothing). */
ul.benefits { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
ul.benefits li { font-size: 13.5px; color: var(--muted); padding-left: 18px; position: relative; }
ul.benefits li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-500); }
.card .roles { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.role-chip { font-size: 11.5px; font-weight: 600; color: var(--navy-700); background: var(--surface-2); padding: 4px 10px; border-radius: 999px; }

/* ===== Pillars / alternating feature rows ===== */
.pillars-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .pillars-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pillars-grid { grid-template-columns: 1fr; } }
.pillar-num { font-size: 13px; font-weight: 800; color: var(--gold-500); margin-bottom: 10px; }

/* padding-top/bottom only, never the `padding: 56px 0` shorthand — every usage combines this
   class directly on the same element as .container (`class="container feature-row"`), and the
   shorthand's implicit `0` for left/right beat .container's own `padding: 0 24px` (equal
   specificity, declared later), zeroing out the page's side margins everywhere this is used. */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding-top: 56px; padding-bottom: 56px; border-top: 1px solid var(--border); }
.feature-row:first-of-type { border-top: none; }
.feature-row.reverse .feature-copy { order: 2; }
.feature-copy h3 { font-size: 26px; margin-bottom: 14px; }
.feature-copy p { font-size: 16px; margin-bottom: 14px; }
.feature-copy ul.benefits li { font-size: 14.5px; }
.feature-visual { border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 880px) {
  .feature-row, .feature-row.reverse { grid-template-columns: 1fr; }
  .feature-row.reverse .feature-copy { order: 0; }
}

/* ===== Mini preview panel (used across AI/portal mock visuals) ===== */
.mini-panel {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 20px;
}
.mini-panel.on-dark { background: var(--navy-600); border-color: rgba(255,255,255,0.08); }
.mini-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mini-panel-head .title { font-weight: 700; font-size: 14px; color: var(--ink); }
.on-dark .title { color: var(--white); }
.chip { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.chip-amber { background: #FEF3C7; color: #92400E; }
.chip-blue { background: var(--surface-2); color: var(--blue-500); }
.chip-green { background: #DCFCE7; color: #15803D; }
.progress-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.on-dark .progress-row { color: #C9D1EE; }
.progress-track { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.on-dark .progress-track { background: rgba(255,255,255,0.1); }
.progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blue-500), var(--gold-500)); }
.progress-pct { font-weight: 700; color: var(--ink); width: 36px; text-align: right; }
.on-dark .progress-pct { color: var(--white); }

/* ===== Platform benefit tabs block ===== */
.benefit-block { display: grid; grid-template-columns: 220px 1fr; gap: 40px; }
.benefit-tabs { display: flex; flex-direction: column; gap: 4px; }
.benefit-tab { text-align: left; padding: 12px 14px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: var(--muted); border: none; background: none; }
.benefit-tab.active, .benefit-tab:hover { background: var(--surface-2); color: var(--navy-700); }
.benefit-panel { display: none; }
.benefit-panel.active { display: block; }
@media (max-width: 760px) { .benefit-block { grid-template-columns: 1fr; } .benefit-tabs { flex-direction: row; overflow-x: auto; } }

/* ===== Filter bar (Features page) ===== */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.filter-chip { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--border); background: var(--white); font-size: 13.5px; font-weight: 600; color: var(--muted); }
.filter-chip.active, .filter-chip:hover { background: var(--navy-700); color: var(--white); border-color: var(--navy-700); }
.feature-category { margin-bottom: 56px; }
.feature-category h3 { font-size: 20px; margin-bottom: 20px; }

/* ===== Downloads page ===== */
.platform-section { padding: 56px 0; border-top: 1px solid var(--border); }
.platform-section:first-of-type { border-top: none; }
.platform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
/* The Android/iOS slots can carry a real, much taller poster-style screenshot instead of the
   4:3 placeholder — centering it against a short text column leaves a huge empty gap above and
   below the text, so align both to the top of the row for those instead. */
.platform-grid:has(.has-image) { align-items: start; }
.platform-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px; color: var(--muted); margin: 16px 0 22px; }
.platform-meta strong { color: var(--ink); }
.status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.status-pill.live { background: #DCFCE7; color: #15803D; }
.status-pill.soon { background: var(--surface-2); color: var(--blue-500); }
.qr-box { width: 96px; height: 96px; border: 1px dashed var(--border); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--muted-2); font-size: 11px; text-align: center; }
.device-mock {
  aspect-ratio: 4/3; border-radius: var(--radius-lg); background: var(--navy-700);
  display: flex; align-items: center; justify-content: center; color: var(--muted-2);
  font-size: 13px; border: 1px solid var(--border); overflow: hidden;
}
/* A real screenshot/poster asset replaces the placeholder box — shown at a capped, contained
   size (not stretched to fill the column) so a tall poster image doesn't dwarf the text next to
   it on desktop or mobile alike. */
.device-mock.has-image { aspect-ratio: auto; background: none; border: none; }
.device-mock.has-image img { width: auto; max-width: 200px; height: auto; max-height: 380px; margin: 0 auto; display: block; }
.device-mock img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 880px) { .platform-grid { grid-template-columns: 1fr; } }

/* ===== FAQ accordion ===== */
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 12px; overflow: hidden; }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: var(--white); border: none; text-align: left; font-weight: 700; font-size: 15.5px; color: var(--ink); }
.faq-q svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform .2s ease; color: var(--muted-2); }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-a-inner { padding: 0 22px 20px; font-size: 14.5px; }
.faq-item.open .faq-a { max-height: 320px; }

/* ===== Forms ===== */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.form-field input, .form-field select, .form-field textarea {
  font-family: inherit; font-size: 14.5px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--white); color: var(--ink);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid var(--blue-500); outline-offset: 1px; border-color: var(--blue-500); }
.form-field .error-msg { font-size: 12.5px; color: #B91C1C; display: none; }
.form-field.invalid input, .form-field.invalid select, .form-field.invalid textarea { border-color: #B91C1C; }
.form-field.invalid .error-msg { display: block; }
.form-status { margin-top: 10px; font-size: 14px; font-weight: 600; display: none; padding: 12px 16px; border-radius: 10px; }
.form-status.success { display: block; background: #DCFCE7; color: #15803D; }
.form-status.error { display: block; background: #FEE2E2; color: #B91C1C; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* ===== Legal pages ===== */
.legal-layout { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; }
.legal-nav { position: sticky; top: 96px; }
.legal-nav .label { font-weight: 700; color: var(--ink); font-size: 13.5px; margin-bottom: 10px; }
.legal-nav ul { display: flex; flex-direction: column; gap: 8px; }
.legal-nav a { font-size: 13.5px; color: var(--muted); }
.legal-nav a:hover { color: var(--blue-500); }
.legal-content h2 { font-size: 20px; margin: 36px 0 12px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { margin-bottom: 12px; }
@media (max-width: 880px) { .legal-layout { grid-template-columns: 1fr; } .legal-nav { position: static; } }

/* ===== Final CTA band ===== */
.cta-band { background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); color: var(--white); text-align: center; padding: 76px 0; }
.cta-band h2 { font-size: clamp(28px, 3.6vw, 42px); color: var(--white); margin-bottom: 14px; }
.cta-band p { color: #C9D1EE; font-size: 17px; max-width: 560px; margin: 0 auto 30px; }
.cta-band .hero-ctas { justify-content: center; margin-bottom: 0; }

/* ===== Footer ===== */
.site-footer { background: var(--navy-900); color: var(--muted-2); padding: 64px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
.footer-brand .brand { color: var(--white); margin-bottom: 14px; }
.footer-brand p { color: var(--muted-2); font-size: 13.5px; max-width: 280px; }
.footer-col .label { color: var(--white); font-weight: 700; font-size: 13.5px; margin-bottom: 14px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--muted-2); font-size: 13.5px; }
.footer-col a:hover { color: var(--white); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; }
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ===== Signature detail: a small circuit-node mark, pulled from the logo's circuit motif.
   Used only next to something actually verified/graded/approved — never decorative. ===== */
.verified-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--navy-700); flex-shrink: 0; position: relative;
}
.verified-dot::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-500);
}
.verified-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }

/* ===== Focus visibility ===== */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--blue-500); outline-offset: 2px;
}

/* ===== Reveal-on-scroll (progressive enhancement, respects reduced motion) ===== */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
  .reveal.in-view { opacity: 1; transform: none; }
}