/* Public product content. Keep these styles scoped away from the workspace. */
.marketing-page {
  margin: 0;
  background: #f7f8fa;
  color: #17202a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
}
.marketing-page *, .marketing-auth * { box-sizing: border-box; }
.marketing-auth.auth-screen {
  display: block;
  padding: max(36px, var(--app-safe-top)) 24px max(24px, var(--app-safe-bottom));
}
.marketing-entry, .marketing-overview, .marketing-shell, .marketing-nav, .marketing-page > .marketing-footer {
  width: min(1120px, 100%);
  margin-inline: auto;
}
.marketing-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  align-items: center;
  gap: clamp(24px, 5vw, 76px);
  padding-block: 20px 56px;
}
.marketing-entry .auth-panel { width: 100%; }
.marketing-entry .brand-lockup h1 { font-size: 34px; }
.marketing-entry .brand-lockup p { font-size: 14px; }
.marketing-intro h2, .marketing-hero h1 {
  font-size: clamp(28px, 3.7vw, 44px);
  line-height: 1.18;
  letter-spacing: -.025em;
  text-wrap: balance;
  margin: 32px 0 20px;
}
.marketing-lead, .marketing-hero > p:not(.marketing-kicker) {
  color: #465666;
  font-size: 18px;
  line-height: 1.75;
  max-width: 760px;
}
.marketing-intro .marketing-text-link { margin-top: 12px; }
.marketing-text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: #145c96;
  font-weight: 650;
  text-underline-offset: 4px;
}
.marketing-section {
  padding-block: 42px;
  border-top: 1px solid #d9e0e7;
  scroll-margin-top: 24px;
}
.marketing-section h2 { margin: 0 0 22px; font-size: clamp(23px, 2.4vw, 30px); line-height: 1.3; text-wrap: balance; }
.marketing-section h3 { font-size: 21px; line-height: 1.35; margin: 12px 0; }
.marketing-section p, .marketing-section li { color: #465666; line-height: 1.75; }
.marketing-section li { margin-block: 10px; }
.marketing-kicker {
  color: #1769aa !important;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .03em;
  margin: 0 0 12px;
}
.marketing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.marketing-card {
  padding: 26px;
  background: #fff;
  border: 1px solid #d9e0e7;
  border-radius: 12px;
}
.marketing-card h3 a { color: #17202a; text-decoration: none; }
.marketing-card h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.marketing-number { color: #58758b; font-size: 13px; font-weight: 700; }
.marketing-explanation { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; }
.marketing-explanation p:first-child { margin-top: 0; }
.marketing-start { display: flex; align-items: center; gap: 32px; }
.marketing-start > div { flex: 1; }
.marketing-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 12px 20px;
  background: #1769aa;
  border: 1px solid #1769aa;
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  line-height: 1.4;
}
.marketing-button:hover { background: #12568d; }
.marketing-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 26px;
  border-top: 1px solid #d9e0e7;
  color: #526171;
  font-size: 13px;
}
.marketing-links { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.marketing-links a, .marketing-footer a { color: #145c96; text-underline-offset: 4px; }
.marketing-links a { display: inline-flex; align-items: center; min-height: 44px; }
.marketing-links a.marketing-button { color: #fff; }
.marketing-auth a:focus-visible, .marketing-page a:focus-visible { outline: 3px solid #1769aa; outline-offset: 5px; border-radius: 3px; }
#loginForm, #publicOverview { scroll-margin-top: 24px; }
.marketing-nav { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 24px; }
.marketing-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 750; color: #17202a; text-decoration: none; }
.marketing-brand img { width: 40px; height: 40px; }
.marketing-page { padding-inline: 24px; }
.marketing-page .marketing-hero { padding-block: 36px 46px; }
.marketing-page .marketing-hero h1 { max-width: 900px; margin-top: 12px; }
.marketing-page .marketing-section > p { max-width: 850px; }
.marketing-page .marketing-shell { max-width: 960px; }
.marketing-page .marketing-card a { color: #145c96; text-underline-offset: 4px; }
.marketing-page a.marketing-card { color: #145c96; text-underline-offset: 4px; }
.marketing-page .marketing-card p { margin-bottom: 0; }
@media (max-width: 720px) {
  .marketing-auth.auth-screen { padding-inline: 18px; padding-top: max(24px, var(--app-safe-top)); }
  .marketing-entry { grid-template-columns: 1fr; gap: 26px; padding-block: 0 36px; }
  .marketing-intro h2 { font-size: 28px; margin-top: 24px; }
  .marketing-entry .auth-panel { max-width: 480px; margin-inline: auto; padding: 20px; }
  .marketing-lead { font-size: 16px; }
  .marketing-grid, .marketing-explanation { grid-template-columns: 1fr; gap: 18px; }
  .marketing-card { padding: 22px; }
  .marketing-section { padding-block: 32px; }
  .marketing-start { align-items: stretch; flex-direction: column; gap: 8px; }
  .marketing-nav { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .marketing-nav .marketing-links { gap: 12px; font-size: 14px; }
  .marketing-page { padding-inline: 18px; }
  .marketing-page .marketing-hero { padding-block: 20px 32px; }
}