/* Headless WordPress page only. Loaded via `extra: crm, p-wordpress-headless`. Every class is scoped with .pwhl- */

/* ---------- hero: admin → GraphQL → Next.js rig ---------- */
.pwhl-hero .pwhl-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pwhl-hero .crm-sub { max-width: 46ch; }
.pwhl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; max-width: 600px; }
.pwhl-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 9px; border-radius: 10px; background: #fff; border: 1px solid #D9E3EC; font: 600 13.5px/1.25 var(--f-body); color: #0B2135; }
.pwhl-chips img { flex: none; width: 20px; height: 20px; }

.pwhl-rig { margin: 0; }
.pwhl-rig__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.18fr) 30px minmax(0, 1fr); grid-template-rows: auto auto; gap: 14px 0; align-items: center; }
.pwhl-wp { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: 36px minmax(0, 1fr); border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid #D9E3EC; box-shadow: 0 30px 50px -36px rgba(8,34,56,.55); }
.pwhl-wp__side { display: grid; align-content: start; justify-items: center; gap: 9px; padding: 10px 0; background: #1D2327; }
.pwhl-wp__side img { filter: brightness(0) invert(1); opacity: .9; }
.pwhl-wp__side i { width: 14px; height: 4px; border-radius: 2px; background: #50575E; }
.pwhl-wp__side i.is-on { background: #72AEE6; }
.pwhl-wp__main { padding: 12px 14px 12px; }
.pwhl-wp__crumb { margin: 0; font: 600 10.5px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #8A96A3; }
.pwhl-wp__title { margin: 7px 0 10px; font: 700 15px/1.25 var(--f-display); color: #0B2135; }
.pwhl-wp__field { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 7px 9px; border-radius: 8px; border: 1px solid #DCE3EA; font: 500 12px/1.2 var(--f-body); color: #50575E; }
.pwhl-wp__field b { font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #0B2135; transition: color 300ms; }
.pwhl-wp__field b.is-new { color: #21759B; }
.pwhl-wp__foot { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 0; }
.pwhl-wp__state { font: 600 11.5px/1 var(--f-body); color: #996800; }
.pwhl-wp__state.is-pub { color: #1E7F45; }
.pwhl-wp__btn { padding: 6px 12px; border-radius: 6px; background: #2271B1; color: #fff; font: 600 12px/1 var(--f-body); transition: transform 160ms, box-shadow 300ms; }
.pwhl-wp__btn.is-press { transform: scale(.94); box-shadow: 0 0 0 5px rgba(34,113,177,.25); }

.pwhl-q { grid-column: 1; grid-row: 2; border-radius: 14px; overflow: hidden; background: #0E1A2A; border: 1px solid #1E3248; box-shadow: 0 30px 50px -36px rgba(8,34,56,.7); }
.pwhl-q__bar { display: flex; align-items: center; gap: 7px; margin: 0; padding: 8px 12px; background: #13243A; font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #9DB4C9; }
.pwhl-q__code { margin: 0; padding: 10px 12px; font: 500 10.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: #7F93A8; white-space: pre; overflow: hidden; }
.pwhl-q__code span { transition: color 250ms; }
.pwhl-q__code span.is-hot { color: #F7A8DD; }
.pwhl-q__res { margin: 0; padding: 7px 12px 9px; border-top: 1px solid #1E3248; font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #4ADE80; opacity: 1; transition: opacity 300ms; }

.pwhl-thread { position: relative; grid-column: 2; height: 2px; background: repeating-linear-gradient(90deg, #9FB5C8 0 5px, transparent 5px 9px); }
.pwhl-thread--a { grid-row: 1; }
.pwhl-thread--b { grid-row: 2; }
.pwhl-thread i { position: absolute; left: 0; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #E10098; box-shadow: 0 0 0 4px rgba(225,0,152,.2); opacity: 0; }
.pwhl-thread.is-go i { animation: pwhl-zip 700ms ease-in-out forwards; }
@keyframes pwhl-zip { 0% { left: 0; opacity: 1; } 100% { left: calc(100% - 10px); opacity: 1; } }

.pwhl-br { grid-column: 3; grid-row: 1 / span 2; align-self: stretch; position: relative; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #D9E3EC; box-shadow: 0 44px 80px -46px rgba(8,34,56,.6); }
.pwhl-br__bar { display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 12px; background: #F2F5F8; border-bottom: 1px solid #E3E9EF; }
.pwhl-br__bar i { width: 8px; height: 8px; border-radius: 50%; background: #CBD5E1; }
.pwhl-br__bar span { flex: 1; min-width: 0; margin-left: 6px; padding: 4px 9px; border-radius: 6px; background: #fff; font: 500 11px/1.2 var(--f-body); color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pwhl-br__page { flex: 1; display: grid; align-content: start; gap: 12px; padding: 14px 14px 56px; transition: opacity 300ms, filter 300ms; }
.pwhl-br__nav { display: flex; align-items: center; gap: 8px; }
.pwhl-br__nav b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #0B0B0B; color: #fff; font: 800 11px/1 var(--f-display); }
.pwhl-br__nav em { width: 30px; height: 6px; border-radius: 3px; background: #E2E8F0; }
.pwhl-br__nav em:first-of-type { margin-left: auto; }
.pwhl-br__hero { height: 92px; border-radius: 10px; background: linear-gradient(135deg, #F6C28B, #E6795A 60%, #B84B3A); }
.pwhl-br__h { font: 800 17px/1.2 var(--f-display); color: #0B2135; }
.pwhl-br__price { font: 500 13px/1.3 var(--f-body); color: #475569; }
.pwhl-br__price b { display: inline-block; padding: 2px 7px; border-radius: 6px; background: #FDF2E7; color: #9A3412; font: 800 14px/1.2 var(--f-display); transition: background-color 400ms; }
.pwhl-br__price b.is-new { background: #DCFCE7; color: #166534; }
.pwhl-br__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pwhl-br__row em { height: 46px; border-radius: 8px; background: #F1F5F9; }
.pwhl-br.is-load .pwhl-br__page { opacity: .45; filter: blur(1.5px); }
.pwhl-br__toast { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; border-radius: 10px; background: #0B2135; color: #CFE3EE; font: 600 11.5px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; opacity: 0; transform: translateY(8px); transition: opacity 350ms, transform 350ms; }
.pwhl-br__toast span { padding: 3px 7px; border-radius: 5px; background: #16A34A; color: #fff; font-family: var(--f-body); }
.pwhl-br__toast.is-on { opacity: 1; transform: none; }
.pwhl-rig [data-step].is-hl { box-shadow: 0 0 0 3px rgba(225,0,152,.28), 0 30px 50px -36px rgba(8,34,56,.6); }
.pwhl-rig__cap { margin: 14px 0 0; font-size: 12.5px; color: #64748B; text-align: center; }

/* ---------- fit: yes / no panes ---------- */
.pwhl-what__split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 34px; }
.pwhl-what__pane { position: relative; padding: 24px 24px 20px; border-radius: 18px; border: 1px solid #E2E8F0; background: #fff; }
.pwhl-what__pane--yes { border-top: 4px solid #21759B; }
.pwhl-what__pane--no { border-top: 4px dashed #94A3B8; background: #F8FAFC; }
.pwhl-what__tag { display: inline-block; margin: 0 0 14px; padding: 5px 11px; border-radius: 6px; font: 700 11.5px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; background: #E6F1F8; color: #135E80; }
.pwhl-what__pane--no .pwhl-what__tag { background: #EEF2F6; color: #475569; }
.pwhl-what__pane ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.pwhl-what__pane li { padding-left: 16px; border-left: 2px solid #C7DDEB; font-size: 15px; line-height: 1.55; color: #475569; }
.pwhl-what__pane--no li { border-left-color: #D5DCE4; }
.pwhl-what__pane li b { display: block; margin-bottom: 2px; font: 700 16.5px/1.35 var(--f-display); color: #082238; }

/* ---------- services: three-layer stack ---------- */
.pwhl-svc__stack { display: grid; gap: 12px; margin-top: 34px; }
.pwhl-svc__layer { display: grid; grid-template-columns: 150px repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; border-radius: 18px; background: #EEF5FA; border: 1px solid #D5E5F0; }
.pwhl-svc__layer--mid { background: #FBEFF7; border-color: #F1D2E6; margin: 0 22px; }
.pwhl-svc__layer--fe { background: #F1F3F6; border-color: #DDE2E8; margin: 0 44px; }
.pwhl-svc__side { display: flex; flex-direction: column; justify-content: center; gap: 8px; margin: 0; padding: 0 8px; font: 700 12px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #334155; }
.pwhl-svc__layer article { padding: 18px 20px; border-radius: 13px; background: #fff; box-shadow: 0 12px 26px -24px rgba(8,34,56,.6); }
.pwhl-svc__layer h3 { margin: 0 0 6px; font: 700 17.5px/1.3 var(--f-display); color: #082238; }
.pwhl-svc__layer p { margin: 0; font-size: 15px; line-height: 1.6; color: #475569; }

/* ---------- story: stopwatch timeline ---------- */
.pwhl-tl { position: relative; margin-top: 44px; }
.pwhl-tl__rail { position: absolute; left: 0; right: 0; top: 13px; height: 4px; border-radius: 2px; background: #E2E8F0; overflow: hidden; }
.pwhl-tl__fill { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #21759B, #E10098 55%, #7C3AED); transform-origin: left; transform: scaleX(1); transition: transform 600ms ease-out; }
.pwhl-tl.is-arm .pwhl-tl__fill { transform: scaleX(var(--p, 0)); }
.pwhl-tl__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.pwhl-tl__ev { position: relative; padding-top: 42px; transition: opacity 400ms, transform 400ms; }
.pwhl-tl__ev::before { content: ""; position: absolute; left: 0; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--k); box-sizing: border-box; }
.pwhl-tl.is-arm .pwhl-tl__ev { opacity: .35; transform: translateY(8px); }
.pwhl-tl.is-arm .pwhl-tl__ev.is-on { opacity: 1; transform: none; }
.pwhl-tl__ev time { display: inline-block; padding: 3px 8px; border-radius: 6px; background: #0B2135; color: #fff; font: 700 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.pwhl-tl__ev h3 { margin: 10px 0 6px; font: 700 16.5px/1.3 var(--f-display); color: #082238; }
.pwhl-tl__ev p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #475569; }
.pwhl-tl__ev code { padding: 1px 5px; border-radius: 4px; background: #F1F5F9; color: #0B2135; font: 600 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.pwhl-story__note { margin: 28px 0 0; font-size: 14px; color: #64748B; }

/* ---------- interactive: fit scorer with dial (dark band) ---------- */
.pwhl-fit__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; margin-top: 34px; align-items: start; }
.pwhl-fit__cols { display: grid; gap: 14px; }
.pwhl-fit__set { margin: 0; padding: 14px 16px 8px; border-radius: 16px; border: 1px solid rgba(159,192,216,.22); background: rgba(255,255,255,.05); }
.pwhl-fit__set legend { padding: 0 6px; font: 700 12px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #F7A8DD; }
.pwhl-fit__set--neg legend { color: #93C5FD; }
.pwhl-sw { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 4px; border-top: 1px solid rgba(159,192,216,.12); cursor: pointer; font: 500 14.5px/1.4 var(--f-body); color: #D7E6F0; }
.pwhl-sw:first-of-type { border-top: 0; }
.pwhl-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pwhl-sw__ui { position: relative; width: 40px; height: 22px; border-radius: 11px; background: rgba(159,192,216,.3); transition: background-color 200ms; }
.pwhl-sw__ui::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 200ms; }
.pwhl-sw input:checked + .pwhl-sw__ui { background: #E10098; }
.pwhl-fit__set--neg .pwhl-sw input:checked + .pwhl-sw__ui { background: #3B82F6; }
.pwhl-sw input:checked + .pwhl-sw__ui::after { transform: translateX(18px); }
.pwhl-sw input:focus-visible + .pwhl-sw__ui { outline: 3px solid #FFB81C; outline-offset: 2px; }
.pwhl-sw input:checked ~ span:last-child { color: #fff; }
.pwhl-fit__out { padding: 20px; border-radius: 18px; background: #F7F9FC; color: #334155; box-shadow: 0 40px 70px -40px rgba(0,0,0,.6); }
.pwhl-fit__lab { display: flex; justify-content: space-between; margin: 0; font: 700 11px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #64748B; }
.pwhl-fit__lab em { font-style: normal; color: #E10098; }
.pwhl-dial { display: block; width: 100%; max-width: 300px; margin: 10px auto 0; overflow: visible; }
.pwhl-dial path { fill: none; stroke-width: 16; stroke-linecap: round; }
.pwhl-dial__z1 { stroke: #93C5FD; } .pwhl-dial__z2 { stroke: #C4B5FD; } .pwhl-dial__z3 { stroke: #F7A8DD; }
.pwhl-dial__needle { transform-box: view-box; transform-origin: 120px 120px; transform: rotate(var(--a, 0deg)); transition: transform 600ms cubic-bezier(.3,1.4,.5,1); }
.pwhl-dial__needle line { stroke: #0B2135; stroke-width: 4; stroke-linecap: round; }
.pwhl-dial__needle circle { fill: #0B2135; }
.pwhl-dial text { font: 700 11px var(--f-body); fill: #64748B; }
.pwhl-fit__verdict { margin: 10px 0 4px; font: 800 21px/1.25 var(--f-display); color: #082238; text-align: center; }
.pwhl-fit__why { margin: 0; font-size: 14.5px; line-height: 1.55; color: #475569; text-align: center; }
.pwhl-fit__own { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: #0B2135; }
.pwhl-fit__h { margin: 0 0 8px; font: 700 10.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #8FB3CA; }
.pwhl-fit__own ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pwhl-fit__own li { position: relative; padding-left: 18px; font: 500 13.5px/1.45 var(--f-body); color: #D7E6F0; }
.pwhl-fit__own li::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 2px; background: #5FD3F3; }
.pwhl-fit__own li.is-new::before { background: #F7A8DD; }
.pwhl-fit__reset { margin-top: 14px; padding: 8px 14px; border-radius: 9px; border: 1px solid #CBD5E1; background: #fff; font: 600 13px/1 var(--f-body); color: #334155; cursor: pointer; }
.pwhl-fit__reset:hover { border-color: #64748B; }
.pwhl-fit__reset:focus-visible { outline: 3px solid #FFB81C; outline-offset: 2px; }
.pwhl-fit__foot { margin: 22px 0 0; font-size: 14px; line-height: 1.55; color: #9FC0D8; }

/* ---------- Zoho ---------- */
.pwhl-zo__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.pwhl-zo__card { padding: 20px 22px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; }
.pwhl-zo__path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; padding: 10px; border-radius: 12px; background: #F3F6FA; font: 600 12px/1.3 var(--f-body); color: #334155; }
.pwhl-zo__path span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 7px; background: #fff; border: 1px solid #E2E8F0; }
.pwhl-zo__path i { width: 14px; height: 2px; background: #94A3B8; position: relative; }
.pwhl-zo__path i::after { content: ""; position: absolute; right: -1px; top: -3px; border: 4px solid transparent; border-left-color: #94A3B8; border-right: 0; }
.pwhl-zo__card h3 { margin: 0 0 6px; font: 700 18px/1.3 var(--f-display); color: #082238; }
.pwhl-zo__card p:last-child { margin: 0; font-size: 15px; line-height: 1.6; color: #475569; }

/* ---------- pricing: three bills ---------- */
.pwhl-price__bills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.pwhl-bill { position: relative; padding: 18px 20px 22px; border-radius: 14px 14px 4px 4px; background: #fff; border: 1px solid #E2E8F0; }
.pwhl-bill::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -8px; height: 8px; background: radial-gradient(circle at 6px 0, transparent 5px, #fff 5.5px) 0 0 / 12px 8px repeat-x; }
.pwhl-bill--us { background: #FFFBF0; border-color: #F3E2B3; }
.pwhl-bill--us::after { background: radial-gradient(circle at 6px 0, transparent 5px, #FFFBF0 5.5px) 0 0 / 12px 8px repeat-x; }
.pwhl-bill__h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px dashed #CBD5E1; font: 700 15px/1.2 var(--f-display); color: #082238; }
.pwhl-bill ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.pwhl-bill li { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; line-height: 1.4; color: #475569; }
.pwhl-bill li b { flex: none; font: 700 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #0B2135; text-align: right; }
.pwhl-price__ours { max-width: 880px; margin: 26px 0 0; padding: 16px 20px; border-left: 4px solid #FFB81C; border-radius: 0 12px 12px 0; background: #FFFBF0; font-size: 15.5px; line-height: 1.6; color: #334155; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .pwhl-hero .pwhl-hero__grid, .pwhl-fit__grid { grid-template-columns: 1fr; }
  .pwhl-rig { max-width: 620px; }
  .pwhl-zo__cards { grid-template-columns: 1fr; }
  .pwhl-tl__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .pwhl-tl__rail { display: none; }
}
@media (max-width: 820px) {
  .pwhl-what__split, .pwhl-price__bills { grid-template-columns: 1fr; }
  .pwhl-svc__layer { grid-template-columns: 1fr; }
  .pwhl-svc__layer--mid, .pwhl-svc__layer--fe { margin: 0; }
  .pwhl-svc__side { flex-direction: row; justify-content: flex-start; align-items: center; padding: 4px 4px 0; }
  .pwhl-price__bills { gap: 22px; }
}
@media (max-width: 640px) {
  .pwhl-rig__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pwhl-wp, .pwhl-q, .pwhl-br { grid-column: 1; }
  .pwhl-wp { grid-row: 1; } .pwhl-thread--a { grid-row: 2; } .pwhl-q { grid-row: 3; } .pwhl-thread--b { grid-row: 4; } .pwhl-br { grid-row: 5; }
  .pwhl-thread { justify-self: center; width: 2px; height: 26px; background: repeating-linear-gradient(180deg, #9FB5C8 0 5px, transparent 5px 9px); }
  .pwhl-thread i { left: -4px; top: 0; }
  .pwhl-thread.is-go i { animation-name: pwhl-zip-v; }
  .pwhl-br__page { padding-bottom: 54px; }
  .pwhl-tl__list { grid-template-columns: 1fr; gap: 0; }
  .pwhl-tl__ev { padding: 0 0 22px 38px; border-left: 3px solid #E2E8F0; margin-left: 10px; }
  .pwhl-tl__ev:last-child { border-left-color: transparent; }
  .pwhl-tl__ev::before { left: -12.5px; top: 0; }
  .pwhl-sw { font-size: 14px; }
}
@keyframes pwhl-zip-v { 0% { top: 0; opacity: 1; } 100% { top: calc(100% - 10px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pwhl-thread.is-go i { animation: none; }
  .pwhl-tl__fill, .pwhl-tl__ev, .pwhl-dial__needle, .pwhl-sw__ui, .pwhl-sw__ui::after, .pwhl-br__toast, .pwhl-br__page, .pwhl-wp__btn { transition: none !important; }
}