/* SPEND Advantage skin. Loaded after each page's own styles so the program pages
   share the SpearPoint system: Roboto, ink headings, coral pill buttons with ink text,
   14px corners, sentence-case labels. Tokens mirror site.css. */
:root{
  --sp-ink:#0B0D16;--sp-ink-soft:#3A3D48;--sp-ink-faint:#6B6E78;
  --sp-accent:#FF2751;--sp-accent-deep:#D81E44;--sp-accent-text:#B8163A;--sp-accent-hover:#FF4A6C;--sp-accent-tint:#FFE9ED;
  --sp-rule:#E4E4E9;--sp-paper:#F7F7F9;--sp-radius:14px;
  /* legacy page tokens, re-pointed */
  --blue:#0B0D16;--blue-dark:#0B0D16;--sim-blue:#0B0D16;--sim-blue-deep:#0B0D16;--navy:#0B0D16;--sim:#0B0D16;--simblue:#0B0D16;
  --red:#FF2751;--red-dark:#D81E44;--sim-gold:#FF2751;--gold:#FF2751;--gold2:#D81E44;--link:#B8163A;--accent:#FF2751;
}
html{scroll-behavior:smooth}
body{font-family:Roboto,Arial,Helvetica,sans-serif!important;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.slab{font-family:Roboto,Arial,Helvetica,sans-serif!important;color:var(--sp-ink);letter-spacing:-0.01em}
h1,h2{font-weight:900!important}
h3,h4{font-weight:700!important}
.hero h1,section.band:has(.sim-plate) h2,.rollup .big,.cta-import .cta-h,.hero .big,.so.nat .n,.cnode.hi .cv{color:#fff!important}
.hero h1 .accent,.dot-head .accent,h1 .title-accent{color:var(--sp-accent)!important;font-weight:900!important}
a{color:var(--sp-accent-text)}
::selection{background:var(--sp-accent);color:var(--sp-ink)}
:focus-visible{outline:3px solid var(--sp-accent);outline-offset:3px;border-radius:6px}

/* Buttons: one shape everywhere */
.btn,.btn.red,.btn.blue,.menu a.pill,.sa-nav .menu a.pill,.cta a,.gate button,.btn-submit,.cta-import .cta-btn,.ask button,.tool a.btn{
  border-radius:999px!important;background:var(--sp-accent)!important;color:var(--sp-ink)!important;border:none!important;
  font-family:Roboto,Arial,Helvetica,sans-serif!important;font-weight:700!important;letter-spacing:0!important;text-transform:none!important;
  padding:.8rem 1.6rem!important;transition:background .2s,transform .2s,box-shadow .2s}
.btn:hover,.btn.red:hover,.btn.blue:hover,.menu a.pill:hover,.cta a:hover,.gate button:hover,.btn-submit:hover,.cta-import .cta-btn:hover,.ask button:hover{
  background:var(--sp-accent-hover)!important;color:var(--sp-ink)!important;transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(255,39,81,.7);text-decoration:none}
.btn.ghost,.btn-copy,.ask button.ask-opt,.chip{background:transparent!important;color:var(--sp-ink)!important;border:1.5px solid var(--sp-ink)!important;border-radius:999px!important;box-shadow:none}
.btn.ghost:hover,.btn-copy:hover,.ask button.ask-opt:hover,.chip:hover{border-color:var(--sp-accent)!important;color:var(--sp-accent-text)!important;background:transparent!important;transform:none}
.btn-submit:disabled{opacity:.5;transform:none;box-shadow:none}
.lens-tabs button,.tabs button{border-radius:999px!important;font-family:Roboto,Arial,Helvetica,sans-serif!important}
.lens-tabs button.on,.tabs button.on{background:var(--sp-ink)!important;color:#fff!important;border-color:var(--sp-ink)!important}

/* Corners and edges: one radius, no thick colored top bars */
.card,.step,.deal,.dcell,.rollup,.calc,.cred,.sim-plate,.so,.cnode,.rateread,.hero,.rq,.st,.ms,.bk,.worst,.cap,.lens-panel,.gateway,.gw,.gate,.inside,.tool,.clear-node,.ta-box,.sol-row,.consent,.pillar-card,.t-card,.pstep,.pbox,.ab,.catdefs>div,.item-card,.res-card,.badge,.err,.suplogos summary{border-radius:var(--sp-radius)!important}
.step,.dcell,.cred,.rq,.st,.pillar-card,.t-card,.pstep,.pbox,.ab,.catdefs>div{border-top-width:1px!important;border-top-color:var(--sp-rule)!important}
.cred-grid .cred:nth-child(even),.cred.red-top,.dcell.gold{border-top-color:var(--sp-rule)!important}
.dcell.gold .dv,.cred.red-top .pct{color:var(--sp-accent-text)!important}
.calc input[type=number],.gate input,.f-field input,.f-field select,.f-field textarea,.ta-box input[type=text],input[type=number],select,textarea{border-radius:10px!important;font-family:inherit}
input[type=number]:focus,select:focus,textarea:focus,.gate input:focus,.f-field input:focus{border-color:var(--sp-accent)!important;box-shadow:0 0 0 4px rgba(255,39,81,.18)!important;outline:none}
.aor{border-left-width:1px!important;border-left-color:var(--sp-rule)!important}

/* Labels: sentence case, tighter tracking, readable size */
.tag,.k,.kick,.masthead .kick,.sec-head .k,.verdict .k,.kicker,.hero .eyebrow,.hero .sub,.dl,.aud,.card h2,.hero .lab,.hero .row2 div .k,.effpill .k,.cnode .ck,.sec-k,.stat-label,.filter-label,.doc-stamp,.status-chip,.bal .k,.vtag,.so .k,.flowcard h3,label.fld,details.split summary,.splitgrid label,.gateway .eyebrow2,.rq .n,.st .cite,.ms .cite,.bk .head .where,.res-card .soon,.lockup .page-label,.card.scale h3{
  text-transform:none!important;letter-spacing:0!important}
.k,.kick,.masthead .kick,.sec-head .k,.kicker,.hero .eyebrow,.dl,.sec-k,.stat-label,.hero .lab,.so .k,.cnode .ck,.effpill .k,label.fld,.splitgrid label{font-weight:700;font-size:.82rem!important;color:var(--sp-accent-text)!important}
.hero .lab,.hero .row2 div .k,.effpill .k,.so.nat .k,.cnode.hi .ck,.hero .sub{color:#FF8FA6!important}
.card h2,.flowcard h3,.card.scale h3{font-size:1.05rem!important;color:var(--sp-ink)!important}
.tag{background:var(--sp-accent-tint)!important;color:var(--sp-accent-text)!important;border-radius:999px!important;padding:.3rem .8rem!important;font-size:.78rem!important}
thead th,table.rules th{letter-spacing:0!important;text-transform:none!important;font-size:.85rem}

/* Dark surfaces stay ink, accent reads as coral on them */
section.band:has(.sim-plate),.rollup,.hero,.so.nat,.cnode.hi,footer{background:var(--sp-ink)!important;background-image:none!important}
.hero .sub,section.band:has(.sim-plate) p,.rollup p{color:rgba(255,255,255,.78)!important}
footer,footer p,footer div{color:rgba(255,255,255,.65)}
footer a{color:#fff}
footer a:hover{color:var(--sp-accent)}
.seg.simnat{background:var(--sp-accent)!important;color:var(--sp-ink)!important}
.seg.simchap{background:var(--sp-accent-deep)!important;color:#fff!important}
.cta-import .cta-btn{color:var(--sp-ink)!important}

/* The estimator is a working tool inside a marketing site: give it a page, not a spreadsheet */
body.est{background:var(--sp-paper)}
header.top{border-bottom:1px solid var(--sp-rule)!important;padding-bottom:14px}
header.top h1{font-size:1.9rem!important}
@media(max-width:640px){header.top{flex-direction:column;align-items:flex-start!important}.hero .big{font-size:34px!important}.effpill{position:static!important;margin-top:10px;display:inline-block}}
section.band:has(.sim-plate) .accent{color:var(--sp-accent)!important;font-weight:900!important}
.hero a:not(.btn),section.band:has(.sim-plate) a:not(.btn),.rollup a:not(.btn){color:#fff!important;text-decoration:underline;text-underline-offset:3px}
.hero a:not(.btn):hover{color:var(--sp-accent)!important}
.hero .big,.hero .big .per,.rateread b,.cnode .cv,.so .n,.tierlist span,.tierlist .vnote,.leg .amt,.leg .amt small,.simsum .amt,.simsum .amt small,.commtot,.seg .sp,.effpill .n,.cta-import .cta-h,.dspend,.dspend span,.dv,.dv span,.step .n,.rollup .big,.calc .ds,.cred .pct,.bstat b,.fullstop,.item .more,.copy-email{font-family:Roboto,Arial,Helvetica,sans-serif!important}
footer code{background:rgba(255,255,255,.12);color:#fff}
.hero .lab{max-width:calc(100% - 210px)}
.hero .row2{flex-wrap:wrap}
.grid>*,.card,.pane{min-width:0}
.chips,.tabs,.cascade,.legend{flex-wrap:wrap}
img,svg{max-width:100%}
/* headings that sit on dark surfaces stay white */
.masthead h1,.masthead h2,.masthead h3,.masthead h4,.rq h3,.rq h4,.verdict h2,.verdict h3,.thesis h2,.thesis h3,.gateway h2,.gateway h3,div.cta h2,div.cta h3,.cta-import h3,.so.nat h3,.cnode.hi h3,section.band:has(.sim-plate) h3,.hero h2,.hero h3,.rollup h2,.rollup h3,.sim-plate h3,footer h3,footer h4{color:#fff!important}
.sim-plate h3{color:var(--sp-ink)!important}
.rq{border-top-width:1px!important;border-top-color:rgba(255,255,255,.18)!important}
/* research: New Gravity page keeps its own dark bands */
.band--dark h1,.band--dark h2,.band--dark h3,.band--dark h4,.band--cta h1,.band--cta h2,.band--cta h3,.thesis-card h2,.thesis-card h3,.thesis-card h4,.kpi--accent h3,.kpi--accent h4,.method-statement--closing h2,.method-statement--closing h3,.mrr-foundation h3,.mrr-foundation h4,.c-navy h3,.c-navy h4{color:#fff!important}
.bench-view.is-active,.tab.is-active{color:#fff!important;background:var(--sp-ink)!important}
.band--dark .force h3,.band--dark .force h4,.band--cta .force h3{color:var(--sp-ink)!important}
.band--dark .force p,.band--dark .force li{color:var(--sp-ink-soft)!important}
.band--dark .force a{color:var(--sp-accent-text)!important}
/* eyebrows on dark heroes */
.page-hero .eyebrow,.hero .eyebrow,.hero p.eyebrow,.hero-email,.hero-email .copy-email,.masthead .kick,.masthead .kicker{color:#FF8FA6!important}
.hero-email .copy-email{color:#fff!important}
.f-grid>*,.sol-row>*{min-width:0}
.f-field input,.f-field select,.f-field textarea{max-width:100%;box-sizing:border-box}
.cta-import .cta-s{color:#d7dcee!important}
/* chrome hero objects (shared with the main site) */
.hero,header.hero,.masthead{position:relative;overflow:hidden}
.hero>*:not(.hero-obj),.masthead>*:not(.hero-obj){position:relative;z-index:1}
.hero-obj{position:absolute!important;right:3%;top:50%;width:min(34vw,520px);height:auto;transform:translateY(-50%);pointer-events:none;z-index:0!important;filter:drop-shadow(0 40px 60px rgba(0,0,0,.55))}
.hero-obj-moons{width:min(40vw,600px);right:0}
.masthead .hero-obj{width:min(24vw,340px);opacity:.9}
.hero .wrap>*,.hero>.wrap>*{max-width:680px}
@media(max-width:900px){.hero-obj{width:56vw;right:-16vw;top:auto;bottom:-14%;opacity:.5;transform:none}}
.hero-obj-ring{opacity:.6;right:-4%}