/**
 * DocuPOW — Flow: Order-to-Pay page styles
 * (page-templates/flow-order-to-pay.php only).
 *
 * Scope: everything lives under .page-o2p (BEM). Global chrome, container,
 * buttons, links and scroll-reveal come from main.css — this file adds the
 * obsidian hero, the five-phase journey rail, the safeguards band, the note
 * strip and the footer CTA.
 *
 * Contrast contract (tokens + documented derived values only):
 *  - Obsidian bands (hero, CTA): var(--white) headings — 16.85:1 on
 *    --obsidian (AA); eyebrow/lead are var(--text-muted-dark) — 7.58:1 (AA).
 *  - Journey h2 / safeguards h2 are var(--indigo) — 11.52:1 on white,
 *    10.73:1 on --gray (AA). h3s are var(--ink) — 16.68:1 on white (AA).
 *  - Legend, chips, phase labels and body copy are var(--text-muted) —
 *    9.34:1 on white, 8.70:1 on --gray (AA).
 *  - DERIVED HEX #1 — amber gate + pay-the-vendor text/icon #946300:
 *    darkened --warn on the rgba(245,158,11,.10) tint over white the gate
 *    chip composites to (#FEF5E7) — 4.80:1, the extraction.css precedent
 *    (raw --warn #F59E0B is ~2.2:1 there and fails 4.5:1). On the pay card's
 *    var(--gray) surface it is 4.84:1 — AA for the 13px/600 mono labels.
 *  - DERIVED HEX #2 — [REVIEW] emphasis #276CC1: the house ~8%-darkened
 *    Tech Blue (#2B76D2 x 0.92, already documented for .dp-btn--primary
 *    hover in main.css) — 5.25:1 on the white card (raw --techblue is
 *    4.54:1, borderline for a 13px mono strong; the darkened step clears
 *    it comfortably).
 *  - rgba tints (all token-derived, never text): rgba(245,158,11,.10) gate
 *    fill / rgba(245,158,11,.20) gate + pay borders (--warn);
 *    rgba(16,185,129,.30) ERP chip border (--ok); rgba(43,118,210,.10)
 *    match icon tile + rail-dot status ring (--techblue);
 *    rgba(61,46,112,.10) shield icon tile (--indigo);
 *    rgba(255,255,255,.08) hero wash (export opacity-10 white radial).
 *  - COLOUR IS SUPPLEMENTARY: every dot/icon is aria-hidden decoration and
 *    every phase activity, gate and legend entry carries a TEXT label — the
 *    swimlane colours are a redundant key, never the only signal.
 *  - FLAT POLICY: zero elevation shadows. The revealed rail-dot ring is a
 *    STATUS ring (extraction.css precedent), not elevation.
 *
 * NO gradient borders on this page (budget 0) — the rail with its
 * sequential phase reveal is the page's hero artifact; nothing competes.
 *
 * Motion contract (transform/opacity only — STANDARD tier):
 *  - Hidden "entrance" base states sit inside
 *    @media (prefers-reduced-motion: no-preference), so with reduced motion
 *    (or if flow-order-to-pay.js never runs under that preference)
 *    everything is visible. NO floats, NO bobs, NO loops.
 *  - flow-order-to-pay.js hooks: .is-ready on .page-o2p__hero (staged copy
 *    entrance: eyebrow/h1/lead/CTA, 0/80/160/240ms); .is-on on each
 *    [data-o2p-phase] as it enters the viewport (per-phase IO, ~150ms batch
 *    stagger — the vertical rail is too tall for the accounting strip's
 *    single-shot cascade, so each phase reveals as the visitor reaches it,
 *    always in document order). The phase's rail dot picks up the techblue
 *    status ring as its card lands. main.js owns [data-dp-reveal] and the
 *    stagger delays (the page JS clears the inline delays post-reveal so
 *    the safeguard hover lifts are never postponed).
 *  - 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 — section rhythm (96 desktop / 64 <768)
   ========================================================================= */
.page-o2p {
  overflow-x: clip; /* insurance: nothing may cause horizontal scroll @320px */
}

.page-o2p__hero,
.page-o2p__journey,
.page-o2p__safeguards,
.page-o2p__cta {
  padding-block: var(--space-7);
}

/* Note strip — a short py-lg breather per the export. */
.page-o2p__note {
  padding-block: var(--space-5);
}

@media (max-width: 767.98px) {
  .page-o2p__hero,
  .page-o2p__journey,
  .page-o2p__safeguards,
  .page-o2p__cta {
    padding-block: var(--space-6);
  }

  .page-o2p__note {
    padding-block: var(--space-4);
  }
}

/* =========================================================================
   S1 — Hero (obsidian, decorative radial wash right)
   ========================================================================= */
.page-o2p__hero {
  position: relative;
  overflow: hidden;
  background-color: var(--obsidian);
}

/* Decorative wash — the export's right-half radial (white at opacity-10,
   composited here as an .08 white radial) behind a 1px --border-dark left
   hairline. aria-hidden in markup; never intercepts input. Kept subtle: it
   is ambience, not information. */
.page-o2p__hero-wash {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  border-left: 1px solid var(--border-dark);
  background-image: radial-gradient(circle at 100% 50%, rgba(255, 255, 255, .08) 0%, transparent 50%);
  pointer-events: none;
}

/* Copy sits above the wash. */
.page-o2p__hero-inner {
  position: relative;
  z-index: 1;
}

/* Left column — export md:col-span-8 of 12 (~66%). */
.page-o2p__hero-copy {
  max-width: 100%;
}

@media (min-width: 768px) {
  .page-o2p__hero-copy {
    max-width: 66%;
  }
}

/* Eyebrow row — route glyph + mono 13 uppercase tracked label in
   var(--text-muted-dark) (7.58:1 on obsidian — AA). */
.page-o2p__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted-dark);
  margin-bottom: var(--space-2);
}

.page-o2p__eyebrow svg {
  display: block;
  width: 16px;
  height: 16px;
  flex: none;
}

/* The single h1 — headline-xl (64/1.1/-0.02em/700) in white (16.85:1 — AA). */
.page-o2p__title {
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-3);
}

/* body-lg lead — var(--text-muted-dark), 7.58:1 on obsidian (AA). */
.page-o2p__lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted-dark);
  max-width: 672px;
  margin-bottom: var(--space-4);
}

.page-o2p__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* 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-o2p__hero :focus-visible,
.page-o2p__cta :focus-visible {
  outline-color: var(--techblue);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); /* light halo on obsidian */
}

/* =========================================================================
   S2 — The Five-Phase Journey (white canvas)
   ========================================================================= */

/* Header row — copy left, legend right, hairline underneath; stacks <768. */
.page-o2p__journey-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-5);
}

@media (max-width: 767.98px) {
  .page-o2p__journey-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* headline-lg (36/1.2/-0.01em/600) in Royal Indigo (11.52:1 on white — AA). */
.page-o2p__journey-heading {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--indigo);
  margin-bottom: var(--space-1);
}

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

/* Legend — mono 13 muted labels (9.34:1 — AA); the TEXT carries the key,
   the coloured dots are decorative reinforcement (aria-hidden in markup). */
.page-o2p__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
}

.page-o2p__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* 12px legend dots — block-level so they always box. */
.page-o2p__legend-dot {
  display: block;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.page-o2p__legend-dot--agent {
  background-color: var(--indigo);
}

.page-o2p__legend-dot--orch {
  background-color: var(--techblue);
}

.page-o2p__legend-dot--gate {
  background-color: var(--warn);
}

.page-o2p__legend-dot--erp {
  background-color: var(--ok);
}

/* -------------------------------------------------------------------------
   The rail — left gutter holds the vertical line; phases hang off it.
   ------------------------------------------------------------------------- */
.page-o2p__rail {
  position: relative;
  padding-left: 120px; /* export md:pl-[120px] — room for the PHASE 0N gutter */
}

@media (max-width: 767.98px) {
  .page-o2p__rail {
    padding-left: var(--space-2); /* export pl-sm — labels hide, line hugs left */
  }
}

/* The 2px vertical line — absolute block element centred on the padding
   edge, spanning the full rail. */
.page-o2p__rail-line {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 120px;
  width: 2px;
  background-color: var(--border);
  transform: translateX(-50%);
}

@media (max-width: 767.98px) {
  .page-o2p__rail-line {
    left: var(--space-2);
  }
}

/* Phase block — relative anchor for its gutter label and rail dot. */
.page-o2p__phase {
  position: relative;
  padding-bottom: var(--space-7); /* export pb-xl between phases */
}

.page-o2p__phase--last {
  padding-bottom: 0;
}

@media (max-width: 767.98px) {
  .page-o2p__phase {
    padding-bottom: var(--space-5);
  }

  .page-o2p__phase--last {
    padding-bottom: 0;
  }
}

/* PHASE 0N gutter label — right-aligned in the 120px gutter (export
   left-[-120px] / w-[100px]); mono 13 muted. Hidden <768 — the cards and
   their h3s carry the sequence there. */
.page-o2p__phase-label {
  display: block;
  position: absolute;
  top: 4px;
  left: -120px;
  width: 100px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
}

@media (max-width: 767.98px) {
  .page-o2p__phase-label {
    display: none;
  }
}

/* 16px rail dot — white fill, 2px hairline ring, centred on the line.
   Block-level absolute element so it always boxes. When the phase reveals
   (.is-on) the ring turns techblue with a faint status halo — status, not
   elevation (flat policy holds). */
.page-o2p__phase-dot {
  display: block;
  position: absolute;
  top: 10px;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--white);
  border: 2px solid var(--border);
  transform: translateX(-50%);
}

.page-o2p__phase.is-on .page-o2p__phase-dot {
  border-color: var(--techblue);
  box-shadow: 0 0 0 4px rgba(43, 118, 210, .15); /* --techblue status ring */
}

/* Phase card — white, hairline border, 8px radius, 32px padding, offset
   right of the line (export ml-lg). */
.page-o2p__card {
  margin-left: var(--space-5);
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

@media (max-width: 767.98px) {
  .page-o2p__card {
    margin-left: var(--space-3); /* keep usable width beside the 16px rail */
    padding: var(--space-3);
  }
}

/* headline-md (24/1.3/500) in Ink. */
.page-o2p__phase-title {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

/* Activity chip row (Phase 1) — wraps; stacks <768 per the export. */
.page-o2p__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

@media (max-width: 767.98px) {
  .page-o2p__chips {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Activity chip — gray fill, 4px radius, mono 13 muted (8.70:1 on --gray —
   AA). The dot is a decorative swimlane key; the chip TEXT names the
   activity. */
.page-o2p__chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px var(--space-2);
  background-color: var(--gray);
  border: 1px solid transparent; /* keeps --erp's bordered box the same size */
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
}

/* ERP hand-off chip — --ok tinted border accent (the dot + border are
   supplementary; "ERP" meaning lives in the chip text). */
.page-o2p__chip--erp {
  border-color: rgba(16, 185, 129, .30); /* --ok tint */
}

/* 8px chip dots — block-level. */
.page-o2p__chip-dot {
  display: block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.page-o2p__chip-dot--agent {
  background-color: var(--indigo);
}

.page-o2p__chip-dot--orch {
  background-color: var(--techblue);
}

.page-o2p__chip-dot--erp {
  background-color: var(--ok);
}

/* Phase 2 PO line — mono 13 muted with the 12px baseline note. */
.page-o2p__po-line {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.page-o2p__po-note {
  font-size: 12px;
  color: var(--text-muted);
}

/* Amber gate chip — --warn tint fill + tinted border; label + icon in the
   documented darkened --warn #946300 (4.80:1 on the tint — extraction.css
   precedent; raw --warn fails 4.5:1 there). The mono label spells out the
   gate — amber is reinforcement. */
.page-o2p__gate {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px var(--space-2);
  background-color: rgba(245, 158, 11, .10); /* --warn tint */
  border: 1px solid rgba(245, 158, 11, .20); /* --warn tint */
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: #946300; /* darkened --warn, 4.80:1 on the tint — raw --warn fails */
}

.page-o2p__gate svg {
  display: block;
  width: 14px;
  height: 14px;
  flex: none;
}

/* Phase 3 — 2x2 activity grid, 1 column <768. */
.page-o2p__chip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

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

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

/* Phase 4 — agent match lines. */
.page-o2p__lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.page-o2p__match-line {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
}

/* [REVIEW] emphasis — the house darkened Tech Blue #276CC1 (5.25:1 on the
   white card; raw --techblue is a borderline 4.54:1 at this 13px mono
   size). The bracketed text itself names the state. */
.page-o2p__review {
  color: #276CC1; /* darkened --techblue (main.css button-hover derivation) */
  margin-left: 4px;
}

/* Phase 5 — payment card left / collection stack right; 1 column <768. */
.page-o2p__settle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
}

.page-o2p__settle > * {
  min-width: 0;
}

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

/* Dual-control payment card — gray surface behind a --warn tinted border;
   the head text/icon use the same documented #946300 (4.84:1 on --gray). */
.page-o2p__pay {
  background-color: var(--gray);
  border: 1px solid rgba(245, 158, 11, .20); /* --warn tint */
  border-radius: 4px;
  padding: var(--space-2);
}

.page-o2p__pay-head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  color: #946300; /* darkened --warn — 4.84:1 on --gray (AA) */
  margin-bottom: var(--space-1);
}

.page-o2p__pay-head svg {
  display: block;
  width: 14px;
  height: 14px;
  flex: none;
}

.page-o2p__pay-note {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

/* Collection stack — the two chips sit as block rows. */
.page-o2p__settle-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

/* =========================================================================
   S3 — Two Safeguards (gray band)
   ========================================================================= */
.page-o2p__safeguards {
  background-color: var(--gray);
  border-block: 1px solid var(--border);
}

/* headline-lg in Royal Indigo (10.73:1 on --gray — AA), centered. */
.page-o2p__safeguards-heading {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--indigo);
  text-align: center;
  margin-bottom: var(--space-5);
}

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

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

@media (max-width: 767.98px) {
  .page-o2p__safeguards-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* Safeguard card — white, hairline border, generous 48px padding. Hover
   lifts via the standalone `translate` property so it never fights the
   reveal's transform; border + lift only, NO shadows (flat policy). The
   reveal stagger's inline transition-delay would postpone the first hover —
   flow-order-to-pay.js clears it post-reveal. */
.page-o2p__safeguard {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  transition:
    opacity .6s ease,
    transform .6s ease,
    translate .18s ease,
    border-color .18s ease;
}

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

@media (max-width: 767.98px) {
  .page-o2p__safeguard {
    padding: var(--space-4);
  }
}

/* 48px icon tile — token-derived tint fills (documented in the header);
   the glyphs are decorative, the h3 carries the meaning. */
.page-o2p__safeguard-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
}

.page-o2p__safeguard-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* Card 1 — techblue tile (compare-arrows). Icon is decorative on the .10
   tint; colour carries no meaning of its own. */
.page-o2p__safeguard-icon--match {
  background-color: rgba(43, 118, 210, .10); /* --techblue tint */
  color: var(--techblue);
}

/* Card 2 — indigo tile (shield). */
.page-o2p__safeguard-icon--margin {
  background-color: rgba(61, 46, 112, .10); /* --indigo tint */
  color: var(--indigo);
}

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

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

/* =========================================================================
   S4 — Note (white strip over a hairline)
   ========================================================================= */
.page-o2p__note {
  border-top: 1px solid var(--border);
  text-align: center;
}

.page-o2p__note-text {
  font-size: 16px;
  line-height: 1.6;
  font-style: italic;
  color: var(--text-muted);
  max-width: 672px; /* export max-w-2xl */
  margin-inline: auto;
}

/* =========================================================================
   S5 — Footer CTA (obsidian over a dark hairline)
   ========================================================================= */
.page-o2p__cta {
  background-color: var(--obsidian);
  border-top: 1px solid var(--border-dark);
  text-align: center;
}

/* headline-lg in white (16.85:1 on --obsidian — AA). */
.page-o2p__cta-heading {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--white);
  max-width: 672px;
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

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

  .page-o2p__journey-heading,
  .page-o2p__safeguards-heading,
  .page-o2p__cta-heading {
    font-size: 28px;
    line-height: 1.2;
  }

  .page-o2p__phase-title,
  .page-o2p__safeguard-title {
    font-size: 20px;
    line-height: 1.3;
  }
}

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

  /* Hero entrance — flow-order-to-pay.js adds .is-ready on init (double
     rAF); copy rises in with 0/80/160/240ms delays. */
  .page-o2p__hero .page-o2p__eyebrow,
  .page-o2p__hero .page-o2p__title,
  .page-o2p__hero .page-o2p__lead,
  .page-o2p__hero .page-o2p__cta-row {
    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-o2p__hero .page-o2p__title {
    transition-delay: 80ms;
  }

  .page-o2p__hero .page-o2p__lead {
    transition-delay: 160ms;
  }

  .page-o2p__hero .page-o2p__cta-row {
    transition-delay: 240ms;
  }

  .page-o2p__hero.is-ready .page-o2p__eyebrow,
  .page-o2p__hero.is-ready .page-o2p__title,
  .page-o2p__hero.is-ready .page-o2p__lead,
  .page-o2p__hero.is-ready .page-o2p__cta-row {
    opacity: 1;
    transform: none;
  }

  /* Rail phases — the label + card rise in per phase as flow-order-to-pay.js
     adds .is-on (sequential IO). The rail LINE and DOTS stay visible
     throughout: the artifact holds the layout while the cards arrive. */
  .page-o2p__phase .page-o2p__phase-label,
  .page-o2p__phase .page-o2p__card {
    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);
  }

  /* Dot ring transition — colour/ring only (status). */
  .page-o2p__phase-dot {
    transition: border-color .4s ease, box-shadow .4s ease;
  }
}

/* Shown-state class hooks (outside the media query: harmless no-ops when
   reduced motion already forces everything visible). */
.page-o2p__phase.is-on .page-o2p__phase-label,
.page-o2p__phase.is-on .page-o2p__card {
  opacity: 1;
  transform: none;
}

/* =========================================================================
   Reduced motion — every animated element visible and static
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .page-o2p__hero .page-o2p__eyebrow,
  .page-o2p__hero .page-o2p__title,
  .page-o2p__hero .page-o2p__lead,
  .page-o2p__hero .page-o2p__cta-row,
  .page-o2p__phase .page-o2p__phase-label,
  .page-o2p__phase .page-o2p__card {
    opacity: 1;
    transform: none;
  }

  /* No hover lift — :hover included so this outweighs the hover rule. */
  .page-o2p__safeguard,
  .page-o2p__safeguard:hover {
    translate: none;
  }
}

/* -------------------------------------------------------------------------
   Named markup hooks that intentionally carry no styles of their own —
   named here so every markup class resolves in this sheet (build rule).
   ------------------------------------------------------------------------- */
.page-o2p__journey-copy {
  /* no-op: block-flow column; layout comes from __journey-head */
}