/* ---------------------------------------------------------------
   Shared stylesheet for both brands (tiktokmp3converter.com and
   tiktokmp4converter.com). One file, one cache entry; the brands
   differ only in the accent tokens injected per page.

   Design language — editorial terminal. Modeled on the owner's
   references (typeui.sh, superdesign.dev, fable-index): near-black
   flat canvas, hairline borders, ONE solid saturated accent used
   with confidence, Fraunces display serif against IBM Plex Mono
   labels. No gradient washes, no glass, no glow. Type does the work.
   --------------------------------------------------------------- */
:root {
  --bg: #ffffff;
  --bg-raised: #ffffff;
  --bg-input: #f4f4f6;
  --border: #e7e7ec;
  --border-bright: #d6d6de;
  --text: #0e0e11;
  --text-dim: #27272d;
  --text-faint: #55555e;
  /* Flat accents only. Each brand overrides these in an inline <style>. */
  --accent: #00e5ff;
  --accent-2: #4d7bff;
  --accent-ink: #000000; /* text color on accent surfaces */
  --ok: #2fd48f;
  --warn: #f5a623;
  --err: #ff5c72;
  --radius: 14px;
  --radius-sm: 9px;
  --wrap: 1120px;
  --font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Archivo', 'Geist', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --shadow-card: 0 1px 2px rgb(15 15 20 / 0.05), 0 20px 44px -24px rgb(15 15 20 / 0.18);
}

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

/* Registered angle drives the rotating conic "beam" outline (the glimmer).
   Same technique as ember.lmntltools.com's beamspin. Browsers without
   @property simply show a static ring — graceful. */
@property --beam {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes beamspin { to { --beam: 360deg; } }
/* One continuous constant-velocity sweep. The gradient's two ends are the
   same colour, so the loop wrap lands while the sheen is off the glyphs and
   is invisible — no hold, no stall, no visible restart. */
@keyframes em-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -120% 0; }
}
@keyframes duo-line { to { background-position: -200% 0; } }
@keyframes duo-glow {
  0%, 100% { box-shadow: -5px 0 22px -8px var(--accent-2), 5px 0 22px -8px var(--accent); }
  50% { box-shadow: 5px 0 22px -8px var(--accent-2), -5px 0 22px -8px var(--accent); }
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Thin animated glimmer outline: a 1px conic ring that sweeps around the
   element. Applied via ::after so components keep ::before for themselves. */
.beam-ring { position: relative; }
.beam-ring::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--beam),
    transparent 0turn, transparent 0.55turn,
    var(--accent-2) 0.68turn, #131316 0.75turn, var(--accent) 0.82turn,
    transparent 0.95turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: beamspin 3.2s linear infinite;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }

body {
  margin: 0;
  /* The ground is painted by the fixed #ink canvas; the html background is
     the no-JS / pre-paint fallback so nothing ever flashes white. */
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------------------------- generative film ---------------------------- */
/* One continuous shot: ink dispersing in water, generated on a small buffer
   and upscaled, scroll-driven (see ink.js). Sits under everything. */
#ink {
  position: fixed; inset: 0; z-index: -2;
  width: 100vw; height: 100vh;
}


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

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink); padding: 10px 16px;
  font-weight: 600;
}
.skip:focus { left: 0; }

a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

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

/* Display face rides Archivo's variable WIDTH axis as a real device:
   extended for display lines, condensed nowhere near body copy. */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 860;
  font-variation-settings: 'wdth' 118;
  text-transform: uppercase;
  letter-spacing: -0.012em;
  line-height: 0.92;
}
h3 { font-family: var(--font); }

/* Section numbering: monospace 01/02/… with a hairline that scales in.
   Counter lives on <main>, so every page numbers its own sections. */
main { counter-reset: sec; }
main .kicker { position: relative; padding-bottom: 12px; }
main .kicker::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero) ' / ';
  color: var(--accent);
}
main .kicker::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 56px; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.9s cubic-bezier(.6,0,.2,1) 0.15s;
}
.js-reveal .is-revealed .kicker::after, html:not(.js-reveal) .kicker::after { transform: scaleX(1); }

/* Character-mask reveals: each word is an overflow-hidden mask, each char
   swings up out of it. The mask's padding/negative-margin pair keeps
   descenders from being clipped. */
.w-mask {
  display: inline-block; overflow: hidden;
  padding: 0.12em 0; margin: -0.12em 0;
}
.w-ch {
  display: inline-block;
  transform: translateY(112%) rotate(5deg);
  transition: transform 1.05s cubic-bezier(.19,1,.22,1);
}
.is-up .w-ch { transform: none; }


/* Monospace utility voice: labels, nav, stats, meta. */
.mono, .site-nav a, .help, .hero-badge, .trust-row li, .stat-strip .stat span,
.step-card::before, .footer-nav a, .copyright, .status, .bulk-row .idx,
.compare-table thead th { font-family: var(--font-mono); }

/* ------------------------------- header ------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgb(255 255 255 / 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
/* Signature: a 2px cyan→red current flowing along the top edge. */
.site-header::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    var(--accent) 0%, var(--accent-2) 30%, var(--accent) 55%, var(--accent-2) 80%, var(--accent) 100%);
  background-size: 200% 100%;
  animation: duo-line 6s linear infinite;
}
.header-inner { display: flex; align-items: center; gap: 24px; min-height: 60px; }

.logo {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--text); text-decoration: none; font-size: 1.02rem; letter-spacing: -0.01em;
  flex-shrink: 0;
}
.logo svg { color: var(--accent); }
.logo strong { font-weight: 700; }
.logo span { font-weight: 450; }

.site-nav { display: flex; gap: 2px; flex-wrap: wrap; margin-left: auto; align-items: center; }
.site-nav a {
  position: relative;
  color: var(--text-dim); text-decoration: none; font-size: 0.88rem; font-weight: 550;
  font-family: var(--font); letter-spacing: -0.01em; text-transform: none;
  padding: 8px 12px; border-radius: 8px;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
/* Animated duo underline that grows in on hover / stays for the active page. */
.site-nav a::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
.site-nav a:hover { color: var(--text); background: rgb(15 15 20 / 0.05); }
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav a[aria-current='page'] { color: var(--text); }
.site-nav a[aria-current='page']::after { transform: scaleX(1); }

/* Link across to the sibling site — quiet, professional pill. No ring here:
   a 1px animated arc on a small pill reads as a stray line, not an outline. */
.site-nav .nav-sibling {
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  margin-left: 8px;
  padding-inline: 14px;
}
.site-nav .nav-sibling::after { content: none; }
.site-nav .nav-sibling:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Hamburger + dropdown panel. <details> so it works with zero JS on every
   page. Hidden on desktop, where the inline nav shows instead. */
/* Header account pill + dropdown menu. The dot flips green once supa.js
   confirms a session and the pill becomes the account menu; signed out it is
   a plain link to the sign-in page. */
.acct-wrap { position: relative; }
.acct-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 230px;
  background: #ffffff;
  border: 1px solid var(--border-bright);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 24px 48px -18px rgb(15 15 20 / 0.22);
  display: grid;
  animation: menu-in .18s ease;
}
.acct-menu[hidden] { display: none; }
.acct-email {
  margin: 0; padding: 10px 12px 8px;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-faint);
  text-transform: lowercase; letter-spacing: 0.02em;
  border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere;
}
.acct-menu a, .acct-menu button {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border: 0; background: transparent;
  color: var(--text); text-decoration: none;
  font-size: 0.9rem; font-weight: 550; font-family: var(--font);
  border-radius: 9px; cursor: pointer;
  transition: background .15s, color .15s;
}
.acct-menu a:hover, .acct-menu button:hover { background: rgb(15 15 20 / 0.05); }
.acct-menu #acct-signout { color: var(--err); }

.acct-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text); text-decoration: none;
  font-weight: 600; font-size: 0.82rem; letter-spacing: 0.01em;
  white-space: nowrap;
  transition: border-color .2s, box-shadow .2s;
}
.acct-btn:hover { border-color: var(--accent); box-shadow: 0 0 16px -6px var(--accent); }
.acct-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
}
.acct-btn.is-in .acct-dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); }

.nav-menu { display: none; position: relative; margin-left: auto; }
.nav-menu summary {
  list-style: none; cursor: pointer;
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px;
  color: var(--text-dim);
  border: 1px solid var(--border);
  transition: color .15s, border-color .15s;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary:hover { color: var(--text); border-color: var(--border-bright); }
.nav-menu[open] summary { color: var(--text); border-color: var(--accent); }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 220px;
  background: #ffffff;
  border: 1px solid var(--border-bright);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 24px 48px -18px rgb(15 15 20 / 0.22);
  animation: menu-in .18s ease;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
.menu-panel a {
  display: block; padding: 12px 14px; border-radius: 9px;
  color: var(--text); text-decoration: none; font-size: 0.95rem; font-weight: 550;
}
.menu-panel a:hover { background: rgb(15 15 20 / 0.05); }
.menu-panel a[aria-current='page'] { color: var(--accent); }
.menu-panel .menu-sibling {
  margin-top: 6px; border-top: 1px solid var(--border); border-radius: 0 0 9px 9px;
  color: var(--accent);
}

/* -------------------------------- hero -------------------------------- */
.hero {
  position: relative;
  padding: clamp(44px, 8vw, 96px) 0 36px;
  text-align: center;
  /* Faint dot grid — texture without a wash. Fades out toward the bottom. */
  background-image: radial-gradient(rgb(15 15 20 / 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 20px;
}
.hero-badge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  animation: blink 2.4s ease-in-out infinite;
}

.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(2.4rem, 6.6vw, 4.4rem);
  line-height: 1.03;
  letter-spacing: -0.045em;
  font-weight: 750;
  color: var(--text);
}
/* The closing word: animated cyan↔red shimmer sweeping through the glyphs. */
.hero h1 em {
  font-style: normal; font-weight: 750;
  /* The sheen is a pale accent tint, not white — a white sheen on the white
     ground made the letters blink out mid-sweep. */
  background: linear-gradient(100deg,
    var(--accent) 0%, var(--accent) 38%, color-mix(in srgb, #ffffff 62%, var(--accent-2)) 50%, var(--accent-2) 62%, var(--accent) 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: em-shimmer 3.8s linear infinite;
}

.subhead {
  margin: 0 auto 36px; max-width: 60ch;
  color: var(--text-dim); font-size: clamp(1rem, 2.1vw, 1.12rem);
}

/* ----------------------------- converter ------------------------------ */
.converter { position: relative; max-width: 720px; margin-inline: auto; }
/* Duo aura behind the card: cyan one side, red the other. Fixed alpha, tightly
   sized to the card, so it reads as stage lighting rather than a wash. */
.converter::before {
  content: ''; position: absolute; inset: -40px -30px auto; height: 240px;
  z-index: -1; pointer-events: none; filter: blur(52px); opacity: 0.24;
  background:
    radial-gradient(220px 150px at 18% 45%, var(--accent-2), transparent 70%),
    radial-gradient(220px 150px at 82% 45%, var(--accent), transparent 70%);
}

/* The converter is a real card — the single object the whole page orbits.
   It wears the thin animated glimmer outline. */
.convert-card {
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-card);
  text-align: left;
}
.convert-card::after {
  content: ''; position: absolute; inset: -1px; border-radius: var(--radius);
  padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--beam),
    transparent 0turn 0.55turn,
    var(--accent-2) 0.68turn, #131316 0.75turn, var(--accent) 0.82turn,
    transparent 0.95turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: beamspin 3.6s linear infinite;
}

/* Segmented format toggle. */
.seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: 10px;
}
.seg-btn {
  border: 0; border-radius: 6px; padding: 9px 10px;
  background: transparent; color: var(--text-dim);
  font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.is-on { background: var(--accent); color: var(--accent-ink); }

.input-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-sm);
  padding: 6px;
  transition: border-color .15s, box-shadow .15s;
}
.input-row:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

#url-input {
  flex: 1 1 auto; min-width: 0;
  background: transparent; border: 0; outline: 0;
  color: var(--text); font-size: 1rem; font-family: var(--font);
  padding: 12px 10px;
}
#url-input::placeholder { color: var(--text-faint); }

.btn-paste {
  flex-shrink: 0; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid var(--border-bright);
  color: var(--text-dim); cursor: pointer;
  transition: color .15s, border-color .15s;
}
.btn-paste:hover { color: var(--text); border-color: var(--accent); }

.btn-primary {
  flex-shrink: 0;
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: var(--radius-sm);
  padding: 12px 26px; font-size: 0.95rem; font-weight: 650;
  font-family: var(--font); letter-spacing: -0.01em;
  cursor: pointer;
  transition: filter .15s, transform .1s;
  /* TikTok chromatic energy: cyan and red glows drifting side to side. */
  animation: duo-glow 3.2s ease-in-out infinite;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.btn-primary:active:not(:disabled) { transform: translateY(1px); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; animation: none; }

.help { margin: 12px 2px 0; font-size: 0.76rem; color: var(--text-faint); letter-spacing: 0.01em; }
.help kbd {
  font-family: inherit; font-size: 0.95em; color: var(--text-dim);
  border: 1px solid var(--border-bright); border-radius: 3px; padding: 0 5px;
}

.trust-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  list-style: none; margin: 24px 0 0; padding: 0;
}
.trust-row li {
  font-size: 0.74rem; color: var(--text-dim); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.trust-row li::before { content: '✓ '; color: var(--accent); font-weight: 700; }

/* Floating mobile CTA: appears only when the converter has scrolled away. */
.jump-cta {
  position: fixed; left: 50%; bottom: 18px; z-index: 50;
  transform: translate(-50%, 80px);
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 600; font-size: 0.8rem; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.05em;
  border: 0; border-radius: 999px; padding: 13px 24px;
  box-shadow: 0 8px 24px rgb(15 15 20 / 0.18);
  cursor: pointer; opacity: 0;
  transition: transform .25s ease, opacity .25s;
}
.jump-cta.is-visible { animation: duo-glow 3.2s ease-in-out infinite; }
.jump-cta.is-visible { transform: translate(-50%, 0); opacity: 1; }

/* ------------------------------- status ------------------------------- */
.status { margin-top: 18px; min-height: 24px; font-size: 0.85rem; }
.status:empty { margin-top: 0; min-height: 0; }
.status.error { color: var(--err); }
.status.loading { color: var(--text-dim); }

.spinner {
  display: inline-block; width: 14px; height: 14px; margin-right: 9px;
  vertical-align: -2px;
  border: 2px solid var(--border-bright); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------- result ------------------------------- */
.result {
  margin-top: 28px; text-align: left;
  background: var(--bg-raised);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  overflow: hidden;
  animation: rise .3s ease;
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

.result-head { display: flex; gap: 16px; padding: 18px; align-items: flex-start; }

.result-cover-wrap { position: relative; flex-shrink: 0; }
.result-cover {
  display: block; width: 100px; aspect-ratio: 9 / 16;
  object-fit: cover; border-radius: var(--radius-sm);
  background: var(--bg-input); border: 1px solid var(--border);
}
.result-cover-wrap::after { content: none; }

.result-meta { min-width: 0; flex: 1; }
.result-title {
  margin: 0 0 6px; font-size: 1rem; font-weight: 600; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.result-author { margin: 0 0 10px; color: var(--text-dim); font-size: 0.85rem; font-family: var(--font-mono); }
.result-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.75rem; color: var(--text-faint); margin: 0; font-family: var(--font-mono); }

.download-list { display: grid; gap: 8px; padding: 0 18px 14px; }

.download-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: transparent; border: 1px solid var(--border-bright);
  border-radius: var(--radius-sm); padding: 14px 17px;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.9rem;
  transition: border-color .15s, background .15s;
}
.download-btn:hover { border-color: var(--accent); background: var(--bg-input); }
.download-btn .size { font-weight: 400; font-size: 0.75rem; color: var(--text-faint); font-family: var(--font-mono); }
.download-btn.is-primary {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  animation: duo-glow 3.2s ease-in-out infinite;
}
.download-btn.is-primary:hover { filter: brightness(1.1); }
.download-btn.is-primary .size { color: color-mix(in srgb, var(--accent-ink) 60%, transparent); }

/* Library onboarding inside the result card — shown the moment someone has a
   file worth keeping. Tinted with the accent so it reads as a feature, not an ad. */
.lib-nudge {
  margin: 0 18px 14px; padding: 12px 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.lib-nudge p { margin: 0; font-size: 0.84rem; line-height: 1.55; color: var(--text-dim); }
.lib-nudge strong { color: var(--text); }
.lib-nudge a { color: var(--accent); font-weight: 600; }

.lib-note { margin: 0 18px 14px; font-size: 0.8rem; color: var(--text-faint); }
.lib-note a { color: var(--accent); }

/* Email-me-this-download row inside the result card. */
.email-dl { margin: 0 18px 14px; }
.email-dl-label {
  margin: 0 0 8px; font-family: var(--font-mono); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint);
}
.email-dl-row { display: flex; gap: 8px; }
.email-dl-row input {
  flex: 1; min-width: 0; background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border-bright); border-radius: var(--radius-sm);
  padding: 11px 14px; font-size: 0.9rem; outline: 0;
}
.email-dl-row input:focus { border-color: var(--accent); }
#email-dl-btn {
  border: 1px solid var(--border-bright); background: transparent; color: var(--text);
  border-radius: var(--radius-sm); padding: 11px 22px; font-weight: 600; font-size: 0.88rem;
  cursor: pointer; transition: border-color .15s, color .15s;
}
#email-dl-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
#email-dl-btn:disabled { opacity: 0.5; cursor: wait; }
.email-dl-msg { margin: 8px 0 0; font-size: 0.8rem; color: var(--text-dim); min-height: 1.2em; }
.email-dl-msg.err { color: var(--err); }

.result-again {
  display: block; width: calc(100% - 36px); margin: 0 18px 18px;
  text-align: center; padding: 11px;
  background: transparent; border: 1px dashed var(--border-bright);
  border-radius: var(--radius-sm); color: var(--text-dim);
  font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.result-again:hover { color: var(--text); border-color: var(--accent); }

.image-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px; padding: 0 18px 18px;
}
.image-grid a {
  display: block; border-radius: 6px; overflow: hidden; border: 1px solid var(--border);
  transition: border-color .15s;
}
.image-grid a:hover { border-color: var(--accent); }
.image-grid img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; }

/* -------------------------------- bulk -------------------------------- */
.bulk-area { display: grid; gap: 10px; margin-top: 14px; }
.bulk-area textarea {
  width: 100%; background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border-bright); border-radius: var(--radius);
  padding: 14px; font-family: var(--font-mono);
  font-size: 0.82rem; line-height: 1.7; resize: vertical; outline: 0;
  transition: border-color .15s;
}
.bulk-area textarea:focus { border-color: var(--accent); }
.bulk-area .btn-primary { justify-self: start; }

.bulk-results { margin-top: 22px; text-align: left; display: grid; gap: 8px; }
.bulk-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 14px; font-size: 0.88rem;
}
.bulk-row .idx { color: var(--text-faint); font-variant-numeric: tabular-nums; flex-shrink: 0; font-size: 0.78rem; }
.bulk-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulk-row.failed .name { color: var(--err); }
.bulk-row .actions { display: flex; gap: 6px; flex-shrink: 0; }
.bulk-row .actions a {
  font-size: 0.72rem; font-weight: 600; text-decoration: none; font-family: var(--font-mono);
  border: 1px solid var(--border-bright);
  padding: 5px 11px; border-radius: 4px; color: var(--text);
}
.bulk-row .actions a:hover { border-color: var(--accent); color: var(--accent); }

.bulk-summary {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 14px; background: var(--bg-raised);
  border: 1px solid var(--border-bright); border-radius: var(--radius-sm);
}
.bulk-summary .btn-primary { padding: 9px 18px; font-size: 0.78rem; }

/* ----------------------------- stat strip ----------------------------- */
.stat-strip {
  list-style: none; margin: 34px 0 0; padding: clamp(22px, 4vw, 36px) 20px;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(18px, 5vw, 64px);
  border-block: 1px solid var(--border);
}
.stat-strip .stat { text-align: center; }
.stat-strip .stat b {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  font-weight: 600; letter-spacing: -0.02em;
  color: var(--accent);
}
.stat-strip .stat span {
  font-size: 0.7rem; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.07em;
}

/* ------------------------------- steps -------------------------------- */
.kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 10px;
}
.steps { max-width: 900px; margin: 0 auto 72px; }
.steps h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 0; }
.steps-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  counter-reset: step;
  margin-top: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.step-card {
  position: relative;
  background: var(--bg);
  padding: 24px 20px 20px;
  transition: background .15s;
}
.step-card + .step-card { border-left: 1px solid var(--border); }
.step-card:hover { background: var(--bg-raised); }
.step-card::before {
  counter-increment: step; content: '0' counter(step);
  display: block;
  font-weight: 500; font-size: 0.78rem; letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 12px;
}
.step-card h3 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 650; letter-spacing: -0.01em; }
.step-card p { margin: 0; font-size: 0.88rem; color: var(--text-dim); }

/* -------------------------------- bento -------------------------------- */
.bento { max-width: var(--wrap); margin: 0 auto 72px; }
.bento h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 0; max-width: 28ch; }
.bento-grid {
  display: grid; gap: 12px; margin-top: 28px;
  grid-template-columns: repeat(6, 1fr);
}
.bento-card {
  grid-column: span 3;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 20px;
  transition: border-color .15s;
}
.bento-card:nth-child(1), .bento-card:nth-child(4) { grid-column: span 4; }
.bento-card:nth-child(2), .bento-card:nth-child(3) { grid-column: span 2; }
.bento-card:hover { border-color: var(--accent); }
.bento-card svg { color: var(--accent); margin-bottom: 12px; }
.bento-card h3 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 650; letter-spacing: -0.01em; }
.bento-card p { margin: 0; font-size: 0.88rem; color: var(--text-dim); }

/* ----------------------------- comparison ------------------------------ */
/* Home-page library promo — mirrors the other content sections' rhythm. */
.lib-promo { max-width: 760px; margin: 0 auto 72px; }
.lib-promo h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 0 0 14px; }
.lib-promo-copy { margin: 0; color: var(--text-dim); line-height: 1.7; }
.lib-promo-copy strong { color: var(--text); font-weight: 600; }
.acct-cta {
  display: inline-block; margin-top: 22px; padding: 13px 30px;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-weight: 650; font-size: 0.92rem; text-decoration: none;
  animation: duo-glow 3.2s ease-in-out infinite;
  transition: filter .15s, transform .15s;
}
.acct-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }

.compare { max-width: 760px; margin: 0 auto 72px; }
.compare h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 0; }
.compare-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  margin-top: 28px; font-size: 0.9rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.compare-table th, .compare-table td { padding: 13px 16px; text-align: left; }
.compare-table thead th {
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500;
  color: var(--text-dim); border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
}
.compare-table thead th:first-child { width: 42%; }
.compare-table tbody th { font-weight: 500; color: var(--text); }
.compare-table tbody tr + tr td, .compare-table tbody tr + tr th { border-top: 1px solid var(--border); }
.compare-table td.yes { color: var(--accent); font-weight: 600; }
.compare-table td.no { color: var(--text-faint); }
.compare-table .us { color: var(--accent); }

/* ------------------------------- content ------------------------------ */
.content { padding: 48px 20px 64px; }

.prose { max-width: 68ch; margin: 0 auto 44px; }
.prose h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.8rem); letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.prose p { margin: 0 0 15px; color: #c9c9c4; }
.prose strong { color: var(--text); font-weight: 650; }

.faq details {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 8px; background: var(--bg-raised); overflow: hidden;
  transition: border-color .15s;
}
.faq details:hover, .faq details[open] { border-color: var(--border-bright); }
.faq summary {
  cursor: pointer; padding: 15px 17px; font-weight: 600; font-size: 0.95rem; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; color: var(--accent); font-size: 1.25rem; line-height: 1; flex-shrink: 0;
  font-family: var(--font-mono);
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 17px 16px; color: var(--text-dim); font-size: 0.92rem; }

.legal h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); letter-spacing: -0.01em; max-width: 68ch; margin: 0 auto 6px; }
.legal .updated { max-width: 68ch; margin: 0 auto 32px; color: var(--text-faint); font-size: 0.8rem; font-family: var(--font-mono); }

/* --------------------------- scroll reveal ---------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal {
    opacity: 0; transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease;
  }
  .js-reveal .reveal.is-revealed { opacity: 1; transform: none; }
}

/* ------------------------------ ad slots ------------------------------ */
.ad-slot { display: flex; flex-direction: column; align-items: center; margin: 26px auto; padding-inline: 20px; }
.ad-slot.is-empty { display: none; }
/* Premium perk #1: no ads. The class is set from a cached flag in an inline
   head script (before first paint) and reconciled by supa.js on every load. */
.is-premium .ad-slot { display: none !important; }
.ad-label {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-faint); margin-bottom: 6px; font-family: var(--font-mono);
}
.ad-header { min-height: 100px; }
.ad-inline, .ad-mid1, .ad-mid2 { min-height: 260px; }
.ad-footer { min-height: 100px; }

.captcha-holder { margin-top: 16px; display: flex; justify-content: center; }
.captcha-holder[hidden] { display: none; }

/* ------------------------------- footer ------------------------------- */
.site-footer {
  border-top: 1px solid var(--border); padding: 38px 0 46px;
  margin-top: 40px; text-align: center;
}
.footer-note {
  max-width: 68ch; margin: 0 auto 20px; font-size: 0.8rem;
  color: var(--text-faint); line-height: 1.7;
}
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-bottom: 18px; }
.footer-nav a {
  color: var(--text-dim); text-decoration: none; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.footer-nav a:hover { color: var(--accent); }
.sibling-note { margin: 0 0 14px; font-size: 0.85rem; color: var(--text-dim); }
.sibling-note a { font-weight: 600; }
.copyright { margin: 0; font-size: 0.7rem; color: var(--text-faint); letter-spacing: 0.04em; }

/* ----------------------------- responsive ----------------------------- */
@media (max-width: 860px) {
  .steps-grid { grid-template-columns: 1fr; }
  .step-card + .step-card { border-left: 0; border-top: 1px solid var(--border); }
  .bento-grid { grid-template-columns: 1fr 1fr; }
  .bento-card, .bento-card:nth-child(1), .bento-card:nth-child(2),
  .bento-card:nth-child(3), .bento-card:nth-child(4) { grid-column: span 1; }
}

@media (max-width: 800px) {
  .site-nav { display: none; }
  .nav-menu { display: block; margin-left: 0; }
  .acct-wrap { margin-left: auto; }
}

@media (max-width: 720px) {
  .header-inner { min-height: 56px; gap: 12px; }

  .input-row { flex-wrap: wrap; padding: 8px; }
  #url-input { flex: 1 1 100%; order: 1; padding: 11px 6px; font-size: 0.92rem; }
  .btn-paste { order: 2; }
  .btn-primary { order: 3; flex: 1; }

  .result-head { padding: 14px; gap: 12px; }
  .result-cover { width: 76px; }
  .download-list, .image-grid { padding: 0 14px 12px; }
  .result-again { width: calc(100% - 28px); margin: 0 14px 14px; }
  .bulk-row { flex-wrap: wrap; }

  .compare-table { font-size: 0.84rem; }
  .compare-table th, .compare-table td { padding: 11px 12px; }
}

@media (max-width: 480px) {
  .bento-grid { grid-template-columns: 1fr; }

  /* Logo + account pill + menu button all share a 390px header — every part
     slims down a step so the row never overflows into horizontal scroll. */
  .header-inner { gap: 10px; }
  .logo { font-size: 0.92rem; gap: 7px; }
  .logo svg { width: 22px; height: 22px; }
  .acct-btn { padding: 7px 11px; font-size: 0.76rem; gap: 6px; }
  .nav-menu summary { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
  /* Frozen beams read as random specks — hide the rings entirely. */
  .convert-card::after, .site-nav .nav-sibling::after, .beam-ring::after { display: none; }
  .hero h1 em {
    background: none; color: var(--accent);
    -webkit-background-clip: initial; background-clip: initial;
  }
}