/* Tools share the existing design tokens and isolate all additions to tool pages. */
.page-tool .sn-tool-hero{padding-top:28px}
.page-tool .sn-title{font-size:clamp(42px,5.4vw,70px);max-width:880px}
.page-tool .sn-lead{max-width:670px}
.sn-tool-how .sn-section-heading{max-width:780px}
.sn-tool-how .sn-flow-step{align-items:flex-start}
.sn-tool-features{padding:64px 28px 72px;background:var(--sn-paper)}
.sn-tool-feature-intro{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:36px;align-items:center;margin-bottom:32px;min-height:215px}
.sn-tool-feature-intro .sn-section-heading{margin:0;max-width:680px}
.sn-tool-feature-intro .sn-section-heading>p:last-child{margin-top:18px;max-width:580px;color:var(--sn-muted);font-size:15px;line-height:1.8}
.sn-tool-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}
.sn-tool-feature{padding:27px;border:1px solid var(--sn-line);border-radius:22px;background:var(--sn-card)}
.sn-tool-feature h3{margin:18px 0 10px;font-size:18px;font-weight:700;line-height:1.35;letter-spacing:-.025em}
.sn-tool-feature p{font-size:13px;line-height:1.8;color:var(--sn-muted)}
.sn-tool-art{height:210px;position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate}
.sn-tool-art:before{content:"";position:absolute;width:190px;height:190px;border-radius:50%;background:var(--sn-soft);z-index:-1}
.sn-tool-record{display:flex;align-items:center;justify-content:center;width:145px;height:145px;border-radius:50%;border:1px solid var(--sn-line);background:repeating-radial-gradient(circle at center,var(--sn-card) 0,var(--sn-card) 10px,var(--sn-line) 11px,var(--sn-card) 12px);color:var(--sn-accent);box-shadow:0 13px 30px #153a1d0d}
.sn-tool-record>svg{box-sizing:content-box;padding:19px;border:1px solid var(--sn-line);border-radius:50%;background:var(--sn-soft)}
.sn-tool-file-tag{position:absolute;inset-inline-end:10px;bottom:24px;display:grid;gap:3px;min-width:77px;padding:14px 18px;border:1px solid var(--sn-line);border-radius:13px;background:var(--sn-card);box-shadow:0 8px 18px #183d1d0c;font-size:21px;line-height:1.1;font-weight:750;color:var(--sn-ink);transform:rotate(8deg)}
.sn-tool-file-tag>span{font-size:8px;letter-spacing:.17em;color:var(--sn-muted)}
.sn-tool-story-phone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:118px;height:190px;border:5px solid var(--sn-ink);border-radius:23px;background:var(--sn-card);box-shadow:12px 12px 0 var(--sn-line);transform:rotate(5deg)}
.sn-tool-story-bars{position:absolute;top:13px;left:8px;right:8px;display:flex;gap:3px}.sn-tool-story-bars>i{height:3px;flex:1;border-radius:9px;background:var(--sn-line)}.sn-tool-story-bars>i:first-child{background:var(--sn-accent)}
.sn-tool-story-ring{display:flex;align-items:center;justify-content:center;width:75px;height:75px;border:3px solid var(--sn-accent);border-radius:50%;color:var(--sn-accent);background:var(--sn-soft)}
.sn-tool-art-caption{position:absolute;bottom:21px;font-size:8px;letter-spacing:.09em;font-weight:700;color:var(--sn-muted)}
.sn-tool-photo{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:130px;height:163px;border:1px solid var(--sn-line);border-radius:14px;background:var(--sn-card);color:var(--sn-accent);box-shadow:0 9px 15px #10291b08}
.sn-tool-photo-front{transform:translate(14px,4px) rotate(8deg)}.sn-tool-photo-back{transform:translate(-14px,-5px) rotate(-11deg);background:var(--sn-soft)}.sn-tool-photo-front>span{font-size:9px;font-weight:700;letter-spacing:.15em}
.sn-tool-result-heading{max-width:850px;margin:0 auto 26px;text-align:center}
.sn-tool-result-heading h1{margin:15px 0 12px;font-size:clamp(32px,4vw,48px);line-height:1.15;font-weight:750;letter-spacing:-.04em}
.sn-tool-result-heading>p:last-child{font-size:14px;line-height:1.75;color:var(--sn-muted)}
.sn-tool-notice{max-width:850px;margin:0 auto 24px;padding:19px 22px;border:1px solid var(--sn-line);border-radius:16px;background:var(--sn-card);color:var(--sn-ink)}
.sn-tool-notice h2{font-size:16px;font-weight:700;margin-bottom:7px;line-height:1.5}.sn-tool-notice p{color:var(--sn-muted);font-size:13px;line-height:1.7}
.sn-tool-audio{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px 17px;max-width:850px;margin:0 auto 23px;padding:23px;border:1px solid var(--sn-line);border-radius:21px;background:var(--sn-card)}
.sn-tool-audio-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;flex:none;border-radius:15px;background:var(--sn-soft);color:var(--sn-accent)}
.sn-tool-audio h2{font-size:17px;font-weight:700;margin-bottom:6px}.sn-tool-audio p{font-size:12px;line-height:1.7;color:var(--sn-muted)}
.sn-tool-audio audio{display:block;width:100%;max-width:100%;height:54px;grid-column:1/-1;margin-top:5px}
.sn-tool-result-mp3 .sn-result-action--audio{background:var(--sn-accent);border-color:var(--sn-accent);color:#fff}.dark .sn-tool-result-mp3 .sn-result-action--audio{color:#122616}
@media(max-width:767px){
 .page-tool .sn-tool-hero{padding-top:22px}
 .page-tool .sn-title{font-size:clamp(37px,9vw,53px);letter-spacing:-.05em}.page-tool .sn-lead{font-size:15px}
 .sn-tool-features{padding:43px 22px 48px}.sn-tool-feature-intro{grid-template-columns:1fr;gap:8px;margin-bottom:25px}.sn-tool-art{height:178px;width:230px;margin-inline:auto}.sn-tool-art:before{width:160px;height:160px}
 .sn-tool-feature-grid{grid-template-columns:1fr;gap:13px}.sn-tool-feature{padding:24px}.sn-tool-feature h3{font-size:18px;margin-top:15px}
 .sn-tool-story-phone{width:103px;height:164px}.sn-tool-story-ring{width:64px;height:64px}.sn-tool-story-ring svg{width:33px;height:33px}.sn-tool-art-caption{bottom:17px;font-size:7px}
 .sn-tool-photo{width:115px;height:144px}.sn-tool-record{width:132px;height:132px}.sn-tool-record>svg{padding:15px}.sn-tool-file-tag{bottom:14px;inset-inline-end:15px}
 .sn-tool-audio{padding:19px;gap:10px 13px}.sn-tool-audio-icon{width:45px;height:45px}.sn-tool-audio-icon>svg{width:25px;height:25px}.sn-tool-audio h2{font-size:16px}.sn-tool-result-heading>p:last-child{font-size:13px}
}
@media(max-width:389px){.page-tool .sn-title{font-size:36px}.sn-tool-features{padding-inline:20px}}
@media print{.sn-tool-art,.sn-tool-audio{display:none}}