/* ============================================================================
   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. Derived from the brand navy (#1E2243 in the logo lockup),
     darkened in steps so hero and footer recede and cards sit above them
     without drop shadows. */
  --ink:#0B0F20;
  --ground:#151A33;
  --ground-2:#1E2243;      /* the logo ground exactly */
  --ground-3:#283058;

  --bone:#EEF4FF;
  --muted:#9AA8C8;
  --muted-dim:#8391B2;

  /* Accents from the brand: bright blue is the bar-chart/highlight colour,
     primary is the wordmark blue, deep is the cover blue. "brass" names are
     kept so the whole stylesheet does not have to be rewritten to reskin. */
  --brass:#48A8FC;
  --brass-lit:#7CC4FF;
  --brass-dim:#0060C0;
  --clay:#E2564A;

  --rule:rgba(238,244,255,.14);
  --rule-soft:rgba(238,244,255,.07);
  --glow:rgba(72,168,252,.12);

  --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}
}

/* ---------------------------------------------------------------------------
   FAQ accordion. Uses <details> so it works with JS disabled and is keyboard
   navigable for free — the browser gives us both. No custom disclosure widget.
   ------------------------------------------------------------------------- */
.faqlist{display:flex;flex-direction:column;gap:0}
details.faq{border-bottom:1px solid var(--rule);padding:1.35rem 0}
details.faq:first-of-type{border-top:1px solid var(--rule)}
details.faq summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:1rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary h3{margin:0;flex:1;font-size:1.06rem;transition:color .18s ease}
details.faq summary::after{
  content:"+";font-size:1.35rem;line-height:1;color:var(--accent);
  transition:transform .22s ease;flex:none;margin-top:-.1rem}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq:hover summary h3{color:var(--accent)}
details.faq > p{margin:.9rem 0 0;max-width:62ch;color:var(--ink-2)}
details.faq[open] > p{animation:faqin .28s ease both}
@keyframes faqin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  details.faq[open] > p{animation:none}
  details.faq summary::after{transition:none}
}

/* ---------------------------------------------------------------------------
   Hero atmosphere — built from the brand hexes, not a photograph.

   Four stock gradients were tried here and every one of them read as generic
   AI wallpaper: too purple, too neon, too obviously a desktop background. On a
   site whose whole posture is restraint, that costs more than it adds. These
   are radial washes in Oscar's own brand blues (#48A8FC bar-chart, #0060C0
   wordmark, #0042A4 cover), which cannot look like anyone else's site and
   weigh nothing.
   ------------------------------------------------------------------------- */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 48% at 78% 18%, rgba(72,168,252,.20) 0%, transparent 68%),
    radial-gradient(46% 40% at 96% 62%, rgba(0, 96,192,.20) 0%, transparent 70%),
    radial-gradient(70% 60% at 12% 96%, rgba(0, 66,164,.16) 0%, transparent 72%);
  animation:atmos 34s ease-in-out infinite alternate;
}
/* A hairline of brand blue where the hero meets the next band — the kind of
   detail that reads as considered rather than decorated. */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(72,168,252,.45),transparent);
}
@keyframes atmos{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(-2%,-1.5%,0) scale(1.06)}
}
@media (prefers-reduced-motion: reduce){ .hero::before{animation:none} }

/* The inline mark inherits colour rather than carrying a literal, so a palette
   change can never leave the logo behind — it did exactly that on the reskin. */
.mark svg{color:var(--brass)}

/* ---------------------------------------------------------------------------
   Image bands — duotoned into the brand.

   A stock photo dropped in raw always looks like a stock photo. Desaturating it
   and re-tinting it in the two brand blues does two things: it stops looking
   borrowed, and it stops competing with the type. The photo becomes texture and
   the words stay the loudest thing on the page, which is the whole posture of
   this site.

   Built as backgrounds rather than <img> because these are decorative — a
   screen reader gains nothing from "empty gray concrete stairs", and there is
   no layout shift while they load.
   ------------------------------------------------------------------------- */
.band-media{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(4rem,10vw,7.5rem);
}
.band-media::before{                       /* the photograph, desaturated */
  content:"";position:absolute;inset:-12% 0;z-index:-2;
  background-size:cover;background-position:center;
  filter:grayscale(1) contrast(1.15) brightness(.62);
  transform:scale(1.06);
  transition:transform 1.4s cubic-bezier(.22,.61,.36,1);
}
.band-media::after{                        /* the duotone + legibility wash */
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg, rgba(11,15,32,.86) 0%, rgba(30,34,67,.78) 55%, rgba(11,15,32,.90) 100%),
    linear-gradient(115deg, rgba(72,168,252,.30) 0%, rgba(0,66,164,.26) 100%);
  background-blend-mode:normal, screen;
}
.band-media.in::before{transform:scale(1)}          /* settles on reveal */
.band-media > *{position:relative;z-index:1}

.band-media--steps::before      {background-image:url("/assets/img/band-steps-1920.webp")}
.band-media--institution::before{background-image:url("/assets/img/band-institution-1920.webp")}
.band-media--documents::before  {background-image:url("/assets/img/band-documents-1920.webp")}

@media (max-width:760px){
  .band-media--steps::before      {background-image:url("/assets/img/band-steps-1280.webp")}
  .band-media--institution::before{background-image:url("/assets/img/band-institution-1280.webp")}
  .band-media--documents::before  {background-image:url("/assets/img/band-documents-1280.webp")}
}
@media (prefers-reduced-motion: reduce){
  .band-media::before{transition:none;transform:none}
}

/* A pull-quote sized statement is what these bands are for — one idea, large,
   with the photograph doing the emotional work behind it. */
.band-media .statement{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.7rem,4.2vw,3rem);line-height:1.14;letter-spacing:-.015em;
  text-wrap:balance;max-width:20ch;margin:0;
}
.band-media .statement em{font-style:normal;color:var(--brass)}
.band-media .statement + p{margin-top:1.2rem;max-width:52ch;color:var(--muted)}