/* Blue intro/search → sand starter shelf → white reading index → navy tools.
   Section surfaces span the viewport; only their content uses the reading wrap. */
.gh-index { --gh-paper:var(--mu-paper); --gh-blue:var(--mu-blue); --gh-dark:var(--mu-dark); color:var(--mu-ink,#183744); background:var(--mu-white); }
.gh-index :is(h1,h2,h3,h4) { font-family:'Nunito',system-ui,sans-serif; font-weight:900; letter-spacing:-.025em; }
.gh-index .wrap { width:min(1160px,calc(100% - 64px)); }
.gh-index a { color:inherit; text-decoration:none; }
.gh-intro-band { background:var(--gh-blue); border-bottom:1px solid var(--mu-blue-line); }
.gh-intro { padding-block:36px 28px; }
.gh-eyebrow { color:#096a9b; font-size:11px; font-weight:900; letter-spacing:.1em; margin:0 0 12px; }
.gh-intro h1 { font-size:clamp(38px,4vw,49px); line-height:1.08; margin:0; max-width:19ch; }
.gh-intro > p:not(.gh-eyebrow) { font-size:18px; line-height:1.6; margin:17px 0 8px; color:#4a6370; }
.gh-intro-note { display:block; color:#506b78; font-size:13px; line-height:1.5; }
@media(min-width:850px) {
  .gh-intro { display:grid; grid-template-columns:1.1fr 1fr; column-gap:68px; align-items:center; }
  .gh-intro .gh-eyebrow { grid-column:1/-1; }
  .gh-intro h1 { grid-row:2/4; }
  .gh-intro > p:not(.gh-eyebrow) { align-self:end; margin:0 0 12px; }
  .gh-intro-note { align-self:start; }
}
.gh-controls { padding:0 0 19px; }
.gh-search-row { display:flex; align-items:center; gap:40px; }
.gh-search { display:block; flex:1; max-width:580px; }
.gh-search > span { display:block; font-size:13px; font-weight:850; margin-bottom:9px; }
.gh-search > div { position:relative; }
.gh-search svg { position:absolute; left:16px; top:15px; width:19px; height:19px; stroke:#68838f; stroke-width:1.7; }
.gh-search input { width:100%; height:49px; border:1px solid #b8cdd8; border-radius:7px; background:#fff; padding:10px 15px 10px 45px; color:#173a4c; font:inherit; font-size:15px; }
.gh-search input::placeholder { color:#70838d; }
.gh-search-row > p { margin:24px 0 0; font-size:13px; line-height:1.6; color:#506b78; }
.gh-filter-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:15px; }
.gh-filters { display:flex; flex-wrap:wrap; gap:0 20px; }
.gh-filters button { display:flex; gap:8px; align-items:center; padding:13px 0 14px; border:0; border-bottom:3px solid transparent; border-radius:0; background:transparent; color:#496471; font-family:inherit; font-size:13px; font-weight:800; cursor:pointer; }
.gh-filters button > span { font-size:10px; font-weight:750; color:#536e7b; }
.gh-filters button:hover { color:#096a9b; }
.gh-filters button[aria-pressed='true'] { color:#096a9b; border-bottom-color:#087fb7; }
.gh-clear { padding:12px 0; background:transparent; border:0; color:#096a9b; font:inherit; font-size:12px; font-weight:800; cursor:pointer; white-space:nowrap; }
.gh-filter-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:end; gap:2px 15px; }
.gh-filter-meta p { color:#536e7b; font-size:11px; margin:0; white-space:nowrap; }
.gh-group-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:21px; }
.gh-group-heading h2 { font-size:28px; line-height:1.25; margin:0; }
.gh-group-heading p { margin:0; font-size:13px; color:#4c6573; }
.gh-group-heading .gh-eyebrow { margin:0 0 8px; color:#096a9b; font-size:10px; }
.gh-start { padding-block:34px 40px; background:var(--gh-paper); border-bottom:1px solid var(--mu-paper-line); }
.gh-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.gh-feature { display:flex; flex-direction:column; overflow:hidden; border:1px solid #d7e2e8; border-radius:12px; background:#fff; transition:border-color .16s,box-shadow .16s; }
.gh-feature:hover { border-color:#6baccd; box-shadow:0 5px 18px #1842590a; }
.gh-feature-body { display:flex; flex:1; flex-direction:column; padding:20px; }
.gh-format { color:#647d89; font-size:11px; font-weight:750; }
.gh-feature h3 { font-size:22px; line-height:1.23; margin:8px 0 8px; }
.gh-feature p { font-size:14px; line-height:1.65; margin:0 0 18px; color:#556e7b; }
.gh-feature-body > strong { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid #e0e8ed; padding-top:12px; margin-top:auto; font-size:14px; color:#087db5; }
.gh-feature-body > strong span { font-size:20px; }
.gh-email-art,.gh-flow-art,.gh-check-art { height:149px; flex:none; border-bottom:1px solid #dfe7eb; }
.gh-email-art { background:#eaf0e8; padding:18px 24px; }
.gh-email-paper { display:flex; height:100%; max-width:300px; margin:auto; background:#fffdf4; box-shadow:0 4px 8px #203c2d12; }
.gh-email-paper img { width:36%; height:100%; object-fit:cover; object-position:center 62%; }
.gh-email-paper > div { padding:15px; display:flex; flex-direction:column; justify-content:center; }
.gh-email-paper span { font:bold 9px Georgia,serif; color:#4b5c43; letter-spacing:.2em; }
.gh-email-paper strong { font:bold 20px/1.12 Georgia,serif; letter-spacing:-.02em; margin:10px 0; color:#344832; }
.gh-email-paper b { background:#3b5436; color:#fff; padding:7px 9px; font:700 8px Arial,sans-serif; }
.gh-flow-art { padding:19px 23px; background:#f1eef9; display:flex; flex-direction:column; justify-content:center; gap:9px; }
.gh-flow-art > div { position:relative; display:grid; grid-template-columns:23px 1fr; column-gap:9px; background:#fff; padding:8px 10px; border:1px solid #e1dceb; border-radius:6px; color:#4a3d69; }
.gh-flow-art span { grid-row:1/3; display:grid; place-items:center; background:#f1ecf9; border-radius:4px; font-size:11px; font-weight:850; }
.gh-flow-art strong { font-size:11px; line-height:1.4; font-weight:800; }
.gh-flow-art small { font-size:7px; margin-top:3px; letter-spacing:.06em; color:#8774a0; }
.gh-check-art { padding:24px 32px; background:#eef6f8; display:flex; flex-direction:column; justify-content:center; gap:10px; }
.gh-check-art > span { margin-bottom:3px; font-size:9px; font-weight:850; color:#50737e; letter-spacing:.07em; }
.gh-check-art div { display:flex; align-items:center; gap:10px; color:#344f5c; font-size:13px; }
.gh-check-art b { display:grid; place-items:center; width:20px; height:20px; border:1px solid #98bcb2; color:#3c8069; background:#fff; border-radius:4px; font-size:13px; }
.gh-more { padding-block:38px 42px; background:var(--mu-white); }
.gh-all-heading { padding-bottom:17px; border-bottom:2px solid #1c4356; margin-bottom:0; }
.gh-topic { display:grid; grid-template-columns:210px minmax(0,1fr); gap:45px; padding:26px 0 10px; border-bottom:1px solid #ccdce4; }
.gh-topic-intro { padding-top:9px; }
.gh-topic-intro h3 { font-size:20px; margin:0 0 9px; line-height:1.3; }
.gh-topic-intro p { font-size:13px; line-height:1.65; color:#647e8a; margin:0; max-width:24ch; }
.gh-row { display:grid; grid-template-columns:minmax(0,1fr) 22px; gap:30px; padding:13px 8px 20px 0; border-bottom:1px solid #e1e9ed; }
.gh-row + .gh-row { padding-top:20px; }
.gh-row:last-child { border:0; }
.gh-row h4 { font-size:20px; line-height:1.35; margin:0 0 6px; }
.gh-row p { color:#587380; font-size:14px; line-height:1.65; margin:0 0 8px; max-width:65ch; }
.gh-row-meta { font-size:11px; color:#738a96; }
.gh-row-meta i { padding-inline:6px; font-style:normal; }
.gh-row-arrow { font-size:20px; color:#5597b8; padding-top:2px; }
.gh-row:hover h4 { color:#087db5; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.gh-index[data-guide-filtered='true'] :is(.gh-email-art,.gh-flow-art,.gh-check-art) { display:none; }
.gh-index[data-guide-filtered='true'] .gh-start .gh-group-heading p { display:none; }
.gh-index[data-guide-filtered='true'] .gh-all-heading .gh-eyebrow { display:none; }
.gh-index[data-guide-filtered='true'] .gh-tool-band { display:none; }
.gh-index[data-guide-active-topic]:not([data-guide-active-topic='all']) .gh-topic { grid-template-columns:1fr; gap:0; padding-top:12px; }
.gh-index[data-guide-active-topic]:not([data-guide-active-topic='all']) .gh-topic-intro { display:none; }
.gh-empty { padding:35px 20px 50px; text-align:center; background:var(--gh-paper); border-bottom:1px solid var(--mu-paper-line); }
.gh-empty h2 { font-size:28px; }
.gh-empty p { color:#557483; }
.gh-tool-band { background:var(--gh-dark); color:#f5fbff; }
.gh-tool-shelf { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:35px; padding-block:40px 44px; }
.gh-tool-shelf h2 { margin:0; font-size:30px; line-height:1.2; }
.gh-tool-shelf p { color:#c3d7df; font-size:14px; line-height:1.65; }
.gh-tool-shelf .gh-eyebrow { color:#94cfe9; font-size:11px; }
.gh-tool-shelf > a { position:relative; padding:20px 0 5px; border-top:2px solid #43697c; }
.gh-tool-shelf h3 { margin:9px 0 6px; font-size:21px; }
.gh-tool-shelf > a p { margin:0 0 16px; }
.gh-tool-shelf strong { display:flex; justify-content:space-between; align-items:center; gap:14px; color:#9bdcf9; font-size:13px; }
.gh-tool-shelf > a:hover h3 { text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.gh-tool-symbol { font-size:25px; color:#94cfe9; }
.gh-about { display:flex; gap:16px; align-items:center; padding:25px 0; }
.gh-about img { flex:none; }
.gh-about p { color:#6a808b; font-size:12px; line-height:1.6; max-width:67ch; margin:0; }
.gh-about strong { color:#3e5b6b; }
.gh-about a { margin-left:auto; font-size:12px; font-weight:800; color:#087db5; }
.gh-index [hidden] { display:none!important; }
.gh-index :is(a,button,input):focus-visible { outline:3px solid #169dde; outline-offset:4px; }
@media(max-width:900px) {
  .gh-index .wrap { width:calc(100% - 44px); }
  .gh-search-row { gap:24px; }
  .gh-filters { gap:0 16px; }
  .gh-filters button { font-size:12px; }
  .gh-filters button span { display:none; }
  .gh-feature-grid { gap:13px; }
  .gh-feature-body { padding:18px; }
  .gh-feature h3 { font-size:20px; }
  .gh-email-art { padding:23px 13px; }
  .gh-email-paper > div { padding:10px; }
  .gh-email-paper strong { font-size:17px; }
  .gh-flow-art { padding:16px 12px; }
  .gh-flow-art strong { font-size:10px; }
  .gh-check-art { padding:22px 18px; }
  .gh-check-art div { font-size:11px; }
  .gh-topic { grid-template-columns:165px minmax(0,1fr); gap:30px; }
  .gh-tool-shelf { gap:25px; }
}
@media(max-width:620px) {
  .gh-index .wrap { width:calc(100% - 36px); }
  .gh-intro { padding-block:27px 23px; }
  .gh-intro h1 { font-size:37px; }
  .gh-intro > p:not(.gh-eyebrow) { font-size:16px; }
  .gh-intro-note { font-size:12px; }
  .gh-controls { position:relative; padding:0 0 17px; }
  .gh-search-row { display:block; }
  .gh-search-row > p { display:none; }
  .gh-search-row > p br { display:none; }
  .gh-filter-row { display:block; margin-top:8px; }
  .gh-filters { gap:0 17px; }
  .gh-filters button { min-height:42px; padding-block:10px 8px; font-size:12px; }
  .gh-clear { min-height:42px; }
  .gh-filter-meta { justify-content:start; min-height:0; }
  .gh-filter-meta p { position:absolute; right:0; top:3px; font-size:10px; }
  .gh-group-heading { display:block; }
  .gh-group-heading h2 { font-size:24px; }
  .gh-group-heading p { margin-top:7px; font-size:12px; }
  .gh-feature-grid { grid-template-columns:1fr; gap:16px; }
  .gh-feature { display:grid; grid-template-columns:95px minmax(0,1fr); }
  .gh-feature-body { padding:18px; }
  .gh-feature h3 { font-size:21px; margin-top:7px; }
  .gh-feature p { font-size:13px; margin-bottom:16px; }
  .gh-format { font-size:10px; }
  .gh-feature-body > strong { font-size:13px; padding-top:11px; }
  .gh-email-art,.gh-flow-art,.gh-check-art { height:100%; min-height:0; border:0; border-right:1px solid #dfe7eb; padding:15px 10px; overflow:hidden; }
  .gh-email-paper { height:160px; flex-direction:column; margin-top:12px; }
  .gh-email-paper img { height:100%; width:100%; object-fit:cover; }
  .gh-email-paper > div { display:none; }
  .gh-flow-art { align-items:center; }
  .gh-flow-art > div { display:block; background:transparent; border:0; padding:0; }
  .gh-flow-art span { width:30px; height:30px; background:#fff; border:1px solid #d8cfe6; }
  .gh-flow-art strong,.gh-flow-art small { display:none; }
  .gh-check-art { align-items:center; gap:18px; }
  .gh-check-art > span { display:none; }
  .gh-check-art div { font-size:0; }
  .gh-check-art b { width:25px; height:25px; }
  .gh-start { padding-block:28px 30px; }
  .gh-more { padding-block:30px 32px; }
  .gh-all-heading { display:flex; }
  .gh-topic { grid-template-columns:1fr; gap:15px; padding-top:23px; }
  .gh-topic-intro { padding:0; }
  .gh-topic-intro h3 { font-size:16px; margin-bottom:3px; color:#087eaf; }
  .gh-topic-intro p { max-width:none; font-size:12px; }
  .gh-row { gap:15px; }
  .gh-row h4 { font-size:19px; }
  .gh-row p { font-size:13px; }
  .gh-index[data-guide-filtered='true'] .gh-feature { grid-template-columns:1fr; }
  .gh-tool-shelf { grid-template-columns:1fr; gap:20px; padding-block:30px; }
  .gh-tool-shelf > a { padding-top:18px; }
  .gh-tool-symbol { float:right; }
  .gh-tool-shelf h3 { margin-top:0; }
  .gh-tool-shelf h2 { font-size:28px; }
  .gh-tool-shelf > div p { margin-bottom:0; }
  .gh-tool-shelf > div p br { display:none; }
  .gh-about { align-items:start; flex-wrap:wrap; gap:12px; }
  .gh-about p { flex:1; }
  .gh-about a { flex-basis:100%; margin-left:40px; }
}
@media(prefers-reduced-motion:reduce) { .gh-index * { transition:none!important; } }