/* ===== Design tokens =====
   Concept: telephony equipment rack / patch panel.
   bg-deep   #0F1417  rack panel background
   panel     #171E23  raised panel surface
   panel-2   #1D262C  card surface
   brass     #C68E4E  patch-cable / jack accent (warm, physical)
   teal      #4FA6A0  signal / active-state accent
   paper     #EDE7DC  primary text (warm off-white, not pure white)
   muted     #8A97A0  secondary text
   line      #2A343B  hairline borders
*/
:root{
  --bg-deep:#0F1417;
  --panel:#171E23;
  --panel-2:#1B242A;
  --brass:#C68E4E;
  --brass-bright:#E0AC6C;
  --teal:#4FA6A0;
  --violet:#8B7FD1;
  --paper:#EDE7DC;
  --muted:#8A97A0;
  --line:#2A343B;
  --danger:#C4694F;
  --font-display:'Barlow Semi Condensed', sans-serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg-deep);
  color:var(--paper);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* subtle rack texture: faint horizontal ridges */
.rack-texture{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:repeating-linear-gradient(180deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px);
  opacity:0.6;
}

a{color:var(--brass-bright);}

/* ===== Topbar ===== */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(15,20,23,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:1180px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap;
}
.brand{display:flex; align-items:baseline; gap:10px;}
.brand-mark{
  font-family:var(--font-display); font-weight:700; letter-spacing:0.06em;
  font-size:1.15rem; color:var(--brass-bright);
}
.brand-sub{font-size:0.78rem; color:var(--muted); font-family:var(--font-mono);}
.tabs{display:flex; gap:4px; flex-wrap:wrap;}
.tab{
  background:transparent; border:1px solid transparent; color:var(--muted);
  font-family:var(--font-display); font-weight:600; letter-spacing:0.03em;
  font-size:0.92rem; padding:8px 14px; border-radius:3px; cursor:pointer;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.tab:hover{color:var(--paper);}
.tab.active{color:var(--bg-deep); background:var(--brass); border-color:var(--brass);}
.tab:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}

main{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 24px 80px;}

/* ===== Hero ===== */
.hero{padding:56px 0 48px; border-bottom:1px solid var(--line); margin-bottom:40px;}
.hero-inner{display:grid; grid-template-columns:1.15fr 0.85fr; gap:40px; align-items:center;}
.eyebrow{
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--teal); margin:0 0 14px;
}
.hero h1{
  font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem,5vw,3.6rem);
  line-height:1.02; margin:0 0 20px; letter-spacing:-0.01em;
}
.hero-lede{color:var(--muted); font-size:1.02rem; max-width:52ch; margin:0 0 26px;}
.hero-lede strong{color:var(--paper); font-weight:600;}
.hero-stats{display:flex; gap:28px; flex-wrap:wrap;}
.hero-stat{}
.hero-stat .num{
  display:block; font-family:var(--font-mono); font-size:1.5rem; font-weight:600; color:var(--brass-bright);
}
.hero-stat .lbl{font-size:0.76rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em;}
.hero-visual{display:flex; align-items:center; justify-content:center;}
#hero-patchbay{width:100%; height:auto; max-width:420px;}

/* ===== Sections / views ===== */
.view{display:none;}
.view.active{display:block;}
.section-head{margin-bottom:26px;}
.section-head h2{
  font-family:var(--font-display); font-weight:700; font-size:1.9rem; margin:0 0 6px;
  letter-spacing:-0.01em;
}
.section-head p{color:var(--muted); margin:0; max-width:64ch;}

/* ===== Library cards ===== */
.card-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:20px;}
.doc-card{
  background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:22px 22px 20px;
  position:relative; overflow:hidden;
}
.doc-card::before{
  content:''; position:absolute; top:0; left:0; width:4px; height:100%; background:var(--brass);
}
.doc-card .doc-title{font-family:var(--font-display); font-weight:700; font-size:1.3rem; margin:0 0 4px;}
.doc-card .doc-sub{color:var(--muted); font-size:0.85rem; font-family:var(--font-mono); margin:0 0 16px;}
.doc-card .doc-stats{display:flex; gap:20px; flex-wrap:wrap; margin-bottom:16px;}
.doc-card .doc-stats div{font-family:var(--font-mono);}
.doc-card .doc-stats .num{color:var(--teal); font-weight:600; font-size:1.15rem; display:block;}
.doc-card .doc-stats .lbl{color:var(--muted); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em;}
.doc-card .doc-desc{color:var(--paper); opacity:0.85; font-size:0.92rem; margin:0;}

/* ===== Search ===== */
.search-bar{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:14px;}
#search-input{
  flex:1 1 340px; background:var(--panel); border:1px solid var(--line); color:var(--paper);
  padding:13px 16px; border-radius:4px; font-family:var(--font-mono); font-size:0.95rem;
}
#search-input:focus{outline:none; border-color:var(--brass);}
.search-filters{display:flex; gap:8px;}
.filter-chip{
  background:var(--panel); border:1px solid var(--line); color:var(--muted);
  font-family:var(--font-mono); font-size:0.8rem; padding:9px 14px; border-radius:4px; cursor:pointer;
  transition:all .15s ease;
}
.filter-chip.active{border-color:var(--teal); color:var(--teal);}
.filter-chip:hover{color:var(--paper);}
.search-meta{color:var(--muted); font-size:0.82rem; font-family:var(--font-mono); margin-bottom:18px;}
.search-results{display:flex; flex-direction:column; gap:10px;}
.result-item{
  background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--brass);
  padding:14px 16px; border-radius:4px; cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.result-item:hover{border-color:var(--teal);}
.result-item:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
.result-item.expanded{background:var(--panel-2); border-left-color:var(--teal);}
.result-item .result-meta{
  display:flex; gap:10px; align-items:center; margin-bottom:6px; font-family:var(--font-mono); font-size:0.75rem;
}
.result-item .badge{
  background:var(--panel-2); color:var(--teal); padding:2px 8px; border-radius:3px; text-transform:uppercase; letter-spacing:0.04em;
}
.result-item .pageref{color:var(--muted);}
.result-item .expand-hint{color:var(--brass-bright); margin-left:auto; font-size:0.72rem;}
.result-item .result-heading{font-weight:600; color:var(--brass-bright); font-size:0.85rem; margin:0 0 4px;}
.result-item .result-text{color:var(--paper); opacity:0.88; font-size:0.9rem; margin:0;}
.result-item mark{background:var(--brass); color:var(--bg-deep); padding:0 2px; border-radius:2px;}
.result-full{
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
  font-size:0.88rem; color:var(--paper); opacity:0.9; line-height:1.6;
}
.result-item:not(.expanded) .result-full{display:none;}
.result-full p:not(.ch-pages){white-space:pre-wrap;}

/* ===== Patch bay ===== */
.patchbay-wrap{display:grid; grid-template-columns:1fr 120px 1fr; gap:0; align-items:start;}
.patchbay-panel{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:16px;}
.panel-label{
  font-family:var(--font-mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--muted); margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--line);
}
.jack-column{display:flex; flex-direction:column; gap:8px;}
.jack{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:4px; cursor:pointer;
  border:1px solid transparent; background:var(--panel-2); transition:all .15s ease;
}
.jack:hover{border-color:var(--brass);}
.jack.active{border-color:var(--teal); background:rgba(79,166,160,0.12);}
.jack .dot{width:9px; height:9px; border-radius:50%; background:var(--brass); flex-shrink:0; box-shadow:0 0 0 3px rgba(198,142,78,0.15);}
.jack.active .dot{background:var(--teal); box-shadow:0 0 0 3px rgba(79,166,160,0.2);}
.jack .jack-label{font-family:var(--font-mono); font-size:0.85rem; text-transform:capitalize;}
.patchbay-cables{display:flex; align-items:stretch; justify-content:center;}
#cable-svg{width:100%; height:100%; min-height:280px;}
.cable-path{fill:none; stroke:var(--line); stroke-width:2; transition:stroke .2s ease, stroke-width .2s ease;}
.cable-path.active{stroke:var(--brass); stroke-width:2.5;}
.patch-detail{margin-top:22px;}
.patch-hint{color:var(--muted); font-size:0.9rem; font-style:italic;}

/* ===== Concept Graph ===== */
.graph-legend{
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-bottom:16px;
  font-family:var(--font-mono); font-size:0.78rem; color:var(--muted);
}
.graph-legend span{display:inline-flex; align-items:center; gap:6px;}
.graph-legend .dot{width:10px; height:10px; border-radius:50%; display:inline-block;}
.dot-shared{background:var(--teal);}
.dot-tv{background:var(--brass);}
.dot-qm{background:var(--violet);}
.graph-legend-sep{opacity:0.4;}
.edge-sample{width:20px; height:0; border-top:2px solid var(--teal); display:inline-block;}
.edge-sample.edge-same{border-top:1px dashed var(--line);}
.graph-wrap{
  background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:10px;
  margin-bottom:18px;
}
#concept-svg{width:100%; height:auto; min-height:340px; display:block;}
.graph-edge{stroke:var(--line); transition:stroke .15s ease, stroke-width .15s ease;}
.graph-edge.edge-cross{stroke:rgba(79,166,160,0.35);}
.graph-edge.edge-same{stroke:rgba(138,151,160,0.2); stroke-dasharray:3 3;}
.graph-edge.active{stroke:var(--brass-bright) !important; stroke-width:2.5 !important; stroke-dasharray:none !important;}
.graph-node{cursor:pointer;}
.graph-node .node-circle{
  fill:var(--panel-2); stroke:var(--brass); stroke-width:1.5; transition:all .15s ease;
}
.graph-node.kind-shared .node-circle{stroke:var(--teal); fill:rgba(79,166,160,0.15);}
.graph-node.kind-telviva .node-circle{stroke:var(--brass); fill:rgba(198,142,78,0.12);}
.graph-node.kind-queuemetrics .node-circle{stroke:var(--violet); fill:rgba(139,127,209,0.12);}
.graph-node .node-label{
  font-family:var(--font-mono); font-size:9px; fill:var(--muted); pointer-events:none;
}
.graph-node:hover .node-circle, .graph-node.active .node-circle{
  fill:var(--brass); stroke:var(--brass-bright);
}
.graph-node:hover .node-label, .graph-node.active .node-label{fill:var(--paper); font-weight:600;}
.graph-node:focus-visible .node-circle{outline:2px solid var(--teal);}
.graph-detail{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:16px;}
.graph-detail-head{
  font-family:var(--font-display); font-weight:700; color:var(--brass-bright); font-size:1.05rem; margin:0 0 12px;
}
.patch-compare{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.patch-compare-col{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--teal); border-radius:4px; padding:16px;}
.patch-compare-col h4{
  margin:0 0 4px; font-family:var(--font-display); font-size:1.05rem; color:var(--brass-bright);
}
.patch-compare-col .pageref{font-family:var(--font-mono); font-size:0.75rem; color:var(--muted); margin-bottom:10px; display:block;}
.patch-compare-col p{margin:0; font-size:0.88rem; color:var(--paper); opacity:0.88;}
.patch-compare-col.expanded{border-left-color:var(--teal);}
.btn-expand{
  margin-top:12px; background:transparent; border:1px solid var(--line); color:var(--brass-bright);
  font-family:var(--font-mono); font-size:0.75rem; padding:7px 12px; border-radius:4px; cursor:pointer;
  transition:border-color .15s ease;
}
.btn-expand:hover, .btn-expand:focus-visible{border-color:var(--teal); outline:none;}
.patch-full{
  margin:12px 0 0; padding-top:12px; border-top:1px solid var(--line);
  font-size:0.88rem; color:var(--paper); opacity:0.9; line-height:1.6; white-space:pre-wrap;
}
.patch-compare-col:not(.expanded) .patch-full{display:none;}

/* ===== Chunk explorer ===== */
.chunk-doc-select{display:flex; gap:8px; margin-bottom:18px;}
.chunk-strip{
  display:flex; gap:2px; height:64px; background:var(--panel); border:1px solid var(--line); border-radius:6px;
  padding:8px; overflow-x:auto;
}
.chunk-seg{
  flex:1 0 6px; min-width:6px; background:var(--panel-2); border-radius:2px; cursor:pointer;
  transition:background .12s ease, transform .12s ease; border-top:2px solid var(--brass);
}
.chunk-seg:hover, .chunk-seg.active{background:var(--teal); border-top-color:var(--teal); transform:scaleY(1.05);}
.chunk-detail{
  margin-top:16px; background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:16px;
  min-height:70px;
}
.chunk-detail .ch-heading{font-family:var(--font-display); font-weight:700; color:var(--brass-bright); font-size:1.05rem; margin:0 0 4px;}
.chunk-detail .ch-pages{font-family:var(--font-mono); font-size:0.75rem; color:var(--muted); margin-bottom:8px; display:block;}
.chunk-detail .ch-text-scroll{max-height:260px; overflow-y:auto; padding-right:6px;}
.chunk-detail p.ch-text{margin:0; font-size:0.88rem; color:var(--paper); opacity:0.85; white-space:pre-wrap;}

/* ===== Extracted screenshots ===== */
.chunk-image{
  margin:12px 0; padding:0; border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--bg-deep);
}
.chunk-image img{display:block; width:100%; height:auto;}
.chunk-image figcaption{
  padding:6px 10px; font-family:var(--font-mono); font-size:0.72rem; color:var(--muted);
  border-top:1px solid var(--line); background:var(--panel-2);
}
.chunk-stats{display:flex; gap:28px; margin-top:20px; flex-wrap:wrap;}
.chunk-stats div{font-family:var(--font-mono);}
.chunk-stats .num{color:var(--teal); font-weight:600; font-size:1.2rem; display:block;}
.chunk-stats .lbl{color:var(--muted); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em;}

/* ===== AI insights ===== */
.insight-grid{display:flex; flex-direction:column; gap:20px; margin-bottom:32px;}
.insight-card-wide{}
.drafting-note{
  font-family:var(--font-mono); font-size:0.76rem; color:var(--brass-bright); opacity:0.85;
  margin:0 0 18px; padding:8px 12px; background:rgba(198,142,78,0.08); border-left:2px solid var(--brass);
  border-radius:2px;
}
.insight-card{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:20px;}
.insight-card-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;}
.insight-card h3{font-family:var(--font-display); font-size:1.2rem; margin:0;}
.demo-badge{
  font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em;
  background:rgba(198,142,78,0.15); color:var(--brass-bright); padding:3px 8px; border-radius:3px; white-space:nowrap;
}
.demo-badge.live-badge{background:rgba(79,166,160,0.18); color:var(--teal);}
.insight-desc{color:var(--muted); font-size:0.87rem; margin:0 0 16px;}
.ask-box{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px;}
.ask-box select{
  flex:1 1 220px; background:var(--panel-2); border:1px solid var(--line); color:var(--paper);
  padding:10px 12px; border-radius:4px; font-family:var(--font-body); font-size:0.85rem;
}
.ask-textarea{
  width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--paper);
  padding:10px 12px; border-radius:4px; font-family:var(--font-body); font-size:0.85rem;
  resize:vertical; margin-bottom:12px;
}
.ask-textarea:focus{outline:none; border-color:var(--brass);}
.btn-primary{
  background:var(--brass); color:var(--bg-deep); border:none; font-family:var(--font-display);
  font-weight:700; letter-spacing:0.02em; padding:10px 18px; border-radius:4px; cursor:pointer;
  transition:background .15s ease;
}
.btn-primary:hover{background:var(--brass-bright);}
.btn-primary:disabled{opacity:0.5; cursor:default;}
.ai-output{
  background:var(--panel-2); border:1px solid var(--line); border-radius:4px; padding:14px 16px;
  font-size:0.88rem; color:var(--paper); opacity:0.92; min-height:20px; white-space:pre-wrap; margin-top:12px;
}
.ai-output:empty{display:none;}
.ai-sources{margin-top:10px;}
.ai-sources:empty{display:none;}
.sources-label{font-family:var(--font-mono); font-size:0.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin:0 0 6px;}
.source-chip-row{display:flex; flex-wrap:wrap; gap:6px;}
.source-chip{
  font-family:var(--font-mono); font-size:0.72rem; color:var(--teal); background:rgba(79,166,160,0.1);
  border:1px solid rgba(79,166,160,0.3); padding:3px 8px; border-radius:3px; cursor:pointer;
  appearance:none; transition:all .15s ease;
}
.source-chip:hover{border-color:var(--teal);}
.source-chip.active{background:var(--teal); color:var(--bg-deep); border-color:var(--teal); font-weight:600;}
.source-chip:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
.source-detail{margin-top:0;}
.source-detail:empty{margin-top:0;}
.source-detail:not(:empty){
  margin-top:10px; padding:12px 14px; background:var(--panel-2); border:1px solid var(--line); border-radius:4px;
}
.source-detail-text{margin:0; font-size:0.85rem; color:var(--paper); opacity:0.88; line-height:1.6; white-space:pre-wrap;}
.phase2-note{
  background:var(--panel); border:1px dashed var(--line); border-radius:6px; padding:20px 22px;
}
.phase2-note h3{font-family:var(--font-display); margin:0 0 8px; font-size:1.1rem; color:var(--teal);}
.phase2-note p{margin:0; color:var(--muted); font-size:0.9rem; max-width:70ch;}
.phase2-note strong{color:var(--paper);}

/* ===== Process Flow ===== */
.flow-output{margin-top:20px;}
.flow-title{font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--brass-bright); margin:0 0 18px;}
.flow-steps{display:flex; flex-direction:column;}
.flow-step{
  display:flex; gap:16px; position:relative; padding-bottom:24px;
}
.flow-step:not(:last-child)::before{
  content:''; position:absolute; left:17px; top:38px; bottom:0; width:2px; background:var(--line);
}
.flow-step-num{
  flex:0 0 36px; width:36px; height:36px; border-radius:50%; background:var(--panel-2); border:2px solid var(--brass);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:600; color:var(--brass-bright);
  z-index:1;
}
.flow-step-body{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:14px 16px; flex:1;}
.flow-step-title{font-family:var(--font-display); font-weight:700; font-size:1.05rem; margin:0 0 6px;}
.flow-step-detail{font-size:0.88rem; color:var(--paper); opacity:0.85; margin:0 0 8px;}

/* ===== Brief Generator ===== */
.brief-output{margin-top:20px;}
.brief-doc{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:24px;}
.brief-title{font-family:var(--font-display); font-weight:700; font-size:1.4rem; margin:0 0 6px; color:var(--brass-bright);}
.brief-section{margin-top:22px; padding-top:18px; border-top:1px solid var(--line);}
.brief-section:first-of-type{margin-top:18px;}
.brief-section h4{
  font-family:var(--font-mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--teal);
  margin:0 0 10px;
}
.brief-overview{font-size:0.94rem; color:var(--paper); opacity:0.92; margin:0; line-height:1.65;}
.brief-item{margin-bottom:12px;}
.brief-item .term{font-weight:600; color:var(--brass-bright); margin-right:6px;}
.brief-item p{margin:2px 0 0; font-size:0.88rem; color:var(--paper); opacity:0.88;}
.brief-question-item{font-size:0.88rem; color:var(--paper); opacity:0.88; margin:0 0 8px; padding-left:18px; position:relative;}
.brief-question-item::before{content:'?'; position:absolute; left:0; color:var(--brass); font-weight:700;}
.brief-actions{display:flex; gap:10px; margin-top:20px;}
.btn-secondary{
  background:transparent; border:1px solid var(--line); color:var(--paper); font-family:var(--font-mono);
  font-size:0.78rem; padding:8px 14px; border-radius:4px; cursor:pointer; transition:border-color .15s ease;
}
.btn-secondary:hover{border-color:var(--teal); color:var(--teal);}

/* ===== Devil's Advocate ===== */
.devil-output{margin-top:12px;}
.devil-claim{
  background:var(--panel-2); border-left:3px solid var(--danger); border-radius:4px; padding:12px 14px;
  font-size:0.88rem; color:var(--paper); font-style:italic; margin-bottom:14px;
}
.devil-counterpoint{
  display:flex; gap:10px; margin-bottom:10px; padding:10px 12px; background:var(--panel-2); border-radius:4px;
  border-left:2px solid var(--brass);
}
.devil-counterpoint .cp-num{color:var(--brass-bright); font-family:var(--font-mono); font-weight:600; flex:0 0 auto;}
.devil-counterpoint p{margin:0; font-size:0.87rem; color:var(--paper); opacity:0.9;}
.devil-assessment{
  margin-top:14px; padding:12px 14px; background:rgba(79,166,160,0.08); border-left:3px solid var(--teal);
  border-radius:4px; font-size:0.88rem; color:var(--paper); opacity:0.92;
}
.citation-chip{
  display:inline-block; margin-top:6px; font-family:var(--font-mono); font-size:0.72rem; color:var(--teal);
  background:rgba(79,166,160,0.1); border:1px solid rgba(79,166,160,0.3); padding:2px 7px; border-radius:3px;
  cursor:pointer;
}
.citation-chip:hover{border-color:var(--teal);}
.citation-detail{
  margin-top:8px; padding:10px 12px; background:var(--panel); border:1px solid var(--line); border-radius:4px;
}

/* ===== Footer ===== */
.site-footer{
  border-top:1px solid var(--line); padding:20px 24px; text-align:center;
  color:var(--muted); font-size:0.78rem;
}
.mono{font-family:var(--font-mono); color:var(--brass-bright);}

/* ===== Responsive ===== */
@media (max-width:820px){
  .hero-inner{grid-template-columns:1fr; gap:28px;}
  .hero-visual{order:-1;}
  .patchbay-wrap{grid-template-columns:1fr; gap:16px;}
  .patchbay-cables{display:none;}
  .patch-compare{grid-template-columns:1fr;}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}

/* Focus visibility */
button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--teal); outline-offset:2px;
}