/* ── Inner pages ──────────────────────────────────────────────────
   About, Get Featured, Contact and the legal pages. home.css scopes
   its type and form rules to .bmp-home on purpose, so an inner page
   states its own; everything shared — .bmp-wrap, .bmp-btn, .bmp-split,
   .bmp-names, .bmp-panel — is already unscoped and simply works.

   The Original Content page keeps its own sheet: it runs barer and
   larger than these do, and that is the point of it.
   ───────────────────────────────────────────────────────────────── */

  .bmp-inner{display:block}
  .bmp-inner section{padding:var(--bmp-sect) 0}

  .bmp-inner h1{
    font-family:var(--bmp-display);font-weight:800;
    font-size:clamp(38px,7.4vw,86px);line-height:.98;letter-spacing:.01em;
    text-transform:uppercase;margin:0 0 22px;color:var(--bmp-white);
  }
  .bmp-inner h1 .bmp-lit{color:var(--bmp-gold-1)}
  .bmp-inner h2{
    font-family:var(--bmp-display);font-weight:800;
    font-size:clamp(26px,3.6vw,46px);line-height:1.05;letter-spacing:.02em;
    text-transform:uppercase;margin:0 0 20px;color:var(--bmp-white);
  }
  .bmp-inner h3{
    font-family:var(--bmp-display);font-weight:700;font-size:14px;
    letter-spacing:.18em;text-transform:uppercase;margin:0 0 12px;
    color:var(--bmp-white);
  }
  .bmp-inner p{margin:0 0 16px;color:var(--bmp-muted);max-width:68ch}

  /* The opening of an inner page. No photograph — these pages carry an
     argument rather than a picture — so the type does the arriving, and a
     hairline under it does the work a hero edge would. */
  .bmp-open{padding-top:clamp(56px,7vw,104px)!important;
    padding-bottom:clamp(44px,6vw,84px)!important}
  .bmp-open .bmp-lede{max-width:38ch;font-size:clamp(17px,2vw,23px);margin:0}
  .bmp-open .bmp-btn{margin-top:32px}

  /* Numbered steps. The count is the design: set large, gold and hung in
     its own column, so the sequence reads before any of the words do. */
  .bmp-steps{list-style:none;margin:44px 0 0;padding:0;
    border-top:1px solid var(--bmp-line)}
  .bmp-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);
    gap:clamp(18px,3vw,40px);align-items:start;
    padding:clamp(24px,3vw,38px) 0;border-bottom:1px solid var(--bmp-line)}
  .bmp-steps .bmp-n{font-family:var(--bmp-display);font-weight:800;
    font-size:clamp(28px,4vw,52px);line-height:1;color:var(--bmp-gold-2);
    font-variant-numeric:tabular-nums}
  .bmp-steps p{margin:0}

  /* Two or three panels of equal weight: the routes onto the platform, the
     ways to reach us. Same 2px seam as the visual bands, so the whole site
     joins its panels the same way. */
  .bmp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:2px;margin-top:40px}
  .bmp-card{background:var(--bmp-panel);border:1px solid var(--bmp-line);
    padding:clamp(24px,3vw,38px)}
  .bmp-card p:last-child{margin-bottom:0}
  .bmp-card a{font-family:var(--bmp-display);font-weight:700;font-size:13px;
    letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
    border-bottom:1px solid var(--bmp-gold-line);padding-bottom:3px}
  .bmp-card a:hover{border-bottom-color:var(--bmp-gold-1)}

  /* The one line about money. It is deliberately not a price list and not a
     panel shouting for attention: a rule, a gold edge, and the sentence. */
  .bmp-terms{margin-top:44px;padding:22px 0 22px clamp(18px,2.4vw,28px);
    border-left:2px solid var(--bmp-gold-2);
    border-top:1px solid var(--bmp-line)}
  .bmp-terms p{margin:0;color:var(--bmp-muted);max-width:56ch}

  /* Scoped, not global: the homepage draws the same div and has deliberately
     never given it a surface. Styling it from here would redesign a page this
     sheet is not even loaded on. */
  .bmp-inner .bmp-panel{background:var(--bmp-panel);border:1px solid var(--bmp-line);
    padding:clamp(28px,4vw,56px)}

/* ── The form on an inner page ────────────────────────────────────
   Lifted from the homepage's rules rather than shared with them: those
   are written under .bmp-home and reaching them from here would have
   meant unscoping them, which is how a homepage rule ends up somewhere
   nobody meant it to be.
   ───────────────────────────────────────────────────────────────── */

  .bmp-inner form{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
  .bmp-inner label{display:flex;flex-direction:column;gap:8px;
    font-family:var(--bmp-display);font-weight:700;font-size:10px;
    letter-spacing:.2em;text-transform:uppercase;color:var(--bmp-muted-2)}
  .bmp-inner label.bmp-full{grid-column:1/-1}
  .bmp-inner input,.bmp-inner select,.bmp-inner textarea{
    font-family:var(--bmp-body);font-size:15px;color:var(--bmp-white);
    background:var(--bmp-ink);border:1px solid var(--bmp-line-2);
    padding:13px 14px;border-radius:2px;letter-spacing:0;text-transform:none;
    transition:border-color .25s}
  .bmp-inner input::placeholder,.bmp-inner textarea::placeholder{color:#807B72}
  .bmp-inner input:hover,.bmp-inner select:hover,.bmp-inner textarea:hover{
    border-color:var(--bmp-gold-line)}
  .bmp-inner textarea{min-height:118px;resize:vertical}
  .bmp-inner form .bmp-full:last-child{display:flex;align-items:center;gap:16px}
  .bmp-inner #bmp-sent{font-size:13px;color:var(--bmp-gold-1);opacity:0;
    transition:opacity .4s}
  .bmp-inner #bmp-sent.bmp-on{opacity:1}
  .bmp-inner #bmp-sent.bmp-bad{color:#F0A79A}

/* ── Legal pages ──────────────────────────────────────────────────
   Privacy and Cookies are written in the editor, so their markup is
   whatever WordPress produces. One measure, one rhythm, and headings
   that step down properly — nothing else needed.
   ───────────────────────────────────────────────────────────────── */

  .bmp-prose{max-width:68ch}
  .bmp-prose h2{font-size:clamp(20px,2.4vw,28px);margin:48px 0 14px}
  .bmp-prose h3{margin:32px 0 10px}
  .bmp-prose ul,.bmp-prose ol{margin:0 0 18px;padding-left:22px;
    color:var(--bmp-muted);max-width:64ch}
  .bmp-prose li{margin-bottom:8px}
  .bmp-prose a{text-underline-offset:4px}
  .bmp-prose>:first-child{margin-top:0}

  @media (max-width:900px){
    .bmp-inner form{grid-template-columns:1fr 1fr}
  }
  @media (max-width:600px){
    .bmp-inner form{grid-template-columns:1fr}
    .bmp-steps li{grid-template-columns:1fr;gap:10px}
    .bmp-steps .bmp-n{font-size:26px}
  }