:root {
  --static-ink: #112c36;
  --static-muted: #58717b;
  --static-primary: #126a73;
  --static-line: #dbe7e3;
}

html { scroll-behavior: smooth; }
body { background: #fcfdf9; color: var(--static-ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
body > .skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 10px 14px; border-radius: 9px; background: white; color: var(--static-primary); font-weight: 750; transform: translateY(-150%); }
body > .skip-link:focus { transform: translateY(0); }
a:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid #8cc6b5; outline-offset: 3px; }
.container { width: min(1140px, calc(100% - 40px)); }

.static-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid #e1ebe4; background: rgba(252, 253, 249, .96); backdrop-filter: blur(14px); }
.static-header-inner { display: flex; min-height: 80px; align-items: center; justify-content: space-between; gap: 26px; }
.static-brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 10px; color: var(--static-ink); font-size: 1.22rem; font-weight: 850; letter-spacing: -.055em; line-height: .98; text-decoration: none; }
.static-brand img { width: 44px; height: 44px; border-radius: 12px; }
.static-brand > span > span { color: var(--static-primary); }
.static-brand small { display: block; margin-top: 5px; color: #819496; font-size: .56rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.static-desktop-nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; padding: 0; }
.static-desktop-nav > a, .resource-menu > summary { display: inline-flex; align-items: center; min-height: 42px; padding: 10px 12px; border-radius: 9px; color: #52676d; font-size: .91rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.static-desktop-nav > a:hover, .resource-menu > summary:hover, .resource-menu[open] > summary { background: #eaf4eb; color: #125f66; }
.resource-menu { position: relative; }
.resource-menu > summary { gap: 6px; cursor: pointer; list-style: none; }
.resource-menu > summary::-webkit-details-marker, .static-mobile-menu > summary::-webkit-details-marker { display: none; }
.resource-menu-panel { position: absolute; top: calc(100% + 10px); right: 0; display: grid; width: 225px; padding: 8px; border: 1px solid var(--static-line); border-radius: 14px; background: white; box-shadow: 0 24px 55px rgba(15, 55, 59, .13); }
.resource-menu-panel a { padding: 10px 12px; border-radius: 8px; color: #365c61; text-decoration: none; }
.resource-menu-panel a:hover { background: #f0f7f1; }
.static-desktop-nav > .static-header-cta, .static-mobile-menu .static-header-cta { display: inline-flex; align-items: center; justify-content: center; margin-left: 9px; padding: 12px 17px; border: 1px solid #0e525b; border-radius: 11px; background: #0e525b; color: white; font-weight: 780; text-decoration: none; box-shadow: 0 8px 20px rgba(14, 82, 91, .15); }
.static-desktop-nav > .static-header-cta:hover, .static-mobile-menu .static-header-cta:hover { background: #0b3c44; color: white; }
.static-mobile-menu { display: none; }

main { min-height: 55vh; padding: clamp(45px, 5vw, 78px) 0 92px; }
main .grid { grid-template-columns: minmax(0, 1.65fr) minmax(270px, .85fr); gap: 24px; align-items: start; }
main .card, main .blog-shell { border: 1px solid var(--static-line); border-radius: 24px; background: white; box-shadow: 0 20px 55px rgba(16, 66, 63, .06); }
main .card { padding: clamp(25px, 3.5vw, 43px); }
main .blog-shell { max-width: 850px; padding: clamp(25px, 4vw, 54px); }
main .staff-pick-card { max-width: 1050px; }
main .breadcrumb { margin: 0 0 19px; color: #758985; font-size: .84rem; }
main .breadcrumb a { color: var(--static-primary); }
main .card > h1 { max-width: 750px; margin: 0 0 21px; color: var(--static-ink); font-size: clamp(2.2rem, 4vw, 3.55rem); font-weight: 830; letter-spacing: -.055em; line-height: 1.07; }
main .card > p { max-width: 760px; color: var(--static-muted); font-size: 1.09rem; line-height: 1.7; }
main .sub-card { border-color: #e0ebe4; border-radius: 16px; background: #f5f9f4; padding: clamp(18px, 2.5vw, 26px); }
main .sub-card h2 { color: var(--static-ink); font-size: 1.15rem; letter-spacing: -.025em; }
main .sub-card li, main .sub-card p { color: #48616a; }
main aside { position: sticky; top: 105px; }
main aside .sub-card { margin: 0 0 16px; background: white; }
main .related-list li { border-color: #e3ece5; }
main .related-list a, main .blog-list-item h2 a, main .blog-read-more, main .article-footer a, main .article-sources a { color: var(--static-primary); }
main .faq-item { border-color: #e0eae1; }
main .actions { gap: 11px; margin-top: 27px; }
main .btn-primary, main .btn-secondary { display: inline-flex; min-height: 47px; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 10px; text-align: center; }
main .btn-primary { background: #0e525b; color: white; }
main .btn-primary:hover { background: #0b3c44; }
main .btn-secondary { border-color: #c9dfd4; color: #0e5961; }
main .btn-secondary:hover { background: #f0f7f1; }
main .blog-header h1, main .article-header h1 { color: var(--static-ink); letter-spacing: -.05em; }
main .blog-header, main .article-header { border-color: var(--static-line); }
main .blog-intro { color: var(--static-muted); }
main .blog-list-item { border-color: var(--static-line); }
main .article-section, main .blog-index-section { border-color: var(--static-line); }
main .comparison-table th { color: var(--static-ink); }
main .contact-direct { border-color: #d5e8da; background: #f2f8f2; }

.static-cta { padding: 72px 0; background: #103e47; color: white; }
.static-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.static-kicker { color: #d1ed8e; font-size: .73rem; font-weight: 850; letter-spacing: .16em; }
.static-cta h2 { max-width: 650px; margin: 12px 0 10px; color: white; font-size: clamp(2rem, 3.5vw, 3.2rem); font-weight: 820; letter-spacing: -.055em; line-height: 1.08; }
.static-cta p { margin: 0; color: #c8dcd9; font-size: 1rem; }
.static-cta-button { display: inline-flex; min-height: 52px; flex: 0 0 auto; align-items: center; padding: 12px 22px; border-radius: 11px; background: #d1ed8e; color: #183c35; font-weight: 800; text-decoration: none; }
.static-cta-button:hover { background: #e2f6b5; }
.static-footer { padding: 53px 0 22px; background: #0c313a; color: #c5d5da; }
.static-footer-inner { display: flex; justify-content: space-between; gap: 35px; }
.static-footer-brand { color: white; font-size: 1.25rem; font-weight: 830; letter-spacing: -.04em; text-decoration: none; }
.static-footer p { max-width: 360px; margin: 9px 0 0; color: #c5d5da; font-size: .9rem; }
.static-footer nav { display: flex; align-content: start; gap: 13px 25px; padding: 0; }
.static-footer nav a { color: #e6f0f2; font-size: .87rem; text-decoration: none; }
.static-footer nav a:hover { color: #d1ed8e; }
.static-footer-bottom { margin-top: 38px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15); color: #91a8b0; font-size: .73rem; }

@media (max-width: 1180px) {
  .static-desktop-nav { display: none; }
  .static-mobile-menu { position: relative; display: block; }
  .static-mobile-menu > summary { display: flex; align-items: center; gap: 10px; padding: 9px 13px; border: 1px solid var(--static-line); border-radius: 10px; background: white; color: var(--static-ink); font-weight: 750; cursor: pointer; list-style: none; }
  .static-mobile-menu nav { position: absolute; top: calc(100% + 14px); right: 0; z-index: 60; display: grid; width: min(320px, calc(100vw - 32px)); max-height: calc(100vh - 100px); overflow-y: auto; padding: 11px; border: 1px solid var(--static-line); border-radius: 14px; background: white; box-shadow: 0 24px 55px rgba(15,55,59,.14); }
  .static-mobile-menu nav a { padding: 10px 12px; border-radius: 8px; color: #365c61; text-decoration: none; }
  .static-mobile-menu nav a:hover { background: #f0f7f1; }
  .static-mobile-menu nav .static-header-cta { margin: 8px 0 0; color: white; }
}

@media (max-width: 900px) {
  main .grid { grid-template-columns: 1fr; }
  main aside { position: static; }
  .static-cta-inner { display: grid; }
  .static-cta-button { width: max-content; }
  .static-footer-inner { display: grid; }
}

@media (max-width: 640px) {
  .container { width: min(100% - 32px, 1140px); }
  .static-header-inner { min-height: 70px; }
  .static-brand { font-size: 1.08rem; }
  .static-brand img { width: 41px; height: 41px; }
  main { padding: 32px 0 64px; }
  main .card, main .blog-shell { border-radius: 18px; }
  main .card { padding: 23px 18px; }
  main .blog-shell { padding: 27px 20px; }
  main .card > h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
  main .actions { display: grid; }
  main .actions a { width: 100%; }
  .static-cta { padding: 60px 0; }
  .static-footer { padding-top: 44px; }
  .static-footer nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}