/* ==========================================================================
   SpotiDown design system
   Light is the base palette; dark is redefined at token level only, guarded
   so an explicit user choice always beats the OS preference.
   ========================================================================== */

:root {
  /* --- surfaces --------------------------------------------------------- */
  --ground:        #f6f8f6;
  --surface:       #ffffff;
  --surface-2:     #eef2ee;
  --surface-3:     #e3e9e3;
  --rule:          #d7dfd8;
  --rule-strong:   #bdc8be;

  /* --- ink -------------------------------------------------------------- */
  --ink:           #101712;
  --ink-2:         #3d4a41;
  --ink-3:         #6b7a70;

  /* --- accent ----------------------------------------------------------- */
  --accent:        #0f9d58;
  --accent-hover:  #0c8049;
  --accent-ink:    #ffffff;
  --accent-soft:   #e2f3e9;
  --accent-line:   #a9dcc0;

  /* --- brand chrome ------------------------------------------------------
     Header and footer keep the same dark identity in both themes. Music
     services do this because the chrome should read as the brand, not as a
     continuation of the page. These tokens deliberately do not flip.         */
  --brand-bg:      #0a0f0c;
  --brand-bg-2:    #121a15;
  --brand-rule:    #22302a;
  --brand-ink:     #f2f6f3;
  --brand-ink-2:   #9fb0a6;
  --brand-accent:  #3ddc84;
  --brand-accent-soft: rgba(61, 220, 132, .14);

  /* --- semantic --------------------------------------------------------- */
  --warn:          #8a5a08;
  --warn-soft:     #fbf0da;
  --danger:        #a32b25;
  --danger-soft:   #fae4e2;

  /* --- effects ---------------------------------------------------------- */
  --shadow-sm:     0 1px 2px rgba(16, 23, 18, .06);
  --shadow-md:     0 2px 4px rgba(16, 23, 18, .05), 0 12px 28px -18px rgba(16, 23, 18, .30);
  --shadow-lg:     0 4px 8px rgba(16, 23, 18, .05), 0 24px 56px -28px rgba(16, 23, 18, .40);
  --ring:          0 0 0 3px var(--accent-line);

  /* --- type ------------------------------------------------------------- */
  --display: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          "Noto Sans", "Noto Sans Arabic", "Noto Sans Devanagari",
          "Noto Sans Bengali", "Noto Sans Thai", "Noto Sans JP",
          "Noto Sans KR", "Noto Sans SC", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* --- layout ----------------------------------------------------------- */
  --wrap: 1120px;
  --wrap-narrow: 760px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --header-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #0b0f0c;
    --surface:     #12180f14;
    --surface:     #131a15;
    --surface-2:   #1a221c;
    --surface-3:   #232d26;
    --rule:        #263028;
    --rule-strong: #3a473d;

    --ink:         #e9efea;
    --ink-2:       #b2bfb6;
    --ink-3:       #7e8d83;

    --accent:      #3ddc84;
    --accent-hover:#5ce89a;
    --accent-ink:  #062313;
    --accent-soft: #14291d;
    --accent-line: #2d5d42;

    --warn:        #e0b45c;
    --warn-soft:   #2a2314;
    --danger:      #ef8b83;
    --danger-soft: #2d1a18;

    --shadow-sm:   0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md:   0 2px 4px rgba(0, 0, 0, .4), 0 12px 28px -18px rgba(0, 0, 0, .9);
    --shadow-lg:   0 4px 8px rgba(0, 0, 0, .4), 0 24px 56px -28px rgba(0, 0, 0, 1);
    --ring:        0 0 0 3px var(--accent-line);
  }
}

:root[data-theme="dark"] {
  --ground:      #0b0f0c;
  --surface:     #131a15;
  --surface-2:   #1a221c;
  --surface-3:   #232d26;
  --rule:        #263028;
  --rule-strong: #3a473d;

  --ink:         #e9efea;
  --ink-2:       #b2bfb6;
  --ink-3:       #7e8d83;

  --accent:      #3ddc84;
  --accent-hover:#5ce89a;
  --accent-ink:  #062313;
  --accent-soft: #14291d;
  --accent-line: #2d5d42;

  --warn:        #e0b45c;
  --warn-soft:   #2a2314;
  --danger:      #ef8b83;
  --danger-soft: #2d1a18;

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md:   0 2px 4px rgba(0, 0, 0, .4), 0 12px 28px -18px rgba(0, 0, 0, .9);
  --shadow-lg:   0 4px 8px rgba(0, 0, 0, .4), 0 24px 56px -28px rgba(0, 0, 0, 1);
  --ring:        0 0 0 3px var(--accent-line);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--accent-soft); color: var(--ink); }

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: var(--radius-sm);
  font-weight: 600; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; color: var(--accent-ink); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: clamp(2.05rem, 1.3rem + 3.1vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
}
h2 {
  font-size: clamp(1.6rem, 1.24rem + 1.45vw, 2.35rem);
  letter-spacing: -0.026em;
}
h3 { font-size: clamp(1.14rem, 1.05rem + .4vw, 1.35rem); letter-spacing: -0.015em; }
h4 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.008em; }

/* The h1 fades from full ink into the accent across its last third. It is the
   single loudest typographic move on the page, so nothing else gets one. */
.hero h1 {
  background: linear-gradient(105deg,
    var(--ink) 0%, var(--ink) 46%, color-mix(in srgb, var(--accent) 78%, var(--ink)) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  padding-bottom: .08em;
}
@supports not (background-clip: text) {
  .hero h1 { color: var(--ink); -webkit-text-fill-color: currentColor; }
}

p { margin: 0; }
.prose > * + * { margin-top: 1.05em; }
.prose p, .prose li { color: var(--ink-2); }
.prose h2 { margin-top: 2.1em; }
.prose h3 { margin-top: 1.6em; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { padding-inline-start: 1.35em; margin-block: 0; }
.prose li + li { margin-top: .45em; }

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

.lead { font-size: 1.125rem; color: var(--ink-2); }

code, kbd {
  font-family: var(--mono);
  font-size: .86em;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  padding: .1em .4em;
  border-radius: 5px;
}

/* RTL: mirror the few direction-sensitive decorations */
[dir="rtl"] .prose ul,
[dir="rtl"] .prose ol { padding-inline-start: 1.35em; }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding-block: clamp(48px, 7vw, 84px); }
.section + .section { padding-top: 0; }
.section-head { max-width: 680px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head .eyebrow { display: block; margin-bottom: 12px; }
.section-head p { margin-top: 12px; color: var(--ink-2); }

/* Every section heading carries a short accent rule above it. It is the one
   repeated brand mark inside the page body, tying the content back to the
   chrome without tinting the headings themselves. The rule is two-tone: a solid
   stub that reads as a deliberate mark, then a fade that stops it looking cut. */
.section-head h2::before,
.prose > h2::before {
  content: ""; display: block;
  width: 54px; height: 4px; border-radius: 3px;
  background:
    linear-gradient(90deg, var(--accent) 0 18px, transparent 18px 24px,
                    color-mix(in srgb, var(--accent) 55%, transparent) 24px 54px);
  margin-bottom: 16px;
}
.section-head .eyebrow + h2::before { display: none; }

/* Body h2s also get a hairline under them, inset to the text rather than run
   across the column, so long articles break into visible chapters. */
.prose > h2 {
  padding-bottom: .42em;
  border-bottom: 1px solid var(--rule);
}

/* Subheads inside article body get an accent bar on the leading edge. Logical
   properties keep it on the right in Arabic without a second rule. */
.prose h3 {
  position: relative;
  padding-inline-start: 15px;
}
.prose h3::before {
  content: ""; position: absolute;
  inset-inline-start: 0; top: .18em; bottom: .18em;
  width: 4px; border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent));
}

/* An eyebrow above a heading gets a leading tick instead, so the two markers
   never stack. */
.section-head .eyebrow::before,
.hero .eyebrow::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 18px; height: 2px; border-radius: 2px;
  background: var(--accent);
  margin-inline-end: 9px;
}
.hero .eyebrow::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 18px; height: 2px; border-radius: 2px;
  background: var(--accent);
  margin-inline-start: 9px;
}

/* Card and step headings sit tighter to their body copy than the browser
   default, which otherwise leaves them floating. Each gets a short accent stub
   underneath: enough to mark it as a heading level, small enough that it does
   not compete with the card icon or the step number already sitting above it. */
.card h3, .step h3 { line-height: 1.25; }
.card h3::after, .step h3::after {
  content: ""; display: block;
  width: 22px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent));
  margin-top: 9px;
}

/* Inline emphasis inside body copy picks up a faint accent wash rather than a
   heavier weight alone, so scanning finds the specifics. */
.prose strong, .card p strong, .step p strong {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -0.42em 0 var(--accent-soft);
}

.divider { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--brand-bg);
  border-bottom: 1px solid var(--brand-rule);
  color: var(--brand-ink);
}
/* A hairline of the accent along the bottom edge, so the chrome reads as a
   deliberate brand bar rather than a plain dark strip. */
.site-header::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--brand-accent) 18%, var(--brand-accent) 82%, transparent);
  opacity: .5;
}

.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: 16px;
}

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 700; font-size: 1.22rem;
  letter-spacing: -0.03em; color: var(--brand-ink); text-decoration: none;
  flex-shrink: 0;
}
.brand:hover { color: var(--brand-ink); }
.brand-mark { width: 26px; height: 26px; flex-shrink: 0; }
.brand em { font-style: normal; color: var(--brand-accent); }

.nav { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.nav a {
  display: inline-block; padding: 8px 12px; border-radius: var(--radius-sm);
  color: var(--brand-ink-2); text-decoration: none; font-size: .93rem; font-weight: 500;
  white-space: nowrap; transition: color .15s ease, background .15s ease;
}
.nav a:hover { background: var(--brand-bg-2); color: var(--brand-ink); }
.nav a[aria-current="page"] { color: var(--brand-accent); background: var(--brand-accent-soft); }

.header-tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; min-width: 38px; padding-inline: 9px;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-sm); color: var(--brand-ink-2);
  cursor: pointer; font-size: .9rem; font-weight: 500;
}
.icon-btn:hover { background: var(--brand-bg-2); color: var(--brand-ink); border-color: var(--brand-rule); }
.icon-btn svg { width: 18px; height: 18px; }
.site-header :where(a, button):focus-visible { outline-color: var(--brand-accent); }

.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: block; }
}

/* --- language switcher ---------------------------------------------------- */

.lang { position: relative; }
.lang-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 10px);
  width: min(92vw, 460px);
  background: var(--brand-bg-2); border: 1px solid var(--brand-rule);
  border-radius: var(--radius); box-shadow: 0 24px 56px -20px rgba(0, 0, 0, .7);
  padding: 8px; z-index: 120;
  display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
  max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain;
}
.lang-menu[data-open="true"] { display: grid; }
.lang-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--brand-ink-2); text-decoration: none; font-size: .92rem;
}
.lang-menu a:hover { background: var(--brand-accent-soft); color: var(--brand-ink); }
.lang-menu a[aria-current="true"] { background: var(--brand-accent-soft); color: var(--brand-accent); font-weight: 600; }
.lang-menu .flag { font-size: 1.05rem; line-height: 1; }
.lang-menu a:focus-visible { outline-color: var(--brand-accent); }

.nav-toggle { display: none; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--brand-bg); border-bottom: 1px solid var(--brand-rule);
    box-shadow: 0 24px 56px -20px rgba(0, 0, 0, .7); padding: 10px 14px 16px;
    margin-inline-start: 0;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: 11px 12px; font-size: 1rem; }
  .header-inner { justify-content: space-between; }
  .header-tools { margin-inline-start: auto; }
}

/* ==========================================================================
   Hero + download tool
   ========================================================================== */

.hero {
  position: relative;
  padding-block: clamp(40px, 6vw, 76px) clamp(32px, 4vw, 52px);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; z-index: -1;
  inset-inline-start: 50%; top: -220px;
  width: 900px; height: 520px; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%,
              color-mix(in srgb, var(--accent) 16%, transparent) 0%,
              transparent 72%);
  pointer-events: none;
}
.hero-inner { max-width: 760px; margin-inline: auto; text-align: center; }
.hero h1 { margin-bottom: 16px; }
.hero .lead { max-width: 620px; margin-inline: auto; }

.trust-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px;
  margin-top: 22px;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--rule);
  font-size: .8rem; font-weight: 500; color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}
.chip svg { width: 14px; height: 14px; color: var(--accent); }

/* --- the tool ------------------------------------------------------------- */

.tool {
  margin-top: clamp(28px, 4vw, 40px);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(16px, 2.4vw, 24px);
  text-align: start;
}

.tool-form { display: flex; gap: 10px; flex-wrap: wrap; }
.tool-field { position: relative; flex: 1 1 320px; min-width: 0; }
.tool-input {
  width: 100%; height: 56px;
  padding-inline: 46px 96px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 1rem; color: var(--ink);
}
[dir="rtl"] .tool-input { padding-inline: 46px 96px; }
.tool-input::placeholder { color: var(--ink-3); }
.tool-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

.tool-field .field-icon {
  position: absolute; inset-inline-start: 15px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; color: var(--ink-3); pointer-events: none;
}
.paste-btn {
  position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
  height: 38px; padding-inline: 13px;
  background: var(--surface-3); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); color: var(--ink-2);
  font-size: .85rem; font-weight: 600; cursor: pointer;
}
.paste-btn:hover { background: var(--rule); color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 56px; padding-inline: 26px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-family: var(--display); font-size: 1rem; font-weight: 600;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn-primary[disabled] { opacity: .6; cursor: not-allowed; }
.btn-ghost {
  background: var(--surface-2); color: var(--ink); border-color: var(--rule);
  height: 42px; padding-inline: 16px; font-size: .9rem;
}
.btn-ghost:hover { background: var(--surface-3); color: var(--ink); }
.btn-sm { height: 38px; padding-inline: 14px; font-size: .87rem; border-radius: var(--radius-sm); }
.btn-block { width: 100%; }

.tool-hint {
  margin-top: 12px; font-size: .85rem; color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
}
.tool-hint code { background: transparent; border: 0; padding: 0; color: var(--ink-2); }

/* --- results -------------------------------------------------------------- */

.tool-status { margin-top: 16px; display: none; }
.tool-status[data-state] { display: block; }

.alert {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 15px; border-radius: var(--radius);
  border: 1px solid var(--rule); background: var(--surface-2);
  font-size: .92rem; color: var(--ink-2);
}
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.alert-error { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); }
.alert-warn  { background: var(--warn-soft);  border-color: color-mix(in srgb, var(--warn) 35%, transparent);  color: var(--warn); }
.alert strong { display: block; color: inherit; font-weight: 600; margin-bottom: 2px; }

.loading { display: flex; align-items: center; gap: 12px; padding: 16px 4px; color: var(--ink-2); font-size: .93rem; }
.spinner {
  width: 20px; height: 20px; flex-shrink: 0;
  border: 2px solid var(--rule-strong); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.result-head {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 14px; background: var(--surface-2);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.result-art {
  width: 76px; height: 76px; border-radius: var(--radius-sm);
  object-fit: cover; background: var(--surface-3); flex-shrink: 0;
}
.result-meta { flex: 1 1 200px; min-width: 0; }
.result-meta h3 { margin-bottom: 2px; overflow-wrap: anywhere; }
.result-meta p { color: var(--ink-3); font-size: .88rem; }
.result-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.track-list { margin-top: 12px; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.track-list-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; background: var(--surface-2);
  border-bottom: 1px solid var(--rule); font-size: .85rem; color: var(--ink-3);
  flex-wrap: wrap;
}
.track-scroll { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; }
.track-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--rule);
  font-size: .92rem;
}
.track-row:last-child { border-bottom: 0; }
.track-row:hover { background: var(--surface-2); }
.track-num { font-family: var(--mono); font-size: .78rem; color: var(--ink-3); width: 26px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.track-name { flex: 1 1 auto; min-width: 0; }
.track-name b { display: block; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-name span { display: block; font-size: .82rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-dur { font-family: var(--mono); font-size: .8rem; color: var(--ink-3); flex-shrink: 0; font-variant-numeric: tabular-nums; }

.progress { height: 4px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin-top: 10px; }
.progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }

.format-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.seg {
  display: inline-flex; background: var(--surface-2);
  border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 3px; gap: 3px;
}
.seg button {
  border: 0; background: transparent; color: var(--ink-2);
  padding: 6px 13px; border-radius: 6px; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

/* ==========================================================================
   Cards & grids
   ========================================================================== */

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 22px;
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-2); font-size: .95rem; }
.card-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; margin-bottom: 14px;
}
.card-icon svg { width: 19px; height: 19px; }

a.card { text-decoration: none; display: block; transition: border-color .15s ease, transform .15s ease; }
a.card:hover { border-color: var(--accent-line); transform: translateY(-2px); }
a.card h3 { color: var(--ink); }
a.card .more { color: var(--accent); font-size: .88rem; font-weight: 600; margin-top: 12px; display: inline-block; }

/* --- numbered steps ------------------------------------------------------- */

.steps { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); counter-reset: step; }
.step { position: relative; padding-top: 44px; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; inset-inline-start: 0;
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: .95rem;
}
.step h3 { margin-bottom: 6px; }
.step p { color: var(--ink-2); font-size: .95rem; }

/* --- spec table ----------------------------------------------------------- */

.table-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
table.spec { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .93rem; }
table.spec th, table.spec td { padding: 12px 16px; text-align: start; border-bottom: 1px solid var(--rule); }
table.spec thead th { background: var(--surface-2); font-family: var(--display); font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
table.spec tbody th { font-weight: 600; white-space: nowrap; }
table.spec td { color: var(--ink-2); }
table.spec tbody tr:last-child th, table.spec tbody tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 4px; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 600; font-size: 1.03rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex-shrink: 0; width: 11px; height: 11px;
  border-inline-end: 2px solid var(--ink-3); border-block-end: 2px solid var(--ink-3);
  transform: rotate(45deg) translateY(-3px); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq details[open] summary { color: var(--accent); }
.faq .answer { padding: 0 4px 20px; color: var(--ink-2); font-size: .97rem; }
.faq .answer > * + * { margin-top: .85em; }

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.crumbs { padding-block: 16px 0; font-size: .84rem; color: var(--ink-3); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-inline-end: 6px; color: var(--rule-strong); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

/* ==========================================================================
   Related links (interlinking block)
   ========================================================================== */

.related { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.related a {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 15px; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); text-decoration: none;
  font-size: .93rem; font-weight: 500;
}
.related a:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink); }
.related svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }

/* ==========================================================================
   Callout / update log
   ========================================================================== */

.callout {
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  border-radius: var(--radius); padding: 18px 20px;
}
.callout h3 { font-size: 1.02rem; margin-bottom: 6px; }
.callout p { color: var(--ink-2); font-size: .94rem; }

.changelog { list-style: none; margin: 0; padding: 0; }
.changelog li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule); }
.changelog li:first-child { border-top: 0; }
.changelog time { font-family: var(--mono); font-size: .8rem; color: var(--ink-3); padding-top: 3px; }
.changelog p { font-size: .93rem; color: var(--ink-2); }
@media (max-width: 560px) { .changelog li { grid-template-columns: 1fr; gap: 4px; } }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  position: relative;
  background: var(--brand-bg);
  color: var(--brand-ink-2);
  padding-block: clamp(44px, 5vw, 64px) 28px;
  margin-top: clamp(48px, 7vw, 88px);
}
/* Mirrors the accent hairline under the header, closing the page with the
   same brand gesture it opened with. */
.site-footer::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--brand-accent) 18%, var(--brand-accent) 82%, transparent);
  opacity: .5;
}
.footer-grid {
  display: grid; gap: 32px;
  grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
  padding-bottom: 32px;
}
.footer-about .brand { color: var(--brand-ink); }
.footer-about .brand em { color: var(--brand-accent); }
.footer-about p { color: var(--brand-ink-2); font-size: .9rem; margin-top: 12px; max-width: 320px; }
/* Footer column headings are h3 so the document outline never skips a level,
   but they are sized as the small eyebrow labels they read as. */
.footer-col h3 {
  font-family: var(--display); font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand-accent); margin-bottom: 14px;
  line-height: 1.3;
}
.footer-col h3::before, .footer-col h3::after { content: none; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-col a {
  color: var(--brand-ink-2); text-decoration: none; font-size: .91rem;
  transition: color .15s ease;
}
.footer-col a:hover { color: var(--brand-ink); }

.footer-bottom {
  border-top: 1px solid var(--brand-rule); padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  font-size: .84rem; color: var(--brand-ink-2); opacity: .82;
}
.footer-bottom p { max-width: 640px; }
.footer-bottom a { color: var(--brand-ink-2); }
.site-footer :where(a, button):focus-visible { outline-color: var(--brand-accent); }

/* ==========================================================================
   Motion
   ========================================================================== */

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

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .site-header, .site-footer, .tool, .nav, .crumbs { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
}