/* ==========================================================================
   comBOX - WAN Bonding page (/technology/wan-bonding/)
   Scoped to .wb-* ; loaded only on that page by mu-plugin combox-wan-bonding.
   ========================================================================== */
#top.page .wb-sec{
  --wb-red:#e62b1e; --wb-red-hi:#ff3b30; --wb-red-deep:#a50e25;
  --wb-ink:#0f1115; --wb-body:#475569; --wb-line:#e3e7ed;
  --wb-soft:#f6f7f9; --wb-dark:#0a0a0c; --wb-dark-2:#141418;
  --wb-dline:rgba(255,255,255,.13); --wb-dbody:rgba(255,255,255,.74);
  --wb-r:14px;
  --wb-h:"Poppins",Arial,sans-serif;
}
#top .wb-sec{position:relative;overflow:hidden;isolation:isolate}
#top .wb-sec>.container{padding-top:clamp(52px,6.2vw,96px);padding-bottom:clamp(52px,6.2vw,96px);max-width:1310px}
#top .wb-sec .avia_codeblock,#top .wb-sec .av_codeblock_section{margin:0}
#top .wb-sec *,#top .wb-sec *:before,#top .wb-sec *:after{box-sizing:border-box}
#top .wb-sec p{margin:0 0 1em;font-size:17px;line-height:1.72;color:var(--wb-body)}
#top .wb-sec p:last-child{margin-bottom:0}
#top .wb-sec h2,#top .wb-sec h3,#top .wb-sec h4{font-family:var(--wb-h);color:var(--wb-ink);margin:0;letter-spacing:-.015em;text-transform:none}
#top .wb-sec h2{font-size:clamp(28px,3.3vw,42px);line-height:1.16;font-weight:800}
#top .wb-sec h3{font-size:clamp(19px,1.5vw,22px);line-height:1.3;font-weight:700}
#top .wb-sec h4{font-size:17px;line-height:1.35;font-weight:700}
#top .wb-sec a{color:var(--wb-red)}
#top .wb-sec strong{color:var(--wb-ink);font-weight:700}
/* dark variant */
#top .wb-sec--dark{color:#fff}
#top .wb-sec--dark h2,#top .wb-sec--dark h3,#top .wb-sec--dark h4{color:#fff}
#top .wb-sec--dark p{color:var(--wb-dbody)}
#top .wb-sec--dark strong{color:#fff}

/* eyebrow + heads */
#top .wb-sec .wb-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--wb-h);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--wb-red);margin:0 0 16px}
#top .wb-sec--dark .wb-eyebrow{color:var(--wb-red-hi)}
#top .wb-sec .wb-head{max-width:760px;margin:0 0 40px}
#top .wb-sec .wb-head--center{margin-left:auto;margin-right:auto;text-align:center}
#top .wb-sec .wb-head--center .wb-eyebrow{justify-content:center}
#top .wb-sec .wb-head p{margin-top:16px;font-size:18px}
#top .wb-sec .wb-lede{font-size:19px;line-height:1.66}/* ---------- buttons ---------- */
#top .wb-sec .wb-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--wb-h);font-size:15px;font-weight:600;line-height:1;letter-spacing:.01em;padding:16px 26px;border-radius:10px;border:1px solid transparent;text-decoration:none;transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
#top .wb-sec .wb-btn:focus-visible{outline:3px solid var(--wb-red-hi);outline-offset:3px}
#top .wb-sec .wb-btn--primary{background:var(--wb-red);border-color:var(--wb-red);color:#fff}
#top .wb-sec .wb-btn--primary:hover,#top .wb-sec .wb-btn--primary:focus{background:#c8231a;border-color:#c8231a;color:#fff;transform:translateY(-2px)}
#top .wb-sec .wb-btn--ghost{background:transparent;border-color:rgba(255,255,255,.34);color:#fff}
#top .wb-sec .wb-btn--ghost:hover,#top .wb-sec .wb-btn--ghost:focus{border-color:#fff;background:rgba(255,255,255,.08);color:#fff;transform:translateY(-2px)}
#top .wb-sec--light .wb-btn--ghost{border-color:var(--wb-line);color:var(--wb-ink)}
#top .wb-sec--light .wb-btn--ghost:hover{background:#fff;border-color:var(--wb-ink);color:var(--wb-ink)}
#top .wb-sec .wb-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
#top .wb-sec .wb-btn svg{width:16px;height:16px;flex:0 0 auto}
#top .wb-sec .wb-txtlink{display:inline-flex;align-items:center;gap:7px;font-family:var(--wb-h);font-weight:600;font-size:15px;color:var(--wb-red);text-decoration:none;border-bottom:1px solid rgba(230,43,30,.32);padding-bottom:2px}
#top .wb-sec .wb-txtlink:hover{border-bottom-color:var(--wb-red)}
#top .wb-sec--dark .wb-txtlink{color:#fff;border-bottom-color:rgba(255,255,255,.34)}
#top .wb-sec--dark .wb-txtlink:hover{border-bottom-color:#fff}
/* ---------- hero ---------- */

#top .wb-hero:before{content:"";position:absolute;inset:0;z-index:0;background:
  radial-gradient(900px 480px at 14% 8%,rgba(230,43,30,.26),transparent 62%),
  radial-gradient(760px 520px at 92% 92%,rgba(120,10,6,.34),transparent 64%),
  linear-gradient(180deg,#120406 0%,#08080a 62%)}
#top .wb-hero:after{content:"";position:absolute;inset:0;z-index:0;opacity:.5;background-image:
  linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 30%,#000 35%,transparent 100%);
  mask-image:radial-gradient(70% 70% at 50% 30%,#000 35%,transparent 100%)}
#top .wb-hero>.container{position:relative;z-index:1;padding-top:clamp(56px,6vw,84px);padding-bottom:clamp(56px,6vw,84px)}
#top .wb-hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,4vw,64px);align-items:center}
#top .wb-hero h1{font-family:var(--wb-h);font-size:clamp(32px,4.1vw,54px);line-height:1.08;font-weight:800;letter-spacing:-.025em;color:#fff;margin:0 0 20px;text-transform:none}
#top .wb-hero h1 .wb-hl{color:var(--wb-red-hi)}
#top .wb-hero .wb-lede{color:rgba(255,255,255,.8);max-width:36em}
#top .wb-hero__chips{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;list-style:none}
#top .wb-hero__chips li{font-family:var(--wb-h);font-size:12.5px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.88);background:rgba(255,255,255,.07);border:1px solid var(--wb-dline);border-radius:999px;padding:7px 14px}
#top .wb-hero__media{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--wb-dline);box-shadow:0 30px 70px -30px rgba(0,0,0,.9)}
#top .wb-hero__media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
#top .wb-hero__media figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 20px 16px;font-family:var(--wb-h);font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.9);background:linear-gradient(transparent,rgba(0,0,0,.78))}
@media (max-width:989px){#top .wb-hero__grid{grid-template-columns:1fr}#top .wb-hero__media{order:2}}/* ---------- generic grids + cards ---------- */
#top .wb-grid{display:grid;gap:22px}
#top .wb-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
#top .wb-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
#top .wb-card{background:#fff;border:1px solid var(--wb-line);border-radius:var(--wb-r);padding:30px 28px;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
#top .wb-card:hover{border-color:#cdd4de;box-shadow:0 18px 40px -26px rgba(15,17,21,.4);transform:translateY(-3px)}
#top .wb-card h3{margin-bottom:12px}
#top .wb-card p{font-size:16px;line-height:1.66}
#top .wb-sec--dark .wb-card{background:var(--wb-dark-2);border-color:var(--wb-dline)}
#top .wb-sec--dark .wb-card:hover{border-color:rgba(255,255,255,.26);box-shadow:none}
#top .wb-ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(230,43,30,.1);color:var(--wb-red);margin-bottom:18px}
#top .wb-ico svg{width:23px;height:23px;display:block}
#top .wb-sec--dark .wb-ico{background:rgba(255,59,48,.14);color:var(--wb-red-hi)}
/* ---------- definition / answer block ---------- */
#top .wb-answer{background:#fff;border:1px solid var(--wb-line);border-left:4px solid var(--wb-red);border-radius:var(--wb-r);padding:28px 30px;margin:0 0 34px;max-width:860px}
#top .wb-answer p{font-size:18.5px;line-height:1.68;color:var(--wb-ink)}
#top .wb-sec--dark .wb-answer{background:var(--wb-dark-2);border-color:var(--wb-dline);border-left-color:var(--wb-red-hi)}
#top .wb-sec--dark .wb-answer p{color:#fff}
/* ---------- split (text + figure) ---------- */
#top .wb-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3.4vw,56px);align-items:center}
#top .wb-split--wide{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
@media (max-width:989px){#top .wb-split,#top .wb-split--wide{grid-template-columns:1fr}}
#top .wb-figure{margin:0;border-radius:var(--wb-r);overflow:hidden;border:1px solid var(--wb-line);background:#fff}
#top .wb-sec--dark .wb-figure{border-color:var(--wb-dline);background:var(--wb-dark-2)}
#top .wb-figure img{display:block;width:100%;height:auto}
#top .wb-figure figcaption{padding:14px 18px;font-size:13.5px;line-height:1.5;color:var(--wb-body);border-top:1px solid var(--wb-line)}
#top .wb-sec--dark .wb-figure figcaption{color:var(--wb-dbody);border-top-color:var(--wb-dline)}
#top .wb-diagram{display:block;width:100%;height:auto}
/* ---------- numbered steps ---------- */
#top .wb-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:wbstep}
#top .wb-steps li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;align-items:start;background:var(--wb-dark-2);border:1px solid var(--wb-dline);border-radius:var(--wb-r);padding:22px 24px}
#top .wb-steps li:before{counter-increment:wbstep;content:counter(wbstep);display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:11px;background:rgba(255,59,48,.14);color:var(--wb-red-hi);font-family:var(--wb-h);font-weight:800;font-size:16px}
#top .wb-steps li h3{font-size:18px;margin-bottom:6px}
#top .wb-steps li p{font-size:15.5px;line-height:1.66;margin:0}
/* ---------- comparison table ---------- */
#top .wb-tablewrap{border:1px solid var(--wb-line);border-radius:var(--wb-r);overflow-x:auto;background:#fff;-webkit-overflow-scrolling:touch}
#top .wb-sec--dark .wb-tablewrap{border-color:var(--wb-dline);background:var(--wb-dark-2)}
#top table.wb-table{width:100%;min-width:640px;border-collapse:collapse;margin:0;font-size:15.5px}
#top table.wb-table caption{caption-side:top;text-align:left;padding:18px 22px 0;font-size:14px;color:var(--wb-body)}
#top table.wb-table th,#top table.wb-table td{padding:16px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--wb-line);line-height:1.58;color:var(--wb-body)}
#top .wb-sec--dark table.wb-table th,#top .wb-sec--dark table.wb-table td{border-bottom-color:var(--wb-dline);color:var(--wb-dbody)}
#top table.wb-table thead th{font-family:var(--wb-h);font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--wb-ink);background:var(--wb-soft);border-bottom:2px solid var(--wb-line)}
#top .wb-sec--dark table.wb-table thead th{color:#fff;background:rgba(255,255,255,.05);border-bottom-color:var(--wb-dline)}
#top table.wb-table tbody th{font-family:var(--wb-h);font-weight:600;font-size:15px;color:var(--wb-ink);width:30%}
#top .wb-sec--dark table.wb-table tbody th{color:#fff}
#top table.wb-table tr:last-child th,#top table.wb-table tr:last-child td{border-bottom:0}
#top table.wb-table .wb-col-hl{background:rgba(230,43,30,.045)}
#top .wb-sec--dark table.wb-table .wb-col-hl{background:rgba(255,59,48,.07)}
#top table.wb-table thead th.wb-col-hl{background:rgba(230,43,30,.1);color:var(--wb-red)}/* ---------- two-up contrast (vs failover) ---------- */
#top .wb-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media (max-width:767px){#top .wb-vs{grid-template-columns:1fr}}
#top .wb-vs__panel{background:var(--wb-dark-2);border:1px solid var(--wb-dline);border-radius:var(--wb-r);padding:28px 26px}
#top .wb-vs__panel--hl{border-color:rgba(255,59,48,.42);background:linear-gradient(180deg,rgba(230,43,30,.1),rgba(20,20,24,1) 55%)}
#top .wb-vs__tag{display:inline-block;font-family:var(--wb-h);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 11px;border-radius:999px;margin-bottom:16px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);border:1px solid var(--wb-dline)}
#top .wb-vs__panel--hl .wb-vs__tag{background:rgba(255,59,48,.16);color:var(--wb-red-hi);border-color:rgba(255,59,48,.34)}
#top .wb-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:11px}
#top .wb-list li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.62;color:var(--wb-dbody)}
#top .wb-sec--light .wb-list li,#top .wb-sec--soft .wb-list li{color:var(--wb-body)}
#top .wb-list li:before{content:"";position:absolute;left:0;top:.52em;width:12px;height:12px;border-radius:50%;border:2px solid var(--wb-red);background:transparent}
#top .wb-list--check li:before{border:0;width:16px;height:16px;top:.34em;background:var(--wb-red);-webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
#top .wb-sec--dark .wb-list--check li:before{background:var(--wb-red-hi)}
/* ---------- connection types ---------- */
#top .wb-conn{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:989px){#top .wb-conn{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479px){#top .wb-conn{grid-template-columns:1fr}}
#top .wb-conn__item{background:#fff;border:1px solid var(--wb-line);border-radius:var(--wb-r);padding:24px 22px;transition:border-color .2s ease,transform .2s ease}
#top .wb-conn__item:hover{border-color:rgba(230,43,30,.5);transform:translateY(-3px)}
#top .wb-conn__item h3{font-size:17px;margin-bottom:8px}
#top .wb-conn__item p{font-size:15px;line-height:1.6;margin:0}
#top .wb-conn__item .wb-ico{width:40px;height:40px;border-radius:10px;margin-bottom:14px}
#top .wb-conn__item .wb-ico svg{width:20px;height:20px}
#top .wb-note{display:flex;gap:16px;align-items:flex-start;margin-top:26px;padding:22px 24px;border-radius:var(--wb-r);background:rgba(230,43,30,.05);border:1px solid rgba(230,43,30,.22)}
#top .wb-note svg{width:22px;height:22px;flex:0 0 auto;color:var(--wb-red);margin-top:2px}
#top .wb-note p{font-size:15.5px;line-height:1.65;margin:0}
#top .wb-sec--dark .wb-note{background:rgba(255,59,48,.08);border-color:rgba(255,59,48,.26)}
#top .wb-sec--dark .wb-note svg{color:var(--wb-red-hi)}
/* ---------- use cases ---------- */
#top .wb-uc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:989px){#top .wb-uc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){#top .wb-uc{grid-template-columns:1fr}}
#top .wb-uc__card{display:flex;flex-direction:column;background:var(--wb-dark-2);border:1px solid var(--wb-dline);border-radius:var(--wb-r);overflow:hidden;transition:border-color .2s ease,transform .2s ease}
#top .wb-uc__card:hover{border-color:rgba(255,59,48,.45);transform:translateY(-3px)}
#top .wb-uc__card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
#top .wb-uc__body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1 1 auto}
#top .wb-uc__body h3{font-size:18px}
#top .wb-uc__body p{font-size:15.5px;line-height:1.62;margin:0}
#top .wb-uc__body .wb-txtlink{margin-top:auto;align-self:flex-start;padding-top:8px}/* ---------- capability grid (comBOX solution) ---------- */
#top .wb-cap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--wb-line);border:1px solid var(--wb-line);border-radius:var(--wb-r);overflow:hidden}
@media (max-width:989px){#top .wb-cap{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){#top .wb-cap{grid-template-columns:1fr}}
#top .wb-cap__item{background:#fff;padding:26px 24px}
#top .wb-cap__item h3,#top .wb-cap__item h4{font-size:16.5px;margin-bottom:9px}
#top .wb-cap__item p{font-size:15px;line-height:1.62;margin:0}
/* ---------- partner / reseller band ---------- */
#top .wb-partner{background:linear-gradient(135deg,#1a0508 0%,#0a0a0c 58%)}
#top .wb-partner:before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(700px 420px at 88% 12%,rgba(230,43,30,.26),transparent 62%)}
#top .wb-partner>.container{position:relative;z-index:1}
/* ---------- FAQ ---------- */
#top .wb-faq{display:grid;gap:12px;max-width:900px}
#top .wb-faq details{background:#fff;border:1px solid var(--wb-line);border-radius:12px;overflow:hidden}
#top .wb-faq details[open]{border-color:rgba(230,43,30,.38)}
#top .wb-faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px 24px;font-family:var(--wb-h);font-size:17px;font-weight:600;line-height:1.42;color:var(--wb-ink)}
#top .wb-faq summary::-webkit-details-marker{display:none}
#top .wb-faq summary:hover{color:var(--wb-red)}
#top .wb-faq summary:focus-visible{outline:3px solid var(--wb-red);outline-offset:-3px}
#top .wb-faq summary:after{content:"";flex:0 0 auto;width:20px;height:20px;margin-top:2px;background:currentColor;-webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s ease;color:var(--wb-red)}
#top .wb-faq details[open] summary:after{transform:rotate(45deg)}
#top .wb-faq__a{padding:0 24px 22px;max-width:74ch}
#top .wb-faq__a p{font-size:16px;line-height:1.7}
/* ---------- closing CTA ---------- */
#top .wb-cta{background:linear-gradient(135deg,#c8102e 0%,#8c0a1f 48%,#2a0509 100%)}
#top .wb-cta:before{content:"";position:absolute;inset:0;z-index:0;opacity:.32;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:48px 48px}
#top .wb-cta>.container{position:relative;z-index:1;text-align:center}
#top .wb-cta h2{color:#fff;max-width:18ch;margin:0 auto 18px}
#top .wb-cta p{color:rgba(255,255,255,.88);font-size:18px;max-width:64ch;margin:0 auto}
#top .wb-cta .wb-btns{justify-content:center}
#top .wb-cta .wb-btn--primary{background:#fff;border-color:#fff;color:#a50e25}
#top .wb-cta .wb-btn--primary:hover{background:#f4f4f5;border-color:#f4f4f5;color:#8c0a1f}
#top .wb-cta .wb-eyebrow{color:#fff}
/* ---------- anchors under the sticky header ---------- */
#top .wb-sec{scroll-margin-top:110px}
/* ---------- reveal (uses the shared combox-reveal observer) ---------- */
#top .wb-sec .boss-reveal{transition-duration:620ms}
@media (prefers-reduced-motion:reduce){
  #top .wb-sec *,#top .wb-sec *:before,#top .wb-sec *:after{transition-duration:.001ms!important;animation-duration:.001ms!important}
  #top .wb-sec .boss-reveal{opacity:1!important;transform:none!important}
}
/* ---------- responsive typography + spacing ---------- */
@media (max-width:767px){
  #top .wb-grid--2,#top .wb-grid--3{grid-template-columns:1fr}
  #top .wb-sec p{font-size:16px}
  #top .wb-sec .wb-head{margin-bottom:30px}
  #top .wb-sec .wb-btns{gap:10px}
  #top .wb-sec .wb-btn{width:100%;padding:15px 20px}
  #top .wb-answer{padding:22px 20px}
  #top .wb-card{padding:24px 22px}
  #top .wb-steps li{grid-template-columns:38px minmax(0,1fr);gap:14px;padding:18px 18px}
  #top .wb-steps li:before{width:38px;height:38px;font-size:15px}
  #top .wb-hero h1{letter-spacing:-.018em}
}
/* ---------- fixes / utilities ---------- */

#top .wb-mt{margin-top:clamp(28px,3vw,46px)}
/* steps: keep every text child in the second column, number in the first */
#top .wb-steps li>h3,#top .wb-steps li>p{grid-column:2}
/* architecture diagrams: readable on phones via horizontal scroll */
#top .wb-diagram-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
#top .wb-diagram-scroll:focus-visible{outline:3px solid var(--wb-red);outline-offset:-3px}
@media (max-width:900px){
  #top .wb-diagram{min-width:860px}
  #top .wb-diagram-scroll{padding-bottom:6px}
}
/* vs-panels also used on light sections */
#top .wb-sec--light .wb-vs__panel,#top .wb-sec--soft .wb-vs__panel{background:#fff;border-color:var(--wb-line)}
#top .wb-sec--light .wb-vs__panel--hl,#top .wb-sec--soft .wb-vs__panel--hl{border-color:rgba(230,43,30,.4);background:linear-gradient(180deg,rgba(230,43,30,.06),#fff 55%)}
#top .wb-sec--light .wb-vs__tag,#top .wb-sec--soft .wb-vs__tag{background:#f2f4f7;color:var(--wb-body);border-color:var(--wb-line)}
#top .wb-sec--light .wb-vs__panel--hl .wb-vs__tag,#top .wb-sec--soft .wb-vs__panel--hl .wb-vs__tag{background:rgba(230,43,30,.1);color:var(--wb-red);border-color:rgba(230,43,30,.26)}
#top .wb-vs--stack{grid-template-columns:1fr;gap:16px}
/* ---------- additional components ---------- */
#top .wb-subhead{font-size:clamp(20px,1.8vw,25px);font-weight:700;margin:0 0 20px}
#top .wb-fineprint{margin-top:18px;font-size:14.5px;line-height:1.66;color:#6b7280;max-width:88ch}
#top .wb-sec--dark .wb-fineprint{color:rgba(255,255,255,.52)}
#top .wb-mt-s{margin-top:34px}
#top .wb-chart{display:block;width:100%;height:auto}
#top .wb-figure--pad{padding:28px 26px}
#top .wb-band{margin:0;border-radius:var(--wb-r);overflow:hidden;border:1px solid var(--wb-dline);position:relative}
#top .wb-band img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
#top .wb-band figcaption{position:absolute;left:0;right:0;bottom:0;padding:56px 28px 20px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.94);background:linear-gradient(transparent,rgba(0,0,0,.82))}
@media (max-width:767px){#top .wb-band figcaption{position:static;padding:16px 18px;background:rgba(255,255,255,.05)}#top .wb-band img{aspect-ratio:4/3}}
#top .wb-deflist{margin:0;padding:0}
#top .wb-deflist dt{font-family:var(--wb-h);font-size:15.5px;font-weight:700;color:var(--wb-ink);margin:16px 0 4px}
#top .wb-deflist dt:first-child{margin-top:0}
#top .wb-deflist dd{margin:0;font-size:15px;line-height:1.6;color:var(--wb-body)}
#top .wb-note--block{display:flex;gap:16px;align-items:flex-start;margin-top:0;background:#fff;border-color:var(--wb-line)}
#top .wb-note--block p+p{margin-top:.8em}
#top .wb-list--panel{background:var(--wb-dark-2);border:1px solid var(--wb-dline);border-radius:var(--wb-r);padding:30px 30px 30px 28px;margin:0;gap:15px}
#top .wb-list--panel li{padding-left:30px;font-size:16px}
#top .wb-faq-more{margin-top:24px;font-size:16px;max-width:900px}
#top .wb-sec .wb-faq summary::marker{content:""}
@media (max-width:767px){
  #top .wb-figure--pad{padding:22px 18px}
  #top .wb-list--panel{padding:24px 22px}
  #top .wb-cta h2{max-width:none}
}
/* ---------- breadcrumb ---------- */
#top .wb-crumbs{margin:0 0 18px}
#top .wb-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#top .wb-crumbs li{font-family:var(--wb-h);font-size:13px;font-weight:500;color:rgba(255,255,255,.58)}
#top .wb-crumbs li+li:before{content:"/";margin-right:8px;color:rgba(255,255,255,.34)}
#top .wb-crumbs a{color:rgba(255,255,255,.72);text-decoration:none;border-bottom:1px solid transparent}
#top .wb-crumbs a:hover,#top .wb-crumbs a:focus{color:#fff;border-bottom-color:rgba(255,255,255,.55)}
#top .wb-crumbs [aria-current="page"]{color:#fff}
/* ==========================================================================
   Accessibility pass
   The brand red #e62b1e scores 4.44:1 on white - just under WCAG AA (4.5:1)
   for text below 18.66px bold / 24px regular, which covers the eyebrows,
   inline links, text links and the primary button label. --wb-red-a11y
   (#cc1f14) is the same hue two steps darker and scores 5.52:1, so small red
   text and white-on-red both pass. #e62b1e is kept for large/decorative use
   and #ff3b30 continues to serve the dark sections (5.58:1).
   ========================================================================== */
#top.page .wb-sec{--wb-red-a11y:#cc1f14}
#top .wb-sec--light .wb-eyebrow,#top .wb-sec--soft .wb-eyebrow{color:var(--wb-red-a11y)}
#top .wb-hero .wb-eyebrow{color:var(--wb-red-hi)}
#top .wb-sec--light a,#top .wb-sec--soft a{color:var(--wb-red-a11y)}
#top .wb-sec--light .wb-txtlink,#top .wb-sec--soft .wb-txtlink{color:var(--wb-red-a11y);border-bottom-color:rgba(204,31,20,.36)}
#top .wb-sec--light .wb-txtlink:hover,#top .wb-sec--soft .wb-txtlink:hover{border-bottom-color:var(--wb-red-a11y)}
#top .wb-sec .wb-btn--primary{background:var(--wb-red-a11y);border-color:var(--wb-red-a11y)}
#top .wb-sec .wb-btn--primary:hover,#top .wb-sec .wb-btn--primary:focus{background:#a8170f;border-color:#a8170f}
#top .wb-cta .wb-btn--primary{background:#fff;border-color:#fff;color:#8c0a1f}
#top .wb-cta .wb-btn--primary:hover,#top .wb-cta .wb-btn--primary:focus{background:#f4f4f5;border-color:#f4f4f5;color:#71081a}
#top table.wb-table thead th.wb-col-hl{color:var(--wb-red-a11y)}
#top .wb-sec--light .wb-answer,#top .wb-sec--soft .wb-answer{border-left-color:var(--wb-red-a11y)}
#top .wb-sec--light .wb-list li:before,#top .wb-sec--soft .wb-list li:before{border-color:var(--wb-red-a11y)}
#top .wb-sec--light .wb-list--check li:before,#top .wb-sec--soft .wb-list--check li:before{background:var(--wb-red-a11y)}
#top .wb-sec--light .wb-ico,#top .wb-sec--soft .wb-ico{background:rgba(204,31,20,.1);color:var(--wb-red-a11y)}
#top .wb-sec--light .wb-note,#top .wb-sec--soft .wb-note{background:rgba(204,31,20,.05);border-color:rgba(204,31,20,.22)}
#top .wb-sec--light .wb-note svg,#top .wb-sec--soft .wb-note svg{color:var(--wb-red-a11y)}
#top .wb-faq summary:after{color:var(--wb-red-a11y)}
#top .wb-faq details[open]{border-color:rgba(204,31,20,.4)}
/* visible keyboard focus on everything interactive in the page */
#top .wb-sec a:focus-visible,#top .wb-sec summary:focus-visible,#top .wb-sec [tabindex]:focus-visible{outline:3px solid var(--wb-red-a11y);outline-offset:3px;border-radius:4px}
#top .wb-sec--dark a:focus-visible,#top .wb-hero a:focus-visible,#top .wb-cta a:focus-visible{outline-color:#ffffff}
/* ---------- fixes round 2 ---------- */
/* .wb-eyebrow is a <p>, so "#top .wb-sec .wb-head p" was out-specifying it and
   rendering every section eyebrow at 18px. Scope the head rule to real paragraphs. */
#top .wb-sec .wb-head p.wb-eyebrow{font-size:12px;margin-top:0}
#top .wb-cta p{color:rgba(255,255,255,.94)}
/* scroll affordance for the wide diagrams on small screens */
#top .wb-scrollhint{display:none;margin:0 0 10px;font-family:var(--wb-h);font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--wb-dbody)}
#top .wb-sec--light .wb-scrollhint,#top .wb-sec--soft .wb-scrollhint{color:var(--wb-body)}
@media (max-width:900px){#top .wb-scrollhint{display:block}}
/* ---------- on this page ---------- */
#top .wb-toc{border:1px solid var(--wb-line);border-radius:var(--wb-r);padding:22px 24px;margin:0 0 clamp(34px,4vw,52px);background:#fff}
#top .wb-toc .wb-toc__label{font-family:var(--wb-h);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--wb-body);margin:0 0 14px}
#top .wb-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;counter-reset:wbtoc}
#top .wb-toc li{margin:0}
#top .wb-toc a{display:inline-flex;align-items:center;gap:8px;font-family:var(--wb-h);font-size:14px;font-weight:600;line-height:1.2;color:var(--wb-ink);text-decoration:none;background:var(--wb-soft);border:1px solid var(--wb-line);border-radius:999px;padding:9px 15px;transition:border-color .18s ease,background-color .18s ease,color .18s ease}
#top .wb-toc a:before{counter-increment:wbtoc;content:counter(wbtoc);font-size:11px;font-weight:700;color:var(--wb-red-a11y)}
#top .wb-toc a:hover,#top .wb-toc a:focus{border-color:var(--wb-red-a11y);background:#fff;color:var(--wb-red-a11y)}
@media (max-width:767px){#top .wb-toc{padding:18px 18px}#top .wb-toc a{font-size:13.5px;padding:8px 13px}}
#top .wb-sec .wb-toc .wb-toc__label{font-size:12px;line-height:1.2}

/* three-up card grids are too narrow at tablet width - drop to two, then one */
@media (max-width:989px){#top .wb-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){#top .wb-grid--3{grid-template-columns:1fr}}
/* Section background colours now come from the Avia section settings (custom_bg),
   so changing a background in the layout builder actually takes effect.
   The eyebrow rule keeps its flex layout; the decorative dash before it is gone. */
#top .wb-sec .wb-eyebrow{gap:0}

/* ==========================================================================
   Native Avia elements - wrapper normalisation
   The page is built from real ALB elements (heading, text block, button row,
   image, columns) so everything is editable in the layout builder. Enfold
   wraps each one in its own markup; these rules make those wrappers behave
   like the plain tags the page design was written against.
   ========================================================================== */
/* Heading element: Enfold floats the tag left and puts a decorative border
   beside it. Unfloat it, hide the border, and let the page's own h2/h3 rules win. */
#top .wb-sec .av-special-heading{margin:0;padding:0}
#top .wb-sec .av-special-heading .special-heading-border{display:none}
#top .wb-sec .av-special-heading-tag{float:none;clear:both;display:block;width:auto;max-width:none!important;margin:0;padding:0;font-family:var(--wb-h);letter-spacing:-.015em;text-transform:none}
/* Enfold paints & in the accent colour with its own font */
#top .wb-sec .av-special-heading-tag .special_amp{color:inherit;font-family:inherit;font-style:inherit;font-weight:inherit;font-size:inherit}
/* Text block: strip the wrapper's own spacing; the inner div carries custom_class */
#top .wb-sec .av_textblock_section{margin:0;padding:0;position:static}
#top .wb-sec .avia_textblock{margin:0;padding:0;position:static}
/* Eyebrow, when it is its own text block */
#top .wb-sec .wb-eyebrow-tb p{display:inline-flex;align-items:center;font-family:var(--wb-h);font-size:12px;font-weight:700;letter-spacing:.14em;line-height:1.72;text-transform:uppercase;color:var(--wb-red);margin:0 0 16px}
#top .wb-sec--dark .wb-eyebrow-tb p,#top .wb-hero .wb-eyebrow-tb p{color:var(--wb-red-hi)}
#top .wb-sec--light .wb-eyebrow-tb p,#top .wb-sec--soft .wb-eyebrow-tb p{color:var(--wb-red-a11y)}
#top .wb-cta .wb-eyebrow-tb p{color:#fff}
#top .wb-head--center .wb-eyebrow-tb,#top .wb-head--center .wb-eyebrow-tb p{text-align:center}
/* Button row: Enfold's own flex wrapper, restyled as the page's .wb-btn.
   Button row items accept no custom_class, so the variants are addressed by
   position (nth-of-type, because Enfold can emit style tags between items). */
#top .wb-sec .avia-buttonrow-wrap{display:flex;flex-wrap:wrap;gap:14px;margin:32px 0 0;width:auto}
#top .wb-sec .avia-buttonrow-center{justify-content:center}
#top .wb-sec .avia-buttonrow-wrap .avia-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;float:none;margin:0!important;padding:16px 26px!important;min-width:0;width:auto;max-width:none;border-radius:10px;border:1px solid transparent;text-decoration:none;font-family:var(--wb-h)!important;font-size:15px!important;font-weight:600!important;line-height:1!important;letter-spacing:.01em;text-transform:none;transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
#top .wb-sec .avia-buttonrow-wrap .avia-button .avia_iconbox_title{font-family:var(--wb-h)!important;font-size:15px!important;font-weight:600!important;line-height:1!important;letter-spacing:.01em}
#top .wb-sec .avia-buttonrow-wrap .avia-button:hover{transform:translateY(-2px)}
#top .wb-sec .avia-buttonrow-wrap .avia-button:focus-visible{outline:3px solid var(--wb-red-a11y);outline-offset:3px}
#top .wb-sec--dark .avia-buttonrow-wrap .avia-button:focus-visible,#top .wb-hero .avia-buttonrow-wrap .avia-button:focus-visible,#top .wb-cta .avia-buttonrow-wrap .avia-button:focus-visible{outline-color:#fff}
/* solid primary + outline secondary, in that order */
#top .wb-sec .wb-btns a.avia-button:nth-of-type(1){background-color:var(--wb-red-a11y)!important;border-color:var(--wb-red-a11y)!important;color:#fff!important}
#top .wb-sec .wb-btns a.avia-button:nth-of-type(1) .avia_iconbox_title{color:#fff!important}
#top .wb-sec .wb-btns a.avia-button:nth-of-type(1):hover{background-color:#a8170f!important;border-color:#a8170f!important}
#top .wb-sec .wb-btns a.avia-button:nth-of-type(2){background-color:transparent!important;border-color:rgba(255,255,255,.34)!important;color:#fff!important}
#top .wb-sec .wb-btns a.avia-button:nth-of-type(2) .avia_iconbox_title{color:#fff!important}
#top .wb-sec .wb-btns a.avia-button:nth-of-type(2):hover{border-color:#fff!important;background-color:rgba(255,255,255,.08)!important}
/* closing CTA inverts the pair: white solid, white outline */
#top .wb-cta .wb-btns a.avia-button:nth-of-type(1){background-color:#fff!important;border-color:#fff!important;color:#8c0a1f!important}
#top .wb-cta .wb-btns a.avia-button:nth-of-type(1) .avia_iconbox_title{color:#8c0a1f!important}
#top .wb-cta .wb-btns a.avia-button:nth-of-type(1):hover{background-color:#f4f4f5!important;border-color:#f4f4f5!important;color:#71081a!important}
#top .wb-cta .wb-btns a.avia-button:nth-of-type(1):hover .avia_iconbox_title{color:#71081a!important}
@media (max-width:767px){#top .wb-sec .avia-buttonrow-wrap{gap:10px}#top .wb-sec .avia-buttonrow-wrap .avia-button{width:100%;padding:15px 20px!important}}
/* The heading element keeps the per-section width and centring the design had,
   which the generic max-width reset above would otherwise remove. */
#top .wb-cta .av-special-heading-tag{max-width:18ch!important;margin-left:auto;margin-right:auto;margin-bottom:18px}
/* Head and body groups are now full-width Avia columns, so each one has its own
   settings panel in the builder. Enfold floats columns; the centred heads need
   that undone so their auto margins work again. */
#top .wb-sec .flex_column.wb-head{margin:0 0 40px;padding:0}
#top .wb-sec .flex_column.wb-body-col,#top .wb-sec .flex_column.wb-pre-col{margin:0;padding:0}
#top .wb-sec .flex_column.wb-head--center{float:none;margin-left:auto;margin-right:auto}
#top .wb-sec .flex_column.wb-body-col,#top .wb-sec .flex_column.wb-pre-col{float:none;width:100%;clear:both}
#top .wb-sec .wb-head-intro p{margin-top:16px;font-size:18px}
#top .wb-sec .wb-head--center .wb-head-intro,#top .wb-sec .wb-head--center .wb-head-intro p{text-align:center}
/* Avia runs wpautop over text-block content, which leaves empty paragraphs
   between the block-level elements of the hand-written markup. They are not in
   the source and must not take up space. */
#top .wb-sec .avia_textblock p:empty{display:none}
/* The partner band is now two real Avia columns. Enfold floats columns at fixed
   percentages; this restores the original asymmetric split and its fluid gap,
   while the columns keep their own settings panels in the builder. */
#top #wan-bonding-for-partners .entry-content-wrapper{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,3.4vw,56px);align-items:center}
#top #wan-bonding-for-partners .entry-content-wrapper>.flex_column{float:none;width:auto;margin:0;padding:0;min-height:0}
@media (max-width:989px){#top #wan-bonding-for-partners .entry-content-wrapper{grid-template-columns:1fr}}
/* Hero: two real Avia columns laid out on the original grid. */
#top .wb-hero .entry-content-wrapper{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,4vw,64px);align-items:center}
#top .wb-hero .entry-content-wrapper>.flex_column{float:none;width:auto;margin:0;padding:0;min-height:0}
@media (max-width:989px){
  #top .wb-hero .entry-content-wrapper{grid-template-columns:1fr}
  #top .wb-hero .entry-content-wrapper>.wb-hero__mediacol{order:2}
}
/* Hero image element: the caption is Enfold's overlay, restyled as the original
   gradient strip so the image stays a normal, swappable image element. */
#top .wb-hero .wb-hero__media{margin:0}
#top .wb-hero .wb-hero__media .avia-image-container-inner,#top .wb-hero .wb-hero__media .avia-image-overlay-wrap{display:block;border-radius:inherit;overflow:hidden}
#top .wb-hero .wb-hero__media .av-image-caption-overlay{position:absolute;left:0;right:0;bottom:0;top:auto;height:auto;width:auto;display:block;opacity:1;visibility:visible;background:linear-gradient(transparent,rgba(0,0,0,.78));padding:34px 20px 16px;pointer-events:none}
#top .wb-hero .wb-hero__media .av-image-caption-overlay-center{display:block;position:static;transform:none;padding:0;margin:0;font-family:var(--wb-h);font-size:12.5px;font-weight:600;letter-spacing:.05em;line-height:1.3;text-transform:uppercase;color:rgba(255,255,255,.9);text-align:left}
#top .wb-hero .wb-hero__media .av-image-caption-overlay-center p{margin:0;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;text-transform:inherit;color:inherit}
/* .entry-content-wrapper carries Enfold's .clearfix, whose :before/:after become
   grid items once the wrapper is a grid - they take the first cell and push the
   real columns into the wrong tracks. Not needed here: nothing floats. */
#top .wb-hero .entry-content-wrapper:before,#top .wb-hero .entry-content-wrapper:after,
#top #wan-bonding-for-partners .entry-content-wrapper:before,#top #wan-bonding-for-partners .entry-content-wrapper:after{display:none}
/* Enfold nests two more layers inside the caption overlay; flatten them so the
   caption sits in the gradient strip exactly as the original figcaption did. */
#top .wb-hero .wb-hero__media .av-caption-image-overlay-bg{display:none}
#top .wb-hero .wb-hero__media .av-image-caption-overlay-position{position:static;display:block;width:auto;height:auto;padding:0;margin:0;transform:none}
#top .wb-hero .av-special-heading-tag{margin-bottom:20px}
/* Enfold emits a clearing <br> after a column row. Harmless while the wrapper
   floats, but as a grid it becomes a third item and opens a second row. */
#top .wb-hero .entry-content-wrapper>br,#top #wan-bonding-for-partners .entry-content-wrapper>br{display:none}
/* In the old markup the partner band's left block set the row height and left 25px
   more space under the content than centring alone produces. Everything inside the
   section sits within 1px of where it did; this keeps the section's height identical too. */
#top #wan-bonding-for-partners>.container{padding-bottom:calc(clamp(52px,6.2vw,96px) + 25px)}
@media (max-width:989px){#top #wan-bonding-for-partners>.container{padding-bottom:clamp(52px,6.2vw,96px)}}
/* The original code blocks ended with a whitespace text node, which rendered as one
   empty 26px line at the foot of each section. Converting to text blocks removed it,
   so every section with a body column came out 26px shorter. Put the spacing back so
   the section rhythm is unchanged. */
#top .wb-sec .flex_column.wb-body-col{margin-bottom:26px}
/* "What is WAN bonding" never lost that trailing line - it has the contents block
   ahead of its heading, so its body column ends differently. No compensation here. */
#top #what-is-wan-bonding .flex_column.wb-body-col{margin-bottom:0}
/* Hero background sized like the home page's.
   The image is 1920x1080 (16:9). Enfold offers only contain (letterboxes on any
   other ratio) or cover (crops). The home page uses neither: it sizes by WIDTH so
   the image always reaches both side edges and is never cropped, anchors it to the
   bottom, and fills the leftover space above with #3b0000 - the colour of the
   image's own top edge - so the join is invisible. Size is the only part Enfold
   cannot express, so it is the only thing overridden here; the image, position and
   colour all still come from the section settings. */
#top .wb-hero{background-size:100% auto!important}
/* ---------- section artwork (added 2026-09-23) ---------- */
#top .wb-sec .wb-def-row{display:flex;align-items:center;gap:30px;margin:0 0 34px}
#top .wb-sec .wb-def-row .wb-answer{margin:0}
#top .wb-sec .wb-def-art{flex:0 0 300px;max-width:300px}
#top .wb-sec .wb-body-art{width:100%;max-width:480px;margin:0 0 30px}
#top .wb-sec .wb-partner-art{width:100%;max-width:340px;margin:30px 0 0}
#top .wb-sec .wb-def-art img,#top .wb-sec .wb-body-art img,#top .wb-sec .wb-partner-art img{display:block;width:100%;height:auto}
@media only screen and (max-width:989px){
#top .wb-sec .wb-def-row{display:block}
#top .wb-sec .wb-def-row .wb-answer{margin:0 0 26px}
#top .wb-sec .wb-def-art{max-width:300px;margin:0 auto}
#top .wb-sec .wb-body-art,#top .wb-sec .wb-partner-art{margin-left:auto;margin-right:auto}
}

/* ---------- card icons as images (added 2026-09-23) ---------- */
#top .wb-sec .wb-ico.wb-ico--img{background:none;border-radius:0}
#top .wb-sec .wb-ico.wb-ico--img img{width:46px;height:46px;display:block}

/* ---------- frosted glass in how-wan-bonding-works (2026-09-23) ---------- */
#top #how-wan-bonding-works .wb-figure,
#top #how-wan-bonding-works .wb-steps li{
  background:rgba(20,20,24,.76);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
  backdrop-filter:blur(18px) saturate(125%);
}
#top #how-wan-bonding-works .wb-figure svg rect{fill:rgba(255,255,255,.05)}

/* The section background is contain/no-repeat/FIXED, so it only covers a band at
   the top of the viewport and the step cards had almost nothing behind them to
   blur. This ambient glow gives them a backdrop comparable to the panel's, so the
   identical rule above yields the same look. Absolutely positioned on purpose:
   .wb-steps is a grid, and an in-flow pseudo-element would become a grid item. */
#top #how-wan-bonding-works .wb-steps{position:relative}
#top #how-wan-bonding-works .wb-steps:before{
  content:"";position:absolute;top:-70px;bottom:-70px;left:-12%;right:-12%;
  z-index:0;pointer-events:none;
  background:
    radial-gradient(55% 26% at 50% 5%, rgba(230,43,30,.18), rgba(230,43,30,0) 72%),
    radial-gradient(62% 30% at 16% 42%, rgba(200,26,18,.13), rgba(200,26,18,0) 74%),
    radial-gradient(62% 30% at 86% 76%, rgba(200,26,18,.11), rgba(200,26,18,0) 74%);
}
#top #how-wan-bonding-works .wb-steps>li{position:relative;z-index:1}

@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  #top #how-wan-bonding-works .wb-figure,
  #top #how-wan-bonding-works .wb-steps li{background:rgba(20,20,24,.94)}
}
/* spacing fix 2026-09-25: these utilities were written as #top .wb-x (1,1,0) and lost to the #top .wb-sec h3 / #top .wb-sec p resets (1,1,1), so they rendered with 0 margin */
#top .wb-sec .wb-subhead{margin-bottom:20px}
#top .wb-sec * + .wb-subhead,#top .wb-sec .wb-mt{margin-top:clamp(28px,3vw,46px)}
#top .wb-sec .wb-mt-s{margin-top:34px}
#top .wb-sec .wb-fineprint{margin-top:18px}
#top .wb-sec .wb-faq-more{margin-top:24px}
/* what-is split: text column was centred against the taller card stack; sit it on the bottom edge instead */
#top #what-is-wan-bonding .wb-split>:first-child{align-self:end}
/* dark-link contrast 2026-09-25: brand red #e62b1e is only ~4.4:1 on the near-black sections; inline links there use a lighter red (~6:1) */
#top .wb-sec--dark p a:not(.wb-txtlink),#top .ek-netmesh-host li a{color:#ff4d40}
/* connection-type cards 2026-09-25: title separated from its list, each item a distinct row */
#top #bond-different-connections .wb-card h3{font-size:21px;padding-bottom:16px;margin-bottom:4px;border-bottom:1px solid var(--wb-line);position:relative}
#top #bond-different-connections .wb-card h3:after{content:"";position:absolute;left:0;bottom:-1px;width:36px;height:3px;border-radius:2px;background:var(--wb-red)}
#top #bond-different-connections .wb-deflist{margin:0}
#top #bond-different-connections .wb-deflist dt{display:flex;align-items:center;gap:10px;margin:0;padding-top:16px;font-family:var(--wb-h);font-size:15.5px;font-weight:700;line-height:1.35;color:var(--wb-ink)}
#top #bond-different-connections .wb-deflist dt:before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--wb-red);box-shadow:0 0 0 4px rgba(230,43,30,.12)}
#top #bond-different-connections .wb-deflist dd{margin:6px 0 0;padding:0 0 16px 18px;font-size:14.5px;line-height:1.6;color:var(--wb-body);border-bottom:1px solid var(--wb-line)}
#top #bond-different-connections .wb-deflist dd:last-of-type{border-bottom:0;padding-bottom:0}

/* faq centred 2026-09-25: list and follow-up line sit under the centred heading */
#top #wan-bonding-faq .wb-faq,#top #wan-bonding-faq .wb-faq-more{margin-left:auto;margin-right:auto}
#top #wan-bonding-faq .wb-faq-more{text-align:center}

/* fixed-bg restore 2026-09-25: .wb-partner's background shorthand reset attachment to scroll; honour the builder's Fixed setting (touch devices keep Enfold's scroll fallback) */
html:not(.avia_mobile) #top .wb-sec.avia-bg-style-fixed{background-attachment:fixed}

/* how-it-works caption 2026-09-25: caption moved above the diagram and enlarged */
#top #how-wan-bonding-works .wb-figure{display:flex;flex-direction:column}
#top #how-wan-bonding-works .wb-figure figcaption{order:-1;font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.88);padding:18px 24px;border-top:0;border-bottom:1px solid var(--wb-dline)}
/* how-it-works caption polish 2026-09-25: header strip with red accent bar */
#top #how-wan-bonding-works .wb-figure figcaption{position:relative;font-family:var(--wb-h);font-weight:500;font-size:16.5px;letter-spacing:-.005em;line-height:1.6;color:rgba(255,255,255,.92);padding:22px 32px 22px 50px;background:linear-gradient(90deg,rgba(230,43,30,.16),rgba(230,43,30,0) 65%)}
#top #how-wan-bonding-works .wb-figure figcaption:before{content:"";position:absolute;left:30px;top:22px;bottom:22px;width:3px;border-radius:2px;background:var(--wb-red-hi)}
@media (max-width:767px){#top #how-wan-bonding-works .wb-figure figcaption{font-size:15.5px;padding:18px 20px 18px 36px}#top #how-wan-bonding-works .wb-figure figcaption:before{left:20px;top:18px;bottom:18px}}
/* scrollhint specificity 2026-09-25: #top .wb-sec p was overriding the 12.5px hint to 17px; also inset it from the box edge */
#top .wb-sec .wb-scrollhint{margin:0;padding:14px 20px 0;font-size:12.5px;line-height:1.5}

/* comparison caption polish 2026-09-25: same header-strip treatment as the how-it-works caption, light version */
#top #wan-bonding-vs-load-balancing table.wb-table caption{position:relative;font-family:var(--wb-h);font-style:normal;font-weight:500;font-size:16.5px;letter-spacing:-.005em;line-height:1.6;color:#1f2937;padding:22px 32px 22px 50px;background:linear-gradient(90deg,rgba(230,43,30,.08),rgba(230,43,30,0) 65%);border-bottom:1px solid var(--wb-line)}
#top #wan-bonding-vs-load-balancing table.wb-table caption:before{content:"";position:absolute;left:30px;top:22px;bottom:22px;width:3px;border-radius:2px;background:var(--wb-red)}
#top #wan-bonding-vs-load-balancing table.wb-table caption *{font-style:normal}
@media (max-width:767px){#top #wan-bonding-vs-load-balancing table.wb-table caption{font-size:15.5px;padding:18px 20px 18px 36px}#top #wan-bonding-vs-load-balancing table.wb-table caption:before{left:20px;top:18px;bottom:18px}}
/* comparison caption mobile 2026-09-25: the caption spanned the full scrollable table width, cutting its text off; pin it to the visible box */
@media (max-width:767px){#top #wan-bonding-vs-load-balancing .wb-tablewrap{container-type:inline-size}#top #wan-bonding-vs-load-balancing table.wb-table caption{position:sticky;left:0;box-sizing:border-box;width:100cqw;max-width:100cqw}}

/* lb diagram caption 2026-09-25: same header strip as the other captions, above the diagram, light version */
#top #wan-bonding-vs-load-balancing .wb-figure{display:flex;flex-direction:column}
#top #wan-bonding-vs-load-balancing .wb-figure figcaption{order:-1;position:relative;font-family:var(--wb-h);font-style:normal;font-weight:500;font-size:16.5px;letter-spacing:-.005em;line-height:1.6;color:#1f2937;padding:22px 32px 22px 50px;background:linear-gradient(90deg,rgba(230,43,30,.08),rgba(230,43,30,0) 65%);border-top:0;border-bottom:1px solid var(--wb-line)}
#top #wan-bonding-vs-load-balancing .wb-figure figcaption:before{content:"";position:absolute;left:30px;top:22px;bottom:22px;width:3px;border-radius:2px;background:var(--wb-red)}
@media (max-width:767px){#top #wan-bonding-vs-load-balancing .wb-figure figcaption{font-size:15.5px;padding:18px 20px 18px 36px}#top #wan-bonding-vs-load-balancing .wb-figure figcaption:before{left:20px;top:18px;bottom:18px}}
/* links on red sections 2026-09-25: the dark sections now carry crimson backgrounds, so inline links are white + underline instead of red */
#top .wb-sec--dark p a:not(.wb-txtlink){color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-decoration-thickness:1.5px;text-underline-offset:4px;transition:text-decoration-color .2s ease}
#top .wb-sec--dark p a:not(.wb-txtlink):hover{color:#fff;text-decoration-color:#fff}

/* 2026-10-01: 3px divider between CTA and How it works */
#top #partner-model{border-top:3px solid #cdcdcd !important;}

/* 2026-10-01: graphite frame so the dusk photo separates from the crimson bg */
#top .wb-band{background:#141416;padding:14px;border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.25)}
#top .wb-band img{border-radius:calc(var(--wb-r) - 4px)}
#top .wb-band figcaption{left:14px;right:14px;bottom:14px;border-radius:0 0 calc(var(--wb-r) - 4px) calc(var(--wb-r) - 4px)}
@media (max-width:767px){#top .wb-band{padding:8px}#top .wb-band figcaption{background:transparent;padding:14px 10px 6px}}

/* 2026-10-01: red titles on the use-case cards */
#top #wan-bonding-use-cases .wb-card h3{color:#ff3b30}

/* 2026-10-01: pin use-case card links to the bottom */
#top #wan-bonding-use-cases .wb-card{display:flex;flex-direction:column}
#top #wan-bonding-use-cases .wb-card>p:last-child{margin-top:auto;padding-top:1em;margin-bottom:0}

/* 2026-10-01: hover effect on capability cells */
#top .wb-cap__item{position:relative;transition:background-color .25s ease,box-shadow .25s ease}
#top .wb-cap__item h3,#top .wb-cap__item h4{transition:color .25s ease,transform .25s ease}
@media (hover:hover){#top .wb-cap__item:hover{background:linear-gradient(180deg,rgba(230,43,30,.07),rgba(230,43,30,.015) 70%),#fff;box-shadow:inset 0 3px 0 #cc1f14,0 10px 28px rgba(20,20,24,.10);z-index:1}#top .wb-cap__item:hover h3,#top .wb-cap__item:hover h4{color:#cc1f14;transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){#top .wb-cap__item,#top .wb-cap__item h3,#top .wb-cap__item h4{transition:none}#top .wb-cap__item:hover h3,#top .wb-cap__item:hover h4{transform:none}}

/* FAQ cards 2026-10-01: rounded cards, tinted open state, rotating plus icon */
#top .wb-faq details{border:1px solid var(--wb-line);border-radius:16px;background:#fff;margin:0 0 12px;overflow:hidden;transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease}
#top .wb-faq details:hover{border-color:#d3d9e1}
#top .wb-faq details[open]{border-color:rgba(204,31,20,.35);background:linear-gradient(180deg,rgba(230,43,30,.05),#fff 70%);box-shadow:0 18px 40px -26px rgba(15,17,21,.3)}
#top .wb-faq summary{padding:21px 26px;transition:color .2s ease}
#top .wb-faq details[open] summary{color:#cc1f14}
#top .wb-faq summary:after{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
#top .wb-faq .wb-faq__a{padding:0 26px 22px}
@media (prefers-reduced-motion:reduce){#top .wb-faq details,#top .wb-faq summary,#top .wb-faq summary:after{transition:none!important}}
/* ===== 2026-10-01 LOCAL TRIAL v4: "Ideal Use-Cases / Benefits" - editorial rows + glowing timeline (content untouched) ===== */
/* 1. flatten builder wrappers into one 12-col grid */
#top #reseller-benefits .entry-content-wrapper{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:22px;row-gap:0;align-items:stretch}
#top #reseller-benefits .entry-content-wrapper:before,#top #reseller-benefits .entry-content-wrapper:after,#top #reseller-benefits .av-flex-placeholder,#top #reseller-benefits .hr{display:none!important}
#top #reseller-benefits .flex_column_table,#top #reseller-benefits .flex_column_table>.flex_column,#top #reseller-benefits .av_textblock_section,#top #reseller-benefits .avia_textblock,#top #reseller-benefits .features-wrapper,#top #reseller-benefits .features-wrapper>div{display:contents!important}
#top #reseller-benefits .flex_column_table>.flex_column{background:none!important;box-shadow:none!important;border:0!important;padding:0!important}
/* 2. headings */
#top #reseller-benefits .av-special-heading{grid-column:1/-1;margin:0 0 clamp(26px,3vw,40px)!important}
#top #reseller-benefits .av_two_fifth .av-special-heading{margin-top:clamp(64px,7vw,110px)!important;text-align:center}
#top #reseller-benefits .av-special-heading .special-heading-border{display:none!important}
#top #reseller-benefits .av-special-heading h2{font-size:clamp(32px,4vw,56px)!important;line-height:1.05!important;letter-spacing:-.035em!important;float:none!important;max-width:none!important}
#top #reseller-benefits .usecase-title h2{color:#0f1115!important}
#top #reseller-benefits .av_two_fifth h2{background:linear-gradient(90deg,#b80000,#ff3b30);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}
/* 3. use-cases: big editorial rows, no cards. icon | title | description | arrow */
#top #reseller-benefits .feature-item{grid-column:1/-1;position:relative;display:grid!important;grid-template-columns:96px minmax(0,1.05fr) minmax(0,1fr) 64px;align-items:center;column-gap:clamp(18px,2.4vw,40px);padding:clamp(22px,2.6vw,34px) 18px;border-top:1px solid rgba(15,17,21,.16);background:linear-gradient(90deg,rgba(230,43,30,.16),rgba(230,43,30,0) 75%) 0 0/0% 100% no-repeat;transition:background-size .6s cubic-bezier(.2,.7,.2,1),padding .4s ease}
#top #reseller-benefits .feature-item:nth-child(4){border-bottom:1px solid rgba(15,17,21,.16)}
#top #reseller-benefits .feature-item .icon-box{grid-column:1;width:84px!important;height:84px!important;border-radius:26px!important;background:linear-gradient(135deg,#ff3b30,#b80000)!important;box-shadow:0 22px 40px -16px rgba(184,0,0,.85),inset 0 1px 0 rgba(255,255,255,.45)!important;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
#top #reseller-benefits .feature-item>div:not(.icon-box){display:contents}
#top #reseller-benefits .feature-item h3{grid-column:2;margin:0!important;font-size:clamp(26px,3.1vw,46px)!important;line-height:1.05!important;letter-spacing:-.03em;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
#top #reseller-benefits .feature-item h3 a{color:#0f1115!important;font-weight:800!important;transition:color .3s ease}
#top #reseller-benefits .feature-item h3 a:after{content:"";position:absolute;inset:0;z-index:2}
#top #reseller-benefits .feature-item p{grid-column:3;margin:0!important;color:#3f4a5a!important;font-size:clamp(15px,1.2vw,17.5px)!important;line-height:1.6!important}
#top #reseller-benefits .feature-item:after{content:"";grid-column:4;justify-self:end;width:56px;height:56px;border-radius:50%;border:2px solid rgba(15,17,21,.25);background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1115' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/24px no-repeat;transition:background-color .35s ease,border-color .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){
#top #reseller-benefits .feature-item:hover{background-size:100% 100%}
#top #reseller-benefits .feature-item:hover .icon-box{transform:scale(1.08) rotate(-5deg)}
#top #reseller-benefits .feature-item:hover h3{transform:translateX(12px)}
#top #reseller-benefits .feature-item:hover h3 a{color:#cc1f14!important}
#top #reseller-benefits .feature-item:hover:after{background-color:#cc1f14;border-color:#cc1f14;transform:translateX(-6px) rotate(-45deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
}
/* 4. benefits: a glowing timeline rail, badge on the line, text beneath */
#top #reseller-benefits .av_two_fifth ul{grid-column:1/-1;position:relative;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:0!important;padding:46px 12px 40px!important;border-radius:32px;background:radial-gradient(70% 90% at 50% 0%,rgba(255,59,48,.16),rgba(255,59,48,0) 70%),linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.38));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
#top #reseller-benefits .av_two_fifth ul:before{content:"";position:absolute;left:10%;right:10%;top:68px;height:4px;border-radius:4px;background:linear-gradient(90deg,#b80000,#ff3b30 50%,#b80000);box-shadow:0 0 22px 2px rgba(255,59,48,.55)}
#top #reseller-benefits .av_two_fifth li{position:relative;display:flex;flex-direction:column;align-items:center!important;gap:26px;padding:0 clamp(10px,1.4vw,24px)!important;text-align:center}
#top #reseller-benefits .av_two_fifth li br{display:none}
#top #reseller-benefits .av_two_fifth li span:first-child{position:relative;z-index:1;width:46px!important;height:46px;flex:0 0 46px!important;margin:0!important;border-radius:50%;display:grid;place-items:center;font-size:20px!important;color:#cc1f14!important;background:#fff;box-shadow:0 0 0 6px rgba(255,59,48,.2),0 0 28px rgba(255,59,48,.65);transition:transform .4s cubic-bezier(.2,.7,.2,1),background-color .3s ease,color .3s ease;animation:cbx-pulse 3.2s ease-in-out infinite}
#top #reseller-benefits .av_two_fifth li:nth-child(2) span:first-child{animation-delay:.5s}
#top #reseller-benefits .av_two_fifth li:nth-child(3) span:first-child{animation-delay:1s}
#top #reseller-benefits .av_two_fifth li:nth-child(4) span:first-child{animation-delay:1.5s}
#top #reseller-benefits .av_two_fifth li:nth-child(5) span:first-child{animation-delay:2s}
#top #reseller-benefits .av_two_fifth li span:last-child{color:#1b2330!important;font-weight:600;font-size:clamp(16px,1.25vw,18.5px);line-height:1.5!important;max-width:24ch}
@keyframes cbx-pulse{0%,100%{box-shadow:0 0 0 6px rgba(255,59,48,.2),0 0 28px rgba(255,59,48,.65)}50%{box-shadow:0 0 0 14px rgba(255,59,48,0),0 0 36px rgba(255,59,48,.9)}}
@media (hover:hover){
#top #reseller-benefits .av_two_fifth li:hover span:first-child{transform:scale(1.18);background:#cc1f14;color:#fff!important}
}
/* responsive: rows simplify, timeline turns vertical */
@media (max-width:989px){
#top #reseller-benefits .feature-item{grid-template-columns:76px minmax(0,1fr);row-gap:8px}
#top #reseller-benefits .feature-item .icon-box{grid-row:1/3;width:68px!important;height:68px!important;border-radius:22px!important}
#top #reseller-benefits .feature-item h3{grid-column:2}
#top #reseller-benefits .feature-item p{grid-column:2}
#top #reseller-benefits .feature-item:after{display:none}
#top #reseller-benefits .av_two_fifth ul{grid-template-columns:1fr;row-gap:30px!important;padding:34px 22px!important}
#top #reseller-benefits .av_two_fifth ul:before{left:44px;right:auto;top:56px;bottom:56px;width:4px;height:auto}
#top #reseller-benefits .av_two_fifth li{flex-direction:row;text-align:left;align-items:center!important;gap:22px;padding:0!important}
#top #reseller-benefits .av_two_fifth li span:last-child{max-width:none}
}
@media (prefers-reduced-motion:reduce){#top #reseller-benefits .feature-item,#top #reseller-benefits .feature-item *,#top #reseller-benefits .av_two_fifth li span{transition:none!important;animation:none!important;transform:none!important}}

/* v4 size fix 2026-10-01: section titles match the rest of the page; row titles/text smaller */
#top #reseller-benefits .av-special-heading h2{font-size:clamp(28px,3.3vw,42px)!important;line-height:1.16!important;letter-spacing:-.015em!important}
#top #reseller-benefits .feature-item h3{font-size:clamp(21px,2.2vw,30px)!important;line-height:1.2!important;letter-spacing:-.02em}
#top #reseller-benefits .feature-item h3 a{font-weight:700!important}
#top #reseller-benefits .feature-item p{font-size:clamp(14.5px,1.05vw,16px)!important;line-height:1.6!important}
#top #reseller-benefits .feature-item{grid-template-columns:76px minmax(0,1.05fr) minmax(0,1fr) 56px;padding-top:clamp(20px,2.2vw,28px);padding-bottom:clamp(20px,2.2vw,28px)}
#top #reseller-benefits .feature-item .icon-box{width:68px!important;height:68px!important;border-radius:22px!important}
#top #reseller-benefits .feature-item:after{width:48px;height:48px}
#top #reseller-benefits .av_two_fifth li span:last-child{font-size:clamp(15px,1.1vw,17px)}
@media (max-width:989px){
#top #reseller-benefits .feature-item{grid-template-columns:60px minmax(0,1fr);column-gap:16px}
#top #reseller-benefits .feature-item .icon-box{width:56px!important;height:56px!important;border-radius:18px!important}
#top #reseller-benefits .feature-item h3{font-size:clamp(19px,4.6vw,24px)!important}
#top #reseller-benefits .feature-item p{font-size:15px!important}
}

/* 2026-10-06: eyebrows on dark/crimson sections are white, not red (client request) */
#top .wb-sec--dark .wb-eyebrow,#top .wb-hero .wb-eyebrow,#top .wb-sec--dark .wb-eyebrow-tb p,#top .wb-hero .wb-eyebrow-tb p{color:#fff}

/* 2026-10-06: use-case cards on the crimson background - glass panels, white type */
#top #wan-bonding-use-cases .wb-card{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04)),rgba(26,6,8,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.22);border-top:3px solid #fff;box-shadow:0 18px 40px -18px rgba(0,0,0,.65);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
#top #wan-bonding-use-cases .wb-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.4);box-shadow:0 26px 50px -18px rgba(0,0,0,.75)}
#top #wan-bonding-use-cases .wb-card h3{color:#fff;letter-spacing:-.005em}
#top #wan-bonding-use-cases .wb-card p{color:rgba(255,255,255,.9)}
#top #wan-bonding-use-cases .wb-card .wb-txtlink{color:#fff;border-bottom-color:rgba(255,255,255,.55)}
#top #wan-bonding-use-cases .wb-card .wb-txtlink:hover{border-bottom-color:#fff}
/* 2026-10-06 round 2: use-case cards, more refined - index number, divided title, pinned link row with arrow */
#top #wan-bonding-use-cases .wb-grid{counter-reset:wbuc}
#top #wan-bonding-use-cases .wb-card{display:flex;flex-direction:column;border-radius:16px;padding:30px 30px 26px;background:linear-gradient(155deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 55%),rgba(18,5,7,.68);border:1px solid rgba(255,255,255,.14);border-top:1px solid rgba(255,255,255,.30);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 26px 50px -26px rgba(0,0,0,.75)}
#top #wan-bonding-use-cases .wb-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.28);border-top-color:rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 32px 56px -26px rgba(0,0,0,.85)}
#top #wan-bonding-use-cases .wb-card h3{position:relative;font-size:20px;line-height:1.3;font-weight:600;color:#fff;margin:0 0 18px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.14)}
#top #wan-bonding-use-cases .wb-card h3:before{counter-increment:wbuc;content:counter(wbuc,decimal-leading-zero);display:block;font-family:var(--wb-h);font-size:12px;font-weight:600;line-height:1;letter-spacing:.18em;color:rgba(255,255,255,.55);margin-bottom:16px}
#top #wan-bonding-use-cases .wb-card h3:after{content:"";position:absolute;left:0;bottom:-1px;width:34px;height:2px;border-radius:2px;background:#fff}
#top #wan-bonding-use-cases .wb-card p{font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.84)}
#top #wan-bonding-use-cases .wb-card p:last-child{margin:auto 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.12)}
#top #wan-bonding-use-cases .wb-card p:nth-last-child(2){margin-bottom:22px}
#top #wan-bonding-use-cases .wb-card .wb-txtlink{font-size:14.5px;font-weight:600;letter-spacing:.01em;border-bottom:0;padding-bottom:0;gap:9px}
#top #wan-bonding-use-cases .wb-card .wb-txtlink:after{content:"\2192";display:inline-block;font-weight:500;transition:transform .2s ease}
#top #wan-bonding-use-cases .wb-card .wb-txtlink:hover:after{transform:translateX(5px)}
/* 2026-10-06 round 3: use-case cards - numbers removed, calmer panel, footer strip for the link */
#top #wan-bonding-use-cases .wb-card{overflow:hidden;border-radius:14px;padding:34px 32px 0;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),rgba(14,5,7,.78);border:1px solid rgba(255,255,255,.12);box-shadow:0 22px 44px -26px rgba(0,0,0,.8)}
#top #wan-bonding-use-cases .wb-card:hover{transform:none;border-color:rgba(255,255,255,.32);box-shadow:0 26px 48px -26px rgba(0,0,0,.9)}
#top #wan-bonding-use-cases .wb-card h3{font-size:19.5px;line-height:1.3;font-weight:600;letter-spacing:-.005em;margin:0 0 14px;padding:0;border:0}
#top #wan-bonding-use-cases .wb-card h3:before{counter-increment:none;content:"";display:block;width:28px;height:2px;border-radius:2px;background:rgba(255,255,255,.75);margin:0 0 20px}
#top #wan-bonding-use-cases .wb-card h3:after{display:none}
#top #wan-bonding-use-cases .wb-card p{font-size:15px;line-height:1.72;color:rgba(255,255,255,.78)}
#top #wan-bonding-use-cases .wb-card p:nth-last-child(2){margin-bottom:28px}
#top #wan-bonding-use-cases .wb-card p:last-child{margin:auto -32px 0;padding:16px 32px;border-top:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);transition:background .2s ease}
#top #wan-bonding-use-cases .wb-card:hover p:last-child{background:rgba(255,255,255,.08)}
#top #wan-bonding-use-cases .wb-card .wb-txtlink{display:flex;justify-content:space-between;width:100%;font-size:14px;letter-spacing:.02em}
/* 2026-10-06 round 3b: rule goes under the title, not above it */
#top #wan-bonding-use-cases .wb-card h3{margin:0 0 18px}
#top #wan-bonding-use-cases .wb-card h3:before{display:none}
#top #wan-bonding-use-cases .wb-card h3:after{content:"";display:block;position:static;width:28px;height:2px;border-radius:2px;background:rgba(255,255,255,.75);margin:16px 0 0}
/* 2026-10-06: use-cases background was size:contain (builder 'full contain'), leaving bare bands left/right on any viewport wider than 16:9. Cover fills edge to edge. */
#top #wan-bonding-use-cases.wb-sec{background-size:cover!important;background-position:50% 50%!important}
/* 2026-10-06: how-it-works steps - numbers replaced by 3D icons */
#top #how-wan-bonding-works .wb-steps li{grid-template-columns:64px minmax(0,1fr);column-gap:22px;row-gap:6px;padding:22px 24px;align-items:start}
#top #how-wan-bonding-works .wb-steps li:before{display:none;content:none}
#top #how-wan-bonding-works .wb-steps li>.wb-step-ico{grid-column:1;grid-row:1 / span 2;display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin:0}
#top #how-wan-bonding-works .wb-steps li>.wb-step-ico img{display:block;width:56px;height:56px;max-width:none;margin:0}
#top #how-wan-bonding-works .wb-steps li>h3{margin:2px 0 0}
@media (max-width:600px){#top #how-wan-bonding-works .wb-steps li{grid-template-columns:48px minmax(0,1fr);column-gap:14px;padding:18px 16px}#top #how-wan-bonding-works .wb-steps li>.wb-step-ico{width:48px;height:48px}#top #how-wan-bonding-works .wb-steps li>.wb-step-ico img{width:44px;height:44px}}v5 benefits polish 2026-10-08: solid badges on the rail, equal glass cards, step numbers */
#top #reseller-benefits .av_two_fifth h2:after{content:"";display:block;width:64px;height:4px;border-radius:4px;margin:16px auto 0;background:linear-gradient(90deg,#b80000,#ff3b30)}
#top #reseller-benefits .av_two_fifth ul{counter-reset:cbxstep;padding:50px 22px 40px!important;border-radius:36px;border:1px solid rgba(255,255,255,.85);background:radial-gradient(60% 70% at 50% 0%,rgba(255,59,48,.12),rgba(255,59,48,0) 70%),linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.52));box-shadow:0 34px 70px -34px rgba(184,0,0,.38),inset 0 1px 0 #fff}
#top #reseller-benefits .av_two_fifth ul:before{left:10%;right:10%;top:77px;height:5px;box-shadow:0 0 18px 1px rgba(255,59,48,.4)}
#top #reseller-benefits .av_two_fifth li{counter-increment:cbxstep;gap:24px;margin:0!important;padding:0 10px!important}
#top #reseller-benefits .av_two_fifth li span:first-child{width:60px!important;height:60px;flex:0 0 60px!important;font-size:26px!important;font-weight:700;color:#fff!important;background:linear-gradient(135deg,#ff3b30,#b80000);box-shadow:0 0 0 6px #fff,0 14px 28px -6px rgba(184,0,0,.65);animation:cbx-pulse2 3.2s ease-in-out infinite}
#top #reseller-benefits .av_two_fifth li span:last-child{flex:1 1 auto;width:100%;max-width:none;box-sizing:border-box;padding:20px 18px 22px;border-radius:22px;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.95);box-shadow:0 16px 34px -20px rgba(15,17,21,.35);font-size:clamp(14.5px,1.1vw,16.5px);font-weight:600;line-height:1.55!important;text-wrap:balance;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
#top #reseller-benefits .av_two_fifth li span:last-child:before{content:"0" counter(cbxstep);display:block;margin-bottom:10px;font-size:12px;font-weight:800;letter-spacing:.22em;color:#cc1f14}
@keyframes cbx-pulse2{0%,100%{box-shadow:0 0 0 6px #fff,0 14px 28px -6px rgba(184,0,0,.65)}50%{box-shadow:0 0 0 6px #fff,0 0 0 16px rgba(255,59,48,.14),0 14px 34px -4px rgba(184,0,0,.85)}}
@media (hover:hover){
#top #reseller-benefits .av_two_fifth li:hover span:first-child{transform:scale(1.1);background:linear-gradient(135deg,#ff3b30,#b80000);color:#fff!important}
#top #reseller-benefits .av_two_fifth li:hover span:last-child{transform:translateY(-5px);box-shadow:0 24px 40px -20px rgba(184,0,0,.5)}
}
@media (max-width:989px){
#top #reseller-benefits .av_two_fifth ul{padding:28px 18px!important;row-gap:22px!important}
#top #reseller-benefits .av_two_fifth ul:before{left:42px;right:auto;top:58px;bottom:58px;width:4px;height:auto}
#top #reseller-benefits .av_two_fifth li{flex-direction:row;align-items:center!important;gap:18px;padding:0!important;text-align:left}
#top #reseller-benefits .av_two_fifth li span:first-child{width:52px!important;height:52px;flex:0 0 52px!important;font-size:22px!important}
#top #reseller-benefits .av_two_fifth li span:last-child{width:auto;padding:16px 18px 18px}
}
@media (prefers-reduced-motion:reduce){#top #reseller-benefits .av_two_fifth li span{animation:none!important;transition:none!important;transform:none!important}}

/* v6 benefits, professional 2026-10-08: flat badges, hairline rail, left-aligned cards, no glow/pulse */
#top #reseller-benefits .av_two_fifth h2{background:none;-webkit-text-fill-color:#c8102e;color:#c8102e!important}
#top #reseller-benefits .av_two_fifth h2:after{width:48px;height:3px;border-radius:2px;margin:14px auto 0;background:#c8102e}
#top #reseller-benefits .av_two_fifth ul{grid-template-columns:repeat(5,minmax(0,1fr));gap:0 20px!important;padding:44px 36px 36px!important;border-radius:20px;border:1px solid rgba(15,17,21,.08);background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 24px 48px -32px rgba(15,17,21,.4)}
#top #reseller-benefits .av_two_fifth ul:before{left:58px;right:36px;top:66px;height:2px;border-radius:0;background:linear-gradient(90deg,#c8102e,rgba(200,16,46,.2));box-shadow:none}
#top #reseller-benefits .av_two_fifth li{align-items:flex-start!important;gap:22px;padding:0!important;text-align:left}
#top #reseller-benefits .av_two_fifth li span:first-child{width:44px!important;height:44px;flex:0 0 44px!important;font-size:20px!important;font-weight:600;background:#c8102e;color:#fff!important;box-shadow:0 0 0 5px #fff,0 0 0 6px rgba(15,17,21,.1);animation:none}
#top #reseller-benefits .av_two_fifth li span:last-child{padding:20px 20px 22px;border-radius:12px;background:#fff;border:1px solid rgba(15,17,21,.09);box-shadow:0 1px 2px rgba(15,17,21,.05);font-size:clamp(14.5px,1.05vw,16px);font-weight:500;color:#1b2330!important;line-height:1.6!important;text-wrap:pretty;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
#top #reseller-benefits .av_two_fifth li span:last-child:before{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(15,17,21,.09);font-size:12px;font-weight:700;letter-spacing:.14em;color:#c8102e}
@media (hover:hover){
#top #reseller-benefits .av_two_fifth li:hover span:first-child{transform:none;background:#c8102e}
#top #reseller-benefits .av_two_fifth li:hover span:last-child{transform:translateY(-3px);border-color:rgba(200,16,46,.45);box-shadow:0 14px 28px -18px rgba(15,17,21,.4)}
}
@media (max-width:989px){
#top #reseller-benefits .av_two_fifth ul{grid-template-columns:1fr;row-gap:16px!important;padding:24px 18px!important}
#top #reseller-benefits .av_two_fifth ul:before{left:39px;right:auto;top:46px;bottom:46px;width:2px;height:auto;background:linear-gradient(180deg,#c8102e,rgba(200,16,46,.2))}
#top #reseller-benefits .av_two_fifth li{flex-direction:row;align-items:center!important;gap:16px}
#top #reseller-benefits .av_two_fifth li span:first-child{width:42px!important;height:42px;flex:0 0 42px!important;font-size:19px!important}
#top #reseller-benefits .av_two_fifth li span:last-child{padding:16px 18px}
}

/* v7 benefit cards 2026-10-08: header row (number + topic icon), divider, roomier body text */
#top #reseller-benefits .av_two_fifth li span:last-child{position:relative;padding:16px 20px 24px;font-size:clamp(15px,1.1vw,16.5px);font-weight:500;line-height:1.65!important;letter-spacing:0}
#top #reseller-benefits .av_two_fifth li span:last-child:before{margin:0 0 18px;padding:0 0 16px;line-height:36px;border-bottom:1px solid rgba(15,17,21,.09)}
#top #reseller-benefits .av_two_fifth li span:last-child:after{content:"";position:absolute;top:16px;right:20px;width:36px;height:36px;border-radius:10px;background-color:rgba(200,16,46,.08);background-repeat:no-repeat;background-position:center;background-size:18px}
#top #reseller-benefits .av_two_fifth li:nth-child(1) span:last-child:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8102e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpolyline points='16 7 22 7 22 13'/%3E%3C/svg%3E")}
#top #reseller-benefits .av_two_fifth li:nth-child(2) span:last-child:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8102e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10v6M2 10l10-5 10 5-10 5z'/%3E%3Cpath d='M6 12v5c3 3 9 3 12 0v-5'/%3E%3C/svg%3E")}
#top #reseller-benefits .av_two_fifth li:nth-child(3) span:last-child:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8102e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E")}
#top #reseller-benefits .av_two_fifth li:nth-child(4) span:last-child:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8102e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E")}
#top #reseller-benefits .av_two_fifth li:nth-child(5) span:last-child:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8102e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E")}
@media (hover:hover){#top #reseller-benefits .av_two_fifth li:hover span:last-child:after{background-color:rgba(200,16,46,.14)}}

/* v8 benefits, editorial columns 2026-10-08: no cards/badges/rail; hairline-divided columns, big numerals */
#top #reseller-benefits .av_two_fifth ul{grid-template-columns:repeat(5,minmax(0,1fr));gap:0!important;padding:0!important;border-radius:6px;border:1px solid rgba(15,17,21,.1);background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 30px 60px -40px rgba(15,17,21,.45);overflow:hidden}
#top #reseller-benefits .av_two_fifth ul:before{display:none}
#top #reseller-benefits .av_two_fifth li{display:block;margin:0!important;padding:42px 30px 40px!important;text-align:left;border-left:1px solid rgba(15,17,21,.1);transition:background-color .3s ease}
#top #reseller-benefits .av_two_fifth li:first-child{border-left:0}
#top #reseller-benefits .av_two_fifth li:after{content:"";position:absolute;top:0;left:30px;width:40px;height:3px;background:#c8102e;transition:width .35s cubic-bezier(.2,.7,.2,1)}
#top #reseller-benefits .av_two_fifth li span:first-child{display:none!important}
#top #reseller-benefits .av_two_fifth li span:last-child{display:block;width:auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none;font-size:clamp(15px,1.1vw,16.5px);font-weight:500;line-height:1.7!important;color:#2a3342!important;text-wrap:pretty}
#top #reseller-benefits .av_two_fifth li span:last-child:before{display:block;margin:0 0 22px;padding:0;border:0;line-height:1;font-size:clamp(34px,3vw,46px);font-weight:700;letter-spacing:-.03em;color:#c8102e}
#top #reseller-benefits .av_two_fifth li span:last-child:after{display:none!important}
@media (hover:hover){
#top #reseller-benefits .av_two_fifth li:hover{background:rgba(200,16,46,.035)}
#top #reseller-benefits .av_two_fifth li:hover:after{width:72px}
#top #reseller-benefits .av_two_fifth li:hover span:last-child{transform:none;border-color:transparent;box-shadow:none}
}
@media (max-width:989px){
#top #reseller-benefits .av_two_fifth ul{grid-template-columns:1fr;row-gap:0!important;padding:0!important}
#top #reseller-benefits .av_two_fifth li{flex-direction:initial;padding:30px 26px 32px!important;border-left:0;border-top:1px solid rgba(15,17,21,.1)}
#top #reseller-benefits .av_two_fifth li:first-child{border-top:0}
#top #reseller-benefits .av_two_fifth li:after{left:26px}
#top #reseller-benefits .av_two_fifth li span:last-child:before{margin-bottom:16px;font-size:32px}
}

/* v9 benefits band background 2026-10-08: Higgsfield fibre/world-map art anchored to the bottom (desktop only) */
@media (min-width:990px){
#top #wrap_all #reseller-benefits{background-image:url(reseller-bg-wide.webp)!important;background-size:100% auto!important;background-position:center bottom!important;background-repeat:no-repeat!important;background-color:#f8f9fa!important}
#top #reseller-benefits .av_two_fifth ul{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
}

/* v11 benefit cards, icon tiles 2026-10-08: same red gradient tile + white line icon as the use-case rows, bottom-left of each column; photo backgrounds removed */
#top #reseller-benefits .av_two_fifth li{min-height:clamp(370px,29vw,410px);background:none;background-image:none}
#top #reseller-benefits .av_two_fifth li:before{content:"";position:absolute;left:30px;bottom:34px;width:68px;height:68px;border-radius:22px;background-color:#c8102e;background-repeat:no-repeat,no-repeat;background-position:center,0 0;background-size:32px,100% 100%;box-shadow:0 22px 40px -16px rgba(184,0,0,.85),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
#top #reseller-benefits .av_two_fifth li:nth-child(1):before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpolyline points='16 7 22 7 22 13'/%3E%3C/svg%3E"),linear-gradient(135deg,#ff3b30,#b80000)}
#top #reseller-benefits .av_two_fifth li:nth-child(2):before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10v6M2 10l10-5 10 5-10 5z'/%3E%3Cpath d='M6 12v5c3 3 9 3 12 0v-5'/%3E%3C/svg%3E"),linear-gradient(135deg,#ff3b30,#b80000)}
#top #reseller-benefits .av_two_fifth li:nth-child(3):before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E"),linear-gradient(135deg,#ff3b30,#b80000)}
#top #reseller-benefits .av_two_fifth li:nth-child(4):before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E"),linear-gradient(135deg,#ff3b30,#b80000)}
#top #reseller-benefits .av_two_fifth li:nth-child(5):before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 13L2 9z'/%3E%3Cpath d='M11 3 8 9l4 13 4-13-3-6M2 9h20'/%3E%3C/svg%3E"),linear-gradient(135deg,#ff3b30,#b80000)}
@media (hover:hover){#top #reseller-benefits .av_two_fifth li:hover{background:rgba(200,16,46,.035)}#top #reseller-benefits .av_two_fifth li:hover:before{transform:scale(1.08) rotate(-5deg)}}
@media (max-width:989px){#top #reseller-benefits .av_two_fifth li{min-height:0;padding-bottom:128px!important}#top #reseller-benefits .av_two_fifth li:before{left:26px;bottom:30px}}
@media (prefers-reduced-motion:reduce){#top #reseller-benefits .av_two_fifth li:before{transition:none!important;transform:none!important}}

/* v12 benefit icons 2026-10-08: Higgsfield 3D glossy icons in the homepage icon style (white/grey body, red accents, transparent), bottom-left of each column; replaces the v11 red tiles */
#top #reseller-benefits .av_two_fifth li:before{left:28px;bottom:26px;width:96px;height:96px;border-radius:0;background-color:transparent;background-image:var(--cbx-ico);background-size:contain;background-position:left bottom;background-repeat:no-repeat;box-shadow:none;transform-origin:50% 90%;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
#top #reseller-benefits .av_two_fifth li:nth-child(1):before{--cbx-ico:url(reseller-ico-1.webp);background-image:url(reseller-ico-1.webp)}
#top #reseller-benefits .av_two_fifth li:nth-child(2):before{background-image:url(reseller-ico-2.webp)}
#top #reseller-benefits .av_two_fifth li:nth-child(3):before{background-image:url(reseller-ico-3.webp)}
#top #reseller-benefits .av_two_fifth li:nth-child(4):before{background-image:url(reseller-ico-4.webp)}
#top #reseller-benefits .av_two_fifth li:nth-child(5):before{background-image:url(reseller-ico-5.webp)}
@media (hover:hover){#top #reseller-benefits .av_two_fifth li:hover:before{transform:translateY(-6px) scale(1.06) rotate(0)}}
@media (max-width:989px){#top #reseller-benefits .av_two_fifth li:before{left:24px;bottom:24px;width:88px;height:88px}#top #reseller-benefits .av_two_fifth li{padding-bottom:132px!important}}

/* v13 premium cards 2026-10-08: five floating cards, glow pedestal behind each 3D icon, dotted network corner, sweeping top accent, depth on hover */
@media (min-width:990px){
#top #reseller-benefits .av_two_fifth ul{gap:0 22px!important;padding:0!important;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;overflow:visible}
}
#top #reseller-benefits .av_two_fifth li{--g:.2;overflow:hidden;border:1px solid rgba(15,17,21,.07)!important;border-radius:24px;padding:46px 30px 40px!important;box-shadow:0 1px 2px rgba(15,17,21,.04),0 30px 46px -30px rgba(15,17,21,.4);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease,border-color .4s ease}
#top #reseller-benefits .av_two_fifth li,#top #reseller-benefits .av_two_fifth li:hover{background:radial-gradient(150px 150px at calc(100% - 80px) calc(100% - 78px),rgba(255,59,48,var(--g)),rgba(255,59,48,0) 72%),linear-gradient(225deg,rgba(255,255,255,0) 0,#fff 46%),radial-gradient(rgba(200,16,46,.2) 1.1px,transparent 1.6px) 0 0/15px 15px,#fff}
#top #reseller-benefits .av_two_fifth li:after{left:0;right:0;width:100%;height:4px;background:linear-gradient(90deg,#c8102e,#ff3b30);transform:scaleX(.16);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
#top #reseller-benefits .av_two_fifth li span:last-child:before{background:linear-gradient(135deg,#d3132f,#8f0a1c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
#top #reseller-benefits .av_two_fifth li:before{left:auto;right:20px;bottom:18px;width:128px;height:128px;background-position:center;filter:drop-shadow(0 18px 16px rgba(143,10,28,.28));transform-origin:50% 85%;transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .5s ease}
@media (hover:hover){
#top #reseller-benefits .av_two_fifth li:hover{--g:.34;transform:translateY(-10px);border-color:rgba(200,16,46,.35)!important;box-shadow:0 1px 2px rgba(15,17,21,.04),0 44px 60px -30px rgba(184,0,0,.5)}
#top #reseller-benefits .av_two_fifth li:hover:after{width:100%;transform:scaleX(1)}
#top #reseller-benefits .av_two_fifth li:hover:before{transform:translateY(-10px) scale(1.12) rotate(-4deg);filter:drop-shadow(0 26px 20px rgba(143,10,28,.36))}
}
@media (max-width:989px){
#top #reseller-benefits .av_two_fifth ul{row-gap:16px!important;padding:0!important;border:0;background:none;box-shadow:none;overflow:visible;-webkit-backdrop-filter:none;backdrop-filter:none}
#top #reseller-benefits .av_two_fifth li{border-top:1px solid rgba(15,17,21,.07)!important;padding:36px 26px 128px!important;min-height:0}
#top #reseller-benefits .av_two_fifth li:first-child{border-top:1px solid rgba(15,17,21,.07)!important}
#top #reseller-benefits .av_two_fifth li:before{right:18px;left:auto;bottom:16px;width:112px;height:112px}
}
@media (prefers-reduced-motion:reduce){#top #reseller-benefits .av_two_fifth li,#top #reseller-benefits .av_two_fifth li:before,#top #reseller-benefits .av_two_fifth li:after{transition:none!important;transform:none!important}#top #reseller-benefits .av_two_fifth li:after{transform:scaleX(1)!important}}
@media (min-width:990px){#top #reseller-benefits .av_two_fifth li{min-height:clamp(420px,33vw,460px)}#top #reseller-benefits .av_two_fifth li:before{width:116px;height:116px;bottom:22px}}

/* v14 corporate cards 2026-10-08: compact 64px icon top-left, step number top-right, divider, static accent bar; no glow/dots/big lift */
#top #reseller-benefits .av_two_fifth li{min-height:0;border-radius:16px;padding:112px 28px 36px!important;box-shadow:0 1px 2px rgba(15,17,21,.05),0 18px 32px -24px rgba(15,17,21,.35)}
#top #reseller-benefits .av_two_fifth li,#top #reseller-benefits .av_two_fifth li:hover{background:#fff}
#top #reseller-benefits .av_two_fifth li:after{height:3px;transform:none;transition:none;background:linear-gradient(90deg,#c8102e,#e8413a)}
#top #reseller-benefits .av_two_fifth li:before{left:28px;right:auto;top:30px;bottom:auto;width:64px;height:64px;background-position:left center;filter:drop-shadow(0 8px 8px rgba(143,10,28,.18));transform-origin:50% 50%}
#top #reseller-benefits .av_two_fifth li span:last-child{position:static;padding:22px 0 0;border:0;border-top:1px solid rgba(15,17,21,.09);border-radius:0;background:none;box-shadow:none;font-size:clamp(15px,1.05vw,16px);font-weight:500;line-height:1.7!important;color:#2a3342!important}
#top #reseller-benefits .av_two_fifth li span:last-child:before{position:absolute;top:50px;right:28px;margin:0;padding:0;border:0;font-size:13px;font-weight:700;letter-spacing:.18em;line-height:1;background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:#c8102e;color:#c8102e}
@media (hover:hover){
#top #reseller-benefits .av_two_fifth li:hover{transform:translateY(-3px);border-color:rgba(200,16,46,.3)!important;box-shadow:0 1px 2px rgba(15,17,21,.05),0 24px 40px -26px rgba(15,17,21,.45)}
#top #reseller-benefits .av_two_fifth li:hover:before{transform:scale(1.06);filter:drop-shadow(0 10px 9px rgba(143,10,28,.24))}
}
@media (max-width:989px){
#top #reseller-benefits .av_two_fifth li{padding:108px 24px 30px!important}
#top #reseller-benefits .av_two_fifth li:before{left:24px;right:auto;top:26px;bottom:auto;width:60px;height:60px}
#top #reseller-benefits .av_two_fifth li span:last-child:before{top:46px;right:24px}
}


/* 2026-10-08: small gap under the H3 titles in "WAN Bonding vs Failover" (they had none; matches the 12px used under H3s in the other sections) */
#top #wan-bonding-vs-failover h3{margin-bottom:12px}


/* 2026-10-08: "One bonded Virtual Leased Line" label in the How-it-works diagram: white text (like the other diagram labels) with a soft brand-red glow; the red-on-dark version was hard to read. CSS fill/filter on the SVG <text>; a browser that ignores the filter just shows plain white text. */
#top #how-wan-bonding-works .wb-diagram text[fill="#ff3b30"]{fill:#fff;letter-spacing:.2px;filter:drop-shadow(0 0 3px rgba(255,59,48,.9)) drop-shadow(0 0 10px rgba(255,59,48,.55))}

/* 2026-10-09: check marks on dark sections sit on a white round badge (check glyph keeps its 16px size inside a 24px circle) */
#top .wb-sec--dark .wb-list--check li:before{width:24px;height:24px;top:1px;background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='18' fill='%23fff'/%3E%3Cpath d='M26 12 15 23l-5-5' fill='none' stroke='%23e62b1e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:none;mask:none;border-radius:50%}

/* 2026-10-09: FAQ answers fill the full card width (was capped at 74ch, leaving a gap on the right) */
#top .wb-faq .wb-faq__a{max-width:none}

/* 2026-10-09: hero H1 - 'WAN Bonding' as a black label (colon kept in the markup, hidden visually) */

#top .hero-fullbleed h1 .hero-tag-sep{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 2026-10-09: hero tag v12 - a thin horizontal rule that continues after 'WAN Bonding' and fills the width of the title block (static, one flex line) */
#top .hero-fullbleed .mw-hero-title h1.av-special-heading-tag .hero-tag{display:flex;align-items:center;gap:.4em;width:9.2em;max-width:100%;margin:0 0 .12em;padding:0;line-height:1.1;color:#fff}
#top .hero-fullbleed .mw-hero-title h1.av-special-heading-tag .hero-tag:after{content:"";flex:1 1 auto;height:2px;min-width:1em;background:rgba(255,255,255,.6)}
@media (max-width:768px){#top .hero-fullbleed .mw-hero-title h1.av-special-heading-tag .hero-tag{justify-content:center;width:100%;white-space:nowrap;gap:.3em}#top .hero-fullbleed .mw-hero-title h1.av-special-heading-tag .hero-tag:before{content:"";flex:1 1 auto;height:2px;min-width:1em;background:rgba(255,255,255,.6)}}
/* 2026-10-27: line next to WAN Bonding removed at all widths (undo = restore .bak-20261027-herotag-line) */
#top .hero-fullbleed .mw-hero-title h1.av-special-heading-tag .hero-tag:before,#top .hero-fullbleed .mw-hero-title h1.av-special-heading-tag .hero-tag:after{display:none}

/* 2026-10-09 TRIAL: 'Where it is deployed' heading block laid over the top-left of the photo, with a dark corner fade behind it (desktop only; undo = delete this block) */
@media (min-width:1100px){
#top #wan-bonding-use-cases .entry-content-wrapper{position:relative}
#top #wan-bonding-use-cases .wb-head{position:absolute;top:58px;left:62px;width:min(780px,calc(100% - 124px));z-index:5;margin:0;padding:0}
#top #wan-bonding-use-cases .wb-band{position:relative}
#top #wan-bonding-use-cases .wb-band:after{content:"";position:absolute;top:14px;left:14px;right:14px;bottom:14px;border-radius:calc(var(--wb-r) - 4px);background:radial-gradient(ellipse 66% 88% at 0 0,rgba(8,8,10,.93) 0,rgba(8,8,10,.84) 38%,rgba(8,8,10,.4) 72%,rgba(8,8,10,0) 100%);pointer-events:none;z-index:1}
#top #wan-bonding-use-cases .wb-band figcaption{z-index:2}
}
/* 2026-10-09: use-case rows - smaller titles, icons and arrow circles; whole row (arrow included) is the link.
   Cause of the dead arrow: the hover nudge used transform on the h3, which made the h3 the containing block of the stretched-link overlay (a:after, inset:0), shrinking the link to the title on hover. The nudge is now a margin, so the overlay always covers the row. */
@media (min-width:990px){
#top #reseller-benefits .feature-item{grid-template-columns:64px minmax(0,1.05fr) minmax(0,1fr) 46px;cursor:pointer}
#top #reseller-benefits .feature-item .icon-box{width:56px!important;height:56px!important;border-radius:18px!important}
#top #reseller-benefits .feature-item .icon-box svg{width:25px;height:25px}
#top #reseller-benefits .feature-item h3{font-size:clamp(19px,1.7vw,24px)!important;transition:margin-left .5s cubic-bezier(.2,.7,.2,1)}
#top #reseller-benefits .feature-item:after{width:42px;height:42px;background-size:20px}
}
@media (hover:hover){
#top #reseller-benefits .feature-item:hover h3{transform:none!important;margin-left:12px!important}
}
/* 2026-10-19: "Become a Reseller" button under the Benefits for Resellers cards */
#top #reseller-benefits .av_two_fifth .rb-more-btn{grid-column:1/-1;display:block;width:100%;margin:40px 0 0!important;text-align:center}
#top #reseller-benefits .rb-more-btn .avia-button{white-space:nowrap;margin:0!important;padding:18px 40px!important;border-radius:10px}
#top #reseller-benefits .rb-more-btn .avia-button:hover{background-color:#a50e25!important}
#top #reseller-benefits .rb-more-btn .avia-button,#top #reseller-benefits .rb-more-btn .avia-button .avia_iconbox_title,#top #reseller-benefits .rb-more-btn .avia-button .avia_button_text{font-family:Poppins,Arial,sans-serif!important;font-size:15px!important;font-weight:700!important;letter-spacing:.15px!important;line-height:15px!important}

/* ===== TEXT SIZE, HOMEPAGE COMPONENTS 2026-10-22 ===== small body text a bit bigger, size only (about +1.5 to 2px). Family, weight, colour and line height ratios are untouched. */
#top .wb-card p,#top .wb-list li,#top .wb-note p,#top .wb-uc__body p,#top .wb-faq__a p,#top .wb-list--panel li,#top .wb-faq-more{font-size:17.5px}
#top .wb-steps li p,#top table.wb-table,#top .wb-conn__item p,#top .wb-cap__item p,#top .wb-deflist dt{font-size:17px}
#top table.wb-table tbody th,#top .wb-deflist dd{font-size:16.5px}
#top .wb-fineprint{font-size:16px}
#top #bond-different-connections .wb-deflist dt{font-size:17px}
#top #bond-different-connections .wb-deflist dd{font-size:16.5px}
#top #wan-bonding-use-cases .wb-card p{font-size:17px}
#top #reseller-benefits .feature-item p{font-size:16.5px!important}
@media (max-width:767px){#top .wb-sec p{font-size:17px}}#top table.wb-table td{font-size:17px}
#top .wb-band figcaption{font-size:16.5px}
#top #reseller-benefits .avia_textblock li span{font-size:16.5px}

/* 2026-11-01: homepage partners panel, dark at 85% with blur like the use-case cards */
#top #wan-bonding-for-partners .wb-list--panel{background:rgba(20,20,24,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* 2026-11-01: homepage partners panel checks: red circle, white tick, centred on the first line */
#top #wan-bonding-for-partners .wb-list--check li::before{top:5px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='18' fill='%23e62b1e'/%3E%3Cpath d='M26 12 15 23l-5-5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* 2026-11-01: 'What is WAN bonding' - the definition box now wraps its cable illustration (box styling moved from .wb-answer to the row), and the appliance illustration below is centred on the 'Independent links' panel instead of sitting at the bottom of its column. */
#top #what-is-wan-bonding .wb-def-row{background:#fff;border:1px solid #e3e7ed;border-left:4px solid #cc1f14;border-radius:14px;padding:22px 30px;gap:24px}
#top #what-is-wan-bonding .wb-def-row .wb-answer{background:none;border:0;border-radius:0;padding:0;max-width:none;flex:1 1 auto;box-shadow:none}
#top #what-is-wan-bonding .wb-def-row .wb-def-art{flex:0 0 250px;max-width:250px}
/* image only moves up (text below it stays put, still bottom-aligned with the right column); offsets measured so the image centre meets the 'Independent links' panel centre */
@media only screen and (min-width:1211px){#top #what-is-wan-bonding .wb-split .wb-body-art{transform:translateY(-96px)}}
@media only screen and (min-width:1061px) and (max-width:1210px){#top #what-is-wan-bonding .wb-split .wb-body-art{transform:translateY(-90px)}}
@media only screen and (min-width:990px) and (max-width:1060px){#top #what-is-wan-bonding .wb-split .wb-body-art{transform:translateY(-50px)}}
/* the 3 paragraphs under the appliance image: vertically centred on the 'One bonded connection' panel (were bottom aligned, ~31px low) */
@media only screen and (min-width:1211px){#top #what-is-wan-bonding .wb-split>.boss-reveal:first-child>p{transform:translateY(-31px)}}
@media only screen and (min-width:1061px) and (max-width:1210px){#top #what-is-wan-bonding .wb-split>.boss-reveal:first-child>p{transform:translateY(-14px)}}
/* red ticks in the 'One bonded connection' panel centred on the first text line (were ~4px high) */
#top #what-is-wan-bonding .wb-vs__panel--hl .wb-list--check li::before{top:10px}