/* Private 5G FWA, kit-led layout (template-parts/simsonic-p5g.php). Loaded on that page only. */

/* the theme forces its own heading font/weight with !important; these headings are Sora 600 */
.p5g :is(h2, h3, .p5g-h, .p5g-h3, .p5g-stats dt, .p5g-dash__big, .p5g-finder__opt b, .p5g-faq summary, .p5g-dep h3, .p5g-open__terms b, .p5g-ladder b) {
    font-family: "Sora", sans-serif !important;
    font-weight: 600 !important;
}

.p5g {
    --p5g-pink: #ff1fb0;
    --p5g-line: rgb(255 255 255 / 0.1);
    --p5g-card: #0f0b19;
    --p5g-muted: #c9c1db;
    --p5g-soft: #a79fbb;
    background: #000;
    color: #fff;
    font-family: "Inter", Arial, sans-serif;
}

.p5g-sec { padding: var(--sim-sec-pad, 72px) 0; }
.p5g-wrap { width: min(calc(1312px * var(--sim-wide, 1)), 100% - 32px); margin: 0 auto; }

.p5g .p5g-eyebrow { margin: 0 0 14px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--p5g-pink); }
.p5g .p5g-h { max-width: 820px; margin: 0; font-family: "Sora", sans-serif; font-size: clamp(28px, 3vw, 40px); font-weight: 600; line-height: 1.12; letter-spacing: -0.03em; color: #fff; }
.p5g .p5g-h--xl { font-size: clamp(34px, 3.8vw, 52px); }
.p5g .p5g-h3 { margin: 0; font-family: "Sora", sans-serif; font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; letter-spacing: -0.03em; color: #fff; }
.p5g .p5g-lede { max-width: 680px; margin: 18px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--p5g-muted); }
.p5g p { color: var(--p5g-muted); }

.p5g-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.p5g .p5g-btn {
    display: inline-flex;
    align-items: center;
    min-height: 50px;
    padding: 0 26px;
    border: 1px solid rgb(255 255 255 / 0.25);
    border-radius: 25px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.p5g .p5g-btn:hover { border-color: var(--p5g-pink); color: #fff; }
.p5g .p5g-btn--primary { border-color: var(--p5g-pink); background: var(--p5g-pink); font-weight: 600; }
.p5g .p5g-btn--primary:hover { background: #ff4fc3; }

.p5g-card { overflow: hidden; margin-top: 20px; border: 1px solid var(--p5g-line); border-radius: 24px; background: var(--p5g-card); }

.p5g-photo { display: block; width: 100%; height: 100%; min-height: 320px; object-fit: cover; border: 1px solid var(--p5g-line); border-radius: 24px; }
.p5g-photo--wide { height: auto; min-height: 0; aspect-ratio: 16 / 7; margin-top: 36px; }

/* intro: copy and site photo side by side */
.p5g-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }

/* four-up spec strip */
.p5g-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--p5g-line); }
.p5g-card > .p5g-stats:first-child { border-top: 0; }
.p5g-stats div { padding: 22px 26px; border-left: 1px solid var(--p5g-line); }
.p5g-stats div:first-child { border-left: 0; }
.p5g-stats dt { font-family: "Sora", sans-serif; font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.p5g-stats dd { margin: 6px 0 0; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--p5g-soft); }

/* kit cards: photo + copy, alternating sides */
.p5g-kit__row { display: grid; grid-template-columns: 1fr 1fr; }
.p5g-kit__row--flip .p5g-kit__img { order: 2; }
.p5g-kit__img { display: block; width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.p5g-kit__txt { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 3.4vw, 48px); }
.p5g-kit__txt > p { margin: 14px 0 0; font-size: 15px; line-height: 1.6; }
.p5g .p5g-sub { margin: 10px 0 0; font-size: 17px; font-weight: 500; color: #fff; }

.p5g-list { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.p5g-list li { display: flex; gap: 10px; font-size: 14.5px; color: var(--p5g-muted); }
.p5g-list li::before { content: "\25C6"; color: var(--p5g-pink); }

/* illustrative dashboard */
.p5g-dash { display: grid; place-items: center; padding: clamp(28px, 3.4vw, 44px); background: radial-gradient(70% 70% at 50% 40%, rgb(124 58 237 / 0.3), transparent 70%), #07040f; }
.p5g-dash__panel { width: 100%; max-width: 440px; padding: 22px; border: 1px solid rgb(179 107 255 / 0.35); border-radius: 18px; background: rgb(10 5 20 / 0.85); }
.p5g-dash__top { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p5g-soft); }
.p5g-dash__live { color: #3ee08f; }
.p5g-dash__big { margin: 10px 0 2px; font-family: "Sora", sans-serif; font-size: 38px; font-weight: 600; color: #fff; }
.p5g-dash__cap { font-size: 12.5px; color: var(--p5g-soft); }
.p5g-dash__spark { display: block; width: 100%; height: 70px; }
.p5g-dash__row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--p5g-line); font-size: 13px; color: var(--p5g-muted); }
.p5g-dash__row span:nth-child(2) { flex: 1; color: #fff; }
.p5g-dash__dot { width: 8px; height: 8px; border-radius: 50%; background: #3ee08f; box-shadow: 0 0 8px #3ee08f; }
.p5g-dash__dot.is-warn { background: #f5c542; box-shadow: 0 0 8px #f5c542; }

/* opener: overview + how it can be deployed */
.p5g-open { position: relative; }
.p5g-open::before { content: ""; position: absolute; inset: 0 0 auto; height: 70%; background: radial-gradient(60% 80% at 80% 20%, rgb(255 31 176 / 0.08), transparent 70%); pointer-events: none; }
.p5g-open__grid { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; }
.p5g-open .p5g-lede + .p5g-lede { margin-top: 14px; }
.p5g-open__card { margin-top: 0; padding: clamp(28px, 3vw, 40px); background: linear-gradient(160deg, rgb(124 58 237 / 0.16), rgb(15 11 25 / 0) 60%), var(--p5g-card); }
.p5g-open__card > p:not(.p5g-eyebrow) { margin: 12px 0 0; font-size: 15px; line-height: 1.6; }
.p5g-open__terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.p5g-open__terms li { padding: 16px; border: 1px solid var(--p5g-line); border-radius: 16px; background: rgb(0 0 0 / 0.35); }
.p5g .p5g-open__terms b { display: block; font-family: "Sora", sans-serif; font-size: 20px; font-weight: 600; color: #fff; }
.p5g-open__terms span { display: block; margin-top: 4px; font-size: 13px; color: var(--p5g-soft); }
.p5g .p5g-open__note { margin-top: 18px; font-size: 14px; color: #fff; }

/* scale ladder + integration card */
.p5g-scale { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: end; }
.p5g-ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 36px 0 0; padding: 0; list-style: none; align-items: end; }
.p5g-ladder li { display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(150px + var(--step) * 46px); padding: 20px; border: 1px solid var(--p5g-line); border-radius: 20px; background: linear-gradient(180deg, rgb(255 31 176 / calc(0.04 + var(--step) * 0.04)), rgb(15 11 25 / 0) 75%), var(--p5g-card); position: relative; overflow: hidden; }
.p5g-ladder__bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #ff1fb0, #7c3aed); opacity: calc(0.35 + var(--step) * 0.2); }
.p5g .p5g-ladder b { font-family: "Sora", sans-serif; font-size: clamp(26px, 2.4vw, 36px); font-weight: 600; letter-spacing: -0.03em; color: #fff; line-height: 1; }
.p5g-ladder__name { margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p5g-pink); }
.p5g-ladder__line { margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--p5g-soft); }
.p5g-fit { margin-top: 0; padding: clamp(26px, 3vw, 36px); }
.p5g-fit__opt { display: flex; gap: 14px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--p5g-line); }
.p5g-fit__dot { flex: 0 0 12px; height: 12px; margin-top: 6px; border-radius: 50%; background: #ff1fb0; box-shadow: 0 0 0 4px rgb(255 31 176 / 0.18); }
.p5g-fit__dot--alt { background: #7c3aed; box-shadow: 0 0 0 4px rgb(124 58 237 / 0.22); }
.p5g .p5g-fit__opt b { font-size: 16px; color: #fff; }
.p5g-fit__opt p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; }

/* where it's used */
.p5g-uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; border: 1px solid var(--p5g-line); border-radius: 24px; overflow: hidden; background: var(--p5g-card); }
.p5g-use { padding: 30px; border-right: 1px solid var(--p5g-line); border-bottom: 1px solid var(--p5g-line); transition: background 0.3s ease; }
.p5g-use:nth-child(3n) { border-right: 0; }
.p5g-use:nth-last-child(-n+3) { border-bottom: 0; }
.p5g-use:hover { background: radial-gradient(80% 80% at 0% 0%, rgb(255 31 176 / 0.08), transparent 70%); }
.p5g-use__icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgb(255 31 176 / 0.35); border-radius: 14px; color: var(--p5g-pink); }
.p5g-use__icon svg { width: 26px; height: 26px; }
.p5g .p5g-use h3 { margin: 18px 0 0; font-size: 20px !important; line-height: 1.25 !important; color: #fff; }
#p5g-uses .p5g-h { max-width: 980px; }
.p5g-use p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; }

/* fixed / pop-up / in-building: photo cards, the photo fading into the card */
.p5g-deploy__head { display: grid; grid-template-columns: 1fr minmax(0, 440px); gap: 32px; align-items: end; }
.p5g-deploy__head .p5g-lede { margin: 0; }
.p5g-deploy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.p5g-dep { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--p5g-line); border-radius: 24px; background: var(--p5g-card); scroll-margin-top: 120px; transition: border-color 0.3s ease, transform 0.3s ease; }
.p5g-dep:hover { border-color: rgb(255 31 176 / 0.45); transform: translateY(-4px); }
.p5g-dep__media { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.p5g-dep__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.p5g-dep:hover .p5g-dep__media img { transform: scale(1.04); }
.p5g-dep__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(15 11 25 / 0) 45%, rgb(15 11 25 / 0.75) 82%, var(--p5g-card) 100%), radial-gradient(90% 70% at 50% 0%, rgb(255 31 176 / 0.08), transparent 70%); pointer-events: none; }
.p5g .p5g-dep__tier { position: absolute; top: 16px; left: 16px; z-index: 1; padding: 6px 11px; border: 1px solid rgb(255 255 255 / 0.22); border-radius: 999px; background: rgb(10 5 20 / 0.6); backdrop-filter: blur(6px); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; }
.p5g-dep__body { position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; margin-top: -54px; padding: 0 28px 28px; }
.p5g .p5g-dep__num { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; color: var(--p5g-pink); }
.p5g .p5g-dep h3 { margin: 6px 0 0; font-size: 30px; letter-spacing: -0.03em; color: #fff; }
.p5g .p5g-dep__line { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--p5g-muted); }
.p5g-dep ul { flex: 1; margin: 18px 0 22px; padding: 0; list-style: none; border-top: 1px solid var(--p5g-line); }
.p5g-dep li { padding: 10px 0; border-bottom: 1px solid var(--p5g-line); font-size: 14px; color: var(--p5g-soft); }
.p5g .p5g-dep__cta { align-self: flex-start; font-size: 15px; font-weight: 600; color: #fff; text-decoration: none; }
.p5g .p5g-dep__cta span { display: inline-block; color: var(--p5g-pink); transition: transform 0.2s ease; }
.p5g .p5g-dep__cta:hover span { transform: translateX(4px); }

/* the wider photos sit in the dark page rather than on it */
.p5g-photo, .p5g-kit__img { filter: saturate(0.92) contrast(1.02); }
.p5g-kit__row { position: relative; }
.p5g-kit__img { -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent); mask-image: linear-gradient(90deg, #000 72%, transparent); }
.p5g-kit__row--flip .p5g-kit__img { -webkit-mask-image: linear-gradient(270deg, #000 72%, transparent); mask-image: linear-gradient(270deg, #000 72%, transparent); }
#p5g-kit .p5g-lede + .p5g-card { margin-top: 36px; }

/* how it fits together */
.p5g-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; }
.p5g-flow li { padding: 26px; border: 1px solid var(--p5g-line); border-radius: 20px; background: var(--p5g-card); }
.p5g-flow span { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgb(255 31 176 / 0.5); border-radius: 50%; font-weight: 600; color: var(--p5g-pink); }
.p5g .p5g-flow h3 { margin: 16px 0 0; font-family: "Sora", sans-serif; font-size: 18px; font-weight: 600; color: #fff; }
.p5g-flow p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; }

/* tiers */
.p5g-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.p5g-tier { display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--p5g-line); border-radius: 24px; background: var(--p5g-card); }
.p5g-tier__tag { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p5g-soft); }
.p5g .p5g-tier h3 { margin: 8px 0 6px; font-family: "Sora", sans-serif; font-size: 28px; font-weight: 600; color: #fff; }
.p5g-tier > p { margin: 0 0 16px; font-size: 15px; }
.p5g-tier ul { flex: 1; margin: 0 0 24px; padding: 0; list-style: none; }
.p5g-tier li { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--p5g-line); font-size: 14.5px; color: var(--p5g-muted); }
.p5g-tier li::before { content: "\2713"; color: var(--p5g-pink); }
.p5g-tier .p5g-btn { align-self: flex-start; }

/* product finder */
.p5g-finder { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; padding: clamp(28px, 3.4vw, 44px) clamp(28px, 3.4vw, 48px); }
.p5g-finder p { margin: 14px 0 0; font-size: 15px; line-height: 1.6; }
.p5g .p5g-finder__q { margin: 0 0 14px; font-weight: 500; color: #fff; }
.p5g .p5g-finder__opt { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 20px 24px; border: 1px solid var(--p5g-line); border-radius: 18px; background: #07040f; color: var(--p5g-soft); font-size: 14px; text-decoration: none; transition: border-color 0.2s ease; }
.p5g-finder__opt:hover { border-color: var(--p5g-pink); }
.p5g-finder__opt b { display: block; margin-bottom: 4px; font-family: "Sora", sans-serif; font-size: 19px; font-weight: 600; color: #fff; }
.p5g-finder__opt i { font-style: normal; font-size: 20px; color: var(--p5g-pink); }

/* FAQ */
.p5g-faq { margin-top: 32px; border-bottom: 1px solid var(--p5g-line); }
.p5g-faq details { padding: 22px 0; border-top: 1px solid var(--p5g-line); }
.p5g-faq summary { display: flex; justify-content: space-between; gap: 20px; font-family: "Sora", sans-serif; font-size: 19px; font-weight: 600; color: #fff; list-style: none; cursor: pointer; }
.p5g-faq summary::-webkit-details-marker { display: none; }
.p5g-faq summary::after { content: "+"; color: var(--p5g-pink); }
.p5g-faq details[open] summary::after { content: "\2212"; }
.p5g-faq details p { max-width: 760px; margin: 12px 0 0; font-size: 15px; line-height: 1.6; }

/* tablet and phone */
@media (max-width: 1023px) {
    .p5g-intro, .p5g-kit__row, .p5g-finder { grid-template-columns: 1fr; }
    .p5g-kit__row--flip .p5g-kit__img { order: 0; }
    .p5g-kit__img, .p5g-kit__row--flip .p5g-kit__img { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
    .p5g-deploy__head { grid-template-columns: 1fr; gap: 16px; }
    .p5g-open__grid { grid-template-columns: 1fr; gap: 28px; }
    .p5g-scale { grid-template-columns: 1fr; gap: 24px; }
    .p5g-ladder { grid-template-columns: 1fr 1fr; }
    .p5g-ladder li { min-height: 0; }
    .p5g-uses { grid-template-columns: 1fr 1fr; }
    .p5g-use:nth-child(n) { border-right: 1px solid var(--p5g-line); border-bottom: 1px solid var(--p5g-line); }
    .p5g-use:nth-child(2n) { border-right: 0; }
    .p5g-use:nth-last-child(-n+2) { border-bottom: 0; }
    .p5g-kit__img { min-height: 280px; }
    .p5g-tiers, .p5g-deploy { grid-template-columns: 1fr; }
    .p5g-flow { grid-template-columns: 1fr 1fr; }
    .p5g-stats { grid-template-columns: 1fr 1fr; }
    .p5g-stats div:nth-child(3) { border-left: 0; }
    .p5g-stats div:nth-child(n+3) { border-top: 1px solid var(--p5g-line); }
}

@media (max-width: 639px) {
    .p5g-flow { grid-template-columns: 1fr; }
    .p5g-stats div { padding: 18px 16px; }
    .p5g-stats dt { font-size: 18px; }
    .p5g-photo--wide { aspect-ratio: 4 / 3; }
}

/* kit detail strip: close-ups of the hardware */
.p5g-detail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 36px; }
.p5g-detail__item { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--p5g-line); border-radius: 20px; background: #07040f; }
.p5g-detail__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.p5g-detail__item:hover img { transform: scale(1.05); }
.p5g-detail__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / 0.85) 100%); pointer-events: none; }
.p5g-detail__item figcaption { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; }
.p5g .p5g-detail__item b { display: block; font-size: 15px; font-weight: 600; color: #fff; }
.p5g-detail__item span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--p5g-soft); }
@media (max-width: 1023px) { .p5g-detail { grid-template-columns: 1fr 1fr; } }