/* GRS giveaway entry (/giveaway). Same palette + face as /style.css.
   HARD RULES: square corners everywhere, no pills, no circles behind text.
   Selected answer = sea glass fill, white text. */
:root{
  --navy:#115976; --navy-deep:#0b3d52; --navy-ink:#082c3b;
  --seaglass:#61A8A4; --sand:#F0DBC4; --white:#fff;
  --font:"Jost","Futura Std","Futura",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{font-family:var(--font);background:var(--navy-ink);color:var(--white);line-height:1.4;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100svh}
button,input{font:inherit;color:inherit}
a,button{-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}

/* ---------- background ---------- */
.bg{position:fixed;top:0;left:0;width:100%;height:100lvh;z-index:0;overflow:hidden}
.bg__poster,.bg__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bg__poster{transform:scale(1.06);animation:drift 18s var(--ease) forwards}
.bg__video{opacity:0;transition:opacity 1.2s ease}
.bg.is-playing .bg__video{opacity:1}
.bg__scrim{position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(8,44,59,.78) 0%,rgba(8,44,59,.55) 30%,rgba(8,44,59,.74) 60%,rgba(8,44,59,.95) 100%),
    rgba(17,89,118,.18)}
@keyframes drift{to{transform:scale(1)}}

/* ---------- shell ---------- */
.gw{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;max-width:520px;margin:0 auto;
  padding:calc(14px + var(--safe-t)) 20px calc(22px + var(--safe-b))}
.top__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:44px}
.logo{justify-self:center}
.logo img{width:96px;height:auto;filter:drop-shadow(0 4px 18px rgba(4,26,36,.45))}
.back{justify-self:start;display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:10px 8px 10px 0;cursor:pointer;
  font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.back:hover{color:#fff}
.back.off{visibility:hidden}
.count{justify-self:end;font-size:12px;font-weight:600;letter-spacing:.2em;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}
.prog{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:14px}
.prog i{display:block;height:3px;background:rgba(255,255,255,.22);position:relative;overflow:hidden}
.prog i::after{content:"";position:absolute;inset:0;background:var(--seaglass);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.prog i.on::after{transform:scaleX(1)}
.gw[data-step="5"] .prog,.gw[data-step="5"] .count{visibility:hidden}

/* ---------- steps ---------- */
.stage{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding-top:28px}
.step{display:flex;flex-direction:column}
.step.enter{animation:stepin .5s var(--ease) both}
.step.enter-back{animation:stepback .5s var(--ease) both}
@keyframes stepin{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes stepback{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
.kicker{font-size:12px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--seaglass)}
.q{font-size:clamp(30px,8.6vw,42px);line-height:1.02;font-weight:700;letter-spacing:.01em;text-transform:uppercase;margin:10px 0 26px;
  text-shadow:0 2px 22px rgba(4,26,36,.45);text-wrap:balance}

.opts{display:grid;gap:10px}
.opt{display:flex;align-items:center;width:100%;min-height:64px;padding:16px 20px;border-radius:0;cursor:pointer;text-align:left;
  background:rgba(8,44,59,.38);border:1.5px solid rgba(255,255,255,.42);color:#fff;
  font-size:18px;font-weight:600;letter-spacing:.01em;line-height:1.2;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .2s,border-color .2s,transform .15s var(--ease)}
@media (hover:hover){.opt:hover{border-color:#fff;background:rgba(8,44,59,.55)}}
.opt:active{transform:scale(.985)}
.opt:focus-visible{outline:2px solid var(--sand);outline-offset:2px}
.opt[aria-checked="true"],.opt[aria-checked="true"]:hover{background:var(--seaglass);border-color:var(--seaglass);color:#fff}
.is-on .opt{animation:optin .5s var(--ease) both}
.is-on .opt:nth-child(2){animation-delay:.05s}.is-on .opt:nth-child(3){animation-delay:.1s}.is-on .opt:nth-child(4){animation-delay:.15s}
@keyframes optin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.hint{font-size:15px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.85);margin:-6px 0 14px}
.opt--multi::after{content:"";flex:none;margin-left:auto;width:22px;height:22px;border:1.5px solid rgba(255,255,255,.75);
  display:grid;place-items:center;font-size:15px;font-weight:700;line-height:1}
.opt--multi[aria-checked="true"]::after{content:"\2713";background:#fff;border-color:#fff;color:var(--seaglass)}
.go--next{margin-top:14px}
.go--next[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- form ---------- */
.form{display:grid;gap:12px}
.fld{display:block}
.fld__l{display:block;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:6px}
.fld input{width:100%;height:56px;padding:0 16px;border-radius:0;border:1.5px solid transparent;background:#fff;color:var(--navy-ink);
  font-size:18px;font-weight:500;-webkit-appearance:none;appearance:none}
.fld input:focus{outline:none;border-color:var(--seaglass);box-shadow:0 0 0 3px rgba(97,168,164,.45)}
.fld input.bad{border-color:var(--sand);box-shadow:0 0 0 3px rgba(240,219,196,.5)}
.plat{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.plat__b{min-height:52px;border-radius:0;cursor:pointer;background:rgba(8,44,59,.38);border:1.5px solid rgba(255,255,255,.42);color:#fff;
  font:inherit;font-size:16px;font-weight:600;letter-spacing:.02em;transition:background .2s,border-color .2s}
.plat__b[aria-checked="true"]{background:var(--seaglass);border-color:var(--seaglass)}
.plat__b:focus-visible{outline:2px solid var(--sand);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.chk{display:flex;align-items:center;gap:14px;cursor:pointer;padding:8px 0;min-height:48px;position:relative}
.chk input{position:absolute;opacity:0;width:1px;height:1px}
.chk__box{flex:none;width:28px;height:28px;border-radius:0;border:1.5px solid rgba(255,255,255,.75);display:grid;place-items:center;color:transparent;background:rgba(8,44,59,.38);transition:background .2s,border-color .2s}
.chk input:checked + .chk__box{background:var(--seaglass);border-color:var(--seaglass);color:#fff}
.chk input:focus-visible + .chk__box{outline:2px solid var(--sand);outline-offset:2px}
.chk.bad .chk__box{border-color:var(--sand)}
.chk__t{font-size:16px;font-weight:500}
.err{font-size:14px;font-weight:600;color:var(--sand)}
.go{width:100%;min-height:62px;border:0;border-radius:0;cursor:pointer;background:var(--sand);color:var(--navy-ink);
  font-size:18px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-top:4px;transition:transform .15s var(--ease),opacity .2s}
.go:active{transform:scale(.985)}
.go:focus-visible{outline:2px solid #fff;outline-offset:3px}
.go[disabled]{opacity:.65;cursor:progress}
.fine{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.72)}

/* ---------- done ---------- */
.step--done{padding-bottom:12vh}
.q--done{font-size:clamp(46px,14vw,72px);margin-bottom:0}
.rule{display:block;height:2px;width:0;background:var(--seaglass);margin:22px 0 20px;animation:draw 1s .25s var(--ease) forwards}
@keyframes draw{to{width:88px}}
.done__sub{font-size:19px;font-weight:500;line-height:1.45;max-width:24em;opacity:0;animation:fade .7s .5s ease forwards}
.txtlink{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:28px;padding:6px 0;color:var(--sand);
  font-size:16px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;opacity:0;animation:fade .7s .8s ease forwards}
.txtlink:hover{color:#fff}
.txtlink svg{transition:transform .25s var(--ease)}
.txtlink:hover svg{transform:translateX(3px)}
@keyframes fade{to{opacity:1}}

@media (min-width:700px){
  .stage{justify-content:center;padding-bottom:6vh}
  .logo{justify-self:center}
.logo img{width:120px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .bg__video{display:none}
}

/* Where's home: 8 regions. Two columns, shorter buttons, so all fit on a phone without scrolling. */
.opts--many{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opts--many .opt{min-height:54px;padding:12px 14px;font-size:15px;line-height:1.2}
.opts--many .opt:nth-child(-n+2){grid-column:1 / -1}
.is-on .opts--many .opt:nth-child(5){animation-delay:.2s}.is-on .opts--many .opt:nth-child(6){animation-delay:.25s}
.is-on .opts--many .opt:nth-child(7){animation-delay:.3s}.is-on .opts--many .opt:nth-child(8){animation-delay:.35s}

/* "To count, you need all 3" reminder (step 4) + Instagram button (success) */
.must{margin:-8px 0 18px;padding:12px 14px;border-left:3px solid var(--seaglass,#61A8A4);background:rgba(8,44,59,.45)}
.must__h{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--seaglass,#61A8A4);margin-bottom:6px}
.must__l{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:15px;font-weight:600}
.must__l b{display:inline-block;width:18px;color:var(--seaglass,#61A8A4)}
.done__ig{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-radius:0;
  background:var(--sand,#F0DBC4);color:var(--navy-ink,#082c3b);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:14px;text-decoration:none}
.done__fine{margin-top:10px;font-size:13px;opacity:.75}

.chk__t a{color:var(--sand,#F0DBC4);text-decoration:underline;text-underline-offset:2px}

.must__a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--sand)}
.done__ig--2{margin-top:12px}