.mockbar {
  position: sticky; top: 0; z-index: var(--z-toast);
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-2) var(--space-4);
  background: var(--ink-950); color: var(--ink-200);
  border-bottom: var(--border-w) solid var(--ink-800);
  font-family: var(--font-mono); font-size: var(--text-2xs);
}
.mockbar a, .mockbar button { color: var(--ink-200); background: none; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--text-2xs); padding: 2px 6px; border-radius: var(--radius-xs); }
.mockbar a:hover, .mockbar button:hover { background: var(--ink-800); color: var(--white); }
.mockbar .on { background: var(--brand-500); color: var(--white); font-weight: 700; }
.mockbar__tag { color: var(--brand-400); font-weight: 700; }
.mockbar__spacer { flex: 1; }



.hero { position: relative; overflow: hidden; padding-block: var(--space-10) var(--space-16); }
@media (min-width: 1024px) { .hero { padding-block: var(--space-12) var(--space-20); } }
.hero__inner { display: grid; gap: var(--space-10); align-items: start; }

.hero__inner > *, .app2 > *, .studio-view > *, .col > *, .lanes > *,
.grid2 > *, .grid3 > *, .steps > *, .beforeafter > * { min-width: 0; }
@media (min-width: 1024px) {
  
  .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-12); }
}
.hero__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero__title { font-size: clamp(var(--text-3xl), 4.2vw, var(--text-5xl)); line-height: 1.06;
  letter-spacing: var(--tracking-tighter); }
.hero__sub { font-size: clamp(var(--text-base), 1.2vw, var(--text-lg)); line-height: var(--leading-relaxed);
  color: var(--text-muted); max-width: 34rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.hero__proof { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  font-size: var(--text-sm); color: var(--text-muted); }
.hero__proof span { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero__proof svg { color: var(--accent); width: 1rem; height: 1rem; flex: none; }


.hero--grid::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 10%, transparent 70%);
  opacity: 0.6;
}
.hero__glow::after {
  content: ""; position: absolute; z-index: -1; top: -18rem; right: -14rem;
  width: 44rem; height: 44rem; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--accent-subtle) 0%, transparent 62%);
}



.shot { position: relative; border-radius: var(--radius-xl); overflow: hidden;
  border: var(--border-w) solid var(--shot-border); background: var(--shot-bg);
  box-shadow: var(--shadow-lg); }
.shot__chrome { display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); background: var(--shot-chrome);
  border-bottom: var(--border-w) solid var(--shot-border); }
.shot__dots { display: flex; gap: 0.35rem; }
.shot__dots i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--shot-border); display: block; }
.shot__url { flex: 1; text-align: center; font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--shot-muted); }
.shot__body { background: var(--shot-bg); color: var(--shot-text); padding: var(--space-5); }

.shot .s-card { background: var(--shot-inset); border-color: var(--shot-border); }
.shot--light .shot__body { background: var(--white); color: var(--ink-900); }


.logostrip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-6) var(--space-10); padding-block: var(--space-6); }
.logostrip span { font-family: var(--font-display); font-weight: var(--font-bold); font-size: var(--text-lg);
  color: var(--text-subtle); opacity: 0.75; letter-spacing: var(--tracking-tight); }


.feat { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5);
  border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
  transition: border-color var(--duration-fast) var(--ease-default), transform var(--duration-base) var(--ease-default); }
.feat:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.feat__icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: var(--radius-md); background: var(--accent-subtle); color: var(--accent); flex: none; }
.feat__icon svg { width: 1.15rem; height: 1.15rem; }
.feat__title { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--font-bold);
  color: var(--text-strong); }
.feat__body { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-relaxed); flex: 1; }
.feat__meta { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle);
  padding-top: var(--space-3); border-top: var(--border-w) solid var(--border-subtle); }


.steps { display: grid; gap: var(--space-6); counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps--4 { }
@media (min-width: 768px) { .steps--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps--4 { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); min-width: 0; }
.step > * { min-width: 0; overflow-wrap: anywhere; }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold);
  color: var(--accent); letter-spacing: var(--tracking-wide); }
.step--on { border-top-color: var(--accent); }
.step__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--font-bold);
  color: var(--text-strong); }
.step__body { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-relaxed); }
.step__meta { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); }


.quote { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6);
  background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); }
.quote__text { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--text); }
.quote__text::before { content: "\201C"; }
.quote__text::after { content: "\201D"; }
.quote__who { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.quote__name { font-weight: var(--font-semibold); color: var(--text-strong); }
.quote__role { color: var(--text-subtle); font-size: var(--text-xs); }


.claim { display: grid; gap: var(--space-3); padding: var(--space-5);
  border-left: var(--border-w-heavy) solid var(--accent); background: var(--surface-subtle);
  border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.claim__say { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--font-bold);
  color: var(--text-strong); line-height: var(--leading-snug); }
.claim__why { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-relaxed); }
.claim__src, .s-gate__id { display: none; }
.claim__src b { color: var(--accent); font-weight: var(--font-semibold); }


.band { display: grid; gap: var(--space-6); padding: var(--space-8) 0; }
@media (min-width: 640px) { .band { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .band { grid-template-columns: repeat(4, 1fr); } }
.band__item { display: flex; flex-direction: column; gap: var(--space-2);
  padding-left: var(--space-5); border-left: var(--border-w) solid var(--border); }
.band__n { font-family: var(--font-display); font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: var(--font-extrabold); line-height: 1; letter-spacing: var(--tracking-tighter);
  color: var(--text-strong); font-variant-numeric: tabular-nums; }
.band__n em { font-style: normal; color: var(--accent); }
.band__l { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-snug); }
.band__s { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); }


.vs { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
.vs th, .vs td { padding: var(--space-4); border-bottom: var(--border-w) solid var(--border); text-align: left;
  vertical-align: top; }
.vs thead th { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--font-bold);
  color: var(--text-strong); border-bottom: var(--border-w-thick) solid var(--border-strong); }
.vs thead th:first-child { font-family: var(--font-sans); font-size: var(--text-2xs); font-weight: var(--font-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-subtle); }
.vs tbody th { font-weight: var(--font-medium); color: var(--text); }
.vs .us { background: var(--accent-subtle); }
.vs .them { color: var(--text-muted); }
.vs .yes { color: var(--success); font-weight: var(--font-semibold); }
.vs .no { color: var(--text-subtle); }


.genre { display: flex; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg);
  border: var(--border-w) solid var(--border); background: var(--surface); align-items: flex-start; }
.genre__code { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--font-bold);
  color: var(--accent); background: var(--accent-subtle); padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs); flex: none; }
.genre__name { font-family: var(--font-display); font-weight: var(--font-bold); color: var(--text-strong);
  font-size: var(--text-base); }
.genre__body { font-size: var(--text-sm); color: var(--text-muted); }



.footer { background: var(--ink-950); padding-block: var(--space-16) var(--space-8);
  --text: var(--ink-200); --text-strong: var(--white); --text-muted: var(--ink-300);
  --text-subtle: var(--ink-400); --border: var(--ink-800); --border-strong: var(--ink-700);
  --success: var(--success-400); --warning: var(--amber-400);
  --error: var(--rose-400); --info: var(--violet-400);
  color: var(--ink-300); }
.footer a { color: var(--ink-300); font-size: var(--text-sm); }
.footer a:hover { color: var(--white); }
.footer__grid { display: grid; gap: var(--space-8); }
@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.6fr repeat(4, 1fr); } }
.footer__head { font-size: var(--text-2xs); font-weight: var(--font-semibold); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--ink-400); margin-bottom: var(--space-4); }
.footer__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
  align-items: center; margin-top: var(--space-12); padding-top: var(--space-6);
  border-top: var(--border-w) solid var(--ink-800); font-size: var(--text-xs); color: var(--ink-400); }
.footer .s-logo__word { color: var(--white); }
.footer .s-logo__sub { color: var(--ink-500); }


.auth { display: grid; min-height: 100vh; }
@media (min-width: 1024px) { .auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.auth__form { display: flex; flex-direction: column; justify-content: center; padding: var(--space-8) var(--space-5); }
@media (min-width: 1024px) { .auth__form { padding: var(--space-16) var(--space-12); } }
.auth__card { width: 100%; max-width: 25rem; margin-inline: auto; }

.auth__aside { display: none; background: var(--ink-950); padding: var(--space-12);
  flex-direction: column; justify-content: space-between;
  --text: var(--ink-200); --text-strong: var(--white);
  --text-muted: var(--ink-300); --text-subtle: var(--ink-400);
  --text-link: var(--brand-300);
  --border: var(--ink-800); --border-strong: var(--ink-700);
  --surface: var(--ink-900); --surface-hover: var(--ink-800);
  --success: var(--success-400); --warning: var(--amber-400);
  --error: var(--rose-400); --info: var(--violet-400);
  --status-done: var(--success-400); --status-running: var(--amber-400);
  --status-failed: var(--rose-400); --status-queued: var(--ink-300);
  --status-stopped: var(--ink-300); --status-review: var(--violet-400);
  color: var(--ink-200); }
@media (min-width: 1024px) { .auth__aside { display: flex; } }
.auth__aside h2 { color: var(--white); }
.auth__aside .claim { background: rgba(255,255,255,.04); border-left-color: var(--brand-400); }
.auth__aside .claim__say { color: var(--white); }
.auth__aside .claim__why, .auth__aside .claim__src { color: var(--ink-300); }
.auth__aside .claim__src b { color: var(--brand-400); }
.auth__or { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs);
  color: var(--text-subtle); }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: var(--border-w); background: var(--border); }
.auth__social { display: grid; gap: var(--space-3); grid-template-columns: 1fr 1fr; }


.app2 { display: grid; gap: var(--space-5); }
@media (min-width: 1280px) { .app2--split { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; } }

.pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-6); }
.pagehead h1 { font-size: var(--text-3xl); }
.pagehead__sub { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-2); }
.pagehead__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }


.nextup { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5);
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--accent-subtle); border: var(--border-w) solid var(--accent-border); }
.nextup__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none;
  border-radius: var(--radius-md); background: var(--accent); color: var(--text-on-accent); }
.nextup__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--font-bold);
  color: var(--text-strong); }
.nextup__sub { font-size: var(--text-sm); color: var(--text-muted); }


.jobcard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4);
  padding: var(--space-4); border: var(--border-w) solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); transition: border-color var(--duration-fast) var(--ease-default); }
.jobcard:hover { border-color: var(--border-strong); }
.jobcard__thumb { width: 7rem; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden;
  background: var(--ink-950); display: grid; place-items: center; flex: none; position: relative; }
.jobcard__thumb--reel { width: 3.6rem; aspect-ratio: 9 / 16; }
.jobcard__dur { position: absolute; right: 0.25rem; bottom: 0.25rem; font-family: var(--font-mono);
  font-size: var(--text-2xs); background: rgba(0,0,0,.72); color: var(--white);
  padding: 0.05rem 0.3rem; border-radius: var(--radius-xs); }
.jobcard__name { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--font-bold);
  color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jobcard__meta { font-size: var(--text-xs); color: var(--text-muted); display: flex; flex-wrap: wrap;
  gap: var(--space-1) var(--space-3); align-items: center; }
.jobcard__stage { font-size: var(--text-xs); color: var(--text-muted); }
.jobcard__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }


.lanes { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .lanes { grid-template-columns: 1fr 1fr; } }
.lane { border: var(--border-w) solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); overflow: hidden; }
.lane__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); background: var(--surface-subtle);
  border-bottom: var(--border-w) solid var(--border); }
.lane__name { font-family: var(--font-display); font-weight: var(--font-bold); font-size: var(--text-sm);
  color: var(--text-strong); }
.lane__body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); min-height: 8rem; }
.lane__row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); background: var(--surface-subtle); font-size: var(--text-xs); }
.lane__row--now { background: var(--accent-subtle); border: var(--border-w) solid var(--accent-border); }


.studio-view { display: grid; gap: var(--space-5); }
@media (min-width: 1280px) {
  .studio-view { grid-template-columns: 17rem minmax(0, 1fr) 22rem; align-items: start; }
}

@media (max-width: 1279px) {
  .studio-view[data-state="done"] > .col:nth-child(1) { order: 2; }
  .studio-view[data-state="done"] > .col:nth-child(2) { order: 1; }
  .studio-view[data-state="done"] > .col:nth-child(3) { order: 3; }
}
.col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0;
  padding: var(--space-4); border: var(--border-w) solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); }
.col__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-bottom: var(--space-3); border-bottom: var(--border-w) solid var(--border); }
.col__title { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--font-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-subtle); }


.stagelist { display: flex; flex-direction: column; }
.stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3);
  align-items: center; padding: var(--space-3) 0; border-bottom: var(--border-w) solid var(--border-subtle); }
.stage:last-child { border-bottom: 0; }
.stage__dot { width: 1.25rem; height: 1.25rem; border-radius: 50%; display: grid; place-items: center;
  flex: none; font-size: 0.6rem; font-weight: 700; border: var(--border-w-thick) solid var(--border-strong);
  color: var(--text-subtle); background: var(--surface); }
.stage--done .stage__dot { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.stage--running .stage__dot { border-color: var(--warning); color: var(--warning); }
.stage--failed .stage__dot { border-color: var(--error); color: var(--error); }
.stage__name { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text); }
.stage--todo .stage__name { color: var(--text-subtle); }
.stage__time { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); }
.stage__bar { grid-column: 2 / -1; }


.decision { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) 0;
  border-bottom: var(--border-w) solid var(--border-subtle); font-size: var(--text-sm); }
.decision:last-child { border-bottom: 0; }
.decision__t { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--accent); }
.decision__what { color: var(--text); font-weight: var(--font-medium); }
.decision__why { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-relaxed); }
.decision__tag { align-self: flex-start; }


.versions { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-1);
  scrollbar-width: thin; }
.version { display: flex; flex-direction: column; gap: var(--space-1); flex: none;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  border: var(--border-w) solid var(--border); background: var(--surface); cursor: pointer;
  min-width: 8.5rem; text-align: left; }
.version[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-subtle); }
.version__n { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--text-strong); }
.version__d { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); }
.version--new { border-style: dashed; align-items: center; justify-content: center; color: var(--text-subtle); }


.layers { display: flex; flex-direction: column; gap: var(--space-2); }
.layer { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); border: var(--border-w) solid var(--border); background: var(--surface); }
.layer--win { border-color: var(--accent); background: var(--accent-subtle); }
.layer__n { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); width: 1rem; }
.layer__name { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-strong); flex: 1; }
.layer__v { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }


.pref { display: grid; gap: var(--space-3); padding: var(--space-4) 0;
  border-bottom: var(--border-w) solid var(--border-subtle); }
@media (min-width: 768px) { .pref { grid-template-columns: 14rem minmax(0, 1fr); align-items: start; gap: var(--space-6); } }
.pref:last-child { border-bottom: 0; }
.pref__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-strong); }
.pref__key { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle);
  display: block; margin-top: var(--space-1); }
.pref__say { font-size: var(--text-xs); color: var(--accent); margin-top: var(--space-2);
  font-family: var(--font-mono); }
.pref__help { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); }


.record { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.75;
  background: var(--bg-inset); border: var(--border-w) solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-4); max-height: 22rem; overflow-y: auto; }
.record b { color: var(--accent); font-weight: 400; }
.record i { color: var(--text-subtle); font-style: normal; }


.wiz { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-6); }
.wiz__step { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full); border: var(--border-w) solid var(--border); background: var(--surface);
  font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--text-subtle); }
.wiz__step--on { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent); }
.wiz__step--done { color: var(--success); border-color: transparent; background: var(--success-subtle); }
.wiz__n { font-family: var(--font-mono); font-weight: 700; }


.roles { display: flex; gap: 0.15rem; flex-wrap: wrap; }
.roles button { appearance: none; border: var(--border-w) solid transparent; background: transparent;
  border-radius: var(--radius-xs); padding: 0.1rem var(--space-2); font-size: var(--text-2xs);
  color: var(--text-subtle); cursor: pointer; text-transform: lowercase; }
.roles button:hover { background: var(--surface-hover); color: var(--text); }
.roles button[aria-pressed="true"] { background: var(--accent-subtle); border-color: var(--accent-border);
  color: var(--accent); font-weight: 600; }


.optcards { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .optcards { grid-template-columns: repeat(3, 1fr); } }
.optcard { display: flex; flex-direction: column; gap: var(--space-2); align-items: center; text-align: center;
  padding: var(--space-4); border: var(--border-w) solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); cursor: pointer; transition: all var(--duration-fast) var(--ease-default); }
.optcard:hover { border-color: var(--border-strong); }
.optcard[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-subtle);
  box-shadow: 0 0 0 1px var(--accent); }
.optcard__frame { border: var(--border-w-thick) solid var(--border-strong); border-radius: var(--radius-xs);
  background: var(--bg-muted); }
.optcard[aria-pressed="true"] .optcard__frame { border-color: var(--accent); }
.optcard__frame--169 { width: 3.25rem; height: 1.83rem; }
.optcard__frame--916 { width: 1.5rem; height: 2.67rem; }
.optcard__frame--auto { width: 2.4rem; height: 2rem; }
.optcard__name { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-strong); }
.optcard__hint { font-size: var(--text-2xs); color: var(--text-subtle); }


.actionbar { position: sticky; bottom: 0; z-index: var(--z-sticky);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  padding: var(--space-4); margin-top: var(--space-5);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: var(--border-w) solid var(--border); }
@media (min-width: 1024px) { .actionbar { bottom: 0; } }


.invoice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  padding: var(--space-3) 0; border-bottom: var(--border-w) solid var(--border-subtle); font-size: var(--text-sm); }
.invoice:last-child { border-bottom: 0; }
.invoice__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text); width: 7rem; flex: none; }
.invoice__d { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-subtle); width: 6rem; flex: none; }
.invoice__a { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700;
  color: var(--text-strong); margin-left: auto; }


.chart { display: flex; align-items: flex-end; gap: 0.35rem; height: 8rem; }
.chart__bar { flex: 1; background: var(--accent-subtle); border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  position: relative; min-height: 2px; }
.chart__bar i { position: absolute; inset: auto 0 0 0; display: block; background: var(--accent);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0; }
.chart__x { display: flex; gap: 0.35rem; margin-top: var(--space-2); }
.chart__x span { flex: 1; text-align: center; font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--text-subtle); }




.transform { display: grid; gap: var(--space-6); align-items: stretch; }
@media (min-width: 900px) {
  .transform { grid-template-columns: minmax(0, 1fr) 5.5rem minmax(0, 1fr); align-items: center; }
}
.transform__panel { display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-5); border: var(--border-w) solid var(--border);
  border-radius: var(--radius-xl); background: var(--surface); min-width: 0; }
.transform__panel--in { background: var(--surface-subtle); }
.transform__panel--out { border-color: var(--accent-border); box-shadow: var(--shadow-md); }
.transform__label { font-size: var(--text-2xs); font-weight: var(--font-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-subtle); }
.transform__panel--out .transform__label { color: var(--accent); }
.transform__head { font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: var(--font-bold); color: var(--text-strong); }
.transform__note { font-size: var(--text-xs); color: var(--text-muted); }


.transform__arrow { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--space-2); color: var(--accent); }
.transform__arrow svg { width: 2rem; height: 2rem; }
@media (max-width: 899px) { .transform__arrow svg { transform: rotate(90deg); } }
.transform__arrow span { font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--text-muted); text-align: center; white-space: nowrap; }


.pile { display: flex; flex-direction: column; gap: var(--space-2); }
.pile__row { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  background: var(--surface); border: var(--border-w) solid var(--border-subtle);
  font-size: var(--text-xs); color: var(--text-muted); }
.pile__row:nth-child(2n) { margin-left: var(--space-4); }
.pile__row:nth-child(3n) { margin-right: var(--space-4); }
.pile__row b { color: var(--text); font-weight: var(--font-medium); }
.pile__row i { font-family: var(--font-mono); font-style: normal; margin-left: auto; }
.pile__tag { font-size: var(--text-2xs); padding: 0.05rem var(--space-2);
  border-radius: var(--radius-xs); background: var(--warning-subtle); color: var(--warning); }


.result { display: flex; flex-direction: column; gap: var(--space-3); }
.result__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-md);
  overflow: hidden; background: linear-gradient(150deg, var(--ink-700), var(--ink-950));
  display: grid; place-items: center; }
.result__frame--reel { aspect-ratio: 9 / 16; max-width: 9rem; margin-inline: auto; }
.result__dur { position: absolute; right: var(--space-2); bottom: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--white);
  background: rgba(0,0,0,.6); padding: 0.1rem var(--space-2); border-radius: var(--radius-xs); }
.result__cap { font-family: var(--font-display); font-size: var(--text-base);
  font-weight: var(--font-bold); color: var(--text-strong); }


.probsolve { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .probsolve { grid-template-columns: repeat(2, 1fr); } }
.probsolve__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4);
  padding: var(--space-5); border-radius: var(--radius-lg); border: var(--border-w) solid var(--border);
  background: var(--surface); }
.probsolve__icon { width: 2rem; height: 2rem; border-radius: var(--radius-md); display: grid;
  place-items: center; flex: none; }
.probsolve__icon--bad { background: var(--error-subtle); color: var(--error); }
.probsolve__icon--good { background: var(--accent-subtle); color: var(--accent); }
.probsolve__icon svg { width: 1.05rem; height: 1.05rem; }
.probsolve__q { font-size: var(--text-sm); color: var(--text-muted); }
.probsolve__a { font-family: var(--font-display); font-size: var(--text-base);
  font-weight: var(--font-bold); color: var(--text-strong); margin-top: var(--space-1); }
.probsolve__d { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-2);
  line-height: var(--leading-relaxed); }


.factrow { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .factrow { grid-template-columns: repeat(3, 1fr); } }
.fact { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface-subtle);
  border: var(--border-w) solid var(--border-subtle); }
.fact__n { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--font-extrabold);
  color: var(--text-strong); letter-spacing: var(--tracking-tighter); line-height: 1; }
.fact__n em { font-style: normal; color: var(--accent); }
.fact__l { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-2); }


.cmp { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.cmp th, .cmp td { padding: var(--space-3) var(--space-4); text-align: left;
  border-bottom: var(--border-w) solid var(--border-subtle); vertical-align: top; }
.cmp thead th { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--font-bold);
  color: var(--text-strong); border-bottom: var(--border-w-thick) solid var(--border-strong); }
.cmp thead th:first-child { font-family: var(--font-sans); font-size: var(--text-2xs);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-subtle);
  font-weight: var(--font-semibold); }
.cmp .us { background: var(--accent-subtle); }
.cmp th.us { color: var(--accent); }
.cmp td.yes { color: var(--success); font-weight: var(--font-semibold); }
.cmp td.no { color: var(--text-subtle); }
.cmp td.part { color: var(--warning); }
.cmp tbody tr:last-child td { border-bottom: 0; }


.versus { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .versus { grid-template-columns: repeat(4, 1fr); } }
.versus__col { padding: var(--space-5); border-radius: var(--radius-lg);
  border: var(--border-w) solid var(--border); background: var(--surface); }
.versus__col--win { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.versus__t { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--font-bold);
  color: var(--text-strong); }
.versus__cost { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted);
  margin-top: var(--space-2); }
.versus__list { list-style: none; padding: 0; margin-top: var(--space-4); display: flex;
  flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }
.versus__list li { display: flex; gap: var(--space-2); }



.hero--one { padding-block: 0.25rem 0.5rem; }
@media (min-width: 1024px) { .hero--one { padding-block: 0.35rem 0.6rem; } }
.hero--one .hero__inner { display: block; max-width: 40rem; margin-inline: auto; text-align: center; }
.hero--one .hero__title { font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height: 1.08; margin-top: 0; }
.hero--one .hero__video { max-width: 16rem; margin-top: 0.4rem; }
.hero--one .hero__video .video-poster,
.hero--one .hero__video .youtube-embed { max-height: 9rem; width: 100%; object-fit: cover; }
.hero--one .hero__sub { margin-top: 0.4rem; font-size: 0.92rem; line-height: 1.4; }
.hero--one .hero__cta { margin-top: 0.45rem; }
.hero--one .hero__proof,
.hero--one .s-fine { margin-top: 0.35rem; }
.hero--one .hero__title { margin-inline: auto; }
.hero--one .hero__sub { margin-inline: auto; max-width: 40rem; }
.hero--one .hero__cta,
.hero--one .hero__proof { justify-content: center; }
.hero--one .s-eyebrow.hero__eyebrow { justify-content: center; }
.hero--one .s-fine { margin-inline: auto; max-width: 40rem; }


.hero__video { max-width: 38rem; margin-inline: auto; }
.hero__video .vid { box-shadow: var(--shadow-md); }


@media (max-height: 760px) {
  .hero--one .hero__video { max-width: 18rem; }
  .hero--one .hero__proof, .hero--one .s-fine { display: none; }
}


.vid { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-xl); border: var(--border-w) solid var(--border-strong);
  background: var(--ink-950) center / cover no-repeat; box-shadow: var(--shadow-lg); }
.vid--reel { aspect-ratio: 9 / 16; max-width: 20rem; margin-inline: auto; }
.vid__caption { display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  margin-top: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); }
.vid__caption b { color: var(--text); font-weight: var(--font-semibold); }


.flow { display: flex; flex-direction: column; gap: var(--space-6); }
.flow__step { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.flow__label { display: inline-flex; align-items: center; gap: var(--space-2); align-self: center;
  font-size: var(--text-2xs); font-weight: var(--font-semibold); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--text-subtle); }
.flow__label--out { color: var(--accent); }
.flow__n { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-full);
  background: var(--accent); color: var(--text-on-accent); font-family: var(--font-mono);
  font-size: var(--text-2xs); font-weight: 700; }
.flow__down { display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  color: var(--accent); padding-block: var(--space-2); }
.flow__down svg { width: 1.75rem; height: 1.75rem; }
.flow__down span { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.flow__outs { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .flow__outs { grid-template-columns: repeat(3, 1fr); } }


.only-mobile { display: block; }
.only-desktop { display: none; }
@media (min-width: 1024px) { .only-mobile { display: none; } .only-desktop { display: block; } }
.only-tablet-up { display: none; }
@media (min-width: 768px) { .only-tablet-up { display: block; } }


[id] { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }