/* ==========================================================================
   Kara "Cun Cun Je" — 1 Okt – 30 Nov 2026
   Layout: mobile-first. Three regimes (mobile / tablet / desktop) switch
   structure; inside each, the root font-size ramps fluidly with viewport
   width so every rem-based dimension scales per pixel.
   ========================================================================== */

/* --- Tokens -------------------------------------------------------------- */
:root{
  /* palette lifted from the XD spec panel */
  --g-900:#26632B;   /* deepest — body copy on cream, card headings */
  --g-800:#27672C;
  --g-700:#2F7831;   /* hero band */
  --g-600:#34783F;
  --g-550:#2D7A41;   /* display accent */
  --g-500:#389435;
  --g-450:#44A540;   /* mid band */
  --g-400:#48A74A;
  --g-300:#52B94E;
  --cream:#F0E4DF;
  --white:#fff;
  --band-dark:#26632B;   /* hero band + carousel section */
  --field-top:#41A03D;   /* gradient behind the prize cards, top */
  --field-bot:#307A32;   /* ... and where it meets the white section */
  --dot-on:#379235;
  --curve-rim:#487B4C;      /* soft lighter edge along the top of the curve */
  --card-stroke:.24rem;     /* XD: 5px inner stroke, white */
  --cta-overlap:2.2rem;     /* how far the footer CTA rides up into the white */
  --panel-top:#48A74A;   /* XD: linear gradient 180deg */
  --panel-bot:#27672C;
  --panel-r:2.38rem;     /* XD: 50px radius at the 1920 artboard */
  --panel-stroke:.15rem; /* XD: 3px inner stroke, white */

  --slide-dwell:3s;
  --slide-cycle:9.9s;
  --slide-travel:.3s;  /* carousel: 3s dwell + .3s travel, three frames */


  /* type scale — spec px ÷ 21 (root size at the 1920 artboard) */
  --t-xs:.95rem;    /* 20px  captions            */
  --t-sm:1.19rem;   /* 25px  button label        */
  --t-md:1.43rem;   /* 30px  body, step titles   */
  --t-lg:1.90rem;   /* 40px  subheads            */
  --t-xl:2.38rem;   /* 50px  section display     */
  --t-2xl:2.62rem;  /* 55px  "Cara Penyertaan"   */

  --wrap:80rem;

  /* Image scaling ---------------------------------------------------------*/
  --img-scale:1;
  --gap:clamp(1rem,3vw,2rem);
  --pad:clamp(2.25rem,6vw,4rem);
  --r-card:1.6rem;
  --r-pill:999px;
  --curve-h:clamp(8rem,19vw,11.5rem);  /* band curve height; the band padding is derived from it */
  --card-max:26rem;   /* one-column card cap, so tablet cards match the phone and laptop sizes */
  --lockup-scale:.84; /* lockup width, as a share of the prize card width */
  --cta-fs:calc(var(--t-sm) * 1.15);   /* CTA label size, shared by every call to action */
  --cta-w-base:28rem;  /* phone/tablet cap, small enough that the label wraps to two lines */
  --cta-w:36rem;       /* laptop cap, wide enough for one line */
  --overlap:clamp(2rem,5vw,3.6rem);
  --panel-overlap:clamp(7rem,9vw,4.6rem);
  --shadow:0 .6rem 1.4rem -.7rem rgba(12,45,18,.4);
  --ease:cubic-bezier(.22,.9,.34,1);
}

/* Fluid root. Floors and ceilings are in rem, not px, so a reader who has
   raised their browser's default text size still gets a proportional bump.
   Each ramp is a straight line between the two ends of its own regime. */
html{ font-size:clamp(.9375rem, .827rem + .49vw, 1.0625rem); }          /* 360 → 767  : 15 → 17px */
@media (min-width:48rem){ html{ font-size:clamp(1.0625rem, .9513rem + .232vw, 1.125rem); } } /* 768 → 1199 : 17 → 18px */
@media (min-width:75rem){ html{ font-size:clamp(1.125rem, .8125rem + .417vw, 1.3125rem); } }  /* 1200 → 1920: 18 → 21px */

/* --- Reset --------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--white);
  color:var(--g-900);
  font:500 1rem/1.5 Montserrat,"Segoe UI",Roboto,system-ui,sans-serif;
  -webkit-text-size-adjust:100%;
  text-wrap:pretty;   /* body copy: ask the browser to avoid a single-word last line */
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
h1,h2,h3,p,ul,ol,figure,figcaption{ margin:0; }
h1,h2,h3{ overflow-wrap:break-word; text-wrap:balance; }   /* headings: even the line lengths */
ul,ol{ list-style:none; padding:0; }
:focus-visible{ outline:.2rem solid var(--g-300); outline-offset:.25rem; border-radius:.2rem; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

.wrap{ width:min(100% - 2*var(--gap), var(--wrap)); margin-inline:auto; }
.skip{ position:absolute; left:-100vw; }
.skip:focus{ left:var(--gap); top:var(--gap); z-index:9; background:var(--white);
  color:var(--g-900); padding:.75rem 1.2rem; border-radius:var(--r-pill); font-weight:700; }

/* --- Hero ---------------------------------------------------------------- */
.hero{ position:relative; background:var(--band-dark); text-align:center;
  padding-bottom:calc(var(--gap) * 1.2); }
.hero__photo{ position:relative; }
.hero__photo img{ width:100%; }
.hero__logo{
  position:absolute;
  top:10%;
  right:11%;
  margin:0;
  z-index:2;

  width:38%;
  max-width:38rem;
}

.curve{ position:absolute; inset:auto 0 -1px; width:100%;
  height:clamp(4rem, 17vw, 16rem); overflow:visible; }
.curve__fill{ fill:var(--band-dark); }
.curve__edge{
  stroke:#8FBF8A;
  stroke-width:10;
  opacity:.6;
  vector-effect:non-scaling-stroke;
  filter:blur(4px);
}


@media (min-width:62rem){
  .hero{ padding-bottom:0; }
  .hero__logo{ position:absolute; top:10%; right:11%; margin:0; z-index:2;
    width:calc(min(38% + 2.4rem, 38rem) * var(--img-scale)); }
}

/* --- Dark band: masthead, carousel, CTA ---------------------------------- */
.band{ position:relative; background:var(--band-dark); text-align:center;
  padding-bottom:calc(var(--curve-h) * .706 - 4.65rem); }
/* The crest sits 70.6% of the curve height above the band bottom, so the padding
   follows the curve height. A fixed multiplier drifts as 19vw grows, and a flat
   padding steps at each breakpoint. Phone and tablet share this one value. */
.masthead{ width:calc(min(94% + 3rem, 57rem) * var(--img-scale)); margin:0 auto; padding-top:.5rem; }
@media (max-width:74.99rem){ .masthead{ width:min(calc(100vw - 173px), 57rem); } }
@media (max-width:47.99rem){ .masthead{ width:87%; } }               /* mobile */

.band__title{ font-size:min(calc(var(--t-2xl) * .64),13vw); font-weight:650; color:var(--white);
  margin-top:1.2rem; line-height:1.15; }
.band__lede{ font-size:calc(var(--t-md) * .75); font-weight:400; color:var(--white);
  text-wrap:balance; line-height:1.25; margin:.5rem auto 0; max-width:46ch; }
.band__lede strong{ font-weight:650; text-transform:uppercase; }
/* Phone: the lede must hold three lines, not four. 1rem is 15px at the 360px
   floor; 16px pushes the second clause onto a fourth line there. */
@media (max-width:47.99rem){ .band__lede{ font-size:1rem; } }

/* --- CTA pill: one style for every call to action ------------------------- */
.pill,.btn{ display:inline-block; width:min(100%, var(--cta-w-base));
  padding:.78em clamp(1.1em,4vw,2.4em); border:2px solid var(--white);
  border-radius:var(--r-pill); background:var(--g-900); color:var(--white);
  font-size:var(--cta-fs); font-weight:700; letter-spacing:.06em; line-height:1.3;
  text-align:center; text-transform:uppercase; text-decoration:none; }
/* Each keeps the hover it shipped with: the band pill darkens in place, the
   footer link lightens and lifts. */
.pill{ margin-top:1.7rem;
  transition:background .25s var(--ease), border-color .25s var(--ease); }
.btn{ transition:background .25s var(--ease), transform .25s var(--ease); }
.pill:hover,.pill:focus-visible{ background:#1F5224; border-color:var(--white); }
.btn:hover,.btn:focus-visible{ background:var(--g-550); border-color:var(--white); transform:translateY(-2px); }

.curve--band path{ fill:var(--field-top); }
.curve--band{ height:var(--curve-h); z-index:0; }
.band > .wrap{ position:relative; z-index:1; }
/* --- Carousel ------------------------------------------------------------
   3D rotating prism of three faces. carousel.js drives it (autoplay, swipe,
   dots, arrows, keyboard). If the script fails, the CSS spin below runs.
   ------------------------------------------------------------------------- */
.carousel-zone{ width:100vw; margin-inline:calc(50% - 50vw); }   /* full-width hover area */
.carousel{ position:relative; width:min(100%,50rem); margin:1.2rem auto 0; container-type:inline-size; }
.carousel:focus{ outline:none; }
.carousel:focus-visible{ outline:3px solid var(--white); outline-offset:.4rem; border-radius:.6rem; }

.carousel__view{ perspective:400cqw; touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:grab; }
.carousel__view:active{ cursor:grabbing; }
.carousel__stage{ position:relative; aspect-ratio:1100 / 540;
  transform-style:preserve-3d;
  animation:spin var(--slide-cycle) infinite cubic-bezier(.215,.61,.355,1); }
.carousel__face{ position:absolute; inset:0; backface-visibility:hidden; }
/* contain + centre: the three re-exports come in at different aspect ratios
   (1.849–2.030) than the face box (2.037), so width-only sizing anchored them
   top-left and each face settled at a different height. This centres every
   image's canvas in the box and crops nothing. */
.carousel__face img{ width:100%; height:100%; object-fit:contain; object-position:center;
  -webkit-user-drag:none; pointer-events:none; }
.carousel__face:nth-child(1){ transform:rotateY(0deg)   translateZ(28.87cqw); }
.carousel__face:nth-child(2){ transform:rotateY(120deg) translateZ(28.87cqw); }
.carousel__face:nth-child(3){ transform:rotateY(240deg) translateZ(28.87cqw); }

/* CSS-only fallback, used only if carousel.js doesn't load */
@keyframes spin{
  0%,      30.303%{ transform:rotateY(0deg)    scale(.93); }
  33.333%, 63.636%{ transform:rotateY(-120deg) scale(.93); }
  66.667%, 96.970%{ transform:rotateY(-240deg) scale(.93); }
  100%            { transform:rotateY(-360deg) scale(.93); }
}

/* Dots (bigger invisible tap area, same small dot) */
.carousel__dots{ display:flex; justify-content:center; gap:.2rem; margin-top:.5rem; }
.carousel__dots button{ position:relative; width:1.5rem; height:1.5rem; padding:0; border:0; background:none; cursor:pointer; }
.carousel__dots button::before{ content:""; position:absolute; inset:0; margin:auto;
  width:.46rem; height:.46rem; border-radius:50%; background:var(--dot-on);
  animation:dot var(--slide-cycle) infinite cubic-bezier(.215,.61,.355,1); }
.carousel__dots button:nth-child(2)::before{ animation-delay:calc(var(--slide-cycle) / -1.5); }
.carousel__dots button:nth-child(3)::before{ animation-delay:calc(var(--slide-cycle) / -3); }
.carousel__dots button:focus-visible{ outline:2px solid var(--white); outline-offset:-.1rem; border-radius:50%; }
@keyframes dot{
  0%,      30.303%{ background:var(--white); }
  33.333%, 100%   { background:var(--dot-on); }
}

/* Arrows: hidden until JS is running; on mouse devices they fade in on hover */
.carousel__arrow{ display:none; }
.carousel.is-interactive .carousel__arrow{ display:grid; place-items:center;
  position:absolute; top:calc(50% - 1.2rem); transform:translateY(-50%);
  width:2.8rem; height:2.8rem; padding:0; border:2px solid var(--white); border-radius:50%;
  background:var(--white); color:var(--g-900); cursor:pointer;
  opacity:0; transition:opacity .25s var(--ease), background .25s var(--ease); z-index:2; }
.carousel__arrow svg{ width:1.1rem; height:1.1rem; }
.carousel__arrow--prev{ left:-1.5rem; }
.carousel__arrow--next{ right:-1.5rem; }
.carousel.is-interactive .carousel__arrow:hover{ background:var(--cream); }
.carousel.is-interactive .carousel__arrow:focus-visible{ opacity:1; outline:2px solid var(--white); outline-offset:3px; }
@media (hover:hover) and (pointer:fine){
  .carousel-zone:hover .carousel.is-interactive .carousel__arrow{ opacity:1; }
}
@media (hover:none), (pointer:coarse){
  .carousel.is-interactive .carousel__arrow{ display:none; }                    /* touch: swipe instead */
}

/* JS takes over: no CSS animation, smooth rotation between positions */
.carousel.is-interactive .carousel__stage{ animation:none; transform:scale(.93);
  transition:transform var(--slide-travel) cubic-bezier(.215,.61,.355,1); }
.carousel.is-interactive .carousel__dots button::before{ animation:none; background:var(--dot-on);
  transition:background .25s var(--ease); }
.carousel.is-interactive .carousel__dots button[aria-current="true"]::before{ background:var(--white); }

@media (prefers-reduced-motion:reduce){
  .carousel__stage{ animation:none; transform:none; }
  .carousel__dots button::before{ animation:none; }
  .carousel__dots button:first-child::before{ background:var(--white); }
  .carousel.is-interactive .carousel__stage{ transition:none; }
}


/* --- Gradient field: prize cards + weekly prize ---------------------------- */
.field{ background:linear-gradient(180deg,var(--field-top) 0%,var(--field-bot) 100%); }
.prizes-sec{ padding-bottom:var(--pad); }

/* --- Prize cards -------------DOM order is Utama → Pertama → Kedua------------- */
.prizes{ display:grid; grid-template-columns:minmax(0,1fr); max-width:var(--card-max);
  gap:calc(var(--gap) * 7.0); margin-inline:auto; padding-top:calc(var(--gap) * 5.2); }
@media (min-width:48rem){ .prizes{ padding-top:calc(var(--gap) * 3.2); } }

.prize{ position:relative; background:var(--cream); border-radius:var(--panel-r);
  padding:26% 1.2rem 1.8rem; text-align:center;
  /* XD: 50px radius, #F0E4DF fill, 5px white inner stroke */
  box-shadow:inset 0 0 0 var(--card-stroke) var(--white), var(--shadow); }
/* XD: side lockups are 411.59 wide on a 530 card (77.66%), the centre one
   491.58 (92.75%), each rising 38.2% of its own height above the card. */
.prize__lockup{ position:absolute; top:0; left:50%; width:calc(77.66% * var(--lockup-scale));
  transform:translate(-50%,-38.2%); z-index:2; }
.prize--grand .prize__lockup{ width:calc(92.75% * var(--lockup-scale)); }
.prize--grand{ padding-top:31%; }
.prize__tier{ font-size:min(var(--t-lg),11vw); font-weight:800; color:var(--g-550); line-height:1.1; }
.prize__pick{ display:inline-block; max-width:100%; margin-top:.7rem; padding:.42em clamp(.8em,4vw,1.5em);
  background:var(--g-900); color:var(--white); border-radius:var(--r-pill);
  font-size:var(--t-xs); font-weight:700; letter-spacing:.06em; }

.options{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem .8rem; margin-top:1.6rem; }
.option img{ width:100%; }

/* Line each caption up with the centre of its grey shadow (measured per image) */
.option figcaption{ transform:translateX(var(--shadow-x, 0%)); }
.option:has(img[src*="u-a-thermomix"]){ --shadow-x:-3.3%; }
.option:has(img[src*="u-b-fridge"])   { --shadow-x: 8.3%; }
.option:has(img[src*="u-d-voucher"])  { --shadow-x: 5.2%; }
.option:has(img[src*="p1-a-tv"])      { --shadow-x:-7.5%; }
.option:has(img[src*="p1-b-phone"])   { --shadow-x: 2.7%; }
.option:has(img[src*="p1-d-mixer"])   { --shadow-x: 7.0%; }
.option:has(img[src*="k-a-laptop"])   { --shadow-x:-8.0%; }
.option:has(img[src*="k-b-dryer"])    { --shadow-x: 3.0%; }
.option:has(img[src*="k-d-vacuum"])   { --shadow-x: 6.2%; }
.option:has(img[src*="gold"])         { --shadow-x:-6.7%; }.option figcaption{ font-size:.925rem; font-weight:600; color:var(--g-900);
  line-height:1.29; margin-top:.4rem; overflow-wrap:break-word; hyphens:auto; }   /* mobile: 14px/18px */
@media (min-width:75rem){
  .option figcaption{ font-size:var(--t-xs); line-height:1.2; }                     /* desktop: 20px/24px */
}

@media (min-width:62rem){
  .prizes{ grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch;
    gap:2.55%; max-width:77.4rem; margin-inline:auto; }   /* all three cards take the tallest height */
  .prize--first { grid-area:1 / 1; }
  .prize--grand { grid-area:1 / 2; transform:translateY(-2.2rem); }  /* XD: raised 46px, by transform so stretch ignores it */
  .prize--second{ grid-area:1 / 3; }
}

/* --- Weekly prize --------------------------------------------------------
   One element, one grouping.
   ------------------------------------------------------------------------- */
.weekly{ position:relative; z-index:1; display:flow-root;
  padding:calc(var(--pad) * .9) 0 0; text-align:center; }
.weekly__title{ font-size:min(calc(var(--t-2xl) * .84),12vw); font-weight:800; color:var(--white); line-height:1.15; }  /* 46px/53px, down from 55px; local to this heading */
/* Below 62rem the panel takes the width of one prize card, and the seal sits
   centred above it. One rule then holds the seal at one size against the cards
   at every width. The top padding clears the seal ink: the ink reaches 34.76% of
   the seal width, and the seal is 92.75% of the card times the scale times .721,
   or 56.18% of the panel at scale .84. That is 19.53% of the panel width. A
   percentage padding resolves against the wrap, not the panel, so the panel
   width is written out as min(var(--card-max), 100%). */
.weekly__panel{ position:relative; display:grid; justify-items:center;
  max-width:var(--card-max); margin:4.2rem auto calc(var(--panel-overlap) * -1);
  padding:calc(min(var(--card-max), 100%) * .9275 * var(--lockup-scale) * .721 * .3476) 1.6rem 1.5rem;
  background:linear-gradient(180deg,var(--panel-top) 0%,var(--panel-bot) 100%);
  border-radius:var(--panel-r);
  box-shadow:inset 0 0 0 var(--panel-stroke) var(--white); }
.weekly__lockup{ position:absolute; top:0; left:50%;
  width:calc(92.75% * var(--lockup-scale) * .721);   /* level with the Memang Cun card */
  transform:translate(-50%,-19.23%); }
.weekly__offer{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:1rem;
  align-items:center; text-align:left; }
.weekly__offer img{ width:min(9.6rem,30vw); border-radius:.8rem; }
.weekly__offer p{ font-size:min(var(--t-sm),5.6vw); font-weight:600; color:var(--white);
  line-height:1.35; overflow-wrap:break-word; }

/* Laptop: the panel widens, the seal returns to its left column, and the offer
   takes the space beside it. */
@media (min-width:62rem){
  .weekly__panel{ justify-items:start; margin-top:3rem;
    max-width:min(57rem, 100% - 10rem);
    padding:1.9rem 2.2rem 1.9rem 21%; }
  .weekly__lockup{ left:0; top:0; width:calc(32% * var(--lockup-scale));
    transform:translate(-26.92%,-19.23%); }
}
@media (min-width:48rem){ .br-mobile{ display:none; } }


/* --- How to enter --------------------------------------------------------- */
.join{ background:var(--white); text-align:center;
  padding:calc(var(--pad) + var(--overlap)) 0 calc(var(--pad) + var(--cta-overlap)); }
.join__title{ font-size:min(calc(var(--t-2xl) * .84),13vw); font-weight:800; color:var(--g-550); line-height:1.1; }
.join__note{ font-size:.93rem; font-weight:500; color:var(--g-900);
  margin:3rem auto 1.8rem; max-width:24em; line-height:1.14; }          /* mobile: 14px/16px, 2 lines */
@media (min-width:48rem){
  .join__note{ font-size:var(--t-xs); max-width:72rem; line-height:1.3; }  /* tablet & desktop */
}
@media (min-width:48rem) and (max-width:74.99rem){
  .join__note{ margin-top:calc(132px - 9.5vw); }                           /* tablet: steady gap */
}
@media (min-width:75rem){
  .join__note{ margin-top:0.5rem; }                                          /* web: less space above */
}

/* Mobile & tablet: stacked, big icons (matches mobile XD) */
.steps{ display:grid; gap:2.8rem; margin:2.4rem auto 0; max-width:24rem; text-align:left; }
.step{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.6rem; align-items:center; }
.step img{ width:min(5.9rem,24vw); }
.step h3{ font-size:calc(1.85rem * .85); font-weight:800; color:var(--g-550); line-height:1.21; text-transform:capitalize; }   /* 24px/29px */
.step h3 a{ white-space:nowrap; }                                                                               /* keep phone no. on one line */
.step p{ font-size:calc(var(--t-sm) * .85); font-weight:400; line-height:1.22; color:var(--g-900); margin-top:.6rem; text-wrap:balance; }        /* 15px/19px */
.step a{ color:inherit; text-decoration:none; }
.step a:hover,.step a:focus-visible{ text-decoration:underline; text-underline-offset:.18em; }

@media (min-width:48rem){
  .steps{ max-width:28rem; }                                                    /* tablet: same stacked layout, a bit wider */
}

/* Web: 3 columns */
@media (min-width:75rem){
  .steps{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; max-width:74rem; }
  .step{ gap:1rem; align-items:start; }
  .step img{ width:3.6rem; }
  .step h3{ font-size:min(calc(var(--t-xl) * .7),2.9vw); line-height:1.22; }   /* 35px/43px at 1920, was .85 */
  .step p{ font-size:calc(var(--t-md) * .85); line-height:1.2; }              /* 26px/31px */
}

/* --- Footer --------------------------------------------------------------- */
.foot{ display:flow-root; background:var(--g-500); color:var(--white);
  padding:0 0 var(--pad); text-align:center; }
.foot .wrap{ display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; }
.foot .btn{ position:relative; z-index:1; margin-top:calc(var(--cta-overlap) * -1); }

.foot__terms{ display:inline-block; margin-top:1.6rem; padding:.3rem .2rem;
  color:var(--white); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; text-decoration:none; }
.foot__terms:hover,.foot__terms:focus-visible{ text-decoration:underline; text-underline-offset:.2em; }

.social{ display:flex; justify-content:center; gap:1.1rem; margin-top:1.2rem; }
.social a{ display:block; width:2.6rem; opacity:.9; transition:opacity .25s var(--ease); }
.social a:hover,.social a:focus-visible{ opacity:1; }

.foot__packs{ width:calc(min(68% + 2.4rem, 30rem) * var(--img-scale)); margin:2.2rem auto 0; }
.foot__legal{ font-size:var(--t-xs); font-weight:500; margin-top:1.6rem; opacity:.7; }

/* --- Terms page ----------------------------------------------------------).
   ------------------------------------------------------------------------- */
.terms{ padding:var(--pad) 0; }
.terms h1{ font-size:var(--t-2xl); font-weight:800; color:var(--g-550); line-height:1.1; }
.terms h2{ font-size:var(--t-md); font-weight:700; color:var(--g-900); margin-top:2rem; }
.terms p,.terms li{ font-size:var(--t-xs); font-weight:500; line-height:1.6; margin-top:.7rem; }
.terms ol{ list-style:decimal; padding-left:1.5rem; }
.terms a{ color:var(--g-550); }
.terms .back{ display:inline-block; margin-top:2.5rem; font-weight:700; text-decoration:none; }
.terms .back:hover,.terms .back:focus-visible{ text-decoration:underline; }


/* --- Weekly prize: smaller TNG logo + text (mobile & tablet) -------------- */
@media (max-width:47.99rem){
  .weekly__offer img{ width:min(8rem,21vw); }
  .weekly__offer p{ font-size:min(var(--t-sm),3.5vw); }
}
@media (min-width:48rem) and (max-width:74.99rem){
  .weekly__offer img{ width:8rem; }
  .weekly__offer p{ font-size:min(var(--t-sm),1.9vw); }
}

/* --- Desktop sizing: fit more of the offer above the fold -----------------
   A 900px laptop window leaves ~813px of content, and the full-width hero
   takes most of it. These caps tighten the lockup, the prize carousel and the
   band's vertical rhythm so the masthead clears the fold and the prizes start
   to show. Measured with `just fold`.

   Desktop only: every rule sits inside min-width:75rem, so mobile and tablet
   render exactly as before. This block is at the end of the file on purpose —
   it has to win over the base rules above, and source order is what decides
   between selectors of equal specificity. */
@media (min-width:75rem){
  .masthead{ width:calc(min(94% + 3rem, 38rem) * var(--img-scale)); }
  .carousel{ width:min(100%, 32rem); margin-top:.6rem; }
  .band{ padding-bottom:calc(var(--pad) * 1.26); }   /* laptop: curve runs above the pill centre (was 1.52) */
  .band__title{ margin-top:.6rem; }
  .band__lede{ margin-top:.35rem; max-width:40ch; }
  .pill{ margin-top:1rem; }
  .pill,.btn{ width:min(100%, var(--cta-w)); }
  .prizes{ padding-top:calc(var(--gap) * 2.4); }
}