/**
 * DocuPOW — Solutions: Accounting page styles
 * (page-templates/solution-accounting.php only).
 *
 * Scope: everything lives under .page-sol-accounting (BEM). Global chrome,
 * container, buttons, links and scroll-reveal come from main.css — this file
 * adds the light-canvas layout, the two gray bands, the obsidian process
 * strip and the page-specific motion only. NO gradient borders on this page
 * (budget 0): the hero panel holds mascot imagery, not a product mock.
 *
 * Light-canvas contrast contract (tokens only — zero new hexes):
 *  - Hero eyebrow is 13px mono semibold var(--techblue) — 4.54:1 on white,
 *    passes AA.
 *  - h2 headings are var(--indigo) — 11.52:1 on white, 10.73:1 on --gray (AA).
 *  - Body copy and the 13px mono doc labels are var(--text-muted) — 9.34:1 on
 *    white, 8.70:1 on --gray (AA).
 *  - h1 / h3 / change labels are var(--ink) — 16.68:1 on white (AA).
 *  - The S6 metric dash is 36px mono var(--techblue) — 4.54:1 on white
 *    (large text: AA needs 3:1).
 *  - The S2 var(--warn) icons are decorative, non-text accents (aria-hidden,
 *    ~2.15:1 on white) — the adjacent h3s carry the meaning, so the text
 *    contrast rule does not apply to them.
 *
 * Dark band (S5) contrast contract:
 *  - h2 and step labels are var(--white) on var(--obsidian) — 17.21:1 (AA).
 *  - Step numbers: the export uses primary-fixed #d6e3ff on dark; the token
 *    palette has no such tint, so they map to var(--text-muted-dark)
 *    (#A8AEBC) — 7.58:1 on obsidian, comfortably >= 4.5:1 AA. (The export
 *    tint would be 13.35:1; the token keeps this sheet hex-free.)
 *  - The center hairline is var(--border-dark) (rgba(255,255,255,.12)) —
 *    decorative, hidden when the strip stacks (<768).
 *
 * 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 solution-accounting.js never runs) everything is visible.
 *    NO floats, NO bobs, NO count-ups on this page.
 *  - solution-accounting.js hooks: .is-ready on .page-sol-accounting__hero
 *    (staged copy entrance: eyebrow/h1/subhead/lead/CTAs + visual); .is-on
 *    lights each [data-sol-phase] sequentially left->right (~120ms steps,
 *    opacity + slight rise) — the page's ONE one-shot moment, played once on
 *    first view (IntersectionObserver). main.js owns [data-dp-reveal] and the
 *    stagger delays (the page JS clears the inline delays post-reveal so
 *    hover lifts are never postponed).
 *  - Card 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 — light canvas, section rhythm
   ========================================================================= */
.page-sol-accounting {
  overflow-x: clip; /* insurance: nothing may cause horizontal scroll @320px */
}

/* 96px section padding on desktop, 64px under 768. */
.page-sol-accounting__hero,
.page-sol-accounting__problem,
.page-sol-accounting__does,
.page-sol-accounting__docs,
.page-sol-accounting__band,
.page-sol-accounting__changes,
.page-sol-accounting__cta {
  padding-block: var(--space-7);
}

@media (max-width: 767.98px) {
  .page-sol-accounting__hero,
  .page-sol-accounting__problem,
  .page-sol-accounting__does,
  .page-sol-accounting__docs,
  .page-sol-accounting__band,
  .page-sol-accounting__changes,
  .page-sol-accounting__cta {
    padding-block: var(--space-6);
  }
}

/* Shared h2 — headline-lg (36/1.2/-0.01em/600) in Royal Indigo (11.52:1 on
   white, 10.73:1 on --gray — AA). */
.page-sol-accounting__problem h2,
.page-sol-accounting__does h2,
.page-sol-accounting__docs h2,
.page-sol-accounting__changes h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--indigo);
}

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

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

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

/* Eyebrow — mono technical label in Tech Blue per the export's text-primary
   (4.54:1 on white — AA at 13px semibold). */
.page-sol-accounting__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(--techblue);
  margin-bottom: var(--space-2);
}

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

/* headline-md subhead (24/1.3/500), muted. */
.page-sol-accounting__subhead {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

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

/* Mascot panel — flat tonal panel per the export (12px radius = rounded-xl,
   min-height ~400). Imagery, not a product mock: no gradient border, and no
   shadow (the flat-design exception is for floating product UI only). */
.page-sol-accounting__hero-visual {
  background-color: var(--gray);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-height: 400px;
  padding: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Export w-64 (256px) render width; intrinsic 577x640 attrs prevent CLS. */
.page-sol-accounting__mascot {
  width: 256px;
  max-width: 100%;
  height: auto;
}

/* =========================================================================
   S2 — Problem band (gray, hairline y-borders, three white pain cards)
   ========================================================================= */
.page-sol-accounting__problem {
  background-color: var(--gray);
  border-block: 1px solid var(--border);
}

/* Left-aligned header block per the export (max-w-3xl = 768px). */
.page-sol-accounting__problem-head {
  max-width: 768px;
  margin-bottom: var(--space-5);
}

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

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

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

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

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

/* White pain cards. Hover lifts via the standalone `translate` property so
   it never fights the reveal's `transform`; border + lift only, ~180ms, NO
   shadows (flat policy). The reveal stagger's inline transition-delay would
   postpone the first hover — solution-accounting.js clears it post-reveal. */
.page-sol-accounting__pain-card {
  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-sol-accounting__pain-card:hover {
  translate: 0 -6px;
  border-color: var(--techblue);
}

/* Warn-tinted decorative icon (non-text accent; markup is aria-hidden). */
.page-sol-accounting__pain-icon {
  display: block;
  color: var(--warn);
  margin-bottom: var(--space-3);
}

.page-sol-accounting__pain-icon svg {
  width: 32px;
  height: 32px;
}

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

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

/* =========================================================================
   S3 — What DocuPOW does (white canvas, 2x2 gray cards)
   ========================================================================= */
.page-sol-accounting__does h2 {
  margin-bottom: var(--space-5);
}

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

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

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

/* Gray feature cards — 12px radius (export rounded-xl), generous 48px
   padding. Same lift-only hover as the pain cards. */
.page-sol-accounting__does-card {
  background-color: var(--gray);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-5);
  transition:
    opacity .6s ease,
    transform .6s ease,
    translate .18s ease,
    border-color .18s ease;
}

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

/* Decorative icon — techblue by default (export text-primary). */
.page-sol-accounting__does-icon {
  display: block;
  color: var(--techblue);
  margin-bottom: var(--space-2);
}

/* The "Ask Infinity" card icon — indigo (export text-secondary). */
.page-sol-accounting__does-icon--indigo {
  color: var(--indigo);
}

.page-sol-accounting__does-icon svg {
  width: 28px;
  height: 28px;
}

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

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

/* =========================================================================
   S4 — Built for your documents (gray band, centered roundel row)
   ========================================================================= */
.page-sol-accounting__docs {
  background-color: var(--gray);
  border-block: 1px solid var(--border);
  text-align: center;
}

.page-sol-accounting__docs h2 {
  margin-bottom: var(--space-5);
}

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

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

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

.page-sol-accounting__doc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

/* 64px white roundel, hairline border, muted 24px icon. Flat — the export's
   shadow-sm is dropped per the flat policy (tonal layers, not shadows). */
.page-sol-accounting__doc-circle {
  width: 64px;
  height: 64px;
  flex: none;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.page-sol-accounting__doc-circle svg {
  width: 24px;
  height: 24px;
}

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

/* =========================================================================
   S5 — Dark band (obsidian, five-step strip over a center hairline)
   ========================================================================= */
.page-sol-accounting__band {
  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-sol-accounting__band :focus-visible {
  outline-color: var(--techblue);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); /* light halo on obsidian */
}

.page-sol-accounting__band h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--white); /* 17.21:1 on obsidian — AA */
  text-align: center;
  margin-bottom: var(--space-5);
}

/* Horizontal strip; the center hairline is an absolutely-positioned pseudo
   behind the obsidian-backed step items (so the line reads as passing
   between them, per the export). */
.page-sol-accounting__phases {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-3);
}

.page-sol-accounting__phases::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--border-dark); /* rgba(255,255,255,.12) token */
}

/* Step items — obsidian-backed so they sit over the hairline. */
.page-sol-accounting__phase {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  background-color: var(--obsidian);
  padding: var(--space-1) var(--space-2);
  text-align: center;
  min-width: 0;
}

/* Mono 13 step numbers — var(--text-muted-dark): 7.58:1 on obsidian, well
   over the 4.5:1 AA floor. (The export's primary-fixed #d6e3ff light tint
   would be 13.35:1 but is not in the token palette — token mapping keeps
   this sheet hex-free.) */
.page-sol-accounting__phase-num {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted-dark);
}

/* 16/500 white labels — 17.21:1 on obsidian (AA). */
.page-sol-accounting__phase-label {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--white);
}

/* <768 — the strip stacks vertically; the hairline is hidden. */
@media (max-width: 767.98px) {
  .page-sol-accounting__phases {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .page-sol-accounting__phases::before {
    display: none;
  }
}

/* =========================================================================
   S6 — What changes (white canvas, four outcome cards)
   ========================================================================= */
.page-sol-accounting__changes {
  text-align: center;
}

.page-sol-accounting__changes h2 {
  margin-bottom: var(--space-5);
}

/* 4 cols >=1024, 2 cols 768–1023, 1 col <768. */
.page-sol-accounting__changes-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

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

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

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

.page-sol-accounting__change {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  text-align: center;
}

/* The designed empty-metric slot — mono 36 Tech Blue en dash (4.54:1 on
   white; large-text AA needs 3:1). NO count-ups; the dash stays until a
   verified figure replaces it in the template. */
.page-sol-accounting__change-metric {
  display: block;
  font-family: var(--font-mono);
  font-size: 36px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--techblue);
  margin-bottom: var(--space-1);
}

/* 16/500 Ink outcome label. */
.page-sol-accounting__change-label {
  display: block;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink);
}

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

/* 48/700 Royal Indigo per the spec (10.73:1 on --gray — AA). */
.page-sol-accounting__cta h2 {
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--indigo);
  max-width: 768px;
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

.page-sol-accounting__cta .page-sol-accounting__cta-row {
  justify-content: center;
}

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

  .page-sol-accounting__cta h2 {
    font-size: 36px;
    line-height: 1.1;
  }

  .page-sol-accounting__problem h2,
  .page-sol-accounting__does h2,
  .page-sol-accounting__docs h2,
  .page-sol-accounting__changes h2,
  .page-sol-accounting__band h2 {
    font-size: 28px;
    line-height: 1.2;
  }

  .page-sol-accounting__subhead {
    font-size: 20px;
    line-height: 1.3;
  }
}

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

  /* Hero entrance — solution-accounting.js adds .is-ready to the hero on
     init (double rAF); copy rises in with 0/80/160/240/320ms delays and the
     mascot panel fades alongside the subhead. */
  .page-sol-accounting__hero .page-sol-accounting__eyebrow,
  .page-sol-accounting__hero .page-sol-accounting__title,
  .page-sol-accounting__hero .page-sol-accounting__subhead,
  .page-sol-accounting__hero .page-sol-accounting__lead,
  .page-sol-accounting__hero .page-sol-accounting__cta-row,
  .page-sol-accounting__hero .page-sol-accounting__hero-visual {
    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-sol-accounting__hero .page-sol-accounting__title {
    transition-delay: 80ms;
  }

  .page-sol-accounting__hero .page-sol-accounting__subhead,
  .page-sol-accounting__hero .page-sol-accounting__hero-visual {
    transition-delay: 160ms;
  }

  .page-sol-accounting__hero .page-sol-accounting__lead {
    transition-delay: 240ms;
  }

  .page-sol-accounting__hero .page-sol-accounting__cta-row {
    transition-delay: 320ms;
  }

  .page-sol-accounting__hero.is-ready .page-sol-accounting__eyebrow,
  .page-sol-accounting__hero.is-ready .page-sol-accounting__title,
  .page-sol-accounting__hero.is-ready .page-sol-accounting__subhead,
  .page-sol-accounting__hero.is-ready .page-sol-accounting__lead,
  .page-sol-accounting__hero.is-ready .page-sol-accounting__cta-row,
  .page-sol-accounting__hero.is-ready .page-sol-accounting__hero-visual {
    opacity: 1;
    transform: none;
  }

  /* S5 step lighting — hidden until solution-accounting.js staggers .is-on
     onto each step (~120ms, opacity + slight rise). One-shot; visible from
     the start under reduced motion because this base state only exists
     here. */
  .page-sol-accounting__phase,
  .page-sol-accounting [data-sol-phase] {
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity .45s cubic-bezier(0.16, 1, 0.3, 1),
      transform .45s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* Shown-state class hook (outside the media query: harmless no-op when
   reduced motion already forces everything visible). */
.page-sol-accounting__phase.is-on,
.page-sol-accounting [data-sol-phase].is-on {
  opacity: 1;
  transform: none;
}

/* =========================================================================
   Reduced motion — every animated element visible and static
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .page-sol-accounting__hero .page-sol-accounting__eyebrow,
  .page-sol-accounting__hero .page-sol-accounting__title,
  .page-sol-accounting__hero .page-sol-accounting__subhead,
  .page-sol-accounting__hero .page-sol-accounting__lead,
  .page-sol-accounting__hero .page-sol-accounting__cta-row,
  .page-sol-accounting__hero .page-sol-accounting__hero-visual,
  .page-sol-accounting__phase,
  .page-sol-accounting [data-sol-phase] {
    opacity: 1;
    transform: none;
  }

  /* No hover lifts — :hover included so this outweighs the hover rules. */
  .page-sol-accounting__pain-card,
  .page-sol-accounting__pain-card:hover,
  .page-sol-accounting__does-card,
  .page-sol-accounting__does-card:hover {
    translate: none;
  }
}

/* -------------------------------------------------------------------------
   Named markup hook that intentionally carries no styles of its own: a
   block-flow copy column sized by the hero grid. Named here so every markup
   class resolves in this sheet (build rule).
   ------------------------------------------------------------------------- */
.page-sol-accounting__hero-copy {
  /* no-op: block-flow column; layout comes from __hero-grid */
}