@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Work+Sans:wght@400;500;600;700;800&display=swap');
:root {
 --navy: #373a84;
 --navy-tint: #ebebf3;
 --navy-tint-20:#5f619d;
 --navy-tint-60:#afb0ce;
 --navy-shade: #26295c;
 --navy-deep: #1e2049;
 --gold: #e3b559;
 --gold-tint: #fbf4e6;
 --gold-tint-40:#eed39b;
 --gold-shade: #c19a4c;
 --bronze: #a97c46;
 --bronze-shade:#7a5830;
 --pewter: #9a9a9c;
 --cream: #faf8f2;
 --ink: #1c1c22;
 --gray: #666666;
 --border-gray: #e3e0d6;
 --font-display: 'Fraunces', Georgia, serif;
 --font-body: 'Work Sans', -apple-system, Helvetica, Arial, sans-serif;
}
body {
 font-family: var(--font-body);
 color: var(--ink);
 font-size: 16px;
 line-height: 1.65;
}
h1, h2, h3, h4, h5, h6 {
 font-family: var(--font-display);
 color: var(--navy);
 font-weight: 600;
 line-height: 1.15;
 text-transform: none !important;
}
h1 { font-size: 2.6rem; font-weight: 700; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.35rem; }
p {
 font-size: 1rem;
 line-height: 1.7;
 color: var(--ink);
}
a {
 color: var(--navy) !important;
 text-decoration: none;
}
a:hover {
 color: var(--gold) !important;
 text-decoration: underline;
}
.topicTitle,
.topicTitle:link,
.topicTitle:visited {
 color: var(--navy) !important;
 text-decoration: none;
}
.topicTitle:hover {
 color: var(--gold) !important;
 text-decoration: underline;
}
h4.messageListForumTitle,
h4#forumTitle,
#forumTitle {
 color: var(--navy) !important;
 font-family: var(--font-display) !important;
 font-size: 2.6rem !important;
 font-weight: 700 !important;
 line-height: 1.15 !important;
}
img {
 border-radius: 10px;
}
.authenticateLoginText,
.authenticateLoginText:link,
.authenticateLoginText:visited {
 color: #fff !important;
}
.authenticateLoginText:hover {
 color: var(--gold) !important;
}
blockquote {
 border-left: 3px solid var(--gold);
 padding-left: 20px;
 color: var(--navy-shade);
 font-style: italic;
}
table {
 font-family: var(--font-body);
 border-collapse: collapse;
}
table th {
 background: var(--navy-tint);
 color: var(--navy);
 font-weight: 700;
 text-align: left;
 padding: 10px 14px;
}
table td {
 padding: 10px 14px;
 border-bottom: 1px solid var(--border-gray);
}
.wa-btn,
.wa-form-button,
input[type="submit"],
input.button,
input.typeButton,
a.wa_btn {
 font-family: var(--font-body);
 font-weight: 700;
 font-size: 0.9rem;
 letter-spacing: 0.02em;
 padding: 12px 26px;
 border-radius: 6px;
 border: 2px solid var(--navy) !important;
 background: var(--navy) !important;
 color: #fff !important;
 transition: background 0.15s ease, color 0.15s ease;
}
.wa-btn:hover,
.wa-form-button:hover,
input[type="submit"]:hover,
input.button:hover,
input.typeButton:hover,
a.wa_btn:hover {
 background: var(--navy-tint-20) !important;
 border-color: var(--navy-tint-20) !important;
 color: #fff !important;
 text-decoration: none;
}
.wa-btn-gold {
 background: var(--gold) !important;
 border-color: var(--gold) !important;
 color: #1e2049 !important;
}
.wa-btn-gold:hover {
 background: var(--gold-tint-40) !important;
 border-color: var(--gold-tint-40) !important;
 color: #1e2049 !important;
}
.wa-btn-outline {
 background: transparent !important;
 color: var(--navy) !important;
 border-color: var(--navy) !important;
}
.wa-btn-outline:hover {
 background: var(--navy-tint-60) !important;
 border-color: var(--navy) !important;
 color: var(--navy) !important;
}
.wa-btn-outline-white {
 background: transparent !important;
 color: #fff !important;
 border-color: #fff !important;
}
.wa-btn-outline-white:hover {
 background: #fff !important;
 border-color: #fff !important;
 color: var(--navy) !important;
}
#id_Header1 .menuBackground,
#id_Header1 .menuInner {
 background: var(--navy) !important;
 border-bottom: none;
}
#id_Header1 .menuInner a {
 font-family: var(--font-body);
 font-weight: 600;
 font-size: 0.85rem;
 color: #fff !important;
 text-transform: none !important;
}
#id_Header1 .menuInner a span {
 text-transform: none !important;
}
#id_Header1 .menuInner a:hover {
 color: var(--gold) !important;
 text-decoration: none;
}
.WaGadgetLoginButton .loginLink {
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 gap: 8px !important;
 position: relative !important;
 width: auto !important;
 height: auto !important;
 min-width: 0 !important;
 overflow: visible !important;
 line-height: normal !important;
 box-sizing: border-box !important;
 margin: 0 !important;
 padding: 10px 20px !important;
 background: var(--navy) !important;
 border: 0 !important;
 outline: 0 !important;
 border-radius: 6px !important;
 color: #fff !important;
 font-family: var(--font-body) !important;
 font-weight: 600 !important;
 font-size: 0.85rem !important;
 text-transform: none !important;
 text-align: center !important;
 text-decoration: none !important;
 white-space: nowrap !important;
 vertical-align: middle !important;
 cursor: pointer !important;
 transition: background 0.15s ease;
}
.WaGadgetLoginButton .loginLink:hover {
 background: var(--navy-tint-20) !important;
 color: #fff !important;
}
.WaGadgetLoginButton .loginContainer,
.WaGadgetLoginButton .loginContainerInner,
.WaGadgetLoginButton .loginLink {
 background-image: none !important;
}
.WaGadgetLoginButton .loginContainer::before,
.WaGadgetLoginButton .loginContainer::after,
.WaGadgetLoginButton .loginContainerInner::before,
.WaGadgetLoginButton .loginContainerInner::after,
.WaGadgetLoginButton .loginLink::before,
.WaGadgetLoginButton .loginLink::after {
 content: none !important;
 display: none !important;
 background: none !important;
 width: 0 !important;
 height: 0 !important;
}
.WaGadgetLoginButton a.loginLink[href] {
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 padding: 10px 20px !important;
 background: var(--navy) !important;
 border-radius: 6px !important;
 color: #fff !important;
 font-family: var(--font-body) !important;
 font-weight: 600 !important;
 font-size: 0.85rem !important;
 text-decoration: none !important;
 text-transform: none !important;
 white-space: nowrap !important;
}
.WaGadgetLoginButton a.loginLink[href]:hover {
 background: var(--navy-tint-20) !important;
}
.WaGadgetLoginButton .loginPanel {
 background: var(--navy) !important;
 border-radius: 8px;
 padding: 10px 0;
 width: 220px !important;
 box-shadow: 0 8px 22px rgba(0,0,0,0.25);
 clip-path: none !important;
 display: flex !important;
 flex-direction: column !important;
 align-items: stretch !important;
}
.WaGadgetLoginButton .loginPanel > * {
 width: 100% !important;
 float: none !important;
 box-sizing: border-box !important;
 text-align: left !important;
}
.WaGadgetLoginButton .loginPanel::before,
.WaGadgetLoginButton .loginPanel::after {
 content: none !important;
 display: none !important;
 width: 0 !important;
 height: 0 !important;
 margin: 0 !important;
 border: 0 !important;
 border-top: 0 !important;
 border-right: 0 !important;
 border-bottom: 0 !important;
 border-left: 0 !important;
 background: none !important;
}
.WaGadgetLoginButton .loginContainer,
.WaGadgetLoginButton .loginContainerInner {
 padding-bottom: 24px !important;
 margin-bottom: -24px !important;
}
.WaGadgetLoginButton .loginPanel .loggedName {
 color: #fff !important;
 font-weight: 700;
 font-family: var(--font-body);
 padding: 6px 18px 10px;
 border-bottom: 1px solid rgba(255,255,255,0.15);
}
.WaGadgetLoginButton .loginPanel .profileBox {
 padding: 8px 18px;
}
.WaGadgetLoginButton .loginPanel .profileBox a,
.WaGadgetLoginButton .loginPanel .loginBoxLogout {
 color: #fff !important;
 background: transparent !important;
 font-family: var(--font-body) !important;
 font-size: 0.85rem !important;
 border: 0 !important;
 padding: 6px 0 !important;
 cursor: pointer;
}
.WaGadgetLoginButton .loginPanel .profileBox a:hover,
.WaGadgetLoginButton .loginPanel .loginBoxLogout:hover {
 color: var(--gold) !important;
 text-decoration: none;
}
.WaGadgetLoginButton .loginContainer:hover .loginPanel {
 visibility: visible !important;
 opacity: 1 !important;
 display: block !important;
}
.WaGadgetMobilePanel .mobilePanel {
 background: var(--navy) !important;
 color: #fff !important;
}
.WaGadgetMobilePanel .mobilePanel .mobilePanelButton {
 background: var(--navy) !important;
}
.WaGadgetMobilePanel .mobilePanel .mobilePanelButton:hover,
.WaGadgetMobilePanel .mobilePanel .mobilePanelButton:active,
.WaGadgetMobilePanel .mobilePanel .mobilePanelButton.active {
 background: var(--navy-tint-20) !important;
}
.WaGadgetMobilePanel .mobilePanel .menuInner {
 background: var(--navy) !important;
}
.WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel {
 background: var(--navy) !important;
 border-top-color: var(--navy) !important;
}
.WaGadgetMobilePanel .mobilePanel .menuInner ul.secondLevel {
 background: var(--navy) !important;
 border-top-color: var(--navy) !important;
}
.WaGadgetMobilePanel .mobilePanel .menuInner a {
 color: #fff !important;
 font-family: var(--font-body);
 font-weight: 600;
 text-transform: none !important;
}
.WaGadgetMobilePanel .mobilePanel .menuInner a:hover {
 color: var(--gold) !important;
}
.WaGadgetMobilePanel .mobilePanel .loginInner {
 background: var(--navy) !important;
}
.WaGadgetMobilePanel .loginContainerAuthenticated .labelBox {
 color: #fff !important;
 font-family: var(--font-body);
 padding: 6px 18px;
}
.WaGadgetMobilePanel .loginContainerAuthenticated .loggedName {
 font-weight: 700;
 border-bottom: 1px solid rgba(255,255,255,0.15);
 padding-bottom: 10px;
}
.WaGadgetMobilePanel .loginContainerAuthenticated a {
 color: #fff !important;
 text-decoration: none;
}
.WaGadgetMobilePanel .loginContainerAuthenticated a:hover {
 color: var(--gold) !important;
}
#header,
.WaHeader {
 background: #fff;
 border-bottom: 1px solid var(--border-gray);
}
.WaNavigation a,
#nav_content a,
.wa-menu a {
 font-family: var(--font-body);
 font-weight: 600;
 font-size: 0.85rem;
 color: var(--ink);
}
.WaNavigation a:hover,
#nav_content a:hover,
.wa-menu a:hover {
 color: var(--navy);
 text-decoration: none;
}
.WaSiteTitle,
.wa-site-title {
 font-family: var(--font-display);
 font-weight: 600;
 color: var(--navy);
}
.wa-gadget-membershiplevels .wa-data-view,
.wa-membership-level {
 border: 1px solid var(--border-gray);
 border-radius: 10px;
 overflow: hidden;
}
.wa-gadget-membershiplevels h3,
.wa-membership-level-name {
 font-family: var(--font-display);
 color: var(--navy);
}
h5 a[title="Go to member details"],
h5 a[title="Go to member details"]:link,
h5 a[title="Go to member details"]:visited {
 color: var(--navy) !important;
 text-decoration: none;
}
h5 a[title="Go to member details"]:hover {
 color: var(--gold) !important;
 text-decoration: underline;
}
.fieldBody a,
.fieldBody a:link,
.fieldBody a:visited {
 color: var(--navy) !important;
 text-decoration: none;
}
.fieldBody a:hover {
 color: var(--gold) !important;
 text-decoration: underline;
}
.WaGadgetMemberDirectoryStateList {
 padding-left: 100px;
 padding-right: 100px;
 box-sizing: border-box;
}
@media (max-width: 600px) {
 .WaGadgetMemberDirectoryStateList {
  padding-left: 16px;
  padding-right: 16px;
 }
 #idMemberDirectoryDetailsContainer {
  margin-left: 16px;
  margin-right: 16px;
 }
 [style*="margin-left:100px"],
 [style*="margin-right:100px"] {
  margin-left: 16px !important;
  margin-right: 16px !important;
 }
 [style*="Memphis_Bridge_Header-v2.jpg"] {
  background-size: cover !important;
  background-position: center center !important;
 }
}
.WaGadgetMemberDirectoryStateList .cornersContainer {
 display: none !important;
}
.WaGadgetForum .cornersContainer {
 display: none !important;
}
.WaGadgetForum .d1,
.WaGadgetForum .d2,
.WaGadgetForum .d3,
.WaGadgetForum .d4,
.WaGadgetForum .d5,
.WaGadgetForum .d6,
.WaGadgetForum .d7,
.WaGadgetForum .d8,
.WaGadgetForum .d9,
.WaGadgetForum .inner {
 display: contents;
}
.WaGadgetForumStateTopicList .forumPanelContainer {
 margin-bottom: 16px;
}
.WaGadgetForumStateTopicList #idTopicListContainer {
 background: #fff !important;
 border: 1px solid var(--border-gray) !important;
 border-radius: 12px !important;
 overflow: hidden !important;
 box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.WaGadgetForumStateTopicList .topicListHeaderTable,
.WaGadgetForumStateTopicList .topicListTable {
 width: 100% !important;
 table-layout: fixed !important;
 border-collapse: collapse;
 font-family: var(--font-body);
}
/* Background painted on the table AND the row, not just the TD --
   at full viewport width the TD's own box doesn't always stretch to
   fill the row's rendered height (narrowing the window fixes it),
   so we paint navy on every ancestor level to guarantee full
   vertical coverage no matter which box falls short. */
.WaGadgetForumStateTopicList .topicListHeaderTable {
 background: var(--navy) !important;
}
.WaGadgetForumStateTopicList .topicListHeaderTable tr {
 background: var(--navy) !important;
}
.WaGadgetForumStateTopicList .topicListHeaderTD {
 background: var(--navy) !important;
 padding: 18px !important;
 border: 0 !important;
}
.WaGadgetForumStateTopicList .boxHeaderTitle {
 font-family: var(--font-body) !important;
 color: #fff !important;
 font-size: 0.8rem !important;
 font-weight: 700 !important;
 letter-spacing: 0.04em !important;
 text-transform: uppercase !important;
 margin: 0 !important;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.WaGadgetForumStateTopicList .threadImageTD,
.WaGadgetForumStateTopicList .threadImage {
 display: none !important;
}
.WaGadgetForumStateTopicList .threadTD {
 width: 40% !important;
}
.WaGadgetForumStateTopicList .lastReplyTD {
 width: 40% !important;
}
.WaGadgetForumStateTopicList .repliesCountTD {
 width: 20% !important;
}
.WaGadgetForumStateTopicList .topicListTD {
 padding: 14px 18px;
 border-bottom: 1px solid var(--border-gray);
 vertical-align: middle;
}
.WaGadgetForumStateTopicList .topicListRow {
 cursor: pointer;
 transition: background 0.15s ease;
}
.WaGadgetForumStateTopicList .topicListRow:hover,
.WaGadgetForumStateTopicList .topicListRow.highlight {
 background: var(--gold-tint) !important;
}
.WaGadgetForumStateTopicList .lastReply {
 display: flex;
 flex-direction: column;
 gap: 2px;
}
.WaGadgetForumStateTopicList .lastReplyDate,
.WaGadgetForumStateTopicList .lastReplyDate:link,
.WaGadgetForumStateTopicList .lastReplyDate:visited {
 color: var(--navy) !important;
 font-weight: 600;
 text-decoration: none;
}
.WaGadgetForumStateTopicList .lastReplyDate:hover {
 color: var(--gold) !important;
 text-decoration: underline;
}
.WaGadgetForumStateTopicList .lastReplyAuthor {
 color: var(--gray);
 font-size: 0.85rem;
 font-style: italic;
}
.WaGadgetForumStateTopicList .repliesCountTD {
 text-align: center;
}
/* "Subscribe to forum" / "Subscribe to topic" / "Subscribed (Unsubscribe)"
   links -- id is WA's auto-generated ASP.NET control ID, matched on a
   "subscribeLink" substring so it catches subscribeLink AND
   unsubscribeLink regardless of which forum state/page it's on (the
   topic-list page uses ..._topicList_subscribeLink, the message-detail
   page uses ..._messageList_subscribeLink -- scoping to the shared
   .WaGadgetForum base class instead of one specific state class means
   we don't have to duplicate this per page). Same navy/gold pattern as
   every other link on the site. */
.WaGadgetForum a[id*="subscribeLink"],
.WaGadgetForum a[id*="subscribeLink"]:link,
.WaGadgetForum a[id*="subscribeLink"]:visited {
 color: var(--navy) !important;
 text-decoration: none;
}
.WaGadgetForum a[id*="subscribeLink"]:hover {
 color: var(--gold) !important;
 text-decoration: underline;
}
/* The visible text sits in a nested <span> (id contains WA's own
   typo "subsctibeLinkText" / "unsubsctibeLinkText"), which apparently
   gets its own color from the theme rather than inheriting from the
   <a> -- so the parent's navy/gold above wasn't reaching it. Target
   the span directly, same states as the link. */
.WaGadgetForum a[id*="subscribeLink"] span,
.WaGadgetForum a[id*="subscribeLink"]:link span,
.WaGadgetForum a[id*="subscribeLink"]:visited span {
 color: var(--navy) !important;
}
.WaGadgetForum a[id*="subscribeLink"]:hover span {
 color: var(--gold) !important;
}
/* ===== Message detail page (single topic thread) ===== */
.WaGadgetForumStateMessageList .topicTitleOuterContainer {
 margin-bottom: 8px;
}
.WaGadgetForumStateMessageList .forumPanelContainer {
 display: flex;
 align-items: center;
 gap: 20px;
 padding-bottom: 16px;
 margin-bottom: 20px;
 border-bottom: 1px solid var(--gold) !important;
}
.WaGadgetForumStateMessageList #idMessageListContainer {
 background: #fff !important;
 border: 1px solid var(--border-gray) !important;
 border-radius: 12px !important;
 overflow: hidden !important;
 box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.WaGadgetForumStateMessageList .boxesList {
 list-style: none;
 margin: 0;
 padding: 0;
}
.WaGadgetForumStateMessageList .boxesListItem {
 margin: 0 !important;
 border-bottom: 1px solid var(--border-gray);
}
.WaGadgetForumStateMessageList .boxesListItem:last-child {
 border-bottom: none;
}
/* The theme applies its own background/border directly to
   boxViewOutline (independent of the 9-slice corner hack already
   neutralized above), which would otherwise draw a second card
   inside our card -- strip it back to plain, and give the message
   its own padding since it no longer gets any from the theme box.
   Also zeroing margin here (and on its boxContainer/header/body
   children) so the box hugs the card's edges vertically with nothing
   but our own deliberate padding between them. */
.WaGadgetForumStateMessageList .boxOuterContainer.boxViewOutline {
 background: transparent !important;
 border: none !important;
 border-radius: 0 !important;
 box-shadow: none !important;
 padding: 20px 24px !important;
 margin: 0 !important;
}
.WaGadgetForumStateMessageList .boxContainer,
.WaGadgetForumStateMessageList .boxHeaderOuterContainer,
.WaGadgetForumStateMessageList .boxBodyOuterContainer {
 margin: 0 !important;
}
.WaGadgetForumStateMessageList .forumMessageHeaderTable,
.WaGadgetForumStateMessageList .forumMessageTable {
 width: 100% !important;
 border-collapse: collapse;
}
.WaGadgetForumStateMessageList .forumMessageHeaderTable td,
.WaGadgetForumStateMessageList .forumMessageTable td {
 border: none !important;
}
.WaGadgetForumStateMessageList .forumMessageHeaderTable {
 margin-bottom: 8px;
}
.WaGadgetForumStateMessageList .wasReadMessage {
 display: none !important;
}
.WaGadgetForumStateMessageList .messageCreatedDate {
 color: var(--navy) !important;
 font-weight: 600;
 font-style: normal !important;
 font-size: 0.85rem;
}
.WaGadgetForumStateMessageList .messageIdText {
 color: var(--gray);
 font-style: italic;
 font-size: 0.8rem;
}
.WaGadgetForumStateMessageList td.left {
 color: var(--navy) !important;
 font-weight: 600;
 font-size: 0.9rem;
 white-space: nowrap;
 padding-right: 16px;
 vertical-align: top;
}
.WaGadgetForumStateMessageList .forumMessage {
 font-family: var(--font-body);
 color: var(--ink);
 font-size: 1rem;
 line-height: 1.7;
}
.WaGadgetForumStateMessageList .forumMessage p {
 margin: 0;
}
.WaGadgetForumStateMessageList .forumBottomPanelContainer {
 margin-top: 16px;
}
/* ===== Membership Application wizard ("Select membership level" and
   likely every other step, since these classes/IDs look step-generic)
   ===== */
.WaGadgetMembershipApplication .cornersContainer {
 display: none !important;
}
.WaGadgetMembershipApplication .d1,
.WaGadgetMembershipApplication .d2,
.WaGadgetMembershipApplication .d3,
.WaGadgetMembershipApplication .d4,
.WaGadgetMembershipApplication .d5,
.WaGadgetMembershipApplication .d6,
.WaGadgetMembershipApplication .d7,
.WaGadgetMembershipApplication .d8,
.WaGadgetMembershipApplication .d9,
.WaGadgetMembershipApplication .inner {
 display: contents;
}
.WaGadgetMembershipApplication .formOuterContainer,
.WaGadgetMembershipApplication .formTitleOuterContainer,
.WaGadgetMembershipApplication .generalFieldsOuterContainer,
.WaGadgetMembershipApplication .sectionOuterContainer {
 background: transparent !important;
 border: none !important;
}
.WaGadgetMembershipApplication #idGeneralFormContainer {
 background: #fff !important;
 border: 1px solid var(--border-gray) !important;
 border-radius: 12px !important;
 box-shadow: 0 4px 14px rgba(0,0,0,0.06);
 padding: 28px 32px !important;
}
.WaGadgetMembershipApplication .formTitleContainer {
 display: flex;
 justify-content: space-between;
 align-items: baseline;
 flex-wrap: wrap;
 gap: 8px;
 margin-bottom: 20px;
}
.WaGadgetMembershipApplication h3.formTitle {
 font-family: var(--font-display) !important;
 color: var(--navy) !important;
 font-size: 1.5rem !important;
 font-weight: 700 !important;
 margin: 0 !important;
}
.WaGadgetMembershipApplication .mandatoryFieldsTitle {
 font-size: 0.8rem;
 color: var(--gray);
}
.WaGadgetMembershipApplication .mandatoryFieldsTitle .mandatorySymbol,
.WaGadgetMembershipApplication .fieldLabel .mandatorySymbol {
 color: var(--gold-shade) !important;
}
.WaGadgetMembershipApplication .fieldLabel .mandatoryLabel {
 color: var(--navy) !important;
 font-family: var(--font-body);
 font-size: 0.95rem;
}
.WaGadgetMembershipApplication .navigationContainer {
 display: flex;
 align-items: center;
 margin-top: 22px;
}
.WaGadgetMembershipApplication .navigationContainer .left {
 margin-right: auto;
}
/* "Select membership level" radio cards specifically -- other wizard
   steps (personal info, payment) will have completely different field
   types, so this part stays scoped to just this step. */
/* The theme lays .fieldLabel and .fieldBody out as a two-column
   label-left/field-right row (same pattern WA form fields use
   generally), which squeezed "Membership level" into a narrow left
   column and pushed the cards over -- badly enough that on a mobile
   viewport the card ran off the right edge of the screen entirely.
   Force it to stack: label on its own line above, body full-width
   below. Scoped tightly to this specific fieldSubContainer instance
   (not all .fieldLabel/.fieldBody sitewide) since other WA form
   fields elsewhere may rely on that default two-column layout and we
   haven't audited those yet. */
.WaGadgetMembershipApplicationStateSelectLevel .fieldSubContainer.radioGroupContainer {
 display: block !important;
}
.WaGadgetMembershipApplicationStateSelectLevel .fieldSubContainer.radioGroupContainer .fieldLabel {
 display: block !important;
 float: none !important;
 width: auto !important;
 text-align: left !important;
 margin-bottom: 12px;
}
.WaGadgetMembershipApplicationStateSelectLevel .fieldSubContainer.radioGroupContainer .fieldBody {
 display: block !important;
 float: none !important;
 width: 100% !important;
 margin-left: 0 !important;
}
.WaGadgetMembershipApplicationStateSelectLevel .groupBodyVertical {
 display: flex;
 flex-direction: column;
 gap: 14px;
 width: 100%;
}
.WaGadgetMembershipApplicationStateSelectLevel .fieldItem {
 display: flex;
 align-items: flex-start;
 gap: 12px;
 border: 1.5px solid var(--border-gray);
 border-radius: 10px;
 padding: 18px 20px;
 box-sizing: border-box;
 width: 100%;
 transition: border-color 0.15s ease, background 0.15s ease;
}
.WaGadgetMembershipApplicationStateSelectLevel .fieldItem:hover {
 border-color: var(--gold-shade);
}
.WaGadgetMembershipApplicationStateSelectLevel .fieldItem:has(input:checked) {
 border-color: var(--navy);
 background: var(--navy-tint);
}
.WaGadgetMembershipApplicationStateSelectLevel .fieldItem {
 position: relative;
}
.WaGadgetMembershipApplicationStateSelectLevel .typeRadioContainer {
 position: static !important;
 margin: 0 !important;
 margin-top: 4px !important;
 left: auto !important;
 top: auto !important;
 flex-shrink: 0;
}
.WaGadgetMembershipApplicationStateSelectLevel input.typeRadio {
 accent-color: var(--navy);
 width: 18px;
 height: 18px;
 cursor: pointer;
}
/* .label is the direct flex item of .fieldItem (sibling of
   .typeRadioContainer). flex: 1 alone isn't enough -- like every flex
   item, it defaults to min-width: auto, refusing to shrink below its
   own content's natural width. Its content includes the title+price
   row two levels down, so without min-width: 0 here too, this is the
   layer that was still forcing the card to overflow even after
   .labelTitle/.labelSubTitle got the same fix. */
.WaGadgetMembershipApplicationStateSelectLevel .label {
 flex: 1;
 min-width: 0;
}
.WaGadgetMembershipApplicationStateSelectLevel label.levelProperties {
 display: block;
 cursor: pointer;
 font-family: var(--font-body);
}
.WaGadgetMembershipApplicationStateSelectLevel .textLine:not(.typeInstruction) {
 display: flex;
 justify-content: space-between;
 align-items: baseline;
 gap: 12px;
 flex-wrap: wrap;
 margin-bottom: 6px;
}
/* .labelTitle and .labelSubTitle (not .levelPrice, which is a
   grandchild) are the actual flex items inside .textLine. Flex items
   default to min-width: auto, which means "never shrink narrower than
   my content's natural width" -- exactly why the title text was
   refusing to wrap/shrink and pushing the price past the card's right
   edge instead of dropping to its own line. min-width: 0 overrides
   that default and lets flex-wrap actually do its job. */
.WaGadgetMembershipApplicationStateSelectLevel .labelTitle,
.WaGadgetMembershipApplicationStateSelectLevel .labelSubTitle {
 min-width: 0;
}
.WaGadgetMembershipApplicationStateSelectLevel .labelTitle {
 color: var(--navy) !important;
 font-size: 1.05rem;
 font-weight: 700;
 overflow-wrap: break-word;
}
.WaGadgetMembershipApplicationStateSelectLevel .levelPrice {
 color: var(--gold-shade) !important;
 font-size: 1rem;
 font-weight: 700;
 white-space: nowrap;
}
.WaGadgetMembershipApplicationStateSelectLevel .typeInstruction {
 font-size: 0.85rem;
 color: var(--gray);
 font-weight: 400;
 font-style: normal !important;
}
/* Bundle / renewal / recurring lines (everything EXCEPT the long
   description, which stays its own block below) flow inline in a
   sequence with a dash between them, wrapping naturally as the
   viewport narrows since inline content wraps for free -- no flex,
   no media query needed. */
.WaGadgetMembershipApplicationStateSelectLevel .textLine.typeInstruction:not(.extraInfo) {
 display: inline;
}
.WaGadgetMembershipApplicationStateSelectLevel .textLine.typeInstruction:not(.extraInfo) + .textLine.typeInstruction:not(.extraInfo)::before {
 content: " — ";
 color: var(--border-gray);
}
.WaGadgetMembershipApplicationStateSelectLevel .textLine.typeInstruction.extraInfo {
 display: block;
 padding-top: 16px;
 max-width: 100%;
}
/* Same lesson as .label/.labelTitle/.labelSubTitle -- fix has to be
   applied at every box in the chain, not just the ones that visibly
   looked wrong first. This one isn't a flex item so it doesn't need
   min-width: 0, but it's a long uninterrupted run of text and needs
   its own explicit max-width + wrap so it can't push past the card
   regardless of what any ancestor's width resolves to. */
.WaGadgetMembershipApplicationStateSelectLevel .levelDescription {
 display: block;
 font-size: 0.9rem;
 color: var(--ink);
 font-weight: 400;
 font-style: normal !important;
 line-height: 1.7;
 max-width: 100%;
 overflow-wrap: break-word;
 word-break: break-word;
}
/* ===== Member Profile detail page (Directory "view profile") =====
   Scoped to the real, confirmed #idMemberDirectoryDetailsContainer ID
   from the user's own HTML paste, rather than a guessed
   .WaGadgetXxxStateYyy class -- we don't have confirmation of what
   that wrapper class is actually called on this particular view, and
   a wrong guess silently does nothing (no error, just no effect). */
#idMemberDirectoryDetailsContainer .cornersContainer {
 display: none !important;
}
#idMemberDirectoryDetailsContainer .d1,
#idMemberDirectoryDetailsContainer .d2,
#idMemberDirectoryDetailsContainer .d3,
#idMemberDirectoryDetailsContainer .d4,
#idMemberDirectoryDetailsContainer .d5,
#idMemberDirectoryDetailsContainer .d6,
#idMemberDirectoryDetailsContainer .d7,
#idMemberDirectoryDetailsContainer .d8,
#idMemberDirectoryDetailsContainer .d9,
#idMemberDirectoryDetailsContainer .inner {
 display: contents;
}
#idMemberDirectoryDetailsContainer {
 max-width: 900px;
 margin-left: 100px;
 margin-right: 100px;
 box-sizing: border-box;
}
#idMemberDirectoryDetailsContainer .memberDirectoryDetailsHeaderContainer h2 {
 display: flex;
 align-items: center;
 gap: 20px;
 font-family: var(--font-body);
 font-weight: 400;
 margin: 0 0 24px 0;
}
#idMemberDirectoryDetailsContainer .memberDirectoryDetailsHeaderContainer h2 .sendMailButtonContainer {
 margin-left: auto;
}
/* .ptolemy-profile-* classes are inserted by a small script (see the
   companion ptolemy-profile-header.html snippet) -- Wild Apricot
   renders the photo and membership level as separate field rows
   further down the page, not inside the header, and CSS can't
   relocate content across unrelated containers or read a member's
   initials out of their name. The script also hides the now-
   redundant Photo / Membership level / First name / Last name rows
   below, since their content already lives in the header. */
.ptolemy-profile-avatar {
 width: 88px;
 height: 88px;
 border-radius: 50%;
 background: var(--navy-tint-60);
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
 flex-shrink: 0;
}
.ptolemy-profile-avatar img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 border-radius: 50% !important;
}
.ptolemy-profile-avatar-initials {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 1.75rem;
 color: var(--navy-shade);
}
.ptolemy-profile-name-group {
 display: flex;
 flex-direction: column;
 gap: 8px;
}
.ptolemy-profile-name {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 2rem;
 color: var(--navy);
}
.ptolemy-profile-pill {
 display: inline-block;
 align-self: flex-start;
 background: var(--gold-tint);
 color: var(--navy);
 font-family: var(--font-body);
 font-weight: 700;
 font-size: 0.7rem;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 padding: 5px 14px;
 border-radius: 999px;
}
#idMemberDirectoryDetailsContainer .generalFieldsOuterContainer {
 background: #fff !important;
 border: 1px solid var(--border-gray) !important;
 border-radius: 12px !important;
 box-shadow: 0 8px 20px rgba(0,0,0,0.12);
 padding: 32px !important;
 margin-top: 24px;
}
#idMemberDirectoryDetailsContainer .formOuterContainer,
#idMemberDirectoryDetailsContainer .formContainer {
 background: transparent !important;
 border: none !important;
}
#idMemberDirectoryDetailsContainer .captionOuterContainer .fieldLabel {
 display: none;
}
#idMemberDirectoryDetailsContainer .captionOuterContainer h4 {
 font-family: var(--font-display) !important;
 color: var(--navy) !important;
 font-size: 1.375rem !important;
 font-weight: 600 !important;
 margin: 0 0 20px 0 !important;
}
#idMemberDirectoryDetailsContainer .fieldContainer.simpleTextContainer .fieldSubContainer,
#idMemberDirectoryDetailsContainer .fieldContainer.pictureViewContainer .fieldSubContainer {
 display: flex;
 gap: 20px;
 align-items: flex-start;
 margin-bottom: 18px;
}
#idMemberDirectoryDetailsContainer .fieldLabel {
 flex: 0 0 160px;
 font-family: var(--font-body);
 font-weight: 500;
 font-size: 0.75rem;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: var(--gray);
}
#idMemberDirectoryDetailsContainer .fieldBody {
 flex: 1;
 font-family: var(--font-body);
 font-size: 1rem;
 color: var(--ink);
}
#idMemberDirectoryDetailsContainer .fieldBody a {
 color: var(--navy) !important;
}
/* Topic title hover tooltip -- rendered by Bonasource.ControlTooltip,
   a single shared popup element reused for any element that has one
   (not scoped to the forum, so this rule is intentionally global; it
   will style tooltips anywhere else on the site that use the same
   widget too). The tooltip content is literally "message <strong><hr>
   caption</strong>", so we target the hr/strong inside it directly. */
.controlTooltipExtender {
 background: #fff !important;
 color: var(--ink) !important;
 font-family: var(--font-body) !important;
 font-size: 0.9rem !important;
 line-height: 1.5;
 padding: 14px 16px !important;
 border: 1px solid var(--border-gray) !important;
 border-radius: 10px !important;
 box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important;
 max-width: 280px;
}
.controlTooltipExtender hr {
 border: none !important;
 border-top: 1px solid var(--gold) !important;
 margin: 8px 0 !important;
}
.controlTooltipExtender strong {
 display: block;
 font-weight: 500;
 font-size: 0.8rem;
 color: var(--gray);
}
.WaGadgetMemberDirectoryStateList .memberDirectoryContainer .d1,
.WaGadgetMemberDirectoryStateList .memberDirectoryContainer .d2,
.WaGadgetMemberDirectoryStateList .memberDirectoryContainer .d3,
.WaGadgetMemberDirectoryStateList .memberDirectoryContainer .d4,
.WaGadgetMemberDirectoryStateList .memberDirectoryContainer .d5,
.WaGadgetMemberDirectoryStateList .memberDirectoryContainer .d6,
.WaGadgetMemberDirectoryStateList .memberDirectoryContainer .d7,
.WaGadgetMemberDirectoryStateList .memberDirectoryContainer .d8,
.WaGadgetMemberDirectoryStateList .memberDirectoryContainer .d9,
.WaGadgetMemberDirectoryStateList .memberDirectoryContainer .inner {
 display: contents;
}
.WaGadgetMemberDirectoryStateList .memberDirectoryOuterContainer {
 background: #fff;
 border: 1px solid var(--border-gray);
 border-radius: 12px;
 overflow: hidden;
 box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.WaGadgetMemberDirectoryStateList .memberDirectoryContainer,
.WaGadgetMemberDirectoryStateList .memberDirectory {
 background: none;
}
.membersTable {
 width: 100%;
 border-collapse: collapse;
 font-family: var(--font-body);
}
.membersTable thead th {
 background: var(--navy) !important;
 color: #fff !important;
 font-weight: 700;
 font-size: 0.8rem;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 text-align: left;
 padding: 14px 18px;
 border: 0 !important;
}
.membersTable tbody tr.normal {
 cursor: pointer;
 transition: background 0.15s ease;
}
.membersTable tbody tr.normal:nth-child(even) {
 background: var(--navy-tint);
}
.membersTable tbody tr.normal:hover {
 background: var(--gold-tint) !important;
}
.membersTable td {
 padding: 12px 18px;
 border-bottom: 1px solid var(--border-gray);
 vertical-align: middle;
}
.memberValue {
 font-family: var(--font-body);
 font-size: 0.9rem;
 color: var(--ink);
}
.memberValue a,
.memberValue a:link,
.memberValue a:visited {
 color: var(--navy) !important;
 text-decoration: none;
}
.memberValue a:hover {
 color: var(--gold) !important;
 text-decoration: underline;
}
.membersTable h5 {
 margin: 0;
}
.WaGadgetMemberDirectoryStateList .advSearchContainerLink {
 margin-bottom: 10px;
 text-align: right;
}
.WaGadgetMemberDirectoryStateList .advSearchContainerLink a,
.WaGadgetMemberDirectoryStateList .advSearchContainerLink a:link,
.WaGadgetMemberDirectoryStateList .advSearchContainerLink a:visited {
 font-family: var(--font-body);
 font-size: 0.85rem;
 font-weight: 600;
 color: var(--navy) !important;
 text-decoration: none;
}
.WaGadgetMemberDirectoryStateList .advSearchContainerLink a:hover {
 color: var(--gold) !important;
 text-decoration: underline;
}
.WaGadgetMemberDirectoryStateList #memberDirectorySearchArea .cornersContainer {
 display: none !important;
}
.WaGadgetMemberDirectoryStateList #memberDirectorySearchArea .memberDirectorySearchArea,
.WaGadgetMemberDirectoryStateList #memberDirectorySearchArea .memberDirectorySearchArea .d1,
.WaGadgetMemberDirectoryStateList #memberDirectorySearchArea .memberDirectorySearchArea .d2,
.WaGadgetMemberDirectoryStateList #memberDirectorySearchArea .memberDirectorySearchArea .d3,
.WaGadgetMemberDirectoryStateList #memberDirectorySearchArea .memberDirectorySearchArea .d4,
.WaGadgetMemberDirectoryStateList #memberDirectorySearchArea .memberDirectorySearchArea .d5,
.WaGadgetMemberDirectoryStateList #memberDirectorySearchArea .memberDirectorySearchArea .d6,
.WaGadgetMemberDirectoryStateList #memberDirectorySearchArea .memberDirectorySearchArea .d7,
.WaGadgetMemberDirectoryStateList #memberDirectorySearchArea .memberDirectorySearchArea .d8,
.WaGadgetMemberDirectoryStateList #memberDirectorySearchArea .memberDirectorySearchArea .d9,
.WaGadgetMemberDirectoryStateList #memberDirectorySearchArea .memberDirectorySearchArea .inner {
 display: contents;
}
.WaGadgetMemberDirectoryStateList #memberDirectorySearchArea {
 background: #fff;
 border: 1px solid var(--border-gray);
 border-radius: 12px;
 padding: 18px 20px;
 margin-bottom: 20px;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 10px 16px;
}
.WaGadgetMemberDirectoryStateList #memberDirectorySearchArea label {
 font-family: var(--font-body);
 font-weight: 700;
 font-size: 0.9rem;
 color: var(--navy);
 margin: 0;
}
.WaGadgetMemberDirectoryStateList #memberDirectorySearchArea input[type="text"] {
 font-family: var(--font-body);
 font-size: 0.9rem;
 color: var(--ink);
 border: 1px solid var(--border-gray);
 border-radius: 6px;
 padding: 8px 12px;
 flex: 1 1 220px;
 min-width: 160px;
}
.WaGadgetMemberDirectoryStateList #memberDirectorySearchArea input[type="text"]:focus {
 outline: none;
 border-color: var(--navy);
}
.WaGadgetMemberDirectoryStateList #memberDirectorySearchArea .searchResult {
 font-family: var(--font-body);
 font-size: 0.85rem;
 color: var(--gray);
 margin-left: auto;
 white-space: nowrap;
}
.WaGadgetMemberDirectoryStateList #memberDirectorySearchArea .searchResult em {
 font-style: normal;
 font-weight: 700;
 color: var(--navy);
}
.WaGadgetMemberDirectoryStateList #memberDirectorySearchArea select {
 font-family: var(--font-body);
 font-size: 0.85rem;
 color: var(--ink);
 border: 1px solid var(--border-gray);
 border-radius: 6px;
 padding: 4px 8px;
}
.WaGadgetMemberDirectoryStateList #idPagingData2 {
 display: block;
 margin-top: 16px;
 text-align: right;
 font-family: var(--font-body);
 font-size: 0.85rem;
 color: var(--gray);
}
.WaGadgetMemberDirectoryStateList #idPagingData2 select {
 font-family: var(--font-body);
 font-size: 0.85rem;
 color: var(--ink);
 border: 1px solid var(--border-gray);
 border-radius: 6px;
 padding: 4px 8px;
 margin-left: 6px;
}
.WaGadgetUpcomingEvents.upcomingEventsStyle001 .gadgetStyleBody ul {
 list-style: none;
 margin: 0 auto;
 padding: 0;
 max-width: 1160px;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 align-items: stretch !important;
 gap: 20px;
}
@media (max-width: 900px) {
 .WaGadgetUpcomingEvents.upcomingEventsStyle001 .gadgetStyleBody ul {
 grid-template-columns: repeat(2, 1fr);
 }
}
@media (max-width: 600px) {
 .WaGadgetUpcomingEvents.upcomingEventsStyle001 .gadgetStyleBody ul {
 grid-template-columns: 1fr;
 }
}
.WaGadgetUpcomingEvents.upcomingEventsStyle001 .gadgetStyleBody ul li {
 background: var(--navy-tint);
 border: 1px solid var(--navy);
 border-radius: 10px;
 padding: 16px;
 height: 100% !important;
 box-sizing: border-box !important;
 align-self: stretch !important;
 display: flex;
 flex-direction: column;
}
.WaGadgetUpcomingEvents.upcomingEventsStyle001 .title {
 margin: 0 0 8px;
}
.WaGadgetUpcomingEvents.upcomingEventsStyle001 .title a,
.WaGadgetUpcomingEvents.upcomingEventsStyle001 .title a:link,
.WaGadgetUpcomingEvents.upcomingEventsStyle001 .title a:visited {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 17px;
 line-height: 1.3;
 color: var(--navy) !important;
 text-decoration: none;
}
.WaGadgetUpcomingEvents.upcomingEventsStyle001 .title a:hover {
 color: var(--gold) !important;
 text-decoration: underline;
}
.WaGadgetUpcomingEvents.upcomingEventsStyle001 .date {
 margin: 0;
}
.WaGadgetUpcomingEvents.upcomingEventsStyle001 .date span {
 font-family: var(--font-body);
 font-weight: 400;
 font-size: 13px;
 line-height: 1.5;
 color: var(--gray);
}
.WaGadgetUpcomingEvents.upcomingEventsStyle001 .location {
 margin: 0;
}
.WaGadgetUpcomingEvents.upcomingEventsStyle001 .location span {
 font-family: var(--font-body);
 font-weight: 400;
 font-size: 13px;
 line-height: 1.5;
 color: var(--gray);
}
.wa-gadget-html {
 font-family: var(--font-body);
}
.ptolemy-tag {
 display: inline-block;
 background: var(--gold-tint);
 color: var(--navy-shade);
 font-size: 0.7rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 padding: 4px 12px;
 border-radius: 20px;
}
#footer,
.WaFooter {
 background: var(--navy-shade);
 color: var(--navy-tint);
}
#footer a,
.WaFooter a {
 color: var(--gold);
}
.wa-gadget-html.ptolemy-full-bleed {
 width: 100vw;
 position: relative;
 left: 50%;
 right: 50%;
 margin-left: -50vw;
 margin-right: -50vw;
}
.ptolemy-bg-navy { background: var(--navy); color: #fff; }
.ptolemy-bg-tint { background: var(--navy-tint); }
.ptolemy-bg-cream { background: var(--cream); }
.ptolemy-bg-navy-deep { background: var(--navy-shade); color: #fff; }
.ptolemy-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.ptolemy-hero { text-align: center; padding: 90px 24px 100px; position: relative; }
.ptolemy-hero-eyebrow { text-transform: uppercase; letter-spacing: 0.25em; color: var(--gold); font-size: 0.78rem; font-weight: 700; margin: 20px 0 14px; position: relative; z-index: 1; }
.ptolemy-hero h1 { color: #fff !important; font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0 0 16px; position: relative; z-index: 1; text-transform: none !important; }
.ptolemy-hero p { color: #d8d7ea; max-width: 640px; margin: 0 auto 32px; font-size: 1.1rem; position: relative; z-index: 1; }
.ptolemy-hero .ptolemy-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }
.ptolemy-hero-photo { background-size: cover; background-position: center; overflow: hidden; }
.ptolemy-hero-photo::before {
 content: "";
 position: absolute; inset: 0;
 background: linear-gradient(180deg, rgba(30,32,73,0.55) 0%, rgba(30,32,73,0.78) 100%);
 z-index: 0;
}
.ptolemy-hero-photo .ptolemy-hero-eyebrow,
.ptolemy-hero-photo h1,
.ptolemy-hero-photo p {
 text-shadow: 0 4px 15px rgba(0,0,0,0.4);
}
.ptolemy-hero h1::before,
.ptolemy-hero h1::after,
.ptolemy-hero p::before,
.ptolemy-hero p::after {
 content: none !important;
 display: none !important;
}
.ptolemy-triangle {
 --triangle-cut: var(--navy-deep);
 width: 0;
 height: 0;
 margin: 0 auto;
 border-left: 25px solid transparent;
 border-right: 25px solid transparent;
 border-bottom: 43.5px solid var(--gold);
 position: relative;
 z-index: 1;
}
.ptolemy-triangle::before {
 content: "";
 display: block;
 width: 0;
 height: 0;
 margin-left: -20px;
 margin-top: 6px;
 border-left: 20px solid transparent;
 border-right: 20px solid transparent;
 border-bottom: 34.5px solid var(--triangle-cut);
}
.ptolemy-triangle-cream { --triangle-cut: var(--cream); }
.ptolemy-triangle-white { --triangle-cut: #fff; }
.ptolemy-triangle-navy { --triangle-cut: var(--navy); }
.ptolemy-stats { display: flex; justify-content: center; gap: 64px; flex-wrap: wrap; padding: 40px 24px; text-align: center; }
.ptolemy-stats .num { font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: var(--navy); }
.ptolemy-stats .label { font-size: 0.75rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 4px; }
.ptolemy-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 70px 24px; }
@media (max-width: 820px) { .ptolemy-tiers { grid-template-columns: 1fr; } }
.ptolemy-tier-card { border-radius: 12px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.12); background: #fff; min-height: 305px; }
.ptolemy-tier-foil { height: 130px; position: relative; }
.ptolemy-tier-foil.gold { background: linear-gradient(156.57deg,#b8862e 14.29%,#f3d998 35.71%,#caa354 53.57%,#f9e6b0 67.86%,#a97c2f 85.71%); }
.ptolemy-tier-foil.blue { background: linear-gradient(156.57deg,#4a6fa5 14.29%,#cfe0f5 35.71%,#6f8fc9 53.57%,#e4eefa 67.86%,#3d5c8a 85.71%); }
.ptolemy-tier-foil.silver { background: linear-gradient(156.57deg,#8f8f92 14.29%,#f0f0f0 35.71%,#b8b8ba 53.57%,#fafafa 67.86%,#7d7d80 85.71%); }
.ptolemy-tier-seal { position: absolute; top: 11.54%; bottom: 11.54%; left: 30%; right: 29.78%; display: block; }
.ptolemy-tier-seal img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ptolemy-tier-body { padding: 22px 22px 26px; }
.ptolemy-tier-name { font-family: var(--font-display); font-weight: 700; font-size: 19px; margin-bottom: 8px; color: var(--ink); }
.ptolemy-tier-price { font-weight: 700; color: var(--navy); font-size: 15px; margin-bottom: 8px; }
.ptolemy-tier-desc { font-size: 13.5px; color: var(--gray); line-height: 1.5; }
.ptolemy-tier-elig { font-size: 12.5px; color: var(--bronze-shade); margin-top: 8px; }
.ptolemy-membership-photo { max-width: 700px; height: 254px; margin: 0 auto; overflow: hidden; border-radius: 12px; }
.ptolemy-membership-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ptolemy-membership-intro { max-width: 750px; margin: 40px auto 0; text-align: center; }
.ptolemy-membership-intro .eyebrow,
.ptolemy-tiers-heading .eyebrow {
 font-family: var(--font-body); font-weight: 700; font-size: 11.5px;
 letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze);
 margin-bottom: 8px;
}
.ptolemy-membership-intro h2,
.ptolemy-tiers-heading h2 { font-size: 30px; margin: 0 0 8px; }
.ptolemy-membership-intro p { font-size: 15px; line-height: 20px; color: var(--ink); margin: 0 0 10px; }
.ptolemy-tiers-heading { text-align: center; margin-top: 20px; }
.ptolemy-phil { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 70px 24px; align-items: center; }
@media (max-width: 820px) { .ptolemy-phil { grid-template-columns: 1fr; } }
.ptolemy-phil .big-num { font-family: var(--font-display); font-weight: 700; font-size: 2.8rem; color: var(--navy); margin-bottom: 8px; }
.ptolemy-phil-list { display: flex; flex-direction: column; gap: 12px; }
.ptolemy-phil-list div { background: var(--cream); border-radius: 8px; padding: 14px 18px; font-weight: 700; font-size: 0.9rem; color: var(--ink); border-left: 3px solid var(--gold); }
.ptolemy-eyebrow {
 font-family: var(--font-body); font-weight: 700; font-size: 11.5px;
 letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze);
 margin-bottom: 8px;
}
.ptolemy-charity-intro { max-width: 750px; margin: 0 auto; text-align: center; }
.ptolemy-charity-intro h2 { font-size: 30px; margin: 0 0 8px; }
.ptolemy-charity-subhead { font-style: italic; font-weight: 500; font-size: 13px; color: var(--navy-deep); margin: 0 0 16px; }
.ptolemy-charity-intro p { font-size: 15px; line-height: 20px; color: var(--ink); margin: 0 0 14px; }
.ptolemy-charity-intro .ptolemy-eyebrow { margin-top: 22px; }
.ptolemy-charity-intro .ptolemy-eyebrow:first-child { margin-top: 0; }
.ptolemy-charity-cards { display: flex; gap: 16px; max-width: 800px; margin: 8px auto 0; align-items: stretch; }
@media (max-width: 820px) { .ptolemy-charity-cards { flex-direction: column; max-width: 420px; } }
.ptolemy-charity-card { background: #fff; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.18); flex: 1 0 0; display: flex; flex-direction: column; overflow: hidden; }
.ptolemy-charity-logo { height: 150px; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ptolemy-charity-logo img { max-width: 200px; max-height: 118px; width: auto; height: auto; object-fit: contain; }
.ptolemy-charity-card .ptolemy-tier-body { padding: 16px; }
.ptolemy-form {
 background: #fff;
 border: 1px solid var(--border-gray);
 border-radius: 10px;
 box-shadow: 0 4px 14px rgba(0,0,0,0.06);
 padding: 32px;
 max-width: 700px;
 margin: 0 auto;
 box-sizing: border-box;
}
.ptolemy-form-fields {
 display: flex;
 flex-direction: column;
 gap: 24px;
}
.ptolemy-form-field {
 display: flex;
 flex-direction: column;
 gap: 8px;
}
.ptolemy-form-field label {
 font-family: var(--font-body);
 font-weight: 600;
 font-size: 16px;
 color: var(--ink);
}
.ptolemy-form-field input[type="text"],
.ptolemy-form-field input[type="email"],
.ptolemy-form-field textarea {
 width: 100%;
 box-sizing: border-box;
 background: #fff;
 border: 1px solid var(--navy);
 border-radius: 10px;
 padding: 14px 20px;
 font-family: var(--font-body);
 font-size: 16px;
 color: var(--ink);
}
.ptolemy-form-field input[type="text"]:focus,
.ptolemy-form-field input[type="email"]:focus,
.ptolemy-form-field textarea:focus {
 outline: 2px solid var(--gold);
 outline-offset: 1px;
}
.ptolemy-form-field input[type="text"]::placeholder,
.ptolemy-form-field input[type="email"]::placeholder,
.ptolemy-form-field textarea::placeholder {
 color: var(--pewter);
}
.ptolemy-form-field textarea {
 min-height: 125px;
 resize: vertical;
}
.ptolemy-form-hint {
 font-family: var(--font-body);
 font-weight: 500;
 font-size: 12px;
 color: var(--pewter);
}
.ptolemy-form button[type="submit"] {
 margin-top: 24px;
 border: 0;
 cursor: pointer;
}
.ptolemy-form-status {
 margin: 12px 0 0;
 font-family: var(--font-body);
 font-size: 0.9rem;
}
.ptolemy-form-status-success {
 color: var(--navy);
 font-weight: 600;
}
.ptolemy-form-status-error {
 color: #b3261e;
 font-weight: 600;
}
/* ============================================================
   UPCOMING EVENTS — event info/action box (Figma node 172:322)
   ============================================================ */
.WaGadgetEventsStateList .cornersContainer {
 display: none !important;
}
.WaGadgetEventsStateList .d1,
.WaGadgetEventsStateList .d2,
.WaGadgetEventsStateList .d3,
.WaGadgetEventsStateList .d4,
.WaGadgetEventsStateList .d5,
.WaGadgetEventsStateList .d6,
.WaGadgetEventsStateList .d7,
.WaGadgetEventsStateList .d8,
.WaGadgetEventsStateList .d9,
.WaGadgetEventsStateList .inner {
 display: contents;
}
.WaGadgetEventsStateList .boxHeaderTitle {
 margin: 0 0 16px 0;
}
.WaGadgetEventsStateList .boxHeaderTitle .eventDetailsLink,
.WaGadgetEventsStateList a.eventDetailsLink {
 color: var(--navy) !important;
 font-family: var(--font-display) !important;
 font-size: 32px !important;
 font-style: normal !important;
 font-weight: 600 !important;
 line-height: 1.15 !important;
 text-decoration: none !important;
}
.WaGadgetEventsStateList a.eventDetailsLink:hover {
 text-decoration: underline !important;
}
.WaGadgetEventsStateList .boxBodyInfoContainer {
 background: var(--navy-tint) !important;
 border: 1px solid var(--navy) !important;
 border-radius: 10px !important;
 padding: 0 !important;
 overflow: hidden !important;
 box-sizing: border-box !important;
}
.WaGadgetEventsStateList .boxInfoContainer {
 padding: 16px 16px 0 16px;
 text-align: left !important;
}
/* Blanket reset: the theme centers text inside this box by default
 (that's why every line rendered centered even though we never asked
 for that), and its label/value pairs are floated two-column cells
 (why hiding the label's TEXT didn't reclaim the value's width). This
 wipes both assumptions for every descendant before the specific
 rules below rebuild the layout we actually want. */
.WaGadgetEventsStateList .boxInfoContainer,
.WaGadgetEventsStateList .boxInfoContainer * {
 text-align: left !important;
 float: none !important;
 width: auto !important;
 margin-left: 0 !important;
 margin-right: 0 !important;
}
.WaGadgetEventsStateList .boxInfo {
 list-style: none;
 margin: 0;
 padding: 0;
}
.WaGadgetEventsStateList .boxInfo li {
 margin: 0;
 padding: 0;
}
/* Kill the theme's own ::before/::after clearfix pseudo-elements on
 every li (confirmed in DevTools: display: table; clear: both -- the
 classic clearfix for its old floated label/value columns). Harmless
 now that everything renders as a plain block line, but no reason to
 leave invisible table boxes sitting in the DOM either. */
.WaGadgetEventsStateList .boxInfo li::before,
.WaGadgetEventsStateList .boxInfo li::after {
 content: none !important;
 display: none !important;
}
.WaGadgetEventsStateList .eventInfoBoxLabel {
 display: none !important;
}
.WaGadgetEventsStateList .eventInfoBoxValue {
 margin: 0;
 padding: 0;
}
/* Updated Figma (node 172:326) stacks the date and time vertically
 instead of joining them on one line with a dash -- this replaces
 the whole earlier "force inline + kill pseudo-elements + normalize
 white-space" fight from the single-line version. A plain <li> is
 already block-level (list-item, same rendering as block for our
 purposes), so no display override is needed at all here -- color and
 font-family/weight are inherited properties, so setting them once on
 .eventInfoBoxValue cascades down into the nested span/div/text the
 timezone-localization widget wraps its content in automatically,
 without needing a "*" wildcard override. */
.WaGadgetEventsStateList .eventInfoStartDate .eventInfoBoxValue,
.WaGadgetEventsStateList .eventInfoStartTime .eventInfoBoxValue {
 font-family: var(--font-body) !important;
 color: var(--navy) !important;
 font-style: normal !important;
 line-height: normal !important;
}
/* Ptolemy/LG Body Bold */
.WaGadgetEventsStateList .eventInfoStartDate .eventInfoBoxValue,
.WaGadgetEventsStateList .eventInfoStartDate .eventInfoBoxValue strong {
 font-weight: 700 !important;
 font-size: 18px !important;
}
.WaGadgetEventsStateList .eventInfoStartTime .eventInfoBoxValue {
 font-weight: 600 !important;
 font-size: 16px !important;
}
.WaGadgetEventsStateList .eventInfoLocation {
 margin-top: 8px;
}
.WaGadgetEventsStateList .eventInfoLocation .eventInfoBoxValue {
 font-family: var(--font-body);
 font-weight: 400;
 font-size: 1rem;
 line-height: 1.65;
 color: var(--ink);
}
.WaGadgetEventsStateList .eventInfoSpacesLeft {
 display: block !important;
 margin-top: 16px;
}
.WaGadgetEventsStateList .eventInfoSpacesLeft .eventInfoBoxValue,
.WaGadgetEventsStateList .eventInfoSpacesLeft .eventInfoBoxValue * {
 display: inline !important;
}
.WaGadgetEventsStateList .eventInfoBoxRegisterLink {
 font-family: var(--font-body);
 font-weight: 400;
 font-size: 1rem;
 color: var(--navy) !important;
 text-decoration: none !important;
 text-transform: capitalize;
}
.WaGadgetEventsStateList .eventInfoBoxRegisterLink:hover {
 text-decoration: underline !important;
}
.WaGadgetEventsStateList .boxActionContainer {
 border-top: 1px solid var(--gold) !important;
 margin-top: 16px;
 padding: 16px !important;
 box-sizing: border-box;
 text-align: center !important;
}
.WaGadgetEventsStateList .boxActionContainer input.registerButton {
 width: 100%;
 text-align: center !important;
 text-transform: none !important;
 box-sizing: border-box;
}