/* ============================================================================
   SALES UNIVERSITY — index.css
   LAYOUT COMPOSITION ONLY. Every size is a token from base.css :root.
   The only raw px allowed here is the 1px hairline, and that is var(--rule).
============================================================================ */

/* ------------------------------------------------------------------ hero --
   H1 runs the full wrap at --t-6 (the display token, unclipped). Below it the
   lede + CTA sit in a narrow left column and the VSL takes the wide one, so
   type and video each get their own moment instead of halving each other.   */
.hero{position:relative;overflow:hidden;padding-block:var(--s-7) var(--s-8)}

.hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  column-gap:var(--s-7);
  row-gap:var(--s-6);
}
.hero__eyebrow{grid-column:1 / -1;align-self:start}
.hero__title{grid-column:1 / -1;max-width:16ch}   /* size comes from .t-display */
.hero__end{white-space:nowrap}
.hero__video{grid-column:2;align-self:start}
.hero__aside{
  grid-column:1;align-self:start;
  display:grid;gap:var(--s-4);justify-items:start;
}
.hero__actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-1)}
.hero__proof .caption{text-wrap:balance;max-width:15ch}   /* two tidy lines beside the button */
/* the proof shares a row with the CTA, and this aside column is the narrow 1fr
   of the hero grid — at full s-6 the faces push the row past the column and it
   wraps. One size down on wide screens buys the ~70px back; below 768px the
   row wraps under the button anyway and the faces keep their mobile size. */
@media (min-width:769px){
  .hero__proof .avatars img{width:var(--s-5);height:var(--s-5)}
}

/* -------------------------------------------------------- placement proof */
.place__hint{display:block;color:var(--ink-3);margin-top:calc(var(--s-5) * -1)}

/* the money figure is a .nowrap unit and must never split after "CHF", so the
   headline needs room it doesn't have in the two-column head between 768 and
   ~1000px: stack this section's head a breakpoint early. Below the 390px token
   floor the fluid type stops shrinking, so cap the size against the viewport —
   8.4vw clears the phrase (9.53em wide) inside the gutters down to 280px and
   stops mattering above ~380px where the t-4 floor takes over. */
.place .sec__head h2{font-size:min(var(--t-4),8.4vw)}
/* same floor problem one section down: "billionaires." is 6.02em and clips a
   sub-340px screen at the t-5 floor. 13vw stops mattering above ~338px. */
.sec__head--stack h2{font-size:min(var(--t-5),13vw)}
@media (max-width:1024px){
  .place .sec__head{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:var(--s-3)}
  .place .sec__head .eyebrow,.place .sec__head h2,.place .sec__head .lede{grid-column:1;grid-row:auto;padding-bottom:0}
  .place .sec__head .eyebrow{margin-bottom:0}
}


/* the case cards and the scroll-dealt deck they sit in are shared with
   fundamentals — base.css .deck / .case, motion.js §6 */


/* ---------------------------------------------------------- who it's for --
   Two columns split by a hairline instead of two cards.                    */
.duo{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--grid-gap);
}
.duo__col{display:grid;gap:var(--s-5);align-content:start}
.duo__col + .duo__col{
  padding-left:var(--grid-gap);
  border-left:var(--rule) solid var(--line);
}

/* ------------------------------------------------------------ curriculum --
   Lives inside the dark "the skill" section: the three stages as one glanceable
   row under the head. Every colour is a token, so the .sec--panel remap in
   base.css inverts the block with no overrides here.                         */
.stages{
  list-style:none;margin:var(--s-6) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);
}
.stage{
  display:grid;gap:var(--s-3);align-content:start;
  padding-top:var(--s-4);border-top:var(--rule) solid var(--line);
}
.stage__i{font-size:var(--t--2);letter-spacing:var(--track-caps);color:var(--ink-3)}
.stage__title{font-size:var(--t-2)}
.stage__line{color:var(--ink-2);max-width:var(--measure-body)}

/* ---------------------------------------------------------- instructor --- */
.split{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--s-7);align-items:start;
}
/* the bio runs 25 short lines, so the photo can no longer fill the prose height:
   stretched it rendered 470x1561 (ratio .30 against a 4:5 original). It keeps its
   own ratio and rides down with the text instead. */
.split__media{
  display:grid;gap:var(--s-3);align-content:start;
  position:sticky;top:calc(var(--nav-h) + var(--s-5));
}
.split__photo{
  width:100%;height:auto;aspect-ratio:4/5;
  object-fit:cover;object-position:center;
  border-radius:var(--r-2);border:var(--rule) solid var(--line);
}
.split__body{display:grid;gap:var(--s-4);align-content:start}
/* stanza-style bio: one line per paragraph, so the default --flow rhythm reads
   as gaps between blocks rather than a paragraph. */
.split__body .prose{gap:var(--s-3)}

/* --------------------------------------------------------------- apply --- */
/* heading-beside-content sections (apply, faq) — candidate for base */
.side{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  column-gap:var(--s-7);row-gap:var(--s-5);align-items:start;
}
.side__head{display:grid;gap:var(--s-4);justify-items:start}
.side__head h2{max-width:var(--measure-h2)}
.apply__form{background:var(--surface);border:var(--rule) solid var(--line);border-radius:var(--r-2);overflow:hidden}
.apply__form iframe{display:block;width:100%;height:var(--ph-form-h);border:0}

/* ----------------------------------------------------------------- faq --- */
.faq--index{width:100%}

/* -------------------------------------------------------------- footer --- */
.footer__brand{display:grid;gap:var(--s-3);align-content:start}
.footer__quiet a{text-decoration:underline;text-underline-offset:.25em}

/* ============================================================ responsive == */
@media (max-width:1024px){
  .hero__inner{column-gap:var(--s-6)}
  .split{gap:var(--s-6)}
}

@media (max-width:768px){
  .hero{padding-block:var(--s-7) 0}
  .hero{padding-block:var(--s-7) var(--s-7)}
  .hero__inner{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:var(--s-5)}
  .hero__eyebrow,.hero__title,.hero__video,.hero__aside{grid-column:1;grid-row:auto}
  .hero__title{font-size:var(--t-5);max-width:none}   /* --t-6 is too tall at 390 */


  .duo{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
  .duo__col + .duo__col{
    padding-left:0;padding-top:var(--s-6);
    border-left:0;border-top:var(--rule) solid var(--line);
  }

  .stages{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}

  .split{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
  .split__media{width:min(var(--wrap-narrow),100%);position:static}

  .side{grid-template-columns:minmax(0,1fr)}
}

/* ------------------------------------------------------------ hero proof */
.proof{display:flex;align-items:center;gap:var(--s-3)}
.avatars{display:flex;flex:none}
.avatars img{width:var(--s-6);height:var(--s-6);border-radius:50%;object-fit:cover;flex:none;margin-left:calc(var(--s-2) * -1);border:var(--rule) solid var(--paper);background:var(--paper-2)}
.avatars img:first-child{margin-left:0}
.proof .caption{color:var(--ink-3)}