/* ChargeSecured — shared base stylesheet (2026 redesign).
   Loaded by every page that mounts the chrome through common.js: support, developers, company
   subpages, legal, portal, 404, and the merchant console. The five primary pages (home, pricing,
   facts, demo, company) carry their own inline styles and do not load this file.
   Old token names are kept as aliases so console.css, portal-accounting.css, and the portal
   scripts keep resolving. */

:root{
  /* new system */
  --field:#EDEFEF; --card:#FFFFFF; --ink:#111315; --ink-2:#3B3F45; --muted:#6E7278; --hair:#D8DBDE; --hair-2:#C9CDD1;
  --stage:#0B0C0E; --panel-dark:#070809; --line:#1E2126; --line-2:#2A2E35; --on:#EDEEF0; --dim:#8A8E96; --faint:#5C6069;
  --red:#E5484D; --green:#1FBF75; --amber:#E8A93B; --gold:#EFC97C;
  --sans:'Host Grotesk','Albert Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Fragment Mono','IBM Plex Mono',ui-monospace,monospace;
  --max:1180px; --radius:12px; --radius-lg:18px; --radius-xl:24px;
  /* aliases for the console and older markup (light context) */
  --bg:#EDEFEF; --bg-2:#E6E8EA; --panel:#FFFFFF; --panel-2:#F6F7F8; --panel-hover:#F1F2F4;
  --border:#D8DBDE; --border-soft:#E6E8EA; --text:#111315; --text-dim:#3B3F45; --text-faint:#6E7278;
  --blue:#111315; --blue-bright:#111315; --blue-soft:#E6E8EA; --green-soft:#DDF5E8;
  --shadow:0 24px 60px -36px rgba(0,0,0,.35);
}
/* the merchant console keeps a dark surface */
body[data-canonical^="/portal"], body[data-canonical^="/admin"]{
  --bg:#0B0C0E; --bg-2:#101216; --panel:#121417; --panel-2:#171A1E; --panel-hover:#1C1F24;
  --border:#22262C; --border-soft:#1A1D22; --text:#EDEEF0; --text-dim:#A9ADB5; --text-faint:#6E727B;
  --blue:#FFFFFF; --blue-bright:#FFFFFF; --blue-soft:#1C1F24; --green-soft:#0F2A1E;
  --shadow:0 24px 70px -30px rgba(0,0,0,.8);
  --field:#0B0C0E; --card:#121417; --ink:#EDEEF0; --ink-2:#A9ADB5; --muted:#8A8E96; --hair:#22262C; --hair-2:#2A2E35;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
body > *{flex:0 0 auto} body > .page-grow,body > section.sec:last-of-type{flex:1 0 auto}
a{color:inherit;text-decoration:none}
a:hover{color:var(--text)}
b,strong{font-weight:500}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

/* ---------- nav ---------- */
.cs-nav{position:sticky;top:0;height:64px;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 28px;color:var(--text);background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-soft)}
.cs-nav .brand{display:inline-flex;align-items:center;gap:9px;font-weight:500;font-size:15.5px;letter-spacing:-.01em;color:var(--text)}
.cs-nav .brand svg,.brand svg{width:22px;height:22px;display:block}
.cs-nav .links{display:flex;gap:26px;font-size:14px;color:var(--text-dim)}
.cs-nav .links a:hover,.cs-nav .links a.on{color:var(--text)}
.cs-nav .links a.on{font-weight:500}
.cs-nav .actions{display:flex;align-items:center;gap:10px}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:500;letter-spacing:-.01em}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 18px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;border:1px solid transparent;transition:transform .12s,background .15s,border-color .15s,color .15s,opacity .15s;white-space:nowrap;cursor:pointer;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:default}
.btn-primary{background:var(--text);color:var(--bg)}
.btn-primary:hover{background:color-mix(in srgb,var(--text) 88%,var(--bg))}
.btn-ghost{border-color:var(--hair-2);color:var(--text)}
.btn-ghost:hover{border-color:var(--text)}
.btn-outline-green{border-color:rgba(31,191,117,.5);color:var(--text)}
.btn-block{width:100%}
.btn-sm{height:32px;padding:0 13px;font-size:10px}
.btn .arw{font-family:var(--sans);font-size:13px}

/* ---------- hero + sections ---------- */
.hero{padding:0 16px}
.hero-inner{max-width:var(--max);margin:0 auto;padding:88px 12px 48px;text-align:center}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);display:inline-flex;align-items:center;gap:10px}
.eyebrow .dot{display:none}
.hero h1{margin:22px auto 0;font-weight:300;font-size:64px;line-height:1;letter-spacing:-.028em;max-width:17ch;text-wrap:balance}
.lede{margin:22px auto 0;font-size:18px;color:var(--text-dim);max-width:58ch;line-height:1.5}
.hero-actions{margin-top:30px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.hero-rays,.orbit-arc,.orbit-node,.ticker-wrap{display:none}
section.sec{padding:40px 16px 0}
section.sec.tight{padding-top:32px}
.wrap{max-width:var(--max);margin:0 auto}
.wrap-wide{max-width:1320px;margin:0 auto}
.sec-head{padding:0 12px 22px}
.sec-head h2,h2.sec-title{font-weight:300;font-size:36px;letter-spacing:-.022em;line-height:1.08;text-wrap:balance}
.kicker{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin-bottom:12px}
.sec-head .sub,p.sub{margin-top:10px;font-size:15.5px;color:var(--text-dim);max-width:60ch;line-height:1.5}
.grid{display:grid;gap:12px}
.grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .grid-5{grid-template-columns:repeat(5,1fr)}

/* ---------- cards ---------- */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px 26px 24px;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.card h3{font-weight:300;font-size:24px;letter-spacing:-.02em;line-height:1.12}
.card p{margin-top:8px;font-size:14.5px;color:var(--text-dim);line-height:1.5}
.card.accent{border-color:var(--text);box-shadow:0 0 0 1px var(--text)}
.card.warn{border-color:rgba(232,169,59,.6)}
.card a{color:var(--text);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.card a:hover{text-decoration:underline}
.callout{background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;font-size:14px;color:var(--text-dim);line-height:1.55}
.callout a{color:var(--text);text-decoration:underline}
.quote-bar{margin-top:14px;padding:20px 24px;border:1px solid var(--border);border-radius:var(--radius-lg);font-size:15px;color:var(--text-dim);line-height:1.55;background:var(--panel)}
.badge,.chip{display:inline-flex;align-items:center;gap:8px;height:24px;padding:0 10px;border-radius:999px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--hair-2);color:var(--text-dim)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.step{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px}
.step .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--text-faint);margin-bottom:12px}
.step h4{font-weight:400;font-size:17px;letter-spacing:-.01em}
.step p{margin-top:6px;font-size:14px;color:var(--text-dim);line-height:1.5}

/* ---------- forms ---------- */
.form-field{margin-bottom:14px}
.form-field label,.fieldlabel{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px}
.form-field input,.form-field select,.form-field textarea,input.field,select.field,textarea.field{width:100%;min-height:44px;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:var(--sans);font-size:14.5px;padding:10px 14px;outline:none;transition:border-color .15s}
.form-field textarea{min-height:110px;resize:vertical}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--text)}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--text-faint)}
.form-field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E7278' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.form-status{margin-top:12px;font-size:13.5px;line-height:1.5;min-height:1em}
.form-status.ok{color:#0A8F55}
.form-status.err{color:var(--red)}
.card form .btn-block{margin-top:6px}

/* ---------- faq ---------- */
.faq-item{border-top:1px solid var(--border)}
.faq-item:last-child{border-bottom:1px solid var(--border)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;font-size:16.5px;cursor:pointer}
.faq-q .plus{font-family:var(--mono);font-size:18px;color:var(--text-faint);transition:transform .2s}
.faq-item.open .plus{transform:rotate(45deg)}
.faq-a{display:none;padding:0 0 20px;font-size:15px;color:var(--text-dim);line-height:1.55;max-width:62ch}
.faq-item.open .faq-a{display:block}

/* ---------- documentation (developers) ---------- */
.wrap.doc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;align-items:start;padding:8px 12px 0}
.doc-nav{position:sticky;top:88px;display:flex;flex-direction:column;gap:2px}
.doc-nav .grp{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin:18px 0 6px}
.doc-nav .grp:first-child{margin-top:0}
.doc-nav a{font-size:14px;color:var(--text-dim);padding:5px 0}
.doc-nav a:hover{color:var(--text)}
.doc h2{font-weight:300;font-size:30px;letter-spacing:-.02em;line-height:1.1;margin:44px 0 12px;padding-top:6px;border-top:1px solid var(--border)}
.doc h2:first-child{margin-top:0;border-top:0}
.doc h3{font-weight:400;font-size:17px;margin:24px 0 8px}
.doc p{font-size:15px;color:var(--text-dim);line-height:1.6;max-width:66ch;margin:0 0 12px}
.doc p b{color:var(--text);font-weight:400}
.doc .mono{font-family:var(--mono);font-size:.92em;background:var(--panel-2);border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:var(--text)}
.doc pre{background:var(--stage);color:#D7D9DE;border-radius:var(--radius);padding:18px 20px;font-family:var(--mono);font-size:12.5px;line-height:1.65;overflow-x:auto;margin:12px 0 18px}
.doc pre .c{color:#6E727B} .doc pre .k{color:#F5C46B} .doc pre .s{color:#8FD9B0}
.endpoint{display:inline-flex;align-items:center;gap:12px;margin:8px 10px 12px 0;padding:8px 14px 8px 8px;border:1px solid var(--border);border-radius:999px;font-family:var(--mono);font-size:12.5px;background:var(--panel)}
.endpoint .verb{padding:3px 9px;border-radius:999px;font-size:10px;letter-spacing:.12em;background:var(--text);color:var(--bg)}
.endpoint .verb.get{background:#0A8F55;color:#fff}
.endpoint .path{color:var(--text)}
table.params{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:14px}
table.params td{padding:11px 0;border-top:1px solid var(--border);vertical-align:top;color:var(--text-dim);line-height:1.5}
table.params td:first-child{font-family:var(--mono);font-size:12.5px;color:var(--text);width:180px;padding-right:20px;white-space:nowrap}
table.params tr:last-child td{border-bottom:1px solid var(--border)}
table.params .req{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin-top:3px}

/* ---------- legal ---------- */
.legal-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;align-items:start;padding:8px 12px 0}
.legal-nav{position:sticky;top:88px;display:flex;flex-direction:column;gap:2px}
.legal-nav a{font-size:13.5px;color:var(--text-dim);padding:5px 0;line-height:1.35}
.legal-nav a:hover{color:var(--text)}
.legal-body h2{font-weight:300;font-size:26px;letter-spacing:-.02em;line-height:1.12;margin:40px 0 10px;padding-top:6px;border-top:1px solid var(--border)}
.legal-body .callout + h2{margin-top:30px}
.legal-body p,.legal-body li{font-size:15px;color:var(--text-dim);line-height:1.65;max-width:70ch}
.legal-body p{margin:0 0 12px}
.legal-body ul,.legal-body ol{margin:0 0 14px 20px}
.legal-body b{color:var(--text);font-weight:500}
.legal-body a{color:var(--text);text-decoration:underline}
.legal-body details.state-acc{border-top:1px solid var(--border)}
.legal-body details.state-acc:last-child{border-bottom:1px solid var(--border)}
.legal-body details.state-acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:14px 0;font-size:15px;color:var(--text)}
.legal-body details.state-acc summary::-webkit-details-marker{display:none}
.legal-body details.state-acc summary::after{content:"+";font-family:var(--mono);color:var(--text-faint)}
.legal-body details.state-acc[open] summary::after{content:"−"}
.legal-body details.state-acc .body{padding:0 0 16px;font-size:14.5px;color:var(--text-dim);line-height:1.6;max-width:70ch}
.legal-body table{width:100%;border-collapse:collapse;font-size:14px;margin:8px 0 16px}
.legal-body th,.legal-body td{text-align:left;padding:9px 0;border-top:1px solid var(--border);vertical-align:top;color:var(--text-dim)}
.legal-body th{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}

/* ---------- careers ---------- */
.role-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;margin-bottom:12px}
.role-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.role-meta{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin-top:6px}
.role-card h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);font-weight:400;margin:18px 0 8px}
.role-card ul{margin:0 0 6px 18px;font-size:14.5px;color:var(--text-dim);line-height:1.7}

/* ---------- auth (portal sign-in) ---------- */
.auth-wrap{flex:1 0 auto;display:flex;align-items:center;justify-content:center;padding:56px 16px 80px}
.auth-card{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-xl);padding:34px 32px 28px;text-align:center}
.auth-logo{display:flex;justify-content:center;margin-bottom:14px}
.auth-card h1{font-weight:300;font-size:30px;letter-spacing:-.02em;line-height:1.1}
.auth-card .sub2{margin:10px 0 24px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.auth-card form{text-align:left}
.auth-divider{display:flex;align-items:center;gap:12px;margin:22px 0 12px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.auth-divider div{flex:1;height:1px;background:var(--border)}
.demo-note{margin-top:18px;font-size:12.5px;color:var(--text-faint);line-height:1.5}
.auth-foot{margin-top:18px;font-size:13.5px;color:var(--text-dim)}
.auth-foot a{color:var(--text);text-decoration:underline}

/* ---------- footer ---------- */
.cs-foot{position:relative;z-index:3;background:var(--bg);margin:72px 16px 16px;padding:56px 24px 28px;border-top:1px solid var(--border);color:var(--text)}
.cs-foot .fcols{display:grid;grid-template-columns:2fr repeat(5,1fr);gap:32px}
.cs-foot p{margin-top:12px;font-size:13.5px;color:var(--text-faint);max-width:30ch;line-height:1.5}
.cs-foot p.fmono{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;margin-top:16px}
.cs-foot h4{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);font-weight:400;margin-bottom:12px}
.cs-foot .fcols a:not(.brand){display:block;font-size:14px;color:var(--text-dim);padding:4px 0;line-height:1.4}
.cs-foot .fcols a:not(.brand):hover{color:var(--text)}
.cs-foot .fbottom{margin-top:44px;padding-top:18px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .cs-nav{padding:0 16px} .cs-nav .links{display:none} .btn{height:36px;padding:0 14px;font-size:10.5px}
  .hero-inner{padding:64px 4px 36px} .hero h1{font-size:40px} .hero-actions{flex-direction:column;align-items:stretch}
  .grid-2,.grid-3,.grid-4,.grid-5,.steps{grid-template-columns:1fr}
  .wrap.doc,.legal-grid{grid-template-columns:1fr;gap:20px} .doc-nav,.legal-nav{position:static}
  .cs-foot .fcols{grid-template-columns:1fr 1fr} .cs-foot{margin:56px 10px 10px}
  .sec-head h2{font-size:30px}
}
@media print{.cs-nav,.cs-foot,.no-print{display:none!important}}