/* LWN Pro — the before/after comparison.

   Two checkouts side by side, each in its own card, under one headline that
   states the choice. Framed as two ways of building a checkout rather than a
   problem and a fix: nobody shopping for a plugin thinks their current checkout
   is broken, and saying so puts them on the defensive before anything has been
   sold. The density of one card against the calm of the other argues the case
   without the page having to make the accusation.

   Everything here is drawn in CSS rather than screenshotted. It stays crisp at
   any zoom, the labels are real selectable text, and step names change without
   exporting new artwork. */

.pt {
  background: #FFFFFF;
  /* Short at the top: the wave is the section's edge, so it does not need a
     field of white above it as well. */
  padding: 24px 40px 76px;
  container-type: inline-size;
  font-family: var(--font-sans);
}
.pt__in { max-width: 1140px; margin: 0 auto; }

/* --- Section header ------------------------------------------------------ */

/* --- The lead-in ---------------------------------------------------------
   An arrow into the section, and nothing else. A wave ran the width of the
   page here first; it was a lot of drawing to say "the next part starts
   below", which is all an arrow has to say. Same bubble as the seam between
   the cards, turned to point down. */
.pt__top {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}
.pt__arrow {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid var(--color-accent-tint-border);
  box-shadow: 0 8px 20px -12px rgba(30, 94, 184, 0.6);
  color: var(--color-primary);
  display: grid;
  place-content: center;
  animation: ptNudge 3.2s ease-in-out infinite;
}
.pt__arrow svg { width: 18px; height: 18px; }
@keyframes ptNudge {
  0%, 62%, 100% { transform: translateY(0); }
  76% { transform: translateY(5px); }
  88% { transform: translateY(0); }
}

/* Centred. The title is held to 22ch so it breaks where it should, which
   left half the row empty when the header sat against the left edge. */
.pt__head { margin-bottom: 38px; text-align: center; }
.pt__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-400);
  margin: 0 0 14px;
}
.pt__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 auto;
  max-width: 22ch;
  text-wrap: balance;
}


/* --- The two cards ------------------------------------------------------- */

.pt__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

/* --- The seam between them ----------------------------------------------
   The gap was doing nothing and the two cards read as two unrelated things.
   A wave runs the height of the taller card with a bubble on it, so the pair
   reads as one movement: this, then that. Decorative only — the Before and
   After kickers carry the meaning for anyone who cannot see it. */
.pt__seam {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-tint-border);
}
.pt__wave {
  position: absolute;
  inset: 0;
  width: 24px;
  height: 100%;
  margin: 0 auto;
}
.pt__bubble {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid var(--color-accent-tint-border);
  box-shadow: 0 6px 18px -10px rgba(30, 94, 184, 0.55);
  color: var(--color-primary);
  display: grid;
  place-content: center;
}
.pt__bubble svg { width: 17px; height: 17px; }
.pt__card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  padding: 26px 26px 22px;
  min-width: 0;
}
/* The single-page card is deliberately the quieter of the two: same structure,
   less contrast, so the eye settles on the right-hand one without the page
   having to say which one it prefers. */
.pt__card--before {
  background: #F7F9FB;
  border: 1px solid var(--color-line-200);
}
.pt__card--after {
  background: #FFFFFF;
  border: 1px solid var(--color-accent-tint-border);
  box-shadow: 0 14px 34px -26px rgba(30, 94, 184, 0.5);
}

.pt__cardhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.pt__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-400);
  margin: 0;
}
.pt__kicker--accent { color: var(--color-primary); }

/* The counter is the argument in two characters: one page of one, against step
   two of four. */
.pt__meta {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-ink-400);
  margin: 0;
  white-space: nowrap;
}
.pt__meta--accent { color: var(--color-primary); }

.pt__q {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-contrast);
  margin: 0 0 22px;
}
.pt__card--before .pt__q { color: var(--color-ink-600); }

/* --- The form skeletons -------------------------------------------------- */

/* Both cards draw the same thing — a checkout form — at the two lengths the
   two approaches produce. Chips were a list of field names; this is the shape
   of the screen, which is the actual difference between the two products.

   Labels are real text rather than gray bars: a reader should be able to check
   that these are genuinely WooCommerce's fields, not decoration. */
.sk {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0 0 auto;
}
.sk__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sk__lab {
  display: block;
  margin-bottom: 5px;
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--color-ink-400);
}
.sk__in {
  display: block;
  height: 26px;
  border-radius: 5px;
  background: #FFFFFF;
  border: 1px solid var(--color-line-200);
}
.sk__in--tall { height: 40px; }
/* The buttons carry their labels for the same reason the fields do: a reader
   should be able to see what the step actually offers, not guess at two
   colored rectangles. */
.sk__in--btn {
  height: 30px;
  min-width: 76px;
  padding: 0 14px;
  margin-left: auto;
  border: none;
  background: #E4E8ED;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  color: var(--color-ink-500);
}
.sk__in--btn.is-accent { background: var(--color-primary); color: #FFFFFF; }

/* Back and Next, the pair the stepper actually renders. Back is an outline
   because a stepped checkout that only moves forward is a trap — being able to
   return to a finished step is part of what is being sold here. */
.sk__btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}
.sk__btns .sk__in--btn { margin-left: 0; }
.sk__in--ghost {
  background: #FFFFFF;
  border: 1px solid var(--color-line-300);
  color: var(--color-ink-600);
}

/* The shipping step's real content: a short list of methods to pick from. An
   empty input box said "a field goes here"; this says what the customer is
   actually deciding, which is the more useful thing for a merchant to see. */
.sk__opts { display: flex; flex-direction: column; gap: 7px; }
.sk__opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border: 1px solid var(--color-line-200);
  border-radius: 6px;
  background: #FFFFFF;
  font-size: 11.5px;
  line-height: 1.2;
  color: var(--color-ink-500);
}
.sk__opt i {
  flex: none;
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 1.5px solid var(--color-line-300);
  background: #FFFFFF;
}
.sk__opt.is-picked {
  border-color: var(--color-accent-tint-border);
  background: var(--color-accent-tint);
  color: var(--color-contrast);
  font-weight: var(--weight-medium);
}
.sk__opt.is-picked i {
  border: 4px solid var(--color-primary);
}

/* The long form is cut off and faded rather than shown whole. Its full height
   would dwarf the card beside it, and "it carries on past here" is the point —
   a form the reader cannot see the end of is exactly the complaint. */
.sk--long {
  max-height: 296px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 68%, transparent 100%);
          mask-image: linear-gradient(#000 68%, transparent 100%);
}

/* The short one is not cut off. That is the whole comparison: one screen you
   can see the bottom of, one you cannot. */
.sk--short { gap: 10px; }

/* --- Right: the stepper -------------------------------------------------- */

/* The connector runs blue up to the step the customer has reached and gray
   beyond it. Answering "how much is left" is the whole job of a stepper, and a
   single flat color cannot do it. Each step draws its own segment to the
   right, so the line changes color mid-row without a seam. */
.pt__flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.pt__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.pt__step::after {
  content: "";
  position: absolute;
  top: 15px;
  left: calc(50% + 22px);
  right: calc(-50% + 22px);
  height: 2px;
  border-radius: 2px;
  background: #E1E6EC;
}
.pt__step:last-child::after { display: none; }
.pt__step.is-done::after { background: var(--color-primary); }

.pt__dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  background: #F1F4F7;
  border: 2px solid transparent;
  color: var(--color-ink-400);
}
.pt__step.is-done .pt__dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}
.pt__step.is-current .pt__dot {
  background: #FFFFFF;
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-accent-tint);
}

.pt__lab {
  font-size: var(--text-2xs);
  line-height: 1.3;
  text-align: center;
  color: var(--color-ink-400);
}
.pt__step.is-done .pt__lab,
.pt__step.is-current .pt__lab {
  font-weight: var(--weight-semibold);
  color: var(--color-contrast);
}

/* What the customer is actually looking at on the current step. The point of
   the panel is the count: two things, not thirteen. */
.pt__now {
  border: 1px solid var(--color-line-200);
  border-radius: 10px;
  background: #FBFCFD;
  padding: 14px 16px 16px;
  margin: 0 0 auto;
}
.pt__nowlab {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-400);
  margin: 0 0 10px;
}


/* --- The line that sells ------------------------------------------------- */

.pt__cap {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-line-200);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-ink-500);
}
.pt__cap::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-line-300);
  transform: translateY(-2px);
}
.pt__cap--accent {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
  border-top-color: var(--color-accent-tint-border);
}
.pt__cap--accent::before { background: var(--color-primary); }

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

@container (max-width: 900px) {
  .pt { padding: 56px 30px; }
  .pt__cards { grid-template-columns: 1fr; gap: 14px; }
  /* Stacked, there is no run of card to trace, so the wave goes and the
     bubble stays — turned to point down the page rather than across it. */
  .pt__seam { height: 50px; }
  .pt__wave { display: none; }
  .pt__bubble svg { transform: rotate(90deg); }
  .pt__title { max-width: none; }
  .pt__head { text-align: start; }
  .pt__top { margin-bottom: 24px; }
}

@container (max-width: 560px) {
  .pt { padding: 40px 20px; }
  .pt__card { padding: 22px 20px 18px; }

  /* The stepper keeps its shape. An earlier version stacked it into a vertical
     list, which fitted the labels comfortably but showed a checkout the plugin
     does not render — its stepper is a row on a phone too. It scales instead. */
  .pt__dot { width: 27px; height: 27px; font-size: 11px; box-shadow: none !important; }
  .pt__step { gap: 8px; }
  .pt__step::after { top: 12px; left: calc(50% + 18px); right: calc(-50% + 18px); }
  .pt__lab { font-size: 11px; }

  /* The single-page card is the setup for the argument, not the argument. On a
     phone it costs a screenful of scrolling before the reader reaches the part
     that sells, so the multi-step card carries the section alone. */
  .pt__card--before { display: none; }
  /* And with nothing to lead from, the seam has nothing to join. */
  .pt__seam { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pt__arrow { animation: none; }
}