/* /migration/ (zplCore Capture): page styles on top of /css/site.css. Plain CSS (no Tailwind build needed); light by
   default, html.dark for the dark theme (set by /js/theme.js). Brand: ink #1c2b40, accent #c2570a / #f59a4a. */
.mg{--mg-ink:#1c2b40;--mg-em:#c2570a;--mg-ems:#f59a4a;--mg-line:rgba(15,23,42,.09);--mg-card:#fff;--mg-sub:#475569;--mg-ok:#15803d;--mg-okb:rgba(34,197,94,.12);--mg-warn:#b45309;--mg-warnb:rgba(245,158,11,.14)}
html.dark .mg{--mg-line:rgba(255,255,255,.1);--mg-card:#111a2e;--mg-sub:#94a3b8;--mg-ok:#4ade80;--mg-okb:rgba(74,222,128,.12);--mg-warn:#fbbf24;--mg-warnb:rgba(251,191,36,.12)}
.mg img{max-width:100%;height:auto}

/* hero */
.mg-hero{position:relative;overflow:hidden;border-radius:1.5rem;background:radial-gradient(1200px 500px at 85% -10%,rgba(245,154,74,.22),transparent 60%),radial-gradient(900px 500px at -10% 110%,rgba(56,189,248,.14),transparent 60%),#1c2b40;color:#fff;padding:2.5rem 1.25rem;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
html.dark .mg-hero{background:radial-gradient(1200px 500px at 85% -10%,rgba(245,154,74,.2),transparent 60%),radial-gradient(900px 500px at -10% 110%,rgba(56,189,248,.12),transparent 60%),#111a2e}
@media (min-width:640px){.mg-hero{padding:3rem}}
.mg-hero .iso{position:absolute;inset:0;opacity:.6;pointer-events:none}
.mg-hero>*{position:relative}
.mg-hgrid{display:grid;gap:2.5rem;align-items:center}
@media (min-width:1024px){.mg-hgrid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:3rem}}
.mg-hero h1{color:#fff;font-size:clamp(1.75rem,4.2vw,2.75rem);line-height:1.1;margin:0 0 1rem;letter-spacing:-.02em}
.mg-hero h1 em{font-style:normal;background:linear-gradient(90deg,#f59a4a,#fbbf24);-webkit-background-clip:text;background-clip:text;color:transparent}
.mg-hero .mg-lead{font-size:1.125rem;font-weight:300;line-height:1.6;color:#cbd5e1;margin:0;max-width:38rem}
.mg-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;font-size:.875rem;font-weight:600;color:#f59a4a;margin:0 0 1rem}
.mg-pill{display:inline-flex;align-items:center;gap:.4rem;border-radius:9999px;padding:.125rem .625rem;font-size:.75rem;font-weight:600;background:rgba(245,154,74,.15);color:#f59a4a;box-shadow:inset 0 0 0 1px rgba(245,154,74,.4)}
.mg-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.mg-btn2{display:inline-flex;min-height:48px;align-items:center;justify-content:center;gap:.5rem;border-radius:9999px;padding:0 1.5rem;font-size:15px;font-weight:500;color:#fff;text-decoration:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);transition:background-color .15s}
.mg-btn2:hover{background:rgba(255,255,255,.1)}
.mg-hero .cf-btn{width:auto}
.mg-stats{display:flex;flex-wrap:wrap;gap:1.25rem 2rem;margin:2rem 0 0;padding:0;list-style:none}
.mg-stats li{display:flex;flex-direction:column}
.mg-stats b{font-size:1.6rem;font-weight:700;line-height:1.1;color:#fff;font-variant-numeric:tabular-nums}
.mg-stats b.ok{color:#4ade80}
.mg-stats span{font-size:.8rem;color:#94a3b8}
.mg-hnote{margin:1.5rem 0 0;font-size:.8rem;line-height:1.5;color:#94a3b8;max-width:38rem;display:flex;gap:.5rem}
.mg-hnote svg{flex:none;margin-top:.15rem;color:#f59a4a}
.mg-hnote a{color:#f59a4a;text-decoration:underline;text-underline-offset:2px}

/* app window frame */
.mg-win{border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.12);transform:perspective(1600px) rotateY(-4deg) rotateX(2deg);transition:transform .4s ease}
.mg-win:hover{transform:none}
@media (prefers-reduced-motion:reduce){.mg-win{transform:none;transition:none}}
.mg-win.flat{transform:none;box-shadow:0 20px 40px -24px rgba(15,23,42,.45),0 0 0 1px var(--mg-line)}
.mg-wbar{display:flex;align-items:center;gap:.5rem;height:30px;padding:0 0 0 .7rem;background:#f1f5f9;border-bottom:1px solid #e2e8f0;font:500 12px/1 Roboto,system-ui,sans-serif;color:#334155}
.mg-wbar img{width:16px;height:16px}
.mg-wbar .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-wbar .c{display:flex;height:100%}
.mg-wbar .c i{width:38px;display:grid;place-items:center;color:#64748b;font-style:normal;font-size:12px}
.mg-win>img,.mg-win picture img{display:block;width:100%}
.mg-float{position:absolute;right:-6px;bottom:-18px;display:flex;align-items:center;gap:.6rem;border-radius:14px;background:#fff;color:#1c2b40;padding:.6rem .9rem;box-shadow:0 18px 40px -16px rgba(0,0,0,.6);font-size:.8rem;line-height:1.25}
.mg-float b{display:block;font-size:.9rem}
.mg-float .ck{width:28px;height:28px;border-radius:9999px;background:#dcfce7;color:#15803d;display:grid;place-items:center;flex:none}
@media (max-width:639.98px){.mg-float{position:static;margin-top:1rem;display:inline-flex}}
.mg-shot{position:relative;min-width:0}

/* sections */
.mg-sec h2 em{font-style:normal;color:var(--mg-em)}
html.dark .mg-sec h2 em{color:var(--mg-ems)}
.mg-legalbar{margin-top:1.25rem;border-radius:14px;padding:.85rem 1rem;display:flex;gap:.75rem;align-items:flex-start;font-size:.875rem;line-height:1.55;background:var(--mg-warnb);color:inherit;box-shadow:inset 0 0 0 1px rgba(245,158,11,.35)}
.mg-legalbar svg{flex:none;color:var(--mg-warn);margin-top:.1rem}
.mg-legalbar a{color:var(--mg-em);text-decoration:underline;text-underline-offset:2px;font-weight:500}
html.dark .mg-legalbar a{color:var(--mg-ems)}

/* steps */
.mg-steps{display:grid;gap:1.25rem;margin-top:2rem;counter-reset:mg;list-style:none;padding:0}
@media (min-width:900px){.mg-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mg-step{position:relative;display:flex;flex-direction:column;border-radius:1.25rem;background:var(--mg-card);box-shadow:0 0 0 1px var(--mg-line),0 8px 24px -12px rgba(15,23,42,.12);overflow:hidden}
.mg-step .pic{position:relative;background:linear-gradient(180deg,#eef2f7,#e2e8f0);padding:1.25rem 1.25rem 0;display:flex;justify-content:center;height:260px;overflow:hidden}
.mg-step .pic img{width:88%;max-width:340px;align-self:flex-start;border-radius:6px 6px 0 0;box-shadow:0 10px 30px -10px rgba(15,23,42,.35)}
.mg-step .pic a.zoom{display:flex;justify-content:center;width:100%;cursor:zoom-in}
.mg-step .pic a.zoom img{width:88%}
.mg-step .pic a.zoom:focus-visible{outline:2px solid #c2570a;outline-offset:-2px}
.mg-step .pic .tag{position:absolute;left:.85rem;top:.85rem;z-index:1;border-radius:9999px;padding:.2rem .6rem;font-size:.7rem;font-weight:600;background:#1c2b40;color:#fff}
.mg-step .pic .tag.em{background:#c2570a}
.mg-step .pic .tag.ok{background:#15803d}
.mg-step .pic::after{content:"";position:absolute;inset:auto 0 0 0;height:60px;background:linear-gradient(transparent,rgba(226,232,240,.95))}
.mg-step .txt{padding:1.25rem 1.4rem 1.5rem}
.mg-step h3{display:flex;align-items:center;gap:.6rem;margin:0 0 .5rem}
.mg-step h3::before{counter-increment:mg;content:counter(mg);flex:none;width:28px;height:28px;border-radius:9999px;display:grid;place-items:center;font-size:.85rem;background:linear-gradient(135deg,#c2570a,#e8741a);color:#fff}
.mg-step p{margin:0;font-size:.95rem;line-height:1.6;color:var(--mg-sub)}
.mg-step code{white-space:nowrap}
.mg-step .arrow{display:none}
@media (min-width:900px){.mg-step .arrow{display:grid;place-items:center;position:absolute;right:-22px;top:118px;z-index:2;width:30px;height:30px;border-radius:9999px;background:#c2570a;color:#fff;box-shadow:0 0 0 4px var(--mg-card)}.mg-steps>li:last-child .arrow{display:none}.mg-step{overflow:visible}.mg-step .pic{border-radius:1.25rem 1.25rem 0 0}}
.mg-json{margin:.9rem 0 0;border-radius:10px;background:#0b1120;color:#e2e8f0;font:12px/1.55 "Roboto Mono",ui-monospace,monospace;padding:.75rem .9rem;overflow-x:auto;white-space:pre}
.mg-json .k{color:#93c5fd}.mg-json .s{color:#fdba74}.mg-json .e{color:#86efac}

/* before / after */
.mg-ba{display:grid;gap:2rem;align-items:center;margin-top:2rem}
@media (min-width:960px){.mg-ba{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem}}
.mg-cmp{position:relative;max-width:440px;margin:0 auto;width:100%;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 24px 50px -24px rgba(15,23,42,.5),0 0 0 1px var(--mg-line);user-select:none;-webkit-user-select:none;touch-action:pan-y}
.mg-cmp img{display:block;width:100%;pointer-events:none}
.mg-cmp .over{position:absolute;inset:0;clip-path:inset(0 0 0 var(--mg-x,50%))}
.mg-cmp .lbl{position:absolute;top:.7rem;z-index:2;border-radius:9999px;padding:.2rem .65rem;font-size:.72rem;font-weight:600;color:#fff;pointer-events:none}
.mg-cmp .lbl.l{left:.7rem;background:rgba(28,43,64,.88)}
.mg-cmp .lbl.r{right:.7rem;background:rgba(194,87,10,.92)}
.mg-cmp .bar{position:absolute;top:0;bottom:0;left:var(--mg-x,50%);width:2px;margin-left:-1px;background:#c2570a;z-index:2;pointer-events:none}
.mg-cmp .bar::after{content:"";position:absolute;top:50%;left:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:9999px;background:#c2570a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 0 0 4px rgba(255,255,255,.85),0 6px 16px rgba(0,0,0,.3)}
.mg-cmp input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3}
.mg-cmp input:focus-visible~.bar::after{box-shadow:0 0 0 4px #fff,0 0 0 7px #c2570a}
/* without JS: original and result side by side */
.mg-nojs .mg-cmp{display:grid;grid-template-columns:1fr 1fr;max-width:640px}
.mg-nojs .mg-cmp .over{position:static;clip-path:none}
.mg-nojs .mg-cmp .bar,.mg-nojs .mg-cmp input{display:none}
.mg-cap{font-size:.8rem;line-height:1.5;color:var(--mg-sub);margin:.9rem auto 0;max-width:440px;text-align:center}
.mg-checks{list-style:none;padding:0;margin:1.25rem 0 0;display:grid;gap:.7rem}
.mg-checks li{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;line-height:1.55}
.mg-checks li::before{content:"";flex:none;width:22px;height:22px;margin-top:.05rem;border-radius:9999px;background:var(--mg-okb) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
.mg-checks b{color:var(--mg-ink)}
html.dark .mg-checks b{color:#fff}

/* screenshot tabs (radio inputs, no script) */
.mg-tabs{margin-top:2rem}
.mg-tabs>input{position:absolute;opacity:0;pointer-events:none}
.mg-tl{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.25rem}
.mg-tl label{cursor:pointer;border-radius:9999px;padding:.5rem 1rem;font-size:.875rem;font-weight:500;background:var(--mg-card);box-shadow:inset 0 0 0 1px var(--mg-line);color:inherit;transition:background-color .15s,color .15s}
.mg-tl label:hover{box-shadow:inset 0 0 0 1px var(--mg-em)}
.mg-tp{display:none}
.mg-tp figcaption{font-size:.875rem;line-height:1.55;color:var(--mg-sub);margin-top:1rem;max-width:52rem}
.mg-tp .mg-win.guide{max-width:780px;margin:0 auto}
#mg-t1:checked~.mg-tl label[for=mg-t1],#mg-t2:checked~.mg-tl label[for=mg-t2],#mg-t3:checked~.mg-tl label[for=mg-t3],#mg-t4:checked~.mg-tl label[for=mg-t4]{background:#1c2b40;color:#fff;box-shadow:none}
html.dark #mg-t1:checked~.mg-tl label[for=mg-t1],html.dark #mg-t2:checked~.mg-tl label[for=mg-t2],html.dark #mg-t3:checked~.mg-tl label[for=mg-t3],html.dark #mg-t4:checked~.mg-tl label[for=mg-t4]{background:#fff;color:#1c2b40}
#mg-t1:focus-visible~.mg-tl label[for=mg-t1],#mg-t2:focus-visible~.mg-tl label[for=mg-t2],#mg-t3:focus-visible~.mg-tl label[for=mg-t3],#mg-t4:focus-visible~.mg-tl label[for=mg-t4]{outline:2px solid #c2570a;outline-offset:2px}
#mg-t1:checked~.mg-tp1,#mg-t2:checked~.mg-tp2,#mg-t3:checked~.mg-tp3,#mg-t4:checked~.mg-tp4{display:block}

/* feature tiles */
.mg-tiles{display:grid;gap:1rem;margin-top:2rem}
@media (min-width:640px){.mg-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.mg-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mg-tile{border-radius:1rem;background:var(--mg-card);box-shadow:0 0 0 1px var(--mg-line);padding:1.25rem 1.3rem}
.mg-tile h3{display:flex;align-items:center;gap:.6rem;margin:0 0 .45rem;font-size:1rem}
.mg-tile h3 span{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(194,87,10,.1);color:#c2570a}
html.dark .mg-tile h3 span{background:rgba(245,154,74,.14);color:#f59a4a}
.mg-tile p{margin:0;font-size:.92rem;line-height:1.6;color:var(--mg-sub)}
.mg-tile code{font-size:.8em}

/* programs */
.mg-progs{display:grid;gap:1rem;margin-top:2rem}
@media (min-width:768px){.mg-progs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.mg-progs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mg-prog{display:flex;flex-direction:column;gap:.55rem;border-radius:1rem;background:var(--mg-card);box-shadow:0 0 0 1px var(--mg-line);padding:1.2rem 1.3rem}
.mg-prog h3{margin:0;font-size:1.05rem}
.mg-prog p{margin:0;font-size:.9rem;line-height:1.55;color:var(--mg-sub)}
.mg-tm{font-size:.78rem;line-height:1.5;color:var(--mg-sub);margin:1.25rem 0 0;max-width:56rem}

/* legal */
.mg-legal{display:grid;gap:1rem;margin-top:2rem}
@media (min-width:900px){.mg-legal{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.mg-lmain{align-self:start;border-radius:1.25rem;padding:1.5rem 1.5rem 1.6rem;background:var(--mg-warnb);box-shadow:inset 0 0 0 1px rgba(245,158,11,.35)}
.mg-lmain h3{display:flex;gap:.6rem;align-items:center;margin:0 0 .75rem}
.mg-lmain h3 svg{color:var(--mg-warn)}
.mg-lmain p{margin:0;font-size:1rem;line-height:1.65}
.mg-lmain .src{margin-top:.9rem;font-size:.8rem;color:var(--mg-sub)}
.mg-lside{display:grid;gap:.75rem}
.mg-lside div{border-radius:1rem;background:var(--mg-card);box-shadow:0 0 0 1px var(--mg-line);padding:1rem 1.15rem}
.mg-lside h4{margin:0 0 .3rem;font-size:.95rem;font-weight:700;color:var(--mg-ink)}
html.dark .mg-lside h4{color:#fff}
.mg-lside p{margin:0;font-size:.88rem;line-height:1.55;color:var(--mg-sub)}

/* final call to action */
.mg-end{display:grid;gap:2rem;align-items:center}
@media (min-width:1024px){.mg-end{grid-template-columns:minmax(0,1fr) auto}}
.mg-end h2{color:#fff}
.mg-end p{margin:0;font-size:1.05rem;font-weight:300;line-height:1.6;color:#cbd5e1;max-width:40rem}
.mg-end small{display:block;margin-top:.9rem;font-size:.8rem;color:#94a3b8;max-width:40rem}
.mg-end .mg-cta{margin-top:0}