/* =========================================================================
   B&B NJ PRO — quiz funnel
   Mobile-first. Every screen fits one 360x640 viewport with no scrolling
   except the town list, which is a filtered picker and has to scroll.
   ========================================================================= */

:root{
  --burgundy:#3E0100;
  --gold:#C9A961;
  --gold-dk:#A8873F;
  --cream:#F6F1E7;
  --ink:#1A1A1A;
  --white:#FFFFFF;
  --line:rgba(62,1,0,.12);
  --radius:14px;
  --tap:56px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--cream);
  color:var(--ink);
  font:400 16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
       "Helvetica Neue",Arial,sans-serif;
  overscroll-behavior:none;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
button{font:inherit;color:inherit;}

/* 100vh is a lie in mobile Safari — the toolbar overlaps it. */
.app{
  min-height:100vh;
  min-height:100dvh;
  height:100vh;
  height:100dvh;      /* pin: otherwise the 71-town list grows the page */
  display:flex;
  flex-direction:column;
  max-width:560px;
  margin:0 auto;
  padding:0 18px calc(14px + env(safe-area-inset-bottom));
}

/* ---- top bar ----------------------------------------------------------- */
.bar{
  display:flex;align-items:center;gap:12px;
  padding:calc(14px + env(safe-area-inset-top)) 0 14px;
}
.bar[hidden]{display:none;}
.back{
  flex:none;width:56px;height:56px;margin-left:-16px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:999px;color:var(--burgundy);cursor:pointer;
}
.back[hidden]{display:none;}          /* [hidden] loses to display:flex */
.back:active{background:rgba(62,1,0,.07);}
.progress{display:flex;gap:5px;flex:1;}
.seg{
  flex:1;height:5px;border-radius:999px;
  background:rgba(62,1,0,.15);
  transition:background .3s ease;
}
.seg.on{background:var(--gold);}

/* ---- stage ------------------------------------------------------------- */
.stage{flex:1;display:flex;flex-direction:column;min-height:0;
  overflow-y:auto;overflow-x:hidden;   /* the 16px slide must not scroll sideways */
  -webkit-overflow-scrolling:touch;}
.step,.offer,.done,.contact{display:flex;flex-direction:column;flex:1;min-height:0;}

.qsub{
  margin:-12px 0 18px;
  font-size:15px;line-height:1.4;color:#5C5651;
}
.q{
  margin:6px 0 20px;
  font-size:28px;line-height:1.15;font-weight:600;
  color:var(--burgundy);
  letter-spacing:-.01em;
}

/* ---- image + text choice cards ---------------------------------------- */
.grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  align-content:start;
}
.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;padding:0;cursor:pointer;text-align:left;
  min-height:var(--tap);
  transition:border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
/* Eight cards means four rows, so the photo aspect has to step with the
   screen or the grid overflows. Measured: 1:1 needs ~900px of height;
   390x844 overflowed by 102px until this was added. */
.card .shot{display:block;aspect-ratio:1/1;overflow:hidden;background:#EDE6D8;}
@media (max-height:900px){ .card .shot{aspect-ratio:4/3;} }
.card .shot img{width:100%;height:100%;object-fit:cover;}
.card .lab{
  display:flex;align-items:center;
  min-height:46px;height:calc(2 * 1.2em + 20px);   /* two lines, always, so
    a label that wraps cannot make its card taller than the one beside it */
  padding:10px 12px;font-size:16px;font-weight:600;line-height:1.2;
  color:var(--burgundy);
}
/* The two text answers sit side by side in the last row, closing the grid at
   2x3. They are deliberately NOT full width: a full-width bar would make the
   two vaguest answers the largest targets on the screen, and size reads as
   permission. Available, not advertised. */
.card.text{justify-content:center;min-height:64px;}
.card.text .lab{min-height:48px;height:auto;justify-content:center;text-align:center;}
.card.wide{grid-column:1 / -1;}   /* still available if a step needs it */
.card:active{transform:scale(.985);}
.card.sel{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold);}

/* ---- plain option rows -------------------------------------------------- */
.list{display:flex;flex-direction:column;gap:12px;}
.row{
  display:flex;flex-direction:column;gap:3px;
  min-height:var(--tap);
  padding:14px 16px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  text-align:left;cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.row:active{transform:scale(.99);}
.row.sel{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold);}
.rl{font-size:17px;font-weight:600;color:var(--burgundy);}
.rn{font-size:15px;color:#5C5651;}
.band{font-size:15px;font-weight:600;color:var(--gold-dk);margin-top:2px;}

/* ---- town picker -------------------------------------------------------- */
.town{display:flex;flex-direction:column;min-height:0;flex:1;gap:12px;}
.search{
  width:100%;min-height:var(--tap);
  padding:14px 16px;font-size:16px;              /* under 16px iOS zooms */
  background:var(--white);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);
}
.search:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,169,97,.28);}
.towns{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;gap:8px;padding-bottom:4px;
}
.towns[hidden]{display:none;}
.townBtn{
  flex:none;min-height:50px;
  padding:13px 16px;text-align:left;
  background:var(--white);border:1px solid var(--line);
  border-radius:11px;font-size:16px;font-weight:500;color:var(--burgundy);cursor:pointer;
}
.townBtn.sel{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold);}
.townBtn.other{color:#5C5651;font-weight:600;}
.otherWrap{display:flex;flex-direction:column;gap:12px;}
.otherWrap[hidden]{display:none;}     /* [hidden] loses to display:flex */
.err[hidden]{display:none;}
.go{
  min-height:var(--tap);border:0;border-radius:var(--radius);
  background:var(--gold);color:var(--burgundy);
  font-size:17px;font-weight:700;cursor:pointer;
}

/* ---- the offer interstitial -------------------------------------------- */
.offer{justify-content:center;gap:26px;padding:8px 0 4px;}
.oh{
  margin:0;font-size:28px;line-height:1.15;font-weight:600;color:var(--burgundy);
  letter-spacing:-.01em;
}
.stack{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px;}
.stack li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.4;}
.stack b{color:var(--burgundy);}
.tick{
  flex:none;width:26px;height:26px;border-radius:999px;
  background:var(--gold);color:var(--burgundy);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;margin-top:1px;
}

/* ---- contact ------------------------------------------------------------ */
.lead{margin:0 0 18px;font-size:16px;line-height:1.45;color:#3B3733;}
.lead b{color:var(--burgundy);}
.f{display:flex;flex-direction:column;gap:12px;flex:1;}
.fld{
  width:100%;min-height:var(--tap);
  padding:14px 16px;font-size:16px;
  background:var(--white);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);
}
.fld:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,169,97,.28);}
.fld::placeholder{color:#8C8681;}
.pledge{
  display:flex;align-items:flex-start;gap:11px;
  min-height:var(--tap);padding:13px 15px;margin-top:2px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  font-size:15px;line-height:1.35;color:#3B3733;cursor:pointer;
}
.pledge input{
  flex:none;width:22px;height:22px;margin:0;accent-color:var(--gold);cursor:pointer;
}
.pledge b{color:var(--burgundy);}
.pledge:has(input:checked){border-color:var(--gold);box-shadow:0 0 0 2px var(--gold);}
.err{margin:2px 0 0;font-size:15px;font-weight:600;color:#9B1B0E;}
.fine{margin:10px 0 0;font-size:13px;color:#6B6560;text-align:center;}

/* ---- primary button ----------------------------------------------------- */
.cta{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:var(--tap);
  margin-top:auto;
  border:0;border-radius:var(--radius);
  background:var(--gold);color:var(--burgundy);
  font-size:17px;font-weight:700;letter-spacing:.01em;
  cursor:pointer;text-decoration:none;
  box-shadow:0 8px 22px rgba(62,1,0,.10);
}
.cta:active{transform:translateY(1px);}
.cta:disabled{opacity:.65;}
.offer .cta{margin-top:8px;}

/* ---- thank you ---------------------------------------------------------- */
.done{justify-content:center;text-align:center;gap:20px;}
.tickBig{
  width:76px;height:76px;border-radius:999px;margin:0 auto;
  background:var(--gold);color:var(--burgundy);
  display:flex;align-items:center;justify-content:center;
  font-size:38px;font-weight:700;
}
.dh{margin:0;font-size:27px;line-height:1.2;font-weight:600;color:var(--burgundy);}
.done .cta{margin-top:4px;font-size:18px;}
.next{margin:0;font-size:15px;line-height:1.5;color:#3B3733;text-align:left;}
.next b{color:var(--burgundy);}

/* ---- footer ------------------------------------------------------------- */
.legal[hidden]{display:none;}
.legal{
  padding:14px 0 2px;
  font-size:12px;line-height:1.4;text-align:center;
  color:rgba(62,1,0,.60);
}

/* ---- transitions -------------------------------------------------------- */
@keyframes slideIn{from{opacity:0;transform:translateX(16px);}to{opacity:1;transform:none;}}
@keyframes slideBack{from{opacity:0;transform:translateX(-16px);}to{opacity:1;transform:none;}}
.in{animation:slideIn .18s ease-out both;}
.inBack{animation:slideBack .18s ease-out both;}
.noanim{animation:none;}

@media (prefers-reduced-motion:reduce){
  .in,.inBack{animation:none;}
  *{transition:none !important;}
}

/* ---- taller phones and small tablets ------------------------------------ */
@media (min-height:760px){
  .q,.oh{font-size:30px;}
  .grid{gap:14px;}
}
@media (max-width:340px){
  .q,.oh{font-size:24px;}
  .card .lab{font-size:15px;padding:9px 10px;}
}


/* ---- short viewports (the spec's 360x640 target) ------------------------
   Six choice cards with 1:1 images and a two-line headline need ~584px of
   grid on a 360px column; a 640px screen leaves about 450 after the bar,
   headline and footer. The photographs get a 3:2 crop here and the labels
   tighten, which brings step 1 inside the viewport with no scrolling. */
@media (max-height:700px){
  .bar{padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:8px;}
  .back{width:48px;height:48px;margin-left:-12px;}
  .q,.oh{font-size:22px;margin-bottom:12px;}
  .qsub{margin:-10px 0 12px;font-size:14px;}
  .grid{gap:8px;}
  /* eight cards = four rows. 3:2 photos no longer fit a 640px screen. */
  .card .shot{aspect-ratio:16/9;}
  .card .lab{min-height:34px;height:calc(2 * 1.12em + 12px);
             padding:6px 9px;font-size:14.5px;line-height:1.12;}
  .card.text{min-height:56px;}
  .card.text .lab{min-height:40px;height:auto;}
  .list{gap:9px;}
  .row{padding:11px 14px;min-height:52px;}
  .rl{font-size:16px;}
  .rn,.band{font-size:14px;}
  .offer{gap:16px;}
  .stack{gap:13px;}
  .stack li{font-size:15px;}
  .lead{margin-bottom:12px;font-size:15px;}
  .f{gap:10px;}
  .pledge{padding:11px 13px;font-size:14px;min-height:50px;}
  .dh{font-size:23px;}
  .tickBig{width:60px;height:60px;font-size:30px;}
  .next{font-size:14px;}
  .legal[hidden]{display:none;}
.legal{padding:10px 0 2px;font-size:11px;}
}