/* =============================================================
 * 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%);
}
/* 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%);
}
@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%; }
}

/* ── 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; }

/* ── 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; }
.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; }
}