/* ===================================================================
   SmartlyTools v2 — Page & section styles
   Tool hero, FAQ, blog, testimonials, comparison, CTA, sitemap,
   empty states, filter bar, contact, tool meta.
   =================================================================== */

/* ============ PAGE HERO (interior pages) ============ */
.page-hero { position:relative; padding-block:clamp(2rem,5vw,var(--sp-7)) var(--sp-5); text-align:center; overflow:hidden; }
.page-hero::before { content:""; position:absolute; inset:0; z-index:-1; background:var(--grad-brand-soft); -webkit-mask-image:linear-gradient(#000,transparent); mask-image:linear-gradient(#000,transparent); }
.page-hero h1 { margin-bottom:var(--sp-3); }
.page-lead { font-size:var(--fs-md); color:var(--ink-soft); max-width:55ch; margin-inline:auto; }

/* ============ TOOL HERO ============ */
.tool-hero { position:relative; padding-block:var(--sp-6) var(--sp-5); text-align:center; }
.tool-hero-icon { display:inline-flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius:var(--r-lg); margin-bottom:var(--sp-4); color:#fff; background:linear-gradient(135deg,var(--cat-color,var(--primary)),color-mix(in srgb,var(--cat-color,var(--primary)) 55%,#000 8%)); box-shadow:0 14px 30px color-mix(in srgb,var(--cat-color,var(--primary)) 35%,transparent); }
.tool-hero-icon svg { width:36px; height:36px; }
.tool-hero h1 { margin-bottom:var(--sp-3); }
.tool-desc { font-size:var(--fs-md); color:var(--ink-soft); max-width:60ch; margin:0 auto var(--sp-4); }
.tool-meta-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--sp-4); }
.tool-badges { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem; margin-bottom:var(--sp-4); }
.meta-pill { display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .8rem; border-radius:var(--r-pill); background:var(--surface-2); border:1px solid var(--hairline); font-size:var(--fs-xs); font-weight:600; color:var(--ink-soft); }
.meta-pill svg { width:15px; height:15px; color:var(--primary); }
.meta-pill.diff-easy svg{ color:var(--success) } .meta-pill.diff-medium svg{ color:var(--warning) } .meta-pill.diff-hard svg{ color:var(--danger) }
.tool-uses { display:inline-flex; align-items:center; gap:.4rem; font-size:var(--fs-sm); color:var(--ink-faint); font-weight:500; }
.tool-uses::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 22%,transparent); }
.tool-actions { display:flex; align-items:center; gap:.5rem; }

/* FAQ */
.faq-section { margin-top:var(--sp-7); }
.faq-section > h2 { text-align:center; margin-bottom:var(--sp-5); }
.faq-container { max-width:var(--maxw-prose); margin-inline:auto; }
.faq-list { display:flex; flex-direction:column; gap:var(--sp-3); }
.faq-item { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-md); overflow:hidden; transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease); }
.faq-item[open] { border-color:color-mix(in srgb,var(--primary) 30%,var(--hairline)); box-shadow:var(--sh-sm); }
.faq-q { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); font-family:var(--font-display); font-weight:600; font-size:var(--fs-md); color:var(--ink); cursor:pointer; list-style:none; }
.faq-q::-webkit-details-marker { display:none; }
.faq-q::after { content:""; width:20px; height:20px; flex-shrink:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b5bd6' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform var(--t) var(--ease); }
.faq-item[open] .faq-q::after { transform:rotate(135deg); }
.faq-a { padding:0 var(--sp-5) var(--sp-4); color:var(--ink-soft); font-size:var(--fs-sm); line-height:var(--lh-relaxed); }
.faq-a a { font-weight:600; }

/* ============ FILTER BAR ============ */
.filter-bar { display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:center; justify-content:space-between; margin-bottom:var(--sp-5); }
.filter-search { position:relative; flex:1 1 280px; max-width:380px; display:flex; align-items:center; }
.filter-search svg { position:absolute; left:.9rem; width:18px; height:18px; color:var(--ink-faint); }
.filter-search input { width:100%; padding:.7rem 1rem .7rem 2.7rem; background:var(--surface); border:1px solid var(--hairline-2); border-radius:var(--r-pill); color:var(--ink); }
.filter-search input:focus { outline:none; border-color:var(--primary); box-shadow:var(--ring); }
.filter-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.filter-chip { padding:.5rem .95rem; border-radius:var(--r-pill); font-size:var(--fs-sm); font-weight:600; color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--hairline); cursor:pointer; transition:all var(--t-fast) var(--ease); }
.filter-chip:hover { border-color:var(--hairline-2); color:var(--ink); }
.filter-chip.active { background:var(--grad-brand); color:#fff; border-color:transparent; box-shadow:var(--sh-primary-sm); }

/* ============ EMPTY STATE ============ */
.empty-state { text-align:center; padding:var(--sp-8) var(--sp-4); }
.empty-state .big-code { font-family:var(--font-display); font-size:clamp(4rem,14vw,9rem); font-weight:800; line-height:1; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.empty-state .empty-icon { width:64px; height:64px; margin:0 auto var(--sp-4); color:var(--ink-faint); }
.empty-state h1,.empty-state h2 { margin-bottom:var(--sp-3); }
.empty-state p { color:var(--ink-soft); max-width:46ch; margin:0 auto var(--sp-5); }
.empty-actions { display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:center; }

/* ============ TESTIMONIALS ============ */
.testi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:var(--sp-4); }
.testi-card { display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-5); background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--sh-sm); transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease); }
.testi-card:hover { transform:translateY(-4px); box-shadow:var(--sh-md); }
.testi-stars { display:flex; gap:.1rem; color:var(--amber-500); }
.testi-stars svg { width:18px; height:18px; fill:currentColor; }
.testi-quote { color:var(--ink); font-size:var(--fs-md); line-height:var(--lh-normal); flex:1; }
.testi-author { display:flex; align-items:center; gap:.7rem; margin-top:.4rem; }
.testi-avatar { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:#fff; background:var(--grad-brand); flex-shrink:0; }
.testi-name { font-weight:700; font-size:var(--fs-sm); color:var(--ink); }
.testi-role { font-size:var(--fs-xs); color:var(--ink-faint); }

/* ============ COMPARISON TABLE ============ */
.compare-wrap { overflow-x:auto; border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--sh-sm); background:var(--surface); }
.compare-table { width:100%; border-collapse:collapse; min-width:560px; }
.compare-table th,.compare-table td { padding:var(--sp-4); text-align:center; border-bottom:1px solid var(--hairline); }
.compare-table thead th { font-family:var(--font-display); font-size:var(--fs-sm); }
.compare-table thead th:first-child,.compare-table tbody th { text-align:left; }
.compare-table tbody th { font-weight:600; color:var(--ink); font-size:var(--fs-sm); }
.compare-table .col-us { position:relative; background:var(--primary-soft); }
.compare-table thead .col-us { border-radius:var(--r-md) var(--r-md) 0 0; color:var(--primary); }
.compare-table .col-us strong { color:var(--primary); }
.compare-table .ok { color:var(--success); font-weight:700; }
.compare-table .no { color:var(--ink-faint); }
.compare-table tr:last-child td,.compare-table tr:last-child th { border-bottom:none; }
.tick svg { width:20px; height:20px; }
.tick.yes { color:var(--success); } .tick.no { color:var(--hairline-2); }

/* ============ CTA BAND ============ */
.cta-band { position:relative; text-align:center; padding:clamp(2rem,5vw,var(--sp-8)) var(--sp-5); border-radius:var(--r-2xl); overflow:hidden; isolation:isolate; background:var(--grad-brand); color:#fff; box-shadow:var(--sh-lg); }
.cta-band::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.5; background:radial-gradient(40% 60% at 20% 10%,rgba(255,255,255,.25),transparent 60%),radial-gradient(50% 70% at 90% 90%,rgba(0,0,0,.18),transparent 60%); }
.cta-band h2 { color:#fff; margin-bottom:var(--sp-3); }
.cta-band p { color:rgba(255,255,255,.9); max-width:48ch; margin:0 auto var(--sp-5); font-size:var(--fs-md); }
.cta-band .btn-primary { background:#fff; color:var(--primary-strong); box-shadow:var(--sh-md); }
.cta-band .btn-primary:hover { color:var(--primary-strong); background:#fff; }
.cta-band .btn-ghost { border-color:rgba(255,255,255,.5); color:#fff; }
.cta-band .btn-ghost:hover { background:rgba(255,255,255,.14); border-color:#fff; }
.cta-actions { display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:center; }

/* ============ NEWSLETTER BAND ============ */
.newsletter-band { text-align:center; padding:clamp(2rem,5vw,var(--sp-7)); border-radius:var(--r-2xl); background:var(--surface); border:1px solid var(--hairline); box-shadow:var(--sh-sm); position:relative; overflow:hidden; }
.newsletter-band::before { content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--grad-brand); }
.newsletter-band h2 { margin-bottom:var(--sp-3); }
.newsletter-band p { color:var(--ink-soft); max-width:46ch; margin:0 auto var(--sp-5); }
.newsletter-form { display:flex; gap:.5rem; max-width:440px; margin-inline:auto; }
.newsletter-form input { flex:1; min-width:0; padding:.85rem 1.1rem; background:var(--surface-2); border:1px solid var(--hairline-2); border-radius:var(--r-md); color:var(--ink); }
.newsletter-form input:focus { outline:none; border-color:var(--primary); box-shadow:var(--ring); }

/* ============ BLOG ============ */
.featured-article { display:grid; grid-template-columns:1.1fr 1fr; gap:0; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-sm); margin-bottom:var(--sp-6); transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease); }
.featured-article:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); }
.feat-thumb { min-height:260px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.92); }
.feat-thumb svg { width:84px; height:84px; }
.feat-body { padding:clamp(1.5rem,3vw,var(--sp-6)); display:flex; flex-direction:column; gap:var(--sp-3); justify-content:center; }
.feat-body h2 { font-size:var(--fs-2xl); }
.blog-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; font-size:var(--fs-xs); color:var(--ink-faint); }
.blog-readmore { font-weight:700; font-size:var(--fs-sm); }
.blog-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease); }
.blog-card:hover { transform:translateY(-5px); box-shadow:var(--sh-lg); }
.blog-thumb { display:flex; align-items:center; justify-content:center; min-height:150px; color:#fff; background:linear-gradient(135deg,var(--cat-color,var(--primary)),color-mix(in srgb,var(--cat-color,var(--primary)) 55%,#000 6%)); }
.blog-thumb svg { width:54px; height:54px; }
.blog-body { padding:var(--sp-5); display:flex; flex-direction:column; gap:.5rem; flex:1; }
.blog-body h3 { font-size:var(--fs-lg); }
.blog-body h3 a { color:var(--ink); } .blog-body h3 a:hover { color:var(--primary); }
.blog-body p { color:var(--ink-soft); font-size:var(--fs-sm); flex:1; }

/* Article */
.article-head { max-width:var(--maxw-prose); margin-inline:auto; text-align:center; padding-top:var(--sp-5); }
.article-head h1 { margin-block:var(--sp-4) var(--sp-4); }
.article-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem; color:var(--ink-faint); font-size:var(--fs-sm); }
.article-banner { max-width:var(--maxw-prose); margin:var(--sp-5) auto; height:220px; border-radius:var(--r-xl); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.92); box-shadow:var(--sh-md); }
.article-banner svg { width:90px; height:90px; }
.article-body { padding-top:var(--sp-3); }

/* ============ CONTACT ============ */
.contact-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:var(--sp-6); align-items:start; }
.contact-form-card h2 { margin-bottom:var(--sp-4); }
.contact-aside { display:flex; flex-direction:column; gap:var(--sp-4); }
.contact-list { display:flex; flex-direction:column; gap:var(--sp-4); margin-top:var(--sp-3); }
.contact-list li { display:flex; align-items:flex-start; gap:.8rem; }
.contact-ico { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:var(--r-md); background:var(--primary-soft); color:var(--primary); flex-shrink:0; }
.contact-ico svg { width:20px; height:20px; }
.contact-muted { color:var(--ink-faint); font-size:var(--fs-sm); }
@media (max-width:760px){ .contact-grid { grid-template-columns:1fr; } .featured-article { grid-template-columns:1fr; } }

/* ============ SITEMAP ============ */
.sitemap-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:var(--sp-5); margin-bottom:var(--sp-6); }
.sitemap-section { margin-bottom:var(--sp-5); }
.sitemap-section h2 { font-size:var(--fs-lg); margin-bottom:var(--sp-3); padding-bottom:.5rem; border-bottom:1px solid var(--hairline); }
.sitemap-links { display:flex; flex-direction:column; gap:.35rem; }
.sitemap-links a { color:var(--ink-soft); font-size:var(--fs-sm); transition:color var(--t-fast) var(--ease),padding-left var(--t-fast) var(--ease); }
.sitemap-links a:hover { color:var(--primary); padding-left:3px; }

/* ============ HOW-IT-WORKS / STEPS ============ */
.steps-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:var(--sp-5); counter-reset:step; }
.step-card { position:relative; padding:var(--sp-5); padding-top:var(--sp-6); background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--sh-sm); }
.step-card::before { counter-increment:step; content:counter(step); position:absolute; top:-18px; left:var(--sp-5); width:40px; height:40px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; color:#fff; background:var(--grad-brand); border-radius:var(--r-md); box-shadow:var(--sh-primary-sm); }
.step-card h3 { font-size:var(--fs-md); margin-bottom:.4rem; }
.step-card p { color:var(--ink-soft); font-size:var(--fs-sm); }

/* ============ STATS STRIP ============ */
.stats-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--sp-4); padding:var(--sp-5); background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-xl); box-shadow:var(--sh-sm); }
.stats-strip .s { text-align:center; }
.stats-strip .s .n { font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:800; color:var(--primary); }
.stats-strip .s .l { font-size:var(--fs-xs); color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }

/* ============ SEARCH RESULTS COUNT ============ */
.results-count { color:var(--ink-soft); font-size:var(--fs-sm); font-weight:600; margin-bottom:var(--sp-4); }

/* v5.5: compare tables fit small screens without horizontal scroll */
@media (max-width:640px){
  .compare-table { min-width:0; font-size:var(--fs-xs); }
  .compare-table th, .compare-table td { padding:.55rem .4rem; }
  .compare-table tbody th { font-size:var(--fs-xs); line-height:1.3; width:auto; }
  .compare-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
}