/* Elementor page only. Loaded via `extra: crm, p-wordpress-elementor`. Every class is scoped with .pwel- */

/* ---------- hero: editor canvas + template map ---------- */
.pwel-hero .pwel-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pwel-hero .crm-sub { max-width: 46ch; }
.pwel-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; max-width: 600px; }
.pwel-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 7px; border-radius: 10px; background: #fff; border: 1px solid #EBDDE3; font: 600 13.5px/1.25 var(--f-body); color: #2A0E1B; box-shadow: 0 10px 20px -16px rgba(8,34,56,.5); }
.pwel-chips img { flex: none; width: 22px; height: 22px; }
.pwel-chip__ico { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #FBE7EF; }
.pwel-chip__ico svg { width: 15px; height: 15px; fill: none; stroke: #92003B; stroke-width: 2; stroke-linejoin: round; }

.pwel-ed { position: relative; margin: 0; border-radius: 18px; background: #fff; border: 1px solid #E5DCE1; box-shadow: 0 44px 80px -48px rgba(8,34,56,.6); overflow: hidden; }
.pwel-ed__bar { display: flex; align-items: center; gap: 9px; padding: 11px 14px; background: #26292F; color: #E3E6EA; font: 600 12.5px/1 var(--f-body); }
.pwel-ed__bar img { width: 18px; height: 18px; border-radius: 4px; background: #fff; padding: 2px; }
.pwel-ed__bar em { margin-left: auto; font-style: normal; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #F9A8C8; }
.pwel-ed__body { display: grid; grid-template-columns: 112px minmax(0, 1fr); min-height: 300px; }
.pwel-ed__panel { display: grid; align-content: start; gap: 8px; margin: 0; padding: 14px 10px; list-style: none; background: #F4F5F7; border-right: 1px solid #E6E8EC; }
.pwel-ed__panel li { display: grid; justify-items: center; gap: 4px; padding: 9px 4px 7px; border-radius: 8px; background: #fff; border: 1px solid #E3E6EA; font: 600 11px/1.1 var(--f-body); color: #3F4651; transition: border-color 260ms, box-shadow 260ms, transform 260ms; }
.pwel-ed__panel svg { width: 20px; height: 20px; fill: none; stroke: #6B7280; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pwel-ed__panel li.is-grab { border-color: #92003B; box-shadow: 0 0 0 3px #FBE7EF; transform: translateX(4px); }
.pwel-ed__panel li.is-grab svg { stroke: #92003B; }
.pwel-ed__canvas { display: grid; align-content: start; gap: 10px; padding: 14px; background-color: #FCFCFD; background-image: linear-gradient(#EEF0F3 1px, transparent 1px), linear-gradient(90deg, #EEF0F3 1px, transparent 1px); background-size: 22px 22px; }
.pwel-slot { padding: 9px 12px; border-radius: 8px; border: 1.5px dashed #5FA8C9; background: rgba(95,211,243,.1); font: 700 10.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #0A6FA8; }
.pwel-slot--ft { border-color: #3FB97A; background: rgba(63,185,122,.1); color: #2F7D4A; }
.pwel-wd { position: relative; border-radius: 8px; outline: 1.5px solid transparent; transition: transform 520ms cubic-bezier(.2,1.3,.4,1), opacity 360ms, outline-color 300ms; }
.pwel-wd--h b { display: block; padding: 4px 2px; font: 800 19px/1.2 var(--f-display); color: #082238; letter-spacing: -.01em; }
.pwel-wd--row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pwel-wd--i { display: block; min-height: 92px; border-radius: 8px; background: linear-gradient(160deg, #FDE2EC, #F9C7D9 55%, #E8EEF8); }
.pwel-wd--f { display: grid; gap: 6px; align-content: start; padding: 9px; border-radius: 8px; background: #fff; border: 1px solid #E3E6EA; }
.pwel-wd--f i { height: 12px; border-radius: 4px; background: #EEF1F4; }
.pwel-wd--f em { justify-self: start; padding: 5px 12px; border-radius: 6px; background: #92003B; color: #fff; font: 700 11px/1 var(--f-body); font-style: normal; }
.pwel-wd--b em { display: inline-block; padding: 9px 16px; border-radius: 999px; background: #FFB81C; color: #082238; font: 700 12.5px/1 var(--f-body); font-style: normal; }
.pwel-ed.is-arm .pwel-wd { opacity: 0; transform: translate(-60px, -8px) scale(.94); }
.pwel-ed.is-arm .pwel-wd.is-in { opacity: 1; transform: none; outline-color: #92003B; }
.pwel-ed.is-arm .pwel-wd.is-set { outline-color: transparent; }
.pwel-ed__map { padding: 12px 14px 14px; border-top: 1px solid #E6E8EC; background: #F7F8FA; }
.pwel-ed__map p { margin: 0 0 8px; font: 700 10.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #6B7280; }
.pwel-ed__map ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.pwel-ed__map li { padding: 8px 9px; border-radius: 8px; background: #fff; border: 1px solid #E3E6EA; transition: border-color 300ms, background-color 300ms; }
.pwel-ed__map b { display: block; font: 700 12.5px/1.2 var(--f-display); color: #082238; }
.pwel-ed__map span { display: block; margin-top: 3px; font: 500 11px/1.3 var(--f-body); color: #64748B; }
.pwel-ed__map li.is-lit { border-color: #92003B; background: #FDF2F6; }

/* ---------- fit ---------- */
.pwel-fit__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 18px; margin-top: 36px; }
.pwel-fit__side { padding: 24px 24px 20px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; }
.pwel-fit__side--yes { border-top: 5px solid #92003B; }
.pwel-fit__side--no { background: #F8FAFC; border-top: 5px solid #94A3B8; }
.pwel-fit__side h3 { margin: 0 0 14px; font: 700 20px/1.25 var(--f-display); color: #082238; }
.pwel-fit__side ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: pwf; }
.pwel-fit__side li { position: relative; padding-left: 34px; font-size: 15px; line-height: 1.55; color: #475569; counter-increment: pwf; }
.pwel-fit__side li::before { content: counter(pwf); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #FBE7EF; color: #92003B; font: 800 12px/1 var(--f-body); }
.pwel-fit__side--no li::before { background: #E2E8F0; color: #475569; }
.pwel-fit__side li b { display: block; margin-bottom: 2px; font: 700 16px/1.35 var(--f-display); color: #082238; }
.pwel-fit__side a { color: #0A6FA8; }

/* ---------- services: numbered rows ---------- */
.pwel-svc__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 36px 0 0; padding: 0; list-style: none; }
.pwel-svc__list li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 22px; border-radius: 16px; background: #fff; border: 1px solid #E2E8F0; border-left: 4px solid var(--c); }
.pwel-svc__list li:last-child { grid-column: 1 / -1; }
.pwel-svc__n { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--bg); color: var(--c); font: 800 18px/1 var(--f-display); }
.pwel-svc__list h3 { margin: 2px 0 6px; font: 700 18.5px/1.3 var(--f-display); color: #082238; }
.pwel-svc__list p { margin: 0; font-size: 15px; line-height: 1.6; color: #475569; }

/* ---------- story: before/after speed bars ---------- */
.pwel-story__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; margin-top: 36px; align-items: start; }
.pwel-meter { position: sticky; top: 96px; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 30px 60px -44px rgba(8,34,56,.6); }
.pwel-meter__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pwel-meter__lab { margin: 0; font: 700 11.5px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #64748B; }
.pwel-meter__tog { display: inline-flex; padding: 4px; border-radius: 999px; background: #F1F5F9; border: 1px solid #E2E8F0; }
.pwel-meter__tog button { padding: 8px 14px; border: 0; border-radius: 999px; background: transparent; color: #475569; font: 700 13px/1 var(--f-body); cursor: pointer; }
.pwel-meter__tog button.is-on { background: #082238; color: #fff; }
.pwel-meter__tog button:focus-visible { outline: 3px solid #FFB81C; outline-offset: 2px; }
.pwel-bars { display: grid; gap: 16px; margin: 22px 0 0; padding: 0; list-style: none; }
.pwel-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
.pwel-bars__k { font: 600 14px/1.3 var(--f-body); color: #082238; }
.pwel-bars b { grid-row: 1; grid-column: 2; font: 800 15px/1 var(--f-display); color: #B42318; font-variant-numeric: tabular-nums; transition: color 400ms; }
.pwel-bars__track { grid-column: 1 / -1; height: 12px; border-radius: 999px; background: #F1F5F9; overflow: hidden; }
.pwel-bars__track i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: linear-gradient(90deg, #F59E0B, #DC2626); transition: width 900ms cubic-bezier(.2,.8,.2,1), background 500ms; }
.pwel-meter.is-after .pwel-bars__track i { background: linear-gradient(90deg, #00A3D9, #3FB97A); }
.pwel-meter.is-after .pwel-bars b { color: #2F7D4A; }
.pwel-meter__say { margin: 18px 0 0; padding: 12px 14px; border-radius: 12px; background: #F8FAFC; font: 500 14.5px/1.5 var(--f-body); color: #334155; }
.pwel-fixes { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pwel-fixes li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid #E2E8F0; transition: border-color 400ms, opacity 400ms, transform 400ms; }
.pwel-fixes span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #E2F4F5; color: #0E7C86; font: 800 14px/1 var(--f-display); }
.pwel-fixes h3 { margin: 4px 0 4px; font: 700 17px/1.3 var(--f-display); color: #082238; }
.pwel-fixes p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #475569; }
.pwel-fixes.is-arm li { opacity: .4; transform: translateY(10px); }
.pwel-fixes.is-arm li.is-on { opacity: 1; transform: none; border-color: #9ED9DD; }
.pwel-story__note { margin: 20px 0 0; font-size: 14px; color: #64748B; }

/* ---------- interactive: template map (dark band) ---------- */
.pwel-map__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 22px; margin-top: 34px; align-items: start; }
.pwel-map__rules { display: grid; gap: 10px; }
.pwel-rule { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(159,192,216,.22); border-left: 4px solid var(--k); }
.pwel-rule label { display: block; margin-bottom: 7px; font: 600 14px/1.3 var(--f-body); color: #D7E6F0; }
.pwel-rule label b { display: inline-block; margin-right: 6px; padding: 3px 7px; border-radius: 6px; background: var(--k); color: #082238; font: 800 10.5px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; }
.pwel-rule select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(159,192,216,.4); background: #0B2942; color: #fff; font: 600 14px/1.3 var(--f-body); }
.pwel-rule select:focus-visible { outline: 3px solid #FFB81C; outline-offset: 2px; }
.pwel-map__clash { justify-self: start; margin-top: 4px; padding: 10px 16px; border-radius: 10px; border: 1px dashed rgba(255,184,28,.7); background: transparent; color: #FFD27A; font: 700 13.5px/1 var(--f-body); cursor: pointer; }
.pwel-map__clash:hover { background: rgba(255,184,28,.1); }
.pwel-map__clash:focus-visible { outline: 3px solid #FFB81C; outline-offset: 2px; }
.pwel-map__out { padding: 18px; border-radius: 18px; background: #F7F9FB; color: #334155; box-shadow: 0 40px 70px -40px rgba(0,0,0,.6); }
.pwel-map__sum { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-start; justify-content: space-between; }
.pwel-map__sum p { flex: 1 1 280px; margin: 0; font: 600 15px/1.5 var(--f-body); color: #082238; }
.pwel-map__legend { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; font: 600 11.5px/1 var(--f-body); color: #64748B; }
.pwel-map__legend li { display: inline-flex; align-items: center; gap: 5px; }
.pwel-map__legend li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: #92003B; }
.pwel-map__legend .is-def::before { background: #fff; border: 1.5px dashed #94A3B8; }
.pwel-map__legend .is-bad::before { background: #DC2626; }
.pwel-pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.pwel-pg { padding: 10px; border-radius: 12px; background: #fff; border: 1px solid #E2E8F0; }
.pwel-pg.is-bad { border-color: #F3A6A6; box-shadow: 0 0 0 3px #FDECEC; }
.pwel-pg__t { margin: 0 0 7px; font: 700 13px/1.25 var(--f-display); color: #082238; }
.pwel-pg__t small { display: block; margin-top: 2px; font: 500 11px/1.3 var(--f-body); color: #64748B; }
.pwel-pg__s { display: block; margin-top: 4px; padding: 5px 7px; border-radius: 6px; background: color-mix(in srgb, var(--k) 18%, #fff); border-left: 3px solid var(--k); font: 600 11.5px/1.3 var(--f-body); color: #1E293B; overflow-wrap: anywhere; }
.pwel-pg__s.is-def { --k: #94A3B8; background: #fff; border: 1px dashed #CBD5E1; border-left-width: 1px; color: #64748B; }
.pwel-pg__s.is-bad { --k: #DC2626; background: #FDECEC; color: #991B1B; }
.pwel-pg__s.is-new { animation: pwel-pop 420ms cubic-bezier(.2,1.4,.4,1); }
@keyframes pwel-pop { from { transform: scale(.92); opacity: .4; } to { transform: none; opacity: 1; } }
.pwel-map__foot { margin: 22px 0 0; font-size: 14px; line-height: 1.55; color: #9FC0D8; }

/* ---------- Zoho ---------- */
.pwel-zo__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.pwel-zo__c { padding: 20px 22px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; }
.pwel-zo__wire { display: flex; align-items: flex-start; margin: 0 0 16px; padding: 0 0 14px; list-style: none; border-bottom: 1px dashed #E2E8F0; }
.pwel-zo__wire li { position: relative; flex: 1 1 0; display: grid; justify-items: center; gap: 5px; text-align: center; font: 600 11.5px/1.25 var(--f-body); color: #475569; }
.pwel-zo__wire li:not(:last-child)::after { content: ""; position: absolute; left: calc(50% + 26px); right: calc(-50% + 26px); top: 20px; height: 2px; background: repeating-linear-gradient(90deg, #92003B 0 5px, transparent 5px 9px); }
.pwel-zo__wire img { width: 42px; height: 42px; padding: 7px; border-radius: 12px; background: #F3F7F9; border: 1px solid #E2E8F0; }
.pwel-zo__c h3 { margin: 0 0 6px; font: 700 18px/1.3 var(--f-display); color: #082238; }
.pwel-zo__c p { margin: 0; font-size: 15px; line-height: 1.6; color: #475569; }
.pwel-zo__c a { color: #0A6FA8; }

/* ---------- pricing ---------- */
.pwel-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 34px; align-items: stretch; }
.pwel-plan { position: relative; padding: 22px 18px 18px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; }
.pwel-plan.is-pick { border: 2px solid #92003B; box-shadow: 0 24px 50px -36px rgba(146,0,59,.6); }
.pwel-plan__tag { position: absolute; left: 16px; top: -12px; margin: 0; padding: 5px 10px; border-radius: 999px; background: #92003B; color: #fff; font: 700 11px/1 var(--f-body); }
.pwel-plan__n { margin: 0; font: 700 17px/1.2 var(--f-display); color: #082238; }
.pwel-plan__p { margin: 10px 0 0; font: 500 14px/1 var(--f-body); color: #64748B; }
.pwel-plan__p b { font: 800 34px/1 var(--f-display); color: #082238; letter-spacing: -.02em; }
.pwel-plan__s { margin: 6px 0 14px; font: 600 13.5px/1.2 var(--f-body); color: #92003B; }
.pwel-plan ul { display: grid; gap: 7px; margin: 0; padding: 14px 0 0; list-style: none; border-top: 1px solid #EEF2F6; }
.pwel-plan li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.4; color: #334155; }
.pwel-plan li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 10px; height: 6px; border-left: 2px solid #2F7D4A; border-bottom: 2px solid #2F7D4A; transform: rotate(-45deg); }
.pwel-plan li.n { color: #94A3B8; text-decoration: line-through; }
.pwel-plan li.n::before { width: 10px; height: 0; top: 8px; border-left: 0; border-bottom: 2px solid #CBD5E1; transform: none; }
.pwel-price__fine { margin: 16px 0 0; font-size: 14px; color: #64748B; }
.pwel-price__ours { max-width: 880px; margin: 18px 0 0; padding: 16px 20px; border-radius: 14px; background: #FDF2F6; border: 1px solid #F5CFDD; font-size: 15.5px; line-height: 1.6; color: #334155; }
.pwel-price__ours b { color: #92003B; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .pwel-hero .pwel-hero__grid, .pwel-map__grid { grid-template-columns: 1fr; }
  .pwel-ed { max-width: 600px; }
  .pwel-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .pwel-zo__cards { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .pwel-fit__grid, .pwel-story__grid, .pwel-svc__list { grid-template-columns: 1fr; }
  .pwel-meter { position: static; }
}
@media (max-width: 640px) {
  .pwel-ed__body { grid-template-columns: 74px minmax(0, 1fr); min-height: 0; }
  .pwel-ed__panel { padding: 10px 6px; gap: 6px; }
  .pwel-ed__panel li { font-size: 9.5px; padding: 7px 2px 6px; }
  .pwel-ed__panel svg { width: 17px; height: 17px; }
  .pwel-wd--h b { font-size: 16px; }
  .pwel-wd--i { min-height: 70px; }
  .pwel-ed__map ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pwel-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pwel-plans { grid-template-columns: 1fr; }
  .pwel-svc__list li { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .pwel-svc__n { width: 42px; height: 42px; font-size: 15px; border-radius: 11px; }
  .pwel-meter { padding: 16px; }
  .pwel-meter__tog button { padding: 8px 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .pwel-wd, .pwel-ed__panel li, .pwel-ed__map li, .pwel-bars__track i, .pwel-bars b, .pwel-fixes li { transition: none !important; }
  .pwel-pg__s.is-new { animation: none; }
}