/* TeckWorx Editor Tools — design mockup */
:root{
  --bg:#0f1012; --bg-2:#141518; --surface:#1a1c20; --surface-2:#22252a; --surface-3:#2b2f35;
  --line:#2c3036; --line-2:#3a3f46;
  --text:#ecebe7; --muted:#a3a39d; --faint:#72726c;
  --amber:#f2a93b; --amber-ink:#1b1204; --cyan:#4cc9d8; --green:#62d48f; --red:#ef6b5b;
  --accent:var(--amber); --accent-ink:var(--amber-ink);
  --font-display:'Cabinet Grotesk','Satoshi',system-ui,sans-serif;
  --font-body:'Satoshi','Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --text-xs:clamp(.75rem,.72rem + .15vw,.8125rem);
  --text-sm:clamp(.875rem,.85rem + .12vw,.9375rem);
  --text-base:clamp(1rem,.97rem + .15vw,1.0625rem);
  --text-lg:clamp(1.125rem,1.05rem + .4vw,1.375rem);
  --text-xl:clamp(1.5rem,1.25rem + 1.1vw,2.25rem);
  --text-2xl:clamp(2rem,1.4rem + 2.6vw,3.5rem);
  --text-hero:clamp(2.4rem,1.5rem + 3.6vw,4.5rem);
  --r-sm:6px; --r:10px; --r-lg:16px;
  --wrap:1200px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
.t-cyan{--accent:var(--cyan); --accent-ink:#04181b}
.t-green{--accent:var(--green); --accent-ink:#06190e}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
.mono{font-family:var(--font-mono);font-size:.9em}
.muted{color:var(--muted)}
.eyebrow{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
h1,h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.02}
h1{font-size:var(--text-hero)}
h2{font-size:var(--text-xl);line-height:1.1}
h3{font-size:var(--text-lg);font-weight:700;line-height:1.25}
.lead{font-size:var(--text-lg);color:var(--muted);max-width:56ch;line-height:1.5}
section{padding:clamp(3.5rem,8vw,7rem) 0}
.sec-head{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2.5rem;max-width:62ch}

/* mockup banner */
.mock-banner{background:repeating-linear-gradient(135deg,#1b1c1f 0 10px,#17181b 10px 20px);border-bottom:1px solid var(--line);font-size:var(--text-xs);color:var(--muted);text-align:center;padding:.4rem 1rem}
.mock-banner b{color:var(--amber);font-weight:600}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(15,16,18,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:2rem;height:64px}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:var(--text-sm)}
.brand svg{width:28px;height:28px;color:var(--amber)}
.brand small{display:block;font-family:var(--font-mono);font-size:10px;color:var(--faint);font-weight:400;letter-spacing:.06em;text-transform:uppercase}
.nav-links{display:flex;gap:1.5rem;font-size:var(--text-sm);color:var(--muted)}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--text)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:.75rem}
.dd{position:relative}
.dd-menu{position:absolute;top:calc(100% + 14px);left:-1rem;width:320px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:.5rem;opacity:0;visibility:hidden;transform:translateY(-4px);transition:.18s var(--ease);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:none}
.dd-menu a{display:flex;gap:.75rem;padding:.7rem;border-radius:var(--r);align-items:flex-start}
.dd-menu a:hover{background:var(--surface-2)}
.dd-menu strong{display:block;color:var(--text);font-size:var(--text-sm)}
.dd-menu span{font-size:var(--text-xs);color:var(--muted)}
.dot{width:10px;height:10px;border-radius:3px;flex:none;margin-top:.35rem}
.menu-btn{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:44px;padding:0 1.15rem;border-radius:var(--r);font-weight:600;font-size:var(--text-sm);transition:transform .15s var(--ease),background .15s,border-color .15s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{border:1px solid var(--line-2);color:var(--text)}
.btn-ghost:hover{border-color:var(--muted);background:var(--surface)}
.btn-sm{height:36px;padding:0 .9rem}
.btn svg{width:16px;height:16px}

/* badges */
.badges{display:flex;flex-wrap:wrap;gap:.5rem}
.badge{font-family:var(--font-mono);font-size:11px;letter-spacing:.03em;border:1px solid var(--line-2);color:var(--muted);padding:.25rem .55rem;border-radius:999px;background:var(--bg-2)}
.badge.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}

/* hero */
.hero{position:relative;padding:clamp(3rem,7vw,6rem) 0 clamp(2rem,5vw,4rem);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lead{margin:1.25rem 0 2rem}
.cta-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1.5rem}
.hero-meta{font-size:var(--text-xs);color:var(--faint);margin-top:1rem}
.hero-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/11}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-photo .play{position:absolute;left:1rem;bottom:1rem;display:flex;align-items:center;gap:.6rem;background:rgba(15,16,18,.78);backdrop-filter:blur(8px);padding:.55rem .9rem .55rem .55rem;border-radius:999px;font-size:var(--text-xs);border:1px solid var(--line-2)}
.play i{width:30px;height:30px;border-radius:50%;background:var(--accent);display:grid;place-items:center}
.play i::after{content:"";border-left:9px solid var(--accent-ink);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}

/* product cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.pcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem;display:flex;flex-direction:column;gap:1rem;transition:border-color .2s,transform .2s var(--ease);overflow:hidden}
.pcard:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));transform:translateY(-2px)}
.pcard .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.pcard .ico svg{width:22px;height:22px}
.pcard h3 span{display:block;font-size:var(--text-xs);font-family:var(--font-mono);color:var(--faint);font-weight:400;margin-top:.2rem}
.pcard p{color:var(--muted);font-size:var(--text-sm)}
.pcard .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:1rem;border-top:1px solid var(--line);font-size:var(--text-sm)}
.pcard .foot a{color:var(--accent);font-weight:600}
.pcard .mini{height:120px;border-radius:var(--r);background:var(--bg-2);border:1px solid var(--line);overflow:hidden;position:relative}

/* bundle */
.bundle{display:grid;grid-template-columns:1.3fr 1fr;gap:2rem;align-items:center;background:linear-gradient(120deg,#1d1a14,var(--surface) 60%);border:1px solid #3a3222;border-radius:var(--r-lg);padding:clamp(1.5rem,4vw,3rem)}
.price-big{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800;line-height:1}
.price-big s{font-size:.45em;color:var(--faint);font-weight:500;margin-left:.5rem}
.save{display:inline-block;background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber);font-size:var(--text-xs);font-weight:700;padding:.2rem .55rem;border-radius:999px}

/* compat strip */
.compat{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.compat div{padding:1.25rem;border-right:1px solid var(--line);background:var(--bg-2)}
.compat div:last-child{border-right:0}
.compat b{display:block;font-size:var(--text-sm)}
.compat span{font-size:var(--text-xs);color:var(--muted);font-family:var(--font-mono)}

/* quotes */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.quote{border-left:2px solid var(--accent);padding:.25rem 0 .25rem 1.25rem}
.quote p{font-size:var(--text-base)}
.quote cite{display:block;margin-top:.75rem;font-style:normal;font-size:var(--text-xs);color:var(--faint)}

/* newsletter */
.news{display:flex;gap:2rem;justify-content:space-between;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:2.5rem 0}
.news form{display:flex;gap:.5rem;flex:1;max-width:460px}
input[type=email],input[type=search]{flex:1;height:44px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:0 1rem;color:var(--text);font:inherit;font-size:var(--text-sm)}

/* footer */
.site-footer{padding:3.5rem 0 2rem;color:var(--muted);font-size:var(--text-sm)}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:2rem}
.foot-grid h4{color:var(--text);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;font-family:var(--font-mono);font-weight:500;margin-bottom:.9rem}
.foot-grid ul{list-style:none;display:grid;gap:.5rem}
.foot-grid a:hover{color:var(--text)}
.legal{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:var(--text-xs);color:var(--faint);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* app window mock */
.win{background:#16171a;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.win-bar{display:flex;align-items:center;gap:.4rem;padding:.6rem .8rem;border-bottom:1px solid var(--line);background:#1c1e22;font-size:11px;color:var(--faint);font-family:var(--font-mono)}
.win-bar i{width:10px;height:10px;border-radius:50%;background:#3a3d42}
.win-bar span{margin-left:.6rem}
.win-body{padding:1rem}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;counter-reset:s}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem;counter-increment:s}
.step::before{content:"0" counter(s);font-family:var(--font-mono);color:var(--accent);font-size:var(--text-xs);display:block;margin-bottom:1.5rem}
.step p{color:var(--muted);font-size:var(--text-sm);margin-top:.4rem}

/* feature rows */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding:2.5rem 0;border-top:1px solid var(--line)}
.feat:nth-child(even) .feat-media{order:-1}
.feat ul{list-style:none;margin-top:1rem;display:grid;gap:.5rem;color:var(--muted);font-size:var(--text-sm)}
.feat li::before{content:"→";color:var(--accent);margin-right:.6rem}
.feat-media{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.25rem;min-height:240px}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.tbl th,.tbl td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--line)}
.tbl th{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--faint);font-weight:500;text-transform:uppercase;letter-spacing:.06em}
.tbl td:first-child{color:var(--text);font-weight:500}
.tbl td{color:var(--muted)}
.ok{color:var(--green)} .part{color:var(--amber)} .no{color:var(--faint)}
.tbl-wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:auto;background:var(--bg-2)}

/* pricing card */
.buy{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.75rem;display:flex;flex-direction:column;gap:1rem}
.plan.hl{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,var(--surface)),var(--surface))}
.plan ul{list-style:none;display:grid;gap:.5rem;font-size:var(--text-sm);color:var(--muted)}
.plan li::before{content:"✓";color:var(--accent);margin-right:.6rem}
.plan .price{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800}
.plan .price small{font-family:var(--font-body);font-size:var(--text-xs);color:var(--faint);font-weight:500}
.plan .btn{margin-top:auto}

/* currency toggle */
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{padding:.35rem .9rem;border-radius:999px;font-size:var(--text-xs);color:var(--muted);font-weight:600}
.seg button[aria-pressed=true]{background:var(--surface-3);color:var(--text)}

/* faq */
.faq{display:grid;gap:.5rem;max-width:820px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:0 1.25rem}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 0;font-weight:600;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-family:var(--font-mono);font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);font-size:var(--text-sm);padding-bottom:1.1rem;max-width:68ch}

/* changelog */
.log{display:grid;gap:0;border-left:1px solid var(--line-2);margin-left:.4rem}
.log-item{position:relative;padding:0 0 1.75rem 1.75rem}
.log-item::before{content:"";position:absolute;left:-5px;top:.45rem;width:9px;height:9px;border-radius:50%;background:var(--surface-3);border:1px solid var(--line-2)}
.log-item:first-child::before{background:var(--accent);border-color:var(--accent)}
.log-item .v{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text)}
.log-item .d{font-size:var(--text-xs);color:var(--faint);margin-left:.6rem}
.log-item ul{margin:.5rem 0 0 1rem;color:var(--muted);font-size:var(--text-sm)}

/* sticky bar */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(20,21,24,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .3s var(--ease)}
.sticky.show{transform:none}
.sticky .wrap{display:flex;align-items:center;gap:1rem;height:64px}
.sticky .nm{font-weight:700;font-size:var(--text-sm)}
.sticky .nm span{color:var(--faint);font-weight:400;margin-left:.5rem;font-family:var(--font-mono);font-size:var(--text-xs)}
.sticky .btns{margin-left:auto;display:flex;gap:.5rem}

/* MIDI controller map */
.map{display:grid;grid-template-columns:1.6fr 1fr;gap:1.5rem;align-items:stretch}
.device{background:linear-gradient(180deg,#1e2024,#15161a);border:1px solid var(--line-2);border-radius:18px;padding:1.5rem 1.25rem;position:relative}
.device-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;font-family:var(--font-mono);font-size:11px;color:var(--faint)}
.dev-grid{display:grid;grid-template-columns:1fr 64px;gap:1rem}
.enc-row{display:grid;grid-template-columns:repeat(8,1fr);gap:.5rem;margin-bottom:1rem}
.enc{aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3a3d43,#1a1b1e 70%);border:2px solid #2a2c30;position:relative;box-shadow:0 0 0 3px #111,0 0 0 4px var(--line-2)}
.enc::after{content:"";position:absolute;left:50%;top:10%;width:2px;height:30%;background:#cfcfcf;transform-origin:50% 130%;transform:translateX(-50%) rotate(var(--rot,-30deg));border-radius:2px}
.btn-row{display:grid;grid-template-columns:repeat(8,1fr);gap:.5rem;margin-bottom:.5rem}
.pad{aspect-ratio:1.5;border-radius:6px;background:#26282c;border:1px solid #33363b}
.ctl{cursor:pointer;transition:box-shadow .15s,background .15s,border-color .15s}
.ctl:hover,.ctl.active{border-color:var(--accent)}
.pad.lit{background:color-mix(in srgb,var(--accent) 70%,#2a2a2a);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 55%,transparent)}
.enc.active{box-shadow:0 0 0 3px #111,0 0 0 5px var(--accent),0 0 18px color-mix(in srgb,var(--accent) 50%,transparent)}
.fader-slot{background:#0d0e10;border:1px solid var(--line-2);border-radius:8px;position:relative;height:100%;min-height:200px}
.fader-slot::before{content:"";position:absolute;left:50%;top:10%;bottom:10%;width:3px;background:#2d2f33;transform:translateX(-50%)}
.fader-cap{position:absolute;left:50%;transform:translateX(-50%);top:38%;width:42px;height:26px;border-radius:5px;background:linear-gradient(#5a5d63,#34363a);border:1px solid #666}
.layer{display:flex;gap:.5rem;margin-top:1rem;align-items:center;font-family:var(--font-mono);font-size:11px;color:var(--faint)}
.layer .pad{width:40px;aspect-ratio:1.5}
.map-info{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem;display:flex;flex-direction:column;gap:1rem}
.tabs{display:flex;flex-wrap:wrap;gap:.35rem}
.tab{padding:.4rem .8rem;border-radius:999px;font-size:var(--text-xs);border:1px solid var(--line-2);color:var(--muted);font-weight:600}
.tab[aria-selected=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.readout{border-top:1px solid var(--line);padding-top:1rem;min-height:140px}
.readout .k{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--faint)}
.readout .f{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;margin:.25rem 0 .4rem;line-height:1.1}
.readout p{font-size:var(--text-sm);color:var(--muted)}
.kbd{font-family:var(--font-mono);font-size:11px;border:1px solid var(--line-2);border-bottom-width:2px;padding:.1rem .4rem;border-radius:4px;color:var(--text);background:var(--bg-2)}

/* device gallery */
.devices{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.devc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.25rem;display:flex;flex-direction:column;gap:.75rem}
.devc .shape{height:70px;border-radius:8px;background:var(--bg-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--faint)}
.devc b{font-size:var(--text-sm)}
.st{font-family:var(--font-mono);font-size:11px;padding:.15rem .5rem;border-radius:999px;align-self:flex-start}
.st.full{background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green)}
.st.comm{background:color-mix(in srgb,var(--amber) 15%,transparent);color:var(--amber)}
.st.gen{background:var(--surface-3);color:var(--muted)}

/* optimizer compare */
.compare{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);aspect-ratio:16/8;user-select:none;background:#000}
.compare .side{position:absolute;inset:0}
.compare img{width:100%;height:100%;object-fit:cover}
.compare .before img{filter:saturate(.6) brightness(.8) blur(1.2px)}
.compare .after{clip-path:inset(0 0 0 var(--pos,50%))}
.compare .hud{position:absolute;top:1rem;padding:.45rem .7rem;border-radius:8px;background:rgba(10,10,12,.8);font-family:var(--font-mono);font-size:12px;border:1px solid var(--line-2)}
.compare .before .hud{left:1rem}
.compare .after .hud{right:1rem}
.hud b{font-size:1.25rem;display:block;font-weight:600}
.hud .bad{color:var(--red)} .hud .good{color:var(--accent)}
.compare .handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:var(--accent);transform:translateX(-1px)}
.compare .handle::after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:700}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize}
.bars{display:grid;gap:1rem}
.bar-row{display:grid;grid-template-columns:200px 1fr;gap:1rem;align-items:center;font-size:var(--text-sm)}
.bar-row .tr{display:grid;gap:4px}
.bar{height:22px;border-radius:5px;background:var(--surface-3);position:relative;display:flex;align-items:center;padding-left:.6rem;font-family:var(--font-mono);font-size:11px;color:var(--text)}
.bar.after{background:color-mix(in srgb,var(--accent) 70%,#0a0a0a);color:var(--accent-ink);font-weight:600}
.switch{width:36px;height:20px;border-radius:999px;background:var(--surface-3);position:relative;flex:none;transition:.2s}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#bbb;transition:.2s}
.switch[aria-checked=true]{background:var(--accent)}
.switch[aria-checked=true]::after{left:18px;background:#04181b}
.chg{display:flex;align-items:center;gap:1rem;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.chg:last-child{border-bottom:0}
.chg .nm{flex:1}
.chg .nm b{display:block;font-size:var(--text-sm);font-weight:600}
.chg .nm span{font-size:var(--text-xs);color:var(--faint);font-family:var(--font-mono)}
.chg .val{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);text-align:right}
.chg .val s{color:var(--faint)}

/* backup */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:1rem;align-items:center}
.flow .node{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem;text-align:center}
.flow .node .ico{margin:0 auto 1rem;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.flow .node p{font-size:var(--text-sm);color:var(--muted);margin-top:.3rem}
.flow .arrow{color:var(--faint);font-family:var(--font-mono)}
.checks{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.chk{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1rem;display:flex;gap:.7rem;align-items:flex-start;font-size:var(--text-sm)}
.chk::before{content:"✓";color:var(--accent);font-weight:700}
.chk span{display:block;font-size:var(--text-xs);color:var(--faint);font-family:var(--font-mono)}
.chk.x::before{content:"✕";color:var(--faint)}
.chk.x{background:transparent;border-style:dashed}
.progress{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--accent);border-radius:inherit;transition:width .4s var(--ease)}
.tasks{list-style:none;display:grid;gap:.45rem;font-family:var(--font-mono);font-size:12px;color:var(--faint);margin-top:1rem}
.tasks li.done{color:var(--text)}
.tasks li.done::before{content:"✓ ";color:var(--accent)}
.tasks li:not(.done)::before{content:"· "}

/* docs */
.docs{display:grid;grid-template-columns:240px 1fr 200px;gap:2.5rem;padding:2.5rem 0 5rem}
.docs aside{position:sticky;top:88px;align-self:start;font-size:var(--text-sm)}
.docs aside h5{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:1.25rem 0 .5rem;font-weight:500}
.docs aside a{display:block;padding:.3rem .6rem;border-radius:6px;color:var(--muted)}
.docs aside a:hover{color:var(--text)}
.docs aside a.cur{background:var(--surface-2);color:var(--text)}
.doc h1{font-size:var(--text-2xl);margin:.5rem 0 1rem}
.doc h2{margin:2.5rem 0 .75rem;font-size:var(--text-lg);font-family:var(--font-body);font-weight:700;letter-spacing:0}
.doc p,.doc li{color:var(--muted);max-width:68ch}
.doc ol,.doc ul{padding-left:1.25rem;display:grid;gap:.4rem}
.doc pre{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:1rem;font-family:var(--font-mono);font-size:13px;overflow:auto;margin:1rem 0;color:#d6d4cc}
.callout{border:1px solid color-mix(in srgb,var(--amber) 35%,var(--line));background:color-mix(in srgb,var(--amber) 6%,transparent);border-radius:var(--r);padding:1rem 1.25rem;margin:1.5rem 0;font-size:var(--text-sm);color:var(--muted)}
.callout b{color:var(--amber)}
.toc{font-size:var(--text-xs);color:var(--muted);display:grid;gap:.4rem}

/* download */
.dl{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.dlc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.75rem;display:flex;flex-direction:column;gap:1rem}
.dlc.rec{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.dlc .os{display:flex;align-items:center;gap:.75rem}
.dlc .os svg{width:30px;height:30px}
.hash{font-family:var(--font-mono);font-size:11px;color:var(--faint);word-break:break-all;background:var(--bg-2);padding:.6rem .75rem;border-radius:6px;border:1px solid var(--line)}
.prodtabs{display:flex;gap:.5rem;margin-bottom:1.5rem;flex-wrap:wrap}

/* reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* responsive */
@media (max-width:980px){
  .hero-grid,.bundle,.map,.feat,.buy{grid-template-columns:1fr}
  .feat:nth-child(even) .feat-media{order:0}
  .cards,.steps,.quotes{grid-template-columns:1fr}
  .compat{grid-template-columns:repeat(2,1fr)}
  .compat div{border-bottom:1px solid var(--line)}
  .devices,.checks{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .docs{grid-template-columns:1fr}
  .docs aside{position:static}
  .docs .toc-col{display:none}
  .flow{grid-template-columns:1fr}
  .flow .arrow{transform:rotate(90deg);justify-self:center}
  .dl{grid-template-columns:1fr}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;background:var(--bg);padding:1rem clamp(1rem,4vw,2rem) 1.5rem;border-bottom:1px solid var(--line)}
  .nav-links.open .dd-menu{display:none}
  .menu-btn{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line-2);border-radius:var(--r)}
  .nav-right .btn-ghost{display:none}
  .bar-row{grid-template-columns:1fr}
  .sticky .nm span{display:none}
}
@media (max-width:560px){
  .brand small{display:none}
  .devices,.checks{grid-template-columns:1fr}
  .enc-row,.btn-row{gap:.3rem}
  .sticky .btns .btn-ghost{display:none}
  .compare{aspect-ratio:4/3}
}

/* Completed prototype: accessible journeys and compact layouts. */
:root{--faint:#999b95}
[hidden]{display:none!important}
.skip-link{position:fixed;left:1rem;top:-10rem;z-index:200;padding:.75rem 1rem;background:var(--amber);color:var(--amber-ink);border-radius:6px}
.skip-link:focus{top:1rem}
.demo-notice{padding-top:1rem;color:var(--muted);font-size:.875rem}
.preview-dialog{margin:auto;width:min(600px,calc(100% - 2rem));max-height:85dvh;overflow:auto;background:var(--surface);color:var(--text);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:2rem;box-shadow:0 30px 100px #0008}
.preview-dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}
.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}
.dialog-close{width:44px;height:44px;font-size:1.75rem;border:1px solid var(--line);border-radius:8px}
.preview-dialog h2{margin-bottom:1rem;line-height:1.2}
.preview-dialog p{color:var(--muted);margin-bottom:1.5rem}
.dialog-links{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem}
.form-status{font-size:.875rem;max-width:45ch;color:var(--amber)}
.doc-entry{padding:1.5rem 0;border-bottom:1px solid var(--line);scroll-margin-top:90px}
.doc-entry h2{margin:.5rem 0 1rem}
#search-status{font-size:.875rem;color:var(--muted);margin:.5rem 0}
.docs aside input{margin:.5rem 0;width:100%}
.play{color:var(--text);font:inherit;cursor:pointer}
.dd::after{content:'';position:absolute;left:0;right:0;top:100%;height:18px}
.badge{font-size:.75rem}
.brand small{font-size:.75rem}
main,section,.hero-grid>*,.plan,.doc{min-width:0}
pre{max-width:100%;overflow:auto}
.tab[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
@media(max-width:980px){.nav-links.open .dd-menu{display:flex;position:static;flex-direction:column;opacity:1;visibility:visible;transform:none;width:100%;box-shadow:none;margin-top:.5rem}.dd::after{display:none}.docs{padding-left:1rem;padding-right:1rem}.docs aside{max-height:none}}
@media(max-width:560px){.nav{gap:.5rem}.brand{font-size:.8125rem}.brand svg{width:24px;flex:none}.nav-right{gap:.4rem}.nav-right .btn-primary{padding:0 .55rem}.cta-row{flex-wrap:wrap}.btn{max-width:100%;height:auto;min-height:44px;white-space:normal;text-align:center;padding-top:.6rem;padding-bottom:.6rem}.dlc{padding:1.1rem}.dlc .os{flex-wrap:wrap}.sticky .wrap{gap:.5rem}.sticky .nm{font-size:.875rem}.device{padding:.75rem}.preview-dialog{padding:1.25rem}.foot-grid{gap:1.5rem}}

/* Supplied product branding and confirmed launch offers. */
.product-logo{width:100%;height:auto;max-width:250px;aspect-ratio:1;object-fit:contain;margin:0 auto 1rem}
.plan-logo{width:96px;height:96px;object-fit:contain;margin-bottom:1rem}
.hero-product-logo{object-fit:contain!important;width:100%;height:auto!important;background:none!important}
.hero-photo:has(.hero-product-logo){background:transparent;border:0;aspect-ratio:1}
.product-masthead-logo{width:116px;height:116px;object-fit:contain;margin-bottom:1rem}
.regular-price{font-size:.875rem;color:var(--muted);margin:.75rem 0 .3rem}
.regular-price s{margin-left:.4rem}
.price small{display:block!important;font-size:.875rem!important;color:var(--accent);font-family:var(--font-body);font-weight:600;letter-spacing:0;margin:.3rem 0 0}
.pcard .foot{align-items:flex-end;gap:1rem}
.pcard .price{font-size:1.65rem;line-height:1.2;font-weight:700}
.pcard .foot>span{white-space:nowrap;font-size:.875rem}
.accessory-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1rem}
.bonus-item{color:var(--amber)!important}
#accessories{scroll-margin-top:88px}
#bonus-layout{display:block;width:100%;font:inherit;padding:.7rem;margin:.6rem 0 1rem;background:var(--bg);border:1px solid var(--line-2);border-radius:8px;color:var(--text)}
.preview-dialog label{font-size:.875rem;font-weight:600}
@media(min-width:981px) and (max-width:1120px){.nav{gap:1rem}.nav-links{gap:.85rem}.nav-right{gap:.5rem}.nav-right .btn-ghost{display:none}}

/* Tighter home product cards, with less space around the logos. */
#products .pcard{padding: .75rem 1.25rem 1.25rem;gap:.65rem}
#products .pcard .product-logo{width:min(100%,190px);height:auto;max-width:190px;flex:none;margin:0 auto}
#products .pcard .regular-price{margin:.25rem 0 .2rem}
#products .pcard .foot{padding-top:.75rem}

/* Rollout pages retain the product design and compact logo spacing. */
.prose{margin-top:2.5rem;max-width:1100px}.prose h2{font-size:clamp(1.3rem,2vw,1.9rem);margin:2rem 0 .75rem}.prose p,.prose li{line-height:1.8;max-width:78ch}.prose a:not(.btn){color:var(--amber)}.prose .cards h2{margin:.5rem 0}.support-form{display:grid;gap:1rem;max-width:650px;margin-top:1rem}.support-form label{display:grid;gap:.4rem}.support-form input,.support-form select,.support-form textarea{width:100%;padding:.8rem;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;font:inherit}.support-form .consent{display:block}.support-form .consent input{width:auto;margin-right:.5rem}.support-form button{justify-self:start}.compat{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.support-form button:disabled{opacity:.65;cursor:wait}
.qr-placeholder{display:grid;place-content:center;text-align:center;width:min(100%,260px);min-height:260px;padding:1rem;border:2px dashed var(--line);border-radius:12px;background:var(--surface);margin:1rem 0}.admin-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0}.admin-tabs button{padding:.7rem 1rem;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:8px;cursor:pointer}.portal-form fieldset{padding:1rem;border:1px solid var(--line);border-radius:8px;display:grid;gap:.7rem}.portal-form [data-form-status]{overflow-wrap:anywhere}.prose code{display:block;overflow-wrap:anywhere;padding:.7rem;margin:.6rem 0 1rem;background:var(--surface)}[hidden]{display:none!important}

/* Keep invisible verification active; use visible text attribution in each form. */
.grecaptcha-badge{visibility:hidden}
.support-form [data-captcha]{position:absolute;height:0;width:0;overflow:hidden}
.support-form .captcha-notice{font-size:.875rem;line-height:1.55;color:var(--muted);margin:0;max-width:65ch}
.support-form .captcha-notice a{color:var(--amber);text-decoration:underline;text-underline-offset:2px}

html:not([data-usd-enabled="true"]) .seg{display:none!important}

/* ---- additions for the controller map (add these to assets/style.css) ---- */
.map-pick{display:grid;gap:.6rem;margin-bottom:1.25rem}
.map-pick .tabs{align-items:center}
.map-pick small{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--faint);text-transform:uppercase;letter-spacing:.08em;min-width:5.5rem}
.map-note{font-size:var(--text-sm);color:var(--muted);max-width:70ch}
.device .row-label{font-family:var(--font-mono);font-size:10px;color:var(--faint);letter-spacing:.06em;margin:0 0 .3rem}
.layer .pad{display:grid;place-items:center;font-size:10px;color:var(--muted)}
.layer .pad.lit{color:#111;font-weight:700}
.map-table{margin-top:1.5rem}
.map-table h3{margin-bottom:.75rem}
[data-controller-map] .map>*{min-width:0}[data-controller-map] .tbl-wrap{overflow-x:auto}[data-controller-map] .tabs{flex-wrap:wrap}[data-controller-map] .enc{width:100%;min-width:0}[data-controller-map] .dev-grid>div{min-width:0}
@media(max-width:700px){[data-controller-map] .map{grid-template-columns:1fr}[data-controller-map] .dev-grid{grid-template-columns:minmax(0,1fr) 32px;gap:.6rem}[data-controller-map] .device-top{flex-wrap:wrap;gap:.5rem}[data-controller-map] .pad{min-width:0}[data-controller-map] .device{padding:.75rem}}

.assignment-details summary{cursor:pointer;color:var(--amber);font-weight:600;padding:.8rem 0;min-height:44px}.assignment-details summary:focus-visible{outline:2px solid var(--amber);outline-offset:4px}.assignment-details[open] summary{margin-bottom:.75rem}

/* MIDIWORX product: benefits, new workflow, setup, then live controls. */
.midi-product-page main>section{padding-top:2.5rem;padding-bottom:2.5rem}.midi-product-page main>.hero{padding-top:5rem}.workflow-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}.workflow-card{padding:2rem;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,#1b1d21,#111215)}.workflow-card h3{margin:1rem 0 .5rem;font-size:var(--text-lg)}.workflow-card ul{padding-left:1.2rem;margin:1.5rem 0;line-height:1.9;color:var(--muted)}.workflow-link{color:var(--amber);font-weight:600;display:inline-block;margin-top:.75rem}.app-chip{display:inline-grid;place-items:center;min-width:52px;height:52px;border-radius:12px;font-size:24px;font-weight:700;border:1px solid #54565d}.resolve-chip{color:#f7c05b;background:#182128}.premiere-chip{color:#b2a4ff;background:#211845}.lightroom-chip{color:#7cceff;background:#102336}.lightroom-highlight{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:2rem;padding:2rem;border:1px solid var(--amber);border-radius:16px;background:linear-gradient(120deg,#191918,#12161b)}.lightroom-highlight h2{margin:.75rem 0 1rem}.lightroom-highlight p{max-width:65ch;line-height:1.7;margin:.6rem 0}.lightroom-visual{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;color:var(--muted);font-family:var(--font-mono)}.lightroom-visual i{display:block;width:140px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--amber) 55%,#34363b 55%)}.lightroom-visual i:nth-of-type(2){background:linear-gradient(90deg,var(--amber) 35%,#34363b 35%)}.product-hero-art{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.product-hero-art .hero-product-logo{max-height:340px;object-fit:contain}.midi-product-page .device-support-section{padding-top:1rem}
@media(max-width:700px){.workflow-grid,.lightroom-highlight{grid-template-columns:1fr}.workflow-card,.lightroom-highlight{padding:1.25rem}.lightroom-visual{display:none}.midi-product-page main>section{padding-top:1.5rem;padding-bottom:1.5rem}.midi-product-page main>.hero{padding-top:3rem}}

.resolve-logo{object-fit:contain;border:0;background:transparent;border-radius:0}

.control-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.control-feature-grid p{line-height:1.7}.control-feature-grid h3{margin-top:0}@media(max-width:800px){.control-feature-grid{grid-template-columns:1fr}}

/* Hidden purchase bars cannot cover footer content or receive keyboard focus. */
.sticky{visibility:hidden;pointer-events:none}.sticky.show{visibility:visible;pointer-events:auto}
@media(max-width:650px){.sticky .wrap{height:auto;min-height:64px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}.sticky .nm{flex:1}.sticky .nm span,.sticky .btns .btn-ghost{display:none}.sticky .btns{flex:none}.sticky .btns .btn{white-space:nowrap}}
/* Prices use existing typefaces and purchase-card geometry. */
.mwx-price-block .regular-price{font-family:var(--font-body);font-size:var(--text-base);font-weight:500;color:var(--text);margin-bottom:12px;line-height:1.5}.mwx-price-block .regular-price s{font-family:var(--font-display);font-size:clamp(1.25rem,1.1rem + .4vw,1.6rem);font-weight:700;color:var(--text);margin-left:6px}.mwx-price-block .price small,.mwx-price-block .price-big small{font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.5;letter-spacing:.03em;color:var(--amber);display:block;margin-top:8px}.mwx-price-block.no-offer .regular-price{margin-bottom:0}.mwx-price-block [hidden]{display:none!important}.commerce-form .form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.commerce-form [data-discount-status]{margin-top:12px}

[data-free-items]{max-width:800px;margin-top:24px}[data-free-items] label{display:grid;gap:8px}[data-free-items] select,[data-free-items] textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);color:var(--text);font:inherit;overflow-wrap:anywhere}[data-free-items] .btn{width:fit-content}[data-free-items] [aria-disabled=true]{opacity:.45;pointer-events:none}