/* Dark hero matching poster */
      .community-hero {
          background: linear-gradient(135deg, #0a1f3d 0%, #102a52 60%, #0a1f3d 100%);
          color: #fff;
          padding: 0 0 5rem;
      }

      .community-hero-title {
          font-size: 52px;
          font-weight: 700;
          line-height: 1.1;
          color: #fff;
          margin-top: 2rem;
          margin-bottom: 2rem;
      }

      .community-hero-intro {
          font-size: 18px;
          line-height: 1.6;
          color: rgba(255, 255, 255, 0.9);
          margin-bottom: 1.25rem;
      }

      .community-hero-intro b {
          color: #fff;
      }

      .font-medium {
        font-size: 18px;
      }

      .phone-mock {
          max-width: 100%;
          height: auto;
      }

      /* Selectors are unqualified because <use> shadow-DOM doesn't expose the
         outer .phone-mock ancestor to descendants of the referenced symbol. */
      #phone-mock text {
          font-family: 'Atkinson Hyperlegible', sans-serif;
      }

      .phone-frame {
          fill: #0a1f3d;
          stroke: #2a3a5e;
          stroke-width: 3;
      }

      .phone-screen {
          fill: #0e2752;
      }

      .phone-notch {
          fill: #0a1f3d;
      }

      .phone-status {
          fill: #fff;
          font-size: 11px;
          font-weight: 700;
      }

      .phone-brand {
          fill: #fff;
          font-size: 20px;
          font-weight: 700;
      }

      .phone-greet {
          fill: #a8b8d6;
          font-size: 13px;
      }

      .phone-card {
          fill: #fff;
      }

      .phone-name {
          fill: #231F20;
          font-size: 18px;
          font-weight: 700;
      }

      .phone-meta {
          fill: #666;
          font-size: 12px;
      }

      .phone-value {
          fill: #231F20;
          font-size: 14px;
          font-weight: 700;
      }

      .phone-bar-bg {
          fill: #e6f3fa;
      }

      .phone-bar-fill {
          fill: #00b3ef;
      }

      .phone-divider {
          stroke: #1c3568;
          stroke-width: 1;
      }

      .phone-tab {
          fill: #5b6f96;
          font-size: 10px;
      }

      .phone-tab-active {
          fill: #00b3ef;
          font-size: 10px;
          font-weight: 700;
      }

      /* Two-column intro pillars */
      .pillar-row {
          padding: 4rem 0;
      }

      .pillar-item {
          display: flex;
          gap: 1.25rem;
          margin-bottom: 2rem;
      }

      .pillar-icon {
          flex-shrink: 0;
          width: 56px;
          height: 56px;
          border-radius: 50%;
          background: #e6f6fd;
          color: #00b3ef;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
      }

      .pillar-title {
          font-size: 20px;
          font-weight: 700;
          color: #231F20;
          margin-bottom: 0.5rem;
      }

      .pillar-text {
          font-size: 15px;
          color: #555;
          line-height: 1.6;
          margin: 0;
      }

      .pillar-quote-card {
          background: #f3f8fc;
          border-radius: 10px;
          padding: 2rem;
          height: 100%;
      }

      .pillar-quote-icon {
          font-size: 40px;
          color: #00b3ef;
          line-height: 1;
          margin-bottom: 0.75rem;
      }

      .pillar-quote-title {
          font-size: 22px;
          font-weight: 700;
          color: #231F20;
          margin-bottom: 1rem;
          line-height: 1.3;
      }

      .pillar-quote-text {
          font-size: 16px;
          color: #555;
          line-height: 1.6;
          margin: 0;
      }

      /* Gym example section */
      .example-section {
          background: linear-gradient(135deg, #f3f8fc 0%, #e6f3fa 100%);
          padding: 4rem 0;
          margin-bottom: 0;
      }

      .example-title {
          font-size: 30px;
          font-weight: 700;
          color: #231F20;
          margin-bottom: 1.5rem;
      }

      .example-text {
          font-size: 16px;
          color: #555;
          line-height: 1.7;
          margin-bottom: 1rem;
      }

      .example-image {
          max-width: 100%;
          border-radius: 10px;
      }

      .example-benefit {
          display: flex;
          gap: 1rem;
          margin-bottom: 1.5rem;
          align-items: flex-start;
      }

      .example-benefit-icon {
          flex-shrink: 0;
          width: 44px;
          height: 44px;
          border-radius: 50%;
          background: #00b3ef;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
      }

      .example-benefit-text {
          font-size: 15px;
          color: #333;
          line-height: 1.5;
          margin: 0;
          padding-top: 0.4rem;
      }

      /* Communities grid */
      .communities-section {
          padding: 4rem 0;
      }

      .communities-title {
          font-size: 26px;
          font-weight: 700;
          color: #00b3ef;
          margin-bottom: 2rem;
      }

      .community-grid {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 1.5rem 1rem;
      }

      .community-tile {
          text-align: center;
      }

      .community-tile-icon {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background: #e6f6fd;
          color: #00b3ef;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 26px;
          margin: 0 auto 0.75rem;
      }

      .community-tile-label {
          font-size: 13px;
          color: #333;
          font-weight: 600;
          line-height: 1.3;
      }

      .community-tile-note {
          font-size: 14px;
          color: #555;
          font-style: italic;
          line-height: 1.4;
          text-align: left;
          align-self: center;
      }

      .proven-card {
          background: #f3f8fc;
          border-radius: 10px;
          padding: 2rem;
          height: 100%;
          position: relative;
      }

      .proven-title {
          font-size: 22px;
          font-weight: 700;
          color: #00b3ef;
          margin-bottom: 1rem;
      }

      .proven-text {
          font-size: 15px;
          color: #555;
          line-height: 1.6;
          margin-bottom: 1rem;
      }

      .proven-highlight {
          font-size: 17px;
          font-weight: 700;
          color: #00b3ef;
          margin-top: 1rem;
      }

      /* Bottom features row */
      .features-row-section {
          padding: 3rem 0;
          background: #fff;
          border-top: 1px solid #ececec;
      }

      .feature-row-item {
          display: flex;
          align-items: center;
          gap: 1rem;
      }

      .feature-row-icon {
          flex-shrink: 0;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background: #e6f6fd;
          color: #00b3ef;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 22px;
      }

      .feature-row-text {
          font-size: 14px;
          font-weight: 700;
          color: #231F20;
          line-height: 1.4;
          margin: 0;
      }

      .features-row-link {
          margin-top: 2rem;
          margin-bottom: 0;
          text-align: center;
          font-size: 15px;
          color: #666;
      }

      .features-row-link a {
          color: #00b3ef;
          font-weight: 600;
          text-decoration: none;
      }

      .features-row-link a:hover {
          text-decoration: underline;
      }

      /* Closing CTA matching poster bottom bar */
      .closing-cta {
          background: linear-gradient(135deg, #03b3ef 0%, #018ab9 100%);
          color: #fff;
          padding: 4rem 0;
      }

      .closing-cta-title {
          font-size: 24px;
          font-weight: 700;
          color: #fff;
          margin-bottom: 0.75rem;
      }

      .closing-cta-text {
          font-size: 16px;
          color: rgba(255, 255, 255, 0.85);
          line-height: 1.6;
          margin-bottom: 0;
      }

      .closing-cta-icon {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background: #067aa3;
          color: #fff;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-size: 26px;
          margin-bottom: 1rem;
      }

      .closing-cta-btn {
          background: #fff !important;
          color: #00b3ef !important;
          font-weight: 700 !important;
          padding: 0.875rem 2.5rem !important;
          font-size: 16px !important;
          border-radius: 30px !important;
          display: inline-block;
          text-decoration: none;
          margin-top: 1rem;
      }

      .closing-cta-btn:hover {
          background: #231F20 !important;
          color: #fff !important;
      }

      @media screen and (max-width: 991px) {
          .community-hero-title {
              font-size: 36px;
          }

          .community-grid {
              grid-template-columns: repeat(3, 1fr);
          }

          .example-title {
              font-size: 24px;
          }
      }

      @media screen and (max-width: 575px) {
          .community-hero-title {
              font-size: 28px;
          }

          .community-grid {
              grid-template-columns: repeat(2, 1fr);
          }

          .pillar-quote-title {
              font-size: 20px;
          }
      }