/* ==========================================================================
   HEIC Converter — landing page styles
   Single stylesheet, no framework, no web fonts (keeps LCP fast).

   FONT POLICY — no paid font is loaded, embedded or redistributed here:
   there is no @font-face, no Google Fonts / CDN request and no font file in
   the repository, so the page transfers zero font bytes. The stack below
   resolves to fonts that already exist on the visitor's own OS (system-ui /
   -apple-system are aliases, not licensed files). Every downloadable family
   named as a fallback is open source: Noto Sans (OFL), Roboto (Apache-2.0).
   ========================================================================== */

:root {
  --ink: #0b1220;
  --ink-soft: #1e293b;
  --body: #475569;
  --muted: #64748b;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --bg: #ffffff;
  --bg-tint: #f7f8fc;
  --brand: #4f46e5;
  --brand-600: #4338ca;
  --brand-2: #7c3aed;
  --brand-soft: #eef2ff;
  --ok: #047857;
  --ok-soft: #ecfdf5;
  --err: #b91c1c;
  --err-soft: #fef2f2;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow: 0 18px 40px -26px rgba(15, 23, 42, .35);
  --shadow-lg: 0 44px 80px -44px rgba(49, 46, 129, .45);
  --container: 1120px;
  --font: system-ui, -apple-system, "Segoe UI", "Noto Sans", "Noto Sans JP", "Noto Sans KR", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Malgun Gothic", sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* keep sticky header from covering anchor targets on any viewport */
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--ink);
  margin: 0;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}

p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

/* Kill the 300 ms tap delay on every interactive element (mobile first). */
a, button, summary, .dropzone, .faq__q, .row__action { touch-action: manipulation; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.icon--sm { width: 15px; height: 15px; }
.icon--check { color: var(--brand); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: #fff;
  border-radius: 0 0 10px 0;
  font-size: .9rem;
}
.skip-link:focus { left: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

section[id], #upload { scroll-margin-top: 88px; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .84);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 68px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark { width: 36px; height: 36px; border-radius: 10px; }
.brand__name {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
}
.brand__suffix { font-weight: 500; color: var(--muted); }

.site-nav { display: flex; gap: 28px; }
.site-nav a {
  position: relative;
  font-size: .93rem;
  font-weight: 500;
  color: var(--body);
  padding: 6px 0;
  transition: color .18s ease;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after { transform: scaleX(1); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

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

.lang-menu { position: relative; }

.lang-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--body);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color .16s ease, box-shadow .16s ease, color .16s ease;
}
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary:hover { color: var(--ink); border-color: var(--line-strong); }
.lang-menu[open] > summary {
  color: var(--ink);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.lang-menu .icon--sm { width: 15px; height: 15px; }
.lang-menu .icon--chevron { width: 13px; height: 13px; transition: transform .18s ease; }
.lang-menu[open] .icon--chevron { transform: rotate(180deg); }

.lang-menu__list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 90;
  min-width: 174px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 22px 48px -24px rgba(15, 23, 42, .38);
}
.lang-menu__list a {
  display: block;
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--body);
  font-size: .86rem;
  white-space: nowrap;
}
.lang-menu__list a:hover { background: var(--bg-tint); color: var(--ink); }
.lang-menu__list a[aria-current="true"] {
  background: var(--brand-soft);
  color: var(--brand-600);
  font-weight: 600;
}

/* ------------------------------------------------- mobile section drawer
   The desktop nav is hidden below 920px, which used to leave phones with no
   way to jump between sections. This drawer reuses the same link list and
   stays out of the tab order on wide screens (display:none on the wrapper). */

.nav-drawer { display: none; position: relative; }

.nav-drawer > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink-soft);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  list-style: none;
  user-select: none;
  touch-action: manipulation;
}
.nav-drawer > summary::-webkit-details-marker { display: none; }
.nav-drawer > summary:hover { border-color: var(--line-strong); }
.nav-drawer[open] > summary {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.nav-drawer .icon { width: 18px; height: 18px; }

.nav-drawer__list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 90;
  display: grid;
  min-width: 236px;
  max-height: min(70vh, 420px);
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 22px 48px -24px rgba(15, 23, 42, .38);
  overscroll-behavior: contain;
}
.nav-drawer__list a {
  display: block;
  padding: 11px 12px;
  border-radius: 8px;
  color: var(--body);
  font-size: .9rem;
  font-weight: 500;
}
.nav-drawer__list a:hover,
.nav-drawer__list a:focus-visible { background: var(--bg-tint); color: var(--ink); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.btn--primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  box-shadow: 0 12px 26px -14px rgba(79, 70, 229, .85);
}
.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 30px -14px rgba(79, 70, 229, .9);
}
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: #fff;
  border-color: var(--line);
  color: var(--ink-soft);
}
.btn--ghost:hover { border-color: var(--line-strong); background: #fbfcff; }

.btn--invert {
  background: #fff;
  color: var(--brand-600);
  box-shadow: 0 16px 32px -18px rgba(0, 0, 0, .5);
}
.btn--invert:hover { transform: translateY(-1px); background: #f5f3ff; }

.btn--sm { padding: 10px 16px; font-size: .88rem; }
.btn--lg { padding: 15px 26px; font-size: 1rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

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

.hero {
  position: relative;
  padding: 60px 0 30px;
  overflow: hidden;
}

.hero__glow {
  position: absolute;
  inset: -260px -160px auto auto;
  width: 720px;
  height: 720px;
  background:
    radial-gradient(circle at 30% 30%, rgba(99, 102, 241, .22), transparent 62%),
    radial-gradient(circle at 70% 60%, rgba(168, 85, 247, .16), transparent 60%);
  filter: blur(10px);
  pointer-events: none;
}
.hero__glow::after {
  content: "";
  position: absolute;
  left: -640px;
  top: 260px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(56, 189, 248, .13), transparent 65%);
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 56px;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
}
.eyebrow__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, .14);
}

h1 {
  margin: 18px 0 0;
  font-size: clamp(2.05rem, 4.5vw, 3.35rem);
  line-height: 1.06;
  letter-spacing: -.038em;
  font-weight: 800;
}
.h1__tail { white-space: nowrap; }

/* CJK glyphs are wider than Latin at the same size; drop the display size
   slightly so the localized headline still fits the copy column. */
html[lang="zh-Hans"] h1,
html[lang="ja"] h1,
html[lang="ko"] h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -.025em;
}
html[lang="zh-Hans"] h1 { font-size: clamp(2rem, 3.8vw, 2.85rem); }

.h1__accent {
  background: linear-gradient(95deg, var(--brand) 5%, var(--brand-2) 70%, #db2777 120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  margin-top: 20px;
  max-width: 47ch;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--body);
}

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 24px;
  font-size: .9rem;
  color: var(--ink-soft);
}
.trust li { display: inline-flex; align-items: center; gap: 7px; }
.trust .icon { width: 17px; height: 17px; stroke-width: 2.2; }

.hero__stat {
  margin-top: 22px;
  font-size: .88rem;
  color: var(--muted);
}
.hero__stat strong { color: var(--ink); }

/* --------------------------------------------------------------- tool card */

.tool-card {
  position: relative;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.tool-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.tool-card__title { font-size: 1.06rem; letter-spacing: -.02em; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.badge--free { background: var(--ok-soft); color: var(--ok); }

.format-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.format-row__label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.format-switch {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: #f1f5f9;
  border-radius: 9px;
}
.format-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.format-switch label {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--body);
  cursor: pointer;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.format-switch label:hover { color: var(--ink); }
.format-switch input:checked + label {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}
.format-switch input:focus-visible + label {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.format-hint {
  margin-bottom: 12px;
  font-size: .76rem;
  color: var(--muted);
}

.turnstile-slot {
  min-height: 65px;
  margin-bottom: 12px;
}
.turnstile-slot iframe { max-width: 100%; }

.turnstile-fallback {
  margin: 0;
  padding: 18px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: #fbfcff;
  color: var(--muted);
  font-size: .82rem;
  text-align: center;
}

.verify-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: .82rem;
  line-height: 1.5;
}

.dropzone {
  display: block;
  padding: 30px 20px 26px;
  text-align: center;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fbfcff, #fff);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.dropzone:hover,
.dropzone:focus-visible {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.dropzone.is-dragging {
  border-color: var(--brand);
  background: #e8ecff;
  transform: scale(1.008);
}
.dropzone.is-busy { pointer-events: none; opacity: .7; }

.dropzone__icon {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  transition: transform .2s ease;
}
.dropzone__icon .icon { width: 23px; height: 23px; }
.dropzone:hover .dropzone__icon { transform: translateY(-2px); }

.dropzone__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.dropzone__hint {
  margin-top: 5px;
  font-size: .84rem;
  color: var(--muted);
}

.tool-card__note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: .78rem;
  color: var(--muted);
}

.tool-card__error {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--err-soft);
  border: 1px solid #fecaca;
  color: var(--err);
  font-size: .85rem;
  line-height: 1.5;
}

.noscript {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: .85rem;
}

/* ------------------------------------------------------------------- queue */

.queue {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.queue__list {
  display: grid;
  gap: 9px;
  max-height: 306px;
  overflow-y: auto;
  padding-right: 2px;
}

.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  align-items: start;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  animation: rowIn .22s ease both;
}
@keyframes rowIn {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}
.row.is-error { background: var(--err-soft); border-color: #fecaca; }
.row.is-done { background: #fcfdff; }

.row__main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.row__text { min-width: 0; flex: 1 1 auto; }

.row__thumb {
  flex: none;
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--brand-soft);
}
.row__thumb img { width: 100%; height: 100%; object-fit: cover; }

.row__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  grid-row: 2;
  grid-column: 1;
}
/* 主按钮吃掉剩余宽度，次要的 View 保持自适应 */
.row__actions .row__action--primary { flex: 1 1 auto; }
.row__name {
  font-size: .87rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  font-size: .77rem;
  color: var(--muted);
}
.row__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.row__status--ok { color: var(--ok); }
.row__status--err { color: var(--err); }

.row__error {
  grid-column: 1 / -1;
  font-size: .78rem;
  color: var(--err);
  line-height: 1.45;
}

.row__bar {
  grid-column: 1 / -1;
  height: 3px;
  border-radius: 999px;
  background: #eef2ff;
  overflow: hidden;
}
.row__bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transition: width .25s ease;
}
.row.is-done .row__bar { display: none; }

.row__action {
  grid-row: 2;
  grid-column: 1;
  justify-self: start;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.row__action:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.row__action .icon { width: 14px; height: 14px; }
.row__action--primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color: transparent;
  color: #fff;
}
.row__action--primary:hover { color: #fff; background: var(--brand-600); }

.queue__note {
  margin-top: 10px;
  font-size: .74rem;
  color: var(--muted);
}

.queue__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.queue__summary { font-size: .78rem; color: var(--muted); }

/* ------------------------------------------------------------------ compat */

.compat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.compat__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.compat__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: .89rem;
  color: var(--ink-soft);
}
.compat__list li { position: relative; padding-left: 14px; }
.compat__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .58em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #c7d2fe;
}

/* ---------------------------------------------------------------- sections */

.section { padding: clamp(56px, 7vw, 92px) 0; }
.section--tint {
  background: var(--bg-tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* answer-first block: a self-contained definition that search engines and
   LLM crawlers can quote without the rest of the page */
.section--answer { padding: clamp(36px, 4.6vw, 58px) 0; border-top: 1px solid var(--line); }
.answer { max-width: 820px; }
.answer h2 {
  margin-top: 10px;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  letter-spacing: -.03em;
}
.answer p:not(.eyebrow) {
  margin-top: 14px;
  font-size: .98rem;
  line-height: 1.78;
  color: var(--body);
}

.section__head { max-width: 700px; margin-bottom: 44px; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .eyebrow { justify-content: center; }
.section__head h2 {
  margin-top: 12px;
  font-size: clamp(1.6rem, 2.9vw, 2.15rem);
  letter-spacing: -.03em;
}
.section__lede {
  margin-top: 14px;
  font-size: 1rem;
  line-height: 1.72;
  color: var(--body);
}

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

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.step {
  padding: 26px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.step__num {
  display: block;
  margin-bottom: 14px;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.04em;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.step h3 { font-size: 1.04rem; margin-bottom: 8px; }
.step p { font-size: .93rem; line-height: 1.68; color: var(--body); }

/* ---------------------------------------------------------------- features */

.format-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.format-card {
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.format-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-600);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.format-card h3 {
  font-size: 1rem;
  margin-bottom: 8px;
}
.format-card p {
  font-size: .91rem;
  line-height: 1.68;
  color: var(--body);
}
.format-card__use {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: .84rem !important;
  color: var(--muted) !important;
}
.format-card__use strong { color: var(--ink-soft); }

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.feature {
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: #dbe1ff;
}
.feature__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
}
.feature h3 { font-size: 1rem; margin-bottom: 6px; }
.feature p { font-size: .91rem; line-height: 1.66; color: var(--body); }

/* ------------------------------------------------------------ privacy band */

.privacy-band {
  background:
    radial-gradient(900px 380px at 85% -10%, rgba(124, 58, 237, .32), transparent 65%),
    #0b1220;
  color: #cbd5e1;
}
.privacy-band__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 44px;
  align-items: center;
}
.privacy-band h2 {
  color: #fff;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  letter-spacing: -.03em;
}
.privacy-band p {
  margin-top: 14px;
  font-size: .98rem;
  line-height: 1.75;
  color: #a7b3c9;
}
.privacy-band strong { color: #fff; }

.privacy-band__list { display: grid; gap: 14px; }
.privacy-band__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .94rem;
  color: #d7dee9;
}
.privacy-band__list .icon { color: #a5b4fc; margin-top: 3px; }

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

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.compare {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: .93rem;
}
.compare th,
.compare td {
  padding: 15px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.compare thead th {
  background: #f8fafc;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--line);
}
.compare tbody th {
  width: 24%;
  font-weight: 600;
  color: var(--ink);
  font-size: .9rem;
}
.compare td { color: var(--body); line-height: 1.6; }
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody tr:hover td { background: #fcfdff; }

.prose { max-width: 780px; margin-top: 40px; }
.prose h3 {
  font-size: 1.05rem;
  margin: 26px 0 8px;
}
.prose h3:first-child { margin-top: 0; }
.prose p { font-size: .96rem; line-height: 1.78; color: var(--body); }

/* --------------------------------------------------------------------- faq */

.faq { max-width: 820px; margin: 0 auto; }

.faq__item {
  margin-bottom: 10px;
  padding: 0 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.faq__item[open] {
  border-color: #dbe1ff;
  box-shadow: var(--shadow-sm);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-size: .98rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--brand); }

.faq__chevron {
  width: 18px; height: 18px;
  color: var(--muted);
  transition: transform .22s ease, color .18s ease;
}
.faq__item[open] .faq__chevron { transform: rotate(180deg); color: var(--brand); }

.faq__a { padding-bottom: 20px; }
.faq__a p {
  font-size: .93rem;
  line-height: 1.75;
  color: var(--body);
}

/* ---------------------------------------------------------------- cta band */

.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(30px, 4.6vw, 50px);
  border-radius: 26px;
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(255, 255, 255, .18), transparent 60%),
    linear-gradient(120deg, #4338ca, #6d28d9 55%, #7c3aed);
  box-shadow: var(--shadow-lg);
}
.cta-band h2 {
  color: #fff;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  letter-spacing: -.03em;
}
.cta-band p {
  margin-top: 8px;
  max-width: 46ch;
  font-size: .96rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .82);
}

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

.site-footer {
  padding: 58px 0 calc(26px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: #fff;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 32px;
}

.footer-brand__desc {
  margin-top: 14px;
  max-width: 36ch;
  font-size: .89rem;
  line-height: 1.68;
  color: var(--muted);
}
.footer-brand__contact {
  margin-top: 10px;
  font-size: .86rem;
  font-weight: 600;
}
.footer-brand__contact a { color: var(--brand-600); }
.footer-brand__contact a:hover { text-decoration: underline; }
.footer-brand__support {
  margin-top: 8px;
  max-width: 40ch;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--muted);
}

.footer-col__title {
  margin-bottom: 14px;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink);
}
.footer-col ul { display: grid; gap: 9px; }
.footer-col li { font-size: .89rem; color: var(--muted); }
.footer-col a { color: var(--body); transition: color .16s ease; }
.footer-col a:hover { color: var(--brand); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: .8rem;
  color: var(--muted);
}
.footer-bottom__left { display: grid; gap: 4px; }
.footer-copyright { color: var(--ink-soft); font-weight: 600; }
.footer-bottom__meta { color: var(--muted); }

.footer-langs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
.footer-langs__label { color: var(--muted); }
.footer-langs a { color: var(--body); }
.footer-langs a:hover { color: var(--brand); }
.footer-langs a[aria-current="true"] {
  color: var(--brand-600);
  font-weight: 600;
}

/* ------------------------------------------------------------------- legal */

.legal { padding: 46px 0 76px; }
.legal__inner { max-width: 760px; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-size: .82rem;
  color: var(--muted);
}
.breadcrumb a { color: var(--brand); }
.breadcrumb a:hover { text-decoration: underline; }

.legal__title {
  font-size: clamp(1.85rem, 3.4vw, 2.4rem);
  letter-spacing: -.032em;
}
.legal__updated {
  margin-top: 10px;
  font-size: .83rem;
  color: var(--muted);
}

.legal__body { margin-top: 34px; }
.legal__section { margin-bottom: 30px; }
.legal__section h2 {
  margin-bottom: 10px;
  font-size: 1.12rem;
  letter-spacing: -.02em;
}
.legal__section p {
  margin-bottom: 12px;
  font-size: .96rem;
  line-height: 1.78;
  color: var(--body);
}

.legal__contact {
  margin-top: 36px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-tint);
}
.legal__contact h2 {
  margin-bottom: 8px;
  font-size: 1.12rem;
  letter-spacing: -.02em;
}
.legal__contact p {
  margin-bottom: 8px;
  font-size: .95rem;
  line-height: 1.72;
  color: var(--body);
}
.legal__contact-email a {
  font-weight: 700;
  color: var(--brand);
  word-break: break-all;
}
.legal__contact-email a:hover { text-decoration: underline; }

.legal__back {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.legal__back a {
  font-size: .92rem;
  font-weight: 600;
  color: var(--brand);
}
.legal__back a:hover { text-decoration: underline; }

/* related pages on the legal pages: every chip is a contextual internal link
   back to a specific home section, so crawlers see a two-way relationship */
.legal__related {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.legal__related h2 {
  margin-bottom: 14px;
  font-size: 1.02rem;
  letter-spacing: -.02em;
}
.legal__related-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.legal__related-list a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--body);
  font-size: .87rem;
  font-weight: 500;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
  touch-action: manipulation;
}
.legal__related-list a:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-600);
}

.footer-bottom__meta a { color: var(--body); }
.footer-bottom__meta a:hover { color: var(--brand); }

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

@media (max-width: 1024px) {
  .hero__grid { gap: 40px; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .format-cards { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1.5fr repeat(3, 1fr); gap: 24px; }
}

@media (max-width: 920px) {
  .site-nav { display: none; }
  .nav-drawer { display: block; }
  .hero { padding-top: 40px; }
  .hero__grid { grid-template-columns: 1fr; }
  .lede { max-width: 60ch; }
  .steps { grid-template-columns: 1fr; gap: 14px; }
  .step { display: grid; grid-template-columns: 62px 1fr; column-gap: 4px; }
  .step__num { grid-row: span 2; margin: 0; font-size: 1.5rem; padding-top: 2px; }
  .step h3 { margin-bottom: 4px; }
  .privacy-band__grid { grid-template-columns: 1fr; gap: 28px; }
  .cta-band { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
  .container { padding: 0 18px; }
  .header-inner { height: 62px; gap: 10px; }
  .header-cta { padding: 9px 12px; }
  .header-cta span { font-size: .8rem; }
  .header-actions { gap: 7px; }
  .nav-drawer__label { display: none; }
  .nav-drawer > summary { padding: 0; width: 38px; }
  .brand__mark { width: 32px; height: 32px; }
  .brand__suffix { display: none; }
  .lang-menu > summary { padding: 7px 7px; }
  .lang-menu__list { min-width: 160px; }
  .hero { padding: 30px 0 10px; }
  h1 { font-size: clamp(1.85rem, 8vw, 2.3rem); }
  .lede { font-size: 1rem; }
  .trust { gap: 8px 16px; font-size: .86rem; }
  .tool-card { padding: 16px; border-radius: 18px; }
  .dropzone { padding: 24px 14px 22px; }
  .features { grid-template-columns: 1fr; }
  .feature { padding: 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { align-items: flex-start; }
  .queue__footer { flex-direction: column; align-items: stretch; }
  .queue__summary { text-align: center; }
  .compat { margin-top: 32px; }
  .hero__glow { opacity: .62; }

  /* 对比表在窄屏改成堆叠卡片，避免横向滚动藏掉 JPG 列 */
  .table-wrap { overflow: visible; }
  .compare { min-width: 0; }
  .compare thead { display: none; }
  .compare tbody tr {
    display: block;
    padding: 15px 16px;
    border-bottom: 1px solid var(--line);
  }
  .compare tbody tr:last-child { border-bottom: 0; }
  .compare tbody th {
    width: auto;
    padding: 0 0 10px;
    border: 0;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .compare tbody td {
    display: block;
    padding: 0 0 10px;
    border: 0;
    font-size: .9rem;
  }
  .compare tbody td:last-child { padding-bottom: 0; }
  .compare tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .compare th, .compare td { padding: 12px 14px; }
  .cta-band { padding: 26px 22px; }
  .btn--lg { width: 100%; }
  .row__actions { width: 100%; }
  .row__bar { order: 4; }
}

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

/* iPhone SE / small Android: one column everywhere, no cramped two-up grid */
@media (max-width: 400px) {
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  .brand__name { font-size: .94rem; }
  .header-cta { padding: 8px 10px; }
  .header-cta span { font-size: .76rem; }
  /* 320px 宽度下把图标让给文字，保证 CTA 文案完整可见 */
  .header-cta .icon,
  .lang-menu .icon--chevron { display: none; }
  .trust { display: grid; gap: 7px; }
  .format-row { flex-wrap: wrap; }
  .answer h2 { font-size: 1.4rem; }
}