/* ==========================================================================
   Guest design system: landing (SPA views/landing.js) + public server pages
   (/pricing, /models, /models/*, /tools/*, /compare, /affiliates, legal).
   Rules: solid colours only (no gradients anywhere), colour-coded model families,
   thick borders + hard offset shadows, buttons never lift (shadow change only).
   ========================================================================== */
:root {
  --g-accent: #2fc4e6;  /* site accent: the one blue (= image cyan); logo keeps its own orange */
  --g-video: #a08cff;   /* video family: violet */
  --g-image: #2fc4e6;   /* image family: cyan */
  --g-audio: #45d483;   /* audio family: green */
  --g-green: #3ccf7a;   /* "Start free" header button, savings */
  --g-sun: #ffc83d;     /* highlight / tools */
  --g-pink: #ff86b6;    /* creators / affiliates */
  --g-ink: #16120d;     /* text on every colour block (both themes) */
  --g-paper: #fbf7f0;   /* light text on ink blocks */
  /* dark theme (default) */
  --g-edge: #2c2c33;
  --g-hard: 6px 6px 0 #26262c;
  --g-hard-sm: 4px 4px 0 #26262c;
  --g-band: #141418;
  --g-band-line: #26262b;
  --g-inv-bg: #fafafa;
  --g-inv-fg: #16120d;
  --g-dev: #121216;
  --g-pop-edge: var(--g-accent);   /* highlighted pack border: blue on dark, ink on light (cyan on cream is too faint) */
}
:root[data-theme="light"] {
  --g-edge: #16120d; --g-hard: 6px 6px 0 #16120d; --g-hard-sm: 4px 4px 0 #16120d;
  --g-band: #16120d; --g-band-line: #16120d; --g-inv-bg: #16120d; --g-inv-fg: #fbf7f0; --g-dev: #16120d; --g-pop-edge: #16120d;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --g-edge: #16120d; --g-hard: 6px 6px 0 #16120d; --g-hard-sm: 4px 4px 0 #16120d;
    --g-band: #16120d; --g-band-line: #16120d; --g-inv-bg: #16120d; --g-inv-fg: #fbf7f0; --g-dev: #16120d; --g-pop-edge: #16120d;
  }
}
.k-video { --k: var(--g-video); } .k-image { --k: var(--g-image); } .k-audio { --k: var(--g-audio); }
.k-sun { --k: var(--g-sun); } .k-coral, .k-accent { --k: var(--g-accent); } .k-pink { --k: var(--g-pink); }

/* ---------- shared bits ---------- */
.btn.ink { background: var(--g-ink); color: var(--g-paper); border: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 16px -8px rgba(0,0,0,.6); }
.btn.ink .ico { color: inherit; }
.btn.ink:hover { background: #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 26px -8px rgba(0,0,0,.7); }
.g-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 700; line-height: 1.3; background: var(--k, var(--g-accent)); color: var(--g-ink);
  border: 1.5px solid var(--g-ink); }
.g-save { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap;
  background: var(--g-inv-bg); color: var(--g-inv-fg); }
.g-eyebrow, .seo-page .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 800; background: var(--k, var(--g-sun)); color: var(--g-ink); border: 1.5px solid var(--g-ink); }
.g-eyebrow .ico { width: 15px; height: 15px; }

/* ---------- guest header ---------- */
.nav-guest a { color: var(--muted); }
.top-guest { display: flex; gap: 8px; align-items: center; }
.top-guest[hidden] { display: none; }

/* ---------- landing layout ---------- */
.g { max-width: 1200px; margin: 0 auto; }
.g h1, .g h2, .g h3 { letter-spacing: -0.03em; }
.g-sec { margin: 0 0 112px; scroll-margin-top: 90px; }
.g-head { margin-bottom: 28px; max-width: 760px; }
.g-head h2 { font-size: clamp(30px, 4.2vw, 50px); line-height: 1.04; margin: 0; font-weight: 800; }
.g-head p { color: var(--muted); font-size: 17px; margin: 10px 0 0; }
.g-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; max-width: none;
  margin-top: 64px; scroll-margin-top: 90px; }
.g-h3 { font-size: clamp(24px, 3vw, 32px); margin: 0; font-weight: 800; }
.g-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* hero */
.g-hero { display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px 56px; align-items: center; padding: 48px 0 88px; }
.g-live { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: var(--panel); border: 1.5px solid var(--g-edge); }
.g-live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g-audio); box-shadow: 0 0 0 3px rgba(69,212,131,.25); }
.g-hero h1 { font-size: clamp(40px, 4.9vw, 68px); line-height: 1.02; font-weight: 800; margin: 22px 0 22px; }
.g-hero h1 > span:first-child { display: block; }
.g-mark { display: inline-block; padding: 0 .16em .04em; border-radius: .18em; color: var(--g-ink); border: 2px solid var(--g-ink);
  margin: .06em 0; }
.g-mark.m1 { background: var(--g-accent); transform: rotate(-1.6deg); }
.g-mark.m2 { background: var(--g-sun); transform: rotate(1deg); }
.g-lead { font-size: clamp(17px, 1.6vw, 19px); color: var(--muted); max-width: 560px; margin: 0 0 26px; }
.g-hook { display: inline-flex; align-items: center; gap: 14px; padding: 8px 18px 8px 8px; margin-bottom: 26px; border-radius: 18px;
  background: var(--panel); border: 2px solid var(--g-edge); box-shadow: var(--g-hard-sm); max-width: 100%; }
.g-hook > b { flex: none; padding: 8px 12px; border-radius: 12px; font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.03em;
  background: var(--g-accent); color: var(--g-ink); }
.g-hook > span { display: grid; gap: 2px; min-width: 0; }
.g-hook strong { font-size: 15px; }
.g-hook small { color: var(--muted); font-size: 13px; }
.g-note { color: var(--muted); font-size: 14px; margin: 18px 0 0; max-width: 520px; }

.g-hero-art { position: relative; }
.g-shape { position: absolute; display: block; border: 2px solid var(--g-ink); }
.g-shape.s1 { width: 150px; height: 150px; border-radius: 50%; background: var(--g-sun); top: -34px; right: -26px; }
.g-shape.s2 { width: 120px; height: 120px; border-radius: 26px; background: var(--g-video); bottom: -30px; left: -34px; transform: rotate(14deg); }
.g-shape.s3 { width: 64px; height: 64px; border-radius: 50%; background: var(--g-image); bottom: 34%; right: -38px; }
.g-mock { position: relative; z-index: 1; padding: 12px; border-radius: 24px; background: var(--panel); border: 2px solid var(--g-edge);
  box-shadow: var(--g-hard); }
.g-mock-bar { display: flex; align-items: center; gap: 6px; padding: 2px 4px 12px; font-size: 12px; font-weight: 700; color: var(--muted); }
.g-mock-bar i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--g-ink); }
.g-mock-bar .c1 { background: var(--g-pink); } .g-mock-bar .c2 { background: var(--g-sun); } .g-mock-bar .c3 { background: var(--g-audio); }
.g-mock-bar span { margin-left: 8px; }
.g-mock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.g-mock-tile { position: relative; border-radius: 14px; overflow: hidden; border: 1.5px solid var(--line-strong); }
.g-mock-tile .g-media, .g-mock-tile .g-ph { aspect-ratio: 4 / 3 !important; }
.g-mock-tile .g-chip { position: absolute; left: 8px; bottom: 8px; font-size: 11px; }
.g-mock-composer { margin-top: 10px; padding: 10px 10px 10px 14px; border-radius: 16px; border: 1.5px solid var(--line-strong); background: var(--bg-soft); }
.g-mock-composer p { margin: 2px 0 10px; font-size: 14px; line-height: 1.45; }
.g-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--g-accent);
  animation: g-blink 1s steps(1) infinite; }
@keyframes g-blink { 50% { opacity: 0; } }
.g-mock-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.g-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 9px; font-size: 12px; font-weight: 700;
  border: 1.5px solid var(--line-strong); }
.g-pill .ico { width: 14px; height: 14px; color: var(--k, var(--accent-fg)); }
.g-mock-go { margin-left: auto; pointer-events: none; min-height: 34px; }

/* hero price board (rows from tools.price_board(); hidden when there are none) */
.g-board { grid-column: 1 / -1; padding: 16px 18px 18px; border-radius: 22px; background: var(--panel); border: 2px solid var(--g-edge);
  box-shadow: var(--g-hard-sm); }
.g-board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.g-board-head b { font-size: 15px; font-weight: 800; }
.g-board-head a { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; color: var(--accent-ink); }
.g-board-head a .ico { width: 14px; height: 14px; }
.g-board-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.g-board-card { padding: 12px 14px; border-radius: 14px; background: var(--bg-soft); border: 1.5px solid var(--line-strong);
  box-shadow: inset 0 4px 0 var(--k); }
.g-board-model { display: block; font-size: 13px; font-weight: 800; margin-top: 2px; }
.g-board-model small { color: var(--muted); font-weight: 600; }
.g-board-us { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 6px; font-size: 12px; font-weight: 700; }
.g-board-us b { padding: 3px 9px; border-radius: 9px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; background: var(--k); color: var(--g-ink); }
.g-board-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.g-board-card li { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.g-board-card li s { text-decoration-thickness: 1.5px; font-variant-numeric: tabular-nums; }

/* media + placeholders */
.g-media { display: block; width: 100%; height: auto; object-fit: cover; background: var(--panel-2); }
.g-ph { position: relative; display: grid; place-items: center; width: 100%; overflow: hidden; background: var(--k); color: var(--g-ink); }
.g-ph::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; border: 3px solid rgba(22,18,13,.16);
  right: -22%; top: -22%; }
.g-ph::after { content: ""; position: absolute; width: 26%; aspect-ratio: 1; border-radius: 18%; background: rgba(22,18,13,.10);
  left: 8%; bottom: 10%; transform: rotate(18deg); }
.g-ph-ico { position: relative; z-index: 1; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: var(--g-ink); color: var(--k); }
.g-ph-ico .ico { width: 24px; height: 24px; }
.g-wave { position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; height: 70%; }
.g-wave i { display: block; width: 6px; border-radius: 3px; background: var(--g-ink); }
.g-ph audio { position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 8px; width: calc(100% - 16px); height: 32px; }

/* model strip */
.g-strip { margin: 0 calc(50% - 50vw) 112px; padding: 34px 0 30px; overflow: hidden; background: var(--g-band); color: var(--g-paper);
  border-top: 1px solid var(--g-band-line); border-bottom: 1px solid var(--g-band-line); }
.g-strip-head { max-width: 1200px; margin: 0 auto 22px; padding: 0 28px; display: flex; align-items: baseline; gap: 10px 22px; flex-wrap: wrap; }
.g-strip-head h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.03em; }
.g-strip-head p { margin: 0; color: #b9b2a8; }
.g-strip-track { display: flex; width: max-content; animation: g-marquee 70s linear infinite; }
.g-strip:hover .g-strip-track { animation-play-state: paused; }
.g-strip-row { display: flex; gap: 10px; padding-right: 10px; }
.g-strip-row .g-chip { font-size: 14px; padding: 8px 14px; border-color: transparent; }
@keyframes g-marquee { to { transform: translateX(-50%); } }
.g-strip-track.static { animation: none; width: auto; max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.g-strip-track.static .g-strip-row { flex-wrap: wrap; }

/* families */
.g-fams { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.g-fam { display: flex; flex-direction: column; padding: 26px; border-radius: 26px; background: var(--k); color: var(--g-ink);
  border: 2px solid var(--g-ink); box-shadow: var(--g-hard); }
.g-fam-top { display: flex; justify-content: space-between; align-items: center; }
.g-fam-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--g-ink); color: var(--k); }
.g-fam-ico .ico { width: 24px; height: 24px; }
.g-fam-count { padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 800; border: 1.5px solid var(--g-ink); }
.g-fam h3 { font-size: 40px; margin: 22px 0 8px; font-weight: 800; }
.g-fam p { margin: 0 0 18px; font-size: 15px; line-height: 1.5; opacity: .86; }
.g-fam ul { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.g-fam li a { display: inline-block; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 700;
  border: 1.5px solid var(--g-ink); background: rgba(255,255,255,.32); transition: background .15s; }
.g-fam li a:hover { background: var(--g-paper); }
.g-fam-foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding-top: 16px; border-top: 2px solid var(--g-ink); }
.g-fam-foot b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.g-fam-foot small { font-size: 13px; font-weight: 600; }
.g-fam-more { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 800; background: var(--g-ink); color: var(--g-paper); transition: box-shadow .15s; }
.g-fam-more:hover { box-shadow: 0 8px 18px -8px rgba(0,0,0,.6); }
.g-fam-more .ico { width: 15px; height: 15px; }

/* all models list */
.g-seg button.active { background: var(--k, var(--g-accent)); color: var(--g-ink); }
.g-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.g-model { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 18px; background: var(--panel);
  border: 1.5px solid var(--line-strong); box-shadow: inset 5px 0 0 var(--k); transition: border-color .15s, box-shadow .15s; }
.g-model:hover { border-color: var(--k); box-shadow: inset 5px 0 0 var(--k), var(--g-hard-sm); }
.g-model.off { opacity: .55; }
.g-model-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.g-kind { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; background: var(--k); color: var(--g-ink); }
.g-kind .ico { width: 13px; height: 13px; }
.g-model h3 { margin: 4px 0 0; font-size: 18px; font-weight: 800; }
.g-model p { margin: 0; font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g-model-price { margin-top: auto; padding-top: 6px; font-size: 14px; color: var(--muted); }
.g-model-price b { color: var(--text); font-size: 18px; }

.g-more-wrap { display: flex; justify-content: center; margin-top: 18px; }
.g-more-wrap:has(> [hidden]) { display: none; }

/* showcase wall */
.g-wall { columns: 4 240px; column-gap: 14px; }
.g-shot { break-inside: avoid; margin: 0 0 14px; border-radius: 20px; overflow: hidden; background: var(--panel); border: 2px solid var(--g-edge);
  transition: box-shadow .15s; }
.g-shot:hover { box-shadow: var(--g-hard-sm); }
.g-shot-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.g-shot-open:focus-visible { outline: 3px solid var(--accent-border); outline-offset: -3px; }
.g-shot figcaption { display: grid; gap: 7px; justify-items: start; padding: 11px 13px 13px; border-top: 2px solid var(--g-edge); }
.g-shot figcaption p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.g-ai-note { text-align: center; margin-top: 14px; }

/* how it works */
.g-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.g-step { padding: 24px; border-radius: 24px; background: var(--panel); border: 2px solid var(--g-edge); }
.g-step-n { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; font-size: 26px; font-weight: 800;
  color: var(--g-ink); border: 2px solid var(--g-ink); }
.g-step.t1 .g-step-n { background: var(--g-accent); } .g-step.t2 .g-step-n { background: var(--g-sun); transform: rotate(-4deg); }
.g-step.t3 .g-step-n { background: var(--g-audio); transform: rotate(3deg); }
.g-step h3 { margin: 18px 0 6px; font-size: 22px; font-weight: 800; }
.g-step p { margin: 0; color: var(--muted); }

/* video tutorials (right under the hero): our poster + YouTube player on click, lesson list on the side */
.g-tut-body { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.g-tut-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: var(--g-ink);
  border: 2px solid var(--g-edge); box-shadow: var(--g-hard); }
.g-tut-stage iframe, .g-tut-poster, .g-tut-poster img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.g-tut-poster { padding: 0; margin: 0; background: none; cursor: pointer; }
.g-tut-poster img { object-fit: cover; }
.g-tut-play { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%;
  background: var(--g-sun); border: 3px solid var(--g-ink); box-shadow: 5px 5px 0 var(--g-ink); display: grid; place-items: center;
  transition: box-shadow .12s, background .12s; }
.g-tut-play i { width: 0; height: 0; margin-left: 7px; border-style: solid; border-width: 17px 0 17px 28px;
  border-color: transparent transparent transparent var(--g-ink); }
.g-tut-poster:hover .g-tut-play, .g-tut-poster:focus-visible .g-tut-play { background: var(--g-accent); box-shadow: 8px 8px 0 var(--g-ink); }
.g-tut-side { display: flex; flex-direction: column; gap: 14px; }
.g-tut-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.g-tut-item { width: 100%; display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 14px; padding: 12px 16px 12px 12px;
  border-radius: 18px; background: var(--panel); border: 2px solid var(--g-edge); color: inherit; font: inherit; text-align: left;
  cursor: pointer; transition: box-shadow .12s, border-color .12s; }
.g-tut-item:hover { box-shadow: var(--g-hard-sm); }
.g-tut-item.on { border-color: var(--g-ink); box-shadow: var(--g-hard-sm); background: var(--k); color: var(--g-ink); }
.g-tut-n { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; font-size: 20px; font-weight: 800;
  background: var(--k); color: var(--g-ink); border: 2px solid var(--g-ink); }
.g-tut-item.on .g-tut-n { background: var(--g-paper); }
.g-tut-t { font-weight: 800; font-size: 16px; line-height: 1.25; }
.g-tut-d { font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.g-tut-item.on .g-tut-d { color: var(--g-ink); }
.g-tut-more { align-self: flex-start; }

/* price teaser */
.g-price { display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; align-items: center; padding: 36px; border-radius: 30px;
  background: var(--panel); border: 2px solid var(--g-edge); box-shadow: var(--g-hard); }
.g-price-copy h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.04; font-weight: 800; margin: 0 0 12px; }
.g-price-copy p { color: var(--muted); margin: 0 0 24px; font-size: 16px; }
.g-bars { display: grid; gap: 18px; }
.g-barset-h { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 15px; }
.g-barset-h .g-save { margin-left: auto; }
.g-bar { display: grid; grid-template-columns: 96px 1fr 62px; align-items: center; gap: 10px; font-size: 13px; margin: 4px 0; }
.g-bar-l { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-bar-t { height: 12px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.g-bar-t i { display: block; height: 100%; border-radius: 999px; }
.g-bar.us .g-bar-t i { background: var(--k); }
.g-bar.fal .g-bar-t i { background: var(--bar-fal); }
.g-bar.off .g-bar-t i { background: var(--bar-official); }
.g-bar-v { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.g-bar.us .g-bar-l, .g-bar.us .g-bar-v { color: var(--text); font-weight: 800; }

/* free tools */
.g-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.g-tool { display: flex; flex-direction: column; gap: 4px; padding: 24px; border-radius: 24px; background: var(--panel);
  border: 2px solid var(--g-edge); transition: box-shadow .15s, border-color .15s; }
.g-tool:hover { border-color: var(--k); box-shadow: 6px 6px 0 var(--k); }
.g-tool-ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; margin-bottom: 14px; background: var(--k);
  color: var(--g-ink); border: 2px solid var(--g-ink); }
.g-tool-ico .ico { width: 24px; height: 24px; }
.g-tool h3 { margin: 0; font-size: 21px; font-weight: 800; }
.g-tool p { margin: 4px 0 16px; color: var(--muted); }
.g-tool-go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; }
.g-tool-go .ico { width: 16px; height: 16px; color: var(--k); }

/* developers */
.g-dev { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; padding: 40px; border-radius: 30px;
  background: var(--g-dev); color: var(--g-paper); border: 2px solid var(--g-edge); --k: var(--g-video); }
.g-dev h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.04; font-weight: 800; margin: 16px 0 12px; }
.g-dev-copy > p { color: #bdb6ab; margin: 0 0 22px; }
.g-dev-cards { display: grid; gap: 10px; margin-bottom: 24px; }
.g-dev-card { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; border: 1.5px solid #34312c; }
.g-dev-card b { font-size: 15px; }
.g-dev-card p { margin: 2px 0 0; font-size: 14px; color: #bdb6ab; }
.g-dev-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--g-ink); }
.g-dev-card:nth-child(1) .g-dev-ico { background: var(--g-pink); }
.g-dev-card:nth-child(2) .g-dev-ico { background: var(--g-sun); }
.g-dev-card:nth-child(3) .g-dev-ico { background: var(--g-image); }
.g-dev-ico .ico { width: 19px; height: 19px; }
.g-dev .btn.ghost { background: transparent; color: var(--g-paper); border-color: #4a463f; }
.g-code { margin: 0; padding: 22px; border-radius: 20px; background: #0a0a0c; color: #ece7df; border: 1.5px solid #34312c;
  font: 13px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre; overflow-x: auto; box-shadow: 6px 6px 0 var(--g-video); }

/* packs (cards come from the shared pack builder) */
.g-packs { gap: 18px; }
.g-pack { border: 2px solid var(--g-edge); border-radius: 24px; }
.g-pack.is-pop { border-color: var(--g-pop-edge); box-shadow: 6px 6px 0 var(--g-accent); }
.g-pack .l-pack-top .g-save { background: var(--g-accent); color: var(--g-ink); }

/* affiliate teaser */
.g-aff { display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center; padding: 30px 36px; border-radius: 30px;
  background: var(--g-pink); color: var(--g-ink); border: 2px solid var(--g-ink); box-shadow: var(--g-hard); transition: box-shadow .15s; }
.g-aff:hover { box-shadow: 10px 10px 0 var(--g-edge); }
.g-aff-big { font-size: clamp(64px, 8vw, 104px); font-weight: 800; line-height: .9; letter-spacing: -.05em; }
.g-aff h2 { margin: 0 0 6px; font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; letter-spacing: -.02em; }
.g-aff p { margin: 0; opacity: .85; }

/* FAQ */
.g-faqs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.g-faq { padding: 16px 20px; border-radius: 18px; background: var(--panel); border: 2px solid var(--g-edge); }
.g-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px;
  font-weight: 800; font-size: 16px; }
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font-size: 18px; background: var(--g-sun); color: var(--g-ink); border: 1.5px solid var(--g-ink); }
.g-faq[open] summary::after { content: "–"; background: var(--g-accent); }
.g-faq p { margin: 10px 0 2px; color: var(--muted); }

/* final CTA */
.g-cta { position: relative; overflow: hidden; text-align: center; padding: 72px 24px; border-radius: 34px; background: var(--g-accent);
  color: var(--g-ink); border: 2px solid var(--g-ink); }
.g-cta::before { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: var(--g-sun);
  border: 2px solid var(--g-ink); left: -70px; bottom: -110px; }
.g-cta::after { content: ""; position: absolute; width: 140px; height: 140px; border-radius: 30px; background: var(--g-video);
  border: 2px solid var(--g-ink); right: -36px; top: -50px; transform: rotate(18deg); }
.g-cta > * { position: relative; z-index: 1; }
.g-cta h2 { font-size: clamp(32px, 5vw, 60px); line-height: 1.02; margin: 0 0 12px; font-weight: 800; letter-spacing: -.035em; }
.g-cta p { margin: 0 0 28px; font-size: 18px; font-weight: 600; }

/* viewer stage (video or image) */
.l-viewer-stage { display: grid; place-items: center; max-width: min(1600px, 100%); }
.l-viewer-stage img, .l-viewer-stage video { max-width: 100%; max-height: calc(100vh - 170px); object-fit: contain; border-radius: 14px; }

/* responsive */
@media (max-width: 1080px) {
  .g-hero { grid-template-columns: 1fr; gap: 56px; padding-top: 32px; }
  .g-hero-art { max-width: 620px; width: 100%; margin: 0 auto; }
  .g-board-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-price, .g-dev { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .g-fams, .g-steps, .g-tools, .g-faqs, .g-tut-body { grid-template-columns: 1fr; }
  .g-tut-stage { border-radius: 18px; }
  .g-tut-play { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
  .g-tut-play i { border-width: 13px 0 13px 22px; margin-left: 5px; }
  .g-sec { margin-bottom: 80px; }
  .g-strip { margin-bottom: 80px; }
  .g-strip-head { padding: 0 16px; }
  .g-wall { columns: 2; column-gap: 10px; }
  .g-shot { margin-bottom: 10px; border-radius: 16px; }
  .g-shot figcaption { padding: 9px 10px 11px; }
  .g-shot figcaption p { font-size: 12px; }
  .g-price, .g-dev { padding: 22px; border-radius: 24px; gap: 26px; }
  .g-aff { grid-template-columns: 1fr; gap: 14px; padding: 24px; }
  .g-aff .btn { justify-self: start; }
  .g-cta { padding: 72px 20px 64px; border-radius: 26px; }
  .g-cta::before { width: 140px; height: 140px; left: -60px; bottom: -80px; }
  .g-cta::after { width: 84px; height: 84px; right: -30px; top: -40px; border-radius: 20px; }
}
@media (max-width: 560px) {
  .g-hero { padding: 20px 0 64px; }
  .g-hook { gap: 10px; padding-right: 12px; }
  .g-hook > b { font-size: 24px; }
  .g-shape.s1 { width: 96px; height: 96px; top: -26px; right: -8px; }
  .g-shape.s2 { width: 80px; height: 80px; left: -10px; bottom: -22px; }
  .g-shape.s3 { display: none; }
  .g-mock { padding: 9px; border-radius: 18px; box-shadow: var(--g-hard-sm); }
  .g-mock-row .g-pill:nth-child(3) { display: none; }
  .g-fam { padding: 22px; box-shadow: var(--g-hard-sm); }
  .g-fam h3 { font-size: 34px; }
  .g-bar { grid-template-columns: 74px 1fr 52px; gap: 8px; }
  .g-code { font-size: 12px; padding: 16px; }
  .g-ctas .btn.lg { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .g-strip-track { animation: none; width: auto; flex-wrap: wrap; padding: 0 16px; max-width: 1200px; margin: 0 auto; }
  .g-strip-row { flex-wrap: wrap; }
  .g-strip-row[aria-hidden] { display: none; }
  .g-caret { animation: none; }
}

/* ==========================================================================
   Public server pages (/pricing, /models, /tools/*, /compare, ...) in the same style.
   Only re-skins existing classes; page structure stays with its owners.
   ========================================================================== */
.seo-page { max-width: 1120px; }
.seo-page h1, .seo-page h2, .seo-page h3 { letter-spacing: -0.03em; }
.seo-hero { padding: 40px 0 12px; }
.seo-hero h1 { font-size: clamp(32px, 5vw, 60px); line-height: 1.03; font-weight: 800; margin: 18px auto 16px; max-width: 900px; }
.seo-page h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; }
.seo-page section { margin: 48px 0; }
.seo-page .card { border: 2px solid var(--g-edge); border-radius: 20px; }
.seo-card { position: relative; transition: box-shadow .15s, border-color .15s; border-top-width: 8px !important;
  border-top-color: var(--k, var(--g-accent)) !important; }
.seo-card:hover { border-color: var(--g-edge); box-shadow: var(--g-hard-sm); }
.seo-card h3 { font-size: 19px; font-weight: 800; }
.seo-card b { font-size: 17px; }
.seo-page .packs { gap: 20px; }
.seo-page .pack { border-radius: 24px; padding: 26px; }
.seo-page .pack h3 { margin: 0; font-size: 22px; font-weight: 800; }
.seo-page .pack .price { font-weight: 800; letter-spacing: -.03em; font-size: 46px; }
.seo-page .pack.popular { border-color: var(--g-pop-edge); box-shadow: 6px 6px 0 var(--g-accent); }
.seo-page .pack:nth-child(1) { box-shadow: 6px 6px 0 var(--g-pink); }
.seo-page .pack:nth-child(2) { box-shadow: 6px 6px 0 var(--g-video); }
.seo-page .pack:nth-child(4) { box-shadow: 6px 6px 0 var(--g-green); }
.seo-page .pack.popular { box-shadow: 6px 6px 0 var(--g-accent); }
.seo-page .faq-item { border-radius: 16px; }
.seo-page .faq-item summary { font-weight: 800; }
.seo-page .tool-card { border-radius: 24px; box-shadow: var(--g-hard); padding: 24px; }
.seo-page .tool-drop { border-radius: 18px; border: 2px dashed var(--g-edge); background: var(--bg-soft); }
.seo-page .tool-cta { border: 2px solid var(--g-ink); background: var(--g-sun); color: var(--g-ink); border-radius: 18px; }
.seo-page .tool-cta .btn { background: var(--g-ink); color: var(--g-paper); }
.seo-steps li::marker { font-weight: 800; color: var(--accent-ink); }
.seo-footer { max-width: none; margin: 72px 0 0; padding: 40px max(28px, calc(50% - 560px)) 32px; background: var(--g-band);
  color: #b9b2a8; border-top: 0; }
.seo-footer .muted { color: #9a938a; }
.seo-footer-links a { color: #ddd6cb; }
.seo-footer-links a:hover { color: var(--g-sun); }
@media (max-width: 640px) {
  .seo-footer { padding: 32px 16px 24px; }
  .seo-page .pack .price { font-size: 38px; }
}
/* server-rendered copy of the landing (shown until the JS app replaces it) */
.seo-pre .g { max-width: none; }

/* ---------- language switcher (header, footer, account menu) + suggestion banner ---------- */
.lang-sw { position: relative; }
.lang-sw > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer;
  font-size: 13px; font-weight: 700; letter-spacing: .02em; user-select: none; }
.lang-sw > summary::-webkit-details-marker { display: none; }
.lang-sw > summary:hover { border-color: var(--line-strong); }
.lang-sw > summary .ico { width: 16px; height: 16px; color: var(--muted); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; display: grid; min-width: 190px; padding: 6px;
  background: var(--panel); border: 1.5px solid var(--g-edge); border-radius: 12px; box-shadow: var(--g-hard-sm); }
.lang-sw.up .lang-menu { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }
.lang-menu a { padding: 8px 10px; border-radius: 8px; color: var(--text); font-size: 14px; font-weight: 600; white-space: nowrap; }
.lang-menu a:hover { background: var(--panel-2); }
.lang-menu a[aria-current="true"] { background: var(--g-sun); color: var(--g-ink); }
.top-lang { display: flex; }
.top-lang[hidden] { display: none; }
.seo-footer-lang { margin: 0 0 14px; }
.seo-footer .lang-sw > summary { background: transparent; border-color: var(--g-band-line); color: #ddd6cb; }
.sf-brand .lang-sw { margin-top: 14px; align-self: flex-start; }
.lang-banner { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 50; display: flex; align-items: center;
  gap: 12px; width: max-content; max-width: calc(100vw - 32px); padding: 10px 10px 10px 16px; border-radius: 14px;
  background: var(--panel); color: var(--text); border: 1.5px solid var(--g-edge); box-shadow: var(--g-hard-sm); font-size: 14px; }
.lang-banner span { flex: 1 1 auto; min-width: 0; }
.lang-banner .btn { flex: none; }
.lang-banner-x { flex: none; width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--muted);
  font-size: 20px; line-height: 1; cursor: pointer; }
.lang-banner-x:hover { background: var(--panel-2); color: var(--text); }
.legal-note { padding: 10px 14px; border: 1.5px solid var(--g-edge); border-radius: 10px; background: var(--panel-2); font-size: 14px; }
@media (max-width: 560px) {
  .top-lang .lang-sw > summary { padding: 0 8px; }
  .top-lang .lang-sw > summary .ico { display: none; }
  .lang-banner { flex-wrap: wrap; bottom: 12px; }
}
/* long compound words (German, Polish legal text) must wrap on phones */
.seo-page, .g, .legal { overflow-wrap: break-word; }
:lang(de) .seo-page, :lang(de) .g, :lang(pl) .legal, :lang(de) .legal { hyphens: auto; -webkit-hyphens: auto; }

/* ---------- guest header: colourful, landing look ---------- */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600 900; font-display: swap;
  src: url("/assets/fonts/nunito-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600 900; font-display: swap;
  src: url("/assets/fonts/nunito-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* brand: icon + wordmark (dark text on an orange marker bar: one file for both themes) */
.brand .wm { display: inline-flex; align-items: center; }
.brand .wm img { width: auto; height: 27px; }

/* menu: rounded font, every item has its own colour chip; hover fills the pill with that colour */
.nav-guest { gap: 6px; }
.nav-guest a { font-family: "Nunito", var(--font); font-size: 15px; font-weight: 800; letter-spacing: .01em; color: var(--text);
  padding: 5px 13px 5px 5px; border: 2px solid transparent; border-radius: 999px; transition: background .15s, border-color .15s; }
.nav-guest a .ico { width: 26px; height: 26px; padding: 5px; border-radius: 50%; opacity: 1; color: var(--g-ink);
  background: var(--k, var(--g-accent)); border: 1.5px solid var(--g-ink); }
.nav-guest a:nth-of-type(1) { --k: var(--g-video); }
.nav-guest a:nth-of-type(2) { --k: var(--g-sun); }
.nav-guest a:nth-of-type(3) { --k: var(--g-image); }
.nav-guest a:nth-of-type(4) { --k: var(--g-audio); }
.nav-guest a:nth-of-type(5) { --k: var(--g-pink); }
.nav-guest a:hover, .nav-guest a.active { color: var(--g-ink); background: color-mix(in srgb, var(--k) 38%, var(--panel));
  border-color: var(--g-edge); }
.nav-guest a:hover .ico, .nav-guest a.active .ico { color: var(--g-ink); }
.nav-guest .nav-sep { width: 6px; height: 6px; margin: 0 4px; border-radius: 50%; background: var(--g-accent); }

/* the whole bar: transparent while at the top of the page, slides back in as a floating card after a short scroll
   (assets/js/theme.js toggles .tb-guest on <html> and .tb-float on the bar) */
html.tb-guest body { padding-top: var(--tb-h, 64px); }
html.tb-guest .topbar { position: absolute; top: 0; left: 0; right: 0; height: 64px; background: transparent; border-bottom: 2px solid var(--g-edge); }
html.tb-guest .topbar.tb-float { position: fixed; top: 10px; left: 14px; right: 14px; height: 58px; background: var(--panel);
  border: 2px solid var(--g-edge); border-radius: 18px; box-shadow: var(--g-hard-sm); transition: transform .38s cubic-bezier(.2, .9, .3, 1.12); }
html.tb-guest .topbar.tb-float.tb-hide { transform: translateY(calc(-100% - 24px)); transition-timing-function: ease-in; transition-duration: .25s; }
html.tb-guest .topbar.tb-snap { transition: none; }
@media (prefers-reduced-motion: reduce) { html.tb-guest .topbar.tb-float { transition: none; } }

/* buttons with the landing's hard offset shadow (same as the $0.29 price card) */
.btn.btn-start, .btn.btn-start:hover { background: var(--g-green); color: var(--g-ink); }
.btn.btn-hard, .topbar .btn.btn-start, .topbar .btn.btn-signin { border: 2px solid var(--g-edge); box-shadow: var(--g-hard-sm); transition: box-shadow .15s; }
.btn.btn-hard:hover, .topbar .btn.btn-start:hover, .topbar .btn.btn-signin:hover { box-shadow: 6px 6px 0 var(--g-edge); }
.btn.btn-hard:active, .topbar .btn.btn-start:active, .topbar .btn.btn-signin:active { box-shadow: 1px 1px 0 var(--g-edge); }
.btn.lg.btn-hard { box-shadow: var(--g-hard); }
.btn.lg.btn-hard:hover { box-shadow: 8px 8px 0 var(--g-edge); }
.topbar .btn.btn-signin, .topbar .btn.btn-signin:hover { background: var(--g-sun); color: var(--g-ink); }
.topbar .top-guest { gap: 12px; }
.topbar .top-guest .btn.sm { min-height: 34px; font-family: "Nunito", var(--font); font-weight: 800; font-size: 14px; }

/* zł / € / $ / credits switch (assets/js/price-unit.js): slim pill with a sliding coral knob; currency buttons are
   30 px each in the order zł, €, $, so the knob sits at 0 / 30 / 60 px, credits take the rest */
.unit-toggle.top-unit { position: relative; height: 30px; padding: 2px; gap: 0; border: 2px solid var(--g-edge); border-radius: 999px;
  background: var(--panel); align-items: stretch; }
.top-unit[hidden], .unit-src[hidden] { display: none; }
.unit-bar { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.top-unit::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px; width: 30px; border-radius: 999px;
  background: var(--g-accent); border: 1.5px solid var(--g-ink); transition: left .22s ease, width .22s ease; }
.top-unit:has(button[data-unit="eur"].active)::before { left: 32px; }
.top-unit:has(button[data-unit="usd"].active)::before { left: 62px; }
.top-unit:has(button[data-unit="cr"].active)::before { left: 92px; width: calc(100% - 94px); }
.unit-toggle.top-unit button, .unit-toggle.top-unit button.active { position: relative; z-index: 1; background: none; box-shadow: none;
  padding: 0 10px; border-radius: 999px; font-family: "Nunito", var(--font); font-size: 13px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.unit-toggle.top-unit button:is([data-unit="pln"], [data-unit="eur"], [data-unit="usd"]) { width: 30px; padding: 0; }
.unit-toggle.top-unit button.active { color: var(--g-ink); }
.top-unit .ut-s { display: none; }
@media (max-width: 560px) {
  .top-unit .ut-l { display: none; }
  .top-unit .ut-s { display: inline; }
}
@media (max-width: 980px) {
  html.tb-guest .topbar, html.tb-guest .topbar.tb-float { height: auto; }
  .nav-guest a { font-size: 14px; }
}
@media (max-width: 560px) {
  html.tb-guest .topbar.tb-float { top: 6px; left: 6px; right: 6px; padding: 0 8px; border-radius: 14px; }
  .topbar .top-guest { gap: 8px; }
  .topbar .top-guest .btn.sm { padding: 0 10px; font-size: 13px; }
}
@media (max-width: 420px) { .brand .wm { display: none; } .topbar .top-right { gap: 6px; } .topbar .top-guest { gap: 6px; } .top-guest .btn.sm { padding: 0 8px; } }

/* ---------- compact tool / comparison headers: the working tool is visible on the first screen ---------- */
.seo-page:has(> .tool-hero) { padding-top: 18px; }
.seo-page section.tool-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px;
  padding: 6px 0 0; margin: 0 0 18px; }
.seo-page .tool-hero h1 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; margin: 0; max-width: none; }
.seo-page .tool-hero .eyebrow { padding: 4px 10px; font-size: 12px; }
.seo-page .tool-hero .eyebrow .ico { width: 13px; height: 13px; }
.seo-page .tool-hero .lead { flex-basis: 100%; font-size: 16px; margin: 0; max-width: none; }
.seo-page .tool-hero + .tool-card { margin-top: 0; }
.seo-page section.tool-card { margin-left: auto; margin-right: auto; }
.seo-page .cmp-hero { padding: 18px 0 0; }
.seo-page .cmp-hero h1 { font-size: clamp(28px, 3.6vw, 44px); margin: 0 auto 4px; }
.seo-page .cmp-hero .lead { font-size: 16px; margin-bottom: 16px; max-width: 820px; }
.seo-page .cmp-hero .cmp-updated { margin: 0 0 10px; font-size: 13px; }
.seo-page section.cmp-hero { margin: 0 0 28px; }

/* ---------- wide sections (calculator result + price list): use the screen, not the 1120px column ---------- */
.seo-page .seo-wide { position: relative; left: 50%; width: min(1400px, calc(100vw - 48px)); transform: translateX(-50%); }
@media (max-width: 640px) { .seo-page .seo-wide { left: auto; width: auto; transform: none; } }

/* ---------- calculator savings: one small card per competitor ---------- */
.calc-saves { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 0 0 18px; }
.save-card { display: grid; justify-items: start; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--panel);
  border: 2px solid var(--g-edge); box-shadow: var(--g-hard-sm); }
.save-card b { padding: 2px 10px; border-radius: 10px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2;
  background: var(--g-green); color: var(--g-ink); border: 1.5px solid var(--g-ink); }
.save-card span { font-size: 14px; font-weight: 700; }
.save-card small { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .calc-saves { grid-template-columns: 1fr 1fr; gap: 8px; } .save-card { padding: 10px 12px; } .save-card b { font-size: 20px; } }

.mname::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--k, var(--g-accent));
  border: 1.5px solid var(--g-ink); }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  border: 1.5px solid var(--line-strong); background: var(--panel); font-weight: 800; font-variant-numeric: tabular-nums; }
.opt-chip i { font-style: normal; font-weight: 600; color: var(--muted); }

/* ---------- compare pages: price per clip length / option at a glance ---------- */
.cc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.cc-card { padding: 18px 20px 14px; border-radius: 22px; background: var(--panel); border: 2px solid var(--g-edge);
  box-shadow: 6px 6px 0 var(--k); }
.cc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cc-head .g-chip { font-size: 15px; padding: 6px 14px; }
.cc-sub { font-size: 13px; font-weight: 700; color: var(--muted); }
.cc-row { display: grid; grid-template-columns: 56px minmax(60px, 1fr) auto 96px; align-items: center; gap: 12px; padding: 10px 0;
  border-top: 1px dashed var(--line-strong); }
.cc-head + .cc-row { border-top: 0; }
.cc-opt { padding: 4px 0; border-radius: 9px; text-align: center; font-size: 14px; font-weight: 800; white-space: nowrap;
  background: var(--k); color: var(--g-ink); border: 1.5px solid var(--g-ink); }
.cc-bar { height: 16px; border-radius: 999px; background: var(--panel-2); border: 1.5px solid var(--line-strong); overflow: hidden; }
.cc-bar i { display: block; height: 100%; background: var(--k); }
.cc-price { font-size: 21px; font-weight: 800; letter-spacing: -.02em; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-ps { font-size: 12px; font-weight: 700; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 560px) {
  .cc-card { padding: 14px 14px 10px; box-shadow: var(--g-hard-sm); }
  .cc-row { grid-template-columns: 48px minmax(40px, 1fr) auto; gap: 4px 10px; }
  .cc-ps { grid-column: 2 / -1; margin-top: -2px; }
  .cc-price { font-size: 18px; }
}

/* ---------- tool locked for this account (GPU tools come with the Feature pack) ---------- */
.tool-lock { display: flex; gap: 18px; align-items: flex-start; padding: 22px; border-radius: 18px; border: 2px dashed var(--g-edge);
  background: var(--bg-soft); }
.tool-lock[hidden] { display: none; }
.tool-lock-ico { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: var(--g-sun);
  color: var(--g-ink); border: 2px solid var(--g-ink); }
.tool-lock-ico .ico { width: 24px; height: 24px; }
.tool-lock h3 { margin: 0 0 6px; font-size: 20px; font-weight: 800; }
.tool-lock p { margin: 0; }
.tool-lock .btn .ico { width: 16px; height: 16px; }
.tool-bar [hidden] { display: none !important; }
@media (max-width: 560px) { .tool-lock { flex-direction: column; padding: 18px; } }

/* studio: prompt helper before the first pack */
.icon-btn.locked { opacity: .65; }
/* very narrow phones (360-400 px): the guest header row must fit without clipping "Start free" */
@media (max-width: 400px) {
  .topbar .top-right { gap: 4px; }
  .topbar .top-guest { gap: 5px; }
  .topbar .top-guest .btn.sm { padding: 0 7px; font-size: 12px; min-height: 32px; }
  .unit-toggle.top-unit button:not([data-unit="pln"], [data-unit="eur"], [data-unit="usd"]) { padding: 0 7px; }
  .top-lang .lang-sw > summary { padding: 0 6px; }
  .topbar .theme-btn { width: 30px; height: 30px; }
  html.tb-guest .topbar.tb-float { left: 4px; right: 4px; padding: 0 5px; }
  .topbar .brand img { width: 26px; height: 26px; }
}

/* ---------- phone burger (assets/js/theme.js moves the menu + switches into .tb-panel) ---------- */
.tb-burger, .tb-panel { display: none; }
@media (max-width: 980px) {
  .topbar > .nav-guest { display: none !important; }
  .topbar .top-right > .top-unit, .topbar .top-right > .top-lang, .topbar .top-right > .theme-btn { display: none; }
  .tb-burger:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px;
    padding: 0; border: 2px solid var(--g-edge); border-radius: 10px; background: var(--panel); color: var(--text); cursor: pointer;
    box-shadow: var(--g-hard-sm); }
  .tb-burger path { transition: transform .2s ease, opacity .2s ease; transform-origin: 12px 12px; }
  .menu-open .tb-burger .b1 { transform: translateY(5px) rotate(45deg); }
  .menu-open .tb-burger .b2 { opacity: 0; }
  .menu-open .tb-burger .b3 { transform: translateY(-5px) rotate(-45deg); }
  .tb-panel:not([hidden]) { display: grid; gap: 12px; position: absolute; top: calc(100% + 8px); left: 8px; right: 8px; z-index: 20; padding: 12px;
    background: var(--panel); border: 2px solid var(--g-edge); border-radius: 18px; box-shadow: var(--g-hard); animation: tb-drop .22s ease both; }
  @keyframes tb-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  .tb-panel .nav-guest { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; border: 0; overflow: visible; }
  .tb-panel .nav-guest .nav-sep { display: none; }
  .tb-panel .nav-guest { order: 0; } .tb-panel-row { order: 1; }
  .tb-panel .nav-guest a { padding: 8px 12px 8px 8px; font-size: 15px; border: 2px solid var(--g-edge); border-radius: 14px;
    background: color-mix(in srgb, var(--k) 22%, var(--panel)); }
  .tb-panel-row { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1.5px dashed var(--line-strong); }
  .tb-panel-row .top-unit { display: inline-flex; }
  .tb-panel-row .top-unit .ut-l { display: inline; }
  .tb-panel-row .top-unit .ut-s { display: none; }
  .tb-panel-row .theme-btn { margin-left: auto; }
  html.tb-guest .topbar { height: 60px; }
  .topbar .top-right { gap: 8px; }
}

/* ---------- 26.10 owner pass: compact tables, green primary buttons, button-style switches, footer ---------- */

/* primary buttons on the public pages and the landing: green with the landing's hard shadow */
.seo-page .btn:not(.ghost):not(.ink):not(.btn-signin), .l.g .btn:not(.ghost):not(.ink):not(.g-mock-go),
.site-foot .btn:not(.ghost) { background: var(--g-green); color: var(--g-ink); border: 2px solid var(--g-edge); box-shadow: var(--g-hard-sm); }
.seo-page .btn:not(.ghost):not(.ink):not(.btn-signin):hover, .l.g .btn:not(.ghost):not(.ink):not(.g-mock-go):hover { background: var(--g-green); box-shadow: 6px 6px 0 var(--g-edge); }

/* language / theme / $-credits: same family as the header buttons, slightly rounded */
.lang-sw > summary, .topbar .theme-btn, .tb-panel-row .theme-btn { height: 34px; border: 2px solid var(--g-edge); border-radius: 10px;
  background: var(--panel); color: var(--text); box-shadow: var(--g-hard-sm); font-family: "Nunito", var(--font); font-weight: 800; }
.topbar .theme-btn, .tb-panel-row .theme-btn { width: 34px; }
.lang-sw > summary:hover, .topbar .theme-btn:hover { border-color: var(--g-edge); box-shadow: 5px 5px 0 var(--g-edge); }
.lang-sw > summary .ico { color: var(--text); }
.unit-toggle.top-unit { height: 34px; border-radius: 10px; box-shadow: var(--g-hard-sm); }
.top-unit::before { border-radius: 7px; top: 3px; bottom: 3px; left: 3px; }
.top-unit:has(button[data-unit="eur"].active)::before { left: 33px; }
.top-unit:has(button[data-unit="usd"].active)::before { left: 63px; }
.top-unit:has(button[data-unit="cr"].active)::before { left: 93px; width: calc(100% - 96px); }
.unit-toggle.top-unit button, .unit-toggle.top-unit button.active { border-radius: 7px; }
.lang-menu { border: 2px solid var(--g-edge); border-radius: 12px; box-shadow: var(--g-hard-sm); }

/* burger: two icons swapped, nothing animates or shifts */
.tb-burger .ic-x, .menu-open .tb-burger .ic-menu { display: none; }
.menu-open .tb-burger .ic-x { display: block; }
.tb-burger svg { flex: none; }

/* phones: plain sticky bar (never hides), smaller shadows, tighter panel */
@media (max-width: 980px) {
  .topbar { position: sticky; top: 0; border-bottom: 2px solid var(--g-edge); }
  .topbar .btn.btn-start, .topbar .btn.btn-signin, .tb-burger:not([hidden]), .lang-sw > summary, .tb-panel-row .theme-btn,
  .unit-toggle.top-unit { box-shadow: 2px 2px 0 var(--g-edge); }
  .topbar .btn.btn-start:hover, .topbar .btn.btn-signin:hover { box-shadow: 3px 3px 0 var(--g-edge); }
  .tb-panel:not([hidden]) { box-shadow: 3px 3px 0 var(--g-edge); padding: 10px; gap: 10px; }
  .tb-panel .nav-guest a { padding: 6px 10px 6px 6px; font-size: 14px; border-radius: 12px; }
  .tb-panel .nav-guest a .ico { width: 24px; height: 24px; }
  .seo-page .btn:not(.ghost):not(.ink):not(.btn-signin), .l.g .btn:not(.ghost):not(.ink):not(.g-mock-go) { box-shadow: 3px 3px 0 var(--g-edge); }
  .btn.lg.btn-hard { box-shadow: 3px 3px 0 var(--g-edge); }
}

/* footer (landing SPA + every public page): colourful column headings, light band */
.site-foot { border-top: 2px solid var(--g-edge); }
.site-foot .sf-col h4 { width: fit-content; padding: 4px 12px 4px 4px; gap: 8px; border: 2px solid var(--g-edge); border-radius: 999px;
  background: color-mix(in srgb, var(--k, var(--g-accent)) 22%, var(--panel)); font-family: "Nunito", var(--font); font-size: 13px;
  font-weight: 900; letter-spacing: .06em; color: var(--text); }
.site-foot .sf-col h4 .ico { width: 24px; height: 24px; padding: 4px; border-radius: 50%; color: var(--g-ink); background: var(--k, var(--g-accent));
  border: 1.5px solid var(--g-ink); }
.site-foot .sf-col a:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--k, var(--g-accent));
  text-decoration-thickness: 2px; text-underline-offset: 3px; }
.site-foot .brand .wm img { height: 27px; width: auto; }
.seo-foot { max-width: 1320px; }
.seo-foot .sf-top { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; }
@media (max-width: 980px) { .seo-foot .sf-top { grid-template-columns: 1fr 1fr; } .seo-foot .sf-brand { grid-column: 1 / -1; } }
.l.g .btn.ink, .seo-page .btn.ink { background: var(--g-green); color: var(--g-ink); border: 2px solid var(--g-edge); box-shadow: var(--g-hard-sm); }
@media (max-width: 980px) { .l.g .btn.ink, .seo-page .btn.ink { box-shadow: 3px 3px 0 var(--g-edge); } }

/* ---------- landing: what Turbogen is + Google sign-in + safety rules ---------- */
.g-about .g-head p { max-width: 820px; }
.g-about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.g-about-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.g-about-card p, .g-about-card ul { margin: 0; }
.g-about-card ul { padding-left: 20px; display: grid; gap: 6px; }
.g-about-links { margin: 16px 0 0; color: var(--muted); }
@media (max-width: 760px) { .g-about-grid { grid-template-columns: 1fr; } }


/* ---------- signed-in studio: same look as the public pages (owner 27.10) ---------- */
/* header menu: rounded font + colour chip per item, like the guest menu */
.nav-app { gap: 4px; }
.nav-app a { font-family: "Nunito", var(--font); font-size: 15px; font-weight: 800; letter-spacing: .01em; color: var(--text);
  padding: 5px 12px 5px 5px; border: 2px solid transparent; border-radius: 999px; transition: background .15s, border-color .15s; }
.nav-app a .ico { width: 26px; height: 26px; padding: 5px; border-radius: 50%; opacity: 1; color: var(--g-ink);
  background: var(--k, var(--g-accent)); border: 1.5px solid var(--g-ink); }
.nav-app a[data-route="image"] { --k: var(--g-image); }
.nav-app a[data-route="video"] { --k: var(--g-video); }
.nav-app a[data-route="audio"] { --k: var(--g-audio); }
.nav-app a[data-route="gallery"] { --k: var(--g-pink); }
.nav-app a[data-route="pricing"] { --k: var(--g-sun); }
.nav-app a[data-route="api"] { --k: var(--g-green); }
.nav-app a[data-route="support"] { --k: var(--g-accent); }
.nav-app a:hover, .nav-app a.active { color: var(--g-ink); background: color-mix(in srgb, var(--k) 38%, var(--panel));
  border-color: var(--g-edge); box-shadow: none; }
.nav-app a:hover .ico, .nav-app a.active .ico { color: var(--g-ink); }
@media (min-width: 981px) and (max-width: 1380px) { .nav-app { gap: 0; } .nav-app a { font-size: 14px; padding: 4px 9px 4px 4px; } .nav-app a .ico { width: 24px; height: 24px; } }
@media (min-width: 981px) and (max-width: 1180px) { .nav-app a span { display: none; } .nav-app a { padding: 4px; } }
html.app-in .topbar { border-bottom: 2px solid var(--g-edge); }

/* credits gauge + avatar: header-button family (hard edge, hard shadow) */
.quota { --ring: var(--g-green); }
.quota-btn { height: 34px; padding: 0 12px 0 6px; border: 2px solid var(--g-edge); border-radius: 10px; background: var(--panel);
  box-shadow: var(--g-hard-sm); font-family: "Nunito", var(--font); font-weight: 800; font-size: 14px; transition: box-shadow .15s; }
.quota-btn:hover, .quota-btn[aria-expanded="true"] { border-color: var(--g-edge); box-shadow: 5px 5px 0 var(--g-edge); }
.quota-btn b { font-weight: 900; }
/* fuel gauge: 5 solid segments that fill from the bottom (state.js sets --f 0..1 per segment);
   green while 4-5 are lit, orange at 2-3, red when only the last one is left */
.quota[data-level="mid"] { --ring: #ff9f1c; }
.quota[data-level="low"] { --ring: #e5383b; }
.gauge { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; padding: 2px; border: 1.5px solid var(--g-edge); border-radius: 5px;
  background: var(--bg); }
.gauge i { position: relative; width: 4px; height: 100%; border-radius: 1.5px; overflow: hidden;
  background: color-mix(in srgb, var(--text) 14%, transparent); }
.gauge i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--f, 0) * 100%); background: var(--ring);
  transition: height .45s cubic-bezier(.3, .7, .3, 1), background-color .3s; }
.gauge i:nth-child(2)::after { transition-delay: .05s; } .gauge i:nth-child(3)::after { transition-delay: .1s; }
.gauge i:nth-child(4)::after { transition-delay: .15s; } .gauge i:nth-child(5)::after { transition-delay: .2s; }
@media (prefers-reduced-motion: reduce) { .gauge i::after { transition: none; } }
.avatar { width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--g-edge); background: var(--g-sun); color: var(--g-ink);
  box-shadow: var(--g-hard-sm); font-family: "Nunito", var(--font); font-weight: 900; font-size: 14px; transition: box-shadow .15s; }
.avatar:hover, .avatar[aria-expanded="true"] { border-color: var(--g-edge); box-shadow: 5px 5px 0 var(--g-edge); }
.quota-pop, .acct-menu { border: 2px solid var(--g-edge); border-radius: 14px; box-shadow: var(--g-hard); }
.qp-bar { border: 1.5px solid var(--g-edge); }

/* studio pages: green primary buttons, Generate included */
#view > :not(.l) .btn:not(.ghost):not(.warn):not(.danger):not(:disabled),
.l-modal .btn:not(.ghost):not(.danger) { background: var(--g-green); color: var(--g-ink); border: 2px solid var(--g-edge); box-shadow: var(--g-hard-sm); }
#view > :not(.l) .btn:not(.ghost):not(.warn):not(.danger):not(:disabled):hover,
.l-modal .btn:not(.ghost):not(.danger):hover { background: var(--g-green); box-shadow: 6px 6px 0 var(--g-edge); }
#view > :not(.l) .btn:not(.ghost):not(.warn):not(.danger):not(:disabled):active { box-shadow: 1px 1px 0 var(--g-edge); }
#view > :not(.l) .btn:not(.ghost):not(.warn):not(.danger) .ico { color: var(--g-ink); }
.btn.go, .btn.go:hover { background: var(--g-green); color: var(--g-ink); border: 2px solid var(--g-edge); box-shadow: var(--g-hard-sm); }
.btn.go:hover { box-shadow: 6px 6px 0 var(--g-edge); }
.btn.go:active { box-shadow: 1px 1px 0 var(--g-edge); }
.btn.go .ico { color: var(--g-ink); }
.btn.go .btn-cost { background: rgba(0, 0, 0, .12); color: var(--g-ink); }
/* Download = green, like Generate: saving your result is a "go" action everywhere */
.btn.dl, .btn.dl:hover, #view > :not(.l) .btn.dl:not(:disabled) { background: var(--g-green); color: var(--g-ink); border: 2px solid var(--g-edge); }
.btn.dl .ico { color: var(--g-ink); }
.tile-btn.dl, .tile-btn.dl:hover { background: var(--g-green); color: var(--g-ink); }
#view > :not(.l) .btn.ghost { border: 2px solid var(--g-edge); }

/* cards, packs, tables: same frames as the public pages */
#view > :not(.l) .card { border: 2px solid var(--g-edge); border-radius: 20px; }
#view > :not(.l) .packs { gap: 20px; }
#view > :not(.l) .pack { border: 2px solid var(--g-edge); border-radius: 24px; }
#view > :not(.l) .pack h3 { font-weight: 800; }
#view > :not(.l) .pack .price { font-weight: 800; letter-spacing: -.03em; }
#view > :not(.l) .pack:nth-child(1) { box-shadow: 6px 6px 0 var(--g-pink); }
#view > :not(.l) .pack:nth-child(2) { box-shadow: 6px 6px 0 var(--g-video); }
#view > :not(.l) .pack:nth-child(4) { box-shadow: 6px 6px 0 var(--g-green); }
#view > :not(.l) .pack.popular { border-color: var(--g-pop-edge); box-shadow: 6px 6px 0 var(--g-accent); }
#view h1, #view h2, #view h3 { letter-spacing: -0.03em; }
@media (max-width: 980px) {
  #view > :not(.l) .btn:not(.ghost):not(.warn):not(.danger):not(:disabled), .btn.go, .quota-btn, .avatar { box-shadow: 2px 2px 0 var(--g-edge); }
  #view > :not(.l) .pack, #view > :not(.l) .pack.popular { box-shadow: 3px 3px 0 var(--g-edge); }
}

/* header menu 2 px smaller (owner 27.10) */
.topbar .nav-guest a, .topbar .nav-app a { font-size: 13px; }
.topbar .nav-guest a .ico, .topbar .nav-app a .ico { width: 24px; height: 24px; padding: 4.5px; }
@media (min-width: 981px) and (max-width: 1380px) { .topbar .nav-app a { font-size: 12px; } .topbar .nav-app a .ico { width: 22px; height: 22px; } }

/* studio tiles + docked composer in the public look; ticket form button wraps on phones (owner 27.10) */
html.app-in .tile { border: 2px solid var(--g-edge); border-radius: 16px; box-shadow: 4px 4px 0 var(--g-edge); }
html.app-in .tile.starred { box-shadow: 4px 4px 0 var(--g-sun); }
html.app-in .composer { border: 2px solid var(--g-edge); border-radius: 18px; box-shadow: 5px 5px 0 var(--g-edge); }
html.app-in .composer:focus-within { border-color: var(--g-edge); box-shadow: 5px 5px 0 var(--g-green); }
html.app-in .composer.drag { border-color: var(--g-green); }
@media (max-width: 980px) {
  html.app-in .tile { box-shadow: 3px 3px 0 var(--g-edge); }
  html.app-in .composer { box-shadow: 3px 3px 0 var(--g-edge); }
  .tk-foot { flex-wrap: wrap; }
  .tk-foot .btn { flex: none; white-space: nowrap; }
}

/* ================= THE table style (one for every page: public, studio, admin) — owner 29.10 =================
   Markup: <div class="tg-table-wrap"><table class="tg-table [variant]">…</table></div>. The wrapper scrolls sideways on
   phones so the page itself never does. Solid colours + borders only. Variants below only tune cells, never the frame.
   scripts/ui_audit.py and backend/tests/test_tables.py fail on a <table> without these classes. */
.tg-table-wrap { max-width: 100%; overflow-x: auto; scrollbar-width: thin; border-radius: 18px; margin: 0 0 14px; }
.tg-table { width: 100%; border: 2px solid var(--g-edge); border-radius: 18px; border-collapse: separate; border-spacing: 0;
  overflow: hidden; background: var(--panel); color: var(--text); font-size: 14px; }
.tg-table th, .tg-table td { text-align: left; padding: 9px 11px; font-size: 14px; vertical-align: middle; border-bottom: 1px solid var(--line); }
.tg-table th { background: var(--panel-2); color: var(--muted); text-transform: uppercase; font-weight: 800; }
.tg-table thead th { color: var(--text); font-size: 11px; letter-spacing: .04em; line-height: 1.25; vertical-align: bottom;
  border-bottom: 2px solid var(--g-edge); }
.tg-table tbody tr:last-child > * { border-bottom: 0; }
.tg-table tbody tr:hover > * { box-shadow: inset 0 0 0 999px rgba(127, 127, 127, .06); }
.tg-table a { color: var(--accent-ink); font-weight: 700; }
.tg-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tg-table td.num { font-weight: 600; padding-left: 8px; }
.tg-table thead th.num, .tg-table thead th.us { min-width: 70px; }
.tg-table thead th.us { background: var(--g-accent); color: var(--g-ink); }
.tg-table td.us, .tg-table tr.us td { background: color-mix(in srgb, var(--g-accent) 9%, var(--panel)); font-weight: 800; }
.tg-table tfoot th { background: var(--panel-2); color: var(--text); border-top: 2px solid var(--g-edge); border-bottom: 0;
  text-transform: none; letter-spacing: 0; font-size: 15px; }
.tg-table tfoot th.us { background: color-mix(in srgb, var(--g-accent) 22%, var(--panel)); }
.tg-table td.mk { color: var(--muted); font-size: 12.5px; line-height: 1.35; min-width: 110px; }
.tg-table td.opt { font-weight: 700; white-space: nowrap; }
.tg-table a.mname, .mname { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 800; white-space: nowrap; }
.tg-table a.mname:hover { color: var(--accent-ink); }
.tg-table .g-save { font-size: 12px; }
/* variants */
.tg-table:has(thead th:nth-child(9)) th, .tg-table:has(thead th:nth-child(9)) td { padding: 8px 7px; font-size: 13px; }
.tg-table:has(thead th:nth-child(9)) thead th { font-size: 10.5px; letter-spacing: .02em; hyphens: auto; -webkit-hyphens: auto; }
.cmp-table td:first-child { color: var(--muted); }
.cmp-vs tbody th[scope="row"] { width: 26%; background: var(--panel); color: var(--muted); text-transform: none; letter-spacing: 0;
  font-size: 14px; font-weight: 700; }
.app-prices td:first-child { width: 1%; }
.api-prices td.us div { white-space: nowrap; }
@media (max-width: 640px) { .tg-table th, .tg-table td { padding: 8px 9px; font-size: 13px; } .tg-table thead th { font-size: 11px; } }

/* ---------- studio onboarding (UX 29.10): "Start here" card, labelled reference chip, starter engine badges ---------- */
.onboard { margin: 0 0 18px; padding: 16px 18px 18px; display: grid; gap: 10px; background: var(--panel);
  border: 2px solid var(--g-edge); border-radius: 20px; box-shadow: 5px 5px 0 var(--g-accent); }
.onboard-head { display: flex; align-items: center; gap: 12px; }
.onboard-head h2 { margin: 0; font-size: 20px; font-weight: 900; flex: 1; }
.onboard-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800;
  background: var(--g-sun); color: var(--g-ink); border: 1.5px solid var(--g-ink); }
.onboard-tag .ico { width: 13px; height: 13px; }
.onboard-x { flex: none; width: 32px; height: 32px; border-radius: 9px; border: 2px solid var(--g-edge); background: var(--panel); color: var(--text);
  font-size: 20px; line-height: 1; cursor: pointer; }
.onboard-x:hover { box-shadow: 3px 3px 0 var(--g-edge); }
.onboard > p { margin: 0; font-size: 14px; }
.onboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.onboard-item { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 14px 14px 12px;
  text-align: left; font: inherit; color: var(--text); cursor: pointer; border-radius: 16px; border: 2px solid var(--g-edge);
  background: color-mix(in srgb, var(--k) 14%, var(--panel)); box-shadow: 3px 3px 0 var(--g-edge); transition: box-shadow .15s; }
.onboard-item:hover { box-shadow: 6px 6px 0 var(--g-edge); }
.onboard-item:active { box-shadow: 1px 1px 0 var(--g-edge); }
.onboard-item:focus-visible { outline: 3px solid var(--k); outline-offset: 2px; }
.onboard-n { position: absolute; top: -10px; left: -8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font-size: 12px; font-weight: 900; background: var(--text); color: var(--bg); border: 2px solid var(--g-edge); }
.onboard-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--k); color: var(--g-ink);
  border: 2px solid var(--g-ink); }
.onboard-ico .ico { width: 20px; height: 20px; }
.onboard-txt { display: grid; gap: 2px; min-width: 0; }
.onboard-txt b { font-weight: 900; font-size: 15px; }
.onboard-txt small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.onboard-item > .ico:last-child { width: 18px; height: 18px; color: var(--text); }
@media (max-width: 760px) {
  .onboard { box-shadow: 3px 3px 0 var(--g-accent); padding: 14px; }
  .onboard-grid { grid-template-columns: 1fr; gap: 10px; }
  .onboard-item { padding: 10px 12px; }
  .onboard-ico { width: 34px; height: 34px; }
}

/* "+ Add image" / "+ Start frame": dashed chip left of the prompt (short label on phones) */
.ref-add { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; margin-top: 2px; padding: 0 12px 0 9px;
  border: 2px dashed color-mix(in srgb, var(--text) 55%, transparent); border-radius: 12px; background: transparent; color: var(--text);
  font: inherit; font-size: 13px; font-weight: 800; white-space: nowrap; cursor: pointer; transition: border-color .15s, background-color .15s; }
.ref-add .ico { width: 16px; height: 16px; flex: none; }
.ref-add:hover, .composer.drag .ref-add { border-color: var(--g-edge); border-style: solid; background: color-mix(in srgb, var(--g-green) 22%, transparent); }
.ref-add.has { border-style: solid; border-color: var(--g-edge); background: color-mix(in srgb, var(--g-green) 18%, transparent); }
.ref-add:disabled { opacity: .55; cursor: default; }
.ref-add .ra-s { display: none; }
.ref-add .ra-n { font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--g-ink); color: var(--g-paper); }
@media (max-width: 560px) {
  .ref-add { padding: 0 9px 0 7px; gap: 4px; }
  .ref-add .ra-l { display: none; }
  .ref-add .ra-s { display: inline; }
}
html.app-in .ref-thumb { border: 2px solid var(--g-edge); }

/* empty-feed starters: engine name + its badge */
.starter-model { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.starter-model i { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .02em; text-transform: none; padding: 1px 6px;
  border-radius: 999px; border: 1.5px solid var(--g-edge); color: var(--text); }
html.app-in .starter { border: 2px solid var(--g-edge); box-shadow: 3px 3px 0 var(--g-edge); transition: box-shadow .15s; }
html.app-in .starter:hover { transform: none; border-color: var(--g-edge); box-shadow: 5px 5px 0 var(--g-edge); }

/* signed-in phones: the burger is guest-only, so the language switch stays in the bar */
@media (max-width: 980px) {
  html.app-in .topbar .top-right > .top-lang { display: flex; }
}
html.app-in .starters-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ---------- phone burger for everyone (<= 980 px): signed-in nav moves into the same sheet as the guest nav ---------- */
@media (max-width: 980px) {
  html.app-in .topbar > .nav-app { display: none !important; }
  html.tb-lock, html.tb-lock body { overflow: hidden; }
  .tb-panel:not([hidden]) { max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; }
  .tb-panel .nav-app { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; border: 0; overflow: visible; order: 0; }
  .tb-panel .nav-app a, .tb-panel .nav-guest a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px 8px 8px;
    font-size: 15px; font-weight: 800; color: var(--text); border: 2px solid var(--g-edge); border-radius: 14px; }
  .tb-panel .nav-app a { background: color-mix(in srgb, var(--k) 14%, var(--panel)); }
  .tb-panel .nav-app a .ico, .tb-panel .nav-guest a .ico { width: 30px; height: 30px; padding: 6px; flex: none; }
  .tb-panel .nav-app a span[data-i18n] { display: inline; }
  .tb-panel .nav-app a.active, .tb-panel .nav-guest a[aria-current="page"] { background: var(--k); color: var(--g-ink); box-shadow: 3px 3px 0 var(--g-edge); }
  .tb-panel .nav-app a.active .ico, .tb-panel .nav-guest a[aria-current="page"] .ico { background: var(--g-paper); color: var(--g-ink); border: 1.5px solid var(--g-ink); }
  .tb-panel .nav-app a:focus-visible, .tb-panel .nav-guest a:focus-visible { outline: 3px solid var(--accent-border); outline-offset: 2px; }
  .tb-panel .nav-app .nav-dot { position: static; margin-left: auto; }
  html.app-in .tb-burger { width: 34px; height: 34px; }
}

/* ---------- pack perk chips (UX 30.10): solid tag + ink icon tile, bold value, lighter second line ----------
   ui.js packChip() / seo.py pack_chip(); the pack grid sets --chip-rows so every card reserves the same height. */
.pack-chips { display: grid; align-content: start; justify-items: start; gap: 8px; margin: 8px 0 10px;
  min-height: calc(var(--chip-rows, 1) * 44px + (var(--chip-rows, 1) - 1) * 8px); }
.pack-chips:empty { margin: 0; min-height: 0; }
.packs .pack-chips:empty, .l-packs .pack-chips:empty { margin: 8px 0 10px; min-height: calc(var(--chip-rows, 1) * 44px + (var(--chip-rows, 1) - 1) * 8px); }
.pack-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 5px 10px 5px 5px;
  border-radius: 12px; background: var(--k); color: var(--g-ink); border: 2px solid var(--g-ink); box-shadow: 3px 3px 0 var(--g-edge);
  font-family: "Nunito", var(--font); text-align: left; }
.pack-chip.pc-free { --k: var(--g-accent); }
.pack-chip.pc-bonus { --k: var(--g-sun); }
.pack-chip-ico { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--g-ink); color: var(--k); }
.pack-chip-ico .ico { width: 16px; height: 16px; }
.pack-chip-txt { display: grid; gap: 1px; min-width: 0; }
.pack-chip-txt b { font-size: 13px; font-weight: 900; line-height: 1.15; letter-spacing: -.01em; }
.pack-chip-txt small { font-size: 11.5px; font-weight: 700; line-height: 1.15; opacity: .72; }
@media (max-width: 860px) {
  .pack-chips, .packs .pack-chips:empty, .l-packs .pack-chips:empty { min-height: 0; }
  .pack-chips:empty, .packs .pack-chips:empty, .l-packs .pack-chips:empty { margin: 0; }
}



/* burger panel: the language list opens in-flow (the panel scrolls, so an absolute dropdown was clipped) - 30.10 */
@media (max-width: 980px) {
  .tb-panel-row { flex-wrap: wrap; }
  .tb-panel-row .top-lang { order: 9; flex: 1 0 100%; }
  .tb-panel .lang-sw { width: 100%; }
  .tb-panel .lang-menu, .tb-panel .lang-sw.up .lang-menu { position: static; margin-top: 8px; min-width: 0; grid-template-columns: 1fr 1fr; gap: 4px;
    box-shadow: none; }
}

/* primary buttons = green everywhere (owner 30.10: no orange/blue filled buttons; same family as .btn.go) */
.btn:not(.ghost):not(.warn):not(.danger):not(.ink):not(.btn-signin):not(.g-mock-go) { background: var(--g-green); color: var(--g-ink);
  border: 2px solid var(--g-edge); box-shadow: var(--g-hard-sm); }
.btn:not(.ghost):not(.warn):not(.danger):not(.ink):not(.btn-signin):not(.g-mock-go):hover { background: var(--g-green); box-shadow: 6px 6px 0 var(--g-edge); }
.btn:not(.ghost):not(.warn):not(.danger):not(.ink):not(.btn-signin):not(.g-mock-go):active { box-shadow: 1px 1px 0 var(--g-edge); }
.btn:not(.ghost):not(.warn):not(.danger):not(.ink):not(.btn-signin):not(.g-mock-go) .ico { color: var(--g-ink); }
.btn:not(.ghost):not(.warn):not(.danger):not(.ink):not(.btn-signin):not(.g-mock-go):disabled { box-shadow: none; }
.btn.ghost .ico { color: var(--accent-fg); }
@media (max-width: 980px) { .btn:not(.ghost):not(.warn):not(.danger):not(.ink):not(.btn-signin):not(.g-mock-go) { box-shadow: 3px 3px 0 var(--g-edge); } }
/* signed-in phone header: the language list opened to the left of EN and ran off-screen - open it to the right instead */
@media (max-width: 980px) { .topbar .top-lang .lang-menu { left: 0; right: auto; max-width: calc(100vw - 24px); } }
/* inline segmented pills (support tabs, gallery filters, 1K/2K/4K): active = solid blue like every other filter pill */
.seg-inline button.active { background: var(--g-accent); color: var(--g-ink); box-shadow: inset 0 0 0 1.5px var(--g-ink); }
.seg-inline button.active .ico { color: var(--g-ink); }