/* Landing-page polish. Colors use Material theme variables so both palettes work. */

/* ============================================================================
   Self-hosted typefaces — the "GitHub-native" pairing.

   Material's built-in Google Fonts loader is disabled (theme.font: false in
   mkdocs.yml), so these @font-face rules plus the --md-text-font/--md-code-font
   mapping below replace it with zero third-party requests. woff2 files live in
   assets/fonts/ (SIL OFL 1.1, latin subset). Roles:
     - Monaspace Neon  — display: landing hero + each page's h1
     - IBM Plex Sans   — body, UI, and headings h2–h6
     - Monaspace Argon — code blocks and inline code
   See docs/development/website.md § Fonts.
   ========================================================================== */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("../assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url("../assets/fonts/IBMPlexSans-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url("../assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("../assets/fonts/IBMPlexSans-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Monaspace Neon";
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url("../assets/fonts/MonaspaceNeon-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Monaspace Neon";
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("../assets/fonts/MonaspaceNeon-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Monaspace Argon";
  font-style: normal;
  font-weight: 400;
  /* Code is below the fold and not preloaded; keep swap so it always ends up in
     real Monaspace Argon (mono→mono, so the swap barely shifts layout) rather
     than being dropped to the system monospace on a slow first load. */
  font-display: swap;
  src: url("../assets/fonts/MonaspaceArgon-Regular.woff2") format("woff2");
}

:root {
  /* Material composes these into --md-text-font-family / --md-code-font-family,
     appending its own system fallback stack — so a face that fails to load
     degrades to the OS UI/mono font, never to Times. */
  --md-text-font: "IBM Plex Sans";
  --md-code-font: "Monaspace Argon";
}

/* Display face: Monaspace Neon carries the top of the hierarchy — the landing
   hero headline and each page's h1 title. h2–h6 stay in IBM Plex Sans so long
   reference pages don't turn into walls of monospace. */
.md-typeset h1,
.gag-hero h1 {
  font-family: "Monaspace Neon";
  font-weight: 500;
  letter-spacing: -0.02em;
}

:root {
  --gag-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --gag-elev-1: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --gag-elev-2: 0 8px 20px rgba(0, 0, 0, 0.12);
  --gag-accent-soft: color-mix(in srgb, var(--md-accent-fg-color) 9%, transparent);
  --gag-accent-line: color-mix(in srgb, var(--md-accent-fg-color) 35%, transparent);
}

/* Brand palette: Kubernetes blue -> teal, matching the logomark + social card.
   Set under the scheme selectors so these win over Material's named accent. */
body[data-md-color-scheme="default"] {
  --md-accent-fg-color: #326ce5;
  --md-accent-fg-color--transparent: rgba(50, 108, 229, 0.1);
  --md-typeset-a-color: #2456c9; /* darker blue for link-text contrast on white */

  /* Semantic red/green used across the why-gag page (problem chips, table
     verdicts, proof rows, stat numbers). "ink" = text/icon colour; "fill" =
     solid background carrying white text. Tuned per palette so they stay
     legible and harmonised — change them here, everywhere follows. */
  --gag-win-ink: #0f8a5f;
  --gag-win-fill: #0f8a5f;
  --gag-bad-ink: #c23a22;
  --gag-bad-fill: #c23a22;
}

body[data-md-color-scheme="slate"] {
  --md-accent-fg-color: #5b8def;
  --md-accent-fg-color--transparent: rgba(91, 141, 239, 0.1);
  --md-typeset-a-color: #6fa0f5;
  --gag-elev-1: 0 1px 3px rgba(0, 0, 0, 0.4);
  --gag-elev-2: 0 10px 24px rgba(0, 0, 0, 0.5);

  /* Lighter inks for legible text/icons on the dark surface. Fills stay deep
     enough to carry white text (the proof-row pills, problem-card chips). */
  --gag-win-ink: #50c878;
  --gag-win-fill: #0f8a5f;
  --gag-bad-ink: #f4744f;
  --gag-bad-fill: #e5533c;
}

/* Header: Material gives the site title a 1rem left margin, which leaves a big
   gap after the logomark. Tighten it so the wordmark sits beside the mark, with
   the logo's own padding giving roughly equal space on each side. */
[dir="ltr"] .md-header__title {
  margin-left: 0.2rem;
}

/* Hamburger drawer header: centre the logomark across the top and enlarge it a
   touch; let the header grow and add top room so the bigger mark clears the
   site title beneath it (Material left-aligns it at a fixed 5.6rem height). */
.md-nav--primary .md-nav__title {
  height: auto;
  padding-top: 4rem;
  text-align: center;
}

.md-nav--primary .md-nav__title .md-logo img {
  height: 3rem;
  margin-inline: auto;
}

.gag-hero {
  position: relative;
  isolation: isolate;
  text-align: left;
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.25rem 0 1.75rem;
}

/* Subtle dot-grid behind the hero, faded out toward the edges. */
.gag-hero::before {
  content: "";
  position: absolute;
  inset: -1.5rem -2rem 0;
  z-index: -1;
  background-image: radial-gradient(var(--md-default-fg-color--lightest) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 28%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 28%, #000, transparent 75%);
  opacity: 0.6;
}

/* Illuminated-initial logomark: the faceted ring sits like a manuscript drop
   cap at the start of the hero, with the eyebrow, headline, and description
   flowing around and beneath it. flow-root contains the float so the call-to-
   action buttons clear it and start on their own line below. */
.gag-hero__intro {
  display: flow-root;
}

/* Logomark + headline as a lockup, the logo vertically centred against the
   title so it never leaves a gap; the description and call-to-action sit below.
   Markdown wraps the <img> in a <p>, so collapse that wrapper to make the image
   itself the flex item. */
.gag-hero__intro {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.2rem;
}

.gag-hero__intro > p:has(.gag-hero__logo) {
  display: contents;
}

.gag-hero__logo {
  flex-shrink: 0;
  width: clamp(92px, 11vw, 132px);
  height: auto;
  filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--md-accent-fg-color) 30%, transparent));
}

.gag-hero__headline > :first-child {
  margin-top: 0;
}

.gag-hero__headline > :last-child {
  margin-bottom: 0;
}

/* Narrow screens: stack the lockup with the logo centred above the title. The
   breakpoint is set by the headline, not the logo — side by side, the logomark
   and its gap take ~162px out of the headline column, and below 56rem that
   leaves less than the longest unbreakable phrase needs. Stacking hands the
   headline the full hero width instead of splitting the phrase. */
@media screen and (max-width: 56rem) {
  .gag-hero__intro {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }
}

/* Install snippet: shrink to the width of its longest line and centre it, so
   the block doesn't stretch full width with dead space to the right of the
   short helm flags. max-width (not width) keeps it a full-width block when the
   viewport is narrower than the content, so the code scrolls instead of being
   clipped. */
.gag-install {
  max-width: fit-content;
  margin-inline: auto;
}

/* Section intro (heading + lede): both landing sections share the hero's width
   and are centred as a block, with the text left-aligned inside — so the hero,
   "What GAG gives you", and "How it fits together" all line up consistently.
   Caps to the viewport (and wraps) on narrow screens. */
.gag-section-intro {
  max-width: 44rem;
  margin-inline: auto;
}

/* Caption beneath the architecture flow: centred under the centred diagram. */
.gag-flow__caption {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

.gag-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--md-accent-fg-color);
  margin: 0 0 0.75rem;
}

.gag-hero h1 {
  /* Upper bound is set by the headline column, not by taste: at 44rem minus the
     logomark and its gap the column is 35.9rem, and the longest unbreakable
     phrase is 26 characters of Monaspace Neon (15.86em all told), so anything
     much above 2.2rem forces "Self-hosted GitHub Actions" to overrun. 2.2rem
     leaves ~20px spare at the tightest width (1200px, where the logomark hits
     its 132px cap); every fallback mono face is narrower than Neon, so a failed
     webfont load only ever gains slack. */
  font-size: clamp(1.9rem, 1.25rem + 2.4vw, 2.2rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.7rem;
  /* Pretty (not balance): the headline wraps around the floated logomark, so
     keep the lines flush-left rather than centre-balanced. */
  text-wrap: pretty;
}

/* Headline phrases that read as one unit ("Self-hosted GitHub Actions", "zero
   idle compute") and shouldn't be split by a line break — the headline reads as
   two phrases at a glance instead of three ragged lines. Paired with the h1
   font-size cap above, which is what keeps the longest phrase inside the
   headline column. Released below 44rem, where even the full stacked width is
   narrower than the phrase at the minimum type size; phones wrap inside the
   phrase rather than pushing the page sideways. Distinct from the .gag-nowrap
   table-chip utility below, which never releases. */
.gag-hero__phrase {
  white-space: nowrap;
}

@media screen and (max-width: 44rem) {
  .gag-hero__phrase {
    white-space: normal;
  }
}

/* The hero title is the page banner, not a deep-link target — drop its ¶ permalink. */
.gag-hero .headerlink {
  display: none;
}

.gag-hero .gag-tagline {
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.15rem);
  color: var(--md-default-fg-color--light);
  margin: 0 0 1.5rem;
  text-wrap: pretty;
}

/* Center the call-to-action row even though the hero text is left-aligned. */
.gag-hero p:has(.md-button) {
  text-align: center;
}

.gag-hero .md-button {
  margin: 0.5rem 0.3rem 0;
  border-radius: 0.45rem;
  transition: transform 0.2s var(--gag-ease), box-shadow 0.2s var(--gag-ease),
    background-color 0.2s var(--gag-ease), color 0.2s var(--gag-ease);
}

.gag-hero .md-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--gag-elev-2);
}

.gag-hero .md-button--primary {
  box-shadow: var(--gag-elev-1);
}

.gag-reassure {
  font-size: 0.82rem;
  color: var(--md-default-fg-color--light);
  max-width: 48rem;
  margin: 1.1rem 0 0;
  text-wrap: pretty;
}

.gag-reassure .twemoji {
  color: var(--md-accent-fg-color);
}

/* Benefit cards: 3 across (two balanced rows of three), degrading when narrow. */
.gag-pillars .grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media screen and (max-width: 56rem) {
  .gag-pillars .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 42rem) {
  .gag-pillars .grid {
    grid-template-columns: 1fr;
  }
}

/* "Who GAG is for" honesty band — the disqualifier, set apart from the three
   persona cards rather than carried as a fourth peer. Flatter than a card (no
   shadow, no hover lift) with an accent rule, so the "not for everyone" scope
   note reads as confident honesty — a trust signal — and closes the section. */
.gag-fit-note {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 1.1rem 0 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-left: 3px solid var(--md-accent-fg-color);
  border-radius: 0.6rem;
  background: color-mix(
    in srgb,
    var(--md-accent-fg-color) 5%,
    var(--md-default-bg-color)
  );
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--md-default-fg-color--light);
  text-wrap: pretty;
}

.gag-fit-note strong {
  color: var(--md-default-fg-color);
}

.gag-fit-note .twemoji {
  flex: none;
  color: var(--md-accent-fg-color);
  margin-top: 0.08rem;
}

.gag-fit-note .twemoji svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* Marketing pages (landing + Why-GAG): give the content more side breathing
   room on wide screens. Scoped via :has() to the pages carrying the heroes, so
   the nav-inset docs pages are untouched (no JS needed). */
@media screen and (min-width: 72rem) {
  .md-content__inner:has(.gag-hero),
  .md-content__inner:has(.gag-vs-hero) {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }
}

/* Why-GAG split hero: left-aligned argument + a right-hand ARC-vs-GAG proof
   card, so the comparison starts in the first screenful (distinct from the
   centered landing hero). Stacks to one column on narrow screens. */
.gag-vs-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.5rem;
  align-items: center;
  padding: 2.5rem 0 2rem;
}

@media screen and (max-width: 55rem) {
  .gag-vs-hero {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem 0;
  }
}

.gag-vs-hero h1 {
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.8rem;
  text-wrap: balance;
}

/* Hero headline is the page banner, not a deep-link target — drop its ¶ permalink. */
.gag-vs-hero h1 .headerlink {
  display: none;
}

.gag-vs-hero__lede {
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.12rem);
  color: var(--md-default-fg-color--light);
  max-width: 34rem;
  margin: 0 0 1.5rem;
  text-wrap: pretty;
}

.gag-vs-hero .md-button {
  margin: 0.25rem 0.5rem 0.25rem 0;
  border-radius: 0.45rem;
  transition: transform 0.2s var(--gag-ease), box-shadow 0.2s var(--gag-ease),
    background-color 0.2s var(--gag-ease), color 0.2s var(--gag-ease);
}

.gag-vs-hero .md-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--gag-elev-2);
}

.gag-vs-hero .md-button--primary {
  box-shadow: var(--gag-elev-1);
}

/* The proof card: ARC's failure mode stacked above GAG's, on the same scenario. */
.gag-vs-hero__proof {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.7rem;
  padding: 1rem;
  background: var(--md-default-bg-color);
  box-shadow: var(--gag-elev-1);
}

.gag-vs-hero__proof-cap {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
  margin: 0 0 0.1rem;
}

.gag-vs-hero__proof-cap code {
  text-transform: none;
}

.gag-vs-row {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.7rem 0.8rem;
  border-radius: 0.5rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--md-default-fg-color);
}

/* Warm tint for the ARC pain, cool/green for the GAG outcome — the row colour
   carries the contrast (matching the warm problem-card chips elsewhere). */
.gag-vs-row--arc {
  background: color-mix(in srgb, var(--gag-bad-fill) 10%, transparent);
}

.gag-vs-row--gag {
  background: color-mix(in srgb, var(--gag-win-fill) 12%, transparent);
}

.gag-vs-row__tag {
  flex: none;
  align-self: center;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.45rem;
  border-radius: 0.3rem;
  color: #fff;
}

.gag-vs-row--arc .gag-vs-row__tag {
  background: var(--gag-bad-fill);
}

.gag-vs-row--gag .gag-vs-row__tag {
  background: var(--gag-win-fill);
}

/* Why-GAG problem cards: 2 across (the four problems pair up), reusing the
   benefit-card visuals below. Collapses to one column on narrow screens. */
.gag-pillars.gag-cols-2 .grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media screen and (max-width: 45rem) {
  .gag-pillars.gag-cols-2 .grid {
    grid-template-columns: 1fr;
  }
}

/* Problem cards read as "the pain", so fill their icon chip red (vs the accent
   blue used for GAG's benefits) — the eye separates problem from solution. */
.gag-pillars.gag-pillars--problem .grid.cards .twemoji.lg {
  background: var(--gag-bad-fill);
  color: #fff;
}

/* Stat band: a row of headline numbers — the scannable "spice" for skimmers,
   each tied to a claim spelled out in the table and appendices below. */
.gag-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0 1.75rem;
}

.gag-stat {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.6rem;
  padding: 1.1rem 1rem;
  text-align: center;
  background: var(--md-default-bg-color);
  box-shadow: var(--gag-elev-1);
  transition: transform 0.2s var(--gag-ease), box-shadow 0.2s var(--gag-ease),
    border-color 0.2s var(--gag-ease);
}

.gag-stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--gag-elev-2);
  border-color: var(--gag-accent-line);
}

.gag-stat__num {
  display: block;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  /* Green = "GAG win" (same language as the table ✓ and hero GAG pill), so the
     stat band reads as the red problem cards above it, now fixed. */
  color: var(--gag-win-ink);
}

.gag-stat__label {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--md-default-fg-color--light);
  text-wrap: pretty;
}

/* Bold lead phrase (before the em-dash) at full text strength, so it reads as a
   mini-heading above the muted supporting detail. */
.gag-stat__lead {
  font-weight: 700;
  color: var(--md-default-fg-color);
}

@media screen and (max-width: 50rem) {
  .gag-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 30rem) {
  .gag-stats {
    grid-template-columns: 1fr;
  }
}

/* Savings calculator (Appendix F § F.5). The `.gag-calc` mount is empty in the
   markdown (so GitHub / no-JS shows the worked example below it); JS fills it. */
.gag-calc {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.7rem;
  padding: 1.25rem;
  margin: 1.5rem 0;
  background: var(--md-default-bg-color);
  box-shadow: var(--gag-elev-1);
}

.gag-calc__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.gag-calc__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.gag-calc__field-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--md-default-fg-color--light);
}

.gag-calc__field input {
  font-size: 0.95rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 0.4rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}

.gag-calc__field input:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 1px;
}

.gag-calc__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.gag-calc__preset {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  text-align: left;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 0.45rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  cursor: pointer;
  transition: border-color 0.15s var(--gag-ease), transform 0.15s var(--gag-ease);
}

.gag-calc__preset:hover {
  border-color: var(--gag-accent-line);
  transform: translateY(-1px);
}

.gag-calc__preset strong {
  font-size: 0.82rem;
}

.gag-calc__preset small {
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
}

.gag-calc__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.gag-calc__cell {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.55rem;
  padding: 0.8rem 0.7rem;
  text-align: center;
  background: var(--md-default-bg-color);
}

.gag-calc__cell--win {
  border-color: color-mix(in srgb, var(--gag-win-fill) 45%, transparent);
  background: color-mix(in srgb, var(--gag-win-fill) 9%, transparent);
}

.gag-calc__cell-num {
  display: block;
  font-size: clamp(1.2rem, 0.95rem + 1vw, 1.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.gag-calc__cell--win .gag-calc__cell-num {
  color: var(--gag-win-ink);
}

.gag-calc__cell-label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--md-default-fg-color);
}

.gag-calc__cell-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  color: var(--md-default-fg-color--light);
}

.gag-calc__note {
  margin: 0.9rem 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--md-default-fg-color--light);
  text-wrap: pretty;
}

@media screen and (max-width: 50rem) {
  .gag-calc__form {
    grid-template-columns: 1fr;
  }
  .gag-calc__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 30rem) {
  .gag-calc__grid {
    grid-template-columns: 1fr;
  }
}

/* Four-tier flow: real DOM boxes so text stays legible and the layout reflows
   (branching row on wide screens, stacked on narrow) instead of scaling an SVG. */
.gag-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 1.5rem auto;
  /* Bound the diagram so the two-up Tier 2/3 row doesn't stretch to fill a wide
     column — keeps the boxes a consistent size and the whole flow centered. */
  max-width: 38rem;
}

.gag-flow__node {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
  padding: 0.6rem 1rem;
  text-align: center;
  background: var(--md-default-bg-color);
  min-width: 12rem;
}

.gag-flow__node--lead {
  border-color: var(--md-accent-fg-color);
}

.gag-flow__node--input {
  border-style: dashed;
}

.gag-flow__tier {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-accent-fg-color);
  margin-bottom: 0.15rem;
}

.gag-flow__tier--input {
  color: var(--md-default-fg-color--light);
}

.gag-flow__title {
  display: block;
  font-weight: 700;
}

.gag-flow__sub {
  display: block;
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light);
}

.gag-flow__arrow {
  color: var(--md-default-fg-color--light);
  font-size: 0.8rem;
}

.gag-flow__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

/* Wider content column (less side gutter) so wide tables have room to breathe. */
.md-grid {
  max-width: 72rem;
}

/* Benefit cards: depth + hover lift, with the icon in an accent chip. */
.gag-pillars .grid.cards > ul > li {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.6rem;
  box-shadow: var(--gag-elev-1);
  transition: transform 0.2s var(--gag-ease), box-shadow 0.2s var(--gag-ease),
    border-color 0.2s var(--gag-ease);
  padding: 0.6rem 0.75rem;
}

.gag-pillars .grid.cards > ul > li:hover {
  transform: translateY(-3px);
  box-shadow: var(--gag-elev-2);
  border-color: var(--gag-accent-line);
}

/* Card header: icon chip sits inline-left of the title, vertically centred —
   not floating as a separate block above it. */
.gag-pillars .grid.cards > ul > li > p:first-child {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.3rem;
}

/* Divider between header and body. */
.gag-pillars .grid.cards > ul > li > hr {
  margin: 0.3rem 0;
}

/* Lead text and bullet list. */
.gag-pillars .grid.cards > ul > li > p:not(:first-child) {
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
}

.gag-pillars .grid.cards > ul > li ul {
  margin: 0;
  padding-left: 1rem;
}

.gag-pillars .grid.cards > ul > li ul > li {
  font-size: 0.75rem;
  line-height: 1.35;
  margin-bottom: 0.15rem;
}

/* Bold, solid icon chip with a white glyph so the card headers pop. */
.gag-pillars .grid.cards .twemoji.lg {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  background: var(--md-accent-fg-color);
  color: #fff;
}

.gag-pillars .grid.cards .twemoji.lg svg {
  width: 1rem;
  height: 1rem;
}

/* Continuation line in a table cell — indents to align under the first line's
   text, past the leading icon. */
.gag-cont {
  display: inline-block;
  padding-left: 1.5em;
}

/* Keep a short code chip on one line inside a narrow table column (Material
   default word-breaks code in table cells). Applied per-span via raw HTML
   (<code class="gag-nowrap">) — attr_list does not attach to inline code —
   and never table-wide: long code in other columns still needs to wrap. */
.md-typeset .gag-nowrap {
  white-space: nowrap;
  word-break: normal;
}

/* v2 API badge — small pill on benefit cards that require the v2alpha1 API. */
.gag-v2-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.4rem;
  border-radius: 0.75rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(103, 80, 164, 0.12);
  color: #6750a4;
  vertical-align: middle;
  margin-left: 0.15rem;
  white-space: nowrap;
}

[data-md-color-scheme="slate"] .gag-v2-badge {
  background: rgba(208, 188, 255, 0.15);
  color: #d0bcff;
}

/* Maturity badge — small pill marking a roadmap item's stability (alpha/beta/
   GA) as a capability graduates. Distinct axis from the v2 API badge above:
   this signals how stable a capability is, not which API surface it needs.
   Shares the pill shape; amber warns "not yet GA". */
.gag-maturity-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.4rem;
  border-radius: 0.75rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(179, 118, 0, 0.14);
  color: #8a5a00;
  vertical-align: middle;
  margin-left: 0.15rem;
  white-space: nowrap;
}

[data-md-color-scheme="slate"] .gag-maturity-badge {
  background: rgba(255, 202, 128, 0.16);
  color: #ffca80;
}

/* Comparison / data tables: bigger text, rounded frame, emphasized header + GAG
   column. NB: do not re-add a :not([class]) guard here — the scroll-reveal JS
   stamps .gag-reveal onto marketing-page tables, which a :not([class]) selector
   would then exclude, dropping all this styling (that was the why-gag bug). */
.md-typeset table {
  font-size: 0.8rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.5rem;
  overflow: hidden;
}

.md-typeset table th {
  font-weight: 700;
  background: var(--md-default-fg-color--lightest);
}

.md-typeset table td:first-child {
  font-weight: 500;
}

/* Last column = GitHub Actions Gateway: tint it so the eye lands on "us". */
.md-typeset table th:last-child {
  color: var(--md-accent-fg-color);
}

.md-typeset table th:last-child,
.md-typeset table td:last-child {
  background: var(--gag-accent-soft);
}

.md-typeset table tbody tr:hover td:not(:last-child) {
  background: color-mix(in srgb, var(--md-accent-fg-color) 4%, transparent);
}

/* Plain (non-marketing) tables: Material defaults these to 0.64rem (12.8px),
   which reads too small against 16px body copy — more so since IBM Plex Sans has
   a smaller x-height than Roboto. The rule above only wins for classed tables
   (the reveal JS stamps a class on marketing tables); Material's own
   :not([class]) selector out-specifies it for plain docs tables, so bump those
   explicitly to 0.75rem (15px). */
.md-typeset table:not([class]) {
  font-size: 0.75rem;
}

/* Admonitions / collapsible details (e.g. the "New tenants: onboard on v2" tip):
   Material defaults their content to 0.64rem (12.8px), same too-small problem as
   plain tables. Bump the block so the title and body both read at 0.75rem (15px);
   nested children inherit. */
.md-typeset .admonition,
.md-typeset details {
  font-size: 0.75rem;
}

/* The why-gag comparison table: fill the column (so it isn't left-aligned with a
   right-hand gap) and restore roomy cell padding. Material's default cell padding
   is :not([class])-guarded, so the reveal JS that classes this table drops it —
   hence re-stating it here. Scoped to this page so other tables are untouched.
   table-layout: fixed pins the column widths below: under auto layout the browser
   splits width by each column's max-content demand, and the GAG column's
   continuation sentences dwarf the other two — it took 58% while the capability
   label, the anchor of every row, was starved to 19% (narrower than ARC's 23%)
   and wrapped labels that would otherwise fit on one line. */
.md-content__inner:has(.gag-vs-hero) table {
  width: 100%;
  table-layout: fixed;
}

/* Label column gets room for a one-line capability name; the two compared columns
   stay close enough to read side-by-side, GAG widest as it carries ~2x the text. */
.md-content__inner:has(.gag-vs-hero) table th:nth-child(1) {
  width: 26%;
}

.md-content__inner:has(.gag-vs-hero) table th:nth-child(2) {
  width: 32%;
}

.md-content__inner:has(.gag-vs-hero) table th:nth-child(3) {
  width: 42%;
}

.md-content__inner:has(.gag-vs-hero) table th,
.md-content__inner:has(.gag-vs-hero) table td {
  padding: 0.7rem 1.05rem;
  vertical-align: top;
}

/* On phones the 3-column table is unreadable (cells wrap to many lines, code
   tokens break mid-word), so stack each row: the capability becomes a heading
   with the ARC and GAG outcomes labelled and full-width beneath it. */
@media screen and (max-width: 38rem) {
  .md-content__inner:has(.gag-vs-hero) table,
  .md-content__inner:has(.gag-vs-hero) table tbody,
  .md-content__inner:has(.gag-vs-hero) table tr,
  .md-content__inner:has(.gag-vs-hero) table td {
    display: block;
    width: auto;
  }

  .md-content__inner:has(.gag-vs-hero) table thead {
    display: none;
  }

  .md-content__inner:has(.gag-vs-hero) table tr {
    padding: 0.6rem 0.4rem;
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
  }

  .md-content__inner:has(.gag-vs-hero) table tr:last-child {
    border-bottom: 0;
  }

  .md-content__inner:has(.gag-vs-hero) table td {
    padding: 0.15rem 0.8rem;
  }

  .md-content__inner:has(.gag-vs-hero) table td:first-child {
    font-weight: 700;
    font-size: 0.92rem;
    padding-bottom: 0.4rem;
  }

  /* Drop the per-cell GAG tint when stacked, and label the two outcome lines. */
  .md-content__inner:has(.gag-vs-hero) table td:last-child {
    background: transparent;
  }

  .md-content__inner:has(.gag-vs-hero) table td:nth-child(2)::before,
  .md-content__inner:has(.gag-vs-hero) table td:last-child::before {
    font-weight: 700;
    margin-right: 0.15rem;
  }

  .md-content__inner:has(.gag-vs-hero) table td:nth-child(2)::before {
    content: "ARC";
    color: var(--gag-bad-ink);
  }

  .md-content__inner:has(.gag-vs-hero) table td:last-child::before {
    content: "GAG";
    color: var(--gag-win-ink);
  }
}

/* Verdict icons in the comparison table: green for a GAG win, warm red for an
   ARC shortfall (matching the proof-card and problem-card colour language). */
.md-typeset .gag-yes,
.md-typeset .gag-no {
  margin-right: 0.15rem;
  vertical-align: text-bottom;
}

.md-typeset .gag-yes {
  color: var(--gag-win-ink);
}

.md-typeset .gag-no {
  color: var(--gag-bad-ink);
}

/* Scroll reveals — only when JS adds .gag-reveal-ready. No-JS and reduced-motion
   users never get the hidden initial state, so they see everything immediately. */
html.gag-reveal-ready .gag-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--gag-ease), transform 0.5s var(--gag-ease);
}

html.gag-reveal-ready .gag-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.gag-reveal-ready .gag-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
}

/* Clear keyboard focus ring. */
.md-typeset a:focus-visible,
.md-button:focus-visible,
.persona-chip:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Persona filter on the operations index (progressively enhanced from a table). */
.persona-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1rem;
}

.persona-chip {
  font-size: 0.78rem;
  line-height: 1;
  padding: 0.42rem 0.85rem;
  border-radius: 1rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: transparent;
  color: var(--md-default-fg-color--light);
  cursor: pointer;
  transition: background-color 0.15s var(--gag-ease), color 0.15s var(--gag-ease),
    border-color 0.15s var(--gag-ease);
}

.persona-chip:hover {
  border-color: var(--gag-accent-line);
}

.persona-chip[aria-pressed="true"] {
  background: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
  color: #fff;
}

.persona-pill {
  display: inline-block;
  font-size: 0.7rem;
  line-height: 1.5;
  padding: 0.05rem 0.5rem;
  border-radius: 0.8rem;
  background: var(--gag-accent-soft);
  color: var(--md-accent-fg-color);
  white-space: nowrap;
}

/* Row pills are progressively enhanced into buttons that select the chip. */
button.persona-pill {
  border: none;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s var(--gag-ease);
}

button.persona-pill:hover {
  background: color-mix(in srgb, var(--md-accent-fg-color) 20%, transparent);
}

button.persona-pill:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 1px;
}

/* Per-doc audience pills, just under the page title. */
.persona-pills-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: -0.2rem 0 1.2rem;
}

/* Audience pills are links to the filtered ops index — keep the pill look. */
.md-typeset a.persona-pill {
  text-decoration: none;
  color: var(--md-accent-fg-color);
  transition: background-color 0.15s var(--gag-ease);
}

.md-typeset a.persona-pill:hover {
  background: color-mix(in srgb, var(--md-accent-fg-color) 20%, transparent);
}

/* Backlog filters on the dev-only STATUS page — one labelled chip bar per
   dimension, reusing the persona chip look. */
.backlog-filters {
  margin: 0 0 1rem;
}

.backlog-filter {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}

.backlog-filter__legend {
  flex: 0 0 3.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}

/* The bars sit inside a labelled row, so drop the standalone bottom margin. */
.backlog-filter .persona-bar {
  margin: 0;
}

.md-typeset .backlog-count {
  margin: 0.2rem 0 0;
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
}

/* Row labels select their chip, like the persona pills. */
.md-typeset code.backlog-label {
  cursor: pointer;
}

@media screen and (max-width: 44.9375em) {
  .backlog-filter__legend {
    flex-basis: 100%;
  }
}