:root {
  --public-ink: #153d42;
  --public-copy: #4b6468;
  --public-muted: #65777a;
  --public-line: #dbe6e2;
  --public-soft: #f4f7f6;
  --public-band: #e7f2ee;
  --public-primary: #174897;
  --public-primary-hover: #103a7c;
}

body.brand-public {
  color: var(--public-ink);
  background: #fff;
  background-attachment: initial;
  font-family: "Avenir Next", Helvetica, Arial, sans-serif;
  letter-spacing: 0;
}

body.brand-public::before { display: none; }
.brand-public .page { width: 100%; margin: 0; padding: 0; }
.brand-public h1,
.brand-public h2,
.brand-public h3 { font-family: inherit; letter-spacing: 0; }

.brand-public .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 84px;
  padding: 18px max(24px, calc((100% - 1200px) / 2));
  color: var(--public-ink);
  background: #fff;
  border: 0;
  border-bottom: 1px solid #e2e8e6;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.brand-public .brand { color: inherit; text-decoration: none; }
.brand-public .brand-mark { width: 44px; height: 44px; border: 0; border-radius: 10px; box-shadow: none; }
.brand-public .brand h1,
.brand-public .brand strong { color: var(--public-ink); font-size: 21px; font-weight: 760; }
.brand-public .brand p { color: #58696c; }
.brand-public .nav { gap: 5px; }
.brand-public .nav a {
  padding: 8px;
  color: var(--public-ink);
  border-radius: 6px;
  font-size: 14px;
  opacity: 1;
}
.brand-public .nav a:hover { color: var(--public-ink); background: var(--public-band); transform: none; }
.brand-public .nav .nav-login { padding: 9px 16px; color: #fff; background: var(--public-ink); }
.brand-public .nav .nav-login:hover { color: #fff; background: #245d60; }

.brand-public .hero {
  width: 100%;
  margin: 0;
  padding: 56px max(24px, calc((100% - 1200px) / 2));
  overflow: visible;
  color: var(--public-ink);
  background: var(--public-band);
  border: 0;
  border-bottom: 1px solid #d5e5df;
  border-radius: 0;
  box-shadow: none;
}
.brand-public .hero::after { display: none; }
.site-superchurch.site-home.brand-public .hero { color: var(--public-ink); background: var(--public-band); border-radius: 0; box-shadow: none; }
.site-superchurch.site-home.brand-public .hero h2 { color: var(--public-ink); }
.site-superchurch.site-home.brand-public .hero p { color: #34585c; }
.site-superchurch.site-home.brand-public .hero .btn-primary { color: #fff; background: var(--public-primary); border-color: var(--public-primary); }
.site-superchurch.site-home.brand-public .hero .btn-secondary { color: var(--public-ink); background: transparent; border-color: #729294; }
.site-superchurch.site-home.brand-public .hero .site-kicker { color: #53666a; }
.brand-public .hero-layout { grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); gap: 48px; align-items: center; }
.brand-public .hero-badge,
.brand-public .site-kicker {
  display: inline-block;
  margin-bottom: 12px;
  padding: 0;
  color: #53666a;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.brand-public .hero h2 { max-width: 17ch; margin: 0 0 16px; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.02; font-weight: 750; }
.brand-public .hero p { max-width: 680px; color: #34585c; font-size: 18px; line-height: 1.55; }
.brand-public .btn {
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 6px;
  box-shadow: none;
  letter-spacing: 0;
  transform: none;
}
.brand-public .btn:hover { transform: none; filter: brightness(.97); }
.brand-public .btn-primary { color: #fff; background: var(--public-primary); border: 1px solid var(--public-primary); }
.brand-public .btn-secondary { color: var(--public-ink); background: transparent; border: 1px solid #729294; }

.brand-public .app-card {
  padding: 22px;
  color: var(--public-ink);
  background: rgba(255, 255, 255, .82);
  border: 1px solid #cfe0da;
  border-radius: 8px;
  box-shadow: none;
}
.brand-public .app-card .app-icon { width: 72px; height: 72px; border-radius: 16px; box-shadow: none; }
.brand-public .app-card-label { padding: 0; color: #53666a; background: transparent; letter-spacing: 0; text-transform: none; }
.brand-public .app-card p { color: var(--public-copy); }
.brand-public .app-card a { color: var(--public-primary); }

.brand-public .section,
.brand-public .grid,
.brand-public .copy,
.brand-public .doc-layout,
.brand-public .resource-intro,
.brand-public .resource-layout {
  width: min(1200px, calc(100% - 48px));
  margin-inline: auto;
}
.brand-public .section {
  margin-top: 0;
  padding: 56px 0;
  overflow: visible;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--public-line);
  border-radius: 0;
  box-shadow: none;
}
.brand-public .section::before { display: none; }
.brand-public .section-head { margin-bottom: 28px; }
.brand-public .section-kicker,
.brand-public .feature-eyebrow,
.brand-public .copy-kicker { color: #38686c; letter-spacing: 0; text-transform: none; }
.brand-public .section-head h2 { color: var(--public-ink); font-size: clamp(1.9rem, 3vw, 2.75rem); }
.brand-public .section-head p,
.brand-public .feature-card p,
.brand-public .role-card p,
.brand-public .step-card p,
.brand-public .card p,
.brand-public .copy p,
.brand-public .copy li,
.brand-public .list { color: var(--public-copy); }

.brand-public .feature-card,
.brand-public .role-card,
.brand-public .step-card,
.brand-public .card {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--public-line);
  border-radius: 8px;
  box-shadow: none;
  transform: none;
}
.brand-public .feature-card:hover,
.brand-public .role-card:hover,
.brand-public .step-card:hover,
.brand-public .card:hover { border-color: #9bb8ad; box-shadow: 0 10px 26px rgba(21, 61, 66, .08); transform: translateY(-2px); }
.brand-public .grid { margin-top: 0; padding: 0 0 56px; }
.brand-public .copy {
  margin-top: 0;
  padding: 40px 0;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--public-line);
  border-radius: 0;
  box-shadow: none;
}
.brand-public .notice { border-radius: 6px; background: #eef6f2; }

.brand-public.resource-page .page { width: 100%; }
.brand-public .resource-intro { padding: 54px 0 36px; }
.brand-public .resource-intro h2 { color: var(--public-ink); font-size: clamp(2.4rem, 5vw, 4.25rem); line-height: 1.04; }
.brand-public .resource-intro p,
.brand-public .resource-section p,
.brand-public .resource-section li { color: var(--public-copy); }
.brand-public .resource-layout { grid-template-columns: minmax(0, 1fr) 250px; }
.brand-public .resource-section { border-color: var(--public-line); }
.brand-public .resource-aside { position: sticky; top: 16px; align-self: start; }
.brand-public .resource-aside a { color: var(--public-primary); }
.brand-public .resource-table th,
.brand-public .resource-table td { border-color: var(--public-line); }

.brand-public .footer {
  width: 100%;
  margin: 0;
  padding: 30px 24px;
  color: #586b6d;
  background: var(--public-soft);
  font-size: 12px;
  line-height: 2;
}
.brand-public .footer a { color: #345b60; }

.brand-public .directory-search input { color: var(--public-ink); border-color: #b8cbc4; }
.brand-public .directory-search button { background: var(--public-primary); }
.brand-public .directory-meta { color: var(--public-muted); }
.brand-public .church-result { border-color: var(--public-line); box-shadow: none; }
.brand-public .church-result:hover,
.brand-public .church-result:focus-visible { border-color: #6f9990; }
.brand-public .church-result strong { color: var(--public-ink); }
.brand-public .church-result span { color: var(--public-muted); }

.invitation-page main { width: min(520px, calc(100% - 32px)); margin: 0 auto; padding: 64px 0; }
.invitation-page header { padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid var(--public-line); }
.invitation-page header a { color: var(--public-ink); font-size: 20px; }
.invitation-page h1 { color: var(--public-ink); font-size: clamp(2.2rem, 9vw, 3.8rem); line-height: 1.04; }
.invitation-page p { color: var(--public-copy); }
.invitation-page nav a { border-color: #b8cbc4; border-radius: 6px; }
.invitation-page nav .primary { background: var(--public-primary); border-color: var(--public-primary); }

@media (prefers-reduced-motion: no-preference) {
  .brand-public .hero-copy { animation: public-enter .45s ease-out both; }
  .brand-public .app-card { animation: public-enter .55s .04s ease-out both; }
  @keyframes public-enter { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
}

@media (max-width: 900px) {
  .brand-public .topbar { padding: 14px 20px; align-items: flex-start; }
  .brand-public .hero { padding: 40px 24px; }
  .brand-public .hero-layout { grid-template-columns: 1fr; gap: 28px; }
  .brand-public .hero h2 { max-width: none; font-size: clamp(2.35rem, 10vw, 3.8rem); }
  .brand-public .app-card { order: initial; }
  .brand-public .section,
  .brand-public .grid,
  .brand-public .copy,
  .brand-public .doc-layout,
  .brand-public .resource-intro,
  .brand-public .resource-layout { width: min(100% - 40px, 1200px); }
  .brand-public .resource-layout { grid-template-columns: 1fr; }
  .brand-public .resource-aside { position: static; }
}

@media (max-width: 520px) {
  .brand-public .topbar { gap: 10px; }
  .brand-public .brand p { display: none; }
  .brand-public .nav { width: 100%; justify-content: space-between; }
  .brand-public .nav a { padding: 6px; font-size: 12px; }
  .brand-public .nav .nav-login { padding: 7px 10px; }
  .brand-public .hero { padding: 32px 20px; }
  .brand-public .hero h2 { font-size: 2.55rem; overflow-wrap: anywhere; }
  .brand-public .hero p { font-size: 16px; }
  .brand-public .section,
  .brand-public .grid,
  .brand-public .copy,
  .brand-public .doc-layout,
  .brand-public .resource-intro,
  .brand-public .resource-layout { width: min(100% - 32px, 1200px); }
}