/* Hand fixes for mockup 42 (loaded after the generated page CSS). */
/* --- Responsive review (rev-F) --- */
.benefit{min-width:0;line-height:1.25}
.benefit > :first-child{flex:0 0 auto}
/* Email button: the address overflowed/wrapped mid-word in the narrow 3-up help buttons. */
.help-actions a small{display:block;overflow-wrap:anywhere;font-size:10.5px}
/* <=1180px: four hero benefits in ~470px overlapped their icons and wrapped into 4-5 lines. */
@media(max-width:1180px){
  .hero-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:901px) and (max-width:1180px){
  .help-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .help-actions a:first-child{grid-column:1/-1}
}
/* Tablet (stacked): keep short form fields paired; process steps in one row (arrows pointed at nothing
   in the 2-up grid); hero art reduced to a plain band behind the Amy card. */
@media(min-width:601px) and (max-width:900px){
  .form-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .form-grid .full{grid-column:1/-1}
  .process-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hero-benefits{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:900px){
  .hero-art{min-height:0}
  .hero-art:before,.hero-art:after{display:none}
  .amy-card{margin:0}
}
@media(max-width:600px){
  .proc:after{display:none}
}
@media(min-width:601px) and (max-width:900px){.issue-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:600px){
  .coverage-img{height:56px}
  .help-wrap{grid-template-columns:72px minmax(0,1fr);align-items:start}
  .help-face{height:80px}
}

/* --- Round 3 detail review (rev3-F) --- */
/* Left/right edges: breadcrumb + hero used 30px padding (content at 80/1200) while every card below uses
   24px (74/1206, same as the header logo). The hero gradient also showed as a 24-30px tinted strip past
   the hero art. Align everything to one content edge. */
.breadcrumb{padding-left:24px;padding-right:24px}
.hero{padding-left:24px;padding-right:24px;background:none}
/* Pro band: "Builders, Designers & Trade Pros" wrapped to 2 lines, so its list started lower than the
   other two lists. Give the last column the room it needs. */
@media(min-width:901px){
  .pro{grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,1.15fr)}
  .pro > div > span:first-child strong{white-space:nowrap}
}
@media(min-width:901px) and (max-width:1180px){.pro > div > span:first-child strong{font-size:14px;white-space:normal}}
/* Hero benefits were vertically centred, so the 4-line "Right Solution"/"We Handle the Claim" items
   started higher than their neighbours; top-align them with the icons. */
.hero-benefits{align-items:start}
.benefit{align-items:flex-start}
/* Help box: three 3-up buttons broke the e-mail address mid-word ("buildmysh / utter.com").
   Call + Chat side by side, the e-mail button full width underneath, address never broken. */
@media(min-width:601px){
  .help-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .help-actions a:first-child{grid-column:auto}
  .help-actions a:nth-child(3){grid-column:1/-1}
}
.help-actions a small{overflow-wrap:normal;font-size:11px}
.help-actions a{display:flex;flex-direction:column;align-items:center;justify-content:center}
/* Talk (no border) vs Chat (2px border): different heights in the hero Amy card. */
.amy-btn.talk{border:2px solid var(--orange)}
/* FAQ chevron (U+2304 glyph) sat ~4px below the question line; draw it with borders instead. */
.faq-row{align-items:center}
#bms-main .site .faq-row > span:last-child{font-size:0;width:7px;height:7px;flex:0 0 auto;margin:0 4px 3px 12px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
#bms-main .site .faq-row.is-open > span:last-child{transform:rotate(225deg);margin-bottom:-3px}
/* Common Shipping Issues: four ~105px cards wrapped 3 of 4 titles and stretched text to 5 lines. 2 x 2. */
@media(min-width:901px){.issue-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.issue-img{height:76px}}
.issue{display:flex;flex-direction:column}
/* The form card was stretched to the taller right column, leaving ~200px of empty card under Submit. */
@media(min-width:901px){.main{align-items:start}}
/* >=1181: four hero benefits in ~140px each wrapped to 4-5 lines of 10px text; 2 x 2 as at <=1180. */
@media(min-width:1181px){.hero-benefits{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}}
/* Need Help: Amy's photo was centred against the text + 2 rows of buttons, sitting below the heading. */
.help-wrap{align-items:start}
/* Tablet: hero Amy card had two full-width 50px buttons stacked; side by side instead. */
@media(min-width:601px) and (max-width:900px){
  .amy-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:8px}
  .amy-card .amy-top{grid-column:1/-1}
}
/* <=900: the hero art collapsed to a 16px tinted strip above the Amy card (looked like a broken band). */
@media(max-width:900px){
  .hero-art{background:none;border-radius:0;overflow:visible}
  .hero-art .amy-card{margin:0!important}
}