/* ═══════════════════════════════════════════════════════════════
   myconverterPRO — landing styles

   Single dark theme, deliberately. Every competitor on this SERP is
   white, so a dark page is the cheapest visual differentiator we have,
   and the ad creatives are built to match it. There is no light mode
   and no prefers-color-scheme branch — the page commits.
   ═══════════════════════════════════════════════════════════════ */

/* Inter, variable, latin subset, self-hosted. No CDN request. (AND-74) */
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-latin.woff2") format("woff2");
  font-weight:400 800; font-style:normal; font-display:swap;
}

:root{
  --bg:#0D1119;
  --bg-soft:#131926;
  --bg-sunk:#1B2331;
  --band:#070A10;
  --band-2:#141B27;

  /* Raised surfaces: cards, menus, drawer, inputs. Separate from --bg so they
     lift off the page instead of sinking below it, which is what a light
     theme's greys would have done here. See AND-76. */
  --surface:#161D2A;
  --hdr-bg:rgba(13,17,25,.88);

  --ink:#E9EEF7;
  --ink-2:#A5B0C2;
  --ink-3:#7C889B;
  --on-band:#E9EEF7;
  --on-band-2:#94A1B4;

  --line:#232C3B;
  --line-2:#303B4C;

  --accent:#5C93FF;
  --accent-dark:#7BA9FF;   /* hover — brighter, not deeper, on a dark ground */
  --accent-soft:#17253C;
  --accent-ring:rgba(92,147,255,.45);
  /* Text and icons sitting ON the accent. A token because a light accent
     (gold, lime) cannot carry white text at readable contrast. */
  --accent-ink:#0B1220;

  --ok:#2FBE88;
  --ok-soft:#10291F;
  --bad:#F0836A;
  --bad-soft:#33140E;

  --r-sm:6px; --r:10px; --r-lg:14px; --r-xl:20px;

  --wide:1200px;
  --narrow:760px;

  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,"Liberation Mono",monospace;

  --shadow-sm:0 1px 2px rgba(0,0,0,.40),0 1px 3px rgba(0,0,0,.30);
  --shadow-md:0 4px 8px -2px rgba(0,0,0,.45),0 2px 4px -2px rgba(0,0,0,.30);
  --shadow-lg:0 12px 16px -4px rgba(0,0,0,.45),0 4px 6px -2px rgba(0,0,0,.30);
  --shadow-pop:0 20px 24px -4px rgba(0,0,0,.50),0 8px 8px -4px rgba(0,0,0,.30);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.wrap{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:20px}
.narrow{width:100%;max-width:var(--narrow);margin-inline:auto;padding-inline:20px}
.i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.i-f{fill:currentColor;stroke:none}

/* ── pills ───────────────────────────────────────────────────── */
.soon{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:99px;
  background:var(--bg-sunk);color:var(--ink-3);
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  vertical-align:1px;
}
.live{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:99px;
  background:var(--ok-soft);color:var(--ok);
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  vertical-align:1px;
}

/* ═══ header ═══════════════════════════════════════════════════ */
.hdr{
  position:sticky;top:0;z-index:60;
  background:var(--hdr-bg);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.hdr-in{display:flex;align-items:center;gap:8px;height:64px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-mark{width:30px;height:30px;flex:none;color:var(--accent);display:grid;place-items:center}
.brand-mark svg{width:30px;height:30px}
.brand b{font-weight:800}
.brand em{font-style:normal;font-weight:800;color:var(--accent)}

.nav{display:flex;align-items:center;gap:2px;margin-left:14px}
.nav-btn{
  display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 11px;
  border-radius:var(--r-sm);color:var(--ink-2);font-size:14.5px;font-weight:600;
}
.nav-btn:hover{background:var(--bg-soft);color:var(--ink);text-decoration:none}
.nav-btn .chev{width:12px;height:12px;transition:transform .18s ease}
.nav-item{position:relative}
.nav-item.open>.nav-btn{background:var(--bg-soft);color:var(--ink)}
.nav-item.open .chev{transform:rotate(180deg)}

.mega{
  display:none;position:absolute;top:calc(100% + 8px);left:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-pop);padding:16px;z-index:70;
}
.nav-item.open .mega{display:grid}
.mega--3{grid-template-columns:repeat(3,minmax(170px,1fr));gap:8px 22px;width:max-content;max-width:min(92vw,640px)}
.mega--1{grid-template-columns:minmax(190px,1fr);gap:2px;width:max-content}
.mega h4{
  grid-column:1/-1;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin:2px 0 4px;
}
.mega-col h4{grid-column:auto}
.mega-col{display:flex;flex-direction:column;gap:1px}
.mega a{
  display:block;padding:7px 9px;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:14px;font-weight:500;
}
.mega a:hover{background:var(--bg-soft);color:var(--ink);text-decoration:none}
.mega a[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:700}

.hdr-spring{flex:1}
.hdr-actions{display:flex;align-items:center;gap:6px}
.btn-ghost{
  display:inline-flex;align-items:center;height:38px;padding:0 13px;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:14.5px;font-weight:600;
}
.btn-ghost:hover{background:var(--bg-soft);color:var(--ink);text-decoration:none}
.btn-solid{
  display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;border-radius:var(--r-sm);
  background:var(--accent);color:var(--accent-ink);font-size:14.5px;font-weight:650;
  box-shadow:var(--shadow-sm);
}
.btn-solid:hover{background:var(--accent-dark);text-decoration:none}

.burger{display:none;width:40px;height:40px;border-radius:var(--r-sm);place-items:center;color:var(--ink)}
.burger:hover{background:var(--bg-soft)}
.burger .i{width:20px;height:20px;stroke-width:2}

/* mobile drawer */
.scrim{
  display:none;position:fixed;inset:0;z-index:80;
  background:rgba(11,18,28,.45);backdrop-filter:blur(2px);
}
.scrim.on{display:block}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(88vw,360px);z-index:90;
  background:var(--surface);transform:translateX(100%);transition:transform .22s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow-y:auto;
}
.drawer.on{transform:translateX(0)}
.drawer-top{
  display:flex;align-items:center;gap:8px;padding:14px 16px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);
}
.drawer-top .hdr-spring{flex:1}
.drawer-body{padding:10px 12px 24px}
.acc-btn{
  display:flex;align-items:center;gap:8px;width:100%;padding:12px 10px;
  border-radius:var(--r);font-size:15px;font-weight:650;color:var(--ink);text-align:left;
}
.acc-btn:hover{background:var(--bg-soft)}
.acc-btn .chev{width:14px;height:14px;margin-left:auto;color:var(--ink-3);transition:transform .18s ease}
.acc.open .acc-btn .chev{transform:rotate(180deg)}
.acc-panel{display:none;padding:2px 0 8px 10px;border-left:2px solid var(--line);margin:0 0 4px 14px}
.acc.open .acc-panel{display:block}
.acc-panel a{display:block;padding:9px 10px;border-radius:var(--r-sm);color:var(--ink-2);font-size:14.5px;font-weight:500}
.acc-panel a:hover{background:var(--bg-soft);color:var(--ink);text-decoration:none}
.acc-panel a[aria-current="page"]{color:var(--accent);font-weight:700}
.drawer-cta{display:flex;flex-direction:column;gap:8px;padding:14px 10px 0;margin-top:8px;border-top:1px solid var(--line)}
.drawer-cta .btn-solid,.drawer-cta .btn-ghost{height:44px;justify-content:center;border:1px solid var(--line)}
.drawer-cta .btn-solid{border-color:transparent}

/* ═══ hero ═════════════════════════════════════════════════════ */
.hero{padding:52px 0 8px;text-align:center}
.hero h1{
  font-size:clamp(30px,5.2vw,48px);font-weight:800;line-height:1.1;letter-spacing:-.025em;
  text-wrap:balance;
}
.hero p{
  margin:14px auto 0;max-width:52ch;color:var(--ink-2);
  font-size:clamp(16px,2.2vw,19px);font-weight:400;text-wrap:pretty;
}

/* ═══ converter ════════════════════════════════════════════════ */
.conv{padding:28px 0 8px}
.dropzone{
  position:relative;
  border:2px dashed var(--line-2);border-radius:var(--r-xl);
  background:var(--bg-soft);
  padding:40px 24px;text-align:center;
  transition:border-color .16s ease,background .16s ease;
}
.dropzone.drag{border-color:var(--accent);background:var(--accent-soft)}
.dropzone.unsupported{border-style:solid;border-color:var(--line-2);background:var(--bg-sunk)}
.dropzone.unsupported > .dz-icon,
.dropzone.unsupported > .choose-group,
.dropzone.unsupported > .dz-hint,
.dropzone.unsupported > .dz-terms{display:none}
.dz-blocked b{display:block;font-size:16px;font-weight:650;margin-bottom:6px}
.dz-blocked p{margin:0 auto;max-width:46ch;color:var(--ink-3);font-size:14px;line-height:1.55}
.dz-icon{
  width:52px;height:52px;margin:0 auto 16px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  display:grid;place-items:center;color:var(--accent);
}
.dz-icon .i{width:24px;height:24px;stroke-width:1.8}

.choose-group{display:inline-flex;position:relative;vertical-align:top}
.btn-choose{
  display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 26px;
  border-radius:var(--r) 0 0 var(--r);
  background:var(--accent);color:var(--accent-ink);font-size:16.5px;font-weight:700;letter-spacing:-.01em;
  box-shadow:var(--shadow-md);
}
.btn-choose:hover{background:var(--accent-dark)}
.btn-choose .i{width:19px;height:19px;stroke-width:2}
.btn-split{
  width:46px;height:52px;border-radius:0 var(--r) var(--r) 0;
  background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;
  box-shadow:var(--shadow-md);border-left:1px solid rgba(255,255,255,.28);
}
.btn-split:hover{background:var(--accent-dark)}
.btn-split .i{width:15px;height:15px;stroke-width:2.2;transition:transform .18s ease}
.choose-group.open .btn-split .i{transform:rotate(180deg)}

/* Without the split half the button would shrink by 46px and leave a hole in a
   layout balanced around the pair. It keeps the footprint and takes the full
   radius back. AND-96. */
.choose-group--solo{width:auto}
.choose-group--solo .btn-choose{
  border-radius:var(--r);
  padding-left:49px;
  padding-right:49px;
  justify-content:center;
}
@media (max-width:760px){
  .choose-group--solo .btn-choose{padding-left:16px;padding-right:16px}
}

.src-menu{
  display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:40;
  min-width:238px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:6px;
  text-align:left;
}
.choose-group.open .src-menu{display:block}
.src-menu button{
  display:flex;align-items:center;gap:10px;width:100%;padding:10px;border-radius:var(--r-sm);
  font-size:14.5px;font-weight:550;color:var(--ink-2);
}
.src-menu button:hover{background:var(--bg-soft);color:var(--ink)}
.src-menu .i{color:var(--ink-3)}
.src-menu hr{border:0;border-top:1px solid var(--line);margin:5px 2px}

.dz-hint{margin-top:16px;color:var(--ink-3);font-size:13.5px}
.dz-hint b{color:var(--ink-2);font-weight:650}
.dz-terms{margin:22px auto 0;max-width:56ch;color:var(--ink-3);font-size:12.5px;line-height:1.55}

/* file queue */
.queue{display:none;flex-direction:column;gap:10px;margin-top:18px}
.queue.on{display:flex}
.frow{
  display:flex;align-items:center;gap:13px;
  padding:13px 14px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--shadow-sm);
}
.fthumb{
  width:40px;height:40px;flex:none;border-radius:9px;background:var(--accent-soft);
  display:grid;place-items:center;color:var(--accent);
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.02em;
}
.fmeta{flex:1;min-width:0}
.fname{
  font-size:14.5px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fsub{
  display:flex;align-items:center;gap:7px;margin-top:3px;
  font-family:var(--mono);font-size:11.5px;color:var(--ink-3);
}
/* Indeterminate, deliberately. libheif reports no progress, so any percentage
   here would be invented — and a bar that sits at 90%% teaches people the
   interface lies. This says "working" and nothing more, which is all we know. */
.fnote{margin-top:3px;font-size:11.5px;line-height:1.4;color:var(--ink-3)}
.fbar{height:4px;border-radius:99px;background:var(--bg-sunk);overflow:hidden;margin-top:7px;display:none}
.frow.busy .fbar{display:block}
.fbar span{
  display:block;height:100%;width:40%;border-radius:99px;background:var(--accent);
  animation:slide 1.15s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes slide{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(250%)}
}
@media (prefers-reduced-motion:reduce){
  .fbar span{animation:none;width:100%;opacity:.45}
}
.fstate{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 8px;border-radius:99px;background:var(--bg-sunk);color:var(--ink-3);
}
.frow.done .fstate{background:var(--ok-soft);color:var(--ok)}
.frow.failed .fstate{background:var(--bad-soft);color:var(--bad)}
.frow.failed .fsub{color:var(--bad)}
.fx{
  width:32px;height:32px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--ink-3);
}
.fx:hover{background:var(--bg-sunk);color:var(--ink)}
.fdl{
  display:none;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:var(--r-sm);
  background:var(--ok);color:#fff;font-size:13.5px;font-weight:650;
}
.frow.done .fdl{display:inline-flex}
.frow.done .fx{display:none}

.qbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.btn-convert{
  display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 30px;border-radius:var(--r);
  background:var(--accent);color:var(--accent-ink);font-size:16.5px;font-weight:700;box-shadow:var(--shadow-md);
}
.btn-convert:hover{background:var(--accent-dark)}
.btn-convert[disabled]{opacity:.55;cursor:default;box-shadow:none}
.btn-zip{
  display:none;align-items:center;gap:8px;height:52px;padding:0 22px;border-radius:var(--r);
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-size:15px;font-weight:650;
}
.btn-zip:hover{background:var(--bg-soft)}
.btn-zip.on{display:inline-flex}
.btn-quiet{
  display:none;align-items:center;gap:8px;height:52px;padding:0 18px;border-radius:var(--r);
  color:var(--ink-3);font-size:14.5px;font-weight:600;
}
.btn-quiet:hover{background:var(--bg-sunk);color:var(--ink)}
.btn-quiet.on{display:inline-flex}
.fretry{
  display:none;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
  font-size:13.5px;font-weight:650;
}
.fretry:hover{background:var(--bg-sunk)}
.frow.failed .fretry{display:inline-flex}
.qbar .rest{margin-left:auto;color:var(--ink-3);font-size:13.5px}

/* ── ad slots (AND-97) ───────────────────────────────────────────
   The heights are the whole point. An ad that arrives into an
   unreserved space shoves the page down under the reader's cursor,
   which is the single most disliked thing display advertising does —
   and on a converter it can move the download button mid-click.
   Reserve the space up front and nothing ever jumps. */
.adslot{
  display:flex;align-items:center;justify-content:center;
  margin:28px auto 0;
  border-radius:var(--r-lg);
}
.adslot[hidden]{display:none}
.adslot--banner{width:100%;max-width:728px;min-height:90px}
.adslot--rect{width:100%;max-width:336px;min-height:280px}

/* Development only — never rendered on a real host. */
.adslot--placeholder{
  /* outline, not border — a development decoration must not occupy layout.
     A 1px border here added 2px to the reserved height and reintroduced
     exactly the shift these slots exist to prevent. */
  outline:1px dashed var(--line-2);
  outline-offset:-1px;
  background:
    repeating-linear-gradient(45deg,transparent,transparent 9px,var(--bg-soft) 9px,var(--bg-soft) 18px);
}
.adslot-tag{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--ink-3);background:var(--bg);padding:3px 9px;border-radius:99px;
}

@media (max-width:760px){
  .adslot{margin-top:22px}
  /* Mobile leaderboards are 100px tall, not 90 — reserving the desktop
     height would still leave a 10px jump on the devices most likely to
     be converting HEIC in the first place. */
  .adslot--banner{max-width:320px;min-height:100px}
  .adslot--rect{max-width:300px;min-height:250px}
}

/* ── support prompt (AND-98) ─────────────────────────────────────
   Inline, in the flow, never a modal. A dialog over a finished
   conversion blocks the download the visitor actually came for, and
   asking for money by standing in the doorway is how you get neither
   the money nor the goodwill. */
.support{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:16px;padding:18px 20px;
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r-lg);background:var(--surface);
}
.support-body{flex:1;min-width:min(100%,260px)}
.support-body b{display:block;font-size:15px;font-weight:650;margin-bottom:4px}
.support-body p{margin:0;color:var(--ink-2);font-size:13.5px;line-height:1.55}
.support-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.support-give{
  display:inline-flex;align-items:center;height:38px;padding:0 18px;border-radius:var(--r-sm);
  background:var(--accent);color:var(--accent-ink);font-size:14px;font-weight:650;
}
.support-give:hover{background:var(--accent-dark);text-decoration:none}
.support-no{
  height:38px;padding:0 14px;border-radius:var(--r-sm);
  color:var(--ink-3);font-size:14px;font-weight:550;
}
.support-no:hover{background:var(--bg-sunk);color:var(--ink)}
@media (max-width:760px){
  .support{padding:16px}
  .support-actions{width:100%}
  .support-give{flex:1;justify-content:center}
}

/* advanced settings */
.adv{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.adv-btn{
  display:flex;align-items:center;gap:9px;width:100%;padding:15px 18px;
  font-size:15px;font-weight:650;color:var(--ink);text-align:left;
}
.adv-btn:hover{background:var(--bg-soft)}
.adv-btn .chev{width:14px;height:14px;margin-left:auto;color:var(--ink-3);transition:transform .18s ease}
.adv.open .adv-btn .chev{transform:rotate(180deg)}
.adv-panel{display:none;padding:4px 18px 20px;border-top:1px solid var(--line)}
.adv.open .adv-panel{display:block}
.opt{display:flex;align-items:flex-start;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.opt:last-child{border-bottom:0}
/* Statements of fact, not controls — no affordance, so nothing invites a click
   that would do nothing. */
.opt--fact{align-items:flex-start;gap:11px}
.opt--fact .i{width:18px;height:18px;margin-top:2px;color:var(--ok);flex:none}
.opt--fact .opt-txt b{font-weight:600}
.opt-txt{flex:1;min-width:0}
.opt-txt b{display:block;font-size:14.5px;font-weight:650}
.opt-txt span{display:block;margin-top:2px;color:var(--ink-3);font-size:13px;line-height:1.5}
select{
  height:40px;min-width:190px;padding:0 34px 0 12px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-size:14px;font-weight:550;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237B8598' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 6.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:15px;
}
select:hover{border-color:var(--ink-3)}
.sw{position:relative;width:44px;height:26px;flex:none}
.sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:2}
.sw i{
  position:absolute;inset:0;border-radius:99px;background:var(--line-2);transition:background .18s ease;
}
.sw i::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .18s cubic-bezier(.4,0,.2,1);
}
.sw input:checked + i{background:var(--accent)}
.sw input:checked + i::after{transform:translateX(18px)}
.sw input:focus-visible + i{box-shadow:0 0 0 3px var(--accent-ring)}

/* ═══ generic sections ═════════════════════════════════════════ */
section{scroll-margin-top:80px}
.sec{padding:56px 0}
.sec--soft{background:var(--bg-soft);border-block:1px solid var(--line)}
.sec h2{
  font-size:clamp(21px,3vw,26px);font-weight:750;letter-spacing:-.015em;line-height:1.25;
  text-wrap:balance;
}
.sec h3{font-size:17px;font-weight:700;letter-spacing:-.01em}
.lede{margin-top:10px;color:var(--ink-2);max-width:64ch}
.sec p + p{margin-top:14px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.step{
  padding:22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.sec--soft .step{background:var(--surface)}
.step .n{
  width:30px;height:30px;border-radius:9px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:700;margin-bottom:13px;
}
.step h3{margin-bottom:5px}
.step p{color:var(--ink-2);font-size:14.5px;line-height:1.55}

/* feature trio */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px}
.feat .ic{
  width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;margin-bottom:14px;
}
.feat .ic .i{width:21px;height:21px;stroke-width:1.8}
.feat h3{margin-bottom:6px}
.feat p{color:var(--ink-2);font-size:14.5px;line-height:1.6}

/* article / FAQ */
.article{margin-top:8px}
.qa{padding:26px 0;border-bottom:1px solid var(--line)}
.qa:last-child{border-bottom:0}
.qa h3{font-size:19px;font-weight:700;letter-spacing:-.015em;margin-bottom:10px}
.qa p{color:var(--ink-2);font-size:15px}
.spec{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.spec span{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;
  background:var(--bg-sunk);color:var(--ink-2);font-size:12.5px;font-weight:550;
}
.spec span b{color:var(--ink);font-weight:700}

/* link grids */
.grid-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:8px;margin-top:22px}
.grid-links a{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);color:var(--ink-2);font-size:14px;font-weight:550;
}
.grid-links a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none;box-shadow:var(--shadow-sm)}
.grid-links a[aria-current="page"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:700}

/* tools list */
.tools{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 28px;margin-top:20px}
.tools li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink-2)}
.tools .i{margin-top:4px;color:var(--accent)}
.tools b{color:var(--ink);font-weight:650}

/* ═══ trust band ═══════════════════════════════════════════════ */
.band{background:var(--band);color:var(--on-band);padding:60px 0}
.band h2{font-size:clamp(22px,3vw,28px);font-weight:750;letter-spacing:-.02em}
.band p{color:var(--on-band-2);margin-top:12px;max-width:62ch;font-size:15.5px}
.band-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.trust{
  padding:22px;border:1px solid rgba(238,242,248,.14);border-radius:var(--r-lg);
  background:var(--band-2);
}
.trust .ic{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:13px;
  background:rgba(31,94,255,.18);color:#7FA6FF;
}
.trust h3{font-size:15.5px;font-weight:700;margin-bottom:5px}
.trust p{margin:0;color:var(--on-band-2);font-size:13.5px;line-height:1.55}

/* ═══ upgrade CTA ══════════════════════════════════════════════ */
.cta{padding:52px 0}
.cta-box{
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  padding:30px 34px;border-radius:var(--r-xl);
  background:linear-gradient(100deg,var(--accent) 0%,#2E45D4 100%);
  color:#fff;box-shadow:var(--shadow-lg);
}
.cta-box h2{font-size:clamp(19px,2.6vw,24px);font-weight:750;letter-spacing:-.015em;color:#fff}
.cta-box p{margin-top:7px;color:rgba(255,255,255,.85);font-size:15px;max-width:52ch}
.cta-box .grow{flex:1;min-width:min(100%,280px)}
.btn-white{
  display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 24px;border-radius:var(--r);
  /* Sits on the coloured CTA gradient in every scheme, so it stays white. */
  background:#fff;color:var(--accent);font-size:15.5px;font-weight:700;box-shadow:var(--shadow-md);
}
.btn-white:hover{background:#F2F5FF;text-decoration:none}

/* ═══ footer ═══════════════════════════════════════════════════ */
.ftr{background:var(--bg-soft);border-top:1px solid var(--line);padding:52px 0 28px}
.ftr-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:34px 24px}
.ftr-brand p{margin-top:12px;color:var(--ink-3);font-size:13.5px;max-width:30ch;line-height:1.6}
.ftr h4{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:750;margin-bottom:13px}
.ftr li + li{margin-top:8px}
.ftr li a{color:var(--ink-2);font-size:14px;font-weight:500}
.ftr li a:hover{color:var(--accent)}
.ftr-btm{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:40px;padding-top:22px;border-top:1px solid var(--line-2);
}
.ftr-btm p{color:var(--ink-3);font-size:13px}
.ftr-btm .spring{flex:1}
.lang{
  display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);font-size:13.5px;font-weight:550;
}
.lang:hover{background:var(--bg-sunk)}

/* ═══ toast ════════════════════════════════════════════════════ */
.toast{
  position:fixed;left:50%;bottom:26px;z-index:120;
  transform:translate(-50%,140%);
  display:flex;align-items:center;gap:10px;
  padding:13px 18px;border-radius:99px;
  background:var(--band);color:#fff;font-size:14.5px;font-weight:550;
  box-shadow:var(--shadow-pop);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  max-width:calc(100vw - 32px);
}
.toast.on{transform:translate(-50%,0)}
.toast .i{color:#7FA6FF}

/* ═══ responsive ═══════════════════════════════════════════════ */
@media (max-width:1000px){
  .nav,.hdr-actions{display:none}
  .burger{display:grid}
  .ftr-grid{grid-template-columns:repeat(3,1fr)}
  .ftr-brand{grid-column:1/-1}
}
@media (max-width:760px){
  .hdr-in{height:58px}
  .hero{padding:34px 0 4px}
  .sec{padding:40px 0}
  .band{padding:44px 0}
  .cta{padding:36px 0}
  .steps,.trio,.band-grid{grid-template-columns:1fr;gap:14px}
  .tools{grid-template-columns:1fr}
  .dropzone{padding:28px 16px;border-radius:var(--r-lg)}
  .choose-group{width:100%}
  .btn-choose{flex:1;justify-content:center;padding:0 16px;font-size:16px}
  .grid-links{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:7px}
  .cta-box{padding:24px;gap:18px}
  .btn-white{width:100%;justify-content:center}
  .qbar{gap:10px}
  .btn-convert,.btn-zip{width:100%;justify-content:center}
  .qbar .rest{margin-left:0;width:100%;text-align:center}
  .opt{flex-direction:column;gap:10px}
  select{width:100%}
  .ftr{padding:38px 0 24px}
  .ftr-grid{grid-template-columns:repeat(2,1fr);gap:28px 20px}
  .frow{gap:10px;padding:11px}
  .fthumb{width:34px;height:34px}
  .qa{padding:20px 0}
}
@media (max-width:420px){
  .brand{font-size:16px}
  .grid-links{grid-template-columns:1fr 1fr}
  .fdl span{display:none}
  .fdl{padding:0 10px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}