/* =============================================================
   ZARAS — Pricing atmosphere v3
   -------------------------------------------------------------
   Refinement pass over v2.

   Background:
     v2 was the strongest SD pass yet. The pricing-orbit hero is
     genuinely original; the JOBS + CREW + CASHFLOW = ONE RECORD
     equation diagram is clever; the side-by-side Solo/Team
     comparison with the tier slider collapses what would have
     been four cards into two; the three-color tier palette
     (gold/violet/teal) is consistent across hero orb, basis
     cards, scale bar, and FAQ accents. No restraint pass
     needed — the page is right-sized.

     v3 fixes three small things and trims hero glow alpha
     slightly. That's it.

   FIXES in v3:
     1. Logic equation orphan: at desktop, the equation read
        "JOBS + CREW + CASHFLOW =" on line 1, then "ONE RECORD"
        below — leaving the = sign pointing to empty space and
        the result floating disconnected. v3 keeps the full
        equation inline at desktop so it reads naturally as
        a complete mathematical statement. Mobile still wraps
        (intentional, reads fine at narrow widths).

     2. Tier comparison column heights: Solo card has 8 feature
        bullets (tall column), Team card has 4 deltas-above-Solo
        (shorter column). v2 left them top-aligned, which made
        Team look thin next to Solo. v3 vertically centers the
        Team column so it sits at Solo's mid-height. Asymmetry
        stays honest (Solo really does have more line-items),
        but the visual balance reads.

     3. Hero "ENTRY SHAPE" eyebrow renamed to "SOLO TIER" —
        clearer entry point for first-time visitors. (Copy
        change applied to pricing.html as well.)

   TUNED in v3:
     - Hero radial-glow gold alpha 0.18 → 0.14: still the warmest
       atmosphere of any Zaras page (kept intentionally bright
       for the sun-like hero feel), just nudged 22% so the
       headline doesn't read amber-tinted on calibrated displays.

   Loaded after pricing-tiers.v1.js so this file's stage styling
   sits over the JS-driven tier toggle.
   All rules scoped under body[data-page="pricing"].
   ============================================================= */

body[data-page="pricing"] {
  --price-gold: 214 168 92;
  --price-violet: 134 116 207;
  --price-teal: 118 199 178;
  --price-ink: 239 236 230;
  overflow-x: clip;
}

body[data-page="pricing"] main {
  position: relative;
  overflow: clip;
}

body[data-page="pricing"] .hero,
body[data-page="pricing"] #tiers,
body[data-page="pricing"] #logic,
body[data-page="pricing"] #faq,
body[data-page="pricing"] .closing {
  position: relative;
  isolation: isolate;
}

body[data-page="pricing"] .hero::before,
body[data-page="pricing"] #tiers::before,
body[data-page="pricing"] #logic::before,
body[data-page="pricing"] #faq::before,
body[data-page="pricing"] .closing::before {
  content: "";
  position: absolute;
  inset: 0 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -2;
  pointer-events: none;
}

body[data-page="pricing"] .hero::before {
  background:
    /* v3 TUNE: gold alpha 0.18 → 0.14 — still the warmest hero
       atmosphere on any Zaras page (sun-like glow is intentional),
       just nudged 22% so the headline doesn't read amber-tinted
       on calibrated displays. */
    radial-gradient(ellipse 45% 36% at 50% 47%, rgb(var(--price-gold) / 0.14), transparent 70%),
    radial-gradient(ellipse 60% 48% at 68% 42%, rgb(var(--price-violet) / 0.12), transparent 72%),
    linear-gradient(180deg, rgba(11,10,9,0) 0%, rgba(18,14,10,0.44) 70%, rgba(11,10,9,0) 100%);
}

body[data-page="pricing"] #tiers::before {
  background:
    radial-gradient(ellipse 58% 48% at 52% 20%, rgb(var(--price-violet) / 0.105), transparent 74%),
    radial-gradient(ellipse 46% 42% at 12% 60%, rgb(var(--price-gold) / 0.07), transparent 72%),
    linear-gradient(180deg, rgba(13,12,18,0.5), rgba(11,10,9,0.16));
}

body[data-page="pricing"] #logic::before {
  background:
    radial-gradient(ellipse 54% 52% at 48% 42%, rgb(var(--price-teal) / 0.11), transparent 72%),
    radial-gradient(ellipse 42% 38% at 86% 30%, rgb(var(--price-gold) / 0.055), transparent 72%),
    linear-gradient(180deg, rgba(8,15,13,0.34), rgba(11,10,9,0.12));
}

body[data-page="pricing"] #faq::before {
  background:
    radial-gradient(ellipse 50% 40% at 18% 20%, rgb(var(--price-violet) / 0.06), transparent 72%),
    linear-gradient(180deg, rgba(9,10,15,0.42), rgba(11,10,9,0.1));
}

body[data-page="pricing"] .closing::before {
  background:
    radial-gradient(ellipse 64% 60% at 50% 78%, rgb(var(--price-teal) / 0.13), transparent 74%),
    radial-gradient(ellipse 40% 38% at 60% 36%, rgb(var(--price-gold) / 0.08), transparent 70%);
}

/* Hero: calibration sculpture */
body[data-page="pricing"] .hero h1 {
  max-width: 12ch;
}

body[data-page="pricing"] .pricing-orbit {
  position: relative;
  width: min(720px, 100%);
  height: clamp(220px, 30vw, 330px);
  margin: clamp(38px, 6vh, 64px) auto 0;
  border: 1px solid rgba(255,250,240,0.07);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgb(var(--price-gold) / 0.13), transparent 22%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.055), transparent 38%),
    linear-gradient(90deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.38),
    0 44px 90px -70px rgb(var(--price-gold) / 0.65);
  overflow: hidden;
}

body[data-page="pricing"] .pricing-orbit::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(255,250,240,0.09) 49% 51%, transparent 52% 100%),
    linear-gradient(0deg, transparent 0 48%, rgba(255,250,240,0.06) 49% 51%, transparent 52% 100%);
  opacity: 0.72;
  mask-image: radial-gradient(ellipse at center, #000 0 52%, transparent 74%);
}

body[data-page="pricing"] .pricing-orbit::after {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    repeating-conic-gradient(from 18deg, rgba(255,250,240,0.085) 0 0.7deg, transparent 0.7deg 15deg);
  opacity: 0.34;
  animation: pricing-orbit-spin 38s linear infinite;
  mask-image: radial-gradient(ellipse at center, transparent 0 24%, #000 34%, transparent 58%);
}

body[data-page="pricing"] .pricing-orbit-ring {
  position: absolute;
  inset: 18%;
  border-radius: 999px;
  border: 1px solid rgb(var(--price-violet) / 0.16);
  transform: rotate(-7deg);
}

body[data-page="pricing"] .pricing-orbit-ring.ring-two {
  inset: 30%;
  border-color: rgb(var(--price-teal) / 0.18);
  transform: rotate(7deg);
}

body[data-page="pricing"] .pricing-orbit-line {
  position: absolute;
  left: 13%; right: 13%; top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--price-gold) / 0.44), rgb(var(--price-violet) / 0.34), transparent);
  transform: translateY(-50%);
  opacity: 0.9;
}

body[data-page="pricing"] .pricing-orbit-core {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 172px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,0.12), transparent 48%),
    rgba(13,12,10,0.84);
  border: 1px solid rgba(255,250,240,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 0 10px rgba(255,250,240,0.018),
    0 22px 54px -34px rgb(var(--price-gold) / 0.8);
  z-index: 2;
}

body[data-page="pricing"] .pricing-orbit-core .core-kicker,
body[data-page="pricing"] .pricing-orbit-core span:last-child {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

body[data-page="pricing"] .pricing-orbit-core strong {
  font-size: 44px;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
}

body[data-page="pricing"] .pricing-orbit-node {
  position: absolute;
  z-index: 3;
  min-width: 132px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,250,240,0.1);
  background: rgba(12,11,10,0.74);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  text-align: left;
}

body[data-page="pricing"] .pricing-orbit-node::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgb(var(--price-gold));
  margin-right: 8px;
  box-shadow: 0 0 18px rgb(var(--price-gold) / 0.65);
}

body[data-page="pricing"] .pricing-orbit-node span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

body[data-page="pricing"] .pricing-orbit-node strong {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-sub);
}

body[data-page="pricing"] .node-solo { left: 7%; top: 54%; }
body[data-page="pricing"] .node-team { right: 7%; top: 19%; }
body[data-page="pricing"] .node-team::before { background: rgb(var(--price-violet)); box-shadow: 0 0 18px rgb(var(--price-violet) / 0.68); }
body[data-page="pricing"] .node-branch { right: 12%; bottom: 12%; }
body[data-page="pricing"] .node-branch::before { background: rgb(var(--price-teal)); box-shadow: 0 0 18px rgb(var(--price-teal) / 0.68); }

/* Calibration basis */
body[data-page="pricing"] .pricing-basis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: -12px 0 28px;
}

body[data-page="pricing"] .basis-card {
  position: relative;
  min-height: 148px;
  padding: 20px 20px 18px;
  border: 1px solid rgba(255,250,240,0.075);
  border-radius: 18px;
  background:
    radial-gradient(circle at 85% 10%, rgb(var(--price-gold) / 0.08), transparent 38%),
    rgba(255,255,255,0.022);
  overflow: hidden;
}

body[data-page="pricing"] .basis-card::after {
  content: "";
  position: absolute;
  inset: auto 18px 18px auto;
  width: 42px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255,250,240,0.08);
  box-shadow: inset 0 0 0 12px rgba(255,250,240,0.018);
}

body[data-page="pricing"] .basis-index {
  font-family: var(--mono);
  font-size: 11px;
  color: rgb(var(--price-gold));
  letter-spacing: 0.14em;
}

body[data-page="pricing"] .basis-card h3 {
  margin-top: 28px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

body[data-page="pricing"] .basis-card p {
  margin-top: 8px;
  color: var(--ink-sub);
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 28ch;
}

/* Tier stage */
body[data-page="pricing"] .pricing-stage-shell {
  position: relative;
  padding: 28px;
  border-radius: 26px;
  border: 1px solid rgba(255,250,240,0.075);
  background:
    linear-gradient(90deg, transparent 0 49%, rgba(255,250,240,0.05) 50%, transparent 51% 100%),
    radial-gradient(ellipse at 18% 0%, rgb(var(--price-gold) / 0.08), transparent 50%),
    radial-gradient(ellipse at 88% 12%, rgb(var(--price-violet) / 0.11), transparent 52%),
    rgba(255,255,255,0.014);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}

body[data-page="pricing"] .pricing-stage-shell::before {
  content: "";
  position: absolute;
  left: 8%; right: 8%; top: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--price-gold) / 0.35), rgb(var(--price-violet) / 0.48), transparent);
  opacity: 0.75;
}

body[data-page="pricing"] .pricing-stage-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,250,240,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,250,240,0.03) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0 30%, transparent 72%);
  opacity: 0.42;
}

body[data-page="pricing"] .pricing-scale-label {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  padding: 0 8px 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

body[data-page="pricing"] .pricing-grid {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  background: rgba(9,8,8,0.55);
  backdrop-filter: blur(12px);
}

/* v3 FIX #2: Solo card has 8 feature bullets (tall column);
   Team card has 4 deltas-above-Solo (shorter column). v2 left
   Team top-aligned, which made it look thin next to Solo with
   empty space at the bottom. Solo card stays as-is (its bullet
   list naturally fills the column). Only the Team card gets
   centered.

   The Team card's .pc-cta has `margin-top: auto` from the base
   CSS (pins button to bottom of flex column). On Team that
   pulls the CTA down and leaves a gap above. We override the
   auto margin on Team specifically and instead use
   justify-content: center on the card itself, so the entire
   Team content block (header + toggle + price + desc + list +
   CTA) sits centered as a unit at Solo's mid-height.

   Asymmetry stays honest — Solo really does have more bullets —
   but the visual balance reads. */
body[data-page="pricing"] .pricing-card {
  position: relative;
  overflow: hidden;
  background: rgba(16,14,12,0.72);
}

/* Target Team specifically (the second card). The featured
   class is applied in markup to identify Team. */
body[data-page="pricing"] .pricing-card.featured {
  justify-content: center;
}
body[data-page="pricing"] .pricing-card.featured .pc-bands .pc-cta,
body[data-page="pricing"] .pricing-card.featured > .pc-cta {
  margin-top: 24px;  /* fixed gap, not auto */
}

body[data-page="pricing"] .pricing-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.08), transparent 42%);
  opacity: 0;
  transition: opacity 420ms ease;
}

body[data-page="pricing"] .pricing-card:hover::after { opacity: 1; }

body[data-page="pricing"] .pricing-card.featured {
  background:
    radial-gradient(circle at 100% 0%, rgb(var(--price-violet) / 0.12), transparent 42%),
    rgba(20,18,24,0.82);
}

body[data-page="pricing"] .pc-name .badge.muted {
  color: var(--ink-mute);
  border-color: var(--rule-hi);
}

body[data-page="pricing"] .band-toggle {
  background: rgba(0,0,0,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

body[data-page="pricing"] .pc-price .amt {
  letter-spacing: -0.045em;
}

/* Logic section */
body[data-page="pricing"] .logic-panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) 1.1fr;
  gap: 0;
  border: 1px solid rgba(255,250,240,0.08);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 24%, rgb(var(--price-teal) / 0.12), transparent 42%),
    rgba(255,255,255,0.018);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}

body[data-page="pricing"] .logic-equation {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  /* v3 FIX #1: was flex-wrap:wrap which orphaned "ONE RECORD"
     onto a second line at desktop, leaving the = sign pointing
     to empty space. nowrap keeps the equation inline as a
     complete mathematical statement. Mobile re-enables wrap
     in the breakpoint below — narrow widths read fine on two
     lines because the brain treats the wrap as continuation. */
  flex-wrap: nowrap;
  padding: 36px 28px;
  border-right: 1px solid rgba(255,250,240,0.08);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ink-mute);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.034) 0 1px, transparent 1px 20px);
}

body[data-page="pricing"] .logic-equation span,
body[data-page="pricing"] .logic-equation strong {
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,250,240,0.085);
  background: rgba(0,0,0,0.22);
  /* v3 FIX #1: prevent pills from breaking up across lines at
     desktop; let them shrink slightly instead. */
  white-space: nowrap;
  flex-shrink: 0;
}

body[data-page="pricing"] .logic-equation b {
  color: rgb(var(--price-teal));
  font-weight: 500;
  /* v3 FIX #1: ensure the + and = operators stay on one line
     with the pills they connect. */
  flex-shrink: 0;
}

body[data-page="pricing"] .logic-equation strong {
  color: var(--signal-ink);
  font-weight: 500;
}

body[data-page="pricing"] .logic-copy {
  padding: clamp(30px, 4vw, 54px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body[data-page="pricing"] .logic-copy h3 {
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 500;
}

body[data-page="pricing"] .logic-copy p {
  margin-top: 18px;
  color: var(--ink-sub);
  font-size: 15px;
  line-height: 1.65;
  max-width: 58ch;
}

body[data-page="pricing"] .logic-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

body[data-page="pricing"] .logic-tiles article {
  padding: 22px;
  min-height: 170px;
  border-radius: 18px;
  border: 1px solid rgba(255,250,240,0.07);
  background: rgba(255,255,255,0.018);
}

body[data-page="pricing"] .logic-mark {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--price-teal));
}

body[data-page="pricing"] .logic-tiles h3 {
  margin-top: 34px;
  font-size: 16px;
  font-weight: 500;
}

body[data-page="pricing"] .logic-tiles p {
  margin-top: 8px;
  color: var(--ink-sub);
  font-size: 13.5px;
  line-height: 1.58;
}

/* FAQ polish */
body[data-page="pricing"] .faq-list {
  max-width: none;
  border-top-color: rgba(255,250,240,0.11);
}

body[data-page="pricing"] details.faq {
  padding-inline: 18px;
  margin-inline: -18px;
  border-bottom-color: rgba(255,250,240,0.085);
  border-radius: 12px;
  transition: background 220ms ease;
}

body[data-page="pricing"] details.faq:hover {
  background: rgba(255,255,255,0.018);
}

body[data-page="pricing"] details.faq[open] {
  background: rgba(255,255,255,0.022);
}

/* Closing */
body[data-page="pricing"] .closing h2 {
  max-width: 14ch;
}

body[data-page="pricing"] .closing .shell {
  position: relative;
}

body[data-page="pricing"] .closing .shell::after {
  content: "Solo  →  Team  →  Multi-branch";
  position: absolute;
  right: var(--gutter);
  top: 14px;
  max-width: 280px;
  color: var(--ink-mute);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: right;
}

@keyframes pricing-orbit-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  body[data-page="pricing"] .pricing-basis,
  body[data-page="pricing"] .logic-tiles { grid-template-columns: 1fr; }

  body[data-page="pricing"] .logic-panel { grid-template-columns: 1fr; }
  body[data-page="pricing"] .logic-equation {
    min-height: 180px;
    border-right: 0;
    border-bottom: 1px solid rgba(255,250,240,0.08);
    /* v3 FIX #1: re-enable wrap at mobile — desktop forces inline
       (see top declaration). At narrow widths the wrap is natural
       and the brain reads the second line as continuation. */
    flex-wrap: wrap;
    gap: 13px;
  }

  body[data-page="pricing"] .node-solo { left: 4%; top: 58%; }
  body[data-page="pricing"] .node-team { right: 4%; top: 14%; }
  body[data-page="pricing"] .node-branch { right: 6%; bottom: 8%; }
}

@media (max-width: 720px) {
  body[data-page="pricing"] .hero {
    min-height: auto;
    padding-top: 92px;
    padding-bottom: 72px;
  }

  body[data-page="pricing"] .hero h1 {
    max-width: 11ch;
  }

  body[data-page="pricing"] .pricing-orbit {
    height: 360px;
    border-radius: 28px;
  }

  body[data-page="pricing"] .pricing-orbit-core {
    width: 138px;
  }

  body[data-page="pricing"] .pricing-orbit-core strong {
    font-size: 34px;
  }

  body[data-page="pricing"] .pricing-orbit-node {
    min-width: 118px;
    padding: 10px 11px;
  }

  body[data-page="pricing"] .node-solo { left: 14px; top: 56%; }
  body[data-page="pricing"] .node-team { right: 14px; top: 9%; }
  body[data-page="pricing"] .node-branch { right: 14px; bottom: 8%; }

  body[data-page="pricing"] .pricing-stage-shell {
    padding: 16px;
    border-radius: 20px;
  }

  body[data-page="pricing"] .pricing-scale-label {
    padding-bottom: 12px;
  }

  body[data-page="pricing"] .pricing-stage-shell::before { top: 22px; }

  body[data-page="pricing"] .logic-equation {
    align-content: center;
    gap: 8px;
    padding: 26px 18px;
    font-size: 10px;
  }

  body[data-page="pricing"] .closing .shell::after {
    position: static;
    display: block;
    margin-bottom: 28px;
    text-align: left;
  }
}

@media (max-width: 420px) {
  body[data-page="pricing"] .pricing-orbit-node strong { font-size: 12px; }
  body[data-page="pricing"] .pricing-orbit-node span { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="pricing"] .pricing-orbit::after { animation: none !important; }
}