/* Courses page — the lesson plan. A sticky script index on the left,
   full course entries on the right. */

.ph{ padding:clamp(48px,7vh,84px) 0 clamp(36px,5vh,56px); }
.ph .display{ font-size:clamp(2.6rem,6vw,5rem); margin-bottom:1.5rem; }

.ledger{
  display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--ink-line);
  border-bottom:1px solid var(--ink-line); margin-top:clamp(28px,4vh,44px);
}
/* a grid, not wrapped flex: wrapping left a divider dangling beside empty
   space whenever the row broke 3 + 1 */
.ledger div{ padding:18px 24px 18px 0; border-right:1px solid var(--ink-line); }
.ledger div:last-child{ border-right:0; padding-right:0; }
.ledger b{ display:block; font-family:var(--mono); font-size:1.35rem; line-height:1.2; font-weight:700; }
.ledger span{ font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.15em;
  text-transform:uppercase; color:var(--paper-3); }

/* ---------------------------------------------------------- plan layout */
.plan{ display:grid; grid-template-columns:266px 1fr; gap:clamp(36px,6vw,88px); align-items:start; }

.index{ position:sticky; top:104px; }
.index h4{
  font-family:var(--mono); font-size:var(--t-sm); letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper-3); margin:0 0 1.2rem; padding-bottom:1rem; border-bottom:1px solid var(--ink-line);
}
.index ol{ list-style:none; margin:0; padding:0; counter-reset:sc; }
.index li{ counter-increment:sc; }
.index a{
  display:grid; grid-template-columns:30px 1fr; gap:10px; align-items:baseline;
  padding:11px 0; font-size:.94rem; color:var(--paper-3);
  border-bottom:1px solid var(--ink-line-2); transition:color .2s;
}
.index a::before{
  content:"0" counter(sc); font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.1em;
}
.index a:hover, .index a.on{ color:var(--brass); }
/* ::before, the title and .k are three items in a two-track grid, so .k
   wrapped onto row 2 *in the 30px numeral column* and clipped every price.
   Put it back under the title. */
.index .k{
  grid-column:2; display:block; font-family:var(--mono); font-size:var(--t-xs);
  letter-spacing:.12em; text-transform:uppercase; color:var(--paper-3); margin-top:3px;
}
.index a:hover .k{ color:var(--paper-3); }

/* ----------------------------------------------------------- entries */
.entry{ padding:clamp(40px,6vh,72px) 0; border-bottom:1px solid var(--ink-line); scroll-margin-top:104px; }
.entry:first-child{ padding-top:0; }
.entry-top{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:1.4rem; }
.entry .sc{
  font-family:var(--mono); font-size:var(--t-sm); letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass);
}
.entry h2{ font-family:var(--mono); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.35rem,2.4vw,1.85rem); line-height:1.2;
  letter-spacing:.01em; margin:0 0 1rem; }
.entry .desc{ font-size:var(--t-base); color:var(--paper-2); max-width:56ch; margin:0 0 1.8rem; }

.inc{ list-style:none; margin:0 0 1.9rem; padding:0; display:grid; gap:0;
  border-top:1px solid var(--ink-line-2); max-width:56ch; }
.inc li{
  display:flex; gap:14px; align-items:baseline; padding:11px 0;
  border-bottom:1px solid var(--ink-line-2); font-size:var(--t-base); color:var(--paper-2);
}
.inc li::before{
  content:"+"; font-family:var(--mono); color:var(--brass); flex:none; font-size:.85rem;
}

.buy{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.buy .amt{ font-family:var(--mono); font-weight:700; font-size:1.05rem; letter-spacing:.04em; color:var(--paper); }
.buy .amt.free{ color:var(--paper-2); text-transform:uppercase; letter-spacing:.2em; font-size:var(--t-sm); }

/* the flagship gets weight */
.entry.flag{
  background:linear-gradient(160deg, var(--ink-2), transparent 70%);
  border:1px solid var(--ink-line); border-radius:var(--r);
  padding:clamp(28px,4vw,52px); margin:clamp(28px,4vh,44px) 0;
}
.entry.flag .ribbon{
  font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass); border:1px solid var(--brass-dim); background:var(--brass-dim);
  padding:5px 10px; border-radius:var(--r);
}

@media (max-width:980px){
  .plan{ grid-template-columns:1fr; gap:34px; }
  .index{ position:static; }
  .index ol{ display:grid; grid-template-columns:1fr 1fr; gap:0 22px; }
}
@media (max-width:560px){
  .index ol{ grid-template-columns:1fr; }
  .ledger{ grid-template-columns:1fr 1fr; }
  .ledger div{ padding:14px 18px 14px 0; }
  .ledger div:nth-child(2){ border-right:0 }
  .ledger div:nth-child(-n+2){ border-bottom:1px solid var(--ink-line) }
  .ledger b{ font-size:1.3rem; }
}


/* ---------------------------------------------------- evidence band */
/* the catalogue shipped 4,949px with no image, no sample, nothing to look
   at. The script pages were stranded on the home page. */
.band{
  border-top:1px solid var(--ink-line); border-bottom:1px solid var(--ink-line);
  padding:clamp(32px,5vh,54px) 0; margin-bottom:clamp(20px,3vh,36px);
}
.band-top{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between;
  align-items:baseline; margin-bottom:clamp(20px,3vh,32px); }
.band-top p{ margin:0; max-width:46ch; color:var(--paper-2); font-size:var(--t-base); }

/* ------------------------------------------------ flagship hierarchy */
/* it was 648px against 465px for a free one-video course: 1.4x the size
   for 5-10x the price, same heading, same button. */
.entry.flag h2{ font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:1.2rem; }
.entry.flag .desc{ font-size:1.08rem; max-width:60ch; }
.entry.flag .buy .btn{ padding:18px 32px; font-size:.85rem; }
.entry.flag .buy .amt{ font-size:1.3rem; }

.deal{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--ink-line); border:1px solid var(--ink-line);
  margin:1.9rem 0; border-radius:var(--r); overflow:hidden;
}
.deal div{ background:var(--ink); padding:20px 22px; }
.deal dt{
  font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.17em;
  text-transform:uppercase; color:var(--brass); margin-bottom:9px;
}
.deal dd{ margin:0; font-size:.97rem; color:var(--paper-2); line-height:1.55; }
@media (max-width:720px){ .deal{ grid-template-columns:1fr; } }


/* -------------------------------------------------- who is teaching */
/* the page that asks for money never named him. The proof was one file
   away: everything here is lifted verbatim from the home page. */
.entry.flag{ border-color:rgba(200,161,74,.28); background:rgba(200,161,74,.04); }
.flag-grid{ display:grid; grid-template-columns:1fr 236px; gap:clamp(24px,3.5vw,48px); align-items:start; }
.who{
  border:1px solid var(--ink-line); border-radius:var(--r); overflow:hidden;
  background:var(--ink);
}
.who-img{ aspect-ratio:1; overflow:hidden; background:var(--ink-2); }
.who-img img{ width:100%; height:100%; object-fit:cover; object-position:52% 26%;
  filter:contrast(1.1) saturate(.72) brightness(.9); }
.who-b{ padding:16px 18px 18px; }
.who-b b{ display:block; font-family:var(--mono); font-weight:700; font-size:var(--t-sm);
  letter-spacing:.14em; text-transform:uppercase; color:var(--paper); }
.who-b i{ display:block; font-style:normal; font-family:var(--mono); font-size:var(--t-xs);
  letter-spacing:.16em; text-transform:uppercase; color:var(--brass); margin:4px 0 11px; }
.who-b p{ margin:0; font-size:.92rem; line-height:1.55; color:var(--paper-2); }

/* ---------------------------------------------- the free follow-ons */
/* 04, 05 and 06 were three 492px blocks of identical markup: 1,475px of
   the same shape, landing right after the decision point. */
.after{ padding:clamp(34px,5vh,58px) 0 0; }
.after-top{ margin-bottom:clamp(20px,3vh,30px); }
.after-top p{ margin:.6rem 0 0; color:var(--paper-2); max-width:54ch; }
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--ink-line); border:1px solid var(--ink-line); border-radius:var(--r); overflow:hidden; }
.trio article{ background:var(--ink); padding:22px 20px 24px; display:flex; flex-direction:column; }
.trio .sc{ font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.18em;
  text-transform:uppercase; color:var(--brass); }
.trio h3{ font-family:var(--mono); font-weight:700; text-transform:uppercase;
  font-size:1.02rem; line-height:1.3; letter-spacing:.01em; margin:.9rem 0 .7rem; }
.trio p{ font-size:.94rem; color:var(--paper-2); line-height:1.55; margin:0 0 1.3rem; }
.trio .foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.trio .amt{ font-family:var(--mono); font-size:var(--t-sm); letter-spacing:.2em;
  text-transform:uppercase; color:var(--paper-2); }
.trio a{ font-family:var(--mono); font-size:var(--t-sm); color:var(--paper);
  display:inline-flex; align-items:center; min-height:44px; padding:11px 0;
  border-bottom:1px solid var(--ink-line); }
.trio a:hover{ color:var(--brass); border-color:var(--brass); }

@media (max-width:980px){ .flag-grid{ grid-template-columns:1fr; } .who{ max-width:300px; } }
@media (max-width:720px){ .trio{ grid-template-columns:1fr; } }


/* ------------------------------------------- evidence beside the course */
/* All three artefacts sat in one band attached to the FREE course, so the
   $99 decision had nothing to look at and the catalogue started 1.7
   screens down. Each priced entry now carries its own. */
.entry-grid{ display:grid; grid-template-columns:1fr 300px; gap:clamp(22px,3vw,44px); align-items:start; }
.entry-fig{ margin:0; }
.entry-fig .sheet{
  position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--paper);
  border-radius:var(--r); box-shadow:0 22px 50px -28px rgba(0,0,0,.95);
}
.entry-fig .sheet img{ width:100%; height:100%; object-fit:cover; object-position:50% 0; }
.entry-fig figcaption{
  font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.13em;
  text-transform:uppercase; color:var(--paper-3); margin-top:12px; line-height:1.6;
}
.flag-fig{ margin:1.8rem 0 0; }
.flag-fig .sheet{
  aspect-ratio:16/9; overflow:hidden; background:var(--paper); border-radius:var(--r);
}
.flag-fig .sheet img{ width:100%; height:100%; object-fit:cover; object-position:50% 12%; }
.flag-fig figcaption{
  font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.13em;
  text-transform:uppercase; color:var(--paper-3); margin-top:11px;
}

/* the price, with the hole shaped like the answer */
.tier{ border:1px solid var(--ink-line); border-radius:var(--r); margin:1.6rem 0; overflow:hidden; }
.tier .row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:14px; padding:18px 22px; }
.tier .row b{ font-family:var(--mono); font-weight:700; font-size:1.25rem; color:var(--paper); }
.tier .row span{ font-family:var(--mono); font-size:var(--t-sm); letter-spacing:.14em;
  text-transform:uppercase; color:var(--paper-3); }
.tier .well{
  border-top:1px dashed rgba(200,161,74,.38); background:rgba(200,161,74,.04);
  padding:16px 22px; display:flex; flex-wrap:wrap; gap:12px; align-items:center;
}
.tier .well p{ margin:0; font-family:var(--mono); font-size:var(--t-sm); color:var(--paper-3); }

@media (max-width:860px){ .entry-grid{ grid-template-columns:1fr; } .entry-fig{ max-width:300px; } }