/* ============================================================
   SkinSignal - MEMBERSHIP

   The landing's close (index.html #trailerPricing, "Same game. More
   edge.") and the membership cards the dashboard shows (#membership in
   dashboard.html, which loads this file for them).

   THREE RUNGS, ONE CLEAR CHOICE. Free is a quiet panel with a silver
   way in; Monthly carries the brand blue; Lifetime is the hero: wider,
   taller, raised 14px, gold edged and gold priced, because gold on this
   site means legendary. Gold is Lifetime's alone; blue is a whisper.
   No "most popular", no countdown, no stock bar, no crossed out price.

   THE FOUNDING PLATE is CSS, not art: a small metallic plate that says
   "Founding member / First wave". There is no badge image to show, and
   nothing here pretends there is.

   WIRING, UNTOUCHED. js/lander.js finds the buttons through the .tiers
   container and .tier__btn[data-tier], writes status into #tiersNote,
   and replaces a button's text while checkout opens (the arrows are CSS,
   so the swap cannot delete them). #tiers is the anchor every Upgrade
   link on the site points at. tools/test-paywall.js and
   tools/test-conversion.js check all of it, and that the dashboard's
   Monthly and Lifetime cards are these, word for word.

   STILL ONCE IT HAS ARRIVED. The landing's cards rise in once when the
   section is scrolled to (js/lander.js adds .is-revealed), Lifetime
   settling to its raised place last, and then nothing moves: no looping
   glow, no live dot. Reduced motion skips the entrance entirely.
   ============================================================ */

/* ============================================================
   THE LANDING SECTION
   ============================================================ */
.px {
  --gold: 240, 180, 41;
  --px-gold: #e4ae39;
  --px-blue: #6a9fff;
  --px-ink: #f1f3f6;
  --px-ink-2: #b9bfca;
  --px-ink-3: #8a919e;
  --px-line: rgba(96, 140, 220, 0.15);
  --pad: clamp(20px, 3.8vw, 76px);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 6vw, 112px) 0 clamp(56px, 5vw, 96px);
  background:
    radial-gradient(32% 42% at 72% 52%, rgba(228, 174, 57, var(--amb-gold, 0.07)), rgba(228, 174, 57, 0) 72%),
    radial-gradient(30% 40% at 40% 50%, rgba(61, 127, 255, var(--amb-blue, 0.08)), rgba(61, 127, 255, 0) 72%),
    #05080d;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.px__inner { padding: 0 var(--pad); }

.px__head {
  margin: 0 auto clamp(40px, 3.8vw, 68px);
  text-align: center;
  scroll-margin-top: 96px;
}
.px__eyebrow {
  margin: 0 0 clamp(12px, 1vw, 18px);
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 600;
  font-size: clamp(12px, 0.78vw, 14px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--px-blue);
}
.px__title {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 90%;
  font-weight: 800;
  font-size: clamp(40px, 4.4vw, 88px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--px-ink);
}
.px__gold {
  color: var(--px-gold);
  background: linear-gradient(180deg, #f6d27a 0%, #e8b544 52%, #c98a1c 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.px__sub {
  max-width: 640px;
  margin: clamp(14px, 1.2vw, 20px) auto 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1vw, 19px);
  line-height: 1.55;
  color: var(--px-ink-2);
}
.px__sub b { font-weight: 500; color: var(--px-ink); }
.px__pill {
  display: inline-block;
  margin: clamp(16px, 1.4vw, 22px) 0 0;
  padding: 7px 20px;
  border: 1px solid rgba(76, 141, 255, 0.45);
  border-radius: 999px;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 600;
  font-size: clamp(11px, 0.7vw, 13px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #a8c4ff;
  background: rgba(10, 18, 34, 0.6);
}

/* ============================================================
   THE CARDS (the landing's three, the dashboard's two)
   ============================================================ */
.tiers {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.16fr);
  align-items: stretch;
  gap: clamp(16px, 1.4vw, 26px);
  max-width: 1480px;
  margin: 0 auto;
  text-align: left;
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2vw, 36px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(16, 24, 40, 0.92) 0%, rgba(8, 12, 20, 0.95) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 30px 60px -34px rgba(0, 0, 0, 0.95);
  transition: transform var(--hover-dur, 200ms) var(--ease), border-color var(--hover-dur, 200ms) ease;
}
.tier:hover { transform: translate3d(0, var(--hover-lift, -2px), 0); border-color: rgba(255, 255, 255, 0.16); }

.tier__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tier__name {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 700;
  font-size: clamp(14px, 0.9vw, 17px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #c9d2e3;
}

/* The small label top right: No card needed, Full access, Founding member. */
.tier__pill,
.tier__legend {
  flex: none;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 600;
  font-size: clamp(9.5px, 0.58vw, 11px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c9d2e3;
  white-space: nowrap;
}
.tier__pill--blue { border-color: rgba(76, 141, 255, 0.55); color: #a8c4ff; background: rgba(61, 127, 255, 0.08); }

.tier__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: clamp(14px, 1.2vw, 20px) 0 0;
}
/* The figure is the display face, over the .mono utility it carries. */
.tier .tier__amount {
  font-family: var(--font-display);
  font-stretch: 90%;
  font-weight: 800;
  font-size: clamp(46px, 3.6vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--px-ink, #f1f3f6);
}
.tier__per {
  font-family: var(--font-body);
  font-size: clamp(13px, 0.82vw, 15px);
  color: var(--px-ink-3, #8a919e);
}

.tier__pitch {
  margin: clamp(10px, 0.9vw, 14px) 0 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(15px, 1vw, 18px);
  color: var(--px-ink, #f1f3f6);
}
.tier__note {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: clamp(13px, 0.82vw, 15px);
  line-height: 1.55;
  color: var(--px-ink-2, #b9bfca);
}

.tier__list {
  display: grid;
  gap: clamp(10px, 0.8vw, 13px);
  margin: clamp(18px, 1.6vw, 26px) 0 clamp(20px, 1.8vw, 28px);
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
  font-size: clamp(13.5px, 0.86vw, 15.5px);
  line-height: 1.4;
  color: #d5d9e0;
}
.tier__list li { position: relative; padding-left: 30px; }
/* The check: a blue disc with a white tick; gold rings on Lifetime. */
.tier__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.3 8.7 13 14.2 7.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 19px no-repeat,
    linear-gradient(180deg, #4c8dff 0%, #3478f6 100%);
}

/* Every button on the same line: the space goes above it. A rounded
   rectangle here, like the site's other doors, not the pill. */
.tier .cta { margin-top: auto; border-radius: 10px; }
.tier__btn[disabled] { cursor: progress; }

/* ---------- Free: the way in ---------- */
.tier--free .tier__name { color: #aab2bf; }

/* ---------- Monthly: full access, in blue ---------- */
.tier--monthly {
  border-color: rgba(76, 141, 255, 0.4);
  background:
    radial-gradient(70% 40% at 50% 0%, rgba(61, 127, 255, 0.1), rgba(61, 127, 255, 0) 80%),
    linear-gradient(180deg, rgba(16, 26, 46, 0.94) 0%, rgba(8, 12, 22, 0.96) 100%);
}
.tier--monthly .tier__name { color: #a8c4ff; }
.tier--monthly:hover { border-color: rgba(106, 159, 255, 0.6); }

/* ---------- Lifetime: the hero ---------- */
.tier--lifetime {
  padding-top: clamp(30px, 2.4vw, 42px);
  border: 1.5px solid rgba(var(--gold, 240, 180, 41), 0.75);
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(240, 180, 41, 0.12), rgba(240, 180, 41, 0) 75%),
    linear-gradient(180deg, rgba(26, 22, 14, 0.96) 0%, rgba(10, 10, 12, 0.97) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 170, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 54px -12px rgba(240, 180, 41, 0.34),
    0 40px 80px -40px rgba(0, 0, 0, 0.95);
}
.tier--lifetime:hover { border-color: rgba(246, 210, 122, 0.95); }

/* The ribbon across the top edge. */
.tier__badge {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 18px 6px;
  translate: -50% -50%;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe08a 0%, #f0b429 60%, #d69a1a 100%);
  box-shadow: 0 8px 20px -8px rgba(240, 180, 41, 0.6);
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 700;
  font-size: clamp(10px, 0.62vw, 11.5px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1a1102;
  white-space: nowrap;
}
.tier__badge-star { font-size: 11px; letter-spacing: 0; }

.tier--lifetime .tier__name { color: #f5d78a; }
.tier__legend { border-color: rgba(var(--gold, 240, 180, 41), 0.6); color: #f5d78a; background: rgba(240, 180, 41, 0.07); }

.tier--lifetime .tier__amount {
  color: #f0b429;
  background: linear-gradient(180deg, #ffe08a 0%, #f0b429 55%, #c98a12 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(52px, 4.2vw, 84px);
}
.tier--lifetime .tier__per { color: #d8c69d; }
.tier__save {
  padding: 3px 9px;
  border: 1px solid rgba(var(--gold, 240, 180, 41), 0.45);
  border-radius: 999px;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f5d78a;
}
.tier__own {
  margin: clamp(10px, 0.9vw, 14px) 0 0;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 800;
  font-size: clamp(18px, 1.3vw, 25px);
  line-height: 1.2;
  color: var(--px-ink, #f1f3f6);
}
.tier__own-note {
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: clamp(13px, 0.82vw, 15px);
  line-height: 1.55;
  color: #cfc7b5;
}

/* The list and the founding plate side by side. */
.tier__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}
.tier--lifetime .tier__list li { color: #ece6d8; }
.tier--lifetime .tier__list li::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.3 8.7 13 14.2 7.3' fill='none' stroke='%23f0b429' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 19px no-repeat;
  box-shadow: inset 0 0 0 1.5px rgba(240, 180, 41, 0.75);
}
.tier--lifetime .tier__list .tier__founding { color: #ffe3a3; }

/* THE FOUNDING PLATE: CSS metal, not an image. */
.tier__plate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: clamp(104px, 7.4vw, 140px);
  padding: 14px 10px 12px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(20, 16, 8, 0.96) 0%, rgba(8, 8, 10, 0.98) 100%) padding-box,
    linear-gradient(160deg, #fff1c4 0%, #e8b544 30%, #8a5d10 60%, #f6d27a 100%) border-box;
  border: 2px solid transparent;
  transform: rotate(6deg);
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.95), 0 0 30px -12px rgba(240, 180, 41, 0.45);
  text-align: center;
}
.tier__plate svg { width: 30px; height: 30px; fill: none; stroke: #f0b429; stroke-width: 1.6; stroke-linejoin: round; }
.tier__plate-name {
  max-width: 6.2em;
  font-family: var(--font-display);
  font-stretch: 90%;
  font-weight: 800;
  font-size: clamp(13px, 0.9vw, 17px);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f6d27a;
}
.tier__plate-wave {
  padding-top: 5px;
  border-top: 1px solid rgba(240, 180, 41, 0.35);
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 600;
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #cfb47a;
}

/* The first wave, said once and plainly. No dot, no count. */
.tier__fomo {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid rgba(240, 180, 41, 0.22);
  border-radius: 10px;
  background: rgba(240, 180, 41, 0.05);
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.4;
  color: #f5d78a;
}

/* ---------- The landing's grid: Lifetime raised ----------
   Free and Monthly the same height; Lifetime reaches higher than both,
   and every button still sits on one line across the three. */
.px .tiers { align-items: stretch; padding-top: 30px; }
.px .tier--lifetime { margin-top: -30px; }

/* ============================================================
   THE JOURNEY (landing)
   ============================================================ */
.px__journey {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1480px;
  margin: clamp(36px, 3vw, 56px) auto 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--px-line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(14, 22, 38, 0.6) 0%, rgba(8, 13, 22, 0.6) 100%);
}
.px-step {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.2vw, 20px);
  padding: clamp(18px, 1.5vw, 28px);
}
.px-step + .px-step { border-left: 1px solid rgba(255, 255, 255, 0.05); }
.px-step__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(44px, 3.2vw, 58px);
  height: clamp(44px, 3.2vw, 58px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}
.px-step__icon svg { width: 55%; height: 55%; fill: none; stroke: var(--px-gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.px-step--blue .px-step__icon svg { stroke: var(--px-blue); }
.px-step__text {
  font-family: var(--font-body);
  font-size: clamp(13px, 0.8vw, 15px);
  line-height: 1.5;
  color: var(--px-ink-2);
}
.px-step__n {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 13px;
  color: var(--px-blue);
}
.px-step__title {
  display: block;
  margin: 4px 0 6px;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 700;
  font-size: clamp(12.5px, 0.82vw, 15px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--px-ink);
}

/* ============================================================
   TRUST AND STATUS (landing and dashboard)
   ============================================================ */
.tiers__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px clamp(20px, 2vw, 36px);
  margin: clamp(26px, 2.4vw, 40px) auto 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 600;
  font-size: clamp(10.5px, 0.64vw, 12px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--px-ink-2, #b9bfca);
}
.tiers__trust li { display: inline-flex; align-items: center; gap: 8px; }
.tiers__trust li::before {
  content: "";
  width: 14px;
  height: 14px;
  background: #6a9fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The status line js/lander.js writes into while checkout opens. */
.tiers__note {
  min-height: 1.65em;
  max-width: 560px;
  margin: 12px auto 0;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.65;
  text-align: center;
  color: var(--px-ink-3, #8a919e);
}
.tiers__note--error { color: var(--px-ink, #f1f3f6); }

/* ============================================================
   THE ENTRANCE (landing only), once, then still
   js/lander.js adds .is-revealed when the section arrives, and never
   runs at all for reduced motion, so the resting state is the default.
   ============================================================ */
@keyframes pxRise {
  from { opacity: 0; transform: translateY(var(--reveal-rise, 12px)); }
  to   { opacity: 1; transform: none; }
}
@keyframes pxHero {
  from { opacity: 0; transform: translateY(var(--reveal-rise, 12px)) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .px.is-revealed .px__head { animation: pxRise var(--reveal-dur, 650ms) var(--ease) backwards; }
  .px.is-revealed .tier { animation: pxRise var(--reveal-dur, 650ms) var(--ease) backwards; animation-delay: calc(160ms + var(--i, 0) * 60ms); }
  .px.is-revealed .tier--lifetime { animation-name: pxHero; animation-duration: 750ms; }
  .px.is-revealed .px__journey,
  .px.is-revealed .tiers__trust { animation: pxRise var(--reveal-dur, 650ms) var(--ease) 420ms backwards; }
}

/* ============================================================
   NARROWER SCREENS
   ============================================================ */
@media (max-width: 1399px) {
  .tiers { gap: 16px; }
  .tier__body { grid-template-columns: minmax(0, 1fr); }
  .tier__plate { flex-direction: row; justify-self: start; width: auto; padding: 10px 14px; transform: rotate(0deg); }
  .tier__plate-wave { padding: 0 0 0 10px; border-top: 0; border-left: 1px solid rgba(240, 180, 41, 0.35); }
  .tier__plate-name { max-width: none; white-space: nowrap; }
  .px__journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-step:nth-child(3) { border-left: 0; }
  .px-step:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.05); }
}

/* STACKED: Free, Monthly, Lifetime, in ladder order (Lifetime last, its
   gold carrying the hierarchy). */
@media (max-width: 999px) {
  .tiers { grid-template-columns: minmax(0, 1fr); max-width: 560px; gap: 32px; }
  .px .tiers { padding-top: 0; }
  .px .tier--lifetime { margin-top: 10px; }
}

@media (max-width: 999px) {
  .px__title { white-space: normal; }
}

@media (max-width: 699px) {
  .px__journey { grid-template-columns: minmax(0, 1fr); }
  .px-step + .px-step { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.05); }
  .tiers__trust { flex-direction: column; align-items: center; gap: 10px; }
  .tier .tier__amount { font-size: clamp(42px, 12vw, 56px); }
  .tier--lifetime .tier__amount { font-size: clamp(48px, 14vw, 64px); }
  .tier__badge { padding: 6px 12px 5px; letter-spacing: 0.1em; }
}

@media (prefers-reduced-motion: reduce) {
  .tier { transition: none; }
  .tier:hover { transform: none; }
}