/* ==========================================================================
   VWM.AI — pages.css  (/process/ and /services/)

   Loaded after test.css on the two restyled inner pages. Everything
   these pages share with the preview (tokens, panels, glass, glow ring,
   timeline, workflow grid, quadrant, buttons, footer) comes from
   test.css untouched; this file only adds what inner pages need:
   a footage-free hero backdrop, checklists inside timeline phases, a
   3-across hairline grid, and the partners-view split.
   ========================================================================== */

/* — sub-page hero: the glass panel sits over a slow, soft gradient
   instead of video. Same pan/orbit keyframes as the stats band, at a
   fraction of the intensity so the panel stays the subject. — */
.t-hero--sub { padding: var(--t-sp-5) 0 var(--t-sp-4); }
.t-hero-bg--gradient {
  isolation: isolate;
  background:
    radial-gradient(ellipse 60% 70% at 18% 30%, color-mix(in srgb, var(--color-accent-700) 55%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 82% 70%, color-mix(in srgb, var(--color-section-glow) 70%, transparent) 0%, transparent 60%),
    var(--color-bg);
  background-size: 200% 200%, 200% 200%, auto;
  animation: t-gradient-pan 22s var(--t-ease-inout) infinite alternate;
}
.t-hero-bg--gradient::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--color-bg) 0%, transparent 18%, transparent 82%, var(--color-bg) 100%);
}
/* title only, no panel: the headline sits centered on the gradient.
   Each line is a span; on desktop the lines don't wrap, so a two-part
   title always sets as exactly two lines. */
.t-hero--sub { padding: var(--t-sp-5) 0 var(--t-sp-4); }
.t-hero-title { text-align: center; }
.t-hero--sub .t-h1 { font-size: clamp(32px, 3.9vw, 58px); max-width: none; margin: 0 auto; text-wrap: initial; }
.t-hero--sub .t-h1 .t-h1-line { display: block; }
@media (min-width: 900px) { .t-hero--sub .t-h1 .t-h1-line { white-space: nowrap; } }

/* — timeline phases carry a "you get" checklist beneath the body — */
.t-phase-get { margin: var(--t-sp-3) 0 0; }
.t-phase-get-label {
  font-family: var(--font-heading); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent); margin: 0 0 10px;
}
.t-phase-get ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.t-phase-get li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.55; color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.t-phase-get li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 2px; background: var(--color-accent); }

/* — 3-across hairline grid: six parallel reasons, no numbering — */
/* .t-quadrant.t-grid3 outranks test.css's two-column odd/even rules
   (three classes beat two classes + a pseudo-class), so the cells get
   one consistent inset here instead of the 2-up left/right pairing. */
.t-quadrant.t-grid3 { grid-template-columns: repeat(3, 1fr); }
.t-quadrant.t-grid3 .t-problem {
  padding: var(--t-sp-4) var(--t-sp-4) var(--t-sp-4) var(--t-sp-4);
  border-right: 1px solid var(--color-divider);
}
.t-quadrant.t-grid3 .t-problem:nth-child(3n+1) { padding-left: 0; }
.t-quadrant.t-grid3 .t-problem:nth-child(3n) { border-right: none; padding-right: 0; }
.t-quadrant.t-grid3 .t-problem-title { font-size: 17px; margin: 0; }
@media (max-width: 900px) {
  .t-quadrant.t-grid3 { grid-template-columns: 1fr 1fr; }
  .t-quadrant.t-grid3 .t-problem { padding: var(--t-sp-4) var(--t-sp-4) var(--t-sp-4) var(--t-sp-4); border-right: 1px solid var(--color-divider); }
  .t-quadrant.t-grid3 .t-problem:nth-child(2n+1) { padding-left: 0; }
  .t-quadrant.t-grid3 .t-problem:nth-child(2n) { border-right: none; padding-right: 0; }
}
@media (max-width: 700px) {
  .t-quadrant.t-grid3 { grid-template-columns: 1fr; }
}

/* — partners-view split: the checklist alongside the dashboard mockup — */
.t-split--reverse { grid-template-columns: minmax(320px, 7fr) minmax(280px, 5fr); }
.t-split--reverse .t-tilt-stage { order: -1; }
.t-check { list-style: none; margin: var(--t-sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.t-check li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.55; color: color-mix(in srgb, var(--color-text) 84%, transparent); }
.t-check li::before { content: ""; position: absolute; left: 0; top: .74em; width: 14px; height: 2px; background: var(--color-accent); }
@media (max-width: 900px) {
  .t-split--reverse { grid-template-columns: 1fr; }
  .t-split--reverse .t-tilt-stage { order: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .t-hero-bg--gradient { animation: none; }
}