/* /free. One shape, five times, straight down the page.
   Lifted from BIF_SITE_FINALS/06_Source/genfree.py. */

.free h1{font-size:3.4rem;max-width:14ch}
.free .big{margin-top:18px;max-width:46ch}
.lead{display:grid;grid-template-columns:1fr 340px;gap:60px;align-items:center;margin-top:16px}

.cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}
.note{font-size:.88rem;color:#8C8880}

/* the ebook cover, on its ink card */
.coverwrap{display:flex;justify-content:center}
.coverink{background:var(--ink);padding:22px;display:inline-block}
.coverink img{width:268px;height:auto;display:block}

.taster{padding-top:44px}
.taster h2{margin-top:14px;max-width:24ch}
.taster .big{margin-top:16px;max-width:70ch}

/* the four ways, as a rail */
.ways{display:grid;grid-template-columns:repeat(4,1fr);margin-top:30px;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.ways > *{padding:18px 24px 18px 0;border-right:1px solid var(--hair)}
.ways > *:last-child{border-right:0;padding-right:0}
.ways > *:not(:first-child){padding-left:24px}
/* Each of the four jumps to its row below (Matt, 1 October 2026). */
.ways a{display:block;color:inherit;text-decoration:none}
.ways a b{display:inline-block;border-bottom:2px solid transparent}
.ways a:hover b,.ways a:focus-visible b{border-bottom-color:var(--yellow)}
.item{scroll-margin-top:24px}
.ways b{display:block;font-size:1.24rem;font-weight:800;letter-spacing:-.4px}
.ways span{display:block;font-size:.93rem;color:var(--muted);line-height:1.45;margin-top:5px}

/* the five rows. Same shape every time, no special cases */
.item{display:grid;grid-template-columns:1fr 440px;gap:60px;align-items:center;
  padding:46px 0;border-top:1px solid var(--hair)}
.item:first-child{border-top:0}
.item .num{font-size:1.02rem;font-weight:800;color:#C6C0B4;letter-spacing:-.2px}
.item .num .n{color:#C6C0B4}
.item h2{margin-top:12px}
.item .sub{font-size:1.16rem;font-weight:500;color:var(--ink);line-height:1.5;margin-top:11px;
  max-width:44ch}

/* the film, in a 16:9 box, playing here and not on somebody else's page */
.film{position:relative;width:100%;aspect-ratio:16/9;background:var(--ink)}
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* the audio, at the widget's own height */
.audioplayer{width:100%;height:166px;background:#EFEBE2}
.audioplayer iframe{width:100%;height:166px;border:0;display:block}

/* a landscape document on its card. The printed Introduction and Before We
   Start are both 1.41, so they take the same treatment. */
.doc{background:#EFEBE2;padding:18px}
/* the score sheet is portrait, so it sits centred on its panel rather than
   filling it, which is what the approved render draws for row 04 */
.doc.portrait{display:flex;justify-content:center;padding:14px}
.doc.portrait .docink{width:230px}
.docink{background:var(--ink);padding:12px}
.docink img{width:100%;height:auto;display:block;
  background:#2A2C2E}

@media (max-width:900px){
  .free h1{font-size:2.4rem;max-width:none}
  .lead{grid-template-columns:1fr;gap:34px}
  .coverwrap{justify-content:flex-start}
  .ways{grid-template-columns:1fr 1fr}
  .ways > *:nth-child(2n){border-right:0;padding-right:0}
  .ways > *:nth-child(2n+1){padding-left:0}
  .ways > *:nth-child(-n+2){border-bottom:1px solid var(--hair)}
  .item{grid-template-columns:1fr;gap:28px}
  .item .sub{max-width:none}
}
@media (max-width:680px){
  .free h1{font-size:2rem}
  .ways{grid-template-columns:1fr}
  .ways > *{border-right:0;padding:16px 0;border-bottom:1px solid var(--hair)}
  .ways > *:last-child{border-bottom:0}
  .coverink img{width:200px}
}

/* The FREE Masterclass sign-up (Matt, 1 October 2026). The email box is the
   same one Home uses. */
.free .chapters{margin-top:12px;max-width:52ch;color:var(--muted);line-height:1.5}
.free .capture{margin-top:26px;border-top:1px solid var(--hair);padding-top:20px}
.capturerow{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.capturerow input{flex:1 1 240px;min-width:0;border:1.5px solid var(--ink);background:#fff;
  padding:12px 14px;font-size:1rem;border-radius:2px}
.capturerow input::placeholder{color:#A8A399}
.capturerow .btn{border:0;cursor:pointer}
.processor{font-size:.88rem;margin-top:10px}
#unlockmsg{color:var(--ink);font-weight:700}
.intro-pointer{margin:26px 0 8px;max-width:70ch}
.intro-pointer a{border-bottom:2px solid var(--yellow)}
.free.sect .taster{padding-top:0}
.taster h1{margin-top:14px;max-width:24ch}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* The sign-up's picture is landscape, so its column is wider than the cover's
   (Matt, 1 October 2026). */
.lead.wide{grid-template-columns:1fr 440px;align-items:start}
@media (max-width:1100px){.lead.wide{grid-template-columns:1fr 400px}}
@media (max-width:900px){.lead.wide{grid-template-columns:1fr}}
/* The three title cards, in play order, each on an ink frame with a soft
   shadow to lift it off the page (Matt, 1 October 2026). */
.stack{display:flex;flex-direction:column;gap:18px}
.stack img{width:100%;height:auto;aspect-ratio:2000/847;object-fit:cover;display:block;
  border:7px solid var(--ink);box-sizing:border-box;
  box-shadow:0 10px 24px rgba(16,17,18,.22),0 2px 6px rgba(16,17,18,.18)}
@media (max-width:900px){.stack{max-width:480px}}

/* Matt, 1 October 2026: from the four ways straight on to the full program, The Program page. */
.fullprog{margin-top:28px}