/* Shared `nti-` component classes (callout, metric grid, card grid, CTA, TOC, share) -
   generic by design so they can be reused in any theme-post-content widget, not just success-story. */

.elementor-widget.elementor-widget-theme-post-content h2 { font-family: Manrope, sans-serif; font-size: 20px; font-weight: 800; line-height: 1.28; color: var(--e-global-color-primary, #0F366F); margin: 40px 0 18px; }
.elementor-widget.elementor-widget-theme-post-content h2:first-child { margin-top: 0; }
.elementor-widget.elementor-widget-theme-post-content p { font-size: 17px; font-weight: 500; line-height: 1.5; margin-bottom: 18px; color: var(--e-global-color-0610876, #323434); }
/* QA v24: base.css sets p { margin-block-end: 0 !important }, which collapsed the article paragraphs. Callout p is reset to 0 right below. */
.elementor-widget.elementor-widget-theme-post-content p { margin-block-end: 18px !important; }
.elementor-widget.elementor-widget-theme-post-content .nti-article-callout p { margin-block-end: 0 !important; }
.elementor-widget-theme-post-content ul { margin: 0 0 16px 20px; }
.elementor-widget-theme-post-content table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; }
.elementor-widget-theme-post-content table th, .elementor-widget-theme-post-content table td { border: 1px solid var(--e-global-color-e35510b, #EDF1F3); padding: 10px 14px; text-align: left; font-size: 15px; }
.elementor-widget-theme-post-content table th { background: var(--e-global-color-e35510b, #EDF1F3); font-weight: 700; }

.nti-article-callout { background: var(--e-global-color-primary, #0F366F); color: #fff; padding: 24px 28px; border-radius: 12px; margin: 24px 0; }
.nti-article-callout strong { display: block; font-size: 17px; font-weight: 800; line-height: 1.28; margin-bottom: 8px; }
.nti-article-callout p { color: #fff !important; margin: 0 !important; }

.nti-metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 24px 0; }
/* QA v24: grey gradient tile (Light Grey -> Mid Grey) + gradient number, as the PGM design.
   background-clip: text only paints inside the box, so line-height 1 cut off descenders (p, g, y): give them room. */
.nti-metric-tile { background: linear-gradient(180deg, var(--e-global-color-e35510b, #EDF1F3) 0%, var(--e-global-color-924c42b, #C1CDD7) 100%); border-radius: 12px; padding: 32px 24px; text-align: center; }
.nti-metric-tile .nti-metric-num { display: block; font-size: 48px; font-weight: 800; color: var(--e-global-color-primary, #0F366F); margin-bottom: 12px; line-height: 1.15; padding-bottom: 0.06em; background-image: linear-gradient(190deg, #37C0EB 0%, #0F366F 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nti-metric-tile .nti-metric-label { font-size: 14px; font-weight: 600; color: var(--e-global-color-0610876, #323434); }
@media (max-width: 600px) { .nti-metric-grid { grid-template-columns: 1fr; } }
/* Text tiles: a phrase instead of a number ("ESG compliant", "Fewer interventions") is far too big at 48px.
   The content marks those spans nti-metric-num--text (any tile value without a digit). */
.nti-metric-tile .nti-metric-num.nti-metric-num--text { font-size: 32px; line-height: 1.2; margin-bottom: 12px; }
/* Article sub-headings (docx cards / blocks under an h2): one step below the 20px/800 h2 */
.elementor-widget.elementor-widget-theme-post-content h3 { font-family: Manrope, sans-serif; font-size: 17px; font-weight: 800; line-height: 1.35; color: var(--e-global-color-primary, #0F366F); margin: 24px 0 8px; }
/* Wide comparison tables scroll sideways on phones instead of overflowing the page */
@media (max-width: 767px) { .elementor-widget-theme-post-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .elementor-widget-theme-post-content table th, .elementor-widget-theme-post-content table td { min-width: 120px; } }

.nti-article-share { display: flex; gap: 12px; align-items: center; margin: 32px 0 0; padding-top: 24px; border-top: 1px solid var(--e-global-color-e35510b, #EDF1F3); }
.nti-article-share span { font-size: 14px; font-weight: 600; color: var(--e-global-color-0610876, #323434); margin-right: 4px; }
/* QA v24: designer icons - each SVG is the whole round logo, so the link is just a 34px hit area */
.nti-article-share { gap: 8px; }
.nti-article-share a { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--e-global-color-primary, #0F366F) !important; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; text-decoration: none; transition: color .2s, transform .2s; }
.nti-article-share a svg { width: 32px; height: 32px; display: block; }
.nti-article-share a:hover { color: var(--e-global-color-accent, #37C0EB) !important; transform: translateY(-1px); }

.nti-explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 24px 0 32px; }
.nti-explore-card { border: 1px solid var(--e-global-color-e35510b, #EDF1F3); border-radius: 12px; padding: 20px; }
.nti-explore-card h4 { margin: 0 0 8px; font-size: 20px; font-weight: 800; line-height: 1.28; color: var(--e-global-color-primary, #0F366F); }
.nti-explore-card p { font-size: 17px; margin-bottom: 12px !important; }
.nti-explore-card a.nti-explore-link { color: var(--e-global-color-accent, #37C3EB); font-weight: 700; font-size: 14px; }
@media (max-width: 900px) { .nti-explore-grid { grid-template-columns: 1fr; } }

.nti-article-cta { background: var(--e-global-color-primary, #0F366F); color: #fff; border-radius: 12px; padding: 40px 32px; text-align: center; margin: 32px 0 0; }
.elementor-widget .nti-article-cta h3 { color: #fff; margin: 0 0 12px; font-size: 32px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.nti-article-cta p { color: rgba(255,255,255,0.85) !important; max-width: 560px; margin: 0 auto 20px !important; }
.nti-article-cta a.nti-article-cta-btn { display: inline-block; background: #fff; color: var(--e-global-color-primary, #0F366F) !important; padding: 14px 32px; border-radius: 100px; font-weight: 600; text-decoration: none; }

/* TOC - matches design ref .pgm-sidebar nav: flex column, 2px gap, 12px 0 padding; links 17px/500, Dark Gray, no dividers */
.nti-article-toc { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; }
.elementor-widget .nti-article-toc a { display: block; font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--e-global-color-0610876, #323434); padding: 12px 0; border-radius: 0; text-decoration: none; }
.elementor-widget .nti-article-toc a:hover, .elementor-widget .nti-article-toc a.active { color: var(--e-global-color-accent, #37C0EB); }

/* TOC heading + sidebar card reset - keyed on the widget class nti-toc-title (set in template 10174), not Elementor's
   regenerating element ids. The :has() rule strips the container's own grey card without needing a container class
   (container _css_classes does not render on this Elementor version). */
.e-con:has(> .nti-toc-title) { background: none !important; padding: 0 !important; border-radius: 0 !important; gap: 0 !important; }
.elementor-widget.nti-toc-title { margin: 0; padding: 0 0 18px; border-bottom: 1px solid #DDE2E8; }
.elementor-widget.nti-toc-title .elementor-heading-title { font-size: 17px; font-weight: 800; line-height: 1.35; letter-spacing: -0.01em; color: #121416; }

/* QA v24: sticky "In this article" sidebar. base.css sets overflow-x: hidden !important on html/body,
   which makes body the scroll container so position: sticky never engages. clip still stops
   horizontal scrolling but is not a scroll container. This file only loads on success-story singles. */
html, body.single-success-story { overflow-x: clip !important; }

/* In-article images (e.g. the printer unit diagrams in story 50): white-background artwork, so a hairline border and the house 12px radius */
.elementor-widget-theme-post-content .nti-article-figure { margin: 8px 0 32px; }
.elementor-widget-theme-post-content .nti-article-figure img { display: block; width: 100%; max-width: 800px; height: auto; border: 1px solid #DDE2E8; border-radius: 12px; }


/* Unit tabs (story 50 "Deep Dive Into Printer Components"): the site's pill tabs. The capsule border comes from base.css
   (.nti-subpage-tab.main-tabs > .e-n-tabs > .e-n-tabs-heading) and the ≤1024px dropdown from common.js tabsToDropdown.
   Here: button look of the 28/29 pill tabs (Elementor draws those per widget), left-aligned capsule, and the panel. */
.nti-unit-tabs.nti-subpage-tab.main-tabs > .e-n-tabs > .e-n-tabs-heading { display: flex; margin: 8px 0 24px; }
.elementor-widget-theme-post-content .nti-unit-tabs .e-n-tab-title { display: flex; align-items: center; padding: 12px 24px; border: 0; border-radius: 100px; background: transparent; color: var(--e-global-color-primary, #0F366F); font-family: Manrope, sans-serif; font-size: 16px; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; }
.elementor-widget-theme-post-content .nti-unit-tabs .e-n-tab-title:hover,
.elementor-widget-theme-post-content .nti-unit-tabs .e-n-tab-title[aria-selected="true"] { background: linear-gradient(225deg, #37C0EB 0%, #0F366F 100%); color: #fff; }
.elementor-widget-theme-post-content .nti-unit-tabs .e-n-tab-title:focus-visible { outline: 2px solid var(--e-global-color-accent, #37C0EB); outline-offset: 2px; }
.nti-unit-tabs .e-n-tabs-content > .nti-unit { display: none; }
.nti-unit-tabs .e-n-tabs-content > .nti-unit.is-active { display: block; }
/* image + caption read as one card, as in the client mock-up: hairline frame, image on white, caption on grey */
.nti-unit-tabs .nti-unit { max-width: 800px; border: 1px solid #DDE2E8; border-radius: 12px; overflow: hidden; background: #fff; }
.elementor-widget-theme-post-content .nti-unit-tabs .nti-article-figure img { max-width: none; border: 0; border-radius: 0; }
.nti-unit-tabs .nti-unit-caption { background: #F6F7F8; border-top: 1px solid #DDE2E8; padding: 24px 26px; }
.elementor-widget.elementor-widget-theme-post-content .nti-unit-tabs .nti-unit h3 { margin: 0 0 12px; font-size: 20px; line-height: 1.28; }
.elementor-widget.elementor-widget-theme-post-content .nti-unit-tabs .nti-unit-caption p { margin-block-end: 0 !important; }
.elementor-widget-theme-post-content .nti-unit-tabs .nti-article-figure { margin: 0; }
@media (max-width: 1024px) {
	.nti-unit-tabs.mobile-dropdown .e-tabs-mobile-dropdown { padding: 0; margin-bottom: 24px; }
}
@media (max-width: 767px) {
	.elementor-widget.elementor-widget-theme-post-content .nti-unit-tabs .nti-unit h3 { font-size: 20px; }
	.nti-unit-tabs .nti-unit-caption { padding: 20px; }
}

/* ---- UAT 7.0 (2026-10-30, Kelvin) ---- */
/* Callouts become "blurb bubbles": a light gradient, dark to light left to right, normal dark text.
   Blue is the default (NTI Solution / Business Outcome); The Challenge uses --grey. Set per callout in the content. */
.nti-article-callout { background: linear-gradient(90deg, rgba(0,174,239,.16) 0%, rgba(0,174,239,.04) 100%); border-left: 4px solid #00AEEF; border-radius: 18px; color: var(--e-global-color-0610876, #323434); padding: 22px 24px; }
.nti-article-callout.nti-article-callout--grey { background: linear-gradient(90deg, #DDE3E9 0%, #F6F7F8 100%); border-left-color: #9AA8B6; }
/* The old rule made every <strong> in a callout a block title line. Only a callout's own title (a direct child) is one now;
   bold words inside text stay inline. */
.nti-article-callout strong { color: var(--e-global-color-primary, #0F366F); }
.nti-article-callout :is(p, li, td, span) strong { display: inline; font-size: inherit; line-height: inherit; margin: 0; }
.nti-article-callout .nti-metric-tile strong { color: #fff; }
.nti-article-callout > :first-child { margin-top: 0 !important; }
.nti-article-callout p { color: var(--e-global-color-0610876, #323434) !important; }
.elementor-widget.elementor-widget-theme-post-content .nti-article-callout p + p { margin-top: 12px !important; }
.nti-article-callout > :last-child { margin-bottom: 0 !important; }
.nti-article-callout .nti-metric-grid, .nti-article-callout .nti-process, .nti-article-callout .nti-feature-cards { margin-bottom: 0; }

/* Proof tiles: blue with white text (was the QA v24 grey tile + gradient number) */
.nti-metric-tile { background: linear-gradient(135deg, #0F366F 0%, #005BAC 100%); box-shadow: 0 10px 24px rgba(15,54,111,.18); }
.nti-metric-tile .nti-metric-num { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: #fff; color: #fff; }
.nti-metric-tile .nti-metric-label { color: #fff; }

/* "Bold together with the figure, in the same colour" (Kelvin): a tile label's bold title is its own line, larger, white like
   the number, so number + title read as one group; the explanation under it stays 14px and a little softer.
   The content has <strong>Title</strong><br>Text, so the <br> is dropped once the title is a block. */
.nti-metric-tile .nti-metric-label { color: rgba(255,255,255,.85); }
.nti-metric-tile .nti-metric-label strong { display: block; font-size: 18px; font-weight: 800; line-height: 1.3; color: #fff; margin: 0 0 6px; }
.nti-metric-tile .nti-metric-label strong + br { display: none; }

/* Disclaimer / performance note: grey, smaller, no box */
.elementor-widget.elementor-widget-theme-post-content p.nti-article-note { font-size: 14px; font-weight: 500; line-height: 1.55; color: var(--e-global-color-c751f0b, #737373); }

/* Tables: body cells white (row headers too); optional muted values and a spotlight column */
.elementor-widget-theme-post-content table td, .elementor-widget-theme-post-content table tbody th { background: #fff; }
.elementor-widget-theme-post-content table .nti-cell-muted { color: #9AA3AD; }
.elementor-widget-theme-post-content table .nti-col-spot { background: #EAF6FD; color: var(--e-global-color-primary, #0F366F); font-weight: 700; }
.elementor-widget-theme-post-content table th.nti-col-spot { background: var(--e-global-color-primary, #0F366F); color: #fff; }

/* Hello Elementor's reset stripes odd rows (table tbody>tr:nth-child(odd)>td, 0,1,4) and tints rows on hover:
   the client wants every body row white, so both are overridden at higher specificity. */
.elementor-widget.elementor-widget-theme-post-content table tbody tr > td, .elementor-widget.elementor-widget-theme-post-content table tbody tr > th,
.elementor-widget.elementor-widget-theme-post-content table tbody tr:hover > td, .elementor-widget.elementor-widget-theme-post-content table tbody tr:hover > th { background-color: #fff; }
.elementor-widget.elementor-widget-theme-post-content table tbody tr > td.nti-col-spot, .elementor-widget.elementor-widget-theme-post-content table tbody tr:hover > td.nti-col-spot { background-color: #EAF6FD; }
/* Header cells sit on the same #EDF1F3 as their own border, so the column lines vanished in the header row
   (Jeremy 2026-11-04). One step darker (Pale Blue Gray global) shows them; body lines are unchanged. */
.elementor-widget.elementor-widget-theme-post-content table thead th { border-color: var(--e-global-color-8432d7c, #D8DEE6); }
/* A cell's own bold title reads one step above its text */
.elementor-widget-theme-post-content table td > strong:first-child { font-size: 16px; font-weight: 800; }
/* Stage tables (story 53): the first column is the figure the row is about - large, bold, primary (client render) */
.elementor-widget-theme-post-content table.nti-table-stage tbody td:first-child strong { font-size: 18px; line-height: 1.25; color: var(--e-global-color-primary, #0F366F); }
/* Phones: readable text columns that scroll sideways, with the stage column pinned on the left */
@media (max-width: 767px) {
	.elementor-widget-theme-post-content table.nti-table-stage tbody td:first-child strong { font-size: 16px; }
	.elementor-widget-theme-post-content table.nti-table-stage th, .elementor-widget-theme-post-content table.nti-table-stage td { min-width: 220px; }
	.elementor-widget-theme-post-content table.nti-table-stage th:first-child, .elementor-widget-theme-post-content table.nti-table-stage td:first-child { min-width: 96px; position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 #EDF1F3; }
	.elementor-widget-theme-post-content table.nti-table-stage thead th:first-child { background: var(--e-global-color-e35510b, #EDF1F3); }
}

/* Feature tiles (heading + text), e.g. Printer "surface behaviours", TAC-ON two tile cards */
.nti-feature-cards { display: grid; gap: 16px; margin: 24px 0; }
.nti-feature-cards.nti-feature-cards--2 { grid-template-columns: repeat(2, 1fr); }
.nti-feature-card { border: 1px solid #DDE2E8; border-radius: 18px; padding: 22px 24px; background: linear-gradient(180deg, #fff 0%, #F6F7F8 100%); box-shadow: 0 10px 26px rgba(16,22,30,.05); }
.elementor-widget.elementor-widget-theme-post-content .nti-feature-card h3 { margin: 0 0 8px; }
.elementor-widget.elementor-widget-theme-post-content .nti-feature-card p { margin-block-end: 0 !important; }

/* Card eyebrow + spec rows (103 slide 97, client render): small uppercase label above the title, then
   label-left / value-right rows split by hairlines instead of bullets */
.elementor-widget.elementor-widget-theme-post-content .nti-feature-card p.nti-card-eyebrow { margin: 0 0 6px !important; font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: #246995; }
.elementor-widget.elementor-widget-theme-post-content .nti-feature-card .nti-card-eyebrow + h3 { font-size: 20px; line-height: 1.28; margin: 0 0 10px; }
.nti-feature-card .nti-card-facts { margin-top: 18px; }
.nti-feature-card .nti-card-fact { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid #DDE2E8; }
.nti-feature-card .nti-card-fact span { font-size: 14px; font-weight: 500; color: var(--e-global-color-c751f0b, #737373); }
.nti-feature-card .nti-card-fact strong { font-size: 15px; font-weight: 800; color: var(--e-global-color-primary, #0F366F); text-align: right; white-space: nowrap; }

/* Numbered process flow (single row of tiles, 2 on tablet, 1 on phones) */
.nti-process { list-style: none; margin: 24px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; counter-reset: nti-step; }
.nti-process > li { counter-increment: nti-step; background: #fff; border: 1px solid #DDE2E8; border-radius: 14px; padding: 18px 16px; margin: 0; }
.nti-process > li::before { content: counter(nti-step); display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--e-global-color-primary, #0F366F); color: #fff; font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.nti-process > li strong { display: block; font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--e-global-color-primary, #0F366F); margin-bottom: 6px; }
.nti-process > li span { display: block; font-size: 14px; line-height: 1.5; color: var(--e-global-color-0610876, #323434); }

/* Small evidence images supplied at ~100-240px: one uniform frame each, never stretched past ~2x */
.nti-evidence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 220px)); gap: 16px; margin: 16px 0 28px; }
.elementor-widget-theme-post-content .nti-evidence-grid figure { margin: 0; }
.elementor-widget-theme-post-content .nti-evidence-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border: 1px solid #DDE2E8; border-radius: 12px; padding: 8px; box-sizing: border-box; }
.elementor-widget-theme-post-content .nti-evidence-grid figcaption { margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--e-global-color-c751f0b, #737373); }

/* In-article pill CTA */
.elementor-widget-theme-post-content a.nti-pill-btn { display: inline-flex; align-items: center; padding: 12px 28px; border-radius: 100px; background: linear-gradient(225deg, #37C0EB 0%, #0F366F 100%); color: #fff !important; font-size: 16px; font-weight: 500; line-height: 1.2; text-decoration: none; transition: opacity .2s; }
.elementor-widget-theme-post-content a.nti-pill-btn:hover { opacity: .9; }

/* Printer unit panels: diagram + close-up side by side (client preview), caption across both */
.nti-unit-tabs .e-n-tabs-content > .nti-unit.is-active { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.nti-unit-tabs .nti-unit > .nti-article-figure { padding: 16px; }
.nti-unit-tabs .nti-unit > .nti-article-figure + .nti-article-figure { border-left: 1px solid #DDE2E8; }
.nti-unit-tabs .nti-unit > .nti-unit-caption { grid-column: 1 / -1; }

@media (max-width: 767px) {
	.nti-unit-tabs .e-n-tabs-content > .nti-unit.is-active { grid-template-columns: 1fr; }
	.nti-unit-tabs .nti-unit > .nti-article-figure + .nti-article-figure { border-left: 0; border-top: 1px solid #DDE2E8; }
	.nti-feature-cards.nti-feature-cards--2 { grid-template-columns: 1fr; }
	.nti-evidence-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Explore More cards (loop item 13107): equal-height cards with the arrow pinned to the bottom, so the three
   buttons line up; title max 3 lines and teaser max 4 lines, ending in an ellipsis (Jeremy). */
.e-loop-item > .e-con.story-card { height: 100%; }
.e-con.story-card > .e-con.story-card-body { flex: 1 1 auto; }
.e-con.story-card-body > .e-con.story-card-cta { margin-top: auto; }
.e-con.story-card-body .elementor-widget-heading .elementor-heading-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.e-con.story-card-body .elementor-widget-text-editor { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
/* ---- UAT 7.0 end ---- */