/* =============================================================
   Privacy Score - Design System v3
   Source of truth: Open Design handoff 2026-05-22
   All colors are OKLCh. Do not add hardcoded hex.
   ============================================================= */

/* -------------------------------------------------------------
   1. CSS Custom Properties (:root)
   ------------------------------------------------------------- */
:root {
  /* - Surfaces - */
  --bg:        oklch(95.5% 0.014 85);   /* warm off-white page background */
  --surface:   oklch(100% 0 0);          /* white: cards, panels */
  --surface-1: var(--bg);                /* legacy page background alias */
  --surface-2: oklch(97% 0.006 260);    /* input bg, secondary fills */
  --surface-3: oklch(95% 0.008 260);    /* hover on surface-2 */

  /* - Text - */
  --fg:     oklch(17% 0.022 264);  /* primary text, headings */
  --ink:    var(--fg);              /* legacy primary text alias */
  --muted:  oklch(50% 0.014 258);  /* body text, descriptions */
  --subtle: oklch(68% 0.010 255);  /* placeholders, captions */

  /* - Borders - */
  --border:   oklch(90% 0.009 260);  /* default */
  --border-2: oklch(84% 0.011 260);  /* stronger / hover */

  /* - Accent (Deep Sapphire) - */
  --accent:        oklch(47% 0.19 252);
  --accent-hover:  oklch(42% 0.21 252);
  --accent-subtle: oklch(96% 0.05 252);
  --accent-mid:    oklch(88% 0.07 252);

  /* - Grade A: Emerald / Pass - */
  --grade-a:        oklch(52% 0.18 145);
  --grade-a-bg:     oklch(95.5% 0.055 145);
  --grade-a-border: oklch(86% 0.1 145);

  /* - Grade B: Amber / Partial - */
  --grade-b:        oklch(59% 0.155 68);
  --grade-b-bg:     oklch(96% 0.05 85);
  --grade-b-border: oklch(86% 0.09 75);

  /* - Grade C: Red / Fail - */
  --grade-c:        oklch(52% 0.20 22);
  --grade-c-bg:     oklch(96.5% 0.04 22);
  --grade-c-border: oklch(86% 0.09 22);

  /* Semantic aliases */
  --pass:    var(--grade-a);
  --partial: var(--grade-b);
  --fail:    var(--grade-c);

  /* - Typography - */
  --font: 'Heebo', 'Arial', sans-serif;

  /* - Radii - */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 9999px;

  /* - Shadows - */
  --shadow-sm: 0 1px 3px oklch(17% 0.022 264 / 0.06), 0 1px 2px oklch(17% 0.022 264 / 0.04);
  --shadow-md: 0 4px 12px oklch(17% 0.022 264 / 0.08), 0 2px 4px oklch(17% 0.022 264 / 0.04);
  --shadow-lg: 0 8px 32px oklch(17% 0.022 264 / 0.10), 0 2px 8px oklch(17% 0.022 264 / 0.06);
  --shadow-accent: 0 0 0 3px oklch(47% 0.19 252 / 0.25);

  /* - Transitions - */
  --t-fast:     0.15s;
  --t-base:     0.25s;
  --t-slow:     0.35s;
  --t-reveal:   0.50s;
  --t-modal:    0.30s;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-std:   cubic-bezier(0.4, 0, 0.2, 1);

  /* - Nav - */
  --nav-h: 64px;
}


/* -------------------------------------------------------------
   2. Base Reset
   ------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--font); }
input, textarea, select { font-family: var(--font); }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 700; }


/* -------------------------------------------------------------
   3. Icons - Material Symbols always LTR
   ------------------------------------------------------------- */
.material-symbols-outlined {
  direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}


/* -------------------------------------------------------------
   4. Accessibility
   ------------------------------------------------------------- */
/* Skip link */
.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: inset-inline-start 0s;
}
.skip-link:focus {
  inset-inline-start: 0;
}

/* Focus visible ring */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* x-cloak - hide Alpine elements before boot */
[x-cloak] { display: none !important; }


/* -------------------------------------------------------------
   5. Layout containers
   ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 24px;
}
.container--sm {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding-inline: 24px;
}
.container--wide {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
}

@media (max-width: 639px) {
  .container,
  .container--sm,
  .container--wide {
    padding-inline: 16px;
  }
}


/* -------------------------------------------------------------
   6. Typography scale
   ------------------------------------------------------------- */
.text-hero {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.text-section {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.text-card-heading {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}
.text-lead {
  font-size: clamp(1rem, 2vw, 1.175rem);
  font-weight: 400;
  line-height: 1.7;
  color: var(--muted);
}
.text-body-lg  { font-size: 1.05rem; line-height: 1.65; }
.text-body     { font-size: 1rem;    line-height: 1.6; }
.text-body-sm  { font-size: 0.9rem;  line-height: 1.65; }
.text-label    { font-size: 0.875rem; font-weight: 500; line-height: 1.5; }
.text-micro    { font-size: 0.8rem;  font-weight: 500; line-height: 1.4; }
.text-score    { font-size: 3rem;    font-weight: 900; line-height: 1; }
.text-stat-num { font-size: 1.5rem;  font-weight: 900; line-height: 1; }

/* Eyebrow label (colored small-caps style) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.eyebrow .material-symbols-outlined { font-size: 14px; }


/* -------------------------------------------------------------
   7. Buttons
   ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  padding: 12px 20px;
  border-radius: var(--r-md);
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  cursor: pointer;
  border: 1.5px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Primary / Analyze */
.btn-primary,
.btn-analyze {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  width: 100%;
  padding: 14px 20px;
  font-size: 1rem;
  border-radius: var(--r-md);
}
.btn-primary:hover,
.btn-analyze:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-primary:active,
.btn-analyze:active {
  transform: translateY(0);
}
.btn-primary:disabled,
.btn-analyze:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Secondary outline */
.btn-outline {
  background: var(--surface);
  color: var(--fg);
  border-color: var(--border-2);
}
.btn-outline:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
}

/* Ghost / neutral */
.btn-ghost {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
}
.btn-ghost:hover {
  background: var(--surface-2);
  color: var(--fg);
}

/* CTA white (on dark background) */
.btn-cta-white {
  background: #fff;
  color: var(--accent);
  border-color: #fff;
  font-weight: 700;
}
.btn-cta-white:hover {
  background: oklch(95% 0.05 252);
  transform: translateY(-1px);
}

/* CTA outline-white (on dark bg) */
.btn-cta-outline {
  background: transparent;
  color: #fff;
  border-color: oklch(100% 0 0 / 0.4);
}
.btn-cta-outline:hover {
  border-color: #fff;
  background: oklch(100% 0 0 / 0.08);
}


/* -------------------------------------------------------------
   8. Form elements
   ------------------------------------------------------------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg);
}
.form-label .required-star {
  color: var(--grade-c);
  margin-inline-start: 2px;
}
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font);
  font-size: 0.95rem;
  color: var(--fg);
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  outline: none;
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--subtle); }
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: var(--shadow-accent);
}
.form-input.error,
.form-textarea.error,
.form-select.error {
  border-color: var(--grade-c);
}
.form-error-msg {
  font-size: 0.8rem;
  color: var(--grade-c);
  display: none;
}
.form-error-msg.visible { display: block; }

/* URL / email inputs: always LTR */
input[type="url"],
input[type="email"],
.input-ltr {
  direction: ltr;
  text-align: left;
}

.form-textarea { resize: vertical; min-height: 120px; }
.form-select   { cursor: pointer; appearance: none; }


/* -------------------------------------------------------------
   9. URL Input (homepage analysis card)
   ------------------------------------------------------------- */
.url-input-wrapper {
  position: relative;
}
.url-input-wrapper .url-icon {
  position: absolute;
  /* Physical left - LTR exception for URL field */
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--subtle);
  pointer-events: none;
  font-size: 18px;
}
.url-input-wrapper input[type="url"] {
  padding-left: 44px; /* physical - LTR exception */
  padding-right: 14px;
}


/* -------------------------------------------------------------
   10. Chips / Pills / Badges
   ------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 0.78rem;
  font-weight: 600;
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.chip--accent {
  background: var(--accent-subtle);
  border-color: var(--accent-mid);
  color: var(--accent);
}
.chip--pass {
  background: var(--grade-a-bg);
  border-color: var(--grade-a-border);
  color: var(--grade-a);
}
.chip--partial {
  background: var(--grade-b-bg);
  border-color: var(--grade-b-border);
  color: var(--grade-b);
}
.chip--fail {
  background: var(--grade-c-bg);
  border-color: var(--grade-c-border);
  color: var(--grade-c);
}
.chip--neutral {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--muted);
}

/* Verdict chips on consumer cards */
.verdict-ok      { background: var(--grade-a-bg); border-color: var(--grade-a-border); color: var(--grade-a); }
.verdict-warning  { background: var(--grade-b-bg); border-color: var(--grade-b-border); color: var(--grade-b); }
.verdict-concern  { background: var(--grade-c-bg); border-color: var(--grade-c-border); color: var(--grade-c); }


/* -------------------------------------------------------------
   11. Grade Hero
   ------------------------------------------------------------- */
.grade-hero {
  width: 164px;
  height: 164px;
  border-radius: var(--r-lg);
  border: 2.5px solid var(--border-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
}
.grade-hero__letter {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
}
.grade-hero__desc {
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  padding-inline: 8px;
  line-height: 1.3;
}
.grade-hero--a {
  background: var(--grade-a-bg);
  border-color: var(--grade-a-border);
}
.grade-hero--a .grade-hero__letter { color: var(--grade-a); }
.grade-hero--a .grade-hero__desc   { color: var(--grade-a); }
.grade-hero--b {
  background: var(--grade-b-bg);
  border-color: var(--grade-b-border);
}
.grade-hero--b .grade-hero__letter { color: var(--grade-b); }
.grade-hero--b .grade-hero__desc   { color: var(--grade-b); }
.grade-hero--c {
  background: var(--grade-c-bg);
  border-color: var(--grade-c-border);
}
.grade-hero--c .grade-hero__letter { color: var(--grade-c); }
.grade-hero--c .grade-hero__desc   { color: var(--grade-c); }

@media (max-width: 639px) {
  .grade-hero { width: 120px; height: 120px; }
  .grade-hero__letter { font-size: 2.75rem; }
}


/* -------------------------------------------------------------
   12. AI Summary Block
   ------------------------------------------------------------- */
.ai-summary {
  border-inline-start: 3px solid var(--accent);
  padding: 16px 20px;
  background: var(--surface-2);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.ai-summary__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  margin-block-end: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ai-summary__label .material-symbols-outlined { font-size: 14px; }
.ai-summary__body {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--muted);
}


/* -------------------------------------------------------------
   13. Stats Strip
   ------------------------------------------------------------- */
.stats-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.stat-block {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  flex: 1;
  min-width: 120px;
}
.stat-block__icon { font-size: 20px; flex-shrink: 0; }
.stat-block__icon--pass    { color: var(--pass); }
.stat-block__icon--partial { color: var(--partial); }
.stat-block__icon--fail    { color: var(--fail); }
.stat-block__count { font-size: 1.25rem; font-weight: 900; line-height: 1; }
.stat-block__label { font-size: 0.78rem; color: var(--muted); line-height: 1.3; }


/* -------------------------------------------------------------
   14. Indicator Sections + Accordion
   ------------------------------------------------------------- */
.indicators-section { margin-block-end: 48px; }

.indicators-section__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  border-radius: var(--r-md) var(--r-md) 0 0;
  border: 1.5px solid var(--border);
  border-block-end: none;
}
.indicators-section__header--pass    { background: var(--grade-a-bg); border-color: var(--grade-a-border); }
.indicators-section__header--partial { background: var(--grade-b-bg); border-color: var(--grade-b-border); }
.indicators-section__header--fail    { background: var(--grade-c-bg); border-color: var(--grade-c-border); }

.indicators-section__icon { font-size: 22px; flex-shrink: 0; }
.indicators-section__icon--pass    { color: var(--grade-a); }
.indicators-section__icon--partial { color: var(--grade-b); }
.indicators-section__icon--fail    { color: var(--grade-c); }

.indicators-section__title {
  font-size: 0.95rem;
  font-weight: 700;
  flex: 1;
}
.indicators-section__sub {
  font-size: 0.8rem;
  color: var(--muted);
}
.indicators-section__count {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--r-full);
}
.indicators-section__count--pass    { background: var(--grade-a-border); color: var(--grade-a); }
.indicators-section__count--partial { background: var(--grade-b-border); color: var(--grade-b); }
.indicators-section__count--fail    { background: var(--grade-c-border); color: var(--grade-c); }

@media (max-width: 639px) {
  .indicators-section__sub { display: none; }
}

/* Accordion list */
.indicators-list {
  border: 1.5px solid var(--border);
  border-radius: 0 0 var(--r-md) var(--r-md);
  overflow: hidden;
}
.indicators-list--pass    { border-color: var(--grade-a-border); }
.indicators-list--partial { border-color: var(--grade-b-border); }
.indicators-list--fail    { border-color: var(--grade-c-border); }

/* Individual indicator card */
.ind-card { border-block-end: 1.5px solid var(--border); }
.ind-card:last-child { border-block-end: none; }

.ind-card__trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 22px;
  background: var(--surface);
  cursor: pointer;
  text-align: start;
  transition: background var(--t-fast);
}
.ind-card__trigger:hover { background: var(--surface-2); }

.ind-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ind-card__dot--pass    { background: var(--grade-a); }
.ind-card__dot--partial { background: var(--grade-b); }
.ind-card__dot--fail    { background: var(--grade-c); }

.ind-card__name {
  font-size: 0.9rem;
  font-weight: 600;
  flex: 1;
}
.ind-card__summary {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
}
.ind-card__chevron {
  font-size: 20px;
  color: var(--subtle);
  flex-shrink: 0;
  transition: transform var(--t-slow) var(--ease-std);
}
.ind-card[aria-expanded="true"] .ind-card__chevron {
  transform: rotate(180deg);
}

/* Accordion body */
.ind-card__body {
  display: none;
  padding-inline-start: 66px;
  padding-inline-end: 22px;
  padding-block: 0;
  overflow: hidden;
}
.ind-card[aria-expanded="true"] .ind-card__body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  padding-block: 16px;
}

@media (max-width: 639px) {
  .ind-card__body { padding-inline-start: 20px; }
  .ind-card[aria-expanded="true"] .ind-card__body {
    grid-template-columns: 1fr;
  }
}

.ind-panel {
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1.5px solid var(--border);
}
.ind-panel--action {
  background: var(--accent-subtle);
  border-color: var(--accent-mid);
}
.ind-panel__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-block-end: 6px;
}
.ind-panel--action .ind-panel__label { color: var(--accent); }
.ind-panel__body {
  font-size: 0.845rem;
  line-height: 1.6;
  color: var(--muted);
}
.ind-panel--action .ind-panel__body { color: var(--fg); }


/* -------------------------------------------------------------
   15. Priority Gaps
   ------------------------------------------------------------- */
.gaps-list { display: flex; flex-direction: column; gap: 12px; }

.gap-row {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  border-inline-start-width: 4px;
}
.gap-row--critical { border-inline-start-color: var(--grade-c); }
.gap-row--high     { border-inline-start-color: oklch(55% 0.18 40); }
.gap-row--medium   { border-inline-start-color: var(--grade-b); }

.gap-row__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--fg);
}
.gap-row__content { flex: 1; min-width: 0; }
.gap-row__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 6px;
  flex-wrap: wrap;
}
.gap-row__title { font-size: 0.9rem; font-weight: 700; }
.gap-row__body  { font-size: 0.845rem; color: var(--muted); line-height: 1.6; }
.gap-row__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  color: var(--muted);
  flex-shrink: 0;
}
.gap-row--critical .gap-row__badge { background: var(--grade-c-bg);  border-color: var(--grade-c-border);  color: var(--grade-c); }
.gap-row--high     .gap-row__badge { background: oklch(97% 0.04 40); border-color: oklch(85% 0.09 40);    color: oklch(40% 0.18 40); }
.gap-row--medium   .gap-row__badge { background: var(--grade-b-bg);  border-color: var(--grade-b-border);  color: var(--grade-b); }

.gap-row__action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-block-start: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gap-row__action:hover { color: var(--accent-hover); }


/* -------------------------------------------------------------
   16. CTA Banner
   ------------------------------------------------------------- */
.cta-banner {
  background: linear-gradient(135deg, var(--accent) 0%, oklch(30% 0.18 280) 100%);
  border-radius: var(--r-lg);
  padding: 40px 36px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-banner__text { flex: 1; min-width: 200px; color: #fff; }
.cta-banner__title {
  font-size: 1.35rem;
  font-weight: 800;
  margin-block-end: 8px;
  line-height: 1.3;
}
.cta-banner__body {
  font-size: 0.9rem;
  line-height: 1.65;
  opacity: 0.88;
}
.cta-banner__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

@media (max-width: 639px) {
  .cta-banner {
    flex-direction: column;
    align-items: stretch;
    padding: 24px 20px;
  }
  .cta-banner__actions { flex-direction: column; }
}


/* -------------------------------------------------------------
   17. Legal Disclaimer
   ------------------------------------------------------------- */
.legal-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
}
.legal-disclaimer .material-symbols-outlined {
  font-size: 20px;
  color: var(--subtle);
  flex-shrink: 0;
  margin-block-start: 1px;
}
.legal-disclaimer__text {
  font-size: 0.825rem;
  line-height: 1.65;
  color: var(--muted);
}
.legal-disclaimer__text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* -------------------------------------------------------------
   18. Meta Bar (results pages)
   ------------------------------------------------------------- */
.meta-bar {
  background: var(--surface);
  border-block-end: 1.5px solid var(--border);
  padding: 12px 0;
}
.meta-bar__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.meta-bar__url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--accent-subtle);
  border: 1.5px solid var(--accent-mid);
  border-radius: var(--r-full);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  direction: ltr;
  text-align: left;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.meta-bar__url .material-symbols-outlined { font-size: 15px; flex-shrink: 0; }
.meta-bar__date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: var(--subtle);
}
.meta-bar__date .material-symbols-outlined { font-size: 15px; }
.meta-bar__cached {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--accent-subtle);
  border: 1.5px solid var(--accent-mid);
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
}
.meta-bar__spacer { flex: 1; }
.meta-bar__mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: oklch(95% 0.045 285);
  border: 1.5px solid oklch(84% 0.08 285);
  color: oklch(40% 0.16 285);
  border-radius: var(--r-full);
  font-size: 0.78rem;
  font-weight: 600;
}
.meta-bar__mode-badge .material-symbols-outlined { font-size: 13px; }

@media (max-width: 639px) {
  .meta-bar__url { max-width: 160px; }
}


/* -------------------------------------------------------------
   19. Consumer Topic Cards
   ------------------------------------------------------------- */
.consumer-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 639px) {
  .consumer-cards { grid-template-columns: 1fr; }
}

.c-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow var(--t-fast);
}
.c-card:hover { box-shadow: var(--shadow-md); }
.c-card--warning { border-inline-start: 4px solid var(--grade-b); }
.c-card--concern { border-inline-start: 4px solid var(--grade-c); }

.c-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.c-card__icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.c-card__icon-wrap--ok      { background: var(--grade-a-bg); }
.c-card__icon-wrap--ok .material-symbols-outlined { color: var(--grade-a); }
.c-card__icon-wrap--warning { background: var(--grade-b-bg); }
.c-card__icon-wrap--warning .material-symbols-outlined { color: var(--grade-b); }
.c-card__icon-wrap--concern { background: var(--grade-c-bg); }
.c-card__icon-wrap--concern .material-symbols-outlined { color: var(--grade-c); }

.c-card__verdict {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--r-full);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1.5px solid;
}
.c-card__verdict .material-symbols-outlined { font-size: 13px; }
.c-card__verdict--ok      { background: var(--grade-a-bg);  border-color: var(--grade-a-border);  color: var(--grade-a); }
.c-card__verdict--warning { background: var(--grade-b-bg);  border-color: var(--grade-b-border);  color: var(--grade-b); }
.c-card__verdict--concern { background: var(--grade-c-bg);  border-color: var(--grade-c-border);  color: var(--grade-c); }
.c-card__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.3;
}
.c-card__body {
  font-size: 0.845rem;
  color: var(--muted);
  line-height: 1.65;
}


/* -------------------------------------------------------------
   20. Key Observations Section
   ------------------------------------------------------------- */
.key-observations {
  background: var(--grade-b-bg);
  border: 1.5px solid var(--grade-b-border);
  border-radius: var(--r-md);
  padding: 20px 24px;
}
.key-observations__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--grade-b);
  margin-block-end: 12px;
}
.key-observations__title .material-symbols-outlined { font-size: 22px; }
.key-observations__list { display: flex; flex-direction: column; gap: 8px; }
.key-observations__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--fg);
}
.key-observations__item .material-symbols-outlined { font-size: 16px; color: var(--grade-b); flex-shrink: 0; margin-block-start: 2px; }


/* -------------------------------------------------------------
   21. Cross-CTA (consumer results)
   ------------------------------------------------------------- */
.cross-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: var(--accent-subtle);
  border: 1.5px solid var(--accent-mid);
  border-radius: var(--r-md);
}
.cross-cta__text strong  { display: block; font-size: 0.95rem; font-weight: 700; color: var(--fg); }
.cross-cta__text span    { font-size: 0.875rem; color: var(--muted); }
.cross-cta .btn-primary  { width: auto; white-space: nowrap; }

@media (max-width: 639px) {
  .cross-cta { flex-direction: column; align-items: stretch; }
}


/* -------------------------------------------------------------
   22. User Rights Section (consumer)
   ------------------------------------------------------------- */
.rights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 639px) { .rights-grid { grid-template-columns: 1fr; } }

.right-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
}
.right-card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--accent-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.right-card__icon .material-symbols-outlined { font-size: 18px; color: var(--accent); }
.right-card__title { font-size: 0.875rem; font-weight: 700; margin-block-end: 4px; }
.right-card__body  { font-size: 0.8rem; color: var(--muted); line-height: 1.5; }


/* -------------------------------------------------------------
   23. Mode Toggle (homepage)
   ------------------------------------------------------------- */
.mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px;
}
.mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border-radius: 9px;
  border: 1.5px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  font-family: var(--font);
  text-align: center;
}
.mode-btn:hover:not([aria-pressed="true"]) { background: var(--surface-3); }
.mode-btn[aria-pressed="true"] {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.mode-btn .material-symbols-outlined {
  font-size: 22px;
  color: var(--subtle);
  transition: color var(--t-fast);
}
.mode-btn[aria-pressed="true"] .material-symbols-outlined { color: var(--accent); }
.mode-btn__label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--fg);
}
.mode-btn__sub {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.3;
}


/* -------------------------------------------------------------
   24. Loading State (analysis card)
   ------------------------------------------------------------- */
.loading-state { display: none; }
.loading-state.active { display: block; }

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-inline: auto;
  margin-block-end: 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.loading-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--subtle);
  transition: color var(--t-base);
}
.loading-step.active { color: var(--accent); font-weight: 600; }
.loading-step.done   { color: var(--pass); }
.loading-step__icon  { font-size: 18px; flex-shrink: 0; }
.loading-step.active .loading-step__icon { color: var(--accent); }
.loading-step.done   .loading-step__icon { color: var(--pass); }


/* -------------------------------------------------------------
   25. Error States
   ------------------------------------------------------------- */
.error-state {
  display: none;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1.5px solid;
  gap: 10px;
  align-items: flex-start;
}
.error-state.active { display: flex; }

.error-state--unreachable { background: var(--grade-c-bg); border-color: var(--grade-c-border); }
.error-state--no-policy   { background: var(--grade-b-bg); border-color: var(--grade-b-border); }
.error-state--rate-limit  { background: var(--surface-2);  border-color: var(--border); }
.error-state--general     { background: var(--grade-c-bg); border-color: var(--grade-c-border); }

.error-state .material-symbols-outlined { font-size: 20px; flex-shrink: 0; margin-block-start: 1px; }
.error-state--unreachable .material-symbols-outlined { color: var(--grade-c); }
.error-state--no-policy   .material-symbols-outlined { color: var(--grade-b); }
.error-state--rate-limit  .material-symbols-outlined { color: var(--subtle); }
.error-state--general     .material-symbols-outlined { color: var(--grade-c); }

.error-state__title { font-size: 0.875rem; font-weight: 700; margin-block-end: 3px; }
.error-state__body  { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }


/* -------------------------------------------------------------
   26. Step Cards (How it works)
   ------------------------------------------------------------- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 56px;
  row-gap: 28px;
  position: relative;
  direction: ltr;
}
@media (max-width: 767px) {
  .steps-grid { grid-template-columns: 1fr; gap: 16px; }
  .steps-grid > .step-card:nth-child(1) { order: 3; }
  .steps-grid > .step-card:nth-child(3) { order: 2; }
  .steps-grid > .step-card:nth-child(5) { order: 1; }
}

.step-card {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  min-height: 230px;
  padding: 34px 30px 30px;
  text-align: center;
  position: relative;
  direction: rtl;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 768px) {
  .steps-grid > .step-card:nth-child(1) { grid-column: 1; grid-row: 1; }
  .steps-grid > .step-card:nth-child(3) { grid-column: 2; grid-row: 1; }
  .steps-grid > .step-card:nth-child(5) { grid-column: 3; grid-row: 1; }
}
.step-card__num {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  margin-block-end: 22px;
}
.step-card__title { font-size: 1.05rem; font-weight: 800; margin-block-end: 10px; }
.step-card__body  { font-size: 0.9rem; color: var(--muted); line-height: 1.65; }

/* Connector arrows between steps (desktop only) */
.steps-connector {
  position: absolute;
  top: 54px;
  color: var(--subtle);
  font-size: 20px;
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--surface);
  transform: translateX(-50%);
}
@media (min-width: 768px) { .steps-connector { display: flex; } }
.steps-connector--1 { left: 33.333%; }
.steps-connector--2 { left: 66.666%; }


/* -------------------------------------------------------------
   27. FAQ Accordion
   ------------------------------------------------------------- */
.faq-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 767px) {
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.faq-sidebar__body  { font-size: 0.9rem; color: var(--muted); line-height: 1.6; margin-block-end: 16px; }

.faq-list { display: flex; flex-direction: column; }
.faq-item { border-block-end: 1.5px solid var(--border); }
.faq-item:first-child { border-block-start: 1.5px solid var(--border); }

.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 18px 0;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg);
  background: none;
  border: none;
  text-align: start;
  font-family: var(--font);
}
.faq-trigger .material-symbols-outlined {
  font-size: 20px;
  color: var(--subtle);
  flex-shrink: 0;
  transition: transform var(--t-slow) var(--ease-std);
}
.faq-item[aria-expanded="true"] .faq-trigger .material-symbols-outlined {
  transform: rotate(180deg);
}

.faq-body {
  display: none;
  padding-block-end: 18px;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.65;
}
.faq-item[aria-expanded="true"] .faq-body { display: block; }


/* -------------------------------------------------------------
   28. Hero radial gradient
   ------------------------------------------------------------- */
.hero-gradient {
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%,
      oklch(94% 0.06 252 / 0.25) 0%,
      transparent 70%),
    var(--bg);
}


/* -------------------------------------------------------------
   29. Analysis Card
   ------------------------------------------------------------- */
.analysis-card {
  max-width: 680px;
  margin-inline: auto;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 34px;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 639px) {
  .analysis-card { padding: 20px; border-radius: var(--r-lg); }
}

.analysis-card__disclaimer {
  font-size: 0.78rem;
  color: var(--subtle);
  text-align: center;
  margin-block-start: 12px;
  line-height: 1.5;
}

/* Trust chips row */
.trust-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  list-style: none;
  margin-block-start: 16px;
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
}
.trust-chip .material-symbols-outlined { font-size: 18px; color: var(--pass); }

/* Hero badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: var(--accent-subtle);
  border: 1.5px solid var(--accent-mid);
  border-radius: var(--r-full);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--accent);
}
.hero-badge .material-symbols-outlined { font-size: 16px; }


/* -------------------------------------------------------------
   30. Phase reveal classes (homepage results)
   ------------------------------------------------------------- */
.phase-hidden {
  opacity: 0;
  transform: translateY(12px);
}
.phase-revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--t-reveal) var(--ease-out),
              transform var(--t-reveal) var(--ease-out);
}


/* -------------------------------------------------------------
   31. Score Hero section layout (results pages)
   ------------------------------------------------------------- */
.score-hero {
  padding-block: 48px 40px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 639px) {
  .score-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-block: 32px 24px;
    text-align: center;
  }
  .ai-summary { text-align: start; }
  .stats-strip { justify-content: center; }
}


/* -------------------------------------------------------------
   32. Section heading with padding
   ------------------------------------------------------------- */
.section-heading {
  margin-block-end: 24px;
}
.section-heading__title  { font-size: 1.25rem; font-weight: 800; margin-block-start: 8px; }
.section-heading__sub    { font-size: 0.875rem; color: var(--muted); margin-block-start: 6px; }


/* -------------------------------------------------------------
   33. Article cards
   ------------------------------------------------------------- */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1023px) { .articles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .articles-grid { grid-template-columns: 1fr; } }

.article-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow var(--t-base), transform var(--t-base);
  display: flex;
  flex-direction: column;
}
.article-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.article-card__thumb {
  height: 140px;
  background: linear-gradient(135deg, var(--accent-subtle) 0%, var(--accent-mid) 100%);
  flex-shrink: 0;
}
.article-card__body { padding: 18px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.article-card__cat  { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); }
.article-card__title { font-size: 0.9rem; font-weight: 700; line-height: 1.4; flex: 1; }
.article-card__excerpt { font-size: 0.82rem; color: var(--muted); line-height: 1.55; }
.article-card__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--subtle);
  padding-block-start: 8px;
  border-block-start: 1.5px solid var(--border);
  margin-block-start: 8px;
}

/* Filter chips */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-end: 28px;
}
.filter-chip {
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.filter-chip:hover { background: var(--surface-2); color: var(--fg); }
.filter-chip.active {
  background: var(--accent-subtle);
  border-color: var(--accent-mid);
  color: var(--accent);
}

/* Article card filter fade */
.article-card.filtered-out { display: none; }
.article-card.filter-fade {
  opacity: 0;
  animation: filterFadeIn 0.25s var(--ease-out) forwards;
}
@keyframes filterFadeIn { to { opacity: 1; } }


/* -------------------------------------------------------------
   34. Legal pages (Privacy Policy, Terms, Accessibility)
   ------------------------------------------------------------- */
.legal-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 899px) {
  .legal-layout { grid-template-columns: 1fr; gap: 24px; }
  .legal-sidenav { position: static !important; }
}

.legal-sidenav {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}
.legal-sidenav__list { display: flex; flex-direction: column; gap: 2px; }
.legal-sidenav__link {
  display: block;
  padding: 8px 12px;
  font-size: 0.875rem;
  color: var(--muted);
  border-radius: var(--r-sm);
  border-inline-start: 2px solid transparent;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.legal-sidenav__link:hover { color: var(--fg); background: var(--surface-2); }
.legal-sidenav__link.active { color: var(--accent); border-inline-start-color: var(--accent); font-weight: 600; }

.legal-content h2 {
  font-size: 1.15rem;
  font-weight: 800;
  margin-block: 40px 16px;
  padding-block-start: 8px;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.legal-content h2:first-child { margin-block-start: 0; }
.legal-content p  { font-size: 0.925rem; color: var(--muted); line-height: 1.7; margin-block-end: 14px; }
.legal-content ul { padding-inline-start: 20px; margin-block-end: 14px; }
.legal-content ul li { font-size: 0.925rem; color: var(--muted); line-height: 1.7; margin-block-end: 6px; list-style: disc; }
.legal-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal-content strong { font-weight: 700; color: var(--fg); }

.legal-contact-box {
  border-inline-start: 3px solid var(--accent);
  padding: 16px 20px;
  background: var(--accent-subtle);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin-block-start: 32px;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.65;
}
.legal-contact-box a { color: var(--accent); text-decoration: underline; }


/* -------------------------------------------------------------
   35. About page stats strip
   ------------------------------------------------------------- */
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (max-width: 767px) { .about-stats { grid-template-columns: repeat(2, 1fr); } }

.about-stat {
  background: var(--surface);
  padding: 28px 20px;
  text-align: center;
}
.about-stat__value {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 900;
  color: var(--fg);
  line-height: 1;
  margin-block-end: 8px;
}
.about-stat__label { font-size: 0.82rem; color: var(--muted); line-height: 1.4; }

/* Operator / Founder card */
.team-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
}
.team-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-end: 14px;
}
.team-card__name  { font-size: 1.1rem; font-weight: 800; margin-block-end: 4px; }
.team-card__title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  margin-block-end: 12px;
}
.team-card__bio   { font-size: 0.875rem; color: var(--muted); line-height: 1.65; margin-block-end: 16px; }
.team-card__links { display: flex; gap: 8px; flex-wrap: wrap; }

/* About page disclaimer */
.about-disclaimer {
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px 22px;
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.65;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.about-disclaimer .material-symbols-outlined { font-size: 18px; color: var(--subtle); flex-shrink: 0; margin-block-start: 1px; }


/* -------------------------------------------------------------
   36. Contact page
   ------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: start;
}
@media (max-width: 899px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-perks { display: flex; flex-direction: column; gap: 16px; }
.contact-perk {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.contact-perk__icon {
  width: 40px;
  height: 40px;
  background: var(--accent-subtle);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-perk__icon .material-symbols-outlined { font-size: 20px; color: var(--accent); }
.contact-perk__title { font-size: 0.9rem; font-weight: 700; margin-block-end: 3px; }
.contact-perk__body  { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }

.contact-form-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px;
  box-shadow: var(--shadow-md);
}
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 639px) { .contact-form-row { grid-template-columns: 1fr; } }

.contact-disclaimer {
  font-size: 0.78rem;
  color: var(--subtle);
  line-height: 1.5;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
}


/* -------------------------------------------------------------
   37. Featured article card (articles listing)
   ------------------------------------------------------------- */
.featured-article {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-block-end: 40px;
}
@media (max-width: 767px) { .featured-article { grid-template-columns: 1fr; } }

.featured-article__thumb {
  background: linear-gradient(135deg, var(--accent) 0%, oklch(30% 0.18 280) 100%);
  min-height: 220px;
}
.featured-article__body { padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.featured-article__tag  { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); }
.featured-article__title { font-size: 1.35rem; font-weight: 800; line-height: 1.3; }
.featured-article__excerpt { font-size: 0.9rem; color: var(--muted); line-height: 1.6; flex: 1; }
.featured-article__meta { font-size: 0.8rem; color: var(--subtle); display: flex; gap: 12px; }


/* -------------------------------------------------------------
   38. Article detail
   ------------------------------------------------------------- */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 48px;
  align-items: start;
}
@media (max-width: 899px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { position: static !important; }
}

.article-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}
.article-sidebar__toc { margin-block-end: 24px; }
.toc-label  { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--subtle); margin-block-end: 10px; }
.toc-list   { display: flex; flex-direction: column; gap: 2px; }
.toc-link   { font-size: 0.85rem; color: var(--muted); padding: 5px 10px; border-radius: var(--r-sm); border-inline-start: 2px solid transparent; display: block; transition: color var(--t-fast), border-color var(--t-fast); }
.toc-link:hover  { color: var(--fg); }
.toc-link.active { color: var(--accent); border-inline-start-color: var(--accent); font-weight: 600; }

.article-body { max-width: 680px; }
.article-body h2 {
  font-size: 1.25rem; font-weight: 800;
  margin-block: 36px 14px;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.article-body h3 { font-size: 1.05rem; font-weight: 700; margin-block: 24px 10px; }
.article-body p  { font-size: 0.95rem; color: var(--muted); line-height: 1.75; margin-block-end: 16px; }
.article-body ul, .article-body ol { padding-inline-start: 22px; margin-block-end: 16px; }
.article-body li { font-size: 0.95rem; color: var(--muted); line-height: 1.7; margin-block-end: 6px; }
.article-body ul li { list-style: disc; }
.article-body ol li { list-style: decimal; }
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.article-body strong { font-weight: 700; color: var(--fg); }

.info-box, .warn-box {
  border-inline-start: 3px solid;
  padding: 14px 18px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin-block: 20px;
  font-size: 0.9rem;
  line-height: 1.65;
}
.info-box { background: var(--accent-subtle); border-color: var(--accent); color: var(--fg); }
.warn-box  { background: var(--grade-b-bg);   border-color: var(--grade-b); color: oklch(35% 0.12 68); }

.pull-quote {
  border-inline-start: 4px solid var(--accent);
  padding: 16px 24px;
  margin-block: 24px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.5;
}

.article-inline-cta {
  background: var(--accent);
  color: #fff;
  padding: 20px 24px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-block: 24px;
}
.article-inline-cta__text { flex: 1; font-size: 0.95rem; font-weight: 600; line-height: 1.4; }


/* -------------------------------------------------------------
   39. Accessibility conformance badge
   ------------------------------------------------------------- */
.conformance-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: var(--grade-a-bg);
  border: 1.5px solid var(--grade-a-border);
  border-radius: var(--r-md);
  margin-block: 16px;
}
.conformance-badge__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--grade-a);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.conformance-badge__icon .material-symbols-outlined { font-size: 22px; color: #fff; }
.conformance-badge__title { font-size: 0.95rem; font-weight: 800; color: var(--grade-a); }
.conformance-badge__sub   { font-size: 0.78rem; color: var(--grade-a); opacity: 0.8; }

/* Accessibility feature row */
.a11y-feature {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-block-end: 1.5px solid var(--border);
}
.a11y-feature:last-child { border-block-end: none; }
.a11y-feature__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--accent-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.a11y-feature__icon .material-symbols-outlined { font-size: 18px; color: var(--accent); }
.a11y-feature__title { font-size: 0.9rem; font-weight: 700; margin-block-end: 3px; }
.a11y-feature__body  { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }


/* -------------------------------------------------------------
   40. Utility helpers
   ------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.text-center { text-align: center; }
.text-start  { text-align: start; }
.text-accent { color: var(--accent); }
.text-muted  { color: var(--muted); }
.text-subtle { color: var(--subtle); }
.text-pass   { color: var(--pass); }
.text-partial { color: var(--partial); }
.text-fail   { color: var(--fail); }
.mt-8  { margin-block-start: 8px; }
.mt-12 { margin-block-start: 12px; }
.mt-16 { margin-block-start: 16px; }
.mt-24 { margin-block-start: 24px; }
.mt-32 { margin-block-start: 32px; }
.mt-40 { margin-block-start: 40px; }
.mt-48 { margin-block-start: 48px; }
.mt-64 { margin-block-start: 64px; }
.mb-8  { margin-block-end: 8px; }
.mb-12 { margin-block-end: 12px; }
.mb-16 { margin-block-end: 16px; }
.mb-24 { margin-block-end: 24px; }
.mb-32 { margin-block-end: 32px; }
.mb-40 { margin-block-end: 40px; }
.mb-48 { margin-block-end: 48px; }

.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-6  { gap: 6px; }
.gap-8  { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }
.gap-48 { gap: 48px; }
.flex-1 { flex: 1; }
.w-full { width: 100%; }
.hidden { display: none !important; }


/* -------------------------------------------------------------
   41. prefers-reduced-motion: kill all animations
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .loading-spinner  { animation: none; }
  .phase-hidden     { opacity: 0; transform: none !important; }
  .phase-revealed   { opacity: 1; transform: none !important; transition: opacity 0.2s; }
  .ind-card__body   { transition: none; }
  .faq-body         { transition: none; }
}