/* Mason Cloud — shared storefront styles */
:root {
  --bg:#0c0a14; --panel:#161226; --panel2:#1d1733; --fg:#ece8f5; --dim:#9a91b4;
  --accent:#7c5cff; --accent2:#a78bfa; --border:#2a2340; --ok:#4ade80; --err:#f87171;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
  background:var(--bg); color:var(--fg); line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.wrap { max-width:980px; margin:0 auto; padding:0 24px; }
code { background:#0a0812; border:1px solid var(--border); border-radius:6px; padding:2px 7px;
  color:var(--accent2); font-size:.9em; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

nav { position:sticky; top:0; z-index:10; backdrop-filter:blur(12px);
  background:rgba(12,10,20,.72); border-bottom:1px solid var(--border); }
nav .wrap { display:flex; align-items:center; gap:16px; height:60px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:15px; text-decoration:none; }
.mark { width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg,var(--accent),#141018);
  box-shadow:0 4px 16px rgba(124,92,255,.4); }
nav .spacer { flex:1; }
nav a.link { color:var(--dim); text-decoration:none; font-size:13px; }
nav a.link:hover, nav a.link.on { color:var(--fg); }
.langsw { display:inline-flex; gap:2px; border:1px solid var(--border); border-radius:8px; padding:2px; }
.langsw a { font-size:11px; font-weight:600; color:var(--dim); text-decoration:none; padding:3px 8px; border-radius:6px; }
.langsw a.on { background:var(--panel2); color:var(--fg); }
.langsw a:hover { color:var(--fg); }

.btn { background:var(--accent); color:#fff; border:none; text-decoration:none; display:inline-block;
  padding:9px 16px; border-radius:9px; font-weight:600; font-size:13px; cursor:pointer; }
.btn:hover { filter:brightness(1.08); }
.btn.ghost { background:transparent; border:1px solid var(--border); color:var(--fg); }
.btn:disabled { opacity:.6; cursor:default; }

.eyebrow { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent2); font-weight:600; }
h1.page { font-size:34px; letter-spacing:-.02em; margin:8px 0 6px; }
.sec-sub { color:var(--dim); margin:0 0 24px; }
section.page { padding:44px 0 64px; }

.card { background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:24px; }
.input { width:100%; background:#0a0812; border:1px solid var(--border); border-radius:9px;
  color:var(--fg); padding:11px 13px; font-size:14px; }
.input:focus { outline:none; border-color:var(--accent); }
label.f { display:block; font-size:12px; color:var(--dim); margin:14px 0 5px; }
.error { color:var(--err); font-size:13px; min-height:18px; margin-top:10px; }

footer { border-top:1px solid var(--border); padding:28px 0; color:var(--dim); font-size:13px; margin-top:40px; }
footer .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }