/* [SIGNUP-CHECKOUT 2026-07-28] Multi step checkout for new_account + onboarding.
   Progressive enhancement layer: ll-signup-checkout.js reorganizes the legacy
   form into steps at runtime. If the script does not run, none of these
   classes appear and the legacy single page form renders untouched.
   Namespace: .llsw-  (LeadLocate Signup Wizard). Pricing page DNA: Rubik,
   green #259457 / dark #1d7a48, heading #20303c, body #33434e, line #e3e9ed,
   soft #f5f8f6. No browser dialogs, no em dashes in copy.

   CASCADE TRAP: this sheet loads in the head, but the legacy
   car-dealers/css/style.css loads AFTER it, so an equal-specificity override
   here silently loses. When a rule fights a legacy one, either raise
   specificity or use !important and say why (see the agreement panel). */

.llsw{font-family:Rubik,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#33434e}
.llsw *{box-sizing:border-box}
.llsw:before,.llsw:after{content:none}

/* Boot gate: the form area stays invisible until the wizard has rebuilt it,
   so the legacy design never flashes. The inline failsafe in the page strips
   llsw-boot after 4s if the wizard never arrives, revealing the legacy form. */
html.llsw-boot .sign_form_panel_outer{opacity:0}
html.llsw-ready .sign_form_panel_outer{opacity:1;transition:opacity .18s ease}

/* Disaster recovery: if wizard init throws AFTER legacy panels were moved
   into the shell, boot() adds .llsw-recover instead of deleting the shell
   (deleting it would gut the form). Every step becomes visible, the wizard
   chrome disappears, and the legacy native submit path works. */
.llsw.llsw-recover .llsw-step{display:block!important;animation:none}
.llsw.llsw-recover .llsw-head,.llsw.llsw-recover .llsw-summary,.llsw.llsw-recover .llsw-nav,
.llsw.llsw-recover .llsw-order,.llsw.llsw-recover .llsw-payframe-wrap,.llsw.llsw-recover .llsw-paynote,
.llsw.llsw-recover .llsw-payfallback,.llsw.llsw-recover .llsw-payconfirm,.llsw.llsw-recover .llsw-secure-line{display:none!important}
/* recovery also hides the wizard-built plan cards + tier drawer: boot()
   reveals the legacy #iscustom table at the same moment, and showing both
   was a DUPLICATED plan picker whose wizard half had no Continue button
   (its nav is hidden above). Audit 2026-07-29. */
.llsw.llsw-recover .llsw-plans,.llsw.llsw-recover .llsw-tiers{display:none!important}

/* While the wizard is active, hide the legacy chrome we replace */
.llsw-active .form-submit-button{display:none!important}
.llsw-active .ll-legacy-plans{position:absolute!important;left:-9999px!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}
.llsw-active .chrome_panel{border:none;background:transparent;padding:0}

/* ---- progress header ----
   Full width stepper, edge to edge with the section: the first step is flush
   left, the last is flush right, and flexible connector <li> elements fill
   the space between dots. The stepper itself is the visual divider under the
   page intro, so it carries NO rule line of its own (owner spec). */
.llsw-head{margin:26px 0 30px;padding:0}
/* EVEN DOT SPACING: every step <li> is exactly dot-width, so the flexible
   connector lines distribute the dots at equal intervals regardless of how
   long each label is ("Review & sign" vs "Plan"). Labels hang below the dots
   out of flow (absolute, nowrap); the ol reserves their height with
   padding-bottom. */
.llsw-progress{list-style:none;display:flex;align-items:flex-start;width:100%;margin:0;padding:0 0 26px;gap:0;position:relative}
.llsw-progress:before,.llsw-progress:after{content:none}
.llsw-progress li{flex:0 0 26px;width:26px;position:relative;display:flex;flex-direction:column;align-items:center;
  text-align:center;font-size:13px;font-weight:500;color:#8a97a0;line-height:1.3}
.llsw-progress li .llsw-step-label{position:absolute;top:34px;left:50%;transform:translateX(-50%);white-space:nowrap}
.llsw-progress li:first-child .llsw-step-label{left:0;transform:none}
.llsw-progress li:last-child .llsw-step-label{left:auto;right:0;transform:none}
.llsw-progress li .llsw-dot{width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid #cfd9de;
  color:#8a97a0;font-size:12.5px;font-weight:600;display:flex;align-items:center;justify-content:center;
  transition:all .25s}
.llsw-progress li.llsw-progress-line{flex:1 1 auto;width:auto;display:block;height:2px;background:#e3e9ed;
  margin:12px 10px 0;border-radius:1px;transition:background .3s}
.llsw-progress li.llsw-progress-line.is-done{background:#259457}
.llsw-progress li.is-current{color:#20303c;font-weight:600}
.llsw-progress li.is-current .llsw-dot{border-color:#259457;color:#259457;box-shadow:0 0 0 4px #e9f5ee}
.llsw-progress li.is-done{color:#1d7a48}
.llsw-progress li.is-done .llsw-dot{background:#259457;border-color:#259457;color:#fff}
.llsw-progress li.is-done .llsw-dot .llsw-dot-n{display:none}
/* the done check: bold WHITE stroke so the state reads instantly (owner spec:
   the old unstroked check inherited black fill and was barely visible) */
.llsw-progress li .llsw-dot .llsw-dot-c{display:none;width:14px;height:14px;fill:none;stroke:#fff;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.llsw-progress li.is-done .llsw-dot .llsw-dot-c{display:block}
.llsw-progress li.is-clickable{cursor:pointer}
.llsw-progress li.is-clickable:hover{color:#1d7a48}
/* (no mobile rules here: at phone widths the dotted stepper is display:none
   entirely and the progress bar takes over - see the MOBILE PASS block) */

/* ---- selection summary chip ----
   Owner redesign 2026-07-29: ONE calm line. Left side is the plan info only
   ("Hybrid · 80 to 120* Inbound Leads") in a single neutral weight/color and
   it may wrap inside its own span; right side is the price plus a small
   Change link. No "Selected:" label, no mid-line bolds: matching font sizes
   left and right, the price differs by weight alone. Tone rules below only
   recolor the chip background/border, the price, and the link. */
.llsw-summary{display:flex;align-items:center;gap:14px;background:#e9f5ee;border:1px solid #bfe3cd;
  border-radius:8px;padding:11px 16px;margin:0 0 18px;font-size:14.5px;font-weight:400}
.llsw-summary .llsw-summary-plan{flex:1;min-width:0;color:#33434e;font-weight:500;line-height:1.45}
.llsw-summary .llsw-summary-price{margin-left:auto;font-weight:600;font-size:14.5px;color:#14482b;white-space:nowrap}
.llsw-summary button{border:none;background:transparent;color:#1d7a48;font-size:13px;font-weight:400;cursor:pointer;
  text-decoration:underline;padding:0 0 0 2px;font-family:inherit}
.llsw-summary button:hover{color:#259457}
@media (max-width:600px){.llsw-summary{font-size:13.5px;gap:10px}.llsw-summary .llsw-summary-price{font-size:13.5px}}

/* ---- steps ---- */
.llsw-step{display:none}
.llsw-step.is-active{display:block;animation:llswIn .3s ease}
@keyframes llswIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.llsw-step.is-active{animation:none}}
.llsw-step-title{font-family:Rubik,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:24px;line-height:1.3;font-weight:600;color:#20303c;margin:0 0 8px;padding:0;text-align:left}
/* Wizard body text matches the legacy intro paragraphs above it exactly
   (Rubik 15.5/400/#6b6b6b/1.65): the page body is weight 300, so every
   text block below must state 400 or it renders visibly thinner than the
   intro (owner consistency rule 2026-07-29). */
.llsw-step-sub{font-size:15.5px;font-weight:400;color:#6b6b6b;margin:0 0 26px;padding:0;line-height:1.65;text-align:left}
@media (max-width:600px){.llsw-step-title{font-size:20px}.llsw-step-sub{font-size:14px}}

/* The page intro above the wizard joins the same design language: same Rubik,
   same left edge, no legacy serif look. STATIC rules on purpose - styling the
   intro only under .llsw-active made the heading visibly restyle the moment
   the wizard booted (the "jump" the owner flagged); with static rules the
   first paint already matches the final design. Theme green on the title and
   on the bold activation wait line (owner spec). */
.account_heading h2,
.account_heading h2 *{font-family:Rubik,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  color:#259457!important;font-weight:600!important}
/* owner 2026-07-29 round 7: the title must STAND OUT - larger, with a full
   block of air before the intro copy starts. !important on size and margin:
   the legacy sheet loads after this one with `.account_heading h2
   {font-size:24px;margin-bottom:0}` plus a `.main_container .account_heading
   h2{font-size:18px}` mobile rule at higher specificity - those silently ate
   every earlier size change. */
.account_heading h2{font-size:34px!important;line-height:1.25;margin:0 0 17px!important;padding:0}
.account_heading p{font-family:Rubik,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  color:#33434e;font-size:15.5px!important;line-height:1.65;margin:0 0 14px;padding:0;text-align:left}
.account_heading p strong,.account_heading p b{color:#259457}
/* (mobile h2 size lives in the MOBILE PASS block at the end of this file) */
/* Steps 2+ show a COMPACT header above the stepper: the green title plus the
   activation wait line in plain dark text (owner spec: the wait time must be
   visible on every step, especially "All set", for people who never read the
   intro; the full paragraphs stay step 1 only). */
.account_heading .ll-wait-compact{display:none;font-family:Rubik,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  font-size:15px;font-weight:600;color:#20303c;margin:0;padding:0;line-height:1.5;text-align:left}
body.llsw-past-plan .account_heading .ll-intro-copy{display:none}
body.llsw-past-plan .account_heading .ll-wait-compact{display:block}
body.llsw-past-plan .account_heading h2{margin:0 0 10px!important;font-size:28px!important}

/* ---- alerts ---- */
.llsw-alert{display:none;background:#fdecec;border:1px solid #f3c1c1;color:#8c2b2b;border-radius:8px;
  padding:12px 14px;font-size:14px;line-height:1.5;margin:0 0 16px}
.llsw-alert.is-on{display:block;animation:llswIn .25s ease}
.llsw-alert a{color:#8c2b2b;font-weight:600}

/* ---- plan cards ---- */
.llsw-plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 10px}
.llsw-plans:before,.llsw-plans:after{content:none}
@media (max-width:1199px){.llsw-plans{grid-template-columns:repeat(2,1fr)}}
/* phones: block flow instead of grid so the tier drawer (moved under the
   picked card by the wizard JS) can dock flush against it - grid gap would
   force a seam that negative margins cannot close */
@media (max-width:600px){.llsw-plans{display:block}.llsw-plans .llsw-plan{margin:0 0 10px}}
.llsw-plan{position:relative;border:2px solid #e3e9ed;border-radius:10px;background:#fff;padding:18px 16px 16px;
  cursor:pointer;text-align:left;transition:border-color .18s,box-shadow .18s,transform .18s;font-family:inherit;width:100%;
  display:flex;flex-direction:column;align-items:flex-start}
.llsw-plan:hover{border-color:#9fd4b4;box-shadow:0 6px 18px rgba(32,48,60,.08);transform:translateY(-2px)}
.llsw-plan.is-picked{border-color:#259457;box-shadow:0 6px 18px rgba(37,148,87,.14)}
.llsw-plan-check{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;
  border:2px solid #cfd9de;background:#fff;transition:all .18s;display:flex;align-items:center;justify-content:center}
.llsw-plan.is-picked .llsw-plan-check{background:#259457;border-color:#259457}
.llsw-plan-check svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;
  stroke-linejoin:round;opacity:0;transition:opacity .15s}
.llsw-plan.is-picked .llsw-plan-check svg{opacity:1}
.llsw-plan-name{font-size:16.5px;font-weight:600;color:#20303c;margin:0 24px 4px 0}
/* Card anatomy is fixed so the four cards scan identically: name on line one,
   description in the middle, price pinned to the bottom edge on ONE line. */
.llsw-plan-desc{font-size:13px;font-weight:400;color:#6b6b6b;line-height:1.5;margin:0 0 14px}
.llsw-plan-from{font-size:13.5px;color:#20303c;margin-top:auto;white-space:nowrap}
.llsw-plan-from strong{font-size:18px;font-weight:600;color:#1d7a48}
.llsw-plan-from span{color:#8a97a0;font-size:12px}

/* ---- tier picker ---- */
.llsw-tiers{margin:22px 0 0}
/* MOBILE DOCKING (owner 2026-07-29): on phones the wizard moves this list
   inside .llsw-plans, directly under the picked card. Styled as that card's
   own drawer: same tone border continuing down from the card, soft tone
   wash, white tier rows. The :has() rule squares the picked card's bottom
   corners so card + drawer read as one piece; browsers without :has just
   keep the rounded corners (cosmetic only). */
@media (max-width:600px){
  .llsw-plans .llsw-tiers{margin:-10px 0 16px;padding:12px 10px 6px;border:2px solid #259457;border-top:none;
    border-radius:0 0 12px 12px;background:#f7fbf9}
  .llsw-plans .llsw-tiers[data-tone=blue]{border-color:#1570b3;background:#f5f9fc}
  .llsw-plans .llsw-tiers[data-tone=gold]{border-color:#de9600;background:#fdfaf2}
  .llsw-plans .llsw-tiers[data-tone=gray]{border-color:#7d8a94;background:#f6f7f8}
  .llsw-plans .llsw-tiers .llsw-tiers-title{font-size:14px;margin:2px 0 10px}
  .llsw-plans .llsw-tiers .llsw-tier{background:#fff}
  .llsw-plan.is-picked:has(+ .llsw-tiers){border-bottom-left-radius:0;border-bottom-right-radius:0}
}
.llsw-tiers-title{font-size:16px;font-weight:600;color:#20303c;margin:0 0 10px}
.llsw-tier{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;
  border:2px solid #e3e9ed;border-radius:10px;padding:13px 16px;margin:0 0 8px;cursor:pointer;
  transition:border-color .15s,background .15s;font-family:inherit}
.llsw-tier:hover{border-color:#9fd4b4}
.llsw-tier.is-picked{border-color:#259457;background:#f4faf6}
.llsw-tier-radio{width:18px;height:18px;border-radius:50%;border:2px solid #cfd9de;flex:0 0 18px;position:relative;transition:border-color .15s}
.llsw-tier.is-picked .llsw-tier-radio{border-color:#259457}
/* longhand before inset: browsers that pass the JS feature gates but predate
   inset (Chrome 49-86, Safari <=14.4) still get the picked dot */
.llsw-tier.is-picked .llsw-tier-radio:after{content:"";position:absolute;top:3px;left:3px;right:3px;bottom:3px;
  inset:3px;border-radius:50%;background:#259457}
.llsw-tier-main{flex:1;min-width:0}
.llsw-tier-name{display:block;font-size:15px;font-weight:600;color:#20303c;line-height:1.35}
.llsw-tier-desc{display:block;font-size:12.5px;font-weight:400;color:#6b6b6b;line-height:1.45;margin-top:4px}
.llsw-tier-price{text-align:right;white-space:nowrap}
.llsw-tier-price strong{display:block;font-size:17px;font-weight:600;color:#1d7a48}
.llsw-tier-price span{font-size:11.5px;color:#8a97a0}
@media (max-width:600px){
  .llsw-tier{padding:12px 12px}
  .llsw-tier-name{font-size:14px}
  .llsw-tier-price strong{font-size:16px}
}

/* ---- plan color identity ----
   Mirrors /sales-leads/pricing so muscle memory carries into checkout:
   Inbound green #259457, Acquisitions blue #1570b3, Hybrid gold #de9600,
   Partial light gray (unadvertised plan, neutral on purpose). The pricing
   cards fade a 50%-alpha tone to transparent; here the same fade runs at
   ~9% so the step stays calm. Tier list and summary bar follow the picked
   plan via data-tone stamped by the wizard JS. The green defaults above
   already carry the Inbound tone, so only the wash is added for green.
   Gold and gray TEXT uses darker cousins of the accent (#9c6a00, #55636d):
   the raw accents fail contrast on white. */
.llsw-plan[data-tone=green]{background:linear-gradient(180deg,rgba(37,148,87,.09),rgba(37,148,87,0) 62%) #fff}
.llsw-plan[data-tone=blue]{background:linear-gradient(180deg,rgba(21,112,179,.09),rgba(21,112,179,0) 62%) #fff}
.llsw-plan[data-tone=gold]{background:linear-gradient(180deg,rgba(222,150,0,.11),rgba(222,150,0,0) 62%) #fff}
.llsw-plan[data-tone=gray]{background:linear-gradient(180deg,rgba(111,111,111,.08),rgba(111,111,111,0) 62%) #fff}
.llsw-plan[data-tone=blue]:hover{border-color:#8fc1e4;box-shadow:0 6px 18px rgba(21,112,179,.10)}
.llsw-plan[data-tone=blue].is-picked{border-color:#1570b3;box-shadow:0 6px 18px rgba(21,112,179,.14)}
.llsw-plan[data-tone=blue].is-picked .llsw-plan-check{background:#1570b3;border-color:#1570b3}
.llsw-plan[data-tone=blue] .llsw-plan-from strong{color:#115e97}
.llsw-plan[data-tone=gold]:hover{border-color:#ecc98c;box-shadow:0 6px 18px rgba(222,150,0,.12)}
.llsw-plan[data-tone=gold].is-picked{border-color:#de9600;box-shadow:0 6px 18px rgba(222,150,0,.16)}
.llsw-plan[data-tone=gold].is-picked .llsw-plan-check{background:#de9600;border-color:#de9600}
.llsw-plan[data-tone=gold] .llsw-plan-from strong{color:#9c6a00}
.llsw-plan[data-tone=gray]:hover{border-color:#c2cbd2;box-shadow:0 6px 18px rgba(32,48,60,.08)}
.llsw-plan[data-tone=gray].is-picked{border-color:#7d8a94;box-shadow:0 6px 18px rgba(85,99,109,.14)}
.llsw-plan[data-tone=gray].is-picked .llsw-plan-check{background:#7d8a94;border-color:#7d8a94}
.llsw-plan[data-tone=gray] .llsw-plan-from strong{color:#55636d}
.llsw-tiers[data-tone=blue] .llsw-tier:hover{border-color:#8fc1e4}
.llsw-tiers[data-tone=blue] .llsw-tier.is-picked{border-color:#1570b3;background:#f3f8fc}
.llsw-tiers[data-tone=blue] .llsw-tier.is-picked .llsw-tier-radio{border-color:#1570b3}
.llsw-tiers[data-tone=blue] .llsw-tier.is-picked .llsw-tier-radio:after{background:#1570b3}
.llsw-tiers[data-tone=blue] .llsw-tier-price strong{color:#115e97}
.llsw-tiers[data-tone=gold] .llsw-tier:hover{border-color:#ecc98c}
.llsw-tiers[data-tone=gold] .llsw-tier.is-picked{border-color:#de9600;background:#fdf8ee}
.llsw-tiers[data-tone=gold] .llsw-tier.is-picked .llsw-tier-radio{border-color:#de9600}
.llsw-tiers[data-tone=gold] .llsw-tier.is-picked .llsw-tier-radio:after{background:#de9600}
.llsw-tiers[data-tone=gold] .llsw-tier-price strong{color:#9c6a00}
.llsw-tiers[data-tone=gray] .llsw-tier:hover{border-color:#c2cbd2}
.llsw-tiers[data-tone=gray] .llsw-tier.is-picked{border-color:#7d8a94;background:#f5f7f8}
.llsw-tiers[data-tone=gray] .llsw-tier.is-picked .llsw-tier-radio{border-color:#7d8a94}
.llsw-tiers[data-tone=gray] .llsw-tier.is-picked .llsw-tier-radio:after{background:#7d8a94}
.llsw-tiers[data-tone=gray] .llsw-tier-price strong{color:#55636d}
.llsw-summary[data-tone=blue]{background:#eaf3fa;border-color:#c5ddef}
.llsw-summary[data-tone=blue] .llsw-summary-price{color:#0f4d7c}
.llsw-summary[data-tone=blue] button{color:#1570b3}
.llsw-summary[data-tone=blue] button:hover{color:#115e97}
.llsw-summary[data-tone=gold]{background:#faf3e0;border-color:#eeddb2}
.llsw-summary[data-tone=gold] .llsw-summary-price{color:#7a5600}
.llsw-summary[data-tone=gold] button{color:#9c6a00}
.llsw-summary[data-tone=gold] button:hover{color:#7a5600}
.llsw-summary[data-tone=gray]{background:#f1f3f5;border-color:#d7dde2}
.llsw-summary[data-tone=gray] .llsw-summary-price{color:#3d4a54}
.llsw-summary[data-tone=gray] button{color:#55636d}
.llsw-summary[data-tone=gray] button:hover{color:#3d4a54}

/* ---- buttons ---- */
.llsw-nav{display:flex;align-items:center;gap:12px;margin:26px 0 0;flex-wrap:wrap}
.llsw-nav:before,.llsw-nav:after{content:none}
.llsw-btn{font-family:inherit;border:none;border-radius:8px;cursor:pointer;font-weight:600;
  transition:background .15s,box-shadow .15s,transform .1s;line-height:1}
.llsw-btn-primary{background:#259457;color:#fff;font-size:16.5px;padding:15px 34px;box-shadow:0 4px 12px rgba(37,148,87,.25)}
.llsw-btn-primary:hover{background:#1d7a48}
.llsw-btn-primary:active{transform:translateY(1px)}
.llsw-btn-primary:disabled{background:#a8cdb8;cursor:not-allowed;box-shadow:none}
.llsw-btn-ghost{background:transparent;color:#6b6b6b;font-size:14.5px;padding:15px 10px;font-weight:500}
.llsw-btn-ghost:hover{color:#20303c}
.llsw-nav .llsw-btn-primary{margin-left:auto}
/* review step nav: primary action centered on its own line, Back with its
   arrow directly beneath it (owner spec) */
.llsw-nav.llsw-nav-stack{flex-direction:column;align-items:center;gap:10px}
.llsw-nav-stack .llsw-btn-primary{margin-left:0;min-width:320px}
.llsw-btn-back{display:inline-flex;align-items:center;gap:6px}
.llsw-btn-back svg{width:14px;height:14px;stroke:currentColor}
/* forward twin of the Back chevron (owner 2026-07-29) */
.llsw-btn-fwd{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.llsw-btn-fwd svg{width:14px;height:14px;stroke:currentColor;flex:0 0 14px}
@media (max-width:600px){
  .llsw-nav{flex-direction:column-reverse}
  .llsw-nav.llsw-nav-stack{flex-direction:column}
  .llsw-nav .llsw-btn-primary{margin-left:0;width:100%;padding:16px 20px;min-width:0}
  .llsw-nav .llsw-btn-ghost{width:100%;text-align:center;justify-content:center}
}
.llsw-secure-line{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;
  font-size:12.5px;gap:7px;color:#8a97a0;margin:18px auto 0;padding-top:16px;border-top:1px solid #e3e9ed;
  width:100%;clear:both}
.llsw-secure-line svg{width:13px;height:13px;fill:#8a97a0;flex:0 0 13px}

/* ---- review footer: buttons, then one tidy centered trust block ----
   The captcha column sits INSIDE the signature panel, to the right of the
   signature pad (bootstrap col-6 floats from its own classes), vertically
   centered against the pad. Hidden entirely while the invisible Enterprise
   flow is in charge; it reappears for the step up challenge. */
.llsw .ll-captcha-col{display:flex;justify-content:center;align-items:center;min-height:200px;
  margin:0!important;padding:6px 15px!important}
@media (max-width:767px){.llsw .ll-captcha-col{min-height:0;padding:14px 15px!important}}
body.llsw-ent-on .ll-captcha-col{display:none!important}
.llsw-nav{clear:both}
.llsw .chrome_panel{text-align:center;margin:0;padding:0}
.llsw .chrome_panel .paymenticons{display:block;width:232px;max-width:70%;height:auto;margin:12px auto 10px;float:none}
.llsw .chrome_panel .paymentmethod_text{font-size:12.5px;color:#8a97a0;max-width:520px;margin:0 auto 6px;
  padding:0;line-height:1.55;text-align:center;float:none}
.llsw .chrome_panel .paymentmethod_text span{color:#6b6b6b;font-weight:600}
.llsw .chrome_panel h5{font-family:Rubik,Arial,sans-serif;font-size:12.5px;font-weight:600;color:#6b6b6b;
  margin:14px 0 3px;padding:0;text-align:center}
.llsw .chrome_panel p{font-size:12px;color:#8a97a0;margin:2px 0;padding:0;text-align:center;line-height:1.5}

/* ---- legacy panels inside the wizard: soften ----
   overflow stays visible so validation bubbles are never clipped mid field */
.llsw .form_inner_pannel{border:1px solid #e3e9ed;border-radius:10px;margin-bottom:20px;overflow:visible}
.llsw .form_title{background:#f5f8f6;border-bottom:1px solid #e3e9ed;border-radius:9px 9px 0 0}
/* text-transform none beats the legacy capitalize (owner rule: section titles
   are normal sentences, "Working with a LeadLocate Account Manager?", not
   Title Case; !important because the legacy sheet loads later AND with higher
   specificity) */
.llsw .form_title h3{color:#20303c;font-weight:600;font-size:16px;font-family:Rubik,Arial,sans-serif;
  text-transform:none!important}
.llsw .form_agreement_panel_outer{border-radius:10px}

/* the agreement scroll box: taller, content starts at the top, and the
   contract typography is one consistent voice (the legal stylesheet is not
   loaded on this page, so the section headings rendered browser-default) */
/* legacy style.css loads after this sheet and clamps the height, so force it */
.llsw .form_agreement_panel{max-height:460px!important;height:460px!important;overflow-y:auto!important;padding:14px 20px 12px!important}
.llsw .form_agreement_panel>p{margin:0;padding:0}
.llsw .form_agreement_panel .llpol>p:first-child{margin-top:0}
.llsw .form_agreement_panel .llpol>*:last-child{margin-bottom:0}
.llsw .form_agreement_panel .clearfix{display:none}
/* ONE uniform voice for the WHOLE contract (owner spec rounds 7 + 8: "the
   entire font needs to be exactly the same, no difference as you read
   through it"). Every element inside the scroll box - body copy, nested
   tags, and the capitalized section titles - is forced to the identical
   family/size/weight/color/line-height. !important throughout: legacy rules
   load after this sheet and were re-bolding the body while leaving the
   titles regular, which read as a formatting mistake. Links keep the brand
   green so they still look clickable. */
.llsw .form_agreement_panel .llpol,
.llsw .form_agreement_panel .llpol *{font-family:Rubik,Arial,sans-serif!important;font-size:13.5px!important;
  font-weight:400!important;color:#33434e!important;line-height:1.65!important;letter-spacing:0!important}
.llsw .form_agreement_panel .llpol a{color:#1d7a48!important;text-decoration:underline}
.llsw .form_agreement_panel .llpol p{margin:0 0 10px}
.llsw .form_agreement_panel h4,
.llsw .form_agreement_panel .llpol-sec-title{margin:20px 0 14px!important;padding:0!important}
.llsw .form_agreement_panel h4:first-child,
.llsw .form_agreement_panel .llpol-sec-title:first-child{margin-top:0}
.llsw .form_agreement_panel .llpol-agreement-link{margin-top:12px}

/* Team members: the legacy panel renders as-is, always open, identical chrome
   to Business information and Account administrator (owner rule: one
   consistent section design, no accordion, no width shifts). */
.llsw .employee_info{font-size:13px;color:#6b6b6b;font-weight:400}

/* Lead preferences are not part of signup at all */
.llsw-active .ll-hide-legacy{display:none!important}

/* Account Manager referral: same form_inner_pannel + form_title chrome as
   every other section; the input sits in a .form-group and is forced WHITE
   and wide enough that the "(optional)" placeholder never truncates
   (owner spec 2026-07-29). */
.llsw .llsw-mgr-body{padding:14px 15px 6px}
.llsw .llsw-mgr-body .employee_info{margin:0 0 12px;padding:0}
.llsw .llsw-mgr-body .form-group{max-width:480px;margin:0 0 10px}
.llsw .llsw-mgr-body input.form-control{width:100%;max-width:none;background:#fff!important}
@media (max-width:600px){.llsw .llsw-mgr-body .form-group{max-width:none}}

/* ---- review step ---- */
.llsw-order{border:1px solid #e3e9ed;border-radius:10px;padding:16px 18px;margin:0 0 18px;background:#fff}
.llsw-order-row{display:flex;align-items:baseline;gap:10px;font-size:14.5px;padding:5px 0;color:#33434e}
.llsw-order-row .llsw-order-label{color:#6b6b6b;font-weight:400;flex:0 0 118px;font-size:13px}
.llsw-order-row strong{font-weight:600;color:#20303c}
.llsw-order-total{border-top:1px solid #e3e9ed;margin-top:8px;padding-top:10px;display:flex;align-items:center}
.llsw-order-total .llsw-order-t-label{font-size:14.5px;font-weight:600;color:#20303c}
.llsw-order-total .llsw-order-t-val{margin-left:auto;font-size:20px;font-weight:600;color:#1d7a48}
.llsw-order-total .llsw-order-t-val span{font-size:12.5px;color:#8a97a0;font-weight:400}

/* ---- payment step ---- */
.llsw-payframe-wrap{position:relative;border:1px solid #e3e9ed;border-radius:12px;overflow:hidden;background:#f7f8fa;min-height:420px}
/* plain height first: browsers that pass the JS feature gates but predate
   min()/max() (Chrome 42-78, Safari 10.1-11.0) fall back to 680px instead of
   collapsing the iframe to the 150px default */
.llsw-payframe{display:block;width:100%;border:0;height:680px;height:min(1050px,max(680px,calc(100vh - 200px)))}
@media (max-width:600px){.llsw-payframe{height:calc(100vh - 130px);min-height:560px}}
.llsw-payload{position:absolute;top:0;left:0;right:0;bottom:0;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;background:#f7f8fa;transition:opacity .4s;z-index:1}
.llsw-payload.is-off{opacity:0;pointer-events:none}
.llsw-spin{width:36px;height:36px;border:3px solid #e3e9ed;border-top-color:#259457;border-radius:50%;animation:llswSpin .8s linear infinite}
@keyframes llswSpin{to{transform:rotate(360deg)}}
.llsw-payload p{font-size:14px;font-weight:400;color:#6b6b6b;margin:0}
/* centered directly under the checkout iframe (owner spec) */
.llsw-paynote{display:flex;align-items:center;justify-content:center;text-align:center;gap:8px;
  font-size:13px;font-weight:400;color:#6b6b6b;margin:14px auto 0;line-height:1.5}
.llsw-paynote svg{width:15px;height:15px;fill:#259457;flex:0 0 15px}
.llsw-payfallback{font-size:13px;color:#8a97a0;margin:8px 0 0}
.llsw-payfallback a{color:#1570b3;text-decoration:none}
.llsw-payfallback a:hover{text-decoration:underline}
/* escape hatch shown only on a RESUMED payment step (tab remembered an
   unpaid checkout): lets the visitor abandon it for a fresh application */
.llsw-paynew{font-size:12.5px;color:#8a97a0;text-align:center;margin:16px 0 0}
.llsw-paynew a{color:#1570b3;text-decoration:underline}

/* the quiet 30 second confirmation reveal */
.llsw-payconfirm{opacity:0;pointer-events:none;transition:opacity 2.4s ease;margin:22px 0 0;text-align:center}
.llsw-payconfirm.is-ready{opacity:1;pointer-events:auto}
.llsw-payconfirm-line{font-size:14px;font-weight:400;color:#6b6b6b;margin:0 0 10px}
.llsw-payconfirm-note{font-size:12.5px;color:#8a97a0;margin:10px auto 0;max-width:560px;line-height:1.55}
.llsw-payconfirm .llsw-btn-primary{width:auto}
/* (mobile full-width rule lives in the MOBILE PASS block) */

/* ---- done step ---- */
.llsw-done{max-width:560px;margin:12px auto 30px;text-align:center;padding:8px 6px 0}
.llsw-done-mark{width:76px;height:76px;margin:6px auto 20px;border-radius:50%;background:#e9f5ee;
  display:flex;align-items:center;justify-content:center}
.llsw-done-mark svg{width:38px;height:38px}
.llsw-done-mark circle{fill:none;stroke:#259457;stroke-width:2.4;stroke-dasharray:151;stroke-dashoffset:151;
  animation:llswDraw .7s ease forwards}
.llsw-done-mark path{fill:none;stroke:#259457;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:36;stroke-dashoffset:36;animation:llswDraw .5s ease .55s forwards}
@keyframes llswDraw{to{stroke-dashoffset:0}}
.llsw-done h3{font-size:26px;font-weight:600;color:#20303c;margin:0 0 10px;font-family:Rubik,Arial,sans-serif}
.llsw-done p{font-size:15.5px;font-weight:400;color:#6b6b6b;line-height:1.65;margin:0 0 14px}
.llsw-done .llsw-done-strong{color:#20303c;font-weight:500}
.llsw-done-help{font-size:13.5px;color:#8a97a0;border-top:1px solid #e3e9ed;padding-top:16px;margin-top:22px}
.llsw-done-help a{color:#1570b3;text-decoration:none}

/* keep legacy field label + input rhythm comfortable inside wizard */
.llsw .form-control{font-family:Rubik,Arial,sans-serif!important}
.llsw .paymentinfo_method{border-radius:10px}

/* wizard hides the old top instruction line of the plan table if it leaks */
.llsw .ll-legacy-plans p{display:none}

/* ==== MOBILE PASS (owner spec 2026-07-29) ====
   On phones the wizard reads as an app screen, not a shrunken desktop page:
   tighter intro type, a bigger thumb-size stepper with ONE caption naming the
   current step (the five labels collide at phone widths), 16px inputs (16px
   is the iOS threshold that prevents the focus auto-zoom), 48px+ touch
   targets, full width primary actions, and a small "pop" when a dot turns
   green so progress feels rewarding. This block sits LATE in the file on
   purpose: it must override the earlier component-level media rules. */
/* mobile SEGMENTED CHEVRON stepper + caption (desktop shows the dots).
   Owner redesign 2026-07-29: the old 10px fill bar read as static and
   insignificant. Now five arrow-cut segments ("Step 1 > Step 2 > ..."):
   done = solid green, upcoming = light, and the CURRENT segment runs an
   animated diagonal barber-pole sweep so the page visibly feels live
   (psychology: motion says "something is happening", static says
   "abandoned"). Chevrons come from clip-path; browsers without it just
   show straight-edged segments, still fully readable. */
.llsw-progress-bar{display:none;height:38px;border-radius:8px;overflow:hidden}
.llsw-progress-seg{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;
  position:relative;background:#e6ebee;color:#8a97a0;font-size:11.5px;font-weight:600;letter-spacing:.2px;white-space:nowrap;
  margin-left:-5px;transition:background-color .3s,color .3s;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,0 100%,9px 50%)}
.llsw-progress-seg:first-child{margin-left:0;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,0 100%)}
.llsw-progress-seg:last-child{
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,9px 50%)}
.llsw-progress-seg.is-done{background:#259457;color:#fff}
.llsw-progress-seg.is-current{background:#259457;color:#fff}
/* The "live" motion on the current segment is a soft light band sweeping
   left to right, then a beat of rest. Transform-only on a pseudo-element:
   the first cut animated background-position on hard-stop stripes, which
   phones rendered chopped/aliased (owner 2026-07-29). Soft gradient +
   GPU-composited transform = no stripes to corrupt, buttery timing. The
   parent clip-path keeps the band inside the chevron shape. */
.llsw-progress-seg.is-current:after{content:"";position:absolute;top:0;bottom:0;left:-45%;width:38%;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.38) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-18deg) translateX(0);animation:llswSweep 1.8s ease-in-out infinite;pointer-events:none}
@keyframes llswSweep{0%{transform:skewX(-18deg) translateX(0)}
  65%,100%{transform:skewX(-18deg) translateX(400%)}}
.llsw-progress-caption{display:none;text-align:center;font-size:14.5px;font-weight:400;color:#6b6b6b;margin:10px 0 0}
.llsw-progress-caption strong{color:#20303c;font-weight:600}
@keyframes llswPop{0%{transform:scale(.75)}55%{transform:scale(1.18)}100%{transform:scale(1)}}
.llsw-progress li.is-done .llsw-dot{animation:llswPop .35s ease}
@media (prefers-reduced-motion:reduce){
  .llsw-progress li.is-done .llsw-dot{animation:none}
  .llsw-progress-seg.is-current:after{animation:none;display:none}
  /* with the sweep off, current and done were both plain solid green and
     the caption is sr-only, so sighted reduced-motion users had NO visible
     current-step marker; a darker fill + inner ring is the static
     differentiator (audit 2026-07-29) */
  .llsw-progress-seg.is-current{background:#1d7a48;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
}
@media (max-width:600px){
  /* intro: the title stands out, the copy reads at a comfortable size
     (!important mirrors the base rules: legacy sizes win otherwise) */
  .account_heading h2{font-size:26px!important;margin:0 0 11px!important}
  .account_heading p{font-size:15px!important;line-height:1.65;margin:0 0 14px}
  .account_heading .ll-wait-compact{font-size:14.5px}
  body.llsw-past-plan .account_heading h2{font-size:23px!important;margin:0 0 8px!important}
  /* progress: a BAR, not five cramped dots (owner spec round 7) */
  .llsw-head{margin:20px 0 24px}
  .llsw-progress{display:none}
  .llsw-progress-bar{display:flex}
  /* caption is screen-reader-only now (owner 2026-07-29: the chevron bar
     alone carries the visual story); it stays in the DOM as the accessible
     text because the bar itself is aria-hidden */
  .llsw-progress-caption{display:block;position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  /* "All set": the closing card is the whole story, no stepper chrome */
  body.llsw-step-done .llsw-head{display:none}
  /* type scale: phone-first sizes, nothing squints (owner spec round 7) */
  .llsw-step-title{font-size:22px}
  .llsw-step-sub{font-size:15px;margin:0 0 20px;line-height:1.6}
  .llsw .form-control{font-size:16px!important;min-height:48px}
  .llsw .form_title h3{font-size:16px}
  .llsw .employee_info{font-size:14px}
  .llsw-btn-primary{font-size:18px;border-radius:10px}
  .llsw-btn-ghost{font-size:15px}
  .llsw-plan-name{font-size:17px}
  .llsw-plan-desc{font-size:14px}
  .llsw-plan-from{font-size:14.5px}
  .llsw-tier{min-height:56px}
  .llsw-tier-name{font-size:15.5px}
  .llsw-tier-desc{font-size:13.5px}
  .llsw-tiers-title{font-size:16.5px}
  .llsw-summary{font-size:14px;padding:10px 12px}
  .llsw-order-row{font-size:14.5px}
  .llsw .form_agreement_panel{max-height:380px!important;height:380px!important}
  .llsw .form_agreement_panel .llpol,
  .llsw .form_agreement_panel .llpol *{font-size:14px!important}
  .llsw .fcn_checkbox_outer .checkbox_text{font-size:14px;line-height:1.55}
  .llsw-secure-line{font-size:13px}
  .llsw-paynote{font-size:13.5px}
  .llsw-payconfirm-line{font-size:15px}
  .llsw-payconfirm-note{font-size:13px}
  .llsw-payconfirm .llsw-btn-primary{width:100%}
  .llsw-done h3{font-size:23px}
  .llsw-done p{font-size:15px}
  .llsw-done-help{font-size:14px}
}

/* print: show the whole flow, drop interactive chrome (the pay iframe cannot
   print meaningfully anyway) */
@media print{
  .llsw-step{display:block!important;animation:none}
  .llsw-head,.llsw-nav,.llsw-payframe-wrap,.llsw-payconfirm,.llsw-paynote,.llsw-payfallback{display:none!important}
  /* the footer directory is ~2 printed pages of nav links after the
     contract; never print it (audit 2026-07-29) */
  #sp-bottom{display:none!important}
}

/* ---- sp-bottom footer directory (page chrome, NOT wizard UI) ----
   [SP-BOTTOM-CSS 2026-07-31] The hand-recreated approximation of the
   template rules that used to live here is GONE: it fought the real
   template cascade once www/ll-sp-bottom.css (generated by
   v3-rebuild/tools/gen-sp-bottom-css.php, stamped inside the ll-sp-bottom
   markers by sync-dynamic-pages.php) started shipping the exact scoped
   rules. Only the DELIBERATE signup-page divergence stays here:
   the marketing sidepanel FAQ module rides inside the canonical block but
   its jQuery bootstrap is stripped by the sync (these pages load jQuery
   late), so a visible handle would be a dead control. Keep it hidden. */
#sp-bottom .sidepanel_block{display:none}