/* AJKFi site - v0.3.1 "Cool gray". Clean rewrite (replaces the dark/indigo/violet layers of 0.1.3-0.3.0).
   Flat surfaces: white cards on cool gray, thin borders, one indigo accent, teal for money/ok.
   No gradient text, no glow orbs. Sora headings + Manrope body, self-hosted (CSP default-src 'self').
   No inline style anywhere (CSP style-src 'self'). */

@font-face{font-family:"Sora";font-style:normal;font-display:swap;font-weight:100 800;src:url(/fonts/sora-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sora";font-style:normal;font-display:swap;font-weight:100 800;src:url(/fonts/sora-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-display:swap;font-weight:200 800;src:url(/fonts/manrope-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-display:swap;font-weight:200 800;src:url(/fonts/manrope-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#eef0f4; --bg-2:#e6e9ee; --card:#ffffff; --card-2:#f6f7f9; --raise:#eceff3;
  --ink:#151b26; --muted:#525d70; --faint:#667185; --line:#dde1e8; --line-2:#cfd5de;
  --brand:#3f4fd9; --brand-2:#3443c4; --brand-deep:#2a37a8; --brand-ink:#ffffff;
  --brand-soft:#e9ebfc; --brand-line:#bcc3f3;
  --accent:#3f4fd9; --accent-2:#3443c4; --accent-deep:#2a37a8; --accent-soft:#e9ebfc; --accent-line:#bcc3f3;
  --teal:#0d8f7c; --teal-soft:#dcf2ee;
  --ok:#0b8473; --ok-soft:#dcf2ee;
  --warn:#9a6200; --warn-soft:#fbf0d6;
  --bad:#c42f47; --bad-soft:#fbe4e8;
  --info:#3443c4; --info-soft:#e9ebfc;
  --gold:#d6a21e; --gold-soft:#fbf1d3;
  --metal:#2a2c31; --metal-edge:#8d929b;
  --radius:16px; --radius-s:11px;
  --shadow:0 1px 2px rgba(21,27,38,.05);
  --lift:0 18px 36px -24px rgba(21,27,38,.35);
  --display:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;color:var(--ink);font:15.5px/1.6 var(--font);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
main{flex:1 0 auto;width:100%}
a{color:var(--brand-2);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
::selection{background:#cfd4fa}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
img{max-width:100%;height:auto}

h1,h2,h3{color:var(--ink);font-family:var(--display);letter-spacing:-.02em;text-wrap:balance}
h1{font-size:1.55rem;font-weight:800;margin:0;line-height:1.2}
h2{font-size:1.08rem;font-weight:700;margin:0 0 .75rem}
h3{font-weight:700}
h1.mono{font-family:var(--mono);font-size:1.45rem;letter-spacing:.03em;font-weight:700}
code,.mono{font-family:var(--mono);font-size:.92em}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
.muted{color:var(--muted)} .small{font-size:.85em} .nowrap{white-space:nowrap}
.num{text-align:right;font-variant-numeric:tabular-nums}
.late{color:var(--bad);font-weight:600} .soon{color:var(--warn);font-weight:600}
.center,.centre{text-align:center;margin-inline:auto}
.upper{text-transform:uppercase}
.upper::placeholder{text-transform:none}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.ok-t{color:var(--ok);font-weight:600}

/* ---------------- header ---------------- */
.top{position:sticky;top:0;z-index:10;background:rgba(238,240,244,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line);transition:background-color .25s var(--ease),box-shadow .25s var(--ease)}
.top.scrolled{background:rgba(255,255,255,.92);box-shadow:0 10px 24px -22px rgba(21,27,38,.5)}
.top .bar-progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;z-index:2;background:var(--brand);transition:width .12s linear}
.top-in{display:flex;align-items:center;gap:16px;min-height:64px;flex-wrap:wrap;padding-block:8px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font:800 1.15rem/1 var(--display);letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;color:#fff;background:var(--brand)}
.brand-mark svg{width:19px;height:19px}
.brand-text strong{color:var(--brand);font-weight:800}
.nav{display:flex;gap:2px;flex-wrap:wrap;flex:1}
.nav a{padding:7px 9px;border-radius:9px;color:var(--muted);font-weight:600;font-size:.91rem;white-space:nowrap}
.nav a:hover{background:var(--bg-2);text-decoration:none;color:var(--ink)}
.nav a.on{background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.who{display:flex;align-items:center;gap:8px;margin:0}
.who-name{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .nav-toggle{display:none;margin-left:auto;padding:7px 9px}
.nav-toggle svg{width:20px;height:20px;display:block}
main.wrap{padding-block:28px 56px}

/* ---------------- footer ---------------- */
.site-foot{border-top:1px solid var(--line);background:var(--card);margin-top:12px}
.site-foot .wrap{display:flex;gap:14px 28px;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-block:24px}
.site-foot .brand-mark{width:28px;height:28px;border-radius:8px}
.site-foot .brand-mark svg{width:15px;height:15px}
.foot-links{display:flex;gap:6px 18px;flex-wrap:wrap;font-size:.9rem}
.foot-links a{color:var(--muted)}
.foot-links a:hover{color:var(--ink)}
.foot-note{color:var(--faint);font-size:.84rem;flex-basis:100%;margin:0}

/* ---------------- blocks ---------------- */
.head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.head h1{margin-right:auto}
.crumbs{margin:0 0 10px}
.crumbs a{color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:16px;box-shadow:var(--shadow);min-width:0;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.card.flush{padding:0;overflow:hidden}
.card.narrow{max-width:620px}
.card.narrow p{margin:.5rem 0}
.card.empty{color:var(--muted);text-align:center;padding:38px 20px;border-style:dashed;background:var(--card-2)}
.card.empty h2{margin-bottom:.35rem}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:16px;align-items:start;margin-bottom:16px}
.grid2>.card{margin-bottom:0}
.stack{display:flex;flex-direction:column;gap:12px}
.stack.sep{border-top:1px solid var(--line);padding-top:16px;margin-top:8px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.grow{flex:1 1 220px}
ul.plain{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px;margin-bottom:12px}
.tile{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;color:var(--ink)}
a.tile:hover{border-color:var(--brand-line);text-decoration:none}
.t-val{font:800 1.6rem/1.2 var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.t-lbl{color:var(--muted);font-size:.86rem}
.tile.warn{background:var(--warn-soft);border-color:#f1dca8}
.tile.warn .t-val{color:var(--warn)}

/* ---------------- forms ---------------- */
label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:.9rem;color:var(--ink)}
label.check{display:block;font-weight:400;line-height:1.5}
label.check input[type=checkbox]{display:inline-block;vertical-align:-3px;margin:0 8px 0 0}
input,select,textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line-2);border-radius:var(--radius-s);
  padding:9px 12px;min-height:44px;width:100%;transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:#98a1b0}
input[type=checkbox]{width:18px;height:18px;min-height:0;accent-color:var(--brand);flex:0 0 auto}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.hint{font-weight:400;color:var(--muted);font-size:.84rem}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.filters label{flex:0 1 180px}
.filters label.grow{flex:1 1 240px}
.filters .actions{display:flex;gap:8px}
textarea.codes{resize:vertical;margin-bottom:12px;line-height:1.7}
.field{display:flex;flex-direction:column;gap:4px}
.flabel{font-weight:600;font-size:.9rem;color:var(--ink)}
.field .hint{margin:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;border-radius:var(--radius-s);
  border:1px solid var(--line-2);background:var(--card);color:var(--ink);padding:9px 16px;min-height:44px;cursor:pointer;white-space:nowrap;
  transition:background-color .15s,border-color .15s,color .15s,transform .05s}
.btn:hover{border-color:#b6bfcc;text-decoration:none;background:var(--card-2)}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.primary:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.danger:hover{background:#a92640;border-color:#a92640}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:var(--card)}
.btn.small{padding:5px 12px;min-height:34px;font-size:.86rem;border-radius:9px}
.btn.big{padding:13px 22px;font-size:1.02rem;min-height:50px;border-radius:12px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.google{width:100%;background:var(--card);color:var(--ink);border-color:var(--line-2)}
.btn.google .g{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:#4285f4;font-weight:800;border:1px solid #d5d9de;font-size:.8rem}
.or{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:.8rem;margin:16px 0;text-transform:uppercase;letter-spacing:.08em}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
.cf-turnstile{min-height:65px}

.action{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.action:first-child{border-top:0;padding-top:0}
.action>div{flex:1 1 240px;display:flex;flex-direction:column;gap:6px}
.action p{margin:0}
.action.danger b{color:var(--bad)}

.flash{border-radius:var(--radius-s);padding:12px 14px;margin-bottom:16px;background:var(--info-soft);color:var(--info);border:1px solid var(--brand-line);overflow-wrap:anywhere}
.flash.ok{background:var(--ok-soft);color:var(--ok);border-color:#a9dcd2}
.flash.err{background:var(--bad-soft);color:var(--bad);border-color:#f0b7c1}
.flash.warn{background:var(--warn-soft);color:var(--warn);border-color:#f1dca8}
.flash b{color:var(--ink)}
.flash code{display:inline-block;margin:6px 0;padding:4px 8px;border-radius:6px;background:var(--card);color:var(--ink)}

.badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.76rem;font-weight:700;background:var(--raise);color:var(--muted);white-space:nowrap;letter-spacing:.02em;width:fit-content}
.b-active{background:var(--ok-soft);color:var(--ok)}
.b-unused{background:var(--info-soft);color:var(--info)}
.b-released{background:var(--warn-soft);color:var(--warn)}
.b-revoked{background:var(--bad-soft);color:var(--bad)}
.b-new{background:var(--brand);color:#fff;animation:bnew 2.4s ease-out infinite}
@keyframes bnew{0%{box-shadow:0 0 0 0 rgba(63,79,217,.45)}70%{box-shadow:0 0 0 7px rgba(63,79,217,0)}100%{box-shadow:0 0 0 0 rgba(63,79,217,0)}}
.ev{font-weight:600}
.ev-revoked,.ev-refused{color:var(--bad)} .ev-restored,.ev-bound,.ev-renewed{color:var(--ok)} .ev-lease{color:var(--muted);font-weight:400}
.cl-done{color:var(--ok);font-weight:600} .cl-failed{color:var(--bad);font-weight:600} .cl-cancelled{color:var(--muted)}

dl.facts{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:0 0 16px}
dl.facts dt{color:var(--muted)} dl.facts dd{margin:0;overflow-wrap:anywhere}

.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tabs a{padding:6px 12px;border-radius:9px;color:var(--muted);font-weight:600}
.tabs a:hover{background:var(--bg-2);text-decoration:none}
.tabs a.on{background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.pager{display:flex;gap:12px;align-items:center;justify-content:center;margin:14px 0 16px;flex-wrap:wrap}

/* ---------------- tables ---------------- */
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:700;background:var(--card-2)}
.card:not(.flush) th{background:transparent;padding-inline:10px}
.card:not(.flush) td{padding-inline:10px}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#f7f8fb}
th.num{text-align:right}

/* ---------------- sign-in pages ---------------- */
.login{min-height:80vh;display:grid;place-items:center}
.login .card{width:100%;max-width:400px;padding:28px}
.auth{display:grid;place-items:start center;padding-top:5vh}
.auth .card{width:100%;max-width:440px;padding:32px 28px}
.auth h1{margin-bottom:14px}
.links{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:16px 0 0}

/* ---------------- landing: shared ---------------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.75rem;margin:0}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);flex:none}
.lede{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--muted);margin:0;max-width:44ch}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin:0}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal.in,.no-js .reveal{opacity:1;transform:none}

.section{margin:64px 0}
.section-head{max-width:720px;margin-bottom:24px}
.section-head h2{font-size:clamp(1.45rem,2.6vw,2rem);font-weight:700;margin:0 0 8px;letter-spacing:-.025em;line-height:1.15}
.section-head p{color:var(--muted);margin:0;font-size:1.02rem}
.section-head.centre{text-align:center;max-width:46rem;margin-inline:auto}
.section-head h2 svg{width:22px;height:22px;vertical-align:-3px;margin-right:8px;color:var(--gold)}
.cta.centre{display:flex;justify-content:center;margin-top:22px}

/* ---------------- the phone (hero + themes) ---------------- */
.phone{position:relative;width:var(--pw,320px);max-width:100%;aspect-ratio:410/864;border-radius:17% / 8%;background:var(--metal);padding:2.7%;
  box-shadow:0 0 0 1.5px var(--metal-edge),0 0 0 4px #3b3e45,0 2px 0 4px #555962,0 50px 70px -40px rgba(21,27,38,.55),0 22px 40px -24px rgba(21,27,38,.35)}
.phone::before,.phone::after{content:"";position:absolute;width:3px;background:#5d616a;border-radius:2px;left:-5px}
.phone::before{top:22%;height:7%} .phone::after{top:31%;height:7%}
.phone .pbtn{position:absolute;right:-5px;top:27%;width:3px;height:11%;background:#5d616a;border-radius:2px}
.screen{position:relative;height:100%;border-radius:14% / 6.5%;overflow:hidden;background:#f1f3f8}
.screen img{position:absolute;left:0;right:0;top:6.4%;bottom:0;width:100%;height:93.6%;object-fit:cover;object-position:top;border:0;border-radius:0}
.island{position:absolute;top:2.2%;left:50%;transform:translateX(-50%);width:31%;height:3.6%;background:#0b0c0e;border-radius:999px;z-index:3}
.sbar{position:absolute;left:0;right:0;top:0;height:6.6%;background:#fff;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:0 9% 0 11%}
.sbar b{font:700 clamp(7px,1.05vw,13px) var(--font);color:#111}
.sr{display:flex;align-items:center;gap:8%;width:30%;justify-content:flex-end}
.wf{width:30%;display:block;flex:none}
.wf svg{display:block;width:100%;overflow:visible}
.wf path{fill:none;stroke:#111;stroke-width:2.2;stroke-linecap:round} .wf circle{fill:#111}
.bat{display:block;width:44%;aspect-ratio:2.2/1;flex:none;border-radius:3px;border:1.5px solid #111;position:relative}
.bat::after{content:"";position:absolute;inset:1.5px;right:28%;background:#111;border-radius:1px}
.glass{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.16) 0 18%,transparent 18.2% 100%)}
@property --a{syntax:"<angle>";initial-value:0deg;inherits:false}
.rim{position:absolute;inset:-4px;border-radius:inherit;padding:2px;pointer-events:none;z-index:4;
  background:conic-gradient(from var(--a),transparent 0 80%,rgba(255,255,255,.95) 86%,rgba(255,240,200,.8) 88%,transparent 93%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:rim 6s linear infinite}
@keyframes rim{to{--a:360deg}}
.floaty{position:relative;animation:floaty 7s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-12px)}}
.floor{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);width:62%;height:26px;border-radius:50%;background:rgba(21,27,38,.22);filter:blur(14px);
  animation:floor 7s ease-in-out infinite;z-index:-1}
@keyframes floor{50%{transform:translateX(-50%) scale(.86);opacity:.7}}

/* ---------------- landing: hero (B Signal) ---------------- */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center;padding-block:30px 40px;overflow:clip;overflow-clip-margin:0}
.hero-copy{min-width:0}
.hero h1{font:800 clamp(2.3rem,5.1vw,4rem)/1.04 var(--display);letter-spacing:-.035em;margin:.35em 0 .4em}
.hero h1 .soft{color:#7a8597}
.hero .cta{margin-top:26px}
.hero .cta .btn{min-height:48px;padding:11px 18px;font-size:.98rem}
.proof{display:flex;flex-wrap:wrap;gap:8px 26px;margin:24px 0 0;padding:0;list-style:none;color:var(--muted);font-size:.93rem;font-weight:600}
.proof b{font:700 1rem var(--display);color:var(--ink);margin-right:6px;font-variant-numeric:tabular-nums}
.shots{--apw:clamp(140px,12.5vw,172px);position:relative;display:grid;place-items:center end;padding:56px 44px 56px 0;isolation:isolate;min-width:0}
.shots .phone{--pw:clamp(250px,25vw,330px);transform:rotate(-4deg);animation:hit 3.6s ease-out .45s infinite}
@keyframes hit{
  0%,100%{box-shadow:0 0 0 1.5px var(--metal-edge),0 0 0 4px #3b3e45,0 2px 0 4px #555962,0 50px 70px -40px rgba(21,27,38,.55),0 22px 40px -24px rgba(21,27,38,.35)}
  8%{box-shadow:0 0 0 1.5px #b7c0ff,0 0 0 4px #3b3e45,0 2px 0 4px #555962,0 0 0 10px rgba(63,79,217,.12),0 50px 70px -40px rgba(21,27,38,.55),0 22px 40px -24px rgba(21,27,38,.35)}
  30%{box-shadow:0 0 0 1.5px var(--metal-edge),0 0 0 4px #3b3e45,0 2px 0 4px #555962,0 0 0 22px rgba(63,79,217,0),0 50px 70px -40px rgba(21,27,38,.55),0 22px 40px -24px rgba(21,27,38,.35)}}
.shots .wf .w0,.shots .wf .w1,.shots .wf .w2,.shots .wf .w3{animation:bar 3.6s ease-out infinite}
.shots .wf .w0,.shots .wf .w1{animation-delay:.5s} .shots .wf .w2{animation-delay:.75s} .shots .wf .w3{animation-delay:1s}
@keyframes bar{0%{opacity:.18}12%,100%{opacity:1}}

/* the AJKFi router that sends the signal */
.ap{position:absolute;z-index:5;left:0;bottom:7%;width:var(--apw)}
.ap svg.ap-body{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 18px 18px rgba(21,27,38,.28))}
.ap .ant{fill:#2b2f37}
.ap .shell{fill:#20242c}
.ap .top-face{fill:#31363f}
.ap .feet{fill:#14171c}
.ap .ap-tile{fill:var(--brand)}
.ap .tile-w path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
.ap .tile-w circle{fill:#fff}
.ap .word{font:800 17px var(--display);fill:#fff;letter-spacing:-.4px}
.ap .word tspan{fill:#8f9bff}
.ap .led{fill:#19c3a6;animation:led 1.2s steps(2,end) infinite}
.ap .led.l2{animation-delay:.4s} .ap .led.l3{fill:#8f9bff;animation-delay:.8s}
@keyframes led{50%{opacity:.25}}
.ap-tag{display:block;margin-top:8px;text-align:center;font:700 .74rem var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.airbox{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 30px),transparent),linear-gradient(transparent,#000 50px,#000 calc(100% - 50px),transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 30px),transparent),linear-gradient(transparent,#000 50px,#000 calc(100% - 50px),transparent);mask-composite:intersect}
.air{position:absolute;left:calc(var(--apw) / 2);bottom:calc(7% + var(--apw) * .62 + 22px);width:0;height:0;pointer-events:none}
.air span{position:absolute;left:-480px;top:-480px;width:960px;height:960px;border-radius:50%;border:2.5px solid var(--brand);opacity:0;transform:scale(.03);
  animation:air 3.6s cubic-bezier(.2,.6,.4,1) infinite}
.air span:nth-child(2){animation-delay:1.2s} .air span:nth-child(3){animation-delay:2.4s}
@keyframes air{0%{opacity:.9;transform:scale(.03)}70%{opacity:.2}100%{opacity:0;transform:scale(1)}}

.chip{position:absolute;z-index:6;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 14px;box-shadow:0 14px 30px -18px rgba(21,27,38,.45);
  display:flex;gap:10px;align-items:center;font-size:.85rem;color:var(--muted);white-space:nowrap;line-height:1.35}
.chip b{display:block;font:700 .95rem var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.chip .ci{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none}
.chip .ci svg{width:17px;height:17px}
.chip.c1{left:4%;top:16%;animation:floaty 6s ease-in-out .8s infinite}
.chip.c2{right:0;bottom:18%;animation:floaty 8s ease-in-out 1.6s infinite}
.ci.g{background:var(--gold-soft);color:#8a6300} .ci.t{background:var(--teal-soft);color:var(--teal)}

/* ---------------- features ---------------- */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px}
.feat{position:relative;margin:0;padding:22px}
.feat:hover{border-color:#c3cad6;box-shadow:var(--lift);transform:translateY(-2px)}
.feat .fic{display:grid;place-items:center;width:40px;height:40px;margin-bottom:14px;border-radius:11px;color:var(--brand);background:var(--bg)}
.feat .fic svg{width:20px;height:20px}
.feat h3{font-size:1.06rem;margin:0 0 6px;padding-right:64px}
.feat p{margin:0;color:var(--muted);font-size:.95rem}
.feat-badge{position:absolute;top:20px;right:20px}
.feat.is-new{border-color:var(--brand-line)}

/* ---------------- portal themes ---------------- */
.themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;max-width:940px;margin:0 auto}
.theme{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.theme .phone{--pw:240px;box-shadow:0 0 0 1.5px var(--metal-edge),0 0 0 3px #3b3e45,0 30px 50px -34px rgba(21,27,38,.55)}
.theme .screen img{top:0;height:100%}
.theme figcaption{margin-top:22px}
.theme figcaption b{display:block;font:700 1.05rem var(--display)}
.theme figcaption span{display:block;color:var(--muted);font-size:.9rem;margin-top:3px;max-width:30ch}

/* ---------------- routers ---------------- */
.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
@media (min-width:1080px){.rgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rcard{display:flex;align-items:center;gap:16px;padding:16px;color:inherit;position:relative;margin:0}
.rcard .r-link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.rcard .r-link:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
div.rcard.now:hover{transform:translateY(-2px);border-color:#c3cad6;box-shadow:var(--lift)}
.r-shot{flex:none;width:86px;height:86px;border-radius:14px;display:grid;place-items:center;overflow:hidden;background:#fff;border:1px solid var(--line);padding:5px}
.r-shot img{width:100%;height:100%;object-fit:contain;border-radius:10px;transition:transform .3s var(--ease)}
div.rcard.now:hover .r-shot img{transform:scale(1.06)}
.r-ico{background:var(--card-2)}
.r-ico svg{width:30px;height:30px;color:var(--brand)}
.r-body{min-width:0;display:grid;gap:5px;align-self:center}
.r-body h3{margin:0;font-size:.98rem;line-height:1.3}
.r-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.r-go{margin-left:auto;color:var(--faint);transition:transform .2s var(--ease),color .2s var(--ease)}
.r-go svg{width:19px;height:19px}
div.rcard.now:hover .r-go{color:var(--brand);transform:translateX(3px)}
.r-buy{position:relative;z-index:2;display:inline-flex;align-items:center;gap:5px;font-size:.76rem;font-weight:700;line-height:1;padding:6px 10px;border-radius:999px;
  color:#d73c1d;background:#fdeee9;border:1px solid #f6c6b8;text-decoration:none;white-space:nowrap}
.r-buy svg{width:14px;height:14px}
.r-buy:hover{background:#fbe0d7;text-decoration:none}
.r-aff{margin-top:14px}

/* ---------------- steps ---------------- */
.steps{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px}
.steps li{counter-increment:s;position:relative;padding:20px 18px 18px 60px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.steps li::before{content:counter(s);position:absolute;left:18px;top:19px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  font:800 .85rem var(--display);color:#fff;background:var(--ink)}
.steps li b{display:block;margin-bottom:3px;font-family:var(--display)}
.steps li span{color:var(--muted);font-size:.93rem}

/* ---------------- price ---------------- */
.price-wrap{display:grid;place-items:center}
.price-card{max-width:460px;width:100%;text-align:center;padding:30px 24px;margin:0 auto;border-color:var(--line-2)}
.price-card .p-val{font:800 3rem/1.1 var(--display);letter-spacing:-.04em;margin:.4rem 0 .2rem;color:var(--ink)}
.ticks{list-style:none;margin:1.1rem 0;padding:0;display:grid;gap:9px;text-align:left}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:.94rem}
.ticks svg{width:17px;height:17px;flex:none;color:var(--teal);margin-top:3px}

/* ---------------- talk + closing band ---------------- */
.band{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;align-items:stretch}
.band .card{margin:0}
.talk .cta{margin-top:14px}
.cta-band{margin:64px 0 10px;border-radius:20px;padding:40px 32px;background:var(--ink);color:#fff}
.cta-in{display:flex;align-items:center;justify-content:space-between;gap:18px 28px;flex-wrap:wrap}
.cta-band h2{color:#fff;font-size:clamp(1.4rem,3vw,1.9rem);margin:0 0 6px}
.cta-band p{color:#b7c0cf;margin:0}
.cta-band .btn{background:#fff;border-color:#fff;color:var(--ink)}
.cta-band .btn.ghost{background:transparent;border-color:#3a4354;color:#fff}
.cta-band .btn.ghost:hover{background:#232b3a}
.cta-band .btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---------------- legal ---------------- */
.legal{max-width:780px;margin-inline:auto;line-height:1.7;padding:32px}
.legal h1{font-size:1.9rem}
.legal h2{margin:1.6rem 0 .4rem}
.legal ul{padding-left:1.2rem;margin:.3rem 0}
.legal li{margin:.3rem 0}
.legal li::marker{color:var(--brand)}
.legal b{color:var(--ink)}

/* ---------------- guide ---------------- */
.guide-head{padding-block:26px 8px;max-width:820px}
.guide-head h1{font-size:clamp(1.9rem,4vw,2.8rem);letter-spacing:-.03em;line-height:1.1}
.guide{display:grid;grid-template-columns:230px minmax(0,1fr);gap:34px;align-items:start;margin-top:18px}
.toc{position:sticky;top:84px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.toc-title{margin:0 0 8px;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:700}
.toc ol{list-style:none;margin:0 0 12px;padding:0;counter-reset:toc}
.toc li{counter-increment:toc}
.toc ol a{display:flex;gap:9px;padding:6px 8px;border-radius:7px;color:var(--muted);font-size:.9rem;font-weight:600}
.toc ol a::before{content:counter(toc,decimal-leading-zero);font:700 .74rem/1.7 var(--mono);color:var(--faint)}
.toc ol a:hover{background:var(--bg);color:var(--ink);text-decoration:none}
.toc-fb{width:100%}
.guide-body{min-width:0}
.gsec{padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid var(--line);scroll-margin-top:84px}
.gsec:last-child{border-bottom:0}
.gsec h2{display:flex;align-items:center;gap:12px;font-size:clamp(1.3rem,2.6vw,1.65rem);margin:0 0 12px}
.gsec h3{font-size:1.05rem;margin:22px 0 8px}
.gsec p{margin:.5rem 0;line-height:1.7}
.gsec code{background:var(--card);border:1px solid var(--line-2);border-radius:6px;padding:1px 6px;color:var(--ink);overflow-wrap:anywhere}
.gnum{display:grid;place-items:center;min-width:40px;height:32px;padding:0 8px;border-radius:9px;font:800 .82rem/1 var(--mono);color:#fff;background:var(--ink)}
.gsteps{counter-reset:gs;list-style:none;padding:0;margin:12px 0;display:flex;flex-direction:column;gap:10px}
.gsteps li{counter-increment:gs;position:relative;padding:12px 14px 12px 54px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);line-height:1.6}
.gsteps li::before{content:counter(gs);position:absolute;left:14px;top:11px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  font-weight:800;font-size:.82rem;color:var(--brand);background:var(--brand-soft)}
.path .gsteps li{background:var(--card-2)}
.glist{padding-left:1.2rem;margin:10px 0;display:flex;flex-direction:column;gap:8px;line-height:1.6}
.glist li::marker{color:var(--teal)}
.kit{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px;margin:12px 0}
.kit-i{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.kit-i span{color:var(--muted);font-size:.9rem}
.note{display:flex;gap:12px;padding:13px 15px;margin:14px 0;border-radius:var(--radius-s);border:1px solid var(--brand-line);background:var(--info-soft)}
.note .note-ic{color:var(--info);flex:none;margin-top:2px}
.note .note-ic svg{width:20px;height:20px}
.note p{margin:.2rem 0 0;color:var(--ink)}
.note.warn{border-color:#f1dca8;background:var(--warn-soft)} .note.warn .note-ic{color:var(--warn)}
.note.bad{border-color:#f0b7c1;background:var(--bad-soft)} .note.bad .note-ic{color:var(--bad)}
.note.ok{border-color:#a9dcd2;background:var(--ok-soft)} .note.ok .note-ic{color:var(--ok)}
.dl-card{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:14px 0;padding:18px;border-radius:var(--radius);border:1px solid var(--line-2);background:var(--card)}
.dl-card .fic,.gf .fic{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;color:var(--brand);background:var(--brand-soft)}
.dl-card .fic svg,.gf .fic svg{width:22px;height:22px}
.dl-body{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.dl-facts{display:grid;grid-template-columns:max-content 1fr;gap:2px 12px;margin:4px 0 0;font-size:.88rem}
.dl-facts dt{color:var(--faint)} .dl-facts dd{margin:0;overflow-wrap:anywhere}
.dl-card.missing{border-style:dashed;background:var(--card-2)}
.gtable{margin:12px 0;font-size:.93rem}
.gtable th[scope=row]{background:transparent;text-transform:none;letter-spacing:0;font-size:.9rem;color:var(--muted);font-weight:600;white-space:nowrap}
.gsec .table-wrap{border:1px solid var(--line);border-radius:var(--radius-s);background:var(--card)}
.gsec .table-wrap .gtable{margin:0}
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;margin:14px 0}
.path{margin:0}
.path h3{margin:6px 0 6px}
.gfeat{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px;margin-top:12px}
.gf{display:flex;gap:14px;margin:0;padding:16px}
.gf h3{margin:2px 0 4px;font-size:1rem}
.gf p{margin:0;color:var(--muted);font-size:.93rem}
.gf p.where{margin-top:8px;font-size:.8rem;color:var(--brand);font-weight:600}
.faq{display:flex;flex-direction:column;gap:8px}
.faq details{margin:0;padding:0}
.faq summary{cursor:pointer;padding:14px 16px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brand);font-weight:800;font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0;padding:0 16px 14px;color:var(--muted)}
.tpl{border:1px solid var(--line-2);border-radius:var(--radius-s);background:var(--card);margin:14px 0;overflow:hidden}
.tpl-head{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--card-2);border-bottom:1px solid var(--line)}
.tpl pre{margin:0;padding:14px;overflow-x:auto;font:.86rem/1.6 var(--mono);color:var(--ink)}
.assist{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:14px 0;padding:16px 18px;border-radius:var(--radius);border:1px solid #a9dcd2;background:var(--ok-soft)}
.assist .fic{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;color:var(--teal);background:#fff}
.assist .fic svg{width:22px;height:22px}
.assist>div{flex:1 1 320px}
.assist p{margin:.3rem 0 0;color:var(--ink)}
.fig{margin:1.25rem 0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.fig img{display:block;width:100%;height:auto}
.fig figcaption{padding:.65rem .9rem;font-size:.86rem;line-height:1.5;color:var(--muted);border-top:1px solid var(--line);background:var(--card-2)}
.gshots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start;margin:1.25rem 0}
.gshots figure{margin:0}
.gshots img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line-2)}
.gshots figcaption{font-size:.86rem;color:var(--muted);margin-top:6px;text-align:center}
.vid{margin:16px 0 18px;padding:14px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--card)}
.vid-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.vid-head svg{width:22px;height:22px;color:var(--brand);flex:none;margin-top:2px}
.vid-head div{display:flex;flex-direction:column}
.vid-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-s);overflow:hidden;background:#000}
.vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-ch{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:4px}
.vid-ch a{display:flex;gap:10px;padding:6px 8px;border-radius:8px;color:var(--ink)}
.vid-ch a:hover{background:var(--bg);text-decoration:none}
.vid-ch .mono{color:var(--brand);min-width:3.2em}
.vid-yt{margin:10px 0 0}

/* ---------------- /flash (ESP8266 online flasher) ---------------- */
.flash-page{max-width:760px;margin:0 auto;padding:28px 0 10px}
.flash-page h1{margin:.25rem 0 .5rem}
.flash-page .lead{color:var(--muted);margin:0 0 18px}
.flash-page h2{margin:28px 0 8px;font-size:1.15rem}
.flash-page [hidden]{display:none!important}
.fl-card{display:flex;flex-direction:column;gap:14px}
.fl-fw{display:flex;gap:12px;align-items:flex-start}
.fl-fw .fic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--brand-soft);color:var(--brand)}
.fl-fw .fic svg{width:20px;height:20px}
.fl-fw .mono{word-break:break-all}
.fl-mode{border:0;margin:0;padding:0;display:grid;gap:8px}
.fl-mode legend{font-weight:600;margin-bottom:6px;padding:0}
.fl-opt{display:flex;flex-direction:row;font-weight:400;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--radius-s);background:var(--card);cursor:pointer}
.fl-opt:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.fl-opt b{font-weight:600}
.fl-opt input[type=radio]{width:18px;height:18px;min-height:0;padding:0;margin:3px 0 0;flex:0 0 auto;accent-color:var(--brand)}
.fl-opt span{display:flex;flex-direction:column;gap:2px}
.fl-opt small{color:var(--muted);font-size:.86rem}
#fl-go{align-self:flex-start}
.fl-all{display:flex;flex-direction:row;font-weight:400;gap:8px;align-items:center;align-self:flex-start;cursor:pointer}
.fl-run{padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--radius-s);background:var(--card)}
.fl-step{font-weight:600;margin-bottom:8px}
.fl-bar{height:10px;border-radius:6px;background:var(--line);overflow:hidden}
.fl-bar span{display:block;height:100%;width:0;background:var(--brand);transition:width .25s}
.fl-run.ok .fl-bar span{background:var(--ok)}
.fl-run.bad .fl-bar span{background:var(--bad)}
.fl-logbox pre{max-height:220px;overflow:auto;background:var(--card-2);border:1px solid var(--line);border-radius:var(--radius-s);padding:10px;font:12px/1.45 var(--mono);white-space:pre-wrap;word-break:break-all;margin:8px 0 0}
.fl-list{padding-left:1.2rem}
.fl-list li{margin:.35rem 0}

/* ---------------- distributors: tiers, podium, map ---------------- */
.tier{--tc:#525d70;--tb:#eceff3;--tl:#cfd5de;display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 8px;border-radius:999px;
  font-size:.8rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--tc);background:var(--tb);border:1px solid var(--tl);white-space:nowrap;line-height:1.2;width:fit-content}
.tier svg{width:15px;height:15px;flex:none}
.tier.t-bronze{--tc:#8f4f1c;--tb:#f6e6d8;--tl:#e5c3a4}
.tier.t-silver{--tc:#4f5b6c;--tb:#eef1f5;--tl:#c9d1dc}
.tier.t-gold{--tc:#7d5a00;--tb:#fbf0cf;--tl:#ead18a}
.tier.t-platinum{--tc:#0e6f66;--tb:#dbf3f0;--tl:#9fd9d1}
.tier.t-diamond{--tc:#2d4fb8;--tb:#e3eafd;--tl:#b2c3f3}
.tier.t-legend{--tc:#fff;--tb:#151b26;--tl:#151b26}
.tier.tier-big{font-size:1rem;padding:8px 16px 8px 12px;gap:8px}
.tier.tier-big svg{width:22px;height:22px}
.tier.tier-mini{font-size:.68rem;padding:2px 8px 2px 6px;gap:4px}
.tier.tier-mini svg{width:12px;height:12px}
.who-tier:hover{text-decoration:none;opacity:.85}
.dhero{padding-block:22px 6px;max-width:760px}
.dhero h1{font-size:clamp(1.9rem,4.4vw,2.8rem);line-height:1.08;margin:.5rem 0 .6rem;letter-spacing:-.03em}
.dhero .lede{max-width:56ch}
.dhero .cta{display:flex;gap:10px;flex-wrap:wrap;margin:1rem 0 0}
.mtop .card.empty{margin:0}
.podium{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px}
.pod a{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:20px 12px 16px;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);height:100%;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.pod a:hover{text-decoration:none;box-shadow:var(--lift);transform:translateY(-2px)}
.pod-place{position:absolute;top:10px;left:12px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:var(--raise);color:var(--muted);font-size:.9rem}
.pod.p1 a{border-color:#ead18a}
.pod.p1 .pod-place{background:#e8b82e;color:#1a1300}
.pod.p2 .pod-place{background:#cfd6e0;color:#151a22}
.pod.p3 .pod-place{background:#d39b6a;color:#1d1006}
.pod-name{font-weight:800;line-height:1.25;font-family:var(--display)}
.pod-n{color:var(--teal);font-size:.9rem}
.pod-n b{font-size:1.25rem}
.ladder{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 14px}
.ladder li{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.ladder.mini{gap:6px 10px;margin:14px 0 8px}
.ladder.mini li{flex-direction:row;align-items:center;gap:5px}
.ladder.mini li.todo{opacity:.45}
.ladder.mini li.cur .tier{outline:2px solid var(--ink);outline-offset:2px}
.dmap{height:420px;border-radius:var(--radius);border:1px solid var(--line);overflow:hidden;background:var(--bg-2);z-index:0}
.dmap.pick{height:280px;margin:6px 0 4px}
.leaflet-container{font:inherit;background:var(--bg-2)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--card);color:var(--ink);box-shadow:var(--lift)}
.leaflet-popup-content a{font-weight:700}
.leaflet-control-attribution{background:rgba(255,255,255,.85)!important;color:var(--muted)}
.leaflet-control-attribution a{color:var(--brand-2)}
.leaflet-bar a{background:var(--card);color:var(--ink);border-color:var(--line-2)}
.leaflet-bar a:hover{background:var(--card-2)}
.dfilter{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}
.dfilter label{flex:0 1 260px}
.dlist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.dcard{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:16px;align-items:start;margin:0;scroll-margin-top:84px}
.dcard[hidden]{display:none}
.dcard:target{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.drank{font:800 1.9rem/1 var(--display);min-width:2.6ch;color:var(--faint);font-variant-numeric:tabular-nums;padding-top:6px}
.drank small{font-size:.55em;margin-right:1px;opacity:.7}
.dcard.r1{border-color:#ead18a}
.dcard.r1 .drank{color:#b98a0d}
.dcard.r2 .drank{color:#6b7686}
.dcard.r3 .drank{color:#a8662c}
.dbody h3{margin:0 0 6px;font-size:1.12rem}
.dbody p{margin:.3rem 0}
.dbody p svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
.dmeta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.dsold{color:var(--muted)}
.dsold b{font-size:1.05rem;color:var(--ink)}
.dmonth{color:var(--teal);font-weight:700;font-size:.88rem}
.dbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px!important}
.dbtns .btn svg{width:15px;height:15px}
.avatar{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;flex:none;overflow:hidden;font-weight:800;color:#fff;background:var(--brand);border:2px solid #fff;box-shadow:0 0 0 1px var(--line-2)}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.big{width:68px;height:68px;font-size:1.25rem}
.rankcard{position:relative;overflow:hidden}
.rank-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rank-num{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.rank-num b{font:800 2rem/1 var(--display)}
.rank-stats{display:flex;gap:28px;margin:16px 0 6px;flex-wrap:wrap}
.rank-stats div{display:flex;flex-direction:column}
.rank-stats b{font:800 1.6rem/1.1 var(--display);font-variant-numeric:tabular-nums}
.rank-stats span{color:var(--muted);font-size:.85rem}
.rank-next{margin:12px 0 6px}
.rank-next span{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
progress.tierbar{-webkit-appearance:none;appearance:none;width:100%;height:10px;border:0;border-radius:6px;background:var(--line);overflow:hidden}
progress.tierbar::-webkit-progress-bar{background:var(--line);border-radius:6px}
progress.tierbar::-webkit-progress-value{background:var(--brand);border-radius:6px}
progress.tierbar::-moz-progress-bar{background:var(--brand);border-radius:6px}
.distbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--ink)}
.distbar:hover{text-decoration:none;border-color:var(--brand-line)}
.distbar-t{display:flex;flex-direction:column;margin-right:auto}
.distbar .btn svg{width:15px;height:15px}
.made textarea{width:100%}
.photo-row{align-items:center}
.photo-row input[type=file]{padding:7px}
h2.sep{border-top:1px solid var(--line);padding-top:16px;margin-top:18px}
.tiers2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 16px}
.pbox{display:flex;flex-direction:column;align-items:center;padding:14px 10px;border:1px solid var(--line-2);border-radius:var(--radius-s);background:var(--card);text-align:center}
.pbox b{font:800 1.6rem var(--display)}
.pbox span{color:var(--muted);font-size:.85rem}
.pbox.best{border-color:#a9dcd2;background:var(--ok-soft)}
.pbox.best b{color:var(--ok)}
.ctotal{font-size:1.05rem;margin:0}
.pay-h{font-size:1rem;margin:16px 0 8px}
.gcash-qr{display:block;width:100%;max-width:320px;height:auto;margin:8px auto;border:1px solid var(--line);border-radius:var(--radius-s);background:#fff}
.pay-steps{padding-left:20px;margin:8px 0 0}.pay-steps li{margin:4px 0}
.ctotal b{font-size:1.3rem}
.apply-cta{display:flex;justify-content:center;margin:34px 0 10px}
.apply-cta .btn{letter-spacing:.04em}
/* honour badges: solid colour, given by AJK only */
.hbs{display:inline-flex;flex-wrap:wrap;gap:6px}
.dhb{margin:.45rem 0 .2rem!important}
.hb{--hc:#3f4fd9;--hi:#fff;display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 7px;border-radius:7px;font-size:.78rem;font-weight:700;color:var(--hi);background:var(--hc);white-space:nowrap;line-height:1.3}
.hb svg{width:14px;height:14px;flex:none}
.hb.hb-mini{font-size:.66rem;padding:1px 7px 1px 5px;gap:3px}
.hb.hb-mini svg{width:11px;height:11px}
.hb-founder{--hc:#e8b82e;--hi:#1d1500}
.hb-cofounder{--hc:#f0c46a;--hi:#1d1500}
.hb-cmo{--hc:#d63f8c}
.hb-partner{--hc:#3f4fd9}
.hb-verified{--hc:#0d8f7c}
.hb-installer{--hc:#e06d1f}
.hb-trainer{--hc:#2f7de1}
.hb-support{--hc:#0e8fa8}
.hb-beta{--hc:#8a4fd8}
.hb-pioneer{--hc:#f2cd4a;--hi:#1d1500}
.pod .hbs{justify-content:center}

/* ---------------- My machines ---------------- */
.mach-intro{margin:-6px 0 14px}
.mach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:16px;align-items:start;margin-bottom:16px}
.mach-grid>.card{margin-bottom:0}
.mach-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.mach-ic{flex:none;width:40px;height:40px;border-radius:11px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center}
.mach-ic svg{width:22px;height:22px}
.mach-name{flex:1;min-width:0}
.mach-name h2{margin:0;font-size:1.08rem;overflow-wrap:anywhere}
.mach-facts{margin:0 0 12px}
.mach-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mach-actions form{margin:0}
.mach-actions .btn svg{width:16px;height:16px}
.mach-more{flex-basis:100%}
.mach-more>summary{list-style:none;display:inline-flex;cursor:pointer}
.mach-more>summary::-webkit-details-marker{display:none}
.mach-more[open]>summary{margin-bottom:10px}
.mach-dead{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.mach-dead>summary{cursor:pointer;color:var(--muted);font-size:.88rem}
.mach-dead[open]>summary{margin-bottom:8px}

/* ---------------- back to top ---------------- */
.totop{position:fixed;right:16px;bottom:16px;z-index:20;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--line-2);
  background:var(--card);color:var(--ink);box-shadow:var(--lift);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{border-color:var(--brand-line);color:var(--brand)}
.totop svg{width:18px;height:18px;transform:rotate(-90deg)}

/* staggered reveal for grids (app.js numbers the children) */
.features .feat,.rgrid .rcard,.steps li{opacity:0;transform:translateY(12px)}
.in .feat,.in .rcard,.in li,.no-js .feat,.no-js .rcard,.no-js .steps li{opacity:1;transform:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .2s,box-shadow .2s;transition-delay:calc(var(--i,0) * 50ms)}

/* ---------------- phones and tablets ---------------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:8px;padding-block:22px 20px;text-align:center}
  .hero .lede{margin-inline:auto}
  .hero .cta,.proof{justify-content:center}
  .shots{--apw:min(27vw,118px);padding:40px 0 50px;place-items:center}
  .shots .phone{--pw:min(64vw,290px)}
  .ap{bottom:3%}
  .air{bottom:calc(3% + var(--apw) * .62)}
  .ap-tag{display:none}
  .chip.c1{left:0;top:12%} .chip.c2{right:0;bottom:14%}
  .guide{grid-template-columns:1fr;gap:18px}
  .toc{position:static}
  .toc ol{display:grid;grid-template-columns:1fr 1fr;gap:0 8px}
  .themes{gap:14px}
  .theme .phone{--pw:100%}
}
@media (max-width:760px){
  .top .nav-toggle{display:inline-flex}
  .top-in{gap:10px;min-height:58px}
  .brand-mark{width:30px;height:30px}
  .nav{order:3;flex-basis:100%;display:none;flex-direction:column;gap:2px;padding-bottom:8px}
  .nav.open{display:flex}
  .nav a{padding:11px 12px}
  .who{margin-left:auto}
  .who-name{max-width:120px}
  .top-in .who .btn{padding:7px 10px}
  .stackable table.table-stack thead{display:none}
  .stackable table.table-stack,.stackable table.table-stack tbody,.stackable table.table-stack tr,.stackable table.table-stack td{display:block;width:100%}
  .stackable table.table-stack tr{border-bottom:1px solid var(--line);padding:10px 14px}
  .stackable table.table-stack td{border:0;padding:3px 0;display:flex;gap:12px;justify-content:space-between;text-align:right}
  .stackable table.table-stack td::before{content:attr(data-label);color:var(--muted);font:.82rem var(--font);text-align:left;flex:0 0 auto}
  .stackable table.table-stack td[data-label=""]::before{content:none}
  .stackable table.table-stack td:empty{display:none}
  .stackable table.table-stack td>div{margin-left:auto}
  .filters label,.filters label.grow{flex:1 1 100%}
  dl.facts{grid-template-columns:1fr;gap:2px} dl.facts dd{margin-bottom:8px}
  dl.facts.mach-facts{grid-template-columns:max-content 1fr;gap:6px 14px} dl.facts.mach-facts dd{margin-bottom:0}
  .t-val{font-size:1.35rem}
  .auth .card{padding:24px 18px}
  .legal{padding:22px 18px}
  .cta .btn{flex:1 1 100%}
  .section{margin:48px 0}
  .cta-band{padding:30px 20px;text-align:center}
  .cta-in{justify-content:center}
  .cta-in .cta{width:100%}
  .price-card .p-val{font-size:2.5rem}
  .r-shot{width:70px;height:70px}.rcard{gap:12px;padding:13px}
  .theme figcaption span{display:none}
}
@media (max-width:560px){
  .toc ol{grid-template-columns:1fr}
  .gsteps li{padding-left:48px}
  .gtable th[scope=row]{white-space:normal}
  .gshots{grid-template-columns:1fr}
  #fl-go{align-self:stretch}
  .dcard{grid-template-columns:auto minmax(0,1fr);gap:10px 12px}
  .dcard .avatar{grid-column:2;grid-row:1}
  .dcard .drank{grid-column:1;grid-row:1}
  .dcard .dbody{grid-column:1 / -1}
  .dmap{height:320px}
  .dbtns .btn{flex:1 1 auto}
}
@media (max-width:420px){
  .chip{font-size:.75rem;padding:8px 10px} .chip b{font-size:.82rem} .chip .ci{display:none}
  .hero .cta .btn:nth-child(3){display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .reveal,.features .feat,.rgrid .rcard,.steps li{opacity:1;transform:none}
  .floaty,.floor,.rim,.chip,.b-new,.shots .phone,.shots .wf path,.shots .wf circle,.ap .led{animation:none!important}
  .rim{display:none}
  .air span{animation:none;opacity:.22;transform:scale(.3)}
  .air span:nth-child(2){transform:scale(.55);opacity:.12}
  .air span:nth-child(3){display:none}
}
.price-card .cta{justify-content:center;margin-top:16px}
.price-card .cta+.muted{margin-top:8px}
.guide-head .lede,.dhero .lede{max-width:62ch}
@media (max-width:1400px){.who-name{display:none}}
@media (max-width:760px){.top-in{gap:8px}.top-in .who{gap:6px}.top-in .who .btn{padding:6px 9px;font-size:.82rem;min-height:34px}}
@media (max-width:760px){.top-in .who{order:1;margin-left:auto}.top .nav-toggle{order:2;margin-left:0}}

/* brand picker cards on /guide and the brand pages (board_cards() in guide_brands.php) */
.routers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px;margin:12px 0}
.routers .router{display:flex;gap:14px;align-items:flex-start;margin:0;padding:16px}
.routers .router .fic{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;color:var(--brand);background:var(--brand-soft)}
.routers .router .fic svg{width:22px;height:22px}
.routers .router h3{font-size:1.02rem;margin:0 0 4px}
.routers .router p{margin:2px 0}

/* ===== 0.3.7 ===== */
/* Left floating navigation on wide screens; a left slide-in drawer on phones */
@media (min-width:1100px){
  .top .nav{position:fixed;left:16px;top:84px;z-index:9;flex:none;flex-direction:column;flex-wrap:nowrap;gap:2px;width:200px;
    padding:10px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px -26px rgba(21,27,38,.45)}
  .top .nav a{white-space:normal;padding:9px 12px}
  .top-in{justify-content:space-between}
  body > main.wrap, body > .site-foot > .wrap{padding-left:236px;max-width:1416px}
}
@media (max-width:1099px){
  .top .nav-toggle{display:inline-flex;margin-left:auto}
  .top .nav{position:fixed;top:0;left:0;height:100vh;height:100dvh;z-index:30;width:min(80vw,290px);display:flex;flex-direction:column;flex-wrap:nowrap;gap:2px;
    padding:76px 14px 20px;background:var(--card);border-right:1px solid var(--line);box-shadow:20px 0 50px -30px rgba(21,27,38,.6);
    transform:translateX(-105%);transition:transform .22s var(--ease);overflow-y:auto;order:0;flex-basis:auto}
  .top .nav.open{transform:none;display:flex}
  .top .nav a{padding:11px 12px;white-space:normal}
}
@media (max-width:1099px) and (prefers-reduced-motion:reduce){.top .nav{transition:none}}

/* Need help? - bottom right, every page */
.help-fab{position:fixed;right:16px;bottom:16px;z-index:40}
.help-fab>summary{list-style:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:11px 16px;border-radius:999px;
  background:var(--brand);color:var(--brand-ink);font-weight:700;font-size:.92rem;box-shadow:0 12px 28px -12px rgba(63,79,217,.75)}
.help-fab>summary::-webkit-details-marker{display:none}
.help-fab>summary svg{width:18px;height:18px}
.help-card{position:absolute;right:0;bottom:56px;width:min(300px,calc(100vw - 32px));padding:16px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;box-shadow:0 24px 50px -24px rgba(21,27,38,.55);font-size:.9rem}
.help-card b{display:block;color:var(--ink)}
.help-card p{margin:.4rem 0 .8rem;color:var(--muted)}
.help-card .btn svg{width:16px;height:16px}

/* Two price cards: online + distributor (the better deal) */
.price-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch;max-width:940px;margin:0 auto;place-items:stretch}
.price-two .price-card{max-width:none;margin:0;display:flex;flex-direction:column}
.price-two .price-card .ticks{flex:1;align-content:start}
.price-dist{position:relative;background:#151b26;border-color:#151b26;color:#e8ebf2}
.price-dist .p-val,.price-dist b{color:#fff}
.price-dist p,.price-dist .ticks li{color:#cfd5e2}
.price-dist .ticks svg{color:var(--gold)}
.best-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:3px 12px;border-radius:999px;background:var(--gold);color:#1d1600;font-weight:800;font-size:.75rem;letter-spacing:.06em}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#1d1600}
@media (max-width:760px){.price-two{grid-template-columns:1fr}}
/* 0.3.8 */
.price-card .p-sub{margin:.55rem 0 0;font-weight:700;font-size:.92rem;color:var(--ink)}
.price-dist .p-sub{color:#fff}
.best-tag{white-space:nowrap}

/* Review page */
.order-sum{width:100%;border-collapse:collapse;margin:6px 0 14px;font-size:1rem}
.order-sum td{padding:10px 0;border-bottom:1px solid var(--line)}
.order-sum td:last-child{text-align:right;font-weight:700;white-space:nowrap;padding-left:12px}
.order-sum tr.tot td{border-bottom:0;font-size:1.15rem;font-weight:800;color:var(--ink)}
.apply-cta{flex-direction:column;align-items:center}
.apply-cta p{margin:0 0 10px}

/* 0.3.15 Generate License card - stands out on the distributor page */
.card.gen-lic{background:linear-gradient(135deg,var(--brand-soft),var(--card) 70%);border:2px solid var(--brand);border-left-width:6px;box-shadow:var(--shadow),0 0 0 4px var(--brand-soft)}
.gen-lic .gen-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.gen-lic h2{margin:0;font-size:1.45rem;color:var(--brand-deep)}
.gen-lic .gen-cred{font-weight:700;font-size:.9rem;padding:4px 12px;border-radius:999px;background:var(--brand);color:var(--brand-ink);white-space:nowrap}
.gen-lic .btn.big{padding:12px 26px;font-size:1.05rem;font-weight:700}

/* ===== 0.3.19 ===== */
/* Slogan beside the logo (fills the empty top bar on wide screens), under it on phones */
.brand-wrap{display:flex;align-items:center;gap:14px;min-width:0}
.brand-slogan{color:var(--muted);font-size:.92rem;font-weight:600;padding-left:14px;border-left:1px solid var(--line-2);line-height:1.3}
@media (max-width:760px){
  .brand-wrap{display:contents}
  .brand-slogan{order:3;flex-basis:100%;padding:0 0 2px;border-left:0;font-size:.76rem;margin-top:-4px}
}
/* Price cards: the main buttons sit on the same line in both cards */
.price-two{grid-template-rows:auto auto auto}
.price-two .price-card{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
.price-two .price-card .p-top{display:flex;flex-direction:column;align-items:center}
.price-two .price-card .p-top .ticks{align-self:stretch}
.price-two .price-card .p-act .cta{margin-top:18px}
.price-two .price-card .p-more .muted:first-child{margin-top:8px}
@supports not (grid-template-rows:subgrid){.price-two .price-card{display:flex;flex-direction:column}.price-two .price-card .p-top{flex:1}}


/* 0.4.4: Recommended (Wi-Fi 6) router cards - own row above the others, banner across the top (Aaron 2026-10-16) */
.rgrid-rec{margin-bottom:14px}
@media (min-width:760px){.rgrid-rec{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rcard.rec{padding-top:52px;border:1.5px solid var(--brand-line);background:linear-gradient(180deg,var(--brand-soft),var(--card) 62%);
  box-shadow:var(--shadow),0 14px 30px -22px rgba(63,79,217,.55);overflow:hidden}
div.rcard.rec.now:hover{border-color:var(--brand)}
.rcard.rec .r-shot{width:108px;height:108px}
.rcard.rec .r-body h3{font-size:1.08rem}
.r-rec{position:absolute;top:0;left:0;right:0;height:36px;display:flex;align-items:center;gap:7px;padding:0 16px;
  background:linear-gradient(90deg,var(--brand-deep),var(--brand) 55%,#6d5ce8);color:#fff;font:800 .74rem/1 var(--display);letter-spacing:.09em;text-transform:uppercase}
.r-rec svg{width:15px;height:15px;fill:#ffd45c;stroke:#ffd45c}
.r-rec-tag{margin-left:auto;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);letter-spacing:.04em;font-size:.7rem}
.rcard.soon{border-style:dashed;background:var(--card-2)}
@media (max-width:520px){.rcard.rec .r-shot{width:84px;height:84px}.rcard.rec{padding-top:48px}}
/* site 0.4.4 (2026-10-16): Recommended router row. This line also changes the file so the Docker build cache cannot keep the old file date (= old ?v= token). */

/* 0.4.5: "Easiest to set up" (COMFAST CF-WR631AX) - full-width card at the top of the Recommended row, green banner,
   short points; Linksys joins Recommended. Guide picker: same highlight as pills (Aaron 2026-10-16) */
.rcard.easy{grid-column:1/-1;border-color:#5fc39a;background:linear-gradient(180deg,#e3f6ee,var(--card) 70%);
  box-shadow:var(--shadow),0 0 0 3px rgba(31,164,99,.14),0 18px 36px -22px rgba(16,128,80,.6)}
div.rcard.easy.now:hover{border-color:#1fa463}
.rcard.easy .r-rec{background:linear-gradient(90deg,#0d7a4c,#1fa463 55%,#3ccf8e)}
.rcard.easy .r-shot{width:150px;height:150px}
.rcard.easy .r-body h3{font-size:1.22rem}
.r-pts{list-style:none;margin:8px 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.r-pts li{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.88rem;color:#0d6b43}
.r-pts svg{width:16px;height:16px;flex:none;color:#1fa463}
.r-rec{white-space:nowrap}
@media (max-width:520px){.r-rec-full{display:none}.rcard.easy{flex-wrap:wrap}.rcard.easy .r-shot{width:96px;height:96px}.rcard.easy .r-body h3{font-size:1.08rem}.r-pts{flex-direction:column;gap:4px}}
.g-pick{display:inline-flex;align-items:center;gap:5px;margin:0 0 6px;padding:4px 10px;border-radius:999px;font:800 .7rem/1 var(--display);
  letter-spacing:.06em;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,var(--brand-deep),var(--brand))}
.g-pick.easy{background:linear-gradient(90deg,#0d7a4c,#1fa463)}
.g-pick svg{width:12px;height:12px;fill:#ffd45c;stroke:#ffd45c}
.guide-head .g-pick{margin:10px 0 0;font-size:.78rem;padding:6px 12px}
.routers .router.pick-rec{border:1.5px solid var(--brand-line);background:linear-gradient(180deg,var(--brand-soft),var(--card) 70%)}
.routers .router.pick-easy{grid-column:1/-1;border:1.5px solid #5fc39a;background:linear-gradient(180deg,#e3f6ee,var(--card) 75%);
  box-shadow:0 0 0 3px rgba(31,164,99,.12)}
.routers .router.pick-easy .fic{color:#0d7a4c;background:#cdeedd}
.routers .router.pick-easy h3{font-size:1.15rem}
.routers .router div{min-width:0}