/* simsonic blend for the main /connectivity/ page (inc/simsonic-hero.php).
   Three pieces: the hand-off out of the black hero, the dark coverage band,
   and the "buy online" row. Hyper Logical keeps the page; magenta is used
   only where someone buys. Sub-pages are untouched. */

.sim-blend {
    --sb-magenta: #ff1fb0;
    --sb-ink-soft: #a79fbb;
    --sb-line: rgb(255 255 255 / 0.1);
}

/* ---------- Hand-off strip: black hero -> page ---------- */

.sim-handoff {
    background: #000;
    color: #fff;
    font-family: "Inter", Arial, sans-serif;
}

.sim-handoff__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 40px;
    padding: 26px 0 34px;
    border-top: 1px solid var(--sb-line);
}

.sim-handoff__fact {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.sim-handoff__fact b {
    font-size: clamp(20px, 1.7vw, 26px);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.sim-handoff__fact span { font-size: 13.5px; color: var(--sb-ink-soft); }

/* The simsonic logo stands in for the word wherever the name appears in copy */
.sim-logo-inline { display: inline-block; width: auto; height: 1.15em; vertical-align: -0.2em; }
/* Logo sits on the eyebrow's baseline (it has no descenders), sized to the caps */
.sim-buy__eyebrow:has(.sim-logo-inline) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.55em; }
.sim-buy__eyebrow .sim-logo-inline { height: 13px; vertical-align: baseline; }

/* ---------- Coverage band: stays dark, then lifts into the purple band ---------- */

/* The coverage map is black (templates/blocks/html-map-block/coverage-map.css) */
body:has(.sim-handoff) .html-map { background: #000; }

/* ---------- Buy row ---------- */

.sim-buy {
    padding: clamp(64px, 6vw, 104px) 0;
    background: #fff;
    font-family: "Inter", Arial, sans-serif;
    color: #150a33;
}

.sim-buy__eyebrow {
    margin: 0 0 14px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sb-magenta);
}

.sim-buy__title {
    margin: 0;
    max-width: 22ch;
    font-size: clamp(30px, 3vw, 46px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #150a33;
}

.sim-buy__lede {
    margin: 18px 0 clamp(32px, 3vw, 46px);
    max-width: 62ch;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.6;
    color: #5b4b7d;
}

.sim-buy__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.4vw, 24px);
}

.sim-plan {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: clamp(22px, 1.8vw, 30px);
    border: 1px solid #e7dcff;
    background: #faf7ff;
    border-radius: 4px;
    /* the site's own folded-corner card shape */
    clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 48px, 100% 100%, 0 100%);
}

.sim-plan__tag {
    align-self: flex-start;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgb(124 58 237 / 0.1);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #5a2ec0;
}

.sim-plan h3 {
    margin: 0;
    font-size: clamp(20px, 1.5vw, 24px);
    font-weight: 500;
    color: #150a33;
}

.sim-plan__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    font-size: clamp(24px, 2vw, 30px);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.sim-plan__price span { font-size: 13px; font-weight: 400; color: #6d5d8c; }

.sim-plan ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14.5px;
    color: #4b3b6e;
}

.sim-plan li { display: flex; gap: 10px; }
.sim-plan li::before { content: "\2713"; color: #7c3aed; }

.sim-plan__cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 24px;
    border-radius: 26px;
    background: var(--sb-magenta);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.sim-plan__cta:hover { background: #ff4ec4; transform: translateY(-1px); color: #fff; }
.sim-plan__note { font-size: 12.5px; color: #6d5d8c; text-align: center; }

/* ---------- simsonic sign-off: a dark companion card under the closing banner ---------- */

.sim-signoff {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 40px;
    margin-top: 16px;
    padding: clamp(26px, 2.6vw, 40px);
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 3.4rem;
    background: radial-gradient(90% 180% at 12% 50%, #3a0d33 0%, #0b090e 72%);
    font-family: "Inter", Arial, sans-serif;
    color: #fff;
}

.sim-signoff__brand { display: flex; flex-direction: column; gap: 6px; }
.sim-signoff__logo { display: block; width: 180px; height: auto; }
.sim-signoff__strap { font-size: calc(180px / 12.064); color: rgb(255 255 255 / 0.72); }
.sim-signoff p { margin: 0; flex: 1 1 320px; max-width: 48ch; font-size: 15px; line-height: 1.6; color: rgb(255 255 255 / 0.78); }

.sim-signoff__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 26px;
    border-radius: 26px;
    background: var(--sb-magenta);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.sim-signoff__cta:hover { background: #ff4ec4; color: #fff; transform: translateY(-1px); }

/* ---------- Responsive ---------- */

@media (max-width: 1023px) {
    .sim-buy__grid { grid-template-columns: 1fr; }
    .sim-plan { clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%); }
}

/* Hub hand-off on phones/small tablets: the four facts as a tidy 2x2 grid */
@media (max-width: 767px) {
    .sim-handoff__inner:has(.sim-handoff__fact) { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
    .sim-handoff__fact { flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; }
    .sim-handoff__fact b { white-space: nowrap; }
}

@media (max-width: 639px) {
    .sim-handoff__inner { gap: 14px 24px; padding: 20px 0 26px; }
    .sim-handoff__fact b { font-size: 19px; }
    .sim-signoff__logo { width: 150px; }
    .sim-signoff__strap { font-size: calc(150px / 12.064); }
}

/* ---------- Layout and density on the Connectivity pages ----------
   Two things the live page does that were asked to change:
   1. These rows are indented (lg:pl-1/6, lg:pr-1/12 + justify-end), which reads
      as off-centre. Cleared, so the cards sit square in the container. Swiper
      re-measures its slides on resize, so they widen to fill it.
   2. Sections ran ~790px of padding plus very tall cards, so one section was
      taller than a laptop screen. Tightened so each one lands in a screen. */

body:has(.sb) .double-cta .row.justify-end {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body:has(.sb) .double-cta .row.justify-end > .swiper {
    width: 100% !important;
    margin-right: 0 !important;
}

body:has(.sb) main > section:not(.sb) {
    padding-top: clamp(40px, 3.8vw, 62px) !important;
    padding-bottom: clamp(40px, 3.8vw, 62px) !important;
}

body:has(.sb) main > section .row.mb-lg { margin-bottom: clamp(22px, 2.2vw, 34px) !important; }

/* Card media: was up to 599px tall, which is what made it feel zoomed in */
body:has(.sb) .double-cta .card .contain { max-height: 260px; }
body:has(.sb) .double-cta .card.aspect-square { aspect-ratio: 16 / 10 !important; }

/* Long intro copy (Private 5G's three-point list) ran 640px down a half-width column */
@media (min-width: 1024px) {
    body:has(.sb) .double-cta .row.mb-sm > .lg\:w-1\/2:has(ul) { width: 80% !important; }
}

/* Headings a step down, so a section's title and its cards share the screen */
body:has(.sb) main > section:not(.sb) .text-60 { font-size: clamp(28px, 2.5vw, 40px) !important; }
body:has(.sb) main > section:not(.sb) .text-80 { font-size: clamp(32px, 3vw, 48px) !important; }

/* The core-network graphic in "Intelligent Connectivity" was a 689px square,
   which overpowered the copy beside it. */
body:has(.sb) .content-side-graphic figure.sized {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* =====================================================================
   Sub-pages (the 13 under /connectivity/)
   ===================================================================== */

/* Breadcrumb in the hand-off strip */
.sim-crumbs { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--sb-ink-soft); }
.sim-crumbs a { color: var(--sb-ink-soft); text-decoration: none; }
.sim-crumbs a:hover { color: #fff; }
.sim-crumbs [aria-current] { color: #fff; font-weight: 500; }

/* Buy strip before the FAQ */
.sim-strip { padding: clamp(40px, 4vw, 64px) 0 0; background: #fff; font-family: "Inter", Arial, sans-serif; }

.sim-strip__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 40px;
    padding: clamp(24px, 2.4vw, 34px);
    border: 1px solid #f4c2e6;
    border-radius: 22px;
    background: linear-gradient(100deg, #fff4fb 0%, #faf7ff 100%);
}

.sim-strip__text { flex: 1 1 520px; min-width: 0; }
.sim-strip__text .sim-buy__eyebrow { margin-bottom: 8px; }
/* Extra specificity: the theme sizes bare h2s much larger */
.sim-blend.sim-strip .sim-strip__text > h2 { margin: 0 0 6px; font-size: clamp(21px, 1.7vw, 26px); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: #150a33; }
.sim-strip p { margin: 0; max-width: 70ch; font-size: 15px; line-height: 1.55; color: #5b4b7d; }
.sim-strip__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.sim-strip__ctas .sim-plan__cta { margin-top: 0; }

.sim-strip__ghost {
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    padding: 0 26px;
    border: 1px solid #d8c7ff;
    border-radius: 26px;
    color: #150a33;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.sim-strip__ghost:hover { border-color: #7c3aed; color: #150a33; }

/* Compact related row (replaces the long closing tabs section) */
.sim-related { padding: clamp(44px, 4vw, 64px) 0; background: #0a0618; font-family: "Inter", Arial, sans-serif; }

.sim-related__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.sim-blend.sim-related .sim-related__head > h2 { margin: 0; font-size: clamp(22px, 2vw, 30px); font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; color: #fff; }
.sim-related__head a { font-size: 14px; color: #ad72ff; text-decoration: none; }

.sim-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }

.sim-related__tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
    min-height: 116px;
    padding: 18px;
    border: 1px solid rgb(255 255 255 / 0.12);
    border-radius: 16px;
    background: rgb(255 255 255 / 0.03);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.sim-related__tile span:first-child { font-size: 14px; color: #ad72ff; }
.sim-related__tile:hover { border-color: #ad72ff; background: rgb(124 58 237 / 0.14); color: #fff; }

/* Carousels become grids on desktop only when every card fits on one row (4 or fewer).
   Larger sets (hardware, industries) stay as carousels: as grids they ran 1,100px+.
   Phones always keep the swipeable carousel. pinned-cards is a scroll-pinned stack, left alone. */
@media (min-width: 1024px) {
    body:has(.sb) :is(.industry-carousel, .use-case-carousel) .swiper:not(:has(.swiper-slide:nth-child(5))) { overflow: visible !important; }

    body:has(.sb) :is(.industry-carousel, .use-case-carousel) .swiper-wrapper:not(:has(> .swiper-slide:nth-child(5))) {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
    }

    body:has(.sb) :is(.industry-carousel, .use-case-carousel) .swiper-wrapper:has(> .swiper-slide:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body:has(.sb) :is(.industry-carousel, .use-case-carousel) .swiper-wrapper:has(> .swiper-slide:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    body:has(.sb) :is(.industry-carousel, .use-case-carousel) .swiper-wrapper:not(:has(> .swiper-slide:nth-child(5))) > .swiper-slide { width: auto !important; height: auto !important; margin: 0 !important; }
    body:has(.sb) :is(.industry-carousel, .use-case-carousel) .swiper-slide-duplicate { display: none !important; }

    /* Grid cards: icon, title and text sit together instead of being pushed apart */
    body:has(.sb) .industry-carousel .swiper-wrapper:not(:has(> .swiper-slide:nth-child(5))) .box { padding: 26px !important; }
    body:has(.sb) .industry-carousel .swiper-wrapper:not(:has(> .swiper-slide:nth-child(5))) .box > .flex.flex-col { justify-content: flex-start !important; }
    body:has(.sb) .industry-carousel .swiper-wrapper:not(:has(> .swiper-slide:nth-child(5))) .box > .flex.flex-col > * + * { margin-top: 16px !important; }

    /* The theme's editorial indents read as off-centre: content sits square in the container */
    body:has(.sb) main > section .lg\:ml-1\/6,
    body:has(.sb) main > section .lg\:ml-1\/12 { margin-left: 0 !important; }
}

/* Product intro sections (content-product): a long, narrow text column next to a short
   image left a large empty block (e.g. LoRa "Low-Power IoT Connectivity Without Limits").
   Wider text so it runs shorter, a larger image, and the image stays beside the text. */
@media (min-width: 1024px) {
    body:has(.sb) .content-product > .container > .row { align-items: flex-start; }
    /* centred against the image when shorter; no effect when the text is the taller one */
    body:has(.sb) .content-product > .container > .row > .flex.flex-col { flex: 0 0 52%; width: 52% !important; align-self: center; }
    body:has(.sb) .content-product > .container > .row > div:not(.flex) {
        flex: 0 0 40%;
        width: 40% !important;
        position: sticky;
        top: 120px;
    }
}


/* ---------- Audit fixes (all 14 pages, 1512x950) ---------- */

/* Headings: the theme renders every heading in Inter 400, which reads thin at these sizes */
body:has(.sb) main > section :is(.section-title, .section-title h2, .section-title p, .text-60, .text-80) {
    font-weight: 600 !important;
    letter-spacing: -0.025em;
}

body:has(.sb) main > section :is(.title.text-28, .title.font-heading, dt span) {
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

@media (min-width: 1024px) {
    /* Empty spacer columns (230-275px of nothing) pushed headings in from the left */
    body:has(.sb) main > section .row > :is(.sm\:w-1\/6, .lg\:w-1\/6, .lg\:w-1\/5):not(:has(h1, h2, h3, p, img, figure, video, svg, a, button, li, picture)) {
        display: none !important;
    }

    /* Pinned card stacks: smaller image column, wider cards, no forced gap inside each card
       (NB-IoT went from 1,449px to 1,040px) */
    body:has(.sb) .pinned-cards .container > .row > .lg\:w-7\/12 { flex: 0 0 42%; width: 42% !important; }
    body:has(.sb) .pinned-cards figure.big { max-height: 520px !important; }
    body:has(.sb) .pinned-cards .card { justify-content: flex-start !important; gap: 14px; padding: 30px !important; }
    body:has(.sb) .pinned-cards .card .content.mt-xl { margin-top: 16px !important; }

    /* Closing banner: title on the left, text and buttons on the right, so the box is about
       half the height it was stacked (P5G "Deploy Private 5G FWA" ran 559px tall) */
    body:has(.sb) .banner-box .box { padding: 40px 44px !important; }
    body:has(.sb) .banner-box .inner.space-y-2xl { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: start; }
    body:has(.sb) .banner-box .inner.space-y-2xl > * { margin-top: 0 !important; width: auto !important; }
    body:has(.sb) .banner-box .bottom .content { width: auto !important; }
    body:has(.sb) .banner-box .bottom > * + * { margin-top: 24px !important; }
    body:has(.sb) .banner-box .graphic { opacity: 0.35; }  /* the globe now sits behind the text */

    /* Side-graphic sections: the copy column was padded down to 432px wide and ran 970px tall */
    body:has(.sb) .content-side-graphic .row > .lg\:flex-1.lg\:px-1\/12 { padding: 0 0 0 4% !important; }

    /* Contact banner (HBWA): its full-width illustration ran 820px tall */
    body:has(.sb) .contact-cta .-mt-\[20\%\] img { display: block; width: auto; max-height: 600px; margin: 0 auto; }

    /* Card rows indented to the right (lg:pl-1/6, lg:w-5/6 + justify-end) start under the
       heading's column instead of the container edge: they sit square in the container */
    body:has(.sb) main > section:not(.double-cta) .row.justify-end { justify-content: flex-start !important; padding-left: 0 !important; padding-right: 0 !important; }
    body:has(.sb) main > section:not(.double-cta) .row.justify-end > :is(.lg\:w-5\/6, .swiper) { width: 100% !important; flex: 0 0 100%; }

    /* "Eyebrow | title | intro" heading rows: a long intro in a 1/5 or 1/3 column ran
       25+ lines down a narrow strip (LoRa "Deploy LoRa With Confidence"). Eyebrow goes on
       top, title and intro split the row. */
    body:has(.sb) main > section .row:has(> .sm\:w-1\/6 + .lg\:flex-1 + :is(.lg\:w-1\/5, .lg\:w-1\/3)) { flex-wrap: wrap; column-gap: 4%; }
    body:has(.sb) main > section .row:has(> .sm\:w-1\/6 + .lg\:flex-1 + :is(.lg\:w-1\/5, .lg\:w-1\/3)) > .sm\:w-1\/6 { flex: 0 0 100%; width: 100% !important; margin-bottom: 14px; }
    body:has(.sb) main > section .row:has(> .sm\:w-1\/6 + .lg\:flex-1 + :is(.lg\:w-1\/5, .lg\:w-1\/3)) > :is(.lg\:w-1\/5, .lg\:w-1\/3) { flex: 0 0 46%; width: 46% !important; }

    /* Side-graphic illustrations in the 7/12 column ran 870px tall */
    body:has(.sb) .content-side-graphic .row > .lg\:w-7\/12 figure img { display: block; width: auto; max-width: 100%; max-height: 540px; margin: 0 auto; }

    /* Use-case carousels: the empty 1/5 column beside the heading */
    body:has(.sb) .use-case-carousel .lg\:w-1\/5:not(:has(h1, h2, h3, p, img, figure, video, svg, a, button, li, picture)) { display: none !important; }
}

/* Sub-pages: one closing banner. Pages with two (one mid-page, one after the FAQ) keep the last. */
body:has(.sim-crumbs) main > section.banner-box:has(~ section.banner-box) { display: none !important; }


/* =====================================================================
   Dark theme: all 14 Connectivity pages sit on black, like simsonic.
   The theme's sections are transparent over a white page with inherited
   #1e0850 text, so most of this is the page colour; the rest re-colours the
   few light surfaces (cards, figures, the buy row and strip, the FAQ).
   To go back to light, delete this block.
   ===================================================================== */

body:has(.sb),
body:has(.sb) main { background: #000; color: #fff; }

/* Body copy a step softer than headings */
body:has(.sb) main > section:not(.sb) :is(p, li, dd) { color: #c9c1db; }
body:has(.sb) main > section:not(.sb) :is(h1, h2, h3, h4, h5, h6, dt, strong, b) { color: #fff; }

/* White cards (industry/use-case carousels, content boxes) */
body:has(.sb) main > section .box:is(.bg-white, .border-purple-light),
body:has(.sb) main > section a.box.border {
    background: #0f0b19 !important;
    border-color: rgb(255 255 255 / 0.1) !important;
}

body:has(.sb) main > section a.box.border:hover { border-color: #a66bff; }

/* Pale lilac image panels */
body:has(.sb) main > section .bg-purple-palest,
body:has(.sb) main > section .bg-purple-pale { background-color: #120c22; }

/* FAQ */
body:has(.sb) .accordion-list :is(span, button) { color: #fff; }
body:has(.sb) .accordion-list :is(dt, .item, li) { border-color: rgb(255 255 255 / 0.12); }

/* Buy row (hub) and buy strip (sub-pages) */
body:has(.sb) .sim-buy,
body:has(.sb) .sim-strip { background: #000; color: #fff; }
body:has(.sb) .sim-buy__title,
body:has(.sb) .sim-blend.sim-strip .sim-strip__text > h2 { color: #fff; }
body:has(.sb) :is(.sim-buy__lede, .sim-strip p) { color: #c9c1db; }
body:has(.sb) .sim-strip__inner {
    border-color: rgb(255 31 176 / 0.35);
    background: linear-gradient(100deg, rgb(255 31 176 / 0.1) 0%, rgb(124 58 237 / 0.12) 100%), #0a0614;
}
body:has(.sb) .sim-strip__ghost { border-color: rgb(255 255 255 / 0.25); color: #fff; }
body:has(.sb) .sim-strip__ghost:hover { border-color: #ff1fb0; color: #fff; }
body:has(.sb) .sim-plan { border-color: rgb(255 255 255 / 0.1); background: #0f0b19; }
body:has(.sb) .sim-plan__tag { background: rgb(166 107 255 / 0.16); color: #d4bcff; }
body:has(.sb) .sim-plan h3 { color: #fff; }
body:has(.sb) :is(.sim-plan__price span, .sim-plan__note) { color: #a79fbb; }
body:has(.sb) .sim-plan ul,
body:has(.sb) main > section .sim-plan li { color: #c9c1db; }
body:has(.sb) .sim-plan li::before { color: #a66bff; }

/* Purple-edged cards and image panels paint their lilac fill on ::before */
body:has(.sb) main .card::before { background-color: #0f0b19 !important; }
body:has(.sb) main figure:is(.product, .contain)::before { background-color: #120c22 !important; }

/* Headings are often <p>s inside a title wrapper: keep them white, not body grey */
body:has(.sb) main > section :is(.section-title, .title, .text-60, .text-80) :is(p, span) { color: #fff; }

/* FAQ questions (the theme sets a near-black colour on the span) */
body:has(.sb) .accordion-list dt span { color: #fff !important; }

/* Copy on purple surfaces (closing banner, purple cards) stays near-white */
body:has(.sb) main > section :is(.banner-box .box, [class*="bg-purple-light"], [class*="bg-gradient"]) :is(p, li) { color: rgb(255 255 255 / 0.88); }

/* Sections that fade purple -> white fade into the black instead */
body:has(.sb) main > section[class*="to-white"] {
    background-image: radial-gradient(ellipse 55% 42% at 50% 55%, rgb(124 58 237 / 0.2), transparent 70%), linear-gradient(180deg, #000, #05030a);
}

/* Starlink satellite pop-ups (white captions) go dark to match */
body:has(.sb) main > section figcaption.bg-white { background: #120c22; border: 1px solid rgb(255 255 255 / 0.12); }
body:has(.sb) main > section figcaption.bg-white .text-24 { color: #fff; }

/* The space the footer reveals from (white by default) */
body:has(.sb) .footer-fullscreen { background: #000; }

/* The theme pins purple glow balls to a section's top/bottom edge, half outside it, so the
   section cuts them in half. One soft glow per section instead, fading out before any edge. */
body:has(.sb) main > section:is(.big-button-list, .content-big-image, .content-image-dark, .content-side-graphic, .cost-cards, .double-content-box, .double-cta, .general-content, .accordion-icons, .hover-tabs, .pinned-cards, .satellites, .tabbed-images, .testimonials-carousel, .contact-form, .content-centered-icon)::before {
    inset: 12% 15% !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    transform: none !important;
    background: radial-gradient(closest-side, rgb(140 51 255 / 0.3), rgb(140 51 255 / 0)) !important;
    opacity: 1 !important;
    pointer-events: none;
}

body:has(.sb) main > section:is(.big-button-list, .content-big-image, .content-image-dark, .content-side-graphic, .cost-cards, .double-content-box, .double-cta, .general-content, .accordion-icons, .hover-tabs, .pinned-cards, .satellites, .tabbed-images, .testimonials-carousel, .contact-form, .content-centered-icon)::after { display: none !important; }

/* Image panels: the same near-black as the dark images, so they sit flush instead of
   showing as a dark square inside a lighter box (hardware cards) */
body:has(.sb) main figure:is(.contain, .product)::before { background-color: #07040f !important; }

/* Wrappers that fade white -> lilac -> purple (Remote Location "Reliable Connectivity") */
body:has(.sb) main > section [class*="from-white"] {
    background-image: radial-gradient(ellipse 55% 42% at 50% 55%, rgb(124 58 237 / 0.2), transparent 70%), linear-gradient(180deg, #000, #05030a) !important;
}

/* USP band (Automated Failover "Just in Time Delivery"): dark section, glass cards with a
   purple edge, instead of a bright purple band across the black page */
body:has(.sb) main > section.usp-carousel { background: #000 !important; }
body:has(.sb) main > section.usp-carousel .box {
    border: 1px solid rgb(166 107 255 / 0.35);
    background: linear-gradient(145deg, rgb(124 58 237 / 0.28), rgb(124 58 237 / 0.08)) !important;
}
body:has(.sb) main > section.usp-carousel .box:hover { border-color: #a66bff; }

/* Side-graphic illustrations are drawn on a dark tile that is a shade off the section's
   gradient, so their square edge showed. Feather the edges so they melt into the section. */
body:has(.sb) main > section.content-side-graphic figure img {
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%);
}

/* One background for every section on the Connectivity pages. The theme gave sections their
   own fills (purple-dark fades, purple bands, glows), which on the dark pages read as three or
   four different backgrounds stacked up. Sections are flat black; cards, banners and image
   panels keep their own surfaces, so the content carries the colour. */
body:has(.sb) main > section:not(.sb) { background: #000 !important; }
body:has(.sb) main > section:not(.sb)::before,
body:has(.sb) main > section:not(.sb)::after { display: none !important; }
body:has(.sb) main > section [class*="from-white"] { background: none !important; }

/* One size system for every section on the Connectivity pages (9 Oct 2026).
   The theme's sections stretched to ~90% of any screen and spaced themselves by screen width,
   so on large and ultrawide screens they (and the coverage map) grew far bigger than the
   Simsonic sections. Here every section shares:
   - one content width: 1312px on a laptop, scaled by --sim-z (css/simsonic-hero.css) on big
     screens, never wider than the window minus a gutter;
   - one section spacing: 72px top and bottom, scaled the same way, with no extra margins.
   The Simsonic sections (.sb, .p5g, .sim-*) are already zoomed by --sim-z, so they use the
   same values before zoom. Scoped to these pages for now; can be rolled out site-wide later. */
body:has(.sb) main > section:not(.sb):not(.sim-strip):not(.sim-related):not(.sim-signoff) > .container,
body:has(.sb) main > section:not(.sb):not(.sim-strip):not(.sim-related):not(.sim-signoff) > div > .container {
    width: min(calc(1312px * var(--sim-z, 1) * var(--sim-wide, 1)), 100% - 32px) !important;
    max-width: none !important;
    margin-inline: auto !important;
}
body:has(.sb) main > section:not(.sb):not(.sim-strip):not(.sim-related):not(.sim-signoff) {
    padding-block: calc(72px * var(--sim-z, 1)) !important;
    margin-block: 0 !important;
}
body:has(.sb) main > :is(.sim-strip, .sim-related, .sim-signoff) { padding-block: 72px !important; margin-block: 0 !important; }
/* the breadcrumb strip and the zoomed Simsonic strips: the same 1312px content width (zoom scales it) */
body:has(.sb) :is(.sim-handoff, .sim-strip, .sim-related, .sim-signoff) .container {
    width: min(calc(1312px * var(--sim-wide, 1)), 100% - 32px) !important;
    max-width: none !important;
    margin-inline: auto !important;
}
/* the coverage map keeps its shape as it widens; never taller than the window (it fits inside) */
@media (min-width: 1800px) { body:has(.sb) .cmap__svg { max-height: calc(100vh - 460px); } }