/* Landing page of the tools site (sites/tools/index.main.html).  Token-driven: works in light and dark. */
.tl-hero{padding-block:clamp(56px,9vw,120px)}
.tl-hero-inner{max-width:980px;margin-inline:auto;padding-inline:20px}
.tl-title{font-size:clamp(28px,4.6vw,54px);line-height:1.35;margin:14px 0 14px;color:var(--text-strong)}
.tl-title em{font-style:normal;color:var(--gold-text)}
.tl-lead{font-size:clamp(15px,1.5vw,18px);line-height:2;color:var(--text-muted);max-width:760px;margin:0 0 22px}
.tl-trust{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;padding:0;margin:26px 0 0;color:var(--text-muted);font-size:13.5px}
.tl-trust li:before{content:"✓";color:var(--gold-text);margin-inline-end:7px;font-weight:700}
.tl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;max-width:1180px;margin:0 auto;padding:0 20px}
.tl-card{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:20px;text-decoration:none;color:var(--text-strong);transition:transform .2s,border-color .2s}
.tl-card:hover{transform:translateY(-4px)}
.tl-card h3{margin:0;font-size:19px}
.tl-card p{margin:0;color:var(--text-muted);line-height:1.9;font-size:14px;flex:1}
.tl-num{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--gold-text);color:var(--gold-text);font-weight:800}
.tl-more{color:var(--gold-text);font-weight:700;font-size:14px}
.tl-steps{max-width:900px;margin:0 auto;padding:0 20px;list-style:none;counter-reset:s;display:grid;gap:14px}
.tl-steps li{counter-increment:s;display:grid;gap:4px;padding:18px 18px 18px 22px;border-radius:16px;border:1px solid rgba(var(--ink-rgb),.14);position:relative;padding-inline-start:68px}
.tl-steps li:before{content:counter(s);position:absolute;inset-inline-start:18px;top:16px;width:36px;height:36px;border-radius:50%;background:var(--gold-text);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.tl-steps b{font-size:17px;color:var(--text-strong)}
.tl-steps span{color:var(--text-muted);line-height:1.9;font-size:14.5px}
.tl-features{max-width:1100px;margin:0 auto;padding:0 20px;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.tl-features li{display:grid;gap:4px;padding:16px 18px;border-radius:14px;border:1px solid rgba(var(--ink-rgb),.14)}
.tl-features b{color:var(--text-strong)}
.tl-features span{color:var(--text-muted);line-height:1.85;font-size:14px}
.tl-cta{text-align:center}
.tl-cta-inner{max-width:720px;margin:0 auto;padding:10px 20px}
.tl-cta-inner .hero-actions{justify-content:center}
.tl-faq{max-width:860px;margin:0 auto;padding:0 20px;display:grid;gap:10px}
.tl-faq details{border:1px solid rgba(var(--ink-rgb),.16);border-radius:14px;background:rgba(var(--ink-rgb),.03);overflow:hidden}
.tl-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;font-weight:700;color:var(--text-strong)}
.tl-faq summary::-webkit-details-marker{display:none}
.tl-faq summary i{width:10px;height:10px;border-inline-end:2px solid var(--gold-text);border-bottom:2px solid var(--gold-text);transform:rotate(45deg);transition:transform .2s;flex:none}
.tl-faq details[open] summary i{transform:rotate(-135deg)}
.tl-faq summary:focus-visible{outline:3px solid var(--gold-text);outline-offset:-3px}
.tl-faq .faq-a{padding:0 18px 16px;color:var(--text-muted);line-height:1.95;font-size:14.5px}
.tl-faq .faq-a p{margin:0}
.tl-mail{color:var(--gold-text);font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.tl-faq summary i{transition:none}}
.tl-head{display:block!important;max-width:860px;margin:0 auto 28px;padding:0 20px;text-align:center}
.tl-head h2{font-size:clamp(26px,3.6vw,40px)!important;line-height:1.35;margin:6px 0 8px;color:var(--text-strong);text-shadow:none;-webkit-text-stroke:0}
.tl-head p{color:var(--text-muted);margin:0 auto;max-width:640px;line-height:1.9}
.tl-head .eyebrow{color:var(--gold-text);font-weight:700;letter-spacing:.02em;margin:0}
.tl-hero .btn-ghost-lg,.tl-cta .btn-ghost-lg{border:1px solid rgba(255,255,255,.4)}
.tl-hero .btn-ghost-lg:hover,.tl-cta .btn-ghost-lg:hover{background:rgba(255,255,255,.08)}

/* v11: interaction states + typography (web interface guidelines) */
.tl-title,.tl-head h2,.tl-cta-inner h2{text-wrap:balance}
.tl-lead,.tl-head p,.tl-steps span,.tl-features span,.tl-card p{text-wrap:pretty}
.tl-card:focus-visible,.tl-mail:focus-visible,.tl-hero a:focus-visible,.tl-cta a:focus-visible{outline:3px solid var(--gold-text);outline-offset:3px}
.tl-card,.tl-faq summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.tl-features li,.tl-steps li{min-width:0;overflow-wrap:anywhere}
#tools,#how,#features,#services,#faq,#contact{scroll-margin-top:84px}