/* ============================================================================
   Credit Step By Step — design system
   ----------------------------------------------------------------------------
   Palette, type and the staircase come from BRAND.md and do not change. They
   were chosen to avoid the three defaults this category reaches for: the
   fintech purple-to-blue gradient, bank navy, and the red-to-green score meter.

   What is new here is depth, a wider type scale, and motion that explains
   rather than decorates. The target is an instrument a business owner can read
   at a glance, not a brochure.

   No build step, no dependencies. Modern CSS degrades on its own: scroll-driven
   animation, view transitions and container queries all fall back to static
   layout in browsers that lack them.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens -- */
:root{
  /* Ground plane. ink is deeper than BRAND's ground so hero and footer can
     recede and cards can sit above them without resorting to drop shadows. */
  --ink:#08110F;
  --ground:#10201D;
  --ground-2:#172C28;
  --ground-3:#1E3833;

  --bone:#EDE8DC;
  --muted:#8AA098;
  --muted-dim:#7C918A;

  --brass:#C9A227;
  --brass-lit:#DBB432;
  --brass-dim:#8C711C;
  --clay:#B4553F;

  --rule:rgba(237,232,220,.14);
  --rule-soft:rgba(237,232,220,.07);
  --glow:rgba(201,162,39,.10);

  --display:"Fraunces",Georgia,serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  /* 4px base, the same rhythm Mercury uses. Everything is a multiple. */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;
  --s6:1.5rem; --s8:2rem;   --s12:3rem;  --s16:4rem;

  --pad:clamp(1.25rem,5vw,4rem);
  --maxw:1180px;
  --measure:62ch;

  --r-sm:3px;
  --r-md:10px;
  --r-lg:18px;
  --r-pill:999px;

  --ease:cubic-bezier(.22,.68,.3,1);
}

/* ---------------------------------------------------------------- reset --- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ground);
  color:var(--bone);
  font-family:var(--body);
  font-size:clamp(1rem,.95rem + .25vw,1.125rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--display);font-weight:600;line-height:1.04;
  margin:0;letter-spacing:-.02em;text-wrap:balance;
}
p{margin:0;text-wrap:pretty}
a{color:inherit}
img,svg{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0;list-style:none}

/* A single long word or a wide child inside grid/flex can push the page wider
   than the viewport, because those children default to min-width:auto. */
.wrap > *,.grid > *,.split > *,.stack > *{min-width:0}

/* ---------------------------------------------------------------- layout -- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap-narrow{max-width:820px;margin-inline:auto;padding-inline:var(--pad)}
.band{padding-block:clamp(3.5rem,9vw,7rem);position:relative}
.band + .band{border-top:1px solid var(--rule)}
.band-sunk{background:var(--ink)}
.band-raised{background:var(--ground-2)}

.split{display:grid;gap:clamp(2.5rem,6vw,4.5rem);grid-template-columns:1fr;align-items:center}
@media(min-width:960px){ .split{grid-template-columns:1.05fr .95fr} }

.grid{display:grid;gap:clamp(1.25rem,2.5vw,2rem);grid-template-columns:1fr}
@media(min-width:700px){ .grid-2{grid-template-columns:repeat(2,1fr)} }
@media(min-width:820px){ .grid-3{grid-template-columns:repeat(3,1fr)} }

.stack{display:grid;gap:var(--s4)}
.stack-lg{display:grid;gap:var(--s8)}

/* ------------------------------------------------------------- typography - */
.eyebrow{
  font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brass);
  display:inline-flex;align-items:center;gap:var(--s2);
}
.eyebrow::before{
  content:"";width:1.5rem;height:1px;background:var(--brass);opacity:.6;
}
h1,.h1{font-size:clamp(2.5rem,1.2rem + 5.6vw,4.75rem)}
h2,.h2{font-size:clamp(1.9rem,1.25rem + 2.6vw,3.1rem)}
h3,.h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);letter-spacing:-.01em}
.lede{
  color:var(--muted);font-size:clamp(1.0625rem,1rem + .45vw,1.3125rem);
  max-width:48ch;line-height:1.55;
}
.prose{color:var(--muted);max-width:var(--measure)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.accent{color:var(--brass);font-style:normal}

/* ----------------------------------------------------------------- links -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  background:var(--brass);color:#141310;
  font-family:var(--body);font-weight:600;font-size:1rem;line-height:1;
  padding:1.0625rem 1.75rem;border-radius:var(--r-pill);
  text-decoration:none;border:1px solid transparent;
  transition:background .2s var(--ease),transform .2s var(--ease);
  will-change:transform;
}
.btn:hover{background:var(--brass-lit);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-ghost{
  background:transparent;color:var(--bone);border-color:var(--rule);
}
.btn-ghost:hover{background:var(--ground-3);border-color:var(--brass);transform:translateY(-2px)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4)}
.cta-note{font-family:var(--mono);font-size:.8125rem;color:var(--muted)}

.link-quiet{
  color:var(--bone);text-decoration:none;
  border-bottom:1px solid var(--brass);padding-bottom:1px;
  transition:color .18s var(--ease);
}
.link-quiet:hover{color:var(--brass)}

/* --------------------------------------------------------------- surfaces - */
.card{
  background:var(--ground-2);border:1px solid var(--rule);
  border-radius:var(--r-md);padding:clamp(1.35rem,2.5vw,1.9rem);
  position:relative;overflow:hidden;
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
/* Depth without shadows: a hairline of brass light along the top edge, the way
   a raised metal surface catches light. */
.card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--glow) 30%,var(--glow) 70%,transparent);
}
.card:hover{border-color:rgba(201,162,39,.32);transform:translateY(-3px)}
.card h3{margin-bottom:var(--s2)}
.card p{color:var(--muted);font-size:.9375rem}

/* --------------------------------------------------------------- masthead - */
.masthead{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--rule);
  background:color-mix(in srgb,var(--ground) 86%,transparent);
  backdrop-filter:blur(12px) saturate(140%);
}
.masthead .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);padding-block:.85rem;
}
.mark{
  display:inline-flex;align-items:center;gap:var(--s3);
  text-decoration:none;font-family:var(--display);font-weight:700;
  font-size:1.0625rem;letter-spacing:-.015em;white-space:nowrap;
}
.mark svg{width:22px;height:22px;flex:none}
.mark small{
  font-family:var(--mono);font-size:.625rem;font-weight:400;
  color:var(--brass);letter-spacing:.16em;
}
.nav{display:flex;align-items:center;gap:clamp(.75rem,2vw,1.75rem)}
.nav a{
  font-size:.9375rem;color:var(--muted);text-decoration:none;
  transition:color .18s var(--ease);white-space:nowrap;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--bone)}
.nav a[aria-current="page"]{color:var(--brass)}
/* The masthead is the one row that has to fit a wordmark and four links on a
   375px phone. Shed the least useful parts as space runs out, in order:
   the secondary nav item, then the CSBS tag, then the wordmark text. */
@media(max-width:760px){
  .nav .nav-hide{display:none}
  .nav{gap:1rem}
}
@media(max-width:520px){
  .mark small{display:none}
  .nav{gap:.85rem}
  .nav a{font-size:.875rem}
  .masthead .wrap{gap:.75rem}
}
@media(max-width:400px){
  .mark{font-size:0;gap:0}          /* icon only, text hidden without hiding the link */
  .mark svg{width:26px;height:26px}
}

/* ----------------------------------------------------------------- hero --- */
.hero{
  padding-block:clamp(3.5rem,9vw,7rem) clamp(3rem,7vw,5.5rem);
  position:relative;overflow:hidden;
}
/* A slow brass wash behind the hero. Static gradient, no animation cost. */
.hero::before{
  content:"";position:absolute;inset:-40% -20% auto -20%;height:120%;
  background:radial-gradient(ellipse at 30% 0%,rgba(201,162,39,.10),transparent 62%);
  pointer-events:none;
}
.hero .wrap{position:relative}

/* --------------------------------------------------- the lender staircase - */
.stair{
  background:var(--ground-2);border:1px solid var(--rule);
  border-radius:var(--r-md);padding:clamp(1.25rem,2.6vw,1.9rem);
  position:relative;overflow:hidden;
}
.stair::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--glow),transparent);
}
.stair-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  padding-bottom:var(--s3);margin-bottom:var(--s2);border-bottom:1px solid var(--rule);
}
.stair-head span{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.steps{display:flex;flex-direction:column-reverse}
.step{
  display:grid;grid-template-columns:5.5rem 1fr;align-items:baseline;
  gap:var(--s1) var(--s3);padding-block:.72rem;
  border-bottom:1px solid var(--rule-soft);
}
.step:first-child{border-bottom:none}
.step .k{
  font-family:var(--mono);font-size:.9375rem;font-weight:500;
  text-align:right;white-space:nowrap;letter-spacing:-.02em;
}
.step .label{display:block;font-size:.875rem;margin-bottom:.4rem}
.step .track{
  display:block;height:6px;border-radius:var(--r-pill);
  background:rgba(237,232,220,.08);overflow:hidden;
}
.step .fill{
  display:block;height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--brass-dim),var(--brass));
  width:var(--w);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease);
}
.stair.lit .fill{transform:scaleX(1)}
.step:nth-child(1) .fill{transition-delay:.30s}
.step:nth-child(2) .fill{transition-delay:.24s}
.step:nth-child(3) .fill{transition-delay:.18s}
.step:nth-child(4) .fill{transition-delay:.12s}
.step:nth-child(5) .fill{transition-delay:.06s}
.step.below .fill{background:linear-gradient(90deg,#6E3626,var(--clay))}
.step.below .k{color:var(--clay)}
.stair-foot{
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--rule);
  font-size:.8125rem;color:var(--muted);
}

/* ------------------------------------------------------- numbered process - */
.flow li{
  display:grid;grid-template-columns:3.25rem 1fr;gap:var(--s6);
  padding-block:1.5rem;border-top:1px solid var(--rule);align-items:start;
}
.flow li:last-child{border-bottom:1px solid var(--rule)}
.flow .n{
  font-family:var(--mono);font-size:.8125rem;color:var(--brass);
  letter-spacing:.1em;padding-top:.3rem;
}
.flow h3{margin-bottom:var(--s2)}
.flow p{color:var(--muted);font-size:.9375rem;max-width:60ch}

/* ------------------------------------------------------------ limit list -- */
.limits li{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s4);
  padding-block:1.25rem;border-top:1px solid var(--rule);align-items:start;
}
.limits li:last-child{border-bottom:1px solid var(--rule)}
.limits .x{
  font-family:var(--mono);color:var(--clay);font-size:1rem;
  line-height:1.5;user-select:none;
}
.limits strong{font-weight:600;display:block;margin-bottom:.2rem}
.limits .why{color:var(--muted);font-size:.9375rem}

/* --------------------------------------------------------------- footer --- */
footer{
  border-top:1px solid var(--rule);background:var(--ink);
  padding-block:clamp(2.5rem,5vw,3.5rem);
}
.foot-grid{
  display:grid;gap:var(--s8);grid-template-columns:1fr;
  font-size:.875rem;color:var(--muted);
}
@media(min-width:760px){ .foot-grid{grid-template-columns:1.6fr 1fr 1fr} }
.foot-head{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:500;
  margin-bottom:var(--s3);
}
.foot-grid a{color:var(--muted);text-decoration:none;transition:color .18s var(--ease)}
.foot-grid a:hover{color:var(--bone)}
.foot-links li{padding-block:.3rem}
.foot-legal{
  margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--rule-soft);
  font-family:var(--mono);font-size:.75rem;color:var(--muted-dim);line-height:1.8;
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s8);justify-content:space-between;
}
.foot-legal p{max-width:68ch}

/* --------------------------------------------------- accessibility, motion - */
a:focus-visible,.btn:focus-visible,button:focus-visible{
  outline:2px solid var(--brass);outline-offset:3px;border-radius:var(--r-sm);
}
.skip{
  position:absolute;top:0;left:0;z-index:100;
  background:var(--brass);color:#141310;font-weight:600;text-decoration:none;
  padding:var(--s3) var(--s4);border-radius:0 0 var(--r-sm) 0;
  transform:translateY(-120%);transition:transform .15s var(--ease);
}
.skip:focus{transform:translateY(0)}
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Reveal on scroll.
   ---------------------------------------------------------------------------
   Content is VISIBLE BY DEFAULT. It is only hidden once motion.js has added
   .js-motion, which it does synchronously and only when it knows it can
   animate it back. If the script fails, never loads, or is blocked, every
   section still renders.

   An earlier version had opacity:0 in the base rule plus a scroll-driven
   `animation-range`. Anything outside that range stayed at opacity 0, so the
   page rendered with the hero visible and everything below it blank. A
   marketing site that renders empty is worse than one with no animation, so
   the default state is now "shown" and motion is the enhancement. */
.reveal{opacity:1;transform:none}
html.js-motion .reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .65s var(--ease),transform .65s var(--ease);
}
html.js-motion .reveal.in{opacity:1;transform:none}

/* Cross-document view transitions: pages feel like one surface, not reloads. */
@view-transition{ navigation:auto }

/* Two ways to stop motion: the OS setting, and the toggle in the footer.
   The 2026 accessibility expectation is an explicit control, not only the
   media query, because plenty of people never find the OS setting. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .stair .fill{transform:scaleX(1)}
}
html.no-motion{scroll-behavior:auto}
html.no-motion *,html.no-motion *::before,html.no-motion *::after{
  animation:none!important;transition:none!important;
}
html.no-motion .reveal{opacity:1;transform:none}
html.no-motion .stair .fill{transform:scaleX(1)}

.motion-toggle{
  background:none;border:1px solid var(--rule);color:var(--muted);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.45rem .8rem;border-radius:var(--r-pill);
  cursor:pointer;transition:color .18s var(--ease),border-color .18s var(--ease);
}
.motion-toggle:hover{color:var(--bone);border-color:var(--brass)}

@media print{
  .masthead,.motion-toggle,.hero::before{display:none}
  body{background:#fff;color:#000}
}