/* LWN Pro — nothing lost on the way back.

   The hardest claim on the page to make with a picture: "progress survives a
   refresh" is a promise about a thing that has not happened. A screenshot of a
   checkout on step 3 is a screenshot of a checkout on step 3, before and after.

   So the reader presses reload themselves. The frame goes, the spinner runs,
   and the same step comes back with the same values in it. The pause is the
   argument — an instant return would look like the button had done nothing,
   which is exactly the wrong impression. */

.sp {
  background: #FFFFFF;
  padding: var(--space-70) 40px;
  container-type: inline-size;
  font-family: var(--font-sans);
}
.sp__in {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 480px);
  gap: 56px;
  align-items: center;
}

/* --- Copy ---------------------------------------------------------------- */

.sp__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;
}
.sp__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 14px;
}
.sp__lede {
  max-width: 46ch;
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-ink-600);
}

/* --- The frame ----------------------------------------------------------- */

.sp__frame {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--color-line-200);
  border-radius: 12px;
  box-shadow: 0 18px 40px -30px rgba(23, 24, 26, 0.45);
  overflow: hidden;
}
.sp__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px 9px 12px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line-200);
}
.sp__dots { display: flex; gap: 6px; flex: none; }
.sp__dots i { width: 8px; height: 8px; border-radius: 50%; background: #D8DBDF; }
.sp__url {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-ink-400);
  margin-right: auto;
}

/* The button is the whole interaction, so it says what it does rather than
   sitting in the corner as a 16px glyph. It also has no negative margin now:
   the frame clips its overflow, so pulling the button outward cropped it
   against the rounded corner. */
.sp__reload {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--color-accent-tint-border);
  border-radius: 999px;
  background: var(--color-accent-tint);
  color: var(--color-primary);
  font-family: inherit;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.sp__reload svg { width: 14px; height: 14px; }
.sp__reload:hover:not(:disabled) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}
.sp__reload:disabled { opacity: 0.65; cursor: default; }
.sp__reload:disabled svg { animation: sp-turn 0.85s linear; }
.sp__reload:focus-visible { outline: 2px solid var(--color-blue-700); outline-offset: 2px; }
@keyframes sp-turn { to { transform: rotate(360deg); } }

/* --- The screen ---------------------------------------------------------- */

.sp__screen {
  padding: 22px 20px 20px;
  transition: opacity 0.2s ease;
}
.sp__screen.is-out { opacity: 0; }
/* A short wash of tint on return, so the eye is drawn to the thing that did
   not change. */
.sp__screen.is-back { animation: sp-return 0.6s ease; }
@keyframes sp-return {
  0% { background: var(--color-accent-tint); }
  100% { background: transparent; }
}

.sp__flow { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 20px; padding: 0; list-style: none; }
.sp__s {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.sp__s::after {
  content: "";
  position: absolute;
  top: 13px;
  left: calc(50% + 18px);
  right: calc(-50% + 18px);
  height: 2px;
  border-radius: 2px;
  background: #E1E6EC;
}
.sp__s:last-child::after { display: none; }
.sp__s.is-done::after { background: var(--color-primary); }
.sp__d {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  background: #F1F4F7;
  border: 2px solid transparent;
  color: var(--color-ink-400);
}
.sp__s.is-done .sp__d {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}
.sp__s.is-current .sp__d {
  background: #FFFFFF;
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-accent-tint);
}
.sp__l {
  font-size: var(--text-2xs);
  line-height: 1.3;
  text-align: center;
  color: var(--color-ink-400);
}
.sp__s.is-done .sp__l,
.sp__s.is-current .sp__l { font-weight: var(--weight-semibold); color: var(--color-contrast); }

/* The values matter as much as the step. Coming back to the right screen with
   empty fields would still be a lost customer. */
.sp__fields { display: flex; flex-direction: column; gap: 12px; }
.sp__fl {
  display: block;
  margin-bottom: 6px;
  font-size: var(--text-xs);
  color: var(--color-ink-600);
}
.sp__fi {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border-radius: 7px;
  border: 1px solid var(--color-line-200);
  background: #FFFFFF;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-contrast);
  cursor: default;
}

.sp__flash {
  margin: 16px 0 0;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--color-accent-tint);
  border: 1px solid var(--color-accent-tint-border);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}

/* --- The loading state --------------------------------------------------- */

/* [hidden] loses to any class that sets display, so it has to be said here or
   the spinner covers the screen from page load. */
.sp__load[hidden], .sp__flash[hidden] { display: none; }
.sp__load {
  position: absolute;
  inset: 45px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
}
/* The plugin's default loading animation is a spinning circle; this is it. */
.sp__spin {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 3px solid var(--color-line-200);
  border-top-color: var(--color-primary);
  animation: sp-turn 0.75s linear infinite;
}

.sp__hint {
  margin: 12px 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-400);
}

@media (prefers-reduced-motion: reduce) {
  .sp__reload, .sp__screen { transition: none; }
  .sp__reload:disabled svg, .sp__screen.is-back { animation: none; }
  .sp__spin { animation-duration: 2s; }
}

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

@container (max-width: 900px) {
  .sp__in { grid-template-columns: 1fr; gap: 32px; }
  .sp__demo { max-width: 480px; }
}
@container (max-width: 560px) {
  .sp { padding: var(--space-60) 20px; }
  .sp__screen { padding: 18px 14px 16px; }
  .sp__d { width: 24px; height: 24px; font-size: 11px; box-shadow: none !important; }
  .sp__s::after { top: 11px; left: calc(50% + 15px); right: calc(-50% + 15px); }
  .sp__l { font-size: 10px; }
}