:root{--bg:#fff;--text:#12324b;--accent:#281D87;--muted:#6b7b8a;--card:#fff}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
.container{max-width:1100px;margin:0 auto;padding:18px}
.topbar{background:var(--accent);color:white}
.topbar .container{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700}
.topnav a{color:white;text-decoration:none;margin-left:12px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:16px}
.tile{display:block;padding:18px;border-radius:10px;background:#f6fbff;border:1px solid #e6f0fa;color:var(--accent);text-decoration:none;font-weight:600;text-align:center}
.layout{display:flex;gap:20px}
.sidebar{width:260px;background:#fbfdff;padding:12px;border-radius:10px;border:1px solid #eef6ff;height:calc(100vh - 160px);position:sticky;top:80px;overflow:auto}
.sidebar h3{margin-top:0;color:var(--accent)}
.sidebar ul{list-style:none;padding:0;margin:8px 0}
.sidebar li{margin:6px 0}
.sidebar a{display:block;padding:8px 6px;color:var(--text);text-decoration:none;border-radius:6px}
.sidebar a.active, .sidebar a:hover{background:#e9f3ff;color:var(--accent)}
main{flex:1;background:var(--card);padding:20px;border-radius:10px;border:1px solid #eef6ff}
.right-slot{width:300px;margin-left:20px}
.ad-placeholder{background:#f3f7fb;border:1px dashed #cfe6ff;padding:12px;text-align:center;border-radius:8px;color:var(--muted);margin:12px 0;width: 300px;height: 250px;}
form label{display:block;margin:8px 0}
input, select, textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #d7e9fb}
button{background:var(--accent);color:white;padding:10px 14px;border-radius:8px;border:none;cursor:pointer}
.result{background:#f6fbff;border:1px solid #e1f0ff;padding:12px;border-radius:8px;margin-top:10px}
footer.sitefoot{padding:18px;text-align:center;color:var(--muted);border-top:1px solid #f0f6fb;margin-top:24px}
@media(max-width:1000px) {
  .layout {
    flex-direction: column;
  }

  /* Sidebar hidden by default on mobile */
  .sidebar {
    position: fixed;
    top: 0;
    left: -280px; /* keep it off-screen */
    width: 260px;
    height: 100vh;
    border-radius: 0;
    z-index: 999;
    transition: left 0.3s ease;
  }

  /* Sidebar when opened */
  .sidebar.open {
    left: 0;
  }

  /* Show the menu button */
  .menu-btn {
    display: inline-block;
  }

  .right-slot {
    width: 100%;
    margin-left: 0;
  }
}

.menu-btn {
  display: none; /* hidden by default */
  font-size: 24px;
  background: var(--accent);
  color: white;
  border: none;
  padding: 8px 12px;
  margin-left: 10px;
  cursor: pointer;
  border-radius: 6px;
}
@media(max-width: 768px) {
  .calc-layout {
    flex-direction: column;   /* stack vertically */
  }
  .right-slot {
    width: 100%;              /* make ad take full width */
    margin-left: 0;
  }
}
.calc-layout {
  display: flex;
  gap: 20px; /* spacing between calculator and ad */
  align-items: flex-start; /* optional: aligns top edges */
}
/* Base font size (desktop default) */
body {
  font-size: 16px;
  line-height: 1.4;
}

/* Headings for desktop */
h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }

/* Tablet adjustments */
@media (max-width: 1024px) {
  body {
    font-size: 15px;
  }
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  h1 { font-size: 26px; }
  h2 { font-size: 20px; }
  h3 { font-size: 18px; }
}