:root {
      color-scheme: light;
      --ink: #17202a;
      --muted: #5e6b79;
      --line: #dde5ed;
      --paper: #fbfcfd;
      --panel: #ffffff;
      --brand: #0e7c7b;
      --brand-deep: #095c62;
      --accent: #d9472b;
      --soft: #eff7f6;
      --soft-warm: #fff4ef;
      --shadow: 0 20px 60px rgba(23, 32, 42, 0.12);
      --radius: 8px;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background: var(--paper);
      line-height: 1.65;
    }

    a {
      color: var(--brand-deep);
      text-decoration-thickness: 0.08em;
      text-underline-offset: 0.18em;
    }

    img,
    svg {
      max-width: 100%;
    }

    .topbar {
      border-bottom: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(12px);
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .nav {
      width: min(1120px, calc(100% - 32px));
      min-height: 64px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .brand {
      font-weight: 800;
      letter-spacing: 0;
      color: var(--ink);
    }

    .nav a {
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
      color: var(--brand-deep);
      border: 1px solid var(--line);
      padding: 10px 14px;
      border-radius: var(--radius);
      background: #fff;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .hero {
      min-height: 640px;
      display: grid;
      align-items: center;
      background:
        linear-gradient(90deg, rgba(251, 252, 253, 0.98) 0%, rgba(251, 252, 253, 0.9) 47%, rgba(239, 247, 246, 0.76) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 900'%3E%3Cdefs%3E%3Cpattern id='dots' width='48' height='48' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='6' cy='6' r='2.2' fill='%230e7c7b' opacity='.18'/%3E%3C/pattern%3E%3ClinearGradient id='beam' x1='0' x2='1'%3E%3Cstop stop-color='%23d9472b' stop-opacity='0'/%3E%3Cstop offset='.48' stop-color='%23d9472b' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23d9472b' stop-opacity='.08'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1400' height='900' fill='%23f7fbfb'/%3E%3Crect x='760' y='120' width='420' height='520' rx='16' fill='%23ffffff' stroke='%23d8e5e5' stroke-width='4'/%3E%3Crect x='820' y='180' width='300' height='90' rx='10' fill='%23095c62'/%3E%3Crect x='846' y='303' width='250' height='190' rx='8' fill='url(%23dots)' stroke='%230e7c7b' stroke-opacity='.28'/%3E%3Cpath d='M910 562h120' stroke='%23d9472b' stroke-width='16' stroke-linecap='round'/%3E%3Cpath d='M1030 562C1130 552 1205 504 1260 420' stroke='url(%23beam)' stroke-width='18' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='1260' cy='420' r='22' fill='%23d9472b' opacity='.78'/%3E%3Ccircle cx='1260' cy='420' r='54' fill='none' stroke='%23d9472b' stroke-width='3' opacity='.22'/%3E%3C/svg%3E");
      background-size: cover;
      background-position: center;
      border-bottom: 1px solid var(--line);
    }

    .hero-inner,
    .article-layout,
    .wide-section {
      width: min(1120px, calc(100% - 32px));
      margin: 0 auto;
    }

    .hero-content {
      width: min(720px, 100%);
      padding: 72px 0 92px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 18px;
      color: var(--brand-deep);
      font-weight: 800;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .eyebrow::before {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--accent);
    }

    h1 {
      margin: 0;
      font-size: clamp(38px, 6vw, 72px);
      line-height: 0.98;
      letter-spacing: 0;
      max-width: 760px;
    }

    .lead {
      margin: 24px 0 0;
      max-width: 690px;
      font-size: 20px;
      color: #354250;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 32px;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 18px;
      border-radius: var(--radius);
      font-weight: 800;
      text-decoration: none;
      border: 1px solid transparent;
    }

    .button.primary {
      color: #fff;
      background: var(--brand-deep);
      box-shadow: 0 10px 28px rgba(9, 92, 98, 0.22);
    }

    .button.secondary {
      color: var(--brand-deep);
      background: #fff;
      border-color: var(--line);
    }

    .meta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 28px;
      color: var(--muted);
      font-size: 14px;
    }

    .meta-row span {
      padding: 7px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.82);
    }

    .article-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 42px;
      padding: 52px 0;
    }

    article {
      min-width: 0;
    }

    .toc {
      position: sticky;
      top: 88px;
      align-self: start;
      border: 1px solid var(--line);
      background: #fff;
      border-radius: var(--radius);
      padding: 20px;
      box-shadow: 0 10px 30px rgba(23, 32, 42, 0.06);
    }

    .toc strong {
      display: block;
      margin-bottom: 10px;
    }

    .toc a {
      display: block;
      padding: 9px 0;
      color: var(--muted);
      font-size: 14px;
      text-decoration: none;
      border-top: 1px solid #eef2f5;
    }

    h2 {
      margin: 42px 0 14px;
      font-size: clamp(28px, 4vw, 42px);
      line-height: 1.08;
      letter-spacing: 0;
    }

    h3 {
      margin: 24px 0 8px;
      font-size: 22px;
      line-height: 1.22;
    }

    p {
      margin: 0 0 18px;
    }

    .note {
      margin: 26px 0;
      padding: 18px 20px;
      border-left: 5px solid var(--accent);
      background: var(--soft-warm);
      border-radius: 0 var(--radius) var(--radius) 0;
      color: #49342e;
    }

    .metric-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin: 28px 0;
    }

    .metric,
    .compare-card,
    .faq details,
    .summary-box {
      border: 1px solid var(--line);
      background: #fff;
      border-radius: var(--radius);
      box-shadow: 0 10px 30px rgba(23, 32, 42, 0.05);
    }

    .metric {
      padding: 18px;
    }

    .metric b {
      display: block;
      color: var(--brand-deep);
      font-size: 30px;
      line-height: 1;
      margin-bottom: 10px;
    }

    .metric span {
      color: var(--muted);
      font-size: 14px;
    }

    .diagram {
      margin: 32px 0;
      overflow: hidden;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: var(--shadow);
    }

    .diagram-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 18px;
      border-bottom: 1px solid var(--line);
      background: var(--soft);
      font-weight: 800;
    }

    .diagram-visual {
      padding: 22px;
      background: linear-gradient(180deg, #ffffff 0%, #f7fbfb 100%);
    }

    .compare-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin: 26px 0;
    }

    .compare-card {
      padding: 22px;
    }

    .compare-card h3 {
      margin-top: 0;
    }

    ul,
    ol {
      padding-left: 22px;
      margin: 0 0 20px;
    }

    li {
      margin: 8px 0;
    }

    .summary-box {
      margin: 36px 0;
      padding: 24px;
      background: var(--soft);
    }

    .summary-box h2 {
      margin-top: 0;
    }

    .faq {
      padding: 44px 0 64px;
      background: #fff;
      border-top: 1px solid var(--line);
    }

    .faq details {
      padding: 18px 20px;
      margin: 12px 0;
    }

    .faq summary {
      cursor: pointer;
      font-weight: 800;
      color: var(--ink);
    }

    .faq p {
      margin-top: 12px;
      color: var(--muted);
    }

    .footer-cta {
      padding: 44px 0;
      background: var(--brand-deep);
      color: #fff;
    }

    .footer-cta .wide-section {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
    }

    .footer-cta h2 {
      margin: 0 0 8px;
      color: #fff;
    }

    .footer-cta p {
      margin: 0;
      color: rgba(255, 255, 255, 0.82);
    }

    .footer-cta a {
      flex: 0 0 auto;
      color: var(--brand-deep);
      background: #fff;
      text-decoration: none;
      border-radius: var(--radius);
      padding: 13px 18px;
      font-weight: 800;
    }

    @media (max-width: 900px) {
      .hero {
        min-height: auto;
        background-position: 56% center;
      }

      .hero-content {
        padding: 56px 0 64px;
      }

      .article-layout {
        display: block;
        padding-top: 34px;
      }

      .toc {
        position: static;
        margin-bottom: 30px;
      }

      .metric-grid,
      .compare-grid {
        grid-template-columns: 1fr;
      }

      .footer-cta .wide-section {
        display: block;
      }

      .footer-cta a {
        display: inline-flex;
        margin-top: 22px;
      }
    }

    @media (max-width: 560px) {
      .nav {
        min-height: 58px;
        align-items: flex-start;
        padding: 12px 0;
        flex-direction: column;
      }

      .nav a {
        padding: 9px 10px;
        font-size: 13px;
      }

      .nav-actions {
        justify-content: flex-start;
      }

      h1 {
        font-size: 38px;
      }

      .lead {
        font-size: 18px;
      }

      .hero-actions {
        display: grid;
      }

      .button {
        width: 100%;
      }
    }