/* Supplied design stylesheet, every rule scoped under html.signup-screen/body.signup-screen so it cannot leak into other pages. */
html.signup-screen{--cream: #faf9f5;
  --ink: #292a22;
  --muted: #77786b;
  --yellow: #f7e68b;
  --yellow-hover: #f0dc72;
  --line: #dedfd5;
  --sans: "DM Sans", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;}
.signup-screen *{box-sizing: border-box;}
body.signup-screen{margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;}
.signup-screen button,.signup-screen input{font: inherit;}
.signup-screen button,.signup-screen a{-webkit-tap-highlight-color: transparent; touch-action: manipulation;}
.signup-screen button{cursor: pointer;}
.signup-screen a{color: inherit; text-decoration: none;}
.signup-screen button:focus-visible,.signup-screen a:focus-visible{outline: 2px solid #8c7a2b; outline-offset: 4px;}
.signup-screen [hidden]{display: none !important;}
.signup-screen .brand-header{padding: 48px 32px 0;
  text-align: center;}
.signup-screen .wordmark{display: inline-flex;
  align-items: baseline;
  font-size: 46px;
  font-weight: 900;
  letter-spacing: -3.7px;
  line-height: 1;}
.signup-screen .wordmark-dot{display: inline-block;
  height: 7px;
  width: 7px;
  border-radius: 50%;
  margin-left: 5px;
  background: var(--ink);}
.signup-screen .signup-main{display: grid;
  place-items: center;
  padding: 75px 24px 107px;}
.signup-screen .signup{width: 100%;
  max-width: 360px;}
.signup-screen .signup-intro{text-align: center;}
.signup-screen .signup-intro h1{margin: 0;
  font-size: 46px;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -1.9px;}
.signup-screen .signup-intro h1 em{font-family: var(--serif);
  font-size: 1.22em;
  font-weight: 400;
  letter-spacing: -1.5px;}
.signup-screen .signup-intro p{margin: 14px 0 0;
  color: #6f7163;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;}
.signup-screen form{margin-top: 35px; position: relative;}
.signup-screen .field-label{display: block;
  margin-bottom: 9px;
  font-size: 11px;
  font-weight: 550;
  color: #626656;}
.signup-screen .phone-control{display: flex;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fffefa;
  transition: border-color .15s ease, box-shadow .15s ease;}
.signup-screen .phone-control:focus-within{border-color: #b0a16a;
  box-shadow: 0 0 0 3px #f7e68b45;}
.signup-screen .phone-control.invalid{border-color: #ad5e4d;}
.signup-screen .country-trigger{display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 7px 0;
  font-size: 13px;
  color: var(--ink);
  background: transparent;
  border: none;}
.signup-screen .country-trigger svg{width: 13px;
  height: 13px;
  fill: none;
  stroke: #7e8171;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .15s ease;}
.signup-screen .country-trigger[aria-expanded="true"] svg{transform: rotate(180deg);}
.signup-screen .input-divider{width: 1px; height: 18px; background: #e1e3d7; margin: 0 13px; flex: none;}
.signup-screen #phone{display: block;
  min-width: 0;
  width: 100%;
  padding: 17px 0;
  font-size: 13px;
  line-height: 20px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  outline: none;}
.signup-screen #phone::placeholder{color: #7d8072; opacity: 1;}
.signup-screen .send-code{display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  margin-top: 14px;
  padding: 16px 22px;
  color: var(--ink);
  background: var(--yellow);
  border: none;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
  transition: background .15s ease, transform .15s ease;}
.signup-screen .send-code:hover{background: var(--yellow-hover);}
.signup-screen .send-code:active{transform: translateY(1px);}
.signup-screen .send-code svg{width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;}
.signup-screen .phone-hint{margin: 17px 0 0; text-align: center; font-size: 10px; line-height: 1.6; color: #707363;}
.signup-screen .form-message{font-size: 11px; line-height: 1.6; margin: 16px 0 0; text-align: center; color: #6b705d;}
.signup-screen .form-message.error{color: #9a4c3b;}
.signup-screen .country-menu{position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 82px;
  padding: 11px;
  border: 1px solid #e1e2d6;
  border-radius: 13px;
  background: #fffefa;
  box-shadow: 0 9px 28px #292a2212;}
.signup-screen .country-menu-heading{padding: 5px 9px 9px; color: #747866; font-size: 10px;}
.signup-screen .country-option{display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  width: 100%;
  min-height: 39px;
  border: none;
  border-radius: 7px;
  padding: 10px;
  background: transparent;
  color: #5b604e;
  text-align: left;
  font-size: 11px;}
.signup-screen .country-option:hover{background: #f2f2e9;}
.signup-screen .country-option.selected{background: #f6efcc; color: var(--ink);}
.signup-screen .custom-country{border-top: 1px solid #e8e9df; margin-top: 9px; padding: 13px 9px 4px;}
.signup-screen .custom-country label{font-size: 10px; color: #727662; display: block; margin-bottom: 8px;}
.signup-screen .custom-code-row{display: flex; gap: 8px;}
.signup-screen .custom-code-row input{min-width: 0; flex: 1; border: 1px solid var(--line); border-radius: 7px; padding: 9px 10px; background: white; font-size: 11px;}
.signup-screen .custom-code-row button{border: none; border-radius: 7px; padding: 9px 14px; background: #f2f1e7; font-size: 10px;}
.signup-screen .country-error{color: #9a4c3b; font-size: 10px; line-height: 1.5; margin: 9px 0 0;}
.signup-screen .brand-footer{padding: 0 24px 34px;
  text-align: center;
  font-size: 11px;
  color: #747766;
  line-height: 1.5;}
.signup-screen .brand-footer em{font-family: var(--serif); font-size: 17px;}
@media (min-height: 1000px){.signup-screen .signup-main{padding-bottom: 150px;}}
@media (max-width: 600px){.signup-screen .brand-header{padding-top: 33px;}
.signup-screen .wordmark{font-size: 41px; letter-spacing: -3.4px;}
.signup-screen .wordmark-dot{width: 6px; height: 6px; margin-left: 4px;}
.signup-screen .signup-main{padding: 64px 28px 95px;}
.signup-screen .signup-intro h1{font-size: 42px; letter-spacing: -1.8px;}
.signup-screen .signup-intro p{font-size: 12px; margin-top: 12px;}
.signup-screen form{margin-top: 32px;}
.signup-screen .field-label{font-size: 11px;}
.signup-screen .phone-control{min-height: 56px; padding: 0 13px;}
.signup-screen #phone{font-size: 16px;}
.signup-screen .country-trigger{font-size: 14px;}
.signup-screen .send-code{min-height: 54px; font-size: 13px;}
.signup-screen .brand-footer{padding-bottom: 28px; font-size: 10px;}
.signup-screen .custom-code-row input{font-size: 16px;}}
@media (max-height: 650px){.signup-screen .brand-header{padding-top: 25px;}
.signup-screen .signup-main{padding-top: 42px; padding-bottom: 48px;}
.signup-screen .brand-footer{padding-bottom: 22px;}}
@media (prefers-reduced-motion: reduce){.signup-screen *,.signup-screen *::before,.signup-screen *::after{transition: none !important;}}

/* Integration additions (same scope): the one-time code step reuses the phone screen's styling. */
.signup-screen .code-control{display:flex;align-items:center;width:100%;min-height:56px;padding:0 14px;border:1px solid var(--line);border-radius:11px;background:#fffefa;transition:border-color .15s ease,box-shadow .15s ease}
.signup-screen .code-control:focus-within{border-color:#b0a16a;box-shadow:0 0 0 3px #f7e68b45}
.signup-screen .code-control.invalid{border-color:#ad5e4d}
.signup-screen #code{display:block;min-width:0;width:100%;padding:17px 0;font-size:16px;line-height:20px;letter-spacing:.35em;border:none;border-radius:0;background:transparent;color:var(--ink);outline:none}
.signup-screen #code::placeholder{color:#b9bbad;opacity:1;letter-spacing:.35em}
.signup-screen .dev-note{margin:17px 0 0;padding:11px 13px;border:1px dashed #d9cf8e;border-radius:9px;background:#fbf6d9;font-size:11px;line-height:1.6;color:#5b604e;text-align:center}
.signup-screen .dev-note code{font:inherit;font-weight:700;letter-spacing:.2em;color:var(--ink)}
.signup-screen .switch-number{margin:17px 0 0;text-align:center;font-size:11px;color:#707363}
.signup-screen .switch-number a{text-decoration:underline;text-underline-offset:3px}
.signup-screen .resend-code{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}