/* Officea area pages: cost estimate and floor plan audit forms (js/officea-area.js). */
.alead { padding: 40px 0; border-top: 0; }
.al-card { display: grid; gap: 22px 40px; padding: 26px; background: var(--paper, #F6F3EC); border: 1px solid var(--line, #E3E2DE); border-left: 4px solid var(--brass, #B08A4E); border-radius: 8px; }
@media (min-width: 860px) { .al-card { grid-template-columns: 1fr 1.1fr; align-items: start; } }
.al-card h2 { font-size: 26px; line-height: 1.2; max-width: 22ch; }
.al-card .al-intro { margin-top: 10px; color: var(--muted, #575A5E); max-width: 46ch; }
.al-card .al-intro a { color: var(--accent, #7E602D); }
.al-form { margin: 0; display: grid; gap: 12px; max-width: none; }
.al-form .al-row { display: grid; gap: 12px; }
@media (min-width: 520px) { .al-form .al-row { grid-template-columns: 1fr 1fr; } }
.al-form label { display: grid; gap: 5px; font: 700 13px/1.3 var(--body, sans-serif); color: var(--ink, #16181A); }
.al-form label .opt { font-weight: 400; color: var(--muted, #575A5E); }
.al-form input { width: 100%; font: 400 16px var(--body, sans-serif); color: #16181A; background: #fff; border: 1.5px solid var(--line, #ccc); border-radius: 4px; padding: 11px 12px; min-height: 46px; }
.al-form input[type="file"] { padding: 9px 10px; font-size: 14px; }
.al-form input:focus { border-color: var(--brass, #B08A4E); outline: none; box-shadow: 0 0 0 3px rgba(176,138,78,.25); }
.al-form [aria-invalid="true"] { border-color: #B3261E; }
.al-form .btn { justify-self: start; min-width: 200px; }
.al-form .al-hint { font-size: 13px; color: var(--muted, #575A5E); margin: -4px 0 0; }
.al-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.al-err { margin: 0; color: #B3261E; font-size: 14px; }
.al-err:empty { display: none; }
.al-err a { color: inherit; }
.al-out { outline: none; }
.al-out .al-k { font: 600 19px/1.3 var(--display, sans-serif); margin: 0 0 10px; }
.al-out ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink, #16181A); }
.al-out li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line, #E3E2DE); }
.al-out li small { display: block; color: var(--muted, #575A5E); font-size: 12px; }
.al-out li b { font: 600 20px/1 var(--display, sans-serif); color: var(--accent, #7E602D); white-space: nowrap; }
.al-out .al-note, .al-out p { margin-top: 12px; font-size: 14px; color: var(--muted, #575A5E); }
.al-out a { color: var(--accent, #7E602D); }
.al-form select { width: 100%; font: 400 16px var(--body, sans-serif); color: #16181A; background: #fff; border: 1.5px solid var(--line, #ccc); border-radius: 4px; padding: 11px 12px; min-height: 46px; }
.al-form select:focus { border-color: var(--brass, #B08A4E); outline: none; box-shadow: 0 0 0 3px rgba(176,138,78,.25); }
.cf-out .cf-c { padding: 14px 0; border-bottom: 1px solid var(--line, #E3E2DE); }
.cf-out .cf-c h3 { font-size: 19px; margin: 0 0 6px; }
.cf-out .cf-c p { margin: 0 0 4px; font-size: 15px; }
.cf-out .cf-note { font-size: 13px; color: var(--muted, #575A5E); margin: 12px 0; }
.cf-out .al-form { margin-top: 12px; }