/* ============================================================================
 * NiftyWebTools — design system
 * Token reference: DESIGN_TOKENS.md
 * Class names kept stable with the previous stylesheet so existing generated
 * HTML keeps working until Sprint 1 item 1.4 (tool-shell standardisation)
 * regenerates pages with new component classes.
 * ============================================================================ */

/* ------------------------------ self-hosted fonts --------------------------- */
/* Inter Variable (latin + latin-ext) — single-axis weight (100–900).
 * JetBrains Mono Variable (latin + latin-ext) — single-axis weight (100–800).
 * Source: @fontsource-variable. Files in /vendor/fonts/ (see vendor/fonts/*.LICENSE).
 * font-display: swap means body text never blocks render — uses fallback until Inter loads.
 * size-adjust + ascent/descent overrides minimise CLS during the swap. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/vendor/fonts/inter-latin-wght-normal.woff2") format("woff2");
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
  ascent-override: 90%;
  size-adjust: 107%;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/vendor/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
  ascent-override: 90%;
  size-adjust: 107%;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/vendor/fonts/inter-latin-wght-italic.woff2") format("woff2");
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
  ascent-override: 90%;
  size-adjust: 107%;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/vendor/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/vendor/fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------ tokens -------------------------------------- */

:root {
  /* — colour primitives ---------------------------------------------------- */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Cool neutral scale (Linear-ish) */
  --color-gray-0:   #ffffff;
  --color-gray-50:  #f7f8f9;
  --color-gray-100: #eef0f2;
  --color-gray-200: #dfe2e6;
  --color-gray-300: #c4c9cf;
  --color-gray-400: #8e96a0;
  --color-gray-500: #5b6470;
  --color-gray-600: #3e4651;
  --color-gray-700: #2a313a;
  --color-gray-800: #1a1f27;
  --color-gray-900: #0f1318;
  --color-gray-950: #080a0d;

  /* Brand green — kept from prior identity, refined to AAA-friendly contrast */
  --color-brand-50:  #e9f5f0;
  --color-brand-100: #c5e6dc;
  --color-brand-200: #8fcdb9;
  --color-brand-300: #4eaa8e;
  --color-brand-400: #2a8c70;
  --color-brand-500: #176b5b;
  --color-brand-600: #105547;
  --color-brand-700: #0b3f35;
  --color-brand-800: #082b25;

  /* Status families */
  --color-warn-50:  #fff5e0;
  --color-warn-200: #f0c060;
  --color-warn-600: #b06b00;
  --color-warn-700: #7a4900;
  --color-info-50:  #ebf2ff;
  --color-info-200: #b8caff;
  --color-info-600: #2563eb;
  --color-info-700: #1d4ed8;
  --color-danger-50:  #fdecea;
  --color-danger-200: #f3a9a3;
  --color-danger-600: #c53030;

  /* — semantic tokens (light) ---------------------------------------------- */
  --bg:               var(--color-gray-50);
  --bg-subtle:        var(--color-gray-100);
  --bg-elevated:      var(--color-white);
  --surface:          var(--color-white);
  --surface-raised:   var(--color-white);
  --surface-overlay:  rgb(255 255 255 / 0.96);

  --border:           var(--color-gray-200);
  --border-strong:    var(--color-gray-300);
  --border-focus:     var(--color-brand-500);

  --text:             var(--color-gray-900);
  --text-muted:       var(--color-gray-500);
  --text-subtle:      var(--color-gray-400);
  --text-inverse:     var(--color-white);

  --accent:           var(--color-brand-500);
  --accent-hover:     var(--color-brand-600);
  --accent-active:    var(--color-brand-700);
  --accent-bg:        var(--color-brand-50);
  --accent-border:    var(--color-brand-200);
  --accent-text:      var(--color-brand-700);

  --warn:             var(--color-warn-600);
  --warn-bg:          var(--color-warn-50);
  --warn-border:      var(--color-warn-200);
  --warn-text:        var(--color-warn-700);

  --info:             var(--color-info-600);
  --info-bg:          var(--color-info-50);
  --info-border:      var(--color-info-200);

  --danger:           var(--color-danger-600);
  --danger-bg:        var(--color-danger-50);

  /* Legacy aliases — keep until generator finishes 1.4 */
  --site-bg:           var(--bg);
  --site-panel:        var(--surface);
  --site-ink:          var(--text);
  --site-muted:        var(--text-muted);
  --site-line:         var(--border);
  --site-green:        var(--accent);
  --site-green-dark:   var(--accent-hover);
  --site-mint:         var(--accent-bg);
  --site-gold:         var(--color-warn-200);
  --site-blue:         var(--color-info-50);
  --site-shadow:       var(--shadow-lg);

  /* Per-tool unprefixed aliases — bridge tool stylesheets to semantic tokens
     so manual + system dark mode flow through without per-tool overrides. */
  --panel:             var(--surface);
  --muted:             var(--text-muted);
  --line:              var(--border);
  --accent-strong:     var(--accent-hover);
  --accent-soft:       var(--accent-bg);

  /* — typography ----------------------------------------------------------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: var(--font-sans);

  --text-xs:   0.75rem;     /* 12 */
  --text-sm:   0.875rem;    /* 14 */
  --text-base: 1rem;        /* 16 */
  --text-md:   1.0625rem;   /* 17 */
  --text-lg:   1.125rem;    /* 18 */
  --text-xl:   1.25rem;     /* 20 */
  --text-2xl:  1.5rem;      /* 24 */
  --text-3xl:  1.875rem;    /* 30 */
  --text-4xl:  2.25rem;     /* 36 */
  --text-5xl:  3rem;        /* 48 */
  --text-6xl:  3.75rem;     /* 60 */
  --text-7xl:  4.5rem;      /* 72 */

  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-black:     800;

  --leading-tight:    1.1;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;
  --leading-loose:    1.8;

  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.06em;
  --tracking-caps:    0.08em;

  /* — spacing (4px base) --------------------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* — radii ---------------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 999px;

  /* — strokes & component sizes -------------------------------------------- */
  --stroke:           1px;
  --stroke-feature:   4px;
  --lift:             1px;
  --control-h-sm:     2.25rem;     /* 36 — compact CTAs / mobile */
  --control-h-md:     2.5rem;      /* 40 — default CTAs */
  --icon-md:          2.25rem;     /* 36 — step number badges */
  --card-min-h:       11rem;       /* 176 — tool/category cards */
  --hero-col-l:       20rem;       /* 320 — hero left column min */
  --hero-col-r:       22.5rem;     /* 360 — hero right column min */
  --tile-min-md:      16.25rem;    /* 260 — tool grid tiles */
  --tile-min-sm:      13.75rem;    /* 220 — compact tile grid */
  --footer-col-min:   16.25rem;    /* 260 — footer first column */
  --rail-w:           17.5rem;     /* 280 — sticky upgrade rail */
  --rail-dismiss:     1.75rem;     /* 28 — rail close-button square */
  --tap-target:       2.75rem;     /* 44 — minimum tap target */
  --next-col-min:     11.25rem;    /* 180 — next-panel action column min */
  --ad-slot-min-h:    6rem;        /* 96 — ad slot reservation */
  --focus-ring:       2px;         /* focus-ring outline width */
  --focus-offset:     2px;         /* default focus-ring offset */
  --focus-offset-lg:  3px;         /* CTA focus-ring offset */
  --blur-md:          14px;        /* sticky header backdrop */
  --underline-offset: 0.2em;       /* link underline offset */
  --pattern-stripe:   10px;        /* ad-slot stripe band */
  --pattern-gap:      20px;        /* ad-slot stripe gap */

  /* — shadows -------------------------------------------------------------- */
  --shadow-xs:    0 1px 2px 0 rgb(15 19 24 / 0.05);
  --shadow-sm:    0 1px 3px 0 rgb(15 19 24 / 0.08), 0 1px 2px -1px rgb(15 19 24 / 0.04);
  --shadow-md:    0 4px 12px -2px rgb(15 19 24 / 0.08), 0 2px 4px -2px rgb(15 19 24 / 0.04);
  --shadow-lg:    0 12px 24px -8px rgb(15 19 24 / 0.10), 0 6px 12px -6px rgb(15 19 24 / 0.06);
  --shadow-xl:    0 24px 48px -12px rgb(15 19 24 / 0.14);
  --shadow-2xl:   0 32px 64px -16px rgb(15 19 24 / 0.18);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);

  /* — motion --------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-instant: 80ms;
  --duration-fast:    140ms;
  --duration-base:    220ms;
  --duration-slow:    320ms;
  --duration-slower:  500ms;

  /* — z-index -------------------------------------------------------------- */
  --z-base:     0;
  --z-elevated: 10;
  --z-dropdown: 20;
  --z-sticky:   30;
  --z-overlay:  40;
  --z-modal:    50;
  --z-toast:    60;
  --z-tooltip:  70;

  /* — layout --------------------------------------------------------------- */
  --container-max:     1200px;
  --container-px:      clamp(16px, 4vw, 32px);
  --container-prose:   720px;
  --header-height:     72px;

  color-scheme: light;
  font-family: var(--font-sans);
  font-feature-settings: "cv11", "ss01", "ss03";
}

/* — dark mode: auto by system preference, with manual override ------------ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:               var(--color-gray-950);
    --bg-subtle:        var(--color-gray-900);
    --bg-elevated:      var(--color-gray-800);
    --surface:          var(--color-gray-900);
    --surface-raised:   var(--color-gray-800);
    --surface-overlay:  rgb(15 19 24 / 0.94);

    --border:           color-mix(in srgb, var(--color-gray-700) 80%, transparent);
    --border-strong:    var(--color-gray-600);

    --text:             var(--color-gray-50);
    --text-muted:       var(--color-gray-300);
    --text-subtle:      var(--color-gray-400);

    --accent:           var(--color-brand-300);
    --accent-hover:     var(--color-brand-200);
    --accent-active:    var(--color-brand-100);
    --accent-bg:        rgb(78 170 142 / 0.12);
    --accent-border:    rgb(78 170 142 / 0.32);
    --accent-text:      var(--color-brand-200);

    --warn:             #f5c062;
    --warn-bg:          rgb(245 192 98 / 0.10);
    --warn-border:      rgb(245 192 98 / 0.30);
    --warn-text:        #f5c062;

    --info:             #93b4ff;
    --info-bg:          rgb(147 180 255 / 0.10);

    --danger:           #f87171;
    --danger-bg:        rgb(248 113 113 / 0.10);

    --shadow-xs:    0 1px 2px 0 rgb(0 0 0 / 0.30);
    --shadow-sm:    0 1px 3px 0 rgb(0 0 0 / 0.40);
    --shadow-md:    0 4px 12px -2px rgb(0 0 0 / 0.45);
    --shadow-lg:    0 12px 24px -8px rgb(0 0 0 / 0.50);
    --shadow-xl:    0 24px 48px -12px rgb(0 0 0 / 0.55);
    --shadow-2xl:   0 32px 64px -16px rgb(0 0 0 / 0.60);

    color-scheme: dark;
  }
}

[data-theme="dark"] {
  --bg:               var(--color-gray-950);
  --bg-subtle:        var(--color-gray-900);
  --bg-elevated:      var(--color-gray-800);
  --surface:          var(--color-gray-900);
  --surface-raised:   var(--color-gray-800);
  --surface-overlay:  rgb(15 19 24 / 0.94);
  --border:           color-mix(in srgb, var(--color-gray-700) 80%, transparent);
  --border-strong:    var(--color-gray-600);
  --text:             var(--color-gray-50);
  --text-muted:       var(--color-gray-300);
  --text-subtle:      var(--color-gray-400);
  --accent:           var(--color-brand-300);
  --accent-hover:     var(--color-brand-200);
  --accent-active:    var(--color-brand-100);
  --accent-bg:        rgb(78 170 142 / 0.12);
  --accent-border:    rgb(78 170 142 / 0.32);
  --accent-text:      var(--color-brand-200);
  --warn:             #f5c062;
  --warn-bg:          rgb(245 192 98 / 0.10);
  --warn-border:      rgb(245 192 98 / 0.30);
  --warn-text:        #f5c062;
  --shadow-sm:    0 1px 3px 0 rgb(0 0 0 / 0.40);
  --shadow-md:    0 4px 12px -2px rgb(0 0 0 / 0.45);
  --shadow-lg:    0 12px 24px -8px rgb(0 0 0 / 0.50);
  color-scheme: dark;
}

/* ------------------------------ reset --------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-feature-settings: "cv11", "ss01", "ss03", "tnum";
  transition: background-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

button {
  font-family: inherit;
  font-size: inherit;
}

a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: var(--underline-offset);
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--accent-hover);
}

::selection {
  background: var(--accent-bg);
  color: var(--accent-text);
}

:focus-visible {
  outline: var(--focus-ring) solid var(--accent);
  outline-offset: var(--focus-offset);
}

/* CTA buttons: tighter offset so the ring hugs the rounded corner */
.site-cta:focus-visible,
.primary-action:focus-visible,
.secondary-action:focus-visible,
.ghost-button:focus-visible,
.download-button:focus-visible,
.theme-toggle:focus-visible {
  outline-offset: var(--focus-offset-lg);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------ layout -------------------------------------- */

.site-header,
.site-footer,
.site-shell {
  width: min(var(--container-max), calc(100% - 2 * var(--container-px)));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-6);
  align-items: center;
  min-height: var(--header-height);
  padding: var(--space-3) 0;
  background: var(--surface-overlay);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border-bottom: var(--stroke) solid transparent;
  transition: border-color var(--duration-base) var(--ease-out);
}

.site-header.is-scrolled {
  border-bottom-color: var(--border);
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.brand-link:hover {
  color: var(--accent);
}

.brand-link img {
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
}

.site-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
}

.site-nav a {
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.site-nav a:hover {
  background: var(--bg-subtle);
  color: var(--text);
}

.site-nav a[aria-current="page"] {
  color: var(--text);
  background: var(--bg-subtle);
}

/* ----------------------------- breadcrumbs ---------------------------------- */
/* Visible breadcrumb mirrors the BreadcrumbList JSON-LD. Sibling of <main>     */
/* so it sits between the site header and the page hero. Playbook §6.2.        */

.breadcrumb-nav {
  width: min(var(--container-max), calc(100% - 2 * var(--container-px)));
  margin-inline: auto;
  padding: var(--space-3) 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.breadcrumb-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.breadcrumb-nav li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumb-nav li + li::before {
  content: "/";
  color: var(--border-strong);
}

.breadcrumb-nav a {
  color: inherit;
  text-decoration: none;
}

.breadcrumb-nav a:hover,
.breadcrumb-nav a:focus-visible {
  color: var(--text);
  text-decoration: underline;
}

.breadcrumb-nav [aria-current="page"] {
  color: var(--text);
  font-weight: var(--weight-semibold);
}

/* ------------------------------ buttons ------------------------------------- */

.site-cta,
.primary-action,
.secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h-md);
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  cursor: pointer;
  border: var(--stroke) solid transparent;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.site-cta,
.primary-action {
  background: var(--accent);
  color: var(--text-inverse);
  box-shadow: var(--shadow-sm);
}

.site-cta:hover,
.primary-action:hover {
  background: var(--accent-hover);
  color: var(--text-inverse);
  transform: translateY(calc(-1 * var(--lift)));
  box-shadow: var(--shadow-md);
}

.site-cta:active,
.primary-action:active {
  transform: translateY(0);
  background: var(--accent-active);
}

.secondary-action {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

.secondary-action:hover {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
  color: var(--text);
}

.ghost-button {
  align-self: start;
  background: transparent;
  border: var(--stroke) solid var(--warn-border);
  color: var(--warn-text);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.ghost-button:hover {
  background: color-mix(in srgb, var(--warn) 15%, transparent);
}

/* ------------------------------ theme toggle ------------------------------- */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: var(--stroke) solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.theme-toggle:hover {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}

.theme-toggle:active {
  transform: translateY(0);
  background: var(--bg-subtle);
}

.theme-toggle-glyph {
  display: inline-block;
  line-height: 1;
}

/* ------------------------------ hero ---------------------------------------- */

.site-hero,
.page-hero {
  padding: var(--space-16) 0 var(--space-12);
}

.site-hero {
  display: grid;
  grid-template-columns: minmax(var(--hero-col-l), 0.95fr) minmax(var(--hero-col-r), 1.05fr);
  gap: var(--space-12);
  align-items: center;
}

.site-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--accent-bg);
  color: var(--accent-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.hero-copy h1,
.page-hero h1 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  max-width: 14ch;
}

.page-hero h1 {
  max-width: 16ch;
}

.hero-copy p:not(.site-eyebrow):not(.hero-note),
.page-hero p:not(.site-eyebrow),
.site-section-heading p,
.content-card p,
.steps-grid p,
.pro-band p,
.site-footer p,
.faq-list p,
.site-tool-card span,
.category-card span {
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}

.hero-copy p:not(.site-eyebrow):not(.hero-note),
.page-hero p:not(.site-eyebrow) {
  max-width: 56ch;
  font-size: var(--text-lg);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.hero-note {
  margin-top: var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.hero-visual {
  border: var(--stroke) solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-xl);
}

.hero-visual img {
  display: block;
  width: 100%;
  height: auto;
}

/* ------------------------------ section/content ----------------------------- */

.site-section {
  padding: var(--space-12) 0;
}

.site-section-heading {
  display: grid;
  gap: var(--space-2);
  max-width: 56ch;
  margin-bottom: var(--space-6);
}

.site-section-heading h2,
.content-card h2,
.pro-band h2,
.price-card h2 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.site-section-heading p,
.content-card p,
.pro-band p {
  margin: 0;
  font-size: var(--text-base);
}

/* ------------------------------ grids --------------------------------------- */

.site-tool-grid,
.category-grid,
.compact-tool-grid,
.info-grid,
.steps-grid,
.pricing-grid,
.roadmap-columns {
  display: grid;
  gap: var(--space-4);
}

.site-tool-grid {
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-min-md), 1fr));
}

.compact-tool-grid {
  grid-template-columns: repeat(auto-fit, minmax(var(--tile-min-sm), 1fr));
}

.category-grid,
.info-grid,
.steps-grid,
.pricing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.roadmap-columns {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}

/* ------------------------------ cards --------------------------------------- */

.site-tool-card,
.category-card,
.content-card,
.steps-grid div,
.price-card {
  border: var(--stroke) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}

.site-tool-card,
.category-card {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-height: var(--card-min-h);
  padding: var(--space-5);
  color: inherit;
  text-decoration: none;
  position: relative;
}

.site-tool-card:hover,
.category-card:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-md);
  transform: translateY(calc(-1 * var(--lift)));
}

.site-tool-card.is-planned {
  border-style: dashed;
  background: var(--bg-subtle);
  opacity: 0.85;
}

.status-pill {
  justify-self: start;
  border-radius: var(--radius-full);
  background: var(--info-bg);
  color: var(--info);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.site-tool-card strong,
.category-card strong {
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.site-tool-card span,
.category-card span {
  font-size: var(--text-sm);
}

/* ------------------------------ ad slots ------------------------------------ */

.ad-slot {
  display: grid;
  min-height: var(--ad-slot-min-h);
  place-items: center;
  margin: var(--space-6) 0;
  border: var(--stroke) dashed var(--border-strong);
  border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 5%, transparent) 0 var(--pattern-stripe),
      transparent var(--pattern-stripe) var(--pattern-gap)),
    var(--surface);
  color: var(--text-muted);
  text-align: center;
}

.ad-slot span {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.ad-slot strong {
  color: var(--accent-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

/* ------------------------------ processing badge ---------------------------- */

.processing-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  border-radius: var(--radius-full);
  background: var(--accent-bg);
  font-size: var(--text-xs);
  color: var(--accent-text);
  border: var(--stroke) solid var(--accent-border);
}

.processing-badge span {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--text-inverse);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.processing-badge em {
  font-style: normal;
  font-weight: var(--weight-medium);
  color: var(--text);
}

.processing-badge-server {
  background: var(--warn-bg);
  color: var(--warn-text);
  border-color: var(--warn-border);
}

.processing-badge-server span {
  background: var(--warn);
}

.processing-badge-ai {
  background: var(--info-bg);
  color: var(--info);
  border-color: var(--info-border);
}

.processing-badge-ai span {
  background: var(--info);
}

/* ------------------------------ disclosures --------------------------------- */

.tool-disclosure {
  margin: var(--space-5) 0 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: var(--stroke) solid var(--accent-border);
  border-left: var(--stroke-feature) solid var(--accent);
  background: var(--accent-bg);
}

.tool-disclosure-warn {
  border-color: var(--warn-border);
  border-left-color: var(--warn);
  background: var(--warn-bg);
}

.tool-disclosure strong {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--text);
  font-weight: var(--weight-semibold);
}

.tool-disclosure p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* ------------------------------ changelog ----------------------------------- */

.changelog-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-6);
}

.changelog-list > li {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: var(--stroke) solid var(--border);
  box-shadow: var(--shadow-xs);
}

.changelog-list h2 {
  margin: var(--space-1) 0 var(--space-3);
  font-size: var(--text-xl);
}

.changelog-list ul {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}

/* ------------------------------ content cards ------------------------------- */

.content-card,
.steps-grid div,
.price-card {
  padding: var(--space-6);
}

.content-card ol,
.price-card ul {
  margin: var(--space-4) 0 0;
  padding-left: var(--space-5);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}

/* ------------------------------ roadmap list -------------------------------- */

.roadmap-list {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.roadmap-list li {
  display: grid;
  gap: var(--space-1);
  border-top: var(--stroke) solid var(--border);
  padding-top: var(--space-3);
}

.roadmap-list a,
.roadmap-list strong {
  color: var(--text);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.roadmap-list em {
  width: max-content;
  border-radius: var(--radius-full);
  background: var(--accent-bg);
  color: var(--accent-text);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.roadmap-list span {
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}

/* ------------------------------ steps grid ---------------------------------- */

.steps-grid span {
  display: grid;
  width: var(--icon-md);
  height: var(--icon-md);
  place-items: center;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--text-inverse);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
}

.steps-grid strong {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

/* ------------------------------ pro band ------------------------------------ */

.pro-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: var(--space-6);
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--accent);
  color: var(--text-inverse);
  box-shadow: var(--shadow-lg);
}

.pro-band .site-eyebrow,
.pro-band p,
.pro-band h2 {
  color: var(--text-inverse);
}

.pro-band .site-eyebrow {
  background: rgb(0 0 0 / 0.4);
  color: var(--text-inverse);
}

.pro-band .primary-action {
  background: var(--text-inverse);
  color: var(--accent-active);
  box-shadow: var(--shadow-sm);
}

.pro-band .primary-action:hover {
  background: var(--bg-subtle);
}

/* ------------------------------ FAQ ----------------------------------------- */

.faq-list {
  display: grid;
  gap: var(--space-2);
}

.faq-list details {
  border: var(--stroke) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-4) var(--space-5);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.faq-list details[open] {
  border-color: var(--border-strong);
}

.faq-list summary {
  color: var(--text);
  cursor: pointer;
  font-weight: var(--weight-semibold);
  list-style: none;
  position: relative;
  padding-right: var(--space-6);
}

.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-weight: var(--weight-normal);
  transition: transform var(--duration-fast) var(--ease-out);
}

.faq-list details[open] summary::after {
  content: "−";
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list p {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
}

/* ------------------------------ tool support area --------------------------- */

.tool-support {
  padding: 0 0 var(--space-12);
}

.related-section {
  padding-top: var(--space-5);
}

.page-hero img {
  margin-bottom: var(--space-5);
}

/* ------------------------------ pricing ------------------------------------- */

.price-card {
  display: grid;
  gap: var(--space-3);
}

.price-card strong {
  color: var(--text);
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tighter);
}

.price-card.featured {
  border-color: var(--accent);
  background: var(--accent-bg);
}

/* ------------------------------ result warnings (compressor) --------------- */

.result-warning {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--warn-bg);
  border: var(--stroke) solid var(--warn-border);
  display: grid;
  gap: var(--space-3);
}

.result-warning p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--warn-text);
  line-height: var(--leading-relaxed);
}

/* ------------------------------ footer -------------------------------------- */

.site-footer {
  display: grid;
  grid-template-columns: minmax(var(--footer-col-min), 1fr) auto;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-12) 0;
  margin-top: var(--space-16);
  border-top: var(--stroke) solid var(--border);
}

.site-footer p {
  max-width: 56ch;
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: var(--space-4);
}

.site-footer nav a {
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-footer nav a:hover {
  color: var(--text);
}

/* ------------------------------ responsive ---------------------------------- */

@media (max-width: 900px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .site-nav {
    grid-column: 1 / -1;
    justify-content: start;
    overflow-x: auto;
    padding-bottom: var(--space-1);
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .site-hero,
  .category-grid,
  .info-grid,
  .steps-grid,
  .pricing-grid,
  .roadmap-columns,
  .site-footer {
    grid-template-columns: 1fr;
  }

  .site-footer nav {
    justify-content: start;
  }

  .hero-copy h1,
  .page-hero h1 {
    font-size: clamp(2rem, 9vw, 3.5rem);
  }
}

@media (max-width: 620px) {
  .site-header,
  .site-footer,
  .site-shell {
    width: min(100% - 2 * var(--container-px), 680px);
  }

  .site-header {
    min-height: auto;
  }

  .brand-link span {
    font-size: var(--text-sm);
  }

  .site-cta {
    min-height: var(--control-h-sm);
    padding-inline: var(--space-3);
    font-size: var(--text-xs);
  }

  .site-nav a {
    white-space: nowrap;
    font-size: var(--text-xs);
  }

  .site-hero,
  .page-hero {
    padding-top: var(--space-8);
  }

  .hero-actions,
  .pro-band {
    display: grid;
    align-items: start;
  }

  .pro-band {
    padding: var(--space-6);
  }
}

/* ------------------------------ utilities ----------------------------------- */

.sr-only {
  position: absolute;
  width: var(--stroke);
  height: var(--stroke);
  padding: 0;
  margin: calc(-1 * var(--stroke));
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===================================================================
   CRO surfaces — task #9 (deliverables 2.1, 2.2, 2.3)
   =================================================================== */

/* Trust strip (2.3) — privacy / processing-mode / live counter pills.
   Sits between hero copy and workspace. Always visible. The literal "+" on
   the counter is part of the markup ("250+ files processed"); CSS does not
   add a second one. */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.trust-strip li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--stroke) solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.trust-strip .trust-dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: 50%;
  background: var(--accent);
}

.trust-strip strong {
  font-weight: var(--weight-black);
}

@media (max-width: 620px) {
  .trust-strip {
    gap: var(--space-2);
  }
  .trust-strip li {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
  }
}

/* JS-disabled fallback (Task #31). Lives inside <noscript>, so it only
   renders when JavaScript is turned off. The block is alert-styled so a
   user who lands on a tool page with JS disabled immediately sees why the
   workspace below isn't responding, instead of mistaking the static UI
   for broken software. Mirrors the .tool-disclosure-warn token set so all
   warning surfaces sit in the same visual language. */
.noscript-fallback {
  margin: var(--space-4) 0 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: var(--stroke) solid var(--warn-border);
  border-left: var(--stroke-feature) solid var(--warn);
  background: var(--warn-bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.noscript-fallback strong {
  display: block;
  font-size: var(--text-base);
  color: var(--text);
  font-weight: var(--weight-semibold);
}
.noscript-fallback p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}
.noscript-fallback code {
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  font-size: 0.95em;
}
.noscript-fallback a {
  color: var(--accent-text);
  text-decoration: underline;
}

/* Sticky upgrade rail (2.1) — desktop only.
   Hidden by default; the rail JS removes [hidden] when the gate is open and
   the viewport is wide enough. Position is fixed bottom-right so it never
   covers the workspace, with a desktop-only floor on the breakpoint. */
.upgrade-rail {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 40;
  width: var(--rail-w);
  padding: var(--space-5);
  border: var(--stroke) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xl);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.upgrade-rail[hidden] {
  display: none;
}

.upgrade-rail-eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.upgrade-rail h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--text);
}

.upgrade-rail p {
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
}

.upgrade-rail-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--text-inverse);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.upgrade-rail-cta:hover {
  background: var(--accent-hover);
}

.upgrade-rail-dismiss {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: var(--rail-dismiss);
  height: var(--rail-dismiss);
  min-height: var(--rail-dismiss);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  cursor: pointer;
}

.upgrade-rail-dismiss:hover {
  background: var(--bg-subtle);
  color: var(--text);
}

@media (max-width: 1179px) {
  /* Hard hide on small screens regardless of JS gate state. */
  .upgrade-rail {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .upgrade-rail {
    transition: none;
  }
}

/* Post-success "what next" panel (2.2).
   Hidden by default; shown when the result region appears or when
   `window.NWT.toolComplete()` is called. */
.next-panel {
  margin: var(--space-6) 0 0;
  padding: var(--space-6);
  border: var(--stroke) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.next-panel[hidden] {
  display: none;
}

.next-panel header {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.next-panel header h2 {
  margin: 0;
  font-size: var(--text-xl);
}

.next-panel header p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-base);
}

.next-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--next-col-min), 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.next-actions li {
  display: flex;
}

.next-actions a,
.next-actions button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-3);
  border: var(--stroke) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.next-actions a:hover,
.next-actions button:hover {
  border-color: var(--accent);
  color: var(--accent-hover);
}

.next-actions [data-action="favourite"][data-saved="true"] {
  border-color: var(--accent);
  color: var(--accent-hover);
}

@media (prefers-reduced-motion: reduce) {
  .next-panel {
    scroll-behavior: auto;
  }
}

/* =================================================================
   Slice 4 — telemetry consent banner.
   Emitted only when monetization-config.mjs `telemetry.enabled`
   flips true; the markup contract is in
   scripts/generate-site.mjs::consentBanner().
   ================================================================= */
.consent-banner {
  position: fixed;
  inset-inline: var(--space-4);
  bottom: var(--space-4);
  z-index: 90;
  max-width: 720px;
  margin-inline: auto;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  color: var(--text);
  font-size: var(--text-sm);
  display: grid;
  gap: var(--space-2);
}

.consent-banner[hidden] {
  display: none;
}

.consent-banner p {
  margin: 0;
}

.consent-banner a {
  color: var(--accent);
}

.consent-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.consent-banner-actions button {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.consent-banner-actions button:hover,
.consent-banner-actions button:focus-visible {
  border-color: var(--accent);
  color: var(--accent-hover);
}