.svg-label { font: 600 13px var(--font-body); fill: #15392f; }
.net-hero { padding-bottom: 18px; }

/* hero reroute: base = static "cut + rerouted" state (reduced motion) */
#hero-mesh .h-direct { opacity: .25; stroke: #b8603e; }
#hero-mesh .h-cut, #hero-mesh .h-alt { opacity: 1; }
#hero-mesh .h-mv-direct { display: none; }
@media (prefers-reduced-motion: no-preference) {
  #hero-mesh .h-direct { animation: hDirect 12s ease-in-out infinite; }
  #hero-mesh .h-cut { animation: hCut 12s ease-in-out infinite; }
  #hero-mesh .h-alt { animation: hAlt 12s ease-in-out infinite; }
  #hero-mesh .h-mv-direct { display: inline; animation: hMvD 12s step-end infinite; }
  #hero-mesh .h-mv-alt { animation: hMvA 12s step-end infinite; }
}
@keyframes hDirect { 0%,38% { opacity: 1; stroke: #5e8a63; } 46%,88% { opacity: .25; stroke: #b8603e; } 96%,100% { opacity: 1; stroke: #5e8a63; } }
@keyframes hCut { 0%,40% { opacity: 0; } 46%,88% { opacity: 1; } 94%,100% { opacity: 0; } }
@keyframes hAlt { 0%,44% { opacity: 0; } 54%,88% { opacity: .9; } 94%,100% { opacity: 0; } }
@keyframes hMvD { 0% { opacity: 1; } 40% { opacity: 0; } 94% { opacity: 1; } }
@keyframes hMvA { 0% { opacity: 0; } 46% { opacity: 1; } 92% { opacity: 0; } }
#hero-mesh.paused *, #hero-mesh.paused { animation-play-state: paused; }

/* spectrum */
.spectrum { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.spectrum .card { padding: 22px; gap: 10px; align-items: flex-start; position: relative; }
.spectrum .card:not(:last-child)::after { content: ""; position: absolute; top: 40px; right: -17px; width: 17px; height: 2px; background: var(--sage); z-index: 1; }
.spectrum .step-n { color: var(--positive); }
.spectrum h3 { font-size: 1.15rem; }
.spectrum .pair { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); width: 100%; }
.spectrum .pair > div { grid-template-columns: 1fr; gap: 6px; justify-items: start; }
.spectrum .pair p { font-size: .85rem; }

.dark .ticks b { color: var(--paper); }
.principle-quote { margin: 56px 0 0; }
.principle-quote blockquote { margin: 0; max-width: 24ch; }
.dark .principle em { color: var(--accent); }
.principle-quote figcaption { margin-top: 18px; color: var(--sage); }

/* simulation */
.sim { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.sim-ctl { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 10px 0 6px; }
.sim-ctl label { color: var(--muted); }
.sim-ctl select { font: 600 .9rem var(--font-body); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 99px; padding: 8px 14px; min-height: 38px; }
#sim-svg { display: block; width: 100%; height: auto; }
#sim-svg .lk { stroke: #5e8a63; stroke-width: 2.5; stroke-linecap: round; fill: none; }
#sim-svg .lk.cut { stroke: #b8603e; stroke-dasharray: 3 7; opacity: .7; }
#sim-svg .lk.route { stroke: #e8b54d; stroke-width: 5; }
#sim-svg .lk-hit { stroke: transparent; stroke-width: 22; fill: none; cursor: pointer; }
#sim-svg .nd { cursor: pointer; }
#sim-svg .nd circle.bg { fill: #fbfaf5; stroke: #d3d8c9; stroke-width: 1.5; }
#sim-svg .nd.off circle.bg { fill: #ece9df; stroke: #b8603e; stroke-dasharray: 4 4; }
#sim-svg .nd.off .gl { opacity: .3; }
#sim-svg .nd.reach circle.bg { stroke: #5e8a63; stroke-width: 2.5; }
#sim-svg .nd.cut-side circle.bg { fill: #f8ebe4; }
#sim-svg .nd.src circle.bg { stroke: #e8b54d; stroke-width: 3.5; }
#sim-svg .gl { fill: none; stroke: #15392f; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#sim-svg text { font: 600 12.5px var(--font-body); fill: #15392f; text-anchor: middle; pointer-events: none; }
.sim-status { margin-top: 12px; font-weight: 600; min-height: 3.2em; }
.sim-status.bad { color: var(--clay); }
.sim-toggles { display: grid; gap: 16px; }
.sim-toggles fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px 14px; margin: 0; background: var(--paper-bright); min-width: 0; }
.sim-toggles legend { color: var(--muted); padding: 0 6px; }
.tgl { display: flex; flex-wrap: wrap; gap: 8px; }
.tgl button { font: 600 .82rem var(--font-body); min-height: 38px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; }
.tgl button:hover { border-color: var(--ink); }
.tgl button[aria-pressed="true"] { background: #f8ebe4; border-color: #e0b49f; color: #8f4528; text-decoration: line-through; }

/* profiles table */
.prof-table th[scope="row"] { font-family: var(--font-body); font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 700; background: transparent; white-space: nowrap; }
.prof-table { min-width: 720px; }
.prof-table .muted { font-size: .82rem; margin-left: 4px; }

/* gates */
.gates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); counter-reset: g; }
.gates li { padding: 22px 18px 6px 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; position: relative; }
.gates li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--ink); }
.gates .mono { color: var(--positive); margin-top: 8px; }
.gates h3 { font-size: 1.1rem; }
.gates p { color: var(--muted); font-size: .92rem; }
.gates .badge { margin-top: auto; }
.gates + .note { margin-top: 32px; }

@media (max-width: 1080px) {
  .spectrum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spectrum .card::after { display: none; }
  .sim { grid-template-columns: 1fr; }
  .gates { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; border-top: 0; }
  .gates li { border-top: 2px solid var(--ink); }
  .gates li::before { display: none; }
}
@media (max-width: 640px) {
  .spectrum, .gates { grid-template-columns: 1fr; }
}