/* Public storytelling is deliberately separate from the quieter account UI. */
.account-ui #public-view .public-intro {
  min-height: 580px;
  padding: 88px 0 96px;
  background-color: #f4f5f3;
  background-image:
    linear-gradient(90deg, #f4f5f3 0%, #f4f5f3 43%, rgba(244,245,243,.98) 55%, rgba(244,245,243,.45) 68%, rgba(244,245,243,0) 85%),
    url("/images/hero/identity-banner.png");
  background-size: 100% 100%, auto 100%;
  background-position: center, right center;
  background-repeat: no-repeat;
}
.account-ui #public-view .public-intro h1 {
  max-width: 560px;
  font-size: clamp(40px, 4.2vw, 58px);
  line-height: 1.12;
}
.account-ui #public-view .public-intro p {
  max-width: 480px;
  margin: 24px 0 32px;
  font-size: 18px;
  color: #48524b;
}
.account-ui #public-view .public-process {
  background: linear-gradient(125deg, #fff7f0, #fbf3eb 58%, #f8f5ef);
}
.account-ui #public-view .public-section {
  border-top: 0;
  padding-top: 64px;
  padding-bottom: 64px;
}
.account-ui #public-view .public-section h2 {
  font: 500 32px/1.2 var(--font-display);
  letter-spacing: -.02em;
  margin-bottom: 32px;
}
.account-ui #public-view .public-steps { gap: 20px; }
.account-ui #public-view .public-steps li {
  padding: 28px;
  border: 1px solid #e8dfd4;
  border-radius: 8px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 6px 18px rgba(75,49,27,.025);
}
.account-ui #public-view .public-steps li::before { color: var(--accent); }
.account-ui #public-view .public-steps h3 { margin-top: 16px; }
.account-ui #public-view .public-detail { gap: 72px; }
.account-ui #public-view .public-detail h2 { max-width: 360px; margin-bottom: 0; }
@media (max-width: 720px) {
  .account-ui #public-view .public-intro {
    min-height: 0;
    padding: 48px 0 320px;
    background-image:
      linear-gradient(180deg, #f4f5f3 0%, #f4f5f3 48%, rgba(244,245,243,.9) 57%, rgba(244,245,243,0) 74%),
      url("/images/hero/identity-banner.png");
    background-size: 100% 100%, auto 360px;
    background-position: center, right bottom;
  }
  .account-ui #public-view .public-intro h1 { max-width: 520px; font-size: 38px; }
  .account-ui #public-view .public-intro p { margin: 20px 0 28px; }
  .account-ui #public-view .public-intro .actions { gap: 16px 24px; }
  .account-ui #public-view .public-section { padding-top: 40px; padding-bottom: 40px; }
  .account-ui #public-view .public-section h2 { font-size: 28px; margin-bottom: 24px; }
  .account-ui #public-view .public-steps li { padding: 24px; }
  .account-ui #public-view .public-detail { gap: 24px; }
  .account-ui #public-view .public-detail h2 { margin-bottom: 0; }
}
@media (min-width: 541px) and (max-width: 720px) {
  .account-ui #public-view .public-intro {
    background-image:
      linear-gradient(180deg, #f4f5f3 0%, #f4f5f3 48%, rgba(244,245,243,.9) 57%, rgba(244,245,243,0) 74%),
      linear-gradient(90deg, #f4f5f3 0%, #f4f5f3 26%, rgba(244,245,243,0) 62%),
      url("/images/hero/identity-banner.png");
    background-size: 100% 100%, 100% 360px, auto 360px;
    background-position: center, center bottom, right bottom;
  }
}