/* fst.com - single blog-post template (SaaS layout, brand-themed, CWV-safe).
   Loaded only on single posts. Scoped under .fst to avoid touching the rest of Divi. */

.fst{
  --fst-ink:#191627;      /* headings */
  --fst-body:#2b2b36;     /* body text (darkened so paragraphs + TOC don't read light) */
  --fst-muted:#6c6c7a;    /* meta / muted */
  --fst-line:#e7e7ef;     /* hairline borders */
  --fst-soft:#f7f7fb;     /* soft box bg */
  --fst-primary:#0B9BD7;  /* brand pink - primary CTA */
  --fst-purple:#0B9BD7;   /* brand purple - eyebrow / accents / active TOC */
  --fst-green:#00C97B;    /* brand green - highlights */
  --fst-blue:#0B9BD7;     /* brand blue - inline links */
  --fst-dark:#0f2545;     /* deep indigo - promo / banner */
  --fst-radius:12px;
  --fst-wrap:1180px;
  color:var(--fst-body);
  font-size:16px;
  line-height:1.65;
  /* The site uses a fixed/transparent Divi header (et_transparent_nav) that overlaps
     the content top - clear it so the breadcrumb isn't hidden underneath. Tune if the
     header height differs. */
  padding-top:92px;
}
.fst *{box-sizing:border-box;}
.fst .fst-wrap{max-width:var(--fst-wrap);margin:0 auto;padding:0 24px;width:100%;}

/* ---- buttons ---- */
.fst .fst-btn{
  display:inline-block;padding:11px 20px;border-radius:8px;font-size:14.5px;font-weight:700;
  line-height:1.2;text-align:center;cursor:pointer;transition:transform .12s ease,opacity .12s ease;border:1px solid transparent;
}
.fst .fst-btn:hover{transform:translateY(-1px);opacity:.94;}
.fst .fst-btn-primary{background:var(--fst-primary);color:#fff;}
.fst .fst-btn-secondary{background:#fff;color:var(--fst-ink);border-color:var(--fst-line);}
.fst .fst-btn-light{background:#fff;color:var(--fst-dark);}
.fst .fst-btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.4);}

/* ---- breadcrumb ---- */
.fst .fst-crumb{font-size:13px;color:var(--fst-muted);padding:6px 0;display:flex;align-items:center;flex-wrap:wrap;}
.fst .fst-crumb a{color:var(--fst-purple);font-weight:600;white-space:nowrap;}
.fst .fst-crumb a:hover{text-decoration:underline;}
.fst .fst-crumb span{margin:0 8px;color:var(--fst-muted);}
.fst .fst-crumb b,.fst .fst-crumb .fst-crumb-current{color:var(--fst-muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}

/* ---- article head (now inside the content column so the sidebar starts at the top) ---- */
.fst .fst-head{padding:0 0 30px;margin:0 0 8px;border-bottom:1px solid var(--fst-line);}
.fst .fst-eyebrow{display:inline-block;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#fff;font-weight:800;margin-bottom:18px;padding:6px 14px;border-radius:999px;background:linear-gradient(135deg,#00C97B,#0B9BD7);text-decoration:none;transition:opacity .12s,transform .12s;}
.fst a.fst-eyebrow:hover{opacity:.92;transform:translateY(-1px);color:#fff;}
.fst .fst-head h1{font-size:38px;line-height:1.16;margin:0 0 16px;font-weight:800;color:var(--fst-ink);letter-spacing:-.02em;}
.fst .fst-dek{font-size:18px;line-height:1.55;color:var(--fst-muted);margin:0 0 22px;}
.fst .fst-cta-row{display:flex;gap:12px;margin:0 0 26px;flex-wrap:wrap;}
.fst .fst-meta{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--fst-muted);flex-wrap:wrap;}
.fst .fst-meta-person{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;}
.fst a.fst-meta-person:hover .fst-meta-author{text-decoration:underline;}
.fst .fst-meta-item{display:inline-flex;align-items:center;gap:6px;}
.fst .fst-meta-ic{color:var(--fst-muted);flex:0 0 auto;}
.fst .fst-meta-author{color:var(--fst-purple);font-weight:700;}
.fst .fst-meta-sep{width:4px;height:4px;border-radius:50%;background:#cfcfdb;flex:0 0 auto;}
.fst .fst-avatar{width:42px;height:42px;border-radius:50%;display:inline-block;object-fit:cover;}

/* hero image (LCP), sits between the dek and the meta row. width/height attrs reserve
   space; aspect-ratio caps height (no CLS). */
.fst .fst-hero{margin:0 0 22px;}
.fst .fst-hero-img{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--fst-radius);background:var(--fst-soft);
}

/* ---- body grid: content + TOC + promo via named areas ---- */
.fst .fst-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;
  grid-template-areas:"content aside";
  align-items:start;padding:18px 0 56px;
}
.fst .fst-content{grid-area:content;min-width:0;}
/* The whole sidebar sticks as ONE unit, so TOC + promo never overlap on scroll. */
.fst .fst-aside{grid-area:aside;position:sticky;top:100px;align-self:start;
  overflow:visible;
  display:flex;flex-direction:column;gap:20px;}

/* Hide in-content TOCs (LuckyWP, plain ol.toc, and Divi CTA/promo TOC modules) -
   our sticky sidebar TOC replaces them so there's never a duplicate. */
.fst .fst-content .lwptoc,
.fst .fst-content #lwptoc,
.fst .fst-content .lwptoc_i,
.fst .fst-content ol.toc,
.fst .fst-content ul.toc,
.fst .fst-content #table-of-contents,
.fst .fst-content .et_pb_toc,
.fst .fst-content .et_pb_promo:has(#table-of-contents),
.fst .fst-content .et_pb_cta:has(#table-of-contents),
.fst .fst-content .et_pb_text:has(> #table-of-contents),
/* Robust: hide whichever Divi module/column wraps the in-content TOC list. */
.fst .fst-content .et_pb_module:has(ol.toc),
.fst .fst-content .et_pb_module:has(> * ol.toc),
.fst .fst-content .et_pb_column:has(ol.toc){display:none !important;}

/* Existing Divi-built posts: neutralize Divi's row/column widths so the article
   body fills the content column (no narrow half-width text + empty gap). */
.fst .fst-content .et_pb_section{width:100% !important;max-width:100% !important;padding-left:0 !important;padding-right:0 !important;background:transparent !important;}
.fst .fst-content .et_pb_row,
.fst .fst-content .et_pb_row_inner{display:block !important;width:100% !important;max-width:100% !important;margin:0 !important;padding-left:0 !important;padding-right:0 !important;}
.fst .fst-content .et_pb_column,
.fst .fst-content .et_pb_column_inner{display:block !important;width:100% !important;max-width:100% !important;margin:0 !important;float:none !important;}

/* Legacy migrated posts: the old theme baked a "Page Updated On / category / GET A FREE QUOTE"
   header and a logo + "Author:" block as the first Divi sections, before the real article
   (which is marked .middle_sec_content / .middle_content_sec). Our template already renders the
   title, meta, hero and author card, so hide that duplicate legacy chrome. The selector only
   matches when .middle_sec_content exists, so clean/new posts are untouched. */
.fst .fst-content .et_pb_section:has(~ .middle_sec_content),
.fst .fst-content .et_pb_section:has(~ .middle_content_sec){display:none !important;}
/* An embedded Divi Blog post-grid never belongs inside a single article. */
.fst .fst-content .et_pb_blog{display:none !important;}

/* ---- content typography ---- */
.fst .fst-content h2{font-size:25px;margin:40px 0 12px;font-weight:800;color:var(--fst-ink);scroll-margin-top:150px;letter-spacing:-.01em;}
.fst .fst-content h2:first-child{margin-top:0;}
.fst .fst-content h3{font-size:18px;margin:24px 0 8px;font-weight:700;color:var(--fst-ink);scroll-margin-top:150px;}
/* Neutralize old-theme heading spacer hacks (e.g. .middle_content_sec h3:before{height:125px})
   that inject huge empty gaps before headings in the new template. */
.fst .fst-content h2::before,.fst .fst-content h3::before,.fst .fst-content h4::before,
.fst .fst-content .middle_content_sec h2::before,.fst .fst-content .middle_content_sec h3::before,.fst .fst-content .middle_content_sec h4::before{content:none !important;display:none !important;height:0 !important;margin:0 !important;}
.fst .fst-content p{font-size:16.5px;font-weight:500;color:var(--fst-body);margin:0 0 15px;max-width:720px;}
.fst .fst-content ul,.fst .fst-content ol{margin:0 0 18px;padding-left:22px;max-width:720px;}
.fst .fst-content li{font-size:16.5px;font-weight:500;margin-bottom:8px;color:var(--fst-body);}
.fst .fst-content a{color:var(--fst-blue);text-decoration:underline;text-underline-offset:2px;}
.fst .fst-content a:hover{color:var(--fst-purple);}
.fst .fst-content strong,.fst .fst-content b{color:var(--fst-ink);}
/* internal/article links use the brand color. Scoped to the prose body (the_content) and marked
   important so Divi's own id-level link color (e.g. #et-boc a) cannot override it. */
.fst .fst-prose a{color:var(--fst-blue) !important;text-decoration:underline;text-underline-offset:2px;}
.fst .fst-prose a:hover{color:var(--fst-green) !important;}
/* keep long content from forcing horizontal page scroll (tables handled by .fst-table-wrap) */
.fst .fst-prose{overflow-wrap:break-word;word-wrap:break-word;}
.fst .fst-content pre{overflow-x:auto;max-width:100%;}
.fst .fst-content iframe{max-width:100%;}

/* The header now lives inside .fst-content, so keep its links (category pill,
   author) from inheriting the article-body link colour + underline above. */
.fst .fst-content .fst-head a{text-decoration:none;}
.fst .fst-content a.fst-eyebrow,.fst .fst-content a.fst-eyebrow:hover{color:#fff;}
.fst .fst-content a.fst-meta-person,.fst .fst-content a.fst-meta-person:hover{color:inherit;}
.fst .fst-content .fst-meta-author{color:var(--fst-purple);}
.fst .fst-content a.fst-meta-person:hover .fst-meta-author{text-decoration:underline;}
.fst .fst-content img{max-width:100%;height:auto;border-radius:10px;margin:8px 0 18px;}
.fst .fst-content blockquote{margin:20px 0;padding:6px 20px;border-left:3px solid var(--fst-green);color:var(--fst-ink);background:var(--fst-soft);border-radius:0 8px 8px 0;}
/* tables scroll inside their own container so a wide table never scrolls the whole page */
.fst .fst-content .fst-table-wrap{max-width:720px;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px 0 22px;border-radius:8px;}
.fst .fst-content .fst-table-wrap table{margin:0;max-width:none;width:auto;min-width:100%;}
.fst .fst-content table{width:100%;border-collapse:collapse;margin:12px 0 22px;font-size:15px;max-width:720px;}
.fst .fst-content th,.fst .fst-content td{border:1px solid var(--fst-line);padding:11px 13px;text-align:left;}
.fst .fst-content th{background:var(--fst-soft);font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--fst-muted);}

/* ---- optional author blocks (use these classes in clean-prose posts) ---- */
.fst .key-box,.fst .fst-keybox{background:var(--fst-soft);border:1px solid var(--fst-line);border-left:3px solid var(--fst-green);border-radius:10px;padding:20px 22px;margin:0 0 24px;max-width:720px;}
.fst .key-box .kb-title,.fst .fst-keybox .kb-title{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--fst-purple);margin-bottom:10px;}
.fst .key-box ul,.fst .fst-keybox ul{margin:0;padding-left:18px;}

.fst .stat-row{display:flex;gap:16px;margin:22px 0 26px;flex-wrap:wrap;max-width:720px;}
.fst .stat-card{flex:1;min-width:140px;border:1px solid var(--fst-line);border-radius:10px;padding:18px;background:#fff;}
.fst .stat-num{font-size:26px;font-weight:800;color:var(--fst-purple);line-height:1;}
.fst .stat-label{font-size:12.5px;color:var(--fst-muted);margin-top:6px;}

.fst .inline-cta{border:1px solid var(--fst-line);border-radius:12px;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:20px;margin:26px 0;background:var(--fst-soft);flex-wrap:wrap;max-width:720px;}
.fst .inline-cta-text{font-size:16px;font-weight:800;color:var(--fst-ink);max-width:400px;}
.fst .inline-cta-sub{font-size:13.5px;color:var(--fst-muted);font-weight:400;margin-top:4px;}

/* Hide the in-content Supreme (dsm) social-share buttons that float mid-article -
   we render a clean share row at the bottom of the article instead. */
.fst .fst-content .dsm_social_share_buttons,
.fst .fst-content .dsm-social-share-buttons-container,
.fst .fst-content .et_pb_social_media_follow{display:none !important;}

/* ---- bottom social share ---- */
.fst .fst-share{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:34px 0 4px;max-width:720px;}
.fst .fst-share-label{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--fst-muted);}
.fst .fst-share-btns{display:flex;gap:10px;}
.fst .fst-content a.fst-share-btn,
.fst a.fst-share-btn{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--fst-primary);color:#fff;text-decoration:none;transition:transform .12s ease,opacity .12s ease;}
.fst a.fst-share-btn:hover{transform:translateY(-2px);opacity:.9;color:#fff;}
.fst .fst-share-btn svg{fill:#fff;}

/* ---- feedback ---- */
.fst .fst-feedback{display:flex;align-items:center;justify-content:space-between;gap:14px;
  border-top:1px solid var(--fst-line);border-bottom:1px solid var(--fst-line);
  padding:18px 0;margin-top:34px;font-size:14.5px;color:var(--fst-muted);flex-wrap:wrap;max-width:720px;}
.fst .fst-fb-btns{display:flex;gap:10px;}
.fst .fst-fb-btn{border:1px solid var(--fst-line);border-radius:7px;padding:7px 16px;font-size:13.5px;background:#fff;color:var(--fst-ink);cursor:pointer;font-weight:600;transition:border-color .15s ease,color .15s ease;}
.fst .fst-fb-btn:hover,.fst .fst-fb-btn[aria-pressed="true"]{border-color:var(--fst-purple);color:var(--fst-purple);}
.fst .fst-fb-btn:disabled{opacity:.5;cursor:default;}
/* results (thumbs-up / thumbs-down tallies after voting) */
.fst .fst-fb-results{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;}
.fst .fst-fb-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--fst-line);border-radius:999px;padding:6px 14px;font-size:13.5px;font-weight:700;background:#fff;color:var(--fst-ink);line-height:1;}
.fst .fst-fb-pill svg{display:block;flex:0 0 auto;}
.fst .fst-fb-up svg{color:#1f9d55;}
.fst .fst-fb-down svg{color:#cf2e2e;}
.fst .fst-fb-pill.is-active{border-color:var(--fst-purple);box-shadow:inset 0 0 0 1px var(--fst-purple);}
.fst .fst-fb-thanks{font-size:13.5px;color:var(--fst-purple);font-weight:600;margin-left:4px;}

/* ---- cards / TOC / promo ---- */
.fst .fst-card{border:1px solid var(--fst-line);border-radius:16px;padding:24px 22px;background:#fff;}
.fst .fst-card-title{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:var(--fst-muted);margin-bottom:16px;}
/* sidebar search (above the TOC) */
.fst .fst-side-search{position:relative;display:flex;align-items:center;margin:0 0 20px;background:#fff;border:1px solid var(--fst-line);border-radius:12px;padding:4px 4px 4px 38px;transition:border-color .15s,box-shadow .15s;}
.fst .fst-side-search:focus-within{border-color:#0B9BD7;box-shadow:0 0 0 3px rgba(11,155,215,.14);}
.fst .fst-side-search-ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--fst-muted);pointer-events:none;}
.fst .fst-side-search input[type=search]{flex:1;border:0;outline:0;background:transparent;font-size:14.5px;color:var(--fst-ink);padding:9px 6px;min-width:0;-webkit-appearance:none;appearance:none;}
.fst .fst-side-search input[type=search]::-webkit-search-decoration,.fst .fst-side-search input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;}
.fst .fst-side-search input::placeholder{color:var(--fst-muted);}
.fst .fst-side-search button{flex:0 0 auto;border:0;cursor:pointer;background:linear-gradient(90deg,#0B9BD7,#00C97B);color:#fff;font-size:13.5px;font-weight:700;padding:9px 16px;border-radius:9px;transition:opacity .15s,transform .15s;}
.fst .fst-side-search button:hover{opacity:.93;transform:translateY(-1px);}

.fst .fst-toc{flex:0 0 auto;}
.fst .fst-toc .fst-card-title{color:var(--fst-purple);}
.fst .fst-toc summary{list-style:none;cursor:default;}
.fst .fst-toc summary::-webkit-details-marker{display:none;}

/* Timeline-style TOC: a vertical line with a dot per H2; the active item gets a
   larger filled purple dot, a thick purple line segment, and bold purple text. */
.fst .fst-toc-list{list-style:none;margin:0;padding:0;font-size:16px;position:relative;}
.fst .fst-toc-list::before{content:"";position:absolute;left:6px;top:16px;bottom:16px;width:2px;background:#d4d4e0;border-radius:2px;}
.fst .fst-toc-list li{position:relative;padding:0 0 0 28px;border:0;margin:0;}
.fst .fst-toc-list li::before{content:"";position:absolute;left:1px;top:16px;width:11px;height:11px;border-radius:50%;background:#c7c7d4;box-shadow:0 0 0 3px #fff;z-index:1;transition:background .12s;}
.fst .fst-toc-list li a{display:block;padding:6px 0;color:var(--fst-body);font-weight:500;line-height:1.45;transition:color .12s;border:0;margin:0;}
.fst .fst-toc-list li a:hover{color:var(--fst-ink);}
.fst .fst-toc-list li.fst-active > a{color:var(--fst-purple);font-weight:600;}
.fst .fst-toc-list li.fst-active::before{background:var(--fst-purple);width:14px;height:14px;left:-1px;top:14px;box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(11,155,215,.18);z-index:2;}
/* Collapsible TOC: cap the list on long articles so the sticky sidebar CTA stays in view.
   The .fst-toc-collapsed class + the toggle button are added by JS on desktop only, and
   only when the list actually overflows the cap. */
.fst .fst-toc-list.fst-toc-collapsed{max-height:45vh;overflow:hidden;}
.fst .fst-toc-list.fst-toc-collapsed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:54px;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none;}
.fst .fst-toc-more{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:10px;padding:9px 0 1px;background:none;border:0;border-top:1px solid var(--fst-line);cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--fst-purple);}
.fst .fst-toc-more::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .2s ease;}
.fst .fst-toc-more.is-expanded::after{transform:rotate(-135deg);margin-top:3px;}

.fst .fst-promo{
  border-radius:18px;padding:26px 24px;color:#fff;position:relative;overflow:hidden;
  background:
    radial-gradient(130% 80% at 100% 100%, rgba(11,155,215,.32), transparent 55%),
    linear-gradient(155deg,#0B9BD7 0%,#0b6d97 44%,#0f2545 100%);
  box-shadow:0 14px 34px rgba(15,37,69,.30);
}
.fst .fst-promo .fst-card-title{color:#fff;letter-spacing:1.2px;}
.fst .fst-promo ul{margin:0 0 20px;padding-left:18px;font-size:14.5px;}
.fst .fst-promo li{margin-bottom:10px;color:#fff;line-height:1.5;}
.fst .fst-promo li::marker{color:rgba(255,255,255,.7);}
.fst .fst-promo .fst-btn{display:block;width:100%;margin-bottom:12px;padding:13px 20px;font-size:15px;}
.fst .fst-promo .fst-btn:last-child{margin-bottom:0;}
/* primary = pink filled, secondary = outlined white (per design) */
.fst .fst-promo .fst-btn-light{background:linear-gradient(135deg,#00C97B,#0B9BD7);color:#fff;border:0;box-shadow:0 10px 24px rgba(11,155,215,.32);}
.fst .fst-promo .fst-btn-light:hover{opacity:1;transform:translateY(-1px);box-shadow:0 12px 28px rgba(11,155,215,.40);}
.fst .fst-promo .fst-btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45);}
.fst .fst-promo .fst-btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.08);}

/* ---- sidebar widgets: recent posts + categories ---- */
.fst .fst-widget{padding:22px 20px;}
.fst .fst-widget .fst-card-title{margin:0 0 14px;}

.fst .fst-recent-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.fst .fst-recent-item{margin:0;padding:0;border:0;}
.fst .fst-recent-link{display:flex;gap:12px;align-items:center;text-decoration:none;}
.fst .fst-recent-thumb{flex:0 0 62px;width:62px;height:62px;border-radius:10px;overflow:hidden;background:var(--fst-soft);border:1px solid var(--fst-line);}
.fst .fst-recent-img{width:100%;height:100%;object-fit:cover;display:block;}
.fst .fst-recent-body{min-width:0;display:flex;flex-direction:column;gap:4px;}
.fst .fst-recent-title{font-size:14px;font-weight:700;color:var(--fst-ink);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .12s;}
.fst .fst-recent-link:hover .fst-recent-title{color:var(--fst-purple);}
.fst .fst-recent-date{font-size:12px;color:var(--fst-muted);}

.fst .fst-cat-list{list-style:none;margin:0;padding:0;}
.fst .fst-cat-item{margin:0;padding:0;border-bottom:1px solid var(--fst-line);}
.fst .fst-cat-item:last-child{border-bottom:0;}
.fst .fst-cat-item a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;
  text-decoration:none;color:var(--fst-body);font-size:14.5px;font-weight:600;transition:color .12s;}
.fst .fst-cat-item a:hover{color:var(--fst-purple);}
.fst .fst-cat-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fst .fst-cat-count{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--fst-muted);background:var(--fst-soft);
  border:1px solid var(--fst-line);border-radius:999px;padding:2px 10px;min-width:30px;text-align:center;transition:color .12s,border-color .12s;}
.fst .fst-cat-item a:hover .fst-cat-count{color:var(--fst-purple);border-color:var(--fst-purple);}
.fst .fst-cat-active > a{color:var(--fst-purple);}
.fst .fst-cat-active .fst-cat-count{background:linear-gradient(135deg,#00C97B,#0B9BD7);color:#fff;border-color:transparent;}

/* ---- related ---- */
.fst .fst-related{padding:10px 0 44px;}
.fst .fst-section-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--fst-muted);margin-bottom:18px;}
.fst .fst-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.fst .fst-related-card{border:1px solid var(--fst-line);border-radius:var(--fst-radius);overflow:hidden;background:#fff;transition:box-shadow .15s,transform .15s;display:block;}
.fst .fst-related-card:hover{box-shadow:0 8px 24px rgba(25,22,39,.08);transform:translateY(-2px);}
.fst .fst-related-thumb{aspect-ratio:16/9;background:var(--fst-soft);border-bottom:1px solid var(--fst-line);overflow:hidden;}
.fst .fst-related-img{width:100%;height:100%;object-fit:cover;display:block;}
.fst .fst-related-body{padding:14px 16px;}
.fst .fst-related-cat{font-size:11.5px;color:var(--fst-purple);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;font-weight:700;}
.fst .fst-related-title{font-size:15px;font-weight:700;color:var(--fst-ink);line-height:1.35;}

/* ---- bottom CTA banner ---- */
.fst .fst-banner{background:var(--fst-dark);color:#fff;border-radius:16px;padding:46px 40px;margin:8px 0 54px;text-align:center;
  background-image:radial-gradient(circle at 20% 0%,rgba(0,201,123,.16),transparent 45%),radial-gradient(circle at 90% 100%,rgba(11,155,215,.18),transparent 45%);}
.fst .fst-banner h2{font-size:28px;margin:0 0 10px;font-weight:800;color:#fff;}
.fst .fst-banner p{font-size:15px;color:rgba(255,255,255,.75);margin:0 0 24px;}
.fst .fst-banner .fst-cta-row{justify-content:center;}

/* ---- responsive ---- */
@media (max-width:900px){
  .fst{padding-top:66px;} /* shorter mobile header */
  /* header lives in the content column now, so article comes first, sidebar after. */
  .fst .fst-grid{grid-template-columns:1fr;grid-template-areas:"content" "aside";gap:22px;padding:14px 0 44px;}
  .fst .fst-aside{position:static;max-height:none;overflow:visible;gap:20px;margin-top:8px;}
  .fst .fst-toc[open] summary{margin-bottom:6px;}
  .fst .fst-toc summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;}
  .fst .fst-toc summary::after{content:"⌄";font-size:16px;color:var(--fst-muted);}
  .fst .fst-related-grid{grid-template-columns:1fr;}
  .fst .fst-head h1{font-size:29px;}
  .fst .fst-dek{font-size:16px;}
  .fst .fst-banner{padding:34px 22px;}
  .fst .fst-feedback{margin-top:26px;}
}
@media (max-width:480px){
  .fst .fst-wrap{padding:0 16px;}
  .fst .fst-head{padding:26px 0 22px;}
  .fst .fst-head h1{font-size:25px;}
  .fst .fst-cta-row .fst-btn{flex:1;}
}