/**
 * DocuPOW — DocuPOW Flow page styles (page-templates/flow.php only).
 *
 * Scope: everything lives under .page-flow (BEM). Global chrome, container,
 * buttons, links, scroll-reveal and the gradient border come from main.css —
 * this file adds the light-canvas layout, the hero flow-canvas node graph,
 * the obsidian worked-example band and the page-specific motion only.
 *
 * Light-canvas contrast contract:
 *  - Canvas is var(--white); tonal bands/cards use var(--gray) with 1px
 *    var(--border) hairlines (flat design — tonal layers, not shadows).
 *  - Eyebrows are 13px mono semibold var(--indigo) — 11.52:1 on white,
 *    10.73:1 on --gray (AA).
 *  - Body copy is var(--text-muted) (9.34:1 on white, 8.70:1 on --gray).
 *  - The Approval node and its label are var(--white) on var(--indigo) —
 *    11.52:1 (AA).
 *  - The breadth "Explore the Flows library" text link is 16px
 *    var(--techblue) on white — 4.54:1, passes AA.
 *  - Zero shadows on this page (the hero canvas is a flat tonal panel, not
 *    a floating product screenshot).
 *
 * Dark band (S4) contrast contract:
 *  - Headings var(--white); body/eyebrow/phase labels var(--text-muted-dark)
 *    (7.58:1 on obsidian, 6.41:1 on the .06-white phases panel — AA; the
 *    13px mono eyebrow uses it instead of techblue, which is only 3.71:1
 *    on obsidian and fails).
 *  - Gate lines are var(--warn) — 6.63:1 on the .06-white phases panel
 *    (7.85:1 on raw obsidian), passes AA at 12px.
 *  - Footer links are 16px semibold var(--techblue) — 3.71:1 on obsidian:
 *    the theme's sanctioned links-on-dark treatment (hover underline keeps
 *    them identifiable without colour alone).
 *  - Focus on obsidian gets a light halo (the 2px techblue ring alone is
 *    only 3.71:1 against the dark canvas).
 *
 * 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.js never runs under that preference) everything is visible.
 *    NO floats, NO bobs, NO count-ups on this page.
 *  - flow.js hooks: .is-ready on .page-flow__hero (staged copy entrance:
 *    eyebrow/h1/lead/CTAs/trust); .is-on fades each [data-flow-node] in
 *    sequentially (~150ms steps, JS timeouts) with the [data-flow-link]
 *    connectors fading after — one-shot on first view (IntersectionObserver).
 *    main.js owns [data-dp-reveal] and the stagger delays (flow.js clears
 *    the inline delays post-reveal so hover lifts are never postponed).
 *  - 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-flow {
  overflow-x: clip; /* insurance: nothing may cause horizontal scroll @320px */
}

/* 96px section padding on desktop, 64px under 768. */
.page-flow__hero,
.page-flow__shift,
.page-flow__breadth,
.page-flow__example,
.page-flow__cta {
  padding-block: var(--space-7);
}

@media (max-width: 767.98px) {
  .page-flow__hero,
  .page-flow__shift,
  .page-flow__breadth,
  .page-flow__example,
  .page-flow__cta {
    padding-block: var(--space-6);
  }
}

/* Shared eyebrow — mono technical label in Royal Indigo (11.52:1 on white,
   10.73:1 on --gray — AA at 13px semibold). */
.page-flow__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-3);
}

/* Dark-band variant — var(--text-muted-dark) is the safe 13px choice on
   obsidian (7.58:1 AA; techblue is only 3.71:1 there and fails). */
.page-flow__eyebrow--dark {
  color: var(--text-muted-dark);
}

/* =========================================================================
   S1 — Hero (copy left, flow canvas right)
   ========================================================================= */
.page-flow__hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: center;
}

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

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

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

/* body-lg lead. */
.page-flow__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 S5 (S5 centers it below). */
.page-flow__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-flow__cta-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Trust microcopy — 13px mono with the shield-check icon inline. */
.page-flow__trust {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-muted);
  margin-top: var(--space-3);
}

.page-flow__trust svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* -------------------------------------------------------------------------
   Hero canvas — SANCTIONED REPLACEMENT for the export's hotlinked flowchart
   image: a flat gray panel holding a CSS/SVG node graph per the image's alt
   text. Carries data-dp-gradient-border (the page's ONLY gradient border).
   ------------------------------------------------------------------------- */
.page-flow__canvas,
.page-flow [data-flow-canvas] {
  background-color: var(--gray);
  border: 1px solid var(--border);
  border-radius: 12px; /* outranks .dp-gradient-border-active (later sheet) */
  padding: var(--space-4);
  aspect-ratio: 1 / 1; /* ~square on desktop per the export panel */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* <1024 (stacked) — a full-width square wastes scroll; let content size it. */
@media (max-width: 1023.98px) {
  .page-flow__canvas,
  .page-flow [data-flow-canvas] {
    aspect-ratio: auto;
  }
}

/* Node cards — white, hairline border, mono label + small icon. */
.page-flow__node,
.page-flow [data-flow-node] {
  width: min(100%, 280px);
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px var(--space-2);
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-flow__node svg,
.page-flow [data-flow-node] svg {
  width: 20px;
  height: 20px;
  color: var(--techblue);
  flex: none;
}

.page-flow__node-label {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
}

/* Approval node — the indigo human-gate accent. White label/icon on
   var(--indigo): 11.52:1, passes AA. (Compound selector so this outranks
   the `.page-flow [data-flow-node]` alias shell above.) */
.page-flow__node.page-flow__node--gate,
.page-flow [data-flow-node].page-flow__node--gate {
  background-color: var(--indigo);
  border-color: var(--indigo);
}

.page-flow__node.page-flow__node--gate svg,
.page-flow [data-flow-node].page-flow__node--gate svg {
  color: var(--white);
}

.page-flow__node--gate .page-flow__node-label {
  color: var(--white);
}

/* Connectors — decorative dashed 2px techblue bars; block-level divs so the
   height always applies. */
.page-flow__connector,
.page-flow [data-flow-link] {
  display: block;
  width: 0;
  height: 24px;
  border-left: 2px dashed var(--techblue);
}

/* =========================================================================
   S2 — The shift (gray band; visual left / copy right on desktop)
   ========================================================================= */
.page-flow__shift {
  background-color: var(--gray);
  border-block: 1px solid var(--border);
}

.page-flow__shift-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7);
  align-items: center;
}

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

/* Desktop: visual left / copy right (export order-classes) — the visual is
   second in source (copy-first when stacked), so pull it ahead here. */
.page-flow__compare {
  order: -1;
}

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

  .page-flow__compare {
    order: 0;
  }
}

/* headline-lg (36/1.2/-0.01em/600) in Royal Indigo. */
.page-flow__shift h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--indigo);
  margin-bottom: var(--space-3);
}

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

/* -------------------------------------------------------------------------
   Comparison visual — SANCTIONED REPLACEMENT for the export's hotlinked
   infographic: two CSS mini-cards per its alt text (aria-hidden in markup).
   ------------------------------------------------------------------------- */
.page-flow__compare {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Shared mini-card shell — label -> arrow -> outcome. */
.page-flow__compare-card--di,
.page-flow__compare-card--flow {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
}

/* "Document Intelligence -> Data" — muted, simple arrow. */
.page-flow__compare-card--di {
  color: var(--text-muted);
}

.page-flow__compare-card--di svg {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  flex: none;
}

/* "DocuPOW Flow -> Finished Process" — techblue accent, bolder arrow. */
.page-flow__compare-card--flow {
  border: 2px solid var(--techblue);
  color: var(--ink);
  font-weight: 600;
}

.page-flow__compare-card--flow svg {
  width: 24px;
  height: 24px;
  color: var(--techblue);
  flex: none;
}

.page-flow__compare-card--flow .page-flow__compare-from {
  color: var(--techblue); /* 4.54:1 on white — AA (decorative anyway) */
}

/* The outcome label hugs the right edge in both cards. */
.page-flow__compare-to {
  margin-left: auto;
}

/* =========================================================================
   S3 — Breadth (centered header, three process cards)
   ========================================================================= */
.page-flow__breadth-header {
  text-align: center;
  max-width: 768px;
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

.page-flow__breadth-header h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--indigo);
  margin-bottom: var(--space-2);
}

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

/* The data-dp-reveal-stagger container. */
.page-flow__breadth-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

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

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

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

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

/* Icon + heading row. */
.page-flow__card-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.page-flow__card-head svg {
  width: 24px;
  height: 24px;
  color: var(--techblue);
  flex: none;
}

/* headline-md (24/1.3/500) in Ink. */
.page-flow__card h3 {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink);
}

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

/* Centered pointer to the Flows library. */
.page-flow__breadth-foot {
  text-align: center;
}

.page-flow__breadth-foot p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

/* 16px techblue text link — 4.54:1 on white, passes AA. */
.page-flow__breadth-link {
  font-size: 16px;
  line-height: 1.6;
  color: var(--techblue);
}

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

/* =========================================================================
   S4 — Worked example (the ONE obsidian band)
   ========================================================================= */
.page-flow__example {
  background-color: var(--obsidian);
  color: var(--white);
}

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

.page-flow__example h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--space-3);
}

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

/* Phases panel — tonal island on obsidian; scrolls horizontally over the
   min-width inner track (per the export) instead of squeezing the phases. */
.page-flow__phases {
  background-color: rgba(255, 255, 255, .06); /* panel on obsidian */
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  overflow-x: auto;
}

/* Inner track — export min-w-[800px]; the panel's overflow-x contains it so
   the page itself never scrolls horizontally. */
.page-flow__phases-track {
  min-width: 800px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.page-flow__phase {
  flex: 1 1 0;
  min-width: 0;
}

/* Phase labels — mono 13 (6.41:1 on the .06-white panel — AA). */
.page-flow__phase-label {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted-dark);
  margin-bottom: var(--space-1);
}

/* Activity cards — faint tonal cards; white 14px copy (12.24:1 — AA). */
.page-flow__activity {
  background-color: rgba(255, 255, 255, .05); /* card on the phases panel */
  border: 1px solid rgba(255, 255, 255, .10); /* hairline on the panel */
  border-radius: 4px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--white);
}

/* Gate lines — 12px with the gavel icon; var(--warn) #F59E0B is 6.63:1 on
   the .06-white phases panel (7.85:1 on raw obsidian) — passes AA. */
.page-flow__gate {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-1);
  font-size: 12px;
  line-height: 1.4;
  color: var(--warn);
}

.page-flow__gate svg {
  width: 14px;
  height: 14px;
  flex: none;
}

/* Footer row — note left, links right; stacks under 768. */
.page-flow__example-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}

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

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

.page-flow__example-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* 16px semibold techblue — the sanctioned links-on-dark treatment (3.71:1 on
   obsidian; hover/focus underline keeps them identifiable beyond colour). */
.page-flow__example-link {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--techblue);
}

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

/* =========================================================================
   S5 — Final CTA (gray band, hairline top border)
   ========================================================================= */
.page-flow__cta {
  background-color: var(--gray);
  border-top: 1px solid var(--border);
  text-align: center;
}

.page-flow__cta h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--indigo);
  max-width: 768px;
  margin-inline: auto;
  margin-bottom: var(--space-2);
}

.page-flow__cta-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 768px;
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

.page-flow__cta .page-flow__cta-row {
  justify-content: center;
}

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

  .page-flow__shift h2,
  .page-flow__breadth-header h2,
  .page-flow__example h2,
  .page-flow__cta h2 {
    font-size: 28px;
    line-height: 1.2;
  }
}

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

  /* Hero entrance — flow.js adds .is-ready to the hero on init (double
     rAF); copy rises in with 0/80/160/240/320ms delays. */
  .page-flow__hero .page-flow__eyebrow,
  .page-flow__hero .page-flow__title,
  .page-flow__hero .page-flow__lead,
  .page-flow__hero .page-flow__cta-row,
  .page-flow__hero .page-flow__trust {
    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-flow__hero .page-flow__title {
    transition-delay: 80ms;
  }

  .page-flow__hero .page-flow__lead {
    transition-delay: 160ms;
  }

  .page-flow__hero .page-flow__cta-row {
    transition-delay: 240ms;
  }

  .page-flow__hero .page-flow__trust {
    transition-delay: 320ms;
  }

  .page-flow__hero.is-ready .page-flow__eyebrow,
  .page-flow__hero.is-ready .page-flow__title,
  .page-flow__hero.is-ready .page-flow__lead,
  .page-flow__hero.is-ready .page-flow__cta-row,
  .page-flow__hero.is-ready .page-flow__trust {
    opacity: 1;
    transform: none;
  }

  /* Canvas node graph — hidden until flow.js staggers .is-on onto each node
     (~150ms steps) and then the connectors (visible from the start under
     reduced motion because this base state only exists here). */
  .page-flow__node,
  .page-flow [data-flow-node] {
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity .5s cubic-bezier(0.16, 1, 0.3, 1),
      transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .page-flow__connector,
  .page-flow [data-flow-link] {
    opacity: 0;
    transition: opacity .4s ease;
  }
}

/* Shown-state class hooks (outside the media query: harmless no-ops when
   reduced motion already forces everything visible). */
.page-flow__node.is-on,
.page-flow [data-flow-node].is-on,
.page-flow__connector.is-on,
.page-flow [data-flow-link].is-on {
  opacity: 1;
  transform: none;
}

/* =========================================================================
   Reduced motion — every animated element visible and static
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .page-flow__hero .page-flow__eyebrow,
  .page-flow__hero .page-flow__title,
  .page-flow__hero .page-flow__lead,
  .page-flow__hero .page-flow__cta-row,
  .page-flow__hero .page-flow__trust,
  .page-flow__node,
  .page-flow [data-flow-node],
  .page-flow__connector,
  .page-flow [data-flow-link] {
    opacity: 1;
    transform: none;
  }

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

/* -------------------------------------------------------------------------
   Named markup hooks that intentionally carry no styles of their own:
   block-flow divs or text styled contextually by their parents. Named here
   so every markup class resolves in this sheet (build rule).
   ------------------------------------------------------------------------- */
.page-flow__hero-copy,
.page-flow__shift-copy,
.page-flow__compare-card,
.page-flow__compare-from {
  /* no-op: inherits/contextual (compare-card styling lives on its --di /
     --flow variants, mirroring the extraction compare cards) */
}