.canvas-hero{padding:1.5rem 0 2rem}
.canvas{background:#e6e6e6;border-radius:10px;padding:1.2rem;display:grid;grid-template-columns:1fr 1.05fr;gap:1.2rem;align-items:start}
@media(max-width:900px){.canvas{grid-template-columns:1fr}}
.artboard{background:#fff;border:1px solid #d0d0d0;border-radius:8px;padding:1.15rem 1.2rem;position:relative}
.artboard h1{font-size:clamp(1.18rem,3.2vw,1.55rem);line-height:1.35;margin:.4rem 0 .55rem}
.artboard h1 em{color:#7b61ff;font-style:normal}
.artboard .desc{color:#6b6b6b;font-size:.86rem;margin-bottom:1rem}
.artboard .btns{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.trust{display:flex;flex-wrap:wrap;gap:.45rem}
.trust span{background:#f3f0ff;color:#5a4a9a;border-radius:4px;padding:.3rem .55rem;font-size:.7rem}
.trust strong{color:#7b61ff}
.preview{position:relative}
.preview img{width:100%;border-radius:6px;border:1px dashed #c8c8c8}
.prev-tag{position:absolute;bottom:8px;right:8px;background:#7b61ff;color:#fff;font-size:.6rem;font-weight:800;padding:.15rem .4rem;border-radius:3px}

.auto-row{display:flex;gap:12px;flex-wrap:wrap}
.auto-row .comp{flex:1 1 220px;padding:1rem;position:relative}
.comp .var{font-size:.62rem;color:#7b61ff;font-weight:800;letter-spacing:.04em;margin:.15rem 0 .35rem}
.comp h3{font-size:.9rem;margin-bottom:.3rem}
.comp p{font-size:.78rem;color:#6b6b6b}

.flow-path{display:grid;grid-template-columns:1fr 24px 1fr 24px 1fr;align-items:center;gap:.2rem}
@media(max-width:768px){.flow-path{grid-template-columns:1fr}}
.flow-node{padding:.95rem .85rem;position:relative}
.flow-node .fn{font-size:.62rem;color:#7b61ff;font-weight:800;margin-bottom:.25rem}
.flow-node h3{font-size:.86rem;margin-bottom:.2rem}
.flow-node p{font-size:.76rem;color:#6b6b6b}
.flow-line{height:2px;background:#7b61ff;align-self:center}
@media(max-width:768px){.flow-line{width:2px;height:18px;margin:0 auto}}

.dual-frame{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:768px){.dual-frame{grid-template-columns:1fr}}
.dual-frame .frame{padding:0;overflow:hidden}
.dual-frame .fh{background:#f5f5f5;padding:.45rem .85rem;font-size:.7rem;font-weight:800;color:#7b61ff;border-bottom:1px solid #e5e5e5}
.dual-frame .fb{padding:.85rem .95rem}
.dual-frame h3{font-size:.86rem;margin-bottom:.4rem}
.dual-frame li{font-size:.78rem;color:#6b6b6b;padding:.2rem 0}
.shot{margin-top:1.15rem;max-width:640px;position:relative}
.shot img{width:100%;border-radius:8px;border:1px solid #e5e5e5}

.fig-cta{background:#2c2c2c;padding:2rem 0;text-align:center}
.fig-cta h2{color:#fff;font-size:clamp(1.04rem,3vw,1.32rem);margin-bottom:.35rem}
.fig-cta p{color:#b8b8b8;font-size:.82rem;margin-bottom:1rem}