/* BARDAX Capital design system.
   Rules, taken from the fintech references:
   1. The balance is the hero.            2. Brand color goes behind (forest gradient under the balance).
   3. Four actions, the rest in More.     4. One card per group, no divider lines inside it.
   5. Show who: letter badges and white amounts; green and red only for direction.
   Type: Helvetica Neue, scale 12 / 14 / 16 / 20 / 24 / 32 / 36 / 44. Spacing: multiples of 4.
   Radius: 8 / 16 / 24 / pill. Soft shadows. Dark by default; light is the reader's choice. */
:root {
  color-scheme: dark;
  /* brand */
  --ink: #0F1F17;
  --forest: #1E3A2E;
  --moss: #3E5A3F;
  --sage: #6B7F67;
  --bone: #C7CBB8;
  --olive: #3D4337;
  --hero-grad: linear-gradient(180deg, #2C4F3C 0%, #1E3A2E 30%, #11241A 60%, #000000 100%);
  --hero-text: #FFFFFF;
  --hero-soft: rgba(255, 255, 255, 0.72);
  --hero-faint: rgba(255, 255, 255, 0.5);
  --hero-fill: rgba(255, 255, 255, 0.14);
  --hero-fill-2: rgba(255, 255, 255, 0.22);
  --hero-up: #8FE3B1;
  --hero-down: #FFA690;
  /* canvas */
  --bg: #000000;
  --bg-2: #0E0E0E;
  --surface: #1A1A1A;
  --surface-2: #262626;
  --surface-3: #333333;
  --line: #242424;
  --line-2: #363636;
  --card-ring: transparent;
  --card-border: transparent;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  --card-shadow: none;
  --card-shadow-hover: none;
  --bar-bg: rgba(36, 36, 36, 0.94);
  /* ink */
  --text: #FFFFFF;
  --text-2: #C4C4C4;
  --muted: #A6A6A6;
  --faint: #8A8A8A;
  --inverse: #FFFFFF;
  --on-inverse: #0F1F17;
  /* direction only */
  --up: #5CC488;
  --down: #F2735A;
  --up-soft: rgba(92, 196, 136, 0.14);
  --down-soft: rgba(242, 115, 90, 0.15);
  /* action: the brand, never a new hue */
  --accent: #C7CBB8;
  --accent-line: #C7CBB8;
  --accent-fill: #C7CBB8;
  --accent-soft: rgba(199, 203, 184, 0.12);
  --on-accent: #0F1F17;
  --grad: #C7CBB8;
  --glow: 0 0 0 4px rgba(199, 203, 184, 0.24);
  --grad-card: linear-gradient(135deg, #0F1F17 0%, #1E3A2E 60%, #3E5A3F 100%);
  --grad-tile: linear-gradient(135deg, #1E3A2E, #3E5A3F);
  --on-grad: #F4F5EE;
  --on-grad-soft: rgba(244, 245, 238, 0.78);
  --mark-bg: #FFFFFF;
  --mark-fg: #0F1F17;
  --mark-ring: transparent;
  /* asset classes */
  --k-stocks: #C7CBB8;
  --k-bonds: #6B7F67;
  --k-btc: #D6A94A;
  --k-cash: #EDEFE4;
  --k-empty: #333333;
  --on-k-stocks: #0F1F17;
  --on-k-bonds: #FFFFFF;
  --on-k-btc: #0F1F17;
  --on-k-cash: #0F1F17;
  /* state */
  --pos-bg: rgba(92, 196, 136, 0.14);
  --pos-text: #7CD3A0;
  --neg-bg: rgba(242, 115, 90, 0.15);
  --neg-text: #F59A86;
  --neg-tint: rgba(242, 115, 90, 0.05);
  --neg-line: rgba(242, 115, 90, 0.22);
  --warn-bg: rgba(214, 169, 74, 0.16);
  --warn-text: #E8CB8A;
  --chip-bg: #292929;
  --chip-text: #C4C4C4;
  /* older data tokens, used by the plan builder */
  --chart-line: #5CC488;
  --chart-area: #5CC488;
  --chart-put: #6B7F67;
  --chart-grid: #202622;
  --c-us: #C7CBB8;
  --c-us-2: #6B7F67;
  --c-intl: #8FA886;
  --c-bond: #6B7F67;
  --c-btc: #D6A94A;
  --c-cash: #8FA886;
  --ink-us: #0F1F17;
  --ink-pick: #0F1F17;
  --ink-intl: #0F1F17;
  --ink-bond: #FFFFFF;
  --ink-btc: #0F1F17;
  --ink-cash: #0F1F17;
  --bar-put: #6B7F67;
  --bar-val-top: #C7CBB8;
  --bar-val-bot: #8FA886;
  --track: #333333;
  --track-accent: rgba(199, 203, 184, 0.16);
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.7);
  --scrim: rgba(0, 0, 0, 0.66);
  --featured-ring: linear-gradient(140deg, #C7CBB8, #1E3A2E);
  --featured-bg: #1A1A1A;
  /* type */
  /* Manrope is loaded from Google Fonts so every phone (iPhone and Android) shows the same letters. */
  --font: 'Manrope', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --display: var(--font);
  --brand-font: 'Jost', 'Futura', 'Century Gothic', ui-sans-serif, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --t-xs: 12px;
  --t-sm: 14px;
  --t-md: 16px;
  --t-lg: 20px;
  --t-xl: 24px;
  --t-2xl: 32px;
  --t-3xl: 36px;
  --t-hero: 44px;
  /* shape */
  --r-xs: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --radius: 24px;
  --radius-sm: 16px;
}
:root[data-bx-theme="light"] {
  color-scheme: light;
  --hero-grad: linear-gradient(170deg, #2C4F3C 0%, #1E3A2E 52%, #16301F 100%);
  --bg: #F2F3EE;
  --bg-2: #ECEDE7;
  --surface: #FFFFFF;
  --surface-2: #F2F3EE;
  --surface-3: #E6E8E1;
  --line: #E8EAE3;
  --line-2: #D8DBD2;
  --shadow-sm: 0 1px 2px rgba(15, 31, 23, 0.06);
  --shadow-md: 0 1px 2px rgba(15, 31, 23, 0.04), 0 8px 24px rgba(15, 31, 23, 0.06);
  --shadow-lg: 0 12px 32px rgba(15, 31, 23, 0.14);
  --card-shadow: var(--shadow-md);
  --bar-bg: rgba(255, 255, 255, 0.96);
  --text: #0F1F17;
  --text-2: #2C352C;
  --muted: #5B6558;
  --faint: #6D776A;
  --inverse: #0F1F17;
  --on-inverse: #FFFFFF;
  --up: #1D8048;
  --down: #C8432A;
  --up-soft: rgba(29, 128, 72, 0.10);
  --down-soft: rgba(200, 67, 42, 0.10);
  --accent: #1E3A2E;
  --accent-line: #1E3A2E;
  --accent-fill: #1E3A2E;
  --accent-soft: rgba(30, 58, 46, 0.08);
  --on-accent: #FFFFFF;
  --grad: #1E3A2E;
  --glow: 0 0 0 4px rgba(30, 58, 46, 0.18);
  --mark-bg: #0F1F17;
  --mark-fg: #FFFFFF;
  --k-stocks: #1E3A2E;
  --k-bonds: #8FA886;
  --k-btc: #C08A2E;
  --k-cash: #3D4337;
  --k-empty: #E6E8E1;
  --on-k-stocks: #FFFFFF;
  --on-k-bonds: #0F1F17;
  --on-k-btc: #FFFFFF;
  --on-k-cash: #FFFFFF;
  --pos-bg: #EAF3EC;
  --pos-text: #1D7A45;
  --neg-bg: #FBECE8;
  --neg-text: #B23C25;
  --neg-tint: #FDF7F5;
  --neg-line: rgba(178, 60, 37, 0.16);
  --warn-bg: #F6EEDB;
  --warn-text: #6B5214;
  --chip-bg: #F2F3EE;
  --chip-text: #2C352C;
  --chart-line: #1D8048;
  --chart-grid: #E8EAE3;
  --c-us: #1E3A2E;
  --c-intl: #6B7F67;
  --c-bond: #C7CBB8;
  --c-btc: #C08A2E;
  --c-cash: #6B7F67;
  --ink-us: #FFFFFF;
  --ink-pick: #FFFFFF;
  --ink-intl: #FFFFFF;
  --ink-bond: #0F1F17;
  --ink-btc: #FFFFFF;
  --ink-cash: #FFFFFF;
  --bar-put: #C7CBB8;
  --bar-val-top: #3E5A3F;
  --bar-val-bot: #1E3A2E;
  --track: #E3E5DE;
  --track-accent: #E3EBE4;
  --shadow-pop: 0 16px 40px rgba(15, 31, 23, 0.22);
  --scrim: rgba(15, 31, 23, 0.4);
  --featured-ring: linear-gradient(140deg, #3E5A3F, #1E3A2E);
  --featured-bg: #FFFFFF;
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); min-height: 100vh; position: relative; overflow-x: clip;
  font-family: var(--font); font-size: var(--t-md); line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; text-wrap: balance; }
h1 { font-size: var(--t-2xl); letter-spacing: -0.02em; line-height: 1.12; }
h2 { font-size: var(--t-lg); }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num, table { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.display { font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.strong { font-weight: 700; }
.small { font-size: var(--t-sm); }
.tiny { font-size: var(--t-xs); }
.pos, .up { color: var(--up); }
.neg, .down { color: var(--down); }

/* layout: 4px steps */
.wrap {
  max-width: 1168px; margin: 0 auto;
  padding-left: max(16px, min(4vw, 32px), env(safe-area-inset-left, 0px));
  padding-right: max(16px, min(4vw, 32px), env(safe-area-inset-right, 0px));
}
.page { padding-block: 32px 64px; display: flex; flex-direction: column; gap: 24px; }
main.page { min-height: 72vh; }
.row { display: flex; flex-wrap: wrap; gap: 20px; }
.row > * { min-width: 0; }
.stack { display: flex; flex-direction: column; gap: var(--gap, 12px); min-width: 0; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* header: logo, segmented nav in the middle, actions */
.site-header { position: relative; z-index: 5; background: var(--bg); }
.hdr { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; justify-self: start; }
.brand-mark { width: 24px; height: 24px; flex: none; display: grid; place-items: center; color: var(--text); }
.brand-word { display: flex; align-items: baseline; gap: 8px; font-family: var(--brand-font); font-weight: 500; }
.brand-word b { font-weight: 500; font-size: var(--t-md); letter-spacing: 0.32em; margin-right: -0.32em; }
.brand-word span { font-size: 9px; letter-spacing: 0.45em; color: var(--muted); }
.brand-foot { margin-bottom: 16px; width: fit-content; }
.brand-foot .brand-mark, .brand-foot .brand-word b { color: var(--muted); }
.nav { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-2); }
.nav a {
  display: flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px;
  text-decoration: none; color: var(--muted); font-size: var(--t-sm); font-weight: 500; white-space: nowrap;
  transition: background-color 120ms linear, color 120ms linear;
}
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { background: var(--inverse); color: var(--on-inverse); }
.hdr-actions { display: flex; align-items: center; gap: 8px; justify-self: end; }
.nav-btn {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px;
  background: var(--inverse); color: var(--on-inverse); font-weight: 700; font-size: var(--t-sm); text-decoration: none; white-space: nowrap;
}
/* on the home gradient, the header sits on brand color */
.page-home .site-header { background: transparent; color: var(--hero-text); }
.page-home .brand-mark { color: var(--hero-text); }
.page-home .brand-word span { color: var(--hero-soft); }
.page-home .nav { background: var(--hero-fill); }
.page-home .nav a { color: var(--hero-soft); }
.page-home .nav a:hover { color: var(--hero-text); }
.page-home .nav a[aria-current="page"] { background: #FFFFFF; color: #0F1F17; }
.page-home .hdr-actions .icon-btn { color: var(--hero-text); }
.page-home .hdr-actions .icon-btn:hover { background: var(--hero-fill); }
.page-home .nav-btn { background: #FFFFFF; color: #0F1F17; }

/* phone: floating pill tab bar */
.tabbar { display: none; }
@media (max-width: 759px) {
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .hdr { grid-template-columns: 1fr auto; min-height: 60px; }
  .site-header .nav { display: none; }
  .brand-word span { display: none; }
  .tabbar {
    position: fixed; z-index: 20; left: 50%; transform: translateX(-50%);
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: min(calc(100% - 32px), 440px); height: 64px;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; padding: 0 8px;
    border-radius: 999px; background: var(--bar-bg); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 56px;
    text-decoration: none; color: var(--faint); font-size: 11px; font-weight: 500;
  }
  .tabbar a[aria-current="page"] { color: var(--text); font-weight: 700; }
  .tabbar a.tab-center span.pill {
    width: 56px; height: 40px; border-radius: 999px; display: grid; place-items: center;
    background: var(--accent-fill); color: var(--on-accent);
  }
  .tabbar a.tab-center[aria-current="page"] span.pill { box-shadow: 0 0 0 3px var(--bar-bg), 0 0 0 5px var(--accent-fill); }
}

/* cards: soft corners, soft shadows, no dividers inside */
.card, .panel {
  background: var(--surface); border-radius: var(--r-lg); padding: 24px;
  display: flex; flex-direction: column; gap: 16px; box-shadow: var(--card-shadow);
}
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; }
.card h2, .panel h2 { font-size: var(--t-lg); }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 24px; }
.card .card-label, .card-label { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.card-meta { font-size: var(--t-xs); color: var(--muted); text-decoration: none; white-space: nowrap; }
a.card-meta { color: var(--accent); font-weight: 700; font-family: var(--font); font-size: var(--t-sm); }
.tag {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-2); font-size: var(--t-xs); white-space: nowrap;
}
.meta {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px;
  background: var(--chip-bg); color: var(--chip-text); font-size: var(--t-xs); font-weight: 700; white-space: nowrap;
}
.eyebrow { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lead { font-size: var(--t-md); line-height: 1.5; color: var(--text-2); max-width: 60ch; }

/* figures */
.label { font-size: var(--t-sm); color: var(--muted); }
.value-lg { font-size: var(--t-2xl); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.value-md { font-size: var(--t-lg); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stat-end { align-items: flex-end; text-align: right; }
.stat-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.delta {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--r-xs); width: fit-content;
  font-size: var(--t-xs); font-weight: 700; white-space: nowrap;
}
.delta-neg { background: var(--neg-bg); color: var(--neg-text); }
.delta-pos { background: var(--pos-bg); color: var(--pos-text); }
.delta-flat { background: var(--chip-bg); color: var(--chip-text); }
.kv { margin: 0; display: flex; flex-direction: column; gap: 12px; font-size: var(--t-md); }
.kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kv dt { color: var(--muted); display: flex; align-items: center; gap: 8px; min-width: 0; }
.kv dd { margin: 0; font-weight: 500; text-align: right; white-space: nowrap; }
.kv dd .muted { font-weight: 400; margin-left: 8px; }
.sw { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 999px; border: 0;
  font-weight: 700; font-size: var(--t-md); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 120ms linear, opacity 120ms linear, transform 80ms ease-out;
}
.btn:active { transform: scale(var(--press)); }
.btn-primary { background: var(--accent-fill); color: var(--on-accent); }
.btn-primary:hover { opacity: 0.9; }
.btn-primary:focus-visible { box-shadow: var(--glow); }
.btn-light, .btn-inverse { background: var(--inverse); color: var(--on-inverse); }
.btn-dark, .btn-quiet, .btn-secondary { background: var(--surface-2); color: var(--text); }
.btn-dark:hover, .btn-quiet:hover, .btn-secondary:hover { background: var(--surface-3); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--text); background: var(--surface-2); }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-lg { min-height: 52px; padding: 0 28px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 999px; border: 0; flex: none;
  background: transparent; color: var(--text); display: grid; place-items: center; cursor: pointer; font-size: var(--t-lg);
  transition: background-color 120ms linear;
}
.icon-btn:hover { background: var(--surface-2); }
.link-btn { background: none; border: 0; padding: 0; min-height: 32px; color: var(--accent); font-weight: 700; font-size: var(--t-sm); cursor: pointer; text-decoration: none; }
.link-btn:hover { text-decoration: underline; text-underline-offset: 4px; }
.link-btn.quiet { color: var(--muted); }

/* segmented control and chips */
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-2); }
.seg button {
  min-height: 32px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent;
  color: var(--muted); font-size: var(--t-sm); font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background-color 120ms linear, color 120ms linear;
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--inverse); color: var(--on-inverse); font-weight: 700; }
.seg-fill { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0;
  background: var(--surface-2); font-weight: 500; cursor: pointer; transition: background-color 120ms linear, color 120ms linear;
}
.chip:hover { background: var(--surface-3); }
.chip[aria-pressed="true"] { background: var(--inverse); color: var(--on-inverse); font-weight: 700; }

/* inputs */
.field { display: flex; flex-direction: column; gap: 8px; }
.field > span { font-size: var(--t-sm); font-weight: 700; }
.field > span small { font-weight: 400; color: var(--muted); font-size: var(--t-xs); }
.input {
  min-height: 48px; padding: 0 16px; border-radius: var(--r-md); border: 0;
  background: var(--surface-2); color: var(--text); font-size: 16px; width: 100%; box-shadow: inset 0 0 0 1px var(--line);
}
.input::placeholder { color: var(--faint); }
.input:focus { outline: 2px solid var(--accent-line); outline-offset: 0; }
.error { font-size: var(--t-sm); color: var(--down); }
input.range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; --p: 50%; }
input.range:focus { outline: none; }
input.range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent-line) var(--p), var(--track) var(--p)); }
input.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%;
  background: #FFFFFF; border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); transition: box-shadow 120ms linear;
}
input.range:focus-visible::-webkit-slider-thumb { box-shadow: var(--glow); }
input.range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--track); }
input.range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent-line); }
input.range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; border: 0; }
input[type="range"]:not(.range) { width: 100%; accent-color: var(--accent-line); }

/* gradient plan card (plan builder result) */
.model-card {
  position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--hero-grad); color: var(--hero-text);
  padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
}
.model-card .soft { color: var(--hero-soft); }

/* account header */
.greet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.greet-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.greet p { color: var(--muted); }

/* ---------- Home ---------- */
.page-home { --hdr-h: 72px; }
.page-home main { position: relative; z-index: 1; }
.hero {
  position: relative; isolation: isolate; display: grid; color: var(--hero-text); padding-block: 16px 32px;
  grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "chart" "actions";
  text-align: center;
}
.hero::before {
  content: ""; position: absolute; z-index: -1; top: calc(-1 * var(--hdr-h)); bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: var(--hero-grad); pointer-events: none;
}
:root[data-bx-theme="light"] .hero::before { border-radius: 0 0 32px 32px; }
.hero-main { grid-area: main; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hero-hello { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 12px; font-size: var(--t-sm); color: var(--hero-soft); }
.hero-hello h1 { font-size: var(--t-sm); font-weight: 500; color: var(--hero-soft); letter-spacing: 0; font-family: var(--font); }
.hero-link { background: none; border: 0; padding: 0; color: var(--hero-text); font-size: var(--t-sm); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--hero-faint); }
.balance { font-size: var(--t-hero); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; margin-top: 4px; white-space: nowrap; }
.balance .b-dec { font-size: 0.55em; letter-spacing: -0.01em; margin-left: 1px; }
.hero-change { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; font-size: var(--t-sm); font-weight: 500; }
.hero-change .up { color: var(--hero-up); }
.hero-change .down { color: var(--hero-down); }
.hero-change .when { color: var(--hero-soft); }
.example-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--r-xs); background: var(--hero-fill); color: var(--hero-text); font-size: var(--t-xs); font-weight: 700; }
.hero-seg { display: inline-flex; gap: 4px; padding: 4px; margin-top: 12px; border-radius: 999px; background: var(--hero-fill); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.hero-seg::-webkit-scrollbar { display: none; }
.hero-seg button {
  flex: none; min-height: 32px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  color: var(--hero-soft); font-size: var(--t-sm); font-weight: 500; transition: background-color 120ms linear, color 120ms linear;
}
.hero-seg button:hover { color: var(--hero-text); }
.hero-seg button[aria-pressed="true"] { background: #FFFFFF; color: #0F1F17; font-weight: 700; }
.hero-chart { grid-area: chart; margin-top: 16px; }
.scrub { position: relative; height: 200px; outline: none; touch-action: pan-y; cursor: crosshair; }
.scrub svg { position: absolute; inset: 0; display: block; overflow: visible; }
.scrub:focus-visible { box-shadow: 0 0 0 2px var(--hero-text); border-radius: var(--r-xs); }
.sc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sc-base { stroke: var(--hero-faint); stroke-width: 1.5; stroke-dasharray: 1 6; stroke-linecap: round; }
.sc-cross { stroke: var(--hero-faint); stroke-width: 1; }
.sc-dot { stroke: #FFFFFF; stroke-width: 2; }
.sc-date { fill: var(--hero-soft); font-size: 12px; font-weight: 700; font-family: var(--font); }
.ranges { display: flex; justify-content: center; gap: 4px; padding-top: 8px; }
.ranges button {
  min-height: 32px; min-width: 48px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  color: var(--hero-soft); font-size: var(--t-sm); font-weight: 700; transition: background-color 120ms linear, color 120ms linear;
}
.ranges button:hover { color: var(--hero-text); }
.ranges button[aria-pressed="true"] { background: var(--hero-fill); color: var(--hero-text); }
.actions { grid-area: actions; display: grid; grid-template-columns: repeat(4, minmax(0, 72px)); justify-content: center; gap: 16px; margin-top: 24px; }
.action {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--hero-text); font-size: var(--t-sm); font-weight: 500; text-decoration: none;
}
.action .a-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--hero-fill); transition: background-color 120ms linear; }
.action:hover .a-ic { background: var(--hero-fill-2); }
@media (max-width: 759px) {
  .page-home { --hdr-h: 60px; }
  .hero-chart { margin-inline: calc(-1 * max(16px, min(4vw, 32px), env(safe-area-inset-left, 0px))); }
  .ranges { padding-inline: 16px; justify-content: space-between; }
  .ranges button { min-width: 0; }
}
@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "main chart" "actions chart";
    column-gap: 48px; text-align: left; padding-block: 32px 48px; align-items: start;
  }
  .hero-main { align-items: flex-start; padding-top: 16px; }
  .hero-hello, .hero-change { justify-content: flex-start; }
  .balance { font-size: 56px; }
  .hero-chart { margin-top: 0; }
  .scrub { height: 260px; }
  .ranges { justify-content: flex-start; }
  .actions { justify-content: start; align-self: end; }
}

.home-grid {
  display: grid; gap: 16px; padding-block: 24px;
  grid-template-columns: minmax(0, 1fr); grid-template-areas: "hold" "alloc" "plan" "research";
}
.holdings-card { grid-area: hold; }
.alloc-card { grid-area: alloc; }
.plan-card { grid-area: plan; }
.research-card { grid-area: research; }
@media (min-width: 960px) {
  .home-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "hold alloc" "research plan"; gap: 24px; }
}
.hrows { display: flex; flex-direction: column; gap: 4px; }
.hrow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 4px 0; text-decoration: none; color: inherit; }
.badge {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.hrow .h-id { min-width: 0; }
.hrow .h-id b { display: block; font-weight: 500; font-size: var(--t-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrow .h-id small { display: block; font-size: var(--t-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrow .h-amt { text-align: right; }
.hrow .h-amt b { display: block; font-weight: 500; font-size: var(--t-md); }
.hrow .h-amt small { display: block; font-size: var(--t-sm); font-weight: 500; }
.hrow .h-go { color: var(--muted); display: flex; align-items: center; gap: 4px; font-size: var(--t-sm); }
.research-card .hrow .h-id b, .research-card .hrow .h-id small { white-space: normal; }
a.hrow:hover .h-id b { text-decoration: underline; text-underline-offset: 4px; }
.card-foot { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-sm); color: var(--muted); padding-top: 8px; }
.card-foot b { color: var(--text); font-weight: 500; }
.gauge { position: relative; width: 100%; max-width: 320px; margin: 8px auto 0; aspect-ratio: 2 / 1.08; }
.gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gauge-num { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; }
.gauge-num b { font-size: 56px; font-weight: 400; letter-spacing: -0.03em; line-height: 1; }
.gauge-num sup { font-size: var(--t-md); font-weight: 400; color: var(--muted); vertical-align: top; margin-left: 2px; position: relative; top: 4px; }
.gauge-num span { display: block; font-size: var(--t-sm); color: var(--muted); margin-top: 4px; }
.legend-rows { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.legend-rows div { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; }
.legend-rows .lg-name { font-weight: 500; }
.legend-rows .lg-pct { color: var(--muted); font-family: var(--font); font-size: var(--t-sm); min-width: 40px; text-align: right; }
.legend-rows .lg-amt { font-family: var(--font); font-size: var(--t-sm); min-width: 80px; text-align: right; }
.card-num { font-size: var(--t-2xl); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.tickbar { display: flex; align-items: flex-end; justify-content: space-between; height: 28px; }
.tickbar i { width: 3px; height: 16px; border-radius: 2px; background: var(--k-empty); }
.tickbar i:nth-child(6n + 1) { height: 28px; }
.tickbar i.put { background: var(--k-bonds); }
.tickbar i.grow { background: var(--k-stocks); }
.tick-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--t-sm); color: var(--muted); }
.tick-legend span { display: inline-flex; align-items: center; gap: 8px; }
.tick-legend b { color: var(--text); font-weight: 500; font-family: var(--font); font-size: var(--t-sm); }
.card-link { color: var(--accent); font-weight: 700; font-size: var(--t-sm); text-decoration: none; width: fit-content; }
.card-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-note { font-size: var(--t-xs); color: var(--faint); max-width: 90ch; line-height: 1.6; padding-bottom: 24px; }

/* sheets (Details, More): bottom sheet on phones, centered on bigger screens */
dialog.sheet { width: min(480px, calc(100% - 32px)); }
.sheet .modal-body { gap: 20px; }
.sheet-grid { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sheet-grid div { background: var(--surface-2); border-radius: var(--r-md); padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sheet-grid dt { font-size: var(--t-xs); color: var(--muted); }
.sheet-grid dd { margin: 0; font-size: var(--t-lg); font-weight: 500; }
.sheet-list { display: flex; flex-direction: column; gap: 4px; }
.sheet-list a, .sheet-list button {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; border-radius: var(--r-md); border: 0;
  background: transparent; color: var(--text); text-decoration: none; font-size: var(--t-md); font-weight: 500; cursor: pointer; text-align: left; width: 100%;
}
.sheet-list a:hover, .sheet-list button:hover { background: var(--surface-2); }
.sheet-list .ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); flex: none; }
.sheet-list small { display: block; font-size: var(--t-sm); color: var(--muted); font-weight: 400; }
@media (max-width: 759px) {
  dialog.sheet { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 24px 24px 0 0; max-height: 88dvh; }
  dialog.sheet .modal-body { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  dialog.sheet .modal-body::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); align-self: center; margin: -12px 0 -4px; }
}

/* ---------- motion: short, purposeful, and off when the reader asks for less motion ---------- */
.has-thumb { position: relative; }
.has-thumb > .thumb { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: var(--inverse); pointer-events: none; opacity: 0; }
.has-thumb > .thumb[data-ready] { transition: transform 260ms var(--ease-out), width 260ms var(--ease-out), height 260ms var(--ease-out), opacity 120ms linear; }
.has-thumb > :not(.thumb) { position: relative; z-index: 1; }
.has-thumb > [aria-pressed="true"], .has-thumb > [aria-current="page"] { background: transparent !important; }
.hero-seg > .thumb, .page-home .nav > .thumb { background: #FFFFFF; }
.ranges > .thumb { background: var(--hero-fill); }
.ranges > .thumb, .hero-seg > .thumb { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.action .a-ic { transition: background-color 120ms linear, transform 120ms ease-out; }
.action:active .a-ic { transform: scale(var(--press)); }
.btn:active, .chip:active, .hero-seg button:active, .ranges button:active { transform: scale(var(--press)); }
.tabbar a { transition: color 150ms linear, transform 120ms ease-out; }
.tabbar a:active { transform: scale(var(--press)); }
a.hrow { border-radius: var(--r-md); margin-inline: -8px; padding-inline: 8px; transition: background-color 120ms linear; }
a.hrow:hover { background: var(--surface-2); }
.sc-line { transition: stroke 240ms linear; }
.sc-dot { transition: fill 240ms linear; }
.gauge line { transition: stroke 280ms ease-out; }
.tickbar i { transition: background-color 260ms ease-out; }
.hrows.swap > * { animation: row-in 240ms var(--ease-out) both; }
.hrows.swap > :nth-child(2) { animation-delay: 30ms; }
.hrows.swap > :nth-child(3) { animation-delay: 60ms; }
.hrows.swap > :nth-child(4) { animation-delay: 90ms; }
.hrows.swap > :nth-child(5) { animation-delay: 120ms; }
@keyframes row-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
dialog.sheet { transition: transform 200ms var(--ease-out); }
dialog.sheet[open] { animation: sheet-pop 200ms var(--ease-out); }
dialog.sheet[open]::backdrop { animation: scrim-in 200ms linear; }
dialog.sheet.closing { animation: sheet-pop-out 170ms ease-in forwards; }
dialog.sheet.closing::backdrop { animation: scrim-out 170ms linear forwards; }
@keyframes sheet-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes sheet-pop-out { to { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes scrim-out { to { opacity: 0; } }
@media (max-width: 759px) {
  dialog.sheet[open] { animation-name: sheet-up; animation-duration: 260ms; }
  dialog.sheet.closing { animation-name: sheet-down; }
  @keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
  @keyframes sheet-down { to { transform: translateY(100%); } }
}

/* light theme: controls sit on a light gray page, so they get white fills */
:root[data-bx-theme="light"] .chip, :root[data-bx-theme="light"] .step-btn { background: #FFFFFF; box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
:root[data-bx-theme="light"] .chip[aria-pressed="true"] { background: var(--inverse); box-shadow: none; }
:root[data-bx-theme="light"] .seg { background: #E6E8E1; }

/* ---------- Home sections, Uber style: no boxes, big bold titles, square tiles, inset dividers, pill buttons ---------- */
.home-grid { gap: 40px 56px; padding-block: 32px 24px; }
.home-grid > .card { background: var(--surface); box-shadow: var(--card-shadow); padding: 20px 20px 12px; border-radius: var(--r-lg); gap: 8px; }
.home-grid { gap: 16px 24px !important; }
.home-grid .card-top { min-height: 40px; }
.home-grid .card .card-label { font-size: var(--t-lg); font-weight: 800; letter-spacing: -0.02em; text-transform: none; color: var(--text); }
.home-grid .hrows { gap: 0; }
.home-grid .hrow { position: relative; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; min-height: 88px; padding: 16px 0; }
.home-grid .hrow + .hrow::before { content: ""; position: absolute; top: 0; left: 72px; right: 0; height: 1px; background: var(--line); }
.home-grid a.hrow { margin-inline: 0; padding-inline: 0; border-radius: 0; }
.home-grid a.hrow:hover { background: transparent; }
.home-grid .badge {
  position: relative; width: 56px; height: 56px; border-radius: 14px; background: var(--surface-2); color: var(--text);
  font-size: 12px; font-weight: 700;
}
.tile-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; }
.home-grid .hrow .h-id b { font-size: var(--t-md); font-weight: 700; line-height: 1.3; }
.home-grid .hrow .h-id small { font-size: var(--t-sm); color: var(--muted); margin-top: 4px; line-height: 1.35; }
.home-grid .hrow .h-amt b { font-weight: 700; }
.home-grid .hrow .h-amt small { margin-top: 4px; }
.h-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; white-space: nowrap;
  background: var(--surface-2); color: var(--text); font-size: var(--t-sm); font-weight: 700; text-decoration: none;
  transition: background-color 120ms linear, transform 100ms ease-out;
}
a.h-pill:hover, a.hrow:hover .h-pill { background: var(--surface-3); }
a.h-pill:active, a.hrow:active .h-pill { transform: scale(var(--press)); }
.h-pill.quiet { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); }
.home-grid .legend-rows { gap: 0; margin-top: 16px; }
.home-grid .legend-rows div { min-height: 52px; position: relative; }
.home-grid .legend-rows div + div::before { content: ""; position: absolute; top: 0; left: 20px; right: 0; height: 1px; background: var(--line); }
.home-grid .gauge { margin-top: 16px; }
.home-grid .card-num { margin-top: 8px; }
.home-grid .tickbar { margin-block: 8px 4px; }
.home-grid .tick-legend { margin-bottom: 12px; }
:root[data-bx-theme="light"] .home-grid .badge, :root[data-bx-theme="light"] .h-pill { background: #F2F3EE; }
:root[data-bx-theme="light"] a.h-pill:hover, :root[data-bx-theme="light"] a.hrow:hover .h-pill { background: #DADDD3; }

/* logo: the eye and the BARDAX wordmark on desktop, only the eye in the phone app */
.site-header .brand-mark, .site-footer .brand-mark { display: grid; width: 26px; height: 26px; }
.site-header .brand, .site-footer .brand { gap: 10px; align-items: center; }
.site-header .brand-word b { font-size: 18px; }
@media (max-width: 759px) {
  .site-header .brand-mark, .site-footer .brand-mark { display: grid; width: 28px; height: 28px; }
  .site-header .brand-word, .site-footer .brand-word { display: none; }
}

/* sign-up steps, one at a time */
.slide { display: flex; flex-direction: column; gap: 16px; }
.slide.in-f { animation: slide-in-f 220ms var(--ease-out) both; }
.slide.in-b { animation: slide-in-b 220ms var(--ease-out) both; }
@keyframes slide-in-f { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes slide-in-b { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
.slide-q { font-size: var(--t-lg); }
.slide .field > span { display: none; }
.slide[data-slide="email"] .field > span { display: block; }
.slide-top { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.slide-dots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.slide-dots i { height: 4px; border-radius: 2px; background: var(--line-2); transition: background-color 220ms ease-out; }
.slide-dots i.on { background: var(--accent-line); }
.slide-count { font-size: var(--t-xs); font-weight: 700; color: var(--muted); }
.slide .photo-pick { flex-direction: column; text-align: center; }
.slide .photo-pick .cluster { justify-content: center; }
/* 6-digit code */
.otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.otp-box {
  height: 56px; min-width: 0; border: 0; border-radius: var(--r-md); text-align: center; font-size: var(--t-xl); font-weight: 700;
  background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow 120ms linear;
}
.otp-box:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent-line); }

/* ---------- one look across the app, taken from the sign-in screen ----------
   A forest glow and a faint dot grid sit behind every page; cards are frosted glass over it. */
:root { --glass: rgba(31, 31, 31, 0.62); --glass-line: rgba(255, 255, 255, 0.08); }
:root[data-bx-theme="light"] { --glass: rgba(255, 255, 255, 0.72); --glass-line: rgba(15, 31, 23, 0.08); }
body { background: transparent; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 1px, transparent 1.5px) 0 0 / 32px 32px,
    radial-gradient(110% 60% at 50% -10%, rgba(44, 79, 60, 0.75) 0%, rgba(23, 44, 33, 0.35) 45%, transparent 75%),
    var(--bg);
}
:root[data-bx-theme="light"] body::before {
  background:
    radial-gradient(circle at 1px 1px, rgba(15, 31, 23, 0.08) 1px, transparent 1.5px) 0 0 / 32px 32px,
    radial-gradient(110% 60% at 50% -10%, rgba(201, 222, 205, 0.9) 0%, rgba(226, 235, 227, 0.5) 45%, transparent 75%),
    var(--bg);
}
.page-home body::before, body.page-home::before { background: var(--bg); }
.site-header { background: transparent; }
.card, .panel, .home-grid > .card, .res, .mini, .note {
  background: var(--glass); border: 1px solid var(--glass-line); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
}
:root[data-bx-theme="light"] .card, :root[data-bx-theme="light"] .panel, :root[data-bx-theme="light"] .home-grid > .card, :root[data-bx-theme="light"] .res { box-shadow: 0 12px 32px rgba(15, 31, 23, 0.06); }
.ai-mono:has(img) { background: none; overflow: hidden; border-radius: 9px; }
.ai-mono img { width: 100%; height: 100%; }

/* ---------- Profile: a menu, like the apps ---------- */
.profile { max-width: 560px; margin: 0 auto; padding-block: 24px 48px; display: flex; flex-direction: column; gap: 16px; }
.pf-head { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: center; }
.pf-head .avatar { --s: 88px; border-radius: 24px; font-size: 32px; }
.pf-head .avatar img { border-radius: 24px; }
.pf-acts { display: flex; flex-direction: column; gap: 8px; }
.pf-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line); color: var(--text); font-size: var(--t-sm); font-weight: 700; text-decoration: none;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform 100ms ease-out;
}
.pf-act:active { transform: scale(var(--press)); }
.pf-act.accent { background: var(--accent-fill); color: var(--on-accent); box-shadow: none; }
.pf-name h1 { font-size: var(--t-xl); }
.pf-name p { color: var(--muted); font-size: var(--t-sm); margin-top: 4px; }
.plan-tile {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px; border-radius: var(--r-lg);
  background: var(--hero-grad); color: #FFFFFF; text-decoration: none; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}
.plan-tile .pt-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.14); }
.plan-tile b { display: block; font-size: var(--t-md); }
.plan-tile small { display: block; font-size: var(--t-xs); color: rgba(255, 255, 255, 0.72); margin-top: 2px; }
.plan-tile .pill { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }
.menu { padding: 8px; gap: 0; }
.menu a, .menu button {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 48px; padding: 4px 12px;
  border: 0; border-radius: 14px; background: none; color: var(--text); font-size: var(--t-sm); font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; width: 100%;
  transition: background-color 120ms linear;
}
.menu a:hover, .menu button:hover { background: var(--surface-2); }
.menu .mi { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--text); }
.menu .mv { color: var(--muted); font-weight: 500; display: flex; align-items: center; gap: 4px; }
.menu .danger { color: var(--down); }
.menu .danger .mi { color: var(--down); }
.saved .kv { font-size: var(--t-sm); }

/* brand artwork: the full panther image at its own 16:9 shape, centered on matching black */
.brand-art { position: relative; overflow: hidden; background: #000; min-height: 100%; }
.art-photo { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 1600 / 901; }

/* AI choice */
.ai-pick { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ai-pick legend { padding: 0; margin-bottom: 8px; font-size: var(--t-sm); font-weight: 600; }
.ai-pick legend small { font-weight: 500; color: var(--muted); font-size: var(--t-xs); margin-left: 4px; }
.ai-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ai-opt {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer;
  transition: box-shadow 120ms linear, background-color 120ms linear;
}
.ai-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ai-opt .ai-mono {
  width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: var(--surface-3); color: var(--text); font-weight: 600; font-size: var(--t-md);
}
.ai-opt .ai-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ai-opt .ai-txt b { font-size: var(--t-md); font-weight: 600; }
.ai-opt .ai-txt small { font-size: var(--t-xs); color: var(--muted); }
.ai-opt .ai-dot { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 2px var(--line-2); }
.ai-opt:has(input:checked) { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent-line); }
.ai-opt:has(input:checked) .ai-dot { background: radial-gradient(circle, var(--accent-line) 0 4px, transparent 4.5px); box-shadow: inset 0 0 0 2px var(--accent-line); }
.ai-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 360px) { .ai-options { grid-template-columns: 1fr; } }

/* avatars */
.avatar {
  --s: 40px; width: var(--s); height: var(--s); border-radius: 50%; flex: none;
  display: grid; place-items: center; overflow: hidden; padding: 0; border: 0; cursor: pointer;
  background: var(--grad-tile); color: var(--on-grad); text-decoration: none;
  font-weight: 600; font-size: calc(var(--s) * 0.38); letter-spacing: 0.02em;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.empty { background: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); }
.avatar-md { --s: 56px; }
.avatar-lg { --s: 72px; }
.avatar-xl { --s: 88px; }
.photo-pick { display: flex; align-items: center; gap: 16px; }
.photo-btn { position: relative; overflow: visible; }
.photo-btn .avatar-face { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.photo-btn .cam {
  position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--inverse); color: var(--on-inverse); box-shadow: 0 0 0 3px var(--surface);
}

/* segmented bars (one whole split into parts) */
.alloc { display: flex; gap: 2px; height: 28px; }
.alloc > span {
  flex-basis: 0; min-width: 0; border-radius: 4px; display: flex; align-items: center; padding: 0 8px;
  font-size: var(--t-xs); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.alloc > span.hatch { background: repeating-linear-gradient(135deg, var(--c-us) 0 6px, var(--c-us-2) 6px 9px); }
.split { display: flex; gap: 2px; height: 8px; }
.split > span { flex-basis: 0; min-width: 0; border-radius: 4px; transition: flex-grow 150ms ease-out; }
.meter { height: 8px; border-radius: 4px; background: var(--track-accent); overflow: hidden; }
.meter > span { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--accent-line); transition: width 150ms ease-out; }

/* holdings list */
.holds { display: flex; flex-direction: column; }
.hold {
  display: grid; align-items: center; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--line);
  grid-template-columns: minmax(0, 2.8fr) minmax(0, 0.9fr) minmax(0, 0.6fr) minmax(0, 0.9fr) minmax(0, 1.3fr);
  grid-template-areas: "name role target amount cost";
}
.hold-head { padding: 0 0 8px; border-top: 0; font-size: var(--t-xs); color: var(--faint); }
.hold-total { font-weight: 600; }
.hold .h-name { grid-area: name; display: flex; align-items: center; gap: 10px; min-width: 0; }
.hold .h-name b { font-weight: 600; display: block; }
.hold .h-name small { display: block; font-size: var(--t-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hold .h-role { grid-area: role; }
.hold .h-target { grid-area: target; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.hold .h-amount { grid-area: amount; text-align: right; font-variant-numeric: tabular-nums; }
.hold .h-cost { grid-area: cost; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: var(--t-sm); }
@media (max-width: 640px) {
  .hold { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name target" "role amount" "cost cost"; }
  .hold .h-role { padding-left: 20px; }
  .hold .h-cost { text-align: left; padding-left: 20px; }
  .hold-head { display: none; }
}

/* pills */
.pill {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; width: fit-content;
  font-size: var(--t-xs); font-weight: 600; white-space: nowrap; background: var(--chip-bg); color: var(--chip-text);
}
.pill-core, .pill-accent { background: var(--pos-bg); color: var(--pos-text); }

/* notices */
.notice { padding: 14px 16px; border-radius: 16px; background: var(--glass); color: var(--text-2); border: 1px solid var(--glass-line); }
.notice-warn { background: var(--warn-bg); color: var(--warn-text); box-shadow: none; }

/* dialog */
.modal {
  padding: 0; border: 0; border-radius: 24px; background: var(--surface); color: var(--text);
  width: min(460px, calc(100% - 32px)); max-height: calc(100dvh - 32px); box-shadow: var(--shadow-pop);
}
.modal::backdrop { background: var(--scrim); }
.modal-body { position: relative; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.modal-split { width: min(920px, calc(100% - 32px)); overflow: hidden; }
.modal-split[open] { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
@media (min-width: 761px) {
  .modal-split .art-photo, .auth-split .art-photo { position: absolute; left: 50%; top: 50%; width: 190%; transform: translate(-50%, -50%); }
}
.modal-split .modal-body { overflow-y: auto; max-height: calc(100dvh - 32px); }
@media (max-width: 760px) {
  .modal-split { overflow: auto; }
  .modal-split[open] { display: block; }
  .modal-split .brand-art { min-height: 0; }
  .modal-split .modal-body { max-height: none; overflow: visible; }
}
.auth-split { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); width: 100%; max-width: 980px; padding: 0; overflow: hidden; gap: 0; }
.auth-split > .stack { padding: clamp(24px, 4vw, 44px); }
@media (max-width: 760px) {
  .auth-split { grid-template-columns: minmax(0, 1fr); }
  .auth-split .brand-art { min-height: 0; }
}
.modal-x { position: absolute; top: 16px; right: 16px; }
.modal h2 { font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.facts { list-style: none; margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--bg-2); display: flex; flex-direction: column; gap: 8px; font-size: var(--t-sm); color: var(--text-2); }
.facts li { display: flex; gap: 10px; align-items: flex-start; }
.facts svg { flex: none; margin-top: 3px; color: var(--accent); }
@media (max-width: 480px) { .modal-body { padding: 22px 18px; } }

/* small controls */
.btn-sm { min-height: 34px; padding: 0 12px; border-radius: 9px; font-size: var(--t-sm); gap: 6px; }
.icon-sm { width: 34px; height: 34px; }

/* receipt printer: a physical object, so it keeps the same colors in light and dark */
.printer { --pr-radius: 24px; --pr-inset: 12px; position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 384px; margin: 0 auto; }
.printer-machine {
  position: relative; isolation: isolate; width: 100%; overflow: hidden; border-radius: var(--pr-radius);
  border: 1px solid #262B22; background: #3D4337; padding: var(--pr-inset); padding-bottom: 32px; color: #EEF0E6;
  box-shadow: 0 20px 36px -20px rgba(15, 31, 23, 0.55), 0 6px 14px -8px rgba(15, 31, 23, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(15, 31, 23, 0.55);
}
.printer-machine::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; opacity: 0.3; mix-blend-mode: multiply;
}
.printer-slot { position: absolute; left: 24px; right: 24px; bottom: var(--pr-inset); z-index: 40; height: 8px; border-radius: 4px; background: #0A140F; border: 1px solid #0A140F; box-shadow: inset 0 2px 4px #000; }
.printer-head { position: relative; z-index: 10; display: flex; justify-content: space-between; align-items: flex-start; height: 44px; }
.printer-logo { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: #545B4D; color: #E9EBE1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.printer-home {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 12px; text-decoration: none;
  background: #545B4D; color: #EEF0E6; font-size: var(--t-md); font-weight: 600; border: 1px solid #2C3128;
  box-shadow: 0 2px 0 #252A21, inset 0 1px 0 rgba(255, 255, 255, 0.14); transition: transform 100ms ease-out, box-shadow 100ms ease-out;
}
.printer-home:active { transform: translateY(2px); box-shadow: 0 0 0 #252A21, inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.printer-screen {
  position: relative; z-index: 10; isolation: isolate; overflow: hidden; border-radius: calc(var(--pr-radius) - var(--pr-inset));
  border: 1px solid #0A140F; background: #0F1F17; padding: 16px; color: #EEF0E6; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55);
}
.printer-screen::after { content: ""; position: absolute; inset: 0; z-index: 20; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 24px 4px rgba(10, 20, 15, 0.52); }
.ps-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ps-title { font-size: var(--t-lg); font-weight: 500; line-height: 1.3; }
.ps-sub { font-size: var(--t-md); color: #A9B3A1; }
.ps-total { text-align: right; display: flex; flex-direction: column; }
.ps-total span { font-size: var(--t-sm); color: #A9B3A1; }
.ps-total b { font-size: var(--t-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.ps-status { display: flex; align-items: center; gap: 8px; margin-top: 18px; min-height: 20px; }
.ps-ind { display: grid; place-items: center; width: 20px; height: 20px; flex: none; }
.ps-ind > svg { grid-area: 1 / 1; transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1), transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.ps-spin { color: #8F9A89; animation: pr-spin 0.9s linear infinite; }
.ps-check { color: #A9C09E; opacity: 0; transform: scale(0.94); }
.printer[data-stage="complete"] .ps-spin { opacity: 0; transform: scale(0.96); animation: none; }
.printer[data-stage="complete"] .ps-check { opacity: 1; transform: scale(1); }
.ps-label { font-size: var(--t-sm); font-weight: 500; color: #C7CBB8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-label.swap { animation: pr-label 180ms cubic-bezier(0.23, 1, 0.32, 1); }
.printer-output { position: relative; z-index: 50; margin-top: -16px; width: calc(80% + 48px); max-width: 100%; overflow: hidden; padding: 0 24px 24px; }
.printer:not([data-stage="processing"]) .printer-output::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: -4px; z-index: 20; height: 8px; pointer-events: none;
  background: rgba(10, 20, 15, 0.75); filter: blur(6px);
}
.printer-feed { position: relative; isolation: isolate; opacity: 0; transform: translateY(calc(-100% + 2px)); transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.printer-feed::before { content: ""; position: absolute; left: 12px; right: 12px; top: 12px; bottom: 16px; z-index: 0; border-radius: 2px; box-shadow: 0 8px 24px rgba(10, 20, 15, 0.24); pointer-events: none; }
.printer-feed::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; z-index: 0; height: 12px; transform: translateY(6px); border-radius: 999px; background: rgba(10, 20, 15, 0.1); filter: blur(16px); pointer-events: none; }
.printer[data-stage="printing"] .printer-feed { opacity: 1; animation: pr-feed 1.75s linear forwards; }
.printer[data-stage="complete"] .printer-feed { opacity: 1; transform: translateY(0); }
.receipt {
  position: relative; z-index: 10; min-height: 20rem; padding: 28px 24px 32px; color: #0F1F17;
  background: #FAFAF5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat; background-size: 180px 180px; background-blend-mode: soft-light;
  font: 400 12.5px/1.65 'Geist Mono', var(--mono); font-variant-numeric: tabular-nums;
}
.rc-logo { width: 56px; height: 56px; margin: 0 auto; display: grid; place-items: center; background: #1E3A2E; color: #FAFAF5; }
.rc-brand { text-align: center; margin-top: 10px; font-size: 10.5px; letter-spacing: 0.32em; color: #56664F; }
.rc-rule { border: 0; border-top: 1px dashed #CFD3C3; margin: 16px 0; }
.rc-row { display: flex; justify-content: space-between; gap: 12px; }
.rc-item b { font-weight: 600; letter-spacing: 0.08em; font-size: 13px; }
.rc-muted { color: #56664F; }
.rc-total { margin-top: 10px; align-items: baseline; }
.rc-total b { font-weight: 700; letter-spacing: 0.08em; font-size: 13px; }
.rc-total .rc-amt { font-size: 19px; letter-spacing: 0; }
.rc-meta { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 16px; color: #56664F; }
.rc-meta dd { margin: 0; text-align: right; color: #2F372B; overflow-wrap: anywhere; }
.rc-barcode { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #0F1F17; }
.rc-barcode span { font-size: 10.5px; letter-spacing: 0.24em; color: #66765F; }
.order-modal { width: min(460px, calc(100% - 32px)); background: var(--bg); overflow-y: auto; max-height: calc(100dvh - 32px); }
.order-modal .modal-body { padding-bottom: 0; }
.order-actions {
  position: sticky; bottom: 0; z-index: 60; margin: 0 -28px; padding: 14px 28px 20px;
  background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -16px 24px -18px rgba(15, 23, 42, 0.25);
}
@media (max-width: 480px) { .order-actions { margin: 0 -18px; padding: 12px 18px 16px; } }
.order-modal .modal-body { gap: 16px; }
.order-modal h2 { font-size: var(--t-xl); }
.order-card .printer { max-width: 400px; }
@keyframes pr-spin { to { transform: rotate(360deg); } }
@keyframes pr-label { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes pr-feed {
  0% { transform: translateY(calc(-100% + 2px)); }
  7.5%, 10.5% { transform: translateY(-91%); }
  18%, 21% { transform: translateY(-81%); }
  28.5%, 31.5% { transform: translateY(-70%); }
  39%, 42% { transform: translateY(-58%); }
  49.5%, 52.5% { transform: translateY(-45%); }
  60%, 63% { transform: translateY(-32%); }
  70.5%, 73.5% { transform: translateY(-20%); }
  81%, 84% { transform: translateY(-10%); }
  91.5%, 94.5% { transform: translateY(-3%); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .printer-feed { animation: none !important; }
  .printer:not([data-stage="processing"]) .printer-feed { transform: none; }
  .ps-spin { animation: none; }
}

/* AI setup guide */
.guide { gap: 20px; }
.guide-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; padding-block: 16px 8px; }
.guide-head h1 { font-size: var(--t-3xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.guide-pick { min-width: min(100%, 340px); }
.ai-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 4px; border-radius: 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.ai-tabs button {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; border: 0; border-radius: 12px;
  background: transparent; color: var(--muted); text-align: left; cursor: pointer; transition: background-color 120ms linear, color 120ms linear;
}
.ai-tabs button .ai-mono { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-3); color: var(--text); font-weight: 600; flex: none; }
.ai-tabs button .ai-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ai-tabs button b { font-size: var(--t-md); color: var(--text); font-weight: 600; }
.ai-tabs button small { font-size: var(--t-xs); }
.ai-tabs button[aria-selected="true"] { background: var(--surface); color: var(--text-2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 0 1px var(--line-2); }
.ai-tabs button[aria-selected="true"] .ai-mono { background: var(--inverse); color: var(--on-inverse); }
.guide-progress { gap: 12px; padding: 18px 20px; }
.steps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.step-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: auto 1fr;
  grid-template-areas: "text shot" "foot shot"; gap: 18px 32px; padding: 28px; align-items: start;
}
.step-text { grid-area: text; }
.step-shot { grid-area: shot; }
.step-foot { grid-area: foot; }
.step-card.is-done { box-shadow: inset 0 0 0 1px var(--accent-line); }
.step-text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.step-text h2 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.step-text > p { color: var(--text-2); max-width: 52ch; }
.step-text > p b { color: var(--text); font-weight: 600; }
.step-top { display: flex; align-items: center; gap: 12px; }
.step-num {
  width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--inverse); color: var(--on-inverse); font-weight: 600; font-size: var(--t-md); font-variant-numeric: tabular-nums;
}
.is-done .step-num { background: var(--accent-line); color: var(--on-accent); }
.step-done[aria-pressed="true"] { color: var(--pos-text); box-shadow: inset 0 0 0 1px var(--accent-line); }
.step-shot { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.step-shot figcaption { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--t-xs); color: var(--muted); }
.step-shot figcaption span { display: inline-flex; align-items: center; gap: 6px; }
.step-shot figcaption i, .shot .hl::after {
  width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  background: var(--accent-line); color: var(--on-accent); font-style: normal; font-size: 11px; font-weight: 700;
}
.shot-img { width: 100%; height: auto; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 900px) { .step-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "text" "shot" "foot"; gap: 18px; padding: 22px; } }
.copy-block { border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
/* A locked or missing prompt: what it is, and the one step that unlocks it. */
.lock-block { border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); padding: 14px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.lock-block .btn { margin-top: 4px; }
.copy-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; min-height: 48px; padding: 6px 6px 6px 14px; border-bottom: 1px solid var(--line); font-size: var(--t-xs); font-weight: 600; color: var(--muted); }
.copy-block pre {
  margin: 0; padding: 14px 16px; max-height: 200px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  font: 12.5px/1.6 var(--mono); color: var(--text-2);
}
.prompt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.prompt-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 8px 10px 14px; border-radius: 12px;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--t-md); color: var(--text-2);
}
.rules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px 32px; }
.facts.plain { background: none; padding: 0; gap: 10px; font-size: var(--t-md); }
.facts.plain .sw { margin-top: 6px; border-radius: 50%; width: 8px; height: 8px; }

/* drawings of app screens */
.shot { border-radius: 14px; overflow: hidden; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 11.5px; color: var(--text-2); user-select: none; }
.shot-bar { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.shot-dots { display: flex; gap: 5px; }
.shot-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.shot-url { flex: 1; max-width: 220px; margin: 0 auto; height: 18px; border-radius: 6px; background: var(--surface); display: grid; place-items: center; font-size: 10.5px; color: var(--muted); }
.shot-body { display: grid; grid-template-columns: 112px minmax(0, 1fr); min-height: 236px; }
.shot-side { display: flex; flex-direction: column; gap: 3px; padding: 10px 8px; border-right: 1px solid var(--line); background: var(--surface-2); }
.shot-app { font-weight: 700; font-size: 12px; color: var(--text); padding: 4px 8px 8px; }
.shot-item { padding: 5px 8px; border-radius: 7px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shot-item.hl { color: var(--text); background: var(--surface); overflow: visible; }
.shot-lines { display: flex; flex-direction: column; gap: 7px; padding: 12px 8px 0; }
.shot-lines i { display: block; height: 6px; border-radius: 3px; background: var(--line); }
.shot-main { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 14px; min-width: 0; background: var(--surface); }
.shot-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.shot-row.end { justify-content: flex-end; }
.shot-title { font-weight: 700; font-size: 13px; color: var(--text); }
.shot-label { font-size: 10.5px; font-weight: 600; color: var(--muted); }
.shot-field { display: block; padding: 7px 10px; border-radius: 8px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font-weight: 600; }
.shot-btn { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 8px; background: var(--inverse); color: var(--on-inverse); font-weight: 600; white-space: nowrap; }
.shot-btn.ghost { background: transparent; color: var(--muted); }
.shot-chip { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); white-space: nowrap; }
.shot-icon { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font-weight: 700; }
.shot-link { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; width: fit-content; padding: 2px 4px; }
.shot-modal, .shot-panel { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); margin-top: 8px; }
.shot-panel.tight { margin-top: 2px; padding: 8px; }
.shot-text { color: var(--muted); line-height: 1.45; }
.shot-file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); width: fit-content; }
.shot-file b { display: block; color: var(--text); font-weight: 600; }
.shot-file small { color: var(--muted); font-size: 10.5px; }
.shot-file-ico { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-3); font: 700 10px var(--mono); color: var(--text); }
.shot-spacer { flex: 1; min-height: 40px; }
.shot-composer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--muted); }
.shot-composer span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.shot-composer.quiet { margin-top: 8px; }
.shot-send { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--inverse); color: var(--on-inverse); }
.shot-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 10px; flex: 1; }
.shot-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.shot-aside { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.shot-menu { display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: 9px; background: var(--surface); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--line-2); }
.shot-menu span { padding: 6px 8px; border-radius: 6px; white-space: nowrap; }
.shot-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.shot-cards i { height: 54px; border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.shot .hl { position: relative; box-shadow: 0 0 0 2px var(--accent-line); }
.shot .hl::after { content: attr(data-n); position: absolute; top: -9px; right: -9px; box-shadow: 0 0 0 2px var(--surface); }
@media (max-width: 420px) {
  .shot-body { grid-template-columns: 84px minmax(0, 1fr); }
  .shot-lines { display: none; }
  .shot-split { grid-template-columns: minmax(0, 1fr); }
  .shot-split .shot-col { display: none; }
}

/* footer */
.site-footer { border-top: 1px solid var(--line); padding-block: 32px 48px; }
.site-footer p { font-size: var(--t-xs); color: var(--faint); max-width: 80em; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: var(--t-sm); margin-bottom: 10px; }
.site-footer nav a { color: var(--muted); text-decoration: none; min-height: 32px; display: flex; align-items: center; }
.site-footer nav a:hover { color: var(--text); }

/* prose (issues, terms) */
.prose { max-width: 680px; font-size: var(--t-lg); line-height: 1.7; }
.prose h2 { font-size: var(--t-lg); font-weight: 700; margin: 32px 0 8px; }
.prose p { margin: 0 0 14px; color: var(--text-2); }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 22px; color: var(--text-2); }
.prose table { font-size: var(--t-md); margin: 0 0 14px; }


/* skeletons: grey shapes that shimmer while a page waits for data */
.skel { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: skel 1.2s ease-in-out infinite; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.skel-row { display: flex; flex-direction: column; gap: 8px; padding: 18px 0; }
.skel-row + .skel-row { border-top: 1px solid var(--line); }
.skel-block { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; }


/* tab bar v2: Home in the middle; folds to just Home while scrolling down */
@media (max-width: 759px) {
  .tabbar { display: flex; align-items: center; padding: 0 8px; transition: width 300ms var(--ease-out), padding 300ms var(--ease-out); }
  .tabbar a { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; transition: flex-grow 300ms var(--ease-out), opacity 180ms linear, color 150ms linear, transform 120ms ease-out; }
  .tabbar a.tab-center { flex: 0 0 72px; }
  .tabbar.collapsed { width: 88px; padding: 0 8px; }
  .tabbar.collapsed a:not(.tab-center) { flex-grow: 0.00001; opacity: 0; pointer-events: none; }
}
/* page slide when swiping or tapping between tabs */
main.enter-left > * { animation: page-in-left 320ms var(--ease-out) both; }
main.enter-right > * { animation: page-in-right 320ms var(--ease-out) both; }
@keyframes page-in-left { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes page-in-right { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
body.leave-left main, body.leave-right main { transition: opacity 140ms linear, transform 140ms ease-in; opacity: 0; }
body.leave-left main { transform: translateX(-24px); }
body.leave-right main { transform: translateX(24px); }




/* the sliding tab highlight */
@media (max-width: 759px) {
  .tabbar { position: fixed; }
  .tab-ind {
    position: absolute; left: 0; top: 8px; height: 48px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); pointer-events: none;
    transition: transform 280ms var(--ease-out), width 280ms var(--ease-out), opacity 160ms linear;
  }
  :root[data-bx-theme="light"] .tab-ind { background: rgba(15, 31, 23, 0.06); }
  .tab-ind.on-center, .tabbar.collapsed .tab-ind { opacity: 0; }
  .tabbar a { position: relative; z-index: 1; }
  .tabbar a svg { transition: transform 220ms var(--ease-out); }
  .tabbar a[aria-current="page"]:not(.tab-center) svg { transform: translateY(-1px) scale(1.08); }
}
/* page content slides in by section, a beat apart */
main.enter-left > *:nth-child(2), main.enter-right > *:nth-child(2) { animation-delay: 40ms; }
main.enter-left > *:nth-child(3), main.enter-right > *:nth-child(3) { animation-delay: 80ms; }
main.enter-left > *:nth-child(n+4), main.enter-right > *:nth-child(n+4) { animation-delay: 120ms; }


/* native page transitions between tabs: the page slides, the header and tab bar stay put */
@view-transition { navigation: auto; }
main { view-transition-name: page; }
.site-header { view-transition-name: header; }
@media (max-width: 759px) { .tabbar { view-transition-name: tabbar; } }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(header), ::view-transition-group(tabbar) { animation-duration: 0s; }
::view-transition-old(header), ::view-transition-old(tabbar) { display: none; }
::view-transition-new(header), ::view-transition-new(tabbar) { animation: none; }
::view-transition-group(page) { animation-duration: 0s; }
html.vt-left::view-transition-old(page) { animation: vt-out-left 380ms cubic-bezier(.22, .8, .24, 1) both; }
html.vt-left::view-transition-new(page) { animation: vt-in-left 380ms cubic-bezier(.22, .8, .24, 1) both; }
html.vt-right::view-transition-old(page) { animation: vt-out-right 380ms cubic-bezier(.22, .8, .24, 1) both; }
html.vt-right::view-transition-new(page) { animation: vt-in-right 380ms cubic-bezier(.22, .8, .24, 1) both; }
@keyframes vt-out-left { to { transform: translateX(-100vw); } }
@keyframes vt-in-left { from { transform: translateX(100vw); } }
@keyframes vt-out-right { to { transform: translateX(100vw); } }
@keyframes vt-in-right { from { transform: translateX(-100vw); } }
html:not(.vt-left):not(.vt-right)::view-transition-old(page) { animation: vt-fade-out 160ms linear both; }
html:not(.vt-left):not(.vt-right)::view-transition-new(page) { animation: vt-fade-in 200ms linear both; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* ---------- phone app frame (js/shell.js) ---------- */
html.shell, html.shell body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.shell body { padding: 0 !important; }
html.shell body > *:not(#shell):not(#tabbar) { display: none !important; }
#shell .pane { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--bg); visibility: hidden; will-change: transform; transform: translate3d(100%, 0, 0); }
#shell .pane.on { visibility: visible; }
html.shell .tabbar { transition: width 300ms var(--ease-out), padding 300ms var(--ease-out), opacity 180ms linear; }
html.shell .tabbar.under-dialog { opacity: 0; pointer-events: none; }
html.embed .tabbar, html.embed #boot { display: none !important; }

/* ---------- loading skeletons on Home and Ask AI ---------- */
.hero .skel, .hero-skel { background: linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.07) 100%); background-size: 200% 100%; }
#chart { position: relative; }
.chart-skel { position: absolute; left: 0; right: 0; top: 30%; bottom: 12%; border-radius: 16px; opacity: 0.7; }
.skel-hold { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; }
.skel-col { display: flex; flex-direction: column; gap: 6px; }
.legend-rows:has(> .skel) { display: flex; flex-direction: column; gap: 10px; }

/* required fields */
.input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--down); }
.slide-q .opt { font-size: var(--t-sm); font-weight: 600; color: var(--faint); margin-left: 6px; }

/* app-style page headers: small title, content starts right away */
main.page.tight { padding-top: 14px; gap: 18px; }
.app-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 44px; }
.app-head h1 { font-size: 24px; letter-spacing: -0.02em; line-height: 1.2; margin: 0; }
.app-head .meta { font-size: var(--t-sm); color: var(--muted); }
.app-head.guide-head { padding: 0; }
@media (max-width: 759px) { .site-header .hdr { min-height: 56px; } }

/* Home: next deposit, get started, auto-invest */
.hero-next { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 4px; padding: 7px 12px; border-radius: 999px; border: 0; background: var(--hero-fill); color: var(--hero-text); font: 600 var(--t-sm) var(--font); cursor: pointer; }
.hero-next:hover { background: var(--hero-fill-2); }
.nd-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hero-up); }
.start-card { display: flex; flex-direction: column; gap: 14px; }
.sc-top { display: flex; align-items: center; gap: 14px; }
.sc-ring svg { width: 40px; height: 40px; transform: rotate(-90deg); display: block; }
.sc-ring circle { fill: none; stroke-width: 4; }
.sc-ring .bg { stroke: var(--surface-3); }
.sc-ring .fg { stroke: var(--hero-up); stroke-linecap: round; transition: stroke-dasharray 600ms var(--ease-out); }
.sc-sub { font-size: var(--t-sm); color: var(--muted); }
.sc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sc-list li > a, .sc-list li > button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); font: 600 var(--t-md) var(--font); text-align: left; text-decoration: none; cursor: pointer; }
.sc-list li:first-child > * { border-top: 0; }
.sc-list .ck { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; color: transparent; transition: all 220ms var(--ease-out); }
.sc-list .done .ck { background: var(--hero-up); border-color: var(--hero-up); color: #0B1A12; }
.sc-list .done .t b { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.sc-list .t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sc-list .t small { font-size: var(--t-xs); color: var(--muted); font-weight: 500; }
.sc-list .go { color: var(--faint); }
.au-amt { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 16px; border-radius: 16px; background: var(--surface-2); }
.au-amt small { display: block; font-size: var(--t-xs); color: var(--muted); font-weight: 600; }
.au-amt b { font-size: 28px; font-variant-numeric: tabular-nums; }
.au-amt select { margin-top: 4px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: 600 var(--t-md) var(--font); }
.au-split { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.au-split li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.au-split .tk { width: 52px; font-weight: 800; }
.au-split .nm { flex: 1; color: var(--muted); font-size: var(--t-sm); }
.au-split b { font-variant-numeric: tabular-nums; }
.au-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--text-2); font-size: var(--t-sm); line-height: 1.5; }

/* app tour */
.tour { position: fixed; inset: 0; z-index: 150; pointer-events: auto; opacity: 0; transition: opacity 200ms linear; }
.tour.on { opacity: 1; } .tour.out { opacity: 0; }
.tour-spot { position: fixed; left: 0; top: 0; border-radius: 18px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.72); transition: transform 380ms cubic-bezier(.22, .8, .24, 1), width 380ms cubic-bezier(.22, .8, .24, 1), height 380ms cubic-bezier(.22, .8, .24, 1); pointer-events: none; }
.tour-card { position: fixed; left: 0; top: 0; padding: 18px; border-radius: 16px; background: var(--inverse); color: var(--on-inverse); display: flex; flex-direction: column; gap: 8px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); transition: transform 380ms cubic-bezier(.22, .8, .24, 1); }
.tour-card.in > * { animation: tour-in 320ms 120ms var(--ease-out) both; }
@keyframes tour-in { from { opacity: 0; transform: translateY(6px); } }
.tour-card h3 { font-size: var(--t-lg); }
.tour-card p { font-size: var(--t-sm); line-height: 1.5; opacity: 0.8; }
.tour-dots { display: flex; gap: 5px; }
.tour-dots i { width: 6px; height: 6px; border-radius: 3px; background: currentColor; opacity: 0.2; transition: width 220ms ease-out, opacity 200ms linear; }
.tour-dots i.on { width: 18px; opacity: 1; }
.tour-nav { display: flex; justify-content: space-between; gap: 10px; padding-top: 6px; }
.tour-nav button { padding: 10px 16px; border-radius: 10px; border: 0; font: 700 var(--t-sm) var(--font); cursor: pointer; }
.tour-skip { background: transparent; color: inherit; opacity: 0.6; }
.tour-next { background: var(--on-inverse); color: var(--inverse); }
.tabbar.touring a:not(.tour-on) { opacity: 0.25; }
.tabbar a.tour-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-card { transition: none; } }

/* sign-up: Robinhood question */
.rh-logo { width: 100%; max-width: 220px; height: auto; border-radius: 14px; display: block; }
.rh-yn { display: flex; flex-direction: column; gap: 10px; }
.rh-yn .option { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 58px; padding: 0 18px; border-radius: 14px; border: 0; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: 600 var(--t-md) var(--font); cursor: pointer; transition: box-shadow 150ms ease-out, transform 120ms ease-out; }
.rh-yn .option:active { transform: scale(var(--press)); }
.rh-yn .option .radio { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-2); transition: box-shadow 150ms ease-out; }
.rh-yn .option[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent-line); }
.rh-yn .option[aria-pressed="true"] .radio { box-shadow: inset 0 0 0 7px var(--accent-line); }

/* the eye: pupil follows the pointer, lid blinks */
svg.eye .eye-pupil { transition: transform 140ms ease-out; }
svg.eye .eye-lid { transform-box: fill-box; transform-origin: center; }
svg.eye.blink .eye-lid { animation: eye-blink 220ms ease-in-out; }
@keyframes eye-blink { 0%, 100% { transform: scaleY(1); } 45%, 55% { transform: scaleY(0.08); } }

/* Home: what-if for this week's case */
.cw-card { display: flex; flex-direction: column; gap: 16px; }
.cw-top { display: flex; align-items: center; gap: 12px; }
.cw-top img { width: 40px; height: 40px; border-radius: 11px; }
.cw-top > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cw-sub { font-size: var(--t-xs); color: var(--muted); }
.cw-in { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cw-in label { font-size: var(--t-sm); color: var(--muted); font-weight: 600; }
.cw-field { display: flex; align-items: center; gap: 4px; padding: 0 14px; height: 48px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.cw-field span { font-size: 22px; font-weight: 700; color: var(--muted); }
.cw-field input { width: 120px; border: 0; background: none; color: var(--text); font: 800 24px var(--font); font-variant-numeric: tabular-nums; outline: none; }
.cw-field:focus-within { box-shadow: inset 0 0 0 2px var(--text-2); }
.cw-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cw-chips button { padding: 8px 12px; border-radius: 999px; border: 0; background: var(--surface-2); color: var(--text-2); font: 600 var(--t-sm) var(--font); cursor: pointer; }
.cw-chips button[aria-pressed="true"] { background: var(--inverse); color: var(--on-inverse); }
.cw-scen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cw-s { padding: 14px; border-radius: 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cw-s small { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }
.cw-s.bear small { color: var(--down); } .cw-s.bull small { color: var(--up); }
.cw-s b { font-size: clamp(18px, 4.6vw, 24px); font-weight: 800; font-variant-numeric: tabular-nums; }
.cw-s span { font-size: var(--t-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.cw-s span.up { color: var(--up); } .cw-s span.down { color: var(--down); }
.cw-s em { font-style: normal; font-size: var(--t-xs); color: var(--muted); }
.cw-s.base { box-shadow: inset 0 0 0 1.5px var(--up); }
.cw-port { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.cw-port > div { display: flex; flex-direction: column; gap: 2px; }
.cw-port small { font-size: var(--t-xs); color: var(--muted); font-weight: 600; }
.cw-port b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cw-port span { font-size: var(--t-sm); font-weight: 700; }
.cw-port span.up { color: var(--up); } .cw-port span.down { color: var(--down); }

.cw-h { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.01em; }
@media (max-width: 560px) {
  .cw-scen { grid-template-columns: 1fr; }
  .cw-s { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; }
  .cw-s small { grid-column: 1; } .cw-s b { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .cw-s span { grid-column: 1; } .cw-s em { display: none; }
  .cw-top .h-pill { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* ---------- motion v2: one set of rules for every animation ----------
   1 entrances ease out          9 moves on screen ease in and out
   4 presses scale to 0.97      10 popovers start at 0.95, 11-12 from and back into their button
   13 no bounce                 14 nothing tweens while a finger holds it
   15 exits 20% shorter         16-18 old and new states overlap; icons cross-fade with a blur
   2 dropdowns open in 200ms    3, 6 lists and details settle in 30ms apart */
:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);
  --press: 0.97;
  interpolate-size: allow-keywords;
}

/* presses: one value everywhere */
.btn:active, .chip:active, .hero-seg button:active, .ranges button:active, .tabbar a:active, .pf-act:active,
.rh-yn .option:active, a.h-pill:active, a.hrow:active .h-pill, .action:active .a-ic, .option:active, .core-opt:active,
.menu a:active, .menu button:active, .copy-btn:active, [data-copy]:active { transform: scale(var(--press)); }

/* sliding pills and the tab highlight move, so they ease in and out (they also stretch 12% on the way, in common.js) */
.has-thumb > .thumb[data-ready] { transition: transform 260ms var(--ease-in-out), width 260ms var(--ease-in-out), height 260ms var(--ease-in-out), opacity 120ms linear; }
@media (max-width: 759px) {
  .tab-ind { transition: transform 280ms var(--ease-in-out), width 280ms var(--ease-in-out), opacity 160ms linear; }
}

/* slider knob: stretches 12% while you drag it */
input.range::-webkit-slider-thumb { transition: box-shadow 120ms linear, transform 120ms var(--ease-out); }
input.range:active::-webkit-slider-thumb { transform: scale(1.12, 0.94); }
input.range::-moz-range-thumb { transition: transform 120ms var(--ease-out); }
input.range:active::-moz-range-thumb { transform: scale(1.12, 0.94); }

/* while a finger holds a slider or chart, the things that follow it move with it */
html.is-held .split > span, html.is-held .meter > span, html.is-held .gauge line, html.is-held .tickbar i,
html.is-held .sc-line, html.is-held .sc-dot, html.is-held .mini-top b { transition: none !important; }

/* popovers (sheets on wider screens): start at 0.95 from the button that opened them, close back into it */
@media (min-width: 760px) {
  dialog.sheet[open] { animation: sheet-pop2 200ms var(--ease-out); }
  dialog.sheet.closing { animation: sheet-pop2-out 160ms var(--ease-out) forwards; }
  dialog.sheet[open]::backdrop { animation: scrim-in 200ms linear; }
  dialog.sheet.closing::backdrop { animation: scrim-out 160ms linear forwards; }
}
@keyframes sheet-pop2 { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes sheet-pop2-out { to { opacity: 0; transform: scale(0.95); } }
/* phone sheets rise from the bottom; closing is 20% quicker */
@media (max-width: 759px) {
  dialog.sheet[open] { animation: sheet-up 260ms var(--ease-out); }
  dialog.sheet.closing { animation: sheet-down 208ms var(--ease-out) forwards; }
  dialog.sheet.closing::backdrop { animation: scrim-out 208ms linear forwards; }
}
/* the sheet's contents settle a beat after the sheet itself */
dialog.sheet[open]:not(.closing) .modal-body > * { animation: settle 220ms var(--ease-out) backwards; }
dialog.sheet[open] .modal-body > :nth-child(2) { animation-delay: 30ms; }
dialog.sheet[open] .modal-body > :nth-child(3) { animation-delay: 60ms; }
dialog.sheet[open] .modal-body > :nth-child(4) { animation-delay: 90ms; }
dialog.sheet[open] .modal-body > :nth-child(n+5) { animation-delay: 120ms; }
@keyframes settle { from { opacity: 0; transform: translateY(4px); } }

/* dropdowns and FAQs: open in 200ms, close in 160ms (browsers without support just snap open) */
details::details-content { block-size: 0; overflow: clip; transition: block-size 160ms var(--ease-out), content-visibility 160ms allow-discrete; }
details[open]::details-content { block-size: auto; transition-duration: 200ms; }

/* rows that swap in after a tap: 30ms apart, easing out */
.hrows.swap > * { animation: row-in 220ms var(--ease-out) both; }

/* toasts: the gooey drop (common.js). The goo is a blur plus a sharp alpha cut, so shapes that touch melt together. */
.gt { position: fixed; inset: 0 0 auto 0; width: 100%; height: 160px; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible; pointer-events: none; z-index: 400; display: none; }
.gt.on { display: block; }
.gt-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.gt-goo { position: absolute; inset: 0; filter: url(#bx-goo); }
.gt-goo i { position: absolute; display: block; background: var(--inverse); border-radius: 999px; }
.gt-src, .gt-drop { transform: scale(0); }
.gt-body { opacity: 0; border-radius: 22px !important; }
.gt.settled .gt-goo { display: none; }
.gt-pill {
  position: absolute; left: 0; right: 0; margin: 0 auto; width: fit-content; top: calc(env(safe-area-inset-top, 0px) + 12px);
  display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; min-height: 44px; max-width: calc(100vw - 32px);
  padding: 10px 18px; border-radius: 22px; overflow: hidden; opacity: 0; color: var(--on-inverse);
  font: 600 var(--t-sm)/1.35 var(--font); text-align: left; white-space: nowrap;
}
.gt.settled .gt-pill { opacity: 1; background: var(--inverse); }
:root[data-bx-theme="light"] .gt.settled .gt-pill { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.gt-ic, .gt-o-ic { flex: none; display: grid; place-items: center; width: 16px; height: 16px; }
.gt-ic[hidden], .gt-o-ic[hidden] { display: none; }
.gt-txt, .gt-o-txt { overflow: hidden; text-overflow: ellipsis; }
.gt-old { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; white-space: nowrap; }
@media (max-width: 420px) { .gt-pill { white-space: normal; } }

/* copy buttons: old and new labels overlap while they cross-fade */
.swapping { position: relative; }
.swap-old { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; gap: inherit; pointer-events: none; }
.swap-new { display: inline-flex; align-items: center; justify-content: center; gap: inherit; }
.ic-swap { position: relative; display: inline-grid; }
.ic-swap > * { grid-area: 1 / 1; }
.ic-swap > .ic-old { display: grid; place-items: center; pointer-events: none; }

/* tour: the spotlight and card curve to the next spot (left and top ease differently) */
.tour-spot { transition: left 380ms var(--ease-in-out), top 380ms var(--ease-out), width 380ms var(--ease-in-out), height 380ms var(--ease-in-out); }
.tour-card { transition: left 380ms var(--ease-in-out), top 380ms var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  details::details-content { transition: none; }
}

/* notifications: same drop, a fuller card. Tap to open, flick up to put away. */
.gt-pill.rich { pointer-events: auto; cursor: pointer; width: min(360px, calc(100vw - 32px)); min-height: 60px; justify-content: flex-start; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 30px; white-space: normal; touch-action: none; }
.gt-badge { width: 40px !important; height: 40px !important; border-radius: 50%; background: var(--forest); color: #FFFFFF; font: 700 var(--t-md)/1 var(--font); }
:is(.gt-col, .gt-o-col) { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
:is(.gt-title, .gt-o-title) { font-weight: 700; font-size: var(--t-sm); }
.rich :is(.gt-txt, .gt-o-txt) { font-weight: 500; font-size: 13px; line-height: 1.35; opacity: 0.72; }
:is(.gt-when, .gt-o-when) { align-self: flex-start; padding-top: 4px; font-size: var(--t-xs); font-weight: 600; opacity: 0.5; }
.gt-old.rich { justify-content: flex-start; gap: 12px; padding: 10px 16px 10px 10px; white-space: normal; }
.gt-pill.rich:active { transform: scale(var(--press)); transition: transform 120ms var(--ease-out); }

/* inside your core: the biggest companies under the core fund */
.inside-card .badge { font-size: 11px; }
.inside-more { align-self: flex-start; }
.inside-funds summary { list-style: none; cursor: pointer; font-size: var(--t-sm); font-weight: 600; color: var(--text-2); padding: 4px 0; }
.inside-funds summary::-webkit-details-marker { display: none; }
.if-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.if-list li { display: grid; grid-template-columns: 52px 1fr auto; gap: 8px; font-size: var(--t-sm); color: var(--muted); }
.if-list b { color: var(--text); font-weight: 700; }
.if-list em { font-style: normal; color: var(--text); font-variant-numeric: tabular-nums; }
.inside-card .tiny a { color: inherit; }
.gt-badge.is-ic svg { width: 18px; height: 18px; }

/* tapping the core fund on Home opens what's inside it, laid out like a broker's positions list */
button.hrow.tap { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; border-radius: var(--r-md); margin-inline: -8px; padding-inline: 8px; width: calc(100% + 16px); transition: background-color 120ms linear, transform 120ms var(--ease-out); }
button.hrow.tap:hover { background: var(--surface-2); }
button.hrow.tap:active { transform: scale(var(--press)); }
.in-total { display: flex; flex-direction: column; gap: 2px; }
.in-total small { font-size: var(--t-sm); color: var(--muted); }
.in-total b { font-size: var(--t-2xl, 32px); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.in-h { font-size: var(--t-lg); font-weight: 700; margin-top: 8px; }
.in-rows { list-style: none; margin: 0; padding: 0; }
.in-rows li { display: grid; grid-template-columns: minmax(0, 1fr) 26% 96px; align-items: center; gap: 16px; min-height: 68px; border-bottom: 1px solid var(--line); }
.in-rows li:last-child { border-bottom: 0; }
.in-id { min-width: 0; }
.in-id b { display: block; font-size: var(--t-md); font-weight: 700; letter-spacing: 0.01em; }
.in-id small { display: block; font-size: var(--t-sm); color: var(--muted); line-height: 1.35; }
.in-bar { position: relative; height: 18px; display: flex; align-items: center; }
.in-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dotted var(--line-2); }
.in-bar i { position: relative; display: block; height: 4px; border-radius: 2px; background: var(--accent-line); width: var(--w); }
dialog.in-sheet[open] .in-bar i { animation: in-grow 260ms var(--ease-out) backwards; transform-origin: left; }
.in-rows li:nth-child(2) .in-bar i { animation-delay: 30ms; } .in-rows li:nth-child(3) .in-bar i { animation-delay: 60ms; }
.in-rows li:nth-child(4) .in-bar i { animation-delay: 90ms; } .in-rows li:nth-child(n+5) .in-bar i { animation-delay: 120ms; }
@keyframes in-grow { from { transform: scaleX(0); } }
.in-pill { justify-self: end; min-width: 88px; padding: 9px 12px; border-radius: 10px; background: var(--accent-fill); color: var(--on-accent); font-size: var(--t-md); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.in-sheet .tiny a { color: inherit; }
@media (min-width: 760px) { dialog.in-sheet { width: min(560px, calc(100vw - 48px)); } }
@media (max-width: 759px) { dialog.in-sheet .modal-body { max-height: 88vh; overflow-y: auto; } }

/* prompts stay folded away: a label, a copy button, and the text only if you ask for it */
.copy-block:has(> .copy-peek:not([open])) .copy-head { border-bottom: 0; }
.copy-peek { border-top: 1px solid var(--line); }
.copy-peek > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  font-size: var(--t-xs); font-weight: 600; color: var(--muted); user-select: none; transition: color 120ms linear;
}
.copy-peek > summary::-webkit-details-marker { display: none; }
.copy-peek > summary::after {
  content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 160ms var(--ease-out);
}
.copy-peek[open] > summary::after { transform: translateY(1px) rotate(-135deg); transition-duration: 200ms; }
.copy-peek > summary:hover { color: var(--text); }
.copy-peek[open] > summary { border-bottom: 1px solid var(--line); }
.copy-peek pre { border-radius: 0 0 12px 12px; }
.copy-head .btn[data-copy] { min-width: 84px; }
.copy-block:has(> .copy-peek) > .copy-head { flex-wrap: nowrap; }
.copy-block:has(> .copy-peek) > .copy-head > span:first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.copy-block:has(> .copy-peek) > .copy-head > .cluster { flex: none; }