/* Lodestar app (v2). The Regulus layout and components, in Lodestar's colours: a near-white ground, ink type, one
   red for the single primary action (the landing's #D4002A), and a dark hero with a red glow and a quiet field of
   stars (a lodestar is the star you steer by). Dark mode uses the landing's own dark palette and the same
   `lode_theme` key, so a choice made on the landing or in v1 carries over. FlareCat's pink and lavender appear only
   inside the FlareCat sections (.fc*), never in Lodestar's own chrome. Fonts are Regulus's, from Google Fonts, which
   the site's CSP already allows; the stacks fall back to system faces. */

:root {
  --bg: #f7f7f8;
  --surface: #ffffff;
  --surface-2: #f5f5f6;
  --ink: #0a0a0b;
  --ink-2: #3b3b42;
  --muted: #6b6b76;
  --line: #eaeaed;
  --line-2: #dadadf;
  --ph: #b9b9c2;               /* placeholder and empty figures */
  --night: #0c0f13;
  --night-2: #1a1f27;
  --red: #d4002a;              /* Lodestar red: links, accents, the selected state */
  --red-btn: #d4002a;          /* the primary button fill (dark mode needs a deeper one for white text) */
  --red-deep: #a80021;
  --red-wash: #fcf1f3;
  --red-ring: #f3cfd7;
  --ico-a: #fff6f7;
  --ico-b: #fbe8ec;
  --pos: #077548;
  --pos-wash: #e9f6f0;
  --bad: #b42318;
  --bad-wash: #fdecea;
  --glass: rgba(255, 255, 255, 0.72);
  --dock: rgba(247, 247, 248, 0.92);
  --r: 18px;
  --r-md: 14px;
  --r-sm: 10px;
  --lift: 0 1px 2px rgba(10, 10, 11, 0.04), 0 14px 34px -18px rgba(10, 10, 11, 0.16);
  --display: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  /* FlareCat, from its brand kit (Night #0d0b10, Flare pink #ff3d72, lavender #9d8fd8), toned for a light ground */
  --fc-pink: #e0285f;
  --fc-pink-2: #c8164c;
  --fc-lav: #6b559f;
  --fc-line: #f0d3e1;
  --fc-wash: #fff5f8;
  --fc-chip: #a3164a;
  color-scheme: light;
}
html.dark {
  --bg: #0c0f13;
  --surface: #151a21;
  --surface-2: #11161c;
  --ink: #eef1f5;
  --ink-2: #c2cad4;
  --muted: #8b95a3;
  --line: #232830;
  --line-2: #2e343d;
  --ph: #4a525e;
  --red: #ff3b5c;
  --red-btn: #c81e43;          /* white on the vivid dark-mode red is 3.48; this is 5.64 (the landing's fix) */
  --red-deep: #e0244a;
  --red-wash: #2a1016;
  --red-ring: #4a1d27;
  --ico-a: #1d1418;
  --ico-b: #2a1016;
  --pos: #35d38a;
  --pos-wash: #0f2a1e;
  --bad: #ff8a80;
  --bad-wash: #2c1414;
  --glass: rgba(21, 26, 33, 0.72);
  --dock: rgba(12, 15, 19, 0.92);
  --lift: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 34px -18px rgba(0, 0, 0, 0.6);
  --fc-pink: #ff5c8a;
  --fc-pink-2: #ff3d72;
  --fc-lav: #b9acec;
  --fc-line: #3a2433;
  --fc-wash: #1c1520;
  --fc-chip: #ffb3c7;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--red); z-index: 60; }
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 70; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 16px; font-weight: 600; }
.skip:focus { left: 16px; }

.wrap { max-width: 1160px; margin: 0 auto; padding-inline: 24px; }

/* ---------------------------------------------------------------- header */
header.top { padding-block: 20px 6px; }
header.top .wrap { display: flex; align-items: center; gap: 32px; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand img { width: 24px; height: 25px; flex: none; display: block; }
.brand b { font: 700 19px/1 var(--sans); letter-spacing: -0.03em; }
nav.tabs { display: flex; gap: 2px; padding: 4px; background: var(--glass); border: 1px solid var(--line); border-radius: 12px; }
nav.tabs button { border: 0; background: none; padding: 7px 14px; border-radius: 9px; cursor: pointer; color: var(--ink-2); font-weight: 500; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
nav.tabs button:hover { color: var(--ink); }
nav.tabs button[aria-current='page'] { color: var(--ink); background: var(--surface); box-shadow: 0 1px 2px rgba(10, 10, 11, 0.08), 0 0 0 1px var(--line); }
nav.tabs .tab-fc img { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.top .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* the version switch: v2 (this app) and v1 (the classic one) */
.ver { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--glass); border: 1px solid var(--line); }
.ver a { padding: 5px 9px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; line-height: 1.2; }
.ver a:hover { color: var(--ink); text-decoration: none; }
.ver a.on { color: var(--ink); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.ver .vn { font-weight: 500; }
.icon-btn { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.icon-btn:hover { color: var(--red); border-color: var(--red); }
.icon-btn svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 12px; padding: 11px 18px; cursor: pointer; font-weight: 600; font-size: 15px;
  color: #fff; text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg, #e3173f, var(--red-btn) 55%, #b8001f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 8px 18px -8px rgba(212, 0, 42, 0.55);
  transition: filter 0.15s, transform 0.15s;
}
html.dark .btn:not(.light):not(.ghost):not(.fc-btn) { background: linear-gradient(180deg, #d42a4e, var(--red-btn) 55%, #a8173a); }
.btn:hover { filter: brightness(1.07); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { cursor: not-allowed; filter: none; transform: none; color: #fff; background: #d0d0d7; box-shadow: none; }
html.dark .btn:disabled { background: #2e343d; color: #8b95a3; }
.btn.light { color: var(--night); background: linear-gradient(180deg, #ffffff, #ececf0); box-shadow: inset 0 1px 0 #fff, 0 8px 20px -10px rgba(0, 0, 0, 0.6); }
.btn.ghost { color: var(--ink); background: var(--surface); box-shadow: 0 0 0 1px var(--line-2); }
.btn.ghost:hover { box-shadow: 0 0 0 1px var(--red); filter: none; }
.btn.sm { padding: 8px 13px; font-size: 13.5px; border-radius: 10px; }
.btn.block { width: 100%; padding: 15px 18px; font-size: 16px; }
#connect[data-on='1'] { color: var(--ink); background: var(--surface); box-shadow: 0 0 0 1px var(--line-2); font-family: var(--mono); font-weight: 500; font-size: 13.5px; }

/* ---------------------------------------------------------------- layout */
main { padding-block: 22px 72px; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) 392px; gap: 28px; align-items: start; }
.grid > * { min-width: 0; }
.col-r { position: sticky; top: 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
h1 { font: 400 44px/1.05 var(--display); margin: 4px 0 10px; letter-spacing: -0.01em; text-wrap: balance; }
h1 em, .h2 em { font-style: italic; background: linear-gradient(180deg, #ef2f55, var(--red-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; }
html.dark h1 em { background: linear-gradient(180deg, #ff6b85, #ff3b5c); -webkit-background-clip: text; background-clip: text; }
.lede { color: var(--ink-2); font-size: 16px; max-width: 60ch; margin: 0 0 22px; }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 24px; align-items: start;
  padding: 26px 28px; border-radius: 22px; color: #eef1f5;
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(212, 0, 42, 0.5), transparent 58%),
    radial-gradient(70% 110% at 0% 100%, rgba(168, 0, 33, 0.22), transparent 62%),
    linear-gradient(160deg, var(--night), var(--night-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 48px -26px rgba(12, 15, 19, 0.65);
}
html.dark .hero { box-shadow: inset 0 0 0 1px #262c35, 0 24px 48px -26px rgba(0, 0, 0, 0.8); }
.hero::before { /* a quiet field of stars */
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.9;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.55) 0 1px, transparent 1.5px) 0 0 / 120px 90px,
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.35) 0 1px, transparent 1.5px) 0 0 / 70px 60px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
  mask-image: linear-gradient(90deg, transparent, #000 45%);
}
.hero::after { /* the sheen */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, 0.06) 47%, transparent 56%);
}
.hero-main { min-width: 0; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #ff8fa3; }
.big {
  font: 600 48px/1.08 var(--sans); letter-spacing: -0.025em; margin-top: 6px;
  background: linear-gradient(180deg, #ffffff 35%, #f4c9d2); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-wrap: balance;
}
.big.quiet { font-size: 34px; letter-spacing: -0.015em; }
.hero-sub { color: #c2cad4; font-size: 14.5px; margin-top: 6px; max-width: 52ch; }
.hero .big .plus img { width: 20px; height: 20px; border-radius: 50%; margin-right: 7px; vertical-align: -4px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
.hero .big .plus small { margin-left: 8px; font-size: 12px; font-weight: 500; opacity: 0.85; }
.hero .big .plus { display: inline-block; margin-left: 12px; padding: 5px 13px 5px 6px; border-radius: 999px; font-size: 15px; font-weight: 700; letter-spacing: 0;
  vertical-align: middle; color: #fff; background: var(--red); box-shadow: 0 6px 18px -8px rgba(212, 0, 42, 0.7); }
@media (max-width: 520px) {
  .hero .big .plus { display: block; width: fit-content; margin: 10px 0 0; font-size: 14px; border-radius: 16px; padding: 6px 14px 7px 7px; }
  /* two lines on a phone: the small line sits under the headline, not under the FXRP logo */
  .hero .big .plus small { display: block; margin: 1px 0 0 27px; }
}
.hero .bonus { display: inline-flex; margin-top: 12px; padding: 5px 11px; border-radius: 14px; font-size: 13px; color: #ffc2d2; background: rgba(255, 61, 114, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 194, 210, 0.25); }
.hero .btn { grid-column: 2; grid-row: 1; }
.hero-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 4px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.hero-stats dt { font-size: 12.5px; color: #8b95a3; display: flex; align-items: center; gap: 6px; }
.hero-stats dd { margin: 3px 0 0; font-size: 21px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.hero .tip { border-color: rgba(255, 255, 255, 0.3); color: #8b95a3; }

/* ---------------------------------------------------------------- cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--lift); }
.card.pad { padding: 24px 26px; }
.section { margin-top: 18px; }
.h2 { font: 400 25px/1.2 var(--display); margin: 0 0 16px; letter-spacing: -0.005em; }
.h2.sm { font-size: 22px; margin-bottom: 12px; }
.stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.stat .k { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.stat .v { font-size: 26px; font-weight: 600; letter-spacing: -0.015em; margin-top: 3px; }
.stat .s { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.stats4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.stats4 > div + div:nth-child(n+5) { margin-top: 4px; }
.stats4 .k { color: var(--muted); font-size: 12.5px; }
.stats4 .v { font-size: 17px; font-weight: 600; margin-top: 2px; }
.stats4 .v small { font-size: 12px; font-weight: 500; color: var(--muted); }
.v.pos { color: var(--pos); }
.tip { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 10px; font-weight: 600; color: var(--muted); cursor: help; }
.note { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }
.more-link { display: inline-flex; gap: 6px; margin-top: 16px; font-size: 14px; font-weight: 500; }

/* how lenders earn, on the due date */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.flow li { display: flex; gap: 12px; align-items: flex-start; }
.flow .ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(180deg, var(--ico-a), var(--ico-b)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 1px var(--red-ring); }
html.dark .flow .ico { box-shadow: 0 0 0 1px var(--red-ring); }
.flow .ico svg { width: 20px; height: 20px; fill: none; stroke: var(--red); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.flow h3 { font-size: 14.5px; font-weight: 600; margin: 1px 0 3px; }
.flow p { margin: 0; color: var(--ink-2); font-size: 13.5px; }

/* tables */
table.rates { width: 100%; border-collapse: collapse; font-size: 14px; }
table.rates th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12.5px; padding: 0 0 9px; white-space: nowrap; }
table.rates td { padding: 11px 0; border-top: 1px solid var(--line); }
table.rates td + td, table.rates th + th { padding-left: 14px; }
table.rates td.r, table.rates th.r { text-align: right; }
table.rates .nw { white-space: nowrap; }
table.rates .ds { display: none; }
table.rates tr.us td { background: var(--red-wash); }
table.rates tr.us td:first-child { box-shadow: inset 3px 0 0 var(--red); padding-left: 10px; }
.sm-only { display: none; }
.pill-low { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.5; color: #fff; background: var(--red-btn); white-space: nowrap; vertical-align: middle; }
.scrollx { overflow-x: auto; }

/* accordions */
details.risk { border-top: 1px solid var(--line); padding: 13px 0; }
details.risk:first-of-type { border-top: 0; padding-top: 2px; }
details.risk summary, details.more summary { cursor: pointer; font-weight: 500; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
details.risk summary::-webkit-details-marker, details.more summary::-webkit-details-marker { display: none; }
details.risk summary::after { content: '+'; color: var(--muted); font-size: 18px; font-weight: 400; line-height: 1; }
details.risk[open] summary::after { content: '\2212'; }
details.risk p { margin: 8px 0 0; color: var(--ink-2); font-size: 14px; max-width: 68ch; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; white-space: nowrap; }
.lion-p { color: var(--ink-2); margin: 0; font-size: 14px; max-width: 58ch; }

/* ---------------------------------------------------------------- action card */
.act { padding: 0 0 18px; box-shadow: 0 1px 2px rgba(10, 10, 11, 0.05), 0 22px 44px -22px rgba(10, 10, 11, 0.22); }
.act .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 14px 14px 0; padding: 4px; border-radius: 13px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.act .seg button { border: 0; background: none; padding: 9px 0; border-radius: 10px; cursor: pointer; font-weight: 500; color: var(--muted); font-size: 14.5px; }
.act .seg button[aria-selected='true'] { color: var(--ink); background: var(--surface); box-shadow: 0 1px 2px rgba(10, 10, 11, 0.1), 0 0 0 1px var(--line); font-weight: 600; }
/* Borrow: the three collaterals on one row, each with its token (25 Oct 2026) */
#act-borrow .seg.coll3, #act-multiply .seg.coll3 { grid-template-columns: repeat(3, 1fr); }
#act-borrow .seg.coll3 button, #act-multiply .seg.coll3 button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 0; }
#act-borrow .seg.coll3 img, #act-multiply .seg.coll3 img { width: 20px; height: 20px; border-radius: 50%; opacity: 0.55; filter: grayscale(0.6); transition: opacity 0.15s, filter 0.15s; }
#act-borrow .seg.coll3 button:hover img, #act-borrow .seg.coll3 button[aria-selected='true'] img, #act-multiply .seg.coll3 button:hover img, #act-multiply .seg.coll3 button[aria-selected='true'] img { opacity: 1; filter: none; }
.act .body { padding: 14px 14px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.box { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; background: var(--surface-2); }
.box.quiet { background: var(--surface); }
.box .lbl { color: var(--muted); font-size: 13px; display: flex; justify-content: space-between; gap: 8px; }
.box .row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.box input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; outline: none; font: 600 32px/1.2 var(--sans); letter-spacing: -0.02em; color: var(--ink); padding: 0; font-variant-numeric: tabular-nums; }
.box input::placeholder { color: var(--ph); }
.box .out { flex: 1; min-width: 0; font: 600 32px/1.2 var(--sans); letter-spacing: -0.02em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.box .out.mut { color: var(--ph); }
.tok { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 6px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(10, 10, 11, 0.05); font-weight: 600; font-size: 14px; white-space: nowrap; }
/* token and protocol logos */
.ti { width: 22px; height: 22px; border-radius: 50%; display: block; object-fit: cover; flex: none; }
.ti-lod { object-fit: contain; background: #fff; padding: 2px; box-shadow: 0 0 0 1px var(--line); }
.tl { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none; }
.tl-lod { object-fit: contain; background: #fff; padding: 1.5px; box-shadow: 0 0 0 1px var(--line); }
.tl-cat { border-radius: 6px; }
.tn { display: inline-flex; align-items: center; gap: 9px; }
.promo-logo { width: 34px; height: 34px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px var(--line); object-fit: cover; }
.promo-cat { border-radius: 9px; }
.get-hint { margin: 8px 2px 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.get-hint:empty { display: none; }
/* Available-to-borrow meter (25 Oct 2026) */
.act .room { margin: 14px 14px 0; padding: 11px 13px 10px; border-radius: 13px; font-size: 13px; line-height: 1.4; color: var(--ink-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.act .room .room-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.act .room b { color: var(--ink); font-weight: 650; }
.act .room .linkish { font-size: 13px; font-weight: 600; color: var(--red); background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
.act .room .bar { height: 6px; margin: 9px 0 6px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.act .room .bar i { display: block; height: 100%; border-radius: 999px; background: var(--ink-2); transition: width 0.3s; }
.act .room small { color: var(--muted); font-size: 11.5px; }
.act .room.low { background: rgba(214, 140, 0, 0.1); box-shadow: inset 0 0 0 1px rgba(214, 140, 0, 0.45); }
.act .room.low .bar i { background: #d68c00; }
.act .room.full { background: var(--red-wash); box-shadow: inset 0 0 0 1px var(--red); }
.act .room.full .bar i { background: var(--red); }
.yield-note { margin: 10px 2px 0; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; color: var(--ink-2);
  background: linear-gradient(90deg, var(--red-wash), transparent); box-shadow: inset 3px 0 0 var(--red); }
.yield-note b { color: var(--ink); }
.yield-note:empty { display: none; }
.get-hint a { color: var(--red); font-weight: 600; }
.box .sub { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12.5px; margin-top: 6px; gap: 8px; }
.box .sub > span:last-child { white-space: nowrap; flex: none; }
.box .sub > span:only-child { white-space: normal; flex: 1 1 auto; } /* a sentence alone in the row wraps (26 Oct 2026: the deposit note ran off the card) */
.max { border: 0; background: var(--red-wash); color: var(--red); border-radius: 7px; padding: 2px 8px; font-size: 12px; font-weight: 600; cursor: pointer; }
.max:hover { filter: brightness(0.97); }
.facts { border-radius: var(--r-md); padding: 4px 16px; display: grid; font-size: 13.5px; box-shadow: inset 0 0 0 1px var(--line); }
.facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.facts > div:first-child { border-top: 0; }
.facts span:first-child { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.facts span:last-child { text-align: right; font-weight: 500; }
.facts code { font: 12.5px var(--mono); }
.ack { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--ink-2); padding: 2px 4px; }
.ack input { margin-top: 2px; accent-color: var(--red); flex: none; }
.act .foot { padding: 14px 14px 0; }
.act .foot .note { text-align: center; margin-top: 10px; }
.msg { font-size: 13.5px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.msg.bad { background: var(--bad-wash); color: var(--bad); box-shadow: none; }
.msg.good { background: var(--pos-wash); color: var(--pos); box-shadow: none; }
.capnote { font-size: 12.5px; padding: 9px 12px; border-radius: var(--r-sm); color: var(--ink-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.capnote.warn { background: var(--red-wash); box-shadow: inset 0 0 0 1px var(--red-ring); }

/* term picker (borrow) */
.terms { display: grid; gap: 8px; }
.term { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 14px; border: 0; border-radius: 12px; background: var(--surface); cursor: pointer; text-align: left; width: 100%; box-shadow: 0 0 0 1px var(--line); transition: box-shadow 0.15s, background 0.15s; }
.term:hover { box-shadow: 0 0 0 1px var(--line-2); }
.term[aria-checked='true'] { background: linear-gradient(180deg, var(--surface), var(--red-wash)); box-shadow: 0 0 0 1.5px var(--red), 0 6px 14px -8px rgba(212, 0, 42, 0.45); }
.term b { font-size: 14.5px; font-weight: 600; }
.term small { color: var(--muted); font-size: 12.5px; display: block; margin-top: 1px; }
.term small .get { color: var(--ink); font-weight: 650; }
.term .fee { font-weight: 600; white-space: nowrap; }
.term i { font-style: normal; display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; vertical-align: 1px; }
.term .tag-cheap { color: #fff; background: var(--red); animation: cheap-glow 2.4s ease-in-out infinite; }
.term .tag-low { color: var(--red); background: var(--red-wash); }
@keyframes cheap-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(212, 0, 42, 0); } 50% { box-shadow: 0 0 0 4px rgba(212, 0, 42, 0.2); } }

/* ---------------------------------------------------------------- Multiply (under Borrow) */
/* the Borrow / Multiply switch above both titles */
.subtabs { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 14px; border-radius: 11px; background: var(--glass); border: 1px solid var(--line); }
.subtabs a { padding: 6px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.subtabs a:hover { color: var(--ink); text-decoration: none; }
.subtabs a[aria-current='page'] { color: var(--ink); background: var(--surface); box-shadow: 0 1px 2px rgba(10, 10, 11, 0.08), 0 0 0 1px var(--line); font-weight: 600; }
.mlbl { color: var(--muted); font-size: 13px; margin: 4px 2px -4px; display: flex; align-items: center; gap: 6px; }
/* legs and tolerance: the seg look of the card's top switch, in the body */
.mseg { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: 13px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.mseg button { border: 0; background: none; padding: 8px 4px; border-radius: 10px; cursor: pointer; color: var(--muted); font-size: 14px; display: grid; gap: 1px; justify-items: center; transition: background 0.15s, box-shadow 0.15s; }
.mseg button b { font-weight: 600; }
.mseg button small { font-size: 12px; }
.mseg button:hover { color: var(--ink); }
.mseg button[aria-checked='true'] { color: var(--ink); background: var(--surface); box-shadow: 0 1px 2px rgba(10, 10, 11, 0.1), 0 0 0 1.5px var(--red); }
.mseg button[aria-checked='true'] small { color: var(--red); }
.mseg.sm button { padding: 5px 4px; font-size: 13px; }
/* the ladder: what each leg locks, and the cash to the wallet */
.ladder { display: grid; gap: 7px; padding: 12px 14px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); }
.lg { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.lg-n { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.lg-bar { height: 8px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.lg-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--red-deep), var(--red)); }
.lg.cash .lg-bar i { background: linear-gradient(90deg, var(--pos), #3fbf8a); }
.lg-v { text-align: right; font-weight: 600; white-space: nowrap; }
.lg-v small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 400; }
.worst { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; color: var(--ink-2); background: var(--surface-2); box-shadow: inset 3px 0 0 var(--ink-2), inset 0 0 0 1px var(--line); }
.worst b { color: var(--ink); }
.mnote { margin: 0 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.mnote:empty { display: none; }
/* Portfolio: a position and its legs */
.mpos .legs { display: grid; gap: 8px; }
.leg { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.leg-h { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.leg-n { font-size: 12px; font-weight: 600; color: var(--red); background: var(--red-wash); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.leg-t { flex: 1 1 160px; min-width: 0; }
.leg-t b { font-size: 14.5px; }
.leg-t small { display: block; color: var(--muted); font-size: 12px; }
.leg-h .badge { margin-left: auto; }
.mtolrow { display: grid; gap: 6px; }
.lacct .exopt + .exopt { margin-top: 0; }

/* cross-sell */
.promo { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); color: var(--ink); background: linear-gradient(120deg, var(--surface), var(--surface-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 1px var(--line); }
.promo:hover { text-decoration: none; box-shadow: 0 0 0 1px var(--red); }
.promo b { display: block; font-size: 14.5px; font-weight: 600; }
.promo small { color: var(--muted); font-size: 12.5px; }
.promo .go { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--red); flex: none; }

/* ---------------------------------------------------------------- portfolio */
.pf { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.pf > * { min-width: 0; }
.empty { display: grid; gap: 4px; justify-items: start; }
.empty b { font-size: 15px; }
.empty span { color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.loan { padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } /* minmax: let the card shrink to the phone, not to its widest field */
.loan + .loan, .loan + .card, .card + .loan { margin-top: 12px; }
.loan-h { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.loan-h > div { flex: 1 1 150px; min-width: 0; }
.loan-h img { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.loan-h b { font-size: 17px; letter-spacing: -0.01em; }
.loan-h small { display: block; color: var(--muted); font-size: 12.5px; }
.loan-h .badge { margin-left: auto; }
.badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge.ok { color: var(--pos); background: var(--pos-wash); }
.badge.warn { color: #8a5a00; background: #fdf3dc; }
html.dark .badge.warn { color: #f5c46b; background: #2a2210; }
.badge.crit { color: var(--red); background: var(--red-wash); }
.badge.leg { color: var(--ink-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); margin-left: 6px; }
.loan .facts { padding: 2px 14px; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; }
.acts .btn { flex: 1 1 auto; }
.acts .cal { align-self: center; font-size: 13px; margin-left: auto; }
.inpanel { border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); padding: 12px 14px; display: grid; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.inrow { display: flex; gap: 8px; align-items: center; }
.inrow .inp { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); padding: 8px 12px; }
.inrow .inp input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; outline: none; font: 600 16px var(--sans); color: var(--ink); }
.inrow .inp span { color: var(--muted); font-size: 13px; font-weight: 600; }
.exopt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.exopt b { color: var(--ink); }
.exopt small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.exopt.off { background: transparent; }
.exopt.off > span { opacity: 0.85; }
.lendcard .big-v { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.lendcard .facts { margin-top: 12px; }
/* the 888 Club choice on Earn: FlareCat colours (an fc- section), a soft gloss, stronger once a cat is picked */
.box.quiet.catto.fc-cat { position: relative; overflow: hidden; border: 1px solid var(--fc-line);
  background: linear-gradient(135deg, var(--fc-wash) 0%, var(--surface) 58%, color-mix(in srgb, var(--fc-lav) 9%, var(--surface)) 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 55%, transparent), 0 12px 28px -20px color-mix(in srgb, var(--fc-pink) 70%, transparent); }
.box.quiet.catto.fc-cat::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, color-mix(in srgb, var(--surface) 30%, transparent) 46%, transparent 60%); }
.box.quiet.catto.fc-cat.on { border-color: color-mix(in srgb, var(--fc-pink) 45%, var(--fc-line)); }
.fc-cat .lbl label { display: inline-flex; align-items: center; gap: 8px; }
.fc-catic { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--fc-line); }
.fc-cattag { font-size: 11px; font-weight: 650; letter-spacing: 0.02em; color: var(--fc-chip); background: var(--fc-wash); border: 1px solid var(--fc-line); border-radius: 999px; padding: 1px 8px; }
.fc-cat .catsel { position: relative; z-index: 1; border-color: var(--fc-line); }
.fc-cat .catsel:focus { outline: 2px solid color-mix(in srgb, var(--fc-pink) 55%, transparent); outline-offset: 1px; }
.fc-cat .sub { position: relative; z-index: 1; }
.catto .catsel { width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; min-height: 44px; }
.catto .sub span { white-space: normal; }
.catlend .facts .cat-id { font-weight: 650; }
.lendcard .arriving { margin-top: 10px; padding: 8px 11px; border-radius: 10px; font-size: 13px; line-height: 1.4; color: var(--ink-2); background: var(--surface-2); box-shadow: inset 3px 0 0 #1f9d55; }
.lendcard .facts .up { color: #1f9d55; font-weight: 650; }

/* the deadline banner, on every view */
.duebar { margin: 10px auto 0; max-width: 1112px; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--r-md); background: var(--red-wash); box-shadow: inset 3px 0 0 var(--red), inset 0 0 0 1px var(--red-ring); font-size: 14px; color: var(--ink); }
.duebar span { flex: 1; min-width: 0; }
.duebar .btn { flex: none; }

/* toasts */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: grid; gap: 8px; max-width: 380px; }
.toast { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -16px rgba(0, 0, 0, 0.35); font-size: 13.5px; }
.toast.bad { box-shadow: inset 3px 0 0 var(--bad), 0 0 0 1px var(--line), 0 18px 40px -16px rgba(0, 0, 0, 0.35); }
.toast.good { box-shadow: inset 3px 0 0 var(--pos), 0 0 0 1px var(--line), 0 18px 40px -16px rgba(0, 0, 0, 0.35); }
.toast > div { flex: 1; min-width: 0; }
.toast button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }

/* wallet picker and the consent gate */
dialog.wallets, dialog.gate { border: 0; border-radius: var(--r); padding: 0; width: min(380px, calc(100vw - 32px)); box-shadow: 0 30px 70px rgba(12, 15, 19, 0.35); background: var(--surface); color: var(--ink); }
dialog.wallets::backdrop, dialog.gate::backdrop { background: rgba(12, 15, 19, 0.55); backdrop-filter: blur(3px); }
dialog.wallets header { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); font-weight: 600; }
dialog.wallets .list { padding: 10px; display: grid; gap: 6px; }
dialog.wallets .w { display: flex; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 12px; border: 0; background: var(--surface); cursor: pointer; text-align: left; width: 100%; box-shadow: 0 0 0 1px var(--line); }
dialog.wallets .w:hover { box-shadow: 0 0 0 1px var(--red); }
dialog.wallets .w:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
dialog.wallets .w img { width: 28px; height: 28px; border-radius: 7px; flex: none; }
dialog.wallets .w-t { flex: 1; min-width: 0; color: var(--ink); font-size: 15px; font-weight: 500; }
dialog.wallets .w-t small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; font-weight: 400; line-height: 1.35; }
dialog.wallets .w-go { width: 20px; height: 20px; flex: none; color: var(--red); }
dialog.wallets .wcur { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--red-wash); font-size: 13.5px; }
dialog.wallets .wcur b { font-family: var(--mono); font-weight: 500; }
dialog.wallets .wcur small { color: var(--muted); }
dialog.wallets .wcur .btn { flex: none; }
dialog.wallets .empty { display: block; padding: 12px; color: var(--muted); font-size: 14px; } /* one sentence, not the Portfolio cards' grid */
/* the WalletConnect window: its monospace text in our mono font (Reown's own fonts are never loaded; the CSP blocks
   fonts.reown.com). Same rule as Felynx. */
:root:root { --apkt-fontFamily-mono: var(--mono); }
dialog.wallets .wfoot { padding: 0 18px 16px; color: var(--muted); font-size: 12.5px; }
.x { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted); }
dialog.gate { width: min(520px, calc(100vw - 32px)); padding: 22px 22px 18px; }
.gate-top { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.gate-lead { color: var(--ink-2); font-size: 14px; margin: 12px 0; }
.gate-list { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 13.5px; color: var(--ink-2); }
.gate-list li { position: relative; padding-left: 16px; }
.gate-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.gate-list b { color: var(--ink); }
.gate-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-2); margin-bottom: 14px; }
.gate-check input { margin-top: 2px; accent-color: var(--red); flex: none; }
.gate-exit { display: block; text-align: center; margin-top: 10px; font-size: 13.5px; color: var(--muted); }

footer.foot { border-top: 1px solid var(--line); padding-block: 22px 40px; color: var(--muted); font-size: 13px; }
footer.foot .wrap { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; }
footer.foot b { color: var(--ink-2); }

/* ---------------------------------------------------------------- FlareCat (scoped: these colours stay in here) */
.fc { border-color: var(--fc-line); background: linear-gradient(180deg, var(--fc-wash), var(--surface) 46%); }
.fc-head { display: flex; align-items: flex-start; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 18px; }
.fc-head > div { flex: 1 1 260px; min-width: 0; }
.fc-head .h2 { margin-bottom: 4px; }
.fc-logo { width: 40px; height: 40px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--fc-line); }
.fc-title { background: linear-gradient(180deg, var(--fc-pink), var(--fc-lav)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fc-chip { color: var(--fc-chip); background: linear-gradient(180deg, #ffeff4, #f6e9fb); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #f0c8da; }
html.dark .fc-chip { background: rgba(255, 61, 114, 0.12); box-shadow: 0 0 0 1px rgba(255, 92, 138, 0.32); }
.fc-chip.live { color: #0b6b44; background: #e6f6ee; box-shadow: 0 0 0 1px #bfe6d3; }
html.dark .fc-chip.live { color: #35d38a; background: #0f2a1e; box-shadow: 0 0 0 1px #1f4536; }
.fc-num { background: linear-gradient(180deg, var(--fc-pink), var(--fc-lav)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fc-x { color: var(--fc-pink); font-weight: 600; }
.fc-msg { background: var(--fc-wash); box-shadow: inset 0 0 0 1px var(--fc-line); margin-top: 16px; }
.fc-paid { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--fc-line); color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.fc .flow .ico.fc-ico, .fc-ico { background: linear-gradient(180deg, #fff3f7, #fbe3ef); box-shadow: 0 0 0 1px var(--fc-line); }
html.dark .fc-ico { background: linear-gradient(180deg, #24161f, #2c1626); }
.fc .flow .ico.fc-ico svg { stroke: var(--fc-pink); }
.fc .more-link, .fc a { color: var(--fc-pink); }
.fc-view .grid { margin-top: 22px; }
.fc-hero {
  position: relative; overflow: hidden; isolation: isolate; display: flex; gap: 18px; align-items: flex-start;
  padding: 26px 28px; border-radius: 22px; color: #f7f4ef;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(255, 61, 114, 0.38), transparent 60%),
    radial-gradient(60% 100% at 0% 100%, rgba(157, 143, 216, 0.28), transparent 62%),
    linear-gradient(160deg, #0d0b10, #251d2c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(157, 143, 216, 0.35), 0 24px 48px -26px rgba(13, 11, 16, 0.7);
}
.fc-hero-logo { width: 56px; height: 56px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(157, 143, 216, 0.6), 0 10px 28px -8px rgba(255, 61, 114, 0.6); }
.fc-eyebrow { color: #b9acec; }
.fc-h1 { color: #f7f4ef; margin: 6px 0 8px; }
.fc-h1 em { background: linear-gradient(180deg, #ff86a3, #ff3d72 60%, #c58bd8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fc-lede { color: #d8cff8; margin: 0; font-size: 15px; max-width: 64ch; }
.fc-tie { padding: 14px 0; border-top: 1px solid var(--fc-line); }
.fc-tie:first-of-type { border-top: 0; padding-top: 0; }
.fc-tie h3 { font-size: 14.5px; font-weight: 600; margin: 0 0 4px; }
.fc-tie p { margin: 0 0 10px; color: var(--ink-2); font-size: 13.5px; }
.fc-tie .facts { box-shadow: inset 0 0 0 1px var(--fc-line); }
.fc-tie-link { font-weight: 600; font-size: 14px; }
.fc-promo:hover { box-shadow: 0 0 0 1px var(--fc-pink); }
.fc-promo .go { color: var(--fc-pink); }
.btn.fc-btn { background: linear-gradient(180deg, #e8306a, #e0285f 55%, #cc1650); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 18px -8px rgba(255, 61, 114, 0.6); }
.tab-fc[aria-current='page'] { box-shadow: 0 1px 2px rgba(10, 10, 11, 0.08), 0 0 0 1px var(--fc-line) !important; }

/* mobile: one column with the action card right after the headline numbers, and a sticky button */
.dock { display: none; }
@media (max-width: 960px) {
  .grid { display: flex; flex-direction: column; gap: 0; align-items: stretch; } /* not the desktop 'start': every card full width */
  .col-l { display: contents; }
  .col-l > * { order: 3; min-width: 0; max-width: 100%; } /* flex items now: let wide tables scroll inside their card */
  .col-l > .early { order: 1; }
  .col-r { order: 2; position: static; margin-top: 18px; }
  .stats4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { grid-template-columns: 1fr; gap: 14px; }
  .pf { grid-template-columns: 1fr; gap: 22px; }
  .fc-view .col-r { order: 4; margin-top: 18px; }
  /* Phones (owner, 26 Oct 2026): the controls first. On Borrow and Multiply the action card (meter, collateral, amount,
     terms) comes right after the title; the banner and the comparison move below it. */
  #v-borrow .col-l > .hero.early, #v-borrow .col-l > #compare, #v-multiply .col-l > .hero.early { order: 3; }
  .ack input[type='checkbox'], .gate-check input[type='checkbox'] { width: 20px; height: 20px; flex: none; }
}
@media (max-width: 640px) {
  .ver a { min-height: 32px; display: inline-flex; align-items: center; } /* thumb-sized version switch */
  .wrap { padding-inline: 16px; }
  header.top { padding-top: 16px; }
  header.top .wrap { flex-wrap: wrap; gap: 12px; }
  nav.tabs { order: 3; width: 100%; justify-content: space-between; overflow-x: auto; }
  nav.tabs button { flex: 1 0 auto; padding: 7px 8px; font-size: 13.5px; }
  .top .right { gap: 8px; }
  .ver .vn { display: none; }
  #connect { padding: 10px 14px; }
  #connect[data-on='1'] { font-size: 12px; padding: 10px 11px; }
  .hide-sm { display: none; }
  h1 { font-size: 36px; }
  .lede { font-size: 15px; }
  .hero, .fc-hero { padding: 22px 20px; border-radius: 20px; }
  .hero { grid-template-columns: 1fr; }
  .hero .btn { grid-column: 1; grid-row: auto; justify-self: start; }
  .fc-hero { flex-direction: column; gap: 12px; }
  .big { font-size: 40px; }
  .big.quiet { font-size: 30px; }
  .hero-stats { gap: 10px; }
  .hero-stats dd { font-size: 17px; }
  .stats3 { grid-template-columns: 1fr 1fr; }
  .stats3 .stat:first-child { grid-column: 1 / -1; }
  .card.pad { padding: 20px; }
  table.rates th { white-space: normal; }
  table.rates .dl { display: none; }
  .pill-low { display: block; width: fit-content; margin: 5px 0 0 29px; }
  .sm-only { display: block; margin: 2px 0 0 29px; color: var(--muted); font-size: 12.5px; font-weight: 400; }
  table.rates .ds { display: inline; }
  .duebar { margin-inline: 16px; flex-direction: column; align-items: stretch; }
  .lg { grid-template-columns: auto minmax(0, 1fr); row-gap: 5px; }
  .lg-bar { grid-column: 1 / -1; grid-row: 2; }
  .toasts { left: 12px; right: 12px; bottom: calc(84px + min(env(safe-area-inset-bottom, 0px), 20px)); max-width: none; }
  .dock {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
    padding: 12px 16px calc(12px + min(env(safe-area-inset-bottom, 0px), 20px));
    background: var(--dock); border-top: 1px solid var(--line); backdrop-filter: blur(8px);
  }
  footer.foot { padding-bottom: calc(96px + min(env(safe-area-inset-bottom, 0px), 20px)); }
}
@media (max-width: 380px) {
  .brand b { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .term, .mseg button { transition: none; }
  .term .tag-cheap { animation: none; }
}