/* Technical detail disclosure on How It Works. Uses the site's own colour variables. */
.bm-tech{background:#fff;border:1px solid #d3e0ea;border-radius:14px;overflow:hidden}
.bm-tech > summary{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:20px;padding:22px 28px;cursor:pointer;list-style:none}
.bm-tech > summary::-webkit-details-marker{display:none}
.bm-tech > summary:hover{background:var(--light-blue,#e8f4f8)}
.bm-tech > summary:focus-visible{outline:3px solid var(--accent-blue,#2d8cbb);outline-offset:-3px}
.bm-tech > summary h2{grid-column:1;margin:0;text-align:left;font-size:1.35rem;color:var(--dark-navy,#0f2537)}
.bm-tech-sub{grid-column:1;margin-top:4px;color:var(--gray-text,#4a5568);font-size:.95rem}
.bm-tech-chev{grid-column:2;grid-row:1 / span 2;width:11px;height:11px;margin-right:6px;border-right:3px solid var(--primary-blue,#1a4d7a);border-bottom:3px solid var(--primary-blue,#1a4d7a);transform:rotate(45deg);transition:transform .2s}
.bm-tech[open] > summary{border-bottom:1px solid #d3e0ea}
.bm-tech[open] > summary .bm-tech-chev{transform:rotate(-135deg)}
@media (prefers-reduced-motion:reduce){.bm-tech-chev{transition:none}}
/* Flatten the nested page sections inside the block. They carry inline backgrounds and alternating-row backgrounds
   from the page CSS, so the first rule uses !important. */
.bm-tech .technical-section,.bm-tech .technical-section:nth-child(even){background:none !important;padding:2rem 0 .5rem}
.bm-tech .container{max-width:none;margin:0;padding:0 28px}
.bm-tech .technical-section + .technical-section{border-top:1px solid #e3ecf3}
.bm-tech .technical-section h3{font-size:1.35rem;margin-bottom:.75rem}
.bm-tech .content-block{margin-bottom:1.75rem}
.bm-tech .content-block h4{margin-bottom:.35rem}
.bm-tech .section-intro{font-size:1rem;margin-bottom:1.5rem}
@media (max-width:600px){
  .bm-tech > summary{padding:18px 18px}
  .bm-tech .container{padding:0 18px}
}