/* ============================================================
   Industry page template — shared by every /industries/<name>/ page.
   The mini-system: "the sector dossier" — light, editorial,
   oversized type, no photos, sibling of the product template
   (product.css) but inverted: it opens BRIGHT and closes dark.

   Section order (identical across all 7 pages):
     1. ind-hero        dark split — ink copy panel (kicker, display title,
                        sub, CTAs, proof stats at the foot) · aurora visual
                        with rotating glass solution cards + dots
     2. ind-logos       light band — LogoMarquee (own section, per
                        the documented wi-trusted-by pattern)
     3. ind-pressures   dark, rich black — numbered hairline rows
     4. ind-solutions   light — use-case cards linking to local pages
     5. ind-story       light grey tint — one real customer story
     6. trust-band      dark — the unified TrustBand (components/trust-band.css)
     7. ind-cta         bright band — the home's aurora CTA card (c-ctafx)

   Scope: every rule starts with .p-industry (shared page root —
   deliberate: sibling /industries/ routes load this one stylesheet).
   Per-industry hooks hang off a .p-industry--<slug> modifier.
   ============================================================ */

.p-industry {
  background: var(--color-background);
  color: var(--color-foreground);
}

/* ---------- shared primitives ---------- */

/* plain mono-feel kicker — no pill, no dot (matches the home's x3-label) */
.p-industry .ind-kicker {
  font-family: var(--font-sans);
  font-size: var(--fs-kicker);
  letter-spacing: var(--track-wide);
  color: var(--color-kicker-on-white);
}
.p-industry .ind-kicker--ondark {
  color: rgba(255, 255, 255, 0.5);
}

/* section title ramp — editorial, a step larger than the product pages.
   No width cap (Sofia, 2026-08-05: section titles hold ONE line on
   desktop — the old 22ch cap broke "A new era of fraud for financial
   institutions" in two); balance still governs the narrow-viewport wrap */
.p-industry .ind-title {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tighter);
  font-size: 28px;
  line-height: 1.05;
  color: var(--color-black);
  text-wrap: balance;
}
@media (min-width: 640px) { .p-industry .ind-title { font-size: 34px; } }
@media (min-width: 768px) { .p-industry .ind-title { font-size: 40px; } }
.p-industry .ind-title--ondark { color: var(--color-white); }

.p-industry .ind-intro {
  margin-top: 16px;
  max-width: 640px;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-grey-on-white);
}
.p-industry .ind-intro--ondark { color: rgba(255, 255, 255, 0.7); }

/* shared section inner */
.p-industry .ind-inner {
  margin-inline: auto;
  max-width: var(--container-large);
  padding: var(--space-section-sm) var(--space-inline);
}
@media (min-width: 768px) { .p-industry .ind-inner { padding-block: var(--space-section); } }
@media (min-width: 1024px) { .p-industry .ind-inner { padding-inline: 24px; } }
.p-industry .ind-btn-ghost {
  height: 44px;
  padding-inline: 24px;
  border-radius: var(--radius-lg);
}

/* ---------- 1 · hero (illoca-ref layout, Sofia 2026-07-30) ----------
   Centered display copy on the bright top (stacked glyph + kicker,
   balanced title, sub, CTA row), then the aurora visual as a FULL-WIDTH
   band filling to the fold — small side gutters, top corners rounded,
   the industry's solutions rotating as the floating glass card, and the
   proof stats riding the band's foot as a white overlay row. */
.p-industry .ind-hero {
  position: relative;
  min-height: 100svh;
  background: var(--color-background);
  color: var(--color-foreground);
}
/* runway mode (added by industry-hero.js, skipped on reduced motion):
   the hero grows a pinned scroll runway — the media card expands from
   its grid cell to full-bleed as the reader scrolls (the zetta-joule
   hero interaction), then the page releases */
.p-industry .ind-hero.is-runway { height: 220svh; }
.p-industry .ind-hero__stage {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  overflow: hidden;
}
.p-industry .ind-hero.is-runway .ind-hero__stage { height: 100svh; }
/* in runway mode the inner must NOT be a positioning context — the
   full-bleed media (absolute, inset 0) has to resolve against the sticky
   stage, not the grid */
.p-industry .ind-hero.is-runway .ind-hero__inner { position: static; }
/* the split (zetta-joule ref, Sofia 2026-07-30): copy left, the sector's
   rounded media card right; the proof strip rides the hero's foot */
.p-industry .ind-hero__inner {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  width: 100%;
  margin-inline: auto;
  max-width: var(--container-large);
  padding: 124px 20px 0;
}
@media (min-width: 640px) { .p-industry .ind-hero__inner { padding-top: 140px; } }
@media (min-width: 1024px) {
  .p-industry .ind-hero__inner {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 64px;
    padding-inline: 32px;
  }
}
.p-industry .ind-hero__copy { min-width: 0; }

/* sector identity: glyph tile beside the industry-name kicker */
.p-industry .ind-hero__id {
  display: flex;
  align-items: center;
  gap: 12px;
}
.p-industry .ind-hero__kicker {
  color: var(--color-kicker-on-white);
}
.p-industry .ind-hero__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 106, 255, 0.2);
  background: rgba(0, 106, 255, 0.06);
  color: var(--color-blue);
}
.p-industry .ind-hero__glyph .ds-icon { width: 20px; height: 20px; }

.p-industry .ind-hero__title {
  margin-top: 24px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tightest);
  font-size: clamp(38px, 7vw, 52px);
  line-height: 1.02;
  color: var(--color-black);
  text-wrap: balance;
}
@media (min-width: 1024px) { .p-industry .ind-hero__title { font-size: clamp(40px, 3.6vw, 54px); } }

.p-industry .ind-hero__sub {
  margin-top: 20px;
  max-width: 52ch;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-grey-on-white);
}
.p-industry .ind-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* the media card: rounded sector illustration; the art is oversized and
   drifts vertically inside (--indpy). In runway mode the card leaves the
   grid: it renders FULL-BLEED in the stage and a measured clip-path
   frames it back to its slot rect — scrolling relaxes the clip to zero,
   so the card grows to fill the viewport with no image distortion (the
   home CTA's ctafx technique, reversed). */
.p-industry .ind-hero__slot { display: none; }
.p-industry .ind-hero__media {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3.1;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  background: var(--color-black);
  box-shadow: none;
}
.p-industry .ind-hero.is-runway .ind-hero__slot {
  display: block;
  min-width: 0;
  aspect-ratio: 4 / 3.1;
}
.p-industry .ind-hero.is-runway .ind-hero__media {
  position: absolute;
  inset: 0;
  z-index: 2;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: inset(
    var(--ind-t, 20%) var(--ind-r, 4%) var(--ind-b, 20%) var(--ind-l, 52%)
    round var(--ind-rad, 24px)
  );
  will-change: clip-path;
}
/* the copy and the proof strip glide away while the card takes over */
.p-industry .ind-hero.is-runway .ind-hero__copy,
.p-industry .ind-hero.is-runway .ind-hero__proofwrap {
  opacity: calc(1 - var(--indp, 0) * 2.6);
  transform: translate3d(0, calc(var(--indp, 0) * -70px), 0);
  will-change: opacity, transform;
}
.p-industry .ind-hero.is-past .ind-hero__copy { pointer-events: none; }
.p-industry .ind-hero__photo {
  position: absolute;
  top: -8%;
  left: 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  transform: translate3d(0, calc(var(--indpy, 0) * 1%), 0);
  will-change: transform;
  user-select: none;
}

/* proof stats: a bright strip on the hero's foot (hairline above); the
   ind-logos curtain overlaps the foot by 20/32px, the bottom padding
   keeps the captions clear of the seam */
.p-industry .ind-hero__proofwrap {
  width: 100%;
  margin-inline: auto;
  max-width: var(--container-large);
  padding-inline: 20px;
}
@media (min-width: 1024px) { .p-industry .ind-hero__proofwrap { padding-inline: 32px; } }
.p-industry .ind-hero__proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 28px;
  margin-top: 48px;
  padding: 22px 0 64px;
  border-top: 1px solid var(--color-border-light);
}
@media (min-width: 900px) {
  .p-industry .ind-hero__proof {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px 56px;
    padding: 24px 0 72px;
  }
}
.p-industry .ind-hero__note {
  margin-bottom: 6px;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wider);
  color: var(--color-grey-on-white);
}
.p-industry .ind-hero__value {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tighter);
  font-size: 32px;
  line-height: 1;
  color: var(--color-black);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .p-industry .ind-hero__value { font-size: 38px; } }
.p-industry .ind-hero__cap {
  margin-top: 8px;
  max-width: 26ch;
  font-size: var(--fs-xs);
  line-height: var(--leading-snug);
  color: var(--color-grey-on-white);
  text-wrap: balance;
}

/* ---------- 2 · logos (own light band — documented pattern) ---------- */
.p-industry .ind-logos {
  background: var(--color-background);
  border-bottom: 1px solid var(--color-border-light);
  /* the home's rounded-curtain seam (x3.css chapter seams; Sofia,
     2026-07-28 hero audit): the page opens over the hero's dark visual
     panel on rounded top corners, connecting the split hero to the same
     flow language as every other page */
  position: relative;
  z-index: 1;
  margin-top: -20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
@media (min-width: 768px) {
  .p-industry .ind-logos {
    margin-top: -32px;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
  }
}
.p-industry .ind-logos__inner {
  margin-inline: auto;
  max-width: var(--container-large);
  padding: 40px 20px;
}
@media (min-width: 640px) { .p-industry .ind-logos__inner { padding-block: 56px; } }
@media (min-width: 1024px) { .p-industry .ind-logos__inner { padding-inline: 32px; } }
.p-industry .ind-logos__label {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-grey-on-white);
  margin-bottom: 24px;
}

/* ---------- chapter seams (Sofia, 2026-08-05: "add the rounded corner
   treatment to the sections on all industries") ----------
   Every change of ground opens on the home's rounded curtain edge:
   pressures over the light band, solutions over the dark, the story
   tint over solutions, and the closing aurora CTA over the TrustBand
   (which brings its own seam via <TrustBand seam />). The covered
   sections give the overlap back as bottom padding so their closing
   content keeps its air. */
.p-industry .ind-stats,
.p-industry .ind-pressures,
.p-industry .ind-solutions,
.p-industry .ind-defense,
.p-industry .ind-story,
.p-industry .c-cta {
  position: relative;
  margin-top: -20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
@media (min-width: 768px) {
  .p-industry .ind-stats,
  .p-industry .ind-pressures,
  .p-industry .ind-solutions,
  .p-industry .ind-defense,
  .p-industry .ind-story,
  .p-industry .c-cta {
    margin-top: -32px;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
  }
}
.p-industry .ind-logos,
.p-industry .ind-stats,
.p-industry .ind-pressures,
.p-industry .ind-solutions,
.p-industry .ind-defense,
.p-industry .ind-story { padding-bottom: 20px; }
@media (min-width: 768px) {
  .p-industry .ind-logos,
  .p-industry .ind-stats,
  .p-industry .ind-pressures,
  .p-industry .ind-solutions,
  .p-industry .ind-defense,
  .p-industry .ind-story { padding-bottom: 32px; }
}

/* ---------- 3 · pressures (dark, rich black, numbered rows) ---------- */
/* pressures = a LIGHT card grid (Sofia, 2026-08-05: like the home
   platform cards — icon + title + subtitle, no visuals, not clickable;
   the numbered dark hairline rows live in git) */
.p-industry .ind-pressures {
  /* PROBLEM register (Sofia, 2026-08-07): the section is the industry's
     threat statement, so the aurora goes RED — same recipe, the real red
     tokens instead of the blues; flat ink base (static contrast checkers
     can't resolve gradients) with a red bloom falling from the top-left
     and a dimmer red breath at the foot */
  background-color: var(--color-black);
  background-image:
    radial-gradient(90% 70% at 12% 0%, color-mix(in oklab, var(--color-red-500) 28%, transparent), transparent 62%),
    radial-gradient(80% 60% at 92% 100%, color-mix(in oklab, var(--color-red-400) 14%, transparent), transparent 65%);
  color: var(--color-white);
}
/* the bright caps chapter (How Incode helps, the shared sol-caps
   composition) opens over the dark band on the rounded curtain — the
   site-wide chapter-seam motif; the covered chapter gives the overlap
   back as bottom padding */
.p-industry .ind-pressures { padding-bottom: 20px; }
@media (min-width: 768px) {
  .p-industry .ind-pressures { padding-bottom: 32px; }
}
.p-industry .p-solution .sol-caps {
  position: relative;
  margin-top: -20px;
  border-top: 0;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
@media (min-width: 768px) {
  .p-industry .p-solution .sol-caps {
    margin-top: -32px;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
  }
}
.p-industry .ind-pressures .ind-kicker { color: rgba(255, 255, 255, 0.55); }
/* wider than the 640px intro cap so the deck's two-sentence intro holds
   TWO lines — "(Deloitte)" rides line 2, not a stranded third (Sofia,
   2026-08-10) */
.p-industry .ind-pressures .ind-intro { max-width: 820px; }
.p-industry .ind-pressures .ind-title { color: var(--color-white); }
.p-industry .ind-pressures .ind-intro { color: rgba(255, 255, 255, 0.7); }
.p-industry .ind-pressures__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 40px;
}
@media (min-width: 640px) { .p-industry .ind-pressures__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .p-industry .ind-pressures__grid { grid-template-columns: repeat(4, 1fr); } }
.p-industry .ind-pressure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 24px;
  /* dark glass tiles on the aurora ground (the trust-stack idiom) */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}
.p-industry .ind-pressure__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  /* on-ink tint (the hero-glyph recipe) — red with the problem register */
  background: color-mix(in oklab, var(--color-red-500) 26%, transparent);
  color: var(--color-red-300);
}
.p-industry .ind-pressure__icon svg,
.p-industry .ind-pressure__icon span,
.p-industry .ind-pressure__icon img { width: 20px; height: 20px; }
.p-industry .ind-pressure__name {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tighter);
  font-size: 19px;
  line-height: 1.2;
  color: var(--color-white);
}
.p-industry .ind-pressure__line {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  text-wrap: pretty;
}

/* ---------- 4 · solutions (light use-case card grid) ---------- */
.p-industry .ind-solutions {
  background: var(--color-background);
}
.p-industry .ind-solutions__grid {
  display: grid;
  gap: 16px;
  margin-top: 40px;
}
@media (min-width: 640px) { .p-industry .ind-solutions__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .p-industry .ind-solutions__grid { grid-template-columns: repeat(4, 1fr); } }
.p-industry .ind-sol {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  background: var(--color-grey-50);
  padding: 24px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.p-industry .ind-sol:hover {
  border-color: color-mix(in oklab, var(--color-blue) 30%, transparent);
  box-shadow: none;
  transform: translateY(-2px);
}
.p-industry .ind-sol__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  background: color-mix(in oklab, var(--color-grey-100) 70%, transparent);
  color: var(--color-grey-500);
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.p-industry .ind-sol:hover .ind-sol__icon {
  border-color: color-mix(in oklab, var(--color-blue) 30%, transparent);
  background: color-mix(in oklab, var(--color-blue) 8%, transparent);
  color: var(--color-blue);
}
.p-industry .ind-sol__icon .ds-icon {
  width: 18px;
  height: 18px;
}
.p-industry .ind-sol__name {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  font-size: var(--fs-xl);
  line-height: 1.2;
  color: var(--color-black);
}
.p-industry .ind-sol__line {
  font-size: var(--fs-sm);
  line-height: var(--leading-snug);
  color: var(--color-grey-on-white);
}
.p-industry .ind-sol__more {
  margin-top: auto;
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-blue);
}

/* ---------- 5 · story (light grey tint, one real customer) ----------
   Content centers with the client logo under the statement, mirroring
   the ProductQuote order (Sofia, 2026-08-05). The old top hairline is
   gone — the section now opens on the rounded seam instead. */
.p-industry .ind-story {
  background: var(--color-grey-100);
  border-bottom: 1px solid var(--color-border-light);
}
.p-industry .ind-story .ind-inner { text-align: center; }
.p-industry .ind-story__text {
  margin: 28px auto 0;
  max-width: 820px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tighter);
  font-size: var(--fs-3xl);
  line-height: 1.4;
  color: var(--color-black);
  text-wrap: pretty;
}
.p-industry .ind-story__logo {
  display: block;
  margin: 28px auto 0;
  height: var(--logo-h, 28px);
  width: auto;
}
@media (min-width: 640px) { .p-industry .ind-story__text { font-size: 28px; } }
.p-industry .ind-story__customer {
  margin-top: 24px;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  color: var(--color-grey-on-white);
}
.p-industry .ind-story__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}
.p-industry .ind-story__link:hover { color: var(--color-blue-500); }

/* 6 · trust and compliance: .ind-compliance* / .ind-cert / .ind-chip retired — the section is now the shared TrustBand (components/trust-band.css). */

/* ============================================================
   Centered animated hero (.ih-hero) — the financial-services design
   promoted to THE industry template (Sofia, 2026-08-05): the sector
   illustration opens centered in the viewport, holds a beat, rises to
   its seat, and the copy reveals beneath. Markup:
   components/IndustryHero.astro. The old zetta split hero lives in git.
   ============================================================ */

.p-industry .ih-hero {
  display: flex;
  align-items: center;
  /* + the logo band's rounded-seam overlap (20/32px): without it the
     band peeks into the first viewport */
  min-height: calc(100svh - var(--hl-seat, 0px) + 20px);
  background: var(--color-background);
  color: var(--color-foreground);
  /* the page OPENS DARK (the old zetta heroes' ground, Sofia 2026-08-05:
     "take that back") — ink while the illustration holds centre, then a
     crossfade to bright as the art rises and the copy reveals */
  animation: ih-ground 2.4s var(--ease-out-expo, ease) both;
}
@keyframes ih-ground {
  0%, 46% { background-color: var(--color-black); }
  88%, 100% { background-color: var(--color-background); }
}
@media (min-width: 768px) {
  .p-industry .ih-hero {
    min-height: calc(100svh - var(--hl-seat, 0px) + 32px);
  }
}
.p-industry .ih-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-inline: auto;
  width: 100%;
  max-width: var(--container-large);
  /* top padding runs HEAVIER than the foot on purpose — the composition
     seats a notch below viewport centre so the art keeps clear air under
     the nav (Sofia, 2026-08-10: "too close to the nav") */
  padding: 120px var(--space-inline) 92px;
  text-align: center;
}
@media (min-width: 768px) {
  .p-industry .ih-hero__inner { padding-bottom: 104px; }
}

/* the illustration: in from nothing at the hero's centre, then up.
   The +140px hold IS the viewport-centre seat ((gap + copy height) / 2);
   0 is the final seat above the copy. */
/* the art SLOT is a fixed-height container and every illustration
   BOTTOM-ALIGNS inside it (viewBoxes are tight-fitted to the drawing),
   so the artwork-to-kicker gap is identical on every industry page
   (Sofia, 2026-08-05: "use a container … so the placement is
   consistent") */
.p-industry .ih-hero__art {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 168px;
  animation: ih-art 2.4s var(--ease-out-expo, ease) both;
}
@media (min-width: 768px) {
  .p-industry .ih-hero__art { height: 208px; }
}
.p-industry .ih-hero__art svg {
  /* tight-fitted viewBoxes + upward ambient floats: without this the
     back layers clip at the viewBox top mid-float (2026-08-07) */
  overflow: visible;
  display: block;
  height: 100%;
  width: auto;
  max-width: 76vw;
}
/* element-by-element build while the ground is DARK (Sofia, 2026-08-05:
   "take that back"): every top-level piece pops in sequence during the
   hold, finishing as the brightening begins. Ambient loops compose onto
   the same declaration via --ih-ambient so both coexist. */
.p-industry .ih-hero__art svg > *,
.p-industry .ih-hero__art svg .ih-drift,
.p-industry .ih-hero__art svg .ih-wave-pan,
.p-industry .ih-hero__art svg .ih-float,
.p-industry .ih-hero__art svg .ih-pulse,
.p-industry .ih-hero__art svg .ih-fade-a,
.p-industry .ih-hero__art svg .ih-fade-b,
.p-industry .ih-hero__art svg .ih-fade-c,
.p-industry .ih-hero__art svg .ih-sway,
.p-industry .ih-hero__art svg .ih-sine,
.p-industry .ih-hero__art svg .ih-nudge,
.p-industry .ih-hero__art svg .ih-step-turn,
.p-industry .ih-hero__art svg .ih-spin,
.p-industry .ih-hero__art svg .ih-pendulum,
.p-industry .ih-hero__art svg .ih-o-breathe,
.p-industry .ih-hero__art svg .ih-darken-a,
.p-industry .ih-hero__art svg .ih-darken-b,
.p-industry .ih-hero__art svg .ih-darken-c,
.p-industry .ih-hero__art svg .ih-breathe-a,
.p-industry .ih-hero__art svg .ih-breathe-b,
.p-industry .ih-hero__art svg .ih-breathe-c,
.p-industry .ih-hero__art svg .ih-breathe-d {
  transform-box: fill-box;
  animation:
    ih-el 0.55s var(--ease-out-expo, ease) var(--ih-el-delay, 0.12s) both,
    var(--ih-ambient, ih-none);
}
@keyframes ih-el {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ih-none {
  from { opacity: 1; }
  to { opacity: 1; }
}
.p-industry .ih-hero__art svg > :nth-child(1) { --ih-el-delay: 0.1s; }
.p-industry .ih-hero__art svg > :nth-child(2) { --ih-el-delay: 0.19s; }
.p-industry .ih-hero__art svg > :nth-child(3) { --ih-el-delay: 0.28s; }
.p-industry .ih-hero__art svg > :nth-child(4) { --ih-el-delay: 0.37s; }
.p-industry .ih-hero__art svg > :nth-child(5) { --ih-el-delay: 0.46s; }
.p-industry .ih-hero__art svg > :nth-child(6) { --ih-el-delay: 0.55s; }
.p-industry .ih-hero__art svg > :nth-child(7) { --ih-el-delay: 0.64s; }
.p-industry .ih-hero__art svg > :nth-child(8) { --ih-el-delay: 0.73s; }
.p-industry .ih-hero__art svg > :nth-child(9) { --ih-el-delay: 0.82s; }
.p-industry .ih-hero__art svg > :nth-child(10) { --ih-el-delay: 0.91s; }
@keyframes ih-art {
  0%   { opacity: 0; transform: translateY(156px) scale(0.96); }
  26%  { opacity: 1; transform: translateY(140px) scale(1); }
  58%  { opacity: 1; transform: translateY(140px) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- shared ambient primitives: the vector stays ALIVE after the
   entrance. Tag illustration parts with these; every loop is seamless
   (keyframes return to their start at zero velocity, drifts translate
   exactly one period). --- */
.p-industry .ih-float {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  --ih-ambient: ih-float 2s cubic-bezier(0.6, 0, 0.4, 1) 2.4s infinite alternate;
}
@keyframes ih-float {
  /* starts AT the settled position so the loop's first frame matches the
     entrance's last — no hop at the 2.4s handoff */
  from { transform: translateY(0); }
  to   { transform: translateY(-32px); }
}
/* depth-scaled amplitudes for the stagger tiers: near layers travel
   further than far ones — the motion-parallax cue (approved on the
   experiences/healthcare test bench, 2026-08-07) */
@keyframes ih-float-mid {
  from { transform: translateY(0); }
  to   { transform: translateY(-23px); }
}
@keyframes ih-float-far {
  from { transform: translateY(0); }
  to   { transform: translateY(-16px); }
}
/* stagger modifiers: same float, phase-shifted starts — layer several
   floats and the composition ripples through depth instead of bobbing
   in unison (still seam-correct: each starts at rest) */
.p-industry {
  --ih-stagger: 0.5s; /* THE depth-ripple step — one value, all industries */
}
.p-industry .ih-float--s2 {
  --ih-ambient: ih-float-mid 2s cubic-bezier(0.6, 0, 0.4, 1)
    calc(2.4s + var(--ih-stagger)) infinite alternate;
}
.p-industry .ih-float--s3 {
  --ih-ambient: ih-float-far 2s cubic-bezier(0.6, 0, 0.4, 1)
    calc(2.4s + 2 * var(--ih-stagger)) infinite alternate;
}
.p-industry .ih-o-breathe {
  --ih-ambient: ih-o-breathe 3.4s ease-in-out 2.4s infinite;
}
/* gentle opacity breathe: softer than ih-fade (0.55 floor vs 0.3),
   starts and ends at the settled full opacity */
@keyframes ih-o-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
/* phase-stepped variants for sequential breathing across siblings */
.p-industry .ih-o-breathe--s2 {
  --ih-ambient: ih-o-breathe 3.4s ease-in-out 3s infinite;
}
.p-industry .ih-o-breathe--s3 {
  --ih-ambient: ih-o-breathe 3.4s ease-in-out 3.6s infinite;
}
.p-industry .ih-nudge {
  transform-box: fill-box;
  --ih-ambient: ih-nudge 2.8s ease-in-out 2.4s infinite;
}
/* two quick pokes toward the right, then rest — a directional cue */
@keyframes ih-nudge {
  0%, 100% { transform: translateX(0); }
  7% { transform: translateX(11px); }
  14% { transform: translateX(0); }
  21% { transform: translateX(11px); }
  28% { transform: translateX(0); }
}
.p-industry .ih-step-turn {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  --ih-ambient: ih-step-turn 4.4s linear 2.4s infinite;
}
/* quarter turns with a rest between (healthcare's cross, promoted):
   works on any 90°-symmetric shape — each landing is visually identical
   to the start, so the loop never shows a seam */
@keyframes ih-step-turn {
  0% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.85, 0, 0.25, 1); /* incode-flow */
  }
  31.8% { transform: rotate(90deg); } /* 1.4s turn… */
  100% { transform: rotate(90deg); } /* …then a 3s rest */
}
/* short-rest variant: same 1.4s turn, 30% less hold (2.1s) */
.p-industry .ih-step-turn--short {
  --ih-ambient: ih-step-turn-short 3.5s linear 2.4s infinite;
}
@keyframes ih-step-turn-short {
  0% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.85, 0, 0.25, 1);
  }
  40% { transform: rotate(90deg); }
  100% { transform: rotate(90deg); }
}
.p-industry .ih-spin {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  --ih-ambient: ih-spin 28s linear 2.4s infinite;
}
@keyframes ih-spin {
  /* explicit from — a to-only keyframe freezes when it follows the
     fill-forward entrance in the same animation list (Chrome) */
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.p-industry .ih-pendulum {
  transform-box: fill-box;
  /* set transform-origin inline per instance — the hinge point */
  --ih-ambient: ih-pendulum 3.6s ease-in-out 2.4s infinite;
}
/* true pendulum physics: fastest through center, zero velocity at the
   extremes — sine-family curves per segment keep velocity continuous
   across the loop wrap (plain ease-in-out stalls at the seam) */
@keyframes ih-pendulum {
  0% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); /* ease-out sine */
  }
  25% {
    transform: rotate(3.2deg);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); /* ease-in-out sine */
  }
  75% {
    transform: rotate(-3.2deg);
    animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); /* ease-in sine */
  }
  100% { transform: rotate(0deg); }
}
.p-industry .ih-sine {
  transform-box: fill-box;
  --ih-ambient: ih-sine 8s linear 2.4s infinite;
}
/* rides a sine wave: the x sweep carries two vertical bobs per pass —
   dense keyframes keep the path smooth under linear timing */
@keyframes ih-sine {
  0%, 100% { transform: translate(0, 0); }
  12.5% { transform: translate(-6px, -5px); }
  25% { transform: translate(-12px, 0); }
  37.5% { transform: translate(-6px, 5px); }
  50% { transform: translate(0, 0); }
  62.5% { transform: translate(6px, -5px); }
  75% { transform: translate(12px, 0); }
  87.5% { transform: translate(6px, 5px); }
}
.p-industry .ih-sway {
  transform-box: fill-box;
  --ih-ambient: ih-sway 5.5s ease-in-out 2.4s infinite;
}
/* a slow lateral drift (the horizontal sibling of ih-float): starts at
   the settled position, sways both ways, returns at zero velocity */
@keyframes ih-sway {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-24px); }
  75% { transform: translateX(24px); }
}
.p-industry .ih-breathe-a,
.p-industry .ih-breathe-b,
.p-industry .ih-breathe-c,
.p-industry .ih-breathe-d {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.p-industry .ih-breathe-a { --ih-ambient: ih-breathe-a 5.2s ease-in-out 2.4s infinite; }
.p-industry .ih-breathe-b { --ih-ambient: ih-breathe-b 4.4s ease-in-out 2.6s infinite; }
.p-industry .ih-breathe-c { --ih-ambient: ih-breathe-c 5.9s ease-in-out 2.8s infinite; }
.p-industry .ih-breathe-d { --ih-ambient: ih-breathe-d 4.8s ease-in-out 3s infinite; }
@keyframes ih-breathe-a {
  0%, 100% { transform: scaleY(1); }
  42% { transform: scaleY(0.74); }
  72% { transform: scaleY(1.08); }
}
@keyframes ih-breathe-b {
  0%, 100% { transform: scaleY(1); }
  38% { transform: scaleY(1.13); }
  70% { transform: scaleY(0.76); }
}
@keyframes ih-breathe-c {
  0%, 100% { transform: scaleY(1); }
  45% { transform: scaleY(0.79); }
  76% { transform: scaleY(1.07); }
}
@keyframes ih-breathe-d {
  0%, 100% { transform: scaleY(1); }
  40% { transform: scaleY(1.09); }
  74% { transform: scaleY(0.8); }
}
.p-industry .ih-pulse {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  --ih-ambient: ih-pulse 2.2s ease-in-out 2.4s infinite;
}
/* a heartbeat: lub, dub, rest — starts and ends at the settled scale */
@keyframes ih-pulse {
  0%, 40%, 100% { transform: scale(1); }
  8% { transform: scale(1.09); }
  16% { transform: scale(1); }
  24% { transform: scale(1.06); }
}
.p-industry .ih-darken-a { --ih-ambient: ih-darken 2.6s ease-in-out 2.4s infinite; }
.p-industry .ih-darken-b { --ih-ambient: ih-darken 2.6s ease-in-out 3s infinite; }
.p-industry .ih-darken-c { --ih-ambient: ih-darken 2.6s ease-in-out 3.6s infinite; }
/* the fade sequence's sibling: same clocks/stagger, but the element's
   color deepens slightly (works on strokes and fills alike) instead of
   going translucent */
@keyframes ih-darken {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(0.87); }
}
.p-industry .ih-fade-a { --ih-ambient: ih-fade 2.6s ease-in-out 2.4s infinite; }
.p-industry .ih-fade-b { --ih-ambient: ih-fade 2.6s ease-in-out 3s infinite; }
.p-industry .ih-fade-c { --ih-ambient: ih-fade 2.6s ease-in-out 3.6s infinite; }
@keyframes ih-fade {
  /* starts at the settled opacity so the loop kicks in without a jump */
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
/* periodic drift (one period per cycle, seamless) — pair with a path
   whose geometry repeats every 118px; --ih-dur overrides the speed */
.p-industry .ih-drift {
  transform-box: fill-box;
  --ih-ambient: ih-drift var(--ih-dur, 4.2s) linear 2.4s infinite;
}
@keyframes ih-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-118px); }
}
/* full-asset pan (left to right, seamless) — pair with the graphic tiled
   at its own width inside a clip window; one tile-width per cycle */
.p-industry .ih-wave-pan {
  transform-box: fill-box;
  --ih-ambient: ih-wave-pan var(--ih-dur, 14s) linear 2.4s infinite;
}
@keyframes ih-wave-pan {
  from { transform: translateX(0); }
  to   { transform: translateX(431.539px); }
}

/* the copy: staggered rise once the art starts moving up */
.p-industry .ih-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 32px;
}
.p-industry .ih-reveal {
  opacity: 0;
  animation: ih-copy 0.7s var(--ease-out-expo, ease) both;
}
@keyframes ih-copy {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.p-industry .ih-hero__id { animation-delay: 1.7s; }
.p-industry .ih-hero__title { animation-delay: 1.82s; }
.p-industry .ih-hero__sub { animation-delay: 1.94s; }
.p-industry .ih-hero__actions { animation-delay: 2.06s; }

.p-industry .ih-hero__id {
  display: flex;
  align-items: center;
  gap: 12px;
}
.p-industry .ih-hero__title {
  /* 22 → 10: the kicker rides close to the title (Sofia, 2026-08-10) */
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tighter);
  /* ramp stepped down 40/56/64 → 36/48/56 (Sofia, 2026-08-10: "looks huge") */
  font-size: 36px;
  line-height: 1.04;
  color: var(--color-black);
}
@media (min-width: 768px) { .p-industry .ih-hero__title { font-size: 48px; } }
@media (min-width: 1280px) { .p-industry .ih-hero__title { font-size: 56px; } }
/* financial-services: the hero title holds TWO balanced lines at every
   width (Sofia, 2026-08-10 ×2: "keep the title in two lines") — at the
   stepped-down ramp the full title fits one line on wide viewports, so
   the cap forces the break; balance evens the halves */
.p-industry--financial-services .ih-hero__title {
  max-width: 30ch;
  margin-inline: auto;
}
.p-industry .ih-hero__sub {
  margin-top: 16px;
  max-width: 52ch;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-grey-on-white);
}
.p-industry .ih-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

/* scroll-restored refresh / deliberate scroll during the intro: skip the
   choreography, land settled (ambient loops keep running) */
html[data-ih-skip] .p-industry .ih-hero,
html[data-ih-skip] .p-industry .ih-hero__art,
html[data-ih-skip] .p-industry .ih-reveal {
  animation: none;
  opacity: 1;
  transform: none;
}
html[data-ih-skip] .p-industry .ih-hero__art svg > *,
html[data-ih-skip] .p-industry .ih-hero__art svg .ih-drift,
html[data-ih-skip] .p-industry .ih-hero__art svg .ih-wave-pan,
html[data-ih-skip] .p-industry .ih-hero__art svg .ih-float,
html[data-ih-skip] .p-industry .ih-hero__art svg .ih-pulse,
html[data-ih-skip] .p-industry .ih-hero__art svg .ih-fade-a,
html[data-ih-skip] .p-industry .ih-hero__art svg .ih-fade-b,
html[data-ih-skip] .p-industry .ih-hero__art svg .ih-fade-c,
html[data-ih-skip] .p-industry .ih-hero__art svg .ih-sway,
html[data-ih-skip] .p-industry .ih-hero__art svg .ih-sine,
html[data-ih-skip] .p-industry .ih-hero__art svg .ih-nudge,
html[data-ih-skip] .p-industry .ih-hero__art svg .ih-step-turn,
html[data-ih-skip] .p-industry .ih-hero__art svg .ih-spin,
html[data-ih-skip] .p-industry .ih-hero__art svg .ih-pendulum,
html[data-ih-skip] .p-industry .ih-hero__art svg .ih-o-breathe,
html[data-ih-skip] .p-industry .ih-hero__art svg .ih-darken-a,
html[data-ih-skip] .p-industry .ih-hero__art svg .ih-darken-b,
html[data-ih-skip] .p-industry .ih-hero__art svg .ih-darken-c,
html[data-ih-skip] .p-industry .ih-hero__art svg .ih-breathe-a,
html[data-ih-skip] .p-industry .ih-hero__art svg .ih-breathe-b,
html[data-ih-skip] .p-industry .ih-hero__art svg .ih-breathe-c,
html[data-ih-skip] .p-industry .ih-hero__art svg .ih-breathe-d {
  animation: var(--ih-ambient, ih-none);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .p-industry .ih-hero,
  .p-industry .ih-hero__art,
  .p-industry .ih-hero__art svg > *,
  .p-industry .ih-reveal,
  .p-industry .ih-float,
  .p-industry .ih-sway,
  .p-industry .ih-sine,
  .p-industry .ih-nudge,
  .p-industry .ih-step-turn,
  .p-industry .ih-spin,
  .p-industry .ih-pendulum,
  .p-industry .ih-o-breathe,
  .p-industry .ih-darken-a,
  .p-industry .ih-darken-b,
  .p-industry .ih-darken-c,
  .p-industry .ih-pulse,
  .p-industry .ih-breathe-a,
  .p-industry .ih-breathe-b,
  .p-industry .ih-breathe-c,
  .p-industry .ih-breathe-d,
  .p-industry .ih-fade-a,
  .p-industry .ih-fade-b,
  .p-industry .ih-fade-c,
  .p-industry .ih-drift,
  .p-industry .ih-wave-pan {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   Copy-deck sections (financial-services, Sofia 2026-08-10) —
   the stat band, outcomes, defense layers, story uses row, and
   resources grid the copy deck added to the dossier. All scoped
   .p-industry so other industries can adopt them.
   ============================================================ */

/* ---------- stat band (right after the hero) ---------- */
/* its own tinted ground + the rounded curtain over the hero (home's
   chapter-seam motif) so it reads as a NEW chapter, not more hero
   (Sofia, 2026-08-10: "add a section color… so it looks different
   from the hero") */
.p-industry .ind-stats {
  /* lighter than grey-100 (Sofia, 2026-08-10: "make the grey lighter")
     but still a step off the hero's grey-50 ground — token mix, no new hex */
  background: color-mix(in oklab, var(--color-grey-100) 55%, var(--color-grey-50));
}
/* the home statbar, verbatim (x3.css § stat banner — Sofia, 2026-08-10:
   "use exact same styles"): 72px gradient lead + 20/22px display figs on
   hairline columns, caps on their own row, pairs centered on the lead,
   hover lift on the CHILDREN (never the hovered box — edge-parked
   pointers flicker otherwise) */
.p-industry .ind-statbar__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 36px 32px;
  margin-top: 36px;
  color: var(--color-black);
}
@media (max-width: 1023px) {
  .p-industry .ind-statbar__lead { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .p-industry .ind-statbar__row {
    grid-template-columns: 1.15fr repeat(3, 1fr);
    align-items: center;
    gap: 0 32px;
  }
  .p-industry .ind-statbar__item {
    border-left: 1px solid var(--color-border-light);
    padding-left: 32px;
  }
}
.p-industry .ind-statbar__fig,
.p-industry .ind-statbar__cap {
  transition: color 0.25s ease, transform 0.3s var(--ease-out-expo);
}
.p-industry .ind-statbar__item:hover .ind-statbar__fig,
.p-industry .ind-statbar__item:hover .ind-statbar__cap { transform: translateY(-4px); }
.p-industry .ind-statbar__item:hover .ind-statbar__fig { color: var(--color-blue); }
.p-industry .ind-statbar__item:hover .ind-statbar__cap { color: var(--color-foreground); }
.p-industry .ind-statbar__num {
  font-family: var(--font-display);
  font-weight: 500;
  /* the home runs 72 — a step smaller here (Sofia, 2026-08-10:
     "make this number a little bit smaller") */
  font-size: 60px;
  line-height: 1;
  letter-spacing: var(--track-tight);
}
.p-industry .ind-statbar__fig {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: var(--track-tight);
  white-space: nowrap;
  color: var(--color-black);
}
@media (min-width: 768px) { .p-industry .ind-statbar__fig { font-size: 22px; } }
.p-industry .ind-statbar__cap {
  margin-top: 8px;
  font-size: var(--fs-sm);
  color: var(--color-grey-on-white);
}
/* the home customer-trust wall's tile treatment (x3.css .x3-logo-tile,
   mirrored here). Order follows the home chapter: title · subtitle ·
   wall · stats; rows align LEFT like the home grid (Sofia, 2026-08-10:
   "align the logo boxes to the left"). */
.p-industry .ind-stats__wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 40px;
}
.p-industry .ind-logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 calc((100% - 12px) / 2);
  min-height: 84px;
  padding: 20px 14px;
  border-radius: 16px;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
}
@media (min-width: 768px) {
  .p-industry .ind-logo-tile { flex-basis: calc((100% - 3 * 12px) / 4); }
}
@media (min-width: 1024px) {
  .p-industry .ind-logo-tile { flex-basis: calc((100% - 5 * 12px) / 6); }
}
.p-industry .ind-logo-tile img {
  height: var(--logo-h, 22px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ---------- outcomes (the numbers under the solutions grid) ---------- */
/* the grid and the outcomes share ONE chapter: the grid inner gives up its
   foot and the outcomes inner its head, so the numbers ride 56px under the
   cards instead of two full section paddings (Sofia, 2026-08-10:
   "a lot of unnecessary white space") */
.p-industry .sol-caps .sol-inner.sol-caps__grid { padding-bottom: 0; }
/* carries .sol-caps to outrank solution.css's .sol-inner padding-block —
   solution.css loads AFTER this sheet, equal specificity loses */
.p-industry .sol-caps .sol-inner.ind-outcomes-inner { padding-block: 0 56px; }
/* the pinned how-it-works below opens on its own section padding — trim
   its head so the chapter break matches the tightened rhythm (Sofia,
   2026-08-10 ×2: "still a lot of unnecessary blank space, unify") */
.p-industry .sol-how .sol-inner { padding-top: 48px; }
.p-industry .ind-outcomes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  /* 32 → 48 (Sofia, 2026-08-10: "now its too close, a tiny bit down") */
  padding-top: 48px;
}
@media (min-width: 640px) {
  .p-industry .ind-outcomes { grid-template-columns: repeat(3, 1fr); gap: 0 36px; }
  .p-industry .ind-outcome { padding-left: 28px; border-left: 1px solid var(--color-border-light); }
  .p-industry .ind-outcome:first-child { padding-left: 0; border-left: 0; }
}
.p-industry .ind-outcome__value {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tighter);
  font-size: 44px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .p-industry .ind-outcome__value { font-size: 56px; } }
.p-industry .ind-outcome__cap {
  margin-top: 12px;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--color-black);
}
.p-industry .ind-outcomes-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 40px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}
.p-industry .ind-outcomes-link:hover { color: var(--color-blue-500); }

/* ---------- defense layers (dark, SOLUTION register: the blue aurora
   the pressures band wore before it went red) ---------- */
.p-industry .ind-defense {
  background-color: var(--color-black);
  background-image:
    radial-gradient(90% 70% at 12% 0%, color-mix(in oklab, var(--color-blue-500) 24%, transparent), transparent 62%),
    radial-gradient(80% 60% at 92% 100%, color-mix(in oklab, var(--color-blue-400) 12%, transparent), transparent 65%);
  color: var(--color-white);
}
.p-industry .ind-defense .ind-kicker { color: rgba(255, 255, 255, 0.55); }
.p-industry .ind-defense .ind-title { color: var(--color-white); }
.p-industry .ind-defense .ind-intro { color: rgba(255, 255, 255, 0.7); max-width: 760px; }
.p-industry .ind-defense__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 40px;
}
@media (min-width: 640px) { .p-industry .ind-defense__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .p-industry .ind-defense__grid { grid-template-columns: repeat(3, 1fr); } }
.p-industry .ind-def {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 26px 24px;
  /* the pressures' dark glass tile recipe */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}
.p-industry .ind-def__name {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tighter);
  font-size: 19px;
  line-height: 1.2;
  color: var(--color-white);
}
.p-industry .ind-def__line {
  flex: 1 1 auto;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  text-wrap: pretty;
}
/* phrases on ink take Blue 200 (site contrast rule) */
.p-industry .ind-def__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-blue-200);
  text-decoration: none;
  transition: color 0.2s ease;
}
.p-industry .ind-def__link:hover { color: var(--color-white); }

/* (the story's powered-by uses row removed — Sofia, 2026-08-10) */

/* ---------- resources (bright, hairline-opened) ---------- */
.p-industry .ind-res-band {
  background: var(--color-background);
  border-top: 1px solid var(--color-border-light);
}
.p-industry .ind-res__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 40px;
}
@media (min-width: 640px) { .p-industry .ind-res__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .p-industry .ind-res__grid { grid-template-columns: repeat(3, 1fr); } }
/* blog cards (the product pages' pr-blog recipe mirrored — Sofia,
   2026-08-10: "show it like blog cards"); gradient thumbs are the blog
   index's pairs; hover = border tint + lift, no soft shadow (site rule) */
.p-industry .ind-res {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  background: var(--color-grey-50);
  padding: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.p-industry .ind-res:hover {
  border-color: color-mix(in oklab, var(--color-blue) 30%, transparent);
  transform: translateY(-2px);
}
.p-industry .ind-res__thumb {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
}
.p-industry .ind-res__thumb--1 {
  background: linear-gradient(135deg, var(--color-grey-600) 0%, var(--color-blue-500) 100%);
}
.p-industry .ind-res__thumb--2 {
  background: linear-gradient(135deg, var(--color-blue-500) 0%, var(--color-blue-200) 100%);
}
.p-industry .ind-res__thumb--3 {
  background: linear-gradient(135deg, var(--color-blue-500) 0%, var(--color-blue-500) 45%, var(--color-grey-600) 100%);
}
.p-industry .ind-res__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  padding: 16px 14px 10px;
}
.p-industry .ind-res__meta {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  color: var(--color-grey-on-white);
}
.p-industry .ind-res__title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  font-size: 19px;
  line-height: 1.25;
  color: var(--color-black);
  text-wrap: balance;
}
.p-industry .ind-res__excerpt {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--color-grey-on-white);
}
.p-industry .ind-res__more {
  margin-top: auto;
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-blue);
}

/* the template's FAQ title is long ("Common questions about identity
   verification for <industry>") — even the FAQ split and step the title
   down a notch so it holds the 2-line gate. Was fsv-scoped; widened to
   the whole family when every industry adopted the fsv structure
   (Sofia, 2026-08-13). */
@media (min-width: 1024px) {
  .p-industry .faq__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}
@media (min-width: 768px) {
  .p-industry .faq .section-title { font-size: 30px; }
}

/* ind-res thumbs carry the real post image when the entry has one
   (Sofia 2026-08-13, latest-3 featured-blog rule); the gradient stays
   as the no-image fallback */
.p-industry .ind-res__thumb { overflow: hidden; }
.p-industry .ind-res__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ind-res thumbs carry the real post image when the entry has one
   (Sofia 2026-08-13, latest-3 featured-blog rule); the gradient stays
   as the no-image fallback */
.p-industry .ind-res__thumb { overflow: hidden; }
.p-industry .ind-res__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}