/* Welcome to Míngbai Pro: one seal-stamp moment shared by a confirmed purchase and an
   activated trial. The settled state is the default, so reduced motion, a repeat visit
   and a screenshot all show the same finished composition; [data-welcome="play"] only
   adds the one-time motion. Crimson is used for the brand seal and its brush line only. */

.pro-welcome {
  --pw-seal: var(--mb-brand-seal, #a3302a);
  --pw-paper: var(--mb-paper-raised, #fbf8f2);
  --pw-ink: var(--mb-ink, #1e1a16);
  --pw-ink-2: var(--mb-ink-secondary, #554c42);
  --pw-ink-3: var(--mb-ink-muted, #716659);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 22px;
  align-items: start;
}
.pro-welcome-seal {
  grid-row: span 2;
  display: block;
  width: 68px;
  height: 68px;
  margin-top: 4px;
  border-radius: 4px;
  transform: rotate(-3deg);
  position: relative;
}
/* The seal artwork (朙白, the moonlit window) is one shared SVG with its own carved texture. */
.pro-welcome-seal img { display: block; width: 100%; height: 100%; }
/* The ink ring that blooms once as the seal lands. */
.pro-welcome-seal::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 6px;
  border: 2px solid var(--pw-seal);
  opacity: 0;
  pointer-events: none;
}
.pro-welcome-kicker {
  margin: 4px 0 4px;
  color: var(--pw-ink-3);
  font: 600 12.5px/1.4 var(--mb-font-controls, sans-serif);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.pro-welcome-heading {
  position: relative;
  justify-self: start;
  padding-bottom: 12px;
}
.pro-welcome-title {
  margin: 0;
  color: var(--pw-ink);
  font: 600 clamp(28px, 4.2vw, 38px)/1.12 var(--mb-font-heading, Georgia, serif);
  outline: none;
}
/* The brush underlines the heading's last line and tapers just past its final letter;
   pro-welcome.js measures the rendered line, and the fallback spans the heading box. */
.pro-welcome-brush {
  position: absolute;
  left: var(--pw-brush-left, -2px);
  bottom: 0;
  width: var(--pw-brush-width, calc(100% + 6px));
  height: 10px;
  overflow: visible;
}
.pro-welcome-brush path {
  fill: var(--pw-seal);
  stroke: none;
  opacity: .8;
}
.pro-welcome-body { grid-column: 2; }
.pro-welcome-lede {
  max-width: 34em;
  margin: 18px 0 0;
  color: var(--pw-ink-2);
  font: 400 17px/1.55 var(--mb-font-reading, Georgia, serif);
}
/* Account facts: typography, alignment and whitespace only; no cell rules. */
.pro-welcome-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 44px;
  margin: 26px 0 0;
  padding: 0;
}
.pro-welcome-facts > div { min-width: 0; }
.pro-welcome-facts dt {
  color: var(--pw-ink-3);
  font: 600 12px/1.4 var(--mb-font-controls, sans-serif);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.pro-welcome-facts dd {
  margin: 3px 0 0;
  color: var(--pw-ink);
  font: 400 17px/1.4 var(--mb-font-reading, Georgia, serif);
  font-variant-numeric: lining-nums tabular-nums;
}
.pro-welcome-facts [hidden] { display: none; }
.pro-welcome-note {
  margin: 18px 0 0;
  color: var(--pw-ink-2);
  font: 400 15.5px/1.55 var(--mb-font-reading, Georgia, serif);
}

/* Off: the same block before activation (the trial offer) shows only its heading. */
.pro-welcome[data-welcome="off"] { display: block; }
.pro-welcome[data-welcome="off"] :is(.pro-welcome-seal, .pro-welcome-kicker, .pro-welcome-brush, .pro-welcome-body) { display: none; }
.pro-welcome[data-welcome="off"] .pro-welcome-heading { padding-bottom: 0; }

/* Compact form: the trial slot inside the pricing Pro card. */
.pro-welcome.is-compact { column-gap: 14px; }
.pro-welcome.is-compact .pro-welcome-seal { width: 40px; height: 40px; }
.pro-welcome.is-compact > :not(.pro-welcome-seal) { grid-column: 2; }
.pro-welcome.is-compact:not([data-welcome="off"]) .pro-welcome-heading { padding-bottom: 8px; }
.pro-welcome.is-compact:not([data-welcome="off"]) .pro-welcome-title { font-size: 19px; }
.pro-welcome.is-compact .pro-welcome-kicker { font-size: 11px; margin: 0 0 2px; }

@media (max-width: 560px) {
  .pro-welcome { column-gap: 16px; }
  .pro-welcome:not(.is-compact) .pro-welcome-seal { width: 44px; height: 44px; }
  h1.pro-welcome-title { font-size: 27px; }
  .pro-welcome-body { grid-column: 1 / -1; }
  .pro-welcome-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; margin-top: 22px; }
  .pro-welcome-facts > div { display: contents; }
  .pro-welcome-facts dt { padding-top: 3px; }
  .pro-welcome-facts dd { margin: 0; }
}

/* One-time motion, about 1.6 seconds. Nothing waits on it: actions are live throughout. */
.pro-welcome[data-welcome="play"] .pro-welcome-seal { animation: pw-stamp 520ms cubic-bezier(.3, .7, .2, 1) both; }
.pro-welcome[data-welcome="play"] .pro-welcome-seal::after { animation: pw-bloom 700ms 380ms ease-out both; }
.pro-welcome[data-welcome="play"] .pro-welcome-kicker,
.pro-welcome[data-welcome="play"] .pro-welcome-title { animation: pw-rise 520ms 360ms ease-out both; }
.pro-welcome[data-welcome="play"] .pro-welcome-brush { animation: pw-brush 620ms 760ms cubic-bezier(.5, 0, .2, 1) both; }
.pro-welcome[data-welcome="play"] .pro-welcome-body { animation: pw-rise 520ms 980ms ease-out both; }

@keyframes pw-stamp {
  0% { opacity: 0; transform: translateY(-18px) scale(1.55) rotate(-9deg); }
  62% { opacity: 1; transform: translateY(0) scale(.93) rotate(-3deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(-3deg); }
}
@keyframes pw-bloom {
  0% { opacity: .42; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}
@keyframes pw-rise {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes pw-brush {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}


@media (prefers-reduced-motion: reduce) {
  .pro-welcome[data-welcome="play"] *,
  .pro-welcome[data-welcome="play"] *::after { animation: none !important; }
}