/* Rounded Friendly wordmark face (OFL) */
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/fredoka-500.woff2) format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/fredoka-600.woff2) format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/fredoka-700.woff2) format("woff2"); }

/* Dark-only ground. A random accent palette (.pal-*) is layered on per page load. */
:root {
  color-scheme: dark;
  --bg: #0c0e13; --panel: #14181f; --ink: #eef1f6; --muted: #9aa4b2;
  --line: #232a34; --brand: #7c78ff; --brand-ink: #0c0e13; --brand2: #ff8f7a;
  --ok: #35d07f; --bad: #ff6b5e; --drop: #1a1f2e;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 28px 20px 80px; }
.nav { display: flex; justify-content: center; gap: 18px; margin-bottom: 14px; font-size: 14px; flex-wrap: wrap; }
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover { color: var(--brand); }
header { text-align: center; margin-bottom: 18px; }
.logo { display: inline-flex; align-items: center; gap: 16px; font-size: 40px; letter-spacing: -.01em; text-decoration: none; color: inherit; }
.logo .wordmark { font-family: "Fredoka", "Trebuchet MS", system-ui, sans-serif; font-weight: 600; }
.logo .wordmark span { color: var(--brand2); }
.logo-mark {
  width: 88px; height: 88px; flex: none; display: inline-block;
  background-color: var(--brand);
  -webkit-mask: url(../img/sumo.svg) center / contain no-repeat;
  mask: url(../img/sumo.svg) center / contain no-repeat;
}
@media (max-width: 480px) {
  .logo { font-size: 32px; gap: 12px; }
  .logo-mark { width: 64px; height: 64px; }
}
.tag { color: var(--muted); margin-top: 6px; font-size: 16px; }
.privacy {
  display: inline-flex; gap: 7px; align-items: center; margin-top: 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 13px; font-size: 13px; color: var(--muted); box-shadow: var(--shadow);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }

/* landing hero */
.lp-hero { text-align: center; margin-bottom: 4px; }
.lp-hero h1 { font-size: 30px; letter-spacing: -.02em; margin: 4px 0 8px; }
.lp-hero .sub { color: var(--muted); font-size: 17px; margin: 0 auto; max-width: 620px; }

/* tabs */
.tabs { display: flex; gap: 6px; justify-content: center; margin: 6px 0 4px; }
.tab {
  padding: 9px 20px; border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600; transition: .12s;
}
.tab.active { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 22px; box-shadow: var(--shadow); margin-top: 18px;
}
.drop {
  border: 2px dashed var(--line); border-radius: 14px; background: transparent;
  padding: 46px 20px; text-align: center; cursor: pointer; transition: .15s;
}
.drop:hover, .drop.over { border-color: var(--brand); background: var(--drop); }
.drop h2 { margin: 0 0 6px; font-size: 18px; }
.drop p { margin: 0; color: var(--muted); font-size: 14px; }
.hidden { display: none !important; }
.meta { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 18px; }
.meta .k { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.meta .v { font-weight: 600; font-size: 16px; margin-top: 2px; }
.filename { font-weight: 600; margin-bottom: 14px; word-break: break-all; }
label.sec { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; display: block; margin: 4px 0 10px; }
.targets { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.target {
  border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer;
  background: transparent; text-align: left; transition: .12s; color: inherit;
}
.target:hover { border-color: var(--brand); }
.target.active { border-color: var(--brand); background: var(--drop); }
.target b { display: block; font-size: 15px; }
.target small { color: var(--muted); }
.row { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
input[type=number], select {
  padding: 9px 10px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--bg); color: inherit; font: inherit;
}
input[type=number] { width: 90px; }
.opts { margin-top: 16px; display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 14px; }
.go {
  width: 100%; margin-top: 20px; padding: 14px; border: 0; border-radius: 12px;
  background: var(--brand); color: var(--brand-ink); font: inherit; font-weight: 700; font-size: 16px;
  cursor: pointer; transition: .12s; letter-spacing: .01em;
}
.go:hover { filter: brightness(1.05); }
.go:disabled { opacity: .5; cursor: not-allowed; }
.bar { height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.bar > i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .2s; }
.status { margin-top: 12px; font-size: 14px; color: var(--muted); }
.badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 15%, transparent); color: var(--brand); margin-left: 8px; }
.result { text-align: center; }
.result .size { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.verdict { display: inline-block; margin: 8px 0 16px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.verdict.ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.verdict.bad { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); }
.dl { display: inline-block; padding: 13px 26px; border-radius: 12px; background: var(--brand); color: var(--brand-ink); font-weight: 700; text-decoration: none; }
.again { display: block; margin: 14px auto 0; background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; text-decoration: underline; }
.trim { margin-top: 18px; }
.trim .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.trim .head b { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
#vWave { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 6px; min-height: 96px; }
.trim .times { font-size: 13px; color: var(--muted); margin-top: 6px; }
.warn { color: var(--bad); font-size: 13px; margin-top: 10px; }

/* (The old waitlist form's styles lived here. The waitlist was replaced by the
   desktop sales funnel — see .upsell and .buybox further down, and desktop.html.) */

/* landing prose */
.prose { max-width: 680px; margin: 30px auto 0; }
.prose h2 { font-size: 20px; margin: 30px 0 10px; }
.prose p { margin: 10px 0; }
.prose ul { padding-left: 20px; }
.prose li { margin: 6px 0; }
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li { position: relative; padding-left: 40px; margin: 12px 0; }
.steps li::before {
  counter-increment: step; content: counter(step); position: absolute; left: 0; top: -2px;
  width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: var(--brand-ink);
  font-weight: 700; display: grid; place-items: center; font-size: 14px;
}
.faq details { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 10px 0; background: var(--panel); }
.faq summary { font-weight: 600; color: var(--ink); cursor: pointer; }
.faq details p { color: var(--muted); margin: 8px 0 2px; }
.crosslinks { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; }
.crosslinks a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--brand); font-weight: 600; font-size: 14px; background: var(--panel); }
footer { text-align: center; color: var(--muted); font-size: 12px; margin-top: 34px; }
footer a { color: var(--muted); }

/* ===================================================================
   Brand accent palettes (dark-mode variants). One is chosen at random
   per page load by an inline script on each page. Only the accent
   tokens change; the neutral ground above stays dark for all.
   =================================================================== */
.pal-indigo  { --brand: #8395e0; --brand-ink: #0c0e13; --brand2: #ff7c4f; --drop: #1a2140; }
.pal-compress{ --brand: #928bff; --brand-ink: #0c0e13; --brand2: #ff5fae; --drop: #191a3a; }
.pal-dohyo   { --brand: #d67a52; --brand-ink: #17110e; --brand2: #cfa24a; --drop: #2a1f19; }
.pal-bubble  { --brand: #a074ff; --brand-ink: #0c0e13; --brand2: #ff7ba3; --drop: #231a3a; }
.pal-kabocha { --brand: #45a276; --brand-ink: #0c0e13; --brand2: #f08a2e; --drop: #14231b; }
.pal-heavy   { --brand: #e2483f; --brand-ink: #17110e; --brand2: #e6b12e; --drop: #2a1614; }

/* ===================================================================
   App shell — the home page (body.app) is a single, non-scrolling
   screen. Landing pages don't get .app, so they keep normal flow.
   =================================================================== */
/* A centered deck: wordmark + tool on the left; the links panel on the right,
   sized to run from the wordmark (top) to the tool's bottom. */
body.app { height: 100dvh; overflow: hidden; overscroll-behavior: none;
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.deck { display: grid; grid-template-columns: minmax(0, 440px) 300px; gap: 16px; align-items: stretch;
  width: 100%; max-width: 760px; max-height: calc(100dvh - 32px); }
.deck-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.apphead { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 4px 8px 6px; flex: none; text-align: center; }
.apphead .logo { font-size: 34px; gap: 15px; }
.apphead .logo-mark { width: 82px; height: 82px; }
.apphead .chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.apphead .chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.deck-main .stage { flex: 1; min-height: 0; padding-top: 14px; }
.deck-main .stage #sumosquash-app { width: 100%; max-width: 440px; margin: 0 auto; }
/* the links panel fills its cell (which stretches to the tool column's height) and scrolls if taller */
.taskside { position: relative; min-height: 0; }
/* top:20px drops the panel to the wordmark's line (below the taller logo mark);
   bottom:0 keeps it aligned with the tool's bottom */
.taskside #taskbar { position: absolute; top: 20px; right: 0; bottom: 0; left: 0; overflow-y: auto; overflow-x: hidden; }
@media (max-width: 480px) { .apphead .logo { font-size: 28px; } .apphead .logo-mark { width: 64px; height: 64px; } }
@media (max-width: 760px) {
  body.app { overflow: auto; height: auto; min-height: 100dvh; align-items: flex-start; }
  .deck { grid-template-columns: 1fr; max-height: none; }
  .taskside { position: static; min-height: 0; }
  .taskside #taskbar { position: static; max-height: 44vh; }
}

/* ===================================================================
   Compact tool component (applies everywhere the tool is embedded).
   =================================================================== */
.tabs { display: flex; gap: 4px; width: max-content; margin: 0 auto 14px; padding: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.tab { border: 0; background: transparent; color: var(--muted); padding: 7px 20px; border-radius: 9px;
  font: inherit; font-weight: 600; cursor: pointer; transition: .12s; }
.tab.active { background: var(--brand); color: var(--brand-ink); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); margin: 0; }
.drop { border: 2px dashed var(--line); border-radius: 14px; padding: 42px 18px; text-align: center; cursor: pointer; transition: .15s; }
.drop:hover, .drop.over { border-color: var(--brand); background: var(--drop); }
.drop-ic { font-size: 34px; line-height: 1; color: var(--brand); font-weight: 300; }
.drop h2 { margin: 12px 0 4px; font-size: 17px; }
.drop p { margin: 0; color: var(--muted); font-size: 12px; letter-spacing: .03em; }

.filerow { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; }
.filename { font-weight: 600; font-size: 14px; word-break: break-all; }
.metaline { display: flex; gap: 14px; color: var(--muted); font-size: 12.5px; }
.metaline b { font-weight: 600; color: var(--ink); }

.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.target { display: flex; flex-direction: column; gap: 1px; align-items: center; border: 1.5px solid var(--line);
  background: transparent; border-radius: 11px; padding: 9px 4px; font: inherit; font-size: 13px; font-weight: 700;
  color: inherit; cursor: pointer; transition: .12s; line-height: 1.15; }
.target small { font-weight: 500; font-size: 10.5px; color: var(--muted); }
.target:hover { border-color: var(--brand); }
.target.active { border-color: var(--brand); background: var(--drop); color: var(--brand); }
.target.active small { color: var(--brand); }

.minirow { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.minirow input[type=number], .minirow select { padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--bg); color: inherit; font: inherit; font-size: 13px; }
.minirow input[type=number] { width: 78px; }
.minirow select { flex: 1; min-width: 90px; }
.tgl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }

.go { width: 100%; margin-top: 14px; padding: 12px; border: 0; border-radius: 12px; background: var(--brand);
  color: var(--brand-ink); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; transition: .12s; }
.go:hover { filter: brightness(1.06); }

.trim { margin-bottom: 14px; }
#vWave { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 6px; min-height: 72px; }
.trim .times { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--muted); margin-top: 6px; }

.phase { font-weight: 600; font-size: 14px; }
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 20%, transparent); color: var(--brand); margin-left: 8px; }
.bar { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; margin-top: 12px; }
.bar > i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .2s; }
.status { margin-top: 10px; font-size: 12.5px; color: var(--muted); }

.result { text-align: center; }
.result .size { font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.verdict { display: inline-block; margin: 6px 0 14px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.verdict.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.verdict.bad { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.dl { display: inline-block; padding: 11px 26px; border-radius: 12px; background: var(--brand); color: var(--brand-ink); font-weight: 700; text-decoration: none; }
.again { display: block; margin: 12px auto 0; background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; font-size: 13px; text-decoration: underline; }
.warn { color: var(--bad); font-size: 12.5px; margin-top: 10px; }

/* Compact desktop CTA under the tool (home page). Landing pages hide this and
   show the full sales card in the third column instead — see .buybox. */
.upsell { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin: 12px 0 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px; background: var(--panel); }
.upsell .up-t { font-size: 12.5px; color: var(--muted); }
.upsell .up-cta { padding: 8px 14px; border-radius: 9px; background: var(--brand); color: var(--brand-ink);
  font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap; }
.deck-lp .upsell { display: none; }

/* ---- desktop sales card (third column, pinned to the bottom) ---- */
/* Kept deliberately compact: every pixel here comes out of the tab panes above,
   which must not scroll. */
.buybox { flex: none; margin: 6px; padding: 10px 12px 11px; border-radius: 12px;
  background: var(--bg); border: 1px solid var(--line); }
.buybox .bb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.buybox .bb-title { font-weight: 700; font-size: 13.5px; }
.buybox .bb-price { font-weight: 700; font-size: 13.5px; color: var(--brand); white-space: nowrap; }
.buybox .bb-sub { color: var(--muted); font-size: 11px; margin: 1px 0 6px; }
.buybox ul { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 1px; }
.buybox li { font-size: 11.5px; line-height: 1.45; color: var(--muted); padding-left: 14px; position: relative; }
.buybox li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.buybox .bb-cta { display: block; text-align: center; padding: 8px 12px; border-radius: 10px;
  background: var(--brand); color: var(--brand-ink); font-weight: 700; font-size: 13px;
  text-decoration: none; transition: .12s; }
.buybox .bb-cta:hover { filter: brightness(1.08); }
.buybox .bb-fine { text-align: center; color: var(--muted); font-size: 10.5px; margin: 5px 0 0; }

/* empty-state description (what it does + how) — only shown before a file is picked */
.pick-intro { text-align: center; margin-bottom: 14px; }
.pick-intro h2 { margin: 0 0 5px; font-size: 18px; letter-spacing: -.01em; }
.pick-intro p { margin: 0 auto; max-width: 34ch; color: var(--muted); font-size: 13px; line-height: 1.5; }
.drop { padding: 28px 18px; }
.drop-t { margin-top: 10px; font-size: 14px; font-weight: 600; }
.drop-f { margin-top: 4px; color: var(--muted); font-size: 11.5px; letter-spacing: .03em; }
/* small captions above control groups */
.hint { display: block; font-size: 11.5px; color: var(--muted); margin: 14px 0 8px; }

/* ===================================================================
   Task bar — every conversion as an app-style button, stacked in a
   vertical panel. Current page highlighted. Rendered by app.js.
   =================================================================== */
.taskbar { display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
  box-shadow: var(--shadow); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.taskbar::-webkit-scrollbar { width: 6px; }
.taskbar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.task { display: block; width: 100%; text-align: left; white-space: nowrap; padding: 8px 11px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--muted);
  font-size: 13px; font-weight: 600; text-decoration: none; transition: .12s; }
.task:hover { border-color: var(--brand); color: var(--ink); }
/* the current page stays highlighted, including while hovered or focused */
.task.on, .task.on:hover, .task.on:focus {
  background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
/* Video and Image lists side by side */
/* column count is set inline by buildTaskbar() — groups split when too tall */
.task-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: stretch; }
.task-cols .task { padding: 7px 8px; font-size: 12.5px; }
.task-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Columns are TOP aligned. (There used to be a justify-content:flex-end here to
   flush the short Image column with the tall Video one — with more than two
   columns that left the last one floating at the bottom.) */
.task-col > .task { flex: none; }
.task-group { font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); opacity: .6; padding: 4px 4px 3px; }

/* ===================================================================
   Landing pages (body.app.lp) — the SAME deck as the home page, so the
   tool column and the links panel keep identical widths and alignment,
   with a third column for the page's instructions/FAQ to the right of
   the buttons. Unlike home, the page scrolls (the prose is long).
   =================================================================== */
/* Landing pages are a single non-scrolling screen, exactly like home: the deck
   just gains a third column. All three columns share the deck's height. */
body.app.lp { height: 100dvh; overflow: hidden; align-items: center; padding: 12px; }
/* height, not just max-height: the deck must fill the screen, otherwise the grid
   rows collapse to the tool column's content and the side panels end up far
   shorter than the viewport (which is what forced them to scroll internally). */
/* Side columns are deliberately equal width, and all three grow with the viewport.
   The cap lives on the DECK, not on the side tracks: `1fr` sides always consume
   whatever the deck is given, so the grid can never leave dead space *inside*
   itself — it just stops widening once max-width is reached and body's
   justify-content centres it.
   The tool grows too, via clamp(). It used to be pinned at 440px, which on a
   1920px screen left a narrow tool marooned between two fat panels; the deck was
   also capped at 1240px, so a full-screen laptop had ~340px of dead space each
   side. The clamp ceiling (640px) is where the tool card stops looking like a
   form and starts looking stretched; the deck ceiling (1960px) keeps the docs
   prose to a readable measure on very wide monitors. */
.deck-lp { grid-template-columns: minmax(0, 1fr) clamp(440px, 32vw, 640px) minmax(0, 1fr);
  gap: clamp(14px, 1.4vw, 26px);
  max-width: min(1960px, 97vw); height: calc(100dvh - 24px); max-height: calc(100dvh - 24px);
  align-items: stretch; }
/* a compact head + hero so the H1, sub and tool still fit one screen */
.deck-lp .apphead { padding: 0 8px 2px; gap: 6px; }
.deck-lp .apphead .logo { font-size: 24px; gap: 10px; }
.deck-lp .apphead .logo-mark { width: 52px; height: 52px; }
.lp-hero { flex: none; text-align: center; padding: 0 4px; }
.deck-lp .lp-hero h1 { font-size: 21px; line-height: 1.25; margin: 4px 0 3px; }
.deck-lp .lp-hero .sub { font-size: 12.5px; margin: 0; }

/* ---- docs column: identical geometry to the links panel ----
   Same top:20px drop and same bottom:0, so the panels line up exactly.
   NOTE: style .docs-panel, never a bare `.panel` — the tool's own sections
   already carry class="panel", and a generic rule boxes the whole tool. */
.deck-docs { position: relative; min-width: 0; }
.docs-panel { position: absolute; top: 20px; right: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow); }

/* ---- column order: docs | tool | links ---- */
.deck-lp .deck-docs { order: 1; }
.deck-lp .deck-main { order: 2; }
.deck-lp .taskside  { order: 3; }

/* ---- the tool column fills the deck height like the panels beside it ---- */
.deck-lp .apphead { padding: 2px 8px 4px; gap: 8px; }
.deck-lp .apphead .logo { font-size: 36px; gap: 15px; }
.deck-lp .apphead .logo-mark { width: 84px; height: 84px; }
.deck-lp .lp-hero h1 { font-size: 25px; line-height: 1.2; margin: 6px 0 5px; }
.deck-lp .lp-hero .sub { font-size: 15px; line-height: 1.45; margin: 0; }
.deck-lp .deck-main .stage { flex: 1; min-height: 0; display: flex; padding-top: 12px; }
/* max-width:none overrides the 440px cap on `.deck-main .stage #sumosquash-app`
   (same specificity, so this later rule wins) — without it the tool would sit at
   440px inside a column that is now wider, re-creating the dead space one level in. */
.deck-lp .stage #sumosquash-app { display: flex; flex-direction: column; width: 100%; max-width: none; }
.deck-lp #sumosquash-app .tabs { flex: none; }
.deck-lp #sumosquash-app > section { flex: 1; min-height: 0; display: flex;
  flex-direction: column; overflow-y: auto; scrollbar-width: thin; }
.deck-lp #sumosquash-app > section.hidden { display: none; }
/* the active card grows so the column has no dead space at the bottom */
.deck-lp #sumosquash-app .card:not(.hidden) { flex: 1; display: flex;
  flex-direction: column; justify-content: center; margin-top: 12px; }
.deck-lp #sumosquash-app .drop { flex: 1; display: flex; flex-direction: column;
  justify-content: center; }

/* FAQ lives on its own tab to save vertical space */
.docs-tabs { flex: none; display: flex; gap: 4px; padding: 8px 8px 2px; }
.docs-tab { flex: 1; border: 0; background: transparent; color: var(--muted);
  padding: 7px 10px; border-radius: 9px; font: inherit; font-weight: 600;
  font-size: 13px; cursor: pointer; transition: .12s; }
.docs-tab:hover { color: var(--ink); }
.docs-tab.active { background: var(--bg); color: var(--ink); }
.docs-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 2px 16px 10px; scrollbar-width: thin; }
.docs-body::-webkit-scrollbar { width: 6px; }
.docs-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.docs-pane { max-width: none; margin: 0; }
.docs-pane > h2:first-child { margin-top: 6px; }
.docs-pane h2 { font-size: 15.5px; margin: 14px 0 6px; }
/* the docs column is narrower now that both side columns match, so text wraps
   more — trimmed to keep the longest pane inside the panel without scrolling */
.docs-pane p, .docs-pane li { font-size: 13px; line-height: 1.45; }
.docs-pane .steps li { padding-left: 30px; margin: 9px 0; }
.docs-pane .steps li::before { width: 22px; height: 22px; font-size: 12.5px; }
.docs-pane .crosslinks { justify-content: flex-start; margin-top: 10px; }
.docs-pane .faq details { padding: 10px 13px; }
.docs-pane .faq summary { font-size: 13.5px; }
.docs-credit { color: var(--muted); font-size: 11px; margin: 16px 0 2px; }

/* Large monitors: step the type and controls up once.
   Widening the deck alone is not enough — the same 13px prose in a 600px column
   reads as a small layout that has been stretched, rather than a large one. This
   is the only place the type scale moves, so it stays one decision.
   HEIGHT is gated as well as width on purpose: a short, wide window (a 1920x800
   half-screen, say) must not get bigger type, or the panels stop fitting the one
   non-scrolling screen the whole layout exists to hold. */
@media (min-width: 1600px) and (min-height: 900px) {
  .deck-lp .apphead .logo { font-size: 42px; }
  .deck-lp .apphead .logo-mark { width: 96px; height: 96px; }
  .deck-lp .lp-hero h1 { font-size: 29px; }
  .deck-lp .lp-hero .sub { font-size: 16px; }
  .docs-body { padding: 4px 22px 14px; }
  .docs-tab { font-size: 14px; }
  .docs-pane h2 { font-size: 17.5px; }
  .docs-pane p, .docs-pane li { font-size: 14.5px; line-height: 1.5; }
  .docs-pane .steps li { padding-left: 34px; margin: 11px 0; }
  .docs-pane .steps li::before { width: 25px; height: 25px; font-size: 14px; }
  .task { font-size: 14px; padding: 10px 13px; }
  .task-cols .task { font-size: 13.5px; padding: 9px 10px; }
  .task-group { font-size: 11px; }
  .buybox { margin: 8px; padding: 13px 15px 14px; }
  .buybox .bb-title, .buybox .bb-price { font-size: 15px; }
  .buybox .bb-sub { font-size: 12.5px; }
  .buybox li { font-size: 13px; }
  .buybox .bb-cta { padding: 10px 12px; font-size: 15px; }
  .buybox .bb-fine { font-size: 11.5px; }
  .drop h2 { font-size: 19px; }
  .drop p { font-size: 13.5px; }
  .drop-ic { font-size: 40px; }
}

@media (max-width: 1180px) {
  /* three columns no longer fit a screen — fall back to a scrolling page */
  body.app.lp { height: auto; min-height: 100dvh; overflow: auto;
    align-items: flex-start; padding: 20px 16px 48px; }
  .deck-lp { grid-template-columns: minmax(0, 440px) 300px; max-width: 760px;
    height: auto; max-height: none; align-items: start; }
  /* the tool leads again here — docs go back to the bottom */
  .deck-lp .deck-main { order: 1; }
  .deck-lp .taskside { order: 2; }
  .deck-lp .deck-docs { order: 3; grid-column: 1 / -1; position: static; margin-top: 16px; }
  .deck-lp .docs-panel { position: static; }
  .deck-lp .docs-body { overflow: visible; }
  /* stop stretching the tool to fill a column that is no longer full-height */
  .deck-lp .deck-main .stage { display: block; }
  .deck-lp #sumosquash-app > section { display: block; overflow: visible; }
  .deck-lp #sumosquash-app .card:not(.hidden) { display: block; }
  .deck-lp #sumosquash-app .drop { display: block; }
}
@media (max-width: 760px) {
  .deck-lp { grid-template-columns: 1fr; max-width: 520px; }
  .deck-lp .taskside { position: static; }
  .deck-lp .taskside #taskbar { position: static; max-height: 44vh; }
}

/* ===================================================================
   Purchase pages (body.buy) — desktop.html and success.html.
   A normal scrolling page, not the app deck: a checkout should be calm
   and single-purpose.
   =================================================================== */
body.buy { min-height: 100dvh; }
.buy-wrap { max-width: 1000px; margin: 0 auto; padding: 30px 20px 60px; }
.buy-wrap.narrow { max-width: 640px; }
.buy-head { text-align: center; margin-bottom: 26px; }
.buy-head .logo { font-size: 32px; gap: 13px; }
.buy-head .logo-mark { width: 74px; height: 74px; }
.buy-kicker { margin: 4px 0 0; color: var(--muted); font-size: 13px;
  text-transform: uppercase; letter-spacing: .16em; }

.buy-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }
.buy-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 26px 28px; }
.buy-card.center { text-align: center; }
.buy-card h1 { font-size: 27px; letter-spacing: -.02em; margin: 0 0 10px; }
.buy-sub { color: var(--muted); margin: 0 0 18px; }

.buy-feats { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.buy-feats li { padding-left: 26px; position: relative; color: var(--muted); font-size: 14.5px; }
.buy-feats li b { color: var(--ink); }
.buy-feats li::before { content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--ok); font-weight: 800; }

/* the price/CTA rail */
.buy-side { background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 22px; position: sticky; top: 24px; }
.buy-price { display: flex; align-items: baseline; gap: 8px; }
.buy-price .amount { font-size: 40px; font-weight: 800; letter-spacing: -.03em; }
.buy-price .per { color: var(--muted); font-size: 14px; }
.buy-note { color: var(--muted); font-size: 13px; margin: 8px 0 16px; }
.buy-cta { display: block; text-align: center; padding: 14px 18px; border-radius: 12px;
  background: var(--brand); color: var(--brand-ink); font-weight: 800; font-size: 16px;
  text-decoration: none; border: 0; width: 100%; cursor: pointer; font-family: inherit;
  transition: .12s; }
.buy-cta:hover { filter: brightness(1.07); }
.buy-cta:disabled { opacity: .6; cursor: not-allowed; }
.buy-err { color: var(--bad); font-size: 13px; margin: 10px 0 0; }
.buy-trust { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 6px; }
.buy-trust li { color: var(--muted); font-size: 12.5px; padding-left: 18px; position: relative; }
.buy-trust li::before { content: "•"; position: absolute; left: 4px; color: var(--brand); }
.buy-fine { color: var(--muted); font-size: 12px; margin: 16px 0 0; line-height: 1.5; }
.buy-fine a, .buy-wrap footer a { color: var(--brand); }

.buy-faq { margin-top: 26px; }
.buy-faq h2 { font-size: 19px; margin: 0 0 12px; }
.buy-faq details { border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px;
  margin: 9px 0; background: var(--panel); }
.buy-faq summary { font-weight: 600; cursor: pointer; }
.buy-faq details p { color: var(--muted); margin: 8px 0 2px; font-size: 14px; }

.next-h { font-size: 17px; margin: 26px 0 10px; }
.buy-card.center .steps { text-align: left; max-width: 430px; margin: 0 auto; }
.buy-wrap footer { text-align: center; margin-top: 30px; }

@media (max-width: 820px) {
  .buy-grid { grid-template-columns: 1fr; }
  .buy-side { position: static; order: -1; }   /* price first on mobile */
}

/* format picker in the video tool */
.convertrow { align-items: center; gap: 10px; margin-bottom: 12px; }
.convertrow .hint { margin: 0; white-space: nowrap; }
.convertrow select { flex: 1; min-width: 0; }