:root {
  --ink: var(--commerce-ink-900);
  --muted: var(--commerce-ink-500);
  --green: var(--commerce-brand-600);
  --green-dark: var(--commerce-brand-800);
  --green-soft: var(--commerce-brand-100);
  --line: var(--commerce-line);
  --paper: var(--commerce-canvas);
  --red: var(--commerce-danger-700);
  font-family: var(--commerce-font-sans);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

/* Legal consent is a compact square checkbox, not a selection badge. */
.login-panel .terms-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; }
body { margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.hidden { display: none !important; }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(440px, .86fr); background: var(--paper); }

.visual-panel {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(30px, 4vw, 58px) clamp(34px, 6vw, 92px);
  overflow: hidden;
  color: #f7faf8;
  background:
    radial-gradient(circle at 78% 22%, rgba(191, 136, 92, .28), transparent 24%),
    radial-gradient(circle at 62% 78%, rgba(69, 154, 116, .22), transparent 30%),
    linear-gradient(145deg, #0c2d22 0%, #104532 55%, #132d25 100%);
}
.visual-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 28, 20, .82) 0%, rgba(5, 28, 20, .55) 46%, rgba(5, 28, 20, .1) 100%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
}
.visual-panel::after {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  pointer-events: none;
}

.brand, .visual-copy, .visual-footnote { position: relative; z-index: 2; }
.brand { display: inline-flex; width: fit-content; align-items: center; gap: 12px; text-decoration: none; }
.brand > span:last-child { display: grid; gap: 2px; }
.brand strong { font-size: 16px; letter-spacing: .04em; }
.brand small { color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.brand-light small { color: rgba(255,255,255,.56); }
.brand-mark { position: relative; width: 42px; height: 42px; display: block; overflow: hidden; border-radius: 13px; background: #f1f7f3; box-shadow: 0 12px 30px rgba(0,0,0,.14); }
.brand-mark i { position: absolute; display: block; width: 8px; border-radius: 99px; background: var(--green); transform: rotate(-27deg); }
.brand-mark i:nth-child(1) { height: 24px; left: 10px; top: 10px; }
.brand-mark i:nth-child(2) { height: 30px; left: 21px; top: 5px; }
.brand-mark i:nth-child(3) { width: 7px; height: 13px; left: 28px; top: 24px; background: #ba8764; }

/*
 * Keep the copy column clear of the decorative preview cluster. At 1280 the
 * 720px column and the 590px paragraph ran straight under the translucent
 * "产品权限" card, so the card's labels and the body text were legible through
 * each other.
 */
.visual-copy { width: min(520px, 92%); margin: auto 0; padding: clamp(56px, 8vh, 104px) 0 48px; }
.eyebrow { margin: 0; color: #c6d8ce; font-size: 11px; font-weight: 750; letter-spacing: .2em; }
.visual-copy h1 { margin: 16px 0 16px; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -.055em; }
.visual-copy > p:not(.eyebrow) { max-width: 460px; margin: 0; color: rgba(244,249,246,.68); font-size: 15px; line-height: 1.9; }
.visual-features { display: flex; flex-wrap: wrap; gap: 10px; margin: 34px 0 0; padding: 0; list-style: none; }
.visual-features li { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: transparent; backdrop-filter: none; color: rgba(255,255,255,.86); font-size: 12px; }
.visual-features span { color: #dcc4ac; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.visual-footnote { margin: 0; color: rgba(255,255,255,.62); font-size: 12px; letter-spacing: .04em; }

.platform-constellation { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.platform-preview { position: absolute; display: grid; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: var(--commerce-tint-pressed); box-shadow: 0 24px 60px rgba(0,0,0,.2); backdrop-filter: none; transform: rotate(-3deg); }
.platform-preview > span { color: rgba(255,255,255,.66); font-size: 11px; font-weight: 750; letter-spacing: .12em; }
.platform-preview-data { top: 17%; right: 6%; width: 240px; height: 162px; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 8px; padding: 20px; }
.platform-preview-data span,.platform-preview-data strong { grid-column: 1 / -1; }
.platform-preview-data strong { align-self: start; color: white; font-size: 26px; letter-spacing: -.04em; }
.platform-preview-data i { display: block; min-height: 34px; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg, #79bd9b, #3b8768); }
.platform-preview-data i:nth-of-type(1) { height: 34px; }.platform-preview-data i:nth-of-type(2) { height: 58px; }.platform-preview-data i:nth-of-type(3) { height: 47px; }.platform-preview-data i:nth-of-type(4) { height: 72px; background: linear-gradient(180deg, #d3a17c, #a76d4d); }
.platform-preview-creative { right: 18%; bottom: 13%; width: 270px; height: 176px; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 20px; transform: rotate(4deg); }
.platform-preview-creative span { grid-column: 1 / -1; }
.platform-preview-creative b { display: block; border-radius: 12px; background: linear-gradient(150deg, rgba(255,255,255,.75), rgba(189,221,202,.28)); }
.platform-preview-creative b:nth-of-type(2) { background: linear-gradient(150deg, rgba(220,176,142,.86), rgba(116,76,58,.28)); }
.platform-preview-access { top: 46%; right: 2%; width: 178px; padding: 18px; gap: 9px; transform: rotate(2deg); }
.platform-preview-access em { padding: 9px 10px; border-radius: 9px; color: rgba(255,255,255,.86); background: rgba(255,255,255,.09); font-size: 12px; font-style: normal; }

.login-panel { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 48px clamp(34px, 5vw, 76px) 28px; background: #f7f8f5; }
.mobile-brand { display: none; }
.login-card { width: min(440px, 100%); margin: auto; }
.login-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 26px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: #edf1ed; }
.login-mode-tabs button { min-height: 44px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: 13px; font-weight: 750; }
.login-mode-tabs button.active { color: var(--green-dark); background: #fff; box-shadow: 0 4px 14px rgba(18, 42, 30, .08); }
.welcome-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; color: var(--green); background: var(--green-soft); font-size: 12px; font-weight: 750; letter-spacing: .06em; }
.login-heading h2 { margin: 17px 0 8px; font-size: clamp(32px, 3vw, 42px); line-height: 1.15; letter-spacing: -.045em; }
.login-heading p { margin: 0 0 30px; color: var(--muted); font-size: 14px; line-height: 1.7; }

form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; color: #3b4a42; font-size: 13px; font-weight: 620; }
.field input { width: 100%; height: 52px; padding: 0 15px; border: 1px solid #cfd8d2; border-radius: 12px; outline: 0; color: var(--ink); background: var(--commerce-surface-sunken); transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.field input::placeholder { color: #a1aaa4; }
.field input:hover { border-color: #adbcb2; }
.field input:focus { border-color: var(--green); background: #fff; box-shadow: 0 0 0 4px rgba(21,92,67,.08); }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 58px; }
.password-toggle { position: absolute; top: 50%; right: 7px; display: grid; width: 40px; height: 40px; padding: 0; place-items: center; border: 0; border-radius: 10px; color: #65746b; background: transparent; transform: translateY(-50%); }
.password-toggle:hover { background: var(--green-soft); }
.password-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.password-icon-hide,.password-toggle[aria-pressed="true"] .password-icon-show { display: none; }
.password-toggle[aria-pressed="true"] .password-icon-hide { display: block; }

.terms-check { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; color: #59645c; font-size: 13px; line-height: 1.65; cursor: pointer; }
.terms-check input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--green); }
.terms-check a { color: var(--green); font-weight: 650; text-underline-offset: 2px; }
.session-note { margin: -6px 0 0; color: #6b756e; font-size: 12px; line-height: 1.6; }
.challenge-section { padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--commerce-surface); }
.challenge-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.challenge-heading span { color: #3b4a42; font-size: 13px; font-weight: 620; }
.challenge-heading small { color: var(--muted); font-size: 12px; }
.turnstile-widget { min-height: 65px; }

.form-error { margin: -4px 0 0; padding: 11px 12px; border: 1px solid var(--commerce-status-fail); border-radius: 10px; color: var(--commerce-status-fail); background: color-mix(in srgb, var(--commerce-status-fail) 8%, var(--commerce-surface)); font-size: 13px; line-height: 1.6; }
.login-button { width: 100%; height: 54px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--green); border-radius: 12px; color: #fff; background: var(--green); box-shadow: 0 13px 28px rgba(21,92,67,.2); font-size: 12px; font-weight: 800; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.login-button:hover:not(:disabled) { background: var(--green-dark); box-shadow: 0 16px 30px rgba(15,72,52,.24); transform: translateY(-1px); }
.login-button:disabled { cursor: not-allowed; border-color: #aebbb3; background: #aebbb3; box-shadow: none; }
.button-arrow { font-size: 17px; font-weight: 400; transition: transform .18s ease; }
.login-button:hover:not(:disabled) .button-arrow { transform: translateX(3px); }

.account-help { margin-top: 27px; padding-top: 21px; border-top: 1px solid var(--line); text-align: center; }
.account-help span { color: #3b4a42; font-size: 13px; font-weight: 620; }
.account-help p { margin: 5px 0 0; color: #6b756e; font-size: 12px; }
.login-footer { width: min(440px, 100%); display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 38px auto 0; color: #6b756e; font-size: 12px; }
.login-footer nav { display: flex; gap: 14px; }
.login-footer a { text-decoration: none; }
.login-footer a:hover { color: var(--green); }

@media (max-width: 1000px) {
  .login-shell { grid-template-columns: minmax(0, 1fr) minmax(410px, .92fr); }
  .visual-panel { padding-inline: 42px; }
  .visual-features { display: grid; width: fit-content; }
  .platform-preview { opacity: .55; transform: scale(.84) rotate(-3deg); transform-origin: right center; }
}

@media (max-width: 820px) {
  .login-shell { display: block; }
  .visual-panel { min-height: 360px; padding: 28px 32px; }
  .visual-panel::after { inset: 14px; border-radius: 18px; }
  .visual-copy { width: min(620px, 100%); padding: 76px 0 24px; }
  .visual-copy h1 { margin: 14px 0; font-size: clamp(36px, 8vw, 54px); }
  .visual-copy > p:not(.eyebrow) { max-width: 540px; font-size: 12px; }
  .visual-features, .visual-footnote { display: none; }
  .platform-constellation { opacity: .38; }
  .login-panel { min-height: 620px; padding: 52px 28px 28px; }
}

@media (max-width: 540px) {
  .visual-panel { min-height: 235px; padding: 22px; }
  .platform-constellation { display: none; }
  .visual-panel .brand { display: none; }
  .visual-copy { margin: auto 0 0; padding: 38px 4px 16px; }
  .visual-copy .eyebrow, .visual-copy > p:not(.eyebrow) { display: none; }
  .visual-copy h1 { margin: 0; font-size: 32px; line-height: 1.12; }
  .login-panel { min-height: calc(100vh - 235px); justify-content: flex-start; padding: 27px 20px 24px; }
  .mobile-brand { display: block; margin-bottom: 34px; }
  .brand-mark { width: 37px; height: 37px; border: 1px solid var(--line); box-shadow: none; }
  .brand-mark i:nth-child(1) { height: 21px; left: 9px; top: 9px; }
  .brand-mark i:nth-child(2) { height: 26px; left: 19px; top: 5px; }
  .brand-mark i:nth-child(3) { left: 25px; top: 21px; }
  .login-heading h2 { font-size: 31px; }
  .login-heading p { margin-bottom: 27px; }
  .login-footer { margin-top: 34px; }
}

/* ==========================================================================
 * Apple language pass — account login (2026-07-28)
 *
 * The left panel is decorative chrome. The credential form on the right is
 * one opaque content surface; controls may be sunken, but no content panel is
 * translucent or blurred.
 * ========================================================================== */

body {
  color: var(--commerce-label);
  background: var(--commerce-canvas-wash);
}

.login-shell {
  grid-template-columns: minmax(0, 1.2fr) minmax(420px, .8fr);
  background: var(--commerce-canvas-wash);
}

.visual-panel {
  color: #fff;
}

.visual-panel .brand strong {
  font-size: var(--commerce-text-card);
  font-weight: var(--commerce-weight-strong);
}

.visual-panel .brand small,
.visual-panel .visual-copy > p:not(.eyebrow),
.visual-panel .visual-footnote {
  color: rgba(255, 255, 255, .72);
}

.visual-panel .brand-mark {
  background: var(--commerce-surface);
  box-shadow:
    0 1px 1px rgba(16, 24, 40, .05),
    0 10px 24px -10px rgba(16, 24, 40, .16),
    0 0 0 1px var(--commerce-line);
}

.visual-panel .eyebrow {
  color: var(--commerce-tint-on-dark);
  font-size: var(--commerce-text-eyebrow);
  font-weight: var(--commerce-weight-strong);
  letter-spacing: .085em;
}

.visual-panel .visual-copy h1 {
  margin: var(--commerce-space-4) 0;
  font-size: clamp(32px, 3.4vw, 46px);
  font-weight: var(--commerce-weight-display);
  letter-spacing: var(--commerce-tracking-display);
}

.visual-panel .visual-copy > p:not(.eyebrow) {
  font-size: var(--commerce-text-body);
  line-height: 1.8;
}

/*
 * These are three rows, not three floating pills. Every row shares the same
 * ordinal/copy grid, and its separator starts at the copy column.
 */
.visual-panel .visual-features {
  width: min(340px, 100%);
  display: grid;
  gap: 0;
  margin-top: var(--commerce-space-8);
}

.visual-panel .visual-features li {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--commerce-space-2);
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, .86);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-size: var(--commerce-text-meta);
}

.visual-panel .visual-features li + li::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 32px;
  height: 1px;
  background: rgba(255, 255, 255, .16);
}

.visual-panel .visual-features span {
  color: var(--commerce-tint-on-dark);
  font-size: var(--commerce-text-caption);
  font-weight: var(--commerce-weight-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Decorative previews are opaque artwork, not frosted content cards. */
.visual-panel .platform-preview {
  border-color: rgba(255, 255, 255, .16);
  background: var(--commerce-tint-pressed);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.visual-panel .platform-preview > span {
  color: rgba(255, 255, 255, .72);
  font-size: var(--commerce-text-caption);
}

.visual-panel .platform-preview-data strong {
  color: #fff;
  font-size: var(--commerce-text-metric);
  font-weight: var(--commerce-weight-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.visual-panel .platform-preview-access em {
  color: rgba(255, 255, 255, .86);
  background: rgba(255, 255, 255, .09);
  font-size: var(--commerce-text-caption);
}

.visual-panel .visual-footnote {
  font-size: var(--commerce-text-caption);
}

.login-panel {
  padding: var(--commerce-space-10) clamp(28px, 4vw, 60px) var(--commerce-space-6);
  background: var(--commerce-canvas-wash);
}

/* One opaque credential surface with the shared three-layer card shadow. */
.login-panel .login-card {
  width: min(460px, 100%);
  padding: 28px;
  border-radius: var(--commerce-radius-lg);
  background: var(--commerce-surface);
  box-shadow:
    0 1px 1px rgba(16, 24, 40, .05),
    0 10px 24px -10px rgba(16, 24, 40, .16),
    0 0 0 1px var(--commerce-line);
}

.login-panel .mobile-brand .brand strong {
  color: var(--commerce-label);
  font-size: var(--commerce-text-card);
  font-weight: var(--commerce-weight-strong);
}

.login-panel .mobile-brand .brand small {
  color: var(--commerce-label-2);
  font-size: var(--commerce-text-caption);
}

/* A segmented control is a control, not a nested card. Selection uses the rail. */
.login-panel .login-mode-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  margin-bottom: var(--commerce-space-6);
  padding: 3px;
  border: 0;
  border-radius: var(--commerce-radius-md);
  background: var(--commerce-fill);
  box-shadow: inset 0 0 0 1px var(--commerce-line);
}

.login-panel .login-mode-tabs button {
  min-height: 40px;
  border-radius: var(--commerce-radius-sm);
  color: var(--commerce-label-2);
  font-size: var(--commerce-text-body);
  font-weight: var(--commerce-weight-medium);
}

.login-panel .login-mode-tabs button.active {
  color: var(--commerce-label);
  background: var(--commerce-surface);
  box-shadow: inset 3px 0 0 var(--commerce-tint);
}

/* The welcome line is an eyebrow, not another pill nested in the form card. */
.login-panel .welcome-chip {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  color: var(--commerce-tint);
  background: transparent;
  font-size: var(--commerce-text-eyebrow);
  font-weight: var(--commerce-weight-strong);
  letter-spacing: .085em;
}

.login-panel .login-heading h2 {
  margin: var(--commerce-space-3) 0 var(--commerce-space-2);
  color: var(--commerce-label);
  font-size: var(--commerce-text-headline);
  font-weight: var(--commerce-weight-display);
  letter-spacing: var(--commerce-tracking-title);
}

.login-panel .login-heading p {
  margin-bottom: var(--commerce-space-6);
  color: var(--commerce-label-2);
  font-size: var(--commerce-text-meta);
  line-height: var(--commerce-leading-body);
}

.login-panel form {
  gap: var(--commerce-space-4);
}

.login-panel .field {
  gap: 7px;
  color: var(--commerce-label);
  font-size: var(--commerce-text-meta);
  font-weight: var(--commerce-weight-medium);
}

.login-panel .field input {
  height: 46px;
  padding-inline: var(--commerce-space-3);
  border: 0;
  border-radius: var(--commerce-radius-md);
  color: var(--commerce-label);
  background: var(--commerce-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--commerce-line);
  font-size: var(--commerce-text-body);
}

.login-panel .field input::placeholder {
  color: var(--commerce-label-2);
}

.login-panel .field input:hover {
  box-shadow: inset 0 0 0 1px var(--commerce-line-strong);
}

.login-panel .field input:focus {
  border-color: transparent;
  background: var(--commerce-surface);
  box-shadow: inset 0 0 0 1.5px var(--commerce-tint);
}

.login-panel .password-toggle {
  color: var(--commerce-label-2);
}

.login-panel .password-toggle:hover {
  color: var(--commerce-tint);
  background: var(--commerce-tint-subtle);
}

.login-panel .terms-check {
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--commerce-space-2);
  color: var(--commerce-label-2);
  font-size: var(--commerce-text-meta);
}

.login-panel .terms-check input {
  accent-color: var(--commerce-tint);
}

/* Genuine inline destinations get tint, medium weight and a chevron. */
.login-panel .terms-check a,
.login-panel .login-footer a {
  display: inline-flex;
  align-items: baseline;
  color: var(--commerce-tint);
  font-weight: var(--commerce-weight-medium);
  text-decoration: none;
}

/*
 * 尖角只给「导航型链接」——它自己独立成一个去处。
 *
 * 同意条款那一句里的链接是**行内链接**，嵌在一句话中间：加上尖角就成了
 * 「《服务条款》›和《隐私政策》›」，读起来像录入错误。§14.6 规则 6 原本没有区分
 * 这两种链接，已在规范里收窄。页脚那两条是独立去处，保留尖角。
 */
.login-panel .login-footer a::after {
  content: "›";
  margin-left: 2px;
}

.login-panel .terms-check a:hover,
.login-panel .login-footer a:hover {
  color: var(--commerce-tint-pressed);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.login-panel .session-note {
  color: var(--commerce-label-2);
  font-size: var(--commerce-text-caption);
  line-height: var(--commerce-leading-body);
}

/* Challenge is an integrated notice group, with a wait-state rail. */
.login-panel .challenge-section {
  padding: var(--commerce-space-3) var(--commerce-space-4);
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--commerce-status-wait) 7%, var(--commerce-surface));
  box-shadow: inset 3px 0 0 var(--commerce-status-wait);
}

.login-panel .challenge-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--commerce-space-3);
}

.login-panel .challenge-heading span {
  color: var(--commerce-label);
  font-size: var(--commerce-text-meta);
  font-weight: var(--commerce-weight-medium);
}

.login-panel .challenge-heading small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--commerce-label-2);
  font-size: var(--commerce-text-caption);
}

.login-panel .challenge-heading small::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: var(--commerce-radius-pill);
  background: var(--commerce-status-wait);
}

.login-panel .form-error {
  margin: 0;
  padding: 11px var(--commerce-space-3) 11px var(--commerce-space-4);
  border: 0;
  border-radius: var(--commerce-radius-sm);
  color: var(--commerce-status-fail);
  background: color-mix(in srgb, var(--commerce-status-fail) 8%, var(--commerce-surface));
  box-shadow: inset 3px 0 0 var(--commerce-status-fail);
  font-size: var(--commerce-text-meta);
  line-height: var(--commerce-leading-body);
}

.login-panel .login-button {
  height: 48px;
  border: 0;
  border-radius: var(--commerce-radius-md);
  background: var(--commerce-tint);
  box-shadow:
    0 1px 2px rgba(16, 22, 33, .16),
    0 3px 10px rgba(23, 97, 73, .22);
  font-size: var(--commerce-text-body);
  font-weight: var(--commerce-weight-medium);
}

.login-panel .login-button:hover:not(:disabled) {
  background: var(--commerce-tint-pressed);
  box-shadow:
    0 1px 2px rgba(16, 22, 33, .16),
    0 5px 14px rgba(23, 97, 73, .24);
}

.login-panel .login-button:disabled {
  border-color: transparent;
  color: var(--commerce-label-2);
  background: var(--commerce-fill-strong);
}

.login-panel .account-help {
  margin-top: var(--commerce-space-6);
  padding-top: var(--commerce-space-4);
  border: 0;
  box-shadow: inset 0 1px 0 var(--commerce-line);
}

.login-panel .account-help span {
  color: var(--commerce-label);
  font-size: var(--commerce-text-meta);
  font-weight: var(--commerce-weight-medium);
}

.login-panel .account-help p {
  color: var(--commerce-label-2);
  font-size: var(--commerce-text-caption);
  line-height: var(--commerce-leading-snug);
}

.login-panel .login-footer {
  width: min(460px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--commerce-space-4);
  margin-top: var(--commerce-space-8);
  color: var(--commerce-label-2);
  font-size: var(--commerce-text-caption);
}

.login-panel .login-footer nav {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--commerce-space-3);
}

@media (max-width: 1000px) {
  .login-shell {
    grid-template-columns: minmax(0, 1fr) minmax(400px, .92fr);
  }

  .login-shell .visual-panel {
    padding-inline: var(--commerce-space-10);
  }

  .login-shell .platform-preview {
    opacity: .55;
    transform: scale(.84) rotate(-3deg);
    transform-origin: right center;
  }
}

@media (max-width: 820px) {
  .login-shell {
    display: block;
  }

  .login-shell .visual-panel {
    min-height: 330px;
    padding: 28px var(--commerce-space-8);
  }

  .login-shell .visual-copy {
    width: min(620px, 100%);
    padding: 72px 0 var(--commerce-space-6);
  }

  .login-shell .visual-copy h1 {
    margin-block: var(--commerce-space-3);
    font-size: clamp(34px, 8vw, 48px);
  }

  .login-shell .visual-copy > p:not(.eyebrow) {
    max-width: 540px;
    font-size: var(--commerce-text-meta);
  }

  .login-shell .visual-features,
  .login-shell .visual-footnote {
    display: none;
  }

  .login-shell .login-panel {
    min-height: 0;
    padding: var(--commerce-space-8) var(--commerce-space-6) var(--commerce-space-6);
  }
}

@media (max-width: 540px) {
  .login-shell .visual-panel {
    min-height: 220px;
    padding: var(--commerce-space-5);
  }

  .login-shell .visual-copy {
    padding: var(--commerce-space-10) var(--commerce-space-1) var(--commerce-space-4);
  }

  .login-shell .visual-copy h1 {
    font-size: 30px;
  }

  .login-shell .login-panel {
    min-height: calc(100vh - 220px);
    padding: var(--commerce-space-5);
  }

  .login-shell .login-card {
    padding: var(--commerce-space-5);
  }

  .login-shell .mobile-brand {
    margin-bottom: var(--commerce-space-6);
  }

  .login-shell .login-heading h2 {
    font-size: var(--commerce-text-page);
  }

  .login-shell .login-footer {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    margin-top: var(--commerce-space-6);
    text-align: center;
  }
}