/* tc-tool-page.css — layout system for the downloader/grabber pages
   ------------------------------------------------------------------
   The five thumbnail downloader/grabber pages (free / youtube / tiktok /
   vimeo thumbnail downloaders + youtube grabber) were authored against a
   `tc-` prefixed class system (.tc-hero/.tc-section/.tc-faq-item/
   .tc-related-tile …) that lived in no stylesheet, and they set no body
   font — so their content rendered unstyled, serif, and flush-left.

   This file defines those tc- classes by mirroring tool-page.css's proven
   .hero/.section/.faq/.related-tile look (it reuses the same --card/--cyan/
   --text-* tokens from tool-page.css :root), plus the DM Sans body font the
   pages were missing. Load AFTER tool-page.css. Linked only by those five
   pages, so it does not affect the rest of the site. */

/* ─── Base font (pages already load DM Sans from Google Fonts) ─── */
body{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}

/* ─── Hero ─── */
.tc-hero{text-align:center;padding:44px 20px 12px;max-width:720px;margin:0 auto}
.tc-h1{font-size:30px;font-weight:800;line-height:1.15;color:var(--text-bright);letter-spacing:-0.5px;margin:0 0 12px}
.tc-h1-accent{color:var(--cyan)}
.tc-h-sub{font-size:14px;color:var(--text-secondary);line-height:1.6;max-width:580px;margin:0 auto}

/* ─── Longform content sections ─── */
.tc-section{max-width:760px;margin:0 auto 22px;padding:0 20px}
.tc-h2{font-size:18px;font-weight:800;color:var(--text-bright);margin:0 0 14px;letter-spacing:-0.2px}
.tc-section p{font-size:13.5px;color:var(--text-secondary);line-height:1.7;margin:0 0 14px}
.tc-section ul,.tc-section ol{font-size:13.5px;color:var(--text-secondary);line-height:1.8;padding-left:22px;margin:0 0 14px}
.tc-section li{margin-bottom:8px}
.tc-section li strong{color:var(--text-bright);font-weight:700}
.tc-section a{color:var(--cyan);text-decoration:none}
.tc-section a:hover{text-decoration:underline;color:#2bd0ff}

/* ─── FAQ (native <details class="tc-faq-item"> / <summary class="tc-faq-q">) ─── */
.tc-section.tc-faq,.tc-faq{max-width:760px;margin:0 auto}
.tc-faq-item{border:1px solid var(--border-soft);background:var(--card);border-radius:12px;margin-bottom:8px;overflow:hidden}
.tc-faq-q{padding:14px 18px;font-size:13.5px;font-weight:700;color:var(--text-bright);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.tc-faq-q::-webkit-details-marker{display:none}
.tc-faq-q::after{content:"+";font-size:17px;line-height:1;color:var(--text-muted);transition:transform .2s;flex-shrink:0}
.tc-faq-item[open] .tc-faq-q::after{transform:rotate(45deg)}
.tc-faq-q:hover{background:rgba(255,255,255,0.02)}
.tc-faq-item[open] .tc-faq-q{border-bottom:1px solid var(--border-subtle)}
.tc-faq-a{padding:14px 18px 16px;font-size:13px;color:var(--text-secondary);line-height:1.7}
.tc-faq-a a{color:var(--cyan);text-decoration:none}
.tc-faq-a a:hover{text-decoration:underline}

/* ─── Related-tools tile grid ─── */
.tc-related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tc-related-tile{background:var(--card);border:1px solid var(--border-soft);border-radius:12px;padding:16px 18px;text-decoration:none;transition:all .15s;display:block}
.tc-related-tile:hover{border-color:rgba(0,194,255,0.45);background:rgba(0,194,255,0.03);transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,0.2)}
.tc-related-tile-title{font-size:13px;font-weight:700;color:var(--text-bright);margin:0 0 4px;letter-spacing:-0.1px}
.tc-related-tile-sub{font-size:11.5px;color:var(--text-muted);line-height:1.5;margin:0}

@media(max-width:600px){.tc-hero{padding:32px 20px 10px}.tc-h1{font-size:24px}.tc-h2{font-size:16px}}
@media(max-width:560px){.tc-related-grid{grid-template-columns:1fr}}