/* ==========================================================================
   SEO Audit - stylesheet
   Design tokens, layout, and components. No framework, no build step.

   Theme is driven by [data-theme] on <html>, set before first paint by the
   bootstrap script in <head>. "light" is the default and the plain :root
   block, so the page still renders correctly with no JavaScript at all.

   Structure:
     0. Display face
     1. Tokens
     2. Reset & base
     3. Utilities
     4. Header / footer
     5. Hero & audit form
     6. Loading
     7. Errors
     8. Summary card
     9. Toolbar
    10. Category grid
    11. Issue cards & fix panels
    12. Info sections
    13. Toast
    14. Responsive
    15. Print
   ========================================================================== */

/* === 0. Display face =================================================== */

/* Space Grotesk (Florian Karsten), SIL Open Font License 1.1 - see
   fonts/OFL.txt. Used for titles only.

   Chosen for its letterforms, not for decoration: the flat terminals, the
   angled leg on the "a" and the single-storey "g" carry a technical,
   engineered feel, and the face is used by real products rather than being a
   sci-fi kit font. There is deliberately no glow, gradient or shadow anywhere
   on a title - the emphasis comes from the shape of the letters, the weight
   step and the type scale.

   Self-hosted in fonts/ rather than pulled from a CDN: the Content-Security-
   Policy is font-src 'self', and the privacy page promises that nothing is
   loaded from a third party. One variable file covers the 300-700 range that
   the title rules use; only the `latin` subset is shipped, which contains
   every glyph on the site including the em-dashes and typographic quotes used
   in the legal pages. `swap` means body copy paints immediately in the system
   sans rather than waiting on the font. */
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-latin-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === 1. Tokens ========================================================== */

/* Light is the base declaration rather than an override, so :root alone is a
   complete, usable light theme. */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Neutral paper surfaces keep analytical content ahead of decoration. */
  --bg: #f8fafc;
  --bg-alt: #f1f5f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #e2e8f0;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;

  /* Text contrast follows a restrained, high-legibility slate scale. */
  --text: #0f172a;
  --text-muted: #475569;
  --text-dim: #64748b;

  /* A single warm action accent; links use a readable blue. */
  --brand: #c2410c;
  --brand-bright: #1d4ed8;
  --brand-text: #ffffff;
  --brand-soft: #fff7ed;
  --brand-soft-border: #fed7aa;
  --brand-glow: rgba(194, 65, 12, 0.14);
  --brand-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);

  --wash: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  --wash-alt: #f1f5f9;

  /* Severity. Red / amber / blue / green maps to the user's
     Red/Yellow/Green severity indicator requirement. Each is dark enough to
     read as text on white; dark mode lightens them to match. */
  --critical: #b91c1c;
  --critical-bg: #fef2f2;
  --critical-border: #fecaca;
  --critical-glow: rgba(185, 28, 28, 0.1);

  --warning: #a16207;
  --warning-bg: #fffbeb;
  --warning-border: #fde68a;

  --info: #1d4ed8;
  --info-bg: #eff6ff;
  --info-border: #bfdbfe;

  /* Orange accent used by the primary CTA, headings highlights and FAQ
     markers. Lifted/darkened in dark mode so it stays legible. */
  --accent: #c2410c;
  --accent-hover: #9a3412;

  --pass: #15803d;
  --pass-bg: #f0fdf4;
  --pass-border: #bbf7d0;

  /* Score bands */
  --band-good: #15803d;
  --band-ok: #a16207;
  --band-bad: #b91c1c;

  /* The one green gradient every positive score surface shares. The progress
     bars, the score rings and the score numbers all paint from it, so a
     "good" score reads as a single style across the preview and the report.
     Anchored on the brand green #15803d, lifted only enough to keep it a
     gradient. */
  --green-grad: linear-gradient(90deg, color-mix(in srgb, #15803d 55%, #ffffff) 0%, color-mix(in srgb, #15803d 78%, #ffffff) 52%, #15803d 100%);

  /* Code and evidence blocks stay dark in both themes: a monospace sample is
     easier to read on a dark ground, and it keeps the palette restrained. */
  --code-bg: #12151d;
  --code-border: #1f2430;
  --code-text: #cfd6e2;
  --code-strong: #e9edf5;

  /* Restrained geometry; pill radius remains for compact controls only. */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --pill: 999px;
  --shell: 1200px;
  --header-h: 76px;

  /* Shadows are barely there: a hairline plus a wide, low-opacity spread. */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow: 0 2px 6px rgba(15, 23, 42, 0.07);
  --shadow-md: 0 8px 20px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 36px rgba(15, 23, 42, 0.12);

  --on-accent: #ffffff;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo,
          Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  /* Display face for titles only. Self-hosted, so it needs no third-party
     connection and satisfies `font-src 'self'`. The stack after it keeps the
     current sans metrics roughly in step if the file is ever unavailable. */
  --display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, Roboto,
             "Helvetica Neue", Arial, sans-serif;

  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode is a near-black neutral rather than a saturated navy, with text
   held at a comfortable low-glare contrast. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0c0d12;
  --bg-alt: #101119;
  --surface: #14161e;
  --surface-2: #1b1e28;
  --surface-3: #242833;
  --border: #242837;
  --border-strong: #363b4d;

  --text: #f2f3f7;
  --text-muted: #a8adbd;
  --text-dim: #838a9c;

  /* The same hue as light mode, lifted in lightness so it does not vibrate
     against a dark ground. */
  --brand: #fb923c;
  --brand-bright: #93c5fd;
  --brand-text: #0c0d12;
  --brand-soft: #2b211b;
  --brand-soft-border: #5d3826;
  --brand-glow: rgba(251, 146, 60, 0.2);
  --brand-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);

  --wash: radial-gradient(1000px 480px at 50% -12%, #241f3d 0%, rgba(36, 31, 61, 0) 62%),
          radial-gradient(760px 380px at 10% 4%, #16233a 0%, rgba(22, 35, 58, 0) 60%),
          linear-gradient(180deg, #12111c 0%, #0f1016 55%, #0c0d12 100%);
  --wash-alt: linear-gradient(180deg, #11121a 0%, #0d0e14 100%);

  --critical: #ec8b98;
  --critical-bg: #241a1e;
  --critical-border: #432b31;
  --critical-glow: rgba(236, 139, 152, 0.16);

  --warning: #d9ad5c;
  --warning-bg: #241e15;
  --warning-border: #453a22;

  --info: #6fb0d8;
  --info-bg: #17222a;
  --info-border: #2c3f4d;

  --accent: #ff7a3d;
  --accent-hover: #ff9159;

  --pass: #5cc39b;
  --pass-bg: #15221d;
  --pass-border: #274036;

  --band-good: #5cc39b;
  --band-ok: #d9ad5c;
  --band-bad: #ec8b98;

  --green-grad: linear-gradient(90deg, color-mix(in srgb, #15803d 55%, #ffffff) 0%, color-mix(in srgb, #15803d 78%, #ffffff) 52%, #15803d 100%);

  --code-bg: #0e1015;
  --code-border: #242833;
  --code-text: #c7cedb;
  --code-strong: #e8edf5;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 26px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 18px 44px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.6);

  --on-accent: #0c0d12;
}

/* Respect the OS preference for less motion in either theme. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* === 2. Reset & base ==================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` attribute must always win while present. Some components set
   `display` on the same element (e.g. .field-error uses flex), and an author
   display rule would otherwise beat the user agent's `[hidden] { display: none }`,
   leaving empty error boxes and notes permanently on screen. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* The theme flips these without a reload, so suppress the transition it would
     otherwise animate across every token in the sheet. */
  transition: background-color var(--transition), color var(--transition);
}

/* Titles are the only place the display face appears. Body copy, buttons,
   form labels and code stay on --sans so long-form reading is unaffected.

   Sizes and line-height are unchanged from the original sans settings, so the
   type scale and the hero's footprint stay exactly as designed. The only
   adjustment is tracking: Space Grotesk sets wider than the old sans at the
   same size, so it is pulled in slightly to stop the larger headings from
   looking loose. There are no shadows, glows or gradients on any title. */
h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.026em;
  color: var(--text);
  font-synthesis: none;
}

h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-bright); text-decoration: none; }
a:hover { text-decoration: underline; }

code, kbd, pre, samp { font-family: var(--mono); }

code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.1em 0.4em;
  color: var(--text);
  font-size: 0.87em;
  word-break: break-word;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--brand-glow); color: var(--text); }

/* === 3. Utilities ======================================================= */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 28px;
}

.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;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  padding: 11px 20px;
  background: var(--brand);
  color: var(--brand-text);
  border-radius: var(--pill);
  font-weight: 600;
  transition: top var(--transition);
}
.skip-link:focus { top: 12px; text-decoration: none; }

.muted { color: var(--text-muted); }

/* --- Buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  border: 1px solid transparent;
  border-radius: var(--pill);
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.008em;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), box-shadow var(--transition),
              transform var(--transition);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* One filled button per view. A flat fill with a soft coloured shadow, and a
   one-pixel lift on hover - enough feedback, no bounce. */
.btn-primary {
  background: #ff8200;
  border-color: transparent;
  color: #ffffff;
  box-shadow: var(--brand-shadow);
}
.btn-primary:hover:not(:disabled) {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 12px 48px -12px rgba(125, 85, 255, 0.5);
}
.btn-primary:active:not(:disabled) {
  filter: brightness(0.98);
  transform: none;
}

.btn-ghost {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}

.btn-sm {
  padding: 7px 13px;
  font-size: 0.8rem;
  font-weight: 600;
}

.btn-spinner { display: none; }
.is-loading .btn-spinner { display: block; }
.is-loading .btn-label { opacity: 0.7; }
.is-loading .btn-arrow { display: none; }

/* --- Chips / pills --- */

.chip {
  padding: 7px 15px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--pill);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.8rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), box-shadow var(--transition);
}
.chip:hover {
  background: var(--brand-soft);
  border-color: var(--brand-soft-border);
  color: var(--brand);
  box-shadow: var(--shadow);
  text-decoration: none;
}

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.dot-critical { background: var(--critical); }
.dot-warning  { background: var(--warning); }
.dot-info     { background: var(--info); }
.dot-pass     { background: var(--pass); }

/* === 4. Header / footer ================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Opaque rather than translucent: a blurred bar over a page of dense cards
     reads as expensive-but-noisy, and the backdrop filter costs paint on every
     scroll frame. A solid white bar with a hairline is quieter and cheaper. */
  background: #ffffff;
  border-bottom: 1px solid var(--border);
}

:root[data-theme="dark"] .site-header { background: #ffffff; }
:root[data-theme="dark"] .site-header .brand-text,
:root[data-theme="dark"] .site-header nav a { color: #111111; }
:root[data-theme="dark"] .site-header nav a:hover { color: #000000; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
  padding-block: 4px;
}

/* The wordmark stays in the body sans and at its original optical size. A
   second typeface in the header bar, tracked out and shouted, reads as
   branding rather than as a product name; the magnifying-glass mark already
   carries the identity. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -0.024em;
}
.brand:hover { text-decoration: none; }

/* The brand mark is the customer's own transparent PNG. */
.brand-mark {
  width: 150px;
  height: 90px;
  flex: 0 0 auto;
  object-fit: contain;
}
.brand-text { white-space: nowrap; }

.site-header nav { display: flex; gap: 28px; margin-right: auto; margin-left: 14px; }
.site-header nav a {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 550;
  letter-spacing: -0.006em;
  transition: color var(--transition);
}
.site-header nav a:hover { color: var(--text); text-decoration: none; }

/* The single purple pill in the header: the one always-visible action. */
.nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background: #ff8200;
  border-radius: var(--pill);
  color: var(--brand-text) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  white-space: nowrap;
  box-shadow: var(--brand-shadow);
  transition: background var(--transition), transform var(--transition);
}
.nav-cta:hover { background: var(--accent-hover); transform: translateY(-1px); text-decoration: none !important; }

/* --- Language selector ---
   Compact pill in the header: globe, label, subtle chevron. White ground,
   hairline border, one whisper of shadow - the same restraint as the CTA.
   Radius sits at 12px (--radius-sm), between the pill CTA and the 16px cards. */
.lang-selector {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 550;
  letter-spacing: -0.004em;
  line-height: 1;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition),
              box-shadow var(--transition), color var(--transition);
  white-space: nowrap;
}
.lang-selector:hover {
  border-color: var(--brand-soft-border);
  background: var(--brand-soft);
  color: var(--brand);
}
.lang-selector:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.lang-selector .globe {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: color var(--transition);
}
.lang-selector:hover .globe { color: var(--brand); }
.lang-selector .label {
  display: inline-block;
  font-size: 0.84rem;
  font-weight: 550;
}
.lang-selector .arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-dim);
  transition: transform var(--transition), color var(--transition);
}
.lang-selector:hover .arrow { color: var(--brand); }
.lang-selector.open .arrow { transform: rotate(180deg); }
/* Purple accent on open - same hue as the "Run a free audit" pill. */
.lang-selector.open {
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}

/* Dropdown: floats below the trigger, 14px corners, 6px inner gutter so
   the hover/active rows read as inset cards rather than edge-to-edge bars. */
.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 196px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity var(--transition), visibility var(--transition),
              transform var(--transition);
}
.lang-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.lang-dropdown .lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  margin-bottom: 2px;
  border-radius: 10px;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.lang-dropdown .lang-item:last-child { margin-bottom: 0; }
.lang-dropdown .lang-item:hover,
.lang-dropdown .lang-item:focus-visible {
  background: var(--surface-2);
  color: var(--text);
  outline: none;
}
/* Two-letter code chip: a quiet monospace-ish tag, no flag emoji. */
.lang-dropdown .lang-code {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 20px;
  padding: 0 5px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition);
}
.lang-dropdown .lang-item .check {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-left: auto;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.7);
  color: var(--brand);
  transition: opacity var(--transition), transform var(--transition);
}
.lang-dropdown .lang-item .text { flex: 1 1 auto; }
.lang-dropdown .lang-item .name {
  font-weight: 550;
  color: inherit;
}
/* Active: light-purple wash, purple name and chip, purple checkmark. */
.lang-dropdown .lang-item.is-active {
  background: var(--brand-soft);
  color: var(--brand);
}
.lang-dropdown .lang-item.is-active .check {
  opacity: 1;
  transform: scale(1);
}
.lang-dropdown .lang-item.is-active .lang-code {
  background: var(--surface);
  border-color: var(--brand-soft-border);
  color: var(--brand);
}

/* Arabic row keeps RTL text flow; the panel itself stays LTR. */
.lang-item[dir="rtl"] { direction: rtl; }

/* Keyboard selection while the listbox is open. */
.lang-dropdown .lang-item.is-focused { box-shadow: inset 0 0 0 2px var(--brand-glow); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .lang-dropdown { transition: none; }
  .lang-selector .arrow,
  .lang-dropdown .lang-item .check { transition: none; }
}
.theme-toggle {
  flex: 0 0 auto;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 0;
}
.theme-toggle-track {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition);
}
.theme-toggle:hover .theme-toggle-track {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
}
.theme-icon { display: block; grid-area: 1 / 1; }
/* Light theme: offer dark. Dark theme: offer light. */
:root[data-theme="light"] .theme-icon-sun,
:root[data-theme="dark"] .theme-icon-moon { display: none; }

/* The footer is deliberately quiet: a hairline-topped band that carries the
   brand, the utility links and the legal note. It is built from the same
   tokens as the rest of the page, so it needs no second palette for dark mode.
   Top row pairs the wordmark with the links; the lower row pairs the disclaimer
   with the build line. Both rows simply wrap on narrow screens. */
.site-footer {
  margin-top: 0;
  padding: clamp(52px, 6vw, 78px) 0 clamp(36px, 4.5vw, 52px);
  border-top: 1px solid var(--border);
  background: var(--wash-alt);
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.7;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 32px;
  padding-bottom: clamp(22px, 3vw, 34px);
  border-bottom: 1px solid var(--border);
}

.footer-brand { display: inline-flex; align-items: center; }
.footer-brand:hover { text-decoration: none; }
/* The logo ships as a square, so cap it in a wide box and contain it - the same
   approach the header takes - rather than letting it set the row's height. */
.footer-brand-mark {
  display: block;
  width: 144px;
  height: 78px;
  object-fit: contain;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.89rem;
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: var(--pill);
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: -0.006em;
  transition: color var(--transition), background var(--transition),
              border-color var(--transition);
}
.footer-nav a:hover {
  color: var(--brand);
  background: var(--surface);
  border-color: var(--border);
  text-decoration: none;
}

/* Legal note on the left, version + privacy line on the right. */
.footer-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 56px;
  padding-top: clamp(22px, 3vw, 32px);
}
.site-footer p { margin: 0; max-width: 78ch; }
.footer-disclaimer { flex: 1 1 440px; }
.footer-meta {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: -0.004em;
}

/* === 5. Hero & audit form ============================================== */

/* Pair the conversion form with a report preview; the rest of the page stays
   visually quieter so the actual findings read as data rather than marketing. */
.hero {
  padding: 56px 0 58px;
  text-align: left;
  background: linear-gradient(180deg, #c0dcfc62 0%, #cae7ff28 60%);
  border-bottom: 0px solid var(--border);
}

:root[data-theme="dark"] .hero {
  background: radial-gradient(900px 420px at 50% -10%, rgba(125, 85, 255, 0.10) 0%, rgba(125, 85, 255, 0) 60%),
              linear-gradient(180deg, #131222 0%, #0e0f16 100%);
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 68px);
}

.hero-copy { min-width: 0; }

.hero h1 {
  max-width: 15ch;
  margin: 0 0 18px;
  font-size: clamp(2.45rem, 4vw, 3.35rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.lede {
  max-width: 40ch;
  margin: 0 0 24px;
  color: var(--text-muted);
  font-size: 1.08rem;
  line-height: 1.6;
}

.audit-form {
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  text-align: left;
}

.hero .field label {
  margin-bottom: 7px;
  font-size: 0.94rem;
  letter-spacing: 0;
  text-transform: none;
}

.hero .input-group {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  padding-bottom: 8px;
  border-radius: 13px;
}

.hero .input-prefix { padding-inline: 15px 0; }

.hero .audit-form input[type="text"] {
  padding: 15px 8px;
  font-size: 0.92rem;
}

.hero .attempts-container {
  gap: 6px;
  padding-inline: 4px;
  font-size: 0.7rem;
}

.hero .input-group .btn {
  grid-column: 1 / -1;
  width: calc(100% - 16px);
  min-height: 48px;
  margin: 0 8px;
  padding-inline: 16px;
  border-radius: 9px;
}

.hero .btn-arrow { font-size: 1.1em; line-height: 1; }

.hero #keyword-input {
  padding: 12px 16px;
  border-radius: 10px;
}

.hero .field-optional label { font-size: 0.84rem; }
.hero .field-optional .hint { margin-top: 5px; }

.hero .examples {
  justify-content: flex-start;
  margin-top: 12px;
}

.hero-assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 20px 0 0;
  padding: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  list-style: none;
}

.hero-assurances li { display: flex; align-items: center; gap: 6px; }
.hero-assurances__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--pass);
}

.audit-preview {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  padding: clamp(22px, 2.6vw, 32px);
  background:
    radial-gradient(ellipse at 100% 0%, var(--brand-glow), transparent 38%),
    linear-gradient(145deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.audit-preview::before {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 12%;
  left: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), var(--brand-bright), transparent);
  content: "";
}

.audit-preview::after {
  position: absolute;
  z-index: -1;
  top: -90px;
  right: -105px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-glow), transparent 70%);
  content: "";
  pointer-events: none;
}

.audit-preview:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: 0 30px 72px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.preview-head { margin-bottom: 18px; }
.preview-eyebrow {
  margin: 0 0 7px;
  color: #797979;
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.preview-head h2 {
  max-width: 25ch;
  margin: 0;
  font-size: clamp(2.25rem, 2.25vw, 2.65rem);
  font-weight: 1000;
  line-height: 1.16;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.preview-engines {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 13px;
  margin: -4px 0 16px;
}

.preview-engines__label {
  color: var(--text-dim);
  font-size: 1.00rem;
  font-weight: 600;
}

.preview-engines__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.preview-engine {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 650;
  white-space: nowrap;
}

.preview-engine__mark {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}

.preview-engine__mark--google {
  background: conic-gradient(from -40deg, #4285f4 0 26%, #34a853 26% 48%, #fbbc05 48% 70%, #ea4335 70% 86%, #4285f4 86%);
  background-clip: text;
  color: transparent;
}

.preview-engine__mark--bing {
  color: #1689d6;
  font-size: 1.15rem;
  font-style: italic;
}

.preview-engine__duck {
  display: block;
  width: 16px;
  height: 16px;
}

.preview-score-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  min-width: 0;
  font-weight: 700;
}

.preview-score {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 138px;
  height: 138px;
  flex: 0 0 138px;
  border-radius: 50%;
  color: var(--score-accent, var(--band-good));
  transition: color var(--transition);
}

.preview-score__achievement-ring {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.preview-score__ring-track,
.preview-score__ring-draw,
.preview-score__ring-sweep {
  fill: none;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.preview-score__ring-track {
  stroke: var(--surface-3);
  stroke-width: 9;
}

.preview-score__ring-draw {
  stroke: var(--score-accent, var(--pass));
  stroke-linecap: round;
  stroke-width: 9;
  stroke-dasharray: 289.03;
  stroke-dashoffset: 289.03;
  animation: preview-score-ring-fill 1.5s cubic-bezier(0.22, 0.68, 0.24, 1) 120ms both;
}

.preview-score__ring-sweep {
  stroke: #fff;
  stroke-linecap: round;
  stroke-width: 10;
  stroke-dasharray: 16 273;
  stroke-dashoffset: 0;
  opacity: 0;
  animation: preview-score-ring-sweep 1.5s cubic-bezier(0.4, 0, 0.2, 1) 120ms both;
}

.audit-preview.is-score-critical .preview-score { --score-accent: #ef4444; color: #ef4444; }
.audit-preview.is-score-needs-work .preview-score { --score-accent: #f97316; color: #f97316; }
.audit-preview.is-score-progress .preview-score { --score-accent: #eab308; color: #eab308; }
.audit-preview.is-score-strong .preview-score { --score-accent: #22c55e96; color: #22c55e9c; }
.audit-preview.is-score-winner .preview-score { --score-accent: #22c55e; color: #22c55e; }

/* The green score states share the page's green gradient: the ring stroke and
   the number both paint from it (the ring through the SVG gradient defined in
   index.html), matching the category progress fills. */
.audit-preview.is-score-strong .preview-score__ring-draw,
.audit-preview.is-score-winner .preview-score__ring-draw { stroke: url(#previewRingGradGood); }

.audit-preview.is-score-strong .preview-score strong,
.audit-preview.is-score-winner .preview-score strong {
  background: var(--green-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.audit-preview.is-score-winner {
  border-color: color-mix(in srgb, #10b981 46%, var(--border));
  animation: preview-winner-aura 3.2s ease-in-out infinite;
}

.audit-preview.is-score-winner::after {
  background: radial-gradient(circle, color-mix(in srgb, #10b981 42%, transparent), transparent 70%);
  animation: preview-winner-aura-bloom 3.2s ease-in-out infinite;
}

.preview-score strong.is-score-updating {
  animation: preview-score-number-in 360ms cubic-bezier(0.2, 0.7, 0.25, 1) both;
}

.preview-score strong {
  position: relative;
  z-index: 1;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.preview-score__total {
  display: block;
  position: relative;
  z-index: 1;
  margin-top: 5px;
  color: var(--text-dim);
  font-size: 0.66rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

@keyframes preview-score-ring-fill {
  from { stroke-dashoffset: 289.03; }
  to { stroke-dashoffset: var(--achievement-ring-offset, 31.79); }
}

@keyframes preview-score-ring-sweep {
  0% { opacity: 0; stroke-dashoffset: 0; }
  12% { opacity: 0.9; }
  88% { opacity: 0.9; }
  100% { opacity: 0; stroke-dashoffset: -289.03; }
}

@keyframes preview-score-number-in {
  from { opacity: 0.4; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes preview-winner-aura {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12),
      0 0 40px 6px color-mix(in srgb, #10b981 16%, transparent);
  }
  50% {
    transform: scale(1.006);
    filter: brightness(1.035);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12),
      0 0 76px 16px color-mix(in srgb, #10b981 34%, transparent);
  }
}

@keyframes preview-winner-aura-bloom {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.22); }
}

@media (prefers-reduced-motion: reduce) {
  .preview-score { transition: none; }
  .preview-category-fill { transition: none; }
  .preview-score strong.is-score-updating { animation: none; }

  .preview-score__ring-draw {
    animation: none;
    stroke-dashoffset: var(--achievement-ring-offset, 31.79);
  }
  .preview-score__ring-sweep { animation: none; opacity: 0; }

  .audit-preview.is-score-winner,
  .audit-preview.is-score-winner::after {
    animation: none;
  }

  .audit-preview.is-score-winner {
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12),
      0 0 44px 8px color-mix(in srgb, #10b981 20%, transparent);
  }
  .audit-preview.is-score-winner::after { opacity: 0.6; transform: none; }
}

.preview-site {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

/* The hero overview block mirrors the results Overview (.summary-card):
   ring + verdict + fact table first, then the severity counts as 2x2 tiles -
   the same components and spacing as the real report, so the sample is an
   honest preview of what an audit returns. */
.preview-overview {
  display: grid;
  gap: 18px;
}
.preview-overview__head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.preview-overview__head h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.028em;
}

.preview-summary-text { min-width: 0; }
.preview-summary-eyebrow {
  margin: 0 0 5px;
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.085em;
}
.preview-verdict {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}
.preview-verdict__text {
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  letter-spacing: -0.025em;
  line-height: 1.25;
}
.preview-facts {
  min-width: 0;
}

.preview-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: center;
  min-width: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--border);
}

.preview-count {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
}

.preview-count strong {
  grid-column: 2;
  grid-row: 1;
  font-size: 1.45rem;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.preview-count__label {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 650;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.preview-count__label img {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  object-fit: contain;
}

.preview-count--critical strong { color: var(--critical); }
.preview-count--warning strong { color: var(--warning); }
.preview-count--info strong { color: var(--info); }
.preview-count--pass strong { color: var(--pass); }

.preview-section { padding-top: 20px; }
.preview-section h3 {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.preview-categories,
.preview-findings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.preview-categories li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 12px;
  min-width: 0;
  padding: 10px 2px 11px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
}

.preview-categories li > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-categories li strong {
  min-width: 2.4em;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.preview-categories li[data-score-band="good"] strong {
  background: var(--green-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.preview-categories li[data-score-band="ok"] strong { color: #c49d02; }
.preview-categories li[data-score-band="bad"] strong { color: var(--critical); }
.preview-categories li[data-score-band="unavailable"] strong { color: var(--text-dim); }

/* Every good fill spans the whole track and is clipped at the score, so the
   gradient is revealed only up to the finish point: the colour at the end
   depends on where the score stops instead of always running the full ramp.
   Flat by design - no glow or shadow. */
.preview-categories li[data-score-band="good"] .preview-category-fill { background: var(--green-grad); }
.preview-categories li[data-score-band="ok"] .preview-category-fill {
  background: linear-gradient(90deg, color-mix(in srgb, #c49d02 55%, #ffffff), #c49d02);
}
.preview-categories li[data-score-band="bad"] .preview-category-fill { background: var(--critical); }
.preview-categories li[data-score-band="unavailable"] .preview-category-fill { background: var(--surface-3); }

.preview-categories li[data-score-band="unavailable"] .preview-category-track {
  background: repeating-linear-gradient(135deg, var(--surface-3) 0 3px, transparent 3px 6px);
}

.preview-category-track {
  grid-column: 1 / -1;
  display: block;
  height: 9px;
  overflow: hidden;
  border-radius: var(--pill);
  background: var(--surface-3);
}

.preview-category-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-bright));
  box-shadow: none;
  filter: none;
  clip-path: inset(0 calc(100% - var(--category-score, 0%)) 0 0 round 0 var(--pill) var(--pill) 0);
  transition: clip-path 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.preview-findings-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.preview-findings { grid-template-columns: 1fr; gap: 8px; }
.preview-findings li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.4;
  box-shadow: var(--shadow-sm);
}

.preview-finding-copy { display: grid; gap: 3px; min-width: 0; }
.preview-finding-copy strong { color: var(--text); font-size: 0.72rem; font-weight: 650; }
.preview-finding-copy small { color: var(--text-dim); font-size: 0.67rem; line-height: 1.45; }
.preview-finding-severity {
  color: var(--warning);
  font-size: 0.6rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.preview-findings li[data-severity="critical"] .preview-finding-severity { color: var(--critical); }
.preview-findings li[data-severity="info"] .preview-finding-severity { color: var(--info); }

.preview-finding-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--warning);
  box-shadow: 0 0 0 4px var(--warning-bg);
}

.preview-findings li[data-severity="critical"] .preview-finding-dot { background: var(--critical); }
.preview-findings li[data-severity="info"] .preview-finding-dot { background: var(--info); }
.preview-findings li[data-severity="critical"] { border-color: var(--critical-border); }
.preview-findings li[data-severity="warning"] { border-color: var(--warning-border); }
.preview-findings li[data-severity="info"] { border-color: var(--info-border); }

.audit-preview.is-actual .preview-eyebrow { color: var(--pass); }

/* A winner score turns the preview into a horizontal dashboard: the narrative -
   title, engines, category scores and findings - reads down the left, while the
   Overview panel (score ring, fact table, severity counts) sits on the right.
   Every component keeps its own design; only the arrangement changes. Below the
   breakpoint it stays the stacked card. */
@media (min-width: 561px) {
  .audit-preview.is-score-winner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: clamp(22px, 2.6vw, 36px);
    align-items: start;
  }

  .audit-preview.is-score-winner > .preview-head,
  .audit-preview.is-score-winner > .preview-engines,
  .audit-preview.is-score-winner > .preview-section,
  .audit-preview.is-score-winner > .preview-findings-section {
    grid-column: 1;
  }

  .audit-preview.is-score-winner > .preview-overview {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: stretch;
    align-content: start;
  }

  /* The stat panel is narrower than the whole card, so the score ring sits
     above the fact table rather than beside it - same ring, same table. */
  .audit-preview.is-score-winner .preview-score-row {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .audit-preview.is-score-winner .preview-summary-text {
    width: 100%;
    text-align: center;
  }

  .audit-preview.is-score-winner .preview-verdict {
    justify-content: center;
  }

  /* Single column here keeps every category label on one line. */
  .audit-preview.is-score-winner .preview-categories {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The severity tiles fold to one column when the stats panel is too narrow
     for two, so the label never truncates. Same tiles either way. */
  .audit-preview.is-score-winner .preview-counts {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

/* A compact before/after story immediately after the hero gives visitors a
   concrete reason to start the audit before the longer product explanation. */
.before-after {
  position: relative;
  overflow: hidden;
  padding: clamp(58px, 7vw, 92px) 0;
  border-block: 1px solid var(--border);
  background:
    radial-gradient(ellipse at 50% 0%, var(--brand-glow), transparent 46%),
    var(--wash-alt);
}

.before-after__header {
  max-width: 680px;
  margin: 0 auto 34px;
  text-align: center;
}

.before-after__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--brand);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.before-after__eyebrow::before,
.before-after__eyebrow::after {
  width: 20px;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0.55;
}

.before-after__header h2 {
  max-width: 20ch;
  margin: 0 auto 12px;
  font-size: clamp(1.8rem, 3.7vw, 2.65rem);
  text-wrap: balance;
}

.before-after__header > p:last-child {
  max-width: 54ch;
  margin-inline: auto;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.before-after__comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
  align-items: center;
  max-width: 970px;
  margin: 0 auto;
}

.before-after__card {
  position: relative;
  min-width: 0;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  animation: comparison-enter 650ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.before-after__card--before {
  animation-delay: 80ms;
}

.before-after__card--after {
  z-index: 1;
  border-color: var(--pass-border);
  background:
    radial-gradient(ellipse at 100% 0%, var(--pass-bg), transparent 58%),
    var(--surface);
  box-shadow: 0 18px 48px rgba(21, 128, 61, 0.12), var(--shadow-md);
  animation-delay: 190ms;
}

.before-after__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 17px;
  color: #a8000e;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.11em;
}

.before-after__card--after .before-after__label { color: var(--pass); }

.before-after__status {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-dim);
}

.before-after__status svg,
.before-after__connector svg,
.before-after__cta svg {
  display: block;
  width: 16px;
  height: 16px;
}

.before-after__card--after .before-after__status {
  background: var(--pass-bg);
  color: var(--pass);
}

.before-after__card h3 {
  margin: 0 0 18px;
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  letter-spacing: -0.02em;
}

.before-after__card ul {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.before-after__card li {
  position: relative;
  padding-left: 22px;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.before-after__card--before li::before,
.before-after__card--after li::before {
  position: absolute;
  top: 0.28em;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  content: "";
}

.before-after__card--before li::before {
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
}

.before-after__card--after li::before {
  background: var(--pass-bg);
  box-shadow: inset 0 0 0 4px var(--pass);
}

.before-after__connector {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
}

.before-after__connector::before {
  position: absolute;
  right: 50%;
  left: 50%;
  height: 1px;
  background: linear-gradient(90deg, var(--border-strong), var(--pass));
  content: "";
  animation: comparison-line 1.1s 350ms ease-out forwards;
}

.before-after__connector > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--pass-border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--pass);
  box-shadow: 0 0 0 6px var(--wash-alt), var(--shadow);
  animation: comparison-pulse 2.8s 1.3s ease-in-out infinite;
}

.before-after__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid var(--pass-border);
}

.before-after__proof span {
  padding: 5px 9px;
  border: 1px solid var(--pass-border);
  border-radius: var(--pill);
  background: var(--pass-bg);
  color: var(--pass);
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
}

.before-after__action {
  display: grid;
  justify-items: center;
  gap: 11px;
  margin-top: 30px;
  text-align: center;
}

.before-after__cta {
  min-height: 54px;
  padding-inline: 27px;
  font-size: 0.96rem;
  box-shadow: 0 10px 26px var(--brand-glow);
}

.before-after__cta svg {
  width: 18px;
  height: 18px;
  transition: transform var(--transition);
}

.before-after__cta:hover svg { transform: translateX(3px); }

.before-after__action p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.76rem;
}

.before-after__action p span {
  padding-inline: 4px;
  color: var(--pass);
}

@keyframes comparison-enter {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes comparison-line {
  to { left: 0; right: 0; }
}

@keyframes comparison-pulse {
  50% { box-shadow: 0 0 0 9px var(--wash-alt), var(--shadow); }
}

/* One required action above one optional one, so the primary field gets the
   full width and the pill CTA inside it. */
.field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

/* The keyword box is a refinement, not a requirement: keep it visually quieter
   than the primary URL field so the required action dominates. */
.field-optional label { color: var(--text-dim); font-weight: 750; }
.field-optional .hint { color: var(--text-dim); }

.field label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 1.200rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: capitalize;
}

.optional-tag {
  padding: 2px 8px;
  background: var(--surface-3);
  border-radius: var(--pill);
  color: var(--text-dim);
  font-size: 0.65rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* The signature control: a tall pill with the accent CTA docked inside it. */
.input-group {
  display: flex;
  align-items: stretch;
  background: var(--bg);
  border: 1.5px solid #6e6e6e;
  border-radius: 10px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input-group:hover { border-color: var(--text-dim); }
.input-group:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-glow);
}
.input-group.is-invalid {
  border-color: var(--critical);
  box-shadow: 0 0 0 4px var(--critical-glow);
}

.input-prefix {
  display: flex;
  align-items: center;
  padding-inline: 24px 0;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.95rem;
  user-select: none;
}

.audit-form input[type="text"],
.audit-form input[type="search"] {
  flex: 1 1 220px;
  min-width: 0;
  padding: 18px 8px;
  background: transparent;
  border: 0;
  color: var(--text);
  font-family: var(--mono);
  font-size: 1rem;
}
.audit-form input:focus { outline: none; }
.audit-form input::placeholder { color: var(--text-dim); }

#keyword-input {
  width: 100%;
  padding: 16px 24px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.95rem;
  transition: background var(--transition), border-color var(--transition),
              box-shadow var(--transition);
}
#keyword-input::placeholder { color: var(--text-dim); }
#keyword-input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-glow);
}

/* The CTA fills the height of the bar it sits in, inset by the same 6px on
   every side, so it reads as a pill nested in a pill. */
.input-group .btn {
  margin: 6px;
  padding: 0 30px;
  border-radius: var(--pill);
}

.hint {
  margin: 8px 0 0;
  color: var(--text-dim);
  font-size: 0.8rem;
}

.field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 9px 0 0;
  color: var(--critical);
  font-size: 0.83rem;
  font-weight: 500;
}

.field-valid .input-group { border-color: var(--pass-border); }
.field-valid .hint { color: var(--pass); }

.examples {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  color: var(--text-dim);
  font-size: 0.82rem;
}

/* --- Free-attempt tracker --- */

/* Docked inside the bar, immediately left of the CTA, so the limit is legible
   before the first run and reads as part of the control. */
.attempts-container {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  color: var(--text);
}

/* "3/3" is the number the reader acts on, so it carries the weight and the
   tabular figures: at this size the counter must not reflow the label beside it
   as the digits change. */
.attempts-counter {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.attempts-text {
  font-weight: 500;
}

/* Why the CTA stopped working, and the one action left. No `display` here on
   purpose: an author-level display would beat the user agent's
   `[hidden] { display: none }` and the note would never go away. */
.attempts__note {
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 0.83rem;
  font-weight: 500;
}

.attempts__signin {
  /* Sits inline after the sentence, so it is nudged clear of it and centred on
     the text baseline rather than sitting on it. */
  margin-left: 6px;
  vertical-align: middle;
  /* The full-size brand glow is too heavy at this size; the fill carries it. */
  box-shadow: none;
}

/* === 6. Loading ========================================================= */

.analysis-modal-open { overflow: hidden; }

.analysis-overlay {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 16px;
  background: rgba(10, 15, 20, 0.6);
  opacity: 0;
  overscroll-behavior: contain;
  transition: opacity 240ms ease;
}

.analysis-overlay[hidden] { display: none; }
.analysis-overlay.is-open { opacity: 1; }
.analysis-overlay.is-closing { opacity: 0; }

.analysis-dialog {
  width: min(432px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 36px;
  background: #EAF7F4;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 22px;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.28);
  color: #162522;
  opacity: 0;
  overscroll-behavior: contain;
  transform: scale(0.96);
  transition: opacity 240ms ease, transform 240ms ease;
}

.analysis-overlay.is-open .analysis-dialog {
  opacity: 1;
  transform: scale(1);
}

.analysis-overlay.is-closing .analysis-dialog {
  opacity: 0;
  transform: scale(0.96);
}

.analysis-dialog:focus { outline: none; }
.analysis-progress { margin-bottom: 28px; }

.analysis-progress__label {
  display: flex;
  justify-content: space-between;
  margin: 0 0 9px;
  color: #263a35;
  font-size: 0.9rem;
  font-weight: 700;
}

.analysis-progress__track {
  height: 11px;
  overflow: hidden;
  background: #fff;
  border-radius: 999px;
}

.analysis-progress__bar {
  width: 0;
  height: 100%;
  background: #17211e;
  border-radius: inherit;
  transition: width 320ms linear;
}

.analysis-target {
  margin: 0 0 8px;
  color: #52635e;
  font-family: var(--mono);
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

.analysis-heading {
  margin: 0;
  color: #14211d;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.analysis-description {
  margin: 12px 0 24px;
  color: #52635e;
  font-size: 0.96rem;
  line-height: 1.55;
}

.analysis-current {
  padding: 16px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(29, 54, 46, 0.14);
  border-radius: 14px;
}

.analysis-current h3 {
  margin: 0;
  color: #1c302a;
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.3;
}

.analysis-current h3.is-changing {
  animation: analysis-status-in 220ms ease both;
}

.analysis-current p {
  margin: 6px 0 0;
  color: #596963;
  font-size: 0.84rem;
  line-height: 1.45;
}

.analysis-checklist { margin-top: 23px; }

.analysis-checklist h3 {
  margin: 0 0 10px;
  color: #43544e;
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.analysis-checklist ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.analysis-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #65736e;
  font-size: 0.88rem;
  line-height: 1.3;
  transition: color 180ms ease;
}

.analysis-checklist li span {
  display: grid;
  width: 18px;
  flex: 0 0 18px;
  place-items: center;
  color: #74827d;
  font-size: 0.9rem;
  font-weight: 700;
}

.analysis-checklist li.is-active {
  color: #172b25;
  font-weight: 700;
}

.analysis-checklist li.is-active span {
  color: #20634d;
  animation: analysis-active-pulse 1.8s ease-in-out infinite;
}

.analysis-checklist li.is-done { color: #435a51; }
.analysis-checklist li.is-done span { color: #187248; }

.analysis-error h2 {
  margin: 0;
  color: #14211d;
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.analysis-error > p {
  margin: 12px 0 0;
  color: #52635e;
  font-size: 0.94rem;
  line-height: 1.55;
}

.analysis-error .analysis-error__detail {
  margin-top: 14px;
  font-size: 0.82rem;
}

.analysis-error .btn { margin-top: 22px; }

@keyframes analysis-status-in {
  from { opacity: 0.55; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes analysis-active-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@media (max-width: 560px) {
  .analysis-dialog {
    width: calc(100vw - 32px);
    padding: 24px;
    border-radius: 19px;
  }

  .analysis-heading { font-size: 1.625rem; }
  .analysis-progress { margin-bottom: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .analysis-overlay,
  .analysis-dialog,
  .analysis-progress__bar,
  .analysis-checklist li { transition: none; }

  .analysis-current h3.is-changing,
  .analysis-checklist li.is-active span { animation: none; }
}

/* === 7. Errors ========================================================== */

.error-section { padding: 24px 0 44px; }

.error-card {
  display: flex;
  gap: 16px;
  max-width: 920px;
  margin-inline: auto;
  padding: 22px 24px;
  background: var(--critical-bg);
  border: 1px solid var(--critical-border);
  border-radius: var(--radius-lg);
  color: var(--text);
}
.error-card svg { flex: 0 0 auto; color: var(--critical); margin-top: 2px; }
.error-card h2 { margin: 0 0 6px; font-size: 1.1rem; color: var(--critical); }
.error-card p { color: var(--text-muted); font-size: 0.92rem; }
.error-tips {
  margin-top: 12px !important;
  padding-top: 12px;
  border-top: 1px solid var(--critical-border);
  color: var(--text-muted) !important;
  font-size: 0.87rem !important;
}
.error-tips:empty { display: none; }

/* === 8. Results shell & summary card =================================== */

.results-section {
  padding: 42px 0 64px;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}

.report-shell { max-width: 1220px; }

.report-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 6px 0 27px;
  border-bottom: 1px solid var(--border);
}

.report-header h1 {
  margin: 3px 0 6px;
  color: var(--text);
  font-size: clamp(1.9rem, 3vw, 2.35rem);
  font-weight: 750;
  letter-spacing: -0.045em;
  line-height: 1.1;
}

.report-kicker {
  margin: 0;
  color: var(--brand);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

.report-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.report-subtitle span {
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.88em;
  overflow-wrap: anywhere;
}

.report-block { margin-top: 52px; }
.report-section-heading { margin-bottom: 18px; }
.report-section-heading h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.55rem, 2.4vw, 1.9rem);
  font-weight: 720;
  letter-spacing: -0.035em;
  line-height: 1.2;
}
.report-section-heading > p:last-child:not(.report-kicker) {
  margin: 7px 0 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.report-overview-section {
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.report-overview-section .report-section-heading {
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.summary-card {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
  align-items: stretch;
  gap: 28px;
}

.summary-main {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
}

/* Green score-ring gradient stops, kept in sync with --green-grad. SVG needs
   real stops rather than a CSS gradient, so the colours are repeated here. */
.ring-grad-stop-start { stop-color: color-mix(in srgb, #15803d 55%, #ffffff); }
.ring-grad-stop-mid { stop-color: color-mix(in srgb, #15803d 78%, #ffffff); }
.ring-grad-stop-end { stop-color: #15803d; }

.score-ring {
  position: relative;
  width: 138px;
  height: 138px;
  flex: 0 0 auto;
}
.score-ring svg { width: 100%; height: 100%; }
.ring-track { stroke: var(--surface-3); }
.ring-value {
  stroke: var(--band-good);
  stroke-dasharray: 326.7;
  stroke-dashoffset: 326.7;
}
.score-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.score-number {
  color: var(--band-good);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.score-out-of {
  display: block;
  margin-top: 5px;
  color: var(--text-dim);
  font-size: 0.66rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.summary-text { min-width: 0; }
.summary-eyebrow {
  margin: 0 0 5px;
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.085em;
}
.summary-text h2 { margin: 0 0 8px; font-size: 1.45rem; }
.summary-url {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.86rem;
  word-break: break-all;
}

.summary-facts {
  width: 100%;
  margin: 0;
  font-size: 0.84rem;
}

.summary-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(100px, 1fr));
  gap: 10px;
  align-content: center;
  min-width: 0;
  padding: 0 0 0 24px;
  border-left: 1px solid var(--border);
}
.count-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.count-tile:hover {
  background: var(--surface);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.count-tile:focus-visible,
.cat-card:focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 3px;
}
.count-tile strong {
  grid-column: 2;
  grid-row: 1;
  display: inline;
  font-size: 1.45rem;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.count-tile-label {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 650;
}
.count-tile-label img {
  display: block;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  object-fit: contain;
}
.count-tile-label > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.count-tile[data-severity="critical"] strong { color: var(--critical); }
.count-tile[data-severity="warning"] strong  { color: var(--warning); }
.count-tile[data-severity="info"] strong     { color: var(--info); }
.count-tile[data-severity="pass"] strong     { color: var(--pass); }

/* === 9. Toolbar ========================================================= */

.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 28px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: sticky;
  top: calc(var(--header-h) + 12px);
  z-index: 50;
}
:root[data-theme="dark"] .toolbar {
  background: var(--surface);
  border-color: var(--border);
}

.toolbar-group { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.toolbar-actions { margin-left: auto; }

/* Nine controls live in this bar and it is sticky, so it gets a tighter type
   and padding scale than the standalone .btn / .pill sizes. Without this the
   whole row wraps to two lines and doubles the sticky height. */
.toolbar .btn { padding: 8px 12px; font-size: 0.82rem; }
.toolbar .pill { padding: 7px 10px; }

.toolbar-search {
  position: relative;
  flex: 0 1 220px;
  padding: 0 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  transition: background var(--transition), border-color var(--transition),
              box-shadow var(--transition);
}
.toolbar-search:hover { border-color: var(--border); }
.toolbar-search:focus-within {
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-glow);
}
.toolbar-search input {
  flex: 1;
  min-width: 0;
  padding: 10px 2px;
  background: transparent;
  border: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
}
.toolbar-search input:focus { outline: none; }
.toolbar-search input::-webkit-search-cancel-button { opacity: 0.45; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition);
}
.pill:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-2); }
.pill.is-active {
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
}
.pill-count {
  padding: 1px 5px;
  background: var(--surface-3);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.pill.is-active .pill-count { background: rgba(255,255,255,0.16); color: inherit; }

/* === 10. Category grid ================================================== */

.category-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  margin-bottom: 36px;
}

.category-grid__nodes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.cat-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--transition), background var(--transition),
              box-shadow var(--transition), transform var(--transition);
}
.cat-card:hover {
  border-color: color-mix(in srgb, var(--card-accent, var(--brand)) 48%, var(--border));
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transform: translateY(-2px);
}
.cat-card.is-active {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand), var(--shadow-sm);
}

.cat-card--overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.7fr);
  align-items: center;
  gap: 12px 26px;
  min-height: 144px;
  padding: 22px 24px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--brand) 9%, transparent), transparent 48%),
    var(--surface);
  border-color: color-mix(in srgb, var(--brand) 24%, var(--border));
}
.cat-card--overview::after {
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--brand);
  content: "";
}
.cat-card--overview .cat-card-head {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  margin: 0;
}
.cat-card--overview .cat-card-title { font-size: 1.05rem; }
.cat-card--overview .cat-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}
.cat-card--overview .cat-gauge { width: 86px; height: 86px; }
.cat-card--overview .cat-gauge__value { font-size: 1.4rem; }
.cat-card--overview .cat-score-scale {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}
.cat-card--overview .cat-card-badges {
  grid-column: 1 / -1;
  grid-row: 2;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}

.cat-card--category {
  min-height: 176px;
  padding: 16px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--card-accent) 5%, var(--surface)), var(--surface) 62%);
}
.cat-card--category .cat-card-head {
  min-height: 60px;
  margin-bottom: 11px;
}
.cat-card--category .cat-card-title { gap: 9px; font-size: 0.91rem; }
.cat-card--category .cat-gauge {
  width: 62px;
  height: 62px;
  background: conic-gradient(var(--gauge-color) var(--gauge-progress), var(--surface-3) 0);
}
.cat-card--category .cat-gauge::before { inset: 4px; }
.cat-card--category .cat-gauge__value { font-size: 1rem; }
.cat-card--category .cat-gauge__max { font-size: 0.52rem; }
.cat-card--category .cat-card-badges { margin-top: 13px; }

.cat-score-scale {
  --score-color: var(--band-good);
  position: relative;
  display: block;
  height: 9px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  background:
    linear-gradient(to right, transparent calc(25% - 1px), var(--surface) calc(25% - 1px), var(--surface) 25%, transparent 25%),
    linear-gradient(to right, transparent calc(50% - 1px), var(--surface) calc(50% - 1px), var(--surface) 50%, transparent 50%),
    linear-gradient(to right, transparent calc(75% - 1px), var(--surface) calc(75% - 1px), var(--surface) 75%, transparent 75%),
    var(--surface-3);
}
.cat-score-scale[data-tone="ok"] { --score-color: var(--band-ok); }
.cat-score-scale[data-tone="bad"] { --score-color: var(--band-bad); }
.cat-score-scale[data-tone="good"] .cat-score-scale__fill {
  width: 100%;
  background: var(--green-grad);
  box-shadow: none;
  filter: none;
  clip-path: inset(0 calc(100% - var(--score-progress, 0%)) 0 0 round 0 var(--pill) var(--pill) 0);
  transition: clip-path 700ms cubic-bezier(0.2, 0.75, 0.25, 1);
}
.cat-score-scale__fill {
  display: block;
  width: var(--score-progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--score-color) 72%, white), var(--score-color));
  transition: width 700ms cubic-bezier(0.2, 0.75, 0.25, 1);
}
.cat-score-scale[data-tone="unavailable"] { opacity: 0.45; }

@media (prefers-reduced-motion: reduce) {
  .cat-score-scale__fill,
  .cat-score-scale[data-tone="good"] .cat-score-scale__fill { transition: none; }
}

.cat-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 72px;
  margin-bottom: 14px;
}
.cat-card-title {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  font-size: 0.97rem;
  font-weight: 650;
  letter-spacing: -0.012em;
}
.cat-card-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  background: var(--surface-2);
  background: color-mix(in srgb, var(--card-accent, var(--brand)) 13%, transparent);
  border-radius: var(--radius-sm);
  color: var(--card-accent, var(--brand));
}
.cat-gauge {
  --gauge-color: var(--band-good);
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  width: 76px;
  height: 76px;
  flex: 0 0 auto;
  background: conic-gradient(var(--gauge-color) var(--gauge-progress), var(--surface-3) 0);
  border-radius: 50%;
  color: var(--gauge-color);
  font-variant-numeric: tabular-nums;
  isolation: isolate;
}
.cat-gauge::before {
  position: absolute;
  z-index: -1;
  inset: 5px;
  background: var(--surface);
  border-radius: 50%;
  content: "";
}
.cat-gauge[data-tone="ok"] { --gauge-color: var(--band-ok); }
.cat-gauge[data-tone="bad"] { --gauge-color: var(--band-bad); }
/* A "good" gauge paints its arc and its number with the shared green gradient.
   The arc is a copy of the track repainted over just its filled sector. */
.cat-gauge[data-tone="good"]::after {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: var(--green-grad);
  border-radius: 50%;
  -webkit-mask: conic-gradient(#000 var(--gauge-progress), transparent 0);
  mask: conic-gradient(#000 var(--gauge-progress), transparent 0);
  content: "";
}
.cat-gauge[data-tone="good"] .cat-gauge__value {
  background: var(--green-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.cat-gauge__value { font-size: 1.18rem; font-weight: 750; line-height: 1; }
.cat-gauge__max {
  margin-top: 3px;
  color: var(--text-dim);
  font-size: 0.58rem;
  font-weight: 650;
  line-height: 1;
}
.cat-gauge--unavailable {
  width: 76px;
  height: 76px;
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 700;
}
.cat-gauge--unavailable::before { background: var(--surface); }

.cat-card-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--pill);
  font-size: 0.72rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.cat-badge img { display: block; width: 15px; height: 15px; object-fit: contain; }
.cat-badge[data-severity="critical"] { background: var(--critical-bg); border-color: var(--critical-border); color: var(--critical); }
.cat-badge[data-severity="warning"]  { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
.cat-badge[data-severity="info"]     { background: var(--info-bg); border-color: var(--info-border); color: var(--info); }
.cat-badge[data-severity="pass"]     { background: var(--pass-bg); border-color: var(--pass-border); color: var(--pass); }

/* === 11. Issue cards ==================================================== */

.issue-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.issue-list-head h2 { margin: 0; font-size: 1.5rem; }

.issue-list { display: grid; gap: 8px; }

/* Sticky-ish divider between category groups when the filter is set to "all".
   top margin cancels the grid gap above the first card of a group. */
.issue-group-head {
  margin: 20px 0 0;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}
.issue-list > .issue-group-head:first-child { margin-top: 0; }

.issue-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--sev-color, var(--info));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.issue-card:hover { box-shadow: var(--shadow-sm); }
.issue-card.is-open { border-color: var(--border-strong); border-left-color: var(--sev-color, var(--info)); }
.issue-card[data-severity="critical"] { --sev-color: var(--critical); --sev-bg: var(--critical-bg); }
.issue-card[data-severity="warning"]  { --sev-color: var(--warning);  --sev-bg: var(--warning-bg); }
.issue-card[data-severity="info"]     { --sev-color: var(--info);     --sev-bg: var(--info-bg); }
.issue-card[data-severity="pass"]     { --sev-color: var(--pass);     --sev-bg: var(--pass-bg); }

.issue-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition);
}
.count-tile:focus-visible,
.cat-card:focus-visible,
.pill:focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}

.issue-title-wrap { min-width: 0; }
.issue-chevron {
  flex: 0 0 auto;
  color: var(--text-dim);
  transition: transform var(--transition);
}
.issue-card.is-open .issue-chevron { transform: rotate(180deg); }

.issue-body {
  padding: 0 16px 18px;
  border-top: 1px solid var(--border);
  animation: reveal 180ms ease-out;
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.issue-section { padding-top: 18px; }
.issue-section > h4 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.075em;
}
.issue-section > h4 svg { color: var(--sev-color); }

/* "Why it matters" callout */
.why-box {
  padding: 16px 18px;
  background: var(--sev-bg);
  border: 1px solid transparent;
  border-left: 3px solid var(--sev-color);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.915rem;
  line-height: 1.65;
}

/* Evidence */
.evidence-block {
  margin: 0;
  padding: 16px 18px;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--radius);
  color: var(--code-text);
  font-family: var(--mono);
  font-size: 0.79rem;
  line-height: 1.64;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 340px;
  overflow: auto;
}

/* Before / after */
.ba-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 12px;
}

.snippet {
  display: flex;
  flex-direction: column;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.snippet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--code-border);
}
.snippet-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
  font-size: 0.71rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.snippet--before .snippet-label { color: var(--critical); }
.snippet--after  .snippet-label { color: var(--pass); }

.snippet pre {
  margin: 0;
  padding: 15px 16px;
  overflow-x: auto;
  color: var(--code-strong);
  font-size: 0.78rem;
  line-height: 1.62;
  tab-size: 2;
}
.snippet--after pre { background: rgba(15, 122, 85, 0.07); }
:root[data-theme="dark"] .snippet--after pre { background: rgba(92, 195, 155, 0.06); }

/* Steps */
.steps-list {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps-list li {
  position: relative;
  padding-left: 36px;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.62;
  counter-increment: step;
}
.steps-list li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  border: 1px solid var(--brand-soft-border);
  border-radius: 50%;
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 700;
}

/* Notes */
.notes-box {
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.notes-box ul { margin: 0; padding-left: 20px; }
.notes-box li { margin-bottom: 7px; color: var(--text-muted); font-size: 0.88rem; }
.notes-box li:last-child { margin-bottom: 0; }
.notes-box li::marker { color: var(--text-dim); }

.fix-summary {
  margin: 0 0 4px;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.58;
}

.no-results {
  padding: 44px;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
  text-align: center;
}

/* === 12. Info sections ================================================== */

/* === 12c. "You will see:" ============================================== */

/* A short reassurance band: what the audit hands back, then an upsell. It sits
   between the results and "How the audit works", and its own bottom padding is
   the whitespace that separates the two.

   Everything is scoped under .expect and driven by two local variables, so
   the section owns its colours outright and cannot be disturbed by, or disturb,
   the sections around it. */
.expect {
  --expect-rule: #d5d0e2;
  --expect-ink: #111111;
  background:#85858500;
  /* The generous gap below the CTA is deliberate: this is the transition into
     the next section, not spacing to be squeezed out. */
  padding-bottom: 116px;
}

:root[data-theme="dark"] .expect {
  --expect-rule: #2f2b47;
  --expect-ink: #f1f0f6;
}

.expect__inner {
  max-width: 1060px;
  margin-inline: auto;
  padding: 60px 40px 0;
}

/* The divider sits inside the container so it spans the content measure, not
   the viewport. 60px of air either side keeps it from reading as a border. */
.expect__rule {
  height: 1px;
  margin-bottom: 60px;
  background: var(--expect-rule);
}

.expect__title {
  margin: 0 0 16px;
  font-family: var(--sans);
  font-size: 1.3125rem; /* 21px */
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--expect-ink);
}

/* A plain list: markers are removed and the tick is a real element, so every
   item gets an identical checkmark at an identical offset with no bullet dot
   and no oversized icon. Baseline alignment keeps the tick on the first line of
   text even when an item wraps. */
.expect__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.expect__item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 1.0625rem; /* 17px */
  line-height: 1.5;
  color: var(--expect-ink);
}
.expect__item + .expect__item { margin-top: 10px; }
.expect__tick {
  flex: 0 0 auto;
  color: var(--expect-ink);
  /* Nudge onto the text's optical centre; the flex gap handles the offset. */
  transform: translateY(1px);
}

/* The upsell. A quiet card rather than a banner: the band already carries the
   colour, so the panel sits on it in the ordinary surface colour and lets the
   existing .btn treatment do the work. Copy takes the remaining width and the
   action stays at its natural size, so the two never crowd each other. */
.expect__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  margin-top: 34px;
  padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.expect__cta-copy {
  flex: 1 1 380px;
  min-width: 0;
}
.expect__cta-title {
  margin: 0 0 6px;
  font-size: 1.0625rem;
  letter-spacing: -0.018em;
}
.expect__cta-text {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.62;
}
.expect__cta-action { flex: 0 0 auto; }

@media (max-width: 900px) {
  .expect__inner { padding-inline: 32px; }
}

@media (max-width: 560px) {
  .expect { padding-bottom: 76px; }
  .expect__inner { padding: 40px 22px 0; }
  .expect__rule { margin-bottom: 40px; }
  .expect__title { font-size: 1.1875rem; margin-bottom: 14px; }
  .expect__item { font-size: 1rem; }
  .expect__item + .expect__item { margin-top: 9px; }
  .expect__cta { margin-top: 26px; padding: 22px; gap: 16px; }
  .expect__cta-action { width: 100%; }
}

/* Customer rating stays visible as a compact, secondary trust signal. */
.trust {
  --trust-star: #e8a13d;
  margin-top: 20px;
}

:root[data-theme="dark"] .trust {
  --trust-star: #f0b45a;
}

.trust__badge {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.trust__title {
  margin: 0 0 5px;
  color: var(--text-dim);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.035em;
}

.trust__avatars {
  display: flex;
  align-items: center;
}

.trust__avatars img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--surface, #fff);
  background: var(--wash-alt, #eee);
}

.trust__avatars img + img { margin-left: -10px; }

.trust__stars {
  color: var(--trust-star);
  font-size: 0.8rem;
  letter-spacing: 1px;
  line-height: 1;
}

.trust__score strong { font-weight: 650; }

@media (max-width: 560px) {
  .trust__badge { flex-wrap: wrap; gap: 6px; }
}

.info-section {
  padding: 92px 0;
  border-top: 1px solid var(--border);
}
.info-section-alt {
  background: var(--wash-alt);
  border-bottom: 1px solid var(--border);
}
.info-section h2 {
  max-width: 30ch;
  margin: 0 auto 14px;
  text-align: center;
  letter-spacing: -0.03em;
}

/* "How to use the free SEO checker": three short instructions, so they run
   across the full width rather than down a column - one glance reads left to
   right as a sequence. Each step carries its own hairline above it, which ties
   the three together as one process without needing boxes or arrows. The
   numeral is a generated counter (as in .steps-list) at display size, so the
   step order cannot drift out of sync with the markup.

   Each step is itself a two-column grid: the numeral in a narrow left column,
   the instruction beside it. Both are top-aligned so the number sits level with
   the first line of the copy rather than floating above it, and the numeral
   keeps its own column so all three digits share one left edge down the row. */
.usage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: usage;
  text-align: left;
}
.usage__step {
  counter-increment: usage;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 0 16px;
  padding-top: 26px;
  border-top: 2px solid var(--border);
}
.usage__step::before {
  content: counter(usage);
  margin-bottom: 0;
  font-family: var(--display);
  font-size: 4.5rem;
  font-weight: 1000;
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: #ff8200;
}
.usage__text {
  margin: 0;
  color: var(--text);
  font-size: 1.500rem;
  line-height: 1.5;
  letter-spacing: -0.014em;
  text-wrap: balance;
}

/* "What does our SEO audit analyze?": the list answers *what* gets checked and
   the mock report beside it shows *what the answer looks like*, so the section
   demonstrates the product rather than describing it twice. The 45/55 split is
   deliberate - the list is the argument, the dashboard is the proof, and the
   proof is what makes this read as software rather than as a feature grid.

   Built entirely from tokens already defined in section 1: --pass and --warning
   carry the severity states, --radius-* the card edges, --shadow-md the lift on
   the floating card. No new palette, no image, no chart library. */
.analyze {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: 56px;
  align-items: start;
}

/* .info-section h2 centres it under 30ch, which is right for a heading standing
   alone and wrong for one that leads a column, so the alignment comes back here. */
.analyze .analyze__intro h2 {
  max-width: 17ch;
  margin: 0 0 16px;
  text-align: left;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.analyze__lede {
  max-width: 46ch;
  margin: 0;
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.65;
}
.analyze__list {
  display: grid;
  gap: 6px;
  margin: 38px 0 0;
  padding: 0;
  list-style: none;
}
.analyze__item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding: 15px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background var(--transition), border-color var(--transition);
}
/* A tint rather than a lift: five items stacked in one column would otherwise
   end at five different heights as each one translates independently. */
.analyze__item:hover {
  background: var(--surface);
  border-color: var(--border-strong);
}
.analyze__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-soft-border);
  border-radius: 11px;
  color: var(--accent);
}
.analyze__title {
  margin: 0 0 5px;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.012em;
}
.analyze__text {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.62;
}

/* The dashboard. The pastel wash is the one place the page lets colour act as
   background rather than accent, and it is what stops the right column reading
   as a plain white box next to the list. Its two tint custom properties are
   declared here rather than in section 1 so they stay local to this component,
   the same way .expect scopes its own. */
.dash {
  --wash-blue: rgba(122, 166, 255, 0.30);
  --wash-violet: rgba(125, 85, 255, 0.22);
  position: relative;
  padding: 30px;
  background:
    radial-gradient(115% 82% at 4% 0%, var(--wash-blue) 0%, transparent 60%),
    radial-gradient(105% 82% at 99% 12%, var(--wash-violet) 0%, transparent 58%),
    linear-gradient(168deg, var(--brand-soft) 0%, var(--surface-2) 100%);
  border: 1px solid var(--brand-soft-border);
  border-radius: var(--radius-xl);
}
:root[data-theme="dark"] .dash {
  --wash-blue: rgba(82, 126, 222, 0.26);
  --wash-violet: rgba(157, 133, 255, 0.22);
}
.dash__card {
  position: relative;
  z-index: 1;
  padding: 26px 28px 34px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.dash__eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.dash__score {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.dash__ring { display: block; flex: 0 0 auto; }
.dash__ring-track,
.dash__ring-bar {
  fill: none;
  stroke-width: 9;
}
.dash__ring-track { stroke: var(--surface-3); }
.dash__ring-bar {
  stroke: var(--pass);
  stroke-linecap: round;
  /* pathLength="100" normalises the circumference, so the offset is literally
     the shortfall: 100 - 82 = 18. */
  stroke-dasharray: 100;
  stroke-dashoffset: 18;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
}
.dash__label {
  margin: 0 0 5px;
  font-size: 0.84rem;
  font-weight: 550;
  color: var(--text-muted);
}
.dash__value {
  margin: 0;
  font-family: var(--display);
  font-size: 2.15rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.dash__unit {
  margin-left: 4px;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 550;
  letter-spacing: 0;
  color: var(--text-dim);
}
.dash__rows,
.dash__mini-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dash__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.dash__row:last-child { padding-bottom: 0; border-bottom: 0; }
.dash__name {
  font-size: 0.89rem;
  font-weight: 550;
  color: var(--text);
}

/* Status dot. Shape carries the state as well as colour - a tick and a bar are
   still distinguishable in greyscale or to a colour-blind reader. */
.dash__state {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  border: 1px solid transparent;
  border-radius: var(--pill);
}
.dash__state--pass {
  background: var(--pass-bg);
  border-color: var(--pass-border);
  color: var(--pass);
}
.dash__state--warn {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning);
}

/* The secondary card stays in normal flow and is pulled up with a negative
   margin rather than positioned absolutely. That way the 26px of overlap is
   guaranteed by the layout and cannot drift as the card's height changes, and
   it lands on the card's own bottom padding - so it layers over the report
   without covering a single row. */
.dash__mini {
  position: relative;
  z-index: 2;
  width: min(302px, calc(100% - 20px));
  margin: -26px 0 0 20px;
  padding: 16px 18px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition), box-shadow var(--transition);
}
.dash:hover .dash__mini {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.dash__mini-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.dash__mini-title {
  margin: 0;
  font-size: 0.89rem;
  font-weight: 650;
  letter-spacing: -0.012em;
}
.dash__mini-value {
  margin: 0;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--pass);
}
.dash__meter {
  height: 6px;
  margin: 10px 0 3px;
  border-radius: var(--pill);
  background: var(--surface-3);
  overflow: hidden;
}
.dash__meter-fill {
  display: block;
  width: 82%;
  height: 100%;
  border-radius: var(--pill);
  background: linear-gradient(90deg, var(--pass) 70%, #51f872 100%);
}
.dash__mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
}
.dash__mini-name {
  font-size: 0.79rem;
  color: var(--text-muted);
}
.dash__mini-row .dash__state { width: 18px; height: 18px; }

/* Scroll-driven reveal, gated on @supports so browsers without it show a
   finished dashboard. There is no hidden start state to become stranded on and
   nothing here needs JavaScript. */
@supports (animation-timeline: view()) {
  .dash__card {
    animation: dash-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 62%;
  }
  /* Opacity only: this element also carries the hover lift, and an animation
     that touched transform would win over it for as long as the fill lasted. */
  .dash__mini {
    animation: dash-appear linear both;
    animation-timeline: view();
    animation-range: entry 12% entry 74%;
  }
  .dash__ring-bar {
    animation: dash-ring linear both;
    animation-timeline: view();
    animation-range: entry 14% entry 70%;
  }
  .dash__row {
    animation: dash-slide linear both;
    animation-timeline: view();
    animation-range: entry 18% entry 76%;
  }
  /* Each row starts a little later than the one above it. */
  .dash__row:nth-child(2) { animation-range: entry 22% entry 80%; }
  .dash__row:nth-child(3) { animation-range: entry 26% entry 84%; }
  .dash__row:nth-child(4) { animation-range: entry 30% entry 88%; }
  .dash__row:nth-child(5) { animation-range: entry 34% entry 92%; }
  .dash__row:nth-child(6) { animation-range: entry 38% entry 96%; }
  .dash__row:nth-child(7) { animation-range: entry 42% cover 100%; }
}
@keyframes dash-rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
@keyframes dash-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes dash-slide {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}
@keyframes dash-ring {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 18; }
}
/* The global reduced-motion rule only shortens a duration. For a scroll-driven
   animation that would leave the ring pinned at its 100% start, so cancel these
   outright - the finished state is then simply the normal cascade. */
@media (prefers-reduced-motion: reduce) {
  .dash__card,
  .dash__mini,
  .dash__ring-bar,
  .dash__row {
    animation: none !important;
  }
}

/* The FAQ. Six short answers, each one click away, which is the format the
   questions actually want: a two-column card grid would put a two-line answer
   beside a six-line one and leave both ragged.

   Built on <details> rather than the button-over-a-hidden-panel pattern the
   issue cards use, because here the browser can own the toggle outright: the
   section opens, closes, announces itself and is findable with no JavaScript at
   all. app.js only intercepts the summary click to animate the height, so a
   script that fails to load leaves a working accordion rather than a column of
   questions that go nowhere. */
.faq {
  max-width: 860px;
  margin: 44px auto 0;
}
.faq__lede {
  max-width: 52ch;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.6;
  text-align: center;
}

/* Hover lifts and open keeps the lift, so the row the reader is inside stays
   the one that stands off the page. The 3px left edge is reserved on every row
   and only ever changes colour, so opening a question cannot shift its text. */
.faq__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-left-color: transparent;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.faq__item + .faq__item { margin-top: 10px; }
.faq__item:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}
.faq__item[open] {
  border-color: var(--brand-soft-border);
  border-left-color: #ff8200;
  box-shadow: var(--shadow);
}

.faq__q {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 21px 24px;
  cursor: pointer;
  color: var(--text);
  font-size: 1.04rem;
  font-weight: 650;
  letter-spacing: -0.014em;
}
/* The disclosure triangle the browser draws, dropped: the chevron below is the
   affordance, and two markers on one control read as a rendering fault. */
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
/* min-width so a long question can wrap inside the grid column instead of
   pushing the chevron out of the card. */
.faq__q-text { min-width: 0; }
.faq__q:focus-visible {
  outline-offset: -3px;
  border-radius: calc(var(--radius-lg) - 1px);
}
.faq__chevron {
  color: var(--text-dim);
  transition: transform var(--transition), color var(--transition);
}
.faq__item[open] .faq__chevron {
  transform: rotate(180deg);
  color: var(--brand);
}

/* The animated viewport. Clipping here is the whole trick: app.js runs .faq__a
   from height 0 to its measured height, so the answer is revealed rather than
   dropped in, and no max-height has to be guessed. */
.faq__a { overflow: hidden; }
.faq__a-text {
  max-width: 68ch;
  margin: 0;
  padding: 20px 24px 24px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.68;
}
/* The one answer that carries a number the reader might act on, so it should not
   fade into the paragraph around it. */
.faq__a-text strong { color: var(--text); font-weight: 650; }

/* Scroll-driven cascade, gated on @supports exactly as .dash is: browsers without
   view() timelines show a finished FAQ, and there is no hidden start state here
   to strand anyone in. */
@supports (animation-timeline: view()) {
  .faq__item {
    animation: faq-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 68%;
  }
  /* Each row starts a little later than the one above it, so the section arrives
     as a wave instead of all at once. */
  .faq__item:nth-child(2) { animation-range: entry 5% entry 73%; }
  .faq__item:nth-child(3) { animation-range: entry 10% entry 78%; }
  .faq__item:nth-child(4) { animation-range: entry 15% entry 83%; }
  .faq__item:nth-child(5) { animation-range: entry 20% entry 88%; }
  .faq__item:nth-child(6) { animation-range: entry 25% entry 93%; }
}
@keyframes faq-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
/* The global reduced-motion rule only shortens a duration, which would leave a
   scroll-driven animation pinned at its 0% start. Cancel it outright, as the
   dashboard does, so the finished state is just the normal cascade. */
@media (prefers-reduced-motion: reduce) {
  .faq__item { animation: none !important; }
}

/* === 12b. Static pages =================================================== */
/* Shared layout for /about/, /privacy/, /terms/ and /contact/. These reuse the
   same tokens and header/footer as the app, so there is no second design
   system to keep in sync - only a prose column and a legal-list variant. */

.doc-page { padding: 64px 0 32px; }

/* The page masthead reuses the hero wash as a single rounded panel, so the
   static pages open in the same visual register as the tool itself. */
.doc-header {
  max-width: 100%;
  margin-bottom: 48px;
  padding: 46px 48px;
  background: var(--wash);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.doc-header h1 {
  max-width: 28ch;
  margin-bottom: 18px;
  letter-spacing: -0.03em;
}
.doc-header .lede { margin-bottom: 0; max-width: 62ch; }

.doc-eyebrow {
  margin: 0 0 10px;
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* A measure of roughly 72 characters: long enough to avoid wasting a line at
   desktop widths, short enough to stay readable on a phone. */
.doc-body { max-width: 72ch; }
.doc-body h2 {
  margin: 44px 0 12px;
  padding-top: 36px;
  border-top: 1px solid var(--border);
  font-size: 1.5rem;
  letter-spacing: -0.026em;
}
/* The first heading sits directly under the header panel, so it needs neither
   the top padding nor its own border. */
.doc-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc-body h3 { margin: 26px 0 8px; font-size: 1.08rem; }
.doc-body p { margin: 0 0 16px; }
.doc-body ul,
.doc-body ol { margin: 0 0 18px; padding-left: 24px; }
.doc-body li { margin-bottom: 9px; }
.doc-body li:last-child { margin-bottom: 0; }
.doc-body li::marker { color: var(--text-dim); }
.doc-body dt { font-weight: 650; margin-top: 14px; }
.doc-body dd { margin: 3px 0 0; color: var(--text-muted); }

/* A mailto link that should read as an action, not as body prose. */
.doc-body .doc-link { color: var(--brand-bright); font-weight: 550; }

/* Cross-page links, presented as a row of pills under the prose. */
.doc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}
.doc-links a {
  display: inline-block;
  padding: 12px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--pill);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), color var(--transition),
              box-shadow var(--transition);
}
.doc-links a:hover {
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: var(--shadow);
  text-decoration: none;
}

/* The footer nav lives with the rest of the footer, in section 4. */

/* === 13. Toast ========================================================== */

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  z-index: 300;
  padding: 14px 26px;
  background: var(--text);
  border: 1px solid var(--text);
  border-radius: var(--pill);
  box-shadow: var(--shadow-lg);
  color: var(--bg);
  font-size: 0.88rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity var(--transition), transform var(--transition);
  pointer-events: none;
  max-width: min(92vw, 480px);
  text-align: center;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast.is-error { background: var(--critical); border-color: var(--critical); color: var(--on-accent); }

/* === 14. Responsive ===================================================== */

@media (max-width: 1160px) {
  /* The controls only fit on one line at about 1150px and up (measured, not
     guessed: search 220 + filters 494 + actions 328 + gaps). Below that the
     bar wraps, and pinning a two-row bar under the header would eat a third of
     a laptop viewport, so it scrolls with the results instead. */
  .toolbar { position: static; }
}

@media (max-width: 1024px) {
  .summary-card { grid-template-columns: 1fr; }
  .summary-counts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-width: 0;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  /* The three-up grid needs real width. Measured with the numeral beside the
     copy, a 3-up column holds only ~236px of text at this width, which wraps
     the 1.5rem instructions to three lines and falls to 4-5 lines by 780px.
     So the steps stack at 1024px rather than 760px, each becoming a full-width
     row with the numeral in its own left column. */
  .usage { grid-template-columns: 1fr; gap: 26px; margin-top: 34px; }
  .usage__step {
    grid-template-columns: 58px minmax(0, 1fr);
    padding-top: 0;
    border-top: 0;
  }
  .usage__step::before { font-size: 2.75rem; }
  .usage__text { font-size: 1rem; }
}

@media (max-width: 900px) {
  .doc-header { padding: 38px 34px; }
  .doc-page { padding-top: 44px; }
  .hero-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    max-width: 680px;
    margin-inline: auto;
  }
  .hero h1 { max-width: 18ch; }
  .audit-preview { width: 100%; }
  /* One column. The markup already runs heading, list, dashboard, which is the
     order the narrow layout wants, so stacking is a pure reflow. The dashboard
     is capped and centred: at full width its rows would stretch to a length no
     audit report would ever have. */
  .analyze { grid-template-columns: 1fr; gap: 42px; }
  .analyze .analyze__intro h2 { max-width: 22ch; }
  .dash { max-width: 620px; margin-inline: auto; }
}

@media (max-width: 760px) {
  .shell { padding-inline: 20px; }
  .hero { padding: 42px 0 40px; }
  .hero h1 { font-size: clamp(2.2rem, 8vw, 3rem); letter-spacing: -0.03em; }
  .hero .lede { font-size: 1rem; }
  .before-after { padding: 58px 0; }
  .before-after__header { margin-bottom: 26px; }
  .before-after__comparison {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
  }
  .before-after__connector { height: 54px; }
  .before-after__connector::before {
    top: 0;
    right: auto;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, var(--border-strong), var(--pass));
    animation: none;
  }
  .before-after__connector > span { transform: rotate(90deg); }
  .before-after__action { margin-top: 24px; }
  .audit-form { padding: 0; border-radius: 0; }
  .audit-preview { padding: 22px; }
  .field-row { gap: 12px; }
  .input-prefix { padding-inline: 20px 0; }
  .input-group .btn { padding: 0 24px; }
  .info-section { padding: 64px 0; }
  .summary-main { flex-direction: column; align-items: flex-start; gap: 18px; }
  .score-ring { width: 136px; height: 136px; margin-inline: auto; }
  .score-number { font-size: 2.6rem; }
  .summary-text { text-align: center; }
  .summary-url { text-align: center; }
  .summary-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The bar is no longer sticky here, so let the search field give up width to
     keep the filters on the same line instead of pushing them to a third row. */
  .toolbar-search { flex: 0 1 180px; }
  .toolbar-actions { margin-left: 0; width: 100%; }
  .toolbar-actions .btn { flex: 1; }
  .ba-grid { grid-template-columns: 1fr; }
  .site-header nav { display: none; }
  .nav-cta { display: none; }
  .issue-summary { grid-template-columns: auto minmax(0, 1fr); }
  .issue-chevron { display: none; }
  .doc-header { padding: 32px 26px; border-radius: var(--radius-lg); }
  .doc-body h2 { margin-top: 34px; padding-top: 28px; }
}

@media (max-width: 560px) {
  .category-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 34px; }
  .hero-layout { gap: 26px; }
  .hero-assurances { gap: 7px 14px; font-size: 0.78rem; }
  .before-after { padding: 48px 0; }
  .before-after__header h2 { font-size: 1.85rem; }
  .before-after__header > p:last-child { font-size: 0.92rem; }
  .before-after__card { padding: 21px; border-radius: 16px; }
  .before-after__card li { font-size: 0.83rem; }
  .before-after__proof { gap: 6px; }
  .before-after__proof span { font-size: 0.61rem; }
  .before-after__cta { width: min(100%, 340px); }
  .before-after__action p { font-size: 0.69rem; }
  .audit-preview { padding: 18px; border-radius: var(--radius-lg); }
  .preview-overview { gap: 14px; }
  .preview-score-row { flex-direction: column; align-items: center; gap: 16px; }
  .preview-score { width: 118px; height: 118px; flex-basis: 118px; }
  .preview-score strong { font-size: 2.6rem; }
  .preview-score__total { font-size: 0.62rem; }
  .preview-summary-text { text-align: center; }
  .preview-verdict { justify-content: center; }
  .preview-site { text-align: center; overflow-wrap: anywhere; }
  .preview-counts { gap: 8px; }
  .preview-count__label { font-size: 0.75rem; }
  .preview-categories { column-gap: 10px; }
  .preview-categories li { font-size: 0.82rem; }
  .preview-categories li strong { font-size: 0.95rem; }
  .preview-findings li { font-size: 0.72rem; }
  .trust { margin-top: 17px; }
  .summary-card { padding: 22px; border-radius: var(--radius-lg); }
  .count-tile { align-items: center; }
  /* The dashboard drops its overlap and goes full width: at this size a
     negative margin would only hide a row behind the floating card. */
  .dash { padding: 18px; border-radius: var(--radius-lg); }
  .dash__card { padding: 20px 20px 22px; }
  .dash__score { gap: 15px; }
  .dash__ring { width: 82px; height: 82px; }
  .dash__value { font-size: 1.85rem; }
  .dash__mini { width: 100%; margin: 14px 0 0; }
  /* The stacked rows only have room for a smaller numeral once the heading has
     taken the full width above it. */
  .usage__step { grid-template-columns: 40px minmax(0, 1fr); gap: 0 12px; }
  .usage__step::before { font-size: 2.25rem; }
  .usage__text { font-size: 0.95rem; }
  /* The answer runs to the card edge at this width unless its padding comes in
     with the question's, so both step down together. */
  .faq__q { padding: 17px 19px; gap: 14px; font-size: 0.98rem; }
  .faq__a-text { padding: 17px 19px 20px; }
  .pill { font-size: 0.78rem; padding: 7px 11px; }
  .examples { gap: 7px; }
  /* The scheme hint is a convenience, not part of the value: shrink it before
     the URL it prefixes runs out of room. */
  .input-prefix { padding-inline: 16px 0; font-size: 0.85rem; }
  /* Below this the bar can no longer hold a URL and a label side by side, so
     the CTA drops to its own full-width row and the bar becomes a rounded
     card rather than a pill - a 120px-tall pill reads as a mistake. */
  .input-group { flex-wrap: wrap; padding: 8px; border-radius: var(--radius-lg); }
  .input-group .btn { width: 100%; margin: 0; padding: 15px; }
  /* Header space is tight here: the selector drops its label and keeps the
     globe + chevron as the smallest still-tappable control. */
  .lang-selector { padding: 8px 10px; }
  .lang-selector .label { display: none; }
  .lang-dropdown { min-width: 176px; }
}

/* === 15. Print ========================================================== */

@media print {
  /* Force the light palette regardless of the on-screen theme, so a dark-mode
     user does not print a page of near-black panels on white paper. */
  :root, :root[data-theme="dark"] {
    color-scheme: light;
    --bg: #fff; --bg-alt: #fff;
    --surface: #fff; --surface-2: #f7f7f7; --surface-3: #eee;
    --border: #d8d8d8; --border-strong: #bbb;
    --text: #111; --text-muted: #333; --text-dim: #555;
    --brand: #333; --brand-bright: #333; --brand-text: #fff;
    --brand-soft: #f4f4f4; --brand-soft-border: #ddd;
    --brand-shadow: none;
    --wash: #fff; --wash-alt: #fff;
    --code-bg: #f7f7f7; --code-border: #ddd;
    --code-text: #222; --code-strong: #111;
  }
  body { background: #fff; color: #111; }
  .site-header, .site-footer, .hero, .toolbar, .toast, .theme-toggle,
  .skip-link, .analysis-overlay, .error-section,
  #how-it-works, #categories, #faq, .issue-chevron { display: none !important; }

  .shell { max-width: none; padding: 0; }
  .results-section { padding-top: 0; }
  /* Flatten the reassurance band: a filled background and its extra whitespace
     are screen furniture and only waste toner on paper. */
  .expect {
    background: #fff;
    --expect-rule: #d8d8d8; --expect-ink: #111;
    padding-bottom: 24px;
  }
  .expect__inner { padding: 24px 0 0; }
  /* The card keeps its border so the call to action still reads as a unit, but
     the drop shadow is screen-only. */
  .expect__cta { box-shadow: none; }
  .issue-card { break-inside: avoid; border: 1px solid #ccc; background: #fff; box-shadow: none; }
  .issue-body { display: block !important; }
  .snippet, .evidence-block { background: #f7f7f7; border-color: #ddd; }
  .snippet pre, .evidence-block { color: #111; }
  .why-box { background: #fafafa; border-color: #ddd; }
  .summary-card, .cat-card { background: #fff; border-color: #ccc; box-shadow: none; }
  /* Glows and the gradient fill are screen-only: the halo burns toner, and a
     gradient left in place would print mid-ramp rather than as flat ink. */
  a[href]::after { content: ""; }
}

/* === V3: account + dashboard ============================================= */
.account-card { max-width: 480px; }
.account-form { display: grid; gap: 10px; margin-bottom: 18px; }
.account-form input {
  width: 100%;
  padding: 13px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--pill);
  color: var(--text);
  font-size: 0.95rem;
}
.account-switch { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }

.dashboard-page {
  min-height: calc(100vh - var(--header-h));
  padding: 48px 0 80px;
  background:
    radial-gradient(900px 360px at 85% 0%, var(--brand-soft) 0%, transparent 70%),
    var(--bg);
}
.dashboard-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 30px;
}
.dashboard-intro h1 {
  margin: 7px 0 8px;
  font-size: clamp(2rem, 4vw, 2.9rem);
  letter-spacing: -0.045em;
}
.dashboard-intro .doc-eyebrow,
.dashboard-panel__eyebrow {
  margin: 0;
  color: var(--brand);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.12em;
}
.dashboard-subtitle {
  max-width: 60ch;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.6;
}
.dashboard-account {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 16px;
  min-width: 240px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.dashboard-account__label {
  grid-column: 1;
  color: var(--text-dim);
  font-size: 0.7rem;
  font-weight: 650;
}
.dashboard-account strong {
  grid-column: 1;
  color: var(--text);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}
.dashboard-account .btn { grid-column: 2; grid-row: 1 / span 2; }
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.dashboard-stat {
  display: grid;
  gap: 7px;
  min-height: 138px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.dashboard-stat__label {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 650;
}
.dashboard-stat > strong {
  color: var(--text);
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.dashboard-stat__hint { color: var(--text-dim); font-size: 0.76rem; }

/* ---------------------------------------------------------------------------
   Animated score card (dashboard "Latest SEO score").
   Tier colour flows through --tier-color, set by the .tier-* class that
   updateScoreDisplay() applies, so the background and glow transition smoothly.
   --------------------------------------------------------------------------- */
.score-card {
  --tier-color: var(--text-dim);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-areas:
    "label label"
    "icon title"
    "icon value"
    "hint hint";
  align-content: start;
  row-gap: 2px;
  column-gap: 14px;
  background-color: color-mix(in srgb, var(--tier-color) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--tier-color) 34%, var(--border));
  box-shadow:
    0 18px 42px -26px color-mix(in srgb, var(--tier-color) 80%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transition: background-color 340ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 340ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 340ms cubic-bezier(0.4, 0, 0.2, 1);
}

.score-card.tier-critical   { --tier-color: #ef4444; }
.score-card.tier-needs-work { --tier-color: #f97316; }
.score-card.tier-progress   { --tier-color: #eab308; }
.score-card.tier-strong     { --tier-color: #22c55e; }
.score-card.tier-winner     { --tier-color: #10b981; }

.score-card .dashboard-stat__label { grid-area: label; }
.score-card .dashboard-stat__hint  { grid-area: hint; }

.score-card__icon {
  grid-area: icon;
  align-self: center;
  width: 200px;
  height: 200px;
  filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--tier-color) 45%, transparent));
  transition: opacity 340ms ease, filter 340ms ease;
}

.score-card__title {
  grid-area: title;
  align-self: end;
  margin: 0;
  color: var(--tier-color);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.score-card__value {
  grid-area: value;
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0;
}

.score-card__value strong {
  color: var(--tier-color);
  font-family: var(--display);
  font-size: clamp(2.6rem, 5vw, 3.2rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.score-card__max {
  color: var(--text-dim);
  font-size: 1.05rem;
  font-weight: 800;
}

.score-card.tier-empty .score-card__icon { opacity: 0.45; filter: none; }
.score-card.tier-empty .score-card__title,
.score-card.tier-empty .score-card__value strong { color: var(--text-muted); }

@keyframes score-tier-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.score-card.tier-winner {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--tier-color) 42%, transparent),
    0 22px 52px -22px color-mix(in srgb, var(--tier-color) 90%, transparent),
    0 0 36px color-mix(in srgb, var(--tier-color) 30%, transparent);
}

.score-card.tier-winner .score-card__icon {
  animation: score-tier-float 2.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .score-card { transition: none; }
  .score-card__icon { transition: none; }
  .score-card.tier-winner .score-card__icon { animation: none; }
}

/* The landing page's preview overview shares the .score-card tier system with
   the dashboard card (same --tier-color drives the trophy tint and float), but
   the container keeps the clean report look of the results Overview: no tinted
   backdrop, glow or border - the tier lives on the ring accent, the aura and
   the trophy next to the verdict. */
.preview-score-row.score-card {
  flex: 1 1 auto;
  gap: 24px;
  background: none;
  border: 0;
  box-shadow: none;
}

.preview-verdict .preview-score__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  object-fit: contain;
}

@media (max-width: 560px) {
  .preview-score-row.score-card { gap: 16px; }
  .preview-verdict .preview-score__icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
}

.dashboard-error { margin: 0 0 16px; }
.dashboard-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  align-items: start;
  gap: 18px;
}
.dashboard-panel {
  min-width: 0;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}
.dashboard-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.dashboard-panel__head h2,
.dashboard-report__head h2 {
  margin: 4px 0 0;
  font-size: 1.27rem;
  letter-spacing: -0.025em;
}
.dashboard-panel__count {
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--pill);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 650;
  white-space: nowrap;
}
.dash-add { display: flex; gap: 9px; margin: 0 0 16px; }
.dash-add input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 12px 15px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.87rem;
}
.dash-add input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.dashboard-page ul.site-list,
.dashboard-page ul.history-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.site-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.site-card__main { display: grid; min-width: 0; gap: 9px; }
.site-card__identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.site-card__icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 1.1rem;
  font-weight: 750;
}
.site-card__name { display: grid; min-width: 0; gap: 2px; }
.site-card__name strong { color: var(--text); font-size: 0.9rem; overflow-wrap: anywhere; }
.site-card__url { color: var(--text-dim); font-family: var(--mono); font-size: 0.7rem; overflow-wrap: anywhere; }
.site-score {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--text-dim);
}
.site-score strong { font-family: var(--display); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.site-score span { font-size: 0.68rem; }
.site-score[data-tone="good"] strong { color: var(--pass); }
.site-score[data-tone="fair"] strong { color: var(--warning); }
.site-score[data-tone="poor"] strong { color: var(--critical); }
.site-card__last { margin: 0; color: var(--text-dim); font-size: 0.73rem; line-height: 1.45; }
.site-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.site-delete { color: var(--text-dim); }
.site-delete:hover { color: var(--critical); border-color: var(--critical-border); }
.dashboard-empty {
  margin: 0;
  padding: 22px 16px;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}
.dashboard-history__label { margin: -5px 0 16px; color: var(--text-dim); font-size: 0.79rem; overflow-wrap: anywhere; }
.history-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.history-score {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  background: var(--pass-bg);
  color: var(--pass);
  font-size: 0.92rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.history-score[data-tone="fair"] { background: var(--warning-bg); color: var(--warning); }
.history-score[data-tone="poor"] { background: var(--critical-bg); color: var(--critical); }
.history-card__info { display: grid; gap: 4px; min-width: 0; }
.history-card__info strong { color: var(--text); font-size: 0.78rem; }
.history-card__info span { color: var(--text-dim); font-size: 0.69rem; line-height: 1.4; }
.dashboard-report {
  margin-top: 20px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  scroll-margin-top: 24px;
}
.dashboard-report__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.dashboard-report__meta { margin: 7px 0 0; color: var(--text-dim); font-family: var(--mono); font-size: 0.74rem; overflow-wrap: anywhere; }
.dashboard-report__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dashboard-report__content { display: grid; gap: 22px; margin-top: 22px; }
.report-overview {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.report-score { display: flex; align-items: baseline; gap: 4px; color: var(--pass); }
.report-score[data-tone="fair"] { color: var(--warning); }
.report-score[data-tone="poor"] { color: var(--critical); }
.report-score strong { font-family: var(--display); font-size: 2.3rem; line-height: 1; letter-spacing: -0.05em; }
.report-score span { color: var(--text-dim); font-size: 0.8rem; }
.report-counts { display: grid; grid-template-columns: repeat(4, minmax(72px, 1fr)); flex: 1; gap: 12px; }
.report-count { display: grid; gap: 4px; }
.report-count strong { color: var(--text); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.report-count span { color: var(--text-dim); font-size: 0.68rem; }
.report-count[data-severity="critical"] strong { color: var(--critical); }
.report-count[data-severity="warning"] strong { color: var(--warning); }
.report-count[data-severity="info"] strong { color: var(--info); }
.report-count[data-severity="pass"] strong { color: var(--pass); }
.report-section h3 { margin: 0 0 11px; font-size: 1rem; }
.report-category-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.report-category {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.report-category > span { color: var(--text); font-size: 0.8rem; }
.report-category > strong { color: var(--text); font-size: 0.79rem; font-variant-numeric: tabular-nums; }
.report-category small { grid-column: 1 / -1; color: var(--text-dim); font-size: 0.68rem; }
.report-issue-list { display: grid; gap: 9px; }
.report-issue { padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--radius); break-inside: avoid; }
.report-issue[data-severity="critical"] { border-left-color: var(--critical); }
.report-issue[data-severity="warning"] { border-left-color: var(--warning); }
.report-issue[data-severity="info"] { border-left-color: var(--info); }
.report-issue__heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.report-issue__heading h4 { margin: 0; color: var(--text); font-size: 0.86rem; }
.report-severity { color: var(--text-dim); font-size: 0.62rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
.report-severity[data-severity="critical"] { color: var(--critical); }
.report-severity[data-severity="warning"] { color: var(--warning); }
.report-severity[data-severity="info"] { color: var(--info); }
.report-issue__category { margin-left: auto; color: var(--text-dim); font-size: 0.69rem; }
.report-issue__problem,
.report-issue__why,
.report-issue__fix { margin: 8px 0 0; color: var(--text-muted); font-size: 0.78rem; line-height: 1.55; }
.report-issue__why { color: var(--text-dim); }
.report-issue__fix { padding: 9px 11px; background: var(--pass-bg); border-radius: var(--radius-sm); }
.report-issue__fix strong { color: var(--pass); }
.report-issue ol { margin: 8px 0 0; padding-left: 20px; color: var(--text-muted); font-size: 0.75rem; line-height: 1.55; }
.report-no-issues,
.report-score-fallback { margin: 0; color: var(--text-muted); }
.btn-sm { padding: 8px 16px; font-size: 0.85rem; }

@media (max-width: 900px) {
  .dashboard-columns { grid-template-columns: 1fr; }
  .dashboard-intro { align-items: flex-start; }
}
@media (max-width: 620px) {
  .dashboard-page { padding: 30px 0 52px; }
  .dashboard-intro { flex-direction: column; gap: 18px; margin-bottom: 20px; }
  .dashboard-account { width: 100%; }
  .dashboard-stats { gap: 8px; }
  .dashboard-stat { min-height: 118px; padding: 14px; }
  .dashboard-stat > strong { font-size: 1.55rem; }
  .dashboard-stat__label { font-size: 0.68rem; }
  .dashboard-stat__hint { font-size: 0.65rem; }
  .score-card { grid-template-columns: 60px minmax(0, 1fr); column-gap: 11px; }
  .score-card__icon { width: 60px; height: 60px; }
  .score-card__title { font-size: 1.05rem; }
  .score-card__value strong { font-size: 2.2rem; }
  .score-card__max { font-size: 0.9rem; }
  .dashboard-panel { padding: 16px; border-radius: var(--radius-lg); }
  .blog-field-row { grid-template-columns: 1fr; }
  .blog-row-actions { justify-content: flex-start; }
  .dash-add { flex-direction: column; }
  .dash-add .btn { width: 100%; }
  .site-card { align-items: flex-start; flex-direction: column; }
  .site-actions { width: 100%; justify-content: flex-start; }
  .history-card { grid-template-columns: 38px minmax(0, 1fr); }
  .history-card .btn { grid-column: 1 / -1; width: 100%; }
  .dashboard-report { padding: 17px; }
  .dashboard-report__head { flex-direction: column; }
  .dashboard-report__actions { width: 100%; }
  .dashboard-report__actions .btn { flex: 1; }
  .report-overview { align-items: flex-start; flex-direction: column; gap: 16px; }
  .report-counts { width: 100%; }
  .report-category-list { grid-template-columns: 1fr; }
}

@media print {
  body[data-dashboard-printing] > * { display: none !important; }
  body[data-dashboard-printing] #main-content { display: block !important; }
  body[data-dashboard-printing] .dashboard-page { display: block !important; padding: 0; background: #fff; }
  body[data-dashboard-printing] .dashboard-page > .shell > :not(#report-panel) { display: none !important; }
  body[data-dashboard-printing] #report-panel { display: block !important; margin: 0; padding: 0; border: 0; box-shadow: none; }
  body[data-dashboard-printing] .dashboard-report__actions { display: none !important; }
  body[data-dashboard-printing] .report-issue,
  body[data-dashboard-printing] .report-category { background: #fff; border-color: #ccc; box-shadow: none; }
  body[data-dashboard-printing] .report-issue[data-severity="critical"],
  body[data-dashboard-printing] .report-issue[data-severity="warning"],
  body[data-dashboard-printing] .report-issue[data-severity="info"] { border-left-width: 3px; }
  body[data-dashboard-printing] .report-overview { background: #fff; }
}

/* === Blog dashboard (public/dashboard/blog-dashboard.html) ============= */

/* Namespaced `blog-*`, so nothing here can reach the blog landing page's own
   classes in blog.css. Colour and shape come from the same tokens as the rest
   of the dashboard, so it inherits the brand palette and dark mode. */

.blog-form { display: grid; gap: 16px; }
.blog-field { display: grid; gap: 7px; }
.blog-field > label {
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.blog-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.blog-input,
.blog-textarea {
  width: 100%;
  min-width: 0;
  padding: 11px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-size: 0.87rem;
}
.blog-textarea { resize: vertical; line-height: 1.55; }
.blog-textarea--code {
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.blog-input:focus,
.blog-textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.blog-hint {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.72rem;
  line-height: 1.5;
}
.blog-hint[data-over="true"] { color: var(--warning); }
.blog-image-preview {
  width: 100%;
  max-width: 320px;
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  object-fit: cover;
}
.blog-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.blog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.blog-table th,
.blog-table td {
  padding: 11px 13px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.blog-table thead th {
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.blog-table tbody tr:last-child td { border-bottom: 0; }
.blog-table tbody tr:hover { background: var(--surface-2); }
.blog-table__title { display: block; color: var(--text); font-weight: 650; }
.blog-table__slug {
  display: block;
  margin-top: 3px;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.68rem;
  overflow-wrap: anywhere;
}
.blog-table__date { color: var(--text-muted); white-space: nowrap; }
.blog-row-actions { display: flex; gap: 7px; justify-content: flex-end; }

/* Toolbar above the article table: the action buttons on the right, the
   explainer hint left. */
.blog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 16px;
}
.blog-toolbar__hint {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.76rem;
  line-height: 1.5;
}
.blog-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Draft / published badge shown in the table and the editor header. */
.blog-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}
.blog-badge[data-status="published"] {
  color: #059669;
  background: rgba(5, 150, 105, 0.12);
  border: 1px solid rgba(5, 150, 105, 0.35);
}
.blog-badge[data-status="draft"] {
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
}

/* Success / info note above the panel (publish, draft, delete feedback). */
.dashboard-note {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: rgba(5, 150, 105, 0.1);
  border: 1px solid rgba(5, 150, 105, 0.35);
  border-radius: var(--radius);
  color: #059669;
  font-size: 0.84rem;
  line-height: 1.55;
}
.dashboard-note[data-warn] {
  background: rgba(217, 119, 6, 0.1);
  border-color: rgba(217, 119, 6, 0.4);
  color: var(--warning);
}

/* Editor modal (native <dialog>). Same tokens as the dashboard panels, so it
   follows the brand palette and dark mode automatically. */
.blog-editor {
  width: min(860px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 28px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.28);
  color: var(--text);
  overscroll-behavior: contain;
}
.blog-editor::backdrop {
  background: rgba(10, 15, 20, 0.6);
}
.blog-editor:focus { outline: none; }
.blog-editor__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.blog-editor__head .dashboard-panel__eyebrow { margin: 0 0 6px; }
.blog-editor__title {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.024em;
}
.blog-editor__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
  padding-top: 4px;
}
.blog-editor .blog-form { gap: 14px; }

/* === Audit report presentation ======================================== */

.summary-card {
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
  gap: 28px;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.summary-facts {
  display: table;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.summary-facts thead th {
  padding: 0 10px 8px 0;
  color: var(--text-dim);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.065em;
  text-align: left;
  text-transform: uppercase;
}
.summary-facts tbody tr { border-top: 1px solid var(--border); }
.summary-facts tbody th,
.summary-facts tbody td {
  padding: 8px 10px 8px 0;
  text-align: left;
  vertical-align: top;
}
.summary-facts tbody th {
  width: 40%;
  color: var(--text-muted);
  font-weight: 550;
}
.summary-facts tbody td {
  color: var(--text);
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.score-ring[data-tone="good"] .ring-value { stroke: url(#ringGradGood); }
.score-ring[data-tone="good"] .score-number {
  background: var(--green-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.score-ring[data-tone="ok"] .ring-value,
.score-ring[data-tone="ok"] .score-number { stroke: var(--band-ok); color: var(--band-ok); }
.score-ring[data-tone="bad"] .ring-value,
.score-ring[data-tone="bad"] .score-number { stroke: var(--band-bad); color: var(--band-bad); }

.summary-main { gap: 28px; }
.summary-text h2 { font-size: 1.55rem; letter-spacing: -0.025em; }
.summary-counts {
  min-width: 0;
  padding: 0 0 0 24px;
  gap: 10px;
}

.category-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 0;
}
.category-grid__nodes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cat-card {
  padding: 18px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.cat-card.is-active { box-shadow: inset 0 0 0 1px var(--brand), var(--shadow-sm); }
.cat-card-head { min-height: 76px; margin-bottom: 14px; }
.cat-card-icon { width: 34px; height: 34px; }

.report-findings { scroll-margin-top: 24px; }
.report-findings .toolbar { margin: 0 0 26px; }
.issue-list-head {
  align-items: baseline;
  margin-bottom: 0;
  padding: 0 0 12px;
  border-bottom: 0;
}
.issue-list-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.08rem;
  font-weight: 700;
}
.issue-list-head p { margin: 0; font-size: 0.82rem; }

.issue-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  scrollbar-color: var(--border-strong) transparent;
}
.issue-table-head,
.issue-summary {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(170px, 1.2fr)
    minmax(115px, 0.75fr) minmax(190px, 1.45fr) minmax(145px, 0.9fr);
  align-items: center;
  gap: 16px;
  min-width: 850px;
  padding-inline: 18px;
  cursor: default;
}
.issue-table-head {
  min-height: 43px;
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.issue-list { display: block; }
.issue-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.issue-card:hover { box-shadow: none; }
.issue-card.is-open { border-color: transparent; }
.issue-summary {
  min-height: 76px;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.issue-card.is-open .issue-summary { background: var(--surface-2); }
.issue-type {
  width: fit-content;
  max-width: 100%;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.35;
}
.issue-check-toggle {
  padding: 0;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 680;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.issue-check-toggle:hover { color: var(--brand); }
.issue-check-toggle:focus-visible,
.issue-next-steps:focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 3px;
}
.issue-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.7rem;
  font-weight: 680;
  white-space: nowrap;
}
.issue-status img { display: block; width: 25px; height: 25px; object-fit: contain; }
.issue-status[data-severity="critical"] { color: var(--critical); }
.issue-status[data-severity="warning"] { color: var(--warning); }
.issue-status[data-severity="info"] { color: var(--info); }
.issue-status[data-severity="pass"] { color: var(--pass); }
.issue-details {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.issue-next-steps {
  justify-self: start;
  padding: 8px 11px;
  background: var(--brand);
  border: 1px solid var(--brand);
  border-radius: 7px;
  color: var(--brand-text);
  font: inherit;
  font-size: 0.73rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.issue-next-steps:hover {
  background: var(--brand-bright);
  border-color: var(--brand-bright);
  transform: translateY(-1px);
}
.issue-body { padding-inline: 18px; }
.no-results { margin-top: 14px; border-radius: 10px; }

@media (max-width: 900px) {
  .summary-card { grid-template-columns: 1fr; }
  .summary-counts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 14px 0 0;
    border-top: 1px solid var(--border);
    border-left: 0;
  }
  .category-grid__nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .results-section { padding: 28px 0 48px; }
  .report-header { padding-bottom: 22px; }
  .report-block { margin-top: 40px; }
  .report-overview-section { padding: 22px; }
  .summary-main { align-items: center; }
  .issue-body { padding-inline: 12px; }
}

@media (max-width: 560px) {
  .report-shell { padding-inline: 16px; }
  .report-header h1 { font-size: 1.85rem; }
  .report-subtitle { font-size: 0.82rem; }
  .report-block { margin-top: 34px; }
  .report-section-heading { margin-bottom: 14px; }
  .report-overview-section { padding: 18px 16px; }
  .summary-card { gap: 20px; }
  .summary-main { flex-direction: column; gap: 16px; }
  .summary-text { text-align: center; }
  .summary-url { text-align: center; overflow-wrap: anywhere; }
  .summary-counts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .category-grid { gap: 16px; }
  .category-grid__nodes { grid-template-columns: 1fr; gap: 10px; }
  .cat-card--overview {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
    padding: 18px;
  }
  .cat-card--overview .cat-score-scale {
    grid-column: 1;
    grid-row: 2;
  }
  .cat-card--overview .cat-card-badges {
    grid-column: 1;
    grid-row: 3;
  }
  .cat-card--category { min-height: 0; }
  .cat-card--category .cat-card-head { min-height: 56px; }
  .issue-list-head { align-items: flex-start; flex-direction: column; gap: 3px; }
  .summary-facts tbody th { width: 43%; }
  .issue-table-head,
  .issue-summary { min-width: 790px; }
}

@media print {
  .report-block { break-inside: avoid; }
  .report-header { padding-top: 0; }
  .summary-card, .cat-card { box-shadow: none; }
  .issue-card { break-inside: avoid; }
}

.summary-side {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding-inline-start: 24px;
  border-inline-start: 1px solid var(--border);
}

.page-previews { min-width: 0; }
.summary-side .summary-counts {
  padding: 0;
  border: 0;
}

.page-previews > h3 {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.page-preview-devices {
  position: relative;
  display: block;
  padding: 0 8px 8px 0;
}

.page-preview-device { min-width: 0; }

.page-preview-browser {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 27px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.64rem;
  font-weight: 700;
}

.page-preview-browser__dots {
  display: inline-flex;
  gap: 3px;
}

.page-preview-browser__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-strong);
}

.page-preview-screen {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.page-preview-screen iframe {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border: 0;
  background: #fff;
  transform-origin: top left;
}

.page-preview-screen--desktop {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: 0 0 9px 9px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.11);
}

.page-preview-screen--desktop iframe {
  width: 1280px;
  height: 720px;
  transform: scale(0.2);
}

.page-preview-device--mobile {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  width: clamp(84px, 28%, 112px);
  filter: drop-shadow(0 8px 12px rgba(15, 23, 42, 0.2));
}

.page-preview-device--mobile::before {
  position: absolute;
  z-index: 1;
  top: -9px;
  right: 7px;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  background: var(--surface);
  color: var(--text-muted);
  content: "Mobile";
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 1.2;
}

.page-preview-phone {
  position: relative;
  padding: 18px 5px 6px;
  overflow: hidden;
  border: 1px solid #303744;
  border-radius: 23px;
  background: linear-gradient(145deg, #343b48, #11151c 36%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.page-preview-phone__speaker {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 25px;
  height: 4px;
  border-radius: 4px;
  background: #687080;
  transform: translateX(-50%);
}

.page-preview-screen--mobile {
  aspect-ratio: 390 / 844;
  border-radius: 14px;
}

.page-preview-screen--mobile iframe {
  width: 390px;
  height: 844px;
  transform: scale(0.18);
}

.page-preview-note {
  margin: 8px 0 0;
  color: var(--text-dim);
  font-size: 0.68rem;
  line-height: 1.4;
}

.page-preview-note a {
  color: var(--brand);
  font-weight: 650;
  text-underline-offset: 2px;
}

.page-preview-note a:hover { color: var(--brand-bright); }

@media (max-width: 900px) {
  .summary-side {
    padding: 14px 0 0;
    border-top: 1px solid var(--border);
    border-inline-start: 0;
  }

  .page-preview-device--mobile { width: clamp(92px, 17%, 120px); }
}

@media (max-width: 560px) {
  .page-preview-devices { padding: 0 5px 6px 0; }
  .page-preview-device--mobile { width: clamp(78px, 27%, 94px); }
  .page-preview-phone { padding: 16px 4px 5px; border-radius: 19px; }
  .page-preview-screen--mobile { border-radius: 12px; }
  .page-preview-phone__speaker { top: 6px; width: 21px; }
}

@media print {
  .page-previews { display: none; }
}