/* The Foundation (Kim G) landing page, v2 (Oct 3, 2026).
   Roy: "Stop with all the AI stuff... Make it look professional." So: no gradients,
   no glows, no glowing text, no emoji, no animated backgrounds. A white, Apple-clean
   page with Apple's own gray (#f5f5f7) for alternate sections, SF Pro on Apple
   devices and Inter everywhere else, solid black buttons, real photos, lots of
   space and few words. Gold is only a quiet accent in the logo. */

:root {
  --bg: #ffffff;
  --gray: #f5f5f7;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #86868b;
  --line: #d2d2d7;
  --line-soft: #e8e8ed;
  --accent: #0066cc; /* Apple's link blue, for text links only */
  --gold: #a8832f;

  /* chart colors (TradingView's, so the chart looks like a real platform) */
  --up: #089981;
  --down: #f23645;
  --level: #2962ff;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --nav-h: 64px;
  --gutter: clamp(20px, 4vw, 40px);
  --wrap: 1120px;
  --section-y: clamp(80px, 10vw, 136px);
  --radius: 18px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--text { max-width: 760px; }
.nw { white-space: nowrap; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--line-soft); }
.nav-inner {
  max-width: var(--wrap); height: 100%; margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 32px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; }
.brand-icon { display: block; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 6px; background: #000; object-fit: cover; }
.brand-logo { height: 22px; width: auto; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { font-size: 14px; color: var(--ink-2); transition: color 0.15s var(--ease); }
.nav-links a:hover { color: var(--ink); }

/* ---------- Buttons + links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 24px;
  border-radius: 999px;
  background: var(--ink); color: #fff;
  font-size: 16px; font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.15s var(--ease);
}
.btn:hover { background: #000; }
.btn:active { opacity: 0.85; }
.btn--sm { height: 34px; padding: 0 16px; font-size: 14px; }
.btn--block { width: 100%; }
.btn--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #e8e8ed; }

.link { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-size: 17px; }
.link:hover { text-decoration: underline; }
.link span { font-size: 1.15em; line-height: 1; }

/* ---------- Type ---------- */
.kicker { font-size: 17px; font-weight: 600; color: var(--gold); margin-bottom: 14px; }
.meet { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.h1 {
  font-family: var(--font-display);
  font-size: clamp(42px, 5.2vw, 68px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.8vw, 48px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 32em; margin-top: 22px; }
.sub { font-size: clamp(18px, 1.5vw, 21px); color: var(--ink-2); margin-top: 14px; }
.prose p { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--ink-2); }
.prose p + p { margin-top: 16px; }
.prose .strong { color: var(--ink); font-weight: 600; }
.note { margin-top: 18px; font-size: 14px; color: var(--ink-3); }

/* ---------- Sections ---------- */
.section { padding: var(--section-y) 0; }
.section--gray { background: var(--gray); }
.head { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); }
.wrap--text > .h2 + .prose { margin-top: 24px; }

/* ---------- Hero (Roy, Oct 4): Robinhood's homepage gradient, in gold ----------
   Measured on robinhood.com: pure black for the top ~40%, then the color rises
   from the bottom and is brightest toward the two bottom corners (their navy
   peaks around rgb(31,51,102) at the edges, rgb(22,35,70) in the middle). Same
   shape here in Kim's gold. */
.hero {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  /* Roy: the gradient stops right under "$99 a month... Cancel anytime"; the gray starts there */
  padding: clamp(56px, 8vh, 112px) var(--gutter) clamp(110px, 15vh, 170px);
  text-align: center;
  color: #fff;
  background:
    radial-gradient(75% 85% at 0% 100%, rgba(150, 110, 38, 0.6) 0%, rgba(150, 110, 38, 0) 70%),
    radial-gradient(75% 85% at 100% 100%, rgba(150, 110, 38, 0.6) 0%, rgba(150, 110, 38, 0) 70%),
    linear-gradient(180deg, #000 0%, #000 22%, #0f0b05 42%, #2a1e0b 68%, #4e3916 100%);
}
.hero-inner { width: 100%; max-width: 1400px; display: flex; flex-direction: column; align-items: center; }
.hero-kicker { font-size: 17px; font-weight: 600; color: #d9b96f; margin-bottom: 20px; }
.hero-title {
  /* Roy, Oct 4: two lines on desktop, one sentence each. Font: Apple's SF Pro
     Display on Apple devices, Inter elsewhere (Roy passed on Source Serif 4
     and DM Serif Display). */
  font-family: var(--font-display);
  font-weight: 700;
  /* sized so the longer first line still fits on one line on laptops and up */
  font-size: clamp(38px, 4.35vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.hero-title .ht-line { display: block; text-wrap: balance; }
.hero-lede { margin-top: 22px; max-width: 40em; text-wrap: balance; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.55; color: rgba(255, 255, 255, 0.78); }
/* The hero candlesticks: full screen width, edge to edge, near-white, static.
   site.js draws them once at the real width (fixed spacing, pixel-aligned), so
   they stay crisp and never stretch. */
.hero-candles {
  /* a centered flex item, so 100vw spans the screen edge to edge on its own */
  width: 100vw; flex: none;
  /* fills the open space down to the button: tall like a real chart, but the button stays on the first screen */
  height: clamp(160px, calc(100svh - 590px), 360px);
  /* older candles on the left sit back a little; the climb reads left to right */
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.55) 0%, #000 65%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.55) 0%, #000 65%);
  margin-top: clamp(18px, 2.6vh, 30px); /* Roy, Oct 4: about 25% closer to the subheader */
}
.hero-candles svg { display: block; width: 100%; height: 100%; }
.hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; }
.hero-note { margin-top: 18px; font-size: 14px; color: rgba(255, 255, 255, 0.55); }
/* Desktop subheader (Roy, Oct 4): bigger, still two balanced lines */
@media (min-width: 981px) {
  .hero-lede { font-size: clamp(21px, 1.65vw, 26px); max-width: 36em; line-height: 1.45; }
}
.link--light { color: #e6c98a; }

/* ---------- Intro (gray, right under the hero) ---------- */
.intro-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
.intro-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.intro-copy .h2 + .prose { margin-top: 24px; }
.intro .facts { border-top-color: var(--line); }
.intro .facts > div + div { border-left-color: var(--line); }

.facts {
  margin-top: clamp(48px, 6vw, 80px);
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-soft);
}
.facts > div { padding: 24px 20px 0 0; }
.facts > div + div { padding-left: 20px; border-left: 1px solid var(--line-soft); }
.facts dt { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.facts dd { font-size: 15px; color: var(--ink-2); margin-top: 2px; }

/* ---------- What you'll learn ---------- */
.lesson { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.lesson-list { list-style: none; display: flex; flex-direction: column; }
.lesson-list li + li { border-top: 1px solid var(--line-soft); }
.lesson-item {
  position: relative; width: 100%;
  display: grid; grid-template-columns: 28px 1fr; column-gap: 8px;
  padding: 18px 0;
  color: var(--ink-3);
  transition: color 0.2s var(--ease);
}
.lesson-item:hover { color: var(--ink-2); }
.li-n { grid-row: 1; font-size: 15px; font-weight: 600; padding-top: 3px; }
.li-t { grid-row: 1; grid-column: 2; font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.li-d { grid-column: 2; font-size: 16px; line-height: 1.5; color: var(--ink-2); max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s var(--ease), opacity 0.25s var(--ease), margin 0.35s var(--ease); }
.lesson-item.is-on { color: var(--ink); }
.lesson-item.is-on .li-d { max-height: 6em; opacity: 1; margin-top: 6px; }
.li-bar { grid-column: 2; height: 2px; background: var(--line-soft); margin-top: 14px; overflow: hidden; display: none; }
.lesson-item.is-on .li-bar { display: block; }
.li-bar i { display: block; height: 100%; width: 0; background: var(--ink); }

.lesson-chart {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 12px 12px 14px;
}
.lesson-chart figcaption { font-size: 12.5px; color: var(--ink-3); text-align: center; margin-top: 8px; }
.lc { display: block; width: 100%; height: auto; }

/* chart pieces */
.lc .grid line { stroke: #f0f0f3; stroke-width: 1; }
.lc .cndl { transition: opacity 0.35s var(--ease); }
.lc .cndl.up rect { fill: var(--up); } .lc .cndl.up line { stroke: var(--up); }
.lc .cndl.dn rect { fill: var(--down); } .lc .cndl.dn line { stroke: var(--down); }
.lc.dim-others .cndl:not(.focus) { opacity: 0.18; }
.lc .layer { opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none; }
.lc .layer.on { opacity: 1; }
.lc .lvl { stroke-dasharray: 6 5; }
.lc .lvl-sup { stroke: var(--level); }
.lc .lvl-res { stroke: #8e8e93; }
.lc .trend { stroke: var(--ink); }
.lc .tag-txt { font-family: var(--font); font-weight: 600; letter-spacing: 0.02em; }
.lc .anat line { stroke: var(--ink); stroke-width: 1; }
.lc .anat circle { fill: var(--ink); }
.lc .anat text { fill: var(--ink); font-family: var(--font); font-weight: 600; }
.lc .anat text.soft { fill: var(--ink-2); font-weight: 500; }
.lc .zone-win { fill: rgba(8, 153, 129, 0.1); }
.lc .zone-loss { fill: rgba(242, 54, 69, 0.1); }
.lc .entry-dot { fill: var(--ink); }
.lc .entry-ring { fill: none; stroke: var(--ink); stroke-width: 1.5; }

/* ---------- Split sections (photo + copy) ---------- */
.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
.split--rev { grid-template-columns: 0.9fr 1.1fr; }
.split-photo img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: 62% 50%; border-radius: var(--radius); }
.split-photo--tall img { aspect-ratio: 4 / 5; object-position: 50% 20%; }
.split-photo--square img { aspect-ratio: 1 / 1; object-position: 50% 50%; }
.split-copy .h2 + .prose { margin-top: 22px; }

.steps { list-style: none; counter-reset: s; margin-top: 32px; }
.steps li { counter-increment: s; position: relative; padding: 20px 0 20px 44px; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 20px; font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--ink-3); }
.steps h3 { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.steps p { color: var(--ink-2); margin-top: 4px; }

.pull { margin-top: 32px; padding-left: 20px; border-left: 2px solid var(--gold); }
.pull p { font-family: var(--font-display); font-size: clamp(22px, 2vw, 26px); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; }
.pull cite { display: block; margin-top: 8px; font-style: normal; font-size: 15px; color: var(--ink-2); }
.split-copy > .link { margin-top: 28px; }

/* ---------- Lists ---------- */
.list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.list li { position: relative; padding-left: 28px; font-size: 17px; line-height: 1.45; }
.list li::before { content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; background: center / 16px no-repeat; }
.list--yes li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.1 3L13 4.6' fill='none' stroke='%231d1d1f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.list--no li { color: var(--ink-2); }
.list--no li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='%2386868b' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }

.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 920px; margin: 0 auto; }
.fit-col { padding: clamp(28px, 3vw, 40px); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.fit-col h3 { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 20px; }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 920px; margin: 0 auto; }
.plan { display: flex; flex-direction: column; padding: clamp(28px, 3.4vw, 44px); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.plan--main { border: 2px solid var(--ink); }
.plan-tag { font-size: 14px; font-weight: 600; color: var(--gold); margin-bottom: 10px; }
.plan-tag--quiet { color: var(--ink-3); }
.plan-name { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.025em; }
.plan-desc { color: var(--ink-2); margin-top: 4px; }
.plan-price { font-family: var(--font-display); font-size: 56px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin: 28px 0 24px; }
.plan-price span { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-2); margin-left: 6px; }
.plan .btn { margin-bottom: 28px; }

/* ---------- FAQ ---------- */
.faq { margin-top: 32px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 0;
  font-size: 19px; font-weight: 600; letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  background: linear-gradient(var(--ink-2), var(--ink-2)) center / 12px 1.5px no-repeat,
              linear-gradient(var(--ink-2), var(--ink-2)) center / 1.5px 12px no-repeat;
  transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 40px 24px 0; color: var(--ink-2); font-size: 17px; line-height: 1.6; }

/* ---------- Final CTA ---------- */
.final { background: #000; color: #f5f5f7; padding: clamp(88px, 11vw, 140px) 0; text-align: center; }
.final-inner { display: flex; flex-direction: column; align-items: center; }
.final .sub { color: #a1a1a6; margin: 16px 0 32px; }

/* ---------- Footer ---------- */
.footer { background: var(--gray); padding: 48px 0 40px; font-size: 13px; color: var(--ink-2); }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.footer-logo { height: 22px; width: auto; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-links a:hover { color: var(--ink); }
.disclaimer { margin-top: 24px; line-height: 1.65; max-width: 880px; color: var(--ink-3); }
.copy { margin-top: 16px; color: var(--ink-3); }

/* ---------- Reveal: a quiet fade ---------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Tablet + phone ---------- */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .intro-grid, .split, .split--rev, .lesson { grid-template-columns: 1fr; }
  .intro-photo { max-width: 560px; }
  .hero-title { font-size: clamp(40px, 7vw, 60px); }
  .split-photo { order: -1; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts > div:nth-child(n+3) { margin-top: 8px; }
  .fit, .plans { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 640px) {
  :root { --nav-h: 56px; }
  .brand-logo { height: 19px; }
  .brand { gap: 8px; }
  .brand-icon { width: 30px; height: 30px; border-radius: 5px; }
  .nav-inner { gap: 16px; }
  .hero { padding-top: 48px; padding-bottom: 96px; }
  /* Phones (Roy, Oct 4): three lines. "Learn when to get in" / "and when to get out"
     at the big size, then "before you burn your profits." smaller, sized by site.js
     to exactly the width of "and when to get out". */
  .hero-title { font-size: clamp(22px, 6.4vw, 30px); line-height: 1.1; }
  .hero-title .ht-line { text-wrap: wrap; }
  .hero-title .ht-a, .hero-title .ht-m { display: block; white-space: nowrap; }
  .hero-title .ht-last { white-space: nowrap; margin-top: 0.24em; color: #e6c98a; letter-spacing: -0.02em; } /* Roy, Oct 4: an intentional accent line */
  .hero-candles { height: 210px; margin-top: 22px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 16px; width: 100%; }
  .hero-actions .link { justify-content: center; }
  .facts dt { font-size: 18px; }
  .faq summary { font-size: 17px; }
  .footer-top { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0.001ms !important; }
}

@media (min-width: 641px) and (max-height: 780px) {
  .hero { padding-top: 44px; padding-bottom: 88px; }
  .hero-kicker { margin-bottom: 14px; }
}

/* Phones: the chart sits inside the open lesson's row (moved there by site.js) */
@media (max-width: 980px) {
  .lesson-list li .lesson-chart { margin: 2px 0 20px; animation: chartIn 0.35s var(--ease); }
  .lesson-item .li-bar { display: none !important; }
}
@keyframes chartIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lesson-list li .lesson-chart { animation: none; } }

/* Meet Kim: real family photos (Roy, Oct 4), one frame that fades between them */
.family { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: #1d1d1f; }
.family img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s var(--ease); }
.family img.is-on { opacity: 1; }
.split-copy .never { margin-top: 22px; font-size: 16px; color: var(--ink-2); }
@media (max-width: 980px) { .family { order: -1; max-width: 560px; width: 100%; } }

/* "Is this for you?" (Roy, Oct 4): green checkboxes for yes, red X's for no */
.fit .list li { padding-left: 34px; }
.fit .list li::before { top: 1px; width: 22px; height: 22px; border-radius: 6px; background-size: 14px; }
.fit .list--yes li::before {
  background-color: #2fb15c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-6.8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.fit .list--no li { color: var(--ink); }
.fit .list--no li::before {
  background-color: #e5484d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Desktop (Roy, Oct 4): the family photo bigger and square, matching the text beside it */
@media (min-width: 981px) {
  #kim .split--rev { grid-template-columns: 1fr 1fr; }
  .family { aspect-ratio: 1 / 1; }
  .family img { object-position: 50% 50% !important; }
}

/* "Seven years ago..." section (Roy, Oct 4): body text 15% bigger so it reads easier */
.intro .prose p { font-size: clamp(19.5px, 1.61vw, 21.85px); }
.intro .meet { font-size: 19.5px; }

/* Lesson 1, Reading the market: the market overview screen swaps in for the chart */
.lc > * { transition: opacity 0.35s var(--ease); }
.lc .market { opacity: 0; pointer-events: none; }
.lc.show-market > *:not(.market) { opacity: 0 !important; }
.lc.show-market .market { opacity: 1; }
.lc .mk { font-family: var(--font); letter-spacing: -0.01em; }

/* VIP card (Roy, Oct 4): a gold gradient card that pops and reads premium */
.plan--gold {
  border: 0;
  color: #1d1d1f;
  background: linear-gradient(150deg, #f7e7b4 0%, #e8c46f 38%, #c99a3d 72%, #a8792b 100%);
  box-shadow: 0 30px 70px -34px rgba(168, 121, 43, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.plan--gold .plan-desc, .plan--gold .plan-price span { color: rgba(29, 29, 31, 0.72); }
.plan-tag--gold { color: #5a3d0c; }
.plan--gold .list--yes li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.1 3L13 4.6' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.plan--gold .btn { background: #1d1d1f; color: #fff; }
.plan--gold .btn:hover { background: #000; }

/* Kim's Oct 4 call: explain the trading focus before the class facts. */
.trading-focus { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 5vw, 64px); margin-top: 64px; padding: clamp(28px, 4vw, 48px); background: #fff; border: 1px solid var(--line); border-radius: 24px; }
.trading-focus-label { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #80601e; margin-bottom: 14px; }
.trading-focus h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.12; letter-spacing: -.035em; max-width: 13em; }
.trading-focus-copy > p:not(.trading-focus-label) { margin-top: 18px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.trading-focus-copy strong { font-weight: 600; color: var(--ink); }
.trading-focus-copy .trading-focus-note { font-size: 14px; }
.trading-focus-plan { border-left: 1px solid var(--line); padding-left: clamp(24px, 4vw, 48px); align-self: center; }
.trading-focus-plan-title { font-size: 17px; font-weight: 600; margin-bottom: 24px; }
.trading-focus-plan ol { list-style: none; display: grid; gap: 24px; padding: 0; }
.trading-focus-plan li { display: flex; gap: 18px; align-items: baseline; }
.trading-focus-plan li > span { color: #80601e; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.trading-focus-plan strong { display: block; font-size: 17px; font-weight: 600; }
.trading-focus-plan small { display: block; color: var(--ink-2); font-size: 14px; margin-top: 4px; line-height: 1.5; }
@media (max-width: 640px) {
  .trading-focus { grid-template-columns: 1fr; margin-top: 40px; border-radius: 20px; }
  .trading-focus-plan { padding: 26px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}