/* Outdoor design experiment: canvas, forest, and logo yellow. */
:root {
    --brand-yellow: #f1c302;
    --brand-yellow-hover: #ffda35;
    --paper: #19231c;
    --surface: #233027;
    --surface-strong: #29362c;
    --surface-soft: #202d24;
    --heading: #f2eddf;
    --ink: #eee9dc;
    --muted: #bdc4b6;
    --green-600: #b6c991;
    --green-900: #e2e8cc;
    --green-100: #344536;
    --gold-500: #edab62;
    --gold-100: #483a27;
    --line: #4d5a49;
    --header-bg: #19231c;
    --header-border: #455440;
    --hero-lede: #d1d5c5;
    --stat-bg: transparent;
    --input-bg: #19251d;
    --input-border: #79836c;
    --footer-bg: #15251c;
    --portal-bg: #203c2e;
    --reports-bg: #2b4031;
    --field-bg: #1c3024;
    --button-secondary-bg: #2b3b2e;
    --button-secondary-hover: #3b4b37;
    --page-gradient: none;
    --shadow: 0 14px 28px rgba(12, 24, 15, 0.18);
}

:root[data-theme="light"] {
    --paper: #f0eadb;
    --surface: #f8f3e7;
    --surface-strong: #e4dfce;
    --surface-soft: #ebe5d5;
    --heading: #243d2a;
    --ink: #303b2e;
    --muted: #5c6554;
    --green-600: #566b3d;
    --green-900: #304b30;
    --green-100: #dce1ca;
    --gold-100: #eddfc5;
    --line: #b9bda7;
    --header-bg: #f0eadb;
    --header-border: #b2baa0;
    --nav-text: #2b402b;
    --hero-lede: #495642;
    --stat-bg: transparent;
    --input-bg: #fcf9f0;
    --input-border: #969f84;
    --button-secondary-bg: #e4dfce;
    --button-secondary-hover: #f8f3e7;
    --page-gradient: none;
    --shadow: 0 14px 28px rgba(38, 50, 27, 0.13);
}

body { font-family: Arial, Helvetica, sans-serif; }
html { scroll-padding-top: 100px; }
h1, h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    letter-spacing: -0.045em;
    text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 4.5vw, 4.6rem); line-height: 1.05; }
h2 { font-size: clamp(2rem, 3.6vw, 3.6rem); line-height: 1.1; }
h3 { font-weight: 800; font-size: 1.15rem; }
.eyebrow { letter-spacing: 0.14em; font-size: 0.72rem; font-weight: 800; }
.site-header { border-bottom: 1px solid var(--header-border); backdrop-filter: none; gap: 16px; }
.main-nav { gap: 2px; font-size: 0.82rem; }
.main-nav a { padding-inline: 10px; }
.main-nav .nav-login {
    background: transparent;
    color: var(--nav-text);
    border: 1px solid var(--input-border);
}
.main-nav .nav-login:hover { background: var(--green-100); color: var(--nav-text); }
.theme-toggle, .menu-toggle { width: 48px; height: 48px; border-radius: 4px; }
.hero {
    min-height: auto;
    gap: clamp(28px, 4vw, 60px);
    padding-top: clamp(48px, 6vw, 86px);
    padding-bottom: clamp(56px, 7vw, 100px);
    border-bottom: 8px solid #8a985e;
}
.hero-copy .eyebrow {
    display: inline-block;
    padding: 9px 14px;
    border: 1px solid var(--input-border);
    border-radius: 3px;
    background: var(--surface-soft);
}
.hero-lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.6; max-width: 54ch; }
.button {
    min-height: 56px;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 800;
}
.button-primary {
    color: #24321e;
    background: var(--brand-yellow);
    border-color: var(--brand-yellow);
    box-shadow: 0 2px 4px rgba(14, 31, 18, 0.14);
}
.button-primary:hover {
    color: #24321e;
    background: var(--brand-yellow-hover);
    border-color: var(--brand-yellow-hover);
    box-shadow: 0 3px 8px rgba(14, 31, 18, 0.18);
}
.hero-actions .button { min-height: 52px; }
.hero-actions .store-badge { --store-badge-height: 52px; }
.hero-stats { gap: 20px; margin-top: 34px; border-top: 1px solid var(--line); padding-top: 22px; }
.hero-stats div { padding: 0; min-height: 0; border: 0; background: none; }
.hero-stats strong { font-size: 1.08rem; color: var(--heading); }
.hero-stats span { font-size: 0.86rem; line-height: 1.5; }
.hero-desktop-shot, .portal-image, .mobile-tablet-shot,
.hero-tablet-shot, .hero-phone-shot, .mobile-phone-shot {
    border: 0;
    border-radius: 5px;
    background: transparent;
    box-shadow: 0 10px 24px rgba(14, 31, 18, 0.16);
}
.hero-tablet-shot, .hero-phone-shot {
    padding: 0;
}
.hero-tablet-shot img, .hero-phone-shot img { border-radius: inherit; }
.section, .portal-section, .mobile-app-section, .contact-section {
    padding-block: clamp(56px, 7vw, 96px);
}
.mobile-app-section { background: #263f2f; border-bottom: 8px solid #8a985e; }
.portal-section { background: #203a2c; }
.reports-section { background: #344833; }
.mobile-app-section .eyebrow, .portal-section .eyebrow, .reports-section .eyebrow { color: #e8b981; }
.mobile-app-copy p, .portal-copy p, .reports-copy p { color: #dce2ce; }
.check-list { gap: 18px; }
.check-list li::before {
    width: 10px;
    height: 16px;
    top: 0.3em;
    border-radius: 1px;
    background: #b8c995;
    transform: rotate(35deg);
}
.steps-section { background: var(--surface-strong); }
.steps-grid { gap: 28px; }
.step-card { border: none; border-top: 2px solid var(--line); border-radius: 0; padding: 24px 0 0; background: transparent; }
.step-number {
    border-radius: 5px 5px 18px 18px;
    color: #f7f1dc;
    background: #52673f;
    font-family: Georgia, serif;
    font-size: 1.4rem;
}
.feature-grid { gap: 20px; }
.feature-card {
    border-radius: 4px;
    border: 1px solid var(--line);
    border-top: 5px solid #7e8e5c;
    min-height: 0;
    background: var(--surface);
}
.feature-icon {
    width: auto;
    height: auto;
    margin-bottom: 30px;
    background: transparent;
    color: var(--green-600);
    font-family: Georgia, serif;
    font-size: 1.8rem;
}
.use-grid div { border-radius: 4px; background: transparent; border-width: 0 0 0 3px; border-color: #859565; min-height: 0; }
.faq-grid { gap: 28px; }
.faq-grid article { padding: 22px 0; min-height: 0; border-radius: 0; border-width: 1px 0 0; background: transparent; }
.report-preview { border-radius: 4px; border: 1px solid #8a985e; }
.report-chart span { background: #9aab74; border-radius: 2px 2px 0 0; }
.contact-form {
    background: var(--surface);
    border-radius: 5px;
    border-top: 6px solid #687d4d;
    box-shadow: var(--shadow);
}
.contact-form label { font-size: 1rem; }
.contact-form input, .contact-form textarea, .contact-form select { border-radius: 3px; font-size: 1rem; }
.site-footer { background: #182e22; border-top: 5px solid #859565; }
.form-status-pending { color: var(--heading); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--green-600); outline-offset: 4px; }

@media (max-width: 1200px) and (min-width: 761px) {
    .site-header { flex-wrap: wrap; }
    .header-actions { margin-left: auto; }
    .main-nav { order: 4; width: 100%; justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 760px) {
    .hero-stats { gap: 18px; }
    .hero-stats div { border-left: 3px solid #859565; padding-left: 14px; }
    .hero-copy .eyebrow { font-size: 0.66rem; line-height: 1.6; }
    .hero { padding-top: 36px; }
    .main-nav a { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
}