/* How HVO works — the original Skiper104 section, extended to six points.
   The centered heading, numbered steps, progress rails, and sequential reveal
   are preserved. Only the large image cards are removed and a second row of
   three points is added. */

.section_howitworks {
  background-color: var(--bg-color--bg-default);
}

.hiw {
  width: 100%;
}

.hiw-sticky {
  width: 100%;
}

/* Preserve the original centered section-header composition. */
.hiw-intro {
  max-width: none;
  text-align: center;
}

/* Headline morph — "Submit once, we'll <phrase>" (Mena 2026-08-18 plain-
   language rewrite; one-line restyle same day: "exactly the same styling"
   as the other morph headings). Mirrors the Product-section morph: the
   lead-in and rotating phrase behave as one centred nowrap sentence, the
   morph box resizes to the visible phrase, and the full line scales down
   only when its widest phrase would otherwise clip. */
.section_howitworks .hvo-hm-heading-wrap {
  width: 100%;
  max-width: none;
}

.section_howitworks .hvo-hm-line {
  display: block;
  white-space: nowrap;
}

.hvo-hm-lead {
  font-weight: 400;
}

/* Geometry, filter, weight and the phone layout now live in ONE place:
   the SHARED GOO STAGE block in title-morph/title-morph.css (2026-08-27).
   Do not restate them here; that duplication is what let the stages drift. */

/* Final phrase carries the YouTube brand mark; the em width keeps the
   JS phrase measurement stable before the image finishes loading. */
.hvo-hm-yt {
  white-space: nowrap;
}

.hvo-hm-yt img {
  display: inline-block;
  width: 1.16em;
  height: auto;
  margin-right: 0.2em;
  vertical-align: -0.12em;
}

/* The original three-column step language continues as a second row. */
.hiw-grid {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(9.5rem, 1fr));
  column-gap: 3.5rem;
  row-gap: 3.25rem;
  counter-reset: hiw-step;
}

/* One progress rail per three-step row. */
.hiw-grid::before,
.hiw-grid::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: 0;
  height: 2px;
  transform: translateY(-1px);
  pointer-events: none;
}

.hiw-grid::before {
  top: 1rem;
  background-color: var(--bg-color--bg-secondary);
}

.hiw-grid::after {
  top: calc(50% + 2.625rem);
  background-color: var(--bg-color--bg-secondary);
}

.hiw-progress-bar {
  position: absolute;
  top: 1rem;
  right: 0;
  left: 0;
  z-index: 1;
  height: 2px;
  background-color: var(--bg-color--bg-green);
  transform: translateY(-1px) scaleX(1);
  transform-origin: left center;
  pointer-events: none;
}

.hiw-progress-bar.is-second {
  top: calc(50% + 2.625rem);
}

.hiw-step {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  text-align: left;
  counter-increment: hiw-step;
}

.hiw-badge {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background-color: var(--bg-color--bg-green);
  /* The lime badge stays light in both themes, so its number stays dark. */
  color: var(--grey--grey-900);
  font-size: 0;
  font-weight: 700;
  line-height: 1;
}

.hiw-badge::after {
  content: counter(hiw-step);
  font-size: 0.95rem;
}

.hiw-title {
  max-width: none;
  margin: 0 0 0.5rem;
  color: var(--text-color--text-primary);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.hiw-title.is-qc-title {
  position: relative;
  width: fit-content;
  padding-bottom: 0.35rem;
}

.hiw-title.is-qc-title::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--bg-color--bg-green), rgba(214, 253, 112, 0));
  pointer-events: none;
}

/* Light mode keeps the SAME lime as the step number line (Mena
   2026-08-18: the olive variant read as a mismatch) — only thicker. */
html:not([data-theme="dark"]) .hiw-title.is-qc-title::after {
  height: 3px;
}

.hiw-desc {
  max-width: none;
  margin: 0;
  color: var(--text-color--text-secondary);
  font-size: 1rem;
  line-height: 1.5;
}

/* Original mobile treatment: one column with a numbered vertical rail. */
@media (max-width: 991px) {
  .hiw-grid {
    max-width: 34rem;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 2.5rem;
    padding-left: 2.75rem;
  }

  .hiw-grid::before {
    top: 0;
    right: auto;
    bottom: 0;
    left: 1rem;
    width: 2px;
    height: auto;
    transform: translateX(-1px);
    background-color: var(--bg-color--bg-green);
  }

  .hiw-grid::after {
    display: none;
  }

  .hiw-progress-bar {
    display: none;
  }

  .hiw-step {
    min-height: 7rem;
    gap: 1rem;
  }

  .hiw-badge {
    position: absolute;
    top: 0;
    left: -2.75rem;
  }

  .hiw-title,
  .hiw-desc {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hiw-badge,
  .hiw-title,
  .hiw-desc {
    opacity: 1 !important;
    transform: none !important;
  }

  /* static first phrase, no goo */
  .hvo-hm {
    filter: none;
    transition: none;
  }

  .hvo-hm > span + span {
    display: none;
  }
}