/* Approved navy class-guide template, scoped to the new static pages. */
html:has(body.class-guide){scroll-behavior:auto}
body.class-guide{overflow-x:visible;--gold:#dfc195}
.class-guide .wrap{max-width:1200px;padding-inline:36px}
.class-guide .atlas-nav-links{gap:24px}
.class-guide .class-hero{border-bottom:1px solid var(--line);background:linear-gradient(90deg,#0d1323 5%,#0d1323ee 55%,#0d1323aa),url('/assets/art/citadel.jpg') center 48%/cover}
.class-guide .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:50px;align-items:center;padding-block:56px}
.class-guide h1{font-size:clamp(38px,5vw,60px);line-height:1.08;letter-spacing:-.045em;margin:15px 0}
.class-guide .eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:.15em;font-size:12px;font-weight:700}
.class-guide .class-lead{font-size:18px;line-height:1.7;color:#d4dcef;max-width:650px}
.class-guide .pills{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0}
.class-guide .pills span{border:1px solid #526987;border-radius:100px;padding:5px 12px;color:#cfddf5;font-size:13px}
.class-guide figure{margin:0;min-width:0}
.class-guide .hero-art,.class-guide .directory-art{width:260px;aspect-ratio:1;border:1px solid #7184a5;border-radius:10px;background-image:url('/assets/art/archetypes.jpg');background-size:400% 200%;box-shadow:0 18px 55px #0007}
.class-guide figcaption{font-size:12px;color:var(--text-dim);margin-top:8px}
.class-guide .class-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:24px}
.class-guide .class-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 17px;border-radius:8px;text-decoration:none;font-size:14px;line-height:1.5;font-weight:700;background:#a7c6fb;color:#10182b;max-width:100%;overflow-wrap:anywhere}
.class-guide .class-button.secondary{background:#18243b;color:#dce8fd;border:1px solid #536785}
.class-guide .class-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:44px;padding-block:38px 75px}
.class-guide .class-toc{align-self:start;position:sticky;top:18px;border:1px solid var(--line);background:var(--surface);padding:20px;border-radius:10px}
.class-guide .class-toc strong{font-size:13px;text-transform:uppercase;letter-spacing:.1em}
.class-guide .class-toc a{display:flex;align-items:center;min-height:44px;color:var(--text-dim);text-decoration:none;font-size:14px}
.class-guide .class-content{min-width:0;max-width:850px}
.class-guide h2{font-size:26px;letter-spacing:-.02em;margin:0 0 12px;line-height:1.3}
.class-guide h3{font-size:17px;margin:0 0 8px;line-height:1.4}
.class-guide section{padding-bottom:37px;margin-bottom:38px;border-bottom:1px solid var(--line);scroll-margin-top:20px}
.class-guide p,.class-guide li{color:#cad4e8}
.class-guide .section-intro{font-size:17px}
.class-guide .class-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.class-guide .class-fact,.class-guide .class-contrast,.class-guide .class-note{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:20px}
.class-guide .class-fact small{color:var(--gold);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em}
.class-guide .class-fact h3{margin-top:8px}
.class-guide .class-fact p{font-size:14px;margin:8px 0 0}
.class-guide .class-contrast{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.class-guide .class-contrast>div+div{border-left:1px solid var(--line);padding-left:20px}
.class-guide .class-contrast p{font-size:15px;margin:0}
.class-guide .class-steps{display:grid;gap:20px;padding:0;list-style:none;counter-reset:item}
.class-guide .class-steps li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px}
.class-guide .class-steps li:before{counter-increment:item;content:counter(item);color:var(--accent);border:1px solid #425775;border-radius:50%;width:30px;height:30px;display:grid;place-items:center;font-size:13px}
.class-guide .class-steps p{margin:0}
.class-guide .class-faq details{border-bottom:1px solid var(--line);padding-block:8px}
.class-guide .class-faq summary{cursor:pointer;font-weight:650;min-height:44px;padding-block:10px}
.class-guide .class-faq p{margin:12px 0}
.class-guide .class-cta{background:linear-gradient(125deg,#263956,#18233a);border:1px solid #526988;border-radius:12px;padding:28px}
.class-guide .class-footer-links{display:flex;flex-wrap:wrap;gap:0 20px}
.class-guide .class-footer-links a,.class-guide .directory-card .class-actions>a:not(.class-button){display:inline-flex;align-items:center;min-height:44px}
.class-guide .site-footer{font-size:13px}
.class-guide .index-hero{padding-block:48px}
.class-guide main.directory-main,.class-guide main.rankings-main{padding-block:32px 56px}
.class-guide .class-directory{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-block:28px}
.class-guide .directory-card{display:flex;gap:20px;border:1px solid var(--line);background:var(--surface);padding:20px;border-radius:10px;min-width:0}
.class-guide .directory-card>div:last-child{min-width:0}
.class-guide .directory-art{width:100px;height:100px;flex:0 0 100px}
.class-guide .directory-card h2 a{display:inline-flex;align-items:center;min-height:44px}
.class-guide .rankings-main{max-width:1000px}
.class-guide .ranking-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.class-guide table{width:100%;border-collapse:collapse;margin:0;background:var(--surface);font-variant-numeric:tabular-nums}
.class-guide caption{text-align:left;color:var(--text-dim);font-size:14px;padding:16px}
.class-guide th,.class-guide td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.class-guide thead th{font-size:14px;background:#1b2942}
.class-guide tbody th a{display:inline-flex;align-items:center;min-height:44px}
.class-guide td{white-space:nowrap}
@media(max-width:1000px){.class-guide .class-directory{grid-template-columns:1fr}.class-guide .atlas-nav{flex-wrap:wrap;gap:0;padding-block:10px}.class-guide .atlas-nav-links{width:100%;justify-content:space-between;gap:12px}}
@media(max-width:760px){.class-guide .wrap{padding-inline:18px}.class-guide .hero-grid{grid-template-columns:minmax(0,1fr) 105px;gap:14px;padding-block:32px}.class-guide .hero-art{width:105px}.class-guide .class-lead{font-size:16px}.class-guide .class-layout{display:block;padding-block:24px 50px}.class-guide .class-toc{position:static;margin-bottom:30px}.class-guide .class-toc a{display:inline-flex;margin-right:15px}.class-guide .class-facts{grid-template-columns:1fr}.class-guide .class-contrast{grid-template-columns:1fr}.class-guide .class-contrast>div+div{border-left:0;border-top:1px solid var(--line);padding:18px 0 0}.class-guide h2{font-size:23px}.class-guide .class-hero{background-image:linear-gradient(90deg,#0d1323 5%,#0d1323ee 55%,#0d1323aa),url('/assets/art/citadel-mobile.jpg')}.class-guide .class-fact{padding:18px}.class-guide .index-hero{padding-block:32px}.class-guide .atlas-nav-links{gap:8px}.class-guide .directory-card{padding:18px;flex-direction:column}.class-guide .directory-art{flex-basis:100px}.class-guide th,.class-guide td{padding:8px}.class-guide .ranking-scroll table{min-width:420px}}
@media(max-width:430px){.class-guide .hero-grid{grid-template-columns:minmax(0,1fr)}.class-guide .hero-art{width:110px}.class-guide figcaption{max-width:220px}.class-guide h1{font-size:38px}.class-guide .class-cta{padding:20px}}
@media(prefers-reduced-motion:reduce){.class-guide *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.class-guide .class-toc strong{display:block;margin-bottom:8px}
.class-guide .mobile-table-hint{display:none}
@media(max-width:760px){.class-guide .mobile-table-hint{display:block;font-size:14px;color:var(--text-dim)}.class-guide .ranking-scroll th:first-child{position:sticky;left:0;background:var(--surface);border-right:1px solid var(--line)}.class-guide .ranking-scroll thead th:first-child{background:#1b2942}}