html { scrollbar-gutter: auto; }

.landing-body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.landing-body > .auth { flex: 1 0 auto; }

.auth {
  display: block;
  padding: 0;
  background:
    radial-gradient(60rem 36rem at 18% -8%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 68%),
    var(--bg);
}

.card {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: clip;
  background: var(--surface);
}

.visual {
  position: relative;
  min-width: 0;
  min-height: clamp(17rem, 72vw, 22rem);
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  background: oklch(0.14 0.02 20);
}

.visual__img,
.visual__blur,
.visual__scrim { position: absolute; inset: 0; }

.visual__img {
  z-index: -3;
  background: url("/assets/img/hero.png") center 19% / cover no-repeat;
  transform: scale(1.015);
}

.visual__blur {
  z-index: -2;
  pointer-events: none;
  backdrop-filter: blur(1px) saturate(1.06);
  -webkit-backdrop-filter: blur(1px) saturate(1.06);
}

.visual__scrim {
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(13 4 5 / .2) 0%, rgb(13 4 5 / .08) 32%, rgb(12 5 7 / .82) 100%),
    linear-gradient(to right, rgb(12 5 7 / .28), transparent 60%);
}

.visual__copy {
  width: min(100%, 34rem);
  padding: 2rem 1.5rem 1.75rem;
  text-align: start;
}

.eyebrow {
  margin: 0;
  font: 500 .7rem/1.5 var(--mono);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: oklch(.88 .045 22);
}

.visual h1 {
  margin: .75rem 0 0;
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -.035em;
  color: oklch(.99 0 0);
  text-wrap: balance;
}

.dot { color: var(--accent); }

.lede {
  max-width: 31rem;
  margin: .85rem 0 0;
  font-size: clamp(.95rem, 4vw, 1.05rem);
  line-height: 1.55;
  color: oklch(.9 .008 20);
  text-wrap: pretty;
}

.panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1.4rem max(1.25rem, env(safe-area-inset-right)) calc(2.2rem + env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  background: var(--surface);
}

.panel__body {
  width: 100%;
  margin-top: 1.25rem;
}

.panel .tabs {
  min-height: 2.75rem;
  align-items: stretch;
  gap: 1.5rem;
  margin-top: 0;
  border-bottom: 1px solid var(--line-soft);
}

.panel .tabs__item {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  padding: 0 0 .55rem;
  font-size: .98rem;
}

.panel .form { margin-top: 1.35rem; }
.panel .field + .field { margin-top: 1rem; }
.panel .field label,
.panel .registration-profile-image__label { font-size: .84rem; }

.panel .field input,
.panel .field select,
.panel .form-grid select {
  min-height: 3rem;
  padding: .75rem .85rem;
  font-size: 1rem;
}

.panel .row {
  align-items: flex-start;
  flex-wrap: wrap;
  row-gap: .65rem;
  margin-top: 1rem;
}

.panel .row > a,
.panel .form > p > a,
.panel .check { font-size: .84rem; }

.panel .btn {
  min-height: 3rem;
  padding: .75rem 1rem;
  font-size: .9rem;
}

.panel .btn--primary { margin-top: 1.25rem; }
.panel .oauth-options--below { margin-top: 1.35rem; }
.panel .oauth-option { min-height: 3rem; font-size: .8rem; }
.panel .oauth-option__status { font-size: .58rem; }

.public-header {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.public-header-language { width: 2.75rem; }
.logo { display: inline-flex; align-items: center; color: inherit; }
.logo:hover { color: inherit; }
.logo__image { display: block; width: 10.25rem; height: auto; max-width: 100%; }
.footer__brand .logo__image { width: 11.5rem; }

.footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--line-soft);
}

.footer__inner {
  width: 100%;
  margin: 0 auto;
  padding: 2.75rem max(1.25rem, env(safe-area-inset-right)) calc(1.75rem + env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: 2rem;
}

.footer__brand { grid-column: 1 / -1; }

.footer__claim {
  max-width: 22rem;
  margin: 1rem 0 0;
  font-size: .9rem;
  line-height: 1.65;
  color: oklch(.74 .012 20);
  text-wrap: pretty;
}

.footer-language { width: min(100%, 15rem); margin-top: 1.15rem; }
.lang { position: relative; }

.lang > summary {
  min-height: 2.75rem;
  display: grid;
  grid-template-columns: 1.55rem minmax(0, 1fr) 1rem;
  align-items: center;
  gap: .65rem;
  padding: .55rem .7rem;
  color: var(--text-muted);
  background: oklch(.155 .01 20);
  border: 1px solid oklch(.3 .012 20);
  border-radius: .55rem;
  cursor: pointer;
  list-style: none;
}

.lang > summary::-webkit-details-marker { display: none; }
.lang > summary:hover { color: var(--text); border-color: oklch(.4 .012 20); }
.lang > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lang .language-flag { width: 1.4rem; height: 1rem; display: block; object-fit: cover; border-radius: .12rem; box-shadow: 0 0 0 1px color-mix(in oklab, var(--line) 75%, transparent); }
.lang__current { overflow: hidden; font-size: .75rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.lang__chevron { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }
.lang[open] .lang__chevron { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  z-index: 20;
  inset-block-end: calc(100% + .5rem);
  inset-inline-start: 0;
  width: 100%;
  max-height: min(26rem, 70vh);
  overflow-x: hidden;
  overflow-y: auto;
  padding: .3rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .65rem;
  box-shadow: 0 1rem 2.4rem rgb(0 0 0 / .38);
}

.lang__menu button {
  width: 100%;
  min-height: 2.75rem;
  display: grid;
  grid-template-columns: 1.55rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  padding: .55rem;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: .45rem;
  font: inherit;
  font-size: .75rem;
  text-align: start;
  cursor: pointer;
}

.lang__menu button:hover,
.lang__menu button:focus-visible { color: var(--text); background: var(--surface-2); outline: 0; }
.lang__menu button.is-current { color: var(--text); background: color-mix(in oklab, var(--accent) 11%, transparent); }
.lang__menu small { color: var(--text-3); font: .56rem var(--mono); letter-spacing: .08em; }

.lang--header > summary {
  grid-template-columns: 1.4rem;
  justify-content: center;
  padding-inline: .65rem;
}

.lang--header :where(.lang__current, .lang__chevron) { display: none; }
.lang--header .lang__menu {
  inset-block: calc(100% + .5rem) auto;
  inset-inline: auto 0;
  width: min(17rem, calc(100vw - 2.5rem));
}

.footer__col { display: flex; flex-direction: column; gap: .65rem; }

.footer__col h2 {
  margin: 0 0 .15rem;
  font: 500 .69rem/1.45 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: oklch(.9 .01 20);
}

.footer__col a {
  width: fit-content;
  font-size: .82rem;
  line-height: 1.45;
  color: oklch(.69 .012 20);
}

.footer__col a:hover { color: oklch(.99 0 0); }

.footer__bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .9rem;
  margin-top: 2.75rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line-soft);
  font-size: .78rem;
  line-height: 1.5;
  color: oklch(.66 .012 20);
}

.footer__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; }
.pill { padding: .25rem .65rem; font: .68rem/1.2 var(--mono); letter-spacing: .1em; border: 1px solid oklch(.3 .012 20); border-radius: 999px; }

@media (min-width: 35rem) {
  .visual { min-height: 23rem; }
  .visual__copy { padding: 2.5rem; }
  .panel { padding: 2rem 2.5rem 2.75rem; }
  .public-header-language { width: min(100%, 13rem); }
  .lang--header > summary { grid-template-columns: 1.55rem minmax(0, 1fr) 1rem; justify-content: initial; padding-inline: .7rem; }
  .lang--header :where(.lang__current, .lang__chevron) { display: initial; }
  .footer__cols { column-gap: 2.5rem; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bar { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (max-width: 21.99rem) {
  .footer__cols { grid-template-columns: 1fr; }
}

@media (min-width: 45rem) {
  html { scrollbar-gutter: stable; }
  .auth { padding: 2rem; }
  .card { border: 1px solid var(--line-soft); border-radius: 1.15rem; box-shadow: 0 2rem 5rem rgb(0 0 0 / .34); }
  .visual { min-height: 28rem; }
  .visual__copy { padding: 3.5rem; }
  .panel { padding: 2.5rem 3rem 3rem; }
  .panel__body { margin-top: 1.75rem; }
  .footer__inner { width: min(calc(100% - 4rem), 90rem); padding: 3.5rem 0 2rem; }
  .footer__cols { grid-template-columns: 1.2fr repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: auto; grid-row: span 2; }
}

@media (min-width: 60rem) {
  .auth {
    display: grid;
    place-items: center;
    padding: clamp(3rem, 7vh, 5.5rem) clamp(2rem, 5vw, 5rem);
  }

  .card {
    max-width: 74rem;
    min-height: min(47.5rem, calc(100dvh - 7rem));
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(27rem, .94fr);
    align-items: stretch;
  }

  .landing-body--register .card { min-height: 60rem; }
  .visual { min-height: 100%; align-items: end; }
  .visual__img { background-position: center 20%; }
  .visual__scrim {
    background:
      linear-gradient(to bottom, rgb(13 4 5 / .12) 0%, rgb(13 4 5 / .04) 42%, rgb(12 5 7 / .86) 100%),
      linear-gradient(to right, rgb(12 5 7 / .4), transparent 65%);
  }
  .visual__copy { width: min(100%, 38rem); padding: clamp(3rem, 5vw, 4.5rem); }
  .visual h1 { font-size: clamp(2.8rem, 4.2vw, 4.15rem); }
  .lede { font-size: 1.05rem; }
  .panel { justify-content: flex-start; padding: 2.8rem clamp(2.5rem, 4vw, 3.5rem) 3.25rem; }
  .panel__body { margin-top: clamp(2.25rem, 5vh, 3.75rem); }
  .landing-body--register .panel__body { margin-top: 2rem; }
  .footer__cols { grid-template-columns: 1.35fr repeat(5, minmax(0, 1fr)); gap: 1.75rem; }
  .footer__brand { grid-row: auto; }
}

@media (min-width: 90rem) {
  .footer__inner { width: min(calc(100% - 7rem), 96rem); }
}

@media (prefers-reduced-motion: reduce) {
  .lang__chevron,
  .panel .btn { transition: none; }
}
.account-add-context {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  color: var(--text-2);
  background: color-mix(in srgb,var(--accent) 7%,var(--surface-2));
  border-left: 3px solid var(--accent);
}
.account-add-context strong { color: var(--text); font-size: 13px; }
.account-add-context span { font-size: 12px; line-height: 1.5; }