/* ==========================================================================
   FILEZAAR — DESIGN SYSTEM
   Tokens: 彩格调 (grass.io direction)   ·   Build: 筑原型 / prototype-builder
   --------------------------------------------------------------------------
   This file is the single source of truth. It carries two layers:

     §0  TOKENS      colour, type, space, radius, shadow, motion
     §1  BASE        reset + body + focus + reduced-motion
     §2  TYPE SCALE  .t-display … .t-label
     §3  LAYOUT      .container .section .stack .rule
     §4  HEADER      fixed bar, brand, nav, icon buttons, breadcrumb strip
     §5  BUTTONS     .btn-primary .btn-secondary .btn-ghost
     §6  WIDGETS     .dropzone .file-row .optbar .field .control-panel
                     .progress .result .error-note .reassure
     §7  CONTENT     .steps .trust .usecases .spec-list .diff .faq-item
                     .related-list .cat-card .tool-index
     §8  FOOTER

   Rules that must survive the lift into generate_site.py
     · One shadow only (--shadow-1): filled dropzone + scrolled header.
     · Lime (--accent) budget: primary CTA, active nav underline, accent rule.
       Never a background, never body text, never a gradient.
     · No monospace anywhere. No card-in-card. No nested panels.
   ========================================================================== */

/* ==========================================================================
   §0  TOKENS
   ========================================================================== */
:root {
  /* — Type ——————————————————————————————————————————————————— */
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-icon: 'Material Symbols Outlined';

  /* — Ink ———————————————————————————————————————————————————— */
  --ink: #191A23;
  --ink-2: #545454;
  /* 5.3:1 on --surface-2 — the previous #6F726A measured 4.41:1 and failed AA */
  --ink-3: #63665D;

  /* — Surface ———————————————————————————————————————————————— */
  --surface-0: #FAFAFA;
  --surface-1: #FFFFFF;
  --surface-2: #F3F3F3;
  --surface-tint: #F2FED1;

  /* — Line ——————————————————————————————————————————————————— */
  --border: #E5E5E5;
  --border-strong: #8F9189;

  /* — Accent ————————————————————————————————————————————————— */
  --accent: #ABF600;
  --accent-ink: #191A23;
  --accent-deep: #89C500;
  --accent-hover: #9DE200;

  /* — State —————————————————————————————————————————————————— */
  --success: #0E7A3C;
  --success-surface: #EAF7EF;
  --error: #B3261E;
  --error-surface: #FDECEA;
  --focus: #191A23;

  /* — Radius ————————————————————————————————————————————————— */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* — Elevation —————————————————————————————————————————————— */
  --shadow-1: 0 1px 2px rgb(25 26 35 / .04), 0 8px 24px -8px rgb(25 26 35 / .10);

  /* — Hard-edge elevation ————————————————————————————————————
     Zero blur, no falloff: the element sits on a solid block of ink cast at
     the same distance from every edge. Shared by buttons and cards so the
     two read as one system. The press state drops the offset to nil so the
     control lands in the space its own shadow occupied.                   */
  --hard-ink: #191A23;
  --hard-line: 1px;
  --shadow-hard: 4px 4px 0 0 var(--hard-ink);
  --shadow-hard-lg: 6px 6px 0 0 var(--hard-ink);

  /* — Motion ————————————————————————————————————————————————— */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur: 200ms;

  /* — Grid ——————————————————————————————————————————————————— */
  --container: 1240px;
  --gutter: 24px;
  /* single source of truth for the fixed header and the offset below it */
  --header-h: 4rem;
  --header-offset: 5rem;

  /* — Spacing rhythm ————————————————————————————————————————— */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
}

.dark {
  --ink: #F4F5F2;
  --ink-2: #A3A69E;
  --ink-3: #7C7F78;

  --surface-0: #0E0F14;
  --surface-1: #16181F;
  --surface-2: #1E212A;
  --surface-tint: #1C2410;

  --border: #2A2D36;
  --border-strong: #7C7F78;

  --accent: #ABF600;
  --accent-ink: #0E0F14;
  --accent-deep: #89C500;
  --accent-hover: #C0FA2E;

  --success: #4ED18B;
  --success-surface: #12241A;
  --error: #FF6B5E;
  --error-surface: #2A1512;

  --focus: #ABF600;
  --shadow-1: none;

  /* Near-black would vanish on a dark surface, so the cast block is pure
     black. Distance and blur stay identical to the light theme. */
  --hard-ink: #000000;
  --shadow-hard: 4px 4px 0 0 var(--hard-ink);
  --shadow-hard-lg: 6px 6px 0 0 var(--hard-ink);
}

/* ==========================================================================
   §1  BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--ink);
  font: 400 1rem/1.65 var(--font-body);
  letter-spacing: -.005em;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* Icon layer — Material Symbols Outlined, used as-is */
.ms {
  font-family: var(--font-icon);
  font-weight: 400;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
}
.ms-sm { font-size: 1rem; }
.ms-lg { font-size: 1.75rem; }

/* ==========================================================================
   §2  TYPE SCALE
   ========================================================================== */
.t-display, .t-h1, .t-h2, .t-h3 { font-family: var(--font-display); color: var(--ink); margin: 0; }

.t-display { font-weight: 700; font-size: clamp(2.75rem, 1.9rem + 4.2vw, 5.25rem); line-height: .98; letter-spacing: -.045em; }
.t-h1      { font-weight: 680; font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem); line-height: 1.04; letter-spacing: -.04em; }
.t-h2      { font-weight: 660; font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); line-height: 1.10; letter-spacing: -.035em; }
.t-h3      { font-weight: 640; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height: 1.20; letter-spacing: -.025em; }

.t-body-lg { font-weight: 400; font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem); line-height: 1.65; letter-spacing: -.01em; color: var(--ink-2); margin: 0; }
.t-body    { font-weight: 400; font-size: 1rem; line-height: 1.65; letter-spacing: -.005em; color: var(--ink-2); margin: 0; }
.t-sm      { font-weight: 400; font-size: .875rem; line-height: 1.55; color: var(--ink-2); margin: 0; }

/* The ONLY uppercase token in the system */
.t-label {
  font-weight: 600;
  font-size: .6875rem;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}

.measure { max-width: 62ch; }
.measure-sm { max-width: 46ch; }
.num { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   §3  LAYOUT
   ========================================================================== */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main { padding-top: var(--header-offset); }
/* tool pages: the breadcrumb strip carries the offset instead */
main.has-crumbs { padding-top: 0; }

/* `.hidden` must beat this file's component `display` values, but must NOT beat
   Tailwind's responsive display variants. Every generated page's primary nav is
   `hidden md:flex` and its privacy badge is `hidden sm:inline-flex`; those depend
   on the responsive variant winning by source order *within* tailwind.css. A bare
   `.hidden` rule in this file — with or without !important — loads after tailwind.css,
   ties on specificity, wins on source order, and hides the desktop nav site-wide.
   So scope it to the only component here that sets `display` and is toggled with
   `.hidden` (video-converter #file-card, mute-video #file-details). */
.file-row.hidden { display: none; }

.section { padding-block: 4rem; }
@media (min-width: 768px) { .section { padding-block: 6rem; } }
/* consecutive sections share one gap instead of doubling it */
.section + .section,
.widget-band + .section { padding-top: 0; }

/* the band that holds the tool widget (between hero and the first section) */
.widget-band { padding-bottom: var(--s-7); }

/* anchors clear the fixed header */
section[id], .tool-group[id], .tool-hero { scroll-margin-top: 6rem; }

.section-tight { padding-block: 2.5rem; }
@media (min-width: 768px) { .section-tight { padding-block: 3.5rem; } }

.rule { height: 1px; background: var(--border); border: 0; margin: 0; }
.rule-accent { width: 56px; height: 3px; background: var(--accent); border: 0; margin: 0; border-radius: 2px; }

.stack-2 > * + * { margin-top: var(--s-2); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-6 > * + * { margin-top: var(--s-6); }

/* Section head: eyebrow + title, left aligned, asymmetric */
.sec-head { max-width: 62ch; margin-bottom: var(--s-7); }
.sec-head .t-body-lg { margin-top: var(--s-4); }

/* ==========================================================================
   §4  HEADER
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 50;
  height: var(--header-h);
  background: color-mix(in srgb, var(--surface-0) 80%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-1); }

.header-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--surface-1);
  display: grid; place-items: center;
}
.brand-mark .ms { font-size: 1.125rem; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -.03em;
  color: var(--ink);
}

/* — Mobile nav: drawer below 900px, inline row above ——————————— */
.nav-toggle { display: grid; }
@media (min-width: 900px) { .nav-toggle { display: none; } }

.nav {
  position: fixed;
  top: var(--header-h);
  inset-inline: 0;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  background: var(--surface-0);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  padding: var(--s-3) var(--gutter) var(--s-5);
  display: grid;
  gap: 2px;
  /* closed state: out of the focus order and not announced */
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
}
.nav.is-open {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
@media (min-width: 900px) {
  .nav {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--s-6);
    max-height: none;
    overflow: visible;
    background: none;
    border-bottom: 0;
    box-shadow: none;
    padding: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
  }
}
.nav-link {
  position: relative;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink-2);
  padding-block: 4px;
  transition: color var(--dur) var(--ease);
}
.nav-link:hover { color: var(--ink); }
.nav-link.is-active { color: var(--ink); font-weight: 600; }
.nav-link.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
/* stacked drawer: full-width rows, active state becomes a left bar */
@media (max-width: 899px) {
  .nav-link {
    display: block;
    padding: .875rem .25rem;
    border-bottom: 1px solid var(--border);
  }
  .nav .nav-link:last-child { border-bottom: 0; }
  .nav-link.is-active::after {
    left: -8px; right: auto;
    top: .6rem; bottom: .6rem;
    width: 3px; height: auto;
  }
}

.header-actions { display: flex; align-items: center; gap: var(--s-2); }
.icon-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-full);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.divider-v { width: 1px; height: 20px; background: var(--border); margin-inline: var(--s-1); }

/* — Breadcrumb strip ————————————————————————————————————————— */
.breadcrumb-strip {
  padding-top: var(--header-offset);
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}
.breadcrumb-strip .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.crumbs { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--ink-3); }
.crumbs a { color: var(--ink-3); transition: color var(--dur) var(--ease); }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { font-size: .75rem; opacity: .6; }
.crumbs .current { color: var(--ink); font-weight: 500; }

.badge-private {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-tint);
  color: var(--ink);
  border-radius: var(--r-full);
  padding: 6px 12px;
  font-weight: 600;
  font-size: .6875rem;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.badge-private .ms { font-size: .875rem; }

/* ==========================================================================
   §5  BUTTONS
   ========================================================================== */
.btn-primary, .btn-secondary, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: .9375rem;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  border-radius: var(--r-full);
  padding: .75rem 1.5rem;
  font-weight: 600;
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  padding: .75rem 1.5rem;
  font-weight: 500;
}
.btn-secondary:hover { border-color: var(--ink); background: var(--surface-2); }

.btn-ghost {
  background: transparent;
  border: 0;
  color: var(--ink-2);
  padding: .5rem .25rem;
  font-weight: 500;
}

/* ==========================================================================
   §5b HARD-EDGE ELEVATION
   One treatment, two surfaces. Buttons and cards sit on a solid cast block of
   ink; hovering lifts the element and grows the offset, pressing drops both to
   zero. .btn-ghost is deliberately excluded — it has no border, and a border
   is what a hard shadow reads against.
   ========================================================================== */
.btn-primary, .btn-secondary {
  border: var(--hard-line) solid var(--hard-ink);
  box-shadow: var(--shadow-hard);
}
.btn-primary:hover, .btn-secondary:hover {
  border-color: var(--hard-ink);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard-lg);
}
.btn-primary:active, .btn-secondary:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 0 var(--hard-ink);
}

.tool-card, .cat-card, .preset-card, .profile-card, .fz-card {
  border: var(--hard-line) solid var(--hard-ink);
  box-shadow: var(--shadow-hard);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.tool-card:hover, .cat-card:hover, .preset-card:hover, .profile-card:hover, .fz-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard-lg);
}
.btn-ghost:hover { color: var(--ink); }

.btn-sm { padding: .5rem 1rem; font-size: .875rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

/* ==========================================================================
   §6  TOOL WIDGETS
   ========================================================================== */

/* — Dropzone ————————————————————————————————————————————————— */
.dropzone {
  border-radius: var(--r-lg);
  border: 2px dashed var(--border-strong);
  background: var(--surface-1);
  padding: 4rem 2rem;
  text-align: center;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.dropzone:hover,
.dropzone.is-dragover {
  border-color: var(--accent);
  background: var(--surface-tint);
}
.dropzone-icon { color: var(--ink-3); margin-bottom: var(--s-4); }
.dropzone-icon .ms { font-size: 2.5rem; font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 48; }
.dropzone-title { font-family: var(--font-display); font-weight: 640; font-size: 1.125rem; letter-spacing: -.02em; color: var(--ink); margin: 0; }
.dropzone.is-filled {
  border-style: solid;
  border-color: var(--border);
  background: var(--surface-2);
  box-shadow: var(--shadow-1);
  padding: var(--s-5);
  text-align: left;
}

/* — File row ————————————————————————————————————————————————— */
.file-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3);
}
.file-thumb {
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  color: var(--ink-3);
  overflow: hidden;
}
/* inside a filled dropzone the row is not its own surface */
.dropzone.is-filled > .file-row {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.file-meta { min-width: 0; flex: 1; }
.file-name {
  display: block;
  font-weight: 500;
  color: var(--ink);
  font-size: .9375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-sub { display: block; font-size: .8125rem; color: var(--ink-3); margin-top: 2px; }
.file-row .btn-secondary { flex-shrink: 0; }

/* — Reassurance line ————————————————————————————————————————— */
.reassure {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-3);
  font-size: .875rem;
  margin-top: var(--s-4);
}
.reassure .ms { font-size: 1rem; }

/* — Options bar (variant B: sits ABOVE the textarea) ——————————— */
.optbar {
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  padding: 1.25rem;
}
.optbar-grid { display: grid; gap: var(--s-5); }
@media (min-width: 700px) { .optbar-grid { grid-template-columns: repeat(3, 1fr); } }

.field-label { display: block; font-size: .8125rem; font-weight: 600; color: var(--ink); margin-bottom: var(--s-2); }
.field-hint { font-size: .8125rem; color: var(--ink-3); margin-top: var(--s-2); }

.seg { display: inline-flex; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-full); padding: 3px; gap: 2px; }
.seg button {
  border: 0; border-radius: var(--r-full);
  background: transparent; color: var(--ink-2);
  padding: .375rem .875rem; font-size: .875rem; font-weight: 500; cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface-1); font-weight: 600; }

.check { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--ink-2); cursor: pointer; }
.check input { accent-color: var(--ink); width: 16px; height: 16px; }

input[type="range"] {
  width: 100%;
  accent-color: var(--ink);
  background: transparent;
}
input[type="number"], select, textarea {
  font-family: var(--font-body);
  font-size: .9375rem;
  color: var(--ink);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .5rem .75rem;
  width: 100%;
}
select { cursor: pointer; }

/* — Textarea ————————————————————————————————————————————————— */
.field {
  min-height: 280px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  padding: 1rem;
  resize: vertical;
  line-height: 1.6;
  letter-spacing: 0;
}
.field:focus { border-color: var(--ink); outline: none; }
.field:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* — Control panel (variant C: no dashed frame) ————————————————— */
.control-panel {
  border-radius: var(--r-lg);
  padding: 1.5rem;
  background: var(--surface-1);
  border: 1px solid var(--border);
}
@media (min-width: 768px) { .control-panel { padding: 2rem; } }
.control-grid { display: grid; gap: var(--s-6); }
@media (min-width: 760px) { .control-grid { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); } }

/* — Result ——————————————————————————————————————————————————— */
.result {
  background: var(--surface-tint);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  margin-top: var(--s-5);
}
@media (min-width: 768px) { .result { padding: 2rem; } }
.result-value {
  font-family: var(--font-display);
  font-weight: 660;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
  word-break: break-all;
  margin: 0 0 var(--s-4);
}
.result-stats { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); font-size: .875rem; color: var(--ink-2); }
.result-stats .num { font-weight: 600; color: var(--ink); }

/* — Progress ———————————──———————————————————————————————————— */
.progress {
  height: 4px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  overflow: hidden;
  margin-top: var(--s-4);
}
.progress-fill { height: 100%; background: var(--accent); border-radius: var(--r-full); width: 0; transition: width var(--dur) var(--ease); }

/* — Error ———————————————————————————————————————————————————— */
.error-note {
  border-left: 4px solid var(--error);
  background: var(--error-surface);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--s-4);
  margin-top: var(--s-4);
}
.error-note .t-sm { color: var(--error); font-weight: 500; }
.error-note strong { display: block; font-size: .9375rem; color: var(--error); margin-bottom: 4px; }

/* — Success note ————————————————————————————————————————————— */
.ok-note {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--success); font-size: .875rem; font-weight: 500;
}

/* ==========================================================================
   §6b  TOOL PAGE LAYOUT  (shared by all three variants)
   ========================================================================== */
.tool-hero { padding-block: var(--s-7) var(--s-6); }
@media (min-width: 768px) { .tool-hero { padding-block: var(--s-9) var(--s-7); } }
.tool-hero .t-h1 { margin-top: var(--s-4); max-width: 20ch; }
.tool-hero .t-body-lg { margin-top: var(--s-4); }

/* category chip on tool-page heroes — surface-2, never lime */
.chip {
  display: inline-block;
  background: var(--surface-2);
  color: var(--ink-2);
  border-radius: var(--r-full);
  padding: 6px 12px;
}

.widget { max-width: 52rem; }

/* variant A: option row under the dropzone */
.opt-row { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
@media (min-width: 640px) { .opt-row { grid-template-columns: 1fr 1fr; } }
.opt-row .full { grid-column: 1 / -1; }

/* variant C: character-set checklist */
.set-list { display: grid; gap: var(--s-3); }
@media (min-width: 560px) { .set-list { grid-template-columns: 1fr 1fr; } }

/* spec list + supporting note */
.two-col-spec { display: grid; gap: var(--s-7); }
@media (min-width: 1000px) { .two-col-spec { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); } }

/* ==========================================================================
   §7  CONTENT BLOCKS
   ========================================================================== */

/* — Steps: editorial numbered rows, hairline separated ———————— */
.steps { border-top: 1px solid var(--border); }
.step {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--border);
  align-items: start;
}
@media (min-width: 768px) {
  .step { grid-template-columns: 7rem 1fr; gap: var(--s-6); padding-block: var(--s-6); }
}
.step-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--ink-3);
}
@media (min-width: 768px) { .step-num { font-size: 2rem; } }
.step-body .t-body { margin-top: var(--s-2); max-width: 58ch; }

/* — Trust / privacy block ———————————————————————————————————— */
.trust {
  background: var(--surface-2);
  border-radius: var(--r-xl);
  padding: 2rem;
}
@media (min-width: 768px) { .trust { padding: 3rem; } }
.trust-list { margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.trust-list li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-top: 1px solid var(--border);
  font-size: .9375rem;
  color: var(--ink-2);
}
.trust-list .ms { color: var(--ink-3); font-size: 1.125rem; }

/* — Use cases ———————————————————————————————————————————————— */
.usecases { border-top: 1px solid var(--border); }
.usecase {
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: var(--s-3);
}
@media (min-width: 900px) {
  .usecase { grid-template-columns: 22rem 1fr; gap: var(--s-7); align-items: start; }
}
.usecase .t-body { max-width: 62ch; }

/* — Spec list ———————————————————————————————————————————————— */
.spec-list { margin: 0; }
.spec-list > div {
  display: grid;
  gap: 4px;
  padding-block: var(--s-3);
  border-top: 1px solid var(--border);
}
@media (min-width: 640px) {
  .spec-list > div { grid-template-columns: 16rem 1fr; gap: var(--s-5); align-items: baseline; }
}
.spec-list dt { font-size: .9375rem; color: var(--ink-3); }
.spec-list dd { margin: 0; font-size: .9375rem; color: var(--ink); }

/* — Two-column typographic diff (NOT cards) ——————————————————— */
.diff { display: grid; gap: var(--s-6); }
@media (min-width: 768px) {
  .diff { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .diff-col + .diff-col { border-left: 1px solid var(--border); padding-left: var(--s-8); }
}
.diff-col h3 { margin: 0 0 var(--s-4); }
.diff-line {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--s-3);
  padding-block: var(--s-2);
  font-size: .9375rem;
  color: var(--ink-2);
}
.diff-line .ms { font-size: 1rem; }
.diff-no .ms { color: var(--ink-3); }
.diff-yes .ms { color: var(--ink); }

/* — FAQ —————————————————————————————————————————————————————— */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-of-type { border-top: 1px solid var(--border); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding-block: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-family: var(--font-display);
  font-weight: 620;
  font-size: 1.0625rem;
  letter-spacing: -.02em;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--ink-2); }
.faq-item .chev { color: var(--ink-3); transition: transform var(--dur) var(--ease); }
.faq-item[open] .chev { transform: rotate(180deg); }
.faq-item .faq-body { padding-bottom: 1.25rem; max-width: 68ch; }

/* — Related tools: bordered typographic list, NOT cards ——————— */
.related-list { border-bottom: 1px solid var(--border); }
.related-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  border-top: 1px solid var(--border);
  padding-block: 1rem;
  transition: padding-left var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.related-list a:hover { padding-left: var(--s-3); }
.related-list .rt-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 620;
  font-size: 1.0625rem;
  letter-spacing: -.02em;
  color: var(--ink);
}
.related-list .rt-desc { display: block; font-size: .875rem; color: var(--ink-3); margin-top: 2px; }
.related-list .rt-go { color: var(--ink-3); flex-shrink: 0; }

/* — Category card ———————————————————————————————————————————— */
.cat-card {
  border-radius: var(--r-lg);
  background: var(--surface-2);
  padding: 1.5rem;
  display: block;
  transition: background-color var(--dur) var(--ease);
}
.cat-card:hover { background: var(--surface-tint); }
.cat-card .cat-num { font-size: .8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cat-card h3 { margin: var(--s-3) 0 var(--s-2); }
.cat-card .cat-list { font-size: .875rem; color: var(--ink-2); line-height: 1.7; }

/* — Full tool index (typographic, grouped) ——————————————————— */
.tool-index { display: grid; gap: var(--s-6); }
@media (min-width: 700px) { .tool-index { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-8); } }
@media (min-width: 1000px) { .tool-index { grid-template-columns: repeat(3, 1fr); column-gap: var(--s-8); } }
.tool-group { border-top: 2px solid var(--ink); padding-top: var(--s-3); }
.tool-group h3 { font-family: var(--font-display); font-weight: 640; font-size: 1.0625rem; letter-spacing: -.02em; margin: 0; color: var(--ink); }
.tool-group .count { font-size: .8125rem; color: var(--ink-3); margin-bottom: var(--s-3); }
.tool-group ul { list-style: none; margin: 0; padding: 0; }
.tool-group li { border-top: 1px solid var(--border); }
.tool-group a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding-block: .5rem; font-size: .9375rem; color: var(--ink-2);
  transition: padding-left var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tool-group a:hover { padding-left: var(--s-2); color: var(--ink); }
.tool-group a .ms { font-size: 1rem; opacity: 0; transition: opacity var(--dur) var(--ease); }
.tool-group a:hover .ms { opacity: .5; }

/* ==========================================================================
   §8  FOOTER
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  padding-block: var(--s-7) var(--s-6);
  margin-top: var(--s-8);
}
.footer-grid { display: grid; gap: var(--s-6); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-7); } }
.footer-col h4 { font-size: .875rem; font-weight: 600; color: var(--ink); margin: 0 0 var(--s-3); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li + li { margin-top: 8px; }
.footer-col a { font-size: .875rem; color: var(--ink-2); transition: color var(--dur) var(--ease); }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  justify-content: space-between;
}