/* ============================================
   ap-min — the minimal restyle of the CIO Agent Platform draft
   (templates/new/agent-platform.html). Loaded by that
   template through require_css, not from base.html.

   A page-scoped style experiment, inspired by resolve.ai,
   langdock.com and cohere.com: bigger type, fewer elements, more
   space, almost no colour, the product as the main visual. It
   deliberately steps outside three system rules, and only on this
   page, so it can be judged side by side with /new/agent-platform-v1/:

     - display headings above --text-h1 / --text-h2 (the type scale
       caps them at 48 / 36px). Body text stays at --text-base.
     - section rhythm of 9rem rather than the 5rem section padding
     - sections separated by whitespace, not alternating bands

   If the direction is approved for the site, these become tokens
   and catalog sections instead (skills/workflows/add-section).

     .gs-apm               page wrapper, holds the page-only values
     .gs-apm-hero          Giant Swarm Black hero, text + screenshot
     .gs-apm-art           CSS glow + dot texture behind dark stages
     .gs-apm-logos         customer logos with a label at the side
     .gs-apm-problem       sticky heading + crossed-out pain list
     .gs-apm-bento         three product parts, a screenshot in each
     .gs-apm-demo          the recording on a full-width dark band
     .gs-apm-terms         sovereignty terms + proof figures
     .gs-apm-path          start / run / grow + what you pay for
     .gs-apm-faq           sticky heading + hairline accordion
     .gs-apm-reads         read more as plain links
     .gs-apm-close         closing CTA stage
   ============================================ */

.gs-apm {
  /* Page-only display sizes, see the header comment. */
  --apm-display: clamp(2.8rem, 5vw, 4.65rem);
  --apm-h2: clamp(2.125rem, 4.3vw, 3.5rem);
  --apm-claim: 1.75rem;
  --apm-radius: 24px;
  --apm-radius-card: 20px;
  --apm-gap: 9rem;
  /* Hairlines on dark stages, same value as --color-border-dark
     but needed brighter on the darkest background. */
  --apm-line-dark: rgba(255, 255, 255, 0.12);
  color: var(--color-fg-body);
}

.gs-apm__wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ─── Shared type ─────────────────────────────────────────── */

.gs-apm-kicker {
  margin: 0 0 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem; /* label, not body text - same size as the hero eyebrows */
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.gs-apm-h2 {
  margin: 0;
  font-size: var(--apm-h2);
  font-weight: var(--weight-regular);
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--color-fg);
  text-wrap: balance;
}

.gs-apm-lede {
  margin: 0;
  max-width: 32rem;
  font-size: var(--text-base);
}

.gs-apm-link {
  color: var(--color-fg);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.gs-apm-link:hover {
  color: var(--color-brand-accent);
}

.gs-apm-sec {
  padding: var(--apm-gap) 0 0;
}

.gs-apm-sec__head {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 3.5rem;
}

/* Everything on a dark stage reads light. */
.gs-apm-dark .gs-apm-kicker,
.gs-apm-dark .gs-apm-lede {
  color: var(--color-fg-muted-on-dark);
}

.gs-apm-dark .gs-apm-h2 {
  color: var(--color-fg-on-dark);
}

/* ─── Art: glows in the CI colours over a dot field ──────────── */

/* Stands in for commissioned artwork. Orange and coral from the CTA
   gradient, blue from the dark-surface accent, all at low alpha. */
.gs-apm-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(45% 55% at 82% 18%, rgba(255, 119, 0, 0.38), transparent 70%),
    radial-gradient(40% 50% at 70% 70%, rgba(246, 89, 84, 0.28), transparent 70%),
    radial-gradient(60% 70% at 0% 100%, rgba(0, 159, 255, 0.22), transparent 70%);
}

.gs-apm-art::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 80% at 75% 35%, #000 10%, transparent 75%);
  mask-image: radial-gradient(70% 80% at 75% 35%, #000 10%, transparent 75%);
}

/* ─── 1. Hero ─────────────────────────────────────────────── */

.gs-apm-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-darkest);
  color: var(--color-fg-on-dark);
  padding: 10rem 0 7rem; /* top clears the fixed header */
}

.gs-apm-hero__grid {
  position: relative;
  display: grid;
  /* The screenshot gets the wider column: it has to stay readable. */
  grid-template-columns: 5fr 6fr;
  gap: 4rem;
  align-items: center;
}

.gs-apm-hero__text {
  display: grid;
  gap: 2rem;
}

.gs-apm-hero__text .gs-apm-kicker {
  margin: 0;
}

.gs-apm-hero__title {
  margin: 0;
  font-size: var(--apm-display);
  font-weight: var(--weight-regular);
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--color-fg-on-dark);
  text-wrap: balance;
}

/* Longer headlines (the DE page) get a smaller display size, so
   "KI-Adoption" stays on one line instead of breaking at its hyphen. */
.gs-apm-hero__title--long {
  font-size: clamp(2.35rem, 4vw, 3.75rem);
}

.gs-apm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* The GitHub button leads with GitHub's own mark (the Octocat, from
   GitHub's Octicons set). */
.gs-apm-hero__gh-btn {
  gap: 0.55rem;
}

.gs-apm-hero__gh {
  flex: none;
  width: 1.1em;
  height: 1.1em;
}

.gs-apm-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-fg-muted-on-dark);
}

/* Under the screenshot, on one line, centred on it. Size and spacing
   shrink with the window so the line still fits on smaller screens. */
.gs-apm-hero__shot .gs-apm-hero__meta {
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.5rem clamp(1rem, 1.6vw, 2rem);
  margin-top: 1.5rem;
  font-size: clamp(0.625rem, 0.8vw, 0.75rem);
  white-space: nowrap;
}

.gs-apm-hero__meta li::before {
  content: "/ ";
  color: var(--color-brand-accent);
}

/* The screenshot runs past the content frame to the right edge of the
   window: the extra width goes to readability. (content-max - 100vw) / 2
   is the frame's outer margin, negative once the window is wider than
   the frame; minus the wrap's own 1.5rem padding. The overhang stops at
   8rem - what a ~1440px laptop shows - so on wider screens the shot
   stays that size and its right edge comes into view. */
.gs-apm-hero__shot {
  gap: 0;
  margin-right: max(-8rem, calc(min(0px, (var(--content-max) - 100vw) / 2) - 1.5rem));
}

.gs-apm-hero__shot .gs-ap-shot__head,
.gs-apm-hero__shot .gs-ap-shot__caption {
  display: none;
}

.gs-apm-hero__shot .gs-ap-shot__trigger {
  margin-top: 0;
  border-radius: 14px 0 0 14px;
  box-shadow: 0 0 0 1px var(--apm-line-dark), 0 30px 90px -25px rgba(255, 119, 0, 0.4);
}

.gs-apm-hero__shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* Once the window is wider than the capped overhang, the right edge is
   visible - round it like the left. */
@media (min-width: 1441px) {
  .gs-apm-hero__shot .gs-ap-shot__trigger {
    border-radius: 14px;
  }
}

/* The homepage's logo row (home-products.css) as the hero's last row. */
.gs-apm-hero__logos {
  position: relative;
}

/* ─── Customer logos ──────────────────────────────────────── */

.gs-apm-logos {
  padding: 3.5rem 0 0;
}

.gs-apm-logos__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.gs-apm-logos__label {
  margin: 0;
  max-width: 14rem;
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

.gs-apm-logos__row {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gs-apm-logos__row img {
  display: block;
  height: 26px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.55;
}

.gs-apm-logos__row img.gs-apm-logos__square {
  height: 34px;
}

/* ─── 2. Problem ──────────────────────────────────────────── */

.gs-apm-problem {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 4rem;
}

.gs-apm-problem__head {
  position: sticky;
  top: 6rem; /* below the fixed header */
  align-self: start;
  display: grid;
  gap: 1.75rem;
}

.gs-apm-problem__head .gs-apm-kicker {
  margin: 0;
}

.gs-apm-pairs {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: apm-pair;
}

.gs-apm-pair {
  counter-increment: apm-pair;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0 1rem;
  padding: 2rem 0;
  border-top: 1px solid var(--color-border);
}

.gs-apm-pair:last-child {
  border-bottom: 1px solid var(--color-border);
}

.gs-apm-pair::before {
  content: "0" counter(apm-pair);
  font: var(--weight-medium) 0.75rem/2 var(--font-mono);
  color: var(--color-fg-muted);
}

.gs-apm-pair__was {
  margin: 0 0 0.35rem;
  color: var(--color-fg-muted);
  text-decoration: line-through;
  text-decoration-color: var(--color-brand-accent);
  text-decoration-thickness: 1.5px;
}

.gs-apm-pair__now {
  margin: 0;
  font-size: var(--apm-claim);
  font-weight: var(--weight-regular);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--color-fg);
}

.gs-apm-pair__desc {
  margin: 0.5rem 0 0;
}

/* ─── 3. Platform bento ───────────────────────────────────── */

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

.gs-apm-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: var(--apm-radius-card);
  background: var(--color-bg-muted);
  padding: 2.25rem 2.25rem 0;
}

.gs-apm-card--lead {
  grid-column: span 7;
  grid-row: span 2;
}

.gs-apm-card--side {
  grid-column: span 5;
}

.gs-apm-card--dark {
  background: var(--color-bg-darkest);
}

.gs-apm-card .gs-apm-kicker {
  margin-bottom: 1.25rem;
}

.gs-apm-card__claim {
  margin: 0 0 0.9rem;
  max-width: 22ch;
  font-size: var(--apm-claim);
  font-weight: var(--weight-regular);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--color-fg);
}

.gs-apm-card__desc {
  margin: 0;
  max-width: 40ch;
}

.gs-apm-card--dark .gs-apm-kicker,
.gs-apm-card--dark .gs-apm-card__desc {
  color: var(--color-fg-muted-on-dark);
}

.gs-apm-card--dark .gs-apm-card__claim {
  color: var(--color-fg-on-dark);
}

/* Each screenshot is a shared gallery trigger (gs-ap-shot, gallery.js):
   click to open it large. The head and caption spans only feed the
   lightbox caption, so they stay out of the card. */
.gs-apm-card__shot {
  margin-top: auto;
  padding-top: 2.25rem;
  gap: 0;
}

.gs-apm-card__shot .gs-ap-shot__head,
.gs-apm-card__shot .gs-ap-shot__caption {
  display: none;
}

.gs-apm-card__shot .gs-ap-shot__trigger {
  margin-top: 0;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 0 0 1px rgba(0, 27, 49, 0.08), 0 24px 48px -28px rgba(0, 27, 49, 0.35);
}

.gs-apm-card--dark .gs-apm-card__shot .gs-ap-shot__trigger {
  box-shadow: 0 0 0 1px var(--apm-line-dark);
}

.gs-apm-card__shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* The side cards show the top of their screenshot only; the lightbox
   shows all of it. */
.gs-apm-card--side .gs-apm-card__shot img {
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: left top;
}

/* The lead card spans both rows, so it is taller than its text plus a
   16:10 screenshot. Pinning the screenshot to the bottom left a gap under
   the text; instead it starts right under the text and fills the rest,
   cropped from the top-left corner. */
.gs-apm-card--lead .gs-apm-card__shot {
  position: relative;
  flex: 1;
  min-height: 20rem;
  margin-top: 0;
}

.gs-apm-card--lead .gs-ap-shot__trigger {
  position: absolute;
  inset: 2.25rem 0 0;
}

.gs-apm-card--lead .gs-apm-card__shot img {
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

/* What all three parts share, as the grid's base row: a full-width card
   under the bento, same radius and gap: white, with a coral edge, a
   coral label and a coral icon before the sentence, so it reads apart
   from the tinted cards above. Coral as brand emphasis, not a control. */
.gs-apm-catalog {
  display: grid;
  grid-template-columns: minmax(0, 14rem) 1fr;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 1rem;
  padding: 1.75rem 2.25rem;
  border-radius: var(--apm-radius-card);
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-brand-accent) 35%, transparent);
}

.gs-apm-catalog .gs-apm-kicker {
  margin: 0;
  color: var(--color-brand-accent);
}

.gs-apm-catalog__text {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: var(--text-h5);
  line-height: 1.45;
  color: var(--color-fg);
}

.gs-apm-catalog__text svg {
  flex: none;
  width: 1.3em;
  height: 1.3em;
  color: var(--color-brand-accent);
}

/* ─── 4. Demo ─────────────────────────────────────────────── */

/* A full-width dark band, as on the homepage: text left, the video
   (the shared gs-ap-video component) right.
   Blue light in two patches, the homepage capabilities treatment, so it
   doesn't read as the hero again. */
.gs-apm-demo {
  position: relative;
  overflow: hidden;
  margin-top: 6rem;
  padding: 7rem 0;
  background: var(--color-bg-darkest);
}

.gs-apm-demo .gs-apm-art {
  background:
    radial-gradient(60% 70% at 75% 30%, rgba(0, 159, 255, 0.22), transparent 70%),
    radial-gradient(40% 55% at 10% 95%, rgba(0, 159, 255, 0.1), transparent 70%);
}

.gs-apm-demo .gs-apm-art::after {
  opacity: 0.36;
  -webkit-mask-image:
    radial-gradient(55% 65% at 75% 30%, #000 0%, transparent 75%),
    radial-gradient(35% 50% at 10% 95%, #000 0%, transparent 75%);
  mask-image:
    radial-gradient(55% 65% at 75% 30%, #000 0%, transparent 75%),
    radial-gradient(35% 50% at 10% 95%, #000 0%, transparent 75%);
}

.gs-apm-demo__in {
  position: relative;
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 4rem;
  align-items: center;
}

.gs-apm-demo__text {
  display: grid;
  gap: 1.5rem;
}

.gs-apm-demo__text .gs-apm-kicker,
.gs-apm-demo__text .gs-apm-h2,
.gs-apm-demo__text .gs-apm-lede {
  margin: 0;
}

.gs-apm-demo .gs-ap-video {
  position: relative;
}

/* The section after the band starts 6rem down, as after the hero. */
.gs-apm-demo + .gs-apm-sec {
  padding-top: 6rem;
}

/* ─── 5. Sovereignty ──────────────────────────────────────── */

/* The homepage's column style: a rule over each column with a coral
   tick where it starts, no dividers between them. */
.gs-apm-terms {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  margin: 0;
}

.gs-apm-terms__item {
  position: relative;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--color-fg) 25%, transparent);
}

.gs-apm-terms__item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--color-brand-accent);
}

.gs-apm-terms dt {
  margin-bottom: 0.6rem;
  font-size: var(--text-h4);
  letter-spacing: -0.02em;
  color: var(--color-fg);
}

.gs-apm-terms dd {
  margin: 0;
}

/* The proof figures as on the homepage's proof section: a box, thin
   dividers between the figures, the figures in coral. White with a thin
   coral outline here (as the "Across all three" card), since the section
   itself is white. Three equal columns with a
   1px divider column between each; every text block is centred in its
   column, its text left-aligned. */
.gs-apm-figures {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  gap: 2rem;
  margin: 4rem 0 0;
  padding: 2.5rem 3rem;
  border-radius: var(--apm-radius-card);
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-brand-accent) 35%, transparent);
  list-style: none;
}

/* 15rem makes each line wrap to the same two lines. */
.gs-apm-figures li {
  justify-self: center;
  max-width: 15rem;
  text-align: left;
}

.gs-apm-figures .gs-apm-figures__sep {
  justify-self: stretch;
  max-width: none;
  background: color-mix(in srgb, var(--color-fg) 12%, transparent);
}

.gs-apm-figures__num {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 2.5rem; /* figure, between --text-h2 and --text-h1 */
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-brand-accent);
}

/* ─── 6. Start / run / grow ───────────────────────────────── */

/* On a full-width Giant Swarm White band, as the homepage's pale
   sections, so it reads apart from the white sections around it; its
   cards turn white. The next section starts 6rem below it. */
.gs-apm-band {
  margin-top: 6rem;
  padding: 5.5rem 0;
  background: var(--color-bg-muted);
}

.gs-apm-band + .gs-apm-sec {
  padding-top: 6rem;
}

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

.gs-apm-step {
  display: grid;
  align-content: start;
  gap: 0.9rem;
  border-radius: var(--apm-radius-card);
  background: var(--color-bg);
  padding: 2rem;
}

.gs-apm-step--start {
  background: var(--color-bg-darkest);
  color: var(--color-fg-muted-on-dark);
}

.gs-apm-step__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brand-accent);
}

.gs-apm-step__title {
  margin: 0;
  font-size: var(--text-h4);
  font-weight: var(--weight-regular);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--color-fg);
}

.gs-apm-step--start .gs-apm-step__title {
  color: var(--color-fg-on-dark);
}

.gs-apm-step p {
  margin: 0;
}

/* The two ways to run it, each led by a coral icon with a larger title,
   a thin rule above each, so the choice reads at a glance. */
.gs-apm-step__opt {
  display: block;
}

.gs-apm-step__opt {
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-border);
}

/* Icon and title on one line; the text below starts at the same left
   edge, not indented under the title. */
.gs-apm-step__opt strong {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.3rem;
  font-size: var(--text-h5);
  font-weight: var(--weight-medium);
  color: var(--color-fg);
}

.gs-apm-step__opt strong svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-brand-accent);
}

.gs-apm-step__facts {
  display: grid;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  padding: 1rem 0 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.gs-apm-step--start .gs-apm-step__facts {
  border-color: var(--apm-line-dark);
}

/* The homepage's line arrow, in coral. */
.gs-apm-step__facts li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.gs-apm-step__facts li::before {
  content: "";
  flex: none;
  width: 0.8em;
  height: 0.8em;
  margin-top: 0.42em;
  background: var(--color-brand-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6h8.5M6.75 2.75L10 6l-3.25 3.25' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6h8.5M6.75 2.75L10 6l-3.25 3.25' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Four equal columns: the heading column reads like the three items -
   a bold body-size title, then a line (here the pricing link). The list
   lays its items straight into the grid (display: contents). */
.gs-apm-pay {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  align-items: start;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.gs-apm-pay__head {
  display: grid;
  gap: 0.25rem;
  justify-items: start;
}

/* The row's label, in the page's mono pre-headline style. */
.gs-apm-pay__title {
  margin: 0 0 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.gs-apm-pay__list {
  display: contents;
  list-style: none;
}

.gs-apm-pay__list strong {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: var(--weight-medium);
  color: var(--color-fg);
}

/* ─── 7. FAQ ──────────────────────────────────────────────── */

.gs-apm-faq {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 4rem;
}

.gs-apm-faq__head {
  position: sticky;
  top: 6rem;
  align-self: start;
}

.gs-apm-faq__item {
  border-top: 1px solid var(--color-border);
}

.gs-apm-faq__item:last-child {
  border-bottom: 1px solid var(--color-border);
}

.gs-apm-faq__q {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.6rem 0;
  list-style: none;
  cursor: pointer;
  font-size: var(--text-h5);
  letter-spacing: -0.015em;
  color: var(--color-fg);
}

.gs-apm-faq__q::-webkit-details-marker {
  display: none;
}

/* One icon, a thin plus that turns into a cross when open - same
   colour either way, so open and closed items look like one list. */
.gs-apm-faq__q::after {
  content: "+";
  flex: none;
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
  color: var(--color-fg-muted);
  transition: transform 0.2s ease, color 0.2s ease;
}

.gs-apm-faq__q:hover::after,
.gs-apm-faq__item[open] .gs-apm-faq__q::after {
  color: var(--color-fg);
}

.gs-apm-faq__item[open] .gs-apm-faq__q::after {
  transform: rotate(45deg);
}

.gs-apm-faq__q:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

/* Padding, not margin: base.css zeroes a last paragraph's bottom margin,
   which left an open answer sitting on the next divider. Pulled up a
   little so it reads as the answer to the question above. */
.gs-apm-faq__a {
  margin: -0.5rem 0 0;
  padding-bottom: 1.75rem;
  max-width: 56ch;
}

/* The drawer faq.js wraps round each answer, so it slides open and
   shut like the blog FAQ. The answer's pull-up stays fixed inside it,
   so the text never moves while the drawer slides. The drawer clips
   what is pulled above its top, so inside it the pull-up is cut to
   0.3rem: that only takes the first line's top leading (about 5px at
   this size) - the full 0.5rem cut into the letters. */
.gs-apm-faq__drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gs-apm-faq__drawer > .gs-apm-faq__a {
  margin-top: -0.3rem;
}

/* Resting states, as faq.css: shut at 0, open at its full height. The
   script's inline max-height overrides both while it slides. */
.gs-apm-faq__item[open] .gs-apm-faq__drawer {
  max-height: none;
}


/* ─── 8. Read more ────────────────────────────────────────── */

/* Three cards: white with a thin outline, the image on top, then the
   source as a coral mono label and the title. The whole card is the
   link. */
.gs-apm-reads {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.gs-apm-reads a {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--apm-radius-card);
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1px var(--color-border);
  text-decoration: none;
}

.gs-apm-reads__img {
  display: block;
  aspect-ratio: 1200 / 627;
  overflow: hidden;
}

.gs-apm-reads__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  transition: transform 0.4s ease;
}

/* The topic card has no article image: the brand background
   illustration with the Giant Swarm mark and a label, as on the live
   Agent Platform page. */
.gs-apm-reads__img--art {
  position: relative;
  background: var(--color-bg-darkest) url("https://www.giantswarm.io/hubfs/Illustrations/gs23-lp-background-1.svg") center / cover no-repeat;
}

.gs-apm-reads__cover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--color-fg-on-dark);
}

.gs-apm-reads__cover img {
  width: auto;
  height: 1em;
}

.gs-apm-reads a:hover .gs-apm-reads__cover img {
  transform: none;
}

.gs-apm-reads__body {
  display: grid;
  gap: 0.6rem;
  padding: 1.5rem 1.75rem 1.75rem;
}

.gs-apm-reads__source {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-accent);
}

.gs-apm-reads__title {
  font-size: var(--text-h5);
  font-weight: var(--weight-regular);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-fg);
  transition: color 0.2s ease;
}

.gs-apm-reads a:hover .gs-apm-reads__title {
  color: var(--color-brand-accent);
}

.gs-apm-reads a:hover .gs-apm-reads__img img {
  transform: scale(1.03);
}

.gs-apm-reads a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* ─── 9. Closing CTA ──────────────────────────────────────── */

/* A full-width dark band, edge to edge like the hero and the demo, into
   the footer. */
.gs-apm-close {
  position: relative;
  overflow: hidden;
  margin: 6rem 0 0;
  background: var(--color-bg-darkest);
  padding: 8rem 0;
}

.gs-apm-close__in {
  position: relative;
  display: grid;
  gap: 2rem;
  justify-items: start;
}

.gs-apm-close .gs-apm-h2 {
  max-width: 52rem;
}

/* ─── Tablet ──────────────────────────────────────────────── */

/* Below 1200px the hero's text column gets too narrow for the display
   headline and the buttons, so the hero stacks: text, then the screenshot
   at full frame width, its own edges visible. */
@media (max-width: 1200px) {
  .gs-apm-hero__grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .gs-apm-hero__text {
    max-width: 44rem;
  }

  .gs-apm-hero__shot {
    margin-right: 0;
  }

  .gs-apm-hero__shot .gs-ap-shot__trigger {
    border-radius: 14px;
  }
}

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

@media (max-width: 900px) {
  .gs-apm-band {
    margin-top: 4rem;
    padding: 4rem 0;
  }

  .gs-apm-band + .gs-apm-sec {
    padding-top: 4rem;
  }

  .gs-apm {
    --apm-claim: 1.375rem;
    --apm-gap: 6rem;
  }

  .gs-apm-hero {
    padding: 7.5rem 0 4rem;
  }

  .gs-apm-hero__shot {
    margin-right: 0;
  }

  .gs-apm-hero__shot .gs-ap-shot__trigger {
    border-radius: 12px;
  }

  /* Too narrow for one line even scaled down: wrap, still centred. */
  .gs-apm-hero__shot .gs-apm-hero__meta {
    flex-wrap: wrap;
    font-size: 0.625rem;
  }

  .gs-apm-hero__grid,
  .gs-apm-sec__head,
  .gs-apm-problem,
  .gs-apm-faq,
  .gs-apm-pay {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .gs-apm-sec__head {
    margin-bottom: 2.5rem;
  }

  .gs-apm-logos__row {
    gap: 1.75rem;
  }

  .gs-apm-problem__head,
  .gs-apm-faq__head {
    position: static;
  }

  .gs-apm-pair {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .gs-apm-card--lead,
  .gs-apm-card--side {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .gs-apm-card {
    padding: 1.75rem 1.75rem 0;
  }

  .gs-apm-catalog {
    grid-template-columns: 1fr;
    padding: 1.5rem 1.75rem;
  }

  /* Stacked, the lead card is only as tall as its content again. */
  .gs-apm-card--lead .gs-apm-card__shot {
    min-height: 0;
  }

  .gs-apm-card--lead .gs-ap-shot__trigger {
    position: relative;
    inset: auto;
  }

  .gs-apm-card--lead .gs-apm-card__shot img {
    height: auto;
  }

  .gs-apm-demo {
    margin-top: 4rem;
    padding: 4rem 0;
  }

  .gs-apm-demo__in {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .gs-apm-demo + .gs-apm-sec {
    padding-top: 4rem;
  }

  .gs-apm-terms,
  .gs-apm-figures,
  .gs-apm-path,
  .gs-apm-pay__list {
    grid-template-columns: 1fr;
  }

  /* Read more on phones: a swipeable row of narrower cards, the next one
     peeking in, rather than three full-width cards stacked. It runs to
     the screen edges, with the page gutter kept as padding. */
  .gs-apm-reads {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: 0.75rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding: 0 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 1.5rem;
    scrollbar-width: none;
  }

  .gs-apm-reads::-webkit-scrollbar {
    display: none;
  }

  .gs-apm-reads li {
    scroll-snap-align: start;
  }

  .gs-apm-terms {
    gap: 2rem;
  }

  .gs-apm-figures {
    padding: 2rem;
  }

  .gs-apm-figures {
    grid-template-columns: 1fr;
  }

  .gs-apm-figures li {
    justify-self: start;
  }

  .gs-apm-figures .gs-apm-figures__sep {
    display: none;
  }

  .gs-apm-figures {
    gap: 1.25rem;
    padding: 1.75rem;
  }

  .gs-apm-figures__num {
    font-size: var(--text-h4);
  }

  .gs-apm-faq__q {
    font-size: var(--text-base);
  }

  .gs-apm-close {
    margin: 4rem 0 0;
    padding: 5rem 0;
  }
}