.access-page {
  min-height: 100vh;
  background: radial-gradient(ellipse at 20% 68%, #243c52 0, transparent 48%), var(--navy);
}
.access-site { margin-left: auto; color: var(--accent-on-dark); font-size: 14px; }
.access-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,510px); align-items: center; gap: clamp(24px, 6vw, 90px); padding-block: clamp(34px,9vw,125px); }
.access-intro { color: #fff; padding-block: 18px; }
.access-intro .eyebrow { color: var(--accent-on-dark); }
.access-kicker > span { width: 20px; height: 1px; background: var(--accent); }
.access-intro h1 { font-size: clamp(42px,6vw,76px); max-width: 12ch; }
.access-intro > p:last-of-type { color: #c4d2df; max-width: 380px; line-height: 1.5; }
.access-panel { min-width: 0; background: var(--surface); padding: clamp(20px,4vw,44px); border-top: 3px solid var(--accent); box-shadow: 0 20px 65px #07182558; }
.access-panel-label { margin-bottom: 12px; }
.access-panel h2 { margin: 0 0 8px; font-size: clamp(24px,4vw,36px); }
.access-panel form { padding: 0; }
.access-panel .fields { gap: 18px; }
.access-panel .fields label { font-size: 15px; font-weight: 650; gap: 6px; }
.access-panel .field-line {
  min-height: 58px;
  gap: 12px;
  padding-inline: 13px;
  background: var(--navy);
  border: 1px solid #34516d;
  border-bottom: 2px solid #59748d;
  color-scheme: dark;
  transition: background-color .18s, border-color .18s, box-shadow .18s;
}
.access-panel .field-line:focus-within { background: #1d3952; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 33%, transparent); }
.access-panel .field-line svg { width: 21px; height: 21px; color: var(--accent-on-dark); }
.access-panel .field-line :is(input, select) {
  min-height: 54px;
  font-size: 20px;
  font-weight: 550;
  color: #fff;
  caret-color: var(--accent-on-dark);
}
.access-panel .field-line input::placeholder { color: #c0cfdd; opacity: 1; }
.access-panel .field-line select option { background: var(--navy); color: #fff; }
.access-panel .field-line input:autofill { box-shadow: 0 0 0 100px var(--navy) inset; -webkit-text-fill-color: #fff; }
.access-panel .field-line input:-webkit-autofill { box-shadow: 0 0 0 100px var(--navy) inset; -webkit-text-fill-color: #fff; }
.setup-stage[data-step="business"] label { grid-column: 1 / -1; }
.access-panel .dialog-actions { padding-top: 19px; }
#access-submit { width: 100%; min-height: 46px; justify-content: space-between; padding-inline: 14px; }
#access-submit-text { font-size: inherit; font-weight: inherit; line-height: normal; }
#access-submit .access-arrow { font-size: 18px; }
.access-panel label[hidden] { display: none; }
.access-panel .foot a { color: var(--accent-ink); text-decoration: underline; }
#access-alternative { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 14px; line-height: 1.9; }
#access-alternative:empty, #plan-note:empty { display: none; }
.setup-steps { margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 7px; list-style: none; max-width: 470px; }
.setup-stage[data-step="appearance"] .theme-picker { grid-column: 1 / -1; }
.setup-stage[data-step="appearance"] .theme-picker > label { display: flex; }
.setup-page .theme-picker label:has(:checked) { box-shadow: inset 0 -3px var(--accent-on-dark); }
.setup-steps[hidden] { display: none; }
.setup-steps li { border-top: 2px solid #516376; color: #c4d2df; padding-top: 7px; font-size: 11px; }
.setup-steps li[aria-current="step"] { border-color: var(--accent); color: var(--accent-on-dark); font-weight: 700; }
.setup-steps li.complete { border-color: #91ae9f; }
.setup-guide {
  display: grid;
  margin: 20px 0 12px;
  padding-inline-start: 16px;
  border-left: 3px solid var(--accent);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 650;
  line-height: 1.22;
  color: var(--accent-on-dark);
}
.setup-guide[hidden] { display: none; }
.guide-reserve, .guide-text { grid-area: 1 / 1; padding-inline-end: 12px; }
.guide-reserve { visibility: hidden; }
.guide-text.is-typing::after { content: ""; display: inline-block; width: 2px; height: .85em; margin-inline-start: 3px; background: var(--accent); }
.setup-page .access-grid {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
  padding-block: clamp(34px, 6vw, 88px);
}
.setup-page .access-panel { background: transparent; color: #fff; padding: 0; border: 0; box-shadow: none; }
.setup-page .access-panel-label, .setup-page .back-link, .setup-page .cash-add { color: var(--accent-on-dark); }
.setup-page .access-panel h2 { font-size: clamp(30px, 4vw, 46px); }
.setup-page .access-panel .section-note { color: #d3dfe9; font-size: 15px; margin-bottom: 24px; }
.setup-page .access-panel .fields { gap: 22px; }
.setup-page .access-panel .fields label { font-size: 16px; }
.setup-page .access-panel .field-line {
  min-height: 72px;
  background: #203b56;
  border-color: #728da7;
  padding-inline: 16px;
}
.setup-page .access-panel .field-line:focus-within { background: #294d6d; border-color: var(--accent-on-dark); }
.setup-page .access-panel .field-line input { min-height: 68px; font-size: clamp(22px, 2vw, 26px); }
.setup-page .access-panel .field-line svg { width: 24px; height: 24px; }
.setup-page .access-panel .error { color: #ffb5a7; }
.setup-page .dialog-actions .primary { min-height: 46px; padding-inline: 20px; }
.setup-page .cash-add:hover, .setup-page .back-link:hover { background: #294d6d; }
.setup-page #setup-items li { background: #1b3449; border-color: #59748d; }
.setup-page :focus-visible { outline-color: var(--accent-on-dark); }
.setup-stage { animation: setup-in .25s ease-out both; }
@keyframes setup-in { from { transform: translateY(8px); opacity: .35; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .setup-stage { animation: none; } .access-panel .field-line { transition: none; } }
@media (max-width: 760px) {
  .access-grid { grid-template-columns: 1fr; gap: 14px; }
  .setup-page .access-grid { grid-template-columns: 1fr; gap: 24px; }
  .access-intro { padding: 0; }
  .setup-steps { margin-top: 18px; }
}
@media (max-width: 480px) {
  .access-panel .fields { grid-template-columns: minmax(0, 1fr); }
}

.classic-access { background: #f7f8fa; }
.classic-access .top {
  background: linear-gradient(90deg, var(--navy) 50%, #f7f8fa 50%);
  border-color: #84919c33;
}
.classic-access .access-site { color: var(--accent-ink); }
.classic-access .access-grid {
  width: 100%;
  min-height: calc(100svh - 69px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  padding: 0;
}
.classic-access .access-intro {
  background: var(--navy);
  padding: clamp(32px, 5vw, 68px) clamp(26px, 7vw, 110px) 0;
}
.classic-access .access-intro h1 {
  max-width: 15ch;
  font-size: clamp(34px, 4vw, 55px);
  line-height: 1.11;
  letter-spacing: -.05em;
}
.access-portrait { position: relative; isolation: isolate; max-width: 310px; margin: 26px auto 0; }
.access-portrait::before { content: ""; position: absolute; inset: 20% 5% 0; z-index: -2; background: #29465a; }
.access-portrait::after { content: ""; position: absolute; inset: 12% 0 8% 14%; z-index: -1; border: 1px solid color-mix(in srgb, var(--accent-on-dark) 46%, transparent); }
.access-portrait img { width: 100%; height: auto; max-height: 360px; object-fit: contain; object-position: bottom; display: block; }
.classic-access .access-panel {
  width: min(100%, 610px);
  margin: auto;
  padding: clamp(28px, 5vw, 64px);
  background: transparent;
  border: 0;
  box-shadow: none;
}
.classic-access .access-panel h2 { letter-spacing: -.035em; }
.classic-access .access-panel .section-note { font-size: 14px; line-height: 1.5; margin-bottom: 20px; }
.classic-access .fields label { font-size: 13px; gap: 7px; color: #334b61; }
.signup-page .fields label.full { grid-column: auto; }
.signup-page .fields #login-wrap, .signup-page .fields #plan-wrap { grid-column: 1 / -1; }
.classic-access .field-line {
  min-height: 49px;
  padding-inline: 12px;
  background: #fff;
  border: 1px solid #c8d1d8;
  color-scheme: light;
}
.classic-access .field-line:focus-within { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.classic-access .field-line svg { display: none; }
.classic-access .access-panel .field-line :is(input, select) { min-height: 47px; font-size: 15px; color: var(--ink); caret-color: var(--ink); }
.classic-access .field-line select option { background: #fff; color: var(--ink); }
.classic-access .field-line input:autofill { box-shadow: 0 0 0 100px #fff inset; -webkit-text-fill-color: var(--ink); }
.classic-access .field-line input:-webkit-autofill { box-shadow: 0 0 0 100px #fff inset; -webkit-text-fill-color: var(--ink); }
.signup-page #plan-note { margin-top: 12px; font-size: 12px; }
.classic-access #access-alternative { font-size: 13px; }
@media (max-width: 760px) {
  .classic-access .top { background: #f7f8fa; }
  .classic-access .brand img { filter: brightness(0) saturate(100%); }
  .classic-access .access-grid { grid-template-columns: 1fr; min-height: 0; }
  .classic-access .access-intro { display: none; }
}
