:root {
  color-scheme: light;
  --forest: #102b22;
  --forest-deep: #081f18;
  --green: #14654c;
  --mint: #a8f2cb;
  --ink: #122b22;
  --muted: #456158;
  --line: #d5e5db;
  --paper: #f3f8f3;
  --white: #fff;
  --shell: min(1180px, calc(100% - clamp(32px, 8vw, 90px)));
  --gradient: radial-gradient(ellipse at 96% 16%, #267d5b 0%, transparent 53%),
    radial-gradient(ellipse at 52% 110%, #13573f 0%, transparent 65%),
    linear-gradient(126deg, #0a251c, #0d392b 65%, #14543e);
  font-family: Inter, Geist, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-width: 0; }
a { color: inherit; text-underline-offset: .19em; }
a:hover { text-decoration-thickness: .13em; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #247b5f; outline-offset: 4px; }
.on-dark :focus-visible { outline-color: var(--mint); }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
h1, h2, h3 { line-height: 1.07; letter-spacing: -.047em; }
p, li, dd { line-height: 1.62; }
img { display: block; max-width: 100%; }
.wrap { width: var(--shell); margin-inline: auto; }
.skip { position: fixed; top: 12px; left: 12px; z-index: 5; padding: 12px; color: var(--ink); background: var(--white); border-radius: 8px; transform: translateY(-150%); }
.skip:focus { transform: translateY(0); }
.site-header { color: #f4fff8; background: var(--forest-deep); border-bottom: 1px solid #a8f2cb24; }
.header-inner { display: flex; min-height: 77px; align-items: center; justify-content: space-between; gap: 16px 26px; flex-wrap: wrap; padding-block: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.08rem; font-weight: 760; letter-spacing: -.025em; white-space: nowrap; text-decoration: none; }
.brand img { flex: none; border-radius: 10px; }
.main-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 20px; }
.main-nav a { display: inline-flex; align-items: center; min-height: 40px; padding-inline: 1px; font-size: .89rem; font-weight: 620; color: #d1e8db; text-decoration: none; }
.main-nav a:hover, .main-nav a[aria-current] { color: var(--mint); text-decoration: underline; }
.cta { min-height: 47px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 10px; padding: 10px 16px; color: #0b2e21; font-size: .92rem; font-weight: 750; line-height: 1.3; text-align: center; text-decoration: none; }
.cta-primary { background: linear-gradient(112deg, #c4ffd0, #8bf4cf 70%, #78e5bc); box-shadow: 0 8px 27px #05180f4f, inset 0 1px #fff9; }
.cta-primary:hover { background: linear-gradient(112deg, #d4ffdf, #aafadd 74%, #91efca); }
.cta-outline { background: #f1fff20f; color: #f5fff8; border-color: #b6eaca5c; }
.cta-outline:hover { background: #f1fff221; }
.cta-forest { background: linear-gradient(120deg, #195d44, #0f4233); color: #f6fff8; }
.cta-forest:hover { background: linear-gradient(120deg, #217452, #124b39); }
.cta-small { min-height: 40px; padding: 8px 13px; font-size: .83rem; }
.arrow-up-right { position: relative; display: inline-block; flex: none; width: 12px; height: 12px; vertical-align: -.08em; }
.arrow-up-right::before { position: absolute; inset: 2px 1px auto auto; width: 7px; height: 7px; border-top: 1.5px solid; border-right: 1.5px solid; content: ""; }
.arrow-up-right::after { position: absolute; top: 6px; left: 1px; width: 10px; border-top: 1.5px solid; transform: rotate(-45deg); content: ""; }
.eyebrow { font-size: .76rem; line-height: 1.4; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow-mint { color: #b5f5d2; }
.eyebrow-green { color: #215e47; }
.hero { position: relative; isolation: isolate; overflow: hidden; color: #f4fff7; background: var(--gradient); }
.hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 31px, #c9ffe41a 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, #c9ffe416 31px 32px); mask-image: radial-gradient(ellipse at 79% 52%, #000 0%, transparent 68%); pointer-events: none; }
.hero-inner { display: grid; align-items: center; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(26px, 4vw, 64px); padding-block: clamp(48px, 8vw, 105px); }
.hero-copy { min-width: 0; }
.hero h1 { margin-top: 17px; font-size: clamp(2.6rem, 5.65vw, 5.15rem); font-weight: 760; line-height: 1.03; text-wrap: balance; }
.hero h1 span { color: #b5f8c9; }
.hero-summary { margin-top: 23px; color: #e0efe5; max-width: 57ch; font-size: clamp(1rem, 1.6vw, 1.125rem); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; }
.hero .micro { margin-top: 15px; color: #c3e8d1; }
.micro { font-size: .83rem; }
.preview-window { aspect-ratio: 1.33; min-width: 0; display: flex; flex-direction: column; position: relative; gap: 10px; padding: clamp(12px, 2vw, 23px); border: 1px solid #ddffed5c; border-radius: 20px; background: linear-gradient(140deg, #2c6b55, #1c4638 28%, #15372b 76%); box-shadow: 0 26px 76px #061d145e, inset 0 1px #d1ffe160; }
.preview-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 3px; }
.preview-brand { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .87rem; font-weight: 740; }
.preview-brand img { flex: none; width: 30px; height: 30px; }
.preview-mode { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid #ddffed2e; border-radius: 99px; background: #cfffea19; color: #e4f9ec; white-space: nowrap; font-size: .67rem; font-weight: 680; }
.preview-mode::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #b2f5c7; box-shadow: 0 0 8px #b4f4c380; }
.preview-hero { display: grid; position: relative; min-width: 0; min-height: 158px; flex: 1; gap: 6px; grid-template-rows: auto auto auto 1fr auto; align-content: start; overflow: hidden; padding: 15px 15px 11px; border: 1px solid #9fe4be6a; border-radius: 12px; background: radial-gradient(ellipse at 98% 12%, #2f7d5b, transparent 70%), linear-gradient(120deg, #102f24, #144333); }
.preview-hero p { color: #d5f1e0; }
.preview-hero .sample-name { line-height: 1.33; font-size: .71rem; font-weight: 750; letter-spacing: .082em; text-transform: uppercase; }
.preview-profit { font-size: clamp(2rem, 4.1vw, 3.35rem); font-weight: 755; line-height: 1; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.preview-hero .preview-note { color: #b8f4cc; font-size: .76rem; font-weight: 660; }
.preview-trend { min-height: 56px; height: clamp(58px, 8vw, 105px); margin-top: 4px; position: relative; background: repeating-linear-gradient(to bottom, #c0efce31 0 1px, transparent 1px 25%); }
.trend-area, .trend-line { position: absolute; inset: 0; }
.trend-area { background: linear-gradient(#9af6b858, #9af6b805); clip-path: polygon(0 85%, 4% 83%, 8% 75%, 12% 63%, 16% 52%, 20% 48%, 24% 47%, 28% 40%, 32% 32%, 36% 29%, 40% 30%, 44% 36%, 48% 41%, 52% 43%, 56% 42%, 60% 34%, 64% 21%, 68% 14%, 72% 13%, 76% 14%, 80% 20%, 84% 23%, 88% 22%, 92% 15%, 96% 10%, 100% 10%, 100% 100%, 0 100%); }
.trend-line { background: linear-gradient(90deg, #8debab, #b4ffcd 60%, #ddffed); clip-path: polygon(0 83%, 4% 81%, 8% 73%, 12% 61%, 16% 50%, 20% 46%, 24% 45%, 28% 38%, 32% 30%, 36% 27%, 40% 28%, 44% 34%, 48% 39%, 52% 41%, 56% 40%, 60% 32%, 64% 19%, 68% 12%, 72% 11%, 76% 12%, 80% 18%, 84% 21%, 88% 20%, 92% 13%, 96% 8%, 100% 8%, 100% 12%, 96% 12%, 92% 17%, 88% 24%, 84% 25%, 80% 22%, 76% 16%, 72% 15%, 68% 16%, 64% 23%, 60% 36%, 56% 44%, 52% 45%, 48% 43%, 44% 38%, 40% 32%, 36% 31%, 32% 34%, 28% 42%, 24% 49%, 20% 50%, 16% 54%, 12% 65%, 8% 77%, 4% 85%, 0 87%); }
.preview-period { display: flex; justify-content: space-between; color: #bbd8c9; font-size: .65rem; }
.preview-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.preview-kpis div { min-width: 0; padding: 9px 10px; border: 1px solid #c8f6d829; border-radius: 9px; background: linear-gradient(125deg, #2a5646, #204535); }
.preview-kpis dt { color: #c5e4d2; font-size: .64rem; line-height: 1.33; }
.preview-kpis dd { margin-top: 3px; color: #f6fff9; font-size: clamp(.9rem, 1.7vw, 1.23rem); font-weight: 750; line-height: 1.11; letter-spacing: -.035em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.section { padding-block: clamp(50px, 7.2vw, 99px); }
.section h2 { font-size: clamp(2.15rem, 4vw, 3.5rem); font-weight: 750; text-wrap: balance; }
.deck { margin-top: 12px; color: var(--muted); max-width: 65ch; }
.method { background: radial-gradient(ellipse at 93% 18%, #d9f4e5, transparent 65%), linear-gradient(155deg, #f7fbf5, #eef6ee); border-block: 1px solid var(--line); }
.method-inner { display: grid; grid-template-columns: minmax(0, .91fr) minmax(0, 1.09fr); align-items: center; gap: clamp(26px, 5vw, 70px); }
.method h2, .guide-heading h2 { margin-top: 9px; }
.text-link { display: inline-block; color: #175741; margin-top: 16px; font-weight: 720; }
.waterfall { overflow: hidden; border: 1px solid #bbdaca; border-radius: 16px; box-shadow: 0 12px 37px #143d2610; background: linear-gradient(140deg, #fcfffc, #f1faf4); }
.waterfall-name { padding: 14px 17px 10px; color: #3c6352; font-size: .79rem; font-weight: 700; }
.waterfall dl { padding-inline: 17px; }
.waterfall dl div { display: flex; justify-content: space-between; gap: 12px; padding-block: 8px; border-top: 1px solid #e0ece2; font-size: .92rem; }
.waterfall dt { line-height: 1.4; }
.waterfall dd { flex: none; font-weight: 740; font-variant-numeric: tabular-nums; line-height: 1.4; }
.waterfall .waterfall-total { margin: 4px -17px 0; padding: 13px 17px; color: #f4fff9; background: linear-gradient(120deg, #1a4a38, #206e51); font-size: 1rem; font-weight: 720; border-top: 0; }
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-top: 24px; }
.guide-card { display: grid; grid-template-rows: auto auto 1fr auto; align-items: start; gap: 12px; min-width: 0; padding: clamp(17px, 2.2vw, 24px); border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 6px 20px #17482c0c; background: radial-gradient(ellipse at 100% 5%, #e2f6e9, transparent 72%), #fff; color: var(--ink); text-decoration: none; }
.guide-card:hover { border-color: #78ad94; background: radial-gradient(ellipse at 100% 5%, #d4f1df, transparent 75%), #fff; }
.guide-card h3 { font-size: clamp(1.26rem, 2.3vw, 1.58rem); }
.guide-card p { color: var(--muted); font-size: .92rem; }
.guide-card .kicker { width: fit-content; color: #255842; border: 1px solid #cde7d6; border-radius: 6px; padding: 4px 7px; font-size: .69rem; font-weight: 730; line-height: 1.2; background: #e8f7ec; }
.guide-card .card-more { font-size: .87rem; font-weight: 720; color: #155840; }
.closing { color: #f2fff7; background: var(--gradient); }
.closing h2 { max-width: 18ch; }
.closing p { max-width: 60ch; color: #def2e4; }
.closing-inner { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 16px 28px; }
.closing .actions { margin-top: 0; }
.questions { background: linear-gradient(160deg, #fff, #f5faf5); border-block: 1px solid var(--line); }
.qa { max-width: 810px; }
.qa section { border-top: 1px solid var(--line); margin-top: 17px; padding-top: 17px; }
.qa h3 { margin-bottom: 6px; font-size: 1.17rem; letter-spacing: -.023em; }
.qa p { color: var(--muted); }
.site-footer { background: #0a241b; color: #d1e7da; border-top: 1px solid #a8f2cb24; }
.footer-inner { padding-block: 24px; display: flex; align-items: center; justify-content: space-between; gap: 13px 24px; flex-wrap: wrap; }
.footer-links { display: flex; flex-wrap: wrap; gap: 7px 17px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 38px; font-size: .86rem; }
.footer-links a:hover { color: var(--mint); }
.article-hero { color: #f6fff8; background: var(--gradient); padding-block: clamp(31px, 6vw, 70px); }
.article-hero h1 { max-width: 19ch; margin-top: 15px; font-size: clamp(2.6rem, 6vw, 4.6rem); text-wrap: balance; }
.article-hero .deck { color: #e0efe5; font-size: 1.08rem; max-width: 67ch; }
.breadcrumb { color: #d1f0dd; font-size: .86rem; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.breadcrumb a:hover { color: var(--mint); }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 270px); align-items: start; gap: clamp(24px, 5vw, 72px); padding-block: clamp(30px, 6vw, 64px); }
.article-body { min-width: 0; max-width: 740px; }
.article-body > * + * { margin-top: 1.15rem; }
.article-body h2 { margin-top: 2.4rem; font-size: clamp(1.55rem, 3vw, 2.33rem); text-wrap: balance; }
.article-body h3 { margin-top: 1.6rem; font-size: 1.25rem; letter-spacing: -.03em; }
.article-body h2:first-child { margin-top: 0; }
.article-body p, .article-body li { line-height: 1.7; }
.article-body p { max-width: 73ch; }
.article-body li + li { margin-top: .65rem; }
.article-body ul, .article-body ol { padding-left: 1.45rem; }
.article-body a { color: #115742; font-weight: 650; }
.article-body .cta-forest { color: #f6fff8; }
.definition { padding: 14px 16px; border: 1px solid #c4dfcd; border-left: 4px solid #27865b; border-radius: 9px; background: linear-gradient(130deg, #eaf8ed, #f8fcf8); }
.definition p + p { margin-top: 7px; }
.reading-panel { position: sticky; top: 18px; display: grid; gap: 7px; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: radial-gradient(ellipse at 100% 5%, #dff4e8, transparent 83%), #fdfffd; }
.reading-panel h2 { margin: 2px 0 7px; font-size: 1.25rem; }
.reading-panel ul { display: grid; gap: 3px; list-style: none; padding: 0; }
.reading-panel a { display: inline-flex; align-items: center; min-height: 33px; font-size: .91rem; font-weight: 650; color: #155840; }
.reading-panel .cta { display: inline-flex; min-height: 42px; font-size: .88rem; color: #f6fff8; margin-top: 6px; }
.article-body .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; font-variant-numeric: tabular-nums; line-height: 1.5; font-size: .94rem; }
.data-table th, .data-table td { padding: 9px 11px; vertical-align: top; }
.data-table thead { background: #e7f4eb; }
.data-table tbody tr { border-top: 1px solid #e5eee8; }
.data-table tfoot { border-top: 2px solid #bddac6; background: #eff8f0; font-weight: 750; }
.data-table th[scope=row] { font-weight: 650; }
.data-table .amount { text-align: right; white-space: nowrap; }
.article-end { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 20px; }
.related { display: flex; flex-wrap: wrap; gap: 9px 16px; padding-top: 5px; }
.related a { display: inline-flex; align-items: center; min-height: 40px; font-size: .9rem; }
@media (max-width: 970px) {
  .header-inner { gap: 5px 16px; }
  .main-nav { gap: 2px 12px; }
  .main-nav a { font-size: .84rem; }
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .article-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 220px); }
}
@media (max-width: 760px) {
  .header-inner { padding-block: 9px; }
  .main-nav { order: 3; flex: 1 0 100%; }
  .main-nav a { min-height: 35px; }
  .hero-inner, .method-inner, .article-layout { grid-template-columns: minmax(0, 1fr); }
  .hero-inner { max-width: 620px; }
  .hero h1 { max-width: 15ch; }
  .preview-window { width: 100%; max-width: 570px; }
  .guide-grid { grid-template-columns: minmax(0, 1fr); }
  .guide-card { gap: 8px; }
  .reading-panel { position: static; }
}
@media (max-width: 360px) {
  .brand { font-size: .98rem; gap: 7px; }
  .brand img { width: 34px; height: 34px; }
  .cta-small { padding-inline: 9px; font-size: .75rem; }
  .preview-kpis { gap: 5px; }
  .preview-kpis div { padding: 7px 5px; }
  .preview-mode { gap: 4px; padding-inline: 5px; }
  .preview-brand { gap: 5px; font-size: .75rem; }
}
@media (forced-colors: active) {
  .preview-trend { border: 1px solid CanvasText; }
  .trend-line { background: CanvasText; forced-color-adjust: none; }
}