/* =====================================================================
   audit.crocky.host - landing styles
   Tokens mirrored from crockyhost.css so dark/light flips identically.
   ===================================================================== */

/* Self-hosted webfonts (latin + latin-ext for Romanian diacritics).
   Replaces fonts.googleapis.com so no third-party request is made,
   keeping the public surfaces consent-banner-free under GDPR. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-800.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Plus Jakarta Sans Fallback';
  src: local('system-ui'), local('-apple-system'), local('BlinkMacSystemFont');
  ascent-override: 94%;
  descent-override: 25%;
  line-gap-override: 0%;
  size-adjust: 103%;
}

:root {
  --primary:              #00C96F;
  --primary-hover:        #00A85C;
  --primary-light:        #E6FFF3;
  --primary-glow:         rgba(0,201,111,0.25);
  --primary-glow-intense: rgba(0,201,111,0.40);

  --accent-blue:  #0EA5E9;
  --accent-cyan:  #14B8A6;
  --accent-coral: #F97316;
  /* Deep-red used for sub-50 score rings and critical findings. Separate
     token so the ScoreRing component does not hardcode a hex. */
  --score-fail:   #DC2626;

  --bg-primary:   #FFFFFF;
  --bg-secondary: #FAFBFC;
  --bg-tertiary:  #F4F6F8;
  --bg-card:      rgba(255,255,255,0.95);
  --bg-page:      linear-gradient(180deg,#FAFBFC 0%,#F0F4F8 50%,#E5EAF0 100%);

  --text-primary:   #1A202C;
  --text-secondary: #4A5568;
  /* Muted is darkened to clear WCAG AAA 7:1 against bg-card.
     Previous value #606B7A measured 5.22:1, AA only. */
  --text-muted:     #444E5A;
  --text-link:      #059669;
  --border-color:   rgba(26,32,44,0.20);

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.12);
  --shadow-glow: 0 0 25px var(--primary-glow);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --font-display: 'Plus Jakarta Sans','Plus Jakarta Sans Fallback',system-ui,-apple-system,sans-serif;
  --font-body:    'DM Sans',system-ui,-apple-system,sans-serif;
  --transition:   all 0.25s cubic-bezier(0.22,1,0.36,1);
  --header-height: 96px;
}

.dark {
  --bg-primary:   #0F1419;
  --bg-secondary: #161B22;
  --bg-tertiary:  #1C2128;
  --bg-card:      rgba(22,27,34,0.95);
  --bg-page:      linear-gradient(180deg,#0F1419 0%,#161B22 50%,#0F1419 100%);

  --text-primary:   #F0F6FC;
  --text-secondary: #C9D1D9;
  /* Muted lightened to clear WCAG AAA 7:1 against bg-card in dark theme.
     Previous value #8B949E measured 5.62:1, AA only. */
  --text-muted:     #A8B0BC;
  --text-link:      #00C96F;
  --border-color:   rgba(240,246,252,0.10);

  --primary-glow:         rgba(0,201,111,0.20);
  --primary-glow-intense: rgba(0,201,111,0.35);
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none !important; }
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: inherit;
}

/* Visually hidden but exposed to assistive tech. */
.ch-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.ch-sr-only-focusable:focus,
.ch-sr-only-focusable:focus-visible {
  position: static !important;
  width: auto; height: auto;
  padding: 8px 12px; margin: 0;
  overflow: visible; clip: auto;
  white-space: normal;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
}

/* Skip-link sits as the first body child. When focused, it pops above the
   glass nav (z-index 60 vs nav 50) so keyboard users can jump past the
   header without tab-cycling through it. */
.ch-skip-link:focus,
.ch-skip-link:focus-visible {
  position: fixed !important;
  top: 12px; left: 12px; z-index: 60;
  background: var(--primary); color: white;
  border-color: var(--primary);
  box-shadow: var(--shadow-glow);
  text-decoration: none;
  font-weight: 700;
}

html { scroll-behavior: smooth; }
html { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  transition: background 0.3s ease, color 0.3s ease;
  min-height: 100vh;
  overflow-x: clip;
}

/* One quiet ambient hint of brand color in the top-right. No second
   blob, no purple-blue glow at the bottom; that was the AI-SaaS
   reflex. Previously used filter:blur(140px) on a 460x460 element
   which stalled CDP screenshots and burned paint time on every scroll.
   Now: a pre-blurred radial gradient (no live filter), smaller
   footprint, equivalent visual hint, near-zero paint cost. */
body::before {
  content: '';
  position: fixed;
  inset: -100px -80px auto auto;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--primary) 22%, transparent) 0%,
    transparent 65%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

h1, h2, h3, h4 {
  font-family: var(--font-display); color: var(--text-primary);
  margin: 0 0 14px; line-height: 1.15;
  font-weight: 800; letter-spacing: -0.01em;
  /* Long titles + long URLs need to wrap, not blow out the layout. */
  overflow-wrap: break-word; word-break: break-word;
}
p { color: var(--text-secondary); line-height: 1.6; margin: 0 0 16px; overflow-wrap: break-word; hyphens: auto; }
a { color: var(--text-link); text-decoration: none; transition: var(--transition); overflow-wrap: break-word; }
a:hover { color: var(--primary-hover); }

/* ---- Glass pill nav ---- */
.ch-header {
  position: fixed; top: 16px; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: center; padding: 0 8px;
}
.ch-nav {
  display: flex; align-items: center; gap: 24px;
  padding: 8px 12px 8px 20px;
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  max-width: 100%;
  width: min(1120px, calc(100% - 8px));
}
.ch-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  color: var(--text-primary); white-space: nowrap;
}
.ch-logo-dot {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--primary), var(--accent-cyan));
  box-shadow: var(--shadow-glow);
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 800; font-size: 14px;
}
.ch-nav-links { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.ch-nav-links a {
  padding: 8px 14px; border-radius: 999px;
  color: var(--text-secondary); font-weight: 500; font-size: 0.95rem;
}
.ch-nav-links a:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.ch-nav-cta {
  padding: 9px 18px;
  background: var(--primary); color: white !important;
  border-radius: 999px; font-weight: 600;
  box-shadow: var(--shadow-glow);
}
.ch-nav-cta:hover { background: var(--primary-hover); transform: translateY(-1px); }
.ch-theme-toggle {
  background: transparent; border: 0; cursor: pointer; padding: 8px;
  border-radius: 999px; color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
}
.ch-theme-toggle:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.ch-theme-toggle svg { width: 18px; height: 18px; }
.dark .ch-theme-toggle .ch-icon-sun { display: inline; }
.dark .ch-theme-toggle .ch-icon-moon { display: none; }
.ch-theme-toggle .ch-icon-sun { display: none; }
.ch-theme-toggle .ch-icon-moon { display: inline; }

/* ---- Language toggle ---------------------------------------------------
   Single button. Click anywhere on it flips EN <-> RO. The active language
   is highlighted via [data-lang] on <html>, so the CSS does the work; the
   JS is just a one-line flipper. */
.ch-lang-toggle {
  display: inline-flex; padding: 3px;
  border-radius: 999px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  margin-left: 4px;
  cursor: pointer;
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  transition: var(--transition);
}
.ch-lang-toggle:hover { color: var(--text-primary); }
.ch-lang-toggle:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.ch-lang-toggle span {
  padding: 5px 10px; border-radius: 999px;
  font-size: 0.78rem;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px;
  transition: var(--transition);
  pointer-events: none; /* clicks always land on the button itself */
}
[data-lang="en"] .ch-lang-toggle span[data-ch-lang="en"],
[data-lang="ro"] .ch-lang-toggle span[data-ch-lang="ro"] {
  background: var(--primary); color: white;
  box-shadow: 0 0 8px var(--primary-glow);
}

/* ---- Info popover (the question-mark badge + tooltip) -----------------
   Uses the native HTML Popover API. The trigger is a small circular badge;
   the popover sits on top of everything (in the browser's top layer), so
   it can't be clipped by overflow. Click / tap / Enter / Space toggle it.
   Esc closes. Works equally on touch and desktop. */
/* Block-level flex so headings keep their normal width and rhythm; the
   info badge sits to the right of the heading text and aligns by baseline. */
h2.ch-info, h3.ch-info { display: flex; align-items: center; gap: 8px; }
.ch-info { display: inline-flex; align-items: center; gap: 6px; }
.ch-info-btn {
  width: 20px; height: 20px;
  padding: 0;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: 800; font-size: 12px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition);
}
.ch-info-btn:hover,
.ch-info-btn:focus-visible {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--bg-primary);
}
.ch-info-pop {
  /* :popover-open styles only when the popover is shown */
  max-width: min(320px, calc(100vw - 32px));
  padding: 12px 14px;
  margin: 0;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body);
  font-size: 0.88rem; line-height: 1.45;
  /* The Popover API handles positioning + top-layer; we just give it a
     reasonable spawn point near the top-left of the viewport. CSS anchor
     positioning would be a nicer fix but is still patchy across browsers. */
  position: fixed;
  inset: auto;
  top: 25%;
  left: 50%;
  transform: translate(-50%, 0);
}
.ch-info-pop p { margin: 0; }
/* Every info popover gets a default "Got it" close button so a tap anywhere
   inside the bubble can dismiss it; no need to remember to tap outside. */
.ch-info-pop-ack {
  display: inline-block;
  margin-top: 10px;
  padding: 7px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font: 600 0.85rem/1 var(--font-body);
  cursor: pointer;
  box-shadow: 0 0 18px var(--primary-glow);
  transition: background 0.18s ease;
}
.ch-info-pop-ack:hover,
.ch-info-pop-ack:focus-visible {
  background: var(--primary-hover);
  outline: none;
}
@media (min-width: 720px) {
  /* On wider screens we can place it near where the trigger lives. The
     calling page is responsible for ensuring the trigger has scroll-margin
     so the popover doesn't visually detach. */
  .ch-info-pop { top: 30%; }
}

@media (max-width: 720px) {
  .ch-nav-links a:not(.ch-nav-cta) { display: none; }
}

/* ---- Hero ---- */
.ch-hero { padding: calc(var(--header-height) + 24px) 0 32px; text-align: center; }
.ch-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--primary-light); color: var(--primary-hover);
  font-weight: 600; font-size: 0.85rem;
  border: 1px solid rgba(0,201,111,0.25);
  margin-bottom: 18px;
}
.dark .ch-badge { background: rgba(0,201,111,0.10); color: var(--primary); }
.ch-badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 8px var(--primary);
  animation: ch-pulse 2.6s cubic-bezier(0.45,0,0.55,1) infinite;
}
@keyframes ch-pulse {
  0%, 100% { box-shadow: 0 0 6px var(--primary-glow); transform: scale(1); }
  50%      { box-shadow: 0 0 14px var(--primary-glow-intense); transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .ch-badge::before { animation: none; }
}
.ch-hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
/* Brand emphasis on the second half of the boast.
   Animated five-stop gradient (palindrome so the loop seams cleanly).
   The whole thing is sized 200% wide and shifts on background-position,
   so the colors slowly drift across the text. background-position is
   compositor-friendly; no layout work, GPU only. */
.ch-hero h1 .ch-emph {
  background: linear-gradient(
    110deg,
    var(--primary)       0%,
    var(--accent-cyan)  25%,
    var(--accent-blue)  50%,
    var(--accent-cyan)  75%,
    var(--primary)     100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: ch-emph-drift 9s ease-in-out infinite;
}
@keyframes ch-emph-drift {
  0%, 100% { background-position:   0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-hero h1 .ch-emph { animation: none; }
}
.ch-hero-sub {
  font-size: 1.1rem; color: var(--text-secondary);
  max-width: 640px; margin: 0 auto 38px;
}

/* ---- Submit form ---- */
.ch-form-card {
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 30px 30px 26px;
  box-shadow: var(--shadow-lg);
  max-width: 720px; margin: 0 auto;
}
@media (max-width: 540px) {
  .ch-form-card { padding: 22px 20px 20px; }
}
.ch-form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: stretch;
  /* When the row wraps on narrow screens (button drops below the URL input),
     the wrapped button centers within the form-card. On desktop the input
     fills available width so the button sits at the right edge as before. */
  justify-content: center;
}
.ch-input-wrap { flex: 1 1 320px; min-width: 0; position: relative; }
.ch-form-row > .ch-btn { flex-shrink: 0; }
.ch-input-wrap .ch-input-icon {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  /* Force a 14x14 box so the inline SVG sits exactly centered. Without the
     explicit size the wrapper inherits text line-height (18px), top-aligning
     the 14px SVG and dropping it 2px above visual center. */
  width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); pointer-events: none;
  line-height: 0;
}
.ch-input {
  width: 100%;
  padding: 14px 16px 14px 38px;
  font-family: var(--font-body); font-size: 1rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  transition: var(--transition);
  outline: none;
}
.ch-input:focus,
.ch-input.is-pre-focused {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-glow);
  outline: none;
}
.ch-input--plain { padding-left: 16px; }

.ch-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  background: var(--primary); color: white;
  border: 0; border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow-glow);
  transition: var(--transition);
  white-space: nowrap;
}
.ch-btn:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 0 32px var(--primary-glow-intense); }
.ch-btn svg { transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
.ch-btn:hover svg { transform: translateX(2px) rotate(-6deg); }
.ch-btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
.ch-btn[disabled] svg { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ch-btn svg { transition: none; }
  .ch-btn:hover svg { transform: none; }
}
.ch-btn--ghost {
  background: transparent; color: var(--text-primary);
  border: 1px solid var(--border-color); box-shadow: none;
}
.ch-btn--ghost:hover { background: var(--bg-tertiary); }

/* Compact size for inline / secondary affordances (cancel button, etc).
   Same shape as .ch-btn, just smaller padding + type ramp. */
.ch-btn--sm {
  padding: 6px 12px;
  font-size: 0.85rem;
  line-height: 1.2;
}

/* Scan depth: one quiet line. Default is "Standard scan: homepage only".
   The deeper option lives behind a small inline text-button so we never
   ask the user to choose between two peer cards. data-mode on the parent
   drives which state is shown via CSS. No JS for show/hide.            */
.ch-mode-line {
  display: block;
  margin: 22px 0 6px;
  padding: 0; border: 0; min-inline-size: 0;
  font-size: 0.92rem;
  color: var(--text-muted);
  text-align: center;
}
.ch-mode-line input[type="radio"] {
  /* sr-only utility inline; radios stay in the DOM for form submission */
  position: absolute; opacity: 0;
  width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.ch-mode-state {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  line-height: 1.5;
}
.ch-mode-line[data-mode="quick"] .ch-mode-state--quick     { display: flex; }
.ch-mode-line[data-mode="standard"] .ch-mode-state--standard { display: flex; }
.ch-mode-state-desc {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
}
.ch-mode-info-btn {
  /* Tighter sibling of the strong title; the default .ch-info-btn 20×20 box
     is too big inline with body-size text. */
  width: 16px; height: 16px;
  font-size: 10px;
  align-self: center;
  margin-inline-start: -2px;
}
/* Stage swap: show only the default switch link or the confirm row,
   driven by data-stage on the parent fieldset. */
.ch-mode-stage { display: inline-flex; align-items: baseline; gap: 6px; }
.ch-mode-line[data-stage="default"] .ch-mode-stage--confirm { display: none; }
.ch-mode-line[data-stage="confirm"] .ch-mode-stage--default { display: none; }
.ch-mode-confirm-q { color: var(--text-primary); font-weight: 600; }
.ch-mode-confirm-sep { color: var(--text-muted); }
.ch-mode-yes { color: var(--primary-hover); }
.ch-mode-yes:hover, .ch-mode-yes:focus-visible { color: var(--primary); }
.ch-mode-no:hover, .ch-mode-no:focus-visible { color: var(--text-primary); }
.ch-mode-state strong {
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 600;
}
.ch-mode-state-sub { color: var(--text-muted); }
.ch-mode-switch {
  background: transparent;
  border: 0;
  padding: 0; margin: 0;
  font: inherit;
  color: var(--text-muted);
  cursor: pointer;
  /* Subtle 1px dashed underline reads as a settings link, not a CTA. */
  border-bottom: 1px dashed currentColor;
}
.ch-mode-switch:hover,
.ch-mode-switch:focus-visible {
  color: var(--text-primary);
}
.ch-mode-switch:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 2px;
}
.ch-mode-pill {
  display: inline-flex; gap: 6px; padding: 6px 10px;
  background: var(--bg-tertiary); border-radius: 999px;
  border: 1px solid var(--border-color);
}
.ch-mode-pill label {
  cursor: pointer; padding: 4px 10px; border-radius: 999px;
  font-weight: 600; color: var(--text-secondary);
}
.ch-mode-pill input { display: none; }
.ch-mode-pill input:checked + span {
  background: var(--primary); color: white; padding: 4px 10px; border-radius: 999px;
}

.ch-email-row { margin-top: 12px; }
.ch-honeypot {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---- Advanced options (basic-auth username + password) ---------------
   Hidden behind a small disclosure; appears between the email row and the
   honeypot. Uses native <details> so keyboard and screen reader work for
   free, no JS required to expand. */
.ch-advanced {
  margin-top: 18px;
  font-size: 0.9rem;
  color: var(--text-muted);
}
/* Override the inline margin-top on the email row and turnstile mount so
   the form has consistent vertical rhythm instead of cramped 8/12px gaps. */
.ch-form-card .ch-email-row { margin-top: 22px !important; }
.ch-form-card #ch-turnstile { margin-top: 14px !important; }
.ch-advanced summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  user-select: none;
  color: var(--text-muted);
  border-bottom: 1px dashed currentColor;
  width: max-content;
  transition: color 0.2s ease;
}
.ch-advanced summary:hover,
.ch-advanced summary:focus-visible { color: var(--text-primary); outline: none; }
.dark .ch-advanced summary:hover,
.dark .ch-advanced summary:focus-visible { color: var(--text-primary); }
.ch-advanced summary::-webkit-details-marker { display: none; }
.ch-advanced summary::before {
  content: '+';
  font-family: var(--font-display); font-weight: 500;
  width: 12px; text-align: center;
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1);
}
.ch-advanced[open] summary::before { content: '−'; }
.ch-advanced-body {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}
.ch-advanced-hint {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.ch-advanced-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 540px) {
  .ch-advanced-row { grid-template-columns: 1fr; }
}

/* ---- Live audit counter (between hero and features) ------------------
   Hidden by default; landing.js reveals once the first /api/stats response
   arrives, so the page never flashes a 0 or a placeholder. */
.ch-counter-section {
  padding: 28px 0 8px;
}
.ch-counter-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  text-align: center;
  font-family: var(--font-body);
  color: var(--text-secondary);
  font-size: 1.02rem;
}
.ch-counter-stat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ch-counter-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary-glow);
  animation: ch-pulse 2.6s cubic-bezier(0.45,0,0.55,1) infinite;
  flex-shrink: 0;
}
.ch-counter-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 1.32rem;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  line-height: 1;
  transition: color 0.4s ease;
}
.ch-counter-num.is-ticking { color: var(--primary); }
.ch-counter-lbl { color: var(--text-muted); }
@media (max-width: 540px) {
  .ch-counter-line { font-size: 0.95rem; }
  .ch-counter-num  { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-counter-dot { animation: none; }
  .ch-counter-num { transition: none; }
}

.ch-fineprint {
  font-size: 0.85rem; color: var(--text-muted);
  margin-top: 22px; text-align: center;
}
.ch-error { color: #DC2626; font-size: 0.9rem; margin-top: 14px; text-align: center; }
.dark .ch-error { color: #FCA5A5; }

.ch-sample-link {
  text-align: center; margin: 22px 0 0;
  font-size: 0.9rem; color: var(--text-muted);
}
.ch-sample-link a {
  color: var(--text-link);
  border-bottom: 1px dashed currentColor;
}

/* ---- Reveal-on-scroll. Honors prefers-reduced-motion via JS. ---- */
.ch-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1);
  transition-delay: var(--ch-delay, 0ms);
  will-change: opacity, transform;
}
.ch-reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .ch-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Features strip ---- */
.ch-section { padding: 64px 0; }
.ch-section-title { text-align: center; margin-bottom: 32px; }
.ch-section-title h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 8px; }
.ch-section-title p { color: var(--text-secondary); margin-bottom: 0; }
.ch-section-cta {
  margin-top: 18px;
  font-size: 0.92rem;
  padding: 9px 18px;
}

/* Editorial numbered list. Breaks the "six identical icon cards in a grid"
   AI reflex by ditching the cards entirely and leaning on number + heading +
   prose rhythm. Two columns on wide screens, single column on narrow. */
.ch-feature-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 56px;
}
@media (max-width: 760px) {
  .ch-feature-list { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
.ch-feature-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px;
  /* Top-align the numeral with the h3 so the visual tops match instead of
     the baselines (numeral is 2x the size, baseline-align made it tower
     above the heading). Both children carry line-height: 1 below so the
     cap-tops actually meet. */
  align-items: start;
  --tone: var(--primary);
  --tone-tint: var(--primary-light);
}
.ch-feature-item[data-tone="speed"]     { --tone: var(--primary);      --tone-tint: var(--primary-light); }
.ch-feature-item[data-tone="discovery"] { --tone: var(--accent-cyan);  --tone-tint: rgba(20,184,166,0.12); }
.ch-feature-item[data-tone="access"]    { --tone: #EAB308;             --tone-tint: rgba(234,179,8,0.14); }
.ch-feature-item[data-tone="defense"]   { --tone: var(--accent-coral); --tone-tint: rgba(249,115,22,0.12); }
.ch-feature-item[data-tone="infra"]     { --tone: var(--accent-blue);  --tone-tint: rgba(14,165,233,0.12); }
.ch-feature-item[data-tone="stack"]     { --tone: #A78BFA;             --tone-tint: rgba(167,139,250,0.14); }
.ch-feature-item[data-tone="footprint"] { --tone: #16A34A;             --tone-tint: rgba(22,163,74,0.12); }
.ch-feature-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1;
  color: var(--tone);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.ch-feature-item:hover .ch-feature-num { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .ch-feature-num { transition: none; }
}
.ch-feature-body h3 {
  font-size: 1.2rem;
  line-height: 1;
  margin: 0 0 10px;
  letter-spacing: -0.005em;
}
.ch-feature-body p {
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 0;
  color: var(--text-secondary);
  max-width: 48ch;
}

/* ---- Inline term tooltip: <dfn class="ch-term" data-tip="...">TTFB</dfn>
   Subtle dotted underline that hints at "hover for more".
   Bubble appears above on hover/focus; flips below for the top row.
   Keyboard reachable via tabindex=0 on each term.                       */
/* Inline term tooltip. Quiet by default: dotted underline at low alpha. The
   bubble appears above on hover/focus after a short reveal delay so casual
   mouse passes don't fire it. Width is capped narrow enough to fit on a
   sensible body-text line. */
.ch-term {
  position: relative;
  display: inline;
  font-style: normal;
  font-weight: 500;
  color: inherit;
  text-decoration: underline dotted 1px;
  text-decoration-color: color-mix(in oklch, var(--primary) 55%, transparent);
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
  cursor: help;
}
.ch-term:hover,
.ch-term:focus-visible {
  text-decoration-color: var(--primary);
  outline: none;
}
.ch-term::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  /* --tip-shift is set per-term by JS when the bubble would leave the
     viewport; defaults to 0 so the bubble centers over the term. */
  transform: translateX(calc(-50% + var(--tip-shift, 0px))) translateY(2px);
  width: max-content;
  max-width: 220px;
  padding: 9px 11px;
  background: var(--text-primary);
  color: var(--bg-primary);
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  font-size: 0.8rem;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  z-index: 30;
  box-shadow: 0 8px 22px rgba(0,0,0,0.22);
  /* 180ms reveal delay; instant fade-out so the page never lingers on a
     stuck tooltip when the cursor leaves. */
  transition: opacity 0.16s ease 0s, transform 0.18s cubic-bezier(0.22,1,0.36,1) 0s;
}
.ch-term::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--text-primary);
  opacity: 0;
  transition: opacity 0.16s ease 0s;
  z-index: 31;
}
.ch-term:hover::after,
.ch-term:focus-visible::after,
.ch-term:hover::before,
.ch-term:focus-visible::before {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 180ms;
}
.ch-term:hover::after,
.ch-term:focus-visible::after {
  transform: translateX(calc(-50% + var(--tip-shift, 0px))) translateY(0);
}
.dark .ch-term::after {
  background: #2A2F36;
  color: var(--text-primary);
  box-shadow: 0 8px 22px rgba(0,0,0,0.55);
}
.dark .ch-term::before { border-top-color: #2A2F36; }
@media (max-width: 600px) {
  .ch-term::after { max-width: 200px; font-size: 0.78rem; padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-term, .ch-term::after, .ch-term::before { transition: none; }
}


/* ---- Static doc pages (methodology, about) ---- */
.ch-doc h2 {
  font-size: 1.2rem; margin-top: 28px; margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.ch-doc h2:first-child { margin-top: 0; }
.ch-doc p { font-size: 1rem; color: var(--text-secondary); }

/* =========================================================================
   Methodology page: per-section visual treatments.
   Each section uses .ch-method-section as the wrapper, .ch-method-wrap
   for a two-column text + visual layout, and .ch-method-alt for the muted
   striped background that alternates section colors.
   ========================================================================= */

.ch-method-section {
  padding: 56px 0;
  position: relative;
  z-index: 1;
  /* Per-chapter accent. Defaults to brand green; data-tone overrides apply
     across the numeral, the kicker pill and inline term underlines. */
  --tone: var(--primary);
  --tone-tint: var(--primary-light);
}
.ch-method-section[data-tone="speed"]     { --tone: var(--primary);      --tone-tint: var(--primary-light); }
.ch-method-section[data-tone="discovery"] { --tone: var(--accent-cyan);  --tone-tint: rgba(20,184,166,0.12); }
.ch-method-section[data-tone="access"]    { --tone: #EAB308;             --tone-tint: rgba(234,179,8,0.14); }
.ch-method-section[data-tone="defense"]   { --tone: var(--accent-coral); --tone-tint: rgba(249,115,22,0.12); }
.ch-method-section[data-tone="infra"]     { --tone: var(--accent-blue);  --tone-tint: rgba(14,165,233,0.12); }
.ch-method-section[data-tone="stack"]     { --tone: #A78BFA;             --tone-tint: rgba(167,139,250,0.14); }
.ch-method-section[data-tone="visual"]    { --tone: #EC4899;             --tone-tint: rgba(236,72,153,0.12); }
.ch-method-section[data-tone="footprint"] { --tone: #16A34A;             --tone-tint: rgba(22,163,74,0.12); }
.ch-method-section[data-tone="severity"]  { --tone: var(--text-secondary); --tone-tint: var(--bg-tertiary); }
.ch-method-section[data-tone="privacy"]   { --tone: var(--text-secondary); --tone-tint: var(--bg-tertiary); }
.ch-method-alt { background: var(--bg-secondary); }
.ch-method-wrap {
  display: grid; gap: 48px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  max-width: 1080px;
}
.ch-method-wrap--rev { direction: rtl; }
.ch-method-wrap--rev > * { direction: ltr; }
.ch-method-wrap-vertical {
  display: flex; flex-direction: column; align-items: stretch; gap: 28px;
  max-width: 1080px;
  min-width: 0;
}
.ch-method-wrap-vertical > .ch-method-text { align-self: center; }
@media (max-width: 820px) {
  .ch-method-wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ch-method-wrap--rev { direction: ltr; }
  .ch-method-section { padding: 36px 0; }
}

.ch-method-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: 0.95rem; letter-spacing: 0.12em;
  color: var(--tone);
  display: inline-block; margin-right: 12px; margin-bottom: 6px;
  vertical-align: middle;
}
.ch-method-text h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.ch-method-text p {
  color: var(--text-secondary);
  font-size: 1rem; line-height: 1.6;
  margin: 0; max-width: 48ch;
}
.ch-method-visual {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.ch-method-alt .ch-method-visual {
  background: var(--bg-primary);
}

/* ---- 1. Performance: mini score rings + vitals ---- */
.ch-method-perf-rings { display: flex; gap: 24px; justify-content: center; }
.ch-mini-ring {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.ch-mini-ring-svg {
  position: relative;
  width: 120px; height: 120px;
}
.ch-mini-ring-svg svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.ch-mini-ring-svg svg circle.bg { fill: none; stroke: var(--border-color); stroke-width: 8; }
.ch-mini-ring-svg svg circle:not(.bg) {
  fill: none; stroke-width: 8; stroke-linecap: round;
  transition: stroke-dasharray 0.8s cubic-bezier(0.22,1,0.36,1);
}
.ch-mr-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.9rem;
}
.ch-mr-lbl {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
}
.ch-method-vitals {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-top: 20px;
  font-family: var(--font-display);
}
.ch-vital {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-align: center;
}
.ch-vital span {
  display: block;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
}
.ch-vital strong {
  display: block; font-size: 1rem; font-weight: 700;
  color: var(--text-primary); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ---- 2. SEO: mock search-result snippet ---- */
.ch-method-serp { font-family: arial, sans-serif; }
.ch-serp-url {
  font-size: 0.82rem; color: var(--text-muted); margin-bottom: 4px;
}
.ch-serp-title {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 500;
  color: var(--text-link);
  margin-bottom: 4px; line-height: 1.3;
}
.dark .ch-serp-title { color: var(--accent-blue); }
.ch-serp-desc {
  font-size: 0.92rem; color: var(--text-secondary);
  line-height: 1.5;
}

/* ---- 3. Security: header pass/fail list ---- */
.ch-method-headers { list-style: none; margin: 0; padding: 0; }
.ch-method-headers li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-color);
  font-family: ui-monospace, monospace;
  font-size: 0.88rem;
}
.ch-method-headers li:last-child { border-bottom: 0; }
.ch-h-name { color: var(--text-primary); }
.ch-h-status {
  font-family: var(--font-body);
  font-size: 0.75rem; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.ch-h-ok  { background: rgba(0,201,111,0.12); color: var(--primary); }
.ch-h-bad { background: rgba(220,38,38,0.12); color: #DC2626; }
.dark .ch-h-bad { color: #FCA5A5; }

/* ---- 4. Hosting: TTFB scale ---- */
.ch-method-ttfb { font-family: ui-monospace, monospace; font-size: 0.75rem; }
.ch-ttfb-label-row {
  display: flex; justify-content: space-between;
  color: var(--text-muted); margin-bottom: 6px;
}
.ch-ttfb-scale {
  position: relative; height: 14px;
  display: flex; border-radius: 999px; overflow: hidden;
  background: var(--bg-tertiary);
}
.ch-ttfb-good { flex: 0 0 13%; background: var(--primary); }
.ch-ttfb-okay { flex: 0 0 27%; background: var(--accent-cyan); }
.ch-ttfb-slow { flex: 0 0 30%; background: var(--accent-coral); }
.ch-ttfb-bad  { flex: 1;       background: #DC2626; }
.ch-ttfb-marker {
  position: absolute; top: -28px;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 3px 10px;
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  color: var(--text-primary); white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.ch-ttfb-marker::after {
  content: ''; position: absolute;
  bottom: -5px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--border-color);
}
.ch-ttfb-key {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; font-family: var(--font-body);
  font-size: 0.8rem; color: var(--text-muted);
}
.ch-ttfb-key span { display: inline-flex; align-items: center; gap: 6px; }
.ch-dot { width: 8px; height: 8px; border-radius: 50%; }

/* ---- 5. Tech-stack pill cloud ---- */
.ch-method-tech {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; max-width: 760px;
  margin: 0 auto;
  padding: 28px;
}
.ch-tech-pill {
  padding: 7px 14px; border-radius: 999px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.92rem; color: var(--text-primary);
}
.ch-tech-pill.ch-tech-eol {
  background: rgba(220,38,38,0.12);
  border-color: rgba(220,38,38,0.4);
  color: #DC2626;
}
.dark .ch-tech-pill.ch-tech-eol { color: #FCA5A5; }

/* ---- 6. Visual: four device frames ---- */
.ch-method-devices {
  display: flex; gap: 18px; flex-wrap: wrap;
  align-items: flex-end; justify-content: center;
  max-width: 760px; margin: 0 auto;
}
.ch-dev { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ch-dev-frame {
  background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
  border: 1px solid var(--border-color);
  border-radius: 6px;
  position: relative;
}
.ch-dev-frame::after {
  content: ''; position: absolute; inset: 4px;
  background: repeating-linear-gradient(
    180deg,
    var(--primary-light) 0 4px,
    transparent 4px 8px
  );
  opacity: 0.7;
  border-radius: 3px;
}
.dark .ch-dev-frame::after {
  background: repeating-linear-gradient(
    180deg,
    rgba(0,201,111,0.12) 0 4px,
    transparent 4px 8px
  );
}
.ch-dev-360  { width: 36px;  height: 64px; }
.ch-dev-768  { width: 64px;  height: 80px; }
.ch-dev-1280 { width: 100px; height: 70px; }
.ch-dev-1920 { width: 140px; height: 88px; }
.ch-dev span {
  font-family: ui-monospace, monospace;
  font-size: 0.72rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- 7. Carbon: formula ---- */
.ch-method-formula {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; justify-content: center;
  font-family: var(--font-display);
}
.ch-form-piece {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-weight: 600; font-size: 0.92rem;
  color: var(--text-primary);
}
.ch-form-op {
  font-weight: 700; color: var(--text-muted); padding: 0 2px;
}
.ch-form-eq {
  font-weight: 700; color: var(--primary); font-size: 1.2rem; padding: 0 4px;
}
.ch-form-result {
  padding: 8px 14px;
  background: var(--primary);
  color: white; font-weight: 700; font-size: 0.92rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 16px var(--primary-glow);
}
.ch-form-note {
  margin-top: 14px; text-align: center;
  font-size: 0.85rem; color: var(--text-muted);
}

/* ---- 8. Severity row ---- */
.ch-method-severity {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  max-width: 920px; margin: 0 auto;
  width: 100%;
  min-width: 0; /* let the auto-fit columns truly shrink */
}
@media (max-width: 520px) {
  /* On narrow phones, stack two-per-row max so RO copy like
     "Repară săptămâna asta." never forces horizontal overflow. */
  .ch-method-severity { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .ch-method-severity { grid-template-columns: minmax(0, 1fr); }
}
.ch-sev-cell {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  text-align: center;
  min-width: 0;
}
.ch-sev-note {
  font-size: 0.88rem; color: var(--text-secondary);
  overflow-wrap: break-word; hyphens: auto;
}

/* ---- 9. Privacy: URL bar mock ---- */
.ch-method-urlbar {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 10px 16px;
  font-family: ui-monospace, monospace; font-size: 0.95rem;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.ch-method-urlbar svg { color: var(--primary); flex-shrink: 0; }
.ch-url-host { color: var(--text-primary); font-weight: 600; }
.ch-url-sep  { color: var(--text-muted); }
.ch-url-path { color: var(--text-secondary); }
.ch-url-token {
  color: var(--primary); font-weight: 700;
  background: rgba(0,201,111,0.08);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
}
.ch-url-note {
  margin-top: 12px; font-size: 0.82rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- Section variants used on the home --------------------------- */
.ch-section--alt {
  background: var(--bg-tertiary);
  border-block: 1px solid var(--border-color);
}

/* ---- Preview block: ring strip + sample finding ------------------ */
.ch-preview {
  display: grid; gap: 24px;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-top: 24px;
}
@media (max-width: 820px) {
  .ch-preview { grid-template-columns: minmax(0, 1fr); }
}
.ch-preview-rings {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}
/* Register --p so it transitions like a real property. Without this, custom
   properties step instantly and you cannot animate the conic-gradient fill. */
@property --p {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
.ch-preview-ring {
  position: relative;
  display: block;
  text-align: center;
  /* Card holds: ring (absolute) + number (absolute, centered in ring) + label
     (flow, below ring). Padding below = ring-size + label gap. */
  padding: 18px 14px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  --p: 0;
  --ring-size: 88px;
  --ring-thickness: 9px;
  transition: --p 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ch-preview.is-visible .ch-preview-ring,
.ch-preview .ch-preview-ring--show {
  --p: var(--p-final, 0);
}
@media (prefers-reduced-motion: reduce) {
  .ch-preview-ring { transition: none; --p: var(--p-final, 0); }
}
/* Real donut ring: conic-gradient clipped to a circle, mask removes
   the inner area. Replaces the older square-conic approach. */
.ch-preview-ring::before {
  content: '';
  position: absolute;
  top: 18px; left: 50%; transform: translateX(-50%);
  width: var(--ring-size); height: var(--ring-size);
  border-radius: 50%;
  background: conic-gradient(
    var(--c) calc(var(--p, 0) * 1%),
    var(--border-color) 0
  );
  -webkit-mask: radial-gradient(
    circle at center,
    transparent calc(var(--ring-size) / 2 - var(--ring-thickness) - 0.5px),
    #000 calc(var(--ring-size) / 2 - var(--ring-thickness))
  );
          mask: radial-gradient(
    circle at center,
    transparent calc(var(--ring-size) / 2 - var(--ring-thickness) - 0.5px),
    #000 calc(var(--ring-size) / 2 - var(--ring-thickness))
  );
}
.ch-preview-ring-num {
  /* Sit absolutely inside the donut hole, perfectly centered. */
  position: absolute;
  top: calc(18px + var(--ring-size) / 2);
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.5rem; color: var(--c, var(--text-primary));
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ch-preview-ring-lbl {
  /* In normal flow, immediately below the ring. */
  display: block;
  margin-top: calc(var(--ring-size) + 12px);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
.ch-preview-finding {
  display: grid; gap: 6px 14px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}
.ch-preview-sev {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: #FFEDD5; color: #C2410C;
}
.dark .ch-preview-sev { background: rgba(249,115,22,0.15); color: #FDBA74; }
.ch-preview-sev::before { content:''; width:6px; height:6px; border-radius:50%; background: currentColor; }
.ch-preview-finding h4 { margin: 0 0 4px; font-size: 1.02rem; }
.ch-preview-finding p {
  margin: 0; color: var(--text-secondary);
  font-size: 0.94rem; line-height: 1.5;
}
.ch-preview-rec {
  margin-top: 8px; padding: 10px 12px;
  background: var(--primary-light); color: var(--primary-hover);
  border-radius: var(--radius-sm);
  font-size: 0.9rem; line-height: 1.5;
}
.dark .ch-preview-rec { background: rgba(0,201,111,0.08); color: var(--primary); }
.ch-preview-rec code {
  font-family: ui-monospace, monospace;
  font-size: 0.86rem;
  padding: 1px 5px;
  background: rgba(0,168,92,0.10);
  border-radius: 4px;
  cursor: copy;
  position: relative;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.ch-preview-rec code:hover { background: rgba(0,168,92,0.18); }
.ch-preview-rec code.is-copied {
  background: var(--primary);
  color: #fff;
}
.ch-preview-rec code.is-copied::after {
  content: 'copied';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 3px 8px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--text-primary);
  color: var(--bg-primary);
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  animation: ch-copied-pop 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes ch-copied-pop {
  0%   { opacity: 0; transform: translate(-50%, 4px); }
  15%  { opacity: 1; transform: translate(-50%, 0); }
  75%  { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -2px); }
}
.dark .ch-preview-rec code { background: rgba(0,201,111,0.14); }
.dark .ch-preview-rec code:hover { background: rgba(0,201,111,0.22); }
@media (prefers-reduced-motion: reduce) {
  .ch-preview-rec code, .ch-preview-rec code.is-copied::after { animation: none; transition: none; }
}

/* ---- FAQ: native <details>, no JS ------------------------------- */
.ch-faq-wrap { max-width: 760px; }
/* Editorial FAQ: single hairline between rows, no card chrome. Reads as
   long-form, not as a button list. */
.ch-faq {
  margin-top: 28px;
  border-top: 1px solid var(--border-color);
}
.ch-faq-item {
  border-bottom: 1px solid var(--border-color);
}
.ch-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 4px 18px 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-primary);
  display: flex; align-items: center; gap: 16px;
  position: relative;
  transition: color 0.2s ease;
}
.ch-faq-item summary:hover { color: var(--primary-hover); }
.dark .ch-faq-item summary:hover { color: var(--primary); }
.ch-faq-item summary::-webkit-details-marker { display: none; }
.ch-faq-item summary::after {
  content: '+';
  margin-inline-start: auto;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.4rem; line-height: 1;
  color: var(--text-muted);
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), color 0.2s ease;
}
.ch-faq-item[open] summary::after {
  transform: rotate(45deg);
  color: var(--primary);
}
.ch-faq-item summary:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 4px;
  border-radius: 4px;
}
.ch-faq-item p {
  margin: 0; padding: 0 0 22px;
  color: var(--text-secondary);
  font-size: 0.98rem; line-height: 1.6;
  max-width: 64ch;
}
@media (prefers-reduced-motion: reduce) {
  .ch-faq-item summary::after { transition: none; }
}

/* ---- Footer ---- */
.ch-footer {
  margin-top: 64px; padding: 32px 0;
  border-top: 1px solid var(--border-color);
  text-align: center; font-size: 0.9rem; color: var(--text-muted);
}
.ch-footer a { color: var(--text-secondary); }

/* ---- Sticky floating badge ("Audited by Crocky", rotating messages) ----
   Lives in the footer partial so it shows on landing, about, methodology and
   the SPA report. Text rotates between three brand variants on a random 25 to
   60s interval, driven by i18n.js. */
.ch-audited-by {
  position: fixed; bottom: 18px; right: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 0.85rem; font-weight: 500;
  box-shadow: var(--shadow-sm);
  z-index: 30;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s ease;
}
.ch-audited-by:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  color: var(--text-primary);
}
.ch-audited-by strong { color: var(--text-primary); font-weight: 700; }
.ch-audited-by::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 8px var(--primary);
  animation: ch-pulse 2.6s cubic-bezier(0.45,0,0.55,1) infinite;
  flex-shrink: 0;
}
.ch-audited-by-text {
  white-space: nowrap;
}
/* Shared fade utility for any rotating text element (floating badge,
   hero pill and the hero h1 all share the same fade tick). */
.ch-rotating-text {
  display: inline-block;
  transition: opacity 0.32s ease;
}
.ch-rotating-text.is-fading { opacity: 0; }
.ch-hero h1 { transition: opacity 0.32s ease; }
.ch-hero h1.is-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .ch-rotating-text,
  .ch-hero h1 { transition: none; }
}
@media (max-width: 540px) {
  .ch-audited-by { bottom: 12px; right: 12px; padding: 7px 12px; font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-audited-by::before { animation: none; }
  .ch-audited-by-text { transition: none; }
}