/* Shopify Shop Pay page only. Loaded via `extra: crm, p-shopify-shop-pay`. Every class is scoped with .pssp- */

/* ---------- hero: phone with the Shop Pay sheet ---------- */
.pssp-hero .pssp-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.pssp-hero .crm-sub { max-width: 44ch; }
.pssp-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.pssp-chips li { display: grid; gap: 2px; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid #E1DBFB; box-shadow: 0 12px 24px -20px rgba(42,20,120,.55); }
.pssp-chips b { font: 800 16px/1.15 var(--f-display); color: #3B1FA8; letter-spacing: -.01em; }
.pssp-chips span { font: 500 12.5px/1.3 var(--f-body); color: #64748B; }
.pssp-badge img { padding: 6px; border-radius: 10px; background: #fff; border: 1px solid #E2E8F0; }

.pssp-stage { position: relative; margin: 0; padding: 18px 0 40px; display: grid; justify-items: center; }
.pssp-stage::before { content: ""; position: absolute; inset: 6% 4% 14%; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(90,49,244,.22), rgba(0,163,217,.10) 60%, transparent); }
.pssp-phone { position: relative; z-index: 1; width: min(300px, 78vw); aspect-ratio: 9 / 18.5; border-radius: 40px; padding: 12px; background: #0B1220; box-shadow: 0 50px 90px -40px rgba(8,34,56,.75), inset 0 0 0 2px #2A3447; overflow: hidden; }
.pssp-phone__notch { position: absolute; z-index: 4; top: 12px; left: 50%; width: 86px; height: 20px; margin-left: -43px; border-radius: 0 0 14px 14px; background: #0B1220; }
.pssp-phone__shop { height: 100%; border-radius: 30px; padding: 38px 16px 16px; background: #FBFAF7; display: flex; flex-direction: column; gap: 12px; }
.pssp-phone__brand { margin: 0; font: 800 15px/1 var(--f-display); color: #1F2937; letter-spacing: .02em; text-align: center; }
.pssp-cartline { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid #ECE8DF; }
.pssp-cartline i { width: 44px; height: 44px; border-radius: 10px; background: repeating-linear-gradient(135deg, #E9DFC9 0 6px, #F3ECDD 6px 12px); }
.pssp-cartline span { display: grid; gap: 2px; font: 500 11px/1.3 var(--f-body); color: #6B7280; }
.pssp-cartline b { font: 700 12.5px/1.25 var(--f-body); color: #111827; }
.pssp-cartline em { font: 700 12.5px/1 var(--f-body); font-style: normal; color: #111827; }
.pssp-phone__total { display: flex; justify-content: space-between; margin: 2px 4px 0; font: 600 12.5px/1 var(--f-body); color: #374151; }
.pssp-phone__sp { display: block; padding: 13px; border-radius: 12px; background: #5A31F4; color: #fff; text-align: center; font: 800 15px/1 var(--f-display); letter-spacing: -.01em; box-shadow: 0 10px 20px -12px rgba(90,49,244,.9); transition: transform 200ms; }
.pssp-phone__or { display: block; text-align: center; font: 500 11px/1.35 var(--f-body); color: #4B5563; }
.pssp-phone__or b { color: #3B1FA8; }

.pssp-sheet { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 12px; padding: 10px 16px 18px; border-radius: 26px 26px 30px 30px; background: #fff; box-shadow: 0 -20px 40px -18px rgba(8,34,56,.45); transform: translateY(105%); transition: transform 600ms cubic-bezier(.2,.8,.2,1); display: grid; gap: 10px; }
.pssp-sheet__grip { justify-self: center; width: 40px; height: 4px; border-radius: 4px; background: #D1D5DB; }
.pssp-sheet__head { display: flex; align-items: center; justify-content: space-between; margin: 0; }
.pssp-sheet__head b { font: 800 16px/1 var(--f-display); color: #5A31F4; }
.pssp-sheet__head em { padding: 3px 8px; border-radius: 999px; background: #F1EDFE; font: 700 10px/1.2 var(--f-body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: #5A31F4; }
.pssp-sheet__code p { margin: 0 0 6px; font: 500 11.5px/1.3 var(--f-body); color: #6B7280; }
.pssp-otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.pssp-otp i { display: grid; place-items: center; height: 30px; border-radius: 8px; border: 1.5px solid #E5E7EB; font: 700 14px/1 var(--f-display); font-style: normal; color: transparent; transition: color 200ms, border-color 200ms; }
.pssp-sheet__saved { margin: 0; display: grid; gap: 6px; opacity: .25; transition: opacity 400ms; }
.pssp-sheet__saved div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 10px; background: #F8F7FE; font: 500 11.5px/1.3 var(--f-body); }
.pssp-sheet__saved dt { color: #6B7280; }
.pssp-sheet__saved dd { margin: 0; color: #111827; text-align: right; }
.pssp-sheet__pay { display: block; padding: 12px; border-radius: 12px; background: #5A31F4; color: #fff; text-align: center; font: 700 14px/1 var(--f-body); transition: transform 160ms, background-color 300ms; }
.pssp-sheet__done { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; height: 0; overflow: hidden; font: 700 13px/1 var(--f-body); color: #0D7A5F; transition: height 300ms; }
.pssp-sheet__done svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: #13A36F; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* hero states set by JS (s1 sheet up, s2 code typed, s3 details, s4 paid) */
.pssp-stage.s1 .pssp-sheet, .pssp-stage.s2 .pssp-sheet, .pssp-stage.s3 .pssp-sheet, .pssp-stage.s4 .pssp-sheet { transform: none; }
.pssp-stage.s1 .pssp-phone__sp { transform: scale(.96); }
.pssp-stage.s2 .pssp-otp i, .pssp-stage.s3 .pssp-otp i, .pssp-stage.s4 .pssp-otp i { color: #111827; border-color: #5A31F4; }
.pssp-stage.s3 .pssp-sheet__saved, .pssp-stage.s4 .pssp-sheet__saved { opacity: 1; }
.pssp-stage.s4 .pssp-sheet__pay { background: #13A36F; }
.pssp-stage.s4 .pssp-sheet__done { height: 20px; }

.pssp-tags { position: absolute; z-index: 2; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.pssp-tags li { position: absolute; display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 14px; background: #fff; border: 1px solid #E1DBFB; box-shadow: 0 18px 30px -18px rgba(42,20,120,.6); font: 500 12px/1.2 var(--f-body); color: #64748B; opacity: 0; transform: translateY(10px); transition: opacity 400ms, transform 400ms; }
.pssp-tags li b { color: #0F172A; font-weight: 700; }
.pssp-tags li[data-pssp-tag="1"] { left: 0; top: 34%; }
.pssp-tags li[data-pssp-tag="2"] { right: 0; top: 52%; }
.pssp-tags li[data-pssp-tag="3"] { left: 4%; bottom: 18%; }
.pssp-tags li.is-on { opacity: 1; transform: none; }
.pssp-stage__cap { position: relative; z-index: 2; margin-top: 16px; font: 500 13px/1.4 var(--f-body); color: #64748B; text-align: center; }
.pssp-stage__cap span { margin-right: 8px; padding: 3px 8px; border-radius: 999px; background: #EEF2F7; font: 700 10.5px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #475569; }

/* ---------- fit ---------- */
.pssp-fit__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; margin-top: 34px; }
.pssp-fit__col { padding: 24px; border-radius: 22px; }
.pssp-fit__col h3 { margin: 0 0 14px; font: 700 19px/1.2 var(--f-display); color: #082238; }
.pssp-fit__col--yes { background: #F4F1FE; border: 1px solid #E1DBFB; }
.pssp-fit__col--no { background: #FBF5EE; border: 1px solid #F0DECB; }
.pssp-fit__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.pssp-fit__col--yes ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pssp-fit__col li { padding: 16px; border-radius: 14px; background: #fff; box-shadow: 0 10px 22px -20px rgba(15,31,74,.6); border-top: 3px solid #5A31F4; }
.pssp-fit__col--no li { border-top-color: #D9622B; }
.pssp-fit__col li b { display: block; font: 700 15.5px/1.3 var(--f-display); color: #0F172A; }
.pssp-fit__col li span { display: block; margin-top: 5px; font-size: 14.5px; line-height: 1.55; color: #475569; }
.pssp-fit__col a { color: #0A6FA8; font-weight: 600; }

/* ---------- services: lettered rows ---------- */
.pssp-svc__list { margin: 34px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.pssp-svc__list li { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 240px); gap: 20px; align-items: center; padding: 20px 22px; border-radius: 20px; background: #fff; border: 1px solid #E2E8F0; transition: border-color 250ms, transform 250ms; }
.pssp-svc__list li:hover { border-color: var(--c); transform: translateX(4px); }
.pssp-svc__n { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--bg); color: var(--c); font: 800 22px/1 var(--f-display); }
.pssp-svc__list h3 { margin: 0; font: 700 18px/1.3 var(--f-display); color: #082238; }
.pssp-svc__list p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: #475569; }
.pssp-svc__list .pssp-svc__tag { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--bg); font: 600 13px/1.4 var(--f-body); color: var(--c); }
.pssp-svc__tag a { color: inherit; }

/* ---------- story: split-screen race ---------- */
.pssp-race__box { margin-top: 32px; padding: 22px; border-radius: 24px; background: #F3F7F9; border: 1px solid #E2E8F0; }
.pssp-race__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 18px; }
.pssp-race__go { padding: 12px 20px; border: 0; border-radius: 999px; background: #FFB81C; color: #082238; font: 700 14.5px/1 var(--f-body); cursor: pointer; transition: background-color 200ms; }
.pssp-race__go:hover { background: #F0A400; }
.pssp-race__go:focus-visible { outline: 3px solid #5A31F4; outline-offset: 3px; }
.pssp-race__say { margin: 0; font: 600 14.5px/1.4 var(--f-body); color: #082238; }
.pssp-race__lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pssp-lane { padding: 18px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; }
.pssp-lane--sp { border-top: 4px solid #5A31F4; }
.pssp-lane--guest { border-top: 4px solid #94A3B8; }
.pssp-lane__h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 14px; }
.pssp-lane__h b { font: 700 16px/1.3 var(--f-display); color: #082238; }
.pssp-lane__h span { font: 600 12.5px/1 var(--f-body); color: #64748B; white-space: nowrap; }
.pssp-lane__h output { display: inline-block; min-width: 30px; margin-left: 4px; padding: 4px 8px; border-radius: 999px; background: #EEF2F7; font: 800 14px/1 var(--f-display); color: #082238; text-align: center; }
.pssp-lane--sp .pssp-lane__h output { background: #F1EDFE; color: #3B1FA8; }
.pssp-lane__steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pssp-lane__steps li { position: relative; padding: 10px 12px 10px 40px; border-radius: 12px; border: 1px solid #EEF2F7; background: #FAFBFC; transition: background-color 300ms, border-color 300ms, opacity 300ms; }
.pssp-lane__steps li::before { content: ""; position: absolute; left: 12px; top: 13px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #CBD5E1; background: #fff; transition: background-color 300ms, border-color 300ms; }
.pssp-lane__steps b { display: block; font: 600 14px/1.3 var(--f-body); color: #0F172A; }
.pssp-lane__steps small { display: block; margin-top: 2px; font-size: 12.5px; color: #64748B; }
.pssp-race__box.is-run .pssp-lane__steps li { opacity: .45; }
.pssp-race__box.is-run .pssp-lane__steps li.is-done { opacity: 1; background: #fff; border-color: #D9E2EC; }
.pssp-lane--sp .pssp-lane__steps li.is-done::before { background: #5A31F4; border-color: #5A31F4; }
.pssp-lane--guest .pssp-lane__steps li.is-done::before { background: #64748B; border-color: #64748B; }
.pssp-lane__steps li.is-done.is-end { background: #ECFDF5; border-color: #A7F3D0; }
.pssp-lane__steps li.is-done.is-end::before { background: #13A36F; border-color: #13A36F; }
.pssp-race__note { margin: 14px 0 0; font-size: 13px; color: #64748B; }
.pssp-race__after { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.pssp-race__after p { margin: 0; padding: 18px 20px; border-radius: 18px; border: 1px dashed #CBD5E1; font-size: 15px; line-height: 1.6; color: #475569; }
.pssp-race__after b { color: #082238; }
.pssp-race__after a { color: #0A6FA8; font-weight: 600; }

/* ---------- interactive: installments slider (dark band) ---------- */
.pssp-inst__box { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; margin-top: 34px; }
.pssp-inst__in { display: grid; gap: 20px; align-content: start; padding: 24px; border-radius: 22px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.pssp-inst__presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pssp-inst__presets span { font: 700 11px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #9FC3DA; }
.pssp-inst__presets button { padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.24); background: transparent; color: #E2EEF6; font: 600 13px/1 var(--f-body); cursor: pointer; transition: background-color 200ms, border-color 200ms; }
.pssp-inst__presets button:hover, .pssp-inst__presets button.is-on { background: #FFB81C; border-color: #FFB81C; color: #082238; }
.pssp-inst__sl { display: grid; gap: 10px; }
.pssp-inst__sl > span { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 600 14px/1.3 var(--f-body); color: #E2EEF6; }
.pssp-inst__sl b { font: 800 24px/1 var(--f-display); color: #fff; }
.pssp-inst__sl small { font-size: 12.5px; color: #9FC3DA; }
.pssp-inst__sl input { width: 100%; accent-color: #FFB81C; }
.pssp-seg { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pssp-seg legend { width: 100%; margin-bottom: 8px; padding: 0; font: 600 13.5px/1 var(--f-body); color: #E2EEF6; }
.pssp-seg label { position: relative; }
.pssp-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pssp-seg span { display: inline-block; padding: 9px 13px; border-radius: 10px; border: 1px solid rgba(255,255,255,.22); font: 600 13px/1 var(--f-body); color: #C9DCEA; transition: background-color 200ms, color 200ms; }
.pssp-seg input:checked + span { background: #fff; color: #082238; border-color: #fff; }
.pssp-seg input:focus-visible + span { outline: 3px solid #FFB81C; outline-offset: 2px; }
.pssp-inst__out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; }
.pssp-plan { padding: 20px; border-radius: 20px; background: #fff; color: #334155; transition: opacity 300ms, filter 300ms; }
.pssp-plan.is-off { opacity: .45; filter: grayscale(1); }
.pssp-plan--you { grid-column: 1 / -1; background: linear-gradient(135deg, #FFF8E6, #fff); border: 1px solid #FFE0A0; }
.pssp-plan__k { margin: 0; font: 700 11.5px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #5A31F4; }
.pssp-plan__k span { margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: #F1EDFE; letter-spacing: .04em; }
.pssp-plan--you .pssp-plan__k { color: #8A5B00; }
.pssp-plan__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 10px 0 6px; }
.pssp-plan__big b { font: 800 30px/1 var(--f-display); color: #082238; letter-spacing: -.02em; }
.pssp-plan__big span { font: 500 13.5px/1.3 var(--f-body); color: #64748B; }
.pssp-plan__dots { display: flex; gap: 6px; margin: 4px 0 10px; padding: 0; list-style: none; }
.pssp-plan__dots li { flex: 1; height: 8px; border-radius: 4px; background: #5A31F4; }
.pssp-plan__dots li + li { opacity: .45; }
.pssp-plan__lines { margin: 8px 0 10px; display: grid; gap: 4px; }
.pssp-plan__lines div { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid #EEF2F7; font-size: 13.5px; }
.pssp-plan__lines dt { color: #64748B; } .pssp-plan__lines dd { margin: 0; font-weight: 700; color: #0F172A; }
.pssp-plan__why { margin: 0; font-size: 13.5px; line-height: 1.5; color: #475569; }
.pssp-inst__say { grid-column: 1 / -1; margin: 0; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.08); font: 600 14.5px/1.5 var(--f-body); color: #fff; }
.pssp-inst__fine { margin: 18px 0 0; max-width: 80ch; font-size: 13px; line-height: 1.55; color: #9FC3DA; }

/* ---------- Zoho rows ---------- */
.pssp-zoho__rows { display: grid; gap: 14px; margin-top: 32px; }
.pssp-zrow { display: grid; grid-template-columns: 48px minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: center; padding: 20px 22px; border-radius: 20px; background: #fff; border: 1px solid #E2E8F0; }
.pssp-zrow__n { margin: 0; font: 800 26px/1 var(--f-display); color: #CBD5E1; }
.pssp-zrow__flow { display: flex; align-items: center; gap: 10px; }
.pssp-zrow__flow span { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #F3F7F9; font: 600 13.5px/1.3 var(--f-body); color: #082238; }
.pssp-zrow__flow img { flex: none; }
.pssp-zrow__flow i { flex: none; width: 34px; height: 2px; background: linear-gradient(90deg, #5A31F4, #00A3D9); position: relative; }
.pssp-zrow__flow i::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: #00A3D9; border-right: 0; }
.pssp-zrow > p:last-child { margin: 0; font-size: 14.5px; line-height: 1.6; color: #475569; }
.pssp-zrow a, .pssp-zoho__more a { color: #0A6FA8; font-weight: 600; }
.pssp-zoho__more { margin: 20px 0 0; font-size: 15px; line-height: 1.6; color: #475569; }

/* ---------- pricing ---------- */
.pssp-rates th small { display: block; margin-top: 3px; font: 500 12px/1.35 var(--f-body); color: #64748B; }
.pssp-rates a { color: #0A6FA8; font-weight: 600; }
.pssp-price__notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.pssp-price__notes p { margin: 0; padding: 18px 20px; border-radius: 18px; background: #F4F1FE; font-size: 15px; line-height: 1.6; color: #475569; }
.pssp-price__notes p:last-child { background: #FFF8E6; }
.pssp-price__notes b { color: #082238; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .pssp-inst__box { grid-template-columns: 1fr; }
  .pssp-svc__list li { grid-template-columns: 56px minmax(0, 1fr); }
  .pssp-svc__list .pssp-svc__tag { grid-column: 2; justify-self: start; }
}
@media (max-width: 900px) {
  .pssp-hero .pssp-hero__grid { grid-template-columns: 1fr; }
  .pssp-fit__grid, .pssp-race__after, .pssp-price__notes { grid-template-columns: 1fr; }
  .pssp-zrow { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 640px) {
  .pssp-fit__col--yes ul, .pssp-race__lanes, .pssp-inst__out { grid-template-columns: 1fr; }
  .pssp-fit__col, .pssp-race__box, .pssp-inst__in { padding: 16px; }
  .pssp-svc__list li { grid-template-columns: 1fr; gap: 12px; padding: 18px; }
  .pssp-svc__list .pssp-svc__tag { grid-column: auto; }
  .pssp-zrow__flow { flex-direction: column; align-items: stretch; }
  .pssp-zrow__flow i { width: 2px; height: 18px; margin: 0 auto; background: linear-gradient(180deg, #5A31F4, #00A3D9); }
  .pssp-zrow__flow i::after { right: -4px; top: auto; bottom: -1px; border: 5px solid transparent; border-top-color: #00A3D9; border-bottom: 0; }
  .pssp-tags li { font-size: 11px; padding: 7px 10px; }
  .pssp-tags li[data-pssp-tag="2"] { right: -2px; }
  .pssp-plan__big b { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .pssp-sheet, .pssp-tags li, .pssp-lane__steps li, .pssp-plan, .pssp-svc__list li, .pssp-otp i, .pssp-sheet__saved, .pssp-sheet__done { transition: none !important; }
}