/* WordPress hosting and security page only. Loaded via `extra: crm, p-wordpress-hosting-security`. Every class is scoped with .pwhs- */

/* ---------- hero: shield rings around one site ---------- */
.pwhs-hero .pwhs-hero__grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); align-items: center; }
.pwhs-hero .crm-sub { max-width: 44ch; }
.pwhs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; max-width: 620px; }
.pwhs-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 7px; border-radius: 999px; background: #fff; border: 1px solid #DCE4EE; font: 600 13.5px/1.25 var(--f-body); color: #0B2440; box-shadow: 0 10px 20px -16px rgba(8,34,56,.5); }
.pwhs-chips img { flex: none; width: 22px; height: 22px; }
.pwhs-chip__k { flex: none; padding: 3px 8px; border-radius: 999px; background: #FDECEA; color: #A3261B; font: 700 11px/1.2 var(--f-body); letter-spacing: .04em; }
.pwhs-chip__k--g { background: #E5F4EA; color: #24693C; }
.pwhs-badge img { width: 64px; height: auto; padding: 6px 8px; border-radius: 10px; background: #fff; border: 1px solid #E2E8F0; }

.pwhs-shield { position: relative; margin: 0 auto; width: 100%; max-width: 520px; }
.pwhs-shield__stage { position: relative; aspect-ratio: 1 / 1; border-radius: 50%; }
.pwhs-ring { position: absolute; border-radius: 50%; border: 2px solid var(--rc); background: radial-gradient(circle, transparent 62%, var(--rg) 100%); transition: box-shadow .35s, border-color .35s; }
.pwhs-ring--1 { inset: 4%;  --rc: #9CC9E6; --rg: rgba(0,163,217,.07); border-style: dashed; }
.pwhs-ring--2 { inset: 13%; --rc: #E39B93; --rg: rgba(196,52,38,.07); }
.pwhs-ring--3 { inset: 22%; --rc: #E8C27A; --rg: rgba(224,162,27,.09); }
.pwhs-ring--4 { inset: 31%; --rc: #8FCDA4; --rg: rgba(47,125,74,.09); }
.pwhs-ring em { position: absolute; padding: 5px 11px; border-radius: 999px; background: #fff; border: 1.5px solid var(--rc); font: 700 11.5px/1.2 var(--f-body); font-style: normal; color: #0B2440; white-space: nowrap; box-shadow: 0 8px 16px -12px rgba(8,34,56,.55); transition: background .3s, color .3s; }
.pwhs-ring--1 em { top: 0; left: 50%; transform: translate(-50%, -50%); }
.pwhs-ring--2 em { top: 50%; right: 0; transform: translate(50%, -50%); }
.pwhs-ring--3 em { bottom: 0; left: 50%; transform: translate(-50%, 50%); }
.pwhs-ring--4 em { top: 50%; left: 0; transform: translate(-50%, -50%); }
.pwhs-ring.is-hit { box-shadow: 0 0 0 6px var(--rg), 0 0 30px -4px var(--rc); }
.pwhs-ring.is-hit em { background: #082238; color: #fff; border-color: #082238; }
.pwhs-core { position: absolute; inset: 39%; display: grid; place-items: center; align-content: center; gap: 4px; border-radius: 50%; background: #fff; border: 1px solid #DCE4EE; box-shadow: 0 24px 40px -24px rgba(8,34,56,.6); }
.pwhs-core img { width: 38%; height: auto; }
.pwhs-core b { font: 700 clamp(9px, .4rem + .4vw, 12px)/1.1 var(--f-body); color: #0B2440; }
.pwhs-core i { width: 8px; height: 8px; border-radius: 50%; background: #2FA35A; box-shadow: 0 0 0 4px rgba(47,163,90,.18); }
.pwhs-dots { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.pwhs-dot { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #E04A3A; box-shadow: 0 0 0 4px rgba(224,74,58,.2); opacity: 0; }
.pwhs-dot--y { background: #E0A21B; box-shadow: 0 0 0 4px rgba(224,162,27,.22); }
.pwhs-dot--b { background: #1D78C1; box-shadow: 0 0 0 4px rgba(29,120,193,.2); }
.pwhs-shield__log { display: flex; align-items: center; gap: 10px; margin: 18px auto 0; max-width: 440px; padding: 10px 14px; border-radius: 14px; background: #082238; color: #DCE9F3; font: 500 13px/1.4 var(--f-body); box-shadow: 0 20px 34px -24px rgba(8,34,56,.8); }
.pwhs-shield__tag { flex: none; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.1); font: 700 10.5px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #9FD8EE; }
.pwhs-shield__line { min-width: 0; color: #E7F0F7; transition: opacity .25s; }
.pwhs-shield__line.is-fade { opacity: 0; }

/* ---------- fit rows ---------- */
.pwhs-fit__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 34px 0 0; padding: 0; list-style: none; }
.pwhs-fit__rows li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 22px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; border-left: 5px solid #2F7D4A; }
.pwhs-fit__rows li.is-no { border-left-color: #94A3B8; background: #F8FAFC; }
.pwhs-fit__v { margin-top: 2px; padding: 4px 10px; border-radius: 999px; background: #E5F4EA; color: #24693C; font: 700 11.5px/1.2 var(--f-body); white-space: nowrap; }
.is-no .pwhs-fit__v { background: #E8EDF3; color: #475569; }
.pwhs-fit__rows h3 { margin: 0 0 6px; font: 700 17.5px/1.3 var(--f-display); letter-spacing: -.01em; color: #082238; }
.pwhs-fit__rows p { margin: 0; font-size: 15px; line-height: 1.55; color: #475569; }

/* ---------- services ---------- */
.pwhs-svc__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.pwhs-card { position: relative; padding: 24px 22px 22px; border-radius: 20px; background: #fff; border: 1px solid #E2E8F0; transition: transform .3s cubic-bezier(.2,.7,.1,1), box-shadow .3s; }
.pwhs-card:hover { transform: translateY(-4px); box-shadow: 0 26px 40px -30px rgba(8,34,56,.55); }
.pwhs-card__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--bg); }
.pwhs-card__ico svg { width: 24px; height: 24px; fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pwhs-card h3 { margin: 16px 0 8px; font: 700 18px/1.3 var(--f-display); letter-spacing: -.01em; color: #082238; }
.pwhs-card p { margin: 0; font-size: 15px; line-height: 1.6; color: #475569; }

/* ---------- story: month calendar ---------- */
.pwhs-cal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 48px); align-items: start; margin-top: 34px; }
.pwhs-cal__grid { padding: 22px; border-radius: 22px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 30px 60px -44px rgba(8,34,56,.55); }
.pwhs-cal__head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 14px; }
.pwhs-cal__head b { font: 700 22px/1 var(--f-display); letter-spacing: -.02em; color: #082238; }
.pwhs-cal__head span { font: 700 10.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #64748B; }
.pwhs-cal__wk, .pwhs-cal__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.pwhs-cal__wk li { padding-bottom: 6px; text-align: center; font: 600 11.5px/1 var(--f-body); color: #94A3B8; }
.pwhs-cal__days li { position: relative; aspect-ratio: 1 / 1; }
.pwhs-day { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 6px 6px 7px; border-radius: 10px; border: 1px solid #EDF1F6; background: #FBFCFE; font: 600 12.5px/1 var(--f-body); color: #334155; text-align: left; }
.pwhs-day__dots { display: flex; gap: 3px; flex-wrap: wrap; }
.pwhs-day__dots i { width: 6px; height: 6px; border-radius: 50%; }
button.pwhs-day { cursor: pointer; background: #fff; border-color: #D6E0EB; transition: transform .2s, border-color .2s, background .2s; }
button.pwhs-day:hover { transform: translateY(-2px); border-color: #7FB6DD; }
button.pwhs-day:focus-visible { outline: 3px solid #00A3D9; outline-offset: 2px; }
button.pwhs-day.is-on { background: #082238; border-color: #082238; color: #fff; }
.pwhs-day.is-pad { visibility: hidden; }
.k-bak { background: #3FB97A; } .k-upd { background: #E0A21B; } .k-sec { background: #D6453A; } .k-up { background: #1D78C1; } .k-rep { background: #7C3AED; }
.pwhs-cal__key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 16px 0 0; padding: 0; list-style: none; font: 500 12.5px/1.3 var(--f-body); color: #64748B; }
.pwhs-cal__key li { display: inline-flex; align-items: center; gap: 6px; }
.pwhs-cal__key i { width: 8px; height: 8px; border-radius: 50%; }
.pwhs-cal__log { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pwhs-cal__log li { padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; }
.pwhs-cal__log h3 { margin: 6px 0 6px; font: 700 18px/1.3 var(--f-display); letter-spacing: -.01em; color: #082238; }
.pwhs-cal__log p { margin: 0; font-size: 15px; line-height: 1.6; color: #475569; }
.pwhs-ev__d { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pwhs-ev__d time { font: 700 12.5px/1.2 var(--f-body); color: #0B2440; }
.pwhs-ev__d span { padding: 3px 9px; border-radius: 999px; font: 700 10.5px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--kc, #64748B); }
.pwhs-cal__log li[data-k="upd"] { --kc: #B7791F; } .pwhs-cal__log li[data-k="sec"] { --kc: #C0392B; } .pwhs-cal__log li[data-k="up"] { --kc: #1D78C1; } .pwhs-cal__log li[data-k="rep"] { --kc: #7C3AED; }
.pwhs-cal.is-arm .pwhs-cal__log li { display: none; }
.pwhs-cal.is-arm .pwhs-cal__log li.is-on { display: block; position: relative; padding: 26px 26px 24px; border-color: #CFE0F5; box-shadow: 0 30px 60px -44px rgba(8,34,56,.6); animation: pwhs-in .45s cubic-bezier(.2,.7,.1,1); }
.pwhs-cal.is-arm .pwhs-cal__log li.is-on h3 { font-size: 22px; }
.pwhs-cal__nav { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.pwhs-cal__nav button { padding: 9px 14px; border-radius: 999px; border: 1px solid #CBD5E1; background: #fff; font: 600 13.5px/1 var(--f-body); color: #0B2440; cursor: pointer; }
.pwhs-cal__nav button:hover { border-color: #00A3D9; }
.pwhs-cal__nav span { font: 500 13px/1 var(--f-body); color: #64748B; }
.pwhs-month__note { margin: 22px 0 0; font-size: 14px; color: #64748B; }
@keyframes pwhs-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- interactive: defense scorer (dark band) ---------- */
.pwhs-sc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); margin-top: 34px; align-items: start; }
.pwhs-sc__form, .pwhs-sc__out { padding: 22px; border-radius: 22px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.pwhs-sc__presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pwhs-sc__presets button { padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: transparent; font: 600 13px/1.2 var(--f-body); color: #DCE9F3; cursor: pointer; }
.pwhs-sc__presets button.is-on { background: #FFB81C; border-color: #FFB81C; color: #082238; }
.pwhs-sc__form fieldset { margin: 14px 0 0; padding: 0; border: 0; }
.pwhs-sc__form legend { margin-bottom: 6px; font: 700 11px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #9FC0D8; }
.pwhs-sw { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 4px; font: 500 14.5px/1.4 var(--f-body); color: #E7F0F7; cursor: pointer; }
.pwhs-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pwhs-sw__t { flex: none; position: relative; width: 40px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.18); transition: background .25s; }
.pwhs-sw__t::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .25s cubic-bezier(.2,.7,.1,1); }
.pwhs-sw input:checked + .pwhs-sw__t { background: #3FB97A; }
.pwhs-sw input:checked + .pwhs-sw__t::after { transform: translateX(18px); }
.pwhs-sw input:focus-visible + .pwhs-sw__t { outline: 3px solid #5FD3F3; outline-offset: 2px; }
.pwhs-sc__top { display: flex; align-items: center; gap: 18px; }
.pwhs-gauge { position: relative; flex: none; width: 112px; height: 112px; }
.pwhs-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pwhs-gauge circle { fill: none; stroke-width: 11; }
.pwhs-gauge__bg { stroke: rgba(255,255,255,.12); }
.pwhs-gauge__fg { stroke: var(--gc, #FFB81C); stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: 314.16; transition: stroke-dashoffset .6s cubic-bezier(.2,.7,.1,1), stroke .4s; }
.pwhs-gauge span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.pwhs-gauge b { font: 800 32px/1 var(--f-display); color: #fff; }
.pwhs-gauge small { margin-top: 3px; font: 500 11.5px/1 var(--f-body); color: #9FC0D8; }
.pwhs-sc__grade { margin: 0 0 4px; font: 700 20px/1.25 var(--f-display); color: #fff; }
.pwhs-sc__say { margin: 0; font-size: 14.5px; line-height: 1.55; color: #BFD3E2; }
.pwhs-replay { margin-top: 20px; }
.pwhs-replay__head, .pwhs-fix__head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; font: 700 11px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #9FC0D8; }
.pwhs-replay__btn { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: transparent; font: 600 12.5px/1 var(--f-body); letter-spacing: 0; text-transform: none; color: #fff; cursor: pointer; }
.pwhs-replay__btn:hover { border-color: #5FD3F3; }
.pwhs-replay__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pwhs-replay__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,.05); transition: opacity .3s, transform .3s; }
.pwhs-replay__list li b { font: 600 14px/1.35 var(--f-body); color: #fff; }
.pwhs-replay__list li small { grid-column: 1 / -1; font: 400 13px/1.45 var(--f-body); color: #A9C2D6; }
.pwhs-replay__list li.is-wait { opacity: .25; transform: translateX(-6px); }
.pwhs-pill { padding: 4px 10px; border-radius: 999px; font: 700 11px/1.2 var(--f-body); white-space: nowrap; }
.pwhs-pill--stop { background: #3FB97A; color: #062A17; }
.pwhs-pill--back { background: #FFB81C; color: #3A2600; }
.pwhs-pill--hit { background: #E04A3A; color: #fff; }
.pwhs-fix { margin-top: 18px; }
.pwhs-fix[hidden] { display: none; }
.pwhs-fix__list { margin: 0; padding: 0 0 0 20px; color: #E7F0F7; font-size: 14.5px; line-height: 1.55; }
.pwhs-fix__list li + li { margin-top: 4px; }
.pwhs-sc__foot { margin: 22px 0 0; font-size: 13.5px; color: #9FC0D8; }

/* ---------- Zoho ---------- */
.pwhs-zo__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 34px 0 0; padding: 0; list-style: none; }
.pwhs-zo__item { padding: 22px; border-radius: 20px; background: #fff; border: 1px solid #E2E8F0; }
.pwhs-zo__chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; }
.pwhs-zo__chain span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 10px; background: #F3F7F9; border: 1px solid #E2E8F0; font: 600 12px/1.25 var(--f-body); color: #0B2440; }
.pwhs-zo__chain img { width: 18px; height: 18px; }
.pwhs-zo__chain i { width: 14px; height: 2px; background: #9CC9E6; }
.pwhs-zo__item h3 { margin: 0 0 8px; font: 700 18px/1.3 var(--f-display); letter-spacing: -.01em; color: #082238; }
.pwhs-zo__item p:last-child { margin: 0; font-size: 15px; line-height: 1.6; color: #475569; }

/* ---------- pricing ---------- */
.pwhs-price__stack { display: grid; gap: 10px; margin-top: 34px; max-width: 920px; }
.pwhs-layer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 22px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; }
.pwhs-layer:nth-child(2) { margin-left: 3%; } .pwhs-layer:nth-child(3) { margin-left: 6%; } .pwhs-layer:nth-child(4) { margin-left: 9%; }
.pwhs-layer__n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #1D3F8F, #00A3D9); font: 800 14px/1 var(--f-display); color: #fff; }
.pwhs-layer h3 { margin: 0 0 4px; font: 700 17.5px/1.3 var(--f-display); color: #082238; }
.pwhs-layer p { margin: 0; font-size: 15px; line-height: 1.55; color: #475569; }
.pwhs-layer img { width: 36px; height: 36px; object-fit: contain; }
.pwhs-price__ours { margin: 24px 0 0; max-width: 920px; padding: 18px 22px; border-radius: 18px; background: #FFF8E6; border: 1px solid #FFE0A0; font-size: 15.5px; line-height: 1.6; color: #3B3320; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .pwhs-svc__grid, .pwhs-zo__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .pwhs-hero .pwhs-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .pwhs-shield { max-width: 440px; margin-top: 18px; }
  .pwhs-cal, .pwhs-sc__grid { grid-template-columns: minmax(0, 1fr); }
  .pwhs-fit__rows { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pwhs-svc__grid, .pwhs-zo__list { grid-template-columns: minmax(0, 1fr); }
  .pwhs-shield { max-width: 100%; padding: 0 28px; box-sizing: border-box; }
  .pwhs-ring em { font-size: 10.5px; padding: 4px 8px; }
  .pwhs-fit__rows li { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pwhs-fit__v { justify-self: start; }
  .pwhs-cal__grid { padding: 14px; }
  .pwhs-cal__wk, .pwhs-cal__days { gap: 4px; }
  .pwhs-day { padding: 4px 4px 5px; font-size: 11.5px; border-radius: 8px; }
  .pwhs-day__dots i { width: 5px; height: 5px; }
  .pwhs-sc__form, .pwhs-sc__out { padding: 16px; }
  .pwhs-sc__top { gap: 14px; }
  .pwhs-gauge { width: 92px; height: 92px; }
  .pwhs-gauge b { font-size: 26px; }
  .pwhs-layer { grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
  .pwhs-layer img { display: none; }
  .pwhs-layer:nth-child(n) { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pwhs-ring, .pwhs-card, .pwhs-gauge__fg, .pwhs-sw__t, .pwhs-sw__t::after, .pwhs-replay__list li, button.pwhs-day, .pwhs-shield__line { transition: none !important; }
  .pwhs-cal.is-arm .pwhs-cal__log li.is-on { animation: none; }
  .pwhs-card:hover, button.pwhs-day:hover { transform: none; }
}
@media (max-width: 640px) {
  .pwhs-shield__log { flex-direction: column; align-items: flex-start; gap: 6px; }
}
.pwhs-fit__rows a, .pwhs-zo__item a, .pwhs-layer a, .pwhs-price__ours a { color: #0A6FA8; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.pwhs-fit__rows a:hover, .pwhs-zo__item a:hover, .pwhs-layer a:hover { color: #082238; }