/* ========================================
       BASE / RESET STYLES
       ======================================== */
    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Manrope', sans-serif;
      color: #1f2024;
      background: #ffffff;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    a {
      text-decoration: none;
      color: inherit;
      transition: color 0.2s ease;
    }

    ul,
    ol {
      list-style: none;
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    button {
      font-family: 'Manrope', sans-serif;
      cursor: pointer;
      border: none;
      outline: none;
    }

    input {
      font-family: 'Manrope', sans-serif;
      outline: none;
      border: none;
    }

    .container {
      max-width: 1084px;
      margin: 0 auto;
      padding: 0 20px;
    }

    /* ========================================
       HEADER / NAVIGATION
       ======================================== */
    .header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: #ffffff;
      border-bottom: 1px solid transparent;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .header.scrolled {
      border-bottom-color: #e8ecf1;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .header-inner {
      max-width: 1084px;
      margin: 0 auto;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 80px;
    }

    .logo {
      flex-shrink: 0;
    }

    .logo img {
      height: 32px;
      width: auto;
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 40px;
    }

    .nav-menu {
      display: flex;
      align-items: center;
      gap: 40px;
    }

    .nav-item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 28px;
    }

    .nav-item a {
      font-size: 15px;
      font-weight: 500;
      color: #454a55;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: color 0.2s ease;
    }

    .nav-item a:hover {
      color: #3188f4;
    }

    .nav-item .arrow-icon {
      width: 12px;
      height: 7px;
      transition: transform 0.2s ease;
    }

    .nav-item.login a {
      font-weight: 600;
      color: #3188f4;
    }

    .nav-item::after {
      content: '';
      position: absolute;
      bottom: -28px;
      left: 0;
      width: 100%;
      height: 2px;
      background: #3188f4;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .nav-item:hover::after {
      opacity: 1;
    }

    .btn-trial {
      background: #3188f4;
      color: #ffffff;
      font-size: 15px;
      font-weight: 700;
      padding: 10px 20px;
      border-radius: 6px;
      white-space: nowrap;
      transition: background 0.2s ease, transform 0.15s ease;
    }

    .btn-trial:hover {
      background: #2070d4;
      transform: translateY(-1px);
    }

    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 8px;
      z-index: 110;
    }

    .hamburger span {
      display: block;
      width: 24px;
      height: 2px;
      background: #1f2024;
      border-radius: 2px;
      transition: all 0.3s ease;
    }

    .hamburger.active span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }

    .hamburger.active span:nth-child(2) {
      opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
      transform: rotate(-45deg) translate(5px, -5px);
    }

    .mobile-nav-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 99;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .mobile-nav-overlay.active {
      opacity: 1;
    }

    /* ========================================
       HERO / BANNER SECTION
       ======================================== */
    .hero-section {
      display: flex;
      align-items: flex-start;
      gap: 88px;
      max-width: 1084px;
      width: 100%;
      margin: 0 auto;
      padding: 64px 20px 75px;
    }

    .mobile-nav-dropdown {
      display: none;
    }

    .hero-section .side-nav {
      display: flex;
    }

    .side-nav {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      width: 305px;
      min-width: 305px;
      gap: 8px;
      padding: 0;
      margin-left: -19px;
      align-self: stretch;
    }

    .side-nav-item {
      display: flex;
      height: 56px;
      align-items: center;
      gap: 12px;
      padding: 10px 24px 10px 23px;
      border-radius: 8px;
      cursor: pointer;
      flex-shrink: 0;
      white-space: nowrap;
      box-sizing: border-box;
      text-decoration: none;
    }


    .side-nav-item:hover {
      background: none;
      transition: none;
    }

    .side-nav-item img {
      width: 28px;
      height: 28px;
      object-fit: contain;
      flex-shrink: 0;
      display: block;
    }

    .side-nav-item span {
      font-size: 18px;
      line-height: 1;
      font-weight: 600;
      color: #383e48;
    }

    .side-nav-item.active {
      background: #f2f8ff;
      position: relative;
      padding: 10px 28px 10px 23px;
      border-radius: 8px;
      box-sizing: border-box;
    }

    .side-nav-item.active::before {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      width: 4px;
      height: 100%;
      background: #3188f4;
      border-radius: 0px 4px 4px 0px;
    }

    .side-nav-item.active img {
      width: 28px;
      height: 28px;
      filter: brightness(0) saturate(100%) invert(44%) sepia(93%) saturate(1400%) hue-rotate(200deg) brightness(98%) contrast(94%);
      opacity: 1;
    }

    .side-nav-item.active span {
      color: #3188f4;
      font-weight: 700;
    }

    .hero-content {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 48px;
      padding-top: 0;
    }

    .hero-text {
      padding-top: 90px;
      display: flex;
      flex-direction: column;
      gap: 11px;
      width: 690px;
    }

    .hero-badge {
      display: inline-block;
      font-size: 16px;
      font-weight: 800;
      color: #1f2024;
      border: 2px solid #1f2024;
      padding: 0px 12px;
      padding-top: 2px;
      border-radius: 6px;
      width: fit-content;
      /* letter-spacing: 0.1px; */
    }

    .hero-title,
    .main_title {
      display: inline-block;
      width: 100%;
      font-size: 44px;
      line-height: 60px;
      font-weight: 800;
      color: #1f2024;
      margin-top: 0px;
    }

    .hero-desc {
      margin-top: 16px;
      margin-left: 0px;
      /* padding-top: 0; */
      font-size: 18px;
      font-weight: 600;
      color: #616b7b;
      line-height: 25px;
      max-width: 600px;
    }

    .hero-cta {
      margin-top: -6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #3188f4;
      color: #ffffff;
      font-size: 18px;
      font-weight: 700;
      padding: 14px 36px;
      border-radius: 50px;
      width: 220px;
      transition: background 0.2s ease, transform 0.15s ease;
    }

    .hero-cta:hover {
      background: #2070d4;
      transform: translateY(-2px);
    }

    /* Hero CTA row — Start Free Trial + App Store + Google Play */
    .hero-cta-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: nowrap;
    }

    .hero-cta-btn {
      width: 220px !important;
      height: 44px !important;
      min-height: 44px !important;
      padding: 0 24px !important;
      font-size: 18px !important;
      margin-top: -4px;
      flex-shrink: 0;
    }

    .hero-cta-btn span {
      display: inline-block;
      transform: translateY(1px);
    }

    .hero-store-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .hero-store-btn {
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      border-radius: 8px;
      overflow: hidden;
      transition: opacity 0.2s;
    }

    .hero-store-btn:hover {
      opacity: 0.85;
    }

    .hero-store-btn img {
      width: 132px;
      height: 44px;
      object-fit: contain;
      display: block;
    }

    /* Mobile override — stack or allow wrap */
    @media (max-width: 767px) {
      .hero-cta-row {
        flex-direction: column;
        align-items: center;
        gap: 12px;
      }

      .hero-cta-btn {
        width: 312px !important;
        height: 48px !important;
      }

      .hero-store-btn img {
        width: 148px;
        height: 48px;
      }
    }

    /* ── TABLET ONLY: Hero CTA row — all three buttons on one line ── */
    @media (min-width: 768px) and (max-width: 1024px) {
      .hero-cta-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        width: 100% !important;
      }

      /* Unwrap the store row — sit inline with the CTA button */
      .hero-store-row {
        display: contents !important;
      }

      .hero-cta-btn {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 170px !important;
        height: 44px !important;
        min-height: 44px !important;
        font-size: 15px !important;
        padding: 0 16px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
      }

      .hero-store-btn {
        display: inline-flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
      }

      .hero-store-btn img {
        width: 120px !important;
        height: 40px !important;
        object-fit: contain !important;
        display: block !important;
      }
    }

    /* ── iPad Air specific (820px) ── */
    @media (min-width: 820px) and (max-width: 1023px) {
      .hero-cta-row {
        gap: 8px !important;
      }

      .hero-store-btn img {
        width: 115px !important;
        height: 38px !important;
      }
    }

    /* ========================================
       ENSURE ONLINE SAFETY SECTION
       ======================================== */
    .safety-section {
      background: #f2f8ff;
      padding: 50px 20px 60px;
    }

    .safety-inner {
      max-width: 956px;
      margin: 0 auto;
      text-align: center;
    }

    .safety-title {
      font-size: 34px;
      font-weight: 800;
      color: #1f2024;
      line-height: 44px;
      margin-bottom: 30px;
      margin-top: -23px;
    }

    .safety-desc {
      font-size: 18px;
      font-weight: 500;
      color: #383e48;
      line-height: 1.65;
    }

    .safety-desc strong {
      font-weight: 700;
      color: #1f2024;
    }

    /* ========================================
       KEY FEATURES & BENEFITS SECTION
       ======================================== */
    .features-section {
      background: #1a2845;
      padding: 72px 20px 72px;
    }

    .features-title {
      font-size: 34px;
      font-weight: 800;
      color: #ffffff;
      line-height: 44px;
      text-align: center;
      margin-bottom: 24px;
    }

    .features-row {
      max-width: 1084px;
      margin: 0 auto;
      display: flex;
      gap: 55px;
      align-items: flex-start;
    }

    .features-list {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 32px;
      padding-top: 29px;
    }

    .feature-item {
      display: flex;
      flex-direction: row;
      gap: 20px;
      cursor: pointer;
      align-items: stretch;
    }

    .feature-item .feature-line {
      width: 4px;
      background: #3188f4;
      border-radius: 3px;
      flex-shrink: 0;
      opacity: 0;
      align-self: stretch;
      /* dynamically takes the height of its sibling content */
      height: auto;
      /* no fixed height — fully dynamic */
    }

    .feature-item .feature-content {
      display: flex;
      flex-direction: column;
      gap: 5px;
      max-width: 550px;
    }

    .feature-item.active .feature-line {
      /* padding-top: 7px !important; */
      height: 83.38px;
      opacity: 1;
      background: #ffffff;
      border-radius: 3px;
      align-self: stretch;
      margin-top: 4px;
    }

    .feature-item h3 {
      font-size: 24px;
      font-weight: 800;
      color: #9db5ce;
    }

    .feature-item.active h3,
    .feature-item.active p {
      color: #ffffff;
    }

    .feature-item p {
      font-size: 18px;
      font-weight: 500;
      color: #9db5ce;
      line-height: 1.33em;
    }

    .donut-chart {
      transition: none;
    }

    /* Dashboard Card */
    .dashboard-card {
      width: 460px;
      min-width: 460px;
      border-radius: 20px;
      background: transparent;
      overflow: hidden;
      flex-shrink: 0;
    }

    .dashboard-schedule {
      background: #3188f4;
      padding: 20px 30px 18px;
    }

    .schedule-label {
      font-size: 12px;
      font-weight: 600;
      color: #e0eeff;
      margin-bottom: 5px;
    }

    .schedule-title {
      font-size: 18px;
      font-weight: 700;
      color: #ffffff;
    }

    .schedule-time {
      font-size: 14px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.8);
      margin-top: 2px;
    }

    .dashboard-today {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 30px;
    }

    .dashboard-today span {
      font-size: 16px;
      font-weight: 700;
      color: #1f2024;
      line-height: 20px;
    }

    .dashboard-today img {
      width: 19px;
      height: 19px;
      filter: brightness(0) saturate(100%) invert(44%) sepia(93%) saturate(1400%) hue-rotate(200deg) brightness(98%) contrast(94%);
    }

    .dashboard-main {
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      background: none;
      position: relative;
    }

    .donut-chart {
      padding-left: 31px;
      width: 450px;
      height: 609.5px;
      max-width: 450px;
      object-fit: contain;
      display: block;
      transition: none;
      border-radius: 20px;
      overflow: hidden;
    }


    .activity-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 0 20px 20px;
    }

    .activity-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .activity-row-left {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .activity-row-left img {
      width: 21px;
      height: 19px;
    }

    .activity-row-left span {
      font-size: 14px;
      font-weight: 400;
      color: #383e48;
    }

    .activity-time {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.86px;
      line-height: 18px;
    }

    .activity-time.social {
      color: #ffa600;
    }

    .activity-time.games {
      color: #fc644b;
    }

    .activity-time.entertainment {
      color: #229d7a;
    }

    .activity-time.others {
      color: #7c3780;
    }

    .icon-social {
      filter: brightness(0) saturate(100%) invert(72%) sepia(44%) saturate(5000%) hue-rotate(5deg) brightness(104%) contrast(101%);
    }

    .icon-games {
      filter: brightness(0) saturate(100%) invert(48%) sepia(72%) saturate(1600%) hue-rotate(338deg) brightness(98%) contrast(97%);
    }

    .icon-entertainment {
      filter: brightness(0) saturate(100%) invert(52%) sepia(65%) saturate(500%) hue-rotate(117deg) brightness(92%) contrast(91%);
    }

    .icon-others {
      filter: brightness(0) saturate(100%) invert(26%) sepia(48%) saturate(2000%) hue-rotate(280deg) brightness(80%) contrast(95%);
    }

    /* ========================================
       TESTIMONIALS SECTION
       ======================================== */
    .testimonials-section {
      padding: 60px 20px 70px;
    }

    .testimonials-title {
      font-size: 34px;
      font-weight: 800;
      color: #1f2024;
      line-height: 44px;
      text-align: center;
      margin-bottom: 50px;
      margin-top: -31px;

    }

    .testimonials-row {
      max-width: 1084px;
      margin: 0 auto;
      display: flex;
      gap: 50px;
    }

    .testimonial-card {
      flex: 1;
      border-radius: 15px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 15px;
      box-shadow: 0px 0px 2px 2px #00000026;
    }

    .testimonial-header {
      display: flex;
      flex-direction: column;

    }

    .testimonial-name {
      font-size: 16px;
      font-weight: 700;
      color: #1f2024;
    }

    .testimonial-location {
      font-weight: 500;
    }

    .testimonial-stars {
      display: flex;
      gap: 4px;
    }

    .testimonial-stars img {
      margin-left: -34px;
      height: 16.5px;
      width: 478px;
    }

    .testimonial-text {
      margin-bottom: 24px;
      font-size: 20px;
      font-weight: 400;
      color: #1f2024;
      line-height: 32px;
      margin-top: 4px;
    }

    /* ========================================
       AWARDS & RECOGNITIONS SECTION
       ======================================== */
    .awards-section {
      background: #f2f8ff;
      padding-left: 16px;
      padding-right: 16px;
    }

    .awards-title {
      padding-top: 14px;
      font-size: 34px;
      font-weight: 800;
      color: #1f2024;
      line-height: 44px;
      text-align: center;
      margin-bottom: 30px;
    }

    .awards-row {
      max-width: 1084px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 120px;
    }

    .award-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      min-height: 160px;
      gap: 16px;
    }

    .award-item img {
      width: 125px;
      height: 125px;
      object-fit: contain;
      display: block;
    }

    .award-item:nth-child(3) img {
      width: 125px;
      height: 86px;
      object-fit: contain;
    }

    .award-item span {
      font-size: 18px;
      font-weight: 600;
      color: #383e48;
      line-height: 22px;
      text-align: center;
    }

    /* ========================================
       FAQ SECTION
       ======================================== */
    .faq-section {
      padding: 30px 20px 70px;
    }

    .faq-title {
      font-size: 34px;
      font-weight: 800;
      color: #1f2024;
      line-height: 44px;
      text-align: center;
      margin-bottom: 40px;
    }

    .faq-list {
      max-width: 800px;
      width: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding: 0 20px;
      box-sizing: border-box;
    }

    .faq-item {
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
      background: #fff;
      border: 1px solid #e3e6ea;
      border-radius: 24px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12), 0 4px 4px rgba(0, 0, 0, 0.06);
      padding: 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .faq-question {
      padding: 14px 26px 0px 26px;
      min-height: unset;
      height: auto;
      font-size: 18px;
      font-weight: 600;
      color: #1f2024;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      gap: 12px;
      box-sizing: border-box;
    }

    .faq-question .faq-toggle {
      width: 12px;
      height: 12px;
      flex-shrink: 0;
      transition: transform 0.3s ease;
    }

    .faq-item.open .faq-toggle {
      transform: rotate(180deg);
    }

    .faq-answer {
      font-size: 14px;
      font-weight: 500;
      color: #616b7b;
      line-height: 1.7;
      padding: 0 26px;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
    }

    .faq-item.open .faq-answer {
      max-height: 500px;
      opacity: 1;
      padding: 12px 26px 14px;
      overflow: visible;
    }

    .faq-answer p {
      margin: 0;
      padding: 0;
      font-size: 16px;
      font-weight: 500;
      color: #81858A;
      line-height: 1.7;
    }

    /* ========================================
       DOWNLOAD SECTION
       ======================================== */
    .download-scroll-wrapper {
      display: none;
    }

    .download-section {
      background: #f2f8ff;
      /* padding: 60px 20px 60px;*/
      padding-top: 1px;
      padding-left: 16px;
      padding-right: 16px;
      text-align: center;
    }

    .download-title {
      margin-top: 30px;
      font-size: 34px;
      font-weight: 800;
      color: #1f2024;
      line-height: 44px;
      margin-bottom: 36px;
    }

    .download-badges {
      max-width: 500px;
      margin: 0 auto 40px;
      display: flex;
      gap: 80px;
      justify-content: center;
    }

    .download-column {
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: center;
    }

    .qr-code {
      width: 173px;
      height: 178px;
      object-fit: contain;
    }

    .store-badge {
      width: 173px;
      height: 58px;
      object-fit: contain;
    }

    .download-desc {
      font-size: 18px;
      font-weight: 500;
      color: #616b7b;
    }

    /* ========================================
       BLOG / ARTICLES SECTION
       ======================================== */
    .blog-section {
      padding: 30px 20px 64px;
    }

    .blog-title {
      font-size: 34px;
      font-weight: 800;
      color: #1f2024;
      line-height: 44px;
      text-align: center;
      margin-bottom: 40px;
    }

    .blog-row {
      max-width: 1084px;
      margin: 0 auto;
      display: flex;
      gap: 24px;
    }

    .blog-card {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 16px;
      transition: transform 0.2s ease;
      border-bottom: 1px solid rgba(56, 62, 72, 0.15);
      padding-bottom: 16px;
    }

    .blog-card:hover {
      transform: translateY(-4px);
    }

    .blog-card img.blog-img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      border-radius: 4px;
    }

    .blog-card-text {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .blog-card-text h3 {
      font-size: 24px;
      font-weight: 700;
      color: #1a2845;
      line-height: 1.35;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .blog-card-text p {
      font-size: 18px;
      font-weight: 400;
      color: #383e48;
      line-height: 28px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .blog-card .blog-date {
      font-size: 16px;
      font-weight: 300;
      color: #454a55;
      line-height: 20px;
    }

    /* ========================================
       CTA FOOTER SECTION
       ======================================== */
    .cta-footer {
      background: #1a2845;
      padding: 72px 20px 78px;
      text-align: center;
    }

    .cta-footer-title {
      font-size: 34px;
      font-weight: 800;
      color: #ffffff;
      line-height: 44px;
      margin-bottom: 24px;
    }

    .cta-benefits {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 32px;
      margin-bottom: 40px;
      flex-wrap: wrap;
    }

    .cta-benefit {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .cta-benefit img {
      width: 24px;
      height: 24px;
      filter: brightness(0) saturate(100%) invert(44%) sepia(93%) saturate(1400%) hue-rotate(200deg) brightness(98%) contrast(94%);
    }

    .cta-benefit span {
      font-size: 18px;
      font-weight: 500;
      color: #deebff;
    }

    .cta-footer .hero-cta {
      margin: 0 auto;
      padding: 16px 44px;
      font-size: 18px;
      border-radius: 10px;
    }

    /* ========================================
       BOTTOM FOOTER
       ======================================== */
    .bottom-footer {
      padding: 72px 20px 40px;
      position: relative;
    }

    .footer-top-line {
      height: 1px;
      background: rgba(217, 225, 237, 0.40);
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    }

    .footer-columns {
      max-width: 1084px;
      margin: 0 auto;
      display: flex;
      gap: 136px;
    }

    .footer-col {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .footer-col h4 {
      font-size: 20px;
      font-weight: 700;
      color: #1f2024;
    }

    .footer-col ul {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .footer-col ul li a {
      font-size: 15px;
      font-weight: 500;
      color: #454a55;
      transition: color 0.2s ease;
    }

    .footer-col ul li a:hover {
      color: #3188f4;
    }

    .footer-connect {
      display: flex;
      flex-direction: column;
      gap: 72px;
    }

    .footer-social-block {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .footer-social-icons {
      display: flex;
      gap: 24px;
      align-items: center;
    }

    .footer-social-icons a {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s ease;
    }

    .footer-social-icons a:hover {
      transform: scale(1.15);
    }

    .footer-social-icons img {
      width: 32px;
      height: 32px;
    }

    .footer-social-icons .x-icon {
      width: 22px;
      height: 26px;
    }

    .footer-newsletter {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .footer-newsletter h4 {
      font-size: 20px;
      font-weight: 700;
      color: #1f2024;
    }

    .newsletter-form {
      display: flex;
      align-items: center;
      border: 1px solid #dbdfe8;
      border-radius: 40px;
      overflow: hidden;
      padding: 4px 4px 4px 20px;
    }

    .newsletter-form input {
      flex: 1;
      font-size: 18px;
      font-weight: 400;
      color: #454a55;
      padding: 10px 0;
      background: transparent;
    }

    .newsletter-form input::placeholder {
      color: #454a55;
    }

    .newsletter-form button {
      font-size: 18px;
      font-weight: 700;
      color: #3188f4;
      background: transparent;
      padding: 10px 24px;
      border-radius: 30px;
      border: 1px solid #3188f4;
      white-space: nowrap;
      transition: background 0.2s ease, color 0.2s ease;
    }

    .newsletter-form button:hover {
      background: #3188f4;
      color: #ffffff;
    }

    .footer-bottom-line {
      height: 1px;
      background: rgba(217, 225, 237, 0.40);
      max-width: 1084px;
      margin: 32px auto;
    }

    .footer-copyright {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .footer-copyright img {
      width: 23px;
      height: 24px;
      filter: brightness(0) saturate(100%) invert(78%) sepia(9%) saturate(304%) hue-rotate(175deg) brightness(93%) contrast(88%);
    }

    .footer-copyright span {
      font-size: 15px;
      font-weight: 500;
      color: #969faf;
    }



    /* ========================================
       ANIMATIONS
       ======================================== */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(24px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .fade-in {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
      padding-bottom: 30px;
    }

    /* ========================================
       PAGE LAYOUT STYLES
       ======================================== */
    .page {
      width: 100%;
      min-width: 320px;
    }

    .page-inner {
      max-width: 100%;
      margin: 0 auto;
      width: 100%;
    }

    .section-banner {
      position: relative;
      padding: 64px 0;
      width: 100%;
      box-sizing: border-box;
    }

    .banner-grid {
      display: grid;
      grid-template-columns: 300px minmax(0, 690px);
      gap: 94px;
      padding: 0 24px;
      align-items: start;
      max-width: 1108px;
      margin-left: auto;
      margin-right: auto;
      width: 100%;
      box-sizing: border-box;
    }

    /* ========================================
       TABLET STYLES (768px - 1024px)
       ======================================== */
    @media (max-width: 1024px) {

      html,
      body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
      }

      .hero-cta-btn span {
        transform: none;
      }

      .hero-section,
      .safety-section,
      .features-section,
      .testimonials-section,
      .awards-section,
      .faq-section,
      .download-section,
      .blog-section,
      .cta-footer,
      .bottom-footer {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
      }

      .nav-menu {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        height: 100vh;
        background: #ffffff;
        flex-direction: column;
        align-items: flex-start;
        padding: 100px 30px 30px;
        gap: 0;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
        z-index: 105;
        overflow-y: auto;
      }

      .nav-menu.active {
        display: flex;
      }

      .nav-item {
        flex-direction: row;
        width: 100%;
        padding: 14px 0;
        border-bottom: 1px solid #f0f2f5;
        gap: 8px;
      }

      .nav-item::after {
        display: none;
      }

      .nav-right .btn-trial {
        display: none;
      }

      .nav-menu .btn-trial-mobile {
        display: block;
        width: 100%;
        text-align: center;
        background: #3188f4;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        padding: 12px 20px;
        border-radius: 6px;
        margin-top: 20px;
      }

      .hamburger {
        display: flex;
      }

      .mobile-nav-overlay {
        display: block;
        pointer-events: none;
      }

      .mobile-nav-overlay.active {
        pointer-events: auto;
      }

      /* Hero */
      .hero-section {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        padding: 40px 0px 60px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
      }

      .side-nav {
        display: flex;
        flex-direction: column;
        width: 305px;
        gap: 8px;
        padding: 0;
        align-self: flex-start;
        flex-shrink: 0;
        margin-top: -9px;
        margin-left: 23px;
      }

      .side-nav-item {
        padding-top: 20px;
        padding: 10px 18px;
        display: flex;
        align-items: center;
        gap: 11px;
        border-radius: 8px;
        height: 56px;
      }

      .side-nav-item.active {
        width: 262px;
        background: #f2f8ff;
        position: relative;
        padding: 10px 27px 10px 17px;
        border-radius: 8px;
        box-sizing: border-box;
      }

      .side-nav-item.active::before {
        width: 4px;
        height: 100%;
        right: 0;
        top: 0;
        bottom: auto;
        left: auto;
        transform: none;
        border-radius: 0px 4px 4px 0px;
      }

      .side-nav-item span {
        font-size: 18px;
      }

      .hero-content {
        align-items: flex-start;
        gap: 40px;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
      }

      .hero-text {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }

      .hero-title {
        padding-top: -4px !important;
        font-size: 40px;
        line-height: 56px;
        max-width: 690px;
        margin-bottom: 22px;
        margin-top: -2px;
      }

      .hero-desc {
        max-width: 464px;
        line-height: 24px;
        padding-bottom: 10px;
      }

      .hero-cta {
        width: 194px;
        padding: 14px 24px;
        border-radius: 32px;
        text-align: center;
      }
    }

    /* ========================================
       IPAD MINI SPECIFIC OVERRIDES (768px - 819px)
       ======================================== */
    @media screen and (min-width: 768px) and (max-width: 819px) {
      .hero-section {
        padding: 43px 32px !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 24px !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }

      .side-nav {
        width: 268px !important;
        flex-shrink: 0 !important;
        order: 1 !important;
        margin-top: 29px !important;
        margin-left: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 0 !important;
      }

      .side-nav-item {
        width: 100% !important;
        max-width: 260px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        min-height: 48px !important;
        height: 48px !important;
        padding: 0 16px !important;
        border-radius: 6px !important;
        position: relative !important;
        box-sizing: border-box !important;
      }

      .side-nav-item img {
        width: 28px !important;
        height: 28px !important;
        margin-right: 10px !important;
        flex-shrink: 0 !important;
        object-fit: contain !important;
      }

      .side-nav-item span {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #383e48 !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
      }

      .side-nav-item.active span {
        font-weight: 700 !important;
        color: #3187f3 !important;
      }

      .side-nav-item.active {
        width: 100% !important;
        background: #f2f8ff !important;
        border-radius: 6px !important;
        padding: 0 16px !important;
      }

      .side-nav-item.active::before,
      .side-nav-item.active::after {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        width: 4px !important;
        height: 100% !important;
        background: #3188f4 !important;
        border-radius: 0 6px 6px 0 !important;
      }

      .hero-content {
        padding-top: 76px;
        flex: 1;
        min-width: 0;
        order: 2;
        max-width: 460px;
      }

      .hero-text {
        margin-top: 40px;
        width: 412px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 51px;
        margin-left: 25px;
        padding-top: 0;
      }

      .hero-badge {
        align-self: flex-start;
        font-size: 16px;
      }

      .hero-title {
        font-size: 40px !important;
        line-height: 56px !important;
        max-width: 440px !important;
        width: 100% !important;
        height: auto !important;
      }

      .hero-desc {
        padding: 8px 0 24px;
        width: 100% !important;
        height: auto !important;
        margin-top: 9px;
        font-size: 18px;
        font-weight: 500;
        line-height: 24px;
        max-width: 412px;
      }

      .hero-cta-row {
        display: flex;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        margin-top: -10px;
      }

      .hero-cta,
      .hero-cta-btn {
        width: 190px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0px 20px !important;
        font-size: 16px !important;
        white-space: nowrap !important;
        align-self: flex-start;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 32px;
        font-weight: 700;
        background: #3188f4;
        color: #ffffff;
      }

      .hero-store-btn {
        flex-shrink: 0 !important;
      }

      .hero-store-btn img {
        width: 108px !important;
        height: 36px !important;
        max-width: 108px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
      }
    }

    /* TABLET FEATURES SECTION */
      .features-section {
        background: #1a2845;
        padding: 40px 20px 60px;
      }

      .features-title {
        font-size: 28px;
        line-height: 36px;
        text-align: center;
        margin-bottom: 24px;
        color: #ffffff;
      }

      .features-row {
        display: flex;
        flex-direction: column;
        gap: 0;
        align-items: center;
        max-width: 100%;
      }

      /* Horizontal scrollable tab list */
      .features-list {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0;
        width: 100%;
        margin: 0 0 40px 0;
        padding: 0;
      }

      .features-list::-webkit-scrollbar {
        display: none;
      }

      /* Each feature tab item */
      .feature-item {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        scroll-snap-align: start;
        width: 390px;
        min-width: 390px;
        max-width: 390px;
        padding: 12px 16px 16px;
        margin: 0 40px 0 0;
        gap: 6px;
        cursor: pointer;
        border-bottom: 3px solid transparent;
        box-sizing: border-box;
      }

      .feature-item:last-child {
        margin-right: 0;
      }

      /* Hide the vertical feature line — not needed in tab layout */
      .feature-item .feature-line {
        display: none;
      }

      /* Active tab gets white bottom border */
      .feature-item.active {
        border-bottom: 3px solid #ffffff;
        background: transparent;
        border-radius: 0;
      }

      .feature-item h3 {
        font-size: 18px;
        font-weight: 700;
        color: #9db5ce;
        white-space: normal;
        line-height: 1.3;
      }

      .feature-item.active h3 {
        color: #ffffff;
      }

      .feature-item p {
        display: block;
        font-size: 14px;
        font-weight: 500;
        color: #9db5ce;
        line-height: 1.5;
        white-space: normal;
        overflow: visible;
        -webkit-line-clamp: unset;
      }

      .feature-item.active p {
        color: #ffffff;
      }

      /* Dashboard card below the tabs */
      .dashboard-card {
        width: 460px;
        max-width: 460px;
        min-width: unset;
        margin: 0 auto;
        padding: 0;
        border-radius: 20px !important;
      }

      .donut-chart {
        width: 460px;
        height: 609.5px;
        object-fit: contain;
        display: block;
        border-radius: 20px !important;
        overflow: hidden !important;
      }

      /* Awards */
      .awards-section {
        background: #f2f8ff;
        padding: 40px 16px 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .awards-title {
        font-size: 34px;
        margin-bottom: 24px;
      }

      .awards-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 40px;
        max-width: 600px;
        margin: 0;
        justify-items: center;
      }

      .award-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        text-align: center;
        min-height: 160px !important;
        justify-content: flex-end !important;
        align-items: center !important;
      }

      .award-item img {
        width: 125px !important;
        height: 125px !important;
        object-fit: contain !important;
        margin-bottom: 0;
      }

      /* Specific sizing for Trusted Provider (BBB) */
      .award-item:nth-child(3) img {
        width: 125px !important;
        height: 86px !important;
      }

      .award-item span {
        font-size: 12px;
        font-weight: 600;
        color: #454a55;
        margin-top: -10px;
      }

      /* FAQ */
      .faq-question .faq-toggle {
        width: 12px !important;
        height: 12px !important;
      }

      /* Tablet FAQ card sizing */
      .faq-item {
        width: 100%;
        max-width: 756px;
        min-height: 58px;
        height: auto;
        background: #fff;
        border-radius: 24px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12), 0 4px 4px rgba(0, 0, 0, 0.06);
        margin: 0 auto 16px;
        border: 1px solid #e3e6ea;
        padding: 0 !important;
        gap: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .faq-question {
        font-size: 16px;
        font-weight: 600;
        color: #1f2024;
        padding: 0 20px;
        height: 58px;
        min-height: 58px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        gap: 12px;
        box-sizing: border-box;
      }

      .faq-answer {
        font-size: 16px;
        font-weight: 500;
        color: #81858A;
        line-height: 1.7;
        padding: 0 20px;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.3s ease;
      }

      .faq-item.open .faq-answer {
        max-height: 300px;
        opacity: 1;
        padding: 8px 20px 24px;
      }

      .faq-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 20px;
        gap: 0;
      }

      .faq-title {
        font-size: 28px;
        margin-bottom: 30px;
      }

      /* Blog */
      .blog-row {
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px;
      }

      .blog-card {
        flex: 0 1 calc(50% - 12px);
        min-width: 280px;
        max-width: 380px;
        border-radius: 0;
        overflow: hidden;
        border-bottom: 1px solid rgba(56, 62, 72, 0.15) !important;
        padding-bottom: 16px !important;
      }

      .blog-card img.blog-img {
        border-radius: 3px 3px 3px 3px;
      }

      .blog-card-text h3 {
        max-width: 260px;
      }

      .blog-card-text p {
        max-width: 300px;
      }

      /* Footer */
      .footer-columns {
        flex-wrap: wrap;
        gap: 40px;
      }

      .footer-col {
        flex: 1 1 calc(33% - 30px);
        min-width: 140px;
      }

      .footer-connect {
        flex: 1 1 100%;
        gap: 40px;
      }

      /* CTA benefits */
      .cta-benefits {
        gap: 20px;
      }

    @media (max-width: 1024px) {
      /* TABLET TESTIMONIALS */
      .testimonials-section {
        padding: 60px 0px 50px;
      }

      .testimonials-title {
        font-size: 30px;
        line-height: 40px;
        text-align: center;
        margin-bottom: 40px;
        padding: 0 20px;
      }

      .testimonials-row {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0;
        padding: 0;
        margin: 0;
        width: 100%;
      }

      .testimonials-row::-webkit-scrollbar {
        display: none;
      }

      .testimonial-card {
        flex: 0 0 688px;
        width: 688px;
        min-width: 688px;
        max-width: 688px;
        height: 206px;
        scroll-snap-align: center;
        margin: 0 250px 0 0;
        padding: 20px;
        border-radius: 15px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 15px;
        flex-shrink: 0;
        box-shadow: 0px 0px 2px 2px #00000026 !important;
      }

      .testimonial-card:first-child {
        margin-left: 50px;
      }

      .testimonial-card:last-child {
        margin-right: 50px;
      }

      .testimonial-text {
        font-size: 18px;
        line-height: 1.5;
      }

      /* Dots — visible on tablet */
      .testi-dots {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 24px;
      }

      .testi-dot {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 2px solid #1a2845;
        background: transparent;
        transition: background 0.2s ease;
        cursor: pointer;
        display: block;
      }

      .testi-dot.active {
        background: #1a2845;
      }

      /* Safety */
      .safety-section {
        background: #f2f8ff;
        padding: 48px 20px 26px;
      }
    } /* end @media (max-width: 1024px) for TABLET TESTIMONIALS + Safety */

    /* ========================================
       DESKTOP TESTIMONIALS (1025px+)
       ========================================
       The orphaned TABLET TESTIMONIALS block above was applying at all
       widths because it sat outside any media query. Now wrapped in
       max-width: 1024px, the base styles (lines 808-858) resume on
       desktop. This block adds the two-card grid the live site shows.
       ======================================== */
    @media (min-width: 1025px) {
      .testimonials-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
        max-width: 1084px;
        margin: 0 auto;
        padding: 0;
        overflow: visible;
        scroll-snap-type: none;
        flex-direction: unset;
        width: auto;
      }

      .testimonial-card {
        flex: none;
        width: auto;
        min-width: 0;
        max-width: none;
        height: auto;
        margin: 0;
        scroll-snap-align: unset;
      }

      .testimonial-card:first-child {
        margin-left: 0;
      }

      .testimonial-card:last-child {
        margin-right: 0;
      }

      .testi-dots {
        display: none;
      }
    }

    /* ========================================
       MOBILE STYLES (320px - 767px)
       ======================================== */
    @media (max-width: 767px) {

      body,
      main {
        margin-top: 0;
        padding-top: 0;
      }

      .header-inner {
        height: 64px;
      }

      .logo img {
        height: 26px;
      }

      /* Hero */
      .hero-section {
        padding: 32px 16px 40px;
        gap: 24px;
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
        margin-top: 48px;
      }


      .mobile-nav-dropdown {
        display: block;
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        z-index: 90;
        background: #f2f8ff;
        border-bottom: 1px solid #e8ecf1;
        width: 100%;
        margin: 0;
      }

      .mobile-nav-header {
        display: flex;
        align-items: center;
        gap: 5px;
        height: 48px;
        padding: 0 24px;
        box-sizing: border-box;
        cursor: pointer;
        background: #f2f8ff;
        border-bottom: 1px solid #e8ecf1;
      }

      .mobile-nav-header span {
        font-size: 16px;
        font-weight: 600;
        line-height: 20px;
        color: #3188f4;
        white-space: nowrap;
      }

      .mobile-nav-header img {
        filter: brightness(0) saturate(100%) invert(44%) sepia(93%) saturate(1400%) hue-rotate(200deg) brightness(98%) contrast(94%);
      }

      .dropdown-chevron {
        transition: transform 0.3s ease;
      }

      .mobile-nav-dropdown.open .dropdown-chevron {
        transform: rotate(180deg);
      }

      .mobile-nav-list {
        display: none;
        flex-direction: column;
        background: #f2f8ff;
        padding: 8px 0 0;
        border-bottom: 1px solid #e8ecf1;
      }

      .mobile-nav-dropdown.open .mobile-nav-list {
        display: flex;
      }

      .mobile-nav-list .side-nav-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 12px 40px;
        border-bottom: 1px solid #e8ecf1;
        white-space: normal;
        height: auto;
      }

      .mobile-nav-list .side-nav-item:last-child {
        border-bottom: none;
      }

      .side-nav-item span {
        font-size: 15px;
        font-weight: 600;
        color: #383e48;
      }

      .side-nav-item.active {
        background: #f2f8ff;
        border-left: 3px solid #3188f4;
      }

      .side-nav-item.active::before {
        display: none;
      }

      .hero-section .side-nav {
        display: none;
      }

      .side-nav {
        flex-direction: column;
        width: 100%;
        overflow: visible;
        gap: 0;
        padding: 0;
      }

      .side-nav-item img {
        width: 22px;
        height: 22px;
      }

      .hero-content {
        align-items: center;
        gap: 13px;
        overflow: hidden;
      }

      .hero-text {
        align-items: center;
        text-align: center;
        gap: 5px;
        width: 100%;
        box-sizing: border-box;
      }

      .hero-badge {
        font-size: 14px;
        padding: 3px 12px;
        padding-top: 3px;
        border-radius: 6px;
        width: fit-content;
      }

      .hero-title {
        font-size: 30px;
        line-height: 42px;
        margin-top: 3px;
      }

      .hero-desc {
        font-size: 16px;
        margin-top: -11px;
        max-width: 395px;
        line-height: 24px;
        padding-bottom: 0px;
        font-weight: 500;
      }

      .hero-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #3188f4;
        color: #ffffff;
        font-size: 18px;
        font-weight: 700;
        padding: 0 20px;
        border-radius: 50px;
        width: 312px;
        height: 48px;
        transition: background 0.2s ease, transform 0.15s ease;
      }

      .hero-cta-row {
        margin-top: 10px;
        flex-direction: column;
        align-items: center;
        gap: 12px;
      }

      /* Safety */
      .safety-section {
        padding: 40px 16px;
      }

      .safety-inner {
        text-align: left;
      }

      .safety-title {
        margin-top: -20px;
        font-size: 26px;
        font-weight: 800;
        color: #1f2024;
        line-height: 36px;
        margin-bottom: 25px;
        text-align: left;
      }

      .safety-desc {
        font-size: 16px;
        letter-spacing: -0.25px;
        text-align: left;
      }

      .m-line {
        display: inline;
      }

      /* Features */
      .features-section {
        padding: 32px 0px 40px;
      }

      .features-title {
        font-size: 26px;
        line-height: 34px;
        margin-bottom: 20px;
        padding: 0 20px;
        text-align: left;
      }

      .features-row {
        flex-direction: column;
        gap: 0;
      }

      .features-list {
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 0;
        padding: 0 20px 10px;
        width: 100%;
        scrollbar-width: none;
      }

      .features-list::-webkit-scrollbar {
        display: none;
      }

      .feature-item {
        flex-direction: column;
        flex-shrink: 0;
        scroll-snap-align: start;
        width: fit-content;
        min-width: unset;
        max-width: unset;
        padding: 12px 16px 16px;
        position: relative;
        border-bottom: 3px solid transparent;
        gap: 8px;
        display: inline-flex;
      }

      .feature-item .feature-line {
        display: none;
      }

      .feature-item.active {
        border-bottom: none;
        background: transparent;
        border-radius: 0;
        position: relative;
      }

      .feature-item.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 16px;
        right: 16px;
        height: 3px;
        background: #ffffff;
        border-radius: 2px;
      }

      .feature-item h3 {
        font-size: 20px;
        font-weight: 700;
        white-space: nowrap;
        line-height: 1.3;
        color: #ffffff;
      }

      .feature-item.active h3 {
        color: #ffffff;
        display: inline-block;
        width: fit-content;
      }

      .feature-item p {
        display: block;
        font-size: 16px;
        font-weight: 400;
        color: #9db5ce;
        line-height: 1.5;
        white-space: normal;
        overflow: visible;
        -webkit-line-clamp: unset;
        max-width: 250px;
      }

      .feature-item.active p {
        color: #ffffff;
      }

      .dashboard-card {
        width: 100%;
        max-width: 100%;
        margin-top: 0;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: transparent;
        border-radius: 20px;
      }

      .dashboard-card .donut-chart {
        width: 100%;
        max-width: 320px;
        height: auto;
        object-fit: contain;
        border-radius: 20px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-left: 0;
      }

      .donut-chart {
        padding-left: 0 !important;
      }

      /* Testimonials */
      .testimonials-section {
        padding: 0px 0px 40px;
      }

      .testimonials-title {
        font-size: 26px;
        line-height: 34px;
        padding: 32px 20px 24px;
        margin: 0;
      }

      .testimonials-row {
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 0;
        padding-left: calc(50vw - 156px);
        padding-right: calc(50vw - 156px);
        padding-bottom: 5px;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
      }

      .testimonials-row::-webkit-scrollbar {
        display: none;
      }

      .testimonial-card {
        flex: 0 0 312px;
        width: 312px;
        min-width: 312px;
        height: 244px;
        max-width: 312px;
        margin: 0 149px 0 0;
        padding: 20px;
        scroll-snap-align: center;
        border: 1.5px solid #c8cdd6;
        border-radius: 12px;
        box-sizing: border-box;
        box-shadow: 0px 2px 8px rgba(56, 62, 72, 0.12), 0px 0px 0px 1px rgba(56, 62, 72, 0.08);
      }

      .testimonial-card:first-child {
        margin-left: 0;
      }

      .testimonial-card:last-child {
        margin-right: 0;
      }

      .testimonial-text {
        font-size: 17px;
      }

      .testimonial-stars img {
        margin-left: 0px;
      }

      .testi-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 15px;
      }

      .testi-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 2px solid #1a2845;
        background: transparent;
        transition: background 0.2s;
        cursor: pointer;
      }

      .testi-dot.active {
        background: #1a2845;
      }

      /* Awards */
      .awards-section {
        padding: 16px 0px 16px;
        padding-bottom: 16px;
        padding-top: 16px;
      }

      .awards-title {
        font-size: 26px;
        line-height: 34px;
        margin-bottom: 24px;
      }

      .awards-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
        padding: 0 16px;
        align-items: start;
        justify-items: center;
      }

      .award-item,
      .award-item:nth-child(3) {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        gap: 8px;
        width: 100%;
        padding-bottom: 0;
        min-height: unset;
      }

      .awards-row .award-item img,
      .awards-row .award-item:nth-child(3) img {
        width: auto;
        max-width: 100%;
        height: 80px;
        object-fit: contain;
        display: block;
        margin: 0 auto;
      }

      .award-item span {
        font-size: 12px;
        font-weight: 600;
        color: #383e48;
        text-align: center;
        min-height: 2.6em;
      }

      /* FAQ */
      .faq-section {
        padding: 24px 16px 36px;
        background: #ffffff;
      }

      .faq-title {
        font-size: 22px;
        font-weight: 800;
        line-height: 30px;
        text-align: center;
        margin-bottom: 20px;
        color: #1f2024;
      }

      .faq-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0;
      }

      .faq-item {
        width: 100%;
        background: #ffffff;
        border-radius: 24px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12), 0 4px 4px rgba(0, 0, 0, 0.06);
        border: 1px solid #e3e6ea;
        padding: 0 !important;
        margin: 0px 0px 16px !important;
        overflow: hidden;
        height: auto !important;
        min-height: unset !important;
        display: flex;
        flex-direction: column;
      }

      .faq-question {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 14px 14px;
        font-size: 16px;
        font-weight: 600;
        color: #1f2024;
        min-height: unset;
        cursor: pointer;
        gap: 12px;
      }

      .faq-section .faq-item {
        padding: 0 !important;
        height: auto !important;
        min-height: unset !important;
        margin: 0px 0px 16px !important;
      }

      .faq-section .faq-item:last-child {
        margin-bottom: 0 !important;
      }

      .faq-section .faq-question {
        padding: 20px 16px !important;
        margin: 0 !important;
        height: auto !important;
        min-height: unset !important;
        line-height: 1.4 !important;
        font-size: 16px !important;
        font-family: 'Manrope', sans-serif !important;
      }

      .faq-section .faq-list .faq-item {
        padding: 0 !important;
        gap: 0 !important;
      }

      .faq-section .faq-list .faq-item.open {
        padding-bottom: 0 !important;
      }

      .faq-question .faq-toggle {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
      }

      .faq-answer {
        font-size: 16px;
        font-weight: 600;
        font-family: 'Manrope', sans-serif;
        color: #81858A;
        line-height: 1.6;
        padding: 8px 16px 20px;
        overflow: hidden;
      }

      /* When closed — collapse answer completely */
      .faq-item:not(.open) .faq-answer {
        padding: 0 16px !important;
        max-height: 0 !important;
        opacity: 0 !important;
      }

      /* When open — full padding visible */
      .faq-item.open .faq-answer {
        padding: 8px 16px 20px !important;
      }

      /* Download */
      .download-section {
        padding: 0;
        background: #f2f8ff;
        overflow: hidden;
      }

      section.download-section>.download-title,
      section.download-section>.download-desc,
      .download-badges {
        display: none;
      }

      .download-title {
        font-size: 26px;
        font-weight: 800;
        line-height: 1.3;
        text-align: left;
        margin-bottom: 20px;
        color: #1f2024;
      }

      /* Vertical wrapper */
      .download-scroll-wrapper {
        display: flex;
        flex-direction: column;
        gap: 40px;
        padding: 24px 16px 32px;
      }

      /* Each tile */
      .download-tile {
        display: flex;
        flex-direction: column;
        width: 100%;
      }

      /* QR code — full width matching 398×409 ratio */
      .download-tile .qr-code {
        width: 398px;
        height: 409.17px;
        max-width: 100%;
        aspect-ratio: 398 / 409;
        object-fit: contain;
        display: block;
        margin: 0 auto;
      }

      /* Store badge — matching 220×73.75 ratio */
      .download-tile .store-badge {
        width: 100%;
        max-width: 220px;
        height: 73px;
        object-fit: contain;
      }

      /* Download column inside tile */
      .download-tile .download-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        width: 100%;
      }

      /* Description tile */
      .download-tile-desc {
        flex-direction: column;
        align-items: center;
        width: 100%;
      }

      .download-tile-desc .download-desc {
        font-size: 18px;
        font-weight: 500;
        color: #616b7b;
        line-height: 1.6;
        text-align: center;
      }

      /* Blog */
      .blog-section {
        padding: 40px 16px 40px;
      }

      .blog-title {
        font-size: 26px;
        font-weight: 800;
        line-height: 30px;
        text-align: center;
        margin-bottom: 24px;
      }

      .blog-row {
        flex-direction: column;
        gap: 32px;
      }

      .blog-card {
        gap: 12px;
        background: transparent;
        border: none;
        border-radius: 0;
        overflow: visible;
        margin-bottom: 8px;
        width: 100%;
        max-width: 100%;
        border-bottom: 1px solid rgba(56, 62, 72, 0.15);
        padding-bottom: 16px;
      }

      .blog-card+.blog-card {
        padding-top: 8px;
        border-top: none;
      }

      .blog-card img.blog-img {
        width: 100%;
        max-width: none;
        height: auto;
        aspect-ratio: 387 / 225.75;
        border-radius: 4px;
        object-fit: cover;
        display: block;
        margin-top: 0;
      }

      .blog-card-text {
        padding: 0;
        gap: 8px;
        width: 100%;
      }

      .blog-card-text h3 {
        font-size: 22px;
        line-height: 1.4;
        max-width: 100%;
      }

      .blog-card-text p {
        font-size: 16px;
        line-height: 24px;
        color: #616b7b;
        max-width: 100%;
      }

      .blog-card .blog-date {
        font-size: 12px;
        font-family: 'Manrope', sans-serif;
        color: #383e48;
        padding: 0;
        margin-top: 4px;
      }

      /* CTA Footer */
      .cta-footer {
        padding: 50px 20px 56px;
      }

      .cta-footer-title {
        font-size: 26px;
        line-height: 34px;
      }

      .cta-benefits {
        flex-direction: column;
        gap: 14px;
        align-items: flex-start;
        padding-left: 20px;
      }

      .cta-footer .hero-cta {
        width: 100%;
        max-width: 320px;
      }

      /* Bottom Footer */
      .bottom-footer {
        padding: 40px 20px 30px;
      }

      .footer-columns {
        flex-direction: column;
        gap: 36px;
      }

      .footer-col {
        flex: 1 1 100%;
      }

      .footer-connect {
        gap: 36px;
      }

      .newsletter-form {
        flex-direction: column;
        border-radius: 16px;
        padding: 12px;
        gap: 10px;
      }

      .newsletter-form input {
        width: 100%;
        padding: 10px;
      }

      .newsletter-form button {
        width: 100%;
        padding: 12px 20px;
      }


    }

    @media (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2) {
      .blog-card img.blog-img {
        border-radius: 0;
      }
    }

    @media screen and (max-width: 480px) {
      .blog-card img.blog-img {
        border-radius: 0 !important;
      }
    }

    @media screen and (min-width: 1025px) {
      .hero-text {
        padding-top: 89px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 690px;
      }

      .hero-content {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 51px;
      }

      .hero-store-row {
        display: flex;
        align-items: center;
        gap: 10px;
        position: relative;
        top: -3px;
      }
    }

/* ========================================
   SHARED-FOOTER PROTECTION
   Nothing above this line is modified.

   The export carries its own footer stylesheet, but its body contains
   no footer markup, so those rules are dead in the source. Four of the
   class names also exist in footer.css, and because this file loads
   after it, two of them would restyle the real footer partial:

     .footer-connect       gap 72px   (footer.css: 24px)
     .footer-copyright img colour filter on the logo

   Both are restored to footer.css's values here.
======================================== */

.footer-connect {
    gap: 24px;
}

.footer-copyright img {
    filter: none;
}

/* ========================================
   PHONE HERO OFFSET
   Nothing above this line is modified.

   At <=767px this export sets body { padding-top: 0 } and then pushes
   .hero-section down 48px itself to clear its own header. header.css
   now reserves the full mobile header height plus a 16px gap for every
   page, so the section's own offset would stack on top of it and leave
   the hero far lower here than on the other pages. Zeroed so all pages
   share the same space below the header; the section's inner padding
   is unchanged.
======================================== */

@media (max-width: 767px) {
    .hero-section {
        margin-top: 0 !important;
    }
}

/* ========================================
   PHONE HERO CLEARANCE
   Nothing above this line is modified.

   The export clears its own fixed header and sub-nav with padding-top: 90px on .hero-text. header.css now reserves the header, so only the 49px sub-nav needs clearing. 51px leaves the same 50px gap below the bar that Screen Time already shows.
   Phones only; tablet and desktop keep the export's values.
======================================== */

@media (max-width: 767px) {
    .hero-text {
        padding-top: 51px;
    }
}

/* ========================================
   SUB-NAV DIVIDER
   Nothing above this line is modified.

   The bar's border-bottom is #E8ECF1 on an #F2F8FF background - about
   ten shades apart, so the line reads as absent and the bar runs into
   the content below it. Replaced with the value Social Media Monitor's
   bar already uses, which is the same neutral at a strength that
   actually shows. Colour only; the 1px border and everything else are
   unchanged.
======================================== */

.mobile-nav-dropdown {
    border-bottom-color: rgba(56, 62, 72, 0.14);
}

/* ------------------------------------------------------------------
   MOBILE SUB-NAV — ALIGN TO SCREEN TIME (phones only)
   This page's phone sub-nav was exported with its own sizing: a taller
   toggle row, a 24-40px left inset that did not line up with the rows
   below it, 15px/600 labels, 22px icons and a bottom hairline on every
   row. The Screen Time sub-nav is the reference, so the block below
   restates its own values (the .mobile-subnav__* rules in
   page-screen-time.hbs) against this page's class names:
     toggle   12px 16px box, icon 28px from the left, 9px icon-to-label
              gap, label Manrope 16px/800 #3187f3
     rows     13px 28px, 12px gap, 20px icons, Manrope 16px/500 #383e48,
              1.4 line-height, separated by a top hairline
              rgba(56, 62, 72, .1) so the first row under the toggle
              carries the same rule as every row after it
   Nothing above 767px is touched, and Screen Time itself is unchanged.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {

    .mobile-nav-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        height: auto;
        /* 16px box + the icon's own 12px offset = the 28px left edge the
           rows below use, so toggle icon and row icons share one line. */
        padding: 12px 16px 12px 28px;
        box-sizing: border-box;
        background: #f2f8ff;
    }

    /* 6px flex gap + 3px here = Screen Time's 9px icon-to-label gap,
       while the label-to-chevron gap stays at its 6px. */
    .mobile-nav-header img {
        width: 20px;
        height: 20px;
        object-fit: contain;
        flex-shrink: 0;
        margin-right: 3px;
    }

    .mobile-nav-header span {
        font-family: 'Manrope', sans-serif;
        font-size: 16px;
        font-weight: 800;
        line-height: 1.4;
        color: #3187f3;
    }

    /* Screen Time's chevron is a 16px box on a 20-unit viewBox, so the
       arrow it actually draws is ~8px wide with a 1.6px stroke. This
       page's chevron is drawn edge to edge on a 12/14-unit viewBox, so
       10px reproduces the same arrow rather than a larger one. */
    .mobile-nav-header .dropdown-chevron {
        width: 10px;
        height: 6px;
        flex-shrink: 0;
    }

    .mobile-nav-header .dropdown-chevron path {
        stroke: #3187f3;
    }

    .mobile-nav-list {
        padding: 0;
        width: 100%;
    }

    .mobile-nav-list .side-nav-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 13px 28px;
        height: auto;
        border-top: 1px solid rgba(56, 62, 72, 0.1);
        border-bottom: none;
        background: #f2f8ff;
    }

    .mobile-nav-list .side-nav-item img {
        width: 20px;
        height: 20px;
        object-fit: contain;
        flex-shrink: 0;
        filter: none;
    }

    .mobile-nav-list .side-nav-item span {
        font-family: 'Manrope', sans-serif;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.4;
        color: #383e48;
    }

}

/* ========================================
   ACTIVITY SUMMARY - FIT THE DESKTOP HERO AT IPAD PRO 13 (1025-1032)
   ========================================
   iPad Pro 13 at 1032 is already above this page's tablet rules, which
   close at 1024, so it was taking the desktop hero - it just had no
   room for it. .hero-section lays the 305px side nav beside
   .hero-content with an 88px gap inside 20px of padding, and
   .hero-text is a hard 690px, so the row wants about 1104px. At 1032
   the text ran 52px past the viewport and the headline was cut at the
   right edge.

   The desktop two-column hero is kept; only the space inside it is
   tightened. The gap comes down to 40px, and .hero-text gives up its
   fixed 690px for the full column under a 690px cap, so it takes
   whatever is left beside the side nav instead of forcing a width the
   row cannot give it. The side nav keeps its 305px, so the left
   column and the headline's left edge do not move.

   Closed at 1032 so it reaches iPad Pro 13 and nothing else. iPad Mini
   and Surface Pro are below 1025 and keep the tablet layout
   untouched; desktop from 1033 keeps the 88px gap and the 690px text.
   ======================================== */

@media (min-width: 1025px) and (max-width: 1032px) {
    .hero-section {
        gap: 40px;
    }

    .hero-text {
        width: 100%;
        max-width: 690px;
    }
}

/* ========================================
   ACTIVITY SUMMARY - RESTORE THE DESKTOP FEATURES LAYOUT (1025+)
   ========================================
   The block commented TABLET FEATURES SECTION, from line 1791, sits at
   the top level: the @media (max-width: 1024px) it was meant to live
   in closes at line 1624, a long way above it. With no query of its
   own it applied at every width, so desktop was drawing the tablet
   tab strip - the feature items in a horizontal scroller above the
   dashboard - instead of the two-column layout the base rules at 555
   to 652 already describe. That is the difference between the current
   page and the live site.

   Rather than move that block, which would reach the tablet widths it
   does serve, the desktop values are restored here from 1025 up. They
   are taken from the live page at www.mobicip.com/features/activity-
   summary, where .sub_features_container is a 1084px flex row with
   space-between, .sub_features_ul is 584px, each .sub_features_li is
   584px with 24px of left padding and 32px below, the active one
   carries a 4px white bar at its left edge, headings are 24px/800 over
   28px and bodies 18px/500 over 23.94px, inactive text is #9db5ce and
   active #ffffff, and the dashboard image is 418 by 548.

   Two accommodations for the band's narrow end. The list is capped at
   584px rather than fixed, with min-width: 0, so that at 1025 to 1032
   - iPad Pro 13 - it can give back the 10px the row is short rather
   than overflow; from 1084 up it sits at its full 584. And the active
   bar stretches to its item's height instead of the hardcoded 83.38px
   in the base rule, which only matched a two-line description.

   The image also drops the 31px of left padding the base .donut-chart
   carries, which was eating into its 418px box, and takes 21px of
   right margin, which is where the live page leaves its image - 21px
   short of the container edge rather than flush against it.
   ======================================== */

@media (min-width: 1025px) {
    .features-section {
        padding: 72px 20px 72px;
    }

    .features-title {
        font-size: 34px;
        font-weight: 800;
        line-height: 44px;
        color: #ffffff;
        text-align: center;
        margin-bottom: 24px;
    }

    .features-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        max-width: 1084px;
        margin: 0 auto;
    }

    .features-list {
        display: flex;
        flex-direction: column;
        gap: 0;
        flex: 1 1 auto;
        width: auto;
        max-width: 584px;
        min-width: 0;
        margin: 0;
        padding: 0;
        overflow-x: visible;
        scroll-snap-type: none;
    }

    .feature-item {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 20px;
        width: auto;
        min-width: 0;
        max-width: none;
        padding: 0;
        margin: 0 0 32px 0;
        border-bottom: 0;
        flex-shrink: 1;
        scroll-snap-align: none;
    }

    .feature-item:last-child {
        margin-bottom: 0;
    }

    .feature-item.active {
        border-bottom: 0;
    }

    .feature-item .feature-line {
        display: block;
        width: 4px;
        flex: 0 0 4px;
        align-self: stretch;
        height: auto;
        margin-top: 0;
        border-radius: 2px;
        opacity: 0;
    }

    .feature-item.active .feature-line {
        height: auto;
        margin-top: 0;
        opacity: 1;
        background: #ffffff;
    }

    .feature-item .feature-content {
        gap: 8px;
        max-width: none;
    }

    .feature-item h3 {
        font-size: 24px;
        font-weight: 800;
        line-height: 28px;
        color: #9db5ce;
        margin: 0;
    }

    .feature-item p {
        font-size: 18px;
        font-weight: 500;
        line-height: 23.94px;
        color: #9db5ce;
    }

    .feature-item.active h3,
    .feature-item.active p {
        color: #ffffff;
    }

    .dashboard-card {
        width: 418px;
        min-width: 418px;
        max-width: 418px;
        flex: 0 0 418px;
        margin: 0 21px 0 0;
    }

    .donut-chart {
        width: 418px;
        max-width: 418px;
        height: 548px;
        padding-left: 0;
        object-fit: contain;
        display: block;
    }

    /* ========================================
       DESKTOP AWARDS (1025px+)
       ========================================
       The orphaned tablet block at lines 1911-1961 sets
       grid-template-columns: repeat(2, 1fr) at the top level,
       overriding the base flex row. These rules restore the
       live site's 4-column single-row layout on desktop.
       ======================================== */

    .awards-section {
        background: #f2f8ff;
        padding: 50px 20px 40px;
    }

    .awards-title {
        font-size: 34px;
        font-weight: 800;
        color: #1f2024;
        line-height: 44px;
        text-align: center;
        margin-bottom: 50px;
    }

    .awards-row {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: stretch;
        justify-items: center;
        column-gap: 24px;
        row-gap: 0;
        max-width: 1640px;
        margin: 0 auto;
        padding: 0 140px;
        gap: 24px 24px;
    }

    .awards-row .award-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 24px;
        text-align: center;
        min-height: unset;
        width: 100%;
    }

    .awards-row .award-item img {
        height: 185px;
        width: auto;
        max-width: 100%;
        object-fit: contain;
        display: block;
    }

    .awards-row .award-item:nth-child(3) img {
        width: 125px;
        height: 86.48px;
        max-width: 100%;
        object-fit: contain;
    }

    .award-item span {
        font-size: 24px;
        font-weight: 600;
        line-height: 1.3;
        color: #383e48;
        text-align: center;
        white-space: nowrap;
        margin-top: 0;
    }

    /* ========================================
       DESKTOP BLOG / ARTICLES (1025px+)
       ======================================== */
    .blog-section {
        padding: 50px 20px 80px;
    }

    .blog-title {
        font-size: 34px;
        font-weight: 800;
        color: #1f2024;
        line-height: 44px;
        text-align: center;
        margin-bottom: 50px;
    }

    .blog-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 36px;
        row-gap: 0;
        max-width: 1640px;
        margin: 0 auto;
        padding: 0 140px;
        overflow: visible;
    }

    .blog-card {
        display: flex;
        flex-direction: column;
        min-width: 0;
        width: auto;
        max-width: none;
        flex: 1 1 auto;
        height: auto;
        padding-bottom: 30px;
        border-bottom: 1px solid #e5e7eb;
        border-radius: 0;
        overflow: visible;
        background: transparent;
        margin: 0;
    }

    .blog-card > a {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        text-decoration: none;
        color: inherit;
    }

    .blog-card img.blog-img {
        width: 100%;
        height: auto;
        aspect-ratio: 345 / 200;
        object-fit: cover;
        border-radius: 8px;
        display: block;
    }

    .blog-card-text {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        padding: 0;
        gap: 0;
        width: 100%;
    }

    .blog-card-text br {
        display: none;
    }

    .blog-card-text h3 {
        margin: 16px 0 12px;
        max-width: none;
        font-size: 36px;
        font-weight: 600;
        line-height: 1.4;
        color: #1a2845;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: calc(2 * 1.4em);
    }

    .blog-card-text p {
        margin: 0;
        max-width: none;
        font-size: 28px;
        font-weight: 300;
        color: #383e48;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .blog-card .blog-date {
        display: block;
        margin-top: 24px;
        font-size: 24px;
        font-weight: 400;
        color: #454a55;
        line-height: 1.3;
        font-family: inherit;
    }
}

/* ========================================
   NARROW DESKTOP OVERRIDES (1025px - 1440px)
   Scale down padding and sizes so rows fit
   without wrapping or overflow.
   ======================================== */
@media (min-width: 1025px) and (max-width: 1440px) {
    .awards-row {
        padding: 0 48px;
        column-gap: 16px;
    }

    .awards-row .award-item img {
        height: 150px;
    }

    .awards-row .award-item:nth-child(3) img {
        width: 125px;
        height: 86.48px;
        max-width: 100%;
        object-fit: contain;
    }

    .award-item span {
        font-size: 20px;
    }

    /* Narrow Desktop Blog */
    .blog-row {
        padding: 0 48px;
        column-gap: 24px;
    }

    .blog-card-text h3 {
        font-size: 24px;
        margin: 14px 0 10px;
    }

    .blog-card-text p {
        font-size: 18px;
        line-height: 1.45;
    }

    .blog-card .blog-date {
        font-size: 16px;
        margin-top: 16px;
    }
}

/* ========================================
   ACTIVITY SUMMARY - TESTIMONIAL STARS (768px+)
   ========================================
   The rating is one SVG whose canvas is 422 x 17 with a viewBox, but
   the five star paths sit between x=1 and x=103 of it - the rest of
   the canvas is empty. The base rule sized that box 478 x 16.5, an
   aspect of 29.0 against the artwork's own 24.8, so the stars drew
   about 17% wider than tall, and pulled it 34px left, which put them
   34px left of the name and 14px outside the card's edge. The box was
   also subject to max-width: 100%, so on a narrower card it was
   clamped - 432.5px at 1032 - while the height stayed pinned at 16.5,
   which distorted the stars by a different amount at every width.

   The left margin goes, so the stars start on the name's left edge the
   way they already do on mobile. The box becomes 409 x 16.5, which is
   the artwork's own 422:17 held to the same height, so the stars draw
   in proportion. The clamp is lifted and the box fixed against flex
   shrinking, so the size no longer varies with the card. 409px of
   transparent canvas sits inside a card with at least 433px of content
   at every width in this query, so nothing overflows.

   Opened at 768 because that is where the -34px applies; below it the
   mobile block already zeroes the margin and a 409px box would not fit
   the 270px card.
   ======================================== */

@media (min-width: 768px) {
    .testimonial-stars img {
        margin-top: 10px;
        margin-left: 0 !important;
        width: 409px !important;
        height: 16.5px !important;
        max-width: none !important;
        flex: 0 0 auto !important;
    }
}