/* ============================================================
   KAIBA BUSINESS CAPITAL — shared chrome
   Lifted verbatim from index.html so the resource pages cannot
   drift from it. index.html keeps its own inline copy on
   purpose: it stays a single self-contained file that opens
   straight off the disk with no server. Change a token here and
   change it there too.
   ============================================================ */

/* ---------- tokens + base ---------- */
:root{
  color-scheme: light;

  --paper:#EDF1F7;      /* page ground, cold blue-grey white */
  --card:#FFFFFF;       /* raised surface */
  --wash:#DFE6F0;       /* tinted panel */
  --rule:#BDC9DA;       /* hairline */
  --rule-hi:#8E9EB6;    /* stronger hairline */
  --ink:#080D17;        /* near-black, blue-biased */
  --ink-2:#121A28;      /* dark band surface */
  --slate:#46566E;      /* secondary text */
  --faint:#68788F;      /* tertiary text */
  --volt:#1B4DE4;       /* accent */
  --volt-dk:#1139B4;
  --volt-wash:#DDE5FB;
  --sever:#C4231C;      /* semantic decline */
  --live:#0E9F55;       /* desk open */
  --live-wash:#DCF3E7;

  --frame:1180px;
  --gut:clamp(20px,4vw,44px);

  --f-display:"Chakra Petch","Arial Narrow",Helvetica,sans-serif;
  --f-body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --notch:polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.wrap{ width:100%; max-width:var(--frame); margin:0 auto; padding-inline:var(--gut); position:relative; z-index:1; }

/* sticky masthead is 72px; keep anchored sections clear of it */
section[id]{ scroll-margin-top:92px; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }

h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; text-wrap:balance; margin:0; letter-spacing:-.01em; line-height:1.02; }
p{ margin:0; }
a{ color:var(--volt); text-decoration:none; }
a:hover{ text-decoration:underline; }

:focus-visible{ outline:2px solid var(--volt); outline-offset:3px; }

/* ---------- shared parts ---------- */

.code{
  font-family:var(--f-mono); font-size:11px; font-weight:600;

/* ---------- shared parts ---------- */
  letter-spacing:.18em; text-transform:uppercase; color:var(--volt);
}
.code .dim{ color:var(--faint); font-weight:400; }

.panel{
  position:relative;
  background:var(--card);
  border:1px solid var(--rule);
}
/* corner brackets — the recurring structural mark */
.panel::before,.panel::after{
  content:""; position:absolute; width:13px; height:13px; pointer-events:none;
  border-color:var(--volt); border-style:solid; border-width:0;
}
.panel::before{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; }
.panel::after{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-display); font-weight:700; font-size:15px;
  letter-spacing:.13em; text-transform:uppercase;
  padding:17px 30px; border:0; cursor:pointer;
  clip-path:var(--notch);
  transition:background .16s ease, color .16s ease, transform .16s ease, filter .16s ease;
}
.btn:hover{ text-decoration:none; transform:translateY(-2px); }
.btn-primary:hover{ filter:drop-shadow(0 6px 14px rgba(27,77,228,.34)); }
.btn[hidden]{ display:none; }
.btn-primary{ background:var(--volt); color:#FFFFFF; }
.btn-primary:hover{ background:var(--volt-dk); color:#FFFFFF; }
.btn-ghost{ background:var(--ink); color:#FFFFFF; }
.btn-ghost:hover{ background:var(--ink-2); color:#FFFFFF; }

/* on the dark hero band */
.band .btn-ghost{ background:rgba(255,255,255,.10); color:#FFFFFF; box-shadow:inset 0 0 0 1px rgba(255,255,255,.32); }
.band .btn-ghost:hover{ background:rgba(255,255,255,.19); }

/* ---------- masthead ---------- */

header.mast{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:2px solid var(--ink);
}
.mast-in{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:72px; }
.brand{ display:flex; align-items:center; gap:11px; color:var(--ink); }
.brand:hover{ text-decoration:none; }
.brand svg{ display:block; flex:none; }
.brand .mark{ flex:none; }
.wordmark{ display:block; }
.brand-name{ display:block; font-family:var(--f-display); font-weight:700; font-size:23px; letter-spacing:.045em; text-transform:uppercase; line-height:1; }
.brand-sub{ display:block; font-family:var(--f-mono); font-weight:500; font-size:8.5px; letter-spacing:.2em; color:var(--slate); text-transform:uppercase; margin-top:6px; white-space:nowrap; }
@media (max-width:420px){ .brand-name{ font-size:19px; } .brand-sub{ font-size:7px; letter-spacing:.15em; } }

nav.mast-nav{ display:flex; align-items:center; gap:24px; }
nav.mast-nav a{
  font-family:var(--f-mono); font-size:11.5px; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--slate);
}
nav.mast-nav a:hover{ color:var(--volt); text-decoration:none; }
.mast .btn{ padding:12px 20px; font-size:12.5px; }
@media (max-width:1040px){ nav.mast-nav{ display:none; } }


/* ---------- dark band ---------- */
/* ---------- the dark band ---------- */

.band{ background:var(--ink); color:#E9EEF7; position:relative; overflow:hidden; }
.band::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:72px 72px;
}
.band::after{
  content:""; position:absolute; top:-46%; left:50%; transform:translateX(-50%);
  width:min(1700px,150%); height:150%; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, rgba(27,77,228,.46), rgba(27,77,228,.12) 52%, transparent 78%);
}
.band .code{ color:#7FA6FF; }
.band .code .dim{ color:#93A6C2; }
.band h1,.band h2,.band h3{ color:#FFFFFF; }

/* ---------- hero ---------- */

/* ---------- sections ---------- */
/* ---------- sections ---------- */

section{ padding:clamp(60px,8vw,104px) 0; position:relative; }
.rule{ height:1px; background:var(--rule); width:100%; }

.sec-head{ margin-bottom:clamp(34px,4vw,52px); }
.sec-head h2{ font-size:clamp(32px,5.4vw,64px); letter-spacing:-.022em; margin-top:14px; max-width:19ch; }
.sec-head p{ color:var(--slate); max-width:62ch; margin-top:18px; font-size:17px; }

.sec-cta{ margin-top:clamp(30px,4vw,44px); display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
/* display:flex above beats the hidden attribute on its own */
.sec-cta[hidden]{ display:none; }
#dealerCta{ animation:ctaIn .34s ease both; }
@keyframes ctaIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ #dealerCta{ animation:none; } }
.sec-cta .note{ font-family:var(--f-mono); font-size:11px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--slate); }


/* ---------- scroll reveal ---------- */

/* ---------- scroll reveal ---------- */
@media (prefers-reduced-motion:no-preference){
  .rv{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
  .rv.in{ opacity:1; transform:none; }
}

/* ---------- desk + readbar ---------- */
   ============================================================ */

.mast-right{ display:flex; align-items:center; gap:16px; }

.desk{
  display:inline-flex; align-items:flex-start; gap:9px; line-height:1.55;
  font-family:var(--f-mono); font-size:11px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--slate);
}
.desk .dot{
  width:8px; height:8px; flex:none; border-radius:50%; margin-top:5px;
  background:var(--rule-hi); box-shadow:0 0 0 3px rgba(142,158,182,.18);
}
.desk.open .dot{ background:var(--live); box-shadow:0 0 0 3px rgba(14,159,85,.20); }
.desk.open{ color:var(--ink); }
.desk.shut .dot{ background:var(--faint); }
@media (prefers-reduced-motion:no-preference){
  .desk.open .dot{ animation:live 2.6s ease-in-out infinite; }
  @keyframes live{ 0%,100%{ box-shadow:0 0 0 3px rgba(14,159,85,.20) } 50%{ box-shadow:0 0 0 7px rgba(14,159,85,0) } }
}

/* hero sits on ink */
.desk.on-band{ color:#C6D2E5; margin-top:20px; }
.desk.on-band.open{ color:#FFFFFF; }

/* apply column — a status strip, not another paragraph */
#apply .desk{
  margin-top:18px; font-size:9.5px; letter-spacing:.11em; line-height:1.7;
  border-left:2px solid var(--rule); padding:2px 0 2px 12px;
}
#apply .desk.open{ border-left-color:var(--live); }
#apply .desk .dot{ margin-top:4px; }

.mast-desk{ font-size:10px; letter-spacing:.14em; }
@media (max-width:860px){ .mast-desk{ display:none; } }

.readbar{ position:absolute; left:0; right:0; bottom:-2px; height:2px; background:transparent; }
.readbar i{
  display:block; height:100%; width:100%; background:var(--volt);
  transform:scaleX(0); transform-origin:0 50%;
}

/* ---- product / step panels lift under the cursor ---- */

/* ---------- footer ---------- */
/* ---------- footer ---------- */

footer.foot{ background:var(--ink-2); color:#C6D2E4; position:relative; z-index:1; }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; padding:clamp(44px,5vw,64px) 0 40px; }
@media (max-width:760px){ .foot-top{ grid-template-columns:1fr; gap:30px; } }
.foot .brand{ color:#FFFFFF; }
.foot .brand-sub{ color:#93A6C2; }
.foot-top p{ color:#9FAFC6; font-size:14.5px; margin-top:16px; max-width:40ch; }
.foot-col h4{ font-family:var(--f-mono); font-weight:600; font-size:10px; letter-spacing:.2em; color:#7FA6FF; }
.foot-col ul{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px; }
.foot-col a, .foot-col li{ color:#B4C2D6; font-size:14.5px; }
.foot-col a:hover{ color:#FFFFFF; }
.foot-col .foot-phone{ font-family:var(--f-mono); font-size:15px; letter-spacing:.04em; color:#FFFFFF; }
.foot-col .foot-hours{ color:#8B9CB4; }
/* Reach us, then where we are, then what to do next — three groups rather
   than one run-on list where a two-line address reads as two entries. */
.foot-col address.foot-addr{ margin-top:18px; font-style:normal; }
.foot-col address.foot-addr a{ display:block; line-height:1.6; font-size:14.5px; }
.foot-actions{ margin-top:18px !important; padding-top:16px; border-top:1px solid rgba(255,255,255,.12); }
.legal{ border-top:1px solid rgba(255,255,255,.14); padding:28px 0 40px; }

/* ---------- mobile nav ---------- */

/* ---- mobile navigation ---- */
.nav-toggle{
  display:none; background:none; border:1px solid var(--rule-hi); cursor:pointer;
  width:46px; height:46px; align-items:center; justify-content:center; padding:0;
  clip-path:var(--notch);
}
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--ink); position:relative; transition:background .16s ease; }
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink);
  transition:transform .18s ease, top .18s ease;
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }
body.nav-open .nav-toggle span{ background:transparent; }
body.nav-open .nav-toggle span::before{ top:0; transform:rotate(45deg); }
body.nav-open .nav-toggle span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:1040px){
  .nav-toggle{ display:flex; }
  nav.mast-nav{
    display:block; position:absolute; left:0; right:0; top:100%;
    background:var(--card); border-bottom:2px solid var(--ink);
    padding:6px var(--gut) 14px; box-shadow:0 18px 30px rgba(8,13,23,.10);
  }
  nav.mast-nav[hidden]{ display:none; }
  nav.mast-nav a{
    display:block; padding:15px 0; font-size:13px; letter-spacing:.15em;
    border-bottom:1px solid var(--rule); color:var(--ink);
  }
  nav.mast-nav a:last-child{ border-bottom:0; }
}
@media (min-width:1041px){ nav.mast-nav[hidden]{ display:flex; } }

/* the Apply button crowds the toggle on the narrowest phones */
@media (max-width:400px){
  .mast .btn{ padding:12px 14px; font-size:11.5px; }
  .mast-right{ gap:10px; }
}

/* ---------- sr-only ---------- */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ============================================================
   RESOURCES — hub and article pages
   ============================================================ */

/* ---------- page head band ---------- */
.page-head{ padding:clamp(48px,7vw,86px) 0 clamp(40px,5vw,64px); }
.page-head h1{ font-size:clamp(36px,6.4vw,68px); letter-spacing:-.024em; margin-top:16px; max-width:20ch; }
.page-head .lede{ max-width:60ch; color:#C6D2E5; font-size:clamp(16px,1.6vw,19px); line-height:1.62; margin-top:22px; }

/* breadcrumb doubles as the way back on a page with no in-page nav */
.crumb{ font-family:var(--f-mono); font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; }
.crumb a{ color:#93A6C2; }
.crumb a:hover{ color:#FFFFFF; }
.crumb .sep{ color:#4E5F79; }

/* ---------- article cards on the hub ---------- */
.cards{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:820px){ .cards{ grid-template-columns:1fr; } }

a.card{
  display:flex; flex-direction:column; gap:0; color:var(--ink);
  padding:30px 30px 26px; transition:transform .18s ease, box-shadow .18s ease;
}
a.card:hover{ text-decoration:none; transform:translateY(-3px); box-shadow:0 14px 34px rgba(8,13,23,.09); }
a.card h2{ font-size:clamp(22px,2.5vw,29px); letter-spacing:-.015em; margin-top:14px; }
a.card p{ color:var(--slate); font-size:15.5px; margin-top:14px; }
a.card .more{
  margin-top:auto; padding-top:22px;
  font-family:var(--f-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--volt);
}
.card-meta{
  display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:16px;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint);
}

/* ---------- article body ----------
   One column, 68ch. Long-form on this palette needs a slightly
   larger body size than the marketing page uses. Past 1040px the
   measure would leave half the grid empty, so the spec rail moves
   up beside it rather than sitting at the foot of the page. */
.article{ padding:clamp(46px,6vw,74px) 0 clamp(56px,7vw,90px); }
.article-grid{ display:grid; grid-template-columns:1fr; gap:44px; }
/* A grid item defaults to min-width:auto, so the worked-example table's
   min-width pushed the whole column past the phone viewport. */
.article-grid > *{ min-width:0; }
@media (min-width:1040px){
  .article-grid{ grid-template-columns:minmax(0,1fr) 286px; gap:60px; align-items:start; }
  .rail{ position:sticky; top:96px; }
}
.article-body{ max-width:68ch; min-width:0; }

/* ---------- spec rail ---------- */
.rail .panel{ padding:24px 24px 22px; }
.rail h4{ font-size:17px; letter-spacing:-.005em; margin-top:12px; }
.rail dl{ margin:16px 0 0; display:grid; gap:0; }
.rail .row{
  display:flex; justify-content:space-between; gap:14px;
  padding:10px 0; border-bottom:1px solid var(--rule);
}
.rail .row:last-child{ border-bottom:0; }
.rail dt{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); padding-top:2px; }
.rail dd{ margin:0; font-size:14px; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }
.rail .rail-cta{ margin-top:18px; }
.rail .rail-cta .btn{ width:100%; justify-content:center; padding:14px 18px; font-size:12.5px; }
.rail .rail-note{ font-family:var(--f-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-top:12px; line-height:1.7; }
.rail .panel + .panel{ margin-top:18px; }
.article-body > * + *{ margin-top:22px; }
.article-body p{ font-size:17.5px; line-height:1.68; color:#1D2839; }
.article-body h2{
  font-size:clamp(24px,3.2vw,34px); letter-spacing:-.018em;
  margin-top:52px; padding-top:26px; border-top:1px solid var(--rule);
}
.article-body h3{ font-size:clamp(18px,2vw,21px); letter-spacing:-.008em; margin-top:36px; }
.article-body h2 + p, .article-body h3 + p{ margin-top:16px; }
.article-body strong,.article-body b{ font-weight:600; color:var(--ink); }
.article-body ul,.article-body ol{ margin:0; padding-left:22px; display:grid; gap:12px; }
.article-body li{ font-size:17px; line-height:1.62; color:#1D2839; }
.article-body li::marker{ color:var(--volt); }
.article-body a{ text-decoration:underline; text-underline-offset:2px; }

/* the lede paragraph carries the argument in one breath */
.article-body .stand{
  font-size:clamp(18.5px,2.1vw,22px); line-height:1.55; color:var(--ink);
  border-left:3px solid var(--volt); padding-left:20px; font-weight:500;
}

/* a number worth stopping on */
.pull{
  border-top:2px solid var(--ink); border-bottom:1px solid var(--rule);
  padding:22px 0 20px; margin-top:38px;
}
.pull .n{ font-family:var(--f-display); font-weight:700; font-size:clamp(34px,5vw,52px); line-height:1; letter-spacing:-.02em; }
.pull .t{ color:var(--slate); font-size:15.5px; margin-top:10px; max-width:52ch; }
.pull .src{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); margin-top:12px; }
.pull .src a{ color:var(--faint); }

/* the honest aside — where the cost gets stated out loud */
.aside{
  background:var(--volt-wash); border-left:3px solid var(--volt);
  padding:24px 26px 22px; margin-top:38px; clip-path:var(--notch);
}
.aside .code{ margin-bottom:10px; }
.aside p{ font-size:16px; }
.aside p + p{ margin-top:12px; }

/* worked-example table */
.tbl-scroll{ overflow-x:auto; margin-top:32px; -webkit-overflow-scrolling:touch; }
table.fig{ width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--rule); min-width:460px; }
table.fig th, table.fig td{ padding:13px 16px; text-align:left; border-bottom:1px solid var(--rule); font-size:15px; }
table.fig thead th{
  font-family:var(--f-mono); font-size:9.5px; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--slate); background:var(--wash);
}
table.fig tbody th{ font-weight:500; color:var(--slate); }
table.fig td{ font-variant-numeric:tabular-nums; }
table.fig td.us{ color:var(--ink); font-weight:600; background:rgba(27,77,228,.05); }
table.fig thead th.us{ color:var(--volt); }
table.fig tbody tr:last-child th, table.fig tbody tr:last-child td{ border-bottom:0; }
.fig-fine{ font-size:13px; color:var(--faint); line-height:1.65; margin-top:14px; max-width:70ch; }

/* end-of-article call to action */
.art-cta{
  margin-top:54px; padding:30px 30px 28px; background:var(--card);
  border:1px solid var(--rule); border-top:3px solid var(--volt);
}
.art-cta h3{ font-size:clamp(20px,2.4vw,26px); letter-spacing:-.012em; margin-top:10px; }
.art-cta p{ color:var(--slate); margin-top:12px; font-size:16px; max-width:56ch; }
.art-cta .row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:22px; }
.art-cta .note{ font-family:var(--f-mono); font-size:10.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--slate); }
@media (max-width:600px){ .art-cta .btn{ width:100%; justify-content:center; } }

/* next article */
.next-up{ margin-top:44px; padding-top:26px; border-top:1px solid var(--rule); }
.next-up a{ display:block; margin-top:10px; font-family:var(--f-display); font-weight:700; text-transform:uppercase; font-size:clamp(18px,2.2vw,24px); letter-spacing:-.01em; line-height:1.15; }

/* the standing legal note every article carries */
.art-legal{ margin-top:40px; padding-top:22px; border-top:1px solid var(--rule); }
.art-legal p{ font-size:12.5px; line-height:1.8; color:var(--faint); max-width:88ch; }
.art-legal p + p{ margin-top:12px; }

/* byline strip under the article title */
.byline{
  display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:22px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:#93A6C2;
}
.byline .sep{ color:#4E5F79; }