/* ============================================================
   Sections — page composition (top-to-bottom order)

     1. Hero (incl. trust bar + closing tagline)
     2. Pillars
     2b. Bento (four-card capability grid)
     3. Chapter (+ sublist)
     4. Changelog
     5. Quotes
     6. Finale
     7. Footer
     8. Responsive
   ============================================================ */

/* 1. Hero --------------------------------------------- */
.hero {
  padding: 56px 0 80px;
  position: relative;
  overflow: hidden;
}
.hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.hero__copy {
  min-width: 0;
}
.hero__title {
  font-size: var(--fs-hero);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.022em;
  max-width: 1100px;
  position: relative;
  animation: rise 700ms var(--ease-out) both;
}
.hero__title-muted {
  color: var(--fg-muted);
}

.hero__sub {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--fg);
  max-width: 640px;
}

.hero__sub-row {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  animation: rise 700ms var(--ease-out) both;
  animation-delay: 90ms;
}

.hero__lead {
  font-size: var(--fs-body);
  color: var(--fg-secondary);
  max-width: 560px;
}

.hero__cta-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1172 / 1080;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg-card);
  /* clip-path belt-and-suspenders for Safari border-radius+video clipping */
  clip-path: inset(0 round var(--r-xl));
  animation: rise 700ms var(--ease-out) both;
  animation-delay: 180ms;
}
.hero__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}
/* Transparent shield over the hero video — see .screenshot__shield in
   components.css for rationale. */
.hero__shield {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: auto;
}

/* Centered hero variant — single column, centered copy, no media block.
   Used by interior pages (e.g. product.html). */
.hero--centered .hero__top {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
}
.hero--centered .hero__title {
  margin-inline: auto;
}
.hero--centered .hero__sub-row {
  align-items: center;
}
.hero--centered .hero__lead {
  margin-inline: auto;
  max-width: 640px;
  font-size: 17px;
  line-height: 1.7;
}
.hero--centered .hero__cta-group {
  justify-content: center;
}

/* Product hero — `hero-split` variant with an interactive YouTube embed.
   Scoped to product.html so the homepage video hero and centered interior
   pages keep their existing proportions. */
.product-hero .hero__top {
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(36px, 5vw, 76px);
}
.product-hero .hero__copy {
  max-width: 620px;
}
.product-hero .hero__title {
  max-width: 760px;
}
.product-hero .hero__lead {
  max-width: 540px;
}
.product-hero__media {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  background: var(--fg);
}
.product-hero__iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  border-radius: inherit;
}

/* 2a. Trust bar (customer-logo marquee, lives inside hero) */
.trust-bar {
  position: relative;
  margin-top: 56px;
}

.trust-bar__heading {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: max-content;
  max-width: calc(100% - 32px);
}

.trust-bar__label {
  margin: 0;
  padding: 0 16px;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--fg-secondary);
}

.trust-bar__marquee {
  position: relative;
  height: 40px;
  margin-top: 38px;
  overflow: hidden;
}

.trust-bar__fade {
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
}
.trust-bar__fade--left {
  left: 0;
  background: linear-gradient(to right, var(--bg), transparent);
}
.trust-bar__fade--right {
  right: 0;
  background: linear-gradient(to left, var(--bg), transparent);
}

.trust-bar__track {
  display: flex;
  height: 100%;
  width: max-content;
  align-items: center;
  animation: trust-scroll 31.25s linear infinite;
}

.trust-bar__set {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 48px;
  padding: 0 24px;
}

.trust-bar__logo {
  height: 28px;
  width: auto;
  max-width: 80px;
  object-fit: contain;
  opacity: 0.6;
}

@keyframes trust-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .trust-bar__track {
    animation: none;
  }
}

/* Header block sitting above .screenshot--hero (eyebrow + title + muted
   lead). Mirrors the stories__head pattern. */
.screenshot__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 56px;
  margin-bottom: 32px;
}
.screenshot__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
}
.screenshot__title {
  font-size: var(--fs-title);
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-weight: 500;
  color: var(--fg);
}
.screenshot__title span { color: var(--fg-muted); }
.screenshot__lead {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--fg-muted);
  text-wrap: balance;
}


/* Hero closing tagline (last child of section.hero, sits below the
   screenshot). Replaces the former standalone .tagline-band section
   so the screenshot and the tagline read as one block. */
.hero__tagline {
  margin-top: 56px;
  font-size: var(--fs-title);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.hero__tagline span {
  color: var(--fg-muted);
}

/* 2b. Bento — capabilities grid -------------------------
   2×2 grid fused into a single panel: cells share a hairline
   cross via gap:1px against a --border background. Pulled out
   to the page rails (margin-inline:-gutter, mirrors .trust-bar__box
   in grid.css) so the panel edges land on the rails, not inset.
   ---------------------------------------------------------- */
.bento {
  padding: 0;
  border-top: 1px solid var(--border);
  scroll-margin-top: 80px;
}

.bento__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
  max-width: 880px;
}
.bento__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
}
.bento__title {
  font-size: var(--fs-title);
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-weight: 500;
  color: var(--fg);
}
.bento__title span { color: var(--fg-muted); }
.bento__divider {
  margin: 0 calc(-1 * var(--gutter)) 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.bento__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(360px, 1fr));
  gap: 1px;
  background: var(--border);
  margin-inline: calc(-1 * var(--gutter));
}

.bento__card {
  background: var(--bg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  scroll-margin-top: 80px;
}

.bento__card-media {
  aspect-ratio: 16 / 9;
  background: var(--gray);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 4px;
  position: relative;
}
/* Soft top-left → bottom-right fade to the page background. Only paints
   on cards that have media; empty cards keep the unobstructed placeholder
   caption. Uses rgb(var(--bg-rgb) / 0) → var(--bg) (rather than `transparent`
   → white) to avoid the legacy gray-midpoint gradient interpolation bug. */
.bento__card-media:not(:empty)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    rgb(var(--bg-rgb) / 0) 35%,
    var(--bg) 100%
  );
  pointer-events: none;
}
/* The "Image placeholder" caption only paints on cards that have no media
   element yet — once an <img> is dropped in, :empty no longer matches and
   the pseudo disappears. */
.bento__card-media:empty::before {
  content: "Image placeholder";
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}
.bento__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
}
/* Embedded preview (all four bento quadrants): iframe fills the 16:9
   media slot. The iframe scales its prototype internally via JS-driven
   transforms, so we just give it a clean 100% box with no border. */
.bento__card-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
  pointer-events: none; /* card hover/click stays with the card-link in the body */
}
/* The embed paints its own surface edge-to-edge, so suppress the default
   fade-to-bg gradient that other media slots use. */
.bento__card-media--embed::after {
  display: none;
}

.bento__card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
}

.bento__card-fig {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.bento__card-title {
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 500;
  max-width: 28ch;
}

/* The leading word ("Discover" / "Build" / "Run" / "Optimise") is a link
   that mirrors the diagonal arrow on .btn (see components.css). The word
   reads as a clickable link by default — --brand color + underline — and
   only the arrow nudges on hover. inline-flex keeps the arrow glued to
   the word so the pair can't break across lines while the rest of the
   title wraps freely; the empty ::after pseudo carries no text so the
   underline only paints under the word. */
.bento__card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.bento__card-link::after {
  content: "";
  width: 0.9em;
  height: 0.9em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.5 4H11.5V11' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.5 11L11.5 4' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.5 4H11.5V11' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.5 11L11.5 4' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: transform var(--t-fast) ease;
}
.bento__card-link:hover::after {
  transform: translate(2px, -2px);
}

.bento__card-copy {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--fg-secondary);
  max-width: 42ch;
}

/* 4. Chapter (+ sublist) ------------------------------ */
.chapter {
  padding: 96px 0;
  border-top: 1px solid var(--border);
  scroll-margin-top: 80px;
}

.chapter__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.chapter__title {
  font-size: var(--fs-title);
  line-height: 1;
  letter-spacing: -0.022em;
  font-weight: 500;
  max-width: 22ch;
}
.chapter__title-accent {
  color: var(--brand);
}

.chapter__copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 8px;
}
.chapter__copy p {
  font-size: var(--fs-body);
  color: var(--fg-secondary);
  max-width: 48ch;
}

.chapter__link {
  display: inline-flex;
  gap: 16px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: max-content;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.chapter__link:hover {
  color: var(--brand);
  border-bottom-color: var(--brand);
}
.chapter__link .num {
  color: var(--fg-muted);
}
.chapter__link .label {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  text-transform: none;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.sublist {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 36px;
  border-top: 1px solid var(--border);
  padding-top: 28px;
}
.sublist--two-col {
  grid-template-columns: repeat(2, 1fr);
  max-width: 720px;
  margin-left: auto;
}
.sublist li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
}
.sublist .num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-faint);
  letter-spacing: 0.03em;
  width: 28px;
  flex: none;
}
.sublist .label {
  color: var(--fg-secondary);
  font-weight: 500;
}

/* 8. Footer ------------------------------------------------
   Dark, near-minimal footer modeled on opus.com:
   - top row: brand mark + socials on the left, three legal links on the right
   - copyright zone: oversized cube clipped at the bottom edge, with copyright
     line + zipline ribbon pinned to the bottom
   Padding for `.page-grid` is owned by grid.css; the rule below is the
   non-page-grid baseline.
   ---------------------------------------------------------- */
.footer {
  background: var(--footer-bg);
  color: var(--footer-fg);
  padding: 80px 0 0;
}

.footer__inner {
  display: flex;
  flex-direction: column;
}

.footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  /* No padding-bottom — `.footer__copyright` owns the 24px gap below
     this row via its own padding-top. Keeping both would double the gap
     to 48px and exceed opus.com's measured 24px. */
}

.footer__brand-group {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.footer__brand {
  display: inline-flex;
  align-items: flex-start;
}

.footer__brand-mark {
  display: block;
  height: 24px;
  width: auto;
  -webkit-user-drag: none;
}

.footer__socials {
  display: flex;
  gap: 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--footer-fg);
  transition: opacity var(--t-fast) ease;
}
.footer__social:hover {
  opacity: 0.7;
}
.footer__social img {
  width: 100%;
  height: 100%;
  display: block;
  -webkit-user-drag: none;
}

.footer__nav {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 64px;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.footer__col-heading {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--footer-fg);
}

.footer__col-link {
  color: inherit;
  text-decoration: none;
}
.footer__col-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer__sublinks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__sublink {
  font-size: 14px;
  color: var(--footer-fg-muted);
  text-decoration: none;
  transition: color var(--t-fast) ease;
}
.footer__sublink:hover {
  color: var(--footer-fg);
}

.footer__copyright {
  position: relative;
  min-height: 450px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding-top: 24px;
}

.footer__copyright-art {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -192px;
  pointer-events: none;
  width: auto;
}
.footer__copyright-art img {
  display: block;
  height: 600px;
  width: auto;
  object-fit: contain;
  -webkit-user-drag: none;
}

.footer__copyright-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 40px;
}

.footer__legal {
  margin: 0;
  font-size: 14px;
  color: var(--footer-fg-muted);
}

.footer__zipline {
  display: block;
  height: 17px;
  width: auto;
  -webkit-user-drag: none;
}

/* 9. Customer stories ----------------------------------
   Single full-width featured testimonial. The slide spans rail-to-rail
   in a 2-col split: the pull-quote sits in the wider left column, the
   customer-logo + name + designation stack in the narrower right column.
   A hairline divider sits below the section heading. All values via
   existing tokens.
   ---------------------------------------------------------- */

.stories {
  border-top: 1px solid var(--border);
}

.stories__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}
.stories__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
}
.stories__title {
  font-size: var(--fs-title);
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-weight: 500;
  color: var(--fg);
}
.stories__title span { color: var(--fg-muted); }

.stories__divider {
  margin: 0 calc(-1 * var(--gutter));
  border: 0;
  border-top: 1px solid var(--border);
}

.stories__deck {
  display: grid;
  grid-template-columns: 1fr;
  margin-inline: calc(-1 * var(--gutter));
}
.stories__slide {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  align-items: start;
  gap: 48px;
  min-width: 0;
  background: var(--bg);
  padding: 56px var(--gutter);
}

/* Featured testimonial video. Click-to-play (no autoplay), so the user
   sees the native controls bar over the poster until they hit play. The
   wrapper holds the 16:9 box; the <video> covers it. Mirrors the
   .integrations__media / .integrations__video pair, minus the shield
   (clicks need to reach the controls bar) and the loop/IO behavior. */
.stories__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--gray);
  overflow: hidden;
}
.stories__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  -webkit-user-drag: none;
}

.stories__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

.stories__quote { margin: 0; }
.stories__quote p {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--fg);
}

.stories__person {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
}
.stories__customer-logo {
  width: 80px;
  height: 80px;
  border-radius: var(--r-sm);
  display: block;
}
.stories__person-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.stories__person-name {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--fg);
}
.stories__person-title {
  font-size: var(--fs-body);
  color: var(--fg-secondary);
  line-height: 1.45;
}

@media (max-width: 767px) {
  .stories__head { margin-bottom: 20px; }
  .stories__divider { margin: 0 0 32px; }
  .stories__deck { margin-inline: 0; }
  .stories__slide {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0;
  }
  .stories__person { flex-direction: row; align-items: center; gap: 16px; }
  .stories__customer-logo { width: 64px; height: 64px; flex-shrink: 0; }
}

/* 9a. Stages (product.html) ----------------------------------
   Section 2: Four stage subsections.
   Each stage = eyebrow + h3 title + lead + full-width demo img +
   3-column sub-feature deck with rail-to-rail vertical hairlines.

   Layout: Option A (media-feature extended with sub-feature deck).
   New classes: .stage, .stage__head, .stage__eyebrow, .stage__eyebrow-icon,
   .stage__title, .stage__title-muted, .stage__lead, .stage__media,
   .stage__demo, .stage__sub-deck, .stage__sub-card, .stage__sub-title,
   .stage__sub-copy.
   ---------------------------------------------------------- */

/* Stage subsection — one per product stage (Discover / Build / Run / Optimise).
   Each gets its own section break so they read as peer-level sections. */
.stage {
  border-top: 1px solid var(--border);
  scroll-margin-top: 80px;
}

/* Stage header: eyebrow + h3 title + lead paragraph */
.stage__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
  margin-bottom: 32px;
}

/* Eyebrow: icon + stage label in mono caps */
.stage__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
}

/* Eyebrow icon — alpha-masked PNG tinted to currentColor (matches the
   compliance__eyebrow-icon pattern in index.html where the SVG inherits
   the eyebrow's text color via stroke="currentColor"). The PNG's alpha
   channel becomes the mask; the visible color is the eyebrow's --brand.
   Per-stage modifiers below set the mask URL — kept in CSS so paths
   resolve relative to this file (matches the @font-face precedent). */
.stage__eyebrow-icon {
  flex: none;
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.stage__eyebrow-icon--discover {
  -webkit-mask-image: url("../images/product/icon-discover.png");
          mask-image: url("../images/product/icon-discover.png");
}
.stage__eyebrow-icon--build {
  -webkit-mask-image: url("../images/product/icon-build.png");
          mask-image: url("../images/product/icon-build.png");
}
.stage__eyebrow-icon--run {
  -webkit-mask-image: url("../images/product/icon-run.png");
          mask-image: url("../images/product/icon-run.png");
}
.stage__eyebrow-icon--optimize {
  -webkit-mask-image: url("../images/product/icon-optimize.png");
          mask-image: url("../images/product/icon-optimize.png");
}
/* Enterprise-page stage modifiers — same alpha-mask trick as above, but
   shipped as SVGs (cleaner edges, smaller, retina-perfect). */
.stage__eyebrow-icon--hitl {
  -webkit-mask-image: url("../images/product/icon-hitl.svg");
          mask-image: url("../images/product/icon-hitl.svg");
}
.stage__eyebrow-icon--governance {
  -webkit-mask-image: url("../images/product/icon-governance.svg");
          mask-image: url("../images/product/icon-governance.svg");
}
.stage__eyebrow-icon--residency {
  -webkit-mask-image: url("../images/product/icon-residency.svg");
          mask-image: url("../images/product/icon-residency.svg");
}

/* Stage title — H3 at title scale */
.stage__title {
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--fg);
}

/* Muted second clause — mirrors .hero__title-muted */
.stage__title-muted {
  color: var(--fg-muted);
}

/* Stage lead paragraph */
.stage__lead {
  font-size: var(--fs-body);
  color: var(--fg-secondary);
  line-height: var(--lh-body);
  max-width: 64ch;
}

/* Stage demo image — full container width, 2880×1760 aspect ratio (~16:9.8).
   Wrapped in a relative container so the shield can overlay it. */
.stage__media {
  position: relative;
  width: 100%;
  aspect-ratio: 2880 / 1760;
  background: var(--gray);
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow:
    0 1px 0 rgb(var(--shadow-rgb) / 0.04),
    0 24px 48px -24px rgb(var(--shadow-rgb) / 0.14),
    0 48px 96px -48px rgb(var(--shadow-rgb) / 0.10);
}

.stage__demo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  -webkit-user-drag: none;
}

/* Iframe variant — used on enterprise.html for HITL + Governance HTML mocks
   in site/embeds/. The parent .stage__media owns the aspect ratio; the iframe
   just needs a clean borderless box. pointer-events: none keeps focus and
   click out of the decorative iframe (mirrors .bento__card-iframe). */
iframe.stage__demo {
  border: 0;
  background: transparent;
  pointer-events: none;
}

/* Sub-feature deck — 3 cards with rail-to-rail vertical hairlines.
   Follows the rail-to-rail-deck recipe from CLAUDE.md:
   1. Pull deck rail-to-rail (margin-inline: -gutter)
   2. gap: 1px + background: --border for the hairlines
   3. Cards paint background: --bg to show only the 1px gaps
   4. Breathing room lives inside the cards (padding-block on .stage__sub-card)
   The deck butts directly against the media block above — margin-top: 0,
   and the deck's top edge is the section break connecting to the media. */
.stage__sub-deck {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 1px;
  background: var(--border);
  margin-inline: calc(-1 * var(--gutter));
  margin-top: 0;
  border-top: 1px solid var(--border);
}

/* Sub-card is a <details> on product.html (mobile accordion); treat the
   summary as the title row and let the flex column lay out summary + copy
   the same way it laid out h4 + p before. */
.stage__sub-card {
  background: var(--bg);
  padding: 40px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Reset the native disclosure triangle. ::-webkit-details-marker is the
   Safari/Chromium pre-89 form, ::marker is the standard — keep both. */
.stage__sub-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}
.stage__sub-summary::-webkit-details-marker { display: none; }
.stage__sub-summary::marker { display: none; }

/* Marker glyph — only painted at ≤767px (mobile accordion mode). */
.stage__sub-marker {
  display: none;
  flex: none;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1;
  color: var(--fg-muted);
}

.stage__sub-title {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.stage__sub-copy {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-secondary);
}

/* Phone: collapse the 3-col sub-deck to a single column, and turn each
   sub-card into a tap-toggleable accordion. Padding moves from the card
   to the summary so the entire title row is a comfortable tap target. */
@media (max-width: 767px) {
  .stage__sub-deck {
    grid-template-columns: 1fr;
    margin-inline: 0;
    background: transparent;
    gap: 0;
  }
  .stage__sub-card {
    padding: 0;
    gap: 0;
    border-bottom: 1px solid var(--border);
  }
  .stage__sub-card:last-child {
    border-bottom: 0;
  }
  .stage__sub-summary {
    padding: 20px 0;
  }
  .stage__sub-copy {
    padding-bottom: 24px;
  }
  .stage__sub-marker {
    display: inline-block;
  }
  .stage__sub-card:not([open]) > .stage__sub-summary .stage__sub-marker::before {
    content: "+";
  }
  .stage__sub-card[open] > .stage__sub-summary .stage__sub-marker::before {
    content: "−"; /* U+2212, matches "+" width better than U+002D */
  }
}

/* ≥768: summary is decorative chrome around the h4, not interactive.
   Cursor reverts to default so it doesn't read as a button; the
   product-page accordion IIFE re-opens any details that get closed
   (e.g. by keyboard Enter) so desktop content stays visible. */
@media (min-width: 768px) {
  .stage__sub-summary {
    cursor: default;
  }
}

/* Tablet: sub-deck can stay 3-col but shrink card padding */
@media (min-width: 768px) and (max-width: 980px) {
  .stage__sub-card {
    padding: 32px var(--gutter);
  }
}

/* Desktop split (≥981px): the .stage__split wrapper around .stage__media
   and .stage__sub-deck flips into a 66/34 horizontal grid with a
   rail-to-rail vertical hairline between the cells. Mirrors the bento
   gap+background recipe. Below 981px the wrapper has no styles, so the
   full-width media + 3-col sub-deck stack reads as today. The 981px
   threshold avoids the awkward 768–980 range where the image's natural
   height (~16:9.8) would be shorter than the 3-card column, forcing
   object-fit: cover to crop. */
@media (min-width: 981px) {
  .stage__split {
    display: grid;
    grid-template-columns: 66fr 34fr;
    align-items: stretch;
    gap: 1px;
    background: var(--border);
    margin-inline: calc(-1 * var(--gutter));
    border-top: 1px solid var(--border);
  }
  /* Inside the split, media reads as a flat cell — drop the framed look
     so the bento-style hairline grid stays consistent. */
  .stage__media {
    border-radius: 0;
    box-shadow: none;
  }
  /* Sub-deck collapses to one column; horizontal hairlines between its
     3 cards come from its own gap+background. The split owns the
     rail-to-rail pull and the connecting top horizontal, so the deck
     drops both margin-inline and border-top. */
  .stage__sub-deck {
    grid-template-columns: 1fr;
    margin-inline: 0;
    border-top: 0;
  }
  /* Tighter block padding so 3 cards comfortably fit the image's natural
     height; horizontal padding stays at --gutter for cross-section rhythm. */
  .stage__sub-card {
    padding: 28px var(--gutter);
  }
}

/* 9c. Enterprise (product.html) ----------------------------
   Section 3: "Built for the Enterprise" — H2 + lead + a
   3-up rail-to-rail deck (stories-deck variant adapted to list
   content). Third card holds the compliance badge wall.
   Section break owned by .enterprise; grid.css owns padding.
   ---------------------------------------------------------- */

.enterprise {
  border-top: 1px solid var(--border);
}

.enterprise__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
  margin-bottom: 32px;
}

.enterprise__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
}

.enterprise__title {
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.enterprise__lead {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-secondary);
  max-width: 56ch;
}

/* Horizontal hairline between the heading block and the deck.
   Rail-to-rail (matches stories__divider pattern). */
.enterprise__divider {
  margin: 0 calc(-1 * var(--gutter));
  border: 0;
  border-top: 1px solid var(--border);
}

/* 3-up fused deck — vertical hairlines via gap:1px on --border bg.
   Rail-to-rail pull matches .stories__deck / .stage__sub-deck recipe. */
.enterprise__deck {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 1px;
  background: var(--border);
  margin-inline: calc(-1 * var(--gutter));
}

/* Cards paint over the deck so only the 1px gaps show as hairlines.
   Breathing room lives inside the cards (not in the section/divider).
   Inline padding uses var(--gutter) so edge-card content aligns with
   the heading above. */
.enterprise__card {
  background: var(--bg);
  padding: 48px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.enterprise__card-title {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg);
}

/* Optional small line icon at the top of an enterprise card.
   Used on `/enterprise.html` for the "Deploy on your terms" 3-up
   (SaaS / Single-tenant / On-prem). Brand-blue, currentColor-driven
   so themes inherit. */
.enterprise__card-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  color: var(--brand);
}
.enterprise__card-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Card body copy — used by 3-up cards that carry a paragraph instead of
   (or in addition to) a feature list. Same line-height/color as
   .enterprise__list li so the text reads as a sibling block. */
.enterprise__card-copy {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-secondary);
  max-width: 36ch;
}

/* Plain text list for industries / deployment options. */
.enterprise__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.enterprise__list li {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--fg-secondary);
}

/* Badge row — reuses the compliance-badges visual pattern:
   wrap, 12px gap, 64×64 SVGs. */
.enterprise__badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.enterprise__badges li {
  display: flex;
}

.enterprise__badges img {
  height: 64px;
  width: auto;
  display: block;
  -webkit-user-drag: none;
}

/* EU AI Act SVG ships with extra dropshadow padding inside its viewBox;
   bump render height to match the others (mirrors .compliance__badges). */
.enterprise__badges img[src*="eu-ai-act"] {
  height: 72px;
}

/* Trust Center CTA inside the third enterprise card — pinned to the bottom
   of the column so the badge cluster sits up top and the card feels balanced
   even when the other two cards stretch to match height. */
.enterprise__cta {
  align-self: flex-start;
  margin-top: auto;
}

/* Tablet: trim card padding */
@media (min-width: 768px) and (max-width: 980px) {
  .enterprise__card {
    padding: 36px var(--gutter);
  }
}

/* Phone: collapse to 1 col, drop rail-to-rail pull, stack CTA */
@media (max-width: 767px) {
  .enterprise__deck {
    grid-template-columns: 1fr;
    margin-inline: 0;
    background: transparent;
    gap: 0;
  }
  .enterprise__card {
    padding: 28px 0;
    border-bottom: 1px solid var(--border);
  }
  .enterprise__card:last-child {
    border-bottom: 0;
  }
  .enterprise__divider {
    margin: 0 0 0;
  }
}

/* 9b. Integrations + Compliance + Outro --------------------
   Three sections sharing a section break. Integrations: inset
   looping <video> with a centered cube overlay. Compliance:
   2-col split (intro on the left, badge bar on the right);
   collapses to a single column at ≤900px (see the dedicated
   media query at the bottom of this file). Outro: final CTA
   band — left-aligned hero-scale heading + reused hero pills,
   sitting just above the dark footer.
   ---------------------------------------------------------- */

.integrations,
.compliance,
.outro {
  border-top: 1px solid var(--border);
}

.integrations__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}
.integrations__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
}
.integrations__title {
  font-size: var(--fs-title);
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-weight: 500;
  color: var(--fg);
  text-wrap: balance;
}
.integrations__title span { color: var(--fg-muted); }
.integrations__lead {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--fg-muted);
  text-wrap: balance;
}

/* Compliance section — 2-col split: intro on the left, feature grid
   on the right. Section padding is owned by .page-grid in grid.css.
   The 2-col layout collapses to a single column at ≤900px (see the
   dedicated media query at the bottom of this file).
   --------------------------------------------------------------------- */

.compliance__layout {
  /* --intro-gap drives the intro's row spacing AND the aside's top
     offset (which skips past the eyebrow row to line up with the
     heading). Keep the two in lockstep — change the var, not 20px. */
  --intro-gap: 20px;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 80px;
  align-items: stretch;
}

.compliance__intro {
  display: flex;
  flex-direction: column;
  gap: var(--intro-gap);
  max-width: 480px;
}

.compliance__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
}
.compliance__eyebrow-icon {
  width: 14px;
  height: 14px;
  flex: none;
}

.compliance__heading {
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: 1.15;
  color: var(--fg);
  letter-spacing: -0.02em;
}
.compliance__heading span { color: var(--fg-muted); }

.compliance__lead {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--fg-secondary);
  letter-spacing: 0;
  max-width: 42ch;
}

.compliance__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  /* Skip past the eyebrow row on the left so the badges top-align with
     the heading. 12px = .compliance__eyebrow font-size; --lh-body is the
     body line-height (tokens.css); --intro-gap is set on .compliance__layout. */
  padding-top: calc(12px * var(--lh-body) + var(--intro-gap));
}
.compliance__cta {
  align-self: flex-start;
  margin-top: auto;
}
.compliance__badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.compliance__badges li {
  display: flex;
}
.compliance__badges img {
  height: 64px;
  width: auto;
  display: block;
  -webkit-user-drag: none;
}
/* EU AI Act SVG ships with extra dropshadow padding inside its viewBox;
   bump its render height so the visible circle matches the others. */
.compliance__badges img[src*="eu-ai-act"] {
  height: 72px;
}

/* Research section — 2-col split mirroring .compliance: intro on the
   left, chip cluster + blue CTA on the right. Section padding lives in
   grid.css; the 2-col layout collapses to a single column at ≤900px
   (matching .compliance — see media query at the bottom of this file).
   --------------------------------------------------------------------- */

.research {
  border-top: 1px solid var(--border);
}

.research__layout {
  /* --intro-gap drives the intro's row spacing AND the aside's top
     offset (which skips past the eyebrow row to line up with the
     heading). Keep the two in lockstep — change the var, not 20px. */
  --intro-gap: 20px;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 80px;
  align-items: stretch;
}

.research__intro {
  display: flex;
  flex-direction: column;
  gap: var(--intro-gap);
  max-width: 480px;
}

.research__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
}
.research__eyebrow-icon {
  width: 14px;
  height: 14px;
  flex: none;
}

.research__heading {
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: 1.15;
  color: var(--fg);
  letter-spacing: -0.02em;
}
.research__heading span { color: var(--fg-muted); }

.research__lead {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--fg-secondary);
  letter-spacing: 0;
  max-width: 42ch;
}

.research__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  /* Skip past the eyebrow row on the left so the chips top-align with
     the heading. Mirrors .compliance__aside. */
  padding-top: calc(12px * var(--lh-body) + var(--intro-gap));
}

.research__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.research__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  text-decoration: none;
  transition:
    border-color var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out);
}
.research__chip:hover {
  border-color: var(--border-strong);
  background: var(--bg-elevated);
}
.research__chip-id {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}
.research__chip-title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--fg);
}

.research__cta {
  align-self: flex-start;
  margin-top: auto;
}

/* Enterprise Integrations — 2-col split mirroring .compliance / .research:
   intro on the left, 6-tile logo grid on the right. Compact replacement
   for the homepage video version on /enterprise.html. Section padding
   lives in grid.css; the 2-col layout collapses to a single column at
   ≤900px (matching siblings — see media query at the bottom of this file).
   --------------------------------------------------------------------- */

.enterprise-integrations {
  border-top: 1px solid var(--border);
}

.enterprise-integrations__layout {
  /* --intro-gap drives the intro's row spacing AND the aside's top
     offset (which skips past the eyebrow row to line up with the
     heading). Keep the two in lockstep — change the var, not 20px. */
  --intro-gap: 20px;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 80px;
  align-items: stretch;
}

.enterprise-integrations__intro {
  display: flex;
  flex-direction: column;
  gap: var(--intro-gap);
  max-width: 480px;
}

.enterprise-integrations__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
}

.enterprise-integrations__heading {
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: 1.15;
  color: var(--fg);
  letter-spacing: -0.02em;
}
.enterprise-integrations__heading span { color: var(--fg-muted); }

.enterprise-integrations__lead {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--fg-secondary);
  letter-spacing: 0;
  max-width: 42ch;
}

.enterprise-integrations__aside {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  /* Skip past the eyebrow row on the left so the grid top-aligns with
     the heading. Mirrors .compliance__aside / .research__aside. */
  padding-top: calc(12px * var(--lh-body) + var(--intro-gap));
}

/* 3-col × 2-row logo wall. Hairlines via gap:1px against --border
   background — same recipe as the bento. Outer 1px border keeps the
   wall framed against the white page surface. */
.enterprise-integrations__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.enterprise-integrations__tile {
  background: #fff;
  display: grid;
  place-items: center;
  aspect-ratio: 1.6 / 1;
  padding: 24px;
  /* min-height: 0 + overflow: hidden lets the cell honor its aspect-ratio
     even if a logo's intrinsic dimensions would otherwise push it taller. */
  min-height: 0;
  overflow: hidden;
}

.enterprise-integrations__logo {
  /* Pixel-based max-height (rather than %) keeps every logo at the same
     visual scale regardless of its SVG's intrinsic width/height. */
  max-width: 70%;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
  -webkit-user-drag: none;
}

.integrations__media {
  position: relative;
  width: 100%;
  aspect-ratio: 3004 / 1188; /* matches source screen recording */
  background: var(--gray);
  overflow: hidden;
}
.integrations__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  -webkit-user-drag: none;
}
/* Transparent shield over the integrations video — see .hero__shield in
   sections.css and .screenshot__shield in components.css for rationale.
   `touch-action: pan-y` lets vertical scroll gestures pass through on
   iOS Safari while still intercepting contextmenu/right-click for IIFE #6. */
.integrations__shield {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: auto;
  touch-action: pan-y;
}

/* Decorative cube centered over the integrations video. `pointer-events:
   none` lets contextmenu fall through to .integrations__shield so IIFE #6
   still suppresses right-click. `image-rendering` hints toward a sharper
   resampling kernel on retina — cosmetic only, since the source PNG
   (382×425) is the resolution ceiling. */
.integrations__overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 5px));
  width: 100%;
  max-width: 120px;
  height: auto;
  z-index: 2;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  image-rendering: -webkit-optimize-contrast;
}

/* Phone overrides for the integrations media block. Native source ratio
   is ~2.53:1 (3004/1188); on phone it would render ~148px tall — too thin
   for a focal section. 2/1 lifts to ~187px on a 375w phone. With
   `object-fit: cover` this crops ~21% horizontally, less aggressive than
   16/9's ~30% crop. The cube max-width drops in proportion. */
@media (max-width: 767px) {
  .integrations__media {
    aspect-ratio: 2 / 1;
  }
  .integrations__overlay {
    max-width: 80px;
    transform: translate(-50%, calc(-50% + 4px));
  }
}

/* Outro — final CTA band sitting between compliance and the dark
   footer. Section break + page-grid padding live in grid.css; this
   block owns just the typography and the CTA row. Heading uses the
   hero scale so it reads as a closing statement of the same weight
   as the opening one. */

/* Two soft, asymmetric blue radial blobs give the band a "floating"
   atmospheric wash without committing to a solid tinted surface.
   Each blob lives on its own pseudo-element so it can drift slowly
   and independently via a composited transform animation. The pseudos
   are clipped to the rail-bounded .container (overflow: hidden) so
   the wash never bleeds into the outer gutter. */
.outro > .container {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.outro > .container::before,
.outro > .container::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
.outro > .container::before {
  background: radial-gradient(ellipse 55% 65% at 75% 20%, rgb(var(--brand-rgb) / 0.22), transparent 68%);
  animation: outro-drift-a 5s ease-in-out infinite alternate;
}
.outro > .container::after {
  background: radial-gradient(ellipse 50% 60% at 18% 88%, rgb(var(--brand-rgb) / 0.17), transparent 65%);
  animation: outro-drift-b 6s ease-in-out infinite alternate;
}

@keyframes outro-drift-a {
  from { transform: translate3d(-15%, -10%, 0); }
  to   { transform: translate3d(18%, 12%, 0); }
}
@keyframes outro-drift-b {
  from { transform: translate3d(15%, 10%, 0); }
  to   { transform: translate3d(-18%, -12%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .outro > .container::before,
  .outro > .container::after {
    animation: none;
  }
}

.outro__title {
  font-size: var(--fs-hero);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--fg);
  text-wrap: balance;
}
.outro__lead {
  margin-top: 16px;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 560px;
}
.outro__cta-group {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============================================================
   11. Blog index
   Section header (eyebrow + title + lead) inset to the container,
   followed by a rail-to-rail 3-up deck of cards with vertical
   hairlines (mirrors `.stories__deck` / `.bento__grid`). The deck
   sits below a horizontal `.blog-index__divider` (rail-to-rail
   hairline) so the verticals and the divider connect edge-to-edge.
   ============================================================ */
/* No `border-top` — this section opens the page (the prior centered hero
   was merged into `.blog-index__head` so the listing block stands alone). */
.blog-index {
}

.blog-index__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 56px;
  max-width: 1100px;
}

.blog-index__title {
  margin: 0;
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.022em;
  color: var(--fg);
}

.blog-index__title-muted {
  color: var(--fg-muted);
}

.blog-index__lead {
  margin: 0;
  max-width: 56ch;
  color: var(--fg-secondary);
  font: 400 var(--fs-body)/1.55 var(--font-body);
}

/* Horizontal hairline between the heading block and the deck.
   Rail-to-rail, matches `.stories__divider`. */
.blog-index__divider {
  margin: 0 calc(-1 * var(--gutter));
  border: 0;
  border-top: 1px solid var(--border);
}

/* 3-up fused deck — variable-count cards.
   Unlike the bento (fixed 2×2) and stories (fixed 3) decks where every
   cell is filled, the blog index has 8 cards in a 3-col grid (rows of
   3+3+2). With the gap+background hairline trick, the empty 9th cell
   would show as a stray --border block. Instead, the hairlines are
   drawn as borders on each card: a right border on every card except
   the last in its row (3rd, 6th, …) gives the verticals; a top border
   on every card past the first row gives the horizontal between rows.
   Edge-of-row cards have no right border so the deck's right edge
   stays clean. The deck still pulls rail-to-rail so the verticals
   land on the rails.
   ---------------------------------------------------------- */
.blog-index__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  margin-inline: calc(-1 * var(--gutter));
}

/* Vertical hairlines: 1st and 2nd column of every row carry a right
   border. The 3rd column (3n) does not. */
.blog-index__grid > .blog-card {
  border-right: 1px solid var(--border);
}
.blog-index__grid > .blog-card:nth-child(3n) {
  border-right: 0;
}

/* Horizontal hairlines: every card past the first row carries a top
   border. */
.blog-index__grid > .blog-card:nth-child(n + 4) {
  border-top: 1px solid var(--border);
}

/* Tablet: drop to 2-up. Reset the 3-col nth-child rules and re-target
   for 2 columns — 2nd column (2n) drops the right border; cards past
   row 1 (n+3) get a top border. The reset on `nth-child(3n)` makes
   the 3rd, 6th cards re-acquire their right border at this width. */
@media (min-width: 768px) and (max-width: 980px) {
  .blog-index__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-index__grid > .blog-card { border-right: 1px solid var(--border); }
  .blog-index__grid > .blog-card:nth-child(2n) { border-right: 0; }
  .blog-index__grid > .blog-card:nth-child(n + 3) { border-top: 1px solid var(--border); }
}

/* Phone: rails are gone; collapse to 1-up, drop the rail-to-rail pull,
   and replace the cross-grid hairlines with a per-card bottom border
   (matches the `.stage__sub-card` / `.enterprise__card` phone fallback). */
@media (max-width: 767px) {
  .blog-index__head { margin-bottom: 20px; }
  .blog-index__divider { margin: 0 0 0; }
  .blog-index__grid {
    grid-template-columns: 1fr;
    margin-inline: 0;
  }
  .blog-index__grid > .blog-card {
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid var(--border);
    padding-inline: 0;
  }
  .blog-index__grid > .blog-card:last-child {
    border-bottom: 0;
  }
}

/* ============================================================
   12. Research index
   Same shape as `.blog-index`: section header (eyebrow + title + lead)
   inset to the container, horizontal divider, then a rail-to-rail
   2-up deck of `.research-card`s. 2-up (not 3-up like blog) because
   research carries 4 papers — a 2×2 reads tighter than 3+1.
   ============================================================ */
/* No `border-top` — this section opens the page (the prior centered hero
   was merged into `.research-index__head` so the listing block stands alone). */
.research-index {
}

.research-index__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 56px;
  max-width: 1100px;
}

.research-index__title {
  margin: 0;
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.022em;
  color: var(--fg);
}

.research-index__title-muted {
  color: var(--fg-muted);
}

.research-index__lead {
  margin: 0;
  max-width: 56ch;
  color: var(--fg-secondary);
  font: 400 var(--fs-body)/1.55 var(--font-body);
}

.research-index__divider {
  margin: 0 calc(-1 * var(--gutter));
  border: 0;
  border-top: 1px solid var(--border);
}

/* 2-up fused deck — per-card borders (mirrors `.blog-index__grid`).
   Right border on the 1st column gives the vertical hairline; top
   border on cards past the first row (n+3) gives the horizontal. */
.research-index__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  margin-inline: calc(-1 * var(--gutter));
}

.research-index__grid > .research-card {
  border-right: 1px solid var(--border);
}
.research-index__grid > .research-card:nth-child(2n) {
  border-right: 0;
}
.research-index__grid > .research-card:nth-child(n + 3) {
  border-top: 1px solid var(--border);
}

@media (max-width: 767px) {
  .research-index__head { margin-bottom: 20px; }
  .research-index__divider { margin: 0; }
  .research-index__grid {
    grid-template-columns: 1fr;
    margin-inline: 0;
  }
  .research-index__grid > .research-card {
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid var(--border);
    padding-inline: 0;
  }
  .research-index__grid > .research-card:last-child {
    border-bottom: 0;
  }
}

/* ============================================================
   Pricing page — sections 1, 2, 3
   ============================================================ */

/* 1. Pricing hero — centered variant with extra "sub" line
   The .hero--centered rules already handle the single-column
   centered layout. This block adds the sub-line + toggle spacing
   inside the hero. */
.pricing-hero .hero__sub-row {
  align-items: center;
}

.pricing-hero__sub {
  font-size: var(--fs-body);
  color: var(--fg-muted);
  font-weight: 400;
  margin: 0;
}

/* Section 2 — pricing-calculator ----------------------
   Centered heading, readout pill row, range slider with
   custom track/thumb, 3-up tier cards (not rail-to-rail —
   individual cards with border-radius and shadow on Pro).
   -------------------------------------------------------- */
.pricing-calculator {
  border-top: 1px solid var(--border);
  text-align: center;
}

.pricing-calculator__heading {
  font-size: var(--fs-title);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--fg);
  margin: 0 0 32px;
}

/* Readout pill + info chip row */
.pricing-calculator__readout-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

/* The pill-shaped readout: gray background, brand-blue value chip */
.pricing-calculator__readout {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font: 400 15px/1.3 var(--font-body);
  color: var(--fg-secondary);
  text-align: left;
  min-height: 42px;
}

.pricing-calculator__readout-prompt {
  /* The placeholder shown at stop 0 */
  color: var(--fg-muted);
  font-style: italic;
}

/* The "I need [VALUE] man-hours per [period]" text — value gets a chip */
.pricing-calculator__readout-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--accent-soft-blue);
  color: var(--brand);
  font: 500 15px/1.3 var(--font-display);
  letter-spacing: -0.01em;
  margin: 0 3px;
}

/* Wrapper for the info trigger; positions the popover relative to it */
.pricing-calculator__info {
  position: relative;
  flex: none;
}

/* Slider wrap + custom styling */
.pricing-calculator__slider-wrap {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: left;
}

/* ---- Range input cross-browser styling ----
   We update a CSS custom property `--value` (0–10) via JS to fill the
   track up to the thumb. The gradient: brand-blue from 0→thumb,
   --border from thumb→max. Percentages: (--value / 10) * 100%.     */
.pricing-calculator__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--brand) 0%,
    var(--brand) calc(var(--value, 10%) * 1%),
    var(--border) calc(var(--value, 10%) * 1%),
    var(--border) 100%
  );
  outline: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

/* Thumb — Chromium / Safari */
.pricing-calculator__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid var(--bg);
  box-shadow: 0 1px 4px rgb(var(--brand-rgb) / 0.4);
  cursor: pointer;
  transition: box-shadow var(--t-fast) ease, transform var(--t-fast) ease;
}
.pricing-calculator__slider::-webkit-slider-thumb:hover,
.pricing-calculator__slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgb(var(--brand-rgb) / 0.18), 0 1px 4px rgb(var(--brand-rgb) / 0.4);
  transform: scale(1.1);
}

/* Thumb — Firefox */
.pricing-calculator__slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid var(--bg);
  box-shadow: 0 1px 4px rgb(var(--brand-rgb) / 0.4);
  cursor: pointer;
  transition: box-shadow var(--t-fast) ease, transform var(--t-fast) ease;
}
.pricing-calculator__slider::-moz-range-thumb:hover,
.pricing-calculator__slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgb(var(--brand-rgb) / 0.18), 0 1px 4px rgb(var(--brand-rgb) / 0.4);
  transform: scale(1.1);
}

/* Firefox track — left of thumb is painted by gradient on the input itself */
.pricing-calculator__slider::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: transparent;
}

/* JS toggles the [hidden] attribute on flex/inline-block elements below;
   honour it explicitly so display: none beats the class's display rule. */
.pricing-card__yearly-badge[hidden],
.pricing-card__hours-row[hidden] {
  display: none;
}

/* 3-up tier cards — NOT rail-to-rail; individual cards with border-radius */
.pricing-calculator__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 32px;
  text-align: left;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  overflow: hidden;
}

/* Pro card elevated with a brand-blue accent shadow + brand border */
.pricing-card--pro {
  border-color: rgb(var(--brand-rgb) / 0.35);
  box-shadow:
    0 0 0 1px rgb(var(--brand-rgb) / 0.12),
    0 8px 32px -8px rgb(var(--brand-rgb) / 0.18),
    0 2px 8px -2px rgb(var(--brand-rgb) / 0.10);
  background: var(--bg);
}

.pricing-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px 20px;
}

.pricing-card__footer {
  padding: 0 24px 24px;
}

/* Yearly discount badge — only shown when Yearly tab is active (JS toggles `hidden`) */
.pricing-card__yearly-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--accent-soft-blue);
  color: var(--brand);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.pricing-card__title {
  font: 500 20px/1.2 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: 0;
}

.pricing-card__lead {
  font: 400 var(--fs-body)/1.5 var(--font-body);
  color: var(--fg-secondary);
  margin: 0;
}

.pricing-card__price-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.pricing-card__price-caption {
  font: 400 12px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
}

.pricing-card__price-main {
  font: 500 var(--fs-hero)/1 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--fg);
}

/* Pro card price uses brand blue only when it has a real price (not "Contact Sales") */
.pricing-card--pro .pricing-card__price-main {
  color: var(--brand);
}

.pricing-card__price-strike {
  font: 400 14px/1 var(--font-body);
  color: var(--fg-faint);
  text-decoration: line-through;
}

.pricing-card__price-sub {
  font: 400 13px/1 var(--font-body);
  color: var(--fg-muted);
}

.pricing-card__allowance {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--bg-section);
  font: 500 13px/1.3 var(--font-mono);
  letter-spacing: 0.01em;
  color: var(--fg-secondary);
  margin: 0;
  align-self: flex-start;
}

.pricing-card__hours-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 8px;
}

.pricing-card__hours-count {
  font: 500 14px/1 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--fg);
}

.pricing-card__hours-rate {
  font: 400 13px/1 var(--font-mono);
  color: var(--fg-secondary);
}

.pricing-card__cta {
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}

/* Phone: stack the 3 tier cards vertically */
@media (max-width: 767px) {
  .pricing-calculator__cards {
    grid-template-columns: 1fr;
  }
}

/* Tablet: keep 3-col but trim card padding */
@media (min-width: 768px) and (max-width: 980px) {
  .pricing-card__body {
    padding: 20px 16px 16px;
  }
  .pricing-card__footer {
    padding: 0 16px 20px;
  }
}

/* Section 3 — trust bar on pricing page
   Sits below the calculator without a section break.
   The .trust-bar inside it is the standard component. */
.pricing-trust-bar {
  /* no border-top — sits directly below the calculator section */
}

/* Enterprise-page trust bar wrapper — mirrors `.pricing-trust-bar`.
   On the enterprise page the trust bar follows the centered hero, and
   the wrapper provides the top section padding (in grid.css). It does
   NOT add a `border-top` because the centered hero closes itself with
   its own bottom padding; the trust bar reads as a continuation of the
   hero, with the next section break landing on `.problem-stack`. */
.enterprise-trust-bar {
  /* no border-top — keeps the trust bar visually attached to the hero */
}

/* 10. Responsive -------------------------------------- */

/* Tablet density — full layout still in place; we just tighten the inter-
   column gaps so two-col grids and the four-col sublist breathe without
   re-layout. Above 980 nothing changes; below 768 the phone block kicks in. */
@media (min-width: 768px) and (max-width: 980px) {
  .hero__top {
    gap: 40px;
  }
  .chapter__head {
    gap: 40px;
  }
  .sublist {
    gap: 16px 24px;
  }
  .footer__nav {
    gap: 40px;
  }
  /* Bento — keep 2 cols at tablet, shrink target row heights so cards
     don't run too tall at narrow widths. */
  .bento__grid {
    grid-template-rows: repeat(2, minmax(320px, 1fr));
  }
}

/* Phone — single breakpoint. At ≤767 the full layout collapses to one
   column, rails and outer-gutter are dropped, and inner gutter shrinks. */
@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --outer-gutter: 0px; /* rails removed at this width — see grid.css */
  }
  /* Mobile nav rules live in components.css under @media (max-width: 980px). */
  .hero {
    padding: 56px 0;
  }
  .hero__top {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero__media {
    max-width: 560px;
    width: 70%;
    margin-inline: auto;
    order: -1;
  }
  .hero__copy {
    text-align: center;
  }
  .hero__title {
    margin-inline: auto;
  }
  .hero__sub-row {
    flex-direction: column;
    align-items: center;
  }
  .hero__sub,
  .hero__lead {
    margin-inline: auto;
  }
  .hero__cta-group {
    justify-content: center;
  }
  .hero__pill {
    flex-wrap: wrap;
  }
  .product-hero .hero__top {
    grid-template-columns: 1fr;
  }
  .product-hero .hero__copy {
    display: contents;
    max-width: none;
  }
  .product-hero .hero__title {
    order: 0;
    text-align: center;
  }
  .product-hero .hero__media {
    order: 1;
    width: 100%;
    max-width: 560px;
  }
  .product-hero .hero__sub-row {
    order: 2;
  }
  .hero__tagline {
    margin-top: 40px;
  }
  /* Outro — center all items and shrink the heading at phone widths. */
  .outro > .container {
    text-align: center;
  }
  .outro__title {
    font-size: clamp(26px, 6.4vw, 32px);
    line-height: 1.1;
  }
  .outro__lead {
    margin-inline: auto;
  }
  .outro__cta-group {
    justify-content: center;
  }
  .chapter {
    padding: 64px 0;
  }
  .chapter__head {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .bento {
    padding: 0;
  }
  .bento__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(320px, auto);
    margin-inline: 0; /* rails dropped on phone (grid.css), so no rail-out pull */
  }
  .footer {
    padding: 44px 0 0;
  }
  .footer__top {
    flex-direction: column;
    gap: 48px;
  }
  .footer__brand-group {
    gap: 32px;
  }
  .footer__nav {
    /* Stay a row of 4 columns on phone — switch to grid so each
       section gets an equal cell. 8px column gap is the tightest
       value that keeps "Documentation" on a single line at 12px
       text + 390px viewport (≈81px col vs ≈78px word). */
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    column-gap: 8px;
    width: 100%;
    border-top: 1px solid var(--footer-border);
    padding-top: 24px;
    justify-content: flex-start;
  }
  .footer__col {
    padding: 0;
    border-bottom: none;
    gap: 12px;
    min-width: 0;
  }
  .footer__col-heading {
    font-size: 12px;
  }
  .footer__sublinks {
    gap: 10px;
  }
  .footer__sublink {
    display: inline-block;
    padding: 0;
    font-size: 12px;
    overflow-wrap: anywhere;
  }
  /* Phone: the cube and copyright row can't both sit at flex-end without
     overlap — text alone is ~200px wide, wider than any usable channel
     beside a centered cube on ~350px content width. Flip the row to
     flex-start so it pins to the top of the dark zone, and shrink the
     cube to fit content width as a closing visual below. */
  .footer__copyright {
    min-height: 280px;
    align-items: flex-start;
  }
  .footer__copyright-art {
    bottom: -80px;
  }
  .footer__copyright-art img {
    height: 280px;
  }
  /* Narrow-width fallback: at <360px the 100px zipline + copyright text
     can collide. Allow wrap with a 16px gap so the zipline drops below
     the copyright line if there's not enough room. margin-left:auto
     keeps the zipline pinned right when it wraps to its own line —
     justify-content:space-between alone doesn't right-align a single
     wrapped child. */
  .footer__copyright-row {
    padding-bottom: 0; /* row pins to top now */
    flex-wrap: wrap;
    gap: 16px;
  }
  .footer__zipline {
    margin-left: auto;
  }
  .sublist,
  .sublist--two-col {
    grid-template-columns: 1fr;
    margin-left: 0;
    max-width: none;
  }
  .trust-bar__fade {
    width: min(120px, 18vw);
  }
  /* Enterprise Integrations — drop the 3×2 logo grid to 2×3 on phone so
     each tile keeps a sane aspect ratio at narrow widths. */
  .enterprise-integrations__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Compliance — collapse the 2-col layout earlier than other sections.
   Above 900px the right column gets cramped, so the layout flattens to
   a single column at ≤900px. Phone (≤767) inherits from this same rule. */
@media (max-width: 900px) {
  .compliance__layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .compliance__intro {
    max-width: none;
  }
  /* Stacked: no eyebrow row to skip past, so kill the desktop offset. */
  .compliance__aside {
    padding-top: 0;
  }

  /* Research — same 2-col → 1-col collapse as compliance. */
  .research__layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .research__intro {
    max-width: none;
  }
  .research__aside {
    padding-top: 0;
  }

  /* Enterprise Integrations — same 2-col → 1-col collapse as compliance. */
  .enterprise-integrations__layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .enterprise-integrations__intro {
    max-width: none;
  }
  .enterprise-integrations__aside {
    padding-top: 0;
  }
}

/* ============================================================
   Pricing — Section 4: Feature comparison (.pricing-features)
   3-col rail-to-rail fused deck. Each column is a vertical list
   of features with a tinted header band at the top.

   New BEM block — NOT an extension of .bento or .enterprise —
   because the internal structure is a header-band + feature list
   (not media+body or plain list). The rail-to-rail deck recipe is
   shared (gap:1px, background:--border, margin-inline:-gutter,
   padding inside cards) but the card internals are unique enough
   to warrant a separate block name.
   ============================================================ */

.pricing-features {
  border-top: 1px solid var(--border);
}

/* Section header: eyebrow + h2 — mirrors .stories__head / .integrations__head */
.pricing-features__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.pricing-features__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
}

.pricing-features__title {
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fg);
}

/* The second line of the title is muted — mirrors .stories__title span */
.pricing-features__title span {
  color: var(--fg-muted);
}

/* 3-col rail-to-rail fused deck — exact recipe from CLAUDE.md:
   1. Pull rail-to-rail: margin-inline: calc(-1 * var(--gutter))
   2. gap: 1px + background: --border = vertical hairlines
   3. Cards paint background: --bg so only the 1px gaps show
   4. Breathing room lives inside the cards
   5. Section's container padding-bottom: 0 so the deck butts the next break
   align-items: stretch is explicit so the short Core/Scale columns
   extend down to match the tall Pro column — making the deck read
   as one fused panel. */
.pricing-features__deck {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 1px;
  background: var(--border);
  margin-inline: calc(-1 * var(--gutter));
}

/* Each column card — paints over the deck to show only 1px hairlines.
   Inline padding uses var(--gutter) so the edge-card content aligns
   with the heading above. Vertical breathing goes inside the card. */
.pricing-features__col {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Header band — tinted to --bg-section; a subtle color shift (no hairline)
   separates the title from the feature rows, matching the opus.com design. */
.pricing-features__col-header {
  background: var(--bg-section);
  padding: 16px var(--gutter);
}

.pricing-features__col-title {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0;
}

/* Feature list — no list-style; rows displayed with a checkmark on the left */
.pricing-features__list {
  list-style: none;
  margin: 0;
  padding: 0 0 48px;
  display: flex;
  flex-direction: column;
}

/* Subtle row banding: odd rows pick up --bg-section so horizontal
   feature rows visually align across all three columns. */
.pricing-features__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px var(--gutter);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--fg-secondary);
}

.pricing-features__item:nth-child(odd) {
  background: var(--bg-section);
}

/* 16×16 check icon — inherits --brand color via stroke="currentColor"
   on the SVG; color applied here via the wrapper class. */
.pricing-features__check {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--brand);
}

/* Phone (≤767): rails dropped, collapse to 1-up vertical stack.
   Each card gets a hairline above (except the first) to read as
   separate sections. Row banding is preserved on the items. */
@media (max-width: 767px) {
  .pricing-features__deck {
    grid-template-columns: 1fr;
    margin-inline: 0;
    background: transparent;
    gap: 0;
  }
  .pricing-features__col {
    border-top: 1px solid var(--border);
  }
  .pricing-features__col:first-child {
    border-top: 0;
  }
  .pricing-features__list {
    padding-bottom: 32px;
  }
}

/* Tablet (768–980px): keep 3-col but reduce header/item padding */
@media (min-width: 768px) and (max-width: 980px) {
  .pricing-features__col-header {
    padding: 14px 20px;
  }
  .pricing-features__item {
    padding: 10px 20px;
  }
}

/* ============================================================
   Pricing — Section 5: Man-hours, Explained (.pricing-explainer)
   New BEM block — a two-col-split variant (same shape as .compliance):
   left column = heading + 3 plain paragraphs,
   right column = bar chart image with right-click shield.
   Path 2 chosen over reusing .compliance directly: the right column
   is a single image (not a badge/CTA cluster), and there is no eyebrow
   row — so the aside offset calc used by .compliance__aside is wrong
   here. A dedicated block keeps the cascade clean and lets us tune
   align-items independently (center here vs. stretch on compliance).
   Section padding owned by .page-grid in grid.css.
   Collapses to a single column at ≤900px — same breakpoint as
   .compliance__layout (see bottom of this file).
   ============================================================ */

.pricing-explainer {
  border-top: 1px solid var(--border);
}

.pricing-explainer__layout {
  display: grid;
  /* 5fr / 7fr mirrors .compliance__layout proportions */
  grid-template-columns: 5fr 7fr;
  gap: 80px;
  align-items: center;
}

.pricing-explainer__intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 480px;
}

.pricing-explainer__heading {
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: 1.15;
  color: var(--fg);
  letter-spacing: -0.02em;
}

/* "Explained" rendered muted — the comma + word read as a natural
   phrase continuation, so the two-tone split amplifies cadence
   without fragmenting meaning. Mirrors .compliance__heading span. */
.pricing-explainer__heading span {
  color: var(--fg-muted);
}

.pricing-explainer__body {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--fg-secondary);
  letter-spacing: 0;
  max-width: 42ch;
}

/* Tightens the gap between "Typical cost (per man-hour):" and the list
   below so the label reads as a header for the rows, not a separate
   paragraph. */
.pricing-explainer__costs-label {
  margin-bottom: 8px;
}

.pricing-explainer__costs {
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
  max-width: 42ch;
  display: flex;
  flex-direction: column;
}

.pricing-explainer__costs-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: var(--fs-body);
}

.pricing-explainer__costs-row:last-child {
  border-bottom: 1px solid var(--border);
}

.pricing-explainer__costs-source {
  color: var(--fg);
  font-weight: 500;
}

.pricing-explainer__costs-price {
  color: var(--fg-secondary);
  font: 500 15px/1 var(--font-mono);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.pricing-explainer__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing-explainer__chart {
  display: block;
  max-width: 100%;
  height: auto;
  -webkit-user-drag: none;
}

/* Transparent shield — reuses .integrations__shield which is already
   in IIFE #6's contextmenu selector, so right-click suppression is
   free. The shield must fill the image bounds. */
.pricing-explainer__media .integrations__shield {
  /* Override the integrations__shield z-index if needed; the default
     inset:0 + position:absolute covers the entire .pricing-explainer__media
     block, which has position:relative — no extra rules needed. */
}

/* ≤900px: collapse to single column (matches .compliance__layout breakpoint) */
@media (max-width: 900px) {
  .pricing-explainer__layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .pricing-explainer__intro {
    max-width: none;
  }
  /* Image goes below text in the stacked order (DOM order: intro → media) */
}

/* ============================================================
   Pricing — Section 6: FAQ (.pricing-faq)
   New BEM block — a compliance-style 2-col split (5fr / 7fr)
   with the section heading on the left and a native
   <details><summary> accordion on the right.

   NOT an extension of .compliance because:
   - The right column is an accordion (not a badge/CTA cluster).
   - The aside offset calc (.compliance__aside padding-top)
     assumes eyebrow + heading vertical rhythm; .pricing-faq
     has a simpler header (eyebrow + h2 only, no lead para) so
     a fresh block keeps the cascade clean.
   - The accordion internals (details, summary, chevron, numbered
     prefix) are section-specific and would pollute .compliance.

   Section break above (border-top) connects to the explainer.
   Section padding owned by .page-grid in grid.css (96px / 64px).
   Collapses to single column at ≤900px — same breakpoint as
   .compliance__layout and .pricing-explainer__layout.
   ============================================================ */

.pricing-faq {
  border-top: 1px solid var(--border);
}

/* 2-col layout: heading column (left) + accordion column (right).
   5fr / 7fr mirrors .compliance__layout + .pricing-explainer__layout. */
.pricing-faq__layout {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 80px;
  align-items: start;
}

/* Left column: eyebrow + h2 heading */
.pricing-faq__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pricing-faq__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
}

.pricing-faq__heading {
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0;
}

/* "Opus." rendered in --fg-muted to create the two-tone heading split.
   Mirrors .compliance__heading span / .hero__title-muted pattern. */
.pricing-faq__heading span {
  color: var(--fg-muted);
}

/* Right column: accordion list */
.pricing-faq__accordion {
  display: flex;
  flex-direction: column;
}

/* Each <details> item — divide with a hairline above each except the first.
   Using border-top (not border-bottom) so the first item butts the top
   of the column cleanly while subsequent items get the divider. */
.pricing-faq__item {
  border-top: 1px solid var(--border);
}
.pricing-faq__item:first-child {
  border-top: 0;
}

/* Remove the native browser triangle/disclosure marker.
   Both properties needed for cross-browser coverage. */
.pricing-faq__item > summary {
  list-style: none;
}
.pricing-faq__item > summary::-webkit-details-marker {
  display: none;
}

/* Summary row — the clickable target.
   Flex row: number + question + chevron pushed to the right. */
.pricing-faq__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  cursor: pointer;
  user-select: none;
  /* Focus ring on keyboard navigation */
}
.pricing-faq__summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Numbered prefix — mono-caps, --brand, small; aria-hidden */
.pricing-faq__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand);
  flex: none;
  min-width: 24px;
}

/* Question text */
.pricing-faq__question {
  flex: 1;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--fg);
}

/* Chevron — 16×16 inline SVG, pushed to the right.
   Rotates 180deg when the parent <details> is open. */
.pricing-faq__chevron {
  flex: none;
  color: var(--fg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--t-fast) ease;
}
/* Chevron rotation on open — gated on no-preference so
   reduced-motion users see it snap without animation. */
@media (prefers-reduced-motion: no-preference) {
  .pricing-faq__item[open] .pricing-faq__chevron svg {
    transform: rotate(180deg);
    transition: transform var(--t-med) var(--ease-out);
  }
  .pricing-faq__chevron svg {
    transition: transform var(--t-med) var(--ease-out);
  }
}
.pricing-faq__item[open] .pricing-faq__chevron {
  color: var(--brand);
}

/* Answer body — padding below the summary row, above the hairline */
.pricing-faq__answer {
  padding: 0 0 24px 36px; /* indent to align with question text (24px num + 12px gap) */
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg-secondary);
}

.pricing-faq__answer p {
  margin: 0 0 12px;
}
.pricing-faq__answer p:last-child {
  margin-bottom: 0;
}

/* Ordered list inside Q1 answer */
.pricing-faq__answer ol {
  margin: 12px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pricing-faq__answer li {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-secondary);
}

.pricing-faq__answer li p {
  margin: 4px 0 0;
  color: var(--fg-secondary);
}

/* <strong> inside FAQ answers — font-weight 500 (no 600 face loaded) */
.pricing-faq__answer strong {
  font-weight: 500;
  color: var(--fg);
}

/* ≤900px: collapse to single column */
@media (max-width: 900px) {
  .pricing-faq__layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* Phone (≤767): tighten accordion item padding */
@media (max-width: 767px) {
  .pricing-faq__summary {
    padding: 16px 0;
  }
  .pricing-faq__answer {
    padding-left: 0;
    padding-bottom: 20px;
  }
}

/* ============================================================
   Contact — /contact.html
   Two-col split (5fr / 7fr): eyebrow + heading + lead on the
   left, form card on the right. Section padding owned by grid.css.
   Collapses to single column at ≤900px (same breakpoint as
   .compliance__layout).
   ============================================================ */

.contact {
  border-top: 1px solid var(--border);
}

.contact__layout {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}

/* Left column — intro block -------------------------------- */
.contact__intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand);
}

.contact__heading {
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--fg);
}

.contact__lead {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--fg-secondary);
  max-width: 38ch;
}

/* Right column — form card --------------------------------- */
.contact__form-wrap {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
}

.contact__form:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact__submit-row {
  margin-top: 8px;
}

/* Submit pill — full width so it spans the form */
.contact__submit {
  width: 100%;
  justify-content: center;
}

.contact__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Error alert — shown via removing [hidden] attr */
.contact__form-error {
  padding: 12px 14px;
  background: rgb(var(--warm-rgb) / 0.06);
  border: 1px solid var(--accent-danger);
  border-radius: var(--r-md);
  color: var(--accent-danger);
  font-size: 14px;
  line-height: 1.5;
  margin-top: 8px;
}

/* Success card — shown via removing [hidden] attr ---------- */
.contact__success:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 24px 0;
}

/* Check icon SVG — brand stroke, animated draw-in */
.contact__success-icon {
  width: 80px;
  height: 80px;
  flex: none;
}

/* Draw-in animation for the SVG check path.
   JS adds .contact__success--in; path must have stroke-dasharray
   and stroke-dashoffset set to the path length in the markup.
   Gated on prefers-reduced-motion: no-preference. */
@media (prefers-reduced-motion: no-preference) {
  .contact__success--in .contact__success-icon path {
    transition: stroke-dashoffset 800ms var(--ease-out);
    stroke-dashoffset: 0 !important;
  }
}

.contact__success-title {
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: 1.2;
  color: var(--fg);
  margin: 0;
}

.contact__success-body {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg-secondary);
  max-width: 36ch;
  margin: 0;
}

/* Form-to-success swap animations — driven by JS-added classes.
   IIFE #11 adds .contact__form--exiting on submit, then swaps the
   form for the success card and adds .contact__success--in on rAF.
   That single class drives both the body slide-in + fade and the
   SVG checkmark draw-in (rule above). Reduced-motion path: instant
   [hidden] toggle, no transitions. */
@media (prefers-reduced-motion: no-preference) {
  .contact__form--exiting {
    animation: contact-form-exit 300ms var(--ease-out) both;
  }

  .contact__success--in {
    animation: contact-success-enter 500ms var(--ease-out) both;
  }
}

@keyframes contact-form-exit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-12px); }
}

@keyframes contact-success-enter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Collapse to single column at ≤900px — mirrors .compliance__layout */
@media (max-width: 900px) {
  .contact__layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* Phone: tighten card padding */
@media (max-width: 767px) {
  .contact__form-wrap {
    padding: 28px;
  }
}

/* ============================================================
   Legal — /legal.html
   Document hub for customer agreements, policies, and standards.
   Opens directly under the nav (no hero), so no border-top is
   needed — the nav's bottom border provides the visual closure.
   Section padding owned by grid.css.
   ============================================================ */

/* Heading block — eyebrow + h1 + lead, inset to a comfortable column.
   Mirrors `.blog-index__head` / `.research-index__head` rhythm. */
.legal__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1100px;
  margin-bottom: 56px;
}

.legal__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand);
}

.legal__heading {
  margin: 0;
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--fg);
  text-wrap: balance;
}

.legal__heading-muted {
  color: var(--fg-muted);
}

.legal__lead {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--fg-secondary);
  max-width: 64ch;
}

.legal__lead a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t-fast) var(--ease-out);
}
.legal__lead a:hover { color: var(--brand-hover); }

/* Rail-to-rail horizontal hairline between the head block and the
   first doc group. Mirrors `.blog-index__divider`. */
.legal__divider {
  margin: 0 calc(-1 * var(--gutter));
  border: 0;
  border-top: 1px solid var(--border);
}

/* Vertical stack of doc-groups */
.legal__groups {
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin-top: 56px;
}

/* Doc group — eyebrow number + title + lead, then a rail-to-rail
   single-column deck of doc rows. */
.legal__group {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.legal__group-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 24px;
  max-width: 1100px;
}

.legal__group-eyebrow {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  padding-top: 6px;
}

.legal__group-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legal__group-title {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--fg);
}

.legal__group-lead {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-secondary);
  max-width: 64ch;
}

/* Doc deck — rail-to-rail single-column list. Each row carries a
   top hairline (the first row's top hairline becomes the deck's top
   edge against the rails). The last row gets a bottom hairline so
   the deck closes flush. Pulled out of the gutter to land on the
   rails; rebuilds the gutter inside via padding. */
.legal__doc-deck {
  list-style: none;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0;
  border-top: 1px solid var(--border);
}

.legal__doc {
  border-bottom: 1px solid var(--border);
}

.legal__doc-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 22px var(--gutter);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--t-fast) var(--ease-out);
}

.legal__doc-link:hover {
  background-color: var(--bg-elevated);
}

.legal__doc-link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

/* Document icon — small filled-square badge, brand-soft tint */
.legal__doc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: rgb(var(--brand-rgb) / 0.08);
  color: var(--brand);
  flex-shrink: 0;
}

.legal__doc-icon svg {
  width: 18px;
  height: 22px;
  display: block;
}

.legal__doc-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.legal__doc-title {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--fg);
  letter-spacing: -0.005em;
}

.legal__doc-meta {
  font-size: 14px;
  line-height: 1.45;
  color: var(--fg-secondary);
}

.legal__doc-action {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.legal__doc-size {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-secondary);
  white-space: nowrap;
}

/* Download / arrow circle — outlined by default, fills brand on hover */
.legal__doc-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--fg);
  background: var(--bg);
  transition:
    background-color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out);
}

.legal__doc-arrow svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* Default (downloadable) hover: arrow circle fills brand and dips 1px
   to telegraph "downloading". The `--unavailable` modifier overrides
   below because those rows route to /contact.html (no download). */
.legal__doc:not(.legal__doc--unavailable) .legal__doc-link:hover .legal__doc-arrow {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  transform: translateY(1px);
}

/* "By request" variant — icon flips to a muted tint so the row reads
   as informational, not a live download. On hover, the arrow slides
   right (link affordance) instead of filling brand. */
.legal__doc--unavailable .legal__doc-icon {
  background: var(--bg-elevated);
  color: var(--fg-muted);
}

.legal__doc--unavailable .legal__doc-link:hover .legal__doc-arrow {
  border-color: var(--fg);
  color: var(--fg);
  transform: translateX(2px);
}

/* Closing footnote — small disclaimer paragraph below the last group. */
.legal__footnote {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  max-width: 80ch;
}

.legal__footnote p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-muted);
}

.legal__footnote a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t-fast) var(--ease-out);
}
.legal__footnote a:hover { color: var(--brand-hover); }

@media (prefers-reduced-motion: reduce) {
  .legal__lead a,
  .legal__footnote a,
  .legal__doc-link,
  .legal__doc-arrow {
    transition: none;
  }
  .legal__doc-link:hover .legal__doc-arrow,
  .legal__doc--unavailable .legal__doc-link:hover .legal__doc-arrow {
    transform: none;
  }
}

/* Phone — drop the rail-to-rail pull (rails are gone), stack the doc
   action under the body so the row reflows comfortably at narrow
   widths. Mirrors the blog-index / research-index phone fallback. */
@media (max-width: 767px) {
  .legal__head { gap: 16px; margin-bottom: 32px; }
  .legal__divider { margin: 0; }
  .legal__groups { gap: 56px; margin-top: 32px; }
  .legal__group { gap: 20px; }
  .legal__group-head { gap: 16px; }
  .legal__group-eyebrow { padding-top: 2px; }

  .legal__doc-deck {
    margin-inline: 0;
  }
  .legal__doc-link {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon body"
      "action action";
    gap: 16px 16px;
    padding: 20px 0;
  }
  .legal__doc-icon { grid-area: icon; }
  .legal__doc-body { grid-area: body; }
  .legal__doc-action {
    grid-area: action;
    justify-content: space-between;
  }
  .legal__doc-link:hover {
    background-color: transparent;
  }

  .legal__footnote {
    margin-top: 56px;
    padding-top: 24px;
  }
}

/* ============================================================
   Enterprise — /enterprise.html
   One net-new section block:

     • .problem-stack — 2-col split (5fr / 7fr like .compliance):
       intro + photo + cert badges on the left, stack of three
       numbered <details> problem→solution cards on the right.

   Section padding owned by grid.css. Layout collapses to a
   single column at ≤900px (matching `.compliance` / `.research`).
   ============================================================ */

.problem-stack {
  border-top: 1px solid var(--border);
}

.problem-stack__layout {
  --intro-gap: 20px;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 80px;
  align-items: start;
}

.problem-stack__intro {
  display: flex;
  flex-direction: column;
  gap: var(--intro-gap);
  max-width: 480px;
}

.problem-stack__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
}

.problem-stack__heading {
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-wrap: balance;
}

.problem-stack__lead {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-secondary);
  max-width: 42ch;
}

/* Photo + cert badges live below the intro copy on the left column,
   stacked with --intro-gap. The figure is a relative box so the shield
   can overlay the image (mirrors .stage__media + .integrations__shield). */
.problem-stack__figure {
  position: relative;
  margin: 8px 0 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bg-elevated);
}
.problem-stack__figure-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
}
.problem-stack__figure-shield {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: auto;
  touch-action: pan-y;
}

.problem-stack__badges {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.problem-stack__badges li { display: flex; }
.problem-stack__badges img {
  height: 56px;
  width: auto;
  display: block;
  -webkit-user-drag: none;
}
/* EU AI Act SVG ships with extra dropshadow padding inside its viewBox;
   bump render height to match the others (mirrors `.compliance__badges`). */
.problem-stack__badges img[src*="eu-ai-act"] {
  height: 64px;
}

/* Right column: stack of <details> cards separated by hairlines.
   Top hairline on the deck, bottom hairlines on each card. Native
   exclusive accordion via <details name="enterprise-problem-stack">:
   at most one card is open at a time; clicking the open card collapses
   it. Card 01 is open on first paint. */
.problem-stack__deck {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.problem-stack__card {
  border-bottom: 1px solid var(--border);
}

/* Exclusive-accordion smooth open/close. Native <details name=…> handles
   the "only one open" semantics; this block animates the reveal in
   browsers that ship ::details-content + interpolate-size (Chromium-first
   in 2026; Safari/Firefox snap, which is fine). */
@supports selector(details::details-content) {
  .problem-stack__card {
    interpolate-size: allow-keywords;
  }
  .problem-stack__card::details-content {
    block-size: 0;
    opacity: 0;
    overflow: clip;
    transition:
      block-size var(--t-med) var(--ease-out),
      opacity var(--t-fast) var(--ease-out),
      content-visibility var(--t-med) allow-discrete;
  }
  .problem-stack__card[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

.problem-stack__summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  transition: color var(--t-fast) var(--ease-out);
}
.problem-stack__summary::-webkit-details-marker { display: none; }
.problem-stack__summary::marker { display: none; }
.problem-stack__summary:hover .problem-stack__summary-label {
  color: var(--brand);
}

.problem-stack__num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  min-width: 1.5em;
}

.problem-stack__summary-label {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--fg);
  transition: color var(--t-fast) var(--ease-out);
}

.problem-stack__marker {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 400;
  color: var(--fg-muted);
  flex: none;
  width: 1em;
  text-align: center;
  line-height: 1;
}
.problem-stack__card:not([open]) > .problem-stack__summary .problem-stack__marker::before {
  content: "+";
}
.problem-stack__card[open] > .problem-stack__summary .problem-stack__marker::before {
  /* U+2212 minus sign — matches "+" width better than the hyphen-minus. */
  content: "\2212";
}

.problem-stack__body {
  padding: 0 0 28px 36px; /* indent past the .problem-stack__num column */
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.problem-stack__problem {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-secondary);
}

/* "Solution" pill — mono caps, soft brand tint. Lives between the
   problem paragraph and the solution title to read as a divider/label. */
.problem-stack__pill {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 4px 10px;
  margin-top: 6px;
  border-radius: var(--r-pill);
  background: rgb(var(--brand-rgb) / 0.10);
  color: var(--brand);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.problem-stack__solution-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--fg);
  line-height: 1.3;
}

.problem-stack__solution-copy {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-secondary);
}

.problem-stack__solution-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.problem-stack__solution-list li {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--fg-secondary);
}
/* Brand-blue dot bullet — 8px circle pinned to the first line. */
.problem-stack__solution-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
}

/* CTA group sits below the deck, aligned with the cards (NOT inset). */
.problem-stack__cta-group {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
  .problem-stack__summary,
  .problem-stack__summary-label,
  .problem-stack__card::details-content {
    transition: none;
  }
}

/* Collapse to single column at ≤900px — matches .compliance / .research. */
@media (max-width: 900px) {
  .problem-stack__layout {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .problem-stack__intro { max-width: none; }
  .problem-stack__figure { max-width: 480px; }
}

/* Phone — tighten paddings, drop figure aspect-ratio cap. */
@media (max-width: 767px) {
  .problem-stack__layout { gap: 40px; }
  .problem-stack__deck { border-top: 0; }
  .problem-stack__card:first-child { border-top: 1px solid var(--border); }
  .problem-stack__summary { padding: 18px 0; }
  .problem-stack__body { padding: 0 0 24px 30px; }
  .problem-stack__solution-list li { padding-left: 16px; }
  .problem-stack__badges img { height: 48px; }
  .problem-stack__badges img[src*="eu-ai-act"] { height: 56px; }
}