/* LWN Pro — one plugin, two checkouts.

   A different shape to the comparison above it: one frame with a switch, not
   two cards side by side. The page would read as card after card otherwise,
   and the claim here is "the same thing, in two places", which a single panel
   that changes says better than two panels that sit still.

   The switch is CSS only — two hidden radios and :checked. No script, and it
   keeps working with JavaScript off. Labels are tied to the radios, so it is
   keyboard operable: tab to the group, arrow between the two.

   The two panels show the real difference rather than the same picture twice.
   Classic has five steps because the Coupon step exists there; block has four.
   That is the honest version and it is also the more useful one. */

.bt {
  background: var(--color-surface);
  padding: var(--space-70) 40px;
  container-type: inline-size;
  font-family: var(--font-sans);
}
.bt__in { max-width: 940px; margin: 0 auto; }

/* --- Header -------------------------------------------------------------- */

.bt__head { text-align: center; margin-bottom: 30px; }
.bt__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;
}
.bt__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;
}
.bt__lede {
  max-width: 54ch;
  margin: 0 auto;
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-ink-600);
}

/* --- The switch ---------------------------------------------------------- */

/* Hidden but not display:none — a removed radio cannot take focus, and this
   control has to stay reachable from the keyboard. */
.bt__r {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.bt__seg {
  display: inline-flex;
  gap: 4px;
  margin: 0 auto 20px;
  padding: 4px;
  border: 1px solid var(--color-line-200);
  border-radius: 999px;
  background: #FFFFFF;
}
.bt__switch { display: flex; flex-direction: column; align-items: center; }
.bt__tab {
  padding: 9px 20px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-500);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease;
}
.bt__tab:hover { color: var(--color-contrast); }

#bt-block:checked   ~ .bt__seg .bt__tab[for="bt-block"],
#bt-classic:checked ~ .bt__seg .bt__tab[for="bt-classic"] {
  background: var(--color-primary);
  color: #FFFFFF;
}
/* The focus ring belongs on the label, since the radio itself is invisible. */
.bt__r:focus-visible ~ .bt__seg .bt__tab[for="bt-classic"],
.bt__r:focus-visible ~ .bt__seg .bt__tab[for="bt-block"] { outline: 2px solid var(--color-blue-700); outline-offset: 2px; }

/* --- Panels -------------------------------------------------------------- */

.bt__panels { width: 100%; }
.bt__panel {
  display: none;
  background: #FFFFFF;
  border: 1px solid var(--color-line-200);
  border-radius: 14px;
  padding: 26px 28px 24px;
  box-shadow: 0 14px 34px -28px rgba(23, 24, 26, 0.4);
}
#bt-block:checked   ~ .bt__panels .bt__panel:nth-child(1),
#bt-classic:checked ~ .bt__panels .bt__panel:nth-child(2) { display: block; }

.bt__ctx {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-ink-400);
}
.bt__ctx code {
  font-family: var(--font-mono);
  font-size: 1em;
  background: var(--color-gray-50);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  color: var(--color-ink-600);
}
.bt__dotmark {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-accent-light);
}

/* --- The stepper --------------------------------------------------------- */

.bt__flow { display: grid; margin: 0 0 22px; padding: 0; list-style: none; }
.bt__flow--5 { grid-template-columns: repeat(5, 1fr); }
.bt__flow--4 { grid-template-columns: repeat(4, 1fr); }

.bt__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.bt__step::after {
  content: "";
  position: absolute;
  top: 14px;
  left: calc(50% + 21px);
  right: calc(-50% + 21px);
  height: 2px;
  border-radius: 2px;
  background: #E1E6EC;
}
.bt__step:last-child::after { display: none; }
.bt__step.is-done::after { background: var(--color-primary); }

.bt__dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  background: #F1F4F7;
  border: 2px solid transparent;
  color: var(--color-ink-400);
}
.bt__step.is-done .bt__dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}
.bt__step.is-current .bt__dot {
  background: #FFFFFF;
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-accent-tint);
}
.bt__lab {
  font-size: var(--text-2xs);
  line-height: 1.3;
  text-align: center;
  color: var(--color-ink-400);
}
.bt__step.is-done .bt__lab,
.bt__step.is-current .bt__lab {
  font-weight: var(--weight-semibold);
  color: var(--color-contrast);
}

/* Which steps each checkout actually offers. The two are not the same, and a
   section headlined "supports both" has to say where they part company or it
   is selling something the buyer will not find. Tagging each line as always or
   optional puts that in a shape a merchant can scan. */
.bt__opts {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.bt__opts li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-ink-600);
}
.bt__tag {
  flex: none;
  min-width: 62px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--color-accent-tint);
  border: 1px solid var(--color-accent-tint-border);
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}
.bt__tag.is-fixed {
  background: var(--color-gray-50);
  border-color: var(--color-line-200);
  color: var(--color-ink-500);
}

/* What is true of this checkout and not the other. Saying the classic-only
   parts out loud costs nothing — they are in the docs already — and a merchant
   who buys expecting a Login step on the block checkout and does not get one
   asks for a refund and leaves a review. */
.bt__note {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-line-200);
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--color-ink-500);
}

/* --- What does not change ------------------------------------------------ */

.bt__same {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 24px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.bt__same li {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-ink-500);
  padding-left: 14px;
  border-left: 2px solid var(--color-accent-tint-border);
}
.bt__sameh {
  display: block;
  font-weight: var(--weight-semibold);
  color: var(--color-contrast);
  margin-bottom: 2px;
}

/* --- Narrow -------------------------------------------------------------- */

@container (max-width: 720px) {
  .bt { padding: var(--space-60) 24px; }
  .bt__same { grid-template-columns: repeat(2, 1fr); }
  .bt__panel { padding: 22px 20px 20px; }
  .bt__dot { width: 26px; height: 26px; font-size: 11px; box-shadow: none !important; }
  .bt__step { gap: 8px; }
  .bt__step::after { top: 12px; left: calc(50% + 18px); right: calc(-50% + 18px); }
  .bt__lab { font-size: 11px; }
  /* Five labels across a phone is the tight case; the shortcode is the first
     thing that can go, since the panel heading already says which checkout. */
  .bt__ctx code { display: none; }
  .bt__opts li { flex-direction: column; gap: 4px; }
  .bt__tag { min-width: 0; align-self: flex-start; }
}
@container (max-width: 440px) {
  .bt__seg { width: 100%; }
  .bt__tab { flex: 1; text-align: center; padding: 9px 10px; }
  /* Two up, not one. Stacked, four short items become a long thin list that
     pushes everything below it down a screen; paired, they stay a block the
     eye takes in at once, which is what a reassurance strip is for. */
  .bt__same { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
  .bt__same li { padding-left: 11px; }
}

/* A working spinner rather than a dot, because the line is about the loading
   animations — the sentence and the mark say the same thing. It is one of the
   three the plugin ships (Spinning Circle); the arc is the accent so it reads
   as the product's own, not a generic wait indicator. */
.bt__spin {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 9px;
  vertical-align: -1px;
  border: 2px solid var(--color-line-200);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: bt-spin 0.9s linear infinite;
}
@keyframes bt-spin { to { transform: rotate(360deg); } }

/* An indefinite spin is exactly the kind of motion that triggers vestibular
   symptoms, and nothing here is actually loading. */
@media (prefers-reduced-motion: reduce) {
  .bt__spin { animation: none; border-top-color: var(--color-line-300); }
}