/* ═══════════════════════════════════════════════════════════════════════════
   APPIAN HOMEPAGE MOTION SYSTEM
   ───────────────────────────────────────────────────────────────────────────
   Document author:  Function Labs / H5 Team
   Stakeholders:     Rui Cabrinha, Raina Van Cleave (Appian) · Kenneth (dev)
   This file styles BOTH the spec-doc shell AND the rebuilt Appian sections.
   The two are clearly separated below.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── Tokens (mirror Appian's production set, only what we use) ─── */
:root {
  /* Brand */
  --color-blue-070:  #2424f0;   /* primary CTA */
  --color-blue-080:  #0e14c4;
  --color-blue-100:  #020a50;   /* hover, dark surface */
  --color-blue-060:  #4a4ff2;

  /* Neutrals */
  --color-neutral-010: #f6f7f8; /* surface alt */
  --color-neutral-020: #f0f2f4;
  --color-neutral-030: #e2e4e9; /* border light */
  --color-neutral-040: #cacfd8;
  --color-neutral-050: #a7afbe;
  --color-neutral-060: #8790a1;
  --color-neutral-070: #677183;
  --color-neutral-080: #4c5361; /* body text */
  --color-neutral-090: #31363f;
  --color-neutral-100: #1b1d22; /* heading text */

  --color-white: #ffffff;

  /* Motion */
  --motion-fast-01:     100ms;
  --motion-fast-02:     150ms;
  --motion-moderate-01: 200ms;
  --motion-moderate-02: 320ms;
  --motion-slow-01:     520ms;
  --motion-slow-02:     900ms;

  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-entrance:  cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:      cubic-bezier(0.4, 0, 1, 1);
}

/* ─── Reset / base ─── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Funnel Sans', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  color: var(--color-neutral-100);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   SPEC-DOC SHELL — the framing around the rebuilt Appian sections
   This is the Function Labs layer. Reads as a clean design-system doc.
   ═══════════════════════════════════════════════════════════════════════════ */

.spec-shell {
  background: #fafafa;
  min-height: 100vh;
}

/* The big top banner — establishes this is a Function Labs deliverable */
.spec-cover {
  padding: 96px 64px 64px;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-neutral-030);
}
.spec-cover__inner { max-width: 1240px; margin: 0 auto; }

.spec-cover__eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-070);
  margin-bottom: 24px;
}
.spec-cover__title {
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0 0 24px;
  color: var(--color-neutral-100);
  max-width: 880px;
}
.spec-cover__title em {
  font-style: normal;
  color: var(--color-blue-070);
}
.spec-cover__lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--color-neutral-080);
  max-width: 720px;
  margin: 0 0 48px;
}

.spec-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--color-neutral-030);
}
.spec-meta__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-060);
  margin-bottom: 8px;
}
.spec-meta__value {
  font-size: 14px;
  color: var(--color-neutral-090);
  line-height: 1.5;
}

/* Section header — sits above each rebuilt Appian section */
.spec-section-header {
  padding: 80px 64px 24px;
  background: #fafafa;
}
.spec-section-header__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  gap: 32px;
}
.spec-section-header__num {
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--color-neutral-060);
  flex-shrink: 0;
  width: 32px;
}
.spec-section-header__title {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  color: var(--color-neutral-100);
}
.spec-section-header__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-neutral-070);
  margin-top: 4px;
  max-width: 580px;
}

/* The "stage" wraps each rebuilt section — gives it a clear frame */
.spec-stage {
  padding: 0 64px 32px;
}
.spec-stage__inner {
  max-width: 1240px;
  margin: 0 auto;
  border: 1px solid var(--color-neutral-030);
  border-radius: 12px;
  background: var(--color-white);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(27, 29, 34, 0.04),
              0 24px 48px -24px rgba(27, 29, 34, 0.08);
}

/* Replay button — sits below each motion section.
   Padding matches the .spec-stage__inner max-width so the controls row
   visually aligns with the rebuilt section above it. */
.spec-controls {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--color-neutral-010);
  border: 1px solid var(--color-neutral-030);
  border-top: none;
  border-radius: 0 0 12px 12px;
  font-size: 13px;
  color: var(--color-neutral-070);
}
.spec-controls__note {
  margin-right: auto;
  font-style: italic;
}
.spec-replay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-030);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-neutral-090);
  transition: border-color var(--motion-moderate-01) var(--ease-standard),
              background var(--motion-moderate-01) var(--ease-standard);
}
.spec-replay:hover {
  border-color: var(--color-neutral-060);
  background: var(--color-neutral-010);
}
.spec-replay svg { width: 14px; height: 14px; }


/* ═══════════════════════════════════════════════════════════════════════════
   APPIAN REBUILD — pixel-fidelity recreations of the homepage sections
   Each rebuilt section is scoped under `.ap-*` to keep it isolated from the
   spec-doc shell above. Motion lives inline with the section it belongs to.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────────
   01 — HEADER (top navigation)
   ───────────────────────────────────────────────────────────────────────── */

.ap-header {
  height: 72px;
  display: flex;
  align-items: center;
  padding: 0 32px;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-neutral-030);
}
.ap-header__logo {
  display: block;
  height: 28px;
}
.ap-header__logo img { height: 100%; width: auto; }

.ap-nav {
  display: flex;
  align-items: center;
  margin-left: 48px;
  gap: 12px;   /* between top-level nav items */
}
.ap-nav__link {
  position: relative;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-neutral-080);
  transition: color var(--motion-moderate-01) var(--ease-standard);
}
.ap-nav__link::after {
  /* L→R underline indicator (editorial recipe) */
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 1.5px;
  background: var(--color-neutral-100);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-slow-01) var(--ease-entrance);
}
.ap-nav__link:hover {
  color: var(--color-neutral-100);
}
.ap-nav__link:hover::after {
  transform: scaleX(1);
}

.ap-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ap-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  color: var(--color-neutral-080);
  opacity: 0.75;
  transition: opacity var(--motion-moderate-01) var(--ease-standard);
}
.ap-icon-btn:hover { opacity: 1; }
.ap-icon-btn svg { width: 18px; height: 18px; }

/* Pill buttons (Join a Demo / Contact Us) — header-sized */
.ap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  border-radius: 6px;     /* subtle rounding — Appian's actual radius, not pill */
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-neutral-080);
  /* Slower than 200ms — hover treatment reads as considered, not brisk.
     Matches the editorial-underline timing family without being sluggish. */
  transition: background var(--motion-moderate-02) var(--ease-standard),
              border-color var(--motion-moderate-02) var(--ease-standard),
              color var(--motion-moderate-02) var(--ease-standard);
  white-space: nowrap;
}

.ap-btn--ghost { /* Join a Demo */
  background: transparent;
  border-color: var(--color-neutral-030);
  color: var(--color-neutral-100);
}
.ap-btn--ghost:hover {
  background: var(--color-neutral-010);
  border-color: var(--color-neutral-050);
}

.ap-btn--primary { /* Contact Us */
  background: var(--color-blue-070);
  color: var(--color-white);
  border-color: var(--color-blue-070);
}
.ap-btn--primary:hover {
  background: var(--color-blue-100);
  border-color: var(--color-blue-100);
}

.ap-btn--secondary { /* Explore Platform */
  background: var(--color-white);
  color: var(--color-blue-070);
  border-color: var(--color-neutral-030);
}
.ap-btn--secondary:hover {
  background: var(--color-white);
  color: var(--color-blue-100);
  border-color: var(--color-blue-100);
}


/* ─────────────────────────────────────────────────────────────────────────
   02 — HERO
   Live structure: title pinned to top, kicker/sub/CTAs bottom-left,
   teaser cards bottom-right. Cards are NOT cards — they're transparent
   list items (thumbnail + light text) with a hairline separator between
   them. Min-height 650px matches the live `.video-background.hero` rule.
   ───────────────────────────────────────────────────────────────────────── */

.ap-hero {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  background: var(--color-blue-100);  /* fallback while video loads */
}
.ap-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.ap-hero__overlay {
  /* Flat 50% black — pushes the video firmly to backdrop. Process-diagram
     pattern stays just visible enough to register. */
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

/* 2x2 grid: title spans full top, content bottom-left, cards bottom-right.
   The middle row stretches to take all remaining height — title stays glued
   to the top and the bottom row stays glued to the bottom regardless of
   container height. */
.ap-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  min-height: 650px;
  margin: 0 auto;
  padding: 64px 32px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: 64px;
  row-gap: 24px;
}
.ap-hero__title  { grid-column: 1; grid-row: 1; align-self: start; }
.ap-hero__content { grid-column: 1; grid-row: 3; align-self: end; max-width: 580px; }
.ap-hero__cards  { grid-column: 2; grid-row: 3; align-self: end; }

.ap-hero__title {
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--color-white);
  margin: 0;
}
.ap-hero__kicker {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-white);
  margin: 0 0 16px;
}
.ap-hero__sub {
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255,255,255,0.9);
  margin: 0 0 32px;
  max-width: 460px;
}

/* Two-button CTA row */
.ap-hero__ctas {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* In-hero Explore Platform — matches Join a Demo (ghost button) exactly.
   Rest: transparent background, light gray translucent border, white-ish
   text. Hover: soft white bg fill, brighter border. Same behavior as
   Join a Demo in the header, scoped to the dark video context via
   higher-specificity rgba values. */
.ap-hero .ap-btn--secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--color-white);
}
.ap-hero .ap-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--color-white);
}

/* ─ Teaser cards — transparent, light text, hairline separator ─
   Each card is a 3-column row: square thumbnail | text block | arrow
   slot. The text block has a fixed width (`min-width: 0; flex: 1`) so
   that long copy wraps within the column rather than pushing the row
   wider — giving the cards a uniform trim regardless of copy length.
   The arrow slot is a fixed 24px wide column that stays empty at rest
   and reveals an arrow via path-trace on card hover. */
.ap-hero__cards {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 380px;
  justify-self: end;
}
.ap-hero__card {
  display: grid;
  grid-template-columns: 56px 1fr 24px;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,0.85);
  transition: color var(--motion-moderate-02) var(--ease-standard);
  cursor: pointer;
}
.ap-hero__card + .ap-hero__card {
  /* Hairline divider between the two cards — mirrors the live <separator> */
  border-top: 1px solid rgba(255,255,255,0.18);
}
.ap-hero__card:hover { color: var(--color-white); }

.ap-hero__card-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 4px;
  background: var(--color-neutral-020);
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
}
.ap-hero__card-body {
  /* min-width: 0 is the magic line. Without it, a grid track will grow
     beyond its container if its content doesn't break — defeating the
     uniform trim. With it, the text wraps inside the column. */
  min-width: 0;
  line-height: 1.45;
}
.ap-hero__card-body strong {
  color: var(--color-white);
  font-weight: 600;
  margin-right: 2px;
}

/* ─ Arrow slot — left-to-right wipe reveal on hover ─
   Implementation note: I tried this with stroke-dashoffset path-trace
   first, but any arrow has a Y-junction (shaft meets head) which means
   the path has at least one moveto. Animating dashoffset across a path
   with multiple subpaths produces visually inconsistent direction —
   the head's diagonal legs read as vertical at this small SVG scale,
   so the "trace" appeared to wipe top-down instead of left-right.
   
   Clip-path is the right tool for this job: we mask the arrow with a
   rectangle that grows from left to right. The arrow itself is fully
   drawn at all times, but only the unclipped portion is visible. The
   resulting motion is unambiguously left-to-right regardless of the
   arrow's internal geometry. */
.ap-hero__card-arrow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: rgba(255,255,255,0.9);
}
.ap-hero__card-arrow svg {
  width: 20px;
  height: 14px;
  overflow: visible;
  /* inset(top right bottom left) — clip from the right side so only
     a 0-width strip is visible at rest, growing leftward → rightward
     by reducing the right inset. */
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--motion-slow-01) var(--ease-entrance);
}
.ap-hero__card:hover .ap-hero__card-arrow svg {
  clip-path: inset(0 0 0 0);
}
/* Faster wipe-out on mouse-off */
.ap-hero__card:not(:hover) .ap-hero__card-arrow svg {
  transition-duration: var(--motion-moderate-02);
}
.ap-hero__card-arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hero entry cascade — fires when .ap-hero gets .is-revealed.
   Order: title → kicker → sub → CTAs → card1 → card2 */
.ap-hero .ap-hero__title,
.ap-hero .ap-hero__kicker,
.ap-hero .ap-hero__sub,
.ap-hero .ap-hero__ctas,
.ap-hero .ap-hero__card {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--motion-slow-01) var(--ease-entrance),
              transform var(--motion-slow-01) var(--ease-entrance);
}
.ap-hero.is-revealed .ap-hero__title    { transition-delay:   0ms; opacity: 1; transform: none; }
.ap-hero.is-revealed .ap-hero__kicker   { transition-delay:  80ms; opacity: 1; transform: none; }
.ap-hero.is-revealed .ap-hero__sub      { transition-delay: 120ms; opacity: 1; transform: none; }
.ap-hero.is-revealed .ap-hero__ctas     { transition-delay: 200ms; opacity: 1; transform: none; }
.ap-hero.is-revealed .ap-hero__card:nth-child(1) { transition-delay: 300ms; opacity: 1; transform: none; }
.ap-hero.is-revealed .ap-hero__card:nth-child(2) { transition-delay: 360ms; opacity: 1; transform: none; }

/* Replay support — when .no-transitions is on, suppress ALL transitions
   inside the target so the snap-back to initial state is instant. */
.no-transitions,
.no-transitions *,
.no-transitions *::before,
.no-transitions *::after {
  transition: none !important;
  animation: none !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   03 — INDUSTRIES TRUST BAND (customer logos)
   ───────────────────────────────────────────────────────────────────────── */

.ap-trust {
  padding: 56px 0;
  background: var(--color-white);
}
.ap-trust__intro-wrap {
  max-width: 1240px;
  margin: 0 auto 32px;
  padding: 0 32px;
}
.ap-trust__intro {
  font-size: 14px;
  color: var(--color-neutral-080);
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}
.ap-trust__intro-link {
  position: relative;
  color: var(--color-neutral-100);
  font-weight: 500;
}
.ap-trust__intro-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-slow-01) var(--ease-entrance);
}
.ap-trust__intro-link:hover::after { transform: scaleX(1); }

/* ─ Static logo row with generous hover cells ─
   Each logo lives inside an .ap-trust__cell that is much larger than
   the logo itself. The cell takes the cursor — so moving from one
   cell to the next, the cursor is always inside SOMEONE's cell, with
   no gap where nothing is hovered. This eliminates the "speckle"
   problem the older :has() pattern had.

   States:
     - Default: all logos full color, full opacity
     - Row hovered (anywhere in the band): all dim to grayscale + 0.4
     - Cell hovered: that one logo returns to full color + opacity

   Implementation:
     .ap-trust__row:hover .ap-trust__cell img       → grayscale + dim
     .ap-trust__row:hover .ap-trust__cell:hover img → full color
   Because cells are full-width pieces of the row, the cursor never
   exits the row while moving between logos. */

.ap-trust__row {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;            /* zero gap — cells share edges, no dead zone */
  align-items: stretch;
}
.ap-trust__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;       /* generous vertical hover zone */
  padding: 16px 24px; /* extra room around the logo glyph itself */
  cursor: default;
}
.ap-trust__cell img {
  max-height: 100%;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(0);
  opacity: 1;
  transition: filter var(--motion-moderate-02) var(--ease-standard),
              opacity var(--motion-moderate-02) var(--ease-standard);
}

/* When the cursor is anywhere on the row, dim all logos */
.ap-trust__row:hover .ap-trust__cell img {
  filter: grayscale(100%);
  opacity: 0.4;
}
/* The specific hovered cell pops back to full color */
.ap-trust__row:hover .ap-trust__cell:hover img {
  filter: grayscale(0);
  opacity: 1;
}

@media (max-width: 1024px) {
  .ap-trust__row { grid-template-columns: repeat(2, 1fr); }
}


/* ═════════════════════════════════════════════════════════════════════════
   05 — AI AUTOMATION FOR EVERY DEPARTMENT (vertical tabs)
   Tabs on the left, photo + copy + CTA + customer stats on the right.
   Click a tab to swap the content panel. The active tab shows a left rail
   indicator and richer text color; the panel crossfades to the new state.
   ═════════════════════════════════════════════════════════════════════════ */

.ap-tabs {
  padding: 96px 32px;
  background: var(--color-white);
}
.ap-tabs__inner { max-width: 1240px; margin: 0 auto; }
.ap-tabs__heading {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 500;
  margin: 0 0 40px;
  color: var(--color-neutral-100);
}
.ap-tabs__layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  align-items: start;
}

/* The tab list owns ONE shared rail indicator (a ::before pseudo-element).
   JS writes --rail-top and --rail-height onto .ap-tabs__list when a tab
   is activated, and the rail transitions to the new top/height — so the
   single bar physically slides from the previous active tab to the new
   one, passing every tab in between. This is the "indicator follows
   selection" pattern (Material Tabs, Stripe pricing).

   No more per-tab dividing lines — the rail does the work of saying
   "here's where you are." */
.ap-tabs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  --rail-top: 0px;
  --rail-height: 0px;
}
.ap-tabs__list::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--rail-top);
  height: var(--rail-height);
  width: 2px;
  background: var(--color-neutral-100);
  /* Slow-01 (520ms) makes the rail visibly travel across the list.
     Anything snappier loses the "tracing past every tab" feel he asked for. */
  transition: top var(--motion-slow-01) var(--ease-standard),
              height var(--motion-slow-01) var(--ease-standard);
  /* Hide before first measurement to prevent a flash at top with 0 height. */
  opacity: 0;
}
.ap-tabs__list.is-ready::before { opacity: 1; }

.ap-tabs__tab {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 12px 14px 20px;
  background: transparent;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-neutral-070);
  cursor: pointer;
  transition: color var(--motion-moderate-02) var(--ease-standard);
}
.ap-tabs__tab:hover { color: var(--color-neutral-100); }
.ap-tabs__tab[aria-selected="true"] { color: var(--color-neutral-100); font-weight: 600; }

/* Right-side glyph: chevron on inactive, icon on active.
   Both are rendered (icon first, then chevron) and toggled via opacity
   so they crossfade in place — same visual position, no layout shift. */
.ap-tabs__tab-glyph {
  margin-left: auto;
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-neutral-070);
}
.ap-tabs__tab-glyph > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity var(--motion-moderate-02) var(--ease-standard);
}
.ap-tabs__tab-glyph .ap-tabs__chevron { opacity: 1; }
.ap-tabs__tab-glyph .ap-tabs__icon    { opacity: 0; }
.ap-tabs__tab[aria-selected="true"] .ap-tabs__tab-glyph { color: var(--color-neutral-100); }
.ap-tabs__tab[aria-selected="true"] .ap-tabs__tab-glyph .ap-tabs__chevron { opacity: 0; }
.ap-tabs__tab[aria-selected="true"] .ap-tabs__tab-glyph .ap-tabs__icon    { opacity: 1; }

/* Panel area — true crossfade, not flicker.
   All panels are absolutely positioned at the same coordinates, so they
   stack on top of each other. They all sit at opacity 0 EXCEPT the active
   one. The crossfade duration is set longer (slow-01 / 520ms) so the
   incoming panel is already fading in WHILE the outgoing one is fading
   out. With an `ease-standard` curve and matching durations, the
   combined opacity sum stays close to ~1 across the entire transition —
   no perceived white flash.

   The container takes its height from the active panel's natural size.
   Because absolute panels are out of layout flow, we use a sizing trick:
   the .ap-tabs__panel-sizer holds the active panel in normal flow to
   give the wrapper its height. All panels still render (for cleanly
   measured layouts and image preload) but only the active one drives
   height. */
.ap-tabs__panels {
  position: relative;
  min-height: 300px; /* fallback before first panel measures */
}
.ap-tabs__panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-slow-01) var(--ease-standard),
              visibility 0s linear var(--motion-slow-01);
  pointer-events: none;
}
.ap-tabs__panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  position: relative;  /* active drives container height */
  transition: opacity var(--motion-slow-01) var(--ease-standard),
              visibility 0s linear 0s;
}
.ap-tabs__panel-image {
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-neutral-020);
  aspect-ratio: 16 / 11;
}
.ap-tabs__panel-image img { width: 100%; height: 100%; object-fit: cover; }
.ap-tabs__panel-content { padding-top: 4px; }
.ap-tabs__panel-title {
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  font-weight: 500;
  color: var(--color-neutral-100);
  margin: 0 0 16px;
}
.ap-tabs__panel-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-neutral-080);
  margin: 0 0 20px;
}

/* Arrow link (link-primary) — recipe: text + arrow shift 6px right on hover.
   This is the standard CTA throughout the page. */
.ap-link-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-blue-070);
  transition: color var(--motion-moderate-01) var(--ease-standard);
}
.ap-link-primary__arrow {
  display: inline-block;
  transition: transform var(--motion-moderate-02) var(--ease-entrance);
}
.ap-link-primary:hover { color: var(--color-blue-100); }
.ap-link-primary:hover .ap-link-primary__arrow { transform: translateX(6px); }

/* Customer proof row inside the panel — small logo + stat */
.ap-tabs__proof {
  display: flex;
  gap: 32px;
  margin-top: 28px;
  padding-top: 0;
}

/* Each proof item carries its own top hairline at rest. On hover, a
   2px near-black rail draws across from left to right at 520ms — same
   pattern as the iconcards in Section 04 (Protect/Stay/Scale). Reads
   as "this is a case study you can drill into." */
.ap-tabs__proof-item {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--color-neutral-030);
  cursor: pointer;
}
.ap-tabs__proof-item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-neutral-100);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-slow-01) var(--ease-standard);
}
.ap-tabs__proof-item:hover::before { transform: scaleX(1); }

.ap-tabs__proof-logo {
  height: 24px;
  display: flex;
  align-items: center;
}
.ap-tabs__proof-logo img {
  max-height: 100%;
  max-width: 100px;
  width: auto;
  filter: grayscale(40%);
  opacity: 0.85;
  transition: filter var(--motion-moderate-02) var(--ease-standard),
              opacity var(--motion-moderate-02) var(--ease-standard);
}
.ap-tabs__proof-item:hover .ap-tabs__proof-logo img {
  filter: grayscale(0);
  opacity: 1;
}
.ap-tabs__proof-stat {
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-neutral-080);
  margin: 0;
}
.ap-tabs__proof-stat strong {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-neutral-100);
  margin-bottom: 2px;
}


/* ═════════════════════════════════════════════════════════════════════════
   06 — PROTECT / STAY COMPLIANT / SCALE WITH CONFIDENCE (three-up)
   Three icon-led teaser cards. Top hairline echoes the dept-tabs rail
   (Section 05) — but rotated 90° to match the horizontal grid. The
   hairline starts as a thin neutral-030 line spanning the full card
   width. On hover, a near-black "rail" overlay draws across the top of
   that card from left to right, replacing the hairline visually. Same
   vocabulary as Section 05's vertical rail (single moving indicator
   responding to attention), applied to a different grid axis — that's
   the motion system speaking with one voice across different layouts.
   ═════════════════════════════════════════════════════════════════════════ */

.ap-iconcards {
  padding: 80px 32px;
  background: var(--color-white);
}
.ap-iconcards__inner { max-width: 1240px; margin: 0 auto; }
.ap-iconcards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.ap-iconcards__card {
  position: relative;
  padding: 24px 0 0;
  /* The default thin hairline — sits at the very top edge of each card. */
  border-top: 1px solid var(--color-neutral-030);
}
/* The "rail" overlay — 2px tall, sits ON TOP of the hairline (negative
   offset compensates for border-top thickness) and scales horizontally
   from 0 to 1 on hover. Same color and feel as the dept-tabs rail. */
.ap-iconcards__card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-neutral-100);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-slow-01) var(--ease-standard);
}
.ap-iconcards__card:hover::before {
  transform: scaleX(1);
}
.ap-iconcards__icon {
  width: 32px;
  height: 32px;
  margin-bottom: 16px;
  color: var(--color-neutral-100);
}
.ap-iconcards__icon img { width: 100%; height: 100%; }
.ap-iconcards__title {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--color-neutral-100);
  margin: 0 0 12px;
}
.ap-iconcards__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-neutral-080);
  margin: 0 0 20px;
}
.ap-iconcards__desc b { color: var(--color-neutral-100); font-weight: 600; }


/* ═════════════════════════════════════════════════════════════════════════
   07 — TRANSFORM YOUR PROCESSES WITH AI (disclosure list + testimonial)
   Left: heading + accordion list. Right: testimonial card.
   Accordion uses grid-template-rows 0fr→1fr trick — no JS measuring.
   ═════════════════════════════════════════════════════════════════════════ */

.ap-transform {
  padding: 80px 32px;
  background: var(--color-neutral-010);
}
.ap-transform__inner { max-width: 1240px; margin: 0 auto; }
.ap-transform__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.ap-transform__heading {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 500;
  color: var(--color-neutral-100);
  margin: 0;
}

/* Disclosure list */
.ap-disclosure {
  display: flex;
  flex-direction: column;
}
.ap-disclosure__item {
  border-top: 1px solid var(--color-neutral-030);
}
.ap-disclosure__item:last-child { border-bottom: 1px solid var(--color-neutral-030); }
.ap-disclosure__button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  color: var(--color-neutral-090);
  cursor: pointer;
  gap: 12px;
  transition: color var(--motion-moderate-02) var(--ease-standard);
}
.ap-disclosure__button:hover { color: var(--color-neutral-100); }
.ap-disclosure__button[aria-expanded="true"] {
  color: var(--color-neutral-100);
  font-weight: 600;
}

/* Left-side glyph — same pattern as dept tabs:
   chevron when collapsed, icon when expanded. Both stacked in a
   16×16 box, opacity toggles between them. The icon's stroke uses
   currentColor so it picks up the active text color. */
.ap-disclosure__glyph {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-neutral-070);
  transition: color var(--motion-moderate-02) var(--ease-standard);
}
.ap-disclosure__glyph > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity var(--motion-moderate-02) var(--ease-standard);
}
.ap-disclosure__glyph .ap-disclosure__chevron { opacity: 1; }
.ap-disclosure__glyph .ap-disclosure__icon    { opacity: 0; }
.ap-disclosure__button[aria-expanded="true"] .ap-disclosure__glyph { color: var(--color-neutral-100); }
.ap-disclosure__button[aria-expanded="true"] .ap-disclosure__glyph .ap-disclosure__chevron { opacity: 0; }
.ap-disclosure__button[aria-expanded="true"] .ap-disclosure__glyph .ap-disclosure__icon    { opacity: 1; }

/* The grid-rows 0fr→1fr accordion trick.
   The outer .ap-disclosure__body has grid-template-rows: 0fr at rest
   and 1fr when active. The inner wrapper has min-height: 0; overflow:
   hidden — so its rendered height collapses to 0 when the row is 0fr
   and expands to natural content height when 1fr. This animates from
   actual content height with no JS measuring. */
.ap-disclosure__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--motion-moderate-02) var(--ease-standard);
}
.ap-disclosure__button[aria-expanded="true"] + .ap-disclosure__body {
  grid-template-rows: 1fr;
}
.ap-disclosure__body-inner {
  overflow: hidden;
  min-height: 0;
}
.ap-disclosure__body-inner-padded {
  /* Indent body content to align with the title text (past the 16+12px
     glyph + gap), so it reads as belonging to its row, not the margin. */
  padding-left: 28px;
}
.ap-disclosure__body-inner p {
  margin: 0 0 16px;
  padding-right: 32px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-neutral-080);
}
.ap-disclosure__body-inner .ap-link-primary {
  margin-bottom: 18px;
}

/* Testimonial card on right */
.ap-testimonial {
  background: var(--color-white);
  border: 1px solid var(--color-neutral-030);
  border-radius: 8px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ap-testimonial__logo { height: 36px; }
.ap-testimonial__logo img { height: 100%; width: auto; }
.ap-testimonial__quote {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-neutral-090);
  margin: 0;
  font-style: italic;
}
.ap-testimonial__attribution {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.ap-testimonial__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-neutral-020);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.ap-testimonial__person { font-size: 13px; line-height: 1.4; }
.ap-testimonial__person-title { color: var(--color-neutral-070); }
.ap-testimonial__person-name { color: var(--color-neutral-100); font-weight: 600; }


/* ═════════════════════════════════════════════════════════════════════════
   08 — SAFE, RELIABLE AI NEEDS A PROCESS PLATFORM (disclosure + diagram)
   Same disclosure recipe as section 07. Diagram on the right swaps
   between figure-images as the disclosure selection changes.
   ═════════════════════════════════════════════════════════════════════════ */

.ap-platform {
  padding: 96px 32px;
  background: var(--color-white);
}
.ap-platform__inner { max-width: 1240px; margin: 0 auto; }
.ap-platform__heading {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 500;
  color: var(--color-neutral-100);
  margin: 0 0 8px;
  max-width: 720px;
}
.ap-platform__intro {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-neutral-080);
  margin: 0 0 12px;
  max-width: 720px;
}
.ap-platform__cta { margin-bottom: 48px; }
.ap-platform__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}
.ap-platform__diagram {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-neutral-010);
  border-radius: 8px;
  overflow: hidden;
}
.ap-platform__diagram-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 24px;
  opacity: 0;
  transition: opacity var(--motion-moderate-02) var(--ease-standard);
}
.ap-platform__diagram-img.is-active { opacity: 1; }


/* ═════════════════════════════════════════════════════════════════════════
   09 — APPIAN IS TRUSTED BY LEADERS IN [INSURANCE] (video carousel)
   Featured video card on the left (no rounded border highlight), three
   customer-story rows on the right separated by hairlines. The hairline
   ABOVE the active row doubles as the progress indicator — it fills blue
   left-to-right over 6 seconds. Title "like insurance" swaps to whichever
   industry corresponds to the currently active OR hovered card.
   ═════════════════════════════════════════════════════════════════════════ */

.ap-video {
  padding: 96px 32px;
  background: var(--color-white);
}
.ap-video__inner { max-width: 1240px; margin: 0 auto; }
.ap-video__heading {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 500;
  margin: 0 0 32px;
  color: var(--color-neutral-100);
}
/* The industry word in the title gets swapped on hover or rotate.
   JS fades the span to 0, swaps textContent, fades back to 1 — gives
   the swap a soft 500ms crossfade rather than a jarring jump. */
.ap-video__industry {
  display: inline-block;
  opacity: 1;
  transition: opacity var(--motion-moderate-02) var(--ease-standard),
              color var(--motion-moderate-02) var(--ease-standard);
}
.ap-video__industry.is-swapping {
  opacity: 0;
}

.ap-video__layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: stretch;
}

/* The featured player — flat surface, gentle 8px corners. */
.ap-video__player {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--color-neutral-100);
  border-radius: 8px;
  overflow: hidden;
}
.ap-video__player-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--motion-slow-01) var(--ease-standard);
}
.ap-video__player-image.is-active { opacity: 1; }
.ap-video__player-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
}
/* Stack: play button → headline → industry pill */
.ap-video__player-foot {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  z-index: 2;
}
.ap-video__player-play {
  width: 44px;
  height: 44px;
  background: var(--color-blue-070);
  border: none;
  border-radius: 4px;     /* square-ish, NOT round */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--motion-moderate-02) var(--ease-standard);
}
.ap-video__player-play:hover { background: var(--color-blue-080); }
.ap-video__player-play svg { color: var(--color-white); }

.ap-video__player-headline {
  color: var(--color-white);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 500;
  max-width: 580px;
  margin: 0;
}
.ap-video__player-industry {
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  font-weight: 500;
  margin: 0;
}

.ap-video__tabs {
  display: flex;
  flex-direction: column;
  align-self: stretch; /* span the player's height in the grid */
}
.ap-video__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  flex: 1; /* split the column height evenly across the three rows */
  padding: 24px 0;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

/* Each tab carries one top hairline. The hairline serves double-duty:
   - On inactive rows, it's just the row's top edge (neutral-030)
   - On the active row, it animates to a blue progress bar that fills
     left-to-right over 6s
   No bottom borders — single line per boundary keeps the layout clean. */
.ap-video__tab::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-neutral-030);
}
.ap-video__tab::after {
  /* Blue progress bar overlays the top hairline of the active row only. */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-blue-070);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
.ap-video__tab[aria-selected="true"]::after {
  animation: ap-video-progress 6s linear forwards;
}
.ap-video__tabs.is-paused .ap-video__tab[aria-selected="true"]::after {
  animation-play-state: paused;
}
@keyframes ap-video-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Vertical stack: logo on top row, stat row below it. */
.ap-video__tab-logo {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.ap-video__tab-logo img {
  max-height: 100%;
  max-width: 140px;
  width: auto;
  object-fit: contain;
}
.ap-video__tab-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ap-video__tab-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-neutral-080);
  font-weight: 500;
}
.ap-video__tab[aria-selected="true"] .ap-video__tab-stat {
  color: var(--color-neutral-100);
  font-weight: 600;
}
.ap-video__tab-stat-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-neutral-070);
  opacity: 0;
  transition: opacity var(--motion-moderate-02) var(--ease-standard);
}
.ap-video__tab[aria-selected="true"] .ap-video__tab-stat-icon {
  color: var(--color-neutral-100);
  opacity: 1;
}


/* ═════════════════════════════════════════════════════════════════════════
   10 — EBOOK / ANALYST REPORT / GUIDE (three resource cards)
   ═════════════════════════════════════════════════════════════════════════ */

.ap-resources {
  padding: 96px 32px;
  background: var(--color-white);
}
.ap-resources__inner { max-width: 1240px; margin: 0 auto; }
.ap-resources__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ap-resources__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-030);
  border-radius: 8px;
  transition: border-color var(--motion-moderate-02) var(--ease-standard);
}
.ap-resources__card:hover { border-color: var(--color-neutral-100); }
.ap-resources__pretitle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-070);
  margin: 0;
}
.ap-resources__pretitle svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.ap-resources__image {
  aspect-ratio: 16 / 10;
  background: var(--color-neutral-010);
  border-radius: 6px;
  overflow: hidden;
}
.ap-resources__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ap-resources__title {
  font-size: 17px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--color-neutral-100);
  margin: 0;
}
.ap-resources__desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-neutral-080);
  margin: 0;
}
.ap-resources__card .ap-link-primary { margin-top: auto; }


/* ═════════════════════════════════════════════════════════════════════════
   11 — START YOUR AI REVOLUTION WITH APPIAN (final CTA)
   Light gradient block with title, two buttons, then recognition badges.
   ═════════════════════════════════════════════════════════════════════════ */

.ap-finalcta {
  padding: 96px 32px 64px;
  background: linear-gradient(180deg, var(--color-neutral-010) 0%, var(--color-neutral-020) 100%);
  text-align: center;
}
.ap-finalcta__inner { max-width: 1240px; margin: 0 auto; }
.ap-finalcta__heading {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 500;
  margin: 0 0 32px;
  color: var(--color-neutral-100);
}
.ap-finalcta__ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

/* Final-CTA buttons read larger than header buttons — they're the
   page's closing moment, so they take more presence. Bump padding +
   font-size while preserving the same radius + family. Scoped to
   .ap-finalcta so the header versions stay header-sized. */
.ap-finalcta .ap-btn {
  padding: 14px 28px;
  font-size: 16px;
}

/* Contact Us — primary blue, white text. Already correct from .ap-btn--primary
   defaults; no override needed. */

/* Explore Platform → matches Join a Demo exactly. White/transparent bg,
   neutral-030 border, near-black text. Hover: subtle neutral-010 fill +
   slightly darker border. Same ghost pattern, applied at final-CTA scale. */
.ap-finalcta .ap-btn--secondary {
  background: var(--color-white);
  border-color: var(--color-neutral-030);
  color: var(--color-neutral-100);
}
.ap-finalcta .ap-btn--secondary:hover {
  background: var(--color-neutral-010);
  border-color: var(--color-neutral-050);
  color: var(--color-neutral-100);
}
.ap-finalcta__badges {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.ap-finalcta__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 68px;
  width: 68px;
  opacity: 0.9;
  transition: opacity var(--motion-moderate-02) var(--ease-standard);
}
.ap-finalcta__badge:hover { opacity: 1; }
.ap-finalcta__badge img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}


/* ─── Responsive overrides for new sections ─── */
@media (max-width: 1024px) {
  .ap-tabs__layout { grid-template-columns: 1fr; gap: 32px; }
  .ap-tabs__panel { grid-template-columns: 1fr; gap: 24px; }
  .ap-iconcards__grid { grid-template-columns: 1fr; gap: 24px; }
  .ap-transform__grid { grid-template-columns: 1fr; }
  .ap-platform__grid { grid-template-columns: 1fr; gap: 32px; }
  .ap-video__layout { grid-template-columns: 1fr; }
  .ap-resources__grid { grid-template-columns: 1fr; }
}


/* ─── Responsiveness ─── */
@media (max-width: 1024px) {
  .ap-hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .ap-hero__cards { justify-self: stretch; max-width: none; }
  .ap-hero__title { font-size: 48px; }
  .spec-cover { padding: 64px 32px 48px; }
  .spec-cover__title { font-size: 40px; }
  .spec-section-header,
  .spec-stage { padding-left: 32px; padding-right: 32px; }
  .spec-meta { grid-template-columns: repeat(2, 1fr); }
  .ap-header { padding: 0 20px; height: auto; min-height: 64px; flex-wrap: wrap; }
  .ap-nav { display: none; }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}