/* Giveaway-led V1 landing refinements. Kept separate so the original V1 remains easy to compare. */
.hero {
  grid-template-columns: minmax(540px, 1.03fr) minmax(500px, .97fr);
  gap: clamp(42px, 5vw, 86px);
}

.hero h1 {
  width: min(100%, 940px);
  max-width: none;
  font-size: clamp(54px, 4.15vw, 72px);
  line-height: .91;
}

.hero h1 span { display: block; white-space: nowrap; }

.hero-giveaways {
  position: relative;
  z-index: 1;
  min-height: 560px;
  display: grid;
  place-items: center;
}

.giveaway-window {
  width: min(100%, 720px);
  margin-left: clamp(14px, 3vw, 52px);
  padding: 18px;
  border: 1px solid rgb(255 255 255 / .68);
  border-radius: 30px;
  background: rgb(250 255 252 / .91);
  box-shadow: 0 38px 90px rgb(0 55 34 / .25), inset 0 1px #fff;
  backdrop-filter: blur(26px) saturate(130%);
  transform: rotate(1.2deg);
}

.giveaway-window-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 5px 16px;
  color: var(--ink);
}

.giveaway-window-head > span { display: grid; gap: 3px; }
.giveaway-window-head small { color: var(--green-deep); font: italic 700 11px var(--display); letter-spacing: .11em; text-transform: uppercase; }
.giveaway-window-head strong { font-size: 18px; }
.giveaway-window-head > b { padding: 8px 11px; border-radius: 99px; color: var(--green-deep); background: var(--soft); font-size: 12px; }

.giveaway-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 92px;
  margin-top: 9px;
  padding: 13px 15px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgb(255 255 255 / .88);
  box-shadow: 0 10px 25px rgb(6 78 48 / .075);
}

.giveaway-preview.featured { border-color: rgb(10 170 100 / .25); box-shadow: 0 14px 34px rgb(6 120 73 / .12); }
.giveaway-preview > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.giveaway-preview small { color: var(--muted); font-size: 11px; }
.giveaway-preview strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.giveaway-preview em { color: var(--muted); font-size: 11px; font-style: normal; }
.giveaway-preview > b { color: var(--green-deep); font: 700 22px var(--display); }
.giveaway-window > a { display: inline-flex; margin: 17px 4px 3px; color: var(--green-deep); font-size: 13px; font-weight: 800; text-decoration: none; }

.retailer-logo.rebel { color: #fff; background: #080808; font-size: 8px; letter-spacing: -.04em; }
.retailer-logo.sound { color: #fff; background: linear-gradient(145deg, #9c36ff, #311052); font-size: 17px; }
.retailer-logo.noel { color: #ffe432; background: #e51c19; font-size: 15px; text-transform: lowercase; }

.fresh-pin {
  position: absolute;
  right: -8px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  color: var(--ink);
  border: 1px solid rgb(255 255 255 / .7);
  border-radius: 17px;
  background: rgb(255 255 255 / .88);
  box-shadow: 0 18px 45px rgb(0 55 34 / .18);
  backdrop-filter: blur(18px);
}

.fresh-pin i { width: 11px; height: 11px; border-radius: 50%; background: #ee443c; box-shadow: 0 0 0 7px rgb(238 68 60 / .13); animation: freshPulse 2.2s ease-in-out infinite; }
.fresh-pin span { display: grid; gap: 2px; }
.fresh-pin strong { font-size: 12px; }
.fresh-pin small { color: var(--muted); font-size: 10px; }

.trending-section {
  position: relative;
  min-height: 760px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(470px, 1.1fr);
  align-items: center;
  gap: clamp(38px, 7vw, 120px);
  margin: 14px 0;
  padding: clamp(60px, 7vw, 112px);
  overflow: hidden;
  color: #fff;
  border-radius: 34px;
  background: radial-gradient(circle at 78% 18%, rgb(90 236 160 / .24), transparent 34%), linear-gradient(135deg, #073f2c, #075d3d);
}

.trending-section:before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgb(255 255 255 / .08) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .08) 1px, transparent 1px); background-size: 38px 38px; }
.trending-copy, .nz-activity { position: relative; z-index: 1; }
.trending-copy h2 { max-width: 11ch; font-size: clamp(50px, 5.2vw, 82px); line-height: .94; }
.trending-copy > p:not(.eyebrow) { max-width: 610px; margin: 22px 0 28px; color: rgb(255 255 255 / .72); font-size: 17px; line-height: 1.65; }

.nz-activity { min-height: 620px; display: grid; place-items: center; }
/* The map and its markers share one box, and the box carries the artwork's own
   aspect ratio, so object-fit never letterboxes and a percentage of the box is
   a percentage of the map. No rotation: the projection is the real one now, and
   tilting it would only put the pins back off their cities. */
.nz-map { position: relative; width: min(100%, 440px); aspect-ratio: 300 / 411; }
.nz-map > img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); opacity: .92; }
/* Label sits BESIDE the dot, not under it. Auckland and Waikato are only ~29px
   apart on this map, so a label below one dot landed underneath the next. */
/* Dots only. Size distinguishes main centres from smaller ones; colour
   distinguishes entry type, matching the legend in .activity-key. */
.pulse { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid #fff; box-shadow: 0 6px 18px rgb(0 0 0 / .28); }
.pulse.big { width: 18px; height: 18px; }
.pulse.sm { width: 11px; height: 11px; border-width: 2.5px; }
.pulse.free { background: #ef3f38; }
.pulse.social { background: #34c26a; }
.pulse.spend { background: #3d8bfd; }
.pulse:before, .pulse:after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid currentColor; animation: mapPulse 2.6s ease-out infinite;
}
.pulse.sm:before, .pulse.sm:after { inset: -5px; }
.pulse:after { animation-delay: 1.3s; }
.pulse.free { color: rgb(255 98 90 / .8); }
.pulse.social { color: rgb(72 214 128 / .8); }
.pulse.spend { color: rgb(120 174 255 / .8); }
/* Stagger so they do not all breathe in lockstep. */
.p-tauranga:before { animation-delay: .4s; } .p-rotorua:before { animation-delay: .9s; }
.p-napier:before { animation-delay: 1.4s; } .p-newplymouth:before { animation-delay: .2s; } .p-hamilton:before { animation-delay: 1.5s; }
.p-palmerston:before { animation-delay: 1.1s; } .p-whangarei:before { animation-delay: .7s; }
.p-nelson:before { animation-delay: 1.6s; } .p-queenstown:before { animation-delay: .5s; }
.p-dunedin:before { animation-delay: 1.9s; } .p-invercargill:before { animation-delay: 1.2s; }

/* Percentages of the 300x436 viewBox, straight out of the same projection that
   drew the coastline. assets/check.py point-in-polygons every one of them. */
.p-auckland { left: 66.57%; top: 20.14%; }
.p-whangarei { left: 63.30%; top: 12.60%; }
.p-tauranga { left: 76.97%; top: 25.83%; }
.p-hamilton { left: 70.40%; top: 26.51%; }
.p-rotorua { left: 77.57%; top: 28.92%; }
.p-newplymouth { left: 61.53%; top: 35.25%; }
.p-napier { left: 82.50%; top: 38.24%; }
.p-palmerston { left: 72.83%; top: 44.30%; }
.p-wellington { left: 66.70%; top: 50.99%; }
.p-nelson { left: 55.63%; top: 50.84%; }
.p-christchurch { left: 50.90%; top: 67.33%; }
.p-queenstown { left: 21.53%; top: 78.62%; }
.p-dunedin { left: 35.10%; top: 85.06%; }
.p-invercargill { left: 19.23%; top: 89.27%; }

.activity-note { position: absolute; right: 2%; bottom: 3%; display: grid; gap: 3px; padding: 15px 18px; border: 1px solid rgb(255 255 255 / .18); border-radius: 16px; background: rgb(255 255 255 / .1); backdrop-filter: blur(14px); }
.activity-note strong { font-size: 13px; }
.activity-note small { color: rgb(255 255 255 / .65); font-size: 10px; }
.activity-key { display: grid; gap: 5px; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgb(255 255 255 / .16); }
.activity-key span { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 600; color: rgb(255 255 255 / .82); }
.activity-key .k-ic {
  width: 21px; height: 21px; flex: none;
  display: grid; place-items: center; border-radius: 7px;
}
.activity-key .k-ic svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.activity-key .k-free { background: #ef3f38; }
.activity-key .k-social { background: #34c26a; }
.activity-key .k-spend { background: #3d8bfd; }

.value-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.value-card.visual-card, .value-card.product-card { min-height: 610px; display: grid; grid-template-rows: auto 1fr; gap: 32px; }
.value-card-copy { position: relative; z-index: 2; }
.value-card.visual-card h3, .value-card.product-card h3 { max-width: 12ch; }
.value-card.visual-card a, .value-card.product-card a { position: static; display: inline-flex; margin-top: 12px; }
.mini-feed, .compact-product { align-self: end; padding: 16px; border: 1px solid rgb(7 63 44 / .12); border-radius: 24px; background: rgb(255 255 255 / .82); box-shadow: 0 20px 45px rgb(7 63 44 / .13); }
.mini-feed { display: grid; gap: 9px; transform: rotate(-1deg); }
.mini-feed > span { min-height: 65px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.mini-feed i { font-style: normal; }
.mini-feed b { font-size: 13px; }
.mini-feed em { color: var(--green-deep); font: 700 18px var(--display); font-style: normal; }
.compact-product { color: var(--ink); }
.compact-product .search-demo { min-height: 72px; }
.compact-product .result-demo article { min-height: 62px; }
.nz-mark img { width: 70%; height: 70%; object-fit: contain; filter: brightness(0) invert(1); opacity: .9; }

@keyframes mapPulse { 0% { opacity: .8; transform: scale(.5); } 75%, 100% { opacity: 0; transform: scale(2.1); } }
@keyframes freshPulse { 0%, 100% { transform: scale(.88); } 50% { transform: scale(1.08); } }

@media (max-width: 1120px) {
  .hero { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(54px, 8.5vw, 86px); }
  .hero-giveaways { min-height: 500px; }
  .trending-section { grid-template-columns: 1fr; }
  .trending-copy h2 { max-width: 14ch; }
  .nz-activity { min-height: 620px; }
  .value-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .hero h1 { font-size: clamp(44px, 12.5vw, 60px); }
  .hero h1 span { white-space: normal; }
  .hero-giveaways { min-height: 435px; }
  .giveaway-window { padding: 12px; border-radius: 23px; }
  .giveaway-preview { min-height: 78px; padding: 10px; }
  .giveaway-preview > b { font-size: 17px; }
  .fresh-pin { right: -5px; bottom: -8px; }
  .trending-section { min-height: auto; grid-template-columns: 1fr; padding: 58px 22px; border-radius: 27px; }
  .trending-copy h2 { font-size: 47px; }
  .nz-activity { min-height: 500px; }
  .value-card.visual-card, .value-card.product-card { min-height: 560px; }
}

@media (prefers-reduced-motion: reduce) {
  .pulse i:before, .pulse i:after, .fresh-pin i { animation: none; }
}

/* Real retailer marks replaced the initial/glyph placeholders. White ground so
   dark logos stay legible on the green panels; nominative use, same basis as
   retailerMark() in the app. */
.retailer-logo { background: #fff; box-shadow: inset 0 0 0 1px rgb(16 24 40 / .1); overflow: hidden; }
.retailer-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Footer legal links. The V1 scope calls for concise privacy, terms and
   source/disclaimer pages before real testers are invited. */
.footer-legal { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer-legal a { font-size: 13.5px; font-weight: 600; opacity: .78; text-decoration: none; }
.footer-legal a:hover { opacity: 1; text-decoration: underline; }


/* Nav links move to the app's typography: the display face stays for
   headlines and eyebrows, navigation reads in the product voice. */
.nav-links a {
  font-family: inherit;
  font-style: normal;
  font-weight: 650;
  font-size: 14.5px;
  letter-spacing: -.01em;
  text-transform: none;
}


/* FAQ as a single column: side-by-side, one open answer stretched the row
   and made its neighbour look open too. One line for the heading. */
.faq-list { grid-template-columns: 1fr; max-width: 860px; }
.faq-section .section-heading h2 { font-size: clamp(32px, 3.6vw, 56px); white-space: nowrap; }
@media (max-width: 640px) {
  .faq-section .section-heading h2 { white-space: normal; }
}

/* Landing nav picks up the app nav's cursor-following gloss, so the two
   headers behave identically, not just look alike. */
.nav-links a { --gx: 50%; --gy: 50%; }
.nav-links a:hover, .nav-links a.active {
  background:
    radial-gradient(110px circle at var(--gx) var(--gy), rgb(255 255 255 / .28), transparent 68%),
    linear-gradient(135deg, rgb(255 255 255 / .2), rgb(255 255 255 / .08));
}


/* FAQ block sits centred in its section. */
.faq-section .section-heading { margin-left: auto; margin-right: auto; text-align: center; }
.faq-list { margin-left: auto; margin-right: auto; }

/* Landing nav weight locked to a loaded face (600), same as the app nav —
   650 left each browser to round to a different neighbour. */
.nav-links a { font-weight: 600; }