/* Misuli design system — tokens from Misuli/tokens.js, atoms from primitives.jsx */
:root, :root[data-theme="light"] {
  --bg0:#F6F4EE; --bg1:#FFFFFF; --bg2:#EFEBE2; --bg3:#E5DFD3;
  --line:rgba(20,20,26,.10); --line2:rgba(20,20,26,.20);
  --text:#14141A; --dim:rgba(20,20,26,.62); --mute:rgba(20,20,26,.38);
  --chip:rgba(20,20,26,.05); --stripeA:#E8E2D5; --stripeB:#DDD6C5; --ph-ink:rgba(0,0,0,.55);
  --good:#22D86A; --warn:#FFB020; --bad:#FF6B6B; --info:#2A6FDB;
  --font-display:"Archivo","Inter",system-ui,sans-serif; --font-body:"Inter",system-ui,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg0:#0B0B0E; --bg1:#14141A; --bg2:#1E1E25; --bg3:#262630;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16);
  --text:#F5F4EE; --dim:rgba(245,244,238,.62); --mute:rgba(245,244,238,.38);
  --chip:rgba(255,255,255,.06); --stripeA:#1A1A21; --stripeB:#13131A; --ph-ink:rgba(255,255,255,.55);
  color-scheme: dark;
}
:root, :root[data-accent="orange"] { --a:#FF6B1F; --a-soft:rgba(255,107,31,.14); --a-deep:#E04B00; --a-glow:rgba(255,107,31,.35); }
:root[data-accent="green"] { --a:#22D86A; --a-soft:rgba(34,216,106,.14); --a-deep:#13A04D; --a-glow:rgba(34,216,106,.35); }
:root[data-accent="blue"]  { --a:#2A6FDB; --a-soft:rgba(42,111,219,.14); --a-deep:#1B4FA8; --a-glow:rgba(42,111,219,.35); }

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg0);color:var(--text);font-family:var(--font-body);font-size:14px;line-height:1.4;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img{max-width:100%}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ── atoms ─────────────────────────────────────── */
.label{font-family:var(--font-mono);font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--mute);font-weight:500}
.label.a{color:var(--a)} .label.d{color:var(--dim)}
.display{font-family:var(--font-display);font-weight:800}
.mono{font-family:var(--font-mono)}
.a{color:var(--a)} .dim{color:var(--dim)} .mute{color:var(--mute)}
.wordmark{display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-display);font-weight:800;letter-spacing:.18em;line-height:1}
.wordmark svg{width:1.1em;height:1.1em}
.ph{position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:12px;border-radius:14px;
  background:repeating-linear-gradient(135deg,var(--stripeA) 0 14px,var(--stripeB) 14px 28px)}
.ph::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,var(--a-soft) 100%)}
.ph::after{content:"// " attr(data-label);position:relative;font-family:var(--font-mono);font-size:9px;color:var(--ph-ink);letter-spacing:.4px;text-transform:uppercase}
.ph.bleed{border-radius:0}
.glow{position:absolute;border-radius:99px;background:var(--a-glow);filter:blur(120px);pointer-events:none}
.card{background:var(--bg1);border:1px solid var(--line);border-radius:16px;padding:22px}
.card.sm{border-radius:14px;padding:18px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:10px;border:1px solid var(--line);background:var(--bg1);color:var(--text);font-weight:600;font-size:13px;line-height:1}
.btn.accent{background:var(--a);color:#000;border-color:transparent;font-weight:700}
.btn.pill{border-radius:99px}
.btn.lg{padding:14px 26px;font-size:14px}
.btn.ghost{background:transparent;border-color:var(--line2)}
.btn.sm{padding:8px 14px;font-size:12px;border-radius:8px}
.btn.danger{background:rgba(255,107,107,.14);border-color:rgba(255,107,107,.4);color:var(--bad)}
.chip{display:inline-flex;align-items:center;padding:8px 14px;border-radius:99px;background:var(--bg1);color:var(--dim);border:1px solid var(--line);font-size:12px;font-weight:600}
.chip.on{background:var(--text);color:var(--bg0);border-color:transparent}
.chip.accent{background:var(--a);color:#000;border-color:transparent}
.tag{display:inline-block;font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.4px;padding:3px 8px;border-radius:4px;background:var(--chip);color:var(--dim);text-transform:uppercase}
.tag.a{background:var(--a-soft);color:var(--a)} .tag.deep{background:var(--a-deep);color:#fff}
.tag.good{background:rgba(34,216,106,.14);color:var(--good)} .tag.bad{background:rgba(255,107,107,.14);color:var(--bad)}
.tag.warn{background:rgba(255,176,32,.14);color:var(--warn)} .tag.info{background:rgba(42,111,219,.14);color:var(--info)}
.dot{display:inline-block;width:7px;height:7px;border-radius:99px;margin-right:6px;background:var(--mute)}
.dot.live,.dot.active,.dot.paid,.dot.published,.dot.sent{background:var(--good)} .dot.draft,.dot.inactive{background:var(--warn)}
.dot.review,.dot.scheduled{background:var(--info)} .dot.churned,.dot.failed,.dot.suspended{background:var(--bad)}
.avatar{width:var(--s,28px);height:var(--s,28px);border-radius:99px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  background:repeating-linear-gradient(135deg,var(--bg2) 0 4px,var(--bg3) 4px 8px);border:1px solid var(--line);
  font-family:var(--font-mono);font-size:calc(var(--s,28px)*.32);color:var(--dim);font-weight:600}
.bar{height:4px;background:var(--bg2);border-radius:99px;overflow:hidden} .bar>i{display:block;height:100%;background:var(--a)}
.bar.lg{height:6px}
.row{display:flex;align-items:center;gap:10px} .between{justify-content:space-between} .col{display:flex;flex-direction:column}
.gap6{gap:6px}.gap8{gap:8px}.gap10{gap:10px}.gap14{gap:14px}.gap16{gap:16px}.gap20{gap:20px}.wrap{flex-wrap:wrap}
.grid{display:grid;gap:14px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g6{grid-template-columns:repeat(6,1fr)}
.hr{border:0;border-top:1px solid var(--line);margin:0}
.nowrap{white-space:nowrap}.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab{font-variant-numeric:tabular-nums}
.theme-toggle{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--bg1);color:var(--dim);display:inline-flex;align-items:center;justify-content:center}

/* forms */
.field{display:flex;flex-direction:column;gap:8px}
.input,.textarea,.select{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:11px 14px;font-size:14px;color:var(--text);outline:none}
.input:focus,.textarea:focus,.select:focus{border-color:var(--a)}
.textarea{min-height:90px;resize:vertical;line-height:1.5}
.alert{padding:12px 16px;border-radius:10px;font-size:13px;border:1px solid var(--line);background:var(--bg1)}
.alert.ok{border-color:var(--good)} .alert.err{border-color:var(--bad);color:var(--bad)}

/* ── admin shell ───────────────────────────────── */
.admin{display:flex;min-height:100vh}
.sidebar{width:232px;flex-shrink:0;background:var(--bg1);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidebar .brand{padding:20px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.sidebar nav{flex:1;overflow:auto;padding:14px 12px}
.sidebar .sec{margin-bottom:10px}
.sidebar .sec .label{margin:0 10px 6px;display:block}
.navitem{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;color:var(--dim);font-size:13px;font-weight:500;margin-bottom:2px}
.navitem:hover{background:var(--chip)}
.navitem.on{background:var(--a);color:#000;font-weight:600}
.sidebar .me{border-top:1px solid var(--line);padding:14px;display:flex;align-items:center;gap:10px}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:72px;padding:0 28px;border-bottom:1px solid var(--line);background:var(--bg0);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5;flex-shrink:0}
.topbar h1{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.5px;margin-top:2px}
.search{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--bg1);border:1px solid var(--line);border-radius:10px;color:var(--dim);width:280px;font-size:13px}
.search input{border:0;background:transparent;outline:none;flex:1;min-width:0}
.content{padding:28px;display:flex;flex-direction:column;gap:20px}
.stat .v{font-family:var(--font-display);font-weight:800;font-size:30px;letter-spacing:-1px;margin-top:8px;display:flex;align-items:baseline;gap:4px}
.stat .v small{font-family:var(--font-body);font-size:13px;font-weight:400;color:var(--dim);letter-spacing:0}
.stat .ch{margin-top:6px;font-family:var(--font-mono);font-size:10px}
.section-title{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-.2px}
.list>*{padding:10px 0;border-top:1px solid var(--line)} .list>*:first-child{border-top:0}
table.t{width:100%;border-collapse:collapse}
table.t th{text-align:left;padding:14px 18px;background:var(--bg2);border-bottom:1px solid var(--line)}
table.t td{padding:14px 18px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
.tablewrap{background:var(--bg1);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.bars{display:flex;align-items:flex-end;gap:8px;padding:0 4px}
.bars>div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bars i{display:block;width:100%;border-radius:4px;background:linear-gradient(180deg,var(--bg3),var(--bg2));border:1px solid var(--line)}
.bars i.hi{background:var(--a);border:0}
.pager{display:flex;gap:4px}
.pager a,.pager span{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--bg1);color:var(--dim);border:1px solid var(--line);font-family:var(--font-mono);font-size:11px;font-weight:600}
.pager .on{background:var(--text);color:var(--bg0);border-color:transparent}
.split{display:grid;gap:18px}
.listcard{background:var(--bg1);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.listcard a{display:block;padding:14px;border-top:1px solid var(--line);border-left:3px solid transparent}
.listcard a:first-child{border-top:0}
.listcard a.on{background:var(--a-soft);border-left-color:var(--a)}
.toggle{width:36px;height:20px;border-radius:99px;background:var(--bg3);position:relative;flex-shrink:0;border:0;padding:0}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:99px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .15s}
.toggle.on{background:var(--a)} .toggle.on::after{left:18px}
.bubble{padding:10px 14px;font-size:13px;line-height:1.4;max-width:70%;background:var(--bg1);border:1px solid var(--line);border-radius:14px 14px 14px 4px}
.bubble.me{background:var(--a);color:#000;border:0;border-radius:14px 14px 4px 14px;align-self:flex-end}
.prose{font-size:17px;line-height:1.7;color:var(--dim)}
.prose p{margin:0 0 22px} .prose p:first-child{color:var(--text)} .prose strong{color:var(--text)}
.prose h2{font-family:var(--font-display);font-weight:800;font-size:30px;color:var(--text);margin:40px 0 14px;letter-spacing:-1px;line-height:1.1}
.prose blockquote{margin:32px 0;padding:24px 28px;border-left:4px solid var(--a);background:var(--bg1);border-radius:0 14px 14px 0;font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--text);line-height:1.35;letter-spacing:-.5px}
.prose cite{display:block;margin-top:14px;font:500 10px var(--font-mono);letter-spacing:.6px;text-transform:uppercase;color:var(--a);font-style:normal}
.prose .callout{margin:24px 0;padding:20px;background:var(--bg1);border:1px solid var(--line);border-radius:14px}
.prose .callout .eyebrow{font:500 10px var(--font-mono);letter-spacing:.6px;text-transform:uppercase;color:var(--a)}
.prose .callout h4{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--text);margin:6px 0 8px}
.prose .callout p{font-size:14px;margin:0}

/* ── marketing ─────────────────────────────────── */
.site{max-width:1280px;margin:0 auto;position:relative;overflow:hidden}
.mnav{display:flex;align-items:center;justify-content:space-between;padding:20px 48px;border-bottom:1px solid var(--line);background:var(--bg0);position:sticky;top:0;z-index:20}
.mnav .links{display:flex;gap:28px}
.mnav .links a{font-size:13px;font-weight:500;color:var(--dim);padding-bottom:4px;border-bottom:2px solid transparent}
.mnav .links a.on{color:var(--text);border-color:var(--a)}
.hero{padding:88px 48px 48px;position:relative;border-bottom:1px solid var(--line)}
.hero h1,.h1{font-family:var(--font-display);font-weight:800;font-size:76px;letter-spacing:-2.5px;line-height:.95;margin:12px 0 0}
.hero p.sub{font-size:18px;color:var(--dim);line-height:1.55;margin:20px 0 0;max-width:620px}
.hero.center{text-align:center}.hero.center p.sub{margin-left:auto;margin-right:auto}
.sect{padding:64px 48px}
.h2{font-family:var(--font-display);font-weight:800;font-size:48px;letter-spacing:-1.5px;line-height:1;margin:8px 0 0}
.h3{font-family:var(--font-display);font-weight:800;font-size:36px;letter-spacing:-1.2px;line-height:1}
.mcard{background:var(--bg1);border:1px solid var(--line);border-radius:22px;padding:28px}
.mfoot{padding:64px 48px 28px;background:var(--bg1);border-top:1px solid var(--line)}
.mfoot .cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:48px;padding-bottom:48px}
.mfoot .cols a{display:block;font-size:13px;color:var(--dim);margin-bottom:10px}
.cta{margin:80px 48px;background:var(--bg1);border:1px solid var(--line);border-radius:28px;padding:56px 48px;text-align:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 100%,var(--a-glow) 0%,transparent 60%)}
.cta>*{position:relative}
.statrow{display:grid;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statrow>div{padding:28px 24px;border-left:1px solid var(--line)}.statrow>div:first-child{border-left:0}
.statrow .n{font-family:var(--font-display);font-weight:800;font-size:44px;color:var(--a);letter-spacing:-1.4px;line-height:1}
.plan{border-radius:22px;padding:28px;position:relative;background:var(--bg1);border:1px solid var(--line)}
.plan.best{background:var(--a);color:#000;border-color:var(--a)}
.plan .price{font-family:var(--font-display);font-weight:800;font-size:48px;letter-spacing:-1.6px;line-height:1}
.plan .feat{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:8px}
.plan .feat i{width:14px;height:14px;border-radius:99px;background:var(--a);color:#000;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.plan.best .feat i{background:#000;color:var(--a)}
.cmp{background:var(--bg1);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.cmp .r{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;border-top:1px solid var(--line)}
.cmp .r>div{padding:14px 20px;font:500 12px var(--font-mono);color:var(--dim)}
.cmp .r>div:first-child{font:500 13px var(--font-body);color:var(--text)}
.cmp .r>div:nth-child(3){background:var(--a-soft);color:var(--a);font-weight:600}
.cmp .grp{padding:14px 20px;background:var(--bg2);border-top:1px solid var(--line)}
details.faq{padding:20px 24px;border-top:1px solid var(--line)} details.faq:first-child{border-top:0}
details.faq summary{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.3px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px}
details.faq summary::-webkit-details-marker{display:none}
details.faq p{font-size:14px;color:var(--dim);line-height:1.6;margin-top:8px}
.phone{width:280px;height:540px;border-radius:44px;background:#000;border:8px solid var(--bg2);box-shadow:0 40px 100px var(--a-glow),0 0 0 1px var(--line2);padding:6px}
.phone>div{width:100%;height:100%;border-radius:36px;background:var(--bg0);position:relative;overflow:hidden}
.float{position:absolute;background:var(--bg1);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:0 20px 40px rgba(0,0,0,.25)}

/* login */
.authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden}

@media (max-width: 1000px){
  .sidebar{display:none}.g3,.g4,.g6{grid-template-columns:repeat(2,1fr)}.hero h1,.h1{font-size:44px}.h2{font-size:32px}
  .mnav .links{display:none}.mnav,.hero,.sect{padding-left:20px;padding-right:20px}.cta{margin:40px 20px;padding:36px 20px}
  .mfoot .cols{grid-template-columns:1fr 1fr}.statrow{grid-template-columns:repeat(2,1fr)!important}
  .split{grid-template-columns:1fr!important}.content{padding:16px}.topbar{padding:0 16px}.search{display:none}
  .cmp .r{grid-template-columns:1.2fr 1fr 1fr 1fr}.cmp .r>div{padding:10px 8px}
}