/* =============================================================
 * iamjoshgalindo.org — Josh Galindo coaching
 *
 * Positioning: not a guru selling a course. An operating broker in Las
 * Vegas — 1,300 flips, 200+ agents, 80+ rentals — selling access to a
 * machine that is running right now. The design has to feel like money
 * and restraint, not hype: near-black, one red, a lot of air, and type
 * doing the heavy lifting.
 * ============================================================= */


:root {
  --red:        #E11B22;
  --red-deep:   #A8121A;
  --ink:        #0B0B0C;
  --ink-2:      #131316;
  --ink-3:      #1C1C21;
  --paper:      #F6F4F0;
  --fg:         #F6F4F0;
  --fg-2:       #B6B4B0;
  --fg-3:       #8A8884;
  --fg-4:       #5A5854;
  --hair:       rgba(246,244,240,.11);
  --hair-2:     rgba(246,244,240,.20);

  /* Display is Archivo at 800 with tight tracking — heavy, confident, reads
     like money. Body is Schibsted Grotesk rather than Inter, which is the
     default of every site on the internet and reads as such. */
  --serif: "Archivo", "Helvetica Neue", Arial, sans-serif;   /* legacy var name */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sans:  "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --max:    1240px;
  --gutter: 28px;
  --sect:   clamp(84px, 10vw, 152px);

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

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 780px; }

/* ── TYPE ─────────────────────────────────────────────── */
h1, h2 {
  font-family: var(--display); font-weight: 800;
  letter-spacing: -0.035em; line-height: .94; margin: 0;
  text-transform: uppercase;
}
h1 { font-size: clamp(34px, min(5.1vw, 7.6vh), 74px); }
h2 { font-size: clamp(31px, 4.2vw, 58px); }
/* Card and FAQ headings stay sentence case — long strings in heavy caps
   become a wall nobody reads. */
h3 {
  font-family: var(--display); font-weight: 700; font-size: clamp(20px, 2vw, 25px);
  line-height: 1.18; letter-spacing: -0.02em; margin: 0;
}
p  { margin: 0 0 1.15em; }
em { font-style: italic; color: var(--red); font-family: var(--display); font-weight: 600; }

.eyebrow {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; color: var(--red);
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--red); flex: none; }
.lede { font-size: clamp(18px, 1.6vw, 21px); color: var(--fg-2); line-height: 1.62; }
.fine { font-family: var(--sans); font-size: 12.5px; color: var(--fg-4); letter-spacing: .01em; }

/* ── BUTTONS ──────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 17px 30px; border-radius: 2px; border: 1px solid transparent;
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; cursor: pointer;
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease);
}
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-deep); transform: translateY(-2px); }
.btn-ghost { border-color: var(--hair-2); color: var(--fg); }
.btn-ghost:hover { border-color: var(--fg); transform: translateY(-2px); }
.btn-lg { padding: 21px 40px; font-size: 14px; }

/* ── NAV ──────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(11,11,12,.72);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--hair);
}
.nav-in {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  height: 78px; display: flex; align-items: center; gap: 40px;
}
.brand { display: flex; align-items: baseline; gap: 12px; flex: none; }
.brand .wm {
  font-family: var(--display); font-size: 19px; font-weight: 800;
  letter-spacing: -.02em; text-transform: uppercase; color: var(--fg); line-height: 1;
}
.brand .wm-sub {
  font-family: var(--sans); font-size: 9.5px; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase; color: var(--red);
  position: relative; top: -1px;
}
.nav-links { display: flex; gap: 34px; margin-left: auto; align-items: center; }
.nav-links a {
  font-size: 12.5px; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--fg-2); padding: 6px 0;
  border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.nav-links a:hover, .nav-links a.on { color: var(--fg); border-color: var(--red); }
.nav-cta { margin-left: 6px; }

.burger { display: none; margin-left: auto; background: none; border: 0; padding: 11px 4px; cursor: pointer; flex-direction: column; gap: 5px; }
.burger span { display: block; width: 25px; height: 2px; background: var(--fg); transition: transform .22s var(--ease), opacity .18s; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile { display: none; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .burger { display: flex; }
  /* Brand + CTA + burger will not fit a phone; the mobile panel carries its
     own Apply button, so the header one goes. */
  .nav-cta { display: none; }
  .nav-in { gap: 16px; height: 68px; }
  .brand span { font-size: 11px; letter-spacing: .16em; }
  .mobile { display: block; border-top: 1px solid var(--hair); padding: 10px var(--gutter) 26px; background: var(--ink); }
  .mobile[hidden] { display: none; }
  .mobile a { display: block; padding: 17px 0; font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--hair); color: var(--fg); }
  .mobile .btn { width: 100%; justify-content: center; margin-top: 20px; }
}

/* ── HERO ─────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(56px, 7vw, 104px) 0 0; overflow: hidden; min-height: min(88vh, 900px); display: flex; align-items: center; }
/* Las Vegas behind the whole hero. The photo is a real Strip shot at dusk, and
   at full strength it fights the type and reads like stock. So it is pushed way
   down — desaturated, darkened, and covered by a scrim that is near-solid on the
   left where the headline sits and opens up on the right behind Josh. It should
   register as place and depth, not as a picture of a city. */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%;
  filter: saturate(.46) brightness(.56) contrast(1.06);
  transform: scale(1.06);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, var(--ink) 2%, rgba(11,11,12,.90) 26%,
                    rgba(11,11,12,.44) 58%, rgba(11,11,12,.62) 100%),
    linear-gradient(180deg, rgba(11,11,12,.58) 0%, rgba(11,11,12,.06) 42%,
                    rgba(11,11,12,.84) 88%, var(--ink) 100%);
}
/* On phones the copy runs the full width, so it lands on the bright middle of the
   photo instead of the dark left edge. Same image, much heavier scrim. */
@media (max-width: 900px) {
  .hero-bg img { filter: saturate(.34) brightness(.38) contrast(1.05); object-position: 62% 30%; }
  .hero-bg::after {
    background:
      linear-gradient(180deg, rgba(11,11,12,.80) 0%, rgba(11,11,12,.72) 46%,
                      rgba(11,11,12,.88) 78%, var(--ink) 100%);
  }
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 700px at 72% 42%, rgba(225,27,34,.20), transparent 60%),
    radial-gradient(700px 560px at 78% 18%, rgba(255,255,255,.09), transparent 65%);
}
/* The scrim above was aimed at a left-hand column of type with Josh standing on
   the right. A centred column needs the opposite: dark at both edges, a vignette
   rather than a wipe, with the red bloom sitting behind the middle of the video
   instead of off to one side. */
.hero-vsl .hero-bg::after {
  background:
    radial-gradient(130% 100% at 50% 42%, rgba(11,11,12,.34) 0%,
                    rgba(11,11,12,.76) 52%, var(--ink) 100%),
    linear-gradient(180deg, rgba(11,11,12,.72) 0%, rgba(11,11,12,.40) 30%,
                    rgba(11,11,12,.86) 84%, var(--ink) 100%);
}
.hero-vsl.hero::before {
  background:
    radial-gradient(760px 620px at 50% 56%, rgba(225,27,34,.20), transparent 62%),
    radial-gradient(620px 500px at 50% 10%, rgba(255,255,255,.07), transparent 68%);
}
@media (max-width: 900px) {
  .hero-vsl .hero-bg::after {
    background:
      linear-gradient(180deg, rgba(11,11,12,.82) 0%, rgba(11,11,12,.74) 46%,
                      rgba(11,11,12,.90) 78%, var(--ink) 100%);
  }
}

/* faint editorial rule behind the figure */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--hair); z-index: 0;
}
.hero-grid { display: grid; grid-template-columns: 1.24fr .76fr; gap: clamp(24px, 3vw, 56px); align-items: end; position: relative; z-index: 1; width: 100%; }
.hero-copy { padding-bottom: clamp(40px, 6vw, 96px); }
@media (min-width: 901px) and (max-height: 820px) {
  .hero { min-height: 0; padding-top: 44px; }
  .hero h1 { margin-bottom: 18px; }
  .hero-sub { margin-bottom: 24px; font-size: 16.5px; }
  .hero-trust { margin-top: 18px; }
  .hero-copy { padding-bottom: 44px; }
}
.hero h1 { margin-bottom: 22px; }
.hero h1 .thin { font-weight: 800; font-style: italic; color: var(--fg-2); display: block; }
.hero-sub { font-size: clamp(16px, 1.35vw, 18.5px); color: var(--fg-2); max-width: 40em; margin-bottom: 28px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.portrait { position: relative; align-self: end; margin-bottom: -1px; }
.portrait img {
  width: auto; max-width: 100%; max-height: min(78vh, 820px);
  margin-left: auto; display: block;
  filter: contrast(1.04) saturate(.96);
  /* the cutout's edge is hard; fade the very bottom into the page */
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 86%, transparent 99%);
}

/* ── HERO: CENTRED VIDEO SALES LETTER ─────────────────── */
/* One column, one read: eyebrow → headline → video → button. The old two-column
   grid put a cutout portrait next to a small video card, which meant two Joshes
   on screen and a video that read as an accessory. Here the video is the object
   the whole block is built to deliver you to, and the CTA sits directly under it
   at the exact moment the pitch lands. */
.hero-vsl { display: block; min-height: 0; padding: clamp(28px, 3vw, 44px) 0 clamp(46px, 5vw, 78px); }
.hero-vsl-in { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-vsl .eyebrow { justify-content: center; }
/* A notch smaller than the site's global h1 so the eyebrow, the headline and the
   top of the video all clear the fold on a 1440x900 laptop. */
.hero-vsl h1 { font-size: clamp(31px, min(4.3vw, 6.3vh), 58px); margin-bottom: 14px; max-width: 820px; }
.hero-vsl .hero-lede {
  font-size: clamp(15.5px, 1.2vw, 17.5px); color: var(--fg-2);
  max-width: 52ch; margin: 0 auto clamp(18px, 2vw, 24px);
}
.hero-vsl .hero-lede b { color: var(--fg); font-weight: 700; }
.hero-vsl .hero-cta { justify-content: center; margin-top: clamp(18px, 1.8vw, 22px); }
.hero-vsl .hero-credit { margin-top: 16px; }
.hero-vsl .hero-trust { justify-content: center; margin-top: 20px; }
/* Demoted: the back half of the original hero paragraph. Kept in the DOM, sized
   and coloured so it reads as a footnote to the offer rather than a pitch. */
.hero-vsl .hero-sub {
  font-size: 14.5px; line-height: 1.72; color: var(--fg-3);
  max-width: 62ch; margin: clamp(24px, 3vw, 36px) auto 0;
}
.hero-vsl .hero-sub b { color: var(--fg-2); }

/* ── HERO VIDEO ───────────────────────────────────────── */
.hero-video {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000; overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(225,27,34,.30);
  /* Two shadows doing different jobs: a deep drop that lifts the card off the
     skyline, and a low-opacity red bloom so the frame glows rather than outlines. */
  box-shadow: 0 0 46px rgba(225,27,34,.17), 0 30px 78px rgba(0,0,0,.70);
}
/* Width is capped two ways — a hard 880px, and by the height left over once the
   headline block and the button are accounted for. That second cap is what keeps
   the $499 button on the first screen of a 1440x900 laptop: the player is allowed
   to be as big as it can be without pushing its own CTA below the fold. */
.hero-vsl .hero-video { max-width: min(880px, calc((100vh - 470px) * 1.7778)); }
.hero-video video { width: 100%; height: 100%; display: block; object-fit: cover; background: #000; }
/* Belt and braces on the resting state. The controls attribute is only added by
   JS on the first real click, but a browser that decides to draw its own chrome
   before then would blow the whole designed-poster effect, so it is suppressed
   in CSS too until .playing is set. */
.hero-video:not(.playing) video::-webkit-media-controls,
.hero-video:not(.playing) video::-webkit-media-controls-enclosure { display: none !important; }
.hero-video:not(.playing) video { pointer-events: none; }
/* The overlay is the resting design of this card, not a scrim waiting to be
   dismissed: a centred red button on a graded poster, with the title and runtime
   set on the bottom edge like a chapter card. Nothing floats in the middle
   except the one thing you are meant to press. */
.hv-play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; cursor: pointer; font: inherit; color: var(--fg);
  background: linear-gradient(180deg, rgba(11,11,12,.18) 0%, rgba(11,11,12,.22) 40%, rgba(11,11,12,.82) 100%);
  transition: background .3s var(--ease);
}
.hv-play:hover { background: linear-gradient(180deg, rgba(11,11,12,.08) 0%, rgba(11,11,12,.12) 40%, rgba(11,11,12,.76) 100%); }
.hv-ring {
  width: 78px; height: 78px; border-radius: 50%; background: var(--red);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 40px rgba(225,27,34,.52), 0 0 0 10px rgba(225,27,34,.14);
  transition: transform .3s var(--ease), background .25s var(--ease), box-shadow .3s var(--ease);
}
.hv-ring svg { width: 28px; height: 28px; fill: #fff; margin-left: 4px; }
.hv-play:hover .hv-ring {
  transform: scale(1.08); background: var(--red-deep);
  box-shadow: 0 12px 40px rgba(225,27,34,.6), 0 0 0 16px rgba(225,27,34,.12);
}
.hv-label {
  position: absolute; left: 0; right: 0; bottom: clamp(16px, 2.4vw, 24px);
  font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  text-shadow: 0 1px 14px rgba(0,0,0,.9);
}
.hv-label span { color: var(--fg-3); }
/* Resting state is the default; the overlay only leaves once playback is
   actually running, and the JS puts it back when the video ends. */
.hv-play { display: flex; }
.hero-video.playing .hv-play { display: none; }

/* Muted autoplay loop (VSL): the video plays silently behind a light scrim and
   the pill invites sound. Smaller ring, label beside it, everything still one
   big click target across the whole card. */
.hero-video.muted-loop .hv-play {
  background: linear-gradient(180deg, rgba(11,11,12,0) 0%, rgba(11,11,12,0) 55%, rgba(11,11,12,.55) 100%);
  align-items: flex-end; justify-content: flex-start;
  padding: 0 0 clamp(14px, 2vw, 20px) clamp(14px, 2vw, 20px);
}
.hero-video.muted-loop .hv-ring {
  width: 46px; height: 46px;
  box-shadow: 0 8px 24px rgba(225,27,34,.5), 0 0 0 6px rgba(225,27,34,.14);
}
.hero-video.muted-loop .hv-ring svg { width: 20px; height: 20px; margin-left: 0; }
.hero-video.muted-loop .hv-label {
  position: static; margin-left: 12px; align-self: center;
  text-align: left; bottom: auto;
}
.hero-video.muted-loop .hv-play:hover { background: linear-gradient(180deg, rgba(11,11,12,0) 0%, rgba(11,11,12,0) 55%, rgba(11,11,12,.62) 100%); }

/* Short laptop screens: pull the vertical rhythm in so the button still lands
   near the fold instead of a scroll below it. */
@media (min-width: 901px) and (max-height: 800px) {
  .hero-vsl { padding-top: 26px; }
  .hero-vsl h1 { margin-bottom: 10px; }
  .hero-vsl .hero-lede { margin-bottom: 18px; }
  .hero-vsl .hero-cta { margin-top: 20px; }
}

@media (max-width: 900px) {
  .hero { min-height: 0; padding-top: 40px; display: block; }
  .hero-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  .hero-grid > * { min-width: 0; }
  .hero-copy { padding-bottom: 34px; }
  .portrait { max-width: 420px; margin: 0 auto; }
  .portrait img { max-width: 100%; }
  /* Same stack on a phone, video edge-to-edge inside the gutter, button under
     it without a scroll in between. */
  .hero-vsl .hero-video { max-width: 100%; }
  .hero-vsl h1 { max-width: 100%; }
  .hero-vsl .hero-cta { width: 100%; flex-direction: column; align-items: stretch; margin-top: 22px; }
  /* Narrower side padding than the global .btn-lg: at 390px the default 40px
     each side is exactly enough to wrap "Start with an hour — $499" onto two
     lines, which makes the primary button look broken. */
  .hero-vsl .hero-cta .btn { width: 100%; justify-content: center; padding-left: 18px; padding-right: 18px; }
  .hero-vsl .hero-trust { justify-content: center; gap: 10px 18px; }
  .hv-ring { width: 62px; height: 62px; box-shadow: 0 10px 30px rgba(225,27,34,.5), 0 0 0 8px rgba(225,27,34,.14); }
  .hv-ring svg { width: 22px; height: 22px; }
  .hv-label { font-size: 9.5px; letter-spacing: .18em; }
}

/* ── PROOF BAR ────────────────────────────────────────── */
.proof { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); background: var(--ink-2); }
.proof-in { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.proof-i { padding: 34px 26px; border-right: 1px solid var(--hair); }
.proof-i:last-child { border-right: 0; }
.proof-n { font-family: var(--display); font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; line-height: 1; letter-spacing: -.035em; }
.proof-l { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); margin-top: 9px; }
@media (max-width: 760px) {
  .proof-in { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .proof-i:nth-child(2n) { border-right: 0; }
  .proof-i:nth-child(-n+2) { border-bottom: 1px solid var(--hair); }
}

/* ── SECTIONS ─────────────────────────────────────────── */
section { padding: var(--sect) 0; }
.alt { background: var(--ink-2); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.sect-head { max-width: 760px; margin-bottom: clamp(42px, 5vw, 68px); }
.sect-head p { color: var(--fg-2); margin-top: 20px; font-size: 18px; }

/* ── CARDS ────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
@media (max-width: 900px) { .cards { grid-template-columns: minmax(0,1fr); } }
.card {
  background: var(--ink-3); border: 1px solid var(--hair); border-radius: 3px;
  padding: 38px 32px; transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.card:hover { border-color: var(--hair-2); transform: translateY(-3px); }
.card .n { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--red); margin-bottom: 18px; }
.card h3 { margin-bottom: 13px; }
.card p { color: var(--fg-2); font-size: 15.5px; margin: 0; }

/* ── PROGRAM TIERS ────────────────────────────────────── */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; align-items: start; }
@media (max-width: 980px) { .tiers { grid-template-columns: minmax(0,1fr); } }
.tier {
  background: var(--ink-2); border: 1px solid var(--hair); border-radius: 3px;
  padding: 40px 34px; display: flex; flex-direction: column; min-width: 0;
}
.tier.feature { border-color: var(--red); background: var(--ink-3); position: relative; }
.tier.feature::before {
  content: "Most chosen"; position: absolute; top: -11px; left: 34px;
  background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; padding: 5px 12px; border-radius: 2px;
}
.tier .kicker { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); }
.tier h3 { margin: 14px 0 6px; }
.tier .who { color: var(--fg-3); font-size: 14px; margin-bottom: 26px; }
.tier .price { font-family: var(--display); font-size: 42px; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.tier .price small { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--fg-3); letter-spacing: 0; display: block; margin-top: 9px; }
.tier .outcome {
  margin: 26px 0; padding: 18px 20px; background: rgba(225,27,34,.07);
  border-left: 2px solid var(--red); border-radius: 0 2px 2px 0;
  font-size: 14.5px; color: var(--fg); line-height: 1.5;
}
.tier .outcome b { color: var(--red); display: block; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 7px; font-weight: 700; }
.tier ul { list-style: none; padding: 0; margin: 0 0 30px; }
.tier li { position: relative; padding-left: 25px; margin-bottom: 13px; font-size: 15px; color: var(--fg-2); line-height: 1.5; }
.tier li::before { content: ""; position: absolute; left: 0; top: 9px; width: 11px; height: 2px; background: var(--red); }
.tier .btn { margin-top: auto; justify-content: center; }

/* ── SIGNATURE QUOTE ──────────────────────────────────── */
.quote { text-align: center; }
.quote blockquote {
  font-family: var(--display); font-size: clamp(26px, 3.4vw, 48px);
  font-weight: 800; font-style: italic; line-height: 1.06; letter-spacing: -.035em;
  text-transform: uppercase; margin: 0 auto; max-width: 19ch; color: var(--fg);
}
.quote .attrib { margin-top: 30px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); }
.quote img.sig { height: 74px; width: auto; margin: 34px auto 0; opacity: .95; }

/* ── STORY ────────────────────────────────────────────── */
.story { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(38px, 5vw, 78px); align-items: start; }
@media (max-width: 900px) { .story { grid-template-columns: minmax(0,1fr); } .story > * { min-width: 0; } }
.story-body p { color: var(--fg-2); font-size: 17.5px; }
.story-body p:first-of-type::first-letter {
  font-family: var(--display); font-size: 66px; float: left; line-height: .8;
  padding: 8px 14px 0 0; color: var(--red); font-weight: 800;
}
.story-body strong { color: var(--fg); font-weight: 600; }
.pull {
  border-left: 2px solid var(--red); padding: 6px 0 6px 26px; margin: 34px 0;
  font-family: var(--display); font-weight: 600; font-size: 22px; font-style: italic; line-height: 1.32; color: var(--fg);
}

/* ── TESTIMONIALS ─────────────────────────────────────── */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
@media (max-width: 900px) { .quotes { grid-template-columns: minmax(0,1fr); } }
.q { background: var(--ink-3); border: 1px solid var(--hair); border-radius: 3px; padding: 34px 30px; }
.q p { font-family: var(--display); font-weight: 500; font-size: 18px; font-style: italic; line-height: 1.42; color: var(--fg); margin-bottom: 22px; }
.q .who { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.q .who b { color: var(--red); display: block; margin-bottom: 4px; font-weight: 700; }

/* ── FAQ ──────────────────────────────────────────────── */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--hair); padding: 6px 0; }
.faq summary {
  cursor: pointer; list-style: none; padding: 24px 40px 24px 0; position: relative;
  font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 22px;
  font-family: var(--sans); font-size: 25px; font-weight: 300; color: var(--red); transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--fg-2); padding: 0 30px 22px 0; margin: 0; font-size: 16.5px; }

/* ── FORM ─────────────────────────────────────────────── */
.form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
.form .full { grid-column: 1 / -1; }
@media (max-width: 700px) { .form { grid-template-columns: minmax(0,1fr); } }
.field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 10px; }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0; background: var(--ink-3); border: 1px solid var(--hair);
  border-radius: 2px; padding: 15px 16px; color: var(--fg);
  font-family: var(--sans); font-size: 16px; transition: border-color .2s;
}
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red); }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-4); }

/* ── CTA BAND ─────────────────────────────────────────── */
.band { background: var(--red); color: #fff; text-align: center; }
.band h2 { color: #fff; margin-bottom: 20px; }
.band p { color: rgba(255,255,255,.9); max-width: 52ch; margin: 0 auto 34px; font-size: 18px; }
.band .btn { background: var(--ink); color: #fff; }
.band .btn:hover { background: #000; }

/* ── FOOTER ───────────────────────────────────────────── */
.foot { background: #060607; border-top: 1px solid var(--hair); padding: 74px 0 34px; }
.foot-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: 40px; padding-bottom: 46px; border-bottom: 1px solid var(--hair); }
@media (max-width: 760px) { .foot-top { grid-template-columns: minmax(0,1fr); gap: 32px; } }
.foot h4 { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 18px; }
.foot a { display: block; color: var(--fg-2); font-size: 15px; padding: 6px 0; transition: color .2s; }
.foot a:hover { color: var(--red); }
.foot-bottom { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-top: 26px; }

/* ── MOTION ───────────────────────────────────────────── */
/* Hidden-until-revealed ONLY when JS is confirmed alive. If the CDN is blocked
   or the script dies, none of these rules apply and the page reads normally. */
html.has-motion [data-rise] { opacity: 0; }
html.has-motion h1, html.has-motion h2 { visibility: hidden; }
html.has-motion h1.ready, html.has-motion h2.ready,
html.has-motion .split-ready { visibility: visible; }

/* SplitText writes each line into its own div; clipping the parent is what
   makes a line rise out of nothing instead of sliding over its neighbour. */
.split-ready { overflow: hidden; }
.split-ready .ln { display: block; overflow: hidden; padding-bottom: 0.06em; }

[data-rise].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.has-motion [data-rise],
  html.has-motion h1, html.has-motion h2 { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .btn:hover, .card:hover { transform: none; }
}

/* Nav condenses past the hero */
.nav { transition: background .3s var(--ease), box-shadow .3s var(--ease); }
.nav.tight { background: rgba(11,11,12,.92); box-shadow: 0 10px 34px rgba(0,0,0,.4); }
.nav.tight .nav-in { height: 66px; }
.nav-in { transition: height .3s var(--ease); }

a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--red); outline-offset: 3px;
}

/* ── Split section: copy beside a cutout portrait ─────── */
.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: end; margin-bottom: clamp(42px, 5vw, 68px); }
.split > div { min-width: 0; }
.split h2 { margin-bottom: 20px; }
.split p { color: var(--fg-2); font-size: 18px; }
.split-img {
  width: 100%; max-width: 420px; margin-left: auto; align-self: end;
  -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 84%, transparent 99%);
}
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0,1fr); align-items: start; }
  .split-img { display: none; }
}

/* Figures in long-form copy */
figure { margin: 0; }
figure img { width: 100%; }
figcaption { color: var(--fg-4); }

/* ── LIGHT SECTION ────────────────────────────────────
 * The signature mark is red line-art drawn for white. It disappears on the
 * dark page, so the site gets one genuinely white band where the mark can sit
 * at full size and read as a signature. It also breaks up the dark, which
 * makes the dark feel deliberate rather than relentless.
 */
.light { background: var(--paper); color: var(--ink); text-align: center; }
.light h2 { color: var(--ink); }
.light .eyebrow { color: var(--red); justify-content: center; }
.light p { color: #4A4844; }
.light .sig-mark { height: clamp(78px, 11vw, 132px); width: auto; margin: 0 auto 30px; }
.light .said { max-width: 24ch; margin: 0 auto; }
.light .fine { color: #6E6C68; }
.light .btn-red { background: var(--red); color: #fff; }
.light .btn-ghost { border-color: rgba(11,11,12,.24); color: var(--ink); }
.light .btn-ghost:hover { border-color: var(--ink); }

/* ── CREDIBILITY BAR ──────────────────────────────────
 * Pace Morby's strongest device: proof you exist outside your own website.
 */
.cred { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 30px 0; background: var(--ink-2); }
.cred-l {
  text-align: center; font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; color: var(--fg-4); margin-bottom: 22px;
}
.cred-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(26px, 4vw, 60px); }
.cred-row span {
  font-family: var(--display); font-weight: 800; font-size: clamp(15px, 1.7vw, 21px);
  letter-spacing: -.02em; text-transform: uppercase; color: var(--fg-3);
  transition: color .25s var(--ease); white-space: nowrap;
}
.cred-row span:hover { color: var(--fg); }

/* ── HERO TRUST LINE ──────────────────────────────────── */
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px; }
.hero-trust span {
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-4); display: inline-flex; align-items: center; gap: 9px;
}
.hero-trust span::before { content: ""; width: 5px; height: 5px; background: var(--red); border-radius: 50%; }
.hero-sub b { color: var(--fg); font-weight: 700; }

/* The credit line. It is the reason the hour is not a competitor to the
 * programme, so it has to be readable directly under the button rather than
 * filed away in small print further down the page. */
.hero-credit {
  margin: 16px 0 0; max-width: 44ch;
  font-size: 14.5px; line-height: 1.5; color: var(--fg-3);
  border-left: 2px solid var(--red); padding-left: 14px;
}

/* ── PROBLEM / PAIN GRID ──────────────────────────────
 * The research is blunt about this: a page that opens with the coach loses to
 * a page that opens with the reader's own frustration in their own words.
 */
.pains { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
@media (max-width: 760px) { .pains { grid-template-columns: minmax(0,1fr); } }
.pain { background: var(--ink); padding: 32px 30px; display: flex; gap: 20px; align-items: flex-start; }
.pain span {
  font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .06em;
  color: var(--red); flex: none; padding-top: 4px;
}
.pain p { margin: 0; color: var(--fg-2); font-size: 16.5px; line-height: 1.5; }

.truth {
  margin-top: 34px; padding: 36px 38px;
  background: var(--ink-3); border-left: 3px solid var(--red); border-radius: 0 3px 3px 0;
}
.truth p { margin: 0; font-size: 18.5px; line-height: 1.6; color: var(--fg-2); }
.truth b { color: var(--fg); font-weight: 600; }
@media (max-width: 640px) { .truth { padding: 28px 24px; } }

/* Result number on a testimonial — proof with a figure beats proof with adjectives */
.q-num {
  font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.03em;
  color: var(--red); margin-bottom: 16px; text-transform: uppercase;
}

/* ── PODCAST ──────────────────────────────────────────── */
.pod-head { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(34px, 5vw, 72px); align-items: center; }
.pod-head > * { min-width: 0; }
@media (max-width: 900px) { .pod-head { grid-template-columns: minmax(0,1fr); } }
.pod-frame { position: relative; padding-top: 56.25%; background: var(--ink-3); border: 1px solid var(--hair); border-radius: 3px; overflow: hidden; }
.pod-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pod-meta { display: flex; align-items: baseline; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.pod-meta span:last-child { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; }

.skeleton { background: linear-gradient(90deg, var(--ink-3) 25%, var(--ink-2) 50%, var(--ink-3) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

.vid-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
@media (max-width: 1100px) { .vid-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 900px) { .vid-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; } }
@media (max-width: 560px) { .vid-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; } }
.vid { display: flex; flex-direction: column; }
.vid.skeleton { height: 420px; border-radius: 3px; }
/* Shorts are 9:16. Rendering them in a 16:9 box is what produced the
   pillarboxed, blurred-edge look — the thumbnail was being cropped to a shape
   the video was never shot in. Vertical box, vertical video. */
.vid-thumb { position: relative; display: block; width: 100%; padding: 0; padding-top: 177.78%; border: 0; cursor: pointer; font: inherit; color: inherit; text-align: left; border-radius: 3px; overflow: hidden; background: var(--ink-3); }
.vid-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.vid:hover .vid-thumb img { transform: scale(1.05); }
.vid-play {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px;
  background: rgba(11,11,12,.62); border-radius: 50%; transition: background .25s var(--ease);
}
.vid-play::after { content: ""; position: absolute; left: 21px; top: 16px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #fff; }
.vid:hover .vid-play { background: var(--red); }
.vid-t { font-family: var(--display); font-weight: 700; font-size: 16.5px; line-height: 1.28; letter-spacing: -.015em; margin: 16px 0 7px; }
.vid:hover .vid-t { color: var(--red); }
.vid-d { font-size: 12px; color: var(--fg-4); letter-spacing: .04em; }

.short-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
@media (max-width: 900px) { .short-row { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.short img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.short span { display: block; font-size: 13.5px; color: var(--fg-2); margin-top: 10px; line-height: 1.35; }
.short:hover span { color: var(--fg); }

/* ═══════════════════════════════════════════════════════════
 * EDITORIAL LAYER
 * Lessons taken from our two sites that do NOT read as templated:
 * Jungle Root (numbered process sequence, hyper-specific detail) and
 * G Lending (asymmetric section heads, two-tone headlines, big scale).
 * The AI defaults being replaced: centered headers, three-card grids,
 * round numbers.
 * ═══════════════════════════════════════════════════════════ */

/* Asymmetric section head — headline left at scale, copy pushed right.
   A centered stack is the single most templated layout on the internet. */
.head-split {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 90px); align-items: end;
  margin-bottom: clamp(46px, 6vw, 80px);
}
.head-split > * { min-width: 0; }
.head-split h2 { font-size: clamp(34px, 5.4vw, 78px); }
.head-split .rail { padding-bottom: 8px; }
.head-split .rail p { color: var(--fg-2); font-size: 17.5px; margin: 0; }
@media (max-width: 860px) {
  .head-split { grid-template-columns: minmax(0,1fr); gap: 22px; align-items: start; }
}

/* Two-tone headline — the accent word carries the meaning */
h1 .hot, h2 .hot { color: var(--red); }

/* Numbered editorial sequence — replaces the three-card grid.
   Rows, not boxes: a rule, an index, a claim, and the detail. */
.seq { border-top: 1px solid var(--hair); }
.seq-row {
  display: grid; grid-template-columns: 88px 1.05fr 1.35fr;
  gap: clamp(16px, 3vw, 44px); align-items: start;
  padding: clamp(28px, 3.4vw, 44px) 0;
  border-bottom: 1px solid var(--hair);
  transition: background .4s var(--ease);
}
.seq-row:hover { background: rgba(246,244,240,.022); }
.seq-row > * { min-width: 0; }
.seq-n {
  font-family: var(--display); font-weight: 800; font-size: 13px;
  letter-spacing: .16em; color: var(--red); padding-top: 6px;
}
.seq-row h3 { font-size: clamp(21px, 2.4vw, 31px); letter-spacing: -.025em; }
.seq-row p { margin: 0; color: var(--fg-2); font-size: 16.5px; line-height: 1.55; }
@media (max-width: 860px) {
  .seq-row { grid-template-columns: 46px minmax(0,1fr); gap: 14px 18px; }
  .seq-row p { grid-column: 2; }
}

/* A single hard fact, stated like evidence rather than decoration */
.fact {
  display: grid; grid-template-columns: auto 1fr; gap: 0 22px;
  align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--hair);
}
.fact-k {
  font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3.2vw, 44px);
  letter-spacing: -.035em; color: var(--fg); white-space: nowrap;
}
.fact-v { font-size: 16px; color: var(--fg-2); }
.fact-v b { color: var(--fg); font-weight: 600; }
@media (max-width: 640px) { .fact { grid-template-columns: minmax(0,1fr); gap: 8px; } }

/* ── /learn articles ──────────────────────────────────────────────────────
   Long-form reading needs a wider line height and real spacing between ideas
   than the marketing pages do. Assistants also parse headed sections more
   reliably than walls of text, so the h2 rhythm is functional, not decorative. */
.article { font-size: 17px; line-height: 1.72; color: var(--fg-2); }
.article h2 {
  font-family: Archivo, sans-serif; font-weight: 800; letter-spacing: -.01em;
  text-transform: none; font-size: clamp(24px, 2.4vw, 32px);
  color: var(--fg); margin: 46px 0 16px; line-height: 1.15;
}
.article h2:first-child { margin-top: 0; }
.article p { margin-bottom: 18px; max-width: 68ch; }
.article b { color: var(--fg); font-weight: 700; }
.article em { color: var(--fg); }
.article ul { margin: 0 0 22px; padding-left: 0; list-style: none; max-width: 68ch; }
.article li {
  position: relative; padding-left: 22px; margin-bottom: 11px;
}
.article li::before {
  content: ""; position: absolute; left: 2px; top: 11px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--red);
}

/* ── Hero background as <picture> ────────────────────────────────────────────
   The decorative skyline is now AVIF/WebP with a srcset, which means the <img>
   is wrapped in a <picture>. <picture> is inline by default, so without this it
   collapses and the object-fit rules below it never get a box to fill. */
.hero-bg picture { display: block; width: 100%; height: 100%; }

/* ── Buy button inside a homepage tier row ───────────────────────────────────
   Foundation is the only tier you can purchase outright. It lived two clicks
   deep on /coaching, so most people never saw that buying was an option at all. */
.seq-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 20px; }
/* Terms and the credit offer. Sits under the buttons rather than in a footnote:
 * both lines change what the buyer is agreeing to, so they belong where the
 * decision is made. */
.seq-note {
  display: block; margin-top: 14px; max-width: 62ch;
  font-size: 13.5px; line-height: 1.5; color: var(--fg-4);
}
.seq-alt {
  font-family: var(--display); font-weight: 700; font-size: 12px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--fg-3);
  border-bottom: 1px solid var(--hair-2); padding-bottom: 2px; transition: color .25s var(--ease);
}
.seq-alt:hover { color: var(--fg); }

/* ── Optional follow-up block on /apply ──────────────────────────────────────
   Sits below the confirmation. Deliberately quieter than the main form so it
   reads as a bonus rather than another gate. */
.followup {
  max-width: 60ch; margin: 44px auto 0; padding: 30px clamp(20px, 4vw, 34px);
  border: 1px solid var(--hair); border-radius: 4px; background: var(--ink-2);
}
.followup h3 { font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -.02em; }

/* ── Sticky mobile CTA ───────────────────────────────────────────────────────
   Phones scroll a long way past the only CTA on the site and never meet another
   one. Injected by site.js on small screens, and it hides itself whenever a real
   CTA is already on screen so it never sits on top of the thing it duplicates. */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(11, 11, 12, .93);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-top: 1px solid var(--hair);
  transform: translateY(110%); transition: transform .3s var(--ease);
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .sticky-l {
  flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.3; color: var(--fg-3);
}
.sticky-cta .sticky-l b { display: block; color: var(--fg); font-size: 13.5px; }
.sticky-cta .btn { flex: 0 0 auto; padding: 14px 20px; font-size: 12px; }
@media (max-width: 760px) { .sticky-cta { display: flex; } }
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }
/* Keep the last section clear of the bar so nothing is permanently covered. */
@media (max-width: 760px) { body.has-sticky-cta .foot { padding-bottom: 96px; } }

/* ── Stress-test table on /calculator ────────────────────────────────────────
   The whole argument of the free sheet is this block: a deal that looks fine on
   plan and goes negative on an ordinary miss. So it is typeset as evidence — a
   real table with real numbers — rather than as a marketing panel. */
.stress {
  border: 1px solid var(--hair); border-radius: 4px;
  background: var(--ink-2); overflow: hidden;
}
.stress-head { padding: 26px clamp(20px, 3vw, 32px); border-bottom: 1px solid var(--hair); }
.stress-head b { display: block; font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -.015em; }
.stress-head .fine { display: block; margin-top: 7px; color: var(--fg-3); }
.stress-t { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.stress-t th {
  text-align: left; font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3);
  padding: 14px clamp(20px, 3vw, 32px); border-bottom: 1px solid var(--hair);
}
.stress-t th:last-child, .stress-t td:last-child { text-align: right; }
.stress-t td {
  padding: 15px clamp(20px, 3vw, 32px); border-bottom: 1px solid var(--hair); color: var(--fg-2);
}
.stress-t tbody tr:last-child td { border-bottom: 0; }
.stress-t td:last-child {
  font-family: var(--display); font-weight: 800; font-size: 17px;
  letter-spacing: -.02em; white-space: nowrap;
}
.stress-t .ok   { color: var(--fg); }
.stress-t .warn { color: #E8A33D; }
.stress-t .bad  { color: var(--red); }
/* The row that is the entire point of the page. */
.stress-t tr.kill td { background: rgba(225,27,34,.07); color: var(--fg); }
.stress-t tr.kill em { font-style: normal; color: var(--red); font-weight: 700; }
.stress-note {
  margin: 0; padding: 22px clamp(20px, 3vw, 32px) 26px;
  border-top: 1px solid var(--hair); color: var(--fg-2);
  font-size: 15.5px; line-height: 1.6;
}
@media (max-width: 560px) {
  .stress-t { font-size: 14.5px; }
  .stress-t td:last-child { font-size: 15.5px; }
}

/* ── Free-sheet block (homepage + end of every /learn article) ───────────────
   The articles used to dead-end into a coaching application, which asked a
   stranger who arrived from a search to jump straight to a $3,000 decision.
   This is the step in between. */
.magnet {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 56px);
  align-items: center; padding: clamp(30px, 4vw, 52px);
  border: 1px solid var(--hair-2); border-radius: 4px; background: var(--ink-2);
  position: relative; overflow: hidden;
}
.magnet::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red);
}
.magnet h3 {
  font-size: clamp(24px, 3vw, 38px); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 16px;
}
.magnet p { color: var(--fg-2); margin: 0 0 8px; font-size: 16.5px; line-height: 1.58; }
.magnet .fine { color: var(--fg-3); }
.magnet-cta { display: flex; flex-direction: column; gap: 12px; }
.magnet-cta .btn { justify-content: center; }
@media (max-width: 820px) {
  .magnet { grid-template-columns: 1fr; gap: 26px; }
}