:root{--bg:#030712;--card:rgba(10,20,42,.78);--ink:#f4f7ff;--muted:#94a8c9;--line:rgba(121,157,230,.22);--accent:#2d6fff;--soft:#9fc0ff;--cyan:#22d3ee;--ok:#4ade80;--bad:#f87171;--warn:#fbbf24;
--fd:"Plus Jakarta Sans","Inter",system-ui,sans-serif;--fb:"Inter",system-ui,-apple-system,sans-serif;--r:14px;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);-webkit-font-smoothing:antialiased}
body{min-height:100vh;background:radial-gradient(900px 500px at 50% -10%,rgba(45,111,255,.22),transparent 60%),radial-gradient(600px 400px at 100% 10%,rgba(34,211,238,.1),transparent 60%),var(--bg);background-attachment:fixed}
a{color:var(--soft);text-decoration:none}[hidden]{display:none!important}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.8rem;padding:calc(.7rem + var(--sat)) 1.1rem .7rem;background:rgba(3,7,18,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink)}.mark{width:2.1rem;height:2.1rem;border-radius:10px;display:grid;place-items:center;font-family:var(--fd);font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),var(--cyan));box-shadow:0 0 18px rgba(45,111,255,.45)}
.bt{display:grid;line-height:1.1}.bt strong{font-family:var(--fd);letter-spacing:.06em;font-size:.95rem}.bt span{font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}.sp{flex:1}
.ico{width:2.4rem;height:2.4rem;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.ico{padding:0;display:grid;place-items:center;overflow:hidden;flex-shrink:0}
.ico .av{display:grid;place-items:center;width:100%;height:100%;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--cyan));font-size:.8rem}
.ico .usr{display:grid;place-items:center;color:var(--ink)}.ico .usr svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round}
.ico:hover{border-color:rgba(34,211,238,.45);background:rgba(34,211,238,.08)}
.menu{position:fixed;top:calc(3.9rem + var(--sat));right:.9rem;z-index:30;min-width:13rem;padding:.4rem;border-radius:12px;border:1px solid var(--line);background:rgba(8,14,28,.98);box-shadow:0 16px 40px rgba(0,0,0,.45)}
.menu .hd{padding:.45rem .6rem .6rem;border-bottom:1px solid var(--line);margin-bottom:.25rem}.menu .hd strong{display:block;font-size:.88rem}.menu .hd span{font-size:.74rem;color:var(--muted)}
.menu a,.menu button{display:block;width:100%;text-align:left;padding:.6rem;border:0;border-radius:8px;background:none;color:var(--muted);font:inherit;font-size:.88rem;cursor:pointer}.menu a:hover,.menu button:hover{background:rgba(45,111,255,.12);color:var(--ink)}
.view{width:100%;max-width:640px;margin:0 auto;padding:1.4rem 1.1rem calc(6.5rem + var(--sab))}
h1{font-family:var(--fd);font-size:1.6rem;margin:.2rem 0 .3rem;text-align:center}.lede{color:var(--muted);text-align:center;margin:0 0 1.4rem;font-size:.92rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem;backdrop-filter:blur(10px);margin-bottom:1rem}
.card h2{font-family:var(--fd);font-size:1.02rem;margin:0 0 .8rem}.card h3{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 .45rem;font-weight:600}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:1rem}.tile{display:block;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem}.tile:hover{border-color:rgba(34,211,238,.45)}
.tile .k{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.tile .v{font-family:var(--fd);font-size:1.25rem;margin-top:.35rem}.tile .s{font-size:.78rem;color:var(--muted);margin-top:.2rem}
form{display:grid;gap:.85rem}label{display:grid;gap:.35rem;font-size:.8rem;color:var(--muted)}
input,select,textarea{width:100%;padding:.75rem .85rem;border-radius:10px;border:1px solid var(--line);background:rgba(3,7,18,.6);color:var(--ink);font:inherit;font-size:16px}
textarea{min-height:7.5rem;resize:vertical}input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(34,211,238,.6);box-shadow:0 0 0 3px rgba(34,211,238,.12)}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #060c1c inset!important;-webkit-text-fill-color:var(--ink)!important;caret-color:var(--ink);transition:background-color 9999s ease-out 0s}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.8rem 1.2rem;border-radius:999px;border:0;cursor:pointer;font:inherit;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--accent),var(--cyan));box-shadow:0 8px 24px rgba(45,111,255,.3)}
.btn:disabled{opacity:.55;cursor:default}.btn.ghost{background:rgba(255,255,255,.04);border:1px solid var(--line);box-shadow:none;color:var(--ink)}.btn.sm{padding:.5rem .9rem;font-size:.82rem}.btn.block{width:100%}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}.note{color:var(--muted);font-size:.8rem}.center{text-align:center}
.msg{font-size:.84rem;min-height:1em}.msg.err{color:var(--bad)}.msg.ok{color:var(--ok)}
.seg{display:flex;gap:.3rem;padding:.3rem;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);margin:0 auto 1rem;max-width:22rem}
.seg a{flex:1;text-align:center;padding:.55rem;border-radius:999px;color:var(--muted);font-size:.86rem}.seg a.on{background:rgba(34,211,238,.12);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(34,211,238,.4)}
.pill{display:inline-block;padding:.18rem .6rem;border-radius:999px;font-size:.72rem;border:1px solid var(--line);text-transform:capitalize}
.pill.active,.pill.trialing{color:var(--ok);border-color:rgba(74,222,128,.45)}.pill.pending,.pill.open{color:var(--cyan);border-color:rgba(34,211,238,.45)}.pill.overdue,.pill.cancelled,.pill.none,.pill.closed{color:var(--muted)}
.list a{display:flex;gap:.7rem;align-items:center;padding:.85rem .2rem;border-bottom:1px solid var(--line);color:var(--ink)}.list a:last-child{border-bottom:0}.list .t{flex:1;min-width:0}.list .t div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bub{margin:.55rem 0;padding:.7rem .85rem;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:.9rem;white-space:pre-wrap;word-wrap:break-word}.bub.staff{border-color:rgba(34,211,238,.35);background:rgba(34,211,238,.06)}.bub .m{font-size:.7rem;color:var(--muted);margin-bottom:.25rem;white-space:normal}
.price{font-family:var(--fd);font-size:2rem;margin:.2rem 0}.price small{font-size:.9rem;color:var(--muted);font-family:var(--fb)}
ul.feat{list-style:none;padding:0;margin:.6rem 0 1rem;display:grid;gap:.55rem}ul.feat li{padding-left:1.5rem;position:relative;font-size:.9rem}ul.feat li:before{content:"";position:absolute;left:.2rem;top:.45rem;width:.55rem;height:.55rem;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--cyan))}
.widget{background:#f4f7ff;border-radius:12px;padding:1rem;min-height:14rem;color:#0b1220}.widget iframe{max-width:100%!important;min-width:0!important;width:100%!important}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1rem;margin:0;font-size:.9rem}dl.kv dt{color:var(--muted)}dl.kv dd{margin:0;text-align:right}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);padding:.4rem .4rem calc(.4rem + var(--sab));background:rgba(3,7,18,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.tabs a{display:grid;justify-items:center;gap:.2rem;padding:.35rem 0;font-size:.68rem;color:var(--muted)}.tabs svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}.tabs a.on{color:var(--cyan)}
.toast{position:fixed;left:50%;bottom:calc(5.5rem + var(--sab));transform:translateX(-50%);z-index:40;padding:.6rem 1rem;border-radius:10px;border:1px solid var(--line);background:rgba(8,14,28,.98);font-size:.85rem}
.install{display:flex;gap:.8rem;align-items:center}
@media (min-width:900px){.view{padding-top:2.2rem}}
/* 2026-10-17 elevated surfaces (matches www eposy-elevate.css) */
.card,.tile{position:relative;isolation:isolate;border-color:rgba(121,157,230,.16);
 background:linear-gradient(165deg,rgba(28,46,92,.86) 0%,rgba(12,22,48,.94) 42%,rgba(6,12,28,.97) 100%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.4),0 10px 24px -8px rgba(0,0,0,.6),0 28px 56px -22px rgba(10,40,120,.55)}
.card::after,.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:-1;
 background:linear-gradient(160deg,rgba(170,200,255,.55),rgba(121,157,230,.12) 38%,rgba(121,157,230,.06) 62%,rgba(34,211,238,.38));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:.75}
.card{border-radius:18px}.tile{border-radius:16px;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
@media (hover:hover){.tile:hover{transform:translateY(-3px);border-color:rgba(121,157,230,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 18px 36px -10px rgba(0,0,0,.65),0 30px 60px -24px rgba(34,111,255,.5),0 0 0 1px rgba(34,211,238,.18)}}
.tile .v{background:linear-gradient(90deg,#f4f7ff,#9fc0ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.seg{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 20px -10px rgba(0,0,0,.6)}
.menu{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 50px -12px rgba(0,0,0,.7),0 0 0 1px rgba(34,211,238,.08)}
.widget{box-shadow:0 0 0 4px rgba(34,211,238,.06),0 16px 36px -14px rgba(0,0,0,.6)}
h1{letter-spacing:-.02em}
a:focus-visible,button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.tile{transition:none}.tile:hover{transform:none}}