/**
 * DocuPOW — Solutions: Sales page styles
 * (page-templates/solution-sales.php only).
 *
 * Scope: everything lives under .page-sol-sales (BEM). Global chrome,
 * container, buttons, links and scroll-reveal come from main.css — this file
 * adds the light-canvas layout, the gray "built" band, the obsidian chain
 * band, the CSS-composed hero mock and the page-specific motion only. NO
 * gradient borders on this page (budget 0): the hero mock is a flat tonal
 * panel with hairline and techblue borders.
 *
 * Light-canvas contrast contract (tokens + one documented derived hex):
 *  - Hero eyebrow is 13px mono semibold var(--indigo) — 11.52:1 on white (AA).
 *  - Hero subhead is 24px/500 var(--techblue) — 4.54:1 on white (large text:
 *    AA needs 3:1).
 *  - h2 headings are var(--indigo) — 11.52:1 on white, 10.73:1 on --gray (AA).
 *  - Body copy and the mono field keys are var(--text-muted) — 9.34:1 on
 *    white, 8.70:1 on --gray (AA).
 *  - h1 / h3 / mono field values are var(--ink) — 16.68:1 on white (AA).
 *  - The mock's "Verified" value is #0A7B56 — the documented darkened --ok
 *    (5.28:1 on white; raw --ok #10B981 is only 2.54:1 and fails at 13px on
 *    white). Same derived hex as the extraction.css OK chips.
 *  - The S6 metric dash is 36px mono var(--indigo) — 11.52:1 on white
 *    (large text: AA needs 3:1).
 *
 * Dark band (S5) contrast contract:
 *  - h2 and pill labels are var(--white) on var(--obsidian) — 17.21:1 (AA);
 *    on the pill fill (6% white over obsidian) still ~14:1; on the indigo
 *    approval pill 11.52:1 (AA).
 *  - The band lead is var(--text-muted-dark) — 7.58:1 on obsidian (AA).
 *  - The chain arrows are decorative (aria-hidden) var(--text-muted-dark).
 *  - "Explore DocuPOW Flow" is 16px semibold var(--techblue) — 3.71:1 on
 *    obsidian: the theme's sanctioned links-on-dark treatment (see flow.css
 *    footer links); hover/focus underline keeps it identifiable beyond
 *    colour.
 *
 * Motion contract (transform/opacity only — STANDARD tier):
 *  - The export's 6s ambient float loop on the mock cards is DROPPED: the
 *    house STANDARD tier reserves loops — flat calm instead. The page's ONE
 *    mock moment is the one-shot IO sequence below.
 *  - Hidden "entrance" base states sit inside
 *    @media (prefers-reduced-motion: no-preference), so with reduced motion
 *    (or if solution-sales.js never runs) everything is visible.
 *    NO floats, NO bobs, NO count-ups on this page.
 *  - solution-sales.js hooks: .is-ready on .page-sol-sales__hero (staged
 *    copy entrance: eyebrow/h1/subhead/lead/CTAs + mock panel); .is-visible
 *    plays the mock sequence (doc card -> arrow -> [data-sales-field] rows
 *    staggered ~120ms); .is-on lights each [data-sales-pill] and connector
 *    arrow sequentially (~120ms steps) — one-shot, played once on first view
 *    (IntersectionObserver). main.js owns [data-dp-reveal] and the stagger
 *    delays (the page JS clears the inline delays post-reveal so hover lifts
 *    are never postponed).
 *  - Card hover lifts use the standalone `translate` property (never
 *    `transform`) so they can never fight the reveal's transform.
 *  - A final prefers-reduced-motion: reduce block forces every animated
 *    element fully visible and static (belt-and-braces over main.css).
 */

/* =========================================================================
   Page scope — light canvas, section rhythm
   ========================================================================= */
.page-sol-sales {
  overflow-x: clip; /* insurance: nothing may cause horizontal scroll @320px */
}

/* 96px section padding on desktop, 64px under 768. */
.page-sol-sales__hero,
.page-sol-sales__pain,
.page-sol-sales__built,
.page-sol-sales__docs,
.page-sol-sales__band,
.page-sol-sales__changes,
.page-sol-sales__cta {
  padding-block: var(--space-7);
}

@media (max-width: 767.98px) {
  .page-sol-sales__hero,
  .page-sol-sales__pain,
  .page-sol-sales__built,
  .page-sol-sales__docs,
  .page-sol-sales__band,
  .page-sol-sales__changes,
  .page-sol-sales__cta {
    padding-block: var(--space-6);
  }
}

/* Shared h2 — headline-lg (36/1.2/-0.01em/600) in Royal Indigo (11.52:1 on
   white, 10.73:1 on --gray — AA). */
.page-sol-sales__pain h2,
.page-sol-sales__built h2,
.page-sol-sales__docs h2,
.page-sol-sales__changes h2,
.page-sol-sales__cta h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--indigo);
}

/* =========================================================================
   S1 — Hero (copy left / CSS-composed mock right; copy-first <1024)
   ========================================================================= */
.page-sol-sales__hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7);
  align-items: center;
}

.page-sol-sales__hero-grid > * {
  min-width: 0;
}

/* <1024 — single column; copy stacks first (source order). */
@media (max-width: 1023.98px) {
  .page-sol-sales__hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* Eyebrow — mono technical label in Royal Indigo per the export's
   text-royal-indigo (11.52:1 on white — AA at 13px semibold). */
.page-sol-sales__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: var(--space-2);
}

/* The single h1 — headline-xl (64/1.1/-0.02em/700) in Ink per the export. */
.page-sol-sales__title {
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

/* headline-md subhead (24/1.3/500) in Tech Blue with the export's 4px
   techblue left border + 16px inset (4.54:1 on white — large-text AA). */
.page-sol-sales__subhead {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--techblue);
  border-left: 4px solid var(--techblue);
  padding-left: var(--space-2);
  margin-bottom: var(--space-3);
}

/* body-lg lead. */
.page-sol-sales__lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 672px;
  margin-bottom: var(--space-4);
}

/* CTA pair — shared by the hero and S8 (S8 centers it below). */
.page-sol-sales__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* <640 — the button pair stacks full-width. */
@media (max-width: 639.98px) {
  .page-sol-sales__cta-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* -------------------------------------------------------------------------
   Hero mock — the export's fully CSS-composed document-to-data abstraction:
   flat gray panel, skeleton document card back-left, techblue arrow, bordered
   data card front-right. Decorative (aria-hidden). No shadows (flat policy;
   the export's shadow-sm is dropped), NO gradient border (budget 0), NO
   ambient float (loop reserved at STANDARD tier).
   ------------------------------------------------------------------------- */
.page-sol-sales__mock {
  position: relative;
  overflow: hidden;
  background-color: var(--gray);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-height: 400px;
}

/* Back document card — export: top/left 24, ~2/3 width, 4/5 height. */
.page-sol-sales__mock-doc {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  width: 66%;
  height: 80%;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  z-index: 1;
}

/* Skeleton bars — block-level divs (boxes even before this rule), border-gray
   fills per the export. Heights 8/24/1/8/8/8, widths 33/75/100/83/66%. */
.page-sol-sales__mock-bar {
  display: block;
  height: 8px;
  background-color: var(--border);
  border-radius: 4px;
}

.page-sol-sales__mock-bar--title {
  width: 33%;
  margin-bottom: var(--space-2);
}

.page-sol-sales__mock-bar--heading {
  width: 75%;
  height: 24px;
  margin-bottom: var(--space-2);
}

/* Hairline rule between the heading and body skeleton. */
.page-sol-sales__mock-rule {
  display: block;
  height: 1px;
  background-color: var(--border);
  margin-block: var(--space-2);
}

.page-sol-sales__mock-bar--full {
  width: 100%;
}

.page-sol-sales__mock-bar--w83 {
  width: 83%;
  margin-top: var(--space-1);
}

.page-sol-sales__mock-bar--w66 {
  width: 66%;
  margin-top: var(--space-1);
}

/* Center arrow — 32px techblue, vertically centered at the right edge per
   the export (transform is reserved for the -50% centering; the entrance is
   opacity-only). */
.page-sol-sales__mock-arrow {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  color: var(--techblue);
  z-index: 2;
}

.page-sol-sales__mock-arrow svg {
  display: block;
  width: 32px;
  height: 32px;
}

/* Front data card — 2px techblue border, bottom-right, ~1/2 width. */
.page-sol-sales__mock-data {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  width: 50%;
  background-color: var(--white);
  border: 2px solid var(--techblue);
  border-radius: var(--radius);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 3;
}

/* <640 — the panel narrows; widen the data card so the mono pairs never
   clip (the panel's overflow:hidden is the final backstop). */
@media (max-width: 639.98px) {
  .page-sol-sales__mock-data {
    width: 72%;
  }
}

/* Field rows — mono 13 key/value pairs over bottom hairlines. */
.page-sol-sales__field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-1);
}

.page-sol-sales__field:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Keys — mono 13 muted (9.34:1 on white — AA). */
.page-sol-sales__field-key {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
}

/* Values — mono 13 Ink (16.68:1 on white — AA). */
.page-sol-sales__field-value {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
}

/* The "Verified" value — #0A7B56, the documented darkened --ok (5.28:1 on
   white — AA; raw --ok #10B981 is 2.54:1 and fails at 13px on white). Same
   derived hex as the extraction.css OK chips. */
.page-sol-sales__field-value--ok {
  color: #0A7B56; /* darkened --ok, documented — raw --ok fails at 13px on white */
}

/* =========================================================================
   S2 — Paperwork pain (white canvas, centered header, three white cards)
   ========================================================================= */

/* Centered header block (max-w-3xl = 768px). */
.page-sol-sales__pain-head {
  max-width: 768px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-5);
}

.page-sol-sales__pain-head h2 {
  margin-bottom: var(--space-2);
}

.page-sol-sales__pain-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
}

.page-sol-sales__pain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.page-sol-sales__pain-grid > * {
  min-width: 0;
}

@media (max-width: 767.98px) {
  .page-sol-sales__pain-grid {
    grid-template-columns: 1fr;
  }
}

/* White pain cards. Hover lifts via the standalone `translate` property so
   it never fights the reveal's `transform`; border + lift only, ~180ms, NO
   shadows (flat policy). The reveal stagger's inline transition-delay would
   postpone the first hover — solution-sales.js clears it post-reveal. */
.page-sol-sales__pain-card {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  transition:
    opacity .6s ease,
    transform .6s ease,
    translate .18s ease,
    border-color .18s ease;
}

.page-sol-sales__pain-card:hover {
  translate: 0 -6px;
  border-color: var(--techblue);
}

/* 48px gray roundel with a 24px indigo icon (decorative; markup aria-hidden). */
.page-sol-sales__pain-roundel {
  width: 48px;
  height: 48px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--gray);
  border-radius: 50%;
  color: var(--indigo);
  margin-bottom: var(--space-3);
}

.page-sol-sales__pain-roundel svg {
  width: 24px;
  height: 24px;
}

/* headline-md (24/1.3/500) in Ink. */
.page-sol-sales__pain-card h3 {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.page-sol-sales__pain-card p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* =========================================================================
   S3 — Built for the documents (gray band, 2x2 white icon+text cards)
   ========================================================================= */
.page-sol-sales__built {
  background-color: var(--gray);
  border-block: 1px solid var(--border);
}

/* Centered header block (max-w-3xl = 768px). */
.page-sol-sales__built-head {
  max-width: 768px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-5);
}

.page-sol-sales__built-head h2 {
  margin-bottom: var(--space-2);
}

.page-sol-sales__built-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
}

.page-sol-sales__built-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.page-sol-sales__built-grid > * {
  min-width: 0;
}

@media (max-width: 767.98px) {
  .page-sol-sales__built-grid {
    grid-template-columns: 1fr;
  }
}

/* White feature cards — icon beside text per the export. */
.page-sol-sales__built-card {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

/* Decorative 28px techblue icon (export text-tech-blue). */
.page-sol-sales__built-icon {
  flex: none;
  color: var(--techblue);
}

.page-sol-sales__built-icon svg {
  display: block;
  width: 28px;
  height: 28px;
}

/* body-lg semibold titles (18/600) in Ink. */
.page-sol-sales__built-card h3 {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-1);
}

.page-sol-sales__built-card p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* =========================================================================
   S4 — Your documents, understood (white canvas, six centered doc types)
   ========================================================================= */
.page-sol-sales__docs {
  text-align: center;
}

.page-sol-sales__docs h2 {
  margin-bottom: var(--space-5);
}

/* 6 cols >=1024, 3 cols 768–1023, 2 cols <768 (per the export). */
.page-sol-sales__docs-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
}

.page-sol-sales__docs-grid > * {
  min-width: 0;
}

@media (max-width: 1023.98px) {
  .page-sol-sales__docs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .page-sol-sales__docs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-sol-sales__doc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

/* Decorative 36px indigo icon (markup aria-hidden; the label carries the
   meaning). */
.page-sol-sales__doc-icon {
  color: var(--indigo);
}

.page-sol-sales__doc-icon svg {
  display: block;
  width: 36px;
  height: 36px;
}

/* 16px muted labels — 9.34:1 on white (AA). */
.page-sol-sales__doc-label {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* =========================================================================
   S5 — Dark band (obsidian, five-pill order-intake chain)
   ========================================================================= */
.page-sol-sales__band {
  background-color: var(--obsidian);
  color: var(--white);
  text-align: center;
}

/* Focus on obsidian: the global 2px techblue ring is only 3.71:1 against
   the dark canvas — add a light halo so the ring reads everywhere. */
.page-sol-sales__band :focus-visible {
  outline-color: var(--techblue);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); /* light halo on obsidian */
}

.page-sol-sales__band h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--white); /* 17.21:1 on obsidian — AA */
  margin-bottom: var(--space-2);
}

/* body-lg lead — var(--text-muted-dark): 7.58:1 on obsidian (AA). */
.page-sol-sales__band-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted-dark);
  max-width: 768px;
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

/* Horizontal chain — pills joined by decorative arrows. */
.page-sol-sales__chain {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

/* Standard pills — 6% white over obsidian (matches the export's
   inverse-surface intent; decorative fill, and white text on it is still
   ~14:1). Mono 13 white over a --border-dark hairline. */
.page-sol-sales__pill {
  background-color: rgba(255, 255, 255, .06); /* 6% white tint on obsidian — export inverse-surface fill */
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--white); /* ~14:1 on the tinted fill — AA */
  min-width: 0;
}

/* The Human Approval pill — indigo fill, white text (11.52:1 — AA), 16px
   person icon inline. */
.page-sol-sales__pill--approval {
  background-color: var(--indigo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

.page-sol-sales__pill-icon {
  flex: none;
  display: inline-flex;
}

.page-sol-sales__pill-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* Connector arrows — decorative, muted-dark; point right on desktop. */
.page-sol-sales__chain-arrow {
  flex: none;
  color: var(--text-muted-dark);
}

.page-sol-sales__chain-arrow svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* <768 — the chain stacks vertically; the arrows rotate to point down. */
@media (max-width: 767.98px) {
  .page-sol-sales__chain {
    flex-direction: column;
    align-items: stretch;
  }

  .page-sol-sales__chain-arrow {
    align-self: center;
    rotate: 90deg; /* standalone property — never fights transform/translate */
  }
}

/* Explore DocuPOW Flow — 16px semibold techblue: the sanctioned links-on-dark
   treatment (3.71:1 on obsidian; hover/focus underline keeps it identifiable
   beyond colour — same treatment as the flow.css footer links). */
.page-sol-sales__band-linkrow {
  margin: 0;
}

.page-sol-sales__band-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--techblue);
}

.page-sol-sales__band-link:hover,
.page-sol-sales__band-link:focus-visible {
  color: var(--techblue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-sol-sales__band-link svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* =========================================================================
   S6 — What changes for your team (white canvas, four outcome cards)
   ========================================================================= */
.page-sol-sales__changes {
  text-align: center;
}

.page-sol-sales__changes h2 {
  margin-bottom: var(--space-5);
}

/* 4 cols >=1024, 2 cols 768–1023, 1 col <768. */
.page-sol-sales__changes-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.page-sol-sales__changes-grid > * {
  min-width: 0;
}

@media (max-width: 1023.98px) {
  .page-sol-sales__changes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .page-sol-sales__changes-grid {
    grid-template-columns: 1fr;
  }
}

.page-sol-sales__change {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  text-align: center;
}

/* The designed empty-metric slot — mono 36 Royal Indigo en dash (11.52:1 on
   white; large-text AA needs 3:1). NO count-ups; the dash stays until a
   verified figure replaces it in the template. */
.page-sol-sales__change-metric {
  display: block;
  font-family: var(--font-mono);
  font-size: 36px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--indigo);
  margin-bottom: var(--space-1);
}

/* headline-md (24/1.3/500) outcome titles in Ink. */
.page-sol-sales__change h3 {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--space-1);
}

.page-sol-sales__change p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* =========================================================================
   S8 — Final CTA (white canvas, centered pair)
   ========================================================================= */
.page-sol-sales__cta {
  text-align: center;
  /* Hairline delimiter: the omitted proof band (see the template's proof
     section slot comment) left S6 and S8 both white and adjacent. */
  border-top: 1px solid var(--border);
}

.page-sol-sales__cta h2 {
  max-width: 768px;
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

.page-sol-sales__cta .page-sol-sales__cta-row {
  justify-content: center;
}

/* =========================================================================
   Mobile type scale (<768) — 64->44, 36->28, 24->20
   ========================================================================= */
@media (max-width: 767.98px) {
  .page-sol-sales__title {
    font-size: 44px;
    line-height: 1.1;
  }

  .page-sol-sales__pain h2,
  .page-sol-sales__built h2,
  .page-sol-sales__docs h2,
  .page-sol-sales__changes h2,
  .page-sol-sales__band h2,
  .page-sol-sales__cta h2 {
    font-size: 28px;
    line-height: 1.2;
  }

  .page-sol-sales__subhead {
    font-size: 20px;
    line-height: 1.3;
  }
}

/* =========================================================================
   Motion — entrance base states (no-preference only)
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* Hero entrance — solution-sales.js adds .is-ready to the hero on init
     (double rAF); copy rises in with 0/80/160/240/320ms delays and the mock
     panel fades alongside the subhead. */
  .page-sol-sales__hero .page-sol-sales__eyebrow,
  .page-sol-sales__hero .page-sol-sales__title,
  .page-sol-sales__hero .page-sol-sales__subhead,
  .page-sol-sales__hero .page-sol-sales__lead,
  .page-sol-sales__hero .page-sol-sales__cta-row,
  .page-sol-sales__hero .page-sol-sales__mock {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity .5s cubic-bezier(0.16, 1, 0.3, 1),
      transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .page-sol-sales__hero .page-sol-sales__title {
    transition-delay: 80ms;
  }

  .page-sol-sales__hero .page-sol-sales__subhead,
  .page-sol-sales__hero .page-sol-sales__mock {
    transition-delay: 160ms;
  }

  .page-sol-sales__hero .page-sol-sales__lead {
    transition-delay: 240ms;
  }

  .page-sol-sales__hero .page-sol-sales__cta-row {
    transition-delay: 320ms;
  }

  .page-sol-sales__hero.is-ready .page-sol-sales__eyebrow,
  .page-sol-sales__hero.is-ready .page-sol-sales__title,
  .page-sol-sales__hero.is-ready .page-sol-sales__subhead,
  .page-sol-sales__hero.is-ready .page-sol-sales__lead,
  .page-sol-sales__hero.is-ready .page-sol-sales__cta-row,
  .page-sol-sales__hero.is-ready .page-sol-sales__mock {
    opacity: 1;
    transform: none;
  }

  /* Hero mock sequence — hidden until solution-sales.js adds .is-visible
     (doc card, then the arrow, then each [data-sales-field] ~120ms apart).
     The doc card and field rows rise slightly; the arrow keeps its -50%
     centering transform and fades opacity-only. One-shot; visible from the
     start under reduced motion because this base state only exists here. */
  .page-sol-sales__mock-doc,
  .page-sol-sales__mock [data-sales-field] {
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity .45s cubic-bezier(0.16, 1, 0.3, 1),
      transform .45s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .page-sol-sales__mock-arrow {
    opacity: 0;
    transition: opacity .45s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* S5 chain lighting — pills and connector arrows hidden until
     solution-sales.js staggers .is-on onto each (~120ms, opacity + slight
     rise; the arrows fade in place). One-shot; visible from the start under
     reduced motion because this base state only exists here. */
  .page-sol-sales__pill,
  .page-sol-sales [data-sales-pill] {
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity .45s cubic-bezier(0.16, 1, 0.3, 1),
      transform .45s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .page-sol-sales__chain-arrow {
    opacity: 0;
    transition: opacity .45s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* Shown-state class hooks (outside the media query: harmless no-ops when
   reduced motion already forces everything visible). */
.page-sol-sales__mock-doc.is-visible,
.page-sol-sales__mock-arrow.is-visible,
.page-sol-sales__mock [data-sales-field].is-visible {
  opacity: 1;
}

.page-sol-sales__mock-doc.is-visible,
.page-sol-sales__mock [data-sales-field].is-visible {
  transform: none;
}

/* The arrow keeps its centering transform when shown. */
.page-sol-sales__mock-arrow.is-visible {
  transform: translateY(-50%);
}

.page-sol-sales__pill.is-on,
.page-sol-sales [data-sales-pill].is-on,
.page-sol-sales__chain-arrow.is-on {
  opacity: 1;
  transform: none;
}

/* =========================================================================
   Reduced motion — every animated element visible and static
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .page-sol-sales__hero .page-sol-sales__eyebrow,
  .page-sol-sales__hero .page-sol-sales__title,
  .page-sol-sales__hero .page-sol-sales__subhead,
  .page-sol-sales__hero .page-sol-sales__lead,
  .page-sol-sales__hero .page-sol-sales__cta-row,
  .page-sol-sales__hero .page-sol-sales__mock,
  .page-sol-sales__mock-doc,
  .page-sol-sales__mock [data-sales-field],
  .page-sol-sales__pill,
  .page-sol-sales [data-sales-pill],
  .page-sol-sales__chain-arrow {
    opacity: 1;
    transform: none;
  }

  /* The arrow keeps its -50% centering (never a motion transform). */
  .page-sol-sales__mock-arrow {
    opacity: 1;
    transform: translateY(-50%);
  }

  /* No hover lifts — :hover included so this outweighs the hover rule. */
  .page-sol-sales__pain-card,
  .page-sol-sales__pain-card:hover {
    translate: none;
  }
}

/* -------------------------------------------------------------------------
   Named markup hooks that intentionally carry no styles of their own: a
   block-flow copy column sized by the hero grid, and the built cards' text
   column. Named here so every markup class resolves in this sheet (build
   rule).
   ------------------------------------------------------------------------- */
.page-sol-sales__hero-copy {
  /* no-op: block-flow column; layout comes from __hero-grid */
}

.page-sol-sales__built-body {
  /* no-op: block-flow text column beside the fixed icon */
}