.the-assess { --green:#149b6d; --red:#df0712; --ink:#111827; --muted:#586174; width:min(1180px,calc(100% - 28px)); margin:0 auto; padding:130px 0 80px; color:var(--ink); }
.the-assess__intro { display:grid; max-width:820px; margin:0 auto 44px; text-align:center; }
.the-assess__eyebrow { margin:0 0 10px; color:var(--red); font-size:.75rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.the-assess__intro h1 { margin:0; font-family:Georgia,serif; font-size:clamp(2.7rem,6vw,5.4rem); line-height:.98; letter-spacing:-.05em; }
.the-assess__intro>p:not(.the-assess__eyebrow) { max-width:680px; margin:20px auto 0; color:var(--muted); font-size:1.08rem; }
.the-assess__privacy { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-top:24px; color:#3f4a5d; font-size:.88rem; }
.the-assess__shell { overflow:hidden; border:1px solid #e3e6eb; border-radius:28px; background:#fff; box-shadow:0 24px 70px rgba(17,24,39,.1); }
.the-assess__top { display:flex; justify-content:space-between; gap:20px; padding:24px 30px 16px; }
.the-assess__top span { color:var(--muted); }
.the-assess__bar { height:5px; background:#edf0f3; }
.the-assess__bar i { display:block; width:14.285%; height:100%; background:linear-gradient(90deg,var(--red),#ff6268); transition:width .35s ease; }
.the-assess__form { padding:42px clamp(22px,6vw,74px) 34px; }
.the-assess__step { display:none; max-width:900px; min-height:430px; margin:auto; animation:assess-in .3s ease-out; }
.the-assess__step.is-active { display:block; }
@keyframes assess-in { from { opacity:0; transform:translateX(16px); } }
.the-assess__chip { display:inline-flex; padding:6px 12px; border-radius:999px; color:#9f0710; background:#fff0f1; font-size:.76rem; font-weight:900; }
.the-assess__step h2,.the-assess__success h2 { margin:14px 0 8px; font-family:Georgia,serif; font-size:clamp(2rem,4vw,3rem); line-height:1.05; }
.the-assess__step>p { margin:0 0 28px; color:var(--muted); }
.the-assess__grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.the-assess label { display:grid; gap:7px; font-size:.87rem; font-weight:800; }
.the-assess input,.the-assess select,.the-assess textarea { width:100%; border:1px solid #d8dce3; border-radius:13px; padding:13px 14px; color:var(--ink); background:#fff; outline:none; }
.the-assess input:focus,.the-assess select:focus,.the-assess textarea:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(223,7,18,.1); }
.the-assess__wide { grid-column:1/-1; }
.the-photo { display:grid; grid-template-columns:1.15fr .85fr; gap:28px; }
.the-photo__drop { position:relative; min-height:330px; place-content:center; justify-items:center; overflow:hidden; border:2px dashed #d5dae1; border-radius:22px; background:#f8fafb; text-align:center; cursor:pointer; }
.the-photo__drop:hover { border-color:var(--red); background:#fff7f7; }
.the-photo__drop small { color:var(--muted); font-weight:500; }
.the-photo__icon { display:grid; width:52px; height:52px; place-items:center; margin-bottom:12px; border-radius:50%; color:#fff; background:var(--red); font-size:1.7rem; }
.the-photo__drop img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#111; }
.the-photo__open,.the-photo__choose { position:relative; z-index:2; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 18px; margin-top:14px; border-radius:999px; font-weight:900; cursor:pointer; }
.the-photo__open { border:0; color:#fff; background:var(--red); }
.the-photo__choose { margin-top:8px; color:var(--ink); border:1px solid #d8dce3; background:#fff; }
.the-photo>input { position:absolute; width:1px; height:1px; opacity:0; }
.the-photo__checks { align-self:center; display:grid; gap:14px; padding:24px; margin:0; border-radius:18px; background:#f7f5f2; list-style:none; }
.the-photo__checks li::before { content:'✓'; margin-right:9px; color:var(--green); font-weight:900; }
.the-assess__consent { grid-template-columns:auto 1fr; align-items:start; gap:12px!important; padding:18px; border:1px solid #dfe3e8; border-radius:16px; font-weight:500!important; }
.the-assess__consent input { width:19px; margin-top:3px; }
.the-assess__base-note { padding:18px; margin-top:18px; border-radius:16px; color:#624b13; background:#fff8dd; }
.the-assess__base-note p { margin:5px 0 0; }
.the-assess__summary { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:24px 0; }
.the-assess__summary div { padding:14px; border-radius:13px; background:#f5f6f8; }
.the-assess__summary small { display:block; color:var(--muted); }.the-assess__summary strong { display:block; margin-top:2px; }
.the-assess__actions { display:flex; justify-content:space-between; gap:12px; padding-top:26px; margin-top:26px; border-top:1px solid #eceef1; }
.the-assess__actions button,.the-assess__success a { min-height:50px; padding:12px 24px; border:1px solid #d8dce3; border-radius:999px; font-weight:900; cursor:pointer; text-decoration:none; }
.the-assess__next,.the-assess__submit,.the-assess__success a { margin-left:auto; border-color:var(--red)!important; color:#fff; background:var(--red); }
.the-assess__error { padding:12px 14px; margin-top:18px; border-radius:12px; color:#8f0610; background:#fff0f1; }
.the-assess__success { max-width:720px; padding:70px 30px; margin:auto; text-align:center; }
.the-assess__success>span { display:grid; width:62px; height:62px; place-items:center; margin:auto; border-radius:50%; color:#fff; background:var(--green); font-size:1.8rem; }
.the-assess__success a { display:inline-flex; align-items:center; margin-top:18px; }
.the-assess__trap { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
.the-pose { display:grid; grid-template-columns:94px 1fr; grid-template-rows:auto auto; align-items:center; column-gap:18px; width:min(520px,100%); padding:14px 18px; margin:0 0 20px; border:1px solid #e3e6eb; border-radius:18px; background:linear-gradient(135deg,#fff,#f7f5f2); }
.the-pose__head { grid-row:1/3; position:relative; width:72px; height:88px; border:3px solid #20242c; border-radius:48% 48% 43% 43%; background:#e4c5ad; }
.the-pose__head::before,.the-pose__head::after { content:''; position:absolute; top:34px; width:10px; height:18px; border:3px solid #20242c; background:#e4c5ad; }
.the-pose__head::before { left:-10px; border-radius:10px 0 0 10px; border-right:0; }.the-pose__head::after { right:-10px; border-radius:0 10px 10px 0; border-left:0; }
.the-pose__head i { position:absolute; inset:-3px 5px auto; height:30px; border-radius:50% 50% 28% 28%; background:#20242c; }
.the-pose strong { align-self:end; font-size:1rem; }.the-pose span { align-self:start; color:var(--muted); font-size:.82rem; }
.the-pose[data-direction=left] .the-pose__head { transform:rotateY(34deg) }.the-pose[data-direction=right] .the-pose__head { transform:rotateY(-34deg) }
.the-pose[data-direction=left]::after,.the-pose[data-direction=right]::after { grid-column:2; content:'➜'; color:var(--red); font-size:1.65rem; animation:pose-arrow 1s ease-in-out infinite alternate; }
.the-pose[data-direction=left]::after { transform:rotate(180deg) }.the-pose[data-direction=top] .the-pose__head { transform:rotateX(52deg) }.the-pose[data-direction=back] .the-pose__head { background:#20242c; }.the-pose[data-direction=back] .the-pose__head i { inset:auto 18px 6px; height:14px; background:#b58d72; }
@keyframes pose-arrow { to { translate:8px 0 } }
.the-camera { position:relative; overflow:hidden; width:min(760px,100%); margin:24px auto 0; border-radius:24px; color:#fff; background:#07090d; box-shadow:0 20px 55px rgba(0,0,0,.25); }
.the-camera video { display:block; width:100%; max-height:62vh; aspect-ratio:4/3; object-fit:cover; transform:scaleX(-1); }
.the-camera:has(.the-camera__guide[data-direction=back]) video { transform:none; }
.the-camera__guide { pointer-events:none; position:absolute; inset:8% 19% 27%; border:3px solid rgba(255,255,255,.88); border-radius:48% 48% 42% 42%; box-shadow:0 0 0 999px rgba(0,0,0,.24),0 0 28px rgba(223,7,18,.5); }
.the-camera__guide::after { content:'↑'; position:absolute; right:-54px; top:42%; color:#ff3340; font-size:2.6rem; font-weight:900; filter:drop-shadow(0 2px 3px #000); }
.the-camera__guide[data-direction=left]::after { content:'←' }.the-camera__guide[data-direction=right]::after { content:'→' }.the-camera__guide[data-direction=top] { inset:9% 12% 35%; border-radius:50%; }.the-camera__guide[data-direction=top]::after { content:'↓'; right:46%; top:auto; bottom:-60px; }.the-camera__guide[data-direction=back] { inset:12% 12% 31%; border-radius:46% 46% 38% 38%; }.the-camera__guide[data-direction=back]::after { content:'↔'; right:42%; top:auto; bottom:-55px; }
.the-camera>p { position:absolute; left:12px; right:12px; bottom:68px; z-index:3; padding:10px 13px; margin:0; border-radius:12px; text-align:center; font-weight:800; background:rgba(7,9,13,.78); backdrop-filter:blur(8px); }.the-camera>p[data-state=good]{background:rgba(20,155,109,.9)}.the-camera>p[data-state=warn]{background:rgba(170,77,0,.9)}
.the-camera>div:last-child { display:flex; justify-content:center; gap:10px; padding:14px; }.the-camera button { min-height:42px; padding:9px 17px; border:1px solid #50545d; border-radius:999px; color:#fff; background:#181b21; font-weight:900; cursor:pointer; }.the-camera [data-capture-now]{border-color:var(--red);background:var(--red)}
@media(max-width:700px){.the-assess{padding-top:100px}.the-assess__intro{margin-bottom:28px}.the-assess__intro h1{font-size:clamp(2.5rem,13vw,4rem)}.the-assess__form{padding:28px 17px 22px}.the-assess__step{min-height:0}.the-assess__grid,.the-photo{grid-template-columns:1fr}.the-photo__drop{min-height:260px}.the-photo__checks{padding:18px}.the-assess__summary{grid-template-columns:1fr 1fr}.the-assess__actions{position:sticky;bottom:0;padding:14px 0 0;background:#fff}.the-assess__actions button{padding:10px 18px}.the-assess__privacy{gap:9px;font-size:.74rem}.the-assess__top{padding:18px}.the-assess__top strong{font-size:.86rem}.the-assess__top span{font-size:.78rem}}
@media(max-width:700px){.the-pose{grid-template-columns:78px 1fr;padding:12px}.the-pose__head{width:58px;height:72px}.the-camera{border-radius:16px}.the-camera video{height:min(56vh,520px);aspect-ratio:3/4}.the-camera__guide{inset:10% 15% 29%}.the-camera>p{bottom:64px;font-size:.78rem}.the-photo__drop{min-height:280px}.the-photo__open,.the-photo__choose{width:min(250px,88%)}}
@media(prefers-reduced-motion:reduce){.the-pose::after{animation:none!important}.the-assess__step{animation:none}}