/* ARMY RESERVE — active / reserve visual comparison (flagship) */

.rs-hero { background: var(--abyss); color: var(--fg); padding-top: clamp(2rem, 4vw, 3.2rem); padding-bottom: clamp(3rem, 6vw, 5rem); position: relative; overflow: hidden; }
.rs-hero .crumbs { margin-bottom: clamp(2.2rem, 5vw, 4rem); }
.rs-hero__title { max-width: 17ch; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.rs-hero__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.8rem 4rem; align-items: end; padding-bottom: clamp(2.4rem, 5vw, 4rem); }
.rs-hero__row .lead { max-width: 60ch; margin: 0; }
@media (min-width: 1000px) { .rs-hero__row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .rs-hero__row .btns { justify-content: flex-end; } }
@media (max-width: 480px) { .rs-hero__row .btn { width: 100%; } }

/* Tiers */
.tiers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.6rem 5rem; align-items: center; }
@media (min-width: 1000px) { .tiers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.rings { max-width: 520px; width: 100%; margin-inline: auto; }
.rings svg { width: 100%; height: auto; }
.rings figcaption { margin-top: 12px; text-align: center; font: 400 .66rem/1.5 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.ring { stroke: var(--line-l2); stroke-width: 1; cursor: pointer; transition: fill .45s var(--ease), stroke .45s; }
.ring--territorial { fill: #EFE8DB; }
.ring--specialist { fill: #E6DCCB; }
.ring--reserve { fill: #D9CBB4; }
.ring--active { fill: var(--abyss); stroke: var(--abyss); }
.rings__axis path { stroke: var(--ink); stroke-opacity: .12; stroke-dasharray: 2 5; }
.rings__lbl { font: 500 11px var(--f-mono); letter-spacing: .14em; fill: var(--ink-2); pointer-events: none; }
.rings__lbl:first-of-type, .rings__lbl--s { fill: var(--copper-lt); }
.rings__lbl--s { font-size: 9px; }
.rings[data-active="territorial"] .ring--territorial,
.rings[data-active="specialist"] .ring--specialist,
.rings[data-active="reserve"] .ring--reserve { fill: var(--copper-lt); stroke: var(--copper-dp); }
.rings[data-active="active"] .ring--active { fill: var(--copper-dp); stroke: var(--copper-dp); }
.rings[data-active="active"] .rings__lbl:first-of-type, .rings[data-active="active"] .rings__lbl--s { fill: var(--paper); }

.tiers__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--rule-2); }
.tiers__tabs [role="tab"] { padding: 14px 14px; margin: 0; text-align: left; background: transparent; border: 0; border-right: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); cursor: pointer; font: 600 .78rem/1.3 var(--f-display); font-stretch: 110%; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); transition: background-color .2s, color .2s; }
.tiers__tabs [role="tab"]:hover { color: var(--fg); background: var(--ivory); }
.tiers__tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: var(--copper-lt); }
@media (min-width: 1200px) { .tiers__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tiers__body { padding: 28px 0 0; }
.tiers__body:focus-visible { outline-offset: 6px; }
.tiers__k { margin: 0 0 .4rem; font: 400 .7rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }
.tiers__body > p:not(.tiers__k) { color: var(--fg-2); max-width: 56ch; }
.tiers__body .bullets { margin-top: 1.2rem; }

/* Comparison */
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; min-width: 560px; border-collapse: collapse; }
.cmp th, .cmp td { text-align: left; padding: 18px 20px 18px 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.cmp thead th { font: 500 .7rem/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acc); border-bottom: 2px solid var(--ink); }
.cmp tbody th { font: 600 1rem/1.35 var(--f-display); width: 28%; }
.cmp td { color: var(--fg-2); width: 36%; }
.cmp tbody td:last-child { color: var(--fg); }

/* Advantages */
.adv__grid { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--rule-2); }
.adv__grid li { padding: 26px 0 28px; border-bottom: 1px solid var(--rule); }
.adv__grid span { font: 400 .7rem/1 var(--f-mono); letter-spacing: .12em; color: var(--acc); display: block; margin-bottom: 1rem; }
.adv__grid h3 { margin-bottom: .4rem; font-size: 1.25rem; }
.adv__grid p { color: var(--fg-2); margin: 0; max-width: 42ch; }
@media (min-width: 700px) { .adv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
@media (min-width: 1100px) { .adv__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }