/* =====================================================================
   TEMPLATE — capital-acquisition / Astra Capital, the shared chrome.
   ---------------------------------------------------------------------
   Five pages hang off this file: index (the capital homepage), financing
   (working capital), the application forms 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 LENDFLOW'S OWN, AND IT IS A DEFAULT, NOT AN
   ANSWER. Every prospect's blend still re-derives the whole :root block
   from THEIR live site — see README.md §"The blend". What changed in
   2026-09-15 is which skin sits here while that has not happened yet.

   The old default was one prospect's design language (deep navy, signal
   red, condensed uppercase display face, square corners, disc CTA) and
   shipping it to a different brand was the definition of AI slop, which
   is why `audit` warned when it survived. A skin that nobody may ship is
   a bad default. Lendflow's is ours, it is neutral, and a page that
   reaches a prospect still wearing it reads as made by Lendflow rather
   than as made for somebody else.

   Every value below was counted on the live lendflow.com stylesheet on
   2026-09-15 (#04fe72 ×12, #272a40 ×17, #02af58 ×17, #676e75 ×29,
   #f1f6fd ×58, the card shadow and the button ring verbatim), which is
   the same standard the blend is held to.

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

:root {
  /* -- ASTRA SKIN (astraleia.com :root, read 2026-09-30) -------------- */
  --base: #0E1B18;          /* their --ground */
  --base-deep: #07110E;     /* --ground-3 */
  --base-lift: #1B2F29;     /* --panel-2 */
  --accent: #D8A54A;        /* --gold-2: the gold as a shape and as display ink */
  --accent-deep: #B88B35;   /* --gold */
  --accent-on-dark: #D8A54A; /* 7.9:1 on the ground */
  --spot: #E9C161;          /* --gold-3 */

  --base-rgb: 14, 27, 24;
  --base-deep-rgb: 7, 17, 14;
  --accent-rgb: 216, 165, 74;

  /* their header: a near-opaque glass of --ground-2 with cream ink, hairline in --line */
  --masthead: rgba(10, 21, 18, .94);
  --masthead-ink: #F2EAD7;
  --masthead-ink-soft: #C9D4C6;   /* their nav link colour */
  --masthead-line: rgba(242, 234, 215, .10);
  --strip-bg: #0A1512;            /* --ground-2, between the final band (--panel) and the footer (--ground-3) */
  --strip-ink: #F2EAD7;

  --font-display: Marcellus, Georgia, "Times New Roman", serif;
  --font-body: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ink: #F2EAD7;           /* 14.9:1 on the ground */
  --body: #C9D4C6;          /* --ink-2, 11.6:1 */
  --muted: #A6B4A7;         /* --ink-3, 8.0:1 */
  --faint: #8C9C91;         /* --ink-4 */

  --canvas: #0A1512;        /* --ground-2: the alternate band */
  --paper: #0E1B18;
  --line: rgba(242, 234, 215, .10);
  --line-soft: rgba(242, 234, 215, .10);
  --line-dark: rgba(242, 234, 215, .18);
  --on-dark: #C9D4C6;

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

  --accent-ink: #2E1D02;    /* their --cta-ink, on the gold */
  --accent-text: #D8A54A;   /* holds 7.9:1 on the ground, so it may carry small type too */
  --radius: 28px;           /* their glass cards */
  --radius-sm: 10px;        /* --r-s */
  --pill: 999px;            /* every button and nav chip on their site */
  --ring-rgb: 216, 165, 74;

  --shadow-card: 0 30px 80px rgba(0, 0, 0, .45), 0 2px 0 rgba(242, 234, 215, .03);
  --card-border: 1px solid rgba(242, 234, 215, .10);

  --lf-accent: #D8A54A;
  --lf-accent-dark: #B88B35;
  --lf-accent-text: #D8A54A;
  --lf-accent-ink: #2E1D02;
  --lf-form-dark: #0E1B18;
  --lf-form-bg: #0A1512;
  --lf-form-border: rgba(242, 234, 215, .18);
  --lf-font-heading: var(--font-body);
  --lf-font-body: var(--font-body);

  /* theirs, verbatim: the CTA gradient and the gold "shim" inside a headline */
  --cta: linear-gradient(160deg, #E9C161 0%, #B07E2E 52%, #B07E2E 62%, #E9C161 100%);
  --cta-shadow: 0 12px 34px rgba(184, 139, 53, .28), inset 0 1px 0 rgba(255, 255, 255, .35);
  --shim-gold: linear-gradient(100deg, #C9973F 0%, #E2B457 38%, #FFF0C8 50%, #E2B457 62%, #C9973F 100%);
  --glass: rgba(16, 30, 26, .62);
}

* { 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(--ring-rgb), .16); color: var(--base); }
:focus-visible { outline: 2px solid var(--accent-text); 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.

   Lendflow sets headings in DM Sans 600 at a tight negative track and a
   line-height just over 1. No uppercase transform anywhere: the caps
   belong to the old condensed default, and on a normal-width face they
   read as shouting. A brand whose display face IS condensed puts the
   transform back during the blend, and opens the tracking with it.
   --------------------------------------------------------------------- */
.display,
.cap-h1, .cap-h2, .cap-h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}
.cap-h1 { font-size: clamp(42px, 5.2vw, 68px); line-height: 1.06; letter-spacing: -.07em; }
.cap-h2 { font-size: clamp(32px, 3.8vw, 48px); line-height: 1.12; letter-spacing: -.042em; }
.cap-h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.18; letter-spacing: -.02em; }

/* The two-tone headline, both ways round.
   On the dark band the second half TURNS GREEN: #04fe72 holds 10.3:1 on
   the navy, which is more than the white beside it.
   On light it cannot — the same green is 1.4:1 on white and would erase
   the words. So the ink stays put and the green is DRAWN, as a stroke
   behind the glyphs. Lendflow does this with a PNG underline; drawn as a
   gradient it survives a line break, which the PNG does not.
   box-decoration-break: clone is what repeats it on the second line. */
.cap-h1 em, .cap-h2 em, .cap-h3 em, .display em {
  font-style: normal;
  color: inherit;
  /* A DRAWN MARK, not text-decoration. Two tapered strokes, pointed at both
     ends and crossing near the right, the way somebody would run a marker
     under the words that matter. A constant-width rectangle is what makes a
     "brand underline" read as a browser default instead of as a mark.

     inline + clone, not inline-block: on a narrow screen these phrases wrap,
     and a cloned inline gives every line fragment its own stroke instead of
     one stroke under the block with the first line left bare.

     The ink lives in the BOTTOM of a 26-tall viewBox and the rest is
     headroom. `left bottom` anchors the box at the padding edge and the box
     grows UP, so a box tall enough to read is a box that cuts through the
     glyphs unless most of it is empty. The padding is what carries the whole
     mark clear of the descenders. */
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: .3em;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2026'%20preserveAspectRatio='none'%20fill='%231b2f29'%3E%3Cpath%20d='M0.9%2022.7%20C24%2017.5%2058%2014.9%2099.1%2014.3%20C58%2018.3%2024%2021.2%200.9%2022.7%20Z'/%3E%3Cpath%20d='M0.4%2025.2%20C18%2022.63%2046%2021.33%2071%2021.53%20C46%2024.17%2018%2025.37%200.4%2025.2%20Z'%20opacity='.9'/%3E%3C/svg%3E");
  background-size: 100% .9em;
  background-position: left bottom;
  background-repeat: no-repeat;
}
.on-dark .cap-h1, .on-dark .cap-h2, .on-dark .cap-h3 { color: #fff; }
.on-dark .cap-h1 em, .on-dark .cap-h2 em, .on-dark .cap-h3 em, .on-dark .display em {
  /* on the dark bands the mark is not needed: lendflow.com turns the phrase
     itself green there, and #04fe72 holds 10.3:1 on the navy */
  color: var(--accent-on-dark);
  background-image: none;
  padding-bottom: 0;
}

.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. Lendflow's are 8px rectangles set in the body face at 14/600,
   sentence case, and the primary one is a green gradient with a darker
   ring and NAVY ink — white on that green is 1.4:1.

   The disc that used to hang off every CTA is gone with the old default:
   it was one prospect's "Read More ●", and nothing else on this site is
   round. The repeating mark is now the small green square on .door-num.
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-solid { background: var(--base); border-color: var(--base); color: #fff; }
.btn-solid:hover { background: var(--base-deep); border-color: var(--base-deep); }
/* the name is kept so every page that already asks for .btn-red keeps
   getting the primary button; on this skin the primary is the green one */
.btn-red {
  background: linear-gradient(180deg, #3ff599, var(--accent));
  border-color: transparent;
  color: var(--accent-ink);
  box-shadow: 0 0 0 1px var(--accent-deep), inset 0 1px #3ff599;
}
.btn-red:hover {
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  color: #fff;
}
.btn-ghost:hover { border-color: var(--base); color: var(--base); }
.on-dark .btn { border-color: var(--line-dark); color: #fff; }
.on-dark .btn-red { color: var(--accent-ink); }
.on-dark .btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); color: #fff; }

/* The in-card CTA. Not a text link with an ornament any more: a filled
   navy button at card scale, which is what Lendflow puts at the bottom
   of a product card. Same 8px corner as every other button here. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px;
  border-radius: var(--pill);
  background: var(--base);
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  transition: background .2s var(--ease);
}
.arrow-link:hover { background: var(--base-deep); }
.on-dark .arrow-link { background: #fff; color: var(--base); }
.on-dark .arrow-link:hover { background: var(--canvas); }

/* ---------------------------------------------------------------------
   The motif. One shape decorates this site: a small filled green square,
   the same one that sits in front of a door number. It is 6px, it never
   grows, and it is the only place the raw #04fe72 appears at small size
   — as a shape, never as ink.
   --------------------------------------------------------------------- */
.sq::before,
.door-num::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: var(--accent);
}
/* ============================ masthead ============================ */
/* Light and sticky. Lendflow's bar is #fbfbfb with navy ink and one
   hairline under it — so every token in it comes from the --masthead
   group, never from --base. Flipping --masthead alone is how a bar goes
   white-on-white while the DOM still reports a perfectly good header. */
.cap-head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--masthead);
  border-bottom: 1px solid var(--masthead-line);
}
.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 astraleia.com.
   The tracking on the second line is tuned to the width of the first.
   DARK BY DEFAULT now, because the bar is light; .on-dark .lockup is the
   footer's copy. */
.lockup { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.lockup img { width: 34px; height: 34px; }
.lockup-name { display: grid; gap: 3px; line-height: 1; }
.lockup-name strong {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.5px;
  color: var(--masthead-ink);
}
.lockup-name strong i { font-style: normal; color: var(--accent-text); }
/* 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: 11.4px;
  margin-right: -11.4px;
  text-transform: uppercase;
  color: var(--muted);
}
/* on the dark surfaces — the final band, the footer */
.on-dark .lockup-name strong, .lockup-light .lockup-name strong { color: #fff; }
.on-dark .lockup-name em, .lockup-light .lockup-name em { color: rgba(255, 255, 255, .6); }
/* the old opt-in name, kept so a page that still asks for it gets the
   default rather than nothing */
.lockup-dark .lockup-name strong { color: var(--masthead-ink); }
.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: var(--masthead-ink-soft);
  font-size: 13.2px;
  font-weight: 500;
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: color .18s var(--ease);
}
.cap-links a:hover { color: var(--masthead-ink); }
/* the underline on the current page. Green, because on a light bar the
   accent finally has a job it can hold: it is a 2px shape, not ink. */
.cap-links a.active { color: var(--masthead-ink); font-weight: 600; }
.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: var(--masthead-ink-soft);
  font-size: 13.2px;
  font-weight: 500;
  white-space: nowrap;
}
.cap-login:hover { color: var(--masthead-ink); }
.cap-cta {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 20px;
  border-radius: var(--pill);
  background: var(--base);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: background .2s var(--ease);
}
.cap-cta:hover { background: 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: var(--masthead-ink); }
/* ============================ footer ============================ */
.cap-footer { background: var(--base); color: var(--on-dark); }
/* Lendflow ends a light section by letting the dark one rise into it with
   a rounded top edge. The hero cannot carry that idiom here — the doors
   slab mounts over its bottom — so the final band gets it instead, where
   it meets the white section above. */
.final { border-radius: var(--radius) var(--radius) 0 0; }

/* The contact strip. A full-bleed accent band would put white on
   #04fe72 across the whole width — 1.4:1 — so on this skin the strip is
   Lendflow's pale blue with navy ink and the green stays a mark. */
.cap-strip { background: var(--strip-bg); color: var(--strip-ink); }
.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 .eyebrow { margin: 0 0 6px; color: var(--accent-text); }
.cap-strip .cap-h3 { color: var(--strip-ink); }
.cap-strip-contact { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.cap-strip-contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--strip-ink);
  font-size: 14.5px;
  font-weight: 600;
}
.cap-strip-contact a:hover { text-decoration: underline; text-underline-offset: 4px; }

.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);
}
/* the plate lifts rather than turning green: the glyphs are <img>, so
   their own white fill is fixed and green underneath is 1.4:1 */
.cap-socials a:hover { background: var(--base-lift); border-color: var(--base-lift); }
.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; }

/* ============================ responsive ============================ */
/* The header rail's overflow band. The rail never fit between the old
   burger breakpoint and about 1290px, so it tightens at 1360 and gives up
   at 1080 rather than at 940. QA at 1280 alone hides this: that is the one
   width where the old ladder happened to fit. */
@media (max-width: 1360px) {
  .cap-nav { gap: 22px; }
  .cap-links { gap: 20px; }
  .cap-links a { font-size: 12.6px; }
  .cap-actions { gap: 12px; }
  .cap-cta { padding: 10px 16px; font-size: 13px; }
}
@media (max-width: 1180px) {
  .cap-nav { gap: 16px; }
  .cap-links { gap: 15px; }
  .cap-links a { font-size: 12.2px; }
  .lockup img { width: 30px; height: 30px; }
  .lockup-name strong { font-size: 18px; }
}
@media (max-width: 1080px) {
  .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 var(--masthead-line);
    box-shadow: var(--shadow-card);
    display: none;
  }
  .cap-links.open { display: flex; }
  /* Fixed takes the rail out of the flow, and its margin-left: auto was the
     only thing pushing the actions to the right edge — without this the CTA
     and the burger sit against the lockup (sierra-bay-partners, 2026-09-25;
     it had shipped that way on several properties). audit gates it. */
  .cap-actions { margin-left: auto; }
  .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 from 0, not -1px: the slab clips its corners now, and a filo
     hanging a pixel outside gets sliced by the overflow at both ends */
  inset: 0 auto auto 0;
  width: 100%;
  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: #fff; }

/* 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), box-shadow .18s var(--ease), transform .09s var(--ease); }
.btn:active, .cap-cta:active, .arrow-link:active { transform: scale(.985); }


/* 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(--ring-rgb), .16) !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; }
}

/* A 375px la cabecera no cabía: el lockup (151px) más el CTA y la hamburguesa
   (199px) suman 386 contra 335 de shell, y la página ganaba 11px de scroll
   horizontal. Se encoge lo elástico —marca y CTA— en vez de esconder el CTA,
   que en móvil es la única acción: el menú desplegable no lo lleva. */
@media (max-width: 460px) {
  .cap-nav { gap: 10px; }
  .lockup { gap: 8px; }
  .lockup img { width: 28px; height: 28px; }
  .lockup-name strong { font-size: 17px; }
  .lockup-name em { font-size: 8px; letter-spacing: 8.6px; margin-right: -8.6px; }
  .cap-actions { gap: 8px; }
  .cap-cta { gap: 6px; padding: 8px 12px; font-size: 10.5px; }
  .cap-burger { width: 34px; }
}

/* =====================================================================
   ASTRA SKIN — overrides for a property that is dark from edge to edge.
   Read off astraleia.com 2026-09-30; see adastra/_work/skin.py.
   ===================================================================== */
body { background: var(--base); color: var(--body); }
::selection { background: rgba(var(--accent-rgb), .28); color: var(--ink); }
:focus-visible { outline-color: var(--accent); }
.on-dark :focus-visible, .cap-footer :focus-visible, .cap-head :focus-visible { outline-color: var(--accent); }

/* Marcellus has one weight; their headlines are 400 at a -1.2% track, never uppercase */
.display, .cap-h1, .cap-h2, .cap-h3 { font-weight: 400; }
.cap-h1 { letter-spacing: -.012em; line-height: 1.04; }
.cap-h2 { letter-spacing: -.012em; line-height: 1.06; }
.cap-h3 { letter-spacing: -.01em; }
.on-dark .cap-h1, .on-dark .cap-h2, .on-dark .cap-h3 { color: var(--ink); }
/* the phrase that matters is gold, as a gradient clipped to the glyphs (their .shim-gold) —
   there is no light band here, so the drawn underline never applies */
.cap-h1 em, .cap-h2 em, .cap-h3 em, .display em,
.on-dark .cap-h1 em, .on-dark .cap-h2 em, .on-dark .cap-h3 em, .on-dark .display em {
  padding-bottom: 0;
  background: var(--shim-gold);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent);
}

/* their eyebrow: small caps in the gold, ahead of a section they number */
.eyebrow { font-size: 12px; letter-spacing: .14em; color: var(--accent); }
.on-dark .eyebrow { color: var(--accent); }

/* buttons: pills. Primary is their gold CTA verbatim; secondary is their "Log in" chip */
.btn { min-height: 48px; padding: 13px 22px; font-size: 15px; letter-spacing: 0; border-radius: var(--pill); }
.btn-red, .on-dark .btn-red {
  background: var(--cta);
  border-color: transparent;
  color: var(--accent-ink);
  box-shadow: var(--cta-shadow);
}
.btn-red:hover, .on-dark .btn-red:hover { background: var(--cta); color: var(--accent-ink); filter: brightness(1.07); }
.btn-ghost, .on-dark .btn-ghost {
  background: rgba(242, 234, 215, .04);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(242, 234, 215, .18);
  color: var(--ink);
}
.btn-ghost:hover, .on-dark .btn-ghost:hover { background: rgba(242, 234, 215, .09); border-color: transparent; color: var(--ink); }

/* masthead: their dark glass bar, the pill nav, Log in chip + gold CTA */
.cap-head { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cap-links a { font-size: 14.5px; font-weight: 400; }
.cap-links a.active { font-weight: 600; }
.cap-login {
  padding: 9px 16px;
  border-radius: var(--pill);
  background: rgba(242, 234, 215, .04);
  box-shadow: inset 0 0 0 1px rgba(242, 234, 215, .18);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.cap-login:hover { background: rgba(242, 234, 215, .09); color: var(--ink); }
.cap-cta, .cap-cta:hover {
  min-height: 0;
  padding: 9px 16px;
  background: var(--cta);
  color: var(--accent-ink);
  box-shadow: var(--cta-shadow);
  font-size: 14px;
}
.cap-cta:hover { filter: brightness(1.07); }
@media (max-width: 1080px) { .cap-links { background: #0A1512; } }

/* lockup: their gold wordmark + a division label, the badger pattern */
.lockup img.lockup-logo { width: auto; height: 34px; }
.lockup-div {
  padding-left: 13px;
  border-left: 1px solid var(--masthead-line);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--masthead-ink-soft);
}
@media (max-width: 460px) {
  .lockup { gap: 10px; }
  .lockup img.lockup-logo { height: 28px; }
  .lockup-div { padding-left: 10px; font-size: 10px; letter-spacing: .14em; }
}

/* the contact strip and the footer: their --panel and --ground-3 */
.cap-strip { border-top: 1px solid var(--line); }
.cap-footer { background: var(--base-deep); border-top: 1px solid var(--line); }
.cap-footer-main { grid-template-columns: 1.6fr repeat(4, 1fr); }
.cap-footer-col h3 { color: var(--ink); }
.cap-footer-col a:hover { color: var(--ink); }
.cap-footer-bottom { color: var(--faint); }
.cap-footer-bottom p { max-width: 720px; }
@media (max-width: 1080px) { .cap-footer-main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .cap-footer-main { grid-template-columns: 1fr; } }

/* the hover filo is gold on every card */
.card.accent::before { background: var(--accent); }