:root {
  --bg: #0b1220;
  --bg2: #0f1a2e;
  --card: #16213e;
  --border: rgba(255,255,255,0.10);
  --text: #eef2f7;
  --muted: #9aa7ba;
  --green: #30c14f;
  --green-soft: #59d97a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--green-soft); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

.top {
  background: linear-gradient(135deg, #0f2a1a 0%, #0b1220 45%, #10233f 100%);
  border-bottom: 1px solid var(--border);
}
header.site {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
}
.logo img { display: block; width: 190px; max-width: 52vw; height: auto; }
.byline { font-size: .85rem; color: var(--muted); }
.byline a.nav-research { color: var(--text); font-weight: 600; margin-right: 14px; }

.page-head { padding: 34px 0 40px; }
.kicker { color: var(--green); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .82rem; margin-bottom: 12px; }
.page-head h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); line-height: 1.15; color: #fff; max-width: 46rem; }
.page-head .sub { color: #c7d0dc; font-size: 1.05rem; max-width: 44rem; margin-top: 12px; }
.meta { color: var(--muted); font-size: .88rem; margin-top: 14px; }
.meta a { color: var(--muted); text-decoration: underline; }

.article-wrap { max-width: 46rem; margin: 0 auto; padding: 0 20px; }
figure.lead { margin: 36px auto 8px; max-width: 46rem; padding: 0 20px; }
figure.lead img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--border); }
figure.lead figcaption { margin-top: 8px; font-size: .78rem; color: #6d7a8c; }
figure.lead figcaption a { color: #8b98ab; }

article { padding: 26px 0 20px; }
article h2 { color: #fff; font-size: 1.45rem; margin: 34px 0 12px; line-height: 1.25; }
article h3 { color: #fff; font-size: 1.12rem; margin: 26px 0 10px; }
article p { color: #c7d0dc; margin-bottom: 16px; font-size: 1.02rem; }
article ul, article ol { color: #c7d0dc; margin: 0 0 16px 1.3rem; font-size: 1.02rem; }
article li { margin-bottom: 8px; }
article strong { color: var(--text); }

.app-note {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--green);
  border-radius: 12px; padding: 16px 18px; margin: 28px 0;
}
.app-note .mark { font-size: 1.5rem; line-height: 1.2; }
.app-note p { color: var(--muted); font-size: .95rem; margin: 0; }
.app-note strong { color: #fff; }

.more { border-top: 1px solid var(--border); margin-top: 34px; padding-top: 22px; }
.more h2 { font-size: 1.15rem; color: #fff; margin: 0 0 12px; }
.more ul { list-style: none; margin: 0; }
.more li { margin-bottom: 8px; color: var(--muted); font-size: .96rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; padding: 40px 0 64px; }
.card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
/* height:auto beats the height="" attribute hint so aspect-ratio can apply */
.card img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.card .body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.card h2 { color: #fff; font-size: 1.08rem; line-height: 1.3; text-align: left; }
.card h2 a { color: #fff; }
.card p { color: var(--muted); font-size: .92rem; }
.card .read { margin-top: auto; padding-top: 6px; font-size: .85rem; font-weight: 600; }

footer {
  background: linear-gradient(90deg, #0f2a1a, #10233f);
  border-top: 1px solid var(--border);
  padding: 44px 0; text-align: center;
}
footer h2 { color: #fff; font-size: 1.5rem; margin-bottom: 8px; }
footer .sub { color: #c7d0dc; max-width: 36rem; margin: 0 auto 20px; }
.cta {
  display: inline-block; background: var(--green); color: #06210f; font-weight: 700;
  padding: 13px 26px; border-radius: 12px; font-size: 1.02rem;
}
.cta:hover { text-decoration: none; filter: brightness(1.08); }
.foot-links { margin-top: 26px; font-size: .9rem; color: var(--muted); }
.foot-links a { margin: 0 8px; }
.fineprint { margin-top: 14px; font-size: .82rem; color: #6d7a8c; }

@media (max-width: 820px) {
  .logo img { width: 164px; }
}