

.qr-hero{padding:120px 0 0}
.qr-stagewrap{position:relative;width:95%;max-width:none;margin:0 auto;overflow:hidden;
   border-radius:var(--r-card);background:linear-gradient(180deg,var(--dark-lift),var(--dark) 62%);
   padding:80px 24px 160px;text-align:center}

.qr-grid-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.35;
   background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
     linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
   background-size:22px 22px;

   mask-image:radial-gradient(120% 90% at 50% 40%,transparent 30%,#000 78%);
   -webkit-mask-image:radial-gradient(120% 90% at 50% 40%,transparent 30%,#000 78%)}

.qr-eye{position:absolute;z-index:1;width:72px;height:72px;border-radius:12px;
   border:5px solid rgba(255,255,255,.12);pointer-events:none}
.qr-eye::after{content:"";position:absolute;inset:12px;border-radius:4px;
   background:rgba(255,255,255,.12)}
.qr-eye--a{inset-inline-start:40px;top:40px}
.qr-eye--b{inset-inline-end:40px;top:40px}
.qr-eye--c{inset-inline-start:40px;bottom:184px}

.qr-scanline{position:absolute;z-index:1;inset-inline:0;top:0;height:180px;pointer-events:none;
   background:linear-gradient(180deg,transparent,rgba(47,108,255,.06),transparent);
   animation:qr-scan 14s linear infinite}
@keyframes qr-scan{0%{transform:translateY(-10%)}50%{transform:translateY(340%)}100%{transform:translateY(-10%)}}

.qr-hero-in{position:relative;z-index:2;max-width:var(--container-content);margin:0 auto}
.qr-brow{color:var(--tx-on-dark-2)}
.qr-h1{margin:var(--sp-4) 0 0;color:#fff}
.qr-lede{max-width:52ch;margin:var(--sp-6) auto 0;font-size:var(--fs-title);
   line-height:var(--lh-body);color:var(--tx-on-dark)}
.qr-lottie{display:block;width:min(160px,40vw);margin:var(--sp-6) auto 0}
.qr-lottie svg{display:block;width:100%;height:auto}

.qr-tool{padding:0 0 var(--sp-8)}
.qr-card{position:relative;z-index:3;margin-top:-120px;background:#fff;
   border:1px solid var(--panel);border-radius:var(--r-card);box-shadow:var(--sh-float);
   padding:var(--sp-card)}
.qr-grid{display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:start}

.qr-controls{display:grid;gap:var(--sp-6);min-width:0}
.qr-block{margin:0;padding:0;border:none;min-width:0;display:grid;gap:8px}

.qr-block[hidden]{display:none}
.qr-lab{font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);color:var(--tx-ink);padding:0}
.qr-lab--top{margin-top:8px}
.qr-chips{display:flex;flex-wrap:wrap;gap:8px}
.qr-area{height:auto;min-height:88px;border-radius:var(--r-md);padding:16px 20px;
   line-height:var(--lh-body);resize:vertical}
.qr-hint{margin:0;font-size:var(--fs-eyebrow);color:var(--tx-muted);line-height:var(--lh-body)}
.qr-colors{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.qr-clear-logo[hidden]{display:none}
.qr-clear-logo{font-size:var(--fs-eyebrow)}
.qr-filerow{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.qr-filebtn{display:inline-flex;align-items:center;padding:12px 20px;border-radius:var(--r-pill);
   border:1px solid var(--panel);background:#fff;font-size:var(--fs-eyebrow);
   font-weight:var(--fw-bold);color:var(--blue);cursor:pointer;transition:.2s var(--ease)}
.qr-filebtn:hover{border-color:var(--blue-soft);background:var(--cream)}
.u-sr:focus-visible + .qr-filebtn{box-shadow:var(--focus-ring)}
.qr-filename{font-size:var(--fs-eyebrow);color:var(--tx-muted);overflow-wrap:anywhere}

.qr-out{position:sticky;top:96px;display:grid;gap:var(--sp-4);justify-items:center;
   padding:var(--sp-6);border-radius:var(--r-card);background:var(--cream);
   border:1px solid var(--panel)}
.qr-stage{position:relative;display:grid;place-items:center;width:100%;min-height:296px;
   border-radius:var(--r-md);background:#fff;border:1px solid var(--panel);padding:16px}

.qr-stage.is-clear{
   background-image:linear-gradient(45deg,var(--cream) 25%,transparent 25%),
     linear-gradient(-45deg,var(--cream) 25%,transparent 25%),
     linear-gradient(45deg,transparent 75%,var(--cream) 75%),
     linear-gradient(-45deg,transparent 75%,var(--cream) 75%);
   background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.qr-canvas{line-height:0}
.qr-canvas svg,.qr-canvas canvas{max-width:100%;height:auto;display:block}
.qr-empty{margin:0;max-width:22ch;text-align:center;font-size:var(--fs-eyebrow);color:var(--tx-muted)}
.qr-msg{margin:0;min-height:20px;font-size:var(--fs-eyebrow);color:var(--tx-muted);text-align:center}
.qr-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.qr-actions .u-btn{padding:12px 20px}
.qr-note{margin:0;max-width:34ch;text-align:center;font-size:var(--fs-tag);
   color:var(--tx-muted);line-height:var(--lh-body)}

.qr-steps,.qr-uses{background:var(--cream)}
.qr-faq{background:var(--cream)}

.qr-steplist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
   gap:var(--sp-grid)}
.qr-step{display:grid;gap:8px;padding:var(--sp-card);border-radius:var(--r-card);
   background:#fff;border:1px solid var(--panel);box-shadow:var(--sh-rest)}

.qr-stepn{/*latin*/font-family:var(--font-label);font-weight:var(--fw-bold);
   font-size:var(--fs-feature);line-height:1;direction:ltr;color:var(--muted)}
.qr-step b{font-size:var(--fs-body);color:var(--dark)}
.qr-step span:last-child{font-size:var(--fs-eyebrow);color:var(--tx-muted);line-height:var(--lh-body)}

.qr-prose{max-width:var(--reading);margin:0 auto}
.qr-prose p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--tx-ink);
   margin:0 0 var(--sp-4)}
.qr-benefits{list-style:none;margin:var(--sp-8) auto 0;padding:0;max-width:var(--reading);
   display:grid;gap:12px}
.qr-benefits li{display:flex;align-items:center;gap:12px;font-size:var(--fs-body);
   font-weight:var(--fw-bold);color:var(--dark)}
.qr-bico{flex:none;display:grid;place-items:center;width:32px;height:32px;
   border-radius:var(--r-pill);background:var(--blue)}
.qr-bico svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:3;
   stroke-linecap:round;stroke-linejoin:round}

.qr-uselist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
   gap:12px}
.qr-uselist li{display:grid;gap:4px;padding:20px;border-radius:var(--r-card);
   background:#fff;border:1px solid var(--panel)}
.qr-uselist b{font-size:var(--fs-body);color:var(--dark)}
.qr-uselist span{font-size:var(--fs-eyebrow);color:var(--tx-muted);line-height:var(--lh-body)}
.qr-h3{margin:var(--sp-12) 0 var(--sp-6);font-size:var(--fs-h3);font-weight:var(--fw-bold);
   line-height:var(--lh-card);letter-spacing:var(--ls-tight);color:#000;text-align:center}
.qr-close{margin:var(--sp-8) auto 0;max-width:var(--reading);text-align:center;
   font-size:var(--fs-body);font-weight:var(--fw-bold);color:#000;line-height:var(--lh-body)}

.qr-nos{padding:0 24px var(--sp-12)}
.qr-notecard{position:relative;padding:var(--sp-card);border-radius:var(--r-xs);
   background:#fff;border:1px solid var(--panel);box-shadow:var(--sh-float);
   rotate:-.7deg;transition:rotate .3s var(--ease)}
.qr-notecard:hover{rotate:0deg}

.qr-notecard::after{content:"";position:absolute;inset-inline-end:0;bottom:0;
   width:40px;height:40px;background:linear-gradient(225deg,var(--cream) 50%,transparent 50%);
   border-inline-end:1px solid var(--panel);border-bottom:1px solid var(--panel);
   border-end-end-radius:var(--r-xs)}

.qr-pin{position:absolute;top:-10px;inset-inline-start:50%;translate:-50% 0;
   width:20px;height:20px;border-radius:var(--r-pill);background:var(--red);
   box-shadow:0 4px 10px rgba(11,15,30,.35),inset 0 -2px 4px rgba(11,15,30,.22)}
.qr-pin::after{content:"";position:absolute;inset:5px 5px auto auto;width:6px;height:6px;
   border-radius:var(--r-pill);background:rgba(255,255,255,.55)}
.qr-notehead{display:flex;align-items:center;gap:16px;margin-bottom:var(--sp-4)}
.qr-avatar{width:56px;height:56px;border-radius:var(--r-pill);object-fit:cover;flex:none;
   border:2px solid #fff;box-shadow:var(--sh-rest)}
.qr-notehead b{display:block;font-size:var(--fs-body);color:var(--dark)}
.qr-notehead span{display:block;font-size:var(--fs-eyebrow);color:var(--tx-muted)}
.qr-notecard p{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--tx-ink)}

.qr-uses{padding-bottom:var(--sp-12)}
.qr-faq{padding-top:var(--sp-8);padding-bottom:var(--sp-12)}
.qr-faq .u-section__head{margin-bottom:var(--sp-6)}
.qr-what{background:#fff}

@media(max-width:900px){
  .qr-hero{padding-top:96px}
  .qr-stagewrap{padding:56px 20px 120px}
  .qr-eye{width:48px;height:48px;border-width:4px}
  .qr-eye--a,.qr-eye--c{inset-inline-start:20px}
  .qr-eye--b{inset-inline-end:20px}
  .qr-eye--c{bottom:140px}
  .qr-card{margin-top:-88px;padding:var(--sp-6)}
  .qr-grid{grid-template-columns:1fr;gap:32px}

  .qr-out{position:static;order:-1}
  .qr-stage{min-height:0}
  .qr-steplist,.qr-uselist{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .qr-scanline{animation:none;opacity:.35}
}

.wa-hero .qr-stagewrap{background:linear-gradient(180deg,var(--dark-lift),var(--dark) 62%)}

.wa-bubble{position:absolute;z-index:1;border-radius:22px 22px 22px 4px;
   border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);pointer-events:none}
.wa-bubble--a{inset-inline-start:48px;top:56px;width:120px;height:44px}
.wa-bubble--b{inset-inline-end:56px;top:96px;width:88px;height:36px;
   border-radius:22px 22px 4px 22px}
.wa-bubble--c{inset-inline-start:72px;bottom:176px;width:64px;height:32px}

.wa-phone{display:grid;grid-template-columns:132px 1fr;gap:8px}

.wa-dial{/*latin*/font-family:var(--font-label)}

.wa-empty,.wa-out{display:block;padding:16px 20px;border-radius:var(--r-md);
   min-height:56px;font-size:var(--fs-eyebrow);overflow-wrap:anywhere}
.wa-empty{margin:0;background:var(--cream);border:1px dashed var(--panel);color:var(--tx-muted)}
.wa-empty[hidden],.wa-out[hidden]{display:none}
.wa-out{/*latin*/direction:ltr;text-align:left;unicode-bidi:isolate;
   font-family:var(--font-label);color:var(--blue);background:#fff;
   border:1px solid var(--blue-soft)}
.wa-actions{justify-content:flex-start}
.wa-uselist{grid-template-columns:1fr}

@media(max-width:900px){
  .wa-bubble--a{inset-inline-start:20px;width:88px}
  .wa-bubble--b{inset-inline-end:20px;width:64px}
  .wa-bubble--c{inset-inline-start:32px;bottom:132px}
  .wa-phone{grid-template-columns:1fr}
}

.cal-sheet{position:absolute;z-index:1;border-radius:12px;
   border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);pointer-events:none}

.cal-sheet::before{content:"";position:absolute;inset:0 0 auto 0;height:12px;
   border-bottom:1px solid rgba(255,255,255,.12)}
.cal-sheet--a{inset-inline-start:48px;top:48px;width:88px;height:88px}
.cal-sheet--b{inset-inline-end:56px;top:80px;width:64px;height:64px}

.cal-times{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cal-times > div{display:grid;gap:6px;min-width:0}
.cal-times > div[hidden]{display:none}
.qr-lab--sm{font-weight:var(--fw-body);color:var(--tx-muted)}
.cal-quick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}

.cal-chip{border:none;background:none;padding:0;cursor:pointer;font:inherit}
.cal-ends{margin:8px 0 0;font-size:var(--fs-eyebrow);color:var(--blue);font-weight:var(--fw-bold)}
.cal-allday{width:fit-content}
#cal-durblock[hidden]{display:none}

.cal-out{align-content:start}
.cal-links{display:grid;gap:8px;width:100%}
.cal-links .u-btn{justify-content:center;padding:12px 20px;width:100%}
.cal-stage{min-height:240px}

@media(max-width:900px){
  .cal-sheet--a{inset-inline-start:20px;width:64px;height:64px}
  .cal-sheet--b{inset-inline-end:20px;width:48px;height:48px}
  .cal-times{grid-template-columns:1fr}
}
