@media (max-width: 860px) {



      .topbar {



        align-items: flex-start;



      }







      .nav-links {



        flex-wrap: wrap;



        justify-content: flex-end;



      }







      .hero,



      .about {



        grid-template-columns: 1fr;



      }







      h1 {



        font-size: 5.2rem;



      }







      .hero-slogan {



        font-size: 2.05rem;



      }







      .section-title {



        font-size: 2.42rem;



      }







      .hero-panel {



        min-height: auto;

        display: flex;

        flex-direction: column;

        overflow: hidden;



      }





      .panel-card {

        position: relative;

        right: auto; bottom: auto; left: auto;

        margin: auto 12px 12px;

        width: calc(100% - 24px);



      }



      .panel-feature {

        grid-template-columns: 58px minmax(0, 1fr);

        padding: 14px;



      }



      .panel-feature img {

        width: 58px;

        height: 58px;

      }



      .featured-thumb-placeholder {

        width: 58px;

        height: 58px;

        font-size: 1.15rem;

      }







      .controls {



        grid-template-columns: 1fr;



        position: static;



      }







      .filter-row {



        justify-content: flex-start;



      }



    }







    @media (max-width: 620px) {



      .site-shell {



        width: min(100% - 28px, var(--max));



      }







      .topbar {



        flex-direction: column;



      }







      .nav-links {



        width: 100%;



        justify-content: flex-start;



      }







      .nav-link {



        padding-inline: 10px;



      }







      .hero {



        padding-top: 22px;



      }







      h1 {



        font-size: 3.78rem;



      }







      .hero-lede {



        font-size: 1.03rem;



      }







      .hero-slogan {



        font-size: 1.74rem;



      }







      .section-title {



        font-size: 2.08rem;



      }







      .about h2 {



        font-size: 1.82rem;



      }



      .about-list {



        gap: 8px;



      }



      .about-link {



        min-height: 48px;



      }







      .hero-actions {



        display: grid;



        grid-template-columns: 1fr;



      }







      .button {



        width: 100%;



      }







      .hero-panel {



        min-height: auto;

        display: flex;

        flex-direction: column;

        overflow: hidden;



      }







      .panel-card {



        position: relative;

        right: auto;

        bottom: auto;

        left: auto;

        margin: auto 12px 12px;

        width: calc(100% - 24px);



      }







      .panel-feature {



        grid-template-columns: 58px minmax(0, 1fr);



        padding: 14px;



      }







      .panel-feature img {



        width: 58px;



        height: 58px;



      }







      .stats {



        grid-template-columns: 1fr;



        padding: 0 14px 14px;



      }







      .section-head,



      .footer-inner {



        grid-template-columns: 1fr;



        text-align: left;



      }



      .footer-inner > span:first-child,



      .footer-inner > span:last-child {



        text-align: left;



      }



      .footer-links {



        justify-content: flex-start;



        margin: 0;



      }



      .footer-inner {



        text-align: center;



      }







      .footer-inner > span:first-child,



      .footer-inner > span:last-child {



        text-align: center;



      }







      .footer-inner > .footer-links {



        justify-content: center;



      }







      .tools-count {



        display: inline-flex;



        margin-top: 16px;



      }







      .grid {



        grid-template-columns: 1fr;



      }







      .tool-card {



        min-height: 0;



      }







      .tool-card-inner {



        grid-template-rows: 180px minmax(0, 1fr);



      }



    }







    /* ── Hero Load Animations ─────────────────────────── */



    .panel-card {

      opacity: 0;

      transform: translateY(46px);

      transition: opacity 1.2s cubic-bezier(0.33, 1, 0.68, 1),

                  transform 1.2s cubic-bezier(0.33, 1, 0.68, 1);

    }

    .panel-card.anim-visible {

      opacity: 1;

      transform: translateY(0);

    }



    .hero-slogan {

      overflow: hidden;

      display: inline-block;

      min-height: 1.1em;

    }

    .hero-slogan .typewriter-cursor {

      display: inline-block;

      width: 0.58em;

      height: 1.1em;

      background: #00615d;

      margin-left: 3px;

      vertical-align: text-bottom;

      animation: cursorBlink 0.62s steps(2, end) infinite;

      border-radius: 2px;

    }

    .typewriter-cursor {

      display: inline-block;

      width: 0.58em;

      height: 1.1em;

      background: currentColor;

      opacity: 0.85;

      margin-left: 3px;

      vertical-align: text-bottom;

      animation: cursorBlink 0.62s steps(2, end) infinite;

      border-radius: 2px;

    }

    @keyframes cursorBlink {

      0%, 100% { opacity: 1; }

      50%      { opacity: 0; }

    }



    /* ECG stat card — uses identical <strong>+<span> structure as sibling cards */

    .stat.ecg-stat {

      position: relative;

      overflow: hidden;

    }

    .ecg-stat .ecg-strong {

      /* Inherits all .stat strong styles: display:block, font-size:1.28rem, line-height:1, text-align:center */

      position: relative;

      height: 1.28rem;

      line-height: 1;

      width: 100%;   /* ensure full-width in flex column container */

    }

    .ecg-stat .ecg-strong canvas.ecg-canvas {

      width: 100%;

      height: 100%;

      display: block;

    }

    /* .ecg-bpm inherits ALL .stat span styles automatically — no overrides needed */



    @media (prefers-reduced-motion: reduce) {



      *,



      *::before,



      *::after {



        scroll-behavior: auto !important;



        transition-duration: 0.01ms !important;



        animation-duration: 0.01ms !important;



        animation-iteration-count: 1 !important;



      }



      .panel-card {

        opacity: 1 !important;

        transform: none !important;

      }



    }



    /* ── Feedback Widget ────────────────────────── */

    /* ── Floating Action Hub ─────────────────────────────── */