/*
 * The product gateway: patient, or practitioner.
 *
 * Deliberately a static page. It asks exactly one question and then sends the
 * visitor to one of two applications, so making it a Flutter route would mean
 * booting ~9.8MB of JavaScript to render two cards and a pair of links.
 *
 * Styled on the web brand tokens from style.css (--teal, --forest, --coral,
 * --mint). The old version of this screen was four full-bleed saturated
 * gradient cards — purple, teal, green, orange — which read as a settings menu
 * rather than a choice between two products.
 */

.gateway {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 104px 24px 56px;
  background:
    radial-gradient(110% 80% at 8% 0%, rgba(13, 123, 120, 0.10), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(239, 104, 76, 0.08), transparent 55%),
    var(--canvas);
}

.gateway-inner {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
}

.gateway-head {
  max-width: 640px;
  margin: 0 0 40px;
}

.gateway-head .eyebrow {
  color: var(--teal);
}

.gateway-head h1 {
  margin: 10px 0 12px;
  font-family: var(--font-display);
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--forest);
  /*
   * German compounds are long enough that automatic hyphenation kicks in and
   * splits "Versorgung" across lines at display size, which reads as a typo.
   * Wrap on word boundaries instead, and only break inside a word if one is
   * genuinely wider than the column.
   */
  hyphens: manual;
  overflow-wrap: break-word;
}

.gateway-head p {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.gateway-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/*
 * One card per product, and the whole card is the link.
 *
 * The visitor is choosing which of two applications to enter, not toggling a
 * setting, so the target has to be the full card rather than a small button
 * inside it.
 */
.gateway-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 30px 26px;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1),
              box-shadow 220ms ease,
              border-color 220ms ease;
}

/* A thin accent that names the product without shouting. */
.gateway-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--accent, var(--teal));
}

.gateway-card:hover,
.gateway-card:focus-visible {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: var(--shadow);
  outline: none;
}

.gateway-card:focus-visible {
  outline: 2px solid var(--accent, var(--teal));
  outline-offset: 3px;
}

.gateway-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: var(--mark-bg, var(--mint-soft));
  color: var(--accent, var(--teal));
}

.gateway-mark svg { width: 24px; height: 24px; }

.gateway-card h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 23px;
  letter-spacing: -0.01em;
  color: var(--forest);
}

.gateway-card .card-lede {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.gateway-card ul {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.gateway-card li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}

.gateway-card li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--accent-ink, var(--teal));
  border-bottom: 2px solid var(--accent-ink, var(--teal));
  transform: rotate(-45deg);
}

.gateway-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--accent-ink, var(--teal));
}

.gateway-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.gateway-card:hover .gateway-cta svg { transform: translateX(3px); }

/*
 * Practitioner side reads as the other product, not as a lesser option.
 *
 * Two coral tokens on purpose. --accent is the decorative one (the rule along
 * the top, the icon tile), where contrast has no threshold to meet.
 * --accent-ink is what text and the checkmarks use, because --coral is 3.11:1
 * on white — below the 4.5:1 WCAG AA needs for normal text at this size.
 * --coral-dark is 4.62:1 and passes.
 */
.gateway-card.is-pro {
  --accent: var(--coral);
  --accent-ink: var(--coral-dark);
  --mark-bg: rgba(239, 104, 76, 0.10);
}

.gateway-foot {
  margin: 34px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.gateway-foot a { color: var(--teal); }

@media (prefers-reduced-motion: reduce) {
  .gateway-card,
  .gateway-cta svg { transition: none; }
  .gateway-card:hover { transform: none; }
}

@media (max-width: 820px) {
  .gateway { padding: 92px 16px 40px; }
  .gateway-grid { grid-template-columns: 1fr; }
  .gateway-head { margin-bottom: 28px; }
  .gateway-card { padding: 26px 22px 22px; }
}

/* Always reachable, including on a phone (see the note in start.html). */
.gateway-language {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}