/* ==========================================================================
   Regal Investments — design system
   Palette: institutional blue, white, near-black, and a gray ramp. Nothing
   else. Type is the system stack; no web fonts, so first paint is instant.
   ========================================================================== */

:root {
  --blue-700: #0b3c8c;
  --blue-600: #0f4fb5;
  --blue:     #1565d8;
  --blue-400: #4b8bea;
  --blue-200: #a8c8f5;
  --blue-50:  #eef4fd;

  --ink:      #0c0e12;
  --ink-800:  #14171d;
  --ink-700:  #1d212a;

  --gray-600: #4d5462;
  --gray-500: #6b7280;
  --gray-400: #9aa1ad;
  --gray-300: #c7ccd4;
  --gray-200: #e2e5ea;
  --gray-100: #f0f2f5;
  --gray-50:  #f7f8fa;
  --white:    #ffffff;

  --bg:        var(--white);
  --bg-alt:    var(--gray-50);
  --fg:        var(--ink);
  --fg-muted:  var(--gray-600);
  --line:      var(--gray-200);
  --accent:    var(--blue);

  --radius:    4px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(12,14,18,.06), 0 1px 3px rgba(12,14,18,.04);
  --shadow:    0 2px 8px rgba(12,14,18,.06), 0 8px 24px rgba(12,14,18,.06);
  --shadow-lg: 0 8px 40px rgba(12,14,18,.12);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1180px;
  --gut: 24px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }

/* Phones get a wider gutter. At 24px the body copy sat hard against both edges,
   which reads as cramped against headings this size. */
@media (max-width: 720px) {
  :root { --gut: 30px; }
}

/* A declared `display` beats the hidden attribute, so restate it once here and
   stop every component having to remember. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--blue-600); text-decoration: none; }
a:hover { color: var(--blue-700); text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-weight: 640;
  letter-spacing: -.021em;
  line-height: 1.16;
  color: var(--ink);
}
h1 { font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.4rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.55rem, 1.15rem + 1.5vw, 2.3rem); letter-spacing: -.026em; }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); }
h4 { font-size: 1.05rem; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem;
}
.skip-link:focus { left: 0; }

/* ── Layout ─────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap--narrow { max-width: 760px; }
.wrap--mid    { max-width: 940px; }

.section     { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.section--sm { padding: clamp(2.5rem, 4vw, 3.5rem) 0; }
.section--dark { background: var(--ink); color: var(--gray-200); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--alt  { background: var(--bg-alt); }
.section--line { border-top: 1px solid var(--line); }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.flex { display: flex; gap: 16px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.flex-wrap { flex-wrap: wrap; }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.75rem; } .mt-4 { margin-top: 2.5rem; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.75rem; }

/* ── Typographic accents ────────────────────────────────────────────── */
.eyebrow {
  display: inline-block;
  font-size: .715rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: 1rem;
}
.section--dark .eyebrow { color: var(--blue-400); }

.lede { font-size: clamp(1.06rem, 1rem + .35vw, 1.22rem); color: var(--fg-muted); line-height: 1.62; }
.section--dark .lede { color: var(--gray-300); }
.muted { color: var(--fg-muted); }
.small { font-size: .875rem; }
.xsmall { font-size: .8rem; }
.mono { font-family: var(--mono); font-size: .85em; letter-spacing: -.01em; }

.rule {
  width: 44px; height: 3px; background: var(--blue); border-radius: 2px;
  margin: 0 0 1.5rem;
}
.rule--center { margin-left: auto; margin-right: auto; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--blue);
  --btn-fg: #fff;
  --btn-bd: var(--blue);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .78rem 1.5rem;
  font: inherit; font-size: .935rem; font-weight: 600; letter-spacing: -.005em;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-bd); border-radius: var(--radius);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { --btn-bg: var(--blue-600); --btn-bd: var(--blue-600); color: #fff; text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--ghost   { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--gray-300); }
.btn--ghost:hover { --btn-bg: var(--gray-100); --btn-fg: var(--ink); --btn-bd: var(--gray-400); }
.btn--onDark  { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.34); }
.btn--onDark:hover { --btn-bg: rgba(255,255,255,.1); --btn-bd: rgba(255,255,255,.6); }
.btn--dark    { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }
.btn--dark:hover { --btn-bg: var(--ink-700); --btn-bd: var(--ink-700); }
.btn--lg  { padding: .95rem 1.9rem; font-size: 1rem; }
.btn--sm  { padding: .5rem 1rem; font-size: .84rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Segmented control ───────────────────────────────────────────────
   Flush rectangles sharing their edges, each a different weight, the way a
   desktop dialog stacks its actions. Used for the multi-step request form. */
.btn-group {
  display: inline-flex; flex-wrap: wrap;
  border: 1px solid var(--ink); border-radius: 0;
  overflow: hidden;
}
.btn-group .btn {
  border-radius: 0;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.22);
  margin: 0;
  padding: .85rem 1.9rem;
  transform: none;
}
.btn-group .btn:last-child { border-right: 0; }
.btn-group .btn:hover { transform: none; }
.btn-group .btn[hidden] { display: none; }

/* The three weights, left to right: retreat, neutral, commit. */
.btn-seq--gray  { --btn-bg: var(--gray-200); --btn-fg: var(--ink);  --btn-bd: transparent; }
.btn-seq--gray:hover  { --btn-bg: var(--gray-300); --btn-fg: var(--ink); }
.btn-seq--dark  { --btn-bg: var(--ink);      --btn-fg: #fff;        --btn-bd: transparent; }
.btn-seq--dark:hover  { --btn-bg: var(--ink-700); --btn-fg: #fff; }
.btn-seq--blue  { --btn-bg: var(--blue);     --btn-fg: #fff;        --btn-bd: transparent; }
.btn-seq--blue:hover  { --btn-bg: var(--blue-600); --btn-fg: #fff; }

@media (max-width: 520px) {
  .btn-group { display: flex; width: 100%; }
  .btn-group .btn { flex: 1; padding: .85rem .75rem; font-size: .88rem; }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .92rem; color: var(--blue-600);
}
.link-arrow::after { content: "→"; transition: transform .2s var(--ease); }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover::after { transform: translateX(4px); }

/* ── Header ─────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand img { height: 26px; width: auto; }
.brand:hover { text-decoration: none; }
.brand__mark {
  font-weight: 680; font-size: 1.02rem; letter-spacing: -.028em; color: var(--ink);
  /* Never wrap the wordmark. Allowing the brand block to shrink is what stops
     the header overflowing, but it must shrink by type size, not by folding
     the name onto two lines. */
  white-space: nowrap;
}
.brand__sub {
  font-size: .64rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gray-500); font-weight: 600; padding-left: 10px; margin-left: 2px;
  border-left: 1px solid var(--line);
  white-space: nowrap;
}

/* "Private Clients" is a wider label than "Public", and at phone widths the two
   together pushed the menu button past the edge. Tighten rather than drop it —
   knowing which portal you are in matters more than the few pixels. */
@media (max-width: 480px) {
  .site-header__inner { gap: 12px; }
  .brand { gap: 8px; }
  .brand img { height: 22px; }
  .brand__mark { font-size: .92rem; }
  .brand__sub { font-size: .55rem; letter-spacing: .1em; padding-left: 8px; margin-left: 0; }
  .nav-toggle { padding: .45rem .6rem; font-size: .8rem; }
}

.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a {
  padding: .5rem .72rem; border-radius: 0;
  font-size: .905rem; font-weight: 520; color: var(--gray-600);
  transition: color .15s var(--ease), background .15s var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--gray-100); text-decoration: none; }
.nav a.is-active { color: var(--blue-600); font-weight: 620; }
/* A .btn inside .nav must keep the button's own colours, which the rules above
   would otherwise win on specificity. */
.nav a.btn { color: var(--btn-fg); background: var(--btn-bg); }
.nav a.btn:hover { color: var(--btn-fg); background: var(--btn-bg); }
.nav__divider { width: 1px; height: 22px; background: var(--line); margin: 0 10px; }

.nav-toggle {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  padding: .5rem .7rem; cursor: pointer; color: var(--ink);
  font: inherit; font-size: .85rem; font-weight: 600;
}
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 68px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 8px var(--gut) 20px; margin-left: 0;
    box-shadow: var(--shadow);
    max-height: calc(100vh - 68px); overflow-y: auto;
  }
  .nav[hidden] { display: none; }
  .nav a { padding: .8rem .2rem; border-bottom: 1px solid var(--gray-100); border-radius: 0; font-size: 1rem; }
  .nav__divider { display: none; }
  .nav .btn { margin-top: 12px; }
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: var(--gray-400); padding: 4rem 0 2rem; font-size: .9rem; }
.site-footer h4 {
  color: #fff; font-size: .715rem; letter-spacing: .15em; text-transform: uppercase;
  margin-bottom: 1.1rem; font-weight: 700;
}
.site-footer a { color: var(--gray-400); }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .55rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-bottom {
  margin-top: 3rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .8rem; color: var(--gray-500);
}
.legal-note {
  font-size: .78rem; line-height: 1.6; color: var(--gray-500);
  border-left: 2px solid rgba(255,255,255,.14); padding-left: 1rem; margin-top: 1.5rem;
}

/* ── Cards ──────────────────────────────────────────────────────────── */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card--link:hover { border-color: var(--blue-200); box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; }
.card--flat { box-shadow: none; }
.card--pad-sm { padding: 1.25rem; }
.card__title { font-size: 1.1rem; font-weight: 640; margin-bottom: .45rem; color: var(--ink); }
.card__body  { color: var(--fg-muted); font-size: .935rem; margin: 0; }
.card__index {
  font-family: var(--mono); font-size: .74rem; color: var(--blue);
  letter-spacing: .08em; font-weight: 600; margin-bottom: .9rem; display: block;
}

.section--dark .card {
  background: var(--ink-800); border-color: rgba(255,255,255,.1);
}
.section--dark .card__title { color: #fff; }
.section--dark .card__body { color: var(--gray-400); }

/* ── Badges & chips ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .22rem .55rem; border-radius: 3px;
  font-size: .71rem; font-weight: 680; letter-spacing: .05em; text-transform: uppercase;
  background: var(--blue-50); color: var(--blue-700); border: 1px solid transparent;
}
.badge--gray    { background: var(--gray-100); color: var(--gray-600); }
.badge--outline { background: transparent; color: var(--gray-600); border-color: var(--gray-300); }
.badge--dark    { background: var(--ink); color: #fff; }
.badge--ok      { background: #e7f5ec; color: #17683a; }
.badge--warn    { background: #fdf3e3; color: #8a5a10; }
.badge--danger  { background: #fdeaea; color: #9a2020; }
.badge--live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: .3rem .7rem; border-radius: 999px; font-size: .8rem;
  background: var(--gray-100); color: var(--gray-600); border: 1px solid var(--line);
}

/* ── Forms ──────────────────────────────────────────────────────────── */
.field { margin-bottom: 1.15rem; }
.field label, .label {
  display: block; font-size: .83rem; font-weight: 620; color: var(--ink-700);
  margin-bottom: .4rem; letter-spacing: -.005em;
}
/* Works inside a .field and standalone; the fund demo uses it outside one. */
.hint { font-size: .79rem; color: var(--gray-500); margin-top: .35rem; }

.input, .select, .textarea {
  width: 100%; padding: .72rem .85rem;
  font: inherit; font-size: .94rem; color: var(--ink);
  background: #fff; border: 1px solid var(--gray-300); border-radius: var(--radius);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
  appearance: none;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--gray-400); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(21,101,216,.14);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] {
  border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.1);
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; padding-right: 2.4rem;
}

.check { display: flex; gap: .65rem; align-items: flex-start; font-size: .9rem; line-height: 1.5; }
.check input { margin-top: .25rem; width: 16px; height: 16px; accent-color: var(--blue); flex-shrink: 0; }
.check label, .check span { font-weight: 450; color: var(--fg-muted); margin: 0; font-size: .9rem; }

.field-error { color: #c0392b; font-size: .82rem; margin-top: .35rem; font-weight: 520; }

fieldset { border: 0; padding: 0; margin: 0 0 2rem; }
legend {
  padding: 0; margin-bottom: 1.1rem; font-size: .74rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--blue-600);
}

/* Bot trap: a real person never sees or fills this. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Alerts ─────────────────────────────────────────────────────────── */
.alert {
  padding: .9rem 1.1rem; border-radius: var(--radius); margin-bottom: 1.5rem;
  font-size: .92rem; border: 1px solid; display: flex; gap: .6rem; align-items: flex-start;
}
.alert--info    { background: var(--blue-50); border-color: var(--blue-200); color: var(--blue-700); }
.alert--success { background: #e9f7ee; border-color: #b8e3c6; color: #17683a; }
.alert--error   { background: #fdeceb; border-color: #f4c4bf; color: #a02a1c; }
.alert--warn    { background: #fdf6e7; border-color: #f0dcae; color: #7a5510; }
.alert a { color: inherit; text-decoration: underline; font-weight: 600; }

/* ── Gate (landing) ─────────────────────────────────────────────────── */
.gate {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--ink); color: #fff;
}
.gate__head { padding: 2.2rem var(--gut) 1rem; }
.gate__brand { display: flex; align-items: center; gap: 14px; }
.gate__brand img { height: 30px; }
.gate__panels { flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
@media (max-width: 880px) { .gate__panels { grid-template-columns: 1fr; } }

.gate__panel {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem);
  min-height: 46vh; overflow: hidden; color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  text-decoration: none;
  transition: background .4s var(--ease);
}
.gate__panel:hover { text-decoration: none; color: #fff; }
.gate__panel::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transform: scale(1.03);
  transition: transform .8s var(--ease), opacity .5s var(--ease);
  opacity: .34;
}
.gate__panel--private::before {
  background-image: url("/assets/img/bg2.webp"), url("/assets/img/bg2.jpg");
}
.gate__panel--public::before {
  /* No photograph here: a fine grid over a blue field, so the two panels read as
     a pair without the public side looking like a blurred logo. */
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
  background-color: #0d1f3d;
  opacity: .9;
}
.gate__panel--public:hover::before { transform: scale(1); opacity: 1; }
.gate__panel::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(12,14,18,.55) 0%, rgba(12,14,18,.88) 62%, rgba(12,14,18,.96) 100%);
  transition: background .4s var(--ease);
}
.gate__panel--public::after {
  background: linear-gradient(180deg, rgba(11,60,140,.5) 0%, rgba(12,14,18,.9) 64%, rgba(12,14,18,.97) 100%);
}
.gate__panel:hover::before { transform: scale(1.09); opacity: .46; }
.gate__panel > * { position: relative; z-index: 2; }

.gate__label {
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--blue-400); font-weight: 700; margin-bottom: 1.1rem;
}
.gate__panel h2 {
  font-size: clamp(1.8rem, 1.1rem + 2.4vw, 2.8rem); color: #fff; margin-bottom: .6rem;
  letter-spacing: -.03em;
}
.gate__panel p { color: var(--gray-300); max-width: 42ch; font-size: 1rem; margin-bottom: 1.6rem; }
.gate__points {
  list-style: none; padding: 0; margin: 0 0 1.8rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  font-size: .84rem; color: var(--gray-400);
}
.gate__points li { display: flex; align-items: center; gap: .45rem; }
.gate__points li::before { content: ""; width: 4px; height: 4px; background: var(--blue-400); border-radius: 50%; }
.gate__enter {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 620; font-size: .98rem; color: #fff;
  padding-bottom: .4rem; border-bottom: 1px solid rgba(255,255,255,.3);
  transition: gap .25s var(--ease), border-color .25s var(--ease);
}
.gate__panel:hover .gate__enter { gap: 1.1rem; border-color: var(--blue-400); }
.gate__foot {
  padding: 1.5rem var(--gut) 2rem; font-size: .78rem; color: var(--gray-500);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.08);
}
.gate__foot a { color: var(--gray-400); }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff;
  padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(3.5rem, 7vw, 6rem);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(21,101,216,.34), transparent 62%),
    radial-gradient(760px 420px at 6% 104%, rgba(21,101,216,.13), transparent 60%);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero h1 { color: #fff; max-width: 17ch; }
.hero__lede { font-size: clamp(1.05rem, .98rem + .5vw, 1.28rem); color: var(--gray-300); max-width: 60ch; margin-bottom: 2.2rem; }
.hero--split { display: grid; }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; gap: 36px; } }

.hero--compact { padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem); }
.hero--light { background: var(--bg-alt); color: var(--ink); border-bottom: 1px solid var(--line); }
.hero--light::before { display: none; }
.hero--light h1 { color: var(--ink); }
.hero--light .hero__lede { color: var(--fg-muted); }

/* Ladder graphic used in the public hero */
.ladder { display: grid; gap: 1px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); overflow: hidden; }
.ladder__row {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 14px;
  padding: .95rem 1.25rem; background: var(--ink-800);
  transition: background .2s var(--ease);
}
.ladder__row:hover { background: var(--ink-700); }
.ladder__n { font-family: var(--mono); font-size: .74rem; color: var(--blue-400); font-weight: 600; }
.ladder__t { font-size: .94rem; font-weight: 580; color: #fff; }
.ladder__m { font-size: .78rem; color: var(--gray-500); }

/* ── Stats ──────────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: #fff; padding: 1.6rem 1.4rem; }
.section--dark .stat, .hero .stat { background: var(--ink-800); }
.stat__n {
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); font-weight: 680;
  letter-spacing: -.035em; color: var(--ink); line-height: 1.1;
}
.section--dark .stat__n, .hero .stat__n { color: #fff; }
.stat__l { font-size: .8rem; color: var(--gray-500); margin-top: .35rem; }
.hero .stats, .section--dark .stats { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.12); }

/* ── Blueprint cards ────────────────────────────────────────────────── */
.track-head { margin: 3rem 0 1.75rem; }
.track-head:first-of-type { margin-top: 0; }
.track-head h2 { font-size: 1.35rem; margin: 0; }

.bp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
@media (max-width: 560px) { .bp-grid { grid-template-columns: 1fr; } }

.bp-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; color: inherit;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.bp-card:hover { border-color: var(--blue-200); box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; }
.bp-card__accent { height: 3px; background: var(--accent); }
.bp-card__body { padding: 1.6rem; flex: 1; display: flex; flex-direction: column; }
.bp-card__meta { display: flex; gap: .6rem; align-items: center; margin-bottom: .9rem; flex-wrap: wrap; }
.bp-card h3 { font-size: 1.2rem; margin-bottom: .45rem; letter-spacing: -.024em; }
.bp-card__sub { color: var(--fg-muted); font-size: .925rem; margin-bottom: 1.2rem; flex: 1; }
.bp-card__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-top: 1.1rem; border-top: 1px solid var(--gray-100);
  font-size: .81rem; color: var(--gray-500);
}

/* ── Progress ───────────────────────────────────────────────────────── */
.progress {
  height: 5px; background: var(--gray-200); border-radius: 999px; overflow: hidden;
}
.progress__bar { height: 100%; background: var(--blue); border-radius: 999px; transition: width .5s var(--ease); }
.progress--thin { height: 3px; }
.section--dark .progress { background: rgba(255,255,255,.14); }

.progress-ring { display: grid; place-items: center; position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.progress-ring svg { transform: rotate(-90deg); width: 56px; height: 56px; }
.progress-ring__track { fill: none; stroke: var(--gray-200); stroke-width: 4; }
.progress-ring__bar   { fill: none; stroke: var(--blue); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .6s var(--ease); }
.progress-ring__pct {
  position: absolute; font-size: .72rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em;
}

/* ── Curriculum / study view ────────────────────────────────────────── */
.study {
  display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 0;
  min-height: calc(100vh - 68px);
  align-items: stretch;
}
@media (max-width: 1000px) { .study { grid-template-columns: 1fr; } }

.study__aside {
  border-right: 1px solid var(--line); background: var(--bg-alt);
  padding: 1.75rem 1.4rem 3rem;
  position: sticky; top: 68px; align-self: start;
  max-height: calc(100vh - 68px); overflow-y: auto;
}
@media (max-width: 1000px) {
  .study__aside { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); }
}
.study__main { padding: 2.5rem clamp(1.25rem, 3.5vw, 3.25rem) 5rem; min-width: 0; max-width: 820px; }

.curriculum { list-style: none; margin: 0; padding: 0; }
.curriculum__module { margin-bottom: 1.5rem; }
.curriculum__module > h4 {
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gray-500); font-weight: 700; margin-bottom: .6rem;
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
}
.curriculum__list { list-style: none; margin: 0; padding: 0; }
.curriculum__item a {
  display: grid; grid-template-columns: 18px 1fr; gap: .65rem; align-items: start;
  padding: .52rem .6rem; border-radius: var(--radius);
  font-size: .885rem; color: var(--gray-600); line-height: 1.42;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.curriculum__item a:hover { background: #fff; color: var(--ink); text-decoration: none; }
.curriculum__item.is-current a { background: #fff; color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.curriculum__item.is-locked a { color: var(--gray-400); }
.curriculum__tick {
  width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--gray-300);
  display: grid; place-items: center; margin-top: 1px; flex-shrink: 0;
  font-size: 10px; color: transparent; line-height: 1;
}
.curriculum__item.is-done .curriculum__tick { background: var(--blue); border-color: var(--blue); color: #fff; }
.curriculum__item.is-done a { color: var(--gray-500); }

.lesson-body { font-size: 1.035rem; line-height: 1.72; color: var(--ink-700); }
.lesson-body h3 { margin: 2.4rem 0 .8rem; font-size: 1.32rem; letter-spacing: -.024em; }
.lesson-body h3:first-child { margin-top: 0; }
.lesson-body h4 { margin: 1.9rem 0 .6rem; font-size: 1.04rem; color: var(--blue-700); }
.lesson-body ul, .lesson-body ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.lesson-body li { margin-bottom: .5rem; }
.lesson-body blockquote {
  margin: 1.6rem 0; padding: 1rem 1.35rem;
  border-left: 3px solid var(--blue); background: var(--blue-50);
  color: var(--blue-700); font-size: .97rem; border-radius: 0 var(--radius) var(--radius) 0;
}
.lesson-body blockquote p:last-child { margin-bottom: 0; }
.lesson-body code {
  font-family: var(--mono); font-size: .875em;
  background: var(--gray-100); padding: .12em .38em; border-radius: 3px; color: var(--ink);
}
.lesson-body strong { font-weight: 640; color: var(--ink); }

.practice-box {
  margin-top: 2.5rem; padding: 1.6rem; border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: var(--bg-alt);
}
.practice-box h4 {
  font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--blue-600); margin-bottom: .9rem; font-weight: 700;
}

.lesson-nav {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line);
}

/* ── Tables ─────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.table { width: 100%; border-collapse: collapse; font-size: .89rem; background: #fff; }
.table th, .table td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--gray-100); }
.table th {
  font-size: .71rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gray-500); font-weight: 700; background: var(--bg-alt); white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--gray-50); }

/* ── Pricing ────────────────────────────────────────────────────────── */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 20px; align-items: stretch; }
.price {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.9rem 1.6rem;
  position: relative;
}
.price--featured { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), var(--shadow); }
.price__flag {
  position: absolute; top: -1px; right: 1.4rem; transform: translateY(-50%);
  background: var(--blue); color: #fff; font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: .28rem .6rem; border-radius: 3px;
}
.price__name { font-size: 1.05rem; font-weight: 660; margin-bottom: .3rem; }
.price__tag { font-size: .85rem; color: var(--gray-500); margin-bottom: 1.4rem; min-height: 2.5em; }
.price__amount { font-size: 2.35rem; font-weight: 680; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.price__per { font-size: .85rem; color: var(--gray-500); margin-left: .25rem; font-weight: 450; letter-spacing: 0; }
.price__list { list-style: none; margin: 1.6rem 0; padding: 0; flex: 1; font-size: .885rem; }
.price__list li {
  display: grid; grid-template-columns: 16px 1fr; gap: .6rem;
  padding: .42rem 0; color: var(--fg-muted); line-height: 1.45;
}
.price__list li::before { content: "✓"; color: var(--blue); font-weight: 700; font-size: .82rem; }

.pay-choice { display: grid; gap: 10px; }
.pay-option {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.1rem; border: 1px solid var(--gray-300); border-radius: var(--radius);
  cursor: pointer; background: #fff;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.pay-option:hover { border-color: var(--blue-400); background: var(--blue-50); }
.pay-option input { accent-color: var(--blue); width: 17px; height: 17px; flex-shrink: 0; }
.pay-option__t { font-weight: 600; font-size: .94rem; }
.pay-option__d { font-size: .82rem; color: var(--gray-500); }
.pay-option:has(input:checked) { border-color: var(--blue); background: var(--blue-50); box-shadow: 0 0 0 1px var(--blue); }

/* ── Feature list ───────────────────────────────────────────────────── */
.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list li {
  /* Indent from the marker rather than using a grid. A grid makes every text
     node an anonymous item, so a <li> containing "<strong>X</strong> — rest"
     put the trailing text in its own min-content column, one word per line. */
  position: relative; padding: .55rem 0 .55rem 1.6rem;
  font-size: .95rem; color: var(--fg-muted); line-height: 1.55;
}
.feature-list li::before {
  content: "→"; position: absolute; left: 0; top: .55rem;
  color: var(--blue); font-weight: 700; line-height: 1.55;
}
.section--dark .feature-list li { color: var(--gray-400); }

/* ── Steps ──────────────────────────────────────────────────────────── */
.steps { counter-reset: step; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.step { background: #fff; padding: 1.6rem 1.75rem; display: grid; grid-template-columns: 40px 1fr; gap: 1.25rem; align-items: start; }
.step__n {
  counter-increment: step;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--blue-50); color: var(--blue-700);
  display: grid; place-items: center; font-size: .82rem; font-weight: 700;
  font-family: var(--mono);
}
.step__n::before { content: counter(step, decimal-leading-zero); }
.step h4 { margin-bottom: .3rem; }
.step p { font-size: .92rem; color: var(--fg-muted); margin: 0; }

/* ── Dashboard ──────────────────────────────────────────────────────── */
.dash-head { background: var(--ink); color: #fff; padding: 2.6rem 0 2.2rem; }
.dash-head h1 { color: #fff; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.15rem); margin-bottom: .3rem; }
.dash-head p { color: var(--gray-400); margin: 0; }
.dash-tabs {
  display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line);
  background: #fff; position: sticky; top: 68px; z-index: 40;
}
.dash-tabs a {
  padding: .95rem .2rem; margin-right: 1.5rem; white-space: nowrap;
  font-size: .9rem; font-weight: 560; color: var(--gray-500);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.dash-tabs a:hover { color: var(--ink); text-decoration: none; }
.dash-tabs a.is-active { color: var(--blue-600); border-bottom-color: var(--blue); font-weight: 640; }

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem 1.35rem; }
.kpi__l { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-500); font-weight: 700; }
.kpi__n { font-size: 1.75rem; font-weight: 680; letter-spacing: -.035em; margin-top: .35rem; line-height: 1; }

.empty {
  text-align: center; padding: 3.5rem 1.5rem; border: 1px dashed var(--gray-300);
  border-radius: var(--radius-lg); color: var(--gray-500); background: var(--bg-alt);
}

/* ── Auth pages ─────────────────────────────────────────────────────── */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .auth-shell { grid-template-columns: 1fr; } }
.auth-shell__aside {
  background: var(--ink); color: #fff; padding: clamp(2.5rem, 5vw, 4rem);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.auth-shell__aside::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(760px 480px at 80% 10%, rgba(21,101,216,.35), transparent 60%);
}
.auth-shell__aside > * { position: relative; }
@media (max-width: 900px) { .auth-shell__aside { display: none; } }
.auth-shell__main {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(2rem, 5vw, 4rem) var(--gut);
}
.auth-card { width: 100%; max-width: 420px; }

/* ── Timeline ───────────────────────────────────────────────────────── */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.timeline li { position: relative; padding: 0 0 1.6rem 2rem; }
.timeline li::before {
  content: ""; position: absolute; left: 3px; top: 7px;
  width: 9px; height: 9px; border-radius: 50%; background: #fff;
  border: 2px solid var(--gray-300);
}
.timeline li.is-active::before { border-color: var(--blue); background: var(--blue); }
.timeline h4 { margin-bottom: .2rem; font-size: .98rem; }
.timeline p { font-size: .88rem; color: var(--fg-muted); margin: 0; }

/* ── Utility ────────────────────────────────────────────────────────── */
.divider-label {
  display: flex; align-items: center; gap: 1rem; margin: 1.75rem 0;
  font-size: .78rem; color: var(--gray-400); text-transform: uppercase; letter-spacing: .1em; font-weight: 600;
}
.divider-label::before, .divider-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.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;
}

@media print {
  .site-header, .site-footer, .dash-tabs, .btn, .study__aside { display: none !important; }
  body { background: #fff; }
}

/* ── Content + sticky aside ─────────────────────────────────────────── */
.split-aside { display: grid; grid-template-columns: 1.4fr .6fr; gap: 56px; align-items: start; }
.split-aside__side { position: sticky; top: 90px; }
@media (max-width: 900px) {
  .split-aside { grid-template-columns: 1fr; gap: 32px; }
  .split-aside__side { position: static; }
}
.hero__grid--wide { grid-template-columns: 1.25fr .75fr; }
@media (max-width: 900px) { .hero__grid--wide { grid-template-columns: 1fr; } }
.stats--2 { grid-template-columns: repeat(2, 1fr) !important; }
.stack-14 > * + * { margin-top: 14px; }

/* ── Inline checkout ────────────────────────────────────────────────── */
.pay-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 1.5rem;
  margin-bottom: 1rem;
}
.pay-panel__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.pay-panel__title { font-size: 1.02rem; font-weight: 640; margin: 0; letter-spacing: -.015em; }
.pay-panel__note  { font-size: .82rem; color: var(--gray-500); }
.pay-panel__loading {
  display: flex; align-items: center; gap: .6rem;
  font-size: .87rem; color: var(--gray-500); padding: 1rem 0;
}

/* PayPal injects its own iframe here; reserve height so the panel does not
   jump when the buttons finish rendering. */
[data-paypal] { min-height: 52px; }

.spinner {
  width: 15px; height: 15px; flex-shrink: 0;
  border: 2px solid var(--gray-300);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* ── Renewal notice ─────────────────────────────────────────────────── */
.renew-banner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  padding: 1rem 1.25rem; margin-bottom: 1.5rem;
  border: 1px solid var(--blue-200); background: var(--blue-50);
  border-radius: var(--radius-lg);
}
.renew-banner__text { font-size: .92rem; color: var(--blue-700); margin: 0; }
.renew-banner--urgent { border-color: #f0dcae; background: #fdf6e7; }
.renew-banner--urgent .renew-banner__text { color: #7a5510; }

/* ── Career map ─────────────────────────────────────────────────────── */
.career-region-bar { margin-top: 2rem; }
.region-switch {
  display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.region-switch .select { width: auto; min-width: 200px; padding-top: .5rem; padding-bottom: .5rem; font-size: .88rem; }
.hero .region-switch label { color: var(--gray-400); }

.career-nav {
  position: sticky; top: 68px; z-index: 40;
  background: #fff; border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.career-nav .wrap { display: flex; gap: 1.6rem; }
.career-nav a {
  padding: .9rem 0; white-space: nowrap;
  font-size: .88rem; font-weight: 560; color: var(--gray-500);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.career-nav a:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--gray-300); }

/* Credential meta: label/value pairs that stay readable when they wrap. */
.cred-meta { margin: 1rem 0 0; padding: .9rem 0 0; border-top: 1px solid var(--gray-100); display: grid; gap: .5rem; }
.cred-meta > div { display: grid; grid-template-columns: 88px 1fr; gap: .8rem; align-items: baseline; }
.cred-meta dt {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gray-500); font-weight: 700;
}
.cred-meta dd { margin: 0; font-size: .82rem; color: var(--fg-muted); line-height: 1.5; }
@media (max-width: 480px) {
  .cred-meta > div { grid-template-columns: 1fr; gap: .1rem; }
}

.role-card { display: grid; grid-template-columns: 1fr 210px; gap: 28px; align-items: start; }
.role-card__pay {
  border-left: 1px solid var(--gray-100); padding-left: 24px;
}
.role-card__range {
  font-size: 1.22rem; font-weight: 680; letter-spacing: -.03em; color: var(--ink); line-height: 1.15;
}
@media (max-width: 720px) {
  .role-card { grid-template-columns: 1fr; gap: 16px; }
  .role-card__pay { border-left: 0; padding-left: 0; border-top: 1px solid var(--gray-100); padding-top: 14px; }
}

/* ── Job board ──────────────────────────────────────────────────────── */
.job-filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--bg-alt);
}
.job-filters .select { width: auto; min-width: 150px; padding-top: .55rem; padding-bottom: .55rem; font-size: .88rem; }

.job-card {
  display: grid; grid-template-columns: 1fr 180px; gap: 24px; align-items: start;
  color: inherit;
}
.job-card__main  { display: block; min-width: 0; }
.job-card__head  { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .2rem; }
.job-card__org   { display: block; font-size: .9rem; color: var(--blue-600); font-weight: 560; margin-bottom: .6rem; }
.job-card__summary { display: block; font-size: .91rem; color: var(--fg-muted); line-height: 1.55; }
.job-card__meta  {
  display: flex; flex-direction: column; gap: .3rem; text-align: right;
  border-left: 1px solid var(--gray-100); padding-left: 20px;
}
.job-card__pay   { font-size: .98rem; font-weight: 660; letter-spacing: -.02em; color: var(--ink); }
@media (max-width: 720px) {
  .job-card { grid-template-columns: 1fr; gap: 14px; }
  .job-card__meta { text-align: left; border-left: 0; padding-left: 0; border-top: 1px solid var(--gray-100); padding-top: 12px; }
}

/* ── Media kit ──────────────────────────────────────────────────────── */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 22px;
}
.media-item { margin: 0; }
.media-item img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--gray-100);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.media-item a:hover img { border-color: var(--blue-200); box-shadow: var(--shadow); transform: translateY(-2px); }
.media-item figcaption { padding-top: .7rem; }
.media-item__title {
  display: block; font-size: .83rem; font-weight: 580; color: var(--ink-700);
  line-height: 1.35; margin-bottom: .35rem;
}
.media-item__links { display: flex; gap: .55rem; flex-wrap: wrap; }
.media-item__links a {
  font-size: .73rem; font-weight: 620; color: var(--gray-500);
  padding: .18rem .45rem; border: 1px solid var(--line); border-radius: 3px;
}
.media-item__links a:hover { color: var(--blue-600); border-color: var(--blue-200); background: var(--blue-50); text-decoration: none; }
.section--dark .media-item img { border-color: rgba(255,255,255,.12); }

/* ── Module exercises ───────────────────────────────────────────────── */
.exercises { margin-top: 2.5rem; }
.exercises__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; margin-bottom: 1.1rem;
  padding-bottom: .7rem; border-bottom: 2px solid var(--ink);
}
.exercises__head h3 { margin: 0; font-size: 1.05rem; }

.exercise {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.6rem; margin-bottom: 1rem; background: #fff;
}
.exercise__title { font-size: 1rem; margin-bottom: .5rem; }
.exercise__intro { font-size: .92rem; color: var(--fg-muted); margin-bottom: 1.3rem; line-height: 1.6; }

/* ── Self-check ─────────────────────────────────────────────────────── */
.qlist { list-style: none; margin: 0; padding: 0; counter-reset: q; }
.q { padding: 1.1rem 0; border-top: 1px solid var(--gray-100); counter-increment: q; }
.q:first-child { border-top: 0; padding-top: 0; }
.q__text {
  font-size: .97rem; font-weight: 560; color: var(--ink); margin-bottom: .9rem; line-height: 1.5;
}
.q__text::before {
  content: counter(q) "."; color: var(--blue); font-weight: 700; margin-right: .45rem;
}
.q__options { display: grid; gap: 7px; }
.q__opt {
  display: grid; grid-template-columns: 26px 1fr; gap: .6rem; align-items: start;
  width: 100%; text-align: left; padding: .7rem .85rem;
  font: inherit; font-size: .9rem; line-height: 1.45; color: var(--ink-700);
  background: #fff; border: 1px solid var(--gray-300); border-radius: var(--radius);
  cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease);
}
.q__opt:hover:not(:disabled) { border-color: var(--blue-400); background: var(--blue-50); }
.q__opt:disabled { cursor: default; }
.q__letter {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 3px;
  background: var(--gray-100); color: var(--gray-600);
  font-size: .72rem; font-weight: 700; margin-top: .05rem;
}
.q__opt.is-correct { border-color: #17683a; background: #e9f7ee; color: #17683a; }
.q__opt.is-correct .q__letter { background: #17683a; color: #fff; }
.q__opt.is-wrong { border-color: #c0392b; background: #fdeceb; color: #a02a1c; }
.q__opt.is-wrong .q__letter { background: #c0392b; color: #fff; }
.q__why {
  margin-top: .8rem; padding: .85rem 1rem; border-left: 3px solid var(--blue);
  background: var(--bg-alt); border-radius: 0 var(--radius) var(--radius) 0;
}
.q__why p { font-size: .89rem; line-height: 1.6; color: var(--fg-muted); margin: .25rem 0 0; }
.q__verdict { font-size: .84rem; font-weight: 700; letter-spacing: -.01em; }
.q__verdict.is-right { color: #17683a; }
.q__verdict.is-off { color: #a02a1c; }

/* ── Sorting task ───────────────────────────────────────────────────── */
.sorter__pool { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.2rem; min-height: 10px; }
.sorter__item {
  font: inherit; font-size: .87rem; line-height: 1.4; text-align: left;
  padding: .6rem .8rem; background: #fff; color: var(--ink-700);
  border: 1px solid var(--gray-300); border-radius: var(--radius); cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
  max-width: 100%;
}
.sorter__item:hover:not(:disabled) { border-color: var(--blue-400); background: var(--blue-50); }
.sorter__item.is-selected { border-color: var(--blue); background: var(--blue-50); box-shadow: 0 0 0 1px var(--blue); }
.sorter__item.is-placed { display: block; width: 100%; cursor: default; margin-bottom: 6px; }
.sorter__item.is-right { border-color: #b8e3c6; background: #e9f7ee; }
.sorter__item.is-off { border-color: #f4c4bf; background: #fdeceb; }
.sorter__why {
  display: block; margin-top: .4rem; font-size: .8rem; line-height: 1.5;
  color: var(--gray-600); font-weight: 450;
}
.sorter__buckets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 620px) { .sorter__buckets { grid-template-columns: 1fr; } }
.sorter__bucket {
  border: 1px dashed var(--gray-300); border-radius: var(--radius-lg);
  padding: .9rem; background: var(--bg-alt); cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.sorter__bucket:hover { border-color: var(--blue); background: var(--blue-50); }
.sorter__bucket-label {
  font-size: .73rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gray-600); margin-bottom: .7rem;
}
.sorter__drop { min-height: 48px; }
.sorter__hint { font-size: .84rem; color: var(--gray-500); margin: .9rem 0 0; }
.sorter__score {
  margin-top: .9rem; padding: .8rem 1rem; border-radius: var(--radius);
  background: var(--bg-alt); border-left: 3px solid var(--blue);
  font-size: .9rem; font-weight: 560; color: var(--ink-700);
}
.sorter__score.is-right { background: #e9f7ee; border-left-color: #17683a; color: #17683a; }

/* ── Calculator ─────────────────────────────────────────────────────── */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 760px) { .calc { grid-template-columns: 1fr; gap: 20px; } }
.calc__field { margin-bottom: 1.05rem; }
.calc__field > label {
  display: block; font-size: .82rem; font-weight: 600; color: var(--ink-700); margin-bottom: .35rem;
}
.calc__control { display: flex; align-items: center; gap: 0; }
.calc__affix {
  font-size: .85rem; color: var(--gray-500); padding: 0 .5rem 0 0; flex-shrink: 0;
}
.calc__affix--suffix { padding: 0 0 0 .5rem; }
.calc__num { flex: 1; min-width: 0; padding: .5rem .65rem; font-size: .92rem; }
.calc__range {
  width: 100%; margin-top: .5rem; accent-color: var(--blue); height: 3px; cursor: pointer;
}

.calc__out {
  background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: 1.35rem;
  position: sticky; top: 90px;
}
.calc__placeholder { font-size: .88rem; color: var(--gray-400); margin: 0; }
.calc__rows { margin: 0; display: grid; gap: 1px; }
.calc__rows > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: .6rem 0; border-bottom: 1px solid rgba(255,255,255,.1);
}
.calc__rows > div:last-child { border-bottom: 0; }
.calc__rows dt { font-size: .83rem; color: var(--gray-400); line-height: 1.4; }
.calc__rows dd {
  margin: 0; font-size: 1rem; font-weight: 660; letter-spacing: -.02em;
  color: #fff; white-space: nowrap;
}
.calc__verdict {
  margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.14);
  font-size: .86rem; line-height: 1.55;
}
.calc__verdict.is-good { color: #8fdcab; }
.calc__verdict.is-warn { color: #f0c979; }
.calc__verdict.is-bad  { color: #f2a49a; }
.calc__verdict.is-note { color: var(--gray-400); }

/* ── Verification widget ────────────────────────────────────────────── */
.challenge {
  margin: 1.25rem 0;
  padding: .9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.challenge__status {
  margin: 0; font-size: .84rem; color: var(--gray-500);
  display: flex; align-items: center; gap: .5rem;
}
.challenge__status.is-working::before {
  content: ""; width: 13px; height: 13px; flex-shrink: 0;
  border: 2px solid var(--gray-300); border-top-color: var(--blue);
  border-radius: 50%; animation: spin .7s linear infinite;
}
.challenge__status.is-done { color: #17683a; font-weight: 560; }
.challenge__status.is-done::before { content: "✓"; font-weight: 700; }
.challenge__fallback { margin-top: .6rem; }
.challenge__fallback label {
  display: block; font-size: .85rem; font-weight: 600; color: var(--ink-700); margin-bottom: .35rem;
}
.challenge__fallback .input { max-width: 140px; }

/* ── Region selector ────────────────────────────────────────────────── */
.region-switch { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.region-switch__label {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gray-500); flex-shrink: 0;
}
.hero .region-switch__label { color: var(--gray-400); }
.region-switch__options { display: flex; flex-wrap: wrap; gap: 6px; }
.region-switch__note { font-size: .78rem; color: var(--gray-500); margin: .6rem 0 0; }
.hero .region-switch__note { color: var(--gray-500); }

.region-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .7rem;
  font: inherit; font-size: .83rem; font-weight: 560; line-height: 1;
  color: var(--gray-600); background: #fff;
  border: 1px solid var(--gray-300); border-radius: var(--radius);
  cursor: pointer; white-space: nowrap;
  transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.region-chip:hover { border-color: var(--blue-400); background: var(--blue-50); color: var(--ink); }
.region-chip.is-current {
  background: var(--blue); border-color: var(--blue); color: #fff;
  box-shadow: 0 0 0 1px var(--blue);
}
/* Emoji flags render as colour glyphs, so they need no special treatment —
   but a few platforms have none, where the name alone still reads fine. */
.region-chip__flag { font-size: 1.05rem; line-height: 1; }

/* On the dark hero the unselected chips need to come forward, not recede. */
.hero .region-chip {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: var(--gray-300);
}
.hero .region-chip:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; }
.hero .region-chip.is-current { background: var(--blue); border-color: var(--blue); color: #fff; }

@media (max-width: 560px) {
  .region-chip__name { display: none; }
  .region-chip { padding: .5rem .6rem; }
  .region-chip__flag { font-size: 1.25rem; }
  /* With names hidden the current one needs to stay obvious. */
  .region-chip.is-current .region-chip__name { display: inline; }
}

/* ── Action grid ────────────────────────────────────────────────────── */
/* Two actions side by side with a third spanning both beneath. Collapses to a
   single column on a narrow screen, where stacked full-width buttons read
   better than two cramped ones. */
.btn-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 540px;
}
.btn-grid > .btn { width: 100%; }
.btn-grid__full { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .btn-grid { grid-template-columns: 1fr; max-width: none; }
}

/* ── Portal switch in the mobile menu ───────────────────────────────── */
/* Hidden on desktop: the gate at / and the footer already offer this, and the
   header has no room. In the collapsed menu it sits below the account action,
   separated so it reads as leaving for the other side of the business rather
   than as another page in this one. */
.nav__portal { display: none; }

@media (max-width: 900px) {
  /* Qualified with .nav because the generic `.nav a` rule in this same block is
     more specific than a lone class and was winning the padding. */
  .nav a.nav__portal {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 16px; padding: 1rem 1.15rem;
    background: var(--ink); border-radius: var(--radius);
    border-bottom: 0;
  }
  .nav a.nav__portal:hover { background: var(--ink-700); text-decoration: none; }
  /* The private nav carries the same destination twice on mobile: once as a
     plain link for desktop, once as the portal control. Hide the duplicate. */
  .nav a.nav__public-link { display: none; }
  .nav__portal-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--gray-500);
  }
  .nav__portal-target {
    font-size: .92rem; font-weight: 620; color: #fff; letter-spacing: -.01em;
  }
}

/* ── Simulated fund ────────────────────────────────────────────────── */

/* The headline number. Big, monospaced, and unambiguous about direction. */
.nav-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 860px) { .nav-head { grid-template-columns: 1fr; } }

.nav-card {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.nav-card__label {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gray-400); font-weight: 700;
}
.nav-card__value {
  font-family: var(--mono);
  font-size: clamp(2rem, 6vw, 2.9rem);
  font-weight: 600; letter-spacing: -.04em; line-height: 1.05;
  margin: .5rem 0 .2rem;
  font-variant-numeric: tabular-nums;
}
.nav-card__row { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.1rem; }
.nav-card__stat { min-width: 0; }
.nav-card__stat .l { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-400); font-weight: 700; }
.nav-card__stat .v { font-family: var(--mono); font-size: 1.05rem; font-weight: 600; margin-top: .25rem; font-variant-numeric: tabular-nums; }

.up   { color: #3ecf7e; }
.down { color: #ff6b6b; }
.flat { color: var(--gray-400); }
/* On white the greens and reds need to be darker to stay readable. */
.on-light .up, .val-up     { color: #17683a; }
.on-light .down, .val-down { color: #9a2020; }
.val-flat { color: var(--gray-500); }

/* The client mood gauge: a semicircle drawn in CSS, no chart library. */
.gauge-card { display: flex; flex-direction: column; }
.gauge {
  position: relative;
  width: 100%; max-width: 250px; margin: .25rem auto .5rem;
  aspect-ratio: 2 / 1; overflow: hidden;
}
.gauge__dial {
  position: absolute; inset: 0;
  border-radius: 50% / 100% 100% 0 0;
  background: conic-gradient(from 270deg at 50% 100%,
    #c0392b 0deg, #d98324 36deg, #cfa617 72deg, #4b8bea 108deg, #17683a 144deg,
    var(--gray-200) 144deg 180deg);
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 58%, #000 58.5%);
          mask: radial-gradient(circle at 50% 100%, transparent 58%, #000 58.5%);
}
.gauge__needle {
  position: absolute; left: 50%; bottom: 0;
  width: 2px; height: 74%;
  background: var(--ink);
  transform-origin: 50% 100%;
  /* --deg is set inline from the score: 0 = far left, 180 = far right. */
  transform: translateX(-50%) rotate(calc(var(--deg, 90deg) - 90deg));
  border-radius: 2px;
}
.gauge__hub {
  position: absolute; left: 50%; bottom: -7px;
  width: 14px; height: 14px; margin-left: -7px;
  background: var(--ink); border-radius: 50%;
}
/* Below the dial, not inside it: the needle's pivot is at the bottom centre,
   so a score placed there is crossed out by the needle at most readings. */
.gauge__score {
  text-align: center;
  font-family: var(--mono); font-size: 2rem; font-weight: 620;
  letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-top: .5rem;
}
.gauge__of { font-size: .8rem; color: var(--gray-500); font-weight: 500; letter-spacing: 0; }
.gauge-mood { text-align: center; font-weight: 650; font-size: 1.05rem; margin: .35rem 0 .1rem; }
.gauge-mood--good { color: #17683a; }
.gauge-mood--ok   { color: var(--blue-600); }
.gauge-mood--warn { color: #8a5a10; }
.gauge-mood--bad  { color: #9a2020; }
.gauge-note { text-align: center; font-size: .86rem; color: var(--fg-muted); margin: 0 0 .4rem; }

/* What is driving the mood. The point is that it is never only the return. */
.drivers { list-style: none; margin: .6rem 0 0; padding: .9rem 0 0; border-top: 1px solid var(--line); }
.drivers li {
  display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem;
  align-items: baseline; padding: .45rem 0;
}
.drivers .d-label { font-weight: 600; font-size: .9rem; }
.drivers .d-note  { grid-column: 1 / -1; font-size: .8rem; color: var(--fg-muted); margin-top: -.25rem; }
.drivers .d-delta {
  font-family: var(--mono); font-size: .88rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* NAV history, drawn server-side as an inline SVG. */
.navchart { width: 100%; height: auto; display: block; }
.navchart__fill  { fill: var(--blue-50); }
.navchart__line  { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.navchart__bench { fill: none; stroke: var(--gray-400); stroke-width: 1.5; stroke-dasharray: 4 4; }
.navchart__base  { stroke: var(--gray-300); stroke-width: 1; stroke-dasharray: 2 4; }
.chart-legend { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .8rem; color: var(--fg-muted); margin-top: .6rem; }
.chart-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.chart-legend i { width: 16px; height: 0; border-top: 2px solid var(--blue); display: inline-block; }
.chart-legend i.bench { border-top: 2px dashed var(--gray-400); }

/* Weight bars — position and sector concentration against the mandate cap. */
.wbar { position: relative; height: 6px; background: var(--gray-100); border-radius: 3px; overflow: hidden; min-width: 90px; }
.wbar__fill { position: absolute; inset: 0 auto 0 0; background: var(--blue); border-radius: 3px; }
.wbar__fill.is-over { background: #c0392b; }
.wbar__cap { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink); opacity: .45; }

/* The client desk. */
.event {
  border: 1px solid var(--line); border-left: 3px solid var(--gray-300);
  border-radius: var(--radius-lg); background: #fff;
  padding: 1.25rem 1.4rem; margin-bottom: 1rem;
}
.event--deposit      { border-left-color: #17683a; }
.event--withdrawal   { border-left-color: #c0392b; }
.event--mandate      { border-left-color: var(--blue); }
.event--question     { border-left-color: var(--ink); }
.event--concern      { border-left-color: #d98324; }
.event--commendation { border-left-color: #17683a; }
.event--done    { opacity: .72; background: var(--gray-50); }
.event--missed  { border-left-color: #9a2020; background: #fdf7f7; }
.event__top { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.event__title { font-size: 1.06rem; font-weight: 650; margin: 0; letter-spacing: -.01em; }
.event__body { color: var(--fg-muted); font-size: .93rem; line-height: 1.6; margin: 0 0 .9rem; }
.event__body p { margin: 0 0 .7rem; }
.event__body p:last-child { margin-bottom: 0; }
.event__due { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-500); }
.event__due.is-soon { color: #9a2020; }
.event__reply { background: var(--gray-50); border-left: 2px solid var(--gray-300); padding: .7rem .9rem; font-size: .88rem; color: var(--fg-muted); margin-top: .8rem; white-space: pre-wrap; }

/* Compliance notices sit above everything, because they are the job. */
.breach {
  display: flex; gap: .8rem; align-items: flex-start;
  background: #fdf3e3; border: 1px solid #f0dcb4; border-radius: var(--radius-lg);
  padding: .85rem 1.1rem; margin-bottom: .7rem; font-size: .9rem; color: #7a4f0d;
}
.breach strong { color: #5f3d08; }

/* Ticker strip on the trade screen. */
.tickers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ticker {
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  padding: .7rem .85rem; text-align: left; cursor: pointer; width: 100%;
  font: inherit; color: inherit; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.ticker:hover, .ticker:focus-visible { border-color: var(--blue-200); box-shadow: var(--shadow-sm); }
.ticker.is-selected { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.ticker__sym { font-family: var(--mono); font-weight: 650; font-size: .95rem; }
.ticker__name { font-size: .76rem; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: .15rem 0; }
.ticker__px { font-family: var(--mono); font-size: .85rem; font-variant-numeric: tabular-nums; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num  { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Segmented radio pair, matching the Windows-style button group used in the
   private request flow. The radio itself is hidden; the label is the control. */
.seg { display: flex; border: 1px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.seg__opt { flex: 1; margin: 0; }
.seg__opt input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.seg__opt span {
  display: block; text-align: center; cursor: pointer;
  padding: .7rem .9rem; font-size: .9rem; font-weight: 600;
  background: #fff; color: var(--ink);
  border-right: 1px solid var(--ink);
  transition: background .12s var(--ease), color .12s var(--ease);
}
.seg__opt:last-child span { border-right: 0; }
.seg__opt span:hover { background: var(--gray-100); }
.seg__opt input:checked + span { background: var(--ink); color: #fff; }
.seg__opt input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: -3px; }
/* The sell side reads red once chosen, so a mis-set side is hard to miss. */
.seg__opt input[value="sell"]:checked + span { background: #9a2020; border-color: #9a2020; }

/* The ticker picker is a radio group too. */
.ticker { display: block; position: relative; }
.ticker input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ticker:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.ticker:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.ticker:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.ticker__px { display: block; }

/* Sub-navigation inside the fund. Not sticky: the dashboard tabs above it
   already hold that position, and two stacked sticky bars would overlap and
   eat most of a phone screen. */
.dash-tabs--sub {
  position: static;
  top: auto;
  border-top: 0;
  background: var(--gray-50);
}
.dash-tabs--sub a { font-size: .86rem; padding: .75rem .2rem; }

/* ── Simulated fund: public page ───────────────────────────────────── */

/* A strip of real prices from the fund's own universe. It is there to settle
   the "live data" claim on sight rather than asking anyone to take it on faith. */
.tickertape {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 10px;
}
/* Each cell carries its own border rather than showing a background through
   1px gaps: when the row does not divide evenly the leftover space would
   otherwise read as a grey block sitting on the page. */
.tickertape__i {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: .85rem 1rem; text-align: center;
}
.tickertape__s { display: block; font-family: var(--mono); font-weight: 650; font-size: .88rem; letter-spacing: -.01em; }
.tickertape__p { display: block; font-family: var(--mono); font-size: .95rem; font-variant-numeric: tabular-nums; margin-top: .2rem; }
.tickertape__c { display: block; font-family: var(--mono); font-size: .78rem; font-variant-numeric: tabular-nums; margin-top: .1rem; }

/* ── The allocation demo ──────────────────────────────────────────── */
/* One pass of the real thing: allocate across live names, see the book priced,
   the mandate checked and the client's reading of you. */

.demo {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 28px; align-items: start;
}
@media (max-width: 900px) { .demo { grid-template-columns: 1fr; } }

.demo__panel {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.6rem;
}
.demo__panel + .demo__panel { margin-top: 20px; }
.demo__side { position: sticky; top: 92px; }
@media (max-width: 900px) { .demo__side { position: static; } }

/* One row per instrument: the name, what it has done, and the allocation. */
.alloc { display: flex; flex-direction: column; gap: 10px; }
.alloc__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: .4rem 1rem; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem .95rem;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.alloc__row.is-held { border-color: var(--blue-200); background: var(--blue-50); }
.alloc__row.is-over { border-color: #e0b4b4; background: #fdf7f7; }
.alloc__id { min-width: 0; }
.alloc__sym { font-family: var(--mono); font-weight: 650; font-size: .95rem; }
.alloc__name { font-size: .78rem; color: var(--gray-500); }
.alloc__px { font-family: var(--mono); font-size: .82rem; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.alloc__ctl { display: flex; align-items: center; gap: .4rem; }
.alloc__btn {
  width: 30px; height: 30px; flex: 0 0 auto;
  border: 1px solid var(--gray-300); background: #fff; border-radius: var(--radius);
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1;
  color: var(--ink); cursor: pointer;
}
.alloc__btn:hover { border-color: var(--ink); background: var(--gray-100); }
.alloc__btn:disabled { opacity: .35; cursor: not-allowed; }
.alloc__amt {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: .88rem; font-weight: 620; min-width: 58px; text-align: center;
}
.alloc__wt { font-size: .72rem; color: var(--gray-500); text-align: center; min-width: 58px; }
.alloc__wt.is-over { color: #9a2020; font-weight: 650; }

/* The running book, mirroring the panel at the top of a real one. */
.demo__nav {
  background: var(--ink); color: #fff;
  border-radius: var(--radius-lg); padding: 1.35rem 1.5rem;
}
.demo__nav .l { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-400); font-weight: 700; }
.demo__nav .v {
  font-family: var(--mono); font-size: 1.9rem; font-weight: 620;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin: .35rem 0 .15rem;
}
.demo__nav .d { font-family: var(--mono); font-size: .92rem; font-variant-numeric: tabular-nums; }
.demo__stats { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: 1rem; }
.demo__stats .l2 { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-400); font-weight: 700; }
.demo__stats .v2 { font-family: var(--mono); font-size: 1rem; font-weight: 620; margin-top: .2rem; font-variant-numeric: tabular-nums; }

.demo__checks { list-style: none; margin: 0; padding: 0; }
.demo__checks li {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .87rem; line-height: 1.45; padding: .4rem 0;
}
.demo__checks .mark { flex: 0 0 auto; font-weight: 700; font-family: var(--mono); }
.demo__checks .ok  .mark { color: #17683a; }
.demo__checks .bad .mark { color: #9a2020; }
.demo__checks .bad { color: #9a2020; }

/* What the demo deliberately does not do. */
.locked { border: 1px dashed var(--gray-300); border-radius: var(--radius-lg); padding: 1.4rem 1.5rem; background: var(--gray-50); }
.locked h3 { font-size: 1.02rem; margin: 0 0 .5rem; }
.locked ul { margin: .5rem 0 1rem; padding-left: 1.1rem; color: var(--fg-muted); font-size: .89rem; line-height: 1.6; }

/* A label with its live value pushed to the right, used by the fund teasers. */
.label--split { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.label--split output {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 650; color: var(--blue-600); font-size: .9rem;
}

/* Slider rows inside the allocation demo. */
.demo__row { margin-bottom: 1.1rem; }
.demo__row label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-size: .86rem; font-weight: 600; margin-bottom: .45rem;
}
.demo__row output {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 650; color: var(--blue-600); font-size: .9rem;
}
/* Three mandates side by side need to stack on a phone. */
#demo-mandates .seg__opt span { padding: .65rem .5rem; font-size: .82rem; }
@media (max-width: 560px) {
  #demo-mandates { flex-direction: column; }
  #demo-mandates .seg__opt span { border-right: 0; border-bottom: 1px solid var(--ink); }
  #demo-mandates .seg__opt:last-child span { border-bottom: 0; }
}

/* Range inputs, styled because the browser default clashes with everything
   else on the page. */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; padding: 0; margin: .3rem 0;
  background: var(--gray-200); border-radius: 2px; border: 0;
  cursor: pointer;
}
input[type="range"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink); border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(12,14,18,.3); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink); border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(12,14,18,.3); cursor: pointer;
}

/* The closing panel spans both columns and sits under them, so that when the
   grid collapses on a phone the running book still comes before the pitch. */
.demo__full { grid-column: 1 / -1; }

/* ── The newsroom ──────────────────────────────────────────────────── */

.news-feed { display: flex; flex-direction: column; gap: 18px; }

.news {
  background: #fff; border: 1px solid var(--line);
  border-left: 3px solid var(--gray-300);
  border-radius: var(--radius-lg); padding: 1.35rem 1.5rem;
}
.news--good { border-left-color: #17683a; }
.news--bad  { border-left-color: #c0392b; }

.news__top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .6rem; }
.news__when { font-size: .76rem; color: var(--gray-500); font-family: var(--mono); white-space: nowrap; }
.news__head { font-size: 1.12rem; font-weight: 650; letter-spacing: -.018em; line-height: 1.28; margin: 0 0 .5rem; }
.news__body { font-size: .92rem; line-height: 1.6; color: var(--fg-muted); margin: 0; }

.news__quote {
  margin: .9rem 0 0; padding: .7rem 0 .7rem 1rem;
  border-left: 2px solid var(--blue-200);
  font-size: .9rem; line-height: 1.55; color: var(--ink-700); font-style: italic;
}
.news__quote cite {
  display: block; margin-top: .35rem;
  font-style: normal; font-size: .78rem; color: var(--gray-500);
}

@media (max-width: 860px) {
  /* The sidebar drops below the wire rather than squeezing it. */
  .news-side-grid { grid-template-columns: 1fr !important; }
}

/* Destructive action. Only ever paired with a typed confirmation. */
.btn--danger { --btn-bg: #9a2020; --btn-fg: #fff; --btn-bd: #9a2020; }
.btn--danger:hover { --btn-bg: #7d1a1a; --btn-bd: #7d1a1a; }