/* ==========================================================================
   SINGLE BLOG POST — from the Claude Design handoff
   (Jacob Shireman blog mockup/export/blog-post/blog-post.css)

   Loaded only on /blog/<slug> via the head slot, not site-wide.

   One change from the handoff: the page wrapper class .jsm-post was renamed
   .jsm-postpage. The site already uses .jsm-post for the blog CARD component
   on 114 pages, and its ":hover{transform:translateY(-8px)}" would have made
   the entire page lurch upward whenever the pointer was over it.
   ========================================================================== */

/* ==========================================================================
   SINGLE BLOG POST  —  jsm-post-*
   Standalone: only depends on Anton + Archivo being loaded.
   Colors: navy #14213D · amber #FCA311 · white #FFFFFF · tint #F2F2F0
   ========================================================================== */

.jsm-postpage{color:#14213D;font-family:Archivo,system-ui,sans-serif}
.jsm-postpage a{text-decoration:none}
.jsm-post-accent{color:#FCA311}
.jsm-post-eyebrow{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#FCA311;margin:0 0 16px}
.jsm-post-eyebrow--rule{display:flex;align-items:center;gap:10px}
.jsm-post-eyebrow--rule::before{content:'';width:22px;height:1px;background:#FCA311;display:block}

.jsm-post-avatar{border-radius:50%;object-fit:cover;background:#FCA311;flex:none;display:block}
.jsm-post-avatar--sm{width:48px;height:48px;border:2px solid #FCA311}
.jsm-post-avatar--md{width:68px;height:68px;border:3px solid #FCA311}
.jsm-post-avatar--lg{width:96px;height:96px;border:3px solid #FCA311}

/* buttons */
.jsm-post-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;font-weight:700;font-size:15px;padding:15px 24px;box-sizing:border-box;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease}
.jsm-post-btn span{font-size:17px}
.jsm-post-btn--amber{background:#FCA311;color:#14213D}
.jsm-post-btn--amber:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(252,163,17,.34);color:#14213D}
.jsm-post-btn--outline{background:transparent;border:1px solid #FCA311;color:#FCA311}
.jsm-post-btn--outline:hover{background:#FCA311;color:#14213D;transform:translateY(-3px)}
.jsm-post-btn--block{display:flex;width:100%;padding:16px 22px}

/* hero */
.jsm-post-hero{position:relative;background:#14213D;overflow:hidden;isolation:isolate}
.jsm-post-hero__ring{position:absolute;border-radius:50%}
.jsm-post-hero__ring--lg{left:-140px;top:-120px;width:520px;height:520px;border:1px solid rgba(252,163,17,.22)}
.jsm-post-hero__ring--sm{left:-60px;top:-40px;width:360px;height:360px;border:1px solid rgba(252,163,17,.14)}
.jsm-post-hero__inner{position:relative;max-width:1320px;margin:0 auto;padding:72px 40px 150px}
.jsm-post-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:26px;font-size:12px;font-weight:600;letter-spacing:.06em}
.jsm-post-crumbs a{color:rgba(229,229,229,.75)}
.jsm-post-crumbs a:hover{color:#FCA311}
.jsm-post-crumbs span{color:rgba(229,229,229,.35)}
.jsm-post-crumbs .jsm-post-crumbs__cat{color:#FCA311}
.jsm-post-hero__title{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;color:#FFFFFF;font-size:clamp(44px,4.8vw,74px);line-height:.96;margin:0 0 26px;max-width:960px;text-wrap:balance}
.jsm-post-hero__dek{margin:0 0 34px;max-width:680px;font-size:18px;line-height:1.62;color:rgba(229,229,229,.8)}
.jsm-post-byline{display:flex;align-items:center;gap:16px}
.jsm-post-byline__name{font-size:15px;font-weight:700;color:#FFFFFF}
.jsm-post-byline__meta{font-size:13px;color:rgba(229,229,229,.6)}

/* featured image */
.jsm-post-feature{max-width:1320px;margin:-96px auto 0;padding:0 40px;position:relative;box-sizing:content-box}
.jsm-post-feature__img{display:block;width:100%;height:520px;object-fit:cover;border-radius:20px;background:#F2F2F0;box-shadow:0 24px 60px rgba(20,33,61,.18)}

/* layout */
.jsm-post-body{padding:72px 40px 110px}
.jsm-post-layout{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(0,65fr) minmax(0,35fr);gap:56px;align-items:start}

/* article typography */
.jsm-post-article{max-width:760px}
.jsm-post-article > p{margin:0 0 26px;font-size:18px;line-height:1.75;color:rgba(20,33,61,.8)}
.jsm-post-article > p.jsm-post-lede{font-size:21px;line-height:1.6;color:#14213D;font-weight:500}
.jsm-post-article h2{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;font-size:34px;line-height:1.04;margin:74px 0 22px;scroll-margin-top:110px}
.jsm-post-article h3{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;font-size:24px;line-height:1.1;margin:40px 0 16px}
.jsm-post-article > p a{color:#14213D;font-weight:600;border-bottom:2px solid #FCA311}
.jsm-post-article > p a:hover{color:#FCA311}
.jsm-post-article > ul{margin:0 0 30px;padding-left:22px;font-size:18px;line-height:1.7;color:rgba(20,33,61,.8)}
.jsm-post-article > ul li::marker{color:#FCA311}

.jsm-post-quote{margin:40px 0;padding:34px 38px;background:#14213D;border-radius:20px}
.jsm-post-quote__mark{font-family:Anton,sans-serif;font-size:64px;line-height:.6;color:#FCA311;margin-bottom:14px}
.jsm-post-quote p{margin:0 0 16px;font-size:19px;line-height:1.66;font-weight:500;color:#FFFFFF}
.jsm-post-quote p:last-child{margin-bottom:0}
.jsm-post-quote--display p{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;font-size:27px;line-height:1.14}
.jsm-post-quote cite{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#FCA311}

.jsm-post-steps{margin:0 0 30px;padding:0;list-style:none;display:grid;gap:14px}
.jsm-post-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;font-size:18px;line-height:1.65;color:rgba(20,33,61,.8)}
.jsm-post-steps strong{color:#14213D}
.jsm-post-steps__n{font-family:Anton,sans-serif;font-size:26px;line-height:1.1;color:#FCA311}

.jsm-post-video{margin:40px 0;border-radius:20px;overflow:hidden;background:#14213D;aspect-ratio:16/9}
.jsm-post-video iframe{width:100%;height:100%;border:0;display:block}

.jsm-post-promo{margin:44px 0;display:flex;align-items:center;gap:24px;background:#F2F2F0;border:1px solid rgba(20,33,61,.1);border-radius:20px;padding:24px 28px}
.jsm-post-promo__copy{flex:1;min-width:0}
.jsm-post-promo__title{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;font-size:20px;line-height:1.12;margin:0 0 5px}
.jsm-post-promo p{margin:0;font-size:15px;line-height:1.5;color:rgba(20,33,61,.68)}
.jsm-post-promo .jsm-post-btn{flex:none;padding:14px 24px}

.jsm-post-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:48px;padding:24px 0;border-top:1px solid rgba(20,33,61,.12);border-bottom:1px solid rgba(20,33,61,.12)}
.jsm-post-tags{display:flex;flex-wrap:wrap;gap:8px}
.jsm-post-tag{font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:999px;background:#F2F2F0;color:#14213D;transition:background .2s ease}
.jsm-post-tag:hover{background:#FCA311;color:#14213D}
.jsm-post-share{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.jsm-post-share__label{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(20,33,61,.5);margin-right:4px}
.jsm-post-share__btn{font-size:13px;font-weight:700;padding:8px 14px;border-radius:999px;border:1px solid rgba(20,33,61,.14);color:#14213D;transition:border-color .2s ease,color .2s ease}
.jsm-post-share__btn:hover{border-color:#FCA311;color:#FCA311}

.jsm-post-author{margin-top:40px;display:grid;grid-template-columns:96px minmax(0,1fr);gap:26px;align-items:start;background:#14213D;border-radius:20px;padding:32px}
.jsm-post-author .jsm-post-eyebrow{margin-bottom:10px}
.jsm-post-author__name{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;font-size:26px;line-height:1.05;color:#FFFFFF;margin-bottom:12px}
.jsm-post-author p{margin:0 0 18px;font-size:15px;line-height:1.62;color:rgba(229,229,229,.74)}
.jsm-post-author__link{font-size:14px;font-weight:700;color:#FCA311}
.jsm-post-author__link:hover{color:#FFFFFF}

/* sidebar */
.jsm-post-sidebar{display:grid;gap:28px;position:sticky;top:110px}
.jsm-post-toc{background:#F2F2F0;border:1px solid rgba(20,33,61,.1);border-radius:20px;padding:28px}
.jsm-post-toc__list{display:grid;gap:2px}
.jsm-post-toc__list a{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;padding:10px 0;font-size:15px;font-weight:600;color:#14213D;border-bottom:1px solid rgba(20,33,61,.08)}
.jsm-post-toc__list a:last-child{border-bottom:0}
.jsm-post-toc__list a:hover{color:#FCA311}
.jsm-post-toc__list span{color:#FCA311}
.jsm-post-widget{background:#14213D;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:28px}
.jsm-post-widget__title{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;font-size:25px;line-height:1.08;color:#FFFFFF;margin:0 0 14px}
.jsm-post-widget p{margin:0 0 24px;font-size:15px;line-height:1.62;color:rgba(229,229,229,.74)}
.jsm-post-widget--premium{background:linear-gradient(180deg,#182749 0%,#14213D 62%);border-color:rgba(252,163,17,.38);box-shadow:0 18px 46px rgba(20,33,61,.18)}

/* related */
.jsm-post-related{background:#F2F2F0;padding:96px 40px 110px}
.jsm-post-related__inner{max-width:1320px;margin:0 auto}
.jsm-post-related__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px}
.jsm-post-related__head .jsm-post-eyebrow{margin-bottom:14px;font-size:11.5px}
.jsm-post-related__title{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;font-size:44px;line-height:.98;margin:0}
.jsm-post-related__all{font-size:14px;font-weight:700;color:#14213D}
.jsm-post-related__all:hover{color:#FCA311}
.jsm-post-related__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.jsm-post-card{display:block;background:#FFFFFF;border:1px solid rgba(20,33,61,.1);border-radius:20px;overflow:hidden;color:#14213D;transition:transform .3s ease}
.jsm-post-card:hover{transform:translateY(-6px);color:#14213D}
.jsm-post-card__img{display:block;width:100%;height:180px;object-fit:cover;background:#E7E7E4}
.jsm-post-card__body{padding:24px 26px 28px}
.jsm-post-card__meta{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#FCA311;margin-bottom:12px}
.jsm-post-card__title{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;font-size:21px;line-height:1.1;margin:0}

/* ---------------------------------------------------------------- tablet */
@media (max-width:1024px){
  .jsm-post-hero__inner{padding:56px 32px 130px}
  .jsm-post-feature{padding:0 32px;margin-top:-84px}
  .jsm-post-feature__img{height:400px}
  .jsm-post-body{padding:56px 32px 88px}
  .jsm-post-layout{grid-template-columns:minmax(0,1fr);gap:48px}
  .jsm-post-article{max-width:none}
  .jsm-post-sidebar{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .jsm-post-toc{display:none}
  .jsm-post-related{padding:80px 32px 88px}
  .jsm-post-related__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jsm-post-related__grid > :nth-child(3){display:none}
}

/* ---------------------------------------------------------------- mobile */
@media (max-width:640px){
  .jsm-post-hero__inner{padding:40px 20px 96px}
  .jsm-post-hero__title{font-size:40px;line-height:.98}
  .jsm-post-hero__dek{font-size:16px;margin-bottom:26px}
  .jsm-post-hero__ring--lg{width:340px;height:340px;left:-120px;top:-100px}
  .jsm-post-hero__ring--sm{width:220px;height:220px;left:-60px;top:-40px}
  .jsm-post-feature{padding:0 20px;margin-top:-64px}
  .jsm-post-feature__img{height:220px;border-radius:16px}
  .jsm-post-body{padding:40px 20px 64px}
  .jsm-post-article > p{font-size:17px;line-height:1.72}
  .jsm-post-article > p.jsm-post-lede{font-size:19px}
  .jsm-post-article h2{font-size:28px;margin:56px 0 18px}
  .jsm-post-quote{padding:26px 24px;border-radius:18px}
  .jsm-post-quote--display p{font-size:22px}
  .jsm-post-steps li{grid-template-columns:36px minmax(0,1fr);gap:12px;font-size:17px}
  .jsm-post-steps__n{font-size:22px}
  .jsm-post-video{border-radius:16px}
  .jsm-post-promo{flex-direction:column;align-items:flex-start;gap:16px;padding:22px}
  .jsm-post-promo .jsm-post-btn{width:100%}
  .jsm-post-meta{flex-direction:column;align-items:flex-start}
  .jsm-post-author{grid-template-columns:minmax(0,1fr);gap:18px;padding:26px 22px}
  .jsm-post-avatar--lg{width:76px;height:76px}
  .jsm-post-sidebar{grid-template-columns:minmax(0,1fr)}
  .jsm-post-widget{padding:24px 22px}
  .jsm-post-related{padding:64px 20px 72px}
  .jsm-post-related__title{font-size:34px}
  .jsm-post-related__grid{grid-template-columns:minmax(0,1fr)}
  .jsm-post-related__grid > :nth-child(3){display:block}
}

/* ---------------------------------------------------------------------------
   WordPress post bodies
   ---------------------------------------------------------------------------
   Everything above was written against the hand-authored mockup, whose quote,
   step and video components carry classes and helper elements. Real post
   bodies are WordPress HTML with no classes at all. src/lib/content.js adds
   the two that CSS cannot express on its own - the video panel and its label,
   and the quote's short/long split - and the rest is styled here by element.

   Selectors are direct children of .jsm-post-article, matching the > p and
   > ul rules above, so a list nested inside another list or inside a quote
   keeps the browser's defaults rather than inheriting a component treatment.
   --------------------------------------------------------------------------- */

/* Video. .jsm-post-video on its own is a bare 16:9 letterbox - its navy never
   shows, because the iframe covers it exactly. Here it sits inside a padded
   navy panel with the label above it. */
.jsm-post-videoblock{margin:40px 0;padding:28px;background:#14213D;border-radius:20px}
.jsm-post-videoblock .jsm-post-video{margin:0;border-radius:12px}

/* Ordered lists. ::marker rather than a CSS counter: one list in the archive
   is <ol start="4">, and a counter would silently renumber it from 1. */
.jsm-post-article > ol{margin:0 0 30px;padding-left:46px;font-size:18px;line-height:1.7;color:rgba(20,33,61,.8)}
.jsm-post-article > ol > li{margin:0 0 14px;padding-left:6px}
.jsm-post-article > ol > li:last-child{margin-bottom:0}
.jsm-post-article > ol > li::marker{font-family:Anton,sans-serif;font-size:26px;color:#FCA311}
.jsm-post-article > ol strong{color:#14213D}

/* The mockup draws the quote mark with a .jsm-post-quote__mark element. A
   WordPress blockquote has no such child, so it is drawn from the pseudo. */
.jsm-post-quote::before{content:'\201C';display:block;font-family:Anton,sans-serif;font-size:64px;line-height:.6;color:#FCA311;margin-bottom:14px}

/* Links inside both: the > p a rule cannot reach them. */
.jsm-post-article > ol a{color:#14213D;font-weight:600;border-bottom:2px solid #FCA311}
.jsm-post-article > ol a:hover{color:#FCA311}
.jsm-post-quote a{color:#FFFFFF;border-bottom:2px solid #FCA311}
.jsm-post-quote a:hover{color:#FCA311}

@media (max-width:640px){
  .jsm-post-videoblock{padding:18px;border-radius:16px}
  .jsm-post-article > ol{padding-left:34px;font-size:17px}
  .jsm-post-article > ol > li::marker{font-size:24px}
}

/* Call-to-action panels. Rebuilt from the Avada two-column rows by
   src/lib/content.js: photo on the left, copy beside it, button underneath
   the copy. Two columns rather than three - a button in its own column
   squeezes the copy into a narrow ribbon and makes the panel taller, which
   is the opposite of what the figure variant below needs. */
.jsm-post-cta{
  margin:44px 0;padding:26px 28px;
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px 26px;align-items:start;
  background:#F2F2F0;border:1px solid rgba(20,33,61,.1);border-radius:20px;
}
/* height:auto keeps each photo's own proportions. A fixed frame would crop
   the two landscape screenshots down to a vertical sliver. */
.jsm-post-cta__img{grid-column:1;grid-row:1/3;align-self:start;width:150px;height:auto;border-radius:16px;display:block}
.jsm-post-cta__copy{grid-column:2;grid-row:1;min-width:0}
.jsm-post-cta__title{margin:0 0 8px;font-size:19px;line-height:1.35;font-weight:700;color:#14213D}
.jsm-post-cta__title--short{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;font-size:24px;line-height:1.1}
.jsm-post-cta p{margin:0 0 8px;font-size:15.5px;line-height:1.58;color:rgba(20,33,61,.72)}
.jsm-post-cta p:last-child{margin-bottom:0}
.jsm-post-cta__note{font-size:13px;color:rgba(20,33,61,.5)}
.jsm-post-cta .jsm-post-btn{grid-column:2;grid-row:2;justify-self:start;padding:11px 20px;font-size:14px;white-space:nowrap}
.jsm-post-cta .jsm-post-btn span{font-size:15px}

/* A button that was not part of a CTA row - the "Learn More" and "Book a Call"
   links that sat alone on a line under a paragraph or a list. */
.jsm-post-btn--solo{margin:6px 0 32px}

/* The full-length cut-out, standing behind the panel so the box cannot
   contain him: his head clears the top edge and his left arm crosses the
   left one.

   align-self:end pins him to the bottom edge, and the negative top margin
   keeps most of his height out of the row calculation. That negative margin
   also acts as a floor on the row, so a panel with very little copy cannot
   collapse shorter than he is and lose the effect. What shows above the top
   edge is up to about 60px, less when the copy runs long. Nothing above
   clips: .jsm-post-article and .jsm-post-layout set no overflow, so the
   left-hand bleed is free to cross the column edge. */
.jsm-post-cta--figure{margin-top:104px;grid-template-columns:172px minmax(0,1fr)}
.jsm-post-cta__img--figure{
  align-self:end;width:224px;height:296px;
  object-fit:contain;object-position:bottom center;
  border-radius:0;margin:-86px 0 -26px -54px;
}

@media (max-width:1024px){
  .jsm-post-cta{grid-template-columns:132px minmax(0,1fr);gap:14px 22px}
  .jsm-post-cta__img{width:132px}
  .jsm-post-cta--figure{margin-top:92px;padding:24px 26px;grid-template-columns:150px minmax(0,1fr)}
  .jsm-post-cta__img--figure{width:196px;height:259px;margin:-74px 0 -24px -44px}
}
@media (max-width:640px){
  .jsm-post-cta{grid-template-columns:minmax(0,1fr);padding:22px;gap:14px}
  .jsm-post-cta__img{grid-column:1;grid-row:1;width:120px}
  .jsm-post-cta__copy{grid-column:1;grid-row:2}
  .jsm-post-cta .jsm-post-btn{grid-column:1;grid-row:3;justify-self:stretch;width:100%}
  .jsm-post-cta__title--short{font-size:22px}
  .jsm-post-btn--solo{width:100%}
  /* Stacked, so there is no tall copy beside him to rise past. A plain
     negative top margin gives the same break-out against the top edge. */
  .jsm-post-cta--figure{margin-top:78px}
  .jsm-post-cta__img--figure{align-self:start;justify-self:start;width:150px;height:198px;margin:-58px 0 2px -34px}
}

/* The tail band - tags, share, author - is a continuation of the article
   rather than a new section, so it must not pad against the band above it.
   .jsm-post-body--tail is in the markup but the mockup never gave it a rule,
   so the two bands were stacking a 110px bottom padding, a 72px top padding
   and the meta row's own 48px margin: 274px of dead space before the tags,
   at every breakpoint. */
.jsm-post-body:has(+ .jsm-post-body--tail){padding-bottom:0}
.jsm-post-body--tail{padding-top:0}
.jsm-post-body--tail .jsm-post-meta{margin-top:32px}
/* 97 of the 104 articles end on a CTA panel, whose 44px bottom margin was
   stacking on top of that. The gap above the share row is now just the
   32px, whatever the last block happens to be. */
.jsm-post-body:has(+ .jsm-post-body--tail) .jsm-post-article > :last-child{margin-bottom:0}

/* A CTA row whose photo was a product screenshot or a graphic. Shrunk into
   the photo column those are illegible clutter, so the panel drops the
   column entirely and runs as a single column of copy. */
.jsm-post-cta--plain{grid-template-columns:minmax(0,1fr)}
.jsm-post-cta--plain .jsm-post-cta__copy{grid-column:1}
.jsm-post-cta--plain .jsm-post-btn{grid-column:1}

/* FAQ accordions inside a post body. The component itself is .jsm-faqs /
   .jsm-faq in jacobshireman.css, which every page already loads; only the
   spacing in the article flow belongs here. */
.jsm-post-article > .jsm-faqs{margin:0 0 30px}

/* ---------------------------------------------------------------------------
   Content shapes the mockup did not cover
   ---------------------------------------------------------------------------
   The handoff was written against a sample article: paragraphs, headings,
   one list, one quote, one video. Real posts also carry photographs, revenue
   tables, h4s, rules, nested lists and an embedded form, none of which had a
   rule. An audit of all 104 posts turned these up.
   --------------------------------------------------------------------------- */

/* Body photographs. .jsm-post-article is not inside .jsm, so the site's
   `.jsm img{max-width:100%}` reset never reached these - 1200px images were
   sitting in a 760px column and breaking out of it. :not([class]) keeps this
   off the CTA portraits, which size themselves. */
.jsm-post-article img:not([class]){display:block;max-width:100%;height:auto;border-radius:14px;margin:32px 0}

/* Deeper headings. The mockup stopped at h3. */
.jsm-post-article h4{font-family:Archivo,sans-serif;font-weight:700;font-size:18px;line-height:1.3;margin:32px 0 12px;color:#14213D}

/* Section rules. */
.jsm-post-article hr{border:0;height:1px;background:rgba(20,33,61,.14);margin:44px 0}

/* Nested lists. The > ul and > ol rules above are deliberately direct-child,
   so a list inside a list would otherwise fall back to browser defaults and
   change size and colour mid-list. 67 posts have one. */
.jsm-post-article li > ul,
.jsm-post-article li > ol{margin:10px 0 0;padding-left:22px;font-size:inherit;line-height:1.6;color:inherit}
.jsm-post-article li > ul > li,
.jsm-post-article li > ol > li{margin:0 0 6px}
.jsm-post-article li::marker{color:#FCA311}

/* Tables - the eXp revenue-share tiers, and one comparison. Scrolls rather
   than squashing on a narrow screen. */
.jsm-post-tablewrap{margin:0 0 30px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.jsm-post-article table{display:table;width:100%;margin:0;border-collapse:collapse;font-size:15.5px;line-height:1.5}
.jsm-post-article th,
.jsm-post-article td{padding:12px 14px;border:1px solid rgba(20,33,61,.12);text-align:left;vertical-align:top}
.jsm-post-article th{background:#F2F2F0;font-weight:700;color:#14213D;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.jsm-post-article td{color:rgba(20,33,61,.8)}
.jsm-post-article tbody tr:nth-child(even) td{background:rgba(20,33,61,.02)}

/* The one embedded booking form. */
.jsm-post-article > iframe{display:block;width:100%;max-width:100%;min-height:640px;border:0;border-radius:14px;margin:32px 0;background:#F2F2F0}

@media (max-width:640px){
  .jsm-post-article img:not([class]){margin:24px 0;border-radius:12px}
  .jsm-post-article hr{margin:32px 0}
  .jsm-post-article table{font-size:14px}
  .jsm-post-article th,.jsm-post-article td{padding:10px 11px}
}

/* The price line on the eXp country posts, sat between a plan heading and
   its feature list. */
.jsm-post-price{margin:-4px 0 14px;font-size:16px;color:rgba(20,33,61,.8)}
.jsm-post-price strong{font-family:Anton,sans-serif;font-weight:400;font-size:26px;color:#14213D;margin-right:6px;vertical-align:-1px}
.jsm-post-price span{color:rgba(20,33,61,.55)}