/* ==========================================================================
   comBOX - "Become a Reseller" page (draft).
   Builds on vll-technology.css (.vll-feat sections, cards, 3D icon boxes).
   Everything here is scoped to .rs-* or to .vll-feat inside .rs-sec.
   Loaded only on pages carrying the _combox_reseller_css post meta.
   ========================================================================== */

/* ---- section heads ---------------------------------------------------- */
#top .rs-sec .rs-headwide{margin-bottom:40px}
#top .rs-sec .rs-headwide .av-special-heading-tag{max-width:22ch}
#top .vll-feat .rs-lead{max-width:64ch}
#top .vll-feat .rs-lead p{margin:22px 0 0;font-family:var(--vf-h);font-size:18px;font-weight:500;line-height:1.65;color:var(--vf-body)}
#top .vll-feat .rs-lead p + p{margin-top:14px;font-size:16px}
#top .vll-feat--red .rs-lead p,#top .vll-feat--graphite .rs-lead p{color:rgba(255,255,255,.9)}
#top .vll-feat .rs-lead a{font-weight:600;text-decoration:underline;text-underline-offset:3px}
#top .vll-feat--graphite .rs-lead a,#top .vll-feat--red .rs-lead a{color:#fff}

/* ---- card links ------------------------------------------------------- */
#top .vll-feat .vll-feat-card .rs-more{display:inline-flex;align-items:center;gap:8px;margin-top:4px;font-family:var(--vf-h);font-size:14.5px;font-weight:700;color:var(--vf-red-a11y);text-decoration:none}
#top .vll-feat .vll-feat-card .rs-more:after{content:"\2192";transition:transform .2s ease}
#top .vll-feat .vll-feat-card .rs-more:hover:after,#top .vll-feat .vll-feat-card .rs-more:focus-visible:after{transform:translateX(5px)}
#top .vll-feat .vll-feat-card .rs-more:focus-visible{outline:2px solid var(--vf-red-a11y);outline-offset:3px;border-radius:3px}

/* ---- 3D icons used on this page --------------------------------------- */
#top .vll-feat .vll-feat-card .rs-ico-growth .iconbox_icon{background-image:url(reseller-ico-1.webp)}
#top .vll-feat .vll-feat-card .rs-ico-training .iconbox_icon{background-image:url(reseller-ico-2.webp)}
#top .vll-feat .vll-feat-card .rs-ico-material .iconbox_icon{background-image:url(reseller-ico-3.webp)}
#top .vll-feat .vll-feat-card .rs-ico-support .iconbox_icon{background-image:url(reseller-ico-4.webp)}
#top .vll-feat .vll-feat-card .rs-ico-premium .iconbox_icon{background-image:url(reseller-ico-5.webp)}
#top .vll-feat .vll-feat-card .rs-ico-regions .iconbox_icon{background-image:url(vll-ico-leasedline.webp)}
#top .vll-feat .vll-feat-card .rs-ico-sell .iconbox_icon{background-image:url(../2026/09/combox-ico-building.webp)}
#top .vll-feat .vll-feat-card .rs-ico-deploy .iconbox_icon{background-image:url(vll-ico-cluster.webp)}
#top .vll-feat .vll-feat-card .rs-ico-bond .iconbox_icon{background-image:url(vll-ico-loadbal.webp)}
#top .vll-feat .vll-feat-card .rs-ico-operate .iconbox_icon{background-image:url(vll-ico-management.webp)}
#top .vll-feat .vll-feat-card .rs-ico-result .iconbox_icon{background-image:url(vll-ico-transparent.webp)}
#top .vll-feat .vll-feat-card .rs-ico-hybrid .iconbox_icon{background-image:url(vll-ico-failover.webp)}
#top .vll-feat .vll-feat-card .rs-ico-lte .iconbox_icon{background-image:url(vll-ico-5g.webp)}
#top .vll-feat .vll-feat-card .rs-ico-sat .iconbox_icon{background-image:url(vll-ico-vsat.webp)}
#top .vll-feat .vll-feat-card .rs-ico-dsl .iconbox_icon{background-image:url(vll-ico-vdsl.webp)}

/* ---- steps: white cards on the graphite section ------------------------ */
#top .rs-steps .flex_column.rs-step{background:#fff!important;border:1px solid rgba(255,255,255,.4)!important;border-radius:18px!important;padding:28px 26px 30px!important;box-shadow:0 32px 60px -30px rgba(0,0,0,.8)!important;transition:transform .25s ease,box-shadow .25s ease}
#top .rs-steps .flex_column.rs-step:hover{transform:translateY(-4px);box-shadow:0 38px 64px -30px rgba(0,0,0,.85)!important}
#top .rs-step .rs-step-img{margin:0 0 20px;padding:0 0 18px;border-bottom:1px solid var(--vf-line)}
#top .rs-step .rs-step-img img{display:block;width:auto;max-width:100%;height:150px;object-fit:contain;margin:0 auto}
#top .rs-step-body .rs-step-no{margin:0 0 8px;font-family:var(--vf-h);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--vf-red-a11y)}
#top .rs-step-body h3{margin:0 0 12px;font-family:var(--vf-h);font-size:22px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--vf-ink)}
#top .rs-step-body p:not(.rs-step-no){margin:0;font-size:15.5px;line-height:1.7;color:var(--vf-body)}
#top .rs-step-body p:empty{display:none}

/* ---- buttons ----------------------------------------------------------- */
#top .rs-actions{margin-top:44px}
#top .rs-btnblock{margin:0}
#top .rs-btnrow{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
#top .rs-sec .rs-btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 26px;border:2px solid transparent;border-radius:6px;font-family:HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;font-weight:700;line-height:1;white-space:nowrap;text-decoration:none!important;box-shadow:none;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
#top .rs-sec .rs-btn:focus-visible{outline:2px solid #ffb3ab;outline-offset:3px}
#top .rs-sec .rs-btn--solid{background:#c8102e;border-color:#c8102e;color:#fff!important}
#top .rs-sec .rs-btn--solid:hover,#top .rs-sec .rs-btn--solid:focus-visible{background:#a50e25;border-color:#a50e25;color:#fff!important;transform:translateY(-2px)}
#top .rs-sec .rs-btn--outline{background:transparent;border-color:#fff;color:#fff!important}
#top .rs-sec .rs-btn--outline:hover,#top .rs-sec .rs-btn--outline:focus-visible{background:#fff;border-color:#fff;color:#c8102e!important}
#top .rs-sec .rs-btn--dark{background:#c8102e;border-color:#c8102e;color:#fff!important}
#top .rs-sec .rs-btn--dark:hover,#top .rs-sec .rs-btn--dark:focus-visible{background:#a50e25;border-color:#a50e25;color:#fff!important}
#top .rs-sec .rs-btn--ghost{background:transparent;border-color:#141416;color:#141416!important}
#top .rs-sec .rs-btn--ghost:hover,#top .rs-sec .rs-btn--ghost:focus-visible{background:#c8102e;border-color:#c8102e;color:#fff!important}
#top .rs-sec .rs-actions--light .rs-btn:focus-visible{outline-color:var(--vf-red-a11y)}

/* ---- FAQ --------------------------------------------------------------- */
#top .rs-faq details{margin:0 0 14px;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(16,16,20,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .2s ease,background-color .2s ease}
#top .rs-faq details[open]{border-color:rgba(255,77,64,.55);background:rgba(16,16,20,.88)}
#top .rs-faq summary{position:relative;display:block;padding:22px 72px 22px 28px;cursor:pointer;list-style:none;font-family:var(--vf-h);font-size:17.5px;font-weight:600;line-height:1.4;color:#fff}
#top .rs-faq summary::-webkit-details-marker{display:none}
#top .rs-faq summary:after{content:"+";position:absolute;right:24px;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:50%;background:rgba(255,77,64,.18);color:#ff6a5c;font-size:22px;font-weight:500;line-height:32px;text-align:center;transition:transform .25s ease,background-color .2s ease}
#top .rs-faq details[open] summary:after{transform:rotate(45deg);background:rgba(255,77,64,.3)}
#top .rs-faq summary:hover:after{background:rgba(255,77,64,.3)}
#top .rs-faq summary:focus-visible{outline:2px solid #ffb3ab;outline-offset:-2px;border-radius:14px}
#top .rs-faq .rs-faq-a{padding:0 28px 26px}
#top .rs-faq .rs-faq-a p{margin:0;font-size:16px;line-height:1.75;color:rgba(255,255,255,.84)}
#top .rs-faq .rs-faq-a a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
#top .rs-faq p:empty{display:none}

/* ---- closing call to action --------------------------------------------- */
#top .rs-cta .rs-headwide{margin-bottom:0}
#top .rs-cta .rs-headwide .av-special-heading-tag{max-width:none}
#top .rs-cta .rs-btnblock{margin-top:36px}
#top .rs-cta{background-color:#4a0509}

/* ---- section rhythm ------------------------------------------------------ */
#top .rs-sec .container{padding-top:24px;padding-bottom:24px}

/* ---- tablet / phone ------------------------------------------------------ */
@media (max-width:989px){
#top .rs-steps .flex_column.rs-step{margin-bottom:26px}
}
@media (max-width:767px){
#top .rs-sec .rs-headwide{margin-bottom:28px}
#top .vll-feat .rs-lead p{font-size:16.5px}
#top .rs-step .rs-step-img img{height:130px}
#top .rs-faq summary{padding:18px 60px 18px 20px;font-size:16.5px}
#top .rs-faq summary:after{right:16px}
#top .rs-faq .rs-faq-a{padding:0 20px 22px}
#top .rs-actions{margin-top:28px}
}
@media (max-width:480px){
#top .rs-btnrow{flex-direction:column;align-items:stretch}
#top .rs-sec .rs-btn{width:100%;white-space:normal;text-align:center}
}
@media (prefers-reduced-motion:reduce){
#top .rs-steps .flex_column.rs-step,#top .rs-faq details,#top .rs-faq summary:after,#top .rs-sec .rs-btn{transition:none}
}

/* ===== RS FULL HEIGHT HERO 2026-10-13 =====
   Enfold's 100% height takes the fixed header off the viewport height, but #main only
   pads the page 88px down, so the hero ended short of the fold. Match the real offset.
   Below 990px the header is in the flow and the hero content is already taller. */
@media (min-width:990px){
#top .rs-hero.av-minimum-height-100{min-height:calc(100vh - 88px) !important;min-height:calc(100svh - 88px) !important;}
}
/* ===== END RS FULL HEIGHT HERO ===== */

/* ===== RS DEMO BUTTON WHITE 2026-10-13 =====
   "Book a Partner Demo" (middle button) is white with red text; the partner kit stays outlined. */
#top .rs-sec a.rs-btn--outline[href*="calendar.google"]{background:#fff;border-color:#fff;color:#c8102e!important}
#top .rs-sec a.rs-btn--outline[href*="calendar.google"]:hover,#top .rs-sec a.rs-btn--outline[href*="calendar.google"]:focus-visible{background:#fff;border-color:#fff;color:#a50e25!important;transform:translateY(-2px)}
/* ===== END RS DEMO BUTTON WHITE ===== */

/* ===== RS CENTERED BUTTONS + CLOSING CTA 2026-10-13 ===== */
#top .rs-steps .rs-btnrow,#top .vll-feat--light .rs-btnrow{justify-content:center}
#top .rs-cta .rs-headwide,#top .rs-cta .rs-btnblock{text-align:center}
#top .rs-cta .rs-headwide .av-special-heading-tag{float:none;width:100%;text-align:center}
#top .rs-cta .rs-headwide .av-special-heading-tag:after{margin-left:auto;margin-right:auto}
#top .rs-cta .rs-lead{margin-left:auto;margin-right:auto}
#top .rs-cta .rs-lead p{text-align:center}
#top .rs-cta .rs-btnrow{justify-content:center}
/* ===== END RS CENTERED ===== */


/* ===== RS SECTIONS: SHARP CUTS + FIXED BACKGROUNDS, STEPS TIMELINE, RESULT BANNER 2026-10-14 =====
   Sections meet on a sharp edge with a hairline and a short accent bar. Plain sections: why (gray),
   how (light), offer (light), faq (graphite). Image section (model; the hero is untouched). The closing CTA is a light gray section with a red box
   paint their artwork on a position:fixed layer clipped to the section (clip-path), which scrolls
   as a smooth GPU composited parallax. Phones, tablets, touch and reduced motion get a normal
   scrolling background instead. */

/* ---- sections ---------------------------------------------------------------- */
#top .rs-sec{position:relative;clip-path:inset(0)}
#top .rs-sec>.container{position:relative;z-index:2}

/* plain sections (the hero is untouched: it keeps its original scrolling background) */
#top #how-to-become-a-reseller,#top #what-you-can-offer{background-image:none!important;background-color:#f2f4f7!important}
#top #why-resell{background-image:none!important;background-color:#e3e6eb!important}
#top #reseller-faq{background-image:none!important;background-color:#1d1c20!important}

/* image sections: the section itself carries no image, the fixed layer does */
#top #reseller-model{background-image:none!important;background-color:#4a0509!important}
#top #reseller-model::before{content:"";position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;z-index:-1;pointer-events:none;background-repeat:no-repeat;background-size:cover;transform:translateZ(0);will-change:transform}
#top #reseller-model::before{background-image:url(../2026/09/combox-vll-bg-crimson.webp);background-position:top right}
@media (max-width:989px),(hover:none),(prefers-reduced-motion:reduce){
#top #reseller-model::before{position:absolute;height:100%;transform:none;will-change:auto}
}

/* hairline at the top of every section plus a short accent bar, so each cut looks intended */
#top .rs-sec{border-top:1px solid rgba(255,255,255,.18)!important}
#top .rs-sec.vll-feat--light{border-top-color:rgba(15,17,21,.12)!important}
#top .rs-sec::after{content:"";position:absolute;top:0;left:50%;width:96px;height:3px;margin-left:-48px;border-radius:0 0 3px 3px;background:#ff4d40;z-index:3;pointer-events:none}
#top .rs-sec.vll-feat--light::after{background:#e62b1e}
#top #reseller-model::after{background:#fff}


/* closing CTA: a plain light gray section (clean cut, no hairline, no bar) holding one rounded box:
   dark gradient towards crimson over the existing streaks artwork, with the copy and buttons inside */
#top #apply{background-image:none!important;background-color:#f2f4f7!important;border-top:0!important}
#top #apply::after{display:none}
#top #apply>.container{padding-top:80px;padding-bottom:84px}
#top .rs-cta .flex_column.rs-headwide{position:relative;overflow:hidden;border-radius:26px;padding:72px 48px 76px!important;border:1px solid rgba(255,255,255,.12);background:linear-gradient(120deg,rgba(18,17,21,.97) 0%,rgba(44,8,16,.9) 48%,rgba(150,12,32,.66) 100%),url(../2026/09/combox-bg-failover-streams-red.webp) center right/cover no-repeat;box-shadow:0 44px 80px -46px rgba(15,17,21,.75)}
#top .rs-cta .rs-headwide .av-special-heading-tag{color:#fff!important}
#top .rs-cta .rs-headwide .av-special-heading-tag:after{background:#fff}
#top .rs-cta .rs-lead p{color:rgba(255,255,255,.92)!important}

/* closing CTA and steps copy: keep readable where the artwork has a bright streak behind it */
#top .rs-cta .rs-headwide .av-special-heading-tag,#top .rs-cta .rs-lead p{text-shadow:0 2px 18px rgba(40,0,6,.85)}

/* ---- steps timeline ---------------------------------------------------------- */
#top .rs-steps .rs-headwide,#top .rs-steps .rs-headwide .rs-lead p{text-align:center}
#top .rs-steps .rs-headwide .av-special-heading-tag{float:none;width:100%;max-width:none;text-align:center}
#top .rs-steps .rs-headwide .av-special-heading-tag:after{margin-left:auto;margin-right:auto}
#top .rs-steps .rs-headwide .rs-lead{margin-left:auto;margin-right:auto}
#top .rs-steps .container .content{counter-reset:rsstep}
#top .rs-steps .flex_column_table.sc-av_one_fourth{display:block;width:100%!important;margin:0}
#top .rs-steps .av-flex-placeholder{display:none}
#top .rs-steps .flex_column.rs-step{display:grid!important;grid-template-columns:240px minmax(0,1fr);column-gap:40px;align-items:center;float:none!important;width:100%!important;max-width:900px;margin:0 auto!important;padding:0 0 44px 96px!important;position:relative;counter-increment:rsstep;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}
#top .rs-steps .flex_column.rs-step:hover{transform:none;box-shadow:none!important}
#top .rs-steps .flex_column.rs-step:last-of-type{padding-bottom:0!important}
/* Enfold hides column pseudo elements (clearfix: visibility hidden, height 0), so both need resetting */
#top .rs-steps .flex_column.rs-step::before,#top .rs-steps .flex_column.rs-step::after{visibility:visible;overflow:visible;clear:none}
#top .rs-steps .flex_column.rs-step::before{content:counter(rsstep) / "";position:absolute;left:0;top:calc((100% - 44px)/2);margin-top:-30px;width:60px;height:60px;border-radius:50%;background:#c8102e;color:#fff;font:800 24px/60px Poppins,Arial,sans-serif;text-align:center;box-shadow:0 0 0 8px rgba(200,16,46,.12),0 14px 24px -10px rgba(200,16,46,.65);z-index:2}
#top .rs-steps .flex_column.rs-step::after{content:"";position:absolute;left:29px;top:calc((100% - 44px)/2 + 38px);bottom:calc(38px - (100% - 44px)/2);height:auto;width:2px;background:linear-gradient(to bottom,rgba(200,16,46,.55),rgba(200,16,46,.15))}
#top .rs-steps .flex_column.rs-step:last-of-type::after{display:none}
#top .rs-step .rs-step-img{margin:0;padding:18px;border:1px solid var(--vf-line);border-radius:20px;background:#fff;box-shadow:0 24px 44px -30px rgba(15,17,21,.45);transition:transform .25s ease,box-shadow .25s ease}
#top .rs-steps .flex_column.rs-step:hover .rs-step-img{transform:translateY(-4px);box-shadow:0 30px 50px -30px rgba(15,17,21,.5)}
#top .rs-step .rs-step-img img{height:130px;width:100%;object-fit:contain}
#top .rs-step .rs-step-img .avia-image-container-inner,#top .rs-step .rs-step-img .avia-image-overlay-wrap{display:block}
/* the "Step n" eyebrow is replaced visually by the numbered node, kept for screen readers */
#top .rs-step-body .rs-step-no{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#top .rs-step-body h3{margin:0 0 10px;font-size:28px;color:var(--vf-ink)}
#top .rs-step-body p:not(.rs-step-no){max-width:58ch;font-size:17px;line-height:1.7;color:var(--vf-body)}

/* ---- result banner ------------------------------------------------------------ */
#top .vll-feat .flex_column.vll-feat-card--wide{padding:24px 38px!important;border-color:rgba(255,77,64,.45)!important;background:linear-gradient(90deg,rgba(230,43,30,.26),rgba(16,16,20,.78) 55%)!important}
#top .vll-feat .vll-feat-card--wide .iconbox_content{display:flex;align-items:center;gap:34px}
#top .vll-feat .vll-feat-card--wide .iconbox .entry-content-header,#top .vll-feat .vll-feat-card--wide .entry-content-header{flex:0 0 auto;margin:0;padding:0;border:0;white-space:nowrap}
#top .vll-feat .vll-feat-card--wide .entry-content-header:after{display:none}
#top .vll-feat .vll-feat-card--wide .iconbox_content_title{font-size:22px}
#top .vll-feat .vll-feat-card--wide .iconbox_content_container{flex:1 1 auto;max-width:none;padding:0 0 0 34px;border-left:1px solid rgba(255,255,255,.22)}
#top .vll-feat .vll-feat-card--wide .iconbox_content_container p{margin:0;font-size:19px;line-height:1.55;color:#fff}

/* ---- tablet / phone ----------------------------------------------------------- */
/* buttons under the timeline sit on light gray: outline variants need dark ink */
#top .rs-steps .rs-btn--outline{background:transparent;border-color:#141416;color:#141416!important}
#top .rs-steps .rs-btn--outline:hover,#top .rs-steps .rs-btn--outline:focus-visible{background:#c8102e;border-color:#c8102e;color:#fff!important}
#top .rs-steps a.rs-btn--outline[href*="calendar.google"]{background:#141416;border-color:#141416;color:#fff!important}
#top .rs-steps a.rs-btn--outline[href*="calendar.google"]:hover,#top .rs-steps a.rs-btn--outline[href*="calendar.google"]:focus-visible{background:#c8102e;border-color:#c8102e;color:#fff!important}
#top .rs-steps .rs-btnrow .rs-btn:focus-visible{outline-color:var(--vf-red-a11y)}

@media (max-width:989px){
#top .rs-steps .flex_column.rs-step{grid-template-columns:200px minmax(0,1fr);column-gap:28px;padding-left:84px!important}
#top .vll-feat .vll-feat-card--wide .iconbox_content{gap:24px}
#top .vll-feat .vll-feat-card--wide .iconbox_content_container{padding-left:24px}
}
@media (max-width:767px){
#top #apply>.container{padding-top:56px;padding-bottom:60px}
#top .rs-cta .flex_column.rs-headwide{padding:44px 22px 48px!important;border-radius:20px}
#top .rs-steps .flex_column.rs-step{grid-template-columns:minmax(0,1fr);row-gap:18px;padding:0 0 36px 66px!important;align-items:start;margin:0!important}
#top .rs-steps .flex_column.rs-step::before{top:0;margin-top:0;width:44px;height:44px;font-size:19px;line-height:44px;box-shadow:0 0 0 6px rgba(200,16,46,.12)}
#top .rs-steps .flex_column.rs-step::after{left:21px;top:52px;bottom:-4px}
#top .rs-step .rs-step-img{padding:14px}
#top .rs-step .rs-step-img img{height:110px}
#top .rs-step-body h3{font-size:23px}
#top .rs-step-body p:not(.rs-step-no){font-size:16px}
#top .vll-feat .flex_column.vll-feat-card--wide{padding:22px 22px!important}
#top .vll-feat .vll-feat-card--wide .iconbox_content{flex-direction:column;align-items:flex-start;gap:16px}
#top .vll-feat .vll-feat-card--wide .iconbox_content_container{padding:16px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.22);width:100%}
#top .vll-feat .vll-feat-card--wide .iconbox_content_container p{font-size:17px}
}
/* ===== END RS SECTIONS ===== */

/* red bar under section headings: same breathing room below as above (this page only) */
#top .rs-sec .av-special-heading-tag:after{margin-bottom:22px}
@media (max-width:767px){#top .rs-sec .av-special-heading-tag:after{margin-bottom:18px}}

/* ===== RS KIT LINK AS PLAIN TEXT 2026-10-19 ===== "Download Partner Kit" has no border or fill, like the hero. */
#top .rs-sec .rs-btn--text{background:transparent;border-color:transparent;padding-left:0;padding-right:0;color:#fff!important}
#top .rs-steps .rs-btn--text{color:#141416!important}
#top .rs-sec .rs-btn--text:hover,#top .rs-sec .rs-btn--text:focus-visible{background:transparent;border-color:transparent;text-decoration:underline!important;text-underline-offset:4px}
#top .rs-steps .rs-btn--text:hover,#top .rs-steps .rs-btn--text:focus-visible{color:#c8102e!important}

/* ===== RS HERO BUTTONS WIDER 2026-10-22 ===== Book a Demo + Apply Now: same height as before, longer in width. */
#top .rs-hero .mwh-bwhero-cta .avia-button:nth-of-type(1),#top .rs-hero .mwh-bwhero-cta .avia-button:nth-of-type(2){padding:14px 48px!important;font-size:14px!important}
/* ===== RS SECTION ACCENT LINES FULL WIDTH 2026-10-22 ===== the short bar at each section cut now spans the whole width. */
#top .rs-sec::after{left:0;width:100%;margin-left:0;border-radius:0}
/* ===== RS SECTION LINES 2PX, NO GAP 2026-10-22 ===== the 1px hairline border sat above the bar and showed as a pale gap; drop it so the 2px line is flush with the section edge. */
#top .rs-sec,#top .rs-sec.vll-feat--light{border-top:0!important}
#top .rs-sec::after{height:2px}
/* ===== RS SECTION LINES GRADIENT 2026-10-22 ===== dark red to light red, left to right. */
#top .rs-sec::after{background:linear-gradient(90deg,#a50e25 0%,#ff4d40 55%,#ff9a8f 100%)}
#top .rs-sec.vll-feat--light::after{background:linear-gradient(90deg,#8c0a1f 0%,#e62b1e 55%,#ff6a5c 100%)}
#top #reseller-model::after{background:linear-gradient(90deg,#a50e25 0%,#ff4d40 55%,#ff9a8f 100%)}
/* ===== RS HEADING BAR GRADIENT (LIGHT SECTIONS) 2026-10-22 ===== graphite ink to cool gray, matches the dark headings and the gradient section lines. */
#top .rs-sec.vll-feat--light .av-special-heading-tag:after{background:linear-gradient(90deg,#141416 0%,#8b93a1 100%)}
#top .rs-cta.rs-sec .rs-headwide .av-special-heading-tag:after{background:#fff}
/* ===== RS SECTION LINES GRAY ON LIGHT SECTIONS 2026-10-22 ===== graphite to light gray, same family as the heading bars; dark sections keep the red gradient. */
#top .rs-sec.vll-feat--light::after{background:linear-gradient(90deg,#2a2b30 0%,#8b93a1 55%,#c9ced6 100%)}
/* ===== RS SECTION LINES SILVER ON DARK SECTIONS 2026-10-22 ===== model + FAQ: steel gray to bright silver, no red. */
#top .rs-sec:not(.vll-feat--light)::after,#top #reseller-model::after{background:linear-gradient(90deg,#5a5f69 0%,#b4bac4 50%,#f4f5f7 100%)}
/* ===== RS HEADING BAR GRADIENT (DARK SECTIONS) 2026-10-22 ===== bright silver to steel gray, matches the silver section lines. */
#top .rs-sec.vll-feat:not(.vll-feat--light) .av-special-heading-tag:after,#top .rs-cta.rs-sec.vll-feat .rs-headwide .av-special-heading-tag:after{background:linear-gradient(90deg,#f4f5f7 0%,#8b93a1 100%)}
/* ===== SECTION TEXT A BIT BIGGER, SIZE ONLY 2026-10-22 ===== card text 15.5px to 17.5px, FAQ answers 16px to 17.5px. Family, weight and colour unchanged; the wide result banner keeps its own size. */
#top .rs-sec.vll-feat .vll-feat-card:not(.vll-feat-card--wide) .iconbox_content_container p,#top .rs-sec.vll-feat .vll-feat-card:not(.vll-feat-card--wide) .iconbox_content_container li{font-size:17.5px}
#top .rs-faq .rs-faq-a p{font-size:17.5px}
/* ===== RS RESTYLE 2026-11-01 ===== why = light fibre artwork (from the old homepage benefits section), closing CTA on the graphite world map, FAQ moved last and light. */
#top #why-resell{background-color:#f8f9fa!important;background-image:url(reseller-bg-wide.webp)!important;background-position:50% 100%!important;background-size:100% auto!important;background-repeat:no-repeat!important}
#top #reseller-faq{background-color:#f2f4f7!important}
#top #reseller-faq .rs-faq details{background:#fff;border:1px solid #dde2e9;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 12px 30px -24px rgba(15,17,21,.4)}
#top #reseller-faq .rs-faq details[open]{background:#fff;border-color:rgba(200,16,46,.45)}
#top #reseller-faq .rs-faq summary{color:#0f1115}
#top #reseller-faq .rs-faq summary:after{background:rgba(200,16,46,.1);color:#c8102e}
#top #reseller-faq .rs-faq details[open] summary:after,#top #reseller-faq .rs-faq summary:hover:after{background:rgba(200,16,46,.18)}
#top #reseller-faq .rs-faq summary:focus-visible{outline-color:#c8102e}
#top #reseller-faq .rs-faq .rs-faq-a p{color:#475569}
#top #reseller-faq .rs-faq .rs-faq-a a{color:#c8102e}
/* ===== RS CTA ON LIGHT 2026-11-01 ===== dark world map rejected. Light section (gray > near white > gray, matches offer above and FAQ below), faint dot grid fading out at the edges plus a soft red glow behind the box; box warmer red, red tinted shadow. */
/* ===== RS CTA GLOBE 2026-11-01 ===== light version rejected too. Section = existing att 15730 combox-bg-global-horizon.webp: the red lit Earth rises from the bottom, its glowing rim frames the (unchanged) red box. Extra bottom padding so the globe shows under the box. */
#top #apply>.container{padding-top:20px;padding-bottom:36px}
@media (max-width:767px){#top #apply>.container{padding-top:16px;padding-bottom:22px}}
/* ===== RS CTA GLASS + PARALLAX 2026-11-01 ===== red box removed: see-through glass panel so the globe shows. Globe painted on a fixed ::before (smooth parallax, same technique as the other image sections on this page); clip-path keeps it inside the section. Touch, narrow and reduced-motion fall back to a normal scrolling layer. */
#top #apply{background-image:none!important;background-color:#07070a!important;clip-path:inset(0)}
#top #apply::before{content:"";display:block;position:absolute;left:0;right:0;top:-25%;height:150%;z-index:-1;pointer-events:none;background:#8a0012 url(../2026/09/combox-bg-global-horizon-red.webp) center 80%/cover no-repeat;transform:translate3d(0,var(--cbx-py,0px),0);will-change:transform}
#top .rs-cta .flex_column.rs-headwide{background:rgba(20,20,24,.85);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%);box-shadow:0 30px 70px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12)}
#top .rs-cta .rs-headwide .av-special-heading-tag,#top .rs-cta .rs-lead p{text-shadow:0 2px 16px rgba(0,0,0,.65)}
/* parallax offset --cbx-py is set by the small script in mu-plugins/combox-reseller-page.php (moves ~45% of the section height across the viewport; off for reduced motion) */