/* Blog article 3: AWS migration checklist (.pxb3-) */
.pxb3-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.pxb3-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; font: 500 14px/1.4 var(--f-body); color: #64748B; }
.pxb3-meta span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 18px; border-radius: 50%; background: #00A3D9; vertical-align: middle; }

/* clipboard visual */
.pxb3-clip { position: relative; margin: 0; justify-self: center; width: min(100%, 400px); }
.pxb3-clip__board { position: relative; padding: 46px 26px 24px; border-radius: 22px; background: linear-gradient(160deg, #0A3A63, #061A2E); box-shadow: 0 40px 80px -40px rgba(8,34,56,.6); transform: rotate(-2deg); }
.pxb3-clip__board::before { content: ""; position: absolute; inset: 30px 14px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #E2E8F0; }
.pxb3-clip__clamp { position: absolute; top: 12px; left: 50%; width: 120px; height: 34px; margin-left: -60px; border-radius: 10px 10px 14px 14px; background: linear-gradient(180deg, #CBD5E1, #94A3B8); box-shadow: 0 6px 12px -6px rgba(0,0,0,.4); z-index: 2; }
.pxb3-clip__clamp::after { content: ""; position: absolute; top: 8px; left: 50%; width: 30px; height: 10px; margin-left: -15px; border-radius: 6px; background: #475569; }
.pxb3-clip__head, .pxb3-clip__list, .pxb3-clip__foot { position: relative; z-index: 1; }
.pxb3-clip__head { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; font: 700 15px/1.2 var(--f-display); color: #082238; }
.pxb3-clip__head img { width: 40px; height: auto; }
.pxb3-clip__head em { margin-left: auto; padding: 3px 8px; border-radius: 999px; background: #F3F7F9; font: 600 11px/1.2 var(--f-body); font-style: normal; color: #64748B; text-transform: uppercase; letter-spacing: .06em; }
.pxb3-clip__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.pxb3-clip__list li { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px dashed #E2E8F0; font: 500 15px/1.3 var(--f-body); color: #334155; }
.pxb3-clip__list i { position: relative; flex: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid #CBD5E1; animation: pxb3Box 7.2s calc(var(--d) * .8s + .4s) infinite; }
.pxb3-clip__list i::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); animation: pxb3Tick 7.2s calc(var(--d) * .8s + .4s) infinite; }
.pxb3-clip__list span { animation: pxb3Done 7.2s calc(var(--d) * .8s + .4s) infinite; }
@keyframes pxb3Box { 0%, 4% { background: transparent; border-color: #CBD5E1; } 8%, 88% { background: #3FB97A; border-color: #3FB97A; } 96%, 100% { background: transparent; border-color: #CBD5E1; } }
@keyframes pxb3Tick { 0%, 4% { transform: rotate(45deg) scale(0); } 9%, 88% { transform: rotate(45deg) scale(1); } 96%, 100% { transform: rotate(45deg) scale(0); } }
@keyframes pxb3Done { 0%, 4% { color: #334155; } 8%, 88% { color: #64748B; } 96%, 100% { color: #334155; } }
.pxb3-clip__foot { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font: 500 13px/1.3 var(--f-body); color: #64748B; }
.pxb3-clip__foot b { color: #082238; }
.pxb3-clip__bar { flex: 1; height: 8px; border-radius: 999px; background: #E2E8F0; overflow: hidden; order: 2; }
.pxb3-clip__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1D3F8F, #00A3D9, #00B2A9, #3FB97A); animation: pxb3Fill 7.2s .4s infinite; transform-origin: left; }
@keyframes pxb3Fill { 0% { transform: scaleX(0); } 70%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.pxb3-clip__stamp { position: absolute; right: -6px; bottom: 54px; z-index: 3; padding: 8px 14px; border: 3px solid #FFB81C; border-radius: 10px; font: 800 13px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: #B7791F; background: rgba(255,255,255,.92); transform: rotate(-12deg); animation: pxb3Stamp 7.2s .4s infinite; }
@keyframes pxb3Stamp { 0%, 66% { opacity: 0; transform: rotate(-12deg) scale(1.6); } 72%, 88% { opacity: 1; transform: rotate(-12deg) scale(1); } 96%, 100% { opacity: 0; transform: rotate(-12deg) scale(1); } }

/* article layout */
.pxb3-art { padding-top: clamp(24px, 4vw, 48px); }
.pxb3-art__grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.pxb3-toc { position: sticky; top: 100px; padding: 20px; border-radius: 18px; background: #F3F7F9; border: 1px solid #E2E8F0; }
.pxb3-toc__t { margin: 0 0 10px; font: 700 12px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #64748B; }
.pxb3-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.pxb3-toc a { display: block; padding: 7px 10px; border-left: 2px solid transparent; border-radius: 0 8px 8px 0; font: 500 14.5px/1.35 var(--f-body); color: #334155; text-decoration: none; }
.pxb3-toc a:hover, .pxb3-toc a.is-on { border-color: #00A3D9; background: #fff; color: #0A6FA8; }
.pxb3-toc__cta { display: inline-block; margin-top: 14px; font: 600 14px/1.3 var(--f-body); color: #0A6FA8; text-decoration: none; }
.pxb3-body { max-width: 72ch; font-size: 17.5px; line-height: 1.72; color: #334155; }
.pxb3-body > p { margin: 0 0 18px; }
.pxb3-body a { color: #0A6FA8; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pxb3-h2 { margin: 56px 0 0; font: 700 clamp(25px, 1rem + 1.2vw, 33px)/1.2 var(--f-display); letter-spacing: -.02em; color: #082238; scroll-margin-top: 100px; text-wrap: balance; }
.pxb3-h2:first-child { margin-top: 0; }
.pxb3-answer { margin: 14px 0 20px; padding: 16px 20px; border-radius: 0 14px 14px 0; border-left: 4px solid #00B2A9; background: linear-gradient(90deg, rgba(0,178,169,.08), rgba(0,178,169,0)); font-weight: 500; color: #082238; }
.pxb3-ticks { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 10px; }
.pxb3-ticks li { position: relative; padding: 12px 16px 12px 46px; border-radius: 12px; background: #fff; border: 1px solid #E2E8F0; }
.pxb3-ticks li::before { content: ""; position: absolute; left: 14px; top: 15px; width: 18px; height: 18px; border-radius: 6px; background: #3FB97A; }
.pxb3-ticks li::after { content: ""; position: absolute; left: 20px; top: 17px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pxb3-ticks b { color: #082238; }
.pxb3-rs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 0 0 22px; counter-reset: rs; }
.pxb3-rs p { position: relative; margin: 0; padding: 16px 16px 14px; border-radius: 14px; background: #F3F7F9; font-size: 15px; line-height: 1.5; }
.pxb3-rs p b { display: block; margin-bottom: 4px; font: 700 17px/1.2 var(--f-display); color: #082238; }
.pxb3-rs p::after { counter-increment: rs; content: "R" counter(rs); position: absolute; right: 12px; top: 12px; font: 800 12px/1 var(--f-display); color: #00A3D9; }
.pxb3-pull { margin: 40px 0 0; padding: 26px 28px; border-radius: 20px; background: linear-gradient(135deg, #061A2E, #0A3A63 55%, #07605E); color: #D6E4EE; }
.pxb3-pull p { margin: 0; font-size: 18px; line-height: 1.6; }
.pxb3-pull b { color: #FFB81C; }

/* interactive checklist */
.pxb3-ck { background: #F3F7F9; }
.pxb3-ck__wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); margin-top: 36px; align-items: start; }
.pxb3-ck__meter { position: sticky; top: 100px; padding: 24px; border-radius: 20px; background: #fff; border: 1px solid #E2E8F0; text-align: center; }
.pxb3-ck__meter svg { display: block; width: 150px; height: 150px; margin: 0 auto; transform: rotate(-90deg); }
.pxb3-ck__track { fill: none; stroke: #E2E8F0; stroke-width: 10; }
.pxb3-ck__ring { fill: none; stroke: #00B2A9; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset 500ms cubic-bezier(.2,.8,.2,1); }
.pxb3-ck__meter > p:first-of-type { position: relative; z-index: 1; margin: -104px 0 50px; font: 500 13px/1.2 var(--f-body); color: #64748B; }
.pxb3-ck__meter > p:first-of-type b { display: block; font: 800 34px/1 var(--f-display); color: #082238; }
.pxb3-ck__meter > p:first-of-type i { font-style: normal; }
.pxb3-ck__say { margin: 0; font-size: 15px; line-height: 1.5; color: #334155; min-height: 3em; }
.pxb3-ck__reset { margin-top: 14px; }
.pxb3-ck__phases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pxb3-ck__ph { margin: 0; padding: 18px 18px 12px; border-radius: 18px; border: 1px solid #E2E8F0; background: #fff; min-width: 0; transition: border-color 300ms, box-shadow 300ms; }
.pxb3-ck__ph.is-full { border-color: #3FB97A; box-shadow: 0 18px 36px -28px rgba(63,185,122,.8); }
.pxb3-ck__ph legend { display: flex; align-items: center; gap: 10px; padding: 0 6px; font: 700 16px/1.2 var(--f-display); color: #082238; }
.pxb3-ck__ph legend span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #082238; color: #fff; font-size: 13px; }
.pxb3-ck__ph.is-full legend span { background: #3FB97A; }
.pxb3-ck__ph label { display: flex; gap: 10px; align-items: flex-start; padding: 8px 4px; border-bottom: 1px solid #F1F5F9; font-size: 15px; line-height: 1.45; cursor: pointer; }
.pxb3-ck__ph label:last-child { border-bottom: 0; }
.pxb3-ck__ph input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #00B2A9; cursor: pointer; }
.pxb3-ck__ph input:checked + * , .pxb3-ck__ph label:has(input:checked) { color: #64748B; text-decoration: line-through; text-decoration-color: rgba(100,116,139,.5); }

@media (max-width: 1000px) {
  .pxb3-hero__grid, .pxb3-art__grid, .pxb3-ck__wrap { grid-template-columns: minmax(0, 1fr); }
  .pxb3-toc, .pxb3-ck__meter { position: static; }
  .pxb3-ck__meter { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0 18px; text-align: left; align-items: center; }
  .pxb3-ck__meter svg { width: 120px; height: 120px; margin: 0; grid-row: span 3; }
  .pxb3-ck__meter > p:first-of-type { margin: 0; }
}
@media (max-width: 640px) {
  .pxb3-ck__phases { grid-template-columns: minmax(0, 1fr); }
  .pxb3-clip__stamp { right: 0; }
  .pxb3-body { font-size: 16.5px; }
  .pxb3-meta span + span::before { display: none; }
  .pxb3-meta { gap: 4px 16px; }
  .pxb3-ck__meter { grid-template-columns: 96px minmax(0, 1fr); }
  .pxb3-ck__meter svg { width: 96px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .pxb3-clip__list i, .pxb3-clip__list i::after, .pxb3-clip__list span, .pxb3-clip__bar i, .pxb3-clip__stamp { animation: none; }
}