/* ===================== FedRAMP ===================== */

/* hero visual */
.fr-v { width: 100%; max-width: 600px; margin-inline: auto; }
.fr-v__t { font: 600 11.5px var(--sans); fill: #fff; }
.fr-v__s { font: 400 9.5px var(--mono); fill: var(--on-dark-3); }
.fr-v__k { font: 600 9.5px var(--mono); letter-spacing: .14em; fill: var(--gold); }
.fr-v__bound { animation: frDash 30s linear infinite; }
.fr-v__flow { stroke-dasharray: 10 8; animation: frDash 3s linear infinite; }
.fr-v__nodes rect { transition: stroke .3s; }
.fr-v__nodes g:hover rect { stroke: var(--gold); }
@keyframes frDash { to { stroke-dashoffset: -260; } }

/* intro */
.fr-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.fr-intro h2 { max-width: 14ch; }
.fr-pitfalls { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--navy); }
.fr-pitfall { padding: 22px 20px 0 0; display: grid; gap: 8px; align-content: start; }
.fr-pitfall + .fr-pitfall { padding-left: 20px; border-left: 1px solid var(--line); }
.fr-pitfall .mono { font-size: .72rem; color: var(--crit); }
.fr-pitfall strong { font: 600 1.25rem/1.2 var(--sans); }
@media (max-width: 1080px) { .fr-intro { grid-template-columns: 1fr; } .fr-pitfalls { grid-template-columns: 1fr 1fr; } .fr-pitfall, .fr-pitfall + .fr-pitfall { padding: 18px 16px 18px 0; border-left: 0; border-bottom: 1px solid var(--line); } }
@media (max-width: 560px) { .fr-pitfalls { grid-template-columns: 1fr; } }

/* categorizer */
.fr-cat { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border: 1px solid var(--line-cool); border-radius: 0; overflow: hidden; background: var(--white); box-shadow: var(--shadow); }
.fr-cat__in { padding: clamp(22px, 3vw, 36px); display: grid; gap: 18px; }
.fr-cat__presets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line-cool); }
.fr-cat__presets .tag { width: 100%; color: var(--gold-ink); }
.fr-cat__presets button { border: 1px solid var(--line-2); background: var(--ivory); border-radius: 0; padding: 8px 14px; font: 500 .82rem/1.3 var(--sans); color: var(--body); text-align: left; }
.fr-cat__presets button:hover { border-color: var(--navy); }
.fr-cat__presets button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.fr-cat__row { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center; }
.fr-cat__row legend { float: left; font: 600 .95rem/1.3 var(--sans); color: var(--ink); padding: 0; }
.fr-cat__row legend span { display: block; font: 400 .78rem/1.4 var(--sans); color: var(--muted); }
.fr-cat__row label { position: relative; }
.fr-cat__row input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.fr-cat__row label span { display: block; text-align: center; padding: 11px 8px; border-radius: 0; border: 1px solid var(--line-2); font: 600 .84rem/1 var(--sans); color: var(--body); transition: all .2s; }
.fr-cat__row input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.fr-cat__row input[value="H"]:checked + span { background: var(--crit); border-color: var(--crit); }
.fr-cat__row input[value="M"]:checked + span { background: var(--med); border-color: var(--med); }
.fr-cat__row input:focus-visible + span { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
.fr-cat__li { display: flex; gap: 10px; align-items: center; font-size: .88rem; color: var(--body); }
.fr-cat__li input { width: 18px; height: 18px; accent-color: var(--navy); }
.fr-cat__out { padding: clamp(22px, 3vw, 36px); background: var(--navy); color: var(--on-dark-2); display: grid; gap: 12px; align-content: start; }
.fr-cat__out .tag { color: var(--gold); }
.fr-cat__sc { font-size: .78rem; color: var(--on-dark-3); max-width: none; }
.fr-cat__meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.fr-cat__meter i { height: 8px; border-radius: 0; background: rgba(255,255,255,.1); transition: background .4s var(--ease); }
.fr-cat__meter i.on { background: var(--gold); }
.fr-cat__meter i.on.lvl-H { background: #E0664F; }
.fr-cat__res { font-size: .9rem; }
.fr-cat__res strong { color: #fff; }
.fr-cat__out h3 { color: #fff; font-size: clamp(1.6rem, 1.3rem + .8vw, 2.2rem); }
.fr-cat__out .fine { color: var(--on-dark-3); }
@media (max-width: 960px) { .fr-cat { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .fr-cat__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fr-cat__row legend { grid-column: 1 / -1; float: none; margin-bottom: 4px; } }

/* paths */
.fr-path { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.fr-path__intro .lead { color: var(--on-dark-2); }
.fr-path__intro .fine { margin-top: 16px; padding: 14px 16px; border-radius: 0; border: 1px solid rgba(91,155,255,.3); background: rgba(91,155,255,.06); color: #E8DCC6; }
.fr-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: s; }
.fr-steps li { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: 0; background: var(--navy-2); border: 1px solid var(--line-dark); position: relative; transition: border-color .3s, transform .3s var(--ease); }
.fr-steps li:hover { border-color: rgba(91,155,255,.5); transform: translateY(-2px); }
.fr-steps .mono { font-size: .72rem; color: var(--gold); }
.fr-path--20x .fr-steps .mono { color: #B79CFB; }
.fr-steps strong { font: 600 1.25rem/1.2 var(--sans); color: #fff; }
.fr-steps span:last-child { font-size: .88rem; color: var(--on-dark-2); }
@media (max-width: 1080px) { .fr-path { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .fr-steps { grid-template-columns: 1fr; } }