/* /experience-pass only.
   The paid-traffic landing page. Everything else on it comes from base.css,
   therapy.css and pricing.css. */

/* ---------------------------------------------------------------- hook -- */

/* The price-comparison sentence in the "What it costs" block.
   That one line is the whole reason the page exists: $160 sits above every
   advertised comparable in the category, so the comparison has to carry it.
   In .lead it rendered at 19px against 17px body copy, a 2px difference that
   read as another paragraph.

   Sentence case deliberately: .h-sec and .h-sub are uppercase, and uppercase
   at this size on a sentence carrying two prices is shouty, which base.css
   already warns about for card headings. */
.ppass__hook {
  font-family: var(--rw-font-sans);
  font-size: var(--rw-fs-xl);
  font-weight: var(--rw-w-bold);
  line-height: var(--rw-lh-snug);
  letter-spacing: -0.015em;
  max-width: 24ch;
  margin-top: var(--rw-s-4);
}

/* ------------------------------------------------------------- gallery -- */

/* Five therapies, five slides, crossfading on a timer.
   The section beside it lists all five in words, and a single still of one
   room undersold that: someone paying $160 for access to everything should see
   everything. One photograph per therapy, in the house arch.

   CSS only, no JavaScript. site.js already owns the reveal and the outbound
   click tracking on this page and there is no reason to give it a third job,
   and a timer that Chrome drives in the compositor keeps working in headless
   captures where a rAF loop may not.

   Aspect ratio is 3/4 and must stay 3/4. A square in the arch mask reads as a
   dome, not an arch. Same radius as .arch in therapy.css: it is repeated here
   rather than reusing .arch because .arch sizes itself to its image and this
   sizes its images to itself. */
.pgal {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 50vw 50vw 8px 8px / 50% 50% 8px 8px;
  background: var(--rw-slate-deep);
}

.pgal__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  animation: pgal-fade 20s linear infinite;
}

.pgal__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 20s cycle, five slides, so each owns 4s = 20% of the timeline. Each slide
   holds from 2% to 20% and fades out over 20% to 22%, while the next one is
   fading in over its own 0% to 2%. That two-percent overlap is what stops a
   blank frame between slides: without it slide N reaches zero before slide
   N+1 has started, and the background flashes through. */
@keyframes pgal-fade {
  0%   { opacity: 0; }
  2%   { opacity: 1; }
  20%  { opacity: 1; }
  22%  { opacity: 0; }
  100% { opacity: 0; }
}

.pgal__slide:nth-child(1) { animation-delay:  0s; }
.pgal__slide:nth-child(2) { animation-delay:  4s; }
.pgal__slide:nth-child(3) { animation-delay:  8s; }
.pgal__slide:nth-child(4) { animation-delay: 12s; }
.pgal__slide:nth-child(5) { animation-delay: 16s; }

/* An animation that cannot be paused, on a page someone reads, has to answer
   this. Reduced motion gets the first slide and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .pgal__slide { animation: none; opacity: 0; }
  .pgal__slide:first-child { opacity: 1; }
}

/* ------------------------------------------------------ closing section -- */

/* The offer line was a .lead paragraph, which put the last thing anybody
   reads before the buttons at body weight. It is the heading of its own
   section now.

   .tcta and .tcta__inner live in therapy.css and are shared by all seven
   therapy pages, so neither is touched here. This is the one page where that
   block closes a paid landing page rather than a therapy page, and it is the
   only one that carries a price. */
/* .tcta__inner is a wrapping flex row. A block-level h2 with no basis claims
   the whole row and pushes the buttons onto their own line, which the .lead
   paragraph it replaced did not do. An explicit basis puts them back beside
   each other and still lets them stack on a narrow screen. */
.tcta__inner { align-items: center; }

/* Nothing sets flex on .tcta .btn-row on purpose. It needs the default
   0 1 auto so it can shrink below max-content and let its own flex-wrap put
   the phone button on a second line at 375. Pinning it to 0 0 auto holds both
   buttons on one line and runs the phone number off the right edge. */

.tcta__head {
  margin: 0;
  flex: 1 1 30rem;
  /* .h-sec carries text-wrap: balance, and balance picks the line count, not
     this max-width. At 1280 it settles on three even lines in about 550px
     against 524px of buttons. Do not chase two lines by widening this: the
     line needs about 608px to break in two, which leaves a 40px gutter
     between the heading and the buttons and reads as a collision. The cap is
     here so the line does not stretch out on a very wide monitor. */
  max-width: 42rem;
}