/**
 * Why DJ — Phase 2 campaign page.
 *
 * Consumes the DJ Refresh tokens from djr-base.css (--djr-red, --djr-ink, --djr-max,
 * --djr-gutter …). Everything here is namespaced .wp2-* so it cannot leak into the
 * Phase 1 page or the homepage.
 *
 * Figma: "Why Campaign LP — Desktop Phase 2" (node 850:138).
 */

.why-p2 {
  --wp2-section-y: 72px;
  background: var(--djr-white);
  color: var(--djr-ink);
}

/* Shared shell — matches the 1600/80 grid the rest of the site uses. */
.wp2-shell {
  width: 100%;
  max-width: var(--djr-max);
  margin-inline: auto;
  padding-inline: var(--djr-gutter);
}

/* ---------- Shared primitives ---------- */

.wp2-eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--djr-red);
  text-transform: uppercase;
}

.wp2-eyebrow--light { color: rgba(255, 255, 255, 0.85); }
.wp2-eyebrow--red   { color: #ed3840; }

.wp2-h2 {
  margin: 10px 0 0;
  font-size: var(--djr-h2);
  font-weight: 700;
  line-height: 1.2;
  color: var(--djr-ink);
}

.wp2-h2--light { color: var(--djr-white); }

.wp2-lead {
  margin: 10px 0 0;
  font-size: var(--djr-lead);
  line-height: 1.55;
  color: var(--djr-body);
}

.wp2-h2--light + .wp2-lead { color: rgba(255, 255, 255, 0.78); }

.wp2-head { margin-bottom: 40px; }

.wp2-head--center {
  text-align: center;
  max-width: 820px;
  margin-inline: auto;
}

.wp2-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.wp2-accent { color: var(--djr-red); }

.wp2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 17px 38px;
  border-radius: var(--djr-radius-pill);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-decoration: none;
  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.wp2-btn:hover { transform: translateY(-1px); text-decoration: none; }

.wp2-btn--red   { background: var(--djr-red); color: var(--djr-white); }
.wp2-btn--red:hover { background: var(--djr-red-dark); color: var(--djr-white); }
.wp2-btn--white { background: var(--djr-white); color: var(--djr-red); }
.wp2-btn--white:hover { background: #f4f4f4; color: var(--djr-red-dark); }

.wp2-btn--ghost {
  border: 2px solid var(--djr-ink);
  color: var(--djr-ink);
  padding: 15px 36px;
}

.wp2-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--djr-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wp2-link:hover { color: var(--djr-red-dark); }

.wp2-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--djr-radius-pill);
  background: var(--djr-red);
  color: var(--djr-white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
}

/* Labelled image slots — every section falls back to these until art is uploaded. */
.wp2-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--djr-surface);
  color: #9a9a9a;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
}

.wp2-placeholder--dark {
  background: linear-gradient(135deg, #231318 0%, #0a0a0b 100%);
  color: rgba(255, 255, 255, 0.4);
}

.wp2-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 68px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  pointer-events: none;
}

.wp2-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--djr-red);
}

.wp2-play--sm { width: 30px; height: 30px; }
.wp2-play--sm::after { border-width: 5px 0 5px 8px; }

.wp2-duration {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: var(--djr-white);
  font-size: 11px;
  font-weight: 600;
}

/* Scrollers — native overflow with a progress bar, same pattern as djr-categories. */
.wp2-progress {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--djr-line);
  margin-top: 28px;
}

.wp2-progress__thumb {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 30%;
  border-radius: 3px;
  background: var(--djr-red);
  transition: left 0.15s linear, width 0.15s linear;
}

.wp2-arrows { display: flex; gap: 12px; }

.wp2-arrow {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--djr-line);
  border-radius: 50%;
  background: var(--djr-white);
  color: var(--djr-body);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.wp2-arrow:hover { border-color: var(--djr-ink); color: var(--djr-ink); }
.wp2-arrow--red { background: var(--djr-red); border-color: var(--djr-red); color: var(--djr-white); }
.wp2-arrow--red:hover { background: var(--djr-red-dark); border-color: var(--djr-red-dark); color: var(--djr-white); }

.wp2-dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }

.wp2-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c9c9c9;
  cursor: pointer;
}

.wp2-dot.is-active { width: 10px; height: 10px; background: var(--djr-red); }

/* ---------- Hero ---------- */

.wp2-hero {
  position: relative;
  min-height: 655px;
  display: flex;
  align-items: stretch;
  background: #0f3a4a var(--wp2-hero-bg, none) center / cover no-repeat;
  color: var(--djr-white);
  overflow: hidden;
}

/* Rectangle 438's VIDEO fill. The section keeps painting --wp2-hero-bg underneath, so the
   band is never bare while the loop buffers — or at all, when the sizzle attachments are
   missing and the part renders no <video> (see parts/why_dj-p2-hero.php). */
.wp2-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;

  /* The landscape loop carries a burned-in CHAUVET DJ bug 5% up from its bottom edge, and this
     band is far wider than 16:9 — 1600x655 discards 245px of height — so a centred crop took
     123px off the bottom and the mark disappeared entirely. Anchoring the bottom keeps it, and
     costs only headroom the shots have to spare. The portrait recut has no bug (it was cropped
     out when the 9:16 version was cut), so this does nothing either way on a phone. */
  object-position: 50% bottom;
  pointer-events: none;

  /* Stands in for the `poster` attribute — see parts/why_dj-p2-hero.php. One attribute cannot
     carry two stills, and the phone needs the portrait one. */
  background: var(--wp2-hero-vposter, none) center / cover no-repeat;
}

/* Reduced motion: drop the loop and let the poster/still show instead of stopping a video
   the viewer can neither pause nor see the controls of. */
@media (prefers-reduced-motion: reduce) {
  .wp2-hero__video { display: none; }
}

/* Must match the `media` on the mobile <source> elements exactly, or a viewport between the two
   thresholds gets the portrait loop under the landscape still (or the reverse). */
@media (max-width: 640px) {
  .wp2-hero__video { background-image: var(--wp2-hero-vposter-mobile, var(--wp2-hero-vposter, none)); }
}

/* Figma's final fill on Rectangle 438 is a flat black at 35% across the whole band — both
   directional gradients in that fill stack are visible:false, so no left-to-right ramp. */
.wp2-hero__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

/* Figma centres the content block in the 655px band: 227 above, the 208px block, 220 below.
   It is not dead centre — 7px low — and the 100/93 split is exactly that 7px, which lands the
   block on 227 → 435. Do not "tidy" the two values into one: the asymmetry IS the offset.
   (The DJ Refresh header on this template is position:relative, so nothing here is clearing a
   fixed nav.) Was flex-end + 140px top padding, which put the CTA 148px low. */
.wp2-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--djr-max);
  margin-inline: auto;
  padding: 100px var(--djr-gutter) 93px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Figma's Frame 66 is 456px wide at x=115. The inner already carries the 80px house gutter,
   so 35px of offset lands the column on 115. */
/* The 456px measure belongs to the PARAGRAPH, not the column. On the wrapper it also caps the
   button row, and French needs 457px for its two labels — one pixel over, so they stacked while
   every other language sat on one line. The heading already escapes this box via its own
   min-width; the buttons now size to their content the same way. */
.wp2-hero__content {
  margin-inline-start: 35px;
}

/* 40px, not --djr-h1 (60px). Figma 872:1931 is now a SINGLE line — "We Make It Easy to" was
   struck from the headline on 2026-09-22 — so the whole job of the measure below is to keep
   "Light the Unforgettable" from breaking. The headline gets 480px while the copy column stays
   on Frame 66's 456, because house Poppins sets wider than the Figma's wireframe Inter: the
   line needs 473px at 40px/700 and wraps at 456. Reset at the 960px breakpoint so it cannot
   overflow a narrow column. */
.wp2-hero__title {
  margin: 0;
  min-width: 480px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.04;
  color: var(--djr-white);
}

/* Outline-only word, exactly as drawn in the Figma. */
.wp2-hero__title-accent {
  display: inline;
  color: transparent;
  -webkit-text-stroke: 1px var(--djr-white);
}

/* Uniform 15px stack gaps in Figma (headline → copy → button), and no separate measure:
   the paragraph inherits Frame 66's 456px rather than the old 480px cap. */
.wp2-hero__copy {
  max-width: 456px;
  margin: 15px 0;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}

/* Giveaway Details sits beside Enter Now since the prize band lost its link (2026-09-21). */
.wp2-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* The shared .wp2-btn--ghost is a 2px INK border for light bands; the hero sits on a photo. */
.wp2-btn--outline-light {
  border: 2px solid var(--djr-white);
  color: var(--djr-white);
  background: transparent;
}

.wp2-btn--outline-light:hover {
  background: var(--djr-white);
  color: var(--djr-ink);
}

/* Figma 872:1935 is 132×46: 14/28 padding, 15px Bold, no tracking. Scoped to the hero because
   .wp2-btn is shared with the prize band, ticker, share band and last-call CTA — never touch
   the base rule. line-height is pinned to 1.2 because Poppins' normal metrics leave 22.5px of
   text box, which would make the pill 50.5px instead of the designed 46. */
.wp2-hero .wp2-btn {
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

/* The two hero pills are built from the same padding and line box, but only the outlined one
   carried a border — and a border adds to an AUTO height, so the solid pill rendered 46 against
   the outlined 50. `box-sizing` cannot fix this: it only governs an explicit size, and neither
   pill has one. Giving the solid pill a border of its own colour equalises them by construction,
   so they stay matched if the padding or type size is ever changed. 50 is also what the design
   asks for, so this corrects the solid pill rather than inflating it.

   Scoped to the hero deliberately: the ticker (58), share (48) and last-call (58) pills are
   already at their designed heights and stand alone, and the share CTA and prize popup pairs
   solve the same problem by pinning an explicit height instead. */
.wp2-hero .wp2-btn--red {
  border: 2px solid var(--djr-red);
}

.wp2-hero .wp2-btn--red:hover {
  border-color: var(--djr-red-dark);
}



/* The FAQ anchor the prize band's "Giveaway Details" link targets. The DJ Refresh header goes
   fixed once the page scrolls, so without this the heading lands underneath it on the jump. */
#what-you-need-to-know { scroll-margin-top: 120px; }

/* ---------- Giveaway prize band ---------- */

.wp2-prizes {
  background: var(--djr-surface);
  /* Figma leaves 50px above the first card and 58px below the rail. The track already
     carries 4px of top padding (scroll-snap breathing room), so the section takes 46px and
     the two add up to the designed 50px. Deliberately not --wp2-section-y. */
  padding-block: 46px 58px;
}

/* start, not center: centring made the intro's y a function of its own height, so it drifted
   every time the copy re-wrapped. Figma pins its top at 107px from the section top. */
/* The left intro column was cut in the 2026-09-21 review, so the band is one full-width rail
   rather than a two-column grid. Kept as a grid (not reverted to a block) so the existing
   responsive overrides below still address the same element. */
.wp2-prizes__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

/* Figma's Intro is a 16px-gap auto-layout column. Using gap rather than child margins also
   kills the inline-flex strut that was making the copy→link gap 17px and pushing the pill
   2.5px below the block's own top edge. 46px section padding + 61 = the designed 107px. */
.wp2-prizes__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-top: 61px;
}

.wp2-prizes__title {
  margin: 0;
  /* The 253px measure is what breaks the headline "Every Night Has / A Story" in Figma —
     it is doing layout work, not just capping a long line. */
  max-width: 253px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
}

/* Figma fixes this paragraph at 270px inside the 350px intro, so it wraps to four lines.
   Left to fill the column it wraps to three, and the grid's align-items:center then floats
   the whole intro block 16px high. The intro stack is a uniform 16px rhythm. */
.wp2-prizes__copy {
  margin: 0;
  max-width: 270px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--djr-body);
}

/* .wp2-pill is shared with the other bands, so override rather than edit the base rule:
   Figma's GIVEAWAY chip here is a 4px rounded rect at 11px Bold, not the full pill.
   line-height is pinned because the inherited 1.5 makes the chip 26.5px against Figma's 23. */
.wp2-prizes .wp2-pill {
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 1.5px;
}

/* Same reason — the shared .wp2-link is 16px; Figma's "Giveaway Details" is 15px with a
   smaller 12px arrow. The underline is intentional and stays. */
.wp2-prizes .wp2-link { font-size: 15px; }
.wp2-prizes .wp2-link__icon { font-size: 12px; }

/* Shared .wp2-progress rail is 6px/3px; Figma draws this one at 4px/2px. */
.wp2-prizes .wp2-progress { height: 4px; border-radius: 2px; }
.wp2-prizes .wp2-progress__thumb { border-radius: 2px; }

.wp2-prizes__scroller { min-width: 0; }

.wp2-prizes__track,
.wp2-bts__track {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 4px 4px 8px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.wp2-prizes__track::-webkit-scrollbar,
.wp2-bts__track::-webkit-scrollbar { display: none; }

/* Figma cards are fixed boxes: standard 250x350, grand 380x350.
 *
 * min-height, NOT height. A hard height clipped the translated cards: Spanish turns "Exclusive
 * Swag" into a three-line name and "5 U.S. + 5 international winners" into three lines of meta,
 * which needs 407px, and even the cards that fit did so with 4px to spare — German runs longer
 * again. Since the track is a flex row and items stretch by default, every card still matches
 * the tallest one, so the row reads as a single band exactly as before; the band simply grows
 * when a language needs it instead of cutting the copy off.
 *
 * Content stays top-aligned and the slack falls at the bottom, as designed. */
.wp2-prize {
  flex: 0 0 250px;
  min-height: 350px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 20px;
  border: 1px solid var(--djr-line);
  border-radius: var(--djr-radius-lg);
  background: var(--djr-white);
}

/* Width only. The grand card takes the SAME 1px stroke as every other card in Figma; it is
   differentiated by its width plus the red date and red badge, so no red border here. */
.wp2-prize--grand { flex: 0 0 380px; }

/* Figma fixes this row at 22px and lets the 23px badge overhang it symmetrically. With
   min-height the badge grew the row on the two cards that have one, pushing their image well
   and product name 4.5px below the neighbouring cards' — visibly out of register in a row. */
.wp2-prize__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* flex-shrink must be off as well as the height being fixed: the card is a fixed 350px
     column, and on the one card whose content overruns it (Hurricane 700, two-line name) the
     browser reclaimed the deficit from the only shrinkable child — this row — dropping it to
     18.75px and taking that card's well and name out of register with its neighbours. */
  flex: 0 0 auto;
  height: 22px;
}

.wp2-prize__date {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--djr-body);
}

/* Figma reds the date on both the grand prize and the currently open period. */
.wp2-prize--grand .wp2-prize__date,
.wp2-prize--live .wp2-prize__date { color: var(--djr-red); }

/* Red is the default: no card in the design carries a dark badge, so --grand/--live need no
   background of their own and are kept only as markup hooks. */
.wp2-prize__badge {
  padding: 5px 10px;
  border-radius: 4px;
  background: var(--djr-red);
  color: var(--djr-white);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 1.5px;
  white-space: nowrap;
}

/* The well is sized in px in Figma, not by ratio — 200px standard, 196px on the grand card —
   and it sits in a uniform 10px rhythm with the rest of the card. flex-shrink is off so the
   fixed card height cannot squeeze it. */
.wp2-prize__media {
  position: relative;
  flex: 0 0 auto;
  margin: 10px 0;
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--djr-surface);
}

.wp2-prize--grand .wp2-prize__media { height: 196px; }

.wp2-prize__media {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The monthly cards fit the whole product inside their tile. */
.wp2-prize__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* The grand prize is the exception. Its tile is much wider than it is tall, and every product
   shot is a 600×800 canvas with the fixture floating in generous margins — fitted into that
   letterbox the GigBAR came out a fraction of the card. Scaling to width and letting the tile
   crop the empty margins away is what makes it read as the hero prize. */
.wp2-prize--grand .wp2-prize__media img {
  height: auto;
  object-fit: fill;
}

.wp2-prize__name { margin: 0 0 10px; font-size: 18px; font-weight: 700; line-height: 1.25; }
.wp2-prize--grand .wp2-prize__name { font-size: 26px; }
.wp2-prize__meta { margin: 0; font-size: 13px; line-height: 1.25; color: var(--djr-body); }

/* ---------- Creator stories ----------
   Figma "Pattern B — Featured Player + Switcher" is a DARK band: the frame fill is
   #0F1113 solid. The legacy stylesheet colours bare h2/h3/p, which beats inheritance
   from the section, so every text colour has to be restated here. */

.wp2-creators {
  padding-block: 100px;
  background: #0f1113;
  color: #fff;
}

.wp2-creators .wp2-h2     { font-size: 40px; color: #fff; }
.wp2-creators .wp2-lead   { color: rgba(255, 255, 255, 0.7); }
.wp2-creators .wp2-eyebrow { color: #ed3840; }

/* The shared 820px cap would wrap the 40px headline onto a third line here. */
.wp2-creators .wp2-head--center { max-width: 960px; }

.wp2-creators__switcher {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
}

/* Inactive pill is white at 8% with NO stroke — dropping the border is also what takes
   the pill from 58px down to the Figma 56px. */
.wp2-creator-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 22px 8px 8px;
  border: 0;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.wp2-creator-pill.is-active { background: var(--djr-red); }

.wp2-creator-pill__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #d8d8d8 center / cover no-repeat;
  flex: 0 0 auto;
}

.wp2-creator-pill__text { display: flex; flex-direction: column; text-align: left; }
.wp2-creator-pill__name { font-size: 15px; font-weight: 700; }
.wp2-creator-pill__handle { font-size: 12px; opacity: 0.6; }
.wp2-creator-pill.is-active .wp2-creator-pill__handle { opacity: 0.7; }

/* Figma stage is a fixed, centred 1200px block: 800 player + 48 gap + 352 copy. The
   1200px media query below collapses it to one column before the 800 can overflow. */
.wp2-creators__layout {
  display: grid;
  grid-template-columns: 800px minmax(0, 352px);
  gap: 48px;
  align-items: center;
  max-width: 1200px;
  margin-inline: auto;
}

.wp2-player {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--djr-radius-lg);
  overflow: hidden;
  background: #111;
}

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

/* Player radius is 12px here, not the shared --djr-radius-lg (14px). */
.wp2-creators .wp2-player { border-radius: 12px; }

/* Figma's badge is 84px, a solid white fill and a BLACK glyph — the shared .wp2-play is
   68px, translucent white and a red glyph, so scope the override to this section. */
.wp2-creators .wp2-play { width: 84px; height: 84px; background: #fff; }
.wp2-creators .wp2-play::after { border-width: 13px 0 13px 22px; border-left-color: #000; }

/* The Up Next badge is 48px in Figma; re-scope it because the section rule above now
   beats the unqualified .wp2-play--sm. */
.wp2-creators .wp2-play--sm { width: 48px; height: 48px; }
/* Figma paints the big player glyph black but keeps the Up Next glyph brand red, so the
   section-wide black override above has to be undone here. */
.wp2-creators .wp2-play--sm::after { border-width: 8px 0 8px 13px; border-left-color: var(--djr-red); }

.wp2-creators__name { margin: 0; font-size: 32px; font-weight: 700; line-height: 1.2; color: #fff; }
.wp2-creators__company { margin: 14px 0 0; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.6); }
.wp2-creators__bio { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.75); }

/* Figma's Up Next is a bare auto-layout frame: no fill, no stroke, no radius and no
   horizontal padding — only the 12px top padding that separates it from the bio. */
.wp2-upnext {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #fff; /* <button> defaults to the UA buttontext black, it does not inherit the dark band. */
  cursor: pointer;
  text-align: left;
}

.wp2-upnext__thumb {
  position: relative;
  width: 120px;
  height: 68px;
  border-radius: 8px;
  background: #1a1a1a center / cover no-repeat;
  flex: 0 0 auto;
}

.wp2-upnext__text { display: flex; flex-direction: column; gap: 2px; }
.wp2-upnext__label { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; color: rgba(255, 255, 255, 0.5); }
.wp2-upnext__name { font-size: 15px; font-weight: 700; }

/* ---------- Behind the scenes ---------- */

/* Figma frames this band DARK (#0F1113), the same fill as the creator stories band — not on
   the light --djr-surface the rest of the scrollers sit on. The hairline is Figma's INSIDE
   top stroke, 1px #FFFFFF at 10%, separating it from the light band above.
   90px padding-block + a 340px content stack (54 head + 26 + 232 track + 22 + 6 progress)
   is the designed 520px band height. */
.wp2-bts {
  background: #0f1113;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 90px;
}

/* Shared .wp2-head is 40px; Figma's gap under the title is 30px, and the track carries 4px
   of top padding of its own, so 26px here. */
.wp2-bts .wp2-head { margin-bottom: 26px; }

/* The title frame is a lone h2 in Figma, so the shared 10px top margin (which exists to
   clear an eyebrow) has nothing to clear and would inflate the 54px header box. */
.wp2-bts .wp2-h2 {
  margin-top: 0;
  line-height: 1.5; /* Figma's line-height is AUTO: a 54px box on 36px Poppins. */
}

/* Figma's strip is 1520px from x=80, so it BLEEDS through the right gutter and tile 5 clips
   at the frame edge as the scroll affordance. Only the scroller escapes — the progress bar
   is still drawn on the 1440 grid, so it takes the gutter back as a margin. */
.wp2-bts__scroller { margin-right: calc(var(--djr-gutter) * -1); }

/* Shared rail is a solid --djr-line, which blocks out as a light bar on the dark band.
   Figma paints #E4E4E4 at 20% (reads ~#2B2C2E here). Thumb keeps the shared red.
   28px shared top margin -> 22px, because the track's own 8px bottom padding makes up the
   designed 30px gap. */
.wp2-bts .wp2-progress {
  background: rgba(228, 228, 228, 0.2);
  margin-top: 22px;
  margin-right: var(--djr-gutter);
}

.wp2-bts__item {
  position: relative;
  flex: 0 0 300px;
  aspect-ratio: 300 / 220;
  scroll-snap-align: start;
  border-radius: var(--djr-radius-lg);
  overflow: hidden;
  background: #111;
}

.wp2-bts__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Figma's badge is 48px, and its glyph is BLACK in the white ellipse — the shared .wp2-play
   is 68px with a red glyph, so both are overridden here rather than in the base rule. */
.wp2-bts__item .wp2-play { width: 48px; height: 48px; }
.wp2-bts__item .wp2-play::after { border-width: 8px 0 8px 13px; border-left-color: #000; }

/* ---------- Quote ticker ---------- */

/* Figma 916:5273 leaves 80px above the eyebrow and 64px below the CTA panel. Asymmetric, so
   the band opts out of the shared --wp2-section-y (72/72) rather than redefining the token. */
.wp2-ticker {
  background: var(--djr-red);
  color: var(--djr-white);
  padding-block: 80px 64px;
  overflow: hidden;
}

/* Figma's ticker headline is 40px/145%. The shared .wp2-h2 is 36px/1.2 and is used by every
   other band on the page, so the size lives here — same pattern as .wp2-creators .wp2-h2. */
.wp2-ticker .wp2-h2 { font-size: 40px; line-height: 1.45; }

/* Figma drops 82px from the bottom of the 88px header box to the first chip row; the shared
   .wp2-head is 40px. Measured off the restored 40px headline above, not the 36px one. */
.wp2-ticker .wp2-head { margin-bottom: 82px; }

/* Figma paints two 120×182 gradient rects (#A91D22 → transparent) over the ends of the rows
   block so the marquee fades out instead of hard-clipping at the band edge. A mask reproduces
   them without markup: the rows are full-bleed, so overlay rects would have to track the
   viewport width, and the mask's calc() does that for free. */
.wp2-ticker__rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
}

.wp2-ticker__row { overflow: hidden; }

/* The duration here is only the fallback. js/why-dj-p2.js measures the lane and rewrites it so
   the rail holds a constant px/sec however many quotes it carries — a fixed duration silently
   speeds the marquee up every time copy is added. 100s errs slow on purpose: if the script
   never runs, a sluggish ticker reads better than an unreadable one. */
.wp2-ticker__lane {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: wp2-marquee-left 100s linear infinite;
}

.wp2-ticker__row--right .wp2-ticker__lane { animation-name: wp2-marquee-right; }

.wp2-ticker__row:hover .wp2-ticker__lane { animation-play-state: paused; }

@keyframes wp2-marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes wp2-marquee-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .wp2-ticker__lane { animation: none; }
  .wp2-ticker__row { overflow-x: auto; }
}

.wp2-chip {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 18px 28px 18px 20px;
  border-radius: 60px;
  background: rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}

.wp2-chip__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* Flat tint when no avatar is set; an ACF image arrives as an inline background-image. */
  background: rgba(255, 255, 255, 0.25) center / cover no-repeat;
  flex: 0 0 auto;
}

/* The legacy stylesheet gives bare <blockquote> a dark italic treatment with a rule and
   background — reset it inside the chips. */
.wp2-chip__text {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-style: normal;
  quotes: none;
}

.wp2-chip__text::before,
.wp2-chip__text::after { content: none; }

.wp2-chip__quote {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  font-style: normal;
  color: var(--djr-white);
}

.wp2-chip__who {
  margin: 2px 0 0;
  font-size: 13px;
  font-style: normal;
  color: var(--djr-white);
  opacity: 0.7;
}

/* Figma: 70px below the last chip row, and the panel itself is a FIXED 150px box — the build
   hugged its copy at 127px. min-height rather than height so a re-wrapped title can still grow
   it. Fill, radius, padding-inline and space-between already match Figma; left as they are. */
.wp2-ticker__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 70px;
  min-height: 150px;
  padding: 32px 48px;
  border-radius: var(--djr-radius-lg);
  background: var(--djr-red-dark);
}

/* 145% in Figma, not the 1.25 the build used. */
.wp2-ticker__cta-title { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.45; }
.wp2-ticker__cta-sub { margin: 6px 0 0; font-size: 15px; opacity: 0.75; }

/* Figma's ticker pill is 169×58: 17/40 padding and 1px of tracking. The shared .wp2-btn base
   is 17/38 with 0.4px, which lands at 160.5 wide — scoped here so the base rule (prize band,
   share band, last-call CTA) is untouched. Height already matches, so no line-height pin.

   flex:0 0 auto because the pill is a flex item of the space-between .wp2-ticker__cta: the
   copy block's max-content is wider than the panel, so the pill was being shrunk to whatever
   was left. It sat one pixel inside the wrap threshold before; the extra tracking pushed
   "Enter Now" onto two lines and the pill to 82px tall. Pinned, it renders at its Figma 169. */
.wp2-ticker .wp2-btn {
  flex: 0 0 auto;
  padding-inline: 40px;
  letter-spacing: 1px;
}

/* ---------- Bento ---------- */

/* Figma "Frame 77" is a full-bleed #F2F2F2 band, so the fill belongs on the SECTION rather
   than the shell. Its 90px of top/bottom padding is deliberately NOT --wp2-section-y (72px);
   this band is the one place on the page that breathes wider than the page default. */
.wp2-bento {
  padding-block: 90px;
  background: #f2f2f2;
}

/* Figma's inner frame is 1200px (200px side padding on the 1600 artboard) — narrower than the
   shared .wp2-shell measure of 1440. Scoped so the other bands keep the house shell. */
.wp2-bento .wp2-head,
.wp2-bento__grid {
  max-width: 1200px;
  margin-inline: auto;
}

/* …and the shared --center cap (820px) is narrower still, so it has to be lifted too or the
   restored lead sentence wraps to two lines instead of Figma's one. */
.wp2-bento .wp2-head--center { max-width: 1200px; }

/* 30px of lead-in above the heading (90 + 30 = 120px from the section top) and a 30px gap
   down to the grid. The shared .wp2-head is 40px and .wp2-h2 carries a 10px top margin that
   would otherwise collapse out through the shell, so both are neutralised here. */
.wp2-bento .wp2-head {
  padding-top: 30px;
  margin-bottom: 30px;
}

/* Figma's H2 line-height is a flat 48px, not the shared 1.2 ratio (43.2px). The 36px size
   and the --djr-ink colour are the house tokens and stay. */
.wp2-bento .wp2-h2 {
  margin-top: 0;
  line-height: 48px;
}

/* Lead is 16px/24px #444 in Figma; the shared primitive is 18px/1.55 --djr-body. */
.wp2-bento .wp2-lead {
  font-size: 16px;
  line-height: 24px;
  color: #444;
}

/* Figma's bento is a 1200 x 461 frame with layoutMode: NONE — four absolutely positioned
   cards on a 3 x 390px / 2 x 223px lattice with 15px gutters. Rebuilt as an explicit grid
   (NOT grid-auto-flow: column) so each card lands on its designed rectangle:
     Easy to Use            x 0    y 0    390 x 461  (col 1, both rows)
     Designed for the Moment x 405 y 0    390 x 223  (col 2, row 1)
     Transform the Room      x 405 y 238  390 x 223  (col 2, row 2)
     Trusted Worldwide       x 810 y 0    390 x 461  (col 3, both rows) */
.wp2-bento__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, 223px);
  gap: 15px;
  /* margin-block, NOT the shorthand: `margin: 0` also resets the `margin-inline: auto` this
     grid inherits from the 1200px rule above (same 0-1-0 specificity, later wins), which left
     the cards 120px left of their own header with a 240px void down the right. */
  margin-block: 0;
  padding: 0;
  list-style: none;
}

.wp2-bento__card {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* The row track owns the height now — a min-height would blow out the 223px rows. */
  min-height: 0;
  padding: 30px;
  /* Figma is 8px here, not the house --djr-radius-lg (14px). */
  border-radius: 8px;
  overflow: hidden;
  background: var(--djr-ink) var(--wp2-card-bg, none) center / cover no-repeat;
  color: var(--djr-white);
}

/* Figma's scrim is a full-height ramp from fully transparent to fully opaque black — it is
   what makes 100%-opacity white copy legible over the lifestyle photography. */
.wp2-bento__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}

/* The tall/wide cadence the PHP emits (tall / wide / wide / tall) drives the placement; the
   :nth-child pins stop the pair in column 2 from swapping rows if the flow ever changes. */
.wp2-bento__card--tall { grid-row: 1 / span 2; }
.wp2-bento__card--tall:first-child { grid-column: 1; }
.wp2-bento__card--tall:last-child  { grid-column: 3; }

.wp2-bento__card--wide { grid-column: 2; }
.wp2-bento__card--wide:nth-child(2) { grid-row: 1; }
.wp2-bento__card--wide:nth-child(3) { grid-row: 2; }

/* Figma holds the text to a 325px measure inside the 390px card. */
.wp2-bento__body {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 325px;
}

.wp2-bento__title { margin: 0; font-size: 18px; font-weight: 700; line-height: 24px; }
/* Full-opacity white at 16px/24px — the 0.8 opacity was a build-time guess. */
.wp2-bento__copy { margin: 5px 0 0; font-size: 16px; line-height: 24px; color: var(--djr-white); }

/* ---------- Community reels ---------- */

/* Figma 883:3021 is 80px top and 90px bottom — the shared --wp2-section-y is 72/72. */
.wp2-reels {
  padding-block: 80px 90px;

  /* The active tier's width, declared once so the track can pin its height off the SAME value.
     Every breakpoint that resizes the ladder redefines this rather than the item width. */
  --wp2-reel-active-w: 340px;
}

/* The band's own heading scale: Figma 883:3021 is 40px/#0F1113 over a #6B6B6B lead, while the
   shared .wp2-h2 / .wp2-lead stay at 36px/--djr-ink for every other band — same pattern as
   .wp2-creators .wp2-h2. */
.wp2-reels .wp2-h2   { font-size: 40px; color: #0f1113; }
.wp2-reels .wp2-lead { font-size: 17px; color: #6b6b6b; }

/* Figma 883:3021 runs the header into the carousel at 34px, not the shared 40 — every
   other band that needs its own gap overrides this the same way. */
.wp2-reels .wp2-head { margin-bottom: 34px; }

/* The handle run in the lead is red AND bold; the heading run is red only. */
.wp2-reels .wp2-accent--bold { font-weight: 700; }

.wp2-reels__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Figma spans x150–1450 on the 1600 canvas: 196+248+340+248+196 plus four 18px gaps = 1300,
   centred on 800. Centring the track reproduces that span without pinning any coordinate. */
/* The reels are `aspect-ratio: 9/16` with a transitioned WIDTH, so their height is derived and
   animates with them. Left to size itself the track takes the tallest child, and during a slide
   change the outgoing active (340 -> 248) and the incoming one (248 -> 340) cross around 294px:
   the tallest child shrinks for ~120ms and the whole section collapses 73px and springs back,
   visibly bouncing the Share CTA underneath. Pinning the track to the ACTIVE tier's height takes
   the section out of the transition entirely — the reels resize inside a box that never moves. */
.wp2-reels__track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: calc(var(--wp2-reel-active-w) * 16 / 9);
}

/* Figma SIZES the tiers rather than scaling one tile — a transform would shrink the corner
   radius with it — so the base rule is the outermost (far) tier and the modifiers widen it.
   `order` comes from initReels: the ±1 / ±2 neighbours have to sit either side of the active
   reel, which DOM order cannot express. Every frame is opacity 1 in Figma (the "Inactive veil"
   rectangles are hidden), so separation is size, border and shadow only. */
.wp2-reels__item {
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 196px;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  background: #111;
  transition: width 0.25s ease;
}

.wp2-reels__item.is-near   { width: 248px; }
.wp2-reels__item.is-active { width: var(--wp2-reel-active-w); }

/* Only ±2 deep is drawn; a longer UGC set folds the rest away. */
.wp2-reels__item.is-hidden { display: none; }

/* Figma: 3px #A91D22 stroke plus a drop shadow at radius 40 / y 18 / 22% black. border-box
   above keeps the border inside the 9:16 box instead of stretching it. */
.wp2-reels__item.is-active {
  border: 3px solid var(--djr-red);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.wp2-reels__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wp2-reels__item:not(.is-active) .wp2-play { display: none; }

/* Figma's badge is 72px, a fully opaque white fill and a BLACK glyph — the shared .wp2-play is
   68px at 94% white with a red glyph, and it is used by the other bands. */
.wp2-reels .wp2-play { width: 72px; height: 72px; background: #fff; }
.wp2-reels .wp2-play::after { border-width: 12px 0 12px 19px; border-left-color: #000; }

/* Figma's mute control is a BARE 16px white volume-xmark glyph inset 20px from the top and
   right of the ACTIVE reel — no background chip, and nothing on the neighbours. It only ever
   renders on the active reel, which carries a 3px border, and absolute offsets resolve against
   the padding box: 20 − 3 puts the glyph 20px in from the frame edge Figma measures from. */
.wp2-mute {
  position: absolute;
  top: 17px;
  right: 17px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--djr-white);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.wp2-reels__item:not(.is-active) .wp2-mute { display: none; }

/* Figma's arrows are 56px with a 22px chevron, and the outer span is x62–1538 — 18px wider
   each side than the shell's 80px gutter, hence the negative inset. The prev ring is #B8BABC
   over a #0F1113 chevron; next keeps the shared red fill. */
.wp2-reels .wp2-arrow {
  width: 56px;
  height: 56px;
  font-size: 22px;
}

.wp2-reels .wp2-arrow--prev {
  border-color: #b8babc;
  color: #0f1113;
}

/* The scoped ring above outweighs the shared .wp2-arrow:hover, so restate the hover here. */
.wp2-reels .wp2-arrow--prev:hover { border-color: #0f1113; }

/* These three modifiers exist only for this carousel, so they are scoped with it. */
.wp2-reels .wp2-arrow--float { position: absolute; z-index: 2; }
.wp2-reels .wp2-arrow--prev  { left: -18px; }
.wp2-reels .wp2-arrow--next  { right: -18px; }

/* Figma's pager: the active dot is a 24x8 pill at 4px radius in #A91D22, the rest are 8x8 at
   #0F1113 20% (#CFD0D1 on white). Scoped so the shared .wp2-dot (a 10px red circle) stays put
   for the other bands. */
.wp2-reels .wp2-dots { margin-top: 36px; }
.wp2-reels .wp2-dot { background: #cfd0d1; }

.wp2-reels .wp2-dot.is-active {
  width: 24px;
  height: 8px;
  border-radius: 4px;
  background: var(--djr-red);
}

/* ---------- Share your story ---------- */

/* Figma 887:3784 is 80px top and bottom — the shared --wp2-section-y is 72. */
.wp2-share {
  background: var(--djr-red);
  color: var(--djr-white);
  padding-block: 80px;
}

/* Figma 887:3785 spaces this header at 12px, where the ticker's is genuinely 10 — so the
   shared .wp2-h2 margin is right there and 2px short here. Scoped, not changed at source.
   (Worth knowing: the section's remaining height gap is NOT all the deferred H2 decision —
   it is H2 -7.4 + eyebrow +4.1 + this 2px, partly cancelling.) */
.wp2-share .wp2-h2 { margin-top: 12px; }

/* Figma centres a 1128px content block inside the 1600 artboard: three 360px cards with a
   24px gap. The build let the row spread across the full 1440 .wp2-shell, which blew the
   cards out to 466.7. Capped here instead of on the shell, which the header still uses. */
.wp2-share__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1128px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* Figma stacks the card as two rows, not two columns: the number and the title share row 1,
   and the body copy sits BELOW spanning the full 302px inner width. The build nested the copy
   inside .wp2-share__text beside the number, which indented it by 48px. display:contents on
   the wrapper (below) hoists the title and copy into this grid so they can be placed
   independently without changing the markup.

   Card box is a fixed 170px in Figma with 26/28 padding, a 16px radius (the shared
   --djr-radius-lg is 14px) and a 1px INSIDE stroke — border-box keeps the border inside the
   360px track so the row still totals 1128. */
.wp2-share__step {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 10px;
  align-items: center;
  align-content: start;
  box-sizing: border-box;
  min-height: 170px;
  padding: 26px 28px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
}

/* 36×36 with a 15px Bold digit in Figma; the build had 32×32 at the inherited 16px. */
.wp2-share__num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--djr-white);
  color: var(--djr-red);
  font-size: 15px;
  font-weight: 700;
}

/* Not a box in Figma — it only exists to group the two strings in the markup. */
.wp2-share__text { display: contents; }
.wp2-share__title { grid-column: 2; font-size: 20px; font-weight: 700; }
.wp2-share__copy { grid-column: 1 / -1; font-size: 15px; line-height: 1.5; opacity: 0.85; }

/* Figma: 50px from the card row down to the pill. */
.wp2-share__cta { margin-top: 50px; text-align: center; }

/* Figma's share pill is 184×48: 15/30 padding, 15px Bold, no tracking. The shared .wp2-btn
   base is 17/38 at 16px/600 with 0.4px tracking, which lands at 217×58 — scoped here so the
   base rule stays intact for the prize band and last-call CTA. line-height is pinned for the
   same reason as .wp2-hero .wp2-btn: Poppins' normal metrics give 15px text a 22.5px box,
   which would make the pill 52.5px instead of the designed 48. Deliberately no width, so the
   `.wp2-btn { width: 100% }` rule at the 640px breakpoint still wins. */
.wp2-share .wp2-btn {
  padding: 15px 30px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

/* ---------- Last call ---------- */

/* Figma 916:4985 is 1600×357: 81px of padding top and bottom, and an even 14px between every
   one of the four elements. The band was running 64/10/12/28, which is why it came out 9px tall
   and unevenly spaced. */
/* One photo anchored to each edge over the graphic's own black, rather than a single flat
   composite stretched to fill.

   The composite is 4.48:1 with a DJ at each end, and `cover` has to grow it in BOTH directions
   to fill the band. Every extra line of headline makes the band taller, so the whole picture
   zoomed and the DJs were cut off at the sides — at 432px tall it was drawing 1932px of artwork
   into a 1585px section and losing 174px off each end. The translations make the headline wrap,
   so this got worse in every language but English.

   Split, the middle is just background-colour and can stretch as far as it likes. #010101 is
   measured from the composite's own ground, so the inner edge of each photo — already faded to
   black in the export — meets it with no seam. `auto 100%` keeps each photo's aspect and pins it
   to the full band height. The flat composite stays as the fallback for anywhere the split pair
   has not been set. */
.wp2-lastcall {
  /* Three layers, front to back: left photo, right photo, then the flat composite as a fallback.
     The part emits either the split pair or the composite, never both, so whichever is set wins
     and the other resolves to `none`. */
  background-color: #010101;
  background-image:
    var(--wp2-lastcall-bg-left, none),
    var(--wp2-lastcall-bg-right, none),
    var(--wp2-lastcall-bg, none);
  background-position: left center, right center, center;
  background-size: auto 100%, auto 100%, cover;
  background-repeat: no-repeat;
  color: var(--djr-white);
  padding-block: 81px;
  text-align: center;
  position: relative;
}

.wp2-lastcall__inner { display: flex; flex-direction: column; align-items: center; }

/*
 * Keep the copy inside the dark middle of the background graphic.
 *
 * That graphic is flat-exported with a DJ photographed at each end and a black ground between
 * them. Measuring the source (2400x536), the dark band runs from 19% to 79% of its width, which
 * at the 1585px band is 958px of usable centre — and the English heading fitted inside that by
 * luck rather than design. Spanish runs the same sentence to 1335px, straight across both
 * photographs, and German will be longer again.
 *
 * 860px leaves ~50px of black either side of the longest line. Narrower viewports are safer, not
 * riskier: `cover` crops the graphic horizontally as the band narrows, so the dark centre takes
 * up a larger share of what is actually on screen.
 */
.wp2-lastcall .wp2-h2,
.wp2-lastcall__copy {
  max-width: 860px;
  margin-inline: auto;
}

/* One rung down from the shared 14px eyebrow and 36px h2 — this band is set slightly smaller
   than the others in the design. */
.wp2-lastcall .wp2-eyebrow { font-size: 13px; }

/* 150% leading, not the shared 1.2 — Figma sets it explicitly on both the heading and the copy,
   and it is the whole of the 9px the band was running short. */
.wp2-lastcall .wp2-h2 { margin-top: 14px; font-size: 34px; line-height: 1.5; }

.wp2-lastcall__copy {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.5;
  /* 75% comes from the Figma TEXT node's own opacity, not its fill — the fill is solid white. */
  opacity: 0.75;
}

.wp2-lastcall .wp2-btn {
  margin-top: 14px;
  padding: 17px 40px;
  letter-spacing: 1px;
}

.wp2-lastcall__note { margin: 18px 0 0; font-size: 13px; opacity: 0.5; }

/* ---------- Last call: narrow ----------
   Figma "Last Call CTA — Mobile & Tablet Options", M3 and T3 (node 1150:6667). Below 900px the
   band turns portrait and `cover` on the 4.48:1 desktop graphic crops ~84% of its width away,
   leaving only the black middle — both DJs live at the extreme edges. Narrow screens get a
   single photo full bleed instead, under a flat scrim.

   The scrim is a CSS layer rather than something baked into the image, which is what keeps the
   phone and tablet identical: one photo, one overlay, only the type scale changes between them. */
@media (max-width: 900px) {
  .wp2-lastcall {
    background-image:
      linear-gradient(rgba(17, 17, 17, 0.8), rgba(17, 17, 17, 0.8)),
      var(--wp2-lastcall-bg-mobile, var(--wp2-lastcall-bg, none));
    /* The desktop rule sets three layers; this one sets two, and a shorter list would otherwise
       cycle and hand the photo the edge-anchored `auto 100%` meant for the split graphic. */
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
  }

  .wp2-lastcall .wp2-h2 { font-size: 30px; }
}

@media (max-width: 640px) {
  /* A taller band and a smaller headline: at 30px it wrapped to four lines on a phone and
     filled the band edge to edge. */
  .wp2-lastcall { padding-block: 110px; }
  .wp2-lastcall .wp2-h2 { font-size: 26px; }
  .wp2-lastcall__copy { font-size: 15px; }
}

/* ---------- Reused homepage sections ----------
   This band is the homepage's series slider, and it is meant to look identical to it, so almost
   nothing is overridden here any more. It used to be re-cut to a second Figma frame — 520/733
   tracks, a 176px left inset, 110px series names, 58px arrows — which made the same component
   read as two different designs across the site, and at 110px a long series name like COLORband
   overran its column. That block is gone; the shared css/djr-series.css now styles both.

   What remains is only what this page genuinely adds: a SECOND call to action beside the primary,
   which the homepage does not have and the shared stylesheet therefore does not lay out. */

@media (min-width: 769px) {

  .why-p2 .djr-series__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    /* The shared .djr-series__cta carries this 28px itself, but it is zeroed just below so the
       two buttons share a baseline — without moving it up to the row the pair sat flush against
       the last line of copy. */
    margin-top: 28px;
  }

  /* With the row centre-aligned, a margin on the buttons themselves recentres the primary below
     the secondary. The offset belongs on the row, not on each button. */
  .why-p2 .djr-series__cta,
  .why-p2 .djr-series__cta--secondary { margin: 0; }

}

/* ---------- Shop by Category (djr-categories) ----------
   The shared .djr-scroller chrome now lives in css/djr-base.css, which every page loads, so this
   block no longer restates it — it only carries what Figma 887:4654 draws differently here. The
   arrows used to be hidden outright from this page because their styles were not loaded and two
   unstyled buttons showed under the rail; that hide is gone, so the hover arrows work here as
   they do on the homepage. */

.why-p2 .djr-categories { border-bottom: 0; padding-block: 60px; }
.why-p2 .djr-categories__title { margin-bottom: 32px; letter-spacing: 0; }
.why-p2 .djr-categories__tile { gap: 18px; }
.why-p2 .djr-categories__label { font-size: 17px; font-weight: 600; }

.why-p2 .djr-categories__scroller .djr-scroller__bar {
  position: relative;
  height: 9px;
  border-radius: 5px;
  /* Figma 887:4654 is #E4E4E4 here, where the homepage's New Arrivals track is #d9d9d9. */
  background: var(--djr-line);
  overflow: hidden;
}

.why-p2 .djr-categories__scroller .djr-scroller__thumb {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: var(--djr-red);
}

/* ---------- Heading colour guards ----------
   The legacy stylesheet sets colours on bare h2/h3/h4, which beats inheritance from the
   section. Restate them so dark bands stay legible. */

.wp2-ticker__cta-title,
.wp2-share__title,
.wp2-bento__title,
.wp2-lastcall .wp2-h2 { color: var(--djr-white); }

/* .wp2-creators__name is NOT listed here: the creator band is a dark #0F1113 frame in
   Figma, so its name is set to #fff in the Creator stories block above. */
.wp2-prize__name,
.wp2-prizes__title { color: var(--djr-ink); }

.wp2-prizes__title .wp2-accent { color: var(--djr-red); }

/* ---------- Responsive ---------- */

@media (max-width: 1200px) {
  /* .wp2-prizes__inner is already a single column since the intro was cut. */
  .wp2-creators__layout { grid-template-columns: 1fr; gap: 32px; }
  /* Below the 1200px design width the three-column lattice cannot hold: drop to two equal
     columns and cancel the row spans, or the two tall cards strand empty tracks beside them. */
  .wp2-bento__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(223px, auto);
  }
  /* Every pin above is restated so the reset matches their specificity — the bare class
     selectors alone lose to .wp2-bento__card--tall:first-child and friends. */
  .wp2-bento__card--tall,
  .wp2-bento__card--tall:first-child,
  .wp2-bento__card--tall:last-child,
  .wp2-bento__card--wide,
  .wp2-bento__card--wide:nth-child(2),
  .wp2-bento__card--wide:nth-child(3) { grid-column: auto; grid-row: auto; }

  /* The 1300px five-tier ladder (Figma 883:3021) only fits the 1600 design width. Below it the
     far tier folds away and the remaining three step down, so the ladder stays inside the
     shell instead of being clipped by it. */
  .wp2-reels { --wp2-reel-active-w: 280px; }
  .wp2-reels__item.is-far    { display: none; }
  .wp2-reels__item.is-near   { width: 200px; }
}

@media (max-width: 960px) {
  .why-p2 { --wp2-section-y: 48px; }

  /* The bento opts out of --wp2-section-y with a hard 90px, so it needs its own step down. */
  .wp2-bento { padding-block: 48px; }
  .wp2-bento .wp2-head { padding-top: 0; }

  /* Same reason: the ticker (80/64), share (80/80) and reels (80/90) bands now carry their
     Figma padding outright, so the token no longer steps them down. All were 48px here. */
  .wp2-ticker { padding-block: 48px; }
  .wp2-share { padding-block: 48px; }
  .wp2-reels { padding-block: 48px; }

  .wp2-hero { min-height: 560px; }
  /* Steps down from the 40px desktop size — it used to match it, which left the headline no
     smaller on tablet than on desktop. The desktop 480px measure goes with it. */
  .wp2-hero__title { min-width: 0; font-size: 34px; }
  .wp2-hero__inner { padding-block: 32px 48px; }
  /* The gutter drops to 24px here, so the 115px desktop offset would eat the narrow measure. */
  .wp2-hero__content { margin-inline-start: 0; }

  .wp2-head--row { flex-direction: column; align-items: flex-start; }
  .wp2-arrows { display: none; }

  .wp2-ticker__cta { flex-direction: column; text-align: center; padding: 28px 24px; }
  .wp2-share__steps { grid-template-columns: 1fr; }
  .wp2-reels { --wp2-reel-active-w: min(300px, 78vw); }
  .wp2-reels__item { display: none; }
  .wp2-reels__item.is-active { display: block; }
}

@media (max-width: 640px) {
  .wp2-bento__grid { grid-template-columns: 1fr; }
  .wp2-btn { width: 100%; }

  /* The cards are fixed boxes on desktop — 250 standard, 380 grand. A 380px card does not fit a
     390px phone minus the page gutter, so the grand prize ran off the right edge with its badge
     clipped. Both sizes step down to a share of the viewport; the cards size themselves
     vertically (see .wp2-prize), so a name that wraps down here no longer needs an exception. */
  .wp2-prize { flex-basis: min(250px, 78vw); }

  .wp2-prize--grand { flex-basis: min(320px, 86vw); }
}

/* ---------- Hero: mobile ----------
   Figma "Mobile Hero & Share CTA — Options", H1 (node 1153:6750). The desktop layout squeezed
   into 390 put the copy block mid-frame with dead footage above and below it, and set the
   outlined word over the busiest part of the video. Here the content is anchored to the BOTTOM
   behind a scrim rising out of the photo, so the footage owns the top two-thirds, and the
   secondary drops to a plain text link rather than a second full-width pill. */
@media (max-width: 640px) {
  .wp2-hero {
    min-height: 620px;
    align-items: flex-end;
  }

  /* The flat 35% wash is replaced by a gradient: clear at the top where the video plays,
     solid at the bottom where the copy sits. */
  .wp2-hero__scrim {
    background: linear-gradient(
      to bottom,
      rgba(5, 5, 8, 0) 32%,
      rgba(5, 5, 8, 0.85) 68%,
      rgba(5, 5, 8, 0.97) 100%
    );
  }

  .wp2-hero__inner {
    justify-content: flex-end;
    padding: 0 24px 26px;
  }

  .wp2-hero__content {
    max-width: none;
    margin-inline-start: 0;
    text-align: center;
  }

  /* The headline lost "We Make It Easy to" on 2026-09-22, and two short lines at 30px left the
     band looking like body copy. It scales with the viewport instead of stepping, because the
     binding constraint is one word: "Unforgettable" sets at 7.18x the font size in Poppins 700,
     so it fills the 342px measure at 390px wide by 47px, and a 320px phone's 272px measure by
     37px. 11vw stays inside both (42.9 and 35.2) and tops out at 44 so a 430px phone does not
     run the word edge to edge. Leading tightens to 1.1: 37/30 read loose once the type grew. */
  .wp2-hero__title {
    min-width: 0;
    font-size: clamp(32px, 11vw, 44px);
    line-height: 1.1;
  }

  /*
   * Safety net for a word longer than the measure. Every ratio above is a per-language fact —
   * "Unforgettable" sets at 7.18x, German's "UNVERGESSLICHE" at 8.72x — so a clamp tuned to one
   * language will eventually meet a word that does not fit in another. An over-long word has no
   * break opportunity, so it does not wrap: it runs straight out of the box and the section's
   * overflow clips it, which reads as a truncated headline rather than a layout fault. Automatic
   * hyphenation gives the browser a break point (html carries the WPML lang, so it uses the right
   * dictionary); break-word is the last resort when there is no dictionary for that language.
   */
  .wp2-hero__title,
  .wp2-h2,
  .wp2-sharecta__title {
    hyphens: auto;
    overflow-wrap: break-word;
  }

  /*
   * German sets the headline in one 14-letter word. At the shared 11vw it needs 374px of a 342px
   * measure, and hyphenating it instead costs a fifth line — worse than simply setting it smaller.
   * 9.6vw puts "UNVERGESSLICHE" at 340px on a 390px phone and the 30px floor keeps it inside a
   * 320px one, so the word stays whole at every phone width and the hyphens above never fire.
   */
  html[lang^="de"] .wp2-hero__title {
    font-size: clamp(30px, 9.6vw, 40px);
  }

  .wp2-hero__title-accent { display: block; }

  .wp2-hero__copy {
    margin: 16px 0 26px;
    font-size: 15px;
    line-height: 23px;
    color: rgba(255, 255, 255, 0.8);
  }

  .wp2-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }

  /* 50px tall in the design: 14px padding on an 18px line box plus the 2px border either side.
     This used to reach 50 with 16px padding and no border, which drifted from the desktop pill. */
  .wp2-hero .wp2-btn--red {
    width: 100%;
    padding: 14px 0;
    border-radius: 25px;
  }

  /* Secondary becomes a link: no border, no background, no box. */
  .wp2-hero .wp2-btn--outline-light {
    width: auto;
    padding: 0;
    border: 0;
    background: none;
    text-decoration: none;
  }

  .wp2-hero .wp2-btn--outline-light:hover {
    background: none;
    color: var(--djr-white);
    text-decoration: underline;
  }
}

/* ---------- FAQ (Phase 1 carry-over) ----------
   parts/why_dj-faq.php and css/why-dj-faq.css also serve the LIVE Phase 1 page at
   /unforgettable-moments/, so neither may be edited for Phase 2. Everything below is a
   Phase-2-only override, scoped under .why-p2 so it cannot reach Phase 1; this sheet loads
   after why-dj-faq.css and the extra .why-p2 raises specificity, so these win on both counts.
   Figma: 887:3939 in "Why Campaign LP — Desktop Phase 2". */

/* Figma's band is #F2F2F2, and pads 90 above the heading / 120 below the last card. */
.why-p2 .why-dj-faq {
  padding-top: 90px;
  padding-bottom: 120px;
  background: var(--djr-surface);
}

/* Figma's list frame is 1000 wide, 300 from each edge — the shared 960 cap plus 35px of
   inline padding renders it 890 at x=355. The 760px header cap is correct and stays.
   The zeroed padding is a DESKTOP measurement: below the cap there is no slack left to give
   back, and dropping it ran the question cards edge to edge against the phone's screen. */
.why-p2 .why-dj-faq .why-dj-faq__inner {
  max-width: 1000px;
}

@media (min-width: 1080px) {
  .why-p2 .why-dj-faq .why-dj-faq__inner { padding-inline: 0; }
}

.why-p2 .why-dj-faq .why-dj-faq__heading { line-height: 48px !important; }
.why-p2 .why-dj-faq .why-dj-faq__description { margin-top: 10px; }
.why-p2 .why-dj-faq .why-dj-faq__list { margin-top: 30px; }

/* Links are underlined at rest in the design, not only on hover. */
.why-p2 .why-dj-faq .why-dj-faq__description a,
.why-p2 .why-dj-faq .why-dj-faq__answer a { text-decoration: underline; }

/* Card: Figma pads 24 on all four sides and rounds to 8. */
.why-p2 .why-dj-faq .why-dj-faq__item {
  padding: 24px;
  border-radius: 8px;
}

.why-p2 .why-dj-faq .why-dj-faq__item + .why-dj-faq__item { margin-top: 16px; }

/* Every Figma card keeps the same #CCCCCC stroke and carries no effects — open included.
   The red border and drop shadow on the open item are not in the design. */
.why-p2 .why-dj-faq .why-dj-faq__item.uk-open {
  border-color: var(--why-dj-faq-card-border);
  box-shadow: none;
}

/* The question inherits 15px of left padding from the accordion title, which pushes the text
   to 32px from the card edge where Figma has it at 24 (i.e. flush with the card padding). */
.why-p2 .why-dj-faq .why-dj-faq__question {
  gap: 24px;
  /* !important is unavoidable: an inline <style> block sets
     `.uk-accordion-title { padding-left: 15px !important }`, which no amount of specificity
     in a stylesheet can beat. Scoped to .why-p2, so Phase 1 keeps the inline value. */
  padding-left: 0 !important;
  font-weight: 700;
  line-height: 26px;
}

/* Figma's indicator is a 21×24 glyph, so the bars are far wider than the 12×2 drawn here. */
.why-p2 .why-dj-faq .why-dj-faq__toggle {
  flex-basis: 26px;
  width: 26px;
  height: 26px;
}

.why-p2 .why-dj-faq .why-dj-faq__toggle::before { width: 21px; height: 3px; }
.why-p2 .why-dj-faq .why-dj-faq__toggle::after { width: 3px; height: 21px; }

/* No divider under the question in Figma — the card's own 16px item spacing does the work.
   The answer also inherits inline padding, which shortens its measure to 816 vs Figma's 907. */
.why-p2 .why-dj-faq .why-dj-faq__answer {
  margin-top: 16px;
  padding: 0;
  border-top: 0;
  font-size: 16px;
  line-height: 24px;
}

.why-p2 .why-dj-faq .why-dj-faq__answer p + p { margin-top: 16px; }

/* ---------- Prize product popup ----------
   Figma "Prize Product Popup — Options", V2: a 591-wide single column, the same width the
   Countdown and Share Your Story popups already use, so the three read as one family. The
   overlay/dialog shell comes from css/why-dj-popup.css; everything below is the contents. */

.wp2-prize--clickable {
  position: relative;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* A ring, not a lift. The track is `overflow-x: auto` with only 4px of padding, so it clips
   vertically too — a raised card and its drop shadow were both cut off mid-glow. A 3px halo
   fits inside that gutter and needs no room above the card at all. */
.wp2-prize--clickable:hover,
.wp2-prize--clickable:focus-within {
  border-color: var(--djr-red);
  box-shadow: 0 0 0 3px rgba(169, 29, 34, 0.14);
}

/* A transparent button stretched over the whole card. It sits above the card's own content but
   keeps its focus ring, so keyboard users can see which card they are on. */
.wp2-prize__open {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.wp2-prize__open:focus-visible {
  outline: 3px solid var(--djr-red);
  outline-offset: 3px;
}

.why-dj-modal--prize .why-dj-modal__dialog {
  max-width: 591px;
  padding: 32px;
}

.wp2-prizepop__close {
  position: absolute;
  top: 24px;
  right: 24px;
  /* Above the media panel: that panel is positioned too (it anchors the step arrows) and comes
     later in the markup, so at equal z-index it paints over this button and swallows the ×. */
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--djr-surface);
  color: var(--djr-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.wp2-prizepop__close:hover {
  background: #e4e4e4;
}

.wp2-prizepop__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 340px;
  margin-bottom: 28px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--djr-surface);
}

/* Fit the whole product inside the box, the same way the monthly cards do. */
.wp2-prizepop__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* The grand prize is the one exception, again: the GigBAR is a wide bar inside a 3:4 canvas, so
   fitting it leaves the product tiny in a sea of empty margin. */
.wp2-prizepop__media--crop img {
  height: auto;
  object-fit: fill;
}

.wp2-prizepop__eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: var(--djr-red);
  text-transform: uppercase;
}

.wp2-prizepop__name {
  margin: 0 0 12px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--djr-ink);
}

.wp2-prizepop__blurb {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--djr-body);
}

.wp2-prizepop__points {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.wp2-prizepop__points li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.57;
  color: var(--djr-body);
}

.wp2-prizepop__points li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--djr-red);
}

.wp2-prizepop__actions {
  display: grid;
  gap: 10px;
}

.wp2-prizepop__cta {
  padding: 0;
  height: 54px;
  font-size: 17px;
  letter-spacing: 0;
}

.wp2-prizepop__cta--secondary {
  border-color: #b8babc;
}

/* The new-tab arrow, drawn rather than typed: ↗ is not in Poppins and falls through to an
   emoji font, which renders it as a blue-boxed glyph. */
.wp2-prizepop__external {
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--wp2-external) center / contain no-repeat;
  mask: var(--wp2-external) center / contain no-repeat;
}

.wp2-prizepop {
  --wp2-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 10.5L10.5 3.5M10.5 3.5H5M10.5 3.5V9' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

@media (max-width: 640px) {
  .why-dj-modal--prize .why-dj-modal__dialog {
    padding: 24px 20px;
  }

  .wp2-prizepop__media {
    height: 260px;
    margin-bottom: 22px;
  }

  .wp2-prizepop__name {
    font-size: 24px;
  }
}

/* ---------- Prize rail arrows ----------
   Skylar's design has no arrows on this rail, so they stay hidden until the rail is hovered or
   an arrow takes focus; the progress bar underneath is what signals the row scrolls at rest.
   They sit outside the track so they never overlap a card, and the scroller is the positioning
   context rather than the track — the track is the element that scrolls. */

.wp2-prizes__scroller {
  position: relative;
}

.wp2-prizes__arrow {
  position: absolute;
  top: 160px;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  transition: opacity 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Inside the rail, not outside it. The band bleeds off the right edge of the page, so an arrow
   hung past the scroller's own edge is clipped — the next one came out sliced in half. */
.wp2-prizes__arrow--prev { left: 10px; }
.wp2-prizes__arrow--next { right: 10px; }

.wp2-prizes__scroller:hover .wp2-prizes__arrow,
.wp2-prizes__arrow:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Hidden outright at the ends rather than greyed — a ghost control on a rail that cannot move
   reads as broken. js/why-dj-p2.js sets `disabled` from the scroll position. */
.wp2-prizes__arrow[disabled] {
  opacity: 0 !important;
  pointer-events: none;
}

.wp2-prizes__arrow:hover {
  background: var(--djr-red);
  border-color: var(--djr-red);
  color: var(--djr-white);
}

@media (max-width: 900px) {
  /* No hover to reveal them on touch, and no room outside the rail — leave the progress bar. */
  .wp2-prizes__arrow { display: none; }
}

/* ---------- Community reel video ---------- */

.wp2-reels__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.wp2-reels__item { cursor: pointer; }

/* The play badge is an invitation, so it belongs on a reel that is NOT already running — the
   active reel autoplays, and the badge would otherwise sit over moving footage permanently. */
.wp2-reels__item.is-active:not(.is-paused) .wp2-play { opacity: 0; }

.wp2-reels__item .wp2-play { transition: opacity 0.18s ease; }

/* Unmuted swaps the crossed-out speaker for a plain one. */
.wp2-mute.is-unmuted .fa-volume-xmark::before { content: "\f028"; }

/* ---------- Stepping between prizes ----------
   Circles over the media panel's left and right edges. They live INSIDE the dialog rather than
   floating beside it: `.why-dj-modal` scrolls, so anything hung outside the dialog is clipped
   the moment the viewport is short. The product art sits centred in its own margins, so the
   corners they cover are empty. */

.wp2-prizepop__step {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0 0 3px;
  border: 1px solid var(--djr-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--djr-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.wp2-prizepop__step--prev { left: 10px; }
.wp2-prizepop__step--next { right: 10px; }

.wp2-prizepop__step:hover {
  background: var(--djr-red);
  border-color: var(--djr-red);
  color: var(--djr-white);
}

.wp2-prizepop__step:focus-visible {
  outline: 3px solid var(--djr-red);
  outline-offset: 2px;
}

/* ---------- Share & Follow CTA (inset card) ----------
   Figma "S3 — Share & Follow CTA (inset card)" (1048:6592). A contained card rather than a band:
   the reels above and the red ticker below are both full width, and a third full-bleed block in a
   row flattens the rhythm. Dark ground, accent-red close to the heading and stacked pills are all
   carried over from the Engagement CTA on the REVISED board. */

.wp2-sharecta {
  padding-block: 60px;
  background: var(--djr-white);
}

.wp2-sharecta__card {
  position: relative;
  display: grid;
  /* Figma 1048:6592 starts the copy at x446 inside the card; the 40px gap is part of that, so
     the art track is 406 rather than 446. */
  grid-template-columns: 406px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 40px;
  padding: 24px 40px 24px 0;
  min-height: 260px;
  border-radius: 16px;
  background: #111111;
  box-sizing: border-box;
}

/* The phone overhangs the card's TOP edge and both mockups bleed a little past the bottom, so
   this cannot be overflow:hidden on the card — that would cut the top overhang off as well.
   The clip lets the top run free, trims the sides, and allows 14px below the card, exactly the
   approach css/why-dj-events.css uses for the same pair of PNGs on Phase 1. */
.wp2-sharecta__art {
  position: relative;
  align-self: stretch;
  clip-path: inset(-1000px 0 -14px 0);
}

.wp2-sharecta__phone,
.wp2-sharecta__feed {
  position: absolute;
}

.wp2-sharecta__phone {
  left: 20px;
  bottom: -14px;
  width: 250px;
  filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.4));
  z-index: 1;
}

.wp2-sharecta__feed {
  left: 158px;
  bottom: 12px;
  width: 236px;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.45));
  z-index: 2;
}

.wp2-sharecta__phone img,
.wp2-sharecta__feed img {
  display: block;
  width: 100%;
  height: auto;
}

.wp2-sharecta__title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.33;
  color: var(--djr-white);
}

/* The heading's accent run is a brighter red than the brand --djr-red: it has to hold against a
   #111 ground, where #a91d22 reads almost brown. Matches the Figma. */
.wp2-sharecta__title .wp2-accent { color: #ff3b3b; }

.wp2-sharecta__lead {
  /* Figma wraps this to two lines at 518px; left free to reflow below that. */
  max-width: 520px;
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 26px;
  color: #c9c9c9;
}

.wp2-sharecta__lead strong { font-weight: 700; color: var(--djr-white); }

.wp2-sharecta__actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Fixed 200×46 so the two pills stack flush, as in the design — the shared .wp2-btn is
   content-width and the labels differ in length. The line-height is pinned for the same reason
   as the hero and share pills: Poppins' normal metrics give 15px text a 22.5px box, which would
   make these 51px instead of the designed 46. */
.wp2-sharecta__btn {
  /* Height is pinned rather than derived from padding: with an auto height the outlined pill's
     border adds on top and it renders 3px taller than the solid one beside it — box-sizing does
     not help, because it only governs an explicit size. */
  box-sizing: border-box;
  width: 200px;
  height: 46px;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
}

.wp2-sharecta__btn.wp2-btn--outline-light { border-width: 1.5px; }

@media (max-width: 1100px) {
  /* The art is the first thing to go: the copy and the buttons are the point of the section. */
  .wp2-sharecta__card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    padding: 24px 40px;
  }

  .wp2-sharecta__art { display: none; }
}

@media (max-width: 780px) {
  .wp2-sharecta { padding-block: 40px; }

  .wp2-sharecta__card {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 32px 24px;
    text-align: center;
  }

  .wp2-sharecta__title { font-size: 24px; }
  .wp2-sharecta__lead { max-width: none; font-size: 16px; line-height: 24px; }
  .wp2-sharecta__actions { align-items: stretch; }

  /* The 640px rule sets .wp2-btn to width:100%; these are already stretched by the grid. */
  .wp2-sharecta__btn { width: auto; }

  /* Figma "Mobile Hero & Share CTA — Options", S1 (node 1153:6750): the IG post alone at the
     TOP of the card, phone dropped. Trailing the artwork after the buttons read bottom-heavy —
     the mockup is what says "this is about Instagram", so it introduces the card rather than
     following the ask. */
  .wp2-sharecta__art {
    display: flex;
    order: -1;
    position: static;
    align-items: center;
    justify-content: center;
    clip-path: none;
  }

  .wp2-sharecta__phone { display: none; }

  .wp2-sharecta__feed {
    position: static;
    left: auto;
    bottom: auto;
    width: 196px;
    margin: 0;
    filter: none;
  }

  .wp2-sharecta__feed img { border-radius: 8px; }
}

/* ---------- Reused homepage sections: MOBILE ----------
   Mirrors css/djr-series.css's own 768px breakpoint, which restacks the slider so the lifestyle
   photo leads the section full-bleed. At that point .djr-section's 48px top padding and the
   section's hairline are a white band sitting between the previous section's grey and the top
   of the photo — a seam where the design runs the image straight on. The bottom padding stays:
   the card and dots below it still need the room. Scoped to .why-p2 so the homepage, which does
   not stack these two sections, keeps its own spacing. */

@media (max-width: 768px) {
  .why-p2 .djr-series {
    padding-top: 0;
    border-top: 0;
  }
}

/* ---------- @chauvet_dj handle links ----------
   The campaign asks people to tag the brand in three places; each one styles the handle its own
   way (red + bold in the reels lead, bold in the share CTA, inherited in the three-step band), so
   the shared anchor deliberately inherits colour and weight and only adds the affordance. */

.wp2-handle {
  color: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: currentColor;
  transition: opacity 0.15s ease;
}

.wp2-handle:hover,
.wp2-handle:focus-visible { opacity: 0.72; }

/* Replaces the <strong> the share CTA used to wrap the handle in. */
.wp2-handle--strong { font-weight: 700; }