/* Shopify headless page only. Loaded via `extra: crm, p-shopify-headless`. Every class is scoped with .pshl- */

/* ---------- hero: storefront | threads | code ---------- */
.pshl-hero .pshl-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.pshl-sub { margin: 14px 0 0; max-width: 44ch; font: 600 19px/1.45 var(--f-display); color: #0F2A44; }
.pshl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; max-width: 600px; }
.pshl-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 8px; border-radius: 999px; background: #fff; border: 1px solid #D7E6E1; font: 600 13.5px/1.25 var(--f-body); color: #0B2B26; box-shadow: 0 10px 20px -16px rgba(8,34,56,.5); }
.pshl-chips img { flex: none; width: 24px; height: 24px; padding: 3px; border-radius: 50%; background: #EAF5F1; }
.pshl-badge img { padding: 4px; border-radius: 10px; background: #fff; border: 1px solid #E2E8F0; }

.pshl-split { position: relative; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.12fr); align-items: center; padding: 20px 0; }
.pshl-shop { position: relative; z-index: 2; border-radius: 16px; background: #fff; border: 1px solid #DCE5EA; box-shadow: 0 40px 80px -48px rgba(8,34,56,.6); overflow: hidden; }
.pshl-shop__bar { display: flex; align-items: center; gap: 5px; padding: 9px 12px; background: #F1F5F7; border-bottom: 1px solid #E2E8F0; font: 500 10.5px/1 var(--f-body); color: #64748B; }
.pshl-shop__bar i { width: 7px; height: 7px; border-radius: 50%; background: #CBD5E1; }
.pshl-shop__bar span { margin-left: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pshl-shop__body { padding: 14px; display: grid; gap: 12px; }
.pshl-shop__img { border-radius: 12px; background: linear-gradient(140deg, #E6F3EF, #D3E9F4); aspect-ratio: 4 / 3; display: grid; place-items: center; }
.pshl-shop__img svg { width: 62%; fill: #2F6B5E; stroke: #E6F3EF; stroke-width: 2.5; stroke-linecap: round; }
.pshl-shop__img svg path:first-of-type { fill: none; stroke: #2F6B5E; stroke-width: 4; }
.pshl-shop__info p { margin: 0 0 7px; }
.pshl-shop__t { font: 700 16px/1.2 var(--f-display); color: #082238; }
.pshl-shop__p { font: 700 15px/1 var(--f-body); color: #0F766E; }
.pshl-shop__v { display: flex; gap: 5px; }
.pshl-shop__v b { padding: 4px 8px; border-radius: 6px; border: 1px solid #CBD5E1; font: 600 11px/1 var(--f-body); color: #334155; }
.pshl-shop__v b:first-child { border-color: #082238; }
.pshl-shop__s { font: 500 11.5px/1.3 var(--f-body); color: #15803D; }
.pshl-shop__btn { display: block; padding: 9px; border-radius: 9px; background: #082238; color: #fff; text-align: center; font: 600 12.5px/1 var(--f-body); }
.pshl-split [data-f] { transition: box-shadow 350ms, background-color 350ms; border-radius: 6px; }
.pshl-split [data-f].is-hot { box-shadow: 0 0 0 2px #FFB81C, 0 0 0 6px rgba(255,184,28,.22); }

.pshl-tag { position: absolute; left: 12px; bottom: -1px; margin: 0; transform: translateY(50%); display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; border-radius: 999px; background: #fff; border: 1px solid #DCE5EA; font: 700 11px/1 var(--f-body); color: #082238; box-shadow: 0 8px 16px -10px rgba(8,34,56,.5); }
.pshl-tag em { font-style: normal; font-weight: 600; color: #0E7490; }
.pshl-shop .pshl-tag, .pshl-code .pshl-tag { position: static; transform: none; margin: 0 12px 12px; }
.pshl-tag--dark { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #E2F1F8; }
.pshl-tag--dark em { color: #7FE3C2; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.pshl-threads { position: relative; z-index: 1; width: 100%; height: 70%; overflow: visible; }
.pshl-threads path { fill: none; stroke: #00A3D9; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 4 6; opacity: .45; animation: pshl-flow 1.6s linear infinite; }
.pshl-threads path.is-hot { stroke: #FFB81C; opacity: 1; stroke-width: 2.4; }
@keyframes pshl-flow { to { stroke-dashoffset: -20; } }

.pshl-code { position: relative; z-index: 2; border-radius: 16px; background: #0A1D33; border: 1px solid #16324F; box-shadow: 0 40px 80px -40px rgba(4,16,30,.8); overflow: hidden; }
.pshl-code__bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.08); font: 600 11px/1 var(--f-body); color: #9FC0D8; }
.pshl-code__bar img { width: 18px; height: 18px; padding: 2px; border-radius: 5px; background: #fff; }
.pshl-code__pre { margin: 0; padding: 12px 12px 14px; overflow-x: auto; font: 500 10.5px/1.75 ui-monospace, SFMono-Regular, Menlo, monospace; color: #C7D6E6; white-space: pre; }
.pshl-code__pre .k { color: #F98BB8; }
.pshl-code__pre .l { display: inline-block; min-width: 100%; border-radius: 4px; transition: background-color 350ms, color 350ms; }
.pshl-code__pre .l.is-hot { background: rgba(255,184,28,.18); color: #FFE2A0; }

/* ---------- fit ---------- */
.pshl-fit__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; margin-top: 36px; }
.pshl-fit__col { padding: 24px; border-radius: 20px; }
.pshl-fit__col h3 { margin: 0 0 14px; font: 700 18px/1.3 var(--f-display); color: #082238; }
.pshl-fit__col--yes { background: linear-gradient(160deg, #EAF6F3, #F3F8FB); border: 1px solid #CDE7DF; }
.pshl-fit__col--no { background: #FBF6EE; border: 1px solid #F0E1C8; }
.pshl-fit__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pshl-fit__col li { padding: 13px 15px 13px 18px; border-radius: 12px; background: #fff; border-left: 4px solid #0F9F87; box-shadow: 0 10px 22px -20px rgba(8,34,56,.6); }
.pshl-fit__col--no li { border-left-color: #D9822B; }
.pshl-fit__col b { display: block; font: 700 15.5px/1.3 var(--f-display); color: #082238; }
.pshl-fit__col span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: #475569; }

/* ---------- services: numbered rows ---------- */
.pshl-svc__list { margin: 36px 0 0; padding: 0; list-style: none; border-top: 1px solid #E2E8F0; }
.pshl-svc__item { display: grid; grid-template-columns: 72px minmax(0, 1fr) 170px; gap: 22px; align-items: center; padding: 22px 0; border-bottom: 1px solid #E2E8F0; transition: background-color 250ms; }
.pshl-svc__item:hover { background: linear-gradient(90deg, rgba(0,163,217,.05), transparent 70%); }
.pshl-svc__n { font: 800 34px/1 var(--f-display); letter-spacing: -.03em; background: linear-gradient(135deg, #1D3F8F, #00A3D9 60%, #00B2A9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pshl-svc__item h3 { margin: 0 0 6px; font: 700 19px/1.3 var(--f-display); color: #082238; }
.pshl-svc__item p { margin: 0; font-size: 15px; line-height: 1.55; color: #475569; }
.pshl-svc__item .pshl-svc__k { justify-self: end; padding: 6px 11px; border-radius: 999px; background: #EEF5F9; font: 600 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: #0E5A7A; text-align: center; }

/* ---------- story: forking road ---------- */
.pshl-road__map { margin-top: 38px; }
.pshl-road__trunk { position: relative; max-width: 640px; margin: 0 auto; padding: 0; list-style: none; display: grid; gap: 18px; }
.pshl-road__trunk::before { content: ""; position: absolute; left: 26px; top: 10px; bottom: -20px; width: 14px; margin-left: -7px; border-radius: 7px; background: #CBD5E1; background-image: repeating-linear-gradient(180deg, transparent 0 10px, #fff 10px 20px); background-size: 2px 100%; background-position: center; background-repeat: no-repeat; background-color: #94A3B8; }
.pshl-road__stop { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; }
.pshl-road__pin { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #082238; color: #FFB81C; font: 800 19px/1 var(--f-display); box-shadow: 0 0 0 6px #fff; transition: transform 400ms; }
.pshl-road__stop.is-in .pshl-road__pin { transform: scale(1.06); }
.pshl-road__stop h3 { margin: 4px 0 6px; font: 700 18px/1.3 var(--f-display); color: #082238; }
.pshl-road__stop p { margin: 0; font-size: 15px; line-height: 1.55; color: #475569; }
.pshl-road__fork { max-width: 640px; margin: 18px auto 0; height: 80px; }
.pshl-road__fork svg { width: 100%; height: 100%; overflow: visible; }
.pshl-road__fork path { fill: none; stroke-width: 12; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pshl-road__fork .a { stroke: #9ACFC4; }
.pshl-road__fork .b { stroke: #F6C35A; }
.pshl-road__branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 980px; margin: 0 auto; }
.pshl-road__br { padding: 24px; border-radius: 20px; background: #fff; border: 1px solid #E2E8F0; border-top: 6px solid #3FA58F; box-shadow: 0 24px 46px -36px rgba(8,34,56,.6); }
.pshl-road__br--hyd { border-top-color: #F0A400; }
.pshl-road__lab { margin: 0 0 6px; font: 700 12px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #0F766E; }
.pshl-road__br--hyd .pshl-road__lab { color: #B45309; }
.pshl-road__br h3 { margin: 0 0 12px; font: 700 20px/1.3 var(--f-display); color: #082238; }
.pshl-road__br ul { margin: 0 0 14px; padding: 0 0 0 18px; display: grid; gap: 6px; font-size: 15px; line-height: 1.5; color: #334155; }
.pshl-road__out { margin: 0; padding: 12px 14px; border-radius: 12px; background: #F3F7F9; font-size: 14.5px; line-height: 1.5; color: #1E293B; }
.pshl-road__end { max-width: 760px; margin: 24px auto 0; text-align: center; font-size: 15.5px; line-height: 1.6; color: #334155; }

/* ---------- interactive: headless scorer (dark band) ---------- */
.pshl-sc__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; margin-top: 34px; align-items: start; }
.pshl-sc__qs { display: grid; gap: 12px; }
.pshl-sc__q { margin: 0; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); min-width: 0; }
.pshl-sc__q legend { float: left; width: 100%; margin: 0 0 10px; padding: 0; font: 600 15px/1.4 var(--f-display); color: #fff; }
.pshl-sc__opts { clear: both; display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 11px; background: rgba(0,0,0,.22); }
.pshl-sc__opts label { position: relative; flex: 1 1 auto; cursor: pointer; }
.pshl-sc__opts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pshl-sc__opts span { display: block; padding: 8px 10px; border-radius: 8px; text-align: center; font: 600 13.5px/1.25 var(--f-body); color: #C9D6E8; transition: background-color 200ms, color 200ms; }
.pshl-sc__opts input:checked + span { background: #fff; color: #082238; }
.pshl-sc__opts input:focus-visible + span { outline: 2px solid #5FD3F3; outline-offset: 2px; }
.pshl-sc__out { position: sticky; top: 100px; padding: 22px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); }
.pshl-sc__lab { margin: 0 0 14px; font: 700 12px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #9FC0D8; }
.pshl-sc__lab em { margin-left: 6px; font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; color: #7F9DB8; }
.pshl-sc__meter { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font: 600 12px/1 var(--f-body); color: #9FC0D8; }
.pshl-sc__bar { position: relative; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #3FB97A, #8DB7C9 50%, #FFB81C); }
.pshl-sc__bar i { --p: 30%; position: absolute; top: 50%; left: var(--p); width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; border: 4px solid #082238; box-shadow: 0 0 0 3px rgba(255,255,255,.35); transition: left 500ms cubic-bezier(.3,1.3,.5,1); }
.pshl-sc__verdict { margin: 20px 0 6px; font: 800 26px/1.15 var(--f-display); letter-spacing: -.02em; color: #fff; }
.pshl-sc__why { margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: #D5E4EF; }
.pshl-sc__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pshl-sc__h { margin: 0 0 6px; font: 700 11.5px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #FFD27A; }
.pshl-sc__lists > div + div .pshl-sc__h { color: #8EE0B8; }
.pshl-sc__lists ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.pshl-sc__lists li { padding: 7px 9px; border-radius: 8px; background: rgba(0,0,0,.2); font-size: 13px; line-height: 1.4; color: #E6F0F7; }
.pshl-sc__lists li.is-none { background: none; padding-left: 0; color: #7F9DB8; }
.pshl-sc__reset { margin-top: 16px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: none; color: #fff; font: 600 13px/1 var(--f-body); cursor: pointer; }
.pshl-sc__reset:hover { background: rgba(255,255,255,.1); }
.pshl-sc__reset:focus-visible { outline: 2px solid #5FD3F3; outline-offset: 2px; }
.pshl-sc__note { margin: 22px 0 0; max-width: 80ch; font-size: 13.5px; line-height: 1.6; color: #8FB0C9; }

/* ---------- Zoho ---------- */
.pshl-zo__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.pshl-zo__card { padding: 22px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 16px 34px -30px rgba(8,34,56,.6); }
.pshl-zo__flow { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.pshl-zo__flow img { width: 40px; height: 40px; padding: 7px; border-radius: 11px; background: #F3F7F9; border: 1px solid #E2E8F0; }
.pshl-zo__flow i { flex: 0 1 34px; height: 2px; background: repeating-linear-gradient(90deg, #00A3D9 0 5px, transparent 5px 9px); }
.pshl-zo__card h3 { margin: 0 0 8px; font: 700 18px/1.3 var(--f-display); color: #082238; }
.pshl-zo__card p { margin: 0; font-size: 15px; line-height: 1.55; color: #475569; }
.pshl-zo__card a, .pshl-zo__more a { color: #0A6FA8; font-weight: 600; }
.pshl-zo__more { margin: 24px 0 0; font-size: 15.5px; line-height: 1.6; color: #334155; }

/* ---------- pricing ---------- */
.pshl-price__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.pshl-price__card { padding: 24px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; }
.pshl-price__card--ours { background: linear-gradient(150deg, #082238, #0A3A63); border-color: transparent; color: #D5E4EF; }
.pshl-price__tag { margin: 0 0 6px; font: 700 12px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #0E7490; }
.pshl-price__card--ours .pshl-price__tag { color: #FFB81C; }
.pshl-price__card h3 { margin: 0 0 14px; font: 700 19px/1.3 var(--f-display); color: #082238; }
.pshl-price__card--ours h3 { color: #fff; }
.pshl-price__card dl { margin: 0; display: grid; gap: 10px; }
.pshl-price__card dl div { padding-bottom: 10px; border-bottom: 1px dashed #E2E8F0; }
.pshl-price__card dt { font: 600 12.5px/1.3 var(--f-body); color: #64748B; }
.pshl-price__card dd { margin: 3px 0 0; font: 600 15px/1.45 var(--f-body); color: #082238; }
.pshl-price__card ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; font-size: 15px; line-height: 1.5; color: #334155; }
.pshl-price__card p { margin: 0; font-size: 15px; line-height: 1.6; }
.pshl-price__small { margin-top: 12px !important; font-size: 13.5px !important; color: #64748B; }

/* ---------- motion prefs + responsive ---------- */
@media (prefers-reduced-motion: reduce) {
  .pshl-threads path { animation: none; }
  .pshl-split [data-f], .pshl-code__pre .l, .pshl-sc__bar i, .pshl-road__pin { transition: none; }
}
@media (max-width: 1080px) {
  .pshl-hero .pshl-hero__grid { grid-template-columns: 1fr; }
  .pshl-split { max-width: 680px; }
  .pshl-sc__grid { grid-template-columns: 1fr; }
  .pshl-sc__out { position: static; }
  .pshl-zo__grid, .pshl-price__grid { grid-template-columns: 1fr 1fr; }
  .pshl-price__card--ours { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .pshl-fit__grid, .pshl-road__branches { grid-template-columns: 1fr; }
  .pshl-svc__item { grid-template-columns: 52px minmax(0, 1fr); }
  .pshl-svc__item .pshl-svc__k { grid-column: 2; justify-self: start; }
  .pshl-svc__n { font-size: 26px; }
  .pshl-zo__grid, .pshl-price__grid { grid-template-columns: 1fr; }
  .pshl-road__fork { display: none; }
}
@media (max-width: 560px) {
  .pshl-split { grid-template-columns: 1fr; gap: 0; }
  .pshl-threads { height: 46px; transform: rotate(90deg) scaleX(.4); }
  .pshl-sub { font-size: 17px; }
  .pshl-sc__lists { grid-template-columns: 1fr; }
  .pshl-sc__verdict { font-size: 22px; }
}