/* PlanConversion Pacing Console. Brand tokens from the PlanConversion system. */
:root{
  --ink:#0B1A2E; --ink-2:#16344F; --azure:#1C64E0; --azure-soft:#E3EEFF; --cyan:#57C6F2; --green:#2FD08A;
  --bg:#F4F6FA; --surface:#FFFFFF; --text:#0B1A2E; --muted:#5C6B7E; --faint:#8593A3; --line:#E4E9F0; --line-2:#D3DBE6;
  --band:#0B1A2E; --band-fg:#FFFFFF; --band-muted:#A9B8CA;
  --ok:#127A4E; --ok-bg:#E2F6EC; --warn:#8A5A00; --warn-bg:#FFF1D6; --bad:#A61B1B; --bad-bg:#FDE2E1; --under:#1C64E0; --under-bg:#E3EEFF; --idle:#5C6B7E; --idle-bg:#EEF1F5;
  --track:#E9EEF4; --scrim:rgba(11,26,46,.5); --code-bg:#0B1A2E; --code-fg:#DCE6F2;
  /* Channel colors, validated for color-vision deficiency on light and dark surfaces */
  --ch-g:#1D5FD6; --ch-l:#0E8F85; --ch-m:#8A4BD6; --ch-f:#C2531F;
  --f-display:"Space Grotesk","Segoe UI",Arial,sans-serif;
  --f-body:"Hanken Grotesk","Segoe UI",Calibri,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",Consolas,"SFMono-Regular",monospace;
  color-scheme:light;
}
/* Light is the default everywhere; dark applies only when the visitor picks it with the switch. */
:root[data-theme="dark"]{
  --bg:#08131F; --surface:#0F2033; --text:#E8EEF6; --muted:#9AAABD; --faint:#6F8095; --line:#1C3147; --line-2:#28425D;
  --azure:#6FA1F5; --azure-soft:#14294A; --band:#050D17; --band-fg:#F2F6FB; --band-muted:#8EA0B5;
  --ok:#55D59D; --ok-bg:#0E3426; --warn:#F2B650; --warn-bg:#3A2A0C; --bad:#FF8F85; --bad-bg:#3E1515; --under:#86B4FF; --under-bg:#132A4C; --idle:#9AAABD; --idle-bg:#16283C;
  --track:#1A2E44; --scrim:rgba(0,0,0,.6); --code-bg:#050D17; color-scheme:dark;
  --ch-g:#3D74E3; --ch-l:#10A99A; --ch-m:#AC6EE8; --ch-f:#F07A45 }
:root[data-theme="light"]{color-scheme:light}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:15px/1.5 var(--f-body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--azure)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--azure);outline-offset:2px}
[hidden]{display:none!important}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.narrow{max-width:760px}
.num{font-variant-numeric:tabular-nums}
.kicker{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--azure)}
.label{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.note{font-size:13px;color:var(--muted)}

/* Header band */
.band{background:var(--band);color:var(--band-fg)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;flex-wrap:wrap}
.lockup{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.lockup img{height:26px;width:auto;display:block}
.pc-logo{height:28px;width:auto;display:block;flex:none}
.lockup .prod{white-space:nowrap}
@media (max-width:420px){.lockup .prod{display:none}}
.lockup .prod{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--band-muted);border-left:1px solid rgba(255,255,255,.2);padding-left:10px}
.topnav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.topnav a{color:var(--band-muted);text-decoration:none;font-size:14px;padding:7px 11px;border-radius:8px}
.topnav a[aria-current="page"],.topnav a:hover{color:var(--band-fg);background:rgba(255,255,255,.08)}

/* Buttons and fields */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface);color:var(--text);cursor:pointer;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.btn.primary{background:#1C64E0;border-color:#1C64E0;color:#fff}
.btn.onband{background:transparent;border-color:rgba(255,255,255,.28);color:var(--band-fg)}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.sm{height:32px;padding:0 11px;font-size:11.5px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.field{width:100%;height:42px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);padding:0 12px;min-width:0}
textarea.field{height:auto;min-height:120px;padding:10px 12px}
.fl{display:grid;gap:6px}
.fl label{font-size:13px;font-weight:600}
.fl .hint{font-size:12.5px;color:var(--muted)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:560px){.grid2{grid-template-columns:minmax(0,1fr)}}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px}
.check input{margin-top:3px;width:16px;height:16px;flex:none}
.err{color:var(--bad);font-size:13.5px}

/* Panels */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 12px;flex-wrap:wrap}
.panel-h h2{font-size:17px}
.panel-b{padding:0 18px 18px;display:grid;gap:14px}

/* Pills and pace bars */
.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:6px;font-size:11.5px;font-weight:600;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.s-ok{color:var(--ok);background:var(--ok-bg)} .s-warn{color:var(--warn);background:var(--warn-bg)} .s-bad{color:var(--bad);background:var(--bad-bg)}
.s-under{color:var(--under);background:var(--under-bg)} .s-idle{color:var(--idle);background:var(--idle-bg)}
.f-ok{background:var(--ok)} .f-warn{background:var(--warn)} .f-bad{background:var(--bad)} .f-under{background:var(--under)} .f-idle{background:var(--faint)}
.pace{position:relative;height:10px;border-radius:5px;background:var(--track)}
.pace .fill{position:absolute;inset:0 auto 0 0;border-radius:5px;max-width:100%}
.pace .tick{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--text);border-radius:1px;transform:translateX(-1px)}
.pace.sm{height:7px}.pace.sm .tick{top:-3px;bottom:-3px}
.dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}

/* Toast and dialogs */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--text);color:var(--surface);padding:10px 16px;border-radius:10px;font-size:14px;z-index:50;max-width:calc(100% - 32px)}
dialog{border:0;padding:0;border-radius:14px;background:var(--surface);color:var(--text);width:min(600px,calc(100% - 32px));max-height:calc(100% - 48px)}
dialog::backdrop{background:var(--scrim)}
.dlg{display:grid;gap:16px;padding:22px}
.dlg h2{font-size:20px}
.dlg-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dlg-actions .right{margin-left:auto;display:flex;gap:8px}

/* Code blocks */
.code{position:relative}
.code pre{margin:0;background:var(--code-bg);color:var(--code-fg);border-radius:10px;padding:14px 16px;font:12px/1.55 var(--f-mono);max-height:300px;overflow:auto;white-space:pre}
.code .btn{position:absolute;top:10px;right:10px;background:#1C64E0;border-color:#1C64E0;color:#fff}
.inline-code{font-family:var(--f-mono);font-size:12.5px;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:2px 6px;word-break:break-all}

/* Auth pages */
.auth{min-height:100vh;display:grid;grid-template-rows:auto 1fr}
.auth main{display:grid;place-items:start center;padding-block:40px 60px}
.auth .card{width:min(640px,100%);display:grid;gap:22px;padding:28px}
.auth .card.sm{width:min(440px,100%)}
.auth h1{font-size:28px}
.steps-line{display:flex;gap:8px;align-items:center;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.steps-line b{color:var(--azure);font-weight:500}
fieldset{border:0;margin:0;padding:0;display:grid;gap:14px}
legend{font-family:var(--f-display);font-weight:600;font-size:17px;margin-bottom:4px;padding:0}

footer.site{border-top:1px solid var(--line);padding-block:24px;font-family:var(--f-mono);font-size:11.5px;color:var(--muted);letter-spacing:.04em}
footer.site .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer.site a{color:var(--muted)}
/* Cookie banner */
#pc-consent{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:560px;margin:0 auto;z-index:60;background:var(--surface);color:var(--text);border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;box-shadow:0 10px 30px rgba(11,26,46,.18);font-size:13.5px}
#pc-consent p{flex:1 1 260px}
#pc-consent div{display:flex;gap:8px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* Light and dark mode switch in the top bar */
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.22);background:transparent;color:var(--band-fg);cursor:pointer;padding:0;flex:none}
.theme-btn:hover{background:rgba(255,255,255,.08)}
.theme-btn svg{width:17px;height:17px}
/* Cross-sell and service offers shared by both products */
.offer{position:relative;border-color:var(--azure)}
.offer .panel-b{padding-top:18px}
.offer h3{font-size:17px;margin:6px 0 6px}
.offer-x{position:absolute;top:8px;right:10px;background:none;border:0;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;padding:4px}
.offer-a{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:720px){.svc{grid-template-columns:minmax(0,1fr)}}
.svc-i h3{font-size:16px;margin-bottom:4px}
.xsell{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center}
@media (max-width:640px){.xsell{grid-template-columns:minmax(0,1fr)}}
.xsell .xi{width:44px;height:44px;border-radius:12px;background:var(--azure-soft);display:grid;place-items:center;color:var(--azure)}