/* The Prize House — page layout. Tokens come from v2 + brand.css. */

.wrap{ max-width:var(--measure); margin:0 auto; padding:0 var(--gutter) }
.band{ padding:var(--space-12) 0 }
.band__head{ display:flex; justify-content:space-between; align-items:flex-end;
             gap:var(--space-6); margin-bottom:var(--space-6) }
.band__foot{ display:flex; justify-content:center; margin-top:var(--space-8) }
img{ max-width:100% }

/* 1. marquee. 40s linear, the only continuous motion besides the countdown */
.marquee{ overflow:hidden; border-bottom:1px solid var(--line); background:var(--bg) }
.marquee__track{ display:flex; gap:var(--space-6); padding:9px 0; width:max-content;
  font-family:var(--font-display); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-2); animation:marquee 40s linear infinite }
@keyframes marquee{ to{ transform:translateX(-50%) } }

/* 2. header */
.hdr{ position:sticky; top:0; z-index:40; background:rgba(1,4,14,.92);
      backdrop-filter:blur(10px); border-bottom:1px solid var(--line) }
.hdr__in{ display:flex; align-items:center; gap:var(--space-6); height:92px }
.hdr__logo{ display:block; flex:0 0 auto }
.hdr__logo img{ display:block; border-radius:var(--radius-sm) }
.hdr__nav{ display:flex; gap:var(--space-6); margin:0 auto }
.hdr__nav a{ font-family:var(--font-display); font-weight:700; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-2);
  transition:color 120ms ease-out }
.hdr__nav a:hover{ color:var(--text) }
.hdr__right{ display:flex; align-items:center; gap:var(--space-4) }
.btn--sm{ padding:10px 16px; min-height:40px; font-size:13px }
.hdr__menu{ display:none; width:44px; height:44px; background:none; border:0;
  flex-direction:column; justify-content:center; gap:5px; cursor:pointer }
.hdr__menu span{ display:block; height:1.75px; background:var(--text); border-radius:2px;
  transition:transform 120ms ease-out }

/* 3. utility strip */
.util{ border-bottom:1px solid var(--line); background:var(--surface-1) }
.util__in{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  min-height:44px; flex-wrap:wrap }
.util__soc{ display:flex; gap:var(--space-3) }
.util__soc a{ color:var(--text-2); display:block; transition:color 120ms ease-out }
.util__soc a:hover{ color:var(--flame) }
.util__pay{ display:flex; align-items:center; gap:var(--space-3) }
.util__pay .label{ color:var(--text-3); font-size:11px }
.pay{ display:inline-flex; align-items:center; color:var(--text-2);
      opacity:.9; transition:color 120ms ease-out }
.pay svg{ display:block; overflow:visible }
.util__pay:hover .pay{ color:var(--text) }

/* 4. hero carousel.
   Scroll-snap does the work, so it drags on touch, takes arrow keys and still
   functions with JavaScript off. The arrows and dots only drive scrollTo.
   Slides sit under 100% so the next one peeks: that is what tells you it moves. */
.hero{ position:relative; border-bottom:1px solid var(--line) }
.hero__track{
  /* The rail is the only variable. A percentage flex-basis resolves against the
     CONTENT box, which the rails have already shrunk, so asking for 72% there
     compounds to 52% of the track. Slides take the content box whole instead,
     and the rails decide how much of the neighbours shows. */
  --rail: 14%;
  display:flex; gap:var(--space-4); margin:0; list-style:none;
  padding:var(--space-6) var(--rail);
  overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none;
}
.hero__track::-webkit-scrollbar{ display:none }
.slide{
  position:relative; flex:0 0 100%; scroll-snap-align:center;
  aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); background:var(--surface-1);
}
.slide__img{ position:absolute; inset:0; background:var(--surface-3) }
.slide__img img{ width:100%; height:100%; object-fit:cover; display:block }
/* the scrim is what keeps live text legible over real photography */
.slide__scrim{ position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(1,4,14,.94) 0%,rgba(1,4,14,.72) 42%,rgba(1,4,14,.12) 78%) }
.slide__copy{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center; gap:var(--space-4);
  padding:var(--space-10); max-width:60% }
.slide__name{ font-size:clamp(26px,3.4vw,46px); line-height:1.02 }
.slide__worth{ font-size:var(--fs-md); color:var(--text-2) }
.slide__facts{ display:flex; gap:var(--space-8) }
.slide__facts>div{ display:flex; flex-direction:column; gap:4px }
.slide__big{ font-size:clamp(19px,2vw,25px); font-weight:800; color:var(--text) }

.hero__arw{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:48px; height:48px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line); border-radius:50%; color:var(--text);
  background:rgba(1,4,14,.72); backdrop-filter:blur(6px);
  transition:background-color 120ms ease-out, border-color 120ms ease-out,
             transform 120ms ease-out;
}
.hero__arw:hover{ background:var(--flame); color:var(--brand-ink); border-color:var(--flame) }
.hero__arw--prev{ left:calc(var(--gutter) + 12px) }
.hero__arw--next{ right:calc(var(--gutter) + 12px) }
.hero__arw--next svg{ transform:rotate(180deg) }
.hero__arw:hover{ transform:translateY(-50%) scale(1.06) }
.hero__arw:active{ transform:translateY(-50%) scale(.96) }

.hero__dots{ display:flex; justify-content:center; gap:9px; padding:0 0 var(--space-6) }
.dot{ width:26px; height:4px; border:0; border-radius:99px; cursor:pointer;
  background:var(--line); padding:0;
  transition:background-color 120ms ease-out, width 120ms ease-out }
.dot:hover{ background:var(--text-3) }
.dot.is-on{ background:var(--flame); width:40px }

@media (max-width:860px){
  .hero__track{ --rail:8% }
  .slide{ aspect-ratio:4/5 }
  .slide__copy{ max-width:100%; padding:var(--space-6); justify-content:flex-end }
  .slide__scrim{ background:linear-gradient(180deg,rgba(1,4,14,.28) 0%,rgba(1,4,14,.92) 62%) }
  .hero__arw{ display:none }          /* swipe is the control on touch */
}

@media (prefers-reduced-motion:reduce){
  .hero__track{ scroll-behavior:auto }
  .hero__arw:hover,.hero__arw:active{ transform:translateY(-50%) }
}

/* 5. next live draw.
   The trust set is one divided panel, not four bordered cards: four identical
   boxes each carrying the same icon is the icon-grid tell, and the four values
   were adjectives dressed as statistics. Statements now, four distinct marks. */
.draw__in{ display:grid; grid-template-columns:1fr 1.05fr; gap:var(--space-16); align-items:center }
.draw__left{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-4) }
.draw__name{ font-size:clamp(26px,3vw,38px); line-height:1.02 }
.draw__clock{ display:flex; gap:var(--space-6); margin-top:var(--space-2) }
.draw__clock>div{ display:flex; flex-direction:column; gap:6px; align-items:flex-start }
.draw__d{ font-size:clamp(40px,5vw,58px); font-weight:800; color:var(--text); line-height:1 }
.draw__when{ font-size:var(--fs-sm); color:var(--text-2) }
.draw__when .num{ color:var(--text) }

.draw__trust{ display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--surface-1) }
.trust{ padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-3);
  border-right:1px solid var(--line); border-bottom:1px solid var(--line) }
.trust:nth-child(2n){ border-right:0 }
.trust:nth-last-child(-n+2){ border-bottom:0 }
.trust__i{ display:block }
.trust__h{ font-size:var(--fs-md); line-height:1.2 }
.trust__p{ font-size:var(--fs-sm); color:var(--text-2); line-height:1.55 }

/* 6. filter pills + card grid */
.pills{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-6) }
.pill{ padding:10px 16px; border-radius:var(--radius-sm); background:transparent;
  border:1px solid var(--line); color:var(--text-2); cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase;
  transition:background-color 120ms ease-out,color 120ms ease-out,border-color 120ms ease-out }
.pill:hover{ color:var(--text); border-color:var(--text-3) }
.pill.is-on{ background:var(--surface-3); border-color:var(--flame); color:var(--text) }

.grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-5) }
.card{ display:flex; flex-direction:column; background:var(--surface-1);
  border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden;
  transition:transform 160ms ease-out, border-color 160ms ease-out }
.card:hover{ transform:translateY(-3px); border-color:var(--text-3) }
.card__img{ position:relative; aspect-ratio:4/3; background:var(--surface-3); overflow:hidden }
.card__img img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 160ms ease-out }
.card:hover .card__img img{ transform:scale(1.03) }
.card__img .chip{ position:absolute; top:10px; left:10px }
.card__body{ padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-3);
  flex:1 1 auto }
.card__name{ font-size:var(--fs-md); line-height:1.2 }
.card__price .num{ font-size:19px; font-weight:600; color:var(--text) }
.card__price small{ color:var(--text-3) }
.card__meta{ display:flex; justify-content:space-between; font-size:var(--fs-sm);
  color:var(--text-2) }
.card .btn{ margin-top:auto }

/* progress, with a designed loading state so it never renders NaN */
.track{ height:6px; background:var(--surface-3); border-radius:99px; overflow:hidden }
.track__fill{ display:block; height:100%; border-radius:99px;
  animation:fill 600ms ease-out both }
@keyframes fill{ from{ transform:scaleX(0); transform-origin:left } to{ transform:scaleX(1) } }
.track--wait{ position:relative }
.track__hatch{ position:absolute; inset:0; opacity:.5;
  background:repeating-linear-gradient(115deg,var(--line) 0 6px,transparent 6px 12px) }

/* 7. newsletter */
.news{ max-width:560px; margin:0 auto; background:var(--surface-1);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-10); display:flex; flex-direction:column; gap:var(--space-4) }
.news h2{ text-align:center }
.news__sub{ text-align:center; color:var(--text-2); font-size:var(--fs-sm);
  margin-bottom:var(--space-2) }
.news__row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4) }
.news label{ display:flex; flex-direction:column; gap:6px }
.news input[type=text],.news input[type=email]{ background:var(--surface-3);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:13px 14px;
  color:var(--text); font-family:var(--font-body); font-size:var(--fs-base);
  min-height:48px; transition:border-color 120ms ease-out }
.news input:focus{ outline:none; border-color:var(--flame) }
.news__check{ flex-direction:row; align-items:flex-start; gap:10px;
  font-size:var(--fs-sm); color:var(--text-2) }
.news__check input{ width:19px; height:19px; margin-top:1px; accent-color:var(--flame) }

/* 8. how to play */
.steps{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6) }
.step{ display:flex; flex-direction:column; gap:var(--space-3);
  padding-top:var(--space-5); border-top:2px solid var(--flame) }
.step__n{ font-size:var(--fs-sm); color:var(--flame) }
.step p{ color:var(--text-2); font-size:var(--fs-sm) }

/* 9. winners */
.wins{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-5) }
.win{ background:var(--surface-1); border:1px solid var(--line);
  border-radius:var(--radius-md); overflow:hidden }
.win__img{ aspect-ratio:4/3; background:var(--surface-3); display:grid; place-items:center;
  overflow:hidden }
.win__img img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 420ms var(--ease-out) }
.win:hover .win__img img{ transform:scale(1.04) }
.win__body{ padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-2) }
.win__body h3{ font-size:var(--fs-base) }
.win__who{ color:var(--text-2); font-size:var(--fs-sm) }
.win__date{ font-size:var(--fs-xs); color:var(--text-3) }

/* 10. faqs */
.faqs{ max-width:780px }
.faq{ border-bottom:1px solid var(--line) }
.faq summary{ list-style:none; cursor:pointer; padding:var(--space-5) 0;
  display:flex; justify-content:space-between; align-items:center; gap:var(--space-4);
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-md);
  color:var(--text); transition:color 120ms ease-out }
.faq summary::-webkit-details-marker{ display:none }
.faq summary:hover{ color:var(--flame) }
.faq__x{ position:relative; width:14px; height:14px; flex:0 0 auto }
.faq__x::before,.faq__x::after{ content:""; position:absolute; background:var(--flame);
  transition:transform 220ms cubic-bezier(.2,0,0,1) }
.faq__x::before{ left:0; top:6px; width:14px; height:2px }
.faq__x::after{ left:6px; top:0; width:2px; height:14px }
.faq[open] .faq__x::after{ transform:rotate(90deg) }
.faq__a{ padding-bottom:var(--space-5); color:var(--text-2); font-size:var(--fs-sm);
  max-width:66ch }

/* 11. footer */
.ft{ border-top:1px solid var(--line); background:var(--surface-1);
     padding:var(--space-12) 0 var(--space-8) }
.ft__in{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr; gap:var(--space-8) }
.ft__brand{ display:flex; flex-direction:column; gap:var(--space-3) }
.ft__small{ font-size:var(--fs-xs); color:var(--text-3); line-height:1.6 }
.ft__col{ display:flex; flex-direction:column; gap:var(--space-3) }
.ft__col .label{ color:var(--text-3); margin-bottom:2px }
.ft__col a{ color:var(--text-2); font-size:var(--fs-sm); transition:color 120ms ease-out }
.ft__col a:hover{ color:var(--text) }

/* ============================================================
   12. mobile drawer
   Lives outside the media queries because it is a component, not a
   layout tweak. It is only reachable below 860 where the button shows.
   ============================================================ */
.drawer[hidden]{ display:none }
.drawer{
  position:fixed; top:var(--hdr-h,64px); left:0; right:0; bottom:0; z-index:39;
  background:rgba(1,4,14,.72); backdrop-filter:blur(8px);
  display:flex; flex-direction:column;
  opacity:0; transition:opacity 180ms ease-out;
}
.drawer.is-open{ opacity:1 }
.drawer__nav{
  background:var(--surface-1); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateY(-8px); transition:transform 180ms ease-out;
}
.drawer.is-open .drawer__nav{ transform:none }
.drawer__nav a{
  display:flex; align-items:center; min-height:56px;
  padding:0 var(--gutter); border-bottom:1px solid var(--line);
  font-family:var(--font-display); font-weight:800; font-size:17px;
  color:var(--text); transition:color 120ms ease-out, background-color 120ms ease-out;
}
.drawer__nav a:last-child{ border-bottom:0 }
.drawer__nav a:active{ background:var(--surface-2); color:var(--flame) }
.drawer__foot{
  background:var(--surface-1); padding:var(--space-5) var(--gutter);
  display:flex; flex-direction:column; gap:var(--space-3);
  transform:translateY(-8px); transition:transform 180ms ease-out;
}
.drawer.is-open .drawer__foot{ transform:none }

/* the button becomes the close control, so it has to look like one */
.hdr__menu span{ transition:transform 160ms ease-out, opacity 120ms ease-out }
.hdr__menu.is-open span:nth-child(1){ transform:translateY(6.75px) rotate(45deg) }
.hdr__menu.is-open span:nth-child(2){ opacity:0 }
.hdr__menu.is-open span:nth-child(3){ transform:translateY(-6.75px) rotate(-45deg) }

/* ============================================================
   13. breakpoints
   Image boxes never change ratio across breakpoints: a slide is 16/9 and
   a card or winner is 4/3 at every width, which is the native ratio of
   the file behind it. Nothing is ever re-cropped by the viewport, so the
   customer sees the same photograph on a phone as on a desktop.
   ============================================================ */

@media (max-width:1100px){
  .grid,.wins{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .ft__in{ grid-template-columns:1fr 1fr 1fr }
  .draw__in{ gap:var(--space-10) }
}

/* ---- tablet and below ---- */
@media (max-width:860px){
  :root{ --hdr-h:64px }

  .band{ padding:var(--space-10) 0 }
  .band__head{ flex-direction:column; align-items:flex-start; gap:var(--space-3) }

  /* header: logo, basket, menu. Login moves into the drawer so the three
     things that remain each keep a full 44px of room. */
  .hdr__in{ height:var(--hdr-h); gap:var(--space-4) }
  .hdr__logo img{ width:48px; height:48px }
  .hdr__nav{ display:none }
  .hdr__right{ margin-left:auto; gap:var(--space-3) }
  .hdr__right .btn--quiet{ display:none }
  .hdr__menu{ display:flex; margin-right:-10px }

  /* utility strip: the wording is already scrolling past in the marquee,
     so the phone keeps only the two things it cannot say twice. */
  .util__in{ flex-wrap:nowrap; min-height:48px }
  .util__in .label{ display:none }
  .util__pay{ margin-left:auto; gap:var(--space-2) }
  .util__soc{ gap:var(--space-2); margin-left:-10px }
  .util__soc a{ display:grid; place-items:center; width:44px; height:44px }

  /* hero: the copy comes out from on top of the photograph and sits under
     it. No scrim, no text over a moving subject, full contrast, and the
     16/9 crop the image was made at. */
  .hero__track{ --rail:9%; padding:var(--space-5) var(--rail); gap:var(--space-3) }
  .slide{ aspect-ratio:auto; display:flex; flex-direction:column }
  .slide__img{ position:relative; inset:auto; aspect-ratio:16/9; flex:0 0 auto }
  .slide__scrim{ display:none }
  .slide__copy{ position:static; max-width:none; flex:1 1 auto;
    justify-content:flex-start; padding:var(--space-5); gap:var(--space-4) }
  .slide__name{ font-size:24px }
  .slide__worth{ font-size:var(--fs-sm) }
  .slide__facts{ gap:var(--space-6); flex-wrap:wrap }
  .slide__big{ font-size:19px }
  .slide__cta{ width:100%; margin-top:auto }
  .hero__arw{ display:none }            /* swipe is the control on touch */
  .hero__dots{ padding-bottom:var(--space-5) }
  .dot{ height:4px; position:relative }
  .dot::after{ content:""; position:absolute; inset:-18px -6px }  /* 44px tap target */

  /* next draw */
  .draw__in{ grid-template-columns:minmax(0,1fr); gap:var(--space-8) }
  .draw__clock{ gap:var(--space-5) }

  .steps{ grid-template-columns:minmax(0,1fr); gap:var(--space-5) }
  .news{ padding:var(--space-6) }
  .ft__in{ grid-template-columns:1fr 1fr }

  /* anything under 16px makes iOS Safari zoom the page on focus and it
     never zooms back out, which strands the customer mid-form */
  .news input[type=text],.news input[type=email]{ font-size:16px }

  /* a tap has no hover, so the lift and the wipe only add lag */
  .card:hover .card__img img,.win:hover .win__img img{ transform:none }
  .btn--quiet{ min-height:44px; padding:10px 0 }
}

/* ---- phones ---- */
@media (max-width:640px){
  .draw__trust{ grid-template-columns:minmax(0,1fr) }
  .trust{ border-right:0; padding:var(--space-5) }
  .trust:last-child{ border-bottom:0 }

  /* two across stays: seven competitions in one column is a long scroll
     and the price comparison is the reason people scan this grid. The
     gutters give the cards back the width the content needs. */
  .wrap{ padding:0 var(--space-4) }
  .grid,.wins{ gap:var(--space-3) }
  .card__body{ padding:var(--space-3); gap:var(--space-2) }
  .card__name{ font-size:var(--fs-sm); line-height:1.25 }
  .card__price .num{ font-size:17px }
  .card__price small{ font-size:11px }
  .card__meta{ font-size:var(--fs-xs); gap:6px }
  .card__meta .u-wide{ display:none }   /* the bar underneath already says it */
  .card .btn{ font-size:13px; padding:12px 10px; min-height:46px; letter-spacing:.04em }
  .card__img .chip{ font-size:10px; padding:4px 7px; top:8px; left:8px }

  .win__body{ padding:var(--space-3); gap:6px }
  .win__body h3{ font-size:var(--fs-sm); line-height:1.25 }
  .win__who{ font-size:var(--fs-xs) }
  .win__meta .chip{ font-size:10px; padding:4px 7px }
  .win__date{ font-size:11px }

  .pills{ gap:6px; margin-bottom:var(--space-5) }
  .pill{ padding:11px 13px; font-size:12px; min-height:42px }

  /* a 20px link is a miss on a thumb: the footer rows get a real height */
  .ft__col{ gap:0 }
  .ft__col a{ display:flex; align-items:center; min-height:40px }
  .ft__col .label{ margin-bottom:var(--space-2) }

  .faq summary{ padding:var(--space-4) 0; gap:var(--space-4) }
}

@media (max-width:520px){
  .news__row{ grid-template-columns:minmax(0,1fr) }
  .draw__clock{ gap:var(--space-4) }
  .draw__d{ font-size:34px }
  /* the link groups stay two across: one column made the footer taller
     than the page it sits under. */
  .ft__in{ grid-template-columns:1fr 1fr; gap:var(--space-6) }
  .ft__brand{ grid-column:1 / -1 }
}

/* ---- small phones: 360 and down ---- */
@media (max-width:380px){
  .hdr__logo img{ width:44px; height:44px }
  .hdr__right .btn--sm{ padding:9px 12px; font-size:12px }
  .slide__name{ font-size:22px }
  .slide__facts{ gap:var(--space-4) }
  .draw__d{ font-size:30px }
  .card__meta{ font-size:11px }
}

/* anchors must clear the sticky header */
:target{ scroll-margin-top:calc(var(--hdr-h,92px) + 12px) }

@media (prefers-reduced-motion:reduce){
  .marquee__track{ animation:none }
  .track__fill{ animation:none }
  .card{ transition:none }
  .drawer,.drawer__nav,.drawer__foot,.hdr__menu span{ transition:none }
}