:root {
  color-scheme: light;
  --page-gutter: clamp(24px, 4vw, 72px);
  --panel-width: clamp(580px, 38vw, 700px);
  --panel-height: min(660px, calc(100dvh - 96px));
  --panel-radius: 28px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
}

body {
  overflow: hidden;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background: #071d31;
}

.login-stage {
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-height: 640px;
  overflow: hidden;
  isolation: isolate;
  background: #071d31;
}

.hero-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: #071d31;
  background-image: url("assets/Hero.png");
  background-image: image-set(
    url("assets/Hero.avif") type("image/avif"),
    url("assets/Hero.webp") type("image/webp"),
    url("assets/Hero.png") type("image/png")
  );
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

.auth-panel {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: var(--page-gutter);
  width: var(--panel-width);
  height: var(--panel-height);
  min-height: 520px;
  transform: translateY(-50%);
  overflow: hidden;
  border-radius: var(--panel-radius);
  background: #fff;
  box-shadow: 0 26px 80px rgba(2, 18, 32, .28);
}

.stage-marker {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1180px) {
  :root {
    --page-gutter: 28px;
    --panel-width: 520px;
    --panel-height: min(620px, calc(100dvh - 64px));
  }

  .hero-scene {
    background-position: 43% 50%;
  }
}

@media (max-width: 900px) {
  :root {
    --sheet-radius: 28px;
  }

  body {
    overflow-x: hidden;
    overflow-y: auto;
    background: #071d31;
  }

  .login-stage {
    height: auto;
    min-height: 150dvh;
    overflow: visible;
    background: transparent;
  }

  .hero-scene {
    position: fixed;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    width: 100vw;
    height: 66dvh;
    background-size: cover;
    background-position: 46% center;
    background-color: #071d31;
  }

  .auth-panel {
    top: 66dvh;
    right: 20px;
    bottom: auto;
    left: 20px;
    width: auto;
    height: 100dvh;
    min-height: 620px;
    transform: none;
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  }
}

@media (max-width: 600px) {
  .login-stage {
    min-height: 155dvh;
  }

  .hero-scene {
    height: 63dvh;
    background-size: cover;
    background-position: 44% center;
  }

  .auth-panel {
    top: 63dvh;
    right: 0;
    bottom: auto;
    left: 0;
    height: 110dvh;
    min-height: 680px;
    border-radius: 26px 26px 0 0;
  }
}

@media (max-height: 720px) and (min-width: 901px) {
  :root {
    --panel-height: calc(100dvh - 40px);
  }

  .auth-panel {
    min-height: 0;
  }
}


.hero-content {
  position: absolute;
  z-index: 1;
  top: clamp(42px, 5.2vh, 72px);
  left: clamp(54px, 6.8vw, 112px);
  bottom: clamp(42px, 5vh, 68px);
  width: min(42vw, 610px);
  color: #fff;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  text-shadow: 0 2px 12px rgba(2, 18, 32, .28);
}

.hero-brand {
  margin-left: 0;
  transform: translateY(0);
}

.brand-name {
  font-size: clamp(38px, 3.4vw, 58px);
  line-height: .92;
  font-weight: 800;
  letter-spacing: .015em;
}

.brand-subtitle {
  margin-top: 8px;
  font-size: clamp(10px, .82vw, 14px);
  font-weight: 500;
  letter-spacing: .28em;
  white-space: normal;
  max-width: 100%;
}

.hero-message {
  margin-top: clamp(48px, 7vh, 92px);
}

.hero-message h1 {
  margin: 0;
  font-size: clamp(48px, 4.4vw, 76px);
  line-height: .9;
  font-weight: 800;
  letter-spacing: -.025em;
}

.hero-message p {
  margin: 12px 0 0;
  font-size: clamp(17px, 1.45vw, 25px);
  font-weight: 400;
  letter-spacing: .32em;
  white-space: normal;
  max-width: 100%;
}

.benefits {
  display: grid;
  gap: clamp(9px, 1.25vh, 15px);
  margin-top: clamp(32px, 4vh, 48px);
}

.benefit {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 16px;
  min-height: 52px;
}

.benefit img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.benefit div {
  display: grid;
  gap: 2px;
}

.benefit strong {
  font-size: clamp(17px, 1.25vw, 21px);
  line-height: 1.1;
  font-weight: 700;
}

.benefit span {
  font-size: clamp(12px, .9vw, 15px);
  line-height: 1.2;
  font-weight: 400;
}

.hero-footer {
  margin-top: auto;
  display: grid;
  gap: 14px;
  width: min(440px, 85%);
  font-size: clamp(11px, .85vw, 14px);
  letter-spacing: .28em;
}

.hero-footer-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.hero-indicators {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 0 0 auto;
}

.hero-indicators button {
  width: 34px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(220,232,243,.78);
  cursor: pointer;
  pointer-events: auto;
  transition: background .35s ease, transform .35s ease;
}

.hero-indicators button.active {
  background: #0b8cff;
  transform: scaleX(1.08);
}

.hero-rule {
  display: block;
  flex: 1 1 auto;
  height: 1px;
  margin: 0;
  background: rgba(255,255,255,.9);
}

@media (max-width: 1180px) {
  .hero-content {
    left: 40px;
    width: min(43vw, 470px);
  }

  .hero-brand { margin-left: 0; }
  .hero-message h1 { font-size: clamp(42px, 4.2vw, 58px); }
  .hero-message p { letter-spacing: .22em; }
  .benefits { gap: 7px; }
  .benefit { grid-template-columns: 44px 1fr; gap: 12px; min-height: 44px; }
  .benefit img { width: 42px; height: 42px; }
}

@media (max-width: 900px) {
  .hero-content {
    position: fixed;
    z-index: 1;
    top: 24px;
    left: 24px;
    bottom: auto;
    width: calc(100% - 48px);
    height: 56dvh;
  }

  .hero-brand { margin-left: 0; }
  .brand-name { font-size: 32px; }
  .brand-subtitle { font-size: 8px; letter-spacing: .2em; }
  .hero-message { margin-top: 22px; }
  .hero-message h1 { font-size: 38px; }
  .hero-message p { margin-top: 7px; font-size: 12px; letter-spacing: .2em; }
  .benefits {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: auto;
  }

  .benefit {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 5px;
    min-height: 0;
  }

  .benefit img {
    width: 28px;
    height: 28px;
  }

  .benefit div { gap: 1px; }
  .benefit strong { font-size: 10px; }
  .benefit span { display: none; }
  .hero-footer { display: none; }
}

@media (max-width: 600px) {
  .hero-content { top: 18px; left: 18px; width: calc(100% - 36px); height: 53dvh; }
  .hero-message h1 { font-size: 32px; }
  .benefits { margin-top: auto; gap: 5px; }
  .benefit img { width: 25px; height: 25px; }
  .benefit strong { font-size: 9px; }
}


/* Desktop Owner UAT refinement */
@media (min-width: 901px) {
  .hero-brand {
    margin-top: 18px;
  }
}

/* Mobile Owner UAT refinement */
@media (max-width: 900px) {
  .hero-content {
    z-index: 1;
  }

  .benefits {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .auth-panel {
    z-index: 3;
  }
}

@media (min-width: 901px) and (max-height: 820px) {
  .hero-content {
    top: 28px;
    bottom: 28px;
  }

  .hero-brand {
    margin-top: 0;
  }

  .hero-message {
    margin-top: 28px;
  }

  .hero-message h1 {
    font-size: clamp(38px, 3.6vw, 58px);
    line-height: .92;
  }

  .hero-message p {
    font-size: clamp(14px, 1.1vw, 20px);
    letter-spacing: .24em;
  }

  .benefits {
    margin-top: 20px;
    gap: 6px;
  }

  .benefit {
    min-height: 40px;
    grid-template-columns: 42px 1fr;
    gap: 10px;
  }

  .benefit img {
    width: 40px;
    height: 40px;
  }

  .benefit strong {
    font-size: clamp(14px, 1vw, 18px);
  }

  .benefit span {
    font-size: clamp(11px, .75vw, 13px);
  }
}

@media (max-width: 900px) {
  .benefits {
    align-self: stretch;
    padding: 0 4px 4px;
    border-radius: 0;
    background: none;
  }

  .benefit {
    min-width: 0;
  }

  .benefit strong {
    text-shadow: 0 1px 4px rgba(2,18,32,.72);
  }
}

@media (max-width: 600px) {
  .benefits {
    padding-bottom: 2px;
  }
}

@media (min-width: 901px) and (max-width: 1500px) {
  .hero-content {
    left: clamp(32px, 4.2vw, 68px);
    width: min(40vw, 540px);
  }

  .brand-name {
    font-size: clamp(32px, 3vw, 48px);
  }

  .brand-subtitle {
    font-size: clamp(8px, .72vw, 12px);
    letter-spacing: .22em;
  }

  .hero-message {
    margin-top: clamp(28px, 4.5vh, 58px);
  }

  .hero-message h1 {
    font-size: clamp(38px, 3.8vw, 62px);
  }

  .hero-message p {
    font-size: clamp(13px, 1.1vw, 19px);
    letter-spacing: .24em;
  }

  .benefits {
    margin-top: clamp(18px, 2.8vh, 30px);
    gap: clamp(5px, .8vh, 9px);
  }

  .benefit {
    grid-template-columns: 40px minmax(0,1fr);
    gap: 10px;
    min-height: 40px;
  }

  .benefit img {
    width: 38px;
    height: 38px;
  }

  .benefit strong {
    font-size: clamp(14px, 1vw, 18px);
  }

  .benefit span {
    font-size: clamp(10px, .78vw, 13px);
  }

  .hero-footer {
    width: min(380px, 84%);
    font-size: clamp(9px, .72vw, 12px);
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .hero-content {
    left: 28px;
    width: min(39vw, 430px);
  }

  .hero-message h1 {
    font-size: clamp(34px, 3.5vw, 48px);
  }

  .hero-message p {
    font-size: clamp(11px, 1vw, 15px);
    letter-spacing: .2em;
  }

  .benefit span {
    display: block;
  }
}

/* Constrained desktop and windowed browser behaviour */
@media (min-width: 901px) and (max-width: 1500px) {
  .hero-content {
    left: clamp(24px, 3.2vw, 54px);
    width: min(36vw, 500px);
  }

  .brand-name {
    font-size: clamp(28px, 2.7vw, 44px);
  }

  .brand-subtitle {
    font-size: clamp(7px, .66vw, 11px);
    letter-spacing: .18em;
  }

  .hero-message {
    margin-top: clamp(20px, 3.2vh, 42px);
  }

  .hero-message h1 {
    font-size: clamp(32px, 3.25vw, 54px);
    line-height: .92;
  }

  .hero-message p {
    font-size: clamp(10px, .92vw, 16px);
    letter-spacing: .18em;
  }

  .benefits {
    margin-top: clamp(14px, 2.1vh, 24px);
    gap: clamp(3px, .55vh, 7px);
  }

  .benefit {
    grid-template-columns: 34px minmax(0,1fr);
    gap: 8px;
    min-height: 34px;
  }

  .benefit img {
    width: 32px;
    height: 32px;
  }

  .benefit strong {
    font-size: clamp(12px, .88vw, 16px);
  }

  .benefit span {
    font-size: clamp(9px, .68vw, 12px);
  }

  .hero-footer {
    width: min(330px, 82%);
    font-size: clamp(8px, .62vw, 10px);
    gap: 9px;
  }

  .hero-indicators button {
    width: 28px;
    height: 7px;
  }
}

@media (min-width: 901px) and (max-height: 760px) {
  body {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .login-stage {
    min-height: 760px;
    height: 760px;
  }

  .hero-content {
    top: 20px;
    bottom: 20px;
  }

  .auth-panel {
    top: 20px;
    bottom: 20px;
    height: auto;
    min-height: 0;
    transform: none;
  }

  .hero-brand {
    margin-top: 0;
  }

  .hero-message {
    margin-top: 18px;
  }

  .benefits {
    margin-top: 14px;
    gap: 3px;
  }

  .benefit {
    min-height: 31px;
  }

  .benefit img {
    width: 30px;
    height: 30px;
  }

  .hero-footer {
    margin-top: 12px;
  }
}

@media (min-width: 901px) and (max-width: 1080px) {
  .hero-content {
    left: 22px;
    width: min(34vw, 360px);
  }

  .brand-name {
    font-size: 28px;
  }

  .brand-subtitle {
    font-size: 7px;
    letter-spacing: .15em;
  }

  .hero-message h1 {
    font-size: 32px;
  }

  .hero-message p {
    font-size: 10px;
    letter-spacing: .15em;
  }

  .benefit span {
    display: none;
  }

  .benefit strong {
    font-size: 12px;
  }

  .hero-footer {
    width: 280px;
  }
}

@media (max-width: 900px) {
  .hero-content {
    height: 62dvh;
  }

  .benefits {
    margin-top: auto;
    transform: translateY(-10px);
  }
}

@media (max-width: 600px) {
  .hero-content {
    height: 59dvh;
  }

  .benefits {
    transform: translateY(-6px);
  }
}


/* Checkpoint 03 — Concept v0.3 authentication experience */
.auth-panel { perspective: 1800px; background: transparent; box-shadow: none; overflow: visible; }
.auth-card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .72s cubic-bezier(.2,.75,.2,1); }
.auth-card.is-register { transform: rotateY(180deg); }
.auth-face { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 15px; padding: clamp(28px,3vw,44px); overflow-y: auto; border: 1px solid rgba(255,255,255,.86); border-radius: inherit; background: rgba(255,255,255,.97); box-shadow: 0 26px 80px rgba(2,18,32,.28); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.auth-register { transform: rotateY(180deg); }
.auth-topline,.auth-logo,.auth-utility,.panel-switch,.auth-divider,.provider-button,.primary-action,.password-wrap,.name-grid,.consent { display:flex; align-items:center; }
.auth-topline,.auth-utility { justify-content:space-between; }
.auth-logo { gap:9px; color:#0b1726; letter-spacing:.04em; }
.logo-mark { width:30px; height:30px; border-radius:10px; background:linear-gradient(135deg,#7a43f5,#0b70fa 55%,#12bde8); box-shadow:0 7px 18px rgba(11,112,250,.25); }
.auth-badge { padding:7px 11px; border-radius:999px; color:#0b70fa; background:#edf6ff; font-size:10px; font-weight:800; letter-spacing:.08em; }
.register-badge { color:#7141e8; background:#f4efff; }
.auth-heading h2 { margin:0; color:#091422; font-size:clamp(28px,2vw,36px); letter-spacing:-.035em; }
.auth-heading p { margin:6px 0 0; color:#66717f; font-size:14px; }
.auth-form { display:grid; gap:12px; }
.auth-form label { display:grid; gap:6px; color:#596575; font-size:12px; font-weight:650; }
.auth-form input:not([type=checkbox]) { width:100%; height:50px; padding:0 15px; border:1px solid #dce3ec; border-radius:14px; outline:none; color:#101a27; background:#f7faff; font:inherit; font-size:14px; transition:border-color .2s,box-shadow .2s,background .2s; }
.auth-form input:focus { border-color:#4c8df8; background:#fff; box-shadow:0 0 0 4px rgba(11,112,250,.11); }
.password-wrap { position:relative; }
.password-wrap input { padding-right:62px!important; }
.text-action { position:absolute; right:12px; border:0; background:transparent; color:#0b70fa; font-weight:750; cursor:pointer; }
.auth-utility { min-height:22px; font-size:12px; }
.remember { display:flex!important; grid-template-columns:none!important; align-items:center; gap:7px!important; font-weight:500!important; }
.remember input,.consent input { accent-color:#0b70fa; }
.link-button,.panel-switch button { padding:0; border:0; background:transparent; color:#0b70fa; font:inherit; font-weight:750; cursor:pointer; }
.primary-action { justify-content:center; gap:9px; width:100%; min-height:52px; border:0; border-radius:15px; color:#fff; background:linear-gradient(105deg,#7445f4,#0b70fa 55%,#12bde8); box-shadow:0 12px 28px rgba(25,102,234,.24); font-weight:800; cursor:pointer; transition:transform .2s,box-shadow .2s; }
.primary-action:hover { transform:translateY(-1px); box-shadow:0 16px 32px rgba(25,102,234,.30); }
.auth-divider { gap:10px; color:#7b8591; }
.auth-divider span { flex:1; height:1px; background:#e1e6ed; }
.auth-divider em { font-size:10px; font-style:normal; white-space:nowrap; }
.provider-button { justify-content:center; gap:10px; width:100%; min-height:50px; border:1px solid #dce3ec; border-radius:15px; background:#fff; color:#17202d; font-weight:750; cursor:pointer; }
.google-mark { display:grid; place-items:center; width:21px; height:21px; border-radius:50%; color:#4285f4; background:#f4f7fb; font-weight:900; }
.panel-switch { justify-content:center; gap:6px; min-height:44px; border-radius:14px; color:#687381; background:rgba(116,69,244,.065); font-size:12px; }
.register-switch { background:rgba(11,112,250,.06); }
.auth-trust { margin:0; text-align:center; color:#7b8591; font-size:10px; }
.auth-trust span { padding:0 5px; }
.name-grid { gap:10px; align-items:start; }
.name-grid>label { flex:1; }
.field-note { color:#8b95a2; font-size:9px; font-weight:500; }
.consent { display:flex!important; align-items:flex-start; gap:8px!important; font-size:10px!important; font-weight:500!important; line-height:1.35; }
.compact { margin-top:-2px; }
.compact-provider { min-height:46px; }
.register-form { gap:9px; }
.auth-live { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

@media (max-height: 760px) and (min-width:901px) {
 .auth-face { padding:24px 30px; gap:10px; }
 .auth-heading h2 { font-size:26px; }
 .auth-heading p { font-size:12px; }
 .auth-form { gap:8px; }
 .auth-form input:not([type=checkbox]) { height:43px; }
 .primary-action { min-height:46px; }
 .provider-button { min-height:44px; }
 .panel-switch { min-height:38px; }
}
@media (max-width:900px) {
 .auth-panel { overflow:visible; }
 .auth-card { min-height:100%; }
 .auth-face { border-radius:var(--sheet-radius) var(--sheet-radius) 0 0; padding:30px clamp(22px,6vw,38px) 44px; overflow-y:visible; min-height:100%; }
 .auth-register { min-height:max(100%,900px); }
}
@media (max-width:600px) {
 .auth-face { padding:27px 20px 42px; gap:13px; }
 .auth-heading h2 { font-size:27px; }
 .name-grid { display:grid; grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
 .auth-card { transition:opacity .18s ease; transform:none!important; }
 .auth-face { transition:opacity .18s ease,visibility .18s ease; transform:none; }
 .auth-register { opacity:0; visibility:hidden; }
 .auth-card.is-register .auth-login { opacity:0; visibility:hidden; }
 .auth-card.is-register .auth-register { opacity:1; visibility:visible; }
 .primary-action { transition:none; }
}

/* CP3 KI-039 responsive architecture — coherent auth geometry */
:root { --panel-height: min(750px, calc(100dvh - 64px)); }

.auth-card,
.auth-face { border-radius:var(--panel-radius); }

.panel-logo {
  width:50px;
  height:50px;
  flex:0 0 50px;
  object-fit:contain;
  border-radius:10px;
}

.auth-logo { gap:12px; }
.auth-brand-lockup { display:grid; gap:4px; min-width:0; }
.auth-brand-lockup strong {
  font-size:28px;
  line-height:.92;
  font-weight:800;
  letter-spacing:.015em;
  color:#0b1726;
}
.auth-brand-lockup small {
  color:#596575;
  font-size:8px;
  line-height:1.15;
  font-weight:700;
  letter-spacing:.18em;
  white-space:nowrap;
}

.phone-help { display:block; margin-top:-5px; color:#7b8591; font-size:9px; line-height:1.3; }
.auth-form input[aria-invalid="true"] { border-color:#d73752; box-shadow:0 0 0 4px rgba(215,55,82,.10); }
.field-error { display:block; min-height:14px; color:#c52842; font-size:10px; font-weight:650; }

.consent {
  display:grid!important;
  grid-template-columns:18px minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:8px!important;
}
.consent input { width:18px; height:18px; margin:0; justify-self:start; align-self:center; }
.consent span { margin:0; align-self:center; line-height:1.25; }

/* Desktop: fixed outer card, independently scrollable faces, shared typography. */
@media (min-width:901px) {
  .auth-panel {
    overflow:visible;
    height:var(--panel-height);
  }
  .auth-card {
    height:100%;
    min-height:0;
    overflow:visible;
    transform-style:preserve-3d;
  }
  .auth-face {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    min-height:0;
    padding:42px 64px;
    gap:10px;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  .auth-login { transform:rotateY(0deg); }
  .auth-register { transform:rotateY(180deg); }
  .auth-card.is-register { transform:rotateY(180deg); }

  .auth-login .auth-heading,
  .auth-login .auth-form,
  .auth-login .auth-divider,
  .auth-login .provider-button,
  .auth-login .panel-switch,
  .auth-login .auth-trust { width:100%; }
  .auth-login .auth-heading { margin-top:auto; }
  .auth-login .auth-trust { margin-bottom:auto; }

  .auth-login .auth-heading h2,
  .auth-register .auth-heading h2 { font-size:25px; }
  .auth-login .auth-heading p,
  .auth-register .auth-heading p { margin-top:3px; font-size:11px; }
  .auth-login .auth-form,
  .auth-register .auth-form { gap:7px; }
  .auth-login .auth-form input:not([type=checkbox]),
  .auth-register .auth-form input:not([type=checkbox]) { height:42px; font-size:13px; }
  .auth-login .primary-action,
  .auth-register .primary-action { min-height:44px; }
  .auth-login .provider-button,
  .auth-register .provider-button { min-height:42px; }
  .auth-login .panel-switch,
  .auth-register .panel-switch { min-height:38px; font-size:11px; }
}

@media (min-width:901px) and (max-height:820px) {
  :root { --panel-height:min(720px,calc(100dvh - 40px)); }
  .auth-face { padding:30px 52px; }
}

@media (min-width:901px) and (max-height:760px) {
  body { overflow-y:auto; overflow-x:hidden; }
  .login-stage { height:auto; min-height:760px; }
  .auth-panel {
    top:20px;
    bottom:20px;
    height:720px;
    max-height:none;
    transform:none;
  }
}

/* Mobile: one active face participates in layout. The Hero remains fixed beneath the sheet. */
@media (max-width:900px) {
  body { overflow-x:hidden; overflow-y:auto; background:#071d31; }
  .login-stage { height:auto; min-height:100dvh; overflow:visible; background:transparent; }

  .auth-panel {
    z-index:3;
    top:66dvh;
    right:20px;
    left:20px;
    bottom:auto;
    width:auto;
    height:auto;
    min-height:0;
    overflow:visible;
    transform:none;
    border-radius:var(--sheet-radius) var(--sheet-radius) 0 0;
    background:transparent;
  }
  .auth-card {
    position:relative;
    width:100%;
    height:auto;
    min-height:0;
    overflow:visible;
    transform:none;
    transition:none;
  }
  .auth-face {
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    min-height:0;
    padding:34px 30px 38px;
    border-radius:inherit;
    overflow:visible;
    transform:none;
    backface-visibility:visible;
    -webkit-backface-visibility:visible;
  }
  .auth-card:not(.is-register) .auth-register,
  .auth-card.is-register .auth-login {
    display:none;
  }
  .auth-card:not(.is-register) .auth-login,
  .auth-card.is-register .auth-register {
    display:flex;
  }
  .auth-brand-lockup strong { font-size:26px; }
  .auth-brand-lockup small { font-size:7px; letter-spacing:.14em; }
}

@media (max-width:600px) {
  .auth-panel { top:63dvh; right:0; left:0; border-radius:26px 26px 0 0; }
  .auth-face { padding:30px 24px 32px; }
  .auth-brand-lockup small { white-space:normal; max-width:180px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-card { transition:none; }
  .primary-action { transition:none; }
}


/* CP3 Owner UAT r10: no mirrored mobile face and no nested desktop scrollbars */
@media (min-width:901px) {
  :root { --panel-height:min(780px,calc(100dvh - 48px)); }
  .auth-face {
    overflow:visible;
    padding:clamp(28px,4.5dvh,42px) 64px;
  }
  .auth-login .auth-heading h2,
  .auth-register .auth-heading h2 { font-size:clamp(23px,2.8dvh,25px); }
  .auth-login .auth-heading p,
  .auth-register .auth-heading p { font-size:clamp(10px,1.45dvh,11px); }
  .auth-login .auth-form,
  .auth-register .auth-form { gap:clamp(5px,1dvh,7px); }
  .auth-login .auth-form input:not([type=checkbox]),
  .auth-register .auth-form input:not([type=checkbox]) { height:clamp(38px,5.3dvh,42px); }
  .auth-login .primary-action,
  .auth-register .primary-action { min-height:clamp(40px,5.5dvh,44px); }
  .auth-login .provider-button,
  .auth-register .provider-button { min-height:clamp(38px,5.3dvh,42px); }
}
@media (min-width:901px) and (max-height:820px) {
  body { overflow-y:auto; overflow-x:hidden; }
  .login-stage { height:auto; min-height:800px; }
  .auth-panel { top:24px; bottom:auto; height:752px; max-height:none; transform:none; }
}
@media (max-width:900px) {
  .auth-card,
  .auth-card.is-register { transform:none!important; transform-style:flat; }
  .auth-login,
  .auth-register { transform:none!important; }
}


/* CP3 Owner UAT r12: one static desktop panel geometry for all auth states */
@media (min-width:901px) {
  :root { --panel-height:min(812px,calc(100dvh - 32px)); }
}
@media (min-width:901px) and (max-height:844px) {
  body { overflow-y:auto; overflow-x:hidden; }
  .login-stage { height:auto; min-height:844px; }
  .auth-panel {
    top:16px;
    bottom:auto;
    height:812px;
    max-height:none;
    transform:none;
  }
}


/* IAM-CP0 accessibility hardening — preserves CP3 geometry */
.auth-divider,
.auth-trust,
.phone-help,
.field-note { color:#65717e; }

.link-button,
.panel-switch button,
.text-action { color:#0966d8; }

.auth-badge {
  color:#0966d8;
}

.primary-action {
  background:linear-gradient(105deg,#7445f4,#0966d8 55%,#087b98);
}

button:focus-visible,
input:focus-visible {
  outline:3px solid #0b1726;
  outline-offset:3px;
}

.primary-action:focus-visible,
.hero-indicators button:focus-visible {
  outline-color:#ffffff;
  box-shadow:0 0 0 6px #0b1726;
}

.hero-indicators button {
  position:relative;
  width:34px;
  height:24px;
  min-width:34px;
  min-height:24px;
  background:transparent;
  transform:none;
}

.hero-indicators button::before {
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:34px;
  height:8px;
  border-radius:99px;
  background:rgba(220,232,243,.78);
  transform:translateY(-50%);
  transition:background .35s ease,transform .35s ease;
}

.hero-indicators button.active {
  background:transparent;
  transform:none;
}

.hero-indicators button.active::before {
  background:#0b8cff;
  transform:translateY(-50%) scaleX(1.08);
}

.field-error[hidden] { display:none; }

@media (forced-colors: active) {
  button:focus-visible,
  input:focus-visible {
    outline:3px solid CanvasText;
  }
  .hero-indicators button::before {
    border:1px solid ButtonText;
  }
}