/* ============================================================================
   Lasso Media — v2 Theme  (purely presentational re-skin)
   ----------------------------------------------------------------------------
   ADDITIVE + SAFE. Loaded LAST so it wins the cascade.
   Three layers:
     1. :root design tokens (global)
     2. Base body look (global, low-risk)
     3. Global NAV — everything prefixed `lz-` so it can NEVER collide
        with Bootstrap 4.6's .navbar / .nav / .dropdown classes.
     4. Component library — every rule scoped under `.lasso-v2` so converted
        pages opt in and un-converted pages keep Bootstrap's identically
        named .btn / .card / .badge / table styling untouched.
   NO nuclear reset. The only reset (box-sizing) is scoped under .lasso-v2.
   Hex / radius / spacing values are copied verbatim from
   resources/new-designs/design-system.html.
   ========================================================================== */

/* 1 ── TOKENS ────────────────────────────────────────────────────────────── */
:root{
  --brand-red:#E8362B; --brand-red-dark:#C42A20; --ink:#22262B; --teal:#17A2B8;
  --teal-dark:#128294; --green:#1F9D57; --amber:#E8912B; --blue:#2F6FD6;
  --violet:#6C5CE7; --text:#2A2E33; --muted:#6B7480; --line:#E4E7EB;
  --bg:#F4F6F8; --white:#fff; --radius:14px;
  --card-shadow:0 1px 2px rgba(20,25,35,.06),0 6px 18px rgba(20,25,35,.05);
}

/* 2 ── BASE LOOK (global, safe) ──────────────────────────────────────────── */
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

/* ============================================================================
   3 ── GLOBAL NAVIGATION  (lz- prefix)
        Black top bar (--ink) + red nav strip (--brand-red)
        with a white active underline. Mirrors the design-system nav demo.
   ========================================================================== */

/* --- black top bar ------------------------------------------------------- */
.lz-topbar{
  background:var(--ink);
  display:flex; align-items:center; gap:14px;
  padding:12px 24px;
  flex-wrap:wrap;
}
.lz-brand{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; line-height:1;
}
.lz-brand:hover{ text-decoration:none; }
/* The real client logo — /img/logos/Lasso-Logo-2025.png (768x288, 2.67:1).
   White wordmark on transparent, sized for the black .lz-topbar. The artwork
   already contains the "LOCAL. CONVERSION. MARKETING." tagline — do NOT add a
   separate CSS tagline beside it (see the archived block below). */
.lz-brand-img{ height:46px; width:auto; display:block; flex:none; }
@media(max-width:991px){ .lz-brand-img{ height:36px; } }

/* ARCHIVED 2026-07-15 — the v2 re-skin (733fea19e) dropped the real logo image and
   substituted this hand-drawn SVG pin + CSS text lockup. It was never what the client
   wanted, and it is what prompted 0afb7ef6a to re-add a tagline in CSS that the real
   artwork already had. Kept commented rather than deleted, per the archive-don't-delete
   rule. If you resurrect this, delete .lz-brand-img above first — not both.

.lz-brand svg{ width:30px; height:33px; flex:none; display:block; }
.lz-brand-word{ display:inline-flex; flex-direction:column; line-height:1; }
.lz-brand-lockup{
  font-family:'Montserrat','Inter',sans-serif; font-weight:900;
  color:#fff; font-size:18px; letter-spacing:.02em; line-height:1;
  white-space:nowrap;
}
.lz-brand-lockup span{
  color:#C7CCD2; font-weight:600; font-size:11px;
  letter-spacing:.24em; margin-left:6px;
}
.lz-brand-tag{
  font-style:normal; font-weight:700; font-size:8px; letter-spacing:.2em;
  color:#DDE1E6; display:block; margin-top:5px; padding-top:5px;
  border-top:1px solid rgba(255,255,255,.22); white-space:nowrap;
}
@media(max-width:991px){ .lz-brand-tag{ display:none; } }
*/
.lz-user{
  margin-left:auto; display:flex; align-items:center; gap:10px;
  color:#fff; font-size:13.5px; font-weight:700; flex-wrap:wrap;
}
.lz-user a{ color:#fff; text-decoration:none; font-weight:700; }
.lz-user a:hover{ color:#fff; text-decoration:underline; }

/* --- red nav strip ------------------------------------------------------- */
.lz-navstrip-wrap{
  background:var(--brand-red);
  color:#fff;
}
/* the <ul> that holds the primary links */
.lz-navstrip{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:stretch; gap:2px;
}
.lz-navstrip li{ list-style:none; }
/* link chrome (works for flat CPORTAL links AND admin dropdown toggles) */
.lz-navstrip a,
.lz-navstrip .lz-navlink{
  display:flex; align-items:center;
  color:#fff; text-decoration:none;
  font-family:'Inter',system-ui,sans-serif;
  font-size:13.5px; font-weight:600;
  padding:13px 14px;
  opacity:.88; position:relative; white-space:nowrap;
  background:transparent; border:0;
}
.lz-navstrip a:hover,
.lz-navstrip a:focus,
.lz-navstrip .lz-navlink:hover{ opacity:1; color:#fff; text-decoration:none; }
/* active underline */
.lz-navstrip a.active,
.lz-navstrip li.active > a,
.lz-navstrip li.show > a{ opacity:1; }
.lz-navstrip a.active::after,
.lz-navstrip li.active > a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:0;
  height:3px; background:#fff; border-radius:3px 3px 0 0;
}

/* --- admin mega-menu dropdowns (piggy-backs Bootstrap dropdown JS) ------- */
.lz-navstrip .lz-dropdown{ position:static; }           /* let panel span wide */
.lz-navstrip .lz-dropdown-toggle::after{                 /* tint the caret     */
  margin-left:.4em; vertical-align:middle; opacity:.85;
}
.lz-dropdown-panel{
  background:#fff; color:var(--text);
  border:1px solid var(--line);
  border-top:3px solid var(--brand-red);
  border-radius:0 0 12px 12px;
  box-shadow:var(--card-shadow);
  padding:18px 22px; margin-top:0;
  min-width:260px; max-width:min(1120px,96vw);
}
.lz-menu-grid{ display:flex; flex-wrap:wrap; gap:4px 30px; }
.lz-menu-col{ min-width:210px; padding-bottom:10px; }
.lz-menu-header{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); padding:2px 0 8px; margin-bottom:6px;
  border-bottom:1px solid var(--line);
}
/* NB: prefixed with .lz-dropdown-panel so specificity (0,2,0) beats the
   red-strip link rule `.lz-navstrip a` (0,1,1) — otherwise panel items
   would inherit the strip's white text and vanish on the white panel. */
.lz-dropdown-panel .lz-menu-item{
  display:block; color:var(--text); text-decoration:none;
  font-size:13px; padding:6px 8px; border-radius:8px; opacity:1;
}
.lz-dropdown-panel .lz-menu-item:hover,
.lz-dropdown-panel .lz-menu-item:focus{
  background:var(--bg); color:var(--brand-red-dark); text-decoration:none;
}

/* --- partner logo + dev header slot on the strip ------------------------- */
.lz-partner{
  display:flex; align-items:center; justify-content:flex-end;
  gap:10px; color:#fff; font-weight:700; letter-spacing:1px;
}
.lz-partner img{ max-height:34px; width:auto; }

/* --- mobile hamburger ---------------------------------------------------- */
.lz-navtoggle{
  display:none; background:transparent; border:0; color:#fff;
  font-size:22px; line-height:1; padding:8px 10px; cursor:pointer;
}
.lz-navtoggle:focus{ outline:none; }

@media (max-width:991.98px){
  .lz-navtoggle{ display:inline-flex; align-items:center; }
  .lz-navstrip{ flex-direction:column; width:100%; gap:0; }
  .lz-navstrip a.active::after{ display:none; }
  .lz-navstrip a.active{ background:rgba(255,255,255,.14); }
  /* collapsed Bootstrap dropdowns render inline on mobile */
  .lz-dropdown-panel{
    position:static !important; width:100% !important;
    transform:none !important; box-shadow:none; border:0;
    border-top:1px solid rgba(255,255,255,.25); border-radius:0;
    background:transparent; color:#fff; padding:6px 14px 12px;
  }
  .lz-menu-grid{ flex-direction:column; gap:0; }
  .lz-menu-header{ color:rgba(255,255,255,.85); border-bottom-color:rgba(255,255,255,.2); }
  .lz-dropdown-panel .lz-menu-item{ color:#fff; }
  .lz-dropdown-panel .lz-menu-item:hover,
  .lz-dropdown-panel .lz-menu-item:focus{ background:rgba(255,255,255,.12); color:#fff; }
  .lz-partner{ justify-content:flex-start; padding:6px 14px; }
}

/* ============================================================================
   4 ── COMPONENT LIBRARY  — everything scoped under `.lasso-v2`
        Mirrors design-system.html class names so mockup markup can be
        pasted into converted pages with minimal edits.
   ========================================================================== */
.lasso-v2 *{ box-sizing:border-box; }

.lasso-v2{ font-family:'Inter',system-ui,sans-serif; color:var(--text); }

/* layout */
.lasso-v2 .container{ max-width:1080px; margin:0 auto; padding:40px 32px 80px; }
.lasso-v2 .row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.lasso-v2 .cards3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:720px){ .lasso-v2 .cards3{ grid-template-columns:1fr; } }

/* surfaces */
.lasso-v2 section,
.lasso-v2 .card{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:28px 30px; margin-top:24px; box-shadow:var(--card-shadow);
}
.lasso-v2 section:first-child,
.lasso-v2 .card:first-child{ margin-top:0; }

/* headings */
.lasso-v2 h1{ font-family:'Montserrat','Inter',sans-serif; font-weight:800; font-size:32px; color:var(--ink); line-height:1.15; margin:0 0 6px; }
.lasso-v2 h2{ font-family:'Montserrat','Inter',sans-serif; font-weight:800; font-size:24px; color:var(--ink); margin:0 0 4px; }
.lasso-v2 h3{ font-family:'Montserrat','Inter',sans-serif; font-weight:800; font-size:18px; color:var(--ink); margin:0 0 4px; }
.lasso-v2 section > h2{ font-size:20px; }
.lasso-v2 h3.sub{
  font-family:'Inter',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  margin:24px 0 12px;
}
.lasso-v2 h3.sub:first-of-type{ margin-top:0; }
.lasso-v2 .lead{ font-size:16px; color:var(--muted); line-height:1.6; margin-bottom:8px; max-width:720px; }
.lasso-v2 .muted{ color:var(--muted); }
.lasso-v2 .desc{ font-size:14px; color:var(--muted); margin-bottom:22px; line-height:1.5; }

/* buttons */
.lasso-v2 .btn{
  border:0; cursor:pointer; font-family:inherit; font-weight:700;
  border-radius:10px; font-size:14px; padding:11px 20px;
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  line-height:1.2;
}
/* NOTE: app.css forces .btn-primary/.btn-success color with !important, so the
   themed variants below must also use !important to win (same-!important → higher
   specificity of `.lasso-v2 .btn-*` decides). */
.lasso-v2 .btn-primary{ background:var(--brand-red)!important; border-color:var(--brand-red)!important; color:#fff!important; box-shadow:0 8px 18px rgba(232,54,43,.26); }
.lasso-v2 .btn-primary:hover{ background:var(--brand-red-dark)!important; border-color:var(--brand-red-dark)!important; color:#fff!important; }
.lasso-v2 .btn-dark{ background:var(--ink)!important; border-color:var(--ink)!important; color:#fff!important; }
.lasso-v2 .btn-dark:hover{ background:#000!important; border-color:#000!important; color:#fff!important; }
.lasso-v2 .btn-ghost{ background:#fff!important; color:var(--text)!important; border:1.5px solid var(--line)!important; }
.lasso-v2 .btn-ghost:hover{ border-color:#CBD1D8!important; color:var(--text)!important; }
.lasso-v2 .btn-teal{ background:#fff!important; color:var(--teal-dark)!important; border:1.5px solid #BEE5EC!important; }
.lasso-v2 .btn-teal:hover{ background:#F0FAFB!important; color:var(--teal-dark)!important; }
.lasso-v2 .btn-danger{ background:#fff!important; color:var(--brand-red)!important; border:1.5px solid #F3C9C4!important; }
.lasso-v2 .btn-danger:hover{ background:#FDECEA!important; color:var(--brand-red)!important; }
/* keep semantic green for .btn-success (app.css forces an olive green !important) */
.lasso-v2 .btn-success, .lasso-v2 .btn-outline-success{ background:var(--green)!important; border-color:var(--green)!important; color:#fff!important; box-shadow:none; }
.lasso-v2 .btn-success:hover, .lasso-v2 .btn-outline-success:hover{ background:#188047!important; border-color:#188047!important; color:#fff!important; }
/* neutral/secondary/info buttons (Reset, etc.) -> ghost look */
.lasso-v2 .btn-secondary, .lasso-v2 .btn-info, .lasso-v2 .btn-outline-secondary,
.lasso-v2 .btn-outline-primary{ background:#fff!important; color:var(--text)!important; border:1.5px solid var(--line)!important; box-shadow:none!important; }
.lasso-v2 .btn-secondary:hover, .lasso-v2 .btn-info:hover{ border-color:#CBD1D8!important; color:var(--ink)!important; }

/* --- shared toolbar / pagination / sort links inside converted (.lasso-v2) pages --- */
/* real inputs/selects only — NOT button.form-control (search.php's Search button carries .form-control.btn) */
.lasso-v2 input.form-control, .lasso-v2 select.form-control, .lasso-v2 textarea.form-control,
.lasso-v2 .custom-select, .lasso-v2 input[type="text"], .lasso-v2 input[type="search"], .lasso-v2 input[type="email"]{
  border:1.5px solid var(--line)!important; border-radius:10px!important;
  font-family:inherit; font-size:14px; color:var(--text); background-color:#fff!important; box-shadow:none!important;
}
.lasso-v2 input.form-control:focus, .lasso-v2 select.form-control:focus, .lasso-v2 .custom-select:focus{
  border-color:var(--teal)!important; box-shadow:0 0 0 4px rgba(23,162,184,.14)!important;
}
/* Give plain form inputs a consistent ~40px height. Defined BEFORE .inp/.service
   rules so icon inputs, service rows and the search toolbar keep their own more
   specific padding; only otherwise-unpadded inputs (geo targets, trust-signals,
   etc.) pick this up. */
.lasso-v2 input.form-control, .lasso-v2 textarea.form-control, .lasso-v2 select.form-control,
.lasso-v2 input[type="text"], .lasso-v2 input[type="email"], .lasso-v2 input[type="number"]{ padding:9px 12px; }
.lasso-v2 thead th a{ color:var(--muted)!important; text-decoration:none; }
.lasso-v2 thead th a:hover{ color:var(--ink)!important; }
.lasso-v2 .pagination{ gap:6px; }
.lasso-v2 .pagination .page-link{ color:var(--teal-dark); border:1px solid var(--line); border-radius:9px; }
.lasso-v2 .pagination .page-item.active .page-link{ background:var(--brand-red); border-color:var(--brand-red); color:#fff; }
.lasso-v2 .btn[disabled],
.lasso-v2 .btn:disabled{ opacity:.5; cursor:default; box-shadow:none; }
.lasso-v2 .btn.sm{ padding:8px 14px; font-size:12.5px; border-radius:9px; }

/* form controls */
.lasso-v2 .field-label{ display:block; font-weight:600; font-size:13px; color:var(--ink); margin-bottom:7px; }
.lasso-v2 .req{ color:var(--brand-red); }
/* Auto required-asterisk. app.css owns this rule for the legacy layout, but the
   clean lasso_v2 layout doesn't load app.css — port it here (scoped) so the
   customer-setup wizard's required fields show the red "*" the mockup calls for. */
.lasso-v2 .dasterisk label:after,
.lasso-v2 .asterisk .input.required > label:after{ color:var(--brand-red); content:"*"; position:relative; margin-left:4px; top:1px; }
.lasso-v2 .inp{ position:relative; max-width:320px; }
.lasso-v2 .inp .lead2{
  position:absolute; left:1.5px; top:1.5px; bottom:1.5px; width:38px;
  display:flex; align-items:center; justify-content:center; color:var(--muted);
  background:#F5F7F9; border-right:1px solid var(--line); border-radius:9px 0 0 9px;
}
.lasso-v2 .inp input{
  width:100%; padding:11px 12px 11px 50px; border:1.5px solid var(--line);
  border-radius:10px; font-size:14px; font-family:inherit; color:var(--text);
}
.lasso-v2 .inp input:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(23,162,184,.14); }
.lasso-v2 .selm{ position:relative; max-width:320px; }
.lasso-v2 .selm select{
  width:100%; appearance:none; -webkit-appearance:none; border:1.5px solid var(--line);
  border-radius:10px; padding:11px 34px 11px 13px; font-size:14px; font-family:inherit;
  background:#fff; cursor:pointer; color:var(--text);
}
.lasso-v2 .selm .chev{ position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }

/* ----------------------------------------------------------------------------
   Autocomplete dropdown + repeating "service" rows.
   portal.css owns these for the legacy layout, but the clean lasso_v2 layout
   deliberately doesn't load portal.css — so port + restyle them here (scoped,
   in the v2 palette). Shared by the wizard: primary-category (basic), services,
   trust-signals extras, and any other *-autocomplete widget.
   -------------------------------------------------------------------------- */
.lasso-v2 .autocomplete-list{
  position:absolute; top:100%; left:0; right:0; background:#fff;
  border:1.5px solid var(--line); border-top:none; border-radius:0 0 10px 10px;
  max-height:220px; overflow-y:auto; z-index:200; display:none;
  box-shadow:0 12px 26px rgba(20,25,35,.10);
}
.lasso-v2 .ac-item{ padding:9px 13px; cursor:pointer; font-size:13.5px; color:var(--text); }
.lasso-v2 .ac-item:hover,
.lasso-v2 .ac-item.ac-active{ background:var(--brand-red); color:#fff; }
.lasso-v2 .ac-item.ac-create-new{ color:var(--muted); font-style:italic; }
.lasso-v2 .ac-item.ac-create-new:hover,
.lasso-v2 .ac-item.ac-create-new.ac-active{ background:var(--ink); color:#fff; }
.lasso-v2 .ac-item.ac-no-results{ color:var(--muted); cursor:default; }

.lasso-v2 .service-fields-wrapper{ display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
.lasso-v2 .service-row{ display:flex; align-items:center; position:relative; margin-bottom:0; }
.lasso-v2 .service-row .service-input{ flex:1; padding:11px 12px; }
.lasso-v2 .service-row .autocomplete-list{ right:2.6rem; }
.lasso-v2 .service-row .btn-remove-service{
  margin-left:8px; color:var(--brand-red); background:none; border:0; font-size:19px;
  line-height:1; cursor:pointer; padding:0 6px; opacity:.6;
}
.lasso-v2 .service-row .btn-remove-service:hover{ opacity:1; }
.lasso-v2 .service-count{ grid-column:1 / -1; font-size:12.5px; color:var(--muted); margin-top:4px; }
@media(max-width:720px){ .lasso-v2 .service-fields-wrapper{ grid-template-columns:1fr; } }

/* ---- Payment Options step: selectable payment-method cards -------------- */
.lasso-v2 .customer-step-layout fieldset{ border:0; padding:0; margin:0; min-width:0; }
.lasso-v2 .payment-options-grid{ display:grid; gap:14px; grid-template-columns:repeat(var(--pay-cols,4),minmax(0,1fr)); margin-top:14px; }
@media(max-width:600px){ .lasso-v2 .payment-options-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.lasso-v2 .payment-card{ display:block; position:relative; cursor:pointer; }
.lasso-v2 .card-input-hidden{ position:absolute; opacity:0; width:0; height:0; }
.lasso-v2 .payment-card .card-content{
  background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:16px 12px; height:100%;
  text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; transition:border-color .15s, box-shadow .15s, transform .15s;
}
.lasso-v2 .payment-card .icon{ color:var(--muted); }
.lasso-v2 .payment-card .name{ font-weight:600; font-size:13px; color:var(--ink); }
.lasso-v2 .payment-card:hover .card-content{ transform:translateY(-2px); box-shadow:var(--card-shadow); border-color:#CBD1D8; }
.lasso-v2 .card-input-hidden:checked + .card-content{ border-color:var(--brand-red); box-shadow:0 0 0 3px rgba(232,54,43,.16); background:#FEF6F5; }
.lasso-v2 .card-input-hidden:checked + .card-content::after{
  content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute;
  top:8px; right:10px; color:var(--brand-red); font-size:12px;
}

/* ---- Recommendations step: 3-up selectable plan cards ------------------- */
.lasso-v2 .recommendation-radio{ position:absolute; opacity:0; pointer-events:none; width:0; height:0; margin:0; }
.lasso-v2 .recommendation-card{
  position:relative; display:block; cursor:pointer; background:#fff; height:100%;
  border:1.5px solid var(--line); border-radius:14px; padding:18px;
  transition:border-color .15s, box-shadow .15s;
}
.lasso-v2 .recommendation-card-recommended{ border-color:var(--green)!important; box-shadow:0 0 0 3px rgba(31,157,87,.18); }
.lasso-v2 .recommendation-card:hover,
.lasso-v2 .recommendation-card-selected{ border-color:var(--brand-red)!important; box-shadow:0 0 0 3px rgba(232,54,43,.16); }
.lasso-v2 .recommendation-card-disabled{ opacity:.7; }
.lasso-v2 .recommendation-card-disabled label{ cursor:not-allowed; }
.lasso-v2 .recommendation-tier-name{ font-family:'Montserrat','Inter',sans-serif; font-weight:800; font-size:18px; color:var(--ink); }
.lasso-v2 .recommendation-budget{ font-weight:800; font-size:19px; color:var(--ink); }
.lasso-v2 .recommendation-badge-recommended{ position:absolute; top:10px; right:10px; z-index:1; margin:0; }
.lasso-v2 .recommendation-badge-current{ font-size:11px; margin-bottom:.25rem; }
/* "Why we recommend" rationale — comfortable line-height + spacing, page font */
.lasso-v2 .recommendation-why{ font-family:inherit; line-height:1.6; }
.lasso-v2 .recommendation-why h6{ font-size:14px; }
.lasso-v2 .recommendation-why p{ margin-bottom:.7rem; }
.lasso-v2 .recommendation-why ul{ margin:0 0 .7rem; padding-left:1.2rem; }
.lasso-v2 .recommendation-why li{ margin-bottom:.55rem; }
.lasso-v2 .recommendation-why li:last-child{ margin-bottom:0; }

/* "Your selections" chips — reflect the customer's own choices back to them.
   Desktop: fixed inline label + wrapping chip row. Mobile: label stacks above
   full-width chips (see the max-width:576px block below). */
.lasso-v2 .recommendation-selections{ margin:0 0 16px; }
.lasso-v2 .recommendation-selections .rs-cap{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:0 0 10px; display:flex; align-items:center; gap:6px;
}
.lasso-v2 .rs-group{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; align-items:baseline; }
.lasso-v2 .rs-group:last-child{ margin-bottom:0; }
.lasso-v2 .rs-group .rs-label{ flex:0 0 84px; font-size:11.5px; font-weight:600; color:var(--muted); }
.lasso-v2 .rs-group .rs-chips{ display:flex; flex-wrap:wrap; gap:6px; flex:1; }
.lasso-v2 .rs-chip{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  background:#F1F4F7; border:1px solid var(--line); border-radius:999px;
  padding:4px 11px; font-size:12.5px; font-weight:600; color:var(--ink);
}
.lasso-v2 .rs-chip i{ font-size:11px; opacity:.85; }
.lasso-v2 .rs-chip.rs-chip-industry{ background:#EAF4FB; border-color:#CFE6F5; color:#0c3a54; }
.lasso-v2 .rs-chip.rs-chip-more{ background:transparent; border-style:dashed; color:var(--muted); font-weight:600; }
/* inline hint after chips (e.g. "moderate cost per call") — self-explaining, no bullets */
.lasso-v2 .rs-group .rs-hint{ align-self:center; font-size:11.5px; font-style:italic; color:var(--muted); }
.lasso-v2 .rs-group .rs-hint::before{ content:"· "; }

/* Compact recommendation line + collapsed "Why this plan?" (keeps cards above the fold) */
.lasso-v2 .recommendation-why-compact{ line-height:1.5; }
.lasso-v2 .recommendation-why-compact .rs-rec{ font-size:13.5px; }
.lasso-v2 .recommendation-why-more{ margin-top:8px; }
.lasso-v2 .recommendation-why-more summary{ cursor:pointer; font-size:12px; font-weight:700; color:#0c5460; list-style:none; display:inline-flex; align-items:center; gap:5px; }
.lasso-v2 .recommendation-why-more summary::-webkit-details-marker{ display:none; }
.lasso-v2 .recommendation-why-more summary::before{ content:"\f105"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:11px; transition:transform .15s; }
.lasso-v2 .recommendation-why-more[open] summary::before{ transform:rotate(90deg); }
.lasso-v2 .recommendation-why-more ul{ font-size:12.5px; line-height:1.5; }
.lasso-v2 .recommendation-why-more li{ margin-bottom:.4rem; }
.lasso-v2 .recommendation-why-more li:last-child{ margin-bottom:0; }

/* Mobile: compact/subtle heading + stacked selection chips */
@media (max-width:576px){
  .lasso-v2 .recommendation-page-title{ font-size:.85rem; font-weight:600; color:var(--muted); letter-spacing:.01em; margin-bottom:.25rem; }
  .lasso-v2 .recommendation-intro{ font-size:.78rem; line-height:1.4; margin-bottom:.8rem; }
  .lasso-v2 .recommendation-selections{ background:#fff; border:1px solid var(--line); border-radius:11px; padding:12px 13px; }
  .lasso-v2 .rs-group{ display:block; margin-bottom:11px; }
  .lasso-v2 .rs-group:last-child{ margin-bottom:0; }
  .lasso-v2 .rs-group .rs-label{ display:block; flex:none; margin-bottom:6px; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
  .lasso-v2 .rs-group .rs-label .rs-cnt{ color:var(--brand-red); }
  .lasso-v2 .rs-chip{ font-size:12px; padding:5px 10px; }
}

/* ---- Images step: drag/drop upload areas + stock thumbnail galleries ---- */
.lasso-v2 .upload-area{ border:2px dashed #C7CCD2; padding:20px; text-align:center; cursor:pointer; border-radius:12px; background:#F7F8FA; margin-bottom:10px; }
.lasso-v2 .upload-area:hover{ border-color:var(--teal); background:#F1FAFB; }
.lasso-v2 .upload-text{ color:var(--muted); font-size:14px; }
.lasso-v2 .upload-text i{ font-size:20px; color:var(--teal-dark); }
.lasso-v2 .select-btn{ color:var(--teal-dark); font-weight:700; text-decoration:underline; cursor:pointer; }
.lasso-v2 .preview-area{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.lasso-v2 .preview-area img{ width:80px; height:80px; object-fit:cover; border-radius:8px; border:1px solid var(--line); padding:2px; }
.lasso-v2 .image-thumb{ position:relative; }
.lasso-v2 .remove-photo{ position:absolute; top:2px; right:2px; background:rgba(20,25,35,.62); color:#fff; border-radius:50%; width:20px; height:20px; line-height:18px; text-align:center; cursor:pointer; font-size:13px; }
.lasso-v2 .gallery-grid{ display:flex; flex-wrap:wrap; gap:8px; max-height:280px; overflow-y:auto; padding:8px; border:1px solid var(--line); border-radius:12px; }
.lasso-v2 .gallery-item{ position:relative; width:80px; height:80px; cursor:pointer; border:2px solid transparent; border-radius:8px; overflow:hidden; }
.lasso-v2 .gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.lasso-v2 .gallery-item .check-overlay{ display:none; position:absolute; top:3px; right:3px; width:20px; height:20px; line-height:20px; text-align:center; background:var(--brand-red); color:#fff; border-radius:50%; font-size:11px; }
.lasso-v2 .gallery-item.active{ border-color:var(--brand-red); }
.lasso-v2 .gallery-item.active .check-overlay{ display:block; }
.lasso-v2 .upload-wins-notice{ color:#856404; background:#FFF3CD; border:1px solid #FFEEBA; padding:5px 9px; border-radius:8px; font-size:12px; margin-top:6px; display:none; }

/* ---- Campaign Goals step: drag-to-select goal cards + guardrails -------- */
.lasso-v2 .goal-panel-title{ font-size:15px; font-weight:700; color:var(--ink); }
.lasso-v2 .goal-sortable{ min-height:80px; padding:10px; border:2px dashed var(--line); border-radius:12px; background:#FAFBFC; }
.lasso-v2 .goal-drag-item{
  cursor:grab; user-select:none; background:#fff; border:1.5px solid var(--line); border-radius:12px;
  padding:12px 14px; margin-bottom:8px; transition:border-color .15s, box-shadow .15s, background .15s;
}
.lasso-v2 .goal-drag-item:hover{ background:#FCFCFD; border-color:#CBD1D8; }
.lasso-v2 .goal-drag-item-selected{ border-color:var(--brand-red)!important; box-shadow:0 0 0 3px rgba(232,54,43,.14); }
.lasso-v2 .goal-drag-handle{ cursor:grab; font-size:15px; color:var(--muted); opacity:.6; }
.lasso-v2 .goal-drag-item:hover .goal-drag-handle{ opacity:1; }
.lasso-v2 .goal-priority-badge{
  display:inline-flex; align-items:center; justify-content:center; width:1.8rem; height:1.8rem; border-radius:50%;
  background:var(--brand-red); color:#fff; font-weight:700; font-size:13px; flex-shrink:0;
}
.lasso-v2 .campaign-goal-text{ font-size:14px; line-height:1.4; color:var(--text); }
.lasso-v2 .goal-placeholder{ border:2px dashed var(--brand-red); border-radius:10px; background:#FEF6F5; min-height:52px; margin-bottom:8px; list-style:none; }
.lasso-v2 .goal-locked-item{ background:#F7F8FA; border:1.5px solid var(--line); border-radius:12px; padding:8px 12px; }
.lasso-v2 .goal-locked-item .goal-priority-badge{ background:var(--muted); }
.lasso-v2 .goal-drag-item.ui-sortable-helper{ box-shadow:0 8px 20px rgba(20,25,35,.16); }
.lasso-v2 .goal-guardrails-panel-heading{ font-size:15px; font-weight:700; color:var(--ink); }
.lasso-v2 .goal-guardrails-panel .goal-guardrails-title{ list-style:none; color:var(--teal-dark); font-size:13px; font-weight:700; margin:.65rem 0 .25rem; }
.lasso-v2 .goal-guardrails-panel .goal-guardrails-item{ padding-left:1.1rem; font-size:12.5px; line-height:1.35; margin-bottom:.25rem; color:var(--muted); }

/* ---- Review step: Bootstrap-style tabs on the clean layout -------------- */
.lasso-v2 .nav-tabs{ display:flex; flex-wrap:wrap; gap:2px; list-style:none; padding:0; margin:0; border-bottom:1px solid var(--line); }
.lasso-v2 .nav-tabs .nav-item{ margin-bottom:-1px; }
.lasso-v2 .nav-tabs .nav-link{
  display:block; padding:10px 14px; font-size:13.5px; font-weight:600; color:var(--muted);
  text-decoration:none; background:none; border:0; border-bottom:2px solid transparent; cursor:pointer;
}
.lasso-v2 .nav-tabs .nav-link:hover{ color:var(--ink); }
.lasso-v2 .nav-tabs .nav-link.active{ color:var(--brand-red); border-bottom-color:var(--brand-red); }
.lasso-v2 .tab-content > .tab-pane{ display:none; }
.lasso-v2 .tab-content > .tab-pane.active{ display:block; }
.lasso-v2 .fade{ transition:opacity .15s linear; }
.lasso-v2 .fade:not(.show){ opacity:0; }
/* review frames (portal.css owns these) — give the tabbed summary + checkout
   their own white cards so they don't sit bare on the page background. */
.lasso-v2 .review-tabs-frame{ background:#fff; border:1px solid var(--line); border-radius:14px; margin-top:1rem; overflow:hidden; box-shadow:var(--card-shadow); }
.lasso-v2 .review-tabs-frame > #reviewTabs{ margin:0; padding:0 .75rem; background:#F7F8FA; border-bottom:1px solid var(--line); }
.lasso-v2 .review-tabs-frame > #reviewTabContent{ padding:1.25rem; min-height:340px; }
.lasso-v2 .review-tabs-frame .tab-pane > p.text-muted.small:first-child{ margin-bottom:.85rem; padding-bottom:.5rem; border-bottom:1px dashed var(--line); }
.lasso-v2 .review-checkout-cta{ background:#fff; border:1px solid var(--line); border-radius:14px; margin-top:1rem; padding:2rem 1.25rem; box-shadow:var(--card-shadow); }
/* review-pane tables (hours / geo summary) — Bootstrap .table isn't on the clean layout */
.lasso-v2 .table{ width:100%; border-collapse:collapse; font-size:13.5px; color:var(--text); margin-bottom:0; }
.lasso-v2 .table th, .lasso-v2 .table td{ padding:8px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
.lasso-v2 .table thead th{ font-weight:700; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); background:#F7F8FA; }
.lasso-v2 .table-sm th, .lasso-v2 .table-sm td{ padding:6px 10px; }
.lasso-v2 .table-striped tbody tr:nth-of-type(odd){ background:#FAFBFC; }
.lasso-v2 .table tbody tr:last-child td, .lasso-v2 .table tbody tr:last-child th{ border-bottom:0; }
/* review-pane column sizing (panes live outside a .card, so the card-row shim
   doesn't apply) — give the summary rows real proportions + full width */
.lasso-v2 #reviewTabContent .row{ align-items:flex-start; }
@media(min-width:768px){
  .lasso-v2 #reviewTabContent .row > .col-lg-5{ flex:41 1 0; min-width:0; }
  .lasso-v2 #reviewTabContent .row > .col-lg-7{ flex:59 1 0; min-width:0; }
  .lasso-v2 #reviewTabContent .row > .col-lg-6{ flex:0 1 calc(50% - 6px); max-width:calc(50% - 6px); min-width:0; }
  .lasso-v2 #reviewTabContent .row > .col-md-3{ flex:1 1 0; min-width:0; }
  .lasso-v2 #reviewTabContent .row > .col-md-9{ flex:3 1 0; min-width:0; }
}
/* payment-options review tiles — equal-size compact cards (were min-width so the
   longest label stretched one wider than the rest) */
.lasso-v2 #rev-payments-pane .card{ width:156px; margin:0; padding:0; border:1px solid var(--line); border-radius:12px; box-shadow:var(--card-shadow); }
.lasso-v2 #rev-payments-pane .card .card-body{ padding:14px 10px; }

/* badges */
.lasso-v2 .badge{
  display:inline-flex; align-items:center; gap:6px; font-weight:700;
  font-size:11.5px; padding:5px 12px; border-radius:999px; line-height:1.4;
}
.lasso-v2 .badge i{ width:6px; height:6px; border-radius:50%; font-style:normal; }
.lasso-v2 .b-green{ background:#E6F6EC; color:var(--green); } .lasso-v2 .b-green i{ background:var(--green); }
.lasso-v2 .b-amber{ background:#FFF3E0; color:#B4690E; }     .lasso-v2 .b-amber i{ background:#E8912B; }
.lasso-v2 .b-blue{ background:#E7F0FE; color:var(--blue); }   .lasso-v2 .b-blue i{ background:var(--blue); }
.lasso-v2 .b-red{ background:#FDECEA; color:var(--brand-red); } .lasso-v2 .b-red i{ background:var(--brand-red); }
.lasso-v2 .b-neutral{ background:#F1F3F5; color:var(--muted); } .lasso-v2 .b-neutral i{ background:#AEB4BC; }

/* data table */
.lasso-v2 .tbl{ border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.lasso-v2 .tbl table,
.lasso-v2 table.tbl{ width:100%; border-collapse:collapse; font-size:13.5px; }
.lasso-v2 .tbl thead th,
.lasso-v2 table.tbl thead th{
  text-align:left; padding:12px 16px; background:#F7F8FA; color:var(--muted);
  font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  border-bottom:1px solid var(--line);
}
.lasso-v2 .tbl tbody td,
.lasso-v2 table.tbl tbody td{ padding:13px 16px; border-bottom:1px solid #EEF0F3; }
.lasso-v2 .tbl tbody tr:last-child td,
.lasso-v2 table.tbl tbody tr:last-child td{ border-bottom:0; }
.lasso-v2 .tbl tbody tr:hover,
.lasso-v2 table.tbl tbody tr:hover{ background:#FAFBFC; }
.lasso-v2 .oid{ font-weight:700; color:var(--ink); }

/* KPI cards */
.lasso-v2 .kpi{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:18px 20px; box-shadow:var(--card-shadow); position:relative; overflow:hidden;
}
.lasso-v2 .kpi .accent{ position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--blue); }
.lasso-v2 .kpi .lbl{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.lasso-v2 .kpi .val{ font-family:'Montserrat','Inter',sans-serif; font-weight:900; font-size:30px; color:var(--ink); margin:8px 0 6px; }
.lasso-v2 .kpi .delta{ font-size:12px; color:var(--muted); background:#F1F3F5; padding:3px 9px; border-radius:999px; }

/* tabs / segmented / stepper */
.lasso-v2 .tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); }
.lasso-v2 .tab{
  padding:10px 16px; font-size:14px; font-weight:600; color:var(--muted); cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px; background:none;
  border-top:0; border-left:0; border-right:0; font-family:inherit;
}
.lasso-v2 .tab.active{ color:var(--brand-red); border-bottom-color:var(--brand-red); }
.lasso-v2 .seg{ display:inline-flex; background:#F1F3F5; border:1px solid var(--line); border-radius:11px; padding:3px; }
.lasso-v2 .seg button{
  border:0; background:none; font-family:inherit; font-size:13px; font-weight:600;
  color:var(--muted); padding:7px 15px; border-radius:8px; cursor:pointer;
}
.lasso-v2 .seg button.on{ background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.lasso-v2 .stepper{ display:flex; align-items:center; gap:0; }
.lasso-v2 .stp{ display:flex; align-items:center; gap:9px; }
.lasso-v2 .stp .num{
  width:30px; height:30px; border-radius:50%; border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-weight:700;
  font-size:12.5px; color:var(--muted); background:#fff;
}
.lasso-v2 .stp.done .num{ background:#E6F6EC; border-color:#BEE6CE; color:var(--green); }
.lasso-v2 .stp.active .num{ background:var(--brand-red); border-color:var(--brand-red); color:#fff; }
.lasso-v2 .stp .lbl{ font-size:13px; font-weight:600; color:var(--muted); }
.lasso-v2 .stp.active .lbl{ color:var(--ink); font-weight:700; }
.lasso-v2 .stp.active .num{ box-shadow:0 0 0 4px rgba(232,54,43,.15); }
.lasso-v2 .stp .line{ width:40px; height:2px; background:var(--line); margin:0 10px; }

/* wizard "Setup progress" header — sits above the vertical stepper in the
   customer-setup steps card (per wizard-basic-info-redesign mockup). */
.lasso-v2 .stepper-progress{ margin-bottom:18px; }
.lasso-v2 .stepper-progress .sp-t{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.lasso-v2 .stepper-progress .sp-bar{ height:6px; border-radius:5px; background:#EDEFF2; margin-top:9px; overflow:hidden; }
.lasso-v2 .stepper-progress .sp-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--brand-red),#ff6a5f); border-radius:5px; }
.lasso-v2 .stepper-progress .sp-p{ font-size:12px; color:var(--muted); margin-top:7px; }

/* ============================================================================
   AUTH — split-screen shell (marketing / login / register)
   Reused by: /login two-step (lasso_login_page) via element auth/split_shell.
   Later: register-role, welcome-modal. Values copied verbatim from
   resources/new-designs/completed/get-started-redesign.html. All scoped under .lasso-v2.
   ========================================================================== */
.lasso-v2 .auth-split{
  display:grid; grid-template-columns:1.05fr 1fr; min-height:520px;
  background:#fff; border:1px solid #EAEDF0; border-radius:20px; overflow:hidden;
  box-shadow:0 20px 50px rgba(20,25,35,.14); max-width:1080px; margin:32px auto;
}
.lasso-v2 .auth-panel{
  background:linear-gradient(155deg,#232A31 0%,#1A2026 60%,#14181D 100%);
  color:#fff; padding:56px 50px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
}
.lasso-v2 .auth-panel::before{ content:""; position:absolute; top:-90px; right:-90px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle,rgba(232,54,43,.28),transparent 68%); }
.lasso-v2 .auth-panel::after{ content:""; position:absolute; bottom:-70px; left:-40px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(23,162,184,.22),transparent 68%); }
.lasso-v2 .auth-panel-inner{ position:relative; z-index:1; }
.lasso-v2 .auth-eyebrow{ font-size:12px; font-weight:700; letter-spacing:.22em; color:var(--brand-red); text-transform:uppercase; margin:26px 0 14px; }
.lasso-v2 .auth-panel h1{ font-family:'Montserrat','Inter',sans-serif; font-weight:800; font-size:34px; line-height:1.12; margin:0 0 16px; color:#fff; }
.lasso-v2 .auth-panel h1 em{ font-style:normal; color:var(--brand-red); }
.lasso-v2 .auth-panel-lead{ color:#B6BEC7; font-size:15px; line-height:1.6; max-width:400px; margin-bottom:30px; }
.lasso-v2 .auth-benefits{ list-style:none; display:flex; flex-direction:column; gap:14px; margin:0; padding:0; }
.lasso-v2 .auth-benefits li{ display:flex; align-items:flex-start; gap:12px; font-size:14.5px; color:#DCE1E7; }
.lasso-v2 .auth-check{ flex:none; width:22px; height:22px; border-radius:50%; background:rgba(23,162,184,.18); color:var(--teal); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; margin-top:1px; }

.lasso-v2 .auth-form-side{ padding:56px 54px; display:flex; flex-direction:column; justify-content:center; background:#fff; }
.lasso-v2 .auth-form-card{ max-width:380px; width:100%; margin:0 auto; }
.lasso-v2 .auth-form-card h2{ font-family:'Montserrat','Inter',sans-serif; font-weight:800; font-size:27px; color:var(--ink); margin:0 0 8px; }
.lasso-v2 .auth-form-card .sub{ color:var(--muted); font-size:14.5px; margin-bottom:26px; line-height:1.5; }
/* icon-input goes full width inside the auth card (override .inp max-width:320px) */
.lasso-v2 .auth-form-card .inp{ max-width:100%; }

.lasso-v2 .auth-steps{ display:flex; gap:6px; margin-bottom:26px; }
.lasso-v2 .auth-steps i{ height:5px; width:30px; border-radius:3px; background:var(--line); }
.lasso-v2 .auth-steps i.on{ background:var(--brand-red); }

.lasso-v2 .auth-label-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.lasso-v2 .auth-label-row .field-label{ margin-bottom:0; }
.lasso-v2 .auth-label-row a{ font-size:12.5px; color:var(--teal-dark); text-decoration:none; font-weight:600; }
.lasso-v2 .auth-label-row a:hover{ text-decoration:underline; }

.lasso-v2 .auth-back{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); text-decoration:none; font-weight:600; margin-bottom:20px; }
.lasso-v2 .auth-back:hover{ color:var(--ink); }

.lasso-v2 .auth-helper{ display:flex; justify-content:space-between; align-items:center; margin-top:22px; font-size:13.5px; gap:10px; flex-wrap:wrap; }
.lasso-v2 .auth-helper a{ color:var(--teal-dark); text-decoration:none; font-weight:600; }
.lasso-v2 .auth-helper a:hover{ text-decoration:underline; }

.lasso-v2 .auth-trust{ display:flex; align-items:center; gap:8px; justify-content:center; color:var(--muted); font-size:12.5px; margin-top:24px; }

.lasso-v2 .auth-alert{ display:flex; gap:10px; align-items:flex-start; background:#FDECEA; border:1px solid #F5C6C0; color:#B02A1E; border-radius:11px; padding:11px 13px; font-size:13px; line-height:1.45; margin:16px 0; }
.lasso-v2 .auth-alert svg{ flex:none; margin-top:1px; }

.lasso-v2 .auth-captcha{ display:flex; justify-content:center; border:1px solid var(--line); border-radius:11px; background:#F9FAFB; padding:13px 15px; margin:16px 0 4px; }

/* password field with show/hide toggle */
.lasso-v2 .auth-pw{ position:relative; }
.lasso-v2 .auth-pw .inp input{ padding-right:46px; }
.lasso-v2 .auth-pw-toggle{ position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:0; cursor:pointer; color:var(--muted); padding:8px; display:flex; border-radius:8px; z-index:2; }
.lasso-v2 .auth-pw-toggle:hover{ color:var(--ink); background:#F1F3F5; }

/* Flash messages rendered inside the auth card echo the .auth-alert look */
.lasso-v2 .auth-form-card .alert{ border:1px solid transparent; border-radius:11px; font-size:13px; line-height:1.45; }
.lasso-v2 .auth-form-card .alert-danger{ background:#FDECEA; border-color:#F5C6C0; color:#B02A1E; }
.lasso-v2 .auth-form-card .alert-success{ background:#E6F6EC; border-color:#BEE6CE; color:#188047; }

/* responsive: stack to a compact hero above the form */
@media(max-width:980px){
  .lasso-v2 .auth-split{ grid-template-columns:1fr; margin:16px auto; border-radius:16px; }
  .lasso-v2 .auth-panel{ padding:34px 30px 30px; }
  .lasso-v2 .auth-panel h1{ font-size:24px; }
  .lasso-v2 .auth-eyebrow{ margin-top:0; }
  .lasso-v2 .auth-panel-lead{ margin-bottom:0; font-size:13.5px; }
  .lasso-v2 .auth-benefits{ display:none; }
  .lasso-v2 .auth-form-side{ padding:30px 26px 36px; }
}
@media(max-width:480px){
  .lasso-v2 .auth-form-card h2{ font-size:22px; }
  .lasso-v2 .auth-helper{ justify-content:flex-start; }
}

/* ============================================================================
   DASHBOARD / PORTAL HOME  (/welcome for CPORTAL) — greeting, action cards,
   plan-usage cards. Values from resources/new-designs/completed/dashboard-redesign.html.
   The dark bar + red nav come from backend_header (preserved); this styles the
   page body only. All scoped under .lasso-v2.
   ========================================================================== */
.lasso-v2 .dash-hello{ font-family:'Montserrat','Inter',sans-serif; font-weight:800; font-size:32px; color:var(--ink); letter-spacing:-.01em; margin:0; }
.lasso-v2 .dash-sub{ color:var(--muted); font-size:15px; margin-top:6px; }
/* Deliberate breathing room between the greeting and the first section label.
   Mockup uses <br><br> (~42px) THEN .section-label margin-top:34px. Use
   padding-bottom (not margin) here so it can't margin-collapse with the
   section label's margin-top — total gap stays ~76px, as designed. */
.lasso-v2 .dash-greeting{ padding-bottom:42px; }
.lasso-v2 .section-label{ font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:34px 0 16px; }

.lasso-v2 .dash-actions{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.lasso-v2 .dash-action{ display:flex; flex-direction:column; gap:14px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; cursor:pointer; transition:.16s; text-decoration:none; box-shadow:var(--card-shadow); color:inherit; }
.lasso-v2 .dash-action:hover{ transform:translateY(-3px); border-color:#D3D8DE; box-shadow:0 10px 26px rgba(20,25,35,.1); }
.lasso-v2 .dash-action .icon{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:none; font-size:18px; }
.lasso-v2 .dash-action .ic-red{ background:#FDECEA; color:var(--brand-red); }
.lasso-v2 .dash-action .ic-teal{ background:#E2F4F7; color:var(--teal-dark); }
.lasso-v2 .dash-action .ic-slate{ background:#E9EDF2; color:#4A5561; }
.lasso-v2 .dash-action .ic-violet{ background:#EEEBFB; color:var(--violet); }
.lasso-v2 .dash-action h3{ font-size:15.5px; font-weight:700; color:var(--ink); margin:0; }
.lasso-v2 .dash-action p{ font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.4; }
.lasso-v2 .dash-action .go{ margin-top:auto; display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--brand-red); }
.lasso-v2 .dash-action.primary{ background:linear-gradient(160deg,#E8362B,#C42A20); border-color:transparent; }
.lasso-v2 .dash-action.primary .icon{ background:rgba(255,255,255,.18); color:#fff; }
.lasso-v2 .dash-action.primary h3{ color:#fff; }
.lasso-v2 .dash-action.primary p{ color:rgba(255,255,255,.85); }
.lasso-v2 .dash-action.primary .go{ color:#fff; }

.lasso-v2 .usage{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:760px; }
.lasso-v2 .u-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 22px; box-shadow:var(--card-shadow); }
.lasso-v2 .u-head{ display:flex; align-items:center; gap:12px; }
.lasso-v2 .u-icon{ width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex:none; font-size:16px; }
.lasso-v2 .u-icon.loc{ background:#E7F0FE; color:#2F6FD6; }
.lasso-v2 .u-icon.call{ background:#E6F6EC; color:#1F9D57; }
.lasso-v2 .u-meta .lbl{ font-size:13px; color:var(--muted); }
.lasso-v2 .u-meta .val{ font-size:20px; font-weight:800; color:var(--ink); margin-top:1px; }
.lasso-v2 .u-meta .val small{ font-size:13px; font-weight:600; color:var(--muted); }
.lasso-v2 .u-card .chev{ margin-left:auto; color:#B4BBC3; display:flex; }
.lasso-v2 .bar{ height:7px; border-radius:5px; background:#EDEFF2; margin:16px 0 9px; overflow:hidden; }
.lasso-v2 .bar i{ display:block; height:100%; border-radius:5px; }
.lasso-v2 .bar i.blue{ background:linear-gradient(90deg,#2F6FD6,#5B93EC); }
.lasso-v2 .bar i.green{ background:linear-gradient(90deg,#1F9D57,#41c07a); }
.lasso-v2 .bar i.amber{ background:linear-gradient(90deg,#E8912B,#f0b45f); }
.lasso-v2 .bar i.red{ background:linear-gradient(90deg,#E8362B,#ff6a5f); }
.lasso-v2 .u-foot{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); }
.lasso-v2 .u-foot b{ color:var(--text); font-weight:600; }

@media(max-width:980px){
  .lasso-v2 .dash-actions{ grid-template-columns:1fr 1fr; }
  .lasso-v2 .usage{ grid-template-columns:1fr; }
}
@media(max-width:560px){
  .lasso-v2 .dash-hello{ font-size:24px; }
  .lasso-v2 .dash-action{ padding:16px; }
}