/* ============================================================
   Lead forms: survey.html + contact.html (2026-10-04)
   These pages used to iframe the old app (shopease-web). They are
   now built into the site and post straight to shopease-api.
   Mobile first. Uses the tokens from styles.css.
   ============================================================ */

body{display:flex;flex-direction:column;min-height:100vh}

/* ---- intro band + stage (same shape the iframe pages had) ---- */
.survey-intro{background:#08251A;background:var(--green-deep);color:#FBF8F1;color:var(--cream);padding:30px 0 26px}
.survey-intro .eyebrow{color:var(--gold-soft);margin-bottom:.5rem}
.survey-intro h1{font-size:clamp(1.9rem,3.6vw,2.7rem);color:var(--cream)}
.survey-intro h1 em{color:var(--gold-soft)}
.survey-intro p{color:rgba(251,248,241,.82);max-width:54ch;margin-top:.5rem;font-size:1.02rem}
/* Real freezer photo in the intro band (2026-10-04): a short band under the
   words on a phone, beside them from 860px. */
.survey-intro-photo{width:100%;aspect-ratio:16/7;object-fit:cover;object-position:50% 45%;border-radius:var(--radius);margin-top:18px;background:var(--green)}
@media (min-width:860px){
  .survey-intro-in{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:40px;align-items:center}
  .survey-intro-photo{aspect-ratio:4/3;margin-top:0}
}
.survey-stage{flex:1;background:var(--cream-deep);padding:22px 0 40px}
.survey-foot{text-align:center;color:var(--ink-faint);font-size:.9rem;margin-top:18px}
.survey-foot a{color:var(--green-soft);font-weight:700}
.wrap.fm-wrap{padding:0 16px}

/* ---- the card ---- */
.fm-card{
  max-width:680px;margin:0 auto;background:var(--white);
  border-radius:var(--radius);box-shadow:var(--shadow-lift);
  padding:22px 18px 22px;scroll-margin-top:90px;
}
@media (min-width:560px){ .fm-card{padding:30px 32px 28px;border-radius:var(--radius-lg)} .wrap.fm-wrap{padding:0 26px} }
.fm-card [hidden]{display:none !important}
.fm-h2{font-family:var(--serif);font-size:1.6rem;font-weight:600;color:var(--green-deep);margin:0 0 .6rem;line-height:1.2}
.fm-h2:focus{outline:none}
.fm-caption{font-size:.95rem;color:var(--ink-soft);margin:0 0 1.1rem;line-height:1.5}

/* ---- progress ---- */
.fm-progress{margin-bottom:20px}
.fm-progress-track{background:var(--cream-deep);border-radius:999px;height:7px;overflow:hidden}
.fm-progress-bar{background:var(--gold);height:100%;width:0;transition:width .25s var(--ease)}
.fm-step-count{font-size:.82rem;color:var(--ink-faint);margin-top:6px;font-weight:600}

/* ---- "how this works" box ---- */
.fm-intro{background:var(--cream);border:1.5px solid var(--gold);border-radius:14px;padding:16px 18px;margin-bottom:22px}
.fm-intro-t{font-size:1rem;font-weight:800;color:var(--green-deep);margin-bottom:8px}
.fm-intro ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:.95rem;line-height:1.5;color:var(--ink)}
.fm-intro b{color:var(--green-deep)}
.fm-intro-note{font-size:.9rem;color:var(--ink-soft);margin-top:10px;line-height:1.55;font-style:italic}

/* ---- fields ---- */
.fm-grid2{display:grid;grid-template-columns:1fr;gap:0 12px}
@media (min-width:560px){ .fm-grid2{grid-template-columns:1fr 1fr} }
.fm-field{display:flex;flex-direction:column;gap:7px;margin:0 0 16px;border:0;padding:0;min-width:0}
.fm-lbl,.fm-field legend{font-size:.95rem;font-weight:600;color:var(--ink);padding:0;line-height:1.4}
.fm-field legend{margin-bottom:8px}
.fm-req{color:#a32d2d}
.fm-sublabel{font-size:.88rem;color:var(--ink-soft);margin:-2px 0 6px}
.fm-input{
  font:inherit;font-size:16px;color:var(--ink);background:var(--white);width:100%;
  border:1px solid rgba(8,37,26,.24);border-radius:10px;padding:12px 13px;line-height:1.4;
}
.fm-input:focus{outline:none;border-color:var(--green-soft);box-shadow:0 0 0 3px rgba(30,106,72,.18)}
textarea.fm-input{resize:vertical;min-height:110px}
.fm-divider{height:1px;background:rgba(8,37,26,.12);margin:6px 0 16px}

/* ---- pills: real radio buttons, drawn as pills ---- */
.fm-pills{display:flex;flex-wrap:wrap;gap:8px}
.fm-pill{position:relative;display:inline-flex}
.fm-pill input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.fm-pill span{
  display:inline-block;font-size:.95rem;font-weight:600;color:var(--ink-soft);background:var(--white);
  border:1.5px solid rgba(8,37,26,.18);border-radius:999px;padding:9px 16px;cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;line-height:1.3;
}
.fm-pill span:hover{border-color:var(--green-soft)}
.fm-pill input:checked + span{background:var(--green-deep);border-color:var(--green-deep);color:var(--cream)}
.fm-pill input:focus-visible + span{outline:3px solid var(--gold);outline-offset:2px}
.fm-pills.sm .fm-pill span{font-size:.9rem;padding:7px 13px}

/* ---- radio + checkbox cards ---- */
.fm-stack{display:flex;flex-direction:column;gap:8px}
.fm-opt{
  display:flex;align-items:flex-start;gap:11px;font-size:.98rem;color:var(--ink);line-height:1.4;
  border:1.5px solid rgba(8,37,26,.14);border-radius:12px;padding:12px 14px;cursor:pointer;
  transition:border-color .12s,background .12s;background:var(--white);
}
.fm-opt:hover{border-color:var(--green-soft)}
.fm-opt input{margin-top:2px;width:19px;height:19px;accent-color:var(--green-deep);flex:0 0 auto}
.fm-opt input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.fm-opt.on{border-color:var(--green-deep);background:#F1F6F2}
.fm-cg{margin:0 0 18px;border:0;padding:0;min-width:0}
.fm-cg legend{font-size:.95rem;font-weight:700;color:var(--ink);margin-bottom:9px;padding:0}
.fm-cg-grid{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:560px){ .fm-cg-grid{grid-template-columns:1fr 1fr} }
.fm-cg-grid .fm-opt{font-size:.95rem;padding:11px 13px}
.fm-cg-empty{font-size:.9rem;color:var(--ink-faint)}
/* One real photo per food section (2026-10-04). Lazy: the steps they sit in
   are hidden until reached, so none load with the page. */
.fm-photo{width:100%;aspect-ratio:5/2;object-fit:cover;border-radius:12px;margin:0 0 14px;background:var(--cream-deep)}
.fm-done-photo{width:100%;max-width:420px;aspect-ratio:16/9;object-fit:cover;border-radius:12px;margin:0 auto 22px}
.fm-pack{color:var(--ink-soft);font-size:.86rem}

/* ---- consent ---- */
.fm-consent-head{font-size:.95rem;font-weight:700;margin-bottom:10px}
.fm-check{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;color:var(--ink);line-height:1.5;margin-bottom:12px;cursor:pointer}
.fm-check input{margin-top:3px;width:19px;height:19px;accent-color:var(--green-deep);flex:0 0 auto}
.fm-check input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.fm-fine{font-size:.82rem;color:var(--ink-soft);line-height:1.5;margin:2px 0 4px}

/* ---- notes + errors ---- */
.fm-warn{background:var(--cream-warm);color:#6b4f0f;border:1px solid #ecd9a6;border-radius:10px;padding:10px 13px;font-size:.9rem;margin:8px 0 12px;line-height:1.5}
.fm-warn.soft{background:#F1F6F2;color:var(--ink);border-color:rgba(8,37,26,.15)}
.fm-err{background:#fbe9e7;color:#8f2020;border:1px solid rgba(163,45,45,.25);border-radius:10px;padding:10px 13px;font-size:.92rem;font-weight:500;margin:14px 0 4px}

/* ---- recommendation + review (step 7) ---- */
.fm-rec{background:linear-gradient(135deg,var(--green-deep) 0%,var(--green-mid) 100%);color:var(--cream);padding:22px 22px;border-radius:var(--radius);margin-bottom:20px}
.fm-rec-eyebrow{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);font-weight:800}
.fm-rec-size{font-family:var(--serif);font-size:1.9rem;font-weight:600;margin:6px 0;color:var(--cream);line-height:1.15}
.fm-rec-rat{font-size:.95rem;opacity:.92;line-height:1.5}
.fm-rec-stats{margin-top:14px;display:flex;gap:28px;flex-wrap:wrap}
.fm-rec-k{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.fm-rec-v{font-size:1.15rem;font-weight:700;margin-top:2px}
.fm-rec-fine{font-size:.82rem;opacity:.8;margin-top:12px;line-height:1.5}
.fm-review{background:var(--cream);border:1px solid #ecd9a6;border-radius:12px;padding:4px 16px;margin:0}
.fm-review div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid rgba(8,37,26,.07);font-size:.95rem}
.fm-review div:last-child{border-bottom:none}
.fm-review dt{color:var(--ink-soft)}
.fm-review dd{font-weight:600;color:var(--ink);text-align:right;margin:0;overflow-wrap:anywhere}
.fm-final{font-size:.9rem;color:var(--ink-soft);margin-top:14px;line-height:1.5}

/* ---- step nav ---- */
.fm-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(8,37,26,.1)}
.fm-btn{
  font:inherit;font-size:1rem;font-weight:700;border-radius:999px;padding:13px 24px;cursor:pointer;
  border:1.6px solid var(--green-deep);background:var(--green-deep);color:var(--cream);
  transition:background .15s,transform .15s;min-height:48px;
}
.fm-btn:hover:not(:disabled){background:var(--green-soft);border-color:var(--green-soft)}
.fm-btn:disabled{opacity:.45;cursor:not-allowed}
.fm-btn:focus-visible,.fm-btn-ghost:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.fm-btn.next::after{content:"\00a0\2192"}
.fm-btn-ghost{
  font:inherit;font-size:.95rem;font-weight:600;border-radius:999px;padding:12px 20px;cursor:pointer;
  border:1.6px solid rgba(8,37,26,.25);background:var(--white);color:var(--ink-soft);min-height:48px;
}
.fm-btn-ghost::before{content:"\2190\00a0"}
.fm-btn-ghost:hover:not(:disabled){border-color:var(--green-deep);color:var(--green-deep)}
.fm-btn-block{width:100%;margin-top:14px}

/* ---- thank-you ---- */
.fm-done{background:var(--green-deep);color:var(--cream);padding:40px 24px;border-radius:var(--radius);text-align:center}
.fm-done:focus{outline:none}
.fm-done-t{font-family:var(--serif);font-size:1.9rem;font-weight:600;margin-bottom:12px;color:var(--cream)}
.fm-done-s{font-size:1.02rem;opacity:.94;max-width:44ch;margin:0 auto;line-height:1.6}
.fm-done-s b{color:var(--gold-soft)}
.fm-done-ref{margin-top:18px;font-size:.95rem;opacity:.9}
.fm-done-foot{margin-top:30px;font-size:.85rem;opacity:.78;line-height:1.6}
.fm-done-check{font-size:2.4rem;line-height:1;margin-bottom:10px;color:var(--gold-soft)}

.fm-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (prefers-reduced-motion: reduce){
  .fm-progress-bar,.fm-btn,.fm-pill span,.fm-opt{transition:none}
}