:root {
  --honey: #FFF8E1;
  --cream: #FFFDF5;
  --pale: #FFF4C2;
  --yellow: #FFC907;
  --ink: #111111;
  --amber: #b48900;
  --grey: #666666;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
/* Page now uses a min-height flex column so the black "how it works"
   section (which doubles as the footer, 12 Sep) is pushed to the true
   bottom of the viewport on short-content pages, instead of floating
   wherever the content happens to end. .wrap-flex-grow below lets the
   hero content take up the remaining space above it. */
body {
  margin: 0;
  background: var(--honey);
  color: var(--ink);
  font-family: 'Nunito', 'Trebuchet MS', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
h1, h2, h3, .display { font-family: 'Baloo 2', 'Trebuchet MS', sans-serif; }
a { color: var(--ink); }
a:hover { color: var(--amber); }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
/* The top-level content wrapper on index.html grows to fill available
   height, leaving .how to sit flush at the very bottom of the page. */
body > div.wrap { flex: 1; }

/* nav */
nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
}
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.logo span { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 22px; color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: 24px; font-weight: 700; font-size: 15px; }
.nav-links a { text-decoration: none; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--yellow); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 999px;
  min-height: 52px; padding: 0 28px;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 17px;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer; text-decoration: none;
  transition: transform 0.1s, box-shadow 0.1s;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); color: var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.ghost { background: #fff; box-shadow: none; font-size: 14px; min-height: 44px; }

/* hero */
.hero { display: flex; gap: 48px; align-items: center; padding: 28px 0 48px; }
.hero-copy { flex: 1.1; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.pill { background: var(--pale); border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 800; }
/* "You've been invited by X" banner — only shown (via [hidden] removal in
   app.js) when a valid ?ref= code resolves. Sits at the top of the hero
   copy so it reads as a personalized addition, not a rewrite of the page.
   Amber left-border ties it to the entry-chip/amber accent language used
   elsewhere rather than competing with the yellow CTA. Starts with the
   [hidden] attribute (in index.html), which reserves zero layout space —
   nothing to see until app.js has real content for it, no intermediate
   loading state. Vertical padding trimmed from 12px to 8px (12 Sep) to
   tighten the banner without touching its horizontal padding or border.
   Now a flex row (12 Sep) so the emoji can sit as its own centered column
   beside the two-line text block, instead of inline within the text. */
.referred-banner {
  background: #fff; border: 2px solid var(--ink); border-left: 6px solid var(--amber);
  border-radius: 14px; padding: 8px 16px; font-size: 14px; font-weight: 600;
  line-height: 1.5; max-width: 520px;
  display: flex; align-items: center; gap: 12px;
}
/* BUG FIX (12 Sep, round 3 — the real one): an explicit `display` value in
   an author stylesheet always wins over the `[hidden]` attribute's default
   UA-stylesheet behaviour (which only sets display:none). Because this
   rule set display:flex unconditionally, the banner rendered as an empty
   flex box on every load regardless of the hidden attribute or any JS —
   that's the "empty white pill" that kept appearing with no ?ref= present.
   This explicit override restores hidden's expected behaviour. */
.referred-banner[hidden] { display: none; }
.referred-banner b { font-family: 'Baloo 2', sans-serif; font-weight: 800; }
/* Leading confetti emoji: its own flex item (not inline text) so it can be
   vertically centered against the full two-line block beside it rather
   than sitting on just the first line. Sized well above the 14px body text
   (12 Sep: enlarged again, from 20px to 34px) so it reads as a graphic
   anchor for the whole banner, not a small inline flourish. */
.banner-emoji { font-size: 34px; line-height: 1; flex: none; }
.banner-text { flex: 1; }
.hero h1 { margin: 0; font-weight: 800; font-size: clamp(38px, 6vw, 64px); line-height: 1.2; }
/* The highlight span needs its own line-height distinct from the h1's,
   plus vertical padding — otherwise the yellow background box has zero
   breathing room above/below the glyphs and visually collides with the
   line above it (bug: "Win a" looked crowded against "100% Free."). The
   negative margin compensates so the box doesn't push the line further
   down than a plain text line would. */
.hero h1 .hl { background: var(--yellow); border-radius: 12px; padding: 4px 10px; display: inline-block; line-height: 1.25; margin-top: 4px; }
.hero p { margin: 0; font-size: 18px; font-weight: 600; color: #444; line-height: 1.55; max-width: 520px; }
/* Brand non-affiliation disclaimer, styled as its own bordered info banner
   (rather than bare fine print) so it reads as a distinct, official notice
   — sits right after the CTA, since the trust-badge row it used to follow
   has been removed entirely. Pale background + amber-on-cream icon circle
   borrow the same visual language as .referred-banner / .callout elsewhere
   on the site rather than inventing a new pattern. */
.prize-brand-disclaimer {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--pale); border: 2px solid var(--ink); border-radius: 14px;
  padding: 12px 16px; max-width: 520px;
}
.disclaimer-icon {
  flex: none; width: 20px; height: 20px; border-radius: 999px;
  background: var(--amber); color: #fff; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  margin-top: 1px;
}
.prize-brand-disclaimer p { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.55; color: #555; }

/* prize card */
.prize-card {
  flex: 0.9; background: #fff; border: 3px solid var(--ink); border-radius: 26px;
  padding: 26px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: 8px 8px 0 var(--yellow);
}
.prize-img { width: 100%; height: 220px; background: var(--pale); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 76px; }
/* Brand logo replacing the generic gift emoji when the prize is a named
   product (e.g. GrabGifts vouchers). The source SVG has significant
   transparent padding baked into its own viewBox, so max-width/max-height
   alone (previous approach) capped against that oversized canvas rather
   than the visible wordmark — it looked small no matter how high the caps
   went. Forcing width/height to 100% of the sized .prize-img container +
   object-fit: contain makes the visible mark itself scale to actually fill
   the space, with a small padding so it doesn't touch the rounded corners. */
.prize-img-logo { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.prize-card h2 { margin: 0; font-size: 24px; font-weight: 800; }
.prize-meta { font-size: 14px; font-weight: 600; color: var(--grey); }
/* 3-tier prize breakdown, laid out as 3 equal-width columns side by side
   rather than stacked rows, so all three read as one connected unit at a
   glance instead of a vertical list. Each column stacks its own medal
   emoji above the amount. Medal emoji carry the rank distinction, so all
   three columns share identical cream styling rather than singling one
   out with a border/highlight. Both emoji and amount are sized up together
   (30px / 20px) so the tier is legible as the card's headline content,
   not an afterthought below the hero image. */
.prize-tiers { display: flex; gap: 8px; }
.tier-col {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--cream); border-radius: 12px; padding: 14px 8px;
}
.tier-label { font-size: 30px; line-height: 1; }
.tier-amount { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 20px; }
.countdown { display: flex; gap: 10px; }
.count-box { flex: 1; background: var(--cream); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.count-box b { font-size: 20px; font-weight: 800; }
.count-box small { font-size: 11px; font-weight: 700; color: #999; }
/* Caption clarifying what the countdown numbers mean — without it, a bare
   grid of days/hrs/min/sec doesn't say what's closing. Centered, quiet
   grey so it reads as a label for the boxes above rather than competing
   with them. */
.countdown-caption { text-align: center; font-size: 12px; font-weight: 700; color: #999; margin-top: -8px; }

/* how strip — now doubles as the page footer (12 Sep): T&Cs / Privacy links
   were merged in from the old standalone <footer>, and body's flex-column
   layout above keeps this pinned to the true bottom of the viewport on
   short pages rather than floating above whitespace. */
.how { background: var(--ink); color: #fff; padding: 26px 0; }
/* Stacked layout: title on its own row, each step below it on its own row
   — matches the vertical rhythm of steps 2/3 in the old 3-step version,
   rather than having the title awkwardly inline with step 1. */
.how-inner { display: flex; flex-direction: column; gap: 18px; }
.how h3 { margin: 0; color: var(--yellow); font-size: 18px; font-weight: 800; }
/* ALIGNMENT (12 Sep, round 2): all three step icons (two numbered circles +
   the shield) are fixed-size 30x30 boxes with their own internal
   align-items:center/justify-content:center — so each icon is already
   centered on itself regardless of icon type. Keeping .step on
   align-items:center means every icon aligns to the vertical midpoint of
   its row's text, whether that text is one line (steps 1–2) or wraps to
   two (step 3) — exactly matching the numbered circles' behaviour rather
   than introducing separate alignment rules for the shield. */
.step { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }
.step b { width: 30px; height: 30px; background: var(--yellow); color: var(--ink); border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex: none; }
/* FORCED FIX (12 Sep, round 4 — the real one): the 🐝 emoji GLYPH ITSELF
   has taller intrinsic font metrics than surrounding Latin text — this is
   a property of the emoji font, not something container line-height rules
   can fully override, which is why rounds 2 and 3 (container-level fixes)
   didn't fully resolve it. Wrapping the emoji in its own inline-block span
   with a hard-capped height/line-height/font-size forces the BROWSER to
   clip/scale its box to that fixed size, overriding the glyph's natural
   (taller) footprint, so it can no longer inflate the row's line height. */
.step-bee-emoji {
  display: inline-block;
  height: 1em;
  line-height: 1;
  font-size: 1em;
  overflow: hidden;
  vertical-align: middle;
}
/* Trust statement's shield marker: plain filled shield shape with no circle
   badge behind it — background/padding removed so only the SVG shows, but
   the surrounding box is still the identical 30x30 flex-centered footprint
   as the numbered circles (width/height inherited from .step b above), so
   sizing and centering both match #1/#2 exactly. */
.step b.step-emoji { background: transparent; padding: 0; }
/* Inline SVGs default to vertical-align:baseline, which reserves a few px
   of descender space below the shape and can nudge it slightly off from
   the numbered circles' true center — removing that keeps the shield
   perfectly level inside its 30x30 box. */
.step-emoji svg { display: block; }
/* Footer links merged into the how-it-works section (12 Sep) — same
   bee-yellow accent as the section heading and step numbers, so they read
   as part of this block rather than a separate grey footer. */
.how-footer-links { display: flex; gap: 20px; margin-top: 4px; }
.how-footer-links a { color: var(--yellow); font-size: 13px; font-weight: 700; text-decoration: none; }
.how-footer-links a:hover { color: #fff; }

/* entered page */
.center-col { max-width: 480px; margin: 0 auto; padding: 10px 20px 40px; display: flex; flex-direction: column; gap: 18px; }
.entries-card { background: var(--ink); border-radius: 20px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; }
.entries-card span { color: #fff; font-weight: 700; font-size: 14px; }
.entries-card b { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 34px; color: var(--yellow); }
/* Loading placeholder for the entry count: shown only until real data (cached or fetched)
   arrives, so we never flash a fabricated number like "1" for a returning participant. */
.entries-card b.loading-pulse { opacity: 0.45; animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.7; } }
/* Whole boost card is tappable — cursor + a subtle press affordance so it
   reads as one big button, not just the small icon on the right. */
.boost {
  border: 2px solid var(--ink); border-radius: 16px; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px; background: #fff;
  cursor: pointer; transition: transform 0.1s, box-shadow 0.1s;
}
.boost:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--ink); }
.boost:active { transform: translate(1px, 1px); box-shadow: none; }
.boost.done { cursor: default; }
.boost.done:hover { transform: none; box-shadow: none; }
.boost-icon { width: 40px; height: 40px; background: var(--pale); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.boost-copy { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.boost-copy b { font-size: 14px; font-weight: 800; }
.boost-copy small { font-size: 12px; font-weight: 600; color: var(--grey); }
/* Emphasized "+x entry/entries" chip — the actual incentive, so it gets bee-yellow + bold treatment rather than reading as fine print. */
.entry-chip {
  display: inline-block; align-self: flex-start;
  background: var(--yellow); color: var(--ink);
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 13px;
  border-radius: 999px; padding: 2px 10px; border: 1.5px solid var(--ink);
}
/* Right-hand marker: empty (no chip, no icon) until the boost is done, at
   which point it shows the tick only. Since the whole card is now the tap
   target, this no longer needs its own button chrome. */
.boost-btn {
  width: 0; height: 0; padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  flex: none; pointer-events: none;
}
.boost-btn.done { width: 24px; height: 24px; }
/* Icon-only variant (share button): always shows its glyph (arrow, swapping
   to tick briefly on copy) — same footprint as the done-tick so the two
   icons read as one visual language. */
.boost-btn.icon-only { width: 24px; height: 24px; pointer-events: none; }

/* legal pages */
.legal { max-width: 760px; margin: 0 auto; padding: 20px 20px 60px; }
.legal h1 { font-size: 34px; }
.legal h2 { font-size: 20px; margin-top: 32px; }
.legal p, .legal li { font-size: 15px; font-weight: 500; line-height: 1.7; color: #333; }
.callout { background: var(--pale); border: 2px solid var(--ink); border-radius: 14px; padding: 14px 18px; font-weight: 600; }

footer { padding: 26px 0 34px; display: flex; justify-content: center; gap: 20px; font-size: 12px; font-weight: 600; color: #999; }
footer a { color: #999; }

/* confetti */
.confetti { position: fixed; top: -12px; border-radius: 2px; pointer-events: none; z-index: 999; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); opacity: 0.9; } }

@media (max-width: 800px) {
  .hero { flex-direction: column; padding-top: 12px; }
  /* Reorder on mobile: prize card sits right below the headline; disclaimer
     banner now comes right after the CTA row since the trust badges and
     no-payment line (both removed) no longer sit between them. */
  .hero-copy { display: contents; }
  .referred-banner { order: 1; width: 100%; }
  .hero h1 { order: 2; }
  .prize-card { order: 3; width: 100%; }
  .cta-row { order: 4; }
  .prize-brand-disclaimer { order: 5; width: 100%; }
  .nav-links a.textlink { display: none; }
}