/* RRevX Maps — rrevx.com/maps (landing) + /maps/console (keys & usage). Brand: /brand.css */
:root{--ink:#14213D; --ink2:#3F4A63; --muted:#6B7488; --line:#DEE2D9; --bg:#F5F6F1; --card:#fff; --ok:#1B7F4B; --err:#B42318; --acc:#1D6FA3; --lime:#A3E635; --cyan:#22D3EE;}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'Kanit',system-ui,sans-serif; font-weight:300; line-height:1.6;}
a{color:var(--acc)}
header{padding:18px 24px 0;}
.topbar{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; max-width:1100px; margin:0 auto;}
.mnav{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.mnav a{color:#E6EDF7; text-decoration:none; font-size:14px; padding:6px 12px; border-radius:20px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06)}
.mnav a.pri{background:linear-gradient(92deg,var(--cyan),var(--lime)); color:#0A1020; border-color:transparent; font-weight:500}
.hero{max-width:1100px; margin:0 auto; padding:26px 0 30px;}
.hero h1{font-size:34px; line-height:1.2; font-weight:700; margin:0; color:#F2F6FC; max-width:780px}
.hero h1 em{font-style:normal; background:linear-gradient(92deg,var(--cyan),#7DF0C0 55%,var(--lime)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p{color:#AFC0D6; margin:10px 0 0; max-width:720px; font-size:16px;}
.hero .cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.badges{display:flex; gap:6px 16px; flex-wrap:wrap; margin-top:14px; color:#D9F99D; font-size:14px}
main{max-width:1100px; margin:0 auto; padding:22px 20px 40px; display:grid; gap:22px;}
section{display:grid; gap:12px}
h2{font-size:22px; font-weight:700; margin:0}
h3{font-size:17px; font-weight:500; margin:0}
.sub{color:var(--ink2); margin:0}
.note{color:var(--muted); font-size:13.5px; margin:0}
.btn{font:inherit; font-size:15px; font-weight:500; border-radius:10px; padding:9px 16px; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; justify-content:center}
.btn:disabled{opacity:.55; cursor:default}
.btn.pri{background:linear-gradient(92deg,var(--cyan),var(--lime)); border-color:transparent; color:#0A1020;}
.btn.dark{background:var(--ink); border-color:var(--ink); color:#fff;}
.btn.ghost{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); color:#E6EDF7}
.btn.sm{font-size:13px; padding:5px 10px; border-radius:8px}
.btn.bad{color:var(--err); border-color:#F3C3BE}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px}
.grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.feat .ic{font-size:24px; line-height:1}
.feat p{margin:6px 0 0; color:var(--ink2); font-size:14.5px}
#demo{height:440px; border-radius:14px; border:1px solid var(--line); background:#E8ECE3; z-index:0}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chips button{font:inherit; background:#fff; border:1px solid var(--line); color:var(--ink); font-size:14px; padding:6px 13px; border-radius:20px; cursor:pointer}
.chips button.on{background:#D9F99D; border-color:var(--lime); font-weight:500}
.out{font-size:15px; min-height:24px}
.out b{font-weight:500}
table{width:100%; border-collapse:collapse; font-size:14.5px}
th,td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-weight:500; color:var(--ink2); background:#FAFBF7}
td.num,th.num{text-align:right; white-space:nowrap}
.tbl{overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:#fff}
.tbl table tr:last-child td{border-bottom:none}
.us{color:var(--ok); font-weight:500}
.plans{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.plan{display:flex; flex-direction:column; gap:6px}
.plan .price{font-size:26px; font-weight:700}
.plan .price small{font-size:14px; font-weight:300; color:var(--muted)}
.plan ul{margin:4px 0 0; padding-left:18px; color:var(--ink2); font-size:14.5px}
.plan.hl{border-color:#A3D9A5; box-shadow:0 0 0 2px #E3F7D0}
pre{margin:0; background:#0F1A2F; color:#E6EDF7; border-radius:12px; padding:14px 16px; overflow-x:auto; font-size:13px; line-height:1.5}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
p code,li code,td code{background:#EEF1E8; padding:1px 5px; border-radius:5px; font-size:.92em}
.tabs{display:flex; gap:6px; flex-wrap:wrap}
.tabs button{font:inherit; font-size:13.5px; border:1px solid var(--line); background:#fff; border-radius:8px; padding:4px 10px; cursor:pointer}
.tabs button.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.f{display:grid; gap:10px}
.f .row{display:grid; gap:10px; grid-template-columns:1fr 1fr}
.f label{display:grid; gap:3px; font-size:14px; color:var(--ink2)}
.f input,.f select,.f textarea{font:inherit; font-size:15px; padding:9px 11px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); width:100%}
.f textarea{min-height:110px; resize:vertical}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.msg{font-size:14px; min-height:20px; margin:0}
.msg.ok{color:var(--ok)} .msg.bad{color:var(--err)}
details{background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 14px}
details summary{cursor:pointer; font-weight:500}
details p{margin:8px 0 0; color:var(--ink2); font-size:14.5px}
.two{display:grid; gap:16px; grid-template-columns:1fr 1fr; align-items:start}
.pill{display:inline-block; font-size:12px; border-radius:6px; padding:0 7px; border:1px solid var(--line); background:#fff; color:var(--ink2); white-space:nowrap}
.pill.ok{background:#DCFCE7; border-color:#A7E3BE; color:#0B5E34}
.pill.off{background:#F1F1EE; color:var(--muted)}
.pill.warn{background:#FEF3C7; border-color:#FCD34D; color:#78350F}
.meter{height:8px; background:#EEF1E8; border-radius:6px; overflow:hidden}
.meter i{display:block; height:100%; background:linear-gradient(90deg,var(--cyan),var(--lime))}
.meter.full i{background:#F97316}
.stat{display:grid; gap:4px}
.stat .v{font-size:22px; font-weight:700}
.keybox{display:flex; gap:8px; align-items:center; background:#0F1A2F; color:#D9F99D; border-radius:10px; padding:10px 12px; font-family:ui-monospace,Menlo,monospace; font-size:14px; word-break:break-all}
.overlay{position:fixed; inset:0; background:rgba(10,16,32,.55); display:none; align-items:center; justify-content:center; padding:16px; z-index:50}
.overlay.on{display:flex}
.modal{background:#fff; border-radius:16px; padding:18px; width:min(560px,100%); max-height:92vh; overflow:auto; display:grid; gap:12px}
footer.attr{text-align:center; font-size:12.5px; color:var(--muted); padding:0 16px}
footer.attr a{color:var(--muted)}
@media(max-width:820px){ .two{grid-template-columns:1fr} #demo{height:340px} }
@media(max-width:560px){ header{padding:16px 16px 0} main{padding:16px 16px 36px} .hero h1{font-size:26px} .f .row{grid-template-columns:1fr} th,td{padding:8px 7px} }