/* Google Workspace -> Zoho Mail migration page only. Loaded via `extra: crm, p-mig-gw`. Every class is scoped .pmgw- */
.pmgw-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pmgw-ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ================= hero: migration console ================= */
.pmgw-hero .pmgw-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.pmgw-hero .pg-h1 { max-width: 17ch; }
.pmgw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.pmgw-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 9px; border-radius: 999px; background: #fff; border: 1px solid #D6E3F1; box-shadow: 0 8px 18px -14px rgba(8,34,56,.5); font: 600 13.5px/1.25 var(--f-body); color: #082238; }
.pmgw-chips .pmgw-ic { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #DDF4EF; color: #0D9488; box-sizing: border-box; }

.pmgw-con { position: relative; margin: 0; padding: 0 0 46px; }
.pmgw-con__win { border-radius: 22px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 60px 100px -50px rgba(8,34,56,.55); overflow: hidden; }
.pmgw-con__bar { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid #EDF2F6; background: linear-gradient(180deg, #FBFCFE, #F5F8FB); font: 700 13.5px/1.2 var(--f-display); color: #082238; }
.pmgw-con__src, .pmgw-con__dst { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pmgw-con__src i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--c); color: #fff; font: 800 12px/1 var(--f-display); font-style: normal; }
.pmgw-con__arrow { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #FFF4D6; color: #B7791F; }
.pmgw-con__arrow .pmgw-ic { width: 15px; height: 15px; }
.pmgw-con__bar em { margin-left: auto; padding: 4px 9px; border-radius: 999px; background: #F3F7F9; font: 600 11px/1 var(--f-body); font-style: normal; color: #64748B; }
.pmgw-con__phases { display: flex; gap: 4px; margin: 0; padding: 12px 14px 4px; list-style: none; counter-reset: ph; }
.pmgw-con__phases li { flex: 1; position: relative; padding: 8px 4px 0; border-top: 3px solid #E2E8F0; font: 600 11.5px/1.2 var(--f-body); color: #94A3B8; text-align: center; transition: color .3s, border-color .3s; }
.pmgw-con__phases li.is-done { border-color: #3FB97A; color: #166534; }
.pmgw-con__phases li.is-on { border-color: #00A3D9; color: #082238; }
.pmgw-con__users { display: grid; gap: 7px; margin: 0; padding: 10px 14px; list-style: none; }
.pmgw-con__users li { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1.05fr) 74px; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; border: 1px solid #EDF2F6; background: #fff; }
.pmgw-con__av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #fff; font: 700 12.5px/1 var(--f-display); }
.pmgw-con__who { min-width: 0; }
.pmgw-con__who b { display: block; font: 600 13px/1.25 var(--f-body); color: #082238; }
.pmgw-con__who small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11px/1.3 var(--f-body); color: #64748B; }
.pmgw-con__bars { display: grid; gap: 4px; }
.pmgw-con__bars i { display: block; height: 5px; border-radius: 3px; background: #EEF2F6; overflow: hidden; }
.pmgw-con__bars u { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; transition: width .7s cubic-bezier(.2,.7,.1,1); }
.pmgw-con__bars [data-k="m"] u, .pmgw-con__legend .m { background: #1D3F8F; }
.pmgw-con__bars [data-k="c"] u, .pmgw-con__legend .c { background: #00A3D9; }
.pmgw-con__bars [data-k="k"] u, .pmgw-con__legend .k { background: #3FB97A; }
.pmgw-con__users em { justify-self: end; padding: 4px 8px; border-radius: 999px; background: #F3F7F9; font: 600 10.5px/1 var(--f-body); font-style: normal; color: #64748B; white-space: nowrap; }
.pmgw-con__users em.is-run { background: #E0F4FB; color: #0A6FA8; }
.pmgw-con__users em.is-ok { background: #DCFCE7; color: #166534; }
.pmgw-con__legend { display: flex; gap: 14px; padding: 0 16px 10px; font: 500 11px/1 var(--f-body); color: #64748B; }
.pmgw-con__legend span { display: inline-flex; align-items: center; gap: 6px; }
.pmgw-con__legend i { width: 10px; height: 4px; border-radius: 2px; }
.pmgw-con__mx { display: flex; align-items: center; gap: 12px; margin: 0 14px 14px; padding: 12px 14px; border-radius: 14px; background: #F3F7F9; border: 1px dashed #CBD5E1; transition: background .4s, border-color .4s; }
.pmgw-con__mx > .pmgw-ic { width: 22px; height: 22px; color: #64748B; }
.pmgw-con__mx span { flex: 1; min-width: 0; }
.pmgw-con__mx small { display: block; font: 500 11px/1.2 var(--f-body); color: #64748B; }
.pmgw-con__mx b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: #082238; }
.pmgw-con__mx strong { padding: 5px 10px; border-radius: 999px; background: #E3ECFB; font: 700 11px/1 var(--f-body); color: #1A57C9; white-space: nowrap; }
.pmgw-con__mx.is-zoho { background: #FFF8E6; border-color: #FFB81C; border-style: solid; }
.pmgw-con__mx.is-zoho strong { background: #FFB81C; color: #082238; }
.pmgw-float { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: #082238; color: #fff; font: 600 12.5px/1.2 var(--f-body); box-shadow: 0 20px 40px -20px rgba(8,34,56,.7); }
.pmgw-float--a { left: -18px; bottom: 6px; }
.pmgw-float .pmgw-ic { color: #FFB81C; }

/* ================= moves: three columns ================= */
.pmgw-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.pmgw-col { padding: 24px 22px; border-radius: 22px; background: #fff; border: 1px solid #E2E8F0; border-top: 4px solid var(--c); box-shadow: 0 24px 50px -40px rgba(8,34,56,.5); }
.pmgw-col--yes { --c: #16A34A; --bg: #DCFCE7; }
.pmgw-col--mid { --c: #D97706; --bg: #FEF3C7; }
.pmgw-col--no { --c: #64748B; --bg: #EEF2F6; }
.pmgw-col header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pmgw-col h3 { margin: 0; font: 700 19px/1.25 var(--f-display); color: #082238; }
.pmgw-col__ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--bg); color: var(--c); }
.pmgw-col ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pmgw-col li { padding-left: 14px; border-left: 2px solid var(--bg); font-size: 14.5px; line-height: 1.5; color: #475569; }
.pmgw-col li b { display: block; font-weight: 600; color: #082238; }
.pmgw-skip { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0 0; padding: 16px 18px; border-radius: 16px; background: #F3F7F9; font-size: 15px; line-height: 1.55; color: #334155; }
.pmgw-skip .pmgw-ic { margin-top: 2px; color: #0D9488; }

/* ================= full map ================= */
.pmgw-map { background: linear-gradient(180deg, #F3F7F9, #fff); }
.pmgw-map__filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 16px; }
.pmgw-map__filters button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid #D6E3F1; background: #fff; font: 600 13.5px/1.2 var(--f-body); color: #082238; cursor: pointer; transition: background .2s, border-color .2s; }
.pmgw-map__filters button:hover { border-color: #00A3D9; }
.pmgw-map__filters button.is-on { background: #082238; border-color: #082238; color: #fff; }
.pmgw-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.pmgw-dot--tool { background: #1D3F8F; } .pmgw-dot--wd { background: #00A3D9; } .pmgw-dot--admin { background: #3FB97A; }
.pmgw-dot--us { background: #FFB81C; } .pmgw-dot--none { background: #94A3B8; }
.pmgw-map__wrap { overflow-x: auto; border-radius: 20px; border: 1px solid #E2E8F0; background: #fff; }
.pmgw-map__t { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.pmgw-map__t th { position: sticky; top: 0; padding: 14px 18px; background: #082238; color: #fff; font: 700 13px/1.2 var(--f-body); text-align: left; letter-spacing: .02em; }
.pmgw-map__t td { padding: 12px 18px; border-top: 1px solid #EDF2F6; color: #334155; vertical-align: top; }
.pmgw-map__t td:first-child { font-weight: 600; color: #082238; }
.pmgw-map__t td:last-child { color: #475569; }
.pmgw-map__t td .pmgw-dot { margin-right: 8px; }
.pmgw-map__t tr.is-off { display: none; }
.pmgw-map__t tbody tr:hover td { background: #F7FBFD; }
.pmgw-map__count { margin: 12px 0 0; font-size: 14px; color: #64748B; }

/* ================= estimator (dark band) ================= */
.pmgw-est__box { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 20px; margin-top: 36px; }
.pmgw-est__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; padding: 26px; border-radius: 22px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.pmgw-f { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pmgw-f > span, .pmgw-f legend { grid-column: 1 / -1; font: 600 13.5px/1.3 var(--f-body); color: #CFE2EF; padding: 0; }
.pmgw-f input[type=range] { width: 100%; accent-color: #FFB81C; }
.pmgw-f output { min-width: 46px; padding: 5px 9px; border-radius: 9px; background: rgba(255,255,255,.1); font: 700 14px/1 var(--f-display); color: #fff; text-align: center; font-variant-numeric: tabular-nums; }
.pmgw-f--seg { grid-column: 1 / -1; }
.pmgw-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.08); margin-top: 6px; }
.pmgw-seg label { position: relative; }
.pmgw-seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pmgw-seg span { display: block; padding: 8px 18px; border-radius: 9px; font: 600 13.5px/1 var(--f-body); color: #CFE2EF; }
.pmgw-seg input:checked + span { background: #fff; color: #082238; }
.pmgw-seg input:focus-visible + span { outline: 2px solid #FFB81C; outline-offset: 2px; }
.pmgw-est__out { display: flex; flex-direction: column; padding: 26px; border-radius: 22px; background: #fff; color: #334155; box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.pmgw-est__tag { align-self: flex-start; margin: 0 0 14px; padding: 5px 10px; border-radius: 999px; background: #FFF4D6; font: 700 11px/1 var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: #92600A; }
.pmgw-est__lbl { margin: 0; font: 600 13px/1.2 var(--f-body); color: #64748B; }
.pmgw-est__pkg { margin: 4px 0 14px; font: 800 30px/1.1 var(--f-display); letter-spacing: -.02em; color: #082238; }
.pmgw-est__meter { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 16px; padding-top: 12px; font: 600 11.5px/1 var(--f-body); color: #94A3B8; }
.pmgw-est__meter::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 3px; background: #EEF2F6; }
.pmgw-est__meter i { position: absolute; left: 0; top: 0; height: 6px; width: var(--w, 66%); border-radius: 3px; background: linear-gradient(90deg, #00A3D9, #3FB97A); transition: width .5s cubic-bezier(.2,.7,.1,1); }
.pmgw-est__meter span.is-on { color: #082238; }
.pmgw-est__meter span:nth-child(2) { text-align: center; } .pmgw-est__meter span:nth-child(3) { text-align: right; }
.pmgw-est__why { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 14.5px; line-height: 1.45; }
.pmgw-est__why li { position: relative; padding-left: 18px; }
.pmgw-est__why li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: #00A3D9; }
.pmgw-est__out .btn { align-self: flex-start; margin-top: auto; }
.pmgw-est__fine { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: #64748B; }

/* ================= packages ================= */
.pmgw-pk__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.pmgw-pk__card { display: flex; flex-direction: column; padding: 24px 22px; border-radius: 22px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 24px 50px -40px rgba(8,34,56,.5); }
.pmgw-pk__card.is-mid { border-color: #9ADBD0; box-shadow: 0 30px 60px -36px rgba(13,148,136,.55); }
.pmgw-pk__tag { align-self: flex-start; margin: 0 0 12px; padding: 6px 11px; border-radius: 999px; background: var(--bg); font: 700 12px/1 var(--f-body); color: var(--c); }
.pmgw-pk__card h3 { margin: 0 0 12px; font: 700 19px/1.25 var(--f-display); color: #082238; }
.pmgw-pk__card ul { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; font-size: 14.5px; line-height: 1.45; }
.pmgw-pk__card li { position: relative; padding-left: 20px; }
.pmgw-pk__card li::before { content: ""; position: absolute; left: 0; top: .35em; width: 11px; height: 6px; border-left: 2px solid var(--c); border-bottom: 2px solid var(--c); transform: rotate(-45deg); }
.pmgw-pk__card > p:not(.pmgw-pk__tag) { font-size: 14.5px; line-height: 1.5; margin: 0 0 14px; }
.pmgw-pk__fee { margin: auto 0 0 !important; padding-top: 14px; border-top: 1px dashed #E2E8F0; font: 600 14px/1.45 var(--f-body); color: #082238; }
.pmgw-pk__card--as { --c: #92600A; --bg: #FFF4D6; background: linear-gradient(160deg, #082238, #0A3A63); border-color: transparent; color: #CFE2EF; }
.pmgw-pk__card--as h3 { color: #fff; }
.pmgw-pk__card--as li::before { border-color: #FFB81C; }

/* ================= runbook ================= */
.pmgw-run { background: linear-gradient(180deg, #fff, #F3F7F9); overflow-x: clip; }
.pmgw-run__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(20px, 3vw, 40px); align-items: start; margin-top: 36px; }
.pmgw-route { position: sticky; top: 110px; padding: 22px; border-radius: 22px; background: #082238; color: #CFE2EF; box-shadow: 0 40px 80px -46px rgba(8,34,56,.8); }
.pmgw-route__tag { display: inline-block; margin: 0 0 14px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.1); font: 700 11px/1 var(--f-body); letter-spacing: .04em; text-transform: uppercase; }
.pmgw-route__lbl { margin: 0 0 10px; font: 600 13px/1.2 var(--f-body); }
.pmgw-route__dest { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 14px; background: rgba(255,255,255,.08); }
.pmgw-route__dest > span { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 6px; border-radius: 10px; font: 700 14px/1 var(--f-display); color: #9FC0D8; transition: color .35s; }
.pmgw-route__dest i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--c); color: #fff; font: 800 12px/1 var(--f-display); font-style: normal; }
.pmgw-route__dest::before { content: ""; position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 8px); border-radius: 10px; background: #fff; transition: transform .45s cubic-bezier(.2,.7,.1,1); }
.pmgw-route__dest.is-z::before { transform: translateX(calc(100% + 6px)); }
.pmgw-route__dest:not(.is-z) .pmgw-route__g, .pmgw-route__dest.is-z .pmgw-route__z { color: #082238; }
.pmgw-route__now { margin: 16px 0 0; }
.pmgw-route__now b { display: block; font: 700 22px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: #fff; }
.pmgw-route__now span { font-size: 14px; }
.pmgw-route__note { margin: 14px 0 0; font-size: 13px; line-height: 1.45; color: #9FC0D8; }

/* ================= risks ================= */
.pmgw-risk__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(20px, 3vw, 36px); margin-top: 36px; align-items: start; }
.pmgw-risk__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pmgw-risk__list label { display: flex; gap: 14px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid #E2E8F0; cursor: pointer; transition: border-color .25s, background .25s; }
.pmgw-risk__list input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: #0D9488; }
.pmgw-risk__list b { display: block; font: 700 16px/1.3 var(--f-display); color: #082238; }
.pmgw-risk__list em { display: block; max-height: 0; overflow: hidden; font-style: normal; font-size: 14.5px; line-height: 1.5; color: #475569; transition: max-height .4s ease, margin .3s; }
.pmgw-risk__list label.is-on { border-color: #9ADBD0; background: #F4FBFA; }
.pmgw-risk__list label.is-on em { max-height: 160px; margin-top: 6px; }
.pmgw-pace { display: grid; gap: 14px; }
.pmgw-pace__sum { margin: 0; padding: 14px 16px; border-radius: 14px; background: #082238; color: #fff; font: 600 14.5px/1.4 var(--f-body); }
.pmgw-pace__col { padding: 18px 20px; border-radius: 18px; border: 1px solid #E2E8F0; background: #fff; }
.pmgw-pace__col h3 { margin: 0 0 10px; font: 700 17px/1.25 var(--f-display); color: #082238; }
.pmgw-pace__col ul { display: grid; gap: 7px; margin: 0; padding: 0 0 0 18px; font-size: 14.5px; line-height: 1.45; }
.pmgw-pace__col--fast { border-left: 4px solid #3FB97A; }
.pmgw-pace__col--slow { border-left: 4px solid #F59E0B; }

/* ================= why ================= */
.pmgw-why__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.pmgw-why__fair { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: #475569; }
.pmgw-why__fair a { color: #0A6FA8; font-weight: 600; }
.pmgw-why__bars { padding: 24px; border-radius: 22px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 30px 60px -44px rgba(8,34,56,.5); }
.pmgw-why__cap { margin: 0 0 16px; font: 600 13px/1.3 var(--f-body); color: #64748B; }
.pmgw-why__row { margin-bottom: 16px; }
.pmgw-why__row > span { display: block; margin-bottom: 6px; font: 700 14px/1.2 var(--f-display); color: #082238; }
.pmgw-why__row p { display: flex; align-items: center; gap: 10px; margin: 0 0 5px; }
.pmgw-why__row i { display: block; flex: none; height: 12px; width: calc(var(--w) * .6); min-width: 8px; border-radius: 6px; }
.pmgw-why__row b { font: 600 13px/1.2 var(--f-body); color: #334155; white-space: nowrap; }
.pmgw-why i.z { background: linear-gradient(90deg, #00A3D9, #3FB97A); }
.pmgw-why i.g { background: #94A3B8; }
.pmgw-why__key { display: flex; gap: 16px; margin: 4px 0 0; font: 500 12.5px/1 var(--f-body); color: #64748B; }
.pmgw-why__key span { display: inline-flex; align-items: center; gap: 6px; }
.pmgw-why__key i { width: 12px; height: 12px; border-radius: 4px; }

.pmgw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ================= the move: phases + DNS map ================= */
.pmgw-run__key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 14px; color: #64748B; }
.pmgw-mo { display: inline-block; vertical-align: 2px; margin-left: 4px; padding: 3px 8px; border-radius: 999px; background: #FFF4D6; border: 1px solid #F5D58A; font: 700 10.5px/1.2 var(--f-body); letter-spacing: .03em; text-transform: uppercase; color: #92600A; white-space: nowrap; }
.pmgw-run__key .pmgw-mo { margin-left: 0; }
.pmgw-free { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #DCFCE7; font: 700 11px/1.2 var(--f-body); font-style: normal; color: #15803D; vertical-align: 2px; }
.pmgw-ph { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.pmgw-ph__g { border-radius: 22px; background: #fff; border: 1px solid #E2E8F0; overflow: hidden; }
.pmgw-ph__g > h3 { display: flex; align-items: baseline; gap: 12px; margin: 0; padding: 16px 20px; background: #F5F8FB; border-bottom: 1px solid #EDF2F6; font: 700 17px/1.3 var(--f-display); color: #082238; }
.pmgw-ph__g > h3 span { flex: none; font: 700 11.5px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #0A6FA8; }
.pmgw-ph__g > ol { margin: 0; padding: 0; list-style: none; }
.pmgw-ph__g > ol > li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 16px 20px; border-top: 1px solid #EDF2F6; transition: background .35s; }
.pmgw-ph__g > ol > li:first-child { border-top: 0; }
.pmgw-ph__g > ol > li.is-cur { background: #F2FAFD; }
.pmgw-ph__n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #EEF2F6; font: 800 14px/1 var(--f-display); color: #082238; transition: background .35s, color .35s; }
.pmgw-ph__g li.is-cur .pmgw-ph__n { background: #082238; color: #fff; }
.pmgw-ph__g li.is-key .pmgw-ph__n { background: #FFB81C; color: #082238; }
.pmgw-ph b { display: block; font: 700 16px/1.35 var(--f-display); color: #082238; }
.pmgw-ph p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: #475569; }
.pmgw-cut { display: grid; gap: 6px; margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: #FBF7EF; list-style: none; font-size: 14px; line-height: 1.4; color: #334155; }
.pmgw-cut li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; }
.pmgw-cut time { font: 700 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #B7791F; }
.pmgw-run__more { margin: 22px 0 0; }

.pmgw-us { position: relative; margin: 16px 0 0; }
.pmgw-us__svg { display: block; width: 100%; height: auto; }
.pmgw-us__svg circle { fill: #3B6E9A; transition: fill .5s; }
.pmgw-us__svg circle.is-z { fill: #3FB97A; }
.pmgw-us__svg .pmgw-us__hq { fill: #FFB81C; }
.pmgw-us__svg .pmgw-us__ring { fill: none; stroke: #3FB97A; stroke-width: 2; opacity: 0; }
.pmgw-us__cap { margin: 8px 0 0; min-height: 2.8em; font-size: 13px; line-height: 1.4; color: #CFE2EF; }

/* ================= reassurance ================= */
.pmgw-trust { background: linear-gradient(180deg, #fff, #F4F9F8); }
.pmgw-trust__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(18px, 3vw, 32px); margin-top: 36px; align-items: start; }
.pmgw-note { position: relative; padding: 28px 28px 24px; border-radius: 22px; background: #FFFDF7; border: 1px solid #F1E3BF; box-shadow: 0 30px 60px -48px rgba(146,96,10,.6); }
.pmgw-note__tag { margin: 0 0 10px; font: 700 11.5px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #92600A; }
.pmgw-note h3 { margin: 0 0 12px; font: 700 21px/1.25 var(--f-display); color: #082238; }
.pmgw-note > p:not(.pmgw-note__tag) { margin: 0 0 12px; font-size: 15.5px; line-height: 1.65; color: #334155; }
.pmgw-note__sig { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed #E8D7AE; }
.pmgw-note__faces { display: flex; flex: none; }
.pmgw-note__faces img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; }
.pmgw-note__faces img + img { margin-left: -12px; }
.pmgw-note__sig p { margin: 0; font-size: 13px; line-height: 1.4; color: #64748B; }
.pmgw-note__sig b { display: block; font: 700 15px/1.3 var(--f-display); color: #082238; }

.pmgw-vr { margin: 0; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 30px 60px -44px rgba(8,34,56,.5); }
.pmgw-vr__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.pmgw-vr__head p { margin: 0; }
.pmgw-vr__head b { display: block; font: 700 18px/1.25 var(--f-display); color: #082238; }
.pmgw-vr__head span { font-size: 13px; color: #64748B; }
.pmgw-vr__tag { order: 2; margin-left: auto; flex: none; padding: 5px 10px; border-radius: 999px; background: #FFF4D6; font: 700 11px/1 var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: #92600A; }
.pmgw-vr__t { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.pmgw-vr__t thead th { padding: 8px 8px; border-bottom: 2px solid #E2E8F0; font: 700 12px/1.2 var(--f-body); color: #64748B; text-align: right; }
.pmgw-vr__t thead th:first-child { text-align: left; }
.pmgw-vr__t tbody th { padding: 9px 8px; font-weight: 600; color: #082238; text-align: left; }
.pmgw-vr__t td { padding: 9px 8px; color: #334155; text-align: right; white-space: nowrap; }
.pmgw-vr__t tbody tr + tr > * { border-top: 1px solid #EDF2F6; }
.pmgw-vr__t td:last-child { width: 30px; }
.pmgw-tick { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #DCFCE7; color: #15803D; vertical-align: middle; transition: transform .35s cubic-bezier(.3,1.6,.5,1), opacity .25s; }
.pmgw-tick .pmgw-ic { width: 15px; height: 15px; stroke-width: 2.6; }
.pmgw-vr.is-pre .pmgw-tick { transform: scale(0); opacity: 0; }
.pmgw-vr__foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #082238; font: 600 14.5px/1.4 var(--f-body); color: #fff; }
.pmgw-vr__foot .pmgw-ic { color: #3FB97A; }

.pmgw-trust__h { margin: 44px 0 16px; font: 700 22px/1.25 var(--f-display); color: #082238; }
.pmgw-wif { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.pmgw-wif li { padding: 18px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; border-top: 3px solid #3FB97A; }
.pmgw-wif b { display: block; font: 700 15.5px/1.3 var(--f-display); color: #082238; }
.pmgw-wif p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: #475569; }
.pmgw-live { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 22px 0 0; padding: 14px 18px; border-radius: 999px; background: #E9F7F0; border: 1px solid #BFE7D2; font-size: 14.5px; line-height: 1.45; color: #1F4D3A; }
.pmgw-live b { color: #0F5132; }
.pmgw-live__dot { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #16A34A; }
.pmgw-live__dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #16A34A; opacity: 0; animation: pmgw-ping 2.4s ease-out infinite; }
@keyframes pmgw-ping { 0% { transform: scale(.5); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }

/* ================= planner: runbook checklist ================= */
.pmgw-plan { background: #F3F7F9; }
.pmgw-plan__box { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(18px, 3vw, 32px); margin-top: 36px; align-items: start; }
.pmgw-plan__in, .pmgw-save__in { display: grid; gap: 18px; padding: 24px; border-radius: 22px; background: #fff; border: 1px solid #E2E8F0; }
.pmgw-plan__in { position: sticky; top: 100px; }
.pmgw-pf { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pmgw-pf > span, .pmgw-pf legend { padding: 0; font: 600 14px/1.3 var(--f-body); color: #082238; }
.pmgw-pf input[type=date] { min-height: 46px; padding: 0 12px; border: 1.5px solid #D5DDEA; border-radius: 12px; font: 600 15px var(--f-body); color: #082238; background: #fff; }
.pmgw-pf input[type=date]:focus-visible { outline: 2px solid #00A3D9; outline-offset: 1px; }
.pmgw-pf input[type=range] { width: 100%; accent-color: #0D9488; }
.pmgw-pf output { float: right; font: 800 15px/1.3 var(--f-display); color: #0D9488; }
.pmgw-pf--chk { grid-template-columns: auto minmax(0, 1fr); align-items: center; font: 600 14px/1.3 var(--f-body); color: #082238; cursor: pointer; }
.pmgw-pf--chk input { width: 20px; height: 20px; margin: 0; accent-color: #0D9488; }
.pmgw-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pmgw-pills label { position: relative; }
.pmgw-pills input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.pmgw-pills span { display: block; padding: 8px 12px; border-radius: 999px; border: 1px solid #D6E3F1; background: #fff; font: 600 13px/1.2 var(--f-body); color: #334155; transition: background .2s, color .2s, border-color .2s; }
.pmgw-pills input:checked + span { background: #082238; border-color: #082238; color: #fff; }
.pmgw-pills input:focus-visible + span { outline: 2px solid #00A3D9; outline-offset: 2px; }
.pmgw-plan__sum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; border-radius: 16px; background: #082238; color: #CFE2EF; }
.pmgw-plan__st { margin: 0; }
.pmgw-plan__st small { display: block; font: 600 12px/1.2 var(--f-body); color: #9FC0D8; }
.pmgw-plan__st b { font: 800 18px/1.3 var(--f-display); color: #fff; }
.pmgw-plan__msg { grid-column: 1 / -1; margin: 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.14); font-size: 14px; line-height: 1.45; }
.pmgw-plan__msg.is-warn { color: #FFD27A; font-weight: 600; }
.pmgw-plan__in .btn { justify-self: start; }

.pmgw-sheet { position: relative; padding: 22px 22px 18px 52px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 30px 60px -44px rgba(8,34,56,.45); }
.pmgw-sheet::before { content: ""; position: absolute; left: 18px; top: 26px; bottom: 26px; width: 12px; background: radial-gradient(circle at 6px 6px, #E2E8F0 5px, transparent 5.5px) 0 0 / 12px 64px repeat-y; }
.pmgw-sheet::after { content: ""; position: absolute; left: 40px; top: 0; bottom: 0; width: 1px; background: #FECACA; }
.pmgw-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pmgw-sheet__head p { margin: 0; }
.pmgw-sheet__head b { display: block; font: 800 18px/1.25 var(--f-display); color: #082238; }
.pmgw-sheet__head span { font-size: 13px; color: #64748B; }
.pmgw-sheet__head em { flex: none; padding: 5px 10px; border-radius: 999px; background: #FFF4D6; font: 700 11px/1 var(--f-body); font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: #92600A; }
.pmgw-sheet__list { margin: 0; padding: 0; list-style: none; }
.pmgw-sheet__list li { display: grid; grid-template-columns: 18px 128px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px dashed #E2E8F0; font-size: 14px; line-height: 1.4; color: #334155; }
.pmgw-sheet__list li > i { width: 16px; height: 16px; margin-top: 2px; border: 2px solid #94A3B8; border-radius: 4px; }
.pmgw-sheet__list time { font: 700 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: #0A6FA8; }
.pmgw-sheet__list b { font-weight: 600; color: #082238; }
.pmgw-sheet__list li .pmgw-mo { margin-left: 6px; }
.pmgw-sheet__list li.is-ph { display: block; padding: 14px 0 4px; border-bottom: 0; font: 700 11.5px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #64748B; }
.pmgw-sheet__list li.is-stop { background: #FFF8E6; margin: 0 -10px; padding: 10px; border-radius: 10px; border-bottom: 0; }
.pmgw-sheet__list li.is-stop > i { border-color: #B7791F; background: #FFB81C; }
.pmgw-sheet__list li.is-end > i { border-color: #1A73E8; }
.pmgw-sheet__list li.is-late time { color: #B91C1C; }
.pmgw-sheet__list li.is-late > i { border-color: #DC2626; }
.pmgw-late { margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: #FEE2E2; font: 700 10.5px/1.2 var(--f-body); color: #B91C1C; white-space: nowrap; }
.pmgw-sheet__list li.is-today { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 0; font: 700 12px/1 var(--f-body); color: #DC2626; }
.pmgw-sheet__list li.is-today::before, .pmgw-sheet__list li.is-today::after { content: ""; flex: 1; height: 2px; background: #FCA5A5; }
.pmgw-sheet__list li.is-today::before { flex: 0 0 20px; }
.pmgw-sheet__fine { margin: 14px 0 0; font-size: 13px; line-height: 1.45; color: #64748B; }

/* ================= savings ================= */
.pmgw-save__box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 32px); margin-top: 36px; align-items: start; }
.pmgw-save__hint { margin: 0; font-size: 13.5px; line-height: 1.5; color: #64748B; }
.pmgw-save__out { padding: 24px; border-radius: 22px; background: linear-gradient(160deg, #082238, #0A3A63); color: #CFE2EF; box-shadow: 0 40px 80px -46px rgba(8,34,56,.8); }
.pmgw-save__yr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pmgw-save__yr p { margin: 0; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.06); }
.pmgw-save__yr p.z { background: rgba(63,185,122,.14); }
.pmgw-save__yr small { display: block; font: 600 12.5px/1.3 var(--f-body); color: #9FC0D8; }
.pmgw-save__yr b { display: block; margin: 4px 0 0; font: 800 26px/1.1 var(--f-display); color: #fff; font-variant-numeric: tabular-nums; }
.pmgw-save__yr span { font-size: 12.5px; }
.pmgw-save__bars { display: grid; gap: 8px; margin: 18px 0; }
.pmgw-save__bars > div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; font: 600 12px/1 var(--f-body); color: #9FC0D8; }
.pmgw-save__bars p { display: grid; gap: 3px; margin: 0; }
.pmgw-save__bars i { display: block; height: 9px; width: var(--w, 0%); min-width: 4px; border-radius: 5px; transition: width .5s cubic-bezier(.2,.7,.1,1); }
.pmgw-save__bars i.g { background: #7C93AB; }
.pmgw-save__bars i.z { background: linear-gradient(90deg, #00A3D9, #3FB97A); }
.pmgw-save__diff { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.12); }
.pmgw-save__diff small { font: 600 13.5px/1.2 var(--f-body); }
.pmgw-save__diff b { font: 800 20px/1.1 var(--f-display); color: #fff; font-variant-numeric: tabular-nums; }
.pmgw-save__diff--big b { font-size: 30px; color: #7FE0B0; }
.pmgw-save__fee { margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.07); font-size: 14px; line-height: 1.5; color: #E2EEF6; }
.pmgw-save__fine { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: #64748B; }

/* ================= day one ================= */
.pmgw-day1 { background: linear-gradient(180deg, #fff, #F3F7F9); }
.pmgw-mon { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 36px 0 0; padding: 0; list-style: none; counter-reset: pmgwmon; }
.pmgw-mon li { position: relative; padding: 20px 18px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; counter-increment: pmgwmon; }
.pmgw-mon li::after { content: counter(pmgwmon); position: absolute; top: 14px; right: 16px; font: 800 28px/1 var(--f-display); color: #EEF2F6; }
.pmgw-mon__ic { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 12px; border-radius: 12px; background: #E4F4FB; color: #0A6FA8; }
.pmgw-mon b { display: block; font: 700 16px/1.3 var(--f-display); color: #082238; }
.pmgw-mon p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: #475569; }
.pmgw-cheat { margin-top: 28px; padding: 26px; border-radius: 22px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 30px 60px -48px rgba(8,34,56,.5); }
.pmgw-cheat__head h3 { margin: 0; font: 800 22px/1.25 var(--f-display); color: #082238; }
.pmgw-cheat__head p { margin: 4px 0 16px; font-size: 14.5px; color: #64748B; }
.pmgw-cheat__t { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.pmgw-cheat__t thead th { padding: 10px 14px; background: #082238; color: #fff; font: 700 13px/1.2 var(--f-body); text-align: left; }
.pmgw-cheat__t thead th:first-child { border-radius: 10px 0 0 10px; } .pmgw-cheat__t thead th:last-child { border-radius: 0 10px 10px 0; }
.pmgw-cheat__t tbody th { width: 38%; padding: 11px 14px; font-weight: 600; color: #082238; text-align: left; vertical-align: top; }
.pmgw-cheat__t td { padding: 11px 14px; color: #334155; }
.pmgw-cheat__t tbody tr + tr > * { border-top: 1px solid #EDF2F6; }
.pmgw-cheat__t tbody tr:nth-child(even) > * { background: #FAFCFD; }
.pmgw-cheat__act { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; }

/* ================= print: cheat sheet only when "Print it" is used ================= */
@media print {
  .pmgw-cheat { box-shadow: none; border: 1px solid #CBD5E1; break-inside: avoid; }
  .pmgw-cheat__t thead th { background: #fff !important; color: #082238; border-bottom: 2px solid #082238; }
  .pmgw-cheat__t tbody tr > * { background: #fff !important; break-inside: avoid; }
  .pmgw-cheat__act { display: none; }
  body.pmgw-printing > *:not(main), body.pmgw-printing main > *:not(#day-one), body.pmgw-printing #day-one > .wrap > *:not(.pmgw-cheat) { display: none !important; }
  body.pmgw-printing #day-one { padding: 0; background: #fff; }
  body.pmgw-printing .pmgw-cheat { margin: 0; padding: 0; border: 0; }
  body.pmgw-printing .pmgw-cheat__head h3::after { content: " Google Workspace → Zoho Mail"; font-weight: 600; color: #64748B; font-size: 15px; }
}

/* ================= responsive ================= */
@media (max-width: 1100px) {
  .pmgw-pk__grid, .pmgw-wif, .pmgw-mon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .pmgw-hero .pmgw-hero__grid, .pmgw-est__box, .pmgw-run__grid, .pmgw-risk__grid, .pmgw-why__grid, .pmgw-trust__grid, .pmgw-plan__box, .pmgw-save__box { grid-template-columns: minmax(0, 1fr); }
  .pmgw-plan__in { position: static; }
  .pmgw-us { grid-column: 1; grid-row: 1 / span 2; margin: 0; width: 120px; }
  .pmgw-us__cap { display: none; }
  .pmgw-route { grid-template-columns: 120px minmax(0, 1fr); }
  .pmgw-route__dest, .pmgw-route__now { grid-column: 2; }
  .pmgw-cols { grid-template-columns: minmax(0, 1fr); }
  .pmgw-route { position: sticky; top: 76px; z-index: 2; order: -1; padding: 12px 14px; display: grid; gap: 6px 14px; align-items: center; }
  .pmgw-route__tag, .pmgw-route__note, .pmgw-route__lbl { display: none; }
  .pmgw-route__now { margin: 0; }
  .pmgw-route__now b { font-size: 16px; }
  .pmgw-float--a { left: 10px; }
}
@media (max-width: 640px) {
  .pmgw-est__in { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .pmgw-pk__grid { grid-template-columns: minmax(0, 1fr); }
  .pmgw-con__users li { grid-template-columns: 28px minmax(0, 1fr) 66px; }
  .pmgw-con__bars { grid-column: 2 / -1; grid-row: 2; }
  .pmgw-con__phases li { font-size: 10px; }
  .pmgw-con__bar { flex-wrap: wrap; font-size: 12.5px; }
  .pmgw-con__bar em { display: none; }
  .pmgw-map__t { font-size: 13.5px; }
  .pmgw-map__t th, .pmgw-map__t td { padding: 10px 12px; }
  .pmgw-route { grid-template-columns: 96px minmax(0, 1fr); }
  .pmgw-us { width: 96px; }
  .pmgw-route__dest > span { padding: 9px 4px; font-size: 13px; }
  .pmgw-wif, .pmgw-mon { grid-template-columns: minmax(0, 1fr); }
  .pmgw-ph__g > ol > li { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 14px 14px; }
  .pmgw-ph__n { width: 28px; height: 28px; font-size: 12.5px; }
  .pmgw-ph__g > h3 { flex-direction: column; gap: 4px; padding: 14px; }
  .pmgw-cut li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pmgw-sheet { padding: 18px 14px 14px 40px; }
  .pmgw-sheet::before { left: 12px; } .pmgw-sheet::after { left: 30px; }
  .pmgw-sheet__list li { grid-template-columns: 18px minmax(0, 1fr); gap: 4px 10px; }
  .pmgw-sheet__list li > span { grid-column: 2; }
  .pmgw-plan__in, .pmgw-save__in, .pmgw-save__out, .pmgw-cheat { padding: 18px; }
  .pmgw-save__yr b { font-size: 21px; }
  .pmgw-save__diff--big b { font-size: 24px; }
  .pmgw-vr { padding: 16px 12px; }
  .pmgw-vr__t { font-size: 13px; }
  .pmgw-vr__t thead th, .pmgw-vr__t tbody th, .pmgw-vr__t td { padding: 8px 4px; }
  .pmgw-vr__head { flex-wrap: wrap; }
  .pmgw-live { border-radius: 18px; }
  .pmgw-cheat__t { font-size: 13.5px; }
  .pmgw-cheat__t tbody th, .pmgw-cheat__t td, .pmgw-cheat__t thead th { padding: 9px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .pmgw-con__bars u, .pmgw-route__dest::before, .pmgw-est__meter i, .pmgw-risk__list em, .pmgw-us__svg circle, .pmgw-save__bars i, .pmgw-tick { transition: none; }
  .pmgw-live__dot::after { animation: none; }
}