/**
 * DocuPOW — Platform Overview page styles (page-templates/platform.php only).
 *
 * Scope: everything lives under .page-platform (BEM). Global chrome,
 * container, buttons, links, scroll-reveal and the gradient border come from
 * main.css — this file adds the light-canvas layout, the two product mocks,
 * the hierarchy chain 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).
 *  - Body copy is var(--text-muted) (9.34:1 on white, 8.70:1 on --gray).
 *  - The mono confidence label uses #0A7B56 (darkened --ok — 5.28:1 on
 *    white, 4.92:1 on --gray; raw --ok fails 4.5:1) — same precedent as
 *    how-it-works.css.
 *  - The only shadows are var(--shadow) on the two product mocks (floating
 *    product-UI exception per DESIGN.md).
 *
 * Motion contract (lighter than Home; transform/opacity only):
 *  - Hidden "entrance" base states sit inside
 *    @media (prefers-reduced-motion: no-preference), so with reduced motion
 *    (or if platform.js never runs under that preference) everything is
 *    visible. NO float loops, NO bobs on this page.
 *  - platform.js hooks: .is-ready on .page-platform__hero (staged copy
 *    entrance + logo scale-in); .is-active shows the [data-plat-pulse] dot
 *    row; .is-visible fades [data-plat-conf] in; .is-pulsed plays the
 *    one-shot approval-node pulse on [data-plat-node]. main.js owns
 *    [data-dp-reveal] and the stagger delays (platform.js clears the inline
 *    delays post-reveal so the hierarchy hover lift is 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, hairlines
   ========================================================================= */
.page-platform {
  overflow-x: clip; /* insurance: nothing may cause horizontal scroll @320px */
}

/* 96px section padding on desktop, 64px under 768. */
.page-platform__hero,
.page-platform__di,
.page-platform__flow,
.page-platform__hierarchy,
.page-platform__cta {
  padding-block: var(--space-7);
}

@media (max-width: 767.98px) {
  .page-platform__hero,
  .page-platform__di,
  .page-platform__flow,
  .page-platform__hierarchy,
  .page-platform__cta {
    padding-block: var(--space-6);
  }
}

/* 1px hairline separators per the export (DI + Flow were one export
   section, so __flow carries none). */
.page-platform__di,
.page-platform__hierarchy,
.page-platform__cta {
  border-top: 1px solid var(--border);
}

/* =========================================================================
   S1 — Hero (centered, logo floats right on desktop)
   ========================================================================= */
.page-platform__hero {
  text-align: center;
}

/* Eyebrow — mono technical label in Royal Indigo (12.4:1 on white). */
.page-platform__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  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). Royal Indigo to match
   the site's hero convention (Home, How it works, Extraction, Infinity all
   set their h1 in --indigo — 10.71:1 on white, AA); the export's flat ink was
   the outlier the owner flagged. */
.page-platform__title {
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--indigo);
  max-width: 896px;
  margin-inline: auto;
  margin-bottom: var(--space-5); /* export mb-lg */
}

/* body-lg subhead. */
.page-platform__subhead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 672px;
  margin-inline: auto;
}

/* Hero visual — the Infinity mascot (user-directed swap from the dp logo
   mark). <1024: a centered block below the copy; >=1024: floats right of the
   headline (absolute, vertically centered). Full opacity — an intentional
   product illustration, not the faded watermark the logo mark was. */
.page-platform__mascot {
  display: block;
  height: 120px;
  width: auto;
  margin-inline: auto;
  margin-top: var(--space-5);
}

@media (min-width: 1024px) {
  /* Positioning context so the mascot hugs the container's content edge. */
  .page-platform__hero .dp-container {
    position: relative;
  }

  .page-platform__mascot {
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--space-3); /* aligns with the container padding edge */
    height: 160px;
    margin: auto 0; /* vertical centering (fixed height + top/bottom 0) */
  }
}

/* =========================================================================
   S2 + S3 — Feature rows (Document Intelligence / DocuPOW Flow)
   ========================================================================= */

/* 2-col grid, gap 48, vertically centered. Source order is copy-first in
   both sections; S3 mirrors on desktop via an order swap (below). */
.page-platform__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: center;
}

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

/* S3 mirror — visual LEFT on desktop (order swap like how-it-works 2/5). */
@media (min-width: 1024px) {
  .page-platform__flow .page-platform__band {
    order: -1;
  }
}

/* Feature headings — headline-lg (36/1.2/-0.01em/600). Royal Indigo to match
   the hero h1 + the site's section-heading convention (the export's flat ink
   read inconsistent against the already-indigo Enterprise Hierarchy + CTA
   headings on this same page). */
.page-platform__di h2,
.page-platform__flow h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--indigo);
  margin-bottom: var(--space-3);
}

/* Feature body copy — 48px to the tertiary link (export gap-md + mb-md). */
.page-platform__di h2 + p,
.page-platform__flow h2 + p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}

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

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

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

/* Visual band — muted tonal layer framing each product mock. */
.page-platform__band {
  height: 384px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--gray);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
}

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

/* -------------------------------------------------------------------------
   Product mocks — shared card shell (both carry data-dp-gradient-border)
   ------------------------------------------------------------------------- */
.page-platform__mock--extract,
.page-platform__mock--flow,
.page-platform [data-plat-extract],
.page-platform [data-plat-flow] {
  width: 100%;
  max-width: 448px;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow); /* soft shadow allowed — floating product UI */
  padding: var(--space-3);
}

/* -------------------------------------------------------------------------
   Extract mock — header row, confidence label, pulse row, skeleton bars
   ------------------------------------------------------------------------- */

/* Mock label — inherits the header row's mono type; named for the class contract. */
.page-platform__mock-label {
  display: inline-block;
}

/* Header row — the mock's first child: mono label left, confidence right. */
.page-platform__mock-head,
.page-platform__mock--extract > :first-child,
.page-platform [data-plat-extract] > :first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
}

/* Confidence label — mono success text; fades in after the pulse (motion
   block below). Illustrative product-UI stat per the export. */
.page-platform__conf,
.page-platform [data-plat-conf] {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: #0A7B56; /* darkened --ok — 5.28:1 on white (raw --ok fails 4.5:1) */
  flex: none;
}

/* Agent pulse row — hidden until platform.js shows it (home.css pattern). */
.page-platform__pulse,
.page-platform [data-plat-pulse] {
  display: none;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.page-platform__pulse.is-active,
.page-platform__pulse.is-visible,
.page-platform [data-plat-pulse].is-active,
.page-platform [data-plat-pulse].is-visible {
  display: flex;
}

.page-platform__pulse-dot,
.page-platform__pulse > *,
.page-platform [data-plat-pulse] > * {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--indigo);
  flex: none;
}

/* Skeleton bars — widths 75% / 50% / 83% via adjacent-sibling chain (the
   three bars are consecutive siblings). */
.page-platform__skeleton {
  display: block; /* spans — inline boxes ignore width/height */
  height: 16px;
  width: 75%;
  background-color: var(--border); /* surface-variant -> --border (mapping) */
  border-radius: 4px;
}

.page-platform__skeleton + .page-platform__skeleton {
  width: 50%;
  margin-top: var(--space-2);
}

.page-platform__skeleton + .page-platform__skeleton + .page-platform__skeleton {
  width: 83%;
}

/* -------------------------------------------------------------------------
   Flow mock — system rows, dashed connectors, approval node
   ------------------------------------------------------------------------- */
.page-platform__mock--flow,
.page-platform [data-plat-flow] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

/* System rows — 32px muted bars: skeleton pill left, icon right. */
.page-platform__flow-row {
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  padding-inline: var(--space-2);
  background-color: var(--gray);
  border-radius: 4px;
}

/* Inner skeleton pill — 64px in the top row, 96px in the bottom row. */
.page-platform__flow-pill,
.page-platform__flow-row > :first-child {
  height: 8px;
  width: 64px;
  background-color: var(--border);
  border-radius: 4px;
  flex: none;
}

.page-platform__flow-row:last-child .page-platform__flow-pill,
.page-platform__flow-row:last-child > :first-child {
  width: 96px;
}

/* Row icons — gear (top) / database (bottom). */
.page-platform__flow-row svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  flex: none;
}

/* Dashed connectors — centered 0-width elements between the rows. */
.page-platform__connector {
  height: 32px;
  width: 0;
  border-left: 2px dashed var(--border);
}

/* Approval node — Tech-Blue pill; one soft pulse on section reveal
   (.is-pulsed, motion block below). */
.page-platform__node-pill,
.page-platform [data-plat-node] {
  width: 75%;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--techblue);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  border-radius: 4px;
}

/* =========================================================================
   S4 — Enterprise hierarchy (chain of four nodes)
   ========================================================================= */
.page-platform__hierarchy {
  text-align: center;
}

/* headline-md per the export (24/1.3/500) — does not scale down. */
.page-platform__hierarchy h2 {
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: normal;
  font-weight: 500;
  color: var(--indigo);
}

/* Subline. */
.page-platform__subline,
.page-platform__hierarchy h2 + p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: var(--space-2);
  margin-bottom: var(--space-5);
}

/* The chain — an <ol> laid out as a centered flex row. It is the stagger
   container (data-dp-reveal-stagger); items + separators reveal in
   sequence via main.js's inline delays. */
.page-platform__chain {
  list-style: none;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-3);
  max-width: 896px;
  margin-inline: auto;
}

.page-platform__chain-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex; /* the node card stretches to the item's full size */
}

/* Node cards — muted tonal layer; mono 13 ink label under a 32px icon.
   Hover lifts via the standalone `translate` property so it never fights
   the reveal's `transform`; border + lift only, 180ms, NO shadows. */
.page-platform__node {
  position: relative; /* badge anchor */
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background-color: var(--gray);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
  transition: translate .18s ease, border-color .18s ease;
}

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

/* Node label — inherits the node's mono type; named for the class contract. */
.page-platform__node-label {
  display: block;
}

.page-platform__node svg {
  width: 32px;
  height: 32px;
  color: var(--indigo);
  flex: none;
}

/* Connectors — 32x2 indigo dashes between items. The colour carries the .5
   emphasis via an rgba tint (NOT opacity: the separators may share
   [data-dp-reveal], whose hidden/revealed states also drive opacity). */
.page-platform__chain-sep {
  flex: none;
  align-self: center;
  width: 32px;
  height: 2px;
  background-color: rgba(61, 46, 112, .5); /* indigo @ 50% */
}

/* Smart Asset badge — success roundel pinned to the last node's corner
   (status is also announced via a visually-hidden "verified" span). */
.page-platform__badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--ok);
  color: var(--white);
}

.page-platform__badge svg {
  width: 10px;
  height: 10px;
  flex: none;
}

/* <768 — the chain becomes a vertical stepper: full-width row nodes (icon
   left, label right), separators rotate to 2x32 uprights. */
@media (max-width: 767.98px) {
  .page-platform__chain {
    flex-direction: column;
    align-items: stretch;
  }

  .page-platform__chain-item {
    flex: none;
  }

  .page-platform__node {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
  }

  .page-platform__chain-sep {
    width: 2px;
    height: 32px;
  }
}

/* =========================================================================
   S5 — Final CTA
   ========================================================================= */
.page-platform__cta {
  text-align: center;
}

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

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

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

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

  .page-platform__di h2,
  .page-platform__flow h2,
  .page-platform__cta h2 {
    font-size: 28px;
    line-height: 1.2;
  }
}

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

  /* Hero entrance — platform.js adds .is-ready to the hero on init (double
     rAF); copy rises in with 0/80/160ms delays. */
  .page-platform__hero .page-platform__eyebrow,
  .page-platform__hero .page-platform__title,
  .page-platform__hero .page-platform__subhead {
    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-platform__hero .page-platform__title {
    transition-delay: 80ms;
  }

  .page-platform__hero .page-platform__subhead {
    transition-delay: 160ms;
  }

  .page-platform__hero.is-ready .page-platform__eyebrow,
  .page-platform__hero.is-ready .page-platform__title,
  .page-platform__hero.is-ready .page-platform__subhead {
    opacity: 1;
    transform: none;
  }

  /* Mascot — gentle scale-in (.96 -> 1, 600ms) to full opacity. NO float
     loop afterwards (lighter than Home). */
  .page-platform__mascot {
    opacity: 0;
    transform: scale(.96);
    transition:
      opacity .6s cubic-bezier(0.16, 1, 0.3, 1),
      transform .6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .page-platform__hero.is-ready .page-platform__mascot {
    opacity: 1;
    transform: none;
  }

  /* Confidence label — fades in after the extract pulse (visible from the
     start under reduced motion because this base state only exists here). */
  .page-platform__conf,
  .page-platform [data-plat-conf] {
    opacity: 0;
    transition: opacity .6s ease;
  }

  /* Pulse dots — staggered opacity loop while the row is shown. */
  .page-platform__pulse > *,
  .page-platform [data-plat-pulse] > * {
    animation: dp-plat-dot 1.2s ease-in-out infinite;
  }

  .page-platform__pulse > :nth-child(2),
  .page-platform [data-plat-pulse] > :nth-child(2) {
    animation-delay: .2s;
  }

  .page-platform__pulse > :nth-child(3),
  .page-platform [data-plat-pulse] > :nth-child(3) {
    animation-delay: .4s;
  }

  /* Approval node — ONE soft pulse (scale <= 1.03) when platform.js adds
     .is-pulsed on section reveal. */
  .page-platform__node-pill.is-pulsed,
  .page-platform [data-plat-node].is-pulsed {
    animation: dp-plat-node-pulse .8s ease-in-out 1;
  }

  /* Smart Asset badge — scales in last: the 1s delay lands after the chain
     stagger (~480ms inline delay + 600ms reveal) once the last item gets
     .is-revealed. */
  .page-platform__badge {
    opacity: 0;
    transform: scale(.5);
    transition:
      opacity .4s cubic-bezier(0.16, 1, 0.3, 1) 1s,
      transform .4s cubic-bezier(0.16, 1, 0.3, 1) 1s;
  }
}

/* Shown-state class hooks (outside the media query: harmless no-ops when
   reduced motion already forces everything visible). */
.page-platform__conf.is-visible,
.page-platform [data-plat-conf].is-visible,
.page-platform__chain-item.is-revealed .page-platform__badge,
.page-platform__badge.is-visible {
  opacity: 1;
  transform: none;
}

/* Keyframes (only ever attached inside the no-preference block above). */
@keyframes dp-plat-dot {
  0%,
  100% {
    opacity: .25;
  }

  50% {
    opacity: 1;
  }
}

@keyframes dp-plat-node-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.03);
    opacity: .85;
  }
}

/* =========================================================================
   Reduced motion — every animated element visible and static
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .page-platform__hero .page-platform__eyebrow,
  .page-platform__hero .page-platform__title,
  .page-platform__hero .page-platform__subhead,
  .page-platform__conf,
  .page-platform [data-plat-conf],
  .page-platform__badge {
    opacity: 1;
    transform: none;
  }

  /* The mascot stays fully visible, never scaled. */
  .page-platform__mascot {
    opacity: 1;
    transform: none;
  }

  .page-platform__node-pill,
  .page-platform [data-plat-node],
  .page-platform__pulse > *,
  .page-platform [data-plat-pulse] > * {
    animation: none;
  }

  /* The "thinking" pulse row is purely decorative — never shown. */
  .page-platform__pulse,
  .page-platform [data-plat-pulse] {
    display: none !important;
  }

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