:root{color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#111213;background:#fff;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{width:min(100% - 64px,560px);margin:clamp(60px,12vh,120px) auto 64px}h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(36px,5.3vw,54px);line-height:1.08;letter-spacing:-2.1px;font-weight:500;margin:0 0 23px;outline:none}.subtitle{font-size:23px;line-height:1.55;color:#777;margin:0 0 54px}.phone-field{height:78px;border:1.5px solid #858585;border-radius:6px;display:flex;align-items:center}.phone-field:focus-within{border-color:#111;box-shadow:0 0 0 1px #111}.country{display:flex;align-items:center;gap:10px;padding:0 21px;font-size:28px;border-right:1px solid #dedee2;white-space:nowrap}.country-code{font-size:19px;color:#777}input{font:inherit;color:inherit;background:transparent;min-width:0}.phone-field input{width:100%;border:0;outline:0;font-size:25px;padding:0 18px}.phone-field input::placeholder{color:#aaa}.consent{font-size:20px;line-height:1.65;color:#777;margin:32px 0 62px}a{color:inherit;text-underline-offset:4px}.primary{display:flex;justify-content:center;align-items:center;gap:17px;width:100%;min-height:78px;border:0;border-radius:20px;background:#111213;color:#fff;font-size:23px;font-weight:550;text-decoration:none;cursor:pointer;font-family:inherit}.primary span{font-size:30px;font-weight:400}.primary:hover{background:#292a2b}.primary:disabled{opacity:.55;cursor:wait}.fine{font-size:12px;line-height:1.6;color:#999;margin-top:22px}.code-field{position:relative;height:88px;margin-top:5px}.code-boxes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;height:100%}.code-boxes span{border:1.5px solid #e2e3e7;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:32px}.code-field:focus-within .code-boxes span.active{border-color:#777}.code-field input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:text;font-size:24px;caret-color:transparent}.code-help{font-size:20px;line-height:1.65;color:#777;margin:72px 0 0}.text-button{border:0;background:none;color:inherit;font:inherit;font-weight:550;padding:0;text-decoration:underline;text-underline-offset:4px;cursor:pointer}.text-button:disabled{color:#b5b5b5;cursor:default}.success-number{font-size:20px;color:#777;text-align:center;margin:20px 0 42px}#message{font-size:16px;line-height:1.5;color:#9e2929;margin-top:22px}#message:empty{display:none}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:focus-visible{outline:2px solid #111;outline-offset:5px}@media(max-width:480px){main{width:calc(100% - 48px);margin-top:64px}h1{font-size:38px;letter-spacing:-1.65px}.subtitle{font-size:19px;margin-bottom:40px}.phone-field{height:68px}.country{padding:0 13px;gap:7px;font-size:24px}.country-code{font-size:16px}.phone-field input{font-size:21px;padding:0 12px}.consent{font-size:16px;margin:26px 0 42px}.primary{min-height:68px;font-size:20px;border-radius:17px}.code-field{height:65px}.code-boxes{gap:8px}.code-boxes span{font-size:26px}.code-help{font-size:16px;margin-top:52px}}

.name-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}#profile-form input{width:100%;height:74px;border:1.5px solid #e2e3e7;border-radius:6px;padding:0 24px;font-size:23px;margin-bottom:20px}#profile-form .primary{margin-top:12px}.channel{display:flex;justify-content:center;align-items:center;gap:12px;font-size:21px;font-weight:600;border-bottom:2px solid #111;padding:0 0 20px;margin-bottom:32px}.message-icon{display:inline-flex;background:#27cd42;width:34px;height:34px;border-radius:9px;color:white;align-items:center;justify-content:center}.qr-card{display:block;width:306px;max-width:100%;padding:17px;border:1.5px solid #e2e3e7;border-radius:20px;box-shadow:0 2px 3px #00000008;margin:24px auto 30px}.qr-card img{display:block;width:100%;height:auto}.qr-help{font-size:20px;color:#777;text-align:center;line-height:1.5}.number-button{width:100%;display:flex;justify-content:center;align-items:center;gap:18px;border:1.5px solid #e2e3e7;border-radius:20px;background:white;min-height:72px;font:600 21px -apple-system,BlinkMacSystemFont,Arial,sans-serif;cursor:pointer;color:#111}.signout{display:block;margin:28px auto;color:#999;font-size:15px}#success-screen .subtitle{margin-bottom:42px}@media(max-width:480px){#profile-form input{font-size:18px;height:65px;padding:0 14px}.name-fields{gap:12px}.qr-card{width:270px}.qr-help{font-size:16px}.channel{font-size:18px}#success-title{font-size:36px}.number-button{font-size:19px}}
/* Match the compact reference proportions at standard browser zoom. */
main{width:min(calc(100% - 48px),340px);margin:clamp(48px,12vh,96px) auto 48px}
h1{font-size:32px;line-height:1.15;letter-spacing:-1.3px;margin-bottom:16px;font-weight:400}
.subtitle{font-size:16px;line-height:1.5;margin-bottom:34px}
.phone-field{height:48px;border:1px solid #858585;border-radius:4px}
.phone-field:focus-within{border-color:#777;box-shadow:none}
.country{font-size:21px;padding:0 15px;gap:8px;height:24px}
.country-code{font-size:15px}
.phone-field input{font-size:18px;padding:0 11px}
.consent{font-size:14px;line-height:1.65;margin:21px 0 40px}
.primary{min-height:48px;border-radius:12px;font-size:16px;gap:12px;font-weight:500}
.primary span{font-size:23px}.fine{font-size:10px;line-height:1.5;margin-top:18px}
.code-field{height:56px}.code-boxes{gap:8px}.code-boxes span{font-size:24px;border-radius:4px;border-width:1px}
.code-help{font-size:14px;line-height:1.65;margin-top:44px}
#profile-form input{height:48px;font-size:16px;padding:0 16px;margin-bottom:12px;border-width:1px;border-radius:4px}.name-fields{gap:12px}#profile-form .primary{margin-top:8px}
#success-title{font-size:32px}#success-screen .subtitle{margin-bottom:34px}.channel{font-size:16px;padding-bottom:16px;margin-bottom:20px}.message-icon{width:26px;height:26px;border-radius:7px}
.qr-card{width:202px;padding:13px;border-radius:13px;margin:20px auto}.qr-help{font-size:14px}.number-button{min-height:48px;font-size:16px;border-radius:12px}.success-number{font-size:16px;margin:16px 0 28px}.signout{font-size:12px}#message{font-size:14px}

body{min-height:100svh;display:flex;align-items:center;font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;letter-spacing:-.011em}main{margin:48px auto}h1{font-weight:500;letter-spacing:-.7px}.subtitle{font-size:15px;line-height:1.625;margin-bottom:32px}h1{margin-bottom:12px}.primary{font-size:15px}.phone-field input{font-size:17px}.country-chevron{color:#aaa;font-size:18px}.country{width:70px;flex-shrink:0;justify-content:center;padding:0 12px;gap:10px}.country img{width:21px;height:14px;object-fit:cover}.consent{margin-top:20px;margin-bottom:40px}#profile-form input{font-size:17px}

/* The real OTP input stays accessible; show its focus and caret in the boxes. */
.code-boxes span{position:relative}
.code-field:focus-within .code-boxes span.active{border-color:#111213;box-shadow:0 0 0 1px #111213}
.code-field:focus-within .code-boxes span.selected{background:#e9e9ee}
.code-field:focus-within .code-boxes span.caret::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:1.1em;background:currentColor;transform:translate(-50%,-50%);pointer-events:none;animation:otp-caret-blink 1s steps(1,end) infinite}
.code-field:focus-within .code-boxes span.caret.filled::after{left:calc(50% - .36em)}
.code-field:focus-within .code-boxes span.caret.caret-after::after{left:calc(50% + .36em)}
@media(forced-colors:active){.code-field:focus-within .code-boxes span.active{outline:2px solid Highlight}.code-field:focus-within .code-boxes span.caret::after{background:CanvasText}.code-field:focus-within .code-boxes span.selected{background:Highlight;color:HighlightText}}

/* Keep the calling code outside the national-number input. The native select
   provides keyboard and mobile picker behavior without a custom menu. */
.country{position:relative;width:104px;padding:0 10px}
.country-display{display:flex;align-items:center;gap:8px}
.country-code{font-size:15px;color:#555}
.country-select{position:absolute;inset:-11px 0;width:100%;height:46px;opacity:0;cursor:pointer;font:inherit}
.country:focus-within{outline:2px solid #111213;outline-offset:3px;border-radius:2px}
@media(forced-colors:active){.country:focus-within{outline-color:Highlight}}

/* Display the approved original logo without its surrounding white canvas.
   Image bytes and proportions are preserved; only the display window crops. */
.brand-mark{position:relative;width:180px;max-width:100%;aspect-ratio:1220/470;overflow:hidden;margin-bottom:28px}
.brand-mark img{position:absolute;width:125.902%;max-width:none;height:auto;left:-13.525%;top:-63.83%}
@media(max-width:480px){.brand-mark{width:160px;margin-bottom:24px}}

@keyframes otp-caret-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.code-field:focus-within .code-boxes span.caret::after{animation:none;opacity:1}}