/* /pricing. Four routes, five modules, the price list.
   Measured against BIF_04_Pricing.pdf. */

.pricing h1{margin-top:14px;max-width:22ch}
.pricing .big{margin-top:22px;max-width:80ch}
.pricing .btns{margin-top:26px}
.sect h2{max-width:26ch}
.sect > .wrap > p,.sect p{margin-top:14px}
.small{font-size:.9rem;margin-top:26px;max-width:78ch}

/* the four routes in */
.routes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.route{background:#FFFDF9;border:1px solid var(--hair);padding:24px 25px;display:flex;
  flex-direction:column;transition:border-color .12s ease,background-color .12s ease}
.route:hover{border-color:var(--ink);background:#fff}
.route .n{display:block}
.route h3{margin-top:8px;font-size:1.12rem;letter-spacing:-.3px}
.route p{margin-top:12px;font-size:.95rem;flex:1}
.rfoot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:24px;padding-top:16px;border-top:1px solid var(--hair)}
.rp{font-size:1.25rem;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.rlink{font-size:.9rem;font-weight:700;white-space:nowrap;
  border-bottom:2px solid transparent;display:inline-block}
.route:hover .rlink{border-bottom-color:var(--yellow)}

/* the five modules. Three has three behaviours, Five has one. Never pairs. */
.modules{margin-top:26px}
.mrow{display:grid;grid-template-columns:116px 236px 1fr;gap:0;padding:22px 0;
  border-top:1px solid var(--hair);align-items:start}
.mrow:last-child{border-bottom:1px solid var(--hair)}
.mlab b{display:block;font-size:1.45rem;font-weight:800;letter-spacing:-.6px;margin-top:4px}
.gset{display:flex;gap:20px;align-items:flex-start}
.gone{display:flex;flex-direction:column;align-items:center;gap:5px;width:52px}
.gone .gi{height:44px;display:flex;align-items:flex-end;justify-content:center}
.gone .gi img{max-height:44px;max-width:52px;width:auto;display:block}
.gone .gn{font-size:10px;font-weight:800;letter-spacing:1.4px;color:#A8A399}
.mtext h3{font-size:1.12rem;letter-spacing:-.3px}
.mnames{font-size:.96rem;font-weight:600;color:var(--ink);margin-top:7px}
.mnames a{border-bottom:2px solid var(--yellow)}
.mnames a:hover{background:var(--yellow)}
.mnames .plus{font-weight:400;color:var(--muted)}
.mtext p{margin-top:8px;font-size:.97rem;max-width:70ch}
.modfoot{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;
  margin-top:26px}
.modfoot p{margin:0;max-width:74ch}

/* the price list. Its heading is the section break on this page, so it carries
   more weight than the eyebrows above it. */
.priceblock{padding-top:78px}
.priceshead{font-size:2.6rem;letter-spacing:-1px;line-height:1.08;max-width:none;
  padding-top:34px;border-top:3px solid var(--ink)}
.pricelist{margin-top:30px}
.prow{display:grid;grid-template-columns:1fr 150px;gap:24px;padding:18px 0;
  border-top:1px solid var(--hair);align-items:start}
.prow h3{font-size:1.2rem;font-weight:700;display:inline-block;
  border-bottom:2px solid transparent}
/* the yellow line under the heading, the way the price rows on Home behave */
a.prow:hover h3{border-bottom-color:var(--yellow)}
a.prow.hero:hover h3{border-bottom-color:var(--ink)}
a.prow{transition:background-color .12s ease}
a.prow:not(.hero):hover{background:#FFFDF9}
.prow p{margin-top:4px;font-size:.97rem;max-width:72ch}
.prow .pr{font-size:1.05rem;font-weight:800;text-align:right;
  font-variant-numeric:tabular-nums}
.prow.hero{background:var(--yellow);padding:18px 14px;margin:0 -14px;border-top:0}
.prow.hero p{color:#3A3B3C}

.chip{display:block;width:max-content;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;margin-bottom:7px}

/* the email capture, in line on the free row */
.unlock{border-top:1px solid var(--hair);margin-top:14px;padding-top:14px}
.unlock .n{display:block}
.capture{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.capture input{flex:1 1 240px;min-width:0;border:1px solid var(--hair);background:#fff;
  padding:11px 13px;font-size:.95rem;border-radius:2px}
.capture .go{background:var(--ink);color:var(--paper);padding:11px 18px;font-size:.9rem;
  font-weight:800;border:0;border-radius:2px;white-space:nowrap;cursor:pointer}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.manshots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px;
  max-width:822px}
.manshots img{width:100%;height:auto;border-radius:10px}

/* how it works, and what you get */
.four{display:grid;grid-template-columns:repeat(4,1fr);margin-top:30px}
.four > div{padding:20px 26px;border-left:1px solid var(--hair)}
.four > div:first-child{border-left:0;padding-left:0}
.how h3{margin-top:6px;font-size:1.06rem}
.how p{margin-top:8px;font-size:.95rem}
.two2{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.getlist{margin-top:12px}
.getlist div{padding:13px 0;border-top:1px solid var(--hair);font-size:1rem;line-height:1.45;
  color:var(--ink)}
.claimbig{font-size:1.5rem;font-weight:800;letter-spacing:-.6px;color:var(--ink);
  margin-top:10px}

/* teams. Yellow does its third job here */
.teamblk{background:var(--yellow);padding:44px 48px}
.teamblk p{color:#2E2F30;max-width:74ch;font-size:1.05rem}
.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.3rem;font-weight:800;color:var(--ink)}

@media (max-width:1000px){
  .routes{grid-template-columns:1fr 1fr;gap:14px}
  .four{grid-template-columns:1fr 1fr}
  .four > div:nth-child(2n+1){border-left:0;padding-left:0}
  .mrow{grid-template-columns:96px 1fr;row-gap:14px}
  .mglyph{grid-column:2}
  .mtext{grid-column:1/3}
}
@media (max-width:820px){
  .pricing h1{font-size:2.3rem;max-width:none}
  .sect h2{max-width:none}
  .two2{grid-template-columns:1fr;gap:34px}
  .modfoot{flex-direction:column;gap:20px}
  .teamblk{padding:30px 26px}
  .teamgrid{grid-template-columns:1fr;gap:28px}
  .teamgrid img{width:100%}
}
@media (max-width:620px){
  .routes{grid-template-columns:1fr}
  .four{grid-template-columns:1fr}
  .four > div{border-left:0;padding:20px 0;border-top:1px solid var(--hair)}
  .four > div:first-child{border-top:0}
  .prow{grid-template-columns:1fr;gap:8px}
  .prow .pr{text-align:left;font-size:1.3rem}
  .manshots{grid-template-columns:1fr}
  .gset{flex-wrap:wrap;gap:14px}
}

/* the talk block, which is where the team pack and every pending buy button go */
.talkline{margin-top:20px}
.talkline .fmail{font-size:1.15rem;font-weight:800;color:var(--ink);
  border-bottom:2px solid var(--yellow);padding-bottom:2px;cursor:pointer;
  display:inline-block;direction:ltr}
.talkline .fmail i{font-style:normal}
.talkline .fmail i.at::before{content:"\000040"}
.talkline .fmail i.dot::before{content:"\00002E"}

/* One module expands to the five, so the choice is made here and not in Stripe.
   Native <details>, no JavaScript. */
.prow.picker{display:block;padding:0}
.prow.picker > summary{display:grid;grid-template-columns:1fr 150px;gap:24px;
  align-items:start;padding:18px 0;cursor:pointer;list-style:none}
.prow.picker > summary::-webkit-details-marker{display:none}
.prow.picker > summary:hover h3{border-bottom-color:var(--yellow)}
.pickcue{display:inline-block;margin-top:12px;font-size:.9rem;font-weight:800;
  color:var(--ink);border-bottom:2px solid var(--yellow);padding-bottom:1px}
.pickcue::after{content:" \203A"}
.prow.picker[open] > summary .pickcue::after{content:" \2039";
  display:inline-block;transform:rotate(90deg)}

.picks{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:4px 0 22px}
.pick{display:grid;grid-template-columns:1fr auto;grid-template-areas:
  "n p" "m p" "b p";gap:0 16px;align-items:start;
  background:#FFFDF9;border:1px solid var(--hair);padding:16px 18px;
  transition:border-color .12s ease,background-color .12s ease}
.pick:hover{border-color:var(--ink);background:#fff}
.pn{grid-area:n;font-size:10.5px;font-weight:700;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--muted)}
.pm{grid-area:m;font-size:1.06rem;font-weight:800;letter-spacing:-.3px;margin-top:5px;
  display:inline-block;border-bottom:2px solid transparent}
.pick:hover .pm{border-bottom-color:var(--yellow)}
.pb{grid-area:b;font-size:.9rem;color:var(--muted);margin-top:6px;line-height:1.4}
.pp{grid-area:p;font-size:1.05rem;font-weight:800;align-self:center;
  font-variant-numeric:tabular-nums}

@media (max-width:820px){
  .picks{grid-template-columns:1fr}
}
@media (max-width:620px){
  .prow.picker > summary{grid-template-columns:1fr;gap:8px}
}