/* Home. The long scroll, eleven beats.
   Lifted from BIF_SITE_FINALS/06_Source/genscroll.py, which drew it as eleven
   fixed 900px slides. Here it is one page, so the slides become sections. */

.hero h1{max-width:none;text-wrap:balance}
.lede{font-size:1.32rem;font-weight:700;color:var(--ink);max-width:70ch;margin-top:22px}

/* the score block, and the shape beside it */
.scoreblk{display:grid;grid-template-columns:1fr 410px;gap:56px;align-items:start}
.shape{margin-top:-16px}
.shapehd{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.score{display:flex;align-items:baseline;gap:8px}
.score b{font-size:2.1rem;font-weight:800;letter-spacing:-1.4px;line-height:1;
  font-variant-numeric:tabular-nums}
.score span{font-size:.9rem;color:var(--muted)}
.shape svg{margin-top:4px}

.logowall{width:100%;height:auto}

/* the argument, and the one highlighted claim */
.two2{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:32px}
.rows .row{padding:14px 0;border-top:1px solid var(--hair)}
.hl{background:var(--yellow);padding:2px 8px;box-decoration-break:clone;
  -webkit-box-decoration-break:clone}
.claim{margin-top:32px;font-size:1.62rem;font-weight:800;letter-spacing:-.6px;line-height:1.9;
  color:var(--ink);max-width:none}

/* the ten, with the arc rail down the right */
.grid{display:grid;grid-template-columns:56px 1fr 5px 236px;grid-auto-rows:42px;
  align-items:center;margin-top:20px}
.wk{grid-column:1;font-size:1.28rem;font-weight:800}
.bh{grid-column:2;border-top:1px dotted #CBC5B8;height:100%;display:flex;align-items:center;
  gap:16px;padding-right:26px}
.bh b{font-size:1.06rem;font-weight:800;min-width:132px}
.bh span{font-size:.94rem;color:var(--muted)}
.bh:hover b{border-bottom:2px solid var(--yellow)}
.rail{grid-column:3;background:var(--yellow);width:5px;height:calc(100% - 15px);
  justify-self:center;align-self:center}
.cap{grid-column:4;padding-left:22px;align-self:center}
.cap b{font-size:.98rem;font-weight:800;display:block}
.cap span{font-size:.9rem;color:var(--muted);display:block;margin-top:2px;line-height:1.4}
.gridfoot{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-top:18px}

/* the ladder. Prices on the page, because six of seven adjacent operators hide them */
.ladder{font-size:2.5rem;line-height:1.1}
.pricelist{margin-top:36px}
.prow{display:grid;grid-template-columns:1fr 150px;gap:24px;padding:14px 0;
  border-top:1px solid var(--hair);align-items:baseline}
.prow h3{font-size:1.22rem;font-weight:700}
.prow p{margin-top:4px;font-size:.97rem}
.prow .pr{font-size:1.05rem;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.prow.hero{background:var(--yellow);padding:14px;margin:0 -14px;border-top:0}
.prow.hero p{color:#3A3B3C}
.prow:hover h3{border-bottom:2px solid var(--yellow)}
.prow.hero:hover h3{border-bottom-color:var(--ink)}
.chip{display:inline-block;background:var(--ink);color:var(--yellow);font-size:9.5px;
  font-weight:800;letter-spacing:1.8px;text-transform:uppercase;padding:4px 9px;border-radius:2px}

/* what changes. Ten concrete lines, no adjectives */
.chg{display:grid;grid-template-columns:1fr 1fr;gap:0 54px;margin-top:30px}
.chg div{padding:13px 0;border-top:1px solid var(--hair);font-size:1rem;line-height:1.45;
  color:var(--ink)}

/* the four ways in */
.four{display:grid;grid-template-columns:repeat(4,1fr);margin-top:30px}
.four > div,.four > a{padding:22px 26px;border-left:1px solid var(--hair);display:block}
.four > :first-child{border-left:0;padding-left:0}
.four a.way:hover h3{border-bottom:2px solid var(--yellow)}
.four a.way:hover .media{border-color:var(--ink)}
.media{border:1px solid var(--hair);background:#FFFDF9;height:132px;display:flex;
  align-items:center;justify-content:center;margin-bottom:14px}
.four h3{margin-top:6px;font-size:1.14rem}
.lnk{font-size:.94rem;font-weight:600;color:var(--ink);margin-top:8px;line-height:1.4;display:block}
.dur{font-size:.85rem;color:var(--muted);margin-top:5px;display:block}
.dur.cta{color:var(--ink);font-weight:800;border-bottom:2px solid var(--yellow);
  display:inline-block;padding-bottom:1px;margin-top:9px}

/* the email capture. One address, five things, and it never gates a score */
.capture{margin-top:30px;border-top:1px solid var(--hair);padding-top:22px}
.capturerow{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.capturerow input{flex:1 1 260px;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}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* teams. Yellow does its second of three jobs here */
.teamblk{background:var(--yellow);padding:44px 48px;margin-top:26px}
.teamblk p{color:#2E2F30;max-width:74ch}
.teamgrid{display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:center}
.teamgrid img{width:340px;height:auto;border-radius:10px}
.teamline{margin-top:20px;font-size:1.32rem;font-weight:800;color:var(--ink)}

/* the one deliberate italic is on The Coach and Magnum, not here: this is a title */
.wk-title{font-style:normal;font-weight:700;color:var(--ink)}

/* the case study card */
.gcard{display:grid;grid-template-columns:1fr 486px;gap:40px;align-items:center;
  border:1px solid var(--creamline);border-top:3px solid var(--yellow);background:var(--cream);
  padding:22px 24px;margin-top:26px}
.gstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gstrip img{width:100%;height:104px;object-fit:cover;border-radius:8px}
.btn.small{padding:9px 18px;font-size:.88rem;margin-top:14px}

/* the close. No yellow: the highlighter is already spent */
.closebig{font-size:2.3rem;font-weight:800;letter-spacing:-.9px;line-height:1.15;max-width:20ch;
  color:var(--ink);margin-top:14px}
.signoff{margin-top:54px;font-size:2.05rem;font-weight:800;letter-spacing:-.7px;line-height:1.2;
  color:var(--ink);max-width:none}

@media (max-width:900px){
  .hero h1{text-wrap:initial}
  .lede{font-size:1.14rem}
  .scoreblk{grid-template-columns:1fr;gap:34px}
  .shape{margin-top:0;max-width:410px}
  .two2{grid-template-columns:1fr;gap:0}
  .two2 > div + div{margin-top:32px}
  .claim{font-size:1.24rem;line-height:2}
  .grid{grid-template-columns:44px 1fr;grid-auto-rows:auto}
  .rail{display:none}
  .cap{grid-column:1/3;padding:16px 0 6px;border-top:2px solid var(--yellow);margin-top:14px}
  .bh{padding-right:0;flex-wrap:wrap;gap:2px 16px;padding-top:11px;padding-bottom:11px}
  .bh b{min-width:0}
  .gridfoot{flex-direction:column;align-items:flex-start;gap:20px}
  .ladder{font-size:1.9rem}
  .chg{grid-template-columns:1fr;gap:0}
  .four{grid-template-columns:1fr 1fr}
  .four > div,.four > a{padding:22px 0}
  .four > :nth-child(2n){padding-left:26px}
  .four > :nth-child(2n+1){border-left:0;padding-left:0}
  .teamblk{padding:30px 26px}
  .teamgrid{grid-template-columns:1fr;gap:28px}
  .teamgrid img{width:100%}
  .gcard{grid-template-columns:1fr;gap:24px}
  .closebig{font-size:1.8rem}
  .signoff{font-size:1.6rem;margin-top:38px}
}
@media (max-width:680px){
  .four{grid-template-columns:1fr}
  .four > :nth-child(2n){padding-left:0}
  .four > * + *{border-top:1px solid var(--hair)}
  .prow{grid-template-columns:1fr;gap:6px}
  .prow .pr{text-align:left}
  .closebig{font-size:1.5rem}
  .claim{font-size:1.08rem}
}