/* ============================================================================
   POOOL UI — components.css (Layer 3 of 4)
   Reusable, page-agnostic components. Use these on EVERY page so buttons,
   cards, chips, modals, tables etc. stay identical across the product.
   Layering: tokens (colors_and_type.css) → kit (kit.css) → THIS → <page>.css
   Rules: no raw hex/px where a token exists · new shared UI goes HERE,
   never into a page file · page files may position components, not restyle.
   ============================================================================ */

/* ── Morphing market nav ─────────────────────────────────── */
.mnav__center { flex: 1; display: grid; }
.mnav__center > * { grid-area: 1 / 1; }
.mnav__links { display: flex; gap: 26px; justify-content: center; transition: opacity .25s ease, transform .25s ease; }
.mnav__links a { font-size: 15px; font-weight: 600; color: var(--fg-body); text-decoration: none; }
.mnav__links a:hover { color: var(--brand-blue); }
.nav.pill .mnav__links { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.mpill { justify-self: center; display: inline-flex; align-items: center; height: 46px; background: #fff; border: 0; border-radius: 30px; box-shadow: var(--shadow-property); padding: 4px 4px 4px 8px; cursor: pointer; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease, box-shadow .2s ease; pointer-events: none; }
.nav.pill .mpill { opacity: 1; transform: none; pointer-events: auto; }
.mpill:hover { box-shadow: 0 8px 28px rgba(10,13,18,.12); }
.mpill__seg { font-size: 13.5px; font-weight: 600; color: var(--fg-heading-2); padding: 0 16px; white-space: nowrap; }
.mpill__seg + .mpill__seg { border-left: 1px solid var(--border); }
.mpill__seg.muted { color: var(--fg-muted); font-weight: 500; }
.mpill__btn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--brand-blue); color: var(--brand-green-mint); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin-left: 6px; }
.mpill__btn svg { width: 16px; height: 16px; }

/* ── Guest note ────────────────────────────────────────────────────────── */
.guestnote { display: inline-flex; align-items: center; gap: 8px; background: var(--success-bg); color: var(--success-fg); font-size: 13.5px; font-weight: 600; border-radius: 20px; padding: 7px 16px; }
.guestnote svg { width: 15px; height: 15px; flex: none; }

/* ── Marketplace grid + filters ────────────────────────────────────────── */
.market-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.market-head h2 { font-size: 32px; font-weight: 800; letter-spacing: -.025em; color: var(--fg-heading-2); margin: 0; }
.market-head .sub { font-size: 15.5px; color: var(--fg-secondary); margin: 6px 0 0; }
.fchips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
/* Bar variant — chips inside a control bar / flex-gap column carry no
   bottom margin (the container owns the rhythm); replaces per-page inline
   margin patches. */
.fchips--bar { margin-bottom: 0; }
.fchip { border: 1px solid var(--border-strong); background: #fff; border-radius: 30px; padding: 9px 18px; font-family: var(--font-family); font-size: 14px; font-weight: 600; color: var(--fg-body); cursor: pointer; transition: all .15s ease; }
.fchip:hover, .fchip.sg-hover { border-color: var(--fg-disabled); background: var(--bg-subtle); }
.fchip.on { background: var(--brand-blue); border-color: var(--brand-blue); color: var(--brand-green-mint); }
.fchip .n { opacity: .65; font-weight: 500; margin-left: 4px; }
.mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.mgrid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.market-foot { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 40px; }
.market-foot__n { font-size: 13.5px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }

/* acard extensions: meta icon row + hover affordance */
.acard { position: relative; }
.acard__icons { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--fg-secondary); margin-top: 10px; }
.acard__icons .div { width: 1px; height: 12px; background: var(--border); }
.acard__icons svg { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; color: var(--fg-muted); }
.acard__go { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(-4px); transition: opacity .25s ease, transform .25s ease; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.acard__go svg { width: 16px; height: 16px; color: var(--brand-blue); }
.acard:hover .acard__go { opacity: 1; transform: none; }
.acard__stat .k, .acard__funded { white-space: nowrap; }

/* ── Quick view modal ──────────────────────────────────────────────────── */
.qv-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(16,24,40,.55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: qvFade .2s ease both; }
@keyframes qvFade { from { opacity: 0; } }
.qv { background: #fff; border-radius: 24px; overflow: hidden; width: min(960px, 100%); max-height: min(640px, 92vh); display: grid; grid-template-columns: 1.05fr 1fr; box-shadow: 0 40px 100px rgba(0,0,40,.35); animation: qvUp .25s cubic-bezier(.2,.8,.2,1) both; }
@keyframes qvUp { from { opacity: 0; transform: translateY(20px) scale(.98); } }
.qv__media { position: relative; min-height: 420px; }
.qv__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.qv__body { padding: 32px 32px 28px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.qv__close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); backdrop-filter: blur(4px); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.qv__close svg { width: 16px; height: 16px; color: var(--fg-heading-2); }
.qv__loc { font-size: 13.5px; font-weight: 600; color: var(--fg-muted); }
.qv__title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--fg-heading-2); margin: 0; line-height: 1.15; }
.qv__blurb { font-size: 14.5px; color: var(--fg-secondary); line-height: 1.6; margin: 0; }
.qv__price { display: flex; align-items: baseline; justify-content: space-between; }
.qv__price .p { font-size: 30px; font-weight: 800; color: var(--brand-blue); }
.qv__price .p span { font-size: 14px; color: var(--fg-muted); font-weight: 600; }
.qv__price .f { font-size: 12.5px; color: var(--fg-muted); }
.qv__track { height: 6px; border-radius: 99px; background: var(--bg-hover); overflow: hidden; }
.qv__fill { height: 100%; border-radius: 99px; background: var(--brand-green-mint); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.qv__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; border-top: 1px dotted var(--border-strong); padding-top: 16px; }
.qv__stat .k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-disabled); font-weight: 600; }
.qv__stat .v { font-size: 16px; font-weight: 800; color: var(--brand-blue); margin-top: 2px; }
.qv__cta { display: flex; gap: 10px; margin-top: auto; padding-top: 6px; }
.qv__note { font-size: 12px; color: var(--fg-muted); text-align: center; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) { .mgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px) {
  .mgrid, .mgrid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .qv { grid-template-columns: 1fr; max-height: 92vh; }
  .qv__media { min-height: 240px; }
}
@media (max-width: 720px) {
  .mgrid, .mgrid.cols-3 { grid-template-columns: 1fr; }
  .mnav__links { display: none; }
  .mpill__seg { padding: 0 10px; font-size: 12.5px; }
}

/* ── Card-language consistency ─────────────────────────────────────────────
   The asset card's surface language (white, 20px radius, 0 4px 20px depth,
   hover lift) carried across every section so the page reads as one system. */

/* How-it-works steps → same surface + lift as asset cards */
.step { border: 1px solid var(--border-soft); border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property); }
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow-property-hover); border-color: var(--border-soft); }

/* Value props → white card surface instead of tinted panel */
.value { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property); transition: transform .3s, box-shadow .3s; }
.value:hover { transform: translateY(-4px); box-shadow: var(--shadow-property-hover); }

/* Testimonials → depth instead of hairline */
.tcard { border: 1px solid var(--border-soft); border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property); transition: transform .3s, box-shadow .3s; }
.tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-property-hover); }

/* Stats strip → rounded card band instead of full-bleed */
.statwrap { padding: 0 32px; }
.statwrap .stats { max-width: 1200px; margin: 0 auto; border-radius: 24px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,255,.16); }

/* FAQ → one card surface holding the accordion */
.faqwrap .faqs { background: #fff; border: 1px solid var(--border-soft); border-radius: 24px; padding: 10px 32px; box-shadow: var(--shadow-property); }
.faqwrap .faqq:last-child { border-bottom: 0; }

/* Calculator + final CTA → consistent elevated depth */
.calc { box-shadow: 0 4px 20px rgba(0,0,255,.16); }
.finalcta { box-shadow: 0 24px 70px rgba(0,0,40,.22); }

@media (max-width: 720px) {
  .statwrap { padding: 0 16px; }
  .faqwrap .faqs { padding: 4px 18px; }
}

/* ── How it works: scene base + floating tag ───────────────────────────────
   The animated browse/invest/earn scenes were removed with the old 3-step
   section (replaced by the 4-step stepper + phone video on the landing).
   .hiw-scene + .hiw-n are still reused (values section, asset page) and
   .hiw-tag by the returns calculator, so those stay. */
.hiw-scene { position: relative; height: 132px; border-radius: 14px; background: var(--info-bg); overflow: hidden; margin-bottom: 18px; }
.hiw-n { width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--brand-blue); color: var(--brand-green-mint); font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.hiw-tag { position: absolute; top: 14px; right: 14px; background: var(--brand-blue); color: var(--brand-green-mint); font-size: 12px; font-weight: 800; border-radius: 16px; padding: 5px 11px; box-shadow: 0 6px 18px rgba(0,0,255,.25); animation: floaty 5s ease-in-out infinite; white-space: nowrap; }
.hiw-tag--green { background: var(--brand-green-mint); color: var(--brand-blue); box-shadow: 0 6px 18px rgba(3,255,136,.30); }
@media (prefers-reduced-motion: reduce) { .hiw-tag { animation: none !important; } }

/* ── Unification v2: borderless surfaces + one hover language ──────────────
   The asset card is the reference: NO border, soft 0 4px 20px depth, radius,
   lift on hover. Everything else now follows exactly that. */
.step, .value, .tcard, .faqwrap .faqs { border: 0; }
.step { transition: transform .3s, box-shadow .3s; }
.step:hover { border-color: transparent; transform: translateY(-6px); box-shadow: var(--shadow-property-hover); }
.value:hover, .tcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-property-hover); }
.fchip { border: 0; box-shadow: var(--shadow-control); transition: transform .3s, box-shadow .3s, background .15s ease, color .15s ease; }
.fchip:hover { background: #fff; transform: translateY(-2px); box-shadow: var(--shadow-control-hover); }
.fchip.on { box-shadow: 0 8px 22px rgba(0,0,255,.22); }
/* Chips double as in-page anchors (styleguide TOC) — same look, no underline */
a.fchip { display: inline-flex; align-items: center; text-decoration: none; }
.qv__cta .btn--ghost { background: var(--bg-hover); }

/* ── Why POOOL: animated value scenes (same system as How-it-works) ─────── */
.value.vf { flex-direction: column; gap: 0; padding: 20px 20px 24px; }
.vf .hiw-scene { margin-bottom: 16px; }
.vf-head { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.vf-head .value__ic { width: 38px; height: 38px; border-radius: 11px; }
.vf-head .value__ic svg { width: 20px; height: 20px; }
.vf-head h3 { font-size: 19px; font-weight: 700; color: var(--fg-heading-2); margin: 0; }
.value.vf p { margin: 0; }

/* Scene: shield over villa photo */
.vf-photo { position: absolute; left: calc(50% - 62px); top: 16px; width: 116px; height: 78px; border-radius: 10px; object-fit: cover; box-shadow: 0 4px 14px rgba(10,13,18,.15); }
.vf-shield { position: absolute; left: calc(50% + 30px); top: 52px; width: 42px; height: 42px; border-radius: 50%; background: var(--brand-blue); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,255,.30); }
.vf-shield::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--brand-blue); animation: pulsering 2.4s ease-out infinite; }
.vf-note { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; }

/* Scene: 12 monthly payouts filling */
.vf-months { position: absolute; left: 50%; transform: translateX(-50%); bottom: 34px; display: flex; gap: 6px; }
.vf-months i { display: block; width: 13px; height: 26px; border-radius: 4px; background: #fff; box-shadow: 0 1px 3px rgba(10,13,18,.10); animation: vfFill 5s linear infinite; }
@keyframes vfFill { 0% { background: #fff; } 6%, 80% { background: var(--brand-green-mint); } 90%, 100% { background: #fff; } }
.vf-axis { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; }

/* Scene: resale swap — chips crossing */
.vf-lane { position: absolute; left: 12%; right: 12%; top: 50%; border-top: 2px dashed var(--border-strong); }
.vf-chip { position: absolute; display: inline-flex; align-items: center; gap: 7px; background: #fff; border-radius: 10px; padding: 8px 13px; font-size: 12.5px; font-weight: 700; color: var(--fg-heading-2); box-shadow: 0 4px 14px rgba(10,13,18,.12); white-space: nowrap; z-index: 1; }
.vf-chip .dot-blue, .vf-chip .dot-mint { width: 9px; height: 9px; border-radius: 50%; }
.vf-chip .dot-blue { background: var(--brand-blue); }
.vf-chip .dot-mint { background: var(--brand-green-mint); border: 1px solid var(--brand-blue); }
.vf-chip--a { left: 14%; top: 26px; animation: vfSwapA 5s ease-in-out infinite; }
.vf-chip--b { right: 14%; top: 74px; animation: vfSwapB 5s ease-in-out infinite; }
@keyframes vfSwapA { 0%, 12% { transform: none; } 50%, 62% { transform: translateX(110px); } 100% { transform: none; } }
@keyframes vfSwapB { 0%, 12% { transform: none; } 50%, 62% { transform: translateX(-110px); } 100% { transform: none; } }

/* Scene: investors popping in */
.vf-people { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.vf-people img { width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 3px 10px rgba(10,13,18,.18); margin-left: -10px; animation: vfPop 5s cubic-bezier(.3,1.4,.4,1) infinite both; }
.vf-people img:first-child { margin-left: 0; }
.vf-people .vf-more { margin-left: 8px; background: #fff; border-radius: 16px; padding: 5px 11px; font-size: 12px; font-weight: 800; color: var(--brand-blue); box-shadow: 0 3px 10px rgba(10,13,18,.12); }
@keyframes vfPop { 0% { transform: scale(0); } 9% { transform: scale(1); } 84% { transform: scale(1); } 94%, 100% { transform: scale(0); } }

@media (prefers-reduced-motion: reduce) { .vf-shield::after, .vf-months i, .vf-chip, .vf-people img { animation: none !important; } .vf-months i { background: var(--brand-green-mint); } }

/* ── Calculator: switchable chart templates (curve / bars / donut) ─────── */
.cf-switch { display: flex; gap: 4px; align-self: flex-end; background: rgba(0,0,0,.18); border-radius: 10px; padding: 4px; margin: -6px 0 -8px; }
.cf-switch button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: rgba(255,255,255,.72); font-family: var(--font-family); font-size: 12.5px; font-weight: 700; padding: 6px 11px; border-radius: 7px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.cf-switch button:hover { color: #fff; }
.cf-switch button.on { background: var(--brand-green-mint); color: var(--brand-blue); }
.cf-switch svg { width: 14px; height: 14px; }

.cf-chart { position: relative; height: 138px; background: rgba(0,0,0,.18); border-radius: 14px; overflow: hidden; }
.cf-chart > svg { position: absolute; inset: 8px 0 0; width: 100%; height: calc(100% - 8px); display: block; }
.cf-tag { position: absolute; top: 12px; right: 12px; animation: floaty 5s ease-in-out infinite; }
.cf-tag--left { right: auto; left: 12px; }
.cf-x { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.6); margin-top: -8px; }

/* bars template — invested base + profit per year */
.cf-bars { position: absolute; inset: 14px 14px 8px; display: flex; align-items: stretch; gap: 6px; }
.cf-bar { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cf-bar .stack { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.cf-bar i { display: block; transition: height .5s cubic-bezier(.2,.8,.2,1); }
.cf-bar .gain { background: var(--brand-green-mint); border-radius: 4px 4px 0 0; }
/* 3-segment stack (asset calc): growth (top) · rental (mid) · base (bottom).
   .gain is kept for the landing calc's 2-segment bars. */
.cf-bar .growth { background: var(--brand-green-neon); border-radius: 4px 4px 0 0; }
.cf-bar .rental { background: var(--brand-green-mint); }
.cf-bar .base { background: rgba(255,255,255,.26); border-radius: 0 0 3px 3px; }
.cf-bar .rental, .cf-bar .base { box-shadow: 0 -1.5px 0 rgba(0,0,0,.25); }
/* Pool grammar on the dark panel (decision 2026-06-12): the curve draws in
   once on mount (slider updates keep the elements — no re-animation), the
   neon now-dot pops last, the final bar carries the swimmer. Keyframes:
   chartDraw/chartPop with the light charts. */
.cf-line { animation: chartDraw 1.2s cubic-bezier(.4,0,.2,1) .2s both; }
.cf-now { opacity: 0; animation: chartPop .45s cubic-bezier(.2,.8,.3,1.3) 1.25s forwards; }
.cf-bar--now .stack > i:first-child { position: relative; }
.cf-bar--now .stack > i:first-child::after { content: ""; position: absolute; top: -4px; left: 50%; margin-left: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-green-neon); box-shadow: 0 0 0 3px rgba(3,255,136,.18); }
.cf-bar > span { font-size: 10px; font-weight: 600; color: rgba(255,255,255,.55); text-align: center; margin-top: 5px; }

/* donut template — split of the projected value */
.cf-donut { position: absolute; inset: 0; display: flex; align-items: center; gap: 20px; padding: 12px 18px; }
.cf-donut > svg { width: 106px; height: 106px; flex: none; }
.cf-donut .arc { transition: stroke-dasharray .55s cubic-bezier(.2,.8,.2,1); }
.cf-donut text { font-family: var(--font-family); }
.cf-donut .t1 { fill: #fff; font-size: 18px; font-weight: 800; }
.cf-donut .t2 { fill: rgba(255,255,255,.6); font-size: 10.5px; font-weight: 600; }
.cf-donut__legend { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cf-donut__legend > div { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.78); }
.cf-donut__legend span { flex: 1; }
.cf-donut__legend b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.cf-donut__legend b.mint { color: var(--brand-green-mint); }
.cf-donut__legend .d { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.cf-donut__legend .d.base { background: rgba(255,255,255,.26); }
.cf-donut__legend .d.gain { background: var(--brand-green-mint); }
.cf-donut__legend .d.appr { background: var(--brand-green-neon); }
.cf-donut__legend .total { border-top: 1px dotted rgba(255,255,255,.25); padding-top: 7px; margin-top: 2px; }
.cf-donut__legend .total span { padding-left: 17px; }

@media (prefers-reduced-motion: reduce) { .cf-tag { animation: none; } .cf-bar i, .cf-donut .arc { transition: none; } .cf-line, .cf-now { animation: none; opacity: 1; } }

/* ── Final CTA: cinematic, on-photo, magnetic ──────────────────────────── */
.fcta { position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,40,.22); }
.fcta__img { position: absolute; inset: 0; }
.fcta__img img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 22s ease-in-out infinite alternate; }
.fcta__scrim { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(4,6,24,.80), rgba(0,0,90,.46) 55%, rgba(4,6,24,.66)); }
.fcta__ring { position: absolute; border: 1.5px solid rgba(152,251,150,.32); border-radius: 50%; pointer-events: none; }
.fcta__in { position: relative; z-index: 2; text-align: center; padding: 88px 32px 84px; color: #fff; }
.fcta__in .eyebrow { background: rgba(255,255,255,.12); color: var(--brand-green-mint); }
.fcta__in .eyebrow .dot { background: var(--brand-green-neon); }
.fcta__in h2 { font-size: clamp(32px, 4.2vw, 50px); font-weight: 800; letter-spacing: -.03em; margin: 20px auto 14px; max-width: 22ch; line-height: 1.06; }
.fcta__in h2 .hl { color: var(--brand-green-mint); }
.fcta__in p { font-size: 17.5px; color: rgba(255,255,255,.86); margin: 0 auto 30px; max-width: 46ch; }
.fcta__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.magnet { display: inline-block; will-change: transform; }
.shine { position: relative; overflow: hidden; }
.shine::after { content: ''; position: absolute; top: 0; left: -70%; width: 44%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.38), transparent); transform: skewX(-20deg); transition: left .55s ease; }
.shine:hover::after { left: 130%; }
.fcta__proof { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; font-size: 13.5px; color: rgba(255,255,255,.78); flex-wrap: wrap; }
.fcta__proof .mhero__flags img { border-color: rgba(255,255,255,.7); }
@media (prefers-reduced-motion: reduce) { .fcta__img img { animation: none; } }
@media (max-width: 720px) { .fcta__in { padding: 60px 20px 56px; } }

/* ── Testimonials: real portrait cards ─────────────────────────────────── */
.pcard { background: var(--bg-surface); border-radius: var(--radius-card-xl); overflow: hidden; box-shadow: var(--shadow-property); display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; }
.pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-property-hover); }
.pcard__media { position: relative; aspect-ratio: 4 / 3.1; }
.pcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.pcard__chip { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.94); backdrop-filter: blur(4px); border-radius: 16px; padding: 5px 12px; font-size: 12px; font-weight: 700; color: var(--success-fg); box-shadow: 0 1px 4px rgba(0,0,0,.12); white-space: nowrap; }
.pcard__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pcard__q { font-size: 15.5px; line-height: 1.6; color: var(--fg-body); flex: 1; }
.pcard__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; border-top: 1px dotted var(--border-strong); padding-top: 14px; }
.pcard__n { font-size: 14.5px; font-weight: 700; color: var(--fg-heading-2); }
.pcard__r { font-size: 13px; color: var(--fg-muted); margin-top: 1px; }
.pcard__stat { font-size: 11.5px; font-weight: 700; color: var(--brand-blue); background: var(--info-bg); border-radius: 16px; padding: 4px 10px; white-space: nowrap; }

/* ── Stats: platform pulse band ────────────────────────────────────────── */
.sband { position: relative; max-width: 1200px; margin: 0 auto; border-radius: 24px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,255,.16); background: radial-gradient(130% 180% at 10% 0%, #0A0AE0, var(--brand-blue) 48%, #0000C2); display: grid; grid-template-columns: repeat(4, 1fr); padding: 38px 12px; }
.sband__spark { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .32; }
.sband__spark polyline { fill: none; stroke: var(--brand-green-neon); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 10 12; animation: sbandDash 16s linear infinite; }
@keyframes sbandDash { to { stroke-dashoffset: -440; } }
.sband__item { position: relative; text-align: center; padding: 0 18px; }
.sband__item + .sband__item::before { content: ''; position: absolute; left: 0; top: 14%; bottom: 14%; width: 1px; background: rgba(255,255,255,.16); }
.sband__v { font-size: 38px; font-weight: 800; color: var(--brand-green-mint); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sband__k { font-size: 13.5px; color: rgba(255,255,255,.78); margin-top: 2px; }
.sband__d { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; background: var(--brand-green-mint); color: var(--brand-blue); font-size: 12px; font-weight: 700; border-radius: 16px; padding: 4px 11px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .sband__spark polyline { animation: none; } }
@media (max-width: 980px) {
  .sband { grid-template-columns: 1fr 1fr; gap: 28px 0; padding: 30px 8px; }
  .sband__item:nth-child(3)::before { display: none; }
}
@media (max-width: 560px) { .sband { grid-template-columns: 1fr; } .sband__item + .sband__item::before { display: none; } }

/* ── P1–P3 polish: mobile search, burger drawer, bottom sheet, FAQ, footer ─ */
.btn--outline { background: #fff; color: var(--fg-body); border: 0; box-shadow: var(--shadow-control); }
.btn--outline:hover, .btn--outline.sg-hover { background: #fff; box-shadow: var(--shadow-control-hover); }
.msearch-mobile { display: none; }
.mnav-burger { display: none; width: 42px; height: 42px; border: 0; background: transparent; border-radius: 10px; cursor: pointer; align-items: center; justify-content: center; flex: none; }
.mnav-burger:hover { background: var(--bg-hover); }
.mnav-burger svg { width: 22px; height: 22px; color: var(--fg-heading-2); }
.mnav-drawer { position: fixed; left: 12px; right: 12px; top: 80px; z-index: 80; background: #fff; border-radius: 20px; box-shadow: 0 18px 48px rgba(0,0,0,.18); padding: 10px; display: none; animation: heroFade .25s ease both; }
.mnav-drawer a { display: block; padding: 13px 16px; border-radius: 12px; font-size: 16px; font-weight: 600; color: var(--fg-heading-2); text-decoration: none; }
.mnav-drawer a:hover { background: var(--bg-hover); }
.mnav-drawer__cta { display: flex; gap: 10px; padding: 12px 6px 6px; border-top: 1px solid var(--border-soft); margin-top: 8px; }
.mnav-drawer__cta .btn { flex: 1; }
@media (max-width: 720px) {
  .mnav-burger { display: inline-flex; }
  .mnav-drawer.open { display: block; }
  .nav__cta .btn--ghost { display: none; }
  .msearch-mobile { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: min(340px, 100%); height: 52px; border: 0; border-radius: 30px; background: var(--brand-blue); color: var(--brand-green-mint); font-family: var(--font-family); font-size: 16px; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,255,.22); cursor: pointer; }
  .msearch-mobile svg { width: 18px; height: 18px; }
  .qv-overlay { align-items: flex-end; padding: 0; }
  .qv { width: 100%; border-radius: 20px 20px 0 0; max-height: 90vh; animation: qvSheet .3s cubic-bezier(.2,.8,.2,1) both; }
}
@keyframes qvSheet { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .qv, .mnav-drawer { animation: none; } }

/* FAQ microinteraction — same icon language as the step numbers */
/* FaqList (support-sections) renders the question as a real <button> for
   keyboard access — reset it back to the kit's .faqq__q look */
button.faqq__q { width: 100%; border: 0; background: transparent; font-family: var(--font-family); text-align: left; }
.faqwrap .faqq__q { transition: color .2s ease; }
.faqwrap .faqq__q svg { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--info-bg); color: var(--brand-blue); box-sizing: border-box; transition: transform .25s, background .25s, color .25s; }
.faqwrap .faqq.open .faqq__q { color: var(--brand-blue); }
.faqwrap .faqq.open .faqq__q svg { background: var(--brand-blue); color: var(--brand-green-mint); }

/* Footer trust strip */
.foot-trust { background: #0B0D12; padding: 44px 0 0; }
.foot-trust__in { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; color: #98A2B3; font-size: 14px; padding-bottom: 28px; border-bottom: 1px solid #232734; }
.foot-trust__in b { color: var(--brand-green-mint); font-weight: 700; }
.foot-trust .mhero__flags img { width: 26px; height: 26px; border-color: #0B0D12; }

/* Flag stacks — shared by hero, final CTA, footer trust on every page */
.mhero__flags { display: flex; }
.mhero__flags img { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; object-fit: cover; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.mhero__flags img:first-child { margin-left: 0; }

/* ── Brand shape layer: logo-derived, scroll-driven (GSAP scrub) ─────────
   Oversized outline circles from the 3-circle mark + arch motif. They only
   move with scroll (parallax), never on their own. Hidden on small screens
   and when reduced motion is preferred. */
.bshape { position: absolute; pointer-events: none; border-radius: 50%; border: 1.5px solid rgba(0,0,255,.08); will-change: transform; z-index: 0; }
.mhero .wrap, #why .wrap, #calc .wrap { position: relative; z-index: 1; }
#why, #calc { position: relative; overflow: hidden; }
.bshape--hero1 { width: 360px; height: 360px; top: -70px; left: -130px; }
.bshape--hero2 { width: 560px; height: 560px; top: 110px; right: -220px; border-color: rgba(3,255,136,.18); }
.bshape--trio { border: 0; left: -110px; top: 90px; width: 300px; height: 140px; }
.bshape--trio i { position: absolute; top: 0; width: 140px; height: 140px; border-radius: 50%; border: 1.5px solid rgba(0,0,255,.09); }
.bshape--trio i:nth-child(2) { left: 80px; border-color: rgba(3,255,136,.20); }
.bshape--trio i:nth-child(3) { left: 160px; }
.bshape--arch { width: 460px; height: 460px; right: -180px; top: -150px; border-color: rgba(0,0,255,.07); }
@media (max-width: 980px) { .bshape { display: none; } }
@media (prefers-reduced-motion: reduce) { .bshape { display: none; } }

/* ── Forms (shared) — inputs, checkbox, divider, social button, spinner ──
   Token-driven: 8px input radius, brand-blue focus ring, danger states.
   Used by auth pages; reuse on any page that needs form controls. */
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-field > label { font-size: 14px; font-weight: 500; color: var(--fg-body); }
.input-wrap { position: relative; display: flex; }
.input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-input); font-family: var(--font-family); font-size: 15px; color: var(--fg-heading-2); background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.input::placeholder { color: var(--fg-disabled); }
.input:focus, .input.sg-focus { outline: 0; border-color: var(--brand-blue); box-shadow: 0 0 0 4px rgba(0,0,255,.10); }
.input:disabled { background: var(--bg-subtle); color: var(--fg-disabled); cursor: not-allowed; }
textarea.input { height: auto; min-height: 150px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
/* Form variant — inside set-* card forms a select speaks the SAME language
   as .input (1px border, input radius, brand focus ring), never the
   borderless marketplace-filter look; one rule keeps settings, the listing
   wizard and every report form identical. */
.sel.sel--form { height: 44px; padding: 0 34px 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-input); font-size: 15px; font-weight: 400; background: #fff; box-shadow: none; }
.sel.sel--form:hover { box-shadow: none; }
.sel.sel--form:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 4px rgba(0,0,255,.10); }
.input--error { border-color: var(--danger); }
.input--error:focus { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(217,45,32,.12); }
.field-error { font-size: 13px; color: var(--danger-fg); }
.field-error a { color: inherit; font-weight: 700; }
.input-eye { position: absolute; right: 5px; top: 4px; width: 36px; height: 36px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--fg-muted); }
.input-eye:hover { background: var(--bg-hover); }
.input-eye svg { width: 18px; height: 18px; }
/* Password strength meter — pair with a password .input (levels 1 weak / 2 good / 3 strong) */
.pw-meter { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.pw-meter__bars { display: flex; gap: 4px; flex: 1; }
.pw-meter__bars i { height: 4px; flex: 1; border-radius: 2px; background: var(--border); transition: background .25s; }
.pw-meter__label { font-size: 12.5px; font-weight: 700; }
.pw-meter--1 .pw-meter__bars i:nth-child(1) { background: var(--danger); }
.pw-meter--1 .pw-meter__label { color: var(--danger-fg); }
.pw-meter--2 .pw-meter__bars i:nth-child(-n+2) { background: var(--warning-fg); }
.pw-meter--2 .pw-meter__label { color: var(--warning-fg); }
.pw-meter--3 .pw-meter__bars i { background: var(--success-fg); }
.pw-meter--3 .pw-meter__label { color: var(--success-fg); }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fg-body); cursor: pointer; user-select: none; }
.check input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 1px solid var(--border-strong); border-radius: 6px; cursor: pointer; display: grid; place-content: center; transition: all .15s ease; margin: 0; background: #fff; }
.check input:checked { background: var(--brand-blue); border-color: var(--brand-blue); }
.check input:checked::after { content: ''; width: 9px; height: 5px; border-left: 2px solid var(--brand-green-mint); border-bottom: 2px solid var(--brand-green-mint); transform: rotate(-45deg) translateY(-1px); }
.divider { display: flex; align-items: center; gap: 12px; color: var(--fg-muted); font-size: 13px; margin: 22px 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.btn--social { background: #fff; color: var(--fg-body); border: 1px solid var(--border-strong); box-shadow: var(--shadow-card); font-weight: 600; }
.btn--social:hover { background: var(--bg-subtle); }
.btn--social img { width: 20px; height: 20px; }
.btn .spin { width: 18px; height: 18px; border: 2.5px solid rgba(152,251,150,.35); border-top-color: var(--brand-green-mint); border-radius: 50%; animation: spinRot .7s linear infinite; }
@keyframes spinRot { to { transform: rotate(360deg); } }
/* Reduced motion: keep the spinner moving (it is the only loading
   affordance — a frozen arc reads as broken) but slow it right down. */
@media (prefers-reduced-motion: reduce) { .btn .spin { animation-duration: 1.6s; } }

/* ── Key/value rows (shared) — dotted detail rows, DS investment pattern ── */
.kv { display: flex; flex-direction: column; }
.kv__r { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px dotted var(--border-strong); }
.kv__r:last-child { border-bottom: 0; }
.kv__r .k { font-size: 13.5px; color: var(--fg-secondary); }
.kv__r .v { font-size: 14.5px; font-weight: 700; color: var(--fg-heading-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kv__r .v.pos { color: var(--success-fg); }
.kv__r .v.blue { color: var(--brand-blue); }
.kv__r--total { border-top: 1px solid var(--border); border-bottom: 0; margin-top: 4px; padding-top: 14px; }
.kv__r--total .k { font-weight: 700; color: var(--fg-heading-2); }
/* Bare variant — funnel/step rows without the dotted divider */
.kv__r--bare { border-bottom: 0; padding-bottom: 4px; }
.kv__r .stchip { margin-right: 8px; }

/* ── Photo gallery + lightbox (shared) ─────────────────────────────────── */
.gal { position: relative; display: grid; grid-template-columns: 2fr 1fr; gap: 10px; height: clamp(320px, 48vh, 520px); }
.gal--single { grid-template-columns: 1fr; }
.gal__main, .gal__thumb { position: relative; overflow: hidden; cursor: pointer; background: var(--bg-hover); }
.gal__main { border-radius: 24px 0 0 24px; grid-row: span 2; }
.gal--single .gal__main { border-radius: 24px; }
.gal__thumb:nth-child(2) { border-radius: 0 24px 0 0; }
.gal__thumb:nth-child(3) { border-radius: 0 0 24px 0; }
.gal__main img, .gal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.gal__main:hover img, .gal__thumb:hover img { transform: scale(1.03); }
.gal__col { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; grid-row: span 2; }
.gal__actions { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: flex; align-items: center; gap: 8px; }
.gal__action { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,.94); backdrop-filter: blur(4px); border: 0; border-radius: 10px; padding: 9px 14px; font-family: var(--font-family); font-size: 13.5px; font-weight: 700; line-height: 1; color: var(--fg-heading-2); text-decoration: none; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.15); transition: transform .15s ease; }
.gal__action:hover { transform: translateY(-2px); }
.gal__action[disabled] { cursor: default; opacity: .94; }
.gal__action[disabled]:hover { transform: none; }
.gal__action svg { width: 16px; height: 16px; flex: none; }
.gal__live--soon { color: var(--fg-secondary); }
.gal__soon { margin-left: 4px; padding: 2px 6px; border-radius: var(--radius-pill); background: var(--bg-hover); color: var(--fg-muted); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.gal__count { position: absolute; left: 16px; bottom: 16px; z-index: 2; background: rgba(16,24,40,.6); backdrop-filter: blur(4px); color: #fff; font-size: 12.5px; font-weight: 700; border-radius: 16px; padding: 5px 11px; }
@media (max-width: 720px) {
  .gal { grid-template-columns: 1fr; height: 280px; }
  .gal__col { display: none; }
  .gal__main { border-radius: 18px; grid-row: auto; }
}
@media (max-width: 640px) {
  .gal__actions { gap: 6px; }
  .gal__action { width: 42px; min-width: 42px; height: 42px; padding: 0; gap: 0; }
  .gal__action svg { width: 18px; height: 18px; }
  .gal__action-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

.lb { position: fixed; inset: 0; z-index: 300; background: rgba(8,10,22,.94); display: flex; align-items: center; justify-content: center; animation: qvFade .2s ease both; }
.lb img { max-width: min(1200px, 92vw); max-height: 84vh; border-radius: 14px; box-shadow: 0 40px 120px rgba(0,0,0,.6); }
.lb__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease; }
.lb__btn:hover { background: rgba(255,255,255,.24); }
.lb__btn svg { width: 20px; height: 20px; }
.lb__btn--prev { left: 22px; }
.lb__btn--next { right: 22px; }
.lb__close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lb__close:hover { background: rgba(255,255,255,.24); }
.lb__close svg { width: 18px; height: 18px; }
.lb__count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.85); font-size: 13.5px; font-weight: 700; }
.lb__cap { position: absolute; top: 22px; left: 22px; color: rgba(255,255,255,.7); font-size: 13.5px; font-weight: 600; }

/* Icon action button (save / share) */
.iconbtn { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--radius-bar); border: 0; background: #fff; box-shadow: var(--shadow-control); font-family: var(--font-family); font-size: 13.5px; font-weight: 700; color: var(--fg-body); cursor: pointer; transition: all .15s ease; }
.iconbtn::after { content: ''; position: absolute; inset: -4px 0; } /* 44px touch target */
.iconbtn:hover { transform: translateY(-1px); box-shadow: var(--shadow-control-hover); }
.iconbtn svg { width: 17px; height: 17px; }
.iconbtn.on { color: var(--brand-blue); background: var(--info-bg); }
/* Icon-only square — row actions inside tables (copy link…): flat on the
   white row, brand-blue glyph, 32px box with the ≥44px hit area. ALWAYS
   ships an aria-label; the .on state carries the copied-feedback check. */
.iconbtn--sq { width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 9px; background: transparent; box-shadow: none; color: var(--brand-blue); }
.iconbtn--sq:hover { transform: none; box-shadow: none; background: var(--info-bg); }
.iconbtn--sq::after { inset: -6px; }

/* Mobile nav: the morph pill is desktop-only — without this it forces the
   nav row wider than the viewport (horizontal overflow). */
.calc__chips { flex-wrap: wrap; }
@media (max-width: 720px) {
  .mpill { display: none; }
  .mnav__center { min-width: 0; }
  .statwrap::before { left: 0; right: 0; }
  .kv__r .v { white-space: normal; text-align: right; }
}


/* ── Legal pages (Impressum, Datenschutz, AGB …) — shared layout ──────────
   JSX: legal-sections.jsx (LegalLayout + LegalSection + LegalCallout).
   Desktop: sticky TOC/doc-nav sidebar + content card; mobile: collapsible
   TOC above the card. Print rules at the end of this block. */
.legal-main { padding: 44px 0 96px; }
.legal-shell { max-width: 1060px; margin: 0 auto; }
.legal-head { margin: 0 0 26px; }
.legal-head h1 { font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1.08; color: var(--fg-heading-2); margin: 16px 0 10px; }
.legal-meta { font-size: 14px; color: var(--fg-muted); }
.legal-grid { display: grid; grid-template-columns: 240px minmax(0, 760px); gap: 36px; align-items: start; }
.legal-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }
.legal-card { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property); padding: 40px 44px 44px; }
.legal-card section { scroll-margin-top: 96px; }
.legal-card section + section { margin-top: 32px; padding-top: 28px; border-top: 1px dotted var(--border-strong); }
.legal-card h2 { font-size: 19px; font-weight: 700; color: var(--fg-heading-2); margin: 0 0 10px; }
.legal-card p { font-size: 15px; color: var(--fg-secondary); line-height: 1.65; margin: 0 0 10px; }
.legal-card p:last-child { margin-bottom: 0; }
.legal-card a { color: var(--brand-blue); font-weight: 600; text-decoration: none; }
.legal-card a:hover { text-decoration: underline; }
.legal-card address { font-style: normal; }
.legal-facts { margin: 14px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 28px; font-size: 15px; }
.legal-facts dt { color: var(--fg-muted); }
.legal-facts dd { margin: 0; color: var(--fg-heading-2); font-weight: 600; }

/* TOC + document switcher (sidebar cards) */
.legal-toc { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-card-lg); box-shadow: var(--shadow-property); padding: 16px 14px; }
.legal-toc__t { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-disabled); margin: 0 0 8px; padding: 0 10px; }
.legal-toc a { display: block; font-size: 13.5px; font-weight: 600; color: var(--fg-secondary); text-decoration: none; padding: 6px 10px; border-left: 2px solid transparent; border-radius: 0 var(--radius-input) var(--radius-input) 0; transition: color .15s, background .15s, border-color .15s; }
.legal-toc a:hover { color: var(--brand-blue); }
.legal-toc a.on { color: var(--brand-blue); border-left-color: var(--brand-blue); background: var(--info-bg); }
.legal-toc + .legal-toc { margin-top: 0; }

/* Mobile TOC (collapsible) */
.legal-toc-m { display: none; background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-card-lg); box-shadow: var(--shadow-property); margin-bottom: 18px; }
.legal-toc-m summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; font-size: 14px; font-weight: 700; color: var(--fg-heading-2); }
.legal-toc-m summary::-webkit-details-marker { display: none; }
.legal-toc-m summary svg { width: 16px; height: 16px; color: var(--fg-muted); transition: transform .2s; }
.legal-toc-m[open] summary svg { transform: rotate(180deg); }
.legal-toc-m nav { padding: 0 10px 12px; }
.legal-toc-m a { display: flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--fg-secondary); text-decoration: none; padding: 4px 10px; border-radius: var(--radius-input); }
.legal-toc-m a:active { background: var(--bg-subtle); }

/* Callout (Risk disclosure & co) */
.legal-callout { display: flex; gap: 12px; align-items: flex-start; background: var(--danger-bg); color: var(--danger-fg); border-radius: 14px; padding: 16px 18px; margin: 0 0 28px; font-size: 14.5px; font-weight: 600; line-height: 1.55; }
.legal-callout svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.legal-callout--warning { background: var(--warning-bg); color: var(--warning-fg); }
.legal-callout p { color: inherit !important; font-size: inherit; margin: 0; }

/* Data table (cookie list & co) */
.legal-tscroll { overflow-x: auto; margin-top: 14px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.legal-table th { text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-disabled); padding: 0 14px 8px 0; border-bottom: 1px solid var(--border); white-space: nowrap; }
.legal-table td { padding: 10px 14px 10px 0; border-bottom: 1px dotted var(--border-strong); color: var(--fg-secondary); line-height: 1.5; vertical-align: top; }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table td:first-child { font-weight: 700; color: var(--fg-heading-2); white-space: nowrap; }

/* Card foot: contact + versions */
.legal-foot { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--border-soft); font-size: 13.5px; color: var(--fg-muted); line-height: 1.6; }
.legal-foot p { font-size: inherit; color: inherit; margin: 0 0 4px; }

/* Back to top */
.backtop { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--bg-surface); box-shadow: var(--shadow-elevated); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.backtop.show { opacity: 1; transform: none; pointer-events: auto; }
.backtop:hover { box-shadow: var(--shadow-property-hover); }
.backtop svg { width: 18px; height: 18px; color: var(--brand-blue); }

@media (max-width: 979px) {
  .legal-grid { display: block; }
  .legal-aside { display: none; }
  .legal-toc-m { display: block; }
}
@media (max-width: 720px) {
  .legal-card { padding: 28px 22px 32px; }
  .legal-head h1 { font-size: 34px; }
  .legal-facts { grid-template-columns: 1fr; gap: 2px; }
  .legal-facts dd { margin-bottom: 10px; }
  .backtop { right: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { .legal-toc a, .backtop { transition: none; } }
@media print {
  .nav, .foot, .foot-trust, .legal-aside, .legal-toc-m, .backtop { display: none !important; }
  .legal-main { padding: 0; }
  .legal-card { box-shadow: none; border: 0; padding: 0; }
  .legal-card section { break-inside: avoid; }
  .legal-callout { border: 1px solid currentColor; }
}

/* ── App shell (signed-in chrome): sidebar + content area ──────────────────
   Used by every account page (Dashboard, Wallet, Portfolio, …). White sidebar
   surface, card language inside the page area. JSX: shell-sections.jsx.
   Logo and the Settings/Support/user-card block stay pinned; only the
   variable middle (.snav__scroll) scrolls on short viewports, so identity +
   log out never slip below the fold as areas are added. */
.shell { display: flex; min-height: 100vh; }
/* Dev-context shell — shared investor pages (leaderboard/settings/support) keep
   the developer chrome when reached with ?dev=1. A synchronous setter adds
   `shell-dev` to <html> before paint (top of those pages), so the right shell
   shows with no flash. Elements tagged data-shell="investor|developer" are the
   only bits that differ (the sidebar + the cart-vs-List-an-asset action). */
html.shell-dev [data-shell="investor"] { display: none !important; }
html:not(.shell-dev) [data-shell="developer"] { display: none !important; }
.snav { position: sticky; top: 0; height: 100vh; width: 252px; flex: none; display: flex; flex-direction: column; gap: 2px; background: var(--bg-surface); border-right: 1px solid var(--border-soft); padding: 22px 14px 16px; overflow: hidden; z-index: 80; }
.snav__scroll { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.snav__logo { display: block; padding: 0 10px 18px; flex: none; }
.snav__logo img { height: 26px; display: block; }
.snav__head, .snav__item { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; padding: 10px; border: 0; background: transparent; border-radius: 10px; font-family: var(--font-family); font-size: 14.5px; font-weight: 600; color: var(--fg-body); text-decoration: none; cursor: pointer; text-align: left; transition: background .15s ease, color .15s ease; }
.snav__head:hover, .snav__item:hover { background: var(--bg-hover); }
.snav__head .ic, .snav__item .ic { display: inline-flex; width: 19px; height: 19px; flex: none; color: var(--fg-secondary); }
.snav__head .ic svg, .snav__item .ic svg { width: 100%; height: 100%; }
.snav__head.on, .snav__head.on .ic { color: var(--brand-blue); }
.snav__dropdown > summary { list-style: none; }
.snav__dropdown > summary::-webkit-details-marker { display: none; }
.snav__head--toggle span:not(.ic):not(.snav__chev) { flex: 1; min-width: 0; }
.snav__dropdown[open] .snav__chev { transform: none; }
.snav__sub { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 6px; }
.snav__sub a, .snav__sub button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 8px 10px 8px 40px; border: 0; background: transparent; border-radius: 10px; font-family: var(--font-family); font-size: 14px; font-weight: 600; color: var(--fg-secondary); text-decoration: none; cursor: pointer; text-align: left; transition: background .15s ease, color .15s ease; }
.snav__sub a:hover, .snav__sub button:hover { background: var(--bg-hover); color: var(--fg-heading-2); }
.snav__sub .on, .snav__sub .on:hover { background: var(--info-bg); color: var(--brand-blue); }
.snav__soon { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-disabled); background: var(--bg-hover); border-radius: var(--radius-pill); padding: 3px 8px; opacity: 0; transition: opacity .15s ease; }
.snav__item:hover .snav__soon, .snav__item:focus-visible .snav__soon { opacity: 1; }
/* No hover on touch: stubs must announce themselves up front */
@media (hover: none) { .snav__soon { opacity: 1; } }
.snav__item[aria-disabled='true'] { cursor: default; }
/* Current page = filled pill, same treatment as the marketplace sub-nav;
   the group head (.snav__head.on) keeps text-only so two pills never stack */
.snav__item.on, .snav__item.on .ic { color: var(--brand-blue); }
.snav__item.on, .snav__item.on:hover { background: var(--info-bg); }
/* Active rail — the same vertical lane marker as the settings section nav
   (.set-nav__link.on): blue segment + mint dash at the pill's left edge,
   so both navigation levels carry one brand signature. Items are 44px
   (vs the section nav's 33px), the rail re-centers accordingly. */
.snav__item.on, .snav__sub .on { position: relative; }
.snav__item.on::before, .snav__item.on::after,
.snav__sub .on::before, .snav__sub .on::after { content: ""; position: absolute; left: 0; width: 3px; border-radius: var(--radius-pill); }
.snav__item.on::before, .snav__sub .on::before { top: 12px; height: 14px; background: var(--brand-blue); }
.snav__item.on::after, .snav__sub .on::after { top: 29px; height: 6px; background: var(--brand-green-mint); }
/* Project focus grammar (inset so the ring survives the scroll clip) */
.snav__head:focus-visible, .snav__item:focus-visible, .snav__sub a:focus-visible,
.snav__sub button:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: -2px; }
.snav__sep { flex: 1; min-height: 18px; }
.snav__user { display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-control); border-radius: 14px; padding: 9px 10px; margin-top: 12px; flex: none; }
.snav__ava { position: relative; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--brand-blue); color: var(--brand-green-mint); font-size: 12.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.snav__ava::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-green-neon); border: 2px solid var(--bg-surface); }
.snav__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.snav__who b { font-size: 13.5px; font-weight: 700; color: var(--fg-heading-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snav__who i { font-style: normal; font-size: 12px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* User card = the account menu trigger (investor ↔ developer dashboard +
   log out), so the name keeps the full card width. The menu opens UPWARD
   from the pinned card — popover recipe mirrors .nbell__panel (transparent
   border = forced-colors boundary); chevron points up at rest. */
.snav__user { position: relative; }
.snav__switch { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 44px; margin: -6px -6px -6px -6px; padding: 6px; border: 0; background: transparent; border-radius: 10px; font-family: var(--font-family); cursor: pointer; text-align: left; transition: background .15s ease; }
.snav__switch:hover { background: var(--bg-hover); }
.snav__switch:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: -2px; }
.snav__chev { display: inline-flex; width: 14px; height: 14px; flex: none; color: var(--fg-muted); transform: rotate(180deg); transition: transform .15s ease; }
.snav__chev svg { width: 100%; height: 100%; }
.snav__switch[aria-expanded='true'] .snav__chev { transform: none; }
.snav__menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); z-index: 90; background: var(--bg-surface); border: 1px solid transparent; border-radius: var(--radius-card-lg); box-shadow: var(--shadow-property-hover); padding: 6px; }
.snav__menu-it { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 9px 10px; border-radius: 10px; text-decoration: none; transition: background .15s ease; }
.snav__menu-it:hover { background: var(--bg-hover); }
.snav__menu-it:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: -2px; }
.snav__menu-it .ic { display: inline-flex; width: 19px; height: 19px; flex: none; color: var(--fg-secondary); }
.snav__menu-it .ic svg { width: 100%; height: 100%; }
.snav__menu-t { display: flex; flex-direction: column; min-width: 0; }
.snav__menu-t b { font-size: 13.5px; font-weight: 700; color: var(--fg-heading-2); }
.snav__menu-t i { font-style: normal; font-size: 12px; color: var(--fg-secondary); }
/* Current dashboard = the sidebar's filled-pill state */
.snav__menu-it.on, .snav__menu-it.on:hover { background: var(--info-bg); }
.snav__menu-it.on .ic, .snav__menu-it.on .snav__menu-t b { color: var(--brand-blue); }
/* Hairline above log out — one level below the lane-marker separator */
.snav__menu-sep { height: 1px; background: var(--border-soft); margin: 4px 8px; }

.shell__body { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg-page); /* breathing room between the sidebar and the content, scaling with the viewport (32px on small laptops → 52px on wide screens); the floating action cluster shares it so it stays on the content's right edge */ --shell-gutter: clamp(32px, 2.8vw, 52px); }
/* Top-right action cluster: balance figure · bell · cart (desktop floats over
   the content padding, --bar variant sits right-aligned in the mobile bar) */
.shell__acts { position: absolute; top: 24px; right: var(--shell-gutter); z-index: 50; display: flex; align-items: center; gap: 10px; }
.shell__act { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--bg-surface); color: var(--fg-secondary); cursor: default; box-shadow: var(--shadow-control); transition: background .15s ease, color .15s ease; }
.shell__act:hover { background: var(--bg-hover); color: var(--fg-heading-2); }
a.shell__act { cursor: pointer; }
button.shell__act { cursor: pointer; }
.shell__act--on { color: var(--brand-blue); background: var(--info-bg); }
.shell__act--on:hover { color: var(--brand-blue); background: var(--info-bg); }
.shell__act svg { width: 20px; height: 20px; }
.shell__bal { display: inline-flex; align-items: center; padding: 0 6px; font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; color: var(--fg-heading-2); }
/* Buttons in the action cluster ride the shell's dense 36px scale — the
   rule lives in the contextual-compaction block below; no override here. */
.shell__acts--bar { position: static; margin-left: auto; gap: 4px; }
.shell__acts--bar .shell__act { border: 0; background: transparent; box-shadow: none; }
.shell__acts--bar .shell__bal { margin-right: 4px; }
/* Condensed page bar (desktop) — once the page header scrolls away, the
   page condenses into a slim fixed bar: small title (read from
   .shell__title) left, the action cluster right, so balance, notifications
   and cart (or the developer CTA) stay reachable on long pages. The
   scrolled-away floating cluster yields via visibility, so no control
   exists twice for the keyboard. Mobile keeps its always-on .shell__bar. */
.shell__condense { position: fixed; top: 0; left: 252px; /* = .snav width */ right: 0; z-index: 65; display: none; align-items: center; gap: 16px; height: 56px; padding: 0 var(--shell-gutter); background: rgba(255,255,255,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-soft); transform: translateY(-100%); visibility: hidden; transition: transform .2s ease, visibility .2s; }
.shell__condense--on { transform: none; visibility: visible; }
.shell__condense-t { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; color: var(--brand-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell__condense .shell__acts--bar { margin-left: auto; }
@media (min-width: 981px) {
  .shell__condense { display: flex; }
  .shell__body--cond > .shell__acts:not(.shell__acts--bar) { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .shell__condense { transition: none; } }
.shell__bar { display: none; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-soft); padding: 10px 14px; }
.shell__bar img { height: 24px; }
.shell__bar .mnav-burger { display: inline-flex; }
.shell__scrim { position: fixed; inset: 0; z-index: 70; background: rgba(16,24,40,.45); animation: qvFade .2s ease both; }
/* Content-width scale — every shell page caps its column with one of these
   (page CSS references the token, never a fresh px value): wide = dashboard
   grids, content = detail/table pages, narrow = settings-like card stacks,
   form = focused single-column forms. */
.shell__main { flex: 1; padding: 30px var(--shell-gutter) 72px; --shell-w-wide: 1320px; --shell-w-content: 1060px; --shell-w-narrow: 860px; --shell-w-form: 760px; }
.shell__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
/* Desktop: the floating action cluster (.shell__acts) overlays the content's
   first row from the top right — --shell-acts-clear reserves its widest
   footprint (investor balance + bell + cart) so nothing rides under it.
   .shell__head gets the clearance by construction; a page whose first row
   isn't .shell__head applies the same token itself (cf. the asset page's
   crumb row). Page-level actions never sit in the header's right slot —
   they get their own bar below the header (cf. the team pages' bar). */
@media (min-width: 981px) {
  .shell__main { --shell-acts-clear: 230px; }
  .shell__head { padding-right: var(--shell-acts-clear, 0px); }
}
.shell__title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--brand-blue); margin: 0; }
/* Lane marker under page titles (decision 2026-06-12) — the card separator's
   blue + mint dash signature, anchoring every shell page header. */
.shell__title { position: relative; padding-bottom: 11px; }
.shell__title::before, .shell__title::after { content: ""; position: absolute; bottom: 0; height: 3px; border-radius: var(--radius-pill); }
.shell__title::before { left: 0; width: 22px; background: var(--brand-blue); }
.shell__title::after { left: 26px; width: 10px; background: var(--brand-green-mint); }
.shell__sub { font-size: 14.5px; color: var(--fg-secondary); margin: 5px 0 0; }
/* Back crumb above a detail-page header (asset detail, report forms) */
.shell__crumb { display: inline-block; font-size: 14px; font-weight: 600; color: var(--fg-secondary); text-decoration: none; margin-bottom: 6px; transition: color .15s ease; }
.shell__crumb:hover { color: var(--brand-blue); }
/* Centered page footnote under a grid/table (the dashboard note recipe) */
.shell__note { font-size: 13px; color: var(--fg-muted); text-align: center; margin: 22px 0 0; }

/* ── Shell layout grammar — the page rhythm every signed-in dashboard page
   shares: KPI stat grid, chart/side duo, stacked card column, control bar,
   full-width content block. Born shared (investor + developer pages compose
   these instead of redefining per-page grids) — page CSS only sets the
   content width via the --shell-w-* tokens on .shell__main. ── */
.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 24px 0; }
/* Lead variant — first tile carries the headline metric, slightly wider */
.statgrid--lead { grid-template-columns: 1.35fr 1fr 1fr 1fr; }
.shell-duo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; margin: 24px 0; }
.shell-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.shell-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.shell-block { margin: 24px 0; }
@media (max-width: 1100px) {
  .statgrid, .statgrid--lead { grid-template-columns: repeat(2, 1fr); }
  .shell-duo { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .shell-bar { flex-direction: column; align-items: flex-start; gap: 10px; } }
@media (max-width: 560px) { .statgrid, .statgrid--lead { grid-template-columns: 1fr; gap: 10px; } }

/* Segmented status toggle (e.g. Available / Funded) */
.seg { display: flex; background: var(--bg-surface); border-radius: var(--radius-bar); padding: 5px; box-shadow: var(--shadow-property); }
.seg button { flex: 1; height: 40px; border: 0; border-radius: var(--radius-bar); background: transparent; font-family: var(--font-family); font-size: 14.5px; font-weight: 700; color: var(--fg-heading-2); cursor: pointer; transition: background .2s ease, color .2s ease; }
.seg button:not(.on):hover { background: var(--bg-subtle); }
.seg button.on { background: var(--brand-green-mint); color: var(--brand-blue); }
/* Fit variant — shrink-wraps to its labels for use inside a control bar
   (e.g. a chart metric toggle next to period chips) instead of full-width. */
.seg--fit { display: inline-flex; }
.seg--fit button { flex: 0 0 auto; padding: 0 18px; }
.seg .n { opacity: .6; font-weight: 600; margin-left: 6px; }

/* Filter bar: labelled selects + search above asset grids. Flex so views
   with fewer filters (e.g. commodities) keep a balanced row. */
.fbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin: 20px 0 22px; }
.ffield { display: flex; flex-direction: column; gap: 6px; min-width: 170px; flex: 0 1 218px; }
.ffield--grow { flex: 1 1 240px; }
.ffield > span { font-size: 13px; font-weight: 600; color: var(--fg-secondary); }
/* Controls follow the marketplace card language (borderless, fchip shadow,
   pill) — NOT the bordered login-form inputs; .input stays untouched globally. */
.selwrap { position: relative; display: flex; }
.selwrap .lead { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--fg-muted); pointer-events: none; }
.selwrap .chev { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--fg-muted); pointer-events: none; }
.sel { appearance: none; -webkit-appearance: none; width: 100%; height: var(--size-md); padding: 0 38px 0 42px; border: 0; border-radius: var(--radius-bar); background: var(--bg-surface); box-shadow: var(--shadow-control); font-family: var(--font-family); font-size: 14px; font-weight: 600; color: var(--fg-heading-2); cursor: pointer; transition: box-shadow .15s ease; }
.sel:hover { box-shadow: var(--shadow-control-hover); }
.sel:focus { outline: 0; box-shadow: var(--shadow-control), 0 0 0 4px rgba(0,0,255,.10); }
/* Custom filter select (FilterSelect, market-sections.jsx). A native <select>
   can't style its OPEN list — this is a button trigger (the .sel pill) plus a
   .csel__list popover we own. Panel = the "Linien" design (B, 2026-06-13): a
   hairline-bordered, row-divided list (flat, no tinted rows) lifted on
   --shadow-elevated. The trigger keeps .sel; .selwrap positions the lead + chev. */
.csel__btn { display: flex; align-items: center; text-align: left; }
.csel__value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel--noicon .csel__btn { padding-left: 16px; }
/* Form variant — bordered .sel--form trigger for focused forms/dialogs; drops
   into an existing .form-field (consumer keeps its <label for>). Open paints
   the brand ring (like .sel--form:focus), not the pill shadow. */
.csel--form .csel__btn { padding-left: 14px; font-weight: 400; }
.csel--form .csel__btn[aria-expanded='true'] { border-color: var(--brand-blue); box-shadow: 0 0 0 4px rgba(0,0,255,.10); }
.csel .chev { transition: transform var(--dur-fast) ease; }
.csel__btn[aria-expanded='true'] { box-shadow: var(--shadow-control-hover); }
.csel__btn[aria-expanded='true'] ~ .chev { transform: translateY(-50%) rotate(180deg); }
/* Mouse-open shouldn't paint the 4px ring; keyboard focus still does. */
.csel__btn:focus { outline: 0; box-shadow: var(--shadow-control); }
.csel__btn:focus-visible, .csel__btn[aria-expanded='true']:focus-visible { box-shadow: var(--shadow-control-hover), 0 0 0 4px rgba(0,0,255,.10); }
.csel__list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; margin: 0; padding: 0; list-style: none; max-height: 264px; overflow: hidden auto; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-elevated); animation: csel-pop var(--dur-fast) ease; }
.csel__list:focus { outline: 0; }
/* "Linien" rows (design B): full-width, divided by a hairline; selected =
   brand-blue label + bold + check (no fill), active (hover/keyboard) = subtle
   wash. 44px keeps the touch target despite the flatter look. */
.csel__opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 9px 14px; border-bottom: 1px solid var(--border-soft); font-size: 14px; font-weight: 500; color: var(--fg-body); cursor: pointer; user-select: none; }
.csel__opt:last-child { border-bottom: 0; }
.csel__opt.active { background: var(--bg-subtle); }
.csel__opt.on { color: var(--brand-blue); font-weight: 600; }
.csel__check { flex: none; width: 16px; height: 16px; color: var(--brand-blue); }
.csel__check svg { width: 100%; height: 100%; }
@keyframes csel-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .csel__list { animation: none; } .csel .chev { transition: none; } }
.fsearch { position: relative; display: flex; }
.fsearch svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--fg-muted); pointer-events: none; }
.fsearch .input { height: var(--size-md); padding-left: 42px; font-size: 14px; border: 0; border-radius: var(--radius-bar); box-shadow: var(--shadow-control); transition: box-shadow .15s ease; }
.fsearch .input:hover { box-shadow: var(--shadow-control-hover); }
.fsearch .input:focus { box-shadow: var(--shadow-control), 0 0 0 4px rgba(0,0,255,.10); }

/* Result count + clear-filters row above grids */
.results { display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px; }
.results__n { font-size: 14px; font-weight: 600; color: var(--fg-secondary); }
/* min-height + negative margin = 44px touch target without moving the row */
.results__clear { display: inline-flex; align-items: center; min-height: 44px; margin: -13px 0; border: 0; background: transparent; font-family: var(--font-family); font-size: 13.5px; font-weight: 700; color: var(--brand-blue); cursor: pointer; padding: 0; }
.results__clear:hover { text-decoration: underline; }

/* Empty state card (no results, empty lists) */
.empty { background: var(--bg-surface); border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property); padding: 52px 24px; text-align: center; }
/* The "empty pool" scene (JSX contract: EmptyState, market-sections.jsx) —
   decorative, sits above the copy in every empty state. */
.empty__scene { display: block; width: 120px; height: 64px; margin: 0 auto 14px; }
/* Inside an already-elevated card (wallet/rewards statements): no double surface */
.empty--flat { box-shadow: none; padding: 36px 24px; }
.empty h3 { font-size: 19px; font-weight: 800; color: var(--fg-heading-2); margin: 0 0 6px; }
.empty p { font-size: 14.5px; color: var(--fg-secondary); margin: 0 0 20px; }

/* Direct-channel cards — shared by Contact + Support (lifted from contact.css) */
.ch-stack { display: flex; flex-direction: column; gap: 16px; }
.ch-card { display: flex; gap: 14px; align-items: flex-start; background: var(--bg-surface); border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property); padding: 20px; transition: transform .3s, box-shadow .3s; }
.ch-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-property-hover); }
.ch-card .ring { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--info-bg); color: var(--brand-blue); }
.ch-card .ring svg { width: 19px; height: 19px; }
.ch-card h3 { font-size: 15px; font-weight: 700; color: var(--fg-heading-2); margin: 1px 0 3px; }
.ch-card p { font-size: 13.5px; color: var(--fg-secondary); line-height: 1.55; margin: 0; }
.ch-card a { color: var(--brand-blue); font-weight: 600; text-decoration: none; }
.ch-card a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .ch-card { transition: none; }
  .ch-card:hover { transform: none; }
}

@media (max-width: 980px) {
  .snav { position: fixed; left: 0; top: 0; width: 280px; transform: translateX(-100%); transition: transform .25s ease; box-shadow: 0 18px 48px rgba(0,0,0,.18); }
  .shell.nav-open .snav { transform: none; }
  .shell__bar { display: flex; }
  .shell__acts:not(.shell__acts--bar) { display: none; }
  .shell__main { padding: 20px 16px 56px; }
}
/* Small phones: the balance chip yields to logo + burger; bell + cart stay */
@media (max-width: 460px) { .shell__acts--bar .shell__bal { display: none; } }
@media (max-width: 720px) { .ffield, .ffield--grow { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .snav { transition: none; } .shell__scrim { animation: none; } .snav__chev { transition: none; } }

/* ── Settings cards (shared) — section nav, cards, rows, toggle, danger ──
   Lifted from the DS investor kit (ui_kits/investor-app/settings.css) and
   tokenized; surfaces follow the project card language (white, borderless,
   20px radius, soft depth). JSX: settings-app.jsx composes these. */
.set-grid { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; }
.set-nav { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 2px; }
/* Alpine consumers wrap each group in a <div> (x-for needs a single root
   element). Make that wrapper layout-transparent so the group label + its
   links become direct flex children of .set-nav and stack vertically — the
   React prototype used a Fragment (no wrapper), Alpine cannot. Without this
   the buttons fall back to inline flow ("Profile  Address" on one line). */
.set-nav > div { display: contents; }
/* Group label — long section rails read in themed clusters (Account /
   Access / Experience…), never one flat list. Lifted from the emails rail
   (.em-rail__t) when settings + circle settings became consumers. */
.set-nav__group { font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-muted); padding: 16px 12px 5px; }
.set-nav__group:first-child { padding-top: 2px; }
.set-nav__link { position: relative; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--fg-secondary); text-decoration: none; cursor: pointer; border: 0; background: transparent; font-family: var(--font-family); text-align: left; }
.set-nav__link:hover { background: var(--bg-hover); color: var(--fg-heading-2); }
.set-nav__link.on { background: var(--info-bg); color: var(--brand-blue); }
/* Active rail — the lane marker turned vertical: blue segment + mint dash
   on the water (info-bg), same two-tone signature as .set-card__body and
   .shell__title. */
.set-nav__link.on::before, .set-nav__link.on::after { content: ""; position: absolute; left: 0; width: 3px; border-radius: var(--radius-pill); }
.set-nav__link.on::before { top: 8px; height: 13px; background: var(--brand-blue); }
.set-nav__link.on::after { top: 24px; height: 5px; background: var(--brand-green-mint); }
.set-nav__link--danger { color: var(--danger-fg); }
.set-nav__link--danger.on { background: var(--danger-bg); color: var(--danger-fg); }
.set-nav__link--danger.on::before, .set-nav__link--danger.on::after { background: var(--danger-fg); }
.set-sections { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.set-card { background: var(--bg-surface); border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property); overflow: hidden; }
/* Canonical card header (decision 2026-06-11): title + optional sub, no
   icon tile. Title scale for every in-card heading: 16px/700/heading-2.
   Optional right-aligned action slot for card-level controls ("View all",
   a range picker) — the header earns its keep through function. */
.set-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 16px; }
.set-card__title { font-size: 16px; font-weight: 700; color: var(--fg-heading-2); }
.set-card__title--danger { color: var(--danger-fg); }
.set-card__sub { font-size: 13px; color: var(--fg-secondary); margin: 2px 0 0; }
.set-card__act { flex: none; display: flex; align-items: center; gap: 10px; }
/* Tabs slot (decision 2026-06-12): card-scoped filter/tab rows (fchips, seg)
   live in the header zone, between title/sub and the lane-marker separator —
   they steer the whole card, so they never open the body. */
.set-card__tabs { padding: 0 24px 14px; margin-top: -2px; }
/* Head ↔ body separator — "lane marker" (decision 2026-06-12): a soft solid
   hairline carries the structure, a small blue + mint two-tone dash anchored
   left is the brand signature (the pool-lane motif, cf. the leaderboard's
   lanes). Deliberately NOT dotted — dotted stays the data-row grammar
   (.kv__r, .acard__stats), so the header line reads one level above the
   rows. Sub-only cards render an empty body, which hides. */
.set-card__body { position: relative; border-top: 1px solid var(--border-soft); margin: 0 24px; padding: 14px 0 16px; }
.set-card__body::before, .set-card__body::after { content: ""; position: absolute; top: -2px; height: 3px; border-radius: var(--radius-pill); }
.set-card__body::before { left: 0; width: 22px; background: var(--brand-blue); }
.set-card__body::after { left: 26px; width: 10px; background: var(--brand-green-mint); }
.set-card__body:empty { display: none; }
.set-card__foot { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--border-soft); background: var(--bg-subtle); }
.set-card__saved { font-size: 13px; font-weight: 600; color: var(--success-fg); margin-right: auto; }

/* ── Contextual control compaction (app surfaces) ──────────────────────────
   The 40px default button already matches the DS control scale; INSIDE app
   surfaces (settings/wallet/team cards, dialogs, empty states) controls
   drop one more step — buttons to 36px, inputs/selects to --size-md (40px).
   Touch targets stay ≥44px via the ::after hit areas. Excluded on purpose:
   the big amount input (.input--amt), textareas (height: auto), and
   band/summary CTAs (.wal-hero, .osum) — those are each page's primary
   action. */
.set-card .btn, .dlg .btn, .empty .btn, .ccard .btn { height: 36px; padding: 0 16px; font-size: 14px; position: relative; }
.set-card .btn::after, .dlg .btn::after, .empty .btn::after, .ccard .btn::after { content: ''; position: absolute; inset: -4px 0; }
/* …and since 2026-06-12 the WHOLE signed-in shell runs that dense scale:
   every default-size button inside .shell drops to 36px (action cluster,
   control bars, card CTAs), not just cards/dialogs. :where() keeps the
   specificity flat so the explicit size ladder (--xl/--lg/--sm/--xs),
   .set-card__act (32px) and the band-CTA exception below still win. */
.shell :where(.btn:not(.btn--xl):not(.btn--lg):not(.btn--sm):not(.btn--xs)) { height: 36px; padding: 0 16px; font-size: 14px; position: relative; }
.shell :where(.btn:not(.btn--xl):not(.btn--lg):not(.btn--sm):not(.btn--xs))::after { content: ''; position: absolute; inset: -4px 0; }
/* Band/summary CTAs stay each page's primary action — DS default scale. */
.wal-hero .btn, .osum .btn { height: var(--size-md); padding: 0 20px; font-size: 14.5px; }
/* Header actions compact one step further (card decision 2026-06-12): a
   button cluster in the title row (.set-card__act — annual links, "new
   report"…) is card chrome, not content, so it drops to --size-sm (32px,
   13px label) and must not outweigh the title. Badges, chips and text
   links in the slot keep their own scale. */
.set-card__act .btn { height: var(--size-sm); padding: 0 12px; font-size: 13px; }
.set-card__act .btn::after { inset: -6px 0; } /* keeps the ≥44px touch target */
.set-card input.input:not(.input--amt), .dlg input.input:not(.input--amt),
.set-card .sel.sel--form, .dlg .sel.sel--form { height: var(--size-md); font-size: 14.5px; }
/* Pairings inside the compacted contexts: copy-field button matches its
   40px input; the password eye recenters in the shorter input. */
.set-card .copyfield .btn, .dlg .copyfield .btn { height: var(--size-md); }
.set-card .input-eye, .dlg .input-eye { top: 2px; }
.set-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.set-row:last-child { border-bottom: 0; }
/* Listing wizard: a hairline under every field stacks into a "ladder of lines"
   on the long property/review forms. Drop the per-row border inside the wizard —
   the cards + row spacing group fields, and the card-body accent bar still marks
   each section. Scoped to .devwiz so settings & other .set-row pages keep theirs. */
.devwiz .set-row { border-bottom: 0; padding: 10px 0; }
.set-label { flex: none; width: 170px; font-size: 14px; font-weight: 600; color: var(--fg-body); margin: 0; }
.set-label__hint { display: block; font-size: 11.5px; font-weight: 500; color: var(--fg-muted); margin-top: 2px; }
.set-row .input, .set-row .sel--form, .set-row > div, .set-row .selwrap { flex: 1; min-width: 0; }
/* Live character counter under a textarea (e.g. community bio). */
.set-charcount { display: block; margin-top: 4px; text-align: right; font-size: 11.5px; font-weight: 500; color: var(--fg-muted); }
.set-charcount--max { color: var(--danger, #D92D20); }
.set-div { border: 0; border-top: 1px solid var(--border-soft); margin: 12px 0 2px; }
.set-block__t { font-size: 14px; font-weight: 700; color: var(--fg-heading-2); margin: 12px 0 0; }
.set-block__s { font-size: 12.5px; color: var(--fg-muted); margin: 2px 0 4px; }
.set-actrow { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 8px 0 14px; }
/* Quiet secondary action link (neutral pass 2026-06-12): gray at rest —
   "View all" / "Forgot password?" never compete with primary actions —
   brand blue only on hover/focus. */
.set-forgot { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--fg-secondary); text-decoration: none; margin-top: 6px; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-family); transition: color .15s ease; }
.set-forgot:hover, .set-forgot:focus-visible { color: var(--brand-blue); text-decoration: underline; }
.set-ava { width: 52px; height: 52px; border-radius: 50%; background: var(--brand-blue); color: var(--brand-green-mint); font-weight: 800; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.set-ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.set-avatarrow { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
.set-avatarrow__acts { margin-left: auto; display: flex; gap: 8px; flex: none; }
.set-idname { font-size: 16px; font-weight: 700; color: var(--fg-heading-2); }
.set-idemail { font-size: 13px; color: var(--brand-blue); }
.set-secrow { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border-soft); }
.set-secrow:last-child { border-bottom: 0; }
.set-secrow__main { flex: 1; min-width: 0; }
.set-secrow__t { font-size: 14px; font-weight: 700; color: var(--fg-heading-2); }
.set-secrow__sub { font-size: 12.5px; color: var(--fg-muted); margin-top: 2px; }
/* Follows the neutral status-pill recipe (.badge): neutral surface, state dot */
.set-secrow__ok { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: var(--fg-heading-2); background: var(--neutral-bg); border-radius: var(--radius-pill); padding: 3px 9px; flex: none; }
.set-secrow__ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success-fg); margin-right: 6px; flex: none; }
.set-secrow__id { display: flex; align-items: center; gap: 10px; }
.set-oauth__ic { width: 26px; height: 26px; border-radius: 6px; background: var(--bg-hover); display: flex; align-items: center; justify-content: center; flex: none; }
.set-oauth__ic img { width: 15px; height: 15px; }
.set-toggle { width: 44px; height: 24px; border-radius: var(--radius-pill); background: var(--border-strong); border: 0; position: relative; flex: none; cursor: pointer; transition: background .2s; }
.set-toggle::after { content: ''; position: absolute; inset: -10px; } /* 44px+ touch target */
.set-toggle span { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-surface); box-shadow: 0 1px 2px rgba(10,13,18,.2); transition: left .2s; }
.set-toggle[aria-checked="true"] { background: var(--brand-blue); }
.set-toggle[aria-checked="true"] span { left: 22px; }
.set-danger { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; background: var(--danger-bg); border-radius: 12px; margin-bottom: 12px; }
.set-danger__t { font-size: 14px; font-weight: 700; color: var(--danger-fg); }
.set-danger__s { font-size: 12.5px; color: var(--fg-secondary); margin-top: 2px; }
.set-danger__btn { flex: none; border: 0; background: var(--danger); color: var(--bg-surface); font-family: var(--font-family); font-size: 13.5px; font-weight: 700; padding: 9px 16px; border-radius: var(--radius-pill); cursor: pointer; transition: background .15s ease; }
.set-danger__btn:hover { background: var(--danger-hover); }
.set-danger__acts { display: flex; gap: 8px; flex: none; }
/* Square avatar variant — developer/company logo tile */
.set-ava--sq, .set-ava--sq img { border-radius: var(--radius-card-lg); }
/* Small avatar variant — roster rows inside tables */
.set-ava--sm { width: 40px; height: 40px; font-size: 13px; }
/* Compact textarea (bios, short descriptions) — overrides the 150px default */
textarea.input--compact { min-height: 96px; }
/* Sub-rows under a master toggle (granular email alerts) */
/* Children of a master toggle (the email-alert kinds) keep the card's row
   rhythm — same padding and the same hairline dividers as every other row.
   They read as children only through a subtle indent (which insets their
   dividers while toggles stay aligned right) and a lighter title weight, so
   the cluster is clearly "Email alerts, with options" without the cramped,
   left-ruled look that broke the card's rhythm. */
.set-subrows .set-secrow__t { font-weight: 600; }
.set-subrows .set-secrow:last-child { border-bottom: 1px solid var(--border-soft); }
/* Link rows (info & learning) — the whole tile is the link */
.set-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 0; }
.set-linkrow { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 11px 14px; border-radius: var(--radius-card-lg); background: var(--bg-subtle); text-decoration: none; transition: background .15s ease; }
.set-linkrow:hover { background: var(--bg-hover); }
.set-linkrow:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
/* Optional leading icon ring — the contact/support channel-card ring
   recipe (.ch-card .ring), so every icon+title+sub row speaks one look. */
.set-linkrow__ring { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--info-bg); color: var(--brand-blue); }
.set-linkrow__ring svg { width: 17px; height: 17px; }
.set-linkrow__t { display: block; font-size: 13.5px; font-weight: 700; color: var(--fg-heading-2); }
.set-linkrow__s { display: block; font-size: 12px; color: var(--fg-muted); margin-top: 1px; }
.set-linkrow__chev { margin-left: auto; flex: none; width: 16px; height: 16px; color: var(--fg-muted); }
.set-linkrow__chev svg { width: 100%; height: 100%; }
/* Learn cards — curated article tiles, tag + title */
.set-learn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 6px 0 12px; }
.set-learn__card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--radius-card-lg); background: var(--bg-subtle); overflow: hidden; text-decoration: none; transition: background .15s ease; }
.set-learn__card:hover { background: var(--bg-hover); }
/* Article image — full-bleed top of the tile (cards derive from the blog).
   min-width (not width) spans the padding box: a plain percentage width
   resolves before the negative margins widen the line. */
.set-learn__img { min-width: calc(100% + 32px); margin: -14px -16px 4px; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.set-learn__card:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.set-learn__tag { align-self: flex-start; font-size: 11px; font-weight: 700; color: var(--brand-blue); background: var(--info-bg); border-radius: var(--radius-pill); padding: 2px 8px; }
.set-learn__t { font-size: 13.5px; font-weight: 700; color: var(--fg-heading-2); line-height: 1.35; }
@media (max-width: 900px) {
  .set-grid { grid-template-columns: 1fr; }
  /* Nav flattens to wrapping chips — group labels and the vertical rail
     don't fit the horizontal grammar, the chips carry it alone. */
  .set-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .set-nav__group { display: none; }
  .set-nav__link.on::before, .set-nav__link.on::after { content: none; }
}
@media (max-width: 600px) {
  .set-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .set-label { width: auto; }
  .set-links, .set-learn { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .set-toggle, .set-toggle span { transition: none; } }

/* ── Wallet (shared) — balance hero, stat cards, status badges, tx table,
   payment-method rows, dialog frame. JSX: wallet-sections.jsx (TxTable,
   StatusBadge, MethodRow, WalletDialog); wallet-app.jsx composes them.
   Born shared: portfolio and the resale market reuse table/badges/dialog. */
.wal-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: var(--bg-surface); border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property); padding: 26px 28px; }
.wal-hero__k { font-size: 13px; font-weight: 600; color: var(--fg-secondary); }
.wal-hero__sum { font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--fg-heading-2); margin: 2px 0 5px; font-variant-numeric: tabular-nums; }
.wal-hero__pend { font-size: 13.5px; color: var(--fg-muted); }
.wal-hero__pend b { color: var(--success-fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.wal-hero__acts { display: flex; gap: 10px; flex-wrap: wrap; }
.wal-stat { background: var(--bg-surface); border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property); padding: 16px 20px; }
.wal-stat .k { font-size: 12.5px; font-weight: 600; color: var(--fg-secondary); }
/* Tile numbers stay neutral dark (neutral pass 2026-06-12) — color is
   reserved for signed deltas (.pos) and state dots. */
.wal-stat .v { font-size: 22px; font-weight: 800; color: var(--fg-heading-2); margin-top: 3px; font-variant-numeric: tabular-nums; }

/* Brand hero variant — the money page's one brand moment, shared with the
   resale hero (.rs-hero). Mint money, neon accents. Modifier over
   .wal-hero. The schedule strip shows income cadence as a SCHEDULE of
   dated chips — deliberately never a chart (no trading look anywhere).
   Brand bands speak the MAIN brand blue (decision 2026-06-12: no navy
   surfaces in the app — navy stays an accent), the same gradient recipe
   as the leaderboard's deep-end panel (.lb-deep). */
.wal-hero--brand { position: relative; overflow: hidden; background: radial-gradient(130% 180% at 10% 0%, var(--brand-blue-hover), var(--brand-blue) 48%, var(--brand-blue-active)); box-shadow: 0 4px 20px rgba(0,0,255,.16); }
.wal-hero--brand > :not(.wal-rings) { position: relative; z-index: 1; }
.wal-hero--brand .wal-hero__k { color: rgba(255,255,255,.72); }
.wal-hero--brand .wal-hero__sum { color: var(--brand-green-mint); }
.wal-hero--brand .wal-hero__pend { color: rgba(255,255,255,.78); }
.wal-hero--brand .wal-hero__pend b { color: var(--brand-green-neon); }

/* Logo-derived rings (cf. .bshape) — decorative, aria-hidden, ambient ≥16s */
.wal-rings { position: absolute; inset: 0; pointer-events: none; }
.wal-rings i { position: absolute; border-radius: 50%; border: 1.5px solid rgba(152,251,150,.30); animation: walDrift 18s ease-in-out infinite alternate; }
.wal-rings i:nth-child(1) { width: 250px; height: 250px; right: -70px; top: -120px; }
.wal-rings i:nth-child(2) { width: 140px; height: 140px; right: 170px; bottom: -70px; border-color: rgba(255,255,255,.18); animation-delay: -6s; }
.wal-rings i:nth-child(3) { width: 58px; height: 58px; right: 96px; top: 26px; border-color: rgba(255,255,255,.15); animation-delay: -12s; }
@keyframes walDrift { from { transform: translateY(-6px); } to { transform: translateY(8px); } }

/* Balance privacy toggle — over-shoulder mode, a money-app staple. 36px
   visual, ::before pads the hit area to ≥44px. */
.wal-eye { position: relative; width: 36px; height: 36px; margin: -8px 0 -8px 6px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; vertical-align: middle; transition: background .15s ease; }
.wal-eye::before { content: ''; position: absolute; inset: -5px; }
.wal-eye:hover { background: rgba(255,255,255,.24); }
.wal-eye:focus-visible { outline: 2px solid var(--brand-green-mint); outline-offset: 2px; }
.wal-eye svg { width: 16px; height: 16px; }

/* Payout schedule strip — full-width row inside the hero flex wrap.
   Chips are real links into the payouts card, not decoration. */
.wal-sched { flex-basis: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px dashed rgba(152,251,150,.35); padding-top: 14px; }
.wal-sched__k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.82); margin-right: 4px; }
.wal-sched__chip { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.10); border-radius: var(--radius-pill); padding: 5px 12px; font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; text-decoration: none; transition: background .15s ease, transform .15s ease; }
a.wal-sched__chip:hover { background: rgba(255,255,255,.20); transform: translateY(-2px); }
a.wal-sched__chip:focus-visible { outline: 2px solid var(--brand-green-mint); outline-offset: 2px; }
.wal-sched__chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-green-neon); flex: none; }
.wal-sched__chip b { color: var(--brand-green-mint); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Stat tile sub-line (icon tiles removed 2026-06-12 — too playful for KPI
   numbers; the k/v/s text stack carries the tile alone) */
.wal-stat .s { font-size: 12px; color: var(--fg-muted); margin-top: 2px; }

/* Lead stat — the page's protagonist number gets the brand ring (same ring
   language as .rwd-tier.on) and a 12-month income-rhythm dot row. Dots are
   DERIVED from payout cadence — a schedule glyph, never a chart. */
.wal-stat--lead { box-shadow: 0 4px 20px rgba(0,0,255,.14), inset 0 0 0 2px var(--brand-blue); }
.wal-months { display: flex; gap: 4px; margin-top: 7px; }
.wal-months i { width: 7px; height: 7px; border-radius: 50%; background: var(--bg-hover); }
.wal-months i.on { background: var(--brand-green-mint); box-shadow: inset 0 0 0 1px var(--brand-blue); animation: walDot .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes walDot { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Stat tiles double as filters: click → the matching statement view. Same
   −lift hover as every other card on the platform. */
.wal-stat--btn { border: 0; width: 100%; text-align: left; font-family: var(--font-family); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.wal-stat--btn:hover { transform: translateY(-4px); box-shadow: var(--shadow-property-hover); }
.wal-stat--btn:focus-visible { outline: 0; box-shadow: var(--shadow-property), 0 0 0 4px rgba(0,0,255,.20); }
.wal-stat--lead.wal-stat--btn:hover { box-shadow: 0 16px 48px rgba(0,0,255,.20), inset 0 0 0 2px var(--brand-blue); }
.wal-stat--lead.wal-stat--btn:focus-visible { box-shadow: inset 0 0 0 2px var(--brand-blue), 0 0 0 4px rgba(0,0,255,.20); }
.devdash .wal-stat--lead { box-shadow: var(--shadow-property); }
.devdash .wal-stat--lead.wal-stat--btn:hover { box-shadow: var(--shadow-property-hover); }
.devdash .wal-stat--lead.wal-stat--btn:focus-visible { box-shadow: var(--shadow-property), 0 0 0 4px rgba(0,0,255,.20); }
a.wal-stat--btn { display: block; text-decoration: none; color: inherit; }

/* Date-group header — the payout schedule and the statement months share one
   language: small-caps date lead + signed group sum trailing. */
.dgroup { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 16px 0 4px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-blue); }
.dgroup > b { font-size: 12px; font-weight: 800; color: var(--success-fg); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.dgroup > b.dim { color: var(--fg-muted); }
.dgroup .d { display: inline-flex; align-items: center; gap: 6px; }
.dgroup .d i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-green-neon); box-shadow: 0 0 0 3px rgba(3,255,136,.18); }

/* Payout-plan group — one bordered panel per date (wallet upcoming payouts;
   any scheduled-income list): the dgroup header and its rows read as one
   unit instead of fragments between hairlines. The next group leads with
   the info tint; row hover inside it goes surface-white. */
.pgroup { border: 1px solid var(--border-soft); border-radius: 14px; padding: 0 14px 4px; }
.pgroup + .pgroup { margin-top: 10px; }
.pgroup .dgroup { padding: 12px 0 2px; }
.pgroup--next { background: var(--info-bg); border-color: transparent; }
.pgroup--next .rrow { border-bottom-color: rgba(0,0,255,.08); }
.pgroup--next .rrow--go:hover, .pgroup--next .rrow--go:focus-visible { background: var(--bg-surface); }

/* Payout rows are whole-row links into the asset (hover = row tint + blue title) */
a.rrow { text-decoration: none; }
.rrow--go { margin: 0 -10px; padding: 12px 10px; border-radius: 12px; transition: background .15s ease; }
.rrow--go:hover, .rrow--go:focus-visible { background: var(--bg-row-hover); outline: 0; }
.rrow--go:hover .rrow__t, .rrow--go:focus-visible .rrow__t { color: var(--brand-blue); }

/* Mini payment-card faces — methods read as money instruments, not settings
   rows. Card kind gets the brand face, chip, contactless arc and the logo
   ring watermark; bank kind a calm ledger face. Tilts on row hover. */
.pmcard { position: relative; display: block; width: 64px; height: 44px; border-radius: 9px; flex: none; overflow: hidden; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.pmrow:hover .pmcard { transform: rotate(-4deg) scale(1.06); }
.pmcard--card { background: linear-gradient(135deg, var(--brand-blue-hover), var(--brand-blue) 55%, var(--brand-blue-active)); box-shadow: 0 4px 12px rgba(0,0,255,.22); }
.pmcard--bank { background: var(--info-bg); box-shadow: inset 0 0 0 1px var(--border-soft); }
.pmcard__chip { position: absolute; left: 8px; top: 8px; width: 13px; height: 10px; border-radius: 3px; background: var(--brand-green-mint); }
.pmcard__wave { position: absolute; top: 7px; right: 7px; width: 11px; height: 11px; border: 1.6px solid rgba(152,251,150,.9); border-radius: 50%; border-left-color: transparent; border-bottom-color: transparent; transform: rotate(45deg); }
.pmcard__wave::after { content: ''; position: absolute; inset: 2.5px; border: 1.6px solid rgba(152,251,150,.5); border-radius: 50%; border-left-color: transparent; border-bottom-color: transparent; }
.pmcard__o { position: absolute; left: -9px; bottom: -11px; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(152,251,150,.40); }
.pmcard--bank .pmcard__o { border-color: rgba(0,0,255,.10); }
.pmcard__n { position: absolute; right: 8px; bottom: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.pmcard--card .pmcard__n { color: var(--brand-green-mint); }
.pmcard--bank .pmcard__n { color: var(--brand-blue); }
.pmcard--bank > svg { position: absolute; left: 8px; top: 7px; width: 16px; height: 16px; color: var(--brand-blue); }

/* Large face — live preview in the add-method flow (fills in as you type) */
.pmcard--lg { width: 148px; height: 96px; border-radius: 14px; margin: 2px auto 16px; }
.pmcard--lg .pmcard__chip { left: 14px; top: 14px; width: 24px; height: 17px; border-radius: 5px; }
.pmcard--lg .pmcard__wave { top: 13px; right: 13px; width: 17px; height: 17px; border-width: 2px; }
.pmcard--lg .pmcard__wave::after { inset: 3.5px; border-width: 2px; }
.pmcard--lg .pmcard__n { right: 13px; bottom: 11px; font-size: 14px; letter-spacing: .12em; }
.pmcard--lg .pmcard__o { width: 60px; height: 60px; left: -18px; bottom: -22px; }
.pmcard--lg > svg { left: 13px; top: 12px; width: 26px; height: 26px; }

/* Two side-by-side fields inside a dialog (expiry · CVC) */
.dlg__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Method picker — dialog control in the same instrument language (replaces
   the native select: pick by tapping the card itself) */
.mpick { display: flex; flex-direction: column; gap: 10px; }
.mpick__opt { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 0; border-radius: 14px; background: var(--bg-subtle); box-shadow: inset 0 0 0 1px var(--border-soft); cursor: pointer; font-family: var(--font-family); text-align: left; min-height: 64px; transition: box-shadow .15s ease, background .15s ease; }
.mpick__opt:hover { background: var(--bg-hover); }
.mpick__opt[aria-pressed="true"] { background: var(--info-bg); box-shadow: inset 0 0 0 2px var(--brand-blue); }
.mpick__opt:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--brand-blue), 0 0 0 4px rgba(0,0,255,.14); }
.mpick__t { display: block; font-size: 14px; font-weight: 700; color: var(--fg-heading-2); }
.mpick__s { display: block; font-size: 12.5px; color: var(--fg-muted); margin-top: 1px; }
/* Disabled "coming soon" method — dimmed, non-interactive, with a badge. */
.mpick__opt--soon, .mpick__opt--soon:hover { background: var(--bg-subtle); opacity: .6; cursor: not-allowed; box-shadow: inset 0 0 0 1px var(--border-soft); }
.mpick__soon { margin-left: auto; align-self: center; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-disabled); background: var(--bg-hover); border-radius: var(--radius-pill); padding: 3px 8px; white-space: nowrap; }

/* Big money input — the amount is the dialog's protagonist */
.input.input--amt { font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--fg-heading-2); font-variant-numeric: tabular-nums; height: 52px; }

/* Status badge — pill (tx rows, KYC, resale, settings…). Neutral pass
   (decision 2026-06-12): every state sits on the SAME quiet neutral surface
   with dark text — only the leading state dot carries the state color
   (brand grammar "state dots", echoing the avatar presence dot), so a
   table of mixed states reads calm instead of multicolored. */
.badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; border-radius: var(--radius-pill); padding: 3px 10px; white-space: nowrap; background: var(--neutral-bg); color: var(--fg-heading-2); }
/* Only true STATUS pills get the dot (badge ok/pend/fail/info + the stchip
   lifecycle); marker/points badges stay plain. Live states keep the neon. */
.badge--ok::before, .badge--pend::before, .badge--fail::before, .badge--info::before, .stchip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--neutral-fg); margin-right: 6px; flex: none; }
.badge--ok::before { background: var(--success-fg); }
.badge--pend::before { background: var(--warning-fg); }
.badge--fail::before { background: var(--danger-fg); }
.badge--info::before { background: var(--brand-blue); }
/* Status pills carry a soft state tint (surface + matching text from the same
   colour family) so completed / pending / failed read apart at a glance, not
   just by the dot. Base .badge (and marker/points badges) stay neutral grey. */
.badge--ok   { background: var(--success-bg); color: var(--success-fg); }
.badge--pend { background: var(--warning-bg); color: var(--warning-fg); }
.badge--fail { background: var(--danger-bg);  color: var(--danger-fg); }

.devsubs__note {
  max-width: 260px;
  margin-top: 6px;
  color: var(--danger-fg);
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
}
.badge--info { background: var(--info-bg);    color: var(--info-fg); }
.badge--quiet { color: var(--neutral-fg); }

/* Transaction table — horizontal scroll instead of column-dropping on phones */
.tx-scroll { overflow-x: auto; }
.tx { width: 100%; border-collapse: collapse; }
.tx th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-disabled); padding: 0 16px 9px 0; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tx td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--border-soft); font-size: 14px; color: var(--fg-secondary); vertical-align: middle; white-space: nowrap; }
.tx tr:last-child td { border-bottom: 0; }
.tx .tx-type { font-weight: 700; color: var(--fg-heading-2); }
.tx th.r, .tx td.r { text-align: right; padding-right: 0; }
.tx-asset { color: var(--brand-blue); font-weight: 600; text-decoration: none; }
.tx-asset:hover { text-decoration: underline; }
.tx-amt { font-weight: 700; color: var(--fg-heading-2); font-variant-numeric: tabular-nums; }
.tx-amt.pos { color: var(--success-fg); }
/* Typed rows: icon tile leads the type cell; income rows get the success tint.
   Status appears ONLY when it deviates (pending/failed) — inline after detail. */
.tx-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--info-bg); color: var(--brand-blue); margin-right: 10px; vertical-align: middle; flex: none; }
.tx-ic svg { width: 15px; height: 15px; }
.tx-ic--in { background: var(--success-bg); color: var(--success-fg); }
.tx td .badge { margin-left: 8px; }
.tx tbody tr:not(.tx-g) { transition: background .15s ease; }
.tx tbody tr:not(.tx-g):hover td { background: var(--bg-row-hover); }
/* Running balance — the statement column banks print; muted, derived */
.tx-bal { color: var(--fg-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
/* Month separators inside the statement (td wraps a .dgroup) */
.tx tr.tx-g td { border-bottom: 0; padding: 0; }
.tx tr.tx-g:hover td { background: transparent; }

/* Payment-method rows (icon tile + label + trailing badge/meta) */
.pmrow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.pmrow:last-child { border-bottom: 0; }
.pmrow__ic { width: 38px; height: 38px; border-radius: 10px; background: var(--info-bg); color: var(--brand-blue); display: flex; align-items: center; justify-content: center; flex: none; }
.pmrow__ic svg { width: 18px; height: 18px; }
.pmrow__main { flex: 1; min-width: 0; }
.pmrow__t { font-size: 14px; font-weight: 700; color: var(--fg-heading-2); }
.pmrow__s { font-size: 12.5px; color: var(--fg-muted); margin-top: 1px; }

/* Dialog frame — small centered flow card inside the shared .qv-overlay */
.dlg { position: relative; width: min(480px, 100%); max-height: 92vh; overflow-y: auto; background: var(--bg-surface); border-radius: 24px; box-shadow: 0 40px 100px rgba(0,0,40,.35); padding: 28px; animation: qvUp .25s cubic-bezier(.2,.8,.2,1) both; }
.dlg__title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--fg-heading-2); margin: 0 0 4px; }
.dlg__sub { font-size: 13.5px; color: var(--fg-secondary); margin: 0 0 18px; }
.dlg__foot { display: flex; gap: 10px; margin-top: 20px; }
.dlg__note { font-size: 12.5px; color: var(--fg-muted); line-height: 1.5; margin: 14px 0 0; }
.dlg__note a { color: var(--brand-blue); font-weight: 600; }
.dlg__done { text-align: center; padding: 18px 0 6px; }
.dlg__done-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--success-bg); color: var(--success-fg); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.dlg__done-ic svg { width: 24px; height: 24px; }
.amt-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* Shell balance chip doubles as the wallet link */
a.shell__bal { text-decoration: none; transition: color .15s ease; }
a.shell__bal:hover { color: var(--brand-blue); }
@media (prefers-reduced-motion: reduce) {
  .dlg { animation: none; }
  a.shell__bal, a.wal-sched__chip, .wal-eye, .wal-stat--btn, .rrow--go, .pmcard, .mpick__opt, .tx tbody tr:not(.tx-g) { transition: none; }
  .wal-rings i, .wal-months i.on { animation: none; }
  .pmrow:hover .pmcard { transform: none; }
  .wal-stat--btn:hover { transform: none; }
}

/* ── Resale market (shared) — band hero, offer cards, buy/sell dialogs, trade
   rows. JSX: resale-sections.jsx (RsHero, RsCard, BuyDialog, SellDialog,
   NumStep). RsCard composes MarketCard (market-sections) — identical chrome
   by construction; only the rcard__* extras below are resale-owned. Dialogs
   reuse the wallet .dlg frame + .dlg__done.
   Deliberately NO exchange look: no order book, charts or trading jargon —
   offers read like marketplace cards, and the only "market visual" is the
   ±valuation price band (regulatory constraint + plain language). */
.rcard--quiet .acard__media img { filter: saturate(.45); }
/* Quiet cards aren't card-level controls — only their notify button is */
.rcard--quiet { cursor: default; }
.rcard__val { font-size: 12px; color: var(--fg-muted); margin-top: 4px; }
.rcard__cta { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
/* "Coming up" cards have no shares for sale yet — an honest, non-interactive
   note (no notify-me backend exists, so no email is promised). */
.rcard__soon { margin: 0; font-size: 13px; line-height: 1.4; color: var(--fg-muted); text-align: center; padding: 8px 6px; border-top: 1px solid var(--border-subtle, rgba(0,0,0,.08)); }
/* Demand badge on notify-me cards — sits opposite the type badge (kit.css
   .acard__badge, top-left) and echoes the hero's navy + mint */
.rcard__waiters { position: absolute; top: 14px; right: 14px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; background: var(--brand-dark-blue); color: var(--brand-green-mint); backdrop-filter: blur(4px); }

/* Resale brand band — navy sibling of the wallet's blue balance band. The
   page's promise visualized: every live offer plotted as a dot inside the
   ±band around its asset's latest valuation. The viz is decorative
   (aria-hidden); the stats row carries the real numbers. */
.rs-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 36px; flex-wrap: wrap; border-radius: var(--radius-card-xl); padding: 26px 28px; background: radial-gradient(130% 180% at 10% 0%, var(--brand-blue-hover), var(--brand-blue) 48%, var(--brand-blue-active)); box-shadow: 0 4px 20px rgba(0,0,255,.16); }
.rs-hero__copy { flex: 1 1 300px; min-width: 260px; }
.rs-hero__k { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-green-neon); margin: 0 0 6px; }
.rs-hero__t { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: #fff; margin: 0 0 8px; }
.rs-hero__s { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.78); margin: 0 0 18px; max-width: 46ch; }
.rs-hero__viz { flex: 1 1 380px; min-width: 280px; }
.rs-hero__band { position: relative; height: 44px; border-radius: var(--radius-pill); background: rgba(255,255,255,.10); }
.rs-hero__mid { position: absolute; left: 50%; top: 7px; bottom: 7px; width: 2px; margin-left: -1px; border-radius: 1px; background: rgba(255,255,255,.35); }
.rs-hero__dot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--brand-green-mint); box-shadow: 0 0 12px rgba(3,255,136,.40); animation: rsBob 5s ease-in-out infinite alternate; }
/* Lanes are assigned in JSX by band position (RsHero, resale-sections):
   near-identical asks step mid → high → low so no seller hides another —
   positional nth-child lanes let same-price dots cover each other. */
.rs-hero__dot--hi { top: 30%; animation-delay: -1.7s; }
.rs-hero__dot--lo { top: 70%; animation-delay: -3.4s; }
@keyframes rsBob { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
/* Muted-on-brand floor: ≤.70 white fails 4.5:1 on --brand-blue (the bands
   were tuned on navy) — muted labels on brand bands stay ≥.80. */
.rs-hero__scale { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.82); margin-top: 8px; }
.rs-hero__scale b { color: #fff; font-weight: 700; }
.rs-hero__stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 16px; }
.rs-hero__stat .v { font-size: 20px; font-weight: 800; color: var(--brand-green-mint); font-variant-numeric: tabular-nums; line-height: 1.2; }
.rs-hero__stat .k { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.80); margin-top: 1px; }

/* Share quantity stepper (≥44px targets) */
.numstep { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 6px 0 4px; }
.numstep button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--info-bg); color: var(--brand-blue); font-family: var(--font-family); font-size: 22px; font-weight: 800; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease; }
.numstep button:hover:not(:disabled) { background: var(--brand-blue); color: var(--brand-green-mint); }
.numstep button:disabled { opacity: .35; cursor: default; }
.numstep__v { min-width: 64px; text-align: center; font-size: 26px; font-weight: 800; color: var(--fg-heading-2); font-variant-numeric: tabular-nums; }

/* Sell price: chosen price + valuation-band slider (never a free price field) */
.rs-price { text-align: center; margin: 10px 0 6px; }
.rs-price .p { font-size: 30px; font-weight: 800; color: var(--brand-blue); font-variant-numeric: tabular-nums; }
.rs-price .d { display: block; font-size: 12.5px; font-weight: 600; color: var(--fg-muted); margin-top: 2px; }
.rs-range { width: 100%; appearance: none; -webkit-appearance: none; height: 6px; border-radius: var(--radius-pill); background: var(--bg-hover); outline: 0; margin: 10px 0 0; }
.rs-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-blue); border: 4px solid var(--brand-green-mint); box-shadow: var(--shadow-card); cursor: pointer; }
.rs-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--brand-blue); border: 4px solid var(--brand-green-mint); cursor: pointer; }
.rs-range:focus-visible { box-shadow: 0 0 0 4px rgba(0,0,255,.10); }
.rs-band { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--fg-muted); margin-top: 8px; }
.rs-band b { color: var(--fg-heading-2); font-weight: 700; }

/* Holding / open-listing rows (thumb + label + trailing actions) */
.rrow { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.rrow:last-child { border-bottom: 0; }
.rrow__img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; flex: none; }
.rrow__main { flex: 1; min-width: 0; }
.rrow__t { font-size: 14.5px; font-weight: 700; color: var(--fg-heading-2); }
.rrow__s { font-size: 12.5px; color: var(--fg-muted); margin-top: 2px; }
.rrow__acts { display: flex; align-items: center; gap: 10px; flex: none; }
.rrow__cancel { min-height: 44px; border: 0; background: transparent; font-family: var(--font-family); font-size: 13.5px; font-weight: 700; color: var(--danger-fg); cursor: pointer; padding: 0 10px; border-radius: 8px; transition: background .15s ease; }
.rrow__cancel:hover { background: var(--danger-bg); }
@media (max-width: 600px) {
  .rrow { flex-wrap: wrap; }
  .rrow__acts { width: 100%; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .numstep button, .rrow__cancel { transition: none; } .rs-hero__dot { animation: none; } }

/* ── Financial lead — the headline-figure readout inside a card (asset
   financials today; any "one number that matters" card head). One .finlead
   block = caps key + big value (+ optional `em` unit) + support line; an
   optional .finlead__duo grid carries the figure's building blocks as
   .finlead__part (same grammar, smaller value). Math/derivation rows below
   reuse .kv. Companion of the .wal-stat tile: same voice, but in-card. ── */
.finlead__k { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-muted); }
.finlead__v { display: block; font-size: 30px; font-weight: 800; color: var(--brand-blue); margin-top: 4px; font-variant-numeric: tabular-nums; }
.finlead__v em { font-style: normal; font-size: 15px; font-weight: 700; color: var(--fg-muted); }
.finlead__s { display: block; font-size: 13px; color: var(--fg-secondary); margin-top: 4px; line-height: 1.5; }
.finlead__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 18px 0 6px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.finlead__duo .finlead__v { font-size: 22px; }
@media (max-width: 600px) { .finlead__duo { grid-template-columns: 1fr; gap: 14px; } }

/* ── Proportion bar — composition meter for money splits (asset financials
   raise split today; any "where does it go" readout). Segments carry their
   share as inline flex-grow; a .propdot in the row label keys the legend.
   Deliberately a meter, not a chart (regulatory: no trading look). ────── */
.propbar { display: flex; gap: 3px; height: 8px; margin: 2px 0 14px; }
.propbar i { border-radius: var(--radius-pill); min-width: 8px; }
.propbar__seg--main, .propdot--main { background: var(--brand-blue); }
.propbar__seg--alt, .propdot--alt { background: var(--brand-green-mint); }
.propbar__seg--soft, .propdot--soft { background: var(--border-strong); }
.propdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }

/* ── Rewards (shared) — meter, copy field, tier cards, redeem cards. JSX:
   form-sections.jsx (Meter, CopyField) + rewards-app.jsx composes them.
   Born shared: Meter is the generic determinate progress bar (tier progress
   today, funding/quota meters tomorrow); CopyField suits any share link. */
.meter { height: 8px; border-radius: var(--radius-pill); background: var(--info-bg); }
.meter__fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--brand-green-mint); transition: width .4s ease; }

/* ── Waterline progress (decision 2026-06-12) — every determinate bar speaks
   the leaderboard's lane language: a light "water" track (--info-bg), mint
   fill, and the neon "swimmer" dot at the water's edge (cf. .lb-lane__dot,
   .snav__ava presence). Applies to .meter + .qv__track here and
   .acard__track in kit.css; .pw-meter stays semantic (strength colors). */
.qv__track { background: var(--info-bg); overflow: visible; }
.meter__fill, .qv__fill { position: relative; }
.meter__fill::after, .qv__fill::after { content: ""; position: absolute; top: 50%; right: -4px; transform: translateY(-50%); width: 11px; height: 11px; border-radius: 50%; background: var(--brand-green-neon); box-shadow: 0 0 0 3px rgba(3,255,136,.16); }
/* Deep variant — brand-blue fill for downstream/derived stages (the rewards
   affiliate funnel keeps clicks mint, signups + qualified go deep); the neon
   swimmer keeps marking the water's edge. */
.meter--deep .meter__fill { background: var(--brand-blue); }

/* ── Scroll depth gauge — the waterline lane turned vertical: a fixed gauge
   at the right edge fills like a pool while the page is scrolled (the mint
   level rises from the floor, the neon swimmer rides the surface; all mint =
   you reached the bottom). Deep-water variant of the lane: brand-blue track,
   because the gauge floats over white page surfaces where the --info-bg
   water would vanish. Decorative chrome (aria-hidden, no pointer), desktop
   only, self-hides while the page has nothing to scroll. ScrollGauge
   (market-sections.jsx) drives --depth (0–1) from the scroll position. */
.scrollgauge { position: fixed; top: 50%; right: 18px; z-index: 60; width: 6px; height: clamp(180px, 44vh, 400px); transform: translateY(-50%); border-radius: var(--radius-pill); background: var(--brand-blue); pointer-events: none; }
.scrollgauge__fill { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--depth, 0) * 100%); border-radius: var(--radius-pill); background: var(--brand-green-mint); transition: height .25s ease-out; }
.scrollgauge__fill::after { content: ""; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 11px; height: 11px; border-radius: 50%; background: var(--brand-green-neon); box-shadow: 0 0 0 3px rgba(3,255,136,.16); }
@media (max-width: 1100px) { .scrollgauge { display: none; } }
@media (prefers-reduced-motion: reduce) { .scrollgauge__fill { transition: none; } }

/* Read-only value + copy button (referral links, share URLs) */
.copyfield { display: flex; gap: 10px; }
.copyfield .input { flex: 1; min-width: 0; color: var(--fg-secondary); }

/* Points badge — blue sibling of the status badges (point values, "your tier") */
.badge--pts { background: var(--info-bg); color: var(--brand-blue); }

/* Tier cards — every card encodes its state: reached (mint check), current
   (brand ring + badge), locked (muted checks + derived "to go" hint).
   The drop chip escalates in brand intensity with the tier INDEX across the
   7-step ladder (neutral → info tints → mint → blue-on-mint → navy/neon) so
   progression reads at a glance without medal/prize iconography
   (regulatory). Cards ride the page's snap rail (rewards.css). */
.rwd-tier { background: var(--bg-surface); border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property); padding: 20px 24px; height: 100%; }
.rwd-tier.on { box-shadow: 0 4px 20px rgba(0,0,255,.14), inset 0 0 0 2px var(--brand-blue); }
.rwd-tier.done .rwd-tier__perks svg { color: var(--success-fg); }
.rwd-tier.lock .rwd-tier__name { color: var(--fg-secondary); }
.rwd-tier.lock .rwd-tier__perks svg { color: var(--fg-disabled); }
.rwd-tier__go { color: var(--brand-blue); font-weight: 700; }
.rwd-tier__ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; background: var(--bg-hover); color: var(--fg-secondary); }
.rwd-tier__ic svg { width: 17px; height: 17px; }
.rwd-tier__ic--2 { background: var(--info-bg); color: var(--brand-dark-blue); }
.rwd-tier__ic--3 { background: var(--info-bg); color: var(--brand-blue); }
.rwd-tier__ic--4 { background: var(--brand-green-mint); color: var(--brand-blue); }
.rwd-tier__ic--5 { background: var(--brand-blue); color: var(--brand-green-mint); }
.rwd-tier__ic--6 { background: var(--brand-blue-active); color: var(--brand-green-neon); }
.rwd-tier__ic--7 { background: var(--brand-dark-blue); color: var(--brand-green-neon); }
.rwd-tier__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rwd-tier__name { font-size: 17px; font-weight: 800; color: var(--fg-heading-2); margin: 0; }
.rwd-tier__at { font-size: 12.5px; font-weight: 600; color: var(--fg-secondary); margin: 2px 0 10px; }
.rwd-tier__plus { font-size: 11.5px; font-weight: 600; color: var(--fg-muted); margin: 0 0 8px; }
.rwd-tier__perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rwd-tier__perks li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--fg-body); }
.rwd-tier__perks svg { width: 16px; height: 16px; color: var(--brand-blue); flex: none; margin-top: 2px; }

/* Tier progress strip — full-width row inside the .wal-hero flex wrap
   (the leaderboard's gap-to-next; the rewards hero uses .rwd-track below) */
.rwd-progress { flex-basis: 100%; }
.rwd-progress__row { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--fg-secondary); margin-bottom: 6px; }
.rwd-progress__hint { font-size: 13px; color: var(--fg-muted); margin: 8px 0 0; }

/* Rewards hero — navy band in the signed-in band family (wallet = electric
   blue, resale = navy, rewards = navy with the tier track as its identity).
   Same gradient recipe as .rs-hero so the dark surfaces read as one system;
   mint/neon carry the accents exactly like the other bands. The dot
   constellation stands for points themselves — decorative, aria-hidden,
   ambient walDrift ≥16s, stilled under reduced motion below. */
.wal-hero--tier { position: relative; overflow: hidden; background: radial-gradient(130% 180% at 10% 0%, var(--brand-blue-hover), var(--brand-blue) 48%, var(--brand-blue-active)); box-shadow: 0 4px 20px rgba(0,0,255,.16); }
.wal-hero--tier > :not(.rwd-dots) { position: relative; z-index: 1; }
.wal-hero--tier .wal-hero__k { color: rgba(255,255,255,.72); }
.wal-hero--tier .wal-hero__sum { color: var(--brand-green-mint); }
.wal-hero--tier .wal-hero__pend { color: rgba(255,255,255,.78); }
.wal-hero--tier .wal-hero__pend b { color: var(--brand-green-neon); }
.rwd-dots { position: absolute; inset: 0; pointer-events: none; }
.rwd-dots i { position: absolute; border-radius: 50%; background: rgba(3,255,136,.5); animation: walDrift 18s ease-in-out infinite alternate; }
.rwd-dots i:nth-child(1) { width: 11px; height: 11px; right: 64px; top: 28px; }
.rwd-dots i:nth-child(2) { width: 7px; height: 7px; right: 132px; top: 64px; background: rgba(152,251,150,.4); animation-delay: -6s; }
.rwd-dots i:nth-child(3) { width: 18px; height: 18px; right: 36px; top: 86px; background: rgba(152,251,150,.22); animation-delay: -11s; }
.rwd-dots i:nth-child(4) { width: 8px; height: 8px; right: 210px; top: 30px; background: rgba(255,255,255,.3); animation-delay: -3s; }
.rwd-dots i:nth-child(5) { width: 6px; height: 6px; right: 168px; top: 16px; background: rgba(255,255,255,.22); animation-delay: -14s; }

/* Tier track — lifetime points drawn as ONE path through every tier rather
   than a generic from-to meter: a stop per tier threshold, mint→neon fill
   ∝ lifetime points (the band's accent colors, like the wallet's money).
   The bar carries the progressbar semantics; stops and labels are
   decorative (the hint line restates everything as text). */
.rwd-track { flex-basis: 100%; padding-top: 4px; }
.rwd-track__bar { position: relative; height: 8px; border-radius: var(--radius-bar); background: rgba(255,255,255,.16); }
.rwd-track__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-bar); background: linear-gradient(90deg, var(--brand-green-mint), var(--brand-green-neon)); transition: width .5s var(--ease-out); }
.rwd-track__stop { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--brand-dark-blue); border: 2px solid rgba(255,255,255,.45); }
.rwd-track__stop.done { background: var(--brand-green-neon); border-color: transparent; box-shadow: 0 0 0 4px rgba(3,255,136,.16); }
.rwd-track__labels { position: relative; height: 36px; margin-top: 10px; }
.rwd-track__lab { position: absolute; transform: translateX(-50%); text-align: center; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.82); white-space: nowrap; }
.rwd-track__lab b { display: block; font-size: 12.5px; font-weight: 800; color: rgba(255,255,255,.85); }
.rwd-track__lab.on b { color: var(--brand-green-mint); }
.rwd-track__lab:first-child { transform: none; text-align: left; }
.rwd-track__lab:last-child { transform: translateX(-100%); text-align: right; }
.rwd-track__hint { font-size: 13px; color: rgba(255,255,255,.80); margin: 0; }
/* 7 labels collide on small screens — keep the anchors (first, last) and
   the user's tier; every stop stays visible, the hint restates the rest */
@media (max-width: 760px) {
  .rwd-track__lab { display: none; }
  .rwd-track__lab:first-child, .rwd-track__lab:last-child, .rwd-track__lab.on { display: block; }
}

/* Ways-to-earn rows — icon-chipped action list where the POINT VALUE is the
   visual anchor (bold blue, rrow-scale type) so the hierarchy between a
   +500 referral and the 1/$10 baseline is legible without reading */
.rwd-earn { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.rwd-earn:last-child { border-bottom: 0; padding-bottom: 4px; }
.rwd-earn__ic { width: 40px; height: 40px; border-radius: 11px; background: var(--info-bg); color: var(--brand-blue); display: flex; align-items: center; justify-content: center; flex: none; }
.rwd-earn__ic svg { width: 19px; height: 19px; }
.rwd-earn__main { flex: 1; min-width: 0; }
.rwd-earn__t { display: block; font-size: 14.5px; font-weight: 700; color: var(--fg-heading-2); }
.rwd-earn__s { display: block; font-size: 12.5px; color: var(--fg-muted); margin-top: 2px; }
.rwd-earn__pts { flex: none; font-size: 15px; font-weight: 800; color: var(--brand-blue); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Referral pair — "you both get the bonus" as a picture: two avatars joined
   by a dashed line, the bonus under each side. Decorative (aria-hidden);
   the card copy carries the same fact as text. */
.rwd-ref { display: flex; align-items: flex-start; justify-content: center; margin: 2px 0 18px; }
.rwd-ref__p { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.rwd-ref__ava { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; letter-spacing: .02em; background: var(--brand-blue); color: var(--brand-green-mint); }
.rwd-ref__p--friend .rwd-ref__ava { background: var(--brand-green-mint); color: var(--brand-blue); }
.rwd-ref__pts { font-size: 12.5px; font-weight: 800; color: var(--brand-blue); font-variant-numeric: tabular-nums; }
.rwd-ref__line { flex: 0 1 110px; min-width: 56px; border-top: 2px dashed var(--border-strong); margin: 27px 12px 0; position: relative; }
.rwd-ref__line svg { position: absolute; left: 50%; top: 0; transform: translate(-50%, -58%); width: 17px; height: 17px; color: var(--brand-blue); background: var(--bg-surface); padding: 0 3px; }

/* Redeem perk card — card language (borderless, shadow depth), icon-chipped
   like the stat tiles; perks out of reach show a mini meter toward their
   cost instead of a dead button. No hover lift: the card itself isn't
   clickable, the Redeem button is the only affordance. */
.rwd-redeem { background: var(--bg-surface); border-radius: var(--radius-card-lg); padding: 18px 20px; display: flex; flex-direction: column; box-shadow: var(--shadow-property); }
.rwd-redeem__ic { width: 40px; height: 40px; border-radius: 11px; background: var(--info-bg); color: var(--brand-blue); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.rwd-redeem__ic svg { width: 19px; height: 19px; }
.rwd-redeem__t { font-size: 14.5px; font-weight: 700; color: var(--fg-heading-2); margin: 0; }
.rwd-redeem__s { font-size: 13px; color: var(--fg-secondary); margin: 3px 0 12px; flex: 1; }
.rwd-redeem__meter { margin: 0 0 10px; }
.rwd-redeem__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rwd-redeem__cost { font-size: 13.5px; font-weight: 800; color: var(--brand-blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rwd-redeem__need { font-size: 12.5px; font-weight: 600; color: var(--fg-muted); text-align: right; }
@media (prefers-reduced-motion: reduce) { .meter__fill { transition: none; } .rwd-dots i { animation: none; } .rwd-track__fill { transition: none; } }

/* ── Light chart cards (in-app charts: portfolio value, allocation) ─────────
   Card-language counterpart to the dark calculator charts in calc-section. */
.chartcard { background: var(--bg-surface); border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property); padding: 20px 24px 16px; }
.chartcard__t { font-size: 16px; font-weight: 700; color: var(--fg-heading-2); margin: 0 0 12px; }
.chartcard__note { color: var(--fg-muted); font-weight: 600; }
/* Head row: headline figures left, an optional in-card control (range
   fchips on the portfolio value card) top-right; wraps on narrow cards. */
.chartcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lchart { position: relative; }
.lchart svg { width: 100%; height: 150px; display: block; }
.lchart__x { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; color: var(--fg-muted); margin-top: 6px; }
/* Hover readout (PfValueCard) — value pill above the probed month; purely
   visual, the figures live in the headline + holdings table. */
.lchart__tip { position: absolute; transform: translate(-50%, calc(-100% - 10px)); background: var(--bg-surface); border-radius: 10px; box-shadow: var(--shadow-elevated); padding: 7px 11px; pointer-events: none; white-space: nowrap; z-index: 2; }
.lchart__tip b { display: block; font-size: 13px; font-weight: 800; color: var(--fg-heading-2); font-variant-numeric: tabular-nums; }
.lchart__tip span { display: block; font-size: 11px; font-weight: 600; color: var(--fg-muted); margin-top: 1px; }

/* ── Pool charts (decision 2026-06-12) — charts speak the water grammar:
   the area under a line is WATER (--info-bg, never mint), the line draws
   itself in, the neon "now" dot (.lchart__now) pops last — same "current
   position = neon" rule as the waterline bars and the lane dot. The dotted
   baseline is the data-row grammar. One-shot on mount; fully disabled
   under prefers-reduced-motion. */
.lchart path { animation: chartFade .8s ease .55s both; }
.lchart polyline, .lchart path.lchart__line { animation: chartDraw 1.2s cubic-bezier(.4,0,.2,1) .15s both; }
.lchart .lchart__now { opacity: 0; transform-origin: center; transform-box: fill-box; animation: chartPop .45s cubic-bezier(.2,.8,.3,1.3) 1.2s forwards; }
/* The now-dot breathes once it has popped — a slow ring that swims outward
   (3.8s micro-loop budget); decorative, gone under reduced motion. */
.lchart__pulse { opacity: 0; transform-origin: center; transform-box: fill-box; animation: lchartPulse 3.8s ease-out 2.4s infinite; }
@keyframes lchartPulse { 0% { opacity: .4; transform: scale(.55); } 60% { opacity: 0; transform: scale(1.9); } 100% { opacity: 0; transform: scale(1.9); } }
/* The draw-in is a clip-path wipe, not a dash trick: with pathLength +
   non-scaling-stroke inside a preserveAspectRatio="none" svg, Chromium
   measures the dash in user units but walks the longer screen-space path,
   so a dash draw cuts the line at ~user/screen length once the svg renders
   wider than its viewBox. The inset rect lives in the line's own fill-box,
   so it stretches with the geometry at any ratio; the 8px overshoot keeps
   stroke caps at the extremes unclipped. */
@keyframes chartDraw { from { clip-path: inset(-8px calc(100% + 8px) -8px -8px); } to { clip-path: inset(-8px); } }
@keyframes chartFade { from { opacity: 0; } }
@keyframes chartPop { 0% { opacity: 0; transform: scale(.2); } 70% { opacity: 1; transform: scale(1.3); } 100% { opacity: 1; transform: scale(1); } }

/* Bar chart — "every month is a pool": each column cell carries its value
   label, a water track that fills to the value and its month label exactly
   beneath — one flex rhythm across the full card, no scatter. The newest
   month wears the neon WATERLINE on its fill surface (current = neon, no
   floating dot) and its month label reads blue. Hovering a column lifts
   its figures while the other pools calm down. Months reuse .lchart__x
   (centered per column via .bchart__x), the baseline the dotted data
   grammar. JSX contract: BarCard (portfolio-sections.jsx). */
.bchart__bars { display: flex; align-items: stretch; gap: 10px; height: 168px; padding-bottom: 3px; border-bottom: 1.5px dotted var(--border-strong); }
.bchart__col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.bchart__v { font-size: 11.5px; font-weight: 700; color: var(--fg-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; transition: color .15s ease; }
.bchart__col--zero .bchart__v { color: var(--fg-muted); font-weight: 600; }
.bchart__track { flex: 1; width: 100%; max-width: 46px; border-radius: 10px; background: var(--info-bg); display: flex; align-items: flex-end; overflow: hidden; }
.bchart__fill { display: block; width: 100%; border-radius: 6px 6px 0 0; background: var(--brand-green-mint); position: relative; transform-origin: bottom; animation: bchartRise .7s cubic-bezier(.2,.8,.2,1) both; transition: opacity .18s ease; }
.bchart__col--now .bchart__fill::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brand-green-neon); opacity: 0; animation: bchartLine .4s ease 1.05s forwards; }
.bchart__bars:hover .bchart__fill { opacity: .45; }
.bchart__bars .bchart__col:hover .bchart__fill { opacity: 1; }
.bchart__col:hover .bchart__v { color: var(--brand-blue); }
.bchart__x { margin-top: 6px; }
.bchart__x span { flex: 1; text-align: center; }
.bchart__x .on { color: var(--brand-blue); font-weight: 700; }
@keyframes bchartRise { from { transform: scaleY(0); } }
@keyframes bchartLine { to { opacity: 1; } }
/* Inside a scroll-reveal the chart waits for its card: paused (incl. the
   delay) until the wrapper gets .in, so the line never draws while the
   card itself is still fading up. Charts outside a Reveal play on mount. */
.reveal:not(.in) .lchart path, .reveal:not(.in) .lchart polyline, .reveal:not(.in) .lchart .lchart__now,
.reveal:not(.in) .bchart__fill, .reveal:not(.in) .bchart__col--now .bchart__fill::after,
.reveal:not(.in) .cf-line, .reveal:not(.in) .cf-now { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .lchart path, .lchart polyline, .lchart .lchart__now, .bchart__fill, .bchart__col--now .bchart__fill::after { animation: none; opacity: 1; }
  .lchart__pulse { animation: none; opacity: 0; }
}
.donutrow { display: flex; align-items: center; gap: 20px; }
.donutrow > svg { width: 124px; height: 124px; flex: none; }
.donutrow .kv { flex: 1; min-width: 0; }
/* The donut eats a fixed 124px, so the value column is the first thing to run
   out of room when the card is squeezed (narrow two-column, drag-reorder, or a
   funded portfolio with long figures). The base .kv__r .v is nowrap, which then
   spills the amount past the card edge. Here — and only inside the donut — let
   the value drop below its label and, as a last resort, break its own text, so
   figures stay inside the card at any width instead of overflowing. */
.donutrow .kv__r { flex-wrap: wrap; row-gap: 2px; }
.donutrow .kv__r .v { margin-left: auto; white-space: normal; text-align: right; overflow-wrap: anywhere; }
.ldot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; flex: none; }
/* Value-card head above an lchart (JSX: PfValueCard, portfolio-sections.jsx) */
.pfv { margin-bottom: 10px; }
.pfv__k { font-size: 12.5px; font-weight: 600; color: var(--fg-secondary); }
.pfv__v { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--fg-heading-2); font-variant-numeric: tabular-nums; margin: 2px 0; }
.pfv__d { font-size: 13px; font-weight: 600; color: var(--success-fg); }
.pfv__d .mut { color: var(--fg-muted); font-weight: 500; }
.pfv__fx { font-size: 12px; color: var(--fg-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ── Status chip — position lifecycle (active / funding) plus the
   developer pipeline states (draft / review / changes; live maps to
   --active). JSX mapping: SubChip in dev-sections.jsx. ── */
/* Same neutral surface as .badge — the dot alone tells the state apart */
.stchip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; border-radius: var(--radius-pill); padding: 4px 11px; white-space: nowrap; background: var(--neutral-bg); color: var(--fg-heading-2); }
.stchip--active::before { background: var(--brand-green-neon); }
.stchip--funding::before { background: var(--brand-blue); }
.stchip--draft::before { background: var(--neutral-fg); }
.stchip--review::before { background: var(--brand-blue); }
.stchip--changes::before { background: var(--warning-fg); }

/* ── Holdings/positions table — DS table language (fg-cell, soft rules,
   row hover) inside a card surface. Shared with resale/portfolio views. ── */
.htable-wrap { background-color: var(--bg-surface); border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property); overflow-x: auto; }
/* Scroll hint — scrolling shadows: edge shadows appear only when columns are
   cut off in that direction (the surface-colored covers scroll WITH the
   content and hide them at the ends; shadow alpha follows the L3 shadow
   grammar, cf. .shell__act). */
.htable-wrap {
  background-image:
    linear-gradient(90deg, var(--bg-surface) 35%, transparent),
    linear-gradient(270deg, var(--bg-surface) 35%, transparent),
    radial-gradient(farthest-side at 0 50%, rgba(10,13,18,.16), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(10,13,18,.16), transparent);
  background-position: left center, right center, left center, right center;
  background-size: 48px 100%, 48px 100%, 14px 100%, 14px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.htable { width: 100%; border-collapse: collapse; min-width: 720px; }
/* Wide modifier — tables with 7+ columns (developer assets) keep readable
   cells; the wrap scrolls horizontally on narrow screens as usual. */
.htable--wide { min-width: 880px; }
/* Fit modifier — small tables inside duo-column cards (≤4 columns: document
   register, cap table, order counts) shrink to their card instead of
   forcing the 720px scroll floor. */
.htable--fit { min-width: 0; }

/* Show-more foot — paging for unbounded tables (statement, ops logs,
   referral activity, points history). Lives BELOW the scroll wrap so it
   never scrolls with the columns; hidden by the JSX while rows fit. */
.more-foot { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 0 14px; }
/* Round, borderless, slightly elevated pill (chosen show-more variant). */
.more-foot__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 26px; border: 0; background: var(--bg-surface); border-radius: 999px; font-family: var(--font-family); font-size: 14.5px; font-weight: 600; color: var(--fg-heading-2); cursor: pointer; box-shadow: 0 4px 18px rgba(10, 13, 18, 0.12); transition: box-shadow .18s ease, transform .18s ease; }
.more-foot__btn:hover { box-shadow: 0 8px 26px rgba(10, 13, 18, 0.16); transform: translateY(-1px); }
.more-foot__n { font-size: 13px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }

/* One-time-code entry + 2FA setup (CodeInput/StepUpDialog/TwoFaSetupDialog
   in form-sections; used by the login challenge, settings and wallet) */
.codeinput { display: flex; gap: 8px; justify-content: center; }
.codeinput .input { width: 46px; height: 54px; padding: 0; text-align: center; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tfa-qr { display: block; width: 168px; height: 168px; margin: 0 auto 12px; padding: 12px; border-radius: 12px; background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-soft); color: var(--fg-heading-2); }
.tfa-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; margin: 4px 0 14px; }
.tfa-codes code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; font-weight: 600; color: var(--fg-heading-2); background: var(--bg-subtle); border-radius: 8px; padding: 9px 12px; text-align: center; }

.htable th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-muted-2); padding: 14px 18px 12px; border-bottom: 1px solid var(--border-soft); }
.htable td { padding: 13px 18px; border-bottom: 1px solid var(--border-soft); font-size: 14px; color: var(--fg-cell); vertical-align: middle; }
.htable tbody tr:last-child td { border-bottom: 0; }
.htable tbody tr { cursor: pointer; transition: background .15s ease; }
.htable tbody tr:hover, .htable tbody tr:focus-visible { background: var(--bg-row-hover); outline: 0; }
/* Numeric columns read right-aligned (th + td share the class); date/month
   label cells use .date — same figures, left-aligned. */
.htable .num { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.htable .date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.htable .num b, .htable .date b { color: var(--fg-heading-2); font-weight: 700; }
.htable .pos { color: var(--success-fg); font-weight: 700; }
.htable .neg { color: var(--danger-fg); font-weight: 700; }
.htable .who { display: flex; align-items: center; gap: 12px; }
/* Long production names must not stack the row: titles clamp to two lines
   (the row links to the detail page, nothing is lost) */
.htable .who > span:last-child { min-width: 0; }
.htable .who b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Stacked variant (opt-in .htable--stack) — below 640px each row reads as a
   stacked card instead of scrolling horizontally: the header row hides and
   every cell carries its column label via data-label. The portfolio
   holdings table is the first consumer. */
@media (max-width: 640px) {
  .htable--stack { min-width: 0; }
  .htable--stack thead { display: none; }
  .htable--stack tbody tr { display: block; padding: 4px 0 10px; }
  .htable--stack tbody tr + tr { border-top: 1px solid var(--border-soft); }
  .htable--stack td { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 0; padding: 5px 18px; }
  .htable--stack td:first-child { display: block; padding: 12px 18px 7px; }
  .htable--stack td[data-label]::before { content: attr(data-label); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-muted-2); }
  .htable--stack .chev { display: none; }
}
.htable .who img { width: 54px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; }
/* Image placeholder — POOOL brand mark on a brand-blue tile, used both for
   missing images and as the broken-image fallback (see img-fallback handler in
   dev.view.js / asset.js). poool-icon.svg is blue-on-mint, so `contain`
   letterboxes seamlessly into the blue tile. !important beats the per-context
   `object-fit: cover` (e.g. .htable .who img, asset cards). */
img.who__ph { object-fit: contain !important; background: var(--brand-blue); }
.htable .who b { display: block; font-size: 14.5px; font-weight: 700; color: var(--fg-heading-2); }
.htable .who i { display: block; font-style: normal; font-size: 12.5px; color: var(--fg-muted); margin-top: 1px; }
.htable .chev svg { width: 16px; height: 16px; color: var(--fg-muted); }
/* Action clusters — several inline actions (copy link, email, approve…)
   keep a readable gap; nowrap so a table cell never stacks the buttons.
   Shared by table action cells and row-card trailing actions. */
.rowacts { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; }
/* Icon actions in table cells (decision 2026-06-12: no blue text links in
   table cells — .iconbtn--sq icons instead) sit closer together */
.rowacts .iconbtn--sq + .iconbtn--sq { margin-left: -6px; }
/* Row-action icons (copy link, email, …) read as muted utility controls, not
   primary blue actions — gray by default, darkening on hover/focus. Each keeps
   its native `title` for an unclipped hover label (a CSS tooltip would be cut
   off by .htable-wrap's overflow-x scroll container). */
.rowacts .iconbtn--sq,
.htable .iconbtn--sq { color: var(--fg-muted); }
.rowacts .iconbtn--sq:hover, .rowacts .iconbtn--sq:focus-visible,
.htable .iconbtn--sq:hover, .htable .iconbtn--sq:focus-visible { color: var(--fg-body); }
/* Application decisions (approve ✓ / decline ✕) — neutral gray at rest like
   every row action, but hint affirmative/destructive intent on hover/focus
   since these are decisions, not neutral utilities (copy/mail). */
.rowacts .iconbtn--sq.dt-app__ok:hover, .rowacts .iconbtn--sq.dt-app__ok:focus-visible { color: var(--success-fg); }
.rowacts .iconbtn--sq.dt-app__no:hover, .rowacts .iconbtn--sq.dt-app__no:focus-visible { color: var(--danger-fg); }
/* Static variant — read-only tables keep the type/rules but drop the
   clickable-row affordance (cursor + hover/focus highlight). */
.htable--static tbody tr { cursor: default; }
.htable--static tbody tr:hover, .htable--static tbody tr:focus-visible { background: transparent; }
/* Flat variant of the wrap — a table embedded inside a SetCard keeps the
   horizontal scroll but drops the card elevation (no card-in-card). */
/* Flat = embedded in a SetCard: no own card chrome (a card inside a card
   reads as a mistake). background-color only — the scroll-hint layers
   survive (their surface-colored covers are invisible on the card). */
.htable-wrap--flat { background-color: transparent; border-radius: 0; box-shadow: none; }

/* KPI tiles: positive money values (extends .wal-stat) */
.wal-stat .v.pos { color: var(--success-fg); }

/* Registered passkeys — one chip per credential under the Passkey row, each
   with its own Remove. Sits inside .set-secrow__main below the description. */
.set-passkeys { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.set-passkey { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-subtle); }
.set-passkey__name { font-size: 13.5px; font-weight: 600; color: var(--fg-body); }
.set-passkey__rm { border: 0; background: transparent; font-family: var(--font-family); font-size: 13px; font-weight: 700; color: var(--danger-fg); cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.set-passkey__rm:hover { background: var(--danger-bg); }
.set-passkey__rm:disabled { opacity: .5; cursor: default; }

/* Affiliate-team area — commission/volume figures read neutral-dark like every
   other KPI tile, NOT green. Extends the "neutral pass" rule (green is reserved
   for wallet/portfolio signed deltas, not a developer's commission figures).
   Scoped to .devteam so the global positive-money green stays everywhere else;
   each selector adds .devteam over its global counterpart to win on specificity.
   font-weight from .htable .pos is preserved (only the color is overridden). */
.devteam .wal-stat .v.pos,
.devteam .htable .pos,
.devteam .kv__r .v.pos,
.devteam .cline__stat .v.pos { color: var(--fg-heading-2); }

/* ── Commerce — cart/checkout/success (JSX contract: checkout-sections.jsx) ──
   Cart line, order summary (.kv rows inside), payment picker, focused
   checkout topbar, trust strip, diversify suggestions, success scene. */

/* Focused checkout chrome — deliberately NOT the AppShell: no sidebar, no
   marketplace nav. Logo + back + lock badge + user chip only. */
.ckbar { display: flex; align-items: center; gap: 18px; max-width: 1120px; margin: 0 auto; padding: 18px clamp(16px, 4vw, 32px); }
.ckbar__logo img { height: 30px; display: block; }
.ckbar__back { font-size: 13.5px; font-weight: 600; color: var(--fg-secondary); text-decoration: none; transition: color .15s ease; }
.ckbar__back:hover { color: var(--brand-blue); }
.ckbar__spacer { flex: 1; }
.ckbar__lock { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--success-fg); background: var(--success-bg); border-radius: var(--radius-pill); padding: 6px 12px; white-space: nowrap; }
.ckbar__lock svg { width: 14px; height: 14px; }
.ckbar__user { width: 38px; height: 38px; border-radius: 50%; background: var(--brand-blue); color: var(--brand-green-mint); font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
@media (max-width: 560px) { .ckbar__lock span { display: none; } .ckbar__lock { padding: 8px; } }

/* Cart line — one parked asset, live-platform information parity: photo,
   title + remove, location, fact chips, labeled price/yield stats, typed
   stepper + line total, full-width funding track underneath */
.cline { display: grid; grid-template-columns: 110px 1fr; gap: 4px 16px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--border-soft); }
.cline:last-child { border-bottom: 0; }
.cline__img { grid-row: 1 / 5; width: 110px; height: 92px; border-radius: 14px; object-fit: cover; display: block; background: var(--bg-hover); }
/* Broken/missing cover: @error strips the src, leaving a neutral tile (no broken-image glyph). */
.cline__img--ph { background: var(--bg-hover); }
/* Parked-asset notice (e.g. an item sold out while browsing). */
.osum__notice { font-size: 13px; color: var(--fg-secondary); background: var(--info-bg); border-radius: 10px; padding: 9px 12px; margin: 2px 0 14px; }
.cline__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cline__title { font-size: 15.5px; font-weight: 700; color: var(--fg-heading-2); text-decoration: none; transition: color .15s ease; }
.cline__title:hover { color: var(--brand-blue); }
.cline__rm { position: relative; border: 0; background: none; width: 32px; height: 32px; margin: -6px -6px 0 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--fg-muted); cursor: pointer; flex: none; transition: color .15s ease, background .15s ease; }
.cline__rm::after { content: ''; position: absolute; inset: -6px; } /* 44px touch target */
.cline__rm:hover { color: var(--danger-fg); background: var(--danger-bg); }
.cline__rm svg { width: 16px; height: 16px; }
.cline__loc { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--fg-muted); }
.cline__loc svg { width: 13px; height: 13px; flex: none; }
.cline__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.cline__chips span { font-size: 11.5px; font-weight: 600; color: var(--fg-secondary); background: var(--bg-hover); border-radius: var(--radius-pill); padding: 3px 10px; white-space: nowrap; }
.cline__row { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.cline__stat .k { font-size: 11px; font-weight: 600; color: var(--fg-muted); }
.cline__stat .v { font-size: 15px; font-weight: 800; color: var(--fg-heading-2); margin-top: 1px; font-variant-numeric: tabular-nums; }
.cline__stat .v.pos { color: var(--success-fg); }
/* Cart line controls: the stepper + line total ride together as a right-aligned
   group — margin-left:auto on the stepper pushes the pair to the right edge, so
   the row reads "share price · net yield …… [stepper] total". The bare input is
   narrower here than the standalone stepper (88px) so the total never wraps onto
   its own line in the ~410px content column. */
.cline__row .numstep { margin: 0 0 0 auto; gap: 8px; }
.cline__row .numstep button { position: relative; width: 36px; height: 36px; font-size: 18px; }
.cline__row .numstep button::after { content: ''; position: absolute; inset: -4px; } /* 44px+ touch target */
.cline__row .numstep--bare .numstep__in { width: 56px; }
.cline__total { font-size: 17px; font-weight: 800; color: var(--fg-heading-2); font-variant-numeric: tabular-nums; min-width: 104px; text-align: right; }
.cline__fund { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.cline__fund .qv__track { flex: 1; }
.cline__fund span { font-size: 11.5px; font-weight: 600; color: var(--fg-muted); white-space: nowrap; }
@media (max-width: 640px) {
  .cline { grid-template-columns: 84px 1fr; }
  .cline__img { width: 84px; height: 64px; grid-row: 1 / 3; }
  .cline__row { grid-column: 1 / -1; }
  .cline__total { min-width: 0; }
}

/* Dashed "add another property" slot — closes every order-lines card; the
   diversify suggestions below it do the heavy lifting, this keeps the door
   visibly open (live-platform pattern) */
.cline-add { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 14px 16px; border: 1.5px dashed var(--border-strong); border-radius: 16px; text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.cline-add:hover { border-color: var(--brand-blue); background: var(--info-bg); }
.cline-add__logo { width: 84px; height: 60px; border-radius: 12px; background: var(--info-bg); display: flex; align-items: center; justify-content: center; flex: none; }
.cline-add__logo img { width: 52px; display: block; }
.cline-add__t { font-size: 14px; font-weight: 700; color: var(--fg-heading-2); }
.cline-add__s { font-size: 12.5px; color: var(--fg-muted); margin-top: 2px; }
.cline-add__plus { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; background: var(--bg-hover); color: var(--fg-secondary); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cline-add__plus svg { width: 18px; height: 18px; }
.cline-add:hover .cline-add__plus { background: var(--brand-blue); color: var(--brand-green-mint); }

/* Order summary card — .kv rows inside; CTA + note + trust strip below */
.osum { background: var(--bg-surface); border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property); padding: 20px 24px; }
.osum__h { font-size: 16px; font-weight: 700; color: var(--fg-heading-2); margin: 0 0 8px; }
.osum .btn { margin-top: 16px; }
.osum__note { font-size: 12px; color: var(--fg-muted); text-align: center; margin-top: 12px; line-height: 1.6; }
.osum__nudge { display: block; width: 100%; margin-top: 14px; border: 1px dashed var(--border-strong); background: none; border-radius: 12px; padding: 10px 12px; font: 600 12.5px/1.5 var(--font-family); color: var(--fg-secondary); text-align: left; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.osum__nudge:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.osum__nudge b { color: var(--success-fg); }

/* Payment picker — wallet-first radio list; .off rows are explained, not hidden */
.pay { display: flex; flex-direction: column; gap: 10px; }
.pay__opt { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1.5px solid var(--border-soft); border-radius: 14px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.pay__opt.on { border-color: var(--brand-blue); background: var(--info-bg); }
.pay__opt.off { opacity: .55; cursor: default; }
.pay__opt input { width: 18px; height: 18px; accent-color: var(--brand-blue); flex: none; cursor: inherit; }
.pay__ic { width: 38px; height: 38px; border-radius: 10px; background: var(--bg-hover); color: var(--fg-secondary); display: flex; align-items: center; justify-content: center; flex: none; transition: background .15s ease, color .15s ease; }
.pay__ic svg { width: 19px; height: 19px; }
.pay__opt.on .pay__ic { background: var(--brand-blue); color: var(--brand-green-mint); }
.pay__main { flex: 1; min-width: 0; }
.pay__t { font-size: 14px; font-weight: 700; color: var(--fg-heading-2); }
.pay__s { font-size: 12.5px; color: var(--fg-muted); margin-top: 1px; }
.pay__note { font-size: 12.5px; color: var(--fg-muted); line-height: 1.6; margin: 12px 0 0; }
.pay__note a { color: var(--brand-blue); font-weight: 600; }

/* Trust strip — quiet anxiety reducers under the summary CTA */
.trust { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.trust span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--fg-muted); }
.trust svg { width: 13px; height: 13px; color: var(--success-fg); flex: none; }

/* Diversify suggestions — compact upsell cards (cart + success) */
.sug-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.sug-head h2 { font-size: 18px; font-weight: 800; color: var(--fg-heading-2); margin: 0; }
.sug-head span { font-size: 12.5px; color: var(--fg-muted); }
.sug { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sug__c { background: var(--bg-surface); border-radius: var(--radius-card-lg); box-shadow: var(--shadow-property); overflow: hidden; display: flex; flex-direction: column; }
.sug__c img { width: 100%; height: 96px; object-fit: cover; display: block; }
.sug__b { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.sug__t { font-size: 13.5px; font-weight: 700; color: var(--fg-heading-2); }
.sug__s { font-size: 11.5px; color: var(--fg-muted); margin-top: 2px; flex: 1; }
.sug__add { margin-top: 10px; min-height: 44px; border: 0; border-radius: var(--radius-pill); background: var(--info-bg); color: var(--brand-blue); font-family: var(--font-family); font-size: 12.5px; font-weight: 700; padding: 9px 10px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.sug__add:hover { background: var(--brand-blue); color: var(--brand-green-mint); }
.sug__add.ok { background: var(--success-bg); color: var(--success-fg); cursor: default; }
@media (max-width: 720px) { .sug { grid-template-columns: 1fr; } .sug__c { flex-direction: row; } .sug__c img { width: 110px; height: auto; } }

/* Success scene — confirmation pop (success page); calm, no casino */
.succ { width: 92px; height: 92px; margin: 0 auto 18px; border-radius: 50%; background: var(--brand-green-mint); color: var(--brand-blue); display: flex; align-items: center; justify-content: center; animation: succ-pop .5s cubic-bezier(.2,.8,.2,1) both; }
.succ svg { width: 40px; height: 40px; }
@keyframes succ-pop { from { transform: scale(.6); opacity: 0; } }

/* Checkout step progress (CkSteps) — three moments: choose → review & pay →
   confirmation. NOT a wizard: the checkout stays one screen, completed
   steps are links back, upcoming steps are never gates. */
.cksteps { display: flex; align-items: center; gap: 10px; }
.cksteps__s { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--fg-muted); white-space: nowrap; text-decoration: none; }
.cksteps__n { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-hover); color: var(--fg-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; flex: none; }
.cksteps__n svg { width: 12px; height: 12px; }
.cksteps__s.on { color: var(--brand-blue); }
.cksteps__s.on .cksteps__n { background: var(--brand-blue); color: var(--brand-green-mint); }
.cksteps__s.done { color: var(--fg-heading-2); }
.cksteps__s.done .cksteps__n { background: var(--brand-green-mint); color: var(--brand-blue); }
a.cksteps__s:hover { color: var(--brand-blue); }
.cksteps__bar { width: 34px; height: 2px; border-radius: var(--radius-pill); background: var(--border-strong); flex: none; }
.cksteps__bar.fill { background: var(--brand-green-mint); }
@media (max-width: 560px) { .cksteps__s:not(.on) .cksteps__l { display: none; } }

/* Listing-wizard chrome — the focused single-column grammar shared by the
   four wizard pages (Dev Add Asset, Dev Property Content, Dev Documents,
   Dev Review); their page CSS files keep only the body background. */
.devwiz { max-width: var(--shell-w-form); margin: 0; padding: 54px 0 80px; }
.devwiz .cksteps { margin-top: 14px; }
.devwiz__head { margin: 14px 0 20px; }
.devwiz__head h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--fg-heading-2); margin: 0; }
.devwiz__head p { font-size: 14.5px; color: var(--fg-secondary); margin: 6px 0 0; }
.devwiz__stack { display: flex; flex-direction: column; gap: 18px; }
.devwiz__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.devwiz__grp { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.devwiz__note { font-size: 12.5px; color: var(--fg-muted); margin: 2px 0 0; text-align: center; }
@media (max-width: 980px) { .devwiz { padding-top: 8px; } }

/* Two-column form grid — pairs set-row fields side by side inside a card
   (wizard property form; any dense set-* card may use it). Cells keep the
   row's bottom hairline; collapses to one column on small screens. */
.fduo { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.fduo .set-row { align-items: flex-start; flex-direction: column; gap: 6px; }
@media (max-width: 640px) { .fduo { grid-template-columns: 1fr; } }

/* Input with a unit suffix (%, sq.m, years, $) — wraps one .input. */
.inwrap { position: relative; display: flex; flex: 1; min-width: 0; }
.inwrap .input { flex: 1; min-width: 0; padding-right: 56px; }
.inwrap__unit { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 600; color: var(--fg-muted); pointer-events: none; }

/* Choice tiles — selectable option cards (asset-type step of the listing
   wizard; any "pick one of n" intake may reuse them). Same card language,
   selected state rings brand blue; disabled tiles read as "coming soon". */
.choicegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.choice { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 124px; padding: 16px 20px; border: 2px solid var(--border-soft); border-radius: var(--radius-card-lg); background: var(--bg-surface); cursor: pointer; text-align: left; font: inherit; transition: border-color .15s ease, background .15s ease; }
.choice:hover:not(:disabled) { border-color: var(--brand-blue); }
.choice:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.choice[aria-pressed="true"] { border-color: var(--brand-blue); background: var(--info-bg); }
.choice:disabled { cursor: not-allowed; background: var(--bg-subtle); color: inherit; }
.choice:disabled .choice__ic, .choice:disabled .choice__t, .choice:disabled .choice__s { opacity: .55; }
.choice__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--info-bg); color: var(--brand-blue); }
.choice__ic svg { width: 20px; height: 20px; }
.choice__t { font-size: 14.5px; font-weight: 700; color: var(--fg-heading-2); }
.choice__s { font-size: 12.5px; color: var(--fg-muted); line-height: 1.45; }
.choice__badge { position: absolute; top: 12px; right: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; padding: 3px 8px; border-radius: 99px; background: var(--bg-subtle); color: var(--fg-muted); }
.choice__badge--on { background: var(--brand-green-mint); color: var(--fg-heading-2); }
.choice__check { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-blue); color: var(--bg-surface); }
.choice__check svg { width: 12px; height: 12px; }
.choice[aria-pressed="true"] .choice__badge { display: none; }

/* Document-requirement list — the accepted papers above an upload zone
   (listing wizard documents; the developer application's docs card). */
.upl-req { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.upl-req li { font-size: 13px; color: var(--fg-secondary); padding-left: 16px; position: relative; }
.upl-req li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-green-mint); }

/* Info banner — one-line callout under a form section (wizard documents
   nudge; reusable wherever a quiet inline notice is needed). */
.formnote { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: var(--radius-card-lg); background: var(--info-bg); }
.formnote svg { width: 18px; height: 18px; flex: none; color: var(--brand-blue); margin-top: 1px; }
.formnote__t { font-size: 13.5px; font-weight: 700; color: var(--brand-blue); }
.formnote__s { font-size: 13px; color: var(--fg-secondary); margin-top: 2px; line-height: 1.5; }

/* Order summary extras — live-platform parity: reservation hold, per-line
   rows with unit math + IDR equivalent, fee/tax breakdown, big total,
   accepted payments + security footer. IDR is indicative (POOOL_FX). */
.osum__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.osum__hold { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--warning-fg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.osum__hold svg { width: 13px; height: 13px; flex: none; }
.osum__line { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dotted var(--border-strong); }
.osum__line .t { font-size: 13px; font-weight: 700; color: var(--fg-heading-2); min-width: 0; }
.osum__line .t i { display: block; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--fg-muted); margin-top: 2px; }
.osum__line .amt { font-size: 13.5px; font-weight: 700; color: var(--fg-heading-2); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.osum .rp { display: block; font-size: 11px; font-weight: 500; color: var(--fg-muted); margin-top: 1px; text-align: right; font-variant-numeric: tabular-nums; }
.osum__info { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--bg-hover); color: var(--fg-muted); font-size: 9.5px; font-weight: 700; margin-left: 5px; vertical-align: 1px; cursor: help; }
.osum__total { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 0 2px; border-top: 1px solid var(--border); margin-top: 4px; }
.osum__total .k { font-size: 15px; font-weight: 800; color: var(--fg-heading-2); }
.osum__total .v { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--brand-blue); text-align: right; font-variant-numeric: tabular-nums; }
.osum__accept { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-soft); text-align: center; }
.osum__accept .h { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-disabled); margin-bottom: 8px; }
.osum__accept .row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.osum__accept .row span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--fg-secondary); border: 1px solid var(--border-soft); border-radius: 8px; padding: 4px 9px; white-space: nowrap; }
.osum__accept .row svg { width: 14px; height: 14px; color: var(--fg-muted); }
.osum__sec { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.osum__sec span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--fg-muted); white-space: nowrap; }
.osum__sec svg { width: 12px; height: 12px; flex: none; }

/* Typed stepper input (CkNumStep) — same circle buttons as NumStep, plus
   direct entry like the asset page's invest stepper */
.numstep__in { width: 64px; height: 36px; text-align: center; border: 1px solid var(--border-strong); border-radius: 10px; font-family: var(--font-family); font-size: 16px; font-weight: 700; color: var(--fg-heading-2); background: var(--bg-surface); -moz-appearance: textfield; appearance: textfield; }
.numstep__in::-webkit-inner-spin-button, .numstep__in::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.numstep__in:focus { outline: 0; border-color: var(--brand-blue); box-shadow: 0 0 0 4px rgba(0,0,255,.10); }
/* Bare share stepper — no +/− buttons, just a typeable number + "shares" so
   large quantities (e.g. 1000) go in directly instead of click-by-click. */
.numstep--bare { gap: 8px; }
.numstep--bare .numstep__in { width: 88px; height: 40px; border: 0; border-bottom: 2px dashed var(--border-strong); border-radius: 0; background: transparent; font-size: 22px; font-weight: 800; padding: 0 2px 1px; transition: border-color .15s ease; }
.numstep--bare .numstep__in:hover { border-bottom-color: var(--fg-disabled); box-shadow: none; }
.numstep--bare .numstep__in:focus { border-bottom-style: solid; border-bottom-color: var(--brand-blue); box-shadow: none; }
.numstep__u { font-size: 14px; font-weight: 700; color: var(--fg-secondary); }

/* Shell cart: live count badge + link affordance on the action circle */
a.shell__act { cursor: pointer; text-decoration: none; }
a.shell__act:hover { color: var(--brand-blue); }
.shell__act-n { position: absolute; top: 1px; right: 1px; box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--brand-blue); color: var(--brand-green-mint); font-size: 10.5px; font-weight: 800; line-height: 1; display: grid; place-items: center; text-align: center; font-variant-numeric: tabular-nums; border: 2px solid var(--bg-surface); }
.shell__act-n[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .succ { animation: none; }
  .ckbar__back, .cline__title, .cline__rm, .pay__opt, .pay__ic, .sug__add, a.shell__act { transition: none; }
}

/* ── Leaderboard (shared) — pool-lane standings + move chips ────────────────
   POOOL's standings are literally a pool seen from above: every member
   swims a lane, the water fill is their points relative to the leader, a
   neon dot marks each swimmer's edge, dotted lane ropes separate ranks.
   Ranked by loyalty points only — deliberately NO podium/medal/prize look
   and no red "down" deltas (regulatory: nothing exchange- or contest-like).
   Markup: leaderboard-app.jsx; community pages may reuse the lanes for
   member lists. */
.lb-podium { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 0 14px; }
.lb-podium__side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lb-spot { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; margin: 0; padding: 24px; background: var(--bg-surface); border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property); }
.lb-spot::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--brand-blue), var(--brand-green-neon)); }
.lb-spot::after { content: '01'; position: absolute; right: 22px; top: -16px; color: var(--fg-heading-2); opacity: .035; font-size: 118px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; pointer-events: none; }
.lb-spot--lead { min-height: 246px; padding: 40px; }
.lb-spot--mini { min-height: 108px; grid-template-columns: minmax(0, 1fr) auto; padding: 20px; gap: 16px; }
.lb-spot--mini::after { content: none; }
.lb-spot__main { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; min-width: 0; }
.lb-spot__rank { width: 48px; height: 48px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand-blue); color: var(--brand-green-mint); font-size: 16px; font-weight: 900; box-shadow: 0 8px 22px rgba(0,0,255,.20); font-variant-numeric: tabular-nums; }
.lb-spot--lead .lb-spot__main { gap: 22px; }
.lb-spot--mini .lb-spot__main { gap: 10px; }
.lb-spot--lead .lb-spot__rank { width: 82px; height: 82px; font-size: 24px; box-shadow: 0 18px 42px rgba(0,0,255,.28); }
.lb-spot--mini .lb-spot__rank { width: 36px; height: 36px; font-size: 12px; box-shadow: 0 6px 16px rgba(0,0,255,.18); }
.lb-spot__ava, .lb-spot__img { position: relative; flex: none; width: 52px; height: 52px; border-radius: 16px; }
.lb-spot__ava { display: inline-flex; align-items: center; justify-content: center; background: var(--info-bg); color: var(--brand-blue); font-size: 15px; font-weight: 900; }
.lb-spot__img { object-fit: cover; }
.lb-spot--lead .lb-spot__ava, .lb-spot--lead .lb-spot__img { width: 72px; height: 72px; border-radius: 22px; font-size: 19px; }
.lb-spot--mini .lb-spot__ava, .lb-spot--mini .lb-spot__img { width: 38px; height: 38px; border-radius: 13px; font-size: 12px; }
.lb-spot__who { min-width: 0; }
.lb-spot__k { margin: 0 0 5px; color: var(--brand-blue); font-size: 12px; font-weight: 900; letter-spacing: 0; text-transform: uppercase; }
.lb-spot__name { margin: 0; color: var(--fg-heading-2); font-size: 24px; font-weight: 900; line-height: 1.1; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-spot__sub { margin: 5px 0 0; color: var(--fg-muted); font-size: 13px; font-weight: 700; }
.lb-spot__metric { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; min-width: 190px; }
.lb-spot__label { color: var(--fg-muted); font-size: 11px; font-weight: 900; letter-spacing: 0; text-transform: uppercase; }
.lb-spot__metric strong { margin-top: 5px; color: var(--fg-heading-2); font-size: 26px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lb-spot__metric span:last-child { margin-top: 8px; border-radius: var(--radius-pill); padding: 5px 10px; background: var(--success-bg); color: var(--success-fg); font-size: 12px; font-weight: 800; }
.lb-spot--lead .lb-spot__k { font-size: 13px; }
.lb-spot--lead .lb-spot__name { font-size: 34px; }
.lb-spot--lead .lb-spot__sub { margin-top: 8px; font-size: 14px; }
.lb-spot--lead .lb-spot__metric { min-width: 220px; }
.lb-spot--lead .lb-spot__metric strong { font-size: 40px; }
.lb-spot--lead .lb-spot__metric span:last-child { margin-top: 12px; padding: 7px 12px; font-size: 13px; }
.lb-spot--mini .lb-spot__k { margin-bottom: 3px; font-size: 10.5px; }
.lb-spot--mini .lb-spot__name { font-size: 15px; }
.lb-spot--mini .lb-spot__sub { margin-top: 3px; font-size: 11.5px; }
.lb-spot--mini .lb-spot__label { display: none; }
.lb-spot--mini .lb-spot__metric { align-items: flex-end; min-width: 96px; margin-left: 0; }
.lb-spot--mini .lb-spot__metric strong { font-size: 16px; }
.lb-spot--mini .lb-spot__metric span:last-child { display: none; }
.lb-pool { list-style: none; margin: 0; padding: 6px 22px; background: var(--bg-surface); border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property); }
.lb-lane { position: relative; display: flex; align-items: center; gap: 13px; padding: 13px 10px; border-bottom: 1px dotted var(--border-strong); }
.lb-lane:last-child { border-bottom: 0; }
.lb-lane--you { border-radius: 14px; box-shadow: inset 0 0 0 2px var(--brand-blue); border-bottom-color: transparent; }
.lb-lane__water { position: absolute; top: 7px; bottom: 7px; left: 4px; min-width: 56px; width: calc((100% - 160px) * var(--lb-fill, 0)); border-radius: var(--radius-bar); background: linear-gradient(90deg, transparent, var(--info-bg) 45%); transform-origin: left center; transition: width .5s var(--ease-out); animation: lb-swim .8s var(--ease-out) backwards; }
.lb-lane__dot { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--brand-green-neon); box-shadow: 0 0 0 4px rgba(3,255,136,.16); }
@keyframes lb-swim { from { transform: scaleX(0); opacity: 0; } }
.lb-lane__rank { position: relative; width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 13.5px; font-weight: 800; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.lb-lane__rank--1 { background: var(--brand-blue); color: var(--brand-green-mint); box-shadow: 0 4px 12px rgba(0,0,255,.25); }
.lb-lane__rank--2, .lb-lane__rank--3 { background: var(--info-bg); color: var(--brand-blue); }
/* Deep lanes (4-5 digit ranks on a 20,000-member pool): the disc relaxes
   into a pill so "12,408" still reads */
.lb-lane__rank--wide { width: auto; min-width: 30px; padding: 0 8px; border-radius: var(--radius-pill); font-size: 12px; letter-spacing: -.01em; }
.lb-lane__ava { position: relative; width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--info-bg); color: var(--brand-blue); font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.lb-lane--you .lb-lane__ava { background: var(--brand-blue); color: var(--brand-green-mint); }
.lb-lane__who { position: relative; display: flex; flex-direction: column; min-width: 0; }
.lb-lane__who b { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--fg-heading-2); white-space: nowrap; }
.lb-lane__who i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--fg-muted); }
.lb-move { position: relative; margin-left: auto; display: inline-flex; align-items: center; gap: 3px; flex: none; border-radius: var(--radius-pill); padding: 3px 9px; background: var(--bg-hover); color: var(--fg-muted); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-move svg { width: 12px; height: 12px; }
.lb-move--up { background: var(--success-bg); color: var(--success-fg); }
.lb-lane__pts { position: relative; flex: none; min-width: 64px; text-align: right; font-size: 15px; font-weight: 800; color: var(--fg-heading-2); font-variant-numeric: tabular-nums; }
.lb-lane__pts i { display: block; font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-disabled); }
/* Asset/developer lanes: a photo thumb instead of initials, the whole lane
   is one stretched link (no inner controls), no move chip */
.lb-lane__img { position: relative; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.lb-lane__pts { margin-left: auto; }
.lb-lane--go { transition: background .15s ease; }
.lb-lane--go:hover { background: var(--bg-row-hover); border-radius: 12px; }
.lb-lane__a { color: inherit; text-decoration: none; }
.lb-lane__a::after { content: ''; position: absolute; inset: 0; border-radius: 12px; }
.lb-lane__a:focus-visible { outline: none; }
.lb-lane__a:focus-visible::after { outline: 2px solid var(--brand-blue); outline-offset: -2px; }
/* Folded water — the pool never renders 20,000 lanes. The list shows the
   front + the stretch around your lane; every fold between is one button
   that states how many lanes it hides and reveals the next few on click.
   Dotted leaders left/right keep the lane-rope language. */
.lb-pool__gap { display: flex; border-bottom: 1px dotted var(--border-strong); }
.lb-pool__gap:last-child { border-bottom: 0; }
.lb-pool__gap-btn { flex: 1; display: flex; align-items: center; gap: 14px; min-height: 48px; margin: 6px 0; padding: 6px 12px; border: 0; border-radius: 12px; background: none; font-family: var(--font-family); font-size: 12.5px; font-weight: 600; color: var(--fg-muted); cursor: pointer; transition: background .15s ease, color .15s ease; }
.lb-pool__gap-btn::before, .lb-pool__gap-btn::after { content: ''; flex: 1; border-top: 2px dotted var(--border-strong); }
.lb-pool__gap-btn b { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--fg-secondary); }
.lb-pool__gap-btn:hover { background: var(--bg-row-hover); color: var(--brand-blue); }
.lb-pool__gap-btn:hover b { color: var(--brand-blue); }
.lb-pool__gap-btn:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: -2px; }
.lb-pool__gap--static { padding: 6px 0; }
.lb-pool__gap-note { flex: 1; display: flex; align-items: center; gap: 14px; min-height: 38px; padding: 0 12px; font-size: 12.5px; font-weight: 700; color: var(--fg-muted); }
.lb-pool__gap-note::before, .lb-pool__gap-note::after { content: ''; flex: 1; border-top: 2px dotted var(--border-strong); }
.lb-pool__gap-note b { color: var(--fg-secondary); font-weight: 900; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .lb-podium { grid-template-columns: 1fr; }
  .lb-podium__side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .lb-podium__side { grid-template-columns: 1fr; }
  .lb-spot { grid-template-columns: 1fr; align-items: stretch; padding: 20px; gap: 16px; }
  .lb-spot::after { right: 14px; top: -8px; font-size: 84px; }
  .lb-spot--lead { min-height: 254px; padding: 30px 22px; }
  .lb-spot--lead::after { font-size: 112px; }
  .lb-spot--mini { min-height: 0; padding: 16px; }
  .lb-spot__rank { width: 42px; height: 42px; font-size: 14px; }
  .lb-spot--lead .lb-spot__rank { width: 66px; height: 66px; font-size: 20px; }
  .lb-spot--mini .lb-spot__rank { width: 34px; height: 34px; font-size: 11.5px; }
  .lb-spot__ava, .lb-spot__img { width: 44px; height: 44px; border-radius: 14px; }
  .lb-spot--lead .lb-spot__ava, .lb-spot--lead .lb-spot__img { width: 58px; height: 58px; border-radius: 18px; }
  .lb-spot__name { font-size: 20px; white-space: normal; }
  .lb-spot--lead .lb-spot__name { font-size: 28px; }
  .lb-spot--mini .lb-spot__name { font-size: 15px; }
  .lb-spot__metric { align-items: flex-start; min-width: 0; }
  .lb-spot__metric strong { font-size: 23px; }
  .lb-spot--lead .lb-spot__metric strong { font-size: 34px; }
  .lb-spot--mini .lb-spot__metric { align-items: flex-start; min-width: 0; margin-left: 0; }
  .lb-spot--mini .lb-spot__metric strong { font-size: 16px; }
  .lb-pool { padding: 2px 14px; }
  .lb-lane { gap: 10px; padding: 12px 6px; }
  .lb-lane__ava, .lb-lane__img, .lb-lane__who i, .lb-lane__pts i { display: none; }
  .lb-lane__who b { white-space: normal; }
  .lb-lane__water { width: calc((100% - 110px) * var(--lb-fill, 0)); }
  .lb-lane__dot { display: none; }
}
/* Jump-to-lane feedback: a ring that fades out after a name click */
.lb-lane--flash { border-radius: 14px; animation: lb-flash 1.6s var(--ease-out); }
@keyframes lb-flash {
  0% { box-shadow: inset 0 0 0 2px var(--brand-blue), 0 0 0 8px rgba(0,0,255,.12); }
  100% { box-shadow: inset 0 0 0 2px rgba(0,0,255,0), 0 0 0 8px rgba(0,0,255,0); }
}
.lb-lane--you.lb-lane--flash { animation: none; } /* your lane is already ringed */

/* "The deep end" — the week's story as one brand panel (same deep-blue
   gradient family as the wallet's balance band): editorial lines instead
   of rows, member names are mint buttons that jump to + ring their lane,
   the referral nudge is the panel's payoff. No prizes, no podium. */
.lb-deep { position: relative; overflow: hidden; border-radius: 20px; padding: 32px 36px 34px; color: #fff; background: radial-gradient(130% 180% at 10% 0%, var(--brand-blue-hover), var(--brand-blue) 48%, var(--brand-blue-active)); box-shadow: 0 4px 20px rgba(0,0,255,.16); }
.lb-deep > :not(.lb-deep__waves) { position: relative; z-index: 1; }
.lb-deep__waves { position: absolute; right: -60px; top: -36px; width: 460px; color: var(--brand-green-mint); opacity: .13; z-index: 0; animation: lb-drift 22s ease-in-out infinite alternate; }
@keyframes lb-drift { from { transform: translateX(0); } to { transform: translateX(-52px); } }
.lb-deep__k { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-green-mint); margin: 0 0 16px; }
.lb-deep__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.lb-deep__lines li { font-size: 19px; font-weight: 500; line-height: 1.5; letter-spacing: -.01em; color: rgba(255,255,255,.92); max-width: 760px; }
.lb-deep__lines b, .lb-deep__you-t b { color: var(--brand-green-neon); font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-deep__name { border: 0; padding: 0; background: none; font: inherit; font-weight: 700; color: var(--brand-green-mint); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: rgba(152,251,150,.45); transition: text-decoration-color .15s ease; }
.lb-deep__name:hover { text-decoration-color: var(--brand-green-mint); }
.lb-deep__name:focus-visible { outline: 2px solid var(--brand-green-mint); outline-offset: 2px; border-radius: 4px; }
.lb-deep__you { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.18); }
.lb-deep__you-t { font-size: 23px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; color: #fff; margin: 0 0 5px; max-width: 640px; }
.lb-deep__you-s { font-size: 13.5px; color: rgba(255,255,255,.72); margin: 0; }

/* "Your race" strip — the hero's gap view as a zoomed-in slice of the pool:
   one dotted lane, the swimmer ahead, you (pulsing cap) and the one chasing,
   gaps written on the water. Positions are indicative, the numbers exact. */
.lb-race { position: relative; flex-basis: 100%; }
.lb-race__track { position: relative; height: 92px; margin-top: 12px; }
.lb-race__lane { position: absolute; left: 0; right: 0; top: 24px; height: 32px; border-top: 1px dotted var(--border-strong); border-bottom: 1px dotted var(--border-strong); background: linear-gradient(90deg, var(--info-bg), transparent); }
.lb-race__gap { position: absolute; top: 2px; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: var(--fg-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lb-race__swim { position: absolute; top: 40px; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.lb-race__dot { position: relative; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-surface); color: var(--brand-blue); font-size: 11.5px; font-weight: 800; box-shadow: var(--shadow-property); }
.lb-race__swim--you .lb-race__dot { width: 44px; height: 44px; background: var(--brand-blue); color: var(--brand-green-mint); font-size: 12.5px; box-shadow: 0 6px 18px rgba(0,0,255,.32); }
.lb-race__swim--you .lb-race__dot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--brand-green-neon); animation: lb-pulse 3.8s ease-in-out infinite; }
@keyframes lb-pulse { 0%, 100% { transform: scale(.9); opacity: .55; } 50% { transform: scale(1.1); opacity: .12; } }
.lb-race__who { margin-top: 6px; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--fg-heading-2); line-height: 1.3; white-space: nowrap; }
.lb-race__who i { display: block; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.lb-race__hint { margin: 8px 0 0; font-size: 13px; color: var(--fg-muted); }

@media (max-width: 640px) {
  .lb-deep { padding: 24px 22px 26px; }
  .lb-deep__lines li { font-size: 16.5px; }
  .lb-deep__you-t { font-size: 19px; }
  .lb-race__who { font-size: 10.5px; }
  .lb-race__gap { display: none; } /* the hint line carries both gaps */
}
@media (prefers-reduced-motion: reduce) { .lb-lane__water { animation: none; transition: none; } .lb-lane--flash, .lb-deep__waves { animation: none; } .lb-race__swim--you .lb-race__dot::after { animation: none; opacity: .4; } .lb-deep__name, .lb-lane--go, .lb-pool__gap-btn { transition: none; } }

/* ── Card grammar (decision 2026-06-11, "to 100" pass) ──────────────────────
   1. Forced colors: shadows are stripped in forced-colors mode, so every card
      carries a transparent border the UA can paint — invisible otherwise.
      (prefers-contrast gets a hairline ring via the --shadow-property
      override in kit.css.)
   2. Interaction: inside the app shell a card lifts ONLY if the whole card is
      a link/button; lifting cards get a focus ring and a press state.
      Marketing pages may keep decorative lift as brand expression. */
.acard, .step, .value, .tcard, .pcard, .ch-card, .set-card, .empty, .wal-hero, .wal-stat, .rwd-tier, .rwd-redeem, .chartcard, .htable-wrap, .osum, .sug__c, .lb-pool { border: 1px solid transparent; }
.acard:focus-visible { outline: 0; box-shadow: var(--shadow-property), 0 0 0 4px rgba(0,0,255,.20); }
.acard:active { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .acard, .acard:hover, .acard:active { transition: none; transform: none; }
}

/* ── Card skeleton (card grammar #5) ─────────────────────────────────────
   Loading cards keep the exact card recipe so content never pops in on a
   different surface. JSX: SkeletonCard in market-sections.jsx. Decorative:
   render with aria-hidden and put aria-busy on the loading region. */
.skel { background: var(--bg-surface); border: 1px solid transparent; border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property); overflow: hidden; }
.skel__media { height: 200px; background: var(--bg-hover); }
.skel__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.skel__bar { position: relative; overflow: hidden; height: 12px; border-radius: var(--radius-pill); background: var(--bg-hover); }
.skel__bar--lg { height: 18px; width: 72%; }
.skel__bar--sm { width: 44%; }
.skel__bar::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); animation: skelSweep 1.6s ease-in-out infinite; }
@keyframes skelSweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel__bar::after { animation: none; } }

/* ── Upload dropzone — demo file intake (JSX contract: FileDrop in
   dev-sections.jsx; used by the listing wizard, operations reports and
   the developer application). The zone is a <label> wrapping a file input
   that is visually hidden but focusable — Tab reaches it, Enter/Space opens
   the picker, and :focus-within lights up the zone. ── */
.upl { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 110px; padding: 18px; border: 2px dashed var(--border-strong); border-radius: var(--radius-card-lg); background: var(--bg-subtle); cursor: pointer; text-align: center; transition: border-color .15s ease, background .15s ease; position: relative; }
.upl input[type="file"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; opacity: 0; }
.upl:hover, .upl:focus-within { border-color: var(--brand-blue); background: var(--info-bg); }
.upl > svg { width: 22px; height: 22px; color: var(--brand-blue); }
.upl__t { font-size: 13.5px; font-weight: 700; color: var(--fg-heading-2); }
.upl__s { font-size: 12px; color: var(--fg-muted); }
.upl__file { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border-radius: var(--radius-card-lg); background: var(--bg-subtle); font-size: 13.5px; font-weight: 600; color: var(--fg-heading-2); margin-top: 8px; }
.upl__file svg { width: 16px; height: 16px; color: var(--brand-blue); flex: none; }
.upl__file .s { font-size: 12px; color: var(--fg-muted); font-weight: 500; }
.upl__file .rm { margin-left: auto; }

/* ── Media grid — gallery-management tiles (JSX contract: MediaGrid in
   dev-sections.jsx; the developer asset detail today, the listing wizard's
   photo step is the next consumer). Order badge, cover chip and the move
   buttons live ON the tile — pages only place the grid. ── */
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.mtile { position: relative; margin: 0; border-radius: var(--radius-card-lg); overflow: hidden; background: var(--bg-subtle); aspect-ratio: 4 / 3; }
.mtile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mtile__n { position: absolute; top: 10px; left: 10px; min-width: 26px; height: 26px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-bar); background: var(--brand-blue); color: var(--bg-surface); font-size: 12px; font-weight: 700; }
.mtile__cover { position: absolute; top: 10px; left: 46px; height: 26px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: var(--radius-bar); background: var(--brand-green-mint); color: var(--brand-blue); font-size: 12px; font-weight: 700; }
.mtile__acts { position: absolute; right: 6px; bottom: 6px; display: flex; gap: 4px; }
.mtile__btn { width: 28px; height: 28px; border: 0; border-radius: 8px; background: var(--bg-surface); color: var(--fg-heading-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-property); transition: color .15s ease; }
.mtile__btn svg { width: 15px; height: 15px; }
.mtile__btn:hover:not(:disabled) { color: var(--brand-blue); }
.mtile__btn:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.mtile__btn:disabled { opacity: .4; cursor: default; }

/* ── Community (shared) — avatars, posts, composer, comments, circles,
   AMAs, member profiles. JSX contract: community-sections.jsx (CmAvatar/
   AvatarStack, PostCard, Composer, CircleCard, AmaCard, dialogs); data:
   community-data.js (POOOL_COMMUNITY — every count derived). Pages:
   Community hub, Circle, Ama, Community Profile. ── */

/* Avatar — initials tile in the .snav__ava family; profile links get the
   standard focus ring. Sizes: default 40, sm 30 (comments, stacks), lg 72
   (profile header). */
.cmava { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-blue); color: var(--brand-green-mint); font-size: 13px; font-weight: 800; letter-spacing: .01em; flex: none; text-decoration: none; }
.cmava--sm { width: 30px; height: 30px; font-size: 11px; }
.cmava--lg { width: 72px; height: 72px; font-size: 22px; }
a.cmava:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.avstack { display: inline-flex; align-items: center; }
.avstack .cmava { width: 30px; height: 30px; font-size: 11px; box-shadow: 0 0 0 2px var(--bg-surface); }
.avstack .cmava + .cmava { margin-left: -8px; }
.avstack__more { margin-left: 8px; font-size: 12.5px; font-weight: 700; color: var(--fg-muted); }

/* Developer logo tile — neutral surface frame, the mark inside carries the
   developer's brand (lifted from asset.css when the AMA host card became
   the third consumer: asset page, developer profile, AMA). */
.ad-dev__av { width: 52px; height: 52px; border-radius: 14px; background: var(--bg-surface); border: 1px solid var(--border-soft); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.ad-dev__av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Post type chips — semantic token pairs only */
.ptype { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; border-radius: var(--radius-pill); padding: 3px 10px; white-space: nowrap; }
.ptype--discussion, .ptype--dd, .ptype--poll { background: var(--neutral-bg); color: var(--neutral-fg); }
.ptype--question, .ptype--insight { background: var(--info-bg); color: var(--info-fg); }
.ptype--announcement { background: var(--brand-green-mint); color: var(--brand-dark-blue); }
.ptype--update { background: var(--success-bg); color: var(--success-fg); }
.ptype--risk { background: var(--danger-bg); color: var(--danger-fg); }
.ptype--official { background: var(--brand-blue); color: var(--brand-green-mint); }

/* Post card — the community thread unit (card language; never lifts — the
   card holds many controls, so the card itself is not a control) */
.post { background: var(--bg-surface); border: 1px solid transparent; border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property); padding: 20px 24px; }
.post__head { display: flex; align-items: flex-start; gap: 12px; }
.post__who { min-width: 0; flex: 1; }
.post__name { font-size: 14.5px; font-weight: 800; color: var(--fg-heading-2); text-decoration: none; }
a.post__name:hover { color: var(--brand-blue); }
.post__flair { display: inline-block; white-space: nowrap; margin-left: 8px; font-size: 11.5px; font-weight: 700; color: var(--brand-blue); background: var(--info-bg); border-radius: var(--radius-pill); padding: 2px 8px; }
.post__meta { margin-top: 2px; font-size: 12.5px; color: var(--fg-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.post__meta a { color: var(--fg-secondary); font-weight: 700; text-decoration: none; }
.post__meta a:hover { color: var(--brand-blue); }
.post__body { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--fg-body); white-space: pre-wrap; overflow-wrap: break-word; }
.post__body a { color: var(--brand-blue); font-weight: 700; text-decoration: none; }
.post__body a:hover { text-decoration: underline; }
.post__edited { font-size: 11.5px; color: var(--fg-muted); font-weight: 600; }

/* Image grid (1–4) — taps open the shared .lb lightbox */
.post__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.post__imgs--one { grid-template-columns: 1fr; }
.post__img { position: relative; border: 0; padding: 0; background: var(--bg-hover); border-radius: var(--radius-card-lg); overflow: hidden; cursor: zoom-in; min-height: 44px; }
.post__img img { display: block; width: 100%; height: 200px; object-fit: cover; }
.post__imgs--one .post__img img { height: 280px; }
.post__img:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }

/* Quoted post — embedded tile on the quiet surface */
.post__quote { margin-top: 12px; background: var(--bg-subtle); border-radius: var(--radius-card-lg); padding: 14px 16px; }
.post__quote .post__body { margin-top: 8px; font-size: 13.5px; }

/* Poll — every option is a waterline lane (brand grammar): --info-bg water,
   mint fill at the option's share, neon swimmer dot on the leading option.
   Your vote = check + bold blue label, never a ring around the whole row. */
.post-poll { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.post-poll__q { font-size: 14.5px; font-weight: 800; color: var(--fg-heading-2); }
.post-poll__opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 14px; border: 0; border-radius: var(--radius-card-lg); background: var(--info-bg); font-family: var(--font-family); font-size: 13.5px; font-weight: 600; color: var(--fg-heading-2); cursor: pointer; overflow: hidden; text-align: left; transition: filter var(--dur-fast) var(--ease-out); }
.post-poll__opt:hover:not(:disabled) { filter: brightness(.97); }
.post-poll__fill { position: absolute; inset: 0; width: 0; background: var(--brand-green-mint); transition: width var(--dur-base) var(--ease-out); }
.post-poll__opt--lead .post-poll__fill::after { content: ''; position: absolute; top: 50%; right: 0; width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--brand-green-neon); box-shadow: 0 0 0 3px var(--bg-surface); transform: translate(50%, -50%); }
.post-poll__opt > span { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.post-poll__opt > span:last-child { font-weight: 800; font-variant-numeric: tabular-nums; }
.post-poll__opt svg { width: 15px; height: 15px; color: var(--brand-blue); flex: none; }
.post-poll__opt[aria-pressed="true"] > span:first-of-type { font-weight: 800; color: var(--brand-blue); }
.post-poll__opt:disabled { cursor: default; }
.post-poll__opt:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .post-poll__fill { transition: none; } }
.post-poll__foot { font-size: 12.5px; color: var(--fg-muted); }

/* Action bar — react / comment / share / more (44px targets) */
.post__acts { display: flex; align-items: center; gap: 4px; margin-top: 14px; flex-wrap: wrap; }
.pact { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--radius-bar); background: transparent; font-family: var(--font-family); font-size: 13px; font-weight: 700; color: var(--fg-secondary); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.pact svg { width: 17px; height: 17px; }
.pact:hover { background: var(--bg-subtle); color: var(--fg-heading-2); }
.pact[aria-pressed="true"] { color: var(--brand-blue); background: var(--info-bg); }
.pact:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.pact--end { margin-left: auto; }

/* More menu — small popover card */
.post-menu { position: relative; }
.post-menu__list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 180px; background: var(--bg-surface); border: 1px solid transparent; border-radius: var(--radius-card-lg); box-shadow: var(--shadow-property-hover); padding: 6px; display: flex; flex-direction: column; }
.post-menu__item { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; font-family: var(--font-family); font-size: 13.5px; font-weight: 700; color: var(--fg-body); cursor: pointer; text-align: left; }
.post-menu__item svg { width: 16px; height: 16px; color: var(--fg-secondary); }
.post-menu__item:hover { background: var(--bg-subtle); }
.post-menu__item--danger { color: var(--danger-fg); }
.post-menu__item--danger svg { color: var(--danger-fg); }

/* Comments — thread under the action bar; replies indent one level */
.cmt-wrap { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 12px; }
.cmt { display: flex; gap: 10px; }
.cmt--reply { margin-left: 40px; }
.cmt__main { min-width: 0; flex: 1; }
.cmt__bubble { background: var(--bg-subtle); border-radius: var(--radius-card-lg); padding: 10px 14px; }
.cmt__top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cmt__name { font-size: 13px; font-weight: 800; color: var(--fg-heading-2); text-decoration: none; }
a.cmt__name:hover { color: var(--brand-blue); }
.cmt__time { font-size: 11.5px; color: var(--fg-muted); }
.cmt__body { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--fg-body); overflow-wrap: break-word; }
.cmt__acts { display: flex; align-items: center; gap: 2px; margin-top: 2px; flex-wrap: wrap; }
.cmt__acts .pact { min-height: 36px; padding: 0 9px; font-size: 12px; }
.cmt__acts .pact svg { width: 14px; height: 14px; }

/* Composer — create a post (card frame; hub + circle pages reuse it) */
.cmp { background: var(--bg-surface); border: 1px solid transparent; border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property); padding: 20px 24px; }
.cmp__head { display: flex; gap: 12px; align-items: flex-start; }
.cmp__main { flex: 1; min-width: 0; }
.cmp__types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cmp__types .fchip { padding: 7px 14px; font-size: 13px; }
.cmp textarea.input { width: 100%; min-height: 88px; resize: vertical; line-height: 1.55; }
.cmp__imgs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.cmp__thumb { position: relative; width: 92px; height: 92px; border-radius: var(--radius-card-lg); overflow: hidden; background: var(--bg-hover); }
.cmp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp__thumb-rm { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--bg-surface); color: var(--fg-heading-2); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-property); }
.cmp__thumb-rm svg { width: 13px; height: 13px; }
.cmp__poll { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--bg-subtle); border-radius: var(--radius-card-lg); padding: 14px 16px; }
.cmp__poll .input { background: var(--bg-surface); }
.cmp__poll-row { display: flex; gap: 8px; align-items: center; }
.cmp__poll-row .input { flex: 1; }
.cmp__warn { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; background: var(--warning-bg); color: var(--warning-fg); border-radius: var(--radius-card-lg); padding: 12px 14px; font-size: 13px; font-weight: 600; line-height: 1.5; }
.cmp__warn svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.cmp__bar { display: flex; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.cmp__bar .btn { margin-left: auto; }
.cmp-tool { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-bar); background: transparent; color: var(--fg-secondary); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.cmp-tool svg { width: 19px; height: 19px; }
.cmp-tool:hover { background: var(--bg-subtle); color: var(--fg-heading-2); }
.cmp-tool[aria-pressed="true"] { color: var(--brand-blue); background: var(--info-bg); }
.cmp-tool:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
/* Send (post) — icon-only primary button; the send glyph inherits the primary
   button's mint text colour via currentColor. */
.cmp__send { width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-bar); }
.cmp__send svg { width: 20px; height: 20px; }
.cmp__count { font-size: 12px; font-weight: 700; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.cmp__count--over { color: var(--danger-fg); }
.cmp__hint { font-size: 12px; color: var(--fg-muted); flex-basis: 100%; }
.cmp__sched { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--fg-secondary); }
.cmp__sched .input { width: auto; }

/* Privacy / state chips for circles + AMAs */
.cprivacy { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; border-radius: var(--radius-pill); padding: 3px 10px; white-space: nowrap; }
.cprivacy svg { width: 12px; height: 12px; }
.cprivacy--public { background: var(--success-bg); color: var(--success-fg); }
.cprivacy--private { background: var(--neutral-bg); color: var(--neutral-fg); }
.cprivacy--gated { background: var(--warning-bg); color: var(--warning-fg); }

/* Circle card — emoji tile + facts; the title links, CTAs sit in the foot */
.ccard { background: var(--bg-surface); border: 1px solid transparent; border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property); padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.ccard__top { display: flex; align-items: flex-start; gap: 14px; }
.ccard__emoji { width: 52px; height: 52px; border-radius: var(--radius-card-lg); background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; font-size: 26px; flex: none; }
.ccard__t { font-size: 16px; font-weight: 800; color: var(--fg-heading-2); text-decoration: none; }
a.ccard__t:hover { color: var(--brand-blue); }
.ccard__cat { margin-top: 3px; font-size: 12.5px; color: var(--fg-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ccard__s { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--fg-body); }
.ccard__meta { font-size: 12.5px; color: var(--fg-muted); font-weight: 600; }
/* Card foot — its own zone: hairline on top, note left, CTA pinned right
   (a floating bottom-left button read as lost; the anchored foot matches
   the dialog/settings foot grammar). */
.ccard__foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-soft); flex-wrap: wrap; }
.ccard__foot > :last-child { margin-left: auto; }
.ccard__note { font-size: 12px; color: var(--fg-muted); }

/* AMA state chips — live gets the one pulsing dot (reduced-motion safe) */
.amastate { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; border-radius: var(--radius-pill); padding: 3px 10px; white-space: nowrap; }
.amastate--live { background: var(--danger-bg); color: var(--danger-fg); }
.amastate--live i { width: 7px; height: 7px; border-radius: 50%; background: var(--danger-fg); animation: amaPulse 3.8s ease-in-out infinite; }
.amastate--questions { background: var(--info-bg); color: var(--info-fg); }
.amastate--upcoming { background: var(--neutral-bg); color: var(--neutral-fg); }
.amastate--closed { background: var(--success-bg); color: var(--success-fg); }
.amastate--archived { background: var(--neutral-bg); color: var(--neutral-fg); }
@keyframes amaPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .amastate--live i { animation: none; } }

/* AMA card — session row: state + title + host + facts + CTA */
.amac { background: var(--bg-surface); border: 1px solid transparent; border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property); padding: 20px 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
/* The whole card navigates (card grammar: lift only when the card IS the
   link) — the state badge announces what opens, the chevron is the one
   quiet affordance instead of four different CTA labels. */
.amac--link { text-decoration: none; color: inherit; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.amac--link:hover { transform: translateY(-6px); box-shadow: var(--shadow-property-hover); }
.amac--link:hover .amac__t { color: var(--brand-blue); }
.amac--link:active { transform: translateY(-2px); }
.amac--link:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.amac__go { flex: none; width: 34px; height: 34px; border-radius: var(--radius-pill); background: var(--info-bg); color: var(--brand-blue); display: inline-flex; align-items: center; justify-content: center; }
.amac__go svg { width: 16px; height: 16px; transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) {
  .amac--link { transition: none; }
  .amac--link:hover, .amac--link:active { transform: none; }
}
.amac__media { width: 132px; height: 94px; border-radius: var(--radius-card-lg); overflow: hidden; flex: none; background: var(--bg-hover); display: block; align-self: flex-start; }
.amac__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.amac__main { flex: 1; min-width: 240px; }
.amac__quiet { color: var(--fg-muted); font-weight: 600; }
@media (max-width: 640px) { .amac__media { width: 100%; height: 140px; align-self: stretch; } }
.amac__t { margin: 8px 0 0; font-size: 16.5px; font-weight: 800; color: var(--fg-heading-2); }
.amac__t a { color: inherit; text-decoration: none; }
.amac__t a:hover { color: var(--brand-blue); }
.amac__s { margin: 5px 0 0; font-size: 13px; color: var(--fg-muted); line-height: 1.5; }
.amac__facts { display: flex; align-items: center; gap: 6px 14px; margin-top: 9px; font-size: 12.5px; font-weight: 600; color: var(--fg-secondary); flex-wrap: wrap; }
.amac__facts svg { width: 14px; height: 14px; color: var(--brand-blue); }
.amac__facts span { display: inline-flex; align-items: center; gap: 6px; }

/* AMA question row — upvote rail + body + answer tile */
.amaq { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--border-soft); }
.amaq:first-child { border-top: 0; }
.amaq__vote { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 48px; }
.amaq__vote .pact { flex-direction: column; gap: 2px; padding: 6px 10px; min-height: 52px; }
.amaq__main { flex: 1; min-width: 0; }
.amaq__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-muted); flex-wrap: wrap; }
.amaq__body { margin: 5px 0 0; font-size: 14.5px; font-weight: 600; line-height: 1.55; color: var(--fg-heading-2); }
.amaq__answer { margin-top: 10px; background: var(--info-bg); border-radius: var(--radius-card-lg); padding: 12px 15px; font-size: 13.5px; line-height: 1.6; color: var(--fg-body); }
.amaq__answer b { display: flex; align-items: center; gap: 7px; color: var(--brand-blue); font-size: 12px; margin-bottom: 4px; }
.amaq__answer svg { width: 14px; height: 14px; }

/* Member profile — banner band + identity row + stat strip */
.pfcard { background: var(--bg-surface); border: 1px solid transparent; border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property); overflow: hidden; }
.pfban { position: relative; height: 200px; background: linear-gradient(120deg, var(--brand-dark-blue), var(--brand-blue)); overflow: hidden; }
.pfban img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pfhead { display: flex; align-items: flex-start; gap: 18px; padding: 0 24px 20px; flex-wrap: wrap; }
/* Avatar overlaps the banner. .pfban is position:relative (for the upload
   label) so it paints above non-positioned siblings — the avatar must be
   positioned with a z-index or the banner clips its pulled-up top edge. */
.pfhead .cmava--lg { position: relative; z-index: 1; margin-top: -36px; box-shadow: 0 0 0 4px var(--bg-surface); }
.pfhead__main { flex: 1; min-width: 200px; padding-top: 14px; }
.pfhead__name { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--fg-heading-2); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pfhead__sub { margin: 3px 0 0; font-size: 13px; color: var(--fg-muted); }
.pfhead__bio { margin: 9px 0 0; font-size: 14px; line-height: 1.55; color: var(--fg-body); max-width: 560px; }
.pfhead__acts { display: flex; align-items: center; gap: 10px; padding-top: 18px; }
.pfstats { display: flex; gap: 6px 26px; padding: 14px 24px 18px; border-top: 1px solid var(--border-soft); flex-wrap: wrap; }
.pfstat { font-size: 13px; color: var(--fg-muted); font-weight: 600; }
.pfstat b { color: var(--fg-heading-2); font-weight: 800; margin-right: 5px; font-variant-numeric: tabular-nums; }

/* Profile media grid + activity rows */
.pfmedia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pfmedia .post__img img { height: 160px; }
@media (max-width: 640px) { .pfmedia { grid-template-columns: repeat(2, 1fr); } }
.actrow { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--border-soft); align-items: flex-start; }
.actrow:first-child { border-top: 0; }
.actrow__ic { width: 34px; height: 34px; border-radius: 10px; background: var(--bg-subtle); color: var(--brand-blue); display: flex; align-items: center; justify-content: center; flex: none; }
.actrow__ic svg { width: 16px; height: 16px; }
.actrow__main { min-width: 0; flex: 1; font-size: 13.5px; color: var(--fg-body); line-height: 1.5; }
.actrow__main a { color: var(--fg-heading-2); font-weight: 700; text-decoration: none; }
.actrow__main a:hover { color: var(--brand-blue); }
.actrow__time { font-size: 12px; color: var(--fg-muted); white-space: nowrap; }

/* Follower / following rows */
.frow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border-soft); }
.frow:first-child { border-top: 0; }
.frow__main { flex: 1; min-width: 0; }
.frow__name { font-size: 14px; font-weight: 800; color: var(--fg-heading-2); text-decoration: none; }
a.frow__name:hover { color: var(--brand-blue); }
.frow__sub { font-size: 12.5px; color: var(--fg-muted); margin-top: 1px; }

@media (max-width: 640px) {
  .post, .cmp, .ccard, .amac { padding: 16px 18px; }
  .cmt--reply { margin-left: 22px; }
  .post__imgs { grid-template-columns: 1fr; }
  .post__img img { height: 180px; }
}

/* ── Community stage 3 — direct messages + challenges (shared) ──────────
   JSX: messages-app.jsx / challenges-app.jsx compose these; the page grids
   live in messages.css / challenges.css (Layer 4). ── */

/* DM thread row — avatar, name + last line, time + unread count */
.dmrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: var(--radius-card-lg); background: transparent; font-family: var(--font-family); text-align: left; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.dmrow:hover { background: var(--bg-subtle); }
.dmrow[aria-current="true"] { background: var(--info-bg); }
.dmrow:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.dmrow__main { flex: 1; min-width: 0; }
.dmrow__t { display: block; font-size: 14px; font-weight: 800; color: var(--fg-heading-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmrow__s { display: block; font-size: 12.5px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.dmrow__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.dmrow__time { font-size: 11.5px; color: var(--fg-muted); }
.dmrow__n { min-width: 20px; height: 20px; border-radius: var(--radius-pill); background: var(--brand-blue); color: var(--brand-green-mint); font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 6px; }

/* Chat bubbles — theirs left on the quiet surface, yours right on brand */
.dmmsg { display: flex; }
.dmmsg__bubble { max-width: 78%; padding: 10px 14px; border-radius: var(--radius-card-lg); background: var(--bg-subtle); font-size: 14px; line-height: 1.5; color: var(--fg-body); overflow-wrap: break-word; }
.dmmsg__time { display: block; font-size: 11px; color: var(--fg-muted); margin-top: 3px; }
.dmmsg--own { justify-content: flex-end; }
.dmmsg--own .dmmsg__bubble { background: var(--brand-blue); color: #fff; }
.dmmsg--own .dmmsg__time { color: rgba(255,255,255,.72); }
.dmmsg__bubble--typing { color: var(--fg-muted); font-size: 13px; } /* quiet, no motion by design */

/* Composer bar under the thread */
.dmbar { display: flex; gap: 10px; align-items: flex-end; }
.dmbar textarea.input { min-height: 48px; }

/* Mention/tag autocomplete (composer + comment fields, JSX: AcArea) */
.acbox { position: relative; display: block; flex: 1; min-width: 0; }
.acbox__list { position: absolute; left: 0; top: calc(100% + 4px); z-index: 60; min-width: 230px; background: var(--bg-surface); border: 1px solid transparent; border-radius: var(--radius-card-lg); box-shadow: var(--shadow-property-hover); padding: 6px; display: flex; flex-direction: column; }
.acbox__item { display: flex; align-items: baseline; gap: 8px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; font-family: var(--font-family); font-size: 13.5px; cursor: pointer; text-align: left; }
.acbox__item b { font-weight: 700; color: var(--fg-heading-2); }
.acbox__item i { font-style: normal; font-size: 12px; color: var(--fg-muted); }
.acbox__item.on, .acbox__item:hover { background: var(--info-bg); }

/* ── Community P1 (review roadmap 2026-06-12) — avatar accents/photos,
   circle covers, notification bell, search overlay, pinned posts, link
   previews. JSX: shell-sections (bell), community-sections (rest). ── */

/* Avatar accents (deterministic per member) + portrait photos */
.cmava--c1 { background: var(--brand-dark-blue); }
.cmava--c2 { background: var(--brand-green-mint); color: var(--brand-dark-blue); }
.cmava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* Circle covers — card tile + page banner (space-cover pattern) */
.ccard__cover { width: 52px; height: 52px; border-radius: var(--radius-card-lg); overflow: hidden; flex: none; background: var(--bg-hover); }
.ccard__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.circ__cover { height: 300px; border-radius: var(--radius-card-xl); overflow: hidden; margin: 6px 0 16px; background: var(--bg-hover); box-shadow: var(--shadow-property); }
.circ__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Notification bell — live dropdown wherever POOOL_NOTIF is loaded */
.nbell { position: relative; }
.nbell__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 90; width: 340px; max-width: 86vw; background: var(--bg-surface); border: 1px solid transparent; border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property-hover); padding: 8px; }
.nbell__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 6px; }
.nbell__head b { font-size: 14px; font-weight: 800; color: var(--fg-heading-2); }
.nbell__mark { border: 0; background: transparent; color: var(--brand-blue); font-family: var(--font-family); font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.nbell__mark:hover { background: var(--info-bg); }
.nbell__item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: var(--radius-card-lg); text-decoration: none; }
.nbell__item:hover { background: var(--bg-subtle); }
.nbell__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-blue); margin-top: 6px; flex: none; }
.nbell__item.read .nbell__dot { background: var(--border); }
.nbell__text { font-size: 13px; line-height: 1.45; color: var(--fg-body); }
.nbell__item.read .nbell__text { color: var(--fg-muted); }
.nbell__time { display: block; font-size: 11.5px; color: var(--fg-muted); margin-top: 1px; }
.nbell__foot { display: block; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--fg-secondary); padding: 9px; border-top: 1px solid var(--border-soft); margin-top: 4px; text-decoration: none; }
.nbell__foot:hover { color: var(--brand-blue); }
.nbell__empty { padding: 18px 12px; text-align: center; font-size: 13px; color: var(--fg-muted); }

/* Sidebar sub-item count (unread messages) — sub links flex so the badge
   can sit trailing; text-only sub items are unaffected */
.snav__sub a { display: flex; align-items: center; gap: 8px; }
.snav__n { margin-left: auto; min-width: 19px; height: 19px; border-radius: var(--radius-pill); background: var(--brand-blue); color: var(--brand-green-mint); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }

/* Community search — command-palette overlay (keyboard-first) */
.csearch { position: fixed; inset: 0; z-index: 200; background: rgba(8,10,22,.4); display: flex; align-items: flex-start; justify-content: center; padding: 9vh 16px 16px; }
.csearch__panel { width: 640px; max-width: 100%; background: var(--bg-surface); border: 1px solid transparent; border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property-hover); overflow: hidden; }
.csearch__bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); }
.csearch__bar svg { width: 18px; height: 18px; color: var(--fg-muted); flex: none; }
.csearch__bar input { flex: 1; border: 0; outline: 0; font-family: var(--font-family); font-size: 16px; color: var(--fg-heading-2); background: transparent; }
.csearch__list { max-height: 56vh; overflow-y: auto; padding: 8px; }
.csearch__group { padding: 8px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-muted); }
.csearch__item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--radius-card-lg); background: transparent; font-family: var(--font-family); text-align: left; cursor: pointer; text-decoration: none; }
.csearch__item.on, .csearch__item:hover { background: var(--info-bg); }
.csearch__main { min-width: 0; }
.csearch__t { font-size: 13.5px; font-weight: 700; color: var(--fg-heading-2); }
.csearch__s { display: block; font-size: 12px; color: var(--fg-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csearch__hint { padding: 11px 18px; font-size: 12px; color: var(--fg-muted); border-top: 1px solid var(--border-soft); display: flex; gap: 16px; flex-wrap: wrap; }
.csearch__empty { padding: 22px; text-align: center; font-size: 13.5px; color: var(--fg-muted); }

/* Link preview — derived from the first URL in a post body */
.lprev { display: flex; align-items: center; gap: 12px; margin-top: 12px; background: var(--bg-subtle); border-radius: var(--radius-card-lg); padding: 12px 14px; text-decoration: none; }
.lprev:hover { background: var(--bg-hover); }
.lprev__ic { width: 36px; height: 36px; border-radius: 10px; background: var(--bg-surface); color: var(--brand-blue); display: flex; align-items: center; justify-content: center; flex: none; box-shadow: var(--shadow-property); }
.lprev__ic svg { width: 17px; height: 17px; }
.lprev__main { min-width: 0; }
.lprev__t { font-size: 13px; font-weight: 800; color: var(--fg-heading-2); }
.lprev__s { display: block; font-size: 12px; color: var(--fg-muted); margin-top: 1px; overflow-wrap: anywhere; }

/* Challenge card — type/freq chips, progress meter, reward line, CTA */
.chal { background: var(--bg-surface); border: 1px solid transparent; border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property); padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.chal__chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chal__t { margin: 0; font-size: 16px; font-weight: 800; color: var(--fg-heading-2); }
.chal__s { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--fg-body); }
.chal__progress { display: flex; align-items: center; gap: 12px; }
.chal__progress .meter { flex: 1; }
.chal__count { font-size: 12.5px; font-weight: 700; color: var(--fg-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chal__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.chal__reward { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--fg-secondary); }
.chal__reward svg { width: 15px; height: 15px; color: var(--brand-blue); }

/* ── Rewards, money model (decision 2026-06-12) — tier cards, affiliate
   marketing tiles, refer steps. JSX: rewards-app.jsx; data: rewards-data.js
   (POOOL_AFFILIATE — tier/balances/KPIs all derived). ── */

/* Tier card — one full-width card per tier, current tier labelled with badges */
.rwt { background: var(--bg-surface); border: 1px solid transparent; border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property); padding: 22px 26px; }
.rwt--current { box-shadow: var(--shadow-property); }
.rwt__head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
/* Name+badges block grows so the commission rate stays pinned top-right
   instead of wrapping to a new line on the current tier (two badges) or at
   narrower card widths. */
.rwt__head > div:not(.rwt__per) { flex: 1 1 0; min-width: 0; }
.rwt__tile { width: 52px; height: 52px; border-radius: var(--radius-card-lg); background: var(--brand-blue); color: var(--brand-green-mint); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; flex: none; }
.rwt__name { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--fg-heading-2); margin: 0; }
.rwt__chips { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.rwt__per { margin-left: auto; text-align: right; }
.rwt__per b { display: block; font-size: 24px; font-weight: 800; color: var(--brand-blue); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.rwt__per i { display: block; font-style: normal; font-size: 12px; color: var(--fg-muted); margin-top: 1px; }
.rwt__body { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.rwt__k { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
.rwt__blurb { font-size: 13.5px; line-height: 1.6; color: var(--fg-body); margin: 8px 0 10px; }
.rwt__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.rwt__list li { display: flex; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--fg-heading-2); align-items: flex-start; }
.rwt__list svg { width: 15px; height: 15px; color: var(--brand-blue); flex: none; margin-top: 2px; }
.rwt__list li.dim { color: var(--fg-muted); font-weight: 500; }
.rwt__list li.dim svg { color: var(--fg-disabled); }

/* Marketing material tiles — preview + meta + foot ("coming soon" / link) */
.mkt { background: var(--bg-surface); border: 1px solid transparent; border-radius: var(--radius-card-lg); box-shadow: var(--shadow-property); overflow: hidden; display: flex; flex-direction: column; }
.mkt__prev { height: 118px; background: linear-gradient(135deg, var(--brand-dark-blue), var(--brand-blue)); display: flex; align-items: flex-end; padding: 12px; }
.mkt__prev--light { background: var(--bg-subtle); align-items: center; justify-content: center; }
.mkt__prev--light img { max-width: 68%; max-height: 58%; }
.mkt__prev--video { align-items: center; justify-content: center; }
.mkt__play { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.25); }
.mkt__tag { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: rgba(8,10,22,.45); border-radius: var(--radius-pill); padding: 3px 9px; }
.mkt__body { padding: 12px 16px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.mkt__t { font-size: 13.5px; font-weight: 800; color: var(--fg-heading-2); }
.mkt__s { font-size: 12px; color: var(--fg-muted); }
.mkt__foot { padding: 0 16px 14px; }
.mkt__soon { display: inline-flex; align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--bg-hover); color: var(--fg-disabled); border-radius: var(--radius-pill); padding: 4px 10px; }
.swatch { display: flex; align-items: center; gap: 10px; background: var(--bg-subtle); border-radius: var(--radius-card-lg); padding: 12px 14px; }
.swatch i { width: 26px; height: 26px; border-radius: 50%; flex: none; }
.swatch b { display: block; font-size: 13px; font-weight: 800; color: var(--fg-heading-2); }
.swatch span { font-size: 11.5px; color: var(--fg-muted); font-family: var(--font-mono); }

/* Copy-and-paste templates (emails / messages) */
.mkt-mail { background: var(--bg-subtle); border-radius: var(--radius-card-lg); padding: 14px 16px; }
.mkt-mail__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mkt-mail__t { font-size: 13.5px; font-weight: 800; color: var(--fg-heading-2); }
.mkt-mail pre { margin: 0; font-family: var(--font-family); font-size: 13px; line-height: 1.6; color: var(--fg-body); white-space: pre-wrap; }

/* Refer-and-earn steps strip */
.afsteps { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; margin: 10px 0 4px; }
.afsteps span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--fg-heading-2); }
.afsteps i { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-blue); color: var(--brand-green-mint); display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; font-style: normal; flex: none; }

/* ════════════════════════════════════════════════════════════════════════
   Blog cards — BlogCard/BlogChips (blog-sections.jsx), shared by the blog
   list (grid + featured lead) and the article page's related strip. Same
   card language as the marketplace: surface, radius-card-xl, shadow lift
   (the whole card is the link), transparent border for forced colors.
   ════════════════════════════════════════════════════════════════════════ */
.bpost { display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid transparent; border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property); overflow: hidden; text-decoration: none; color: inherit; transition: transform .3s, box-shadow .3s; }
.bpost:hover { transform: translateY(-6px); box-shadow: var(--shadow-property-hover); }
.bpost:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.bpost:active { transform: translateY(-2px); }
.bpost__media { display: block; aspect-ratio: 16 / 9; background: var(--bg-hover); }
.bpost__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bpost__body { display: flex; flex-direction: column; gap: 9px; padding: 18px 20px 20px; flex: 1; }
.bpost__top { display: flex; align-items: center; gap: 8px; }
.bpost__cat { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-blue); background: var(--info-bg); border-radius: var(--radius-pill); padding: 4px 10px; }
.bpost__t { font-size: 17.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: var(--fg-heading-2); }
.bpost__x { font-size: 13.5px; line-height: 1.55; color: var(--fg-secondary); }
.bpost__meta { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font-size: 12.5px; color: var(--fg-muted); }
.bpost__meta img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; }
.bpost__meta b { color: var(--fg-heading-2); font-weight: 600; }
/* Featured lead card: media beside text, bigger type */
.bpost--lead { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.bpost--lead .bpost__media { aspect-ratio: auto; min-height: 280px; height: 100%; }
.bpost--lead .bpost__body { padding: 26px 28px; gap: 12px; justify-content: center; }
.bpost--lead .bpost__t { font-size: 24px; letter-spacing: -.02em; }
.bpost--lead .bpost__x { font-size: 14.5px; }
.bpost--lead .bpost__meta { margin-top: 6px; }
@media (max-width: 880px) {
  .bpost--lead { grid-template-columns: 1fr; }
  .bpost--lead .bpost__media { aspect-ratio: 16 / 9; min-height: 0; height: auto; }
  .bpost--lead .bpost__body { padding: 20px 22px 22px; }
  .bpost--lead .bpost__t { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .bpost { transition: none; } }

/* Blog brand band — BlogSubscribe/BlogCta (blog-sections): newsletter +
   conversion strip on the blog pages. Same gradient family as .sband. */
.bband { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px 28px; align-items: center; background: radial-gradient(120% 160% at 12% 0%, #0A0AE0, var(--brand-blue) 52%, #0000C2); border: 1px solid transparent; border-radius: var(--radius-card-xl); box-shadow: 0 4px 20px rgba(0,0,255,.16); padding: 30px 34px; color: #fff; overflow: hidden; }
.bband__eyebrow { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-green-mint); margin-bottom: 8px; }
.bband__t { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: #fff; margin: 0 0 6px; }
.bband__s { font-size: 14px; color: rgba(255,255,255,.82); line-height: 1.55; margin: 0; }
.bband__form { display: flex; gap: 10px; }
.bband__form .input { background: #fff; border-color: transparent; min-width: 0; }
.bband__fine { font-size: 11.5px; color: rgba(255,255,255,.82); margin: 8px 0 0; }
.bband__fine a { color: var(--brand-green-mint); font-weight: 600; text-decoration: none; }
.bband__fine a:hover { text-decoration: underline; }
.bband__ok { font-size: 15px; font-weight: 700; color: var(--brand-green-mint); margin: 0; }
.bband__acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.bband--center { grid-template-columns: 1fr; text-align: center; justify-items: center; }
@media (max-width: 760px) {
  .bband { grid-template-columns: 1fr; padding: 24px 22px; }
  .bband__form { flex-direction: column; }
}

/* Marketing template mock previews — real-looking minis instead of empty
   gradients (photo + brand chip + claim; the tag chip stays). */
.mkt__prev--mock { position: relative; overflow: hidden; padding: 12px; }
.mkt__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mkt__scrim { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(0,0,80,.18) 0%, rgba(0,0,110,.62) 100%); }
.mkt__brandchip { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; background: var(--bg-surface); border-radius: var(--radius-pill); padding: 4px 9px; }
.mkt__brandchip img { height: 11px; display: block; }
.mkt__claim { position: relative; z-index: 1; align-self: flex-end; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; color: #fff; max-width: 85%; }
.mkt__prev--mock .mkt__tag { position: absolute; left: 10px; top: 10px; }

/* Tier rail — all tiers on one track, your position marked (tier tab head) */
.rwt-rail { position: relative; height: 86px; margin: 6px 8px 18px; }
.rwt-rail__bar { position: absolute; left: 0; right: 0; top: 10px; height: 6px; border-radius: var(--radius-pill); background: var(--bg-hover); }
.rwt-rail__bar b { display: block; height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--brand-blue), var(--brand-green-neon)); }
.rwt-rail__stop { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.rwt-rail__stop i { width: 16px; height: 16px; border-radius: 50%; background: var(--bg-surface); border: 3px solid var(--border-strong); margin-top: 5px; }
.rwt-rail__stop.done i { border-color: var(--brand-blue); background: var(--brand-blue); }
.rwt-rail__stop.on i { box-shadow: 0 0 0 4px var(--brand-green-mint); }
.rwt-rail__stop b { font-size: 12.5px; font-weight: 700; color: var(--fg-heading-2); margin-top: 6px; }
.rwt-rail__stop.on b { color: var(--brand-blue); }
.rwt-rail__stop u { text-decoration: none; font-size: 11px; color: var(--fg-muted); }
@media (max-width: 640px) { .rwt-rail__stop u { display: none; } }

/* ════ POOOL loader — "Laola wave + flags" ════════════════════════════════
   The wordmark pops in small→large, then a stadium-style Laola wave travels
   across the letters (cresting at the middle O) while the three O's cross-fade
   through national flags, with a 0→100 counter — echoes the landing flag strip.
   Wave is pure CSS (instant, no library, works with JS off); flags vendored at
   /static/assets/flags/circle/. The SVG viewBox carries top/side headroom so a
   peaking letter never clips (+ overflow:visible as belt-and-suspenders).
   `.poool-loader` carries the layout (reused inline in the styleguide);
   `#poool-loader` adds the fixed full-screen overlay + self-removing fade.
   Critical light cover is also inlined in head.html so it paints before this. */
.poool-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: #FBFBFC; padding: 24px; box-sizing: border-box; }
/* delay-show: the overlay only appears when a load is slow (JS adds .poool-loading
   after a short delay if the page has not hydrated yet); fast loads never show it. */
#poool-loader { position: fixed; inset: 0; z-index: 9999; opacity: 0; visibility: hidden; pointer-events: none; }
html.poool-loading #poool-loader { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s ease; }
html.poool-ready #poool-loader { opacity: 0 !important; visibility: hidden !important; pointer-events: none; transition: opacity .45s ease, visibility 0s linear .45s; }
.poool-loader .pl-mark { display: block; width: min(78vw, 360px); height: auto; overflow: visible; }
.poool-loader .pl-stage { width: min(78vw, 360px); max-width: 100%; }
.poool-loader .pl-flag { transition: opacity .7s ease; }
.poool-loader .pl-meter { height: 2px; background: #EAECF2; border-radius: 2px; overflow: hidden; }
.poool-loader .pl-meter b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #001DCA, #0000FF); }
.poool-loader .pl-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; }
.poool-loader .pl-cap { font-size: 11.5px; color: #667085; letter-spacing: 1.2px; text-transform: uppercase; }
.poool-loader .pl-count { font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 500; color: #0A1E6E; }
/* Screen-reader-only live region: announces "Loading…" only when the veil is
   actually shown (slow load); the visuals above are aria-hidden (decorative). */
.poool-loader .pl-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.poool-loader .lw-l { transform-box: fill-box; transform-origin: 50% 100%; }
/* The overlay's Laola animation is paused until it actually shows, so it costs
   no CPU on the fast-load path (the overlay never appears) and replays its intro
   fresh when revealed. The standalone .poool-loader styleguide specimen keeps
   animating (the pause is scoped to the #poool-loader overlay). */
#poool-loader .lw-l { animation-play-state: paused; }
html.poool-loading #poool-loader .lw-l { animation-play-state: running; }
@supports (transform-box: fill-box) {
  .poool-loader .lw-l { animation: plLwIn .55s cubic-bezier(.34, 1.56, .64, 1) both, plLwWave 3s ease-in-out infinite; }
  .poool-loader .lw-l1 { --plAmp: 1.16; animation-delay: 0s, 1s; }
  .poool-loader .lw-l2 { --plAmp: 1.30; animation-delay: .13s, 1.12s; }
  .poool-loader .lw-l3 { --plAmp: 1.42; animation-delay: .26s, 1.24s; }
  .poool-loader .lw-l4 { --plAmp: 1.30; animation-delay: .39s, 1.36s; }
  .poool-loader .lw-l5 { --plAmp: 1.16; animation-delay: .52s, 1.48s; }
}
@keyframes plLwIn { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes plLwWave { 0% { transform: scale(1); } 8% { transform: scale(var(--plAmp, 1.3)); } 22%, 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .poool-loader .lw-l { animation: none !important; }
  #poool-loader { transition: opacity .2s ease; }
}
@media (max-width: 480px) { .poool-loader .pl-cap { letter-spacing: .8px; font-size: 11px; } }