/* =====================================================================
   TEMPLATE — capital-acquisition / FlexFund Capital Capital, the shared chrome.
   ---------------------------------------------------------------------
   Five pages hang off this file: index (the capital homepage), financing
   (working capital), buyer-form, seller-form and portal. It owns the
   tokens, the type, the header, the footer and the buttons; each page
   adds only what is its own.

   ⚠️ THE SKIN IN THIS FILE IS A REFERENCE, NOT A DEFAULT. The values you
   see (deep navy base, signal-red accent, condensed uppercase display
   face, square corners, disc CTA) are ONE prospect's design language,
   harvested off their live site. Shipping them to a different client is
   the definition of AI slop. Every :root token below, the masthead
   treatment, the headline two-tone rule, the button language and the two
   decorating motifs (.dots grid, offset solid block) must be re-derived
   from the NEW prospect's live site during the blend pass — see
   README.md §"The blend". The GRID, the motion system and the form
   plumbing are the template; the skin is not.

   Cache: linked as capital.css?v=N. Bump N when this file changes.
   ===================================================================== */

:root {
  /* -- SKIN: re-derived from flexfundinc.com, 2026-11-02 ----------------
     The .com is their current site (WordPress Twenty Twenty-Five, new
     in October) and it replaces the .ca's Astra look. It is three
     colours: ink #07111F for headlines, body and the one dark band,
     sky #55C2F6 for every button and the product names on that band,
     and #F5FAFF for the hero panel. White on the sky is 2.0:1, so their
     buttons carry the INK (9.4:1) and so do ours. Where the sky has to be
     read as text on white it goes down to #0B6E9E (5.6:1). */
  --base: #07111F;          /* their dark band, "Funding options for..." */
  --base-deep: #050C16;     /* footer and the hero under the photo */
  --base-lift: #13233A;
  --accent: #55C2F6;        /* "Apply Now", fill; "Talk to Us", 2px border */
  --accent-deep: #2FA9E4;   /* hover, still 7.1:1 under the ink */
  --accent-on-dark: #55C2F6;
  --spot: #0B6E9E;          /* numerals and small marks on white */

  --base-rgb: 7, 17, 31;
  --base-deep-rgb: 5, 12, 22;
  --accent-rgb: 85, 194, 246;

  /* Their header is white with ink type, and so is ours. Every element
     inside the bar is re-inked at the end of this file. */
  --masthead: #ffffff;

  /* Manrope and nothing else. Headlines at 400 with -0.1px tracking,
     body at 300 on their site; 400 here because the forms are read at
     length on small inputs. */
  --font-display: Manrope, "Helvetica Neue", Arial, sans-serif;
  --font-body: Manrope, "Helvetica Neue", Arial, sans-serif;

  --ink: #07111F;
  --body: #2E3846;
  --muted: #5E6875;
  --faint: #8C95A1;

  --canvas: #F5FAFF;         /* their hero panel */
  --paper: #ffffff;
  --line: #DCE7F2;
  --line-soft: rgba(var(--base-rgb), .1);
  --line-dark: rgba(255, 255, 255, .16);
  --on-dark: rgba(255, 255, 255, .76);

  --shell: min(1240px, 100%);
  --ease: cubic-bezier(.2, .8, .25, 1);
  --settle: cubic-bezier(.16, .84, .28, 1);

  --accent-ink: #07111F;
  --accent-text: #0B6E9E;    /* 5.6:1 on white */
  /* Every button on flexfundinc.com is a 999px pill; nothing else on the
     site has a corner worth naming. Cards keep a small radius. */
  --radius: 6px;
  --radius-sm: 4px;
  --pill: 999px;
  --ring-rgb: var(--accent-rgb);

  --lf-accent: #55C2F6;
  --lf-accent-dark: #2FA9E4;
  --lf-accent-text: #0B6E9E;
  --lf-accent-ink: #07111F;
  --lf-form-dark: #07111F;
  --lf-form-bg: #F5FAFF;
  --lf-form-border: #DCE7F2;
  --lf-font-heading: var(--font-body);
  --lf-font-body: var(--font-body);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--body);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }

::selection { background: rgba(var(--accent-rgb), .16); color: var(--base); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.on-dark :focus-visible, .cap-footer :focus-visible, .cap-head :focus-visible { outline-color: #fff; }

.shell { width: var(--shell); margin: 0 auto; padding-inline: clamp(20px, 4vw, 44px); }

/* ---------------------------------------------------------------------
   Type. --font-display gets the headlines and the big figures and
   nothing else; anything a person reads at length or types into stays
   --font-body. The uppercase transform and .92 line-height below assume
   a condensed display face — a brand whose headings are set in a normal
   face drops the transform and opens the leading during the blend.
   --------------------------------------------------------------------- */
.display,
.cap-h1, .cap-h2, .cap-h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -.6px;
}
.cap-h1 { font-size: clamp(38px, 4.6vw, 58px); }
.cap-h2 { font-size: clamp(28px, 3.1vw, 40px); }
.cap-h3 { font-size: clamp(21px, 2vw, 28px); }
/* No two-tone headline. Every heading on flexfundinc.com is set in ONE
   colour — white on the dark band, #07111F on white — so <em> only
   carries a little more weight, never a second colour. */
.cap-h1 em, .cap-h2 em, .cap-h3 em, .display em { font-style: normal; font-weight: 700; color: inherit; }
.on-dark .cap-h1, .on-dark .cap-h2, .on-dark .cap-h3 { color: #fff; }

.eyebrow {
  margin: 0 0 14px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.on-dark .eyebrow { color: rgba(255, 255, 255, .62); }

.lede { max-width: 56ch; font-size: 16.5px; line-height: 1.78; color: var(--body); }
.on-dark .lede { color: var(--on-dark); }

/* the hairline they draw under every section heading */
.rule { height: 1px; margin: 26px 0 0; background: var(--line); border: 0; }
.on-dark .rule { background: var(--line-dark); }

/* ---------------------------------------------------------------------
   Buttons. flexfundinc.com has two and uses them everywhere: "Apply Now",
   a sky pill with ink type at 700, and "Talk to Us", the same pill with a
   2px sky border and no fill. Sentence case, no tracking. On the dark
   band the outline one takes white type; the filled one does not change.
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 26px;
  border: 2px solid var(--accent);
  border-radius: var(--pill);
  background: transparent;
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn-solid, .btn-red { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-solid:hover, .btn-red:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-ghost:hover { background: var(--accent); color: var(--accent-ink); }
.on-dark .btn { color: #fff; }
.on-dark .btn-red, .on-dark .btn-solid { color: var(--accent-ink); }
.on-dark .btn-ghost:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* No disc. Nothing on flexfundinc.com is a circle except the pill on a
   button, so the chevron travels on its own. */
.arrow-link::after {
  content: "\203A";
  font-size: 17px;
  line-height: 1;
  color: var(--accent-text);
  transition: transform .2s var(--ease);
}
.btn-disc::after { content: none; }
.arrow-link:hover::after { transform: translateX(3px); }
.on-dark .arrow-link::after { color: var(--accent-on-dark); }

/* the inline "Read More ●" used inside cards and rows */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--base);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.on-dark .arrow-link { color: #fff; }

/* ---------------------------------------------------------------------
   Motif. flexfundinc.ca decorates with exactly one thing: a photograph
   under a wash that runs from near-black at the centre out to their
   blue — radial-gradient(#000, #4175FC) at half opacity, on every
   picture-backed band. .dots keeps its name and its markup so the pages
   do not have to change; what it paints is that wash.
   --------------------------------------------------------------------- */
.dots {
  position: absolute;
  background-image: radial-gradient(circle at 34% 32%, rgba(65, 117, 252, .34), rgba(11, 23, 51, 0) 70%);
  pointer-events: none;
}
.on-dark .dots { background-image: radial-gradient(circle at 34% 32%, rgba(65, 117, 252, .5), rgba(11, 23, 51, 0) 70%); }

/* ============================ masthead ============================ */
.cap-head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--masthead);
}
.cap-nav { min-height: 84px; display: flex; align-items: center; gap: 30px; }

/* The lockup. Two storeys: the wordmark, and the division under it —
   that is what tells a visitor they are on capital, not on flexfundinc.ca.
   The tracking on the second line is tuned to the width of the first. */
.lockup { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
/* holds the rail and the actions to the right at every burger breakpoint */
.cap-nav > .lockup { margin-right: auto; }
.lockup img { width: 34px; height: 34px; }
.lockup-name { display: grid; gap: 3px; line-height: 1; }
.lockup-name strong {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.5px;
  color: #fff;
}
.lockup-name strong i { font-style: normal; color: var(--accent); }
/* The divisional line is tracked out until its glyph run measures exactly
   as wide as the wordmark above it. MEASURE, don't guess: width of the
   wordmark at its final size, minus the natural width of "CAPITAL" (or
   whatever the division reads), divided by the inter-letter gaps. The
   negative margin cancels the trailing gap, which would otherwise push
   the run past the wordmark's right edge.
   ⚠️ These two numbers are tuned PER BRAND NAME — a 4-letter and a
   14-letter wordmark need completely different tracking. Retune them in
   every blend, and again if .lockup-name strong ever changes size. */
.lockup-name em {
  font-style: normal;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 9.77px;
  margin-right: -9.77px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
/* on the light surfaces — the portal bar, the footer of the forms */
.lockup-dark .lockup-name strong { color: var(--base); }
.lockup-dark .lockup-name em { color: var(--muted); }

.cap-links { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.cap-links a {
  position: relative;
  padding: 6px 0;
  color: rgba(255, 255, 255, .82);
  font-size: 13.2px;
  font-weight: 500;
  letter-spacing: .02em;
  transition: color .18s var(--ease);
}
.cap-links a:hover { color: #fff; }
/* the red underline on the current page — theirs, verbatim */
.cap-links a.active { color: var(--accent); }
.cap-links a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
}

.cap-actions { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.cap-login {
  color: rgba(255, 255, 255, .82);
  font-size: 13.2px;
  font-weight: 500;
}
.cap-login:hover { color: #fff; }
.cap-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 11px 30px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: var(--pill);
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.cap-cta:hover { background: #fff; border-color: #fff; color: var(--base-deep); }

.cap-burger { display: none; width: 42px; height: 42px; border: 0; background: transparent; cursor: pointer; }
.cap-burger span { display: block; width: 22px; height: 2px; margin: 5px auto; background: #fff; }

/* ============================ footer ============================ */
.cap-footer { background: var(--base); color: var(--on-dark); }

/* their newsletter strip: a full-bleed red band with the sign-up in it */
/* the contact strip: their #F5FAFF hero panel, ink type, the sky pill
   outline on the two contact links ("Talk to Us" is the same move) */
.cap-strip { background: var(--canvas); color: var(--ink); border-top: 1px solid var(--line); }
.cap-strip .shell {
  min-height: 132px;
  padding-block: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cap-strip .cap-h3 { color: var(--ink); }
.cap-strip-lede { margin: 6px 0 0; font-size: 15px; color: var(--body); }
.cap-strip-contact { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cap-strip-contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 22px;
  border: 2px solid var(--accent);
  border-radius: var(--pill);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}
.cap-strip-contact a:hover { background: var(--accent); color: var(--accent-ink); }

.cap-footer-main {
  padding: 68px 0 52px;
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 40px;
}
.cap-footer-brand p { max-width: 300px; margin: 18px 0 22px; font-size: 13.4px; line-height: 1.8; color: var(--on-dark); }
.cap-socials { display: flex; gap: 10px; }
/* the glyphs are <img>, so their colour is declared inside the file — an
   <img>-loaded SVG is its own document and cannot inherit currentColor here */
.cap-socials a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.cap-socials a:hover { background: var(--accent); border-color: var(--accent); }
.cap-socials img { width: 16px; height: 16px; }

.cap-footer-col h3 {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
}
.cap-footer-col a { display: block; margin-bottom: 10px; font-size: 13.4px; color: var(--on-dark); }
.cap-footer-col a:hover { color: #fff; }

.cap-footer-bottom {
  padding: 22px 0 30px;
  border-top: 1px solid var(--line-dark);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  font-size: 11.6px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .52);
}
.cap-footer-bottom p { max-width: 640px; margin: 0; }
.cap-footer-bottom a { color: rgba(255, 255, 255, .78); text-decoration: underline; text-underline-offset: 3px; }

/* ============================ responsive ============================ */
@media (max-width: 1080px) {
  .cap-links { gap: 20px; }
  .cap-links a { font-size: 12.6px; }
}
@media (max-width: 940px) {
  .cap-burger { display: block; }
  .cap-links {
    position: fixed;
    inset: 84px 0 auto;
    margin: 0;
    padding: 22px clamp(20px, 4vw, 44px) 30px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: var(--masthead);
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: none;
  }
  .cap-links.open { display: flex; }
  .cap-links a { width: 100%; padding: 12px 0; font-size: 15px; }
  .cap-links a.active::after { display: none; }
  .cap-login { display: none; }
  .cap-footer-main { grid-template-columns: 1fr 1fr; }
  .cap-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .cap-nav { min-height: 72px; }
  .cap-links { inset-block-start: 72px; }
  .cap-footer-main { grid-template-columns: 1fr; }
  .cap-footer-brand { grid-column: auto; }
  .cap-footer-bottom { flex-direction: column; }
  .cap-cta { padding: 9px 14px; }
}

/* =====================================================================
   Motion.
   ---------------------------------------------------------------------
   Un solo gesto en todo el sitio: 14px hacia arriba y un fundido. Se
   repite en cada sección, así que después de la primera el ojo ya sabe
   qué va a pasar — y esa previsibilidad ES la sensación de solidez.

   Nada entra desde fuera de la pantalla, nada escala desde cero, nada
   rebota. Las distancias son cortas a propósito: un elemento que viaja
   14px se lee como que estaba ahí y se acomodó; uno que viaja 80px se
   lee como que llegó corriendo.

   Duraciones: 680ms para entradas, 180ms para hover, 90ms para el
   press. Los 680 están muy por encima del rango habitual de web
   (150-200), y es deliberado: eso es feedback funcional, esto es
   contenido apareciendo. A 250ms el mismo movimiento se siente
   nervioso, y bajando de 500 con scroll lento ni se alcanza a ver.
   ===================================================================== */

/* El estado oculto vive bajo html.js, y esa clase la pone un script
   inline en el <head> antes del primer pintado. Sin JS no hay nada
   escondido: la página abre completa, sin movimiento. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  will-change: opacity, transform;
}
.js .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity .68s var(--settle) var(--d, 0ms),
              transform .68s var(--settle) var(--d, 0ms);
  will-change: auto;
}

/* La mitad de arriba no depende del JS: corre en un keyframe de CSS con
   fill-mode both. Si capital.js no existe, esto igual sucede. */
@keyframes cap-settle {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
/* `backwards`, NUNCA `both`.
   Con `both` el elemento se queda pegado al fotograma final de la
   animación, así que si la animación no llega a correr —una pestaña en
   segundo plano, un webview que congela el compositor— se queda en
   opacity 0 y la mitad de arriba de la página nunca aparece. Con
   `backwards` el estado en reposo es el del propio elemento, o sea
   visible, y la animación solo lo pisa mientras dura. */
.hero-inner > *,
.fin-hero-grid > *,
.doors,
/* El hero de los formularios: la columna de texto de un lado y la
   tarjeta del otro. Se le había escapado — usa .lf-hero-grid, no las
   clases de las páginas de marketing. */
.lf-hero-copy > *,
.lf-q,
.lf-apply-card {
  animation: cap-settle .62s var(--settle) backwards;
}
/* El titular es el ancla; lo demás lo sigue. Dos animaciones igual de
   fuertes se anulan — el ojo tiene que saber a dónde ir primero. */
.hero-inner > .cap-h1        { animation-delay: .04s; }
.hero-inner > .lede         { animation-delay: .16s; }
.hero-inner > .hero-points  { animation-delay: .26s; }
.fin-hero-grid > :last-child { animation-delay: .14s; }
.doors                       { animation-delay: .22s; }

/* En el formulario el ancla es el titular; la tarjeta llega después,
   que es el orden en que se lee la pantalla: primero qué es esto,
   después dónde empiezo. Una vez puesta, la tarjeta no se mueve más —
   ese sigue siendo el trato. */
.lf-hero-copy > h1            { animation-delay: .04s; }
.lf-hero-copy > p             { animation-delay: .14s; }
.lf-hero-copy > .lf-hero-points { animation-delay: .22s; }
.lf-q, .lf-apply-card         { animation-delay: .3s; }
/* Los tres puntos del hero entran uno detrás de otro. */
.lf-hero-points li { animation: cap-settle .5s var(--settle) backwards; }
.lf-hero-points li:nth-child(1) { animation-delay: .3s; }
.lf-hero-points li:nth-child(2) { animation-delay: .36s; }
.lf-hero-points li:nth-child(3) { animation-delay: .42s; }
/* La bifurcación Sell side / Buy side, con la tarjeta. */
.lf-fork { animation: cap-settle .5s var(--settle) backwards .36s; }

/* El bloque sólido detrás de la foto entra después de la foto, corrido
   unos pixeles: se lee como que se acomodó detrás, no como que apareció. */
.figure::after, .fin-hero-figure::after {
  animation: cap-block .68s var(--settle) backwards .3s;
}
@keyframes cap-block {
  from { opacity: 0; transform: translate(10px, 10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   Feedback. Corto, y siempre sobre una propiedad que el compositor
   puede mover solo — nunca sobre width, height, top o left.
   --------------------------------------------------------------------- */

/* La tarjeta reconoce el cursor con un filo rojo que se dibuja desde la
   izquierda. Es el mismo rojo del subrayado del nav: una sola idea. */
.door, .card, .product { position: relative; }
.door::before, .card::before, .product::before {
  content: "";
  position: absolute;
  inset: -1px auto auto -1px;
  width: calc(100% + 2px);
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .24s var(--ease);
}
.door:hover::before, .card:hover::before, .product:hover::before { transform: scaleX(1); }
.card.accent::before { background: var(--ink); }

/* Los enlaces del nav estrenan el mismo subrayado que marca la página
   actual, en vez de solo cambiar de color. */
.cap-links a:not(.active)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s var(--ease);
}
.cap-links a:not(.active):hover::after { transform: scaleX(1); }

/* Press. 90ms y un 1.5% — no se ve, se siente, y es lo que separa un
   botón que responde de uno que solo cambia de color. */
.btn, .cap-cta, .arrow-link { transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .09s var(--ease); }
.btn:active, .cap-cta:active { transform: scale(.985); }

/* El disco ya se corría al hover; que también acuse el click. */
.btn-disc:active::after, .arrow-link:active::after { transform: translateX(1px) scale(.94); }

/* Los numerales grandes de los pasos se tiñen al pasar por la fila
   entera, no solo por el número. */
.steps li b { transition: color .22s var(--ease); }

/* ---------------------------------------------------------------------
   Y si el sistema pidió menos movimiento, no hay ninguno. capital.js
   además se apaga solo y quita la clase js, así que nada queda oculto.
   --------------------------------------------------------------------- */
/* Y la red: capital.js pone esta clase a los 3 segundos pase lo que pase.
   Un compositor congelado deja de importar — la animación se retira y cada
   elemento vuelve a su estado propio, que es visible. */
.cap-settled .hero-inner > *,
.cap-settled .fin-hero-grid > *,
.cap-settled .doors,
.cap-settled .lf-hero-copy > *,
.cap-settled .lf-hero-points li,
.cap-settled .lf-fork,
.cap-settled .lf-q,
.cap-settled .lf-apply-card,
.cap-settled .figure::after,
.cap-settled .fin-hero-figure::after { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .hero-inner > *, .fin-hero-grid > *, .doors,
  .lf-hero-copy > *, .lf-hero-points li, .lf-fork, .lf-q, .lf-apply-card,
  .figure::after, .fin-hero-figure::after { animation: none; }
  .btn:active, .cap-cta:active { transform: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* =====================================================================
   Segunda capa: los sitios donde la página responde a la persona.
   ---------------------------------------------------------------------
   La primera capa era contenido apareciendo. Esta es la interfaz
   acusando recibo — y es la que hace que un formulario de cinco pasos
   no se sienta un trámite.

   La regla que sigue en pie: nada se mueve MIENTRAS alguien escribe.
   Lo que se mueve es el cambio de paso, el foco, el error y la cifra
   que se recalcula. Los campos, quietos.
   ===================================================================== */

/* ---- el titular llega en dos tiempos --------------------------------
   El titular a dos tonos es la firma de la marca, así que se anima como
   tal: primero asienta la parte navy, y el rojo entra después. El ojo
   lee la frase y recibe el remate. */
@keyframes cap-fade { from { opacity: 0; } to { opacity: 1; } }
.hero .cap-h1 em,
.fin-hero .cap-h1 em { animation: cap-fade .5s linear backwards .34s; }
.js .reveal .cap-h2 em,
.js .reveal .lf-section-head h2 em { opacity: 0; }
.js .reveal.in .cap-h2 em,
.js .reveal.in .lf-section-head h2 em { opacity: 1; transition: opacity .45s linear calc(var(--d, 0ms) + .26s); }

/* ---- la foto del hero respira ----------------------------------------
   24s, imperceptible por diseño. No se ve moverse; se nota que no está
   muerta. El estado inicial es un scale, no una opacidad, así que un
   compositor congelado no esconde nada. */
@keyframes cap-drift { from { transform: scale(1.05); } to { transform: scale(1); } }
.hero::before, .fin-hero::before { animation: cap-drift 24s ease-out both; }

/* =====================================================================
   Los formularios
   ===================================================================== */

/* ---- cambio de paso --------------------------------------------------
   El paso entrante viene del lado hacia el que vas: adelante entra por
   la derecha, Atrás por la izquierda. Es la señal más barata de "dónde
   estoy" en un flujo de cinco pantallas. 18px, no 60: es una pista de
   dirección, no un carrusel. */
@keyframes lf-step-fwd  { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes lf-step-back { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.lf-fin .lf-step.now { animation: lf-step-fwd .38s var(--settle) backwards; }
[data-dir="back"] .lf-fin .lf-step.now,
.lf-fin [data-dir="back"] .lf-step.now { animation-name: lf-step-back; }
.lf-apply-card[data-dir="back"] .lf-step.now { animation-name: lf-step-back; }

/* ---- el riel de progreso se llena ------------------------------------
   El borde de arriba deja de cambiar de color y pasa a LLENARSE de
   izquierda a derecha. Un tramo que se pinta se lee como avance; uno
   que cambia de color, como un estado. */
.lf-fin .lf-progress li { position: relative; }
.lf-fin .lf-progress li::after {
  content: "";
  position: absolute;
  top: -3px; left: 0; right: 0;
  height: 3px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .42s var(--settle);
}
.lf-fin .lf-progress li.now::after,
.lf-fin .lf-progress li.done::after { transform: scaleX(1); }
.lf-fin .lf-progress li.done::after { background: var(--teal); }

/* ---- foco -------------------------------------------------------------
   ⚠️ Trampa histórica: en un port anterior este anillo llegó con el rgba
   del acento de OTRA marca escrito a mano y sobrevivió dos revisiones.
   Por eso ahora deriva de --accent-rgb y nunca se escribe literal. */
.lf-fin .lf-input:focus, .lf-fin .lf-select:focus, .lf-fin textarea:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .13) !important;
}

/* ---- error ------------------------------------------------------------
   El mensaje baja en lugar de aparecer de golpe, y el campo da un
   desplazamiento corto. El movimiento acá está motivado: algo fue
   rechazado. 3px y dos ciclos — suficiente para notarlo, no tanto como
   para regañar. */
@keyframes lf-drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.lf-fin .lf-err:not(:empty) { animation: lf-drop .26s var(--ease) backwards; }
@keyframes lf-refuse {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}
.lf-fin .lf-input.is-err, .lf-fin .lf-select.is-err { animation: lf-refuse .22s var(--ease); }

/* ---- documentos -------------------------------------------------------
   Cada archivo adjunto entra por su cuenta, y la sección marca el check
   con un trazo, no con un cambio de color. */
@keyframes lf-file-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.lf-fin .lf-uplist li { animation: lf-file-in .3s var(--settle) backwards; }
.lf-fin .lf-doc { transition: border-color .3s var(--ease), background .3s var(--ease); }

/* ---- la pantalla final -------------------------------------------------
   El único momento con permiso para celebrar, y aun así con mesura: el
   disco entra una vez y se queda. */
@keyframes lf-seal { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
.lf-fin .lf-done-mark { animation: lf-seal .5s var(--settle) backwards .06s; }

/* ---- la cifra que se recalcula ----------------------------------------
   capital.js la hace rodar hasta el valor nuevo en vez de cambiarla de
   golpe. Es el momento en que el formulario demuestra que está
   trabajando para vos, así que se le da el tiempo de verse. */
.lf-fin #calcOut, .stat b { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .lf-fin .lf-step.now, .lf-fin .lf-err:not(:empty), .lf-fin .lf-input.is-err,
  .lf-fin .lf-uplist li, .lf-fin .lf-done-mark,
  .hero::before, .fin-hero::before,
  .hero .cap-h1 em, .fin-hero .cap-h1 em { animation: none; }
  .js .reveal .cap-h2 em, .js .reveal .lf-section-head h2 em { opacity: 1; }
}


/* ---------------------------------------------------------------------
   The rail has to survive five doors plus the site link. It never fit
   between the burger breakpoint and ~1290px, and QA at exactly 1280 is
   the one width that hides the band.
   --------------------------------------------------------------------- */
.cap-links a { white-space: nowrap; }
@media (max-width: 1360px) { .cap-links { gap: 18px; } .cap-links a { font-size: 12.2px; } }
@media (max-width: 1240px) { .cap-links { gap: 13px; } .cap-links a { font-size: 11.4px; letter-spacing: .03em; } .cap-links a[target="_blank"] { display: none; } }

/* The mark is 454x351, so a 34x34 slot squashes it. */
.lockup img { width: 38px; height: auto; }

/* =====================================================================
   White masthead (flexfundinc.com). The rules above ink the bar for a
   dark one; this block re-inks every element inside it: nav, hover,
   active, login, CTA, burger, the open menu, and the lockup. The footer
   stays on the dark band and keeps the white lockup.
   ===================================================================== */
.cap-head { border-bottom: 1px solid var(--line); }
.cap-links a { color: var(--body); font-weight: 500; }
.cap-links a:hover { color: var(--ink); }
.cap-links a.active { color: var(--ink); }
.cap-login { color: var(--body); }
.cap-login:hover { color: var(--ink); }
.cap-cta {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.cap-cta:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--accent-ink); }
.cap-burger span { background: var(--ink); }
.cap-head .lockup-name strong { color: var(--ink); }
.cap-head .lockup-name em { color: var(--muted); }
@media (max-width: 940px) {
  .cap-links { border-top: 1px solid var(--line); box-shadow: 0 18px 30px -24px rgba(var(--base-rgb), .4); }
}