/**
 * DocuPOW — Flows Library page styles (page-templates/flows.php only).
 *
 * Scope: everything lives under .page-flows (BEM). Global chrome, container,
 * buttons, links and scroll-reveal come from main.css — this file adds the
 * light-canvas layout, the sticky filter bar, the featured panel, the browse
 * grid, the obsidian band and the value row.
 *
 * Light-canvas contrast contract (tokens + three documented derived values):
 *  - Hero eyebrow / h2 headings are var(--indigo) — 11.52:1 on white,
 *    10.73:1 on --gray (AA).
 *  - h1 / h3 / status labels are var(--ink) — 16.68:1 on white (AA).
 *  - Leads, descriptions, tag chips and the count are var(--text-muted) —
 *    9.34:1 on white, 8.70:1 on --gray (AA).
 *  - Active filter chips are var(--white) on var(--techblue) — 4.54:1 (AA
 *    for the 13px/500 mono label).
 *  - "Explore" card links are var(--techblue) on white — 4.54:1 (AA).
 *  - Obsidian band: var(--white) text — 16.85:1 on --obsidian (AA).
 *  - DERIVED HEX #1 — .page-flows__step-num background rgba(43,118,210,.10):
 *    var(--techblue) at 10% alpha; composites to #EAF1FB over the white
 *    steps card.
 *  - DERIVED HEX #2 — .page-flows__step-num color #276CC1: var(--techblue)
 *    #2B76D2 is only 4.00:1 on that #EAF1FB tint (< 4.5 needed for the
 *    13px mono digits), so the digits use the house ~8%-darkened Tech Blue
 *    (#2B76D2 x 0.92 -> #276CC1, already documented for .dp-btn--primary
 *    hover in main.css) — 4.62:1 on the tint (AA).
 *  - DERIVED HEX #3 — .page-flows__band-pill background
 *    rgba(255,255,255,.10): white at 10% over --obsidian, per the export's
 *    bg-white/10; the pill border is the --border-dark token.
 *  - Status/badge dots are decorative and never the only signal — every
 *    pill carries its text label ("Available"/"Beta"/"Coming Soon").
 *  - FLAT POLICY: the export's card hover:shadow-lg is replaced by the
 *    house lift (+border -> techblue) treatment — zero shadows on this page.
 *
 * Filtering is FUNCTIONAL, not decorative: the [hidden] rule below applies
 * unconditionally (never inside a motion media query), so search/chips work
 * identically under prefers-reduced-motion: reduce.
 *
 * 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 flows.js never runs) everything is visible. NO floats, NO bobs,
 *    NO loops — the ONE bespoke moment is the hero .is-ready entrance.
 *  - flows.js hooks: .is-ready on .page-flows__hero (staged copy entrance:
 *    eyebrow/h1/lead/CTAs/search). main.js owns [data-dp-reveal] and the
 *    stagger delays (flows.js clears the inline delays post-reveal so the
 *    card hover lifts are never postponed).
 *  - Card hover lifts use the standalone `translate` property (never
 *    `transform`) so they can never fight the reveal's transform.
 *  - The sticky filter bar carries no data-dp-reveal: a transform
 *    transition on a position:sticky element jitters, and the controls are
 *    functional chrome.
 *  - A final prefers-reduced-motion: reduce block stills the lifts.
 */

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

/* Filtering visibility — flows.js toggles the [hidden] attribute. Authored
   display values on the cards (flex) would otherwise beat the UA's [hidden]
   rule, so restate it here. Unconditional: filtering works without motion. */
.page-flows [hidden] {
  display: none !important;
}

/* 96px page rhythm on desktop, 64px under 768. Featured + browse share the
   white canvas, so they split the 96 between them (48 + 48); band, custom,
   why and CTA take fuller measures. */
.page-flows__hero {
  padding-block: var(--space-7) var(--space-5);
}

.page-flows__featured {
  padding-block: var(--space-5);
}

.page-flows__browse {
  padding-block: var(--space-5) var(--space-7);
}

.page-flows__band {
  padding-block: var(--space-7);
}

.page-flows__custom {
  padding-block: var(--space-7) var(--space-5);
}

.page-flows__why {
  padding-block: var(--space-5) var(--space-7);
}

.page-flows__cta {
  padding-block: var(--space-7);
}

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

  .page-flows__featured,
  .page-flows__browse,
  .page-flows__custom,
  .page-flows__why {
    padding-block: var(--space-4);
  }

  .page-flows__band,
  .page-flows__cta {
    padding-block: var(--space-6);
  }
}

/* =========================================================================
   S1 — Hero (left-aligned, max 768, live search)
   ========================================================================= */
.page-flows__hero-inner {
  max-width: 768px; /* export max-w-3xl */
}

/* Eyebrow — mono technical label in Royal Indigo per the export's
   text-secondary (11.52:1 on white — AA at 13px semibold). */
.page-flows__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-flows__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-flows__lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 672px; /* export max-w-2xl */
  margin-bottom: var(--space-5);
}

/* CTA pair — shared by the hero and S8 (S8 centers it below). */
.page-flows__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-flows__cta-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Search field — white input, hairline border, 8px radius, inline 20px
   search glyph at the left (decorative; the visually-hidden label carries
   the name). Focus ring comes from the global :focus-visible outline. */
.page-flows__search {
  position: relative;
  max-width: 448px; /* export max-w-md */
  margin-top: var(--space-5);
}

.page-flows__search-icon {
  position: absolute;
  left: var(--space-2);
  top: 50%;
  translate: 0 -50%;
  display: block;
  color: var(--text-muted);
  pointer-events: none;
}

.page-flows__search-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

.page-flows__search-input {
  width: 100%;
  padding: 11px var(--space-2) 11px 44px; /* 48px total height; 44 = 16 inset + 20 glyph + 8 gap */
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
}

.page-flows__search-input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* =========================================================================
   S2 — Sticky filter bar (pinned under the 72px global header)
   ========================================================================= */
.page-flows__filterbar {
  position: sticky;
  top: 72px; /* .dp-nav__inner height in main.css — the bar tucks under the header hairline */
  z-index: 100; /* below the header (1000) and drawer (1100) */
  background-color: var(--white);
  border-bottom: 1px solid var(--border);
  padding-block: var(--space-2);
}

/* Progressive enhancement mirroring .dp-header: translucent + blur where
   supported (white at 95% — derived, documented in the header comment). */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .page-flows__filterbar {
    background-color: rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

.page-flows__filterbar-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Chip row — scrolls horizontally when it cannot fit (phones), scrollbar
   hidden (the house no-scrollbar treatment, scoped here). */
.page-flows__filters {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* Breathing room so chip focus rings are not clipped by the scroll box. */
  padding-block: 2px;
}

.page-flows__filters::-webkit-scrollbar {
  display: none;
}

/* Filter chips — real buttons, mono 13, pill radius. Muted-on-gray resting
   state (8.70:1 — AA); active = techblue fill + white text (4.54:1 — AA),
   always paired with aria-pressed="true" so state is never colour-only. */
.page-flows__chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 6px var(--space-2);
  background-color: var(--gray);
  border: 1px solid var(--border);
  border-radius: 9999px; /* pill — sanctioned for chips/tags per DESIGN.md */
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.page-flows__chip:hover {
  border-color: var(--techblue);
}

.page-flows__chip[aria-pressed="true"] {
  background-color: var(--techblue);
  border-color: var(--techblue);
  color: var(--white);
}

/* The "All" reset chip reads slightly heavier, like the export's lead tab. */
.page-flows__chip--all {
  font-weight: 600;
}

/* Hairline between the reset chip and the tag chips (echo of the export's
   tab/chip divider). */
.page-flows__filters-divider {
  flex: none;
  width: 1px;
  height: 24px;
  background-color: var(--border);
}

/* Result count — aria-live status, mono 13 muted (9.34:1 on white — AA);
   never shrinks into the scrolling chip row. */
.page-flows__count {
  flex: none;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

/* =========================================================================
   S3 — Featured Order-to-Pay panel
   ========================================================================= */
.page-flows__featured-panel {
  background-color: var(--gray);
  border: 1px solid var(--border);
  border-radius: 12px; /* export rounded-xl */
  padding: var(--space-5);
}

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

/* Copy left / steps card right; stacks copy-first under 1024. */
.page-flows__featured-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

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

@media (max-width: 1023.98px) {
  .page-flows__featured-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* Status pill — white pill on the gray panel; --ok dot + mono 13 ink label
   (the text carries the status; the dot is decorative). */
.page-flows__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px var(--space-2);
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.page-flows__status-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--ok);
}

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

/* body-lg lead — 8.70:1 on --gray (AA). */
.page-flows__featured-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 576px; /* export max-w-xl */
  margin-bottom: var(--space-4);
}

/* Secondary button variant — white fill per the export (the ghost secondary
   would read gray-on-gray inside this panel). */
.page-flows__featured-btn {
  background-color: var(--white);
}

/* Steps card — white, hairline border, the five numbered rows. */
.page-flows__steps {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
}

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

/* 32px numbered roundel — techblue @10% tint (#EAF1FB over white) with the
   darkened-techblue mono digit (#276CC1 — 4.62:1 on the tint; plain
   var(--techblue) is only 4.00:1 there. Full math in the header comment). */
.page-flows__step-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(43, 118, 210, .10);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: #276CC1;
}

/* Step label — 16/500 Ink. */
.page-flows__step-label {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink);
}

/* Short vertical hairline connector between rows — block-level, aligned to
   the roundel centre (16px in). */
.page-flows__step-rule {
  display: block;
  width: 1px;
  height: 24px;
  margin-block: var(--space-1);
  margin-left: 16px;
  background-color: var(--border);
}

/* =========================================================================
   S4 — Browse grid (3 -> 2 <1024 -> 1 <768) + zero-results state
   ========================================================================= */

/* headline-md (24/1.3/500) in Royal Indigo (11.52:1 on white — AA). */
.page-flows__browse-heading {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--indigo);
  margin-bottom: var(--space-5);
}

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

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

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

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

/* Flow card — white, hairline border, flex column so the footer link pins
   to the bottom. Hover lifts via the standalone `translate` property so it
   never fights the reveal's transform; border + lift only, ~180ms, NO
   shadows (flat policy — the export's hover:shadow-lg is overridden). The
   reveal stagger's inline transition-delay would postpone the first hover —
   flows.js clears it post-reveal. */
.page-flows__card {
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px; /* export rounded-xl */
  padding: var(--space-3);
  transition:
    opacity .6s ease,
    transform .6s ease,
    translate .18s ease,
    border-color .18s ease;
}

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

/* Header row — icon tile left, status badge right. */
.page-flows__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

/* 40px icon tile — gray surface, hairline border, 20px indigo glyph
   (decorative; the h3 carries the meaning). */
.page-flows__card-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--gray);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--indigo);
}

.page-flows__card-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* Status badge — mono 11 Ink label (16.68:1 — AA; the dot is decorative and
   never the only signal). */
.page-flows__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--space-1);
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px; /* export rounded-md */
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

.page-flows__badge-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

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

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

/* Coming Soon — neutral hairline-gray dot per the export's
   surface-container-highest. */
.page-flows__badge-dot--soon {
  background-color: var(--border);
}

/* Card title — 20/500 Ink. */
.page-flows__card-title {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--space-1);
}

/* Description — flex-grow pushes tags + link to the card bottom. */
.page-flows__card-desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  flex: 1 0 auto;
  margin-bottom: var(--space-3);
}

.page-flows__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

/* Tag chip — mono 12 muted on gray (8.70:1 — AA), 4px radius per the
   export's rounded (chips here are labels, not controls — the interactive
   chips live in the filter bar). */
.page-flows__tag {
  display: inline-flex;
  padding: 2px var(--space-1);
  background-color: var(--gray);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--text-muted);
}

/* Footer link — techblue 500 (4.54:1 — AA); the arrow nudges right on
   hover/focus via `translate`. The muted variant is a SPAN, not an anchor
   (Coming Soon — see the template's sanctioned-correction comment). */
.page-flows__card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: auto;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--techblue);
}

.page-flows__card-link svg {
  width: 16px;
  height: 16px;
  flex: none;
  transition: translate .18s ease;
}

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

a.page-flows__card-link:hover svg,
a.page-flows__card-link:focus-visible svg {
  translate: 4px 0;
}

.page-flows__card-link--muted {
  color: var(--text-muted);
}

/* Zero-results state — hidden until flows.js filters out every card;
   centered mono message + a real reset button. */
.page-flows__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-3);
  text-align: center;
}

.page-flows__empty-msg {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
}

/* =========================================================================
   S5 — Obsidian band (component pills + composition quote)
   ========================================================================= */
.page-flows__band {
  background-color: var(--obsidian);
  text-align: center;
}

.page-flows__band-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

/* Component pill — white @10% over obsidian (derived, documented in the
   header comment) with the --border-dark hairline; mono 13 white label
   (16.85:1 on --obsidian — AA). */
.page-flows__band-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  background-color: rgba(255, 255, 255, .10);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--white);
}

/* The composition principle — headline-md scale in white, max 896. */
.page-flows__quote {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--white);
  max-width: 896px; /* export max-w-4xl */
  margin-inline: auto;
}

/* =========================================================================
   S6 — Custom flows panel (gray rounded band inside the container)
   ========================================================================= */
.page-flows__custom-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  background-color: var(--gray);
  border: 1px solid var(--border);
  border-radius: 12px; /* export rounded-xl */
  padding: var(--space-5);
}

.page-flows__custom-panel > .dp-btn {
  flex: none;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .page-flows__custom-panel {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
  }
}

/* h3-styled h2 (24/1.3/500) in Royal Indigo (10.73:1 on --gray — AA). */
.page-flows__custom-heading {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--indigo);
  letter-spacing: 0;
  margin-bottom: var(--space-1);
}

.page-flows__custom-copy p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 576px; /* export max-w-xl */
}

/* =========================================================================
   S7 — Why start from a flow (centered heading, 4 -> 2 <1024 -> 1 <640)
   ========================================================================= */

/* headline-lg (36/1.2/-0.01em/600) in Royal Indigo, centered. */
.page-flows__why-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-flows__why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

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

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

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

.page-flows__why-item {
  text-align: center;
}

/* 48px icon tile — gray, hairline border, 12px radius, 24px indigo glyph
   (decorative; the h3 carries the meaning). */
.page-flows__why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--gray);
  border: 1px solid var(--border);
  border-radius: 12px; /* export rounded-xl */
  color: var(--indigo);
  margin-bottom: var(--space-2);
}

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

/* 18/500 Ink. */
.page-flows__why-title {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--space-1);
}

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

/* =========================================================================
   S8 — Final CTA (centered pair over a hairline top border)
   ========================================================================= */
.page-flows__cta {
  text-align: center;
  border-top: 1px solid var(--border);
}

/* headline-lg in Royal Indigo. */
.page-flows__cta-heading {
  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-5);
}

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

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

  .page-flows__featured-title,
  .page-flows__why-heading,
  .page-flows__cta-heading {
    font-size: 28px;
    line-height: 1.2;
  }

  .page-flows__browse-heading,
  .page-flows__custom-heading,
  .page-flows__quote {
    font-size: 20px;
    line-height: 1.3;
  }
}

/* =========================================================================
   Motion — entrance base states (no-preference only). Filtering is NOT
   here: it must work under every motion preference.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* Hero entrance — flows.js adds .is-ready to the hero on init (double
     rAF); copy rises in with 0/80/160/240/320ms delays. */
  .page-flows__hero .page-flows__eyebrow,
  .page-flows__hero .page-flows__title,
  .page-flows__hero .page-flows__lead,
  .page-flows__hero .page-flows__cta-row,
  .page-flows__hero .page-flows__search {
    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-flows__hero .page-flows__title {
    transition-delay: 80ms;
  }

  .page-flows__hero .page-flows__lead {
    transition-delay: 160ms;
  }

  .page-flows__hero .page-flows__cta-row {
    transition-delay: 240ms;
  }

  .page-flows__hero .page-flows__search {
    transition-delay: 320ms;
  }

  .page-flows__hero.is-ready .page-flows__eyebrow,
  .page-flows__hero.is-ready .page-flows__title,
  .page-flows__hero.is-ready .page-flows__lead,
  .page-flows__hero.is-ready .page-flows__cta-row,
  .page-flows__hero.is-ready .page-flows__search {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================================
   Reduced motion — every animated element visible and static. Filtering
   ([hidden], chips, count, empty state) is untouched: it is functional.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .page-flows__hero .page-flows__eyebrow,
  .page-flows__hero .page-flows__title,
  .page-flows__hero .page-flows__lead,
  .page-flows__hero .page-flows__cta-row,
  .page-flows__hero .page-flows__search {
    opacity: 1;
    transform: none;
  }

  /* No hover lifts or arrow nudges — :hover included so this outweighs the
     hover rules. */
  .page-flows__card,
  .page-flows__card:hover {
    translate: none;
  }

  .page-flows__card-link svg,
  a.page-flows__card-link:hover svg,
  a.page-flows__card-link:focus-visible svg {
    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-flows__featured-copy {
  /* no-op: block-flow column; layout comes from __featured-grid */
}

.page-flows__custom-copy {
  /* no-op: block-flow column; layout comes from __custom-panel */
}

.page-flows__empty-reset {
  /* no-op: styled by .dp-btn--secondary; named as the reset hook */
}