/* 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. */
@media screen and (max-width: 42rem) {
  .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 {
  font-size: clamp(1.9rem, 1.25rem + 2.4vw, 2.9rem);
  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;
}

/* 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;
}

/* 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. */
.md-content__inner:has(.gag-vs-hero) table {
  width: 100%;
}

.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);
}