/* =========================================================
   Yeshwanth Rohit: portfolio
   Colours and fonts live in :root just below. Change them there.
   ========================================================= */

:root {
  /* Colours */
  --paper:         #F2F0EB;  /* warm off-white page background      */
  --paper-deep:    #E8E5DE;  /* slightly darker paper (photo spots)  */
  --ink:           #17181A;  /* headlines, "not a casino."           */
  --ink-soft:      #2F3135;  /* body text                            */
  --muted:         #5F6266;  /* small labels and small print         */
  --headline-grey: #828487;  /* grey half of big headlines only      */
  --rule:          #D3CFC6;  /* thin divider lines                   */
  --accent:        #1E3A6B;  /* deep blue: buttons, links, menu      */
  --blue-1:        #C3C8CF;  /* lighter shades of the same blue,     */
  --blue-2:        #939EB1;  /* used only in the market-type scale   */
  --blue-3:        #5E7191;  /* and the 85 / 15 money bar            */
  --navy:          #14264A;  /* the one dark section (My profit)     */
  --hero-navy:     #121a33;  /* top section, its facts strip and the menu bar over it */
  --navy-2:        #1B3158;  /* panel inside the dark section        */
  --navy-rule:     rgba(242, 240, 235, .2);
  --on-navy:       #F2F0EB;  /* off-white text on navy               */
  --on-navy-soft:  #D6DAE2;
  --on-navy-muted: #A9B2C3;
  --amber:         #B7791F;  /* loss bar: half stop                  */
  --red:           #B3261E;  /* loss bar: hard stop                  */
  --accent-hover:  #142A4F;
  --on-accent:     #F7F6F2;  /* text on blue buttons                 */

  /* Fonts */
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --max: 80rem;
  --header-h: 3.75rem;
  --col-gap: clamp(1.5rem, 3.2vw, 3.25rem);
  --measure: 29em;          /* reading width for paragraphs: about 58–65 characters per line */

  /* Motion */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Base ---------- */
/* Paragraphs at the reading width avoid leaving a single word alone on the last line */
.prose p, .sub__note, .strategies, .timeline__what, .rules__text, .journey__text > p, .faq__a, .story__text p:not(.story__lead) { text-wrap: pretty; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font: 400 1rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color .2s var(--ease-out), text-decoration-color .25s var(--ease-out), text-underline-offset .25s var(--ease-out);
}
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

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

.skip-link {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: .75rem 1rem; font-weight: 500; text-decoration: none;
}
.skip-link:focus { top: .75rem; color: var(--on-accent); }

/* ---------- Grid: small label column + content column ---------- */
.grid { display: grid; gap: 1.25rem; }

@media (min-width: 900px) {
  body { font-size: 1.0625rem; }
  :root { --max: calc(1320px + 2 * var(--gutter)); }   /* one container for the whole site: content at most 1320px wide, centred */
  .grid {
    /* left label column ≈ 22% of the page width on a laptop; content takes the rest */
    grid-template-columns: minmax(10.5rem, 20.5%) minmax(0, 1fr);
    gap: 0;
  }
  .col-body {
    border-left: 1px solid var(--rule);
    padding-left: var(--col-gap);
  }
  .col-label { padding-right: var(--col-gap); }
}

/* ---------- Top menu ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
/* Over the dark top section the menu is see-through with white text;
   once you scroll past it (or open the phone menu) it returns to the light style. */
.js .site-header:not(.is-scrolled):not(:has(.site-nav.is-open)) { background: transparent; border-bottom-color: rgba(242, 240, 235, .16); }
/* As soon as the page moves even 1px, the bar over the top section is solid navy, so nothing shows behind the menu */
.js .site-header.is-moved:not(.is-scrolled):not(:has(.site-nav.is-open)) { background: var(--hero-navy); border-bottom-color: rgba(242, 240, 235, .22); }
.js .site-header:not(.is-scrolled):not(:has(.site-nav.is-open)) .brand { color: #FFFFFF; }
.js .site-header:not(.is-scrolled):not(:has(.site-nav.is-open)) .site-nav ul a { color: rgba(242, 240, 235, .8); }
.js .site-header:not(.is-scrolled):not(:has(.site-nav.is-open)) .site-nav ul a:hover { color: #FFFFFF; text-decoration-color: rgba(255, 255, 255, .5); }
.js .site-header:not(.is-scrolled):not(:has(.site-nav.is-open)) .nav-cta { color: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85); }
.js .site-header:not(.is-scrolled):not(:has(.site-nav.is-open)) .nav-cta:hover { background: rgba(255, 255, 255, .1); }
.js .site-header:not(.is-scrolled):not(:has(.site-nav.is-open)) .menu-toggle { color: #FFFFFF; border-color: rgba(255, 255, 255, .55); }
.js .site-header:not(.is-scrolled):not(:has(.site-nav.is-open)) :focus-visible { outline-color: #FFFFFF; }
.site-header__inner {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  min-height: var(--header-h);
  column-gap: 1.5rem;
}
.brand {
  font-family: var(--serif);
  font-size: 1.1875rem;
  letter-spacing: -.005em;
  color: var(--ink);
  text-decoration: none;
  padding-block: .5rem;
}
.brand:hover { color: var(--ink); }

.site-nav ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; padding-bottom: .75rem; }
.site-nav ul a {
  display: inline-block;
  padding-block: .5rem;
  font-size: .875rem; font-weight: 500;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .45em;
  transition: color .2s var(--ease-out), text-decoration-color .2s var(--ease-out);
}
.site-nav ul a:hover { color: var(--ink); text-decoration-color: var(--rule); }
/* The section currently on screen: near-black with a thin deep-blue underline */
.site-nav ul a.is-active { color: var(--ink); text-decoration-color: var(--accent); }

/* Phone menu button: only shown when JavaScript is running. */
.menu-toggle { display: none; }
.js .menu-toggle {
  display: inline-flex; align-items: center;
  min-height: 2.75rem; padding: 0 1rem;
  font: 500 .875rem/1 var(--sans); color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule); border-radius: 2px;
  cursor: pointer;
}
.js .menu-toggle[aria-expanded="true"] { border-color: var(--ink); }
.js .site-nav {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.js .site-nav.is-open { display: block; }
.js .site-nav ul { display: block; padding: 0; }
.js .site-nav li + li { border-top: 1px solid var(--rule); }
.js .site-nav ul a { display: block; padding: .95rem var(--gutter); font-size: 1rem; }
/* "Book a call" sits at the bottom of the opened phone menu */
.js .site-nav .nav-cta { display: flex; margin: .75rem var(--gutter) 1rem; }

@media (min-width: 900px) {
  .site-header__inner { flex-wrap: nowrap; }
  .js .menu-toggle { display: none; }
  .site-nav, .js .site-nav { display: flex; align-items: center; gap: clamp(1rem, 1.9vw, 2rem); position: static; border: 0; background: none; }
  .site-nav ul, .js .site-nav ul { display: flex; gap: clamp(1rem, 1.9vw, 2rem); padding: 0; }
  .js .site-nav li + li { border: 0; }
  .site-nav ul a, .js .site-nav ul a { padding: .5rem 0; font-size: .875rem; }
  .nav-cta, .js .site-nav .nav-cta { display: inline-flex; margin: 0; min-height: 2.25rem; padding: .4rem .9rem; font-size: .8125rem; }
}

/* ---------- Buttons and links ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3rem; padding: .85rem 1.4rem;
  background: var(--accent); color: var(--on-accent);
  font: 500 .9375rem/1.25 var(--sans);
  text-decoration: none;
  border-radius: 2px;
  transition: background-color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.button:hover { background: var(--accent-hover); color: var(--on-accent); transform: translateY(-1px); }
/* Outlined button ("Book a call"): blue border, no fill, so the solid
   "See my live Investment Journey" button stays the only filled blue one */
.button--outline { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.button--outline:hover { background: rgba(30, 58, 107, .07); color: var(--accent-hover); transform: translateY(-1px); }
.icon-external { width: .75em; height: .75em; flex: none; }

.text-link {
  display: inline-flex; align-items: center;
  min-height: 2.75rem;
  font-weight: 500; font-size: .9375rem;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: .35em;
  transition: text-decoration-color .25s var(--ease-out), text-underline-offset .25s var(--ease-out);
}
.text-link:hover { color: var(--ink); text-decoration-color: var(--ink); text-underline-offset: .45em; }

/* ---------- 1. Top section: full-width, photo-led ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;                      /* row 1: the text · row 2: facts strip */
  margin-top: calc(-1 * (var(--header-h) + 1px));   /* runs up under the menu */
  background: var(--hero-navy);                      /* plain navy #121a33 */
  color: var(--on-navy);
}

.hero__inner {
  position: relative;
  grid-row: 1; grid-column: 1;
  display: flex; flex-direction: column; justify-content: center;
  width: 100%;
  padding-top: calc(var(--header-h) + 1px + clamp(2.5rem, 7vh, 4.5rem));
  padding-bottom: clamp(2rem, 5vh, 3rem);
}
.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.65rem, 1.25rem + 6vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -.022em;
  color: #FFFFFF;
  text-wrap: balance;
}
.hero__title-a { color: rgba(242, 240, 235, .68); }
.hero__intro { margin-bottom: 28px; }   /* about 28px between the label and the headline */
/* Small label above the headline, in the same [ LABEL ] style as the section labels */
.hero__label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(242, 240, 235, .62);
}
.hero__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .75rem 1.75rem;
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
}
@media (max-width: 479px) {
  .hero__actions .button { width: 100%; }
}
/* On the dark top section the main button is white, so it stands out */
.hero .button { background: #FFFFFF; color: var(--navy); }
.hero .button:hover { background: #E4E7ED; color: var(--navy); }
.hero .text-link { color: #FFFFFF; text-decoration-color: rgba(255, 255, 255, .45); }
.hero .text-link:hover { color: #FFFFFF; text-decoration-color: #FFFFFF; }
.hero :focus-visible { outline-color: #FFFFFF; }

@media (min-width: 900px) {
  .hero .hero__inner { justify-content: center; }
  .hero__intro, .hero__title, .hero__actions { max-width: 62%; }
  .hero__title { font-size: min(clamp(3.2rem, 1.5rem + 7.2vw, 6.6rem), 12vh); }   /* about 20% larger */
  .hero__title-a, .hero__title-b { display: block; }
}

/* ---------- Key facts (along the bottom of the top section) ---------- */
.hero__facts { grid-row: 2; grid-column: 1; position: relative; z-index: 2; background: #121a33; border-top: 1px solid rgba(242, 240, 235, .2); }
.facts__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* phones: 2 × 2 */
  margin: 0;
}
.fact {
  display: flex;
  flex-direction: column-reverse;     /* number shows above its label */
  justify-content: flex-end;
  gap: .45rem;
  padding: 1.35rem 0;
}
.fact:nth-child(odd) { padding-right: .75rem; }
.fact:nth-child(even) { padding-left: .75rem; border-left: 1px solid rgba(242, 240, 235, .2); }
.fact:nth-child(n+3) { border-top: 1px solid rgba(242, 240, 235, .2); }
.fact__num {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: #FFFFFF;
  font-variant-numeric: lining-nums;
}
.fact__label { font-size: .8125rem; line-height: 1.35; color: rgba(242, 240, 235, .74); text-wrap: balance; }
@media (min-width: 700px) {
  /* Four facts in one row with thin dividers between them */
  .facts__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fact,
  .fact:nth-child(odd),
  .fact:nth-child(even),
  .fact:nth-child(n+3) { padding: 1.75rem 1.25rem 2rem; border-top: 0; border-left: 1px solid rgba(242, 240, 235, .2); }
  .fact:first-child { padding-left: 0; border-left: 0; }
  .fact:last-child { padding-right: 0; }
}
@media (min-width: 900px) {
  /* First column = the label column of the sections below, so the first divider continues their
     vertical line; the other three facts share the rest of the width equally */
  .facts__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* four equal columns */
  .fact:first-child { padding-right: var(--col-gap); }
  .fact + .fact { padding-left: var(--col-gap); }
}
@media (min-width: 900px) and (max-height: 760px) {
  /* Short laptop screens: everything, including the facts, still fits on the first screen */
  .hero .hero__inner { padding-top: calc(var(--header-h) + 1px + 1.5rem); padding-bottom: 1.5rem; }
  .hero__title { font-size: min(clamp(3.2rem, 1.5rem + 7.2vw, 6.6rem), 10.5vh); }
  .hero__actions { margin-top: 1.25rem; }
  .hero__facts .fact { padding-block: 1.1rem 1.25rem; }
  .hero__facts .fact__num { font-size: min(3.5rem, 6.5vh); }
}

/* ---------- Sections 2–6: shared frame ---------- */
.section { border-top: 1px solid var(--rule); }
/* One column: the label row on top, the content right under it (no side column, no vertical divider) */
.section > .grid { display: block; }
.section .col-label { padding: 3.25rem 0 0; }
.section .col-body { padding: 1.5rem 0 4.5rem; border-left: 0; }
@media (min-width: 900px) {
  .section .col-label { padding-top: clamp(4.5rem, 6.5vw, 7rem); }
  .section .col-body { padding-top: clamp(1.75rem, 2.5vw, 2.25rem); padding-bottom: clamp(5rem, 7vw, 7.5rem); }
}

/* Label row:  01   [ MY STORY ] ———————————— HYDERABAD */
.section__label {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.section__num { margin-right: 1.6em; }
.section__rule { flex: 1; height: 1px; margin-left: 1.6em; background: rgba(18, 26, 51, .16); }
.section__place { margin-left: 1.6em; }
@media (max-width: 759px) {
  .section__place { display: none; }
}

.section__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.125rem, 1.5rem + 2.4vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -.018em;
  color: var(--ink);
  text-wrap: balance;
}

.bracket { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* ---------- 2. Why I do this ---------- */
.story { display: grid; gap: 3rem; margin-top: 2.5rem; }
/* Mission line as a pull-quote: serif ~40px, 3px navy bar, 28px gap, about 20 characters per line */
.story__lead {
  max-width: calc(20ch + 31px);
  margin-bottom: 2.25rem;
  padding-left: 28px;
  border-left: 3px solid #121a33;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.15rem + 1.6vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
/* Body text: 19px, line-height 1.7, max 58 characters, 30px between paragraphs */
.story__text p:not(.story__lead) { max-width: var(--measure); font-size: 19px; line-height: 1.7; }
.story__text p:not(.story__lead) + p { margin-top: 30px; }
.story__text em { font-family: var(--serif); font-style: italic; font-size: 1.12em; color: #121a33; }

/* Photo: 4:5, with a thin outline offset 18px right and 18px down behind it, and a caption row */
.story__photo { width: 86%; margin: 0; }
.story__frame { position: relative; isolation: isolate; }
.story__frame::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border: 1px solid rgba(18, 26, 51, .16);
  transform: translate(18px, 18px);
}
.story__frame img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
  background: var(--paper-deep);
}
.story__caption {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: calc(18px + .9rem);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 759px) {
  .story__text p:not(.story__lead) { font-size: 17px; }
}
@media (min-width: 760px) {
  /* text about 58%, photo on the right */
  .story { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
  .story__photo { width: auto; }   /* right edge lines up with the end of the label row */
}
@media (min-width: 900px) {
  /* Laptops and wider: text column, then the photo at the right end of the label row */
  .story { grid-template-columns: minmax(0, 1fr) auto; }
  .story__photo {
    width: min(400px, 56vh);                         /* max 400px wide; 56vh wide = 70vh tall at 4:5 */
    position: sticky; top: 110px;                    /* stays in view while the text scrolls */
  }
  .story__lead { font-size: 34px; }                  /* pull-quote about 34px */
  /* paragraphs: same size and line-height as every other section, about 62 characters per line */
  .story__text p:not(.story__lead) { font-size: inherit; line-height: inherit; max-width: 27.5em; }
}

/* Section 2 is split around the full-width quote band */
.story-top .col-label,
.story-top .col-body { padding-bottom: clamp(3rem, 6vw, 5rem); }
.story-top .col-label { padding-bottom: 0; }
.story-bottom .col-body { padding-top: clamp(3rem, 6vw, 5rem); }
.story-bottom .timeline { margin-top: 0; }   /* the band above already gives the space */

/* Mentor quote: its own full-width band */
.quote-band {
  margin: 0;
  padding-block: clamp(4.5rem, 10vw, 9rem);
  background: var(--paper-deep);
  text-align: center;
}
.quote-band blockquote p {
  max-width: 20ch;
  margin-inline: auto;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.75rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}
.quote-band figcaption { margin-top: 1.5rem; font-size: .875rem; color: var(--muted); }

.timeline {
  margin-top: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--rule);
}
.timeline li,
.rules li {
  display: grid;
  gap: .3rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--rule);
}
.timeline__when,
.rules__num {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.timeline__what { max-width: var(--measure); }
@media (min-width: 640px) {
  .timeline li {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 1.5rem;
    align-items: baseline;
  }
}

/* ---------- 3. How I trade and protect money ---------- */
.sub { margin-top: 2.75rem; }
.sub + .sub {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding-top: 2.25rem;
  border-top: 1px solid var(--rule);
}
.sub__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
}
.prose { max-width: var(--measure); margin-top: 1.25rem; }
.prose p + p { margin-top: 1.1em; }
.sub__note { max-width: var(--measure); margin-top: 1.5rem; }

/* Market-type scale (a small table: types across, India VIX below) */
.vix {
  width: 100%;
  margin-top: 2.5rem;
  border-collapse: collapse;
  table-layout: fixed;
}
.vix th, .vix td {
  padding: 0 .75rem 0 0;
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}
.vix__head { width: 3.6rem; font-size: .6875rem; line-height: 1.3; color: var(--muted); }
thead .vix__head { padding-top: 1.1rem; }
.vix__type {
  font-family: var(--serif);
  font-size: clamp(.8125rem, 3.9vw, .9375rem);
  line-height: 1.2;
  color: var(--ink);
}
.vix__type::before {
  content: "";
  display: block;
  height: .375rem;
  margin-bottom: .75rem;
  border-radius: 1px;
}
.vix__type--1::before { background: var(--blue-1); }
.vix__type--2::before { background: var(--blue-2); }
.vix__type--3::before { background: var(--blue-3); }
.vix__type--4::before { background: var(--accent); }
.vix tbody th, .vix tbody td { padding-top: .5rem; }
.vix tbody td {
  font-size: .75rem;
  color: var(--ink-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 379px) {            /* small phones: give the four types more room */
  .vix th, .vix td { padding-right: .5rem; }
  .vix__head { width: 3.25rem; }
}
@media (max-width: 340px) {            /* very small phones: side labels kept for screen readers only */
  .vix .vix__head { width: 0; padding: 0; font-size: 0; }
}
@media (min-width: 640px) {
  .vix th, .vix td { padding-right: .5rem; }
  .vix__head { width: 8.5rem; font-size: .8125rem; }
  thead .vix__head { padding-top: 1.2rem; }
  .vix__type { font-size: 1.25rem; }
  .vix tbody td { font-size: .9375rem; }
}

.strategies {
  max-width: var(--measure);
  margin-top: 2rem;
  font-size: .9375rem;
  color: var(--muted);
}
.strategies__lead { font-weight: 500; color: var(--ink); }

/* Where the money sits */
.split-bar { display: flex; gap: 3px; height: .5rem; margin-top: 1.75rem; }
.split-bar__a { flex: 85 1 0; background: var(--accent); border-radius: 1px; }
.split-bar__b { flex: 15 1 0; background: var(--blue-1); border-radius: 1px; }

.split { width: 100%; margin-top: 1.5rem; border-collapse: collapse; }
.split th, .split td {
  padding: .9rem 0;
  text-align: left;
  vertical-align: baseline;
  font-weight: 400;
  border-top: 1px solid var(--rule);
}
.split thead th { padding: 0 0 .5rem; border-top: 0; font-size: .75rem; color: var(--muted); }
.split tbody tr:last-child > * { border-bottom: 1px solid var(--rule); }
.split tbody th {
  width: 7.5rem;
  padding-right: 1rem;
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--ink);
  white-space: nowrap;
}
.split td { max-width: 60ch; }
.swatch {
  display: inline-block;
  width: .625rem; height: .625rem;
  margin-right: .55rem;
  border-radius: 1px;
  vertical-align: .1em;
}
.swatch--a { background: var(--accent); }
.swatch--b { background: var(--blue-1); }
@media (min-width: 640px) {
  .split tbody th { width: 8.5rem; }
}

/* How I protect money: 3 rules */
/* Loss bar above the 3 rules: 0% → 2% half stop (amber) → 4% hard stop (red) */
.lossbar { margin-top: 1.75rem; }
.lossbar__track {
  position: relative;
  height: 3px;
  margin-inline: 7px;                 /* room so the end marks sit fully inside */
  border-radius: 2px;
  background: linear-gradient(90deg, var(--rule) 0%, var(--amber) 50%, var(--red) 100%);
}
.lossbar__track::before {             /* small start tick at 0% */
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 2px; height: 11px;
  background: var(--muted);
  transform: translate(-50%, -50%);
}
.lossbar__mark {
  position: absolute; top: 50%;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  transform: translate(-50%, -50%);
}
.lossbar__mark--half { left: 50%; background: var(--amber); }
.lossbar__mark--hard { left: 100%; background: var(--red); }
.lossbar__labels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: .7rem;
  font-size: .8125rem;
  color: var(--ink-soft);
}
.lossbar__label--half { justify-self: center; }
.lossbar__label--hard { justify-self: end; }
.lossbar__pct { font-weight: 600; color: var(--ink); }

.rules { margin-top: 1.75rem; border-bottom: 1px solid var(--rule); }
.rules__text { max-width: var(--measure); font-size: 1.0625rem; }
.rules__text strong { font-weight: 600; color: var(--ink); }
.small-print { margin-top: .875rem; font-size: .8125rem; color: var(--muted); }
.protect__close {
  max-width: 30ch;
  margin-top: 2.25rem;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem);
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}
@media (min-width: 640px) {
  .rules li {
    grid-template-columns: 8.5rem minmax(0, 1fr);   /* same column edge as "Market type" and "About 85%" */
    gap: 0;
    align-items: baseline;
  }
}

/* ---------- 4. My profit, shown live ---------- */
.journey {
  display: grid;
  gap: 2rem;
  margin-top: 2.25rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--paper-deep);
  border-radius: 2px;
}
.journey__text > p:first-child { max-width: var(--measure); text-wrap: pretty; }
.journey__live {
  margin-top: 1.5rem;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem);
  line-height: 1.3;
  color: var(--ink);
}
.journey__actions { margin-top: 1.75rem; }
.journey .small-print { margin-top: .875rem; }
.journey__shot img {
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper);
}
.journey__proof {
  padding-top: 1.25rem;
  border-top: 1px solid #CBC6BC;   /* thin line, a touch darker so it shows on the panel */
  font-size: .9375rem;
  color: var(--ink-soft);
}

/* The one dark section: deep navy, off-white text, white button */
.section--dark { background: var(--navy); color: var(--on-navy-soft); border-top-color: var(--navy); }
.section--dark .section__title,
.section--dark .journey__live { color: var(--on-navy); }
.section--dark .section__label,
.section--dark .section__num,
.section--dark .small-print { color: var(--on-navy-muted); }
.section--dark .journey { background: var(--navy-2); }
.section--dark .section__rule { background: rgba(242, 240, 235, .2); }
.section--dark .journey__proof { border-top-color: var(--navy-rule); color: var(--on-navy-soft); }
.section--dark .journey__shot img { border-color: var(--navy-rule); }
.section--dark .button { background: #FFFFFF; color: var(--navy); }
.section--dark .button:hover { background: #E4E7ED; color: var(--navy); }
.section--dark :focus-visible { outline-color: var(--on-navy); }
@media (min-width: 900px) {
  .section--dark .col-body { border-left-color: var(--navy-rule); }
}
@media (max-width: 479px) {
  .journey__actions .button { width: 100%; }
}
@media (min-width: 900px) {
  /* Only applies once the screenshot is switched on */
  .journey:has(.journey__shot) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: var(--col-gap);
    align-items: start;
  }
  .journey:has(.journey__shot) .journey__proof { grid-column: 1 / -1; }
}

/* ---------- 5. Education & certifications ---------- */
.edu { margin-top: 2.25rem; }
.edu__head { display: none; }
.edu__list { margin: 0; border-bottom: 1px solid var(--rule); }
.edu__row {
  display: grid;
  gap: .3rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--rule);
}
.edu__row dt {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1rem + .4vw, 1.25rem);
  line-height: 1.3;
  color: var(--ink);
  text-wrap: pretty;
}
.edu__row dd { margin: 0; font-size: .9375rem; color: var(--ink-soft); }
.edu__note { margin-top: .875rem; font-size: .8125rem; line-height: 1.6; color: var(--muted); }
.edu__note a { white-space: nowrap; text-decoration-color: rgba(30, 58, 107, .35); }
.edu__note a:hover { text-decoration-color: var(--accent); }
.edu__note .icon-external { display: inline-block; margin-left: .25em; vertical-align: -.05em; }
@media (min-width: 640px) {
  .edu__head,
  .edu__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    column-gap: 2rem;
    align-items: baseline;
  }
  .edu__head { padding-bottom: .5rem; font-size: .75rem; color: var(--muted); }
}

/* ---------- FAQ: simple open/close rows ---------- */
.faq { margin-top: 2.25rem; border-bottom: 1px solid var(--rule); }
.faq__item { border-top: 1px solid var(--rule); }
.faq__q {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.15rem;
  font-family: var(--serif);
  font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.375rem);
  line-height: 1.3;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color .2s var(--ease-out);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {                      /* + when closed, – when open */
  content: "+";
  flex: none;
  font-family: var(--sans);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--accent);
}
.faq__item[open] > .faq__q::after { content: "–"; }
.faq__q:hover { color: var(--accent); }
.faq__a { max-width: var(--measure); padding-bottom: 1.35rem; color: var(--ink-soft); }

/* ---------- 6. Let's talk ---------- */
.contact { margin-top: 1.5rem; }
.contact__lead {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem);
  line-height: 1.3;
  color: var(--ink);
}
.contact__list { margin: 2.25rem 0 0; border-bottom: 1px solid var(--rule); }
.contact__row {
  display: grid;
  gap: .25rem;
  padding-block: .9rem;
  border-top: 1px solid var(--rule);
}
.contact__row dt { font-size: .8125rem; color: var(--muted); }
.contact__row dd {
  margin: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem 1.25rem;
}
.contact__link {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.75rem;
  font-family: var(--serif);
  font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.375rem);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 7.5rem; min-height: 2.75rem;
  padding: 0 1rem;
  font: 500 .875rem/1 var(--sans);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color .2s var(--ease-out);
}
.copy-btn:hover { border-color: var(--ink); background: rgba(23, 24, 26, .04); }
.contact__note { flex-basis: 100%; margin: 0; font-size: .8125rem; color: var(--muted); }
.copy-btn.is-copied { border-color: var(--accent); color: var(--accent); }
@media (min-width: 640px) {
  .contact__row {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 0;
    align-items: center;
  }
}

/* ---------- 7. Footer ---------- */
.site-footer { border-top: 1px solid var(--rule); }
/* One clean row: disclaimer on the left, © on the right (stacked on phones) */
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-block: 2rem 2.5rem;
}
.site-footer__text p { max-width: 70ch; font-size: .875rem; color: var(--ink-soft); }
.site-footer__text p + p { margin-top: .25rem; }
.site-footer__copy { font-size: .8125rem; color: var(--muted); }
.site-footer__copy + .site-footer__copy { margin-top: .25rem; }   /* the thank-you line under the © line */
@media (min-width: 760px) {
  .site-footer__inner { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 2rem; padding-block: 2.25rem 3.25rem; }
  .site-footer__copy { white-space: nowrap; }
  .site-footer__meta { text-align: right; }
}

/* ---------- Computers: headlines about 20% larger ---------- */
@media (min-width: 900px) {
  .section__title { font-size: clamp(2.55rem, 1.8rem + 2.9vw, 4.2rem); }
  .sub__title { font-size: clamp(1.8rem, 1.45rem + 1.2vw, 2.4rem); }
  .quote-band blockquote p { font-size: clamp(2.4rem, 1.45rem + 3.85vw, 4.5rem); }
}

/* ---------- Reduce motion: no hover lifts, no fades, no smooth changes ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .button:hover, .button--outline:hover { transform: none; }
}

/* ---------- Blur fade (once, when it scrolls into view) ----------
   Hidden state only applies when JavaScript runs AND the visitor
   has not asked their device to reduce motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .js [data-reveal] {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(8px);
  }
  .js [data-reveal].is-in {
    opacity: 1;
    filter: blur(0);
    transform: none;
    transition:
      opacity .6s var(--ease-out),
      filter .6s var(--ease-out),
      transform .6s var(--ease-out);
    transition-delay: var(--reveal-delay, 0s);
  }
}

@media print {
  .site-header, .skip-link { display: none; }
  [data-reveal] { opacity: 1 !important; filter: none !important; transform: none !important; }
}