:root {
        --bg: #f1f8f4;
        --ink: #102319;
        --text: #34463b;
        --muted: #607268;
        --green: #1d7c39;
        --green-dark: #08210f;
        --teal: #125a62;
        --gold: #cf9e2d;
        --line: #d7e8dc;
        --card: #ffffff;
        --soft: #eaf6ef;
      }

      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--ink);
        font-family: Arial, Helvetica, sans-serif;
        line-height: 1.68;
      }
      a {
        color: inherit;
      }
      img {
        max-width: 100%;
      }

      .site-header {
        min-height: 88px;
        padding: 0 4%;
        background: #030503;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .logo img {
        width: 78px;
        height: 78px;
        object-fit: contain;
        display: block;
      }
      .nav {
        display: flex;
        gap: 42px;
        font-size: 13px;
        letter-spacing: 5px;
        text-transform: uppercase;
      }
      .nav a {
        color: #f7fff9;
        text-decoration: none;
      }

      .hero {
        padding: 58px 4% 40px;
        background: linear-gradient(180deg, #f8fcf8 0%, var(--bg) 100%);
      }
      .hero-inner {
        max-width: 1160px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(340px, 0.95fr);
        gap: 42px;
        align-items: center;
      }
      .eyebrow {
        margin: 0 0 14px;
        color: var(--green);
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 2px;
        text-transform: uppercase;
      }
      h1 {
        margin: 0;
        max-width: 780px;
        font-size: 48px;
        line-height: 1.08;
        letter-spacing: 0;
      }
      .dek {
        margin: 22px 0 0;
        max-width: 690px;
        color: var(--muted);
        font-size: 19px;
      }
      .meta {
        margin-top: 24px;
        color: #6d7e73;
        font-size: 14px;
      }
      .hero-media {
        margin: 0;
        border: 1px solid var(--line);
        border-radius: 8px;
        overflow: hidden;
        background: #e9f3eb;
        box-shadow: 0 18px 50px rgba(13, 54, 28, 0.14);
        position: relative;
      }
      .hero-media img {
        width: 100%;
        min-height: 356px;
        object-fit: cover;
        display: block;
      }
      .hero-note {
        position: absolute;
        left: 24px;
        right: 24px;
        bottom: 24px;
        padding: 18px 20px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 14px 34px rgba(16, 35, 25, 0.14);
      }
      .hero-note strong {
        display: block;
        margin-bottom: 4px;
        color: var(--green-dark);
        font-size: 15px;
        letter-spacing: 1px;
        text-transform: uppercase;
      }
      .hero-note p {
        margin: 0;
        color: var(--muted);
        font-size: 15px;
        line-height: 1.5;
      }

      .wrap {
        max-width: 1160px;
        margin: 0 auto 72px;
        padding: 0 4%;
        display: grid;
        grid-template-columns: minmax(0, 760px) 300px;
        gap: 56px;
        align-items: start;
      }
      article {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 42px;
        box-shadow: 0 14px 42px rgba(13, 54, 28, 0.08);
      }
      article h2 {
        margin: 42px 0 14px;
        font-size: 30px;
        line-height: 1.24;
      }
      article h3 {
        margin: 28px 0 10px;
        font-size: 22px;
        line-height: 1.3;
      }
      article p,
      article li {
        color: var(--text);
        font-size: 17px;
      }
      article p {
        margin: 0 0 18px;
      }
      article ul,
      article ol {
        margin: 0 0 24px;
        padding-left: 22px;
      }
      article li {
        margin: 8px 0;
      }
      .lead {
        padding-left: 18px;
        border-left: 4px solid var(--green);
        color: #23362b;
        font-size: 18px;
      }
      .factor-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin: 24px 0 30px;
      }
      .factor {
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fbfdfb;
      }
      .factor strong {
        color: var(--green);
        font-size: 20px;
      }
      .feature-image {
        margin: 34px 0;
        overflow: hidden;
        border-radius: 8px;
        border: 1px solid var(--line);
        background: #eef5f0;
        box-shadow: 0 12px 34px rgba(13, 54, 28, 0.08);
      }
      .feature-image img {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        display: block;
      }
      .feature-image figcaption {
        padding: 14px 18px;
        color: #52665b;
        font-size: 14px;
        background: #fff;
      }
      .callout {
        margin: 30px 0;
        padding: 24px;
        border-radius: 8px;
        background: var(--soft);
        border: 1px solid #cfe5d5;
      }
      .callout strong {
        display: block;
        margin-bottom: 8px;
        color: var(--green-dark);
        font-size: 15px;
        letter-spacing: 1px;
        text-transform: uppercase;
      }
      .table-wrap {
        overflow-x: auto;
        margin: 20px 0 30px;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        font-size: 15px;
        color: var(--text);
      }
      th,
      td {
        padding: 12px;
        border: 1px solid var(--line);
        text-align: left;
      }
      th {
        background: var(--soft);
        color: var(--green-dark);
      }
      .faq details {
        margin: 12px 0;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fbfdfb;
      }
      .faq summary {
        padding: 16px 18px;
        cursor: pointer;
        color: var(--green-dark);
        font-weight: 800;
      }
      .faq details p {
        padding: 0 18px 18px;
      }
      .references {
        margin-top: 34px;
        padding-top: 24px;
        border-top: 1px solid var(--line);
      }
      .references a,
      .internal-links a {
        color: var(--green-dark);
        font-weight: 700;
      }

      .sidebar {
        position: sticky;
        top: 24px;
      }
      .cta-card {
        padding: 28px;
        border-radius: 8px;
        background: var(--green-dark);
        color: #f7fff9;
      }
      .cta-card h2 {
        margin: 0 0 12px;
        font-size: 24px;
        line-height: 1.25;
      }
      .cta-card p {
        margin: 0 0 22px;
        color: #d9eadf;
        font-size: 15px;
      }
      .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 0 18px;
        border-radius: 5px;
        background: var(--green);
        color: #fff;
        font-weight: 800;
        text-decoration: none;
      }
      .summary-card,
      .related {
        margin-top: 18px;
        padding: 24px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
      }
      .summary-card h2,
      .related h2 {
        margin: 0 0 12px;
        font-size: 18px;
      }
      .summary-card ul {
        margin: 0;
        padding-left: 18px;
        color: #42554a;
        font-size: 14px;
      }
      .related a {
        display: block;
        margin-top: 12px;
        color: var(--green-dark);
        font-weight: 800;
        text-decoration: none;
      }
      footer {
        padding: 36px 4%;
        background: #030503;
        color: #dce8df;
        text-align: center;
        font-size: 14px;
      }

      @media (max-width: 900px) {
        .nav {
          display: none;
        }
        .hero-inner,
        .wrap,
        .factor-grid {
          grid-template-columns: 1fr;
        }
        h1 {
          font-size: 38px;
        }
        article {
          padding: 30px 22px;
        }
        .sidebar {
          position: static;
        }
      }
      @media (max-width: 520px) {
        .hero {
          padding-top: 34px;
        }
        h1 {
          font-size: 32px;
        }
        .dek {
          font-size: 17px;
        }
        .hero-media img {
          min-height: 300px;
        }
        .hero-note {
          left: 16px;
          right: 16px;
          bottom: 16px;
          padding: 16px;
        }
        article h2 {
          font-size: 25px;
        }
      }