/* tools.css, public free-tool pages (lead magnets). Design system in system.css */

.tnav { position:sticky; top:0; z-index:30; background:rgba(255,253,244,0.86); backdrop-filter:blur(8px); border-bottom:1.5px solid var(--ink); }
.tnav-inner { display:flex; align-items:center; gap:var(--s5); padding:14px var(--s6); }
.tnav .brand { display:flex; align-items:center; gap:11px; }
.tnav .bname { font-family:var(--font-pixel); font-size:16px; color:var(--text-bright); letter-spacing:0.04em; }
.tnav-links { display:flex; gap:var(--s5); margin-left:var(--s4); }
.tnav-links a { font-family:var(--font-mono); font-size:13px; color:var(--text-dim); }
.tnav-links a:hover { color:var(--text-bright); }
.tnav-spacer { flex:1; }

.thero { max-width:760px; margin:0 auto; padding:var(--s16) var(--s6) var(--s8); text-align:center; }
.thero .eyebrow { display:block; margin-bottom:var(--s4); }
.thero h1 { font-size:clamp(30px,4.5vw,50px); color:var(--text-bright); margin:0; }
.thero p { font-size:18px; color:var(--text-dim); margin:var(--s5) auto 0; max-width:620px; line-height:1.6; }

.toolwrap { max-width:760px; margin:0 auto; padding:0 var(--s6) var(--s12); display:flex; flex-direction:column; gap:var(--s6); }
.typechips { display:flex; flex-wrap:wrap; gap:9px; }
.typechip { font-family:var(--font-mono); font-size:12.5px; padding:9px 12px; border-radius:10px; cursor:pointer; background:var(--surface-2); border:1px solid var(--line-2); color:var(--text-dim); display:inline-flex; align-items:center; gap:8px; transition:background .16s ease,border-color .16s ease,color .16s ease; }
.typechip:hover { color:var(--text-bright); border-color:var(--line); }
.typechip.active { background:rgba(8,145,178,0.12); border-color:var(--line-strong); color:var(--text-bright); }
.typechip .imp { font-size:9px; letter-spacing:0.1em; padding:2px 5px; border-radius:5px; }
.imp-HIGH { background:rgba(16,185,129,0.16); color:var(--green-soft); }
.imp-MED { background:rgba(244,183,64,0.14); color:var(--amber-soft); }
.imp-LOW { background:rgba(199,208,222,0.08); color:var(--text-faint); }

.fieldlabel { font-family:var(--font-mono); font-size:12px; color:var(--text-dim); letter-spacing:0.04em; margin-bottom:9px; display:block; }
.toolrow { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.toolrow .urlscan { flex:1; min-width:240px; }
.outhead { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.codebox { background:var(--bg); border:1px solid var(--line-2); border-radius:11px; padding:16px; font-family:var(--font-mono); font-size:12.5px; color:var(--green-soft); white-space:pre-wrap; word-break:break-word; max-height:440px; overflow:auto; margin:0; line-height:1.6; }
.copybtn { background:var(--green); color:#04130D; border:none; font-family:var(--font-mono); font-weight:700; font-size:12.5px; padding:9px 15px; border-radius:9px; cursor:pointer; }
.howto { font-size:14px; color:var(--text-dim); line-height:1.7; } .howto b { color:var(--text); }

.toolcta { text-align:center; background:radial-gradient(120% 100% at 50% 0%,rgba(8,145,178,0.12),transparent 65%),var(--surface-1); padding:var(--s10) var(--s8); }
.toolcta h2 { font-family:var(--font-display); font-weight:700; font-size:clamp(21px,2.6vw,29px); color:var(--text-bright); margin:0 0 10px; }
.toolcta p { color:var(--text-dim); margin:0 auto var(--s6); max-width:520px; }

.seo-prose { max-width:760px; margin:0 auto; padding:0 var(--s6) var(--s16); color:var(--text-dim); line-height:1.75; font-size:15.5px; }
.seo-prose h2 { font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--text-bright); margin:var(--s8) 0 var(--s4); }
.seo-prose p { margin:0 0 var(--s4); } .seo-prose b { color:var(--text); }
.why-list { list-style:none; padding:0; margin:var(--s2) 0 0; display:flex; flex-direction:column; gap:var(--s4); }
.why-list li { position:relative; padding-left:26px; color:var(--text-dim); line-height:1.7; }
.why-list li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--green-soft); }
.why-list b { color:var(--text-bright); }
.foundernote { background:radial-gradient(120% 100% at 0% 0%,rgba(8,145,178,0.08),transparent 60%),var(--surface-1); }
.foundernote .fn-h { font-family:var(--font-mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:#0e7490; margin-bottom:14px; }
.foundernote p { color:var(--text); line-height:1.8; font-size:16px; margin:0; }
.foundernote .fn-sig { font-family:var(--font-mono); font-size:13px; color:var(--text-dim); margin-top:16px; }

/* blog + article */
.article { max-width:720px; margin:0 auto; padding:var(--s8) var(--s6) var(--s10); }
.article h1 { font-family:var(--font-display); font-weight:700; font-size:clamp(28px,4vw,42px); color:var(--text-bright); line-height:1.12; margin:0 0 var(--s4); letter-spacing:-0.01em; }
.article-meta { font-family:var(--font-mono); font-size:12.5px; color:var(--text-faint); letter-spacing:0.04em; margin-bottom:var(--s8); display:flex; gap:14px; flex-wrap:wrap; }
.article h2 { font-family:var(--font-display); font-weight:700; font-size:24px; color:var(--text-bright); margin:var(--s8) 0 var(--s4); }
.article h3 { font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--text-bright); margin:var(--s6) 0 var(--s3); }
.article p { color:var(--text-dim); line-height:1.8; font-size:16px; margin:0 0 var(--s4); }
.article ul, .article ol { color:var(--text-dim); line-height:1.8; font-size:16px; margin:0 0 var(--s4); padding-left:22px; }
.article li { margin-bottom:9px; }
.article b, .article strong { color:var(--text); }
.article a { color:var(--green-soft); text-decoration:underline; text-underline-offset:2px; }
.tldr { background:radial-gradient(120% 100% at 0% 0%,rgba(16,185,129,0.08),transparent 60%),var(--surface-1); border:1px solid var(--line-2); border-radius:var(--radius); padding:var(--s5) var(--s6); margin:0 0 var(--s8); }
.tldr .tldr-h { font-family:var(--font-mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--green-soft); margin-bottom:8px; }
.tldr p { margin:0; color:var(--text); line-height:1.7; }
.faqblock { margin-top:var(--s4); }
.faqblock .fitem { border-top:1px solid var(--line-2); padding:var(--s4) 0; }
.faqblock .fq { font-family:var(--font-display); font-weight:600; font-size:16.5px; color:var(--text-bright); margin-bottom:6px; }
.faqblock .fa { color:var(--text-dim); line-height:1.7; font-size:15px; margin:0; }
.post-card { display:flex; flex-direction:column; gap:11px; padding:var(--s6); }
.post-card:hover { border-color:var(--line-strong); transform:translateY(-3px); }
.post-card .pc-tag { font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#0e7490; }
.post-card .pc-h { font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--text-bright); line-height:1.25; }
.post-card .pc-p { font-size:14.5px; color:var(--text-dim); line-height:1.65; }
.post-card .pc-go { font-family:var(--font-mono); font-size:12.5px; color:var(--green-soft); }
.blog-more { text-align:center; color:var(--text-faint); font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.04em; margin-top:var(--s6); }

/* AI Shopping Readiness result */
.bigscore { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.bigscore .n { font-family:var(--font-display); font-weight:700; font-size:60px; line-height:1; }
.bigscore .tier { font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; padding:6px 11px; border-radius:8px; }
.bigscore .tier.tier-ready { color:var(--green-soft); background:rgba(16,185,129,0.14); }
.bigscore .tier.tier-partial { color:var(--amber-soft); background:rgba(244,183,64,0.14); }
.bigscore .tier.tier-weak { color:var(--red-soft); background:rgba(242,84,91,0.14); }
.bigscore .n.tier-ready { color:var(--green-soft); }
.bigscore .n.tier-partial { color:var(--amber-soft); }
.bigscore .n.tier-weak { color:var(--red-soft); }
.ssummary { color:var(--text); font-size:16px; line-height:1.6; margin:14px 0 0; }
.schecks { display:flex; flex-direction:column; margin-top:var(--s5); }
.scheck { display:flex; gap:13px; padding:14px 0; border-top:1px solid var(--line-2); align-items:flex-start; }
.scheck:first-child { border-top:none; }
.scheck .ic { width:22px; height:22px; border-radius:6px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; margin-top:1px; }
.scheck.pass .ic { background:rgba(16,185,129,0.16); color:var(--green-soft); }
.scheck.fail .ic { background:rgba(244,183,64,0.16); color:var(--amber-soft); }
.scheck.warn .ic { background:rgba(244,183,64,0.16); color:var(--amber-soft); }
.scheck.blocked .ic { background:rgba(242,84,91,0.16); color:var(--red-soft); }
.scheck .sl { font-size:15px; color:var(--text-bright); font-weight:600; }
.scheck .sd { font-size:13.5px; color:var(--text-dim); margin-top:3px; line-height:1.55; }

/* GEO Content Score result */
.gsignal { display:flex; gap:14px; padding:13px 0; border-top:1px solid var(--line-2); align-items:flex-start; }
.gsignal:first-child { border-top:none; }
.gsignal .gscore { font-family:var(--font-mono); font-weight:600; font-size:14px; min-width:46px; text-align:right; flex:0 0 auto; }
.gsignal .gl { font-size:15px; color:var(--text-bright); font-weight:600; }
.gsignal .gd { font-size:13.5px; color:var(--text-dim); margin-top:3px; line-height:1.55; }
.gsuggest { margin-top:var(--s6); border-top:1px solid var(--line-2); padding-top:var(--s5); }
.gsuggest .gh { font-family:var(--font-mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--green-soft); margin-bottom:11px; }
.gsuggest ul { margin:0; padding-left:20px; color:var(--text); line-height:1.75; font-size:15px; }
.gsuggest li { margin-bottom:8px; }

.tools-grid { max-width:960px; margin:0 auto; padding:0 var(--s6) var(--s12); display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); }
.toolcardlink { display:flex; flex-direction:column; gap:12px; padding:var(--s6); }
.toolcardlink:hover { border-color:var(--line-strong); transform:translateY(-3px); }
.toolcardlink .tc-h { font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--text-bright); }
.toolcardlink .tc-p { font-size:14px; color:var(--text-dim); line-height:1.6; flex:1; }
.toolcardlink .tc-go { font-family:var(--font-mono); font-size:12.5px; color:var(--green-soft); }

.tfooter { border-top:1px solid var(--line-2); padding:var(--s8) 0; margin-top:var(--s8); }
.tfooter-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; }
.tfooter .brand { display:flex; align-items:center; gap:10px; } .tfooter .bname { font-family:var(--font-pixel); font-size:14px; color:var(--text-bright); }
.tfooter .fnote { font-family:var(--font-mono); font-size:12px; color:var(--text-faint); }

@media (max-width:680px){ .tools-grid { grid-template-columns:1fr; } .tnav-links { display:none; } }