/* ============================================================
   Afranga · Invest - 5 approaches side by side
   Built after the stagev2 audit (research/invest-audit-2026-08).
   Five complete answers to "how should Invest work", switchable
   from the Tweaks panel. Tokens come from styles.css; nothing
   here introduces a new colour or type style.
   ============================================================ */

.inv { display: flex; flex-direction: column; gap: 1.5rem; padding-bottom: 6rem; }
/* Flex items default to a min-content floor, and a stretched grid child resolves
   its auto-fill tracks against an indefinite width. Pinning the children to the
   column's own width makes that width definite, so the card grid and the wide
   tables shrink into the layout instead of pushing through it. */
.inv > * { min-width: 0; width: 100%; }

/* `.main` is a flex item; without min-width its min-content width is driven by
   the widest table and the whole page gains a horizontal scrollbar. */
.main--inv { min-width: 0; }

.inv__head { display: flex; flex-direction: column; gap: 0.375rem; }
.inv__title { font: var(--display-s); color: var(--text-primary); }
.inv__sub { font: var(--body-m); color: var(--text-secondary); max-width: 44rem; }

.inv__bar { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.inv__count { font: var(--label-m); color: var(--text-secondary); }

/* The balance strip. Every approach shows it, because "how much can
   I actually put in" was never answered anywhere on the live flow. */
.wallet {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  background: var(--white); border: 0.0625rem solid var(--border);
  border-radius: var(--radius-btn);
}
.wallet__label { font: var(--body-s); color: var(--text-secondary); }
.wallet__value { font: var(--value); color: var(--text-primary); }
.wallet__sep { width: 0.0625rem; height: 1rem; background: var(--border); }

/* ============ shared atoms ============ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 2.75rem; padding: 0 1.25rem;
  border-radius: var(--radius-btn); font: var(--label-m);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn--primary { background: var(--coral); color: var(--white); }
.btn--primary:hover { background: var(--coral-dark); }
.btn--quiet { background: var(--surface-subtle); color: var(--text-primary); }
.btn--quiet:hover { background: var(--track); }
.btn--ghost { background: none; color: var(--text-primary); border: 0.0625rem solid var(--border); }
.btn--ghost:hover { background: var(--surface-subtle); }
.btn--wide { width: 100%; }
.btn--small { height: 2.25rem; padding: 0 0.875rem; font: var(--label-s); }

/* The button IS the error message. Nothing in this prototype fails
   silently - the one thing the live flow does on every invalid amount. */
.btn--blocked { background: var(--track); color: var(--text-secondary); cursor: not-allowed; }
.btn--blocked:hover { background: var(--track); }

.link { font: var(--label-s); color: var(--coral); }
.link:hover { color: var(--coral-dark); }

.pill {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.125rem 0.5rem; border-radius: 62.4375rem;
  font: var(--caption-s); background: var(--green-bg); color: var(--green);
}
.pill--quiet { background: var(--surface-subtle); color: var(--text-secondary); }
.pill--warn { background: var(--peach); color: var(--charcoal); }

.rate { font: var(--label-m); color: var(--text-primary); }
.rate--hero { font: var(--number-l); color: var(--text-primary); }

.muted { color: var(--text-secondary); }
.pos { color: var(--green); }

/* amount input, shared by every approach */
.field { display: flex; flex-direction: column; gap: 0.375rem; }
.field__label { font: var(--label-s); color: var(--text-primary); }
.field__box {
  display: flex; align-items: center; gap: 0.5rem;
  height: 3.25rem; padding: 0 0.875rem;
  background: var(--white); border: 0.0625rem solid var(--border);
  border-radius: var(--radius-btn);
  transition: border-color var(--t-fast) var(--ease);
}
.field__box:focus-within { border-color: var(--charcoal); }
.field__box--bad { border-color: var(--coral); }
.field__cur { font: var(--title-l); color: var(--text-secondary); }
.field__input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 0;
  font: var(--title-l); color: var(--text-primary);
}
.field__input::placeholder { color: var(--text-muted); }
/* The three constraints on one line. The live flow states none of them. */
.field__rules { font: var(--body-s); color: var(--text-secondary); }
.field__rules b { font: var(--label-s); color: var(--text-primary); }

.chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chip {
  padding: 0.375rem 0.75rem; border-radius: 62.4375rem;
  font: var(--label-s); color: var(--text-primary);
  background: var(--surface-subtle);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chip:hover { background: var(--track); }
.chip--on { background: var(--charcoal); color: var(--white); }
.chip--on:hover { background: var(--charcoal); }

/* the earnings read-out - the number the live flow never shows */
.earn {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
  padding: 0.875rem; border-radius: var(--radius-btn);
  background: var(--green-bg);
}
.earn--flat { background: var(--surface-subtle); }
.earn__label { font: var(--body-s); color: var(--text-secondary); }
.earn__value { font: var(--title-l); color: var(--green); }
.earn--flat .earn__value { color: var(--text-primary); }
.earn__note { font: var(--body-s); color: var(--text-secondary); }

/* ============ the loan table (A, B, C, E) ============ */

.lt { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
.lt th, .lt td { padding: 0.875rem 0.75rem; text-align: left; }
.lt th { font: var(--label-s); color: var(--text-secondary); border-bottom: 0.0625rem solid var(--border); white-space: nowrap; }
.lt td { font: var(--body-m); border-bottom: 0.0625rem solid var(--border); vertical-align: middle; }
.lt tbody tr:last-child td { border-bottom: 0; }
.lt tbody tr { transition: background var(--t-fast) var(--ease); }
.lt tbody tr:hover { background: var(--bg-canvas); }
.lt__num { text-align: right; font: var(--value); white-space: nowrap; }
.lt__act { text-align: right; width: 1%; white-space: nowrap; }
.lt__id { font: var(--value); color: var(--text-primary); }
.lt__org { display: flex; align-items: center; gap: 0.5rem; }
.lt__dot { width: 1.5rem; height: 1.5rem; border-radius: 62.4375rem; background: var(--peach); display: grid; place-items: center; font: var(--caption-s); color: var(--charcoal); flex: 0 0 auto; }
.lt__sortable { cursor: pointer; user-select: none; }
.lt__sortable:hover { color: var(--text-primary); }
.lt__arrow { width: 0.625rem; height: 0.625rem; display: inline-block; vertical-align: -0.0625rem; opacity: 0.4; }
.lt__sortable--on .lt__arrow { opacity: 1; }

/* ============ the public loans table, ported 1:1 ============
   Lifted from the Webflow build of go.afranga.com/invest (the mp-* classes,
   same grid tracks, same paddings, same type sizes). The em cascade is kept
   exactly as Webflow emits it and anchored at 1rem on the card, because at
   the 1440 canvas the marketing site's fluid root also resolves to 16px -
   so this renders pixel-identical to the public page. Logged out and logged
   in are the same table; only the Action cell has something to press. */

/* Every dimension in this block is in em, so the whole table scales from one
   number. The marketing container is 0.85 x 1440 = 1224px; the dashboard
   content column is 1096px behind the sidebar. 1096/1224 = 0.9, so at 0.9rem
   the table is the identical table, proportionally - same track ratios, same
   density, nothing reflows or wraps differently. */
.mp-loans-card {
  font-size: 0.9rem; background: var(--white);
  border: 0.0625em solid var(--track); border-radius: 1em;
}
.mp-loans-scroll { overflow-x: auto; }
.mp-loans-tbl { min-width: 60em; }
.mp-loans-mobile { display: none; }

.mp-loans-header,
.mp-tr {
  display: grid;
  grid-template-columns: 0.7fr 1fr 0.9fr 0.75fr 0.75fr 0.55fr 0.8fr 0.85fr 0.55fr;
  align-items: center;
}
.mp-loans-header {
  background: var(--bg-canvas); border-bottom: 0.0625em solid var(--track);
  border-radius: 1em 1em 0 0;
}
.mp-th {
  color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.1em;
  white-space: nowrap; padding: 1.125em 1.25em 1.125em 1.75em;
  font-size: 0.6875em; font-weight: 600;
}
.mp-th-right { text-align: right; padding-right: 1.85em; }

.mp-tr { border-bottom: 0.0625em solid var(--track); font-size: 1.2em; }
.mp-tr-last { border-bottom: 0; }
.mp-td { color: var(--charcoal); padding: 1.25em; font-size: 0.875em; }
.mp-td-bold { font-weight: 600; letter-spacing: -0.005em; }
.mp-td-muted { color: var(--text-secondary); white-space: nowrap; }
.mp-td-rate { color: var(--coral); font-weight: 700; font-variant-numeric: tabular-nums; }
.mp-td-amount { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.mp-td-action { text-align: right; padding: 0 1.25em 0 0; }
.mp-td-action .pill { font-size: 0.75em; }

.mp-orig-link { display: flex; align-items: center; }
.mp-orig-logo { width: auto; max-width: 7em; height: 1.5em; object-fit: contain; }

.mp-invest-btn {
  display: inline-block; background: #1f1f1f; color: var(--white);
  border: 0; border-radius: 0.75em; padding: 0.75em 1.25em;
  font-family: inherit; font-size: 0.75em; font-weight: 700; cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.mp-invest-btn:hover { background: var(--charcoal); }

.mp-cashback {
  position: relative; display: flex; align-items: center; column-gap: 0.375em;
  width: fit-content; margin-top: 0.375em; color: var(--green-muted);
  white-space: nowrap; cursor: pointer; font-size: 0.875em; font-weight: 600; line-height: 1.3;
}
.mp-cashback__label {
  color: var(--text-primary); font-size: 0.75em;
  text-decoration: underline dotted; text-underline-offset: 0.25em;
}
.mp-cashback__tip {
  position: absolute; bottom: 100%; left: 0; z-index: 20;
  opacity: 0; pointer-events: none;
  width: min(16em, 78vw); margin-bottom: 0.5em; padding: 0.875em 1em;
  border-radius: 0.5em; background: var(--charcoal); color: var(--ivory);
  font-weight: 400; line-height: 1.55; text-align: left; white-space: normal;
  box-shadow: 0 0.25em 1em rgba(44, 44, 44, 0.18);
  transition: opacity var(--t-fast) var(--ease);
}
.mp-cashback:hover .mp-cashback__tip,
.mp-cashback:focus-visible .mp-cashback__tip { opacity: 1; pointer-events: auto; }
.mp-cashback__tip-title { color: var(--white); margin-bottom: 0.25em; font-weight: 600; }

/* funding progress, so "available" reads as a proportion not a raw number */
.fund { display: flex; flex-direction: column; gap: 0.25rem; min-width: 8rem; max-width: 11rem; }
.fund__bar { height: 0.25rem; border-radius: 62.4375rem; background: var(--track); overflow: hidden; }
.fund__fill { height: 100%; background: var(--green-muted); }
.fund__text { font: var(--body-s); color: var(--text-secondary); }

/* ============ A - the decision card ============ */

.decide {
  max-width: 30rem;
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.5rem; background: var(--white);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.decide__head { display: flex; flex-direction: column; gap: 0.25rem; }
.decide__title { font: var(--title-l); }
.decide__meta { font: var(--body-s); color: var(--text-secondary); }
.decide__facts { display: flex; flex-direction: column; }
.decide__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 0.0625rem solid var(--border); }
.decide__row:last-child { border-bottom: 0; }
.decide__key { font: var(--body-m); color: var(--text-secondary); }
.decide__val { font: var(--value); }
.decide__rule { display: flex; gap: 0.5rem; padding: 0.75rem; border-radius: var(--radius-btn); background: var(--bg-canvas); }
.decide__rule svg { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--text-secondary); margin-top: 0.125rem; }
.decide__rule-text { font: var(--body-s); color: var(--text-secondary); }

/* ============ B - the selection ============ */

.sel {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 1.25rem; background: var(--white);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.sel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.sel__title { font: var(--title-l); }
.sel__hint { font: var(--body-s); color: var(--text-secondary); }
.sel__list { display: flex; flex-direction: column; }
.sel__item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 0.0625rem solid var(--border); }
.sel__item:last-child { border-bottom: 0; }
.sel__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.sel__name { font: var(--value); }
.sel__meta { font: var(--body-s); color: var(--text-secondary); }
.sel__amount { width: 7rem; }
.sel__amount .field__box { height: 2.5rem; }
.sel__amount .field__input, .sel__amount .field__cur { font: var(--body-m); }
.sel__drop { color: var(--text-muted); padding: 0.25rem; }
.sel__drop:hover { color: var(--coral); }
.sel__drop svg { width: 1rem; height: 1rem; display: block; }
.sel__foot { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.75rem; border-top: 0.0625rem solid var(--border); }
.sel__line { display: flex; justify-content: space-between; gap: 1rem; font: var(--body-m); color: var(--text-secondary); }
.sel__line b { font: var(--value); color: var(--text-primary); }
.sel__empty { padding: 1.5rem 0; text-align: center; font: var(--body-m); color: var(--text-secondary); }

/* ============ C - the screener ============ */

.screener { display: grid; grid-template-columns: 13rem 1fr; gap: 1.25rem; align-items: start; }

.facets {
  display: flex; flex-direction: column; gap: 1.25rem;
  padding: 1.25rem; background: var(--white);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  position: sticky; top: 1.5rem;
}
.facets__group { display: flex; flex-direction: column; gap: 0.5rem; }
.facets__title { font: var(--overline); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.facets__opt { display: flex; align-items: center; gap: 0.5rem; font: var(--body-m); cursor: pointer; }
.facets__box {
  width: 1.0625rem; height: 1.0625rem; flex: 0 0 auto;
  border: 0.0625rem solid var(--border); border-radius: 0.3125rem;
  background: var(--white); display: grid; place-items: center;
}
.facets__box svg { width: 0.75rem; height: 0.75rem; color: var(--white); opacity: 0; }
.facets__opt--on .facets__box { background: var(--charcoal); border-color: var(--charcoal); }
.facets__opt--on .facets__box svg { opacity: 1; }
.facets__count { margin-left: auto; font: var(--body-s); color: var(--text-muted); }

/* the row that opens in place - no navigation, no second availability number */
.expand { background: var(--bg-canvas); }
.expand__inner { display: grid; grid-template-columns: 1fr 20rem; gap: 1.5rem; padding: 1rem 0.75rem 1.25rem; }
.expand__facts { display: flex; flex-direction: column; gap: 0.5rem; }
.expand__row { display: flex; justify-content: space-between; gap: 1rem; font: var(--body-m); }
.expand__row span:first-child { color: var(--text-secondary); }
.expand__row span:last-child { font: var(--value); }
.expand__buy { display: flex; flex-direction: column; gap: 0.625rem; }

/* ============ D - the cards ============ */

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }

.locard {
  display: flex; flex-direction: column; gap: 0.875rem;
  padding: 1.25rem; background: var(--white);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  transition: box-shadow var(--t-base) var(--ease);
}
.locard:hover { box-shadow: var(--shadow-card-hover); }
.locard--on { outline: 0.125rem solid var(--charcoal); }
.locard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.locard__org { display: flex; align-items: center; gap: 0.5rem; font: var(--label-s); }
.locard__rate { display: flex; flex-direction: column; align-items: flex-end; }
.locard__rate-note { font: var(--caption-s); color: var(--green); }
.locard__facts { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; }
.locard__fact { display: flex; flex-direction: column; }
.locard__fact-key { font: var(--body-s); color: var(--text-secondary); }
.locard__fact-val { font: var(--value); }
.locard__buy { display: flex; gap: 0.5rem; align-items: flex-end; }
.locard__buy .field { flex: 1; }

/* ============ E - the wizard ============ */

.wiz { display: grid; grid-template-columns: 14rem 1fr; gap: 1.75rem; align-items: start; }

.rail { display: flex; flex-direction: column; gap: 0.25rem; position: sticky; top: 1.5rem; }
.rail__step { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border-radius: var(--radius-btn); text-align: left; }
.rail__step--on { background: var(--white); box-shadow: var(--shadow-card); }
.rail__dot {
  width: 1.5rem; height: 1.5rem; flex: 0 0 auto; border-radius: 62.4375rem;
  display: grid; place-items: center; font: var(--caption-s);
  background: var(--track); color: var(--text-secondary);
}
.rail__step--on .rail__dot { background: var(--charcoal); color: var(--white); }
.rail__step--done .rail__dot { background: var(--green-muted); color: var(--white); }
.rail__step--done .rail__dot svg { width: 0.75rem; height: 0.75rem; }
.rail__label { display: flex; flex-direction: column; }
.rail__name { font: var(--label-s); }
.rail__note { font: var(--body-s); color: var(--text-secondary); }

.check {
  width: 1.0625rem; height: 1.0625rem; flex: 0 0 auto;
  border: 0.0625rem solid var(--border); border-radius: 0.3125rem;
  background: var(--white); display: grid; place-items: center;
}
.check svg { width: 0.75rem; height: 0.75rem; color: var(--white); opacity: 0; }
.check--on { background: var(--charcoal); border-color: var(--charcoal); }
.check--on svg { opacity: 1; }

/* ============ review (all approaches) ============ */

.review { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.5rem; align-items: start; }
.review--narrow { grid-template-columns: 1fr; }
.review--narrow .summary { position: static; max-width: 26rem; }

.rlist { display: flex; flex-direction: column; padding: 0.25rem 1.25rem; background: var(--white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.rlist__item { display: flex; align-items: center; gap: 0.875rem; padding: 1rem 0; border-bottom: 0.0625rem solid var(--border); }
.rlist__item:last-child { border-bottom: 0; }
.rlist__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1875rem; }
.rlist__name { font: var(--value); }
.rlist__meta { font: var(--body-s); color: var(--text-secondary); }
/* the agreement, named by loan, instead of an unlabelled icon */
.rlist__doc { display: inline-flex; align-items: center; gap: 0.375rem; font: var(--body-s); color: var(--coral); }
.rlist__doc svg { width: 0.875rem; height: 0.875rem; }
.rlist__amt { text-align: right; display: flex; flex-direction: column; gap: 0.1875rem; }
.rlist__amt-val { font: var(--value); }
.rlist__amt-earn { font: var(--body-s); color: var(--green); }

.summary {
  display: flex; flex-direction: column; gap: 0.875rem;
  padding: 1.25rem; background: var(--white);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  position: sticky; top: 1.5rem;
}
.summary__title { font: var(--title-l); }
.summary__rows { display: flex; flex-direction: column; }
.summary__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 0.0625rem solid var(--border); }
.summary__row:last-child { border-bottom: 0; }
.summary__row--total { padding-top: 0.75rem; }
.summary__key { font: var(--body-m); color: var(--text-secondary); }
.summary__val { font: var(--value); text-align: right; }
.summary__val--big { font: var(--title-l); }

/* one checkbox, tied to the actual documents, gating the CTA */
.agree { display: flex; gap: 0.625rem; align-items: flex-start; cursor: pointer; }
.agree__text { font: var(--body-s); color: var(--text-secondary); }
.agree__text a { color: var(--coral); }

/* the reflection period, stated before the commitment rather than after */
.reflect { display: flex; gap: 0.625rem; padding: 0.875rem; border-radius: var(--radius-btn); background: var(--bg-canvas); }
.reflect svg { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--text-secondary); margin-top: 0.125rem; }
.reflect__text { font: var(--body-s); color: var(--text-secondary); }
.reflect__text b { font: var(--label-s); color: var(--text-primary); }

/* ============ done ============ */

.done { max-width: 34rem; display: flex; flex-direction: column; gap: 1.25rem; }
.done__head { display: flex; flex-direction: column; gap: 0.375rem; }
.done__title { font: var(--display-s); }
.done__sub { font: var(--body-m); color: var(--text-secondary); }
.done__card { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem; background: var(--white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.done__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 0.0625rem solid var(--border); }
.done__row:last-child { border-bottom: 0; }
.done__key { font: var(--body-m); color: var(--text-secondary); }
.done__val { font: var(--value); }
.done__actions { display: flex; gap: 0.625rem; flex-wrap: wrap; }

/* the cancellation right, actionable where it is stated */
.window {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 1rem; border-radius: var(--radius-card);
  background: var(--peach);
}
.window svg { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; color: var(--charcoal); margin-top: 0.0625rem; }
.window__body { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.window__title { font: var(--label-m); color: var(--charcoal); }
.window__text { font: var(--body-s); color: var(--charcoal); }

/* ============ Tweaks panel ============ */

/* Bottom-left, over the tail of the sidebar (15rem inside 16.5rem) rather
   than bottom-right. The panel is scaffolding for this demo and must not
   take width away from the content - the ported table needs its full 60em. */
.tweaks {
  position: fixed; left: 0.75rem; bottom: 1rem; z-index: 60;
  width: 15rem; max-height: calc(100vh - 2rem);
  display: flex; flex-direction: column;
  background: var(--charcoal); color: var(--white);
  border-radius: var(--radius-card); box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.tweaks__head { display: flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1rem; cursor: pointer; }
.tweaks__title { font: var(--label-m); }
.tweaks__note { font: var(--caption-s); color: #a8a5a2; }
.tweaks__chevron { margin-left: auto; transition: transform var(--t-base) var(--ease); }
.tweaks__chevron svg { width: 1rem; height: 1rem; display: block; }
.tweaks--collapsed .tweaks__chevron { transform: rotate(180deg); }
.tweaks__body { overflow-y: auto; padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: 1rem; }
.tweaks--collapsed .tweaks__body { display: none; }
.tweaks__group-title { font: var(--overline); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem; }
.tweaks__list { display: flex; flex-direction: column; gap: 0.25rem; }
.tweaks__item {
  display: flex; align-items: flex-start; gap: 0.625rem;
  padding: 0.5rem 0.625rem; border-radius: 0.625rem;
  text-align: left; color: #d5d2cf;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tweaks__item:hover { background: rgba(255, 255, 255, 0.08); color: var(--white); }
.tweaks__item--on { background: var(--coral); color: var(--white); }
.tweaks__item--on:hover { background: var(--coral); }
.tweaks__key {
  width: 1.25rem; height: 1.25rem; flex: 0 0 auto; border-radius: 0.375rem;
  display: grid; place-items: center; font: var(--caption-s);
  background: rgba(255, 255, 255, 0.12);
}
.tweaks__item--on .tweaks__key { background: rgba(255, 255, 255, 0.25); }
.tweaks__label { display: flex; flex-direction: column; gap: 0.0625rem; }
.tweaks__name { font: var(--label-s); }
.tweaks__desc { font: var(--body-s); color: inherit; opacity: 0.72; }
.tweaks__steps { display: flex; gap: 0.25rem; }
.tweaks__step {
  flex: 1; padding: 0.4375rem 0; border-radius: 0.5rem;
  font: var(--caption-s); color: #d5d2cf; background: rgba(255, 255, 255, 0.08);
}
.tweaks__step:hover { background: rgba(255, 255, 255, 0.16); color: var(--white); }
.tweaks__step--on { background: var(--white); color: var(--charcoal); }
.tweaks__step--on:hover { background: var(--white); color: var(--charcoal); }
.tweaks__step:disabled { opacity: 0.35; cursor: not-allowed; }
.tweaks__step:disabled:hover { background: rgba(255, 255, 255, 0.08); color: #d5d2cf; }
.tweaks__fix { font: var(--body-s); color: #a8a5a2; padding-top: 0.75rem; border-top: 0.0625rem solid rgba(255, 255, 255, 0.12); }

/* ============ narrow ============ */

/* The marketing site swaps the table for cards at 991px. Here the sidebar
   eats 19rem before the table starts, so the swap has to happen earlier -
   at the width where the content column drops below the table's own 60em. */
@media (max-width: 82rem) {
  .mp-loans-card { display: none; }
  .mp-loans-mobile { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
}
@media (max-width: 47.9375rem) {
  .mp-loans-mobile { grid-template-columns: 1fr; }
}

.mp-mobile-card {
  font-size: 1rem; background: var(--white);
  border: 0.0625em solid var(--border); border-radius: 0.75em; padding: 1.25em;
}
.mp-mc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1em; }
.mp-mc-orig { color: var(--charcoal); font-size: 0.9375em; font-weight: 600; }
.mp-mc-id { color: var(--text-muted); font-size: 0.8125em; }
.mp-mc-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25em 1.5em;
  border-top: 0.0625em solid var(--track); border-bottom: 0.0625em solid var(--track);
  padding: 1em 0; margin-bottom: 1em;
}
.mp-mc-stat-wrap { display: flex; flex-direction: column; gap: 0.25em; align-items: flex-start; }
.mp-mc-val { color: var(--charcoal); font-size: 1.125em; font-weight: 700; }
/* The marketing site paints the rate coral in the table and green on the
   mobile card. Same number, two colours - unified here on the table's coral.
   Which of the two is right is an open question in the requirements. */
.mp-mc-val--accent { color: var(--coral); }
.mp-mc-stat { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.6875em; font-weight: 600; }
.mp-mc-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.mp-mc-type { color: var(--text-secondary); font-size: 0.875em; }

@media (max-width: 68.75rem) {
  .screener, .wiz { grid-template-columns: 1fr; }
  .facets, .rail, .summary { position: static; }
  .review { grid-template-columns: 1fr; }
  .expand__inner { grid-template-columns: 1fr; }
}

@media (max-width: 47.9375rem) {
  .tweaks { left: 0.5rem; bottom: 0.5rem; width: calc(100vw - 1rem); }
  /* The table becomes cards, but only the four fields that drive the
     decision - not the 13-row dump the live site produces. */
  .lt, .lt thead { display: block; }
  .lt thead { display: none; }
  .lt tbody, .lt tr, .lt td { display: block; width: 100%; }
  .lt { background: none; box-shadow: none; }
  .lt tbody tr {
    background: var(--white); border-radius: var(--radius-card);
    box-shadow: var(--shadow-card); margin-bottom: 0.75rem; padding: 0.875rem;
  }
  .lt td { border-bottom: 0; padding: 0.1875rem 0; }
  .lt td[data-k]::before { content: attr(data-k) " "; font: var(--body-s); color: var(--text-secondary); }
  .lt td[data-hide-mobile] { display: none; }
  .lt__num, .lt__act { text-align: left; }
  .lt__act { padding-top: 0.75rem; }
  .lt__act .btn { width: 100%; }
}