/* iamsambearfoot.com/halloween — the Halloween funnel.
 *
 * Loaded AFTER treasury.css, which carries the tokens, rooms, buttons, stats,
 * steps, FAQ and footer. This file is only what the funnel adds: the hero
 * collage, the lookbook and its switch, and the offer pages. Same brand rules —
 * gold carries words only inside a plum room.
 */

/* funnel.js toggles `hidden` on elements that also carry a display class
   (.btn, .offer). Without this the class wins and "hidden" shows anyway. */
[hidden] { display: none !important; }

.notice {
  margin: 0 0 2rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--gold);
  border-radius: 0.6rem;
  background: rgba(20, 8, 13, 0.6);
  color: var(--stone);
  font-size: 0.9375rem;
}

.small-print {
  margin-top: 1.5rem;
  max-width: 44rem;
  font-size: 0.875rem;
  color: var(--ink-mute);
}

/* ── Hero collage ────────────────────────────────────────────────────────────
   Five scenes: one tall on the left, four in a two-by-two beside it. Framed in
   gold, because a frame is a graphic and allowed anywhere. */

.coven {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.5vw, 0.75rem);
}

.coven li { min-width: 0; }
.coven li:first-child { grid-row: span 2; }

.coven img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 2px solid var(--gold);
  border-radius: 0.75rem;
  box-shadow: 0 1rem 2rem -1rem rgba(10, 4, 7, 0.8);
}

/* ── Stone steps ─────────────────────────────────────────────────────────────
   treasury.css styles .steps for a plum room. The Halloween page puts them on
   stone, where gold numerals would fail contrast — so the numerals go ink. */

.steps--stone li {
  background: rgba(255, 255, 255, 0.45);
  border-color: var(--ink-line);
}
.steps--stone li::before { color: var(--plum); }
.steps--stone h3 { color: var(--plum); }
.steps--stone p { color: var(--ink-mute); }

@media (min-width: 64rem) {
  .steps--stone { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── The lookbook ────────────────────────────────────────────────────────── */

.lookbook { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

/* The radios stay in the accessibility tree and the tab order; only the
   circle is hidden. The labels are what people see and click. */
.switch__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.switch {
  display: inline-flex;
  padding: 0.25rem;
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--gold-line);
  border-radius: 100px;
  background: rgba(20, 8, 13, 0.55);
}

.switch label {
  cursor: pointer;
  padding: 0.55rem 1.2rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-mute);
  transition: background-color 160ms ease, color 160ms ease;
}

#styling-f:checked ~ .switch label[for='styling-f'],
#styling-m:checked ~ .switch label[for='styling-m'] {
  background: var(--gold);
  color: var(--plum);
}

#styling-f:focus-visible ~ .switch label[for='styling-f'],
#styling-m:focus-visible ~ .switch label[for='styling-m'] {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.looks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.1rem);
}

@media (min-width: 40rem) { .looks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .looks { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.look {
  position: relative;
  min-width: 0;
}

.look img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--gold-line);
  border-radius: 0.6rem;
  background: var(--plum-raised);
}

.look__num {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  padding: 0.15rem 0.5rem;
  border-radius: 100px;
  background: rgba(20, 8, 13, 0.8);
  color: var(--gold);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.look__name {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--stone-label);
}

/* Feminine shows by default; the masculine switch swaps both the picture and,
   where the character was renamed, the name. */
.looks img.look__m,
.looks span.look__m { display: none; }

#styling-m:checked ~ .looks img.look__f,
#styling-m:checked ~ .looks span.look__f { display: none; }

#styling-m:checked ~ .looks img.look__m { display: block; }
#styling-m:checked ~ .looks span.look__m { display: inline; }

/* ── The offer pages ─────────────────────────────────────────────────────── */

.step { padding-top: clamp(1.75rem, 5vw, 3rem); border-top: 0; }

.step__inner { max-width: 46rem; }

.step h1 {
  font-size: clamp(1.875rem, 5vw, 2.875rem);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

.progress {
  list-style: none;
  counter-reset: stage;
  margin: 0 0 clamp(1.75rem, 5vw, 2.5rem);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-mute);
}

.progress li {
  counter-increment: stage;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.progress li::before {
  content: counter(stage);
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  letter-spacing: 0;
}

.progress .is-done::before {
  content: '\2713';
  background: var(--gold);
  border-color: var(--gold);
  color: var(--plum);
}

.progress .is-here { color: var(--stone); }
.progress .is-here::before { border-color: var(--gold); color: var(--gold); }

.offer {
  margin: clamp(1.75rem, 5vw, 2.25rem) 0 1.25rem;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--gold);
  border-radius: 1rem;
  background: rgba(20, 8, 13, 0.62);
}

.offer__was {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-label);
}

.offer__now { margin: 0 0 0.9rem; line-height: 1.2; }

.offer__now strong {
  font-family: var(--heading);
  font-weight: 600;
  font-size: clamp(1.625rem, 5vw, 2.25rem);
  letter-spacing: 0.02em;
  color: var(--gold);
}

.offer form { margin-top: 1.4rem; }

.offer .btn { width: 100%; }

@media (min-width: 40rem) {
  .offer .btn { width: auto; }
}

.offer__small {
  margin-top: 0.9rem;
  font-size: 0.8125rem;
  color: var(--stone-label);
}

/* The way out, deliberately quieter than the way in but never hidden: a
   one-click offer that makes "no" hard to find is the kind people remember
   for the wrong reasons. */
.room a.decline,
a.decline {
  display: inline-block;
  padding: 0.4rem 0;
  font-size: 0.9375rem;
  color: var(--stone-mute);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.room a.decline:hover { color: var(--stone); }

a.decline--stone { color: var(--ink-mute); }

.again {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.covers {
  list-style: none;
  margin: clamp(1.5rem, 4vw, 2rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.35rem, 1.2vw, 0.6rem);
}

.covers img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--gold-line);
  border-radius: 0.35rem;
}

/* ── Stats inside a plum room ────────────────────────────────────────────────
   treasury.css sets .stats for stone, where the numbers are plum ink. */
.stats--room {
  margin: clamp(1.75rem, 5vw, 2.25rem) 0 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stats--room strong { color: var(--gold); }
.stats--room span { color: var(--stone-label); }

@media (max-width: 30rem) {
  .stats--room { grid-template-columns: minmax(0, 1fr); }
}

/* ── A row of scenes ─────────────────────────────────────────────────────── */
.strip {
  list-style: none;
  margin: clamp(1.75rem, 5vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.35rem, 1.2vw, 0.6rem);
}

.strip img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--gold-line);
  border-radius: 0.5rem;
}

/* ── The collections, one job each ───────────────────────────────────────── */
.vault {
  list-style: none;
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: 1rem clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 48rem) {
  .vault { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.vault li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 0.9rem;
  background: var(--card);
  border: 1px solid var(--ink-line);
  border-radius: 0.8rem;
}

.vault img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--gold);
  border-radius: 0.35rem;
}

.vault h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.vault p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-mute); }

/* ── The upsell's long headline and big lead ─────────────────────────────────
   Sam's rule: the headline fits in four lines on desktop, and the display size
   comes down before any word is cut. */
.step h1.h1--long { font-size: clamp(1.75rem, 4.2vw, 2.5rem); line-height: 1.15; }

.step .lead--big {
  font-size: clamp(1.2rem, 2.2vw, 1.4rem);
  line-height: 1.5;
  color: var(--stone);
}

/* ── Testimonial screenshots on the upsell ───────────────────────────────────
   Real screenshots, never retyped (Sam's brief). Capped at 520px, gold border
   to match the offer box, the member's name in small caps underneath. */
/* A row of three above the offer box (Sam, 16 Sep). On a phone three across
   would shrink the screenshots past reading, so they stack instead, still
   kept small. */
.proofs {
  list-style: none;
  margin: clamp(1.5rem, 4vw, 2rem) 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

@media (min-width: 40rem) {
  .proofs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 1rem;
  }
}

.proof {
  margin: 0 auto;
  width: 100%;
  max-width: 17rem;
}

.proof img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--gold);
  border-radius: 0.75rem;
  box-shadow: 0 0.75rem 1.5rem -0.75rem rgba(10, 4, 7, 0.7);
}

.proof figcaption {
  margin-top: 0.5rem;
  font-variant: small-caps;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: var(--stone-label);
}

/* ── Offer box: availability line and the "Nothing to lose" block ────────── */
.avail {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--gold);
}

.reassure {
  position: relative;
  margin: 1.1rem 0 0;
  padding: 0.85rem 1rem 0.85rem 2.9rem;
  border: 1px solid var(--gold-line);
  border-radius: 0.6rem;
  background: rgba(189, 148, 57, 0.08);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--stone-mute);
}

.reassure strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--stone);
}

/* A small shield with a tick, drawn in CSS so the page loads nothing extra. */
.reassure::before {
  content: '\2713';
  position: absolute;
  left: 0.9rem;
  top: 0.95rem;
  width: 1.35rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: var(--plum);
  font-size: 0.75rem;
  font-weight: 700;
  clip-path: polygon(50% 0, 100% 15%, 100% 55%, 50% 100%, 0 55%, 0 15%);
}

/* ── What you get, on the upsell ─────────────────────────────────────────── */
.gets {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.gets li {
  position: relative;
  padding-left: 2rem;
  color: var(--stone);
  font-weight: 700;
}

.gets li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.3rem;
  height: 1.3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--plum);
  font-size: 0.75rem;
}

/* ── Testimonial slot (hidden until Sam supplies a quote) ────────────────── */
.quote {
  margin: 1.75rem 0 0;
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--gold);
  background: rgba(20, 8, 13, 0.45);
}
.quote blockquote {
  margin: 0;
  font-family: var(--heading);
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--stone);
}
.quote figcaption {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-label);
}

/* ── Sam's workflow banner on the upsell ─────────────────────────────────────
   Sits in the text column, edge to edge with the paragraphs (Sam, 16 Sep). */
.banner {
  margin: clamp(1.5rem, 4vw, 2.5rem) 0;
}

.banner img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--gold);
  border-radius: 0.75rem;
  box-shadow: 0 1rem 2rem -1rem rgba(10, 4, 7, 0.8);
}

/* ── The spider clip in the hero ─────────────────────────────────────────────
   Phones and tablets: the 4:5 portrait clip as a framed block under the headline.
   Desktop: the wide clip fills the whole hero behind them. It is 2.7:1 with
   Sam's face at the right and plain black at the left, so it is anchored right
   and a dark wash from the left keeps the type readable wherever the crop
   lands. The poster stills sit behind the video as backgrounds, so something
   shows before the first frame and for anyone with motion turned off. */
.hero__film {
  display: block;
  width: 100%;
  max-width: 28rem;
  aspect-ratio: 4 / 5;
  height: auto;
  margin: 0 auto clamp(1.5rem, 5vw, 2rem);
  object-fit: cover;
  background: #111 url('/assets/video/spider-portrait.jpg') center / cover no-repeat;
  border: 2px solid var(--gold);
  border-radius: 0.75rem;
  box-shadow: 0 1rem 2rem -1rem rgba(10, 4, 7, 0.8);
}

@media (min-width: 60rem) {
  .hero--film {
    display: flex;
    align-items: center;
    min-height: min(46rem, 88vh);
    padding-block: clamp(3rem, 6vw, 4.5rem);
    background-color: #0b0708;
  }
  .hero--film > .wrap { width: 100%; }

  .hero__film {
    position: absolute;
    inset: 0;
    z-index: -1;
    max-width: none;
    height: 100%;
    margin: 0;
    aspect-ratio: auto;
    object-position: right center;
    background: #0b0708 url('/assets/video/spider-wide.jpg') right center / cover no-repeat;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* Painted after the video (a later sibling at the same z-index), so it sits
     on top of the clip but under the words. */
  .hero--film::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg,
      rgba(11, 7, 8, 0.92) 0%,
      rgba(11, 7, 8, 0.75) 38%,
      rgba(11, 7, 8, 0) 62%);
  }

  .hero--film .hero__grid { grid-template-columns: minmax(0, 34rem); }
}

/* ── The spider clip on the ECHO offer ───────────────────────────────────────
   In the text column, framed like the banner below it. 4:5 portrait on phones
   (capped so it does not push the offer too far down). */
.step__film {
  display: block;
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 4 / 5;
  height: auto;
  margin: clamp(1.25rem, 4vw, 2rem) auto;
  object-fit: cover;
  background: #111 url('/assets/video/spider-portrait.jpg') center / cover no-repeat;
  border: 1px solid var(--gold);
  border-radius: 0.75rem;
  box-shadow: 0 1rem 2rem -1rem rgba(10, 4, 7, 0.8);
}

/* Desktop (Sam, 16 Sep: "it doesn't work there"): not a framed strip in the
   column but a backdrop across the top of the page, like the /halloween hero.
   Anchored right so her face sits beside the headline, darkened from the left
   under the words, and faded out at the bottom into the plum before the
   banner, so the rest of the page reads as it did. */
@media (min-width: 60rem) {
  .step--film { padding-top: clamp(3rem, 5vw, 4rem); }

  .step__film {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    max-width: none;
    height: 36rem;
    margin: 0;
    aspect-ratio: auto;
    object-position: right center;
    background: #0b0708 url('/assets/video/spider-wide.jpg') right center / cover no-repeat;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  }

  /* Over the clip, under the words: dark from the left, clear by her face. */
  .step--film::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 36rem;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg,
      rgba(11, 7, 8, 0.7) 0%,
      rgba(11, 7, 8, 0.55) 45%,
      rgba(11, 7, 8, 0) 70%);
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  }
}