:root{
    --brand:#157f83;      
    --text:#20323b;
    --muted:#5b6b75;
    --cta:#f1a247;         
    --pill-bg:#ffe3bd;     
    --pill-ring:#fff4e3;
    --pill-border:#f7d7ab;
  }
  
  /* ===== base ===== */
  html,body{height:100%}
  body{
    margin:0; color:var(--text); background:#fff; line-height:1.6;
    display:flex; flex-direction:column; min-height:100vh;
  }
  .container{max-width:1120px}
  
  /* ===== navbar ===== */
  .nav-hero{
    background:#fff;
    border-bottom:1px solid #e8eef4;
  }
  .nav-hero .container{ max-width:1120px; }
  .nav-inner{
    display:flex;
    align-items:center;         
    justify-content:space-between;
    min-height:64px;            
  }
  
  .brand-logo{
    position: static !important; 
    transform: none !important;
  }
  .brand-text{
    font-weight:800;
    color:#3aa3a1 !important;    
    letter-spacing:.2px;
  }
  
  .nav-right{
    display:flex;
    align-items:center;         
    gap:1rem;
    margin:0;
    padding:0;
    list-style:none;
  }
  .nav-right li{ margin:0; padding:0; }
  .nav-link{
    color:#24343d !important;
    font-weight:600;
    text-decoration:none;
  }
  .nav-link:hover{ color:var(--cta); }
  
  .nav-link.active{
    color:var(--cta) !important;
    font-weight:800;
  }
  
  .nav-download{
    border:2px solid var(--cta);
    background:var(--cta);
    color:#fff !important;
    border-radius:999px;
    padding:.4rem .9rem;
    font-weight:800;
    line-height:1;
  }
  .nav-download:hover{
    background:#fff;
    color:var(--cta) !important;
  }

 .nav-hero ul li:hover,
 .nav-hero ul a:hover,
 .nav-hero ul li.active,
 .nav-hero ul li > a:focus {
  background-color: transparent !important;
  color:var(--cta) !important;
 }
 .material-icons{
  display: flex !important;
  justify-content: end !important;
 }
  .icon-menu{
    max-width: 80%;
  }

 .hero{
    position:relative; color:#fff; text-align:center;
    min-height:62vh; display:flex; align-items:center;
  
    background-image: url('../images/backgroundimage.png');
    background-image: image-set(
      url('../images/backgroundimage.webp') type('image/webp'),
      url('/assets/images/backgroundimage.jpeg') type('image/jpeg')
    );
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:scroll;
  }
 .hero::before{ content:""; position:absolute; inset:0;  background: linear-gradient(180deg, rgba(0,0,0,.50), rgba(0,0,0,.30));}
 .hero__content{ position:relative; width:100%; padding:60px 0; }
 .hero__content > .container{ display: flex; flex-direction: column; align-items: center;width: 100%;}
 .hero__kicker{ font-weight:800; letter-spacing:.02em; margin:0 0 .6rem; }
 .hero__title{ font-size:clamp(2rem,3.2vw + 1.2rem,3.2rem); line-height:1.15; font-weight:800; margin:0 0 1rem; }
 .hero_bottom{ margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }
 .hero_links a{ color: #fff; text-decoration: underline; font-weight: 700; }
 .hero_links a:hover{color: #DDDDDD; text-decoration: none;} 
 .hero_links .sep{ opacity: .9; margin: 0 .5rem; }
 .store-badges{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:.5rem 0 1.1rem; }
 .store-btn{ background:var(--cta); color:#fff; border-radius:8px; padding:12px 16px; display:inline-flex; align-items:center; gap:8px;
    font-weight:800; text-transform:none; line-height:1; border:2px solid var(--cta); transition:filter .12s ease; }
 .store-btn:hover{ background:#D67300; border:2px solid #D67300; text-decoration:none; }
 .btn-icon{ width:20px; height:20px; display:inline-block; }  

  /* ===== sections ===== */
 section.section{ padding:clamp(2.2rem,6vw,2.8rem) 0; background:#fff; }
 section.section-feature{padding-bottom: 0px}
 section.section.cta{padding-top: 0px}
 .section-title{ color:#2f7c7f; margin:0 0 1rem; padding-bottom: 36px; font-weight:900; letter-spacing:.02em; font-size:clamp(1.6rem,1vw + 1.2rem,2.2rem); }
  
  /* ===== features ===== */
 .features-grid{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: clamp(24px, 5vw, 64px);
    align-items: stretch;                
  }
 .features-icons .icon-pill{
    display:inline-flex;
    align-items:center; justify-content:center; 
  }
 .feature-row > div{
    display: contents;
  }
 .icon-img{ width:62px; height:62px; display:block; }
 .feature-row{
    display: grid !important;                
    grid-template-columns: 72px minmax(220px, 1fr);
    grid-auto-rows: auto;
    column-gap: 10px;
    align-items: center;
  }
 .feature-row .icon-pill{ grid-column: 1; grid-row: 1; width:72px; height:72px; border-radius:50%; }
 .feature-row .feature-title{ margin:0; font-weight:700; color:#1d2a31; font-size: 24px; grid-column: 2; grid-row: 1; margin: 0; }
 .feature-row .feature-desc{
  grid-column: 1 / -1;                      
  grid-row: 2;
  margin: .35rem 46px 30px 0;
  max-width: 520px;                          
  line-height: 1.6;
 }
 .feature-row .icon-img{ width:62px; height:62px; display:block; }
 .phone-wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;          
  }

 .phone{
    width: clamp(480px, 42vw, 640px);
    max-width: none;              
    transform-origin: center;  
  }
  /* ===== BLOG ===== */
.blog-card{
  border-radius: 20px;
  overflow: hidden;
}
.blog-card .card-image img {
  display: block;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}
.card-action{
  font-weight: 600;
}
.blog-card.hoverable,
.blog-card {
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
  /* ===== CTA ===== */
  .cta .app-icon{
    width:160px; height:auto; 
    background:#fff;  margin:0 auto .6rem;
  }
  .cta-title{ color:#111; margin-bottom:.2rem; }
  .cta-sub{ margin-top:0; }
  .cta-buttons{ margin-top:10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px }
  .store-subcopy{ margin-top:.6rem; color:var(--muted); font-weight:600; text-align:center; }
  
  /* ===== footer ===== */
  .footer-teal{
    background:var(--brand); color:#eaf6f7;
    padding-top:24px; padding-bottom:8px; margin-top:auto;
  }
  .footer-teal h5, .footer-teal p, .footer-teal a{ color:#eaf6f7; }
  .footer-legal{ border-top:1px solid rgba(255,255,255,.18); margin-top:14px; padding-top:10px; }
  .footer-legal a{ opacity:.9; text-decoration:underline; }
  .footer-teal a[href^="mailto:"],
    a[href^="mailto:"]{
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
    cursor: pointer;
    }

  .footer-teal a[href^="mailto:"]:hover,
    a[href^="mailto:"]:hover{
    color: var(--cta);            
    text-decoration-thickness: 2px; 
    }

  .footer-link:hover {text-decoration: underline; color: var(--cta)}
  
  /* ===== responsive ===== */
  @media (max-width:992px){
    nav .brand-logo{ left:.5rem; font-size: 18px }
    .hero__kicker{font-size: 12px}
    .cta-buttons, .store-badges{gap: 0px}
    .store-btn{padding: 8px 80px; margin-top: 10px}
    .nav-inner{align-items: start}
    .nav-right{ display:none; }        
    .sidenav-trigger{ display:inline-flex; align-items:center; }
    #features .features-icons.left{ padding-top: 0;}
    .phone{ width: min(440px, 100%); }
  }

  @media (max-width: 600px){
    .feature-row{ grid-template-columns: 56px 1fr; column-gap:12px; }
    .feature-row .icon-pill{padding-right: 20px }
    .feature-row .feature-title{font-size: 18px}
    .feature-row .icon-img{ width:46px; height:46px; }
    .hero__content{ min-height: auto; }
    .hero__bottom{ gap: 8px; }
    .hero{ min-height: auto; }
    .hero_links{padding: 0 20px}
  }
  



/* ========== ABOUT PAGE ========== */
.container--about{
    max-width: 1080px;             
  }
  
  .about-title{
    margin: 0 0 .75rem;
    color: #2f7c7f;                  
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
    font-size: clamp(2.2rem, 5.2vw, 3rem);
  }
  
  .about-subhead{
    margin: 2.2rem 0 .6rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #2f7c7f;
    font-weight: 800;
    font-size: clamp(1.1rem, 1.2vw, 1.45rem);
  }
  
  .about-paragraph{
    margin: 0 0 1rem;
    max-width: 100%;
  }
  
  .team-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 18px 28px;
    margin-top: .6rem;
  }
  
  .team-card{
    display: grid;
    grid-template-columns: 72px 1fr;
    column-gap: 14px;
    align-items: end;
  
    background: #fde6c8;              
    border: 1px solid #f3d9ab;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 6px 18px rgba(10,20,30,.06);
  }
  
  .team-card .avatar{ grid-column: 1; grid-row: 1; width: 65px; height: 65px; align-self: start; border-radius: 100px; object-fit: cover;}
  .member-head{ grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 2px; }
  .member-name{ grid-column: 2; grid-row: 1; margin: 0; font-weight: 800; color: #1d2a31; font-size: 1.05rem;}
  .member-role{ grid-column: 2; grid-row: 2; margin: 2px 0 8px; color: #677781; font-size: .95rem; }
  .member-bio{ grid-column: 1 / -1; grid-row: 3; margin-right: 12px; color: #24343d; font-size: .96rem; line-height: 1.45; }
  
  /* responsive */
  @media (max-width: 992px){
    .team-grid{ grid-template-columns: 1fr; }
  }




  /* ======== IOS DOWNLOAD PAGE ========== */
.tf-hero{
  text-align:center;
  padding-top: clamp(18px, 4vw, 28px);
  padding-bottom: clamp(8px, 2vw, 14px);
}
.tf-hero .tf-hero-title{
  margin:.2rem 0 .35rem;
  font-weight:900; letter-spacing:.02em;
  color:#fff; 
}
.tf-hero .tf-hero-sub{
  margin:0; opacity:.92; color:#fff; font-weight: 500;
}

.tf-steps{
  max-width: 940px;
  margin: 0 auto;
}

.tf-step-card{
  background:#fff;
  border-radius:14px;
  padding:18px 20px;
  margin-bottom:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.12);
}

.tf-step-head{
  display:flex; align-items:center; gap:12px;
  margin:0 0 .4rem;
}
.tf-step-num{
  width:36px; height:36px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fde6c8; color:#8b4e07; font-weight:800;
}
.tf-step-title{ margin:0; font-weight:800; color:#1d2a31; }

.tf-callout{
  background:#fff7e6;
  border:1px solid #f9dfa5;
  border-radius:12px;
  padding:12px 14px;
  margin:.2rem 0 0;
}

.tf-actions{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
  margin-top:10px;
}
.store-btn--outline, .store-btn-app{
  background:#fff;
  border-radius:8px;
  font-weight: 700;
  padding: 12px 20px;
  color: var(--brand, #157f83);
  border:2px solid var(--brand, #157f83);
}
.store-btn--outline:hover, .store-btn-app:hover{
  background-color: var(--brand);
  color: #fff;
}

.tf-device-note{
  display:none; 
  text-align:center;
  background:#fff3f3; border:1px solid #ffdede; color:#7b1b1b;
  border-radius:12px; padding:10px 14px; margin:0 0 12px;
}

@media (max-width: 600px){
  .tf-hero .tf-hero-title{font-size: 24px}
  .tf-steps{ padding: 0 8px; }
  .store-btn--outline{ padding: 8px 60px; }
}