/* =============================================================
   FIRST MOLECULE  Product Verification page
   Scoped under #fmqr. Deliberately NO Tailwind classes: the live
   theme ships a purged, pre-compiled output.css, so a new utility
   class resolves to nothing. Plain CSS only.
   Brand values measured from the logo artwork and the live site.
   ============================================================= */
:root{
  --fm-red:#C12228; --fm-red-dark:#A0151B; --fm-red-wash:#FBEDED;
  --fm-black:#000000; --fm-ink:#1E1E1E; --fm-white:#FFFFFF;
  --fm-panel:#F5F5F5; --fm-muted:#8C8C8C; --fm-line:#E5E5E5; --fm-line-dark:#2A2A2A;

  /* Result-screen colours, sampled from the live scanner */
  --v-green:#3DDC84; --v-green-deep:#0B3E2B; --v-green-deep2:#15563A;
  --v-red:#F87171;   --v-red-deep:#2B0B0B;   --v-red-deep2:#4A1013;
  --v-amber-bg:#FFFBEB; --v-amber-ink:#B45309;

  --fm-display:"Do Hyeon","Trebuchet MS",sans-serif;
  --fm-body:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --fm-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Courier New",monospace;

  /* The theme's nav is position:fixed, 76px tall, and floats over the page.
     Content below must clear it. JS re-measures this at runtime in case the
     header ever changes height. */
  --fm-header-h:76px;
}

#fmqr, #fmqr *, #fmqr *::before, #fmqr *::after{ box-sizing:border-box; }
#fmqr [hidden], .fmqr-overlay[hidden]{ display:none !important; }

/* Full-bleed: theme content sits in a centred container but the site body is
   black, so each band must reach the window edges. On an already full-width
   template, delete the margin-inline / width / max-width lines below. */
#fmqr{
  margin-inline:calc(50% - 50vw); width:100vw; max-width:100vw; overflow-x:clip;
  background:var(--fm-white); color:var(--fm-ink);
  font-family:var(--fm-body); font-size:14px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:768px){ #fmqr{ font-size:18px; } }
#fmqr p,#fmqr h1,#fmqr h2,#fmqr h3,#fmqr h4,#fmqr ul,#fmqr ol,#fmqr dl,#fmqr figure{ margin:0; }
#fmqr ul,#fmqr ol{ padding:0; list-style:none; }
#fmqr img{ max-width:100%; height:auto; display:block; }
#fmqr a{ color:var(--fm-red); text-underline-offset:.2em; }
#fmqr :focus-visible, .fmqr-overlay :focus-visible{ outline:2px solid var(--fm-red); outline-offset:3px; }

#fmqr .fm-band{
  --surface:var(--fm-white); --on-surface:var(--fm-ink);
  --on-surface-muted:#5C5C5C; --hairline:var(--fm-line);
  background:var(--surface); color:var(--on-surface);
  padding-block:clamp(3rem,8vw,80px);
}
#fmqr .fm-band--grey{ --surface:var(--fm-panel); --hairline:#DEDEDE; }
#fmqr .fm-band--black{
  --surface:var(--fm-black); --on-surface:var(--fm-white);
  --on-surface-muted:#B4B4B4; --hairline:var(--fm-line-dark);
}
#fmqr .fm-container{ max-width:1280px; margin-inline:auto; padding-inline:clamp(20px,5vw,120px); width:100%; }

#fmqr h1,#fmqr h2,#fmqr .fm-display{ font-family:var(--fm-display); font-weight:400; line-height:1.16; text-wrap:balance; }
#fmqr h1{ font-size:clamp(2rem,6vw,52px); }
#fmqr h2{ font-size:30px; }
@media (min-width:768px){ #fmqr h2{ font-size:42px; } }
#fmqr h3{ font-family:var(--fm-body); font-size:1.0625em; font-weight:700; line-height:1.4; text-wrap:balance; }
#fmqr .fm-eyebrow{ font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--fm-red); }
#fmqr .fm-band--black .fm-eyebrow{ color:#F08A8E; }
#fmqr .fm-lede{ color:var(--on-surface-muted); max-width:60ch; }
#fmqr .fm-head{ display:flex; flex-direction:column; gap:14px; margin-bottom:clamp(2rem,5vw,56px); }
#fmqr .fm-head h2{ max-width:24ch; }

/* ---------------- HERO ---------------- */
#fmqr .fm-hero{
  text-align:center;
  padding-block:calc(var(--fm-header-h,0px) + clamp(2rem,6vw,72px)) clamp(3rem,8vw,88px);
}
/* Anchor jumps must not land under the fixed header. */
#fmqr [id]{ scroll-margin-top:calc(var(--fm-header-h,0px) + 16px); }
#fmqr .fm-hero .fm-head{ margin-inline:auto; align-items:center; margin-bottom:32px; }
#fmqr .fm-hero .fm-head h2{ max-width:none; }
#fmqr .fm-hero .fm-lede{ margin-inline:auto; }
#fmqr .fm-hero h1 span{ color:var(--fm-red); }
#fmqr .fm-cta{ display:flex; flex-direction:column; align-items:center; gap:14px; }
#fmqr .fm-cta-row{ display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; justify-content:center; }
#fmqr .fm-scan{
  font-family:var(--fm-body); font-size:16px; font-weight:700; letter-spacing:.02em;
  color:#FFFFFF; background:var(--fm-red); border:2px solid var(--fm-red); border-radius:4px;
  padding:15px 30px; display:inline-flex; align-items:center; gap:12px; cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,transform .12s ease;
}
#fmqr .fm-scan svg{ width:22px; height:22px; flex:none; }
#fmqr .fm-scan:hover{ background:var(--fm-red-dark); border-color:var(--fm-red-dark); }
#fmqr .fm-scan:active{ transform:translateY(1px); }
#fmqr .fm-link{
  font-size:14px; font-weight:600; color:var(--on-surface); background:none; border:0;
  border-bottom:1px solid var(--hairline); padding:4px 0; cursor:pointer; text-decoration:none;
}
#fmqr .fm-link:hover{ color:var(--fm-red); border-bottom-color:var(--fm-red); }
#fmqr .fm-note{ font-size:13px; color:var(--on-surface-muted); }
@media (prefers-reduced-motion:reduce){ #fmqr *,.fmqr-overlay *{ transition:none !important; animation:none !important; } }

/* ------------- Printed seal, rebuilt ------------- */
#fmqr .fm-label-wrap{ margin-top:clamp(2.5rem,6vw,64px); display:flex; justify-content:center; }
#fmqr .fm-label{
  position:relative; width:100%; max-width:620px; background:var(--fm-white); color:var(--fm-ink);
  border-radius:3px; display:grid; grid-template-columns:1fr; text-align:left; overflow:hidden;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.75);
}
@media (min-width:560px){ #fmqr .fm-label{ grid-template-columns:42% 58%; } }
#fmqr .fm-label-qr{ background:var(--fm-panel); padding:26px 20px 20px; display:flex; flex-direction:column; align-items:center; gap:16px; justify-content:center; }
#fmqr .fm-label-qr svg{ width:100%; max-width:172px; height:auto; background:#FFF; padding:8px; display:block; }
#fmqr .fm-label-code{ font-family:var(--fm-mono); font-weight:700; font-size:13px; letter-spacing:.1em; text-align:center; }
#fmqr .fm-label-meta{ padding:24px 24px 18px; display:flex; flex-direction:column; align-items:center; text-align:center; }
#fmqr .fm-label-logo{ width:96px; margin-bottom:16px; }
#fmqr .fm-label-meta hr{ border:0; border-top:1px solid var(--fm-line); width:100%; margin:0; }
#fmqr .fm-label-title{ font-weight:800; font-size:22px; color:var(--fm-red); margin:16px 0 6px; line-height:1.1; }
#fmqr .fm-label-sub{ font-size:11px; font-weight:500; letter-spacing:.34em; color:var(--fm-muted); text-transform:uppercase; margin-bottom:12px; }
#fmqr .fm-label-body{ font-size:13px; line-height:1.55; margin-bottom:18px; }
#fmqr .fm-label-foot{ font-size:10.5px; color:var(--fm-muted); padding-top:12px; line-height:1.5; }
#fmqr .fm-specimen{
  position:absolute; top:10px; right:-34px; transform:rotate(38deg); background:var(--fm-red);
  color:#FFF; font-size:10px; font-weight:800; letter-spacing:.2em; padding:4px 40px;
}

/* ---------------- Result screen mock-ups ---------------- */
#fmqr .fm-screens{ display:grid; grid-template-columns:1fr; gap:clamp(28px,5vw,48px); justify-items:center; }
@media (min-width:820px){ #fmqr .fm-screens{ grid-template-columns:1fr 1fr; align-items:start; } }
#fmqr .fm-screen{ width:100%; max-width:340px; display:flex; flex-direction:column; gap:16px; }
#fmqr .fm-phone{
  background:#FFFFFF; border:1px solid #D8D8D8; border-radius:14px; overflow:hidden;
  box-shadow:0 18px 44px -26px rgba(0,0,0,.45);
}
#fmqr .fm-vbar{ display:flex; align-items:center; gap:9px; padding:11px 12px; background:#FFF; border-bottom:1px solid #EEE; }
#fmqr .fm-vbar img{ width:30px; flex:none; }
#fmqr .fm-vbar-sep{ width:1px; align-self:stretch; background:#E2E2E2; flex:none; }
#fmqr .fm-vbar span{ font-size:8.5px; font-weight:700; letter-spacing:.08em; color:#7A7A7A; line-height:1.3; text-transform:uppercase; }
#fmqr .fm-vbar .fm-vbar-r{ margin-left:auto; display:flex; align-items:center; gap:5px; }
#fmqr .fm-vbar svg{ width:11px; height:11px; color:#9A9A9A; flex:none; }
#fmqr .fm-vbody{ background:#F2F3F5; padding:14px; }
#fmqr .fm-vcard{ border-radius:13px; overflow:hidden; }
#fmqr .fm-vtop{ padding:26px 20px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:7px; border-top:4px solid; }
#fmqr .fm-vshield{ width:62px; height:62px; margin-bottom:5px; }
#fmqr .fm-vstatus{ font-size:10px; font-weight:800; letter-spacing:.2em; }
#fmqr .fm-vtop h4{ font-family:var(--fm-body); font-size:19px; font-weight:800; line-height:1.22; color:#FFF; margin:0; text-wrap:balance; }
#fmqr .fm-vtop p{ font-size:11.5px; line-height:1.5; margin:0; }
#fmqr .fm-vbot{ background:#FFF; padding:18px 15px; display:flex; flex-direction:column; gap:12px; }
#fmqr .fm-vinfo{ background:#F5F5F5; border-left:4px solid; padding:13px 14px; font-size:13.5px; font-weight:600; line-height:1.45; color:#1E1E1E; }
#fmqr .fm-vpill{
  display:inline-flex; align-items:center; gap:6px; align-self:center; background:var(--v-amber-bg);
  color:var(--v-amber-ink); font-size:11px; font-weight:700; padding:7px 14px; border-radius:99px; margin-top:4px;
}
#fmqr .fm-vpill svg{ width:12px; height:12px; flex:none; }
#fmqr .fm-vtodo{ background:#FEF2F2; padding:13px 14px; border-radius:6px; }
#fmqr .fm-vtodo b{ display:block; font-size:10px; font-weight:800; letter-spacing:.16em; color:#B91C1C; margin-bottom:5px; }
#fmqr .fm-vtodo p{ font-size:11.5px; line-height:1.5; color:#B4494A; margin:0; }
/* the two states */
#fmqr .fm-v--ok .fm-vtop{ background:linear-gradient(170deg,var(--v-green-deep2),var(--v-green-deep)); border-top-color:var(--v-green); }
#fmqr .fm-v--ok .fm-vstatus{ color:var(--v-green); }
#fmqr .fm-v--ok .fm-vtop p{ color:#9CC4B0; }
#fmqr .fm-v--ok .fm-vinfo{ border-left-color:#22C55E; }
#fmqr .fm-v--dup .fm-vtop{ background:linear-gradient(170deg,var(--v-red-deep2),var(--v-red-deep)); border-top-color:#E23B3B; }
#fmqr .fm-v--dup .fm-vstatus{ color:var(--v-red); }
#fmqr .fm-v--dup .fm-vtop p{ color:#C09A9A; }
#fmqr .fm-v--dup .fm-vinfo{ border-left-color:#E23B3B; }
#fmqr .fm-screen-cap{ display:flex; flex-direction:column; gap:6px; }
#fmqr .fm-screen-cap b{ font-size:15px; font-weight:800; }
#fmqr .fm-screen-cap .ok{ color:#15803D; }
#fmqr .fm-screen-cap .dup{ color:var(--fm-red); }
#fmqr .fm-screen-cap p{ font-size:14px; color:var(--on-surface-muted); }

/* ---------------- Steps / guard / spec / faq ---------------- */
#fmqr .fm-steps{ display:grid; grid-template-columns:1fr; }
@media (min-width:860px){ #fmqr .fm-steps{ grid-template-columns:repeat(3,1fr); } }
#fmqr .fm-step{ padding:26px 0; border-top:2px solid var(--fm-red); display:flex; flex-direction:column; gap:10px; }
@media (min-width:860px){
  #fmqr .fm-step{ padding-right:clamp(16px,3vw,40px); }
  #fmqr .fm-step + .fm-step{ padding-left:clamp(16px,3vw,40px); }
}
#fmqr .fm-step-n{ font-family:var(--fm-display); font-size:34px; line-height:1; color:var(--fm-red); font-variant-numeric:tabular-nums; }
#fmqr .fm-step p{ color:var(--on-surface-muted); font-size:15px; }

#fmqr .fm-guard{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,56px); align-items:start; }
@media (min-width:900px){ #fmqr .fm-guard{ grid-template-columns:.95fr 1.05fr; } }
#fmqr .fm-guard-list{ display:grid; gap:22px; }
#fmqr .fm-guard-list li{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; }
#fmqr .fm-guard-list svg{ width:22px; height:22px; color:var(--fm-red); margin-top:3px; flex:none; }
#fmqr .fm-guard-list p{ color:var(--on-surface-muted); font-size:14.5px; margin-top:2px; }

#fmqr .fm-spec{ display:grid; grid-template-columns:1fr; border-top:1px solid var(--hairline); }
@media (min-width:640px){ #fmqr .fm-spec{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ #fmqr .fm-spec{ grid-template-columns:repeat(3,1fr); } }
#fmqr .fm-spec li{ padding:22px clamp(0px,3vw,36px) 22px 0; border-bottom:1px solid var(--hairline); display:flex; flex-direction:column; gap:6px; }
#fmqr .fm-spec p{ color:var(--on-surface-muted); font-size:14px; }

#fmqr .fm-faq{ border-top:1px solid var(--hairline); max-width:80ch; }
#fmqr .fm-faq details{ border-bottom:1px solid var(--hairline); }
#fmqr .fm-faq summary{ cursor:pointer; list-style:none; padding:20px 40px 20px 0; font-weight:700; font-size:1.0625em; position:relative; }
#fmqr .fm-faq summary::-webkit-details-marker{ display:none; }
#fmqr .fm-faq summary::after{ content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-family:var(--fm-mono); font-size:22px; color:var(--fm-red); line-height:1; }
#fmqr .fm-faq details[open] summary::after{ content:"\2212"; }
#fmqr .fm-faq details p{ padding:0 0 22px; color:var(--on-surface-muted); max-width:64ch; font-size:15px; }

#fmqr .fm-close{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px; }
#fmqr .fm-close p{ color:var(--on-surface-muted); max-width:52ch; }

/* ---------------- Desktop hand-off ---------------- */
#fmqr .fm-handoff{
  border:1px solid var(--hairline); border-top:4px solid var(--fm-red); background:var(--fm-white);
  padding:clamp(20px,4vw,36px); display:grid; gap:clamp(20px,4vw,36px); grid-template-columns:1fr; align-items:center;
}
@media (min-width:720px){ #fmqr .fm-handoff{ grid-template-columns:auto 1fr; } }
#fmqr .fm-qr-tile{ background:#FFF; border:1px solid var(--fm-line); padding:14px; width:200px; height:200px; display:grid; place-items:center; margin-inline:auto; }
#fmqr .fm-qr-tile img,#fmqr .fm-qr-tile canvas{ max-width:100%; height:auto; }
#fmqr .fm-qr-fallback{ font-family:var(--fm-mono); font-size:11px; text-align:center; word-break:break-all; }
#fmqr .fm-handoff-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; min-width:0; }
#fmqr .fm-handoff-copy h3{ font-family:var(--fm-display); font-weight:400; font-size:26px; line-height:1.2; }
#fmqr .fm-handoff-copy p{ color:#5C5C5C; max-width:54ch; font-size:15px; }
#fmqr .fm-handoff-close{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--fm-muted); background:none; border:0; padding:4px 0; cursor:pointer; }
#fmqr .fm-handoff-close:hover{ color:var(--fm-red); }

/* ---------------- Live scanner overlay ---------------- */
.fmqr-overlay{
  position:fixed; inset:0; z-index:99999; background:#0A0A0A; color:#FFF;
  font-family:var(--fm-body); display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
.fmqr-overlay header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; flex:none; }
.fmqr-overlay header b{ font-size:14px; font-weight:700; letter-spacing:.02em; }
.fmqr-overlay .fmqr-x{ background:none; border:1px solid #3A3A3A; color:#FFF; border-radius:4px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:8px 14px; cursor:pointer; }
.fmqr-overlay .fmqr-x:hover{ border-color:var(--fm-red); color:#FF8A8F; }
.fmqr-stage{ position:relative; flex:1 1 auto; min-height:0; display:grid; place-items:center; overflow:hidden; background:#000; }
.fmqr-stage video{ width:100%; height:100%; object-fit:cover; display:block; }
.fmqr-reticle{ position:absolute; width:min(68vw,270px); aspect-ratio:1/1; pointer-events:none; }
.fmqr-reticle i{ position:absolute; width:34px; height:34px; border:3px solid var(--fm-red); }
.fmqr-reticle i:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0; }
.fmqr-reticle i:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0; }
.fmqr-reticle i:nth-child(3){ bottom:0; left:0; border-right:0; border-top:0; }
.fmqr-reticle i:nth-child(4){ bottom:0; right:0; border-left:0; border-top:0; }
.fmqr-foot{ flex:none; padding:16px 20px calc(20px + env(safe-area-inset-bottom,0px)); text-align:center; font-size:13.5px; color:#BDBDBD; line-height:1.5; }
.fmqr-msg{ padding:26px 22px; max-width:440px; margin:auto; text-align:center; display:flex; flex-direction:column; gap:14px; align-items:center; }
.fmqr-msg h4{ font-size:19px; font-weight:800; margin:0; }
.fmqr-msg p{ font-size:14px; color:#BDBDBD; margin:0; line-height:1.6; }
.fmqr-msg code{ font-family:var(--fm-mono); font-size:12px; background:#1C1C1C; border:1px solid #333; padding:9px 11px; word-break:break-all; display:block; width:100%; color:#E0E0E0; }
.fmqr-msg .fmqr-bad{ color:#FF8A8F; font-weight:800; letter-spacing:.14em; font-size:11px; text-transform:uppercase; }
.fmqr-msg button{ font-family:var(--fm-body); font-size:15px; font-weight:700; color:#FFF; background:var(--fm-red); border:0; border-radius:4px; padding:13px 26px; cursor:pointer; }