/* =========================
         BASE STYLES
         ========================= */
    :root {
      --fill-white: #ffffff;
      --secondary-blackblue: #1a2845;
      --feature-text: #9db5ce;
      --secondary-graybluish: #383e48;
      --secondary-lightgray: #616b7b;
      --secondary-darkblue: #1f2024;
      --primary-blue: #3188f4;
      --fill-softblue: #f2f8ff;

      --page-max: 100%;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      height: 100%;
    }

    body {
      margin: 0;
      font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--secondary-darkblue);
      background: var(--fill-white);
    }

    img,
    svg {
      display: block;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    /* =========================
         DESKTOP STYLES (Figma base)
         ========================= */
    .page {
      width: 100%;
      min-width: 320px;
      box-sizing: border-box;
    }

    .page-inner {
      width: 100%;
      max-width: 100%;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* SECTION: BANNER */
    .section-banner {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding-top: 0;
      width: 100%;
      box-sizing: border-box;
      position: relative;
    }

    .banner-grid {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 80px;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      box-sizing: border-box;
      padding: 80px 60px;
    }

    .side-nav {
      width: 280px !important;
      flex-shrink: 0 !important;
      background: transparent;
      margin-left: 0;
    }

    .side-nav-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .side-nav-item {
      width: 280px !important;
      min-height: 56px !important;
      height: auto !important;
      padding: 12px 16px !important;
      border-radius: 6px !important;
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      position: relative !important;
      box-sizing: border-box !important;
      outline: none;
      cursor: pointer;
      text-decoration: none;
    }

    .side-nav-item a {
      display: flex;
      flex-direction: row;
      align-items: center;
      text-decoration: none;
      color: inherit;
      cursor: pointer;
      width: 100%;
      height: 100%;
      outline: none;
    }

    .side-nav-item--active {
      background: #f2f8ff !important;
      outline: none;
    }

    .side-nav-item:focus,
    .side-nav-item:focus-visible,
    .side-nav-item a:focus,
    .side-nav-item a:focus-visible {
      outline: none;
    }

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

    .side-nav-icon {
      width: 28px !important;
      height: 28px !important;
      margin-right: 12px !important;
      flex-shrink: 0 !important;
      object-fit: contain !important;
      display: block !important;
    }

    .side-nav-label {
      font-size: 18px !important;
      font-weight: 600 !important;
      color: #383e48 !important;
      font-family: 'Manrope', sans-serif !important;
      white-space: normal !important;
      word-wrap: break-word !important;
      overflow: visible !important;
      text-overflow: clip !important;
    }

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

    .banner-content {
      flex: 1;
      min-width: 0;
      max-width: 720px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      padding: 6px 12px;
      border: 2px solid #000000;
      border-radius: 6px;
      white-space: nowrap;
      outline: none;
      -webkit-font-smoothing: antialiased;
      box-shadow: 0 0 0 0 transparent;
      image-rendering: crisp-edges;
      height: auto !important;
      font-weight: 800;
      font-size: 16px;
      line-height: 1em;
      color: #000000;
      letter-spacing: 0;
    }

    .banner-h1 {
      margin: 0;
      font-weight: 800;
      font-size: 44px;
      line-height: 1.3636363636363635;
      color: #1f2024;
      width: 690px;
      height: 120px;
      max-width: 100%;
    }

    .banner-sub {
      margin: 0 !important;
      font-weight: 600;
      font-size: 18px;
      line-height: 1.3888888888888888;
      color: #616b7b;
      padding: 15.5px 0 40px !important;
      width: 690px;
      max-width: 100%;
      height: 120px;
    }

    .banner-cta {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 220px;
      max-width: 100%;
      padding: 19px 24px;
      background: #3188f4;
      border-radius: 32px;
      font-weight: 700;
      font-size: 18px;
      line-height: 1em;
      color: #ffffff;
      min-height: 44px;
      height: auto !important;
      border: none;
      cursor: pointer;
      font-family: 'Manrope', sans-serif !important;
    }

    .desktop-only-br {
      display: block;
    }

    .cta-row {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .btn-primary {
      height: 55.9px;
      padding: 0 28px;
      border: 0;
      border-radius: 32px;
      background: var(--primary-blue);
      color: var(--fill-white);
      font-weight: 700;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      font-family: 'Manrope', sans-serif !important;
    }

    /* 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 {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      width: 220px !important;
      height: 44px !important;
      min-height: 44px !important;
      padding: 0 24px !important;
      font-size: 16px !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;
      }
    }

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


    /* SECTION: INTRO */
    .intro {
      padding-bottom: 20px;
      padding-top: 20px;
      background: #f2f8ff;
      text-align: center;
      width: 100%;
      box-sizing: border-box;
    }

    .intro-kicker {
      width: 100%;
      max-width: 800px;
      margin: 23px auto 30px;
      white-space: normal;
      word-break: normal;
      font-family: 'Manrope', sans-serif;
      font-weight: 800;
      font-size: 34px;
      line-height: 1.294117em;
      color: #1f2024;
    }

    .intro-body {
      max-width: 1020px;
      width: 100%;
      margin: 0 auto 10px;
      white-space: normal;
      word-break: normal;
      font-family: 'Manrope', sans-serif;
      font-weight: 500;
      font-size: 18px;
      line-height: 1.5em;
      color: #383e48;
    }

    /* SECTION: FEATURES (Cross-Platform Support) */
    .features {
      margin-top: 0;
      background: var(--secondary-blackblue);
      padding: 72px 0 72px;
      width: 100%;
      box-sizing: border-box;
    }

    .features-inner {
      padding: 0 80px;
      max-width: 1244px;
      margin: 0 auto;
      width: 100%;
      box-sizing: border-box;
    }

    .features-title {
      margin: 0;
      font-weight: 800;
      font-size: 34px;
      line-height: 1.2941176471em;
      text-align: center;
      color: var(--fill-white);
    }

    .features-row {
      margin: 52px auto 0;
      max-width: 1084px;
      display: grid;
      grid-template-columns: 1fr minmax(0, 460px);
      gap: 60px;
      align-items: center;
      width: 100%;
      box-sizing: border-box;
    }

    @media (min-width: 1220px) and (max-width: 1290px) {
      .features-row {
        margin: 52px auto 0;
        max-width: 1084px;
        display: grid;
        grid-template-columns: 1fr minmax(0, 460px);
        gap: 60px;
        align-items: center;
        width: 100%;
        margin-left: -11px;
        box-sizing: border-box;
      }

      .banner-grid {
        grid-template-columns: 220px 1fr !important;
        gap: 190px !important;
        padding: 0 52px !important;
        max-width: 100% !important;
        margin-left: -59px !important;

      }
    }


    .feature-list {
      display: grid;
      gap: 40px;
      width: 584px;
      max-width: 584px;
      min-height: 170px;
    }

    .feature-item {
      display: grid;
      grid-template-columns: 5px 1fr;
      gap: 24px;
      align-items: stretch;
      cursor: pointer;
    }

    .feature-bar {
      width: 4.2px;
      border-radius: 2px;
      background: var(--feature-text);
      visibility: hidden;
    }

    .feature-texts {
      display: grid;
      gap: 8px;
    }

    .feature-h3 {
      margin: 0;
      font-weight: 800;
      font-size: 24px;
      line-height: 28px;
      color: var(--feature-text);
    }

    .feature-p {
      margin: 0;
      font-weight: 500;
      font-size: 18px;
      line-height: 1.33;
      color: var(--feature-text);
    }

    .feature-item--active .feature-bar {
      background: var(--fill-white);
      visibility: visible;
    }

    .feature-item--active .feature-h3,
    .feature-item--active .feature-p {
      color: var(--fill-white);
    }

    .feature_list_container .feature_anchor.selected span {
      font-weight: bold;
      color: #3188f4;
    }

    .feature-visual {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 418px;
      max-width: 418px;
      height: 548px;
    }

    .feature-visual img {
      width: 418px;
      height: 548px;
      object-fit: contain;
      display: block;
      padding-left: 15px;
    }

    /* SECTION: CTA STRIP */
    .cta-strip {
      background: var(--fill-softblue);
      padding: 40px 80px;
      margin-top: 54px;
      border-radius: 10px;
    }

    .cta-strip-text {
      margin: 0;
      font-weight: 500;
      font-size: 18px;
      line-height: 1.366em;
      color: var(--secondary-graybluish);
    }

    /* SECTION: CONTENT BLOCKS */
    .content-section {
      padding: 32px 80px 32px;
      width: 100%;
      box-sizing: border-box;
      overflow: visible;
    }

    .section-title {
      margin: 0 0 25px;
      font-weight: 800;
      font-size: 34px;
      line-height: 1.2941176471em;
      color: var(--secondary-darkblue);
    }

    /* Testimonials (cards) */
    #testimonials .section-title {
      text-align: center;
    }

    .cards-2 {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 48px;
      max-width: 1084px;
      margin: 0 auto;
      overflow: visible;
    }

    .card {
      background: #ffffff;
      border-radius: 15px;
      padding: 20px;
      box-shadow: 0px 0px 2px 2px #00000026;
    }

    .card-head {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 18px;
    }

    .card-meta {
      display: grid;
      gap: 6px;
    }

    .card-name {
      margin: 0;
      font-size: 18px;
      line-height: 1.366em;
      color: var(--secondary-darkblue);
    }

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

    .testimonial-stars-img {
      height: 20px;
      width: auto;
      display: block;
    }

    .star_wrapper--mobile {
      display: none;
    }

    .card-body {
      margin: 15px 0 24px;
      font-weight: 400;
      font-size: 20px;
      line-height: 1.6em;
      color: #1F2024;
    }

    .testimonial-pagination {
      display: none;
    }

    /* FAQ SECTION */
    .faq-section {
      background: #f2f8ff;
    }

    .faq-section-title {
      font-family: Manrope, sans-serif;
      font-size: 34px;
      font-weight: 800;
      color: #1F2024;
      text-align: center;
      margin: 30px 0px;
    }

    .faqs-container {
      font-size: 12px;
      font-family: Manrope, sans-serif;
      color: #000000;
      margin: 0px 0px 36px;
      max-width: 1088px;
      margin-left: auto;
      margin-right: auto;
    }

    .faq-container {
      background-color: #ffffff;
      border-radius: 16px;
      box-shadow: 0px 0px 2px 2px #00000026;
      padding: 20px 27px 42px 27px;
      margin-bottom: 20px;
    }

    .faq-question {
      font-family: Manrope, sans-serif;
      font-size: 18px;
      font-weight: 700;
      color: #1F2024;
      margin: 0px 0px 16px;
    }

    .faq-answer {
      font-family: Manrope, sans-serif;
      font-size: 14px;
      font-weight: 400;
      color: #1F2024;
      margin: 0;
      line-height: 1.6em;
    }

    /* AWARDS SECTION */
    .awards-section {
      background: #ffffff;
      padding: 40px 16px 40px;
      text-align: center;
    }

    .awards-title {
      font-family: Manrope, sans-serif;
      font-size: 34px;
      font-weight: 800;
      color: #1f2024;
      text-align: center;
      margin-bottom: 24px;
    }

    .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: 125px;
      gap: 12px;
    }

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

    .award-item:nth-child(3) {
      justify-content: flex-end;
      padding-bottom: 0;
    }

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

    .award-item span {
      font-family: Manrope, sans-serif;
      font-size: 18px;
      font-weight: 600;
      color: #383e48;
      text-align: center;
    }

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

    .download-title {
      margin-top: 30px;
      font-family: Manrope, sans-serif;
      font-size: 34px;
      font-weight: 800;
      color: #1f2024;
      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-family: Manrope, sans-serif;
      font-size: 18px;
      font-weight: 500;
      color: #616b7b;
      padding-bottom: 40px;
    }

    .download-platforms {
      display: flex;
      align-items: center;
      justify-content: center;

      flex-wrap: wrap;
      font-family: Manrope, sans-serif;
      font-size: 15px;
      font-weight: 500;
      color: #616b7b;
      margin-top: 16px;
      padding-bottom: 40px;
    }

    .platform-item {
      display: flex;
      align-items: center;
      font-size: 15px;
      font-weight: 500;
      color: #616b7b;
    }

    .platform-item img {
      width: 16px;
      height: 16px;
      object-fit: contain;
      display: inline-block;
    }

    .platform-item.ios img {
      width: 16px;
      height: 28px;
      object-fit: contain;
      margin: 0px 7px 0px 15px;
    }

    .platform-item.android img {
      width: 20px;
      height: 28px;
      object-fit: contain;
      margin: 0px 7px 0px 15px;
    }

    .platform-item.kindle img {
      width: 20px;
      height: 28px;
      object-fit: contain;
      margin: 0px 7px 0px 15px;
    }

    /* BLOG SECTION */
    .blog-section {
      padding: 30px 80px 40px;
    }

    .blog-title {
      font-family: Manrope, sans-serif;
      font-size: 34px;
      font-weight: 800;
      color: #1f2024;
      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: 8px;
      border-bottom: 1px solid rgba(56, 62, 72, 0.15);
      padding-bottom: 12px;
    }

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

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

    .blog-card-text h3 {
      font-family: Manrope, sans-serif;
      font-size: 18px;
      font-weight: 700;
      color: #1a2845;
      line-height: 1.35;
      margin: 0;
    }

    .blog-card-text p {
      font-family: Manrope, sans-serif;
      font-size: 14px;
      font-weight: 400;
      color: #383e48;
      line-height: 1.5;
      margin: 0;
    }

    .blog-date {
      font-family: Manrope, sans-serif;
      font-size: 13px;
      font-weight: 300;
      color: #454a55;
      margin-top: 4px;
    }

    /* Desktop fixes for Swiper structure */
    @media (min-width: 1025px) {
      .testimonial-swiper .swiper-wrapper {
        display: contents;
      }

      .testimonial-swiper .swiper-slide {
        display: contents;
      }
    }

    @media (min-width: 1025px) {
      .download-section {
        padding: 24px 16px 40px !important;
        text-align: center !important;
      }

      .download-title {
        font-size: 34px !important;
        font-weight: 800 !important;
        text-align: center !important;
        margin-bottom: 16px !important;
      }

      .download-desc {
        display: block !important;
        font-size: 18px !important;
        color: #616b7b !important;
        text-align: center !important;
        margin: 0 auto 20px !important;
        padding-bottom: 0 !important;
      }

      .download-badges {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 80px !important;
        margin: 0 auto !important;
        max-width: 500px !important;
        padding: 0 !important;
      }

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

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

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

      .download-platforms {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        margin-top: 16px !important;
        padding-bottom: 40px !important;
        font-size: 15px !important;
      }

      .download-platforms .row-1,
      .download-platforms .row-2 {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        white-space: nowrap !important;
      }
    }

    @media (min-width: 1025px) {
      .section-banner {
        padding: 80px 60px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
      }

      .banner-grid {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        gap: 80px !important;
        width: 100% !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        padding: 0 !important;
      }

      .banner-content {
        flex: 1 !important;
        min-width: 0 !important;
        max-width: 720px !important;
        padding-left: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 9px !important;
      }

      .banner-h1 {
        margin: 0 !important;
        font-weight: 800 !important;
        font-size: 44px !important;
        line-height: 1.3636363636363635 !important;
        color: #1f2024 !important;
        width: 690px !important;
        height: 120px !important;
        max-width: 100% !important;
      }

      .banner-sub {
        margin: 0 !important;
        font-weight: 600 !important;
        font-size: 18px !important;
        line-height: 1.3888888888888888 !important;
        color: #616b7b !important;
        padding: 0px 58px 31px !important;
        margin-left: -58px !important;
        width: 690px !important;
        max-width: 100% !important;
        height: 120px !important;
      }

      .banner-cta {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 220px !important;
        max-width: 100% !important;
        padding: 19px 24px !important;
        background: #3188f4 !important;
        border-radius: 32px !important;
        font-weight: 700 !important;
        font-size: 18px !important;
        line-height: 1em !important;
        color: #ffffff !important;
        min-height: 44px !important;
        height: auto !important;
      }
    }

    @media (min-width: 1367px) {
      .banner-grid {
        gap: 100px !important;
        align-items: center !important;
        padding-left: 67px !important;
      }

      .section-banner {
        padding: 37px 60px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
      }
    }









    /* Mobile navigation (hamburger) */
    .topbar {
      display: none;
      position: sticky;
      top: 0;
      z-index: 50;
      background: var(--fill-white);
      border-bottom: 1px solid rgba(56, 62, 72, 0.12);
    }

    .topbar-inner {
      max-width: var(--page-max);
      margin: 0 auto;
      height: 64px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .brand {
      font-weight: 800;
      font-size: 18px;
      color: var(--secondary-blackblue);
    }

    .hamburger {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      border: 1px solid rgba(56, 62, 72, 0.16);
      background: var(--fill-white);
      padding: 0;
      display: grid;
      place-items: center;
      cursor: pointer;
    }

    .hamburger svg {
      width: 22px;
      height: 22px;
    }

    .mobile-drawer {
      display: none;
      border-bottom: 1px solid rgba(56, 62, 72, 0.12);
      background: var(--fill-white);
    }

    .mobile-drawer.open {
      display: block;
    }

    .mobile-drawer ul {
      list-style: none;
      margin: 0;
      padding: 12px 16px 16px;
      display: grid;
      gap: 10px;
    }

    .mobile-drawer a {
      display: block;
      padding: 12px 12px;
      border-radius: 12px;
      font-weight: 700;
      font-size: 16px;
      color: var(--secondary-graybluish);
      background: rgba(49, 136, 244, 0.06);
    }

    .ipad-air-br {
      display: none;
    }

    /* Show on desktop by default */
    .desktop-intro-br {
      display: block;
    }

    /* Hide on all tablet versions */
    @media (max-width: 1366px) {
      .desktop-intro-br {
        display: none !important;
      }
    }

    @media (min-width: 768px) and (max-width: 768px) {

      .page,
      .page-inner {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: clip !important;
      }

      .section-banner {
        width: 100% !important;
        max-width: 100% !important;
        padding: 40px 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
      }

      .banner-grid {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
      }

      .intro,
      .features,
      .content-section {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
      }
    }

    /* =========================
         TABLET (768px–1024px)
         ========================= */
    @media screen and (min-width: 768px) and (max-width: 819px) {
      .section-banner {
        padding: 43px 32px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
      }

      .banner-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
      }

      .side-nav {
        width: 268px !important;
        flex-shrink: 0 !important;
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
      }

      .side-nav-list {
        margin-top: 29px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 0 !important;
        margin-left: 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-icon {
        width: 28px !important;
        height: 28px !important;
        margin-right: 10px !important;
        flex-shrink: 0 !important;
        object-fit: contain !important;
      }

      .side-nav-label {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #383e48 !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
      }

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

      .side-nav-item--active {
        background: #f2f8ff !important;
      }

      .side-nav-item--active::after {
        content: '' !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;
      }

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

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

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

      .banner-sub {
        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,
      .cta-row {
        display: flex;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        margin-top: -10px;
      }

      .banner-cta,
      .hero-cta-btn,
      .btn-primary.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;
      }
    }

    @media (min-width: 820px) and (max-width: 1023px) {
      .section-banner {
        padding: 48px 32px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
      }

      .banner-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 78px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
      }

      .side-nav {
        width: 230px !important;
        flex-shrink: 0 !important;
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
      }

      .side-nav-list {
        margin-top: -13px !important;
        margin-left: -6px;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding: 0 !important;
      }

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

      .side-nav-item--active {
        background: #f2f8ff !important;
      }

      .side-nav-item--active::after {
        content: '' !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;
      }

      .side-nav-icon {
        width: 28px !important;
        height: 28px !important;
        margin-right: 10px !important;
        flex-shrink: 0 !important;
      }

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

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

      .banner-content {
        padding-top: 60px !important;
        flex: 1 !important;
        min-width: 0 !important;
        order: 2 !important;
        max-width: 460px !important;
        padding-left: 0 !important;
        box-sizing: border-box !important;
      }

      .banner-h1 {
        font-size: 40px !important;
        line-height: 56px !important;
        max-width: 464px !important;
        margin: 0 0 8px 0 !important;
        width: 100% !important;
        height: auto !important;
      }

      .banner-sub {
        font-size: 16px !important;
        line-height: 24px !important;
        max-width: 464px !important;
        margin: 0 !important;
        padding: 8px 0 24px !important;
        width: 100% !important;
        height: auto !important;
      }

      .banner-cta {
        margin-top: -9px;
        width: 194px !important;
        height: 56px !important;
        min-height: 56px !important;
        padding: 0 24px !important;
        font-size: 18px !important;
        align-self: flex-start !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 32px !important;
        font-weight: 700 !important;
        background: #3188f4 !important;
        color: #ffffff !important;
      }
    }

    @media (min-width: 768px) and (max-width: 1024px) {

      .awards-section {
        background: #ffffff;
        padding: 24px 24px 32px;
        text-align: center !important;
        width: 100%;
        box-sizing: border-box;
      }

      .awards-title {
        font-size: 22px;
        font-weight: 800;
        line-height: 1.3;
        text-align: center !important;
        margin-bottom: 24px;
      }

      .awards-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px 24px;
        max-width: 400px;
        margin: 0 auto !important;
        justify-items: center;
        align-items: end;
      }

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

      .award-item img {
        width: 75px !important;
        height: 75px !important;
        object-fit: contain !important;
        display: block !important;
        margin-top: 0 !important;
      }

      .award-item:nth-child(3) img {
        width: 100px !important;
        height: 69px !important;
        object-fit: contain !important;
        margin-top: 6px !important;
      }

      .award-item span {
        font-family: Manrope, sans-serif;
        font-size: 11px;
        font-weight: 600;
        color: #383e48;
        text-align: center;
      }

      .download-section {
        padding: 24px 24px 16px !important;
        text-align: center !important;
      }

      .download-title {
        font-size: 26px !important;
        font-weight: 800 !important;
        text-align: center !important;
        margin-bottom: 12px !important;
      }

      .download-desc {
        display: block !important;
        font-size: 15px !important;
        color: #616b7b !important;
        text-align: center !important;
        margin: 0 auto -20px !important;
      }

      .download-badges {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 40px !important;
        margin: 0 auto !important;
        padding: 0 !important;
      }

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

      .qr-code {
        width: 173px !important;
        height: 177.86px !important;
        object-fit: contain !important;
      }

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

      .download-platforms {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        margin-top: 30px !important;
        margin-bottom: 0 !important;
        padding-bottom: 22px !important;
        font-size: 14px !important;
      }

      .download-platforms .row-1,
      .download-platforms .row-2 {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        white-space: nowrap !important;
      }

      .blog-section {
        padding: 24px 24px 40px !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }

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

      .blog-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
      }

      .blog-card {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        border-bottom: 1px solid rgba(56, 62, 72, 0.15) !important;
        padding-bottom: 16px !important;
        box-sizing: border-box !important;
      }

      .blog-card img.blog-img {
        width: 100% !important;
        height: 201px !important;
        object-fit: cover !important;
        border-radius: 4px !important;
        display: block !important;
      }

      .blog-card-text h3 {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #1a2845 !important;
        line-height: 1.35 !important;
        margin: 0 !important;
      }

      .blog-card-text p {
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #383e48 !important;
        line-height: 1.5 !important;
        margin: 0 !important;
      }

      .blog-date {
        font-size: 13px !important;
        font-weight: 300 !important;
        color: #454a55 !important;
      }

      .blog-card:nth-child(3) {
        grid-column: 1 / -1 !important;
        width: 50% !important;
        max-width: 50% !important;
        margin: 0 auto !important;
      }

      .blog-card:nth-child(3) img.blog-img {
        width: 100% !important;
        height: 201px !important;
        object-fit: cover !important;
      }
    }

    @media (max-width: 1024px) {

      .desktop-br {
        display: none !important;
      }

      .desktop-only-br {
        display: none !important;
      }

      .intro,
      .content-section {
        padding-left: 40px;
        padding-right: 40px;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
      }

      .features-inner {
        padding: 0 40px;
      }

      .features-row {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .feature-visual {
        width: 100%;
        height: 360px;
      }

    }

    /* =========================
         TABLET FEATURES (768px–1024px)
         ========================= */
    @media (min-width: 768px) and (max-width: 1024px) {

      /* Stack layout: tabs on top, image below */
      .features-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 0px !important;
        margin-top: 43px !important;
      }

      /* Horizontal scrollable tab row */
      .feature-list {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 185.81px !important;
        margin-bottom: 40px !important;
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
      }

      .feature-list::-webkit-scrollbar {
        display: none !important;
      }

      /* Each feature tab exactly 390 × 183.81px */
      .feature-item {
        flex: 0 0 390px !important;
        width: 390px !important;
        min-height: 183.81px !important;
        padding: 0 24px 16px 0 !important;
        margin-right: 0 !important;
        border-bottom: 3px solid transparent !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
      }

      /* Hide the vertical bar — using bottom border instead */
      .feature-item .feature-bar {
        display: none !important;
        visibility: hidden !important;
      }

      /* Active state: white bottom border */
      .feature-item--active {
        border-bottom: 3px solid #ffffff !important;
      }

      /* All text always fully visible regardless of active state */
      .feature-h3 {
        font-size: 24px !important;
        line-height: 1.4em !important;
        color: #ffffff !important;
        opacity: 1 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
      }

      .feature-p {
        font-size: 18px !important;
        line-height: 1.5em !important;
        color: #9db5ce !important;
        opacity: 1 !important;
        white-space: normal !important;
        word-break: break-word !important;
      }

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

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

      /* Image below tabs — exactly 460 × 609.5px */
      .feature-visual {
        width: 460px !important;
        height: 609.5px !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
      }

      .feature-visual img {
        width: 460px !important;
        height: 609.5px !important;
        object-fit: contain !important;
        display: block !important;
      }

      .features-inner {
        padding: 0 16px !important;
      }

      .features-title {
        font-size: 34px !important;
      }

      /* ---- Testimonials (tablet Swiper) ---- */

      /* Override desktop display:contents so Swiper can control layout */
      #testimonials .testimonial-swiper {
        width: 100% !important;
        overflow: hidden !important;
        position: relative !important;
        padding-bottom: 48px !important;
      }

      #testimonials .testimonial-swiper .swiper-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
      }

      #testimonials .testimonial-swiper .swiper-slide {
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
        min-width: 100% !important;
        width: 100% !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        padding: 0 40px !important;
      }

      #testimonials .cards-2 {
        display: block !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        padding-bottom: 0 !important;
      }

      #testimonials .swiper-slide .card {
        width: 100% !important;
        max-width: 688px !important;
        height: auto !important;
        min-height: 206px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        padding: 20px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(56, 62, 72, 0.18) !important;
      }

      #testimonials .testimonial-pagination {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        margin-top: 20px !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
      }

      #testimonials .swiper-pagination-bullet {
        width: 12px !important;
        height: 12px !important;
        border-radius: 50% !important;
        background: rgba(56, 62, 72, 0.25) !important;
        opacity: 1 !important;
        margin: 0 5px !important;
        display: inline-block !important;
      }

      #testimonials .swiper-pagination-bullet-active {
        background: #1f2024 !important;
        opacity: 1 !important;
      }


    }


    /* =========================
         iPAD PRO (1024px–1366px)
         ========================= */

    @media (min-width: 1024px) and (max-width: 1366px) {
      .section-banner {
        padding: 64px 35px !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }

      .banner-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 114px !important;
        margin-left: 23px !important;
        margin-top: -34px !important;
        width: 100% !important;
        max-width: 1200px !important;
        box-sizing: border-box !important;
      }

      .side-nav {
        width: 280px !important;
        flex-shrink: 0 !important;
        order: 1 !important;
        margin-left: 0 !important;
      }

      .side-nav-list {
        width: 305px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 3px !important;
      }

      .side-nav-item {
        width: 305px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        min-height: 48px !important;
        padding: 14px 22px 14px !important;
        border-radius: 6px !important;
        position: relative !important;
      }

      .side-nav-item a {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
      }

      .side-nav-item--active {
        background: #f2f8ff !important;
      }

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

      .side-nav-item--active::after {
        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;
      }

      .side-nav-icon {
        width: 28px !important;
        height: 28px !important;
        flex-shrink: 0 !important;
        position: relative;
        left: 2px;
        top: -1px;
      }

      .side-nav-icon img {
        width: 28px !important;
        height: 28px !important;
        object-fit: contain !important;
        position: relative !important;
        left: 2px !important;
        top: -1px !important;
      }

      .side-nav-label {
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #383e48 !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin-left: 2px !important;
      }

      .banner-content {
        margin-top: 2px !important;
        flex: 1 !important;
        min-width: 0 !important;
        order: 2 !important;
        max-width: 750px !important;
        padding-left: 0 !important;
        box-sizing: border-box !important;
      }

      .banner-content-inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 9px !important;
        padding-bottom: 17px !important;
      }

      .chip {
        align-self: flex-start !important;
        white-space: nowrap !important;
        border: 2px solid #000000 !important;
        font-size: 16px !important;
        letter-spacing: 0 !important;
      }

      .banner-h1 {
        font-size: 44px !important;
        line-height: 1.36em !important;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        margin-bottom: 14px !important;
        white-space: normal !important;
        word-break: normal !important;
      }

      .banner-sub {
        font-size: 18px !important;
        line-height: 1.39em !important;
        max-width: 600px !important;
        padding: 0px 14px 19px !important;
        margin-left: -14px !important;
        width: 100% !important;
        height: auto !important;
      }

      .banner-cta {
        width: 220px !important;
        height: 56px !important;
        min-height: 56px !important;
        padding: 0 24px !important;
        font-size: 18px !important;
        align-self: flex-start !important;
        font-family: 'Manrope', sans-serif !important;
      }

      .cta-row {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        margin-top: 20px !important;
      }

      .m-br {
        display: none !important;
      }

      .ipad-air-br {
        display: none !important;
      }
    }

    @media (min-width: 1080px) and (max-width: 1100px) {
      .banner-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 114px !important;
        margin-left: -17px !important;
      }
    }

    @media (min-width: 1060px) and (max-width: 1110px) {
      .features-row {
        margin: 52px auto 0 !important;
        max-width: 1084px !important;
        display: grid !important;
        grid-template-columns: 1fr minmax(0, 460px) !important;
        gap: 60px !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: -62px !important;
      }
    }

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

      html,
      body {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
      }

      .page,
      .page-inner {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
      }

      .topbar {
        display: block;
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 100;
        background: #f2f8ff;
        border-bottom: 1px solid rgba(49, 136, 244, 0.15);
        margin-top: 0;
      }

      .topbar-inner {
        height: 52px;
        padding: 0 16px;
        display: flex;
        align-items: center;
      }

      .topbar-active-item {
        display: flex;
        align-items: center;
        gap: 10px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
      }

      .topbar-active-icon {
        width: 24px;
        height: 24px;
        object-fit: contain;
      }

      .topbar-active-label {
        font-family: Manrope, sans-serif;
        font-weight: 700;
        font-size: 16px;
        color: #3188f4;
      }

      .topbar-chevron {
        width: 18px;
        height: 18px;
        transition: transform 0.2s ease;
      }

      .topbar-active-item[aria-expanded="true"] .topbar-chevron {
        transform: rotate(180deg);
      }

      .mobile-drawer {
        display: none;
        background: #f2f8ff;
        border-top: 1px solid rgba(49, 136, 244, 0.1);
      }

      .mobile-drawer.open {
        display: block;
      }

      .mobile-drawer ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
      }

      .mobile-drawer li {
        width: 100% !important;
        display: block !important;
      }

      .mobile-drawer-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 20px !important;
        padding: 14px 20px !important;
        border-radius: 0 !important;
        background: transparent !important;
        border-bottom: 1px solid rgba(56, 62, 72, 0.08) !important;
        text-decoration: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }

      .mobile-drawer-item img {
        width: 24px !important;
        height: 24px !important;
        object-fit: contain !important;
        filter: grayscale(100%) opacity(0.5) !important;
        flex-shrink: 0 !important;
        display: block !important;
        align-self: center !important;
        margin: 0 !important;
        padding: 0 !important;
      }

      .mobile-drawer-item span {
        font-family: Manrope, sans-serif !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        color: #383e48 !important;
        line-height: 24px !important;
        display: block !important;
        align-self: center !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
      }

      .mobile-drawer-item img,
      .mobile-drawer-item span {
        display: inline-flex !important;
        align-items: center !important;
      }

      .mobile-drawer-item--active {
        background: transparent !important;
        border-radius: 0 !important;
      }

      .mobile-drawer-item--active img {
        filter: grayscale(0%) sepia(1) hue-rotate(190deg) saturate(3) opacity(1);
      }

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

      .m-br {
        display: block !important;
      }

      .section-banner {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px 10px 0px !important;
        padding-top: 44px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
      }

      .banner-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 40px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
      }

      .banner-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 7px !important;
        padding-top: 139px !important;
      }

      .side-nav {
        display: none !important;
      }

      .desktop-only-br {
        display: none !important;
      }

      .chip {
        align-self: center !important;
        font-size: 14px !important;
      }

      .banner-h1 {
        font-size: 30px !important;
        text-align: center !important;
        width: 100% !important;
        height: 84px !important;
        padding-top: 2px !important;
        line-height: 1.3636363636363635 !important;
        margin: 0 !important;
      }

      .banner-sub {
        font-size: 16px !important;
        text-align: center !important;
        max-width: 330px !important;
        line-height: 24px !important;
        font-weight: 500 !important;
        padding: 9px 0 17px !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 auto !important;
        height: auto !important;
      }

      .btn-primary {
        margin-top: -7px !important;
        width: 312px !important;
        max-width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0px 20px !important;
        font-size: 18px !important;
        font-family: "Manrope", sans-serif !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        background: #3188f4 !important;
        border-radius: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
      }

      .banner-cta {
        margin-top: -7px !important;
        width: 312px !important;
        max-width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0px 20px !important;
        font-size: 18px !important;
        font-family: "Manrope", sans-serif !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        background: #3188f4 !important;
        border-radius: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
      }

      .cta-row {
        justify-content: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding-bottom: 39px;
      }

      .intro {
        width: 100%;
        max-width: none;
        padding: 24px 16px 40px;
      }

      .content-section {
        width: 100%;
        max-width: none;
        padding-left: 16px;
        padding-right: 16px;
      }



      .intro-kicker,
      .section-title,
      .features-title {
        font-size: 26px;
        line-height: 1.25em;
      }

      .features-title {
        width: 380px;
        max-width: 100%;
        margin: 15px auto 24px;
      }

      .intro-body {
        font-size: 16px;
        line-height: 1.55em;
      }

      .intro-body strong {
        font-weight: 700;
      }

      .features {
        padding: 38px 0 24px !important;
      }

      .features-inner {
        padding: 0 16px;
        box-sizing: border-box;
        width: 100%;
        overflow: hidden;
      }

      .features-row {
        display: flex;
        flex-direction: column;
        gap: 0 !important;
        margin-top: 24px !important;
        width: 100%;
        overflow: hidden;
      }

      .feature-list {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 0;
        width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
      }

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

      .feature-item {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 8px;
        flex: 0 0 256px;
        width: 256px;
        padding: 0 16px 20px 0;
        border-bottom: 3px solid transparent;
        cursor: pointer;
        box-sizing: border-box;
        overflow: visible;
        grid-template-columns: unset;
        -webkit-tap-highlight-color: transparent;
      }

      .feature-item:focus {
        outline: none;
      }

      .feature-item:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
      }

      .feature-item--active {
        border-bottom: none !important;
        position: relative;
      }

      .feature-item--active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: calc(100% - 16px);
        height: 3px;
        background: #ffffff;
        border-radius: 2px;
      }

      .feature-item .feature-bar {
        display: none !important;
        visibility: hidden !important;
      }

      .feature-h3 {
        font-size: 20px;
        line-height: 24px;
        white-space: normal;
        word-break: break-word;
        overflow: visible;
        display: block;
      }

      .feature-p {
        font-size: 16px;
        line-height: 1.5;
        display: block;
        white-space: normal;
        word-break: break-word;
        overflow: visible;
      }

      .feature-visual {
        width: 300px !important;
        height: 393px !important;
        max-width: 300px !important;
        margin: 0 auto !important;
        margin-top: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
      }

      .feature-visual img {
        width: 300px !important;
        height: 393px !important;
        object-fit: contain !important;
        display: block !important;
      }

      #testimonials .card {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
      }

      #testimonials .cards-2 {
        display: block !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-bottom: 40px;
        position: relative;
      }

      #testimonials .swiper-pagination-bullet {
        width: 12px !important;
        height: 12px !important;
        border-radius: 50%;
        background: rgba(56, 62, 72, 0.25);
        opacity: 1;
        margin: 0 5px !important;
      }

      #testimonials .swiper-pagination-bullet-active {
        background: #1f2024 !important;
        opacity: 1;
      }

      #testimonials .swiper-pagination {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin-top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0;
      }

      .testimonial-swiper .swiper-wrapper {
        display: flex !important;
      }

      .testimonial-swiper .swiper-slide {
        display: block !important;
        min-width: 100% !important;
        margin-right: 0 !important;
      }

      #testimonials .swiper-slide .card {
        width: 312px !important;
        height: auto !important;
        min-height: 200px !important;
        margin: 0 auto !important;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        padding: 20px;
        border-radius: 12px;
        border: 1px solid rgba(56, 62, 72, 0.18);
      }

      .testimonial-pagination {
        display: flex;
      }

      .qrs_container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
        justify-content: center;
        padding-bottom: 20px;
      }

      .qr-col {
        flex: 0 0 100%;
        scroll-snap-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .qr_image {
        width: 398px !important;
        max-width: none !important;
        height: 409px !important;
        object-fit: contain;
      }

      .activity_summary_download_image {
        width: 220px !important;
        height: 73.75px !important;
        margin-top: 24px;
        object-fit: contain;
      }

      .awards-section {
        background: #ffffff;
        padding: 24px 16px 32px;
        text-align: left;
      }

      .awards-title {
        font-size: 26px;
        line-height: 1.3;
        text-align: center;
        margin-bottom: 24px;
      }

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

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

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

      .download-section {
        background: #f2f8ff;
        padding: 24px 0 32px;
        text-align: center;
        overflow: hidden;
      }

      .download-title {
        font-size: 26px;
        font-weight: 800;
        line-height: 1.3;
        text-align: center;
        margin: 0 16px 12px;
      }

      .download-desc {
        font-size: 14px;
        font-weight: 500;
        color: #616b7b;
        margin: 0 16px 20px;
        display: none;
      }

      .download-badges {
        display: flex;
        flex-direction: column;
        overflow-x: unset;
        scroll-snap-type: unset;
        gap: 80px;
        padding: 0 16px;
        margin: 0 auto;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }

      .download-column {
        flex: unset;
        width: 100%;
        scroll-snap-align: unset;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 0;
        box-sizing: border-box;
      }

      .qr-code {
        width: 100%;
        max-width: 320px;
        height: auto;
        aspect-ratio: 398 / 409;
        object-fit: contain;
        display: block;
      }

      .store-badge {
        width: 220px;
        height: 73.75px;
        object-fit: contain;
        display: block;
      }

      .download-platforms {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        font-family: Manrope, sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: #616b7b;
        margin-top: 37px;
        padding-bottom: 16px;
        text-align: center;
        width: 100%;
      }

      .download-platforms .row-1 {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        white-space: nowrap;
      }

      .download-platforms .row-2 {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        white-space: nowrap;
      }

      .platform-item {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 14px;
        font-family: Manrope, sans-serif;
        color: #616B7B;
        white-space: nowrap;
      }

      .blog-section {
        padding: 24px 16px 40px;
      }

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

      .blog-row {
        display: flex;
        flex-direction: column;
        gap: 32px;
        width: 100%;
        max-width: 100%;
      }

      .blog-card {
        flex: unset;
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        gap: 12px;
        border-bottom: 1px solid rgba(56, 62, 72, 0.15);
        padding-bottom: 16px;
      }

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

      .blog-card-text h3 {
        font-size: 20px;
        font-weight: 700;
        color: #1a2845;
        line-height: 1.35;
        margin: 0;
      }

      .blog-card-text p {
        font-size: 15px;
        font-weight: 400;
        color: #383e48;
        line-height: 1.6;
        margin: 0;
      }

      .blog-date {
        font-size: 13px;
        font-weight: 300;
        color: #454a55;
      }

      .blog-card:nth-child(3) {
        flex: unset;
        width: 100% !important;
        max-width: 100% !important;
        grid-column: unset !important;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        gap: 12px;
        border-bottom: 1px solid rgba(56, 62, 72, 0.15);
        padding-bottom: 16px;
      }

      .blog-card:nth-child(3) img.blog-img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 345 / 200;
        object-fit: cover !important;
        border-radius: 4px;
        display: block;
      }

      .card-head {
        margin-bottom: 5px;
      }

      .card-body {
        margin-top: 5px;
      }

      .testimonial-stars-img {
        display: none;
      }

      .star_wrapper--mobile {
        display: flex;
        align-items: center;
        width: auto;
        height: 16px;
        margin: 5px 0px 4px 0px;
        color: #000000;
      }

      .review_star {
        display: block;
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        margin: 0 2px 0 0;
      }

      .review_star:last-child {
        margin-right: 0;
      }

      .review_star::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' fill='%23FFBE22' stroke='%23FFBE22' stroke-width='0.5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: contain;
      }
    }


    /* ===== Extra top spacing for narrow Android phones (Vivo Y56, Samsung) ===== */
    @media (max-width: 430px) {
      .banner-content {
        padding-top: 154px !important;
      }
    }


    /* ── Fix: allow global header to scroll with page ── */
    html,
    body {
      height: auto !important;
      overflow-x: clip !important;
      /* clip doesn't break stacking context, hidden does */
    }

    .page,
    .page-inner {
      overflow: visible !important;
      overflow-x: clip !important;
    }

    /* Remove overflow-x:hidden from all responsive overrides */
    @media (max-width: 767px) {

      html,
      body,
      .page,
      .page-inner {
        overflow: visible !important;
        overflow-x: clip !important;
      }
    }

    @media (min-width: 768px) and (max-width: 768px) {

      .page,
      .page-inner,
      .section-banner,
      .intro,
      .features,
      .content-section {
        overflow: visible !important;
        overflow-x: clip !important;
      }
    }

    .features-title-mobile-br {
      display: none;
    }

    @media (max-width: 767px) {
      .features-title-mobile-br {
        display: block;
      }
    }

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

   The export clears its own fixed header and topbar with padding-top:
   154px on .banner-content - by far the largest of these hacks, which
   is why this page showed the widest empty band. header.css now
   reserves the header, so only the 53px topbar needs clearing. 6px
   leaves the same 50px gap below the bar that Screen Time shows.
   Phones only; tablet and desktop keep the export's values.
======================================== */

@media (max-width: 767px) {
    .banner-content {
        padding-top: 6px !important;
    }
}

/* ------------------------------------------------------------------
   MOBILE SUB-NAV — ALIGN TO SCREEN TIME (phones only)
   This page's phone sub-nav was exported with its own sizing: a 52px
   toggle row whose icon sat 16px from the edge while the rows below
   started at 20px, a 20px icon/label gap, 24px icons, 15px/600 labels
   and a grey filter over every icon. 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, 16px chevron
     rows     13px 28px, 12px gap, 20px unfiltered icons, Manrope
              16px/500 #383e48, 1.4 line-height, separated by a top
              hairline rgba(56, 62, 72, .1)
   The export's own rules carry !important, so these do too. Nothing
   above 767px is touched, and Screen Time itself is unchanged.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {

    .topbar-inner {
        height: auto !important;
        padding: 12px 16px !important;
        box-sizing: border-box !important;
    }

    /* 16px box + this 12px offset = the 28px left edge the rows below
       use, so toggle icon and row icons share one line. */
    .topbar-active-item {
        gap: 6px !important;
        margin-left: 12px !important;
    }

    /* 6px flex gap + 3px here = Screen Time's 9px icon-to-label gap,
       while the label-to-chevron gap stays at its 6px. */
    .topbar-active-icon {
        width: 20px !important;
        height: 20px !important;
        margin-right: 3px !important;
        flex-shrink: 0 !important;
        /* The toggle now carries the same flat grey glyph the rows
           use, tinted blue to match its label the way the other
           feature pages tint theirs. */
        filter: brightness(0) saturate(100%) invert(44%) sepia(93%) saturate(1400%) hue-rotate(200deg) brightness(98%) contrast(94%) !important;
    }

    .topbar-active-label {
        font-family: 'Manrope', sans-serif !important;
        font-weight: 800 !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        color: #3187f3 !important;
    }

    .topbar-chevron {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
    }

    .topbar-chevron path {
        stroke: #3187f3 !important;
    }

    /* The first row's own top hairline replaces the drawer's blue one,
       so there is a single rule under the toggle rather than two. */
    .mobile-drawer {
        border-top: none !important;
    }

    .mobile-drawer-item {
        gap: 12px !important;
        padding: 13px 28px !important;
        border-top: 1px solid rgba(56, 62, 72, 0.1) !important;
        border-bottom: none !important;
    }

    /* Size only - the export's grey filter stays, since these icons
       are not the flat SVG set Screen Time uses and only read against
       the light drawer once it is applied. */
    .mobile-drawer-item img {
        width: 20px !important;
        height: 20px !important;
    }

    .mobile-drawer-item span {
        font-family: 'Manrope', sans-serif !important;
        font-weight: 500 !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        color: #383e48 !important;
        white-space: normal !important;
    }

}

/* ========================================
   FEATURE LIST — UNSELECTED TITLE COLOUR · 768-1024px
   Nothing above this line is modified. Phones at 767 and below and
   desktop from 1025 keep the colours they have.

   In this band .feature-h3 is #ffffff for every item, so an unselected
   feature's title stayed as bright as the selected one while its
   description sat at #9db5ce. Only the white bar under the active
   item distinguished them.

   The base title colour now matches the description, #9db5ce, so an
   unselected feature reads as one muted block. The selected one is
   untouched: .feature-item--active .feature-h3 is already white and
   carries two classes to this rule's one, so it still wins.

   768 to 1024 is the band the page's own tablet rules use, and it is
   the full tablet layout here - the awards row stays two across to
   1024 and only goes to a single row at 1032.
======================================== */

@media (min-width: 768px) and (max-width: 1024px) {
    .feature-h3 {
        color: #9db5ce !important;
    }
}

/* ========================================
   APP BLOCKER - TABLET AWARDS AND DOWNLOAD VALUES (768-1024)
   ========================================
   The five rules supplied from the tablet inspector, appended last so
   they win over the page's own 768-1024 block without !important
   where the source had none. The struck-through 806px max-width on
   .awards-title is left out.
   Mobile (max 767) and desktop (min 1025) are outside the query and
   keep their own values.

   Two supporting changes come with .awards-title's fixed 736px width,
   which is 768 less 16px of padding on each side. The section's own
   tablet rule pads it 24px, leaving 720, so the title would not fit
   at 768 - the side padding is brought to 16px to make room, and the
   grid below it is centred at a 400px cap so it does not move. From
   820 up the container is wider than 736, so the title also takes
   auto side margins to stay centred rather than pinning left.

   The platform icons: all three SVGs are square 22x22, but the base
   rules box them 16x28, 20x28 and 20x28 with object-fit: contain, so
   the artwork rendered at three different sizes - 16, 20 and 20 -
   each sitting in a 28px-tall box with dead space above and below the
   18px text. They are given the artwork's own 22x22 box here, which
   puts all three at one size and brings the item down to the 24px
   height the inspector reports. The base margin of 0 7px 0 15px kept
   the 7px before the text but added an uneven 15px ahead of each
   icon; the left margin goes, leaving the row's own 8px gap to
   separate the items.
   ======================================== */

@media (min-width: 768px) and (max-width: 1024px) {
    .awards-title {
        font-size: 34px;
        font-weight: 800;
        line-height: 46px;
        text-align: center !important;
        margin-bottom: 24px;
        width: 736px;
    }

    .awards-section {
        padding-left: 16px;
        padding-right: 16px;
    }

    .awards-title {
        margin-left: auto;
        margin-right: auto;
    }

    .award-item span {
        font-family: Manrope, sans-serif;
        font-size: 12px;
        font-weight: 600;
        color: #383e48;
        text-align: center;
    }

    .download-title {
        font-size: 34px !important;
        font-weight: 800 !important;
        text-align: center !important;
        margin-bottom: 12px !important;
    }

    .download-desc {
        display: block !important;
        font-size: 18px !important;
        color: #616b7b !important;
        text-align: center !important;
        margin: 0 auto -20px !important;
        font-weight: 400;
    }

    .download-platforms {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        margin-top: 30px !important;
        margin-bottom: 0 !important;
        padding-bottom: 22px !important;
        font-size: 18px !important;
    }

    .platform-item {
        font-size: 18px !important;
        line-height: 24px !important;
    }

    .platform-item img,
    .platform-item.ios img,
    .platform-item.android img,
    .platform-item.kindle img {
        width: 22px !important;
        height: 22px !important;
        object-fit: contain !important;
        margin: 0 7px 0 0 !important;
        flex: 0 0 auto !important;
    }
}

/* ========================================
   APP BLOCKER - TABLET BLOG CARD TEXT (768-1024)
   ========================================
   The three supplied rules as given, in the query they came with,
   appended last so they win over the page's own tablet block. Against
   what was there, the card heading goes 18px to 24px, its body 14px to
   18px, and the date 13px to 16px in weight 500 and #383e48 instead of
   300 and #454a55; the remaining declarations already matched.

   The query is 768 to 1024, which is the band iPad Mini and Surface
   Pro sit in and the one the rest of this page's tablet styling uses.
   It also covers iPad Pro 12.9 at 1024, which already takes this
   page's tablet layout; iPad Pro 13 at 1032 is above the band and
   keeps the desktop values. Mobile below 768 is untouched.
   ======================================== */

@media (min-width: 768px) and (max-width: 1024px) {
    .blog-card-text h3 {
        font-size: 24px !important;
        font-weight: 700 !important;
        color: #1a2845 !important;
        line-height: 1.35 !important;
        margin: 0 !important;
    }

    .blog-card-text p {
        font-size: 18px !important;
        font-weight: 400 !important;
        color: #383e48 !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }

    .blog-date {
        font-size: 16px !important;
        font-weight: 500 !important;
        color: #383e48 !important;
    }
}

/* ========================================
   APP BLOCKER - TABLET BLOG DATE TO THE CARD FOOT (768-1024)
   ========================================
   The date sat directly under the paragraph, so it landed at a
   different height in each card and left the space below it empty.
   The reference has it at the foot of the card, level across the row.

   Inside a .blog-card the link is the only flex child and is a plain
   block, so nothing below it could take up the card's spare height.
   The link becomes a column that grows to fill the card, and
   .blog-card-text takes an auto bottom margin, which pushes the date
   down to the foot. The date keeps its own 4px top margin, so where a
   card's text runs long enough to leave no slack the gap above the
   date stays what it was rather than closing to nothing.

   The image is pinned at flex: 0 0 auto so that becoming a flex item
   cannot let its fixed 201px height shrink. Spacing is otherwise
   unchanged: the link had no gaps between its three parts under block
   layout and has none as a column.

   Scoped to the 768-1024 band, so mobile below 768 and desktop from
   1025, including iPad Pro 13 at 1032, keep the block layout.
   ======================================== */

@media (min-width: 768px) and (max-width: 1024px) {
    .blog-card > a {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
    }

    .blog-card img.blog-img {
        flex: 0 0 auto !important;
    }

    .blog-card-text {
        margin-bottom: auto !important;
    }
}

/* ========================================
   APP BLOCKER - FIT THE DESKTOP FEATURES ROW AT IPAD PRO 13 (1025-1032)
   ========================================
   iPad Pro 13 at 1032 is already above this page's 768-1024 tablet
   band, so it was taking the desktop features layout - it just had no
   room for it. .features-inner pads 80px a side and .features-row is
   1fr minmax(0, 460px) with a 60px gap, which wants 160 + 584 + 60 +
   418 = 1222px. At 1032 the second track collapses to 213px while
   .feature-visual stays a hard 418px wide, so the image ran 205px past
   its track and the section clipped it.

   The two-column desktop layout is kept; only the space around it is
   tightened so the image fits whole. The side padding goes to 24px and
   the gap to 32px, and the second track is pinned at the image's own
   418px instead of a minmax that can collapse. That leaves 534px at
   1032 for the text, and .feature-list gives up its fixed 584px for
   100% of the track under a 534px cap: a 1fr track cannot shrink below
   the fixed width of what sits in it, so leaving the list at 584 only
   moved the overflow from the image to the row, and pinning it at 534
   would have made the row fit 1032 to the pixel and overflow again at
   1025. Filling the track instead holds across the whole band.

   Closed at 1032 so it reaches iPad Pro 13 and nothing else. The
   tablet band at 1024 and below and the desktop layout from 1033 are
   both untouched.
   ======================================== */

@media (min-width: 1025px) and (max-width: 1032px) {
    .features-inner {
        padding-left: 24px;
        padding-right: 24px;
    }

    .features-row {
        grid-template-columns: 1fr 418px;
        gap: 32px;
    }

    .feature-list {
        width: 100%;
        max-width: 534px;
    }
}