/* Onboarding, phone keypad, profile compact layout, and related responsive corrections. */

/* Quiet editorial typography pass */
.ob-card h2,.tools-card h2,.profile-pname,.dept-name,.modal-title,.header-wordmark,.ob-wordmark{font-family:var(--serif);font-weight:400;letter-spacing:-.015em}.ob-btn,.modal-actions button{font-family:var(--sans);font-weight:600;letter-spacing:.035em}.dept-name{font-size:1.18rem}.header-wordmark,.ob-wordmark{letter-spacing:.01em}
@media(min-width:600px){#ob-college,#ob-login,#ob-phone,#ob-done{padding:2rem}.app-body{max-width:640px;margin:0 auto;width:100%}.admin-wrap,.profile-wrap{max-width:640px;margin:0 auto}.bottom-nav{left:50%;transform:translateX(-50%);max-width:640px;border-radius:24px 24px 0 0;border-left:1px solid var(--border);border-right:1px solid var(--border)}}


/* ─── Compact setup/profile fixes ─── */
@media(max-height:760px){
  #ob-college>div,#ob-login>div,#ob-change-password>div,#ob-done>div{padding:.8rem!important;justify-content:center!important}
  #ob-login .ob-card,#ob-change-password .ob-card{padding:1rem;gap:.72rem;border-radius:20px;box-shadow:var(--shadow-sm)}
  #ob-login .ob-card h2,#ob-change-password .ob-card h2{font-size:1.9rem;line-height:.95;font-weight:400;letter-spacing:-.02em}
  #ob-login .ob-card p,#ob-change-password .ob-card p{font-size:.78rem;line-height:1.35}
  #ob-login .ob-input,#ob-change-password .ob-input{padding:.72rem .9rem;font-size:.88rem}
  #ob-login .field,#ob-change-password .field{gap:.32rem}
  #ob-login #student-preview{padding:.6rem .8rem!important;gap:.22rem!important}
  #ob-login .ob-btn,#ob-change-password .ob-btn{padding:.78rem;font-size:.9rem}
  #ob-login .step-dots,#ob-change-password .step-dots{margin-top:.7rem!important}
}
@media(max-width:480px){
  #ob-login,#ob-change-password{height:100dvh;min-height:100dvh;overflow:hidden}
  #ob-login>div,#ob-change-password>div{min-height:100dvh;max-height:100dvh;overflow:hidden}
  #tab-profile{height:calc(100dvh - 140px);overflow:hidden!important;padding:.6rem .9rem 5.2rem!important}
  #tab-profile .profile-card{margin-bottom:.55rem;border-radius:20px}
  #tab-profile .profile-banner{padding:1rem 1rem 1.4rem}
  #tab-profile .profile-avatar{width:50px;height:50px;font-size:1.15rem;margin-bottom:.45rem}
  #tab-profile .profile-pname{font-size:1.75rem;line-height:1}
  #tab-profile .profile-preg{font-size:.66rem}
  #tab-profile .posting-badge{margin-top:.5rem!important;padding:.25rem .55rem}
  #tab-profile .profile-body{padding:.75rem .95rem}
  #tab-profile .profile-field{padding:.52rem 0}
  #tab-profile .pf-label{font-size:.62rem}
  #tab-profile .pf-val{font-size:.82rem}
  #tab-profile .app-footer{display:none}
}
.password-rules{background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--r-sm);padding:.75rem .85rem;color:var(--muted);font-size:.74rem;line-height:1.45}
.password-rules strong{color:var(--ink)}


/* ─── Final mobile polish: no setup scroll, bottom nav only in app, compact dialpad ─── */
html,body{height:100%;overscroll-behavior:none}
#ob-college,#ob-login,#ob-change-password,#ob-phone,#ob-done{
  height:100dvh;min-height:100dvh;max-height:100dvh;overflow:hidden;
}
#ob-college>div,#ob-login>div,#ob-change-password>div,#ob-done>div{
  min-height:100dvh;max-height:100dvh;overflow:hidden;
}
#ob-college .ob-logo{margin-bottom:1rem;gap:.45rem}
#ob-college .ob-logo-mark{width:52px;height:52px;border-radius:16px}
#ob-college .ob-logo-mark svg{width:28px;height:28px}
#ob-college .ob-wordmark{font-size:1.65rem}
#ob-college .ob-tagline{font-size:.68rem}
#ob-college .ob-card{padding:1.05rem;gap:.72rem;border-radius:20px;box-shadow:var(--shadow-sm)}
#ob-college .ob-card h2{font-size:1.85rem;line-height:.95}
#ob-college .ob-card p{font-size:.76rem;line-height:1.35}
#ob-college .dropdown-wrap input,#ob-college .ob-input{padding:.72rem .9rem;font-size:.88rem}
#ob-college .field{gap:.3rem}
#ob-college .ob-btn{padding:.78rem;font-size:.9rem}
#ob-college .step-dots{margin-top:.7rem!important}

/* nav must never appear during onboarding */
.bottom-nav{display:none!important}
#app-main.active ~ .bottom-nav{display:flex!important}

/* phone keypad: keep Done inside the 3-column keypad */
#ob-phone{padding:.7rem .9rem .5rem!important}
#ob-phone>div{padding:0!important;min-height:calc(100dvh - 34px);max-height:calc(100dvh - 34px);overflow:hidden;justify-content:center!important}
.phone-screen-inner{min-height:auto!important;height:calc(100dvh - 34px);max-height:calc(100dvh - 34px);padding:.45rem 0 .2rem!important;gap:.55rem!important;grid-template-rows:auto auto auto!important;justify-content:space-between}
.phone-label{font-size:clamp(1.75rem,7vw,2.25rem)!important;margin-top:0!important}
.phone-sublabel{font-size:.76rem!important;margin:.25rem 0 .6rem!important}
.phone-display{height:60px!important;border-radius:18px!important;font-size:clamp(1rem,5vw,1.32rem)!important;box-shadow:var(--shadow-sm)!important}
.keypad{grid-template-columns:repeat(3,72px)!important;gap:.55rem .85rem!important;align-self:center!important}
.key{width:72px!important;height:72px!important}
.key .num{font-size:1.5rem!important}
.key .letters{font-size:.48rem!important}
#key-confirm,#key-next{grid-column:auto!important;width:72px!important;height:72px!important;border-radius:50%!important;margin-top:0!important}
#key-confirm{background:var(--green)!important;border-color:var(--green)!important;box-shadow:0 4px 14px rgba(46,125,79,.16)!important}
#key-confirm .num{color:#fff!important;font-size:.82rem!important;font-weight:700!important;letter-spacing:0!important;line-height:1.05!important}
#key-next{background:#fff!important;border-color:rgba(36,35,49,.08)!important;box-shadow:0 4px 14px rgba(36,35,49,.07)!important}
#key-next .num{font-size:.66rem!important;color:var(--muted)!important;font-weight:700!important;line-height:1.1!important;padding:0 .35rem}
#ob-phone .ob-err{min-height:.8rem;font-size:.72rem}
#ob-phone .ob-btn.secondary{padding:.6rem!important;font-size:.82rem!important;margin-top:.25rem!important;background:#fff;border-color:var(--border);box-shadow:var(--shadow-sm)}
#ob-phone>.step-dots{padding:.35rem!important}

.signout-btn{
  width:100%;margin-top:.7rem;padding:.92rem 1rem;border-radius:999px;
  background:#fff;color:var(--ink);border:1.5px solid var(--border-strong);
  font-family:var(--sans);font-size:.92rem;font-weight:700;letter-spacing:.02em;
  box-shadow:var(--shadow-sm);cursor:pointer;
}
.signout-btn:active{transform:scale(.98);box-shadow:none}

@media(max-height:680px){
  #ob-college .ob-logo{margin-bottom:.65rem}
  #ob-college .ob-logo-mark{width:44px;height:44px}
  #ob-college .ob-wordmark{font-size:1.45rem}
  #ob-college .ob-card{padding:.85rem;gap:.56rem}
  #ob-college .ob-card h2{font-size:1.6rem}
  #ob-college .ob-card p{display:none}
  #ob-college .dropdown-wrap input,#ob-college .ob-input{padding:.62rem .8rem}
  #ob-college .ob-btn{padding:.68rem}
  .phone-label{font-size:1.65rem!important}
  .phone-sublabel{display:none}
  .phone-display{height:54px!important}
  .keypad{grid-template-columns:repeat(3,66px)!important;gap:.45rem .72rem!important}
  .key,#key-confirm,#key-next{width:66px!important;height:66px!important}
}


/* === FINAL MOBILE POLISH FIXES ===
   1) Onboarding containers get real width, so cards don't shrink.
   2) College screen is larger again, but still fits on small phones.
   3) Phone Done is back inside the keypad as a compact green key.
   4) Bottom nav is hidden until the actual app opens.
*/
body:not(.app-open) .bottom-nav{display:none!important}
body.app-open .bottom-nav{display:flex!important}
.screen{overflow:hidden!important}
#ob-college,#ob-login,#ob-change-password,#ob-phone,#ob-done{height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;overflow:hidden!important}
#ob-college>div,#ob-login>div,#ob-change-password>div,#ob-done>div,#ob-phone>div{width:100%!important;min-height:100%!important;max-height:100%!important;overflow:hidden!important}

/* restore the welcome/setup screen size */
#ob-college{padding:1.25rem!important}
#ob-college .ob-logo{margin-bottom:1.35rem!important;gap:.65rem!important}
#ob-college .ob-logo-mark{width:58px!important;height:58px!important;border-radius:18px!important}
#ob-college .ob-logo-mark svg{width:31px!important;height:31px!important}
#ob-college .ob-wordmark{font-size:1.9rem!important}
#ob-college .ob-tagline{font-size:.74rem!important}
#ob-college .ob-card{width:min(100%,480px)!important;max-width:480px!important;padding:1.45rem!important;gap:1rem!important;border-radius:26px!important;box-shadow:var(--shadow-md)!important}
#ob-college .ob-card h2{font-size:2.25rem!important;line-height:.95!important;letter-spacing:-.025em!important}
#ob-college .ob-card p{display:block!important;font-size:.82rem!important;line-height:1.45!important}
#ob-college .dropdown-wrap input,#ob-college .ob-input{padding:.9rem 1rem!important;font-size:.95rem!important;border-radius:16px!important}
#ob-college .field{gap:.42rem!important}
#ob-college .ob-btn{padding:1rem!important;font-size:.96rem!important}
#ob-college .step-dots{margin-top:.9rem!important}

/* phone screen: compact, with Done as the third key in bottom row */
#ob-phone{padding:.75rem .9rem .45rem!important}
.phone-screen-inner{width:min(100%,380px)!important;height:100%!important;max-height:100%!important;min-height:0!important;display:grid!important;grid-template-rows:auto auto auto!important;align-content:center!important;justify-content:center!important;gap:.8rem!important;padding:0!important;margin:0 auto!important}
.phone-label{font-size:clamp(1.85rem,7vw,2.35rem)!important;margin-top:0!important}
.phone-sublabel{font-size:.78rem!important;margin:.25rem 0 .7rem!important}
.phone-display{height:62px!important;border-radius:20px!important;font-size:clamp(1rem,5vw,1.3rem)!important}
.keypad{grid-template-columns:repeat(3,72px)!important;justify-content:center!important;gap:.55rem .9rem!important;align-self:center!important}
.key,#key-confirm,#key-next{width:72px!important;height:72px!important;min-width:72px!important;border-radius:50%!important;margin:0!important;grid-column:auto!important}
#key-confirm{background:var(--green)!important;border-color:var(--green)!important;box-shadow:0 6px 16px rgba(46,125,79,.18)!important}
#key-confirm .num{color:#fff!important;font-size:1rem!important;font-weight:700!important;line-height:1!important;letter-spacing:0!important}
#key-next{background:#fff!important;border-color:rgba(36,35,49,.08)!important;box-shadow:0 4px 14px rgba(36,35,49,.07)!important}
#key-next .num{font-size:.62rem!important;color:var(--muted)!important;font-weight:700!important;line-height:1.1!important;padding:0 .25rem!important}
#ob-phone .ob-btn.secondary{width:min(100%,280px)!important;margin:.15rem auto 0!important;padding:.68rem!important;border-radius:999px!important;box-shadow:var(--shadow-sm)!important}
#ob-phone>.step-dots{padding:.15rem!important;margin-top:.1rem!important}

@media(max-height:700px){
  #ob-college .ob-logo{margin-bottom:.85rem!important}
  #ob-college .ob-logo-mark{width:50px!important;height:50px!important}
  #ob-college .ob-wordmark{font-size:1.65rem!important}
  #ob-college .ob-card{padding:1rem!important;gap:.68rem!important}
  #ob-college .ob-card h2{font-size:1.8rem!important}
  #ob-college .ob-card p{display:none!important}
  #ob-college .dropdown-wrap input,#ob-college .ob-input{padding:.72rem .9rem!important}
  #ob-college .ob-btn{padding:.78rem!important}
  .phone-sublabel{display:none!important}
  .phone-display{height:56px!important}
  .keypad{grid-template-columns:repeat(3,66px)!important;gap:.45rem .72rem!important}
  .key,#key-confirm,#key-next{width:66px!important;height:66px!important;min-width:66px!important}
}



/* === PHONE SCREEN HARD FIT FIX ===
   Keeps the whole keypad screen visible on 360–430px phones without vertical scroll.
   Done stays as the third key in the keypad row. */
#ob-phone{
  height:100svh!important;
  min-height:100svh!important;
  max-height:100svh!important;
  padding:.55rem .9rem .45rem!important;
  overflow:hidden!important;
}
#ob-phone>div{
  height:calc(100svh - 38px)!important;
  min-height:0!important;
  max-height:calc(100svh - 38px)!important;
  padding:0!important;
  overflow:hidden!important;
  align-items:center!important;
  justify-content:center!important;
}
.phone-screen-inner{
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  width:min(100%,390px)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-evenly!important;
  align-items:center!important;
  gap:.45rem!important;
  padding:0!important;
  margin:0 auto!important;
}
.phone-screen-inner>div{width:100%!important;flex-shrink:0!important}
.phone-label{
  font-size:clamp(1.6rem,6.6vw,2.15rem)!important;
  line-height:.95!important;
  margin:0!important;
}
.phone-sublabel{
  font-size:.74rem!important;
  line-height:1.25!important;
  margin:.18rem 0 .42rem!important;
}
.phone-display{
  height:54px!important;
  max-width:330px!important;
  margin:0 auto!important;
  border-radius:18px!important;
  font-size:clamp(.96rem,4.8vw,1.22rem)!important;
}
.keypad{
  width:auto!important;
  display:grid!important;
  grid-template-columns:repeat(3,66px)!important;
  justify-content:center!important;
  gap:.42rem .82rem!important;
  align-self:center!important;
}
.key,#key-confirm,#key-next{
  width:66px!important;
  height:66px!important;
  min-width:66px!important;
  border-radius:50%!important;
  grid-column:auto!important;
  margin:0!important;
}
.key .num{font-size:1.42rem!important;line-height:1!important}
.key .letters{font-size:.43rem!important;margin-top:.1rem!important}
#key-confirm{background:var(--green)!important;border-color:var(--green)!important}
#key-confirm .num{color:#fff!important;font-size:.94rem!important;font-weight:700!important;line-height:1!important;letter-spacing:0!important}
#key-next{background:#fff!important;border-color:rgba(36,35,49,.08)!important}
#key-next .num{font-size:.58rem!important;color:var(--muted)!important;font-weight:700!important;line-height:1.05!important}
#ob-phone .ob-err{min-height:.55rem!important;font-size:.68rem!important;margin:0!important}
#ob-phone .ob-btn.secondary{
  width:min(100%,250px)!important;
  min-height:44px!important;
  padding:.55rem!important;
  margin:.05rem auto 0!important;
  border-radius:999px!important;
}
#ob-phone>.step-dots{
  height:26px!important;
  padding:0 0 .2rem!important;
  margin:0!important;
  flex-shrink:0!important;
}
@media(max-height:720px){
  .phone-label{font-size:1.55rem!important}
  .phone-sublabel{display:none!important}
  .phone-display{height:50px!important}
  .keypad{grid-template-columns:repeat(3,62px)!important;gap:.36rem .72rem!important}
  .key,#key-confirm,#key-next{width:62px!important;height:62px!important;min-width:62px!important}
  .key .num{font-size:1.32rem!important}
  #key-confirm .num{font-size:.86rem!important}
  #ob-phone .ob-btn.secondary{min-height:40px!important;padding:.48rem!important}
}
@media(max-height:640px){
  .phone-label{display:none!important}
  .phone-display{height:46px!important}
  .keypad{grid-template-columns:repeat(3,58px)!important;gap:.3rem .66rem!important}
  .key,#key-confirm,#key-next{width:58px!important;height:58px!important;min-width:58px!important}
  #ob-phone .ob-btn.secondary{min-height:38px!important}
}



/* PHONE SCREEN FINAL POLISH: balanced, no-scroll, compact vertical rhythm */
#ob-phone{
  height:100svh!important;
  min-height:100svh!important;
  max-height:100svh!important;
  padding:0 1rem!important;
  overflow:hidden!important;
  background:var(--paper)!important;
}
#ob-phone>div{
  height:calc(100svh - 34px)!important;
  min-height:0!important;
  max-height:calc(100svh - 34px)!important;
  padding:0!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
}
.phone-screen-inner{
  width:min(100%,390px)!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding-top:clamp(18px,4.4svh,36px)!important;
  gap:0!important;
  margin:0 auto!important;
}
.phone-screen-inner>div:first-child{
  width:100%!important;
  flex-shrink:0!important;
}
.phone-label{
  font-size:clamp(1.85rem,6.8vw,2.35rem)!important;
  line-height:1!important;
  margin:0 0 .42rem!important;
  text-align:center!important;
}
.phone-sublabel{
  display:none!important;
}
.phone-display{
  width:100%!important;
  max-width:375px!important;
  height:56px!important;
  margin:0 auto!important;
  border-radius:18px!important;
  padding:0 1rem!important;
  font-size:clamp(1.02rem,4.9vw,1.28rem)!important;
  letter-spacing:.07em!important;
  box-shadow:0 5px 16px rgba(36,35,49,.06)!important;
}
.keypad{
  width:auto!important;
  display:grid!important;
  grid-template-columns:repeat(3,68px)!important;
  justify-content:center!important;
  gap:.55rem 1rem!important;
  align-self:center!important;
  margin-top:clamp(22px,4.2svh,34px)!important;
  flex-shrink:0!important;
}
.key,#key-confirm,#key-next{
  width:68px!important;
  height:68px!important;
  min-width:68px!important;
  border-radius:50%!important;
  grid-column:auto!important;
  margin:0!important;
}
.key .num{font-size:1.45rem!important;line-height:1!important}
.key .letters{font-size:.43rem!important;margin-top:.13rem!important}
#key-confirm{
  background:var(--green)!important;
  border-color:var(--green)!important;
  box-shadow:0 7px 18px rgba(46,125,79,.18)!important;
}
#key-confirm .num{
  color:#fff!important;
  font-size:.92rem!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:0!important;
}
#key-next{
  background:#fff!important;
  border-color:rgba(36,35,49,.08)!important;
  box-shadow:0 4px 14px rgba(36,35,49,.07)!important;
}
#key-next .num{
  font-size:.55rem!important;
  color:var(--muted)!important;
  font-weight:700!important;
  line-height:1.05!important;
}
.phone-screen-inner>div:last-child{
  width:100%!important;
  margin-top:clamp(18px,3.2svh,26px)!important;
  flex-shrink:0!important;
}
#ob-phone .ob-err{
  min-height:.6rem!important;
  font-size:.68rem!important;
  margin:0!important;
}
#ob-phone .ob-btn.secondary{
  width:min(100%,285px)!important;
  min-height:44px!important;
  padding:.58rem!important;
  margin:.35rem auto 0!important;
  border-radius:999px!important;
  background:#fff!important;
  border:1px solid rgba(36,35,49,.12)!important;
  box-shadow:0 4px 14px rgba(36,35,49,.06)!important;
}
#ob-phone>.step-dots{
  height:34px!important;
  padding:0 0 .55rem!important;
  margin:0!important;
  align-items:center!important;
}
@media(max-height:700px){
  .phone-screen-inner{padding-top:14px!important}
  .phone-label{font-size:1.65rem!important;margin-bottom:.32rem!important}
  .phone-display{height:50px!important}
  .keypad{grid-template-columns:repeat(3,62px)!important;gap:.38rem .78rem!important;margin-top:18px!important}
  .key,#key-confirm,#key-next{width:62px!important;height:62px!important;min-width:62px!important}
  .key .num{font-size:1.32rem!important}.key .letters{font-size:.38rem!important}
  .phone-screen-inner>div:last-child{margin-top:15px!important}
  #ob-phone .ob-btn.secondary{min-height:40px!important;padding:.45rem!important}
}
@media(max-height:620px){
  .phone-screen-inner{padding-top:10px!important}
  .phone-label{font-size:1.5rem!important;margin-bottom:.25rem!important}
  .phone-display{height:46px!important}
  .keypad{grid-template-columns:repeat(3,58px)!important;gap:.28rem .64rem!important;margin-top:12px!important}
  .key,#key-confirm,#key-next{width:58px!important;height:58px!important;min-width:58px!important}
  .phone-screen-inner>div:last-child{margin-top:10px!important}
  #ob-phone .ob-btn.secondary{min-height:38px!important;padding:.4rem!important}
}


/* === PHONE ENTRY FINAL OVERRIDE
   Keeps the pasted HTML styling, improves ONLY the phone-number entry screen,
   fits it on one screen, and prevents bottom nav during onboarding. */
body:not(.app-open) .bottom-nav{display:none!important}
body.app-open .bottom-nav{display:flex!important}

#ob-phone{
  height:100svh!important;
  min-height:100svh!important;
  max-height:100svh!important;
  overflow:hidden!important;
  padding:0 1rem!important;
  background:var(--paper)!important;
  display:none;
}
#ob-phone.active{
  display:grid!important;
  grid-template-rows:1fr 34px!important;
}

#ob-phone>div{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

#ob-phone .phone-screen-inner{
  width:min(100%,390px)!important;
  height:auto!important;
  min-height:0!important;
  max-height:calc(100svh - 34px)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  padding:0!important;
  margin:0 auto!important;
}

#ob-phone .phone-screen-inner>div:first-child{
  width:100%!important;
  margin:0!important;
  flex-shrink:0!important;
}

#ob-phone .phone-label{
  font-family:var(--serif)!important;
  font-size:clamp(2rem,7vw,2.45rem)!important;
  font-weight:400!important;
  line-height:1!important;
  letter-spacing:-.025em!important;
  text-align:center!important;
  color:var(--ink)!important;
  margin:0 0 16px!important; /* adequate margin before number box */
}

#ob-phone .phone-sublabel{
  display:none!important;
}

#ob-phone .phone-display{
  width:100%!important;
  max-width:390px!important;
  height:58px!important;
  margin:0 auto!important;
  padding:0 1rem!important;
  border-radius:19px!important;
  border:1px solid rgba(36,35,49,.12)!important;
  background:#fff!important;
  color:var(--ink)!important;
  font-family:var(--sans)!important;
  font-size:clamp(1.05rem,4.9vw,1.32rem)!important;
  font-weight:400!important;
  letter-spacing:.07em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-shadow:0 5px 16px rgba(36,35,49,.06)!important;
}

#ob-phone .phone-display.filled{
  border-color:rgba(170,68,101,.24)!important;
  box-shadow:0 7px 20px rgba(170,68,101,.08)!important;
}

#ob-phone .keypad{
  display:grid!important;
  grid-template-columns:repeat(3,68px)!important;
  justify-content:center!important;
  align-items:center!important;
  gap:.62rem 1.05rem!important;
  margin:30px auto 0!important;
  width:auto!important;
  flex-shrink:0!important;
}

#ob-phone .key,
#ob-phone #key-confirm,
#ob-phone #key-next{
  width:68px!important;
  height:68px!important;
  min-width:68px!important;
  border-radius:50%!important;
  grid-column:auto!important;
  margin:0!important;
  padding:0!important;
}

#ob-phone .key{
  background:#fff!important;
  border:1px solid rgba(36,35,49,.08)!important;
  box-shadow:0 4px 14px rgba(36,35,49,.07)!important;
}

#ob-phone .key.del{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}

#ob-phone .key .num{
  font-family:var(--sans)!important;
  font-size:1.46rem!important;
  font-weight:400!important;
  line-height:1!important;
  color:var(--ink)!important;
}

#ob-phone .key .letters{
  font-size:.43rem!important;
  letter-spacing:.12em!important;
  color:var(--muted)!important;
  margin-top:.13rem!important;
}

#ob-phone #key-confirm{
  background:var(--green)!important;
  border-color:var(--green)!important;
  box-shadow:0 7px 18px rgba(46,125,79,.18)!important;
}

#ob-phone #key-confirm .num{
  color:#fff!important;
  font-size:.94rem!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:0!important;
}

#ob-phone #key-next{
  background:#fff!important;
  border-color:rgba(36,35,49,.08)!important;
  box-shadow:0 4px 14px rgba(36,35,49,.07)!important;
}

#ob-phone #key-next .num{
  color:var(--muted)!important;
  font-size:.56rem!important;
  font-weight:700!important;
  line-height:1.05!important;
  padding:0 .22rem!important;
}

#ob-phone .phone-screen-inner>div:last-child{
  width:100%!important;
  margin-top:24px!important;
  flex-shrink:0!important;
}

#ob-phone .ob-err{
  min-height:.65rem!important;
  font-size:.68rem!important;
  line-height:1!important;
  margin:0!important;
}

#ob-phone .ob-btn.secondary{
  width:min(100%,285px)!important;
  min-height:44px!important;
  margin:.35rem auto 0!important;
  padding:.55rem!important;
  border-radius:999px!important;
  background:#fff!important;
  border:1px solid rgba(36,35,49,.12)!important;
  color:var(--ink)!important;
  box-shadow:0 4px 14px rgba(36,35,49,.06)!important;
}

#ob-phone>.step-dots{
  height:34px!important;
  margin:0!important;
  padding:0 0 .55rem!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.admin-login-link{
    margin-top:1.25rem;
    text-align:center;

    font-family:var(--sans);
    font-size:.82rem;
    font-weight:500;

    color:var(--muted);

    cursor:pointer;

    transition:color .18s;
}

.admin-login-link:hover{
    color:var(--accent);
}

.admin-login-link:active{
    opacity:.7;
}

@media(max-height:700px){
  #ob-phone .phone-label{font-size:1.75rem!important;margin-bottom:12px!important}
  #ob-phone .phone-display{height:52px!important}
  #ob-phone .keypad{grid-template-columns:repeat(3,62px)!important;gap:.42rem .76rem!important;margin-top:20px!important}
  #ob-phone .key,#ob-phone #key-confirm,#ob-phone #key-next{width:62px!important;height:62px!important;min-width:62px!important}
  #ob-phone .key .num{font-size:1.32rem!important}
  #ob-phone .key .letters{font-size:.38rem!important}
  #ob-phone #key-confirm .num{font-size:.86rem!important}
  #ob-phone .phone-screen-inner>div:last-child{margin-top:16px!important}
  #ob-phone .ob-btn.secondary{min-height:40px!important;padding:.45rem!important}
}

@media(max-height:620px){
  #ob-phone .phone-label{font-size:1.55rem!important;margin-bottom:10px!important}
  #ob-phone .phone-display{height:48px!important}
  #ob-phone .keypad{grid-template-columns:repeat(3,58px)!important;gap:.32rem .66rem!important;margin-top:14px!important}
  #ob-phone .key,#ob-phone #key-confirm,#ob-phone #key-next{width:58px!important;height:58px!important;min-width:58px!important}
  #ob-phone .key .num{font-size:1.22rem!important}
  #ob-phone .phone-screen-inner>div:last-child{margin-top:12px!important}
  #ob-phone .ob-btn.secondary{min-height:38px!important;padding:.38rem!important}
}

.ob-brand-logo {
  display: block;
  width: 92px;
  height: auto;
  margin: 0 auto 0.4rem;
}

.ob-wordmark {
  font-family: var(--serif);
  font-size: 1.65rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  color: var(--ink);
}