:root{
  --bg:#fffaf3;
  --ink:#2b1e12;
  --accent:#b45309;
  --accent-soft:#fde7c7;
  --card:#ffffff;
  --border:#ead7c0;
}

*{box-sizing:border-box;}

body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
}

a{color:inherit;text-decoration:none;}
a:hover{text-decoration:underline;}

.wrap{max-width:1080px;margin:auto;padding:22px;}

header{
  background:var(--accent-soft);
  border-bottom:1px solid var(--border);
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.brand strong{
  font-size:20px;
  letter-spacing:.4px;
}

.brand strong a{
  text-decoration:none;
}

.brand strong a:hover{
  text-decoration:none;
  opacity:0.85;
}

.tag{
  font-size:13px;
  opacity:.85;
}

h1{font-size:40px;margin:0 0 10px 0;line-height:1.15;}
h2{font-size:24px;margin:0 0 10px 0;}

section{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:22px;
  margin:22px 0;
}

.btn{
  display:inline-block;
  padding:12px 18px;
  border-radius:10px;
  border:1px solid var(--accent);
  margin:6px 8px 0 0;
  font-weight:800;
  letter-spacing:.2px;
}

.btn-primary{background:var(--accent);color:#fff;}
.btn-quiet{background:transparent;}

.note{
  font-size:13px;
  opacity:.85;
  margin-top:10px;
}

.cityGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:10px;
}

.cityCard{
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
  background:#fff;
  min-height:86px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.cityCard strong{font-size:16px;}
.cityCard span{font-size:13px;opacity:.85;margin-top:6px;}

.steps{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:10px;
}

.step{
  border:1px dashed var(--border);
  border-radius:12px;
  padding:14px;
  background:#fff;
}

.step strong{display:block;margin-bottom:6px;}

.faq details{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  background:#fff;
  margin:10px 0;
}

.faq summary{
  cursor:pointer;
  font-weight:800;
}

footer{
  border-top:1px solid var(--border);
  background:var(--accent-soft);
  margin-top:30px;
  padding:18px 0;
  font-size:14px;
}

footer a{margin-right:14px;}

/* Tablet breakpoint - iPad and similar */
@media (max-width:768px){
  .cityGrid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .steps{grid-template-columns:1fr;}
  h1{font-size:32px;}
  h2{font-size:22px;}
}

/* Mobile breakpoint - phones */
@media (max-width:480px){
  .wrap{padding:16px;}
  
  h1{font-size:28px;}
  h2{font-size:20px;}
  
  .brand strong{font-size:18px;}
  
  .cityGrid{grid-template-columns:1fr;}
  
  .btn{
    padding:14px 20px;
    font-size:16px;
    width:100%;
    text-align:center;
    margin:8px 0;
  }
  
  section{
    padding:18px;
    margin:16px 0;
    border-radius:12px;
  }
  
  .cityCard{
    padding:16px;
    min-height:auto;
  }
  
  .step{
    padding:16px;
  }
  
  footer{
    font-size:13px;
  }
  
  footer a{
    display:inline-block;
    margin:4px 8px 4px 0;
  }
}