@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');
:root { color-scheme: light; --bg: #eef5f5; --panel: #ffffff; --panel-2: #e3eeee; --text: #17313b; --muted: #5b7078; --signal: #007c78; --signal-2: #006b78; --danger: #c85a2c; --line: #c8d9d9; --display: Manrope, Inter, ui-sans-serif, system-ui, sans-serif; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: linear-gradient(180deg, #f7fbfa 0, var(--bg) 34rem); color: var(--text); line-height: 1.7; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .28; background-image: linear-gradient(rgb(0 107 120 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(0 107 120 / 5%) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, black, transparent 55%); }
a { color: var(--signal-2); }
a, p, strong, h1, h2, h3 { overflow-wrap: anywhere; }
img, svg { max-width: 100%; }
button, input { font: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.shell { width: min(76rem, calc(100% - 2rem)); margin-inline: auto; }
.site-header { border-bottom: 1px solid var(--line); background: rgb(248 251 250 / 92%); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 10; }
.nav { min-height: 4.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { color: var(--text); font-family: var(--display); font-size: 1.35rem; font-weight: 800; text-decoration: none; text-transform: uppercase; letter-spacing: .055em; }
.brand::before { content: "W/"; color: var(--signal); margin-right: .55rem; }
.nav-links { display: flex; gap: 1.35rem; flex-wrap: wrap; }
.nav-links a { color: var(--muted); font-size: .84rem; font-weight: 700; letter-spacing: .04em; text-decoration: none; }
.nav-links a:hover { color: var(--text); }
main { padding-block: 2.5rem 6rem; }
.eyebrow { color: var(--signal); font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; }
.status-dot { display: inline-block; width: .5rem; height: .5rem; margin-right: .55rem; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 .3rem rgb(0 124 120 / 10%); }
h1, h2, h3 { font-family: var(--display); }
h1 { font-size: clamp(3rem, 7vw, 5.8rem); line-height: .98; letter-spacing: -.045em; margin: .65rem 0 1.35rem; }
h2 { font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1.08; letter-spacing: -.03em; margin: 0; }
.lead { color: #50676f; font-size: 1.12rem; max-width: 45rem; }
.mission-control { min-height: 34rem; display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items: center; position: relative; padding: 4.5rem 0 7rem; }
.hero-copy { position: relative; z-index: 2; }
.hero-copy .lead { font-size: clamp(1.05rem, 2vw, 1.28rem); max-width: 38rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.button { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; padding: .65rem 1.1rem; border: 1px solid var(--line); color: var(--text); font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.button.primary { color: #ffffff; background: var(--signal); border-color: var(--signal); }
.button.secondary:hover { border-color: var(--signal); }
.tactical-display { width: min(27rem, 90vw); aspect-ratio: 1; justify-self: end; position: relative; overflow: hidden; border: 1px solid #a9c9c9; border-radius: 50%; background: radial-gradient(circle, rgb(0 124 120 / 12%) 0 1px, transparent 2px), radial-gradient(circle, #ffffff, #dcebea 72%); box-shadow: inset 0 0 5rem rgb(0 107 120 / 7%), 0 1.5rem 4rem rgb(23 49 59 / 10%); }
.tactical-display::before, .tactical-display::after { content: ""; position: absolute; background: #b3cece; }
.tactical-display::before { width: 1px; inset-block: 0; left: 50%; }
.tactical-display::after { height: 1px; inset-inline: 0; top: 50%; }
.radar-ring { position: absolute; inset: 18%; border: 1px solid #a9c9c9; border-radius: 50%; }.radar-ring.ring-b { inset: 35%; }
.radar-sweep { position: absolute; inset: 3%; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 78%, rgb(0 124 120 / 24%) 96%, transparent 100%); animation: sweep 8s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
.map-point { position: absolute; width: .55rem; height: .55rem; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 .3rem rgb(200 90 44 / 14%); }.p1 { top: 27%; left: 58%; }.p2 { top: 61%; left: 32%; }.p3 { top: 70%; left: 70%; background: var(--signal); box-shadow: 0 0 0 .3rem rgb(0 124 120 / 14%); }
.display-label { position: absolute; left: 12%; bottom: 11%; display: grid; padding-left: .65rem; border-left: 2px solid var(--signal); line-height: 1; }.display-label small { color: var(--muted); font-size: .65rem; letter-spacing: .16em; }.display-label strong { color: var(--signal); font-family: var(--display); font-size: 1.5rem; letter-spacing: .08em; }
.intel-stats { position: absolute; inset-inline: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }.intel-stats div { display: grid; gap: .1rem; padding: 1rem 1.2rem; border-right: 1px solid var(--line); }.intel-stats div:last-child { border-right: 0; }.intel-stats strong { font-family: var(--display); font-size: 1.7rem; line-height: 1; }.intel-stats span { color: var(--muted); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.priority-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 3rem 0 7rem; background: var(--line); border: 1px solid var(--line); }.priority-grid a { min-height: 9rem; display: grid; grid-template-columns: 1fr auto; align-content: space-between; gap: .5rem; padding: 1.25rem; color: var(--text); background: var(--panel); text-decoration: none; }.priority-grid a:hover { background: var(--panel-2); }.priority-grid span { grid-column: 1 / -1; color: var(--danger); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.priority-grid strong { align-self: end; font-family: var(--display); font-size: 1.25rem; line-height: 1.2; }.priority-grid b { color: var(--signal); font-size: 1.2rem; }
.guide-hub { scroll-margin-top: 5rem; }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }.section-heading .eyebrow { margin-bottom: .75rem; }.section-heading > p { max-width: 25rem; color: var(--muted); }
.guide-tools { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; border-block: 1px solid var(--line); }.search-box { flex: 1; min-width: 15rem; display: flex; align-items: center; gap: .7rem; color: var(--signal); }.search-box input { width: 100%; border: 0; outline: 0; padding: .75rem 0; color: var(--text); background: transparent; }.search-box input::placeholder { color: #71868d; }
.filters { display: flex; flex-wrap: wrap; justify-content: end; gap: .5rem; }.filters a { border: 1px solid var(--line); padding: .45rem .7rem; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }.filters a:hover { color: #ffffff; border-color: var(--signal); background: var(--signal); }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1px; margin-top: 1.25rem; background: var(--line); border: 1px solid var(--line); }.guide-card { min-width: 0; min-height: 19rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: .7rem; padding: 1.5rem; position: relative; overflow: hidden; color: var(--text); background: var(--panel); text-decoration: none; }.guide-card::after { content: ""; position: absolute; width: 8rem; height: 8rem; right: -4rem; bottom: -4rem; border: 1px solid #b8d0d0; border-radius: 50%; transition: transform .3s ease, border-color .3s ease; }.guide-card:hover { background: linear-gradient(145deg, #ffffff, #eaf3f2); }.guide-card:hover::after { border-color: var(--signal); transform: scale(1.25); }
.card-index, .card-code { color: var(--muted); font-family: var(--display); font-size: .74rem; letter-spacing: .1em; }.card-code { color: var(--signal); }.guide-card strong { grid-column: 1 / -1; max-width: 27rem; margin-top: 1.2rem; font-family: var(--display); font-size: 1.65rem; line-height: 1.15; }.guide-card p { grid-column: 1 / -1; max-width: 34rem; color: var(--muted); font-size: .92rem; }.card-meta { grid-column: 1 / -1; align-self: end; display: flex; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); color: #62767d; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }.empty-state { padding: 3rem; text-align: center; color: var(--muted); border: 1px solid var(--line); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin: 1rem 0 3rem; color: var(--muted); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }.breadcrumbs a { color: var(--signal); text-decoration: none; }
.article-layout { display: grid; grid-template-columns: 15rem minmax(0, 48rem); gap: 4rem; align-items: start; }.article-rail { position: sticky; top: 6.5rem; display: grid; gap: 1rem; }.rail-panel { border: 1px solid var(--line); background: var(--panel); padding: 1rem; }.rail-label { margin: 0 0 .8rem; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }.rail-panel ol { list-style: none; margin: 0; padding: 0; }.rail-panel li + li { border-top: 1px solid var(--line); }.rail-panel li a { display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; padding: .7rem 0; color: #314d56; font-size: .8rem; line-height: 1.4; text-decoration: none; }.rail-panel li a:hover { color: var(--signal); }.rail-panel li span { color: #71868d; font-family: var(--display); }.source-count { display: flex; align-items: end; gap: .65rem; }.source-count strong { color: var(--signal); font-family: var(--display); font-size: 2rem; line-height: .85; }.source-count span { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.article { min-width: 0; max-width: 48rem; }.article-header { padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }.article-header h1 { font-size: clamp(3rem, 7vw, 5.7rem); }.article-header .lead { font-size: 1.2rem; }.verified { display: inline-block; margin-top: 1rem; padding: .35rem .65rem; border: 1px solid rgb(0 124 120 / 30%); color: var(--signal); background: rgb(0 124 120 / 7%); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.review-meta, .review-note { margin-top: 1.2rem; padding: 1rem; border: 1px solid var(--line); color: var(--muted); background: rgb(255 255 255 / 82%); font-size: .84rem; }.review-meta p, .review-note p { margin: 0; }.review-meta p + p { margin-top: .45rem; }.review-note strong { color: var(--text); font-family: var(--display); letter-spacing: .04em; }
.category-page { min-width: 0; }.category-header { max-width: 50rem; padding-bottom: 1.5rem; }.category-header h1 { font-size: clamp(3rem, 7vw, 5.7rem); }.category-updated, .trust-updated { color: var(--muted); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.quick-brief { margin: 2rem 0 3.5rem; padding: 1.4rem; border-left: 3px solid var(--signal); background: linear-gradient(90deg, rgb(0 124 120 / 9%), transparent); }.quick-brief > div { display: grid; gap: .15rem; }.quick-brief span { color: var(--signal); font-size: .67rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.quick-brief strong { font-family: var(--display); font-size: 1.4rem; }.quick-brief p { color: #425d65; margin-bottom: 0; }
.article-section { position: relative; padding: 1rem 0 3.5rem; scroll-margin-top: 6rem; }.article-section h2 { font-size: 2.25rem; margin-bottom: 1.3rem; }.article-section p { color: #425d65; font-size: 1.02rem; }.article-section p + p { margin-top: 1.2rem; }.section-mark { position: absolute; width: 2.5rem; height: 2px; left: -3.7rem; top: 2.15rem; background: var(--signal); }
.table-scroll { overflow-x: auto; margin: -1rem 0 3.5rem; }.summary-table { width: 100%; border-collapse: collapse; background: var(--panel); font-size: .9rem; }.summary-table caption { padding: .75rem 1rem; color: var(--signal); background: var(--panel-2); font-family: var(--display); font-weight: 800; letter-spacing: .08em; text-align: left; text-transform: uppercase; }.summary-table th, .summary-table td { padding: .8rem 1rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }.summary-table thead th { color: var(--text); background: #f5f9f9; }.summary-table tbody th { min-width: 10rem; color: var(--text); }.summary-table td { color: #425d65; }
.faq-list { border-top: 1px solid var(--line); padding-top: 3rem; }.faq-list h2 { margin: .4rem 0 1.4rem; }.faq-list details { border: 1px solid var(--line); background: var(--panel); }.faq-list details + details { border-top: 0; }.faq-list summary { cursor: pointer; padding: 1rem; color: var(--text); font-family: var(--display); font-weight: 700; }.faq-list details p { margin: 0; padding: 0 1rem 1rem; color: #425d65; }
.sources { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 3rem; }.sources h2, .related h2 { margin: .4rem 0 1.4rem; }.sources ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); }.sources li { display: grid; grid-template-columns: 2rem 1fr; gap: .8rem; padding: 1rem; background: var(--panel); }.sources li + li { border-top: 1px solid var(--line); }.sources li > span { color: var(--signal); font-family: var(--display); }.sources li div { display: grid; }.sources li a { color: var(--text); font-weight: 700; text-decoration: none; }.sources li small { color: var(--muted); }
.related { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--line); }.related > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }.related a { min-height: 9rem; display: grid; align-content: space-between; padding: 1rem; color: var(--text); background: var(--panel); text-decoration: none; }.related a:hover { background: var(--panel-2); }.related a span { color: var(--signal); font-size: .64rem; letter-spacing: .12em; }.related a strong { font-family: var(--display); line-height: 1.05; text-transform: uppercase; }
.content-panel { min-width: 0; max-width: 48rem; border: 1px solid var(--line); background: var(--panel); padding: clamp(1.5rem, 4vw, 3rem); }.trust-page section { padding-top: 2rem; }.trust-page section + section { margin-top: 2rem; border-top: 1px solid var(--line); }.trust-page h2 { margin-bottom: 1rem; font-size: clamp(1.7rem, 4vw, 2.35rem); }.trust-page p { color: #425d65; }.site-footer { border-top: 1px solid var(--line); color: var(--muted); padding-block: 2rem; background: rgb(255 255 255 / 45%); }.footer-row { min-width: 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .75rem; letter-spacing: .04em; }
.mission-control > *, .guide-tools > *, .article-layout > *, .card-meta > *, .nav > * { min-width: 0; }
.analytics-banner { position: fixed; z-index: 20; right: 1rem; bottom: 1rem; width: min(28rem, calc(100vw - 2rem)); padding: 1rem; border: 1px solid var(--signal); background: #ffffff; box-shadow: 0 1rem 3rem rgb(23 49 59 / 18%); color: var(--text); font-size: .8rem; text-transform: none; letter-spacing: normal; }.analytics-banner p { margin: 0 0 .85rem; }.analytics-banner div { display: flex; gap: .65rem; }.analytics-banner button, .analytics-preferences { border: 1px solid var(--line); padding: .55rem .7rem; color: var(--text); background: transparent; cursor: pointer; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.analytics-banner [data-analytics-accept] { color: #ffffff; border-color: var(--signal); background: var(--signal); }.analytics-preferences { margin-left: auto; color: var(--muted); }
@media (max-width: 58rem) { .mission-control { grid-template-columns: 1fr; padding-top: 3rem; }.tactical-display { justify-self: center; opacity: .7; }.article-layout { grid-template-columns: 1fr; gap: 2rem; }.article-rail { position: static; grid-template-columns: 1fr auto; }.section-mark { display: none; } }
@media (max-width: 42rem) { .nav { align-items: flex-start; flex-direction: column; padding-block: .9rem; }.nav-links { width: 100%; gap: .8rem; }.mission-control { padding-bottom: 6rem; }.tactical-display { width: min(80vw, 27rem); }.intel-stats div { padding: .8rem .55rem; }.priority-grid, .guide-grid, .related > div { grid-template-columns: minmax(0, 1fr); }.priority-grid { margin-bottom: 5rem; }.section-heading, .guide-tools { align-items: stretch; flex-direction: column; }.search-box { min-width: 0; }.filters { justify-content: start; }.guide-card { min-height: 16rem; }.article-rail { grid-template-columns: minmax(0, 1fr); }.article-header h1, .category-page h1 { font-size: 3rem; }.review-meta { padding: .85rem; }.breadcrumbs { margin-bottom: 2rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.radar-sweep { animation: none; } }