/* B Flat Insurance — shared styles for the application flow. One file, every page. Brand: navy #071F4F, bronze #976C49, light ground (the 2026 logo is built for light backgrounds — never recolor it). System fonts on purpose: this loads on rural cell connections. */ :root{ --navy:#071F4F; --navy-soft:#1d3462; --bronze:#976C49; --bronze-dark:#7d5738; --paper:#faf7f2; --card:#ffffff; --ink:#1f2733; --muted:#5c6570; --line:rgba(7,31,79,.14); --error:#b3261e; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--paper); color:var(--ink); line-height:1.5; min-height:100vh; display:flex; flex-direction:column; } /* header */ header{ background:var(--card); border-bottom:3px solid var(--bronze); padding:10px 16px; } .bar{ max-width:640px;margin:0 auto; display:flex;align-items:center;justify-content:space-between;gap:12px; } .bar img{height:44px;width:auto;display:block} .bar a.phone{ color:var(--navy);text-decoration:none;font-weight:700;font-size:.95rem; white-space:nowrap; } /* main card */ main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:22px 16px 32px} .card{ background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(7,31,79,.07); width:100%;max-width:520px; padding:26px 22px 24px; } .step{ font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--bronze);margin:0 0 6px; } h1{ font-size:1.45rem;line-height:1.2;color:var(--navy); margin:0 0 6px;font-weight:800; } .sub{margin:0 0 18px;color:var(--muted);font-size:.98rem} /* form */ label{display:block;font-weight:600;font-size:.92rem;margin:14px 0 5px;color:var(--navy)} input[type=text],input[type=email],input[type=tel],input[type=date],select{ width:100%;padding:13px 12px;font-size:1.05rem; border:1.5px solid var(--line);border-radius:7px;background:#fff;color:var(--ink); } input:focus,select:focus{outline:2px solid var(--bronze);outline-offset:1px;border-color:var(--bronze)} .field-err{color:var(--error);font-size:.85rem;margin:4px 0 0;display:none} .invalid input{border-color:var(--error)} .invalid .field-err{display:block} .consent{ display:flex;gap:10px;align-items:flex-start; margin:18px 0 4px;font-size:.9rem;color:var(--muted); } .consent input{width:19px;height:19px;margin-top:2px;flex:none;accent-color:var(--bronze)} button.next, a.next{ width:100%;margin-top:16px; background:var(--bronze);color:#fff;border:0;border-radius:7px; padding:15px;font-size:1.12rem;font-weight:800;cursor:pointer; } button.next:hover, a.next:hover{background:var(--bronze-dark)} button.next:disabled{opacity:.6;cursor:wait} .form-err{ display:none;background:#fdf1f0;border:1px solid #f1c4c0;color:var(--error); border-radius:7px;padding:10px 12px;font-size:.92rem;margin-top:14px; } .reassure{margin:14px 0 0;font-size:.85rem;color:var(--muted);text-align:center} /* honeypot: off-screen, not display:none (bots check for that) */ .hp{position:absolute;left:-6000px;top:0;height:1px;overflow:hidden} footer{ text-align:center;color:var(--muted);font-size:.8rem; padding:14px 16px 20px; } footer .co{color:var(--navy);font-weight:600} /* --------------------------------------------------------------------------- Embedded mode (inside the Squarespace iframe). Set by a tiny script: if this page is framed, gets .embedded. Direct link (e.g. the link Katie texts a customer) keeps the full page with the logo bar and footer; the iframe strips that chrome so the card hugs the frame, since the website already carries the header, footer and disclaimers. --------------------------------------------------------------------------- */ html.embedded, html.embedded body{min-height:0;height:auto} html.embedded body{background:var(--card);display:block} html.embedded header, html.embedded footer{display:none} html.embedded main{flex:none;display:block;padding:0;margin:0} html.embedded .card{ border:0;border-radius:0;box-shadow:none;max-width:100%; padding:22px 20px 20px; }