/* Conversion examples: scoped to the five conversion landing pages. */
.conversion-example{position:relative;z-index:2;max-width:960px;margin:8px auto 48px;padding:0 24px;scroll-margin-top:100px}
.conversion-example h2{font-size:clamp(21px,3vw,29px);font-weight:600;line-height:1.4;color:var(--paper)}
.conversion-example p{color:var(--mut);font-size:14px;line-height:1.8;margin:10px 0 18px}
.example-kicker{color:var(--brand2);font-size:12px;font-weight:600;letter-spacing:.05em;display:block;margin-bottom:8px}
.example-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
.example-pair figure{margin:0;min-width:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--night2)}
.example-pair figcaption{display:flex;justify-content:space-between;gap:8px;padding:11px 15px;font-size:13px;font-weight:500;color:var(--paper)}
.example-pair figcaption span{font-family:var(--mono);color:var(--mut);direction:ltr}
.example-canvas{background-color:#fff;background-image:linear-gradient(45deg,#e9e9e9 25%,transparent 25%),linear-gradient(-45deg,#e9e9e9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9e9e9 75%),linear-gradient(-45deg,transparent 75%,#e9e9e9 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;display:flex;align-items:center;justify-content:center;padding:18px}
.example-canvas img{display:block;width:100%;max-width:260px;height:auto;aspect-ratio:1;object-fit:contain}
.example-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.example-actions a,.example-actions button{font:inherit;font-size:13px;line-height:1.5;border:1px solid var(--line);border-radius:9px;padding:11px 15px;background:var(--night2);color:var(--paper);cursor:pointer;text-decoration:none;min-height:44px}
.example-actions button{background:var(--brand);border-color:var(--brand);color:#1a0e00;font-weight:600}
.example-actions a:hover{border-color:var(--brand2);color:var(--brand2)}
.example-actions button:hover{background:var(--brand2)}
.example-actions :focus-visible{outline:2px solid var(--brand2);outline-offset:4px}
.example-actions button:disabled{opacity:.6;cursor:wait}
.conversion-example .example-status{min-height:1.8em;margin:8px 0 0;color:var(--brand2)}
.conversion-example .example-related{border-top:1px solid var(--line);padding-top:16px;margin:12px 0 0}
.example-related a{text-decoration:underline;text-underline-offset:3px}
.dxf-hint{color:var(--mut);font-size:13px;line-height:1.7;text-align:center;margin:12px 0}
@media(max-width:540px){.example-pair{gap:10px}.example-canvas{padding:8px}.example-pair figcaption{padding:10px;font-size:12px;flex-wrap:wrap}.example-actions{align-items:stretch}.example-actions a,.example-actions button{flex:1 1 145px;text-align:center}.conversion-example{padding:0 18px}}