/* F02-only additions. Shared product styles and all master images stay unchanged. */
.f02-page .hero-grid{grid-template-columns:minmax(0,1fr)}
.f02-page .hero-media img{object-fit:contain}
.f02-page .hero-media figcaption{font-size:.85rem}
.f02-page .product-hero h1{font-size:clamp(2.1rem,6vw,4.8rem);line-height:1.05;max-width:19ch}
.f02-page .body-grid{grid-template-columns:minmax(0,1fr)}
.f02-page h2{font:600 clamp(1.7rem,4vw,2.8rem)/1.12 var(--font-display);letter-spacing:-.04em;overflow-wrap:anywhere}
.f02-page h3{font:600 1.25rem/1.3 var(--font-display)}
.f02-reading-nav{display:flex;flex-wrap:wrap;gap:.25rem 1rem;padding-block:1rem}
.f02-reading-nav a{display:inline-flex;align-items:center;min-height:2.75rem;text-underline-offset:.2em}
.f02-page section[id]{scroll-margin-top:6rem}
.f02-page .hero-actions .button{white-space:normal;text-align:center;padding-block:.6rem}
.f02-page .f02-download-grid .button{max-width:100%;white-space:normal;text-align:center;padding:.6rem .8rem}
.f02-input-grid,.f02-download-grid{display:grid;gap:1.5rem;margin-block-start:2rem}
.f02-diagram{margin:0;padding:1.25rem;background:var(--color-paper-2);min-width:0}
.f02-diagram svg{display:block;width:100%;max-width:360px;height:auto;margin-inline:auto}
.f02-diagram figcaption{font-size:.9rem;margin-block-start:1rem}
.f02-reference-list{margin:0}
.f02-reference-list>div{padding-block:1rem;border-block-end:1px solid var(--color-rule)}
.f02-reference-list dt{font-weight:600}
.f02-reference-list dd{margin:.35rem 0 0;color:var(--color-muted)}
.f02-downloads{background:var(--color-paper-2)}
.f02-download-grid>div{padding:1.25rem;border:1px solid var(--color-rule);background:var(--color-surface);min-width:0}
.f02-download-grid h3{margin:0}
.f02-page .faq-list summary{padding-inline-start:1.25rem}
.f02-page #planning-guides .plain-list li{display:block}
.f02-page #planning-guides .plain-list li::before{display:inline-block;margin-inline-end:.7rem;vertical-align:middle}
.f02-page a:focus-visible{outline:2px solid var(--color-accent-deep);outline-offset:3px}
@media(hover:hover) and (pointer:fine){.f02-page .button:hover{background:var(--color-accent-deep);color:var(--color-on-dark)}}
@media(min-width:40rem){.f02-input-grid,.f02-download-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.f02-page .hero-media{width:min(100%,800px);margin-inline:auto}}
@media(min-width:64rem){.f02-page .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}.f02-page .body-grid{grid-template-columns:minmax(0,.8fr) minmax(24rem,1.2fr)}}
.f02-boundary{padding:1rem;border-inline-start:3px solid var(--color-signal);background:var(--color-paper-2)}
.f02-diagram .shape{fill:var(--color-surface);stroke:var(--color-ink);stroke-width:2}
.f02-diagram .scope{fill:none;stroke:var(--color-accent-deep);stroke-width:2;stroke-dasharray:5 4}
.f02-diagram .direction{fill:none;stroke:var(--color-accent-deep);stroke-width:3}
.f02-diagram text{fill:var(--color-ink);font:18px Arial,sans-serif}
.f02-diagram h3{margin:.5rem 0}

.f02-diagram .support{fill:none;stroke:var(--color-ink);stroke-width:5}
@media(min-width:64rem){.f02-input-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}