/* =====================================================================================
 * Reference templates, batch 7 (inc/templates-b7.php, inc/templates-b7-home.php).
 * Loaded only when the flag `templates_b7` is on, and only on the homepage, brand pages and
 * category pages; every rule is scoped to body.sgh-t7. Loads after sgh-v2.css.
 *
 * One design language for the three templates:
 *   section head   eyebrow, heading, one sentence, a "more" link, on a fine rule
 *   rhythm         --t7-gap between sections (64 px, 40 px on phones)
 *   dividers       1 px rules instead of boxes; cards only for selectable options
 *   numbers        mono "01" sequences in orange
 *   dark sections  charcoal --panel, at most two per page
 *   images         one dominant image per hero, credits under OEM images
 * ===================================================================================== */

.sgh-t7 { --t7-gap: 64px; }
@media (max-width: 760px) { .sgh-t7 { --t7-gap: 40px; } }

/* ---------- shared (section head, facts, numbers, dark band and steps moved to sgh-v2.css as
   .sec-head, .facts, .sec-num, .band-dark and .steps; the t7 names share those rules) ---------- */
.sgh-t7 .t7-sec { padding-top: var(--t7-gap); }
.sgh-t7 .t7-small { font-size: var(--fs-small); line-height: 1.5; color: var(--slate); }
.sgh-t7 .t7-lead { margin: 14px 0 0; max-width: 56ch; font-size: var(--fs-h3); line-height: 1.55; color: var(--charcoal); }
.sgh-t7 .t7-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.sgh-t7 .t7-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; margin-top: 8px; font-size: var(--fs-small); line-height: 1.4; color: var(--slate); }
.sgh-t7 .t7-cap a { color: var(--ink); text-underline-offset: 3px; }
.sgh-t7 .t7-cap small, .sgh-t7 .t7-credit { font-size: var(--fs-micro); color: var(--slate); }
.sgh-t7 .t7-ph { overflow: hidden; border-radius: 4px; background: var(--ground-2, var(--ground-2)); }
.sgh-t7 .t7-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }


.sgh-t7 .t7-dark a:focus-visible, .sgh-t7 .h6-biz a:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }


/* "Also" line: a quiet run of text links with counts */
.sgh-t7 .t7-also { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 18px 0 0; font-size: var(--fs-small); }
.sgh-t7 .t7-also > span { font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.sgh-t7 .t7-also a { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.sgh-t7 .t7-also a:hover { text-decoration-color: currentColor; }
.sgh-t7 .t7-also .n { font-weight: 400; color: var(--slate); }

/* help routes, the last section of a brand or category page */
.sgh-t7 .t7-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: var(--t7-gap); padding-block: 32px 56px; border-top: 1px solid var(--line-strong); }
.sgh-t7 .t7-help h2 { font: 800 var(--fs-h2)/1.2 var(--display); }
.sgh-t7 .t7-help p { margin: 6px 0 0; max-width: 60ch; color: var(--slate); }
.sgh-t7 .t7-help-a { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sgh-t7 .t7-call { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--ink); text-decoration: none; }
.sgh-t7 .t7-call .icon { width: 18px; height: 18px; color: var(--orange-press); }
.sgh-t7 .t7-call:hover { text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================================
 * Brand pages
 * ===================================================================================== */
.sgh-t7 .t7-bhero { padding-block: 36px 32px; background: var(--paper); border-bottom: 1px solid var(--line); }
.sgh-t7 .t7-bhero-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 48px; align-items: center; }
.sgh-t7 .t7-bhero.is-compact { padding-block: 20px; }
.sgh-t7 .t7-bhero.is-compact .t7-bhero-in { grid-template-columns: minmax(0, 1fr); }
.sgh-t7 .t7-blogo { margin: 0 0 16px; }
.sgh-t7 .t7-blogo img { display: block; }
.sgh-t7 .t7-bhero h1 { font: 800 clamp(28px, 3.3vw, 44px)/1.06 var(--display); letter-spacing: -0.02em; max-width: 18ch; color: var(--ink); }
.sgh-t7 .t7-bhero h1 .t7-bh-name { display: block; margin-bottom: 6px; font: 700 13px/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.sgh-t7 .t7-bhero.is-compact h1 { max-width: none; font-size: clamp(22px, 2.4vw, 30px); }
.sgh-t7 .t7-bhero.is-compact .t7-facts { margin-top: 10px; padding-top: 0; border-top: 0; }
.sgh-t7 .t7-about { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-top: 6px; font-size: var(--fs-small); font-weight: 600; color: var(--orange-press); text-decoration: none; }
.sgh-t7 .t7-about .icon { width: 15px; height: 15px; transform: rotate(90deg); }
.sgh-t7 .t7-about:hover { text-decoration: underline; text-underline-offset: 3px; }
.sgh-t7 .t7-bhero-fig { margin: 0; min-width: 0; }
.sgh-t7 .t7-bhero-fig .x-fig-in { position: relative; }
.sgh-t7 .t7-bhero-fig img { display: block; width: 100%; height: auto; max-height: 470px; object-fit: contain; }
.sgh-t7 .t7-bhero-fig.is-product img { width: auto; max-width: 100%; max-height: 380px; margin-inline: auto; }
.sgh-t7 .t7-bhero-fig .x-cap { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 12px; margin-top: 8px; font-size: var(--fs-micro); color: var(--slate); }
.sgh-t7 .t7-bhero-fig .x-cap a { color: var(--ink); }
@media (max-width: 1099px) { .sgh-t7 .t7-bhero-fig .x-co { display: none; } }

/* families: a product detail strip */
.sgh-t7 .t7-fams { background: var(--paper); border-bottom: 1px solid var(--line); }
.sgh-t7 .t7-fams ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.sgh-t7 .t7-fams li { min-width: 0; }
.sgh-t7 .t7-fams li + li { border-left: 1px solid var(--line); }
.sgh-t7 .t7-fams a { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: 1fr 1fr; column-gap: 12px; align-items: center; height: 100%; padding: 14px 16px; color: var(--ink); text-decoration: none; }
.sgh-t7 .t7-fams li:first-child a { padding-left: 0; }
.sgh-t7 .t7-fams .pic { grid-row: 1 / span 2; display: grid; place-items: center; width: 56px; height: 56px; }
.sgh-t7 .t7-fams .pic img { width: 100%; height: 100%; object-fit: contain; }
.sgh-t7 .t7-fams .nm { align-self: end; font: 700 var(--fs-small)/1.25 var(--display); }
.sgh-t7 .t7-fams .ct { align-self: start; font-size: var(--fs-micro); color: var(--slate); }
.sgh-t7 .t7-fams a:hover .nm, .sgh-t7 .t7-fams a:focus-visible .nm { color: var(--orange-press); text-decoration: underline; text-underline-offset: 3px; }

/* selector rows (MEAN WELL) */
.sgh-t7 .t7-sel { padding-top: 20px; }
.sgh-t7 .t7-sel-h { margin: 0 0 8px; font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.sgh-t7 .t7-sel-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.sgh-t7 .t7-sel-row h3 { margin: 0; font: 600 var(--fs-small)/1.2 var(--sans); color: var(--charcoal); }
.sgh-t7 .t7-sel-row ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sgh-t7 .t7-sel-row a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--paper); color: var(--ink); font-size: var(--fs-small); font-weight: 600; text-decoration: none; white-space: nowrap; }
.sgh-t7 .t7-sel-row a span { font-size: var(--fs-micro); font-weight: 400; color: var(--slate); font-variant-numeric: tabular-nums; }
.sgh-t7 .t7-sel-row a:hover, .sgh-t7 .t7-sel-row a:focus-visible { border-color: var(--ink); }

.sgh-t7 .t7-cathead { padding-top: 28px; }
.sgh-t7 .t7-cathead h2 { font: 800 var(--fs-h2)/1.15 var(--display); }
.sgh-t7.tax-product_brand .listing { padding-top: 8px; }

/* after the catalogue */
.sgh-t7 .t7-after { padding-bottom: 8px; border-top: 1px solid var(--line); background: var(--ground); }
.sgh-t7 .t7-index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.sgh-t7 .t7-index > li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.sgh-t7 .t7-index .t7-n { padding-top: 5px; }
.sgh-t7 .t7-index h3 { font: 700 var(--fs-h3)/1.3 var(--display); }
.sgh-t7 .t7-index h3 a { color: var(--ink); text-decoration: none; }
.sgh-t7 .t7-index h3 a:hover { color: var(--orange-press); text-decoration: underline; text-underline-offset: 3px; }
.sgh-t7 .t7-index h3 .ct { font: 400 var(--fs-small)/1 var(--sans); color: var(--slate); }
.sgh-t7 .t7-index p { margin: 4px 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--slate); }
.sgh-t7 .t7-index ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: var(--fs-small); }
.sgh-t7 .t7-index ul a { display: inline-block; padding: 4px 0; color: var(--charcoal); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.sgh-t7 .t7-index ul a:hover { color: var(--orange-press); text-decoration-color: currentColor; }
.sgh-t7 .t7-index ul span { color: var(--slate); font-size: var(--fs-micro); }

.sgh-t7 .t7-after .x-st { padding-block: 56px; }
.sgh-t7 .t7-after .x-story { margin-top: var(--t7-gap); }
.sgh-t7 .t7-after .x-st--light { background: var(--paper); }
.sgh-t7 .t7-after .x-st--light + .x-st--light { border-top: 1px solid var(--line); }
.sgh-t7 .t7-after .x-st--full-bleed { padding-top: 0; background: var(--paper); }
.sgh-t7 .t7-after .x-st--full-bleed .x-st-fig img { height: clamp(220px, 32vw, 460px); }
.sgh-t7 .t7-after .x-st--full-bleed .x-st-bleed-copy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 56px; align-items: start; margin-top: 28px; }
.sgh-t7 .t7-after .x-st--full-bleed .x-st-items { margin-top: 0; }
.sgh-t7 .t7-after .x-bfamily, .sgh-t7 .t7-after .x-bnote { margin-top: var(--t7-gap); }

.sgh-t7 .t7-series { list-style: none; margin: 0; padding: 0; }
.sgh-t7 .t7-series > li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 6px 32px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.sgh-t7 .t7-ser-main { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 2px 16px; color: var(--ink); text-decoration: none; }
.sgh-t7 .t7-ser-main b { grid-row: 1 / span 2; font: 800 22px/1.1 var(--display); color: var(--ink); }
.sgh-t7 .t7-ser-main span { font-size: var(--fs-body); color: var(--charcoal); }
.sgh-t7 .t7-ser-main small { font-size: var(--fs-micro); color: var(--slate); }
.sgh-t7 .t7-ser-main:hover b { color: var(--orange-press); }
.sgh-t7 .t7-ser-terms { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-small); }
.sgh-t7 .t7-ser-terms a { display: inline-block; padding: 4px 0; font-family: var(--mono); color: var(--charcoal); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.sgh-t7 .t7-ser-terms a:hover { color: var(--orange-press); }

.sgh-t7 .t7-system-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 56px; align-items: center; }
.sgh-t7 .t7-system h2 { font: 800 var(--fs-h2)/1.12 var(--display); }
.sgh-t7 .t7-system-copy > p { margin: 12px 0 0; max-width: 58ch; font-size: var(--fs-body); line-height: 1.6; }
.sgh-t7 .t7-system .btn { margin-top: 18px; }
.sgh-t7 .t7-plate { margin: 0; padding: 20px; background: var(--paper); border-radius: 4px; color: var(--ink); }
.sgh-t7 .t7-plate figcaption { margin-top: 8px; font-size: var(--fs-micro); color: var(--slate); }
.sgh-t7 .t7-plate svg { display: block; width: 100%; height: auto; }
.sgh-t7 .t7-plate .x-door-m { display: none; }
@media (max-width: 640px) { .sgh-t7 .t7-plate .x-door-d { display: none; } .sgh-t7 .t7-plate .x-door-m { display: block; } }

.sgh-t7 .t7-sols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.sgh-t7 .t7-sols a { display: grid; grid-template-columns: 136px minmax(0, 1fr) 20px; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.sgh-t7 .t7-sols .vis { display: block; padding: 6px; background: var(--paper); border-radius: 4px; }
.sgh-t7 .t7-sols .vis svg { display: block; width: 100%; height: auto; }
.sgh-t7 .t7-sols b { display: block; font: 700 var(--fs-body)/1.3 var(--display); }
.sgh-t7 .t7-sols small { display: block; margin-top: 3px; font-size: var(--fs-small); line-height: 1.45; color: var(--slate); }
.sgh-t7 .t7-sols .icon { width: 18px; height: 18px; color: var(--orange-press); }
.sgh-t7 .t7-sols a:hover b { color: var(--orange-press); }
.sgh-t7 .t7-sols a:not(:has(.vis)) { grid-template-columns: minmax(0, 1fr) 20px; } /* b18: a solution without a thumbnail uses the full width */

.sgh-t7 .t7-docs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px 56px; align-items: start; }
.sgh-t7 .t7-docs .t7-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 18px; }
.sgh-t7 .t7-doclist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.sgh-t7 .t7-doclist a { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 48px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.sgh-t7 .t7-doclist .icon { width: 20px; height: 20px; color: var(--orange-press); }
.sgh-t7 .t7-doclist b { font: 600 var(--fs-body)/1.3 var(--display); }
.sgh-t7 .t7-doclist span { font-size: var(--fs-small); color: var(--slate); font-variant-numeric: tabular-nums; }
.sgh-t7 .t7-doclist a:hover b { color: var(--orange-press); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1023px) {
  .sgh-t7 .t7-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sgh-t7 .t7-system-in, .sgh-t7 .t7-docs, .sgh-t7 .t7-after .x-st--full-bleed .x-st-bleed-copy { grid-template-columns: minmax(0, 1fr); }
  .sgh-t7 .t7-series > li { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .sgh-t7 .t7-bhero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 28px; }
  .sgh-t7 .t7-bhero h1 { font-size: 30px; }
  .sgh-t7 .t7-bhero-fig img { max-height: 300px; }
  .sgh-t7 .t7-sols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .sgh-t7 .t7-bhero-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sgh-t7 .t7-about { display: none; }
  .sgh-t7 .t7-bhero { padding-block: 18px 16px; }
  .sgh-t7 .t7-blogo { margin-bottom: 10px; }
  .sgh-t7 .t7-blogo img { max-height: 30px; width: auto !important; }
  .sgh-t7 .t7-bhero h1 { font-size: 25px; line-height: 1.12; }
  .sgh-t7 .t7-lead { margin-top: 8px; font-size: var(--fs-body); line-height: 1.5; }
  .sgh-t7 .t7-acts { margin-top: 14px; gap: 8px; }
  .sgh-t7 .t7-acts .btn { flex: 1 1 auto; padding: 0 14px; }
  .sgh-t7 .t7-facts { margin-top: 12px; padding-top: 10px; font-size: var(--fs-small); }
  .sgh-t7 .t7-facts b { font-size: var(--fs-small); }
  .sgh-t7 .t7-bhero-fig img { max-height: 210px; }
  .sgh-t7 .t7-bhero-fig .x-cap { justify-content: flex-start; margin-top: 4px; }
  .sgh-t7 .t7-bhero-fig .x-cap > span { display: none; }
  /* the strip scrolls sideways; the next family peeks in */
  .sgh-t7 .t7-fams .wrap { padding-inline: 0; }
  .sgh-t7 .t7-fams ul { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-inline: 20px; scroll-padding-inline: 20px; }
  .sgh-t7 .t7-fams ul::-webkit-scrollbar { display: none; }
  .sgh-t7 .t7-fams li { flex: 0 0 auto; width: 176px; scroll-snap-align: start; }
  .sgh-t7 .t7-fams a { padding: 10px 12px; grid-template-columns: 44px minmax(0, 1fr); }
  .sgh-t7 .t7-fams li:first-child a { padding-left: 0; }
  .sgh-t7 .t7-fams .pic { width: 44px; height: 44px; }
  .sgh-t7 .t7-fams .nm { font-size: var(--fs-small); }
  .sgh-t7 .t7-sel { padding-top: 6px; }
  .sgh-t7 .t7-sel-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sgh-t7 .t7-sel-row { grid-template-columns: 64px minmax(0, 1fr); gap: 8px; padding: 3px 0; }
  .sgh-t7 .t7-sel-row:first-of-type { border-top: 0; }
  .sgh-t7 .t7-sel-row h3 { font-size: var(--fs-micro); line-height: 1.2; }
  .sgh-t7 .t7-sel-row ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -20px; padding-right: 20px; }
  .sgh-t7 .t7-sel-row ul::-webkit-scrollbar { display: none; }
  .sgh-t7 .t7-sel-row a { min-height: 38px; }
  .sgh-t7 .t7-cathead { padding-top: 14px; }
  .sgh-t7 .t7-index { grid-template-columns: minmax(0, 1fr); }
  .sgh-t7 .t7-after .x-st { padding-block: 40px; }
  .sgh-t7 .t7-dark { padding-block: 40px; }
  .sgh-t7 .t7-sols a { grid-template-columns: 96px minmax(0, 1fr) 18px; gap: 12px; }
  .sgh-t7 .t7-help { padding-block: 24px 40px; }
  .sgh-t7 .t7-help-a { width: 100%; }
  .sgh-t7 .t7-help-a .btn { flex: 1 1 auto; }
  .sgh-t7 .t7-ser-main { grid-template-columns: 112px minmax(0, 1fr); }
  .sgh-t7 .t7-ser-main b { font-size: 19px; }
}

/* =====================================================================================
 * Category landings
 * ===================================================================================== */
.sgh-t7 .t7-chero.sgh-cl-hero { display: block; margin: 0; padding: 28px 0 32px; background: var(--paper); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.sgh-t7 .t7-chero-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 24px 48px; align-items: center; }
.sgh-t7 .t7-chero .eyebrow a { color: inherit; text-decoration: none; }
.sgh-t7 .t7-chero .eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sgh-t7 .t7-chero h1 { margin: 0; font: 800 clamp(28px, 3.2vw, 42px)/1.08 var(--display); letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.sgh-t7 .t7-chero .lead { max-width: 60ch; margin: 12px 0 0; font-size: var(--fs-body); line-height: 1.6; color: var(--charcoal); }
.sgh-t7 .t7-cbrands { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.sgh-t7 .t7-cbrands a { display: inline-flex; align-items: center; min-height: 40px; color: var(--charcoal); text-decoration: none; }
.sgh-t7 .t7-cbrands .x-wordmark { font: 800 var(--fs-small)/1 var(--display); }
.sgh-t7 .t7-cbrands a:hover, .sgh-t7 .t7-cbrands a:focus-visible { opacity: .75; }
.sgh-t7 .t7-chero-fig { margin: 0; min-width: 0; }
.sgh-t7 .t7-chero-fig .t7-ph { aspect-ratio: 16 / 10; }
.sgh-t7 .t7-chero-fig.is-contain .t7-ph { background: var(--paper); }
.sgh-t7 .t7-chero-fig.is-product .t7-ph { aspect-ratio: auto; display: grid; place-items: center; background: none; }
.sgh-t7 .t7-chero-fig.is-product img { width: auto; max-width: 100%; height: auto; max-height: 300px; object-fit: contain; }

.sgh-t7 .t7-types { padding-top: 24px; }
.sgh-t7 .t7-mini-h { margin: 0 0 12px; font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.sgh-t7 .t7-types ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 18px 16px; }
.sgh-t7 .t7-types li { min-width: 0; }
.sgh-t7 .t7-types a { display: block; color: var(--ink); text-decoration: none; }
.sgh-t7 .t7-types .pic { display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 8px; padding: 10px; background: var(--paper); border-radius: 4px; }
.sgh-t7 .t7-types .pic img { width: 100%; height: 100%; object-fit: contain; }
.sgh-t7 .t7-types .pic svg { width: 40px; height: 40px; color: var(--slate); }
.sgh-t7 .t7-types .nm { display: block; font: 700 var(--fs-small)/1.25 var(--display); }
.sgh-t7 .t7-types .ct { display: block; margin-top: 2px; font-size: var(--fs-micro); color: var(--slate); }
.sgh-t7 .t7-types a:hover .nm, .sgh-t7 .t7-types a:focus-visible .nm { color: var(--orange-press); text-decoration: underline; text-underline-offset: 3px; }
.sgh-t7 .t7-types a:hover .pic { box-shadow: inset 0 0 0 1px var(--line-strong); }
.sgh-t7 .t7-deep { margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.sgh-t7 .t7-deep > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 4px 16px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sgh-t7 .t7-deep dt { font-weight: 600; color: var(--charcoal); padding-top: 4px; }
.sgh-t7 .t7-deep dd { margin: 0; display: flex; flex-wrap: wrap; gap: 0 16px; }
.sgh-t7 .t7-deep a { display: inline-block; padding: 4px 0; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.sgh-t7 .t7-deep a:hover { color: var(--orange-press); text-decoration-color: currentColor; }
.sgh-t7 .t7-deep a span { font-size: var(--fs-micro); color: var(--slate); }
.sgh-t7.tax-product_cat .sgh-cl-all { margin-top: 8px; }
.sgh-t7.tax-product_cat .listing { padding-top: 20px; }
.sgh-t7 .t7-cat.t7-after { background: var(--ground); border-top: 0; }
.sgh-t7 .t7-cat.t7-after .t7-dark { margin-top: 0; }

@media (max-width: 1023px) {
  .sgh-t7 .t7-chero-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 28px; }
  .sgh-t7 .t7-chero-fig .t7-ph { aspect-ratio: 4 / 3; }
  .sgh-t7 .t7-chero .lead { font-size: var(--fs-body); }
}
@media (max-width: 699px) {
  .sgh-t7 .t7-chero-in { grid-template-columns: minmax(0, 1fr); }
  .sgh-t7 .t7-chero-fig.is-product { display: none; }
}
@media (max-width: 760px) {
  .sgh-t7 .t7-chero.sgh-cl-hero { padding: 16px 0 18px; }
  .sgh-t7 .t7-chero-in { gap: 14px; }
  .sgh-t7 .t7-chero .eyebrow { margin-bottom: 8px; }
  .sgh-t7 .t7-chero h1 { font-size: 25px; line-height: 1.12; }
  .sgh-t7 .t7-chero .lead { margin-top: 8px; font-size: var(--fs-body); }
  .sgh-t7 .t7-chero .t7-facts { margin-top: 8px; }
  .sgh-t7 .t7-cbrands { display: none; }
  .sgh-t7 .t7-chero-fig .t7-ph { aspect-ratio: 5 / 2; }
  .sgh-t7 .t7-chero-fig .t7-cap > span { display: none; }
  .sgh-t7 .t7-chero-fig .t7-cap { margin-top: 4px; }
  .sgh-t7 .t7-types { padding-top: 16px; padding-inline: 0; }
  .sgh-t7 .t7-types .t7-mini-h { padding-inline: 20px; }
  .sgh-t7 .t7-types ul { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-inline: 20px; scroll-padding-inline: 20px; }
  .sgh-t7 .t7-types ul::-webkit-scrollbar { display: none; }
  .sgh-t7 .t7-types li { flex: 0 0 auto; width: 112px; scroll-snap-align: start; }
  .sgh-t7 .t7-types .pic { padding: 6px; margin-bottom: 6px; }
  .sgh-t7 .t7-types .nm { font-size: var(--fs-small); }
  .sgh-t7 .t7-deep { display: none; }
  .sgh-t7.tax-product_cat .listing { padding-top: 12px; }
}

/* =====================================================================================
 * Homepage
 * ===================================================================================== */
.sgh-t7 .t7-hhero { padding-block: 36px 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.sgh-t7 .t7-hhero-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px 48px; align-items: center; }
.sgh-t7 .t7-hhero h1 { font: 800 clamp(30px, 3.6vw, 48px)/1.05 var(--display); letter-spacing: -0.022em; max-width: 17ch; color: var(--ink); }
.sgh-t7 .t7-hhero h1 em { font-style: normal; color: var(--orange-press); }
.sgh-t7 .t7-hhero-fig { margin: 0; min-width: 0; }
.sgh-t7 .t7-hhero-fig .t7-ph { aspect-ratio: 16 / 10; }
.sgh-t7 .t7-ways { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); }
.sgh-t7 .t7-ways li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.45; color: var(--slate); }
.sgh-t7 .t7-ways .t7-n { padding-top: 3px; }
.sgh-t7 .t7-ways b { display: block; font: 700 var(--fs-body)/1.3 var(--display); color: var(--ink); }
.sgh-t7 .t7-hfacts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 28px 0 0; padding: 14px 0 16px; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--slate); }
.sgh-t7 .t7-hfacts b { color: var(--ink); font-weight: 700; }
.sgh-t7 .t7-hfacts a { color: var(--ink); }

.sgh-t7 .t7-deps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sgh-t7 .t7-deps > li { min-width: 0; padding: 0 22px 8px; border-left: 1px solid var(--line); }
.sgh-t7 .t7-deps > li:first-child { padding-left: 0; border-left: 0; }
.sgh-t7 .t7-dep-art { display: flex; align-items: flex-end; justify-content: center; gap: 10px; height: 120px; margin-bottom: 14px; }
.sgh-t7 .t7-dep-art img { width: auto; height: auto; max-height: 112px; max-width: 48%; object-fit: contain; }
.sgh-t7 .t7-deps h3 { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px; margin-bottom: 8px; font: 700 var(--fs-h3)/1.25 var(--display); }
.sgh-t7 .t7-deps h3 .t7-n { padding-top: 4px; }
.sgh-t7 .t7-deps h3 a { color: var(--ink); text-decoration: none; }
.sgh-t7 .t7-deps h3 a:hover { color: var(--orange-press); text-decoration: underline; text-underline-offset: 3px; }
.sgh-t7 .t7-deps ul { list-style: none; margin: 0; padding: 0; }
.sgh-t7 .t7-deps ul a { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--charcoal); text-decoration: none; }
.sgh-t7 .t7-deps ul a:hover span:first-child { color: var(--orange-press); text-decoration: underline; text-underline-offset: 3px; }
.sgh-t7 .t7-deps .n { color: var(--slate); font-variant-numeric: tabular-nums; }

.sgh-t7 .t7-brands { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 24px 28px; }
.sgh-t7 .t7-brands li { min-width: 0; }
.sgh-t7 .t7-brands li.is-lead { grid-row: span 2; }
.sgh-t7 .t7-brands a { display: flex; flex-direction: column; gap: 6px; height: 100%; color: var(--ink); text-decoration: none; }
.sgh-t7 .t7-brands .pic { display: block; aspect-ratio: 16 / 10; margin-bottom: 8px; overflow: hidden; border-radius: 4px; background: var(--paper); }
.sgh-t7 .t7-brands .is-cover .pic { background: var(--ground-2, var(--ground-2)); }
.sgh-t7 .t7-brands .pic img { display: block; width: 100%; height: 100%; padding: 6px; }
.sgh-t7 .t7-brands .is-cover .pic img { padding: 0; }
.sgh-t7 .t7-brands .is-lead .pic { aspect-ratio: 5 / 4; }
.sgh-t7 .t7-brands .is-lead .pic img { padding: 8px; }
.sgh-t7 .t7-brands .logo { display: flex; align-items: center; min-height: 34px; }
.sgh-t7 .t7-brands .logo img { display: block; }
.sgh-t7 .t7-brands .ln { font-size: var(--fs-small); line-height: 1.45; color: var(--charcoal); }
.sgh-t7 .t7-brands .is-lead .ln { font-size: var(--fs-body); max-width: 46ch; }
.sgh-t7 .t7-brands .ct { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; font-size: var(--fs-small); font-weight: 600; color: var(--orange-press); }
.sgh-t7 .t7-brands .ct .icon { width: 15px; height: 15px; }
.sgh-t7 .t7-brands a:hover .ct { text-decoration: underline; text-underline-offset: 3px; }

.sgh-t7 .t7-solcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.sgh-t7 .t7-solcards li { min-width: 0; }
.sgh-t7 .t7-solcards a { display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-decoration: none; }
.sgh-t7 .t7-solcards .pic { display: block; aspect-ratio: 4 / 3; margin-bottom: 10px; overflow: hidden; border-radius: 4px; background: var(--ground-2, var(--ground-2)); }
.sgh-t7 .t7-solcards .pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sgh-t7 .t7-solcards .tag, .sgh-t7 .t7-sollist .tag { font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-press); }
.sgh-t7 .t7-solcards b, .sgh-t7 .t7-sollist b { font: 700 var(--fs-h3)/1.25 var(--display); }
.sgh-t7 .t7-solcards .flow, .sgh-t7 .t7-sollist .flow { font-size: var(--fs-small); color: var(--slate); }
.sgh-t7 .t7-solcards a:hover b, .sgh-t7 .t7-sollist a:hover b { color: var(--orange-press); text-decoration: underline; text-underline-offset: 3px; }
.sgh-t7 .t7-solcards .t7-credit { display: block; margin-top: 4px; }
.sgh-t7 .t7-sollist { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--line-strong); }
.sgh-t7 .t7-sollist a { display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; gap: 8px; align-items: start; height: 100%; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.sgh-t7 .t7-sollist .t7-n { padding-top: 3px; }
.sgh-t7 .t7-sollist a > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }
.sgh-t7 .t7-sollist .icon { width: 16px; height: 16px; margin-top: 18px; color: var(--orange-press); }

.sgh-t7 .t7-biz { margin-top: var(--t7-gap); }
.sgh-t7 .t7-biz .h6-biz-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sgh-t7 .t7-biz .t7-steps.is-dark { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 14px; }
.sgh-t7 .t7-biz .t7-steps.is-dark > li { display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 10px 0; border-top: 2px solid var(--panel-line); border-bottom: 0; }
.sgh-t7 .t7-biz .t7-steps.is-dark > li:last-child { border-top-color: var(--orange); }
.sgh-t7 .t7-biz .t7-steps.is-dark b { font-size: var(--fs-small); }
.sgh-t7 .t7-res { padding-bottom: var(--t7-gap); }

@media (max-width: 1100px) {
  .sgh-t7 .t7-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sgh-t7 .t7-brands li.is-lead { grid-column: 1 / -1; grid-row: auto; }
  .sgh-t7 .t7-brands li.is-lead a { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 28px; align-content: center; }
  .sgh-t7 .t7-brands li.is-lead .pic { grid-row: 1 / span 4; margin: 0; }
}
@media (max-width: 1023px) {
  .sgh-t7 .t7-deps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .sgh-t7 .t7-deps > li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .sgh-t7 .t7-solcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sgh-t7 .t7-sollist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .sgh-t7 .t7-hhero-in { grid-template-columns: minmax(0, 1fr); }
  .sgh-t7 .t7-hhero-fig { order: -1; }
  .sgh-t7 .t7-hhero-fig .t7-ph { aspect-ratio: 2 / 1; }
  .sgh-t7 .t7-hhero h1 { max-width: 22ch; }
  .sgh-t7 .t7-biz .t7-steps.is-dark { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sgh-t7 .t7-hhero { padding-top: 0; }
  .sgh-t7 .t7-hhero .wrap.t7-hhero-in { padding-inline: 0; gap: 16px; }
  .sgh-t7 .t7-hhero-copy { padding-inline: 20px; }
  .sgh-t7 .t7-hhero-fig .t7-ph { aspect-ratio: 16 / 9; border-radius: 0; }
  .sgh-t7 .t7-hhero-fig .t7-cap { padding-inline: 20px; }
  .sgh-t7 .t7-hhero-fig .t7-cap > span { display: none; }
  .sgh-t7 .t7-hhero h1 { font-size: 27px; line-height: 1.1; }
  .sgh-t7 .t7-hhero .eyebrow { margin-bottom: 8px; font-size: var(--fs-micro); }
  .sgh-t7 .t7-ways { margin-top: 20px; }
  .sgh-t7 .t7-ways li { padding: 8px 0; font-size: var(--fs-small); }
  .sgh-t7 .t7-hfacts { margin-top: 16px; gap: 4px 16px; font-size: var(--fs-small); }
  .sgh-t7 .t7-deps { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .sgh-t7 .t7-deps > li { padding: 0; border-left: 0; }
  .sgh-t7 .t7-deps > li { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; }
  .sgh-t7 .t7-dep-art { grid-row: 1 / span 2; height: 72px; margin: 0; }
  .sgh-t7 .t7-dep-art img { max-height: 68px; }
  .sgh-t7 .t7-deps h3 { font-size: var(--fs-body); }
  .sgh-t7 .t7-deps ul { grid-column: 1 / -1; margin-top: 4px; }
  /* brands and solution photographs scroll sideways */
  .sgh-t7 .t7-brands, .sgh-t7 .t7-solcards { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px; }
  .sgh-t7 .t7-brands::-webkit-scrollbar, .sgh-t7 .t7-solcards::-webkit-scrollbar { display: none; }
  .sgh-t7 .t7-brands li, .sgh-t7 .t7-solcards li { flex: 0 0 auto; width: 72%; max-width: 300px; scroll-snap-align: start; }
  .sgh-t7 .t7-brands li.is-lead { grid-column: auto; }
  .sgh-t7 .t7-brands li.is-lead a { display: flex; }
  .sgh-t7 .t7-brands .is-lead .pic { aspect-ratio: 16 / 10; }
  .sgh-t7 .t7-brands .is-lead .pic img { padding: 8px; }
  .sgh-t7 .t7-brands .is-lead .ln { font-size: var(--fs-small); }
  .sgh-t7 .t7-sollist { grid-template-columns: minmax(0, 1fr); }
  .sgh-t7 .t7-biz .h6-biz-list { grid-template-columns: minmax(0, 1fr); }
  .sgh-t7 .t7-biz .t7-steps.is-dark { grid-template-columns: minmax(0, 1fr); }
  .sgh-t7 .t7-biz .t7-steps.is-dark > li { flex-direction: row; align-items: baseline; gap: 12px; padding: 8px 0; border-top-width: 1px; }
}

/* scroll rows keep room for the focus outline */
@media (max-width: 760px) {
  .sgh-t7 .t7-fams ul, .sgh-t7 .t7-types ul, .sgh-t7 .t7-brands, .sgh-t7 .t7-solcards, .sgh-t7 .t7-sel-row ul { padding-block: 4px; }
}
.sgh-t7 .t7-fams a:focus-visible, .sgh-t7 .t7-types a:focus-visible, .sgh-t7 .t7-brands a:focus-visible, .sgh-t7 .t7-solcards a:focus-visible, .sgh-t7 .t7-sollist a:focus-visible, .sgh-t7 .t7-deps a:focus-visible, .sgh-t7 .t7-index a:focus-visible, .sgh-t7 .t7-doclist a:focus-visible, .sgh-t7 .t7-sols a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .sgh-t7 .t7-fams ul, .sgh-t7 .t7-types ul, .sgh-t7 .t7-brands, .sgh-t7 .t7-solcards, .sgh-t7 .t7-sel-row ul { scroll-behavior: auto; }
}

/* Compact category head (sorted, filtered, paged, table view): the same heading, no picture or lead. */
.sgh-t7 .t7-chero.sgh-cl-hero.is-compact { padding: 20px 0 22px; }
.sgh-t7 .t7-chero.is-compact .t7-chero-in { grid-template-columns: minmax(0, 1fr); }
.sgh-t7 .t7-chero.is-compact h1 { font-size: var(--fs-h1); }

/* Type strip: one row at every width; it scrolls sideways when the types do not fit (no 6 + 2 orphan rows). */
.sgh-t7 .t7-types ul { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; padding-bottom: 6px; }
.sgh-t7 .t7-types li { flex: 0 0 128px; scroll-snap-align: start; }

/* =====================================================================================
 * Brand keys b17 (inc/brand-b17.php): accent, section navigation, families, featured models,
 * applications, documents and software. The accent is a hairline, the logo panel ground and the
 * eyebrows of these sections only (its text shade is checked to 4.5:1 in PHP). Buttons stay SGH.
 * ===================================================================================== */
.sgh-t7 .t7-brand.has-accent .t7-bhero { border-top: 3px solid var(--brand-accent-line); }
.sgh-t7 .t7-brand.has-accent .t7-blogo { display: inline-flex; align-items: center; padding: 12px 18px; border-radius: var(--radius-1); background: var(--brand-accent-tint); }
.sgh-t7 .t7-brand.has-accent .b17-sec .t7-head .eyebrow { color: var(--brand-accent-text); }

.sgh-t7 .b17-secnav { background: var(--paper); border-bottom: 1px solid var(--line); }
.sgh-t7 .b17-secnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0 28px; overflow-x: auto; scrollbar-width: none; }
.sgh-t7 .b17-secnav ul::-webkit-scrollbar { display: none; }
.sgh-t7 .b17-secnav li { flex: none; }
.sgh-t7 .b17-secnav a { display: inline-flex; align-items: center; min-height: 48px; border-bottom: 2px solid transparent; font: 600 var(--fs-small)/1.2 var(--sans); color: var(--charcoal); text-decoration: none; white-space: nowrap; }
.sgh-t7 .b17-secnav a:hover { color: var(--ink); border-bottom-color: var(--brand-accent-line, var(--orange-press)); }
.sgh-t7 .b17-secnav a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sgh-t7 .b17-sec, .sgh-t7 #t7-range { scroll-margin-top: 72px; }

.sgh-t7 .b17-fams { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px 24px; }
.sgh-t7 .b17-fams li { min-width: 0; }
.sgh-t7 .b17-fams a, .sgh-t7 .b17-fams .b17-fam { display: grid; grid-template-columns: minmax(0, 1fr) 20px; grid-template-rows: auto 1fr; gap: 12px 8px; height: 100%; padding-bottom: 16px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.sgh-t7 .b17-fams .pic { grid-column: 1 / -1; position: relative; display: block; aspect-ratio: 4 / 3; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-1); overflow: hidden; }
.sgh-t7 .b17-fams .pic img { position: absolute; inset: 12px; display: block; width: calc(100% - 24px); height: calc(100% - 24px); max-width: none; object-fit: contain; }
.sgh-t7 .b17-fams .tx b { display: block; font: 700 var(--fs-h3)/1.3 var(--display); }
.sgh-t7 .b17-fams .tx small { display: block; margin-top: 4px; font-size: var(--fs-small); line-height: 1.5; color: var(--slate); }
.sgh-t7 .b17-fams .icon { align-self: start; margin-top: 3px; width: 18px; height: 18px; color: var(--orange-press); }
.sgh-t7 .b17-fams a:hover b { color: var(--orange-press); text-decoration: underline; text-underline-offset: 3px; }
.sgh-t7 .b17-fams a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.sgh-t7 .b17-featured ul.products { margin-bottom: 0; }

.sgh-t7 .b17-apps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; }
.sgh-t7 .b17-apps.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sgh-t7 .b17-apps.is-1 { grid-template-columns: minmax(0, 1fr); max-width: var(--maxw-text); }
.sgh-t7 .b17-apps li { min-width: 0; padding-top: 16px; border-top: 1px solid var(--line-strong); }
.sgh-t7 .b17-apps .pic { display: block; aspect-ratio: 16 / 10; margin-bottom: 14px; overflow: hidden; border-radius: var(--radius-1); background: var(--ground); }
.sgh-t7 .b17-apps .pic img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sgh-t7 .b17-apps .pic img.is-contain, .sgh-t7 .b17-apps .pic img.is-svg { object-fit: contain; background: var(--paper); }
.sgh-t7 .b17-apps h3 { margin: 0 0 6px; font: 700 var(--fs-h3)/1.3 var(--display); color: var(--ink); }
.sgh-t7 .b17-apps p { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--charcoal); }
.sgh-t7 .b17-apps .t7-more { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-top: 6px; }

.sgh-t7 .b17-res-in.is-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px 56px; align-items: start; }
.sgh-t7 .b17-res h3 { margin: 0 0 8px; font: 700 var(--fs-body)/1.3 var(--display); color: var(--ink); }
.sgh-t7 .b17-res-list + .b17-res-list { margin-top: 28px; }
.sgh-t7 .b17-res-list { scroll-margin-top: 72px; }
.sgh-t7 .b17-res-list ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.sgh-t7 .b17-r { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sgh-t7 .b17-r > .icon { width: 20px; height: 20px; color: var(--charcoal); }
.sgh-t7 .b17-r .tx { min-width: 0; }
.sgh-t7 .b17-r .tx b { display: block; font-weight: 600; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.sgh-t7 .b17-r .tx small { display: block; margin-top: 2px; font-size: var(--fs-micro); line-height: 1.45; color: var(--charcoal); }
.sgh-t7 .b17-r .tx small.f { color: var(--slate); }
.sgh-t7 .b17-r .get { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.sgh-t7 .b17-r .get .icon { width: 16px; height: 16px; }
.sgh-t7 .b17-r .get.is-gated { flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.sgh-t7 .b17-r .get.is-gated .btn-quiet { padding-inline: 0; min-height: 32px; white-space: normal; }
.sgh-t7 .b17-res-docs .t7-doclist { margin-top: 0; }

@media (max-width: 1023px) {
  .sgh-t7 .b17-res-in.is-split { grid-template-columns: minmax(0, 1fr); }
  .sgh-t7 .b17-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .sgh-t7 .b17-secnav ul { gap: 0 20px; }
  .sgh-t7 .b17-fams { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .sgh-t7 .b17-fams a, .sgh-t7 .b17-fams .b17-fam { grid-template-columns: minmax(0, 1fr); }
  .sgh-t7 .b17-fams .icon { display: none; }
  .sgh-t7 .b17-fams .tx b { font-size: var(--fs-body); }
  .sgh-t7 .b17-apps, .sgh-t7 .b17-apps.is-2 { grid-template-columns: minmax(0, 1fr); }
  .sgh-t7 .b17-r { grid-template-columns: 22px minmax(0, 1fr); }
  .sgh-t7 .b17-r .get { grid-column: 2; justify-content: flex-start; }
  .sgh-t7 .b17-r .get.is-gated { align-items: flex-start; text-align: left; }
}