/* page-local additions, built on the shared Bee Current design system */
  .tool-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
  .tool{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md);
    padding:26px; display:flex; flex-direction:column; gap:12px;
    transition:border-color .18s ease, transform .18s ease;
  }
  .tool:hover{ border-color:rgba(245,167,58,0.4); transform:translateY(-2px); }
  .tool h3{ margin:0; }
  .tool p{ font-size:15px; line-height:1.62; margin:0; }
  .tool .go{ margin-top:auto; font-size:14px; font-weight:600; color:var(--orange); text-decoration:none; }
  .tool .go:hover{ color:var(--orange-bright); }

  /* parent-brand strip so the hierarchy is never ambiguous */
  .parent-strip{
    background:var(--bg2); border-bottom:1px solid var(--line-soft);
    font-size:13.5px; color:var(--text3);
  }
  .parent-strip .wrap{ display:flex; align-items:center; gap:10px; padding:11px 28px; flex-wrap:wrap; }
  .parent-strip b{ color:var(--text2); font-weight:600; }
  .parent-strip a{ color:var(--orange); text-decoration:none; }
  .parent-strip a:hover{ color:var(--orange-bright); }

  .note-list{ display:grid; gap:0; max-width:900px; }
  .note{ display:grid; grid-template-columns:132px 1fr; gap:26px; padding:26px 0; border-top:1px solid var(--line-soft); align-items:start; }
  .note:last-child{ border-bottom:1px solid var(--line-soft); }
  .note .when{ font-family:var(--mono); font-size:12.5px; color:var(--text3); padding-top:4px; letter-spacing:0.03em; }
  .note h3{ margin-bottom:8px; }
  .note p{ font-size:15.5px; margin:0; }
  @media(max-width:620px){ .note{ grid-template-columns:1fr; gap:8px; } }

  .band-method{ background:var(--bg2); }

/* --- adconcierge page-local additions --- */
.parent-strip{
  background:var(--bg2); border-bottom:1px solid var(--line-soft);
  font-size:13.5px; color:var(--text3);
}
.parent-strip .wrap{ display:flex; align-items:center; gap:10px; padding:11px 28px; flex-wrap:wrap; }
.parent-strip b{ color:var(--text2); font-weight:600; }
.parent-strip a{ color:var(--orange); text-decoration:none; }
.parent-strip a:hover{ color:var(--orange-bright); }

.consent-row{
  display:flex; align-items:flex-start; gap:11px;
  padding:14px 0; min-height:44px; cursor:pointer;
  font-size:14.5px; color:var(--text2); line-height:1.5;
}
.consent-row input[type="checkbox"]{
  width:22px; height:22px; min-width:22px; margin-top:1px;
  flex:0 0 22px; accent-color:var(--orange);
}
.form-status{ margin-top:14px; font-size:14.5px; min-height:1.2em; color:var(--text3); }
.form-status.error{ color:#ff7b7b; }
.form-status.success{ color:var(--green); }
.success-state h2{
  font-family:var(--display); text-transform:uppercase; letter-spacing:-0.01em;
  color:var(--green); font-size:22px; margin-bottom:10px;
}
.success-state p{ color:var(--text2); line-height:1.6; margin-bottom:10px; }
.success-state p:last-child{ margin-bottom:0; font-size:14px; color:var(--text3); }

/* --------------------------------------------------------------------------
   Fold ordering: on narrow screens the signup card must come right after the
   headline, before the supporting copy. On desktop the headline and copy sit
   in the left column with the card beside them, so we restore the natural
   DOM order there with explicit grid placement.
   -------------------------------------------------------------------------- */
.hero-head{ grid-column:1; grid-row:1; }
.hero-body{ grid-column:1; grid-row:2; }
.hero-card{ grid-column:2; grid-row:1 / span 2; }

@media (max-width:1000px){
  .hero-head{ grid-column:1; grid-row:1; }
  .hero-card{ grid-column:1; grid-row:2; }
  .hero-body{ grid-column:1; grid-row:3; }
}

/* --------------------------------------------------------------------------
   Mobile fold: the signup card is the primary action, so it must fit above
   the fold at 390x844. On narrow screens we drop the card's opening
   paragraph (the lead directly below already explains the offer) and
   tighten the card padding.
   -------------------------------------------------------------------------- */
.card-intro{ font-size:15px; margin-bottom:20px; color:var(--text2); }

@media (max-width:1000px){
  .hero-card{ padding:22px 20px; }
  .hero-card .card-intro{ display:none; }
  .hero-card h3{ margin-bottom:14px; }
  .hero-card .form-note{ margin-top:10px; font-size:12.5px; }
}