/* spintip.com AI-search layer: answer boxes, comparison tables, FAQ lists, long-form copy.
   Served as /v11/seo.css?v=1015s on pages that carry layer content. Uses the site.css tokens
   (--bg --fg --dim --faint --hair --lemon --raise). Mobile first, 16px side gutter. */

/* ---------- answer box: the 50-80-word direct answer ---------- */
.answer{max-width:760px;margin:22px auto 0;padding:18px 20px;border-radius:16px;
  background:var(--raise,#17252C);box-shadow:inset 3px 0 0 var(--lemon),0 0 0 1px var(--hair);
  font:400 16px/1.65 Inter,system-ui,sans-serif;color:rgba(244,248,245,.86);text-align:left}
.answer p{margin:0}.answer p+p{margin-top:10px}
.answer b,.answer strong{color:var(--fg);font-weight:600}
.answer a{color:var(--lemon)}
.answer .k{display:block;margin-bottom:8px}
.page-hero .answer{margin-left:0}
/* a block section dropped between existing sections */
.seo-block{max-width:1160px;margin:0 auto;padding:30px 16px}

/* ---------- comparison table ---------- */
.cmp-wrap{max-width:960px;margin:26px auto 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:16px;box-shadow:0 0 0 1px var(--hair);background:rgba(244,248,245,.025)}
.cmp{width:100%;min-width:560px;border-collapse:collapse;font:400 14.5px/1.5 Inter,system-ui,sans-serif;text-align:left}
.cmp caption{caption-side:bottom;padding:12px 16px;font:400 12.5px Inter,sans-serif;color:var(--faint);text-align:left}
.cmp th,.cmp td{padding:13px 16px;border-bottom:1px solid var(--hair);vertical-align:top}
.cmp thead th{font:600 11px Poppins,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.cmp tbody th{font:600 14.5px Poppins,sans-serif;color:var(--fg)}
.cmp td{color:var(--dim)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp .us{color:var(--fg);background:rgba(209,246,147,.06)}
.cmp thead th.us{color:var(--lemon)}
.cmp .yes{color:var(--lemon)}.cmp .no{color:var(--faint)}

/* ---------- FAQ: details/summary (as more.css) or a dl ---------- */
.faq{max-width:820px;margin:0 auto;display:grid;gap:10px;text-align:left}
.seo-body .faq,.seo-block .faq{margin-top:22px}
dl.faq{margin-top:22px}
dl.faq dt{margin:0;padding:18px 22px 0;border-radius:14px 14px 0 0;background:rgba(244,248,245,.035);
  box-shadow:0 0 0 1px var(--hair);clip-path:inset(-1px -1px 0 -1px);font:600 16px/1.4 Poppins,sans-serif;color:var(--fg)}
dl.faq dd{margin:-10px 0 0;padding:10px 22px 18px;border-radius:0 0 14px 14px;background:rgba(244,248,245,.035);
  box-shadow:0 0 0 1px var(--hair);clip-path:inset(0 -1px -1px -1px);font:400 15px/1.6 Inter,sans-serif;color:var(--dim)}
.faq details p+p{margin-top:10px}
.faq a{color:var(--lemon)}

/* ---------- date and sources lines ---------- */
.updated{margin:14px 0 0;font:400 12.5px Inter,sans-serif;color:var(--faint)}
.src{max-width:760px;margin:26px auto 0;font:400 12.5px/1.6 Inter,sans-serif;color:var(--faint)}
.src a{color:var(--dim);text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.src ol,.src ul{margin:6px 0 0;padding-left:18px}

/* ---------- long-form copy on layer pages ---------- */
section.seo-body{max-width:760px;margin:0 auto;padding:40px 16px 20px;font:400 16px/1.7 Inter,system-ui,sans-serif;color:rgba(244,248,245,.82)}
section.seo-body>.k{display:block}
section.seo-body h2{margin:46px 0 0;font:600 24px/1.25 Poppins,sans-serif;letter-spacing:-.015em;color:var(--fg);text-wrap:balance}
section.seo-body>h2:first-child,section.seo-body>.k+h2{margin-top:10px}
section.seo-body h2 b{font-weight:600;color:var(--lemon)}
section.seo-body h3{margin:30px 0 0;font:600 18px/1.3 Poppins,sans-serif;color:var(--fg)}
section.seo-body p{margin:14px 0 0}
section.seo-body ul,section.seo-body ol{margin:14px 0 0;padding-left:22px}
section.seo-body li{margin:8px 0 0}
section.seo-body ul li::marker{color:var(--lemon)}
section.seo-body b,section.seo-body strong{color:var(--fg);font-weight:600}
section.seo-body a{color:var(--lemon)}
section.seo-body .cmp-wrap,section.seo-body .answer{margin-left:0;margin-right:0}
section.seo-body .fine2{max-width:none}

/* answer box holding the hero lead (div.answer > p.l), lists and CTA lines used by the fragments */
.answer .l,.page-hero .answer .l{margin:0;max-width:none;font-size:inherit;line-height:inherit;color:inherit}
p.answer{margin-left:0;margin-right:0}
ul.look{margin:14px 0 0;padding-left:22px}
ul.look li{margin:6px 0 0}
ul.look li::marker{color:var(--lemon)}
.cta-line{margin:26px 0 0;font:500 15px/1.6 Inter,sans-serif;color:var(--fg)}
.cta-line a{color:var(--lemon)}
/* a block dropped inside a blog article sits in the article column */
.art section.seo-body{padding:28px 0 8px}
.art .seo-body h2{margin-top:6px}

/* phones */
@media (max-width:600px){
  .answer{padding:16px;font-size:15.5px}
  .cmp-wrap{margin-left:-16px;margin-right:-16px;border-radius:0;box-shadow:0 1px 0 var(--hair),0 -1px 0 var(--hair)}
  section.seo-body .cmp-wrap{margin-left:-16px;margin-right:-16px}
  .cmp{font-size:14px}
  .cmp th,.cmp td{padding:12px 14px}
  section.seo-body{padding-top:28px}
  section.seo-body h2{font-size:21px;margin-top:38px}
  dl.faq dt{padding:16px 18px 0}dl.faq dd{padding:10px 18px 16px}
  .faq details{padding:16px 18px}
}