/* ============================================================
   NextGen Portfolio Lab
   Visual shell. Re-skin by editing the tokens block only.
   ============================================================ */

/* Self-hosted so the type is right before the network settles, and so a
   weak venue connection cannot leave the room looking at fallback fonts.
   Latin and latin-ext only: the guest list needs Portuguese accents, not
   Cyrillic. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/geist-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/geist-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/geist-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2212;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/geist-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/geist-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2212;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/geist-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/geist-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2212;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/geist-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF;
}

/* Real italics. Without these the browser slants the upright face, and a
   synthesised oblique is its own typographic tell. */
@font-face {
  font-family: "Geist"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/geist-italic-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2212;
}
@font-face {
  font-family: "Geist"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/geist-italic-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist"; font-style: italic; font-weight: 600; font-display: swap;
  src: url("fonts/geist-italic-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2212;
}
@font-face {
  font-family: "Geist"; font-style: italic; font-weight: 600; font-display: swap;
  src: url("fonts/geist-italic-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- surfaces: cool near-black, never pure #000 --- */
  --ink:        #0B0F14;
  --ink-2:      #0F141B;
  --surface:    #12171F;
  --surface-2:  #1A212B;
  --line:       rgba(255, 255, 255, 0.10);
  --line-soft:  rgba(255, 255, 255, 0.055);

  /* --- accent ---
     The interface is monochrome on purpose. The only saturated colour on
     any screen is the data itself, so a chart never competes with a button
     for attention, and nothing has to be re-checked for contrast against a
     tinted accent. Emphasis is carried by weight and brightness. */
  --accent:        #F2F5F9;
  --accent-bright: #FFFFFF;
  --accent-dim:    rgba(242, 245, 249, 0.10);

  /* --- text --- */
  --text:       #F2F5F9;
  --text-2:     #A3ACBA;
  --muted:      #6F7987;

  /* --- data: the only chroma. Validated for contrast and colour-blind
         separation against --surface, in the order they stack. --- */
  --series-equities:    #3987e5;
  --series-fixedincome: #d95926;
  --series-notes:       #199e70;
  --series-cash:        #c98500;
  --series-options:     #8c5cd6;   /* the options overlay */
  --pos: #199e70;
  --neg: #d95926;

  /* --- shape: one scale, used everywhere ---
         xs  bars and tracks
         sm  inputs, buttons, options
         md  cards and panels
         full pills only */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-full: 999px;

  /* kept as aliases so every existing rule resolves to the scale above */
  --radius:     var(--r-md);
  --radius-sm:  var(--r-sm);

  --maxw:       620px;

  --font-ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Display and body are the same family. A second face for headlines is
     the classic tell; weight and size carry the hierarchy instead. */
  --font-display: var(--font-ui);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  /* a slow vertical wash keeps the flat navy from reading as dead space */
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(201, 169, 107, 0.07), transparent 60%),
    var(--ink);
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; }
p { margin: 0; }
button { font-family: inherit; color: inherit; }

.display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; }

/* ============================================================
   Shell
   ============================================================ */

.shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px 120px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0 14px;
  background: linear-gradient(to bottom, var(--ink) 65%, transparent);
}

.wordmark {
  display: flex;
  /* Centre, not baseline: the mark is a block image, so baseline alignment
     put its bottom edge on the text baseline and left the logo, the rule
     and the text each on a different line. */
  align-items: center;
  gap: 0;
  font-size: 13px;
  /* Tight enough that NEXTGEN reads as one block against the weight of the
     Safra wordmark, rather than a scatter of letters beside it. */
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--text-2);
}
.wordmark b { color: var(--accent); font-weight: 600; }
/* Uppercase tracking adds a trailing space after the last letter. Pull it
   back only when nothing follows, or it swallows the real space before a
   page label and renders "NEXTGENRESPONSES". */
.wordmark b:last-child { margin-right: -0.11em; }

.step-count {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* --- progress rail: 5 segments, one per step --- */
.rail { display: flex; gap: 5px; margin-bottom: 30px; }
.rail span {
  flex: 1;
  height: 3px;
  border-radius: var(--r-xs);
  background: var(--line);
  transition: background 0.45s ease;
}
.rail span.done   { background: var(--accent); }
.rail span.active { background: var(--accent-bright); }

/* ============================================================
   Screens
   ============================================================ */

.screen { animation: rise 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .screen { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* --- welcome --- */
.hero { padding: 36px 0 0; }
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, 11vw, 58px);
  line-height: 1.04;
  margin-bottom: 20px;
}
/* Italic display words need room: leading-none clips a descender. */
.hero h1 em { font-style: italic; line-height: 1.12; padding-bottom: 2px; display: inline-block; }
.hero p {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.62;
  max-width: 44ch;
}

.steps-preview { margin: 34px 0; border-top: 1px solid var(--line-soft); }
.steps-preview div {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
  color: var(--text-2);
}
.steps-preview i {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.1em;
  min-width: 18px;
}

/* --- question block --- */
.step-head { margin-bottom: 28px; }
.step-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 7.5vw, 36px);
  line-height: 1.1;
  margin-bottom: 8px;
}
.step-head p { color: var(--muted); font-size: 14px; line-height: 1.5; }

.q { margin-bottom: 34px; }
/* The question is the headline of the screen: guests see no section title,
   so it sits between the old title size and body text. */
.q-label {
  font-family: var(--font-display);
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 6px;
  text-wrap: balance;
}
.screen-q { padding-top: 12px; }
.screen-q .q + .q { margin-top: 44px; }
.q-hint { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 14px; }
.q-label + .opts { margin-top: 14px; }

.opts { display: grid; gap: 8px; }
.opts.two { grid-template-columns: repeat(2, 1fr); }

.opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 15px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.12s;
  /* stop iOS from flashing grey on tap */
  -webkit-tap-highlight-color: transparent;
}
.opt:hover { border-color: rgba(201, 169, 107, 0.45); background: var(--surface-2); }
.opt:active { transform: scale(0.988); }
.opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.opt .tick {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  transition: border-color 0.18s, background 0.18s;
}
.opt .tick::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.18s, transform 0.18s;
  transform: scale(0.4);
}
.opt-txt { min-width: 0; }
/* Both are spans inside the button — without display:block the sub-label
   runs on from the main label on one line. */
.opt-main { display: block; font-size: 15px; font-weight: 500; line-height: 1.3; }
.opt-sub  { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; }

.opt.sel {
  border-color: var(--accent);
  background: linear-gradient(var(--accent-dim), var(--accent-dim)), var(--surface);
}
.opt.sel .tick { border-color: var(--accent); background: var(--accent-dim); }
.opt.sel .tick::after { background: var(--accent); transform: scale(1); }
.opt.sel .opt-main { color: var(--accent-bright); }

/* ============================================================
   Buttons / bottom bar
   ============================================================ */

.actions {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--ink) 62%, rgba(10, 18, 32, 0));
}
.actions-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  gap: 10px;
  align-items: center;
}

.btn {
  flex: 1;
  padding: 16px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 560;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: opacity 0.18s, transform 0.12s, background 0.18s, border-color 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.99); }
.btn-primary { background: var(--accent); color: #1A1305; }
.btn-primary:hover { background: var(--accent-bright); }
.btn-primary[disabled] { opacity: 0.3; cursor: not-allowed; }
.btn-primary[disabled]:active { transform: none; }
.btn-ghost {
  flex: 0 0 auto;
  background: transparent;
  border-color: var(--line);
  color: var(--text-2);
  padding: 16px 20px;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--text); }

/* ============================================================
   Results
   ============================================================ */

.result-head { text-align: center; padding: 20px 0 30px; }
.result-head .eyebrow { margin-bottom: 14px; }
.result-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 10vw, 52px);
  line-height: 1.05;
  color: var(--accent-bright);
  margin-bottom: 10px;
}
.result-head .tagline { color: var(--text-2); font-size: 15px; font-style: italic; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 14px;
}
.card h3 {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 18px;
}
.card p.body { color: var(--text-2); font-size: 14.5px; line-height: 1.6; }

/* --- fit meter --- */
.fit { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.fit b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 46px;
  line-height: 1;
  color: var(--accent-bright);
  font-variant-numeric: tabular-nums;
}
.fit span { font-size: 13px; color: var(--muted); }
.meter {
  height: 5px;
  border-radius: var(--r-xs);
  background: var(--line);
  overflow: hidden;
  margin-top: 12px;
}
.meter i {
  display: block;
  height: 100%;
  border-radius: var(--r-xs);
  background: var(--accent);
  transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --- key/value rows --- */
.kv { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.kv:last-child { border-bottom: 0; padding-bottom: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--text); font-weight: 500; text-align: right; }

/* --- allocation stacked bar --- */
.alloc-bar {
  display: flex;
  height: 34px;
  border-radius: var(--r-sm);
  overflow: hidden;
  /* 2px surface gaps between segments, per mark spec */
  gap: 2px;
  margin-bottom: 16px;
}
.alloc-bar i { display: block; height: 100%; transition: flex-grow 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.alloc-bar i:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.alloc-bar i:last-child  { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

.legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
.legend div { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-2); }
.legend s {
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-radius: var(--r-xs);
  text-decoration: none;
}
.legend b { margin-left: auto; color: var(--text); font-weight: 550; font-variant-numeric: tabular-nums; }

/* --- traits --- */
.traits { display: flex; flex-wrap: wrap; gap: 7px; }
.traits span {
  font-size: 12.5px;
  padding: 7px 12px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-2);
}

/* ============================================================
   Bars — room split & answer distributions
   Single hue: the row label carries identity, so hue is free to
   encode emphasis (the leading bar) instead of category.
   ============================================================ */

.bars { display: grid; gap: 13px; }
.bar-row { display: grid; gap: 6px; }
.bar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; }
.bar-name { color: var(--text-2); min-width: 0; }
.bar-val { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12.5px; flex: 0 0 auto; }
.bar-track { height: 8px; border-radius: var(--r-xs); background: var(--line-soft); overflow: hidden; }
.bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--r-xs);
  background: rgba(201, 169, 107, 0.34);
  transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bar-row.lead .bar-name { color: var(--accent-bright); font-weight: 550; }
.bar-row.lead .bar-val  { color: var(--accent); }
.bar-row.lead .bar-fill { background: var(--accent); }
.bar-row.mine .bar-name::after {
  content: "your pick";
  margin-left: 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  border-radius: var(--r-full);
  padding: 2px 7px;
  white-space: nowrap;
}

/* --- scale axis: where the room landed on a 0..3 track --- */
.scale-row { margin-bottom: 22px; }
.scale-row:last-child { margin-bottom: 0; }
.scale-q { font-size: 13.5px; color: var(--text-2); margin-bottom: 12px; }
.scale-track {
  position: relative;
  height: 3px;
  background: var(--line);
  border-radius: var(--r-xs);
  margin: 0 4px 8px;
}
.scale-track .room {
  position: absolute;
  top: 50%;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--accent);
  /* 2px surface ring so the marker reads over the track */
  box-shadow: 0 0 0 2px var(--surface);
  transform: translate(-50%, -50%);
  transition: left 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.scale-track .you {
  position: absolute;
  top: 50%;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--text-2);
  box-shadow: 0 0 0 2px var(--surface);
  transform: translate(-50%, -50%);
  transition: left 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.scale-ends { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }

.legend-inline {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.legend-inline div { display: flex; align-items: center; gap: 7px; }
.legend-inline s { width: 10px; height: 10px; border-radius: 50%; text-decoration: none; }
.legend-inline s.room { background: var(--accent); }
.legend-inline s.you  { border: 1.5px solid var(--text-2); }

/* --- notices --- */
.notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  margin-bottom: 14px;
}
.notice b { color: var(--text-2); font-weight: 600; }

.footnote {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.6;
  text-align: center;
  margin-top: 26px;
  padding: 0 10px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Identity fields (welcome screen)
   ============================================================ */

.idblock { display: grid; gap: 14px; margin: 30px 0 4px; }

.field { display: block; }
.field-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 550;
}
.field-label em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  opacity: 0.7;
}
.field-input {
  width: 100%;
  padding: 15px 16px;
  font-size: 16px;   /* 16px stops iOS zooming the page on focus */
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.18s, background 0.18s;
}
.field-input::placeholder { color: var(--muted); opacity: 0.65; }
.field-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-2);
}

/* ============================================================
   Multi-select questions
   A square tick separates "pick several" from "pick one" before
   the guest taps anything.
   ============================================================ */

.opts.multi .tick { border-radius: var(--r-xs); }
.opts.multi .tick::after { border-radius: var(--r-xs); }

.q-count {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.q-count.full { color: var(--accent); }

/* ============================================================
   Proposed portfolio — holdings and risk
   ============================================================ */

:root {
  /* Scenario outcomes. Deliberately not red/green: this pair is
     validated for CVD separation on the navy surface, and every bar is
     direct-labelled so colour is never the only cue. */
  --pos: #199e70;
  --neg: #d95926;
}

.hold { display: grid; gap: 2px; }

.hold-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 16px 0 8px;
}
.hold-group:first-child { margin-top: 0; }
.hold-group s { width: 9px; height: 9px; border-radius: var(--r-xs); text-decoration: none; flex: 0 0 auto; }
.hold-group b { margin-left: auto; color: var(--text-2); font-weight: 550; font-variant-numeric: tabular-nums; }

.hold-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.hold-row:last-child { border-bottom: 0; }
.hold-name { font-size: 14px; line-height: 1.35; color: var(--text); }
.hold-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.hold-meta .tick-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: var(--text-2);
  background: var(--surface-2);
  border-radius: var(--r-xs);
  padding: 2px 6px;
  margin-right: 7px;
}
.hold-w {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--accent-bright);
  font-weight: 550;
  align-self: start;
}
.hold-bar { grid-column: 1 / -1; height: 3px; border-radius: var(--r-xs); background: var(--line-soft); overflow: hidden; }
.hold-bar i { display: block; height: 100%; border-radius: var(--r-xs); transition: width 0.8s cubic-bezier(0.2,0.8,0.2,1); }

/* --- risk metric tiles --- */
.metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-soft); border-radius: var(--r-sm); overflow: hidden; }
.metric { background: var(--surface); padding: 14px 15px; }
.metric dt { font-size: 10.5px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.metric dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.metric dd.neg { color: var(--neg); }
/* An odd number of metrics would leave a dead cell — let the last one
   span the row instead, whatever the count. */
.metric:last-child:nth-child(odd) { grid-column: 1 / -1; }
.metric dd small { font-family: var(--font-ui); font-size: 12px; color: var(--muted); margin-left: 3px; }

/* --- scenario bars, centred on zero --- */
.scen { display: grid; gap: 14px; margin-top: 4px; }
.scen-row { display: grid; gap: 6px; }
.scen-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.scen-name { font-size: 13.5px; color: var(--text-2); font-weight: 550; }
.scen-val { font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 550; }
.scen-val.up { color: var(--pos); }
.scen-val.down { color: var(--neg); }
.scen-driver { font-size: 12px; color: var(--muted); line-height: 1.45; }

/* The axis line sits at the zero point; bars grow out from it either way. */
.scen-track { position: relative; height: 9px; background: var(--line-soft); border-radius: var(--r-xs); overflow: hidden; }
.scen-track i { position: absolute; top: 0; height: 100%; border-radius: var(--r-xs); transition: width 0.8s cubic-bezier(0.2,0.8,0.2,1); }
.scen-zero { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--line); }

.disclaim {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--ink-2);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted);
}
.disclaim b { color: var(--text-2); }

/* ============================================================
   Waiting for the next section to open
   ============================================================ */

.wait { text-align: center; padding: 60px 8px 0; }
.wait .eyebrow { margin-bottom: 14px; }
.wait h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(26px, 7vw, 34px); line-height: 1.15; text-wrap: balance;
  color: var(--accent-bright); margin-bottom: 16px;
}
.wait p { color: var(--text-2); font-size: 15px; line-height: 1.6; max-width: 38ch; margin: 0 auto; }

/* The locked screen: the Safra shield as a small gym mascot (drawn in
   app.js, mascotSVG). Colours echo the brand: navy limbs, white gloves,
   sneakers and headband. */
/* Centres whichever mascot is in it: the rendered frame sizes itself,
   the SVG fallback carries its own 150px width. */
.wait-crest { margin: 0 auto 26px; display: flex; justify-content: center; }
.mascot { display: block; width: 150px; height: auto; overflow: visible; }
.mascot .m-limb { fill: none; stroke: #2B3B86; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.mascot .m-face { fill: #FFFFFF; }
.mascot .m-band { fill: #FFFFFF; }
.mascot .m-stripe { fill: #1B2A6B; }
.mascot .m-glove { fill: #FFFFFF; }
.mascot .m-shoe { fill: #E9EDF3; stroke: #1B2A6B; stroke-width: 1.2; }
.mascot .m-bar { fill: #9AA3B2; }
.mascot .m-plate { fill: #3A4252; stroke: #586174; stroke-width: 0.8; }
.mascot .m-drop { fill: #7FB2FF; }
.mascot .m-floor { fill: rgba(242, 245, 249, 0.10); }
.mascot .m-tail { fill: #FFFFFF; }
.mascot .m-rope { fill: none; stroke: #C9D1DE; stroke-width: 1.6; stroke-linecap: round; }
.mascot .m-aura { fill: none; stroke: rgba(127, 178, 255, 0.35); stroke-width: 1; }

/* ============================================================
   Range questions (horizon, duration, USD share)
   ============================================================ */

.rng { padding: 4px 2px 0; }

.rng-read {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  color: var(--accent-bright);
  font-variant-numeric: tabular-nums;
  margin-bottom: 20px;
}

.rng-input {
  --fill: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 34px;               /* a comfortable thumb target on a phone */
  background: transparent;
  cursor: pointer;
  display: block;
}
.rng-input:focus { outline: none; }
.rng-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: var(--r-xs); }

/* WebKit needs the track and thumb styled separately from Firefox — the
   two rule sets cannot be combined or both are dropped. */
.rng-input::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--r-xs);
  background: linear-gradient(to right, var(--accent) var(--fill), var(--line) var(--fill));
}
.rng-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px; height: 26px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--accent-bright);
  border: 3px solid var(--ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.rng-input::-moz-range-track {
  height: 6px;
  border-radius: var(--r-xs);
  background: var(--line);
}
.rng-input::-moz-range-progress {
  height: 6px;
  border-radius: var(--r-xs);
  background: var(--accent);
}
.rng-input::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent-bright);
  border: 3px solid var(--ink);
}

.rng-ends {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
}

/* --- standing (where you sit against the room) --- */
.stand-head {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 18px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line-soft);
}
.stand-head b {
  font-family: var(--font-display); font-weight: 600;
  font-size: 40px; line-height: 1; color: var(--accent-bright);
  font-variant-numeric: tabular-nums;
}
.stand-head span { font-size: 14px; color: var(--text-2); line-height: 1.4; }
.stand-head + .scale-row { margin-top: 20px; }

.scale-vals { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.scale-vals b { color: var(--accent-bright); font-weight: 550; }

.stand-foot {
  font-size: 13px; color: var(--text-2); line-height: 1.55;
  margin-top: 18px !important; padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.stand-foot b { color: var(--accent-bright); }

/* ============================================================
   Brand mark
   Drop the logo at assets/brand/safra-logo.svg and it appears on every
   page. Until then the <img> removes itself and the wordmark stands
   alone, so nothing ever shows a broken-image icon on a projector.
   ============================================================ */

.brand-mark {
  /* The Safra wordmark occupies 74% of this artwork's height, so at 1.7em
     its cap height came out 1.75x NEXTGEN's and the two read as unrelated.
     At 1.3em the parent mark stays dominant, as it should, while the pair
     reads as one lockup. */
  height: 1.3em;
  width: auto;
  display: block;
  flex: 0 0 auto;
  /* A single-colour mark inherits the page's ink rather than fighting it.
     Remove this line if the logo must keep its own colours. */
  filter: brightness(0) invert(1);
}
.brand-sep {
  width: 1px;
  /* Matches the mark exactly, so the rule spans the lockup rather than
     floating inside it. */
  height: 1.3em;
  background: var(--line);
  flex: 0 0 auto;
  /* The rule carries the spacing on both sides, so the gap stays even
     whether or not the mark is present. */
  margin: 0 1em;
}
/* The img removes itself when the file is missing, which leaves the
   separator first in the row; hide it in that case. */
.wordmark > .brand-sep:first-child { display: none; }

/* The shield mascot on the hold screen: eight poses in one strip, stepped
   through so the character actually works out while a guest waits. The strip
   is animated by moving the image inside a fixed window, rather than as a
   background, so the img still fires onerror and the vector fallback can take
   over on bad venue wifi. */
.wait-mascot {
  position: relative;
  overflow: hidden;
  height: clamp(118px, 26vw, 176px);
  aspect-ratio: 256 / 240;
  /* A raw steps() flip reads as a glitch rather than a movement. Settling
     the frame as it arrives — in time with the strip, so the two never
     drift — makes it land like a pose instead of a cut. */
  animation: wait-land 0.9s ease-out infinite;
  transform-origin: 50% 92%;
}
@keyframes wait-land {
  0%   { transform: scale(1.045) translateY(-3px); }
  22%  { transform: scale(0.992) translateY(1px); }
  45%  { transform: scale(1) translateY(0); }
  100% { transform: scale(1) translateY(0); }
}
.wait-mascot img {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  width: 800%;       /* eight cells wide */
  max-width: none;
  animation: wait-strip 7.2s steps(8) infinite;
}
@keyframes wait-strip {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .wait-mascot, .wait-mascot img { animation: none; }
}

/* --- the asset summary -------------------------------------------------
   Every holding the room's answers bought, grouped by sleeve. Weights are
   of the whole book, so any line reads against any other without
   converting. Deliberately no commentary: a guest asked to see the
   portfolio wants the portfolio, and the reasoning belongs on the
   projector where it can be talked through. */
.bk-sleeves { margin-top: 22px; display: flex; flex-direction: column; gap: 20px; }

.bk-head {
  display: flex; align-items: baseline; gap: 9px;
  padding-bottom: 7px; margin-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
.bk-head s {
  width: 9px; height: 9px; border-radius: 2px;
  text-decoration: none; flex: 0 0 auto; align-self: center;
}
.bk-head h4 {
  font-size: 11px; font-weight: 550; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-2); flex: 1 1 auto;
}
.bk-head b {
  font-size: 13px; color: var(--text); font-weight: 450;
  font-variant-numeric: tabular-nums;
}

.bk-lines { list-style: none; margin: 0; padding: 0; counter-reset: bk; }
.bk-lines li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
}
.bk-lines li:last-child { border-bottom: none; }

.bk-tk {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: 0.02em;
  color: var(--text-2); background: var(--surface-2);
  border-radius: var(--r-xs); padding: 2px 6px; white-space: nowrap;
}
.bk-name { font-size: 13.5px; line-height: 1.35; color: var(--text-2); min-width: 0; }
.bk-w {
  font-size: 13.5px; font-weight: 450; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bk-tag {
  font-style: normal; font-size: 9.5px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--series-options);
  border: 1px solid var(--series-options);
  border-radius: var(--r-xs); padding: 1px 4px; margin-left: 5px;
  vertical-align: 0.1em;
}

/* Gearing, on the guest's own summary. A book that totals more than the
   capital behind it has to say so where the number is, not in a footnote. */
.bk-gross { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bk-mult {
  font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--series-options);
  border: 1px solid var(--series-options);
  border-radius: var(--r-xs); padding: 2px 7px; white-space: nowrap;
}
.bk-gross-note {
  margin: 8px 0 14px;
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.bk-gross-note b { color: var(--text-2); font-weight: 450; }