/*
 * IndoSurgicals Content Harmony Layer — Patch 13.1
 * -------------------------------------------------
 * Purpose: visually harmonise Blog and authored legacy content with the
 * global public design tokens without overwriting component-specific CSS.
 *
 * Rule: site chrome + page shells use shared tokens; authored content keeps
 * its own internal geometry/colours. This prevents dark cards, callouts,
 * tables and designed content from being flattened by root-page rules.
 */

/* ---------- Blog outer shell ---------- */
.blog-page,
.blog-category-header,
.blog-article {
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif);
    color: var(--isp-root-text, #263746);
}

.blog-page {
    box-sizing: border-box;
    width: min(var(--isp-root-content-max, 1190px), calc(100% - 32px));
    max-width: var(--isp-root-content-max, 1190px);
    margin: 18px auto 44px;
}

.blog-hero,
.blog-category-header,
.blog-article-header {
    border-color: var(--isp-root-line, #d8e2e3);
    border-radius: var(--isp-root-radius-xl, 18px);
    box-shadow: var(--isp-root-shadow-md, 0 11px 30px rgba(31,58,75,.06));
}

.blog-hero,
.blog-category-header,
.blog-article-header {
    background:
        radial-gradient(circle at 96% 6%, rgba(99,196,173,.18), transparent 30%),
        linear-gradient(135deg, #f8fbfb 0%, #ffffff 62%, #eef8f6 100%);
    color: var(--isp-root-text, #263746);
}

.blog-hero h1,
.blog-category-header h1,
.blog-article-header h1 {
    color: var(--isp-root-navy-dark, #273c4d);
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif);
    line-height: 1.12;
    letter-spacing: -.035em;
}

.blog-kicker,
.blog-category-pill,
.blog-read-more,
.blog-meta a {
    color: var(--isp-root-teal, #008f87);
}

.blog-hero p,
.blog-category-header p,
.blog-card p,
.blog-meta,
.blog-article-date,
.blog-lead {
    color: var(--isp-root-muted, #687986);
}

.blog-card,
.blog-empty,
.blog-content,
.blog-article-footer,
.blog-share,
.blog-search,
.blog-filter-form {
    border-color: var(--isp-root-line, #d8e2e3);
    border-radius: var(--isp-root-radius-md, 13px);
    box-shadow: var(--isp-root-shadow-sm, 0 7px 20px rgba(31,58,75,.045));
}

.blog-search button,
.blog-filter-form button,
.blog-button:not(.blog-button-secondary):not(.blog-button-danger),
.blog-pagination a.active {
    border-color: var(--isp-root-teal, #008f87);
    background: var(--isp-root-teal, #008f87);
    color: #fff;
}

/* ---------- Blog content isolation ----------
 * Standard/editor content receives the shared reading rhythm.
 * Authored/design content keeps its own nested heading/card/list colours.
 */
.blog-content-isolated {
    color: var(--isp-root-text, #263746);
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif);
    overflow-wrap: anywhere;
}

.blog-content-isolated--standard > :where(h1,h2,h3,h4,h5,h6) {
    color: var(--isp-root-navy-dark, #273c4d);
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif);
}

.blog-content-isolated--standard > p,
.blog-content-isolated--standard > ul,
.blog-content-isolated--standard > ol {
    color: var(--isp-root-text, #263746);
}

.blog-content-isolated--authored {
    /* No nested colour/size overrides here by design. */
    color: var(--isp-root-text, #263746);
}

.blog-content-isolated--authored > * {
    max-width: 100%;
}

.blog-content-isolated img,
.blog-content-isolated video {
    max-width: 100% !important;
    height: auto !important;
}

.blog-content-isolated iframe {
    max-width: 100% !important;
}

.blog-content-isolated table {
    max-width: 100%;
}

.blog-content-isolated pre,
.blog-content-isolated code,
.blog-content-isolated a {
    overflow-wrap: anywhere;
}

/* ---------- Legacy /page/ authored-content safety ---------- */
.isp-info-page {
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif);
}

.isp-info-page .isp-info-hero,
.isp-info-page .isp-info-content-card {
    border-color: var(--isp-root-line, #d8e2e3);
}

.isp-page-body--authored {
    color: var(--isp-root-text, #263746);
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif);
}

.isp-page-body--authored > * {
    max-width: 100%;
}

.isp-page-body--authored img,
.isp-page-body--authored video {
    max-width: 100% !important;
    height: auto !important;
}

.isp-page-body--authored iframe {
    max-width: 100% !important;
}

.isp-page-body--authored table {
    max-width: 100%;
}

/* Accessible shared focus without changing component geometry. */
.blog-page a:focus-visible,
.blog-page button:focus-visible,
.isp-info-page a:focus-visible,
.isp-info-page button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--isp-root-teal, #008f87) 28%, transparent);
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .blog-page {
        width: min(var(--isp-root-content-max, 1190px), calc(100% - 24px));
        margin-top: 12px;
    }
    .blog-hero,
    .blog-category-header,
    .blog-article-header {
        border-radius: 14px;
    }
    .blog-content-isolated table,
    .isp-page-body--authored table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* Blog filter controls retained from Patch 13, now in the compatibility layer. */
/* Patch 13: consolidated Blog filter controls (moved from inline page CSS). */
.blog-filter-form{
    width:min(680px,100%);
    display:grid;
    grid-template-columns:220px minmax(280px,1fr) 104px;
    gap:10px;
    align-items:center;
    padding:6px;
    box-sizing:border-box;
    background:#ffffff;
    border:1px solid rgba(255,255,255,.45);
    border-radius:12px;
    box-shadow:0 10px 24px rgba(20,42,58,.12);
}
.blog-filter-field{
    display:flex;
    flex-direction:column;
    min-width:0;
}
.blog-filter-label{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}
.blog-filter-form select,
.blog-filter-form input{
    width:100%;
    height:48px;
    box-sizing:border-box;
    border:1px solid var(--isp-root-line, #d8e2e3);
    border-radius:8px;
    background:#ffffff;
    color:var(--isp-root-text, #263746);
    font:inherit;
    font-size:15px;
    padding:0 14px;
    outline:none;
}
.blog-filter-form select{
    cursor:pointer;
}
.blog-filter-form select:focus,
.blog-filter-form input:focus{
    border-color:var(--isp-root-teal, #008f87);
    box-shadow:0 0 0 3px rgba(0,143,135,.14);
}
.blog-filter-form button{
    width:104px;
    height:48px;
    padding:0 18px;
    border:0;
    border-radius:8px;
    white-space:nowrap;
    font-weight:700;
    cursor:pointer;
}
.blog-filter-reset{
    grid-column:1/-1;
    justify-self:end;
    margin-top:2px;
    color:var(--isp-root-navy, #405365);
    font-size:13px;
    font-weight:700;
    text-decoration:none;
}
.blog-filter-reset:hover{
    color:var(--isp-root-teal-dark, #00746f);
    text-decoration:underline;
}
@media(max-width:1050px){
    .blog-filter-form{
        width:100%;
        grid-template-columns:200px minmax(220px,1fr) 104px;
    }
}
@media(max-width:760px){
    .blog-hero{
        gap:22px;
    }
    .blog-filter-form{
        width:100%;
        grid-template-columns:1fr 1fr;
    }
    .blog-filter-form button{
        width:100%;
        grid-column:1/-1;
    }
    .blog-filter-reset{
        justify-self:center;
    }
}
@media(max-width:560px){
    .blog-filter-form{
        grid-template-columns:1fr;
        padding:8px;
    }
    .blog-filter-form button,
    .blog-filter-reset{
        width:100%;
        grid-column:auto;
    }
}


/* ========================================================================== 
   Patch 13.2 / 13.6 blog exception — Strict public content harmonisation
   --------------------------------------------------------------------------
   Root pages are the visual reference. Legacy /page/ content and standard
   (non-authored) Blog articles use the shared reading typography/tables.
   Authored Blog interiors keep their own creative styling; Blog outer width,
   header and footer remain aligned with the public website shell.
   ========================================================================== */

/* One public content width. */
.blog-page {
    width: min(95%, var(--isp-root-content-max, 1190px)) !important;
    max-width: var(--isp-root-content-max, 1190px) !important;
    margin: 14px auto 44px !important;
}
.blog-article {
    width: 100% !important;
    max-width: var(--isp-root-content-max, 1190px) !important;
    margin: 0 auto !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* The article hero is intentionally the exception: keep its individual
   article hierarchy/scale while giving it the common root geometry. */
.blog-article-header {
    width: 100%;
    margin: 0 0 14px !important;
    border: 1px solid var(--isp-root-line, #d8e2e3) !important;
    border-radius: var(--isp-root-radius-xl, 18px) !important;
    box-shadow: var(--isp-root-shadow-md, 0 11px 30px rgba(31,58,75,.06)) !important;
}
.blog-featured-image-top {
    overflow: hidden;
    margin: 0 0 14px !important;
    border: 1px solid var(--isp-root-line, #d8e2e3);
    border-radius: var(--isp-root-radius-lg, 17px);
    background: var(--isp-root-white, #fff);
    box-shadow: var(--isp-root-shadow-md, 0 11px 30px rgba(31,58,75,.06));
}

/* Article body = same surface and reading scale as root information cards. */
.blog-content {
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: var(--isp-root-card-pad-y, 28px) var(--isp-root-card-pad-x, 30px) !important;
    border: 1px solid var(--isp-root-line, #d8e2e3) !important;
    border-radius: var(--isp-root-radius-lg, 17px) !important;
    background: var(--isp-root-white, #fff) !important;
    box-shadow: var(--isp-root-shadow-md, 0 11px 30px rgba(31,58,75,.06)) !important;
    color: var(--isp-root-text, #263746);
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif) !important;
    font-size: var(--isp-root-body-size, 14px) !important;
    line-height: 1.7 !important;
}
.blog-content-isolated--standard,
.blog-content-isolated--standard :where(p, li, dt, dd, blockquote, figcaption) {
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif) !important;
    font-size: var(--isp-root-body-size, 14px) !important;
    line-height: 1.7 !important;
}
.blog-content-isolated--standard :where(h2) {
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif) !important;
    font-size: var(--isp-root-h2-size, 27px) !important;
    line-height: 1.22 !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
}
.blog-content-isolated--standard :where(h3) {
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif) !important;
    font-size: var(--isp-root-h3-size, 15px) !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}
.blog-content-isolated--standard :where(h4, h5, h6) {
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif) !important;
    font-size: var(--isp-root-h3-size, 15px) !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
}
.blog-content-isolated--standard > :where(h2, h3, h4, h5, h6) {
    color: var(--isp-root-navy-dark, #273c4d);
}
.blog-content-isolated--standard > :where(p, ul, ol) {
    color: var(--isp-root-text, #263746);
}

/* Common card geometry inside standard Blog articles. Authored Blog designs
   are deliberately excluded from this normalization layer. */
.blog-content-isolated--standard :where(
    [class*="card"], [class*="Card"],
    [class*="box"], [class*="Box"],
    [class*="panel"], [class*="Panel"],
    [class*="callout"], [class*="Callout"],
    [class*="option"], [class*="Option"]
) {
    border-radius: var(--isp-root-radius-lg, 17px) !important;
    box-shadow: var(--isp-root-shadow-sm, 0 7px 20px rgba(31,58,75,.045)) !important;
}

/* Root-table appearance in standard Blog content and legacy /page/ content. */
.blog-content-isolated--standard table,
.isp-page-body table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px 0 !important;
    border: 1px solid var(--isp-root-line, #d8e2e3) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 12px !important;
    background: var(--isp-root-white, #fff) !important;
    color: var(--isp-root-text, #263746) !important;
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif) !important;
    font-size: var(--isp-root-small-size, 12px) !important;
    line-height: 1.55 !important;
    overflow: hidden;
}
.blog-content-isolated--standard th,
.blog-content-isolated--standard td,
.isp-page-body th,
.isp-page-body td {
    padding: 11px 13px !important;
    border: 0 !important;
    border-right: 1px solid var(--isp-root-line, #d8e2e3) !important;
    border-bottom: 1px solid var(--isp-root-line, #d8e2e3) !important;
    background: var(--isp-root-white, #fff);
    color: var(--isp-root-text, #263746);
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif) !important;
    font-size: var(--isp-root-small-size, 12px) !important;
    line-height: 1.55 !important;
    vertical-align: top !important;
    text-align: left !important;
}
.blog-content-isolated--standard th,
.isp-page-body th {
    background: var(--isp-root-soft, #f4f7f7) !important;
    color: var(--isp-root-navy-dark, #273c4d) !important;
    font-weight: 800 !important;
}
.blog-content-isolated--standard tr > :last-child,
.isp-page-body tr > :last-child { border-right: 0 !important; }
.blog-content-isolated--standard tr:last-child > td,
.isp-page-body tr:last-child > td { border-bottom: 0 !important; }

/* Share/footer surfaces follow the same card geometry too. */
.blog-share,
.blog-article-footer {
    margin: 0 0 14px !important;
    padding: 22px 24px !important;
    border: 1px solid var(--isp-root-line, #d8e2e3) !important;
    border-radius: var(--isp-root-radius-lg, 17px) !important;
    background: var(--isp-root-white, #fff) !important;
    box-shadow: var(--isp-root-shadow-sm, 0 7px 20px rgba(31,58,75,.045)) !important;
}

/* Blog listing/category cards use the same root card geometry and type scale. */
.blog-card,
.blog-empty,
.blog-category-header {
    border-color: var(--isp-root-line, #d8e2e3) !important;
    border-radius: var(--isp-root-radius-lg, 17px) !important;
    box-shadow: var(--isp-root-shadow-md, 0 11px 30px rgba(31,58,75,.06)) !important;
}
.blog-card,
.blog-card * {
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif);
}
.blog-card p { font-size: var(--isp-root-body-size, 14px) !important; line-height: 1.7 !important; }

/* Legacy /page/ shell now uses the exact root page spacing and card metrics. */
.isp-info-page {
    padding: 14px 0 14px !important;
    color: var(--isp-root-text, #263746) !important;
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif) !important;
}
.isp-info-hero {
    margin: 0 0 14px !important;
    padding: 34px 36px !important;
    gap: 30px !important;
    border-color: var(--isp-root-line, #d8e2e3) !important;
    border-radius: var(--isp-root-radius-xl, 18px) !important;
    box-shadow: var(--isp-root-shadow-md, 0 11px 30px rgba(31,58,75,.06)) !important;
}
.isp-info-hero h1 {
    font-size: var(--isp-root-h1-size, clamp(34px, 3.4vw, 45px)) !important;
    line-height: 1.08 !important;
    letter-spacing: -.04em !important;
}
.isp-info-content-card {
    margin: 0 0 14px !important;
    padding: var(--isp-root-card-pad-y, 28px) var(--isp-root-card-pad-x, 30px) !important;
    border-color: var(--isp-root-line, #d8e2e3) !important;
    border-radius: var(--isp-root-radius-lg, 17px) !important;
    background: var(--isp-root-white, #fff) !important;
    box-shadow: var(--isp-root-shadow-md, 0 11px 30px rgba(31,58,75,.06)) !important;
}
.isp-page-body,
.isp-page-body :where(p, li, dt, dd, blockquote, figcaption) {
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif) !important;
    font-size: var(--isp-root-body-size, 14px) !important;
    line-height: 1.7 !important;
}
.isp-page-body :where(h2) {
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif) !important;
    font-size: var(--isp-root-h2-size, 27px) !important;
    line-height: 1.22 !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
}
.isp-page-body :where(h3, h4, h5, h6) {
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif) !important;
    font-size: var(--isp-root-h3-size, 15px) !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
}
.isp-page-body > :where(h2, h3, h4, h5, h6) { color: var(--isp-root-navy-dark, #273c4d); }
.isp-page-body > :where(p, ul, ol) { color: var(--isp-root-text, #263746); }

/* Same surface geometry for common authored page cards without overriding
   their semantic background (white, mint or dark). */
.isp-page-body--authored :where(
    [class*="card"], [class*="Card"],
    [class*="box"], [class*="Box"],
    [class*="panel"], [class*="Panel"],
    [class*="callout"], [class*="Callout"],
    [class*="option"], [class*="Option"]
) {
    border-radius: var(--isp-root-radius-lg, 17px) !important;
    box-shadow: var(--isp-root-shadow-sm, 0 7px 20px rgba(31,58,75,.045)) !important;
}

@media (max-width: 760px) {
    .blog-page { width: 95% !important; margin-top: 10px !important; }
    .blog-content,
    .isp-info-content-card { padding: 22px 18px 24px !important; border-radius: 14px !important; }
    .blog-article-header,
    .blog-featured-image-top,
    .blog-share,
    .blog-article-footer,
    .isp-info-hero { border-radius: 14px !important; }
    .isp-info-hero { padding: 27px 22px !important; }
    .blog-content-isolated--standard table,
    .isp-page-body table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ========================================================================== 
   Patch 13.3 — Radiation core-material technical page harmonisation
   --------------------------------------------------------------------------
   Applies only to the four StPb® / NoPb® radiation-protection core-material
   detail pages. Their technical HTML is preserved exactly; this layer makes
   the legacy <small>-wrapped content inherit the approved root-page width,
   Poppins typography, type scale, palette, card geometry and table language.
   ========================================================================== */

.isp-info-page--core-material {
    color: var(--isp-root-text, #263746) !important;
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif) !important;
}

/* These legacy records wrap almost every text node in <small>. Neutralise the
   browser's 80% small-text reduction so the actual root-page scale can apply. */
.isp-info-page--core-material .isp-page-body small {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-style: inherit;
    line-height: inherit !important;
    letter-spacing: inherit;
}

.isp-info-page--core-material .isp-page-body,
.isp-info-page--core-material .isp-page-body :where(p, li, dt, dd, blockquote, figcaption) {
    color: var(--isp-root-text, #263746) !important;
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif) !important;
    font-size: var(--isp-root-body-size, 14px) !important;
    line-height: 1.7 !important;
}

.isp-info-page--core-material .isp-page-body > p {
    margin: 0 0 14px !important;
}

.isp-info-page--core-material .isp-page-body h2 {
    margin: 28px 0 14px !important;
    padding: 0 0 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--isp-root-line, #d8e2e3) !important;
    color: var(--isp-root-navy-dark, #273c4d) !important;
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif) !important;
    font-size: var(--isp-root-h2-size, 27px) !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    letter-spacing: -.025em !important;
    text-align: left !important;
}

.isp-info-page--core-material .isp-page-body h3,
.isp-info-page--core-material .isp-page-body h4,
.isp-info-page--core-material .isp-page-body h5,
.isp-info-page--core-material .isp-page-body h6 {
    margin: 20px 0 9px !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--isp-root-navy-dark, #273c4d) !important;
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif) !important;
    font-size: var(--isp-root-h3-size, 15px) !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

.isp-info-page--core-material .isp-page-body strong,
.isp-info-page--core-material .isp-page-body b {
    color: inherit;
    font-weight: 700 !important;
}

.isp-info-page--core-material .isp-page-body a {
    color: var(--isp-root-teal-dark, #00746f) !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 700;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.isp-info-page--core-material .isp-page-body ul,
.isp-info-page--core-material .isp-page-body ol {
    margin: 10px 0 18px !important;
    padding-left: 24px !important;
    color: var(--isp-root-text, #263746) !important;
}

.isp-info-page--core-material .isp-page-body li {
    margin: 0 0 7px !important;
    padding-left: 2px;
}

.isp-info-page--core-material .isp-page-body li::marker {
    color: var(--isp-root-teal, #008f87);
}

.isp-info-page--core-material .isp-page-body hr {
    height: 0 !important;
    margin: 28px 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--isp-root-line, #d8e2e3) !important;
    background: transparent !important;
}

/* Exact root-table language for the technical data sets. */
.isp-info-page--core-material .isp-page-body table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px 0 22px !important;
    border: 1px solid var(--isp-root-line, #d8e2e3) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 12px !important;
    background: var(--isp-root-white, #fff) !important;
    box-shadow: var(--isp-root-shadow-sm, 0 7px 20px rgba(31,58,75,.045)) !important;
    color: var(--isp-root-text, #263746) !important;
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif) !important;
    font-size: var(--isp-root-small-size, 12px) !important;
    line-height: 1.55 !important;
    overflow: hidden;
}

.isp-info-page--core-material .isp-page-body th,
.isp-info-page--core-material .isp-page-body td {
    padding: 11px 13px !important;
    border: 0 !important;
    border-right: 1px solid var(--isp-root-line, #d8e2e3) !important;
    border-bottom: 1px solid var(--isp-root-line, #d8e2e3) !important;
    background: var(--isp-root-white, #fff) !important;
    color: var(--isp-root-text, #263746) !important;
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif) !important;
    font-size: var(--isp-root-small-size, 12px) !important;
    line-height: 1.55 !important;
    vertical-align: top !important;
    text-align: left !important;
}

.isp-info-page--core-material .isp-page-body th {
    background: var(--isp-root-soft, #f4f7f7) !important;
    color: var(--isp-root-navy-dark, #273c4d) !important;
    font-weight: 800 !important;
}

.isp-info-page--core-material .isp-page-body tr > :last-child {
    border-right: 0 !important;
}

.isp-info-page--core-material .isp-page-body tr:last-child > td {
    border-bottom: 0 !important;
}

/* Keep the main technical body in the same root-page card geometry. */
.isp-info-page--core-material .isp-info-content-card {
    border: 1px solid var(--isp-root-line, #d8e2e3) !important;
    border-radius: var(--isp-root-radius-lg, 17px) !important;
    background: var(--isp-root-white, #fff) !important;
    box-shadow: var(--isp-root-shadow-md, 0 11px 30px rgba(31,58,75,.06)) !important;
}

@media (max-width: 760px) {
    .isp-info-page--core-material .isp-page-body h2 {
        font-size: 24px !important;
    }
    .isp-info-page--core-material .isp-page-body table {
        display: block !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 11px !important;
    }
}

/* ========================================================================== 
   Patch 13.4.3 — Legacy /page/ single-border table system
   --------------------------------------------------------------------------
   Every table inside a legacy information page receives one outer rounded
   shell. The shell owns the border/radius/scrolling; the table owns only the
   internal row and column grid. This removes the double rounded outlines seen
   on authored pages such as Lead Apron Patterns and the radiation-core pages.
   ========================================================================== */

.isp-page-table-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px 0 22px !important;
    padding: 0 !important;
    border: 1px solid var(--isp-root-line, #d8e2e3) !important;
    border-radius: 12px !important;
    background: var(--isp-root-white, #fff) !important;
    box-shadow: var(--isp-root-shadow-sm, 0 7px 20px rgba(31,58,75,.045)) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
}

/* The shell owns the complete outer edge. */
.isp-page-body .isp-page-table-shell > table,
.isp-info-page--core-material .isp-page-body .isp-page-table-shell > table {
    width: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    overflow: visible !important;
    background: var(--isp-root-white, #fff) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Only internal grid lines remain. */
.isp-page-body .isp-page-table-shell > table th,
.isp-page-body .isp-page-table-shell > table td {
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 1px solid var(--isp-root-line, #d8e2e3) !important;
    border-bottom: 1px solid var(--isp-root-line, #d8e2e3) !important;
}

.isp-page-body .isp-page-table-shell > table tr > :last-child {
    border-right: 0 !important;
}

.isp-page-body .isp-page-table-shell > table tbody tr:last-child > td,
.isp-page-body .isp-page-table-shell > table tr:last-child > td,
.isp-page-body .isp-page-table-shell > table tr:last-child > th {
    border-bottom: 0 !important;
}

/* If an authored page already had a table-only wrapper, JavaScript reuses it
   as the shell. Strip legacy decorative padding/background so it cannot draw
   a second frame around the common table edge. */
.isp-page-table-shell[data-isp-table-shell="reused"] {
    padding: 0 !important;
    background-image: none !important;
}

@media (max-width: 760px) {
    .isp-page-table-shell {
        margin: 15px 0 18px !important;
        border-radius: 11px !important;
    }

    .isp-page-body .isp-page-table-shell > table,
    .isp-info-page--core-material .isp-page-body .isp-page-table-shell > table {
        display: table !important;
        overflow: visible !important;
    }
}

/* ========================================================================== 
   Patch 13.4.4 — Nested legacy table-frame collapse
   --------------------------------------------------------------------------
   Some historic CMS pages wrap a table in two or more decorative DIVs. The
   canonical table shell is the only element allowed to draw an outer frame.
   JavaScript marks every table-only ancestor so old padding/borders/shadows,
   including pseudo-element decoration, cannot create a second outline.
   ========================================================================== */

.isp-page-body .isp-page-table-ancestor-reset {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.isp-page-body .isp-page-table-ancestor-reset::before,
.isp-page-body .isp-page-table-ancestor-reset::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Keep the one canonical edge authoritative even when the old table markup
   carries inline border/radius/shadow declarations. */
.isp-page-body .isp-page-table-shell {
    border: 1px solid var(--isp-root-line, #d8e2e3) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    background: var(--isp-root-white, #fff) !important;
    box-shadow: var(--isp-root-shadow-sm, 0 7px 20px rgba(31,58,75,.045)) !important;
}

.isp-page-body .isp-page-table-shell > table {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* ========================================================================== 
   Patch 13.4.5 — Authored legacy page outer-padding removal
   --------------------------------------------------------------------------
   Designed /page/... content already provides its own internal spacing. The
   generic information-page card previously added a second 30px (18px mobile)
   inset around that authored layout, making these pages visibly narrower than
   the shared 1190px root-page system. Keep the common outer card/border/radius,
   but remove only that redundant padding for authored page bodies.
   ========================================================================== */

/*
   Legacy authored-page frame refinement.
   These pages keep their designed internal layout, but receive a small,
   consistent breathing space inside the shared outer information card.
*/
.isp-info-content-card--authored {
    padding: 12px !important;
    border: 1px solid var(--isp-root-line, #d8e2e3) !important;
    border-radius: var(--isp-root-radius-lg, 17px) !important;
    background: var(--isp-root-white, #fff) !important;
    box-shadow: var(--isp-root-shadow-md, 0 11px 30px rgba(31,58,75,.06)) !important;
}

@media (max-width: 760px) {
    .isp-info-content-card--authored {
        padding: 10px !important;
    }
}


/* ========================================================================== 
   Patch 13.4.6 — Full-width legacy page body
   --------------------------------------------------------------------------
   The desktop consolidation layer historically constrained .isp-page-body to
   1040px and centered it inside the already-width-limited information card.
   That produced an unnecessary second horizontal inset. Legacy /page/ bodies
   now use the full width available inside the common 1190px page shell.
   ========================================================================== */

html body .isp-info-page .isp-page-body {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

@media (min-width: 901px) {
    html body .isp-info-page .isp-page-body {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
}

/* ========================================================================== 
   Patch 13.5 — Fixed legacy /page/ CMS body contract
   --------------------------------------------------------------------------
   New pages, and existing pages migrated manually, opt in by wrapping their
   full_desc HTML in exactly one .isp-fixed-page element. This deliberately
   replaces historic one-off page CSS/hero/card systems with a small reusable
   semantic component set while the common PHP renderer remains responsible
   for the page H1 hero, navigation, trust panel and footer.
   ========================================================================== */

.isp-info-page--fixed .isp-info-content-card--fixed {
    padding: var(--isp-root-card-pad-y, 28px) var(--isp-root-card-pad-x, 30px) !important;
    border: 1px solid var(--isp-root-line, #d8e2e3) !important;
    border-radius: var(--isp-root-radius-lg, 17px) !important;
    background: var(--isp-root-white, #fff) !important;
    box-shadow: var(--isp-root-shadow-md, 0 11px 30px rgba(31,58,75,.06)) !important;
}

.isp-page-body--fixed,
.isp-page-body--fixed .isp-fixed-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--isp-root-text, #263746) !important;
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif) !important;
    font-size: var(--isp-root-body-size, 14px) !important;
    line-height: 1.7 !important;
    box-sizing: border-box !important;
}

/* Never allow old editor typography tags to change the fixed scale. */
.isp-page-body--fixed :where(small, font) {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

.isp-fixed-page > :first-child { margin-top: 0 !important; }
.isp-fixed-page > :last-child { margin-bottom: 0 !important; }

.isp-fixed-intro {
    margin: 0 0 28px !important;
    padding: 0 !important;
}

.isp-fixed-intro p {
    margin: 0 0 14px !important;
    color: var(--isp-root-text, #263746) !important;
    font: inherit !important;
}

.isp-fixed-intro p:last-child { margin-bottom: 0 !important; }

.isp-fixed-section {
    margin: 28px 0 0 !important;
    padding: 28px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--isp-root-line, #d8e2e3) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.isp-fixed-intro + .isp-fixed-section { margin-top: 0 !important; }

.isp-fixed-section > h2:first-child,
.isp-fixed-section > h3:first-child { margin-top: 0 !important; }

.isp-page-body--fixed h2,
.isp-page-body--fixed .isp-fixed-section h2 {
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--isp-root-navy-dark, #273c4d) !important;
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif) !important;
    font-size: var(--isp-root-h2-size, 27px) !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    letter-spacing: -.025em !important;
    text-align: left !important;
}

.isp-page-body--fixed h3,
.isp-page-body--fixed h4,
.isp-page-body--fixed h5,
.isp-page-body--fixed h6 {
    margin: 20px 0 9px !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--isp-root-navy-dark, #273c4d) !important;
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif) !important;
    font-size: var(--isp-root-h3-size, 15px) !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

.isp-page-body--fixed :where(p, li, dt, dd, blockquote, figcaption) {
    color: var(--isp-root-text, #263746) !important;
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif) !important;
    font-size: var(--isp-root-body-size, 14px) !important;
    line-height: 1.7 !important;
}

.isp-page-body--fixed p { margin: 0 0 14px !important; }
.isp-page-body--fixed strong,
.isp-page-body--fixed b { color: inherit; font-weight: 700 !important; }

.isp-page-body--fixed a {
    color: var(--isp-root-teal-dark, #00746f) !important;
    font: inherit !important;
    font-weight: 700 !important;
    text-underline-offset: 2px;
}

.isp-page-body--fixed ul,
.isp-page-body--fixed ol {
    margin: 10px 0 18px !important;
    padding-left: 24px !important;
}
.isp-page-body--fixed li { margin: 0 0 7px !important; }
.isp-page-body--fixed li::marker { color: var(--isp-root-teal, #008f87) !important; }

/* Fixed cards and grids: optional reusable components for features, choices,
   product highlights and other grouped information. */
.isp-fixed-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px !important;
    margin: 18px 0 0 !important;
}
.isp-fixed-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.isp-fixed-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.isp-fixed-card {
    min-width: 0;
    margin: 0 !important;
    padding: 18px !important;
    border: 1px solid var(--isp-root-line, #d8e2e3) !important;
    border-radius: var(--isp-root-radius-lg, 17px) !important;
    background: var(--isp-root-white, #fff) !important;
    box-shadow: var(--isp-root-shadow-sm, 0 7px 20px rgba(31,58,75,.045)) !important;
}
.isp-fixed-card h3 { margin-top: 0 !important; }
.isp-fixed-card p:last-child { margin-bottom: 0 !important; }

.isp-fixed-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px !important;
    margin: 18px 0 0 !important;
}
.isp-fixed-stat {
    padding: 16px !important;
    border: 1px solid var(--isp-root-line, #d8e2e3) !important;
    border-radius: var(--isp-root-radius-md, 13px) !important;
    background: var(--isp-root-soft, #f4f7f7) !important;
    text-align: left !important;
}
.isp-fixed-stat strong {
    display: block;
    margin-bottom: 3px;
    color: var(--isp-root-navy-dark, #273c4d) !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
}
.isp-fixed-stat span {
    color: var(--isp-root-muted, #687986) !important;
    font-size: var(--isp-root-small-size, 12px) !important;
    line-height: 1.45 !important;
}

.isp-fixed-note {
    margin: 18px 0 !important;
    padding: 14px 16px !important;
    border: 1px solid var(--isp-root-line, #d8e2e3) !important;
    border-left: 4px solid var(--isp-root-teal, #008f87) !important;
    border-radius: var(--isp-root-radius-md, 13px) !important;
    background: var(--isp-root-teal-soft, #eaf7f5) !important;
    color: var(--isp-root-text, #263746) !important;
}
.isp-fixed-note > :last-child { margin-bottom: 0 !important; }

.isp-fixed-note--warning {
    border-left-color: #d49a00 !important;
    background: #fff7df !important;
}

/* Plain semantic tables only. Do not add manual table wrappers in CMS HTML;
   indos-page-tables.js supplies the canonical single-border scroll shell. */
.isp-page-body--fixed table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px 0 22px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    color: var(--isp-root-text, #263746) !important;
    font-family: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif) !important;
    font-size: var(--isp-root-small-size, 12px) !important;
    line-height: 1.55 !important;
}

.isp-page-body--fixed th,
.isp-page-body--fixed td {
    padding: 11px 13px !important;
    color: var(--isp-root-text, #263746) !important;
    font-family: inherit !important;
    font-size: var(--isp-root-small-size, 12px) !important;
    line-height: 1.55 !important;
    vertical-align: top !important;
    text-align: left !important;
}
.isp-page-body--fixed th {
    background: var(--isp-root-soft, #f4f7f7) !important;
    color: var(--isp-root-navy-dark, #273c4d) !important;
    font-weight: 800 !important;
}

.isp-fixed-faqs { margin: 18px 0 0 !important; }
.isp-fixed-faq {
    margin: 0 0 10px !important;
    border: 1px solid var(--isp-root-line, #d8e2e3) !important;
    border-radius: var(--isp-root-radius-md, 13px) !important;
    background: var(--isp-root-white, #fff) !important;
    overflow: hidden;
}
.isp-fixed-faq summary {
    padding: 14px 16px !important;
    color: var(--isp-root-navy-dark, #273c4d) !important;
    font-weight: 800 !important;
    cursor: pointer;
}
.isp-fixed-faq > :not(summary) {
    margin-left: 16px !important;
    margin-right: 16px !important;
}
.isp-fixed-faq > :last-child { margin-bottom: 16px !important; }

.isp-fixed-cta {
    margin: 28px 0 0 !important;
    padding: 22px !important;
    border: 1px solid var(--isp-root-line, #d8e2e3) !important;
    border-radius: var(--isp-root-radius-lg, 17px) !important;
    background: var(--isp-root-teal-soft, #eaf7f5) !important;
    text-align: center !important;
}
.isp-fixed-cta h2,
.isp-fixed-cta h3 { margin-top: 0 !important; }
.isp-fixed-cta p { color: var(--isp-root-muted, #687986) !important; }
.isp-fixed-cta a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 6px 4px 0 !important;
    padding: 10px 16px !important;
    border: 1px solid var(--isp-root-teal-dark, #00746f) !important;
    border-radius: var(--isp-root-radius-sm, 9px) !important;
    background: var(--isp-root-teal-dark, #00746f) !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

@media (max-width: 900px) {
    .isp-fixed-grid--3,
    .isp-fixed-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .isp-info-page--fixed .isp-info-content-card--fixed {
        padding: 22px 18px 24px !important;
        border-radius: 14px !important;
    }
    .isp-fixed-grid,
    .isp-fixed-grid--3,
    .isp-fixed-grid--4,
    .isp-fixed-stats { grid-template-columns: 1fr !important; }
    .isp-fixed-section {
        margin-top: 22px !important;
        padding-top: 22px !important;
    }
    .isp-fixed-card { padding: 16px !important; border-radius: 14px !important; }
    .isp-fixed-cta { padding: 18px !important; border-radius: 14px !important; }
}


/* ==========================================================================
   Patch 13.5.1 — Mobile /page/ structural title-order correction
   --------------------------------------------------------------------------
   The public hero is the single source of page identity at every width.
   Older mobile CSS allowed the legacy content heading to reappear below the
   hero, creating a second title card. Keep one hero and one content card.
   ========================================================================== */
.isp-info-page .isp-info-content-heading {
    display: none !important;
}

@media (max-width: 760px) {
    .isp-info-page .isp-info-hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 20px !important;
        align-items: stretch !important;
    }

    .isp-info-page .isp-info-hero-copy {
        min-width: 0;
        order: 1;
    }

    .isp-info-page .isp-info-trust {
        order: 2;
        margin-top: 0 !important;
    }
}