/* =========================================================
   IndoSurgicals Flagship Clinical Product Standard — FCP v1.0
   Shared, scoped product-description CSS for diagnostic instruments.
   ========================================================= */

.is-flagship,
.is-flagship * {
    box-sizing: border-box;
}

.is-flagship {
    --is-ink: #16324a;
    --is-text: #40566a;
    --is-muted: #6d8091;
    --is-teal: #009b95;
    --is-teal-dark: #08746f;
    --is-teal-soft: #eef9f8;
    --is-blue-soft: #f4f8fb;
    --is-line: #d8e4ea;
    --is-white: #ffffff;
    --is-shadow: 0 10px 28px rgba(22, 50, 74, 0.07);

    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--is-text);
    font-family: "Poppins", Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.72;
}

.is-flagship h2,
.is-flagship h3,
.is-flagship p,
.is-flagship ul,
.is-flagship table,
.is-flagship figure {
    margin-top: 0;
}

.is-flagship h2,
.is-flagship h3 {
    color: var(--is-ink);
    font-family: "Poppins", Arial, Helvetica, sans-serif;
    font-weight: 800;
}

.is-flagship h2 {
    margin-bottom: 12px;
    font-size: clamp(24px, 2.4vw, 30px);
    line-height: 1.25;
}

.is-flagship h3 {
    margin-bottom: 7px;
    font-size: 15px;
    line-height: 1.4;
}

.is-flagship p {
    margin-bottom: 13px;
}

.is-flagship p:last-child {
    margin-bottom: 0;
}

.is-flagship a {
    color: var(--is-teal-dark);
}

.is-flagship strong {
    color: var(--is-ink);
}

/* HERO */
.is-flagship__hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
    gap: 22px;
    align-items: center;
    margin: 0 0 22px;
    padding: clamp(24px, 4vw, 40px);
    overflow: hidden;
    background:
        radial-gradient(circle at 95% 0%, rgba(0, 155, 149, 0.14), transparent 32%),
        linear-gradient(135deg, #f2fbfa 0%, #ffffff 57%, #f5f9fc 100%);
    border: 1px solid #cfe5e3;
    border-radius: 17px;
    box-shadow: var(--is-shadow);
}

.is-flagship__hero-copy,
.is-flagship__hero-panel {
    min-width: 0;
}

.is-flagship__eyebrow,
.is-flagship__section-label {
    display: inline-block;
    margin-bottom: 9px;
    color: var(--is-teal-dark);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.is-flagship__hero h2 {
    max-width: 760px;
    margin-bottom: 12px;
    font-size: clamp(27px, 3.4vw, 38px);
    line-height: 1.16;
    letter-spacing: -0.03em;
}

.is-flagship__lead {
    max-width: 790px;
    margin-bottom: 17px;
    color: var(--is-text);
    font-size: 15px;
    line-height: 1.72;
}

.is-flagship__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.is-flagship__chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px;
    color: #155d59;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #cde2e0;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

.is-flagship__hero-panel {
    padding: 21px 19px;
    color: #edf9f8;
    background: linear-gradient(145deg, #17364d 0%, #174e5a 58%, #08746f 100%);
    border-radius: 15px;
    box-shadow: 0 14px 30px rgba(22, 50, 74, 0.16);
}

.is-flagship__hero-panel h3 {
    margin-bottom: 12px;
    color: #ffffff;
    font-size: 17px;
}

.is-flagship__hero-panel ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.is-flagship__hero-panel li {
    position: relative;
    margin: 0;
    padding: 8px 9px 8px 34px;
    color: #eef9f8;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    font-size: 12.5px;
    line-height: 1.45;
}

.is-flagship__hero-panel li::before {
    position: absolute;
    top: 8px;
    left: 9px;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    content: "✓";
    color: var(--is-teal-dark);
    background: #ffffff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 900;
}

/* SECTION */
.is-flagship__section {
    margin: 0 0 22px;
    padding: clamp(20px, 3vw, 30px);
    background: var(--is-white);
    border: 1px solid var(--is-line);
    border-radius: 17px;
    box-shadow: var(--is-shadow);
}

.is-flagship__section-head {
    margin-bottom: 16px;
}

.is-flagship__section-head p {
    max-width: 860px;
    margin-bottom: 0;
    color: var(--is-muted);
}

/* FEATURE GRID */
.is-flagship__feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.is-flagship__feature {
    position: relative;
    min-width: 0;
    padding: 17px 16px 16px 45px;
    background: var(--is-blue-soft);
    border: 1px solid var(--is-line);
    border-radius: 13px;
}

.is-flagship__feature::before {
    position: absolute;
    top: 16px;
    left: 15px;
    display: grid;
    width: 21px;
    height: 21px;
    place-items: center;
    content: "✓";
    color: #ffffff;
    background: var(--is-teal);
    border-radius: 7px;
    font-size: 11px;
    font-weight: 900;
}

.is-flagship__feature p {
    color: var(--is-muted);
    font-size: 13px;
    line-height: 1.6;
}

/* TWO COLUMN */
.is-flagship__split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.is-flagship__info-card {
    min-width: 0;
    padding: 19px;
    background: linear-gradient(145deg, #ffffff, #f7fafc);
    border: 1px solid var(--is-line);
    border-radius: 14px;
}

.is-flagship__info-card p {
    color: var(--is-muted);
}

/* VIDEO */
.is-flagship__video-frame {
    width: min(100%, 900px);
    margin: 0 auto;
    padding: 8px;
    background: #ffffff;
    border: 1px solid var(--is-line);
    border-radius: 16px;
    box-shadow: var(--is-shadow);
}

.is-flagship__video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #102235;
    border-radius: 11px;
}

.is-flagship__video iframe,
.is-flagship__video video {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* TABLES */
.is-flagship__table-wrap {
    width: 100%;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--is-line);
    border-radius: 14px;
}

.is-flagship table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.is-flagship th,
.is-flagship td {
    padding: 11px 13px;
    border: 0;
    border-bottom: 1px solid var(--is-line);
    font-size: 12.5px;
    line-height: 1.55;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
    word-break: normal;
}

.is-flagship tbody th {
    width: 31%;
    color: var(--is-ink);
    background: #eef6f7;
    font-weight: 800;
}

.is-flagship td {
    color: var(--is-text);
    background: #ffffff;
}

.is-flagship thead th {
    color: #ffffff;
    background: var(--is-ink);
    font-weight: 800;
}

.is-flagship tr:last-child th,
.is-flagship tr:last-child td {
    border-bottom: 0;
}

.is-flagship__swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 7px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 50%;
    vertical-align: -1px;
}

/* NOTE */
.is-flagship__note {
    margin-top: 14px;
    padding: 14px 15px;
    color: #315a5c;
    background: var(--is-teal-soft);
    border: 1px solid #cbe5e2;
    border-radius: 11px;
    font-size: 12.5px;
}

/* FAQ */
.is-flagship__faq {
    display: grid;
    gap: 8px;
}

.is-flagship__faq details {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--is-line);
    border-radius: 11px;
}

.is-flagship__faq summary {
    position: relative;
    display: block;
    padding: 13px 42px 13px 15px;
    color: var(--is-ink);
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
    list-style: none;
}

.is-flagship__faq summary::-webkit-details-marker {
    display: none;
}

.is-flagship__faq summary::after {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    content: "+";
    color: var(--is-teal-dark);
    font-size: 20px;
    font-weight: 500;
}

.is-flagship__faq details[open] summary::after {
    content: "−";
}

.is-flagship__faq-answer {
    padding: 0 15px 14px;
    color: var(--is-muted);
    font-size: 12.8px;
    line-height: 1.65;
}

/* ONLINE PURCHASE */
.is-flagship__buy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: clamp(20px, 3vw, 27px);
    background: linear-gradient(135deg, #eef9f8, #ffffff 65%);
    border: 1px solid #cce4e2;
    border-radius: 17px;
    box-shadow: var(--is-shadow);
}

.is-flagship__buy h2 {
    margin-bottom: 5px;
    font-size: 21px;
}

.is-flagship__buy p {
    margin-bottom: 0;
    color: var(--is-muted);
    font-size: 12.8px;
}

.is-flagship__buy-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.is-flagship__button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    color: #ffffff !important;
    background: var(--is-teal);
    border: 1px solid var(--is-teal);
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.is-flagship__button--secondary {
    color: var(--is-ink) !important;
    background: #ffffff;
    border-color: #c8d8df;
}

.is-flagship__button:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 17px rgba(22, 50, 74, 0.12);
}

/* RESPONSIVE */
@media (max-width: 980px) {
    .is-flagship__hero {
        grid-template-columns: 1fr;
    }

    .is-flagship__feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .is-flagship {
        font-size: 14px;
    }

    .is-flagship__hero,
    .is-flagship__section,
    .is-flagship__buy {
        border-radius: 13px;
    }

    .is-flagship__hero {
        padding: 20px 16px;
    }

    .is-flagship__section {
        padding: 18px 16px;
    }

    .is-flagship__split {
        grid-template-columns: 1fr;
    }

    .is-flagship__buy {
        grid-template-columns: 1fr;
    }

    .is-flagship__buy-buttons {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .is-flagship__feature-grid {
        grid-template-columns: 1fr;
    }

    .is-flagship__chips {
        display: grid;
        grid-template-columns: 1fr;
    }

    .is-flagship__chip {
        width: 100%;
    }

    .is-flagship__video-frame {
        padding: 5px;
        border-radius: 12px;
    }

    .is-flagship__video {
        border-radius: 8px;
    }

    .is-flagship__table-wrap {
        border-radius: 11px;
    }

    .is-flagship table {
        table-layout: fixed;
    }

    .is-flagship tbody th {
        width: 38%;
    }

    .is-flagship th,
    .is-flagship td {
        padding: 9px 8px;
        font-size: 11.5px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    .is-flagship__buy-buttons {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .is-flagship__button {
        width: 100%;
    }
}

/* =========================================================
   Responsive density refinement v2
   Desktop >= 821px is intentionally unchanged.
   ========================================================= */

.is-flagship__section > ul {
    margin: 0;
    padding-left: 21px;
}

.is-flagship__section > ul li {
    margin-bottom: 6px;
    padding-left: 2px;
}

.is-flagship__section > ul li:last-child {
    margin-bottom: 0;
}

.is-flagship table {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.is-flagship__variant-table th:first-child,
.is-flagship__variant-table td:first-child {
    width: 31%;
}

@media (max-width: 820px) {
    .is-flagship__hero,
    .is-flagship__section,
    .is-flagship__buy {
        margin-bottom: 16px;
    }

    .is-flagship__hero {
        gap: 16px;
        padding: 18px 14px;
    }

    .is-flagship__section {
        padding: 16px 13px;
    }

    .is-flagship__buy {
        padding: 17px 13px;
    }

    .is-flagship__section-head {
        margin-bottom: 13px;
    }

    .is-flagship h2 {
        font-size: 22px;
        line-height: 1.28;
    }

    .is-flagship__hero h2 {
        font-size: 27px;
    }

    .is-flagship__feature-grid {
        gap: 9px;
    }

    .is-flagship__feature,
    .is-flagship__info-card {
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .is-flagship__note {
        margin-top: 11px;
        padding: 11px 12px;
    }

    .is-flagship th,
    .is-flagship td {
        padding: 9px 9px;
    }
}

@media (max-width: 560px) {
    .is-flagship {
        font-size: 13.5px;
        line-height: 1.62;
    }

    .is-flagship__hero,
    .is-flagship__section,
    .is-flagship__buy {
        margin-bottom: 12px;
        border-radius: 11px;
        box-shadow: 0 5px 14px rgba(22, 50, 74, 0.045);
    }

    .is-flagship__hero {
        gap: 12px;
        padding: 15px 10px;
    }

    .is-flagship__section {
        padding: 13px 8px;
    }

    .is-flagship__buy {
        gap: 12px;
        padding: 14px 10px;
    }

    .is-flagship__section-head {
        margin-bottom: 10px;
    }

    .is-flagship__section-label,
    .is-flagship__eyebrow {
        margin-bottom: 6px;
        font-size: 10px;
    }

    .is-flagship h2 {
        margin-bottom: 8px;
        font-size: 20.5px;
        line-height: 1.25;
    }

    .is-flagship__hero h2 {
        font-size: 25px;
        line-height: 1.18;
    }

    .is-flagship h3 {
        margin-bottom: 5px;
        font-size: 14px;
    }

    .is-flagship p {
        margin-bottom: 10px;
    }

    .is-flagship__lead {
        margin-bottom: 12px;
        font-size: 13.5px;
        line-height: 1.62;
    }

    .is-flagship__hero-panel {
        padding: 14px 11px;
        border-radius: 11px;
    }

    .is-flagship__hero-panel li {
        padding: 7px 7px 7px 31px;
        font-size: 12px;
    }

    .is-flagship__feature-grid,
    .is-flagship__split,
    .is-flagship__faq {
        gap: 7px;
    }

    .is-flagship__feature {
        padding: 12px 9px 12px 36px;
        border-radius: 9px;
    }

    .is-flagship__feature::before {
        top: 12px;
        left: 9px;
        width: 19px;
        height: 19px;
    }

    .is-flagship__feature p {
        font-size: 12.5px;
        line-height: 1.55;
    }

    .is-flagship__info-card {
        padding: 12px 10px;
        border-radius: 9px;
    }

    .is-flagship__section > ul {
        margin: 0;
        padding-left: 18px;
    }

    .is-flagship__section > ul li {
        margin-bottom: 5px;
        padding-left: 0;
    }

    .is-flagship__table-wrap {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        border-radius: 9px;
    }

    .is-flagship table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
    }

    .is-flagship tbody th {
        width: 36%;
    }

    .is-flagship th,
    .is-flagship td {
        padding: 7px 6px;
        font-size: 11px;
        line-height: 1.45;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .is-flagship__variant-table th:first-child,
    .is-flagship__variant-table td:first-child {
        width: 34%;
    }

    .is-flagship__swatch {
        width: 10px;
        height: 10px;
        margin-right: 5px;
    }

    .is-flagship__note {
        margin-top: 9px;
        padding: 10px 9px;
        border-radius: 8px;
        font-size: 11.5px;
        line-height: 1.55;
    }

    .is-flagship__video-frame {
        width: 100%;
        padding: 3px;
        border-radius: 9px;
    }

    .is-flagship__video {
        border-radius: 6px;
    }

    .is-flagship__faq summary {
        padding: 11px 34px 11px 10px;
        font-size: 12.5px;
    }

    .is-flagship__faq summary::after {
        right: 10px;
    }

    .is-flagship__faq-answer {
        padding: 0 10px 11px;
        font-size: 12px;
    }

    .is-flagship__buy h2 {
        font-size: 19px;
    }

    .is-flagship__buy p {
        font-size: 12px;
    }
}


/* =========================================================
   Mobile table text-wrap correction v3
   Prevents global/legacy nowrap rules from clipping cells.
   ========================================================= */

.is-flagship .is-flagship__table-wrap table,
.is-flagship .is-flagship__table-wrap tbody,
.is-flagship .is-flagship__table-wrap thead,
.is-flagship .is-flagship__table-wrap tr,
.is-flagship .is-flagship__table-wrap th,
.is-flagship .is-flagship__table-wrap td {
    white-space: normal !important;
}

.is-flagship .is-flagship__table-wrap th,
.is-flagship .is-flagship__table-wrap td {
    width: auto;
    max-width: none !important;
    height: auto !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
    word-break: normal !important;
    hyphens: auto;
}

@media (max-width: 560px) {
    .is-flagship .is-flagship__table-wrap {
        overflow: visible !important;
    }

    .is-flagship .is-flagship__table-wrap table {
        display: table !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }

    .is-flagship .is-flagship__table-wrap tbody th {
        width: 37% !important;
    }

    .is-flagship .is-flagship__table-wrap th,
    .is-flagship .is-flagship__table-wrap td {
        padding: 7px 6px !important;
        font-size: 10.8px !important;
        line-height: 1.42 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        vertical-align: top !important;
    }

    .is-flagship .is-flagship__variant-table th:first-child,
    .is-flagship .is-flagship__variant-table td:first-child {
        width: 34% !important;
    }
}


/* =========================================================
   Responsive outer-gutter refinement v4
   Desktop keeps the normal product-page gutter.
   Tablet/mobile reclaim part of the parent content padding.
   ========================================================= */

@media (max-width: 820px) {
    .is-flagship {
        width: auto !important;
        max-width: none !important;
        margin-left: -4px !important;
        margin-right: -4px !important;
    }
}

@media (max-width: 560px) {
    .is-flagship {
        width: auto !important;
        max-width: none !important;
        margin-left: -8px !important;
        margin-right: -8px !important;
    }
}


/* =========================================================
   Responsive table column proportions v5
   Restores intentional desktop/tablet widths after the
   text-wrap safety rules.
   ========================================================= */

@media (min-width: 821px) {
    .is-flagship .is-flagship__table-wrap tbody th {
        width: 29% !important;
    }

    .is-flagship .is-flagship__table-wrap tbody td {
        width: 71% !important;
    }

    .is-flagship .is-flagship__variant-table th:first-child,
    .is-flagship .is-flagship__variant-table td:first-child {
        width: 24% !important;
    }

    .is-flagship .is-flagship__variant-table th:nth-child(2),
    .is-flagship .is-flagship__variant-table td:nth-child(2) {
        width: 76% !important;
    }
}

@media (min-width: 561px) and (max-width: 820px) {
    .is-flagship .is-flagship__table-wrap tbody th {
        width: 34% !important;
    }

    .is-flagship .is-flagship__table-wrap tbody td {
        width: 66% !important;
    }

    .is-flagship .is-flagship__variant-table th:first-child,
    .is-flagship .is-flagship__variant-table td:first-child {
        width: 30% !important;
    }

    .is-flagship .is-flagship__variant-table th:nth-child(2),
    .is-flagship .is-flagship__variant-table td:nth-child(2) {
        width: 70% !important;
    }
}

/* FCP v1.0 procurement close: the functional quote form remains the
   canonical transaction control in the product shell; this link gives long
   descriptions a matching, keyboard-accessible return to that form. */
.is-flagship__cta-section {
    background:
        radial-gradient(circle at 96% 8%, rgba(0, 155, 149, 0.13), transparent 31%),
        linear-gradient(135deg, #f4fbfa 0%, #ffffff 62%, #eef7f6 100%);
}

.is-flagship__cta-copy {
    max-width: 760px;
}

.is-flagship__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 6px;
    padding: 10px 17px;
    border: 1px solid #009b95;
    border-radius: 9px;
    background: #009b95;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none !important;
    box-shadow: 0 7px 18px rgba(0, 143, 135, 0.16);
}

.is-flagship__cta:hover,
.is-flagship__cta:focus {
    border-color: #08746f;
    background: #08746f;
    color: #ffffff !important;
    outline: none;
}

/* =========================================================
   FCP v1.0 Highlight Rail — below-hero correction v1.0.1
   The accepted Silvery II-SS composition keeps the hero copy first,
   then presents Product Highlights as a full-width dark rail below it.
   The higher-specificity selectors intentionally win over legacy
   description-level inline FCP CSS still present on some live records.
   ========================================================= */

.is-flagship .is-flagship__hero {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
}

.is-flagship .is-flagship__hero-copy,
.is-flagship .is-flagship__hero-panel {
    width: 100% !important;
}

.is-flagship .is-flagship__hero-panel ul {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.is-flagship .is-flagship__hero-panel li {
    display: flex !important;
    min-height: 86px !important;
    align-items: center !important;
    padding: 15px 14px 15px 46px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

.is-flagship .is-flagship__hero-panel li::before {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

@media (max-width: 1199px) {
    .is-flagship .is-flagship__hero-panel ul {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .is-flagship .is-flagship__hero-panel ul {
        grid-template-columns: 1fr !important;
    }

    .is-flagship .is-flagship__hero-panel li {
        min-height: 0 !important;
        padding: 11px 10px 11px 38px !important;
        font-size: 12.5px !important;
    }
}