/* Wildcat Mesh site. The app's "AB" palette: near-black ground (or warm paper in light mode),
   hairline panels, amber for Meshtastic, blue for MeshCore, green for OK. System fonts only,
   no external requests. Motion is decorative and switches off with prefers-reduced-motion. */
:root{
  --bg:#09090b;--s1:#111114;--s2:#17171b;--s3:#1f1f24;
  --line:rgba(255,255,255,.07);--line2:rgba(255,255,255,.13);
  --t1:#ededf0;--t2:#a1a1aa;--t3:#8a8a94;--t4:#6b6b75;
  --mt:#ffb000;--mc:#3aa0ff;--ok:#3ecf8e;--alert:#ff6b5f;
  --mt-ink:#ffb000;--mt-big:#ffb000;--mc-ink:#5cb2ff;--ok-ink:#3ecf8e;--alert-ink:#ff8178;
  --mt-soft:rgba(255,176,0,.10);--mc-soft:rgba(58,160,255,.11);--ok-soft:rgba(62,207,142,.10);
  --tint:rgba(255,255,255,.03);
  --shadow:0 20px 50px rgba(0,0,0,.55);--shadow-sm:0 12px 30px rgba(0,0,0,.5);
  --head:rgba(9,9,11,.74);
  --btn:#ededf0;--btn-fg:#0b0b0d;--btn-hover:#fff;
  --max:1080px;--gut:16px;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:dark light;
}
@media (prefers-color-scheme:light){
  :root{
    --bg:#f7f6f2;--s1:#ffffff;--s2:#f1f0eb;--s3:#e8e7e1;
    --line:rgba(20,20,30,.09);--line2:rgba(20,20,30,.16);
    --t1:#141418;--t2:#4b4b55;--t3:#64646e;--t4:#a3a3ad;
    --mt-ink:#9a5a00;--mt-big:#c27500;--mc-ink:#0a66c2;--ok-ink:#0f7a4b;--alert-ink:#c2382c;
    --mt-soft:rgba(255,176,0,.14);--mc-soft:rgba(58,160,255,.12);--ok-soft:rgba(62,207,142,.14);
    --tint:rgba(20,20,30,.025);
    --shadow:0 18px 44px rgba(30,30,50,.20);--shadow-sm:0 10px 26px rgba(30,30,50,.16);
    --head:rgba(247,246,242,.8);
    --btn:#141418;--btn-fg:#fff;--btn-hover:#000;
  }
}
*{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--t1);font:16px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img,video,svg{max-width:100%}
img{height:auto}
a{color:var(--t1);text-decoration:underline;text-decoration-color:var(--t4);text-underline-offset:3px}
a:hover{text-decoration-color:var(--t1)}
a:focus-visible,summary:focus-visible,.btn:focus-visible{outline:2px solid var(--mc);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;background:var(--s2);padding:6px 10px;border-radius:8px;z-index:20}
.ext::after{content:"\2197";font-size:.85em;margin-left:2px;text-decoration:none;display:inline-block;opacity:.7}

/* Header: sticks to the top with a frosted ground */
header.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px var(--gut);margin:0 calc(-1 * var(--gut));border-bottom:1px solid var(--line);background:var(--head);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.brand img{width:32px;height:32px;border-radius:8px;border:1px solid var(--line)}
header.top nav{display:flex;gap:2px}
header.top nav a{color:var(--t2);text-decoration:none;font-size:15px;padding:6px 10px;border-radius:8px}
header.top nav a:hover{color:var(--t1);background:var(--s2)}
header.top nav a[aria-current=page]{color:var(--t1);background:var(--s2);box-shadow:inset 0 0 0 1px var(--line)}

/* Type */
h1{font-size:34px;line-height:1.1;letter-spacing:-.025em;margin:0 0 8px}
h2{font-size:28px;line-height:1.18;letter-spacing:-.02em;margin:0 0 12px;text-wrap:balance}
h3{font-size:18px;line-height:1.3;margin:26px 0 6px}
p{margin:0 0 14px}
.lede{font-size:18px;color:var(--t2);line-height:1.55}
.muted{color:var(--t2)}.small{font-size:14px}
strong{color:var(--t1);font-weight:600}
code,kbd{font:13.5px var(--mono);background:var(--s2);border:1px solid var(--line);padding:1px 6px;border-radius:5px;white-space:nowrap}

/* Mono module label: "01  BOTH NETWORKS", like the app's module headers */
.label{display:flex;align-items:center;gap:10px;font:600 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--t3);margin:0 0 16px}
.label .no{border:1px solid var(--line2);border-radius:3px;padding:3px 5px;color:var(--t2);letter-spacing:.04em}
.label::after{content:"";flex:1;height:1px;background:var(--line)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle;margin-right:6px;flex:none}
.dot.mt{background:var(--mt);box-shadow:0 0 10px rgba(255,176,0,.55)}.dot.mc{background:var(--mc);box-shadow:0 0 10px rgba(58,160,255,.55)}.dot.ok{background:var(--ok)}
.mtc{color:var(--mt-ink)}.mcc{color:var(--mc-ink)}.okc{color:var(--ok-ink)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;text-decoration:none;border-radius:11px;padding:11px 16px;border:1px solid var(--line2);background:var(--s1);color:var(--t1);line-height:1.2}
.btn:hover{border-color:var(--t4)}
.btn.solid{background:var(--btn);color:var(--btn-fg);border-color:transparent}
.btn.solid:hover{background:var(--btn-hover)}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;padding:30px 0 40px;align-items:center}
.hero .icon{width:84px;height:84px;border-radius:20px;border:1px solid var(--line2);box-shadow:0 14px 40px rgba(0,0,0,.35),0 0 60px rgba(58,160,255,.16),0 0 60px rgba(255,176,0,.10);display:block;margin-bottom:20px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ok-ink);background:var(--ok-soft);border:1px solid color-mix(in srgb,var(--ok) 35%,transparent);border-radius:999px;padding:7px 11px;margin:0 0 16px}
.eyebrow .live{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(62,207,142,.6);animation:live 2.4s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(62,207,142,.55)}70%,100%{box-shadow:0 0 0 8px rgba(62,207,142,0)}}
.hero h1{font-size:38px;line-height:1.06;letter-spacing:-.03em;margin:0 0 14px;text-wrap:balance}
.hero h1 .mtc,.hero h1 .mcc{white-space:nowrap}
.hero h1 .mtc{color:var(--mt-big)}
.hero .sub{color:var(--t2);font-size:17.5px;line-height:1.55;margin:0 0 22px;max-width:560px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.chips li{display:flex;align-items:center;font:500 12.5px/1 var(--mono);color:var(--t2);background:var(--s1);border:1px solid var(--line2);border-radius:999px;padding:7px 11px}
.store{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.store .badge img{height:52px;width:auto;display:block}
.store .btn{min-height:52px;padding:0 18px}
.store .meta{flex-basis:100%;color:var(--t3);font-size:14px;margin:4px 0 0}
.hero .shots{display:flex;justify-content:center;align-items:flex-start;gap:14px;position:relative;isolation:isolate;padding:10px 0}
.hero .shots::before{content:"";position:absolute;inset:6% -4%;background:radial-gradient(closest-side at 28% 50%,rgba(255,176,0,.22),transparent),radial-gradient(closest-side at 72% 50%,rgba(58,160,255,.24),transparent);filter:blur(30px);z-index:-2}
.hero .shots img{position:relative;width:min(46%,250px);height:auto}
.hero .shots img:first-of-type{transform:translateY(18px) rotate(-2.5deg)}
.hero .shots img:last-of-type{transform:rotate(2.5deg)}
/* radio rings behind the phones */
.rings{--r:190px;position:absolute;left:50%;top:50%;width:0;height:0;z-index:-1;pointer-events:none}
.rings i{position:absolute;left:calc(var(--r) / -2);top:calc(var(--r) / -2);width:var(--r);height:var(--r);border-radius:50%;border:1.5px solid var(--mc);opacity:0;animation:ring 6s cubic-bezier(.2,.6,.3,1) infinite}
.rings i:nth-child(2){border-color:var(--mt);animation-delay:2s}
.rings i:nth-child(3){animation-delay:4s}
@keyframes ring{0%{transform:scale(.25);opacity:.55}100%{transform:scale(1.9);opacity:0}}

/* Quick facts strip */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:0 0 8px}
.facts div{background:var(--s1);padding:16px 16px 15px;min-width:0}
.facts b{display:block;font:600 26px/1.05 var(--mono);letter-spacing:-.02em;color:var(--t1);margin-bottom:6px}
.facts b.mt{color:var(--mt-big)}.facts b.mc{color:var(--mc-ink)}.facts b.ok{color:var(--ok-ink)}
.facts span{display:block;font-size:14px;color:var(--t2);line-height:1.4}

/* Phone screenshots */
.phone{border-radius:24px;border:1px solid var(--line2);box-shadow:var(--shadow);background:var(--s1);display:block}

/* Sections */
section{padding:52px 0;border-top:1px solid var(--line)}
section.first{border-top:0}
.feature{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;align-items:center}
.feature .copy{max-width:560px}
.feature figure{margin:0;display:flex;justify-content:center;align-items:flex-start;gap:14px;flex-wrap:wrap}
.feature figure img,.feature figure video{width:min(64%,280px);height:auto}
.feature figure.pair img{width:min(47%,250px);height:auto}
.feature figcaption,.cap{flex-basis:100%;font:500 12px/1.4 var(--mono);color:var(--t3);text-align:center;margin-top:4px}
ul.ticks{list-style:none;padding:0;margin:0 0 14px}
ul.ticks li{position:relative;padding-left:22px;margin:9px 0;color:var(--t2)}
ul.ticks li strong{color:var(--t1)}
ul.ticks li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;border-radius:2px;border:1px solid var(--t3)}
ul.ticks.mt li::before{border-color:var(--mt)}ul.ticks.mc li::before{border-color:var(--mc)}ul.ticks.ok li::before{border-color:var(--ok)}
.narrow{max-width:760px}

/* The networks */
.how{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:22px 0 30px;padding:0;list-style:none;counter-reset:h}
.how li{counter-increment:h;background:var(--s1);border:1px solid var(--line);border-radius:14px;padding:15px 16px 14px 56px;position:relative;color:var(--t2);font-size:15px}
.how li::before{content:counter(h,decimal-leading-zero);position:absolute;left:16px;top:16px;font:11px/1 var(--mono);color:var(--t2);border:1px solid var(--line2);border-radius:3px;padding:3px 4px}
.how li strong{display:block;font-size:16px;margin-bottom:3px}
.nets{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:0 0 18px}
.net{position:relative;background:var(--s1);border:1px solid var(--line);border-radius:16px;padding:20px 20px 18px;overflow:hidden}
.net::before{content:"";position:absolute;left:0;right:0;top:0;height:3px}
.net.mt::before{background:var(--mt)}.net.mc::before{background:var(--mc)}
.net.mt{background:linear-gradient(180deg,var(--mt-soft),transparent 55%),var(--s1)}
.net.mc{background:linear-gradient(180deg,var(--mc-soft),transparent 55%),var(--s1)}
.net h3{margin:0 0 4px;font-size:22px;letter-spacing:-.015em;display:flex;align-items:center;gap:4px}
.net .one{font-weight:600;color:var(--t1);margin:0 0 10px}
.net p{color:var(--t2);font-size:15.5px}
.net .go{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.net .go a{font:500 13px/1 var(--mono);text-decoration:none;color:var(--t1);background:var(--s2);border:1px solid var(--line2);border-radius:999px;padding:9px 12px}
.net.mt .go a:first-child{border-color:color-mix(in srgb,var(--mt) 55%,transparent)}
.net.mc .go a:first-child{border-color:color-mix(in srgb,var(--mc) 55%,transparent)}
.net .go a:hover{border-color:var(--t3)}
table.t th.mt{color:var(--mt-ink)}table.t th.mc{color:var(--mc-ink)}
.compare table.t td:first-child{white-space:normal;color:var(--t2);font-weight:500;width:30%}
.diagram{margin:30px 0 6px;background:var(--s1);border:1px solid var(--line);border-radius:18px;padding:14px 10px 12px;overflow:hidden}
.diagram svg{display:block;width:100%;max-width:720px;height:auto;margin:0 auto}
.diagram figcaption{font:500 12px/1.4 var(--mono);color:var(--t3);text-align:center;margin-top:6px;padding:0 8px}
.diagram .lk{stroke:var(--line2);stroke-width:2;fill:none}
.diagram .lk.mt{stroke:color-mix(in srgb,var(--mt) 45%,transparent)}
.diagram .lk.mc{stroke:color-mix(in srgb,var(--mc) 45%,transparent)}
.diagram .flow{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:2 22;animation:flow 1.6s linear infinite}
.diagram .flow.mt{stroke:var(--mt)}.diagram .flow.mc{stroke:var(--mc)}
.diagram .bt{fill:none;stroke:var(--t3);stroke-width:2;stroke-dasharray:3 6}
.diagram .bt.flow{stroke:var(--t1);stroke-dasharray:2 12;animation-duration:1s}
.diagram .nd.mt{fill:var(--mt)}.diagram .nd.mc{fill:var(--mc)}
.diagram .halo{fill:none;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:halo 3s ease-out infinite}
.diagram .halo.mt{stroke:var(--mt)}.diagram .halo.mc{stroke:var(--mc)}
.diagram .ph{fill:var(--s2);stroke:var(--t2);stroke-width:2}
.diagram .ph-s{fill:var(--bg)}
.diagram text{font:700 21px var(--mono);letter-spacing:.04em;fill:var(--t3)}
.diagram text.mt{fill:var(--mt-ink)}.diagram text.mc{fill:var(--mc-ink)}.diagram text.hi{fill:var(--t1)}
.diagram .tower{stroke:var(--mc);stroke-width:2;fill:none}
@keyframes flow{to{stroke-dashoffset:-24}}
@keyframes halo{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}

/* Panels and grids */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.card{background:var(--s1);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.card h3{margin:0 0 6px;font-size:16px;display:flex;align-items:center;gap:8px}
.card p{margin:0;color:var(--t2);font-size:15px}
.card p+p{margin-top:10px}
.card .k{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-bottom:10px;display:block}
.readouts{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--s1);margin:0 0 18px}
.readouts div{padding:12px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0}
.readouts div:nth-child(2n){border-right:0}
.readouts div:nth-last-child(-n+2){border-bottom:0}
.readouts b{display:block;font:600 10.5px/1 var(--mono);letter-spacing:.12em;color:var(--t3);text-transform:uppercase;margin-bottom:7px}
.readouts span{font:500 22px/1.1 var(--mono);color:var(--t1);white-space:nowrap}
.readouts span i{font-style:normal;font-size:12px;color:var(--t3);margin-left:3px}

/* Steps: numbered boxes like the in-app guide */
ol.steps{list-style:none;counter-reset:s;padding:0;margin:0 0 16px;background:var(--s1);border:1px solid var(--line);border-radius:14px}
ol.steps>li{counter-increment:s;position:relative;padding:13px 16px 13px 54px;border-top:1px solid var(--line)}
ol.steps>li:first-child{border-top:0}
ol.steps>li::before{content:counter(s,decimal-leading-zero);position:absolute;left:16px;top:16px;font:11px/1 var(--mono);color:var(--t2);border:1px solid var(--line2);border-radius:3px;padding:3px 4px}

/* Callouts */
.tip,.warn{border-radius:12px;padding:12px 16px;margin:12px 0 16px;font-size:15px;color:var(--t2)}
.tip{border:1px dashed var(--line2);background:var(--tint)}
.warn{border:1px solid color-mix(in srgb,var(--alert) 38%,transparent);background:color-mix(in srgb,var(--alert) 8%,transparent)}
.tip strong,.warn strong{color:var(--t1)}
.tip::before{content:"Tip · ";font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.warn::before{content:"Careful · ";font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--alert-ink)}

/* Terms (term / meaning) */
dl.terms{margin:0 0 16px;background:var(--s1);border:1px solid var(--line);border-radius:14px;overflow:hidden}
dl.terms>div{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:11px 16px;border-top:1px solid var(--line)}
dl.terms>div:first-child{border-top:0}
dl.terms dt{font:600 11.5px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t2)}
dl.terms dd{margin:0;font-size:15px;min-width:0;overflow-wrap:anywhere}

/* FAQ */
.faq details{border-bottom:1px solid var(--line);padding:15px 0}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 20px/1 var(--mono);color:var(--t3);flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--t2);margin:10px 0 0}
.faq details p+p{margin-top:8px}

/* Support */
.support{display:grid;gap:12px}
.mail{display:inline-flex;align-items:center;gap:8px;font-weight:600;background:var(--btn);color:var(--btn-fg);text-decoration:none;border-radius:10px;padding:10px 16px;margin-top:12px;max-width:100%;overflow-wrap:anywhere}
.mail:hover{background:var(--btn-hover)}

/* Closing call to action */
.cta{text-align:center;padding:56px 0 60px}
.cta .icon{width:72px;height:72px;border-radius:17px;border:1px solid var(--line2);box-shadow:var(--shadow-sm);margin:0 auto 18px;display:block}
.cta h2{margin-bottom:8px}
.cta p{color:var(--t2);margin:0 auto 20px;max-width:520px}
.cta .store{justify-content:center}
.cta .store .meta{text-align:center}

/* Guide */
.toc{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;padding:0;list-style:none}
.toc a{display:inline-block;font:500 13px/1 var(--mono);color:var(--t2);text-decoration:none;background:var(--s1);border:1px solid var(--line);border-radius:999px;padding:8px 11px}
.toc a:hover{color:var(--t1);border-color:var(--line2)}
.doc{padding:40px 0 28px}
.doc h1{font-size:40px}
.chapter{padding:44px 0 20px;border-top:1px solid var(--line)}
.chapter .body{max-width:720px}
.chapter h2{margin-bottom:6px}
.chapter .sum{color:var(--t3);font:500 13px var(--mono);margin:0 0 18px}
.chapter ul{padding-left:20px;margin:0 0 14px}.chapter li{margin:6px 0}
.shots-row{display:flex;flex-wrap:wrap;gap:14px;margin:18px 0 24px}
.shots-row figure{margin:0;width:200px}
.shots-row img{width:100%;border-radius:18px;border:1px solid var(--line2);box-shadow:var(--shadow-sm);display:block}
.shots-row figcaption{font:500 12px/1.4 var(--mono);color:var(--t3);margin-top:8px;text-align:center}
.tablewrap{overflow-x:auto;margin:0 0 16px;border:1px solid var(--line);border-radius:14px;background:var(--s1)}
table.t{width:100%;border-collapse:collapse;font-size:15px}
table.t th,table.t td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
table.t th{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--t3);background:var(--s2)}
table.t td:first-child{white-space:nowrap;font-weight:600}
table.t tr:last-child td{border-bottom:0}
.top-link{display:inline-block;font:500 12.5px var(--mono);color:var(--t3);text-decoration:none;margin-top:6px}
.top-link:hover{color:var(--t1)}

/* Privacy and other prose pages */
.prose{max-width:720px;padding:44px 0 8px}
.prose h1{font-size:40px}
.prose h2{font-size:22px;margin:36px 0 10px}
.prose ul{padding-left:20px}.prose li{margin:7px 0;color:var(--t2)}.prose li strong{color:var(--t1)}
.prose p{color:var(--t2)}
.prose .meta{font:500 13px var(--mono);color:var(--t3)}
.prose .callout{background:var(--s1);border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:12px;padding:14px 18px;color:var(--t1);margin:20px 0 8px}

/* Footer */
footer{border-top:1px solid var(--line);padding:28px 0 48px;color:var(--t3);font-size:13.5px;margin-top:24px}
footer p{margin:6px 0;max-width:760px}
footer .links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:14px;font-size:14.5px}
footer .links a{color:var(--t2);text-decoration:none}footer .links a:hover{color:var(--t1)}
footer .made{color:var(--t2);font-size:14.5px;margin-bottom:12px}
footer .official{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 14px;font-size:14px}
footer .official a{color:var(--t2);text-decoration:none;display:inline-flex;align-items:center}
footer .official a:hover{color:var(--t1)}

/* Wider screens */
@media (min-width:600px){
  .facts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .how{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:760px){
  h1{font-size:40px}
  .hero{grid-template-columns:1.1fr 1fr;padding:56px 0 60px;gap:40px}
  .hero h1{font-size:52px}
  .hero .icon{width:96px;height:96px;border-radius:22px}
  .rings{--r:300px}
  .feature{grid-template-columns:1.05fr 1fr;gap:56px}
  .feature.flip .copy{order:2}
  .feature figure img,.feature figure video{width:min(72%,290px)}
  .feature figure.pair img{width:min(48%,250px)}
  section{padding:72px 0}
  h2{font-size:32px}
  .nets{grid-template-columns:1fr 1fr}
  .readouts{grid-template-columns:repeat(4,1fr)}
  .readouts div{border-bottom:0}
  .readouts div:nth-child(2n){border-right:1px solid var(--line)}
  .readouts div:last-child{border-right:0}
  dl.terms>div{grid-template-columns:200px minmax(0,1fr);gap:16px}
  .feature dl.terms>div{grid-template-columns:150px minmax(0,1fr)}
  .support{grid-template-columns:1.25fr 1fr}
  .shots-row figure{width:210px}
  .diagram{padding:20px 22px 14px}
}
@media (max-width:420px){
  table.t{font-size:14px}
  header.top nav a{padding:6px 8px;font-size:14.5px}
  .shots-row figure{width:calc(50% - 7px)}
  table.t td:first-child{white-space:normal}
  table.t th,table.t td{padding:10px 11px}
}
@media (max-width:360px){.brand span{display:none}.hero h1{font-size:33px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rings{display:none}
}