@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@700;900&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --ink:#0F1216; --panel:#161B21; --panel2:#1C232B; --line:#262E38;
  --text:#E9ECEF; --muted:#93A0AE; --amber:#FFB020; --amber-dim:#8A6516;
  --paper:#EFEDE7; --paper-line:#D8D4C8; --paper-ink:#1A1C1E; --paper-muted:#6B6E66;
  --red:#E4572E; --green:#2FAE6E; --accent:#FFB020;
  --display:'Archivo',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',Consolas,monospace;
}
*{box-sizing:border-box;margin:0}
body{background:var(--ink);color:var(--text);font:16px/1.65 var(--body);-webkit-font-smoothing:antialiased}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}

/* SMPTE test-bar brand mark */
.bars{display:inline-flex;height:14px;width:70px;flex:none}
.bars i{flex:1}
.bars i:nth-child(1){background:#c8c8c3}.bars i:nth-child(2){background:#e8c327}
.bars i:nth-child(3){background:#2ec5c5}.bars i:nth-child(4){background:#35c435}
.bars i:nth-child(5){background:#c936c9}.bars i:nth-child(6){background:#d13232}
.bars i:nth-child(7){background:#2d37c9}
.barline{display:flex;height:4px;width:100%}
.barline i{flex:1}
.barline i:nth-child(1){background:#c8c8c3}.barline i:nth-child(2){background:#e8c327}
.barline i:nth-child(3){background:#2ec5c5}.barline i:nth-child(4){background:#35c435}
.barline i:nth-child(5){background:#c936c9}.barline i:nth-child(6){background:#d13232}
.barline i:nth-child(7){background:#2d37c9}

.topnav{display:flex;align-items:center;gap:22px;padding:20px 0;font:13px var(--mono)}
.topnav .brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:500;letter-spacing:.04em;margin-right:auto}
.topnav a{color:var(--muted);text-decoration:none;letter-spacing:.03em}
.topnav a:hover,.topnav a.on{color:var(--amber)}

.eyebrow{font:12px/1 var(--mono);color:var(--amber);letter-spacing:.22em;text-transform:uppercase;margin-bottom:18px}
h1{font-family:var(--display);font-weight:900;letter-spacing:-.015em;line-height:1.04}
h1 .off{color:var(--amber)}
.sub{color:var(--muted);max-width:600px;margin:18px auto 0;font-size:16.5px}

button,.btn{background:var(--amber);border:0;border-radius:4px;padding:14px 24px;color:#141414;
  font:600 14px var(--mono);letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
button:hover,.btn:hover{filter:brightness(1.08)}
button:disabled{opacity:.5;cursor:wait}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber);filter:none}

.fineprint{font-size:12.5px;color:var(--muted)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:26px;margin:20px 0}
.card label{display:block;font:12px var(--mono);color:var(--muted);letter-spacing:.14em;text-transform:uppercase;margin:16px 0 7px}
.card input,.card textarea{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:4px;
  padding:13px 15px;color:var(--text);font:15px var(--mono)}
.card input:focus,.card textarea:focus{outline:none;border-color:var(--amber)}
.hidden{display:none}
.error{color:var(--red);text-align:center;margin-top:12px;font:14px var(--mono)}

/* ---- report: light paper card on the dark console ---- */
.report{background:var(--paper);color:var(--paper-ink);border-radius:6px;padding:0;overflow:hidden;
  margin:26px 0;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.report-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:16px 26px;border-bottom:1px solid var(--paper-line);font:12px var(--mono);color:var(--paper-muted);
  letter-spacing:.1em;text-transform:uppercase}
.report-body{padding:26px}
.report h2{font-family:var(--display);font-weight:900;font-size:22px;letter-spacing:-.01em}
.report .fineprint{color:var(--paper-muted)}

/* VU-style meter */
.meter{margin:22px 0 6px}
.meter-scale{position:relative;height:34px;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),var(--paper-line) calc(10% - 1px) 10%);border:1px solid var(--paper-line);border-radius:3px;overflow:hidden}
.meter-fill{position:absolute;inset:0 auto 0 0;width:0;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.meter-needle{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--paper-ink);transition:left .9s cubic-bezier(.2,.8,.2,1)}
.meter-labels{display:flex;justify-content:space-between;font:11px var(--mono);color:var(--paper-muted);margin-top:6px;letter-spacing:.08em}
.meter-read{font:500 15px var(--mono);margin-top:14px}

.bucket{margin-top:22px;padding-top:22px;border-top:1px solid var(--paper-line)}
.bucket h3{display:flex;justify-content:space-between;align-items:baseline;font:600 15.5px var(--body)}
.bucket h3 .n{font:500 13px var(--mono)}
.bucket .bar{height:8px;background:#E2DFD5;border-radius:2px;margin:10px 0 4px;overflow:hidden}
.bucket .bar i{display:block;height:100%}
.flag{margin:12px 0;padding:12px 15px;background:#E7E4DB;border-radius:4px;border-left:3px solid var(--amber)}
.flag.high{border-left-color:var(--red)} .flag.low{border-left-color:var(--green)}
.flag b{font-size:14.5px} .flag p{font-size:14px;color:#4A4D46;margin-top:3px}
.flag .fix{color:var(--paper-ink);font-size:14px;margin-top:6px}
.flag .fix::before{content:"FIX → ";font:500 11px var(--mono);color:var(--green);letter-spacing:.06em}
.clean{color:var(--green);font:14px var(--mono)}

.demo-note{font:12px var(--mono);color:var(--red);letter-spacing:.1em;padding:10px 26px;background:#E7E4DB;border-bottom:1px solid var(--paper-line)}

.emailbox{display:flex;gap:10px;margin-top:14px}
.emailbox input{flex:1;background:var(--ink);border:1px solid var(--line);border-radius:4px;padding:12px 14px;color:var(--text);font:14px var(--mono)}

section.info{padding:26px 0 60px}
section.info h2{font-family:var(--display);font-weight:700;font-size:19px;margin:30px 0 8px}
section.info p,section.info li{color:var(--muted);font-size:15.5px}

footer{border-top:1px solid var(--line);padding:26px 0 34px;color:var(--muted);font:12.5px var(--mono);text-align:center;margin-top:40px}
footer a{color:var(--muted)}

article{padding:26px 0 60px}
article h1{font-size:clamp(26px,4.4vw,38px);margin-bottom:10px}
article h2{font-family:var(--display);font-weight:700;font-size:20px;margin:28px 0 8px}
article p,article li{color:var(--muted);font-size:15.5px;margin-bottom:10px}
article strong{color:var(--text)}
article a{color:var(--amber)}
.cta{display:block;text-align:center;background:var(--amber);color:#141414;text-decoration:none;border-radius:4px;
  padding:15px;margin-top:26px;font:600 14px var(--mono);letter-spacing:.05em;text-transform:uppercase}

.pricegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:22px}
.pricegrid ul{list-style:none;margin:16px 0;padding:0}
.pricegrid li{font-size:14.5px;color:var(--muted);padding:5px 0}
.pricegrid li::before{content:"✓ ";color:var(--green);font-family:var(--mono)}
.price{font:900 38px var(--display)} .price small{font:400 13px var(--mono);color:var(--muted)}

/* console hero specifics */
.hero{padding:58px 0 26px;text-align:center}
.hero h1{font-size:clamp(32px,5.6vw,52px)}
.console{max-width:620px;margin:36px auto 10px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px;text-align:left}
.console .plate{display:flex;justify-content:space-between;font:11px var(--mono);color:var(--muted);letter-spacing:.18em;padding:6px 8px 10px}
.console .row{display:flex;gap:10px}
.console input{flex:1;background:var(--ink);border:1px solid var(--line);border-radius:4px;padding:15px 16px;color:var(--text);font:15px var(--mono)}
.console input:focus{outline:none;border-color:var(--amber)}
.scanline{height:2px;background:var(--line);margin-top:10px;position:relative;overflow:hidden;border-radius:1px}
.scanline i{position:absolute;top:0;bottom:0;left:-30%;width:30%;background:var(--amber);border-radius:1px}
.scanning .scanline i{animation:sweep 1.1s linear infinite}
@keyframes sweep{to{left:100%}}

.sigrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:34px 0}
.sig{background:var(--panel);padding:20px 22px}
.sig .k{font:11px var(--mono);color:var(--amber);letter-spacing:.16em;text-transform:uppercase}
.sig b{display:block;margin:8px 0 5px;font-size:15.5px}
.sig p{font-size:13.5px;color:var(--muted);line-height:1.55}

/* ===== shared v2 experience layer ===== */
.grain{position:fixed;inset:-50%;z-index:5;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(10) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}}
::selection{background:var(--amber);color:#141414}
.boot{opacity:0;animation:bootin .7s ease-out forwards}
.boot.d1{animation-delay:.15s}.boot.d2{animation-delay:.35s}.boot.d3{animation-delay:.55s}.boot.d4{animation-delay:.8s}
@keyframes bootin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero h1 .row{display:block;overflow:hidden}
.hero h1 .row span{display:inline-block;transform:translateY(110%);animation:rise .8s cubic-bezier(.2,.8,.2,1) forwards}
.hero h1 .row:nth-child(2) span{animation-delay:.14s}
@keyframes rise{to{transform:none}}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.reveal.vis{opacity:1;transform:none}
.endband{margin:70px 0 0;text-align:center;padding:56px 24px;border:1px solid var(--line);border-radius:6px;
  background:radial-gradient(ellipse at 50% -20%,rgba(255,176,32,.08),transparent 60%),var(--panel)}
.endband h2{font-family:var(--display);font-weight:900;font-size:clamp(22px,3.2vw,34px);margin-bottom:10px}
.endband p{color:var(--muted);margin-bottom:24px}
footer.signoff{border:0;margin-top:60px;padding-bottom:44px}
footer.signoff .bars{margin:0 auto 14px;display:flex;height:10px;width:56px}
footer.signoff .eot{letter-spacing:.28em;color:var(--muted);font-size:11px;margin-bottom:10px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.boot,.reveal{opacity:1!important;transform:none!important}.hero h1 .row span{transform:none!important}}
@media (max-width:560px){.console .row{flex-direction:column}.report-head{padding:14px 18px}.report-body{padding:20px 18px}}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}