:root{
  --paper:#ffffff; --ink:#0b1220; --muted:#475569;
  --edge:#e5e7eb; --brand:#2563eb; --brand2:#111827; --shadow:0 6px 16px rgba(2,6,23,.06);
}
*{box-sizing:border-box} html,body{margin:0;background:var(--paper);color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif}
a{color:#0b63ff;text-decoration:none}
.container{width:min(1120px,92vw);margin:0 auto}
.nav{background:#ffffff;border-bottom:1px solid var(--edge);display:flex;align-items:center;justify-content:space-between;padding:12px 10px;position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:10px;font-weight:900}
.brand img{width:28px;height:28px}
.links{display:flex;gap:16px}
.links a{color:#111827;font-weight:700}
.hamburger{display:none}
@media(max-width:760px){.links{display:none}.hamburger{display:block}.mobile-menu{display:none;position:fixed;inset:56px 0 0 0;background:#fff;border-top:1px solid var(--edge);z-index:60}.mobile-menu.show{display:block}.mobile-menu a{display:block;color:#111827;padding:12px;border-bottom:1px solid var(--edge)}}
.hero{background:#fff;padding:24px 0 14px}
h1{margin:0 0 8px;font-size:clamp(28px,5vw,46px)}
p.lead{margin:0 0 14px;color:#334155}
.btn{background:#2563eb;color:#fff;border-radius:12px;padding:10px 16px;border:1px solid #2563eb;display:inline-block;font-weight:800}
.btn.ghost{background:#fff;border:1px solid var(--edge);color:#111827}
.section{padding:18px 0}
.card{background:#fff;border:1px solid var(--edge);border-radius:16px;color:#111827;padding:12px;box-shadow:var(--shadow)}
figure{margin:0;border:1px solid var(--edge);border-radius:12px;overflow:hidden;background:#fafafa}
figcaption{padding:10px;color:#475569;border-top:1px solid var(--edge)}
img{width:100%;display:block;background:#f3f4f6}
.belt{display:grid;grid-auto-flow:column;grid-auto-columns:min(260px,85vw);gap:12px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x mandatory}
.belt > *{scroll-snap-align:start}
@media(min-width:900px){.belt{grid-auto-flow:row;grid-template-columns:repeat(3,1fr)}}
.pill{background:#fff;border:1px solid var(--edge);border-radius:20px;padding:16px;box-shadow:var(--shadow)}
.pill h3{margin:0 0 6px} .pill p{margin:0;color:#334155}
.plan{background:#fff;border:1px solid var(--edge);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.plan h3{margin:0 0 6px} .price{font-size:28px;font-weight:900;margin:6px 0}
.plan ul{padding-left:18px;margin:0 0 12px} .plan li{margin:4px 0}
body.subpage::before{content:'';position:fixed;inset:0;background:url('/assets/logo-watermark.svg') center/520px no-repeat;opacity:.07;z-index:-1;pointer-events:none}
.footer{background:#fff;border-top:1px solid var(--edge);color:#64748b;padding:16px 0;margin-top:22px}
.topbar{padding:10px 12px;border-bottom:1px solid var(--edge);background:#fff;color:#111827;position:sticky;top:0;z-index:40}
.app-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:14px} @media(max-width:900px){.app-grid{grid-template-columns:1fr}}
.app-card{background:#fff;border:1px solid var(--edge);border-radius:12px;padding:12px}
.app-row{display:flex;gap:8px;align-items:center;margin:8px 0}
.app-field{width:100%;padding:10px;border-radius:10px;border:1px solid var(--edge);background:#fff;color:#111827}
.app-log{min-height:80px;border:1px dashed var(--edge);border-radius:10px;padding:10px;background:#fff;color:#111827}
.badge{font-size:.75rem;padding:2px 8px;border:1px solid #cbd5e1;border-radius:999px;color:#334155}
.toast{position:fixed;right:16px;bottom:16px;z-index:70}.toast.hidden{display:none}.toast-body{background:#fff;border:1px solid var(--edge);border-radius:12px;padding:10px;display:flex;gap:8px;align-items:center;color:#111827;box-shadow:0 8px 20px rgba(2,6,23,.12)}
.modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(2,6,23,.35);z-index:80}.modal.hidden{display:none}.modal-content{background:#fff;border:1px solid var(--edge);border-radius:12px;padding:16px;width:min(520px,96vw);color:#111827}