/* The brand offer pages: /preflight/, /post-mortem/, /attribution-kit/, /thank-you/.
   Loaded after styles.css by those four pages only, so nothing here can move a
   pixel on the homepage or the /work/ pages. Every value comes from the variables in
   styles.css — no new typefaces, colours or sizes. */

/* the three offers, as a row under the header */
.bp__tabs{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;margin-bottom:clamp(2rem,4vw,3rem)}
.bp__tabs a{
  min-height:var(--tap);display:inline-flex;align-items:center;
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--faint);transition:color .3s;
}
.bp__tabs a:hover{color:var(--paper)}
.bp__tabs a[aria-current]{color:var(--gold)}

/* running copy */
.bp__prose{max-width:62ch;margin-top:clamp(1.6rem,3vw,2.2rem)}
.bp__prose p{margin:0;color:var(--muted)}
.bp__prose p + p{margin-top:1.1rem}
.bp__prose a,.bp__link{color:var(--gold);border-bottom:1px solid rgba(201,168,76,.4);transition:border-color .3s}
.bp__prose a:hover,.bp__link:hover{border-color:var(--gold)}

/* the 21 checks, five groups in a hairline grid */
.bp__checks{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
  margin-top:clamp(2rem,4vw,3rem);grid-template-columns:1fr}
.bp__group{background:var(--ink);padding:clamp(1.3rem,2.6vw,1.9rem)}
.bp__group h3,.bp__card h3{font-family:var(--display);font-weight:400;font-size:var(--fs-head);
  line-height:1.1;color:var(--paper);margin:0 0 .9rem;text-transform:uppercase;letter-spacing:-.01em}
.bp__group ol{list-style:none;margin:0;padding:0}
.bp__group li{display:grid;grid-template-columns:2.2rem 1fr;gap:.5rem;padding:.7rem 0;
  border-top:1px solid var(--line-soft);font-size:var(--fs-body);line-height:1.55;color:var(--muted)}
.bp__group li b{font-family:var(--display);font-weight:400;color:var(--gold);line-height:1.4}
.bp__card p{margin:0;color:var(--muted)}

/* the numbered steps and rules reuse .proc from styles.css; this is the example line */
.bp__eg{margin:1rem 0 0;padding-left:clamp(1rem,2vw,1.4rem);border-left:2px solid var(--gold);
  max-width:62ch;font-size:var(--fs-body);line-height:1.6;color:var(--paper)}
.proc__d + .proc__d{margin-top:.8rem}

/* the form */
.bp__form{display:grid;gap:.6rem;max-width:560px;margin-top:clamp(2rem,4vw,3rem)}
.bp__form label{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--gold);margin-top:.6rem}
.bp__form input,.bp__form textarea{
  width:100%;min-width:0;padding:.95rem 1.1rem;background:var(--ink-2);color:var(--paper);
  border:1px solid var(--line);font-family:var(--mono);font-size:var(--fs-body);
  border-radius:0;transition:border-color .3s
}
.bp__form textarea{min-height:9rem;resize:vertical}
.bp__form input:focus,.bp__form textarea:focus{outline:none;border-color:var(--gold)}
.bp__form ::placeholder{color:var(--faint)}
.bp__form .btn{justify-self:start;margin-top:1rem}
.bp__hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the other two offers */
.bp__more{display:grid;gap:clamp(2rem,4vw,3rem);grid-template-columns:1fr;margin-top:clamp(1.5rem,3vw,2rem)}
.dp__near .bp__more .dp__next{margin-top:0;padding-top:clamp(1.25rem,2.5vw,1.75rem);border-top:1px solid var(--line-soft)}
.bp__more .dp__nexttitle{font-size:var(--fs-head);text-transform:uppercase}
.bp__more p{margin:0;color:var(--muted);font-size:var(--fs-body)}

/* Four terms and five check groups: the grids are sized so no row is left with
   an empty cell showing the hairline colour through. */
.dp__stats.bp__terms{grid-template-columns:1fr}
@media (min-width:600px){
  .dp__stats.bp__terms{grid-template-columns:1fr 1fr}
}
@media (min-width:768px){
  .bp__checks{grid-template-columns:1fr 1fr}
  .bp__group:last-child:nth-child(odd){grid-column:1 / -1}
  .bp__more{grid-template-columns:1fr 1fr}
}
@media (min-width:1100px){
  .bp__checks{grid-template-columns:repeat(6,1fr)}
  .bp__group{grid-column:span 2}
  .bp__group:nth-child(4),.bp__group:last-child:nth-child(5){grid-column:span 3}
  .bp__group:last-child:nth-child(3){grid-column:span 2}
  .dp__stats.bp__terms{grid-template-columns:repeat(4,1fr)}
}