/* Shared conversion block: wraps long translated labels without hiding controls. */
.install-cta{margin-block:1.25rem;padding:1rem;border:1px solid currentColor;border-radius:1rem;max-width:100%;overflow-wrap:anywhere}.install-cta p{margin-block:.35rem .75rem}.install-cta .hero-links{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.install-cta a{white-space:normal}.install-cta small{font-size:.875rem}

.prose .install-cta a.button{color:#001016;font-weight:800}.prose .install-cta a.button-secondary{color:var(--ink)}

/* Long homepage translations keep the first action close to the introduction. */
@media(max-width:600px){html:not([lang="en"]) .home-hero h1{font-size:clamp(2.35rem,11vw,3rem);hyphens:auto}html:not([lang="en"]) .home-hero{padding-top:40px}}

/* A translated consent panel must not cover the final links or focused controls. */
html{scroll-padding-bottom:var(--consent-panel-clearance,0px)}body{padding-bottom:var(--consent-panel-clearance,0px)}.analytics-consent{max-height:50vh;max-height:50dvh;overflow-y:auto;overscroll-behavior:contain}

/* Homepage fact sheet and priority links: one-hop crawl paths to the strongest pages. */
.brand-facts .fact-list{display:grid;gap:.5rem 1.5rem;margin:1.25rem 0}.brand-facts .fact-list div{display:grid;grid-template-columns:minmax(8rem,11rem) 1fr;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line,rgba(127,127,127,.25))}.brand-facts dt{font-weight:600}.brand-facts dd{margin:0}.brand-facts ul{padding-left:1.2rem}@media(max-width:600px){.brand-facts .fact-list div{grid-template-columns:1fr;gap:.2rem}}
.priority-grid{display:grid;gap:1.5rem 2rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}.priority-grid h3{font-size:1rem;margin:0 0 .6rem}.priority-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}.priority-grid a{text-decoration:underline;text-underline-offset:.18em}

/* Mobile conversion fixes (audit 2026-10-01). Decorative halos must never widen the page. */
html{overflow-x:clip}
.desktop-nav a,.mobile-nav a,.breadcrumbs a,.article-meta a,.footer-grid a,.priority-grid a{min-height:44px;display:inline-flex;align-items:center}
.breadcrumbs{align-items:center}
@media(max-width:620px){
body{font-size:16px}
.analytics-consent{right:8px;bottom:8px;width:calc(100% - 16px);padding:14px 16px;gap:10px}
.analytics-consent p{font-size:.8rem;line-height:1.4}
.analytics-consent-actions .button{flex:1 1 120px;min-height:44px}
.analytics-consent-actions a{min-height:44px;display:inline-flex;align-items:center}
.article-hero .hero-links,.comparison-hero .hero-links,.page-hero .hero-links{margin-top:12px}
}

/* Guide diagrams (components/diagrams/*.njk): one shared visual language. */
.guide-diagram{margin:2rem 0;padding:1.25rem 1rem 1rem;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel)}
.guide-diagram .diagram-svg{display:block;width:100%;max-width:520px;height:auto;margin:0 auto;color:var(--ink-soft);overflow:visible}
.diagram-svg text{fill:var(--ink);font:600 14px var(--font);text-anchor:middle;dominant-baseline:middle}
.diagram-svg .dg-sub{fill:var(--muted);font-weight:400;font-size:11.5px}
.diagram-svg .dg-head{fill:var(--teal);font-size:12.5px;letter-spacing:.02em}
.diagram-svg .dg-label,.diagram-svg .dg-key{fill:var(--muted);font-weight:500;font-size:12px}
.diagram-svg .dg-legend .dg-key{text-anchor:start}
.diagram-svg .dg-rowlabel text{fill:var(--ink-soft);font-weight:500;font-size:12px}
.dg-node rect,.dg-cell rect{fill:var(--panel-raised);stroke:var(--line-strong);stroke-width:1.5}
.dg-risk rect,.dg-swatch-risk{stroke:var(--warning)}
.dg-swatch-risk{fill:rgba(245,201,117,.25)}
.dg-warn rect{stroke:var(--warning);stroke-dasharray:4 3}
.dg-vault rect{stroke:var(--teal);fill:rgba(41,225,221,.08)}
.dg-swatch-vault{fill:rgba(41,225,221,.35);stroke:var(--teal)}
.dg-cell text{font-size:12.5px}
.dg-flow,.dg-flow path{fill:none;stroke:currentColor;stroke-width:1.5;opacity:.6}
.guide-diagram figcaption{margin:.85rem auto 0;max-width:46ch;color:var(--muted);font-size:.9rem;line-height:1.5;text-align:center}

/* Numbered procedures in guides render as step cards. */
.guide-prose ol{list-style:none;counter-reset:step;padding-left:0;margin:1.25rem 0;display:grid;gap:.75rem}
.guide-prose ol>li{counter-increment:step;position:relative;padding:.85rem 1rem .85rem 3.4rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel)}
.guide-prose ol>li::before{content:counter(step);position:absolute;left:.9rem;top:.8rem;width:1.75rem;height:1.75rem;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.85rem;color:var(--midnight);background:var(--teal)}