/* pricing-act.css — "The Plan Act" principal act (pricing page only).
 * Pinned scroll cinema: photographic backdrop, JS-first (hidden until live),
 * transform/opacity animation only. All classes namespaced .pact-*. */
#pricing-act { position: relative; background: #0c0e12; color: #fff; overflow: clip; }
.pact-bg { position: absolute; inset: 0; z-index: 0; }
.pact-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pact-bg-scrim { position: absolute; inset: 0; background: rgba(8, 10, 14, 0.78); }
.pact-pin { position: relative; z-index: 1; height: 100vh; height: 100svh; overflow: hidden; }
.pact-inner { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 76px clamp(16px, 4vw, 64px) clamp(12px, 3vh, 36px); visibility: hidden; }
#pricing-act.pact-live .pact-inner { visibility: visible; }
#pricing-act.pact-dead { display: none; }

/* Exempt from the site-wide CSS entrance system — every entrance here is
   authored by the scrubbed GSAP timeline. */
#pricing-act h2, #pricing-act h3, #pricing-act p { opacity: 1; }
#pricing-act h2.in, #pricing-act h3.in, #pricing-act p.in,
#pricing-act h2.done, #pricing-act h3.done, #pricing-act p.done { animation: none; opacity: 1; }

.pact-head { position: relative; z-index: 5; max-width: 1200px; margin: 0 auto 1.2vh; width: 100%; }
.pact-chapters { position: relative; min-height: clamp(170px, 28vh, 240px); }
/* fixed-box fix (same as canvas-act/byos-act): tallest chapter content
   + entrance dip must stay above the progress bar at any parked offset. */
.pact-ch { position: absolute; inset: 0; opacity: 0; visibility: hidden; max-width: 660px; }
.pact-ch.is-on { opacity: 1; visibility: visible; }
.pact-kicker { font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: #ffd98a; margin: 0 0 10px; font-weight: 700; }
.pact-ctitle { font-size: clamp(30px, 4.6vw, 58px); line-height: 1.04; margin: 0 0 12px; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.pact-ctitle .pact-cw { display: inline-block; }
.pact-cdesc { font-size: clamp(14px, 1.5vw, 18px); line-height: 1.55; color: rgba(255, 255, 255, 0.82); margin: 0; max-width: 48ch; }
.pact-progress { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.pact-pbar { position: relative; width: min(320px, 40vw); height: 3px; background: rgba(255, 255, 255, 0.18); border-radius: 3px; overflow: hidden; }
.pact-pbar i { position: absolute; inset: 0; width: 100%; background: #ffd98a; border-radius: 3px; transform: scaleX(0); transform-origin: 0 50%; }
.pact-dots { display: flex; gap: 7px; }
.pact-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); }
.pact-dots i.is-on { background: #ffd98a; }

.pact-stage { position: relative; z-index: 4; display: flex; align-items: stretch; justify-content: center; gap: clamp(16px, 3vw, 56px); width: 100%; max-width: 1240px; margin: 0 auto; flex: 1; min-height: 0; }
/* The deck: cards wait here in a stacked pile; each beat Flip-assembles one
   into the row. Same footprint as .pact-cards so Flip geometry is exact. */
.pact-deck { position: absolute; left: 0; top: 0; width: 100%; max-width: 720px; display: flex; justify-content: center; pointer-events: none; z-index: 6; }
.pact-deck .pact-card { flex: 0 0 200px; opacity: 1; transform: none; margin-left: -150px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.pact-deck .pact-card:first-child { margin-left: 0; }
.pact-deck .pact-card:nth-child(2) { transform: rotate(-4deg) translateY(6px); }
.pact-deck .pact-card:nth-child(3) { transform: rotate(4deg) translateY(12px); }
/* Cards waiting in the deck pile are stacked with heavy overlap; parked
   mid-beats that would leave them covering each other's plan info. Show
   clean shells until Flip assembles a card into the row (the flying card
   is already out of the deck, so its content stays visible mid-flight). */
.pact-deck .pact-card > * { opacity: 0; }
.pact-cards { position: relative; display: flex; gap: clamp(10px, 1.6vw, 22px); align-items: stretch; flex: 1 1 auto; max-width: 720px; }
.pact-card { position: relative; flex: 1 1 0; border-radius: 16px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(8px); padding: 18px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pact-card.pact-hot { border-color: #ffd98a; background: rgba(255, 217, 138, 0.10); }
.pact-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: #ffd98a; color: #14161a; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.pact-plan { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.66); font-weight: 700; }
.pact-amount { font-size: clamp(34px, 4vw, 52px); font-weight: 800; color: #fff; line-height: 1; }
.pact-per { font-size: 12.5px; color: rgba(255, 255, 255, 0.62); min-height: 2.4em; }
.pact-card ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.pact-card li { font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.8); padding-left: 18px; position: relative; }
.pact-card li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: #ffd98a; }

.pact-meter { flex: 0 0 auto; width: min(300px, 34vw); display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.pact-meter-k { font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); font-weight: 700; margin: 10px 0 2px; }
.pact-price { font-size: clamp(44px, 6vw, 84px); font-weight: 800; color: #ffd98a; line-height: 1; letter-spacing: -0.02em; }
/* The rolling-number span's inline box follows the display font's ascent/
   descent (~1.25em), overflowing upward over the meter kicker; with the BW
   sheet's forced black element background that overlap painted the kicker's
   top half black (hard horizontal slice). inline-block boxes it at the line
   box so the background cannot reach the kicker. */
.pact-price span { display: inline-block; }
.pact-rule { width: 220px; max-width: 100%; height: 12px; }
.pact-bars { display: flex; align-items: flex-end; gap: 14px; margin-top: 6px; min-height: 110px; }
.pact-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pact-bar-v { font-size: 12px; font-weight: 800; color: #fff; }
.pact-bar i { display: block; width: 100%; max-width: 56px; height: 110px; border-radius: 6px; background: #fff; /* BW palette: solid white fill (main ruling 2026-10-29); carved out of bw-borderless universal-black so it stays visible */ transform-origin: 50% 100%; }
/* Authored defect repair: the fills were height:0, so the scaleY reveal
   tweened an invisible element and the bars never painted. Graduated real
   heights (the figures themselves are the text labels above each bar). */
.pact-bar i[data-pact-bar="free"] { height: 22px; }
.pact-bar i[data-pact-bar="pro"] { height: 55px; }
.pact-bar-l { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); font-weight: 700; }
.pact-toggle { display: flex; gap: 8px; margin-top: 12px; opacity: 0; }
.pact-toggle button { flex: 1; padding: 10px 0; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }
.pact-toggle button.on { background: #ffd98a; border-color: #ffd98a; color: #14161a; }
.pact-byos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; opacity: 0; }
.pact-byos-k { flex-basis: 100%; font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); font-weight: 700; }
.pact-chip { font-size: 12px; font-weight: 700; padding: 7px 13px; border-radius: 999px; background: rgba(143, 214, 255, 0.12); border: 1px solid rgba(143, 214, 255, 0.4); color: #d8efff; }

.pact-cta { position: relative; z-index: 5; display: flex; gap: 12px; justify-content: center; margin-top: 2vh; opacity: 0; }
.pact-btn { appearance: none; border: 0; cursor: pointer; padding: 13px 30px; border-radius: 999px; background: #ffd98a; color: #14161a; font-weight: 800; font-size: 15px; text-decoration: none; display: inline-block; }
.pact-ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); }

@media (max-width: 900px) {
  .pact-stage { flex-direction: column; }
  .pact-cards { max-width: none; }
  .pact-meter { width: 100%; }
  .pact-card li { display: none; }
  .pact-card li:first-child { display: list-item; }
  /* The pinned stage is a fixed 100vh box with overflow clipped; on phone the
     decorative meter (big price + rule + kickers) overflows it and hard-clips
     the card headings/amounts above. The meter is aria-hidden and every
     figure it shows is stated on the cards/plan grid, so phone drops the
     decorative parts and keeps the functional toggle + storage bars. */
  .pact-meter .pact-price, .pact-meter .pact-rule, .pact-meter .pact-meter-k { display: none; }
  /* The stage centers its content; when the content is taller than its share
     of the 100vh pin it overflows BOTH ways and the card names slide under
     the header band. Keep phone content within budget: shorter storage bars
     (figures + labels stay), tighter chapter band. */
  /* The fixed chat launcher (bottom-right, ~56px + margin) overlays the 4th
     BYOS chip at phone width. Reserve its lane so chips wrap clear of it;
     launcher untouched, no other control moves. */
  .pact-byos { padding-right: 72px; }
  .pact-bars { min-height: 64px; }
  .pact-bar i { height: 60px; }
  .pact-bar i[data-pact-bar="free"] { height: 12px; }
  .pact-bar i[data-pact-bar="pro"] { height: 30px; }
  .pact-chapters { min-height: clamp(150px, 22vh, 200px); }
}
/* Short phones: drop the storage bars entirely - the 5/100/500 figures are
   stated in the BYOS section and the plan grid features below. The billing
   toggle (functional) always stays. */
@media (max-width: 900px) and (max-height: 700px) {
  #pricing-act .pact-bars { display: none; }
  #pricing-act .pact-ctitle { font-size: 26px; }
}

/* Short desktop viewports: the pinned stage is a fixed 100vh box and the
   meter column (~380px of vw-sized content) can exceed its flex share, so
   content overflows upward into the header band and the big price/kicker get
   sliced at the band boundary. Compact the decorative meter + chapter band
   below 840px viewport height so everything stays inside its own box.
   Choreography unchanged; no copy or data changes. */
/* 2026-10-29: cutoff raised 840 -> 1000px. Between ~841-980px the full-size
   content nearly fills the 100vh pin, so justify-center parks the chapter
   kicker under the fixed header band (sliced/hidden). Compact everywhere the
   content can touch the band. */
@media (min-width: 901px) and (max-height: 1000px) {
  /* 76px (base/reduced value), not 44: with content nearly filling the pin,
     centering parked the chapter kicker at the padding line, under the fixed
     header band. 76px keeps the kicker below the band at every compact height. */
  .pact-inner { padding-top: 76px; }
  .pact-chapters { min-height: clamp(150px, 22vh, 200px); }
  .pact-ctitle { font-size: clamp(24px, 3.4vw, 40px); }
  .pact-cdesc { font-size: clamp(13px, 1.2vw, 15px); }
  .pact-price { font-size: clamp(38px, 4.2vw, 56px); }
  .pact-bars { min-height: 70px; }
  .pact-meter { gap: 2px; }
  .pact-meter-k { margin: 4px 0 1px; }
}

/* prefers-reduced-motion: static readable layout - no pin, no scrub,
   every chapter + the plan cards visible in normal flow, no hidden
   intermediate steps. The aria-hidden meter (big-price prop + storage
   bars) stays hidden statically: its authored "$0" is a beat-0 prop, not
   plan data, and the storage figures are stated in the plan grid below.
   Every plan keeps its own authored price on its card. */
@media (prefers-reduced-motion: reduce) {
  #pricing-act .pact-pin { height: auto; overflow: visible; }
  #pricing-act .pact-inner { position: static; padding: 76px clamp(16px, 4vw, 64px) clamp(24px, 4vh, 48px); }
  #pricing-act .pact-chapters { min-height: 0; }
  #pricing-act .pact-ch { position: static; opacity: 1; visibility: visible; max-width: none; margin-bottom: 2rem; }
  #pricing-act .pact-progress { display: none; }
  #pricing-act .pact-meter { display: none; }
  #pricing-act .pact-toggle, #pricing-act .pact-byos, #pricing-act .pact-cta { opacity: 1; }
  #pricing-act .pact-stage { flex: none; }
}