/* ==========================================================================
   NovaQuest — teaser / reveal landing page
   Palette sampled from the campaign key visual.
   ========================================================================== */

:root{
  --cream:      #FDF7EE;
  --cream-2:    #FFFBF4;
  --paper:      #FFFFFF;
  --red:        #ED1C44;
  --red-dark:   #C91434;
  --blue:       #1073BA;
  --blue-dark:  #0B5A93;
  --ink:        #3F3E3D;
  --ink-soft:   #6E6B67;
  --line:       rgba(63,62,61,.14);
  --grid:       rgba(63,62,61,.085);
  --whatsapp:   #25D366;

  --radius:     22px;
  --radius-sm:  14px;
  --shadow:     0 18px 40px -22px rgba(63,62,61,.45);
  --shadow-lg:  0 30px 60px -30px rgba(63,62,61,.55);

  --font:       "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ta:    "Baloo Thambi 2", "Noto Sans Tamil", var(--font);

  --pad:        clamp(18px, 5vw, 40px);
  --maxw:       1140px;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,p,figure,ul,fieldset{ margin:0; }
ul{ padding:0; list-style:none; }
fieldset{ border:0; padding:0; min-width:0; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:var(--blue); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 12px 0;
}
.skip:focus{ left:0; }

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--blue);
  outline-offset:2px;
  border-radius:8px;
}

/* ---------- brand background ---------- */
.bg-grid{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(180deg,#000 0 92%, transparent);
}
.blob{
  position:fixed; z-index:-1; pointer-events:none; border-radius:50%;
  filter:saturate(1.05);
}
.blob--red{
  width:44vw; height:44vw; max-width:340px; max-height:340px;
  top:-24vw; right:-20vw;
  background:var(--red);
}
.blob--blue{
  width:52vw; height:52vw; max-width:400px; max-height:400px;
  bottom:-26vw; left:-24vw;
  background:var(--blue);
}
@media (min-width:900px){
  .bg-grid{ background-size:64px 64px; }
  .blob--red{ top:-170px; right:-120px; }
  .blob--blue{ bottom:-210px; left:-190px; }
}

/* ---------- opening tap ---------- */
.gate{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  background:var(--cream);
}
/* `display:grid` above outranks the browser's [hidden]{display:none}, so say it
   explicitly — without this the panel shows even when the markup says hidden. */
.gate[hidden]{ display:none; }
.gate__go{
  -webkit-appearance:none; appearance:none;
  border:0; background:none; cursor:pointer;
  font:inherit; color:var(--ink);
  font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.6rem, 7vw, 2.6rem);
  padding:24px 32px;
  animation:gateBreathe 2.6s ease-in-out infinite;
}
.gate__go:focus-visible{ outline:2px solid var(--blue); outline-offset:6px; border-radius:14px; }
@keyframes gateBreathe{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }
.gate.is-going{ animation:gateOut .4s ease both; pointer-events:none; }
@keyframes gateOut{ from{ opacity:1 } to{ opacity:0; visibility:hidden } }
@media (prefers-reduced-motion: reduce){
  .gate__go{ animation:none; opacity:1; }
}

/* ---------- film hero (v2 only) ----------
   The corrected cut carries a real alpha channel, so the section keeps the
   page's own background and the grid and blobs run straight through the film
   instead of stopping at its edge. */
.film{
  /* No background of its own. The cut carries a real alpha channel, so the
     page's grid and blobs must show through it — an opaque panel here covers
     the very layer the transparency exists to reveal. */
  display:flex; flex-direction:column; align-items:center;
  padding:0 var(--pad);
}
.film__vid{
  display:block; width:100%; height:auto;
  max-width:560px;          /* the section is already padded — vw units here
                               add to that padding and push past the viewport */
  max-height:86vh;
}
/* the wide cut is 16:9, so it should use the column, not the portrait cap */
@media (min-width:820px){
  .film__vid{ max-width:var(--maxw); max-height:80vh; }
  margin:0 auto;
}
.film__under{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  width:100%;
  padding:22px 0 clamp(24px,5vw,44px);
}

/* the poster holds the finished artwork until the visitor asks for it */
.film__stage{ position:relative; width:100%; display:flex; justify-content:center; }
.film__start{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  width:100%; max-width:520px; margin:18px auto 0;
  padding:15px 22px; border:0; border-radius:999px; cursor:pointer;
  background:var(--red); color:#fff;
  font:inherit; font-weight:800; font-size:clamp(.88rem,3.2vw,1.02rem); line-height:1.3;
  letter-spacing:-.01em; text-align:left;
  box-shadow:0 14px 30px -14px rgba(237,28,68,.9);
  transition:transform .15s ease, box-shadow .15s ease;
}
.film__start__play{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.22); display:grid; place-items:center;
}
.film__start__text{ text-wrap:balance; }
/* display:inline-flex above outranks the browser's [hidden]{display:none}, so
   say it explicitly — otherwise hiding the button in JS does nothing. */
.film__start[hidden]{ display:none; }
.film__start:active{ transform:translateY(1px); }
@media (hover:hover){ .film__start:hover{ box-shadow:0 18px 36px -14px rgba(237,28,68,1); } }
.film__start:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ .film__start{ transition:none; } }

/* ---------- opening question (v2) ----------
   Transparent on purpose: the cream, the grid and the blobs are fixed layers
   behind everything, so leaving this see-through keeps the brand background
   while the page's own content stays hidden. */
.gate{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  padding:24px;
}
.gate[hidden]{ display:none; }
body.is-gated > header.site-head,
body.is-gated > main,
body.is-gated > footer{ visibility:hidden; }
/* The hidden content still occupies its full height, so without this the page
   scrolls and a swipe lands the visitor in a long blank nothing — on a phone
   that reads as a broken page, not as a door they are meant to open. */
body.is-gated{ overflow:hidden; height:100vh; }
.gate__ask{
  display:inline-flex; align-items:center; gap:14px;
  max-width:min(760px, 92vw);
  padding:20px 30px; border:0; border-radius:999px; cursor:pointer;
  background:var(--red); color:#fff;
  font:inherit; font-weight:800; letter-spacing:-.015em;
  font-size:clamp(1rem, 3.6vw, 1.5rem); line-height:1.28; text-align:left;
  box-shadow:0 22px 48px -18px rgba(237,28,68,.95);
  animation:gateBreathe 3.2s ease-in-out infinite;
}
.gate__ask__text{ text-wrap:balance; }
.gate__play{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.22); display:grid; place-items:center;
}
.gate__ask:active{ transform:translateY(1px); }
.gate__ask:focus-visible{ outline:3px solid var(--blue); outline-offset:5px; }
@keyframes gateBreathe{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.022) } }
.gate.is-going{ animation:gateOut .4s ease both; pointer-events:none; }
@keyframes gateOut{ from{ opacity:1 } to{ opacity:0; visibility:hidden } }
@media (prefers-reduced-motion: reduce){
  .gate__ask{ animation:none; }
  .gate.is-going{ animation:none; opacity:0; visibility:hidden; }
}

/* ---------- header ---------- */
.site-head{
  max-width:var(--maxw); margin:0 auto;
  padding:18px var(--pad) 0;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;
}
.brand{ min-width:0; }
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brand__mark{
  width:34px; height:34px; border-radius:50%;
  background:var(--blue); color:var(--cream);
  display:grid; place-items:center;
  font-weight:800; font-size:20px; line-height:1; padding-bottom:2px;
}
.brand__name{ font-weight:800; letter-spacing:-.02em; font-size:1.06rem; }
.pill{
  font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:7px 13px; border-radius:999px;
  border:1.5px solid var(--line); color:var(--ink-soft); background:var(--paper);
}
.pill--live{ border-color:var(--red); color:var(--red); background:var(--paper); }

/* ---------- sound toggle ---------- */
.head-right{ display:flex; align-items:center; gap:10px; min-width:0; flex-wrap:wrap; justify-content:flex-end; }

.sound{
  width:38px; height:38px; flex:0 0 38px;
  display:grid; place-items:center;
  border-radius:50%; cursor:pointer;
  border:1.5px solid var(--line); background:var(--paper); color:var(--ink-soft);
  padding:0; -webkit-tap-highlight-color:transparent;
  transition:border-color .18s ease, color .18s ease, transform .18s ease;
  position:relative;
}
/* display:grid above outranks [hidden]{display:none} — without this the toggle
   shows even on browsers that cannot play the audio at all */
.sound[hidden]{ display:none; }
/* the visible circle is 38px; this pads the tap target out to 44px */
.sound::before{ content:""; position:absolute; inset:-3px; border-radius:50%; }
.sound:hover{ color:var(--ink); border-color:var(--ink-soft); }
.sound:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
.sound:active{ transform:scale(.94); }
.sound.is-on{ border-color:var(--blue); color:var(--blue); }

/* muted speaker (default) / equaliser bars (playing) */
.sound__bars{ display:none; align-items:flex-end; gap:2.5px; height:15px; }
.sound__bars i{
  display:block; width:2.5px; border-radius:2px; background:currentColor;
  height:5px; animation:nq-eq .9s ease-in-out infinite;
}
.sound__bars i:nth-child(2){ animation-delay:.18s }
.sound__bars i:nth-child(3){ animation-delay:.36s }
.sound__bars i:nth-child(4){ animation-delay:.54s }
@keyframes nq-eq{ 0%,100%{ height:4px } 50%{ height:14px } }

.sound.is-on .sound__bars{ display:flex; }
.sound.is-on .sound__off{ display:none; }
.sound__off{ display:grid; place-items:center; }

/* Sound could not start on its own, so point at the button — quietly. A soft
   ring breathing out a few times, not a flashing badge. It stops on its own,
   and disappears the moment the track starts. */
.sound.is-hint{ border-color:rgba(16,115,186,.42); color:var(--blue); }
.sound.is-hint::after{
  content:""; position:absolute; inset:-1px;
  border-radius:50%; border:1.5px solid var(--blue);
  opacity:0; pointer-events:none;
  animation:nq-ring 2.8s ease-out 6;
}
@keyframes nq-ring{
  0%  { transform:scale(1);    opacity:.42 }
  60% { transform:scale(1.45); opacity:0 }
  100%{ transform:scale(1.45); opacity:0 }
}

@media (prefers-reduced-motion: reduce){
  .hero__art{ animation:none; }
  .sound__bars i{ animation:none; height:9px; }
  .sound.is-hint::after{ animation:none; opacity:0; }
  .sound:active{ transform:none; }
}

/* ---------- animated headlines ----------
   The words stay in the DOM and keep their layout box; the artwork is laid over
   the top, so switching between them never moves anything on the page. */
.has-art{ position:relative; }
.has-art .head-text{ transition:opacity .25s ease; }
.has-art.art-on .head-text{ opacity:0; }          /* invisible, still readable by AT */
.head-art{
  position:absolute; left:0; top:0;
  display:none; pointer-events:none;
}
.has-art.art-on .head-art{ display:block; }
.head-art__img,
.head-art__vid{
  display:block; width:100%; height:auto;
  opacity:0; transition:opacity .2s ease;
}
.head-art__vid{ position:absolute; inset:0; height:100%; }
.has-art.art-playing .head-art__vid{ opacity:1; }
.has-art.art-rest    .head-art__img{ opacity:1; }
.has-art.art-rest    .head-art__vid{ opacity:0; }

/* ---------- hero ---------- */
.hero{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(14px,4vw,34px) var(--pad) clamp(30px,7vw,54px);
  display:grid; gap:clamp(14px,4vw,28px);
}
.hero__art{
  position:relative;
  width:min(68vw, 300px);
  margin:0 auto 0 -4vw;
  animation:float 7s ease-in-out infinite;
  filter:drop-shadow(14px 22px 22px rgba(63,62,61,.28));
}
/* The intro clip sits exactly on top of the still — same crop, same grade, so
   its last frame lands on the still's pixels and the hand-off is invisible. */
.hero__art picture{ display:block; transition:opacity .3s ease; }
.hero__vid{
  position:absolute; inset:0 auto auto 0;
  width:100%; height:auto;
  opacity:0; transition:opacity .3s ease;
  pointer-events:none;
}
.hero__art.is-motion .hero__vid{ opacity:1; }
.hero__art.is-motion picture{ opacity:0; }
/* the clip carries its own movement; the idle float waits its turn */
.hero__art.is-intro{ animation:none; }
/* used for the one-frame swap back to the still, which must not cross-fade */
.hero__art.no-x picture,
.hero__art.no-x .hero__vid{ transition:none; }
@keyframes float{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%    { transform:translateY(-12px) rotate(-2deg); }
}
.eyebrow{
  font-weight:800; font-size:.86rem; letter-spacing:.04em;
  color:var(--blue); margin-bottom:10px;
}
.eyebrow b{ color:var(--red); }
.eyebrow--live{ color:var(--red); }

.display{
  font-weight:800;
  font-size:clamp(2.9rem, 15vw, 5.4rem);
  line-height:.95;
  letter-spacing:-.035em;
  color:var(--ink);
}
.nowrap{ white-space:nowrap; }
.qmark{ color:var(--red); margin-left:.06em; }

.tamil{
  font-family:var(--font-ta);
  font-weight:800;
  font-size:clamp(1.9rem, 9.5vw, 3.4rem);
  line-height:1.35;
  color:var(--red);
  text-shadow:.055em .05em 0 var(--blue);
  margin:.34em 0 .28em;
}
.lede{
  font-size:clamp(1rem,4.1vw,1.18rem);
  color:var(--ink-soft);
  max-width:34ch;
}
.lede b{ color:var(--ink); }

.cta-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }

@media (min-width:820px){
  .hero{
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    align-items:center;
    padding-top:clamp(20px,4vw,50px);
  }
  .hero__art{ width:min(42vw,460px); margin:0; grid-column:1; }
  .hero__copy{ grid-column:2; }
  .lede{ max-width:40ch; }
}

/* ---------- buttons ---------- */
.btn[hidden]{ display:none; }
.btn{
  --btn-bg:var(--red); --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:14px 26px;
  border:0; border-radius:999px;
  background:var(--btn-bg); color:var(--btn-fg);
  font-weight:800; font-size:1rem; letter-spacing:-.01em;
  text-decoration:none; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow:0 10px 22px -12px rgba(237,28,68,.9);
}
.btn:active{ transform:translateY(1px); }
@media (hover:hover){ .btn:hover{ transform:translateY(-2px); } }
.btn--block{ display:flex; width:100%; }
.btn--ghost{
  --btn-bg:transparent; --btn-fg:var(--ink);
  box-shadow:none; border:2px solid var(--line);
}
/* Both buttons go to WhatsApp, so this one takes the brand blue rather than the
   share button's green — same channel, clearly a different action. */
.btn--wa{
  --btn-bg:var(--blue); --btn-fg:#fff;
  box-shadow:0 10px 22px -12px rgba(16,115,186,.9);
}
.btn--text{
  --btn-bg:transparent; --btn-fg:var(--ink-soft);
  box-shadow:none; min-height:44px; font-weight:700; font-size:.94rem;
  text-decoration:underline; text-underline-offset:3px;
}
.btn[disabled], .btn.is-busy{ opacity:.6; pointer-events:none; }
.btn.is-busy .btn__label::after{
  content:""; display:inline-block; width:1em; height:1em; margin-left:.5em;
  vertical-align:-.15em; border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
[data-share]{ --btn-bg:var(--whatsapp); box-shadow:0 10px 22px -12px rgba(37,211,102,.9); }

.linkbtn{
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--blue); font-weight:700; text-decoration:underline; text-underline-offset:3px;
}
.linkbtn[disabled]{ color:var(--ink-soft); text-decoration:none; cursor:default; }

/* ---------- countdown ---------- */
.section-kicker{
  font-size:.8rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); text-align:center; margin-bottom:14px;
}
.countdown{ max-width:var(--maxw); margin:0 auto; padding:6px var(--pad) clamp(30px,7vw,50px); }
.clock{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  max-width:520px; margin:0 auto;
}
.clock__unit{
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 4px 10px; text-align:center; box-shadow:var(--shadow);
}
.clock__num{
  display:block; font-weight:800; font-size:clamp(1.7rem,7.5vw,2.5rem);
  line-height:1; letter-spacing:-.04em; color:var(--red);
  font-variant-numeric:tabular-nums;
}
.clock__label{
  display:block; margin-top:6px; font-size:.66rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
}
.clock__note{ text-align:center; margin-top:12px; font-size:.86rem; color:var(--ink-soft); font-weight:600; }

/* ---------- sign-up card ---------- */
.join{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) clamp(36px,8vw,64px); scroll-margin-top:16px; }
.card{
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:clamp(20px,5.5vw,34px);
  max-width:560px; margin:0 auto;
}
.card__title{ font-size:clamp(1.45rem,6vw,1.9rem); font-weight:800; letter-spacing:-.03em; line-height:1.1; }
.card__sub{ margin-top:8px; color:var(--ink-soft); font-size:.97rem; }
.card__sub b{ color:var(--ink); }

.step{ display:none; }
.step.is-active{ display:block; animation:stepIn .32s ease both; }
@keyframes stepIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.step form{ margin-top:20px; display:grid; gap:16px; }

.field{ display:grid; gap:7px; }
.field__label{ font-size:.84rem; font-weight:800; letter-spacing:.01em; color:var(--ink); }
.field input[type=text], .field input[type=tel], .field select, .field textarea{
  width:100%; min-height:52px; padding:13px 16px;
  font-size:16px;                        /* keeps iOS from zooming on focus */
  background:var(--cream-2);
  border:1.5px solid var(--line); border-radius:var(--radius-sm);
  transition:border-color .15s ease, background .15s ease;
}
.field textarea{ min-height:auto; resize:vertical; line-height:1.5; }
.field select{ appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E6B67' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:12px;
  padding-right:40px;
}
.field :is(input,select,textarea):focus{ background:#fff; border-color:var(--blue); }
.field-row{ display:grid; gap:16px; }
@media (min-width:460px){ .field-row{ grid-template-columns:1fr 1.35fr; } }

.phone{
  display:flex; align-items:stretch;
  background:var(--cream-2); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  overflow:hidden;
}
.phone:focus-within{ border-color:var(--blue); background:#fff; }
.phone__cc{
  display:grid; place-items:center; padding:0 14px;
  font-weight:800; color:var(--ink); background:rgba(63,62,61,.05);
  border-right:1.5px solid var(--line);
}
.phone__input{
  flex:1; min-width:0; min-height:52px; padding:13px 16px;
  font-size:17px; font-weight:700; letter-spacing:.04em;
  background:transparent; border:0;
}
.phone__input:focus{ outline:none; }
.phone:focus-within{ outline:3px solid var(--blue); outline-offset:2px; }

.field__err{ font-size:.84rem; font-weight:700; color:var(--red); }
.field.has-error :is(input,select,.phone){ border-color:var(--red); }

.check{
  display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start;
  font-size:.9rem; color:var(--ink-soft); cursor:pointer;
}
.check input{ width:22px; height:22px; margin:1px 0 0; accent-color:var(--blue); flex:none; }
.check.has-error span{ color:var(--red); }

.fineprint{ font-size:.8rem; color:var(--ink-soft); text-align:center; }

/* chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  padding:10px 15px; min-height:44px;
  background:var(--cream-2); border:1.5px solid var(--line); border-radius:999px;
  font-size:.9rem; font-weight:700; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.chip[aria-pressed="true"]{ background:var(--blue); border-color:var(--blue); color:#fff; }

/* otp */
.otp{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.otp__box{
  width:100%; min-height:58px; text-align:center;
  font-size:22px; font-weight:800;
  background:var(--cream-2); border:1.5px solid var(--line); border-radius:var(--radius-sm);
}
.otp__box:focus{ background:#fff; border-color:var(--blue); outline:3px solid rgba(16,115,186,.25); outline-offset:0; }
.otp.has-error .otp__box{ border-color:var(--red); }

/* done */
.badge-ok{
  display:inline-block; margin-bottom:10px; padding:6px 12px; border-radius:999px;
  background:rgba(16,115,186,.1); color:var(--blue);
  font-size:.78rem; font-weight:800; letter-spacing:.04em;
}
.step--done{ text-align:center; }
.step--done .btn{ margin-top:10px; }
.tick{ width:64px; height:64px; margin:0 auto 14px; }
.tick svg{ width:100%; height:100%; fill:none; stroke:var(--blue); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round; }
.tick circle{ stroke-dasharray:151; stroke-dashoffset:151; animation:draw .5s ease forwards; }
.tick path{ stroke:var(--red); stroke-dasharray:36; stroke-dashoffset:36; animation:draw .35s .4s ease forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.mini-clock{
  margin:14px 0 4px; padding:11px 14px; border-radius:var(--radius-sm);
  background:var(--cream-2); border:1.5px dashed var(--line);
  font-weight:800; font-size:.95rem; color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* ---------- clues ---------- */
.hints{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) clamp(40px,9vw,70px); scroll-margin-top:16px; }
.hint-list{ display:grid; gap:12px; max-width:900px; margin:0 auto; }
@media (min-width:820px){ .hint-list{ grid-template-columns:repeat(3,1fr); gap:16px; } }
.hint{
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:20px 20px 22px; box-shadow:var(--shadow);
}
.hint__q{
  display:grid; place-items:center; width:34px; height:34px; margin-bottom:12px;
  border-radius:50%; background:var(--red); color:#fff;
  font-weight:800; font-size:20px; line-height:1; padding-bottom:2px;
}
.hint h3{ font-size:1.1rem; font-weight:800; letter-spacing:-.02em; }
.hint p{ margin-top:6px; color:var(--ink-soft); font-size:.95rem; }
.hints__foot{ text-align:center; margin-top:18px; color:var(--ink-soft); font-size:.95rem; }

/* ---------- footer ---------- */
.site-foot{
  max-width:var(--maxw); margin:0 auto;
  padding:26px var(--pad) calc(34px + env(safe-area-inset-bottom));
  text-align:center; border-top:1.5px solid var(--line);
}
.foot__brand{ font-weight:800; letter-spacing:-.02em; font-size:1.05rem; }
.foot__meta{ margin:4px 0 10px; font-size:.9rem; color:var(--ink-soft); }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom));
  transform:translate(-50%,140%);
  z-index:60; max-width:min(92vw,420px);
  padding:13px 18px; border-radius:14px;
  background:var(--ink); color:#fff; font-size:.92rem; font-weight:600;
  box-shadow:var(--shadow-lg);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.toast.is-up{ transform:translate(-50%,0); }
.toast--bad{ background:var(--red); }

/* ---------- phase switching (teaser vs reveal) ---------- */
[data-phase]{ display:none; }
body.phase-teaser [data-phase="teaser"],
body.phase-reveal [data-phase="reveal"]{ display:revert; }
body.phase-teaser .cta-row [data-phase="teaser"],
body.phase-reveal .cta-row [data-phase="reveal"]{ display:inline-flex; }
body.phase-teaser .site-head [data-phase="teaser"],
body.phase-reveal .site-head [data-phase="reveal"]{ display:inline-block; }
body.is-loading [data-phase]{ display:none !important; }