/* ---- Scoped styling (prefixed .ai- to avoid clashes) ---- */
.ai-mortgage-section { padding: 20px 0 48px; background:#fff; }
.ai-mortgage-section .container { max-width: 1100px; }
.hero h1 { color:#a51c36; font-weight:800; font-size:clamp(1.9rem,3.5vw,2.6rem); margin:0 0 6px; letter-spacing:-.3px; }
.hero .sub { color:#333; font-weight:600; margin:0 0 8px; }
.disclaimer { background:#fff5f7; border:1px solid #f0c8d0; border-radius:10px; padding:10px 12px; color:#5a1a2a; }
.disclaimer a { color:#a51c36; text-decoration:underline; }

.ai-card { background:#fff; border:1px solid #eee; border-radius:14px; padding:14px; box-shadow:0 8px 24px rgba(164,29,58,.06); }
.ai-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap:18px; }
@media (max-width: 900px){ .ai-grid { grid-template-columns:1fr; } }

.ai-form .ai-field { display:grid; gap:8px; margin-bottom:12px; }
.ai-form .two { grid-template-columns:1fr 1fr; gap:10px 12px; }
.ai-form label { font-size:.92rem; color:#444; font-weight:600; }
.ai-form input { height:42px; border-radius:10px; border:2px solid #e7e7e7; padding:0 10px; font-size:1rem; outline:none; transition:border-color .15s, box-shadow .15s; }
.ai-form input:focus { border-color:#c24b60; box-shadow:0 0 0 3px rgba(164,29,58,.12); }

/* Inline error styles */
.ai-error { margin-top:10px; padding:8px 10px; border-radius:8px; background:#ffecef; border:1px solid #f8b9c5; color:#8a0020; font-weight:700; }
.ai-input-invalid { border-color:#d32f2f !important; box-shadow:0 0 0 3px rgba(211,47,47,.12) !important; }

.ai-actions { display:flex; gap:10px; margin-top:6px; flex-wrap:wrap; }
.ai-btn-primary { background:#a51c36; color:#fff; border:0; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:700; }
.ai-btn-ghost { background:transparent; color:#a51c36; border:1px solid #a51c36; padding:10px 14px; border-radius:10px; cursor:pointer; }
.ai-tiny { font-size:.8rem; color:#666; margin-top:8px; }

.ai-results .ai-placeholder { color:#555; display:grid; grid-template-columns:36px 1fr; gap:10px; }
.ai-results .icon { font-size:24px; line-height:36px; }

.ai-bands { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:6px; }
@media (max-width:600px){ .ai-bands { grid-template-columns:1fr; } }
.ai-band { border:1px solid #eee; border-radius:12px; padding:10px; background:#fafafa; }
.ai-band.active { background:#fff; border-color:#f1c6cf; box-shadow:0 8px 18px rgba(164,29,58,.08); }
.ai-band-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.ai-band .label { font-weight:800; color:#333; }
.tag { font-size:.78rem; font-weight:700; color:#555; background:#f5f5f5; padding:2px 8px; border-radius:999px; }
.price { font-size:1.4rem; font-weight:800; color:#a51c36; }
.monthly { color:#333; margin-top:2px; }

/* Breakdown + help */
.ai-breakdown { margin-top:12px; }
.ai-breakdown h3, .ai-advice h3 { margin:10px 0 6px; font-size:1.05rem; color:#333; }
.ai-breakdown ul { list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.ai-breakdown li { display:block; border-bottom:1px dashed #eee; padding:6px 0; }
.ai-breakdown .line { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ai-help-btn { margin-left:8px; font-size:.78rem; font-weight:700; border:0; background:#f5f5f5; color:#333; padding:2px 8px; border-radius:999px; cursor:pointer; }
.ai-help-btn:hover { background:#eee; }
.ai-help-panel { margin-top:6px; background:#fffafc; border:1px solid #f6dbe2; border-radius:10px; padding:8px; color:#5a1a2a; line-height:1.35; }

.ai-rateShock { margin-top:8px; background:#fffafc; border:1px solid #f6dbe2; border-radius:10px; padding:8px; color:#5a1a2a; }

.ai-advice { margin-top:12px; }
.ai-cta-row { display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }
.ai-btn-secondary { background:#a51c36; color:#fff; border-radius:10px; padding:8px 12px; text-decoration:none; font-weight:700; }
.ai-btn-outline { border:1px solid #a51c36; color:#a51c36; border-radius:10px; padding:8px 12px; text-decoration:none; font-weight:700; background:#fff; }

.ai-footnote { margin-top:18px; font-size:.9rem; color:#444; }
.ai-footnote a { color:#a51c36; text-decoration:underline; }