.welcome-practitioner { display: none; }

@media (max-width: 760px) {
  /* A field of at least 16px stays at the page's current zoom on iOS. */
  #loginForm input { font-size: 16px; scroll-margin-block: 1rem; }
}

@media (min-width: 761px) {
  .welcome-curtain {
    --welcome-gutter: clamp(1.75rem, 5.4vw, 7rem);
    --welcome-action-height: calc(76px + env(safe-area-inset-bottom));
    background: #e9efe4;
  }
  .welcome-curtain-content {
    inset: 0 0 var(--welcome-action-height);
    overflow-y: auto;
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    grid-template-rows: minmax(min-content, .85fr) auto auto minmax(min-content, 1fr);
    align-items: start;
    justify-content: normal;
    padding: 0;
    text-align: left;
  }
  .welcome-brand {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    margin: 1.25rem 0 clamp(1.25rem, 3.5vh, 2.25rem) var(--welcome-gutter);
    justify-self: start;
  }
  .welcome-brand .welcome-logo {
    width: clamp(150px, 15vw, 240px);
    max-height: none;
  }
  .welcome-story-copy {
    display: contents;
  }
  .welcome-story-copy > :is(.eyebrow, h1, p:not(.eyebrow)) {
    grid-column: 1;
    margin-inline: var(--welcome-gutter) 1.5rem;
    text-align: left;
  }
  .welcome-story-copy h1 {
    grid-row: 3;
    font: 500 clamp(3rem, 6.4vw, 7rem)/1.02 "Meal Spectral", Georgia, serif;
    letter-spacing: -.055em;
  }
  .welcome-story-copy > p:not(.eyebrow) {
    grid-row: 4;
    padding-bottom: 1.5rem;
    max-width: 39ch;
    color: #4d6252;
    font: 400 clamp(1rem, 1.2vw, 1.2rem)/1.55 "Meal DM Sans", system-ui, sans-serif;
  }
  .welcome-credentials {
    grid-column: 2;
    grid-row: 1 / 5;
    align-self: stretch;
    align-items: stretch;
    justify-self: stretch;
    text-align: left;
    --profile-inset: clamp(1.65rem, 3.2vw, 4rem);
    margin: 0;
    border: 0;
    padding: 0 var(--profile-inset) clamp(1.3rem, 3.8vh, 3rem);
    background: #f6f6ef;
    gap: .4rem;
    font-family: "Meal DM Sans", system-ui, sans-serif;
  }
  /* Photo by Ella Olsson, Pexels (1640777). */
  .welcome-credentials::before {
    content: "";
    flex: 1 0 clamp(9rem, 23vh, 20rem);
    margin: 0 calc(0px - var(--profile-inset)) clamp(.75rem, 2vh, 1.6rem);
    background: #d4dccb url("/portada-alimentos-v1.jpg") 50% 51% / cover no-repeat;
  }
  .welcome-credentials .welcome-practitioner {
    display: block;
    margin: 0 0 .65rem;
    color: #2f4435;
    font: 500 clamp(1.65rem, 2.45vw, 2.85rem)/1.15 "Meal Spectral", Georgia, serif;
    letter-spacing: -.035em;
  }
  .welcome-credentials strong { font-size: clamp(.98rem, 1.15vw, 1.13rem); }
  .welcome-credentials > span { font-size: 1rem; color: #536b55; }
  .welcome-credentials > div { justify-content: flex-start; margin-top: .95rem; }
  .welcome-credentials a { font-size: 1rem; }
  .welcome-curtain-action { padding-inline: var(--welcome-gutter); }

  .login-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .login-story {
    padding: clamp(1.75rem, 5vh, 3.75rem) clamp(2rem, 6vw, 7rem);
    min-height: calc(100vh - 32px);
    gap: 2rem;
  }
  .login-panel { justify-content: flex-start; padding: 3.5rem clamp(2rem, 6vw, 7rem); }
  .login-panel > .mobile-brand { display: none; }
  .login-card { width: 100%; max-width: 29rem; text-align: left; }
  .login-card h2, .story-copy h1 { font-family: "Meal Spectral", Georgia, serif; font-weight: 500; }
  .login-card h2 { font-size: clamp(2.2rem, 3.6vw, 3.7rem); }
  .login-card .login-lead, .login-card #loginForm input { font: 400 1.05rem/1.5 "Meal DM Sans", system-ui, sans-serif; }
  .login-card #loginForm label { font-size: 1rem; }
}