/* ============================================================
   GTM practice sections — Problem, Fit + Diff, Engagement,
   Logos, Final CTA + hero trust line. Builds on abmp3.css +
   scroll.css tokens. Prefix: .gs-*  (+ .sd-trust for hero)
   ============================================================ */

/* ---------- section framing (bands + eyebrows) ---------- */
:root { --gs-red: #BC4B33; }  /* terracotta red, harmonized with the cream/coral palette */
.gs-band { background: var(--abm-paper-2); border-top: 1px solid var(--abm-line); border-bottom: 1px solid var(--abm-line); position: relative; overflow: hidden; }
.gs-band + .gs-band { border-top: 0; }
.gs-band-lines { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.gs-band-lines span { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--abm-line); opacity: 0.5; }
.gs-band > .sd-wrap { position: relative; z-index: 1; }

.gs-eyebrow { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.gs-eyebrow .bar { width: 26px; height: 1px; background: var(--abm-ember); }
.gs-eyebrow-n { font-family: var(--abm-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--abm-faint); font-variant-numeric: tabular-nums; }
.gs-eyebrow-l { font-family: var(--abm-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--abm-ember); }
.gs-eng-head, .gs-final-head { text-align: center; margin-bottom: 36px; }
.gs-eng-head .gs-eyebrow, .gs-final-head .gs-eyebrow { margin-bottom: 0; }

/* ---------- hero trust microcopy ---------- */
.sd-trust {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 26px auto 0; padding: 0;
}
.sd-trust-ava {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--abm-ember); color: #fff;
  font-family: var(--abm-serif); font-style: italic; font-size: 16px; line-height: 1;
}
.sd-trust-txt { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--abm-ink); }
.sd-trust-dim { color: var(--abm-muted); font-weight: 400; }

/* ============================================================
   THE PROBLEM
   ============================================================ */
.gs-problem-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px 56px;
  align-items: start; margin-top: 22px;
}
.gs-problem-h { max-width: 15ch; }
.gs-problem-body { margin-top: 6px; max-width: 50ch; }
.gs-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 52px; }
.gs-chip {
  display: flex; flex-direction: column; gap: 4px;
  padding: 22px 22px 24px; background: var(--abm-card);
  border: 1px solid var(--abm-line); position: relative;
}
.gs-chip-dot { position: absolute; left: 0; top: 0; width: 8px; height: 8px; }
.gs-chip-a { font-family: var(--abm-display); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--abm-ink); }
.gs-chip-b { font-family: var(--abm-display); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--abm-ember); }

@media (max-width: 860px) {
  .gs-problem-grid { grid-template-columns: 1fr; gap: 18px; }
  .gs-chips { grid-template-columns: 1fr; }
}

/* ============================================================
   FIT + DIFFERENTIATION
   ============================================================ */
/* problem + fit share one centered intro rhythm */
.gs-problem-head { max-width: 1040px; margin: 0 auto; text-align: center; }
.gs-problem-h2 { margin: 0 auto; max-width: 26ch; }
.gs-problem-lede { margin: 20px auto 0; max-width: 70ch; }

.gs-fit-head { max-width: 1040px; margin: 0 auto; text-align: center; }
.gs-fit-h { max-width: 26ch; margin: 0 auto; }
.gs-fit-lede { max-width: 74ch; margin: 20px auto 0; }

.gs-fitcols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 52px; align-items: stretch; }
.gs-fitcols > * { display: flex; }
.gs-fitcol { padding: 32px 32px 30px; border: 1px solid var(--abm-line); background: var(--abm-card); width: 100%; display: flex; flex-direction: column; }
.gs-fitcol .gs-fitcol-foot { margin-top: auto; }
.gs-fitcol--yes { border-top: 3px solid var(--abm-ember); }
.gs-fitcol--no { border-top: 3px solid var(--gs-red); }
.gs-fitcol-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.gs-fitcol-no { font-family: var(--abm-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--abm-faint); }
.gs-fitcol-tag {
  font-family: var(--abm-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 5px 10px;
}
.gs-fitcol-tag--yes { background: var(--abm-ember); color: #fff; }
.gs-fitcol-tag--no { background: var(--gs-red); color: #fff; }
.gs-mk--yes { background: var(--abm-ember); color: #fff; }
.gs-mk--no { background: rgba(188,75,51,0.12); color: var(--gs-red); font-size: 15px; line-height: 1; font-weight: 700; }
.gs-fitcol-sub { font-family: var(--abm-display); font-size: 21px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 22px; color: var(--abm-ink); max-width: 26ch; }
.gs-fitlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.gs-fitlist li { display: flex; gap: 13px; font-size: 15.5px; line-height: 1.5; color: var(--abm-ink-2); }
.gs-mk { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; margin-top: 1px; }
.gs-fitcol-foot {
  margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--abm-line);
  font-size: 14px; font-weight: 500; color: var(--abm-ink); letter-spacing: -0.01em;
}
.gs-fitcol--no .gs-fitcol-foot { border-top-color: var(--abm-line); color: var(--abm-ink); }

/* differentiation table */
.gs-diff { margin-top: 56px; }
.gs-diff-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--abm-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--abm-muted); margin: 0 auto 14px;
}
.gs-diff-dot { width: 9px; height: 9px; flex: 0 0 auto; }
.gs-diff-dot--g { background: var(--abm-ember); }
.gs-diff-dot--r { background: var(--gs-red); margin-left: -4px; }
.gs-diff-sub { font-family: var(--abm-display); font-size: 22px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; margin: 0 auto 24px; max-width: 44ch; text-align: center; color: var(--abm-ink); }
.gs-diff-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--abm-line); }
.gs-difftable { min-width: 880px; background: var(--abm-card); }
.gs-tr { display: grid; grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(150px, 1fr)); }
.gs-tr:not(:last-child) { border-bottom: 1px solid var(--abm-line); }
.gs-tr--head { background: var(--abm-ink); }
.gs-th { padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 6px; border-left: 1px solid rgba(255,255,255,0.1); }
.gs-th--row { border-left: 0; }
.gs-th-label { font-family: var(--abm-display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: #F4F1EA; line-height: 1.15; }
.gs-th-note { font-family: var(--abm-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; color: var(--abm-amber); }
.gs-th--hi { background: var(--abm-ember); border-left-color: var(--abm-ember); }
.gs-th--hi .gs-th-label, .gs-th--hi .gs-th-note { color: #fff; }
.gs-td { padding: 15px 16px; font-size: 14px; line-height: 1.4; color: var(--abm-ink-2); border-left: 1px solid var(--abm-line); display: flex; align-items: center; }
.gs-td--row { border-left: 0; font-weight: 600; color: var(--abm-ink); font-size: 14.5px; background: var(--abm-paper-2); }
.gs-td--hi { background: rgba(0,109,78,0.09); border-left-color: rgba(0,109,78,0.3); box-shadow: inset 0 0 0 1px rgba(0,109,78,0.05); }
.gs-yes { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--abm-ember); }
.gs-yes svg { width: 14px; height: 14px; }
.gs-no { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--gs-red); }
.gs-no-x { display: grid; place-items: center; width: 14px; height: 14px; font-size: 15px; line-height: 1; font-weight: 700; }

@media (max-width: 860px) {
  .gs-fitcols { grid-template-columns: 1fr; }
}

/* ============================================================
   THE ENGAGEMENT
   ============================================================ */
.gs-eng-h { max-width: 24ch; margin-top: 22px; }
.gs-eng-lede { max-width: 70ch; }

.gs-embed { margin-top: 54px; }
.gs-embed-label, .gs-work-label { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.gs-embed-label .bar, .gs-work-label .bar { width: 24px; height: 1px; background: var(--abm-ember); }
.gs-embed-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; margin: 0; }
.gs-embed-item { padding: 22px 0; border-top: 1px solid var(--abm-line); }
.gs-embed-item dt {
  font-family: var(--abm-display); font-size: 18px; font-weight: 600; letter-spacing: -0.015em;
  line-height: 1.25; color: var(--abm-ink); display: flex; gap: 12px; align-items: baseline;
}
.gs-embed-n { font-family: var(--abm-mono); font-size: 12px; font-weight: 600; color: var(--abm-ember); flex: 0 0 auto; }
.gs-embed-item dd { margin: 8px 0 0 34px; font-size: 15px; line-height: 1.5; color: var(--abm-ink-2); }

.gs-work-label { margin-top: 60px; }
.gs-work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.gs-work { padding: 30px 30px 32px; background: var(--abm-card); border: 1px solid var(--abm-line); height: 100%; }
.gs-work-top { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.gs-work-n { font-family: var(--abm-mono); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: var(--abm-faint); }
.gs-work-ic { width: 34px; height: 34px; display: grid; place-items: center; background: var(--abm-paper-2); border: 1px solid var(--abm-line); color: var(--abm-ember); flex: 0 0 auto; }
.gs-work-tag {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--abm-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--abm-blue); background: rgba(14,79,84,0.08); padding: 5px 9px;
}
.gs-work-tag svg { width: 11px; height: 11px; }
.gs-work-title { font-family: var(--abm-display); font-size: 23px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; margin: 0; color: var(--abm-ink); }
.gs-work-sub { font-size: 15px; font-weight: 400; color: var(--abm-muted); font-style: italic; font-family: var(--abm-serif); letter-spacing: 0; }
.gs-work-one { margin: 14px 0 0; font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--abm-ink); }
.gs-work-body { margin: 12px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--abm-ink-2); }

/* founder strip */
.gs-founder {
  margin-top: 56px; display: grid; grid-template-columns: auto 1fr; gap: 28px;
  align-items: start; padding: 36px 38px; background: var(--abm-ink); color: #F4F1EA;
}
.gs-founder-ava {
  width: 76px; height: 76px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%;
  background: var(--abm-ember); color: #fff; font-family: var(--abm-serif); font-style: italic; font-size: 38px; line-height: 1;
}
.gs-founder-h { font-family: var(--abm-display); font-size: 28px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; margin: 4px 0 0; color: #F6F3EC; }
.gs-founder-bio { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: rgba(244,241,234,0.72); max-width: 78ch; }
.gs-founder-bio strong { color: #F6F3EC; font-weight: 600; }
.gs-founder-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.gs-stat { display: flex; flex-direction: column; gap: 4px; padding: 16px 22px 16px 18px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); min-width: 150px; }
.gs-stat-big { font-family: var(--abm-display); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: #fff; line-height: 1; }
.gs-stat-lab { font-family: var(--abm-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(244,241,234,0.55); }

@media (max-width: 860px) {
  .gs-embed-list { grid-template-columns: 1fr; }
  .gs-work-grid { grid-template-columns: 1fr; }
  .gs-founder { grid-template-columns: 1fr; }
}

/* ============================================================
   LOGOS — marquee
   ============================================================ */
.gs-logos { padding: 64px 0 72px; }
.gs-logos-intro {
  text-align: center; max-width: 56ch; margin: 0 auto 40px;
  font-size: 15px; line-height: 1.5; color: var(--abm-muted); letter-spacing: -0.005em;
}
.gs-marquee { position: relative; overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.gs-marquee-track { display: flex; align-items: center; gap: 64px; width: max-content; animation: gs-marquee 52s linear infinite; }
.gs-logo { height: 30px; width: auto; object-fit: contain; flex: 0 0 auto;
  filter: grayscale(1); opacity: 0.5; transition: opacity .2s, filter .2s; }
.gs-logo:hover { filter: grayscale(0); opacity: 1; }
@keyframes gs-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .gs-marquee-track { animation: none; } }

/* ============================================================
   FINAL CTA
   ============================================================ */
.gs-final-panel {
  position: absolute; left: 26px; right: 26px; top: 26px; bottom: 26px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.gs-final-line { font-family: var(--abm-display); font-size: 27px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; color: #fff; max-width: 18ch; text-shadow: 0 2px 18px rgba(4,18,12,0.4); }
.gs-final-foot { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; margin-top: 34px; }
.gs-final-micro { margin: 0; font-size: 16px; line-height: 1.55; color: var(--abm-ink-2); }
.gs-final-diag { margin: 0; font-size: 15px; line-height: 1.55; color: var(--abm-muted); padding-left: 28px; border-left: 1px solid var(--abm-line); }
.gs-final-diag strong { color: var(--abm-ink); font-weight: 600; }
.gs-final-diag a { color: var(--abm-ember); text-decoration: none; border-bottom: 1px solid rgba(0,109,78,0.4); }
.gs-final-diag a:hover { border-bottom-color: var(--abm-ember); }

@media (max-width: 860px) {
  .gs-final-line { font-size: 22px; }
  .gs-final-foot { grid-template-columns: 1fr; gap: 20px; }
  .gs-final-diag { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--abm-line); }
}