/**
 * DocuPOW — Shared Solutions-vertical styles (batch-2 solution pages:
 * procurement, hr, supply-chain, legal, fintech-banking, insurance,
 * manufacturing, logistics, real-estate, retail, construction, bpo).
 *
 * ONE stylesheet scoped under .page-solution-vertical, enqueued for all of
 * those templates. Derived from the reviewed solution-operations.css (same
 * design; only the per-vertical copy differs).
 *
 * Scope: everything lives under .page-solution-vertical (BEM). Global chrome,
 * container, buttons, links and scroll-reveal come from main.css — this file
 * adds the section layout (hero + problem + capabilities + flows + Control-Model
 * band + platform strip + CTA) only. Built with no Stitch export: it mirrors the
 * token scale, spacing and components of its siblings (solution-healthcare /
 * solution-accounting / solution-sales) and the how-it-works Control Model.
 *
 * NO page JS: the hero and every section entrance run on main.js's
 * [data-dp-reveal] / [data-dp-reveal-stagger] utilities. main.css owns the
 * reveal base states + the reduced-motion kill-switch; this file adds only the
 * card hover-lift and its reduce override.
 *
 * Light-canvas contrast contract (tokens only — zero new hexes):
 *  - Hero eyebrow + all light-section h2 are var(--indigo) — 11.52:1 on white,
 *    ~10.9:1 on --gray (AA).
 *  - h1 / card h3 are var(--ink) — 16.68:1 on white (AA).
 *  - Subhead, leads, body copy and the mono caption are var(--text-muted) —
 *    9.34:1 on white, 8.70:1 on --gray (AA).
 *  - Tertiary + flow-card links are var(--techblue) — 4.54:1 on white (AA);
 *    they only ever sit on WHITE surfaces (the platform strip is white; flow
 *    cards are white on the gray band), never on --gray at small sizes.
 *  - Card + visual icons are decorative accents (aria-hidden) — the adjacent
 *    text carries the meaning, so the 4.5:1 text rule does not apply to them.
 * Obsidian-band contrast contract:
 *  - Band title + control labels are var(--white) — ~15:1 on --obsidian (AA).
 *  - Band subline is var(--text-muted-dark) — 7.58:1 on --obsidian (AA).
 *  - Control icons are var(--techblue) — 3.71:1 >= 3:1 on --obsidian (icon-only
 *    accent), and the label text beside them carries the meaning.
 *
 * Motion contract (transform/opacity only — STANDARD tier):
 *  - No entrance base states are authored here — main.css owns them for every
 *    [data-dp-reveal] element (hero included; it is above the fold so its
 *    observer reveal fires on load). NO floats, NO loops, NO count-ups.
 *  - Card hover-lifts use the standalone `translate` property (never
 *    `transform`) so they can never fight the reveal's transform, and are
 *    disabled under prefers-reduced-motion at the end of this file.
 */

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

/* 96px section padding on desktop, 64px under 768. */
.page-solution-vertical__hero,
.page-solution-vertical__problem,
.page-solution-vertical__caps,
.page-solution-vertical__flows,
.page-solution-vertical__band,
.page-solution-vertical__platform,
.page-solution-vertical__cta {
  padding-block: var(--space-7);
}

@media (max-width: 767.98px) {
  .page-solution-vertical__hero,
  .page-solution-vertical__problem,
  .page-solution-vertical__caps,
  .page-solution-vertical__flows,
  .page-solution-vertical__band,
  .page-solution-vertical__platform,
  .page-solution-vertical__cta {
    padding-block: var(--space-6);
  }
}

/* Workspace-gray bands with a hairline top edge for crisp delineation from the
   adjacent white sections. */
.page-solution-vertical__problem,
.page-solution-vertical__flows,
.page-solution-vertical__cta {
  background-color: var(--gray);
  border-top: 1px solid var(--border);
}

/* Shared light-section h2 — headline-lg (36/1.2/-0.01em/600) in Royal Indigo. */
.page-solution-vertical__problem h2,
.page-solution-vertical__caps h2,
.page-solution-vertical__flows h2,
.page-solution-vertical__cta h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--indigo);
}

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

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

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

/* Named markup hook: block-flow copy column sized by the hero grid. Also the
   stagger container for the hero entrance (main.js delays its direct
   [data-dp-reveal] children). */
.page-solution-vertical__hero-copy {
  /* no-op layout: column comes from __hero-grid */
}

/* Eyebrow — mono technical label in Royal Indigo (11.52:1 on white — AA). */
.page-solution-vertical__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. */
.page-solution-vertical__title {
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

/* Hero paragraph — body-lg (18/1.6) muted; this hero has one descriptive
   paragraph in the subhead slot (not a short punchy subhead + lead pair). */
.page-solution-vertical__subhead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 600px;
  margin-bottom: var(--space-4);
}

/* CTA pair — shared by the hero and the final CTA (which centers it). */
.page-solution-vertical__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-solution-vertical__cta-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Hero visual — flat placeholder panel (gray surface, hairline border, centered
   glyph + mono caption). Decorative (aria-hidden), NO gradient border, no
   shadow (flat policy — not a floating product screenshot). */
.page-solution-vertical__visual {
  background-color: var(--gray);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-height: 400px;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
}

.page-solution-vertical__visual-icon {
  display: block;
  color: var(--techblue); /* decorative glyph */
}

.page-solution-vertical__visual-icon svg {
  display: block;
  width: 56px;
  height: 56px;
}

/* Mono 13 caption — var(--text-muted) is 8.70:1 on --gray (AA). */
.page-solution-vertical__visual-caption {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
}

/* =========================================================================
   S2 — Problem band (gray, left-aligned header + body paragraph)
   ========================================================================= */
.page-solution-vertical__problem-head {
  max-width: 768px;
}

.page-solution-vertical__problem-head h2 {
  margin-bottom: var(--space-3);
}

.page-solution-vertical__problem-body {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* =========================================================================
   S3 — Capabilities (white canvas, 2x2 gray cards; icon + title + body)
   ========================================================================= */
.page-solution-vertical__caps h2 {
  margin-bottom: var(--space-5);
}

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

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

/* Optional tertiary link below the capability grid (e.g. "see how we handle
   security"). Sits on the WHITE caps canvas, so techblue is 4.54:1 (AA) — never
   inside the gray cards. */
.page-solution-vertical__caps-more {
  margin-top: var(--space-4);
}

.page-solution-vertical__caps-more-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--techblue);
}

.page-solution-vertical__caps-more-link:hover,
.page-solution-vertical__caps-more-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-solution-vertical__caps-more-link svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Cards stack to one column under 768 (4 substantial cards read better 2-up
   than 4-up, so the desktop grid is 2 columns; the sibling __does grids agree). */
@media (max-width: 767.98px) {
  .page-solution-vertical__caps-grid {
    grid-template-columns: 1fr;
  }
}

/* Gray cards on the white canvas. Hover lifts via the standalone `translate`
   property (never `transform`) so it cannot fight the reveal; border + lift
   only, ~180ms, NO shadows. */
.page-solution-vertical__cap {
  background-color: var(--gray);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition:
    translate .18s ease,
    border-color .18s ease;
}

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

.page-solution-vertical__cap-icon {
  display: block;
  color: var(--techblue); /* decorative accent */
}

.page-solution-vertical__cap-icon svg {
  display: block;
  width: 28px;
  height: 28px;
}

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

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

/* =========================================================================
   S4 — Flows for Operations (gray band, intro + two white flow cards)
   ========================================================================= */
.page-solution-vertical__flows-head {
  max-width: 768px;
  margin-bottom: var(--space-5);
}

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

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

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

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

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

/* White flow cards on the gray band. Same flat hover-lift as the capability
   cards; the techblue link sits on the white card face (4.54:1 — AA). */
.page-solution-vertical__flow-card {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition:
    translate .18s ease,
    border-color .18s ease;
}

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

.page-solution-vertical__flow-icon {
  display: block;
  color: var(--techblue); /* decorative accent */
}

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

.page-solution-vertical__flow-title {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink);
}

.page-solution-vertical__flow-desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  /* push the link to the card foot so the two cards align */
  margin-bottom: var(--space-1);
}

/* Tertiary link — Tech Blue text link, 1px underline on hover; 16px arrow
   rides along. Nudged to the card foot via the desc margin above. */
.page-solution-vertical__flow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: auto;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--techblue);
}

.page-solution-vertical__flow-link:hover,
.page-solution-vertical__flow-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-solution-vertical__flow-link svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* =========================================================================
   S5 — Control-Model band (obsidian): headline + subline + four points
   ========================================================================= */
.page-solution-vertical__band {
  background-color: var(--obsidian);
  color: var(--white);
  border-top: 1px solid var(--border-dark);
  text-align: center;
}

/* Light halo focus ring on the dark surface (house pattern; harmless when the
   band carries no interactive elements). */
.page-solution-vertical__band :focus-visible {
  outline-color: var(--techblue);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .25);
}

/* headline-lg in white for the band headline. */
.page-solution-vertical__band-title {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--white);
  max-width: 768px;
  margin-inline: auto;
  margin-bottom: var(--space-3);
}

/* body-lg subline — var(--text-muted-dark) is 7.58:1 on obsidian (AA). */
.page-solution-vertical__band-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted-dark);
  max-width: 768px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

/* Four governance points — 4 across, 2-up under 1024, single column under 640
   (per the spec's 4->2->1). */
.page-solution-vertical__control-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

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

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

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

/* Each point — centered column: 32px techblue icon over a white label. */
.page-solution-vertical__control-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.page-solution-vertical__control-item > svg {
  width: 32px;
  height: 32px;
  color: var(--techblue); /* icon-only accent — 3.71:1 >= 3:1 on obsidian */
  margin-bottom: var(--space-2);
  flex: none;
}

/* The point label carries the meaning, so it is white (~15:1 on obsidian). */
.page-solution-vertical__control-label {
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--white);
  max-width: 26ch;
  margin-bottom: var(--space-1);
}

/* The explanatory sentence under each control point (batch-2 control copy has
   a bold statement + a sentence). --text-muted-dark is 7.58:1 on obsidian. */
.page-solution-vertical__control-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted-dark);
  max-width: 30ch;
}

/* =========================================================================
   S6 — Built on the platform (white strip, small heading + tertiary links)
   ========================================================================= */
.page-solution-vertical__platform {
  text-align: center;
}

/* Mono label heading — small, understated, Royal Indigo. */
.page-solution-vertical__platform-head {
  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-4);
}

.page-solution-vertical__platform-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
}

/* Tertiary link — Tech Blue text link (4.54:1 on white — AA), underline on
   hover, 16px arrow rides along. */
.page-solution-vertical__platform-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--techblue);
}

.page-solution-vertical__platform-link:hover,
.page-solution-vertical__platform-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-solution-vertical__platform-link svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* =========================================================================
   S7 — Final CTA (gray band, centered, hairline top border)
   ========================================================================= */
.page-solution-vertical__cta {
  text-align: center;
}

.page-solution-vertical__cta h2 {
  max-width: 768px;
  margin-inline: auto;
  margin-bottom: var(--space-3);
}

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

.page-solution-vertical__cta .page-solution-vertical__cta-row {
  justify-content: center;
}

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

  .page-solution-vertical__problem h2,
  .page-solution-vertical__caps h2,
  .page-solution-vertical__flows h2,
  .page-solution-vertical__cta h2,
  .page-solution-vertical__band-title {
    font-size: 28px;
    line-height: 1.2;
  }

  .page-solution-vertical__cap h3,
  .page-solution-vertical__flow-title {
    font-size: 20px;
    line-height: 1.3;
  }
}

/* =========================================================================
   Reduced motion — disable the card hover-lifts (entrances are handled
   globally by main.css). :hover included so this outweighs the hover rules.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .page-solution-vertical__cap,
  .page-solution-vertical__cap:hover,
  .page-solution-vertical__flow-card,
  .page-solution-vertical__flow-card:hover {
    translate: none;
  }
}