/* ============================================================
   GrowthScaler — web/site.css
   Re-skin of the full marketing site against the OrbAI Light
   design system. Tokens come from colors_and_type.css.
   Built fresh — design system used as tokens + style guide only.
   ============================================================ */

@import url("colors_and_type.css");

/* ---------- base / chrome ---------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body  { margin: 0; }

a { text-decoration: none; color: inherit; }

img, svg { display: block; max-width: 100%; }

.gs-container {
  max-width: var(--w-chrome);
  margin: 0 auto;
  padding: 0 32px;
}
.gs-container--narrow { max-width: var(--w-wide); }
.gs-container--body   { max-width: var(--w-standard); }

.gs-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}
.gs-on-dark .gs-eyebrow { color: rgba(255,255,255,0.6); }

.gs-mono-num {
  font-family: var(--font-mono);
  font-size: var(--t-section-num);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-mono);
  color: var(--graphite);
  opacity: 0.8;
  display: inline-block;
}
.gs-on-dark .gs-mono-num { color: rgba(255,255,255,0.7); opacity: 1; }

.gs-nav-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px 4px;
  border-radius: var(--r-pill);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  line-height: 1;
  color: #fff;
  background: var(--gradient-accent);
  white-space: nowrap;
}

.gs-arrow {
  font-family: var(--font-mono);
  font-weight: var(--w-regular);
  font-size: 0.9em;
  transition: transform var(--dur) var(--ease);
  display: inline-block;
}
a:hover .gs-arrow,
.gs-btn:hover .gs-arrow { transform: translateX(3px); }

/* ---------- section scaffold ------------------------------- */
.gs-section { padding: 100px 0; position: relative; }
.gs-section--warm { background: var(--surface-warm); }
.gs-section--dark { background: var(--graphite-deep); color: #fff; }

@media (max-width: 900px) { .gs-section { padding: 72px 0; } }
@media (max-width: 600px) { .gs-section { padding: 56px 0; } }

.gs-section-head {
  display: grid;
  gap: 16px;
  max-width: 720px;
  margin: 0 0 64px;
}
.gs-section-head .gs-mono-num { margin-bottom: 4px; }
.gs-section-head h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: var(--w-extrabold);
  letter-spacing: var(--tr-h2);
  line-height: var(--lh-heading);
  color: var(--graphite);
  margin: 0;
  text-wrap: balance;
}
.gs-section-head h2 em {
  font-style: italic;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.gs-section-head__lede {
  font-size: 18px;
  color: var(--fg-2);
  line-height: 1.6;
  max-width: 640px;
  margin: 0;
}

/* ---------- buttons ---------------------------------------- */
.gs-btn {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--w-semibold);
  padding: 12px 22px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.gs-btn:focus-visible { outline: 2px solid #000; outline-offset: 4px; }

.gs-btn--primary {
  background: #000;
  color: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-button);
}
.gs-btn--primary:hover { background: var(--graphite); }

.gs-btn--secondary {
  background: var(--surface);
  color: #000;
  border-radius: 0;
  border-color: var(--surface-border);
}
.gs-btn--secondary:hover { background: var(--surface-warm); }

.gs-btn--ghost {
  background: transparent;
  color: var(--graphite);
  padding: 12px 0;
  border-radius: 0;
}
.gs-btn--ghost:hover { color: #000; }

.gs-btn--lg { font-size: 16px; padding: 16px 28px; }
.gs-btn--sm { font-size: 13px; padding: 9px 16px; }

.gs-on-dark .gs-btn--primary {
  background: #fff;
  color: #000;
}
.gs-on-dark .gs-btn--primary:hover { background: var(--surface-warm); }

.gs-on-dark .gs-btn--secondary {
  background: rgba(255,255,255,0.04);
  color: #fff;
  border-color: rgba(255,255,255,0.16);
}
.gs-on-dark .gs-btn--secondary:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.32);
}

.gs-on-dark .gs-btn--ghost { color: rgba(255,255,255,0.82); }
.gs-on-dark .gs-btn--ghost:hover { color: #fff; }

/* ---------- announce bar ----------------------------------- */
.gs-announce {
  background: var(--graphite-deep);
  color: rgba(255,255,255,0.82);
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
}
.gs-announce__inner {
  max-width: var(--w-chrome);
  margin: 0 auto;
  padding: 10px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.gs-announce__sep { opacity: 0.4; }
.gs-announce a {
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  padding-bottom: 1px;
  transition: border-color var(--dur) var(--ease);
}
.gs-announce a:hover { border-color: #fff; }

/* Close button (X) at the right edge of the announce bar.
   Dismisses the banner; persists via localStorage keyed on the
   banner's data-announce-id so a new brief reappears. Cascades
   `position: relative` onto .gs-announce__inner without modifying
   the original rule. */
.gs-announce__inner { position: relative; padding-right: 56px; }
.gs-announce__close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
  -webkit-appearance: none;
          appearance: none;
}
.gs-announce__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.gs-announce__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---------- nav -------------------------------------------- */
.gs-nav {
  position: fixed; top: 38px; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  /* Position (top) snaps instantly when .scrolled is added — animating
     it from 38px to 0 over var(--dur) while the user is still scrolling
     creates a visible jump/stick. Background + blur + border still
     transition smoothly because they don't affect layout. */
  transition: background var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.gs-nav.scrolled {
  top: 0;
  background: rgba(245, 245, 245, 0.72);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-bottom-color: var(--surface-border);
}
.gs-nav__inner {
  max-width: var(--w-chrome);
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.gs-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: var(--w-extrabold);
  font-size: 20px;
  letter-spacing: var(--tr-tight);
  color: var(--graphite);
}
.gs-nav__brand-mark {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-mono);
  color: var(--fg-3);
}
.gs-nav__links {
  display: flex;
  gap: 28px;
  align-items: center;
}
.gs-nav__link {
  font-size: 14px;
  color: var(--fg-3);
  font-weight: var(--w-medium);
  transition: color var(--dur) var(--ease);
}
.gs-nav__link:hover { color: var(--graphite); }
.gs-nav__link.active {
  color: var(--graphite);
  font-weight: var(--w-semibold);
  position: relative;
}
.gs-nav__link.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--gradient-accent);
  border-radius: 2px;
}

/* Pages with a dark hero (announcement detail) — invert nav until scroll */
.gs-page--dark-hero .gs-nav:not(.scrolled) .gs-nav__brand { color: #fff; }
.gs-page--dark-hero .gs-nav:not(.scrolled) .gs-nav__link { color: rgba(255,255,255,0.65); }
.gs-page--dark-hero .gs-nav:not(.scrolled) .gs-nav__link:hover { color: #fff; }
.gs-page--dark-hero .gs-nav:not(.scrolled) .gs-nav__link.active { color: #fff; }
.gs-page--dark-hero .gs-nav:not(.scrolled) .gs-nav__link.active::after { background: linear-gradient(90deg, #C084FC, #A855F7); box-shadow: 0 0 12px rgba(192,132,252,0.5); }
.gs-page--dark-hero .gs-nav:not(.scrolled) .gs-btn--ghost { color: rgba(255,255,255,0.85); }
.gs-page--dark-hero .gs-nav:not(.scrolled) .gs-btn--ghost:hover { color: #fff; }
.gs-page--dark-hero .gs-nav:not(.scrolled) .gs-btn--primary {
  background: #fff;
  color: #000;
}
.gs-page--dark-hero .gs-nav:not(.scrolled) .gs-btn--primary:hover { background: var(--surface-warm); }

.gs-nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 900px) {
  .gs-nav__links { display: none; }
  .gs-nav__inner { padding: 14px 24px; }
}
@media (max-width: 640px) {
  .gs-nav__brand-mark { display: none; }
  .gs-nav__actions .gs-btn--ghost { display: none; }
}

/* ---------- HERO ------------------------------------------- */
.gs-hero {
  position: relative;
  padding: 200px 0 100px;
  background: var(--gradient-hero);
  overflow: hidden;
}
.gs-hero::before {
  /* 60x60 ambient grid at 4% */
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--graphite) 1px, transparent 1px),
    linear-gradient(to bottom, var(--graphite) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.04;
  pointer-events: none;
}
.gs-hero::after {
  /* corner vignette / atmosphere */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(124,58,237,0.04), transparent 50%),
    radial-gradient(circle at 88% 78%, rgba(0,0,0,0.04), transparent 45%);
  pointer-events: none;
}
.gs-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 36px;
}

/* — variant A: typographic-only — */
.gs-hero[data-variant="typographic"] .gs-hero__inner {
  max-width: var(--w-hero);
  margin: 0 auto;
  text-align: center;
}
.gs-hero[data-variant="typographic"] .gs-hero__schematic,
.gs-hero[data-variant="typographic"] .gs-hero__split-right { display: none; }
.gs-hero[data-variant="typographic"] .gs-hero__cta { justify-content: center; }
.gs-hero[data-variant="typographic"] .gs-hero__display { max-width: none; }
.gs-hero[data-variant="typographic"] .gs-hero__sub { max-width: 640px; margin-inline: auto; }

/* — variant B: schematic (type + dark inset panel below) — */
.gs-hero[data-variant="schematic"] .gs-hero__inner {
  max-width: var(--w-chrome);
  margin: 0 auto;
}
.gs-hero[data-variant="schematic"] .gs-hero__head { max-width: 820px; }
.gs-hero[data-variant="schematic"] .gs-hero__split-right { display: none; }
.gs-hero[data-variant="schematic"] .gs-hero__schematic { display: block; margin-top: 16px; }

/* — variant C: split (type left, dark panel right) — */
.gs-hero[data-variant="split"] .gs-hero__inner {
  max-width: var(--w-chrome);
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
}
.gs-hero[data-variant="split"] .gs-hero__schematic { display: none; }
.gs-hero[data-variant="split"] .gs-hero__split-right { display: block; }
.gs-hero[data-variant="split"] .gs-hero__stat-corner {
  position: static;
  margin-top: 32px;
}

@media (max-width: 900px) {
  .gs-hero { padding: 150px 0 72px; }
  .gs-hero[data-variant="split"] .gs-hero__inner { grid-template-columns: 1fr; gap: 36px; }
}

.gs-hero__head { display: grid; gap: 22px; }
.gs-hero__display {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: var(--w-black);
  letter-spacing: var(--tr-hero);
  line-height: var(--lh-tight);
  color: var(--graphite);
  margin: 0;
  text-wrap: balance;
  max-width: 18ch;
}
.gs-hero__display em {
  font-style: italic;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.gs-hero__sub {
  font-size: var(--t-hero-sub);
  color: var(--fg-2);
  line-height: 1.5;
  margin: 0;
  max-width: 56ch;
  text-wrap: pretty;
}
.gs-hero__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* hero stat corner — anchored to the right edge of the site grid */
.gs-hero__stat-corner {
  position: absolute;
  right: max(32px, calc((100vw - var(--w-chrome)) / 2 + 32px));
  top: 130px;
  text-align: right;
  display: grid;
  gap: 6px;
  max-width: 240px;
  z-index: 1;
}
.gs-hero__stat-corner .gs-stat-value { font-size: 32px; }
.gs-hero__stat-corner .gs-stat-label { font-size: 11px; line-height: 1.5; }
@media (max-width: 1100px) {
  .gs-hero__stat-corner { position: static; text-align: left; margin: 0 0 24px; max-width: none; }
  .gs-hero[data-variant="typographic"] .gs-hero__stat-corner { display: none; }
}

/* dark schematic panel embedded in hero */
.gs-hero__schematic,
.gs-hero__split-right {
  display: none;
  position: relative;
  background: var(--graphite-deep);
  color: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-result);
}
.gs-hero__schematic {
  padding: 32px 36px 0;
  margin-top: 12px;
}
.gs-hero__schematic-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.gs-hero__schematic-label .dot {
  width: 6px; height: 6px; border-radius: 999px; background: #C084FC;
  box-shadow: 0 0 8px rgba(192,132,252,0.6);
}
.gs-hero__schematic-frame {
  position: relative;
  height: 320px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.gs-hero__schematic-frame img {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: brightness(1.05) contrast(1.05);
}
.gs-hero__split-right {
  padding: 36px;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.gs-hero__split-meta {
  display: grid;
  gap: 14px;
  position: relative;
  z-index: 2;
}
.gs-hero__split-meta-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 14px;
}
.gs-hero__split-meta-row:first-child { border-top: 0; }
.gs-hero__split-meta-row .gs-mono-num {
  color: rgba(255,255,255,0.5);
  font-size: 11px;
}
.gs-hero__split-meta-row span:nth-child(2) { color: rgba(255,255,255,0.92); font-weight: var(--w-medium); }
.gs-hero__split-meta-row span:nth-child(3) {
  font-family: var(--font-mono);
  color: #C084FC;
  font-size: 12px;
  letter-spacing: var(--tr-mono);
}
.gs-hero__split-img {
  position: absolute;
  inset: 0;
  background: url('assets/dissolving-arch-system.svg') no-repeat center 80%;
  background-size: 110% auto;
  opacity: 0.45;
  filter: brightness(1.4) contrast(1.1);
  z-index: 0;
}

/* ---------- stat utilities --------------------------------- */
.gs-stat-value {
  font-family: var(--font-display);
  font-size: var(--t-stat);
  font-weight: var(--w-black);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-stat);
  background: var(--gradient-thesis);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  display: block;
}
.gs-on-dark .gs-stat-value {
  background: linear-gradient(135deg, #FFFFFF, rgba(255,255,255,0.6));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gs-stat-label {
  font-size: var(--t-stat-label);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--fg-3);
  display: block;
}
.gs-on-dark .gs-stat-label { color: rgba(255,255,255,0.6); }
.gs-stat-note {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-3);
  display: block;
  text-wrap: balance;
}
.gs-on-dark .gs-stat-note { color: rgba(255,255,255,0.55); }


/* ---------- LOGOS ------------------------------------------ */
.gs-logos {
  padding: 56px 0;
  background: var(--surface);
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
}
.gs-logos__inner {
  max-width: var(--w-chrome);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  gap: 28px;
  text-align: center;
}
.gs-logos__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0;
}
/* Logo filmroll — auto-scrolling marquee.
   The .gs-logos__row is the viewport (overflow hidden, edge fade mask),
   .gs-logos__track is the moving belt (duplicated children for a
   seamless -50% loop), .gs-logos__item is each logo slot. */
.gs-logos__row {
  position: relative;
  overflow: hidden;
}
/* Edge-fade overlays so logos dissolve in/out at the row's edges.
   We use solid-color gradient pseudo-elements instead of mask-image
   because mask-image creates an alpha compositing layer that, combined
   with each <img>'s brightness(0) filter and the track's animated
   transform, stacks three compositing operations on every mark at the
   edge — visible as a flicker when wider bitmap marks (Visionular,
   Vudu) cross the fade. Overlay gradients sit ABOVE the track and
   don't touch its compositing layers. */
.gs-logos__row::before,
.gs-logos__row::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 72px;
  z-index: 2;
  pointer-events: none;
}
.gs-logos__row::before {
  left: 0;
  background: linear-gradient(90deg, var(--surface) 0%, rgba(255, 255, 255, 0) 100%);
}
.gs-logos__row::after {
  right: 0;
  background: linear-gradient(270deg, var(--surface) 0%, rgba(255, 255, 255, 0) 100%);
}
.gs-logos__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: gs-logos-marquee 32s linear infinite;
  /* Force GPU compositing for the entire track so the animation runs on
     the compositor thread without touching the main thread. */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.gs-logos__row:hover .gs-logos__track { animation-play-state: paused; }
/* Spacing between marks uses per-item margin (not flex gap) so the
   loop math works out cleanly. With 16 items × 64px margin-right, the
   total track width is 16I + 16G and translateX(-50%) lands at
   exactly 8I + 8G — the boundary between the original and the
   duplicate set. Using `gap: 64px` instead leaves only 15 inter-item
   gaps in a 16-item track, making 50% short by half a gap (32px) and
   visibly jumping the reel at every loop. Keeps the same 64px visual
   rhythm as the old gap. */
.gs-logos__track > .gs-logos__item { margin-right: 64px; }
.gs-logos__item {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-tight);
  color: var(--fg-2);
  opacity: 0.7;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
.gs-logos__item:hover { opacity: 1; color: var(--graphite); }
/* v2: image marks. The parent .gs-logos__item rule above sets opacity:
   0.7 (carryover from the text-label era), and opacity is multiplicative
   through the DOM tree — so a child <img> would render at 70% even with
   brightness(0). Override the parent dim ONLY when the item contains an
   image so text-label fallback behavior stays untouched. */
.gs-logos__item:has(img) { opacity: 1; }
.gs-logos__item:has(img):hover { opacity: 1; }
/* Normalize <img> sizing so different aspect ratios render at a
   consistent height. Marks are pre-baked to pure black at the file
   level (see web/assets/logos/) so no runtime color filter is needed. */
.gs-logos__item img {
  display: block;
  height: 32px;
  width: auto;
  object-fit: contain;
  opacity: 1;
  transition: opacity var(--dur) var(--ease);
  /* PNGs are pre-baked to pure black at the file level (alpha preserved)
     so no runtime filter is needed. This is what eliminated the mid-
     transit flicker on heavy marks: the GPU no longer recomputes
     brightness(0) on a wide bitmap every paint. */
}
.gs-logos__item:hover img { opacity: 0.85; }
@keyframes gs-logos-marquee {
  /* translate3d (not translateX) keeps the animation on the GPU
     compositor thread for the entire loop. */
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .gs-logos__track { animation: none; }
}

/* ---------- TRIANGULATION ---------------------------------- */
.gs-thesis-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  margin: 24px 0 56px;
  align-items: stretch;
}
.gs-thesis-grid__cell {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-md);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-lifted);
  position: relative;
  min-height: 280px;
  transition: box-shadow var(--dur) var(--ease);
}
.gs-thesis-grid__cell::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.gs-thesis-grid__cell:hover { box-shadow: var(--shadow-result); }
.gs-thesis-grid__op {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: var(--w-medium);
  color: var(--fg-4);
  align-self: center;
  padding: 0 8px;
}
.gs-thesis-grid__title {
  font-size: 22px;
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-h3);
  color: var(--graphite);
  margin: 0;
  text-wrap: balance;
}
.gs-thesis-grid__title em {
  font-style: italic;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.gs-thesis-grid__body {
  font-size: 15px;
  color: var(--fg-2);
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 1000px) {
  .gs-thesis-grid { grid-template-columns: 1fr; }
  .gs-thesis-grid__op { transform: rotate(90deg); padding: 4px 0; align-self: center; }
}

/* stat band */
.gs-stat-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--surface-border);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.gs-stat-band__cell {
  background: var(--surface);
  padding: 36px 32px;
  text-align: left;
  display: grid;
  gap: 10px;
  position: relative;
}
.gs-stat-band__cell::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
}
.gs-stat-band__cell .gs-stat-value { font-size: 44px; }
.gs-stat-band__cell p {
  font-size: 14px;
  color: var(--fg-3);
  margin: 4px 0 0;
  line-height: 1.6;
}
@media (max-width: 800px) { .gs-stat-band { grid-template-columns: 1fr; } }

/* ---------- COMPARE ---------------------------------------- */
.gs-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  row-gap: 0;
  /* 6 row tracks: 1 head + 5 comparison rows. Both columns map onto
     these shared tracks via subgrid (below), so corresponding rows
     (Tool stack, Pricing model, …) stay the same height across both
     panels even when text wraps to a different number of lines. */
  grid-template-rows: auto repeat(5, auto);
}
.gs-compare__col {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-lg);
  padding: 32px;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / -1;
  row-gap: 0;
  box-shadow: var(--shadow-card);
  position: relative;
}
.gs-compare__col::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.gs-compare__col--ours {
  background: var(--graphite-deep);
  color: #fff;
  border-color: rgba(255,255,255,0.06);
  box-shadow: var(--shadow-result);
}
.gs-compare__col--ours::before {
  background: linear-gradient(90deg, transparent, rgba(192,132,252,0.4), transparent);
}
.gs-compare__head {
  display: grid;
  gap: 8px;
  padding-bottom: 24px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--surface-border);
}
.gs-compare__col--ours .gs-compare__head { border-bottom-color: rgba(255,255,255,0.08); }
.gs-compare__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
}
.gs-compare__col--ours .gs-compare__title { color: rgba(255,255,255,0.55); }
.gs-compare__h {
  font-size: 22px;
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-h3);
  color: var(--graphite);
  margin: 0;
}
.gs-compare__col--ours .gs-compare__h { color: #fff; }
.gs-compare__h em {
  font-style: italic;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

.gs-compare__row {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--surface-border);
  align-items: flex-start;
}
.gs-compare__col--ours .gs-compare__row { border-top-color: rgba(255,255,255,0.06); }
.gs-compare__row:first-of-type { border-top: 0; }
.gs-compare__icon {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-4);
  margin-top: 2px;
}
.gs-compare__col--ours .gs-compare__icon { color: #C084FC; }
.gs-compare__row-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.gs-compare__col--ours .gs-compare__row-label { color: rgba(255,255,255,0.55); }
.gs-compare__row-text {
  display: block;
  font-size: 15px;
  color: var(--fg-1);
  line-height: 1.65;
}
.gs-compare__col--ours .gs-compare__row-text { color: rgba(255,255,255,0.85); }

@media (max-width: 900px) {
  /* Single column on mobile — the cards stack, so cross-column row
     alignment (subgrid) no longer applies. Revert each col to a plain
     flex column and clear the parent's row tracks. */
  .gs-compare {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .gs-compare__col {
    display: flex;
    flex-direction: column;
    grid-row: auto;
  }
}

/* ---------- PRACTICE / SERVICES (tabbed) -------------------- */
.gs-services-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--surface-border);
  margin: 0 0 40px;
  overflow-x: auto;
}
.gs-services-tab {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 18px 24px;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  white-space: nowrap;
}
.gs-services-tab:hover { color: var(--graphite); }
.gs-services-tab[aria-selected="true"] {
  color: var(--graphite);
  border-bottom-color: var(--graphite);
}

.gs-services-panel {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: start;
}
.gs-services-panel[hidden] { display: none; }
.gs-services-panel__copy { display: grid; gap: 16px; }
.gs-services-panel__num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--tr-mono);
  color: var(--graphite);
  opacity: 0.8;
}
.gs-services-panel__h {
  font-size: 28px;
  font-weight: var(--w-extrabold);
  letter-spacing: var(--tr-h2);
  line-height: var(--lh-heading);
  color: var(--graphite);
  margin: 0;
  text-wrap: balance;
}
.gs-services-panel__h em {
  font-style: italic;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.gs-services-panel__body {
  font-size: 17px;
  line-height: 1.75;
  color: var(--fg-2);
  margin: 0;
}
.gs-services-panel__points {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 2px;
}
.gs-services-panel__points li {
  background: var(--surface);
  padding: 18px 22px 18px 56px;
  border: 1px solid var(--surface-border);
  position: relative;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-1);
  box-shadow: var(--shadow-card);
}
.gs-services-panel__points li:first-child { border-radius: var(--r-md) var(--r-md) 0 0; }
.gs-services-panel__points li:last-child  { border-radius: 0 0 var(--r-md) var(--r-md); }
.gs-services-panel__points li::before {
  content: counter(item, decimal-leading-zero);
  counter-increment: item;
  position: absolute;
  left: 22px; top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  color: var(--fg-4);
}
.gs-services-panel__points { counter-reset: item; }

/* the right-side annotation diagram (built in CSS — no SVG on light) */
.gs-services-panel__visual {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-lg);
  padding: 28px;
  min-height: 380px;
  box-shadow: var(--shadow-lifted);
  display: grid;
  align-content: start;
  gap: 14px;
}
.gs-services-panel__visual::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.gs-services-panel__visual-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
}
.gs-services-panel__visual-h {
  font-size: 14px;
  font-weight: var(--w-bold);
  color: var(--graphite);
  letter-spacing: var(--tr-tight);
  margin: 0 0 6px;
}
.gs-services-panel__diagram {
  margin-top: 12px;
  display: grid;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  color: var(--fg-2);
}
.gs-services-panel__diagram-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface-warm);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-sm);
}
.gs-services-panel__diagram-row span:first-child { color: var(--fg-4); }
.gs-services-panel__diagram-row span:nth-child(2) {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-tight);
  color: var(--graphite);
  text-transform: none;
}
.gs-services-panel__diagram-row span:last-child { color: var(--fg-3); }

@media (max-width: 1000px) { .gs-services-panel { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- PROCESS STEPPER -------------------------------- */
.gs-process {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: start;
}
.gs-process__steps {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--surface-border);
}
.gs-process__step {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--surface-border);
  text-align: left;
  padding: 22px 18px 22px 0;
  cursor: pointer;
  display: grid;
  gap: 8px;
  position: relative;
  transition: background var(--dur) var(--ease);
}
.gs-process__step:hover { background: var(--surface); }
.gs-process__step::after {
  content: "";
  position: absolute;
  left: -32px; top: 30px;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--surface-border-strong);
  transition: background var(--dur) var(--ease);
}
.gs-process__step[aria-selected="true"]::after {
  background: var(--graphite);
  border-color: var(--graphite);
  box-shadow: 0 0 0 4px rgba(0,0,0,0.06);
}
.gs-process__step-no {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
}
.gs-process__step[aria-selected="true"] .gs-process__step-no { color: var(--graphite); }
.gs-process__step-title {
  font-size: 20px;
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-h3);
  color: var(--graphite);
}

.gs-process__panel {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-lg);
  padding: 40px;
  box-shadow: var(--shadow-lifted);
  display: grid;
  gap: 18px;
  position: relative;
}
.gs-process__panel[hidden] { display: none; }
.gs-process__panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.gs-process__panel-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
}
.gs-process__panel-h {
  font-size: 26px;
  font-weight: var(--w-extrabold);
  letter-spacing: var(--tr-h2);
  line-height: 1.2;
  color: var(--graphite);
  margin: 0;
  text-wrap: balance;
}
.gs-process__panel-body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--fg-2);
  margin: 0;
}
.gs-process__panel-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--surface-border);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin: 8px 0 0;
}
.gs-process__panel-meta > div {
  background: var(--surface-warm);
  padding: 16px 18px;
  display: grid;
  gap: 4px;
}
.gs-process__panel-meta dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
}
.gs-process__panel-meta dd {
  margin: 0;
  font-size: 14px;
  font-weight: var(--w-semibold);
  color: var(--graphite);
}

@media (max-width: 900px) {
  .gs-process { grid-template-columns: 1fr; gap: 32px; padding-left: 0; }
  .gs-process__step::after { display: none; }
  .gs-process__panel-meta { grid-template-columns: 1fr; }
}

/* ---------- CASE STUDY (dark) ------------------------------ */
.gs-case {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
.gs-case__visual {
  position: relative;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-lg);
  padding: 32px;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.gs-case__visual::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192,132,252,0.35), transparent);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.gs-case__visual img {
  width: 100%;
  height: auto;
  filter: brightness(1.05) contrast(1.05);
}
.gs-case__visual-label {
  position: absolute;
  top: 18px; left: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  display: flex; align-items: center; gap: 10px;
}
.gs-case__visual-label .dot {
  width: 6px; height: 6px; border-radius: 999px; background: #C084FC;
  box-shadow: 0 0 8px rgba(192,132,252,0.6);
}
.gs-case__body { display: grid; gap: 24px; }
.gs-case__quote {
  font-size: 24px;
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-tight);
  line-height: 1.5;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}
.gs-case__quote::before { content: "“ "; color: rgba(255,255,255,0.4); }
.gs-case__quote::after  { content: " ”"; color: rgba(255,255,255,0.4); }
.gs-case__author {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.gs-case__avatar {
  width: 48px; height: 48px;
  border-radius: 999px;
  background: linear-gradient(135deg, #C084FC, #7C3AED);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: var(--w-bold);
  font-size: 18px;
}
.gs-case__name {
  font-size: 16px; font-weight: var(--w-bold); color: #fff;
  letter-spacing: var(--tr-tight);
}
.gs-case__role {
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: 4px;
}
.gs-case__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
  overflow: hidden;
}
.gs-case__stat {
  background: rgba(255,255,255,0.02);
  padding: 22px 24px;
  display: grid;
  gap: 6px;
}
.gs-case__stat .gs-stat-value { font-size: 32px; }
.gs-case__stat .gs-stat-label { font-size: 11px; }

@media (max-width: 900px) {
  .gs-case { grid-template-columns: 1fr; gap: 32px; }
  .gs-case__visual { min-height: 320px; }
}

/* ---------- ENABLEMENT — stair-step maturity chart (dark) ---- */
/* Section 6: 'From user to architect.' A 4-stage maturity chart
   visualized as a stair-step bar chart (bars at 28%, 50%, 74%, 100%),
   with each stage's 'from → to' card rendered below its bar. Stage 04
   gets a peak treatment (purple-glow background + accent text).
   Lives on .gs-section--dark. Uses existing site tokens; no new
   tokens or font imports added (the standalone export bundle defines
   its own but we already have all of them). */
.gs-enablement__head {
  max-width: 720px;
  margin-bottom: 72px;
}
.gs-enablement__head h2 em {
  font-style: italic;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

.gs-maturity {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  position: relative;
}

/* ── Y-axis ('Leverage' rotated) ─────────────────────────────── */
.gs-maturity__axis-y {
  position: relative;
  padding-bottom: 96px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.gs-maturity__axis-y-label {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
  writing-mode: horizontal-tb;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}
.gs-maturity__axis-y-tick {
  position: absolute;
  right: 12px;
  font-size: 10px;
}
.gs-maturity__axis-y-tick:nth-of-type(2) { top: 0; }
.gs-maturity__axis-y-tick:nth-of-type(3) {
  bottom: calc(96px + 18px + 1em);
}

/* ── Plot area ───────────────────────────────────────────────── */
.gs-maturity__plot {
  position: relative;
  padding-bottom: 96px;
}

/* Horizontal gridlines (4 dashed lines as visual reference) */
.gs-maturity__grid {
  position: absolute;
  inset: 0 0 96px 0;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  pointer-events: none;
}
.gs-maturity__grid span {
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
}
.gs-maturity__grid span:first-child {
  border-top-color: rgba(255, 255, 255, 0.12);
}

/* Columns — 4-up grid of stage bars */
.gs-maturity__cols {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
  align-items: end;
}

.gs-maturity__col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.gs-maturity__bar-wrap {
  position: relative;
  height: 360px;
  display: flex;
  align-items: flex-end;
}
.gs-maturity__bar {
  width: 100%;
  height: var(--bar-h, 50%);
  border-radius: 12px 12px 0 0;
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.08) 0%, rgba(124, 58, 237, 0.32) 100%),
    rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: none;
  position: relative;
  overflow: hidden;
  transition: height 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.gs-maturity__bar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.2), rgba(192, 132, 252, 0.9), rgba(168, 85, 247, 0.2));
}
.gs-maturity__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 23px,
    rgba(255, 255, 255, 0.04) 23px,
    rgba(255, 255, 255, 0.04) 24px
  );
  pointer-events: none;
}

/* Peak column (Stage 04) — fully gradient fill + glow */
.gs-maturity__col--peak .gs-maturity__bar {
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.12) 0%, rgba(168, 85, 247, 0.55) 100%),
    rgba(124, 58, 237, 0.18);
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.18) inset, 0 20px 60px -20px rgba(124, 58, 237, 0.35);
}

/* Stage label floats just above each bar */
.gs-maturity__bar-stage {
  position: absolute;
  top: -28px;
  left: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}
.gs-maturity__col--peak .gs-maturity__bar-stage {
  color: #C084FC;
}

/* Card under each bar (from → to). min-height fits a 2-line 'to' text
   so all 4 cards have the same vertical footprint regardless of which
   stage has the longest copy. Keeps bar bottoms aligned across columns. */
.gs-maturity__card {
  margin-top: 18px;
  min-height: 88px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--r-md);
  position: relative;
}
.gs-maturity__card::before {
  content: "";
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
}
.gs-maturity__col--peak .gs-maturity__card {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(168, 85, 247, 0.28);
}
.gs-maturity__col--peak .gs-maturity__card::before {
  background: linear-gradient(90deg, rgba(168, 85, 247, 0), rgba(192, 132, 252, 0.7), rgba(168, 85, 247, 0));
}

.gs-maturity__from {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: -0.005em;
  text-align: left;
}
.gs-maturity__arrow {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: var(--w-medium);
  line-height: 1;
  color: rgba(192, 132, 252, 0.95);
}
.gs-maturity__to {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
  text-align: right;
  line-height: 1.25;
}
.gs-maturity__to em {
  font-style: normal;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* ── X-axis (User → Architect with arrow head) ───────────────── */
.gs-maturity__axis-x {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.gs-maturity__axis-x-line {
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(168, 85, 247, 0.55));
  position: relative;
}
.gs-maturity__axis-x-line::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  width: 0;
  height: 0;
  border-left: 7px solid rgba(192, 132, 252, 0.9);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.gs-maturity__axis-x-cap {
  color: rgba(255, 255, 255, 0.55);
}
.gs-maturity__axis-x-cap--end {
  color: #C084FC;
  font-weight: 600;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .gs-maturity__bar-wrap { height: 280px; }
  .gs-maturity__to { font-size: 14px; }
  .gs-maturity__from { font-size: 13px; }
  .gs-maturity__card { padding: 14px 16px; gap: 10px; min-height: 76px; }
}
/* Mobile breakpoint aligned with the site's primary 900px convention
   (matches when the nav hamburger appears). At this width the chart
   collapses entirely: bars hide, axes hide, columns stack vertically
   as a list of cards. */
@media (max-width: 900px) {
  .gs-maturity { grid-template-columns: 1fr; }
  .gs-maturity__axis-y { display: none; }
  .gs-maturity__axis-x { display: none; }
  .gs-maturity__cols { grid-template-columns: 1fr; gap: 16px; }
  .gs-maturity__bar-wrap { display: none; }
  .gs-maturity__bar-stage {
    position: static;
    display: inline-block;
    margin-bottom: 6px;
  }
  .gs-maturity__col { padding-top: 8px; }
  .gs-maturity__plot { padding-bottom: 0; }
  /* Cards no longer need to sync heights once the bars are hidden */
  .gs-maturity__card { min-height: 0; }
}

/* ---------- PRICING ---------------------------------------- */
.gs-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.gs-price-card {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-lg);
  padding: 36px 32px;
  display: grid;
  gap: 18px;
  box-shadow: var(--shadow-card);
  position: relative;
  align-content: start;
}
.gs-price-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.gs-price-card--featured {
  background: var(--graphite-deep);
  color: #fff;
  border-color: rgba(255,255,255,0.06);
  box-shadow: var(--shadow-result);
  transform: translateY(-12px);
}
.gs-price-card--featured::before {
  background: linear-gradient(90deg, transparent, rgba(192,132,252,0.4), transparent);
}
.gs-price-card__name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
}
.gs-price-card--featured .gs-price-card__name { color: #C084FC; }
.gs-price-card__h {
  font-size: 22px;
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-h3);
  line-height: 1.25;
  margin: 0;
  color: var(--graphite);
  text-wrap: balance;
}
.gs-price-card--featured .gs-price-card__h { color: #fff; }
.gs-price-card__sub {
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.65;
  margin: 0;
}
.gs-price-card--featured .gs-price-card__sub { color: rgba(255,255,255,0.7); }
.gs-price-card__price {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: var(--w-black);
  letter-spacing: var(--tr-tight);
  color: var(--graphite);
  line-height: 1;
  padding: 18px 0;
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
}
.gs-price-card--featured .gs-price-card__price {
  color: #fff;
  border-color: rgba(255,255,255,0.08);
}
.gs-price-card__price span {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--w-regular);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
  margin-left: 6px;
}
.gs-price-card--featured .gs-price-card__price span { color: rgba(255,255,255,0.55); }
.gs-price-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-1);
}
.gs-price-card--featured .gs-price-card__features { color: rgba(255,255,255,0.85); }
.gs-price-card__features li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  align-items: flex-start;
}
.gs-price-card__features li::before {
  content: "";
  width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--surface-warm-2);
  margin-top: 4px;
  background-image:
    linear-gradient(45deg, transparent 45%, var(--graphite) 45%, var(--graphite) 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, var(--graphite) 45%, var(--graphite) 55%, transparent 55%);
  background-size: 6px 6px;
  background-position: center;
  background-repeat: no-repeat;
}
.gs-price-card--featured .gs-price-card__features li::before {
  background: rgba(255,255,255,0.08);
  background-image:
    linear-gradient(45deg, transparent 45%, #C084FC 45%, #C084FC 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, #C084FC 45%, #C084FC 55%, transparent 55%);
  background-size: 6px 6px;
  background-position: center;
  background-repeat: no-repeat;
}
.gs-price-card .gs-btn { margin-top: 8px; align-self: end; }

@media (max-width: 1000px) {
  .gs-pricing { grid-template-columns: 1fr; }
  .gs-price-card--featured { transform: none; }
}

/* ---------- TESTIMONIALS ------------------------------------ */
.gs-testi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.gs-testi__card {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 20px;
  position: relative;
  align-content: start;
  transition: box-shadow var(--dur) var(--ease);
}
.gs-testi__card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.gs-testi__card:hover { box-shadow: var(--shadow-lifted); }
.gs-testi__industry {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
}
.gs-testi__stat-row {
  padding: 16px 0;
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
  display: grid;
  gap: 6px;
}
.gs-testi__stat-row .gs-stat-value { font-size: 32px; }
.gs-testi__quote {
  font-size: 16px;
  font-style: italic;
  line-height: 1.65;
  color: var(--fg-1);
  margin: 0;
  font-weight: var(--w-medium);
}
.gs-testi__quote::before { content: "“"; color: var(--fg-4); margin-right: 2px; }
.gs-testi__quote::after  { content: "”"; color: var(--fg-4); margin-left: 2px; }
.gs-testi__author {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: center;
  padding-top: 4px;
  border-top: 1px solid var(--surface-border);
  padding-top: 20px;
}
.gs-testi__avatar {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1A1A1A, #4B5563);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: var(--w-bold);
  font-size: 15px;
}
.gs-testi__author-name {
  font-size: 15px;
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-tight);
  color: var(--graphite);
}
.gs-testi__author-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 3px;
}

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

/* ---------- FAQ -------------------------------------------- */
.gs-faq {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  align-items: start;
}
.gs-faq__nav {
  display: grid;
  gap: 0;
  border-left: 1px solid var(--surface-border);
}
.gs-faq__nav button {
  appearance: none;
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  margin-left: -1px;
  text-align: left;
  padding: 12px 18px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.gs-faq__nav button:hover { color: var(--graphite); }
.gs-faq__nav button[aria-selected="true"] {
  color: var(--graphite);
  border-left-color: var(--graphite);
}

.gs-faq__list { display: grid; gap: 2px; }
.gs-faq__list[hidden] { display: none; }
.gs-faq__item {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  padding: 22px 28px;
  box-shadow: var(--shadow-card);
  position: relative;
}
.gs-faq__item:first-child { border-radius: var(--r-md) var(--r-md) 0 0; }
.gs-faq__item:last-child  { border-radius: 0 0 var(--r-md) var(--r-md); }
.gs-faq__item::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
}
.gs-faq__summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-size: 17px;
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-tight);
  color: var(--graphite);
  line-height: 1.5;
}
.gs-faq__summary::-webkit-details-marker { display: none; }
.gs-faq__icon {
  width: 14px; height: 14px;
  position: relative;
  flex-shrink: 0;
}
.gs-faq__icon::before, .gs-faq__icon::after {
  content: "";
  position: absolute;
  background: var(--graphite);
  transition: transform var(--dur) var(--ease);
}
.gs-faq__icon::before { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.gs-faq__icon::after  { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
.gs-faq__item[open] .gs-faq__icon::after { transform: translateX(-50%) rotate(90deg); }
.gs-faq__answer {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--surface-border);
  font-size: 15px;
  line-height: 1.75;
  color: var(--fg-2);
}

@media (max-width: 900px) {
  .gs-faq { grid-template-columns: 1fr; gap: 24px; }
  .gs-faq__nav { display: flex; flex-wrap: wrap; border-left: 0; border-bottom: 1px solid var(--surface-border); }
  .gs-faq__nav button { border-left: 0; border-bottom: 2px solid transparent; margin-left: 0; margin-bottom: -1px; padding: 14px 18px; }
  .gs-faq__nav button[aria-selected="true"] { border-left: 0; border-bottom-color: var(--graphite); }
}

/* ---------- CTA BANNER (dark) ------------------------------ */
.gs-cta-banner {
  position: relative;
  background: var(--graphite-deep);
  color: #fff;
  border-radius: var(--r-xl);
  overflow: hidden;
  padding: 72px 56px;
  box-shadow: var(--shadow-result);
}
.gs-cta-banner::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192,132,252,0.4), transparent);
  z-index: 1;
}
.gs-cta-banner__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gs-cta-banner__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: right center;
  opacity: 0.35;
  filter: brightness(1.4) contrast(1.05);
}
.gs-cta-banner__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.55) 50%, transparent 100%);
}
.gs-cta-banner__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  align-items: end;
}
.gs-cta-banner__copy { display: grid; gap: 24px; max-width: 560px; }
.gs-cta-banner__h {
  font-size: var(--t-thesis-hero);
  font-weight: var(--w-extrabold);
  letter-spacing: var(--tr-hero);
  line-height: 1.1;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}
.gs-cta-banner__h em {
  font-style: italic;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.gs-cta-banner__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.gs-cta-banner__stat {
  display: grid;
  gap: 8px;
  text-align: right;
  padding-left: 32px;
  border-left: 1px solid rgba(255,255,255,0.08);
}
.gs-cta-banner__stat .gs-stat-value { font-size: 42px; }
.gs-cta-banner__stat .gs-stat-label { font-size: 11px; line-height: 1.5; }

@media (max-width: 900px) {
  .gs-cta-banner { padding: 48px 32px; }
  .gs-cta-banner__inner { grid-template-columns: 1fr; gap: 32px; }
  .gs-cta-banner__stat { text-align: left; padding-left: 0; padding-top: 24px; border-left: 0; border-top: 1px solid rgba(255,255,255,0.08); }
}

/* ---------- FOOTER ----------------------------------------- */
.gs-footer {
  padding: 80px 0 48px;
  background: var(--surface-warm);
  border-top: 1px solid var(--surface-border);
}
.gs-footer__inner {
  max-width: var(--w-chrome);
  margin: 0 auto;
  padding: 0 32px;
}
.gs-footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--surface-border);
}
.gs-footer__brand {
  display: grid;
  gap: 16px;
}
.gs-footer__brand-name {
  font-family: var(--font-display);
  font-weight: var(--w-extrabold);
  font-size: 24px;
  letter-spacing: var(--tr-tight);
  color: var(--graphite);
}
.gs-footer__brand .gs-nav-tag {
  padding: 6px 14px 5px;
  font-size: 13px;
  align-self: start;
  width: max-content;
}
.gs-footer__tagline {
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg-3);
  max-width: 280px;
  margin: 0;
}
.gs-footer__col h6 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 20px;
}
.gs-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.gs-footer__col a {
  font-size: 14px;
  color: var(--graphite);
  font-weight: var(--w-medium);
  transition: color var(--dur) var(--ease);
}
.gs-footer__col a:hover { color: var(--accent-grad-1); }
.gs-footer__bottom {
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
}
.gs-footer__legal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.gs-footer__legal a {
  color: var(--graphite);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.gs-footer__legal a:hover {
  color: var(--accent-grad-1);
  border-bottom-color: var(--accent-grad-1);
}
.gs-footer__legal-sep { opacity: 0.4; }

/* ============================================================
   LEGAL PAGES (privacy, terms)
   ============================================================ */
.gs-legal {
  padding: 160px 0 100px;
  background: var(--surface);
}
.gs-legal__hero {
  background: var(--gradient-hero);
  padding: 200px 0 64px;
  position: relative;
  overflow: hidden;
}
.gs-legal__hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--graphite) 1px, transparent 1px),
    linear-gradient(to bottom, var(--graphite) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.04;
  pointer-events: none;
}
.gs-legal__hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--w-standard);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  gap: 16px;
}
.gs-legal__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
}
.gs-legal__h {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.5vw, 60px);
  font-weight: var(--w-black);
  letter-spacing: var(--tr-hero);
  line-height: 1.05;
  color: var(--graphite);
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
}
.gs-legal__h em {
  font-style: italic;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.gs-legal__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 8px;
}
.gs-legal__body {
  max-width: var(--w-standard);
  margin: 56px auto 0;
  padding: 0 32px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--fg-1);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 56px;
  align-items: start;
}
.gs-legal__toc {
  position: sticky;
  top: 120px;
  align-self: start;
  display: grid;
  gap: 0;
  border-left: 1px solid var(--surface-border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
}
.gs-legal__toc a {
  display: block;
  padding: 10px 18px;
  border-left: 2px solid transparent;
  margin-left: -1px;
  color: var(--fg-3);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.gs-legal__toc a:hover {
  color: var(--graphite);
  border-left-color: var(--graphite);
}
.gs-legal__sections { display: grid; gap: 0; }
.gs-legal__section {
  padding: 0 0 40px;
  border-bottom: 1px solid var(--surface-border);
  margin-bottom: 40px;
}
.gs-legal__section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.gs-legal__section h2 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--w-extrabold);
  letter-spacing: var(--tr-h2);
  line-height: 1.2;
  color: var(--graphite);
  margin: 0 0 12px;
  display: grid;
  gap: 8px;
  text-wrap: balance;
}
.gs-legal__section h2 .gs-mono-num {
  font-size: 12px;
  opacity: 0.7;
}
.gs-legal__section h3 {
  font-size: 18px;
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-tight);
  color: var(--graphite);
  margin: 28px 0 8px;
}
.gs-legal__section p {
  margin: 0 0 16px;
  max-width: 64ch;
  color: var(--fg-2);
  line-height: 1.7;
}
.gs-legal__section ul {
  margin: 0 0 20px;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.gs-legal__section ul li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-2);
}
.gs-legal__section ul li::before {
  content: "—";
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-mono);
  color: var(--fg-4);
}
.gs-legal__section a {
  color: var(--graphite);
  border-bottom: 1px solid rgba(0,0,0,0.16);
  transition: border-color var(--dur) var(--ease);
}
.gs-legal__section a:hover { border-color: var(--graphite); }
.gs-legal__section strong { color: var(--graphite); font-weight: var(--w-bold); }

@media (max-width: 900px) {
  .gs-legal__body { grid-template-columns: 1fr; gap: 24px; }
  .gs-legal__toc {
    position: static;
    display: flex;
    flex-wrap: wrap;
    border-left: 0;
    border-bottom: 1px solid var(--surface-border);
    padding-bottom: 12px;
  }
  .gs-legal__toc a {
    border-left: 0;
    border-bottom: 2px solid transparent;
    margin: 0;
    padding: 8px 14px 12px 0;
  }
  .gs-legal__toc a:hover { border-bottom-color: var(--graphite); border-left-color: transparent; }
}

@media (max-width: 900px) {
  .gs-footer__top { grid-template-columns: 1fr 1fr; }
  .gs-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .gs-footer__top { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- TWEAKS PANEL (in-design controls) -------------- */
.gs-tweaks {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 100;
  background: var(--surface);
  border: 1px solid var(--surface-border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-result);
  padding: 18px 20px;
  width: 280px;
  font-family: var(--font-sans);
  display: none;
}
.gs-tweaks.is-open { display: block; }
.gs-tweaks__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--surface-border);
}
.gs-tweaks__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--graphite);
}
.gs-tweaks__close {
  appearance: none;
  background: none;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px;
}
.gs-tweaks__close:hover { color: var(--graphite); }
.gs-tweaks__section { margin-bottom: 16px; }
.gs-tweaks__section:last-child { margin-bottom: 0; }
.gs-tweaks__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 8px;
  display: block;
}
.gs-tweaks__seg {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  background: var(--surface-warm);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-sm);
  padding: 2px;
}
.gs-tweaks__seg button {
  appearance: none;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 8px 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-tight);
  color: var(--fg-3);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.gs-tweaks__seg button:hover { color: var(--graphite); }
.gs-tweaks__seg button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--graphite);
  box-shadow: var(--shadow-card);
}

/* ============================================================
   BOOKING MODAL
   ============================================================ */
.gs-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 24px 24px;
  overflow-y: auto;
}
.gs-modal.is-open { display: flex; }
.gs-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.62);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  animation: gs-modal-fade var(--dur) var(--ease);
}
@keyframes gs-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.gs-modal__dialog {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-result);
  width: 100%;
  max-width: 620px;
  margin-bottom: 48px;
  animation: gs-modal-rise 260ms var(--ease);
}
.gs-modal__dialog::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192,132,252,0.5), transparent);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
@keyframes gs-modal-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.gs-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px; height: 36px;
  border: 1px solid var(--surface-border);
  background: var(--surface);
  border-radius: 999px;
  color: var(--fg-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  z-index: 2;
}
.gs-modal__close:hover {
  color: var(--graphite);
  border-color: var(--surface-border-strong);
  background: var(--surface-warm);
}
.gs-modal__close:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

.gs-modal__body { padding: 40px 44px 36px; }
.gs-modal__body[hidden] { display: none; }
.gs-modal__head { display: grid; gap: 14px; margin-bottom: 28px; }
.gs-modal__h {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: var(--w-extrabold);
  letter-spacing: var(--tr-h2);
  line-height: 1.15;
  color: var(--graphite);
  margin: 0;
  text-wrap: balance;
}
.gs-modal__h em {
  font-style: italic;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.gs-modal__sub {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-2);
  margin: 0;
}

/* form */
.gs-form { display: grid; gap: 24px; }
.gs-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.gs-field { display: grid; gap: 8px; align-content: start; }
.gs-field--full { grid-column: 1 / -1; }
.gs-field__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
  display: block;
  line-height: 1.2;
  min-height: 14px;
}
.gs-field__input {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--graphite);
  background: var(--surface);
  border: 1px solid var(--surface-border-strong);
  border-radius: 0;
  padding: 12px 14px;
  width: 100%;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  line-height: 1.4;
}
.gs-field__input::placeholder { color: var(--fg-4); }
.gs-field__input:hover { border-color: var(--graphite); }
.gs-field__input:focus {
  outline: none;
  border-color: var(--graphite);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}
.gs-field__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--graphite) 50%),
                    linear-gradient(135deg, var(--graphite) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
  cursor: pointer;
}
.gs-field__textarea {
  resize: vertical;
  min-height: 96px;
  font-family: var(--font-sans);
  line-height: 1.55;
}
.gs-field__hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  color: var(--fg-4);
}
.gs-form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--surface-border);
}
.gs-form__meta {
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--fg-3);
  line-height: 1.4;
}
.gs-form__meta .gs-mono-num { font-size: 10px; opacity: 0.75; }

/* error message */
.gs-form__error {
  font-size: var(--t-body-sm);
  color: #991B1B;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  margin: 0 0 4px;
}

/* success state */
.gs-modal__body--success {
  display: grid;
  gap: 20px;
  text-align: left;
}
.gs-modal__success-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--surface-border);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: 4px;
}
.gs-modal__success-stats > div {
  background: var(--surface-warm);
  padding: 18px 20px;
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: var(--w-semibold);
  color: var(--graphite);
}
.gs-modal__success-stats .gs-mono-num { font-size: 10px; opacity: 0.75; }
.gs-modal__body--success .gs-btn { justify-self: start; margin-top: 8px; }

@media (max-width: 640px) {
  .gs-modal { padding: 0; align-items: stretch; }
  .gs-modal__dialog { border-radius: 0; margin: 0; max-width: none; }
  .gs-modal__body { padding: 56px 24px 32px; }
  .gs-form__grid { grid-template-columns: 1fr; }
  .gs-form__foot { flex-direction: column; align-items: stretch; }
  .gs-form__foot .gs-btn { justify-content: center; }
}

/* ============================================================
   BLOG INDEX
   ============================================================ */
.gs-blog-hero {
  padding: 200px 0 72px;
  background: var(--gradient-hero);
  position: relative;
  overflow: hidden;
}
.gs-blog-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--graphite) 1px, transparent 1px),
    linear-gradient(to bottom, var(--graphite) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.04;
  pointer-events: none;
}
.gs-blog-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  gap: 18px;
  text-align: center;
  justify-items: center;
}
.gs-blog-hero__h { margin-inline: auto; }
.gs-blog-hero__sub { margin-inline: auto; }
.gs-blog-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
}
.gs-blog-hero__h {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: var(--w-black);
  letter-spacing: var(--tr-hero);
  line-height: 1.05;
  color: var(--graphite);
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.gs-blog-hero__h em {
  font-style: italic;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.gs-blog-hero__sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
  max-width: 56ch;
}

.gs-blog-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--surface-border-strong);
}
.gs-blog-card {
  display: grid;
  grid-template-columns: 120px 1.4fr 1fr;
  gap: 56px;
  padding: 40px 0;
  border-bottom: 1px solid var(--surface-border);
  align-items: start;
  color: inherit;
  position: relative;
  transition: background var(--dur) var(--ease);
}
.gs-blog-card:hover { background: var(--surface-warm); }
.gs-blog-card:hover .gs-blog-card__h { color: #000; }
.gs-blog-card:hover .gs-blog-card__arrow { transform: translateX(4px); }

.gs-blog-card__meta {
  display: grid;
  gap: 10px;
  padding-left: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
  line-height: 1.5;
}
.gs-blog-card__num {
  color: var(--fg-4);
}
.gs-blog-card__kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--graphite);
}
.gs-blog-card__kind::before {
  content: "";
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--graphite);
}
.gs-blog-card__kind--announcement::before {
  background: linear-gradient(135deg, #C084FC, #7C3AED);
  box-shadow: 0 0 8px rgba(192,132,252,0.5);
}
.gs-blog-card__date { color: var(--fg-3); }

.gs-blog-card__body {
  display: grid;
  gap: 14px;
}
.gs-blog-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
}
.gs-blog-card__h {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: var(--w-extrabold);
  letter-spacing: var(--tr-h2);
  line-height: 1.15;
  color: var(--graphite);
  margin: 0;
  text-wrap: balance;
  transition: color var(--dur) var(--ease);
}
.gs-blog-card__h em {
  font-style: italic;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.gs-blog-card__dek {
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-2);
  margin: 0;
  max-width: 56ch;
}
.gs-blog-card__more {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--graphite);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
}
.gs-blog-card__arrow {
  font-family: var(--font-mono);
  display: inline-block;
  transition: transform var(--dur) var(--ease);
}

.gs-blog-card__thumb {
  background: var(--graphite-deep);
  border-radius: var(--r-md);
  height: 180px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.gs-blog-card__thumb::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192,132,252,0.4), transparent);
  border-radius: var(--r-md) var(--r-md) 0 0;
  z-index: 2;
}
.gs-blog-card__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
  opacity: 0.7;
  filter: brightness(1.2) contrast(1.05);
}
.gs-blog-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.85) 100%);
}

/* Photo variant — show the image at full fidelity (no opacity dim, no */
/* brightness/contrast filter, no dark gradient overlay). Use on cards */
/* whose thumbnail is a real photograph rather than an SVG schematic. */
/* The label stays readable because it sits at z-index 3 and our photos */
/* are dark in the lower-left where the label sits. */
.gs-blog-card__thumb--photo img {
  opacity: 1;
  filter: none;
}
.gs-blog-card__thumb--photo::after {
  display: none;
}
.gs-blog-card__thumb-label {
  position: absolute;
  bottom: 16px; left: 18px; right: 18px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  gap: 10px;
}
.gs-blog-card__thumb-label .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: #C084FC;
  box-shadow: 0 0 8px rgba(192,132,252,0.6);
}

@media (max-width: 900px) {
  .gs-blog-card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 32px 0;
  }
  .gs-blog-card__meta { padding-left: 0; }
  .gs-blog-card__thumb { order: -1; height: 200px; }
}

/* ============================================================
   ARTICLE — brief / announcement
   ============================================================ */
.gs-article {
  padding: 0 0 100px;
  background: var(--surface);
}
.gs-article__hero {
  padding: 160px 0 72px;
  background: var(--gradient-hero);
  position: relative;
  overflow: hidden;
}
.gs-article__hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--graphite) 1px, transparent 1px),
    linear-gradient(to bottom, var(--graphite) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.04;
  pointer-events: none;
}
.gs-article__hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--w-standard);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  gap: 20px;
}
.gs-article__crumbs {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.gs-article__crumbs a {
  color: var(--fg-3);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.gs-article__crumbs a:hover { color: var(--graphite); border-color: var(--graphite); }
.gs-article__crumbs span { opacity: 0.4; }
.gs-article__kind {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--graphite);
}
.gs-article__kind::before {
  content: "";
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--graphite);
}
.gs-article__kind--announcement::before {
  background: linear-gradient(135deg, #C084FC, #7C3AED);
  box-shadow: 0 0 8px rgba(192,132,252,0.5);
}
.gs-article__kind--announcement {
  color: var(--accent-grad-1);
}
.gs-article__h {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.5vw, 60px);
  font-weight: var(--w-black);
  letter-spacing: var(--tr-hero);
  line-height: 1.05;
  color: var(--graphite);
  margin: 0;
  text-wrap: balance;
}
.gs-article__h em {
  font-style: italic;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.gs-article__dek {
  font-size: 20px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
  max-width: 56ch;
  text-wrap: pretty;
}
.gs-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding: 24px 0 0;
  margin-top: 16px;
  border-top: 1px solid var(--surface-border);
}
.gs-article__meta-item {
  display: grid;
  gap: 4px;
  min-width: 120px;
}
.gs-article__meta-item dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0;
}
.gs-article__meta-item dd {
  font-size: 14px;
  font-weight: var(--w-semibold);
  color: var(--graphite);
  margin: 0;
}

.gs-article__header-img {
  max-width: var(--w-wide);
  margin: -36px auto 0;
  padding: 0 32px;
  position: relative;
  z-index: 2;
}
.gs-article__header-img-frame {
  background: var(--graphite-deep);
  border-radius: var(--r-lg);
  height: clamp(280px, 38vw, 460px);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-result);
}
.gs-article__header-img-frame::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192,132,252,0.5), transparent);
  z-index: 2;
}
.gs-article__header-img-frame img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 75%;
  opacity: 0.75;
  filter: brightness(1.25) contrast(1.05);
}
.gs-article__header-img-frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.7) 100%);
}
.gs-article__header-img-label {
  position: absolute;
  bottom: 24px; left: 28px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  gap: 10px;
}
.gs-article__header-img-label .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: #C084FC;
  box-shadow: 0 0 8px rgba(192,132,252,0.6);
}

.gs-article__body {
  max-width: var(--w-standard);
  margin: 64px auto 0;
  padding: 0 32px;
  font-size: 18px;
  line-height: var(--lh-body);
  color: var(--fg-1);
}
.gs-article__body p { margin: 0 0 28px; max-width: 64ch; text-wrap: pretty; }
.gs-article__body p:first-of-type::first-line {
  font-weight: var(--w-medium);
}
.gs-article__body strong { font-weight: var(--w-bold); color: var(--graphite); }
.gs-article__body em {
  font-style: italic;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.gs-article__body a {
  color: var(--graphite);
  border-bottom: 1px solid rgba(0,0,0,0.16);
  transition: border-color var(--dur) var(--ease);
}
.gs-article__body a:hover { border-color: var(--graphite); }

.gs-article__body h2 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--w-extrabold);
  letter-spacing: var(--tr-h2);
  line-height: 1.18;
  color: var(--graphite);
  margin: 56px 0 24px;
  text-wrap: balance;
  display: grid;
  gap: 10px;
}
.gs-article__body h2 .gs-mono-num {
  font-size: 12px;
  opacity: 0.7;
}
.gs-article__body h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-h3);
  line-height: 1.3;
  color: var(--graphite);
  margin: 40px 0 16px;
}
.gs-article__body ul, .gs-article__body ol {
  margin: 0 0 32px;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  counter-reset: gs-list;
}
.gs-article__body ul li, .gs-article__body ol li {
  position: relative;
  padding-left: 36px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg-1);
}
.gs-article__body ul li::before {
  content: "—";
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-mono);
  color: var(--fg-4);
}
.gs-article__body ol li::before {
  counter-increment: gs-list;
  content: counter(gs-list, decimal-leading-zero);
  position: absolute;
  left: 0; top: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tr-mono);
  color: var(--fg-4);
}
.gs-article__body blockquote {
  margin: 36px 0;
  padding: 28px 32px;
  background: var(--surface-warm);
  border-left: 3px solid var(--graphite);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 20px;
  font-style: italic;
  font-weight: var(--w-medium);
  line-height: 1.55;
  color: var(--graphite);
  text-wrap: balance;
}
.gs-article__body hr {
  border: 0;
  border-top: 1px solid var(--surface-border-strong);
  margin: 56px 0;
}
.gs-article__pullquote {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: var(--w-extrabold);
  letter-spacing: var(--tr-h2);
  line-height: 1.2;
  color: var(--graphite);
  margin: 48px 0;
  padding: 32px 0;
  border-top: 1px solid var(--surface-border-strong);
  border-bottom: 1px solid var(--surface-border-strong);
  text-wrap: balance;
  max-width: 24ch;
}
.gs-article__pullquote em {
  font-style: italic;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* announcement specific: tighter, more utility */
.gs-article--announcement .gs-article__hero {
  background: var(--graphite-deep);
}
.gs-article--announcement .gs-article__hero::before { opacity: 0.06; }
.gs-article--announcement .gs-article__h { color: #fff; }
.gs-article--announcement .gs-article__dek { color: rgba(255,255,255,0.75); }
.gs-article--announcement .gs-article__crumbs { color: rgba(255,255,255,0.55); }
.gs-article--announcement .gs-article__crumbs a { color: rgba(255,255,255,0.65); }
.gs-article--announcement .gs-article__crumbs a:hover { color: #fff; border-color: #fff; }
.gs-article--announcement .gs-article__meta { border-top-color: rgba(255,255,255,0.1); }
.gs-article--announcement .gs-article__meta-item dt { color: rgba(255,255,255,0.5); }
.gs-article--announcement .gs-article__meta-item dd { color: #fff; }

.gs-changelog {
  max-width: var(--w-standard);
  margin: 48px auto 0;
  padding: 0 32px;
  display: grid;
  gap: 0;
}
.gs-changelog__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 32px;
  padding: 24px 0;
  border-top: 1px solid var(--surface-border);
  align-items: start;
}
.gs-changelog__row:last-child { border-bottom: 1px solid var(--surface-border); }
.gs-changelog__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--graphite);
  padding-top: 2px;
}
.gs-changelog__body { display: grid; gap: 8px; }
.gs-changelog__h {
  font-size: 18px;
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-tight);
  color: var(--graphite);
  margin: 0;
}
.gs-changelog__p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-2);
  margin: 0;
}

@media (max-width: 700px) {
  .gs-changelog__row { grid-template-columns: 1fr; gap: 8px; }
  .gs-article__body { font-size: 17px; }
  .gs-article__body h2 { font-size: 26px; }
  .gs-article__pullquote { font-size: 22px; }
}

/* footer card-of-cta at bottom of article */
.gs-article__cta {
  max-width: var(--w-standard);
  margin: 80px auto 0;
  padding: 0 32px;
}
.gs-article__cta-inner {
  background: var(--graphite-deep);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 40px 44px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-result);
}
.gs-article__cta-inner::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192,132,252,0.5), transparent);
}
.gs-article__cta-h {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--w-extrabold);
  letter-spacing: var(--tr-tight);
  line-height: 1.25;
  color: #fff;
  margin: 0;
  max-width: 36ch;
}
.gs-article__cta-h em {
  font-style: italic;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
@media (max-width: 700px) {
  .gs-article__cta-inner { grid-template-columns: 1fr; padding: 32px 24px; }
}

/* ============================================================
   ARTICLE — additional layout helpers (stats, tables, triptychs, author)
   Used by long-form brief 01.
   ============================================================ */
.gs-article__body-wide {
  max-width: var(--w-wide);
  margin: 56px auto 0;
  padding: 0 32px;
}
.gs-article__statgrid {
  display: grid;
  gap: 1px;
  background: var(--surface-border);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 32px 0 8px;
  box-shadow: var(--shadow-card);
}
.gs-article__statgrid--3 { grid-template-columns: repeat(3, 1fr); }
.gs-article__statgrid--4 { grid-template-columns: repeat(4, 1fr); }
.gs-article__statgrid > div {
  background: var(--surface);
  padding: 32px 28px;
  display: grid;
  gap: 8px;
  position: relative;
}
.gs-article__statgrid > div::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
}
.gs-article__statgrid .gs-stat-value { font-size: 40px; }
.gs-article__statgrid .gs-stat-label { font-size: 11px; line-height: 1.5; }

@media (max-width: 900px) {
  .gs-article__statgrid--3,
  .gs-article__statgrid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .gs-article__statgrid--3,
  .gs-article__statgrid--4 { grid-template-columns: 1fr; }
}

/* table */
.gs-article__table-wrap {
  margin: 32px 0 8px;
  border: 1px solid var(--surface-border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--surface);
}
.gs-article__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.gs-article__table thead th {
  background: var(--surface-warm);
  text-align: left;
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: var(--w-medium);
  border-bottom: 1px solid var(--surface-border);
}
.gs-article__table tbody td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--surface-border);
  vertical-align: top;
  line-height: 1.6;
  color: var(--fg-1);
}
.gs-article__table tbody tr:last-child td { border-bottom: 0; }
.gs-article__table tbody td:first-child {
  font-weight: var(--w-semibold);
  color: var(--graphite);
  width: 220px;
}

/* FDE comparison */
.gs-article__compare4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 32px 0 16px;
}
.gs-article__compare4-card {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-md);
  padding: 24px 22px;
  display: grid;
  gap: 12px;
  position: relative;
  box-shadow: var(--shadow-card);
}
.gs-article__compare4-card--feature {
  background: var(--graphite-deep);
  border-color: rgba(255,255,255,0.06);
  color: #fff;
  box-shadow: var(--shadow-result);
}
.gs-article__compare4-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.gs-article__compare4-card--feature::before {
  background: linear-gradient(90deg, transparent, rgba(192,132,252,0.45), transparent);
}
.gs-article__compare4-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
}
.gs-article__compare4-card--feature .gs-article__compare4-eyebrow { color: #C084FC; }
.gs-article__compare4-h {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-tight);
  color: var(--graphite);
  margin: 0;
}
.gs-article__compare4-card--feature .gs-article__compare4-h { color: #fff; }
.gs-article__compare4-rows {
  display: grid;
  gap: 0;
  margin-top: 4px;
  border-top: 1px solid var(--surface-border);
}
.gs-article__compare4-card--feature .gs-article__compare4-rows { border-top-color: rgba(255,255,255,0.08); }
.gs-article__compare4-row {
  display: grid;
  grid-template-columns: 1fr 18px;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--surface-border);
  font-size: 13px;
  line-height: 1.4;
  color: var(--fg-2);
}
.gs-article__compare4-card--feature .gs-article__compare4-row {
  border-bottom-color: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.8);
}
.gs-article__compare4-row:last-child { border-bottom: 0; }
.gs-article__compare4-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: var(--w-bold);
}
.gs-article__compare4-mark--yes { color: var(--accent-grad-1); }
.gs-article__compare4-mark--no { color: var(--fg-4); opacity: 0.6; }
.gs-article__compare4-card--feature .gs-article__compare4-mark--yes { color: #C084FC; }
.gs-article__compare4-card--feature .gs-article__compare4-mark--no { color: rgba(255,255,255,0.3); }

@media (max-width: 1000px) {
  .gs-article__compare4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .gs-article__compare4 { grid-template-columns: 1fr; }
}

/* Hybrid Renaissance triptych */
.gs-article__triptych {
  display: grid;
  grid-template-columns: 1fr 24px 1fr 24px 1fr;
  gap: 12px;
  margin: 32px 0 16px;
  align-items: stretch;
}
.gs-article__triptych-cell {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-md);
  padding: 24px 22px;
  display: grid;
  gap: 10px;
  align-content: start;
  position: relative;
  box-shadow: var(--shadow-card);
}
.gs-article__triptych-cell--result {
  background: var(--graphite-deep);
  border-color: rgba(255,255,255,0.06);
  color: #fff;
  box-shadow: var(--shadow-result);
}
.gs-article__triptych-cell::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.gs-article__triptych-cell--result::before {
  background: linear-gradient(90deg, transparent, rgba(192,132,252,0.45), transparent);
}
.gs-article__triptych-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
}
.gs-article__triptych-cell--result .gs-article__triptych-num { color: #C084FC; }
.gs-article__triptych-h {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-tight);
  color: var(--graphite);
  margin: 0;
}
.gs-article__triptych-cell--result .gs-article__triptych-h { color: #fff; }
.gs-article__triptych-p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
}
.gs-article__triptych-cell--result .gs-article__triptych-p { color: rgba(255,255,255,0.78); }
.gs-article__triptych-op {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--fg-4);
}

@media (max-width: 900px) {
  .gs-article__triptych {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .gs-article__triptych-op {
    padding: 4px 0;
    font-size: 18px;
  }
}

/* Three pillars (numbered cards inside article body) */
.gs-article__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 28px 0 16px;
}
.gs-article__pillar {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-md);
  padding: 28px 26px;
  display: grid;
  gap: 12px;
  position: relative;
  box-shadow: var(--shadow-card);
  align-content: start;
}
.gs-article__pillar::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.gs-article__pillar-num {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: var(--w-medium);
  color: var(--fg-4);
  line-height: 1;
}
.gs-article__pillar-h {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-tight);
  color: var(--graphite);
  margin: 0;
}
.gs-article__pillar-p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg-2);
  margin: 0;
}
@media (max-width: 900px) { .gs-article__pillars { grid-template-columns: 1fr; } }

/* ============================================================
   AUTHOR block
   ============================================================ */
.gs-author {
  max-width: var(--w-standard);
  margin: 80px auto 0;
  padding: 0 32px;
}
.gs-author__inner {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-lg);
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  position: relative;
  box-shadow: var(--shadow-card);
}
.gs-author__inner::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192,132,252,0.4), transparent);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.gs-author__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--surface-border);
}
.gs-author__photo {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: var(--graphite-deep);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--surface-border-strong), var(--shadow-card);
}
.gs-author__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
.gs-author__photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  text-align: center;
  padding: 12px;
  line-height: 1.4;
}
.gs-author__photo-placeholder::before { content: none; }
.gs-author__ident {
  display: grid;
  gap: 6px;
  align-content: center;
}
.gs-author__body { display: grid; gap: 12px; }
.gs-author__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
}
.gs-author__name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--w-extrabold);
  letter-spacing: var(--tr-tight);
  color: var(--graphite);
  margin: 0;
}
.gs-author__role {
  font-size: 14px;
  font-family: var(--font-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
}
.gs-author__bio {
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-2);
  margin: 8px 0 0;
}
.gs-author__bio p { margin: 0 0 12px; max-width: 60ch; }
.gs-author__bio p:last-child { margin-bottom: 0; }
.gs-author__links {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.gs-author__links a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--graphite);
  border-bottom: 1px solid var(--surface-border-strong);
  padding-bottom: 2px;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.gs-author__links a:hover { color: var(--accent-grad-1); border-bottom-color: var(--accent-grad-1); }

@media (max-width: 700px) {
  .gs-author__inner { padding: 28px 24px; gap: 20px; }
  .gs-author__head { grid-template-columns: 1fr; gap: 16px; }
  .gs-author__photo { width: 80px; height: 80px; }
}

/* ============================================================
   TEAM (Practice subsection — first tab)
   ============================================================ */

/* Team tab gets a slight purple accent so it reads as the
   "meet-the-people" entry, distinct from the numbered layers. */
.gs-services-tab--team[aria-selected="true"] {
  color: var(--graphite);
  border-bottom-color: var(--graphite);
}
.gs-services-tab--team {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-tight);
  text-transform: none;
  padding: 16px 24px 18px;
}

/* Team panel breaks the standard 2-col layout to stack copy over a
   4-card row. */
.gs-services-panel--team {
  grid-template-columns: 1fr;
  gap: 40px;
}
.gs-services-panel--team .gs-services-panel__copy { max-width: 720px; }

.gs-team__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  width: 100%;
}

.gs-team-card {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-lg);
  padding: 28px;
  display: grid;
  gap: 22px;
  position: relative;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  align-content: start;
}
.gs-team-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.gs-team-card:hover { box-shadow: var(--shadow-lifted); transform: translateY(-2px); }

.gs-team-card__photo {
  width: 80%;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  background: var(--graphite-deep);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gs-team-card__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
.gs-team-card__placeholder {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-mono);
  color: rgba(255,255,255,0.55);
}

.gs-team-card__body {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding-left: 48px;  /* aligns text with photo indent */
}
.gs-team-card__name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-tight);
  color: var(--graphite);
  margin: 0;
  text-wrap: balance;
}
.gs-team-card__role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
  line-height: 1.5;
}
.gs-team-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--surface-border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--graphite);
  transition: color var(--dur) var(--ease);
}
.gs-team-card__link:hover { color: var(--accent-grad-1); }

@media (max-width: 1000px) {
  .gs-team__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .gs-team__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   LAB / FUTURES FACTORY
   ============================================================ */
.gs-lab-hero {
  padding: 200px 0 64px;
  background: var(--gradient-hero);
  position: relative;
  overflow: hidden;
}
.gs-lab-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--graphite) 1px, transparent 1px),
    linear-gradient(to bottom, var(--graphite) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.04;
  pointer-events: none;
}
.gs-lab-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--w-chrome);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  gap: 18px;
  max-width: 820px;
}
.gs-lab-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
}
.gs-lab-hero__h {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: var(--w-black);
  letter-spacing: var(--tr-hero);
  line-height: 1.05;
  color: var(--graphite);
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.gs-lab-hero__h em {
  font-style: italic;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.gs-lab-hero__sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
  max-width: 56ch;
}

.gs-lab__section-head {
  display: grid;
  gap: 14px;
  max-width: 720px;
  margin: 0 0 40px;
}
.gs-lab__section-head h2 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--w-extrabold);
  letter-spacing: var(--tr-h2);
  line-height: 1.18;
  color: var(--graphite);
  margin: 0;
  text-wrap: balance;
}
.gs-lab__section-head h2 em {
  font-style: italic;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.gs-lab__section-head p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-2);
  margin: 0;
  max-width: 56ch;
}

.gs-lab-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.gs-lab-card {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  box-shadow: var(--shadow-card);
  position: relative;
  cursor: pointer;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.gs-lab-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  z-index: 3;
}
/* Hover — purple accent border + soft purple glow + lift */
.gs-lab-card:hover {
  border-color: var(--accent-grad-1, #7C3AED);
  box-shadow: 0 12px 28px -10px rgba(124, 58, 237, 0.32), var(--shadow-lifted);
  transform: translateY(-2px);
}
/* Don't make cards clickable while the tease overlay is active —
   they're blurred + pointer-events: none in that state anyway, but
   the cursor should also reflect that they're inert. */
.gs-lab-tease:not(.gs-lab-tease--unlocked) .gs-lab-card {
  cursor: default;
}

.gs-lab-card__cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--graphite-deep);
  overflow: hidden;
}
.gs-lab-card__cover img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.gs-lab-card__body {
  padding: 24px 24px 26px;
  display: grid;
  gap: 12px;
  align-content: start;
}
.gs-lab-card__topline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.gs-lab-card__h {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.2;
  color: var(--graphite);
  margin: 0;
  text-wrap: balance;
}
.gs-lab-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
}
.gs-lab-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--surface-border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-3);
}
.gs-lab-card__foot strong {
  color: var(--graphite);
  font-weight: var(--w-medium);
}

/* Status pills */
.gs-lab-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 4px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid var(--surface-border-strong);
  color: var(--graphite);
  background: var(--surface);
}
.gs-lab-status::before {
  content: "";
  width: 6px; height: 6px; border-radius: 999px;
  background: currentColor;
}
.gs-lab-status--active {
  color: oklch(58% 0.16 145);
  border-color: oklch(58% 0.16 145 / 0.35);
  background: oklch(96% 0.04 145);
}
.gs-lab-status--dev {
  color: oklch(58% 0.14 65);
  border-color: oklch(58% 0.14 65 / 0.35);
  background: oklch(96% 0.05 80);
}
.gs-lab-status--early {
  color: oklch(50% 0.18 295);
  border-color: oklch(50% 0.18 295 / 0.35);
  background: oklch(96% 0.04 295);
}

/* ---------- LAB CARD OVERLAY (click-to-expand, 2X) ----------
   Triggered by clicking any unlocked .gs-lab-card. Cloned card
   content renders inside .gs-lab-overlay__card at ~2X the original
   visual weight (bigger image, larger type, more breathing room).
   Backdrop tap / X / Escape all close it. Body scroll locked while
   open (handled by JS in lab.js). */
.gs-lab-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  overflow-y: auto;
}
.gs-lab-overlay:not([hidden]) {
  display: flex;
}
.gs-lab-overlay__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.62);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  cursor: pointer;
  animation: gs-lab-overlay-fade var(--dur) var(--ease);
}
@keyframes gs-lab-overlay-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.gs-lab-overlay__card {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--accent-grad-1, #7C3AED);
  border-radius: var(--r-lg);
  overflow: hidden;
  width: min(720px, 100%);
  max-width: 720px;
  box-shadow: 0 24px 48px -16px rgba(124, 58, 237, 0.3), var(--shadow-result);
  margin: auto;
  animation: gs-lab-overlay-rise 280ms var(--ease);
}
@keyframes gs-lab-overlay-rise {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.gs-lab-overlay__card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192, 132, 252, 0.7), transparent);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  z-index: 3;
}
/* Hover effect doesn't apply inside the overlay — kill the cursor-pointer
   and pop-up state since this is the destination, not a card waiting to be
   clicked. */
.gs-lab-overlay__card .gs-lab-card,
.gs-lab-overlay__card > .gs-lab-card__cover,
.gs-lab-overlay__card > .gs-lab-card__body {
  cursor: default;
}
/* Scale up the card's internals to ~2X for the overlay view */
.gs-lab-overlay__card .gs-lab-card__cover {
  aspect-ratio: 16 / 9;
}
.gs-lab-overlay__card .gs-lab-card__body {
  padding: 40px 44px 44px;
  gap: 18px;
}
.gs-lab-overlay__card .gs-lab-card__h {
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.gs-lab-overlay__card .gs-lab-card__desc {
  font-size: 17px;
  line-height: 1.65;
}
.gs-lab-overlay__card .gs-lab-card__foot {
  padding-top: 22px;
  font-size: 12px;
}
.gs-lab-overlay__card .gs-lab-status {
  font-size: 11px;
  padding: 6px 12px 5px;
}

/* Close button — top-right of the expanded card */
.gs-lab-overlay__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--surface-border);
  background: rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  color: var(--fg-2);
  cursor: pointer;
  z-index: 4;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.gs-lab-overlay__close:hover {
  color: var(--graphite);
  border-color: var(--surface-border-strong);
  background: var(--surface-warm);
}
.gs-lab-overlay__close:focus-visible {
  outline: 2px solid var(--accent-grad-1, #7C3AED);
  outline-offset: 2px;
}

/* Mobile — full-screen sheet pattern matching the booking modal */
@media (max-width: 640px) {
  .gs-lab-overlay {
    padding: 0;
    align-items: flex-start;
  }
  .gs-lab-overlay__card {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    border-radius: 0;
    border-width: 0;
    border-top-width: 0;
    margin: 0;
  }
  .gs-lab-overlay__card::before { border-radius: 0; }
  .gs-lab-overlay__card .gs-lab-card__body {
    padding: 32px 20px 40px;
  }
  .gs-lab-overlay__card .gs-lab-card__h {
    font-size: 28px;
  }
  .gs-lab-overlay__close {
    top: 12px;
    right: 12px;
  }
}

/* Partner tag — for third-party items (Anthropic Cowork) */
.gs-lab-partner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 3px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  line-height: 1;
  color: var(--graphite);
  background: var(--surface-warm);
  border: 1px dashed var(--surface-border-strong);
}

/* Lab tease — single grid-level overlay for the private-beta state.
   The entire .gs-lab-grid is wrapped in .gs-lab-tease so all 9 cards
   are blurred and dimmed together, and a single overlay sits on top
   with a lock icon, label, headline, sub, and one Request access CTA
   that opens the existing booking modal. */
.gs-lab-tease {
  position: relative;
}
.gs-lab-tease > .gs-lab-grid {
  filter: blur(4px);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}
.gs-lab-tease__overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 48px 24px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(245, 245, 245, 0.45) 0%, rgba(245, 245, 245, 0.70) 100%);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  border-radius: var(--r-lg);
}
.gs-lab-tease__icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--graphite);
  color: #fff;
  box-shadow: var(--shadow-lifted);
}
.gs-lab-tease__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--graphite);
  opacity: 0.85;
}
.gs-lab-tease__h {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: var(--w-extrabold);
  letter-spacing: var(--tr-h2);
  line-height: 1.15;
  color: var(--graphite);
  margin: 0;
  max-width: 520px;
}
.gs-lab-tease__sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
  max-width: 480px;
}
.gs-lab-tease__overlay .gs-btn {
  margin-top: 4px;
}

/* Access-code form (revealed when padlock is tapped) */
.gs-lab-tease__icon {
  border: 0;
  cursor: pointer;
  padding: 0;
  -webkit-appearance: none;
          appearance: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gs-lab-tease__icon:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px -4px rgba(124, 58, 237, 0.45);
}
.gs-lab-tease__icon:focus-visible {
  outline: 2px solid var(--graphite);
  outline-offset: 4px;
}
.gs-lab-tease__form {
  /* Only render as flex when not hidden — otherwise the [hidden]
     attribute's default display:none gets overridden by display:flex */
  gap: 8px;
  width: 100%;
  max-width: 340px;
}
.gs-lab-tease__form:not([hidden]) {
  display: flex;
}
.gs-lab-tease__form--shake {
  animation: gs-lab-tease-shake 0.42s cubic-bezier(.36, .07, .19, .97) both;
}
@keyframes gs-lab-tease-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}
.gs-lab-tease__input {
  flex: 1;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 16px;
  border: 1px solid var(--surface-border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--graphite);
  letter-spacing: 0.05em;
}
.gs-lab-tease__input:focus {
  outline: 2px solid var(--graphite);
  outline-offset: 2px;
  border-color: transparent;
}
.gs-lab-tease__error {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: #b91c1c;
  margin: 0;
}

/* Unlocked — grid un-blurs, overlay disappears */
.gs-lab-tease--unlocked > .gs-lab-grid {
  filter: none;
  opacity: 1;
  pointer-events: auto;
  user-select: auto;
}
.gs-lab-tease--unlocked > .gs-lab-tease__overlay {
  display: none;
}

@media (max-width: 1000px) {
  .gs-lab-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .gs-lab-grid { grid-template-columns: 1fr; }
}

/* Footer brand cluster — Studio pill stacked with Lab link, centered */
.gs-footer__brand-cluster {
  display: inline-grid;
  justify-self: start;
  justify-items: center;
  gap: 8px;
}
.gs-footer__brand-cluster .gs-nav-tag { justify-self: center; }

/* Footer Lab link — purple-gradient text, sits under the pill */
.gs-footer__lab-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.gs-footer__lab-link:hover { opacity: 0.85; border-bottom-color: rgba(124,58,237,0.5); }
.gs-footer__lab-link .gs-arrow {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* ---------- Blog article: photo hero variant --------------- */
/* Used when a real photo replaces the title text visually.
   The H1 remains in the DOM as .gs-sr-only for accessibility. */
.gs-article__header-img-frame--photo {
  height: auto;
  aspect-ratio: 16 / 8.71;
}
.gs-article__header-img-frame--photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
  filter: none;
}
.gs-article__header-img-frame--photo::after {
  content: none;
}

/* Inline hero image inside .gs-article__hero-inner */
.gs-article__hero-img {
  margin: 28px 0 32px;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-result);
  background: var(--graphite-deep);
}
.gs-article__hero-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* Screen-reader-only utility */
.gs-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ════════════════════════════════════════════════════════════════
   MOBILE ADDITIONS (responsive overrides — additive only)
   Rule: never modify rules above this section. Only add new rules
   inside @media blocks here. Desktop CSS stays byte-identical.
   See CLAUDE.md Rule 7 for the full directive.
   ════════════════════════════════════════════════════════════════ */

/* Ultra-narrow phones (<400px, e.g. iPhone SE 375px, small Android 360px)
   ──────────────────────────────────────────────────────────────────
   The fixed-top nav has padding: 18px 32px at desktop, 14px 24px at 900px.
   Below 400px, the brand mark + 'Studio' badge + the two right-side
   buttons start to squeeze. Tighten the nav so everything fits on a
   single line without overflowing on the smallest common phones. */
@media (max-width: 400px) {
  .gs-nav__inner {
    padding: 10px 16px;
  }
  /* Hide the 'Studio' badge tag on the smallest screens — the brand
     mark alone is sufficient identity, the badge is decorative here. */
  .gs-nav__brand .gs-nav-tag {
    display: none;
  }
}


/* Mobile nav menu — hamburger toggle + off-canvas slide-in panel
   ──────────────────────────────────────────────────────────────────
   Existing rules already hide .gs-nav__links at 900px. This adds:
   - a hamburger toggle button that appears alongside the existing
     .gs-nav__actions buttons at the same breakpoint
   - a slide-in side panel that mirrors the nav links + CTAs
   Default (desktop): both new elements are display:none, so desktop
   CSS produces byte-identical output. */

.gs-nav__mobile-toggle { display: none; }
.gs-mobile-menu        { display: none; }

@media (max-width: 900px) {
  /* Hamburger toggle button — sits next to .gs-nav__actions */
  .gs-nav__mobile-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    padding: 10px 8px;
    margin-left: 4px;
    background: transparent;
    border: 1px solid var(--surface-border);
    border-radius: var(--r-sm);
    cursor: pointer;
    -webkit-appearance: none;
            appearance: none;
  }
  .gs-nav__mobile-toggle-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--graphite);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  /* Animate hamburger → X when open */
  .gs-nav__mobile-toggle[aria-expanded="true"] .gs-nav__mobile-toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .gs-nav__mobile-toggle[aria-expanded="true"] .gs-nav__mobile-toggle-bar:nth-child(2) {
    opacity: 0;
  }
  .gs-nav__mobile-toggle[aria-expanded="true"] .gs-nav__mobile-toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* Mobile menu container (full-screen fixed overlay) */
  .gs-mobile-menu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100;
    visibility: hidden;
    pointer-events: none;
  }
  .gs-mobile-menu[data-open="true"] {
    visibility: visible;
    pointer-events: auto;
  }

  /* Backdrop — dimmed overlay behind the panel; click-to-close */
  .gs-mobile-menu__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.6);
    opacity: 0;
    transition: opacity 0.25s ease;
    cursor: pointer;
  }
  .gs-mobile-menu[data-open="true"] .gs-mobile-menu__backdrop {
    opacity: 1;
  }

  /* Slide-in panel from right */
  .gs-mobile-menu__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    padding: 80px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
  }
  .gs-mobile-menu[data-open="true"] .gs-mobile-menu__panel {
    transform: translateX(0);
  }

  /* Close button (top-right inside the panel) */
  .gs-mobile-menu__close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--surface-border);
    border-radius: var(--r-sm);
    color: var(--graphite);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
            appearance: none;
  }

  /* Link list */
  .gs-mobile-menu__links {
    display: flex;
    flex-direction: column;
  }
  .gs-mobile-menu__links a {
    display: block;
    padding: 14px 0;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: var(--w-semibold);
    color: var(--graphite);
    text-decoration: none;
    letter-spacing: -0.01em;
    border-bottom: 1px solid var(--surface-border);
  }
  .gs-mobile-menu__links a:hover,
  .gs-mobile-menu__links a:focus-visible {
    color: var(--accent-1, #7C3AED);
  }

  /* CTAs pinned to bottom of panel */
  .gs-mobile-menu__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
  }
  .gs-mobile-menu__actions .gs-btn {
    width: 100%;
    justify-content: center;
  }

  /* Lock body scroll while menu is open */
  body.gs-mobile-menu-open {
    overflow: hidden;
  }
}


/* Mobile — minimal top-of-page: hide the announcement banner and the
   'Read the brief' ghost button in the nav. Result is a clean mobile
   header showing just the GrowthScaler brand + Book an audit primary
   CTA + the hamburger toggle.
   ──────────────────────────────────────────────────────────────────
   - Banner has its own dismiss flow on desktop. On mobile we don't
     want the visual weight; hide it entirely.
   - 'Read the brief' ghost button is a duplicate of the Blog link
     which already exists inside the slide-in mobile menu panel.
     (Existing rule already hides it at <640px; this brings the
     hide-breakpoint up to match the hamburger appearance at 900px.) */
@media (max-width: 900px) {
  .gs-announce { display: none; }
  .gs-nav__actions .gs-btn--ghost { display: none; }
}


/* Hero stat-corner alignment — mobile
   ──────────────────────────────────────────────────────────────────
   At <=1100px the existing rule flips the stat-corner from absolute
   to static, but the element sits OUTSIDE .gs-container (sibling of
   .gs-hero__inner), so it loses the container's 32px horizontal
   padding and hugs the viewport edge. Add matching padding here so
   "$1 Billion+" lines up with the hero copy below it. */
@media (max-width: 1100px) {
  .gs-hero__stat-corner { padding-left: 32px; padding-right: 32px; }
}


/* CTA banner — mobile button safety
   ──────────────────────────────────────────────────────────────────
   The "Book an audit" primary button in the bottom CTA banner sits
   inside .gs-cta-banner__actions (flex-wrap). On narrow widths, the
   --lg button can grow wider than the dark inset. Cap the width so
   it always has visible right-side padding inside the banner. */
@media (max-width: 900px) {
  .gs-cta-banner__actions .gs-btn { max-width: 100%; }
}


/* Lab tease overlay — pin to top on mobile
   ──────────────────────────────────────────────────────────────────
   On desktop the overlay is centered over a 3-column grid that fits
   above the fold. On mobile the grid stacks into 9 tall cards and
   the centered overlay lands far below the fold — the user has to
   scroll just to find the unlock / Request access CTA. Pin the
   overlay content to the top of the blurred grid on mobile so it's
   visible as soon as the section enters the viewport. */
@media (max-width: 900px) {
  .gs-lab-tease__overlay {
    justify-content: flex-start;
    padding-top: 56px;
    padding-bottom: 56px;
  }
}


/* ════════════════════════════════════════════════════════════════
   PHASE 2 — Booking modal mobile treatment
   ════════════════════════════════════════════════════════════════
   Two-tier approach for the booking flow:

   ≤900px (tablet + phone): the desktop modal stays as a centered
     card, but the 2-column form grid stacks to 1 column, the
     form footer stacks vertically so the submit button gets full
     width, the success-state stats stack, and the close button
     bumps to a 44px tap target.

   ≤640px (phone-only): the modal goes edge-to-edge as a full-
     screen sheet. Recovers all the wasted padding around the dialog
     and gives the form room to breathe. Internal scroll uses 100dvh
     so the iOS URL-bar collapse doesn't change the layout. Inputs
     get scroll-margin-bottom so they stay visible above the soft
     keyboard when focused. Phase 1's MOBILE ADDITIONS rule applies:
     desktop CSS above this section is byte-identical. */

@media (max-width: 900px) {
  /* Form grid stacks to a single column so each field has the full
     dialog width instead of cramming Name + Email side-by-side. */
  .gs-form__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  /* Form footer stacks: meta text above, submit button below at
     full width. Easier thumb reach, no width-fighting on narrow
     viewports. */
  .gs-form__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .gs-form__foot .gs-btn {
    width: 100%;
    justify-content: center;
  }
  /* Success state stats stack to single column too. */
  .gs-modal__success-stats {
    grid-template-columns: 1fr;
  }
  .gs-modal__body--success > .gs-btn {
    width: 100%;
    justify-content: center;
  }
  /* Bump the close button to a 44px tap target (iOS HIG minimum). */
  .gs-modal__close {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 640px) {
  /* Full-screen sheet — modal wrapper drops its padding and the
     dialog fills the viewport edge to edge. The wrapper no longer
     scrolls; the dialog scrolls internally instead, which prevents
     iOS rubber-band from exposing the backdrop on horizontal swipes
     or scroll-bounce boundaries. */
  .gs-modal {
    padding: 0;
    overflow: hidden;
    overscroll-behavior: contain;
  }
  /* Drop the backdrop on mobile — the full-screen dialog covers the
     entire viewport, so the blur is invisible. Keeping it triggers
     known iOS Safari rendering bugs where the backdrop-filter shows
     transparent bands at scroll boundaries. */
  .gs-modal__backdrop {
    display: none;
  }
  .gs-modal__dialog {
    max-width: none;
    width: 100%;
    /* Cascading height fallbacks for cross-browser support:
       - 100vh: old Safari (URL bar included → over-tall)
       - 100svh: small viewport (URL bar visible)
       - 100dvh: dynamic viewport (adapts to URL bar collapse) */
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
    border-width: 0;
    /* The dialog itself handles vertical scroll. Horizontal is
       always locked. */
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .gs-modal__dialog::before {
    border-radius: 0;
  }
  /* Tighten body padding so the form gets more horizontal room.
     Top padding leaves space below the close button. */
  .gs-modal__body {
    padding: 56px 20px 32px;
  }
  /* Smaller h2 so it doesn't wrap into 3+ lines on a 375px screen. */
  .gs-modal__h {
    font-size: 24px;
  }
  /* Tighten header margins for a denser top-of-sheet. */
  .gs-modal__head {
    gap: 10px;
    margin-bottom: 22px;
  }
  /* Close button tucks into the top-right corner of the sheet. */
  .gs-modal__close {
    top: 12px;
    right: 12px;
  }
  /* Soft-keyboard handling: when iOS Safari focuses an input it
     auto-scrolls the element into view. scroll-margin-bottom adds
     clearance below the input so the on-screen keyboard never
     covers it. 140px is enough for the iOS keyboard at typical
     heights (250-300px). */
  .gs-field__input,
  .gs-field__textarea,
  .gs-field__select {
    scroll-margin-bottom: 140px;
  }
  /* The success-state stats card looks heavy at full width on a
     phone — tone down the padding so it doesn't dominate the sheet. */
  .gs-modal__success-stats > div {
    padding: 14px 16px;
  }
}


/* Hero stat-corner — kill the hard <br> on mobile so the label flows
   naturally instead of stranding "THE" alone on a line.
   ──────────────────────────────────────────────────────────────────
   Desktop has a fixed 240px max-width on .gs-hero__stat-corner where
   the <br> in the markup creates a clean 2-line label. On mobile the
   stat-corner is full-width (already overridden at <=1100px), so the
   hardcoded break lands at an awkward spot ("ACROSS / THE / FOUNDERS'").
   Hide the <br> at mobile widths and let the text wrap. */
@media (max-width: 900px) {
  .gs-hero__stat-corner .gs-stat-label br { display: none; }
  .gs-hero__stat-corner .gs-stat-label { text-wrap: balance; }
}


/* Article tables — horizontal scroll on mobile so wide content stays
   readable. Affects The Framework table in blog-headless-gtm.html and
   any future <table class="gs-article__table"> across the site.
   ──────────────────────────────────────────────────────────────────
   Desktop: tables fit comfortably in the article's body width
   (.gs-article__body-wide is ~720-820px). The first column has a
   fixed 220px width and the right column gets the rest — works fine.
   Mobile: the right column gets crushed to ~155px and long descriptive
   text breaks word-by-word (each word on its own line). Two fixes:
     1. Drop the wrapper's overflow:hidden so internal horizontal
        scroll is allowed when the table is wider than the viewport
     2. Set a usable min-width on the table so columns don't collapse
        below readable widths; users can swipe-scroll within the
        wrapper to see the rest. */
@media (max-width: 900px) {
  .gs-article__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .gs-article__table {
    min-width: 560px;     /* enough room for 2-column tables to read */
  }
  .gs-article__table tbody td:first-child {
    width: 180px;         /* tighten the label column slightly */
  }
}