/* ========================================
       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: 32px 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;
      filter: brightness(0) saturate(0) invert(60%);
      opacity: 1;
      flex-shrink: 0;
      display: block;
    }

    .side-nav-item span {
      font-size: 18px;
      line-height: 24px;
      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: 87px;
      display: flex;
      flex-direction: column;
      gap: 11px;
      width: 620px;
    }

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

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

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

    .hero-cta {
      margin-top: 4px;
      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: 12px;
      flex-wrap: nowrap;
    }

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

    .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: Hero CTA row ── */
    @media (max-width: 767px) {
      .hero-cta-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
      }

      .hero-cta-btn {
        width: 312px !important;
        height: 44px !important;
        min-height: 44px !important;
        font-size: 18px !important;
        padding: 0 20px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-shrink: 0 !important;
      }

      /* App Store + Google Play sit side by side on the row below */
      .hero-store-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
      }

      .hero-store-btn img {
        width: 132px !important;
        height: 44px !important;
        object-fit: contain !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;
      border-radius: 16px;
      box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.15);
      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;
      margin-bottom: 12px;
    }

    .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: 1006px) {

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

      .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;
      }

      /* 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;
        border-radius: 15px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        margin: 0 auto 16px;
        border: 1px solid #e0e0e0;
        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;
        margin-bottom: 12px;
      }

      .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;
      }

      /* 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;
      }
    }

    /* ========================================
       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;
      }
    }

    /* ── TABLET ONLY: Hero CTA button ── */
    @media (min-width: 768px) and (max-width: 1024px) {
      .hero-cta-btn {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 170px !important;
        height: 44px !important;
      }
    }

    /* ========================================
       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;
      }

      @supports not (-webkit-touch-callout: none) {
        .hero-section {
          padding-top: 90px;
        }
      }

      .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: 7px;
        padding: 14px 26px;
        cursor: pointer;
        background: #f2f8ff;
        border-bottom: 1px solid #e8ecf1;
      }

      .mobile-nav-header span {
        font-size: 16px;
        font-weight: 700;
        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 {
        margin-top: -55px;
        align-items: center;
        text-align: center;

        gap: 5px;
        width: 100%;
        box-sizing: border-box;
      }

      html.is-ios .hero-text {
        margin-top: 0px;
        /* 30px less than base, iPhone-only */
      }

      html.is-android .hero-text {
        margin-top: -65px;
        /* Reduced to pull up content on Android */
      }

      .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: -26px;
        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;
      }

      /* 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: 12px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
        border: 1px solid #e8ecf1;
        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;
        margin-bottom: 12px;
      }

      .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;
        margin-bottom: 12px;
      }
    }

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

    @media screen and (min-width: 1024px) and (max-width: 1366px) {
      .hero-text {
        padding-top: 94px;
        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: 41px;
      }
    }

/* ========================================
   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. Two of the
   class names also exist in footer.css and would restyle the real
   footer partial, since this file loads after it:

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

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

.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.

   Same again: .hero-text carries padding-top: 87px on top of .hero-section's own 90px. 59px leaves Screen Time's 50px gap below the 52px sub-nav.
   Phones only; tablet and desktop keep the export's values.
======================================== */

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

/* ========================================
   SAME HERO POSITION ON iOS AND ANDROID
   Nothing above this line is modified.

   The export moves the hero by device: .hero-text carries
   margin-top: -55px, which html.is-ios overrides to 0 and
   html.is-android to -65px - classes scripts.js sets from the user
   agent. The gap below the sub-nav therefore came out at 115px on
   iPhone against 50px on Android, which is why this page still looked
   wrong on an iPhone after the clearance fix.

   Pinned to the Android value, the one that lands on 50px, for all
   three cases. Phones only.
======================================== */

@media (max-width: 767px) {
    .hero-text,
    html.is-ios .hero-text,
    html.is-android .hero-text {
        margin-top: -65px;
    }
}

/* ========================================
   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);
}

/* ========================================
   BADGE BORDER CLIPPED AT THE TOP (phones)
   Nothing above this line is modified.

   .hero-content has overflow: hidden and starts at the bottom of
   .hero-section's 90px padding. The negative margin-top the export
   uses on .hero-text - pinned above so iPhone and Android agree - lifts
   the hero above that edge, so the top 4px of .hero-badge, its whole
   2px border included, fell outside the clip and was cut off.

   The hero is placed with the section's own padding instead of a
   negative margin, so nothing crosses the clip boundary. The numbers
   are chosen to land on the same 50px gap below the sub-nav that every
   other feature page uses: 96px (header clearance) + 86px = 182px,
   against a sub-nav bottom of 132px.

   Phones only; tablet and desktop keep the export's values.
======================================== */

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

    .hero-text,
    html.is-ios .hero-text,
    html.is-android .hero-text {
        margin-top: 0;
        padding-top: 0;
    }
}

/* ------------------------------------------------------------------
   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;
    }

}