:root{--blue:#71b7fc;--ink:#000;--paper:#fff;--h:100dvh;--measured-h:min(100dvh,900px);--slide:cubic-bezier(.19,1,.22,1);--ease:cubic-bezier(.075,.82,.165,1)}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;background:var(--paper)}
body{overflow-x:hidden;font-family:"Nanum Gothic",sans-serif;font-size:16px;letter-spacing:-.3px;color:var(--ink);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}button{border:0;cursor:pointer}button:focus-visible,select:focus-visible{outline:2px solid #2678ca;outline-offset:5px}button:disabled{cursor:default}button{-webkit-tap-highlight-color:transparent}
#form-stage{position:relative;width:100%;max-width:550px;height:var(--h);min-height:550px;margin:auto;isolation:isolate}
#screens{height:100%;width:100%;position:relative;overflow:hidden}
#form-stage[data-screen="completion"] #screens{overflow:visible}
.screen{position:absolute;inset:0;width:100%;height:100%}
.brand{position:absolute;top:calc(var(--measured-h)*.06);left:32.5%;width:35%;height:calc(var(--measured-h)*.1);background:url('assets/plantutor-logo.png') center/contain no-repeat;z-index:10;pointer-events:none;transition:opacity .5s}
.brand.hidden{opacity:0;visibility:hidden}
.brand.loading-brand{top:calc(var(--measured-h)*.39);transform:scale(1.3);transition:top 1s var(--slide) 1.2s,transform 1s var(--slide) 1.2s;animation:breathe 1.8s ease-in-out 2.2s infinite}
.pill-wrap{width:100%;margin:5px 0;flex:0 1 auto}
.pill{display:flex;justify-content:center;align-items:center;position:relative;min-height:54px;width:80%;padding:3px 6px;margin:auto;border-radius:28px;background:var(--blue);box-shadow:0 5px 20px #71b7fc57;color:#fff;transition:transform .2s ease-in-out,background-color .2s,opacity .2s}
.pill-label{padding:6px;line-height:24px;font-size:16px;font-weight:500;letter-spacing:-.5px;text-align:center;white-space:pre-line;word-break:keep-all}
.icon{display:block;width:24px;height:24px;flex:0 0 24px;margin-right:10px;fill:currentColor}
@media(hover:hover) and (pointer:fine){.pill:hover{transform:translateY(-4px)}}
.pill:active{transform:scale(1.04)}
.cover{display:flex;flex-direction:column;align-items:center}
.cover-spacer{height:20%;flex-shrink:0}
.cover-content{height:72%;width:100%;display:flex;align-items:center;justify-content:space-around;flex-direction:column}
.cover-copy{width:70%;display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center}
.cover-copy h1{font-size:26px;font-weight:700;line-height:normal;color:var(--blue);margin:0 0 5px;width:100%;word-break:keep-all}
.cover-copy p{font-size:16px;font-weight:400;line-height:normal;margin:5px 0 20px;width:100%;word-break:keep-all}
.cover .pill{width:70%}
.question{padding-top:calc(var(--measured-h)*.16)}
.progress-label{width:65%;height:16px;margin:auto;text-align:right;color:rgba(0,0,0,.3);font-size:11px;line-height:16px}
.progress-row{height:25px;width:70%;margin:auto;display:flex;align-items:center;justify-content:center;position:relative;z-index:15}
.back{position:relative;width:21px;height:20px;border-radius:50%;padding:0 0 0 1px;margin-right:5px;background:var(--blue);color:white;flex-shrink:1;display:flex;align-items:center;justify-content:center}
.back.first{opacity:.6}.back svg{height:14px;width:14px}
.back::after{content:"";position:absolute;inset:-10px}
.progress-track{width:95%;height:20px;border-radius:100px;background:rgba(0,0,0,.07);overflow:hidden}
.progress-fill{height:100%;width:0;border-radius:100px;background:var(--blue);transition:width .8s var(--ease)}
.question-body{position:absolute;top:0;left:0;width:100%;height:95%;min-height:490px;padding-top:calc(var(--measured-h)*.24);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.question-layout{height:100%;width:100%;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;pointer-events:auto}
.q-number{position:relative;height:38px;width:100%;flex-shrink:1;margin:0;text-align:center;font-size:32px;font-weight:700;color:var(--blue);line-height:normal}
.q-number span{margin-left:2px}.q-number sup{font-size:14px;vertical-align:text-top;position:static}
.question-copy{position:relative;width:100%;margin:5px 0 10px;display:flex;justify-content:center;flex-shrink:0}
.question-copy h2{font-size:16px;font-weight:400;line-height:24px;text-align:center;padding:15px;margin:auto;max-width:100%;word-break:keep-all;white-space:pre-line}
.choices{height:400px;width:100%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow-x:hidden;overflow-y:auto;padding:40px 0 60px;scrollbar-width:none;overscroll-behavior:contain;flex-shrink:1}
.choices::-webkit-scrollbar{display:none}.choices .pill-wrap{flex:0 0 auto;transition:transform .4s cubic-bezier(.165,.84,.44,1),opacity .4s cubic-bezier(.165,.84,.44,1)}
.scroll-hint{position:absolute;bottom:-6%;height:20%;width:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(to top,#fff,transparent);color:var(--blue);pointer-events:none;z-index:3;transition:opacity .4s}
.scroll-hint svg{width:32px;height:32px;animation:nudge 1.2s ease-in-out infinite}.scroll-hint.hidden{opacity:0}
.phone-area{width:100%;max-width:450px;height:40%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.phone-widget{width:85%;height:100px;position:relative;text-align:center}
.phone-row{position:relative;width:calc(90% - 5px);margin:10px auto 0;height:47.5px;transform:translateX(2.5px)}
.phone-input{display:block;width:100%;height:47.5px;border:1px solid rgba(113,183,252,.7);border-radius:10px;padding:12px 12px 12px 76px;outline:0;box-shadow:0 2px 10px 3px rgba(0,0,0,.03);color:rgba(0,0,0,.7);background:rgba(255,255,255,.1);caret-color:var(--blue);font:18px/21px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:normal}
.phone-input::placeholder{color:#888;opacity:1}.phone-input:focus{border-color:var(--blue);box-shadow:0 6px 10px -5px #71b7fc26}
.country{position:absolute;left:15px;top:13px;height:21px;display:flex;align-items:center;gap:10px}
.country img,.country-emoji{width:32px;height:21px;object-fit:contain}.country-emoji{font:24px/21px system-ui;display:none}
.country svg{width:7px;height:7px;color:#777}.country select{position:absolute;inset:-8px -4px;opacity:0;cursor:pointer;width:calc(100% + 8px);font-size:16px}
.country:focus-within{outline:2px solid #2678ca;outline-offset:5px;border-radius:2px}
.phone-error{display:inline-block;height:20px;padding:4px 10px;border-radius:15px;font-size:12px;font-weight:700;text-align:center;color:#fff;background:#f74f78;margin:8px 0 0;line-height:12px;box-shadow:0 5px 20px #f74f7810}
.phone-error:empty{visibility:hidden}
.next{min-width:150px;width:auto;flex-shrink:0}.next .pill{width:150px}
.loading{position:absolute;inset:0}.loading-content{height:45%;position:absolute;bottom:0;width:100%;display:flex;align-items:center;flex-direction:column}
.loading-ring{width:24px;height:24px;border:.2rem solid rgba(0,0,0,.1);border-top-color:var(--blue);border-radius:50%;animation:spin 1s linear infinite}
.loading-text{font-size:13px;font-weight:700;line-height:19px;height:13px;width:100%;text-align:center;margin-top:15px;color:var(--blue)}
.loading-content.done .loading-ring{animation:none;border-color:transparent;background:url('assets/complete-check.svg') 0 0/100% 100% no-repeat}.loading-content.done .loading-text{color:#13c97c}
.completion{bottom:auto;height:auto;min-height:100%;background:#fff;overflow:visible;display:flex;align-items:center;flex-direction:column;box-shadow:0 -2px 10px 1px #0003;padding-bottom:83px}
.completion-art{position:relative;width:100%;aspect-ratio:1;flex-shrink:0}
.completion-art::before{content:"";position:absolute;inset:0 0 -8px;background:url('assets/completion.jpg') center/cover no-repeat}
.completion-art::after{content:"";position:absolute;inset:0 0 -8px;transform:scaleY(1.01);background:linear-gradient(to bottom,transparent 80%,#fff 100%)}
.completion-card{position:relative;z-index:2;max-width:450px;width:90%;margin:-35px auto 30px;padding:20px 10px 30px;flex-shrink:0;border-radius:20px;background:rgba(255,255,255,.8);backdrop-filter:blur(10px) brightness(115%);box-shadow:0 5px 15px #71b7fc30;text-align:center}
.completion-title{height:60px;min-height:60px;padding-top:10px;margin:0;font-size:24px;font-weight:700;line-height:normal;color:var(--blue)}
.divider{height:5px;margin:20px 0;display:flex;justify-content:center}.divider::after{content:"";width:30px;height:5px;background:var(--blue);opacity:.3}
.completion-copy{display:flow-root;width:90%;margin:auto;line-height:1.5}.completion-copy p{font-size:24px;line-height:36px;font-weight:400;word-break:keep-all;margin:10px 0}
.sr-only{position:fixed;top:0;left:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#preview-notice{position:fixed;bottom:8px;right:10px;z-index:100;color:#657080;background:#fffffff2;border:1px solid #e3e8ee;border-radius:8px;padding:6px 9px;font:11px/1.4 system-ui;text-decoration:none}
body.embedded #preview-notice{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes nudge{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}
@keyframes breathe{0%,100%{transform:scale(1.3)}50%{transform:translateY(-3px) scale(1.43)}}
@media(max-height:600px){.question-body{padding-top:calc(var(--measured-h)*.26)}.pill{padding:3px;min-height:50px}.pill-label{line-height:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}