/* How it works page (Noor, 2026-10-23): the header's "How it works" opens this page. Text only: headings and text on
   the site's paper and band, no icons, drawings, lines or cards. Styling only. */
html[data-page="how"] main .how-section{padding:48px 0!important;background:var(--st-paper)!important}
html[data-page="how"] main .how-section.alt{background:#F4F2EC!important}
html[data-page="how"] main>.page-lede+.how-section{padding-top:36px!important}
html[data-page="how"] .how-head{max-width:620px;margin:0 0 28px}
html[data-page="how"] body main .how-section .how-head h2{margin:0!important;font-size:26px!important;line-height:1.25!important;font-weight:600!important;color:var(--st-fg)!important}
html[data-page="how"] .how-head p{margin:12px 0 0;font-size:16px;line-height:1.7;color:var(--st-muted)}

/* Steps: three columns of text in order. */
html[data-page="how"] .how-rail{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 40px}
html[data-page="how"] .how-stop{margin:0;padding:0}
html[data-page="how"] .how-no{display:block;margin:0 0 6px;font-size:14px;font-weight:600;color:var(--st-mint-ink);font-variant-numeric:tabular-nums}
html[data-page="how"] body main .how-section .how-stop h3{margin:0 0 6px!important;font-size:20px!important;line-height:1.3!important;font-weight:600!important;color:var(--st-fg)!important}
html[data-page="how"] body main .how-section .how-stop p{margin:0;max-width:34ch;font-size:15px;line-height:1.6;color:var(--st-muted)}

/* Institutions: the text, then the identifiers and the one GSEIN they share, as text. */
html[data-page="how"] .how-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
html[data-page="how"] .how-split .how-head{margin:0}
html[data-page="how"] .how-map{display:grid;gap:16px}
html[data-page="how"] .how-ids{list-style:none;margin:0;padding:0;display:grid;gap:8px}
html[data-page="how"] .how-ids li{font-size:16px;line-height:1.5;color:var(--st-fg)}
html[data-page="how"] .how-target{display:grid;gap:2px}
html[data-page="how"] .how-target strong{font-size:16px;font-weight:600;color:var(--st-mint-ink)}
html[data-page="how"] .how-target span{font:500 14px/1.5 var(--st-mono)!important;color:var(--st-fg)}

/* Use cases: two columns of text. */
html[data-page="how"] .how-uses{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 48px}
html[data-page="how"] .how-use{margin:0;padding:0}
html[data-page="how"] body main .how-section .how-use h3{margin:0 0 4px!important;font-size:18px!important;line-height:1.35!important;font-weight:600!important;color:var(--st-fg)!important}
html[data-page="how"] body main .how-section .how-use p{margin:0;font-size:15px;line-height:1.6;color:var(--st-muted)}

html[data-page="how"] .how-cta{padding:48px 0;background:var(--st-band)}
html[data-page="how"] .how-cta-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
html[data-page="how"] body main .how-cta h2{margin:0!important;font-size:26px!important;line-height:1.3!important;font-weight:600!important;color:#fff!important}
html[data-page="how"] .how-actions{display:flex;flex-wrap:wrap;gap:12px}
html[data-page="how"] .how-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;font-size:15px;font-weight:600;text-decoration:none}
html[data-page="how"] .how-btn:focus-visible{outline:2px solid #F3D27A;outline-offset:3px}
html[data-page="how"] .how-btn-gold{background:#E2B04A;color:#0B181A}
html[data-page="how"] .how-btn-gold:hover{background:#F3D27A}
html[data-page="how"] .how-btn-line{border:1px solid rgba(255,255,255,.28);color:#fff}
html[data-page="how"] .how-btn-line:hover{border-color:#F3D27A;color:#F3D27A}

@media(max-width:1040px){
  html[data-page="how"] .how-split{grid-template-columns:1fr;gap:24px}
}
@media(max-width:760px){
  html[data-page="how"] main .how-section{padding:36px 0!important}
  html[data-page="how"] body main .how-section .how-head h2,html[data-page="how"] body main .how-cta h2{font-size:22px!important}
  html[data-page="how"] .how-rail,html[data-page="how"] .how-uses{grid-template-columns:1fr;gap:24px}
  html[data-page="how"] body main .how-section .how-stop p{max-width:none}
  html[data-page="how"] .how-actions,html[data-page="how"] .how-btn{width:100%}
}