/* LWN Pro — how it turns on.

   A quiet section on purpose. By this point the page has offered a switch, a
   colour picker, a set of arrows and a toggle; a fifth thing to press would
   start to feel like a demo reel rather than an argument. This one is read,
   not operated.

   Install, activate, enable is true of both checkouts; where they differ is
   only who does the enabling — automatic on classic, one click on block — and
   the product page carries that. A homepage claim does not have to teach the
   exception.

   The list plays itself. A static row asks the reader to imagine how quick
   setup is; watching it run takes no imagination. It starts when the section
   is on screen and stops when it is not — see setup.js. */

.go {
  background: #FFFFFF;
  padding: var(--space-70) 40px;
  container-type: inline-size;
  font-family: var(--font-sans);
}
.go__in { max-width: 1080px; margin: 0 auto; }

.go__in {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: center;
}

.go__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 14px;
}
.go__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  color: var(--color-contrast);
  margin: 0 0 12px;
}
.go__lede {
  max-width: 44ch;
  margin: 0 0 28px;
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-ink-600);
}

/* The meter names the step the rows are on and fills as they go, so the copy
   side is part of the sequence rather than watching it. */
.go__meter { display: flex; align-items: center; gap: 14px; }
.go__now {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-400);
  min-width: 62px;
}
.go__bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--color-line-200);
  overflow: hidden;
}
.go__bar i {
  display: block;
  height: 100%;
  width: 33%;
  border-radius: 2px;
  background: var(--color-primary);
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- The rows ------------------------------------------------------------ */

/* Stacked, not a row of chips. Each step gets a line of its own, which leaves
   room for the state to read at a glance — and makes the sequence legible as
   it plays rather than a set of pills changing colour. */
.go__rows { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.go__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-radius: 12px;
  background: var(--color-gray-50);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}
.go__n {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-ink-400);
  transition: color 0.35s ease;
}
.go__dot {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 2px solid var(--color-line-300);
  color: transparent;
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.go__dot svg { width: 13px; height: 13px; }
.go__label {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-400);
  transition: color 0.35s ease;
}

/* Done — tinted, with the tick filled in. */
.go__row.is-done {
  background: var(--color-accent-tint);
  border-color: var(--color-accent-tint-border);
}
.go__row.is-done .go__dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}
.go__row.is-done .go__label { color: var(--color-contrast); }

/* Current — filled, and lifted a hair so the eye lands on it. */
.go__row.is-current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateX(4px);
}
.go__row.is-current .go__dot {
  background: rgba(255, 255, 255, 0.22);
  border-color: transparent;
  color: #FFFFFF;
}
.go__row.is-current .go__label { color: #FFFFFF; }
.go__row.is-current .go__n { color: rgba(255, 255, 255, 0.7); }

@media (prefers-reduced-motion: reduce) {
  .go__row, .go__dot, .go__label, .go__n, .go__bar i { transition: none; }
  .go__row.is-current { transform: none; }
}

@container (max-width: 860px) {
  .go { padding: var(--space-60) 24px; }
  .go__in { grid-template-columns: 1fr; gap: 30px; }
  .go__lede { max-width: none; }
}
@container (max-width: 460px) {
  .go__row { padding: 15px 16px; gap: 12px; }
  .go__label { font-size: var(--text-sm); }
}