@font-face{font-family:Inter;src:url("/fonts/inter-latin-wght.woff2") format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("/fonts/inter-latin-wght-italic.woff2") format("woff2-variations");font-weight:100 900;font-style:italic;font-display:swap}
:root{
  --ink:#f5f5f5;
  --muted:#9aa0ab;
  --bg:#1a1a1a;
  --bg-2:#111;
  --card:#242424;
  --line:#2e2e2e;
  --brand:#facc16;
  --brand-ink:#111;
  --accent:#ff3b1a;
  --ok:#9be15d;
  --bad:#f0b0b0;
  --warn:#facc16;
  --safety-bg:#26100e;
  --safety-ink:#f0c0c0;
  --display:Inter,"Helvetica Neue",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 var(--display)}
body{
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand)}
a:hover{color:#ffe056}
header,footer,main{width:min(42rem,calc(100% - 32px));margin-left:auto;margin-right:auto}
header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 0 8px}
.brand-pill{
  display:inline-flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0;
  background:var(--brand);color:var(--brand-ink);text-decoration:none;
  border-radius:12px;padding:8px 12px 8px 8px;
}
.brand-cam{width:28px;height:21px;flex-shrink:0;display:block}
.brand-pill #brand-name{
  display:block;font-size:.72rem;font-weight:800;letter-spacing:.02em;
  text-transform:uppercase;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media(max-width:420px){
  .brand-pill #brand-name{font-size:0;line-height:0}
  .brand-pill #brand-name::after{content:"FMBC";font-size:.85rem;line-height:1;letter-spacing:.04em}
}
.chips{display:flex;align-items:stretch;gap:8px;flex:0 0 auto}
.chip{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  background:#111;color:#d4d6dc;border:1px solid #333;border-radius:999px;
  padding:7px 12px;font-size:.68rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;line-height:1.15;text-align:center;white-space:normal;
}
.chip-accent{color:var(--brand)}
.chip .bolt{width:8px;height:14px;flex-shrink:0;display:block}
#allow-label,#left-label{max-width:7.2em}
main{flex:1;margin-bottom:28px}
h1,h2,h3{font-family:var(--display);color:#fff}
h1{
  font-size:clamp(2.15rem,11vw,3.4rem);font-weight:900;font-style:italic;
  letter-spacing:-.03em;line-height:.95;text-transform:uppercase;text-align:center;
  margin:22px 0 10px;
}
.lead{margin:0 0 22px;text-align:center;color:var(--muted);font-size:1.05rem;font-weight:500}
.snap-zone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:36px 20px 28px;min-height:min(58vw,280px);
  background:#0d0d0d;border:2.5px dashed var(--brand);border-radius:28px;
}
.shot,.gallery{display:block;text-align:center;cursor:pointer;text-transform:none;letter-spacing:0;font-weight:500}
.shot{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.shot input,.gallery input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.snap-tile{
  width:92px;height:92px;border-radius:26px;background:var(--brand);color:var(--brand-ink);
  display:grid;place-items:center;box-shadow:0 0 0 0 rgba(250,204,22,.45),0 8px 28px rgba(250,204,22,.2);
  animation:tile-pulse 2.8s ease-in-out infinite;
}
.shot-ico{width:52px;height:52px;display:block}
.shot-label{
  display:block;color:var(--brand);font-weight:900;font-size:1.55rem;
  letter-spacing:.02em;text-transform:uppercase;line-height:1;
}
.gallery{color:var(--muted);font-size:.95rem;font-weight:500}
.gallery span{color:var(--muted)}
.shot:hover .snap-tile,.shot:focus-within .snap-tile{
  animation:none;transform:scale(1.04);
  box-shadow:0 0 0 8px rgba(250,204,22,.16),0 10px 32px rgba(250,204,22,.35);
}
.shot:active .snap-tile{animation:none;transform:scale(.96);box-shadow:0 2px 10px rgba(250,204,22,.2)}
@keyframes tile-pulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(250,204,22,.4),0 8px 28px rgba(250,204,22,.18)}
  50%{transform:scale(1.04);box-shadow:0 0 0 10px rgba(250,204,22,.1),0 12px 36px rgba(250,204,22,.32)}
}
@media (prefers-reduced-motion:reduce){
  .snap-tile{animation:none !important}
  .shot:hover .snap-tile,.shot:focus-within .snap-tile{transform:none}
  .shot:active .snap-tile{transform:scale(.97)}
  .status.is-busy::before{animation:none}
}
.safety-callout{
  display:flex;align-items:flex-start;gap:10px;margin:16px 0 0;
  padding:14px 16px;background:var(--safety-bg);color:var(--safety-ink);
  border:1px solid #4a1c1a;border-radius:16px;font-size:.95rem;line-height:1.4;
}
.safety-callout .warn-ico{flex-shrink:0;color:var(--brand);font-size:1.15rem;line-height:1.2}
.safety-callout strong{color:#fff;font-weight:800}
#preview{display:block;max-width:100%;max-height:240px;margin:16px auto 0;border-radius:16px;background:#000}
#preview[hidden]{display:none}
.status{min-height:1.4em;margin:12px 0;color:var(--muted);font-size:.95rem;display:flex;align-items:center;gap:8px;justify-content:center;text-align:center}
.status.is-busy::before{
  content:"";width:16px;height:16px;flex-shrink:0;border:2px solid var(--brand);border-top-color:transparent;border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.panel{background:var(--bg-2);border:1px solid var(--line);border-radius:20px;padding:16px;margin:16px 0}
.callout{margin:0 0 12px;padding:12px 14px;border-radius:14px;background:#161616;border:1px solid var(--line);border-left:4px solid var(--line)}
.callout h2{margin:0 0 6px;font-size:.95rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.see{border-left-color:var(--brand)}
.steps{border-left-color:var(--ok)}
.safe{border-left-color:#e07a3a}
.warn{background:var(--safety-bg);color:var(--safety-ink);border-radius:12px;padding:10px 12px;font-weight:650}
.cta{display:block;margin:14px 0 0;padding:14px;border-radius:16px;border:1px solid var(--line);background:#161616}
.cta strong{display:block;margin-bottom:6px;font-weight:800}
.cta-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
button.primary,a.btn{
  background:var(--brand);color:var(--brand-ink);border:0;border-radius:999px;
  padding:10px 18px;font:inherit;font-weight:800;letter-spacing:.02em;
  text-decoration:none;display:inline-block;cursor:pointer;
}
button.primary:active,a.btn:active{transform:scale(.97)}
button.ghost,a.ghost{background:transparent;color:var(--ink);border:1px solid #555}
label{display:block;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:8px 0 4px}
input[type=text],input[type=email],input[type=tel],select{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid #222;
  font:inherit;background:#000;color:var(--ink)
}
input:focus,select:focus{outline:2px solid var(--brand);border-color:var(--brand)}
.check{display:flex;gap:8px;align-items:flex-start;font-weight:500;font-size:.9rem;margin:12px 0;text-transform:none;letter-spacing:0;color:var(--ink)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:grid;place-items:end center;padding:16px;z-index:20}
.modal .card{background:#1c1c1c;border:1px solid #333;border-radius:20px;padding:20px;width:min(28rem,100%)}
.modal .card h2{margin:0 0 8px;font-size:1.25rem}
footer{padding:20px 0 28px;color:var(--muted);font-size:.85rem}
footer p{margin:0 0 8px}
footer a{color:inherit;text-decoration:underline;text-underline-offset:2px}
footer a:hover{color:var(--brand)}
.foot-links{margin:0 0 10px}
.text-link{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--brand);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.fine-print{margin:8px 0 10px;border:1px solid var(--line);border-radius:12px;padding:8px 12px;background:#141414}
.fine-print summary{cursor:pointer;font-weight:700;color:var(--muted)}
.fine-print p{margin:8px 0 4px}
.install-hint{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:8px 10px 8px 12px;border:1px solid var(--line);border-radius:14px;background:#141414;font-size:.85rem;color:var(--ink)}
.install-hint[hidden]{display:none}
.install-hint p{margin:0;flex:1;line-height:1.3}
.install-hint button.primary{padding:6px 12px;font-size:.85rem;flex-shrink:0}
.install-hint .dismiss{border:0;background:transparent;color:var(--muted);font-size:1.25rem;line-height:1;cursor:pointer;padding:4px 6px}
@media (display-mode:standalone){.install-hint{display:none !important}}
.offline-banner{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:var(--safety-bg);color:var(--safety-ink);font-weight:650;font-size:.9rem}
.offline-banner[hidden]{display:none}
.pack-picks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 4px}
.pack-pick{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#111;cursor:pointer;font:inherit;text-align:left;color:inherit}
.pack-pick strong{font-size:1.05rem;font-weight:800;text-transform:uppercase}
.pack-pick .price{font-weight:800;color:var(--brand)}
.pack-pick .tag{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.pack-pick.best{border-color:var(--brand)}
.pack-pick:disabled{opacity:.7;cursor:wait}
.tiny{font-size:.8rem;color:var(--muted)}
@media(min-width:640px){
  .modal{place-items:center}
  .brand-pill #brand-name{font-size:.8rem}
  @media(min-width:640px){.brand-pill #brand-name{font-size:.8rem}.brand-pill #brand-name::after{content:none;font-size:inherit}}
}
@media(min-width:640px){
  .brand-pill #brand-name{font-size:.8rem !important;line-height:1.1 !important}
  .brand-pill #brand-name::after{content:none !important}
}