/* LWN Pro — the three things, at the top of the product page.

   Every section below this one is a detail. A reader who scrolls no further
   should still leave knowing what the plugin is, so the three claims that
   matter get said once, plainly, before the argument starts.

   Each card carries a small drawing rather than an icon from a set. They are
   the same three ideas the sections below demonstrate at length, so they are
   built from the same parts: a circle, a connector, a fill. */

.hl {
  background: #FFFFFF;
  padding: var(--space-70, 72px) 40px var(--space-60, 56px);
  container-type: inline-size;
  font-family: var(--font-sans);
}
.hl__in { max-width: 1180px; margin: 0 auto; }

.hl__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.hl__card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--color-line-200);
  border-radius: 14px;
  padding: 28px 26px 26px;
}

/* The drawing sits in a tinted well so the three read as a set even though
   each one is drawn differently. */
.hl__art {
  height: 84px;
  margin-bottom: 22px;
  border-radius: 10px;
  background: var(--color-accent-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
}

.hl__n {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.14em;
  color: var(--color-primary);
  margin: 0 0 8px;
}
.hl__h {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: 1.28;
  letter-spacing: -0.012em;
  color: var(--color-contrast);
  margin: 0 0 9px;
}
.hl__p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-ink-600);
  text-wrap: pretty;
}

/* --- 1. two checkouts ----------------------------------------------------
   Two pages side by side, each ticked. The claim is that neither is the
   afterthought, so they are drawn the same size. */
.hl__pg {
  width: 46px;
  padding: 7px 6px;
  border-radius: 5px;
  background: #FFFFFF;
  border: 1px solid var(--color-accent-tint-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hl__pg i { display: block; height: 4px; border-radius: 2px; background: #DCE7F6; }
.hl__pg i:nth-child(2) { width: 70%; }
.hl__tick {
  align-self: flex-end;
  width: 13px; height: 13px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #FFFFFF;
  display: grid;
  place-content: center;
}
.hl__tick svg { width: 8px; height: 8px; }

/* --- 2. one click --------------------------------------------------------
   The switch turns itself on when the card scrolls into view, once, and stays
   on. It looped on and off at first, which meant a reader arriving mid-cycle
   found it sitting in the off position — the one state that says the opposite
   of the card it illustrates. */
.hl__sw {
  width: 62px; height: 32px;
  border-radius: 100px;
  background: #FFFFFF;
  border: 1px solid var(--color-accent-tint-border);
  padding: 3px;
  display: flex;
}
.hl__knob {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--color-line-300);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s ease;
}
.hl.is-visible .hl__knob {
  animation: hlFlip 0.55s cubic-bezier(0.34, 1.4, 0.5, 1) 0.35s both;
}
@keyframes hlFlip {
  from { transform: translateX(0); background: var(--color-line-300); }
  to { transform: translateX(30px); background: var(--color-primary); }
}

/* --- 3. customizable -----------------------------------------------------
   One shape in three treatments: filled, outlined, and numbered. The three
   stepper styles, in the space a card allows. */
.hl__sh { display: flex; align-items: center; gap: 9px; }
.hl__sh span {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  font-size: 11px;
  font-weight: var(--weight-semibold);
}
.hl__sh span:nth-child(1) { background: var(--color-primary); color: #FFFFFF; }
.hl__sh span:nth-child(2) { background: #FFFFFF; border: 2px solid var(--color-primary); color: var(--color-primary); }
.hl__sh span:nth-child(3) { background: #FFFFFF; border: 1px solid var(--color-accent-tint-border); color: var(--color-ink-400); }
.hl__sh i { width: 14px; height: 2px; border-radius: 2px; background: #CFDDF1; }

@media (prefers-reduced-motion: reduce) {
  .hl__knob { transition: none; }
  .hl.is-visible .hl__knob { animation: none; transform: translateX(30px); background: var(--color-primary); }
}

@container (max-width: 900px) {
  .hl { padding: var(--space-60, 56px) 24px var(--space-50, 40px); }
  .hl__grid { grid-template-columns: 1fr; gap: 14px; }
  .hl__card { padding: 22px 20px 20px; }
  .hl__art { height: 72px; margin-bottom: 18px; }
}