
:root{--purple:#7545ed;--ink:#24222b;--muted:#8a8791;--paper:#faf9f6}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}button,input,textarea{font:inherit}button,a,input,textarea{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #bda3ff;outline-offset:6px}.page{max-width:1600px;margin:auto;padding:0 5.2%}header{height:106px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e7e4df}.logo{display:flex;align-items:center;color:var(--ink);text-decoration:none;font-size:22px;font-weight:800;letter-spacing:-1.1px;gap:10px}.logo-mark{background:var(--purple);width:35px;height:35px;border-radius:11px;color:white;display:grid;place-content:center;position:relative;font-size:29px;line-height:1}.logo-mark>span{position:absolute;right:6px;top:2px;font-size:19px;color:#c5f582}.logo-dot{font-size:11px;align-self:flex-start;margin:3px 0 0 -6px}.header-note{font-size:12px;color:#747079;display:flex;align-items:center;gap:9px}.header-note i{height:6px;width:6px;border-radius:50%;background:#8cad61}.intro{text-align:center;padding:58px 0 0}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2.1px;color:var(--purple);margin:0 0 22px}h1{font-size:clamp(36px,4.3vw,64px);letter-spacing:-3px;line-height:1.15;font-weight:600;margin:0}h1 em{font-style:normal;color:var(--purple);position:relative;white-space:nowrap}h1 em:after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:9px;border-top:2px solid #b49aef;border-radius:50%;transform:rotate(-2deg)}.subtitle{font-size:14px;line-height:1.85;margin:25px 0 0;color:#68646f}.subtitle span{color:#96929b}.scene{position:relative;max-width:1000px;margin:27px auto 0;padding-top:4px}.scene-grid{position:absolute;inset:20px 0 80px;background-image:radial-gradient(#bfb8d0 1px,transparent 1px);background-size:22px 22px;opacity:.22;mask-image:radial-gradient(ellipse,#000 10%,transparent 70%);pointer-events:none}.scene-caption{display:block;text-align:center;letter-spacing:2px;font-size:9px;color:#aaa4b2}.scale{position:relative;height:285px;width:62%;margin:12px auto 0}.pedestal{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:256px;width:130px}.stem{height:235px;width:19px;position:absolute;left:calc(50% - 9.5px);top:10px;background:linear-gradient(90deg,#b8a1e6,#855ac7 46%,#d3c3ed 100%);clip-path:polygon(36% 0,64% 0,100% 100%,0 100%)}.foot{position:absolute;bottom:0;width:130px;height:24px;background:linear-gradient(180deg,#bba0e5,#9674c6);border-radius:70% 70% 10px 10px;box-shadow:0 4px 0 #7650aa}.floor-shadow{position:absolute;bottom:-16px;left:20%;width:60%;height:25px;background:#4433521a;filter:blur(12px);border-radius:50%}.beam{position:absolute;top:28px;left:0;width:100%;height:14px;transform:rotate(0);transition:transform .8s cubic-bezier(.34,1.5,.5,1)}.beam-line{height:12px;border-radius:15px;background:linear-gradient(180deg,#c7b0ee,#9a73d4);box-shadow:0 3px 0 #8055b9;position:absolute;inset:0}.pivot{position:absolute;left:calc(50% - 16px);top:18px;width:32px;height:32px;background:#a684d3;border:5px solid #dbceec;border-radius:50%;box-shadow:0 2px 5px #4f288733}.pivot span{position:absolute;inset:6px;background:#7448ad;border-radius:50%}.hanger{position:absolute;top:5px;width:40%;height:208px;transform:rotate(0);transform-origin:50% 0;transition:transform .8s cubic-bezier(.34,1.5,.5,1)}.left{left:-20%}.right{right:-20%}.cords{position:absolute;left:10%;width:80%;top:0;height:173px;background:linear-gradient(114deg,transparent 49.4%,#b69bdc 49.7%,#b69bdc 50.3%,transparent 50.6%) left/50% 100% no-repeat,linear-gradient(66deg,transparent 49.4%,#b69bdc 49.7%,#b69bdc 50.3%,transparent 50.6%) right/50% 100% no-repeat}.pan{position:absolute;bottom:0;left:0;right:0;height:103px;text-align:center;border-bottom:9px solid #b494dd;border-radius:0 0 50% 50%/0 0 19% 19%;background:linear-gradient(0deg,#eee6f755,transparent 32%);padding-top:4px}.pan:after{content:'';position:absolute;bottom:-9px;left:0;right:0;height:8px;border-radius:50%;background:#cdb6e9}.pan-number{font-size:8px;letter-spacing:1.2px;color:#aaa0b4}.agency{font-size:clamp(18px,2.4vw,29px);font-weight:800;letter-spacing:-1.25px;white-space:nowrap;margin-top:8px}.agency.ours{color:var(--purple)}.agency.ours>span{font-size:10px;vertical-align:super;margin-left:3px}.agency.others{font-weight:600;font-size:clamp(17px,2.05vw,25px);letter-spacing:-1px}.agency span{display:inline-block}.pan p{font-size:9px;color:#98909f;margin-top:7px}.choices{display:flex;justify-content:space-between;width:62%;margin:24px auto 0;position:relative}.choice{width:40%;text-align:center;position:relative}.choice:first-child{margin-left:-20%}.choice:last-child{margin-right:-20%}.choose{height:49px;min-width:174px;border-radius:8px;padding:0 21px;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:space-between;gap:50px;transition:background .2s,box-shadow .2s,transform .2s}.primary{background:var(--purple);border:1px solid var(--purple);color:white;box-shadow:0 5px 15px #7545ed20}.primary:hover{background:#6633d9;box-shadow:0 6px 24px #7545ed40}.secondary{color:#77717d;border:1px solid #d9d4de;background:transparent}.secondary:hover{background:#f0ecf5}.choose span{font-size:20px;font-weight:400}.choice-note{display:block;font-size:9px;color:#a59da9;margin-top:12px}.hint{display:flex;justify-content:center;align-items:center;gap:9px;text-align:center;font-size:10px;color:#98909f;margin:34px 0 35px}.hint-icon{font-size:20px;color:#9980b8}.scene[data-state=ours] .beam{transform:rotate(-9deg)}.scene[data-state=ours] .hanger{transform:rotate(9deg)}.scene[data-state=others] .beam{animation:collapse 1.7s both}.scene[data-state=others] .hanger{animation:counter-collapse 1.7s both}.scene[data-state=others] .fall{animation:fall .8s .65s both}.scene[data-state=others] .f2{animation-delay:.8s;--fall-x:-28px;--fall-r:-70deg}.scene[data-state=others] .f1{--fall-x:-55px;--fall-r:-110deg}.scene[data-state=others] .f3{animation-delay:.74s;--fall-x:32px;--fall-r:85deg}.scene[data-state=others] .f4{animation-delay:.58s;--fall-x:65px;--fall-r:140deg}@keyframes collapse{0%{transform:rotate(0)}32%{transform:rotate(11deg)}44%{transform:rotate(13deg)}70%{transform:rotate(-13deg)}85%{transform:rotate(-8deg)}100%{transform:rotate(-10deg)}}@keyframes counter-collapse{0%{transform:rotate(0)}32%{transform:rotate(-11deg)}44%{transform:rotate(-13deg)}70%{transform:rotate(13deg)}85%{transform:rotate(8deg)}100%{transform:rotate(10deg)}}@keyframes fall{0%{opacity:1;transform:translate(0,0) rotate(0)}25%{opacity:1}100%{opacity:0;transform:translate(var(--fall-x),135px) rotate(var(--fall-r))}}footer{min-height:80px;border-top:1px solid #e7e4df;display:flex;justify-content:space-between;align-items:center;gap:16px;color:#a29ca6;font-size:9px}.footer-label{color:#716977}.footer-label span{margin-left:12px;color:var(--purple)}dialog{border:1px solid #ebe6f2;border-radius:24px;padding:40px;width:min(570px,calc(100% - 28px));max-height:90dvh;overflow:auto;color:var(--ink);background:var(--paper);box-shadow:0 30px 100px #21123622}dialog::backdrop{background:#27203366;backdrop-filter:blur(7px)}.close{position:absolute;right:17px;top:14px;border:0;background:transparent;font-size:28px;color:#8c8197;width:34px;height:34px}.dialog-symbol{height:53px;width:53px;background:#eee5ff;border-radius:16px;color:var(--purple);display:grid;place-content:center;font-size:30px;margin-bottom:20px}h2{font-size:32px;font-weight:600;letter-spacing:-1.5px;line-height:1.2;margin:0}.dialog-copy{font-size:13px;line-height:1.7;color:#84788e;margin:15px 0 24px}form{display:grid;gap:15px}label{display:block;font-size:11px;font-weight:600;color:#6d6376}input:not([type=checkbox]),textarea{display:block;width:100%;border:1px solid #dfd8e7;background:#fff;border-radius:8px;margin-top:8px;padding:12px;color:var(--ink);font-size:13px;outline:none}input:focus,textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px #7545ed15}textarea{resize:vertical;min-height:86px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.optional{font-weight:400;color:#aaa0b3}.consent{display:flex;gap:9px;align-items:flex-start;line-height:1.6;font-size:10px;font-weight:400}.consent input{accent-color:var(--purple);margin:2px 0 0;width:15px;height:15px;flex-shrink:0}.submit{background:var(--purple);border:0;border-radius:8px;color:white;padding:15px 18px;font-size:13px;font-weight:600;display:flex;justify-content:space-between;width:100%}.submit:disabled{opacity:.6;cursor:wait}.form-note{text-align:center;font-size:9px;color:#a295ad;margin:0}#form-error{font-size:12px;color:#b9344e;margin:0}#form-error:empty{display:none}[hidden]{display:none!important}#success{padding:20px 0}.done{margin-top:26px}body:has(dialog[open]){overflow:hidden}
@media(min-width:1100px){.scale{width:62%}.choices{width:62%}}
@media(max-width:650px){.page{padding:0 20px}header{height:77px}.logo{font-size:19px}.header-note{font-size:0;gap:0}.header-note i{width:7px;height:7px}.intro{padding-top:40px}.eyebrow{font-size:8px;letter-spacing:1.7px;margin-bottom:19px}h1{font-size:34px;letter-spacing:-1.8px}.subtitle{font-size:11px;margin-top:24px;line-height:1.9}.scene{margin-top:29px}.scale{width:56%;height:251px;margin-top:20px}.pedestal{height:215px;width:86px}.stem{height:195px;width:14px;left:calc(50% - 7px)}.foot{width:86px;height:20px}.hanger{width:83%;height:182px}.left{left:-41.5%}.right{right:-41.5%}.cords{height:151px}.pan{height:86px}.pan-number{font-size:6px;letter-spacing:.7px}.agency{font-size:18px;letter-spacing:-.8px;margin-top:10px}.agency.others{font-size:16px;letter-spacing:-.8px}.pan p{font-size:7px;margin-top:8px;white-space:nowrap}.choices{width:56%;margin-top:22px}.choice{width:83%}.choice:first-child{margin-left:-41.5%}.choice:last-child{margin-right:-41.5%}.choose{min-width:0;width:95%;gap:12px;height:45px;padding:0 17px;font-size:11px}.choice-note{font-size:7px;white-space:nowrap}.hint{font-size:9px;line-height:1.6;margin:29px 5px}.hint-icon{flex-shrink:0}footer{min-height:90px;flex-wrap:wrap;justify-content:center;gap:10px;padding:22px 0;font-size:8px}footer>span:nth-child(2){order:3;width:100%;text-align:center}.footer-label{margin-left:auto}dialog{padding:30px 23px}h2{font-size:29px}.fields{grid-template-columns:1fr}.dialog-copy{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}.scene[data-state=others] .beam{transform:rotate(-10deg)}.scene[data-state=others] .hanger{transform:rotate(10deg)}}


