/* Styles extracted from templates/dynamic-page.php inline <style> (static blocks). */
.dp-hero{background:var(--blue-color);color:#fff;padding:54px 0 48px;text-align:center}
  .dp-hero h1{margin:0 0 10px;font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.5px}
  .dp-hero p{margin:0 auto;max-width:580px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.82)}
  .dp-hero p a{color:#fff;text-decoration:underline}
  .dp-wrap{max-width:1140px;margin:0 auto;padding:0 16px}
  /* Section buttons in a left rail, the policy text on the right — same shape as the Help Center.
     The rail sticks while the text scrolls. No negative top margin any more: it used to lift the
     button grid onto the dark hero, and with the whole two-column block riding up the section
     heading landed as dark text on that dark band. */
  .dp-layout{display:grid;grid-template-columns:264px minmax(0,1fr);gap:26px;align-items:start;margin-top:34px;position:relative;z-index:2}
  .dp-side{position:sticky;top:96px}
  .dp-main{min-width:0}
  .dp-cards{display:flex;flex-direction:column;gap:10px;margin:0 0 26px}
  .dp-card{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #e9ebf0;
    border-radius:5px;padding:14px 16px;text-decoration:none;color:#1a1a2e;font-weight:600;
    font-size:13px;box-shadow:0 4px 18px rgba(20,20,50,.06);
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
  .dp-card:hover{transform:translateY(-2px);border-color:rgba(201,15,83,.4);
    box-shadow:0 10px 26px rgba(201,15,83,.12);color:#1a1a2e}
  .dp-card__n{width:30px;height:30px;flex-shrink:0;border-radius:5px;display:flex;align-items:center;
    justify-content:center;background:#fdeef4;color:var(--main-color);font-size:13px;font-weight:800}
  .dp-intro{margin:0 0 18px;font-size:14.5px;line-height:1.7;color:#41465a}
  .dp-intro a{color:var(--main-color);font-weight:600;text-decoration:none}
  .dp-acc{margin:0 0 36px}
  .dp-sec-title{font-size:20px;font-weight:800;color:#0e1120;margin:0 0 16px}
  /* scroll-margin-top parks an opened section under the fixed header. */
  .dp-item{border:1px solid #e9ebf0;border-radius:5px;margin-bottom:10px;background:#fff;overflow:hidden;scroll-margin-top:96px}
  .dp-item.is-open{border-color:rgba(201,15,83,.45);box-shadow:0 6px 20px rgba(201,15,83,.08)}
  .dp-q{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;cursor:pointer;
    padding: var(--btn-py) 18px;font-size:15px;font-weight: var(--btn-fw);color:#0e1120;text-align:left}
  .dp-q__n{width:30px;height:30px;flex-shrink:0;border-radius:5px;display:flex;align-items:center;
    justify-content:center;background:#fdeef4;color:var(--main-color);font-size:12px;font-weight:800}
  .dp-q__txt{flex:1}
  .dp-q__car{color:var(--main-color);font-size:13px;transition:transform .2s ease}
  .dp-item.is-open .dp-q__car{transform:rotate(90deg)}
  .dp-a{display:none;padding:2px 20px 20px 60px}
  .dp-item.is-open .dp-a{display:block}
  .dp-a p{margin:0 0 11px;font-size:14px;line-height:1.7;color:#41465a}
  .dp-a ul,.dp-a ol{margin:0 0 8px;padding-left:20px}
  .dp-a li{margin:7px 0;font-size:14px;line-height:1.7;color:#41465a}
  .dp-a a{color:var(--main-color);font-weight:600;text-decoration:none}
  .dp-a a:hover{text-decoration:underline}
  .dp-cta{background:#fbfbfd;border:1px solid #e9ebf0;border-radius:5px;padding:28px 26px;
    text-align:center;margin-bottom:54px}
  .dp-cta h3{margin:0 0 8px;font-size:19px;font-weight:800;color:#0e1120}
  .dp-cta p{margin:0 0 18px;color:#6b7080;font-size:14px}
  .dp-btn{display:inline-flex;align-items:center;gap:8px;padding: var(--btn-py) var(--btn-px);border-radius:5px;
    background:var(--main-color);color:#fff;font-weight: var(--btn-fw);font-size:14px;text-decoration:none;transition:background .16s ease}
  .dp-btn:hover{background:var(--main-dark);color:#fff}
  .dp-updated{text-align:center;font-size:12.5px;color:#9499a6;margin:0 0 40px}
  @media only screen and (min-width: 320px) and (max-width: 539px),
         only screen and (min-width: 540px) and (max-width: 767px) {
    .dp-a { padding-left: 18px; }
  }


  /* One column on tablets and phones: sections list first, then the text. */
  @media (max-width: 900px) {
    .dp-layout{grid-template-columns:1fr;gap:0;margin-top:28px}
    .dp-side{position:static}
    .dp-cards{margin-bottom:30px}
  }