:root {
  color-scheme: light;
  --paper: #f7f5ed;
  --white: #fffcf4;
  --ink: #172b24;
  --muted: #475950;
  --deep: #173d33;
  --line: #d8dbcd;
  --lime: #c9ed78;
  --max: 1180px;
  font-family: "Avenir Next", Avenir, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); }
a { color: inherit; }
button { font: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #427359; outline-offset: 5px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 750; letter-spacing: -.055em; line-height: 1; }
p { line-height: 1.65; }
.wrap { width: min(var(--max), calc(100% - 88px)); margin-inline: auto; }
.skip { position: absolute; top: 8px; left: 8px; z-index: 3; padding: 12px 18px; background: var(--lime); transform: translateY(-160%); }
.skip:focus { transform: none; }
.site-header { border-bottom: 1px solid var(--line); }
.nav { min-height: 77px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 800; letter-spacing: -.06em; text-decoration: none; white-space: nowrap; }
.brand svg { width: 30px; height: 30px; color: #2e634e; }
.brand-ai { color: #30674f; }
nav { display: flex; align-items: center; gap: clamp(15px, 2.8vw, 35px); }
nav a, .nav-cta { font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
nav a:hover, nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.nav-cta { display: flex; align-items: center; gap: 12px; border: 1px solid #aab8aa; border-radius: 100px; padding: 10px 16px; }
.nav-cta:hover { background: #e8eddf; }
.hero { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: clamp(28px, 5vw, 78px); padding-block: 88px 92px; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 650; font-size: 11px; letter-spacing: .095em; line-height: 1.5; color: #35634f; }
.eyebrow > span { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: #5d996f; }
.hero h1 { font-size: clamp(57px, 7.7vw, 112px); line-height: .91; margin-block: 25px 25px; letter-spacing: -.085em; }
.hero h1 em { display: block; color: #32624f; font-style: normal; }
.hero-copy > p:not(.eyebrow), .detail-hero > p:not(.eyebrow) { max-width: 570px; font-size: clamp(16px, 1.75vw, 20px); color: var(--muted); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 19px 25px; margin-top: 29px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 15px; padding: 14px 19px; font-size: 14px; font-weight: 800; color: var(--ink); background: var(--lime); border: 1px solid #a4c760; border-radius: 7px; text-decoration: none; }
.button:hover { background: #dbf79b; }
.text-link { display: inline-flex; align-items: center; gap: 8px; width: fit-content; font-size: 14px; font-weight: 750; color: #24553f; text-decoration: underline; text-underline-offset: 4px; }
.demo { position: relative; isolation: isolate; overflow: hidden; background: #15362d; color: #f5fae9; border: 1px solid #315c4c; border-radius: 15px; box-shadow: 0 22px 50px #18372b26; padding: 23px; }
.demo::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 90% 0, #6d99634f, transparent 57%), repeating-linear-gradient(90deg, transparent 0 25px, #b6d3a709 25px 26px), repeating-linear-gradient(0deg, transparent 0 25px, #b6d3a709 25px 26px); }
.demo-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.demo-title, .badge, .demo-status, .demo-foot { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; letter-spacing: .09em; font-weight: 650; }
.demo-title { display: flex; align-items: center; gap: 8px; }
.demo-title i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 13px #bcf95c8a; }
.badge { padding: 5px 8px; border: 1px solid #8aab6d; border-radius: 4px; color: #e4f6bc; white-space: nowrap; }
.step-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-block: 22px 13px; }
.step-controls button { min-height: 48px; border: 1px solid #55766a; border-radius: 6px; background: #224238; color: #e5efe6; cursor: pointer; font-size: clamp(11px, 1.25vw, 14px); font-weight: 700; padding: 6px 3px; }
.step-controls button:hover { border-color: var(--lime); }
.step-controls button:focus-visible { outline-color: var(--lime); }
.step-controls button[aria-pressed="true"] { background: var(--lime); color: #1e392c; border-color: var(--lime); }
.step-controls small { font-family: ui-monospace, monospace; margin-right: 6px; font-size: 9px; opacity: .83; }
.demo-output { min-height: 224px; padding: 21px; border: 1px solid #5c786d; border-radius: 7px; background: #102820c9; }
.demo-status { color: #d2eea4; display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.demo-status span { width: 24px; height: 1px; background: #8aaf79; }
.demo-panel h2 { font-size: clamp(23px, 2.6vw, 33px); line-height: 1.04; }
.demo-panel h2 + p { font-size: 13px; color: #d6e3d7; margin-block: 9px 14px; }
.demo-panel dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; border-top: 1px solid #496357; padding-top: 12px; }
.demo-panel dt { color: #b2c9b7; font-size: 11px; }
.demo-panel dd { margin: 3px 0 0; font-size: 13px; font-weight: 700; }
.demo-foot { margin-top: 15px; color: #c8dccb; letter-spacing: .035em; }
.area-strip { background: #e7ecdf; border-block: 1px solid #d6dfd1; }
.area-strip .wrap { min-height: 57px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 25px; padding-block: 11px; }
.area-strip b { font: 700 10px/1.5 ui-monospace, monospace; letter-spacing: .11em; color: #295743; }
.area-strip span { font-size: 13px; font-weight: 600; color: #435a4a; }
.offer-section { padding-block: 77px 67px; }
.offer-section header, .split-section { display: grid; grid-template-columns: 1fr .8fr; column-gap: 45px; }
.offer-section header .eyebrow { grid-column: 1 / -1; margin-bottom: 14px; }
.offer-section h2, .split-section h2, .guide-promo h2, .contact h2 { font-size: clamp(32px, 5.1vw, 61px); }
.offer-section header > p:not(.eyebrow) { align-self: end; max-width: 420px; color: var(--muted); }
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 34px; }
.offers article { display: flex; flex-direction: column; align-items: flex-start; padding: 25px; min-height: 230px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
.offers article:first-child { background: #eaf0df; border-color: #bbc9b4; }
.offer-number { display: block; color: #406451; font: 700 11px/1.4 ui-monospace, monospace; letter-spacing: .06em; margin-bottom: 17px; }
.offers h3 { font-size: clamp(23px, 2.5vw, 30px); }
.offers p { margin-block: 12px 20px; color: var(--muted); font-size: 15px; }
.offers .text-link { margin-top: auto; }
.split-section { border-block: 1px solid var(--line); padding-block: 44px; align-items: center; }
.split-section h2, .guide-promo h2, .contact h2 { margin-block: 12px; }
.split-section p:not(.eyebrow), .guide-promo p:not(.eyebrow) { max-width: 460px; color: var(--muted); }
.process { padding: 0; margin: 0; list-style: none; counter-reset: process; }
.process li { display: grid; grid-template-columns: 34px 1fr; gap: 4px 10px; padding: 13px 0; counter-increment: process; }
.process li + li { border-top: 1px solid var(--line); }
.process li::before { grid-row: span 2; content: "0" counter(process); color: #416754; font: 700 11px/2 ui-monospace, monospace; }
.process span { color: var(--muted); font-size: 14px; }
.guide-promo { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; padding-block: 49px; }
.guide-promo h2 { font-size: clamp(30px, 4.1vw, 49px); }
.contact { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: clamp(24px, 5vw, 53px); border-radius: 13px; color: #fffdf2; background: var(--deep); margin-bottom: 54px; }
.contact .eyebrow { color: #d6eab3; }
.contact .eyebrow span { background: var(--lime); }
.contact h2 { font-size: clamp(31px, 4.1vw, 53px); }
.contact p:not(.eyebrow) { color: #d6e3d7; max-width: 610px; }
.contact-actions { display: grid; gap: 9px; text-align: center; }
.contact-actions > a:not(.button) { color: #e2f3d9; font-size: 13px; }
.contact a:focus-visible { outline-color: var(--lime); }
.site-footer { border-top: 1px solid var(--line); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-block: 24px; font-size: 13px; color: var(--muted); }
.site-footer .brand { font-size: 21px; color: var(--ink); }
.detail-hero { padding-block: 68px 43px; border-bottom: 1px solid var(--line); }
.detail-hero h1 { font-size: clamp(46px, 7.6vw, 88px); margin-block: 16px 19px; max-width: 840px; }
.detail-hero .button { margin-top: 22px; }
.detail-content { max-width: 760px; padding-block: 12px 36px; }
.prose-section, .faq { padding-block: 28px; border-bottom: 1px solid var(--line); }
.prose-section h2, .faq h2 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 13px; }
.prose-section p + p { margin-top: 9px; }
.prose-section p, .prose-section li, .faq p { color: var(--muted); }
.prose-section .text-link { margin: 10px 16px 0 0; }
.checklist { padding: 0; margin: 0; list-style: none; }
.checklist li { padding: 8px 0 8px 24px; position: relative; }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: #2e664d; font-weight: 800; }
details { padding: 13px 0; }
details + details { border-top: 1px solid var(--line); }
summary { font-weight: 750; cursor: pointer; }
details p { padding-top: 8px; }
@media (max-width: 870px) {
  .wrap { width: min(var(--max), calc(100% - 48px)); }
  .nav { flex-wrap: wrap; gap: 10px 16px; padding-block: 13px; }
  nav { width: 100%; order: 2; flex-wrap: wrap; gap: 8px 18px; }
  .hero { gap: 29px; padding-block: 58px; }
  .demo { padding: 15px; }
  .demo-output { padding: 15px; }
  .offers article { padding: 17px; }
}
@media (max-width: 650px) {
  .wrap { width: min(var(--max), calc(100% - 32px)); }
  .nav-cta { font-size: 12px; padding: 8px 10px; }
  nav a { font-size: 12px; }
  .hero, .offer-section header, .split-section, .offers, .contact { grid-template-columns: 1fr; }
  .hero { padding-block: 42px 36px; }
  .hero h1 { margin-block: 15px 16px; font-size: clamp(49px, 13vw, 73px); }
  .hero-actions { margin-top: 21px; }
  .demo-output { min-height: 184px; }
  .offer-section { padding-block: 43px 33px; }
  .offer-section header { row-gap: 10px; }
  .offer-section header .eyebrow { margin-bottom: 0; }
  .offers { margin-top: 22px; }
  .offers article { min-height: 0; }
  .split-section { gap: 20px; padding-block: 31px; }
  .guide-promo { display: grid; padding-block: 34px; }
  .contact { margin-bottom: 34px; }
  .contact-actions { justify-items: start; }
  .detail-hero { padding-block: 41px 31px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }