/* ============================================================================
 * Suunta.ai Landing v2 — /how-it-works/ page (V1 — premium editorial rebuild)
 * ----------------------------------------------------------------------------
 * Eroaa etusivun How-osiosta (`v2-how__pillars`, 3-col horisontaali):
 *
 * Etusivun How = tiivis 3-col synopsis (Capture / Cascade / Run).
 * Tämä /how-it-works/-sivu = täysi editorial story-arc 5 vaiheella, jossa
 * jokainen vaihe on ISO oma editorial-momentti (Linear Method / Stripe
 * Sessions -tyyli).
 *
 * Rakenne:
 *   1. Hero head (v2-pagehead, LIGHT) — sama kuin nyt
 *   2. Timeline-osio (LIGHT) — sticky side-rail (desktop) + 5 step block
 *      oikealla. Sticky-rail näyttää aktiivisen step:n pienellä emerald-
 *      indikaattorilla — AINOA emerald-aksentti koko sivulla.
 *   3. Final CTA (DARK) — sama kuin nyt
 *
 * Premium-periaatteet:
 *   - Yksi emerald-aksentti per sivu (sticky-rail active-dot)
 *   - ISO muted display-numerot (clamp 56-92px, slate 0.10-0.14)
 *   - Editorial pull-quote per step (italic, smart-quote, muted)
 *   - Hairline-only borders (1px slate 0.06-0.10)
 *   - Hover micro-interactions: numero kirkastuu, ✓ kirkastuu (ei emerald)
 *   - No glow, no text-shadow, no AI-slop
 * ============================================================================ */

/* ─── Section padding override — kompaktimpi, mahtuu yhteen näytölliseen
 *      isossa skaalassakin (käyttäjä voi scroll-zoomata jokaista step:iä). */
.v2-hp__timeline {
  padding-block: var(--space-12);
}

@media (min-width: 768px) {
  .v2-hp__timeline {
    padding-block: var(--space-16);
  }
}

@media (min-width: 1024px) {
  .v2-hp__timeline {
    padding-block: var(--space-20);
  }
}

/* ─── Timeline layout — 2-col: sticky rail + step stack ─────────────────
 *
 * Mobile (< 1024px): yksisarakkeinen — pelkkä step-stack, ei sticky-railia.
 * Desktop (≥ 1024px): 2-col grid 220px rail | content. Rail on
 *   position:sticky top:120px ja näyttää 5 phase-marker:ä.
 */
.v2-hp__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 1100px;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .v2-hp__layout {
    grid-template-columns: 220px 1fr;
    gap: var(--space-16);
  }
}

/* ─── Sticky side-rail (desktop only) ───────────────────────────────────
 *
 * Sticky position:sticky alkaen scroll-y = top:120px (header clearance).
 * Näyttää 5 phase-indikaattoria pystysuoraan. Aktiivinen step saa
 * emerald-dot:n (AINOA emerald-aksentti koko sivulla).
 */
.v2-hp__rail {
  display: none;
}

@media (min-width: 1024px) {
  .v2-hp__rail {
    display: block;
    position: sticky;
    top: 120px;
    align-self: start;
    /* Maksimi-korkeus: viewport - header - margin. Estää railin venymästä
       koko sivun korkuiseksi. */
    max-height: calc(100vh - 160px);
    overflow: hidden;
  }

  .v2-hp__rail-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Pystysuora hairline-viiva railin keskelle (24px sisennys
       jotta dot:t kelluvat sen päällä). */
    position: relative;
  }

  /* Hairline-line railin keskellä — yhdistää phase-marker:t */
  .v2-hp__rail-inner::before {
    content: '';
    position: absolute;
    left: 7px;                /* keskellä 16px dot:eja */
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: rgba(15, 23, 42, 0.08);
    pointer-events: none;
  }
}

/* ─── Phase marker (yksittäinen pallo + label) ──────────────────────── */
.v2-hp__phase {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition-hover);
  background: transparent;
  border: 0;
  text-align: left;
  font-family: inherit;
}

.v2-hp__phase:hover {
  color: var(--text-secondary);
}

/* Dot — 14px ympyrä, hairline border, transparent fill */
.v2-hp__phase-dot {
  position: relative;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-page);
  border: 1px solid rgba(15, 23, 42, 0.18);
  transition: border-color var(--transition-hover),
              background var(--transition-hover);
  z-index: 1;
}

/* Aktiivinen phase — neutraali slate-dot. Emerald-aksentti on SIIRTYNYT
   rakentuvan rail-figuurin aktiiviseen tasoon (sivun AINOA emerald). */
.v2-hp__phase.is-active {
  color: var(--text-primary);
}

.v2-hp__phase.is-active .v2-hp__phase-dot {
  background: var(--text-primary);
  border-color: var(--text-primary);
}

/* Phase-numero (01, 02, …) — pieni tabular muted */
.v2-hp__phase-num {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-right: var(--space-2);
}

.v2-hp__phase.is-active .v2-hp__phase-num {
  color: var(--text-secondary);
}

/* ─── Step stack — kaikki 5 steppiä allekkain editorial-style ───────── */
.v2-hp__steps {
  display: flex;
  flex-direction: column;
  /* Iso gap koska jokainen step on oma "moment" — editorial breathing room. */
  gap: var(--space-16);
}

@media (min-width: 768px) {
  .v2-hp__steps {
    gap: var(--space-20);
  }
}

/* ─── Yksittäinen step ─────────────────────────────────────────────── */
.v2-hp__step {
  position: relative;
  /* Scroll-margin jotta sticky-header ei piilota anchor-targetin yläosaa
     kun klikkaa rail-phasea. */
  scroll-margin-top: 100px;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  /* Hairline-divider stepin yläpuolella (paitsi ensimmäisellä) */
  padding-top: var(--space-12);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.v2-hp__step:first-child {
  padding-top: 0;
  border-top: 0;
}

/* Desktop: meta-rail (numero + time) vasemmalla, content oikealla */
@media (min-width: 768px) {
  .v2-hp__step {
    grid-template-columns: 120px 1fr;
    gap: var(--space-10);
  }
}

@media (min-width: 1024px) {
  .v2-hp__step {
    grid-template-columns: 140px 1fr;
    gap: var(--space-12);
  }
}

/* ─── Step meta-rail — ISO numero + time-meta ──────────────────────── */
.v2-hp__step-meta {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .v2-hp__step-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    /* Sticky pieni — meta jää lähelle stepin yläosaa kun käyttäjä
       scrollaa stepin sisällä */
    position: sticky;
    top: 120px;
    align-self: start;
  }
}

/* ISO display-numero — muted slate (premium watermark) */
.v2-hp__step-num {
  font-size: clamp(56px, 8vw, 92px);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: rgba(15, 23, 42, 0.12);
  transition: color 360ms cubic-bezier(0.4, 0, 0.2, 1);
}

.v2-hp__step:hover .v2-hp__step-num {
  color: rgba(15, 23, 42, 0.22);
}

/* Time-meta — uppercase eyebrow tabular */
.v2-hp__step-time {
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ─── Step content — editorial typografia ──────────────────────────── */
.v2-hp__step-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* H2-tason editorial otsikko stepille — iso mutta kevyt */
.v2-hp__step-title {
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: var(--weight-medium);
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--text-primary);
  margin: 0;
  max-width: 580px;
}

/* Lead-paragraph stepille */
.v2-hp__step-lead {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.55;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
  margin: 0;
  max-width: 620px;
}

/* ─── "What happens" -lista ──────────────────────────────────────── */
.v2-hp__features {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.v2-hp__features li {
  position: relative;
  padding-left: 22px;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: rgba(15, 23, 42, 0.68);
  letter-spacing: -0.005em;
  transition: color var(--transition-hover);
}

@media (min-width: 1024px) {
  .v2-hp__features li {
    font-size: 15px;
  }
}

/* Tikit — muted slate, NOT emerald (one-accent-per-page sääntö) */
.v2-hp__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(15, 23, 42, 0.32);
  font-size: 13px;
  font-weight: var(--weight-medium);
  line-height: 1.5;
  transition: color var(--transition-hover);
}

.v2-hp__step:hover .v2-hp__features li {
  color: rgba(15, 23, 42, 0.78);
}

.v2-hp__step:hover .v2-hp__features li::before {
  color: rgba(15, 23, 42, 0.46);
}

/* ─── Editorial pull-quote — "moment" jokaisessa stepissä ──────────
 *
 * Yksi italic-kursiivinen "tilanne-quote" (esim. "By Friday afternoon,
 * the strategy is shared.") joka antaa stepille narrative-painoa.
 * Hairline-divider yläpuolella, open-quote ::before.
 */
.v2-hp__step-moment {
  position: relative;
  margin-top: var(--space-4);
  padding-top: var(--space-5);
  padding-left: var(--space-6);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  font-size: clamp(16px, 1.6vw, 19px);
  font-style: italic;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: rgba(15, 23, 42, 0.62);
  max-width: 580px;
}

.v2-hp__step-moment::before {
  content: '\201C';
  position: absolute;
  left: 0;
  top: var(--space-4);
  font-size: 28px;
  line-height: 1;
  color: rgba(15, 23, 42, 0.22);
  font-style: normal;
  font-weight: var(--weight-medium);
}

/* ─── Hover micro-interaction — koko step nostuu 2px ──────────────── */
.v2-hp__step {
  transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) and (min-width: 768px) {
  .v2-hp__step:hover {
    /* Subtle — pelkkä numero+features kirkastuvat (ks. yllä).
       Ei lift jotta sticky-meta ei häiriinny. */
  }
}

/* ─── Mobile tarkennukset ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .v2-hp__step {
    padding-top: var(--space-10);
  }
  .v2-hp__step-meta {
    /* Mobile: meta-rivi vaakasuora (numero suuri vasemmalla, time
       baseline-aligned) */
    align-items: baseline;
  }
  .v2-hp__step-num {
    font-size: 56px;
  }
  .v2-hp__step-title {
    font-size: 22px;
  }
  .v2-hp__step-moment {
    font-size: 15px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * RAKENTUVA STACK-FIGUURI — kerrostuma rakentuu vaihe vaiheelta (scroll-synk)
 * ----------------------------------------------------------------------------
 * Figuuri EI ole koriste vaan sivun edistymisviz: 5 tasoa ↔ 5 vaihetta.
 * Sama figuuri kahdessa muodossa (molemmilla data-stackfig → jaettu CSS):
 *   - desktop (≥1024): sticky sivukiskossa (.v2-hp__rail-fig)
 *   - mobiili (<1024): sticky yläpalkissa (.v2-hp__railbar / -fig)
 * JS (setActive) lisää tasoihin: is-future (tuleva, haalea) · is-built (käyty,
 * solidi) · is-active (nyt, emerald = sivun AINOA emerald). Hero on tekstiä
 * kaikilla breakpointeilla — figuuri on siirtynyt tänne tekemään työtä.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Jaettu: hienot hairlinet + tilat (kumpikin figuuri, kaikilla breakpointeilla).
   vector-effect:non-scaling-stroke → vakaa px-hairline viewBox-skaalasta riip.
   Apuviivat + nodet pois → puhdas rakentuva pino. */
[data-stackfig] svg { display: block; width: 100%; height: auto; }
[data-stackfig] svg path {
  vector-effect: non-scaling-stroke;
  stroke-width: 1px;
  transition: stroke-opacity 0.5s var(--ease), fill-opacity 0.5s var(--ease),
              stroke 0.5s var(--ease), fill 0.5s var(--ease);
}
[data-stackfig] svg path[stroke-dasharray],
[data-stackfig] svg circle { display: none; }

/* Oletus = "tuleva" (haalea). svg-elementti selektorissa nostaa spesifisyyden
   (0,2,1) SVG:n sisäisen [data-theme="light"] .sfig-* (0,2,0) yli. */
[data-stackfig] svg [class*="sfig"] { stroke-opacity: 0.14; fill-opacity: 0.015; }
[data-stackfig] svg [class*="sfig"].is-built { stroke-opacity: 0.5; fill-opacity: 0.05; }
[data-stackfig] svg [class*="sfig"].is-active {
  stroke: var(--emerald-500);
  stroke-opacity: 1;
  fill: var(--emerald-500);
  fill-opacity: 0.14;
}

/* ─── Desktop (≥1024): sticky sivukisko-figuuri ───────────────────────────── */
.v2-hp__rail-fig { display: none; }
@media (min-width: 1024px) {
  .v2-hp__rail-fig {
    display: block;
    width: 100%;
    max-width: 188px;
    margin: 0 auto var(--space-8);
    color: var(--text-primary);
  }
}

/* ─── Mobiili (<1024): sticky yläpalkki rakentuvalla mini-figuurilla ────────── */
.v2-hp__railbar { display: none; }
@media (max-width: 1023px) {
  .v2-hp__railbar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    position: sticky;
    top: 64px;                       /* v2-header (65px) alapuolelle */
    z-index: 5;
    margin-bottom: var(--space-10);
    padding: var(--space-3) 0;
    /* frosted: step-sisältö valuu siististi alle */
    background: color-mix(in srgb, var(--bg-page) 84%, transparent);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-subtle);
  }
  .v2-hp__railbar-fig {
    flex: 0 0 58px;
    width: 58px;
    color: var(--text-primary);
  }
  .v2-hp__railbar-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: -0.01em;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
  }
}

/* ─── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .v2-hp__step,
  .v2-hp__step-num,
  .v2-hp__features li,
  .v2-hp__features li::before,
  .v2-hp__phase,
  .v2-hp__phase-dot,
  [data-stackfig] svg path {
    transition: none;
  }
}

/* ─── Signature-weave final-CTA:ssa ─────────────────────────────────────────
 *  Sektiolla on luokat sp-bg sp-weave (tiilattu Suunta-S-merkki). Neutralisoi
 *  jaettu dot-grid (.v2-final-cta::before, 23-cta.css) TÄLLÄ sivulla → weave on
 *  sektion ainoa tekstuuri (yksi pattern / sektio). Emerald-glow
 *  (.v2-final-cta__glow) jää brändi-ankkuriksi. */
body[data-page="how-it-works"] .v2-final-cta::before {
  display: none;
}