:root {
  --navy: #06131f;
  --green: #16a34a;
  --green-dark: #087d35;
  --ink: #101827;
  --muted: #657183;
  --line: #e3e9e6;
  --bg: #f7faf8;
  --purple: #6d28d9;
  --orange: #f97316;
  --pink: #ec4899;
  --teal: #149ba6;
  --radius: 18px;
  --shadow: 0 16px 40px rgba(6, 19, 31, 0.1);
}
.registration-roadmap{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 24px}.registration-roadmap>div{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid #dbe6e0;border-radius:10px;background:#f6f9f7}.registration-roadmap b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#dfe8e3;color:#244135}.registration-roadmap .active{border-color:#0aa653;background:#edfff4}.registration-roadmap .active b{background:#078841;color:#fff}.registration-roadmap span{display:grid;gap:2px}.registration-roadmap strong{font-size:14px}.registration-roadmap small{font-size:12px;color:#65756d}@media(max-width:650px){.registration-roadmap{grid-template-columns:1fr}.registration-roadmap>div{padding:10px}}
.analytics-period {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 18px 0;
  color: #5d6d65;
  font-size: 13px;
}
.analytics-period select {
  padding: 9px 12px;
  border: 1px solid #d3ded8;
  border-radius: 8px;
  background: #fff;
}
.analytics-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 13px;
}
.analytics-metrics article {
  padding: 18px;
  border: 1px solid #dce6e0;
  border-radius: 12px;
  background: #f8fbf9;
}
.analytics-metrics span,
.analytics-metrics strong,
.analytics-metrics small {
  display: block;
}
.analytics-metrics span {
  color: #607068;
  font-size: 13px;
  font-weight: 800;
}
.analytics-metrics strong {
  margin: 7px 0;
  font-size: 30px;
}
.analytics-metrics small {
  color: #087d35;
  font-size: 12px;
}
.analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
}
.analytics-grid > section {
  padding: 19px;
  border: 1px solid #dce6e0;
  border-radius: 12px;
}
.analytics-grid h3 {
  margin: 0 0 15px;
}
.analytics-bars {
  display: grid;
  gap: 11px;
}
.analytics-bars > div {
  display: grid;
  grid-template-columns: 120px 1fr 35px;
  gap: 9px;
  align-items: center;
  font-size: 13px;
}
.analytics-bars i {
  height: 10px;
  overflow: hidden;
  border-radius: 8px;
  background: #e8eeea;
}
.analytics-bars b {
  display: block;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, #087d35, #32c968);
}
.analytics-bars strong {
  text-align: right;
}
.analytics-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.analytics-detail div {
  padding: 12px;
  border-radius: 8px;
  background: #f4f8f5;
}
.analytics-detail span,
.analytics-detail strong {
  display: block;
}
.analytics-detail span {
  color: #65746d;
  font-size: 12px;
}
.analytics-detail strong {
  margin-top: 4px;
  font-size: 21px;
}
.fund-report {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
  margin-top: 18px;
  padding: 19px;
  border-radius: 12px;
  background: #071923;
  color: #fff;
}
.fund-report span,
.fund-report strong {
  display: block;
}
.fund-report span {
  color: #b9c9c1;
  font-size: 13px;
}
.fund-report strong {
  margin-top: 6px;
  font-size: 24px;
}
.fund-report p {
  grid-column: 1/-1;
  margin: 4px 0 0;
  color: #9eb1a8;
  font-size: 12px;
}
@media (max-width: 850px) {
  .analytics-metrics,
  .analytics-grid,
  .fund-report {
    grid-template-columns: 1fr;
  }
  .analytics-bars > div {
    grid-template-columns: 90px 1fr 30px;
  }
  .analytics-detail {
    grid-template-columns: 1fr;
  }
  .fund-report p {
    grid-column: auto;
  }
}
.notification-app {
  min-height: 100vh;
  padding: 34px;
  background: #f4f7f5;
}
.notification-app > .profile-heading,
.notification-member-grid {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
.notification-member-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.6fr);
  gap: 20px;
}
.notification-member-grid > .profile-card {
  padding: 22px;
}
.notification-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.notification-head h2,
.notification-preferences h2 {
  margin-top: 0;
}
.notification-head button {
  border: 0;
  background: transparent;
  color: #087d35;
  font-weight: 800;
  cursor: pointer;
}
.member-notification {
  display: grid;
  grid-template-columns: 20px 1fr;
  width: 100%;
  gap: 10px;
  padding: 16px 8px;
  border: 0;
  border-bottom: 1px solid #e2e9e5;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.member-notification.unread {
  background: #f0faf4;
}
.member-notification > span {
  color: #0b9840;
}
.member-notification strong,
.member-notification small {
  display: block;
}
.member-notification p {
  margin: 5px 0;
  white-space: pre-wrap;
  color: #506158;
  line-height: 1.5;
}
.member-notification small {
  color: #718078;
}
.notification-preferences {
  display: grid;
  gap: 13px;
  align-content: start;
}
.notification-preferences > p,
.notification-preferences > small {
  color: #607067;
  line-height: 1.5;
}
.notification-preferences label {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-weight: 700;
}
.communications-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 20px;
}
.communications-grid form {
  display: grid;
  gap: 11px;
  padding: 18px;
  border: 1px solid #dce6e0;
  border-radius: 11px;
  background: #f8fbf9;
}
.communications-grid h3 {
  margin: 0;
}
.communications-grid label {
  font-size: 14px;
  font-weight: 800;
}
.communications-grid input,
.communications-grid select,
.communications-grid textarea {
  box-sizing: border-box;
  width: 100%;
  margin-top: 5px;
  padding: 10px;
  border: 1px solid #d1ddd5;
  border-radius: 7px;
  background: #fff;
  font: inherit;
}
.communications-grid form > button:not(.button) {
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: #071923;
  color: #fff;
  font-weight: 800;
}
.communications-grid small {
  color: #6b7972;
}
.communications-lower {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 25px;
}
.notification-template {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 13px;
  border-bottom: 1px solid #e2e8e4;
}
.notification-template strong,
.notification-template small {
  display: block;
}
.notification-template small,
.notification-history small {
  margin-top: 3px;
  color: #718078;
}
.notification-template p {
  grid-column: 1/-1;
  margin: 0;
  color: #4e5f56;
}
.notification-template button {
  padding: 6px 8px;
  border: 1px solid #d1dcd5;
  border-radius: 6px;
  background: #fff;
  color: #087d35;
  font-weight: 800;
}
.notification-history {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: center;
  padding: 13px;
  border-bottom: 1px solid #e2e8e4;
}
.notification-history strong,
.notification-history small {
  display: block;
}
@media (max-width: 800px) {
  .notification-app {
    padding: 20px 15px;
  }
  .notification-member-grid,
  .communications-grid,
  .communications-lower {
    grid-template-columns: 1fr;
  }
}
.discussion-app {
  min-height: 100vh;
  padding: 34px;
  background: #f4f7f5;
}
.discussion-app > .profile-heading,
.discussion-layout {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
.discussion-layout {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.discussion-compose {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 12px;
  padding: 22px;
}
.discussion-compose h2 {
  margin: 0;
}
.discussion-compose label {
  font-size: 12px;
  font-weight: 800;
}
.discussion-compose input,
.discussion-compose select,
.discussion-compose textarea,
.discussion-tools input,
.discussion-tools select,
.discussion-replies textarea {
  box-sizing: border-box;
  width: 100%;
  margin-top: 6px;
  padding: 11px;
  border: 1px solid #d3ded8;
  border-radius: 8px;
  background: #fff;
  font: inherit;
}
.discussion-guidelines {
  margin-top: 8px;
  padding: 13px;
  border-radius: 9px;
  background: #edf8f1;
}
.discussion-guidelines p {
  margin: 5px 0 0;
  color: #5e6d65;
  font-size: 11px;
}
.discussion-tools {
  display: grid;
  grid-template-columns: 1fr 190px;
  gap: 10px;
  margin-bottom: 14px;
}
.discussion-tools input,
.discussion-tools select {
  margin: 0;
}
.discussion-card {
  margin-bottom: 14px;
  padding: 21px;
  border: 1px solid #dce6e0;
  border-radius: 14px;
  background: #fff;
}
.discussion-card.pinned {
  border-color: #95cdaa;
  box-shadow: inset 4px 0 #0b9840;
}
.discussion-card > header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.discussion-card > header div {
  display: flex;
  gap: 6px;
}
.discussion-card > header b,
.discussion-category {
  padding: 5px 7px;
  border-radius: 999px;
  background: #e7f7ed;
  color: #087d35;
  font-size: 9px;
  font-weight: 900;
}
.discussion-card > header b {
  background: #fff1d7;
  color: #8b5c0b;
}
.discussion-card > header small {
  color: #718078;
  font-size: 10px;
}
.discussion-card > h2 {
  margin: 14px 0 7px;
  font-size: 21px;
}
.discussion-card > p {
  white-space: pre-wrap;
  color: #46574e;
  font-size: 13px;
  line-height: 1.6;
}
.discussion-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 10px;
}
.discussion-actions button,
.discussion-replies article button,
.discussion-report > div button {
  padding: 7px 9px;
  border: 1px solid #d2ddd6;
  border-radius: 7px;
  background: #fff;
  color: #087d35;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.discussion-actions span {
  margin-left: auto;
  color: #718078;
  font-size: 10px;
}
.discussion-replies {
  margin-top: 16px;
  padding: 14px;
  border-radius: 10px;
  background: #f5f8f6;
}
.discussion-replies article {
  padding: 11px 4px;
  border-bottom: 1px solid #e1e8e4;
}
.discussion-replies article strong,
.discussion-replies article small {
  margin-right: 8px;
  font-size: 10px;
}
.discussion-replies article p {
  margin: 6px 0;
  white-space: pre-wrap;
  font-size: 12px;
}
.discussion-replies form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
  margin-top: 12px;
}
.report-list {
  display: grid;
  gap: 13px;
  margin-top: 20px;
}
.discussion-report {
  padding: 18px;
  border: 1px solid #dce6e0;
  border-radius: 11px;
}
.discussion-report header {
  display: flex;
  justify-content: space-between;
}
.discussion-report h3 {
  margin: 12px 0 5px;
}
.discussion-report > p {
  white-space: pre-wrap;
  color: #4f6057;
  font-size: 12px;
}
.discussion-report > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}
.discussion-report > div .button {
  background: #087d35;
  color: #fff;
}
@media (max-width: 800px) {
  .discussion-app {
    padding: 20px 15px;
  }
  .discussion-layout,
  .discussion-tools {
    grid-template-columns: 1fr;
  }
  .discussion-compose {
    position: static;
  }
  .discussion-card > header {
    display: grid;
  }
  .discussion-replies form {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 761px) {
  body .header-actions {
    display: flex;
    flex-shrink: 0;
  }
  body .header-actions .ghost {
    display: inline-flex;
  }
}
.vote-profile-link {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 11px;
  width: 195px;
  padding: 9px 14px;
  border: 1px solid #ffffff42;
  border-radius: 8px;
  background: #06131fe8;
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}
.vote-profile-link:hover {
  border-color: #20ce5b;
  color: #57e485;
}
@media (max-width: 760px) {
  .vote-profile-link {
    right: 14px;
    bottom: 8px;
    width: 165px;
    padding: 7px 10px;
    font-size: 11px;
  }
}

/* Home hero dimensions and artwork placement match the approved landing-page PDF. */
.gfc-slogan {
  display: grid;
  gap: 2px;
  margin: 14px 0 16px;
  padding-left: 14px;
  border-left: 4px solid #12a85b;
}
.hero-rally {
  display: block;
  margin: -3px 0 9px;
  color: #0b713d;
  font-size: 1rem;
  letter-spacing: .025em;
}
.gfc-slogan strong {
  color: #0b713d;
  font-size: clamp(1.35rem, 2.25vw, 2rem);
  line-height: 1;
  letter-spacing: .045em;
}
.gfc-slogan span {
  color: #18212c;
  font-size: 1rem;
  font-weight: 700;
}
.gfc-slogan small {
  color: #0b713d;
  font-size: .85rem;
  font-weight: 800;
}
.mobile-only {
  display: none;
}
.header-search {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 28px;
  line-height: 1;
}
.home-member-data {
  position: absolute;
  z-index: 2;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  width: 210px;
  padding: 8px 17px;
  border: 1px solid #ffffff55;
  border-radius: 10px;
  background: #06131fee;
  color: #fff;
  box-shadow: 0 12px 30px #0005;
}
.home-member-data > div {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #ffffff24;
}
.home-member-data > div:last-child {
  border: 0;
}
.home-member-data i {
  color: #20ce5b;
  font-size: 24px;
  font-style: normal;
}
.home-member-data b,
.home-member-data small {
  display: block;
}
.home-member-data b {
  font-size: 18px;
}
.home-member-data small {
  font-size: 11px;
  color: #fff;
  margin-top: 2px;
}
@media (min-width: 761px) {
  body .hero {
    display: block;
    min-height: 350px;
    height: 350px;
  }
  body .hero-copy {
    position: relative;
    width: 46%;
    padding: 30px 0 24px 6vw;
  }
  body .hero-copy h1 {
    font-size: clamp(38px, 3.4vw, 50px);
    margin-bottom: 14px;
  }
  body .hero-copy > p {
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    max-width: 520px;
  }
  body .hero-copy .cta-row {
    margin: 17px 0 14px;
  }
  body .hero-copy .trust-row {
    gap: 22px;
    font-size: 12px;
  }
  body .hero-visual {
    position: absolute;
    inset: 0 0 0 auto;
    width: 65%;
    min-height: 0;
    background-image: url("assets/hero-home-v2.png");
    background-size: cover;
    background-position: center 55%;
    background-repeat: no-repeat;
    background-color: #eef2ef;
  }
  .approved-hero.hero-play,
  .approved-hero.hero-vote {
    min-height: 340px;
    grid-template-columns: 1fr;
    background-position: right center;
    background-size: auto 100%;
  }
  .approved-hero.hero-play > div,
  .approved-hero.hero-vote > div {
    max-width: 48%;
  }
}
@media (max-width: 760px) {
  .mobile-only {
    display: block;
  }
  .home-member-data {
    right: 16px;
    width: 185px;
  }
  .home-member-data > div {
    padding: 7px 0;
  }
  .home-member-data b {
    font-size: 16px;
  }
}
/* Honest launch-state presentation for member data before live records exist. */
.stats-empty {
  width: 265px;
  padding: 16px 22px;
}
.stats-title {
  margin: 0;
  padding: 0 0 12px;
  border-bottom: 1px solid #ffffff20;
}
.stats-title strong,
.stats-title small {
  display: block;
}
.stats-title strong {
  font-size: 15px;
}
.stats-title small {
  margin-top: 5px;
  color: #bfcdd2;
  font-size: 11px;
  line-height: 1.4;
}
.stats-empty .stat {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-items: center;
}
.stat-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #ffffff14;
  border: 1px solid #ffffff22;
  display: grid;
  place-items: center;
  font-size: 18px;
}
.stats-empty .stat b {
  color: #57e485;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.home-fund-strip { display: grid; grid-template-columns: 1fr 1fr .9fr; gap: 1px; padding: 0 max(4vw, 22px); background: #dce7e1; border-bottom: 1px solid #dce7e1; }
.home-fund-strip > * { min-height: 112px; padding: 20px 24px; background: #f5faf7; }
.home-fund-strip > div { display: grid; align-content: center; gap: 4px; }
.home-fund-strip span { color: #087d35; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.home-fund-strip strong { color: #071923; font-size: clamp(25px, 3vw, 34px); }
.home-fund-strip small { color: #65746d; font-size: 12px; line-height: 1.35; }
.home-fund-strip > a { display: grid; align-content: center; gap: 6px; background: #071923; color: #fff; }
.home-fund-strip > a small { color: #71e49a; }
@media (max-width: 760px) {
  html, body { min-height: 100%; overflow-y: auto !important; overscroll-behavior-y: auto; touch-action: pan-y !important; }
  .home-fund-strip { grid-template-columns: 1fr 1fr; padding: 0; }
  .home-fund-strip > * { min-height: 98px; padding: 16px; }
  .home-fund-strip > a { grid-column: 1 / -1; min-height: 76px; }
  .home-fund-strip strong { font-size: 23px; }
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select {
  font: inherit;
}
.site-header {
  height: 76px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 4vw;
  gap: 20px;
  box-shadow: 0 6px 20px #06131f33;
}
.brand {
  width: 235px;
  flex: 0 0 235px;
}
.brand img {
  display: block;
  width: 100%;
  height: 54px;
  object-fit: contain;
  object-position: left center;
}
.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  flex: 1;
}
.main-nav a {
  position: relative;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.86;
  padding: 29px 0 25px;
}
.main-nav a:hover,
.main-nav a.active {
  color: #28d45f;
  opacity: 1;
}
.main-nav .admin-nav-link {
  color: #55e883;
  opacity: 1;
}
.main-nav a.active:after {
  content: "";
  position: absolute;
  height: 3px;
  left: 0;
  right: 0;
  bottom: 14px;
  background: #28d45f;
  border-radius: 2px;
}
.nav-more {
  position: relative;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}
.nav-more summary {
  padding: 29px 0 25px;
  cursor: pointer;
  list-style: none;
  opacity: 0.86;
}
.nav-more summary::-webkit-details-marker {
  display: none;
}
.nav-more summary::after {
  content: " ▾";
}
.nav-more > div {
  display: grid;
  position: absolute;
  top: 64px;
  right: -18px;
  min-width: 150px;
  padding: 9px 18px;
  border-radius: 0 0 12px 12px;
  background: var(--navy);
  box-shadow: var(--shadow);
}
.nav-more > div a {
  padding: 10px 0;
}
.nav-more > div a.active::after {
  display: none;
}
.home-primary-actions {
  flex-wrap: wrap;
}
.home-primary-actions .card-action {
  background: #123e78;
}
.home-primary-actions .join-action {
  color: #18212c;
  border-color: #b8c1c7;
}
.home-feature-grid .feature:first-child,
.home-feature-grid .feature:nth-child(2) {
  background: #effaf3;
}
.home-feature-grid .feature:first-child h3,
.home-feature-grid .feature:nth-child(2) h3 {
  color: #087a39;
}
/* Keep the homepage's main choices visible on a standard laptop screen. */
.hero + .section {
  padding-top: 34px;
  padding-bottom: 44px;
}
.hero + .section > .section-heading {
  margin-bottom: 20px;
}
.home-feature-grid .feature {
  padding: 16px 18px;
}
.home-feature-grid .feature-icon {
  margin-bottom: 8px;
}
.home-feature-grid .feature h3 {
  margin: 8px 0;
}
.home-feature-grid .feature p {
  margin-bottom: 0;
}
.home-membership-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1200px;
  margin: 18px auto 0;
  padding: 18px 24px;
  border: 2px solid #bfe5cc;
  border-radius: 14px;
  background: #effaf3;
}
.home-membership-guide .eyebrow {
  color: #087a39;
}
.home-membership-guide h3 {
  margin: 6px 0 4px;
  font-size: 22px;
}
.home-membership-guide p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}
.home-membership-guide .button {
  flex: 0 0 auto;
}
.home-guide-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}
.hero + .section > .split-cards {
  margin-top: 20px;
  margin-bottom: 20px;
}
.new {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7px;
  background: #20cf57;
  color: #06220e;
  padding: 2px 5px;
  border-radius: 8px;
}
.header-actions {
  display: flex;
  gap: 10px;
}
.button {
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--green), #07913a);
  color: #fff;
  padding: 13px 19px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}
.button:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.button.ghost {
  background: transparent;
  border: 1px solid #657183;
  padding: 12px 18px;
}
.button.light {
  background: #fff;
  color: var(--green-dark);
}
.button.purple {
  background: var(--purple);
}
.menu-button {
  display: none;
  background: none;
  border: 0;
  color: white;
  font-size: 24px;
}
.hero {
  min-height: 470px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  position: relative;
  overflow: hidden;
  background: linear-gradient(110deg, #fff 0%, #fff 48%, #eaf0ec 48%);
}
.hero-copy {
  padding: 72px 4vw 54px 6vw;
  z-index: 2;
}
.eyebrow {
  display: inline-block;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 15px;
}
.hero h1 {
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 1.04;
  margin: 0 0 22px;
  letter-spacing: -0.045em;
  max-width: 760px;
}
.hero h1 span,
.green {
  color: var(--green-dark);
}
.hero-copy > p {
  font-size: 18px;
  line-height: 1.7;
  color: #455166;
  max-width: 650px;
}
.cta-row {
  display: flex;
  gap: 12px;
  margin: 28px 0 20px;
  flex-wrap: wrap;
}
.trust-row {
  display: flex;
  gap: 24px;
  color: #3d4a5c;
  font-size: 13px;
  font-weight: 600;
  flex-wrap: wrap;
}
.trust-row span:before {
  content: "✓";
  color: var(--green);
  border: 1px solid var(--green);
  border-radius: 50%;
  margin-right: 7px;
  width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
}
.hero-visual {
  background: url("assets/hero-football.png") center/cover no-repeat;
  position: relative;
  min-height: 420px;
}
.hero-visual:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, transparent 30%);
}
.stats {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  background: #06131fe8;
  color: #fff;
  border: 1px solid #ffffff38;
  border-radius: 16px;
  padding: 12px 24px;
  width: 230px;
  backdrop-filter: blur(8px);
}
.stat {
  padding: 13px 0;
  border-bottom: 1px solid #ffffff20;
}
.stat:last-child {
  border: 0;
}
.stat b {
  display: block;
  font-size: 23px;
}
.stat small {
  color: #d7e2e6;
}
.section {
  padding: 70px max(5vw, 30px);
}
.section.soft {
  background: var(--bg);
}
.section.dark {
  background: var(--navy);
  color: #fff;
}
.section-heading {
  text-align: center;
  margin: 0 auto 38px;
  max-width: 720px;
}
.section-heading h2 {
  font-size: clamp(30px, 3vw, 46px);
  letter-spacing: -0.035em;
  margin: 0 0 10px;
}
.section-heading p {
  color: var(--muted);
  line-height: 1.6;
}
.dark .section-heading p {
  color: #bac6d2;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  max-width: 1200px;
  margin: auto;
}
.feature {
  padding: 22px;
  text-align: center;
  border-right: 1px solid var(--line);
}
.feature:last-child {
  border: 0;
}
.feature-icon {
  font-size: 28px;
  margin-bottom: 13px;
}
.feature:nth-child(2) .feature-icon {
  color: var(--purple);
}
.feature:nth-child(3) .feature-icon {
  color: #4338ca;
}
.feature:nth-child(4) .feature-icon {
  color: var(--orange);
}
.feature:nth-child(5) .feature-icon {
  color: var(--pink);
}
.feature:nth-child(6) .feature-icon {
  color: var(--teal);
}
.feature h3 {
  font-size: 16px;
}
.feature p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}
.split-cards,
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 1200px;
  margin: 30px auto;
}
.card-grid.three {
  grid-template-columns: repeat(3, 1fr);
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 7px 24px rgba(12, 33, 24, 0.05);
}
.card h3 {
  font-size: 21px;
  margin-top: 0;
}
.card p {
  color: var(--muted);
  line-height: 1.62;
}
.card.dark-card {
  background: linear-gradient(135deg, #081624, #0b2940);
  color: #fff;
  border: 0;
}
.card.dark-card p {
  color: #c6d1da;
}
.page-hero {
  background: linear-gradient(130deg, #07131f, #0d2d27);
  color: #fff;
  padding: 75px max(5vw, 30px) 65px;
}
.page-hero h1 {
  font-size: clamp(38px, 5vw, 66px);
  margin: 0 0 16px;
  letter-spacing: -0.04em;
}
.page-hero p {
  font-size: 18px;
  line-height: 1.65;
  max-width: 720px;
  color: #c9d7d4;
}
.pill {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 999px;
  background: #dcfce7;
  color: #087d35;
  font-size: 12px;
  font-weight: 800;
}
.list {
  list-style: none;
  padding: 0;
  margin: 18px 0;
}
.list li {
  padding: 10px 0 10px 28px;
  position: relative;
  color: #425064;
}
.list li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 800;
}
.vote-card {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 20px;
  align-items: center;
}
.vote-thumb {
  height: 85px;
  border-radius: 12px;
  background: linear-gradient(135deg, #07351f, #24b95a);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 32px;
}
.vote-bars {
  width: 170px;
}
.bar {
  height: 8px;
  background: #e6ece8;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 6px;
}
.bar i {
  display: block;
  height: 100%;
  background: var(--green);
}
.vote-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.vote-actions button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 7px;
  padding: 8px 11px;
  cursor: pointer;
}
.vote-actions button.selected {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.form-shell {
  max-width: 1050px;
  margin: 60px auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.form-intro {
  background: linear-gradient(145deg, #06131f, #0b3324);
  color: #fff;
  padding: 55px;
}
.form-intro h1 {
  font-size: 44px;
  line-height: 1.06;
}
.form-intro p {
  color: #c7d2db;
  line-height: 1.65;
}
.form-panel {
  padding: 50px;
  background: #fff;
}
.steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 35px;
}
.step {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eef2ef;
  font-size: 12px;
}
.step.active {
  background: var(--green);
  color: white;
}
.field {
  display: grid;
  gap: 8px;
  margin: 18px 0;
}
.field label {
  font-weight: 700;
  font-size: 13px;
}
.field input,
.field select {
  width: 100%;
  padding: 14px 15px;
  border: 1px solid #d8dfdc;
  border-radius: 9px;
}
.notice {
  background: #effcf3;
  border: 1px solid #ccefd7;
  border-radius: 12px;
  padding: 16px;
  color: #22663a;
  font-size: 13px;
}
.privacy-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.privacy-option {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
}
.privacy-option h3 {
  font-size: 17px;
}
.badge {
  display: inline-grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 10px;
  background: #e9faef;
  color: var(--green-dark);
  font-weight: 800;
}
.discussion {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.discussion h3 {
  font-size: 16px;
  margin: 0 0 7px;
}
.discussion p {
  font-size: 13px;
  margin: 0;
  color: var(--muted);
}
.discussion small {
  text-align: right;
  color: var(--muted);
}
.site-footer {
  background: #06131f;
  color: #dbe5e8;
  padding: 50px 5vw 25px;
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 40px;
}
.site-footer img {
  width: 250px;
  height: auto;
  object-fit: contain;
  object-position: left;
}
.site-footer div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer strong {
  color: #fff;
  margin-bottom: 8px;
}
.site-footer a {
  font-size: 13px;
  color: #aebabf;
}
.copyright {
  grid-column: 1/-1;
  border-top: 1px solid #ffffff16;
  padding-top: 20px;
  font-size: 12px;
  color: #84949d;
}
.empty-state {
  text-align: center;
  padding: 80px 20px;
}
.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #052418;
  color: #fff;
  padding: 14px 18px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  z-index: 30;
}
@media (max-width: 1050px) {
  .main-nav {
    gap: 14px;
  }
  .main-nav a {
    font-size: 11px;
  }
  .header-actions .ghost {
    display: none;
  }
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .feature:nth-child(3) {
    border-right: 0;
  }
  .feature {
    border-bottom: 1px solid var(--line);
  }
}
@media (max-width: 760px) {
  .site-header {
    height: 68px;
    padding: 0 18px;
  }
  .brand {
    width: 180px;
    flex-basis: 180px;
  }
  .brand img {
    width: 100%;
    height: 48px;
  }
  .menu-button {
    display: block;
    margin-left: auto;
  }
  .main-nav {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--navy);
    padding: 10px 24px 25px;
    flex-direction: column;
    align-items: flex-start;
  }
  .main-nav.open {
    display: flex;
  }
  .main-nav a {
    padding: 9px 0;
  }
  .nav-more {
    width: 100%;
  }
  .nav-more summary {
    padding: 9px 0;
  }
  .nav-more > div {
    position: static;
    gap: 0;
    padding: 4px 0 4px 18px;
    background: transparent;
    box-shadow: none;
  }
  .nav-more > div a {
    padding: 7px 0;
  }
  .main-nav a.active:after,
  .new {
    display: none;
  }
  .header-actions {
    display: none;
  }
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-copy {
    padding: 55px 25px 38px;
  }
  .hero-visual {
    min-height: 330px;
  }
  .hero-visual:before {
    background: linear-gradient(180deg, #fff 0%, transparent 25%);
  }
  .stats {
    width: 200px;
  }
  .section {
    padding: 50px 22px;
  }
  .feature-grid,
  .card-grid.three,
  .split-cards,
  .privacy-row {
    grid-template-columns: 1fr;
  }
  .feature {
    border-right: 0;
  }
  .vote-card {
    grid-template-columns: 75px 1fr;
  }
  .vote-bars {
    grid-column: 1/-1;
    width: 100%;
  }
  .form-shell {
    margin: 25px 16px;
    grid-template-columns: 1fr;
  }
  .form-intro,
  .form-panel {
    padding: 32px 25px;
  }
  .site-footer {
    grid-template-columns: 1fr 1fr;
  }
  .site-footer > div:first-child {
    grid-column: 1/-1;
  }
}

.community-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 520px;
  background: #07131f;
  color: #fff;
}
.community-hero-image {
  min-height: 520px;
  background:
    linear-gradient(90deg, transparent 65%, #07131f 100%),
    url("assets/hero-football.png") center/cover no-repeat;
}
.community-hero-copy {
  align-self: center;
  padding: 70px max(6vw, 45px) 70px 45px;
}
.community-hero-copy h1 {
  font-size: clamp(42px, 5vw, 68px);
  line-height: 1.03;
  letter-spacing: -0.045em;
  margin: 0 0 22px;
}
.community-hero-copy p {
  font-size: 18px;
  line-height: 1.7;
  color: #c9d7d4;
  max-width: 590px;
  margin-bottom: 28px;
}
.community-links {
  padding: 70px max(5vw, 30px);
  background: #fff;
}
.community-feature-grid .feature {
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}
.community-feature-grid .feature:hover {
  background: #f4fbf6;
  transform: translateY(-3px);
}
.community-numbers {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 60px;
  align-items: center;
  padding: 70px max(6vw, 30px);
  background: linear-gradient(135deg, #06131f, #0b3324);
  color: #fff;
}
.numbers-copy h2 {
  font-size: clamp(30px, 3.4vw, 48px);
  letter-spacing: -0.035em;
  margin: 0 0 15px;
}
.numbers-copy p {
  color: #becdca;
  line-height: 1.65;
}
.community-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid #ffffff25;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff0a;
}
.community-stat {
  padding: 30px 20px;
  border-right: 1px solid #ffffff20;
  text-align: center;
}
.community-stat:last-child {
  border: 0;
}
.community-stat b {
  display: block;
  font-size: clamp(27px, 3vw, 42px);
  color: #39dc70;
  letter-spacing: -0.035em;
}
.community-stat span {
  display: block;
  color: #d8e4e1;
  font-size: 13px;
  margin-top: 7px;
}
.supporters {
  padding: 70px max(5vw, 30px);
  background: var(--bg);
}
.supporter-strip {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.supporter-placeholder {
  height: 105px;
  border: 1px dashed #bccac2;
  border-radius: 13px;
  background: #fff;
  color: #8a978f;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.supporter-note {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin: 18px 0 0;
}
@media (max-width: 1050px) {
  .community-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .community-stat:nth-child(2) {
    border-right: 0;
  }
  .community-stat:nth-child(-n + 2) {
    border-bottom: 1px solid #ffffff20;
  }
  .supporter-strip {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 760px) {
  .community-hero {
    grid-template-columns: 1fr;
  }
  .community-hero-image {
    min-height: 320px;
    background:
      linear-gradient(180deg, transparent 65%, #07131f 100%),
      url("assets/hero-football.png") center/cover no-repeat;
  }
  .community-hero-copy {
    padding: 20px 25px 55px;
  }
  .community-links,
  .supporters {
    padding: 50px 22px;
  }
  .community-numbers {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 55px 22px;
  }
  .community-stats {
    grid-template-columns: 1fr 1fr;
  }
  .community-stat {
    padding: 22px 12px;
  }
  .supporter-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Compact Community introduction: keep more useful links above the fold. */
.community-hero {
  grid-template-columns: 0.8fr 1.2fr;
  min-height: 280px;
}
.community-hero-image {
  min-height: 280px;
  background-position: center 42%;
}
.community-hero-copy {
  padding: 30px max(6vw, 45px) 30px 34px;
}
.community-hero-copy h1 {
  font-size: clamp(36px, 4vw, 52px);
  margin-bottom: 12px;
}
.community-hero-copy p {
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 18px;
}
.community-links {
  padding-top: 34px;
  padding-bottom: 42px;
}
.community-links .section-heading {
  margin-bottom: 18px;
}
.community-links .section-heading h2 {
  font-size: clamp(28px, 2.5vw, 38px);
}
.community-feature-grid .feature {
  padding-top: 14px;
  padding-bottom: 14px;
}
@media (max-width: 760px) {
  .community-hero {
    grid-template-columns: 1fr;
  }
  .community-hero-image {
    min-height: 170px;
  }
  .community-hero-copy {
    padding: 6px 25px 28px;
  }
  .community-hero-copy h1 {
    font-size: 34px;
  }
  .community-links {
    padding-top: 32px;
    padding-bottom: 36px;
  }
}

/* Community hub follows the approved Community page artwork. */
.hub-hero {
  max-width: 1440px;
  margin: auto;
  display: grid;
  grid-template-columns: 38% 62%;
  min-height: 445px;
  background: #fff;
}
.hub-hero-copy {
  padding: 50px 18px 35px 7vw;
  z-index: 1;
}
.hub-hero-copy h1 {
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.045em;
  margin: 0 0 24px;
}
.hub-hero-copy h1 span {
  color: #078e32;
}
.hub-hero-copy p {
  max-width: 430px;
  color: #273342;
  line-height: 1.55;
  font-size: 16px;
}
.hub-hero-image {
  background:
    linear-gradient(90deg, #fff 0%, transparent 19%),
    url("assets/community-hero.png") center/cover no-repeat;
}
.hub-how {
  color: #101827 !important;
  border-color: #aeb9c0 !important;
  background: #fff !important;
}
.community-hub {
  max-width: 1380px;
  margin: -1px auto 35px;
  padding: 25px 30px 35px;
  background: #fff;
  box-shadow: 0 14px 45px rgba(6, 19, 31, 0.08);
}
.hub-tools {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
}
.hub-tools > a {
  padding: 13px 24px;
  border-left: 1px solid var(--line);
  color: #111827;
  font-size: 14px;
  text-align: center;
}
.hub-tools > a:first-letter {
  color: var(--green);
}
.hub-search {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #cfd7dd;
  border-radius: 8px;
  padding: 0 14px;
  margin-right: 24px;
}
.hub-search span {
  font-size: 24px;
  color: #728091;
}
.hub-search input {
  border: 0;
  outline: 0;
  width: 100%;
  height: 48px;
  font-size: 14px;
}
.hub-title-row,
.hub-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.hub-title-row {
  margin: 22px 0 12px;
}
.hub-title-row h2 {
  font-size: 23px;
  margin: 0;
}
.hub-title-row a,
.hub-panel-title a,
.hub-bottom-link {
  font-size: 13px;
  font-weight: 800;
  color: #078e32;
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.category-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
  min-height: 180px;
  box-shadow: 0 6px 18px rgba(8, 30, 19, 0.04);
}
.category-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #e5f7eb;
  font-size: 27px;
}
.category-card strong {
  display: block;
  font-size: 14px;
}
.category-card p {
  font-size: 12px;
  line-height: 1.45;
  color: #4b5563;
  min-height: 52px;
}
.category-card small {
  font-size: 12px;
}
.hub-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
}
.hub-panel,
.members-panel {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 18px;
  box-shadow: 0 7px 22px rgba(8, 30, 19, 0.04);
}
.hub-panel-title {
  margin-bottom: 8px;
}
.hub-panel-title h3 {
  font-size: 17px;
  margin: 0;
}
.hub-discussion {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #edf0ee;
}
.mini-avatar {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #e6f5eb;
  color: #087d35;
  font-weight: 800;
}
.hub-discussion strong,
.hub-event strong,
.hub-group strong {
  display: block;
  font-size: 12px;
  line-height: 1.35;
}
.hub-discussion small,
.hub-event small,
.hub-group small {
  display: block;
  color: #576270;
  font-size: 10px;
  margin-top: 3px;
}
.hub-discussion em {
  font-size: 10px;
  color: #53606d;
  font-style: normal;
}
.hub-bottom-link {
  display: block;
  margin-top: 17px;
}
.hub-event {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 13px;
  padding: 10px 0;
}
.hub-event img {
  width: 96px;
  height: 78px;
  object-fit: cover;
  border-radius: 10px;
}
.hub-event span {
  padding-top: 3px;
}
.hub-event small {
  margin-top: 5px;
}
.hub-group {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.group-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  background: #08a047;
  font-size: 16px;
}
.group-icon.purple {
  background: #7138dd;
}
.group-icon.pink {
  background: #ee3d7f;
}
.group-icon.blue {
  background: #1697d2;
}
.group-icon.orange {
  background: #ff9100;
}
.hub-group > a,
.member-card > a {
  border: 1px solid #cbd5d1;
  border-radius: 7px;
  padding: 7px 18px;
  color: #087d35;
  font-size: 11px;
  font-weight: 800;
}
.members-panel {
  margin-top: 20px;
  padding: 18px 24px;
}
.member-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.member-card {
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px;
}
.member-card > img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 50%;
}
.member-card h3 {
  font-size: 15px;
  margin: 8px 0 5px;
}
.member-card h3 span {
  font-size: 13px;
}
.member-card p {
  font-size: 10px;
  line-height: 1.45;
  color: #334155;
  margin: 0 0 10px;
}
.hub-callout {
  display: grid;
  grid-template-columns: 235px 1.4fr repeat(3, 0.8fr);
  background: #06131f;
  color: #fff;
  border-radius: 13px;
  overflow: hidden;
  margin-top: 20px;
}
.hub-callout > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.callout-copy {
  padding: 28px;
}
.callout-copy h2 {
  font-size: 20px;
  margin: 0 0 9px;
}
.callout-copy p {
  font-size: 12px;
  line-height: 1.5;
  color: #d4dee3;
}
.callout-copy .button {
  font-size: 12px;
  padding: 10px 15px;
}
.callout-point {
  padding: 27px 18px;
  border-left: 1px solid #ffffff20;
  display: flex;
  flex-direction: column;
}
.callout-point b {
  font-size: 28px;
  color: #16c854;
  margin-bottom: 10px;
}
.callout-point strong {
  font-size: 13px;
}
.callout-point span {
  font-size: 11px;
  line-height: 1.4;
  color: #d4dee3;
  margin-top: 7px;
}
.hub-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 24px;
  margin-top: 12px;
  background: #fafcfb;
  border-radius: 12px;
}
.hub-values > div {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
}
.hub-values b {
  font-size: 27px;
  color: #07913a;
}
.hub-values span {
  font-size: 11px;
  line-height: 1.4;
}
.hub-values strong {
  display: block;
  font-size: 12px;
  margin-bottom: 3px;
}
@media (max-width: 1050px) {
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .hub-columns {
    grid-template-columns: 1fr 1fr;
  }
  .hub-panel:last-child {
    grid-column: 1/-1;
  }
  .hub-callout {
    grid-template-columns: 190px 1fr repeat(3, 0.65fr);
  }
  .hub-tools {
    grid-template-columns: 1.7fr repeat(3, 1fr);
  }
}
@media (max-width: 760px) {
  .hub-hero {
    grid-template-columns: 1fr;
  }
  .hub-hero-copy {
    padding: 35px 24px 25px;
  }
  .hub-hero-copy h1 {
    font-size: 40px;
  }
  .hub-hero-image {
    order: -1;
    min-height: 215px;
    background:
      linear-gradient(180deg, transparent 65%, #fff 100%),
      url("assets/community-hero.png") center/cover no-repeat;
  }
  .community-hub {
    padding: 18px 15px;
    margin: 0;
  }
  .hub-tools {
    grid-template-columns: 1fr 1fr;
  }
  .hub-search {
    grid-column: 1/-1;
    margin: 0 0 12px;
  }
  .hub-tools > a {
    padding: 12px 6px;
    font-size: 12px;
  }
  .hub-tools > a:last-child {
    grid-column: 1/-1;
  }
  .category-grid {
    grid-template-columns: 1fr 1fr;
  }
  .category-card {
    min-height: 165px;
  }
  .hub-columns {
    grid-template-columns: 1fr;
  }
  .hub-panel:last-child {
    grid-column: auto;
  }
  .member-grid {
    grid-template-columns: 1fr 1fr;
  }
  .member-card:last-child {
    grid-column: 1/-1;
  }
  .hub-callout {
    grid-template-columns: 1fr 1fr;
  }
  .hub-callout > img {
    grid-column: 1/-1;
    height: 170px;
  }
  .callout-copy {
    grid-column: 1/-1;
  }
  .callout-point {
    border-top: 1px solid #ffffff20;
  }
  .callout-point:last-child {
    grid-column: 1/-1;
  }
  .hub-values {
    grid-template-columns: 1fr 1fr;
  }
  .hub-title-row h2 {
    font-size: 19px;
  }
}

/* Compact approved page graphics: approximately half-height so content appears sooner. */
.hero {
  min-height: 300px;
}
.hero-copy {
  padding-top: 34px;
  padding-bottom: 30px;
}
.hero h1 {
  font-size: clamp(36px, 4vw, 54px);
  margin-bottom: 14px;
}
.hero-copy > p {
  font-size: 16px;
  line-height: 1.5;
}
.hero-visual {
  min-height: 300px;
  background-image: url("assets/hero-home-approved.png");
}
.stats {
  transform: translateY(-50%) scale(0.88);
  transform-origin: right center;
}
.approved-hero {
  min-height: 285px;
  padding: 42px max(5vw, 30px);
  background-position: right center;
  background-size: auto 100%;
  background-repeat: no-repeat;
}
.approved-hero h1 {
  font-size: clamp(36px, 4.5vw, 56px);
  max-width: 48%;
}
.approved-hero p {
  font-size: 16px;
  line-height: 1.5;
  max-width: 46%;
}
.hero-play {
  background-image:
    linear-gradient(90deg, #07131f 0%, #07131f 42%, transparent 72%),
    url("assets/hero-play.png");
}
.hero-vote {
  background-image:
    linear-gradient(90deg, #07131f 0%, #07131f 42%, transparent 72%),
    url("assets/hero-vote.png");
}
.hero-events {
  background-image:
    linear-gradient(90deg, #07131f 0%, #07131f 42%, transparent 72%),
    url("assets/hero-events.png");
}
.hero-impact {
  background-image:
    linear-gradient(90deg, #07131f 0%, #07131f 42%, transparent 72%),
    url("assets/hero-impact.png");
}
.hero-benefits {
  background-image:
    linear-gradient(90deg, #07131f 0%, #07131f 42%, transparent 72%),
    url("assets/hero-benefits.png");
}
.hub-hero {
  min-height: 255px;
}
.hub-hero-copy {
  padding-top: 25px;
  padding-bottom: 20px;
}
.hub-hero-copy h1 {
  font-size: clamp(34px, 3.4vw, 46px);
  margin-bottom: 14px;
}
.hub-hero-copy p {
  font-size: 14px;
  margin: 0 0 14px;
}
.hub-hero-image {
  min-height: 255px;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-color: #fff;
}
.form-shell {
  margin-top: 30px;
  margin-bottom: 30px;
}
.form-intro {
  background-color: #06131f;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 250px;
  padding-bottom: 275px;
}
.form-shell:not(:has(input[type="password"])) .form-intro {
  background-image:
    linear-gradient(180deg, #06131f 0%, #06131f 40%, transparent 70%),
    url("assets/hero-join.png");
}
.form-shell:has(input[type="password"]) .form-intro {
  background-image:
    linear-gradient(180deg, #06131f 0%, #06131f 35%, transparent 70%),
    url("assets/hero-login.png");
}
@media (max-width: 760px) {
  .hero {
    min-height: auto;
  }
  .hero-visual {
    min-height: 180px;
    background-image: url("assets/hero-home-approved.png");
  }
  .approved-hero {
    min-height: 230px;
    padding: 30px 22px;
    background-size: auto 100%;
    background-position: 65% center;
  }
  .approved-hero h1,
  .approved-hero p {
    max-width: 62%;
  }
  .approved-hero h1 {
    font-size: 34px;
  }
  .approved-hero p {
    font-size: 14px;
  }
  .hub-hero {
    min-height: auto;
  }
  .hub-hero-image {
    min-height: 140px;
    background-size: cover;
  }
  .hub-hero-copy {
    padding-top: 5px;
  }
  .form-intro {
    padding-bottom: 180px;
    background-size: 100% 170px;
  }
}

.hero-visual .stats {
  display: none;
}
.hub-hero {
  grid-template-columns: 34% 66%;
  min-height: 205px;
}
.hub-hero-image {
  min-height: 205px;
}
.hub-hero-copy {
  padding: 18px 12px 16px 5vw;
}
.hub-hero-copy h1 {
  font-size: clamp(30px, 2.8vw, 40px);
  margin-bottom: 9px;
}
.hub-hero-copy p {
  font-size: 13px;
  line-height: 1.42;
}
.hub-hero-copy .cta-row {
  margin: 12px 0 0;
}
.hub-hero-copy .button {
  padding: 10px 14px;
  font-size: 12px;
}
.approved-hero {
  display: grid;
  grid-template-columns: minmax(0, 52%) 1fr;
  align-items: center;
  position: relative;
  min-height: 290px;
  color: #fff;
  padding: 35px max(5vw, 30px);
  background-color: #07131f;
}
.approved-hero > div {
  position: relative;
  z-index: 2;
}
.approved-hero h1 {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
  margin: 0 0 16px;
  letter-spacing: -0.04em;
}
.approved-hero h1 span {
  color: #23c65a;
}
.approved-hero p {
  font-size: 15px;
  line-height: 1.55;
  max-width: 590px;
  color: #d1dedb;
}
.approved-hero .ghost {
  border-color: #96a4a9;
  color: #fff;
}
.hero-data {
  justify-self: end;
  width: 220px;
  padding: 20px;
  border: 1px solid #ffffff35;
  border-radius: 14px;
  background: #06131fe8;
  display: flex;
  flex-direction: column;
}
.hero-data b {
  font-size: 34px;
  color: #20ce5b;
}
.hero-data span {
  font-size: 13px;
  margin: 5px 0 18px;
}
.hero-data small {
  border-top: 1px solid #ffffff20;
  padding-top: 12px;
  color: #aebcc2;
}
.live-hero-data {
  position: relative;
  z-index: 3;
  justify-self: end;
  min-height: 205px;
  box-sizing: border-box;
  box-shadow: 0 12px 30px #0008;
}
.live-hero-data > b {
  font-size: 17px;
  color: #fff;
  margin-bottom: 8px;
}
.live-hero-data > span {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 9px 0;
  border-top: 1px solid #ffffff20;
}
.live-hero-data > span strong {
  color: #20ce5b;
  font-size: 20px;
  line-height: 1.05;
}
.live-hero-data > span small {
  border: 0;
  padding: 0;
  color: #d7e2df;
  font-size: 10px;
}
.live-hero-data > a {
  margin-top: auto;
  padding-top: 9px;
  border-top: 1px solid #ffffff20;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}
.approved-body {
  max-width: 1360px;
  margin: auto;
  padding: 28px 34px 45px;
}
.game-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.mini-card,
.leaderboard,
.result-card,
.event-card,
.benefit-card,
.challenge-panel,
.side-card {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 6px 20px rgba(6, 19, 31, 0.05);
}
.mini-card > div,
.event-card > div {
  height: 100px;
  border-radius: 9px;
  background: linear-gradient(135deg, #0a1520, #167c3e);
  display: grid;
  place-items: center;
  font-size: 44px;
}
.mini-card h3,
.event-card h3 {
  font-size: 16px;
}
.mini-card p,
.event-card p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  min-height: 58px;
}
.mini-card .button {
  width: 100%;
  padding: 9px;
}
.game-card-stats{display:grid!important;grid-template-columns:repeat(3,1fr);height:auto!important;margin:13px 0 9px;border:1px solid #dfe7e2;border-radius:9px!important;background:#f4f8f5!important;font-size:inherit!important}.game-card-stats span{display:grid;gap:2px;padding:9px 3px;text-align:center;color:#65746d;font-size:9px;font-weight:750}.game-card-stats strong{color:#087d35;font-size:17px}.game-card-stats+small{display:block;min-height:18px;margin-bottom:10px;color:#68776f;font-size:10px}
.two-panel {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 18px;
  margin: 24px 0;
}
.dark-block {
  background: #06131f;
  color: #fff;
  border-radius: 14px;
  padding: 24px;
}
.dark-block p {
  color: #cad6da;
}
.progress {
  height: 9px;
  border-radius: 8px;
  background: #315149;
  overflow: hidden;
  margin: 20px 0 8px;
}
.progress i {
  display: block;
  height: 100%;
  background: #1cc75a;
}
.challenge-panel input {
  width: 70%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-right: 8px;
}
.leader-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.leaderboard h3 {
  color: #087d35;
}
.leaderboard p {
  display: flex;
  gap: 12px;
  border-bottom: 1px solid #edf0ee;
  padding: 7px;
  margin: 0;
  font-size: 13px;
}
.leaderboard p span {
  flex: 1;
}
.bottom-banner {
  margin-top: 24px;
  border-radius: 14px;
  background: linear-gradient(100deg, #07131f, #083825);
  color: #fff;
  padding: 28px 34px;
}
.bottom-banner h2 {
  margin: 0 0 8px;
}
.bottom-banner p {
  color: #c8d6d3;
}
.section-tabs {
  display: flex;
  gap: 55px;
  border-bottom: 1px solid var(--line);
  padding: 0 10px 18px;
  margin-bottom: 18px;
}
.section-tabs b {
  color: #087d35;
}
.content-with-side {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(250px, 1fr);
  gap: 24px;
}
.content-with-side .vote-card {
  margin: 0 0 12px;
  box-shadow: none;
}
.content-with-side aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.side-card h2 {
  font-size: 19px;
}
.side-card p {
  font-size: 13px;
  line-height: 1.5;
  color: #485565;
}
.side-card p b {
  color: #111827;
}
.side-card > a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: #087d35;
  font-weight: 700;
  font-size: 13px;
}
.result-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.result-card span {
  display: inline-block;
  background: #159447;
  color: #fff;
  border-radius: 8px;
  padding: 4px 8px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 800;
}
.result-card h3 {
  font-size: 14px;
  min-height: 38px;
}
.result-card > b {
  display: block;
  color: #159447;
}
.result-card small {
  display: block;
  color: var(--muted);
  margin-top: 7px;
}
.event-search {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr) 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.event-search input,
.event-search select {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.featured-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.event-card > div {
  background: linear-gradient(135deg, #0b2332, #159447);
}
.event-card p {
  min-height: auto;
}
.event-card a,
.benefit-card a {
  color: #087d35;
  font-weight: 700;
  font-size: 12px;
}
.upcoming {
  display: grid;
  grid-template-columns: 60px 1fr 150px auto;
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 12px;
}
.upcoming > b {
  background: #f3f7f4;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  font-size: 12px;
}
.upcoming strong,
.upcoming small {
  display: block;
}
.upcoming small {
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
}
.upcoming > a {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 12px;
  color: #087d35;
  font-weight: 700;
  font-size: 12px;
}
.calendar {
  text-align: center;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 15px;
}
.calendar-grid span {
  font-size: 11px;
  padding: 6px;
}
.calendar-grid .today {
  background: #1cab51;
  color: white;
  border-radius: 50%;
}
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.benefit-card {
  text-align: center;
}
.benefit-card > b {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: auto;
  border-radius: 50%;
  background: #e6f7ec;
  color: #087d35;
  font-size: 25px;
}
.benefit-card p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  min-height: 58px;
}
.perk-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 25px;
}
.perk-row article {
  text-align: center;
  padding: 15px;
  border-right: 1px solid var(--line);
}
.perk-row article:last-child {
  border: 0;
}
.perk-row b {
  font-size: 30px;
  color: #087d35;
}
.perk-row h3 {
  font-size: 14px;
}
.perk-row p {
  font-size: 11px;
  color: var(--muted);
}
.impact-strip {
  background: #061b19;
  color: #fff;
  border-radius: 14px;
  padding: 25px;
  text-align: center;
}
.impact-strip > div {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.impact-strip p {
  border-right: 1px solid #ffffff25;
}
.impact-strip p:last-child {
  border: 0;
}
.impact-strip b,
.impact-strip span {
  display: block;
}
.impact-strip b {
  font-size: 26px;
  color: #25c75c;
}
.impact-strip span {
  font-size: 12px;
}
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.testimonial-grid blockquote {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 24px;
  font-size: 13px;
  line-height: 1.6;
}
.testimonial-grid blockquote b {
  display: block;
  margin-top: 16px;
  color: #087d35;
}
@media (max-width: 900px) {
  .game-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .featured-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .event-search {
    grid-template-columns: 1fr 1fr;
  }
  .event-search input {
    grid-column: 1/-1;
  }
  .benefit-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .perk-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .impact-strip > div {
    grid-template-columns: repeat(3, 1fr);
  }
  .result-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.maintenance-notice { display: flex; justify-content: center; gap: 10px; padding: 11px 18px; color: #183d28; background: #f4d86e; font-size: 14px; }
.system-status-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0; }
.paypal-test-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 18px; margin: 18px 0; padding: 18px; border: 1px solid #cfe3d5; border-radius: 11px; background: #f4f9f5; }
.paypal-test-panel strong { color: #173f29; font-size: 16px; }
.paypal-test-panel p { margin: 5px 0 0; color: #64736a; font-size: 13px; }
.paypal-test-panel > span { grid-column: 1 / -1; color: #64736a; font-size: 13px; font-weight: 700; }
.paypal-test-panel > span.success { color: #087d35; }
.paypal-test-panel > span.error { color: #b42318; }
.paypal-plan-setup { margin: 0 0 18px; padding: 18px; border: 1px solid #dfe7e2; border-radius: 11px; background: white; }
.paypal-plan-setup header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.paypal-plan-setup h3, .paypal-plan-setup p { margin: 0; }
.paypal-plan-setup p { margin-top: 5px; color: #64736a; font-size: 13px; }
.paypal-plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.paypal-plan-grid article { display: grid; gap: 3px; padding: 10px; border-radius: 8px; background: #f4f8f5; }
.paypal-plan-grid strong { color: #173f29; font-size: 13px; }
.paypal-plan-grid span { color: #6a786f; font-size: 11px; }
.paypal-plan-grid .ready { color: #087d35; font-weight: 800; }
.paypal-plan-grid .pending { color: #9a6700; font-weight: 800; }
.paypal-plan-state { display: block; margin-top: 10px; color: #64736a; font-size: 13px; font-weight: 700; }
.paypal-plan-state.success { color: #087d35; }
.paypal-plan-state.error { color: #b42318; }
.paypal-webhook-setup { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 18px; padding: 18px; border: 1px solid #dfe7e2; border-radius: 11px; background: #f8fbf9; }
.paypal-webhook-setup h3, .paypal-webhook-setup p { margin: 0; }
.paypal-webhook-setup p { margin: 5px 0; color: #64736a; font-size: 13px; }
.paypal-webhook-setup span { color: #64736a; font-size: 12px; font-weight: 800; }
.paypal-webhook-setup span.success { color: #087d35; }
.paypal-webhook-setup span.error { color: #b42318; }
.connection-pill.connected { border-color: #9bd0aa; color: #087d35; background: #eaf8ee; }
@media (max-width: 900px) { .paypal-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .paypal-test-panel { grid-template-columns: 1fr; } .paypal-test-panel .button, .paypal-plan-setup .button, .paypal-webhook-setup .button { width: 100%; } .paypal-plan-setup header, .paypal-webhook-setup { align-items: stretch; flex-direction: column; } .paypal-plan-grid { grid-template-columns: 1fr; } }
.system-status-grid article { display: grid; gap: 5px; padding: 15px; border: 1px solid #dfe7e2; border-radius: 10px; background: #f8fbf9; }
.system-status-grid span, .system-status-grid small { color: #6a786f; font-size: 11px; }
.system-status-grid strong { color: #193f2a; font-size: 17px; text-transform: capitalize; }
.system-settings-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 15px; border: 1px solid #dfe7e2; border-radius: 11px; background: white; }
.system-settings-form section { display: grid; align-content: start; gap: 11px; padding: 13px; border-radius: 9px; background: #f4f8f5; }
.system-settings-form h3 { margin: 0 0 4px; }
.system-settings-form label, .privacy-request-form label { display: grid; gap: 5px; color: #33483a; font-size: 12px; font-weight: 800; }
.system-settings-form input, .system-settings-form select, .system-settings-form textarea, .privacy-request-form input, .privacy-request-form select, .privacy-request-form textarea, .privacy-request select, .privacy-request input { box-sizing: border-box; width: 100%; padding: 9px; border: 1px solid #ccd8d0; border-radius: 7px; background: white; font: inherit; font-size: 12px; }
.system-settings-form footer { grid-column: 1/-1; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.system-toggle { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: 8px !important; }
.system-toggle input { width: auto; margin-top: 3px; }
.system-toggle span { display: grid; gap: 2px; }
.system-toggle small { color: #728078; font-weight: 400; }
.system-lower-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; margin-top: 14px; }
.system-lower-grid > section { padding: 16px; border: 1px solid #dfe7e2; border-radius: 11px; background: white; }
.system-lower-grid h3 { margin: 0 0 5px; }
.system-lower-grid p { color: #6a786f; font-size: 12px; }
.system-section-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.system-section-head button, .privacy-request button { padding: 8px 10px; border: 1px solid #bfccc3; border-radius: 7px; background: white; cursor: pointer; }
.privacy-request-form { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 12px 0; padding: 12px; border-radius: 9px; background: #f4f8f5; }
.privacy-request-form .wide { grid-column: 1/-1; }
.privacy-request { padding: 12px 0; border-top: 1px solid #e2e9e4; }
.privacy-request header, .privacy-request > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.privacy-request header span { display: grid; }
.privacy-request header small { color: #728078; font-size: 10px; }
.privacy-request header em { padding: 4px 7px; border-radius: 999px; background: #edf2ee; font-size: 10px; font-style: normal; text-transform: uppercase; }
.privacy-request > div { display: grid; grid-template-columns: 120px 1fr auto; }
.security-activity article { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid #e2e9e4; }
.security-activity span { display: grid; gap: 2px; }
.security-activity b { font-size: 12px; }
.security-activity small { color: #718078; font-size: 10px; }
.security-activity em { color: #547060; font-size: 9px; font-style: normal; text-align: right; text-transform: uppercase; }
@media (max-width: 1050px) {
  .system-status-grid { grid-template-columns: repeat(2, 1fr); }
  .system-settings-form { grid-template-columns: 1fr; }
  .system-settings-form footer { grid-column: auto; }
}
@media (max-width: 760px) {
  .maintenance-notice { align-items: flex-start; flex-direction: column; }
  .system-status-grid, .system-lower-grid { grid-template-columns: 1fr; }
  .privacy-request-form { grid-template-columns: 1fr; }
  .privacy-request-form .wide { grid-column: auto; }
  .privacy-request > div { grid-template-columns: 1fr; }
}

.content-admin-toolbar {
  display: flex;
  align-items: end;
  gap: 14px;
  margin: 18px 0;
  padding: 14px;
  border-radius: 10px;
  background: #f3f7f4;
}
.content-admin-toolbar label { display: grid; gap: 5px; min-width: 180px; font-size: 12px; font-weight: 800; }
.content-admin-toolbar select { padding: 10px; border: 1px solid #cfdbd3; border-radius: 7px; background: white; font: inherit; }
.content-device { display: flex; margin-left: auto; padding: 3px; border: 1px solid #cfdbd3; border-radius: 8px; background: white; }
.content-device button { padding: 8px 12px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.content-device button.active { color: white; background: #183f2a; }
.content-admin-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .75fr); gap: 18px; align-items: start; }
.translation-summary { margin-bottom: 10px; color: #5f6d64; font-size: 13px; }
.translation-summary b { color: #193f2a; }
.content-entry-list { display: grid; gap: 12px; }
.content-entry { padding: 15px; border: 1px solid #dfe7e2; border-radius: 10px; background: white; }
.content-entry header, .content-entry footer { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.content-entry header div { display: grid; gap: 2px; }
.content-entry header small, .content-entry footer > span { color: #748078; font-size: 11px; }
.content-entry textarea { box-sizing: border-box; width: 100%; margin: 12px 0; padding: 11px; border: 1px solid #cfdbd3; border-radius: 8px; resize: vertical; font: inherit; font-size: 13px; line-height: 1.5; }
.content-entry textarea:disabled { background: #f2f4f2; color: #647068; }
.content-entry footer div { display: flex; flex-wrap: wrap; gap: 6px; justify-content: end; }
.content-entry footer button, .content-history button { padding: 7px 9px; border: 1px solid #bfcac3; border-radius: 6px; background: white; font: inherit; font-size: 11px; cursor: pointer; }
.translation-status { padding: 4px 8px; border-radius: 999px; background: #edf1ee; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.translation-status.complete, .translation-status.published { color: #126332; background: #dff5e6; }
.translation-status.outdated { color: #8a5900; background: #fff0c7; }
.translation-status.missing { color: #8a2632; background: #fde5e8; }
.content-preview { position: sticky; top: 18px; width: 100%; max-width: 420px; transition: max-width .2s ease; }
.content-preview.mobile { max-width: 280px; }
.content-preview > span { display: block; margin-bottom: 7px; color: #748078; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.content-preview > div { min-height: 190px; padding: 28px 22px; border-radius: 12px; color: white; background: linear-gradient(145deg, #14281d, #1d5133); box-shadow: 0 14px 35px #15261c26; }
.content-preview h3 { margin: 12px 0 8px; font-size: 24px; }
.content-preview p { margin: 0; line-height: 1.55; }
.content-history { margin-top: 12px; padding-top: 8px; border-top: 1px solid #e5ebe7; }
.content-history > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; }
.content-history span { display: grid; }
.content-history small { color: #748078; font-size: 10px; }
@media (max-width: 900px) {
  .content-admin-toolbar { align-items: stretch; flex-direction: column; }
  .content-device { margin-left: 0; width: fit-content; }
  .content-admin-layout { grid-template-columns: 1fr; }
  .content-preview { position: static; max-width: none; }
  .content-preview.mobile { max-width: 280px; }
  .content-entry footer { align-items: flex-start; flex-direction: column; }
  .content-entry footer div { justify-content: start; }
}
@media (max-width: 760px) {
  .hub-hero {
    grid-template-columns: 1fr;
  }
  .hub-hero-image {
    min-height: 120px;
  }
  .hub-hero-copy {
    padding: 5px 22px 22px;
  }
  .approved-hero {
    grid-template-columns: 1fr;
    min-height: 245px;
    padding: 28px 22px;
    background-position: 58% center;
  }
  .approved-hero h1 {
    font-size: 34px;
    max-width: 76%;
  }
  .approved-hero p {
    font-size: 13px;
    max-width: 72%;
  }
  .hero-data {
    display: none;
  }
  .approved-body {
    padding: 22px 16px;
  }
  .game-grid,
  .leader-grid,
  .benefit-grid,
  .testimonial-grid {
    grid-template-columns: 1fr;
  }
  .two-panel,
  .content-with-side {
    grid-template-columns: 1fr;
  }
  .content-with-side .vote-card {
    grid-template-columns: 70px 1fr;
  }
  .featured-grid {
    grid-template-columns: 1fr 1fr;
  }
  .upcoming {
    grid-template-columns: 48px 1fr;
  }
  .upcoming > span:nth-child(3),
  .upcoming > a {
    grid-column: 2;
  }
  .event-search {
    grid-template-columns: 1fr;
  }
  .event-search input {
    grid-column: auto;
  }
  .perk-row {
    grid-template-columns: 1fr 1fr;
  }
  .impact-strip > div {
    grid-template-columns: 1fr 1fr;
  }
  .result-grid {
    grid-template-columns: 1fr 1fr;
  }
  .section-tabs {
    gap: 18px;
    font-size: 12px;
  }
}

/* Keep the shared member-data panel compact across every approved page hero. */
.hero-data {
  width: 170px;
  padding: 14px 16px;
  border-radius: 12px;
}
.hero-data b {
  font-size: 27px;
}
.hero-data span {
  font-size: 11px;
  margin: 4px 0 12px;
}
.hero-data small {
  padding-top: 9px;
  font-size: 10px;
}

/* One consistent top-section scale across the site. */
@media (min-width: 761px) {
  body .hero,
  body .approved-hero,
  body .hub-hero {
    height: 290px;
    min-height: 290px;
  }
  body .hero-visual,
  body .hub-hero-image {
    height: 290px;
    min-height: 290px;
  }
  body .hero-copy {
    padding-top: 25px;
    padding-bottom: 22px;
  }
  body .approved-hero {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  body .hub-hero-copy {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}
@media (max-width: 760px) {
  body .approved-hero.hero-play,
  body .approved-hero.hero-vote {
    background-size: auto 84%;
    background-position: right center;
  }
}
.home-member-data {
  width: 176px;
  padding: 7px 13px;
}
.home-member-data > div {
  grid-template-columns: 28px 1fr;
  gap: 8px;
  padding: 7px 0;
}
.home-member-data i {
  font-size: 19px;
}
.home-member-data b {
  font-size: 15px;
}
.home-member-data small {
  font-size: 10px;
}
.member-data-link {
  display: block;
  margin-top: 6px;
  padding: 8px 4px 3px;
  border-top: 1px solid #ffffff24;
  color: #57e485;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
}
.member-data-link:hover {
  color: #fff;
}
@media (max-width: 760px) {
  .home-member-data {
    width: 160px;
    right: 12px;
  }
  .home-member-data > div {
    padding: 6px 0;
  }
  .home-member-data b {
    font-size: 14px;
  }
}

/* Fit each hero's copy comfortably within the shared top-section frame. */
@media (min-width: 761px) {
  body .hero,
  body .approved-hero,
  body .hub-hero {
    height: 320px;
    min-height: 320px;
  }
  body .hero-visual,
  body .hub-hero-image {
    height: 320px;
    min-height: 320px;
  }
  body .hero-copy {
    width: 50%;
    padding: 25px 20px 22px 5vw;
  }
  body .hero-copy h1 {
    font-size: clamp(34px, 3.1vw, 44px);
    line-height: 1.04;
    margin-bottom: 11px;
  }
  body .hero-copy > p {
    max-width: 560px;
    font-size: 14px;
    line-height: 1.42;
  }
  body .hero-copy .cta-row {
    margin: 13px 0 11px;
  }
  body .hero-copy .button {
    padding: 10px 14px;
    font-size: 12px;
  }
  body .hero-copy .trust-row {
    gap: 13px;
    font-size: 10px;
  }
  body .hub-hero {
    grid-template-columns: 40% 60%;
  }
  body .hub-hero-copy {
    padding: 22px 18px 20px 5vw;
  }
  body .hub-hero-copy h1 {
    font-size: clamp(31px, 3vw, 42px);
    line-height: 1.04;
    margin-bottom: 10px;
  }
  body .hub-hero-copy p {
    max-width: 510px;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 11px;
  }
  body .hub-hero-copy .cta-row {
    margin: 10px 0 0;
  }
  body .hub-hero-copy .button {
    padding: 10px 13px;
    font-size: 11px;
  }
  body .approved-hero {
    padding: 28px max(5vw, 30px);
    grid-template-columns: minmax(0, 50%) 1fr;
  }
  body .approved-hero h1 {
    max-width: 100%;
    font-size: clamp(32px, 3.5vw, 46px);
    line-height: 1.04;
    margin-bottom: 11px;
  }
  body .approved-hero p {
    max-width: 520px;
    font-size: 14px;
    line-height: 1.42;
  }
  body .approved-hero .cta-row {
    margin: 14px 0 0;
  }
  body .approved-hero .button {
    padding: 10px 14px;
    font-size: 12px;
  }
  body .approved-hero.hero-play,
  body .approved-hero.hero-vote {
    background-size:
      100% 100%,
      auto 86%;
    background-position:
      center,
      right center;
  }
}

/* The supplied hero artwork includes fragments of its original page copy at the
   left edge. Keep that embedded copy behind an opaque navy mask so only the
   current page heading and introduction are visible. */
.hero-play {
  background-image:
    linear-gradient(
      90deg,
      #07131f 0%,
      #07131f 68%,
      rgba(7, 19, 31, 0.98) 72%,
      transparent 82%
    ),
    url("assets/hero-play.png");
}
.hero-vote {
  background-image:
    linear-gradient(
      90deg,
      #07131f 0%,
      #07131f 68%,
      rgba(7, 19, 31, 0.98) 72%,
      transparent 82%
    ),
    url("assets/hero-vote.png");
}
.hero-events {
  background-image:
    linear-gradient(
      90deg,
      #07131f 0%,
      #07131f 58%,
      rgba(7, 19, 31, 0.9) 64%,
      transparent 76%
    ),
    url("assets/hero-events.png");
}
.hero-impact {
  background-image:
    linear-gradient(
      90deg,
      #07131f 0%,
      #07131f 58%,
      rgba(7, 19, 31, 0.9) 64%,
      transparent 76%
    ),
    url("assets/hero-impact.png");
}
.hero-benefits {
  background-image:
    linear-gradient(
      90deg,
      #07131f 0%,
      #07131f 58%,
      rgba(7, 19, 31, 0.9) 64%,
      transparent 76%
    ),
    url("assets/hero-benefits.png");
}
.approved-hero {
  background-size:
    100% 100%,
    auto 100%;
  background-position:
    center,
    right center;
}
@media (min-width: 761px) {
  .approved-hero.hero-play {
    background-size:
      100% 100%,
      auto 70%;
  }
  .approved-hero.hero-vote {
    background-size:
      100% 100%,
      auto 44%;
  }
}
@media (max-width: 760px) {
  .approved-hero.hero-play {
    background-size:
      100% 100%,
      auto 68%;
    background-position:
      center,
      right center;
  }
  .approved-hero.hero-vote {
    background-size:
      100% 100%,
      auto 43%;
    background-position:
      center,
      right center;
  }
}
.profile-button {
  background: #fff;
  color: #087d35;
  border-color: #fff;
}
.profile-button:hover {
  background: #e9f8ee;
  color: #056d2a;
}

/* Membership and recurring subscription selection. */
.membership-hero {
  box-sizing: border-box;
  min-height: 285px;
}
.membership-audience {
  min-height: 58px;
  margin: 0 0 15px;
  color: #53606d;
  font-size: 13px;
  line-height: 1.45;
}
.membership-hero {
  padding: 42px 5vw 38px;
  text-align: left;
  color: #fff;
  background-image:
    linear-gradient(
      90deg,
      #06131f 0%,
      #06131f 64%,
      rgba(6, 19, 31, 0.96) 72%,
      rgba(6, 19, 31, 0.35) 100%
    ),
    url("assets/hero-join.png");
  background-color: #06131f;
  background-repeat: no-repeat;
  background-position:
    center,
    right 58%;
  background-size:
    100% 100%,
    auto 165%;
}
.membership-hero h1 {
  max-width: 680px;
  margin: 8px 0 10px;
  font-size: clamp(38px, 5vw, 64px);
  letter-spacing: -0.04em;
}
.membership-hero p {
  max-width: 620px;
  margin: 0 0 24px;
  color: #d5e1de;
  font-size: 17px;
  line-height: 1.55;
}
.billing-toggle {
  display: inline-flex;
  padding: 4px;
  border: 1px solid #ffffff35;
  border-radius: 10px;
  background: #ffffff12;
}
.billing-toggle button {
  border: 0;
  border-radius: 7px;
  padding: 11px 18px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.billing-toggle button.active {
  background: #fff;
  color: #087d35;
}
.billing-toggle span {
  margin-left: 5px;
  color: #70e99a;
  font-size: 11px;
}
.billing-toggle button.active span {
  color: #087d35;
}
.membership-body {
  max-width: 1380px;
  margin: auto;
  padding: 34px 30px 48px;
}
.membership-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.membership-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(6, 19, 31, 0.06);
}
.membership-card.recommended {
  border: 2px solid #10a548;
  box-shadow: 0 12px 30px rgba(10, 145, 61, 0.14);
}
.recommended-label {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 13px;
  border-radius: 20px;
  background: #0b9840;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.membership-card h3 {
  margin: 4px 0 10px;
  font-size: 22px;
}
.membership-price {
  margin: 0 0 13px;
  color: #0b7f39;
}
.membership-price b {
  font-size: 34px;
}
.membership-price small {
  margin-left: 4px;
  color: #65717d;
}
.yearly-price {
  display: none;
}
.show-yearly .monthly-price {
  display: none;
}
.show-yearly .yearly-price {
  display: inline;
}
.membership-card ul {
  flex: 1;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.membership-card li {
  position: relative;
  padding: 8px 0 8px 24px;
  border-bottom: 1px solid #edf1ef;
  color: #334155;
  font-size: 13px;
  line-height: 1.4;
}
.membership-card li:before {
  content: "✓";
  position: absolute;
  left: 2px;
  color: #0b9840;
  font-weight: 900;
}
.membership-card .button {
  width: 100%;
}
.membership-rules {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 25px;
  padding: 24px;
  border-radius: 15px;
  background: #edf8f1;
}
.membership-rules > div {
  padding: 8px 15px;
}
.membership-rules span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0b9840;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}
.membership-rules h2 {
  font-size: 16px;
  margin: 12px 0 7px;
}
.membership-rules p {
  margin: 0;
  color: #4b5967;
  font-size: 12px;
  line-height: 1.5;
}
.payment-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 20px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: 13px;
}
.payment-note strong {
  font-size: 16px;
}
.payment-note p {
  max-width: 850px;
  margin: 5px 0 0;
  color: #53606d;
  font-size: 13px;
  line-height: 1.5;
}
.payment-note > span {
  font-size: 24px;
  font-weight: 900;
  color: #183b89;
}
.tier-explainers {
  margin-top: 30px;
  padding: 32px;
  border-radius: 18px;
  background: #071d2d;
  color: #fff;
}
.tier-explainers-heading {
  max-width: 820px;
}
.tier-explainers-heading .eyebrow,
.direct-offers .eyebrow {
  color: #65dc96;
}
.tier-explainers-heading h2,
.direct-offers h2 {
  margin: 8px 0 10px;
  font-size: 28px;
}
.tier-explainers-heading p {
  margin: 0;
  color: #c6d6cf;
  font-size: 16px;
}
.tier-explainer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 25px;
}
.tier-explainer-grid article {
  padding: 22px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  background: rgba(255,255,255,.07);
}
.tier-label {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 99px;
  background: #0b9840;
  font-size: 13px;
  font-weight: 800;
}
.tier-explainer-grid h3 {
  margin: 15px 0 18px;
  font-size: 18px;
}
.tier-explainer-grid h4 {
  margin: 16px 0 7px;
  color: #75dc9e;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tier-explainer-grid ul {
  margin: 0;
  padding-left: 19px;
}
.tier-explainer-grid li,
.tier-explainer-grid p {
  color: #d6e1dc;
  font-size: 14px;
  line-height: 1.55;
}
.tier-explainer-grid li + li {
  margin-top: 7px;
}
.tier-explainer-grid p {
  margin: 0;
}
.direct-offers {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 30px;
  margin-top: 20px;
  padding: 32px;
  border: 1px solid #bde2ca;
  border-radius: 18px;
  background: #eef9f2;
}
.direct-offers .eyebrow {
  color: #087d35;
}
.direct-offers-copy > p {
  color: #465663;
  font-size: 16px;
}
.offer-steps {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: offer-step;
}
.offer-steps li {
  position: relative;
  min-height: 42px;
  padding-left: 54px;
  counter-increment: offer-step;
}
.offer-steps li::before {
  content: counter(offer-step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0b9840;
  color: #fff;
  font-weight: 900;
}
.offer-steps b,
.offer-steps span {
  display: block;
}
.offer-steps span {
  margin-top: 3px;
  color: #52645b;
  font-size: 14px;
  line-height: 1.45;
}
.offer-price-example {
  padding: 24px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(6, 19, 31, .08);
}
.offer-price-example > span {
  color: #087d35;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.offer-price-example h3 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0;
  font-size: 16px;
}
.offer-price-example dl {
  margin: 0;
}
.offer-price-example dl div {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 11px 0;
  border-top: 1px solid #e0e9e4;
}
.offer-price-example dt,
.offer-price-example dd {
  margin: 0;
}
.offer-price-example dd {
  font-weight: 800;
  white-space: nowrap;
}
.offer-price-example .offer-total {
  color: #087d35;
  font-size: 18px;
}
.offer-price-example p {
  margin: 15px 0 0;
  color: #5a6b62;
  font-size: 13px;
  line-height: 1.55;
}
.supplier-help {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-left: 4px solid #0b9840;
  border-radius: 8px;
  background: #fff;
  color: #34473d;
}
.donations-hero {
  background: linear-gradient(115deg, #06131f, #075e32);
}
.donation-body {
  max-width: 1120px;
  margin: auto;
  padding: 38px 30px 60px;
}
.donation-info {
  padding: 30px;
  border: 1px solid #bfe3cc;
  border-radius: 18px;
  background: #effaf3;
}
.donation-info-head {
  max-width: 800px;
}
.donation-info .eyebrow,
.donation-form-card .eyebrow {
  color: #087d35;
}
.donation-info h2,
.donation-form-card h2 {
  margin: 8px 0 10px;
  font-size: 28px;
}
.donation-info-head p {
  margin: 0;
  color: #465663;
  font-size: 16px;
}
.donation-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}
.donation-choice-grid article {
  padding: 22px;
  border-radius: 14px;
  background: #fff;
}
.donation-choice-grid article > span {
  font-size: 26px;
}
.donation-choice-grid h3 {
  margin: 10px 0 7px;
}
.donation-choice-grid p {
  margin: 0;
  color: #526159;
  line-height: 1.6;
}
.donation-split {
  display: grid;
  grid-template-columns: 95fr 5fr;
  min-width: 0;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 12px;
  color: #fff;
}
.donation-split > div {
  display: grid;
  gap: 3px;
  min-width: 170px;
  padding: 17px 20px;
}
.donation-split > div:first-child {
  background: #0b9840;
}
.donation-split > div:last-child {
  background: #123e78;
}
.donation-split span {
  font-size: 27px;
  font-weight: 900;
}
.donation-split small {
  color: #fff;
  line-height: 1.35;
}
.donation-form-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
  gap: 30px;
  margin-top: 20px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}
.donation-form-card p {
  color: #526159;
  line-height: 1.6;
}
.donation-form-card form {
  display: grid;
  gap: 14px;
}
.donation-form-card label {
  display: grid;
  gap: 6px;
  color: #304238;
  font-size: 14px;
  font-weight: 700;
}
.donation-form-card input,
.donation-form-card select,
.donation-form-card textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid #cfdcd4;
  border-radius: 9px;
  background: #f5f7f6;
  font: inherit;
}
.donation-form-card button:disabled {
  cursor: not-allowed;
  opacity: .65;
}
.donation-rules {
  margin-top: 20px;
  padding: 28px;
  border-radius: 16px;
  background: #071d2d;
  color: #fff;
}
.donation-rules h2 {
  margin-top: 0;
}
.donation-rules ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding-left: 22px;
}
.donation-rules li {
  padding-left: 5px;
}
.donation-rules b,
.donation-rules span {
  display: block;
}
.donation-rules span {
  margin-top: 6px;
  color: #cedbd5;
  line-height: 1.5;
}
.donation-ledger-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 20px;
  padding: 22px 26px;
  border: 1px solid #bfe3cc;
  border-radius: 14px;
  background: #effaf3;
}
.donation-ledger-action h2,
.donation-ledger-action p {
  margin: 0;
}
.donation-ledger-action p {
  margin-top: 5px;
  color: #526159;
}
@media (max-width: 1050px) {
  .membership-grid {
    grid-template-columns: 1fr 1fr;
  }
  .membership-rules {
    grid-template-columns: 1fr 1fr;
  }
  .tier-explainer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 620px) {
  .membership-hero {
    padding: 34px 20px;
    background-image:
      linear-gradient(
        90deg,
        #06131f 0%,
        #06131f 70%,
        rgba(6, 19, 31, 0.65) 100%
      ),
      url("assets/hero-join.png");
    background-size:
      100% 100%,
      auto 130%;
    background-position:
      center,
      right center;
  }
  .membership-hero h1,
  .membership-hero p {
    max-width: 72%;
  }
  .membership-hero p {
    font-size: 15px;
  }
  .billing-toggle button {
    padding: 10px 11px;
    font-size: 13px;
  }
  .billing-toggle span {
    display: block;
    margin: 2px 0 0;
  }
  .membership-body {
    padding: 28px 16px;
  }
  .membership-grid,
  .membership-rules {
    grid-template-columns: 1fr;
  }
  .membership-card {
    padding: 22px 18px;
  }
  .payment-note {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .home-membership-guide {
    align-items: flex-start;
    flex-direction: column;
    padding: 20px;
  }
  .home-membership-guide .button {
    width: 100%;
  }
  .home-guide-actions,
  .donation-ledger-action {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }
  .donation-body {
    padding: 28px 16px 45px;
  }
  .donation-info,
  .donation-form-card,
  .donation-rules {
    padding: 22px 18px;
  }
  .donation-choice-grid,
  .donation-form-card,
  .donation-rules ol {
    grid-template-columns: 1fr;
  }
  .donation-split {
    grid-template-columns: 1fr;
  }
  .donation-split > div {
    min-width: 0;
  }
  .tier-explainers,
  .direct-offers {
    padding: 23px 18px;
  }
  .tier-explainer-grid,
  .direct-offers {
    grid-template-columns: 1fr;
  }
  .tier-explainers-heading h2,
  .direct-offers h2 {
    font-size: 24px;
  }
}

/* Clear first-time journeys for children, families and new members */
html { scroll-behavior: smooth; }
#games-list, #events-list, #vote-list, #benefits-list, #play-how, #events-how, #vote-how, #benefits-how,
#individual-plan, #club-plan, #league-plan, #global-plan { scroll-margin-top: 92px; }
.getting-started-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 30px 0; }
.getting-started-grid .hub-panel { padding: 24px; }
.getting-started-grid .hub-panel p { color: #5f6f66; font-size: 16px; line-height: 1.6; }
.simple-how { max-width: 920px; margin: 36px auto; padding: 28px; border: 1px solid #cfe0d6; border-left: 6px solid #0aa653; border-radius: 14px; background: #f4fbf7; }
.simple-how h2 { margin-top: 0; }
.simple-how p { color: #506159; font-size: 16px; line-height: 1.65; }
.coming-note { display: block; margin-top: 14px; color: #075f32; font-size: 15px; font-weight: 800; }
.join-guide { margin: 0 auto 34px; padding: 26px; border-radius: 16px; background: #eef9f2; }
.join-guide h2 { margin: 0 0 18px; text-align: center; }
.join-guide > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.join-guide a { display: grid; gap: 7px; min-height: 92px; padding: 18px; border: 2px solid #d0e5d8; border-radius: 12px; background: #fff; color: #102a1d; text-decoration: none; }
.join-guide a:hover, .join-guide a:focus-visible { border-color: #0aa653; box-shadow: 0 6px 18px #0a6a3520; }
.join-guide b { font-size: 16px; }
.join-guide span { color: #5e6d65; font-size: 14px; line-height: 1.45; }
.membership-grid > div { min-width: 0; }
.membership-grid > div .membership-card { height: 100%; box-sizing: border-box; }
.approved-body p, .community-hub p, .membership-body p, .form-panel p, .form-intro p { line-height: 1.6; }
.button, .hub-tools a, .main-nav a, .nav-more, .event-search input, .event-search select { font-size: 14px; }
.button, .hub-tools a { min-height: 44px; box-sizing: border-box; }
@media (max-width: 900px) {
  .getting-started-grid, .join-guide > div { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .getting-started-grid, .join-guide > div { grid-template-columns: 1fr; }
  .join-guide { padding: 20px; }
  .join-guide a { min-height: 0; }
  .simple-how { padding: 22px; }
}

/* Make membership payment choices explicit and keep login artwork in its native ratio. */
.payment-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 20px;
}
.payment-heading strong {
  font-size: 22px;
}
.payment-heading span {
  color: #596674;
  font-size: 13px;
}
.plan-payment-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 14px;
}
.payment-option {
  position: relative;
  padding: 10px;
  border: 1px solid #d9e2dc;
  border-radius: 10px;
  background: #f8faf9;
}
.payment-option small,
.payment-option strong,
.payment-option strong span {
  display: block;
}
.payment-option small {
  color: #65717d;
  font-size: 11px;
  font-weight: 700;
}
.payment-option strong {
  margin-top: 3px;
  color: #0b7f39;
  font-size: 20px;
}
.payment-option strong span {
  color: #65717d;
  font-size: 10px;
}
.payment-option em {
  display: inline-block;
  margin-top: 5px;
  padding: 3px 5px;
  border-radius: 5px;
  background: #dcfce7;
  color: #087d35;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}
.monthly-option {
  border: 2px solid #16a34a;
  background: #effcf3;
}
.show-yearly .monthly-option {
  border: 1px solid #d9e2dc;
  background: #f8faf9;
}
.show-yearly .yearly-option {
  border: 2px solid #16a34a;
  background: #effcf3;
}
.paypal-under-button {
  display: block;
  margin-top: 8px;
  color: #65717d;
  text-align: center;
  font-size: 10px;
  line-height: 1.35;
}

.referral-panel { margin-top: 22px; }
.referral-panel > p { color: #64736a; font-size: 14px; line-height: 1.55; }
.referral-panel input { width: 100%; }
.referral-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.referral-totals span { padding: 11px; border-radius: 8px; background: #edf7f0; color: #365143; font-size: 13px; }
.referral-totals strong { display: block; color: #087d35; font-size: 20px; }
.points-history { display: grid; gap: 7px; margin-top: 12px; }
.points-history > div { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 9px 0; border-top: 1px solid #e2e9e4; }
.points-history span { color: #263d30; font-size: 13px; }
.points-history strong { color: #087d35; }
.points-history strong.negative { color: #b42318; }
.points-history small { grid-column: 1 / -1; color: #7b8980; text-transform: capitalize; }
.identity-declaration { display: flex !important; align-items: flex-start; gap: 11px; padding: 15px; border: 1px solid #b8d8c4; border-radius: 12px; background: #f2faf5; color: #173d27; line-height: 1.45; }
.identity-declaration input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 20px; }
.duplicate-review-box { margin: 18px 0 0; padding: 16px; border: 1px solid #efc26c; border-radius: 12px; background: #fff8e8; }
.duplicate-review-box h3 { margin: 0 0 6px; }
.duplicate-review-box p { margin: 0 0 13px; color: #654d1c; }
.duplicate-review-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.duplicate-review-actions button { min-height: 42px; padding: 9px 13px; border: 1px solid #0a7b3a; border-radius: 9px; background: #fff; color: #075b2d; font-weight: 800; cursor: pointer; }
.duplicate-review-actions button:last-child { border-color: #a6332c; color: #8b211c; }
.bot-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.points-guide { margin: 48px 0 26px; overflow: hidden; border: 1px solid #d8e5dd; border-radius: 22px; background: #fff; box-shadow: 0 18px 48px rgba(7, 29, 45, .08); }
.points-guide-head { padding: clamp(24px, 5vw, 48px); background: linear-gradient(135deg, #071d2d, #0b5533); color: #fff; }
.points-guide-head .eyebrow { color: #8af0ae; }
.points-guide-head h2 { max-width: 760px; margin: 8px 0 12px; font-size: clamp(28px, 4vw, 44px); line-height: 1.08; }
.points-guide-head p { max-width: 760px; margin: 0; color: #d9eee2; font-size: 17px; line-height: 1.6; }
.points-guide-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; padding: clamp(24px, 5vw, 48px); }
.points-guide-columns h3 { margin: 0 0 18px; color: #071d2d; font-size: 22px; }
.points-guide-columns ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.points-guide-columns li { display: grid; gap: 5px; padding: 16px 18px; border: 1px solid #dfe9e3; border-radius: 13px; background: #f7faf8; }
.points-guide-columns li b { color: #087d3b; font-size: 16px; }
.points-guide-columns li span { color: #43594b; line-height: 1.5; }
.points-send-link { display: inline-flex; margin-top: 18px; }
.points-future-title { margin-top: 30px !important; }
.points-rules { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 18px clamp(24px, 5vw, 48px); border-top: 1px solid #dfe9e3; background: #edf7f1; color: #304b3a; }
.points-rules b { margin-right: 5px; color: #071d2d; }
.points-rules span { padding: 7px 10px; border-radius: 999px; background: #fff; font-size: 14px; }
@media (max-width: 760px) { .points-guide-columns { grid-template-columns: 1fr; gap: 30px; } .points-rules { align-items: flex-start; flex-direction: column; } }
.form-shell:has(input[type="password"]) .form-intro {
  background-size:
    100% 100%,
    auto 270px;
  background-position:
    center,
    center bottom;
}
@media (max-width: 620px) {
  .payment-heading {
    display: block;
  }
  .payment-heading span {
    display: block;
    margin-top: 5px;
  }
  .form-shell:has(input[type="password"]) .form-intro {
    background-size:
      100% 100%,
      auto 230px;
    background-position:
      center,
      center bottom;
    padding-bottom: 240px;
  }
}

/* Preserve the source artwork's proportions and mask its baked-in left copy. */
.form-shell:not(:has(input[type="password"])) .form-intro {
  background-image:
    linear-gradient(90deg, #06131f 0%, #06131f 66%, rgba(6, 19, 31, 0.2) 100%),
    url("assets/hero-join.png");
  background-size:
    100% 100%,
    auto 100%;
  background-position:
    center,
    right bottom;
}
.fund-allocation {
  margin-top: 24px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(6, 19, 31, 0.05);
}
.allocation-heading {
  max-width: 760px;
}
.allocation-heading .eyebrow {
  color: #087d35;
}
.allocation-heading h2 {
  margin: 8px 0;
  font-size: 28px;
}
.allocation-heading p {
  margin: 0;
  color: #53606d;
  line-height: 1.55;
}
.allocation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 24px;
}
.allocation-grid article {
  padding: 22px;
  border-radius: 13px;
  background: #f5f8f6;
}
.allocation-grid h3 {
  margin: 0 0 16px;
}
.allocation-bar {
  display: flex;
  height: 44px;
  overflow: hidden;
  border-radius: 9px;
  background: #dce3df;
}
.allocation-bar span {
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
}
.subscription-bar span:first-child {
  width: 80%;
  background: #0b9840;
}
.subscription-bar span:nth-child(2) {
  width: 20%;
  background: #123e78;
}
.sales-bar span:first-child {
  width: 10%;
  min-width: 62px;
  background: #0b9840;
}
.sales-bar span:nth-child(2) {
  width: 5%;
  min-width: 54px;
  background: #123e78;
}
.sales-bar i {
  flex: 1;
  display: grid;
  place-items: center;
  color: #55636f;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}
.allocation-grid article > p {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 12px 0 0;
  color: #334155;
  font-size: 13px;
}
.allocation-grid small {
  display: block;
  margin-top: 10px;
  color: #65717d;
  line-height: 1.45;
}
.allocation-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}
.allocation-actions > div {
  padding: 22px;
  border: 1px solid #dfe7e2;
  border-radius: 13px;
}
.allocation-actions h3 {
  margin: 0 0 7px;
}
.allocation-actions p {
  min-height: 64px;
  color: #53606d;
  font-size: 13px;
  line-height: 1.5;
}
.ghost-dark {
  background: #fff;
  color: #087d35;
  border: 1px solid #0b9840;
}
.funds-hero {
  background: linear-gradient(110deg, #06131f, #0a3f2a);
}
.ledger-body {
  max-width: 1120px;
  margin: auto;
  padding: 38px 30px 60px;
}
.ledger-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.ledger-intro > div {
  display: grid;
  gap: 7px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.ledger-intro span {
  color: #65717d;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ledger-intro strong {
  font-size: 20px;
  color: #0b7f39;
}
.ledger-intro strong:nth-of-type(2) {
  color: #123e78;
}
.ledger-intro small {
  color: #65717d;
}
.sales-margin-explainer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 28px;
  margin-top: 20px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.sales-margin-explainer h2 {
  margin: 7px 0 12px;
}
.sales-margin-explainer p {
  color: #465663;
  line-height: 1.6;
}
.sales-margin-explainer aside {
  padding: 22px;
  border-radius: 12px;
  background: #071d2d;
  color: #fff;
}
.sales-margin-explainer aside > span {
  display: block;
  margin-bottom: 12px;
  color: #75dc9e;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sales-margin-explainer aside > strong {
  display: block;
  margin-bottom: 14px;
  font-size: 20px;
}
.sales-margin-explainer aside p {
  margin: 7px 0;
  color: #fff;
}
.ledger-notice {
  margin-top: 20px;
  padding: 24px;
  border-radius: 14px;
  background: #edf8f1;
}
.ledger-notice h2 {
  margin: 0 0 8px;
}
.ledger-notice p {
  margin: 0;
  color: #465663;
  line-height: 1.55;
}
.ledger-table-wrap {
  margin-top: 30px;
}
.ledger-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
.ledger-table th,
.ledger-table td {
  padding: 15px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.ledger-table th {
  background: #f4f7f5;
  color: #42515d;
  font-size: 12px;
  text-transform: uppercase;
}
.ledger-table td {
  color: #65717d;
}
.ledger-table td[colspan] {
  padding: 30px;
  text-align: center;
}
@media (max-width: 760px) {
  .fund-allocation {
    padding: 22px 17px;
  }
  .allocation-grid,
  .allocation-actions,
  .ledger-intro,
  .sales-margin-explainer {
    grid-template-columns: 1fr;
  }
  .sales-margin-explainer {
    padding: 22px;
  }
  .allocation-grid article > p {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .allocation-actions p {
    min-height: 0;
  }
  .ledger-body {
    padding: 28px 16px 45px;
  }
  .ledger-table-wrap {
    overflow-x: auto;
  }
  .ledger-table {
    min-width: 680px;
  }
}
.database-state {
  margin: 12px 0 0;
  color: #7a8781;
  font-size: 12px;
}
.database-state.connected {
  color: #087d35;
}
.database-state.error {
  color: #b43f2c;
}
.real-login {
  display: block;
  margin-top: 24px;
  padding: 14px;
  text-align: center;
}
.login-help {
  margin-top: 22px;
  padding: 16px;
  border: 1px solid #dce7df;
  border-radius: 11px;
  background: #f4faf6;
}
.login-help strong {
  font-size: 14px;
}
.login-help p {
  margin: 7px 0 0;
  color: #53645c;
  font-size: 13px;
  line-height: 1.55;
}
.profile-photo-panel {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 20px;
  align-items: center;
  margin-top: 20px;
  padding: 18px;
  border: 1px solid #dfe8e2;
  border-radius: 12px;
  background: #f7faf8;
}
.profile-photo-preview {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(135deg, #0a3f2a, #16a34a);
  color: #fff;
  font-size: 30px;
  font-weight: 900;
}
.profile-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-photo-panel h3 {
  margin: 0;
}
.profile-photo-panel p {
  margin: 5px 0 12px;
}
.profile-photo-actions {
  display: flex;
  gap: 9px;
  align-items: center;
}
.photo-upload,
.photo-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.photo-upload {
  background: #0b9840;
  color: #fff;
}
.photo-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}
.photo-remove {
  border: 1px solid #d6dfda;
  background: #fff;
  color: #42534a;
}
.profile-photo-panel small {
  display: block;
  margin-top: 9px;
  color: #63736a;
}
@media (max-width: 560px) {
  .profile-photo-panel {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .profile-photo-preview {
    margin: auto;
  }
  .profile-photo-actions {
    justify-content: center;
  }
}
.admin-logout {
  margin: 10px 7px 0;
  padding: 10px;
  border: 1px solid #ffffff25;
  border-radius: 8px;
  color: #dbe8e2;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
}
.admin-logout:hover {
  border-color: #58dc85;
  color: #58dc85;
}
.admin-profile-link { margin-top: 8px; border-color: #58dc8566; color: #58dc85; }
.admin-profile-nav { align-self: center; color: #fff; font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.admin-profile-nav:hover { color: #58dc85; }
.logout-link {
  align-self: center;
  color: #5d6a64;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}
.logout-link:hover {
  color: #087d35;
}
.moderation-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0;
}
.moderation-summary article {
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: 1px solid #dce7e0;
  border-radius: 12px;
  background: #f7fbf8;
}
.moderation-summary strong {
  font-size: 30px;
  color: #087d35;
}
.moderation-summary span {
  font-size: 13px;
  font-weight: 800;
  color: #5d6a64;
}
.moderation-filters button {
  border: 1px solid #cddbd3;
  background: white;
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 800;
  color: #42534a;
  cursor: pointer;
}
.moderation-filters button.active {
  background: #087d35;
  color: white;
  border-color: #087d35;
}
.moderation-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.moderation-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid #dce7e0;
  border-radius: 12px;
  background: #fff;
}
.moderation-row h3 {
  margin: 0 0 5px;
  font-size: 17px;
}
.moderation-row p {
  margin: 0 0 8px;
  color: #5d6a64;
}
.moderation-row small {
  color: #718078;
}
.moderation-row > button {
  border: 0;
  border-radius: 8px;
  padding: 10px 13px;
  background: #e6f6eb;
  color: #087d35;
  font-weight: 900;
  cursor: pointer;
}
.moderation-type {
  justify-self: start;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 900;
  background: #eef3ff;
  color: #3156a3;
}
.moderation-type.opportunity {
  background: #e7f7ed;
  color: #087d35;
}
.moderation-type.event {
  background: #fff1dc;
  color: #9a5e08;
}
@media (max-width: 760px) {
  .moderation-summary {
    grid-template-columns: 1fr;
  }
  .moderation-row {
    grid-template-columns: 1fr;
  }
  .moderation-row > button {
    justify-self: start;
  }
}
.language-control {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #66736d;
  font-size: 10px;
  font-weight: 700;
}
.language-control span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.language-control select {
  max-width: 112px;
  padding: 8px 25px 8px 9px;
  border: 1px solid #dce5df;
  border-radius: 8px;
  background: #fff;
  color: #23342c;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
@media (max-width: 900px) {
  .language-control {
    order: -1;
  }
  .language-control select {
    max-width: 95px;
  }
}
@media (min-width: 761px) and (max-width: 1300px) {
  .site-header {
    padding: 0 2vw;
    gap: 12px;
  }
  .brand {
    width: 195px;
    flex-basis: 195px;
  }
  .main-nav {
    gap: clamp(9px, 1.2vw, 16px);
  }
  .main-nav a {
    font-size: 11px;
  }
  .header-actions {
    gap: 7px;
  }
  .header-actions .button {
    padding: 11px 12px;
    font-size: 12px;
  }
  .header-search {
    display: none;
  }
  .language-control select {
    max-width: 98px;
  }
}

/* Stage 1 administration control centre. */
body:has(.admin-app) > .site-header,
body:has(.admin-app) > .site-footer {
  display: none;
}
.admin-app {
  min-height: 100vh;
  background: #f4f7f5;
  color: #13201a;
}
.admin-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 4;
  display: flex;
  width: 230px;
  box-sizing: border-box;
  flex-direction: column;
  padding: 23px 16px;
  background: #071923;
  color: #fff;
}
.admin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 7px 24px;
  border-bottom: 1px solid #ffffff17;
}
.admin-brand img {
  width: 55px;
  height: 38px;
  object-fit: contain;
}
.admin-brand span,
.admin-brand small {
  display: block;
}
.admin-brand span {
  font-size: 13px;
  font-weight: 800;
}
.admin-brand small {
  margin-top: 3px;
  color: #58dc85;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.admin-sidebar nav {
  display: grid;
  gap: 5px;
  padding-top: 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.admin-nav-group { border-bottom: 1px solid #ffffff12; padding-bottom: 5px; }
.admin-nav-group[hidden] { display: none; }
.admin-nav-group summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 9px; color: #7f958c; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; list-style: none; }
.admin-nav-group summary::-webkit-details-marker { display: none; }
.admin-nav-group summary i { font-size: 14px; font-style: normal; transition: transform .18s ease; }
.admin-nav-group[open] summary i { transform: rotate(180deg); }
.admin-nav-group > div { display: grid; gap: 4px; padding-bottom: 4px; }
.admin-sidebar nav button {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  width: 100%;
  padding: 11px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #bdccc6;
  text-align: left;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.admin-sidebar nav button:hover,
.admin-sidebar nav button.active {
  background: #ffffff12;
  color: #fff;
}
.admin-sidebar nav button.active {
  box-shadow: inset 3px 0 #42dc78;
}
.admin-sidebar nav button b {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #169b4a;
  color: #fff;
  font-size: 9px;
}
.admin-sidebar nav button b[hidden] { display: none; }
.admin-sidebar nav button small {
  color: #6f8179;
  font-size: 8px;
  text-transform: uppercase;
}
.admin-sidebar nav button:disabled {
  opacity: 0.5;
  cursor: default;
}
.admin-user {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding: 16px 7px 2px;
  border-top: 1px solid #ffffff17;
}
.admin-user > span,
.table-avatar {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: #dff7e7;
  color: #087d35;
  font-size: 10px;
  font-weight: 900;
}
.admin-user strong,
.admin-user small {
  display: block;
}
.admin-user strong {
  font-size: 11px;
}
.admin-user small {
  margin-top: 3px;
  color: #8fa39b;
  font-size: 9px;
}
.admin-workspace {
  min-height: 100vh;
  margin-left: 230px;
}
.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 20px 30px;
  border-bottom: 1px solid #dfe6e2;
  background: #fff;
}
.admin-topbar h1 {
  margin: 4px 0 0;
  font-size: 25px;
}
.admin-topbar > div:last-child {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-icon {
  min-width: 39px;
  height: 39px;
  padding: 0 10px;
  border: 1px solid #dce5df;
  border-radius: 9px;
  background: #fff4e7;
  color: #a95608;
  font-weight: 800;
  cursor: pointer;
}
.admin-icon:hover,
.admin-icon:focus-visible {
  border-color: #ef9b32;
  outline: 2px solid #ef9b3240;
  outline-offset: 2px;
}
.admin-notification-wrap { position: relative; }
.admin-notification-panel { position: absolute; z-index: 40; top: 48px; right: 150px; width: min(390px, calc(100vw - 32px)); max-height: 70vh; overflow: auto; padding: 12px; border: 1px solid #dce5df; border-radius: 12px; background: #fff; box-shadow: 0 18px 45px #10251a30; }
.admin-notification-panel[hidden] { display: none; }
.admin-notification-panel header { display: flex; justify-content: space-between; gap: 12px; padding: 4px 4px 10px; border-bottom: 1px solid #e5ece8; }
.admin-notification-panel header div { display: grid; gap: 2px; }
.admin-notification-panel header small { color: #64736a; }
.admin-notification-panel header button { border: 0; background: transparent; color: #087d35; font-weight: 800; cursor: pointer; }
.admin-notification-panel [data-admin-notification-list] { display: grid; gap: 6px; padding-top: 8px; }
.admin-notification-panel [data-admin-notification-list] > button { display: grid; gap: 3px; padding: 10px; border: 0; border-radius: 8px; background: #f4f8f5; text-align: left; cursor: pointer; }
.admin-notification-panel [data-admin-notification-list] > button.unread { background: #e9f8ee; box-shadow: inset 3px 0 #16a34a; }
.admin-notification-panel [data-admin-notification-list] span { color: #087d35; font-size: 11px; font-weight: 800; }
.admin-notification-panel [data-admin-notification-list] small { color: #64736a; }
.admin-icon.all-read span { opacity: .55; }
@media (max-width: 700px) { .admin-notification-panel { position: fixed; top: 72px; right: 16px; left: 16px; width: auto; } }
.email-service-panel { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 18px; margin: 20px 0; padding: 20px; border: 1px solid #dce5df; border-radius: 12px; background: #f7faf8; }
.email-service-panel h3, .email-service-panel p { margin: 3px 0; }
.email-service-panel p, .email-service-panel small { color: #64736a; }
.email-service-panel small { grid-column: 1 / -1; min-height: 18px; }
.email-service-panel .connection-pill.active { background: #e1f8e9; color: #087d35; }
.alert-rules-form { margin: 20px 0; padding: 20px; border: 1px solid #dce5df; border-radius: 12px; background: #fff; }
.alert-rules-form > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.alert-rule-actions { display: flex; gap: 8px; align-items: center; }
.alert-rule-actions button:not(.button) { padding: 10px 13px; border: 1px solid #b8c8bf; border-radius: 7px; background: #fff; color: #193f2a; font-weight: 800; cursor: pointer; }
.daily-summary-status { margin: -5px 0 15px !important; padding: 10px 12px; border-radius: 8px; background: #f0f7f3; color: #315842 !important; font-size: 13px; }
.alert-centre-actions { display: flex; gap: 9px; }
.alert-centre-actions button { padding: 10px 13px; border: 1px solid #b8c8bf; border-radius: 8px; background: #fff; color: #193f2a; font-weight: 800; cursor: pointer; }
.alert-centre-summary { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin: 18px 0; }
.alert-centre-summary article { display: grid; gap: 5px; padding: 17px; border: 1px solid #dce5df; border-radius: 11px; background: #f7faf8; }
.alert-centre-summary span, .alert-centre-summary small { color: #64736a; }
.alert-centre-summary strong { color: #10251a; font-size: 21px; }
.alert-centre-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: 18px; }
.alert-centre-grid > section { padding: 18px; border: 1px solid #dce5df; border-radius: 11px; background: #fff; }
.alert-centre-grid h3 { margin: 0 0 12px; }
.alert-centre-list, .alert-history-list { display: grid; gap: 8px; }
.alert-centre-list article, .alert-history-list article { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px; border-radius: 9px; background: #f4f8f5; }
.alert-centre-list article > div, .alert-history-list article > div { display: grid; gap: 3px; min-width: 0; }
.alert-centre-list small, .alert-history-list small { color: #64736a; }
.alert-centre-list article p { margin: 4px 0 0; color: #4c6256; font-size: 12px; line-height: 1.45; }
.alert-centre-list article small b, .alert-centre-list article p b { color: #263d31; }
.alert-centre-list .alert-kind-information { background: #eef6fb; }
.alert-centre-list .alert-kind-information .alert-count { background: #dceefa; color: #176184; }
.alert-centre-list .alert-kind-waiting { background: #fff8e9; }
.alert-centre-list button { border: 0; background: transparent; color: #087d35; font-weight: 800; cursor: pointer; }
.alert-count { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff0df; color: #a95608; font-weight: 900; }
.alert-centre-note { display: flex; gap: 12px; margin-top: 16px; padding: 14px 16px; border-radius: 9px; background: #edf7f0; color: #315842; }
.alert-centre-note span { flex: 1; }
.member-admin-note { display: grid; gap: 6px; margin: 0 24px 18px; color: #33483a; }
.member-admin-note textarea { box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid #ccd8d0; border-radius: 8px; font: inherit; }
.member-admin-note small { color: #64736a; }
.member-admin-note.required textarea { border-color: #d97706; box-shadow: 0 0 0 3px #f59e0b22; }
.member-admin-note.required small { color: #9a4d05; font-weight: 800; }
.alert-rules-form h3, .alert-rules-form p { margin: 3px 0; }
.alert-rules-form p, .alert-rules-form small { color: #64736a; }
.alert-rule-head, .alert-rule { display: grid; grid-template-columns: minmax(220px,1.5fr) repeat(3,minmax(130px,1fr)); gap: 10px; align-items: center; }
.alert-rule-head { padding: 0 12px 8px; color: #64736a; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.alert-rule { padding: 12px; border-top: 1px solid #e7ede9; }
.alert-rule label { display: grid; gap: 3px; }
.alert-rule select, .alert-rule input { box-sizing: border-box; width: 100%; padding: 9px; border: 1px solid #ccd8d0; border-radius: 7px; background: #fff; font: inherit; font-size: 12px; }
.fixed-threshold { color: #64736a; font-size: 12px; }
.alert-rules-form footer { display: flex; justify-content: space-between; gap: 15px; padding-top: 14px; }
@media (max-width: 700px) { .email-service-panel { grid-template-columns: 1fr; align-items: start; } .email-service-panel small { grid-column: auto; } }
@media (max-width: 800px) { .alert-centre-summary, .alert-centre-grid { grid-template-columns: 1fr; } .alert-centre-actions, .alert-centre-note { flex-direction: column; } .alert-centre-list article, .alert-history-list article { grid-template-columns: auto 1fr; } .alert-centre-list button { grid-column: 1 / -1; padding: 8px; text-align: left; } }
@media (max-width: 700px) { .alert-rules-form > header, .alert-rules-form footer { align-items: stretch; flex-direction: column; } .alert-rule-actions { align-items: stretch; flex-direction: column; } .alert-rule-head { display: none; } .alert-rule { grid-template-columns: 1fr; gap: 8px; } }
.admin-view {
  display: none;
  padding: 26px 30px 45px;
}
.admin-view.active {
  display: block;
}
.admin-stage-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  padding: 15px 18px;
  border: 1px solid #bce8ca;
  border-radius: 11px;
  background: #eaf9ef;
}
.admin-stage-note strong,
.admin-stage-note span {
  display: block;
}
.admin-stage-note strong {
  font-size: 13px;
}
.admin-stage-note span {
  margin-top: 3px;
  color: #53645c;
  font-size: 11px;
}
.admin-stage-note > b,
.connection-pill {
  padding: 7px 10px;
  border-radius: 20px;
  background: #cef1da;
  color: #087d35;
  font-size: 10px;
  text-transform: uppercase;
}
.admin-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 13px;
}
.admin-metrics article {
  padding: 18px;
  border: 1px solid #dfe6e2;
  border-radius: 12px;
  background: #fff;
}
.admin-metrics span,
.admin-metrics strong,
.admin-metrics small {
  display: block;
}
.admin-metrics span {
  color: #64736c;
  font-size: 11px;
  font-weight: 700;
}
.admin-metrics strong {
  margin: 7px 0 3px;
  font-size: 28px;
}
.admin-metrics small {
  color: #0b9840;
  font-size: 9px;
}
.admin-metrics small.warn {
  color: #c66b20;
}
.admin-dashboard-grid {
  display: grid;
  grid-template-columns: 1.55fr 0.85fr;
  gap: 15px;
  margin-top: 15px;
}
.admin-panel {
  border: 1px solid #dfe6e2;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 5px 15px #07192308;
}
.admin-full {
  padding: 22px;
}
.admin-panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 20px;
  border-bottom: 1px solid #edf1ef;
}
.admin-full > .admin-panel-head {
  padding: 0 0 19px;
}
.admin-panel-head h2 {
  margin: 4px 0 0;
  font-size: 20px;
}
.admin-panel-head p {
  margin: 6px 0 0;
  color: #64736c;
  font-size: 11px;
}
.text-button,
.row-action {
  border: 0;
  background: transparent;
  color: #087d35;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.admin-tasks > button {
  display: grid;
  grid-template-columns: 31px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 17px 20px;
  border: 0;
  border-bottom: 1px solid #edf1ef;
  background: #fff;
  text-align: left;
  cursor: pointer;
}
.admin-tasks i {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 8px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}
.admin-tasks i.red {
  background: #fff0ed;
  color: #d7472f;
}
.admin-tasks i.amber {
  background: #fff5e5;
  color: #be751c;
}
.admin-tasks i.green {
  background: #e8f8ee;
  color: #087d35;
}
.admin-tasks strong,
.admin-tasks small {
  display: block;
}
.admin-tasks strong {
  font-size: 12px;
}
.admin-tasks small {
  margin-top: 4px;
  color: #687770;
  font-size: 9px;
}
.admin-tasks b {
  color: #087d35;
  font-size: 10px;
}
.setup-list {
  margin: 0;
  padding: 12px 20px 18px;
  list-style: none;
}
.setup-list li {
  position: relative;
  padding: 9px 0 9px 25px;
  color: #687770;
  font-size: 10px;
}
.setup-list li:before {
  content: "○";
  position: absolute;
  left: 2px;
  color: #9aaaa2;
  font-size: 15px;
}
.setup-list li.done {
  color: #26372f;
}
.setup-list li.done:before {
  content: "✓";
  color: #0b9840;
  font-weight: 900;
}
.admin-filters {
  display: grid;
  grid-template-columns: 1fr 180px auto;
  gap: 9px;
  padding: 18px 0 12px;
}
.admin-filters input,
.admin-filters select {
  padding: 11px 12px;
  border: 1px solid #d9e2dd;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 11px;
}
.ghost-dark {
  padding: 10px 14px;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-table th,
.admin-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #edf1ef;
  text-align: left;
  font-size: 10px;
}
.admin-table th {
  color: #718079;
  font-size: 9px;
  text-transform: uppercase;
}
.admin-table td:first-child {
  display: flex;
  align-items: center;
  gap: 9px;
}
.admin-table .table-avatar {
  width: 29px;
  height: 29px;
  flex-basis: 29px;
}
.status {
  display: inline-block;
  padding: 5px 8px;
  border-radius: 12px;
  background: #eef2f0;
  color: #53635b;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}
.status.active {
  background: #e4f8eb;
  color: #078238;
}
.status.pending {
  background: #fff4dd;
  color: #a76613;
}
.status.overdue {
  background: #ffebe7;
  color: #bb3c27;
}
.payment-exception {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 17px;
  border: 1px solid #f1c7bf;
  border-radius: 10px;
  background: #fff9f7;
}
.payment-exception strong,
.payment-exception small {
  display: block;
}
.payment-exception small {
  margin-top: 3px;
  color: #75827c;
  font-size: 9px;
}
.empty-admin {
  padding: 55px 20px;
  text-align: center;
}
.empty-admin > b {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  margin: auto;
  border-radius: 50%;
  background: #e8f8ee;
  color: #087d35;
}
.empty-admin h3 {
  margin: 14px 0 7px;
}
.empty-admin p {
  max-width: 590px;
  margin: auto;
  color: #66756e;
  font-size: 11px;
  line-height: 1.6;
}
.today-work-list { display: grid; gap: 8px; }
.today-work-list article { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid #dfe7e2; border-radius: 10px; background: #f8fbf9; }
.today-work-list article > span { padding: 5px 8px; border-radius: 12px; background: #e1f5e8; color: #087d35; font-size: 11px; font-weight: 800; }
.today-work-list article div { display: grid; gap: 3px; min-width: 0; }
.today-work-list strong, .today-work-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-work-list small, .today-work-more { color: #64736a; }
.today-work-list button { border: 0; background: transparent; color: #087d35; font-weight: 800; cursor: pointer; }
@media (max-width: 640px) { .today-work-list article { grid-template-columns: 1fr auto; } .today-work-list article > span { grid-column: 1 / -1; justify-self: start; } }
.opportunity-list article {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 17px 5px;
  border-bottom: 1px solid #edf1ef;
}
.opportunity-list article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #e9f8ef;
  color: #087d35;
  font-size: 10px;
  font-weight: 900;
}
.opportunity-list strong,
.opportunity-list small {
  display: block;
}
.opportunity-list strong {
  font-size: 12px;
}
.opportunity-list small {
  margin-top: 4px;
  color: #718079;
  font-size: 9px;
}
@media (max-width: 950px) {
  .admin-sidebar {
    width: 72px;
  }
  .admin-brand span,
  .admin-sidebar nav span,
  .admin-sidebar nav small,
  .admin-sidebar nav b,
  .admin-nav-group summary span,
  .admin-user div {
    display: none;
  }
  .admin-nav-group summary { justify-content: center; padding: 7px 0; }
  .admin-brand {
    padding-left: 0;
  }
  .admin-brand img {
    width: 42px;
  }
  .admin-user {
    justify-content: center;
  }
  .admin-workspace {
    margin-left: 72px;
  }
  .admin-dashboard-grid {
    grid-template-columns: 1fr;
  }
  .admin-metrics {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 650px) {
  .admin-sidebar {
    position: static;
    width: auto;
    height: auto;
    padding: 10px;
  }
  .admin-brand,
  .admin-user {
    display: none;
  }
  .admin-sidebar nav {
    display: flex;
    overflow-x: auto;
    overflow-y: visible;
    padding: 0;
  }
  .admin-nav-group { flex: 0 0 auto; border: 0; padding: 0; }
  .admin-nav-group summary { min-height: 38px; padding: 0 12px; border-radius: 8px; background: #ffffff0d; color: #d7e3de; font-size: 11px; letter-spacing: 0; text-transform: none; }
  .admin-nav-group summary span { display: block; }
  .admin-nav-group > div { position: fixed; z-index: 50; top: 58px; right: 10px; left: 10px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; padding: 10px; border-radius: 11px; background: #071923; box-shadow: 0 16px 35px #07192355; }
  .admin-nav-group:not([open]) > div { display: none; }
  .admin-sidebar nav button {
    display: flex;
    width: 100%;
    white-space: nowrap;
  }
  .admin-sidebar nav span {
    display: block;
  }
  .admin-workspace {
    margin-left: 0;
  }
  .admin-topbar {
    padding: 16px;
  }
  .admin-topbar h1 {
    font-size: 20px;
  }
  .admin-topbar .button {
    display: none;
  }
  .admin-view {
    padding: 16px;
  }
  .admin-metrics {
    grid-template-columns: 1fr 1fr;
  }
  .admin-stage-note {
    align-items: flex-start;
    flex-direction: column;
  }
  .admin-filters {
    grid-template-columns: 1fr;
  }
  .admin-table-wrap {
    overflow-x: auto;
  }
  .admin-table {
    min-width: 660px;
  }
  .payment-exception {
    grid-template-columns: auto 1fr;
  }
  .payment-exception .status,
  .payment-exception button {
    grid-column: 2;
  }
  .opportunity-list article {
    grid-template-columns: 32px 1fr;
  }
  .opportunity-list article .status,
  .opportunity-list article button {
    grid-column: 2;
  }
  .admin-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }
}
.member-editor {
  margin-top: 18px;
  padding: 22px;
  border: 1px solid #b9d9c4;
  border-radius: 13px;
  background: #fff;
}
.member-editor[hidden] {
  display: none;
}
.member-editor header,
.member-editor footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.member-editor header {
  padding-bottom: 18px;
  border-bottom: 1px solid #edf1ef;
}
.member-editor h2 {
  margin: 4px 0 2px;
}
.member-editor header p,
.member-editor footer span {
  margin: 0;
  color: #64736c;
  font-size: 12px;
}
.member-editor header button {
  border: 0;
  background: transparent;
  font-size: 27px;
  cursor: pointer;
}
.editor-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 20px 0;
}
.editor-fields label,
.profile-fields label {
  display: grid;
  gap: 7px;
  color: #415049;
  font-size: 12px;
  font-weight: 800;
}
.editor-fields input,
.editor-fields select,
.profile-fields input,
.profile-fields select,
.profile-fields textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #d7e1dc;
  border-radius: 8px;
  background: #fff;
  color: #16221c;
  font: inherit;
  font-size: 14px;
}
.editor-fields .check-field {
  display: flex;
  align-items: center;
  gap: 9px;
}
.editor-fields .check-field input {
  width: 18px;
  height: 18px;
}
.profile-app {
  min-height: 100vh;
  padding: 38px max(5vw, 20px) 60px;
  background: #f4f7f5;
}
.profile-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  max-width: 1180px;
  margin: 0 auto 22px;
}
.profile-heading h1 {
  margin: 5px 0;
  font-size: 38px;
}
.profile-heading p {
  margin: 0;
  color: #607068;
}
.profile-signout {
  color: #087d35;
  font-weight: 800;
}
.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  max-width: 1180px;
  margin: auto;
}
.profile-card {
  padding: 24px;
  border: 1px solid #dfe6e2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px #07192308;
}
.profile-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 19px;
  border-bottom: 1px solid #edf1ef;
}
.profile-card h2 {
  margin: 0;
  font-size: 21px;
}
.profile-card p {
  color: #65736c;
  font-size: 13px;
  line-height: 1.55;
}
.profile-card-head p {
  margin: 5px 0 0;
}
.profile-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 22px 0;
}
.profile-wide {
  grid-column: 1/-1;
}
.profile-fields input[readonly] {
  background: #f2f5f3;
  color: #738078;
}
.profile-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  padding-top: 18px;
  border-top: 1px solid #edf1ef;
}
.profile-actions span {
  margin-right: auto;
  color: #617068;
  font-size: 12px;
}
.membership-summary dl {
  margin: 16px 0;
}
.membership-summary dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #edf1ef;
}
.membership-summary dt {
  color: #63716a;
  font-size: 12px;
}
.membership-summary dd {
  margin: 0;
  font-size: 12px;
  font-weight: 900;
}
.membership-summary p {
  margin-bottom: 0;
}
.profile-payment { display: grid; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid #dfe7e2; }
.profile-payment h3 { margin: 0; color: #173f29; font-size: 16px; }
.profile-payment label { display: grid; gap: 5px; color: #33483a; font-size: 12px; font-weight: 800; }
.profile-payment select { width: 100%; padding: 10px; border: 1px solid #ccd8d0; border-radius: 8px; background: white; color: #173f29; font: inherit; }
.profile-payment small { color: #64736a; line-height: 1.45; }
.profile-payment small.error { color: #b42318; }
.referral-panel h4 { margin: 4px 0 0; color: #173f29; font-size: 15px; }
.send-points, .invite-points { display: grid; gap: 10px; padding: 16px 0; border-top: 1px solid #dfe7e2; }
.send-points p, .invite-points p { margin: 0; font-size: 13px; line-height: 1.45; }
.profile-payment input { width: 100%; padding: 10px; border: 1px solid #ccd8d0; border-radius: 8px; background: #fff; color: #173f29; font: inherit; }
.point-member-results { display: grid; max-height: 210px; overflow: auto; border: 1px solid #d7e2db; border-radius: 10px; background: #fff; }
.point-member-results button { display: grid; gap: 2px; padding: 11px 12px; border: 0; border-bottom: 1px solid #e4ebe6; background: #fff; color: #173f29; text-align: left; cursor: pointer; }
.point-member-results button:hover, .point-member-results button:focus { background: #edf8f1; }
.point-member-results button:last-child { border-bottom: 0; }
.point-member-results span { color: #64736a; font-size: 12px; }
.point-member-results > small { padding: 12px; }
.send-points-choice { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 11px 12px; border-radius: 9px; background: #edf8f1; }
.send-points-choice span { color: #64736a; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.send-points-choice strong { grid-column: 1; color: #173f29; }
.send-points-choice button { grid-column: 2; grid-row: 1 / span 2; border: 0; background: transparent; color: #087d35; font-weight: 800; cursor: pointer; }
.send-points-confirm { padding: 13px; border: 1px solid #9fd4b2; border-radius: 10px; background: #f0faf4; }
.send-points-confirm p { margin-bottom: 10px; color: #173f29; font-weight: 800; }
.send-points-confirm > div { display: flex; flex-wrap: wrap; gap: 8px; }
.send-points-confirm > div > button:not(.button) { border: 0; background: transparent; color: #516359; font-weight: 800; cursor: pointer; }
.points-history-title { margin-top: 4px !important; }

/* The homepage carries more content than the compact internal-page heroes.
   Give it enough room for both calls to action and the trust row. */
@media (min-width: 761px) {
  body .hero {
    height: 470px;
    min-height: 470px;
  }
  body .hero-visual {
    height: 470px;
    min-height: 470px;
  }
}
.database-state.connected {
  color: #087d35;
}
.database-state.error {
  color: #b33b2b;
}
@media (max-width: 800px) {
  .editor-fields {
    grid-template-columns: 1fr 1fr;
  }
  .profile-grid {
    grid-template-columns: 1fr;
  }
  .membership-summary {
    order: -1;
  }
}
@media (max-width: 560px) {
  .editor-fields,
  .profile-fields {
    grid-template-columns: 1fr;
  }
  .profile-wide {
    grid-column: auto;
  }
  .profile-heading {
    align-items: flex-start;
  }
  .profile-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .profile-actions .button {
    width: 100%;
  }
}

/* Backend administration requirements. */
.admin-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
  gap: 40px;
  align-items: center;
  padding: 55px max(5vw, 30px);
  color: #fff;
  background: linear-gradient(115deg, #06131f 0%, #09271f 72%, #0b5830 100%);
}
.admin-hero h1 {
  max-width: 780px;
  margin: 5px 0 14px;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.03;
  letter-spacing: -0.045em;
}
.admin-hero p {
  max-width: 720px;
  margin: 0;
  color: #c9d8d2;
  font-size: 17px;
  line-height: 1.6;
}
.admin-hero .eyebrow {
  color: #59e387;
}
.admin-hero aside {
  display: grid;
  gap: 10px;
  padding: 24px;
  border: 1px solid #ffffff26;
  border-radius: 14px;
  background: #ffffff0d;
}
.admin-hero aside strong {
  margin-bottom: 4px;
  color: #65ec91;
  font-size: 15px;
}
.admin-hero aside span {
  font-size: 13px;
  color: #e3eee9;
}
.admin-body {
  max-width: 1380px;
  margin: auto;
  padding: 28px 30px 60px;
}
.admin-summary {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 35px;
}
.admin-summary a {
  padding: 9px 14px;
  border: 1px solid #d9e3dd;
  border-radius: 999px;
  background: #fff;
  color: #087d35;
  font-size: 12px;
  font-weight: 800;
}
.admin-summary a:hover {
  background: #edf9f1;
}
.admin-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 24px;
}
.admin-heading h2 {
  margin: 4px 0 0;
  font-size: 32px;
  letter-spacing: -0.025em;
}
.admin-heading .eyebrow {
  margin: 0;
}
.admin-heading p {
  max-width: 610px;
  margin: 0;
  color: #5a6874;
  font-size: 13px;
  line-height: 1.55;
}
.admin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.admin-card {
  scroll-margin-top: 95px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(6, 19, 31, 0.045);
}
.admin-card-title {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid #e8eeea;
}
.admin-card-title span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 10px;
  background: #e9f8ef;
  color: #087d35;
  font-size: 12px;
  font-weight: 900;
}
.admin-card h3 {
  margin: 0;
  font-size: 17px;
}
.admin-card ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.admin-card li {
  position: relative;
  padding: 7px 0 7px 21px;
  color: #465563;
  font-size: 13px;
  line-height: 1.42;
}
.admin-card li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #11a64b;
  font-weight: 900;
}
.admin-next {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
  margin-top: 28px;
  padding: 30px;
  border-radius: 16px;
  background: #071923;
  color: #fff;
}
.admin-next .eyebrow {
  color: #55df83;
}
.admin-next h2 {
  margin: 5px 0 10px;
  font-size: 28px;
}
.admin-next p {
  margin: 0;
  color: #c7d5d3;
  line-height: 1.6;
}
.admin-next ol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.admin-next li {
  padding: 15px;
  border: 1px solid #ffffff1f;
  border-radius: 10px;
  background: #ffffff09;
}
.admin-next b,
.admin-next span {
  display: block;
}
.admin-next b {
  color: #58e188;
  font-size: 13px;
}
.admin-next span {
  margin-top: 4px;
  color: #d4dfdc;
  font-size: 11px;
  line-height: 1.4;
}
@media (max-width: 1000px) {
  .admin-grid {
    grid-template-columns: 1fr 1fr;
  }
  .admin-hero {
    grid-template-columns: 1fr;
  }
  .admin-hero aside {
    grid-template-columns: 1fr 1fr;
  }
  .admin-hero aside strong {
    grid-column: 1/-1;
  }
  .admin-next {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 650px) {
  .admin-hero {
    padding: 38px 20px;
  }
  .admin-hero aside,
  .admin-grid,
  .admin-next ol {
    grid-template-columns: 1fr;
  }
  .admin-hero aside strong {
    grid-column: auto;
  }
  .admin-body {
    padding: 22px 16px 45px;
  }
  .admin-heading {
    display: block;
  }
  .admin-heading p {
    margin-top: 12px;
  }
  .admin-card {
    padding: 19px;
  }
  .admin-next {
    padding: 22px;
  }
}
.admin-summary span {
  padding: 9px 14px;
  border: 1px solid #d9e3dd;
  border-radius: 999px;
  background: #fff;
  color: #087d35;
  font-size: 12px;
  font-weight: 800;
}
.opportunity-workflow {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 24px;
  padding: 26px;
  border: 1px solid #bfe8cc;
  border-radius: 16px;
  background: #effaf3;
}
.opportunity-workflow .eyebrow {
  margin: 0;
  color: #087d35;
}
.opportunity-workflow h2 {
  margin: 6px 0 8px;
  font-size: 26px;
}
.opportunity-workflow p {
  margin: 0;
  color: #4d5d68;
  font-size: 14px;
  line-height: 1.55;
}
.opportunity-workflow ol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.opportunity-workflow li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 13px;
  border-radius: 10px;
  background: #fff;
}
.opportunity-workflow li > b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  background: #0b9840;
  color: #fff;
  font-size: 11px;
}
.opportunity-workflow strong,
.opportunity-workflow li span {
  display: block;
}
.opportunity-workflow strong {
  margin-bottom: 3px;
  color: #102a1e;
  font-size: 13px;
}
.opportunity-workflow li span {
  color: #617067;
  font-size: 11px;
  line-height: 1.4;
}
@media (max-width: 760px) {
  .opportunity-workflow,
  .opportunity-workflow ol {
    grid-template-columns: 1fr;
  }
  .opportunity-workflow {
    padding: 20px;
  }
}
.opportunity-app {
  min-height: 100vh;
  padding: 34px;
  background: #f4f7f5;
}
.opportunity-app > .profile-heading,
.opportunity-app > .opportunity-workflow,
.opportunity-layout {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
.opportunity-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.7fr);
  gap: 20px;
  align-items: start;
}
.opportunity-form .profile-fields {
  padding-top: 22px;
}
.opportunity-form label small {
  display: block;
  margin-top: 6px;
  color: #718079;
  font-size: 11px;
}
.my-opportunities {
  padding: 22px;
  position: sticky;
  top: 20px;
}
.my-opportunities > h2 {
  margin: 0 0 17px;
}
.my-opportunity {
  padding: 16px 0;
  border-bottom: 1px solid #e4ebe7;
}
.my-opportunity:last-child {
  border: 0;
}
.my-opportunity strong,
.my-opportunity small {
  display: block;
}
.my-opportunity strong {
  margin: 8px 0 4px;
  font-size: 14px;
}
.my-opportunity small {
  color: #718079;
  font-size: 11px;
}
.my-opportunity p {
  padding: 10px;
  border-radius: 8px;
  background: #f2f7f4;
  font-size: 12px;
  line-height: 1.5;
}
.my-opportunity a,
.my-opportunity button {
  border: 0;
  background: transparent;
  color: #087d35;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  padding: 4px 8px 4px 0;
}
.status.submitted {
  background: #fff4dd;
  color: #a76613;
}
.status.needs_changes {
  background: #fff0ed;
  color: #b74731;
}
.status.approved {
  background: #e7f3ff;
  color: #1768a8;
}
.status.declined {
  background: #eef2f0;
  color: #64736c;
}
.status.published {
  background: #e4f8eb;
  color: #078238;
}
.opportunity-admin-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.2fr);
  gap: 20px;
  padding-top: 20px;
}
.opportunity-inbox {
  border: 1px solid #e1e8e4;
  border-radius: 11px;
  overflow: hidden;
}
.opportunity-inbox-row {
  display: grid;
  width: 100%;
  grid-template-columns: auto 1fr auto;
  gap: 6px 10px;
  padding: 16px;
  border: 0;
  border-bottom: 1px solid #e7eeea;
  background: #fff;
  text-align: left;
  cursor: pointer;
}
.opportunity-inbox-row:hover {
  background: #f5faf7;
}
.opportunity-inbox-row strong {
  font-size: 13px;
}
.opportunity-inbox-row small {
  grid-column: 2;
  color: #718079;
}
.opportunity-inbox-row time {
  grid-column: 3;
  grid-row: 1/3;
  color: #718079;
  font-size: 10px;
}
.opportunity-review {
  padding: 20px;
  border: 1px solid #bfe8cc;
  border-radius: 12px;
  background: #f8fcf9;
}
.opportunity-review header h3 {
  margin: 6px 0;
}
.opportunity-review header p,
.review-note {
  color: #718079;
  font-size: 11px;
}
.opportunity-review > label {
  display: block;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 800;
}
.opportunity-review input,
.opportunity-review textarea {
  box-sizing: border-box;
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  border: 1px solid #d7e1dc;
  border-radius: 8px;
  background: #fff;
  font: inherit;
}
.audience-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.audience-checks span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
}
.audience-checks input {
  width: auto;
  margin: 0;
}
.review-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.review-dates label {
  font-size: 11px;
  font-weight: 800;
}
.review-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 16px 0;
}
.review-summary div {
  padding: 9px;
  border-radius: 8px;
  background: #fff;
}
.review-summary dt {
  color: #718079;
  font-size: 9px;
  text-transform: uppercase;
}
.review-summary dd {
  margin: 3px 0 0;
  font-size: 11px;
}
.opportunity-review [data-review-details] > p {
  font-size: 12px;
  line-height: 1.55;
}
.file-link {
  display: inline-block;
  margin-left: 14px;
}
.review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 16px 0;
}
.review-actions button {
  padding: 9px 11px;
  border: 1px solid #cfdad4;
  border-radius: 7px;
  background: #fff;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.review-actions .button {
  border-color: #0b9840;
  background: #0b9840;
  color: #fff;
}
.error {
  color: #b74731;
}
@media (max-width: 850px) {
  .opportunity-layout,
  .opportunity-admin-grid {
    grid-template-columns: 1fr;
  }
  .my-opportunities {
    position: static;
  }
  .opportunity-app {
    padding: 18px;
  }
  .review-dates {
    grid-template-columns: 1fr;
  }
}
.role-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 20px 0;
}
.role-cards article {
  padding: 14px;
  border: 1px solid #dfe7e2;
  border-radius: 10px;
  background: #f8fbf9;
}
.role-cards strong,
.role-cards span {
  display: block;
}
.role-cards strong {
  font-size: 12px;
}
.role-cards span {
  margin-top: 6px;
  color: #697870;
  font-size: 9px;
  text-transform: capitalize;
}
.admin-access-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: end;
  padding: 17px;
  border-radius: 11px;
  background: #eaf9ef;
}
.admin-access-form label {
  font-size: 10px;
  font-weight: 800;
}
.admin-access-form select {
  box-sizing: border-box;
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  border: 1px solid #cfe0d5;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 11px;
}
.admin-access-form > span {
  grid-column: 1/-1;
  color: #587066;
  font-size: 10px;
}
.admin-access-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  margin-top: 24px;
}
.admin-access-grid h3 {
  font-size: 14px;
}
.admin-assignment {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid #e7ede9;
}
.admin-assignment strong,
.admin-assignment small {
  display: block;
}
.admin-assignment strong {
  font-size: 12px;
}
.admin-assignment small {
  margin-top: 3px;
  color: #718079;
  font-size: 9px;
}
.admin-assignment button {
  border: 0;
  background: transparent;
  color: #087d35;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.audit-list article {
  padding: 11px 0;
  border-bottom: 1px solid #e7ede9;
}
.audit-list strong,
.audit-list small {
  display: block;
}
.audit-list strong {
  font-size: 11px;
}
.audit-list small {
  margin-top: 4px;
  color: #718079;
  font-size: 9px;
}
@media (max-width: 900px) {
  .role-cards {
    grid-template-columns: 1fr 1fr;
  }
  .admin-access-grid {
    grid-template-columns: 1fr;
  }
  .admin-access-form {
    grid-template-columns: 1fr;
  }
}
.live-vote-card {
  margin-bottom: 14px;
}
.live-vote-card > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.points-pill {
  padding: 6px 9px;
  border-radius: 15px;
  background: #fff4d9;
  color: #95610d;
  font-size: 10px;
  font-weight: 800;
}
.live-vote-card > small {
  color: #718079;
}
.vote-confirmed {
  margin-top: 15px;
  padding: 11px;
  border-radius: 8px;
  background: #e7f8ed;
  color: #087d35;
  font-size: 12px;
  font-weight: 800;
}
.vote-result {
  margin-top: 15px;
}
.vote-result b,
.vote-result small {
  display: block;
  font-size: 11px;
}
.vote-result .bar {
  height: 8px;
  margin: 7px 0;
  border-radius: 4px;
  background: #e3e9e5;
  overflow: hidden;
}
.vote-result .bar i {
  display: block;
  height: 100%;
  background: #0b9840;
}
.status.open {
  background: #e4f8eb;
  color: #078238;
}
.status.closed {
  background: #e9eef3;
  color: #53635b;
}
.status.draft,
.status.scheduled {
  background: #fff4dd;
  color: #a76613;
}
.vote-admin-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.75fr) minmax(420px, 1.25fr);
  gap: 25px;
  margin-top: 20px;
}
.vote-admin-form {
  padding: 18px;
  border-radius: 11px;
  background: #f2f8f4;
}
.vote-admin-form > label,
.vote-admin-form > div label {
  display: block;
  margin-bottom: 12px;
  font-size: 10px;
  font-weight: 800;
}
.vote-admin-form > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.vote-admin-form input,
.vote-admin-form textarea,
.vote-admin-form select {
  box-sizing: border-box;
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  border: 1px solid #d4dfd9;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 11px;
}
.vote-admin-form > span {
  display: block;
  margin-top: 9px;
  font-size: 10px;
}
.admin-vote-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #e5ebe7;
}
.admin-vote-row strong,
.admin-vote-row small {
  display: block;
}
.admin-vote-row strong {
  margin: 6px 0;
  font-size: 12px;
}
.admin-vote-row small {
  color: #718079;
  font-size: 9px;
}
.admin-vote-row > div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}
.admin-vote-row button {
  padding: 6px 8px;
  border: 1px solid #d8e1dc;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 9px;
  text-transform: capitalize;
  cursor: pointer;
}
.admin-vote-row button:disabled {
  background: #0b9840;
  color: #fff;
  opacity: 1;
}
@media (max-width: 850px) {
  .vote-admin-layout {
    grid-template-columns: 1fr;
  }
  .vote-admin-form > div {
    grid-template-columns: 1fr;
  }
  .admin-vote-row {
    grid-template-columns: 1fr;
  }
  .admin-vote-row > div:last-child {
    justify-content: flex-start;
  }
}
.payment-rule-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 18px 0;
}
.payment-rule-grid article {
  padding: 16px;
  border: 1px solid #dfe6e2;
  border-radius: 10px;
  background: #f8faf9;
}
.payment-rule-grid strong,
.payment-rule-grid span,
.payment-rule-grid small {
  display: block;
}
.payment-rule-grid strong {
  font-size: 12px;
}
.payment-rule-grid span {
  margin: 8px 0 4px;
  color: #087d35;
  font-size: 20px;
  font-weight: 900;
}
.payment-rule-grid small {
  color: #66756e;
  font-size: 10px;
}
@media (max-width: 700px) {
  .payment-rule-grid {
    grid-template-columns: 1fr;
  }
}
.proposal-hub {
  min-height: 100vh;
  padding: 34px;
  background: #f4f7f5;
}
.proposal-hub > .profile-heading,
.proposal-hub-grid {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
.proposal-hub-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 22px;
  align-items: start;
}
.proposal-form {
  display: grid;
  gap: 12px;
  padding: 22px;
  position: sticky;
  top: 18px;
}
.proposal-form h2 {
  margin: 0;
}
.proposal-form label {
  font-size: 11px;
  font-weight: 800;
}
.proposal-form input,
.proposal-form textarea,
.proposal-form select {
  box-sizing: border-box;
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  border: 1px solid #d8e2dd;
  border-radius: 8px;
  font: inherit;
}
.proposal-feed-head p {
  color: #687770;
  font-size: 12px;
}
.suggestion-card {
  margin-bottom: 14px;
  padding: 20px;
  border: 1px solid #dfe6e2;
  border-radius: 13px;
  background: #fff;
}
.suggestion-card > div:first-child {
  display: flex;
  justify-content: space-between;
}
.suggestion-card h3 {
  margin: 12px 0 4px;
}
.suggestion-card > small {
  color: #718079;
}
.suggestion-card > p {
  font-size: 13px;
  line-height: 1.55;
}
.suggestion-card > button {
  padding: 9px 12px;
  border: 0;
  border-radius: 7px;
  background: #0b9840;
  color: #fff;
  font-weight: 800;
}
.suggestion-card > button:disabled {
  background: #dce7e0;
  color: #64736c;
}
.suggestion-card form {
  display: flex;
  gap: 7px;
  margin-top: 14px;
}
.suggestion-card form input {
  flex: 1;
  padding: 9px;
  border: 1px solid #d9e2dd;
  border-radius: 7px;
}
.suggestion-card form button {
  border: 0;
  border-radius: 7px;
  background: #071923;
  color: #fff;
}
.suggestion-comments p {
  padding: 9px;
  border-radius: 7px;
  background: #f4f7f5;
  font-size: 11px;
}
.admin-message {
  padding: 10px;
  background: #eaf9ef;
}
.admin-suggestion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 20px;
}
.admin-suggestion {
  padding: 17px;
  border: 1px solid #dfe6e2;
  border-radius: 10px;
}
.admin-suggestion h3 {
  margin: 8px 0 4px;
}
.admin-suggestion small {
  color: #718079;
}
.admin-suggestion > p {
  font-size: 12px;
}
.admin-suggestion textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 9px;
  border: 1px solid #d9e2dd;
  border-radius: 7px;
}
.admin-suggestion select {
  margin: 9px 0;
  padding: 8px;
}
.admin-suggestion button {
  margin: 3px;
  padding: 7px;
  border: 1px solid #d3ddd7;
  border-radius: 6px;
  background: #fff;
  font-size: 9px;
  text-transform: capitalize;
}
@media (max-width: 850px) {
  .proposal-hub-grid,
  .admin-suggestion-grid {
    grid-template-columns: 1fr;
  }
  .proposal-form {
    position: static;
  }
  .proposal-hub {
    padding: 18px;
  }
}
.main-nav [data-opportunity-nav] {
  display: none;
}
.member-actions {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #dfe6e2;
}
.member-actions h3 {
  margin: 6px 0 10px;
}
.member-actions > a {
  display: block;
  margin-top: 9px;
  padding: 13px;
  border: 1px solid #cfe3d6;
  border-radius: 9px;
  background: #f2faf5;
  color: #13201a;
  text-decoration: none;
}
.member-actions > a:hover {
  border-color: #0b9840;
}
.member-actions b,
.member-actions small {
  display: block;
}
.member-actions b {
  font-size: 12px;
}
.member-actions small,
.member-actions p {
  margin-top: 4px;
  color: #65736c;
  font-size: 10px;
  line-height: 1.45;
}
.member-actions p {
  padding: 10px;
  border-radius: 8px;
  background: #f5f7f6;
}
.directory-app {
  min-height: 100vh;
  padding: 34px;
  background: #f4f7f5;
}
.directory-heading,
.directory-toolbar,
.directory-count,
.directory-grid,
.directory-privacy {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
.directory-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 24px;
}
.directory-heading h1 {
  margin: 5px 0 7px;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.04em;
}
.directory-heading p {
  margin: 0;
  color: #607069;
}
.directory-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) minmax(180px, 0.7fr) minmax(
      180px,
      0.7fr
    );
  gap: 12px;
  padding: 18px;
  border: 1px solid #dce7e0;
  border-radius: 14px;
  background: #fff;
}
.directory-toolbar label > span {
  display: block;
  margin-bottom: 7px;
  color: #506159;
  font-size: 12px;
  font-weight: 800;
}
.directory-toolbar input,
.directory-toolbar select {
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  border: 1px solid #ccd9d1;
  border-radius: 9px;
  background: #fff;
  font: inherit;
  font-size: 14px;
}
.directory-count {
  padding: 18px 2px 10px;
  color: #53635b;
  font-size: 13px;
  font-weight: 800;
}
.directory-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.directory-card {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 15px;
  align-items: start;
  padding: 19px;
  border: 1px solid #dce6e0;
  border-radius: 14px;
  background: #fff;
}
.directory-avatar {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, #0c3d28, #11a64b);
  color: #fff;
  font-size: 19px;
  font-weight: 900;
}
.directory-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.directory-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.directory-name h2 {
  margin: 0;
  font-size: 18px;
}
.directory-name b {
  padding: 4px 7px;
  border-radius: 999px;
  background: #fff1c8;
  color: #8b6410;
  font-size: 9px;
}
.directory-name b.me {
  background: #e5f7eb;
  color: #087d35;
}
.directory-card-copy > p {
  margin: 6px 0;
  color: #5f6e67;
  font-size: 13px;
}
.directory-card-copy > small {
  color: #087d35;
  font-weight: 800;
}
.directory-card > button {
  border: 0;
  background: transparent;
  color: #087d35;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}
.directory-details {
  display: none;
  grid-column: 1/-1;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5ece8;
}
.directory-card.expanded {
  grid-column: 1/-1;
}
.directory-card.expanded .directory-details {
  display: block;
}
.directory-details h3 {
  margin: 0 0 5px;
  font-size: 12px;
}
.directory-details p {
  margin: 0 0 7px;
  color: #53635b;
  font-size: 12px;
  line-height: 1.55;
}
.directory-details span {
  color: #087d35;
  font-size: 11px;
  font-weight: 800;
}
.directory-empty {
  grid-column: 1/-1;
}
.directory-privacy {
  margin-top: 22px;
  padding: 14px;
  border-radius: 10px;
  background: #e9f7ee;
  color: #345443;
  font-size: 12px;
  text-align: center;
}
@media (max-width: 760px) {
  .directory-app {
    padding: 20px 16px;
  }
  .directory-heading {
    align-items: flex-start;
  }
  .directory-toolbar,
  .directory-grid {
    grid-template-columns: 1fr;
  }
  .directory-card {
    grid-template-columns: 54px 1fr;
  }
  .directory-avatar {
    width: 54px;
    height: 54px;
  }
  .directory-card > button {
    grid-column: 2;
    justify-self: start;
  }
  .directory-card.expanded {
    grid-column: auto;
  }
}
.live-event-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.live-event-card {
  padding: 20px;
  border: 1px solid #dfe7e2;
  border-radius: 14px;
  background: #fff;
}
.live-event-card.featured {
  border-color: #efc86f;
  box-shadow: inset 0 4px #e8b43c;
}
.live-event-card > div:first-child {
  display: flex;
  justify-content: space-between;
}
.live-event-card > div:first-child span,
.live-event-card > div:first-child b {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.live-event-card > div:first-child span {
  color: #087d35;
  font-weight: 900;
}
.live-event-card > div:first-child b {
  color: #9a670e;
}
.live-event-card h3 {
  margin: 12px 0 7px;
  font-size: 20px;
}
.live-event-card > p {
  min-height: 58px;
  color: #5b6b63;
  font-size: 13px;
  line-height: 1.5;
}
.live-event-card dl {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}
.live-event-card dl div {
  display: grid;
  grid-template-columns: 55px 1fr;
}
.live-event-card dt {
  color: #718078;
  font-size: 10px;
  text-transform: uppercase;
}
.live-event-card dd {
  margin: 0;
  font-size: 12px;
}
.event-admin-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) minmax(440px, 1.3fr);
  gap: 18px;
  margin-top: 20px;
}
.event-admin-inbox {
  border: 1px solid #dfe7e2;
  border-radius: 10px;
  overflow: hidden;
}
.event-admin-row {
  display: grid;
  width: 100%;
  gap: 5px;
  padding: 15px;
  border: 0;
  border-bottom: 1px solid #e5ebe7;
  background: #fff;
  text-align: left;
  cursor: pointer;
}
.event-admin-row:hover {
  background: #f5faf7;
}
.event-admin-row strong {
  font-size: 13px;
}
.event-admin-row small {
  color: #718078;
  font-size: 10px;
}
.event-review {
  padding: 19px;
  border: 1px solid #cfe2d5;
  border-radius: 11px;
  background: #f8fcf9;
}
.event-review h3 {
  margin-top: 0;
}
.event-review-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.event-review-fields label {
  font-size: 10px;
  font-weight: 800;
}
.event-review-fields .wide {
  grid-column: 1/-1;
}
.event-review-fields input,
.event-review-fields select,
.event-review-fields textarea {
  box-sizing: border-box;
  width: 100%;
  margin-top: 5px;
  padding: 9px;
  border: 1px solid #d4ded8;
  border-radius: 7px;
  background: #fff;
  font: inherit;
  font-size: 11px;
}
.event-review-fields .check-field {
  display: flex;
  align-items: center;
  gap: 7px;
}
.event-review-fields .check-field input {
  width: auto;
  margin: 0;
}
@media (max-width: 900px) {
  .live-event-grid,
  .event-admin-layout {
    grid-template-columns: 1fr;
  }
  .event-review-fields {
    grid-template-columns: 1fr;
  }
  .event-review-fields .wide {
    grid-column: auto;
  }
}

/* Final hero-panel placement: cover the legacy artwork panel with one live panel. */
@media (min-width: 761px) {
  body .home-member-data {
    top: 12px;
    right: 2.5%;
    width: 250px;
    height: 266px;
    transform: none;
    box-sizing: border-box;
    background: #06131f;
  }
  body .live-hero-data {
    position: absolute;
    top: 12px;
    right: 2.5%;
    width: 240px;
    height: calc(100% - 12px);
    min-height: 0;
    box-sizing: border-box;
    background: #06131f;
  }
}
@media (max-width: 760px) {
  body .home-member-data {
    top: 10px;
    right: 8px;
    width: 168px;
    height: calc(100% - 20px);
    transform: none;
    box-sizing: border-box;
    background: #06131f;
  }
  body .home-member-data > div {
    padding: 5px 0;
  }
  body .live-hero-data {
    position: absolute;
    top: 12px;
    right: 8px;
    width: 168px;
    height: calc(100% - 24px);
    min-height: 0;
    padding: 12px;
    box-sizing: border-box;
    background: #06131f;
  }
  body .live-hero-data > b {
    font-size: 14px;
  }
  body .live-hero-data > span {
    padding: 6px 0;
  }
  body .live-hero-data > span strong {
    font-size: 15px;
  }
}

.registration-roadmap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 24px;
}
.registration-roadmap > div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dbe6e0;
  border-radius: 10px;
  background: #f6f9f7;
}
.registration-roadmap b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #dfe8e3;
}
.registration-roadmap .active { border-color: #0aa653; background: #edfff4; }
.registration-roadmap .active b { background: #078841; color: #fff; }
.registration-roadmap span { display: grid; gap: 2px; }
.registration-roadmap strong { font-size: 14px; }
.registration-roadmap small { font-size: 12px; color: #65756d; }
.registration-monitor { margin: 28px 0; padding: 22px; border: 1px solid #dce5e0; border-radius: 14px; background: #f8fbf9; }
.registration-monitor > header { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.registration-monitor h3 { margin: 4px 0; font-size: 24px; }
.registration-monitor p { margin: 0; color: #607068; }
.registration-monitor-summary { display: flex; gap: 8px; flex-wrap: wrap; }
.registration-monitor-summary span { padding: 9px 11px; border-radius: 9px; background: #fff; border: 1px solid #dce5e0; font-size: 13px; }
.registration-monitor-summary b { color: #078841; }
.registration-monitor td small { display: block; margin-top: 5px; color: #66756e; line-height: 1.4; }
.journey-complete { color: #078841; }
.journey-waiting_for_paypal { color: #8a6500; }
.journey-payment_not_started, .journey-needs_attention { color: #a23a2a; }
@media (max-width: 650px) {
  .registration-roadmap { grid-template-columns: 1fr; }
  .registration-roadmap > div { padding: 10px; }
  .registration-monitor { padding: 16px; }
  .registration-monitor > header { align-items: start; flex-direction: column; }
}
.member-tool-offers{margin:40px 0;scroll-margin-top:110px}.member-tool-offer{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;padding:28px;background:#f0f8f2;border:1px solid #bcdac6;border-radius:16px}.member-tool-offer h3{font-size:26px;margin:16px 0 12px}.member-tool-offer p{line-height:1.6}.member-tool-action{align-self:center}.member-tool-action .button{display:inline-flex;text-align:center;justify-content:center}.member-tool-action p{font-size:14px;margin-top:16px}@media(max-width:650px){.member-tool-offer{grid-template-columns:1fr;padding:20px;gap:12px}.member-tool-action .button{width:100%}}