/* ============================================================
   ALITHOS — guide / service / calculator components (SEO + AEO pages)
   Loaded after styles.css and pages.css. Light article body, dark chrome.
   ============================================================ */

/* the short, quotable answer that opens every guide (AEO "answer first") */
.answer{border-left:4px solid var(--teal); background:#EEF6FC; color:var(--ink); padding:20px 22px; margin:0 0 28px; border-radius:0 6px 6px 0}
.answer .answer-k{display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-deep); margin-bottom:6px}
.answer p{margin:0; max-width:none; font-size:1.06rem; line-height:1.6}
.answer p + p{margin-top:.6em}

/* key figures strip */
.key-figures{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:8px 0 30px}
.key-figures .kf{border:1px solid var(--line-l); background:#fff; padding:16px 16px 14px; border-radius:6px}
.key-figures .kf b{display:block; font-size:1.45rem; line-height:1.15; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.key-figures .kf span{display:block; font-size:.82rem; color:var(--slate); margin-top:4px; line-height:1.4}

/* in-article table of contents */
.guide-toc{border:1px solid var(--line-l); background:#F6F8F9; padding:18px 22px; margin:0 0 30px; border-radius:6px}
.guide-toc .toc-k{font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); margin:0 0 8px}
.guide-toc ol{margin:0; padding-left:20px; columns:2; column-gap:28px}
.guide-toc li{font-size:.92rem; padding:3px 0; break-inside:avoid}
@media (max-width:640px){ .guide-toc ol{columns:1} }

/* callouts */
.callout{border:1px solid var(--line-l); background:#fff; padding:18px 20px; margin:24px 0; border-radius:6px}
.callout .callout-k{display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-deep); margin-bottom:6px}
.callout p:last-child, .callout ul:last-child{margin-bottom:0}
.callout.warn{border-color:#E6C58A; background:#FFF8EA}
.callout.warn .callout-k{color:#8A5A00}
.callout.dan{border-color:rgba(46,159,232,.35); background:#F1F8FE}

/* numbered steps */
.steps{list-style:none; counter-reset:st; padding:0; margin:18px 0 26px}
.steps > li{counter-increment:st; position:relative; padding:4px 0 16px 48px}
.steps > li::before{content:counter(st); position:absolute; left:0; top:2px; width:32px; height:32px; border-radius:50%; background:var(--ink); color:#fff; font-weight:800; font-size:.9rem; display:flex; align-items:center; justify-content:center}
.steps > li > strong:first-child{display:block; color:var(--ink)}

/* checklists */
.checklist{list-style:none; padding:0; margin:14px 0 24px}
.checklist li{position:relative; padding:6px 0 6px 30px; border-bottom:1px solid var(--line-l)}
.checklist li::before{content:""; position:absolute; left:2px; top:12px; width:14px; height:8px; border-left:2px solid var(--teal-deep); border-bottom:2px solid var(--teal-deep); transform:rotate(-45deg)}

/* inline FAQ (mirrors FAQPage JSON-LD on the same page) */
.faq-inline details{border-bottom:1px solid var(--line-l); padding:4px 0}
.faq-inline summary{cursor:pointer; font-weight:700; color:var(--ink); padding:12px 28px 12px 0; position:relative; list-style:none; min-height:44px}
.faq-inline summary::-webkit-details-marker{display:none}
.faq-inline summary::after{content:"+"; position:absolute; right:4px; top:10px; font-size:1.3rem; color:var(--teal-deep)}
.faq-inline details[open] summary::after{content:"–"}
.faq-inline details p{margin:0 0 14px}

/* sources + editorial note */
.sources{font-size:.86rem; color:var(--slate); border-top:1px solid var(--line-l); margin-top:40px; padding-top:18px}
.sources h2{font-size:1.05rem!important; margin-top:0!important}
.sources ol{padding-left:20px}
.sources li{margin:4px 0; word-break:break-word}
.editorial{font-size:.84rem; color:var(--slate); background:#F6F8F9; border:1px solid var(--line-l); padding:14px 16px; border-radius:6px; margin-top:22px}
.editorial a{color:var(--teal-deep)}

/* service pages */
.svc-hero-price{font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; color:var(--teal-hi); font-variant-numeric:tabular-nums; margin:4px 0 2px}
.svc-hero-note{font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mist)}
.deliverables{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin:18px 0 28px}
.deliverables .dv{border:1px solid var(--line-l); background:#fff; border-radius:6px; padding:16px 18px}
.deliverables .dv h3{font-size:1rem!important; margin:0 0 6px!important; color:var(--ink)}
.deliverables .dv p{font-size:.92rem; margin:0}
.compare-table td.yes{color:#11734B; font-weight:700}
.compare-table td.no{color:#A4471B}

/* hub pages (guides index, glossary, calculators) */
.hub-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}
.hub-card{display:block; border:1px solid var(--line-d2); background:var(--panel); padding:26px 24px; text-decoration:none; color:var(--light); transition:border-color .25s, transform .25s}
.hub-card:hover{border-color:var(--teal); transform:translateY(-3px)}
.hub-card .meta{font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-hi)}
.hub-card h2, .hub-card h3{font-size:1.15rem; margin:.5em 0 .35em; color:var(--light)}
.hub-card p{color:var(--mist); font-size:.92rem; margin:0}
.glossary dl{margin:0}
.glossary dt{font-weight:800; color:var(--ink); margin-top:22px; font-size:1.08rem; scroll-margin-top:90px}
.glossary dd{margin:6px 0 0; color:#33444F}
.az{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 20px}
.az a{display:inline-flex; min-width:36px; min-height:36px; align-items:center; justify-content:center; border:1px solid var(--line-l); border-radius:4px; text-decoration:none; font-weight:700; font-size:.88rem}

/* single-purpose calculators (ungated; never output a total project budget) */
.calc-tool{border:1px solid var(--line-l); background:#fff; border-radius:8px; padding:24px; margin:10px 0 32px}
.calc-tool .ct-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px 18px}
.calc-tool label{display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); margin-bottom:6px}
.calc-tool input, .calc-tool select{width:100%; min-height:46px; padding:10px 12px; font-size:16px; border:1px solid #C6D1D8; border-radius:4px; background:#fff; color:var(--ink); font-family:var(--body)}
.calc-tool input:focus, .calc-tool select:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(46,159,232,.2)}
.calc-tool .ct-out{margin-top:20px; border-top:1px solid var(--line-l); padding-top:18px; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px}
.calc-tool .ct-out div{background:#F3F7FA; border-radius:6px; padding:14px}
.calc-tool .ct-out b{display:block; font-size:1.35rem; color:var(--ink); font-variant-numeric:tabular-nums}
.calc-tool .ct-out span{font-size:.8rem; color:var(--slate)}
.calc-tool .ct-note{font-size:.8rem; color:var(--slate); margin:14px 0 0}

/* mobile/UX audit 2026-11-02: larger checkbox tap targets in calculators; tighter table cells and calculator padding on phones */
.calc-tool input[type="checkbox"]{width:22px!important; height:22px!important; min-height:22px!important; padding:0; flex:none; accent-color:var(--teal-deep)}
@media (max-width:640px){
  .calc-tool{padding:18px 16px}
  .article-body .table-scroll th, .article-body .table-scroll td{padding:10px 12px}
}