/* Adaptive sign-in: mobile <600px, tablet 600–1099px, desktop 1100px+. */
body.coutts-prototype-page { display: block; padding: 0; }
.prototype-shell { width: 100%; height: 100dvh; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.prototype-shell::after { display: none; }
/* Account layouts are defined by workspace.css across all viewport sizes. */
.lock-screen { padding: 0; background: #0d0e0e; scrollbar-width: thin; }
.lock-header { flex-shrink: 0; padding: max(22px, env(safe-area-inset-top)) 24px 20px; gap: 20px; }
.lock-logo { width: 106px; }
.login-header-label { display: none; }
.login-help { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: inherit; font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: none; }
.login-help:hover { text-decoration: underline; text-underline-offset: 4px; }
.login-help .app-icon { width: 17px; height: 17px; }
.lock-header > .login-help { margin-left: auto; color: var(--ivory-soft); }
.login-layout { flex: 1 0 auto; display: flex; }
.login-story, .login-pin-form, .login-device-divider, .login-profile { display: none; }
.login-panel { width: 100%; padding: 0 26px; }
.lock-content { max-width: 360px; min-height: 100%; padding: 24px 0; justify-content: center; }
.lock-intro { margin-bottom: 26px; text-align: left; }
.lock-intro h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(31px, 8vw, 38px); line-height: 1.15; letter-spacing: -.035em; margin: 10px 0 12px; }
#lock-title:focus { outline: none; }
.lock-intro > p:last-child { margin: 0; max-width: none; font-size: 14px; }
.lock-intro .eyebrow { font-size: 10px; letter-spacing: .18em; color: var(--gold); }
.device-auth-button { min-height: 52px; border-radius: 6px; }
.lock-divider { color: #afa99f; margin: 23px 0 13px; font-size: 10px; }
.pin-keypad { grid-template-columns: repeat(3, 72px); gap: 5px 24px; }
.pin-key, .pin-key-spacer { width: 72px; height: 53px; border-radius: 8px; }
.lock-message { margin: 10px 0; min-height: 21px; }
.login-security-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 26px; color: #a9a59d; }
.login-security-note .app-icon { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; }
.login-security-note p { font-size: 11px; line-height: 1.65; margin: 0; }
.lock-footer { flex-shrink: 0; justify-content: space-between; gap: 16px; padding: 8px 24px max(18px, env(safe-area-inset-bottom)); color: #b4afa5; font-size: 10px; letter-spacing: 0; text-transform: none; }
.lock-footer .login-help { font-size: 10px; }
.lock-screen[data-device-available='false'] .lock-divider { display: none; }
.lock-screen[data-device-available='false'] #device-auth-button { display: none !important; }
.login-device-note { display: none; }
.lock-screen[data-device-available='false'] .pin-dots { margin-top: 2px; }
.lock-screen:focus-within { scroll-behavior: auto; }
@keyframes login-copy-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.lock-screen:not([hidden]) .lock-intro { animation: login-copy-in .65s var(--ease) both; }

@media (min-width: 600px) {
  .lock-screen { background: #eeece6; color: #252b29; color-scheme: light; }
  .lock-header { background: #111716; color: var(--ivory); min-height: 100px; padding: 24px 40px; }
  .lock-logo { width: 116px; }
  .login-header-label { display: inline-block; padding-left: 22px; border-left: 1px solid #746647; text-transform: uppercase; font-size: 10px; letter-spacing: .2em; color: #d6c7a5; }
  .login-layout { position: relative; display: grid; grid-template-columns: 1fr; align-content: center; padding: 40px 32px; isolation: isolate; }
  .login-layout::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 150px; background: #111716; z-index: -1; }
  .login-panel { width: 100%; max-width: 496px; margin: 0 auto; padding: 40px 48px 34px; background: #faf9f6; border: 1px solid #e1ded5; box-shadow: 0 14px 40px #242a2610; }
  .lock-content { padding: 0; max-width: none; min-height: auto; }
  .login-mobile-greeting, .lock-divider, #pin-dots, .lock-screen .pin-keypad { display: none; }
  .lock-intro { margin-bottom: 24px; }
  .lock-intro .eyebrow { color: #786034; font-size: 10px; }
  .lock-intro h1 { font-size: 40px; margin: 9px 0 12px; }
  .lock-intro > p:last-child { color: #646a65; font-size: 14px; }
  .login-profile { display: flex; align-items: center; gap: 13px; padding: 18px 0; border-top: 1px solid #e1ded5; border-bottom: 1px solid #e1ded5; margin-bottom: 26px; }
  .login-avatar { display: grid; flex: 0 0 40px; height: 40px; place-items: center; border-radius: 50%; background: #ece7db; color: #635634; font-size: 13px; }
  .login-profile strong { display: block; font-size: 14px; font-weight: 600; }
  .login-profile div > span { display: block; margin-top: 3px; font-size: 11px; color: #686c66; }
  .login-profile > .app-icon { margin-left: auto; color: #8a7a58; width: 17px; height: 17px; }
  .login-pin-form { display: block; }
  .login-pin-form label { display: block; font-size: 13px; font-weight: 650; }
  .login-pin-form p { font-size: 12px; color: #666c66; margin: 5px 0 12px; }
  #login-pin { display: block; width: 100%; min-height: 56px; padding: 13px 16px; border: 1px solid #a39f94; border-radius: 4px; background: #fff; color: #1a2420; font-size: 24px; letter-spacing: .32em; }
  #login-pin::placeholder { font-size: 14px; letter-spacing: .02em; color: #797a73; }
  #login-pin:focus-visible { outline: 2px solid #7d663b; outline-offset: 3px; }
  #login-pin[aria-invalid='true'] { border-color: #a23c3c; }
  .login-submit { width: 100%; min-height: 54px; margin-top: 20px; padding: 14px 18px; border-radius: 4px; border: 1px solid #18382f; background: #18382f; color: #fff; justify-content: space-between; font-size: 14px; }
  .login-submit:hover { background: #25493d; border-color: #25493d; }
  .login-submit:disabled { opacity: .5; cursor: wait; }
  .login-device-divider { display: flex; align-items: center; gap: 14px; margin: 20px 0; font-size: 12px; color: #77796f; }
  .login-device-divider::before, .login-device-divider::after { content: ''; height: 1px; background: #dedbd2; flex: 1; }
  #device-auth-button { background: transparent; border: 1px solid #a6a293; border-radius: 4px; color: #293a31; min-height: 52px; font-size: 13px; }
  #device-auth-button:hover { background: #eeece4; }
  .lock-screen[data-device-available='false'] .login-device-divider { display: none; }
  .lock-screen[data-device-available='false'] .login-device-note { display: block; margin: 18px 0 0; color: #6b7066; font-size: 11px; }
  .lock-message { margin: 12px 0 0; text-align: left; color: #646a61; font-size: 12px; min-height: 18px; }
  .lock-message.is-error { color: #a13030; }
  .login-security-note { margin-top: 22px; padding-top: 20px; border-top: 1px solid #e1ded5; color: #62685f; }
  .lock-footer { padding: 0 40px max(22px, env(safe-area-inset-bottom)); color: #666b63; font-size: 11px; }
  .lock-footer .login-help { font-size: 11px; }
  .lock-screen button:focus-visible, .lock-screen a:focus-visible { outline-color: #94783f; }
  .app-sheet { bottom: 24px; }
}

@media (min-width: 1100px) {
  .lock-screen { --login-split: 52%; background: linear-gradient(90deg, #111716 var(--login-split), #f7f5ef var(--login-split)); }
  .lock-header { background: transparent; padding: 32px 5%; min-height: 112px; }
  .lock-header > .login-help { color: #384238; }
  .login-layout { grid-template-columns: var(--login-split) 1fr; align-content: stretch; padding: 0; }
  .login-layout::before { display: none; }
  .login-story { display: flex; position: relative; isolation: isolate; flex-direction: column; justify-content: center; min-width: 0; padding: 30px 9.6% 50px; color: #f5f0e5; overflow: hidden; }
  .login-story-copy { position: relative; z-index: 1; margin-bottom: 100px; }
  .login-story-copy > .eyebrow { color: #ceba87; font-size: 10px; letter-spacing: .22em; margin-bottom: 28px; }
  .login-story h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(49px, 4.6vw, 80px); line-height: 1.1; letter-spacing: -.042em; margin: 0 0 28px; }
  .login-story h2 em { font-weight: 400; color: #d5bc86; }
  .login-story-copy > p:last-child { color: #b6bcb0; font-size: 14px; line-height: 1.8; margin: 0; }
  .login-art { position: absolute; inset: auto -12% -18% auto; width: 120%; height: 100%; min-height: 600px; color: #b69a59; opacity: .23; pointer-events: none; z-index: 0; }
  .login-story-foot { position: absolute; bottom: 46px; left: 9.6%; color: #c6b68e; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
  .login-panel { display: flex; align-items: center; width: 100%; max-width: none; background: transparent; box-shadow: none; border: 0; padding: 20px clamp(48px, 7vw, 128px) 38px; }
  .lock-content { width: 100%; max-width: 400px; margin: auto; }
  .lock-intro h1 { font-size: 44px; }
  .lock-footer { padding: 12px 5% 24px; color: #9ca698; }
  .lock-footer .login-help { color: #515e51; }
}

@media (min-width: 600px) and (max-height: 760px) {
  .lock-header { min-height: 84px; padding-top: 18px; padding-bottom: 18px; }
  .login-layout { padding-top: 22px; padding-bottom: 22px; }
  .login-panel { padding-top: 26px; padding-bottom: 26px; }
  .login-security-note { margin-top: 16px; padding-top: 16px; }
}
@media (min-width: 1100px) and (max-height: 760px) {
  .login-layout { padding: 0; }
  .login-story-copy { margin-bottom: 80px; }
}
@media (max-width: 374px) {
  .lock-header { padding-inline: 20px; }
  .lock-logo { width: 90px; }
  .login-help { font-size: 11px; }
  .login-panel { padding-inline: 22px; }
  .lock-intro h1 { font-size: 31px; }
  .pin-keypad { gap: 4px 18px; grid-template-columns: repeat(3, 64px); }
  .pin-key, .pin-key-spacer { width: 64px; height: 50px; }
  .lock-footer { padding-inline: 22px; flex-wrap: wrap; gap: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .lock-screen:not([hidden]) .lock-intro { animation: none; } }
@media (forced-colors: active) {
  .lock-screen, .lock-header, .login-panel { background: Canvas; color: CanvasText; }
  .login-art { display: none; }
  .login-submit { border-color: ButtonText; background: ButtonFace; color: ButtonText; }
}