/* ============================================================================
   Purchase — page components (pur-)

   Ported from the design reference (World Machine Purchase.dc.html) for the main
   page; the pro detail page reuses the same pricing-card + detail primitives.
   Builds on css/wm-dark.css (tokens, bands, wm- primitives), loaded first by
   wm_header() via wm_theme('dark'). Loaded with a cache-busting query
   (controllers/purchase.php passes css/purchase-dark.css?v=N) — bump N on edit.
   ============================================================================ */

.pur-gold { color: var(--wm-sand-gold); }

/* ---- Icons ---- */
.pur-ic { width: 18px; height: 18px; flex: none; }
.pur-ic--gold { color: var(--wm-sand-gold); }
.pur-ic--soft { color: var(--wm-terra-red-soft); }
.pur-ic--btn  { width: 16px; height: 16px; }

/* ============================================================================
   Hero — compact video band
   ============================================================================ */
.pur-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(340px, 44vh, 460px);
  background: var(--wm-band-deep);
}
/* The background <video> uses the shared .wm-hero__video (css/wm-dark.css). */
.pur-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(10,12,16,0.95) 0%, rgba(10,12,16,0.82) 42%, rgba(10,12,16,0.40) 72%, rgba(10,12,16,0.60) 100%),
    linear-gradient(180deg, rgba(10,12,16,0.55) 0%, rgba(10,12,16,0.05) 34%, rgba(10,12,16,0.92) 100%);
}
.pur-hero__inner { position: relative; z-index: 2; width: 100%; }
.pur-hero__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.pur-hero__meta .wm-eyebrow { margin: 0; }
.pur-hero__sep { width: 1px; height: 13px; background: var(--wm-earth-600); }
.pur-hero__spec { font-family: var(--wm-font-mono); font-size: 12px; color: var(--wm-earth-200); }
.pur-hero__title {
  font-family: var(--wm-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(40px, 6vw, 62px);
  line-height: 0.98;
  color: var(--wm-earth-50);
  margin: 0 0 18px;
  max-width: 760px;
}
.pur-hero__lede { font-size: 18px; line-height: 1.55; color: var(--wm-earth-200); margin: 0; max-width: 620px; }
.pur-hero__lede a { color: var(--wm-terra-red-soft); font-weight: 600; }

/* ============================================================================
   Pricing cards
   ============================================================================ */
.pur-grid { display: grid; grid-template-columns: 1fr 1.06fr 1fr; gap: 22px; align-items: start; }
/* Pro detail page: only two cards (Per-Seat + Studio), shown as equal-size peers
   — stretch to equal height and drop the featured lift so they line up. */
.pur-grid--two { grid-template-columns: repeat(2, 1fr); max-width: 920px; align-items: stretch; }
.pur-grid--two .pur-card--featured { margin-top: 0; }
/* Keep the two card heads the same height so the divider hairline lines up:
   match the price size on both, and trim the featured head's top padding by the
   4px top bar so both heads start (and therefore end) at the same offset. */
.pur-grid--two .pur-card__price--lg { font-size: 46px; }
.pur-grid--two .pur-card--featured .pur-card__head { padding-top: 26px; }

/* Surface (bg/border/radius) comes from the shared .wm-tile class in the markup. */
.pur-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  transition: box-shadow 200ms cubic-bezier(0.2,0.7,0.2,1), border-color 200ms cubic-bezier(0.2,0.7,0.2,1);
}
.pur-card:hover { box-shadow: 0 16px 40px rgba(0,0,0,0.55); border-color: var(--wm-earth-600); }

/* Featured (Professional): terra ring, lifted, gradient top bar. Same dark base
   as the other cards (so it doesn't read lighter), with a faint terra glow at
   the top that ties to the border + bar rather than a washed-out grey tint. */
.pur-card--featured {
  background:
    linear-gradient(180deg, rgba(161,73,54,0.13) 0%, rgba(161,73,54,0) 42%),
    var(--wm-earth-800);
  border: 1.5px solid var(--wm-terra-red);
  border-radius: 14px;
  box-shadow: 0 22px 52px rgba(0,0,0,0.55), 0 0 0 1px rgba(161,73,54,0.25);
  margin-top: -10px;
}
.pur-card--featured:hover { border-color: var(--wm-terra-red); }
.pur-card__bar { height: 4px; background: linear-gradient(90deg, var(--wm-terra-red), var(--wm-sand-gold)); }

.pur-card__head { padding: 30px 30px 26px; border-bottom: 1px solid var(--wm-earth-700); }
.pur-card--featured .pur-card__head { padding-top: 28px; border-bottom-color: #2A2530; }
.pur-card__nrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.pur-card__name {
  font-family: var(--wm-font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--wm-earth-50);
  margin: 0 0 6px;
}
.pur-card__nrow .pur-card__name { margin: 0; }
.pur-card--featured .pur-card__name { font-weight: 700; }
.pur-card__badge {
  flex: none;
  font-family: var(--wm-font-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wm-earth-900);
  background: var(--wm-sand-gold);
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.pur-card__sub { font-size: 14px; color: var(--wm-earth-300); margin: 0 0 20px; }
.pur-card--featured .pur-card__sub { color: var(--wm-earth-200); }
.pur-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--wm-font-display);
  font-weight: 700;
  font-size: 46px;
  letter-spacing: 0.01em;
  color: var(--wm-earth-50);
  margin: 0;
}
.pur-card__price--lg { font-size: 52px; }
.pur-card__unit { font-family: var(--wm-font-mono); font-weight: 400; font-size: 12px; color: var(--wm-earth-400); }
.pur-card--featured .pur-card__unit { color: var(--wm-earth-300); }

.pur-card__list { list-style: none; margin: 0; padding: 26px 30px 8px; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.pur-card__list li { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.45; color: var(--wm-earth-200); }
.pur-card__list b { color: var(--wm-sand-cream); font-weight: 600; }
.pur-card__list .pur-ic { width: 17px; height: 17px; margin-top: 2px; color: var(--wm-sand-gold); }
.pur-card__list .pur-ic--soft { color: var(--wm-terra-red-soft); }
.pur-card--featured .pur-card__list li { color: var(--wm-earth-100); }

.pur-card__foot { padding: 18px 30px 30px; }
.pur-buy { margin: 0; }
.pur-buy .wm-btn { font-size: 13px; }
.pur-card--featured .pur-buy .wm-btn { font-size: 13.5px; padding-top: 15px; padding-bottom: 15px; }
.pur-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: var(--wm-font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wm-terra-red-soft);
}
.pur-card__link:hover { color: var(--wm-sand-cream); }
.pur-card__link .pur-ic { width: 14px; height: 14px; }
.pur-card__note { font-family: var(--wm-font-mono); font-size: 11px; color: var(--wm-earth-400); margin: 13px 0 0; line-height: 1.5; }

.pur-finehint { text-align: center; font-size: 14.5px; color: var(--wm-earth-300); margin: 32px 0 0; }
.pur-finehint a { color: var(--wm-terra-red-soft); font-weight: 600; }

/* ============================================================================
   Compare table
   ============================================================================ */
.pur-compareband { background: #121319; }
.pur-comparewrap { max-width: 1080px; }
.pur-compare__head { margin-bottom: 32px; }
.pur-compare__head .wm-eyebrow { margin-bottom: 12px; }
.pur-compare { border: 1px solid var(--wm-earth-700); border-radius: 12px; overflow: hidden; background: var(--wm-earth-800); }
.pur-compare__row { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; align-items: center; padding: 14px 24px; border-bottom: 1px solid #1C2026; }
.pur-compare__row:last-child { border-bottom: none; }
.pur-compare__row--head { align-items: start; background: #1A1E26; padding: 16px 24px; }
.pur-compare__cap { font-size: 14.5px; color: var(--wm-earth-100); }
.pur-compare__row--head .pur-compare__cap {
  font-family: var(--wm-font-display); font-weight: 600; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--wm-earth-300);
}
.pur-compare__col { display: flex; flex-direction: column; align-items: center; gap: 3px; font-family: var(--wm-font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wm-earth-200); }
.pur-compare__col--pro .pur-compare__t { color: var(--wm-sand-cream); font-weight: 700; }
.pur-compare__free { font-family: var(--wm-font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wm-success); }
.pur-compare__cell { display: flex; justify-content: center; }
.pur-compare__txt { font-family: var(--wm-font-mono); font-size: 12.5px; color: var(--wm-earth-200); text-align: center; }
/* Featured (Professional) column — carry the header's cream emphasis down
   through the body cells. */
.pur-compare__cell--pro .pur-compare__txt { color: var(--wm-sand-cream); }
.pur-compare__cell .pur-ic { width: 18px; height: 18px; color: var(--wm-sand-gold); }
.pur-compare__dash { width: 14px; height: 2px; border-radius: 2px; background: var(--wm-earth-600); }

/* ============================================================================
   Details + system requirements
   ============================================================================ */
.pur-detailgrid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: start; }
.pur-detailgrid--mt { margin-top: 36px; }
.pur-detail { padding: 34px 36px 30px; }
.pur-detail__h { font-family: var(--wm-font-display); font-weight: 600; font-size: 22px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--wm-earth-50); margin: 0 0 22px; }
.pur-detail__list { display: flex; flex-direction: column; gap: 16px; }
.pur-detail__item { display: flex; gap: 13px; }
.pur-detail__item p { font-size: 15px; line-height: 1.55; color: var(--wm-earth-200); margin: 0; }
.pur-detail__item .pur-ic { margin-top: 2px; }
.pur-detail__eula { display: inline-flex; align-items: center; gap: 7px; margin-top: 24px; font-family: var(--wm-font-mono); font-size: 13px; color: var(--wm-terra-red-soft); }
.pur-detail__eula:hover { color: var(--wm-sand-cream); }
.pur-detail__eula .pur-ic { width: 15px; height: 15px; }

.pur-req__lead { font-size: 14.5px; line-height: 1.55; color: var(--wm-earth-300); margin: 0 0 18px; }
.pur-req__lead strong { color: var(--wm-earth-100); }
.pur-req__label { font-family: var(--wm-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wm-earth-400); margin: 0 0 12px; }
.pur-req__list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pur-req__list li { display: flex; gap: 10px; font-size: 14.5px; color: var(--wm-earth-200); }
.pur-req__list .pur-ic { width: 16px; height: 16px; color: var(--wm-earth-400); margin-top: 2px; }
.pur-req__foot { font-size: 13.5px; line-height: 1.55; color: var(--wm-earth-400); margin: 0; }
.pur-req__foot a { color: var(--wm-terra-red-soft); }

/* ============================================================================
   Renew strip
   ============================================================================ */
.pur-renewband { background: linear-gradient(180deg, var(--wm-band-deep) 0%, #121319 100%); }
.pur-renew { padding: 34px 36px; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.pur-renew__body { flex: 1; min-width: 320px; }
.pur-renew__h { font-family: var(--wm-font-display); font-weight: 600; font-size: 24px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--wm-earth-50); margin: 0 0 10px; }
.pur-renew__body p { font-size: 15px; line-height: 1.6; color: var(--wm-earth-300); margin: 0; max-width: 640px; }
.pur-renew .wm-btn { flex: none; }

/* ============================================================================
   Upgrade to Pro
   ============================================================================ */
.pur-uphead { margin-bottom: 32px; }
.pur-uphead .wm-eyebrow { margin-bottom: 12px; }
.pur-upgrade { display: grid; grid-template-columns: 1fr 1.05fr; gap: 28px; align-items: start; }
.pur-upgrade__intro { font-size: 16px; line-height: 1.6; color: var(--wm-earth-200); margin: 0 0 22px; }
.pur-upgrade__intro b { color: var(--wm-sand-cream); }
.pur-upgrade__points { display: flex; flex-direction: column; gap: 14px; }
.pur-upgrade__points .pur-detail__item p { font-size: 14.5px; color: var(--wm-earth-300); }
.pur-upgrade__points b { color: var(--wm-earth-100); font-weight: 600; }

.pur-upgrade__card { padding: 32px 34px; }
.pur-upgrade__cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.pur-upgrade__title { font-family: var(--wm-font-display); font-weight: 600; font-size: 18px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--wm-earth-50); margin: 0; }
.pur-upgrade__price { font-family: var(--wm-font-display); font-weight: 700; font-size: 28px; color: var(--wm-sand-gold); }
.pur-upgrade__unit { font-family: var(--wm-font-mono); font-size: 12px; color: var(--wm-earth-400); margin: 0 0 22px; }
.pur-field { margin-bottom: 16px; }
.pur-field label { display: block; font-family: var(--wm-font-display); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wm-earth-200); margin: 0 0 7px; }
.pur-field .wm-input { width: 100%; padding: 12px 14px; }
.pur-mono { font-family: var(--wm-font-mono); }
.pur-upform .wm-btn { margin-top: 6px; }

/* ============================================================================
   Basic Edition CTA
   ============================================================================ */
.pur-basic {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--wm-terra-red-deep) 0%, var(--wm-band-deep) 78%);
}
.pur-basic__topo { position: absolute; inset: 0; opacity: 0.5; pointer-events: none; width: 100%; height: 100%; }
.pur-basic__inner { position: relative; z-index: 2; max-width: 980px; display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.pur-basic__body { flex: 1; min-width: 320px; max-width: 600px; }
.pur-basic__eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; color: #EFC9A0; }
.pur-basic__eyebrow span { font-family: var(--wm-font-display); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.pur-basic__eyebrow .pur-ic { width: 20px; height: 20px; }
.pur-basic__body h2 { margin-bottom: 14px; }
.pur-basic__body p { font-size: 17px; line-height: 1.55; color: var(--wm-earth-100); margin: 0; }
.pur-basic__btn { flex: none; }

/* ============================================================================
   Professional detail page
   ============================================================================ */
.pur-prointro { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center; }
.pur-pronote { display: flex; gap: 14px; align-items: flex-start; }
.pur-pronote .pur-ic { width: 30px; height: 30px; margin-top: 2px; }
.pur-pronote p { font-size: 15px; line-height: 1.6; color: var(--wm-earth-300); margin: 0; }

.pur-proband { background: #121319; }
.pur-prohead { max-width: 760px; margin-bottom: 36px; }
.pur-prohead h2 { margin-bottom: 14px; }

.pur-prorow { display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: center; margin-bottom: 48px; }
.pur-prorow:last-child { margin-bottom: 0; }
.pur-prorow--reverse .pur-profig { order: 2; }
.pur-prorow--reverse .pur-prorow__text { order: 1; }
.pur-prorow__text h2, .pur-prorow__text h3 { margin-bottom: 14px; }
.pur-prorow__text > p { color: var(--wm-earth-200); margin: 0 0 14px; line-height: 1.6; }
.pur-prorow__text .wm-lede { margin-bottom: 14px; }
.pur-profig { margin: 0; }
.pur-profig img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--wm-earth-700); }

.pur-cols { columns: 2; }
.pur-prosplit { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.pur-prosplit p { color: var(--wm-earth-200); line-height: 1.6; }
.pur-code {
  margin: 16px 0 0;
  padding: 16px 18px;
  background: #0E1014;
  border: 1px solid var(--wm-earth-700);
  border-radius: 8px;
  font-family: var(--wm-font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--wm-earth-200);
  overflow-x: auto;
}

/* ============================================================================
   Responsive — single 860px collapse
   ============================================================================ */
@media (max-width: 860px) {
  .pur-grid { grid-template-columns: 1fr; gap: 18px; }
  .pur-grid--two { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
  .pur-card--featured { margin-top: 0; }
  .pur-detailgrid { grid-template-columns: 1fr; }
  .pur-upgrade { grid-template-columns: 1fr; }
  .pur-prointro { grid-template-columns: 1fr; gap: 18px; }
  .pur-prorow { grid-template-columns: 1fr; gap: 24px; margin-bottom: 36px; }
  .pur-prorow--reverse .pur-profig { order: 0; }
  .pur-prorow--reverse .pur-prorow__text { order: 0; }
  .pur-prosplit { grid-template-columns: 1fr; gap: 28px; }

  /* Compare table: swipe horizontally rather than crush 5 columns. The
     capability column stays sticky so row labels never scroll away, and a
     right-edge fade (on the non-scrolling parent) signals the hidden columns —
     the view's script drops it via --end once fully scrolled. */
  .pur-comparescroll { position: relative; }
  .pur-comparescroll::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 44px;
    background: linear-gradient(270deg, #121319 12%, rgba(18, 19, 25, 0));
    pointer-events: none;
    opacity: 1;
    transition: opacity 200ms;
    z-index: 2;
  }
  .pur-comparescroll--end::after { opacity: 0; }
  .pur-comparescroll__in { overflow-x: auto; }
  /* overflow: clip keeps the rounded-corner clipping WITHOUT creating a scroll
     container — the base overflow: hidden would break position: sticky on the
     capability column (sticky pins to the nearest overflow ancestor). */
  .pur-compare { min-width: 640px; overflow: clip; }
  /* Rows switch grid → flex here: a grid item's sticky containing block is its
     own (narrow) track, so the sticky cap could never pin. A flex item sticks
     relative to the whole row. */
  .pur-compare__row { display: flex; align-items: stretch; padding-left: 0; }
  .pur-compare__col, .pur-compare__cell { flex: 1 0 117px; }
  .pur-compare__cell { align-items: center; }
  .pur-compare__cap {
    position: sticky;
    left: 0;
    z-index: 1;
    flex: 0 0 172px;
    display: flex;
    align-items: center;
    padding: 0 12px 0 16px;
    background: var(--wm-earth-800);
    box-shadow: 10px 0 14px -10px rgba(0, 0, 0, 0.65);
  }
  .pur-compare__row--head .pur-compare__cap { background: #1A1E26; }
}