/* Pricing page (/pricing/) in the Simsonic black style, like the Connectivity pages (15 Oct 2026).
   Same surfaces as the dark theme in css/simsonic-connectivity.css, scoped to body.pricing
   (that page has no Simsonic hero, so body:has(.sb) never matches it).
   Loaded only on that page (cbd_simsonic_pricing_assets in inc/simsonic-hero.php).
   To go back to the purple page, stop loading this file. */

body.pricing,
body.pricing main { background: #000; color: #fff; }

/* One flat black background for every section; cards and banners keep their own surfaces */
body.pricing main > section { background: #000 !important; }
body.pricing main > section::before,
body.pricing main > section::after { display: none !important; }
body.pricing main > section [class*="from-white"] { background: none !important; }

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

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

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

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

/* Pale lilac panels, and the lilac fills cards and image panels paint on ::before */
body.pricing main > section :is(.bg-purple-palest, .bg-purple-pale) { background-color: #120c22; }
body.pricing main .card::before { background-color: #0f0b19 !important; }
body.pricing main figure:is(.contain, .product)::before { background-color: #07040f !important; }

/* Platform features band ("03. Choose Your HYPER Platform Features"): glass cards, not a purple band */
body.pricing 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.pricing main > section.usp-carousel .box:hover { border-color: #a66bff; }

/* Side-graphic illustrations: feather the square edge of their dark tile into the black */
body.pricing 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%);
}

/* "Configure Your Hyper Service" form: the fields had dark purple text on the black */
body.pricing main :is(select, input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), textarea) {
    color: #fff !important;
    background-color: #0f0b19 !important;
    border-color: rgb(255 255 255 / 0.18) !important;
}
body.pricing main :is(select, input, textarea):focus { border-color: #a66bff !important; outline: none; }
body.pricing main :is(input, textarea)::placeholder { color: #8a8194; }
body.pricing main select option { background: #0f0b19; color: #fff; }

/* Data plans list (FAQ-style accordion) */
body.pricing .accordion-list :is(span, button) { color: #fff; }
body.pricing .accordion-list dt span { color: #fff !important; }
body.pricing .accordion-list :is(dt, .item, li) { border-color: rgb(255 255 255 / 0.12); }

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

/* ---------- "Build Wholesale Grade Plans" (15 Oct 2026): Travel, Business and IoT tiles
   (markup from cbd_simsonic_pricing_plans in inc/simsonic-hero.php), styled like the hero's
   bento tiles. IoT, the wholesale core, gets the wider tile and lists its plan types. ---------- */
body.pricing .pt-plans { --pt-tile: #0b090e; --pt-line: #1f1b24; --pt-pink: #ff3fd8; padding: 72px 0; color: #fff; }
.pt-plans__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; margin-bottom: 32px; }
body.pricing .pt-plans__head h2 { margin: 0; font-family: 'Sora', sans-serif; font-weight: 600; font-size: clamp(34px, 3.4vw, 52px); line-height: 1.05; letter-spacing: -0.035em; color: #fff; }
body.pricing .pt-plans__head p { margin: 0; max-width: 420px; padding-bottom: 6px; font-size: 16px; line-height: 1.5; color: #c9c3d3; }

.pt-plans__grid { display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 12px; }
.pt-plan {
    display: flex; flex-direction: column; padding: 28px; border-radius: 20px;
    background: var(--pt-tile); border: 1px solid var(--pt-line); transition: background .25s ease, border-color .25s ease;
}
.pt-plan:hover { background: #15101a; border-color: var(--pt-pink); }
.pt-plan--iot { background: radial-gradient(90% 70% at 100% 0%, rgb(255 63 216 / 0.14), transparent 70%), var(--pt-tile); }
body.pricing .pt-plan__tag {
    align-self: flex-start; padding: 5px 11px; border-radius: 12px; background: rgb(255 63 216 / 0.12);
    color: var(--pt-pink); font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
body.pricing .pt-plan h3 { margin: 18px 0 6px; font-family: 'Sora', sans-serif; font-weight: 600; font-size: clamp(22px, 1.6vw, 26px); letter-spacing: -0.02em; color: #fff; }
body.pricing .pt-plan__price { margin: 0 0 20px; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 20px; color: #fff; }
body.pricing .pt-plan__price span { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 14px; color: #8a8194; }
body.pricing .pt-plan ul { flex: 1; margin: 0 0 24px; padding: 0; list-style: none; border-top: 1px solid var(--pt-line); }
body.pricing .pt-plan li {
    position: relative; margin: 0; padding: 10px 0 10px 24px; border-bottom: 1px solid var(--pt-line);
    font-size: 14.5px; line-height: 1.45; color: #c9c3d3;
}
body.pricing .pt-plan li b { display: block; color: #fff; font-weight: 600; }
body.pricing .pt-plan li::before {
    content: ""; position: absolute; left: 2px; top: 15px; width: 10px; height: 6px;
    border-left: 2px solid var(--pt-pink); border-bottom: 2px solid var(--pt-pink); transform: rotate(-45deg);
}
body.pricing .pt-plan__cta {
    align-self: flex-start; display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 24px;
    border: 1px solid #5b5166; color: #fff; font-weight: 600; font-size: 15px; text-decoration: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
body.pricing .pt-plan__cta:hover { border-color: var(--pt-pink); }
body.pricing .pt-plan--iot .pt-plan__cta { background: var(--pt-pink); border-color: var(--pt-pink); color: #17031a; }
body.pricing .pt-plan--iot .pt-plan__cta:hover { background: #ff6fe3; }
.pt-plan__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 1023px) {
    .pt-plans__grid { grid-template-columns: 1fr 1fr; }
    .pt-plan--iot { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
    body.pricing .pt-plans { padding: 56px 0; }
    .pt-plans__grid { grid-template-columns: 1fr; }
    .pt-plan { padding: 22px; }
}