/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/ui-kit/styles/tokens.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
/* ─────────────────────────────────────────────────────────────────────────
 * Money bro — design tokens
 *
 * Brand owner: JMJ Fintech Limited (NBFC License B-07.00141), trading as
 * Money bro. Palette, type and geometry below are taken from the public
 * brand system at https://moneybro.in — see moneybro.in/assets/css/styles.css,
 * whose :root block is the upstream source for every literal hex here.
 *
 * The look: white surfaces, ONE accent (Money bro red), dark-gray type, light
 * gray field borders, pill CTAs. Amber is the warm secondary used on entry
 * surfaces only. Green is reserved for success ticks, red-on-tint for inline
 * errors. No decorative colour past the front door.
 *
 * Brand-mandated hex values are written literally, exactly as Money bro
 * publishes them. Values Money bro does not define (a hover step, a soft
 * tint) are derived in the same hue so the ramp stays perceptually even and
 * contrast never regresses.
 * ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Accent — Money bro primary red ─────────────────────────────────────
   * --primary / --primary-dark upstream. White on #E51C23 is 4.65:1, so a
   * filled CTA clears AA for body text as well as for UI components. */
  --lk-accent:          #E51C23;   /* brand primary                        */
  --lk-accent-hover:    #C81319;   /* derived: primary, L −0.05            */
  --lk-accent-press:    #B71C1C;   /* brand primary-dark (6.5:1 on white)  */
  --lk-accent-soft:     #FFF5F5;   /* brand tint — selected-row wash       */
  --lk-accent-border:   #FFD5D5;   /* brand tint — selected chip edge      */
  --lk-accent-bright:   #FF5252;   /* brand primary-light — gradients only */

  /* ── Warm (brand secondary) ─────────────────────────────────────────────
   * Money bro's --accent. Entry surfaces ONLY — splash and sign-in/OTP.
   * Everywhere past the door stays on the red accent + white rule above, so
   * decoration never leaks into a screen where a number or a consent has to
   * be read. Amber itself is unreadable on white, so --lk-warm-deep carries
   * any warm TEXT and --lk-warm only ever fills or strokes. */
  --lk-warm:            #FFB300;   /* brand accent                         */
  --lk-warm-hot:        #FF6F00;   /* brand accent-gradient end            */
  --lk-warm-deep:       #B45309;   /* warm text on white, AA at 14px       */
  --lk-warm-soft:       #FFF8E7;
  --lk-warm-border:     rgba(255, 179, 0, 0.30);

  /* Money bro publishes a --secondary (#1E88E5) as a complementary blue, but
   * uses it nowhere on its own surfaces — the site is red, amber and white.
   * No token for it here: an unused colour in the ramp is an invitation to
   * reach for a hue the brand does not actually wear. */

  /* ── Neutrals ───────────────────────────────────────────────────────────
   * Money bro's text ramp (--text-dark / --text-primary / --text-secondary /
   * --text-light) plus its --light-bg and --gray-light. */
  --lk-bg:              #FFFFFF;
  --lk-surface:         #F8F9FA;   /* brand --light-bg: inset panels        */
  --lk-surface-2:       #F1F3F5;   /* skeletons, disabled fills, avatars    */
  --lk-fg:              #2D3748;   /* brand --text-primary: body copy       */
  --lk-fg-strong:       #1A202C;   /* brand --text-dark: headlines, amounts */
  --lk-muted:           #4A5568;   /* brand --text-secondary                */
  --lk-muted-2:         #718096;   /* brand --text-light: placeholders      */
  --lk-border:          #E9ECEF;   /* brand --gray-light: dividers, edges   */
  --lk-field-border:    #D5DADF;   /* input edges — one step darker         */

  /* ── Semantic (used ONLY for their one meaning) ─────────────────────────
   * NOTE — the brand accent is red, so error red cannot carry meaning by
   * hue alone. Errors are therefore always: deeper red TEXT on a pink tint,
   * with an icon, and never a filled button. A filled red surface is always
   * an action; red text on --lk-error-soft is always a problem. */
  --lk-success:         #047857;   /* success tick + its label              */
  --lk-success-soft:    #ECFDF5;
  --lk-success-border:  #A7F3D0;
  --lk-error:           #9F1239;   /* inline validation errors only         */
  --lk-error-soft:      #FFF1F4;
  --lk-error-border:    #FBCFE0;

  /* ── Type ───────────────────────────────────────────────────────────────
   * Money bro pairs Poppins (headings, logo) with Inter (body), loaded on
   * moneybro.in from Google Fonts at Poppins 600/700/800 + Inter 400–800.
   * fonts.ts self-hosts both at build time via next/font/google. */
  --lk-font-display: var(--lk-font-display-next, "Poppins"), "Poppins", system-ui, -apple-system, sans-serif;
  --lk-font-body:    var(--lk-font-body-next, "Inter"), "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lk-font-mono:    ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;

  /* 16px base, per the brief. Steps are 4px-gridded. Poppins runs wider and
   * rounder than the previous display face, so headings carry a touch of
   * negative tracking (see .lk-h1/.lk-h2 in ui-kit.css) to hold the measure. */
  --lk-t-display:  700 30px/36px var(--lk-font-display);   /* ₹ amounts     */
  --lk-t-h1:       700 24px/32px var(--lk-font-display);   /* screen title  */
  --lk-t-h2:       700 20px/28px var(--lk-font-display);   /* section       */
  --lk-t-h3:       600 17px/24px var(--lk-font-display);   /* card title    */
  --lk-t-body:     400 16px/24px var(--lk-font-body);      /* base          */
  --lk-t-body-md:  500 16px/24px var(--lk-font-body);
  --lk-t-small:    400 14px/20px var(--lk-font-body);
  --lk-t-small-md: 500 14px/20px var(--lk-font-body);
  --lk-t-micro:    400 13px/18px var(--lk-font-body);      /* legal, hints  */

  /* ── Geometry ───────────────────────────────────────────────────────────
   * Money bro rounds hard: 50px pills on every CTA, ~20px cards. The scale
   * below is pulled toward that without letting a 14px field turn into a
   * lozenge. Buttons use --lk-r-pill directly (see .lk-btn). */
  --lk-r-sm: 8px;
  --lk-r-md: 10px;
  --lk-r-lg: 14px;
  --lk-r-xl: 20px;
  --lk-r-pill: 999px;

  --lk-s-1: 4px;
  --lk-s-2: 8px;
  --lk-s-3: 12px;
  --lk-s-4: 16px;
  --lk-s-5: 20px;
  --lk-s-6: 24px;
  --lk-s-8: 32px;
  --lk-s-10: 40px;

  /* Minimum comfortable tap target. Never go below this. */
  --lk-tap: 48px;

  /* One shadow, used sparingly — docked CTA lift and bottom sheets only. */
  --lk-shadow-dock:  0 -1px 0 var(--lk-border);
  --lk-shadow-sheet: 0 -8px 32px rgba(26, 32, 44, 0.14);

  /* ── Red gradient + red-tinted lift ─────────────────────────────────────
   * Money bro bookends its own page with linear-gradient(135deg,#E51C23,
   * #B71C1C) and lifts cards and buttons on rgba(229,28,35,.12/.4) rather
   * than on grey. The tinted shadow is the single strongest tell of the
   * system and the cheapest thing to get wrong — a grey shadow under a red
   * button immediately reads as somebody else's design. */
  --lk-red-gradient: linear-gradient(135deg, var(--lk-accent) 0%, var(--lk-accent-press) 100%);
  --lk-lift-btn:     0 6px 20px rgba(229, 28, 35, 0.32);
  --lk-lift-btn-hi:  0 10px 28px rgba(229, 28, 35, 0.45);
  --lk-lift-card:    0 20px 50px rgba(229, 28, 35, 0.12);

  /* Device frame. The board renders these literally; in the app the frame is
   * fluid and these are only the default/reference size. */
  --lk-frame-w: 390px;
  --lk-frame-h: 844px;

  /* Comfortable reading measure. Above this the screen stops stretching and
   * starts centring — a 1024px-wide form field is not a tablet layout. */
  --lk-measure: 560px;
  /* Widest a docked CTA is allowed to get, whatever the frame does. */
  --lk-cta-max: 420px;
}

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/ui-kit/styles/ui-kit.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
/* ─────────────────────────────────────────────────────────────────────────
 * Lending Kit — component stylesheet
 *
 * Single source of visual truth. Both the React components (ui-kit/*.tsx)
 * and the static preview board (index.html) render against these classes,
 * so the design cannot drift between the spec and the shipped app.
 *
 * Import order:  tokens.css  →  ui-kit.css
 * ───────────────────────────────────────────────────────────────────────── */

/* ── Reset scoped to the kit ────────────────────────────────────────────── */

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

.lk-root {
  font: var(--lk-t-body);
  color: var(--lk-fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* :where() holds this at (0,1,0) so every component rule below can override it.
 * Written as `.lk-root button` it scored (0,1,1) and beat `.lk-btn--primary`
 * (0,1,0) — so `color: inherit` won and every primary button painted dark body
 * text onto the accent fill. */
.lk-root :where(button, input, select, textarea) { font: inherit; color: inherit; }

/* An outline already follows the element's own border-radius; setting a radius
 * here RESHAPED the focused element (a pill chip snapped to 8px corners on
 * focus). Ring only — never geometry. */
.lk-root :focus-visible {
  outline: 2px solid var(--lk-accent);
  outline-offset: 2px;
}

/* A bare <input> inside a field box is a flex child inset by the box's 14px
 * padding, so its own outline drew offset from — and overlapping — the visible
 * border. The control hands its ring to the box, which is the thing the user
 * sees as "the textbox". */
.lk-field__box :focus-visible,
.lk-field__box :focus { outline: none; }
.lk-field__box:focus-within {
  border-color: var(--lk-accent);
  box-shadow: 0 0 0 3px var(--lk-accent-soft);
}
/* Same idea for OTP cells: each cell IS the box, so it takes border + halo
 * rather than an offset outline that would collide with its neighbour. */
.lk-otp__box:focus-visible {
  outline: none;
  border-color: var(--lk-accent);
  box-shadow: 0 0 0 3px var(--lk-accent-soft);
}

/* ── Device frame ───────────────────────────────────────────────────────── */

.lk-frame {
  position: relative;
  width: var(--lk-frame-w);
  height: var(--lk-frame-h);
  background: var(--lk-bg);
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

/* Android status bar — flat, no chrome theatre. */
.lk-statusbar {
  height: 28px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--lk-s-5);
  font: 500 12px/1 var(--lk-font-body);
  color: var(--lk-fg-strong);
  letter-spacing: 0.01em;
}
.lk-statusbar__icons { display: flex; align-items: center; gap: 5px; }

/* ── App bar ────────────────────────────────────────────────────────────── */

.lk-appbar {
  flex: 0 0 auto;
  height: 52px;
  display: flex;
  align-items: center;
  gap: var(--lk-s-2);
  /* One 20px gutter for the whole frame — status bar, app bar, progress,
   * stepper, body and dock all share it. The 48px icon button is pulled out
   * by its own inset so the GLYPH, not its tap area, lands on that gutter;
   * a bare title in the same bar still starts at 20px. */
  padding: 0 var(--lk-s-5);
}
.lk-appbar > .lk-iconbtn:first-child { margin-left: -14px; }
.lk-appbar > .lk-iconbtn:last-child:not(:first-child) { margin-right: -14px; }
.lk-appbar__title {
  flex: 1 1;
  min-width: 0;
  font: var(--lk-t-h3);
  color: var(--lk-fg-strong);
  padding: 0 var(--lk-s-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lk-appbar__spacer { flex: 1 1; }

.lk-iconbtn {
  width: var(--lk-tap);
  height: var(--lk-tap);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--lk-r-pill);
  background: transparent;
  color: var(--lk-fg);
  cursor: pointer;
  transition: background-color 120ms ease;
}
.lk-iconbtn:hover { background: var(--lk-surface-2); }
.lk-iconbtn:active { background: var(--lk-border); }

/* ── Phase stepper ──────────────────────────────────────────────────────── */

.lk-stepper {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: var(--lk-s-2);
  padding: var(--lk-s-3) var(--lk-s-5) var(--lk-s-2);
  counter-reset: lk-phase;
}
/* Four equal columns, each under its own rule, rather than dots joined by
 * separators. The phase number comes from a counter now that the dot is
 * gone, so the label still reads "1 Apply". */
.lk-step {
  flex: 1 1;
  min-width: 0;
  display: block;
  padding-top: 8px;
  border-top: 2px solid var(--lk-border);
  text-align: center;
  font: 500 10.5px/14px var(--lk-font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--lk-muted-2);
}
/* ONE number per phase: the dot carries it. A CSS counter used to print a
 * second one above the dot, so every phase read "4 · (4)". */
.lk-step__sep { display: none; }
.lk-step__dot {
  width: 22px;
  height: 22px;
  margin: 0 auto 5px;
  border-radius: var(--lk-r-pill);
  background: var(--lk-surface-2);
  color: var(--lk-muted);
  font: 600 11px/22px var(--lk-font-body);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lk-step__label {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Done: green, the tick on a green dot. Current: red, the dot pulsing so the
 * eye finds where it is. Upcoming: grey. */
.lk-step.is-done { color: var(--lk-success); border-top-color: var(--lk-success); }
.lk-step.is-done .lk-step__dot { background: var(--lk-success); color: #fff; }
.lk-step.is-active { color: var(--lk-accent); border-top-color: var(--lk-accent); font-weight: 600; }
.lk-step.is-active .lk-step__dot {
  background: var(--lk-accent);
  color: #fff;
  animation: lk-step-blink 1.2s ease-in-out infinite;
}
@keyframes lk-step-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(229, 28, 35, 0.45); }
  50%      { opacity: 0.45; box-shadow: 0 0 0 6px rgba(229, 28, 35, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .lk-step.is-active .lk-step__dot { animation: none; }
}
.lk-step__sep {
  flex: 1 1 auto;
  min-width: 8px;
  height: 1px;
  background: var(--lk-border);
}

/* The column stepper is narrow enough that every label fits, so compact no
 * longer needs to drop them. */
.lk-stepper--compact .lk-step:not(.is-active) .lk-step__label { display: inline; }

/* ── Journey progress bar ───────────────────────────────────────────────── */
/* Sits under the app bar, above the stepper. The stepper names the phase and
 * deliberately does not move for sub-screens; this bar carries the borrower's
 * true fine-grained position through the whole journey, so phase 3's seven
 * sub-screens still read as forward movement. */

.lk-progress {
  flex: 0 0 auto;
  height: 4px;
  /* Inset to the frame gutter. A full-bleed rule sitting above 20px content
   * reads as a misalignment, which is exactly how it looked. */
  margin: 0 var(--lk-s-5);
  border-radius: var(--lk-r-pill);
  background: var(--lk-border);
  overflow: hidden;
}
.lk-progress__fill {
  display: block;
  height: 100%;
  min-width: 3px;
  background: var(--lk-red-gradient);
  border-radius: var(--lk-r-pill);
  transition: width 420ms cubic-bezier(0.2, 0, 0, 1);
}
/* Inset track, so a full bar keeps its caps. */
.lk-progress__fill[style*="width:100%"] { border-radius: var(--lk-r-pill); }

@media (prefers-reduced-motion: reduce) {
  .lk-progress__fill { transition: none; }
}

/* Breathing room once the bar occupies the line above the stepper. */
.lk-progress + .lk-stepper { padding-top: 12px; }

/* ── Scroll body + docked CTA ───────────────────────────────────────────── */

.lk-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 var(--lk-s-5) var(--lk-s-6);
  overscroll-behavior: contain;
}
.lk-body--flush { padding-left: 0; padding-right: 0; }
.lk-body--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* `safe` keeps the top in view when the content is taller than the body:
   * plain `center` overflows both ends equally and the scroll container
   * cannot reach the top half, which is how the success screen's tick badge
   * was cut off under the app bar. Browsers without `safe` keep the line
   * above. */
  justify-content: safe center;
  text-align: center;
}

.lk-dock {
  flex: 0 0 auto;
  padding: var(--lk-s-3) var(--lk-s-5) var(--lk-s-5);
  background: var(--lk-bg);
  box-shadow: var(--lk-shadow-dock);
}
.lk-dock__note {
  font: var(--lk-t-micro);
  color: var(--lk-muted);
  text-align: center;
  margin-bottom: var(--lk-s-3);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.lk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lk-s-2);
  min-height: 52px;
  padding: 0 var(--lk-s-5);
  border: 1px solid transparent;
  border-radius: var(--lk-r-pill);
  font: 600 16px/1 var(--lk-font-body);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.lk-btn--block { display: flex; width: 100%; }

.lk-btn--primary { background: var(--lk-red-gradient); color: #fff; box-shadow: var(--lk-lift-btn); }
.lk-btn--primary:hover { background: var(--lk-accent-press); color: #fff; box-shadow: var(--lk-lift-btn-hi); }
.lk-btn--primary:active { background: var(--lk-accent-press); color: #fff; box-shadow: var(--lk-lift-btn); }

.lk-btn--secondary {
  background: var(--lk-bg);
  color: var(--lk-accent);
  border-color: var(--lk-field-border);
}
.lk-btn--secondary:hover { background: var(--lk-accent-soft); border-color: var(--lk-accent-border); color: var(--lk-accent-press); }
.lk-btn--secondary:active { background: var(--lk-accent-soft); border-color: var(--lk-accent); }

.lk-btn--ghost { background: transparent; color: var(--lk-accent); min-height: var(--lk-tap); }
.lk-btn--ghost:hover { background: var(--lk-accent-soft); color: var(--lk-accent-press); }

.lk-btn:disabled,
.lk-btn.is-disabled {
  background: var(--lk-surface-2);
  border-color: transparent;
  color: var(--lk-muted-2);
  cursor: not-allowed;
  box-shadow: none;
}

/* Loading keeps the primary fill so contrast never drops. */
.lk-btn.is-loading {
  background: var(--lk-red-gradient);
  color: #fff;
  cursor: progress;
  pointer-events: none;
}

/* A check that passed (task 32): the button turns green. Compound selectors
   only — never a bare class declared a second time (cssNames.test.ts) — and
   after the disabled rule, so the green holds while the page moves on by
   itself and the button cannot be pressed again. */
.lk-btn.is-verified,
.lk-btn.is-verified:hover,
.lk-btn.is-verified:active,
.lk-btn.is-verified:disabled {
  background: var(--lk-success);
  border-color: transparent;
  color: #fff;
  box-shadow: none;
}
.lk-btn.is-verified:disabled { cursor: default; }

/* ── Spinner ────────────────────────────────────────────────────────────── */

.lk-spinner {
  /* A <span>: inline, it ignores width/height and draws as a flat line in
     any block parent (the post-OTP "Setting up your account" sheet). */
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: var(--lk-r-pill);
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: lk-spin 800ms linear infinite;
}
.lk-spinner--lg { width: 36px; height: 36px; border-width: 3px; }
@keyframes lk-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .lk-spinner { animation-duration: 2s; }
  .lk-sheet { animation: none !important; }
  .lk-dialog { animation: none !important; }
}

/* ── Typography helpers ─────────────────────────────────────────────────── */

.lk-h1 { font: var(--lk-t-h1); color: var(--lk-fg-strong); letter-spacing: -0.015em; }
.lk-h2 { font: var(--lk-t-h2); color: var(--lk-fg-strong); letter-spacing: -0.01em; }
.lk-h3 { font: var(--lk-t-h3); color: var(--lk-fg-strong); }
.lk-display { font: var(--lk-t-display); color: var(--lk-fg-strong); letter-spacing: -0.02em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.lk-p { font: var(--lk-t-body); color: var(--lk-fg); }
.lk-small { font: var(--lk-t-small); color: var(--lk-muted); }
.lk-micro { font: var(--lk-t-micro); color: var(--lk-muted); }
.lk-strong { color: var(--lk-fg-strong); font-weight: 600; }
.lk-num { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

.lk-link {
  color: var(--lk-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.lk-link:hover { color: var(--lk-accent-press); }

.lk-eyebrow {
  font: 600 12px/16px var(--lk-font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lk-muted);
}

/* Spacing utilities — deliberately few. */
.lk-mt-1 { margin-top: var(--lk-s-1); }
.lk-mt-2 { margin-top: var(--lk-s-2); }
.lk-mt-3 { margin-top: var(--lk-s-3); }
.lk-mt-4 { margin-top: var(--lk-s-4); }
.lk-mt-5 { margin-top: var(--lk-s-5); }
.lk-mt-6 { margin-top: var(--lk-s-6); }
.lk-mt-8 { margin-top: var(--lk-s-8); }
.lk-stack > * + * { margin-top: var(--lk-s-4); }
.lk-stack-sm > * + * { margin-top: var(--lk-s-2); }

.lk-divider { height: 1px; background: var(--lk-border); border: 0; margin: var(--lk-s-5) 0; }

/* ── Fields ─────────────────────────────────────────────────────────────── */

.lk-field { display: block; }
.lk-field__label {
  display: block;
  font: var(--lk-t-small-md);
  color: var(--lk-fg);
  margin-bottom: 6px;
}
.lk-field__box {
  display: flex;
  align-items: center;
  gap: var(--lk-s-2);
  min-height: 52px;
  padding: 0 14px;
  background: var(--lk-bg);
  border: 1px solid var(--lk-field-border);
  border-radius: var(--lk-r-md);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.lk-field__box.is-focus {
  border-color: var(--lk-accent);
  box-shadow: 0 0 0 3px var(--lk-accent-soft);
}
.lk-field__box.is-valid { border-color: var(--lk-success-border); }
.lk-field__box.is-error { border-color: var(--lk-error); }
.lk-field__box.is-disabled { background: var(--lk-surface); border-color: var(--lk-border); }
.lk-field__box.is-readonly { background: var(--lk-surface); border-color: var(--lk-border); }

.lk-field__prefix,
.lk-field__suffix { font: var(--lk-t-body-md); color: var(--lk-muted); flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.lk-field__prefix { padding-right: var(--lk-s-2); border-right: 1px solid var(--lk-border); }

.lk-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: var(--lk-t-body);
  color: var(--lk-fg-strong);
  padding: 14px 0;
}
.lk-input::placeholder { color: var(--lk-muted-2); }
.lk-input--mono { font-family: var(--lk-font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.lk-input--num { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.lk-input:disabled { color: var(--lk-muted); -webkit-text-fill-color: var(--lk-muted); }

/* ── Date control ────────────────────────────────────────────────────────
 * A real <input type="date">, not a text box with a calendar glyph glued on.
 * The browser draws its own picker indicator in a place we do not control, so
 * we hide it and drive the picker from .lk-datebtn — the icon the user sees is
 * then the icon that actually works. */
.lk-input[type="date"] {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.lk-input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
.lk-input[type="date"]::-webkit-inner-spin-button { display: none; }
/* An unfilled date reads like an unfilled text field, not like live content. */
.lk-input[type="date"]:not([data-filled="true"]) { color: var(--lk-muted-2); }

.lk-datebtn {
  width: 40px; height: 40px;
  margin-right: -6px;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--lk-r-sm);
  background: transparent; color: var(--lk-muted);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.lk-datebtn:hover { background: var(--lk-surface-2); color: var(--lk-fg-strong); }
.lk-datebtn:active { background: var(--lk-border); }

.lk-field__msg {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font: var(--lk-t-micro);
  margin-top: 6px;
}
.lk-field__msg--hint    { color: var(--lk-muted); }
.lk-field__msg--error   { color: var(--lk-error); }
.lk-field__msg--success { color: var(--lk-success); font-weight: 500; }

/* Encryption microtext — sits under any sensitive input. */
.lk-secure {
  display: flex;
  align-items: center;
  gap: 6px;
  font: var(--lk-t-micro);
  color: var(--lk-muted);
  margin-top: var(--lk-s-2);
}
.lk-secure svg { flex: 0 0 auto; }

/* Centred variant, for the footer where the sentence wraps.
 *
 * display:block rather than flex, so the icon flows INLINE with the first word
 * and the second line centres under the first. As a flex row the icon was
 * centred against the whole two-line block and the text hung off its right
 * edge, which is what made the footer look askew beside the centred lending-
 * partner line under it. max-width keeps the wrap balanced instead of one long
 * line and one short one. */
.lk-secure--center {
  display: block;
  text-align: center;
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}
/* The icon's own display is set through the prop (Icon hardcodes an inline
 * `display:block` that a stylesheet cannot reach); this only keeps it from
 * being stretched by the flex rule above. */
.lk-secure--center svg { flex: none; }

/* Select / dropdown reuses the field box. */
.lk-select {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: var(--lk-t-body);
  color: var(--lk-fg-strong);
  padding: 14px 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}
.lk-select[data-placeholder="true"] { color: var(--lk-muted-2); }

/* ── Checkbox ───────────────────────────────────────────────────────────── */

.lk-check {
  display: flex;
  align-items: flex-start;
  gap: var(--lk-s-3);
  padding: 10px 0;
  min-height: var(--lk-tap);
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  width: 100%;
}
.lk-check__box {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin-top: 1px;
  border: 1.5px solid var(--lk-field-border);
  border-radius: 6px;
  background: var(--lk-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.lk-check:hover .lk-check__box { border-color: var(--lk-accent); }
.lk-check.is-checked .lk-check__box {
  background: var(--lk-accent);
  border-color: var(--lk-accent);
  color: #fff;
}
.lk-check.is-error .lk-check__box { border-color: var(--lk-error); }
.lk-check__label { font: var(--lk-t-small); color: var(--lk-fg); }

/* ── Chips ──────────────────────────────────────────────────────────────── */

.lk-chips { display: flex; flex-wrap: wrap; gap: var(--lk-s-2); }
.lk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--lk-tap);
  padding: 0 18px;
  border: 1px solid var(--lk-field-border);
  border-radius: var(--lk-r-pill);
  background: var(--lk-bg);
  font: var(--lk-t-small-md);
  color: var(--lk-fg);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.lk-chip:hover { background: var(--lk-surface); border-color: var(--lk-muted-2); color: var(--lk-fg-strong); }
.lk-chip.is-selected {
  background: var(--lk-accent-soft);
  border-color: var(--lk-accent);
  color: var(--lk-accent-press);
  font-weight: 600;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */

.lk-card {
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-r-lg);
  background: var(--lk-bg);
  padding: var(--lk-s-4);
}
.lk-card--inset { background: var(--lk-surface); border-color: var(--lk-border); }
.lk-card--accent { background: var(--lk-accent-soft); border-color: var(--lk-accent-border); }
.lk-card--flush { padding: 0; overflow: hidden; }
.lk-card__head {
  display: flex;
  align-items: center;
  gap: var(--lk-s-3);
  margin-bottom: var(--lk-s-3);
}

/* Tappable card (product card, list row) */
.lk-card--action { cursor: pointer; text-align: left; width: 100%; transition: border-color 120ms ease, background-color 120ms ease; }
.lk-card--action:hover { border-color: var(--lk-accent-border); background: var(--lk-accent-soft); }

/* ── Key/value rows ─────────────────────────────────────────────────────── */

.lk-kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lk-s-4);
  padding: 11px 0;
}
.lk-kv + .lk-kv { border-top: 1px solid var(--lk-border); }
.lk-kv__k { font: var(--lk-t-small); color: var(--lk-muted); }
.lk-kv__v { font: var(--lk-t-small-md); color: var(--lk-fg-strong); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; text-align: right; }
.lk-kv--total { border-top: 1px solid var(--lk-fg-strong) !important; padding-top: 13px; }
.lk-kv--total .lk-kv__k { color: var(--lk-fg-strong); font-weight: 600; }
.lk-kv--total .lk-kv__v { font: 700 17px/24px var(--lk-font-display); }

/* ── List rows (checklists, pickers, nav) ───────────────────────────────── */

.lk-list { border: 1px solid var(--lk-border); border-radius: var(--lk-r-lg); overflow: hidden; }
.lk-list__item {
  display: flex;
  align-items: center;
  gap: var(--lk-s-3);
  width: 100%;
  min-height: 60px;
  padding: 14px var(--lk-s-4);
  background: var(--lk-bg);
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.lk-list__item + .lk-list__item { border-top: 1px solid var(--lk-border); }
.lk-list__item:hover { background: var(--lk-surface); }
.lk-list__item.is-selected { background: var(--lk-accent-soft); }
.lk-list__item--static { cursor: default; }
.lk-list__item--static:hover { background: var(--lk-bg); }
.lk-list__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.lk-list__title { font: var(--lk-t-body-md); color: var(--lk-fg-strong); }
.lk-list__sub { font: var(--lk-t-micro); color: var(--lk-muted); margin-top: 2px; }

/* Leading square icon slot */
.lk-slot {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: var(--lk-r-sm);
  background: var(--lk-surface-2);
  color: var(--lk-fg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lk-slot--accent { background: var(--lk-accent-soft); color: var(--lk-accent); }
.lk-slot--success { background: var(--lk-success-soft); color: var(--lk-success); }
.lk-slot--error { background: var(--lk-error-soft); color: var(--lk-error); }
.lk-slot--lg { width: 56px; height: 56px; border-radius: var(--lk-r-md); }
.lk-avatar { overflow: hidden; border-radius: 50%; padding: 0; }
.lk-avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lk-avatar--hero { width: 88px; height: 88px; }

/* ── Badges ─────────────────────────────────────────────────────────────── */

.lk-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--lk-r-pill);
  font: 600 12px/18px var(--lk-font-body);
  background: var(--lk-surface-2);
  color: var(--lk-muted);
  white-space: nowrap;
}
.lk-badge--success { background: var(--lk-success-soft); color: var(--lk-success); }
.lk-badge--error { background: var(--lk-error-soft); color: var(--lk-error); }
.lk-badge--accent { background: var(--lk-accent-soft); color: var(--lk-accent-press); }

/* ── Progressive-disclosure blocks ──────────────────────────────────────── */

.lk-block { border-top: 1px solid var(--lk-border); padding-top: var(--lk-s-5); margin-top: var(--lk-s-5); }
.lk-block:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.lk-block__head { display: flex; align-items: center; gap: var(--lk-s-2); margin-bottom: var(--lk-s-4); }
/* The block counter is a red chip, not a solid ink dot — it marks where you
 * are in the form, and red is this system's "here" colour. */
.lk-block__num {
  width: 26px; height: 26px; flex: 0 0 auto;
  border-radius: var(--lk-r-pill);
  background: var(--lk-accent-soft); color: var(--lk-accent-press);
  border: 1px solid var(--lk-accent-border);
  font: 700 12px/24px var(--lk-font-mono); text-align: center;
}
.lk-block.is-entering { animation: lk-slide-in 260ms cubic-bezier(0.2, 0, 0, 1); }
@keyframes lk-slide-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ── Amount slider ──────────────────────────────────────────────────────── */

.lk-amount { text-align: center; padding: var(--lk-s-2) 0 var(--lk-s-4); }
.lk-amount__value { font: 700 40px/48px var(--lk-font-display); color: var(--lk-fg-strong); letter-spacing: -0.03em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.lk-amount__caption { font: var(--lk-t-micro); color: var(--lk-muted); margin-top: 2px; }

/* Task 23: − figure +. The figure is a button (tap to type) and turns into an
   input of the SAME box when tapped, so opening the field moves nothing. The
   step buttons are fixed at 44px — a full touch target — and never resize. */
.lk-amount__row { display: flex; align-items: center; justify-content: center; gap: var(--lk-s-3); }
.lk-amount__step {
  flex: none; width: 44px; height: 44px; border-radius: var(--lk-r-pill);
  border: 1px solid var(--lk-border); background: var(--lk-bg); color: var(--lk-fg-strong);
  font: 600 24px/1 var(--lk-font-display); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  touch-action: manipulation;
}
.lk-amount__step:disabled { color: var(--lk-muted-2); cursor: default; }
.lk-amount__tap, .lk-amount__input {
  min-width: 0; width: 7.5ch; padding: 0; margin: 0; text-align: center;
  background: transparent; border: 0; border-bottom: 2px dashed transparent;
  cursor: text; touch-action: manipulation;
}
.lk-amount__tap:hover { border-bottom-color: var(--lk-border); }
.lk-amount__input { border-bottom-color: var(--lk-accent); outline: none; }

/* 44px tall so the whole row takes the finger, with the 6px track centred in
   it; pan-y gives horizontal drags to the slider and leaves vertical page
   scrolling alone. The fill below is offset to match (19px = (44 − 6) / 2). */
.lk-slider { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; display: block; touch-action: pan-y; }
.lk-slider::-webkit-slider-runnable-track { height: 6px; border-radius: var(--lk-r-pill); background: var(--lk-surface-2); }
.lk-slider::-moz-range-track { height: 6px; border-radius: var(--lk-r-pill); background: var(--lk-surface-2); }
.lk-slider::-moz-range-progress { height: 6px; border-radius: var(--lk-r-pill); background: var(--lk-red-gradient); }
.lk-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -11px;
  border-radius: var(--lk-r-pill);
  background: var(--lk-bg);
  border: 4px solid var(--lk-accent);
  box-shadow: var(--lk-lift-btn);
}
.lk-slider::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: var(--lk-r-pill);
  background: var(--lk-bg); border: 4px solid var(--lk-accent);
  box-shadow: var(--lk-lift-btn);
}
.lk-slider:disabled::-webkit-slider-thumb { border-color: var(--lk-muted-2); }
/* WebKit can't paint a filled track natively — the wrapper draws it. */
.lk-slider-wrap { position: relative; }
.lk-slider-fill {
  position: absolute;
  left: 0; top: 19px; height: 6px;
  border-radius: var(--lk-r-pill);
  background: var(--lk-red-gradient);
  pointer-events: none;
}
.lk-slider-ends { display: flex; justify-content: space-between; font: var(--lk-t-micro); color: var(--lk-muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* ── Live quote (task 23) ───────────────────────────────────────────────── */
/* The figures under the amount picker stay on screen while a new quote loads.
   They dim (a transition, not a swap) while they belong to the previous pick,
   and each figure fades in when its text actually changes (.lk-fig is keyed on
   its text, so an unchanged figure never re-animates). The status line has a
   reserved height so it appearing moves nothing below it. */
.lk-figures { transition: opacity 160ms ease; }
.lk-figures.is-updating { opacity: 0.55; }
.lk-figures__hint { display: flex; gap: 8px; align-items: center; min-height: 20px; }
.lk-fig { display: inline-block; animation: lk-fig-in 180ms ease-out; }
@keyframes lk-fig-in {
  from { opacity: 0.2; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lk-figures { transition: none; }
  .lk-fig { animation: none; }
}

/* ── Celebration (task 25, Celebration.tsx) ─────────────────────────────── */
/* A one-time confetti burst over the viewport. Never takes a tap, never read
   out; the component renders nothing under reduced motion and this rule hides
   it as a second guard. Pieces start just above the top edge and fall with a
   per-piece drift and spin (--lk-drift, --lk-spin), fading out at the end. */
.lk-confetti {
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none; overflow: hidden;
}
.lk-confetti__piece {
  position: absolute; top: -12px;
  opacity: 0;
  animation-name: lk-confetti-fall;
  animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1);
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}
@keyframes lk-confetti-fall {
  0%   { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--lk-drift, 0px), 70vh, 0) rotate(var(--lk-spin, 360deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .lk-confetti { display: none; }
}

/* ── Bottom sheet ───────────────────────────────────────────────────────── */

.lk-scrim {
  position: absolute; inset: 0;
  background: rgba(17, 24, 39, 0.45);
  display: flex; flex-direction: column; justify-content: flex-end;
  z-index: 20;
}
.lk-sheet {
  background: var(--lk-bg);
  border-radius: var(--lk-r-xl) var(--lk-r-xl) 0 0;
  box-shadow: var(--lk-shadow-sheet);
  padding: var(--lk-s-2) var(--lk-s-5) var(--lk-s-5);
  max-height: 82%;
  overflow-y: auto;
  animation: lk-sheet-up 240ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes lk-sheet-up { from { transform: translateY(100%); } to { transform: none; } }

/* ── Document sheet ─────────────────────────────────────────────────────
 * A full document (KFS, loan agreement) in a pop-up. The body is the only
 * scroll area while it is open; the header and footer stay put so Close is
 * always reachable (plan 2026-09-17-1310, U5). */
.lk-docsheet {
  background: var(--lk-bg);
  border-radius: var(--lk-r-xl) var(--lk-r-xl) 0 0;
  box-shadow: var(--lk-shadow-sheet);
  height: 92%;
  display: flex;
  flex-direction: column;
  outline: none;
  animation: lk-sheet-up 240ms cubic-bezier(0.2, 0, 0, 1);
}
.lk-docsheet__head {
  display: flex; align-items: center; gap: var(--lk-s-3);
  padding: var(--lk-s-3) var(--lk-s-3) var(--lk-s-3) var(--lk-s-5);
  border-bottom: 1px solid var(--lk-border);
  flex: 0 0 auto;
}
.lk-docsheet__close {
  margin-left: auto;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--lk-r-md);
  background: transparent; color: var(--lk-fg);
  cursor: pointer;
}
.lk-docsheet__close:hover { background: var(--lk-surface-2); }
.lk-docsheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--lk-s-4);
  background: var(--lk-surface);
}
.lk-docsheet__foot {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--lk-s-3);
  padding: var(--lk-s-3) var(--lk-s-5) calc(var(--lk-s-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--lk-border);
}
/* The KFS is served HTML, framed so its styles cannot reach the app's. */
.lk-docframe {
  display: block; width: 100%; border: 0;
  background: #fff; border-radius: var(--lk-r-md);
}
/* Agreement pages drawn by pdf.js, one under another, fitted to the width. */
.lk-docpages { display: flex; flex-direction: column; gap: var(--lk-s-3); }
.lk-docpages canvas {
  display: block; width: 100%; height: auto;
  background: #fff; border-radius: var(--lk-r-sm);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.12);
}
@media (prefers-reduced-motion: reduce) { .lk-docsheet { animation: none !important; } }

/* ── Centred dialog ─────────────────────────────────────────────────────── */

/* Same scrim, centred instead of bottom-anchored. */
.lk-scrim--center { justify-content: center; align-items: center; padding: var(--lk-s-5); }
.lk-dialog {
  background: var(--lk-bg);
  border-radius: var(--lk-r-xl);
  box-shadow: var(--lk-shadow-sheet);
  padding: var(--lk-s-5);
  width: 100%;
  max-width: 340px;
  max-height: 82%;
  overflow-y: auto;
  animation: lk-dialog-in 160ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes lk-dialog-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.lk-sheet__grab {
  width: 36px; height: 4px;
  border-radius: var(--lk-r-pill);
  background: var(--lk-border);
  margin: 6px auto var(--lk-s-4);
}

/* ── OTP boxes ──────────────────────────────────────────────────────────── */

.lk-otp { display: flex; gap: var(--lk-s-2); }
.lk-otp__box {
  flex: 1 1;
  min-width: 0;
  height: 56px;
  border: 1px solid var(--lk-field-border);
  border-radius: var(--lk-r-md);
  background: var(--lk-bg);
  text-align: center;
  font: 600 22px/1 var(--lk-font-body);
  color: var(--lk-fg-strong);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  outline: 0;
  padding: 0;
}
.lk-otp__box.is-filled { border-color: var(--lk-fg-strong); }
.lk-otp__box.is-focus { border-color: var(--lk-accent); box-shadow: 0 0 0 3px var(--lk-accent-soft); }
.lk-otp__box.is-error { border-color: var(--lk-error); }

/* ── Bottom navigation ──────────────────────────────────────────────────── */

.lk-nav {
  flex: 0 0 auto;
  display: flex;
  border-top: 1px solid var(--lk-border);
  background: var(--lk-bg);
  padding-bottom: 6px;
}
.lk-nav__item {
  flex: 1 1;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  background: transparent;
  color: var(--lk-muted);
  font: 500 11px/14px var(--lk-font-body);
  cursor: pointer;
  transition: color 120ms ease;
}
.lk-nav__item:hover { color: var(--lk-fg-strong); }
.lk-nav__item.is-active { color: var(--lk-accent); font-weight: 600; }

/* ── Toast ──────────────────────────────────────────────────────────────── */

.lk-toast {
  position: absolute;
  left: var(--lk-s-4); right: var(--lk-s-4);
  bottom: 96px;
  z-index: 30;
  display: flex;
  align-items: flex-start;
  gap: var(--lk-s-3);
  padding: 14px var(--lk-s-4);
  border-radius: var(--lk-r-md);
  background: var(--lk-fg-strong);
  color: #fff;
  font: var(--lk-t-small);
  box-shadow: 0 6px 20px rgba(17, 24, 39, 0.2);
}
.lk-toast--error { background: var(--lk-error); }
.lk-toast__title { font-weight: 600; }
.lk-toast svg { flex: 0 0 auto; margin-top: 1px; }

/* ── Full-bleed states (camera, processing, terminal) ───────────────────── */

.lk-camera {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #111827;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* THE OVAL IS SIZED TO THE FRAME, NOT IN PIXELS (task 12).
   It was a fixed 232 x 300 — on a phone, well under two-thirds of the camera
   width, and too small to fit a face into at arm's length. Now it takes most
   of the frame's width, capped, with the same 232:300 shape.
   The face-fit check follows by itself: useFaceGuide reads this element's
   rendered size (ovalRef -> ovalTargetFor), so whatever box is drawn here is
   the box the ring judges against. The max-height only matters on a very
   short frame (landscape), where it keeps the oval clear of the hint and the
   chips at the cost of a slightly rounder shape. */
.lk-camera__oval {
  width: min(78%, 320px);
  aspect-ratio: 232 / 300;
  max-height: calc(100% - 140px);
  border-radius: 50% / 46% 46% 54% 54%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 9999px rgba(17, 24, 39, 0.55);
  transition: border-color 200ms ease;
}
.lk-camera__oval.is-locked { border-color: #34D399; }

/* Ring states.
   COLOUR IS NEVER THE ONLY CHANNEL. The border STYLE carries the same
   information as the hue — dashed while something is wrong, solid when it is
   not — so the ring still reads on a monochrome screen and to a borrower who
   cannot separate the two colours. The reason sentence below the ring is the
   primary signal; these are reinforcement.

   There is no green "neutral". Neutral means we could not check, and a ring
   that goes green without checking tells the borrower to go ahead on our
   guess. */
.lk-camera__oval--neutral {
  border-color: rgba(255, 255, 255, 0.9);
  border-style: solid;
}
.lk-camera__oval--problem {
  border-color: #F87171;
  border-style: dashed;
}
.lk-camera__oval--clear {
  border-color: #34D399;
  border-style: solid;
}

/* The one reason, under the ring. Sits above the coaching chips. */
.lk-camera__reason {
  position: absolute;
  left: var(--lk-s-4); right: var(--lk-s-4);
  bottom: calc(var(--lk-s-4) + 52px);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 12px;
  border-radius: var(--lk-r-sm);
  background: rgba(17, 24, 39, 0.78);
  color: #fff;
  font: 600 13px/18px var(--lk-font-body);
  text-align: center;
}
.lk-camera__reason--clear { color: #34D399; }
/* Nothing to say, nothing drawn. The dark bar with no text in it was the
   "thick black line" above the chips (task 12). Kept in the tree, invisible,
   so the live region is already there when a reason arrives. */
.lk-camera__reason--empty {
  background: transparent;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  .lk-camera__oval { transition: none; }
}
.lk-camera__tips {
  position: absolute;
  left: var(--lk-s-4); right: var(--lk-s-4); bottom: var(--lk-s-4);
  display: flex;
  gap: var(--lk-s-2);
}
.lk-camera__tip {
  flex: 1 1;
  display: flex; align-items: center; gap: 6px;
  padding: 10px;
  border-radius: var(--lk-r-sm);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font: 500 12px/16px var(--lk-font-body);
}
.lk-camera__hint {
  position: absolute; top: var(--lk-s-5); left: var(--lk-s-5); right: var(--lk-s-5);
  text-align: center;
  color: #fff;
  font: var(--lk-t-small-md);
}
.lk-camera__overlay {
  position: absolute; inset: 0;
  background: rgba(17, 24, 39, 0.82);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--lk-s-4);
  color: #fff;
  text-align: center;
  padding: var(--lk-s-6);
}

/* ── Vertical progress (disbursal) ──────────────────────────────────────── */

.lk-vsteps { display: flex; flex-direction: column; }
.lk-vstep { display: flex; gap: var(--lk-s-3); }
.lk-vstep__rail { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.lk-vstep__dot {
  width: 24px; height: 24px;
  border-radius: var(--lk-r-pill);
  border: 2px solid var(--lk-border);
  background: var(--lk-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--lk-muted-2);
}
.lk-vstep__line { width: 2px; flex: 1 1 auto; min-height: 28px; background: var(--lk-border); }
.lk-vstep__body { padding: 1px 0 var(--lk-s-5); flex: 1 1 auto; }
.lk-vstep.is-done .lk-vstep__dot { border-color: var(--lk-success); background: var(--lk-success); color: #fff; }
.lk-vstep.is-done .lk-vstep__line { background: var(--lk-success); }
.lk-vstep.is-active .lk-vstep__dot { border-color: var(--lk-accent); color: var(--lk-accent); }
.lk-vstep__title { font: var(--lk-t-body-md); color: var(--lk-fg-strong); }
.lk-vstep.is-todo .lk-vstep__title { color: var(--lk-muted); font-weight: 400; }
.lk-vstep__sub { font: var(--lk-t-micro); color: var(--lk-muted); margin-top: 2px; }

/* ── KFS document ───────────────────────────────────────────────────────── */

.lk-doc { font: var(--lk-t-micro); color: var(--lk-fg); }
.lk-doc h4 { font: 600 14px/20px var(--lk-font-display); color: var(--lk-fg-strong); margin: var(--lk-s-4) 0 6px; }
.lk-doc table { width: 100%; border-collapse: collapse; }
.lk-doc td {
  padding: 8px 10px;
  border: 1px solid var(--lk-border);
  vertical-align: top;
  font: var(--lk-t-micro);
}
.lk-doc td:first-child { color: var(--lk-muted); width: 54%; }
.lk-doc td:last-child { color: var(--lk-fg-strong); font-weight: 500; text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

.lk-sticky-ack {
  flex: 0 0 auto;
  border-top: 1px solid var(--lk-border);
  padding: var(--lk-s-3) var(--lk-s-5) var(--lk-s-5);
  background: var(--lk-bg);
}

/* ── Provider / partner logo lockup (text marks, no third-party artwork) ── */

.lk-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--lk-s-2);
  padding: 8px 12px;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-r-sm);
  background: var(--lk-bg);
  font: 600 13px/16px var(--lk-font-body);
  color: var(--lk-fg-strong);
}
.lk-lockup__mark {
  width: 22px; height: 22px; flex: 0 0 auto;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font: 700 11px/1 var(--lk-font-display);
  color: #fff;
}

/* ── Gallery board (preview only — not shipped to the app) ──────────────── */

.lk-board { background: var(--lk-surface); padding: 48px 40px 80px; min-height: 100vh; }
.lk-board__head { max-width: 1240px; margin: 0 auto 40px; }
.lk-board__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 32px;
  max-width: 1720px;
  margin: 0 auto;
}
.lk-board__section {
  width: 100%;
  border-top: 1px solid var(--lk-border);
  padding-top: var(--lk-s-6);
  margin-top: var(--lk-s-4);
}
.lk-board__section:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.lk-cell { display: flex; flex-direction: column; gap: 10px; }
.lk-cell__label { display: flex; align-items: baseline; gap: var(--lk-s-2); max-width: var(--lk-frame-w); }
.lk-cell__num {
  font: 600 12px/18px var(--lk-font-mono);
  color: var(--lk-bg);
  background: var(--lk-fg-strong);
  border-radius: var(--lk-r-sm);
  padding: 1px 7px;
  flex: 0 0 auto;
}
.lk-cell__name { font: var(--lk-t-small-md); color: var(--lk-fg-strong); }
.lk-cell__state { font: var(--lk-t-micro); color: var(--lk-muted); }

@media (max-width: 900px) {
  .lk-board { padding: 24px 16px 48px; }
  .lk-board__grid { gap: 32px 16px; }
}

/* ── Specimen board (preview only — component library, not a device frame) ── */

.lk-spec {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  grid-gap: var(--lk-s-6);
  gap: var(--lk-s-6);
  max-width: 1720px;
  margin: 0 auto;
  align-items: start;
}
.lk-spec__card {
  background: var(--lk-bg);
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-r-lg);
  padding: var(--lk-s-5);
}
.lk-spec__card--wide { grid-column: span 2; }
.lk-spec__title {
  font: var(--lk-t-small-md);
  color: var(--lk-fg-strong);
  padding-bottom: var(--lk-s-3);
  margin-bottom: var(--lk-s-4);
  border-bottom: 1px solid var(--lk-border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lk-s-3);
}
.lk-spec__api { font: var(--lk-t-micro); font-family: var(--lk-font-mono); color: var(--lk-muted-2); }
.lk-spec__tag {
  font: 500 11px/16px var(--lk-font-mono);
  color: var(--lk-muted);
  text-transform: lowercase;
  margin-bottom: 6px;
  display: block;
}
.lk-spec__group + .lk-spec__group { margin-top: var(--lk-s-5); }
.lk-spec__row { display: flex; flex-wrap: wrap; gap: var(--lk-s-2); align-items: center; }

/* Colour + type reference */
.lk-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); grid-gap: var(--lk-s-3); gap: var(--lk-s-3); }
.lk-swatch__chip { height: 52px; border-radius: var(--lk-r-sm); border: 1px solid var(--lk-border); }
.lk-swatch__name { font: 500 12px/16px var(--lk-font-body); color: var(--lk-fg-strong); margin-top: 6px; }
.lk-swatch__hex { font: 11px/16px var(--lk-font-mono); color: var(--lk-muted); }

/* Board-level index / launcher */
.lk-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); grid-gap: var(--lk-s-4); gap: var(--lk-s-4); max-width: 1240px; margin: 0 auto; }
.lk-index__card {
  display: block;
  text-decoration: none;
  background: var(--lk-bg);
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-r-lg);
  padding: var(--lk-s-5);
  transition: border-color 120ms ease, background-color 120ms ease;
}
.lk-index__card:hover { border-color: var(--lk-accent); background: var(--lk-accent-soft); }
.lk-index__phase { font: 600 12px/16px var(--lk-font-mono); color: var(--lk-accent); letter-spacing: 0.04em; }
.lk-index__name { font: var(--lk-t-h3); color: var(--lk-fg-strong); margin-top: 6px; }
.lk-index__meta { font: var(--lk-t-micro); color: var(--lk-muted); margin-top: var(--lk-s-2); }

/* Cross-board nav strip */
.lk-boardnav { display: flex; flex-wrap: wrap; gap: var(--lk-s-2); margin-top: var(--lk-s-5); }
.lk-boardnav a {
  font: var(--lk-t-small-md);
  color: var(--lk-fg);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-r-pill);
  background: var(--lk-bg);
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}
.lk-boardnav a:hover { border-color: var(--lk-accent); background: var(--lk-accent-soft); color: var(--lk-accent-press); }
.lk-boardnav a[aria-current="page"] { background: var(--lk-fg-strong); border-color: var(--lk-fg-strong); color: #fff; }

/* Miniature stage for specimens that need a frame context (sheets, toasts). */
.lk-spec__stage {
  position: relative;
  height: 300px;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-r-lg);
  background: var(--lk-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Dashboard: hero, product grid, how-it-works ─────────────────────────
 * The pre-application dashboard is a shop front, not a form. Three bands:
 * one thing we want you to do, everything else we offer, and how it works.
 * Solid accent on the hero — no gradient; the fill is doing hierarchy, not
 * decoration. */

.lk-greet {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--lk-s-3); padding: var(--lk-s-2) 0 var(--lk-s-4);
}
/* The greeting row drawn OUTSIDE .lk-body, as the dashboard's app bar. It
 * takes the frame's gutter here and the body's wide-screen column in
 * responsive.css, so the avatar and the profile glyph line up with the cards
 * beneath them at every width. */
.lk-greet--bar { padding-inline: var(--lk-s-5); }
.lk-greet--bar > .lk-iconbtn:last-child { margin-right: -14px; }
.lk-greet__name { font: var(--lk-t-h3); color: var(--lk-fg-strong); }
.lk-greet__sub { font: var(--lk-t-micro); color: var(--lk-muted); margin-top: 1px; }

.lk-hero {
  background: var(--lk-red-gradient);
  box-shadow: var(--lk-lift-btn);
  border-radius: var(--lk-r-xl);
  padding: var(--lk-s-5);
  color: #fff;
  display: block; width: 100%; text-align: left; border: 0;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.lk-hero:hover { background: var(--lk-accent-hover); }
.lk-hero:active { background: var(--lk-accent-press); }
.lk-hero__eyebrow {
  font: 600 11px/16px var(--lk-font-body); letter-spacing: 0.07em;
  text-transform: uppercase; color: #fff;
}
.lk-hero__title {
  font: 700 26px/32px var(--lk-font-display); letter-spacing: -0.02em;
  margin-top: var(--lk-s-2); color: #fff;
}
.lk-hero__sub { font: var(--lk-t-small); color: #fff; margin-top: var(--lk-s-3); }
.lk-hero__note {
  font: var(--lk-t-micro); color: #fff;
  margin-top: var(--lk-s-4); padding-top: var(--lk-s-3);
  border-top: 1px solid rgba(255,255,255,0.22);
}
.lk-hero__cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--lk-s-4);
  background: #fff; color: var(--lk-accent-press);
  font: 600 14px/1 var(--lk-font-body);
  padding: 11px 16px; border-radius: var(--lk-r-md);
}

/* Product grid. A tile that is not yet available says so and is not
 * tappable — a live-looking tile that does nothing is worse than a label. */
.lk-grid2 { display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--lk-s-3); gap: var(--lk-s-3); }
.lk-ptile {
  border: 1px solid var(--lk-border); border-radius: var(--lk-r-lg);
  background: var(--lk-bg); padding: var(--lk-s-4);
  text-align: left; width: 100%; min-width: 0;
  display: flex; flex-direction: column; gap: var(--lk-s-2);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.lk-ptile:hover { border-color: var(--lk-accent-border); background: var(--lk-accent-soft); }
.lk-ptile__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--lk-s-2); }
.lk-ptile__name { font: var(--lk-t-body-md); color: var(--lk-fg-strong); }
.lk-ptile__sub { font: var(--lk-t-micro); color: var(--lk-muted); }
.lk-ptile.is-soon { cursor: default; background: var(--lk-surface); }
.lk-ptile.is-soon:hover { border-color: var(--lk-border); background: var(--lk-surface); }
.lk-ptile.is-soon .lk-ptile__name { color: var(--lk-muted); }
.lk-ptile.is-soon .lk-slot { background: var(--lk-surface-2); color: var(--lk-muted-2); }

.lk-how { display: flex; flex-direction: column; gap: var(--lk-s-4); }
.lk-how__row { display: flex; gap: var(--lk-s-3); align-items: flex-start; }
.lk-how__n {
  width: 24px; height: 24px; flex: 0 0 auto; border-radius: var(--lk-r-pill);
  background: var(--lk-accent-soft); color: var(--lk-accent-press);
  font: 600 12px/24px var(--lk-font-body); text-align: center;
}
.lk-how__title { font: var(--lk-t-body-md); color: var(--lk-fg-strong); }
.lk-how__sub { font: var(--lk-t-micro); color: var(--lk-muted); margin-top: 1px; }

.lk-sectionhead {
  display: flex; align-items: center; gap: var(--lk-s-3);
  margin: var(--lk-s-6) 0 var(--lk-s-3);
}
.lk-sectionhead::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--lk-border); }

/* ── Document switcher ───────────────────────────────────────────────────
 * The KFS and the loan agreement are one screen, not two steps: they are
 * signed together as a single bundle, so acknowledging them separately
 * invents a distinction the borrower never sees again. The segment carries a
 * read-tick per document, which is what gates the CTA. */

.lk-segment {
  display: flex; gap: 4px;
  padding: 4px;
  background: var(--lk-surface-2);
  border-radius: var(--lk-r-md);
}
.lk-segment__btn {
  flex: 1 1; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 10px;
  border: 0; border-radius: var(--lk-r-sm);
  background: transparent; color: var(--lk-muted);
  font: var(--lk-t-small-md); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background-color 120ms ease, color 120ms ease;
}
.lk-segment__btn:hover { color: var(--lk-fg-strong); }
.lk-segment__btn[aria-selected="true"] {
  background: var(--lk-bg);
  color: var(--lk-fg-strong);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(17,24,39,0.10);
}
/* Read state rides an icon, never colour alone. */
.lk-segment__tick { color: var(--lk-success); display: inline-flex; }

.lk-readhint {
  display: flex; align-items: center; gap: 6px;
  font: var(--lk-t-micro); color: var(--lk-muted);
  padding: var(--lk-s-3) 0 0;
}


/* ── Entry atmosphere: splash, sign-in / OTP, live-loan dashboard ────────
 * The screens a borrower meets before they trust us — and the one they come
 * back to for months afterwards — carry a faint red breath rather than an amber
 * wash, one drifting-pill diagram of the offer, a rotating line about credit.
 * The working screens in between stay white, so nothing competes with a
 * figure or a consent.
 * Every decorative layer is aria-hidden and pointer-events:none — it never
 * sits between a thumb and a control. */

.lk-aura {
  position: absolute;
  inset: 0;
  /* Behind the screen's own content, above the frame's white background —
   * which needs the isolate below, or -1 would drop it behind the frame. */
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  /* Money bro's own surfaces are red and WHITE. The cream/amber wash this
   * used to carry was off-brand — the site has no golden background anywhere
   * — so the entry screens now sit on white with two faint red breaths. */
  /* Plain white. Money bro's working screens carry no background tint at
   * all — red is spent on surfaces and controls, never on the page. */
  background: var(--lk-bg);
}
.lk-aura__orb { display: none; }
.lk-aura__orb--legacy { position: absolute; border-radius: var(--lk-r-pill); filter: blur(38px); opacity: 0.55; }
.lk-aura__orb--warm { width: 240px; height: 240px; top: -74px; right: -78px; background: radial-gradient(circle, #FFD6D6, #FFF1F1 70%); }
.lk-aura__orb--rose  { width: 210px; height: 210px; bottom: -80px; left: -66px; background: radial-gradient(circle, #FFC2C2, var(--lk-accent-soft) 72%); }
/* Faint ledger grid — money on ruled paper. */
.lk-aura__grid {
  display: none;
  position: absolute; inset: 0; opacity: 0.5;
  background-image:
    linear-gradient(rgba(229, 28, 35, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229, 28, 35, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(78% 55% at 50% 26%, #000 0%, transparent 76%);
          mask-image: radial-gradient(78% 55% at 50% 26%, #000 0%, transparent 76%);
}

/* ── Red surface: the splash and the success frame ───────────────────────
 * Money bro bookends its own page with a red hero and a red closing band and
 * keeps everything between them white. The app does the same: the splash is
 * the first red surface, the disbursal success is the last, and no working
 * screen in between is allowed one.
 *
 * `--red` is a modifier on .lk-aura so ONLY the splash turns red — sign-in and
 * the live-loan dashboard share the Aura component and stay on the white wash.
 *
 * TEXT ON RED IS ALWAYS PURE WHITE. Measured on the lighter end of the
 * gradient (#E51C23): pure white is 4.64:1, white at 90% is 4.07:1, at 84% is
 * 3.77:1. There is no headroom under the 4.5:1 AA floor, so hierarchy is
 * carried by size and weight, never by a lighter tint. */

.lk-aura--red {
  background: var(--lk-red-gradient);
}
.lk-aura--red::before,
.lk-aura--red::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.lk-aura--red::before {
  width: 360px; height: 360px; top: -140px; right: -130px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, transparent 70%);
}
.lk-aura--red::after {
  width: 340px; height: 340px; bottom: -150px; left: -140px;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.20) 0%, transparent 70%);
}
/* The red aura hides the warm orbs and the ledger grid — they were drawn for
 * a cream background and turn to mud on red. */
.lk-aura--red .lk-aura__orb,
.lk-aura--red .lk-aura__grid { display: none; }

.lk-on-red,
.lk-on-red .lk-h1, .lk-on-red .lk-h2, .lk-on-red .lk-h3, .lk-on-red .lk-display,
.lk-on-red .lk-p, .lk-on-red .lk-small, .lk-on-red .lk-micro,
.lk-on-red .lk-strong, .lk-on-red .lk-num, .lk-on-red .lk-eyebrow,
.lk-on-red .lk-kv__k, .lk-on-red .lk-kv__v, .lk-on-red .lk-statusbar,
.lk-on-red .lk-wordmark, .lk-on-red .lk-quote, .lk-on-red .lk-quote__by,
.lk-card--red,
.lk-card--red .lk-h1, .lk-card--red .lk-h2, .lk-card--red .lk-h3,
.lk-card--red .lk-display, .lk-card--red .lk-p, .lk-card--red .lk-small,
.lk-card--red .lk-micro, .lk-card--red .lk-strong, .lk-card--red .lk-num,
.lk-card--red .lk-eyebrow, .lk-card--red .lk-kv__k, .lk-card--red .lk-kv__v {
  color: #fff;
}
/* .lk-amount sets its own colour, so it needs naming explicitly. */
.lk-on-red .lk-amount__value, .lk-card--red .lk-amount__value,
.lk-on-red .lk-amount__caption, .lk-card--red .lk-amount__caption,
.lk-on-red .lk-list__title, .lk-card--red .lk-list__title,
.lk-on-red .lk-list__sub, .lk-card--red .lk-list__sub { color: #fff; }

/* A pale-tinted badge disappears on red; give it a solid dark-red fill,
 * which is 6.57:1 against white text. */
.lk-on-red .lk-badge, .lk-card--red .lk-badge {
  background: var(--lk-accent-press); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.30);
}

/* The dashboard money card, when it carries a live loan. Higher specificity
 * than .lk-moneycard's own background so source order cannot decide it. */
.lk-moneycard.lk-card--red {
  background: var(--lk-red-gradient);
  border-color: transparent;
  box-shadow: var(--lk-lift-btn);
}
.lk-moneycard.lk-card--red .lk-track__label { color: #fff; }
.lk-moneycard.lk-card--red .lk-track__dot { background: #fff; color: var(--lk-accent-press); box-shadow: none; }

.lk-on-red .lk-iconbtn { color: #fff; }
.lk-on-red .lk-iconbtn:hover { background: rgba(255, 255, 255, 0.18); }
.lk-on-red .lk-kv + .lk-kv,
.lk-card--red .lk-kv + .lk-kv { border-top-color: rgba(255, 255, 255, 0.22); }
.lk-on-red .lk-divider, .lk-card--red .lk-divider { background: rgba(255, 255, 255, 0.22); }

/* A red button on a red surface is invisible: swap both channels together. */
.lk-on-red .lk-btn--primary,
.lk-card--red .lk-btn--primary {
  background: #fff; color: var(--lk-accent-press);
  box-shadow: 0 8px 24px rgba(26, 32, 44, 0.24);
}
.lk-on-red .lk-btn--primary:hover,
.lk-card--red .lk-btn--primary:hover { background: var(--lk-accent-soft); color: var(--lk-accent-press); }
.lk-on-red .lk-btn--secondary, .lk-on-red .lk-btn--ghost,
.lk-card--red .lk-btn--secondary, .lk-card--red .lk-btn--ghost {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55);
}
.lk-on-red .lk-btn--secondary:hover, .lk-on-red .lk-btn--ghost:hover,
.lk-card--red .lk-btn--secondary:hover, .lk-card--red .lk-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.16); color: #fff; border-color: #fff;
}
.lk-on-red :focus-visible, .lk-card--red :focus-visible { outline-color: #fff; }
/* The dock on a red frame is part of the surface, not a white shelf. */
.lk-on-red .lk-dock { background: transparent; box-shadow: none; }

/* Red gradient panel — the offer figure, the amount outstanding. One per
 * screen; it is the number the borrower came for. */
.lk-card--red {
  background: var(--lk-red-gradient);
  border-color: transparent;
  box-shadow: var(--lk-lift-btn);
}

/* A white panel on a red surface reads as a hole punched in the brand. On
 * red, panels become a translucent white wash instead. */
.lk-on-red .lk-card--inset,
.lk-on-red .lk-card--accent {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.20);
}
.lk-on-red .lk-card--inset .lk-small,
.lk-on-red .lk-card--accent .lk-small { color: #fff; }

/* The offer headline carries the figure the borrower came for, so it runs at
 * display size on the red card rather than at normal h1. */
.lk-offerhead { font: 700 28px/34px var(--lk-font-display); letter-spacing: -0.03em; }

/* Document viewer. A regulated nine-part disclosure reads as a document when
 * it sits in a frame with an edge, and as a wall when it does not. */
.lk-docview {
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-r-lg);
  background: var(--lk-bg);
  padding: var(--lk-s-4);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lk-docview::-webkit-scrollbar { width: 4px; }
.lk-docview::-webkit-scrollbar-thumb { background: var(--lk-field-border); border-radius: 4px; }

/* The read gate states WHY it is locked rather than just sitting grey. */
.lk-gate {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font: var(--lk-t-micro); color: var(--lk-muted-2);
}
.lk-gate.is-open { color: var(--lk-success); }

/* Mandate rails as a three-up card row — the app you already use, picked at a
 * glance, rather than three identical list rows. */
.lk-applogos { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: var(--lk-s-2); gap: var(--lk-s-2); }
.lk-applogo {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px 8px;
  border: 1.5px solid var(--lk-border);
  border-radius: var(--lk-r-md);
  background: var(--lk-bg);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.lk-applogo:hover { border-color: var(--lk-accent-border); background: var(--lk-accent-soft); }
.lk-applogo[aria-busy="true"] { border-color: var(--lk-accent); background: var(--lk-accent-soft); }
.lk-applogo__mark {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  font: 800 15px var(--lk-font-display);
  background: var(--lk-surface-2); color: var(--lk-fg-strong);
}
.lk-applogo__name { font: 600 12.5px/16px var(--lk-font-body); color: var(--lk-fg-strong); text-align: center; }
/* A rail on the screen that cannot be picked yet (plan 2026-09-26 U15): muted,
 * no hover, and a small "Coming soon" line under the name. */
.lk-applogo.is-locked { cursor: not-allowed; opacity: 0.55; }
.lk-applogo.is-locked:hover { border-color: var(--lk-border); background: var(--lk-bg); }
.lk-applogo__lock {
  display: inline-flex; align-items: center; gap: 4px;
  font: var(--lk-t-micro); color: var(--lk-muted-2);
}

/* Repayment countdown — a FILLED bar, never an outline. */
.lk-countdown {
  height: 8px; border-radius: var(--lk-r-pill);
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}
.lk-countdown > i { display: block; height: 100%; background: #fff; border-radius: var(--lk-r-pill); }
.lk-countdown-ends { display: flex; justify-content: space-between; margin-top: 7px; }

/* Two-up quick actions. A returning borrower comes back to do one of four
 * things; four tiles read faster than four identical list rows. */
.lk-quickgrid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; gap: 10px; }
.lk-quick {
  display: flex; align-items: center; gap: 10px;
  padding: 14px;
  border: 1px solid var(--lk-border); border-radius: var(--lk-r-md);
  background: var(--lk-bg); text-align: left; width: 100%;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.lk-quick:hover { border-color: var(--lk-accent-border); background: var(--lk-accent-soft); }
.lk-quick .lk-slot { width: 34px; height: 34px; flex: 0 0 auto; }
.lk-quick__name { font: 600 13.5px/1.3 var(--lk-font-body); color: var(--lk-fg-strong); }

/* Greeting avatar: the borrower's initials in a tinted disc, as the design
 * has it — not a photo, which is not always present. */
.lk-initials {
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: var(--lk-r-pill);
  display: grid; place-items: center;
  background: var(--lk-accent-soft); color: var(--lk-accent-press);
  border: 1px solid var(--lk-accent-border);
  font: 700 15px var(--lk-font-display);
}
/* Same circle carrying a photo instead of two letters. overflow is what makes
 * the border-radius actually clip the image — without it the picture sits
 * square inside a round frame. */
.lk-initials--photo { overflow: hidden; padding: 0; background: var(--lk-surface-2); }

/* Language picker — ONE column of rounded rows, not a two-up grid of square
 * tiles. Each row stacks the native name over the Latin one and carries a
 * tick on the right, so the chosen language is legible at a glance. */
.lk-langlist { display: flex; flex-direction: column; gap: 8px; }
.lk-lang {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left;
  min-height: var(--lk-tap);
  padding: 13px 16px;
  border: 1.5px solid var(--lk-border);
  border-radius: var(--lk-r-md);
  background: var(--lk-bg);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.lk-lang:hover { border-color: var(--lk-accent-border); background: var(--lk-accent-soft); }
.lk-lang.is-selected { border-color: var(--lk-accent); background: var(--lk-accent-soft); }
.lk-lang__native { display: block; font: 600 16px/22px var(--lk-font-body); color: var(--lk-fg-strong); }
.lk-lang__latin { display: block; margin-top: 1px; font: var(--lk-t-micro); color: var(--lk-muted-2); }
.lk-lang__tick {
  width: 20px; height: 20px; flex: 0 0 auto;
  border-radius: var(--lk-r-pill);
  border: 2px solid var(--lk-field-border);
  display: grid; place-items: center;
  color: transparent;
}
.lk-lang.is-selected .lk-lang__tick {
  background: var(--lk-accent); border-color: var(--lk-accent); color: #fff;
}

/* A CHOICE is a standalone rounded card, not a row in a bordered list. The
 * design uses it wherever the borrower is picking between options — the
 * declaration, an address, a repayment date. */
.lk-choicelist { display: flex; flex-direction: column; gap: 8px; }
.lk-choice {
  display: flex; align-items: center; gap: var(--lk-s-3);
  width: 100%; text-align: left;
  padding: var(--lk-s-4);
  border: 1.5px solid var(--lk-border);
  border-radius: var(--lk-r-md);
  background: var(--lk-bg);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.lk-choice:hover { border-color: var(--lk-accent-border); background: var(--lk-accent-soft); }
.lk-choice.is-selected { border-color: var(--lk-accent); background: var(--lk-accent-soft); }
.lk-choice__tick {
  width: 22px; height: 22px; flex: 0 0 auto;
  border-radius: var(--lk-r-pill);
  border: 2px solid var(--lk-field-border);
  display: grid; place-items: center;
  color: transparent;
}
.lk-choice.is-selected .lk-choice__tick {
  background: var(--lk-accent); border-color: var(--lk-accent); color: #fff;
}
.lk-choice__body { flex: 1 1; min-width: 0; }
.lk-choice__title { display: block; font: var(--lk-t-body-md); color: var(--lk-fg-strong); }
.lk-choice__sub { display: block; margin-top: 2px; font: var(--lk-t-micro); color: var(--lk-muted); }

/* Success ring — the one screen allowed to celebrate. */
.lk-ring {
  width: 92px; height: 92px; flex: 0 0 auto;
  border-radius: var(--lk-r-pill);
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.16);
  border: 2px solid rgba(255, 255, 255, 0.40);
  color: #fff;
}

/* Callout. No coloured bar down the left edge — a tinted panel and an icon. */
.lk-note {
  display: flex; gap: var(--lk-s-3);
  padding: var(--lk-s-4);
  border-radius: var(--lk-r-md);
  background: var(--lk-surface);
}
.lk-note > svg { flex: 0 0 auto; margin-top: 2px; color: var(--lk-muted); }
.lk-note--warm { background: var(--lk-warm-soft); }
.lk-note--warm > svg, .lk-note--warm .lk-small { color: var(--lk-warm-deep); }
.lk-note--error { background: var(--lk-error-soft); }
.lk-note--error > svg, .lk-note--error .lk-small { color: var(--lk-error); }

/* A screen returns a fragment into the Frame's flex column, so the red
 * wrapper must not create a box of its own. display:contents removes it from
 * layout while keeping it in the tree for inheritance and descendant rules. */
.lk-contents { display: contents; }

/* The benefit pills on a red surface: translucent white, not white cards. */
.lk-on-red .lk-float {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.20);
  color: #fff;
  box-shadow: none;
}
.lk-on-red .lk-float__i,
.lk-on-red .lk-float__i--warm,
.lk-on-red .lk-float__i--success {
  background: rgba(255, 255, 255, 0.20);
  color: #fff;
}
.lk-on-red .lk-secure, .lk-on-red .lk-secure svg { color: rgba(255, 255, 255, 0.92); }
.lk-on-red .lk-quote::before { color: rgba(255, 255, 255, 0.45); }
.lk-on-red .lk-wordmark em { color: var(--lk-warm); }

/* The splash lockup — Money bro's own monogram, not a drawn stand-in. */
.lk-splashmark {
  width: 96px; height: 96px;
  border-radius: 26px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  display: block;
}

/* Honest labelling for illustrative figures — never a fabricated metric
 * presented as real. */
.lk-sample {
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 10.5px/14px var(--lk-font-mono);
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--lk-muted-2);
}
.lk-sample::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--lk-warm);
}

/* On a decorated screen the dock stops being a white shelf. */
.lk-frame:has(.lk-aura) { isolation: isolate; }
.lk-frame:has(.lk-aura) .lk-dock { background: transparent; box-shadow: 0 -1px 0 rgba(229, 231, 235, 0.7); }

/* ── Brand mark ─────────────────────────────────────────────────────────── */

.lk-mark { position: relative; display: inline-flex; }
.lk-mark__tile {
  position: relative; overflow: hidden;
  width: 78px; height: 78px; border-radius: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(145deg, var(--lk-accent-bright) 0%, var(--lk-accent) 46%, var(--lk-accent-press) 100%);
  box-shadow: 0 14px 30px rgba(229, 28, 35, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.lk-mark__tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(205deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 46%);
}
.lk-mark__halo {
  position: absolute; inset: 0; border-radius: 22px;
  border: 1px solid var(--lk-accent-border);
  animation: lk-halo 2.8s ease-out infinite;
}
.lk-mark__halo--2 { animation-delay: 1.4s; }

.lk-wordmark { font: 700 32px/38px var(--lk-font-display); letter-spacing: -0.02em; color: var(--lk-fg-strong); }
.lk-wordmark em {
  font-style: normal;
  background: linear-gradient(92deg, var(--lk-accent), var(--lk-accent-press));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Rotating credit line ───────────────────────────────────────────────── */

.lk-quote {
  position: relative; text-align: left;
  max-width: 31ch; padding: 13px 16px 13px 36px;
  border-radius: var(--lk-r-lg);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--lk-accent-border);
  box-shadow: 0 8px 22px rgba(17, 24, 39, 0.06);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 500 14px/20px var(--lk-font-body); color: var(--lk-fg);
}
.lk-quote::before {
  content: "\201C"; position: absolute; left: 13px; top: 4px;
  font: 700 34px/1 var(--lk-font-display); color: var(--lk-accent-border);
}
.lk-quote__by { display: block; margin-top: 5px; font: var(--lk-t-micro); color: var(--lk-muted-2); }

/* On the red splash the quote card was a pale block of pale text — the one
 * genuinely unreadable thing on that screen. On red it becomes a translucent
 * white panel with pure white type, like every other surface there. */
.lk-on-red .lk-quote {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: none;
  color: #fff;
}
.lk-on-red .lk-quote::before { color: rgba(255, 255, 255, 0.55); }
.lk-on-red .lk-quote__by { color: rgba(255, 255, 255, 0.86); }

/* ── Floating benefit pills ─────────────────────────────────────────────── */

/* One box size for all three. The column shrink-wraps to the widest pill and
 * `align-items: stretch` pulls the other two out to match, so the three share
 * a left edge, a right edge and a height; each pill then centres its own icon
 * and label, matching the centred hero column above. The previous staggered
 * absolute placement read as broken alignment rather than as drift. */
.lk-floats {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 10px; width: auto; max-width: 330px; height: auto;
}
.lk-floats__path { display: none; }

.lk-float {
  position: static;
  display: flex; align-items: center; justify-content: center; gap: 11px;
  min-height: 44px;
  padding: 11px 18px; border-radius: var(--lk-r-pill);
  background: #fff; border: 1px solid var(--lk-border);
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.10);
  font: 600 13px/18px var(--lk-font-body); color: var(--lk-fg-strong);
  text-align: center;
  animation: none;
}
.lk-float__i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--lk-r-sm); flex: 0 0 auto;
  background: var(--lk-accent-soft); color: var(--lk-accent);
}
.lk-float__i--warm { background: var(--lk-accent-soft); color: var(--lk-accent); }
.lk-float__i--success { background: var(--lk-success-soft); color: var(--lk-success); }
.lk-float--a, .lk-float--b, .lk-float--c { inset: auto; animation-delay: 0s; }

/* Same pill, laid out in normal flow (sign-in header). */
.lk-featrow { display: flex; flex-wrap: wrap; gap: var(--lk-s-2); }
.lk-featrow .lk-float { position: static; animation: none; padding: 7px 12px 7px 7px; font-size: 12px; box-shadow: 0 4px 14px rgba(17, 24, 39, 0.07); }
.lk-featrow .lk-float__i { width: 24px; height: 24px; }

/* ── Sign-in hero ───────────────────────────────────────────────────────── */

/* Modifier on the existing .lk-eyebrow — the entry screens warm it up and
 * give it room for a leading icon; every other eyebrow in the kit is
 * untouched. */
.lk-eyebrow--warm {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; letter-spacing: 0.08em;
  color: var(--lk-accent);
}
.lk-heroline { font: 700 28px/34px var(--lk-font-display); letter-spacing: -0.02em; color: var(--lk-fg-strong); }
.lk-heroline em {
  font-style: normal;
  background: linear-gradient(92deg, var(--lk-accent), var(--lk-accent-press));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lk-timechip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--lk-r-pill);
  background: #fff; border: 1px solid var(--lk-border);
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.06);
  font: var(--lk-t-small); color: var(--lk-muted);
}
.lk-timechip svg { color: var(--lk-accent); }
.lk-timechip b { color: var(--lk-success); font-weight: 600; }

/* Form panel, so the fields read as a card on the wash rather than a hole. */
.lk-glass {
  border-radius: var(--lk-r-xl);
  padding: var(--lk-s-4);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(229, 231, 235, 0.95);
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.06);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* ── Trust strip ────────────────────────────────────────────────────────── */

/* NEUTRAL, NOT GREEN.
 *
 * The strip was a mint tint with a green edge and green type. Green is
 * reserved for one meaning in this kit — a success tick — and a licence
 * number is not an outcome; borrowing the colour for a credential both
 * spends the signal and, since the rebrand, sits against a red-and-white
 * palette wearing the one hue that palette does not contain. A quiet panel
 * in the neutral ramp says the same thing and belongs to the page. */
.lk-trust {
  display: flex; align-items: center; justify-content: center;
  gap: var(--lk-s-2); flex-wrap: wrap;
  padding: 9px var(--lk-s-3); border-radius: var(--lk-r-lg);
  background: var(--lk-surface); border: 1px solid var(--lk-border);
  font: var(--lk-t-micro);
}
.lk-trust__item { display: inline-flex; align-items: center; gap: 6px; color: var(--lk-fg-strong); font-weight: 600; }
.lk-trust__item--muted { color: var(--lk-muted); font-weight: 400; }
.lk-trust__dot { width: 4px; height: 4px; border-radius: var(--lk-r-pill); background: var(--lk-field-border); }

/* ON RED: THE PANEL, NOT ONLY THE WORDS.
 *
 * This rule used to recolour the text alone, which left the splash — the
 * first screen anybody sees — carrying white type on the near-white mint
 * panel underneath it. The words were the least of it: a pale green box on
 * the brand's red is the wrong object entirely. Glass instead: the red shows
 * through, and the text has a surface dark enough to sit on. */
.lk-on-red .lk-trust {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
}
.lk-on-red .lk-trust,
.lk-on-red .lk-trust__item { color: #fff; }
.lk-on-red .lk-trust__item--muted { color: rgba(255, 255, 255, 0.82); }
.lk-on-red .lk-trust__dot { background: rgba(255, 255, 255, 0.55); }

/* ── OTP sheet head ─────────────────────────────────────────────────────── */

.lk-sheethead { display: flex; align-items: center; gap: var(--lk-s-3); }
.lk-sheethead__icon {
  flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--lk-accent);
  background: var(--lk-accent-soft);
  border: 1px solid var(--lk-accent-border);
}

/* ── Motion ─────────────────────────────────────────────────────────────── */

@keyframes lk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes lk-halo { 0% { transform: scale(0.94); opacity: 0.7; } 70% { transform: scale(1.45); opacity: 0; } 100% { opacity: 0; } }
@keyframes lk-fadeup { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

.lk-rise { animation: lk-fadeup 520ms ease both; }
.lk-rise--2 { animation-delay: 90ms; }
.lk-rise--3 { animation-delay: 180ms; }
.lk-rise--4 { animation-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  .lk-float, .lk-rise, .lk-mark__halo { animation: none !important; }
}

/* ── Servicing hero: the money card and its track ────────────────────────
 * The live-loan dashboard opens on one number. Centring the status row over
 * it — rather than hanging it off the left edge above a centred amount —
 * makes the top of the screen read as one block, and the track underneath
 * answers the only question a borrower has while a disbursal is in flight:
 * where is it now. */

.lk-moneycard {
  position: relative; overflow: hidden;
  padding: var(--lk-s-5) var(--lk-s-4);
  border-radius: var(--lk-r-xl);
  border: 1px solid var(--lk-border);
  text-align: center;
  background:
    radial-gradient(115% 85% at 50% -20%, var(--lk-accent-soft), rgba(255, 255, 255, 0) 68%),
    linear-gradient(180deg, #FFFFFF 0%, #FFF8F8 100%);
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.06);
}
.lk-moneycard__status { display: flex; align-items: center; justify-content: center; gap: var(--lk-s-2); }
.lk-moneycard .lk-amount { padding: var(--lk-s-3) 0 0; }

/* Three stops, horizontal. The connector into a step is filled when that step
 * has been reached, so the line reads as progress and not as decoration. */
.lk-track { display: flex; margin-top: var(--lk-s-5); }
.lk-track__step {
  position: relative; flex: 1 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.lk-track__step::before {
  content: ""; position: absolute; top: 10px; left: -50%;
  width: 100%; height: 2px; background: var(--lk-border);
}
.lk-track__step:first-child::before { display: none; }
.lk-track__step.is-done::before, .lk-track__step.is-active::before { background: var(--lk-success); }
.lk-track__dot {
  position: relative; z-index: 1;
  width: 22px; height: 22px; border-radius: var(--lk-r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lk-bg); color: var(--lk-muted-2);
  box-shadow: 0 0 0 1px var(--lk-border);
}
.lk-track__step.is-done .lk-track__dot { background: var(--lk-success); color: #fff; box-shadow: none; }
.lk-track__step.is-active .lk-track__dot {
  background: var(--lk-accent); color: #fff;
  box-shadow: 0 0 0 4px var(--lk-accent-soft);
}
.lk-track__label {
  font: 600 11px/14px var(--lk-font-body); color: var(--lk-muted);
  text-align: center; max-width: 12ch;
}
.lk-track__step.is-active .lk-track__label { color: var(--lk-fg-strong); }

/* ── Cool-off countdown ──────────────────────────────────────────────────
 *
 * The wait a declined borrower is serving, as a duration rather than a date.
 * Centred and given the largest type on the card on purpose: it is the only
 * thing there they can act on. See screens/CooloffCountdown.tsx.
 */
.lk-cooloff {
  margin-top: var(--lk-s-4);
  padding: var(--lk-s-4) var(--lk-s-3);
  border-radius: var(--lk-r-md);
  background: var(--lk-surface-2);
  text-align: center;
}
.lk-cooloff__label {
  font: var(--lk-t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lk-muted);
}
.lk-cooloff__clock {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--lk-s-2);
  margin-top: var(--lk-s-2);
}
.lk-cooloff__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
}
/* Tabular figures so the digits do not shuffle sideways every second. */
.lk-cooloff__n {
  font-size: 30px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--lk-fg-strong);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "tnum";
}
.lk-cooloff__u {
  font: var(--lk-t-micro);
  color: var(--lk-muted);
  margin-top: 2px;
}
.lk-cooloff__sep {
  font-size: 24px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--lk-muted-2);
}
.lk-cooloff__on {
  font: var(--lk-t-micro);
  color: var(--lk-muted);
  margin-top: var(--lk-s-2);
}
.lk-cooloff--over .lk-cooloff__label {
  color: var(--lk-success);
  letter-spacing: 0;
  text-transform: none;
  font: var(--lk-t-body-md);
}

/* The decline card's head. Top-aligned, because the title wraps to two lines
 * on a phone and a centred 36px square then floats between them. */
.lk-card__head--top { align-items: flex-start; }

/* The page footer's legal block.
 *
 * ONE BLOCK, ONE AXIS, ONE MEASURE. It was a left-aligned trust row inside a
 * centred wrapper with a centred sentence under it — three different
 * alignments in four lines of 12px text, which is what made the bottom of the
 * dashboard look untidy however tidy each piece was on its own.
 *
 * The hairline is what makes it read as a footer rather than as two orphaned
 * sentences after the hero: it separates the page's content from the page's
 * small print, which is the actual relationship.
 */
.lk-footnote {
  text-align: center;
  border-top: 1px solid var(--lk-line);
  padding-top: var(--lk-s-4);
}
.lk-footnote .lk-secure,
.lk-footnote .lk-micro {
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}

/* The hero, locked.
 *
 * A declined borrower's loan card was a 50%-opacity disabled button and
 * nothing else, which reads as "greyed out, probably broken" rather than
 * "locked until the date above". Dimming states a fault; a lock states a rule.
 * Less transparency than before (opacity 0.5 made the white type on red
 * unreadable), and the label carries the meaning instead.
 */
.lk-hero--locked {
  opacity: 0.72;
  cursor: default;
  filter: saturate(0.85);
}
.lk-hero__lock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--lk-s-2);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font: var(--lk-t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  vertical-align: 1px;
}

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/ui-kit/styles/responsive.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
/* ─────────────────────────────────────────────────────────────────────────
 * Lending Kit — responsive layer
 *
 * Split out of ui-kit.css so neither file outgrows a single reading. Load it
 * LAST; several rules here intentionally override the base component sizes.
 *
 * Import order:  tokens.css  →  ui-kit.css  →  responsive.css
 * ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
 * Responsive behaviour
 *
 * The frame is a CONTAINER, not a viewport. Every rule below keys off the
 * frame's own inline size, so one screen adapts identically whether it is a
 * 390px mock sitting in the gallery board or a full-screen tablet app. That is
 * why the preview can prove the responsive behaviour rather than approximate it.
 *
 *   .lk-frame          reference device (390 × 844), used by the boards
 *   .lk-frame--fluid   fills its viewport — this is what ships in the app
 * ═══════════════════════════════════════════════════════════════════════════ */

.lk-frame {
  container-type: inline-size;
  container-name: lkframe;
  max-width: 100%;
}

/* Shipped mode: the screen IS the viewport. 100dvh, not 100vh, so the Android
 * URL bar collapsing does not leave the docked CTA under the fold. */
.lk-frame--fluid {
  width: 100%;
  max-width: none;
  height: 100dvh;
  border: 0;
  border-radius: 0;
}
/* The mock Android status bar (9:41, signal, wifi, battery) is device chrome
 * for the boards. The shipped app runs under the phone's own status bar, so
 * drawing a second one is a fake strip of screen. */
.lk-frame--fluid .lk-statusbar { display: none; }
/* Desktop browser running the mobile app — stop it sprawling. */
@media (min-width: 1180px) {
  .lk-frame--fluid {
    max-width: 1100px;
    margin-inline: auto;
    /* No rule lines at the sides: the page behind the frame is painted the
     * same white, so the frame's edge is invisible and the content column
     * (responsive rules above) is the only thing that reads as the screen. */
  }
}

/* ── Compact phones (≤360px frame) ──────────────────────────────────────────
 * Small Androids still exist. Tighten the gutter, drop the stepper to dots,
 * and step the display sizes down — never let anything overflow sideways. */
@container lkframe (max-width: 360px) {
  .lk-statusbar,
  .lk-body,
  .lk-dock,
  .lk-sticky-ack,
  .lk-greet--bar,
  .lk-stepper { padding-left: var(--lk-s-4); padding-right: var(--lk-s-4); }
  .lk-body--flush { padding-left: 0; padding-right: 0; }

  /* Same behaviour as .lk-stepper--compact, applied automatically. */
  .lk-step:not(.is-active) .lk-step__label { display: none; }

  .lk-h1 { font-size: 22px; line-height: 30px; }
  .lk-amount__value { font-size: 34px; line-height: 42px; }
  .lk-display { font-size: 27px; line-height: 34px; }

  .lk-otp { gap: 6px; }
  .lk-otp__box { height: 52px; font-size: 20px; }

  .lk-chip { padding: 0 14px; }
  /* Most of a narrow frame, like every phone (task 12); shape from the base rule. */
  .lk-camera__oval { width: min(80%, 280px); }
  .lk-camera__tip { padding: 8px; font-size: 11px; }
}

/* ── Tablets and large phones (≥700px frame) ────────────────────────────────
 * Stop stretching, start centring. A form field the width of an iPad is a
 * worse experience than the phone layout, not a better one. */
@container lkframe (min-width: 700px) {
  /* The content fills the frame with the ordinary gutter. A centred reading
   * column (max(gutter, (100cqw - measure) / 2)) used to sit here, and on a
   * tablet-width frame it left a band of empty white down each side that read
   * as the app not fitting the screen. */
  .lk-statusbar,
  .lk-stepper,
  .lk-body,
  .lk-dock,
  .lk-sticky-ack,
  .lk-greet--bar { padding-inline: var(--lk-s-6); }
  .lk-appbar { padding-inline: var(--lk-s-2); }
  .lk-body--flush { padding-inline: 0; }

  /* A full-width button across a tablet reads as an error. Cap and centre it,
   * but keep it the only primary action on screen. */
  .lk-dock .lk-btn--block,
  .lk-sticky-ack .lk-btn--block { max-width: var(--lk-cta-max); margin-inline: auto; }
  .lk-sticky-ack .lk-check { max-width: var(--lk-cta-max); margin-inline: auto; }

  /* Bottom nav spread over 1024px loses the thumb relationship entirely. */
  .lk-nav { padding-inline: max(0px, (100cqw - 560px) / 2); }

  /* Sheets rise from the bottom edge but stay a readable column. */
  .lk-sheet {
    max-width: var(--lk-measure);
    margin-inline: auto;
    width: 100%;
    border-radius: var(--lk-r-xl) var(--lk-r-xl) 0 0;
  }
  .lk-toast { left: auto; right: auto; width: min(520px, 100cqw - 32px); margin-inline: auto; inset-inline: 0; }

  /* More room earns slightly more presence, not a different design. */
  .lk-h1 { font-size: 28px; line-height: 36px; }
  .lk-amount__value { font-size: 48px; line-height: 56px; }
  .lk-camera__oval { width: min(56%, 380px); }
}

/* ── Wide tablets in landscape (≥1000px frame) ──────────────────────────────
 * The measure is already capped; only the chrome needs the extra breathing
 * room so the app bar does not float alone at the top of an empty band. */
@container lkframe (min-width: 1000px) {
  .lk-appbar { height: 60px; }
  .lk-body { padding-bottom: var(--lk-s-10); }
}

/* ── Gallery board on small screens ─────────────────────────────────────────
 * The boards are documentation, not the product, but they still have to be
 * readable on the phone you are holding while reviewing them. */
@media (max-width: 720px) {
  .lk-board { padding: 24px 16px 48px; }
  .lk-board__grid { gap: 28px 16px; }
  .lk-spec { grid-template-columns: 1fr; gap: var(--lk-s-4); }
  .lk-spec__card--wide { grid-column: auto; }
  .lk-board__head .lk-h1 { font-size: 22px; line-height: 30px; }
}

/* Never let a fixed-width frame push the board sideways. */
.lk-cell,
.lk-board__grid > * { min-width: 0; max-width: 100%; }
.lk-spec { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.lk-index { grid-template-columns: repeat(auto-fill, minmax(min(268px, 100%), 1fr)); }

/*!***********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/ui-kit/styles/web.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************/
/* ─────────────────────────────────────────────────────────────────────────
 * Lending Kit — web shell
 *
 * The LOS is a WEBSITE. The 390px frames in the other boards are its phone
 * breakpoint, not a separate product — every component class is shared. What
 * changes on a desktop viewport is the SHELL, and only the shell:
 *
 *   bottom nav      → top navigation (a bottom bar is a mobile idiom; on a
 *                     desktop it sits 900px from the content and the pointer)
 *   pinned dock CTA → an inline action at the end of the form, capped in width
 *                     (a button stretched across 1400px reads as a bug)
 *   single column   → form column + sticky context rail, so the offer the
 *                     borrower is agreeing to stays on screen while they type
 *   28px status bar → browser chrome; the OS bar belongs to the phone build
 *
 * Import order:  tokens.css → ui-kit.css → responsive.css → web.css
 * ───────────────────────────────────────────────────────────────────────── */

.lk-web {
  min-height: 100%;
  background: var(--lk-surface);
  display: flex;
  flex-direction: column;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.lk-web__bar {
  flex: 0 0 auto;
  height: 64px;
  display: flex;
  align-items: center;
  gap: var(--lk-s-6);
  padding: 0 var(--lk-s-8);
  background: var(--lk-bg);
  border-bottom: 1px solid var(--lk-border);
}
.lk-web__brand {
  display: inline-flex; align-items: center; gap: var(--lk-s-2);
  font: var(--lk-t-h3); color: var(--lk-fg-strong); flex: 0 0 auto;
}
.lk-web__brand-mark {
  width: 30px; height: 30px; border-radius: var(--lk-r-sm);
  background: var(--lk-accent); color: #fff;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.lk-web__nav { display: flex; align-items: center; gap: 2px; margin-left: var(--lk-s-4); }
.lk-web__nav a {
  padding: 8px 14px; border-radius: var(--lk-r-sm);
  font: var(--lk-t-small-md); color: var(--lk-muted); text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}
.lk-web__nav a:hover { background: var(--lk-surface); color: var(--lk-fg-strong); }
.lk-web__nav a[aria-current="page"] { color: var(--lk-accent); background: var(--lk-accent-soft); font-weight: 600; }
.lk-web__util { margin-left: auto; display: flex; align-items: center; gap: var(--lk-s-4); }
.lk-web__secure {
  display: inline-flex; align-items: center; gap: 6px;
  font: var(--lk-t-micro); color: var(--lk-muted);
}

/* ── Stepper rail ────────────────────────────────────────────────────────
 * Full width, labels always visible — the desktop has the room the phone
 * did not, so nothing collapses to dots here. */
.lk-web__rail {
  flex: 0 0 auto;
  background: var(--lk-bg);
  border-bottom: 1px solid var(--lk-border);
  padding: 0 var(--lk-s-8);
}
.lk-web__rail .lk-stepper {
  max-width: 1120px; margin: 0 auto;
  padding: 14px 0; gap: var(--lk-s-3);
}
.lk-web__rail .lk-step__dot { width: 24px; height: 24px; font-size: 12px; }
.lk-web__rail .lk-step__label { font-size: 13px; }

/* ── Content ─────────────────────────────────────────────────────────────── */

.lk-web__main { flex: 1 1 auto; padding: var(--lk-s-8) var(--lk-s-8) 72px; }
.lk-web__cols {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-gap: var(--lk-s-8); gap: var(--lk-s-8);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 960px) {
  .lk-web__cols { grid-template-columns: minmax(0, 1fr) 336px; }
}
/* A form column wider than this stops being readable — the measure is the
 * constraint, not the viewport. */
.lk-web__form { max-width: 620px; width: 100%; }
.lk-web__form .lk-block:first-child { padding-top: 0; margin-top: 0; }

.lk-web__aside { display: flex; flex-direction: column; gap: var(--lk-s-4); }
@media (min-width: 960px) {
  /* The offer stays on screen while the borrower fills the form under it. */
  .lk-web__aside { position: -webkit-sticky; position: sticky; top: var(--lk-s-6); }
}

.lk-web__h1 { font: 700 30px/38px var(--lk-font-display); color: var(--lk-fg-strong); letter-spacing: -0.02em; }
.lk-web__lede { font: 400 17px/26px var(--lk-font-body); color: var(--lk-muted); margin-top: var(--lk-s-3); }

/* ── Actions ─────────────────────────────────────────────────────────────
 * Inline, capped, left-aligned with the form. Still exactly ONE primary. */
.lk-web__actions {
  display: flex; align-items: center; gap: var(--lk-s-4); flex-wrap: wrap;
  margin-top: var(--lk-s-8); padding-top: var(--lk-s-6);
  border-top: 1px solid var(--lk-border);
}
.lk-web__actions .lk-btn--primary { min-width: 220px; }
.lk-web__actions .lk-btn--block { width: auto; }
.lk-web__hint { font: var(--lk-t-small); color: var(--lk-muted); flex: 1 1 220px; }

/* ── Browser chrome (board presentation only) ───────────────────────────── */

.lk-browser {
  width: 100%;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-r-lg);
  overflow: hidden;
  background: var(--lk-bg);
  box-shadow: 0 1px 2px rgba(17,24,39,.05), 0 8px 24px rgba(17,24,39,.06);
}
.lk-browser__bar {
  height: 40px; display: flex; align-items: center; gap: var(--lk-s-3);
  padding: 0 var(--lk-s-4);
  background: var(--lk-surface-2);
  border-bottom: 1px solid var(--lk-border);
}
.lk-browser__dots { display: flex; gap: 6px; flex: 0 0 auto; }
.lk-browser__dots span { width: 10px; height: 10px; border-radius: 999px; background: var(--lk-border); }
.lk-browser__url {
  flex: 1 1 auto; height: 24px; max-width: 420px;
  border-radius: var(--lk-r-pill); background: var(--lk-bg);
  border: 1px solid var(--lk-border);
  display: flex; align-items: center; gap: 6px; padding: 0 10px;
  font: var(--lk-t-micro); color: var(--lk-muted);
}
.lk-browser__view { height: 720px; overflow: hidden; position: relative; }
.lk-browser__view > .lk-web { height: 100%; overflow-y: auto; }

/* ── Small screens ───────────────────────────────────────────────────────
 * The website on a phone. The shell folds back to the mobile idiom rather
 * than shrinking the desktop one. */
@media (max-width: 720px) {
  .lk-web__bar { height: 56px; padding: 0 var(--lk-s-4); gap: var(--lk-s-3); }
  .lk-web__nav { display: none; }
  .lk-web__rail { padding: 0 var(--lk-s-4); }
  .lk-web__main { padding: var(--lk-s-5) var(--lk-s-4) 48px; }
  .lk-web__h1 { font-size: 24px; line-height: 32px; }
  .lk-web__lede { font-size: 16px; line-height: 24px; }
  .lk-web__actions .lk-btn--primary { min-width: 0; width: 100%; }
  .lk-web__aside { position: static; }
}

/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/* Top-level reset for los-app-v2.
 *
 * Deliberately minimal. The Lending Kit is self-contained: its palette, type
 * scale and geometry live in ui-kit/styles/tokens.css, and its reset is scoped
 * to .lk-root. This file sets only what must exist before any of that loads,
 * so nothing here can contradict a kit token.
 *
 * los-app's globals.css imports /los/colors_and_type.css (the GoCredit token
 * set). That is deliberately NOT imported here — the kit is not built on it,
 * and pulling it in would put two competing type scales on the same page. */

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

html, body {
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  /* Same white as the frame, so whatever the frame does not cover — the
   * margins beside a capped frame on a wide window, the strip a collapsing
   * URL bar exposes — never shows as a dark border around the app. */
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; }

/* THE DEV OVERLAY, GONE.
 *
 * next.config.ts already sets `devIndicators: false`, which removes the idle
 * status badge. It does NOT remove the error overlay — the red bubble with a
 * count — because Next shows that whenever something has actually gone wrong,
 * and there is no config option in 15.x that switches it off.
 *
 * `next dev` renders both from a single custom element, <nextjs-portal>, whose
 * contents live in a shadow root nothing else can style. Hiding the host is
 * therefore the only lever available.
 *
 * WHAT THIS COSTS, so nobody rediscovers it the hard way: a real runtime error
 * now fails SILENTLY in the browser. The error still exists, it is still in the
 * console, and it still breaks whatever it was breaking — you simply will not
 * be told. Delete this rule while debugging anything that misbehaves in dev.
 *
 * Dev only. The element does not exist in a production build, so this rule
 * matches nothing there.
 *
 * Asked for 2026-09-25: the badge sits over the phone frame and lands in every
 * screenshot taken for review and demos. */
nextjs-portal { display: none !important; }

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/ui-kit/fonts.ts","import":"Inter","arguments":[{"subsets":["latin"],"display":"swap","weight":["400","500","600","700"],"variable":"--lk-font-body-next"}],"variableName":"lkBody"} ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@font-face {
  font-family: 'Inter Fallback';
  src: local("Arial");
  ascent-override:90.44%;
  descent-override:22.52%;
  line-gap-override:0.00%;
  size-adjust:107.12%;
}@font-face {font-family: 'Inter Fallback Fallback';src: local("Arial");ascent-override: 90.44%;descent-override: 22.52%;line-gap-override: 0.00%;size-adjust: 107.12%
}.__className_ece556 {font-family: 'Inter Fallback', 'Inter Fallback Fallback';font-style: normal
}.__variable_ece556 {--lk-font-body-next: 'Inter Fallback', 'Inter Fallback Fallback'
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/ui-kit/fonts.ts","import":"Poppins","arguments":[{"subsets":["latin"],"display":"swap","weight":["500","600","700","800"],"variable":"--lk-font-display-next"}],"variableName":"lkDisplay"} ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/db911767852bc875-s.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/f10b8e9d91f3edcb-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/8888a3826f4a3af4-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/29e7bbdce9332268-s.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/c3bc380753a8436c-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/0484562807a97172-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/29a4aea02fdee119-s.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/a1386beebedccca4-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/b957ea75a84b6ea7-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/28485c0de2075f40-s.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/5fb25f343c7550ca-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/7db6c35d839a711c-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Poppins Fallback';src: local("Arial");ascent-override: 93.62%;descent-override: 31.21%;line-gap-override: 8.92%;size-adjust: 112.16%
}.__className_1848dd {font-family: 'Poppins', 'Poppins Fallback';font-style: normal
}.__variable_1848dd {--lk-font-display-next: 'Poppins', 'Poppins Fallback'
}