/* Styles for the "How Can We Help?" sign (Email For Help / Call For Help), its "One Last Check" sign with the
   Cloudflare check, and the thank-you. Trimmed on 2026-10-26 from the old quote-intake styles when the vehicle,
   trailer and driver intake was removed (a full copy is in the Desktop backup "Main Website backup with intake files 2026-10-26"). */
/* Vehicle and driver cards: the one being edited is open, the rest fold to one line */
.card { border: 1.5px solid rgba(255, 255, 255, .22); border-radius: 10px; margin-bottom: 8px; background: rgba(255, 255, 255, .03); }
/* a folded card shows a pencil (Edit) and a trash can (Delete Vehicle / Trailer / Driver) on the right */
.card { position: relative; }
/* The one box to fill in now: signal yellow, even while the cursor is in it */
.sign .field [aria-invalid="true"], .sign .field [aria-invalid="true"]:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(245, 183, 0, .5); }
/* Quote sign title: "Commercial Auto Quote" on one line, no arrow */
.sign__head { margin-bottom: 18px; }
/* the title sizes itself to the width of the sign, so it always fills one line */
.sign__inner { container-type: inline-size; }
.sign h2 { max-width: none; white-space: nowrap; font-size: min(30px, 8.6cqi); }
@media (min-width: 981px) {
  .hero__grid { position: relative; }
  .hero__copy { transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .4s ease, visibility 0s linear 0s; }
}
/* ---------- Pick a lane (reworked Example 1) ---------- */
.lanes__lead { margin: -12px 0 12px; font: 700 14px/1.3 var(--body); color: #CFE6D8; }
.lanes { display: grid; gap: 10px; margin-bottom: 16px; }
.lane { position: relative; display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; text-align: left; width: 100%;
  padding: 13px 14px; border-radius: 12px; cursor: pointer; color: var(--white); text-decoration: none;
  background: rgba(255, 255, 255, .06); border: 2px solid rgba(255, 255, 255, .25); font: inherit; transition: border-color .15s, background .15s; }
.lane:hover { border-color: rgba(255, 255, 255, .6); }
.lane[aria-pressed="true"] { background: var(--white); border-color: var(--white); color: var(--green-deep); }
.lane__num { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: var(--yellow); color: var(--asphalt); font: 900 18px/1 var(--display); }
.lane strong { display: block; font: 900 17px/1.15 var(--display); }
.lane small { display: block; margin-top: 3px; font-size: 13px; opacity: .85; }
.lane:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
/* until "Build My Full Quote" is picked, only the two lanes show (a small box) */
.sign:not(.is-full) .sign__inner > .field,
.sign:not(.is-full) .intake__start,
.sign:not(.is-full) .intake,
.sign:not(.is-full) .sign__consent,
.sign:not(.is-full) .sign__status { display: none; }
.sign.is-full .sign__inner > .field, .sign.is-full .intake__start { animation: ex-grow .35s cubic-bezier(.22, 1, .36, 1); }
@keyframes ex-grow { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sign.is-full .sign__inner > .field, .sign.is-full .intake__start { animation: none; }
}
.sign__alt { display: none; }
.intake__start { margin-top: 6px; }
/* no quick send: the big button shows only on the last step, as Submit Quote */
.sign__inner > button[type="submit"] { display: none; }
/* Cloudflare's "Success!" security check: on the One Last Check sign, under the consent, above
   "Yes, Submit My Quote" (room is held for it so the button doesn't jump when it appears) */
.cx-turnstile { margin: 0 0 14px; min-height: 65px; }
/* Start My Quote glows once "Build My Full Quote" is picked, so the next move is obvious */
.sign.is-full .intake__start { animation: start-glow 2.2s ease-in-out infinite; }
@keyframes start-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 183, 0, .55), 0 8px 20px -10px rgba(245, 183, 0, .6); }
  50%      { box-shadow: 0 0 0 7px rgba(245, 183, 0, 0), 0 0 26px 4px rgba(245, 183, 0, .55); }
}
@media (prefers-reduced-motion: reduce) {
  .sign.is-full .intake__start { animation: none !important; box-shadow: 0 0 22px 2px rgba(245, 183, 0, .55); }
}
/* Desktop, small "How Can We Help?" sign: it stands on two posts, like the 10 Vehicle Limit sign.
   The posts go away when Build My Full Quote grows the sign. */
.sign { position: relative; }
.sign.is-posted::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 170px; height: 150px;
  background:
    linear-gradient(90deg, #8C979C, #C5CDD1, #8C979C) left / 12px 100% no-repeat,
    linear-gradient(90deg, #8C979C, #C5CDD1, #8C979C) right / 12px 100% no-repeat;
  -webkit-mask: linear-gradient(#000 70%, transparent); mask: linear-gradient(#000 70%, transparent);
}
/* Desktop: the page opens with "Commercial auto insurance in Fort Myers" a quarter inch under the
   header, and that is the very top: the top bar is gone, so there is nothing to scroll up to */
@media (min-width: 981px) {
  .topbar { display: none; }
  .hero__grid { padding-top: 24px; }
}
/* ---------- One Last Check: after Submit Quote, a road sign asks them to confirm before it sends ---------- */
/* the page behind the sign stops scrolling on computers only: on iPhones, switching the page's scrolling
   off and on is one of the things that makes Safari lose the bottom of the screen (the call bar floats up) */
@media (min-width: 681px) {
  html.cx-locked { overflow: hidden; }
}
.cx-sign { overscroll-behavior: contain; }
/* the short "what you're sending" summary, shared by all three */
.cx-sum { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, .08); text-align: left; }
.cx-sum__biz { font: 900 18px/1.2 var(--display); color: var(--white); }
.cx-sum__reach { margin-top: 6px; font: 500 13px/1.4 var(--body); color: #DCEBE2; }
.cx-sum__reach strong { color: var(--white); font-weight: 700; }
/* the agreement checkboxes */
.cx-check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; text-align: left; cursor: pointer; font: 600 13px/1.45 var(--body); color: #E3F1E8; }
.cx-check input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--yellow); cursor: pointer; }
.cx-check:hover span { color: var(--white); }
/* "Consent (Required)" over the storage checkbox, and the contact authorization in its own box under it */
.cx-consent { margin: 14px 0 8px; text-align: left; font: 800 14px/1.2 var(--display); color: var(--white); }
.cx-consent span { margin-left: 4px; font: 700 12px var(--body); color: #FFE08A; }
.cx-authorize { margin: 2px 0 16px; padding: 10px 12px; text-align: left; border: 1.5px solid rgba(255, 255, 255, .3); border-radius: 8px; font: 500 12.5px/1.5 var(--body); color: #DCEBE2; }
.cx-link { margin-top: 10px; padding: 4px 8px; background: none; border: 0; cursor: pointer; font: 700 13px var(--body); color: #CFE6D8; text-decoration: underline; }
.cx-link:hover { color: var(--white); }
.cx-sign__go:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
/* 1. Road sign check */
.cx-sign { position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; padding: 20px; background: rgba(6, 22, 16, .66); overflow-y: auto; }
.cx-sign__post-wrap { display: flex; flex-direction: column; align-items: center; width: min(480px, 100%); animation: cx-pop .35s cubic-bezier(.22, 1, .36, 1); }
.cx-sign__board { width: 100%; background: var(--green); border-radius: 18px; padding: 7px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7); }
.cx-sign__inner { border: 3px solid var(--white); border-radius: 12px; padding: 24px 22px 14px; text-align: center; }
.cx-sign__big { margin-bottom: 14px; font: 900 clamp(28px, 7vw, 38px)/1 var(--display); color: var(--yellow); text-transform: uppercase; }
.cx-sign__go { display: block; width: 100%; margin-top: 6px; padding: 15px; border: 0; border-radius: 10px; cursor: pointer; background: var(--yellow); color: var(--asphalt); font: 800 17px/1 var(--display); }
.cx-sign__go:not(:disabled):hover { background: var(--yellow-hover); }
.cx-sign__posts { display: flex; gap: 170px; }
.cx-sign__posts span { width: 10px; height: 54px; background: linear-gradient(90deg, #8C979C, #C5CDD1, #8C979C); }
@keyframes cx-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cx-sign__post-wrap { animation: none !important; }
}
/* Phones and tablets: the same quarter inch between the header and "Commercial auto insurance in Fort Myers" as desktop */
@media (max-width: 980px) {
  .hero__grid { padding-top: 24px; }
}
/* Number 1: the sign's Contact Alex button shows as soon as lane 1 (Email Alex For Help) opens */
.sign.is-full .sign__inner > button.contact__send { display: flex; justify-content: center; align-items: center; gap: 8px; }
/* Subject: twice the height of the Phone box; scrolls inside when they write more */
.sign .field--subject textarea {
  display: block; width: 100%; height: 100px; padding: 12px 14px; resize: none; overflow-y: auto;
  font: 500 16px/1.4 var(--body); color: var(--asphalt);
  background: var(--white); border: 2px solid transparent; border-radius: 9px;
}
.sign .field--subject textarea:focus { outline: none; border-color: var(--yellow); }

/* Lanes show white icons instead of words, as big as the number boxes and set a little to the right.
   Lane 1 (email) stays green with a white outline when it's opened. */
.lane--icon { grid-template-columns: 38px auto 1fr; }
.lane__icon { width: 38px; height: 38px; margin-left: 14px; color: var(--white); }
.lane[aria-pressed="true"] { background: rgba(255, 255, 255, .06); border-color: var(--white); color: var(--white); }

/* Lane 2: a small traffic light. Green while we're open (7 days, 8 AM to 7 PM Eastern), red when closed. */
.lane__status { justify-self: end; text-align: right; min-width: 0; }
.hrs__wrap { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.hrs__light { display: grid; gap: 3px; padding: 4px; border-radius: 7px; background: #1C2427; }
.hrs__light i { width: 9px; height: 9px; border-radius: 50%; background: #3A4549; }
.is-open .hrs__light i:nth-child(3) { background: #5FD394; box-shadow: 0 0 8px #5FD394; }
.is-closed .hrs__light i:nth-child(1) { background: #FF6B5E; box-shadow: 0 0 8px #FF6B5E; }
.hrs__big { display: block; font: 800 15px/1.2 var(--display); }
.hrs__sub { display: block; margin-top: 3px; font: 500 12.5px/1.3 var(--body); color: #CFE6D8; }
/* closed: the arrow nudges up toward lane 1 and lane 1 glows, so email is the way in */
.hrs__up { display: inline-block; animation: hrs-up 1.4s ease-in-out infinite; }
@keyframes hrs-up { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-4px); } }
.sign.hours-closed .lane[data-lane-full]:not([aria-pressed="true"]) { animation: hrs-glow 2.4s ease-in-out infinite; }
@keyframes hrs-glow { 0%, 100% { border-color: rgba(255, 255, 255, .25); box-shadow: none; } 50% { border-color: var(--yellow); box-shadow: 0 0 18px rgba(245, 183, 0, .45); } }
@media (prefers-reduced-motion: reduce) { .hrs__up, .sign.hours-closed .lane[data-lane-full] { animation: none !important; } }

/* Lane layout: number on the left, symbol in the far right corner (equal space top, right and bottom),
   and in lane 2 the traffic light sits between them, right after the number */
.lane--icon { grid-template-columns: 38px 1fr 38px; padding-right: 13px; }
.lane--icon .lane__icon { grid-column: 3; grid-row: 1; margin-left: 0; justify-self: end; }
.lane--icon .lane__status { grid-column: 2; grid-row: 1; justify-self: start; text-align: left; margin-left: 6px; }
.lane--icon .hrs__wrap { justify-content: flex-start; }
.lane--icon.lane--call { padding-right: 15px; }   /* lane 2 is a little taller (traffic light), so its phone sits equally off the edge too */