/* ═══════════════════════════════════════════════════════════════════════════
   GreenArrow — content page components (services, insights, about, FAQ…)
   Built on the tokens in main.css. Never redefines main.css rules.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Breadcrumbs ───────────────────────────────────────────────────────── */
.crumbs { padding: 96px 0 0; }
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-400);
}
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--ink-300); }
.crumbs a { color: var(--ink-500); text-decoration: none; }
.crumbs a:hover { color: var(--green-700); text-decoration: underline; }
.crumbs [aria-current] { color: var(--green-700); font-weight: 500; }
.crumbs + .hero, .crumbs + .tool-hero { padding-top: 28px; }

/* ── Hero meta line ────────────────────────────────────────────────────── */
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 22px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-400);
}
.hero-center .hero-meta { justify-content: center; }
.hero-meta a { color: var(--green-700); }

/* ── Quick answer (the AEO extraction block) ───────────────────────────── */
.qa-wrap { padding: 26px 0 0; }
.quick-answer {
  position: relative;
  max-width: 900px; margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--green-200);
  border-left: 4px solid var(--green-500);
  border-radius: var(--r-lg);
  padding: 28px 32px 28px 34px;
  box-shadow: var(--shadow-md);
}
.qa-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--green-700); margin-bottom: 12px;
}
.qa-label::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-500); box-shadow: 0 0 0 3px var(--green-100);
}
.quick-answer p {
  font-size: 17.5px; line-height: 1.65; color: var(--ink-900); font-weight: 450; margin: 0;
}
.quick-answer p + p { margin-top: 12px; }
.quick-answer strong { font-weight: 650; }

/* ── Key takeaways ─────────────────────────────────────────────────────── */
.takeaways {
  max-width: 900px; margin: 0 auto;
  background: var(--green-50);
  border: 1px solid var(--green-200); border-radius: var(--r-lg);
  padding: 26px 30px;
}
.tk-title {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--green-800); margin: 0 0 14px;
}
.takeaways ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.takeaways li {
  position: relative; padding-left: 26px;
  font-size: 15px; line-height: 1.6; color: var(--ink-700);
}
.takeaways li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--green-500);
}

/* ── On-page table of contents ─────────────────────────────────────────── */
.toc {
  max-width: 900px; margin: 0 auto;
  border: 1px solid var(--line); background: var(--card);
  border-radius: var(--r-md); padding: 22px 26px; box-shadow: var(--shadow-xs);
}
.toc-title {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-400); margin: 0 0 12px;
}
.toc ol {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 26px;
  counter-reset: toc;
}
.toc li { counter-increment: toc; font-size: 14.5px; }
.toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--green-600);
  margin-right: 9px;
}
.toc a { color: var(--ink-700); text-decoration: none; }
.toc a:hover { color: var(--green-700); text-decoration: underline; }

/* ── Long-form prose ───────────────────────────────────────────────────── */
.ga-prose { max-width: 820px; margin: 0 auto; }
.ga-prose > * + * { margin-top: 18px; }
.ga-prose p { font-size: 16.5px; line-height: 1.75; color: var(--ink-700); }
.ga-prose h3 {
  font-size: 22px; margin-top: 40px; color: var(--ink-900);
}
.ga-prose h4 { font-size: 17px; margin-top: 28px; color: var(--ink-900); }
.ga-prose a { color: var(--green-700); font-weight: 550; text-decoration: underline; text-underline-offset: 3px; }
.ga-prose a:hover { color: var(--green-800); }
.ga-prose strong { color: var(--ink-900); font-weight: 650; }
.ga-prose ul, .ga-prose ol { padding-left: 22px; }
.ga-prose li { font-size: 16.5px; line-height: 1.72; color: var(--ink-700); margin-top: 9px; }
.ga-prose li::marker { color: var(--green-600); }
.ga-prose blockquote {
  border-left: 3px solid var(--green-300); padding-left: 20px; margin-left: 0;
  font-size: 17px; color: var(--ink-700); font-style: italic;
}
.section-dark .ga-prose p, .section-dark .ga-prose li { color: var(--green-200); }
.section-dark .ga-prose h3, .section-dark .ga-prose h4, .section-dark .ga-prose strong { color: #fff; }
.section-dark .ga-prose a { color: var(--green-300); }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.ga-card { display: flex; flex-direction: column; gap: 10px; padding: 28px; }
.ga-card .appic.lg { border: none; margin-bottom: 4px; }
.ga-card h3 { font-size: 17px; line-height: 1.35; }
.ga-card p { font-size: 14.5px; line-height: 1.62; color: var(--ink-500); }
.ga-card .powered {
  margin-top: auto; padding-top: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-400);
}
.ga-card .powered a { color: var(--green-700); font-weight: 600; text-decoration: none; }
.ga-card .powered a:hover { text-decoration: underline; }
.section-dark .ga-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.section-dark .ga-card h3 { color: #fff; }
.section-dark .ga-card p { color: var(--green-200); }

/* ── Numbered steps ────────────────────────────────────────────────────── */
.ga-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; display: grid; gap: 14px; }
.ga-step {
  display: grid; grid-template-columns: 60px 1fr; gap: 20px; align-items: start;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px 28px; box-shadow: var(--shadow-xs);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ga-step:hover { border-color: var(--green-200); box-shadow: var(--shadow-md); }
.gs-num {
  font-family: var(--font-mono); font-size: 20px; font-weight: 500;
  color: var(--green-600); line-height: 1.2;
}
.ga-step h3 { font-size: 17.5px; margin-bottom: 7px; }
.ga-step p { font-size: 15px; line-height: 1.68; color: var(--ink-500); }
.section-dark .ga-step { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.section-dark .ga-step h3 { color: #fff; }
.section-dark .ga-step p { color: var(--green-200); }
.section-dark .gs-num { color: var(--green-300); }

/* ── Comparison tables ─────────────────────────────────────────────────── */
.ga-tblwrap {
  max-width: 1000px; margin: 0 auto; overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--card); box-shadow: var(--shadow-xs);
  -webkit-overflow-scrolling: touch;
}
.ga-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.ga-table th, .ga-table td {
  text-align: left; padding: 15px 20px; font-size: 14.5px; line-height: 1.6;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.ga-table thead th {
  background: var(--green-50); color: var(--green-800);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 500; white-space: nowrap;
}
.ga-table tbody th { font-weight: 650; color: var(--ink-900); width: 24%; }
.ga-table td { color: var(--ink-600, var(--ink-500)); }
.ga-table tbody tr:last-child th, .ga-table tbody tr:last-child td { border-bottom: none; }
.ga-table tbody tr:hover { background: var(--green-50); }
.tbl-note {
  max-width: 1000px; margin: 14px auto 0; font-size: 13px; color: var(--ink-400);
  text-align: center;
}

/* ── Checklist ─────────────────────────────────────────────────────────── */
.ga-checklist { list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; display: grid; gap: 14px; }
.ga-checklist.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
.ga-checklist li {
  display: grid; grid-template-columns: 22px 1fr; gap: 13px; align-items: start;
  font-size: 15px; line-height: 1.65; color: var(--ink-500);
}
.ga-checklist strong { color: var(--ink-900); font-weight: 650; }
.ck {
  width: 20px; height: 20px; border-radius: 50%; margin-top: 2px;
  background: var(--green-100); border: 1px solid var(--green-300);
  position: relative; flex: none;
}
.ck::after {
  content: ""; position: absolute; left: 6px; top: 3px;
  width: 5px; height: 9px; border: solid var(--green-700);
  border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.section-dark .ga-checklist li { color: var(--green-200); }
.section-dark .ga-checklist strong { color: #fff; }
.section-dark .ck { background: rgba(255,255,255,.12); border-color: rgba(125,220,160,.5); }
.section-dark .ck::after { border-color: var(--green-300); }

/* ── Stats ─────────────────────────────────────────────────────────────── */
.ga-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px; max-width: 1000px; margin: 0 auto;
}
.ga-stat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 24px; box-shadow: var(--shadow-xs); text-align: center;
}
.ga-stat b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3vw, 36px); color: var(--green-700); line-height: 1.1;
}
.ga-stat span { display: block; margin-top: 9px; font-size: 13px; color: var(--ink-500); line-height: 1.5; }
.section-dark .ga-stat { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.section-dark .ga-stat b { color: var(--green-300); }
.section-dark .ga-stat span { color: var(--green-200); }

/* ── Testimonial ───────────────────────────────────────────────────────── */
.ga-quote {
  max-width: 860px; margin: 0 auto; padding: 34px 38px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); position: relative;
}
.ga-quote::before {
  content: "\201C"; position: absolute; top: 6px; left: 22px;
  font-family: var(--font-display); font-size: 74px; line-height: 1;
  color: var(--green-200);
}
.ga-quote blockquote { margin: 0; }
.ga-quote blockquote p {
  font-size: 19px; line-height: 1.62; color: var(--ink-900); font-weight: 450;
  position: relative; z-index: 1;
}
.ga-quote figcaption {
  margin-top: 18px; font-size: 13.5px; font-weight: 650; color: var(--green-700);
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
}
.q-role { font-weight: 400; color: var(--ink-400); }

/* ── FAQ accordions ────────────────────────────────────────────────────── */
.ga-faqs { max-width: 900px; margin: 0 auto; display: grid; gap: 10px; }
.ga-faq {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-xs);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ga-faq[open] { border-color: var(--green-200); box-shadow: var(--shadow-sm); }
.ga-faq summary {
  list-style: none; cursor: pointer; padding: 20px 54px 20px 24px; position: relative;
}
.ga-faq summary::-webkit-details-marker { display: none; }
.ga-faq summary h3 { font-size: 16.5px; line-height: 1.45; margin: 0; font-weight: 600; }
.ga-faq summary::after {
  content: ""; position: absolute; right: 24px; top: 26px;
  width: 10px; height: 10px; border-right: 2px solid var(--green-600);
  border-bottom: 2px solid var(--green-600); transform: rotate(45deg);
  transition: transform .2s ease;
}
.ga-faq[open] summary::after { transform: rotate(-135deg); top: 30px; }
.ga-faq summary:focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; border-radius: var(--r-md); }
.fa-body { padding: 0 30px 22px 24px; }
.fa-body p, .fa-body li { font-size: 15.5px; line-height: 1.72; color: var(--ink-500); }
.fa-body p + p, .fa-body ul { margin-top: 12px; }
.fa-body ul { padding-left: 20px; }
.fa-body li { margin-top: 7px; }
.fa-body a { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }

/* ── Definition list (glossary) ────────────────────────────────────────── */
.ga-deflist { max-width: 900px; margin: 0 auto; display: grid; gap: 12px; }
.ga-def {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 22px 26px; box-shadow: var(--shadow-xs); scroll-margin-top: 100px;
}
.ga-def dt { font-family: var(--font-display); font-size: 17.5px; font-weight: 600; color: var(--ink-900); }
.ga-def dd { margin: 8px 0 0; font-size: 15.5px; line-height: 1.72; color: var(--ink-500); }
.ga-def dd a { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }

/* ── Related links ─────────────────────────────────────────────────────── */
.rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rel-card {
  display: flex; flex-direction: column; gap: 9px; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px; box-shadow: var(--shadow-xs);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rel-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--green-200); }
.rel-card h3 { font-size: 17px; line-height: 1.35; color: var(--ink-900); }
.rel-card p { font-size: 14px; line-height: 1.6; color: var(--ink-500); }
.rel-go {
  margin-top: auto; padding-top: 14px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--green-700); font-weight: 600;
}

/* ── CTA banner ────────────────────────────────────────────────────────── */
.ga-cta {
  display: grid; grid-template-columns: 1.35fr auto; gap: 32px; align-items: center;
  background:
    radial-gradient(40rem 20rem at 85% -20%, rgba(62,196,110,.2), transparent 60%),
    linear-gradient(160deg, var(--green-950), var(--green-800));
  border-radius: var(--r-xl); padding: 46px 52px; color: #fff;
  box-shadow: var(--shadow-lg);
}
.ga-cta h2 { font-size: clamp(23px, 2.6vw, 32px); color: #fff; margin-bottom: 10px; }
.ga-cta p { font-size: 16px; line-height: 1.65; color: var(--green-200); max-width: 620px; }
.ga-cta-btns { display: flex; flex-direction: column; gap: 11px; }
.ga-cta-btns .btn-outline { border-color: rgba(255,255,255,.32); color: #fff; }
.ga-cta-btns .btn-outline:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }

/* ── Author / trust box ────────────────────────────────────────────────── */
.authorbox {
  max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 46px 1fr; gap: 18px;
  align-items: start; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px 28px; box-shadow: var(--shadow-xs);
}
.authorbox img { border-radius: 10px; }
.ab-name { font-size: 15px; line-height: 1.6; color: var(--ink-900); font-weight: 550; }
.ab-name a { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }
.ab-meta { margin-top: 8px; font-size: 12.5px; line-height: 1.65; color: var(--ink-400); }
.ab-meta time { color: var(--ink-500); }

/* ── Light stage variant ───────────────────────────────────────────────── */
.stage-lite { padding: 30px; }

/* ── Nav mega feature list ─────────────────────────────────────────────── */
.mf-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; }
.mf-list li {
  position: relative; padding-left: 20px; font-size: 13px; line-height: 1.5; color: var(--ink-500);
}
.mf-list li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px;
  border-radius: 2px; background: var(--green-400);
}

/* ── Footer additions ──────────────────────────────────────────────────── */
.footer-grid-5 { grid-template-columns: 1.55fr repeat(4, 0.85fr) 1.2fr; gap: 30px; }
.foot-since {
  margin-top: 12px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .04em; line-height: 1.7; color: #6f7a74;
}
.foot-links { display: flex; gap: 16px; }
.foot-links a { color: #8b958f; text-decoration: none; }
.foot-links a:hover { color: var(--green-300); text-decoration: underline; }

/* ── Insight/article cards ─────────────────────────────────────────────── */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.post-card {
  display: flex; flex-direction: column; gap: 10px; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px; box-shadow: var(--shadow-xs);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--green-200); }
.post-kind {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--green-700);
}
.post-card h3 { font-size: 18px; line-height: 1.34; color: var(--ink-900); }
.post-card p { font-size: 14.5px; line-height: 1.62; color: var(--ink-500); }
.post-meta {
  margin-top: auto; padding-top: 16px; display: flex; gap: 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-400);
}

/* ── Contact layout ────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
.contact-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 32px; box-shadow: var(--shadow-sm);
}
.contact-card h3 { font-size: 19px; margin-bottom: 14px; }
.contact-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.contact-lines li { display: grid; grid-template-columns: 34px 1fr; gap: 13px; align-items: start; }
.contact-lines .cl-k {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-400); display: block; margin-bottom: 3px;
}
.contact-lines .cl-v { font-size: 15px; color: var(--ink-900); line-height: 1.55; }
.contact-lines a { color: var(--green-700); text-decoration: none; }
.contact-lines a:hover { text-decoration: underline; }
.cl-ic {
  width: 34px; height: 34px; border-radius: 9px; display: inline-flex;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, #14652f, #22a852); color: #fff;
}
.cl-ic svg { width: 17px; height: 17px; }

/* ── Timeline (about page) ─────────────────────────────────────────────── */
.timeline { max-width: 880px; margin: 0 auto; position: relative; padding-left: 30px; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--green-300), var(--green-100));
}
.tl-item { position: relative; padding-bottom: 30px; }
.tl-item::before {
  content: ""; position: absolute; left: -30px; top: 6px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--card); border: 3px solid var(--green-500);
}
.tl-year {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em;
  color: var(--green-700); font-weight: 500;
}
.tl-item h3 { font-size: 18px; margin: 6px 0 7px; }
.tl-item p { font-size: 15.5px; line-height: 1.7; color: var(--ink-500); }

/* ── Logo wall ─────────────────────────────────────────────────────────── */
.logo-wall {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 940px; margin: 0 auto;
}
.logo-wall span {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .07em;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 9px 18px; color: var(--ink-700); box-shadow: var(--shadow-xs);
}
.section-dark .logo-wall span {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: #fff;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .footer-grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .rel-grid, .post-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .ga-cta { grid-template-columns: 1fr; padding: 34px 30px; }
  .ga-cta-btns { flex-direction: row; flex-wrap: wrap; }
  .toc ol { grid-template-columns: 1fr; }
  .ga-checklist.c2 { grid-template-columns: 1fr; }
  .crumbs { padding-top: 88px; }
}
@media (max-width: 700px) {
  .footer-grid-5 { grid-template-columns: 1fr 1fr; }
  .quick-answer { padding: 24px 22px 24px 24px; }
  .quick-answer p { font-size: 16px; }
  .ga-step { grid-template-columns: 42px 1fr; gap: 14px; padding: 22px; }
  .ga-quote { padding: 28px 24px; }
  .ga-quote blockquote p { font-size: 17px; }
  .authorbox { grid-template-columns: 1fr; }
  .authorbox img { display: none; }
}
@media (max-width: 520px) {
  .footer-grid-5 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .rel-card, .post-card, .ga-step { transition: none; }
}

/* ── Hero pipeline visual (service pages) ──────────────────────────────── */
.pipe-viz { display: grid; gap: 10px; justify-items: center; }
.pv-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pv-chip {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 7px 14px; color: var(--ink-700); box-shadow: var(--shadow-xs);
}
.pv-arrow { width: 2px; height: 22px; background: linear-gradient(180deg, var(--green-300), var(--green-500)); border-radius: 2px; }
.pv-arrow::after {
  content: ""; display: block; margin: 20px auto 0; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 6px solid var(--green-500);
}
.pv-core {
  display: flex; align-items: center; gap: 11px; padding: 13px 20px;
  background: linear-gradient(135deg, var(--green-950), var(--green-700));
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
}
.pv-core span {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .07em; color: var(--green-200);
}
.pv-out {
  width: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.pv-out p { font-size: 14px; color: var(--ink-700); line-height: 1.55; }
.pv-ans { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--ink-200); color: var(--ink-500) !important; }
.pv-ans b { color: var(--green-700); }
.pv-cite {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--green-50); border: 1px solid var(--green-200); color: var(--green-700);
  border-radius: 5px; padding: 2px 7px; margin-left: 6px;
}

/* ── Dark-section variants for the remaining components ────────────────── */
.section-dark .ga-tblwrap {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .13);
}
.section-dark .ga-table thead th {
  background: rgba(255, 255, 255, .07);
  color: var(--green-300);
}
.section-dark .ga-table th,
.section-dark .ga-table td { border-bottom-color: rgba(255, 255, 255, .1); }
.section-dark .ga-table tbody th { color: #fff; }
.section-dark .ga-table td { color: var(--green-200); }
.section-dark .ga-table tbody tr:hover { background: rgba(255, 255, 255, .05); }
.section-dark .tbl-note { color: rgba(255, 255, 255, .5); }

.section-dark .timeline::before {
  background: linear-gradient(180deg, var(--green-400), rgba(255, 255, 255, .12));
}
.section-dark .tl-item::before { background: var(--green-950); border-color: var(--green-400); }
.section-dark .tl-year { color: var(--green-300); }
.section-dark .tl-item h3 { color: #fff; }
.section-dark .tl-item p { color: var(--green-200); }

.section-dark .ga-def { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.13); }
.section-dark .ga-def dt { color: #fff; }
.section-dark .ga-def dd { color: var(--green-200); }
.section-dark .ga-def dd a { color: var(--green-300); }

.section-dark .ga-faq { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.13); }
.section-dark .ga-faq summary h3 { color: #fff; }
.section-dark .ga-faq summary::after { border-color: var(--green-300); }
.section-dark .fa-body p, .section-dark .fa-body li { color: var(--green-200); }
.section-dark .fa-body a { color: var(--green-300); }

.section-dark .toc { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.13); }
.section-dark .toc a { color: var(--green-200); }
.section-dark .rel-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.13); }
.section-dark .rel-card h3 { color: #fff; }
.section-dark .rel-card p { color: var(--green-200); }

/* ── Code blocks ───────────────────────────────────────────────────────── */
.ga-prose pre,
.fa-body pre {
  margin: 22px 0;
  padding: 20px 22px;
  background: #0b2716;
  border: 1px solid rgba(125, 220, 160, .22);
  border-radius: var(--r-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-sm);
  max-width: 100%;
}
.ga-prose pre code,
.fa-body pre code {
  display: block;
  font-family: var(--font-mono);
  font-size: 12.8px;
  line-height: 1.72;
  color: #d6f0e0;
  white-space: pre;
  background: none;
  padding: 0;
  border: none;
  tab-size: 2;
}
.ga-prose :not(pre) > code,
.fa-body :not(pre) > code,
.ga-def :not(pre) > code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--green-50);
  border: 1px solid var(--green-200);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--green-800);
  word-break: break-word;
}
.section-dark .ga-prose pre { background: rgba(0, 0, 0, .3); border-color: rgba(255, 255, 255, .16); }
.section-dark .ga-prose :not(pre) > code {
  background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); color: var(--green-200);
}
@media (max-width: 700px) {
  .ga-prose pre, .fa-body pre { padding: 16px; border-radius: var(--r-sm); }
  .ga-prose pre code, .fa-body pre code { font-size: 11.6px; }
}

/* ── Mobile corrections ────────────────────────────────────────────────── */
@media (max-width: 700px) {
  /* the two CTA buttons overflowed the banner by a few pixels at 390px */
  .ga-cta-btns { flex-direction: column; align-items: stretch; }
  .ga-cta-btns .btn { width: 100%; justify-content: center; text-align: center; }
  .ga-cta { padding: 30px 22px; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
}
/* WCAG 2.2 target size: list-style links are not inline exceptions, so give
   the table of contents and the breadcrumbs a real hit area. */
.toc li { padding: 3px 0; }
.toc a { display: inline-block; padding: 3px 0; min-height: 24px; }
.crumbs ol { gap: 4px 6px; }
.crumbs a, .crumbs [aria-current] { display: inline-block; padding: 5px 0; min-height: 24px; }
.rel-card, .post-card, .svc-card { min-height: 44px; }

/* The CTA grid column was sized by the longest button label, which cannot wrap,
   so the banner overflowed its own padding on a 390px screen. */
@media (max-width: 900px) {
  .ga-cta { grid-template-columns: minmax(0, 1fr); }
  .ga-cta > * { min-width: 0; }
}
@media (max-width: 700px) {
  .ga-cta-btns .btn,
  .hero-ctas .btn { white-space: normal; line-height: 1.35; }
}
.foot-links a { display: inline-block; padding: 3px 0; min-height: 24px; }

/* ── Navigation labels are not headings ────────────────────────────────────
   The mega menu and footer column titles used to be h4 and h5 elements. As real
   HTML that put an h4 before every page's h1 and jumped h2 to h5 in the footer,
   which breaks the document outline for screen readers and for any parser that
   reads structure. They are now paragraphs styled to match the originals byte
   for byte, so nothing moves visually. */
.mega-group .mega-h {
  font-family: var(--font-display); line-height: 1.12; letter-spacing: -0.025em;
  font-weight: 600; font-size: 17px;
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
}
.mega-item .mi-title {
  display: block;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--ink-900);
}
.mega-feature .mega-h4 {
  font-family: var(--font-display); line-height: 1.12; letter-spacing: -0.025em;
  font-weight: 600; font-size: 17px;
}
.footer .foot-h {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .15em;
  text-transform: uppercase; color: #66716b; margin-bottom: 16px; font-weight: 500;
}

/* Homepage industry card titles were h4 under an h2; they are h3 now and must
   keep the h4 size they were designed at. */
.ind-card h3.ind-h { font-size: 17.5px; color: #fff; margin-bottom: 8px; line-height: 1.2; }

/* A third-party claim quoted so it can be examined, not asserted. */
q.claim { font-style: italic; quotes: "\201C" "\201D"; }
q.claim::before { content: open-quote; }
q.claim::after  { content: close-quote; }

/* ── Contact form ──────────────────────────────────────────────────────────
   Outcome banners are revealed by :target, so the form reports success and
   failure with no JavaScript at all. The endpoint redirects to /contact/#sent
   or /contact/#err-<reason>. */
.cform-msg { display: none; max-width: 880px; margin: 0 auto 22px; border-radius: var(--r-lg); padding: 22px 26px; }
.cform-msg:target { display: block; }
.cform-msg:focus { outline: 2px solid var(--green-600); outline-offset: 3px; }
.cform-msg strong { display: block; font-family: var(--font-display); font-size: 18px; margin-bottom: 6px; }
.cform-msg p { font-size: 15px; line-height: 1.6; }
.cform-msg a { text-decoration: underline; text-underline-offset: 3px; }
.cform-msg.ok { background: var(--green-50); border: 1px solid var(--green-300); border-left: 4px solid var(--green-600); }
.cform-msg.ok strong { color: var(--green-800); }
.cform-msg.ok p, .cform-msg.ok a { color: var(--ink-700); }
.cform-msg.bad { background: #fdf1ef; border: 1px solid #eabfb8; border-left: 4px solid #b4342a; }
.cform-msg.bad strong { color: #8f2a21; }
.cform-msg.bad p, .cform-msg.bad a { color: var(--ink-700); }

.cform {
  max-width: 880px; margin: 0 auto; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-md);
}
.cf-head { margin-bottom: 24px; }
.cf-head h2 { font-size: clamp(22px, 2.8vw, 28px); margin-bottom: 8px; }
.cf-head p { font-size: 15px; color: var(--ink-500); line-height: 1.6; max-width: 56ch; }
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cf-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.cf-grid .cf-field { margin-bottom: 0; }
.cf-field label { font-size: 13.5px; font-weight: 600; color: var(--ink-900); display: flex; align-items: baseline; gap: 8px; }
.cf-field .req {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--green-700); background: var(--green-50); border: 1px solid var(--green-200);
  border-radius: 4px; padding: 1px 6px; font-weight: 500;
}
.cf-field input, .cf-field select, .cf-field textarea {
  font: inherit; font-size: 15px; color: var(--ink-900); background: #fff;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 11px 13px; width: 100%; transition: border-color .15s ease, box-shadow .15s ease;
}
.cf-field textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus {
  outline: none; border-color: var(--green-600); box-shadow: 0 0 0 3px var(--green-100);
}
.cf-field input:focus-visible, .cf-field select:focus-visible, .cf-field textarea:focus-visible {
  outline: 2px solid var(--green-600); outline-offset: 1px;
}
/* :user-invalid only matches after the person has actually interacted, so an
   untouched required field is not shown as an error the moment the page loads. */
.cf-field input:user-invalid, .cf-field textarea:user-invalid { border-color: #c0564b; }
.cf-help { font-size: 12.5px; color: var(--ink-400); line-height: 1.5; }
/* Honeypot. Hidden from sight and from assistive technology, so only a bot fills it. */
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 6px; }
.cf-foot .btn { flex: none; }
.cf-priv { font-size: 12.5px; color: var(--ink-400); line-height: 1.55; max-width: 46ch; }
.cf-priv a { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
  .cf-grid { grid-template-columns: 1fr; }
  .cf-foot .btn { width: 100%; justify-content: center; }
  .cf-priv { max-width: none; }
}