/* ===========================================
   GUIDE PAGES — SEO landing page template
   =========================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body.guide-page a { color: inherit; text-decoration: none; }

:root {
  --g-green: #006633;
  --g-green-bright: #00A651;
  --g-dark: #1A1A1A;
  --g-white: #fff;
  --g-cream: #FAF8F5;
  --g-border: #E6E3DC;
  --g-text: #1A1A1A;
  --g-body: #3C3C3C;
  --g-muted: #6B6B6B;
  --g-max: 1150px;
  --g-content: 860px;
  --g-pad: clamp(20px, 5vw, 52px);
}

/* NAV */
.g-nav { background: var(--g-dark); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(255,255,255,.08); }
.g-nav__inner { max-width: var(--g-max); margin: 0 auto; padding: 0 var(--g-pad); height: 64px; display: flex; align-items: center; justify-content: space-between; }
.g-nav__logo { display: flex; align-items: center; height: 28px; }
.g-nav__logo img { height: 28px; width: auto; display: block; }
.g-nav__cta { font-size: 12px; font-weight: 700; color: var(--g-white); background: var(--g-green-bright); padding: 9px 18px; border-radius: 3px; letter-spacing: .02em; transition: background .15s ease; }
.g-nav__cta:hover { background: var(--g-green); }

/* HERO */
.g-hero { background: var(--g-dark); padding: 180px var(--g-pad) 72px; }
.g-hero__inner { max-width: var(--g-content); margin: 0 auto; }
.g-hero__kicker { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-green-bright); margin-bottom: 18px; }
.g-hero h1 { font-size: clamp(30px, 5vw, 50px); font-weight: 400; color: var(--g-white); line-height: 1.1; margin-bottom: 20px; max-width: 600px; }
.g-hero__intro { font-size: 17px; line-height: 1.78; color: rgba(255,255,255,.72); font-weight: 400; max-width: 540px; margin-bottom: 28px; }
.g-hero__meta { font-size: 13px; color: rgba(255,255,255,.45); }

/* ARTICLE */
.g-article { max-width: var(--g-max); margin: 0 auto; padding: 0 var(--g-pad); }
.g-article > * { max-width: var(--g-content); margin-left: auto; margin-right: auto; }

/* INTRO */
.g-intro { padding: 52px 0 40px; border-bottom: 1px solid var(--g-border); }
.g-intro p { font-size: 18px; line-height: 1.75; color: var(--g-text); font-weight: 400; margin-bottom: 20px; }
.g-intro p:last-child { margin-bottom: 0; }
.g-intro strong { font-weight: 500; color: var(--g-green); }

/* CHAPTERS */
.g-chapter { padding: 52px 0; border-bottom: 1px solid var(--g-border); }
.g-chapter:last-child { border-bottom: none; }
.g-chapter__kicker { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-green); margin-bottom: 12px; }
.g-chapter h2 { font-size: clamp(22px, 3.5vw, 30px); font-weight: 400; color: var(--g-text); line-height: 1.2; margin-bottom: 20px; }
.g-chapter h3 { font-size: 17px; font-weight: 700; color: var(--g-text); margin: 30px 0 10px; line-height: 1.35; }
.g-chapter p { font-size: 16px; line-height: 1.82; color: var(--g-body); font-weight: 400; margin-bottom: 18px; }
.g-chapter p:last-child { margin-bottom: 0; }
.g-chapter strong { font-weight: 600; color: var(--g-text); }
.g-chapter em { font-style: italic; }

/* CALLOUT BOXES */
.g-box { border-radius: 6px; padding: 26px 30px; margin: 28px 0; }
.g-box__label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.g-box--cream { background: var(--g-cream); border: 1px solid var(--g-border); }
.g-box--cream .g-box__label { color: var(--g-muted); }
.g-box--cream p { font-size: 15px; line-height: 1.75; color: var(--g-text); margin-bottom: 0; font-weight: 400; }
.g-box--cream strong { font-weight: 600; color: var(--g-text); }
.g-box--dark { background: var(--g-dark); border: 1px solid rgba(255,255,255,.1); }
.g-box--dark .g-box__label { color: var(--g-green-bright); }
.g-box--dark p { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.82); margin-bottom: 12px; font-weight: 400; }
.g-box--dark p:last-of-type { margin-bottom: 18px; }
.g-box--dark strong { color: var(--g-white); font-weight: 500; }
.g-box--dark .g-box__cta { display: inline-block; font-size: 13px; font-weight: 700; color: var(--g-dark); background: var(--g-green-bright); padding: 10px 20px; border-radius: 3px; letter-spacing: .02em; transition: background .15s ease; }
.g-box--dark .g-box__cta:hover { background: var(--g-white); }

/* FILTER LIST */
.g-filters { list-style: none; margin: 18px 0; border-top: 1px solid var(--g-border); counter-reset: filter; }
.g-filters li { padding: 14px 0 14px 28px; border-bottom: 1px solid var(--g-border); position: relative; font-size: 15px; line-height: 1.65; color: var(--g-text); font-weight: 400; }
.g-filters li::before { content: counter(filter, decimal-leading-zero); counter-increment: filter; position: absolute; left: 0; top: 14px; font-size: 11px; font-weight: 700; color: var(--g-green); letter-spacing: .05em; }

/* FAQ */
.g-faq { padding: 52px 0; background: var(--g-cream); margin-top: 52px; }
.g-faq__inner { max-width: var(--g-content); margin: 0 auto; }
.g-faq__kicker { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-green); margin-bottom: 12px; }
.g-faq h2 { font-size: clamp(24px, 4vw, 34px); font-weight: 400; color: var(--g-text); line-height: 1.2; margin-bottom: 32px; }
.g-faq__item { padding: 22px 0; border-bottom: 1px solid var(--g-border); }
.g-faq__item:last-child { border-bottom: none; }
.g-faq__item h3 { font-size: 16px; font-weight: 700; color: var(--g-text); margin-bottom: 10px; line-height: 1.4; }
.g-faq__item p { font-size: 15px; line-height: 1.75; color: var(--g-body); font-weight: 400; }

/* CTA SECTION */
.g-cta { background: var(--g-dark); padding: 64px var(--g-pad); }
.g-cta__inner { max-width: var(--g-content); margin: 0 auto; text-align: center; }
.g-cta__kicker { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-green-bright); margin-bottom: 14px; }
.g-cta h2 { font-size: clamp(26px, 4.5vw, 38px); font-weight: 400; color: var(--g-white); line-height: 1.2; margin-bottom: 18px; max-width: 540px; margin-left: auto; margin-right: auto; }
.g-cta p { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.68); font-weight: 400; margin-bottom: 28px; max-width: 480px; margin-left: auto; margin-right: auto; }
.g-cta .g-cta__btn { display: inline-block; font-size: 14px; font-weight: 700; color: #000 !important; background: var(--g-green-bright); padding: 14px 28px; border-radius: 3px; letter-spacing: .02em; transition: background .15s ease; }
.g-cta .g-cta__btn:hover { background: var(--g-white); }

/* FOOTER */
.g-footer { background: var(--g-dark); padding: 32px var(--g-pad); border-top: 1px solid rgba(255,255,255,.08); }
.g-footer__inner { max-width: var(--g-max); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.g-footer__brand { font-size: 12px; color: rgba(255,255,255,.45); letter-spacing: .03em; }
.g-footer__brand strong { color: rgba(255,255,255,.75); font-weight: 600; }
.g-footer__links { font-size: 12px; color: rgba(255,255,255,.45); }
.g-footer__links a { margin-left: 18px; }
.g-footer__links a:hover { color: var(--g-green-bright); }

@media (max-width: 640px) {
  .g-hero { padding: 130px var(--g-pad) 52px; }
  .g-intro { padding: 40px 0 32px; }
  .g-chapter { padding: 40px 0; }
  .g-cta { padding: 48px var(--g-pad); }
  .g-footer__inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .g-footer__links a { margin-left: 0; margin-right: 18px; }
}