/* «این ابزار چه کاری می‌کند؟» above a calculator's form */
.tg-guide{margin:0 0 20px;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,var(--brand-soft),var(--surface) 75%)}
.tg-what{display:flex;gap:14px;align-items:flex-start}
.tg-ic{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--brand);background:var(--surface);border:1px solid var(--line)}
.tg-ic svg{width:22px;height:22px}
.tg-what h2{margin:0 0 4px;font-size:16px;font-weight:800;color:var(--ink)}
.tg-what p{margin:0;max-width:80ch;line-height:2;color:var(--text);font-size:14px}
.tg-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;counter-reset:tg}
.tg-steps li{position:relative;padding:10px 12px;padding-inline-start:46px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:13px;line-height:1.9;color:var(--muted);counter-increment:tg}
.tg-steps li::before{content:counter(tg,persian);position:absolute;inset-block-start:10px;inset-inline-start:12px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;font-weight:800;font-size:13px}
:root[data-theme=dark] .tg-steps li::before{color:#0b1020}
.tg-steps b{color:var(--ink)}
@media (max-width:860px){.tg-steps{grid-template-columns:1fr}.tg-guide{padding:14px}}