/* Client-facing app (sign-up, onboarding, portal). White-label: colours come from agency settings via CSS vars. Mobile-first. */
.ax-app,body.ax-body{--stl-primary:var(--b-primary,#6d5dfc);--stl-accent:var(--b-accent,#22c3e6);--stl-secondary:var(--b-secondary,var(--stl-accent));--stl-radius:var(--b-radius,14px);--btn-text:var(--b-btn-text,#fff);
  --bg:var(--b-bg,#f5f6fb);--card:var(--b-surface,#fff);--surface:var(--b-surface2,#f7f8fc);--text:var(--b-text,#0f172a);--muted:var(--b-muted,#64748b);--border:var(--b-border,#e6e8f0);--ok:var(--b-ok,#10b981);--warn:var(--b-warn,#f59e0b);--bad:var(--b-bad,#ef4444);
  --shadow:0 1px 2px rgba(15,23,42,.04),0 18px 40px -18px rgba(15,23,42,.22);--grad:linear-gradient(135deg,var(--stl-primary),var(--stl-secondary));
  --r:var(--stl-radius);--r2:calc(var(--stl-radius) + 6px)}
.ax-app{font:15px/1.55 var(--b-font,Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100%}
.ax-app[data-mode=dark],body.ax-body[data-mode=dark]{--bg:var(--b-bg,#090c18);--card:var(--b-surface,#11152a);--surface:var(--b-surface2,#171c34);--text:var(--b-text,#eef1ff);--muted:var(--b-muted,#94a0c0);--border:var(--b-border,#252c4a);--shadow:0 18px 50px -18px rgba(0,0,0,.7)}
@media (prefers-color-scheme:dark){.ax-app[data-mode=auto],body.ax-body[data-mode=auto]{--bg:#090c18;--card:#11152a;--surface:#171c34;--text:#eef1ff;--muted:#94a0c0;--border:#252c4a;--shadow:0 18px 50px -18px rgba(0,0,0,.7)}}
.ax-app *{box-sizing:border-box}
body.ax-body{margin:0;background:var(--bg)}
body.ax-body .ax-app{background:var(--bg);min-height:100vh}
.ax-app a{color:var(--stl-primary)}
.ax-app a.ax-btn{color:var(--text);text-decoration:none}.ax-app a.ax-primary{color:var(--btn-text)}
.ax-loading{display:grid;place-items:center;min-height:50vh}.ax-loading span{width:34px;height:34px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--stl-primary);animation:axspin .8s linear infinite}
@keyframes axspin{to{transform:rotate(360deg)}}
@keyframes axin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* chrome */
.ax-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;max-width:1120px;margin:0 auto}
.ax-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--text);text-decoration:none}
.ax-brand img{height:30px;width:auto;border-radius:8px}
.ax-mark{width:30px;height:30px;border-radius:9px;background:var(--grad);display:grid;place-items:center;color:var(--btn-text);font-size:15px;font-weight:800;box-shadow:0 6px 16px -6px var(--stl-primary)}
.ax-wrap{max-width:1120px;margin:0 auto;padding:8px 16px 56px}
.ax-narrow{max-width:760px}
.ax-foot{text-align:center;color:var(--muted);font-size:13px;padding:22px 16px 34px}
.ax-hero{text-align:center;padding:26px 8px 22px;animation:axin .4s ease}
.ax-hero h1{font-size:clamp(28px,6vw,46px);line-height:1.08;letter-spacing:-.03em;margin:0 0 12px;font-weight:800}
.ax-hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ax-hero p{color:var(--muted);font-size:clamp(15px,2.4vw,18px);max-width:620px;margin:0 auto}
.ax-eyebrow{display:inline-flex;gap:6px;align-items:center;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--stl-primary);background:color-mix(in srgb,var(--stl-primary) 10%,transparent);padding:6px 12px;border-radius:999px;margin-bottom:14px}

/* cards & controls */
.ax-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r2);box-shadow:var(--shadow);padding:22px;animation:axin .35s ease}
.ax-card+.ax-card{margin-top:16px}
.ax-card h2{margin:0 0 4px;font-size:20px;letter-spacing:-.02em}
.ax-card h3{margin:0 0 10px;font-size:15px}
.ax-sub{color:var(--muted);margin:0 0 18px;font-size:14px}
.ax-grid{display:grid;gap:14px}
@media (min-width:640px){.ax-g2{grid-template-columns:1fr 1fr}.ax-g3{grid-template-columns:repeat(3,1fr)}}
.ax-field{display:flex;flex-direction:column;gap:6px}
.ax-field>span{font-size:13px;font-weight:600}
.ax-field>small{color:var(--muted);font-size:12px}
.ax-input,.ax-app select,.ax-app textarea{width:100%;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:11px 13px;transition:border-color .15s,box-shadow .15s;min-height:44px}
.ax-app textarea{min-height:84px;resize:vertical}
.ax-input:focus,.ax-app select:focus,.ax-app textarea:focus{outline:0;border-color:var(--stl-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--stl-primary) 18%,transparent);background:var(--card)}
.ax-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 inherit;border-radius:var(--r);padding:13px 20px;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;text-decoration:none;min-height:46px;transition:transform .12s,box-shadow .15s,opacity .15s}
.ax-btn:hover{transform:translateY(-1px)}
.ax-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.ax-primary{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 10px 24px -10px var(--stl-primary)}
.ax-ghost{background:transparent}
.ax-sm{padding:8px 12px;min-height:36px;font-size:13px}
.ax-block{width:100%}
.ax-link{background:none;border:0;color:var(--stl-primary);font:600 13px/1 inherit;cursor:pointer;padding:6px 0}
.ax-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ax-between{justify-content:space-between}
.ax-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;background:color-mix(in srgb,var(--stl-primary) 12%,transparent);color:var(--stl-primary);white-space:nowrap}
.ax-pill.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.ax-pill.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:#b45309}
.ax-pill.bad{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
.ax-pill.mute{background:var(--surface);color:var(--muted)}
.ax-note{border-radius:var(--r);padding:12px 14px;font-size:14px;background:color-mix(in srgb,var(--stl-primary) 8%,transparent);border:1px solid color-mix(in srgb,var(--stl-primary) 22%,transparent);margin-bottom:14px}
.ax-note.warn{background:color-mix(in srgb,var(--warn) 10%,transparent);border-color:color-mix(in srgb,var(--warn) 35%,transparent)}
.ax-note.bad{background:color-mix(in srgb,var(--bad) 8%,transparent);border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.ax-note.ok{background:color-mix(in srgb,var(--ok) 10%,transparent);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.ax-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.ax-check{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.ax-check input{width:18px;height:18px;margin-top:2px;accent-color:var(--stl-primary)}
.ax-toggle{position:relative;display:inline-block;width:44px;height:26px;flex:0 0 auto}
.ax-toggle input{opacity:0;width:0;height:0}
.ax-toggle i{position:absolute;inset:0;border-radius:99px;background:var(--border);transition:.2s;cursor:pointer}
.ax-toggle i:before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.2s}
.ax-toggle input:checked+i{background:var(--grad)}
.ax-toggle input:checked+i:before{transform:translateX(18px)}
.ax-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#0f172a;color:#fff;padding:12px 18px;border-radius:999px;font-size:14px;box-shadow:0 12px 30px rgba(0,0,0,.3);z-index:99;animation:axin .25s ease;max-width:calc(100% - 32px)}

/* pricing */
.ax-plans{display:grid;gap:16px;grid-template-columns:1fr;margin-top:6px}
@media (min-width:760px){.ax-plans{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
.ax-plan{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:var(--r2);padding:24px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;animation:axin .4s ease both}
.ax-plan:hover{transform:translateY(-3px)}
.ax-plan.hl{border:2px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box}
.ax-plan .ax-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--grad);color:var(--btn-text);font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;white-space:nowrap}
.ax-plan h3{margin:0;font-size:18px}
.ax-price{display:flex;align-items:baseline;gap:4px;margin:12px 0 2px}
.ax-price b{font-size:40px;letter-spacing:-.03em;line-height:1}
.ax-price span{color:var(--muted)}
.ax-setup{color:var(--muted);font-size:13px;min-height:20px}
.ax-feats{list-style:none;padding:0;margin:16px 0 22px;display:grid;gap:9px;flex:1}
.ax-feats li{display:flex;gap:9px;font-size:14px}
.ax-feats li:before{content:"";flex:0 0 18px;height:18px;border-radius:50%;background:var(--grad);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 100 20 10 10 0 000-20zm-1.3 14.2L4.6 10l1.4-1.4 2.7 2.7 5.3-5.3 1.4 1.4-6.7 6.8z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 100 20 10 10 0 000-20zm-1.3 14.2L4.6 10l1.4-1.4 2.7 2.7 5.3-5.3 1.4 1.4-6.7 6.8z'/%3E%3C/svg%3E") center/contain no-repeat}
.ax-trust{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;color:var(--muted);font-size:13px;margin:22px 0 4px}
.ax-trust span:before{content:"✓ ";color:var(--ok);font-weight:700}
.ax-sel{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;margin-bottom:16px}

/* wizard */
.ax-wiz{display:grid;gap:18px}
@media (min-width:960px){.ax-wiz{grid-template-columns:250px 1fr;align-items:start}}
.ax-side{display:none}
@media (min-width:960px){.ax-side{display:block;position:sticky;top:16px}}
.ax-stepnav{list-style:none;margin:0;padding:8px;background:var(--card);border:1px solid var(--border);border-radius:var(--r2);box-shadow:var(--shadow)}
.ax-stepnav li button{display:flex;gap:10px;align-items:center;width:100%;text-align:left;border:0;background:none;padding:10px;border-radius:var(--r);font:500 14px/1.2 inherit;color:var(--muted);cursor:pointer}
.ax-stepnav li button i{flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700;background:var(--surface);border:1px solid var(--border)}
.ax-stepnav li.on button{background:color-mix(in srgb,var(--stl-primary) 9%,transparent);color:var(--text);font-weight:600}
.ax-stepnav li.on button i{background:var(--grad);color:var(--btn-text);border-color:transparent}
.ax-stepnav li.done button i{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);border-color:transparent}
.ax-progress{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);padding:10px 0 12px;margin:0 0 4px}
.ax-progress .bar{height:6px;border-radius:6px;background:var(--border);overflow:hidden}
.ax-progress .bar i{display:block;height:100%;background:var(--grad);transition:width .35s ease;border-radius:6px}
.ax-progress .meta{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600}
.ax-saved{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.ax-saved:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.ax-saved.busy:before{background:var(--warn)}
.ax-nav{display:flex;gap:10px;justify-content:space-between;margin-top:20px;padding:12px 0 0}
@media (max-width:639px){.ax-nav{position:sticky;bottom:0;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--card) 30%)}}
.ax-nav .ax-btn{flex:1}
@media (min-width:640px){.ax-nav .ax-btn{flex:0 0 auto;min-width:140px}}
.ax-rep{display:grid;gap:10px}
.ax-item{border:1px solid var(--border);background:var(--surface);border-radius:var(--r);padding:12px;display:grid;gap:10px;position:relative}
.ax-item .ax-x{position:absolute;top:6px;right:6px;border:0;background:none;color:var(--muted);font-size:18px;cursor:pointer;width:32px;height:32px;border-radius:8px}
.ax-item .ax-x:hover{background:var(--card);color:var(--bad)}
.ax-svc-grid{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media (min-width:640px){.ax-svc-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.ax-svc-grid .ax-full{grid-column:1/-1}
@media (min-width:640px){.ax-svc-grid .ax-name{grid-column:1/2}}
.ax-day{display:grid;grid-template-columns:64px 50px 1fr;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--border)}
.ax-day:last-child{border-bottom:0}
.ax-day b{font-size:14px}
.ax-times{display:flex;gap:6px;align-items:center}
.ax-times input{min-width:0;padding:9px 8px}
.ax-day.off .ax-times{opacity:.35;pointer-events:none}
.ax-choices{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media (min-width:640px){.ax-choices{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
.ax-choice{position:relative;border:1px solid var(--border);background:var(--surface);border-radius:var(--r);padding:14px;cursor:pointer;text-align:left;font:inherit;color:inherit;display:flex;flex-direction:column;gap:4px;transition:border-color .15s,box-shadow .15s}
.ax-choice b{font-size:14px}
.ax-choice small{color:var(--muted);font-size:12px;line-height:1.4}
.ax-choice .ic{font-size:20px}
.ax-choice[aria-pressed=true]{border-color:var(--stl-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--stl-primary) 18%,transparent);background:var(--card)}
.ax-choice[aria-pressed=true]:after{content:"✓";position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:var(--grad);color:var(--btn-text);font-size:12px;display:grid;place-items:center;font-weight:700}
.ax-prefill{border:1px dashed color-mix(in srgb,var(--stl-primary) 45%,transparent);background:color-mix(in srgb,var(--stl-primary) 5%,var(--card));border-radius:var(--r2);padding:16px;margin-bottom:18px}
.ax-prefill .ax-row .ax-input{flex:1;min-width:200px}
.ax-sugg{margin-top:14px;display:grid;gap:8px}
.ax-sugg .ax-item{background:var(--card)}
.ax-conn{display:flex;align-items:center;gap:14px;justify-content:space-between;border:1px solid var(--border);border-radius:var(--r);padding:14px;background:var(--surface);flex-wrap:wrap}
.ax-conn+.ax-conn{margin-top:10px}
.ax-conn .lbl{display:flex;gap:12px;align-items:center}
.ax-conn .lg{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--card);border:1px solid var(--border);font-weight:800}
.ax-review dl{display:grid;grid-template-columns:140px 1fr;gap:8px 14px;margin:0;font-size:14px}
.ax-review dt{color:var(--muted)}
.ax-review dd{margin:0}
@media (max-width:520px){.ax-review dl{grid-template-columns:1fr}.ax-review dt{margin-top:6px}}
.ax-done{text-align:center;padding:34px 22px}
.ax-done .big{width:72px;height:72px;margin:0 auto 14px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:var(--btn-text);font-size:34px;box-shadow:0 18px 40px -14px var(--stl-primary)}
.ax-steps{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px;text-align:left}
.ax-steps li{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);font-size:14px}
.ax-steps li i{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;border:2px solid var(--border)}
.ax-steps li.done i{background:var(--ok);border-color:var(--ok);color:#fff}
.ax-steps li.done span{color:var(--muted);text-decoration:line-through}
.ax-steps li .ax-btn{margin-left:auto}

/* portal */
.ax-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:4px;margin:4px 0 18px;box-shadow:var(--shadow)}
.ax-tabs::-webkit-scrollbar{display:none}
.ax-tabs button{flex:0 0 auto;border:0;background:none;color:var(--muted);font:600 14px/1 inherit;padding:10px 16px;border-radius:999px;cursor:pointer;white-space:nowrap}
.ax-tabs button[aria-selected=true]{background:var(--grad);color:var(--btn-text)}
.ax-kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
@media (min-width:760px){.ax-kpis{grid-template-columns:repeat(4,1fr)}}
.ax-kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--r2);padding:16px;box-shadow:var(--shadow)}
.ax-kpi small{color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.ax-kpi b{display:block;font-size:28px;letter-spacing:-.02em;margin-top:4px}
.ax-list{display:grid;gap:8px}
.ax-li{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);cursor:default;text-align:left;font:inherit;color:inherit;width:100%}
button.ax-li{cursor:pointer}
button.ax-li:hover{border-color:var(--stl-primary)}
.ax-li .who{display:flex;gap:10px;align-items:center;min-width:0}
.ax-li .av{flex:0 0 36px;height:36px;border-radius:50%;background:var(--grad);color:var(--btn-text);display:grid;place-items:center;font-weight:700;font-size:14px}
.ax-li .tx{min-width:0}
.ax-li .tx b{display:block;font-size:14px}
.ax-li .tx small{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
.ax-empty{text-align:center;color:var(--muted);padding:26px 10px;font-size:14px}
.ax-chat{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow:auto;padding:4px}
.ax-msg{max-width:82%;padding:10px 13px;border-radius:16px;font-size:14px;white-space:pre-wrap}
.ax-msg.in{align-self:flex-start;background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px}
.ax-msg.out{align-self:flex-end;background:var(--grad);color:var(--btn-text);border-bottom-right-radius:4px}
.ax-msg small{display:block;opacity:.65;font-size:11px;margin-top:4px}
.ax-code{position:relative;background:#0b1020;color:#c7d2fe;border-radius:var(--r);padding:14px;font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:auto;white-space:pre-wrap;word-break:break-all}
.ax-preview{border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;background:var(--surface)}
.ax-preview iframe{width:100%;height:640px;border:0;display:block}
.ax-drawer{position:fixed;inset:0;z-index:50;display:flex;justify-content:flex-end;background:rgba(2,6,23,.45);animation:axin .2s ease}
.ax-drawer>div{width:min(560px,100%);height:100%;overflow:auto;background:var(--card);padding:20px;box-shadow:-20px 0 50px rgba(0,0,0,.25)}
.ax-login{max-width:440px;margin:6vh auto 0}
.ax-hist{font-size:13px;color:var(--muted);display:grid;gap:6px}

.ax-done.is-bad .big{background:var(--bad);box-shadow:0 18px 40px -14px var(--bad)}
.ax-app button,.ax-app input,.ax-app select,.ax-app textarea{font-family:inherit}