:root{
  --teal:#0d9488;
  --teal-dark:#0f766e;
  --amber:#f59e0b;
  --charcoal:#1f2937;
  --neutral:#f8fafc;
  --sky:#e0f2fe;
  --white:#ffffff;
  --text:var(--charcoal);
  --bg:var(--neutral);
  --card:#ffffff;
  --muted:#eef2f6;
  --border:#cbd5e1;
  --shadow:0 4px 12px rgba(31,41,55,.08);
  --radius:12px;
  --max:900px;
  --font-body:'Assistant', system-ui, sans-serif;
  --font-head:'Heebo', system-ui, sans-serif;
}

@media (prefers-color-scheme:dark){
  :root{
    --text:#f1f5f9;
    --bg:#111827;
    --card:#1f2937;
    --muted:#374151;
    --border:#4b5563;
    --shadow:0 4px 16px rgba(0,0,0,.3);
  }
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.7;
  font-size:1.05rem;
}

img,svg{
  max-inline-size:100%;
  display:block;
}

a{
  color:var(--teal);
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

h1,h2,h3{
  font-family:var(--font-head);
  line-height:1.25;
  font-weight:800;
}

h1{font-size:clamp(2rem,5vw,3rem);}
h2{font-size:clamp(1.5rem,4vw,2rem); margin-block-end:.75rem;}
h3{font-size:1.25rem;}

.container{
  inline-size:min(100% - 2rem,var(--max));
  margin-inline:auto;
}

.skip-link{
  position:absolute;
  inset-block-start:-40px;
  inset-inline-start:1rem;
  background:var(--teal);
  color:#fff;
  padding:.5rem 1rem;
  border-radius:0 0 var(--radius) var(--radius);
  z-index:100;
  transition:top .2s;
}

.skip-link:focus{
  inset-block-start:0;
}

.site-header{
  background:var(--card);
  border-block-end:1px solid var(--border);
  position:sticky;
  inset-block-start:0;
  z-index:50;
  box-shadow:var(--shadow);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:.75rem;
  gap:1rem;
  flex-wrap:wrap;
}

.logo{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-head);
  font-weight:800;
  font-size:1.35rem;
  color:var(--text);
}

.logo:hover{
  text-decoration:none;
}

.menu-toggle{
  display:flex;
  flex-direction:column;
  gap:5px;
  inline-size:44px;
  block-size:44px;
  justify-content:center;
  align-items:center;
  background:transparent;
  border:1px solid var(--border);
  border-radius:8px;
  cursor:pointer;
}

.menu-toggle span{
  display:block;
  inline-size:24px;
  block-size:3px;
  background:var(--text);
  border-radius:2px;
  transition:.2s;
}

.main-nav{
  display:none;
  flex-basis:100%;
  flex-direction:column;
  gap:.75rem;
  padding-block-start:.5rem;
}

.main-nav.open{
  display:flex;
}

.main-nav a{
  color:var(--text);
  font-weight:700;
  padding:.5rem .25rem;
  border-radius:8px;
}

.main-nav a[aria-current="page"]{
  color:var(--teal);
  background:var(--sky);
}

@media (min-width:640px){
  .menu-toggle{display:none;}
  .main-nav{
    display:flex;
    flex-direction:row;
    flex-basis:auto;
    padding-block-start:0;
  }
}

.hero{
  background:linear-gradient(135deg,var(--teal) 0%,var(--teal-dark) 100%);
  color:#fff;
  padding-block:4rem 3.5rem;
  text-align:center;
}

.hero-small{
  padding-block:3rem 2.5rem;
}

.hero-lead{
  font-size:clamp(1.1rem,2.5vw,1.35rem);
  max-inline-size:42ch;
  margin-inline:auto;
  margin-block-start:1rem;
  opacity:.95;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:center;
  margin-block-start:1.75rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-block-size:44px;
  padding:.75rem 1.5rem;
  border-radius:999px;
  font-weight:700;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s, box-shadow .15s;
  font-family:inherit;
  font-size:1rem;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
  text-decoration:none;
}

.btn-primary{
  background:#fff;
  color:var(--teal);
}

.hero .btn-primary{
  background:var(--amber);
  color:#111827;
}

.btn-secondary{
  background:transparent;
  color:#fff;
  border-color:#fff;
}

.section{
  padding-block:3rem;
}

.section-muted{
  background:var(--muted);
}

.narrow{
  max-inline-size:700px;
}

.features-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.25rem;
  margin-block-start:1.5rem;
}

.feature-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem;
  box-shadow:var(--shadow);
}

.feature-icon{
  color:var(--teal);
  margin-block-end:.75rem;
}

.steps{
  list-style:none;
  counter-reset:step;
  display:grid;
  gap:1.25rem;
  margin-block-start:1.5rem;
}

.steps li{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.25rem;
  position:relative;
  padding-inline-start:4rem;
}

.steps li::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;
  inset-inline-start:1rem;
  inset-block-start:1rem;
  inline-size:2.25rem;
  block-size:2.25rem;
  background:var(--teal);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
}

.steps li strong{
  display:block;
  font-size:1.15rem;
  margin-block-end:.25rem;
}

.steps li span{
  display:block;
  opacity:.9;
}

.preview-cards{
  display:grid;
  gap:1rem;
  margin-block-start:1.25rem;
}

.reminder-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem 1.25rem;
  display:grid;
  gap:.35rem;
  box-shadow:var(--shadow);
}

.badge{
  justify-self:start;
  font-size:.8rem;
  font-weight:700;
  padding:.2rem .6rem;
  border-radius:999px;
  background:var(--sky);
  color:var(--teal-dark);
}

.status{
  font-size:.85rem;
  font-weight:700;
}

.status.done{color:var(--teal);}
.status.pending{color:var(--amber);}

.tips-list{
  list-style:none;
  display:grid;
  gap:1rem;
  margin-block-start:1.25rem;
}

.tips-list li{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.25rem;
  box-shadow:var(--shadow);
}

.tips-list li strong{
  display:block;
  font-size:1.15rem;
  margin-block-end:.25rem;
  color:var(--teal);
}

.tips-list li span{
  display:block;
  opacity:.9;
}

.category-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1rem;
  margin-block-start:1.25rem;
}

.category-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.25rem;
}

.cta-section{
  text-align:center;
}

.reminder-form{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.25rem;
  margin-block:1.5rem;
  box-shadow:var(--shadow);
  display:grid;
  gap:1rem;
}

.form-row{
  display:grid;
  gap:.4rem;
}

.form-row-short{
  grid-template-columns:1fr 1fr;
  gap:1rem;
}

label{
  font-weight:700;
  font-size:.95rem;
}

input,select,textarea{
  font:inherit;
  padding:.65rem .75rem;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg);
  color:var(--text);
  min-block-size:44px;
}

textarea{
  resize:vertical;
  min-block-size:120px;
}

input:focus,select:focus,textarea:focus{
  outline:3px solid var(--sky);
  border-color:var(--teal);
}

.reminder-list{
  list-style:none;
  display:grid;
  gap:.75rem;
  margin-block-start:1rem;
}

.reminder-item{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem;
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  box-shadow:var(--shadow);
}

.reminder-item.done{
  opacity:.7;
  background:var(--muted);
}

.reminder-item input[type="checkbox"]{
  inline-size:22px;
  block-size:22px;
  flex-shrink:0;
  margin-block-start:.15rem;
  accent-color:var(--teal);
}

.reminder-content{
  flex:1;
}

.reminder-content strong{
  display:block;
  font-size:1.05rem;
}

.reminder-content small{
  display:block;
  opacity:.85;
  margin-block-start:.15rem;
}

.delete-btn{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
  border-radius:6px;
  padding:.35rem .6rem;
  cursor:pointer;
  font-size:.85rem;
}

.delete-btn:hover{
  background:#fee2e2;
  color:#991b1b;
  border-color:#fecaca;
}

.empty-state{
  text-align:center;
  padding:1.5rem;
  opacity:.8;
  border:2px dashed var(--border);
  border-radius:var(--radius);
}

.contact-form{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem;
  box-shadow:var(--shadow);
  display:grid;
  gap:1rem;
}

.thank-you{
  background:var(--card);
  border:1px solid var(--teal);
  border-radius:var(--radius);
  padding:1.5rem;
  text-align:center;
  margin-block-end:1.5rem;
}

.thank-you p{
  font-size:1.1rem;
  margin-block-end:1rem;
}

.site-footer{
  background:var(--charcoal);
  color:#e5e7eb;
  padding-block:1.5rem;
  margin-block-start:auto;
}

.footer-inner{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  text-align:center;
}

.footer-inner nav{
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
}

.footer-inner a{
  color:#e5e7eb;
}

@media (max-width:480px){
  .form-row-short{
    grid-template-columns:1fr;
  }
  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .btn{
    inline-size:100%;
  }
  .reminder-item{
    flex-direction:column;
  }
}