/* ==========================================================================
   Skyscape article style — /preview/assets/article.css

   Scoped entirely to .ss-article so it can drop into any host without
   touching the surrounding theme. The same block works pasted into a Divi
   Text module on buzz.skyscape.com today and rendered from JSON by a Zeus
   generator later, with no change.

   LITERAL COLORS, NOT CUSTOM PROPERTIES. The WordPress Additional CSS
   editor ships an old linter that cannot parse --variables and reports
   "Expected RBRACE" on every one. Same reason clamp() is avoided — a
   mobile breakpoint does that work instead. The CSS would function either
   way, but an editor full of red errors gets ignored, and then real errors
   get ignored with it.

   Palette:  sky #0183b2   ink #2A3D50   slate #4A5A6B   mist #E4EDF3
             light #F6F9FB  cream #FDF6E9  gold #FFD166   red #d91e43

   FONTS are not @import-ed here. @import must be the first rule in a
   stylesheet, and the Customizer wraps what you paste, so it silently
   becomes invalid. Load them from the child theme's functions.php instead,
   or accept the fallback — Roboto Slab degrades to Georgia and Nunito to
   the system sans, which reads perfectly well.
   ========================================================================== */

.ss-article{font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:#2A3D50;font-size:17px;line-height:1.65}

.ss-article h2{font-family:'Roboto Slab',Georgia,serif;font-weight:300;
  font-size:33px;line-height:1.22;color:#2A3D50;margin:2.6em 0 .6em;letter-spacing:-.3px}
.ss-article h2:first-child{margin-top:0}
.ss-article h3{font-family:'Roboto Slab',Georgia,serif;font-weight:400;
  font-size:21px;line-height:1.3;color:#2A3D50;margin:2em 0 .5em}
.ss-article p{margin:0 0 1.15em;color:#4A5A6B}
.ss-article p strong,.ss-article li strong,.ss-article td strong{color:#2A3D50;font-weight:700}
.ss-article a{color:#0183b2;text-decoration:none;border-bottom:1px solid rgba(1,131,178,.32)}
.ss-article a:hover{border-bottom-color:#0183b2}

.ss-article .lead{font-family:'Roboto Slab',Georgia,serif;font-weight:400;
  font-size:23px;line-height:1.45;color:#2A3D50;margin-bottom:1.4em}

.ss-article ul{list-style:none;padding:0;margin:0 0 1.4em}
.ss-article ul li{position:relative;padding:.45em 0 .45em 1.4em;color:#4A5A6B}
.ss-article ul li:before{content:'';position:absolute;left:0;top:1.05em;
  width:9px;height:2px;background:#0183b2}

/* story block — set apart so the reader can see this is something that
   happened, not something we are claiming. The number lives inside the
   story rather than in a stats bar, because it only means anything with
   the situation attached. */
.ss-article .story{background:#F6F9FB;border-left:3px solid #0183b2;
  border-radius:0 12px 12px 0;padding:24px 28px;margin:2em 0}
.ss-article .story h3{margin-top:0;color:#2A3D50}
.ss-article .story p:last-child{margin-bottom:0}
.ss-article .story .num{font-family:'Roboto Slab',Georgia,serif;font-size:32px;
  color:#0183b2;line-height:1;display:block;margin:.5em 0 .15em}

.ss-article blockquote{margin:2em 0;padding:0 0 0 26px;border-left:3px solid #FFD166;
  font-family:'Roboto Slab',Georgia,serif;font-weight:400;font-size:21px;
  line-height:1.45;color:#2A3D50}
.ss-article blockquote cite{display:block;margin-top:12px;font-family:'Nunito',sans-serif;
  font-style:normal;font-size:14px;color:#4A5A6B;font-weight:600}

.ss-article figure{margin:2em 0}
.ss-article figure img{width:100%;height:auto;display:block;border:1px solid #E4EDF3;
  border-radius:12px;box-shadow:0 10px 30px rgba(18,32,46,.10)}
.ss-article figure .ph{background:#F6F9FB;border:1px dashed rgba(1,131,178,.35);
  border-radius:12px;padding:56px 24px;text-align:center;color:#4A5A6B;font-size:14px}
.ss-article figcaption{font-size:13.5px;color:#4A5A6B;margin-top:10px;padding-left:2px}

/* honest concession — a comparison page that concedes nothing reads as
   advertising. Saying where the competitor is better is what makes the
   rest believable. */
.ss-article .fair{background:#FDF6E9;border-radius:12px;padding:22px 26px;margin:2em 0}
.ss-article .fair h3{margin-top:0}
.ss-article .fair p:last-child{margin-bottom:0}

.ss-article .tbl{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:15px}
.ss-article .tbl th{text-align:left;font-size:11px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:#0183b2;padding:0 14px 10px 0;border-bottom:1px solid #E4EDF3}
.ss-article .tbl td{padding:13px 14px 13px 0;border-bottom:1px solid #E4EDF3;
  color:#4A5A6B;vertical-align:top}
.ss-article .tbl td:first-child{color:#2A3D50;font-weight:700;width:32%}

.ss-article .cta{background:#2A3D50;border-radius:16px;padding:30px 32px;
  margin:2.6em 0 1em;color:#fff}
.ss-article .cta h3{color:#fff;margin:0 0 8px;font-size:24px;font-weight:300}
.ss-article .cta p{color:#B8CDD9;margin:0 0 20px;font-size:15px}
.ss-article .cta a{display:inline-block;border-bottom:none;background:#d91e43;color:#fff;
  font-weight:700;font-size:15px;padding:14px 28px;border-radius:999px;margin:0 10px 8px 0}
.ss-article .cta a.ghost{background:transparent;color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.ss-article .cta small{display:block;color:#8FB4C9;font-size:13px;margin-top:6px}

/* ==========================================================================
   OVERRIDES — for WordPress only.
   These rules already exist in the site's Additional CSS and reach inside
   .ss-article using #left-area and .entry-content, which outrank a single
   class. Each override adds the parent selector to win on specificity.
   Harmless on Zeus, where none of those selectors exist.
   ========================================================================== */
#left-area .ss-article ul{list-style:none;padding:0;margin:0 0 1.4em !important}
#left-area .ss-article li{line-height:1.65;margin-bottom:0;padding:.45em 0 .45em 1.4em}
.entry-content .ss-article table tr{line-height:1.5}
.entry-content .ss-article tr td{border-top:none;border-bottom:1px solid #E4EDF3;
  padding:13px 14px 13px 0}
.single .ss-article p{text-align:left}   /* site-wide rule justifies every p */
.single-post .ss-article strong,.single-post .ss-article b{color:#2A3D50}

@media(max-width:600px){
  .ss-article{font-size:16px}
  .ss-article h2{font-size:25px}
  .ss-article .lead{font-size:19px}
  .ss-article .story,.ss-article .fair{padding:18px 20px}
  .ss-article .cta{padding:24px 22px}
  .ss-article .tbl td:first-child{width:40%}
}

/* ==========================================================================
   Page chrome — ONLY for the Zeus preview. Do NOT paste into WordPress;
   the theme supplies header, footer and container there.
   ========================================================================== */
.pg{max-width:760px;margin:0 auto;padding:0 24px 80px}
.pg-top{border-bottom:1px solid #E4EDF3;margin-bottom:40px;padding:20px 0}
.pg-top .wrap{max-width:760px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.pg-top img{height:26px;width:auto;display:block}
.pg-top span{font-size:12px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:#0183b2}
.pg h1{font-family:'Roboto Slab',Georgia,serif;font-weight:300;font-size:44px;
  line-height:1.15;color:#2A3D50;margin:0 0 14px;letter-spacing:-.5px}
.pg .meta{font-family:'Nunito',sans-serif;font-size:13.5px;color:#4A5A6B;
  margin:0 0 34px;padding-bottom:22px;border-bottom:1px solid #E4EDF3}
.pg-note{max-width:760px;margin:40px auto 0;padding:0 24px}
.pg-note div{background:#FFF8E1;border-left:4px solid #FFD166;padding:12px 18px;
  font-family:'Nunito',sans-serif;font-size:13px;color:#5a3a0a;border-radius:0 8px 8px 0}
body{margin:0;background:#fff}
@media(max-width:600px){.pg h1{font-size:30px}}