/* =============================================================
   ZARAS — Pricing atmosphere v5
   -------------------------------------------------------------
   v5 (2026-06-22): pricing-hero pass — above-the-fold composition.
   - Orbit yields to viewport HEIGHT (svh), not width. Desktop: full
     orbit >=740px tall, $49 medallion below. Mobile: svh-sized orbit
     (slice-safe + address-bar-stable) with a container query showing
     the tier nodes above the ~200px collision floor, medallion below.
     (Replaces v4's width-based size + the max-height:720 zoom block.)
   - Trim-and-shift padding/gaps so headline -> prices -> orbit -> CTA
     land on first paint; gold-haloed legible ladder + foot; gold
     .btn-hero CTA below the orbit.

   v4 (2026-05-20): zoom-resilience pass (superseded by v5).

   v3 history (preserved):
   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. Desktop H1 is a forced 2-line break
   ("Pricing that calibrates" / "to your operation.") via <br class="h1-break">
   in the markup. Old 12ch wrapped line 1 and defeated the explicit break;
   line 1 measures 14.7ch at the 92px cap, so 20ch clears it with headroom
   while still capping block width. text-wrap is reset off the base rule's
   `balance` so it can't re-balance around the forced break into 3 lines.
   Font is height-aware: min(7.5vw, 11svh) lets 11svh win on short LANDSCAPE
   viewports (the cut regime); the 92px cap binds at H>=836 (11svh=92) so the
   full headline is preserved on normal desktops, and it shrinks only below.
   On portrait (W/H < 1.467) 7.5vw always wins the min(), so mobile is the
   unchanged 48px width-driven floor. */
body[data-page="pricing"] .hero h1 {
  max-width: 20ch;
  text-wrap: wrap;
  font-size: clamp(48px, min(7.5vw, 11svh), 92px);
}

body[data-page="pricing"] .pricing-orbit {
  position: relative;
  width: min(720px, 100%);
  height: clamp(180px, min(30vw, 28svh), 330px);
  margin: clamp(16px, 2.5svh, 40px) 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;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1),
              border-color 220ms ease,
              box-shadow 220ms ease;
}

body[data-page="pricing"] .pricing-orbit-node:hover,
body[data-page="pricing"] .pricing-orbit-node:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255,250,240,0.2);
}

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); }

body[data-page="pricing"] .node-solo:hover::before,
body[data-page="pricing"] .node-solo:focus-visible::before {
  box-shadow: 0 0 24px rgb(var(--price-gold) / 0.95);
}
body[data-page="pricing"] .node-team:hover::before,
body[data-page="pricing"] .node-team:focus-visible::before {
  box-shadow: 0 0 24px rgb(var(--price-violet) / 0.95);
}
body[data-page="pricing"] .node-branch:hover::before,
body[data-page="pricing"] .node-branch:focus-visible::before {
  box-shadow: 0 0 24px rgb(var(--price-teal) / 0.95);
}

/* Pause the conic-gradient spin when the orbit isn't on screen
   (toggled by IntersectionObserver in pricing-tiers.v1.js) and
   permanently on mobile viewports (matchMedia gate, same JS). */
body[data-page="pricing"] .pricing-orbit.is-paused::after {
  animation-play-state: paused;
}

/* 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"] .pc-ladder {
  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;
}

/* §02 — Workflow-head compression (scoped to #logic only).
   The shared .workflow-head H2 is sized for sections that anchor
   their whole block (tier cards in #tiers, FAQ in #faq). For
   #logic the H2 is introducing a panel + matrix BELOW it, and at
   default sizing the head consumes most of a desktop viewport
   before the rest of the section appears. Compressed sizing
   pulls the panel + matrix headers into view at scroll-to-section. */
body[data-page="pricing"] #logic .workflow-head {
  margin-bottom: 32px;
}
body[data-page="pricing"] #logic .workflow-head h2 {
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.05;
  /* Force the three statements onto three lines so the parallel
     rhythm reads. At 42px in the default 64ch workflow-head it
     wrapped to two lines; ~22ch puts each statement on its own. */
  max-width: 22ch;
}
body[data-page="pricing"] #logic .workflow-head .workflow-intro {
  margin-top: 4px;
  font-size: clamp(13px, 1vw, 15px);
}

/* §02 — Logic panel (restored). Equation pills on the left,
   "No feature maze" copy on the right. Sits above the matrix
   as the section's primary visual beat; the matrix is the
   reference object below it. */
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);
  margin-bottom: 18px;
}

body[data-page="pricing"] .logic-equation {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  /* nowrap keeps the equation inline as a complete mathematical
     statement at desktop. Mobile re-enables wrap (see ≤900px). */
  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);
  /* Prevent pills from breaking up across lines at desktop. */
  white-space: nowrap;
  flex-shrink: 0;
}

body[data-page="pricing"] .logic-equation b {
  color: rgb(var(--price-teal));
  font-weight: 500;
  /* Keep + and = operators on one line with the pills they join. */
  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;
}

/* §02 — Included matrix. Three equal columns, dark-glass shell
   matching the .logic-panel aesthetic above. 5/5/5 compressed
   bullets — reference object, not feature dump. Middle column
   ("Scales with Team") carries a violet wash so the upgrade path
   reads as the center of gravity in the flat → weighted → flat
   rhythm. */
body[data-page="pricing"] .included-matrix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid rgba(255,250,240,0.08);
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255,255,255,0.018);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}

body[data-page="pricing"] .im-col {
  padding: 28px 26px 30px;
  border-right: 1px solid rgba(255,250,240,0.06);
  display: flex;
  flex-direction: column;
}

body[data-page="pricing"] .im-col:last-child { border-right: 0; }

/* Outer columns: flat, no wash — just the section atmosphere
   showing through. Middle column: subtle violet wash so the
   upgrade path reads as the section's center of gravity.
   Subtler than .pricing-card.featured because the matrix is
   information-dense; visual weight here is for rhythm, not
   product positioning. */
body[data-page="pricing"] .im-col--scales {
  background:
    radial-gradient(circle at 50% 0%, rgb(var(--price-violet) / 0.10), transparent 60%),
    rgb(var(--price-violet) / 0.05);
  box-shadow: inset 0 1px 0 rgb(var(--price-violet) / 0.20);
}

body[data-page="pricing"] .im-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255,250,240,0.07);
}

body[data-page="pricing"] .im-mark {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
body[data-page="pricing"] .im-col--included .im-mark { color: rgb(var(--price-gold)); }
body[data-page="pricing"] .im-col--scales   .im-mark { color: rgb(var(--price-violet)); }
body[data-page="pricing"] .im-col--scoped   .im-mark { color: rgb(var(--price-teal)); }

body[data-page="pricing"] .im-tier {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-sub);
}

body[data-page="pricing"] .im-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-sub);
}

body[data-page="pricing"] .im-list li {
  display: flex;
  gap: 10px;
  padding-left: 2px;
  line-height: 1.45;
}

body[data-page="pricing"] .im-list li::before {
  content: '';
  width: 6px; height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
body[data-page="pricing"] .im-col--included .im-list li::before { background: rgb(var(--price-gold) / 0.85); }
body[data-page="pricing"] .im-col--scales   .im-list li::before { background: rgb(var(--price-violet) / 0.85); }
body[data-page="pricing"] .im-col--scoped   .im-list li::before { background: rgb(var(--price-teal) / 0.85); }

/* Closing line below the matrix — answers "is this all the
   features I'll get?" without re-opening the feature dump. */
body[data-page="pricing"] .im-footnote {
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  text-align: center;
}

/* 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 — 28ch fits the two-statement close ("You've seen the
   shape. Pick the one that matches.") on two lines, one statement
   per line, without collapsing to one long line at desktop. */
body[data-page="pricing"] .closing h2 {
  max-width: 28ch;
}

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

/* Strip anchored bottom-right of the shell — sits to the right
   of (and slightly below) the CTA row's vertical center, well
   clear of the now-wider H2 block. The closing section has
   100px bottom padding so the strip has room without crowding
   the footer below. */
body[data-page="pricing"] .closing .shell::after {
  content: "Solo · Team · Multi-branch";
  position: absolute;
  right: var(--gutter);
  bottom: 6px;
  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 { grid-template-columns: 1fr; }

  /* Logic panel stacks: equation on top, copy below. Re-enable
     wrap on the equation — at narrow widths the second line reads
     as natural continuation. */
  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);
    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: 820px) {
  /* Matrix stacks to single column: column rules become bottom
     borders, last column drops its bottom border. */
  body[data-page="pricing"] .included-matrix { grid-template-columns: 1fr; }
  body[data-page="pricing"] .im-col {
    border-right: 0;
    border-bottom: 1px solid rgba(255,250,240,0.06);
  }
  body[data-page="pricing"] .im-col:last-child { border-bottom: 0; }
}

@media (max-width: 720px) {
  body[data-page="pricing"] .hero {
    min-height: auto;
    /* trim-and-shift (mobile): was 92px of dead space below the nav. Cut so
       the full composition clears the fold on tall phones (~932). svh-based
       so it tightens on shorter devices and tracks mobile browser chrome. */
    padding-top: clamp(20px, 3svh, 32px);
    padding-bottom: 72px;
  }

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

  /* Mobile keeps its natural 3-line wrap (it fits) — hide the desktop
     forced break; the space before it collapses to a single word gap. */
  body[data-page="pricing"] .hero h1 br.h1-break {
    display: none;
  }

  /* Height-responsive, slice-safe via svh. The orbit is sized off the STABLE
     small (bar-shown) viewport: calc(100svh - 575px) tracks ~20px under its
     height budget (488px of content above + ~67px gap+CTA below), so the orbit
     AND the CTA below it always fit the worst case and NEVER slice as the
     address bar shows/hides during scroll. It grows on taller phones —
     revealing the tier nodes once it clears the ~190px node-collision floor
     (see the @container rule below) — and floors to the medallion size on
     short ones. Transparent container (visible ring = the ring-one child +
     the core) so the @container medallion can hide them: a container query
     can only style descendants, never the container element itself. */
  body[data-page="pricing"] .pricing-orbit {
    height: clamp(136px, calc(100svh - 575px), 240px);
    container-type: size;
    container-name: orbit;
    border: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }
  /* drop the orbit's own decorations + the battery-burning spin + inner ring */
  body[data-page="pricing"] .pricing-orbit::before,
  body[data-page="pricing"] .pricing-orbit::after { display: none; }
  body[data-page="pricing"] .pricing-orbit .ring-two { display: none; }

  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"] .im-col {
    padding: 22px 20px 24px;
  }

  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;
  }
}

/* ---------- $49 medallion: the orbit's compact FLOOR state ----------
   Collapse the orbit to a compact $49 emblem: the core disc stays
   (SOLO TIER / $49 / SOLO / MO) with a thin gold ring + its gold glow; the
   outer ring, decorations, and the three tier-node cards hide. Keeps the
   bloom -> $49 -> CTA gold throughline and frees headline + prices + CTA to the
   first screen. Two independent triggers, because the two paths differ:

   DESKTOP (>=721px wide), media query below 740px tall — just under Part A's
   full-layout floor. No dynamic chrome on desktop, so viewport height is
   stable; the full orbit (svh-sized, ~208px) fits with margin right at the
   boundary, so the swap is full<->medallion with no sliced band. */
@media (min-width: 721px) and (max-height: 740px) {
  body[data-page="pricing"] .pricing-orbit {
    width: 136px;
    height: 136px;
    border: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
  }
  body[data-page="pricing"] .pricing-orbit-ring,
  body[data-page="pricing"] .pricing-orbit-line,
  body[data-page="pricing"] .pricing-orbit-node,
  body[data-page="pricing"] .pricing-orbit::before,
  body[data-page="pricing"] .pricing-orbit::after {
    display: none;
  }
  /* core becomes the emblem: thin gold ring + gold glow echoing its own */
  body[data-page="pricing"] .pricing-orbit-core {
    width: 136px;
    border-color: rgb(var(--price-gold) / 0.4);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 16px 40px -26px rgb(var(--price-gold) / 0.85);
  }
  body[data-page="pricing"] .pricing-orbit-core strong {
    font-size: 38px;
  }
}

/* MOBILE: the floor of the svh-responsive orbit. A CONTAINER QUERY on the
   orbit's OWN height — which is svh-clamped and therefore address-bar-STABLE
   (svh is the stable smallest viewport) — so node visibility exactly tracks
   whether the three nodes actually fit, and NEVER flickers as the bar moves.
   Below the ~190px collision floor the nodes can't fit, so collapse to the
   emblem. The mobile orbit is already transparent + svh-floored to ~136px
   here, so this only hides the ring/line/node children and gold-rings the
   core (a container query can only style descendants, never the container). */
@container orbit (max-height: 199px) {
  body[data-page="pricing"] .pricing-orbit-ring,
  body[data-page="pricing"] .pricing-orbit-line,
  body[data-page="pricing"] .pricing-orbit-node {
    display: none;
  }
  body[data-page="pricing"] .pricing-orbit-core {
    border-color: rgb(var(--price-gold) / 0.4);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 16px 40px -26px rgb(var(--price-gold) / 0.85);
  }
}

@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; }
}