/* ============================================
   Giant Swarm & Friends — community roundtable landing page.

   Four page-specific components:
     - .gs-gsf-hero        2-col hero: title + lede + step
                           indicator LEFT, signup form card RIGHT
     - .gs-gsf-steps       Interactive 3-step indicator
                           (clickable tags + numbered dots that
                           swap the panel below)
     - .gs-gsf-form        White form card sitting on the dark
                           hero bg
     - .gs-gsf-speakers    Horizontal speaker cards (photo left,
                           name+role right) on the dark band
     - .gs-gsf-benefits    4-up "What will I learn?" illustration
                           cards on muted bg
   ============================================ */

/* ─── Hero — 2-col layout ──────────────────────────────────── */

.gs-gsf-hero {
  /* Generous top padding for the fixed header overlap. Bottom
     padding accommodates the Previous Speakers block which now
     lives inside the hero (below the 2-col row). */
  padding-top: 9rem;
  padding-bottom: 6rem;
}

.gs-gsf-hero__row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 4rem;
  /* Vertically center — the left content stack is shorter than
     the form on the right; centering keeps them visually
     balanced. */
  align-items: center;
}

.gs-gsf-hero__title {
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  color: #fff;
  margin: 0 0 1.25rem;
  text-wrap: balance;
  line-height: var(--leading-tight);
}

.gs-gsf-hero__lede {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 2rem;
  max-width: 38rem;
  text-wrap: pretty;
}

/* ─── Interactive 3-step indicator ─────────────────────────── */

.gs-gsf-steps {
  margin-top: 2rem;
}

/* Rail = the row of [item, bar, item, bar, item]. Each item
   stacks a tooltip-style tag ABOVE its numbered dot (tag is
   absolutely positioned). Extra top padding makes room for the
   tooltip without clipping. */
.gs-gsf-steps__rail {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-top: 3.5rem;
}

/* Step item — relative positioning anchor for the tag tooltip. */
.gs-gsf-steps__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tag (tooltip) — coral rounded rectangle with a downward arrow
   pointing into the center of its dot. Hidden by default; only
   the .is-active item's tag is visible. */
.gs-gsf-steps__tag {
  position: absolute;
  bottom: calc(100% + 0.625rem);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  white-space: nowrap;
  background: var(--color-brand-accent);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: 0.4rem 0.875rem;
  border-radius: 8px;
}

/* Downward arrow on the tag — coral triangle pointing into the
   active dot. Drawn with CSS borders. The 1px negative offset
   overlaps with the tag's bottom edge so sub-pixel rendering
   doesn't leave a visible gap between them. */
.gs-gsf-steps__tag::after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--color-brand-accent);
}

.gs-gsf-steps__item.is-active .gs-gsf-steps__tag {
  display: block;
}

/* Numbered dot — outlined circle when idle, coral fill when
   parent item is active. */
.gs-gsf-steps__dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
  flex-shrink: 0;
  font-family: inherit;
}

.gs-gsf-steps__dot:hover {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.gs-gsf-steps__item.is-active .gs-gsf-steps__dot {
  /* Orange→coral brand gradient matches the active state shown
     in the live design; tooltip stays solid coral above. */
  background: var(--gradient-cta);
  border-color: transparent;
  color: #fff;
}

.gs-gsf-steps__bar {
  flex: 0 1 50px;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.2);
}

/* Panel — the title + description that swaps per active step. */
.gs-gsf-steps__panel {
  margin-top: 1.5rem;
}

/* Panel — the title + description that swaps per active step. */
.gs-gsf-steps__panel-title {
  font-size: var(--text-h5);
  font-weight: var(--weight-bold);
  color: #fff;
  margin: 0 0 0.5rem;
}

.gs-gsf-steps__panel-desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-width: 36rem;
  text-wrap: pretty;
}

/* ─── Signup form card ─────────────────────────────────────── */

.gs-gsf-form {
  background: var(--color-bg);
  border-radius: 24px;
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
}

.gs-gsf-form__title {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--color-fg);
  margin: 0;
  text-wrap: balance;
}

.gs-gsf-form__lede {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-body);
  margin: 0;
}

.gs-gsf-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.gs-gsf-form__field {
  display: flex;
  flex-direction: column;
  /* Inputs have an intrinsic min-width (~20ch default) which
     blows past the grid track on narrow widths. Forcing min:0
     lets the field shrink to its grid cell. */
  min-width: 0;
}

/* Visually hidden labels — placeholders carry the field name
   for sighted users, but the label stays for screen readers. */
.gs-gsf-form__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gs-gsf-form__input {
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-fg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  /* Pill radius — matches the convention used by .gs-wgs-form on
     contact / dev-platforms / IIoT / platform-team-enablement so
     every form on the site reads as the same input language. */
  border-radius: 999px;
  padding: 0.75rem 1.25rem;
  /* Same overflow fix — let the input shrink to its container
     instead of holding the HTML default ~20-char min-width. */
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.gs-gsf-form__input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.gs-gsf-form__input::placeholder {
  color: var(--color-fg-body);
  opacity: 0.7;
}

.gs-gsf-form__select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-fg-body) 50%),
    linear-gradient(135deg, var(--color-fg-body) 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: 2rem;
}

.gs-gsf-form__privacy {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-body);
  margin: 0.25rem 0 0;
}

.gs-gsf-form__check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: var(--text-sm);
  color: var(--color-fg-body);
  cursor: pointer;
  margin: 0;
}

.gs-gsf-form__check input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.gs-gsf-form__submit {
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* ============================================
   HubSpot form embed adapter — gsfriends signup card

   When the gsfriends template uses {% form form_to_use="..." %} the
   HubSpot widget renders with its own DOM (.hs-form, .hs-input,
   .form-columns-2, etc.) inside .gs-gsf-form--hs-embed. The outer
   .gs-gsf-form class still provides the white card chrome (bg,
   shadow, radius, padding). These rules map the HubSpot innards
   to pill inputs / 2-col rows / gradient submit button — same
   input language as the .gs-wgs-form embeds on contact / dev-
   platforms / IIoT / platform-team-enablement.

   Mapping (similar to .gs-wgs-form--hs-embed but adds 2-col row
   support for the firstname + lastname pair):
     .hs-form              → vertical flex layout (gap: 1rem)
     .hs-richtext          → title + lede styling (.gs-gsf-form__title +
                              .gs-gsf-form__lede)
     fieldset              → reset (HubSpot wraps each field group
                              in a <fieldset> by default with border)
     .form-columns-2       → 2-col grid (firstname + lastname row)
     .form-columns-1       → single column (default flow)
     .hs-form-field        → flex column
     label                 → visually-hidden (placeholder carries label)
     .hs-input             → square 10px radius, padding, border
     select.hs-input       → custom triangle caret via background-image
     .legal-consent-container → privacy paragraph + checkbox group
     .hs-button.primary    → gradient pill button (matches .gs-btn--primary)
   ============================================ */

.gs-gsf-form--hs-embed .hs-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: none;    /* HubSpot ships .hs-form with max-width: 500px */
}

/* HubSpot wraps every field group in <fieldset> and ships its own
   forms CSS that targets specific column variants (form-columns-0
   for richtext, form-columns-1 for single fields, form-columns-2
   for the firstname+lastname row). All three get
   margin: 0 -10px + their children get padding: 0 10px — the
   bootstrap-y gutter trick. We use grid, not the padding trick,
   so the negative margins just push each fieldset past the form's
   right edge.

   Selector specificity matters here: HubSpot's `.hs-form
   .form-columns-1` is 0,2,0; a plain `.gs-gsf-form--hs-embed
   fieldset` is only 0,1,1 and loses the cascade for form-columns-1
   / form-columns-0. Bump to `.gs-gsf-form--hs-embed .hs-form
   fieldset` (0,2,1) so this reset wins against all three column
   variants. */
.gs-gsf-form--hs-embed .hs-form fieldset {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;       /* let the fieldset shrink in the grid */
  max-width: none;    /* override HubSpot's 500px default */
  width: 100%;
}

/* HubSpot's default forms CSS gives .hs-form-field inside
   .form-columns-2 the legacy float-based 50% layout + a 10px right
   margin on the inner .input wrapper. Their selectors are around
   0,3,1 specificity (e.g. `.hs-form fieldset.form-columns-2
   .hs-form-field`) — higher than our short scope selector, so a
   plain override loses the cascade. Match their selector shape +
   !important on the critical width property so this wins for
   sure. The grid is doing the 50/50 split — these resets just stop
   HubSpot's defaults from eating into each cell. */
.gs-gsf-form--hs-embed .hs-form fieldset.form-columns-2 .hs-form-field {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.gs-gsf-form--hs-embed .hs-form .hs-form-field > .input {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Title + intro lede — HubSpot renders these as .hs-richtext. */
.gs-gsf-form--hs-embed .hs-richtext h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--color-fg);
  margin: 0;
  text-wrap: balance;
}

.gs-gsf-form--hs-embed .hs-richtext p {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-body);
  margin: 0.5rem 0 0;
}

/* First-name + Last-name row — HubSpot tags it form-columns-2.
   HubSpot ships negative horizontal margins on this fieldset
   (margin: 0 -10px) to negate the field-cell inner padding —
   bootstrap-y gutters. We use grid, not the padding trick, so
   the negative margin would just push the fieldset 20px wider
   than the single-column fields below. Higher-specificity selector
   + explicit margin: 0 stops that. */
.gs-gsf-form--hs-embed .hs-form fieldset.form-columns-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0;
}

/* Each field — flex column, mirrors .gs-gsf-form__field. */
.gs-gsf-form--hs-embed .hs-form-field {
  display: flex;
  flex-direction: column;
}

/* Dependent (conditional) fields — HubSpot wraps the fields that
   appear after a dropdown selection in a .hs-dependent-field, which
   is a SINGLE child of .hs-form. The form's `gap` therefore spaces
   the wrapper but nothing inside it, so the revealed fields stack
   flush against each other (the address block on the GS&Friends
   event forms, after picking a beverage). Re-establish the same
   rhythm inside the wrapper. Mirrors the rule in form.css for the
   .gs-wgs-form variant - keep the two in step. */
.gs-gsf-form--hs-embed .hs-dependent-field {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Labels — visually hidden (placeholder carries the visible label). */
.gs-gsf-form--hs-embed .hs-form-field > label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gs-gsf-form--hs-embed .input {
  display: block;
}

/* Inputs — pill radius (999px), matches .gs-gsf-form__input and the
   .gs-wgs-form embed adapter. All forms across the site share the
   same input language.

   !important on width + box-sizing because HubSpot injects per-
   form-instance inline CSS (selectors like .hs-form-<UUID> .hs-input)
   that has same specificity as our scope rule but loads AFTER it,
   so it wins the cascade tie-break. The !important is the only
   reliable way to ensure 100% width holds. */
.gs-gsf-form--hs-embed .hs-input {
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-fg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.75rem 1.25rem;
  min-width: 0;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease;
}

.gs-gsf-form--hs-embed .hs-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.gs-gsf-form--hs-embed .hs-input::placeholder {
  color: var(--color-fg-body);
  opacity: 0.7;
}

/* Select — custom 2-line triangle caret, same SVG-less recipe as
   .gs-gsf-form__select. */
.gs-gsf-form--hs-embed select.hs-input {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-fg-body) 50%),
    linear-gradient(135deg, var(--color-fg-body) 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: 2rem;
  cursor: pointer;
}

.gs-gsf-form--hs-embed select.hs-input.is-placeholder {
  color: var(--color-fg-body);
  opacity: 0.7;
}

/* Legal consent block — privacy lede + checkbox. */
.gs-gsf-form--hs-embed .legal-consent-container .hs-richtext p {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-body);
  margin: 0.25rem 0 0;
}

.gs-gsf-form--hs-embed .hs-form-booleancheckbox-display {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: var(--text-sm);
  color: var(--color-fg-body);
  cursor: pointer;
  margin: 0.5rem 0 0;
}

.gs-gsf-form--hs-embed .hs-form-booleancheckbox-display > input {
  margin-top: 0.2rem;
  flex-shrink: 0;
  /* !important to beat .hs-input width: 100% !important above.
     Without it, the checkbox stretches to fill the flex row and
     pushes the label span across to the right side of the card,
     creating a huge empty gap between checkbox and text. */
  width: auto !important;
}

.gs-gsf-form--hs-embed .hs-form-booleancheckbox-display p {
  margin: 0;
}

/* HubSpot's default forms CSS adds margin-left: 20px to the label
   span next to the checkbox — leftover from an older block layout
   where the checkbox was positioned absolute. With our flex
   layout + gap: 0.625rem (10px), that 20px shifts the label text
   further right than intended. Reset to 0. */
.gs-gsf-form--hs-embed .legal-consent-container .hs-form-booleancheckbox-display > span {
  margin-left: 0;
}

.gs-gsf-form--hs-embed ul.inputs-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Submit button — gradient pill, same as .gs-btn--primary. */
.gs-gsf-form--hs-embed .hs_submit {
  margin-top: 0.5rem;
}

.gs-gsf-form--hs-embed .hs-button {
  align-self: flex-start;
  display: inline-block;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.875rem 1.75rem;
  border: none;
  border-radius: 999px;
  background: var(--gradient-cta);
  color: var(--color-on-accent, #fff);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.gs-gsf-form--hs-embed .hs-button:hover {
  filter: brightness(1.05);
  box-shadow: 0 6px 18px -6px rgba(255, 119, 0, 0.45);
  transform: translateY(-1px);
}

.gs-gsf-form--hs-embed .hs-button:active {
  transform: translateY(0);
  filter: brightness(0.97);
}

/* Error messages + success message. */
.gs-gsf-form--hs-embed .hs-error-msgs,
.gs-gsf-form--hs-embed .hs-error-msg {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
  color: #d23a2a;
  font-size: 0.8125rem;
}

.gs-gsf-form--hs-embed .submitted-message {
  padding: 1rem 1.25rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  color: var(--color-fg);
  font-size: 0.95rem;
}

.gs-gsf-form--hs-embed iframe[name^="target_iframe_"] {
  display: none;
}

/* ─── Mobile hero ──────────────────────────────────────────── */

@media (max-width: 900px) {
  .gs-gsf-hero__row {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .gs-gsf-hero__title {
    font-size: var(--text-h2);
  }

  /* Center all hero content on mobile — title + lede + step
     indicator + panel + form card all sit in the middle. */
  .gs-gsf-hero__intro {
    text-align: center;
  }
  .gs-gsf-hero__lede {
    margin-left: auto;
    margin-right: auto;
  }

  /* Step rail centers horizontally. */
  .gs-gsf-steps__rail {
    justify-content: center;
  }

  .gs-gsf-steps__panel-desc {
    margin-left: auto;
    margin-right: auto;
  }

  /* Form card stays left-aligned inside (so fields read
     properly), but the card itself centers with a max-width
     cap on phones. */
  .gs-gsf-form {
    padding: 1.75rem;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }
}

/* Narrow mobile — the First Name / Last Name row stacks to
   single column so it stops squeezing on small viewports.
   Form padding shrinks a touch and inputs allow shrinking
   (min-width: 0) so nothing overflows. */
@media (max-width: 600px) {
  .gs-gsf-form {
    padding: 1.5rem;
  }
  .gs-gsf-form__row {
    grid-template-columns: 1fr;
  }
  .gs-gsf-form__input {
    min-width: 0;
    width: 100%;
  }
}

/* ─── Previous Speakers — inside the hero, glass cards ─────── */

.gs-gsf-hero__speakers {
  /* Sits below the 2-col hero row, still inside the dark hero
     section. Top margin gives breathing room between the form
     and the speakers band. */
  margin-top: 4rem;
}

.gs-gsf-speakers__title {
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  color: #fff;
  text-align: center;
  margin: 0 0 2rem;
  text-wrap: balance;
}

.gs-gsf-speakers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* Glass-effect card — translucent white tint, hairline border,
   backdrop blur for the frosted-pane look, soft dark shadow.
   Same recipe as the .gs-uc-challenges glass cards on dark
   sections, scaled for horizontal photo + name layout. */
.gs-gsf-speaker {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.gs-gsf-speaker__photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
}

.gs-gsf-speaker__meta {
  min-width: 0;
}

.gs-gsf-speaker__name {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  /* White on dark glass card. */
  color: #fff;
  margin: 0 0 0.125rem;
  line-height: var(--leading-snug);
}

.gs-gsf-speaker__role {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  text-wrap: balance;
}

@media (max-width: 900px) {
  .gs-gsf-hero__speakers {
    margin-top: 3rem;
  }
  .gs-gsf-speakers {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }
}

/* Grouped variant — event landing pages (templates/landing/gsnf-*)
   stack the speaker, then the moderators, in one left-aligned column:
   each label directly above its own cards, cards one below the other.
   Column width matches the mobile single-column row (420px). */
.gs-gsf-hero__speakers--grouped {
  display: grid;
  gap: 2rem;
  max-width: 420px;
}

.gs-gsf-hero__speakers--grouped .gs-gsf-speakers__title {
  text-align: left;
  margin-bottom: 1rem;
}

.gs-gsf-hero__speakers--grouped .gs-gsf-speakers {
  grid-template-columns: 1fr;
  max-width: none;
  margin: 0;
}

@media (max-width: 900px) {
  .gs-gsf-hero__speakers--grouped {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ─── Tighten the gap between "What will I learn?" and FAQ ─
   Both sections are muted so they read as one continuous band.
   Reduce the trailing padding of the learn section and the
   leading padding of the FAQ section so they sit closer. */
.gs-gsf-learn-section {
  padding-bottom: 2rem;
}

.gs-gsf-faq-section {
  padding-top: 2rem;
}

/* FAQ card width on this page — wider than the global 1020px
   default so it lines up with the other sections (which use
   `--content-frame` = 1120px). Scoped so the IIoT / use-case
   pages keep their 1020px reading-width FAQ. */
.gs-gsf-faq-section .gs-faq {
  max-width: var(--content-frame);
}

/* ─── Closing CTA — page-scoped padding override ──────────
   The shared `.gs-cta` is `padding: 5rem 1.5rem`. The GS&Friends
   closing band reads better tighter. */
.gs-gsf-cta {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* ─── Customer logos — page-scoped overrides ──────────────
   The shared `.gs-customer-logos` keeps a tight `960px` inner
   max-width (avoids duplicate-logo visibility on the homepage).
   This page wants a wider strip + more vertical breathing room
   than the homepage default; scoped here so the homepage stays
   untouched. */
.gs-gsf-logos {
  padding: 2.5rem 0;
}

.gs-gsf-logos .gs-customer-logos__inner {
  max-width: var(--content-frame);
}

@media (max-width: 767px) {
  .gs-gsf-logos {
    padding: 1.75rem 0;
  }
}

/* ─── 4-up "What will I learn?" benefits ──────────────────── */

.gs-gsf-benefits {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  /* Spans the full content-frame so the 2×2 cards have real
     breathing room and the illustrations read big. */
}

.gs-gsf-benefit {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
}

.gs-gsf-benefit__media {
  margin-bottom: 0.5rem;
}

.gs-gsf-benefit__media img {
  width: 120px;
  height: auto;
  display: block;
}

.gs-gsf-benefit__title {
  font-size: var(--text-h5);
  font-weight: var(--weight-bold);
  color: var(--color-fg);
  margin: 0;
  text-wrap: balance;
}

.gs-gsf-benefit__desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-body);
  margin: 0;
  text-wrap: pretty;
}

@media (max-width: 600px) {
  .gs-gsf-benefits {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
}

/* ─── Event thank-you pages (templates/landing/gsnf-thank-you-*) ───
   Illustration, coral check + headline, a muted line, then a glass
   card holding the event name and date. Lives here rather than in
   landing.css because these pages use the full-site layout, which
   loads gsfriends.css but not landing.css. Sizes and spacing mirror
   the legacy thank-you page
   (/gsnf-thank-you-260714-the-souvereign-agentic-enterprise): small
   illustration, h3-sized headline, a narrow borderless glass card. */
.gs-gsf-thanks {
  text-align: center;
  padding-bottom: 6rem;
}

.gs-gsf-thanks__media {
  display: block;
  width: 160px;
  max-width: 50%;
  height: auto;
  margin: 0 auto 2.75rem;
}

.gs-gsf-thanks__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: #fff;
  margin: 0;
  text-wrap: balance;
}

/* !important because platform-capabilities.css sets a global
   .fa-check colour with !important, which otherwise turns this blue. */
.gs-gsf-thanks .gs-gsf-thanks__check {
  color: var(--color-brand-accent) !important;
  flex-shrink: 0;
}

.gs-gsf-thanks__lede {
  font-size: var(--text-h5);
  color: var(--color-fg-muted-on-dark);
  margin: 1.5rem 0 0;
}

.gs-gsf-thanks__card {
  max-width: var(--content-header);
  margin: 1.5rem auto 0;
  padding: 2.5rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 32px;
}

.gs-gsf-thanks__kicker {
  font-size: var(--text-h5);
  color: #fff;
  margin: 0;
}

.gs-gsf-thanks__event {
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: #fff;
  margin: 1rem 0 0;
  text-wrap: balance;
}

.gs-gsf-thanks__subtitle {
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: #fff;
  margin: 0.5rem 0 0;
  text-wrap: balance;
}

.gs-gsf-thanks__note {
  font-size: var(--text-h5);
  color: #fff;
  margin: 1.5rem 0 0;
}

@media (max-width: 640px) {
  .gs-gsf-thanks {
    padding-bottom: 4rem;
  }
  .gs-gsf-thanks__card {
    padding: 2rem 1.25rem;
    border-radius: 20px;
  }
}