:root {
  color-scheme: light;
  --zoom-blue: #1765f4;
  --zoom-blue-dark: #0f57d8;
  --ink: #242424;
  --muted: #697386;
  --line: #d7dce5;
  --panel: #f3f5f7;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

button, [role="button"] { font: inherit; }

button { cursor: pointer; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  padding: 0 2.8%;
  border-top: 1px solid #dce8cf;
  border-bottom: 1px solid #e4e6e9;
  background: #fff;
}

.brand-logo {
  padding: 0;
  border: 0;
  background: transparent;
  color: #2d6bdf;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.105em;
  line-height: 1;
}

.top-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.1vw, 2.5rem);
  color: #222;
  font-size: 0.87rem;
}

.nav-link, .text-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--zoom-blue-dark);
}

.nav-link:hover, .nav-link:focus-visible, .text-link:hover, .text-link:focus-visible {
  text-decoration: underline;
  outline: none;
}

.language-link { display: inline-flex; align-items: center; gap: 0.25rem; }

.app-shell {
  display: grid;
  grid-template-columns: 41.3% 58.7%;
  min-height: calc(100vh - 66px);
}

.promo-side {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: clamp(2rem, 7vw, 7rem) clamp(1.4rem, 5vw, 6.6rem);
  background: #f3f5f7;
}

.promo-card {
  position: relative;
  isolation: isolate;
  z-index: 2;
  width: min(580px, 40vw);
  min-height: 0;
  aspect-ratio: 580 / 408;
  overflow: hidden;
  transform: translateX(26%);
}

.promo-card img { display: block; width: 100%; height: 100%; object-fit: contain; }

.signin-side {
  display: flex;
  justify-content: center;
  min-width: 0;
  padding: clamp(2rem, 5vw, 5.8rem) clamp(1.3rem, 6vw, 8rem);
  background: #fff;
}

.signin-content {
  width: min(100%, 360px);
  padding-top: clamp(5.7rem, 11vh, 9.8rem);
  text-align: center;
}

.signin-content h1 {
  margin: 0 0 2rem;
  font-size: 2.35rem;
  font-weight: 700;
  letter-spacing: -0.045em;
}

.simulated-form { display: grid; gap: 0.9rem; }

.email-field {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 49px;
  padding: 0 0.8rem;
  border: 1px solid #b9c1cd;
  border-radius: 12px;
  background: #fff;
  color: #697386;
  font-size: 0.96rem;
  text-align: left;
  user-select: none;
}

.email-field::placeholder { color: #697386; opacity: 1; }

.email-field:hover, .email-field:focus-visible {
  border-color: #6c91cc;
  box-shadow: 0 0 0 3px rgba(23, 101, 244, 0.1);
  outline: none;
}

.next-button {
  min-height: 41px;
  border: 0;
  border-radius: 12px;
  background: #1b6fdf;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
}

.next-button:hover, .next-button:focus-visible { background: var(--zoom-blue-dark); outline: none; }

.signin-divider {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1rem 0 0.75rem;
  color: #7b8190;
  font-size: 0.84rem;
}

.signin-divider::before, .signin-divider::after { content: ""; height: 1px; flex: 1; background: #e2e5ea; }

.provider-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.55rem;
}

.provider-button {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #626b7b;
  font-size: 0.76rem;
}

.provider-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid #d9dee7;
  border-radius: 13px;
  background: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.provider-button:hover .provider-icon, .provider-button:focus-visible .provider-icon {
  border-color: #83a6dc;
  box-shadow: 0 0 0 3px rgba(23, 101, 244, 0.1);
  transform: translateY(-1px);
}

.provider-button:focus-visible { outline: none; }
.key-icon { padding: 13px; color: #111; }
.key-icon circle, .key-icon path { fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: square; stroke-linejoin: round; }
.apple-icon { color: #111; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; font-size: 1.65rem; line-height: 1; }
.google-icon { color: #4285f4; }
.facebook-icon { color: #1877f2; font-size: 1.55rem; }
.microsoft-icon { grid-template-columns: repeat(2, 10px); grid-template-rows: repeat(2, 10px); gap: 2px; align-content: center; justify-content: center; }
.microsoft-icon i { display: block; width: 10px; height: 10px; }
.microsoft-icon i:nth-child(1) { background: #f35325; }
.microsoft-icon i:nth-child(2) { background: #81bc06; }
.microsoft-icon i:nth-child(3) { background: #05a6f0; }
.microsoft-icon i:nth-child(4) { background: #ffba08; }

.signin-links { margin-top: 2.8rem; color: #626b7b; font-size: 0.88rem; }
.forgot-link { margin-bottom: 1.45rem; }
.footer-links { display: flex; justify-content: center; gap: 1rem; }
.recaptcha-note { margin: 1.25rem auto 0; max-width: 300px; color: #727988; font-size: 0.74rem; line-height: 1.45; }

.warning-screen {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 66px);
  padding: 2rem 1rem;
  background: #f3f5f7;
}

.warning-card {
  width: min(100%, 620px);
  padding: clamp(1.7rem, 5vw, 3rem);
  border: 1px solid #e2e6ed;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(36, 54, 80, 0.12);
}

.warning-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 1.4rem;
  border-radius: 14px;
  background: #fff0d4;
  color: #a9670f;
  font-size: 1.6rem;
  font-weight: 800;
}

.warning-kicker { margin: 0 0 0.55rem; color: #a9670f; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.warning-card h1 { margin: 0 0 1.2rem; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.05em; }
.warning-callout { display: grid; gap: 0.35rem; margin: 1.5rem 0; padding: 1rem; border-left: 4px solid #36a269; background: #effaf3; color: #315f44; }
.warning-callout span { font-size: 0.88rem; line-height: 1.5; }
.warning-callout a { color: #256f48; font-weight: 800; text-decoration: underline; }
.warning-callout a:hover, .warning-callout a:focus-visible { color: #174e32; }
.warning-detail { margin: 1.5rem 0; color: #8791a0; font-size: 0.75rem; }
.warning-detail code { color: #58667b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.back-button { width: 100%; min-height: 46px; border: 0; border-radius: 10px; background: var(--zoom-blue); color: #fff; font-weight: 700; }
.back-button:hover, .back-button:focus-visible { background: var(--zoom-blue-dark); outline: none; }

[hidden] { display: none !important; }

@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 44% 56%; }
  .promo-side { padding-inline: 1.3rem; }
  .promo-card { min-height: 0; transform: translateX(8%); }
  .promo-copy { width: 55%; }
  .signin-links { margin-top: 2.5rem; }
}

@media (max-width: 760px) {
  .site-header { min-height: 62px; padding-inline: 1.1rem; }
  .brand-logo { font-size: 2rem; }
  .top-nav { gap: 0.75rem; font-size: 0.72rem; }
  .top-nav > span { display: none; }
  .app-shell { grid-template-columns: 1fr; min-height: auto; }
  .promo-side { padding: 2rem 1rem; }
  .promo-card { width: min(100%, 620px); min-height: 350px; aspect-ratio: auto; transform: none; }
  .signin-side { padding: 3.5rem 1.2rem 3rem; }
  .signin-content { padding-top: 0; }
  .signin-links { margin-top: 2.5rem; }
}

@media (max-width: 430px) {
  .top-nav .nav-link:nth-child(2) { display: none; }
  .promo-card img { object-fit: contain; }
  .provider-grid { gap: 0.25rem; }
  .provider-icon { width: 43px; height: 43px; }
  .provider-button { font-size: 0.67rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; }
}