/* /start — the entry page between the marketing site and the hosted login.
   The card reuses the demo modal classes (.dm, .dm-h, .dm-hd, .fc, .dm-go,
   .dm-code) from /assets/apx-demo.css. These rules put the card on a dotted
   stage, keep it in the page flow, and add the login side. */

.stg {
  position: relative;
  display: grid;
  place-items: center;
  padding: 72px var(--pad) 80px;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.4px);
  background-size: 20px 20px;
  background-position: 10px 10px;
}
.stg::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100vw;
  right: -100vw;
  height: 1px;
  background: var(--apx-ink);
  pointer-events: none;
}
.stg .dm {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  max-width: 920px;
  max-height: none;
  box-shadow: 0 24px 80px rgba(20, 19, 18, 0.16);
  transform: none;
}
[data-theme="dark"] .stg .dm {
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}
.stg .dm-hd h1 {
  margin: 0 0 8px;
  font: 500 28px / 1.05 var(--font-display);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.stg a.dm-x {
  display: flex;
  align-items: center;
  justify-content: center;
}
.stg a.dm-x:hover {
  color: var(--apx-bone);
}
.stg .dm-h.f .dm-x {
  display: none;
}
.stg .dm-h.c {
  grid-column: 2;
  grid-row: 1;
  padding-left: 24px;
  border-left: 1px solid var(--apx-ink);
}

/* ----- Form side ----- */
.fm {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* The plan from /pricing, under the intro. */
.fm-plan {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--apx-ink);
  background: var(--apx-white);
  font-size: 14px;
}
.fm-plan[hidden] {
  display: none;
}
.fm-plan b {
  font-weight: 500;
  color: var(--apx-ink);
}
.fm-plan a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -12px 0 -12px auto;
  font-size: 13px;
  color: var(--apx-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* The optional details: closed at first, one row with a +/- sign. */
.fm-more {
  border-top: 1px solid var(--hair);
}
.fm-more > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 24px;
  list-style: none;
  cursor: pointer;
}
.fm-more > summary::-webkit-details-marker {
  display: none;
}
.fm-more > summary:hover {
  background: var(--apx-mist);
}
.fm-more > summary:focus-visible {
  outline: 2px solid var(--apx-blue);
  outline-offset: -2px;
}
.fm-more > summary .k {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}
.fm-more > summary .opt {
  font-size: 11px;
  color: var(--text-muted);
}
.fm-more > summary .tg {
  margin-left: auto;
  font: 18px / 1 var(--font-mono);
  color: var(--apx-ink);
}
.fm-more[open] > summary {
  border-bottom: 1px solid var(--hair);
}
.fm-more[open] > summary .tg {
  transform: rotate(45deg);
}
.fm-more > .fc:last-child {
  border-bottom: 0;
}
.fm-ok {
  display: none;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 48px 24px;
  text-align: center;
}
.fm.done .dm-hd,
.fm.done form,
.fm.done .dm-go,
.fm.done .fm-a,
.fm.done .dm-note {
  display: none;
}
.fm.done .fm-ok {
  display: flex;
}
.fm-ok h2 {
  margin: 0;
  font: 500 26px var(--font-display);
  letter-spacing: -0.012em;
}
.fm-ok p {
  max-width: 36ch;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.fm-ok p b {
  font-weight: 500;
  color: var(--apx-ink);
}
.fm-ok:focus {
  outline: none;
}
.fm-a {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 24px;
  border-top: 1px solid var(--hair);
  font-size: 12.5px;
  color: var(--text-muted);
}
.fm-a a {
  border-bottom: 1px solid var(--hair);
  color: var(--apx-ink);
}
.fm-a a:hover {
  border-color: var(--apx-blue-deep);
}
.fm-err {
  font-weight: 500;
  color: var(--dm-err);
}
.fm-err:empty {
  display: none;
}

/* ----- Login side ----- */
.ses {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 1px solid var(--apx-ink);
  background: var(--apx-paper);
}
.ses .tx {
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--hair);
}
.ses h2 {
  margin: 0 0 8px;
  font: 500 22px / 1.1 var(--font-display);
  letter-spacing: -0.012em;
}
.ses .tx p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.ses .a-go {
  min-height: 96px;
  padding: 16px 24px;
}
.ses .a-go .v {
  font-size: 24px;
}
.ses .a-go .ar {
  font-size: 22px;
}
.hl {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.hl > .k {
  padding: 12px 24px;
  border-bottom: 1px solid var(--hair);
}
.hl a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--hair);
  transition: background var(--d-fast);
}
.hl a:last-child {
  border-bottom: 0;
}
.hl a:hover {
  background: var(--apx-mist);
  color: var(--apx-ink);
}
.hl a:hover .ar {
  transform: translateX(4px);
}
.hl .ix {
  font: 10px var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.hl b {
  display: block;
  font-size: 14px;
  font-weight: 500;
}
.hl small {
  display: block;
  margin-top: 2px;
  font: 11px var(--font-mono);
  color: var(--text-muted);
}
.hl .ar {
  font-family: var(--font-mono);
  color: var(--text-muted);
}

/* One column: the form, then the login side. Only the form header shows. */
@media (max-width: 860px) {
  .stg {
    padding: 32px var(--pad) 48px;
  }
  .stg .dm {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 44px auto auto;
  }
  .stg .dm-h.f {
    display: flex;
    grid-column: 1;
    padding-right: 0;
  }
  .stg .dm-h.f .dm-x {
    display: flex;
  }
  .stg .dm-h.c {
    display: none;
  }
  .fm {
    grid-row: 2;
  }
  .ses {
    grid-column: 1;
    grid-row: 3;
    border-left: 0;
    border-top: 1px solid var(--apx-ink);
  }
}
/* Phones: the card fills the width under the top bar, as a page and not
   as a floating dialog. */
@media (max-width: 720px) {
  .stg {
    display: block;
    padding: 0;
    background: none;
  }
  .stg::before {
    display: none;
  }
  .stg .dm {
    border-width: 0 0 1px;
    box-shadow: none;
  }
  .stg .dm-hd,
  .fm-a,
  .dm-note,
  .fm-more > summary,
  .ses .tx,
  .ses .a-go,
  .hl > .k,
  .hl a {
    padding-left: var(--pad);
    padding-right: var(--pad);
  }
  .stg .dm-h.f {
    padding-left: var(--pad);
  }
  .stg .dm-hd h1 {
    font-size: 26px;
  }
  .hl a {
    min-height: 56px;
  }
}