/* MOD presentation polish: use BUY's readable panels and hierarchy without changing content. */
.mod-intro{padding-top:clamp(30px,5vw,56px)}
.mod-explainer{border-radius:6px;max-width:960px}
.mod-choice{border-radius:6px}
.mod-choice .css-instrument{width:clamp(48px,5.5vw,64px);height:clamp(48px,5.5vw,64px);margin:0 auto 12px}
.mod-choice .css-instrument svg{width:68%;height:68%}
.mod-choice:hover .css-instrument,.mod-choice:focus-visible .css-instrument{box-shadow:0 0 9px rgba(132,255,72,.16),inset 0 0 5px rgba(132,255,72,.08)}
.mod-section{scroll-margin-top:90px}
.mod-section .resource-list>a,.mod-section .resource-list>div{border-radius:5px}
@media(max-width:700px){.mod-intro{padding-top:28px}.mod-explainer{padding:16px 18px}.mod-choice .css-instrument{margin-bottom:8px}}

/* Keep each choice's icon, heading and single description in separate grid cells.
   The base MOD grid otherwise auto-places copy beside the heading on phones. */
.mod-choice{grid-template-rows:auto auto;align-content:start}
.mod-choice>.css-instrument{grid-column:1;grid-row:1;align-self:center;margin:0}
.mod-choice>strong{grid-column:2;grid-row:1;align-self:center;min-width:0}
.mod-choice>small{grid-column:1/-1;grid-row:2;min-width:0;margin-top:10px;line-height:1.4;overflow-wrap:break-word}

/* Match BUY's framed Spec Deck introduction without changing MOD navigation or choices. */
.mod-intro{max-width:980px;margin:24px auto 24px;padding:24px 26px;background:rgba(8,13,9,.95);border:1px solid var(--line);box-shadow:7px 10px 24px var(--shadow);text-align:left}
.mod-intro>.kicker{display:flex;align-items:center;gap:9px;text-shadow:none}
.mod-intro>.kicker .css-section-icon{margin-right:0}
.mod-intro>h1,.mod-intro>.tagline{margin-left:0;text-shadow:none;-webkit-text-stroke:0}
.mod-intro>.tagline{max-width:none;margin-top:12px}
.mod-intro-explainer{max-width:800px;margin:12px 0 0;color:var(--muted);font-size:1rem;line-height:1.45;font-weight:700}
@media(max-width:620px){.mod-intro{margin:14px auto 20px;padding:18px}}