/* Snap Auto Poster — article styling.
   Scoped to .sap-article so it never touches the rest of your theme.
   Inherits your theme's fonts/colors; only adds structure for callouts,
   tables, FAQ, images, and the related/sources boxes. */

.sap-article{font-size:1.05rem;line-height:1.7}
.sap-eyebrow{display:inline-block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:#0f5e52;margin:0 0 .4em}
.sap-article h2{margin:1.6em 0 .5em;line-height:1.2}
.sap-article h3{margin:1.2em 0 .4em}
.sap-article p{margin:0 0 1em}
.sap-article ul,.sap-article ol{margin:0 0 1.2em;padding-left:1.3em}
.sap-article li{margin:.35em 0}

/* Quick-answer callout (the liftable summary AI engines quote) */
.sap-article .qa{background:#e9f3ef;border:1px solid #bfded2;border-left:4px solid #0f5e52;
  border-radius:8px;padding:.2em 1.1em;margin:1.3em 0}
.sap-article .qa strong{color:#0f5e52}

/* Safety / note callout */
.sap-article .sap-note{background:#fbf3e2;border:1px solid #e7d3a6;border-left:4px solid #b8893b;
  border-radius:8px;padding:.2em 1.1em;margin:1.3em 0}

/* Tables */
.sap-article table{border-collapse:collapse;width:100%;margin:1.3em 0;font-size:.97rem}
.sap-article th,.sap-article td{border:1px solid #dcd9cf;padding:.6em .8em;text-align:left;vertical-align:top}
.sap-article thead th{background:#f0f3ee}
.sap-article tbody tr:nth-child(even){background:#fbfaf6}

/* FAQ */
.sap-article .faq{margin:1.4em 0}
.sap-article .faq h3{font-size:1.08rem;margin:1.1em 0 .3em;color:#15201c}
.sap-article .faq h3::before{content:"Q. ";color:#0f5e52;font-weight:700}
.sap-article .faq p{margin:0 0 .8em}

/* Inline images */
.sap-article figure{margin:1.6em 0}
.sap-article figure img{max-width:100% !important;max-height:600px !important;width:auto !important;height:auto !important;border-radius:10px;display:block;margin:0 auto}
.sap-article figcaption{font-size:.85rem;color:#5c6661;margin-top:.5em;text-align:center}

/* Related guides + sources boxes */
.sap-related,.sap-sources{border:1px solid #dcd9cf;border-radius:10px;padding:.6em 1.2em 1em;margin:1.6em 0;background:#fcfcf8}
.sap-related h3,.sap-sources h3{margin:.7em 0 .4em;font-size:1rem;text-transform:uppercase;letter-spacing:.06em;color:#5c6661}
.sap-related ul,.sap-sources ul{margin:0;padding-left:1.2em}

/* Disclaimer */
.sap-article em:last-child{display:block;margin-top:1.4em;color:#5c6661;font-size:.92rem}

/* ============================================================================
   Hero header + CTA banner (full-bleed, no Elementor)
   Colors sampled from the site: indigo #4043de -> blue #198eeb -> cyan #2bdffa
   ========================================================================== */

/* Full-bleed: break out of a centered content column to span the viewport. */
.sap-hero,.sap-cta{
  position:relative;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;
  overflow:hidden;box-sizing:border-box}

/* ---- Hero ---- */
.sap-hero{
  background:linear-gradient(105deg,#4043de 0%,#198eeb 55%,#2bdffa 100%);
  padding:66px 22px 104px;text-align:center}
.sap-hero::before{ /* soft light blob, upper-left, like the template */
  content:"";position:absolute;top:-60px;left:8%;width:320px;height:200px;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.18),rgba(255,255,255,0) 70%);
  pointer-events:none}
.sap-hero-inner{position:relative;z-index:2;max-width:900px;margin:0 auto}
.sap-hero-eyebrow{color:rgba(255,255,255,.86);font-size:.92rem;letter-spacing:.05em;margin:0 0 16px}
.sap-hero-title{color:#fff;font-weight:700;line-height:1.12;margin:0 0 16px;
  font-size:clamp(1.7rem,4vw,2.9rem)}
.sap-hero-sub{color:rgba(255,255,255,.82);font-size:.92rem;letter-spacing:.03em;margin:0}
.sap-hero-wave{position:absolute;left:0;bottom:-1px;width:100%;height:72px;z-index:1;display:block}

/* ---- CTA banner ---- */
.sap-cta{
  background:linear-gradient(105deg,#4a44d6 0%,#1f8bef 55%,#1aa8f2 100%);
  padding:96px 22px 66px;margin-top:52px}
.sap-cta-wave{position:absolute;left:0;top:-1px;width:100%;height:72px;display:block;z-index:1}
.sap-cta-inner{position:relative;z-index:2;max-width:1080px;margin:0 auto;
  display:flex;align-items:center;gap:44px}
.sap-cta-text{flex:1;min-width:0}
.sap-cta-title{color:#fff;font-weight:700;line-height:1.12;margin:0 0 16px;
  font-size:clamp(1.55rem,3.4vw,2.45rem)}
.sap-cta-desc{color:rgba(255,255,255,.92);font-size:1.02rem;line-height:1.6;max-width:46ch;margin:0 0 24px}
.sap-cta-btn{display:inline-flex;align-items:center;gap:9px;background:#06d8fa;color:#063b52;
  font-weight:700;text-decoration:none;padding:14px 30px;border-radius:40px;
  box-shadow:0 6px 18px rgba(6,216,250,.35);transition:transform .15s,box-shadow .15s,background .15s}
.sap-cta-btn:hover{background:#16ddff;transform:translateY(-1px);box-shadow:0 9px 22px rgba(6,216,250,.45);color:#063b52}
.sap-cta-img{flex:0 0 auto;width:330px;max-width:40%}
.sap-cta-img img{width:100%;height:auto;display:block;border-radius:26px}

@media(max-width:760px){
  .sap-hero{padding:48px 18px 78px}
  .sap-cta{padding:74px 18px 48px}
  .sap-cta-inner{flex-direction:column;text-align:center;gap:28px}
  .sap-cta-desc{margin-left:auto;margin-right:auto}
  .sap-cta-img{width:100%;max-width:360px;order:2}
  .sap-hero-wave,.sap-cta-wave{height:48px}
}

/* ---- Tag chips (shown above the CTA only when tags are enabled) ---- */
.sap-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:30px 0 6px}
.sap-tags-label{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:#5c6661;margin-right:4px}
.sap-tag{display:inline-block;background:#eef1ec;color:#0f5e52;text-decoration:none;font-size:.85rem;
  padding:5px 13px;border-radius:20px;border:1px solid #d7ddd4;transition:background .15s,color .15s}
.sap-tag:hover{background:#0f5e52;color:#fff}