/* Preserve CAR's existing visual system; make the phone journey the primary action. */
:root {
  --call-xs: .75rem;
  --call-sm: .875rem;
  --call-base: 1rem;
  --call-heading: 1.125rem;
  --call-space-1: .25rem;
  --call-space-2: .5rem;
  --call-space-3: .75rem;
  --call-space-4: 1rem;
  --call-space-5: 1.25rem;
  --call-space-6: 1.5rem;
  --call-space-8: 2rem;
}
.address-first-contact { margin-top: var(--call-space-6); max-width: 480px; scroll-margin-top: var(--call-space-4); }
.call-panel-heading { display: block; font: 700 var(--call-heading)/1.4 var(--body); margin: 0 0 var(--call-space-1); letter-spacing: 0; }
.call-panel-description { font-size: var(--call-sm); color: #526770; margin: 0 0 var(--call-space-3); }
.roof-address-form input,.roof-contact-form input[type="tel"] { width: 100%; min-height: 52px; border: 1px solid #9aacb2; border-radius: var(--radius); background: white; padding: var(--call-space-3); color: var(--ink); font-size: var(--call-base); }
.roof-address-form input::placeholder,.roof-contact-form input::placeholder { color: #596f79; opacity: 1; }
.roof-address-form .button,.roof-reason-form .button,.roof-contact-form .button,.roof-preview-receipt .button { width: 100%; margin-top: var(--call-space-3); justify-content: space-between; min-height: 52px; font-size: var(--call-sm); }
.roof-contact-form > .call-panel-heading { margin-bottom: var(--call-space-3); }
.roof-contact-methods { margin-top: var(--call-space-5) !important; }
.roof-contact-methods legend { font-size: var(--call-sm); font-weight: 650; }
.call-issue-summary { display: flex; align-items: center; gap: var(--call-space-3); justify-content: space-between; margin-bottom: var(--call-space-3); font-size: var(--call-sm); }
.call-issue-summary > span { background: #d7eef9; padding: var(--call-space-1) var(--call-space-2); border-radius: var(--radius); }
.call-issue-summary button { min-width: 44px; min-height: 44px; text-decoration: underline; color: var(--blue); font-size: var(--call-sm); padding: 0; }
.roof-demo-label { display: block; font-size: var(--call-xs); letter-spacing: .6px; font-weight: 700; color: var(--blue); margin-bottom: var(--call-space-3); }
.roof-preview-receipt > p { font-size: var(--call-sm); line-height: 1.5; }
.roof-preview-receipt dl { margin: var(--call-space-4) 0; }
.roof-preview-receipt dl > div { padding: var(--call-space-2) 0; border-bottom: 1px solid #ccd7d8; }
.roof-preview-receipt dt { font-size: var(--call-xs); color: #526770; }
.roof-preview-receipt dd { margin: var(--call-space-1) 0 0; font-size: var(--call-sm); overflow-wrap: anywhere; }
.call-privacy { font-size: var(--call-xs); line-height: 1.5; color: #526770; margin: var(--call-space-2) 0 0; }
.call-alternatives { display: flex; gap: var(--call-space-3); align-items: center; justify-content: space-between; font-size: var(--call-sm); margin-top: var(--call-space-2); }
.call-alternatives > span { color: #526770; }
.call-skip { display: inline-flex; align-items: center; gap: var(--call-space-2); min-height: 44px; font-weight: 650; font-size: var(--call-sm); text-decoration: underline; }
.call-address-summary { display: flex; align-items: flex-start; gap: var(--call-space-3); padding-bottom: var(--call-space-3); margin-bottom: var(--call-space-3); border-bottom: 1px solid #ccd7d8; }
.call-address-summary > span { display: flex; align-items: flex-start; gap: var(--call-space-2); flex: 1; min-width: 0; font-size: var(--call-sm); overflow-wrap: anywhere; }
.call-address-summary .icon { width: 18px; margin-top: var(--call-space-1); }
.call-address-summary > button { min-width: 44px; min-height: 44px; padding: 0; margin-top: calc(-1 * var(--call-space-2)); text-decoration: underline; font-size: var(--call-sm); color: var(--blue); }
.roof-reasons { border: 0; padding: 0; margin: 0; min-width: 0; }
.roof-reasons legend { padding: 0; margin-bottom: var(--call-space-3); }
.roof-reason-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--call-space-2); }
.roof-reason-option { position: relative; display: flex; gap: var(--call-space-2); align-items: center; min-height: 48px; padding: var(--call-space-3); border: 1px solid #9aacb2; border-radius: var(--radius); background: white; font-size: var(--call-sm); line-height: 1.35; cursor: pointer; }
.roof-reason-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.roof-reason-option:has(input:checked) { background: #d7eef9; border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); font-weight: 650; }
.roof-reason-option:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }
.roof-reason-option .icon { width: 18px; height: 18px; }
.call-ready-note { font-size: var(--call-xs); color: #526770; margin: var(--call-space-3) 0; line-height: 1.5; }
.roof-dial { width: 100%; justify-content: flex-start; gap: var(--call-space-2); min-height: 52px; font-size: var(--call-base); }
.roof-dial-number { margin-left: auto; font-size: var(--call-sm); }
.call-panel-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--call-space-2); margin-top: var(--call-space-2); }
.call-panel-bottom button { min-height: 44px; font-size: var(--call-xs); padding: 0; text-decoration: underline; color: #526770; }
.call-dialog-panel { max-width: none; margin-top: var(--call-space-5); }
.call-safety { font-size: var(--call-xs); color: #526770; margin: var(--call-space-5) 0 0; }
.mobile-actions .mobile-call { display: inline-flex; align-items: center; justify-content: center; gap: var(--call-space-2); text-decoration: none; font-size: var(--call-sm); min-height: 48px; min-width: 88px; }
.mobile-actions[hidden] { display: none !important; }
.mobile-actions [data-call-start] { flex: 1; font-size: var(--call-sm); min-height: 48px; }
@media (max-width: 760px) {
  .hero-copy { padding: var(--call-space-6) var(--call-space-6) var(--call-space-5); }
  .hero h1 { font-size: clamp(2rem, 8.8vw, 2.5rem); letter-spacing: -1.3px; line-height: 1.12; margin-bottom: var(--call-space-3); }
  .hero-context { font-size: var(--call-xs); line-height: 1.5; letter-spacing: .8px; margin-bottom: var(--call-space-4); }
  .hero-description { font-size: var(--call-sm); line-height: 1.65; margin-bottom: 0; }
  .address-first-contact { margin-top: var(--call-space-5); max-width: none; }
  .hero-note { margin-top: var(--call-space-3); justify-content: flex-start; font-size: var(--call-xs); }
  .header { height: 76px; padding-block: var(--call-space-2); }
  .header .brand img { width: 118px; height: 59px; }
  .location-button { min-height: 44px; }
  .mobile-actions { padding: var(--call-space-2) var(--call-space-3) calc(var(--call-space-2) + env(safe-area-inset-bottom)); }
  .call-team-portraits { margin-bottom: var(--call-space-4); }
  .call-team-portraits .contact-portrait { width: 48px; height: 48px; }
  .info-dialog:has(.call-dialog-panel) h2 { font-size: 1.65rem; line-height: 1.2; letter-spacing: -.5px; }
}
@media (max-width: 350px) {
  .hero-copy { padding-inline: var(--call-space-4); }
  .roof-reason-option { padding: var(--call-space-2); }
  .call-alternatives { gap: var(--call-space-2); }
  .roof-dial { gap: var(--call-space-2); }
}