/* page-write-for-us.css - extracted from an inline <style> block, 2026-09-28 */
/* Write for Us: two-column layout on desktop, single column on small screens */
.page-content{max-width:100%;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
.about-hero{max-width:860px}
.about-section li{padding-right:8px}
/* tighter rhythm between sections - the page was very tall.
   the horizontal padding is what keeps the text off the edge of the white card */
.about-section{padding:22px 40px 28px;margin:20px 0}
.page-content h2{margin:24px 0 20px}
.page-content ol{margin:24px 0}
.page-content ol li{padding:22px 26px 22px 84px;line-height:1.7}
.page-content ol li::before{left:20px}
/* FAQ: question + answer are one card, so they always line up */
.faq-card{margin-bottom:20px}
.faq-card > h3{border-radius:12px 12px 0 0;margin:0}
.faq-card > p{margin-bottom:0;border-radius:0 0 12px 12px}

@media (min-width:1100px){
  /* wider canvas than the site default: this page is text-heavy */
  .site-main > .container{max-width:1500px}
  /* every section keeps the full width and its text runs the whole width of the card */
  .about-section > p,.about-section > div > p,.about-section li{max-width:none}
  .about-section{padding-left:52px;padding-right:52px}
  /* inside a section, lists and step cards use the width two-up */
  .about-section > ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 52px}
  .page-content ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}
  .page-content ol li{margin-bottom:0}
  .page-content ol li:hover{transform:none}
  /* FAQ cards pack into columns inside their own section */
  .faq-grid{column-count:2;column-gap:32px}
  .faq-card{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 22px}
}
@media (min-width:1500px){
  .about-section{padding-left:64px;padding-right:64px}
  .faq-grid{column-count:3;column-gap:28px}
}
@media (max-width:768px){
  .page-content{padding-left:10px;padding-right:10px}
  .about-section{padding-left:22px;padding-right:22px}
  .page-content ol li{padding:24px 22px 24px 78px}
  .page-content ol li::before{left:16px;width:44px;height:44px;font-size:18px}
}
@media (max-width:520px){
  /* badge on top so the text keeps the full width of the card */
  .page-content ol li{padding:62px 20px 24px 20px}
  .page-content ol li::before{top:18px;left:20px;transform:none;width:40px;height:40px;font-size:17px}
}
