/* gc-sections.css — shared component kit for sprint-added sections on SEO hub pages (2026-09-09).
   Page-agnostic: inherits the page's font, sizes from em/rem, colours via tokens with brand fallbacks.
   Every component reads correctly with CSS only; gc-sections.js adds tabs, the calculator and bar animation.
   Namespace: .gcs-*  (a page may set --gcs-accent / --gcs-accent-2 / --gcs-ink / --gcs-muted / --gcs-line / --gcs-soft). */
.gcs{--a:var(--gcs-accent,#0f5c47);--a2:var(--gcs-accent-2,#c8532b);--ink:var(--gcs-ink,#1c2430);--mut:var(--gcs-muted,#5f6b78);
  --line:var(--gcs-line,#e3e6e1);--soft:var(--gcs-soft,#f4f6f2);--r:10px;font-family:inherit;color:var(--ink);line-height:1.55;box-sizing:border-box}
.gcs *,.gcs *::before,.gcs *::after{box-sizing:inherit}
.gcs p{margin:0 0 .8em}
.gcs h3{margin:1.4em 0 .5em;font-size:1.15em;line-height:1.3}
.gcs-src{display:block;margin:.5em 0 1.2em;font-size:.8em;color:var(--mut)}

/* anchored headings on pages that load the kit clear the 56px fixed nav */
h2[id],.gcs[id]{scroll-margin-top:76px}

/* 1. Quick answer */
.gcs-quick{border-left:4px solid var(--a);background:var(--soft);padding:.9em 1.1em;border-radius:0 var(--r) var(--r) 0;margin:0 0 1.4em}
.gcs-quick strong:first-child{color:var(--a)}

/* 2. Stat cards */
.gcs-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:1em 0 1.4em}
.gcs-stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px 12px}
.gcs-stat b{display:block;font-size:2em;line-height:1;letter-spacing:-.02em;color:var(--a);font-variant-numeric:tabular-nums}
.gcs-stat span{display:block;margin-top:6px;font-size:.88em;color:var(--mut)}
@media (max-width:480px){.gcs-stats{grid-template-columns:1fr 1fr}.gcs-stat:last-child:nth-child(odd){grid-column:1/-1}}

/* 3. Data bars (CSS-only; --v = value, --m = max on the list) */
.gcs-bars{list-style:none;margin:1em 0 .4em;padding:0;--m:100}
.gcs-bars li{display:grid;grid-template-columns:minmax(120px,32%) 1fr auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.gcs-bars li:last-child{border-bottom:0}
.gcs-bars .l{font-size:.92em}
.gcs-bars .t{position:relative;height:10px;background:var(--soft);border-radius:5px;overflow:hidden}
.gcs-bars .t::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--v)/var(--m)*100%);background:var(--a);border-radius:5px;transition:width .6s ease}
.gcs-bars li.alt .t::after{background:var(--a2)}
.gcs-bars .v{font-variant-numeric:tabular-nums;font-size:.9em;font-weight:600;min-width:3.5em;text-align:right}
@media (prefers-reduced-motion:reduce){.gcs-bars .t::after{transition:none}}
@media (max-width:480px){.gcs-bars li{grid-template-columns:1fr auto}.gcs-bars .t{grid-column:1/-1;order:3}}

/* 4. Decision ladder (details/summary: interactive without JS) */
.gcs-ladder{margin:1em 0 1.4em;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.gcs-rung{border-top:1px solid var(--line)} .gcs-rung:first-child{border-top:0}
.gcs-rung summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px}
.gcs-rung summary>*{min-width:0}
.gcs-rung summary::-webkit-details-marker{display:none}
.gcs-rung summary:hover{background:var(--soft)}
.gcs-if{font-size:.72em;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.gcs-then{font-weight:600}
.gcs-then em{font-style:normal;color:var(--a)}
.gcs-rung summary::after{content:"+";font-size:1.3em;line-height:1;color:var(--mut);width:1em;text-align:center}
.gcs-rung[open] summary::after{content:"−"}
.gcs-rung > div{padding:0 14px 14px 14px;color:var(--ink)}
@media (max-width:480px){.gcs-rung summary{grid-template-columns:1fr auto}.gcs-if{grid-column:1/-1}}

/* 5. Tabs (JS; without JS every panel shows, stacked, with its heading) */
.gcs-tabs{margin:1em 0 1.4em}
.gcs-tablist{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:0}
.gcs-tab{appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:6px 14px;font:inherit;font-size:.9em;cursor:pointer}
.gcs-tab[aria-selected="true"]{background:var(--a);border-color:var(--a);color:#fff}
.gcs-tab:focus-visible{outline:2px solid var(--a2);outline-offset:2px}
.gcs-panel{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:#fff}
.gcs-panel+.gcs-panel{margin-top:10px}
.gcs-panel>h4{margin:0 0 .5em;font-size:1em}
.gcs-tabs.is-js .gcs-panel[hidden]{display:none} .gcs-tabs.is-js .gcs-panel>h4{display:none} .gcs-tabs:not(.is-js) .gcs-tablist{display:none}

/* 6. Responsive comparison table (stacks at 480 using data-label) */
.gcs-table-wrap{overflow-x:auto;margin:1em 0 1.4em;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.gcs-table{width:100%;border-collapse:collapse;font-size:.92em}
.gcs-table th,.gcs-table td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.gcs-table th{background:var(--soft);font-size:.78em;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.gcs-table tr:last-child td{border-bottom:0}
.gcs-table td:first-child{font-weight:600}
.gcs-table .yes{color:var(--a);font-weight:700} .gcs-table .no{color:var(--a2);font-weight:700}
@media (max-width:480px){
  .gcs-table.stack thead{display:none}
  .gcs-table.stack tr{display:block;padding:8px 0;border-bottom:1px solid var(--line)}
  .gcs-table.stack td{display:grid;grid-template-columns:38% 1fr;gap:8px;border:0;padding:4px 12px}
  .gcs-table.stack td::before{content:attr(data-label);font-size:.75em;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
  .gcs-table.stack td:first-child{grid-template-columns:1fr;font-size:1.02em}.gcs-table.stack td:first-child::before{display:none}}

/* 7. Timeline (dates or steps) */
.gcs-timeline{list-style:none;margin:1em 0 1.4em;padding:0;position:relative}
.gcs-timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line)}
.gcs-timeline li{position:relative;padding:0 0 14px 32px}
.gcs-timeline li::before{content:"";position:absolute;left:3px;top:6px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--a)}
.gcs-timeline li.now::before{background:var(--a2);border-color:var(--a2)}
.gcs-timeline time,.gcs-timeline .when{display:block;font-size:.78em;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);font-weight:700}

/* 8. Calculator (JS; declared formula; without JS it reads as a worked example) */
.gcs-calc{border:1px solid var(--line);border-radius:var(--r);padding:16px;background:#fff;margin:1em 0 1.4em;display:grid;gap:12px}
.gcs-calc label{display:grid;gap:4px;font-size:.9em;color:var(--mut)}
.gcs-calc input,.gcs-calc select{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:6px;color:var(--ink);width:100%}
.gcs-calc .gcs-out{background:var(--soft);border-radius:8px;padding:12px 14px}
.gcs-calc .gcs-out b{font-size:1.6em;color:var(--a);font-variant-numeric:tabular-nums}
.gcs-calc .gcs-out span{display:block;font-size:.82em;color:var(--mut);margin-top:2px}
.gcs-calc .gcs-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}