/* Phase 2.8-L4 / L4-P1 — Blog Article (single.php), scoped under
   .erpp-blog-article. Aligned with References/ERP-Peers-Complete-
   Website-Design-System-Handoff.zip → templates/blog-article.html.
   The article body (.single-contet / .erpp-rcs__body) keeps rendering
   as ordinary the_content() output — this file only normalizes its
   typography/contrast/link-color contract via a scoped layer so
   legacy per-post inline colors/classes read consistently, without
   ever rewriting post content itself. */

.erpp-blog-article{
  --primary:#4f46e5;--primary-dark:#3730a3;--primary-subtle:#f2f3fb;
  --heading:#1e1b4b;--body:#33475b;--muted:#667085;--border:#dedfec;--section-alt:#f8f8fc;
  --container:1200px;--reading:820px;
  background:#fff;
}
.erpp-blog-article .container{width:min(calc(100% - 48px),var(--container));margin-inline:auto}
.erpp-blog-article .eyebrow{margin:0 0 .9rem;color:var(--primary);font-size:.74rem;font-weight:760;letter-spacing:.15em;text-transform:uppercase}
.erpp-blog-article h1,.erpp-blog-article h2,.erpp-blog-article h3{margin:0;color:var(--heading);font-weight:720;letter-spacing:-.035em;line-height:1.12}

/* Hero */
.erpp-ba-hero{background:var(--section-alt);border-bottom:1px solid var(--border)}
.erpp-ba-hero-grid{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(340px,.97fr);gap:3.5rem;align-items:center;padding:50px 0}
.erpp-ba-hero-copy h1{max-width:18ch;font-size:clamp(2.1rem,3.2vw,2.9rem);line-height:1.08}
.erpp-ba-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-top:1.3rem;color:var(--muted);font-size:.78rem}
.erpp-ba-meta span+span:before{content:"·";margin-right:.55rem}
.erpp-ba-author-chip{display:inline-flex;align-items:center;gap:.5rem;color:var(--heading);font-weight:680}
.erpp-ba-author-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover}
.erpp-ba-hero-media{margin:0;position:relative;aspect-ratio:1.9/1;overflow:hidden;border-radius:14px;background:#ececf4;box-shadow:0 14px 38px rgba(30,27,75,.1)}
/* object-position biased toward the upper third: most featured photos
   (people, equipment) have their subject's head/focal point near the
   top of the frame, and this hero box's aspect ratio is often wider
   than the source photo's, which crops height — a plain center crop
   was clipping subjects' heads (e.g. the WMS warehouse-worker photo). */
.erpp-ba-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.erpp-ba-progress{height:3px;background:transparent}
.erpp-ba-progress span{display:block;width:0;height:100%;background:var(--primary)}

/* Article shell / TOC column — restyles the existing
   singlebolg-icon/leftsideTOC/StickySidebar markup (JS scroll-spy in
   custom.js targets .scroll_ids[urlid] — unchanged). `align-items` is
   intentionally left at its grid default (stretch, not "start") so
   the TOC column's grid cell spans the same height as the much taller
   content column — without that, position:sticky has nowhere to
   track: a sticky element can only stay in view for as long as its
   own containing block is tall, and "start" was shrinking that
   container down to just the TOC list's own height, causing the TOC
   to disappear a few hundred pixels into a multi-thousand-pixel
   article. */
.erpp-blog-article .singlebolg-bolgdesc{background:#fff}
/* align-items:stretch is explicit (not left at the CSS default) because
   custom.css has its own pre-existing `.singlebolg-main{align-items:
   flex-start}` rule (from the original flex-based layout this grid
   replaces) that would otherwise still cascade in for this property
   alone and reproduce the same sticky-TOC-height bug. */
.erpp-blog-article .singlebolg-main{display:grid;grid-template-columns:290px minmax(0,var(--reading));gap:56px;align-items:stretch;justify-content:start;width:min(calc(100% - 48px),var(--container));margin-inline:auto;padding:56px 0 70px}
.erpp-blog-article .singlebolg-icon.leftsideTOC{min-width:0}
.erpp-blog-article .StickySidebar.detail_blog{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow-y:auto;padding-right:.4rem}
.erpp-blog-article .detail_blog_header{padding-bottom:.85rem;margin-bottom:.4rem;border-bottom:2px solid var(--primary);color:var(--heading);font-size:.74rem;font-weight:780;letter-spacing:.09em;text-transform:uppercase}
/* Phase 2.8-L4-P3: custom.css's `.blogSidebarInfo > li::before` draws a
   10x10 circle with one squared corner (border-bottom-right-radius:0)
   as a bullet before every top-level TOC item — a speech-bubble/
   "message dot" shape, not a premium indicator. Not editable in place
   (that rule is shared with no other caller, but overriding here keeps
   the change scoped and self-documenting rather than editing a
   generic-looking custom.css rule in isolation). Replaced with a
   cleaner left accent border that only appears on hover/active, the
   common "premium TOC" pattern. */
.erpp-blog-article .blogSidebarInfo.article-menu{margin:0;padding:0;list-style:none}
.erpp-blog-article .blogSidebarInfo.article-menu > li{padding-left:0}
.erpp-blog-article .blogSidebarInfo.article-menu > li::before{content:none}
.erpp-blog-article .blogSidebarInfo.article-menu li{border-bottom:1px solid var(--border)}
.erpp-blog-article .blogSidebarInfo.article-menu a{display:block;padding:.65rem .1rem .65rem .75rem;margin-left:-.75rem;border-left:2px solid transparent;color:var(--body);font-size:.82rem;line-height:1.42;font-weight:560;text-decoration:none;cursor:pointer;white-space:normal;word-break:break-word;transition:border-color .15s,color .15s}
.erpp-blog-article .blogSidebarInfo.article-menu a:hover,
.erpp-blog-article .blogSidebarInfo.article-menu a.is-active{color:var(--primary-dark);font-weight:700;border-left-color:var(--primary)}
.erpp-blog-article .sub_content_ul{margin:0;padding:0 0 .3rem .9rem;list-style:none}
.erpp-blog-article .sub_content_ul a{font-size:.75rem;padding:.45rem .1rem}

/* Content typography / contrast / brand-link normalization layer —
   governs spacing, contrast and link color for the_content() output
   without altering the stored post content itself. Some older posts
   carry WordPress core "preset color" classes (e.g. a bright green
   picked from the block editor's text-color panel for a link, or a
   very-light-gray preset used as body text) that read fine in the
   editor's own chrome but are off-brand or low-contrast against this
   template's white background — normalized here, scoped only to blog
   articles. */
.erpp-blog-article .singlebolg-text{min-width:0}
.erpp-blog-article .single-contet{color:var(--body);font-size:1.05rem;line-height:1.75}
.erpp-blog-article .single-contet h2{margin:2.6rem 0 1.1rem;font-size:clamp(1.6rem,2.6vw,2.1rem);color:var(--heading)}
.erpp-blog-article .single-contet h3{margin:2rem 0 .9rem;font-size:1.35rem;color:var(--heading)}
.erpp-blog-article .single-contet h4{margin:1.6rem 0 .7rem;font-size:1.1rem;color:var(--heading)}
.erpp-blog-article .single-contet p{margin:0 0 1.25rem;text-align:left}
.erpp-blog-article .single-contet ul,.erpp-blog-article .single-contet ol{margin:0 0 1.4rem;padding-left:1.3rem}
.erpp-blog-article .single-contet li{margin:.4rem 0}
.erpp-blog-article .single-contet blockquote{margin:1.8rem 0;padding:1.2rem 1.4rem;border-left:3px solid var(--primary);background:var(--section-alt);color:var(--heading);font-size:1.05rem}
.erpp-blog-article .single-contet blockquote p:last-child{margin-bottom:0}
.erpp-blog-article .single-contet figcaption{margin-top:.55rem;color:var(--muted);font-size:.78rem;text-align:center}
.erpp-blog-article .single-contet img{border-radius:12px;height:auto}
.erpp-blog-article .single-contet table{width:100%;border-collapse:collapse}
.erpp-blog-article .single-contet th{background:var(--heading);color:#fff}
.erpp-blog-article .single-contet th,.erpp-blog-article .single-contet td{padding:.75rem;border-bottom:1px solid var(--border);text-align:left}
/* Reusable horizontal-scroll wrapper for wide tables in article body content
   (added for the Integration Monitoring guide's failure-category table;
   reusable for any future .single-contet table that doesn't fit narrow
   viewports). Wrap the <table> in <div class="erpp-table-scroll">...</div>. */
.erpp-blog-article .single-contet .erpp-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.4rem}
.erpp-blog-article .single-contet .erpp-table-scroll table{margin-bottom:0;min-width:560px}
/* Scroll hint for wide tables (OPP-038, DEC-249): a plain, static text hint
   placed OUTSIDE the scrolling .erpp-table-scroll container, in normal
   document flow - NOT an overlay, NOT positioned over the table, so it
   cannot exhibit the defect that got the earlier OPP-043 fade treatment
   rejected (that one was position:absolute *inside* the scrolling element,
   so it stayed visually pinned while the content scrolled underneath it).
   This hint simply sits below the table and is only shown below the same
   ~1050px breakpoint where horizontal scroll is the real mechanism. */
.erpp-blog-article .single-contet .erpp-scroll-hint{display:none;margin:-1rem 0 1.4rem;font-size:.82rem;color:var(--muted);text-align:right}
@media(max-width:1050px){
  .erpp-blog-article .single-contet .erpp-scroll-hint{display:block}
}
/* Comparison-table desktop fit (top-netsuite-partner-list.php buyer-comparison
   table, DEC-110): the shared 820px reading column (--reading, line 13) is a
   deliberate prose-readability width, kept untouched for every other table/
   paragraph on this and every other article. This table alone gets slightly
   tighter cell padding and a locked first-column width so its 6 columns fit
   inside that width at normal desktop sizes without needing horizontal
   scroll. Scoped to .erpp-compare-table only - the regional-directory and
   buyer-fit tables on the same page already fit and are untouched. Below
   ~1050px the sidebar TOC collapses and .erpp-table-scroll's existing
   overflow-x:auto (unchanged) remains the tablet/mobile fallback. */
.erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table th,
.erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table td{padding:.6rem .55rem;font-size:.92rem;line-height:1.45}
.erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table th:first-child,
.erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table td:first-child{white-space:nowrap}
/* Intentional column proportions for the best-celigo-partners.php shortlist
   table (Company / Best For / Delivery Model / Coverage / Celigo
   Relationship-Proof), DEC-117: widths reflect actual information value per
   column rather than the browser's default auto-sizing - Company and
   Coverage hold short strings and get less room; Best For and the
   Relationship/Proof column carry the real decision content and get more.
   table-layout:fixed makes the percentages authoritative; percentages sum
   to 100 and are only applied on desktop widths where the table already
   fits its container (DEC-110) - the table-wide min-width:560px fallback
   above still governs the tablet/mobile scroll case. */
@media(min-width:1051px){
  /* !important required on table-layout here and below (DEC-120 fix): a
     pre-existing, sitewide inline <style> block (not in any theme CSS
     file - found via a live CSSOM audit, cssText confirms it, source
     unidentified/legacy) declares a bare `table { table-layout: auto
     !important; ... }` rule. A plain class selector, however specific,
     cannot beat !important regardless of source order, so table-layout
     never actually applied here before this fix - the celigo table's
     earlier "looks about right" widths were the browser's auto-layout
     algorithm coincidentally tracking the width hints on that table's
     more evenly-sized content, not a real fixed layout; the buyer-fit
     table's much longer first-column sentences exposed the bug clearly
     (rendered ~62/22/16% instead of the intended 32/24/44%). */
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--celigo{table-layout:fixed!important}
  /* Overrides the shared .erpp-compare-table td:first-child{white-space:nowrap}
     rule above: that rule assumes short, single/two-word company names (true
     on the NetSuite partner-list page) and was fighting the fixed-width
     intent here, where "Charted (formerly SquareWorks Consulting)" forced
     the whole column wide regardless of the 15% target. Company names on
     this table wrap normally instead. */
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--celigo th:first-child,
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--celigo td:first-child{white-space:normal}
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--celigo th:nth-child(1),
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--celigo td:nth-child(1){width:16%}
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--celigo th:nth-child(2),
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--celigo td:nth-child(2){width:28%}
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--celigo th:nth-child(3),
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--celigo td:nth-child(3){width:20%}
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--celigo th:nth-child(4),
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--celigo td:nth-child(4){width:12%}
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--celigo th:nth-child(5),
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--celigo td:nth-child(5){width:25%}
  /* Buyer-fit decision table (best-celigo-partners.php "Which Type of
     Celigo Partner Fits Your Project", DEC-120): widths set from actual
     measured cell-length averages across all 8 rows, not the requested
     starting-point percentages applied blindly - "Your situation" cells
     averaged ~58 characters, "Partner type" ~45, "What to verify" ~73
     (longest and most decision-critical, since it tells the buyer what
     to actually confirm before hiring). 32/24/44 reflects that measured
     ratio more closely than the 30/23/47 starting point. */
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--buyerfit{table-layout:fixed!important}
  /* The shared .erpp-compare-table th/td:first-child{white-space:nowrap}
     rule (written for the celigo table's short company names) also
     matches this table's base .erpp-compare-table class and was forcing
     its much longer "Your situation" sentences onto one unwrapped line,
     visually overflowing into the next column - found via live visual
     QA, not just a width measurement. Overridden back to normal wrap. */
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--buyerfit th:first-child,
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--buyerfit td:first-child{white-space:normal}
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--buyerfit th:nth-child(1),
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--buyerfit td:nth-child(1){width:32%}
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--buyerfit th:nth-child(2),
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--buyerfit td:nth-child(2){width:24%}
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--buyerfit th:nth-child(3),
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--buyerfit td:nth-child(3){width:44%}
  /* Decision matrix table (netsuite-integration-architecture-guide.php,
     DEC-128 editorial rebuild): now 4 columns (Situation/Usually Start
     With/Why/Watch For, up from 3) after the buyer asked for an added
     "Why" column. Widths re-measured from the 9-row matrix's actual
     content (Situation ~61 chars, Usually Start With ~28, Why ~48,
     Watch For ~46) - 34/15/26/25. The DEC-127 3-column --iadf-layers and
     --iadf-fit table classes are removed here: the layers table was
     replaced by the Five Layers diagram image, and the standalone fit
     table was consolidated into each method's own Best-for/Consider-
     carefully-when blocks plus the new decision-flow diagram, so both
     had become dead weight repeating the same guidance a third and
     fourth time. */
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--iadf{table-layout:fixed!important}
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--iadf th:first-child,
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--iadf td:first-child{white-space:normal}
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--iadf th:nth-child(1),
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--iadf td:nth-child(1){width:34%}
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--iadf th:nth-child(2),
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--iadf td:nth-child(2){width:15%}
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--iadf th:nth-child(3),
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--iadf td:nth-child(3){width:26%}
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--iadf th:nth-child(4),
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--iadf td:nth-child(4){width:25%}
}
/* Callout/summary box (DEC-127): a genuinely useful pull-out for a single
   key point, same left-border-accent pattern as the existing blockquote
   style just above, kept visually distinct (no italics, bold lead-in)
   so it reads as "remember this" rather than "someone said this". */
.erpp-blog-article .single-contet .erpp-callout{margin:1.6rem 0;padding:1.1rem 1.3rem;border-left:3px solid var(--primary);border-radius:0 10px 10px 0;background:var(--primary-subtle);color:var(--heading)}
.erpp-blog-article .single-contet .erpp-callout p{margin:0}
/* Quick-answer callout (DEC-128, netsuite-integration-architecture-guide.php):
   same box, slightly more prominent (thicker border, larger type) since
   it is the answer-first AEO/GEO summary near the top of the article,
   not a mid-article aside. */
.erpp-blog-article .single-contet .erpp-callout--answer{border-left-width:4px;padding:1.3rem 1.5rem;font-size:1.05rem;line-height:1.55}
/* Architecture diagram figures (DEC-128): plain, bordered, rounded image
   frame matching the site's existing card treatment (border/shadow
   already used on .blog cards elsewhere in this file), centered, fully
   responsive - the image itself is a fixed-aspect raster so this just
   constrains width and adds the frame. --inline variant is the smaller
   scenario-specific diagrams embedded mid-section rather than the two
   full-width primary diagrams (Five Layers, Decision Flow). */
.erpp-blog-article .single-contet .erpp-diagram{margin:1.6rem 0;text-align:center}
.erpp-blog-article .single-contet .erpp-diagram img{max-width:100%;height:auto;border:1px solid var(--border);border-radius:14px;box-shadow:0 4px 16px rgba(30,27,75,.06)}
.erpp-blog-article .single-contet .erpp-diagram--inline{margin:1.2rem 0}
/* Simple cost model (netsuite-pricing-guide.php, owner-survival pass):
   live HTML/CSS equation component, not a raster image. The original
   diagram was a fixed-aspect image scaled via max-width:100%, which
   meant captions shrank to genuinely illegible size on mobile (verified
   ~8px effective caption height at a 390px viewport - a real
   Progressive Disclosure / mobile-safety failure caught in visual QA).
   Real text at every viewport instead, reflowing to a vertical stack on
   mobile rather than shrinking, matching .erpp-gate's own
   grid-to-1fr breakpoint pattern below. */
.erpp-blog-article .single-contet .erpp-cost-model{margin:1.6rem 0;padding:1.7rem 1.8rem;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:0 4px 16px rgba(30,27,75,.05)}
.erpp-blog-article .single-contet .erpp-cost-model__eyebrow{margin:0 0 .35rem;font-size:.72rem;font-weight:780;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.erpp-blog-article .single-contet .erpp-cost-model__title{margin:0 0 1.3rem;color:var(--heading);font-size:1.15rem;font-weight:740;letter-spacing:-.01em}
.erpp-blog-article .single-contet .erpp-cost-model__row{display:flex;align-items:stretch;gap:.9rem;flex-wrap:wrap}
.erpp-blog-article .single-contet .erpp-cost-model__box{flex:1 1 150px;padding:1.1rem 1rem;border-radius:12px;background:var(--primary-subtle);text-align:center}
.erpp-blog-article .single-contet .erpp-cost-model__box--total{background:#fff;border:1.5px solid var(--primary)}
.erpp-blog-article .single-contet .erpp-cost-model__num{display:block;margin-bottom:.3rem;color:var(--primary);font-size:.78rem;font-weight:780}
.erpp-blog-article .single-contet .erpp-cost-model__box strong{display:block;color:var(--heading);font-size:1rem;line-height:1.3}
.erpp-blog-article .single-contet .erpp-cost-model__caption{display:block;margin-top:.35rem;color:var(--muted);font-size:.82rem;line-height:1.4}
.erpp-blog-article .single-contet .erpp-cost-model__op{flex:0 0 auto;align-self:center;color:var(--muted);font-size:1.2rem;font-weight:600}
@media(max-width:700px){
  .erpp-blog-article .single-contet .erpp-cost-model{padding:1.3rem 1.4rem}
  .erpp-blog-article .single-contet .erpp-cost-model__row{flex-direction:column}
  .erpp-blog-article .single-contet .erpp-cost-model__box{flex:1 1 auto}
  .erpp-blog-article .single-contet .erpp-cost-model__op{padding:.1rem 0}
}
/* Prominent CTA card (DEC-128): the single mid-article commercial CTA
   moment, placed once after the decision matrix. Deliberately a full
   card (eyebrow/title/text/button) rather than the plain pill link used
   elsewhere, since this page's CTA strategy calls for exactly one
   premium, visually distinct moment plus one soft text CTA near the end
   (.erpp-cta-soft, existing). Reuses the same button treatment as
   .erpp-cta-prominent a (DEC-121, contrast already verified) inside
   .erpp-cta-card__action a rather than redefining it. */
.erpp-blog-article .single-contet .erpp-cta-card{margin:2rem 0;padding:1.8rem 2rem;border-radius:16px;background:linear-gradient(135deg,var(--primary-subtle),#fff);border:1px solid var(--border);box-shadow:0 6px 22px rgba(30,27,75,.06)}
.erpp-blog-article .single-contet .erpp-cta-card__eyebrow{margin:0 0 .4rem;font-size:.76rem;font-weight:760;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.erpp-blog-article .single-contet .erpp-cta-card__title{margin:0 0 .6rem;color:var(--heading);font-size:1.35rem;font-weight:740;letter-spacing:-.02em;line-height:1.25}
.erpp-blog-article .single-contet .erpp-cta-card__text{margin:0 0 1.2rem;color:var(--body);font-size:.98rem;line-height:1.5}
.erpp-blog-article .single-contet .erpp-cta-card__action{margin:0}
.erpp-blog-article .single-contet .erpp-cta-card__action a{
  display:inline-block;padding:.85rem 1.7rem;border-radius:999px;
  background:var(--primary);color:#fff!important;text-decoration:none!important;
  font-weight:700;font-size:.95rem;transition:background .2s;
}
.erpp-blog-article .single-contet .erpp-cta-card__action a:hover{background:var(--primary-dark);color:#fff!important}
.erpp-blog-article .single-contet .erpp-cta-card__action a:focus-visible{
  outline:2px solid var(--primary-dark);outline-offset:2px;
}
@media(max-width:640px){
  .erpp-blog-article .single-contet .erpp-cta-card{padding:1.4rem 1.5rem}
  .erpp-blog-article .single-contet .erpp-cta-card__title{font-size:1.15rem}
}
/* Readiness gate card (DEC-132, netsuite-go-live-readiness-checklist.php):
   the repeating unit for the 14 go-live readiness gates. Each gate needs
   five distinct fields (what must be true / evidence / owner / warning
   signs / the three-way Go-Conditional-No-Go trigger) read at a glance
   during a real steering-committee meeting, not as a wall of paragraphs -
   same bordered-card language as .erpp-cta-card (border/radius/shadow)
   but flat white (this is reference material read repeatedly down the
   page, not a one-off commercial moment, so no gradient). The trigger
   row uses semantic status color (green/amber/red) as its own channel,
   independent of the brand accent, so a scanning reader can find "what
   makes this a No-Go" by shape/color alone, matching the site's
   established --primary-family token pattern for everything else. */
.erpp-blog-article .single-contet .erpp-gate{margin:1.8rem 0;padding:1.5rem 1.7rem;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:0 4px 16px rgba(30,27,75,.05)}
.erpp-blog-article .single-contet .erpp-gate__head{display:flex;align-items:baseline;gap:.65rem;margin:0 0 1.1rem}
.erpp-blog-article .single-contet .erpp-gate__num{flex:0 0 auto;color:var(--primary);font-size:.85rem;font-weight:780;letter-spacing:.04em}
.erpp-blog-article .single-contet .erpp-gate__head h3{margin:0;font-size:1.2rem;line-height:1.3}
.erpp-blog-article .single-contet .erpp-gate__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.6rem;margin-bottom:1.1rem}
.erpp-blog-article .single-contet .erpp-gate__field{margin:0}
.erpp-blog-article .single-contet .erpp-gate__label{margin:0 0 .3rem;color:var(--muted);font-size:.72rem;font-weight:780;letter-spacing:.08em;text-transform:uppercase}
.erpp-blog-article .single-contet .erpp-gate__field p,
.erpp-blog-article .single-contet .erpp-gate__field ul{margin:0;color:var(--body);font-size:.94rem;line-height:1.5}
.erpp-blog-article .single-contet .erpp-gate__field ul{padding-left:1.1rem}
.erpp-blog-article .single-contet .erpp-gate__owner{display:inline-block;margin-top:.15rem;padding:.2rem .65rem;border-radius:999px;background:var(--primary-subtle);color:var(--primary-dark);font-size:.78rem;font-weight:700}
.erpp-blog-article .single-contet .erpp-gate__triggers{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.7rem;padding-top:1.1rem;border-top:1px dashed var(--border)}
.erpp-blog-article .single-contet .erpp-gate__trigger{margin:0;padding:.7rem .8rem;border-radius:10px;font-size:.86rem;line-height:1.4}
.erpp-blog-article .single-contet .erpp-gate__trigger strong{display:block;margin-bottom:.25rem;font-size:.72rem;font-weight:780;letter-spacing:.06em;text-transform:uppercase}
.erpp-blog-article .single-contet .erpp-gate__trigger--go{background:#eefaf3;color:#0f5132;border:1px solid #bfe8cf}
.erpp-blog-article .single-contet .erpp-gate__trigger--go strong{color:#0f7a45}
.erpp-blog-article .single-contet .erpp-gate__trigger--conditional{background:#fff9ec;color:#6b4a05;border:1px solid #f3ddac}
.erpp-blog-article .single-contet .erpp-gate__trigger--conditional strong{color:#a16207}
.erpp-blog-article .single-contet .erpp-gate__trigger--nogo{background:#fdf0ef;color:#7a271a;border:1px solid #f3c9c3}
.erpp-blog-article .single-contet .erpp-gate__trigger--nogo strong{color:#b42318}
@media(max-width:700px){
  .erpp-blog-article .single-contet .erpp-gate{padding:1.2rem 1.3rem}
  .erpp-blog-article .single-contet .erpp-gate__grid{grid-template-columns:1fr}
  .erpp-blog-article .single-contet .erpp-gate__triggers{grid-template-columns:1fr}
}
/* Premium prominent CTA (best-celigo-partners.php, DEC-118): a real,
   scoped button style for the one CTA placed immediately after the
   owner's own profile section - distinct from the plain-text soft CTAs
   used everywhere else in article bodies (the established pattern:
   erpp_svc-family italic-link CTAs, or top-netsuite-partner-list's own
   plain <em><a>). Deliberately not reusing .mfg-btn-a/.ep-btn-primary
   (legacy classes scoped by name to fix two specific older posts'
   hand-pasted CTA blocks, not a general component) or .mfg-btn-b
   (assumes a dark background, wrong here). Solid pill button using the
   same --primary token as the rest of the site's real CTAs. */
.erpp-blog-article .single-contet .erpp-cta-prominent{margin:1.6rem 0}
/* Contrast fix (DEC-121): the sitewide `.erpp-rcs__body a{color:var(--color-primary-dark)!important;
   text-decoration:underline!important}` rule (design-system.css, "always
   wins over any per-post color") was overriding this button's intended
   white text with dark indigo (#3730a3) on the #4f46e5 background - the
   same "link-color bleeding onto a button" bug already documented above
   for .mfg-btn-a/.ep-btn-primary, just not caught here originally since
   no visual QA pass had zoomed into this specific element's rendered
   color before. White-on-#4f46e5 measures ~6.3:1 contrast (WCAG AA
   requires 4.5:1 for text this size, 3:1 for large/bold - this clears
   both), white-on-#3730a3 hover measures ~9.9:1 - both were already
   compliant in the original design, the bug was purely that the color
   rule never actually applied. !important required on color and
   text-decoration to win; :visited is deliberately not restyled (no
   separate rule exists to override, so the same !important base rule
   governs it); :focus-visible adds a visible ring for keyboard users
   (WCAG 2.2 SC 2.4.11), inset so it doesn't shift surrounding layout. */
.erpp-blog-article .single-contet .erpp-cta-prominent a{
  display:inline-block;padding:.85rem 1.7rem;border-radius:999px;
  background:var(--primary);color:#fff!important;text-decoration:none!important;
  font-weight:700;font-size:1.02rem;box-shadow:0 6px 18px rgba(79,70,229,.25);
}
.erpp-blog-article .single-contet .erpp-cta-prominent a:hover{background:var(--primary-dark);color:#fff!important}
.erpp-blog-article .single-contet .erpp-cta-prominent a:focus-visible{
  outline:3px solid #fff;outline-offset:-5px;
  box-shadow:0 6px 18px rgba(79,70,229,.25),0 0 0 2px var(--primary-dark);
}
.erpp-blog-article .single-contet .erpp-cta-soft{margin:1.4rem 0}
/* Brand-aligned link color (Phase 2.8-L4-P3): moved to the shared
   `.erpp-rcs__body a` rule in assets/css/design-system.css, since
   `.single-contet` always carries `.erpp-rcs__body` too (see
   single.php) and that shared rule now also covers Case Study/Product/
   Privacy Policy pages using the same component — not duplicated here
   to avoid two sources of truth for the same color. */
/* Low-contrast WordPress core text-color presets, normalized back to
   the readable body color when used as legacy inline text color. */
.erpp-blog-article .single-contet .has-very-light-gray-color,
.erpp-blog-article .single-contet .has-white-color,
.erpp-blog-article .single-contet .has-pale-pink-color,
.erpp-blog-article .single-contet .has-luminous-vivid-amber-color{color:var(--body)!important}

/* Prev/next nav — custom.css already provides a complete, working
   design for .blog-nav-single (flex layout, CSS border-chevron icons,
   hover states); this block previously duplicated it with a
   conflicting grid layout and a literal "\2190/\2192" character
   stacked on top of the same ::before the border-chevron already used,
   which is what produced the reported "multiple arrow signs." Only a
   2-line title clamp is added here (custom.css forces a single-line
   ellipsis truncation that was cutting long titles awkwardly). */
.erpp-blog-article .blog-nav-single__title{white-space:normal!important;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}

/* Topic browser + related-articles discovery (erpp_render_related_posts_by_category()'s
   existing .homepage-blogsection/.blog markup, restyled only when it
   appears inside .erpp-blog-article — Case Study prototype has no such
   wrapper, so it is unaffected). Card treatment matches the Blog
   Listing's premium card system (assets/css/blog-listing.css). */
.erpp-ba-topic-browser{display:flex;align-items:center;gap:.55rem;width:min(calc(100% - 48px),var(--container));margin:64px auto 0;padding-bottom:1rem;overflow-x:auto;border-bottom:1px solid var(--border);scrollbar-width:none}
.erpp-ba-topic-browser::-webkit-scrollbar{display:none}
.erpp-ba-topic-label{flex:0 0 auto;margin-right:.25rem;padding-right:1rem;border-right:1px solid var(--border);color:var(--heading);font-size:.7rem;font-weight:780;letter-spacing:.1em;text-transform:uppercase}
.erpp-ba-topic-link{flex:0 0 auto;padding:.48rem .78rem;border:1px solid transparent;border-radius:999px;color:var(--muted);font-size:.76rem;font-weight:650;text-decoration:none}
.erpp-ba-topic-link:hover,.erpp-ba-topic-link.is-current{border-color:var(--border);background:var(--primary-subtle);color:var(--primary)}

/* Overrides a sitewide `.homepage-blogsection{background:#0f0e2a!important}`
   rule in custom.css (originally meant only for the homepage's own
   Case Studies section, but written with a bare, unscoped selector —
   the same recurring CSS-leak bug class already fixed 3 times
   elsewhere in this project on breadcrumbs/footer reuse). */
.erpp-blog-article .homepage-blogsection{padding:52px 0 76px!important;background:#fff!important}
/* No .container wrapper exists around this title in the shared
   erpp_render_related_posts_by_category() markup (unlike the card
   .row below it, which this file's own .homepage-blogsection .row
   rule constrains) — without a matching width/centering rule here,
   the heading sits flush at the section's true edge while the cards
   below it are centered in a 1200px column, reading as misaligned. */
.erpp-blog-article .homepage-blogsection-title{display:block!important;width:min(calc(100% - 48px),var(--container));margin-left:auto!important;margin-right:auto!important;margin-bottom:1.6rem;text-align:left}
.erpp-blog-article .homepage-blogsection-title:before{content:none!important}
.erpp-blog-article .homepage-blogsection-title h2{font-size:clamp(1.7rem,2.6vw,2.2rem);background:none!important;-webkit-text-fill-color:var(--heading)!important;color:var(--heading)}
.erpp-blog-article .homepage-blogsection .row{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem 1.35rem;width:min(calc(100% - 48px),var(--container));margin:1.6rem auto 0;padding:0;list-style:none;align-items:stretch}
.erpp-blog-article .homepage-blogsection .row>[class*="col-"]{width:auto;padding:0}
/* !important required — see the matching comment in blog-listing.css:
   custom.css's bare, unscoped `.blog{...!important}` "dark glass card"
   rule (meant for the homepage's own dark section) otherwise wins over
   this light-card treatment for background/border/box-shadow. */
.erpp-blog-article .blog{display:flex!important;flex-direction:column!important;height:100%;border:1px solid var(--border)!important;border-radius:14px!important;overflow:hidden;background:#fff!important;box-shadow:0 4px 16px rgba(30,27,75,.05)!important;backdrop-filter:none!important;transition:box-shadow .2s,transform .2s}
.erpp-blog-article .blog:hover{background:#fff!important;box-shadow:0 10px 26px rgba(30,27,75,.1)!important;border-color:var(--primary)!important;transform:translateY(-2px)}
.erpp-blog-article .list-post-thumbnail-wrapper{position:relative;aspect-ratio:1.9/1;height:auto!important;overflow:hidden;background:#ededf5}
.erpp-blog-article .list-post-thumbnail-img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.erpp-blog-article .blog .data{display:flex;flex-direction:column;flex:1;padding:1.1rem 1.15rem 1.3rem}
.erpp-blog-article .blog .author{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem}
.erpp-blog-article .blog .author-thumbnail .avatar{width:24px;height:24px;border-radius:50%;object-fit:cover}
.erpp-blog-article .blog .author .name a{color:var(--muted);font-size:.72rem;text-decoration:none;font-weight:600}
.erpp-blog-article .blog .author .date{margin:0 0 0 auto;color:var(--muted);font-size:.7rem}
.erpp-blog-article .blog .title{flex:0 0 auto;margin-bottom:0}
.erpp-blog-article .blog .title h3{font-size:1.08rem;line-height:1.32;margin:0}
.erpp-blog-article .blog .title h3 a{color:var(--heading);text-decoration:none}
.erpp-blog-article .blog .title h3 a:hover{color:var(--primary)}
.erpp-blog-article .blog .more{margin-top:auto;padding-top:1rem}
.erpp-blog-article .blog .more .fas{display:none}
.erpp-blog-article .blog .more .btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;border:1px solid var(--primary)!important;border-radius:999px;background:var(--primary-subtle,#f2f3fb)!important;color:var(--primary-dark)!important;font-size:.76rem;font-weight:700;text-decoration:none;transition:background .2s,color .2s}
.erpp-blog-article .blog .more .btn:after{content:"\2192";transition:transform .2s}
.erpp-blog-article .blog:hover .more .btn{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}
.erpp-blog-article .blog:hover .more .btn:after{transform:translateX(3px)}

/* Blog CTA/contact/social panel — footer.php's sitewide "Get In Touch"
   section (.homepage-contactsection) renders on nearly every non-
   front page, including blog articles; it is NOT rebuilt or moved
   here (that would touch a sitewide shared component used by Service/
   Industry pages too) — instead its dark treatment is lightened only
   on blog article pages via WordPress's own `single-post` body class,
   aligning it with the Contact page's light, airy form styling
   without a second global form system. */
body.single-post .homepage-contactsection{background:#fff;color:var(--body,#33475b);border-top:1px solid var(--border,#dedfec)}
/* .leftside-title h3 uses a white-to-lavender gradient text-clip with
   !important on every property (background/-webkit-background-clip/
   -webkit-text-fill-color/color) — legible on the panel's original
   dark-navy background, but reads as near-invisible pale-on-white
   here; every one of those properties must be matched to win. */
body.single-post .homepage-contactsection .leftside-title h3{background:none!important;-webkit-background-clip:initial!important;-webkit-text-fill-color:var(--heading,#1e1b4b)!important;background-clip:initial!important;color:var(--heading,#1e1b4b)!important}
body.single-post .homepage-contactsection .contactus-rightside-title h3{color:var(--heading,#1e1b4b)}
body.single-post .homepage-contactsection .leftside-title p{color:var(--muted,#667085)!important}
/* .footer-contact-inner's own box background/border
   (rgba(255,255,255,.04) / rgba(255,255,255,.07)) are near-invisible
   white-on-white washes designed for the panel's original dark-navy
   background — same fix pattern as the heading gradient above. */
body.single-post .homepage-contactsection .footer-contact-inner{color:var(--body,#33475b);background:var(--primary-subtle,#f2f3fb);border-color:var(--border,#dedfec)}
body.single-post .homepage-contactsection .footer-contact-inner:hover{background:var(--primary-subtle,#f2f3fb);border-color:var(--primary,#4f46e5)}
body.single-post .homepage-contactsection .footer-contact-inner a{color:var(--primary-dark,#3730a3)}
/* Each icon is a `content:''` pseudo-element with
   `filter:brightness(0) invert(1) opacity(.6)` hard-coding it to white
   regardless of the underlying (also white-filled) inline SVG — the
   filter, not a `color`/`fill` property, is what makes it white, so it
   must be overridden the same way: brightness(0) alone renders black,
   which reads clearly against this panel's light surface. */
body.single-post .homepage-contactsection .footer-contact-inner::before{filter:brightness(0) opacity(.72)}
body.single-post .homepage-contactsection .footerttl{color:var(--heading,#1e1b4b)}
/* Social icons: reuse the theme's own inline-SVG icon system
   (erpp_resolve_social_icon_html()/erpp_social_icon_svg()) — only
   recolored here to the brand palette instead of the dark-panel
   styling meant for a navy background. */
body.single-post .homepage-contactsection .footer-social-section-part a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--primary,#4f46e5);color:#fff;border:1px solid var(--primary,#4f46e5)}
body.single-post .homepage-contactsection .footer-social-section-part a:hover{background:var(--primary,#4f46e5);color:#fff}
body.single-post .homepage-contactsection .footer-social-section-part svg{width:16px;height:16px;fill:currentColor}
body.single-post .homepage-contactsection .contactus-rightside input,
body.single-post .homepage-contactsection .contactus-rightside select,
body.single-post .homepage-contactsection .contactus-rightside textarea{background:#fff;border-color:var(--border,#dedfec);color:var(--heading,#1e1b4b)}

/* Phase 2.8-L6-P1 — legacy per-post CTA button normalization. Some
   older posts have a complete one-off <style> block hand-pasted
   directly into post_content (never edited here — post content is
   never rewritten), defining an entirely different, pre-rebrand color
   system and using it on CTA buttons: best-wms-for-netsuite's
   `.ep-btn-primary` resolves to a literal `--ep-accent:#008000`
   (bright green) background with underlined indigo text (the governed
   `.erpp-rcs__body a` link-color rule bleeding onto what is visually a
   button, not an inline link); cloud-erp-for-manufacturing's
   `.mfg-btn-a`/`.mfg-btn-b` resolve to a teal background and a
   barely-visible outline button, both with the same underlined-indigo
   text problem. `!important` is required because the pasted <style>
   tag renders inline in the post body, after this stylesheet in
   DOM/cascade order, so it otherwise wins on equal specificity. Only
   the two legacy classes found during this phase's audit are handled
   here, by name — a future post found with a similar hand-pasted CTA
   block using different class names would need the same treatment
   added, not a broad selector that could catch unrelated content. */
.erpp-blog-article .erpp-rcs__body .ep-btn-primary,
.erpp-blog-article .erpp-rcs__body .mfg-btn-a{
  background:var(--primary,#4f46e5)!important;
  color:#fff!important;
  text-decoration:none!important;
  border:1px solid var(--primary,#4f46e5)!important;
  border-radius:999px!important;
}
.erpp-blog-article .erpp-rcs__body .ep-btn-primary:hover,
.erpp-blog-article .erpp-rcs__body .mfg-btn-a:hover{
  background:var(--primary-dark,#3730a3)!important;
  border-color:var(--primary-dark,#3730a3)!important;
  color:#fff!important;
}
.erpp-blog-article .erpp-rcs__body .mfg-btn-b{
  background:transparent!important;
  color:#fff!important;
  text-decoration:none!important;
  border:1.5px solid rgba(255,255,255,.55)!important;
  border-radius:999px!important;
}
.erpp-blog-article .erpp-rcs__body .mfg-btn-b:hover{
  background:rgba(255,255,255,.1)!important;
  border-color:#fff!important;
  color:#fff!important;
}

@media(max-width:1050px){
  .erpp-ba-hero-grid{grid-template-columns:1fr;gap:2rem;padding:40px 0}
  .erpp-blog-article .singlebolg-main{grid-template-columns:1fr;gap:0}
  .erpp-blog-article .singlebolg-icon.leftsideTOC{display:none}
  .erpp-blog-article .homepage-blogsection .row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .erpp-blog-article .container,.erpp-blog-article .singlebolg-main,.erpp-ba-topic-browser{width:min(calc(100% - 32px),var(--container))}
  .erpp-ba-hero-copy h1{font-size:1.9rem}
  .erpp-blog-article .single-contet{font-size:1rem}
  .erpp-blog-article .homepage-blogsection .row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .erpp-blog-article *,.erpp-blog-article *:before,.erpp-blog-article *:after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* OPP-027 (DEC-164) - /netsuite-chrome-extensions/ full rebuild - category
   overview grid, comparison table, and decision-helper block. Inline
   <style> tags in post_content are stripped by wp_kses on unauthenticated
   wp_update_post() calls, so these live here instead. Scoped to
   .erpp-rcs__body so they only affect blog-post body content. */
.erpp-rcs__body .erpp-nce-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0 32px}
.erpp-rcs__body .erpp-nce-cat-card{border:1px solid #e3e1f5;border-radius:10px;padding:16px;background:#f8f7fd}
.erpp-rcs__body .erpp-nce-cat-num{font-size:13px;font-weight:700;color:#5b3df6;margin-bottom:6px}
.erpp-rcs__body .erpp-nce-cat-title{font-size:15px;font-weight:700;color:#1c1b2e;margin-bottom:4px}
.erpp-rcs__body .erpp-nce-cat-desc{font-size:13px;color:#55536b;line-height:1.4}
.erpp-rcs__body .erpp-table-scroll{overflow-x:auto;margin:16px 0 28px}
.erpp-rcs__body .erpp-nce-table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.erpp-rcs__body .erpp-nce-table th{text-align:left;background:#f1effc;color:#1c1b2e;padding:10px 12px;font-weight:700;border-bottom:2px solid #e3e1f5}
.erpp-rcs__body .erpp-nce-table td{padding:10px 12px;border-bottom:1px solid #ece9f8;color:#33314a;vertical-align:top}
.erpp-rcs__body .erpp-nce-table tr:last-child td{border-bottom:none}
.erpp-rcs__body .erpp-nce-decision{display:flex;flex-direction:column;gap:10px;margin:20px 0 28px}
.erpp-rcs__body .erpp-nce-decision-row{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;padding:12px 16px;border-left:3px solid #5b3df6;background:#f8f7fd;border-radius:6px}
.erpp-rcs__body .erpp-nce-decision-q{font-weight:700;color:#1c1b2e;font-size:14px}
.erpp-rcs__body .erpp-nce-decision-a{color:#45435c;font-size:14px}
@media(max-width:700px){
  .erpp-rcs__body .erpp-nce-overview{grid-template-columns:1fr 1fr}
}
@media(max-width:460px){
  .erpp-rcs__body .erpp-nce-overview{grid-template-columns:1fr}
}

/* DEC-165 remediation - /netsuite-chrome-extensions/ direct-link restoration
   pass. Category section headings need to visually dominate the individual
   extension-item headings now that items are demoted h2->h3 (existing
   .single-contet h3 styling already suits item headings, left untouched).
   Reuses the same #5b3df6 accent already used for .erpp-nce-cat-num above -
   no new brand color introduced. Scoped to .erpp-rcs__body (this page only). */
.erpp-rcs__body .erpp-nce-category-h2{
  font-size:1.6rem;
  font-weight:800;
  color:#5b3df6;
  border-bottom:2px solid #e3e1f5;
  padding-bottom:8px;
  margin:2.6rem 0 1rem;
}
@media(max-width:460px){
  .erpp-rcs__body .erpp-nce-category-h2{font-size:1.3rem}
}

/* "View on Chrome Web Store" direct-link line inserted under every retained
   extension's heading. */
.erpp-rcs__body .erpp-nce-link{margin:-.6rem 0 1rem}
.erpp-rcs__body .erpp-nce-link a{
  font-weight:700;
  font-size:.92rem;
  text-decoration:none;
  border-bottom:1px solid currentColor;
}

/* Per-category comparison tables (Extension | Best for | Direct link) - reuse
   the existing .erpp-nce-table look, just a distinguishing modifier so they
   read as compact triage tables rather than the master Quick Comparison. */
.erpp-rcs__body .erpp-nce-cat-table{font-size:13px}
.erpp-rcs__body .erpp-nce-cat-table th,
.erpp-rcs__body .erpp-nce-cat-table td{padding:8px 10px}

/* NetSuite Statistics research-asset styling (OPP-024/DEC-181/182 cleanup).
   Replaces a page-specific inline <style> block previously stored in the
   post's page_head_analytics_code field, which imported a non-brand Google
   Font and defined a fully independent navy/gold color palette instead of
   reusing the site's own design tokens. Reuses .erpp-blog-article's existing
   --primary/--heading/--body/--muted/--section-alt tokens and inherits the
   article's own font stack (no Google Font import). Scoped under
   .single-contet .ns-blog so it cannot affect any other article. */
.erpp-blog-article .single-contet .ns-blog{color:var(--body);line-height:1.75}
.erpp-blog-article .single-contet .ns-blog .lead{font-size:1.08rem;color:var(--muted);border-left:4px solid var(--primary);padding-left:1.1rem;margin-bottom:2rem}
.erpp-blog-article .single-contet .ns-blog .ns-src-note{display:block;font-size:.82rem;color:var(--muted)}
.erpp-blog-article .single-contet .ns-blog .ns-last-verified{display:inline-block;margin-left:.4rem;font-size:.78rem;font-weight:700;color:var(--primary)}

.erpp-blog-article .single-contet .ns-blog .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:1.6rem 0 2rem}
.erpp-blog-article .single-contet .ns-blog .stat-card{background:var(--heading);color:#fff;border-radius:12px;padding:20px 18px;box-shadow:0 4px 20px rgba(30,27,75,.10)}
.erpp-blog-article .single-contet .ns-blog .stat-card .val{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800;color:#a5b4fc;line-height:1.1}
.erpp-blog-article .single-contet .ns-blog .stat-card .label{font-size:.82rem;opacity:.85;margin-top:4px}
.erpp-blog-article .single-contet .ns-blog .stat-card .src{font-size:.7rem;opacity:.6;margin-top:8px}
.erpp-blog-article .single-contet .ns-blog .stat-card.blue{background:var(--primary-dark)}
.erpp-blog-article .single-contet .ns-blog .stat-card.blue .val{color:#a5b4fc}

.erpp-blog-article .single-contet .ns-blog .highlight-box{background:var(--heading);color:#fff;border-radius:12px;padding:24px 28px;margin:1.8rem 0;border-left:5px solid var(--primary)}
.erpp-blog-article .single-contet .ns-blog .highlight-box .hb-title{font-size:1rem;font-weight:700;color:#a5b4fc;margin-bottom:8px;text-transform:uppercase;letter-spacing:.06em}
.erpp-blog-article .single-contet .ns-blog .highlight-box p{margin:0;opacity:.92}
.erpp-blog-article .single-contet .ns-blog .highlight-box a{color:#fff!important;text-decoration:underline!important}

.erpp-blog-article .single-contet .ns-blog .ns-table-wrap{overflow-x:auto;margin:1.4rem 0 2rem;border-radius:12px;box-shadow:0 2px 12px rgba(30,27,75,.06)}
.erpp-blog-article .single-contet .ns-blog .ns-table{width:100%;border-collapse:collapse;font-size:.9rem;background:#fff}
.erpp-blog-article .single-contet .ns-blog .ns-table thead tr{background:var(--heading);color:#fff}
.erpp-blog-article .single-contet .ns-blog .ns-table th{padding:13px 16px;text-align:left;font-weight:700;white-space:nowrap}
.erpp-blog-article .single-contet .ns-blog .ns-table td{padding:11px 16px;border-bottom:1px solid var(--border);vertical-align:top}
.erpp-blog-article .single-contet .ns-blog .ns-table tbody tr:nth-child(even){background:var(--section-alt)}
.erpp-blog-article .single-contet .ns-blog .ns-table .tag{display:inline-block;background:var(--primary-subtle);color:var(--primary-dark);font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:20px}

.erpp-blog-article .single-contet .ns-blog .bar-list{margin:1.2rem 0 1.8rem}
.erpp-blog-article .single-contet .ns-blog .bar-item{margin-bottom:14px}
.erpp-blog-article .single-contet .ns-blog .bar-item .bar-label{display:flex;justify-content:space-between;font-size:.85rem;font-weight:600;margin-bottom:4px;color:var(--heading)}
.erpp-blog-article .single-contet .ns-blog .bar-track{background:var(--border);border-radius:50px;height:10px;overflow:hidden}
.erpp-blog-article .single-contet .ns-blog .bar-fill{height:100%;border-radius:50px;background:var(--primary)}

.erpp-blog-article .single-contet .ns-blog .callout{background:var(--primary-subtle);border-left:5px solid var(--primary);border-radius:0 12px 12px 0;padding:18px 22px;margin:1.6rem 0;font-size:.96rem;color:var(--heading)}
.erpp-blog-article .single-contet .ns-blog .callout strong{color:var(--primary-dark)}

.erpp-blog-article .single-contet .ns-blog .insight-list{list-style:none;padding:0;margin:1.2rem 0 2rem}
.erpp-blog-article .single-contet .ns-blog .insight-list li{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.erpp-blog-article .single-contet .ns-blog .insight-list .num{flex-shrink:0;width:30px;height:30px;background:var(--heading);color:#a5b4fc;font-weight:800;font-size:.82rem;border-radius:50%;display:flex;align-items:center;justify-content:center}
.erpp-blog-article .single-contet .ns-blog .insight-list .text{font-size:.92rem}
.erpp-blog-article .single-contet .ns-blog .insight-list .text strong{color:var(--heading)}

.erpp-blog-article .single-contet .ns-blog .sec-divider{border:none;border-top:2px dashed var(--border);margin:2.8rem 0}

.erpp-blog-article .single-contet .ns-blog .cta-block{background:var(--heading);border-radius:12px;padding:32px 28px;text-align:center;color:#fff;margin-top:3rem}
.erpp-blog-article .single-contet .ns-blog .cta-block h3{color:#a5b4fc;margin:0 0 10px;font-size:1.25rem}
.erpp-blog-article .single-contet .ns-blog .cta-block p{opacity:.88;margin:0 0 18px;font-size:.95rem}
.erpp-blog-article .single-contet .ns-blog .cta-btn{display:inline-block;background:var(--primary);color:#fff!important;font-weight:700;font-size:.9rem;padding:12px 28px;border-radius:50px;border-bottom:none!important;text-decoration:none!important}
.erpp-blog-article .single-contet .ns-blog .cta-btn:hover{background:var(--primary-dark)}

@media(max-width:600px){
  .erpp-blog-article .single-contet .ns-blog .stat-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:380px){
  .erpp-blog-article .single-contet .ns-blog .stat-grid{grid-template-columns:1fr}
}

/* Visual-editorial components (celigo-ora-agent-builder.php, DEC-3xx
   visual-editorial pass). General-purpose, not scoped to one article -
   reuses the same card/border/shadow language as .erpp-cost-model and
   .erpp-gate above rather than inventing a new visual system. */

/* Three-way at-a-glance capability comparison. Sits alongside the
   existing .erpp-compare-table (detailed reference), not instead of it
   - this is the scannable summary, the table is the depth. Icons are
   hand-authored inline SVG in the site's existing outline-icon
   convention (viewBox 24x24, stroke=currentColor, stroke-width=2,
   aria-hidden - matches inc/erpp-case-study-generic-real-components.php's
   established pattern), not a raster image, so it stays crisp at any
   zoom/DPI and needs no separate mobile asset. */
.erpp-blog-article .single-contet .erpp-visual-compare{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.6rem 0}
.erpp-blog-article .single-contet .erpp-visual-compare__card{padding:1.3rem 1.1rem;border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:0 4px 16px rgba(30,27,75,.05);text-align:center}
.erpp-blog-article .single-contet .erpp-visual-compare__icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:.7rem;border-radius:50%;background:var(--primary-subtle);color:var(--primary)}
.erpp-blog-article .single-contet .erpp-visual-compare__icon svg{width:22px;height:22px}
.erpp-blog-article .single-contet .erpp-visual-compare__title{margin:0 0 .35rem;color:var(--heading);font-size:1rem;font-weight:740}
.erpp-blog-article .single-contet .erpp-visual-compare__text{margin:0;color:var(--body);font-size:.88rem;line-height:1.45}
@media(max-width:700px){
  .erpp-blog-article .single-contet .erpp-visual-compare{grid-template-columns:1fr}
}

/* Adoption path timeline - converts the existing 4-phase <ol> into a
   scannable vertical timeline (numbered node + connecting rail), same
   visual grammar as .ns-blog .insight-list's circular number badge
   above, generalised outside that one article's own namespace. */
.erpp-blog-article .single-contet .erpp-path-steps{list-style:none;margin:1.6rem 0;padding:0}
.erpp-blog-article .single-contet .erpp-path-steps li{position:relative;display:flex;gap:1rem;padding:0 0 1.5rem 0;margin:0}
.erpp-blog-article .single-contet .erpp-path-steps li:last-child{padding-bottom:0}
.erpp-blog-article .single-contet .erpp-path-steps li:not(:last-child):before{content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;background:var(--border)}
.erpp-blog-article .single-contet .erpp-path-steps__num{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--heading);color:#a5b4fc;font-weight:800;font-size:.86rem;z-index:1}
.erpp-blog-article .single-contet .erpp-path-steps__body{padding-top:.35rem}
.erpp-blog-article .single-contet .erpp-path-steps__phase{display:block;margin-bottom:.2rem;color:var(--primary);font-size:.72rem;font-weight:780;letter-spacing:.06em;text-transform:uppercase}
.erpp-blog-article .single-contet .erpp-path-steps__text{margin:0;color:var(--body);font-size:.95rem;line-height:1.55}
.erpp-blog-article .single-contet .erpp-path-steps__text strong{color:var(--heading)}

/* "Where should we start" decision cards - same trigger-badge color
   language as .erpp-gate__trigger (green=go/start, amber=pause), reused
   for a readiness decision rather than a go-live gate. */
.erpp-blog-article .single-contet .erpp-decision-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin:1.6rem 0}
.erpp-blog-article .single-contet .erpp-decision-cards__card{padding:1.2rem 1.3rem;border-radius:14px;background:#fff;border:1px solid var(--border);box-shadow:0 4px 16px rgba(30,27,75,.05)}
.erpp-blog-article .single-contet .erpp-decision-cards__badge{display:inline-block;margin-bottom:.6rem;padding:.2rem .65rem;border-radius:999px;font-size:.72rem;font-weight:780;letter-spacing:.04em;text-transform:uppercase}
.erpp-blog-article .single-contet .erpp-decision-cards__badge--start{background:#eefaf3;color:#0f7a45;border:1px solid #bfe8cf}
.erpp-blog-article .single-contet .erpp-decision-cards__badge--pilot{background:var(--primary-subtle);color:var(--primary-dark);border:1px solid var(--border)}
.erpp-blog-article .single-contet .erpp-decision-cards__badge--consider{background:#eef3ff;color:#3538cd;border:1px solid #d1d9ff}
.erpp-blog-article .single-contet .erpp-decision-cards__badge--wait{background:#fff9ec;color:#a16207;border:1px solid #f3ddac}
.erpp-blog-article .single-contet .erpp-decision-cards__text{margin:0;color:var(--body);font-size:.92rem;line-height:1.5}
.erpp-blog-article .single-contet .erpp-decision-cards__text strong{color:var(--heading)}
@media(max-width:700px){
  .erpp-blog-article .single-contet .erpp-decision-cards{grid-template-columns:1fr}
}

/* Click-to-load video facade (assets/js/blog-article.js supplies the
   click handler). No iframe/script/cookie loads until the reader
   explicitly clicks play - privacy-conscious and avoids the ~500-800KB
   of third-party JS a live YouTube embed loads on every pageview
   regardless of whether the reader ever presses play. Fixed aspect-ratio
   box (16/9) reserves the exact space before and after the swap so
   nothing shifts. Thumbnail is self-hosted (DEV media library), not
   hotlinked from i.ytimg.com, consistent with this theme's existing
   image-hosting convention and avoiding one third-party request pre-click. */
.erpp-blog-article .single-contet .erpp-video-embed{margin:1.6rem 0}
.erpp-blog-article .single-contet .erpp-video-embed__frame{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 4px 16px rgba(30,27,75,.08)}
.erpp-blog-article .single-contet .erpp-video-embed__facade{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;cursor:pointer;background:#000}
.erpp-blog-article .single-contet .erpp-video-embed__facade img{width:100%;height:100%;object-fit:cover;display:block;opacity:.88}
.erpp-blog-article .single-contet .erpp-video-embed__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(79,70,229,.92);display:flex;align-items:center;justify-content:center}
.erpp-blog-article .single-contet .erpp-video-embed__play:before{content:"";margin-left:4px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff}
.erpp-blog-article .single-contet .erpp-video-embed__facade:hover .erpp-video-embed__play,
.erpp-blog-article .single-contet .erpp-video-embed__facade:focus-visible .erpp-video-embed__play{background:rgba(67,56,202,.96)}
/* outline-offset is negative (inset), not the usual positive/outward
   offset, because .erpp-video-embed__frame has overflow:hidden (needed
   for its rounded corners) - an outward-drawn outline is silently
   clipped by that ancestor and never paints at all. Verified via a real
   keyboard Tab press at a true 390px viewport: matches(':focus-visible')
   was true and getComputedStyle reported a correct outline, yet nothing
   rendered on screen until this was changed to draw inward instead. */
.erpp-blog-article .single-contet .erpp-video-embed__facade:focus-visible{outline:3px solid var(--primary);outline-offset:-4px}
.erpp-blog-article .single-contet .erpp-video-embed__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.erpp-blog-article .single-contet .erpp-video-embed figcaption{margin-top:.6rem;color:var(--muted);font-size:.8rem;text-align:center}

/* Module directory search/filter — scoped under .erpp-module-directory,
   added for /netsuite-modules/ (DEC-356). Reuses the existing
   .erpp-blog-article design tokens; affects no other page since the
   container only exists where this markup is present. */
.erpp-blog-article .single-contet .erpp-module-directory{margin:1.2rem 0 2rem}
.erpp-blog-article .single-contet .erpp-module-directory__controls{display:flex;flex-wrap:wrap;gap:.9rem;align-items:end;padding:1rem 1.1rem;background:var(--section-alt);border:1px solid var(--border);border-radius:12px}
.erpp-blog-article .single-contet .erpp-module-directory__field{display:flex;flex-direction:column;gap:.3rem;min-width:160px;flex:1 1 180px}
.erpp-blog-article .single-contet .erpp-module-directory__field label{font-size:.74rem;font-weight:680;color:var(--heading)}
.erpp-blog-article .single-contet .erpp-module-directory__field input,
.erpp-blog-article .single-contet .erpp-module-directory__field select{padding:.55rem .7rem;border:1px solid var(--border);border-radius:8px;font-size:.86rem;color:var(--body);background:#fff}
.erpp-blog-article .single-contet .erpp-module-directory__field input:focus-visible,
.erpp-blog-article .single-contet .erpp-module-directory__field select:focus-visible,
.erpp-blog-article .single-contet .erpp-module-directory__reset:focus-visible{outline:3px solid var(--primary);outline-offset:1px}
.erpp-blog-article .single-contet .erpp-module-directory__reset{padding:.55rem 1rem;border:1px solid var(--primary);border-radius:8px;background:#fff;color:var(--primary);font-weight:680;font-size:.84rem;cursor:pointer;white-space:nowrap}
.erpp-blog-article .single-contet .erpp-module-directory__reset:hover{background:var(--primary-subtle)}
.erpp-blog-article .single-contet .erpp-module-directory__count{margin:.8rem 0 0;font-size:.82rem;color:var(--muted)}
.erpp-blog-article .single-contet .erpp-module-directory__empty{margin:.8rem 0 0;padding:.9rem 1rem;border:1px dashed var(--border);border-radius:8px;color:var(--muted);font-size:.86rem}
.erpp-blog-article .single-contet .erpp-module-directory__category[hidden]{display:none}
.erpp-blog-article .single-contet .erpp-module-directory table tr[hidden]{display:none}
@media (max-width:600px){
  .erpp-blog-article .single-contet .erpp-module-directory__controls{flex-direction:column;align-items:stretch}
  .erpp-blog-article .single-contet .erpp-module-directory__field{min-width:0}
}

/* Module classification key + decision map — DEC-356 */
.erpp-blog-article .single-contet .erpp-classification-key{display:flex;flex-wrap:wrap;gap:.7rem;margin:1rem 0 1.6rem;padding:0;list-style:none}
.erpp-blog-article .single-contet .erpp-classification-key li{display:flex;align-items:center;gap:.5rem;padding:.5rem .8rem;border:1px solid var(--border);border-radius:999px;font-size:.82rem;color:var(--body);background:#fff}
.erpp-blog-article .single-contet .erpp-classification-key .erpp-dot{width:.65rem;height:.65rem;border-radius:50%;flex:0 0 auto}
.erpp-blog-article .single-contet .erpp-dot--module{background:#4f46e5}
.erpp-blog-article .single-contet .erpp-dot--suiteapp{background:#0d9488}
.erpp-blog-article .single-contet .erpp-dot--thirdparty{background:#b45309}
.erpp-blog-article .single-contet .erpp-dot--core{background:#64748b}
.erpp-blog-article .single-contet .erpp-decision-map{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem;margin:1.2rem 0 1.8rem}
.erpp-blog-article .single-contet .erpp-decision-map__card{padding:1rem 1.1rem;border:1px solid var(--border);border-radius:12px;background:var(--section-alt)}
.erpp-blog-article .single-contet .erpp-decision-map__card h4{margin:0 0 .4rem;font-size:.92rem;color:var(--heading);font-weight:700}
/* h3 variant (2026-09-24, /netsuite-vs-sap/ premium pass) - added alongside
   the existing h4 rule above, not replacing it, so /netsuite-modules/'s
   existing h4 usage is unaffected. Needed where a decision-map card sits
   directly under its section's own h2 with no intervening h3, so h4 would
   skip a heading level. */
.erpp-blog-article .single-contet .erpp-decision-map__card h3{margin:0 0 .4rem;font-size:.92rem;color:var(--heading);font-weight:700}
.erpp-blog-article .single-contet .erpp-decision-map__card p{margin:0 0 .5rem;font-size:.82rem;color:var(--muted)}
.erpp-blog-article .single-contet .erpp-decision-map__card ul{margin:0;padding-left:1.1rem;font-size:.84rem;color:var(--body)}
.erpp-blog-article .single-contet .erpp-decision-map__card ul li{margin:.15rem 0}
.erpp-blog-article .single-contet .erpp-decision-map__card a{color:var(--primary);text-decoration:none;font-weight:600}
.erpp-blog-article .single-contet .erpp-decision-map__card a:hover{text-decoration:underline}

/* .erpp-decision-map--quad (2026-09-25, netsuite-customization-options
   article) - an opt-in modifier, applied only via an extra class in this
   article's own post_content, never touching the shared .erpp-decision-map
   base rule above (repeat(auto-fit,minmax(220px,1fr))), which the live
   NetSuite vs SAP article's 3-card "Product identity cards" section also
   depends on and must keep its existing auto-fit behavior. This modifier
   is for a card group that is always exactly 4 items and needs a balanced
   2x2 layout instead of the 3-then-1 orphaned row auto-fit produces at
   typical article widths. Scoped to .erpp-decision-map--quad only, so no
   other .erpp-decision-map usage anywhere on the site is affected. */
.erpp-blog-article .single-contet .erpp-decision-map.erpp-decision-map--quad{grid-template-columns:repeat(2,1fr)}
@media (max-width:600px){
  .erpp-blog-article .single-contet .erpp-decision-map.erpp-decision-map--quad{grid-template-columns:1fr}
}

/* .erpp-decision-flow (2026-09-25, netsuite-customization-options article) -
   this class name was already used as content markup on the live
   NetSuite vs SAP article's "Your Decision Path" section, but had no
   matching CSS on DEV or production (grep-verified against both live
   files before this change), so it rendered as plain unstyled <ol>/<p>
   tags. Adding the rule here benefits that existing live section
   identically to this new article's own decision-flow section - purely
   additive, scoped under the same .erpp-blog-article .single-contet
   ancestor and reusing the same design tokens as every other component
   in this file, so no other selector or page is affected. */
.erpp-blog-article .single-contet .erpp-decision-flow__steps{list-style:none;margin:0 0 1.6rem;padding:0;display:flex;flex-direction:column;gap:.9rem;counter-reset:erpp-df}
.erpp-blog-article .single-contet .erpp-decision-flow__steps>li{counter-increment:erpp-df;position:relative;padding:1rem 1.2rem 1rem 3rem;border:1px solid var(--border);border-radius:12px;background:var(--section-alt)}
.erpp-blog-article .single-contet .erpp-decision-flow__steps>li::before{content:counter(erpp-df);position:absolute;left:1rem;top:1rem;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--primary);color:#fff;font-size:.8rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.erpp-blog-article .single-contet .erpp-decision-flow__question{margin:0 0 .5rem;font-weight:700;color:var(--heading)}
.erpp-blog-article .single-contet .erpp-decision-flow__branch{margin:.25rem 0 0;font-size:.92rem;color:var(--body)}

/* Downloadable dataset callout — DEC-356 */
.erpp-blog-article .single-contet .erpp-dataset-download{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin:1.1rem 0 1.6rem;padding:1rem 1.1rem;border:1px solid var(--border);border-radius:12px;background:#fff}
.erpp-blog-article .single-contet .erpp-dataset-download__text{flex:1 1 260px;font-size:.86rem;color:var(--body)}
.erpp-blog-article .single-contet .erpp-dataset-download__text strong{color:var(--heading)}
/* Contrast fix (DEC-357): the same known sitewide `.erpp-rcs__body
   a{color:var(--color-primary-dark)!important; text-decoration:
   underline!important}` rule (design-system.css) documented above for
   .erpp-cta-prominent (DEC-121) was overriding this button's intended
   white text too, rendering ~1.58:1 contrast (indigo-on-indigo,
   effectively unreadable, exactly as the owner reported) instead of the
   white-on-#4f46e5 ~6.3:1 the CSS below was written to produce.
   !important required on color and text-decoration to win, matching
   the established pattern; :focus-visible adds a visible ring. */
.erpp-blog-article .single-contet .erpp-dataset-download__link{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.1rem;border-radius:8px;background:var(--primary);color:#fff!important;font-weight:680;font-size:.86rem;text-decoration:none!important;white-space:nowrap}
.erpp-blog-article .single-contet .erpp-dataset-download__link:hover{background:var(--primary-dark);color:#fff!important}
.erpp-blog-article .single-contet .erpp-dataset-download__link:focus-visible{outline:3px solid var(--primary-dark);outline-offset:2px}

/* Long-URL wrap safety net for the article body — prevents an unbroken
   URL string (e.g. a citation link) from causing page-level horizontal
   overflow at narrow widths (DEC-356 fix, found during validation). */
.erpp-blog-article .single-contet a{overflow-wrap:anywhere;word-break:break-word}

/* Vendor logo boxes (DEC-363, iPaaS comparison visual pass) — a fixed
   bounding box lets five differently-shaped official logo files (and
   one text placeholder where no official asset could be sourced) sit
   at a consistent visual size without recoloring or distorting any
   of them. */
.erpp-blog-article .single-contet .erpp-platform-logo{display:inline-flex;align-items:center;justify-content:center;height:28px;max-width:120px;flex:0 1 auto;min-width:0}
.erpp-blog-article .single-contet .erpp-platform-logo img,
.erpp-blog-article .single-contet .erpp-platform-logo svg{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;display:block}
/* DEC-366 fix: inside a narrow flex/table cell, flex:0 1 auto alone still
   won't shrink an <img> below its intrinsic width, since width:auto keeps
   the image at native size until the box has nowhere left to shrink from -
   at that point .erpp-compare-table's overflow:hidden (DEC-365) clipped the
   wordmark instead of scaling it (Celigo/Boomi/Workato/Zapier all rendered
   truncated inside the At-a-Glance table). Constraining the image itself to
   the shrunk container's actual width lets it scale down proportionally. */
.erpp-blog-article .single-contet .erpp-compare-table .erpp-platform-logo img,
.erpp-blog-article .single-contet .erpp-compare-table .erpp-platform-logo svg{width:100%;height:auto;max-width:100%}
.erpp-blog-article .single-contet .erpp-platform-logo--placeholder{padding:0 .6rem;border:1px solid var(--border);border-radius:6px;background:var(--section-alt);font-weight:700;font-size:.78rem;letter-spacing:.01em;color:var(--heading)}
.erpp-blog-article .single-contet .erpp-platform-card__head,
.erpp-blog-article .single-contet .erpp-profile-head,
.erpp-blog-article .single-contet .erpp-zapier-callout__head{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.erpp-blog-article .single-contet .erpp-platform-card__head h4{margin:0}
.erpp-blog-article .single-contet .erpp-profile-head h2{margin:0}
.erpp-blog-article .single-contet .erpp-zapier-callout__head{margin-bottom:.3rem}
.erpp-blog-article .single-contet .erpp-compare-table .erpp-platform-cell{display:flex;align-items:center;gap:.5rem;white-space:nowrap}

/* Platform-positioning spectrum (DEC-363) — a horizontal qualitative
   track, not a scored chart. Marker order/spacing communicates
   left-to-right sequence only; no numeric value is implied. The
   original ordered list stays directly below as the accessible text
   equivalent and as a fallback if flex/gap is unsupported. */
.erpp-blog-article .single-contet .erpp-spectrum{margin:1.2rem 0 .8rem;padding:1.3rem 1rem .9rem;border:1px solid var(--border);border-radius:12px;background:var(--section-alt)}
.erpp-blog-article .single-contet .erpp-spectrum__track{position:relative;height:3px;background:linear-gradient(90deg,#0d9488,#4f46e5);border-radius:999px;margin:0 6px}
.erpp-blog-article .single-contet .erpp-spectrum__markers{display:flex;justify-content:space-between;margin-top:-.55rem}
.erpp-blog-article .single-contet .erpp-spectrum__marker{display:flex;flex-direction:column;align-items:center;gap:.4rem;flex:1 1 0;min-width:0}
.erpp-blog-article .single-contet .erpp-spectrum__marker::before{content:"";width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid var(--primary)}
.erpp-blog-article .single-contet .erpp-spectrum__marker span{font-size:.76rem;font-weight:600;color:var(--body);text-align:center}
.erpp-blog-article .single-contet .erpp-spectrum__ends{display:flex;justify-content:space-between;margin-top:.7rem;font-size:.74rem;color:var(--muted);font-style:italic}
@media (max-width:600px){
.erpp-blog-article .single-contet .erpp-spectrum__markers{flex-wrap:wrap;row-gap:1rem}
.erpp-blog-article .single-contet .erpp-spectrum__marker{flex:1 1 33%}
}

/* Vendor-identity duplication fix (DEC-364, iPaaS logo presentation
   correction) — one visible identity per location: a wordmark image
   already contains the name, so it is shown alone (name kept for
   screen readers via .erpp-vendor-sr or the image's alt text); an
   icon-only mark (Boomi) keeps its adjacent visible name; MuleSoft
   has no lawful static logo asset, so its text placeholder is the
   sole visible identity with no separate box in profile headings. */
.erpp-blog-article .single-contet .erpp-vendor-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.erpp-blog-article .single-contet .erpp-profile-head .erpp-platform-logo{height:20px;max-width:96px;opacity:.82;padding-right:.65rem;border-right:1px solid var(--border)}

/* At-a-glance table platform-column overflow fix (DEC-365, iPaaS opening
   and table correction pass) - root cause: .erpp-platform-logo is
   flex:0 0 auto (never shrinks) inside .erpp-platform-cell's own flex row,
   and the base .erpp-compare-table (no --celigo/--buyerfit/--iadf modifier)
   has no table-layout:fixed, so the sitewide legacy `table{table-layout:
   auto!important}` rule (see DEC-120 note above) still wins here too. Auto
   layout could size the Platform column narrower than the non-shrinking
   logo box demanded, and with no overflow clip the box visually spilled
   into the Buyer type column while the last (Pricing transparency) column
   got squeezed. min-width:0+overflow:hidden are a hard clip as defense in
   depth; the new --overview modifier below is the real fix, following the
   same fixed-width pattern already proven for --celigo/--buyerfit/--iadf. */
.erpp-blog-article .single-contet .erpp-platform-logo{min-width:0;overflow:hidden}
.erpp-blog-article .single-contet .erpp-compare-table .erpp-platform-cell{min-width:0;overflow:hidden}
.erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--overview{min-width:760px}
@media(min-width:1051px){
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--overview{table-layout:fixed!important}
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--overview th:nth-child(1),
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--overview td:nth-child(1){width:11%}
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--overview th:nth-child(2),
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--overview td:nth-child(2){width:16%}
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--overview th:nth-child(3),
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--overview td:nth-child(3){width:11%}
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--overview th:nth-child(4),
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--overview td:nth-child(4){width:14%}
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--overview th:nth-child(5),
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--overview td:nth-child(5){width:15%}
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--overview th:nth-child(6),
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--overview td:nth-child(6){width:17%}
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--overview th:nth-child(7),
  .erpp-blog-article .single-contet .erpp-table-scroll .erpp-compare-table--overview td:nth-child(7){width:16%}
}

/* ============================================================
   Best WMS for NetSuite (post 7263) — page-specific styles.
   Migrated from the `page_head_analytics_code` postmeta field
   (wrong location — caused link/heading/CTA cascade conflicts
   with this file's own .erpp-rcs__body/.single-contet rules) into
   this shared stylesheet, scoped under the post's own .ep-wms-blog
   wrapper so it can never leak onto unrelated content. Tokens moved
   from a global :root block to .ep-wms-blog custom properties for
   the same reason. .ep-btn-primary's color/background/border-radius
   are intentionally omitted below — the existing DEC-121 override
   two rules above (`.erpp-blog-article .erpp-rcs__body .ep-btn-primary`)
   already forces those with !important, so redeclaring them here would
   be dead code. Visual values otherwise carried over unchanged. */
.ep-wms-blog {
  --ep-navy:       #0a1628;
  --ep-dark:       #111827;
  --ep-blue:       #1e3a5f;
  --ep-accent:     #3859D0;
  --ep-accent-lt:  #ff6b35;
  --ep-white:      #ffffff;
  --ep-off-white:  #f8f9fc;
  --ep-gray-100:   #f1f4f9;
  --ep-gray-200:   #e2e8f0;
  --ep-gray-400:   #94a3b8;
  --ep-gray-600:   #475569;
  --ep-gray-800:   #1e293b;
  --ep-text:       #1e293b;
  --ep-text-light: #64748b;
  --ep-border:     #dde3ed;
  --ep-green:      #16a34a;
  --ep-radius:     10px;
  --ep-radius-lg:  16px;
  --ep-shadow:     0 2px 12px rgba(10,22,40,0.08);
  --ep-shadow-md:  0 4px 24px rgba(10,22,40,0.12);
  --ep-shadow-lg:  0 8px 48px rgba(10,22,40,0.16);
  --ep-font-body:  'Georgia', 'Times New Roman', serif;
  --ep-font-ui:    -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ep-font-mono:  'Courier New', monospace;

  font-family: var(--ep-font-body);
  color: var(--ep-text);
  line-height: 1.8;
  font-size: 17px;
  max-width: 100%;
}

.ep-wms-blog .ep-stats-banner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--ep-border);
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius-lg);
  overflow: hidden;
  margin: 32px 0 40px;
  box-shadow: var(--ep-shadow);
}
.ep-wms-blog .ep-stat-item {
  background: var(--ep-white);
  padding: 20px 16px;
  text-align: center;
}
.ep-wms-blog .ep-stat-item .stat-number {
  display: block;
  font-family: var(--ep-font-ui);
  font-size: 28px;
  font-weight: 800;
  color: var(--ep-accent);
  line-height: 1;
  margin-bottom: 6px;
}
.ep-wms-blog .ep-stat-item .stat-label {
  font-family: var(--ep-font-ui);
  font-size: 12px;
  color: var(--ep-text-light);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ep-wms-blog .ep-quick-pick {
  background: var(--ep-off-white);
  border: 1px solid var(--ep-border);
  border-left: 4px solid var(--ep-accent);
  border-radius: var(--ep-radius);
  padding: 24px 28px;
  margin: 32px 0;
  font-family: var(--ep-font-ui);
}
.ep-wms-blog .ep-quick-pick h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ep-accent);
  margin: 0 0 14px;
}
.ep-wms-blog .ep-quick-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.ep-wms-blog .ep-qp-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--ep-white);
  border: 1px solid var(--ep-border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
}
.ep-wms-blog .ep-qp-item .qp-label {
  color: var(--ep-text-light);
  font-size: 12px;
  font-weight: 600;
}
.ep-wms-blog .ep-qp-item .qp-value {
  color: var(--ep-navy);
  font-weight: 700;
  font-size: 13px;
}

.ep-wms-blog .ep-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 52px 0 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ep-border);
}
.ep-wms-blog .ep-section-num {
  font-family: var(--ep-font-ui);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ep-accent);
  background: rgba(56,89,208,0.08);
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
}
.ep-wms-blog .ep-section-header h2 {
  font-family: var(--ep-font-ui);
  font-size: 26px;
  font-weight: 800;
  color: var(--ep-navy);
  margin: 0;
  line-height: 1.2;
}

.ep-wms-blog .ep-wms-card {
  background: var(--ep-white);
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius-lg);
  margin: 36px 0;
  overflow: hidden;
  box-shadow: var(--ep-shadow);
  transition: box-shadow 0.2s ease;
}
.ep-wms-blog .ep-wms-card:hover {
  box-shadow: var(--ep-shadow-md);
}
.ep-wms-blog .ep-wms-card-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 32px 24px;
  border-bottom: 1px solid var(--ep-border);
  background: var(--ep-off-white);
}
.ep-wms-blog .ep-card-num {
  font-family: var(--ep-font-ui);
  font-size: 42px;
  font-weight: 900;
  color: var(--ep-gray-200);
  line-height: 1;
  flex-shrink: 0;
}
.ep-wms-blog .ep-card-title-wrap h3 {
  font-family: var(--ep-font-ui);
  font-size: 21px;
  font-weight: 800;
  color: var(--ep-navy);
  margin: 0 0 6px;
}
.ep-wms-blog .ep-card-badge {
  font-family: var(--ep-font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--ep-text-light);
  background: var(--ep-white);
  border: 1px solid var(--ep-border);
  border-radius: 20px;
  padding: 3px 10px;
  display: inline-block;
}
.ep-wms-blog .ep-card-badge.native {
  background: rgba(22,163,74,0.08);
  border-color: rgba(22,163,74,0.25);
  color: var(--ep-green);
}

.ep-wms-blog .ep-wms-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 32px;
  border-bottom: 1px solid var(--ep-gray-100);
  background: var(--ep-white);
}
.ep-wms-blog .ep-meta-tag {
  font-family: var(--ep-font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--ep-navy);
  background: var(--ep-gray-100);
  padding: 4px 12px;
  border-radius: 20px;
}

.ep-wms-blog .ep-wms-card-body {
  padding: 28px 32px;
}
.ep-wms-blog .ep-wms-card-body p {
  margin: 0 0 18px;
  color: var(--ep-text);
}

.ep-wms-blog .ep-scores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 32px;
  margin: 24px 0;
}
.ep-wms-blog .ep-score-label {
  font-family: var(--ep-font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--ep-gray-600);
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.ep-wms-blog .ep-score-label span:last-child {
  color: var(--ep-navy);
  font-weight: 700;
}
.ep-wms-blog .ep-score-track {
  height: 7px;
  background: var(--ep-gray-200);
  border-radius: 4px;
  overflow: hidden;
}
.ep-wms-blog .ep-score-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--ep-blue), var(--ep-accent));
}

.ep-wms-blog .ep-pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 24px 0;
}
@media (max-width: 600px) {
  .ep-wms-blog .ep-pros-cons { grid-template-columns: 1fr; }
  .ep-wms-blog .ep-scores { grid-template-columns: 1fr; }
  .ep-wms-blog .ep-stats-banner { grid-template-columns: 1fr 1fr; }
  .ep-wms-blog .ep-wms-card-header { flex-direction: column; gap: 10px; }
  .ep-wms-blog .ep-wms-card-body, .ep-wms-blog .ep-wms-card-header { padding: 20px; }
  .ep-wms-blog .ep-wms-card-meta { padding: 12px 20px; }
  .ep-wms-blog .ep-pricing-grid { grid-template-columns: 1fr 1fr; }
  .ep-wms-blog .ep-feature-list { grid-template-columns: 1fr; }
}
.ep-wms-blog .ep-pros, .ep-wms-blog .ep-cons {
  padding: 18px 20px;
  border-radius: var(--ep-radius);
}
.ep-wms-blog .ep-pros {
  background: rgba(22,163,74,0.05);
  border: 1px solid rgba(22,163,74,0.2);
}
.ep-wms-blog .ep-cons {
  background: rgba(239,68,68,0.04);
  border: 1px solid rgba(239,68,68,0.15);
}
.ep-wms-blog .ep-pros h5, .ep-wms-blog .ep-cons h5 {
  font-family: var(--ep-font-ui);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
}
.ep-wms-blog .ep-pros h5 { color: var(--ep-green); }
.ep-wms-blog .ep-cons h5 { color: #dc2626; }
.ep-wms-blog .ep-pros ul, .ep-wms-blog .ep-cons ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ep-wms-blog .ep-pros ul li, .ep-wms-blog .ep-cons ul li {
  font-family: var(--ep-font-ui);
  font-size: 13.5px;
  color: var(--ep-gray-800);
  padding: 4px 0 4px 20px;
  position: relative;
  line-height: 1.5;
}
.ep-wms-blog .ep-pros ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--ep-green);
  font-weight: 700;
}
.ep-wms-blog .ep-cons ul li::before {
  content: "✗";
  position: absolute;
  left: 0;
  color: #dc2626;
  font-weight: 700;
}

.ep-wms-blog .ep-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ep-border);
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius);
  overflow: hidden;
  margin-top: 20px;
  font-family: var(--ep-font-ui);
}
.ep-wms-blog .ep-price-cell {
  background: var(--ep-off-white);
  padding: 14px 12px;
  text-align: center;
}
.ep-wms-blog .ep-price-cell .price-label {
  font-size: 11px;
  color: var(--ep-text-light);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.ep-wms-blog .ep-price-cell .price-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--ep-navy);
}

.ep-wms-blog .ep-feature-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ep-wms-blog .ep-feature-list li {
  font-family: var(--ep-font-ui);
  font-size: 14px;
  color: var(--ep-text);
  padding: 8px 12px 8px 34px;
  background: var(--ep-off-white);
  border: 1px solid var(--ep-border);
  border-radius: 8px;
  position: relative;
  line-height: 1.45;
}
.ep-wms-blog .ep-feature-list li::before {
  content: "✓";
  position: absolute;
  left: 12px;
  top: 8px;
  color: var(--ep-green);
  font-weight: 700;
  font-size: 13px;
}
.ep-wms-blog .ep-feature-list li strong {
  display: block;
  color: var(--ep-navy);
  font-weight: 700;
  margin-bottom: 2px;
}

.ep-wms-blog .ep-comparison-wrap {
  overflow-x: auto;
  margin: 32px 0;
  border-radius: var(--ep-radius-lg);
  box-shadow: var(--ep-shadow);
  border: 1px solid var(--ep-border);
}
.ep-wms-blog .ep-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ep-font-ui);
  font-size: 14px;
  min-width: 700px;
}
.ep-wms-blog .ep-comparison-table thead th {
  background: var(--ep-navy);
  color: var(--ep-white);
  padding: 14px 16px;
  text-align: left;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
.ep-wms-blog .ep-comparison-table tbody tr:nth-child(even) {
  background: var(--ep-off-white);
}
.ep-wms-blog .ep-comparison-table tbody tr:nth-child(odd) {
  background: var(--ep-white);
}
.ep-wms-blog .ep-comparison-table tbody tr:hover {
  background: rgba(30,58,95,0.04);
}
.ep-wms-blog .ep-comparison-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--ep-gray-100);
  color: var(--ep-gray-800);
  vertical-align: middle;
}
.ep-wms-blog .ep-comparison-table td:first-child {
  font-weight: 700;
  color: var(--ep-navy);
}
.ep-wms-blog .ep-native-badge {
  background: rgba(22,163,74,0.1);
  color: var(--ep-green);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 6px;
  white-space: nowrap;
}

.ep-wms-blog .ep-decision-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 28px 0;
}
.ep-wms-blog .ep-decision-card {
  background: var(--ep-white);
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius);
  padding: 20px;
  font-family: var(--ep-font-ui);
}
.ep-wms-blog .ep-decision-card h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ep-navy);
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ep-border);
}
.ep-wms-blog .ep-decision-card .dc-condition {
  font-size: 13px;
  color: var(--ep-text-light);
  margin-bottom: 6px;
  font-style: italic;
}
.ep-wms-blog .ep-decision-card .dc-answer {
  font-size: 14px;
  font-weight: 700;
  color: var(--ep-accent);
}

.ep-wms-blog .ep-cta-block {
  background: linear-gradient(135deg, #112954 0%, #3859D0 100%);
  border-radius: var(--ep-radius-lg);
  padding: 32px 40px;
  text-align: center;
  margin: 40px 0;
  color: var(--ep-white);
}
.ep-wms-blog .ep-cta-block h3 {
  font-family: var(--ep-font-ui);
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--ep-white);
}
.ep-wms-blog .ep-cta-block p {
  font-size: 16px;
  color: rgba(255,255,255,0.9);
  margin: 0 0 24px;
}
.ep-wms-blog .ep-cta-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.ep-wms-blog .ep-btn-primary {
  display: inline-block;
  font-family: var(--ep-font-ui);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 28px;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
}
/* Off-white/navy treatment required for the WMS CTA card button — the
   sitewide DEC-121 override (`.erpp-blog-article .erpp-rcs__body
   .ep-btn-primary`, ~line 506) forces brand-indigo/white on this class
   everywhere else; this rule intentionally out-specifies it (4 classes
   vs. 3) for this one card only, since this button needs a genuinely
   different palette, not a bugfix for the same problem DEC-121 solves. */
.ep-wms-blog .ep-cta-block .ep-cta-buttons .ep-btn-primary {
  background: #F9FAFF !important;
  color: #112954 !important;
  border: none !important;
}
.ep-wms-blog .ep-btn-primary:hover {
  transform: translateY(-1px);
  text-decoration: none;
}
.ep-wms-blog .ep-cta-block .ep-cta-buttons .ep-btn-primary:hover {
  background: #1D2E38 !important;
  color: #ffffff !important;
}
.ep-wms-blog .ep-btn-secondary {
  display: inline-block;
  background: rgba(255,255,255,0.1);
  color: var(--ep-white);
  font-family: var(--ep-font-ui);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 28px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.25);
  transition: background 0.2s ease;
}
.ep-wms-blog .ep-btn-secondary:hover {
  background: rgba(255,255,255,0.18);
  color: var(--ep-white);
  text-decoration: none;
}

.ep-wms-blog .ep-callout {
  border-left: 4px solid var(--ep-accent);
  background: rgba(232,84,30,0.05);
  border-radius: 0 var(--ep-radius) var(--ep-radius) 0;
  padding: 18px 22px;
  margin: 28px 0;
  font-family: var(--ep-font-ui);
  font-size: 15px;
  color: var(--ep-gray-800);
}
.ep-wms-blog .ep-callout strong {
  color: var(--ep-navy);
}
.ep-wms-blog .ep-callout-blue {
  border-left-color: var(--ep-blue);
  background: rgba(30,58,95,0.05);
}

.ep-wms-blog .ep-lead {
  font-size: 19px;
  line-height: 1.75;
  color: var(--ep-gray-600);
  font-family: var(--ep-font-body);
  margin-bottom: 32px;
}

.ep-wms-blog a {
  color: var(--ep-accent);
  text-decoration: none;
}

.ep-wms-blog h2 {
  font-family: var(--ep-font-ui);
  font-size: 26px;
  font-weight: 800;
  color: var(--ep-navy);
  margin: 48px 0 18px;
  line-height: 1.25;
}
.ep-wms-blog h3 {
  font-family: var(--ep-font-ui);
  font-size: 20px;
  font-weight: 700;
  color: var(--ep-navy);
  margin: 36px 0 14px;
}

.ep-wms-blog .ep-expert-quote {
  background: var(--ep-off-white);
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius);
  padding: 24px 28px;
  margin: 32px 0;
  position: relative;
  font-style: italic;
  font-size: 17px;
  color: var(--ep-gray-800);
}
.ep-wms-blog .ep-expert-quote::before {
  content: '\201C';
  font-size: 64px;
  color: var(--ep-accent);
  opacity: 0.3;
  position: absolute;
  top: -8px;
  left: 16px;
  line-height: 1;
  font-family: Georgia, serif;
}
.ep-wms-blog .ep-expert-quote p {
  margin: 0;
  padding-left: 12px;
}