/* ==========================================================================
   The Tectonic Shift in Compute
   Apple-inspired design system — strict
   ========================================================================== */

/* Reset & base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  scroll-padding-top: 72px;
}

body {
  font-family: "SF Pro Text", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.022em;
  color: #1d1d1f;
  background: #ffffff;
  overflow-x: hidden;
}

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

a {
  color: #0066cc;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  text-decoration: underline;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid #0071e3;
  outline-offset: 3px;
  border-radius: 4px;
}

ul,
ol {
  list-style: none;
}

/* HTML `hidden` attribute must beat any `display` declaration below.
   Without this, `<span class="btn-spinner" hidden>` still renders because
   `.btn-spinner { display: inline-block }` overrides the UA sheet.           */
[hidden] {
  display: none !important;
}

/* Container
   ========================================================================== */
.container {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Navigation — Apple glass
   ========================================================================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  z-index: 9999;
  display: flex;
  align-items: center;
}

.nav-inner {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav-brand {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 6px;
  color: #ffffff;
  transition: opacity 0.2s ease;
}

.nav-brand:hover {
  color: #ffffff;
  text-decoration: none;
  opacity: 0.8;
}

.nav-brand-mark {
  display: block;
  width: 14px;
  height: 17px;
  flex-shrink: 0;
}

.nav-brand-chev {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, 0.78);
  margin-top: -1px;
}

.nav-links {
  display: contents;
}

.nav-links li {
  display: flex;
  align-items: center;
  height: 100%;
}

/* The in-overlay copy of "The Book" — only shown inside the mobile menu */
.nav-links li.nav-book-item { display: none; }

.nav-links a {
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  color: rgba(255, 255, 255, 0.92);
}

.nav-links a:hover {
  color: #ffffff;
  text-decoration: none;
  opacity: 0.8;
}

/* Nav · "The Book" — private trade log entry.
   Plain-text treatment (same font scale as other nav items) with a subtle
   left-divider separating it from the primary nav list. No pill/border, so
   it lives in the same visual weight as the brand mark and the links. */
.nav-private-link {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 6px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1;
  white-space: nowrap;
  background: transparent;
  border: none;
  padding: 0;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.nav-private-link:hover,
.nav-private-link:focus-visible {
  color: #ffffff;
  opacity: 0.85;
  text-decoration: none;
}

.nav-private-lock {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  opacity: 0.62;
  transition: opacity 0.2s ease;
}

.nav-private-link:hover .nav-private-lock {
  opacity: 1;
}

/* Nav · Hamburger (mobile + narrow-desktop menu trigger)
   Hidden on wide viewports; revealed at <=1024px via the mobile media block. */
.nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 36px;
  height: 36px;
  margin-right: -8px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 10010;
  -webkit-tap-highlight-color: transparent;
}

.nav-hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: #ffffff;
  border-radius: 1px;
  transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
              opacity 0.25s ease;
  transform-origin: center;
}

.nav-hamburger.active span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-hamburger.active span:nth-child(2) {
  opacity: 0;
}

.nav-hamburger.active span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

body.mobile-nav-open {
  overflow: hidden;
}

/* Sections
   ========================================================================== */
.section {
  padding: 140px 0;
  width: 100%;
}

.section-light {
  background: #f5f5f7;
  color: #1d1d1f;
}

.section-dark {
  background: #000000;
  color: #ffffff;
}

/* Display & section headings
   ========================================================================== */
.display-hero {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 88px;
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.018em;
  color: #ffffff;
}

.section-heading {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 48px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.003em;
  color: #1d1d1f;
  max-width: 820px;
  margin-bottom: 28px;
}

.section-heading-light {
  color: #ffffff;
}

.section-lede,
.section-lede-light {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.011em;
  color: rgba(0, 0, 0, 0.72);
  max-width: 760px;
  margin-bottom: 64px;
}

.section-lede-light {
  color: rgba(255, 255, 255, 0.8);
}

.eyebrow,
.eyebrow-dark {
  font-family: "SF Pro Text", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2997ff;
  margin-bottom: 24px;
}

.eyebrow-dark {
  color: #0066cc;
}

/* Hero
   ========================================================================== */
.hero {
  padding: 200px 0 140px;
  min-height: 94vh;
  display: flex;
  align-items: center;
  background: #000000;
  color: #ffffff;
}

.hero-sub {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.009em;
  color: rgba(255, 255, 255, 0.78);
  max-width: 720px;
  margin-top: 36px;
  margin-bottom: 44px;
}

/* CTAs — pill shape
   ========================================================================== */
.cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.pill-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border-radius: 980px;
  font-family: "SF Pro Text", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1;
  transition: all 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
}

.pill-filled {
  background: #0071e3;
  color: #ffffff;
  border: 1px solid #0071e3;
}

.pill-filled:hover {
  background: #0077ed;
  border-color: #0077ed;
  color: #ffffff;
  text-decoration: none;
}

.pill-outline {
  background: transparent;
  color: #2997ff;
  border: 1px solid rgba(41, 151, 255, 0.7);
}

.pill-outline:hover {
  background: rgba(41, 151, 255, 0.08);
  color: #2997ff;
  text-decoration: none;
}

/* I · Stat strip
   ========================================================================== */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 8px;
  margin-bottom: 64px;
}

.stat-chip {
  padding: 28px 24px;
  background: #ffffff;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-chip-value {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.006em;
  color: #1d1d1f;
}

.stat-chip-label {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.6);
  letter-spacing: -0.01em;
}

/* Chart card — CapEx bars
   ========================================================================== */
.chart-card {
  padding: 48px 44px;
  background: #ffffff;
  border-radius: 18px;
  margin-bottom: 64px;
}

.chart-head {
  margin-bottom: 36px;
}

.chart-title {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.17;
  letter-spacing: 0.009em;
  color: #1d1d1f;
  margin-bottom: 8px;
}

.chart-sub {
  font-size: 15px;
  line-height: 1.47;
  color: rgba(0, 0, 0, 0.6);
}

.bar-rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 70px;
  align-items: center;
  gap: 20px;
}

.bar-name {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.022em;
  color: #1d1d1f;
}

.bar-track {
  height: 10px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 5px;
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  background: #0071e3;
  border-radius: 5px;
}

.bar-value {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: #1d1d1f;
  text-align: right;
}

/* Callout — understated, solid background
   ========================================================================== */
.callout {
  padding: 40px 44px;
  background: #ffffff;
  border-radius: 18px;
}

.callout-title {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.009em;
  color: #1d1d1f;
  margin-bottom: 14px;
}

.callout-body {
  font-size: 17px;
  line-height: 1.47;
  color: rgba(0, 0, 0, 0.76);
}

/* II · Data grid (big numbers)
   ========================================================================== */
.data-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 64px;
}

.data-card {
  padding: 36px 28px;
  background: #1d1d1f;
  border-radius: 18px;
}

.data-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56);
  margin-bottom: 18px;
}

.data-value {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 44px;
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.012em;
  color: #ffffff;
  margin-bottom: 12px;
}

.data-note {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.56);
}

/* Split row (two columns of prose on dark)
   ========================================================================== */
.split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
}

.split-title {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: 0.007em;
  color: #ffffff;
  margin-bottom: 16px;
}

.split-body {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: 0.011em;
  color: rgba(255, 255, 255, 0.76);
}

/* Concentration bars (dark)
   ========================================================================== */
.concentration {
  padding: 44px 44px 40px;
  background: #1d1d1f;
  border-radius: 18px;
}

.concentration-caption {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2997ff;
  margin-bottom: 12px;
}

.concentration-head {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: 0.007em;
  color: #ffffff;
  margin-bottom: 28px;
}

.concentration-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.conc-row {
  display: grid;
  grid-template-columns: 110px 1fr 50px;
  align-items: center;
  gap: 16px;
}

.conc-label {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: -0.016em;
}

.conc-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.conc-fill {
  display: block;
  height: 100%;
  background: #0071e3;
  border-radius: 4px;
}

.conc-pct {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  text-align: right;
}

.concentration-note {
  font-size: 14px;
  line-height: 1.47;
  color: rgba(255, 255, 255, 0.56);
  margin-top: 12px;
}

/* III · Paradox grid
   ========================================================================== */
.paradox-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}

.paradox-card {
  padding: 32px 28px;
  background: #ffffff;
  border-radius: 18px;
}

.paradox-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.56);
  margin-bottom: 14px;
}

.paradox-value {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.004em;
  color: #1d1d1f;
  margin-bottom: 12px;
}

.paradox-note {
  font-size: 14px;
  line-height: 1.47;
  color: rgba(0, 0, 0, 0.6);
}

/* Commitment stack card
   ========================================================================== */
.stack-card {
  padding: 44px 44px 36px;
  background: #ffffff;
  border-radius: 18px;
}

.stack-title {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: 0.007em;
  color: #1d1d1f;
  margin-bottom: 24px;
}

.stack-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 24px;
}

.stack-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.stack-row:last-child {
  border-bottom: none;
}

.stack-name {
  font-size: 17px;
  color: rgba(0, 0, 0, 0.78);
  letter-spacing: -0.022em;
}

.stack-amount {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: #1d1d1f;
  letter-spacing: -0.004em;
}

.stack-note {
  font-size: 14px;
  line-height: 1.47;
  color: rgba(0, 0, 0, 0.56);
}

/* IV · VS grid
   ========================================================================== */
.vs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 48px;
}

.vs-card {
  padding: 40px 36px;
  background: #1d1d1f;
  border-radius: 18px;
}

.vs-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 980px;
  margin-bottom: 20px;
}

.vs-tag-danger {
  background: rgba(255, 69, 58, 0.16);
  color: #ff6b5f;
}

.vs-tag-positive {
  background: rgba(0, 113, 227, 0.18);
  color: #2997ff;
}

.vs-name {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.006em;
  color: #ffffff;
  margin-bottom: 14px;
}

.vs-desc {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 28px;
}

.vs-list {
  display: flex;
  flex-direction: column;
}

.vs-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.vs-item:last-child {
  border-bottom: none;
}

.vs-item dt {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.56);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 600;
}

.vs-item dd {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  text-align: right;
  letter-spacing: -0.016em;
}

/* Flow card (circular financing)
   ========================================================================== */
.flow-card {
  padding: 44px 44px 36px;
  background: #1d1d1f;
  border-radius: 18px;
}

.flow-title {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.17;
  letter-spacing: 0.009em;
  color: #ffffff;
  margin-bottom: 28px;
}

.flow-rows {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.flow-step {
  padding: 20px 18px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.flow-num {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #2997ff;
}

.flow-text {
  font-size: 14px;
  line-height: 1.47;
  color: rgba(255, 255, 255, 0.82);
}

.flow-note {
  font-size: 14px;
  line-height: 1.47;
  color: rgba(255, 255, 255, 0.56);
}

/* IV · Depreciation table
   ========================================================================== */
.dep-table {
  background: #1d1d1f;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 48px;
}

.dep-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2.2fr;
  gap: 20px;
  padding: 20px 36px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dep-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2.2fr;
  gap: 20px;
  padding: 24px 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  align-items: baseline;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.76);
}

.dep-row:last-child {
  border-bottom: none;
}

.dep-co {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 19px;
  color: #ffffff;
  letter-spacing: -0.004em;
}

.dep-impl {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.47;
}

.dep-row-contrast .dep-co {
  color: #2997ff;
}

.dep-row-contrast .dep-impl {
  color: rgba(41, 151, 255, 0.82);
}

/* Pull quote (reusable on dark or light)
   ========================================================================== */
.pull-quote {
  margin: 64px auto 0;
  max-width: 820px;
  text-align: center;
  padding: 56px 32px 8px;
  position: relative;
}

.pull-quote::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 40px;
  height: 2px;
  background: #0071e3;
  transform: translateX(-50%);
}

.pull-quote p {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0.004em;
  color: #1d1d1f;
}

.pull-quote-dark p {
  color: #ffffff;
}

.pull-quote-dark::before {
  background: #2997ff;
}

/* VII · Geopolitics grid
   ========================================================================== */
.geo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}

.geo-card {
  padding: 32px 26px;
  background: #ffffff;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.geo-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.52);
}

.geo-value {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.006em;
  color: #1d1d1f;
}

.geo-note {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.6);
}

/* Risk card — dark variant override
   ========================================================================== */
.risk-card-dark {
  background: #1d1d1f;
}

.risk-card-dark .risk-label {
  color: #2997ff;
}

.risk-card-dark .risk-body {
  color: rgba(255, 255, 255, 0.74);
}

/* VI · Duration card (on dark)
   ========================================================================== */
.duration-card {
  padding: 44px 44px 40px;
  background: #1d1d1f;
  border-radius: 18px;
  margin-bottom: 32px;
}

.duration-title {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: 0.007em;
  color: #ffffff;
  margin-bottom: 28px;
}

.duration-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.duration-block {
  padding: 24px 20px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 14px;
}

.duration-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56);
  margin-bottom: 12px;
}

.duration-value {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.004em;
  color: #ffffff;
  margin-bottom: 10px;
}

.duration-note {
  font-size: 13px;
  line-height: 1.47;
  color: rgba(255, 255, 255, 0.6);
}

/* Risk grid (default on dark — overridden with .risk-card-dark above)
   ========================================================================== */
.risk-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.risk-card {
  padding: 32px 28px;
  background: #1d1d1f;
  border-radius: 18px;
}

.risk-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2997ff;
  margin-bottom: 16px;
}

.risk-body {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.74);
}

/* VI · Scenario grid
   ========================================================================== */
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.scenario-card {
  padding: 36px 32px;
  background: #1d1d1f;
  border-radius: 18px;
}

.scenario-num {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #2997ff;
  margin-bottom: 10px;
}

.scenario-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56);
  margin-bottom: 16px;
}

.scenario-title {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.009em;
  color: #ffffff;
  margin-bottom: 22px;
}

.scenario-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.scenario-list li {
  font-size: 15px;
  line-height: 1.47;
  color: rgba(255, 255, 255, 0.72);
  padding-left: 18px;
  position: relative;
}

.scenario-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2997ff;
}

/* VII · Position list
   ========================================================================== */
.position-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 72px;
}

.position-card {
  padding: 44px 48px;
  background: #ffffff;
  border-radius: 18px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  align-items: start;
}

.position-card-avoid {
  background: #1d1d1f;
}

.position-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}

.position-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0066cc;
}

.position-card-avoid .position-label {
  color: #2997ff;
}

.position-name {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 44px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.008em;
  color: #1d1d1f;
}

.position-card-avoid .position-name {
  color: #ffffff;
}

.position-stance {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 980px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 6px;
}

.position-stance-buy {
  background: rgba(0, 113, 227, 0.12);
  color: #0066cc;
}

.position-stance-avoid {
  background: rgba(255, 69, 58, 0.18);
  color: #ff6b5f;
}

.position-stance-done {
  background: rgba(48, 209, 88, 0.16);
  color: #30d158;
}

.position-card-accent {
  background: #f5f5f7;
  border: 1px solid rgba(0, 113, 227, 0.18);
}

.position-main {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.position-card .position-body {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.011em;
  color: rgba(0, 0, 0, 0.78);
  margin: 0;
}

.position-card-avoid .position-body {
  color: rgba(255, 255, 255, 0.78);
}

.position-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 20px 0;
}

.position-card-avoid .position-metrics {
  border-top-color: rgba(255, 255, 255, 0.1);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.position-metrics > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 16px;
}

.position-metrics > div + div {
  border-left: 1px solid rgba(0, 0, 0, 0.06);
  padding-left: 16px;
}

.position-card-avoid .position-metrics > div + div {
  border-left-color: rgba(255, 255, 255, 0.08);
}

.position-metrics dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.52);
}

.position-card-avoid .position-metrics dt {
  color: rgba(255, 255, 255, 0.5);
}

.position-metrics dd {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.004em;
  color: #1d1d1f;
}

.position-card-avoid .position-metrics dd {
  color: #ffffff;
}

.position-watch {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.position-watch-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.48);
}

.position-card-avoid .position-watch-label {
  color: rgba(255, 255, 255, 0.48);
}

.position-watch-body {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.68);
}

.position-card-avoid .position-watch-body {
  color: rgba(255, 255, 255, 0.68);
}

/* Quote
   ========================================================================== */
.quote-card {
  text-align: center;
  padding: 88px 32px 72px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.quote-text {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.004em;
  color: #1d1d1f;
  max-width: 780px;
  margin: 0 auto 20px;
}

.quote-footer {
  font-size: 17px;
  color: rgba(0, 0, 0, 0.6);
  letter-spacing: -0.022em;
}

/* About
   ========================================================================== */
.section-about {
  padding: 120px 0;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 64px;
  align-items: start;
}

.about-heading {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 56px;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.008em;
  color: #ffffff;
}

.about-right {
  max-width: 620px;
}

.about-body {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: 0.009em;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 22px;
}

.about-body:last-of-type {
  margin-bottom: 32px;
}

.about-cta {
  font-size: 16px;
  position: relative;
  transition:
    color 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Override the generic .pill-outline:hover — this CTA fills on hover,
   lifts a hair, and casts a soft Apple-blue glow. */
.about-cta:hover,
.about-cta:focus-visible {
  background: #0071e3;
  border-color: #0071e3;
  color: #ffffff;
  box-shadow:
    0 12px 30px rgba(0, 113, 227, 0.42),
    0 2px 6px rgba(0, 113, 227, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
  text-decoration: none;
}

.about-cta:active {
  transform: translateY(0);
  box-shadow:
    0 4px 14px rgba(0, 113, 227, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition-duration: 0.1s;
}

.about-cta .cta-chev {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.about-cta:hover .cta-chev,
.about-cta:focus-visible .cta-chev {
  transform: translateX(5px);
}

/* III · Prose block for First Principles — long-form essay on dark
   ========================================================================== */
.prose-block {
  margin-top: 48px;
  max-width: 760px;
}

.prose-block + .prose-block {
  margin-top: 40px;
}

.prose-heading {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: 0.007em;
  color: #1d1d1f;
  margin-bottom: 20px;
}

.prose-heading-light {
  color: #ffffff;
}

.prose-block p {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 19px;
  line-height: 1.55;
  letter-spacing: 0.011em;
  color: rgba(0, 0, 0, 0.78);
  margin-bottom: 18px;
}

.prose-block p:last-child {
  margin-bottom: 0;
}

.prose-block-dark p {
  color: rgba(255, 255, 255, 0.78);
}

/* ==========================================================================
   Trade log — Liquid Glass holdings
   Warm-dark token system: ink ladder for surfaces, warm palette for text,
   bone highlights for display. Adapted from the Portfolio-Visualiser-App
   Vision 2.0 plan (§3.1).
   ========================================================================== */
.section-glass {
  /* Warm-dark token scope — only applies inside the trades section */
  --ink-0: #0a0a0a;
  --ink-1: #0e0e0d;
  --ink-2: #14130f;
  --ink-3: #1c1b18;
  --ink-4: #2a2824;
  --ink-5: #3d3a35;
  --warm-500: #5e5b54;
  --warm-400: #8a8476;
  --warm-300: #b0aea5;
  --warm-200: #d4cebf;
  --bone-200: #e7e2d9;
  --bone-100: #f0ebdf;
  --tg-mono: ui-monospace, "SF Mono", Menlo, Monaco, "Roboto Mono", monospace;

  position: relative;
  padding: 140px 0 160px;
  color: var(--bone-200);
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 15% 0%,   rgba(198, 97, 64, 0.10),  transparent 60%),
    radial-gradient(ellipse 60% 40% at 95% 55%,  rgba(138, 132, 118, 0.07), transparent 60%),
    radial-gradient(ellipse 80% 50% at 45% 100%, rgba(208, 196, 168, 0.04), transparent 65%),
    linear-gradient(180deg, var(--ink-0) 0%, var(--ink-2) 55%, var(--ink-1) 100%);
}

/* Override the generic section-heading + lede colours inside the glass
   section so they adopt the bone/warm scale. */
.section-glass .section-heading-light {
  color: var(--bone-100);
  letter-spacing: -0.015em;
}

.section-glass .section-lede-light {
  color: var(--warm-200);
}

.section-glass .eyebrow {
  color: var(--warm-400);
  letter-spacing: 0.12em;
}

.glass-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.glass-ambient span {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.42;
}

/* Warm ambient glows — terracotta / ochre / bone rather than blue/purple.
   The glass tiles refract these warmer tones so the whole stage reads as
   one editorial space, not "cyberpunk neon on black". */
.ambient-1 {
  top: 6%;
  left: -8%;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(198, 97, 64, 0.5) 0%, transparent 65%);
}

.ambient-2 {
  top: 42%;
  right: -10%;
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(178, 132, 84, 0.35) 0%, transparent 70%);
}

.ambient-3 {
  bottom: 4%;
  left: 36%;
  width: 540px;
  height: 360px;
  background: radial-gradient(circle, rgba(232, 212, 168, 0.18) 0%, transparent 70%);
}

.section-glass .container {
  position: relative;
  z-index: 1;
}

/* SVG filter defs (invisible) */
.glass-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Category blocks
   ========================================================================== */
.cat-block {
  margin-bottom: 56px;
}

.cat-block:last-of-type {
  margin-bottom: 48px;
}

.cat-head {
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  max-width: 760px;
}

.cat-label {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.003em;
  color: var(--bone-100);
}

.cat-sub {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--warm-400);
  letter-spacing: -0.01em;
}

/* Glass grid
   ========================================================================== */
.glass-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

/* Liquid Glass tile
   ========================================================================== */
.glass-tile {
  position: relative;
  padding: 24px 24px 20px;
  border-radius: 22px;
  background: rgba(231, 226, 217, 0.04);
  backdrop-filter: blur(32px) saturate(150%);
  -webkit-backdrop-filter: blur(32px) saturate(150%);
  border: 1px solid rgba(240, 235, 223, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(240, 235, 223, 0.14),
    inset 0 -1px 0 rgba(10, 10, 10, 0.32),
    inset 1px 0 0.5px rgba(240, 235, 223, 0.05),
    inset -1px 0 0.5px rgba(10, 10, 10, 0.14),
    0 10px 32px rgba(0, 0, 0, 0.42),
    0 1px 2px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 240px;
  isolation: isolate;
  overflow: hidden;

  /* Force compositor layer at mount — without this, the solid tile fill
     is painted one frame BEFORE backdrop-filter resolves, which shows as
     a brief un-blurred rectangle flashing on some columns.
     translate3d parks the element on the GPU immediately. */
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  contain: layout paint;

  /* Staggered fade-in masks any remaining paint jitter inside the opacity
     ramp. 'backwards' keeps the tile hidden during its delay window
     instead of flashing at final opacity first. */
  animation: glass-tile-in 0.52s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;

  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              background-color 0.35s ease,
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}

.glass-tile:nth-child(1) { animation-delay: 0.02s; }
.glass-tile:nth-child(2) { animation-delay: 0.07s; }
.glass-tile:nth-child(3) { animation-delay: 0.12s; }
.glass-tile:nth-child(4) { animation-delay: 0.17s; }
.glass-tile:nth-child(5) { animation-delay: 0.22s; }
.glass-tile:nth-child(6) { animation-delay: 0.27s; }

@keyframes glass-tile-in {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .glass-tile {
    animation: none;
  }
}

/* Specular highlight line across the top edge */
.glass-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(240, 235, 223, 0.38) 50%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* Soft specular blob in top-left refracting ambient warmth */
.glass-tile::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -20%;
  width: 80%;
  height: 70%;
  background: radial-gradient(ellipse at center, rgba(240, 235, 223, 0.11) 0%, transparent 65%);
  pointer-events: none;
  filter: blur(6px);
  z-index: 0;
}

.glass-tile:hover {
  /* Keep the z-translation so the compositor layer persists on hover */
  transform: translate3d(0, -3px, 0);
  background: rgba(231, 226, 217, 0.06);
  border-color: rgba(240, 235, 223, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(240, 235, 223, 0.2),
    inset 0 -1px 0 rgba(10, 10, 10, 0.42),
    0 18px 44px rgba(0, 0, 0, 0.52),
    0 2px 4px rgba(0, 0, 0, 0.6);
}

/* Status badge — muted by default, colour only for closed P&L */
.tile-status {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--warm-400);
  z-index: 3;
  font-family: var(--tg-mono);
}

.tile-status-win {
  color: #a8d9a1;
}

.tile-status-loss {
  color: #e9a192;
}

.tile-ticker {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.014em;
  color: var(--bone-100);
  margin-top: 18px;
  z-index: 2;
}

.tile-company {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-400);
  margin-bottom: 14px;
  z-index: 2;
}

.tile-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--warm-200);
  letter-spacing: -0.005em;
  flex: 1;
  z-index: 2;
}

.tile-meta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(240, 235, 223, 0.08);
  font-family: var(--tg-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--warm-300);
  z-index: 2;
}

/* Price ladder · Entry → Now → Target (open), Entry → Exit (closed)
   ---------------------------------------------------------------- */
.tile-prices {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1px;
  margin-top: 14px;
  background: rgba(240, 235, 223, 0.08);
  border-radius: 10px;
  overflow: hidden;
  z-index: 2;
}

.price-step {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(14, 14, 13, 0.68);
  min-height: 58px;
}

.price-step-accent {
  background: rgba(28, 27, 24, 0.9);
}

.price-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-500);
  white-space: nowrap;
  line-height: 1.2;
}

.price-val {
  font-family: var(--tg-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bone-100);
}

.price-step-accent .price-val {
  color: var(--bone-100);
}

/* Performance panel · Book vs Major Averages
   ---------------------------------------------------------------
   Sits at the very top of the trade log. Horizontal bars give a
   feel for magnitude at a glance; tabular mono numbers keep the
   values readable. Book row is visually elevated. */
.perf-panel {
  margin-bottom: 36px;
  padding: 26px 30px 22px;
  background: rgba(231, 226, 217, 0.038);
  border: 1px solid rgba(240, 235, 223, 0.09);
  border-radius: 20px;
  backdrop-filter: blur(32px) saturate(150%);
  -webkit-backdrop-filter: blur(32px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(240, 235, 223, 0.14),
    inset 0 -1px 0 rgba(10, 10, 10, 0.3),
    0 8px 26px rgba(0, 0, 0, 0.35);
  position: relative;
}

.perf-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(240, 235, 223, 0.08);
  margin-bottom: 10px;
}

.perf-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-300);
  margin: 0;
}

.perf-asof {
  font-family: var(--tg-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--warm-500);
  letter-spacing: 0.03em;
  margin: 0;
}

.perf-table {
  display: flex;
  flex-direction: column;
}

.perf-row {
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  gap: 22px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(240, 235, 223, 0.05);
}

.perf-row:last-child {
  border-bottom: none;
}

.perf-row-head {
  padding: 8px 0 10px;
  border-bottom: 1px solid rgba(240, 235, 223, 0.1);
}

.perf-row-head .perf-cell {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-500);
  text-align: left;
  padding-left: 2px;
}

.perf-row-book {
  background: rgba(240, 235, 223, 0.05);
  margin: 4px -14px;
  padding: 14px 14px;
  border-radius: 12px;
  border-bottom: none;
  position: relative;
}

.perf-row-book::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 2px;
  background: linear-gradient(180deg, transparent, #c66140, transparent);
  border-radius: 2px;
}

.perf-row-book .perf-name {
  color: var(--bone-100);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.perf-name {
  font-size: 14px;
  color: var(--warm-200);
  letter-spacing: -0.01em;
  font-weight: 400;
}

.perf-cell {
  display: flex;
  align-items: center;
}

.perf-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
}

.perf-bar-track {
  height: 6px;
  background: rgba(240, 235, 223, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.perf-bar-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.perf-bar-pos .perf-bar-fill {
  background: linear-gradient(90deg, rgba(168, 217, 161, 0.45), #a8d9a1);
}

.perf-bar-neg .perf-bar-fill {
  background: linear-gradient(90deg, rgba(233, 161, 146, 0.45), #e9a192);
}

.perf-bar-val {
  font-family: var(--tg-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  min-width: 62px;
  text-align: right;
  white-space: nowrap;
}

.perf-bar-pos .perf-bar-val {
  color: #a8d9a1;
}

.perf-bar-neg .perf-bar-val {
  color: #e9a192;
}

.perf-bar-empty {
  font-family: var(--tg-mono);
  color: var(--warm-500);
}

.perf-note {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(240, 235, 223, 0.06);
  font-size: 11px;
  line-height: 1.5;
  color: var(--warm-500);
  letter-spacing: 0.005em;
  max-width: 640px;
}

/* Summary strip · counts + win rate + avg realised
   ----------------------------------------------------- */
.book-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 56px;
  padding: 22px 26px;
  background: rgba(231, 226, 217, 0.035);
  backdrop-filter: blur(30px) saturate(140%);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  border: 1px solid rgba(240, 235, 223, 0.08);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(240, 235, 223, 0.12),
    inset 0 -1px 0 rgba(10, 10, 10, 0.28),
    0 8px 24px rgba(0, 0, 0, 0.35);
}

.summary-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 10px 4px 0;
  position: relative;
}

.summary-metric + .summary-metric::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: rgba(240, 235, 223, 0.08);
}

.metric-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-400);
}

.metric-value {
  font-family: var(--tg-mono);
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--bone-100);
}

.metric-note {
  font-size: 11px;
  color: var(--warm-500);
  letter-spacing: 0.01em;
  font-family: var(--tg-mono);
}

/* Adds strip — glass variant
   ========================================================================== */
.adds-glass {
  margin-top: 32px;
  padding: 22px 28px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(30px) saturate(160%);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 8px 24px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: baseline;
}

.adds-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2997ff;
  flex-shrink: 0;
}

.adds-body {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: -0.008em;
}

/* Closing quote — glass variant
   ========================================================================== */
.quote-glass {
  margin-top: 72px;
  padding: 64px 40px 40px;
  text-align: center;
  position: relative;
}

.quote-glass::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 235, 223, 0.55), transparent);
  transform: translateX(-50%);
}

.quote-glass .quote-text {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.004em;
  color: var(--bone-100);
  max-width: 820px;
  margin: 0 auto 16px;
}

.quote-glass .quote-footer {
  font-size: 14px;
  color: var(--warm-400);
  letter-spacing: -0.016em;
}

/* Citations — inline superscripts
   Apple's scientific / environmental pages use tiny, unobtrusive markers.
   ========================================================================== */
.cite {
  font-size: 0.6em;
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
  margin-left: 2px;
  letter-spacing: 0;
  font-feature-settings: "tnum" 1;
}

.cite a {
  color: inherit;
  text-decoration: none;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.cite a:hover {
  opacity: 1;
  text-decoration: none;
}

.section-dark .cite a,
.hero .cite a,
.section-about .cite a {
  color: #2997ff;
  opacity: 0.7;
}

.section-light .cite a,
.sources .cite a {
  color: #0066cc;
  opacity: 0.65;
}

/* Sources section — fine print, tight, understated
   ========================================================================== */
.sources {
  background: #f5f5f7;
  padding: 64px 0 72px;
  color: #1d1d1f;
}

.sources-heading {
  font-family: "SF Pro Text", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.52);
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.sources-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  counter-reset: src;
  max-width: 780px;
}

.sources-list li {
  counter-increment: src;
  list-style: none;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: rgba(0, 0, 0, 0.62);
  padding-left: 26px;
  position: relative;
}

.sources-list li::before {
  content: counter(src);
  position: absolute;
  left: 0;
  top: 0;
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #0071e3;
  letter-spacing: 0;
  line-height: 1.45;
}

.sources-list em {
  font-style: italic;
  color: rgba(0, 0, 0, 0.74);
}

.sources-note {
  margin-top: 28px;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: rgba(0, 0, 0, 0.48);
  max-width: 780px;
}

/* About · private trade log link
   ========================================================================== */
.about-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.about-private {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "SF Pro Text", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.48);
  transition: color 0.2s ease;
}

.about-private:hover {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

.about-private-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #30d158;
  box-shadow: 0 0 8px rgba(48, 209, 88, 0.55);
  animation: private-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes private-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* trades.html — minimal private-page chrome
   ========================================================================== */
.body-private {
  background: #04060f;
  color: #ffffff;
}

.nav-private .nav-brand {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 400;
}

.nav-private .nav-brand:hover {
  color: #ffffff;
  opacity: 1;
}

.nav-private-tag {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  padding: 4px 10px;
  border-radius: 980px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Nav right-side cluster on trades page */
.nav-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

/* v4.8: defensive scoping — keep every nav-meta child in normal flow,
   prevent line wrap, and ensure the badge can't shrink itself out of
   visibility. Catches the overlap that surfaced when the lastUpdated
   timestamp width plus the Private badge approached the viewport edge. */
.nav-meta > * {
  position: static;
  white-space: nowrap;
}

.nav-synced {
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}

/* Lock screen
   ========================================================================== */
.lock-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px 0 100px;
}

.lock-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}

.lock-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: 48px 44px 40px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  isolation: isolate;
}

.lock-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
  pointer-events: none;
}

.lock-card::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -15%;
  width: 70%;
  height: 60%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 0%, transparent 65%);
  pointer-events: none;
  filter: blur(6px);
  z-index: 0;
}

.lock-card .eyebrow {
  color: var(--warm-400, #8a8476);
  margin-bottom: 18px;
  letter-spacing: 0.12em;
}

.lock-heading {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 44px;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.012em;
  color: var(--bone-100, #f0ebdf);
  margin-bottom: 14px;
}

.lock-sub {
  font-size: 15px;
  line-height: 1.47;
  color: var(--warm-300, #b0aea5);
  margin-bottom: 32px;
  letter-spacing: -0.01em;
}

.lock-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 2;
}

.lock-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.44);
  margin-bottom: 2px;
}

.lock-input {
  width: 100%;
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: #ffffff;
  font-family: "SF Mono", ui-monospace, Menlo, Monaco, monospace;
  font-size: 16px;
  letter-spacing: 0.04em;
  outline: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.lock-input:focus {
  border-color: rgba(41, 151, 255, 0.6);
  background: rgba(0, 0, 0, 0.32);
  box-shadow: 0 0 0 3px rgba(41, 151, 255, 0.18);
}

.lock-input-err {
  border-color: rgba(255, 69, 58, 0.7) !important;
  animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

.lock-btn {
  margin-top: 8px;
  justify-content: center;
  width: 100%;
  position: relative;
}

.lock-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

.lock-err {
  margin-top: 10px;
  font-size: 13px;
  color: #ff877a;
  letter-spacing: -0.01em;
}

/* Footer
   ========================================================================== */
.footer {
  padding: 36px 0;
  background: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-brand {
  font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: -0.016em;
}

.footer-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.48);
  letter-spacing: -0.01em;
}

/* Responsive
   ========================================================================== */
@media (max-width: 1070px) {
  .container {
    max-width: 780px;
  }

  .display-hero {
    font-size: 68px;
  }

  .stat-strip,
  .data-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .split-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .paradox-grid,
  .duration-grid,
  .flow-rows,
  .geo-grid {
    grid-template-columns: 1fr 1fr;
  }

  .glass-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  .dep-head,
  .dep-row {
    grid-template-columns: 1fr 1fr 1fr 1.8fr;
    padding: 18px 24px;
    gap: 14px;
  }

  .scenario-grid {
    grid-template-columns: 1fr;
  }

  .risk-grid {
    grid-template-columns: 1fr;
  }

  .position-card {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 32px;
  }

  .position-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 0;
    padding: 18px 0;
  }

  .position-metrics > div + div {
    border-left: none;
    padding-left: 0;
  }

  .position-metrics > div:nth-child(even) {
    border-left: 1px solid rgba(0, 0, 0, 0.06);
    padding-left: 16px;
  }

  .position-card-avoid .position-metrics > div:nth-child(even) {
    border-left-color: rgba(255, 255, 255, 0.08);
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .vs-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Mobile / narrow-desktop hamburger overlay (≤1024px)
   Hamburger reveals a full-screen Apple-style menu.
   Both nav-links (primary sections) and The Book collapse into the overlay.
   Nav bar on top stays at 48px with brand left, hamburger right.            */
@media (max-width: 1024px) {
  .nav-hamburger {
    display: flex;
  }

  /* nav-links becomes the full-screen overlay */
  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: 100dvh;
    padding: 96px 28px 120px;
    background: rgba(0, 0, 0, 0.96);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateZ(0);
    transition: opacity 0.28s ease, visibility 0s linear 0.28s;
    z-index: 10000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-links.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.28s ease, visibility 0s linear 0s;
  }

  .nav-links li {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-links li:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-links a {
    display: block;
    width: 100%;
    padding: 20px 4px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.94);
  }

  .nav-links a:hover {
    color: #ffffff;
    opacity: 1;
  }

  /* "The Book" — hide the top-bar copy; show the in-overlay copy instead */
  .nav-private-link--topbar {
    display: none;
  }

  .nav-links li.nav-book-item {
    display: block;
    margin-top: auto;
    padding-top: 32px;
    border-bottom: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-private-link--in-menu {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: auto;
    padding: 20px 4px;
    font-size: 18px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
  }

  .nav-private-link--in-menu .nav-private-lock {
    width: 14px;
    height: 14px;
    opacity: 0.7;
  }

  /* Section padding trims earlier so text doesn't feel squeezed */
  .section {
    padding: 100px 0;
  }

  .container {
    padding: 0 28px;
  }

  .display-hero {
    font-size: 56px;
  }

  .section-heading {
    font-size: 38px;
    line-height: 1.1;
  }

  .stat-strip,
  .data-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 734px) {
  html {
    scroll-padding-top: 56px;
  }

  .container {
    padding: 0 20px;
  }

  .section {
    padding: 88px 0;
  }

  .hero {
    padding: 120px 0 88px;
    min-height: auto;
  }

  /* Tighten hamburger overlay padding on narrow viewports */
  .nav-links {
    padding: 88px 22px 60px;
  }

  .nav-links a {
    font-size: 22px;
    padding: 18px 4px;
  }

  .nav-private-link--in-menu {
    font-size: 16px;
    padding: 16px 4px;
  }

  .display-hero {
    font-size: 42px;
    line-height: 1.06;
  }

  .hero-sub {
    font-size: 18px;
  }

  .section-heading {
    font-size: 30px;
    line-height: 1.12;
  }

  .section-lede,
  .section-lede-light {
    font-size: 17px;
    margin-bottom: 44px;
  }

  .stat-strip,
  .data-grid,
  .paradox-grid,
  .duration-grid,
  .flow-rows,
  .geo-grid,
  .glass-grid {
    grid-template-columns: 1fr;
  }

  .section-glass {
    padding: 80px 0 92px;
  }

  .glass-tile {
    min-height: auto;
    padding: 22px 20px 18px;
  }

  .tile-ticker {
    font-size: 26px;
    margin-top: 14px;
  }

  .tile-desc {
    font-size: 13.5px;
  }

  .tile-prices {
    margin-top: 12px;
  }

  .price-step {
    padding: 9px 10px;
    min-height: 52px;
    gap: 6px;
  }

  .price-label {
    font-size: 8.5px;
    letter-spacing: 0.1em;
  }

  .price-val {
    font-size: 13px;
  }

  /* Summary strip — stacked vertically on narrow, keep dividers but soften */
  .book-summary {
    grid-template-columns: 1fr 1fr;
    padding: 18px 20px;
    gap: 14px 18px;
  }

  .summary-metric {
    padding: 4px 0;
  }

  /* Kill vertical dividers when items wrap onto separate rows */
  .summary-metric + .summary-metric::before {
    display: none;
  }

  .metric-value {
    font-size: 22px;
  }

  /* Lock screen — full-bleed card on narrow viewports */
  .lock-screen {
    padding: 110px 0 72px;
  }

  .lock-card {
    padding: 36px 28px 30px;
    border-radius: 20px;
  }

  .lock-heading {
    font-size: 34px;
  }

  .lock-sub {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .lock-input {
    padding: 12px 16px;
    font-size: 15px;
  }

  .adds-glass {
    padding: 20px 22px;
    flex-direction: column;
    gap: 8px;
    margin-top: 28px;
  }

  .quote-glass {
    margin-top: 56px;
    padding: 48px 18px 32px;
  }

  .quote-glass .quote-text {
    font-size: 24px;
  }

  /* Drop the sync timestamp on narrow screens, keep just the Private tag */
  .nav-synced {
    display: none;
  }

  /* Hide the orphan divider before "The Book" when the middle nav list
     disappears — no more neighbour to separate from. */
  .nav-private-link::before {
    display: none;
  }

  .nav-meta {
    gap: 8px;
  }

  /* Perf panel — stack QTD and YTD vertically with inline labels. Bars
     keep their weight; labels move inside each cell via ::before. */
  .perf-panel {
    padding: 20px 20px 16px;
  }

  .perf-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .perf-row-head {
    display: none;
  }

  .perf-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 0;
  }

  .perf-row-book {
    margin: 4px -12px;
    padding: 16px 12px;
  }

  .perf-row-book::before {
    top: 16%;
    bottom: 16%;
  }

  .perf-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--bone-100);
    margin-bottom: 2px;
  }

  .perf-row-book .perf-name {
    font-size: 16px;
  }

  .perf-cell {
    gap: 10px;
  }

  .perf-cell::before {
    font-family: ui-monospace, "SF Mono", Menlo, Monaco, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--warm-500);
    min-width: 30px;
    text-align: left;
  }

  .perf-row > .perf-cell:nth-child(2)::before {
    content: "QTD";
  }

  .perf-row > .perf-cell:nth-child(3)::before {
    content: "YTD";
  }

  .perf-note {
    margin-top: 12px;
    padding-top: 10px;
    font-size: 10.5px;
  }

  .cat-label {
    font-size: 17px;
  }

  .cat-head {
    margin-bottom: 14px;
    padding-bottom: 10px;
  }

  .ambient-1,
  .ambient-2,
  .ambient-3 {
    width: 280px;
    height: 280px;
  }

  .dep-head {
    display: none;
  }

  .dep-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 20px 22px;
  }

  .dep-row > div {
    font-size: 14px;
  }

  .dep-co {
    font-size: 18px;
    margin-bottom: 4px;
  }

  .dep-impl {
    margin-top: 6px;
  }

  .pull-quote p {
    font-size: 24px;
  }

  .stat-chip,
  .data-card,
  .paradox-card,
  .risk-card,
  .duration-block,
  .scenario-card,
  .vs-card,
  .position-card,
  .flow-step {
    padding: 24px 22px;
  }

  .chart-card,
  .callout,
  .stack-card,
  .concentration,
  .flow-card,
  .duration-card {
    padding: 32px 24px;
  }

  .bar-row,
  .conc-row {
    grid-template-columns: 80px 1fr 60px;
    gap: 12px;
  }

  .bar-name,
  .bar-value {
    font-size: 15px;
  }

  .conc-label,
  .conc-pct {
    font-size: 14px;
  }

  .data-value {
    font-size: 36px;
  }

  .vs-name {
    font-size: 32px;
  }

  .position-name {
    font-size: 32px;
  }

  .quote-text {
    font-size: 28px;
  }

  .about-heading {
    font-size: 40px;
  }

  .scenario-title,
  .duration-title,
  .stack-title,
  .concentration-head,
  .chart-title,
  .callout-title,
  .flow-title,
  .split-title {
    font-size: 22px;
  }

  .about-body {
    font-size: 17px;
  }

  .position-card .position-body {
    font-size: 17px;
  }

  .position-card {
    padding: 28px 24px;
  }

  .position-name {
    font-size: 36px;
  }

  .position-metrics dd {
    font-size: 17px;
  }

  .split-body {
    font-size: 17px;
  }
}

/* =============================================================
   Trades-page auto-refresh classes (added by daily_portfolio_report.py
   on first run, per Master Prompt v4 §16). All names live OUTSIDE the
   ENCRYPTED_PAYLOAD blob so they survive nightly regenerations.
   ============================================================= */

.trades-perf-tbl,
.decision-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--bone-100, #f0ebdf);
  margin-top: 14px;
}
.trades-perf-tbl th,
.decision-tbl th,
.trades-perf-tbl td,
.decision-tbl td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  text-align: left;
  vertical-align: middle;
}
.trades-perf-tbl th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-400, rgba(240, 235, 223, 0.55));
  background: transparent;
}
.trades-perf-tbl td.num,
.decision-tbl td.num,
.trades-perf-tbl th.num,
.decision-tbl th.num {
  text-align: right;
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}
.mono { font-family: "SF Mono", ui-monospace, Menlo, monospace; }
.muted { color: var(--warm-400, rgba(240, 235, 223, 0.55)); }
.num { font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; }

.trades-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.trades-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.trades-kpi-lbl {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-400, rgba(240, 235, 223, 0.55));
}
.trades-kpi-val {
  font-size: 24px;
  font-weight: 600;
  font-feature-settings: 'tnum' 1;
  color: var(--bone-100, #f0ebdf);
  letter-spacing: -0.01em;
}

.trades-exec-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--bone-100, #f0ebdf);
}
.trades-exec-list li {
  padding-left: 14px;
  position: relative;
  line-height: 1.55;
}
.trades-exec-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(41, 151, 255, 0.85);
}

.ledger-row {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  margin-top: 8px;
  overflow: hidden;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.ledger-row:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(41, 151, 255, 0.25);
  box-shadow: 0 0 0 1px rgba(41, 151, 255, 0.12) inset;
}
.ledger-row[open] {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(41, 151, 255, 0.3);
}
.ledger-row > summary {
  cursor: pointer;
  list-style: none;
  padding: 13px 18px;
  display: grid;
  grid-template-columns: 18px minmax(220px, 1.6fr) minmax(120px, auto) minmax(80px, auto) minmax(160px, auto) auto;
  gap: 16px;
  align-items: center;
  font-size: 13px;
  color: var(--bone-100, #f0ebdf);
}
.ledger-row > summary::-webkit-details-marker { display: none; }
.ledger-caret {
  display: inline-block;
  width: 14px;
  font-size: 19px;
  line-height: 1;
  color: rgba(41, 151, 255, 0.7);
  transition: transform 0.2s ease, color 0.2s ease;
  text-align: center;
  font-weight: 600;
}
.ledger-row[open] .ledger-caret { transform: rotate(90deg); color: #2997ff; }
.ledger-row:hover .ledger-caret { color: #2997ff; }
.ledger-name {
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--bone-100, #f0ebdf);
}
.ledger-status {
  color: var(--warm-400, rgba(240, 235, 223, 0.55));
  font-size: 12px;
  text-align: left;
}
.ledger-days {
  color: var(--warm-400, rgba(240, 235, 223, 0.55));
  font-size: 12px;
  text-align: right;
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}
.ledger-last {
  color: var(--warm-400, rgba(240, 235, 223, 0.55));
  font-size: 12px;
  text-align: left;
}
.ledger-hint {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(41, 151, 255, 0.5);
  text-align: right;
  opacity: 0;
  transition: opacity 0.18s ease;
  white-space: nowrap;
}
.ledger-row:hover .ledger-hint { opacity: 1; }
.ledger-row[open] .ledger-hint { opacity: 0; }
.ledger-body {
  padding: 4px 18px 14px 36px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
}
.ledger-timeline {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.ledger-timeline li {
  display: flex;
  gap: 18px;
  font-size: 12.5px;
  padding: 3px 0;
  color: var(--bone-100, #f0ebdf);
}
.ledger-date {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  width: 105px;
  color: var(--warm-400, rgba(240, 235, 223, 0.55));
}
.ledger-type { letter-spacing: -0.005em; }

.ticker-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(41, 151, 255, 0.18);
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #2997ff;
}

.charts-row {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 28px;
  margin-top: 14px;
}
.chart-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 18px;
}
.chart-h3 {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--warm-400, rgba(240, 235, 223, 0.55));
}
.chart-donut { width: 100%; max-width: 220px; height: auto; display: block; margin: 0 auto; }
.chart-legend {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--bone-100, #f0ebdf);
}
.legend-sw {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}
.bar-stack { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 180px 1fr 60px; gap: 12px; align-items: center; font-size: 12.5px; }
.bar-lbl { color: var(--bone-100, #f0ebdf); }
.bar-track { height: 10px; background: rgba(255, 255, 255, 0.06); border-radius: 5px; overflow: hidden; }
.bar-fill { display: block; height: 100%; }
.bar-val { text-align: right; color: var(--warm-400, rgba(240, 235, 223, 0.55)); }

.watchlist-row {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  margin-top: 8px;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.watchlist-row:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(41, 151, 255, 0.25);
  box-shadow: 0 0 0 1px rgba(41, 151, 255, 0.12) inset;
}
.watchlist-row[open] {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(41, 151, 255, 0.3);
}
.watchlist-row > summary {
  cursor: pointer;
  list-style: none;
  padding: 13px 18px;
  display: grid;
  grid-template-columns: 18px minmax(60px, 90px) minmax(100px, 110px) minmax(150px, auto) minmax(100px, auto) auto;
  gap: 14px;
  align-items: center;
  font-size: 13px;
}
.watchlist-row > summary::-webkit-details-marker { display: none; }
.watchlist-caret {
  display: inline-block;
  width: 14px;
  font-size: 19px;
  line-height: 1;
  color: rgba(41, 151, 255, 0.7);
  transition: transform 0.2s ease, color 0.2s ease;
  text-align: center;
  font-weight: 600;
}
.watchlist-row[open] .watchlist-caret { transform: rotate(90deg); color: #2997ff; }
.watchlist-row:hover .watchlist-caret { color: #2997ff; }
.watchlist-name {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--bone-100, #f0ebdf);
}
.watchlist-name strong { font-weight: 600; }
.watchlist-date {
  color: var(--warm-400, rgba(240, 235, 223, 0.55));
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.watchlist-pct {
  color: var(--bone-100, #f0ebdf);
  font-size: 12.5px;
  text-align: right;
}
.watchlist-hint {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(41, 151, 255, 0.5);
  text-align: right;
  opacity: 0;
  transition: opacity 0.18s ease;
  white-space: nowrap;
}
.watchlist-row:hover .watchlist-hint { opacity: 1; }
.watchlist-row[open] .watchlist-hint { opacity: 0; }
.watchlist-body {
  padding: 6px 22px 16px 50px;
  border-top: 1px dashed rgba(255, 255, 255, 0.07);
}
.watchlist-reason {
  font-size: 13px;
  color: var(--bone-100, #f0ebdf);
  margin: 10px 0 8px;
  line-height: 1.5;
}
.watchlist-source { font-size: 11px; }

/* v4.7: collapse all watchlist-row badges (verdict, state, thesis-status)
   into a single flex group so multiple badges wrap below each other on
   narrow viewports instead of overlapping in the right-most grid cell. */
.watchlist-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.watchlist-row > summary .watchlist-badges .tile-status {
  position: static;
  white-space: nowrap;
}

.watchlist-orig-thesis {
  font-size: 12.5px;
  color: rgba(240, 235, 223, 0.78);
  margin: 4px 0 8px;
  line-height: 1.5;
  padding-left: 10px;
  border-left: 2px solid rgba(41, 151, 255, 0.35);
}
.watchlist-orig-thesis .orig-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm-400, rgba(240, 235, 223, 0.55));
  margin-right: 6px;
}

.watchlist-history {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.15s ease;
}
.watchlist-history > summary {
  cursor: pointer;
  list-style: none;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--warm-400, rgba(240, 235, 223, 0.55));
}
.watchlist-history > summary::-webkit-details-marker { display: none; }
.watchlist-history > summary::before {
  content: "›";
  display: inline-block;
  width: 12px;
  font-size: 14px;
  color: rgba(41, 151, 255, 0.55);
  transition: transform 0.18s ease;
  margin-right: 4px;
}
.watchlist-history[open] > summary::before { transform: rotate(90deg); color: #2997ff; }
.watchlist-history:hover > summary { color: var(--bone-100, #f0ebdf); }
.watchlist-prior-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.watchlist-prior-list li {
  display: grid;
  grid-template-columns: 110px minmax(80px, 110px) 1fr;
  gap: 12px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--bone-100, #f0ebdf);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}
.watchlist-prior-list li:last-child { border-bottom: none; }
.watchlist-prior-date {
  color: var(--warm-400, rgba(240, 235, 223, 0.55));
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}
.watchlist-prior-pct {
  text-align: right;
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}
.watchlist-prior-reason { color: var(--bone-100, #f0ebdf); }

.notes-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.notes-list li { padding: 9px 12px; border-radius: 8px; }
.note-warn { background: rgba(183, 110, 0, 0.12); border-left: 3px solid #b76e00; color: #f0d9a8; }
.note-info { background: rgba(255, 255, 255, 0.03); border-left: 3px solid rgba(255, 255, 255, 0.18); color: var(--bone-100, #f0ebdf); }

@media (max-width: 720px) {
  .charts-row { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 120px 1fr 56px; }
  .ledger-date { width: 84px; }
  .ledger-row > summary {
    grid-template-columns: 18px 1fr;
    row-gap: 6px;
  }
  .ledger-name, .ledger-status, .ledger-days, .ledger-last { grid-column: 2; }
  .ledger-hint { display: none; }
  .watchlist-row > summary {
    grid-template-columns: 18px 1fr;
    row-gap: 6px;
  }
  .watchlist-name, .watchlist-date, .watchlist-pct { grid-column: 2; }
  .watchlist-hint { display: none; }
}