/* V25 — Human-centered Quick Connect. Replaces link-only QR with a
   two-step intent/channel journey and honest offline-first handoff. */
body:has(.connect-scene){
 background:radial-gradient(ellipse at 76% 7%,#176553 0%,#043e38 32%,#011e21 75%)!important;
}
.frame.connect-scene{max-width:1280px;padding:22px clamp(12px,3vw,38px) 46px;margin:0 auto;}
.connect-top{
 display:flex;align-items:center;justify-content:space-between;gap:12px;
 margin-bottom:20px;padding-bottom:13px;border-bottom:1px solid #e4bb756b;
}
.connect-top .eyebrow{letter-spacing:.18em;font:11px/1.5 Georgia,serif;color:#efcf8e}
.connect-hero{
 display:grid;grid-template-columns:minmax(0,1.17fr) minmax(320px,.83fr);
 gap:20px;align-items:stretch;direction:ltr;
}
.connect-persona{
 position:relative;isolation:isolate;overflow:hidden;min-height:485px;direction:rtl;
 border:1.5px solid #e1b86cba;border-radius:31px;
 background:radial-gradient(ellipse at 32% 28%,#197461,#065449 32%,#032f32 75%);
 box-shadow:inset 0 1px 0 #ffeaac52,0 24px 55px #00161489;
}
.connect-persona::after{content:"";position:absolute;inset:40% 0 0;z-index:2;pointer-events:none;
 background:linear-gradient(0deg,#001b1df5 3%,#002621aa 55%,transparent);}
.connect-orbit{
 position:absolute;width:85%;aspect-ratio:1.45;border-radius:50%;top:4%;left:7%;
 border:2px solid #efd28b94;transform:rotate(-17deg);
 box-shadow:0 0 30px #f4c77c5e,inset 0 0 28px #e2a85239;
}
.connect-persona-photo{
 position:absolute;z-index:1;width:77%;height:86%;top:0;left:12%;
 object-fit:contain;object-position:center top;
 mask-image:linear-gradient(#000 0%,#000 75%,transparent 99%);
 -webkit-mask-image:linear-gradient(#000 0%,#000 75%,transparent 99%);
 filter:drop-shadow(0 12px 12px #00110cbf);
}
.connect-persona-copy{
 position:absolute;inset:auto clamp(14px,4vw,34px) 24px;z-index:3;
 color:#fff4d8;text-align:right;
}
.connect-persona-copy h1{margin:7px 0 12px;font-size:clamp(22px,2vw,31px);line-height:1.4;color:#ffe1a1}
.connect-persona-copy p{max-width:56ch;margin:0;font-size:13px;line-height:1.9;color:#dcebe2}
.connect-persona-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}
.connect-persona-tags span{
 border-radius:20px;border:1px solid #e2c27878;background:#053f3599;
 padding:4px 10px;font:11px/1.8 Georgia,serif;color:#f3d591;
}
.connect-scene .qr-shell{
 display:flex;flex-direction:column;align-items:center;gap:10px;
 min-width:0;max-width:none;width:100%;min-height:485px;
 margin:0;padding:23px clamp(14px,2vw,25px);
 border-radius:31px;border:1.5px solid #e9c77eab;
 background:linear-gradient(165deg,#094c41d9,#022e2aee);
 box-shadow:0 23px 50px #0017168a,inset 0 1px #fff2;
}
.connect-scene .qr-shell h2{font-size:clamp(21px,2.1vw,28px);color:#ffe1a3;margin:0}
.connect-scene .qr-shell .qr-caption{color:#d8e9e2;font-size:12px;line-height:1.8;max-width:38ch;margin:0}
.qr-showcase{
 position:relative;margin:7px auto 3px;padding:8px;
 background:linear-gradient(130deg,#eec77b,#0b5144 30%,#f5dba3 65%,#a06e30);
 border-radius:27px;box-shadow:0 0 21px #e7ad5656;
}
.connect-scene .qr-code{
 width:clamp(190px,20vw,246px);padding:13px;border:7px solid #fff0d0;
 background:#fff7e7;border-radius:20px;
}
.qr-corner{position:absolute;inset:-4px;border:1px solid #f8ddaa;
 border-radius:31px;pointer-events:none}
.qr-pulse{position:absolute;top:-5px;right:38%;width:23%;height:2px;
 background:#fff3c3;box-shadow:0 0 9px #ffe3a3;
 animation:qr-scanner 3.5s ease-in-out infinite alternate;pointer-events:none}
@keyframes qr-scanner{to{top:100%}}
.connect-scene .qr-address{font-size:12px;color:#f5d99b;text-decoration:underline;max-width:100%;overflow-wrap:anywhere}
.connect-scene .qr-actions{margin:6px 0 0}
.connect-scene .qr-status{font-size:12px;min-height:17px;margin:0}
.connect-flow{border:1.4px solid #e3bf7a9c;border-radius:31px;margin-top:19px;
 padding:clamp(18px,3vw,32px);background:linear-gradient(145deg,#053f37ef,#022622f5);
 box-shadow:0 18px 40px #00191582}
.connect-flow-head{text-align:right;margin-bottom:19px}
.connect-flow-head .eyebrow,.connect-common .eyebrow,.connect-persona .eyebrow,.connect-scene .eyebrow{
 color:#efca85;letter-spacing:.15em;font:11px/1.6 Georgia,serif;
}
.connect-flow-head h2{font-size:clamp(23px,2.3vw,33px);color:#ffe3ac;margin:4px 0}
.connect-flow-head p{font-size:13px;color:#c9e2d8;margin:0}
.connect-steps{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.connect-step{min-width:0;margin:0;padding:17px 13px 14px;border:1px solid #e7bb746c;border-radius:22px;}
.connect-step legend{display:flex;align-items:center;gap:8px;padding:0 7px;
 font-size:15px;font-weight:700;color:#fff1ca}
.step-index{display:inline-grid;place-items:center;width:32px;height:32px;
 border:1px solid #f3d390;border-radius:50%;font:12px Georgia,serif;color:#ffe1a3}
.connect-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.connect-choices .choice{display:flex;align-items:center;justify-content:flex-start;gap:9px;
 padding:11px 10px;border:1px solid #e4bd785a;border-radius:16px;
 background:#0750466a;color:#ecf5ea;text-align:start;font-size:12px;
 min-height:57px;transition:transform .18s,border-color .18s,background .18s;
}
.connect-choices .choice:hover{transform:translateY(-2px);border-color:#f8d699}
.connect-choices .choice[aria-pressed=true]{
 background:linear-gradient(115deg,#f5e2a8,#dcb56e);border-color:#fff0bd;
 box-shadow:0 6px 17px #e8ba5b38;color:#152b26;font-weight:800;
}
.choice-emoji{font:24px/1 Georgia,serif;min-width:25px;text-align:center;color:inherit}
.connect-next{display:flex;align-items:center;justify-content:space-between;gap:16px;
 padding:20px 0 0;margin-top:18px;border-top:1px solid #eac68866}
.connect-next strong{font-size:16px;color:#ffe7b6}
.connect-next p{font-size:12px;line-height:1.7;color:#c8dfd7;margin:5px 0 0}
.connect-next .btn{flex:none;min-width:200px;text-align:center;white-space:normal}
.connect-common{
 display:flex;align-items:center;gap:20px;margin-top:19px;
 padding:22px 25px;border:1.5px solid #d8b97780;border-radius:28px;
 background:linear-gradient(110deg,#073f36,#032623);box-shadow:inset 0 1px #ffefa51e;
}
.common-symbol{font:53px Georgia,serif;color:#f5c773;filter:drop-shadow(0 0 9px #e2ac4a66)}
.connect-common>div:nth-child(2){flex:1}
.connect-common h2{font-size:20px;margin:3px 0;color:#ffe0a7}
.connect-common p{font-size:12px;line-height:1.85;color:#d0e4d9;margin:4px 0 0;max-width:80ch}
.connect-common .btn{flex:none}
.connect-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;
 margin:20px 0 0;font:12px Georgia,serif;color:#f4d99c}
.connect-scene .btn:focus-visible,.choice:focus-visible{outline:3px solid #ffdf94;outline-offset:3px}
@media(max-width:900px){
 .connect-hero{grid-template-columns:1fr 1fr}
 .connect-persona,.connect-scene .qr-shell{min-height:450px}
 .connect-persona-photo{width:91%;left:4%}
 .connect-choices{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
 .connect-hero{grid-template-columns:1fr}
 .connect-persona{min-height:360px}
 .connect-persona-photo{height:82%;left:29%;width:58%}
 .connect-persona-copy{left:16px;right:16px;bottom:18px}
 .connect-persona-copy h1{font-size:22px}
 .connect-persona-copy p{font-size:12px}
 .connect-scene .qr-shell{min-height:0}
 .connect-scene .qr-code{width:min(67vw,255px)}
 .connect-steps{grid-template-columns:1fr;gap:17px}
 .connect-next{flex-direction:column;align-items:stretch}
 .connect-next .btn{width:100%}
 .connect-common{flex-wrap:wrap;gap:11px;padding:18px}
 .connect-common .btn{width:100%;text-align:center}
 .connect-top .eyebrow{display:none}
}
@media(max-width:380px){
 .connect-choices{grid-template-columns:1fr 1fr;gap:7px}
 .connect-choices .choice{padding:8px 5px;font-size:11px}
 .connect-persona{min-height:400px}
 .connect-persona-photo{left:14%;width:76%}
 .connect-scene .qr-shell{padding-inline:8px}
}
@media(prefers-reduced-motion:reduce){
 .qr-pulse{animation:none}
 .connect-choices .choice{transition:none}
}