/* Simple responsive styles for the calculator bundle */
:root {
  --maxw: 1100px;
  --accent: #0b63ce;
  --muted: #666;
}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;line-height:1.5;margin:0;background:#f7f9fc;color:#111}
.container{max-width:var(--maxw);margin:20px auto;padding:16px}
header{text-align:center}
h1{margin:4px 0;font-size:clamp(20px,2.6vw,28px)}
.tagline{color:var(--muted)}
.calc-row{display:grid;grid-template-columns:1fr 220px 1fr;gap:16px;align-items:start}
.card{background:#fff;padding:16px;border-radius:10px;box-shadow:0 6px 18px rgba(20,30,50,0.06)}
label{display:block;margin:10px 0;font-size:14px}
input[type=number],select{width:100%;padding:8px;border-radius:6px;border:1px solid #ddd}
button{background:var(--accent);color:#fff;padding:10px 12px;border:none;border-radius:8px;cursor:pointer}
.result{margin-top:12px;padding:10px;background:#fafafa;border-radius:6px;border:1px solid #eee}
.ad{background:#e6eefc;border:2px dashed #cfe0fb;padding:12px;text-align:center;color:#0b63ce;margin:10px 0}
.ad-side{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);padding:8px;border-radius:8px}
.about{margin-top:18px}
.about-content{background:#fff;padding:16px;border-radius:8px;box-shadow:0 6px 12px rgba(20,30,50,0.04)}
.faqs{margin-top:12px}
.faq{background:#fff;padding:12px;margin:10px 0;border-radius:8px}
footer{margin-top:20px;text-align:center;color:var(--muted);font-size:13px;padding-bottom:30px}

/* Mobile */
@media(max-width:880px){
  .calc-row{grid-template-columns:1fr;gap:12px}
  .ad-side{display:none}
}