/* --- Brand Colors --- */
:root{
  --cream-bg:#fef0c6;
  --cream-2:#f7e5a5;
  --orange:#ee9d50;
  --teal:#0e7b7a;           /* deeper brand teal for headings/buttons accents */
  --muted-teal:#8ab3a7;
  --ink:#12130f;
  --card:#ffffff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--cream-bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#000;color:#fff;padding:.5rem 1rem;border-radius:.5rem;z-index:1000}

h1,h2,h3{
  font-family:'Cooper Hewitt','Nunito',sans-serif;
  font-weight:800;
  margin:0 0 .6rem;
  line-height:1.2;
}
.container{max-width:1100px;margin:0 auto;padding:0 1.25rem}
.section{padding:4rem 0;text-align:center}
.section:nth-of-type(even){background:var(--cream-2)}
.section-headline{font-size:2rem;margin-bottom:2rem;border-bottom:3px solid var(--orange);display:inline-block;padding-bottom:.5rem}

.hero{background:var(--cream-2);padding:4.5rem 0 2rem;text-align:center}
.hero-logo{width:180px;max-width:60vw;height:auto;margin:0 auto 1.25rem;display:block}
.headline{font-size:2.4rem}
.headline .accent{color:var(--teal)}
.sub-headline{max-width:800px;margin:1rem auto 2rem;font-size:1.15rem}
.cta-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.5rem}
.device-mock img{width:min(420px,95vw);height:auto;border-radius:1rem;
  padding:1rem 1.5rem;
  border-radius:.6rem;
  text-decoration:none;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.02em;
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  border:3px solid transparent;
}
.primary-cta{background:var(--orange);color:var(--ink);border-color:var(--orange)}
.primary-cta:hover{transform:translateY(-1px)}
.secondary-cta{background:transparent;border-color:var(--muted-teal);color:var(--ink)}
.secondary-cta:hover{background:var(--muted-teal);color:#fff}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.25rem;
  margin-top:1.5rem;
}
.feature-card{
  background:var(--card);
  padding:1.25rem;
  border-radius:.75rem;
  text-align:left;
  
  
}
.feature-card h3{color:var(--teal);border-bottom:2px solid var(--muted-teal);padding-bottom:.35rem;margin-top:0}

.screens{display:flex;gap:1rem;justify-content:center;align-items:flex-start;margin-top:1.5rem;flex-wrap:wrap}
.screens img{width:min(360px,90vw);border-radius:1rem;gap:1.25rem;justify-content:center;flex-wrap:wrap;margin-top:1.5rem}

.badge{
  display:inline-block;
  background:var(--teal);
  color:#fff;
  padding:.25rem .5rem;
  border-radius:.5rem;
  font-size:.8rem;
  margin-right:.4rem;
}
.best-value{border:4px solid var(--muted-teal);background:var(--cream-bg)}
.price{font-size:2.25rem;color:var(--orange);margin:.25rem 0 1rem}
.one-time{font-size:.9rem;color:#555}
.price-option ul{list-style:none;padding:0;margin:0 0 1rem;text-align:left}
.price-option li{margin:.5rem 0}
.check{color:var(--teal);font-weight:900;margin-right:.4rem}
.cross{color:#a55}
.small.muted{color:#666;margin-top:.5rem}
.tiny.note{font-size:.85rem;color:#555;margin-top:1rem}

.guarantee{margin-top:1rem;font-weight:700}
.faq{max-width:760px;margin:2rem auto 0;text-align:left}
details{background:#fff;border:1px solid var(--muted-teal);border-radius:.6rem;padding:1rem;margin:.5rem 0}
summary{cursor:pointer;font-weight:800}
details p{margin:.5rem 0 0;padding-top:.5rem;border-top:1px dashed var(--muted-teal)}

footer{text-align:center;padding:1.25rem;background:#12130f;color:#fff;font-size:.9rem}
footer a{color:var(--orange)}

@media (max-width:768px){
  .headline{font-size:2rem}
  .sub-headline{font-size:1.05rem}
}


/* --- Pricing Table Layout Fix (2025-10-26) --- */
.pricing-table {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 2rem;
  flex-wrap: nowrap;
  margin-top: 2rem;
}

.price-option {
  flex: 1;
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.25s ease;
}

.price-option:hover {
  transform: translateY(-4px);
}

@media (max-width: 768px) {
  .pricing-table {
    flex-direction: column;
    gap: 1.5rem;
  }
}


/* --- Phone mockups: vertical centering & equal heights (2025-10-26) --- */
.device-mock { display:flex; justify-content:center; align-items:center; margin: 1.25rem 0 0; }
.device-mock img {
  display:block;
  height: clamp(420px, 48vh, 560px);
  width: auto;
  margin: 0 auto;
}

.screens { display:flex; justify-content:center; align-items:center; gap: 1.5rem; flex-wrap: wrap; }
.screens img {
  display:block;
  height: clamp(420px, 46vh, 540px); /* equal visual height for the pair */
  width: auto;
  border-radius: 1rem;
  /* no box-shadow per user's request */
}

/* Ensure section content is nicely centered without jumping */
.hero .container,
.features .container { display:block; }

@media (max-width: 900px) {
  .device-mock img,
  .screens img {
    height: auto;          /* let images size naturally */
    max-width: min(420px, 92vw);
  }
}
.hero-logo {
  border-radius: 20px;       /* soften corners */
  overflow: hidden;          /* clips any square edges */
  display: inline-block;
}