@font-face{font-family:"Overpass";src:url(overpass.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Overpass Mono";src:url(overpass-mono.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
:root{
  --p9:#062826;--p8:#0a3b38;--p7:#11504b;--p6:#2b6e68;
  --signal:#ffc933;--coral:#ff9d7e;
  --paper:#eef2ee;--paper2:#e1e8e2;--ink:#0c1f1d;--muted:#41575a;--rule:#bccbc4;--alarm:#a3300f;
  --sans:"Overpass",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Overpass Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:min(1320px,100%);--gutter:1.5rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:var(--p6) var(--p9);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);font-feature-settings:"tnum" 1}
::selection{background:var(--signal);color:var(--ink)}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:2px}
.paper :focus-visible{outline-color:var(--p8)}
img,svg{display:block;max-width:100%}
.wrap{width:var(--wrap);margin-inline:auto}
.field,.band,.paper>section{padding-inline:var(--gutter)}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--signal);color:var(--ink);padding:.6rem 1rem;font-weight:700;z-index:10}
.skip:focus{top:1rem}
code,.mono{font-family:var(--mono);font-size:.88em}
h1,h2,h3{margin:0;text-wrap:balance}

/* header + hero: petrol field */
.field{background:var(--p9);color:#e3efec}
.bar{display:flex;align-items:center;gap:2rem;padding-block:1.1rem}
.brand{display:flex;align-items:center;gap:.7rem;font-weight:800;font-size:1.3rem;letter-spacing:-.01em;text-decoration:none;color:#fff}
.brand svg{width:34px;height:34px}
.bar nav{display:flex;gap:1.75rem;margin-left:auto;font-size:.95rem;font-weight:500}
.bar nav a{color:#b9d1cc;text-decoration:none;padding:.4rem 0}
.bar nav a:hover{color:#fff;text-decoration:underline}
.btn{display:inline-flex;align-items:center;gap:.6rem;background:var(--signal);color:var(--ink);font-weight:700;text-decoration:none;padding:.8rem 1.25rem;border-radius:3px;line-height:1.1;transition:background .15s,transform .15s}
.btn:hover{background:#ffd966}
.btn:active{transform:translateY(1px)}
.btn.sm{padding:.6rem 1rem;font-size:.95rem}
.btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px #5d8a84}
.btn.ghost:hover{background:var(--p8)}
.hero{padding-block:clamp(1.5rem,3.5vw,3.25rem) clamp(3rem,6vw,5.5rem)}
.hero-top{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem 1.5rem;align-items:end}
.hero h1{grid-column:1/10;font-weight:800;font-size:clamp(2.6rem,5.2vw,4.6rem);line-height:1.02;letter-spacing:-.03em;color:#fff}
.hero h1 em{font-style:normal;color:var(--signal)}
.lead{grid-column:1/7;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.55;color:#c8dcd8;max-width:40rem;margin:0}
.cta-row{grid-column:1/8;display:flex;flex-wrap:wrap;gap:.9rem}
.formats{grid-column:1/8;margin:0;font-size:.92rem;color:#8fb2ac}
.receipt{grid-column:9/13;grid-row:2/5;align-self:end;margin:0;background:var(--p8);border:1px solid var(--p7);border-radius:4px;overflow:hidden}
.receipt figcaption{padding:.75rem 1.1rem;font-size:.85rem;color:#9fc0ba;border-bottom:1px solid var(--p7);display:flex;justify-content:space-between;gap:1rem}
.receipt pre{margin:0;padding:1.1rem;font:400 .86rem/1.85 var(--mono);color:#dcebe8;overflow-x:auto}
.receipt .k{color:#8fb2ac}.receipt .v{color:#fff}.receipt .hl{color:var(--signal)}

/* the line */
.line-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:clamp(2rem,3.5vw,3rem) 0 1.75rem;padding-top:1.25rem;border-top:1px solid var(--p7)}
.line-head h2{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;color:#fff}
.line-head p{margin:0;font-size:.92rem;color:#8fb2ac;max-width:34rem;text-align:right}
.line{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:0 1.25rem;position:relative}
.line::before{content:"";position:absolute;left:18px;right:calc((100% - 7.5rem)/7 - 18px);top:15px;height:6px;background:var(--signal);border-radius:3px}
.line::after{content:"";position:absolute;top:13px;left:18px;width:34px;height:10px;border-radius:5px;background:#fff;opacity:0}
.st{position:relative;padding-top:3.4rem}
.dot{position:absolute;top:0;left:0;width:36px;height:36px;border-radius:50%;background:var(--signal);color:var(--ink);font-weight:800;font-size:.95rem;display:grid;place-items:center;z-index:1;box-shadow:0 0 0 5px var(--p9)}
.st h3{font-size:1.2rem;font-weight:800;color:#fff;letter-spacing:-.01em;margin-bottom:.35rem}
.st p{margin:0;font-size:.92rem;line-height:1.5;color:#b9d1cc}
.exits{list-style:none;margin:1.1rem 0 0;padding:1rem 0 0;position:relative;display:grid;gap:.5rem;font-size:.82rem;line-height:1.35}
.exits::before{content:"";position:absolute;left:0;top:0;width:34px;border-top:1.5px dashed var(--coral)}
.exits li{display:flex;flex-direction:column;color:#b9d1cc}
.exits b{font-family:var(--mono);font-weight:600;color:var(--coral);font-size:.86rem}
.exits.ok::before{border-top-color:var(--signal)}
.exits.ok b{color:var(--signal)}
.exits small{font-size:.8rem;color:#9fc0ba}
@media (min-width:1101px) and (prefers-reduced-motion:no-preference){
  .line::after{animation:packet 3.6s cubic-bezier(.5,0,.2,1) .5s 1 both}
  .dot{animation:lit .01s linear both}
  .st:nth-child(1) .dot{animation-delay:.5s}.st:nth-child(2) .dot{animation-delay:1s}.st:nth-child(3) .dot{animation-delay:1.45s}
  .st:nth-child(4) .dot{animation-delay:1.95s}.st:nth-child(5) .dot{animation-delay:2.45s}.st:nth-child(6) .dot{animation-delay:3.05s}.st:nth-child(7) .dot{animation-delay:3.6s}
}
@keyframes packet{0%{left:18px;opacity:1}92%{opacity:1}100%{left:calc(100% - (100% - 7.5rem)/7 + 8px);opacity:0}}
@keyframes lit{from{background:var(--p9);color:var(--signal);box-shadow:0 0 0 5px var(--p9),inset 0 0 0 4px var(--signal)}to{background:var(--signal);color:var(--ink)}}

/* light sections */
.paper section{padding-block:clamp(4rem,8vw,7rem)}
h2.big{font-size:clamp(2rem,4vw,3.4rem);font-weight:800;line-height:1.05;letter-spacing:-.025em;max-width:22ch}
.intro{max-width:44rem;font-size:1.15rem;color:var(--muted);margin:1.25rem 0 0}
.controls .row{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem;padding-block:2.75rem;border-top:1.5px solid var(--ink)}
.controls .rows{margin-top:3.5rem}
.row>.what{grid-column:1/5}
.row>.what h3{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.row>.what p{margin:.8rem 0 0;color:var(--muted);max-width:30ch}
.row>.how{grid-column:6/13;min-width:0}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;vertical-align:top;padding:.8rem 1rem .8rem 0;border-bottom:1px solid var(--rule)}
th{font-weight:700;white-space:nowrap;padding-right:1.5rem}
thead th{font-size:.82rem;color:var(--muted);font-weight:600;border-bottom:1.5px solid var(--ink)}
td.n{font-family:var(--mono);font-size:.88rem}
.tag{font-family:var(--mono);font-size:.78rem;font-weight:600;background:var(--p8);color:var(--signal);padding:.15rem .45rem;border-radius:2px;margin-left:.5rem;vertical-align:.1em}
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1.5px solid var(--ink)}
.tier{padding:1.4rem 1.5rem}
.tier+.tier{border-left:1.5px solid var(--ink);background:var(--paper2)}
.tier h4{margin:0 0 .5rem;font-size:1.05rem;font-weight:800}
.tier p{margin:0;font-size:.98rem;color:var(--muted)}
.tier .big-n{display:block;font:700 clamp(2.4rem,4vw,3.4rem)/1 var(--mono);letter-spacing:-.04em;color:var(--ink);margin:.3rem 0 .6rem}
.tiernote{margin:1rem 0 0;font-size:.95rem;color:var(--muted)}
dl.spec{margin:0;display:grid;grid-template-columns:minmax(9rem,13rem) 1fr;border-top:1.5px solid var(--ink)}
dl.spec dt,dl.spec dd{margin:0;padding:.95rem 0;border-bottom:1px solid var(--rule)}
dl.spec dt{font-weight:700;padding-right:1rem}
dl.spec dd{color:var(--muted)}
dl.spec dd b{color:var(--ink);font-weight:700}
.rules{list-style:none;margin:0;padding:0;columns:2;column-gap:2rem;border-top:1.5px solid var(--ink)}
.rules li{break-inside:avoid;padding:.6rem 0;border-bottom:1px solid var(--rule);display:flex;gap:.7rem;align-items:baseline}
.rules li::before{content:"";flex:none;width:.7rem;height:2px;background:var(--alarm);transform:translateY(-.25em)}
.rulenote{margin:1rem 0 0;font-size:.95rem;color:var(--muted)}
.rulenote b{color:var(--ink)}

/* network */
.band{padding-block:clamp(4rem,8vw,7rem)}
.net{background:var(--p9);color:#e3efec}
.net h2{color:#fff}
.net .intro{color:#b9d1cc}
.topo{margin-top:3.5rem;display:grid;grid-template-columns:minmax(0,3fr) 3.5rem minmax(0,1.25fr);align-items:stretch}
.inside{border:2px dashed #5d8a84;border-radius:6px;padding:1.75rem;position:relative;display:grid;grid-template-columns:1fr 2.5rem 1.35fr;align-items:center;gap:0}
.inside>.tagline{position:absolute;top:-.8rem;left:1.25rem;background:var(--p9);padding:0 .6rem;font-size:.85rem;font-weight:700;color:var(--signal)}
.node{background:var(--p8);border:1px solid var(--p7);border-radius:4px;padding:1.1rem 1.2rem}
.node h3{font-size:1.05rem;font-weight:800;color:#fff;margin-bottom:.35rem}
.node p,.node ul{margin:0;font-size:.92rem;color:#b9d1cc;line-height:1.5}
.node ul{padding-left:1.1rem}
.node.gw{background:var(--signal);color:var(--ink);border-color:var(--signal)}
.node.gw h3{color:var(--ink);font-size:1.3rem}
.node.gw p{color:#2a2a10}
.node.gw .subs{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:1rem}
.node.gw .subs span{background:#fff3c4;border-radius:3px;padding:.5rem .6rem;font-size:.85rem;font-weight:600;line-height:1.3}
.node.gw .subs small{display:block;font-weight:400;color:#4a4520;font-size:.8rem}
.arrow.out{align-self:center}
.arrow{height:2px;background:#7fb0a9;position:relative;margin-inline:.2rem}
.arrow::after{content:"";position:absolute;right:-1px;top:-5px;width:10px;height:12px;background:#7fb0a9;clip-path:polygon(0 0,100% 50%,0 100%)}
.outside{display:grid;gap:1rem;align-content:center}
.outside .node{background:transparent;border-style:solid;border-color:#5d8a84}
.facts{margin:3.5rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 3rem}
.facts div{padding:1.4rem 0;border-top:1px solid var(--p7)}
.facts dt{font-weight:800;color:#fff;font-size:1.05rem;margin-bottom:.35rem}
.facts dd{margin:0;color:#b9d1cc;font-size:.98rem}

/* data */
.stored{margin-top:3rem}
.stored th[scope=row]{font-weight:700;width:30%;white-space:normal}
.stored td{color:var(--muted)}
.stored td b{color:var(--ink)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:4rem}
.cols h3{font-size:1.45rem;font-weight:800;letter-spacing:-.015em;padding-bottom:.8rem;border-bottom:1.5px solid var(--ink);margin-bottom:.4rem}
.cols ul{list-style:none;margin:0;padding:0}
.cols li{padding:.7rem 0;border-bottom:1px solid var(--rule);color:var(--muted)}
.cols li b{color:var(--ink)}

/* contact */
.contact{background:var(--signal);color:var(--ink)}
.contact .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:2rem 1.5rem;align-items:end}
.contact h2{grid-column:1/8;font-size:clamp(2.2rem,5vw,4.2rem);font-weight:800;line-height:1.02;letter-spacing:-.03em}
.contact .side{grid-column:9/13}
.contact .side p{margin:0 0 1.4rem;font-size:1.1rem}
.btn.dark{background:var(--p9);color:#fff;font-size:1.05rem;padding:1rem 1.5rem}
.btn.dark:hover{background:var(--p7)}
.contact .addr{display:block;margin-top:.9rem;font-family:var(--mono);font-size:.92rem}
footer{background:var(--p9);color:#9fc0ba;padding-block:2rem;font-size:.92rem}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer a{color:#cfe2de}

/* responsive */
@media (max-width:1100px){
  .hero h1,.lead,.cta-row,.formats{grid-column:1/-1}
  .receipt{grid-column:1/-1;grid-row:auto;max-width:34rem}
  .hero-top{align-items:start}
  .line{grid-template-columns:1fr;gap:0}
  .line::before{left:15px;right:auto;top:18px;bottom:2rem;width:6px;height:auto}
  .st{padding:0 0 2.25rem 4.2rem;min-height:3.5rem}
  .exits{max-width:26rem}
  .line-head{flex-direction:column}.line-head p{text-align:left}
  .row>.what{grid-column:1/-1}.row>.how{grid-column:1/-1}
  .row>.what p{max-width:none}
  .topo{grid-template-columns:1fr;gap:0}
  .topo>.arrow.out{width:2px;height:2.5rem;margin:.2rem auto}
  .topo>.arrow.out::after{right:auto;left:-5px;top:auto;bottom:-1px;width:12px;height:10px;clip-path:polygon(0 0,100% 0,50% 100%)}
  .facts{grid-template-columns:1fr 1fr}
  .contact h2,.contact .side{grid-column:1/-1}
}
@media (max-width:720px){
  :root{--gutter:1.25rem}
  body{font-size:1rem}
  .bar nav{display:none}.bar{justify-content:space-between}
  .inside{grid-template-columns:1fr;padding:1.5rem 1.1rem 1.25rem}
  .inside>.arrow{width:2px;height:1.75rem;margin:.3rem auto}
  .inside>.arrow::after{right:auto;left:-5px;top:auto;bottom:-1px;width:12px;height:10px;clip-path:polygon(0 0,100% 0,50% 100%)}
  .tiers{grid-template-columns:1fr}.tier+.tier{border-left:0;border-top:1.5px solid var(--ink)}
  dl.spec{grid-template-columns:1fr}dl.spec dt{padding-bottom:0;border-bottom:0}dl.spec dd{padding-top:.2rem}
  .rules{columns:1}
  .facts{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr;gap:2.5rem}
  .modes thead{display:none}
  .modes,.modes tbody,.modes tr,.modes th,.modes td{display:block}
  .modes tr{padding:.8rem 0;border-bottom:1px solid var(--rule)}
  .modes th,.modes td{border:0;padding:0}
  .modes td{color:var(--muted);margin-top:.15rem}
  .stored,.stored tbody,.stored tr,.stored th,.stored td{display:block;width:auto!important}
  .stored thead{display:none}
  .stored tr{padding:.9rem 0;border-bottom:1px solid var(--rule)}
  .stored th,.stored td{border:0;padding:0}
  .stored td{margin-top:.25rem}
  .btn{width:100%;justify-content:center}.bar .btn{width:auto}
}