:root{
  --ink:#0f1729;--mute:#667085;--acc:#5b3df0;--acc2:#7c3aed;--acc-d:#4a2fd0;
  --line:#e9ebf4;--bg:#ffffff;--soft:#eef0fe;--green:#12b76a;--radius:18px;
  --shadow:0 20px 55px rgba(40,30,100,.12);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* header */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.18rem;color:var(--ink)}
.brand .logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--acc),var(--acc2));display:grid;place-items:center;color:#fff;font-size:18px;box-shadow:0 6px 16px rgba(91,61,240,.4)}
.nav{display:flex;align-items:center;gap:22px}
.nav a.link{color:var(--mute);font-weight:600;font-size:.96rem}.nav a.link:hover{color:var(--ink);text-decoration:none}
.btn-primary{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;font-weight:700;padding:11px 22px;border-radius:12px;border:0;cursor:pointer;font-size:.96rem;box-shadow:0 8px 22px rgba(91,61,240,.38);display:inline-block}
.btn-primary:hover{text-decoration:none;transform:translateY(-1px)}

/* hero */
.hero{padding:46px 0 8px}
.eyebrow{color:var(--mute);font-weight:800;letter-spacing:.02em;font-size:1rem;margin-bottom:14px}
.hero h1{font-size:3.4rem;line-height:1.05;letter-spacing:-1.5px;font-weight:800;margin:0 0 18px}
.hero h1 .grad{background:linear-gradient(120deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{color:var(--mute);font-size:1.3rem;max-width:560px;margin:0}
@media(max-width:680px){.hero h1{font-size:2.3rem}.hero{padding:38px 0 6px}.hero p.lead{font-size:1.1rem}}

/* upload */
.tool{margin:30px 0 10px}
.drop{border:2.5px dashed #b9aef7;border-radius:22px;background:var(--soft);padding:56px 24px;text-align:center;cursor:pointer;transition:.16s}
.drop:hover,.drop.drag{border-color:var(--acc);background:#e7e9ff;transform:translateY(-1px)}
.drop .icon{width:60px;height:60px;margin:0 auto 16px;display:grid;place-items:center;color:var(--acc)}
.drop .big{font-size:2.2rem;font-weight:800;margin:0 0 10px;letter-spacing:-.5px}
.drop .sub{color:var(--mute);font-size:1.12rem}
@media(max-width:680px){.drop{padding:40px 18px}.drop .big{font-size:1.55rem}.drop .sub{font-size:1rem}}

.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-top:18px}
.status{font-weight:600;color:var(--mute);min-height:22px;text-align:center;margin-bottom:6px}
.bar{height:9px;background:#e7e9ff;border-radius:6px;overflow:hidden;margin:6px 0 4px;display:none}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .2s}
.bar.indet i{width:38%!important;animation:indet 1.1s ease-in-out infinite}
@keyframes indet{0%{margin-left:-40%}100%{margin-left:102%}}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}@media(max-width:640px){.row{grid-template-columns:1fr}}
.pane{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.pane h3{margin:0;padding:11px 14px;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);background:var(--soft);border-bottom:1px solid var(--line)}
.pane .img{padding:12px;display:flex;align-items:center;justify-content:center;min-height:190px}
.checker{background-image:linear-gradient(45deg,#e6e8f5 25%,transparent 25%),linear-gradient(-45deg,#e6e8f5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e6e8f5 75%),linear-gradient(-45deg,transparent 75%,#e6e8f5 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0}
img,canvas{max-width:100%;max-height:420px;display:block;border-radius:8px}
.actions{text-align:center;margin-top:16px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn-hd{background:#fff;border:2px solid var(--acc);color:var(--acc);font-weight:800;padding:12px 22px;border-radius:12px;cursor:pointer;font-size:.96rem}
.btn-hd:hover{background:var(--soft)}.btn-hd:disabled{opacity:.5;cursor:not-allowed}
a.dl{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;font-weight:800;padding:13px 24px;border-radius:12px;box-shadow:0 8px 22px rgba(91,61,240,.38)}
a.dl:hover{text-decoration:none;transform:translateY(-1px)}

/* sections */
section.block{padding:44px 0}
section.block h2{text-align:center;font-size:2.3rem;letter-spacing:-.6px;margin:0 0 10px;font-weight:800}
section.block .subh{text-align:center;color:var(--mute);font-size:1.15rem;margin:0 auto 34px;max-width:560px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}@media(max-width:780px){.grid3{grid-template-columns:1fr}}
.feat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 8px 20px rgba(40,30,100,.05)}
.feat .ic{width:48px;height:48px;border-radius:12px;background:var(--soft);color:var(--acc);display:grid;place-items:center;font-size:22px;margin-bottom:12px}
.feat h3{margin:0 0 6px;font-size:1.12rem}.feat p{margin:0;color:var(--mute);font-size:.96rem}

/* pricing */
.pricing{background:#fff;border-top:1px solid var(--line)}
.toggle{display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:30px}
.toggle .seg{position:relative;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px;display:inline-flex;gap:4px;box-shadow:0 4px 12px rgba(40,30,100,.05)}
.toggle .pill{position:absolute;top:5px;bottom:5px;left:5px;width:80px;background:var(--ink);border-radius:999px;transition:left .26s cubic-bezier(.4,0,.2,1),width .26s cubic-bezier(.4,0,.2,1);z-index:0}
.toggle button{position:relative;z-index:1;border:0;background:none;padding:9px 20px;border-radius:999px;font-weight:700;color:var(--mute);cursor:pointer;font-size:.95rem;transition:color .2s}
.toggle button.on{color:#fff}
.toggle .save{color:var(--acc);font-weight:800;font-size:.85rem;align-self:center;padding:0 6px}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;align-items:start}@media(max-width:980px){.plans{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.plans{grid-template-columns:1fr}}
.plan{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.plan.featured{border:2px solid var(--acc);position:relative}
.plan .tag{position:absolute;top:-12px;left:24px;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;font-size:.72rem;font-weight:800;padding:4px 12px;border-radius:999px}
.plan .name{color:var(--mute);font-weight:800;text-transform:uppercase;font-size:.82rem;letter-spacing:.04em}
.plan .price{font-size:2.3rem;font-weight:800;margin:6px 0 2px}.plan .price small{font-size:.95rem;color:var(--mute);font-weight:600}
.plan .billed{color:var(--mute);font-size:.76rem;font-weight:600;margin:0 0 4px;min-height:14px}
.plan ul{list-style:none;padding:0;margin:18px 0 22px}
.plan li{padding:6px 0;color:#344054;display:flex;gap:9px;align-items:flex-start}.plan li:before{content:"✓";color:var(--green);font-weight:800}
.plan .cta{display:block;text-align:center;padding:13px;border-radius:12px;font-weight:800}
.plan .cta.solid{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;box-shadow:0 8px 22px rgba(91,61,240,.38)}
.plan .cta.solid:hover{text-decoration:none;transform:translateY(-1px)}
.plan .cta.ghost{background:var(--soft);color:var(--acc)}.plan .cta.ghost:hover{text-decoration:none}

footer.site{border-top:1px solid var(--line);background:#fff}
footer.site .wrap{padding:26px 22px;color:var(--mute);font-size:.88rem;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
footer.site a{color:var(--mute);font-weight:600}

/* ── batch grid ─────────────────────────── */
.batchpanel{background:#f7f8fc;border:1px solid var(--line);border-radius:20px;padding:18px;margin-top:18px}
.batchhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-weight:700;color:var(--mute);font-size:.95rem}
.batchhead .clear{background:none;border:0;color:#c0392b;font-weight:700;cursor:pointer;font-size:.9rem}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.tile{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;position:relative;display:flex;flex-direction:column}
.tile .timg{height:140px;display:flex;align-items:center;justify-content:center;background-size:18px 18px;background-image:linear-gradient(45deg,#eceef6 25%,transparent 25%),linear-gradient(-45deg,#eceef6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eceef6 75%),linear-gradient(-45deg,transparent 75%,#eceef6 75%);background-position:0 0,0 9px,9px -9px,-9px 0}
.tile .timg img{max-width:100%;max-height:140px;border-radius:0}
.tile .tx{position:absolute;top:7px;right:7px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:9px;width:28px;height:28px;cursor:pointer;font-weight:700;color:#475467;line-height:1}
.tile .foot{padding:8px 10px;font-size:.72rem;color:var(--mute);border-top:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .tact{display:flex;gap:6px;padding:0 10px 10px}
.tile .tact a,.tile .tact button{flex:1;text-align:center;font-size:.74rem;font-weight:700;padding:7px 4px;border-radius:8px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink)}
.tile .tact .hdbtn{background:var(--soft);color:var(--acc);border-color:var(--soft)}
.tile .tact a:hover,.tile .tact button:hover{text-decoration:none;border-color:var(--acc)}
.tile .spin{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:rgba(255,255,255,.88);font-weight:700;color:var(--acc);font-size:.8rem;padding:0 14px;text-align:center}
.tile .tbar{width:82%;height:6px;background:#e7e9ff;border-radius:4px;overflow:hidden}
.tile .tbar i{display:block;height:100%;width:40%;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:4px;animation:indet 1.1s ease-in-out infinite}
.addtile{border:2px dashed #b9aef7;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--acc);min-height:150px;background:var(--soft);font-weight:700;font-size:.9rem}
.addtile:hover{background:#e7e9ff}.addtile .plus{font-size:1.8rem;line-height:1}
.batchactions{margin-top:18px;text-align:center;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:center}
.pronote{margin-top:12px;color:#b54708;background:#fffaeb;border:1px solid #fedf89;border-radius:10px;padding:9px 14px;font-weight:600;font-size:.88rem;display:inline-block}
.pronote a{color:var(--acc);font-weight:800}

/* ── hero before/after slider ─────────────── */
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
@media(max-width:880px){.hero .wrap{grid-template-columns:1fr;gap:26px}.hero .ba{margin:0 auto}}
.ba{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);user-select:none;touch-action:none;width:100%;max-width:540px;aspect-ratio:3/2;background-size:20px 20px;background-image:linear-gradient(45deg,#e9ebf5 25%,transparent 25%),linear-gradient(-45deg,#e9ebf5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9ebf5 75%),linear-gradient(-45deg,transparent 75%,#e9ebf5 75%);background-position:0 0,0 10px,10px -10px,-10px 0;margin-left:auto}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-radius:0}
.ba .before{clip-path:inset(0 calc(100% - var(--x,60%)) 0 0)}
.ba .divider{position:absolute;top:0;bottom:0;left:var(--x,60%);width:3px;background:#fff;box-shadow:0 0 0 1px rgba(40,30,100,.12);pointer-events:none}
.ba .handle{position:absolute;top:50%;left:var(--x,60%);transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(40,30,100,.3);display:grid;place-items:center;color:var(--acc);cursor:ew-resize;font-weight:900;font-size:14px}
.ba .lbl{position:absolute;top:12px;font-size:.66rem;font-weight:800;letter-spacing:.04em;background:rgba(15,23,41,.6);color:#fff;padding:4px 10px;border-radius:999px;pointer-events:none}
.ba .lbl.b{left:12px}.ba .lbl.a{right:12px}

/* ── tool section + whole-page drop veil ───── */
.toolwrap{padding:8px 0 18px}
#dragveil{position:fixed;inset:0;z-index:300;background:rgba(91,61,240,.14);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:5px dashed var(--acc);display:none;align-items:center;justify-content:center;pointer-events:none}
#dragveil.show{display:flex}
#dragveil .msg{background:#fff;padding:22px 36px;border-radius:18px;box-shadow:var(--shadow);font-weight:800;font-size:1.35rem;color:var(--acc);text-align:center}
@media(max-width:680px){#dragveil .msg{font-size:1rem;padding:16px 20px}}

/* ── batch conversion CTA ───────────────── */
.batchactions{flex-direction:column;gap:13px}
.btn-upgrade{display:inline-block;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;font-weight:800;font-size:1.14rem;padding:17px 34px;border-radius:14px;box-shadow:0 12px 30px rgba(91,61,240,.42);cursor:pointer;border:0;line-height:1.2;text-align:center;animation:pulseUp 2.6s ease-in-out infinite}
.btn-upgrade:hover{text-decoration:none;transform:translateY(-2px)}
.btn-upgrade .sm{display:block;font-size:.72rem;font-weight:600;opacity:.92;margin-top:4px}
@keyframes pulseUp{0%,100%{box-shadow:0 12px 30px rgba(91,61,240,.42)}50%{box-shadow:0 14px 42px rgba(91,61,240,.66)}}
.oborow{display:flex;align-items:center;gap:10px;justify-content:center;color:var(--mute);font-size:.84rem;flex-wrap:wrap}
.btn-mini{background:#eef0f4;border:1px solid var(--line);color:#98a1b2;font-weight:600;font-size:.8rem;padding:7px 13px;border-radius:9px;cursor:pointer}
.btn-mini:hover{background:#e4e7ee;color:#475467}

/* ── hero text centered + tighter pricing ── */
.herotext{text-align:center}
.hero p.lead{margin:0 auto}
.block.pricing{padding-top:16px}
.pricing .subh{margin-bottom:16px}
.pricing h2{margin-bottom:6px}

/* ── HD upsell modal ───────────────────── */
.modal{position:fixed;inset:0;z-index:400;background:rgba(24,16,64,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:20px}
.modal.show{display:flex}
.modal-card{background:#fff;border-radius:22px;max-width:500px;width:100%;padding:34px 30px;box-shadow:0 30px 80px rgba(20,15,60,.45);position:relative;text-align:center}
.modal-card h3{font-size:1.55rem;margin:0 0 8px;font-weight:800;letter-spacing:-.4px}
.modal-card .msub{color:var(--mute);margin:0 0 22px;font-size:1rem}
.modal-x{position:absolute;top:14px;right:14px;background:#f1f2f7;border:0;width:32px;height:32px;border-radius:9px;cursor:pointer;font-weight:700;color:#475467}
.hd-options{display:flex;flex-direction:column;gap:10px}
.optbtn{padding:17px 18px;border-radius:12px;font-weight:800;font-size:1.18rem;cursor:pointer;border:0;transition:.15s}
.optbtn b{font-weight:900}
.optbtn.solid{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;box-shadow:0 8px 22px rgba(91,61,240,.38)}
.optbtn.featured{background:var(--ink);color:#fff}
.optbtn.ghost{background:none;color:var(--mute);font-weight:600;font-size:1rem;padding:10px}
.optbtn.solid:hover,.optbtn.featured:hover{transform:translateY(-2px)}
.optbtn.ghost:hover{color:var(--ink)}

/* ── SD vs HD size comparison ───────────── */
.sizecmp{display:flex;align-items:flex-end;justify-content:center;gap:34px;margin:4px 0 22px}
.sz{text-align:center}
.sz .szlbl{font-size:.72rem;font-weight:800;color:var(--mute);margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em}
.sz.hd .szlbl{color:var(--acc)}
.sz img{border-radius:8px;display:inline-block;background:#fff}
.sz.sd img{width:100px;max-height:128px;object-fit:contain}
.sz.hd img{width:188px;max-height:234px;object-fit:contain;box-shadow:0 8px 22px rgba(40,30,100,.18)}
.sz .szdim{font-size:.76rem;color:var(--mute);margin-top:8px;font-weight:700}

.optbtn .sm{display:block;font-size:.78rem;font-weight:600;opacity:.85;margin-top:4px}

/* ── examples 3×3 grid ──────────────────── */
.exgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:6px}
@media(max-width:780px){.exgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.exgrid{grid-template-columns:1fr}}
.exgrid .ba{max-width:none;margin:0;width:100%;aspect-ratio:1/1}
.exgrid .ba .handle{width:34px;height:34px;font-size:12px}
.exgrid .ba .lbl{font-size:.6rem;padding:3px 8px}