/* ═══════════════════════════════════════════════════════════════════════════
   Ocore Diagnostic cybersécurité — styles communs aux 3 pages publiques
   (landing, quiz, résultat). Le rapport PDF garde ses styles inline car
   WeasyPrint préfère un HTML auto-suffisant.
   Suppose que style.css global est déjà chargé (variables CSS, .btn, .nav).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Bouton primaire dans le contenu audit (hero landing + nav quiz) : navy
   + halos centrés (comme avant). Sur landing fond clair c'est parfait.
   Pour quiz fond navy, surcharge plus bas avec gradient bleu→cyan. */
.audit-cta-group .btn--primary {
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(59, 130, 246, 0.4), transparent 70%),
    radial-gradient(ellipse 70% 80% at 20% 50%, rgba(34, 184, 207, 0.28), transparent 70%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-600) 100%);
}
.audit-cta-group .btn--primary:hover,
.audit-cta-group .btn--primary:focus-visible {
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(59, 130, 246, 0.55), transparent 70%),
    radial-gradient(ellipse 70% 80% at 20% 50%, rgba(34, 184, 207, 0.4), transparent 70%),
    linear-gradient(180deg, var(--navy-600) 0%, var(--navy-500) 100%);
}

/* Bouton Suivant du quiz : gradient bleu→cyan signature du site (celui
   de l'anneau du score), ressort bien sur fond navy. */
.quiz-nav .btn--primary {
  background: linear-gradient(135deg, var(--blue-500) 0%, var(--cyan) 100%);
  color: #fff;
  border: 0;
  box-shadow: 0 4px 14px -2px rgba(59, 130, 246, 0.4);
}
.quiz-nav .btn--primary:hover,
.quiz-nav .btn--primary:focus-visible {
  background: linear-gradient(135deg, var(--blue-400) 0%, var(--cyan-light) 100%);
  box-shadow: 0 6px 20px -2px rgba(59, 130, 246, 0.5);
  transform: translateY(-1px);
}


/* ═══ LANDING ═══════════════════════════════════════════════════════════ */

.audit-hero { background: linear-gradient(180deg, var(--bg-paper) 0%, var(--bg) 100%); padding: clamp(4rem, 10vh, 7rem) 0 clamp(3rem, 7vh, 5rem); position: relative; overflow: hidden; }
.audit-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(14, 30, 52, 0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 30, 52, 0.015) 1px, transparent 1px); background-size: 56px 56px; pointer-events: none; }
.audit-hero__inner { position: relative; max-width: 900px; margin: 0 auto; text-align: center; }
.audit-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.9rem; background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.18); border-radius: var(--r-round); color: var(--blue-500); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; margin-bottom: 1.5rem; }
.audit-badge svg { width: 14px; height: 14px; }
.audit-hero h1 { font-family: var(--font-serif); font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; color: var(--text); margin-bottom: 1.25rem; }
.audit-hero h1 em, .result-hero h1 em { font-style: normal; background: linear-gradient(120deg, var(--blue-500), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.audit-hero p.lead { font-size: 1.125rem; color: var(--text-soft); line-height: 1.6; max-width: 620px; margin: 0 auto 2rem; }
.audit-stat-card { max-width: 540px; margin: 0 auto 2.5rem; padding: 1.5rem 1.75rem; background: var(--bg-paper); border: 1px solid var(--border); border-left: 3px solid var(--blue-500); border-radius: var(--r-md); text-align: left; box-shadow: var(--sh-sm); }
.audit-stat-card strong { font-family: var(--font-serif); font-size: 1.75rem; color: var(--navy); display: block; line-height: 1; margin-bottom: 0.3rem; }
.audit-stat-card span { color: var(--text-soft); font-size: 0.9375rem; }
.audit-stat-card cite { display: block; margin-top: 0.5rem; font-size: 0.75rem; color: var(--text-muted); font-style: normal; }
.audit-cta-group { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.audit-reassurance { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; font-size: 0.875rem; color: var(--text-soft); }
.audit-reassurance > div { display: flex; align-items: center; gap: 0.5rem; }
.audit-reassurance svg { width: 16px; height: 16px; color: var(--green-500); flex-shrink: 0; }
/* Section "Comment ça fonctionne" en navy + halos + quadrillage (style banner
   fondateur du site principal) pour créer une rupture visuelle au milieu. */
.audit-how {
  padding: clamp(5rem, 11vh, 8rem) 0 clamp(4rem, 9vh, 6rem);
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-mesh);
}
.audit-how::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 100% 80% at 50% 50%, #000 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 50%, #000 40%, transparent 90%);
  pointer-events: none;
  z-index: -1;
}
.audit-how__title { text-align: center; font-family: var(--font-serif); font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.75rem; color: #fff; }
.audit-how__subtitle { text-align: center; color: rgba(255, 255, 255, 0.7); margin-bottom: 3rem; }
.audit-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; max-width: 1000px; margin: 0 auto; }
.audit-step {
  padding: 2rem 1.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  text-align: center;
  transition: all var(--t-med);
  backdrop-filter: blur(6px);
}
.audit-step:hover { border-color: rgba(96, 165, 250, 0.5); background: rgba(255, 255, 255, 0.06); transform: translateY(-4px); }
.audit-step__num { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--bg-paper); border-radius: var(--r-round); font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; background: linear-gradient(135deg, var(--blue-500), var(--cyan)); }
.audit-step h3 { font-family: var(--font-serif); font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; color: #fff; }
.audit-step p { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.75); line-height: 1.55; }
.audit-trust { padding: clamp(2.5rem, 5vh, 4rem) 0; background: var(--bg); border-top: 1px solid var(--border); }
.audit-trust__row { display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; text-align: center; }
.audit-trust__item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; max-width: 220px; }
.audit-trust__item svg { width: 32px; height: 32px; color: var(--blue-500); }
.audit-trust__item strong { font-family: var(--font-serif); font-size: 0.9375rem; color: var(--navy); }
.audit-trust__item span { font-size: 0.8125rem; color: var(--text-soft); line-height: 1.5; }

.audit-footer { padding: 2rem 0; text-align: center; color: var(--text-muted); font-size: 0.8125rem; border-top: 1px solid var(--border); background: var(--bg-paper); }
.audit-footer a { color: var(--text-muted); }

/* FAQ (landing) — accordéons natifs via <details><summary>, répond aux
   requêtes longue traîne Google et alimente les Rich Snippets FAQPage. */
.audit-faq { padding: clamp(3rem, 7vh, 5rem) 0; background: var(--bg-paper); border-top: 1px solid var(--border); }
.audit-faq__title { text-align: center; font-family: var(--font-serif); font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 2.5rem; }
.audit-faq__grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; max-width: 800px; margin: 0 auto; }
.audit-faq__item { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; transition: border-color var(--t-fast); }
.audit-faq__item:hover { border-color: var(--blue-400); }
.audit-faq__item summary { padding: 1.1rem 1.25rem; font-weight: 500; font-size: 1rem; color: var(--navy); cursor: pointer; list-style: none; position: relative; padding-right: 2.5rem; }
.audit-faq__item summary::-webkit-details-marker { display: none; }
.audit-faq__item summary::after { content: '+'; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--blue-500); transition: transform var(--t-fast); line-height: 1; }
.audit-faq__item[open] summary::after { content: '–'; }
.audit-faq__item[open] summary { border-bottom: 1px solid var(--border); }
.audit-faq__item p { padding: 1rem 1.25rem 1.25rem; margin: 0; font-size: 0.9375rem; color: var(--text-soft); line-height: 1.6; }
.audit-faq__item p a { color: var(--blue-500); text-decoration: none; }
.audit-faq__item p a:hover { text-decoration: underline; }

/* ═══ QUIZ ═══════════════════════════════════════════════════════════════ */

/* Quiz en navy + halos + quadrillage. Les options restent claires (cards
   blanches/translucides) pour préserver la lisibilité du formulaire. */
.quiz-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: #fff;
  position: relative;
  isolation: isolate;
  background: var(--navy-mesh);
}
.quiz-body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 100% 80% at 50% 50%, #000 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 50%, #000 40%, transparent 90%);
  pointer-events: none;
  z-index: -1;
}
.quiz-header { background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 1rem 0; backdrop-filter: blur(8px); }
.quiz-header__inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.quiz-header__brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: #fff; }
.quiz-header__brand img { width: 32px; height: 36px; }
.quiz-header__brand span { font-family: var(--font-serif); font-weight: 600; font-size: 0.9375rem; }
.quiz-header__exit { color: rgba(255, 255, 255, 0.6); font-size: 0.875rem; text-decoration: none; display: flex; align-items: center; gap: 0.4rem; }
.quiz-header__exit:hover { color: #fff; }
.quiz-progress { background: rgba(255, 255, 255, 0.04); padding: 0.75rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.quiz-progress__inner { display: flex; align-items: center; gap: 1rem; }
.quiz-progress__label { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.75); font-weight: 500; white-space: nowrap; }
.quiz-progress__bar { flex: 1; height: 6px; background: rgba(255, 255, 255, 0.12); border-radius: var(--r-round); overflow: hidden; }
.quiz-progress__fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--blue-500), var(--cyan)); border-radius: var(--r-round); transition: width var(--t-med); }
.quiz-progress__time { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); white-space: nowrap; }
.quiz-main { flex: 1; padding: clamp(2.5rem, 6vh, 4.5rem) 0; }
.quiz-container { max-width: 720px; margin: 0 auto; }
.quiz-theme-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.9rem; background: rgba(34, 184, 207, 0.15); border: 1px solid rgba(34, 184, 207, 0.35); border-radius: var(--r-round); color: var(--cyan-light); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; margin-bottom: 1.5rem; }
.quiz-theme-badge svg { width: 14px; height: 14px; }
.quiz-question { font-family: var(--font-serif); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: #fff; margin-bottom: 0.75rem; }
.quiz-helper { color: rgba(255, 255, 255, 0.7); font-size: 0.9375rem; line-height: 1.5; margin-bottom: 2rem; }
.quiz-options { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2.5rem; }
.quiz-option { display: flex; align-items: flex-start; gap: 0.9rem; padding: 1.1rem 1.25rem; background: rgba(255, 255, 255, 0.06); border: 1.5px solid rgba(255, 255, 255, 0.12); border-radius: var(--r-md); cursor: pointer; transition: all var(--t-fast); }
.quiz-option:hover { border-color: var(--blue-400); background: rgba(59, 130, 246, 0.1); }
.quiz-option input { appearance: none; width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; flex-shrink: 0; margin-top: 2px; position: relative; cursor: pointer; transition: all var(--t-fast); background: transparent; }
.quiz-option input:checked { border-color: var(--cyan-light); border-width: 6px; }
.quiz-option:has(input:checked) { border-color: var(--blue-400); background: rgba(59, 130, 246, 0.15); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); }
.quiz-option__content { flex: 1; }
.quiz-option__label { font-weight: 500; font-size: 1rem; color: #fff; margin-bottom: 0.15rem; }
.quiz-option__hint { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); }
.quiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1.5rem; }
.quiz-nav__prev { background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.85); padding: 0.7rem 1.25rem; border-radius: var(--r-round); font-size: 0.9375rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 0.4rem; text-decoration: none; transition: all var(--t-fast); }
.quiz-nav__prev:hover { border-color: rgba(255, 255, 255, 0.7); color: #fff; background: rgba(255, 255, 255, 0.05); }
.quiz-nav__prev[disabled] { opacity: 0.3; cursor: not-allowed; }
.quiz-footer { background: rgba(255, 255, 255, 0.04); border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 1rem 0; text-align: center; font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); }
[data-q-slide] { display: none; }
[data-q-slide].is-active { display: block; }
.quiz-error { padding: 0.75rem 1rem; background: rgba(185, 28, 28, 0.08); border: 1px solid rgba(185, 28, 28, 0.25); border-radius: var(--r-md); color: #B91C1C; font-size: 0.875rem; margin-top: 1rem; display: none; }
.quiz-error.is-active { display: block; }

/* ═══ RÉSULTAT ════════════════════════════════════════════════════════════ */

.result-body { background: var(--bg); }
.result-header { background: var(--bg-paper); border-bottom: 1px solid var(--border); padding: 1rem 0; }
.result-header__inner { display: flex; justify-content: space-between; align-items: center; }
.result-header__brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--navy); }
.result-header__brand img { width: 32px; height: 36px; }
.result-header__brand span { font-family: var(--font-serif); font-weight: 600; font-size: 0.9375rem; }
.result-hero { padding: clamp(2.5rem, 6vh, 4rem) 0 2rem; text-align: center; background: linear-gradient(180deg, var(--bg-paper) 0%, var(--bg) 100%); position: relative; overflow: hidden; }
.result-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(14, 30, 52, 0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 30, 52, 0.015) 1px, transparent 1px); background-size: 56px 56px; pointer-events: none; }
.result-hero__inner { position: relative; max-width: 720px; margin: 0 auto; }
.result-hero__subtitle { font-size: 0.9375rem; color: var(--text-soft); margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; }
.result-hero h1 { font-family: var(--font-serif); font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 2rem; }
.score-circle-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin-bottom: 2rem; }
/* .score-circle a un conic-gradient dynamique (width du score) qui reste inline côté template. */
.score-circle { width: 240px; height: 240px; border-radius: 50%; padding: 10px; display: flex; box-shadow: 0 25px 50px -12px rgba(14, 30, 52, 0.4), 0 0 40px -10px rgba(59, 130, 246, 0.25); }
.score-circle__disc { flex: 1; border-radius: 50%; background: radial-gradient(ellipse 70% 60% at 80% 20%, rgba(59, 130, 246, 0.45), transparent 70%), radial-gradient(ellipse 80% 60% at 10% 90%, rgba(34, 184, 207, 0.32), transparent 70%), linear-gradient(180deg, var(--navy) 0%, var(--navy-600) 100%); display: flex; align-items: center; justify-content: center; text-align: center; }
.score-circle__value { font-family: var(--font-serif); font-size: 5rem; font-weight: 600; color: white; line-height: 1; letter-spacing: -0.03em; }
.score-circle__over { font-size: 1rem; color: rgba(255, 255, 255, 0.7); display: block; margin-top: 0.25rem; font-weight: 400; letter-spacing: 0.02em; }
.score-level { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.25); border-radius: var(--r-round); color: var(--blue-500); font-weight: 500; font-size: 0.9375rem; }
.score-level__ring { width: 8px; height: 8px; background: var(--blue-500); border-radius: 50%; }
.score-comparaison { background: var(--bg-paper); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem 1.25rem; max-width: 520px; margin: 0 auto; font-size: 0.9375rem; color: var(--text-soft); }
.score-comparaison strong { color: var(--navy); font-weight: 600; }
.result-section { padding: clamp(2.5rem, 5vh, 4rem) 0; background: var(--bg-paper); border-top: 1px solid var(--border); }
.result-section--alt { background: var(--bg); }
.result-section__title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.result-section__subtitle { color: var(--text-soft); font-size: 0.9375rem; margin-bottom: 2rem; }
.themes-grid { display: grid; gap: 1.25rem; max-width: 820px; }
.theme-row { display: grid; grid-template-columns: 200px 1fr 80px; align-items: center; gap: 1.25rem; }
.theme-row__label { display: flex; align-items: center; gap: 0.6rem; font-weight: 500; font-size: 0.9375rem; color: var(--navy); }
.theme-row__label svg { width: 18px; height: 18px; color: var(--text-soft); flex-shrink: 0; }
.theme-row__bar { height: 10px; background: var(--border); border-radius: var(--r-round); overflow: hidden; position: relative; }
.theme-row__fill { height: 100%; border-radius: var(--r-round); transition: width var(--t-slow); }
.theme-row__fill--strong { background: #15803D; }
.theme-row__fill--mid { background: #D97706; }
.theme-row__fill--weak { background: #B91C1C; }
.theme-row__score { font-family: var(--font-serif); font-weight: 600; font-size: 0.9375rem; color: var(--navy); text-align: right; }
.insight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 0.5rem; }
.insight-card { padding: 1.5rem; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--bg); }
.insight-card--weak { border-color: rgba(185, 28, 28, 0.2); background: rgba(185, 28, 28, 0.03); }
.insight-card--mid { border-color: rgba(217, 119, 6, 0.25); background: rgba(217, 119, 6, 0.03); }
.insight-card--mid h3 { color: #D97706; }
.insight-card--mid li svg { color: #D97706; }
.insight-card--strong { border-color: rgba(21, 128, 61, 0.2); background: rgba(21, 128, 61, 0.03); }
.insight-card h3 { font-family: var(--font-serif); font-size: 1rem; font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.insight-card--weak h3 { color: #B91C1C; }
.insight-card--strong h3 { color: #15803D; }
.insight-card ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.insight-card li { font-size: 0.9375rem; color: var(--text); line-height: 1.45; display: flex; align-items: flex-start; gap: 0.5rem; }
.insight-card li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.insight-card--weak li svg { color: #B91C1C; }
.insight-card--strong li svg { color: #15803D; }
/* Section "contexte cyber" en navy + halos + quadrillage (style banner fondateur). */
.result-section--context {
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-mesh);
}
.result-section--context::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 100% 80% at 50% 50%, #000 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 50%, #000 40%, transparent 90%);
  pointer-events: none;
  z-index: -1;
}
.result-section--context .result-section__title { color: #fff; }
.result-section--context .result-section__subtitle { color: rgba(255, 255, 255, 0.7); }

.context-block { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; max-width: 960px; margin: 0 auto; }
.context-stat { padding: 1.5rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); border-left: 3px solid var(--blue-400); border-radius: var(--r-md); backdrop-filter: blur(6px); }
.context-stat__value { font-family: var(--font-serif); font-size: 1.75rem; font-weight: 600; color: #fff; line-height: 1; margin-bottom: 0.4rem; }
.context-stat__desc { font-size: 0.875rem; color: rgba(255, 255, 255, 0.8); line-height: 1.5; margin-bottom: 0.5rem; }
.context-stat__source { font-size: 0.75rem; color: rgba(255, 255, 255, 0.55); }
.context-stat__source a { color: var(--cyan-light); text-decoration: none; }
.context-stat__source a:hover { text-decoration: underline; }
.methodology { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r-md); padding: 1.5rem; max-width: 960px; margin: 2rem auto 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.75); line-height: 1.6; }
.methodology strong { color: #fff; }
.email-gate { background: radial-gradient(ellipse 60% 90% at 85% 15%, rgba(59, 130, 246, 0.35), transparent 65%), radial-gradient(ellipse 70% 85% at 10% 95%, rgba(34, 184, 207, 0.25), transparent 65%), linear-gradient(180deg, var(--navy) 0%, var(--navy-600) 100%); border-radius: var(--r-xl); padding: 2.5rem; color: white; margin: 0 auto; max-width: 820px; box-shadow: var(--sh-xl); position: relative; overflow: hidden; }
.email-gate__content { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.email-gate h2 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.75rem; line-height: 1.25; }
.email-gate p { color: rgba(255, 255, 255, 0.75); font-size: 0.9375rem; line-height: 1.55; margin-bottom: 1.5rem; }
.email-gate ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.85); }
.email-gate ul li { display: flex; align-items: center; gap: 0.5rem; }
.email-gate ul li svg { color: var(--cyan-light); width: 16px; height: 16px; }
.email-gate__form { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r-md); padding: 1.5rem; }
.email-gate__form label { display: block; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 0.4rem; }
.email-gate__form input[type=email], .email-gate__form input[type=text] { width: 100%; padding: 0.8rem 1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--r-md); color: white; font-family: inherit; font-size: 0.9375rem; margin-bottom: 1rem; transition: all var(--t-fast); }
.email-gate__form input::placeholder { color: rgba(255, 255, 255, 0.4); }
.email-gate__form input:focus { outline: none; border-color: var(--blue-400); background: rgba(255, 255, 255, 0.08); }
.email-gate__form button { width: 100%; padding: 0.9rem 1.5rem; background: white; color: var(--navy); border: none; border-radius: var(--r-round); font-family: inherit; font-weight: 600; font-size: 0.9375rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all var(--t-fast); }
.email-gate__form button:hover { background: var(--cyan-light); transform: translateY(-1px); }
.email-gate__form button[disabled] { opacity: 0.6; cursor: wait; }
.email-gate__checkbox { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 1rem; font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); line-height: 1.5; }
.email-gate__checkbox input { margin-top: 3px; width: auto; }
.email-gate__status { margin-top: 1rem; font-size: 0.875rem; color: var(--cyan-light); display: none; }
.email-gate__status.is-visible { display: block; }
.secondary-cta { text-align: center; padding: 2.5rem 0; }
.secondary-cta p { color: var(--text-soft); margin-bottom: 1rem; font-size: 0.9375rem; }

@media (max-width: 760px) {
  .email-gate__content { grid-template-columns: 1fr; }
  .theme-row { grid-template-columns: 1fr; gap: 0.3rem; }
  .theme-row__score { text-align: left; }
}