/* Magnetics — shared styles */
/* Brand colors taken from the Magnetics logo */
:root{
  --bg:#faf7fc; --surface:#ffffff; --ink:#2f2f33; --muted:#67626d; --line:#e6deed;
  --accent:#8a45c9; --accent-ink:#ffffff; --accent-soft:#f1e5fa;
  --red:#9d4fd3; --lilac:#e0a8e8; --sky:#98c0e8; --leaf:#90c090;
  --warn:#9a520b; --warn-soft:#fbe9d3; --good:#1d7a4b; --danger:#b3261e;
  --shadow:0 1px 2px rgba(47,42,54,.10),0 6px 16px rgba(47,42,54,.10);
  --f-display:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --f-body:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
img{max-width:100%}
.wrap{max-width:1040px;margin:0 auto}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;letter-spacing:-.02em}
h1 em,h2 em{font-style:normal}
.brand img.logo{height:52px;width:auto;display:block}
@media (max-width:720px){.brand img.logo{height:36px}}
.brand img.logo-stack{height:84px;width:auto;display:block}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

header.site{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:14px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:600;font-size:1.3rem;color:var(--ink);text-decoration:none}
.brand em{font-style:italic;font-weight:400;color:var(--red)}
.brand-mark{width:30px;height:30px;border-radius:7px;background:var(--accent);position:relative;transform:rotate(-6deg);flex-shrink:0}
.brand-mark::after{content:"";position:absolute;inset:5px;border-radius:3px;background:var(--surface)}

.btn{border:none;border-radius:10px;padding:11px 16px;font-weight:700;background:var(--accent);color:var(--accent-ink);text-decoration:none;display:inline-block}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn.small{padding:7px 12px;font-size:.88rem}
.btn.danger{background:transparent;color:var(--danger);border:1.5px solid var(--line)}
.eyebrow{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;display:block;margin-bottom:4px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:60;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;font-size:.92rem;max-width:calc(100% - 32px)}
footer.site{padding-block:28px;color:var(--muted);font-size:.85rem;text-align:center}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}