/* Base: large, high-contrast, older-adult friendly */
:root{--bg:#f7f9fc;--card:#ffffff;--muted:#586174;--text:#1b2430;--brand:#2ecc71;--brand-2:#4dabf7;--warn:#e9b000;--danger:#d94848;--shadow:0 10px 30px rgba(17,24,39,.12);--radius:14px;--radius-sm:10px;--max:1200px;--gap:28px;--fs-1:clamp(28px,5vw,40px);--fs-2:clamp(22px,3.5vw,28px);--fs-3:clamp(18px,2.5vw,20px);--fs-4:16px}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(180deg,#ffffff 0%,var(--bg) 100%);color:var(--text);line-height:1.7;-webkit-font-smoothing:antialiased;padding-top:68px}
img{max-width:100%;height:auto;border-radius:var(--radius-sm)}
a{color:var(--brand-2);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
figure{
    margin: 16px 0;
}

/* Reading progress */
.reading-progress{position:fixed;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--brand),var(--brand-2));transform-origin:left;transform:scaleX(0);z-index:80}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:70;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,0,0,.06)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--text)}
.brand__logo{font-size:28px}
.brand__text{font-size:20px;letter-spacing:.3px}
.site-actions .btn{margin-left:8px}
/* Top navigation */
.menu-toggle{display:none;background:#eef2f6;border:1px solid rgba(0,0,0,.1);border-radius:8px;padding:8px 10px;font-weight:800}
.site-nav{display:none;gap:18px;margin:0 16px}
.site-nav a{color:var(--text);font-weight:600}
@media(min-width:720px){.site-nav{display:flex}}
@media(max-width:719px){
  .menu-toggle{display:inline-block}
  .site-nav{position:absolute;left:0;right:0;top:68px;display:none;flex-direction:column;background:#ffffff;border-bottom:1px solid rgba(0,0,0,.08);padding:10px 20px;box-shadow:0 10px 20px rgba(0,0,0,.08)}
  .site-nav.open{display:flex}
  .site-nav a{padding:10px 6px}
}

/* Buttons */
.btn{appearance:none;border:0;border-radius:999px;padding:12px 18px;font-weight:700;cursor:pointer;transition:.2s transform ease,.2s opacity ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(180deg,var(--brand-2) 0%,#004aab 100%);color:#fff;width:100%;font-size:1.5em;line-height:1.2;border-radius:10px;}
.btn-primary::before{content:"▶";display:inline-block;margin-right:10px;font-weight:900;line-height:1;filter:drop-shadow(0 1px 0 rgba(0,0,0,.15));}
.btn-secondary{background:#eef2f6;color:var(--text);border:1px solid rgba(0,0,0,.08)}
.btn-quiet{background:transparent;color:var(--text);border:1px solid rgba(0,0,0,.12)}
.btn-block{width:100%}

/* Layout */
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap);padding:30px 0}
@media(min-width:960px){.layout{grid-template-columns:minmax(0,2fr) 420px}}

.content{display:block}
.sidebar{display:flex;flex-direction:column;gap:var(--gap)}

/* Hero */
.hero .eyebrow{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:12px;margin:0 0 6px 0}
.hero h1{font-size:var(--fs-1);line-height:1.2;margin:0 0 6px 0}
.hero .subhead{font-size:var(--fs-3);color:var(--muted);margin:0 0 8px 0}
.hero-media{background:#ffffff;border:1px solid rgba(0,0,0,.08);padding:12px;border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-media figcaption{font-size:14px;color:var(--muted);margin-top:8px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 0}

/* Sections */
.section{margin: 0 0 30px 0;padding:22px;border-radius:var(--radius);background:linear-gradient(180deg,#ffffff 0%,#f3f6fb 100%);border:1px solid rgba(0,0,0,.06);box-shadow:var(--shadow)}
.section h2{font-size:var(--fs-2);line-height:1.25;margin:0 0 10px 0}
.section p{margin:0 0 12px 0;font-size:var(--fs-3)}
.note{color:#245c2a;font-size:15px}
section{
    margin: 0 0 24px 0;
}

/* Callouts */
.callout{margin:30px 0;padding:22px;border-radius:var(--radius);}
.callout-warn{border-left:6px solid var(--warn)}
.disclaimer{font-size:14px;color:var(--muted)}

/* Lists */
.checklist{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.checklist li{position:relative;padding-left:28px}
.checklist li:before{content:"✓";position:absolute;left:0;top:0;color:var(--brand);font-weight:900}
.list-links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.list-links a{display:inline-flex;align-items:center;gap:8px; color: #004aab; font-weight:600;}

/* Steps */
.steps ol{margin:0;padding-left:20px}
.steps li{margin:10px 0;padding:12px 14px;border-radius:10px;background:#f6f8fb;border:1px solid rgba(0,0,0,.06)}

/* Story */
.story blockquote{margin:0;padding:16px 18px;border-left:6px solid var(--brand-2);background:#f6f8fb;border-radius:10px}
.story footer{color:var(--muted);margin-top:8px}
/* Testimonial layout */
.testimonial-header{display:flex;align-items:center;gap:14px;margin:10px 0 8px 0}
.testimonial-photo{width:84px;height:84px;border-radius:10px;object-fit:cover;border:1px solid rgba(0,0,0,.08);box-shadow:var(--shadow)}
.testimonial-meta{display:flex;flex-direction:column}
.meta-name{font-weight:800;color:var(--text)}
.meta-role{font-style:italic;color:var(--muted)}

/* Sidebar cards */
.card{padding:20px;border-radius:var(--radius);background:linear-gradient(180deg,#ffffff 0%,#f6f8fb 100%);border:1px solid rgba(0,0,0,.06);box-shadow:var(--shadow)}
.card .h3{font-size:20px;margin:0 0 10px 0}
.badges{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.badges li{background:#f6f8fb;border:1px solid rgba(0,0,0,.08);padding:6px 10px;border-radius:999px;font-size:13px;color:#3a4352}
.sticky{position:sticky;top:90px;z-index:5}

/* Footer */
.site-footer{border-top:1px solid rgba(0,0,0,.08);margin-top:20px}
.site-footer .container{display:flex;flex-direction:column;gap:10px;padding:20px 0}
@media(min-width:720px){.site-footer .container{flex-direction:row;align-items:center;justify-content:space-between}}
.footer-nav a{margin-right:14px;color:#435063}
.back-to-top{font-weight:700}

/* Modal */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.modal__dialog{position:relative;width:min(900px,92vw);background:#ffffff;border:1px solid rgba(0,0,0,.08);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06)}
.modal__header{border-bottom:1px solid rgba(0,0,0,.06)}
.modal__body{padding:0;aspect-ratio:16/9}
.modal__body iframe{display:block;width:100%;height:100%;border:0}
.modal__close{font-size:18px}

/* Utility */
.hero .small{font-size:14px;color:#57606a !important}
.small{font-size:14px !important;color:#57606a !important}
.h3{font-size:20px}
.discover-text{
    text-align: center;
}


@media(max-width:720px){
    .layout{
        padding: 20px 16px;
    }    
    .btn-primary{font-size:1.2em}
    .site-actions{display:none;}
}

.img-hero-media figcaption{
    text-align: center;
    font-size: 14px;
    color: #57606a;
}

.img-video{
    position: relative;
    top: 0;
    left: 0;
    margin-bottom: 24px;
}

.img-video-bg, .img-video-middle, .refs-logos-footer{
    max-width: 800px;
    width: 100%;
    height: auto;
    display: block;
    will-change: transform;
}

.img-video-bg{
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.img-vide-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 35%;
    transform: translateX(-150px) translateY(-150px);
    animation: pulsar 1.5s ease-in-out infinite;
    will-change: transform;
}

@keyframes pulsar {
    0% {
        transform: translateX(-150px) translateY(-150px) scale(1);
    }
    50% {
        transform: translateX(-150px) translateY(-150px) scale(1.1);
    }
    100% {
        transform: translateX(-150px) translateY(-150px) scale(1);
    }
}

@keyframes pulsarmobile {
    0% {
        transform: translateX(-70px) translateY(-70px) scale(1);
    }
    50% {
        transform: translateX(-70px) translateY(-70px) scale(1.1);
    }
    100% {
        transform: translateX(-70px) translateY(-70px) scale(1);
    }
}

.viewers-count {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 20px;
    border-radius: 8px;
    position: absolute;
    bottom: 10px;
    left: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
    font-size: 12px;
    color: #333;
}

.viewers-count i {
    color: #004aab;
    font-size: 16px;
}

#viewerCount {
    font-weight: 700;
    color: #1a3c63;
}

@media (max-width: 768px) {
    .img-vide-icon {
        width: 40%;
    }
    
    #viewers-count {
     bottom: 40px;   
    }

    .img-video-bg, .img-video-middle{
        height: 250px;
    }

    .img-vide-icon{
        transform: translateX(-50px) translateY(-50px);
        animation: pulsarmobile 1.5s ease-in-out infinite;

    }

    .img-video-bg{
        width: 100%;
    }
}