/*
 * Public Learn pages. Education is read inside the investor portal, so visitors see a
 * calm sign-in panel. The full guide stays in the HTML for search engines, below the
 * panel, and is not shown. Colors and type come from /assets/site/tokens.css
 * (loaded with the shared header).
 */
body.learn-page {
  margin: 0;
  background: var(--color-surface-soft);
  color: var(--color-ink);
  font: 400 var(--text-base) / var(--line-height-body) var(--font-body);
}
.learn-gate-page {
  display: block;
  padding: 48px 20px 72px;
}
.learn-gate-page:focus {
  outline: none;
}
.learn-gate {
  box-sizing: border-box;
  max-width: 720px;
  margin: 0 auto;
  padding: 40px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--color-surface);
}
.learn-gate h1 {
  margin: 0 0 20px;
  color: var(--color-heading);
  font: 400 clamp(30px, 4vw, 40px) / var(--line-height-heading)
    var(--font-heading);
}
.learn-gate p {
  margin: 0 0 20px;
  font-size: var(--text-base);
  line-height: var(--line-height-body);
}
.learn-gate .learn-gate-summary {
  color: var(--color-ink);
}
.learn-gate .learn-gate-message {
  color: var(--color-heading);
  font-size: var(--text-lg);
}
.learn-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 28px 0;
}
.learn-gate-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  min-height: 56px;
  padding: 14px 28px;
  border: 2px solid var(--color-navy);
  border-radius: var(--radius-sm, 8px);
  background: var(--color-surface);
  color: var(--color-navy);
  font: 400 var(--text-lg) / 1.2 var(--font-body);
  text-decoration: none;
}
.learn-gate-button-primary {
  background: var(--color-navy);
  color: var(--color-on-navy);
}
.learn-gate-button:hover {
  background: var(--color-surface-tint);
}
.learn-gate-button-primary:hover {
  background: var(--color-navy-hover);
}
.learn-gate-button:focus-visible,
.learn-gate a:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}
.learn-gate .learn-gate-phone {
  margin: 0;
}
.learn-gate-phone a {
  color: var(--color-navy);
  font-weight: 600;
  white-space: nowrap;
}
.learn-opening {
  max-width: 720px;
  margin: 0 auto;
  color: var(--color-heading);
  font-size: var(--text-lg);
}
/* The guide text is for search engines; investors read it in the portal. */
.learn-full-text {
  display: none;
}
@media (max-width: 600px) {
  .learn-gate-page {
    padding: 24px 16px 48px;
  }
  .learn-gate {
    padding: 28px 20px;
  }
  .learn-gate-button {
    flex: 1 1 100%;
  }
}