/* brutus brand: lime #C8FF00 on black. Display: Unbounded, text: Space Grotesk (both SIL OFL, in media/brand) */
@font-face { font-family:Unbounded; src:url("media/brand/Unbounded-latin.woff2") format("woff2"); font-weight:200 900; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("media/brand/SpaceGrotesk-latin.woff2") format("woff2"); font-weight:300 700; font-display:swap; }
:root { color-scheme:dark; --bg:#000; --text:#e8e8e8; --accent:#C8FF00; --muted:#8f8f8f; --line:#1f1f1f; --display:Unbounded,system-ui,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:72px; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.55 "Space Grotesk",system-ui,sans-serif; }
a { color:inherit; text-underline-offset:4px; }
a:hover { color:var(--accent); }
a:focus-visible,button:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.wrap { width:min(1280px,calc(100% - 64px)); margin-inline:auto; }

/* header: slim, over the video */
.masthead { position:sticky; top:0; z-index:5; background:#000; border-bottom:1px solid var(--line); }
.header-inner { height:60px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand img { display:block; width:150px; height:auto; }
nav { display:flex; align-items:center; gap:22px; font-size:14px; }
nav a { text-decoration:none; color:#cfcfcf; }
.nav-cta.nav-try { background:#FF3D6E; color:#fff !important; }
.button#try-editor { background:#FF3D6E; border-color:#FF3D6E; color:#fff; }
.button#try-editor:hover { color:#fff; }
.nav-cta { color:#000 !important; background:var(--accent); border-radius:7px; padding:0 12px; height:32px; display:inline-flex; align-items:center;
  font:700 11px/1 var(--display); letter-spacing:.02em; }

/* hero: the editor, whole and uncropped, with the pitch in a strip under it */
.hero { background:#000; padding-top:16px; }
.hero-frame { position:relative; width:min(1600px,calc(100% - 32px)); margin-inline:auto; aspect-ratio:16/9; max-height:calc(100svh - 170px);
  border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#000; }
.hero-frame video { width:100%; height:100%; object-fit:contain; display:block; }
.hero-copy { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:18px 8px; }
.hero h1 { font:600 clamp(16px,1.6vw,22px)/1.3 var(--display); letter-spacing:-.02em; margin:0; max-width:640px; }
.actions { display:flex; gap:10px; flex:none; }
.hero-text { display:grid; gap:10px; }
.badges { display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0; }
.badges li { font:600 11px/1 var(--display); letter-spacing:.02em; padding:7px 10px; border:1.5px solid #333; border-radius:6px; color:#c9c9c9; }
.badges li.ltx { border-color:var(--accent); color:var(--accent); }
.button { display:inline-flex; align-items:center; height:40px; padding:0 16px; border-radius:7px; border:1.5px solid var(--accent); background:var(--accent);
  color:#000; text-decoration:none; font:700 11px/1 var(--display); letter-spacing:.02em; }
.button.secondary { background:#000; color:var(--accent); }
.button:hover { color:#000; filter:brightness(1.08); }
.button.secondary:hover { color:var(--accent); }
#motion-toggle { position:static; height:40px; padding:0 14px; border-radius:7px; border:1px solid #444; background:#000a; color:#ddd;
  font:600 11px/1 var(--display); cursor:pointer; }

/* sections */
.section { padding-top:64px; }
h2 { font:700 clamp(20px,2vw,28px)/1.2 var(--display); letter-spacing:-.02em; margin:0 0 24px; }
p { margin:0 0 16px; }
.prose p { max-width:820px; color:#c9c9c9; font-size:18px; }

/* tabs (workflow steps, results): carved lime when selected */
.steps { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.step-tab,.cmp-tab { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px; border-radius:7px; border:1.5px solid #333; background:#0b0b0b;
  color:#bdbdbd; font:700 12px/1 var(--display); letter-spacing:.01em; cursor:pointer; }
.step-tab span { color:var(--accent); font-variant-numeric:tabular-nums; }
.step-tab[aria-selected="true"],.cmp-tab[aria-selected="true"] { background:var(--accent); border-color:var(--accent); color:#000; }
.step-tab[aria-selected="true"] span { color:#000; }
.step-tab:hover,.cmp-tab:hover { border-color:var(--accent); }
.steps.small .cmp-tab { height:34px; font-size:11px; }
.step-panel { display:grid; grid-template-columns:minmax(0,3fr) minmax(220px,1fr); gap:28px; align-items:center; }
.step-media { aspect-ratio:16/9; max-height:62vh; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#000; }
.step-media video { width:100%; height:100%; object-fit:contain; display:block; }
#step-text { color:#c9c9c9; font-size:17px; margin:0; }

/* editor + workflow side by side */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
figure { margin:0; min-width:0; }
.video-shell { aspect-ratio:16/9; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#000; }
.video-shell video,.video-shell img { width:100%; height:100%; object-fit:cover; display:block; }
figcaption { margin-top:8px; font-size:13px; color:var(--muted); }
.limits { display:grid; gap:28px; }
.limits figcaption { font-size:15px; line-height:1.5; max-width:820px; margin-top:12px; }
.limits figcaption b { color:var(--text); }
.feature-grid { list-style:none; padding:0; margin:24px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 28px; }
.feature-grid li { padding:16px 0 18px; border-top:1px solid var(--line); font-size:15px; line-height:1.5; color:var(--muted); }
.feature-grid li b { display:block; color:var(--text); font-size:16px; margin-bottom:4px; }
.feature-grid li b::before { content:""; display:inline-block; width:8px; height:8px; border-radius:2px; background:var(--accent); margin-right:10px; vertical-align:middle; }

/* results: three portraits, one example at a time */
.three-col { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; max-width:820px; }
.video-shell.portrait { aspect-ratio:9/16; }
.note { color:var(--muted); font-size:13px; margin-top:12px; }

/* install */
.install-steps { padding-left:22px; margin:0 0 16px; color:#c9c9c9; }
.install-steps li { padding:0 0 8px 6px; }
.install-steps li::marker { color:var(--accent); font:800 13px var(--display); }
code { font:13px ui-monospace,SFMono-Regular,monospace; color:var(--accent); }
.links { display:flex; flex-wrap:wrap; gap:20px; }
.links a { color:var(--accent); text-decoration:none; }
.fine { color:var(--muted); font-size:13px; }

footer { display:flex; align-items:center; justify-content:space-between; margin-top:64px; padding-block:20px; border-top:1px solid var(--line); }
.maker { display:flex; align-items:center; gap:4px; color:var(--muted); font-size:13px; text-decoration:none; }
.maker { gap:12px; }
.maker img { width:68px; height:auto; object-fit:contain; }
footer>a:last-child { color:var(--muted); font-size:13px; text-decoration:none; }
.skip { position:absolute; top:-100px; left:16px; z-index:10; background:var(--accent); color:#000; padding:10px; }
.skip:focus { top:10px; }

@media (max-width:820px) {
  .wrap { width:calc(100% - 32px); }
  nav a:not(.nav-cta) { display:none; }
  .brand img { width:124px; }
  .hero-copy { flex-direction:column; align-items:flex-start; }
  .step-panel { grid-template-columns:1fr; gap:14px; }
  .two-col { grid-template-columns:1fr; }
  .feature-grid { grid-template-columns:1fr 1fr; }
  .three-col { gap:8px; }
  .prose p { font-size:16px; }
  .step-tab { height:36px; padding:0 10px; font-size:11px; }
}
#cta-overlay { position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; z-index:4; opacity:0; overflow:visible; }
#cta-overlay.run { animation:cta-fade 3.6s ease forwards; }
#cta-overlay.run #cta-path { animation:cta-draw 1.2s cubic-bezier(.65,0,.35,1) .1s forwards; }
#cta-head, #cta-label, #cta-pill { opacity:0; }
#cta-pill { fill:#FF3D6E; stroke:none; }
#cta-overlay.run #cta-head { animation:cta-show .2s ease 1.25s forwards; }
#cta-overlay.run #cta-label, #cta-overlay.run #cta-pill { animation:cta-show .35s ease .05s forwards; }
#cta-label { fill:#fff; font:700 20px/1 Unbounded,system-ui,sans-serif; }
@media (max-width:800px) { #cta-label { font-size:15px; } }
@keyframes cta-draw { to { stroke-dashoffset:0; } }
@keyframes cta-show { to { opacity:1; } }
@keyframes cta-fade { 0% { opacity:1; } 80% { opacity:1; } 100% { opacity:0; } }
.button.cta-pulse { animation:cta-pulse 1.1s ease 1.2s 2; }
@keyframes cta-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(255,61,110,0); } 40% { box-shadow:0 0 0 10px rgba(255,61,110,.45); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

.stack { display:grid; gap:28px; }