/**
 * /activations-only styling. Loaded after the shared /styles.css, every
 * rule here is scoped to body[data-landing-page="photobooth"] (unique to
 * this page — /engage uses data-landing-page="dmaEngage") so nothing
 * here can affect /engage, /try-engage, or / . No shared file
 * (styles.css, app.js) is edited for this redesign.
 */

/* ------------------------------------------------------------------ */
/* Package carousel                                                     */
/* ------------------------------------------------------------------ */

body[data-landing-page="photobooth"] .pkg-carousel {
  position: relative;
  background: #0a0a0a;
}

body[data-landing-page="photobooth"] .pkg-carousel-viewport {
  position: relative; /* positioning context for .carousel-overlay below */
  width: 100%;
  overflow: hidden;
}

/* Headline that used to live in its own standalone hero section above
   the carousel — now a persistent overlay on the carousel itself: a
   sibling of (and rendered on top of, via z-index) the sliding track,
   not inside any individual card, so it stays fixed in place while
   cards slide underneath it. Also means the H1 is in the DOM and
   visible on load regardless of which card is active, good for SEO. */
body[data-landing-page="photobooth"] .carousel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  padding: 40px 48px;
  pointer-events: none; /* let clicks reach the card/button underneath */
}

body[data-landing-page="photobooth"] .overlay-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #7b4ff5;
  margin-bottom: 10px;
}

body[data-landing-page="photobooth"] .overlay-h1 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  color: #ffffff;
  max-width: 600px;
  margin: 0;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.8);
}

body[data-landing-page="photobooth"] .overlay-sub {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 480px;
  margin: 10px 0 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

@media (max-width: 767px) {
  body[data-landing-page="photobooth"] .carousel-overlay {
    padding: 24px 20px;
  }

  body[data-landing-page="photobooth"] .overlay-h1 {
    font-size: 22px;
    max-width: calc(100% - 40px);
  }
}

body[data-landing-page="photobooth"] .pkg-carousel-track {
  display: flex;
  transition: transform 0.4s ease;
}

body[data-landing-page="photobooth"] .pkg-carousel-empty {
  flex: 0 0 100%;
  width: 100%;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8a86a0;
  font-size: 15px;
}

/* Each slide: no background of its own (no gradient, no background-
   color) — .slide-bg below IS the background, a blurred/darkened copy
   of the same photo the sharp .package-card shows. flex-start on the
   track keeps each slide sized to its own content instead of
   stretching every slide to match whichever one is tallest. */
body[data-landing-page="photobooth"] .pkg-carousel-track {
  display: flex;
  align-items: flex-start;
  transition: transform 0.4s ease;
}

body[data-landing-page="photobooth"] .pkg-card {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-height: 85vh;
  overflow: hidden;
}

/* Background layer: the same package photo as .package-card below,
   blurred and darkened heavily enough that its (upscaled, sometimes
   soft) pixels are never visible — inset -40px + scale(1.08) pushes
   the blur's own edge artifacts outside the visible area. */
body[data-landing-page="photobooth"] .slide-bg {
  position: absolute;
  inset: -40px;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: blur(24px) brightness(0.35) saturate(1.2);
  transform: scale(1.08);
}

/* align-items: stretch (not center) + the 220px top padding below are
   the fix for two related bugs: (1) long name/description combinations
   were being vertically centered within this 85vh-tall card, which for
   tall content pushed the top of .pkg-card-left (the purple rule + H2)
   up underneath — visually colliding with — the persistent
   .carousel-overlay title above (itself ~200px tall); (2) stretch gives
   .pkg-card-left a defined height to work with so .pkg-card-select-btn's
   margin-top: auto below has room to push it to the bottom of the
   column instead of it and the meta row ever crowding off the bottom
   edge. 220px clears the overlay's height with room to spare. */
body[data-landing-page="photobooth"] .pkg-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100%;
  min-height: 85vh;
  padding: 220px 64px 48px;
  gap: 64px;
}

body[data-landing-page="photobooth"] .pkg-card-left {
  width: 45%;
  flex: none;
  display: flex;
  flex-direction: column;
}

/* 32px (was 80px) so it no longer eats into the description's space —
   see the vertical-spacing rewrite below for the rest of the column. */
body[data-landing-page="photobooth"] .pkg-card-rule-v {
  display: block;
  width: 3px;
  height: 32px;
  background: #7b4ff5;
  margin-bottom: 12px;
}

body[data-landing-page="photobooth"] .pkg-card-name {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  /* Scales down for long names ("Digital Trading Cards (Electronic
     Delivery)") instead of overflowing the 45%-width column. */
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -1px;
  color: #ffffff;
  margin: 0 0 12px;
}

/* New action line between the name and description — see
   .card-action-hint below for its own styling; its margin-bottom is
   what actually creates the name-to-description gap now that it sits
   between them. */
body[data-landing-page="photobooth"] .card-action-hint {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #7b4ff5;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

body[data-landing-page="photobooth"] .card-action-hint::before {
  content: "→";
}

body[data-landing-page="photobooth"] .pkg-card-description {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  max-width: 400px;
  /* Caps height at 2 lines (was 3) regardless of description length —
     keeps it from fighting the metadata row below for space. */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

body[data-landing-page="photobooth"] .pkg-card-meta {
  display: flex;
  margin-top: 16px;
}

body[data-landing-page="photobooth"] .pkg-card-meta-col {
  flex: 1;
  padding: 0 20px;
}

body[data-landing-page="photobooth"] .pkg-card-meta-col:first-child {
  padding-left: 0;
}

body[data-landing-page="photobooth"] .pkg-card-meta-col + .pkg-card-meta-col {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

body[data-landing-page="photobooth"] .pkg-card-meta-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0 4px;
}

body[data-landing-page="photobooth"] .pkg-card-meta-value {
  font-size: 14.5px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

body[data-landing-page="photobooth"] .pkg-card-select-btn {
  display: inline-block;
  /* Fixed 20px gap per spec (was margin-top: auto, anchoring the button
     to the bottom of the stretched .pkg-card-left column). With the
     shorter 2-line description and smaller rule-v above, content is
     shorter overall now, so the button sits right after the meta row
     rather than flush with the card's bottom on most cards — verified
     it's never clipped either way, .pkg-card-left's stretch height is
     always >= its content's natural height. */
  margin-top: 20px;
  background: #7b4ff5;
  color: #ffffff;
  border: none;
  border-radius: 50px;
  padding: 14px 32px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 12px 28px -10px rgba(123, 79, 245, 0.7);
  transition: background 0.15s ease, transform 0.15s ease;
}

/* cursor: pointer signals the whole card is interactive (Part 3), even
   though the actual click targets are the button and the image below —
   a user reading the description text shouldn't have clicks hijacked. */
body[data-landing-page="photobooth"] .pkg-card {
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  body[data-landing-page="photobooth"] .pkg-card-select-btn:hover {
    background: #6038d0;
    transform: scale(1.02);
  }
}

body[data-landing-page="photobooth"] .pkg-card-right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* The same photo as .slide-bg, sharp and contained — the "same image
   used twice" technique: one blurred full-bleed, one crisp in a
   portrait card. */
body[data-landing-page="photobooth"] .package-card {
  position: relative;
  width: 340px;
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1);
  cursor: pointer;
}

body[data-landing-page="photobooth"] .package-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: none;
  transition: transform 0.3s ease;
}

/* Hover-only (not touch, see the media query above) so a tap on mobile
   never leaves the image "stuck" scaled up or the hint stuck visible. */
@media (hover: hover) and (pointer: fine) {
  body[data-landing-page="photobooth"] .pkg-card:hover .package-card img {
    transform: scale(1.02);
  }

  body[data-landing-page="photobooth"] .pkg-card:hover .pkg-card-click-hint {
    opacity: 1;
  }
}

/* "CLICK TO SELECT" pill, centered over the portrait image, only
   visible on hover. pointer-events: none so it never blocks the click
   it's advertising — the image underneath is the real target. */
body[data-landing-page="photobooth"] .pkg-card-click-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background: rgba(123, 79, 245, 0.85);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Nav arrows: overlaid bottom-center of the section itself (not in
   normal flow below it), so they sit on top of the blurred background
   regardless of how tall the current slide's content is. */
body[data-landing-page="photobooth"] .pkg-carousel-controls {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 18px;
}

body[data-landing-page="photobooth"] .pkg-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

body[data-landing-page="photobooth"] .pkg-arrow svg {
  width: 18px;
  height: 18px;
}

body[data-landing-page="photobooth"] .pkg-arrow:hover:not(:disabled) {
  background: rgba(123, 79, 245, 0.25);
  border-color: #7b4ff5;
}

body[data-landing-page="photobooth"] .pkg-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

body[data-landing-page="photobooth"] .pkg-carousel-counter {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  min-width: 52px;
  text-align: center;
}

/* Persistent nudge below the nav arrows, absolutely positioned on top
   of the sliding track the same way .pkg-carousel-controls is (not
   literal CSS position: sticky — there's nothing to scroll past inside
   this section — just "stays put while cards slide underneath it").
   carousel.js hides it (adds .hidden) the moment a package is selected. */
body[data-landing-page="photobooth"] .pkg-select-hint {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  z-index: 8;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  animation: pkg-select-hint-pulse 1.5s ease-in-out infinite;
}

@keyframes pkg-select-hint-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-landing-page="photobooth"] .pkg-select-hint {
    animation: none;
    opacity: 0.85;
  }
}

@media (max-width: 767px) {
  body[data-landing-page="photobooth"] .pkg-card-content {
    /* column-reverse: DOM order stays left-column-then-right-column,
       but visually the image (last in DOM) renders above the text
       (first in DOM) — image in the middle, text at the bottom, per
       spec, with the persistent .carousel-overlay's own compact H1
       occupying the top above both. */
    flex-direction: column-reverse;
    align-items: stretch;
    height: auto;
    padding: 160px 16px 48px;
    gap: 24px;
  }

  body[data-landing-page="photobooth"] .pkg-card-left {
    width: 100%;
  }

  /* No font-size override needed here: clamp(28px, 4vw, 52px) on
     .pkg-card-name already lands at its 28px floor for any viewport
     under ~700px wide, and scales smoothly (not a hard jump) just above
     that, up to the 767px breakpoint edge. */

  body[data-landing-page="photobooth"] .pkg-card-description {
    font-size: 14px;
    max-width: none;
  }

  body[data-landing-page="photobooth"] .pkg-card-meta {
    flex-direction: column;
    gap: 10px;
  }

  body[data-landing-page="photobooth"] .pkg-card-meta-col {
    padding: 0;
    border-left: none !important;
  }

  body[data-landing-page="photobooth"] .pkg-card-select-btn {
    display: block;
    width: 100%;
    text-align: center;
  }

  body[data-landing-page="photobooth"] .pkg-card-right {
    width: 100%;
  }

  body[data-landing-page="photobooth"] .package-card {
    width: 100%;
    max-width: calc(100% - 32px);
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    margin: 0 auto;
  }
}

/* ------------------------------------------------------------------ */
/* Form section: was inside the hero, now its own dark band below the  */
/* carousel. #packageGroup/#packageSelect stay in the DOM (app.js's    */
/* existing wiring, untouched, still depends on them) but are hidden — */
/* the carousel above is now the only visible way to pick a package.   */
/* ------------------------------------------------------------------ */

body[data-landing-page="photobooth"] .calc-form-section {
  background: #0a0a0a;
  padding: 48px 20px;
}

body[data-landing-page="photobooth"] .calc-form-inner {
  max-width: 480px;
  margin: 0 auto;
}

body[data-landing-page="photobooth"] #packageGroup {
  display: none !important;
}

/* Full-width banner between the carousel and the form section, shown
   once a package is selected (carousel.js toggles the .hidden class,
   the same trigger the old inline label used). Sits outside
   .calc-form-inner's 480px column on purpose, so it's not deliberately
   scoped under body[data-landing-page="photobooth"] .calc-form-inner. */
body[data-landing-page="photobooth"] .selected-package-banner {
  display: flex;
  align-items: center;
  gap: 24px;
  background: #141414;
  border-top: 1px solid #7b4ff5;
  border-bottom: 1px solid #7b4ff5;
  padding: 32px 40px;
  text-align: left;
}

/* Both this and .pkg-sticky-bar below set display:flex, which — being
   more specific than the shared, unscoped `.hidden { display: none }`
   in styles.css — would otherwise beat it and show regardless of the
   .hidden class. This wins back over that on specificity (same base
   selector + .hidden compounded on), not just source order. */
body[data-landing-page="photobooth"] .selected-package-banner.hidden {
  display: none;
}

/* Div, not <img>: a missing/null imageUrl just leaves this its plain
   #2a2a2a background rather than a broken-image icon. */
body[data-landing-page="photobooth"] .banner-thumbnail {
  flex: none;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #2a2a2a;
  background-size: cover;
  background-position: center;
}

body[data-landing-page="photobooth"] .banner-text {
  min-width: 0;
}

body[data-landing-page="photobooth"] .banner-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #7b4ff5;
  margin: 0 0 12px;
}

body[data-landing-page="photobooth"] .banner-name {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 48px;
  line-height: 1.1;
  color: #ffffff;
  margin: 0 0 12px;
}

body[data-landing-page="photobooth"] .banner-prompt {
  font-size: 16px;
  color: #888888;
  margin: 0;
}

@media (max-width: 640px) {
  body[data-landing-page="photobooth"] .selected-package-banner {
    padding: 24px 20px;
    gap: 16px;
  }

  body[data-landing-page="photobooth"] .banner-thumbnail {
    width: 56px;
    height: 56px;
  }

  body[data-landing-page="photobooth"] .banner-name {
    font-size: 28px;
  }
}

/* ------------------------------------------------------------------ */
/* Sticky package selector: sits at the top of .calc-form-section, above */
/* .calc-form-inner, so it's full width rather than boxed into that     */
/* 480px column. Hidden until a package is selected.                    */
/* ------------------------------------------------------------------ */

body[data-landing-page="photobooth"] .pkg-sticky-bar {
  position: sticky;
  top: 64px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #141414;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 24px;
  margin: -48px -20px 32px; /* cancel .calc-form-section's own padding so this reaches full width */
}

/* See the matching comment on .selected-package-banner.hidden above —
   same specificity-vs-.hidden issue, same fix. */
body[data-landing-page="photobooth"] .pkg-sticky-bar.hidden {
  display: none;
}

body[data-landing-page="photobooth"] .pkg-sticky-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

body[data-landing-page="photobooth"] .pkg-sticky-thumbnail {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #2a2a2a;
  background-size: cover;
  background-position: center;
}

body[data-landing-page="photobooth"] .pkg-sticky-info {
  min-width: 0;
}

body[data-landing-page="photobooth"] .pkg-sticky-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7b4ff5;
  margin: 0 0 4px;
}

body[data-landing-page="photobooth"] .pkg-sticky-name {
  font-family: "Space Grotesk", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-landing-page="photobooth"] .pkg-sticky-price {
  font-size: 14px;
  color: #888888;
  margin: 0;
}

body[data-landing-page="photobooth"] .pkg-sticky-change-btn {
  flex: none;
  background: transparent;
  color: #7b4ff5;
  border: 1px solid #7b4ff5;
  border-radius: 8px;
  padding: 9px 16px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease;
}

body[data-landing-page="photobooth"] .pkg-sticky-change-btn:hover {
  background: rgba(123, 79, 245, 0.1);
}

/* Dropdown panel: absolutely positioned off the sticky bar (a sticky
   element is itself a positioning context), so it overlays the content
   below rather than pushing the form down. */
body[data-landing-page="photobooth"] .pkg-dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 49;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
  border-radius: 0 0 12px 12px;
  max-height: 360px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.6);
}

/* See the matching comment on .selected-package-banner.hidden above —
   same specificity-vs-.hidden issue, same fix. */
body[data-landing-page="photobooth"] .pkg-dropdown-panel.hidden {
  display: none;
}

body[data-landing-page="photobooth"] .pkg-dropdown-search-wrap {
  flex: none;
  padding: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-landing-page="photobooth"] .pkg-dropdown-search {
  width: 100%;
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  color: #ffffff;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

body[data-landing-page="photobooth"] .pkg-dropdown-search:focus {
  border-color: #7b4ff5;
}

body[data-landing-page="photobooth"] .pkg-dropdown-list {
  overflow-y: auto;
}

body[data-landing-page="photobooth"] .pkg-dropdown-empty {
  padding: 20px 16px;
  font-size: 13.5px;
  color: #888888;
  text-align: center;
  margin: 0;
}

body[data-landing-page="photobooth"] .pkg-dropdown-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  padding: 10px 16px 10px 13px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

body[data-landing-page="photobooth"] .pkg-dropdown-row:hover {
  background: rgba(123, 79, 245, 0.08);
}

body[data-landing-page="photobooth"] .pkg-dropdown-row.selected {
  border-left-color: #7b4ff5;
  background: rgba(123, 79, 245, 0.05);
}

body[data-landing-page="photobooth"] .pkg-dropdown-thumb {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background-color: #2a2a2a;
  background-size: cover;
  background-position: center;
}

body[data-landing-page="photobooth"] .pkg-dropdown-name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-landing-page="photobooth"] .pkg-dropdown-price {
  flex: none;
  font-size: 14px;
  color: #888888;
  text-align: right;
}

@media (max-width: 640px) {
  body[data-landing-page="photobooth"] .pkg-sticky-bar {
    padding: 12px 16px;
    margin: -32px -20px 24px;
  }

  body[data-landing-page="photobooth"] .pkg-sticky-thumbnail {
    width: 32px;
    height: 32px;
  }

  body[data-landing-page="photobooth"] .pkg-sticky-name {
    max-width: 40vw;
  }

  body[data-landing-page="photobooth"] .pkg-sticky-change-btn {
    padding: 8px 12px;
    font-size: 12px;
  }
}

body[data-landing-page="photobooth"] .roi-context-card {
  background: #141414;
  border: 1px solid rgba(123, 79, 245, 0.35);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 0 0 20px;
}

body[data-landing-page="photobooth"] .roi-context-card h3 {
  font-size: 14px;
  color: #ffffff;
  margin: 0 0 6px;
}

body[data-landing-page="photobooth"] .roi-context-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: #b8b5c7;
  margin: 0;
}

body[data-landing-page="photobooth"] .card {
  background: #141414;
  border: 1px solid #2a2a2a;
}

body[data-landing-page="photobooth"] label {
  color: #b8b5c7;
}

body[data-landing-page="photobooth"] input,
body[data-landing-page="photobooth"] select {
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  color: #ffffff;
}

body[data-landing-page="photobooth"] input:focus,
body[data-landing-page="photobooth"] select:focus {
  border-color: #7b4ff5;
}

body[data-landing-page="photobooth"] .btn-primary {
  background: #7b4ff5;
  color: #ffffff;
}

body[data-landing-page="photobooth"] .btn-primary:hover {
  opacity: 0.92;
}

/* ------------------------------------------------------------------ */
/* Results + "how we calculated this" breakdown: no overrides needed   */
/* here any more — .reach-hero/.stat-cards-row/.calc-breakdown/.calc-card */
/* are now dark by default in the shared styles.css, since /activations */
/* and /engage (the only two pages that use them) both want the same   */
/* dark treatment. See that file for the actual rules.                 */
/* ------------------------------------------------------------------ */

/* "Why Use This Calculator?" band: dark here (this page's own carousel/
   form/results are all dark), but stays white in the *shared*
   styles.css base rule because "/" also uses .why-section and keeps
   its own light theme there. */
body[data-landing-page="photobooth"] .why-section {
  background: #0a0a0a;
}

body[data-landing-page="photobooth"] .why-section h2 {
  color: #ffffff;
}

body[data-landing-page="photobooth"] .why-list li {
  color: rgba(255, 255, 255, 0.6);
}

/* ------------------------------------------------------------------ */
/* Post-calculator SEO/content sections — six light sections after the */
/* Check Availability CTA, deliberately breaking from the page's dark   */
/* theme for contrast (content only, no carousel/JS changes). Full-     */
/* bleed like .why-section/.calc-breakdown above: these sit outside     */
/* <main class="wrap"> as siblings so they aren't boxed into .wrap's    */
/* 760px column, with their own 820px centered inner wrapper.           */
/* ------------------------------------------------------------------ */

body[data-landing-page="photobooth"] .post-calc-section {
  padding: 72px 48px;
}

body[data-landing-page="photobooth"] .post-calc-section--white {
  background: #ffffff;
}

body[data-landing-page="photobooth"] .post-calc-section--tint {
  background: #f8f8f8;
}

body[data-landing-page="photobooth"] .post-calc-inner {
  max-width: 820px;
  margin: 0 auto;
}

body[data-landing-page="photobooth"] .post-calc-section h2 {
  font-size: 30px;
  font-weight: 700;
  color: #111111;
  margin: 0 0 24px;
}

body[data-landing-page="photobooth"] .post-calc-section p {
  font-size: 17px;
  line-height: 1.75;
  color: #333333;
  margin: 0 0 20px;
}

body[data-landing-page="photobooth"] .post-calc-section p:last-child {
  margin-bottom: 0;
}

body[data-landing-page="photobooth"] .formula-block {
  background: #141414;
  color: #ffffff;
  border: 1px solid #7b4ff5;
  border-radius: 12px;
  padding: 24px 20px;
  margin: 0 0 20px;
  text-align: center;
  font-family: "Space Grotesk", sans-serif;
  font-size: 17px;
  font-weight: 600;
}

body[data-landing-page="photobooth"] .metric-block {
  padding: 20px 0;
  border-bottom: 1px solid #e5e5e5;
}

body[data-landing-page="photobooth"] .metric-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

body[data-landing-page="photobooth"] .metric-block p {
  margin-bottom: 0;
}

body[data-landing-page="photobooth"] .metric-label {
  display: block;
  color: #111111;
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 8px;
}

@media (max-width: 767px) {
  body[data-landing-page="photobooth"] .post-calc-section {
    padding: 48px 24px;
  }

  body[data-landing-page="photobooth"] .post-calc-section h2 {
    font-size: 22px;
  }
}

/* ------------------------------------------------------------------ */
/* Calculator form gate — locked-state label + disabled Calculate      */
/* button until name/email/phone/attendees are all filled. Toggling is */
/* done by public/activations/form-gate.js; the classes here are pure  */
/* presentation. */
/* ------------------------------------------------------------------ */

body[data-landing-page="photobooth"] .form-gate-label {
  background: rgba(123, 79, 245, 0.08);
  border: 1px solid rgba(123, 79, 245, 0.2);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 20px;
}

body[data-landing-page="photobooth"] .form-gate-label p {
  margin: 0;
}

body[data-landing-page="photobooth"] .gate-icon {
  flex: none;
  font-size: 18px;
  line-height: 1;
}

body[data-landing-page="photobooth"] .btn-primary--gated {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}