/* Theme for inner pages: moves the existing page components onto the approved homepage world
   (Outfit + DM Sans, homepage greens, deep footer green for bands, orange pill actions, flowing green hero field). */
:root, body[class], body {
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --head: "Outfit", system-ui, sans-serif;
  --ink: #13201a; --ink-2: #34423a; --ink-3: #5b6a60;
  --line: #dfe8da; --line-strong: #c9d6c3; --bg-soft: #f5f9f2; --bg-tint: #eef8e8;
  --green: #3c9a2e; --green-hover: #2f8326; --green-press: #276f20; --green-brand: #54b435;
  --green-deep: #1d4f22; --green-deep-2: #173f1b;
  --fresh-1: #2f8a2c; --fresh-2: #3c9a2e; --fresh-3: #54b435; --forest: #1d4f22; --mint: #eef8e8; --leaf: #54b435;
  --cta: #ee7d16; --cta-hover: #d96d0c; --cta-press: #c06108;
  --band: linear-gradient(165deg, #1d4f22, #1a4620);
  --hero-field: linear-gradient(140deg, #45ad3a, #2b8a32);
}
body { font-family: var(--font); color: var(--ink-2); background: #fff; }
h1, h2, h3, h4, .h2 { font-family: var(--head); color: var(--ink); }
h1 { font-weight: 800; letter-spacing: -.035em; line-height: 1.02; }
h2 { font-weight: 800; letter-spacing: -.03em; }
h3, h4 { font-weight: 700; letter-spacing: -.015em; }
::selection { background: #cdeebf; color: var(--ink); }
.site-header, .mobile-sheet, .action-bar, .site-footer { display: none !important; }

/* buttons: homepage pills */
.btn, .x-btn { border-radius: 999px; font-family: var(--font); font-weight: 700; }
.btn--primary, .x-btn--cta { background: var(--cta); color: #fff; box-shadow: 0 12px 26px -12px rgba(238, 125, 22, .85); }
.btn--primary:hover, .x-btn--cta:hover { background: var(--cta-hover); }
.x-btn--line, .btn--ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.x-btn--line:hover, .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ---------- page heroes: pale ground + flowing green field (homepage hero) ---------- */
.page-hero { position: relative; background: linear-gradient(180deg, #f6fbf2, #fff 75%); color: var(--ink); overflow: hidden; }
.page-hero h1 { color: var(--ink); }
.page-hero .crumbs a, .page-hero .crumbs li { color: var(--ink-3); }
.page-hero .crumbs li + li::before { color: var(--line-strong); }
.page-hero p, .page-hero .lead { color: var(--ink-2); }
.ph-ribbon, .page-hero .wv, .page-hero .lh__topline { display: none !important; }
.page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: none; }

/* service hero */
.sv-hero { background: linear-gradient(180deg, #f6fbf2, #fff 80%) !important; padding-bottom: clamp(5.5rem, 4rem + 4vw, 8rem); }
.sv-hero::before { content: ""; position: absolute; top: 0; right: 0; bottom: 70px; width: 48%; background: var(--hero-field); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 640' preserveAspectRatio='none'%3E%3Cpath d='M150 0H700V640H330C230 640 160 590 120 500C80 410 140 360 110 270C80 180 10 160 30 80C40 30 90 0 150 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 640' preserveAspectRatio='none'%3E%3Cpath d='M150 0H700V640H330C230 640 160 590 120 500C80 410 140 360 110 270C80 180 10 160 30 80C40 30 90 0 150 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.sv-hero::after { content: ""; position: absolute; top: 0; right: 0; bottom: 70px; width: 48%; height: auto; background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask: inherit; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 640' preserveAspectRatio='none'%3E%3Cpath d='M150 0H700V640H330C230 640 160 590 120 500C80 410 140 360 110 270C80 180 10 160 30 80C40 30 90 0 150 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 640' preserveAspectRatio='none'%3E%3Cpath d='M150 0H700V640H330C230 640 160 590 120 500C80 410 140 360 110 270C80 180 10 160 30 80C40 30 90 0 150 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.sv-hero .wrap { position: relative; z-index: 1; }
.sv-hero h1 { color: var(--ink); font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); }
.sv-hero .lead { color: var(--ink); font-weight: 500; }
.sv-hero .x-btn--line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.sv-hero .crumbs a, .sv-hero .crumbs li { color: var(--ink-3) !important; }
.sv-art { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .25)); }
.sv-hang { position: relative; z-index: 2; background: transparent; }
.sv-hang .rate { border-radius: 20px; box-shadow: 0 0 0 1px var(--line), 0 22px 44px -24px rgba(19, 32, 26, .38); }
.sv-hang .rate__price { color: var(--green); font-family: var(--head); font-weight: 800; letter-spacing: -.03em; }
.sv-notes li { border-radius: 16px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.sv-notes li::before { background: var(--green); box-shadow: 0 0 0 4px #e1f2d8; }

/* guide / read heroes: pale with the homepage grid */
.rd-hero { background: linear-gradient(180deg, #f2faec, #fff 85%); }
.rd-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(60, 154, 46, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 154, 46, .08) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); pointer-events: none; }
.rd-hero > * { position: relative; }
.rd-feature, .rd-hero .rd-card { border-radius: 26px; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -32px rgba(19, 32, 26, .45); }
.rd-chips { border-top: 0 !important; }
.rd-chips a { border-radius: 999px; font-family: var(--font); }
.rd-chips a.is-active, .rd-chips a[aria-current] { background: var(--green); color: #fff; }

/* ---------- green bands use the footer's deep green with a faint grid ---------- */
.flowx, .rd-band, .sv-ask--green .sv-ask__inner, .ab-mv { background: var(--band) !important; }
.flowx::before { opacity: 1; background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 40px 40px; }
.flowx .flow__demo { border-radius: 20px; }
.flowx .flow::after { background: var(--cta); }
.flowx.flowx--epc .flow__step { border-radius: 24px; }

/* question rows and cards */
.qa { border-top-color: var(--line); }
.qa--2 { border-top: 1px solid var(--line); }
.qa__ic { border-radius: 14px; background: #eef8e8; color: var(--green); }
.qa--2 .qa__ic { background: var(--green); color: #fff; }
.qa h2 { font-family: var(--head); }
mark.fact { background: #e4f3dc; color: #1d4f22; }
.ic-cards li, .prose .ic-cards li, .tipband, .acc__item, .era__col, .callout, .faq details, .ct-tile, .wz-card, .rd-feature { border-radius: 20px; }
.ic-card__ic, .acc__ic { background: #eef8e8; color: var(--green); }
.acc__item.is-open .acc__n { background: var(--cta); }

/* closing blocks */
.sv-end, .sv-close { background: #fff; }
.sv-end__combi { border-radius: 20px; }
.partners { background: #fff; }

/* forms / wizard */
.wz-page { background: linear-gradient(180deg, #f2faec, #fff 70%); }
.wz-card, .ct-form, .form-card { border-radius: 26px; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -32px rgba(19, 32, 26, .4); }
input, textarea, select, .dp__field { border-radius: 14px !important; font-family: var(--font); }
input:focus, textarea:focus, select:focus { border-color: var(--green) !important; box-shadow: 0 0 0 4px rgba(60, 154, 46, .16) !important; outline: 0; }
.wz-svc input:checked + .wz-svc__body, .types button[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--green); background: #eef8e8; }

@media (max-width: 1000px) {
  .sv-hero::before, .sv-hero::after { width: 100%; top: auto; height: 46%; bottom: 60px; }
}

/* service hero: beat the old white-on-green rules */
body.page-service .page-hero { color: var(--ink); background: linear-gradient(180deg, #f6fbf2, #fff 80%); }
body.page-service .page-hero h1 { color: var(--ink); }
body.page-service .page-hero .lead { color: var(--ink); }
body.page-service .page-hero p { color: var(--ink-2); }
body.page-service .page-hero p strong { color: var(--ink); }
body.page-service .page-hero a:not(.btn):not(.x-btn) { color: var(--ink-2); }
body.page-service .crumbs, body.page-service .crumbs a { color: var(--ink-3); }
body.page-service .crumbs [aria-current] { color: var(--ink); }
body.page-service .crumbs li + li::before { color: var(--line-strong); }
body.page-service .page-hero .x-btn--line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
body.page-service .page-hero a:focus-visible, body.page-service .page-hero button:focus-visible { outline-color: #1d6fe0; }
body.page-service .sv-hero::before { opacity: 1; z-index: 0; inset: 0 0 70px auto; }
body.page-service .sv-hero::after { z-index: 0; }
body.page-service .rate, body.page-service .rate__name { color: var(--ink); }
body.page-service .rate { background: #fff; }
.page-read .rd-hero::after, .page-hero::after { display: none !important; }

body.page-service .sv-hero { z-index: 1; }
body.page-service .sv-hang { z-index: 4; }
body.page-service .sv-hero::before { background: var(--hero-field); background-image: var(--hero-field); }
body.page-service .sv-hero::after { background-color: transparent; }

/* hero field as one painted shape (no masks: old rules mask the pseudo-elements) */
body.page-service .sv-hero::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 640' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2345ad3a'/%3E%3Cstop offset='1' stop-color='%232b8a32'/%3E%3C/linearGradient%3E%3Cpattern id='p' width='36' height='36' patternUnits='userSpaceOnUse'%3E%3Cpath d='M36 0H0V36' fill='none' stroke='rgba%28255,255,255,.16%29'/%3E%3C/pattern%3E%3Cpath id='s' d='M150 0H700V640H330C230 640 160 590 120 500C80 410 140 360 110 270C80 180 10 160 30 80C40 30 90 0 150 0Z'/%3E%3C/defs%3E%3Cuse href='%23s' fill='url%28%23g%29'/%3E%3Cuse href='%23s' fill='url%28%23p%29'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; -webkit-mask: none; mask: none; opacity: 1; }
body.page-service .sv-hero::after { display: none; }

@media (max-width: 1000px) {
  body.page-service .sv-hero::before { display: none; }
  body.page-service .sv-hero__art { position: relative; isolation: isolate; padding: 1.5rem 0; }
  body.page-service .sv-hero__art::before { content: ""; position: absolute; inset: 0 calc(-1 * clamp(1rem, 4vw, 2.5rem)) 0 8%; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 640' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2345ad3a'/%3E%3Cstop offset='1' stop-color='%232b8a32'/%3E%3C/linearGradient%3E%3Cpattern id='p' width='36' height='36' patternUnits='userSpaceOnUse'%3E%3Cpath d='M36 0H0V36' fill='none' stroke='rgba%28255,255,255,.16%29'/%3E%3C/pattern%3E%3Cpath id='s' d='M150 0H700V640H330C230 640 160 590 120 500C80 410 140 360 110 270C80 180 10 160 30 80C40 30 90 0 150 0Z'/%3E%3C/defs%3E%3Cuse href='%23s' fill='url%28%23g%29'/%3E%3Cuse href='%23s' fill='url%28%23p%29'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; border-radius: 0; }
}

/* ===== reading sections as a magazine article: sticky contents + one reading column ===== */
.rd-qa { padding-block: clamp(2.5rem, 2rem + 2vw, 4.5rem) clamp(3.5rem, 2.5rem + 3vw, 6rem); }
.rd-qa > .wrap { display: grid; grid-template-columns: 230px minmax(0, 760px); justify-content: center; column-gap: clamp(2.5rem, 1rem + 4vw, 5rem); align-items: start; }
.rd-qa > .wrap > .qa { grid-column: 2; }
.rd-toc { grid-column: 1; grid-row: 1 / span 60; position: sticky; top: 110px; align-self: start; padding: 1.1rem 1.1rem 1.2rem; border-radius: 22px; background: #f2faec; }
.rd-toc p { margin: 0 0 .6rem .4rem; font: 700 .75rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.rd-toc ol { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.rd-toc a { display: block; padding: .45rem .6rem; border-radius: 10px; font: 500 .875rem/1.35 var(--font); color: var(--ink-2); text-decoration: none; transition: background-color .15s, color .15s; }
.rd-toc a.sub { padding-left: 1.3rem; font-size: .8125rem; color: var(--ink-3); }
.rd-toc a:hover { background: #fff; color: var(--ink); }
.rd-toc a.is-active { background: #fff; color: var(--green-deep); font-weight: 700; box-shadow: inset 3px 0 0 var(--green); }
.rd-toc__bar { height: 4px; margin: 0 .4rem .9rem; border-radius: 2px; background: #dcebd3; overflow: hidden; }
.rd-toc__bar i { display: block; height: 100%; background: linear-gradient(90deg, #d8302a, #ec6a24, #f6a31e, #f2d21a, #8cc63f, #2e9a3e); transform-origin: left; transform: scaleX(var(--read, 0)); }

.rd-qa .qa { display: block; margin: 0; padding: 2.75rem 0 0; border: 0 !important; background: none !important; box-shadow: none; scroll-margin-top: 110px; }
.rd-qa .qa:first-of-type { padding-top: 0; }
.rd-qa .qa__stick { position: static; display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
.rd-qa .qa__ic { width: 42px; height: 42px; margin: 0; flex: none; border-radius: 13px; background: #eef8e8; color: var(--green); }
.rd-qa .qa__ic .ic { width: 21px; height: 21px; }
.rd-qa .qa h2, .rd-qa .qa--3 .qa__q h2 { flex: 1 1 0; min-width: 0; font: 800 clamp(1.5rem, 1.25rem + .8vw, 1.95rem)/1.15 var(--head); letter-spacing: -.025em; color: var(--ink); }
.rd-qa .qa__stick .cert-fig--side { flex-basis: 100%; max-width: 300px; margin: 1.25rem 0 0; }
.rd-qa .qa__a.prose { max-width: none; margin-top: 1.1rem; font-size: 1.125rem; line-height: 1.75; color: var(--ink-2); }
.rd-qa .qa__a.prose > p { max-width: none; }
.rd-qa .qa__a.prose .p-lead { font: 600 clamp(1.2rem, 1.1rem + .4vw, 1.375rem)/1.5 var(--head); letter-spacing: -.01em; color: var(--ink); }
.rd-qa .qa__a.prose > * + * { margin-top: 1rem; }

/* chapter openers: big heading with the label spectrum above it */
.rd-qa .qa--2 { padding-top: 4rem; }
.rd-qa .qa--2:first-of-type { padding-top: 0; }
.rd-qa .qa--2 .qa__q::before { content: ""; display: block; width: 72px; height: 6px; margin-bottom: 1.4rem; border-radius: 3px; background: linear-gradient(90deg, #d8302a, #ec6a24, #f6a31e, #f2d21a, #8cc63f, #2e9a3e); }
.rd-qa .qa--2 .qa__ic { display: none; }
.rd-qa .qa--2 h2 { font-size: clamp(2.1rem, 1.5rem + 2vw, 3rem) !important; line-height: 1.05; letter-spacing: -.035em; }
.rd-qa .qa--2 .qa__a.prose .p-lead { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); }
.rd-qa .qa--wide .qa__a.prose { max-width: none; }
.rd-qa .ic-cards li, .rd-qa .acc__item, .rd-qa .tipband, .rd-qa .era__col { border-radius: 18px; }

/* hide the chip row where the side contents take over */
@media (min-width: 1001px) { .page-read .rd-chips { display: none; } }
@media (max-width: 1000px) {
  .rd-qa > .wrap { grid-template-columns: minmax(0, 1fr); }
  .rd-qa > .wrap > .qa { grid-column: 1; }
  .rd-toc { display: none; }
  .rd-qa .qa__a.prose { font-size: 1.0625rem; }
}
.rd-qa .qa__q { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
.rd-qa .qa__q > .qa__stick { flex: 1 1 100%; }
.rd-qa .qa--2 .qa__q::before { flex-basis: 100%; margin-bottom: .5rem; }
.rd-qa .qa__stick .cert-fig--side { order: 3; float: none !important; position: static !important; width: 100%; max-width: 280px; margin: 1.25rem 0 0 !important; transform: none; }
.rd-qa .qa--2 .qa__q::before { flex: 0 0 auto; width: 72px; max-width: 72px; }
.rd-qa .qa--2 .qa__q { row-gap: .3rem; }
.rd-qa .qa__stick { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .85rem; }
.rd-qa .qa__stick > h2:first-child { grid-column: 1 / -1; }
.rd-qa .qa__stick .cert-fig--side { grid-column: 1 / -1; justify-self: start; }