.rf-hero { background: radial-gradient(ellipse at 90% 15%, #316675, transparent 65%), #102b3c; }
.rf-hero h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
.rf-hero .hero-grid { min-height: auto; padding-block: 6.5rem 4rem; }
.rf-hero-answer { max-width: 40rem; color: #b5eee3; font-weight: 750; }
.rf-summary { padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid #678f9d; border-radius: var(--radius); background: #102d3d; }
.rf-summary dl { margin: 0; }
.rf-summary dl > div { padding-block: 1rem; border-top: 1px solid #426779; }
.rf-summary dt { color: #b6ece5; font-size: 1.2rem; font-weight: 800; }
.rf-summary dd { margin: .4rem 0 0; color: #e2edf1; }
.rf-summary > p:last-child { margin-bottom: 0; color: #b8cfd8; font-size: .9rem; }
.rf-tint { background: #f0f6f7; }
.rf-columns, .rf-comparison { display: grid; gap: 2rem; align-items: center; }
.rf-dossier .section p { max-width: 68ch; }
.rf-source { margin-top: 1.25rem; color: var(--muted); font-size: .85rem; }
.rf-source a, .rf-comparison a { color: #135d73; text-underline-offset: .2em; }
.rf-comparison { align-items: stretch; margin-block: 2rem; }
.rf-comparison article { padding: 1.5rem; border: 1px solid var(--line); border-radius: 1rem; background: #fff; }
.rf-comparison article p { margin-bottom: 0; color: #3c5563; }
.rf-comparison article a { display: inline-block; margin-top: 1rem; font-size: .85rem; }
.rf-guideline { display: grid; gap: .5rem; padding: 1.5rem; margin-block: 1.5rem; border-left: 4px solid #16837a; border-radius: .8rem; background: #edf8f6; }
.rf-guideline strong { color: #125c66; font-size: clamp(1.4rem, 4vw, 2.2rem); }
.rf-guideline span { color: #385963; }
.rf-spectrum-direction { color: #375b70; font-weight: 750; }
.rf-spectrum { display: grid; gap: .65rem; padding: 0; margin: 1.5rem 0; list-style: none; }
.rf-spectrum li { position: relative; display: grid; align-content: start; gap: .7rem; min-width: 0; min-height: 8rem; padding: 1.1rem; border: 1px solid #a6cfc9; border-top: 4px solid #16837a; border-radius: .75rem; background: #e8f6f2; }
.rf-spectrum li > span { color: #17645d; font-size: .65rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.rf-spectrum li > strong { color: #183b4e; line-height: 1.2; }
.rf-spectrum em { color: #315e66; font-size: .8rem; font-style: normal; }
.rf-spectrum .rf-uv { border-color: #ccae70; background: #faf3e3; }
.rf-spectrum .rf-uv > span { color: #72550e; }
.rf-spectrum .rf-ion { border-color: #97a7d2; background: #edf0fa; }
.rf-spectrum .rf-ion > span { color: #435282; }
.rf-note { padding: 1rem 1.25rem; border-left: 3px solid #9f7e34; color: #4b5660; background: #fff; font-size: .9rem; }
.rf-document-slot { margin: 0; overflow: hidden; padding: 1.5rem; border: 1px solid #b5ccd2; border-radius: var(--radius); background: #e6eff1; }
.rf-slot-pattern { height: 4rem; margin-bottom: 1.5rem; background: repeating-linear-gradient(90deg, #bacdd2 0 1px, transparent 1px 1.5rem), repeating-linear-gradient(0deg, #bacdd2 0 1px, transparent 1px 1.5rem); }
.rf-document-slot strong { color: #214f60; font-size: 1.05rem; }
.rf-document-slot p { margin-bottom: 0; color: #43616b; font-size: .87rem; }
.rf-logic { color: #fff; background: #102e3e; }
.rf-logic .eyebrow { color: #a8eee6; }
.rf-examples { display: grid; gap: .75rem; padding: 0; margin: 2rem 0; list-style: none; }
.rf-examples li { display: grid; gap: .4rem; padding: 1rem; border: 1px solid #5b8594; border-radius: .75rem; }
.rf-examples span { color: #b4d3df; font-size: .8rem; }
.rf-logic > .shell > p:last-child { color: #d5e4ea; font-size: 1.1rem; }
.rf-source-note { margin: 0; padding: 0 1rem 1rem; color: var(--muted); font-size: .85rem; }
@media (min-width: 48rem) {
    .rf-columns, .rf-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rf-spectrum { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .rf-examples { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 70rem) { .rf-spectrum { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (max-width: 47.99rem) {
    .rf-spectrum-direction span { display: inline-block; transform: rotate(90deg); }
    .rf-spectrum li { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); min-height: auto; }
    .rf-spectrum em { grid-column: 2; }
    .rf-hero .hero-grid { padding-top: 6rem; }
}