/* FiveM: a product page built around the hosting plan and its included protection. */
.cbx-modern.cs-premium .cs-fivem-page .cs-fivem-hero { padding:62px 0!important; background:#091a29!important; position:relative; isolation:isolate; overflow:hidden; }
.cbx-modern.cs-premium .cs-fivem-hero:before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#091a29 2%,#091a29f0 45%,#091a2999),url('../img/banner/fivem.webp') center/cover; opacity:.65; z-index:-2; }
.cbx-modern.cs-premium .cs-fivem-hero:after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 85% 40%,#22758435,transparent 65%); z-index:-1; pointer-events:none; }
.cs-fivem-stage { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:70px; }
.cs-fivem-copy { min-width:0; }
.cs-fivem-kicker { display:flex; align-items:center; gap:12px; color:#8ae7ef; font-size:11px; letter-spacing:.12em; font-weight:600; text-transform:uppercase; }
.cs-fivem-kicker>span { width:8px; height:8px; border:1px solid #82e9f1; transform:rotate(45deg); }
.cbx-modern.cs-premium .cs-fivem-hero h1 { font-size:clamp(38px,4.3vw,62px)!important; line-height:1.08!important; letter-spacing:-.05em; margin:25px 0 23px; color:#f5faff; max-width:700px; }
.cbx-modern.cs-premium .cs-fivem-hero .lead { font-size:21px; color:#cde0ec; line-height:1.6; margin:0; }
.cbx-modern.cs-premium .cs-fivem-hero .cs-fivem-description { font-size:15px; line-height:1.85; color:#b6cddd; margin:24px 0; max-width:620px; }
.cs-fivem-hero .cbx-product-eyebrow { display:none; }
.cs-fivem-hero .cbx-product-actions { margin-top:25px; }
.cs-fivem-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #4e6a7b77; margin-top:30px; padding-top:24px; gap:22px; }
.cs-fivem-facts b { display:block; color:#f1f9ff; font-size:14px; font-weight:600; }
.cs-fivem-facts small { display:block; margin-top:5px; font-size:11px; color:#b3cbdc; }
.cs-fivem-facts a small { color:#8fe0ec; text-decoration:underline; text-underline-offset:3px; }
.cs-fivem-visual { position:relative; min-width:0; }
.cs-fivem-render { position:relative; display:grid; place-items:center; border:1px solid #436073; background:radial-gradient(ellipse,#255269,#0f2437 74%); border-radius:24px 24px 0 0; height:330px; overflow:hidden; }
.cs-fivem-render img { width:330px; max-width:100%; height:310px; object-fit:contain; z-index:1; filter:drop-shadow(0 16px 20px #0005); }
.cs-fivem-orbit { position:absolute; width:380px; height:270px; border:1px solid #6cdde336; border-radius:50%; transform:rotate(-22deg); }
.cs-fivem-stamp { position:absolute; top:22px; inset-inline-start:24px; color:#a9d6e8; font:500 10px 'DM Sans',sans-serif; letter-spacing:.16em; }
.cs-fivem-inclusion { display:flex; align-items:center; gap:17px; background:#163f50; border-inline:1px solid #557b86; border-block:1px solid #557b86; padding:22px 26px; }
.cs-fivem-inclusion svg { width:35px; height:35px; flex:0 0 35px; color:#91ecdc; }
.cs-fivem-inclusion strong { display:block; color:#e9fff9; font-size:16px; line-height:1.5; }
.cs-fivem-inclusion span { display:block; color:#a7d9d2; margin-top:4px; font-size:11px; letter-spacing:.1em; }
.cs-fivem-discovery { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:24px 26px; background:#11293d; border:1px solid #436073; border-top:0; border-radius:0 0 20px 20px; }
.cs-fivem-discovery>div { min-width:0; }
.cs-fivem-discovery>div>span { display:block; color:#bdd1df; font-size:11px; }
.cs-fivem-discovery strong { font:600 40px/1.1 'Space Grotesk',sans-serif; color:#a8f0e1; display:block; margin:5px 0; letter-spacing:-.05em; }
.cs-fivem-discovery strong>span { font-size:22px; }
.cs-fivem-discovery .btn { min-width:0; white-space:normal; }
.cs-fivem-visual>.cbx-promo-details { display:block; margin:13px auto 0; color:#c4dfe9; }
.cbx-modern.cs-premium .cs-fivem-page #pricing { background:#f2f7fb!important; padding:75px 0; }
.cs-fivem-page #pricing .section-heading { max-width:880px; margin-inline:auto; }
.cs-fivem-page #pricing .section-heading h2 { font-size:clamp(30px,3.5vw,46px); }
.cs-fivem-included-link { display:inline-flex; justify-content:center; align-items:center; gap:11px; border:1px solid #9ecac6; border-radius:8px; background:#e8f6f1; padding:12px 17px; color:#15554a!important; font-size:13px; font-weight:600; margin-top:8px; }
.cs-fivem-included-link:hover { background:#d9eee7; text-decoration:underline; text-underline-offset:3px; }
.cbx-modern.cs-premium .cs-fivem-page table.cs-plans-as-cards tbody>tr { position:relative; padding-top:29px; overflow:hidden; }
.cs-fivem-page table.cs-plans-as-cards tr:after { content:''; position:absolute; top:0; inset-inline:25px; height:3px; background:linear-gradient(90deg,#177a98,#a0e6dd); border-radius:0 0 4px 4px; }
.cbx-modern.cs-premium .cs-fivem-resource-note { border-inline-start:3px solid #7cacbf; background:#e7f0f7; padding:20px 24px; margin:30px 0 20px; color:#365970; font-size:13px; line-height:1.8; border-radius:0 10px 10px 0; }
.cs-fivem-protection { background:#0c2132; color:#d2e5ef; position:relative; }
.cs-fivem-protection-head { display:grid; grid-template-columns:1.65fr 1fr; gap:60px; align-items:center; }
.cbx-modern.cs-premium .cs-fivem-protection h2 { font-size:clamp(32px,3.6vw,49px); color:#f2fbff; margin:20px 0; line-height:1.15; max-width:750px; }
.cbx-modern.cs-premium .cs-fivem-protection .lead { color:#bfd5e2; font-size:17px; line-height:1.85; }
.cs-fivem-shield { max-width:300px; justify-self:center; }
.cs-fivem-shield img { width:100%; height:auto; filter:drop-shadow(0 18px 30px #0004); }
.cs-fivem-protection-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:35px; }
.cs-fivem-protection-grid article { border:1px solid #496175; border-radius:15px; padding:28px; background:#142e42; }
.cs-fivem-protection-grid .cs-fivem-options { background:#1b3148; }
.cs-fivem-layer { display:inline-block; padding:5px 9px; border:1px solid #497582; background:#1b4654; color:#b6f1e8; font-size:11px; border-radius:5px; margin-bottom:24px; }
.cbx-modern.cs-premium .cs-fivem-protection-grid h3 { color:#eef7ff; font-size:22px; line-height:1.3; }
.cbx-modern.cs-premium .cs-fivem-protection-grid p { color:#bfd1df; font-size:14px; line-height:1.85; margin-bottom:0; }
.cs-fivem-protection-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-top:24px; }
.cbx-modern.cs-premium .cs-fivem-protection-bottom p { color:#b6cbdc; font-size:12px; line-height:1.8; margin:0; max-width:660px; }
.cs-fivem-protection-bottom a { font-size:13px; color:#96e8ef; border-bottom:1px solid #5c8f9e; padding-bottom:5px; }
.cs-fivem-network { border-top:1px solid #415d72; margin-top:35px; padding-top:28px; display:flex; align-items:center; gap:35px; }
.cs-fivem-network>span { color:#9bd9e4; font-size:11px; letter-spacing:.1em; min-width:165px; }
.cbx-modern.cs-premium .cs-fivem-network p { color:#bfd2df; font-size:13px; margin:0; }
.cs-fivem-network a { color:#b4f2f7; text-decoration:underline; text-underline-offset:3px; }
.cs-fivem-hardware .feature-tab-content { min-height:0; }
/* Shared FAQs: readable, directly indexable answers, also usable without JavaScript. */
.cs-answers-section { background:#f2f7fb; border-top:1px solid #dbe6ee; }
.cs-answers-layout { display:grid; grid-template-columns:.8fr 1.65fr; gap:65px; align-items:start; }
.cs-answers-intro { position:sticky; top:calc(var(--cbx-header-offset,110px) + 85px); }
.cs-answers-intro .cs-premium-eyebrow { margin-bottom:20px; }
.cbx-modern.cs-premium .cs-answers-intro h2 { font-size:clamp(30px,3.2vw,43px); line-height:1.15; margin:0 0 24px; }
.cs-answers-intro>a { font-size:13px; color:#1e6285; text-decoration:underline; text-underline-offset:4px; }
.cs-faq-list { min-width:0; }
.cs-faq-item { background:#fff; border:1px solid #ccdce8; border-radius:12px; margin-bottom:12px; overflow:hidden; scroll-margin-top:calc(var(--cbx-header-offset,110px) + 80px); }
.cs-faq-item summary { list-style:none; display:flex; align-items:center; gap:17px; cursor:pointer; padding:22px 25px; }
.cs-faq-item summary::-webkit-details-marker { display:none; }
.cs-faq-number { color:#4a758e; font-size:11px; flex:0 0 20px; }
.cbx-modern.cs-premium .cs-faq-item h3 { font-size:16px; font-weight:600; line-height:1.7; color:#163d59; margin:0; flex:1; }
.cs-faq-toggle { display:grid; place-items:center; width:27px; height:27px; flex:0 0 27px; border:1px solid #bdd2e0; border-radius:7px; color:#2c6884; font:400 20px/1 sans-serif; transition:transform .2s; }
.cs-faq-item[open] { border-color:#81b4c6; box-shadow:0 8px 24px #163d5907; }
.cs-faq-item[open] summary { background:#edf7fa; }
.cs-faq-item[open] .cs-faq-toggle { transform:rotate(45deg); background:#1b536b; border-color:#1b536b; color:#fff; }
.cs-faq-item summary:hover { background:#f3f8fc; }
.cs-faq-item summary:focus-visible { outline:3px solid #266f98; outline-offset:-3px; border-radius:11px; }
.cs-faq-answer { padding:22px 26px 24px 62px; border-top:1px solid #d8e8ee; }
.cbx-modern.cs-premium .cs-faq-answer p { font-size:14px; line-height:1.9; color:#3d5d73; margin:0; }
.cs-faq-answer a { text-decoration:underline; text-underline-offset:3px; }
html[dir=rtl] .cs-faq-answer { padding-inline:62px 26px; }
.cs-related-resources { padding:60px 0; background:#fff; border-top:1px solid #d5e3ee; }
.cs-related-head { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-bottom:25px; }
.cbx-modern.cs-premium .cs-related-head h2 { font-size:27px; margin:0; }
.cs-related-head>a { color:#235f85; font-size:13px; }
.cs-related-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.cs-related-card { display:flex; align-items:flex-start; gap:18px; padding:26px; background:#f4f8fb; border:1px solid #cbdce9; border-radius:13px; transition:border-color .2s,background .2s; }
.cs-related-card>span:first-child { font-size:11px; color:#436b85; padding-top:5px; }
.cs-related-card>span:last-child { color:#286782; margin-inline-start:auto; font-size:19px; }
.cs-related-card strong { font-size:16px; font-weight:600; line-height:1.6; color:#174360; }
.cs-related-card:hover { background:#e9f4f8; border-color:#649aad; }
.cbx-modern.cs-premium .single-promo-2 .circle-icon { background:#ecf6fb; border:1px solid #d6e8f2; box-shadow:none; }
@media(min-width:1100px) and (prefers-reduced-motion:no-preference) {
 .cs-fivem-render img { animation:cs-fivem-arrive 1s cubic-bezier(.2,.8,.2,1) both; }
}
@keyframes cs-fivem-arrive { from { opacity:.4; transform:translateY(15px) scale(.96); } to { opacity:1; transform:none; } }
@media(max-width:1199px) { .cs-fivem-stage { gap:35px; } .cs-fivem-discovery { gap:16px; padding:22px; } .cs-answers-layout { gap:35px; grid-template-columns:.8fr 1.5fr; } }
@media(max-width:991px) { .cs-fivem-stage { grid-template-columns:1fr; gap:35px; } .cs-fivem-visual { max-width:550px; width:100%; margin-inline:auto; } .cs-fivem-protection-head { gap:25px; } .cs-fivem-protection-grid { gap:15px; } .cs-fivem-protection-grid article { padding:22px; } .cs-answers-layout { grid-template-columns:1fr; gap:30px; } .cs-answers-intro { position:static; } .cs-related-grid { gap:15px; } .cs-related-card { padding:21px; } }
@media(max-width:767px) {
 .cbx-modern.cs-premium .cs-fivem-page .cs-fivem-hero { padding:40px 0!important; }
 .cbx-modern.cs-premium .cs-fivem-hero h1 { font-size:39px!important; line-height:1.15!important; }
 .cbx-modern.cs-premium .cs-fivem-hero .lead { font-size:18px; }
 .cbx-modern.cs-premium .cs-fivem-hero .cs-fivem-description { font-size:14px; }
 .cs-fivem-kicker { font-size:10px; }
 .cs-fivem-facts { gap:12px; }
 .cs-fivem-facts b { font-size:12px; }
 .cs-fivem-facts small { font-size:10px; }
 .cs-fivem-render { height:250px; }
 .cs-fivem-render img { height:240px; width:260px; }
 .cs-fivem-inclusion { padding:20px; }
 .cs-fivem-inclusion strong { font-size:14px; }
 .cs-fivem-discovery { padding:20px; }
 .cs-fivem-discovery .btn { font-size:12px; padding:12px; }
 .cs-fivem-discovery strong { font-size:35px; }
 .cs-fivem-protection-head { grid-template-columns:1fr; gap:10px; }
 .cs-fivem-shield { max-width:200px; }
 .cs-fivem-protection-grid { grid-template-columns:1fr; gap:16px; }
 .cs-fivem-network { flex-direction:column; align-items:flex-start; gap:15px; }
 .cs-faq-item summary { padding:19px 17px; gap:10px; }
 .cs-faq-number { flex-basis:16px; font-size:10px; }
 .cbx-modern.cs-premium .cs-faq-item h3 { font-size:15px; }
 .cs-faq-answer { padding:19px; }
 html[dir=rtl] .cs-faq-answer { padding-inline:19px; }
 .cs-related-head { align-items:flex-start; flex-direction:column; gap:12px; }
 .cs-related-grid { grid-template-columns:1fr; }
 .cs-related-card { padding:22px; }
}
html[dir=rtl] .cbx-modern.cs-premium .cs-fivem-hero h1 { line-height:1.4!important; }
@media(prefers-reduced-motion:reduce) { .cs-fivem-render img,.cs-faq-toggle,.cs-related-card { animation:none!important; transition:none!important; } }
.cs-plan-tools[hidden],.cs-plan-empty[hidden] { display:none!important; }
.cs-plan-empty { display:block; width:100%; padding:22px; margin:0 0 24px; border:1px dashed #8eb3c7; border-radius:12px; color:#185471; background:#f4fbff; font-size:14px; cursor:pointer; }

/* Keep product sections separate from the action on compact screens. */
@media(max-width:767px) {
 .cbx-modern.cs-premium .cbx-product-nav-links { overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
 .cbx-modern.cs-premium .cbx-product-nav-cta { flex-shrink:0; }
}
@media(max-width:575px) {
 .cbx-modern.cs-premium .cbx-product-nav-cta { display:none; }
 .cbx-modern.cs-premium .cbx-product-nav-links { justify-content:space-between; }
}