:root{
  --maple:#F1F1F3; --maple-2:#FFFFFF; --maple-3:#D6D6DB; --paint:#0A0A0A; --on-paint:#FFFFFF;
  --ink:#0A0A0A; --ink-2:#5B5B63; --field:#FFFFFF; --good:#1F8F4E;
  --cond:'Barlow Condensed','Arial Narrow',sans-serif; --body:'Barlow',system-ui,sans-serif;
  color-scheme:light;
}
[data-theme=dark]{
  --maple:#08080A; --maple-2:#141418; --maple-3:#2C2C33; --paint:#F4F4F5; --on-paint:#0A0A0A;
  --ink:#F4F4F5; --ink-2:#A1A1AA; --field:#1A1A1F; --good:#34C374;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--maple);color:var(--ink);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--maple) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--maple-3)}
.top .wrap{display:flex;align-items:center;gap:18px;height:60px}
.brand{font:800 20px var(--cond);text-transform:uppercase;letter-spacing:.03em;text-decoration:none;white-space:nowrap}
.brand span{color:var(--ink-2)}
.nav{display:flex;gap:16px;margin-left:auto;align-items:center}
.nav a.l{text-decoration:none;font-weight:600;color:var(--ink-2)}
.nav a.l[aria-current]{color:var(--ink)}
.theme{background:none;border:1px solid var(--maple-3);color:var(--ink);border-radius:999px;width:34px;height:34px;cursor:pointer;font-size:15px}
h1{font:800 clamp(40px,7vw,64px)/.95 var(--cond);text-transform:uppercase;letter-spacing:.01em;margin:56px 0 12px}
.lead{color:var(--ink-2);font-size:18px;max-width:560px;margin:0 0 36px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-bottom:28px}
.plan{background:var(--maple-2);border:1px solid var(--maple-3);border-radius:18px;padding:26px 24px;display:flex;flex-direction:column}
.plan.pro{border:2px solid var(--paint);box-shadow:0 14px 40px rgba(0,0,0,.12)}
.plan h2{font:800 26px var(--cond);text-transform:uppercase;margin:0}
.plan .amt{display:flex;align-items:baseline;gap:8px;margin:12px 0 4px}
.plan .amt b{font:800 52px/1 var(--cond)}
.plan .amt span{color:var(--ink-2)}
.plan .note{color:var(--ink-2);font-size:14px;margin:0 0 18px}
.plan ul{list-style:none;padding:0;margin:0 0 24px;flex:1}
.plan li{padding:7px 0 7px 26px;position:relative;border-top:1px solid var(--maple-3)}
.plan li:before{content:"✓";position:absolute;left:2px;color:var(--good);font-weight:700}
.btn{display:block;width:100%;text-align:center;padding:13px 16px;border-radius:12px;font:700 16px var(--body);cursor:pointer;text-decoration:none;border:1px solid var(--maple-3);background:var(--field);color:var(--ink)}
.btn.dark{background:var(--paint);color:var(--on-paint);border-color:var(--paint)}
.badge{display:inline-block;font:700 12px var(--cond);letter-spacing:.08em;text-transform:uppercase;background:var(--paint);color:var(--on-paint);padding:3px 8px;border-radius:6px;margin-left:8px;vertical-align:middle}
.fine{color:var(--ink-2);font-size:14px}
.faq{margin:0 0 40px}
.faq details{background:var(--maple-2);border:1px solid var(--maple-3);border-radius:14px;margin:0 0 10px;padding:0 20px}
.faq summary{cursor:pointer;list-style:none;padding:18px 28px 18px 0;font:700 19px var(--cond);text-transform:uppercase;letter-spacing:.02em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:0;top:14px;font-size:24px;color:var(--ink-2)}
.faq details[open] summary:after{content:"–"}
.faq details p{margin:0 0 18px;color:var(--ink-2)}
.card{background:var(--maple-2);border:1px solid var(--maple-3);border-radius:18px;padding:26px 24px;max-width:520px;margin-bottom:40px}
.row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--maple-3)}
.row:first-of-type{border-top:0}
.row span{color:var(--ink-2)}
.stack{display:grid;gap:10px;margin-top:20px}
.flash{background:var(--good);color:#fff;border-radius:12px;padding:12px 16px;margin:0 0 18px;font-weight:600}
footer{border-top:1px solid var(--maple-3);padding:28px 0 40px;color:var(--ink-2);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 18px}
@media (max-width:560px){.wrap{padding:0 16px}.top .wrap{gap:10px}.nav{gap:10px}.brand{font-size:18px}.brand span{display:none}.nav a.l{display:none}.nav a.l.keep{display:inline}.theme{width:32px;height:32px}}
[hidden]{display:none!important}
