/* T11 Guide / article with product blocks (Figma 9:568). Page layout only; tokens from css/v2. */
.g11-head { display: grid; gap: 14px; padding-top: 24px; padding-bottom: 48px; }
.g11-head h1 { max-width: 880px; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); line-height: 1.08; }
.g11-head .psb-lead { max-width: 880px; }
.g11-kicker { color: var(--text-brand); margin-top: 8px; }
.g11-head .psb-disclosure { margin-top: 12px; }

.g11-layout { padding-bottom: 72px; grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 48px; }
.g11-toc-h { font-size: var(--fs-caption) !important; color: var(--text-muted); margin-bottom: 4px !important; }
.g11-body { max-width: 694px; }
.g11-body > h2 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); scroll-margin-top: 100px; }
.g11-hero { margin: 0; }
.g11-hero .psb-media svg.psb-shroom { width: 14%; }
.g11-hero .psb-media__src { font-size: 12px; }

/* gear box: rows get tight in a 694 px column - stack the side column */
.g11-gear { display: grid; gap: 0; background: var(--bg-shop); border-radius: var(--radius-card); }
.g11-gear .psb-gearbox { padding-bottom: 12px; }
.g11-gear .psb-gearbox h4 { font-size: 20px; color: var(--text-primary); }
.g11-gear .psb-row { grid-template-columns: auto 120px minmax(0, 1fr) auto; }
.g11-gear__more { padding: 0 24px 24px 46px; font-size: var(--fs-body-s); font-weight: 700; color: var(--text-brand); }

.g11-tool { display: grid; gap: 20px; padding: 26px 24px; border-radius: var(--radius-card); background: var(--pine-700); color: var(--cream-50); font-size: var(--fs-body); }
.g11-tool__head { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-start; }
.g11-tool .psb-overline { color: var(--tomato-500); }
.g11-tool h3 { margin: 4px 0 0; font: 700 21px/1.3 var(--font-body); color: var(--cream-50); }
.g11-tool .psb-btn--secondary { background: var(--cream-0); color: var(--ink-900) !important; border-color: var(--ink-900); }
.g11-tool__vals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0 14px; }
.g11-tool__vals dt { font-size: 12px; color: var(--cream-100); }
.g11-tool__vals dd { margin: 2px 0 0; font: 500 20px/1.2 var(--font-mono); color: var(--butter-500); }
@media (max-width: 600px) { .g11-tool__vals { grid-template-columns: 1fr 1fr; padding: 0; } }

.g11-body .psb-pick { font-size: var(--fs-body); }
.g11-body .psb-pick .psb-media { max-width: 140px; }
.g11-safe { padding: 22px 20px; border-radius: 20px; background: var(--sky-100); }
.g11-safe .psb-overline { color: var(--sky-600); margin-bottom: 6px !important; font-family: var(--font-body); }
.g11-safe p { font-size: var(--fs-body); color: var(--ink-700); }

/* rail: compact product rows */
.g11-rail { --gap: 20px; }
.g11-shop { gap: 14px; }
.g11-shop .psb-rows { gap: 12px !important; }
.g11-shop .psb-row { grid-template-columns: 56px minmax(0, 1fr); gap: 4px 12px; padding: 0; border: 0; box-shadow: none; background: none; }
.g11-shop .psb-row__rank, .g11-shop .psb-row .psb-badge, .g11-shop .psb-row .psb-caption, .g11-shop .psb-row .psb-price { display: none; }
.g11-shop .psb-row .psb-media { grid-row: span 2; border-radius: 28px 28px 12px 12px; }
.g11-shop .psb-row .psb-media svg.psb-shroom { width: 70%; }
.g11-shop .psb-row__body { gap: 0; }
.g11-shop .psb-card__title { font-size: 14px; line-height: 1.35; }
.g11-shop .psb-row__side { grid-column: 2; grid-auto-flow: column; justify-content: space-between; align-items: center; justify-items: start; gap: 8px; }
.g11-shop .psb-row__score { font: 400 13px/1 var(--font-mono); color: var(--text-brand); }
.g11-shop .psb-row__side .psb-btn { padding: 4px 10px; font-size: 11px; box-shadow: none; }
.g11-next { border-color: transparent; }
.g11-next p { font-size: var(--fs-body-s); color: var(--ink-700); }
.g11-next .psb-btn--ghost { justify-content: flex-start; color: var(--pine-700) !important; }

.g11-card-h { font: 700 20px/1.35 var(--font-body) !important; }
.g11-related .psb-article:hover .g11-card-h { text-decoration: underline; }

@media (max-width: 1100px) {
  .g11-layout { grid-template-columns: 1fr; }
  .g11-body { max-width: 760px; }
  .g11-rail { max-width: 760px; }
}
@media (max-width: 700px) {
  .g11-gear .psb-row { grid-template-columns: 72px minmax(0, 1fr); }
  .g11-gear .psb-gearbox { padding: 16px; }
  .g11-gear__more { padding: 0 16px 20px; }
  .g11-body .psb-pick .psb-media { max-width: 120px; }
}

/* Page-local workarounds for shared specificity issues (".psb h2/h3/p" beat
   single-class components). Candidates for templates.css - see report. */
.psb h2.psb-overline, .psb h3.psb-overline { font: 700 var(--fs-caption)/1.33 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.psb h3.psb-card__title { font: 700 19px/1.32 var(--font-body); }
.psb .psb-disclosure { display: block; }
.psb .psb-disclosure::before { margin-right: 8px; }
.psb .g11-body > * + * { margin-top: 1em; }
.psb .g11-body > h2 { margin-top: 1.7em; }
.psb .g11-body > figure + h2 { margin-top: 1.2em; }
.psb .g11-gear .psb-card__title { font-size: 17px; }
.psb .g11-shop .psb-card__title { font-size: 14px; line-height: 1.35; }
.psb .g11-safe h3 { margin: 0 0 6px; }
.psb .g11-tool h3 { margin: 4px 0 0; }
.psb .g11-shop .psb-row__side { grid-auto-flow: row; justify-content: start; }
.psb .g11-next .psb-overline { color: var(--pine-700); }
.psb a.psb-article { color: var(--text-primary); }
.psb-article .psb-media svg.psb-shroom { width: 30%; }
@media (max-width: 600px) { .g11-head .psb-byline > span[aria-hidden="true"]:not(.psb-avatar) { display: none; } .g11-head .psb-byline { gap: 4px 12px; } }
@media (max-width: 600px) { .psb .psb-grid { --cols: 1 !important; } } /* components.css :not() rule outranks its own 600px rule */

/* Round 3 (Figma 9:568): key takeaways, reviewer tick, troubleshooter callout, next step */
.g11-reviewed { color: var(--text-brand); font-weight: 600; }
.g11-takeaways { padding: 20px 22px; border: var(--stroke); border-radius: 20px; background: var(--butter-100); color: var(--ink-900); }
.g11-takeaways .psb-overline { margin-bottom: 8px !important; font-family: var(--font-body); color: var(--ink-700); }
.g11-takeaways ul { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: 8px; font-size: var(--fs-body); }
.g11-takeaways li { display: flex; gap: 10px; color: var(--ink-900); }
.g11-takeaways li::before { content: "✓"; font-weight: 700; color: var(--pine-500); }
.g11-diag { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 20px; border: var(--stroke); border-radius: 20px; background: var(--sky-300); color: var(--ink-900); }
.psb .g11-diag h3 { margin: 0 0 4px; font: 700 var(--fs-h5)/1.3 var(--font-body); color: var(--ink-900); }
.g11-diag p { font-size: var(--fs-body-s); color: var(--ink-700); }
.g11-nextstep { display: grid; gap: 8px; justify-items: start; margin-top: 2em !important; padding: 22px; border-radius: 20px; background: var(--pine-100); color: var(--ink-900); }
.g11-nextstep .psb-overline { color: var(--pine-700); font-family: var(--font-body); }
.g11-nextstep p { color: var(--ink-900); }
.g11-nextstep .psb-btn--secondary { background: var(--cream-0); color: var(--ink-900) !important; border-color: var(--ink-900); }
@media (max-width: 600px) { .g11-diag { grid-template-columns: 1fr; } .g11-diag .psb-btn { width: 100%; } }