/* How-it-works v2 prototype: Mena's 2026-08-28 paper sketch, built live.
   INERT unless the URL carries ?hiw2=1 (hiw2.js gates and injects).
   Three beats: the one thing the client does, the machine that runs six
   steps on its own, and where it ends. Uses the section's real six steps as
   its content source, so nothing here can drift from the grid it replaces. */

.hiw2-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: 30rem;
  margin: 1rem auto 0;
}

.hiw2-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  font-family: Geistmono, "Geist Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.hiw2-pill.is-submit {
  color: #090a08;
  background: var(--base--green, #d6fd70);
}

.hiw2-pill.is-yt {
  color: var(--text-color--text-primary);
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: transparent;
}

.hiw2-pill svg {
  width: 1.05rem;
  height: auto;
  display: block;
}

.hiw2-pill img {
  width: 1.15rem;
  height: auto;
  display: block;
}

.hiw2-link {
  width: 1px;
  height: 1.6rem;
  background: color-mix(in srgb, currentColor 22%, transparent);
  color: var(--text-color--text-primary);
}

.hiw2-card {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 1.6rem;
  corner-shape: squircle;
  background: var(--bg-color--bg-default, #fff);
  color: var(--text-color--text-primary);
  padding: 1.9rem 1.9rem 1.4rem;
  text-align: center;
}

.hiw2-rail {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--base--green, #d6fd70);
  transition: transform 480ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* The PRODUCTION label is retired from view (Mena 2026-09-01) but its BOX
   stays: every doodle set was captured against this exact card geometry, so
   the element keeps its height as breathing room and only the word hides.
   Deleting the element would shift the text up and misalign all 12 sets. */
.hiw2-eyebrow {
  font-family: Geistmono, "Geist Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-color--text-secondary);
  margin-bottom: 0.9rem;
  visibility: hidden;
}

/* hiw2.js sets the real min-height per active step (the box hugs the text;
   fixed heights read as dead air under short steps on the phone). The value
   here is only a no-JS floor. */
.hiw2-stage {
  position: relative;
  min-height: 4.5rem;
  transition: min-height 380ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hiw2-step {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 380ms ease, transform 380ms cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}

.hiw2-step.is-on {
  opacity: 1;
  transform: none;
}

.hiw2-step h4 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Step 5's title carries a hard <br> (desktop rule: two lines, "and the
   original atmosphere" on the second). A phone is too narrow for the first
   half anyway, so the break would force FOUR lines there; let mobile wrap
   naturally instead. */
@media (max-width: 991px) {
  .hiw2-step h4 br { display: none; }
  /* Step 3 phone copy: "professional" and "original" dropped so the body
     holds two lines (Mena 2026-09-01, measured on his iPhone). */
  .hiw2-deskword { display: none; }
}

.hiw2-step p {
  margin: 0 auto;
  max-width: 24rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-color--text-secondary);
}

.hiw2-count {
  margin-top: 1.1rem;
  font-family: Geistmono, "Geist Mono", ui-monospace, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--text-color--text-secondary);
}

.hiw2-count strong {
  color: var(--text-color--text-primary);
}

@media (prefers-reduced-motion: reduce) {
  .hiw2-step, .hiw2-rail, .hiw2-stage { transition: none; }
}

/* Air between the active step's text and the number row, now that the stage
   no longer carries slack height of its own. */
.hiw2-nums {
  margin-top: 1.05rem;
}

/* Desktop 1.5x (Mena 2026-09-01: first "like 2x", then "a bit too big tone
   it down by 25%" — so 1.5x of the base scale). Every value below is the
   base value times 1.5; mobile/tablet keep the original scale. */
@media (min-width: 992px) {
  .hiw2-flow {
    max-width: 45rem;
    margin-top: 1.5rem;
  }

  .hiw2-pill {
    gap: 0.9rem;
    padding: 0.85rem 1.7rem;
    font-size: 1.17rem;
  }

  .hiw2-pill svg { width: 1.6rem; }
  .hiw2-pill img { width: 1.7rem; }

  .hiw2-link {
    width: 1.5px;
    height: 2.4rem;
  }

  .hiw2-card {
    border-radius: 2.4rem;
    border-width: 1.5px;
    padding: 2.85rem 2.85rem 2.1rem;
  }

  .hiw2-rail { height: 4.5px; }

  .hiw2-eyebrow {
    font-size: 1.02rem;
    margin-bottom: 1.35rem;
  }

  .hiw2-stage { min-height: 6rem; }

  .hiw2-step h4 {
    margin-bottom: 0.75rem;
    font-size: 1.875rem;
  }

  .hiw2-step p {
    max-width: 36rem;
    font-size: 1.3rem;
  }

  /* The JS renders .hiw2-nums; the base .hiw2-dots rule below predates the
     rename and never matches, so the row lays out inline. Flex here is
     desktop-only on purpose: mobile keeps its current look untouched. */
  .hiw2-nums {
    display: flex;
    justify-content: center;
    gap: 0.7rem;
    margin-top: 1.6rem;
  }

  .hiw2-num {
    min-width: 2.85rem;
    height: 2.85rem;
    border-width: 1.5px;
    font-size: 1.13rem;
  }
}

/* The seventh beat: the card has finished 6/6 and the payoff lights up while
   the headline reads "upload to YT". */
.hiw2-pill.is-yt {
  transition: background-color 320ms ease, color 320ms ease,
    border-color 320ms ease, transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hiw2-pill.is-yt.is-lit {
  color: #090a08;
  border-color: transparent;
  background: var(--base--green, #d6fd70);
  transform: scale(1.06);
}

/* Hand-doodled step illustrations (Mena approved the six-card set
   2026-09-01; recipe + sources in doodles/). One absolutely positioned
   stack per step inside the card, 36 pen-order slices each, staggered at a
   34ms cadence so a line extends across the card (~1.2s, the services-stack
   lesson: fewer slices reads as blocks, not a pen). The stack gets ONE
   promoted layer; the individual slice imgs stay unpromoted on purpose.
   Strokes only exist where the clean capture was white, so they can never
   sit on a letter; card text still rides above via z-index. Desktop only:
   positions are authored in px on the 720px desktop card. */
.hiw2-doodle {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  transform: translateZ(0);
}

.hiw2-doodle img {
  position: absolute;
  opacity: 0;
  transition: opacity 90ms ease-in;
  transition-delay: 0ms;
}

.hiw2-doodle.is-on img {
  opacity: 1;
  transition: opacity 110ms ease-out;
  transition-delay: var(--d, 0ms);
}

.hiw2-rail { z-index: 1; }

.hiw2-eyebrow, .hiw2-stage, .hiw2-nums {
  position: relative;
  z-index: 1;
}

/* Phones and tablets (Mena 2026-09-01: doodles on mobile "the way it is on
   desktop", full-strength ink around the text, NOT a faded backdrop). A
   phone card has no side margins, so the card grows two white BANDS: one
   above the eyebrow, one below the numbers. The mobile doodle set is
   authored for exactly this geometry at 440px (Mena's iPhone width) and
   drawn at full strength inside the bands; hiw2.js scales the stack to the
   real card width on other phones. */
@media (max-width: 991px) {
  .hiw2-card {
    padding-top: 6.4rem;
    padding-bottom: 6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hiw2-doodle img {
    transition: opacity 240ms linear !important;
    transition-delay: 0ms !important;
  }
}

/* Step control (Mena 2026-08-28): the counter became the control. Six mono
   numbered buttons; the active one wears the lime chip. */
.hiw2-dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 1.05rem;
}

.hiw2-num {
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--text-color--text-secondary);
  font-family: Geistmono, "Geist Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease,
    border-color 200ms ease, transform 200ms ease;
}

.hiw2-num:hover {
  transform: translateY(-1px);
  color: var(--text-color--text-primary);
}

.hiw2-num.is-active {
  color: #090a08;
  border-color: transparent;
  background: var(--base--green, #d6fd70);
}

.hiw2-num:focus-visible {
  outline: 2px solid #55b9f4;
  outline-offset: 2px;
}