/* Audio Converter — site styles.
 *
 * Two worlds on purpose. Marketing and long-form guides are light, because 1,500 words of
 * troubleshooting on a black background is a page nobody finishes. The converter itself wears the
 * app's own dark palette, so the tool on this page and the tool on the phone read as one product.
 *
 * Colour tokens come from src/constants/theme.ts: #0D0D12 background, #16161F surface,
 * #1E1E2A elevated, #FF6B4A coral, #FF4E8D pink, #9945FF violet, #00D4AA teal.
 *
 * Every pairing below was measured, not eyeballed. The app's own gradient button is white text on
 * #FF6B4A, which is 2.8:1 and fails AA outright — so the vivid gradient is used for decoration and
 * for dark-panel buttons that carry *dark* ink (#0D0D12 on #FF6B4A is 6.9:1), while buttons on
 * light backgrounds use the darkened gradient #C2410C → #B92B5C, where white clears 5.1:1.
 */

:root {
  --ink: #0d0d12;
  --ink-2: #16161f;
  --ink-3: #1e1e2a;
  --ink-4: #2a2a38;

  --coral: #ff6b4a;
  --coral-mid: #e84e2e;
  --coral-text: #b03a10;   /* 5.7:1 on cream, 6.1:1 on white */
  --coral-deep: #c2410c;   /* white on this is 5.2:1 */
  --pink: #ff4e8d;
  --pink-deep: #b92b5c;    /* white on this is 5.9:1 */
  --violet: #9945ff;
  --violet-text: #6d28d9;  /* 6.7:1 on cream */
  --teal: #00d4aa;
  --teal-bright: #4eebc8;
  --teal-text: #0f766e;    /* 5.1:1 on cream */
  --amber: #ffb800;
  --amber-text: #b45309;
  --red: #ef4444;
  --red-text: #b91c1c;

  --cream: #fbf7f4;
  --cream-2: #f4ede8;
  --white: #ffffff;
  --slate: #475569;        /* 7.1:1 on cream */
  --slate-2: #5a6a80;      /* 5.2:1 on cream */
  --slate-3: #94a3b8;
  --line: #e8ded7;
  --line-2: #d9cbc1;

  --radius: 16px;
  --radius-lg: 24px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(13, 13, 18, 0.06), 0 8px 24px rgba(13, 13, 18, 0.07);
  --shadow-lg: 0 24px 60px rgba(13, 13, 18, 0.16);
  --wrap: 1120px;

  --sans: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

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

/* The UA rule for [hidden] is display:none, but any author rule that sets display wins on cascade
   origin regardless of specificity — .btn{display:inline-flex} would keep an element the tool had
   hidden on screen. This is why normalize.css ships the same rule. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--ink); line-height: 1.2; margin: 0 0 0.5em; font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1.1em; }
a { color: var(--coral-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--coral-deep); }
img { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
small { font-size: 0.85rem; }
code { font-family: var(--mono); font-size: 0.88em; background: var(--cream-2); padding: 0.15em 0.4em; border-radius: 5px; color: var(--ink-3); }
pre { background: var(--ink); color: #e6e6f0; padding: 1rem 1.1rem; border-radius: var(--radius-sm); overflow-x: auto; font-size: 0.85rem; line-height: 1.55; }
pre code { background: none; padding: 0; color: inherit; }

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

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.section { padding: 4.5rem 0; }
.section-tight { padding: 3rem 0; }
.section-alt { background: var(--cream-2); }
.center { text-align: center; }
.lede { font-size: 1.15rem; color: var(--slate-2); }
.muted { color: var(--slate-2); }
.tiny { font-size: 0.82rem; line-height: 1.5; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 0.7rem 1.1rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251, 247, 244, 0.92);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 1.4rem; height: 66px; }
.brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: -0.02em; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.brand span { font-size: 1.02rem; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.35rem; }
.nav a { color: var(--slate); text-decoration: none; font-size: 0.94rem; font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--coral-text); }
.nav .btn { color: #fff; }
.nav-cta-short { display: none; }
@media (max-width: 480px) {
  .nav-cta-long { display: none; }
  .nav-cta-short { display: inline; }
}
@media (max-width: 860px) {
  .nav { gap: 0.9rem; }
  .nav a.nav-hide { display: none; }
}
@media (max-width: 480px) {
  /* At this width the brand and the CTA were both wrapping onto two lines and colliding. */
  .site-header .wrap { gap: 0.6rem; padding: 0 14px; }
  .brand span { font-size: 0.95rem; white-space: nowrap; }
  .nav { gap: 0.7rem; }
  .nav .btn { padding: 0.45rem 0.85rem; font-size: 0.85rem; white-space: nowrap; }
}

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.78rem 1.4rem; border-radius: 999px; border: 0;
  font: inherit; font-weight: 600; font-size: 0.97rem;
  cursor: pointer; text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* White text needs a dark gradient. #C2410C and #B92B5C both clear 5:1 against white. */
.btn-primary { background: linear-gradient(100deg, var(--coral-deep), var(--pink-deep)); color: #fff; box-shadow: 0 6px 18px rgba(194, 65, 12, 0.28); }
.btn-primary:hover { color: #fff; box-shadow: 0 10px 26px rgba(194, 65, 12, 0.34); }
.btn-ghost { background: var(--white); color: var(--ink); border: 1.5px solid var(--line-2); }
.btn-ghost:hover { color: var(--ink); border-color: var(--slate-3); }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.88rem; }
.btn-lg { padding: 0.95rem 1.9rem; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* ---------- store badges ---------- */

/* The badge *is* the SVG - Apple's and Google's artwork, at their own aspect ratios. The anchor is
   only a hit target, so it must not paint a background of its own behind them. */
.stores { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.store-badge {
  display: inline-block; line-height: 0; border-radius: 8px; text-decoration: none;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.store-badge:hover { transform: translateY(-1px); opacity: 0.88; }
.store-badge svg { height: 44px; width: auto; display: block; }
.site-footer .store-badge svg { height: 40px; }

/* ---------- get-the-app blocks ---------- */

/* The badges are the point of the site, so they sit above the fold on every page type rather than
   only in the footer. Bigger than the footer pair, with one line of reason attached. */
.get-app { margin-top: 1.6rem; }
.get-app .stores { gap: 0.7rem; }
.get-app-line { margin: 0.7rem 0 0; font-size: 0.88rem; color: var(--slate-2); max-width: 56ch; }
.get-app-inline {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 1.1rem 0; margin: 1.6rem 0 0;
}
.get-app-inline .get-app-line { margin-top: 0.6rem; }

.hero-cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.hero-cta-or { color: var(--slate-2); font-size: 0.92rem; }
.hero-cta-line { margin: 0.9rem 0 0; font-size: 0.9rem; color: var(--slate-2); max-width: 54ch; }
.stores-hero .store-badge svg { height: 52px; }
@media (max-width: 560px) {
  .hero-cta { gap: 0.7rem; }
  .hero-cta-or { width: 100%; }
  .stores-hero .store-badge svg { height: 46px; }
}

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

.hero { position: relative; overflow: hidden; padding: 2.6rem 0 2.5rem; }
.hero::before {
  content: ''; position: absolute; inset: -40% -20% auto -20%; height: 620px; z-index: 0;
  background:
    radial-gradient(closest-side, rgba(255, 107, 74, 0.16), transparent 70%) 18% 40% / 60% 90% no-repeat,
    radial-gradient(closest-side, rgba(153, 69, 255, 0.14), transparent 70%) 82% 30% / 55% 85% no-repeat,
    radial-gradient(closest-side, rgba(0, 212, 170, 0.10), transparent 70%) 50% 85% / 60% 70% no-repeat;
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { max-width: 19ch; }
.hero .lede { max-width: 56ch; font-size: 1.2rem; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 3rem; align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 2rem; } .hero h1, .hero .lede { max-width: none; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--coral-text); background: rgba(255, 107, 74, 0.11);
  padding: 0.38rem 0.85rem; border-radius: 999px; margin-bottom: 1.1rem;
}
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--coral-deep); }

.hero-points { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: 0.55rem; }

/* The evidence-carrying versions of the hero points, where there is room to actually read them. */
.proof-list { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: 0.9rem; max-width: 78ch; }
.proof-list li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.96rem; line-height: 1.6; }
.proof-list svg { width: 18px; height: 18px; flex: none; margin-top: 5px; color: var(--teal-text); }
.hero-points li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.99rem; }
.hero-points svg { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--teal-text); }

.phone-shot {
  border-radius: 30px; box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  background: var(--white); margin: 0 auto; max-width: 320px;
}

/* ---------- the converter (dark panel) ---------- */

.studio {
  background: var(--ink); color: #e9e9f2;
  border-radius: var(--radius-lg); padding: 1.6rem;
  box-shadow: var(--shadow-lg);
  --line: #2a2a38;
}
.studio h2, .studio h3 { color: #fff; }
.studio a { color: var(--teal-bright); }
.studio-head { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.studio-head h2 { font-size: 1.35rem; margin: 0; }
.studio-head p { margin: 0; font-size: 0.9rem; color: #9a9aae; }
@media (min-width: 720px) { .studio { padding: 2rem 2.2rem; } }

.drop {
  border: 2px dashed #3a3a4c; border-radius: var(--radius);
  padding: 2.4rem 1.4rem; text-align: center; cursor: pointer;
  background: var(--ink-2); transition: border-color 0.15s ease, background-color 0.15s ease;
}
.drop:hover, .drop.is-over { border-color: var(--coral); background: #1a1a26; }
.drop.is-over { border-style: solid; }
.drop-icon {
  width: 58px; height: 58px; margin: 0 auto 0.9rem; border-radius: 17px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--coral), var(--pink) 55%, var(--violet));
}
.drop-icon svg { width: 28px; height: 28px; color: #fff; }
.drop b { display: block; color: #fff; font-size: 1.08rem; margin-bottom: 0.3rem; }
.drop span { color: #9a9aae; font-size: 0.9rem; }
.drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.file-card {
  display: flex; align-items: center; gap: 0.9rem;
  background: var(--ink-2); border-radius: var(--radius); padding: 0.9rem 1rem;
  border: 1px solid var(--ink-4);
}
.file-card .fc-icon {
  width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--coral), var(--violet));
}
.file-card .fc-icon svg { width: 22px; height: 22px; color: #fff; }
.file-card .fc-main { min-width: 0; flex: 1; }
.file-card .fc-name { color: #fff; font-weight: 600; font-size: 0.98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card .fc-meta { color: #9a9aae; font-size: 0.83rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.file-card .fc-meta .tag {
  background: rgba(255, 107, 74, 0.16); color: var(--coral); border-radius: 5px;
  padding: 0 0.4rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.03em;
}

.field { margin-top: 1.4rem; }
.field > label, .field > .field-label {
  display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: #9a9aae; margin-bottom: 0.6rem;
}
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  border: 1.5px solid var(--ink-4); background: var(--ink-2); color: #c9c9d8;
  border-radius: 11px; padding: 0.55rem 0.95rem; font: inherit; font-size: 0.92rem; font-weight: 600;
  cursor: pointer; transition: all 0.12s ease; min-width: 62px; text-align: center;
}
.chip:hover { border-color: #4a4a60; color: #fff; }
.chip[aria-pressed="true"] { border-color: var(--coral); color: #fff; background: rgba(255, 107, 74, 0.15); }
.chip small { display: block; font-size: 0.68rem; font-weight: 500; opacity: 0.72; margin-top: 1px; }
.chip:disabled { opacity: 0.35; cursor: not-allowed; }

.fmt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.55rem; }
.fmt {
  border: 1.5px solid var(--ink-4); background: var(--ink-2); color: #c9c9d8;
  border-radius: 13px; padding: 0.75rem 0.5rem; font: inherit; cursor: pointer;
  text-align: center; transition: all 0.12s ease;
}
.fmt:hover { border-color: #4a4a60; color: #fff; }
.fmt[aria-pressed="true"] { border-color: var(--coral); background: rgba(255, 107, 74, 0.14); color: #fff; }
.fmt b { display: block; font-size: 1.0rem; font-weight: 700; }
.fmt small { display: block; font-size: 0.68rem; opacity: 0.7; margin-top: 2px; }

.studio .btn-go {
  background: linear-gradient(100deg, var(--coral), var(--pink));
  color: var(--ink); font-weight: 700;
  box-shadow: 0 8px 24px rgba(255, 78, 141, 0.24);
}
.studio .btn-go:hover { color: var(--ink); }
.studio .btn-quiet { background: transparent; color: #c9c9d8; border: 1.5px solid var(--ink-4); }
.studio .btn-quiet:hover { color: #fff; border-color: #4a4a60; }

.advice {
  margin-top: 1.1rem; border-radius: var(--radius-sm); padding: 0.85rem 1rem;
  font-size: 0.9rem; line-height: 1.55; border-left: 3px solid;
}
.advice b { display: block; margin-bottom: 0.15rem; }
.advice-perfect { background: rgba(0, 212, 170, 0.1); border-color: var(--teal); color: #b8f5e6; }
.advice-perfect b { color: var(--teal-bright); }
.advice-caution { background: rgba(255, 184, 0, 0.1); border-color: var(--amber); color: #f6e2b4; }
.advice-caution b { color: var(--amber); }
.advice-normal { background: rgba(153, 69, 255, 0.1); border-color: var(--violet); color: #ded0f7; }
.advice-normal b { color: #c9a6ff; }
.advice-error { background: rgba(239, 68, 68, 0.12); border-color: var(--red); color: #fbc7c7; }
.advice-error b { color: #ff8f8f; }

.bar { height: 8px; border-radius: 99px; background: var(--ink-3); overflow: hidden; margin-top: 0.7rem; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--coral), var(--pink), var(--violet)); transition: width 0.25s ease; }
.status-line { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.86rem; color: #9a9aae; margin-top: 0.55rem; }
.status-line .st-label { min-width: 0; }
.status-line .st-pct { flex: none; font-variant-numeric: tabular-nums; }

.result {
  background: var(--ink-2); border: 1px solid var(--ink-4); border-radius: var(--radius);
  padding: 1.2rem; text-align: center; margin-top: 1.2rem;
}
.result h3 { font-size: 1.2rem; margin-bottom: 0.9rem; }
.size-swap { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.size-swap div { background: var(--ink-3); border-radius: 12px; padding: 0.6rem 1.1rem; min-width: 110px; }
.size-swap span { display: block; font-size: 0.72rem; color: #9a9aae; text-transform: uppercase; letter-spacing: 0.07em; }
.size-swap b { font-size: 1.05rem; color: #fff; }
.size-swap .to b { color: var(--teal-bright); }
.size-swap .arrow { background: none; color: #6b6b80; min-width: 0; padding: 0; font-size: 1.3rem; }
.saved { display: inline-block; background: rgba(0, 212, 170, 0.14); color: var(--teal-bright); border-radius: 999px; padding: 0.28rem 0.9rem; font-size: 0.86rem; font-weight: 600; margin-bottom: 1rem; }
.result-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }
.result audio { width: 100%; margin-top: 1rem; }

/* A converted queue: one row per file, each with its own download. */
.result-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; text-align: left; }
.result-list li {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  background: var(--ink-3); border-radius: 10px; padding: 0.6rem 0.8rem;
}
.result-list .rl-name { flex: 1; min-width: 140px; color: #fff; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-list .rl-size { color: #9a9aae; font-size: 0.83rem; font-variant-numeric: tabular-nums; }
.result-list .rl-failed { border-left: 3px solid var(--red); }
.result-list .rl-failed .rl-size { color: #ff8f8f; }

/* Target-size input. */
.num-row { display: flex; align-items: center; gap: 0.5rem; }
.num-input {
  width: 8rem; font: inherit; font-size: 1rem; color: #fff;
  background: var(--ink-2); border: 1.5px solid var(--ink-4); border-radius: 10px;
  padding: 0.55rem 0.75rem;
}
.num-input:focus { border-color: var(--coral); outline: none; }
.num-suffix { color: #9a9aae; font-size: 0.92rem; }

.privacy-note {
  display: flex; gap: 0.7rem; align-items: flex-start;
  margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--ink-4);
  font-size: 0.85rem; color: #9a9aae; line-height: 1.55;
}
.privacy-note svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--teal); }

/* ---------- cards & grids ---------- */

.grid { display: grid; gap: 1.2rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem; box-shadow: var(--shadow);
}
.card h3 { margin-bottom: 0.4rem; font-size: 1.08rem; }
.card p:last-child { margin-bottom: 0; }
.card-link { text-decoration: none; color: inherit; display: block; transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; }
.card-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--line-2); color: inherit; }
.card-link h3 { color: var(--coral-text); }

.icon-tile {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 0.85rem;
  background: linear-gradient(135deg, var(--coral), var(--pink) 60%, var(--violet));
}
.icon-tile svg { width: 21px; height: 21px; color: #fff; }
.icon-tile.t-teal { background: linear-gradient(135deg, var(--teal), #0f766e); }
.icon-tile.t-violet { background: linear-gradient(135deg, var(--violet), #5b21b6); }
.icon-tile.t-amber { background: linear-gradient(135deg, var(--amber), #d97706); }

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

.steps { counter-reset: step; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.step { position: relative; padding-left: 3.2rem; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 1.05rem; color: #fff;
  background: linear-gradient(135deg, var(--coral-deep), var(--pink-deep));
}
.step h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.step p { margin: 0; font-size: 0.95rem; }

/* ---------- screenshots ---------- */

.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.4rem; }
.shot figure { margin: 0; }
.shot img { border-radius: 22px; box-shadow: var(--shadow); border: 1px solid var(--line); background: #fff; }
.shot figcaption { margin-top: 0.7rem; font-size: 0.88rem; color: var(--slate-2); text-align: center; }

/* ---------- comparison table ---------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--line); background: var(--white); }
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
th, td { padding: 0.72rem 0.95rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--cream-2); color: var(--ink); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td.yes, td.no, td.copy { font-weight: 600; white-space: nowrap; }
td.yes { color: var(--teal-text); }
td.no { color: var(--red-text); }
td.copy { color: var(--violet-text); }

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

.faq { display: grid; gap: 0.8rem; }
.faq details {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0 1.2rem; box-shadow: var(--shadow);
}
.faq summary {
  cursor: pointer; padding: 1.05rem 0; font-weight: 600; color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--slate-3); border-bottom: 2px solid var(--slate-3);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.16s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq .faq-body { padding: 0 0 1.15rem; }
.faq .faq-body p { margin: 0 0 0.7rem; font-size: 0.97rem; }
.faq .faq-body p:last-child { margin: 0; }
.learn-more { font-weight: 600; font-size: 0.92rem; display: inline-flex; align-items: center; gap: 0.3rem; }
.learn-more::after { content: '→'; }

/* ---------- guides ---------- */

.guide-list { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.guide-card { display: flex; flex-direction: column; }
.guide-card .kicker { font-size: 0.73rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--violet-text); margin-bottom: 0.45rem; }
.guide-card h3 { font-size: 1.03rem; line-height: 1.35; }
.guide-card p { font-size: 0.92rem; color: var(--slate-2); margin: 0; }

.article { padding: 2.5rem 0 4rem; }
.article h2 { margin-top: 2.4rem; scroll-margin-top: 84px; }
.article h3 { margin-top: 1.8rem; font-size: 1.12rem; }
.article ul, .article ol { padding-left: 1.3rem; margin: 0 0 1.2em; }
.article li { margin-bottom: 0.45em; }
.article > .table-scroll { margin: 1.6rem 0; }
.article blockquote {
  margin: 1.6rem 0; padding: 0.9rem 1.2rem; border-left: 3px solid var(--coral);
  background: var(--white); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--slate);
}
.article blockquote p:last-child { margin: 0; }

.breadcrumb { font-size: 0.85rem; color: var(--slate-2); margin-bottom: 1.2rem; }
.breadcrumb a { color: var(--slate-2); }
.breadcrumb a:hover { color: var(--coral-text); }
.breadcrumb span { margin: 0 0.4rem; color: var(--slate-3); }

.toc {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.3rem; margin: 1.8rem 0;
}
.toc b { display: block; font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate-2); margin-bottom: 0.6rem; }
.toc ol { margin: 0; padding-left: 1.1rem; }
.toc li { margin-bottom: 0.3rem; font-size: 0.94rem; }

.callout {
  border-radius: var(--radius); padding: 1.1rem 1.3rem; margin: 1.8rem 0;
  border-left: 4px solid var(--coral); background: var(--white); box-shadow: var(--shadow);
}
.callout.tip { border-left-color: var(--teal-text); }
.callout.warn { border-left-color: var(--amber-text); }
.callout b { display: block; color: var(--ink); margin-bottom: 0.3rem; }
.callout p:last-child { margin: 0; }

.inline-cta {
  display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap;
  background: var(--ink); color: #e9e9f2; border-radius: var(--radius); padding: 1.3rem 1.5rem; margin: 2.2rem 0;
}
.inline-cta .ic-main { flex: 1; min-width: 220px; }
.inline-cta b { display: block; color: #fff; font-size: 1.05rem; margin-bottom: 0.2rem; }
.inline-cta p { margin: 0; font-size: 0.92rem; color: #9a9aae; }
.inline-cta .btn { background: linear-gradient(100deg, var(--coral), var(--pink)); color: var(--ink); }
.inline-cta .btn:hover { color: var(--ink); }

.related { margin-top: 3rem; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.related h2 { font-size: 1.2rem; }
.related ul { list-style: none; padding: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.related a { font-size: 0.95rem; }

/* ---------- final CTA ---------- */

.cta-band {
  background: var(--ink); color: #e9e9f2; border-radius: var(--radius-lg);
  padding: 2.8rem 2rem; text-align: center; position: relative; overflow: hidden;
}
.cta-band::before {
  content: ''; position: absolute; inset: auto -10% -60% -10%; height: 320px; z-index: 0;
  background:
    radial-gradient(closest-side, rgba(255, 107, 74, 0.3), transparent 70%) 25% 50% / 55% 100% no-repeat,
    radial-gradient(closest-side, rgba(153, 69, 255, 0.28), transparent 70%) 75% 50% / 55% 100% no-repeat;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #b6b6c8; max-width: 52ch; margin-left: auto; margin-right: auto; }
.cta-band .stores { justify-content: center; margin-top: 1.5rem; }
.cta-band .store-badge { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35)); }

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

.site-footer { background: var(--ink); color: #9a9aae; padding: 3rem 0 2rem; margin-top: 4rem; font-size: 0.92rem; }
.site-footer a { color: #c9c9d8; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.footer-grid .footer-heading { color: #fff; font-size: 0.79rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.8rem; font-weight: 700; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.42rem; }
.footer-brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.footer-brand img { width: 34px; height: 34px; border-radius: 9px; }
.footer-brand b { color: #fff; font-size: 1rem; }
.footer-bottom { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid #23232f; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.85rem; }

/* ---------- misc ---------- */

.pill-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1rem 0 0; }
.pill { background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.8rem; font-size: 0.82rem; color: var(--slate-2); font-weight: 500; }
.pill strong { color: var(--ink); font-weight: 700; }

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

.notice {
  background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--amber-text);
  border-radius: var(--radius-sm); padding: 0.9rem 1.1rem; font-size: 0.92rem; margin: 1.2rem 0;
}

@media print {
  .site-header, .site-footer, .studio, .cta-band, .inline-cta { display: none; }
  body { background: #fff; font-size: 12pt; }
}

/* ---------------------------------------------------------- video preview */

/* The browser plays the file off disk while you pick a section. Some containers (MKV, AVI, WMV)
   will not play in every browser; the sliders still work, so the element is allowed to fail. */
.preview {
  width: 100%;
  max-height: 320px;
  margin-top: 0.9rem;
  border-radius: var(--radius);
  background: #000;
  display: block;
}

.preview-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}

/* A button that reads as a link, for the "re-encode it anyway" escape hatch inside body copy. */
.linkish {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.linkish:hover { color: var(--text); }

/* ------------------------------------------------------- download section */

.download-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

.download-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-align: center;
  padding: 2rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.download-badge b { font-size: 1.05rem; }

.app-icon {
  border-radius: 22%;
  box-shadow: 0 10px 30px rgb(0 0 0 / 35%);
}

@media (max-width: 800px) {
  .download-grid { grid-template-columns: 1fr; gap: 1.8rem; }
}

/* The copy matrix carries a second line in its row headers, naming where each codec turns up. */
.matrix th[scope="row"] { min-width: 15rem; }

.matrix th[scope="row"] small {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 0.15rem;
}