:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #15251d;
  background: #f4f7f4;
  --green: #12633f;
  --green-dark: #0b432b;
  --green-soft: #eaf5ee;
  --line: #dfe7e2;
  --muted: #68766e;
  --surface: #ffffff;
  --shadow: 0 12px 40px rgba(25, 62, 42, .08);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, #eef7f1 0, #f7f9f7 320px, #f4f6f4 100%); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  min-height: 66px; padding: 0 24px;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 800; }
.brandMark {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 12px; background: var(--green); color: #fff;
  letter-spacing: -.04em;
}
.topActions { display: flex; align-items: center; gap: 10px; }
.signedIn { color: var(--muted); font-size: 13px; }
.page { width: min(1180px, calc(100% - 28px)); margin: 28px auto 80px; }
.loginPanel {
  min-height: calc(100vh - 150px);
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 28px; align-items: stretch;
}
.loginArtwork, .loginCard {
  border-radius: 28px; overflow: hidden; box-shadow: var(--shadow);
}
.loginArtwork {
  padding: 54px; color: white; display: flex; flex-direction: column; justify-content: center;
  background:
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.2), transparent 28%),
    linear-gradient(135deg, #0b432b, #168253 62%, #23a866);
}
.loginArtwork h1 { margin: 18px 0 14px; max-width: 620px; font-size: clamp(38px, 6vw, 72px); line-height: .98; letter-spacing: -.05em; }
.loginArtwork p { max-width: 620px; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.88); }
.sportOrb { font-size: 56px; }
.sportStrip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.sportStrip span { padding: 9px 13px; border-radius: 999px; background: rgba(255,255,255,.13); }
.loginCard { padding: 46px; background: white; align-self: center; }
.loginCard h2 { margin: 6px 0 12px; font-size: 34px; }
.eyebrow { margin: 0 0 6px; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 800; color: var(--green); }
.muted, .status { color: var(--muted); }
.status { min-height: 22px; margin: 12px 0 0; }
.textButton {
  border: 0; background: transparent; color: var(--green-dark); font-weight: 700; padding: 9px 10px;
}
.primaryButton, .secondaryButton, .uploadButton {
  border: 0; border-radius: 12px; padding: 11px 16px; font-weight: 800; transition: transform .15s ease, opacity .15s ease;
}
.primaryButton { background: var(--green); color: white; }
.secondaryButton { background: var(--green-soft); color: var(--green-dark); }
.primaryButton:hover, .secondaryButton:hover, .uploadButton:hover { transform: translateY(-1px); }
.bigButton { padding: 14px 22px; font-size: 16px; }
.setupShell { width: min(900px, 100%); margin: 0 auto; }
.setupIntro {
  padding: 34px; border-radius: 24px; margin-bottom: 18px;
  background: linear-gradient(135deg, #ffffff, #edf8f1);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.setupIntro h1 { margin: 4px 0 10px; font-size: clamp(34px, 5vw, 54px); letter-spacing: -.04em; }
.setupProgress { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.setupProgress span { padding: 8px 11px; border-radius: 999px; background: white; border: 1px solid var(--line); font-size: 12px; font-weight: 700; }
.setupCard {
  display: grid; grid-template-columns: 52px 1fr; gap: 20px;
  padding: 24px; margin: 16px 0; border-radius: 22px; background: white;
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.stepNumber {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 14px; background: var(--green); color: white; font-weight: 900;
}
.stepContent h2 { margin: 4px 0 8px; }
.stack { display: grid; gap: 14px; }
.stack label, .filterLabel { display: grid; gap: 6px; font-weight: 700; }
input, textarea, select {
  width: 100%; border: 1px solid #cfdad3; border-radius: 12px;
  padding: 11px 12px; background: white; color: inherit; outline: none;
}
input:focus, textarea:focus, select:focus { border-color: #5a9c77; box-shadow: 0 0 0 3px rgba(18,99,63,.1); }
textarea { min-height: 120px; resize: vertical; }
.toggleRow { display: grid; gap: 9px; }
.toggleLabel { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 9px !important; font-weight: 600 !important; }
.toggleLabel input { width: 17px; height: 17px; }
.toggleLabel.compact { white-space: nowrap; }
.mediaSetupGrid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 28px; margin-top: 18px; }
.profilePreview {
  width: 132px; height: 132px; border-radius: 50%; overflow: hidden;
  background: #edf2ee; border: 5px solid white; box-shadow: 0 0 0 1px var(--line);
  display: grid; place-items: center; font-size: 38px; font-weight: 900;
}
.profilePreview img { width: 100%; height: 100%; object-fit: cover; }
.uploadButton { display: inline-block; margin-top: 12px; background: #edf5f0; color: var(--green-dark); }
.uploadButton input, .filePill input { display: none; }
.coverThumbs { min-height: 116px; display: flex; flex-wrap: wrap; gap: 10px; }
.coverThumb { position: relative; width: 150px; height: 92px; border-radius: 12px; overflow: hidden; background: #e9efeb; }
.coverThumb img { width: 100%; height: 100%; object-fit: cover; }
.coverThumb button { position: absolute; top: 6px; right: 6px; border: 0; border-radius: 999px; background: rgba(0,0,0,.64); color: #fff; width: 26px; height: 26px; }
.inlineForm { display: flex; gap: 9px; align-items: center; }
.inlineForm input { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { padding: 8px 12px; border-radius: 999px; background: var(--green-soft); color: var(--green-dark); font-weight: 800; font-size: 13px; }
.launchCard { border-color: #b9dbc7; background: linear-gradient(135deg, #fff, #f1fbf5); }
.launchActions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.profileHero {
  overflow: hidden; border-radius: 24px; background: white; border: 1px solid var(--line);
  box-shadow: var(--shadow); margin-bottom: 20px;
}
.coverStage { position: relative; height: clamp(220px, 34vw, 390px); background: linear-gradient(135deg, #0b432b, #2ca56a); overflow: hidden; }
.coverStage img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease; }
.coverShade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.36)); pointer-events: none; }
.profileBar { display: flex; gap: 22px; align-items: flex-start; padding: 0 28px 26px; }
.profileAvatar {
  width: 156px; height: 156px; margin-top: -66px; z-index: 2;
  border-radius: 50%; overflow: hidden; background: #dfe9e2; border: 6px solid white;
  box-shadow: 0 8px 26px rgba(0,0,0,.15); display: grid; place-items: center;
  font-size: 44px; font-weight: 900;
}
.profileAvatar img, .miniAvatar img { width: 100%; height: 100%; object-fit: cover; }
.profileCopy { padding-top: 18px; }
.profileCopy h1 { margin: 0; font-size: clamp(30px, 5vw, 46px); letter-spacing: -.04em; }
.profileCopy h2 { margin: 4px 0; font-size: 18px; color: #34443a; font-weight: 700; }
.tagline { margin: 8px 0 4px; font-weight: 800; color: var(--green); }
.bio { max-width: 780px; color: #536159; line-height: 1.55; }
.contentGrid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: start; }
.sidebar { position: sticky; top: 86px; display: grid; gap: 14px; }
.sideCard, .composer, .feedToolbar, .post {
  background: white; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 8px 28px rgba(25,62,42,.05);
}
.sideCard { padding: 18px; }
.sideCard h3 { margin: 0 0 10px; }
.sportNav { display: grid; gap: 7px; }
.sportNav button {
  text-align: left; border: 0; border-radius: 10px; padding: 10px 11px; background: transparent; color: #304139; font-weight: 700;
}
.sportNav button.active, .sportNav button:hover { background: var(--green-soft); color: var(--green-dark); }
.feedColumn { min-width: 0; }
.composer { padding: 18px; margin-bottom: 16px; }
.composerHeader { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.miniAvatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: #e5ece7; display: grid; place-items: center; font-weight: 900; }
.composerOptions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.composerOptions label:first-child { min-width: 180px; flex: 1; }
.filePill { padding: 10px 12px; border-radius: 999px; background: #f1f5f2; font-weight: 800; cursor: pointer; }
.subtleForm { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.feedToolbar {
  display: flex; justify-content: space-between; gap: 14px; align-items: end;
  padding: 16px 18px; margin-bottom: 12px;
}
.feedToolbar h2 { margin: 0; }
.filterLabel { min-width: 170px; font-size: 12px; color: var(--muted); }
.timeline { display: grid; gap: 12px; }
.post { padding: 18px; }
.postMeta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.categoryBadge { padding: 5px 8px; border-radius: 999px; background: var(--green-soft); color: var(--green-dark); font-weight: 800; }
.post h3 { margin: 12px 0 7px; font-size: 22px; }
.postBody { white-space: pre-wrap; line-height: 1.6; }
.photo { width: 100%; max-height: 620px; object-fit: contain; border-radius: 14px; background: #edf1ee; margin-top: 12px; }
.comments { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); }
.comment { padding: 9px 11px; border-radius: 11px; background: #f5f7f5; margin: 7px 0; }
.commentForm { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }
.commentForm button { border: 0; border-radius: 10px; background: var(--green); color: white; padding: 0 15px; font-weight: 800; }
.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  max-width: min(420px, calc(100% - 40px)); padding: 12px 16px; border-radius: 13px;
  background: #14251c; color: white; box-shadow: 0 12px 34px rgba(0,0,0,.2);
}
.dev { display: flex; gap: 8px; margin-top: 14px; }
.dev button { border: 0; border-radius: 10px; padding: 9px 11px; }
@media (max-width: 860px) {
  .loginPanel { grid-template-columns: 1fr; }
  .loginArtwork { min-height: 360px; padding: 34px; }
  .contentGrid { grid-template-columns: 1fr; }
  .sidebar { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .page { width: min(100% - 16px, 1180px); margin-top: 12px; }
  .topbar { padding: 0 12px; }
  .signedIn { display: none !important; }
  .loginArtwork, .loginCard { border-radius: 20px; }
  .loginCard { padding: 26px; }
  .setupCard { grid-template-columns: 1fr; padding: 18px; }
  .mediaSetupGrid { grid-template-columns: 1fr; }
  .profileBar { padding: 0 16px 20px; gap: 14px; }
  .profileAvatar { width: 108px; height: 108px; margin-top: -46px; border-width: 4px; }
  .profileCopy { padding-top: 12px; }
  .sidebar { grid-template-columns: 1fr; }
  .feedToolbar { align-items: stretch; flex-direction: column; }
  .composerOptions { align-items: stretch; }
  .commentForm { grid-template-columns: 1fr; }
}

.composerHeading { flex: 1; }
.composerTabs { display: flex; gap: 7px; margin-top: 8px; }
.composerTab {
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px;
  background: white; color: var(--green-dark); font-weight: 800;
}
.composerTab.active { background: var(--green); color: white; border-color: var(--green); }
.builderHeader { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.formFieldBuilder { display: grid; gap: 10px; }
.builderField {
  display: grid; grid-template-columns: minmax(0,1.4fr) minmax(130px,.7fr) auto auto;
  gap: 8px; align-items: center; padding: 11px; border: 1px solid var(--line);
  border-radius: 12px; background: #f8faf8;
}
.builderField .optionsInput { grid-column: 1 / -1; }
.removeFieldButton {
  border: 0; border-radius: 999px; width: 32px; height: 32px;
  background: #f6e8e8; color: #8a2323; font-weight: 900;
}
.registrationBox {
  margin-top: 14px; padding: 14px; border-radius: 14px;
  border: 1px solid #b9dbc7; background: linear-gradient(135deg,#f6fcf8,#edf8f1);
}
.registrationStatus { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.registrationStatus.open { background: #dff4e6; color: #0b5d35; }
.registrationStatus.closed { background: #eceeed; color: #58625c; }
.registrationActions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.inlineRegistrationForm { display: grid; gap: 11px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #cfe1d5; }
.radioOptions { display: grid; gap: 7px; }
.radioOptions label { display: flex; gap: 7px; align-items: center; font-weight: 500; }
.radioOptions input { width: auto; }
.responsePanel { margin-top: 12px; overflow-x: auto; }
.responseTable { width: 100%; border-collapse: collapse; font-size: 13px; }
.responseTable th, .responseTable td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.responseTable th { background: #f5f8f6; }
@media (max-width: 620px) {
  .builderField { grid-template-columns: 1fr; }
  .builderField .optionsInput { grid-column: auto; }
}

.pollOptionBuilder { display: grid; gap: 8px; }
.pollOptionRow { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.pollOptionRow input { margin: 0; }
.pollBox {
  margin-top: 14px; padding: 14px; border-radius: 14px;
  border: 1px solid #c6d8cd; background: linear-gradient(135deg,#fbfdfb,#f1f7f3);
}
.pollChoices { display: grid; gap: 9px; margin-top: 12px; }
.pollChoiceButton {
  position: relative; overflow: hidden; text-align: left; width: 100%;
  border: 1px solid var(--line); border-radius: 12px; background: white;
  padding: 12px; color: inherit; font-weight: 700;
}
.pollChoiceButton:hover { border-color: #91bea5; }
.pollChoiceButton:disabled { cursor: default; opacity: 1; }
.pollChoiceButton.selected { border-color: var(--green); box-shadow: 0 0 0 2px rgba(18,99,63,.08); }
.pollChoiceFill {
  position: absolute; inset: 0 auto 0 0; background: #e1f2e7; z-index: 0;
}
.pollChoiceContent {
  position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 10px;
}
.pollMeta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; color: var(--muted); font-size: 13px; }

.messageBadge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  margin-left: 4px; padding: 0 6px; border-radius: 999px; background: #b42318; color: white;
  font-size: 11px; font-weight: 900;
}
.messagesShell { width: min(1040px, 100%); margin: 0 auto; }
.messagesHeader {
  display: flex; justify-content: space-between; align-items: end; gap: 16px;
  margin-bottom: 16px;
}
.messagesHeader h1 { margin: 0; }
.messagesGrid {
  min-height: 620px; display: grid; grid-template-columns: 310px minmax(0,1fr);
  border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  background: white; box-shadow: var(--shadow);
}
.conversationListPane { padding: 16px; border-right: 1px solid var(--line); background: #f8faf8; }
.conversationListPane h3 { margin: 4px 0 12px; }
.conversationList { display: grid; gap: 8px; }
.conversationCard {
  width: 100%; text-align: left; border: 1px solid transparent; border-radius: 13px;
  padding: 11px; background: white; color: inherit;
}
.conversationCard:hover, .conversationCard.active { border-color: #a8cbb6; background: #f0f8f3; }
.conversationTop { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.conversationName { font-weight: 850; }
.conversationPreview { margin-top: 5px; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unreadDot { min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: var(--green); color: white; font-size: 11px; font-weight: 900; }
.chatPane { min-width: 0; display: flex; flex-direction: column; }
.chatEmpty { margin: auto; text-align: center; padding: 24px; }
.chatTitle { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 17px 18px; border-bottom: 1px solid var(--line); }
.chatTitle h2 { margin: 0; }
.chatTitle p { margin: 3px 0 0; }
.privacyPill { padding: 6px 9px; border-radius: 999px; background: var(--green-soft); color: var(--green-dark); font-size: 12px; font-weight: 800; }
.messageThread { height: 460px; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 9px; background: #fbfcfb; }
.messageBubble { max-width: min(78%, 520px); padding: 10px 12px; border-radius: 15px; line-height: 1.45; }
.messageBubble.mine { align-self: flex-end; background: var(--green); color: white; border-bottom-right-radius: 4px; }
.messageBubble.theirs { align-self: flex-start; background: white; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.messageMeta { margin-top: 4px; font-size: 10px; opacity: .72; }
.messageComposer { display: grid; grid-template-columns: 1fr auto; gap: 9px; padding: 14px; border-top: 1px solid var(--line); }
.messageComposer textarea { min-height: 54px; max-height: 140px; }
@media (max-width: 760px) {
  .messagesGrid { grid-template-columns: 1fr; min-height: 0; }
  .conversationListPane { border-right: 0; border-bottom: 1px solid var(--line); }
  .messageThread { height: 420px; }
}

.messagesGrid.singleChat { grid-template-columns: 1fr; }

.communityShell { width: min(980px, 100%); margin: 0 auto; }
.viewerList { display: grid; gap: 12px; }
.viewerCard {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  padding: 17px; border: 1px solid var(--line); border-radius: 16px;
  background: white; box-shadow: 0 8px 28px rgba(25,62,42,.05);
}
.viewerIdentity { display: flex; gap: 12px; align-items: center; }
.viewerAvatar {
  width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
  background: #e7eee9; display: grid; place-items: center; font-weight: 900;
}
.viewerAvatar img { width: 100%; height: 100%; object-fit: cover; }
.viewerMeta h3 { margin: 0; }
.viewerMeta p { margin: 3px 0 0; }
.viewerStats { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.viewerStat { padding: 5px 8px; border-radius: 999px; background: #f1f5f2; font-size: 12px; color: #536159; }
.statusPill { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: 12px; font-weight: 850; }
.statusPill.active { background: #dff4e6; color: #0b5d35; }
.statusPill.blocked { background: #f8dfdf; color: #8a2323; }
.dangerButton { border: 0; border-radius: 10px; padding: 9px 12px; background: #fae8e8; color: #8a2323; font-weight: 800; }
.commentTop { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.commentAction { border: 0; background: transparent; color: #6f7b74; font-size: 12px; padding: 0; font-weight: 700; }
.commentAction:hover { color: #8a2323; }
@media (max-width: 620px) {
  .viewerCard { grid-template-columns: 1fr; }
}

.composerMetaGrid {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px;
}
.composerMetaGrid label { display: grid; gap: 6px; font-weight: 700; }
.composerMetaGrid .wideField { grid-column: 1 / -1; }
.composerExtras {
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fbfcfb;
}
.composerExtras summary { cursor: pointer; font-weight: 800; color: var(--green-dark); }
.composerExtras[open] summary { margin-bottom: 12px; }
.postKindBadge {
  padding: 5px 8px; border-radius: 999px; font-weight: 800; font-size: 12px;
  background: #eef2ff; color: #36416d;
}
.eventDetailCard {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px;
  padding: 11px 12px; border-radius: 12px; background: #f5faf7; border: 1px solid #dce9e0;
}
.eventDetailCard span { font-size: 13px; font-weight: 700; color: #435149; }
.postLinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.postLink {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 999px;
  text-decoration: none; font-weight: 800; background: var(--green-soft); color: var(--green-dark);
}
.postLink.videoLink { background: #f3eef8; color: #5d3b75; }
.photoGrid { display: grid; gap: 6px; margin-top: 12px; }
.photoGrid.count-2 { grid-template-columns: repeat(2,1fr); }
.photoGrid.count-3, .photoGrid.count-4, .photoGrid.count-5, .photoGrid.count-6 { grid-template-columns: repeat(2,1fr); }
.photoGrid .photo { margin: 0; width: 100%; height: 100%; max-height: 420px; object-fit: cover; }
.photoGrid.count-3 .photo:first-child { grid-row: span 2; }
@media (max-width: 620px) {
  .composerMetaGrid { grid-template-columns: 1fr; }
  .composerMetaGrid .wideField { grid-column: auto; }
  .photoGrid.count-2, .photoGrid.count-3, .photoGrid.count-4,
  .photoGrid.count-5, .photoGrid.count-6 { grid-template-columns: 1fr; }
  .photoGrid.count-3 .photo:first-child { grid-row: auto; }
}

.postDeleteButton { margin-left: auto; font-size: 12px; padding: 4px 7px; color: #8a3131; }

.chip { display: inline-flex; align-items: center; gap: 7px; }
.chip button {
  border: 0; border-left: 1px solid #cfe2d5; background: transparent;
  padding: 0 0 0 7px; color: #5c6d63; font-size: 11px; font-weight: 800;
}
.chip button:hover { color: #8a3131; }

.chip.archived { background: #eef0ef; color: #6a746e; }
.chip.archived > span:first-child { text-decoration: line-through; text-decoration-thickness: 1px; }
.chip.archived button:hover { color: var(--green-dark); }
.categoryHistoryCount { font-size: 10px; font-weight: 750; color: #758078; }

.siteFooter {
  width: min(1180px, calc(100% - 28px)); margin: -48px auto 28px;
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
  color: #718078; font-size: 12px;
}
.siteFooter a { color: var(--green-dark); text-decoration: none; font-weight: 750; }
.siteFooter a:hover { text-decoration: underline; }

@media (max-width: 620px) {
  .topbar { flex-wrap: wrap; gap: 3px 10px; padding-top: 7px; padding-bottom: 7px; }
  .brand { width: 100%; }
  .topActions { width: 100%; justify-content: flex-end; gap: 2px; }
  .topActions .textButton { padding: 6px 7px; font-size: 12px; }
}

.pendingPanel {
  min-height: calc(100vh - 170px);
  display: grid;
  place-items: center;
}
.pendingCard {
  width: min(620px, 100%);
  padding: clamp(28px, 6vw, 54px);
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: white;
  box-shadow: var(--shadow);
}
.pendingCard h1 {
  margin: 10px auto 12px;
  max-width: 520px;
  font-size: clamp(34px, 7vw, 54px);
  line-height: 1.02;
  letter-spacing: -.045em;
}
.pendingCard p:not(.eyebrow) {
  max-width: 520px;
  margin: 0 auto 22px;
  color: var(--muted);
  line-height: 1.6;
}