.support-page .primary-nav a[aria-current="page"] { color: var(--violet); }

.support-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 87% 16%, rgba(192, 166, 245, 0.48), transparent 27%),
    radial-gradient(circle at 5% 91%, rgba(112, 57, 210, 0.13), transparent 26%),
    linear-gradient(128deg, #fbfaff 0%, #f5f1fe 54%, #eee7fb 100%);
}

.support-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(89, 38, 184, 0.16) 1px, transparent 1px);
  background-size: 25px 25px;
  mask-image: linear-gradient(90deg, #000 0%, transparent 67%);
  opacity: 0.3;
}

.support-hero-orbit { position: absolute; pointer-events: none; border: 1px solid rgba(89, 38, 184, 0.12); border-radius: 50%; }
.support-hero-orbit.orbit-one { width: 530px; height: 530px; top: -355px; left: 24%; box-shadow: 0 0 0 38px rgba(89, 38, 184, 0.032), 0 0 0 76px rgba(89, 38, 184, 0.017); }
.support-hero-orbit.orbit-two { width: 330px; height: 330px; right: -150px; bottom: -188px; box-shadow: 0 0 0 31px rgba(89, 38, 184, 0.032), 0 0 0 62px rgba(89, 38, 184, 0.016); }

.support-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.01fr) minmax(390px, 0.99fr);
  gap: clamp(47px, 7vw, 110px);
  align-items: center;
  min-height: 580px;
  padding: 70px 0;
}

.support-hero-copy { max-width: 665px; }
.support-hero h1 { max-width: 645px; margin-bottom: 20px; color: #281751; font-size: clamp(3.1rem, 5vw, 4.5rem); }
.support-hero h1 span { color: #5820bb; }
.support-hero-copy > p { color: #4d4667; font-size: var(--text-body-large); font-weight: 700; line-height: 1.62; }
.support-hero-copy .support-hero-lead { max-width: 654px; margin-bottom: 12px; color: #302653; font-size: clamp(1.2rem, 1.68vw, 1.38rem); font-weight: 800; line-height: 1.54; }
.support-hero-copy .button-row { margin-top: 29px; }

.community-preview {
  position: relative;
  overflow: hidden;
  min-height: 410px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 77% 20%, rgba(181, 138, 246, 0.42), transparent 27%),
    linear-gradient(132deg, #260d60 0%, #3c1387 57%, #5521ad 100%);
  box-shadow: 0 23px 49px rgba(47, 18, 114, 0.24);
}

.community-preview::before,
.community-preview::after { content: ""; position: absolute; pointer-events: none; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 50%; }
.community-preview::before { width: 350px; height: 350px; top: -224px; right: -99px; box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.035), 0 0 0 60px rgba(255, 255, 255, 0.018); }
.community-preview::after { width: 230px; height: 230px; bottom: -155px; left: -92px; box-shadow: 0 0 0 26px rgba(255, 255, 255, 0.028); }
.community-preview > * { position: relative; z-index: 1; }

.community-preview-heading { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.community-status { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border: 1px solid rgba(235, 220, 255, 0.4); border-radius: 999px; color: #f3eaff; background: rgba(255, 255, 255, 0.1); font-size: var(--text-caption); font-weight: 900; letter-spacing: 0.04em; line-height: 1; text-transform: uppercase; }
.community-status .lucide { width: 14px; height: 14px; stroke-width: 2.3; }
.community-preview-icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 16px; color: #fff; background: rgba(255, 255, 255, 0.1); }
.community-preview-icon .lucide { width: 29px; height: 29px; stroke-width: 2; }

.community-preview-core { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 25px; align-items: center; min-height: 273px; }
.community-orbit { position: relative; width: 210px; height: 210px; margin: 0 auto; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; box-shadow: 0 0 0 25px rgba(255, 255, 255, 0.025), 0 0 0 50px rgba(255, 255, 255, 0.014); }
.community-orbit::before, .community-orbit::after { content: ""; position: absolute; inset: 29px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; }
.community-orbit::after { inset: 57px; border-style: dashed; opacity: 0.8; }
.community-node { position: absolute; display: grid; place-items: center; width: 47px; height: 47px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; color: #fff; background: linear-gradient(145deg, rgba(178, 138, 239, 0.9), rgba(90, 36, 184, 0.96)); box-shadow: 0 7px 14px rgba(22, 5, 64, 0.3); }
.community-node .lucide { width: 23px; height: 23px; stroke-width: 2.1; }
.community-node.node-one { top: -10px; left: 82px; }
.community-node.node-two { top: 72px; right: -13px; }
.community-node.node-three { bottom: -9px; right: 46px; }
.community-node.node-four { bottom: 35px; left: -13px; }
.community-node.node-center { top: 81px; left: 81px; width: 49px; height: 49px; color: #5a22b8; background: #fff; }
.community-preview-copy h2 { margin: 0 0 9px; color: #fff; font-size: clamp(1.5rem, 2.2vw, 1.85rem); font-weight: 900; line-height: 1.16; }
.community-preview-copy p { margin: 0; color: rgba(255, 255, 255, 0.88); font-size: var(--text-body); font-weight: 800; line-height: 1.5; }
.community-preview-note { display: flex; gap: 8px; align-items: flex-start; max-width: 390px; margin: 0; padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.84); font-size: var(--text-caption); font-weight: 700; line-height: 1.48; }
.community-preview-note .lucide { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; color: #e3d3ff; stroke-width: 2.2; }

.support-safety-note { border-top: 1px solid #e3d9f3; border-bottom: 1px solid #e3d9f3; background: #f5f1fe; }
.support-safety-inner { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; max-width: 1050px; padding-top: 19px; padding-bottom: 19px; }
.support-safety-icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; color: #fff; background: #5b24bb; }
.support-safety-icon .lucide { width: 20px; height: 20px; stroke-width: 2.25; }
.support-safety-note h2 { margin: 0 0 2px; color: #4a209c; font-size: var(--text-body); font-weight: 900; letter-spacing: 0; line-height: 1.38; }
.support-safety-note p { margin: 0; color: #504767; font-size: var(--text-ui); font-weight: 700; line-height: 1.55; }

.support-now { padding-top: 67px; padding-bottom: 64px; }
.support-section-heading { max-width: 800px; margin-bottom: 31px; }
.support-section-heading h2, .support-community h2, .checklist-intro h2, .support-shape h2 { margin-bottom: 13px; color: #5120af; font-size: var(--heading-section); font-weight: 900; line-height: 1.15; }
.support-section-heading > p:not(.eyebrow) { margin: 0; color: #514a69; font-size: var(--text-body-large); font-weight: 700; line-height: 1.6; }
.support-now-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.support-now-card { display: grid; grid-template-columns: 65px minmax(0, 1fr); gap: 18px; align-items: start; min-height: 228px; padding: 25px 22px; border: 1px solid #e7dff5; border-radius: 16px; background: #fff; box-shadow: 0 7px 19px rgba(47, 18, 114, 0.055); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.support-now-card:hover { transform: translateY(-3px); border-color: #c9b4ec; box-shadow: 0 12px 24px rgba(47, 18, 114, 0.11); }
.support-card-icon { display: grid; place-items: center; width: 59px; height: 59px; border-radius: 15px; color: #5821b7; background: #f1ecfc; }
.support-card-icon .lucide { width: 31px; height: 31px; stroke-width: 2.05; }
.support-now-card h3 { margin: 3px 0 8px; color: #482083; font-size: var(--heading-card); font-weight: 900; line-height: 1.24; }
.support-now-card p { margin: 0 0 15px; color: #554e6d; font-size: var(--text-body); font-weight: 700; line-height: 1.56; }
.email-privacy-note { display: flex; gap: 9px; align-items: flex-start; max-width: 780px; margin: 20px 0 0; padding-top: 17px; border-top: 1px solid #e7dff4; color: #615978; font-size: var(--text-caption); font-weight: 700; line-height: 1.5; }
.email-privacy-note .lucide { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: #5a22b8; stroke-width: 2.1; }

.support-community { position: relative; overflow: hidden; padding: 73px 0; color: #fff; background: linear-gradient(118deg, #1e0d4c 0%, #321075 54%, #4f20a9 100%); }
.support-community::before, .support-community::after { content: ""; position: absolute; pointer-events: none; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%; }
.support-community::before { width: 510px; height: 510px; top: -352px; right: 7%; box-shadow: 0 0 0 40px rgba(255, 255, 255, 0.024), 0 0 0 80px rgba(255, 255, 255, 0.013); }
.support-community::after { width: 260px; height: 260px; bottom: -168px; left: -110px; box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.025); }
.support-community-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(430px, 1.06fr); gap: clamp(46px, 7vw, 110px); align-items: center; }
.support-community .eyebrow { color: #decfff; }
.support-community h2 { max-width: 585px; color: #fff; }
.support-community-copy > p:not(.eyebrow) { max-width: 635px; color: rgba(255, 255, 255, 0.88); font-size: var(--text-body); font-weight: 700; line-height: 1.62; }
.support-community-copy .community-lead { margin-bottom: 12px; color: #fff; font-size: var(--text-body-large); font-weight: 800; line-height: 1.56; }
.community-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.community-value { display: grid; grid-template-columns: 43px minmax(0, 1fr); gap: 12px; min-height: 161px; padding: 19px 17px; border: 1px solid rgba(255, 255, 255, 0.17); border-radius: 14px; background: rgba(255, 255, 255, 0.08); }
.community-value-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; background: rgba(255, 255, 255, 0.13); }
.community-value-icon .lucide { width: 24px; height: 24px; stroke-width: 2.05; }
.community-value h3 { margin: 1px 0 6px; color: #fff; font-size: var(--text-body); font-weight: 900; line-height: 1.25; }
.community-value p { margin: 0; color: rgba(255, 255, 255, 0.85); font-size: var(--text-caption); font-weight: 700; line-height: 1.5; }

.support-checklist { padding-top: 68px; padding-bottom: 68px; background: #fbfaff; }
.checklist-card { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(390px, 1.08fr); gap: clamp(42px, 7vw, 100px); align-items: center; padding: 36px 39px; border: 1px solid #e4dbf3; border-radius: 18px; background: #fff; box-shadow: 0 11px 26px rgba(47, 18, 114, 0.07); }
.checklist-intro h2 { max-width: 590px; }
.checklist-intro > p:not(.eyebrow) { max-width: 575px; margin: 0; color: #544d6c; font-size: var(--text-body); font-weight: 700; line-height: 1.62; }
.community-checklist { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.community-checklist li { display: flex; gap: 10px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid #ebe5f5; color: #453a5d; font-size: var(--text-body); font-weight: 800; line-height: 1.45; }
.community-checklist li:last-child { border-bottom: 0; }
.community-checklist .lucide { flex: 0 0 auto; width: 21px; height: 21px; margin-top: 1px; color: #5b24bb; stroke-width: 2.3; }

.support-shape { position: relative; overflow: hidden; padding: 69px 0; color: #fff; background: linear-gradient(115deg, #4d1da7 0%, #371080 55%, #26105e 100%); }
.support-shape::before { content: ""; position: absolute; width: 360px; height: 360px; right: -163px; top: -250px; pointer-events: none; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255, 255, 255, 0.032), 0 0 0 70px rgba(255, 255, 255, 0.019); }
.support-shape-card { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 33px 58px; align-items: center; }
.support-shape .eyebrow { color: #ddccff; }
.support-shape h2 { max-width: 680px; color: #fff; }
.support-shape-copy > p:not(.eyebrow) { max-width: 740px; margin: 0; color: rgba(255, 255, 255, 0.88); font-size: var(--text-body); font-weight: 700; line-height: 1.6; }
.support-shape-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; min-width: 246px; }
.support-shape-actions .button-white { min-width: 0; }
.support-shape-actions .button-outline-light { min-width: 0; }
.support-gift-note { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; margin: -8px 0 0; color: rgba(255, 255, 255, 0.85); font-size: var(--text-caption); font-weight: 700; line-height: 1.45; }
.support-gift-note .lucide { width: 17px; height: 17px; color: #e5d4ff; fill: currentColor; stroke-width: 1.8; }

@media (max-width: 1050px) {
  .support-hero-grid { gap: 42px; }
  .support-now-card { grid-template-columns: 55px minmax(0, 1fr); gap: 14px; padding: 23px 18px; }
  .support-card-icon { width: 52px; height: 52px; }
  .support-card-icon .lucide { width: 28px; height: 28px; }
  .support-community-grid { gap: 43px; }
  .checklist-card { gap: 40px; padding: 32px; }
}

@media (max-width: 1080px) {
  .support-hero-grid, .support-community-grid, .checklist-card { grid-template-columns: 1fr; }
  .support-hero-grid { gap: clamp(32px, 5vw, 50px); min-height: 0; padding-top: 58px; padding-bottom: 60px; }
  .support-hero-copy { max-width: 760px; }
  .community-preview { width: min(100%, 680px); max-width: 680px; }
  .support-now-grid { grid-template-columns: 1fr; max-width: 720px; }
  .support-now-card { grid-template-columns: 63px minmax(0, 1fr); min-height: 0; padding: 24px; }
  .support-card-icon { width: 58px; height: 58px; }
  .support-community { padding-top: 60px; padding-bottom: 60px; }
  .support-community-copy { max-width: 760px; }
  .community-values { max-width: 700px; }
  .checklist-card { max-width: 760px; }
  .support-shape-card { grid-template-columns: 1fr; }
  .support-shape-actions { flex-direction: row; flex-wrap: wrap; align-items: center; min-width: 0; }
  .support-gift-note { margin-top: -2px; }
}

@media (max-width: 640px) {
  .support-hero-grid, .support-now, .support-community, .support-checklist, .support-shape { padding-top: 46px; padding-bottom: 46px; }
  .support-hero h1 { font-size: clamp(2.7rem, 12vw, 3.65rem); }
  .support-hero-copy > p, .support-hero-copy .support-hero-lead, .support-section-heading > p:not(.eyebrow), .support-community-copy > p:not(.eyebrow), .support-community-copy .community-lead, .checklist-intro > p:not(.eyebrow), .support-shape-copy > p:not(.eyebrow) { font-size: var(--text-body); }
  .community-preview { min-height: 0; padding: 18px; border-radius: 18px; }
  .community-preview-icon { width: 46px; height: 46px; }
  .community-preview-core { grid-template-columns: 1fr; gap: 17px; min-height: 0; padding-top: 16px; }
  .community-orbit { transform: scale(0.88); transform-origin: center; margin-top: -8px; margin-bottom: -8px; }
  .community-preview-copy { text-align: center; }
  .community-preview-note { padding-top: 13px; }
  .support-safety-inner { grid-template-columns: 34px minmax(0, 1fr); gap: 11px; padding-top: 16px; padding-bottom: 16px; }
  .support-safety-icon { width: 33px; height: 33px; }
  .support-now-card { grid-template-columns: 52px minmax(0, 1fr); gap: 13px; padding: 21px 18px; }
  .support-card-icon { width: 50px; height: 50px; border-radius: 13px; }
  .support-card-icon .lucide { width: 26px; height: 26px; }
  .support-section-heading { margin-bottom: 25px; }
  .community-values { grid-template-columns: 1fr; }
  .community-value { min-height: 0; }
  .checklist-card { padding: 27px 21px; border-radius: 16px; }
  .community-checklist { gap: 7px; }
  .community-checklist li { font-size: var(--text-ui); }
  .support-shape-card { gap: 27px; }
  .support-shape-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .support-shape-actions .button { width: 100%; }
}

/* Live community redesign */
.support-hero-grid { grid-template-columns: minmax(0, 1.03fr) minmax(380px, 0.97fr); min-height: 610px; }
.support-hero-note { display: flex; gap: 8px; align-items: center; margin: 20px 0 0; color: #5a5077; font-size: var(--text-caption); font-weight: 800; line-height: 1.45; }
.support-hero-note .lucide { width: 18px; height: 18px; color: #5921b9; stroke-width: 2.3; }

.community-preview { display: block; min-height: 0; padding: 0; background: #fff; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.community-preview::before { display: none; }
.community-preview::after { display: none; }
.community-preview > img { position: relative; z-index: 0; display: block; width: 100%; height: auto; object-fit: contain; }
.community-preview:hover { transform: translateY(-3px); box-shadow: 0 28px 55px rgba(47, 18, 114, 0.28); }
.community-preview:focus-visible { outline: 4px solid #7d4ad9; outline-offset: 5px; }
.community-preview-overlay, .community-preview-copy { position: absolute; z-index: 2; }
.community-preview-overlay { top: 23px; right: 23px; left: 23px; display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.community-status { color: #fff; background: rgba(43, 15, 103, 0.77); backdrop-filter: blur(7px); }
.community-preview-icon { width: 50px; height: 50px; background: rgba(43, 15, 103, 0.68); backdrop-filter: blur(7px); }
.community-preview-icon .lucide { width: 27px; height: 27px; }
.community-preview-copy { right: 28px; bottom: 27px; left: 28px; text-align: left; }
.community-preview-kicker { margin: 0 0 8px; color: #e9dcff; font-size: var(--text-caption); font-weight: 900; letter-spacing: 0.045em; line-height: 1.35; text-transform: uppercase; }
.community-preview-copy h2 { max-width: 440px; margin: 0 0 9px; font-size: clamp(1.8rem, 2.6vw, 2.35rem); line-height: 1.07; }
.community-preview-copy > p:last-child { color: rgba(255, 255, 255, 0.93); }

.support-join-note { position: relative; z-index: 2; border-top: 1px solid #e1d7f3; border-bottom: 1px solid #e1d7f3; background: #fff; }
.support-join-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.support-join-item { display: grid; grid-template-columns: 45px minmax(0, 1fr); gap: 12px; min-height: 112px; padding: 26px 30px; align-items: start; }
.support-join-item + .support-join-item { border-left: 1px solid #e8e1f3; }
.support-join-icon { display: grid; place-items: center; width: 41px; height: 41px; border-radius: 13px; color: #5720b8; background: #f1ecfb; }
.support-join-icon .lucide { width: 23px; height: 23px; stroke-width: 2.15; }
.support-join-item p { margin: 1px 0 0; color: #554e6d; font-size: var(--text-caption); font-weight: 700; line-height: 1.5; }
.support-join-item strong, .support-join-item span { display: block; }
.support-join-item strong { margin-bottom: 3px; color: #3e1b80; font-size: var(--text-ui); font-weight: 900; line-height: 1.25; }

.support-now { padding-top: 76px; padding-bottom: 76px; }
.support-community { padding-top: 80px; padding-bottom: 80px; }
.community-policy-links { display: flex; flex-wrap: wrap; gap: 14px 23px; margin-top: 25px; }
.community-policy-links a { display: inline-flex; gap: 7px; align-items: center; color: #fff; font-size: var(--text-ui); font-weight: 900; line-height: 1.4; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.52); text-underline-offset: 4px; }
.community-policy-links a:hover { color: #dfcdff; }
.community-policy-links .lucide { width: 17px; height: 17px; stroke-width: 2.2; }
.support-shape { padding-top: 76px; padding-bottom: 76px; }

@media (max-width: 1050px) {
  .support-join-item { padding-right: 19px; padding-left: 19px; }
}

@media (max-width: 1080px) {
  .support-hero-grid { grid-template-columns: 1fr; gap: clamp(32px, 5vw, 50px); min-height: 0; padding-top: 58px; padding-bottom: 60px; }
  .support-hero-copy { max-width: 760px; }
  .community-preview { width: min(100%, 680px); max-width: 680px; }
  .support-join-grid { grid-template-columns: 1fr; }
  .support-join-item { min-height: 0; padding: 19px 0; }
  .support-join-item + .support-join-item { border-top: 1px solid #e8e1f3; border-left: 0; }
}

@media (max-width: 640px) {
  .support-hero-note { align-items: flex-start; }
  .community-preview-overlay { top: 18px; right: 18px; left: 18px; }
  .community-preview-copy { right: 21px; bottom: 20px; left: 21px; text-align: left; }
  .community-preview-copy h2 { font-size: clamp(1.72rem, 9vw, 2.15rem); }
  .support-join-item { grid-template-columns: 43px minmax(0, 1fr); gap: 11px; }
  .support-join-icon { width: 39px; height: 39px; }
  .community-policy-links { flex-direction: column; align-items: flex-start; gap: 13px; }
}
