/* Blog: How to migrate to Zoho CRM (.pmg-) : patch-panel hero, what-moves-where mapper, C split + B flip */
.pmg-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.pmg-meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 18px 0 0; font: 500 14px/1.4 var(--f-body); color: #475569; }
.pmg-meta span:not(:last-child)::after { content: "/"; margin: 0 12px; color: #CBD5E1; }

/* hero: patch panel */
.pmg-patch { margin: 0; justify-self: center; width: min(100%, 470px); padding: 20px 20px 18px; border-radius: 24px; background: linear-gradient(150deg, #0A3A63, #061A2E 70%); box-shadow: 0 40px 70px -40px rgba(8,34,56,.8); color: #fff; }
.pmg-patch__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.pmg-patch__head b { font: 700 17px/1.3 var(--f-display); letter-spacing: -.01em; padding-bottom: .1em; }
.pmg-patch__head em { flex: none; padding: 3px 9px; border-radius: 999px; background: rgba(255,184,28,.16); color: #FFD27A; font: 700 11px/1.4 var(--f-body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.pmg-patch__board { display: grid; grid-template-columns: minmax(0, 1fr) clamp(46px, 18%, 96px) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0; padding: 14px 12px 16px; border-radius: 16px; background: #0B2C4A; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.pmg-patch__side { margin: 0 0 10px; font: 700 11.5px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #9EC3DA; }
.pmg-patch__side--z { grid-column: 3; display: flex; align-items: center; gap: 6px; justify-content: flex-end; color: #9EE6D4; }
.pmg-patch__col { grid-row: 2; margin: 0; padding: 0; list-style: none; display: grid; grid-auto-rows: 46px; row-gap: 8px; }
.pmg-patch__col li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 46px; padding: 0 0 0 10px; border-radius: 10px; background: rgba(255,255,255,.06); font: 600 12.5px/1.25 var(--f-body); color: #E2EEF6; transition: background 300ms, color 300ms; }
.pmg-patch__col li span { overflow-wrap: anywhere; }
.pmg-patch__col i { flex: none; width: 12px; height: 12px; margin-right: -6px; border-radius: 50%; background: #0B2C4A; box-shadow: 0 0 0 2px #5D86A3; transition: background 300ms, box-shadow 300ms; }
.pmg-patch__col--z { grid-column: 3; }
.pmg-patch__col--z li { justify-content: flex-start; padding: 0 10px 0 0; }
.pmg-patch__col--z i { margin: 0 0 0 -6px; }
.pmg-patch__col li.is-on { background: rgba(0,178,169,.18); color: #fff; }
.pmg-patch__col li.is-on i { background: #3FB97A; box-shadow: 0 0 0 2px #3FB97A; }
.pmg-patch__col li.is-drop.is-on { background: rgba(255,138,101,.14); color: #FFD3C4; }
.pmg-patch__col li.is-drop.is-on i { background: #FF8A65; box-shadow: 0 0 0 2px #FF8A65; }
.pmg-patch__col--z li.is-drop span { font-style: italic; }
.pmg-patch__wires { grid-column: 2; grid-row: 2; width: 100%; height: 316px; overflow: visible; }
.pmg-patch__wires path { fill: none; stroke: #00B2A9; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 700ms cubic-bezier(.4,.1,.2,1); }
.pmg-patch__wires path.is-drop { stroke: #FF8A65; }
.pmg-patch__wires path.is-on { stroke-dashoffset: 0; }
.pmg-patch__foot { margin: 14px 2px 0; font: 500 13.5px/1.5 var(--f-body); color: #C7DAE7; }
.pmg-patch__foot b { font: 800 18px/1 var(--f-display); color: #FFB81C; }

/* article */
.pmg-art { padding-top: clamp(24px, 4vw, 48px); }
.pmg-art__grid { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: clamp(28px, 5vw, 72px); align-items: start; }
.pmg-body { max-width: 74ch; font-size: 17.5px; line-height: 1.72; color: #334155; }
.pmg-body > p { margin: 0 0 18px; }
.pmg-body b { color: #082238; }
.pmg-body a, .pmg-diy__more a, .pmg-help__copy p a { color: #0A6FA8; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pmg-h2 { margin: 58px 0 0; padding-bottom: .08em; font: 700 clamp(25px, 1rem + 1.2vw, 33px)/1.24 var(--f-display); letter-spacing: -.02em; color: #082238; scroll-margin-top: 100px; text-wrap: balance; }
.pmg-h2:first-child { margin-top: 0; }
.pmg-h3 { display: flex; align-items: center; gap: 12px; margin: 34px 0 8px; font: 700 20px/1.32 var(--f-display); color: #082238; }
.pmg-h3 span { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #082238; color: #fff; font-size: 14px; box-shadow: 0 0 0 4px #E6F6FB; }
.pmg-answer { margin: 14px 0 22px; padding: 18px 20px 18px 22px; border-radius: 4px 16px 16px 4px; background: linear-gradient(90deg, #EAF7F4, #F3F7F9); border-left: 4px solid #1D3F8F; font-weight: 500; color: #082238; }
.pmg-answer::before { content: "In short"; display: block; margin-bottom: 6px; font: 700 11.5px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #1D3F8F; }
.pmg-side { position: sticky; top: 100px; }
.pmg-side__card { padding: 22px; border-radius: 20px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 24px 50px -40px rgba(8,34,56,.6); }
.pmg-side__t { margin: 0 0 10px; font: 700 12px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #0A6FA8; }
.pmg-side ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.pmg-side li a { display: block; padding: 8px 10px; border-radius: 10px; color: #082238; font: 600 15px/1.3 var(--f-display); text-decoration: none; }
.pmg-side li a:hover { background: #F3F7F9; }
.pmg-side__tip { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: #FFF6DE; font-size: 14px; line-height: 1.5; color: #5B4300; }
.pmg-side__go { display: inline-block; margin-top: 12px; font: 600 14.5px/1.3 var(--f-body); color: #0A6FA8; text-decoration: none; }

/* mapper */
.pmg-mapper { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "src src" "panel ready"; gap: 18px 24px; margin-top: 30px; }
.pmg-src { grid-area: src; display: flex; flex-wrap: wrap; gap: 8px; }
.pmg-src button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid #CBD5E1; background: #fff; font: 600 14.5px/1.2 var(--f-body); color: #082238; cursor: pointer; transition: background 200ms, border-color 200ms, color 200ms, box-shadow 200ms; }
.pmg-src button img { width: auto; height: 18px; }
.pmg-src button:hover { border-color: #0A6FA8; }
.pmg-src button:focus-visible { outline: 3px solid #00A3D9; outline-offset: 2px; }
.pmg-src button[aria-pressed="true"] { background: #082238; border-color: #082238; color: #fff; box-shadow: 0 10px 22px -14px rgba(8,34,56,.8); }
.pmg-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.pmg-panels { grid-area: panel; min-width: 0; }
.pmg-panel { padding: 22px; border-radius: 20px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 30px 60px -44px rgba(8,34,56,.55); animation: pmg-in 420ms cubic-bezier(.2,.8,.2,1); }
@keyframes pmg-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pmg-panel__how { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: #E8F5FC; font-size: 15px; line-height: 1.55; color: #082238; }
.pmg-panel__how b { display: block; margin-bottom: 2px; font: 700 11.5px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #0B5E8C; }
.pmg-tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.pmg-tbl th, .pmg-tbl td { padding: 9px 10px; text-align: left; border-bottom: 1px solid #F1F5F9; vertical-align: top; }
.pmg-tbl thead th { font: 700 12px/1.3 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #475569; }
.pmg-tbl td:first-child { color: #475569; width: 44%; }
.pmg-tbl td:last-child { color: #082238; font-weight: 600; }
.pmg-tbl td:last-child::before { content: "→ "; color: #00897F; }
.pmg-panel__k { margin: 18px 0 8px; font: 700 12px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #9A3412; }
.pmg-chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.pmg-chips li { padding: 6px 11px; border-radius: 999px; background: #FFF1EC; border: 1px dashed #E8A48C; font: 600 13.5px/1.3 var(--f-body); color: #7C2D12; }
.pmg-panel__go { display: inline-block; margin-top: 18px; font: 700 15px/1.4 var(--f-body); color: #0A6FA8; text-decoration: underline; text-underline-offset: 3px; }
.pmg-ready { grid-area: ready; align-self: start; padding: 22px; border-radius: 20px; background: #082238; color: #fff; }
.pmg-ready__t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 12px; font: 700 17px/1.3 var(--f-display); padding-bottom: .08em; }
.pmg-ready__t span { flex: none; font: 600 13.5px/1 var(--f-body); color: #BFD3E2; }
.pmg-ready__t b { font: 800 20px/1 var(--f-display); color: #FFB81C; }
.pmg-ready__list { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 4px; }
.pmg-ready__list label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: 10px; cursor: pointer; font-size: 15px; line-height: 1.4; color: #E2EEF6; transition: background 200ms; }
.pmg-ready__list label:hover { background: rgba(255,255,255,.06); }
.pmg-ready__list input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: #00B2A9; }
.pmg-ready__list input:focus-visible { outline: 3px solid #00A3D9; outline-offset: 2px; }
.pmg-ready__go { width: 100%; justify-content: center; }
.pmg-ready__note { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: #BFD3E2; min-height: 2.6em; }

/* mid kit sections */
.pmg-diy .mk-split, .pmg-oops .mk-flip { margin-top: 30px; }
.pmg-diy__more { max-width: 72ch; margin: 26px 0 0; font-size: 16.5px; line-height: 1.65; color: #334155; }

/* first 30 days */
.pmg-thirty__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.pmg-thirty__p { margin: 0; font-size: 16.5px; line-height: 1.65; color: #334155; }
.pmg-weeks { position: relative; margin: 0; padding: 0 0 0 26px; list-style: none; display: grid; gap: 14px; }
.pmg-weeks::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: linear-gradient(#1D3F8F, #00A3D9, #3FB97A); }
.pmg-weeks li { position: relative; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid #E2E8F0; }
.pmg-weeks li::before { content: ""; position: absolute; left: -26px; top: 20px; width: 12px; height: 12px; margin-left: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #00A3D9; }
.pmg-weeks__w { font: 700 12px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #0B5E8C; }
.pmg-weeks h3 { margin: 4px 0 4px; font: 700 18px/1.3 var(--f-display); color: #082238; padding-bottom: .06em; }
.pmg-weeks p { margin: 0; font-size: 15.5px; line-height: 1.55; color: #334155; }

/* help + routes */
.pmg-help__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.pmg-help__copy > p:not(.hp-kick):not(.pg-answer) { margin: 0 0 16px; font-size: 16.5px; line-height: 1.65; color: #334155; }
.pmg-routes { padding: 22px; border-radius: 20px; background: #fff; border: 1px solid #E2E8F0; }
.pmg-routes__t { margin: 0 0 10px; font: 700 12px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #0A6FA8; }
.pmg-routes ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.pmg-routes li a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: 10px; color: #082238; font: 600 15px/1.3 var(--f-display); text-decoration: none; transition: background 200ms; }
.pmg-routes li a img { width: auto; height: 16px; flex: none; }
.pmg-routes li a:hover { background: #F3F7F9; }
.pmg-routes li a::after { content: "→"; margin-left: auto; color: #0A6FA8; }
.pmg-routes__more { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #E2E8F0; font-size: 14.5px; color: #475569; }
.pmg-routes__more a { color: #0A6FA8; font-weight: 600; }

@media (max-width: 1000px) {
  .pmg-hero__grid, .pmg-art__grid, .pmg-thirty__grid, .pmg-help__grid { grid-template-columns: minmax(0, 1fr); }
  .pmg-side { position: static; order: -1; }
  .pmg-side ol { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .pmg-mapper { grid-template-columns: minmax(0, 1fr); grid-template-areas: "src" "panel" "ready"; }
}
@media (max-width: 640px) {
  .pmg-body { font-size: 16.5px; }
  .pmg-patch { padding: 16px 12px 14px; }
  .pmg-patch__board { padding: 12px 8px 14px; }
  .pmg-patch__col li { font-size: 11.5px; padding-left: 8px; }
  .pmg-patch__col--z li { padding: 0 6px 0 0; }
  .pmg-src { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .pmg-src button { flex: none; }
  .pmg-panel, .pmg-ready, .pmg-routes { padding: 18px 16px; }
  .pmg-tbl { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .pmg-patch__wires path, .pmg-patch__col li, .pmg-patch__col i { transition: none; }
  .pmg-panel { animation: none; }
}