/* R96: caption and RTL green dots inside the existing floating account card. */
@font-face{
 font-family:NexaSurveyCairo;
 src:url('survey-cairo-arabic-r91.woff2') format('woff2');
 font-style:normal;font-weight:200 1000;font-display:swap;
 unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+10E60-10E7F,U+1EE00-1EEFF;
}
@font-face{
 font-family:NexaSurveyCairo;
 src:url('survey-cairo-latin-r91.woff2') format('woff2');
 font-style:normal;font-weight:200 1000;font-display:swap;
 unicode-range:U+0000-05FF,U+2000-206F,U+20A0-20CF,U+2100-22FF,U+FEFF,U+FFFD;
}
.usage-form{
 --survey-ink:#493b62;--survey-purple:#7048b4;--survey-line:#ddd5eb;
 margin:0;text-align:right;color:var(--survey-ink);
 font-family:NexaSurveyCairo,Tahoma,Arial,sans-serif;
 font-size:14px;font-weight:500;line-height:1.75;letter-spacing:0;
}
.usage-form h2{
 margin:0 0 22px;padding:11px 14px;border:1px solid #c6b4e3;border-radius:12px;
 background:#f1ecfa;color:#51416d;font-family:inherit;font-size:15.5px;font-weight:650;
 line-height:1.85;letter-spacing:0;text-align:center;text-wrap:balance;outline-offset:4px;
}
.usage-hint{margin:-10px 0 18px;color:#7c718d;font-size:11px;line-height:1.7;text-align:center}
.usage-question{min-width:0;margin:0 0 22px;padding:0;border:0}
.usage-question legend{
 float:none;display:grid;grid-template-columns:25px minmax(0,1fr);align-items:start;gap:8px;
 width:100%;margin:0 0 11px;padding:0;color:#6844b4;
 font-family:inherit;font-size:15px;font-weight:700;line-height:1.85;letter-spacing:0;
}
.usage-question-text{display:block;min-width:0;padding-top:1px;color:#6844b4;text-wrap:pretty}
.usage-number{
 display:inline-flex;align-items:center;justify-content:center;width:25px;height:27px;
 margin:0;border:1px solid #ddd1ef;border-radius:8px;color:#6844b4;
 font-family:inherit;font-size:14px;font-weight:700;line-height:1;
}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 .usage-question-text,.usage-number{background-image:linear-gradient(110deg,#7144c4,#365fb9);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
.usage-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:stretch}
.usage-choice{position:relative;display:flex;min-width:0;cursor:pointer}
.usage-choice input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.usage-choice>span{
 display:grid;grid-template-columns:12px minmax(0,1fr) 12px;align-items:center;column-gap:4px;width:100%;min-width:0;min-height:64px;
 padding:9px 7px;border:1.5px solid var(--survey-line);border-radius:12px;
 background:#faf8fd;color:#615372;font-family:inherit;font-size:13px;font-weight:600;
 line-height:1.7;letter-spacing:0;text-align:center;
 transition:border-color .15s,background-color .15s,color .15s;
}
/* This slot exists in both states. Selecting never takes space from the label. */
.usage-choice>span::before{
 content:'✓';grid-area:1/1;width:12px;margin:0;
 color:#6f45b4;font-family:Arial,sans-serif;font-size:12px;font-weight:700;line-height:1;
 visibility:hidden;pointer-events:none;
}
.usage-choice-text{grid-area:1/2;display:block;min-width:0;max-width:100%;margin:0;padding:0;text-align:center;line-height:inherit;font:inherit}
.usage-choice>span::after{content:'';grid-area:1/3;display:block;width:12px;visibility:hidden;pointer-events:none}
.usage-form.usage-font-fallback{font-family:Tahoma,Arial,sans-serif}
.usage-choice input:checked+span{border-color:#9570d1;background:#eee6fa;color:#4d2d7d}
.usage-choice input:checked+span::before{visibility:visible}
.usage-choice input:focus-visible+span{outline:3px solid #7149b6;outline-offset:3px}
.usage-choice input:disabled+span{cursor:wait}
.usage-confirm{
 display:block;width:100%;min-height:46px;padding:10px 16px;border:0;border-radius:12px;
 background:linear-gradient(110deg,#8c35e7,#6745e7 60%,#326fd4);color:#fff;
 font-family:inherit;font-size:14.5px;font-weight:700;line-height:1.65;letter-spacing:0;
}
.usage-confirm:disabled{background:#e9e3f1;color:#9789a8;cursor:default}
.usage-confirm:focus-visible{outline:3px solid #7149b6;outline-offset:4px}
.usage-form .error-message{margin:0 0 12px;font-family:inherit;font-size:12px;line-height:1.7}
.account-card.is-questionnaire{max-width:470px;padding:24px 22px 16px}
.account-card.is-questionnaire .account-header{margin:0 0 19px}
.account-card.is-questionnaire .account-footer{margin:14px 2px 0;padding-top:11px;border-top:1px solid #e8e1f0;color:#7c718d;font-size:10px}
.account-card.is-questionnaire .signout-button{font-size:10px}
@media(max-width:700px){
 .page-shell:has(.account-card.is-questionnaire:not([hidden])){padding:max(76px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom))}
 .account-card.is-questionnaire{max-width:390px;padding:20px 17px 13px}
 .usage-form h2{font-size:14.5px;padding:10px 12px;margin-bottom:20px}
 .usage-question{margin-bottom:20px}
 .usage-question legend{font-size:14px;gap:7px;margin-bottom:10px}
 .usage-options{gap:7px}
 .usage-choice>span{font-size:12.5px;min-height:60px;padding:9px 5px}
 .usage-confirm{font-size:14px}
}
@media(max-width:360px){
 .account-card.is-questionnaire{padding-inline:14px}
 .usage-form h2{font-size:14px}
 .usage-question legend{font-size:13.5px;gap:6px;grid-template-columns:24px minmax(0,1fr)}
 .usage-number{width:24px;height:26px;font-size:13px}
 .usage-options{gap:6px}
 .usage-choice>span{font-size:12px;padding-inline:4px;grid-template-columns:10px minmax(0,1fr) 10px;column-gap:3px}
 .usage-choice>span::before{width:10px;font-size:11px}
 .usage-choice>span::after{width:10px}
}
@media(prefers-reduced-motion:reduce){.usage-choice>span{transition:none}}
@media(forced-colors:active){
 .usage-question-text,.usage-number{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}
 .usage-form h2{border-color:CanvasText}
 .usage-choice input:checked+span{border-color:Highlight}
 .usage-choice input:checked+span::before{color:Highlight}
}

/* The card stays in the page; hidden contents retain its size during saving. */
.account-card{position:relative}
.account-content{min-width:0}
.account-card.is-subscription-loading>.account-content{opacity:0;visibility:hidden;pointer-events:none}
.subscription-loader{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:22px;border-radius:inherit;color:#62517e;outline:none;opacity:1;background:transparent;transition:opacity 180ms ease}
.subscription-loader__caption{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:6px;margin:0;max-width:100%;font-family:NexaSurveyCairo,Tahoma,Arial,sans-serif;font-size:12px;font-weight:500;line-height:1.8;text-align:center}
.subscription-loader.usage-font-fallback .subscription-loader__caption{font-family:Tahoma,Arial,sans-serif}
/* First dot is on the right. The next two appear toward the left. */
.subscription-loader__dots{direction:ltr;display:inline-flex;flex-direction:row-reverse;align-items:center;justify-content:center;gap:3px;width:18px;height:10px;flex:none}
.subscription-loader__dots i{display:block;width:3px;height:3px;border-radius:50%;background:#179565;flex:none}
.subscription-loader__dots i:nth-child(2){animation:subscription-dot-second 840ms ease-in-out infinite}
.subscription-loader__dots i:nth-child(3){animation:subscription-dot-third 840ms ease-in-out infinite}
.subscription-loader.is-leaving{opacity:0;pointer-events:none}
.account-card.is-subscription-revealing>.account-content{animation:subscription-account-in 420ms cubic-bezier(.2,.7,.25,1) both}
@keyframes subscription-dot-second{0%,18%,100%{opacity:0}33%,85%{opacity:1}}
@keyframes subscription-dot-third{0%,48%,100%{opacity:0}63%,85%{opacity:1}}
@keyframes subscription-account-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.subscription-loader__caption{font-size:11px}}
@media(prefers-reduced-motion:reduce){.subscription-loader__dots i,.account-card.is-subscription-revealing>.account-content{animation:none!important;transform:none}.subscription-loader{transition:none}.subscription-loader__dots i{opacity:1}}

/* No-survey entry holds the smaller login bounds, then opens the account card. */
.account-card.is-entry-compact{max-width:390px;height:240px;min-height:0}
.account-card.is-entry-compact>.account-content{display:none}
.account-card.is-entry-expanding{overflow:hidden}
@media(max-width:700px){.account-card.is-entry-compact{max-width:330px;height:220px}}