.logo-cloud{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.logo-chip{border:1px solid var(--line);border-radius:14px;padding:22px;text-align:center;color:#aaa;background:rgba(255,255,255,.02)}.timeline{position:relative;display:grid;gap:20px}.timeline:before{content:"";position:absolute;left:25px;top:15px;bottom:15px;width:1px;background:linear-gradient(var(--orange),transparent)}.timeline-item{padding:24px 24px 24px 76px;position:relative;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025)}.timeline-item .num{position:absolute;left:9px;top:22px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--orange);font-weight:800}.comparison{width:100%;border-collapse:collapse}.comparison th,.comparison td{text-align:left;padding:16px;border-bottom:1px solid var(--line)}.comparison th{color:#fff}.comparison td{color:#aaa}.comparison .yes{color:var(--orange)}@media(max-width:700px){.logo-cloud{grid-template-columns:1fr 1fr}.comparison{font-size:.82rem}.comparison th,.comparison td{padding:10px}}

/* Verification-ready shared navigation and trust pages */
.mega-dropdown{min-width:430px;grid-template-columns:1fr 1fr;gap:4px;padding:12px}.mega-dropdown a{display:flex!important;flex-direction:column;gap:2px}.mega-dropdown a span{font-size:.72rem;color:#8d8d96;font-weight:500}.footer-identity{font-size:.78rem!important;color:#8d8d96!important;margin-top:16px}.footer-identity a{color:var(--orange)}
.signal-stack{display:grid;gap:12px;align-content:center}.signal-stack>div{display:flex;align-items:center;gap:14px;padding:18px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}.signal-stack span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--orange);color:#111;font-weight:900}.signal-stack strong{color:#fff}.legal-meta{padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025);color:#bbb}.table-wrap{overflow-x:auto}
@media(max-width:1080px){.mega-dropdown{min-width:0;display:block}.mega-dropdown a span{display:none}}



/* ===== Fix footer alignment ===== */
.site-footer{padding:78px 0 26px;background:radial-gradient(circle at 92% 100%,rgba(255,102,0,.22),transparent 28%),linear-gradient(180deg,#111214,#121316);border-top:1px solid var(--line)}
.footer-top{display:grid;grid-template-columns:minmax(300px,1.35fr) repeat(3,minmax(0,1fr));gap:46px;align-items:start}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start}
.footer-logo,.footer-brand img{width:190px!important;height:auto!important;max-width:190px;object-fit:contain;margin:0 0 22px}
.footer-brand p{color:#c9c9cf;max-width:380px;margin:0 0 22px}
.footer-brand .btn{margin-bottom:18px}
.footer-col h3{font-size:1rem;margin:0 0 18px}
.footer-col a{display:block;color:#a8a8b1;padding:6px 0;font-size:.94rem}
.footer-col a:hover{color:var(--orange)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.09);padding-top:22px;margin-top:56px;color:#8a8b92;font-size:.86rem}
.footer-legal{display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.footer-legal a{color:#9c9da5}
.footer-legal a:hover{color:var(--orange)}
@media(max-width:980px){.footer-top{grid-template-columns:1fr 1fr}.footer-bottom{align-items:flex-start;flex-direction:column}.footer-legal{justify-content:flex-start}}
@media(max-width:620px){.footer-top{grid-template-columns:1fr}.site-footer{padding-top:58px}}

/* ===== Reference-inspired premium sections ===== */
.reference-shell{border-radius:34px;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 28px 90px rgba(17,17,20,.12)}
.ref-dark{background:linear-gradient(180deg,#111214,#16171c);color:#fff}
.ref-dark p,.ref-dark li{color:#ced0d7}
.ref-dark .lead,.ref-dark .muted{color:#c9ccd4}
.ref-light{background:linear-gradient(180deg,#fff4ef,#fff4ef);color:#17181b;border-color:rgba(17,17,20,.08)}

.flow-slab{padding:58px}.flow-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}.flow-copy h2{max-width:520px;color:#fff}.flow-points{display:grid;gap:14px}.flow-points li{list-style:none;padding-left:28px;position:relative}.flow-points li:before{content:"✓";position:absolute;left:0;top:0;color:var(--orange);font-weight:900}.flow-steps{display:grid;gap:14px}.flow-step{display:flex;align-items:center;gap:18px;padding:20px 24px;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:rgba(255,255,255,.02)}.flow-step strong{color:#fff;font-size:1.06rem}.flow-step span{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--orange);color:#111;font-weight:800;flex:0 0 44px}

.triple-focus{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.focus-card{padding:28px;border-radius:18px;background:rgba(255,255,255,.52);border:1px solid rgba(17,17,20,.08);min-height:184px;display:flex;flex-direction:column;justify-content:space-between}.focus-card.middle{background:linear-gradient(180deg,#ff7b2b,#ff6600);color:#fff}.focus-card .mini-arrow{width:28px;height:28px;border-radius:10px;display:grid;place-items:center;margin-left:auto;color:inherit;border:1px solid rgba(17,17,20,.08)}.focus-card.middle .mini-arrow{border-color:rgba(255,255,255,.35)}.focus-card h3{font-size:1.18rem;margin:18px 0 10px}.focus-card p{margin:0;color:#5c6270}.focus-card.middle p{color:rgba(255,255,255,.88)}

.testimonial-cta{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px}.testimonial-panel,.cta-story{min-height:280px;border-radius:22px;padding:30px}.testimonial-panel{background:#fff4ef;color:#17181b}.testimonial-panel h3{color:#17181b;max-width:250px}.testimonial-panel blockquote{margin:24px 0 18px;padding:0;border:0;color:#525763}.avatar-line{display:flex;align-items:center;gap:12px;margin-top:18px;color:#222}.avatar-dot{width:42px;height:42px;border-radius:50%;background:linear-gradient(180deg,#111214,#30333a)}.cta-story{color:#fff;background:radial-gradient(circle at 85% 25%,rgba(255,164,80,.32),transparent 28%),linear-gradient(135deg,#f46a18,#ba3c10)}.cta-story p{color:rgba(255,255,255,.88);max-width:380px}.cta-story .btn{background:#111;color:#fff;box-shadow:none}

.device-panel{padding:42px;border-radius:26px;border:1px solid rgba(255,255,255,.08);background:#111214}.device-layout{display:grid;grid-template-columns:.78fr 360px .78fr;gap:26px;align-items:center}.mini-stat-cards{display:grid;gap:14px}.mini-stat{padding:18px 18px 16px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}.mini-stat strong{display:block;color:#fff;margin-bottom:6px}.mini-stat p{margin:0;color:#b9bcc4;font-size:.94rem}.device-frame{margin:auto;width:min(100%,320px);border-radius:40px;padding:16px;background:linear-gradient(180deg,#2e3138,#111214);box-shadow:0 18px 52px rgba(0,0,0,.28)}.device-screen{border-radius:28px;padding:18px;background:linear-gradient(180deg,#fff4ef,#fff4ef)}.screen-pill{padding:11px 14px;border-radius:14px;margin-bottom:12px;background:#1d2025;color:#fff;font-weight:700}.screen-pill.orange{background:linear-gradient(180deg,#ff7d2d,#ff6600)}.screen-total{margin:18px 0;font-size:2.2rem;font-weight:800;color:#17181b}

.cluster-panel{padding:36px 32px;border-radius:28px;border:1px solid rgba(255,255,255,.08);background:#0f1012;position:relative;overflow:hidden}.cluster-panel:before{content:"";position:absolute;inset:auto auto -90px -90px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,102,0,.18),rgba(255,102,0,0))}.cluster-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:32px;align-items:center}.cluster-canvas{position:relative;min-height:340px}.cluster-node{position:absolute;display:grid;place-items:center;padding:18px 22px;border-radius:120px;border:1px solid rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.02);text-align:center;line-height:1.2}.cluster-node.center{left:34%;top:40%;transform:translate(-50%,-50%);width:190px;height:118px}.cluster-node.n1{left:56%;top:14%;width:180px;height:108px}.cluster-node.n2{left:65%;top:64%;width:150px;height:110px}.cluster-node.n3{left:12%;top:66%;width:208px;height:116px}

.glow-metrics{padding:42px;border-radius:28px;border:1px solid rgba(255,255,255,.08);background:#101113}.glow-bars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:end;margin-top:26px}.glow-bar{padding:0 10px 8px;text-align:center}.glow-bar b{display:block;color:#fff;font-size:2.2rem;margin-bottom:14px}.glow-shape{height:160px;border-radius:44px 44px 24px 24px;background:radial-gradient(circle at 50% 72%,rgba(0,0,0,.38),transparent 20%),linear-gradient(180deg,#ff8d3c,#f66612);box-shadow:0 0 38px rgba(255,102,0,.38)}.glow-bar.small .glow-shape{height:84px}.glow-bar.medium .glow-shape{height:132px}.glow-caption{margin-top:12px;color:#bcc0c8;font-size:.95rem}

.api-hub{padding:34px;border-radius:28px;border:1px solid rgba(255,255,255,.08);background:#0f1012}.api-top{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.api-card{padding:18px 20px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}.api-card h3{font-size:1.06rem;margin:0 0 8px;color:#fff}.api-card p{margin:0;color:#bfc1c9;font-size:.93rem}.connected{display:inline-flex;gap:8px;align-items:center;margin-top:14px;color:#d5d6db;font-size:.9rem}.connected i{width:8px;height:8px;border-radius:50%;background:var(--orange);display:block}.hub-lines{position:relative;padding-top:36px}.hub-lines:before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:2px;height:40px;background:linear-gradient(var(--orange),rgba(255,102,0,.18))}.hub-core{max-width:520px;margin:0 auto;padding:34px;border-radius:26px;border:1px solid rgba(255,102,0,.55);background:linear-gradient(180deg,rgba(255,102,0,.06),rgba(255,255,255,.02));text-align:center}.hub-cube{width:24px;height:24px;background:linear-gradient(180deg,#ff9c52,#ff6600);transform:rotate(45deg);margin:0 auto 18px;border-radius:2px;box-shadow:0 0 28px rgba(255,102,0,.34)}.hub-tags{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:18px;color:#d0d2d9;font-size:.92rem}

.checkout-panel{padding:22px;border-radius:26px;border:1px solid rgba(255,255,255,.08);background:#0f1012}.checkout-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px}.order-summary,.secure-form{padding:22px;border-radius:18px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.07)}.order-summary h3,.secure-form h3{font-size:1.05rem;color:#fff}.summary-line{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07);color:#c8cbd2}.summary-line.total{font-weight:800;color:#fff}.secure-input{width:100%;padding:12px 14px;border-radius:12px;background:#15171b;border:1px solid rgba(255,255,255,.09);color:#fff;margin-top:10px}.secure-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.seal-row{display:flex;gap:12px;flex-wrap:wrap;color:#abb0ba;font-size:.92rem;margin-top:18px}

.future-board{padding:52px 44px;border-radius:30px;background:linear-gradient(180deg,#b55c1b 0%,#111214 46%,#101114 100%);color:#fff;position:relative;overflow:hidden}.future-board:after{content:"";position:absolute;inset:auto 0 0 0;height:116px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(0,0,0,.12))}.future-top{text-align:center;position:relative;z-index:1}.tiny-badge{display:inline-flex;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.12);font-size:.82rem;margin-bottom:14px}.future-timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:42px;padding-top:34px;z-index:1}.future-timeline:before{content:"";position:absolute;left:2%;right:2%;bottom:16px;height:10px;border-radius:999px;background:linear-gradient(90deg,rgba(255,156,82,.35),rgba(255,102,0,.7),rgba(255,156,82,.35))}.future-item{position:relative;padding-bottom:46px;text-align:center}.future-item:after{content:"";position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:18px;height:18px;border-radius:6px;background:linear-gradient(180deg,#ff953d,#ff6600);box-shadow:0 0 16px rgba(255,102,0,.4)}.future-item h3{font-size:1.05rem;color:#fff}.future-item p{color:#e1e3e9;font-size:.9rem;max-width:200px;margin:0 auto}.future-time{display:inline-block;margin-top:18px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.08);font-size:.82rem}

.ring-compare{padding:42px;border-radius:28px;border:1px solid rgba(255,255,255,.08);background:#0f1212;position:relative;overflow:hidden}.ring-compare:before{content:"";position:absolute;left:-120px;top:20px;width:340px;height:340px;background:radial-gradient(circle at center,rgba(255,255,255,.04),transparent 60%);pointer-events:none}.ring-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:center}.rings{display:flex;gap:24px;justify-content:center;align-items:center;flex-wrap:wrap}.ring{--size:170px;width:var(--size);height:var(--size);border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--orange) 0 75%,rgba(255,255,255,.18) 75% 100%);position:relative}.ring:before{content:"";position:absolute;inset:18px;border-radius:50%;background:#101113}.ring span{position:relative;z-index:1;font-size:2.2rem;font-weight:800;color:#fff}.ring-label{text-align:center;margin-top:12px;color:#c7cad1}.ring.small{--size:150px;background:conic-gradient(var(--orange) 0 25%,rgba(255,255,255,.18) 25% 100%)}

.curve-journey{padding:38px;border-radius:28px;border:1px solid rgba(255,255,255,.08);background:#0f1012;position:relative;overflow:hidden}.curve-journey .curve-line{position:absolute;left:-3%;right:-3%;top:44%;height:18px;background:linear-gradient(90deg,rgba(255,132,36,.86),rgba(255,102,0,.95));border-radius:999px;transform:rotate(-12deg);box-shadow:0 0 18px rgba(255,102,0,.35)}.curve-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:26px;min-height:290px}.curve-labels{position:relative}.chip-float{position:absolute;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(18,20,24,.84);color:#fff;font-size:.82rem}.chip1{left:4%;top:18%}.chip2{left:28%;top:42%}.chip3{left:54%;top:31%}.chip4{left:14%;top:62%}.chip5{left:52%;top:72%}.curve-copy{align-self:center}.curve-copy p{max-width:420px}

.data-halo{padding:38px;border-radius:30px;background:#0c0d12;border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}.halo-center{position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);width:230px;height:110px;border-radius:110px 110px 0 0;background:radial-gradient(circle at 50% 78%,rgba(255,148,66,.65),rgba(255,148,66,.14) 48%,transparent 52%),linear-gradient(180deg,rgba(255,163,81,.28),rgba(255,163,81,.02));filter:blur(.3px)}.callout-grid{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;min-height:300px}.callout-box{padding:16px 18px;border-radius:16px;border:1px solid rgba(255,171,107,.35);background:rgba(255,183,130,.08)}.callout-box h3{font-size:1rem;color:#fff;margin-bottom:8px}.callout-box p{margin:0;color:#d7d9df;font-size:.92rem}.callout-grid .callout-box:nth-child(1){align-self:start}.callout-grid .callout-box:nth-child(2){justify-self:end;align-self:start;margin-top:8px}.callout-grid .callout-box:nth-child(3){align-self:end;max-width:260px}.callout-grid .callout-box:nth-child(4){justify-self:end;align-self:end}

.value-matrix{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.value-pill{padding:22px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}.value-pill strong{display:block;color:#fff;margin-bottom:8px}.value-pill p{margin:0;color:#bfc2ca;font-size:.92rem}

.authority-copy p{max-width:800px}

@media(max-width:1100px){.flow-grid,.testimonial-cta,.cluster-layout,.curve-grid,.ring-layout,.checkout-grid,.device-layout{grid-template-columns:1fr}.device-layout{gap:20px}.glow-bars,.triple-focus,.future-timeline,.value-matrix,.api-top{grid-template-columns:1fr 1fr}.cluster-canvas{min-height:380px}.flow-slab,.future-board,.ring-compare,.api-hub{padding:34px}}
@media(max-width:700px){.glow-bars,.triple-focus,.future-timeline,.value-matrix,.api-top,.callout-grid{grid-template-columns:1fr}.flow-slab,.future-board,.ring-compare,.api-hub,.data-halo,.cluster-panel,.checkout-panel,.glow-metrics,.device-panel{padding:24px}.cluster-node.center{left:50%}.cluster-node.n1{left:50%;top:8%}.cluster-node.n2{left:50%;top:64%}.cluster-node.n3{left:50%;top:82%}.cluster-canvas{min-height:460px}.curve-journey .curve-line{display:none}.chip-float{position:static;display:inline-flex;margin:0 8px 8px 0}.curve-grid{min-height:0}.rings{gap:18px}.ring{--size:144px}.ring.small{--size:128px}}


/* =========================================================
   CLICKRONIX INNER-PAGE PREMIUM CONTRAST & COMPONENT FIXES
   Homepage selectors are intentionally not modified here.
   ========================================================= */
.section:not(.alt) .api-hub,.section:not(.alt) .data-halo,.section:not(.alt) .cluster-panel,.section:not(.alt) .glow-metrics,.section:not(.alt) .device-panel,.section:not(.alt) .ring-compare,.section:not(.alt) .curve-journey,.section:not(.alt) .checkout-panel,.section:not(.alt) .reference-shell.ref-dark,.section:not(.alt) .future-board{color:#fff}
.section:not(.alt) .api-hub h1,.section:not(.alt) .api-hub h2,.section:not(.alt) .api-hub h3,.section:not(.alt) .data-halo h1,.section:not(.alt) .data-halo h2,.section:not(.alt) .data-halo h3,.section:not(.alt) .cluster-panel h1,.section:not(.alt) .cluster-panel h2,.section:not(.alt) .cluster-panel h3,.section:not(.alt) .glow-metrics h1,.section:not(.alt) .glow-metrics h2,.section:not(.alt) .glow-metrics h3,.section:not(.alt) .device-panel h1,.section:not(.alt) .device-panel h2,.section:not(.alt) .device-panel h3,.section:not(.alt) .ring-compare h1,.section:not(.alt) .ring-compare h2,.section:not(.alt) .ring-compare h3,.section:not(.alt) .curve-journey h1,.section:not(.alt) .curve-journey h2,.section:not(.alt) .curve-journey h3,.section:not(.alt) .checkout-panel h1,.section:not(.alt) .checkout-panel h2,.section:not(.alt) .checkout-panel h3,.section:not(.alt) .reference-shell.ref-dark h1,.section:not(.alt) .reference-shell.ref-dark h2,.section:not(.alt) .reference-shell.ref-dark h3,.section:not(.alt) .future-board h1,.section:not(.alt) .future-board h2,.section:not(.alt) .future-board h3{color:#fff!important}
.section:not(.alt) .api-hub p,.section:not(.alt) .api-hub li,.section:not(.alt) .api-hub .lead,.section:not(.alt) .api-hub .muted,.section:not(.alt) .data-halo p,.section:not(.alt) .data-halo li,.section:not(.alt) .data-halo .lead,.section:not(.alt) .data-halo .muted,.section:not(.alt) .cluster-panel p,.section:not(.alt) .cluster-panel li,.section:not(.alt) .cluster-panel .lead,.section:not(.alt) .cluster-panel .muted,.section:not(.alt) .glow-metrics p,.section:not(.alt) .glow-metrics li,.section:not(.alt) .glow-metrics .lead,.section:not(.alt) .glow-metrics .muted,.section:not(.alt) .device-panel p,.section:not(.alt) .ring-compare p,.section:not(.alt) .ring-compare li,.section:not(.alt) .ring-compare .lead,.section:not(.alt) .ring-compare .muted,.section:not(.alt) .curve-journey p,.section:not(.alt) .curve-journey li,.section:not(.alt) .curve-journey .lead,.section:not(.alt) .curve-journey .muted,.section:not(.alt) .checkout-panel p,.section:not(.alt) .checkout-panel li,.section:not(.alt) .checkout-panel .lead,.section:not(.alt) .checkout-panel .muted,.section:not(.alt) .reference-shell.ref-dark p,.section:not(.alt) .reference-shell.ref-dark li,.section:not(.alt) .reference-shell.ref-dark .lead,.section:not(.alt) .reference-shell.ref-dark .muted,.section:not(.alt) .future-board p,.section:not(.alt) .future-board li,.section:not(.alt) .future-board .lead,.section:not(.alt) .future-board .muted{color:#c9ccd4!important}
.section:not(.alt) .api-card h3,.section:not(.alt) .hub-core h2,.section:not(.alt) .callout-box h3,.section:not(.alt) .mini-stat strong,.section:not(.alt) .order-summary h3,.section:not(.alt) .secure-form h3{color:#fff!important}
.api-card{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));border-color:rgba(255,255,255,.12);box-shadow:0 14px 36px rgba(0,0,0,.12)}
.api-card h3{color:#fff!important}.api-card p{color:#c3c6cf!important}.connected{color:#fff!important}
.hub-core h2{color:#fff!important}.hub-core p{color:#c9ccd4!important}.hub-tags span{color:#fff}
.data-halo .section-head h2{color:#fff!important}.data-halo .section-head p{color:#c9ccd4!important}.callout-box{background:linear-gradient(145deg,rgba(255,135,55,.14),rgba(255,255,255,.035));border-color:rgba(255,145,77,.52);box-shadow:0 16px 42px rgba(0,0,0,.18)}.callout-box h3{color:#fff!important}.callout-box p{color:#d9dbe2!important}
.testimonial-panel h1,.testimonial-panel h2,.testimonial-panel h3,.testimonial-panel strong{color:#17181b!important}.testimonial-panel p,.testimonial-panel blockquote,.testimonial-panel small{color:#505662!important}
.cta-story h1,.cta-story h2,.cta-story h3{color:#111318!important}.cta-story p,.cta-story .lead{color:#343943!important}.cta-story .eyebrow{color:#111318!important}.cta-story .eyebrow:before{background:#111318}
.flow-step p{color:#c7cad2!important}.flow-step strong{color:#fff!important}.flow-copy p,.flow-copy li{color:#d0d2d9!important}
.mini-stat strong{color:#fff!important}.mini-stat p{color:#c5c8d0!important}
.order-summary h3,.secure-form h3{color:#fff!important}.order-summary p,.secure-form p{color:#c5c8d0!important}
.future-top h2,.future-item h3{color:#fff!important}.future-top p,.future-item p{color:#e0e2e8!important}
.ring-layout h2{color:#fff!important}.ring-layout p,.ring-layout li{color:#c9ccd4!important}
.curve-copy h2{color:#fff!important}.curve-copy p{color:#c9ccd4!important}
.glow-metrics .section-head h2{color:#fff!important}.glow-metrics .section-head p{color:#c9ccd4!important}
.cluster-panel h2{color:#fff!important}.cluster-panel p{color:#c9ccd4!important}
.device-panel p{color:#c5c8d0!important}
.value-pill strong{color:#fff!important}.value-pill p{color:#c2c5cd!important}

/* Pricing */
.pricing-section{background:radial-gradient(circle at 50% 0%,rgba(255,102,0,.11),transparent 32%),#111215}
.pricing-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
.premium-price-card{position:relative;display:flex;flex-direction:column;min-height:520px;padding:30px;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.018));box-shadow:0 24px 70px rgba(0,0,0,.16);transition:.25s ease}
.premium-price-card:hover{transform:translateY(-6px);border-color:rgba(255,102,0,.5);box-shadow:0 28px 80px rgba(255,102,0,.12)}
.premium-price-card.featured{border-color:var(--orange);background:radial-gradient(circle at 100% 0%,rgba(255,133,57,.18),transparent 32%),linear-gradient(150deg,#342016,#17181b 68%)}
.popular-badge{position:absolute;top:0;right:24px;transform:translateY(-50%);padding:7px 12px;border-radius:999px;background:var(--orange);color:#fff;font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.price-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:22px}.plan-kicker{display:block;color:var(--orange);font-size:.75rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase}.price-top h3{color:#fff!important;margin:7px 0 0;font-size:1.65rem}.price-amount{text-align:right}.price-amount strong{display:block;color:#fff;font-size:2.6rem;line-height:.95}.price-amount span{color:#aeb1ba;font-size:.86rem}.premium-price-card>p{color:#bec1c9!important;margin:0 0 20px}.price-list{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:12px}.price-list li{position:relative;padding:12px 12px 12px 34px;border-bottom:1px solid rgba(255,255,255,.08);color:#d6d8de!important}.price-list li:before{content:"✓";position:absolute;left:8px;color:var(--orange);font-weight:900}.price-list b{color:#fff}.price-btn{margin-top:auto;width:100%}.pricing-note{margin:22px 0 0;color:#969aa4;text-align:center;font-size:.9rem}
.plan-comparison-panel{display:grid;grid-template-columns:.82fr 1.18fr;gap:40px;padding:48px;border-radius:28px;background:linear-gradient(145deg,#17181b,#202126);border:1px solid rgba(255,255,255,.09);color:#fff;box-shadow:0 24px 80px rgba(20,20,24,.12)}.comparison-copy h2{color:#fff!important}.comparison-copy p{color:#c7cad2!important}.comparison-features{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.comparison-features>div{padding:20px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.025)}.comparison-features strong{display:block;color:#fff;margin-bottom:7px}.comparison-features span{color:#bfc2ca;font-size:.92rem;line-height:1.55}

/* Documentation */
.documentation-hub{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.doc-card{display:flex;flex-direction:column;min-height:280px;padding:28px;border-radius:22px;background:linear-gradient(180deg,#fff,#fff4ef);border:1px solid rgba(17,17,20,.09);box-shadow:0 20px 50px rgba(17,17,20,.07);transition:.25s ease}.doc-card:hover{transform:translateY(-5px);box-shadow:0 28px 70px rgba(17,17,20,.12)}.doc-card>span{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:rgba(255,102,0,.1);color:var(--orange);font-weight:900}.doc-card h3{color:#17181b!important;margin:26px 0 12px}.doc-card p{color:#5e636d!important;margin:0 0 22px}.doc-card a{margin-top:auto;color:#d94f0b;font-weight:800}

/* Google Ads purpose */
.google-purpose-panel{display:grid;grid-template-columns:.95fr 1.05fr;gap:42px;padding:48px;border-radius:30px;background:linear-gradient(145deg,#17181b,#22242a);border:1px solid rgba(255,255,255,.09);box-shadow:0 24px 80px rgba(17,17,20,.12)}.purpose-copy h2{color:#fff!important}.purpose-copy p,.purpose-copy li{color:#c9ccd4!important}.purpose-map{display:grid;gap:13px}.purpose-map>div{display:grid;grid-template-columns:46px 1fr;column-gap:14px;padding:19px;border:1px solid rgba(255,255,255,.09);border-radius:17px;background:rgba(255,255,255,.025)}.purpose-map span{grid-row:1/3;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--orange);color:#111;font-weight:900}.purpose-map strong{color:#fff}.purpose-map p{margin:3px 0 0;color:#bcc0c8!important;font-size:.92rem}
.integration-boundaries{display:grid;gap:12px;margin-top:18px}.integration-boundaries>div{padding:17px;border-radius:15px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025)}.integration-boundaries b{display:block;color:#fff;margin-bottom:6px}.integration-boundaries span{color:#c4c7cf}

/* Data use, methods, trust, compliance */
.data-use-map{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.data-use-map>div{padding:25px;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018))}.data-use-map span,.method-card>span{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:var(--orange);color:#111;font-weight:900;margin-bottom:18px}.data-use-map h3{color:#fff!important}.data-use-map p{color:#c3c6ce!important;margin:0}
.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.method-card{padding:28px;border-radius:22px;background:linear-gradient(180deg,#fff,#fff4ef);border:1px solid rgba(17,17,20,.09);box-shadow:0 18px 50px rgba(17,17,20,.07)}.method-card h3{color:#17181b!important}.method-card p{color:#5d626c!important;margin:0}.method-note{padding:44px;border-radius:26px;border:1px solid rgba(255,102,0,.28);background:linear-gradient(145deg,rgba(255,102,0,.12),rgba(255,255,255,.025))}.method-note h2{color:#fff!important}.method-note p{color:#c9ccd4!important;margin:0;max-width:900px}
.trust-links{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.trust-links a{display:grid;grid-template-columns:46px 1fr;column-gap:14px;padding:24px;border-radius:20px;background:#fff;border:1px solid rgba(17,17,20,.09);box-shadow:0 18px 45px rgba(17,17,20,.07);transition:.25s ease}.trust-links a:hover{transform:translateY(-4px);box-shadow:0 25px 60px rgba(17,17,20,.11)}.trust-links span{grid-row:1/3;width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:rgba(255,102,0,.1);color:var(--orange);font-weight:900}.trust-links strong{color:#17181b}.trust-links small{color:#60656e;line-height:1.45;margin-top:4px}
.compliance-columns{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.compliance-do,.compliance-dont{padding:40px;border-radius:26px}.compliance-do{background:linear-gradient(145deg,#15171a,#22242a);border:1px solid rgba(255,255,255,.1)}.compliance-do h2{color:#fff!important}.compliance-do li{color:#d0d3da!important}.compliance-dont{background:linear-gradient(145deg,#fff4ee,#ffe6d8);border:1px solid rgba(255,102,0,.18)}.compliance-dont h2{color:#17181b!important}.cross-list{list-style:none;padding:0;margin:24px 0 0}.cross-list li{position:relative;padding:10px 0 10px 28px;color:#4d515b!important}.cross-list li:before{content:"×";position:absolute;left:0;color:#d94f0b;font-size:1.35rem;font-weight:900}
.company-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.company-facts>div{padding:22px;border-radius:18px;background:#fff;border:1px solid rgba(17,17,20,.09);box-shadow:0 16px 40px rgba(17,17,20,.06)}.company-facts span{display:block;color:#747983;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}.company-facts strong{color:#17181b}

/* General inner-page polish */
.page-hero{border-bottom:1px solid rgba(255,255,255,.08)}
.section:not(.alt) .card{background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.38));box-shadow:0 18px 48px rgba(17,17,20,.06)}
.section:not(.alt) .card:hover{box-shadow:0 26px 68px rgba(17,17,20,.11)}
.section.alt .card{background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.018));box-shadow:0 20px 54px rgba(0,0,0,.14)}
.section.alt .card p{color:#c3c6ce}
.reference-shell,.device-panel,.cluster-panel,.glow-metrics,.api-hub,.checkout-panel,.future-board,.ring-compare,.curve-journey,.data-halo{box-shadow:0 26px 80px rgba(17,17,20,.14)}

@media(max-width:1200px){.pricing-grid-4{grid-template-columns:repeat(2,1fr)}.documentation-hub{grid-template-columns:repeat(2,1fr)}.data-use-map,.company-facts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){.plan-comparison-panel,.google-purpose-panel,.compliance-columns{grid-template-columns:1fr}.method-grid,.trust-links{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.pricing-grid-4,.documentation-hub,.data-use-map,.method-grid,.trust-links,.company-facts,.comparison-features{grid-template-columns:1fr}.premium-price-card{min-height:auto}.plan-comparison-panel,.google-purpose-panel{padding:28px}.price-top{align-items:flex-end}.price-amount strong{font-size:2.2rem}}


/* =========================================================
   CLICKRONIX V4 — premium inner-page UI improvements
   ========================================================= */

/* Trust glass percentage cards */
.trust-percentage-shell{padding:48px;border-radius:30px;border:1px solid rgba(255,255,255,.09);background:radial-gradient(circle at 75% 15%,rgba(255,102,0,.13),transparent 34%),linear-gradient(155deg,#101114,#17181c);box-shadow:0 28px 90px rgba(0,0,0,.18)}
.trust-percentage-shell .section-head h2{color:#fff!important}.trust-percentage-shell .section-head p{color:#c9ccd4!important}.trust-glass-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.trust-glass-card{display:grid;grid-template-columns:112px 1fr;gap:20px;align-items:center;padding:24px;border-radius:24px;border:1px solid rgba(255,164,94,.25);background:linear-gradient(145deg,rgba(255,120,35,.16),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 54px rgba(255,102,0,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.trust-glass-card h3{margin:4px 0 8px;color:#fff!important;font-size:1.35rem}.trust-glass-card small{color:#ff8f4a;text-transform:uppercase;letter-spacing:.11em;font-weight:800}.trust-glass-card p{margin:0;color:#c7cad2!important;font-size:.93rem}.trust-percent{--percent:100;position:relative;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#ff6a12 calc(var(--percent)*1%),rgba(255,255,255,.09) 0);box-shadow:0 0 34px rgba(255,102,0,.2)}.trust-percent:before{content:"";position:absolute;inset:10px;border-radius:50%;background:linear-gradient(145deg,rgba(255,107,18,.28),rgba(17,18,21,.94));border:1px solid rgba(255,255,255,.08)}.trust-percent span{position:relative;z-index:1;color:#fff;font-size:1.25rem;font-weight:850}

/* Contact image + form */
.contact-form-section{background:#141519!important}.contact-form-layout{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:22px;align-items:stretch}.contact-media-card{position:relative;min-height:650px;overflow:hidden;border-radius:28px;border:1px solid rgba(255,255,255,.1);background:#111214}.contact-media-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.04)}.contact-media-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,16,19,.12),rgba(15,16,19,.68) 52%,rgba(15,16,19,.98)),radial-gradient(circle at 75% 20%,rgba(255,102,0,.34),transparent 35%)}.contact-media-content{position:absolute;inset:auto 0 0;padding:38px;color:#fff}.contact-media-content h2{color:#fff!important;max-width:480px}.contact-media-content p{color:#d3d5dc!important;max-width:520px}.contact-glass-stat{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-top:24px;padding:17px 19px;border:1px solid rgba(255,164,94,.3);border-radius:18px;background:linear-gradient(145deg,rgba(255,102,0,.25),rgba(255,255,255,.055));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.contact-glass-stat strong{color:#fff}.contact-glass-stat span{color:#e1e3e8;font-size:.9rem;text-align:right}.contact-image-note{margin-top:16px;color:#aeb1ba;font-size:.76rem}.contact-image-note code{color:#ff9b5b}.contact-premium-form{padding:38px;border:1px solid rgba(255,255,255,.11);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.02));box-shadow:0 24px 70px rgba(0,0,0,.18)}.contact-premium-form h2{color:#fff!important;margin-bottom:8px}.contact-premium-form>p{color:#bfc2cb!important;margin:0 0 22px}.contact-premium-form label{color:#fff;font-weight:700}.contact-premium-form input,.contact-premium-form select,.contact-premium-form textarea{margin-top:8px;background:#0f1013!important;border-color:rgba(255,255,255,.12)!important}.contact-premium-form .btn{width:100%;border-radius:14px;margin-top:4px}

/* Integrations hex architecture */
.hex-architecture{display:grid;grid-template-columns:.72fr 1.28fr;gap:34px;align-items:center;min-height:610px;padding:42px;border-radius:30px;border:1px solid rgba(255,255,255,.08);background:radial-gradient(circle at 8% 100%,rgba(255,81,0,.38),transparent 27%),radial-gradient(circle at 92% 0,rgba(255,102,0,.13),transparent 31%),#111214;overflow:hidden}.hex-architecture__intro h2{color:#fff!important}.hex-architecture__intro p{color:#c7cad2!important}.hex-map{position:relative;min-height:520px}.hex-map:before,.hex-map:after{content:"";position:absolute;background:#ff6411}.hex-map:before{left:50%;top:8%;bottom:8%;width:1px}.hex-map:after{top:50%;left:5%;right:5%;height:1px}.hex-node,.hex-center{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#131417;color:#fff;clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%);border:0}.hex-node:before{content:"";position:absolute;inset:1px;z-index:-1;background:linear-gradient(145deg,#17181c,#111214);clip-path:inherit}.hex-node{width:210px;height:230px;filter:drop-shadow(0 0 0 #ff6411)}.hex-node span{color:#ff6a12;font-size:.78rem;font-weight:850;letter-spacing:.08em}.hex-node strong{max-width:150px;color:#fff;font-size:1rem;text-transform:uppercase;letter-spacing:.04em}.hex-top{left:50%;top:0;transform:translateX(-50%)}.hex-left{left:7%;top:50%;transform:translateY(-50%)}.hex-right{right:7%;top:50%;transform:translateY(-50%)}.hex-bottom{left:50%;bottom:0;transform:translateX(-50%)}.hex-center{left:50%;top:50%;transform:translate(-50%,-50%);width:78px;height:86px;background:linear-gradient(145deg,#ff7b2b,#c9460d);font-size:1.65rem;font-weight:900;box-shadow:0 0 28px rgba(255,102,0,.28)}

/* Analytics projection */
.projection-board{display:grid;grid-template-columns:.72fr 1.28fr;gap:36px;align-items:center;padding:44px;border-radius:30px;border:1px solid rgba(255,255,255,.09);background:radial-gradient(circle at 80% 0,rgba(255,98,13,.35),transparent 34%),linear-gradient(145deg,#271008,#111214 42%);box-shadow:0 28px 90px rgba(0,0,0,.18)}.projection-copy h2{color:#fff!important}.projection-copy p{color:#d0d2d9!important}.projection-legend{display:grid;gap:10px;margin-top:24px;color:#d6d8de;font-size:.9rem}.projection-legend span{display:flex;align-items:center;gap:10px}.projection-legend i{width:13px;height:13px;border-radius:4px;display:block}.legend-orange{background:#ff6a12}.legend-glass{background:rgba(255,255,255,.42)}.projection-chart{position:relative;padding:24px 20px 18px 50px;border-radius:22px;background:rgba(17,18,21,.48);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px)}.projection-chart svg{width:100%;height:auto;display:block}.chart-grid line{stroke:rgba(255,255,255,.09);stroke-width:1}.area-primary{fill:url(#areaOrange)}.line-primary{fill:none;stroke:#ff6a12;stroke-width:4;stroke-linecap:round}.area-secondary{fill:url(#areaWhite)}.line-secondary{fill:none;stroke:rgba(255,255,255,.72);stroke-width:2.5;stroke-linecap:round}.chart-points circle{fill:#ff7e2c;stroke:#fff;stroke-width:2}.chart-y{position:absolute;left:15px;top:26px;bottom:35px;display:flex;flex-direction:column;justify-content:space-between;color:#9fa2ac;font-size:.72rem}.chart-x{display:flex;justify-content:space-between;color:#9fa2ac;font-size:.72rem;padding:2px 6px 0}

/* Steps-to-success roadmap */
.success-roadmap{padding:46px;border-radius:30px;border:1px solid rgba(255,255,255,.08);background:radial-gradient(circle at 50% 52%,rgba(255,101,20,.2),transparent 24%),linear-gradient(145deg,#3a1105,#141113 58%,#101114);color:#fff;overflow:hidden}.success-roadmap__head{display:grid;grid-template-columns:1fr .72fr;gap:42px;align-items:end}.success-roadmap__head h2{color:#fff!important}.success-roadmap__head p{color:#d0d2d8!important}.success-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px;padding-top:28px}.success-track:before{content:"";position:absolute;left:2%;right:2%;top:9px;height:1px;background:linear-gradient(90deg,rgba(255,102,0,.15),#ff6411,rgba(255,102,0,.15))}.success-track article{position:relative;z-index:1;padding:24px 21px;border-radius:20px;background:rgba(18,19,22,.7);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(12px)}.success-track article:before{content:"";position:absolute;left:22px;top:-26px;width:13px;height:13px;border-radius:50%;background:#ff6a12;box-shadow:0 0 22px rgba(255,102,0,.75)}.success-track article span{color:#ff8c45;text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;font-weight:800}.success-track article h3{color:#fff!important;font-size:1.25rem;margin:10px 0}.success-track article p{color:#c8cbd3!important;font-size:.92rem;margin:0}.success-orb{position:absolute;left:50%;top:50%;width:160px;height:160px;border-radius:50%;transform:translate(-50%,-38%);z-index:0;background:radial-gradient(circle at 40% 40%,rgba(255,173,104,.9),rgba(255,93,0,.36) 35%,rgba(255,78,0,.06) 64%,transparent 68%);filter:blur(.2px);opacity:.6;pointer-events:none}

/* Detection methodology hex map */
.method-hex-shell{display:grid;grid-template-columns:.68fr 1.32fr;gap:34px;align-items:center;padding:42px;border-radius:30px;background:radial-gradient(circle at 0 100%,rgba(255,84,0,.36),transparent 26%),#111214;border:1px solid rgba(255,255,255,.08);overflow:hidden}.method-hex-copy h2{color:#fff!important}.method-hex-copy p{color:#c8cbd3!important}.method-hex-map{position:relative;min-height:640px}.method-hex{position:absolute;width:220px;height:245px;padding:52px 34px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%);background:linear-gradient(145deg,#ff6b16,#6d2508);color:#fff}.method-hex:after{content:"";position:absolute;inset:2px;z-index:-1;clip-path:inherit;background:#141518}.method-hex span{color:#ff7b2b;font-size:.76rem;font-weight:850;letter-spacing:.09em}.method-hex strong{color:#fff;margin:8px 0;text-transform:uppercase;font-size:.95rem}.method-hex small{color:#bdc0c8;line-height:1.45}.method-hex-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:104px;height:116px;display:grid;place-items:center;align-content:center;clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%);background:linear-gradient(145deg,#ff7e2f,#b73b08);color:#fff}.method-hex-core b{font-size:1.7rem}.method-hex-core span{font-size:.72rem;text-transform:uppercase}.hx1{left:50%;top:0;transform:translateX(-50%)}.hx2{left:6%;top:24%}.hx3{right:6%;top:24%}.hx4{left:6%;bottom:0}.hx5{right:6%;bottom:0}.hx6{left:50%;bottom:-4%;transform:translateX(-50%);opacity:0;pointer-events:none}

/* Keep every premium dark card readable inside light sections */
.section:not(.alt) .platform-panel__copy,.section:not(.alt) .platform-panel__copy h2,.section:not(.alt) .platform-panel__copy p,.section:not(.alt) .platform-panel__copy li{color:#fff!important}.section.alt .card h3{color:#fff!important}.section.alt .card p{color:#c4c7cf!important}.section.alt .card{background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border-color:rgba(255,255,255,.1)}

/* CTA polishing: the remaining CTAs feel purposeful, not repetitive */
.cta-band{border-radius:28px;padding:50px 54px;background:radial-gradient(circle at 88% 20%,rgba(255,145,65,.24),transparent 31%),linear-gradient(120deg,#24120b,#17171a 60%);box-shadow:0 24px 70px rgba(17,17,20,.12)}.cta-band .button-row{min-width:210px}.cta-band .btn-secondary{color:#fff!important;background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.18)!important}

@media(max-width:1180px){.trust-glass-grid{grid-template-columns:1fr}.trust-glass-card{grid-template-columns:100px 1fr}.projection-board,.hex-architecture,.method-hex-shell{grid-template-columns:1fr}.success-roadmap__head{grid-template-columns:1fr}.success-track{grid-template-columns:1fr 1fr}.hex-map{min-height:570px}.method-hex-map{min-height:680px}}
@media(max-width:820px){.contact-form-layout{grid-template-columns:1fr}.contact-media-card{min-height:540px}.projection-board,.trust-percentage-shell,.success-roadmap,.hex-architecture,.method-hex-shell{padding:28px}.projection-chart{padding-left:42px}.success-track{grid-template-columns:1fr}.success-track:before,.success-track article:before,.success-orb{display:none}.hex-map{min-height:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px}.hex-map:before,.hex-map:after{display:none}.hex-node,.hex-center{position:relative;inset:auto!important;transform:none!important;width:100%;height:190px}.hex-center{height:90px;grid-column:1/-1}.method-hex-map{min-height:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px}.method-hex,.method-hex-core{position:relative;inset:auto!important;transform:none!important;width:100%;height:210px}.method-hex-core{height:90px;grid-column:1/-1}.hx6{display:none}.cta-band{padding:38px 30px}}
@media(max-width:560px){.trust-glass-card{grid-template-columns:1fr;text-align:center}.trust-percent{margin:auto}.contact-media-card{min-height:500px}.contact-media-content{padding:26px}.contact-premium-form{padding:26px}.projection-board,.trust-percentage-shell,.success-roadmap,.hex-architecture,.method-hex-shell{padding:22px}.hex-map,.method-hex-map{grid-template-columns:1fr}.hex-center,.method-hex-core{grid-column:auto}.projection-chart{padding:18px 12px 14px 36px}.cta-band{padding:32px 24px}}


/* V4 final stability overrides */
.trust-percent{background:conic-gradient(#ff6a12 var(--percent),rgba(255,255,255,.09) 0)}
.method-hex-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"hx1 hx2 hx3" "hx4 core hx5" ". hx6 .";gap:12px;min-height:0;align-items:center}.method-hex,.method-hex-core{position:relative!important;inset:auto!important;transform:none!important;width:100%!important}.method-hex{height:220px}.method-hex-core{grid-area:core;height:112px;justify-self:center;max-width:120px}.hx1{grid-area:hx1}.hx2{grid-area:hx2}.hx3{grid-area:hx3}.hx4{grid-area:hx4}.hx5{grid-area:hx5}.hx6{grid-area:hx6;opacity:1!important;pointer-events:auto!important}
@media(max-width:820px){.method-hex-map{grid-template-columns:1fr 1fr;grid-template-areas:"hx1 hx2" "hx3 hx4" "hx5 hx6" "core core"}.method-hex-core{grid-column:auto!important}}
@media(max-width:560px){.method-hex-map{grid-template-columns:1fr;grid-template-areas:"hx1" "hx2" "hx3" "hx4" "hx5" "hx6" "core"}.method-hex-core{grid-column:auto!important}}


/* =========================================================
   CLICKRONIX V5 FINAL OVERRIDES
   ========================================================= */
/* Orange metric forms are now translucent glass, not solid blocks */
.glow-shape{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(255,147,74,.38),rgba(255,86,0,.12))!important;border:1px solid rgba(255,177,118,.46);box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -22px 42px rgba(255,91,0,.12),0 18px 46px rgba(255,102,0,.16)!important;backdrop-filter:blur(20px) saturate(145%);-webkit-backdrop-filter:blur(20px) saturate(145%)}
.glow-shape:before{content:"";position:absolute;inset:12% 18%;border-radius:34px;background:linear-gradient(150deg,rgba(255,255,255,.22),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.glow-shape:after{content:"";position:absolute;width:78px;height:78px;border-radius:50%;left:50%;bottom:-22px;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,103,20,.58),rgba(255,103,20,.12) 48%,transparent 72%);filter:blur(4px)}

/* Compact footer with useful brand copy directly under logo */
.site-footer{padding:42px 0 20px!important}.site-footer .container{width:min(100% - 48px,1540px)}
.footer-top{grid-template-columns:minmax(260px,.92fr) repeat(3,minmax(170px,1fr))!important;gap:34px!important}
.footer-brand{display:flex!important;flex-direction:column!important;align-items:flex-start!important;padding:0!important}.footer-brand .footer-logo{width:164px!important;max-width:164px!important;margin:0 0 10px!important}.footer-brand-copy{max-width:310px;margin:0!important;color:#b9bbc3!important;font-size:.89rem;line-height:1.58}.footer-bottom{margin-top:28px!important;padding-top:17px!important}
@media(max-width:980px){.footer-top{grid-template-columns:1fr 1fr!important}.footer-brand{grid-column:1/-1}.footer-brand-copy{max-width:520px}}
@media(max-width:620px){.site-footer .container{width:min(100% - 30px,1540px)}.footer-top{grid-template-columns:1fr!important}.footer-brand{grid-column:auto}.footer-brand-copy{max-width:none}}

/* First-visit cookie card: white, wider, shorter */
.cookie-glass-card{display:none!important}
.cookie-choice-card{position:fixed;right:24px;bottom:24px;z-index:9999;width:min(760px,calc(100vw - 48px));min-height:132px;padding:20px 22px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;border:1px solid rgba(17,17,20,.10);border-radius:22px;background:rgba(255,255,255,.96);box-shadow:0 24px 70px rgba(17,17,20,.22),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);color:#17181b;transform:translateY(15px);opacity:0;animation:cookieV5In .38s cubic-bezier(.22,.61,.36,1) forwards}
.cookie-choice-copy{display:flex;align-items:flex-start;gap:14px}.cookie-choice-icon{width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;border-radius:13px;background:linear-gradient(145deg,#ff7d2d,#ff5b00);color:#fff;font-weight:900;box-shadow:0 10px 28px rgba(255,102,0,.24)}.cookie-choice-card h2{margin:0 0 5px;color:#ef5c0b;font-size:1.15rem;letter-spacing:-.02em}.cookie-choice-card p{margin:0;color:#34373e;font-size:.91rem;line-height:1.48;max-width:500px}.cookie-choice-card a{display:inline-block;margin-top:6px;color:#d64b08;font-size:.84rem;font-weight:750;text-decoration:underline;text-underline-offset:3px}.cookie-choice-actions{display:flex;gap:10px;align-items:center}.cookie-choice-actions button{min-height:44px;padding:10px 17px;border-radius:999px;font-weight:800;cursor:pointer;white-space:nowrap}.cookie-choice-black{background:#111214;color:#fff;border:1px solid #111214}.cookie-choice-orange{background:linear-gradient(100deg,#e94d0d,#ff6b0b);color:#fff;border:1px solid #ef5b0b;box-shadow:0 10px 26px rgba(255,102,0,.2)}.cookie-choice-card.is-closing{animation:cookieV5Out .2s ease forwards}@keyframes cookieV5In{to{transform:translateY(0);opacity:1}}@keyframes cookieV5Out{to{transform:translateY(12px);opacity:0}}
@media(max-width:780px){.cookie-choice-card{right:16px;bottom:82px;width:calc(100vw - 32px);grid-template-columns:1fr;gap:14px;padding:18px}.cookie-choice-actions{justify-content:flex-end}}
@media(max-width:480px){.cookie-choice-copy{gap:10px}.cookie-choice-icon{width:36px;height:36px;flex-basis:36px}.cookie-choice-actions{display:grid;grid-template-columns:1fr 1fr}.cookie-choice-actions button{width:100%;padding-inline:10px}}

/* Additional editorial sections inspired by the supplied orange-and-white layouts */
.v5-insight{padding:88px 0;background:#fff4ef;color:#17181b}.v5-insight .v5-shell{border-radius:30px;overflow:hidden;border:1px solid rgba(17,17,20,.09);background:#fff;box-shadow:0 24px 70px rgba(17,17,20,.08)}.v5-insight h2,.v5-insight h3{color:#17181b}.v5-insight p{color:#5d626d}.v5-kicker{display:inline-flex;align-items:center;gap:10px;color:#ef5c0b;font-weight:850;letter-spacing:.14em;text-transform:uppercase;font-size:.76rem}.v5-kicker:before{content:"";width:26px;height:2px;background:#ef5c0b}

/* A: contents / capability map */
.v5-contents{padding:42px}.v5-contents-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:28px}.v5-contents-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.v5-content-card{padding:20px;border-radius:16px;background:linear-gradient(180deg,#fff,#f5f5f3);border:1px solid rgba(17,17,20,.09)}.v5-content-card span{color:#ef5c0b;font-weight:900;font-size:.78rem}.v5-content-card h3{font-size:1.05rem;margin:9px 0 6px}.v5-content-card p{font-size:.88rem;margin:0}
/* B: dual contrast */
.v5-dual{display:grid;grid-template-columns:1fr 1fr}.v5-dual>div{padding:42px;min-height:300px}.v5-dual-light{background:#fff}.v5-dual-orange{background:linear-gradient(145deg,#ff7e32,#e9540c);color:#fff}.v5-dual-orange h2,.v5-dual-orange h3{color:#fff}.v5-dual-orange p{color:rgba(255,255,255,.88)}.v5-dual-list{display:grid;gap:10px;margin-top:20px}.v5-dual-list span{padding:11px 14px;border-radius:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24)}
/* C: numbered orbit */
.v5-orbit{padding:44px;text-align:center}.v5-orbit-map{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}.v5-orbit-map:before{content:"";position:absolute;left:12%;right:12%;top:44px;height:1px;background:linear-gradient(90deg,transparent,#ff6a12,transparent)}.v5-orbit-item{position:relative;z-index:1;padding:24px 18px;border-radius:18px;background:#fff;border:1px solid rgba(17,17,20,.09)}.v5-orbit-num{width:52px;height:52px;margin:0 auto 14px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#ff7e31,#f0520b);color:#fff;font-weight:900;box-shadow:0 12px 28px rgba(255,102,0,.22)}
/* D: comparison rows */
.v5-compare{padding:42px}.v5-compare-grid{display:grid;gap:12px;margin-top:26px}.v5-compare-row{display:grid;grid-template-columns:180px 1fr 1fr;gap:12px;align-items:center;padding:14px;border-radius:16px;background:#f8f8f7;border:1px solid rgba(17,17,20,.08)}.v5-compare-row strong{color:#ef5c0b}.v5-compare-cell{padding:12px;border-radius:12px;background:#fff;border:1px solid rgba(17,17,20,.07)}
/* E: glass mini bars */
.v5-bars{padding:42px;background:linear-gradient(145deg,#16171a,#0f1012)!important;color:#fff}.v5-bars h2{color:#fff}.v5-bars p{color:#c7cad2}.v5-bar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:end;margin-top:30px}.v5-bar-card{text-align:center}.v5-bar-card strong{display:block;color:#fff;font-size:1.25rem;margin-bottom:10px}.v5-bar-glass{height:150px;border-radius:28px;background:linear-gradient(145deg,rgba(255,147,74,.34),rgba(255,86,0,.10));border:1px solid rgba(255,173,110,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 18px 45px rgba(255,102,0,.16);backdrop-filter:blur(18px);position:relative;overflow:hidden}.v5-bar-card:nth-child(1) .v5-bar-glass{height:82px}.v5-bar-card:nth-child(2) .v5-bar-glass{height:116px}.v5-bar-glass:after{content:"";position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);width:82px;height:82px;border-radius:50%;background:radial-gradient(circle,rgba(255,103,18,.62),transparent 68%)}.v5-bar-card p{font-size:.9rem;margin:10px 0 0}
/* F: funnel */
.v5-funnel{padding:42px}.v5-funnel-body{display:grid;grid-template-columns:.75fr 1.25fr;gap:34px;align-items:center}.v5-funnel-stack{display:grid;gap:10px}.v5-funnel-level{margin:auto;padding:13px 18px;text-align:center;border-radius:999px;background:linear-gradient(90deg,#ff7d32,#ef570d);color:#fff;font-weight:800;box-shadow:0 10px 24px rgba(255,102,0,.14)}.v5-funnel-level:nth-child(1){width:100%}.v5-funnel-level:nth-child(2){width:82%}.v5-funnel-level:nth-child(3){width:64%}.v5-funnel-level:nth-child(4){width:46%}
/* G: numbered workflow */
.v5-workflow{padding:42px}.v5-workflow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}.v5-workflow-card{padding:22px;border-radius:18px;background:#fff;border:1px solid rgba(17,17,20,.09)}.v5-workflow-card b{display:inline-flex;padding:6px 10px;border-radius:9px;background:#fff0e7;color:#ef5c0b}.v5-workflow-card h3{font-size:1.08rem;margin:14px 0 7px}.v5-workflow-card p{font-size:.9rem;margin:0}
/* H: geometric story */
.v5-geometry{padding:42px;background:linear-gradient(145deg,#16171a,#101113)!important;color:#fff}.v5-geometry h2{color:#fff}.v5-geometry p{color:#c9ccd3}.v5-geometry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}.v5-geo-card{min-height:190px;padding:28px 20px;display:flex;flex-direction:column;justify-content:center;text-align:center;clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);background:linear-gradient(145deg,rgba(255,107,18,.18),rgba(255,255,255,.03));border:1px solid rgba(255,132,63,.35)}.v5-geo-card strong{color:#ff7b2b}.v5-geo-card span{color:#fff;margin-top:8px}
@media(max-width:980px){.v5-contents-grid,.v5-geometry-grid{grid-template-columns:1fr 1fr}.v5-dual,.v5-funnel-body{grid-template-columns:1fr}.v5-workflow-grid,.v5-orbit-map,.v5-bar-grid{grid-template-columns:1fr}.v5-orbit-map:before{display:none}.v5-compare-row{grid-template-columns:1fr}}
@media(max-width:600px){.v5-insight{padding:62px 0}.v5-contents,.v5-orbit,.v5-compare,.v5-bars,.v5-funnel,.v5-workflow,.v5-geometry{padding:26px}.v5-contents-grid,.v5-geometry-grid{grid-template-columns:1fr}.v5-contents-head{display:block}.v5-dual>div{padding:28px;min-height:0}}


/* =========================================================
   CLICKRONIX V6 FLAT DESIGN SECTIONS
   Removes the oversized rounded background/banner card from
   editorial design sections while preserving their inner UI.
   ========================================================= */
.premium-flat-section{
  position:relative;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.premium-flat-section.premium-flat-dark{
  background:#111214!important;
  color:#fff!important;
}
.premium-flat-section.premium-flat-light{
  background:#fff4ef!important;
  color:#17181b!important;
}

/* The section itself is now the canvas. These wrappers no longer look
   like a second banner/card placed inside the page section. */
.premium-flat-section .v5-shell,
.premium-flat-section .reference-shell,
.premium-flat-section .device-panel,
.premium-flat-section .data-halo,
.premium-flat-section .cluster-panel,
.premium-flat-section .glow-metrics,
.premium-flat-section .api-hub,
.premium-flat-section .checkout-panel,
.premium-flat-section .future-board,
.premium-flat-section .ring-compare,
.premium-flat-section .curve-journey,
.premium-flat-section .trust-percentage-shell,
.premium-flat-section .projection-board,
.premium-flat-section .success-roadmap,
.premium-flat-section .hex-architecture,
.premium-flat-section .method-hex-shell{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Keep the useful internal cards, nodes, bars and diagrams intact. */
.premium-flat-dark h1,
.premium-flat-dark h2,
.premium-flat-dark h3,
.premium-flat-dark strong{
  color:#fff!important;
}
.premium-flat-dark p,
.premium-flat-dark li,
.premium-flat-dark .lead,
.premium-flat-dark .muted{
  color:#c9ccd4!important;
}
.premium-flat-light h1,
.premium-flat-light h2,
.premium-flat-light h3{
  color:#17181b!important;
}
.premium-flat-light p,
.premium-flat-light li,
.premium-flat-light .lead,
.premium-flat-light .muted{
  color:#5d626d!important;
}

/* V5 shells no longer create a white or black rounded panel. */
.v5-insight.premium-flat-section .v5-shell{
  border-radius:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.v5-insight.premium-flat-dark{
  background:#111214!important;
}
.v5-insight.premium-flat-light{
  background:#fff4ef!important;
}

/* Remove only the outer panel styling; do not flatten the smaller cards. */
.premium-flat-section .v5-content-card,
.premium-flat-section .v5-workflow-card,
.premium-flat-section .v5-orbit-item,
.premium-flat-section .v5-compare-row,
.premium-flat-section .v5-compare-cell,
.premium-flat-section .flow-step,
.premium-flat-section .api-card,
.premium-flat-section .order-summary,
.premium-flat-section .secure-form,
.premium-flat-section .mini-stat,
.premium-flat-section .callout-box,
.premium-flat-section .trust-glass-card,
.premium-flat-section .success-track article{
  box-sizing:border-box;
}

/* The methodology and integration diagrams now sit directly on the dark
   section background rather than inside an additional rounded banner. */
.premium-flat-section .method-hex-copy,
.premium-flat-section .hex-architecture__intro{
  padding-block:12px;
}

@media(max-width:820px){
  .premium-flat-section .v5-shell,
  .premium-flat-section .reference-shell,
  .premium-flat-section .device-panel,
  .premium-flat-section .data-halo,
  .premium-flat-section .cluster-panel,
  .premium-flat-section .glow-metrics,
  .premium-flat-section .api-hub,
  .premium-flat-section .checkout-panel,
  .premium-flat-section .future-board,
  .premium-flat-section .ring-compare,
  .premium-flat-section .curve-journey,
  .premium-flat-section .trust-percentage-shell,
  .premium-flat-section .projection-board,
  .premium-flat-section .success-roadmap,
  .premium-flat-section .hex-architecture,
  .premium-flat-section .method-hex-shell{
    border-radius:0!important;
  }
}


/* =========================================================
   V7 FINAL VISUAL FIXES
   White canvases, black typography, clean percentage glass
   ========================================================= */

/* Cookie close control */
.cookie-choice-card{position:fixed!important;padding-right:62px!important}
.cookie-choice-close{position:absolute;top:0;right:0;width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:0 21px 0 16px;background:#111214;color:#fff;font-size:1.9rem;line-height:1;cursor:pointer;transition:background .2s ease,transform .2s ease}
.cookie-choice-close:hover{background:#ef5b0b}.cookie-choice-close:active{transform:scale(.96)}
.cookie-choice-close span{transform:translateY(-1px)}
@media(max-width:480px){.cookie-choice-card{padding-right:52px!important}.cookie-choice-close{width:42px;height:42px;font-size:1.65rem}}

/* Referenced analytics journey section: white, readable and premium */
.premium-flat-light .curve-journey{background:#fff!important;color:#17181b!important;padding:48px!important;border-radius:28px!important;box-shadow:0 22px 65px rgba(17,17,20,.10)!important;overflow:hidden!important}
.premium-flat-light .curve-journey h2,.premium-flat-light .curve-journey h3{color:#17181b!important}
.premium-flat-light .curve-journey p,.premium-flat-light .curve-journey .lead{color:#555b66!important}
.premium-flat-light .curve-journey .curve-line{background:linear-gradient(90deg,#ff8b39,#f1580a)!important;box-shadow:0 10px 26px rgba(255,102,0,.22)!important}
.premium-flat-light .curve-journey .chip-float{background:#fff!important;color:#17181b!important;border-color:rgba(17,17,20,.18)!important;box-shadow:0 8px 24px rgba(17,17,20,.10)!important}

/* Evidence model: remove lower orb and use white cards with black copy */
.premium-flat-light .data-halo{background:#fff!important;color:#17181b!important;padding:48px!important;border-radius:28px!important;box-shadow:0 22px 65px rgba(17,17,20,.10)!important;overflow:hidden!important}
.premium-flat-light .data-halo .section-head h2,.premium-flat-light .data-halo .callout-box h3{color:#17181b!important}
.premium-flat-light .data-halo .section-head p,.premium-flat-light .data-halo .callout-box p{color:#555b66!important}
.premium-flat-light .data-halo .callout-box{background:#fff!important;border:1px solid rgba(17,17,20,.13)!important;box-shadow:0 12px 32px rgba(17,17,20,.08)!important}
.premium-flat-light .data-halo .halo-center{display:none!important}

/* Geometry operating model: clean white section and white cards */
.v5-insight.premium-flat-light{background:#fff4ef!important;color:#17181b!important}
.v5-insight.premium-flat-light .v5-geometry{background:#fff!important;color:#17181b!important;padding:48px!important;border-radius:28px!important;box-shadow:0 22px 65px rgba(17,17,20,.10)!important}
.v5-insight.premium-flat-light .v5-geometry h2{color:#17181b!important}
.v5-insight.premium-flat-light .v5-geometry p{color:#555b66!important}
.v5-insight.premium-flat-light .v5-geo-card{background:#fff!important;border:1px solid rgba(17,17,20,.15)!important;box-shadow:0 12px 30px rgba(17,17,20,.08)!important}
.v5-insight.premium-flat-light .v5-geo-card span{color:#17181b!important}
.v5-insight.premium-flat-light .v5-geo-card strong{color:#ef5b0b!important}

/* Common priorities: white cards, no nested glass box, percentage inside */
.premium-flat-light .glow-metrics{background:#fff!important;color:#17181b!important;padding:48px!important;border-radius:28px!important;box-shadow:0 22px 65px rgba(17,17,20,.10)!important}
.premium-flat-light .glow-metrics .section-head h2,.premium-flat-light .glow-metrics .glow-bar b{color:#17181b!important}
.premium-flat-light .glow-metrics .section-head p,.premium-flat-light .glow-metrics .glow-caption{color:#555b66!important}
.premium-flat-light .glow-bars{align-items:stretch!important}
.premium-flat-light .glow-bar{display:flex;flex-direction:column;min-width:0}
.premium-flat-light .glow-shape,.premium-flat-light .glow-bar.small .glow-shape,.premium-flat-light .glow-bar.medium .glow-shape{height:150px!important;display:grid;place-items:center;border-radius:26px!important;background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(255,241,231,.76))!important;border:1px solid rgba(239,91,11,.34)!important;box-shadow:0 16px 38px rgba(239,91,11,.13),inset 0 1px 0 #fff!important;position:relative;overflow:hidden}
.premium-flat-light .glow-shape:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.78),transparent 42%,rgba(255,126,45,.10));pointer-events:none}
.premium-flat-light .glow-shape:after{display:none!important;content:none!important}
.glow-percentage{position:relative;z-index:1;color:#ef5b0b;font-size:clamp(2.2rem,4vw,4rem);font-weight:850;letter-spacing:-.055em}

@media(max-width:700px){
 .premium-flat-light .curve-journey,.premium-flat-light .data-halo,.v5-insight.premium-flat-light .v5-geometry,.premium-flat-light .glow-metrics{padding:28px!important;border-radius:22px!important}
}


/* V8 lightweight circular carousel */
.cx-carousel-section{padding:94px 0;background:#111214;color:#fff;overflow:hidden}
.cx-carousel-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.55fr);gap:36px;align-items:end;margin-bottom:30px}
.cx-carousel-head h2{color:#fff;max-width:760px}.cx-carousel-head p{color:#bfc2ca;margin:0}
.cx-carousel{position:relative;min-height:520px;display:grid;place-items:center;outline:none;isolation:isolate}
.cx-carousel-track{position:relative;width:min(100%,720px);height:330px;margin-inline:auto}
.cx-carousel-card{position:absolute;left:50%;top:50%;width:210px;height:144px;margin:-72px 0 0 -105px;padding:18px;border:1px solid rgba(255,255,255,.13);border-radius:20px;background:linear-gradient(180deg,rgba(48,49,54,.92),rgba(22,23,27,.95));backdrop-filter:blur(12px);box-shadow:0 12px 30px rgba(0,0,0,.28);color:#fff;text-align:left;cursor:pointer;transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .65s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease;will-change:transform,opacity}
.cx-carousel-card:hover,.cx-carousel-card[aria-selected="true"]{border-color:rgba(255,102,0,.62);box-shadow:0 22px 60px rgba(0,0,0,.44),0 0 28px rgba(255,102,0,.14)}
.cx-carousel-tag{display:inline-flex;padding:4px 8px;border-radius:999px;background:rgba(255,102,0,.12);color:#ff9a57;font-size:.65rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.cx-carousel-card h3{font-size:1.02rem;letter-spacing:-.02em;margin:25px 0 6px;color:#fff}.cx-carousel-card p{font-size:.76rem;line-height:1.48;color:#bfc2ca;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cx-carousel-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none;z-index:20}.cx-carousel-number{font-size:3.5rem;font-weight:800;line-height:1;color:#fff}.cx-carousel-total{font-size:.78rem;color:#868a93;margin-top:6px}
.cx-carousel-controls{display:flex;align-items:center;gap:16px;position:absolute;bottom:22px;z-index:30}.cx-carousel-arrow{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.05);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.25s ease}.cx-carousel-arrow:hover{background:rgba(255,102,0,.16);border-color:rgba(255,102,0,.55);transform:scale(1.06)}
.cx-carousel-dots{display:flex;gap:7px;align-items:center}.cx-carousel-dot{width:7px;height:7px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.22);cursor:pointer;transition:.3s ease}.cx-carousel-dot.active{width:26px;background:#ff7a24}
@media(max-width:760px){.cx-carousel-section{padding:72px 0}.cx-carousel-head{grid-template-columns:1fr}.cx-carousel{min-height:470px}.cx-carousel-track{height:300px}.cx-carousel-card{width:178px;height:128px;margin:-64px 0 0 -89px;padding:14px}.cx-carousel-card h3{font-size:.9rem;margin-top:18px}.cx-carousel-card p{font-size:.7rem}.cx-carousel-number{font-size:2.8rem}}
@media(prefers-reduced-motion:reduce){.cx-carousel-card{transition:none!important}}

/* V8 lazy bot / invalid-traffic visual */
.cx-bot-section{padding:96px 0;background:#f2f2f3;color:#17181b;overflow:hidden}
.cx-bot-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr);gap:52px;align-items:center}
.cx-bot-copy h2{color:#17181b;max-width:650px}.cx-bot-copy p{color:#5f646f;max-width:620px}.cx-bot-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}.cx-bot-chip{padding:14px 16px;border:1px solid rgba(17,17,20,.1);border-radius:14px;background:#fff;color:#31343b;font-size:.9rem;box-shadow:0 10px 28px rgba(22,22,25,.06)}
.cx-bot-stage{position:relative;min-height:430px;border-radius:32px;background:radial-gradient(circle at 50% 42%,rgba(255,102,0,.14),transparent 31%),linear-gradient(180deg,#15161a,#0d0e11);border:1px solid rgba(17,17,20,.1);overflow:hidden;box-shadow:0 28px 80px rgba(20,20,24,.15)}
.cx-bot-canvas{display:block;width:100%;height:430px}.cx-bot-status{position:absolute;left:22px;right:22px;bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 16px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(17,18,22,.62);backdrop-filter:blur(10px);color:#fff;font-size:.82rem}.cx-bot-status span{display:flex;align-items:center;gap:8px}.cx-bot-status i{width:8px;height:8px;border-radius:50%;background:#ff6a12;box-shadow:0 0 16px #ff6a12}.cx-bot-loader{position:absolute;inset:0;display:grid;place-items:center;color:#ff9a57;font-weight:700;letter-spacing:.08em;transition:opacity .3s}.cx-bot-stage.ready .cx-bot-loader{opacity:0;pointer-events:none}
@media(max-width:900px){.cx-bot-grid{grid-template-columns:1fr}.cx-bot-stage{min-height:380px}.cx-bot-canvas{height:380px}}
@media(max-width:600px){.cx-bot-section{padding:72px 0}.cx-bot-list{grid-template-columns:1fr}.cx-bot-stage{min-height:330px;border-radius:22px}.cx-bot-canvas{height:330px}.cx-bot-status{left:12px;right:12px;bottom:12px;flex-direction:column;align-items:flex-start}}


/* =========================================================
   STATIC PRODUCT SHOWCASES — V10
   Replaces animation-heavy sections with fast local images.
   ========================================================= */
.cx-static-section {
  background: #f4f4f3;
  color: #17181b;
  padding: 90px 0;
}

.cx-static-showcase {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
  align-items: center;
  gap: 58px;
}

.cx-static-showcase.reverse .cx-static-copy {
  order: 2;
}

.cx-static-showcase.reverse .cx-static-media {
  order: 1;
}

.cx-static-copy h2 {
  color: #17181b;
  max-width: 680px;
  margin-bottom: 20px;
}

.cx-static-copy .lead {
  color: #5d626c;
  max-width: 650px;
}

.cx-static-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}

.cx-static-list li {
  position: relative;
  padding: 14px 16px 14px 42px;
  border: 1px solid rgba(18, 18, 22, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  color: #30333a;
  box-shadow: 0 12px 30px rgba(18, 18, 22, 0.05);
}

.cx-static-list li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff6600;
  transform: translateY(-50%);
  box-shadow: 0 0 0 5px rgba(255, 102, 0, 0.1);
}

.cx-static-media {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(18, 18, 22, 0.08);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 28px 70px rgba(18, 18, 22, 0.12);
}

.cx-static-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  background: #ffffff;
}

/* Lightweight vector-style section utilities */
.cx-vector-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.cx-vector-card {
  min-height: 160px;
  padding: 24px;
  border: 1px solid rgba(18, 18, 22, 0.1);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #fff4ef);
}

.cx-vector-card strong {
  display: block;
  margin-bottom: 10px;
  color: #17181b;
}

.cx-vector-card p {
  margin: 0;
  color: #626771;
}

@media (max-width: 980px) {
  .cx-static-showcase,
  .cx-static-showcase.reverse {
    grid-template-columns: 1fr;
  }

  .cx-static-showcase.reverse .cx-static-copy,
  .cx-static-showcase.reverse .cx-static-media {
    order: initial;
  }

  .cx-vector-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .cx-static-section {
    padding: 68px 0;
  }

  .cx-static-list,
  .cx-vector-grid {
    grid-template-columns: 1fr;
  }

  .cx-static-media {
    border-radius: 18px;
  }
}


/* V11: editable HTML/CSS recreations of supplied section references */
.cx-static-showcase-live{align-items:center;gap:54px}
.cx-ref{width:100%;min-height:360px;border-radius:26px;background:#fff;color:#17181b;border:1px solid rgba(17,24,39,.09);box-shadow:0 24px 70px rgba(17,24,39,.10);padding:28px;overflow:hidden;position:relative}
.cx-ref *{box-sizing:border-box}.cx-ref-top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:18px;border-bottom:1px solid #ececf0}.cx-ref-top strong{font-size:1rem;color:#17181b}.cx-ref-top span{font-size:.82rem;color:#6e7280}
.cx-ref-comparison{display:flex;flex-direction:column}.cx-compare-head,.cx-compare-row{display:grid;grid-template-columns:.9fr 1.05fr 1.05fr;gap:8px;align-items:stretch}.cx-compare-head{margin-top:18px;font-size:.78rem;font-weight:800;color:#737783}.cx-compare-head span,.cx-compare-row>*{padding:12px 14px}.cx-compare-row{border-bottom:1px solid #ececf0;font-size:.82rem}.cx-compare-row b{color:#25262b}.cx-compare-row span:nth-child(2){background:#fff4ed;color:#9b3f14;border-radius:10px}.cx-compare-row span:nth-child(3){color:#555b66}
.cx-audience-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:22px}.cx-audience-grid article{padding:18px;border:1px solid #ececf0;border-radius:16px;background:linear-gradient(145deg,#fff,#fff4ef)}.cx-audience-grid article:nth-child(1),.cx-audience-grid article:nth-child(4){background:linear-gradient(145deg,#fff7f2,#fff)}.cx-audience-grid span{color:#ff5a0a;font-weight:900;font-size:.8rem}.cx-audience-grid h3{font-size:1rem;margin:8px 0;color:#1d1e22}.cx-audience-grid p{font-size:.82rem;line-height:1.5;margin:0;color:#656a75}
.cx-time-line{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:58px}.cx-time-line:before{content:"";position:absolute;left:5%;right:5%;top:22px;height:2px;background:linear-gradient(90deg,#ff7a33,#ff4f00)}.cx-time-item{position:relative;text-align:center;padding-top:52px}.cx-time-item i{position:absolute;top:0;left:50%;transform:translateX(-50%);width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#ff5d0a;color:#fff;font-style:normal;font-weight:900;box-shadow:0 9px 22px rgba(255,93,10,.26)}.cx-time-item b{display:block;color:#1e2025;font-size:.9rem}.cx-time-item p{font-size:.76rem;color:#707580;line-height:1.45;margin:6px 0 0}
.cx-model-grid{position:relative;min-height:290px;margin-top:18px}.cx-model-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:145px;height:145px;border-radius:50%;background:linear-gradient(145deg,#ff7431,#ff4e00);display:grid;place-content:center;text-align:center;color:#fff;box-shadow:0 16px 38px rgba(255,78,0,.25)}.cx-model-core small{font-size:.65rem;letter-spacing:.13em}.cx-model-core strong{font-size:1.05rem;line-height:1.25;margin-top:7px}.cx-model-node{position:absolute;width:140px;padding:14px;border-radius:14px;background:#fff;border:1px solid #e7e8ec;box-shadow:0 10px 26px rgba(17,24,39,.07)}.cx-model-node b{display:block;color:#ff5400;font-size:.78rem}.cx-model-node span{display:block;color:#606571;font-size:.72rem;line-height:1.4;margin-top:4px}.cx-model-node.n1{left:2%;top:8%}.cx-model-node.n2{right:2%;top:8%}.cx-model-node.n3{left:2%;bottom:7%}.cx-model-node.n4{right:2%;bottom:7%}.cx-model-node:after{content:"";position:absolute;width:58px;height:1px;background:#ff9a68;top:50%}.cx-model-node.n1:after,.cx-model-node.n3:after{left:100%}.cx-model-node.n2:after,.cx-model-node.n4:after{right:100%}
.cx-bars-wrap{display:grid;grid-template-columns:44px 1fr;gap:14px;height:240px;margin-top:22px}.cx-bars-axis{display:flex;flex-direction:column;justify-content:space-between;color:#8b8f98;font-size:.66rem;padding-bottom:8px}.cx-bars{display:grid;grid-template-columns:repeat(6,1fr);align-items:end;gap:18px;border-left:1px solid #e7e8eb;border-bottom:1px solid #e7e8eb;padding:14px 14px 0}.cx-bars>div{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px}.cx-bars span{display:block;width:66%;min-width:18px;border-radius:8px 8px 2px 2px;background:linear-gradient(180deg,#ff8a4f,#ff5400);box-shadow:0 9px 18px rgba(255,84,0,.18)}.cx-bars b{font-size:.7rem;color:#4f535c}.cx-bars-labels{display:grid;grid-template-columns:repeat(6,1fr);padding-left:58px;margin-top:10px;text-align:center;font-size:.67rem;color:#717681}
.cx-circle-stage{display:grid;place-items:center;min-height:290px}.cx-circle-ring{position:relative;width:235px;height:235px;border-radius:50%;border:14px solid #ff5b0b;box-shadow:inset 0 0 0 14px #fff,0 0 0 1px #fff4ef}.cx-circle-ring:after{content:"";position:absolute;inset:22px;border:2px dashed #ffb28c;border-radius:50%;animation:cx-spin 16s linear infinite}.cx-circle-center{position:absolute;inset:62px;display:grid;place-content:center;text-align:center;background:#fff;border-radius:50%;z-index:2}.cx-circle-center strong{font-size:1rem;color:#17181b}.cx-circle-center span{font-size:.72rem;color:#777c85}.cx-circle-ring i{position:absolute;z-index:3;padding:7px 9px;border-radius:999px;background:#17181b;color:#fff;font-size:.63rem;font-style:normal}.cx-circle-ring .p1{left:-18px;top:44%}.cx-circle-ring .p2{right:-25px;top:18%}.cx-circle-ring .p3{right:-22px;bottom:19%}.cx-circle-ring .p4{left:30%;bottom:-15px}@keyframes cx-spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.cx-static-showcase-live{grid-template-columns:1fr}.cx-ref{min-height:auto}.cx-time-line{grid-template-columns:1fr;margin-top:24px}.cx-time-line:before{display:none}.cx-time-item{text-align:left;padding:10px 10px 10px 64px}.cx-time-item i{left:24px;top:8px;transform:none}.cx-audience-grid{grid-template-columns:1fr 1fr}.cx-model-grid{min-height:400px}.cx-model-core{top:50%}.cx-model-node.n1{left:0}.cx-model-node.n2{right:0}.cx-model-node.n3{left:0}.cx-model-node.n4{right:0}.cx-model-node:after{display:none}}
@media(max-width:560px){.cx-audience-grid{grid-template-columns:1fr}.cx-compare-head,.cx-compare-row{grid-template-columns:1fr}.cx-compare-head{display:none}.cx-compare-row{padding:10px 0}.cx-compare-row>*{padding:7px 10px}.cx-bars{gap:8px}.cx-bars-labels{font-size:.55rem}.cx-model-grid{display:grid;grid-template-columns:1fr;gap:10px;min-height:auto;padding-top:170px}.cx-model-core{top:72px}.cx-model-node{position:static;width:100%}.cx-circle-ring{transform:scale(.84)}}
@media(prefers-reduced-motion:reduce){.cx-circle-ring:after{animation:none}}


/* =========================================================
   V12: DESIGN-INSPIRED HTML/CSS SECTIONS
   Recreates supplied business/market visuals as real sections.
   ========================================================= */
.cx-static-section.alt-bg{background:#efefed}
.cx-design{width:100%;background:#fff;border:1px solid rgba(17,24,39,.08);border-radius:26px;box-shadow:0 26px 70px rgba(17,24,39,.10);padding:28px;overflow:hidden;color:#17181b}
.cx-design h3,.cx-design strong,.cx-design b{color:#17181b}
.cx-design p,.cx-design span,.cx-design small{color:#626771}

/* Stack / target market */
.cx-stack-board{display:grid;grid-template-columns:1fr 1.05fr .95fr;gap:22px;align-items:center;min-height:340px}.cx-stack-copy small{display:block;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#ff5b0b;font-weight:800}.cx-stack-copy strong{display:block;font-size:2rem;line-height:1.05;margin:12px 0 8px}.cx-stack-copy span{display:block;max-width:220px;line-height:1.5}.cx-stack-stage{position:relative;height:250px;display:grid;place-items:center}.cx-layer{position:absolute;width:220px;height:88px;border-radius:18px;transform:skewX(-20deg) rotate(-14deg);box-shadow:0 18px 34px rgba(17,24,39,.16)}.cx-layer.layer-1{background:#e4e4e4;top:132px;left:16px}.cx-layer.layer-2{background:#151515;top:92px;left:42px}.cx-layer.layer-3{background:linear-gradient(145deg,#ff8b53,#ff5b0b);top:46px;left:68px}.cx-stack-options{display:grid;gap:14px}.cx-stack-options article{padding-left:18px;border-left:2px solid #e7e8ec}.cx-stack-options b{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#fff4ed;color:#ff5b0b;margin-bottom:8px}.cx-stack-options h3{margin:0 0 4px;font-size:1rem}.cx-stack-options p{margin:0;font-size:.82rem;line-height:1.45}

/* Arc / process */
.cx-arc-board h3{margin:0 0 20px;font-size:2rem;line-height:1}.cx-arc-track{display:flex;align-items:flex-end;gap:0;margin-top:22px;min-height:170px}.cx-arc-seg{position:relative;flex:1;height:108px;background:#1a1b20;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:visible}.cx-arc-seg strong,.cx-arc-seg span{color:#fff}.cx-arc-seg:not(:last-child){border-right:2px solid rgba(255,255,255,.1)}.cx-arc-seg.s1{border-radius:140px 0 0 140px}.cx-arc-seg.s4{border-radius:0 140px 140px 0}.cx-arc-seg.s1,.cx-arc-seg.s2{transform:translateY(-10px)}.cx-arc-seg.s3,.cx-arc-seg.s4{transform:translateY(18px)}.cx-arc-seg span{position:absolute;top:-22px;width:42px;height:42px;border-radius:50%;background:#e8ff3d;color:#151515;display:grid;place-items:center;font-weight:800}.cx-arc-seg strong{font-size:1rem;text-align:center;padding:0 12px}.cx-arc-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}.cx-arc-notes article{padding:16px;border-radius:16px;background:#fff4ef;border:1px solid #ececf0}.cx-arc-notes b{display:block;color:#ff5b0b;margin-bottom:8px}.cx-arc-notes p{margin:0;font-size:.82rem;line-height:1.45}

/* Market opportunity / concentric */
.cx-market-board{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px;align-items:center;min-height:330px}.cx-market-copy{display:grid;gap:18px}.cx-market-copy article h3{margin:0 0 8px;font-size:1.1rem;color:#0e1220}.cx-market-copy article p{margin:0;line-height:1.5}.cx-market-rings{position:relative;height:320px;display:grid;place-items:center}.cx-market-rings .ring{position:absolute;border-radius:50%;display:grid;place-content:center;text-align:center;background:rgba(255,91,11,.08);border:1px solid rgba(255,91,11,.15)}.cx-market-rings .ring strong{display:block;font-size:2rem;color:#ff5b0b}.cx-market-rings .ring span{font-size:.8rem}.cx-market-rings .ring-1{width:310px;height:310px;background:rgba(255,91,11,.08)}.cx-market-rings .ring-2{width:220px;height:220px;background:rgba(255,91,11,.14)}.cx-market-rings .ring-3{width:134px;height:134px;background:linear-gradient(145deg,#ff8c5b,#ff5b0b)}.cx-market-rings .ring-3 strong,.cx-market-rings .ring-3 span{color:#fff}

/* Facts / circle map */
.cx-facts-board{display:grid;grid-template-columns:1fr 1.05fr;gap:22px;align-items:center;min-height:330px}.cx-facts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.cx-facts-grid article{padding:22px;border-radius:18px;background:#fff4ef;border:1px solid #ececf0;min-height:112px}.cx-facts-grid strong{display:block;font-size:2rem;color:#ff5b0b;line-height:1}.cx-facts-grid span{display:block;margin-top:10px;line-height:1.4}.cx-facts-focus{position:relative;min-height:300px;display:grid;place-items:center}.cx-facts-dotmap{position:absolute;inset:18px;background-image:radial-gradient(rgba(17,24,39,.18) 1px, transparent 1px);background-size:10px 10px;mask-image:radial-gradient(circle at 66% 42%, rgba(0,0,0,1), rgba(0,0,0,.55) 54%, transparent 72%);opacity:.7}.cx-facts-circle{position:relative;z-index:2;width:250px;height:250px;border-radius:50%;background:linear-gradient(145deg,#ff8b53,#ff5b0b);display:grid;place-content:center;text-align:center;box-shadow:0 18px 40px rgba(255,91,11,.24)}.cx-facts-circle strong{font-size:2rem;color:#fff;line-height:1}.cx-facts-circle span{display:block;max-width:150px;color:#fff;margin:10px auto 0;line-height:1.45}

/* Gauge */
.cx-gauge-board h3{margin:0 0 18px;font-size:2rem}.cx-gauge-stage{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:16px;align-items:center;min-height:270px}.cx-gauge-left,.cx-gauge-right{display:flex;flex-direction:column;align-items:center;gap:10px}.cx-gauge-left strong,.cx-gauge-right strong{font-size:2rem;color:#0e1220}.cx-gauge-core{display:grid;justify-items:center;gap:12px}.cx-gauge-ring{width:220px;height:220px;border-radius:50%;background:conic-gradient(#ff5b0b 0 38%, #384457 38% 62%, #fff4ef 62% 100%);display:grid;place-items:center;position:relative;box-shadow:0 14px 32px rgba(17,24,39,.08)}.cx-gauge-ring:before{content:"";position:absolute;inset:28px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 12px #f7f7f7}.cx-gauge-ring span{position:relative;z-index:2;font-size:2rem;font-weight:800;color:#17181b}.cx-gauge-core small{text-align:center;max-width:240px;line-height:1.45}

/* Org chart */
.cx-org-board{min-height:320px}.cx-org-root{width:max-content;max-width:100%;margin:0 auto;background:#ff5b0b;color:#fff;padding:16px 26px;border-radius:16px;font-weight:800;box-shadow:0 12px 30px rgba(255,91,11,.2)}.cx-org-line{width:2px;height:34px;background:#d7d9df;margin:0 auto}.cx-org-row{display:grid;gap:14px}.cx-org-row.top{grid-template-columns:repeat(3,1fr);margin-bottom:14px}.cx-org-row.bottom{grid-template-columns:repeat(4,1fr)}.cx-org-row article{padding:16px;border-radius:16px;background:#f6f6f7;border:1px solid #e7e8ec;text-align:center;font-weight:700;position:relative}.cx-org-row.top article:before{content:"";position:absolute;top:-34px;left:50%;width:2px;height:34px;background:#d7d9df;transform:translateX(-50%)}

/* Flow boxes */
.cx-flow-board{display:grid;grid-template-columns:.72fr 1.28fr;gap:18px;align-items:center;min-height:320px}.cx-flow-lead{padding:28px;border-radius:20px;background:linear-gradient(145deg,#ff8c5b,#ff5b0b);min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff}.cx-flow-lead small,.cx-flow-lead strong{color:#fff}.cx-flow-lead strong{font-size:1.9rem;line-height:1.05}.cx-flow-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.cx-flow-grid article{padding:18px;border-radius:16px;background:#f8f8f9;border:1px solid #ececf0;min-height:120px}.cx-flow-grid h3{font-size:1rem;margin:0 0 8px}.cx-flow-grid p{margin:0;line-height:1.5;font-size:.83rem}

@media (max-width: 1100px){.cx-stack-board,.cx-market-board,.cx-facts-board,.cx-gauge-stage,.cx-flow-board{grid-template-columns:1fr}.cx-stack-copy span{max-width:none}.cx-stack-stage{height:220px}.cx-arc-notes{grid-template-columns:1fr}.cx-org-row.top,.cx-org-row.bottom,.cx-facts-grid,.cx-flow-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 720px){.cx-design{padding:22px}.cx-stack-board,.cx-market-board,.cx-facts-board,.cx-gauge-stage,.cx-flow-board{gap:18px}.cx-stack-options,.cx-facts-grid,.cx-flow-grid,.cx-org-row.top,.cx-org-row.bottom{grid-template-columns:1fr}.cx-market-rings{height:280px}.cx-market-rings .ring-1{width:260px;height:260px}.cx-market-rings .ring-2{width:185px;height:185px}.cx-market-rings .ring-3{width:118px;height:118px}.cx-arc-track{flex-direction:column;align-items:stretch;min-height:auto;gap:12px}.cx-arc-seg,.cx-arc-seg.s1,.cx-arc-seg.s2,.cx-arc-seg.s3,.cx-arc-seg.s4{transform:none;border-radius:20px;height:auto;padding:26px 14px}.cx-arc-seg span{top:10px;left:10px;transform:none}.cx-gauge-ring{width:190px;height:190px}.cx-facts-circle{width:210px;height:210px}.cx-org-row article:before{display:none}}


/* =========================================================
   V14: GLOBAL BLACK CORE-VALUES SECTION SYSTEM
   Every V12/V13 generated design section now uses a unified
   Clickronix black surface with orange accents. Homepage is
   intentionally excluded because it does not use this class.
   ========================================================= */
.cx-static-section.cx-core-black-section,
.cx-static-section.cx-core-black-section.alt-bg {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 16%, rgba(255, 102, 0, 0.16), transparent 28%),
    radial-gradient(circle at 8% 90%, rgba(255, 102, 0, 0.08), transparent 26%),
    #101113;
  color: #ffffff;
  padding: 96px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.cx-static-section.cx-core-black-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 88%);
}
.cx-static-section.cx-core-black-section > .container { position: relative; z-index: 1; }
.cx-core-black-section .cx-static-showcase,
.cx-core-black-section .cx-static-showcase-live {
  gap: 64px;
  align-items: center;
}
.cx-core-black-section .cx-static-copy .eyebrow {
  color: #ff6a00;
}
.cx-core-black-section .cx-static-copy h2,
.cx-core-black-section .cx-static-copy h3,
.cx-core-black-section .cx-static-copy strong {
  color: #ffffff;
}
.cx-core-black-section .cx-static-copy .lead,
.cx-core-black-section .cx-static-copy p {
  color: #c8cad1;
}
.cx-core-black-section .cx-static-list li {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  color: #f5f5f6;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.24);
}
.cx-core-black-section .cx-static-list li::before {
  background: #ff6a00;
  box-shadow: 0 0 0 5px rgba(255,106,0,.12), 0 0 22px rgba(255,106,0,.24);
}

/* Remove the large white/orange outer design card. */
.cx-core-black-section .cx-design,
.cx-core-black-section .cx-ref {
  background: transparent;
  color: #ffffff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.cx-core-black-section .cx-design h3,
.cx-core-black-section .cx-design strong,
.cx-core-black-section .cx-design b,
.cx-core-black-section .cx-ref h3,
.cx-core-black-section .cx-ref strong,
.cx-core-black-section .cx-ref b {
  color: #ffffff;
}
.cx-core-black-section .cx-design p,
.cx-core-black-section .cx-design span,
.cx-core-black-section .cx-design small,
.cx-core-black-section .cx-ref p,
.cx-core-black-section .cx-ref span,
.cx-core-black-section .cx-ref small {
  color: #b9bcc5;
}
.cx-core-black-section .cx-ref-top {
  border-bottom-color: rgba(255,255,255,.10);
}

/* Core-values card language: black cards, orange icon/head areas. */
.cx-core-black-section .cx-stack-copy,
.cx-core-black-section .cx-flow-lead,
.cx-core-black-section .cx-org-root,
.cx-core-black-section .cx-facts-circle,
.cx-core-black-section .cx-model-core,
.cx-core-black-section .cx-market-rings .ring-3 {
  background: linear-gradient(180deg, #1b1c20, #111216);
  color: #ffffff;
  border: 1px solid rgba(255,106,0,.55);
  box-shadow: 0 20px 45px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
}
.cx-core-black-section .cx-stack-copy {
  padding: 24px;
  border-radius: 20px;
}
.cx-core-black-section .cx-stack-copy small,
.cx-core-black-section .cx-flow-lead small {
  color: #ff6a00;
}
.cx-core-black-section .cx-stack-copy strong,
.cx-core-black-section .cx-stack-copy span,
.cx-core-black-section .cx-flow-lead strong,
.cx-core-black-section .cx-flow-lead span,
.cx-core-black-section .cx-org-root,
.cx-core-black-section .cx-facts-circle strong,
.cx-core-black-section .cx-facts-circle span,
.cx-core-black-section .cx-market-rings .ring-3 strong,
.cx-core-black-section .cx-market-rings .ring-3 span {
  color: #ffffff;
}
.cx-core-black-section .cx-stack-stage::after {
  content: "CLICKRONIX";
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  color: rgba(255,255,255,.22);
  letter-spacing: .22em;
  font-size: .65rem;
  font-weight: 800;
}
.cx-core-black-section .cx-layer.layer-1 {
  background: #2a2b30;
}
.cx-core-black-section .cx-layer.layer-2 {
  background: #090a0d;
  border: 1px solid rgba(255,255,255,.10);
}
.cx-core-black-section .cx-layer.layer-3 {
  background: linear-gradient(145deg, #25262c, #111216);
  border: 1px solid rgba(255,106,0,.60);
}

/* All internal cards now match the black core-values reference. */
.cx-core-black-section .cx-stack-options article,
.cx-core-black-section .cx-arc-notes article,
.cx-core-black-section .cx-market-copy article,
.cx-core-black-section .cx-facts-grid article,
.cx-core-black-section .cx-flow-grid article,
.cx-core-black-section .cx-org-row article,
.cx-core-black-section .cx-audience-grid article,
.cx-core-black-section .cx-model-node,
.cx-core-black-section .cx-compare-row,
.cx-core-black-section .cx-api-card,
.cx-core-black-section .cx-vector-card {
  background: linear-gradient(180deg, #1d1e23, #15161a);
  border: 1px solid rgba(255,255,255,.10);
  color: #ffffff;
  box-shadow: 0 14px 34px rgba(0,0,0,.24);
}
.cx-core-black-section .cx-stack-options article {
  border-left: 2px solid #ff6a00;
  border-radius: 14px;
  padding: 18px 18px 18px 20px;
}
.cx-core-black-section .cx-stack-options b {
  background: rgba(255,106,0,.12);
  color: #ff7a22;
  border: 1px solid rgba(255,106,0,.22);
}
.cx-core-black-section .cx-stack-options h3,
.cx-core-black-section .cx-arc-notes b,
.cx-core-black-section .cx-market-copy h3,
.cx-core-black-section .cx-facts-grid strong,
.cx-core-black-section .cx-flow-grid h3,
.cx-core-black-section .cx-org-row article,
.cx-core-black-section .cx-audience-grid h3,
.cx-core-black-section .cx-model-node b {
  color: #ffffff;
}
.cx-core-black-section .cx-stack-options p,
.cx-core-black-section .cx-arc-notes p,
.cx-core-black-section .cx-market-copy p,
.cx-core-black-section .cx-facts-grid span,
.cx-core-black-section .cx-flow-grid p,
.cx-core-black-section .cx-audience-grid p,
.cx-core-black-section .cx-model-node span {
  color: #aeb1bb;
}

/* Arc process keeps the visual shape but switches the orange mass to black. */
.cx-core-black-section .cx-arc-board h3 { color: #ffffff; }
.cx-core-black-section .cx-arc-seg {
  background: linear-gradient(180deg, #202126, #111216);
  border: 1px solid rgba(255,255,255,.08);
}
.cx-core-black-section .cx-arc-seg span {
  background: #ff6a00;
  color: #111216;
  box-shadow: 0 9px 24px rgba(255,106,0,.28);
}
.cx-core-black-section .cx-arc-seg strong { color: #ffffff; }

/* Market rings: dark nested circles with orange outline. */
.cx-core-black-section .cx-market-rings .ring {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,106,0,.22);
  box-shadow: inset 0 0 60px rgba(255,106,0,.05);
}
.cx-core-black-section .cx-market-rings .ring strong { color: #ff7a22; }
.cx-core-black-section .cx-market-rings .ring span { color: #c8cad1; }
.cx-core-black-section .cx-market-rings .ring-2 { background: rgba(255,106,0,.065); }
.cx-core-black-section .cx-market-rings .ring-3 strong,
.cx-core-black-section .cx-market-rings .ring-3 span { color: #ffffff; }

/* Facts and dot-map. */
.cx-core-black-section .cx-facts-dotmap {
  background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1px);
  opacity: .48;
}
.cx-core-black-section .cx-facts-grid strong { color: #ff7a22; }

/* Gauge and chart controls. */
.cx-core-black-section .cx-gauge-board h3 { color: #ffffff; }
.cx-core-black-section .cx-gauge-left strong,
.cx-core-black-section .cx-gauge-right strong { color: #ffffff; }
.cx-core-black-section .cx-gauge-ring {
  background: conic-gradient(#ff6a00 0 38%, #474a53 38% 62%, #1e2025 62% 100%);
  box-shadow: 0 18px 42px rgba(0,0,0,.28);
}
.cx-core-black-section .cx-gauge-ring::before {
  background: #111216;
  box-shadow: inset 0 0 0 12px #18191e;
}
.cx-core-black-section .cx-gauge-ring span { color: #ffffff; }
.cx-core-black-section .cx-gauge-core small { color: #b9bcc5; }

/* Organization / business-model structure. */
.cx-core-black-section .cx-org-root {
  color: #ffffff;
  border-color: rgba(255,106,0,.65);
}
.cx-core-black-section .cx-org-line,
.cx-core-black-section .cx-org-row.top article::before {
  background: rgba(255,106,0,.45);
}

/* Comparison and audience patterns from older V11 sections. */
.cx-core-black-section .cx-compare-head { color: #aeb1bb; }
.cx-core-black-section .cx-compare-row { border-bottom-color: rgba(255,255,255,.08); }
.cx-core-black-section .cx-compare-row b { color: #ffffff; }
.cx-core-black-section .cx-compare-row span:nth-child(2) {
  background: rgba(255,106,0,.10);
  color: #ff9a62;
}
.cx-core-black-section .cx-compare-row span:nth-child(3) { color: #c8cad1; }
.cx-core-black-section .cx-audience-grid article:nth-child(1),
.cx-core-black-section .cx-audience-grid article:nth-child(4) {
  background: linear-gradient(180deg, #201a17, #15161a);
  border-color: rgba(255,106,0,.22);
}
.cx-core-black-section .cx-audience-grid span { color: #ff7a22; }

/* Bar visual. */
.cx-core-black-section .cx-bars-axis,
.cx-core-black-section .cx-bars-labels { color: #8f939d; }
.cx-core-black-section .cx-bars {
  border-left-color: rgba(255,255,255,.12);
  border-bottom-color: rgba(255,255,255,.12);
}
.cx-core-black-section .cx-bars span {
  background: linear-gradient(180deg, #ff8d42, #ff5b0b);
  box-shadow: 0 9px 22px rgba(255,91,11,.22);
}
.cx-core-black-section .cx-bars b { color: #d5d7dd; }

/* Circular business visual. */
.cx-core-black-section .cx-circle-ring {
  border-color: #ff6a00;
  box-shadow: inset 0 0 0 14px #111216, 0 0 0 1px rgba(255,255,255,.10);
}
.cx-core-black-section .cx-circle-ring::after { border-color: rgba(255,106,0,.55); }
.cx-core-black-section .cx-circle-center {
  background: #15161a;
  border: 1px solid rgba(255,255,255,.08);
}
.cx-core-black-section .cx-circle-center strong { color: #ffffff; }
.cx-core-black-section .cx-circle-center span { color: #aeb1bb; }
.cx-core-black-section .cx-circle-ring i {
  background: #ff6a00;
  color: #111216;
}

/* Full-width, not a floating white card. */
.cx-core-black-section .cx-static-showcase-live { grid-template-columns: minmax(0,.9fr) minmax(440px,1.1fr); }
@media (max-width: 980px) {
  .cx-static-section.cx-core-black-section { padding: 76px 0; }
  .cx-core-black-section .cx-static-showcase-live { grid-template-columns: 1fr; gap: 38px; }
}
@media (max-width: 640px) {
  .cx-static-section.cx-core-black-section { padding: 62px 0; }
  .cx-core-black-section .cx-static-showcase,
  .cx-core-black-section .cx-static-showcase-live { gap: 28px; }
  .cx-core-black-section .cx-static-list { grid-template-columns: 1fr; }
}


/* =========================================================
   V15 — FULL-WIDTH ORANGE INFOGRAPHIC SECTIONS
   Real HTML/CSS vector layouts inspired by supplied references.
   No outer card and no reference image files.
   ========================================================= */
.cx-infographic-section{position:relative;overflow:hidden;background:#fff4ef;color:#17181b;padding:96px 0;border-top:1px solid rgba(17,24,39,.05);border-bottom:1px solid rgba(17,24,39,.05)}
.cx-infographic-section:before,.cx-infographic-section:after{content:"";position:absolute;pointer-events:none;filter:blur(1px);opacity:.45}
.cx-infographic-section:before{width:520px;height:120px;right:-120px;top:48px;background:linear-gradient(90deg,transparent,rgba(17,24,39,.07));transform:rotate(-11deg)}
.cx-infographic-section:after{width:420px;height:90px;left:-110px;bottom:44px;background:linear-gradient(90deg,rgba(255,91,11,.08),transparent);transform:rotate(10deg)}
.cxv-heading{position:relative;z-index:2;text-align:center;max-width:920px;margin:0 auto 54px}.cxv-heading .eyebrow{color:#ff5b0b}.cxv-heading h2{color:#17181b;margin:10px auto 18px;max-width:900px}.cxv-heading p{max-width:780px;margin:0 auto;color:#606571;font-size:1.08rem;line-height:1.7}
.cxv-visual{position:relative;z-index:2;min-height:430px;width:100%;max-width:1180px;margin:0 auto;color:#17181b}.cxv-visual *{box-sizing:border-box}.cxv-visual article{margin:0}.cxv-visual h3{color:#17181b}.cxv-visual p{color:#686d77}.cxv-visual b{color:#ff5b0b}.cxv-summary{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;list-style:none;padding:0;margin:38px auto 0;max-width:1120px}.cxv-summary li{display:flex;align-items:center;gap:12px;padding:15px 18px;background:rgba(255,255,255,.7);border:1px solid rgba(17,24,39,.08);border-radius:14px;color:#343840;box-shadow:0 10px 25px rgba(17,24,39,.05)}.cxv-summary span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff1e8;color:#ff5b0b;font-weight:800;font-size:.78rem;flex:0 0 30px}

/* 1. Rising arrow tower */
.cxv-tower{display:grid;grid-template-columns:1fr 420px 1fr;align-items:center;gap:28px}.cxv-tower-arrows{position:relative;height:390px;display:flex;align-items:flex-end;justify-content:center;gap:12px}.cxv-tower-arrow{position:relative;width:76px;background:linear-gradient(180deg,#ff9a62,#ff5b0b);filter:drop-shadow(0 18px 18px rgba(255,91,11,.18));clip-path:polygon(50% 0,100% 24%,82% 24%,82% 100%,18% 100%,18% 24%,0 24%)}.cxv-tower-arrow.a1{height:180px}.cxv-tower-arrow.a2{height:240px}.cxv-tower-arrow.a3{height:305px}.cxv-tower-arrow.a4{height:370px}.cxv-tower-arrow span{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#fff;font-weight:800}.cxv-callout{position:absolute;width:250px;padding:14px 16px;border-left:2px solid #ff7c38}.cxv-callout b{font-size:.75rem}.cxv-callout h3{font-size:1rem;margin:4px 0}.cxv-callout p{font-size:.82rem;margin:0;line-height:1.45}.cxv-callout.c1{left:0;top:68px}.cxv-callout.c2{left:0;bottom:70px}.cxv-callout.c3{right:0;top:68px}.cxv-callout.c4{right:0;bottom:70px}

/* 2. Square cycle */
.cxv-cycle-square{max-width:760px;height:480px}.cxv-cycle-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:180px;height:180px;border-radius:32px;background:linear-gradient(145deg,#ff8b53,#ff5b0b);display:grid;place-content:center;text-align:center;color:#fff;font-size:1.4rem;font-weight:800;box-shadow:0 22px 45px rgba(255,91,11,.22)}.cxv-cycle-core small{color:#fff;font-size:.75rem;font-weight:500}.cxv-cycle-node{position:absolute;width:180px;padding:18px;border-radius:18px;background:#fff;border:1px solid #e7e8ec;box-shadow:0 14px 34px rgba(17,24,39,.08);text-align:center}.cxv-cycle-node b{display:block;font-size:.75rem;margin-bottom:6px}.cxv-cycle-node span{font-weight:700}.cxv-cycle-node.n1{left:50%;top:5px;transform:translateX(-50%)}.cxv-cycle-node.n2{right:5px;top:50%;transform:translateY(-50%)}.cxv-cycle-node.n3{left:50%;bottom:5px;transform:translateX(-50%)}.cxv-cycle-node.n4{left:5px;top:50%;transform:translateY(-50%)}.cxv-cycle-arrow{position:absolute;width:120px;height:46px;border:15px solid #ff6b1a;border-left:0;border-bottom:0}.cxv-cycle-arrow:after{content:"";position:absolute;width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:22px solid #ff6b1a}.cxv-cycle-arrow.top{left:50%;top:106px;transform:translateX(-50%) rotate(0deg)}.cxv-cycle-arrow.right{right:128px;top:50%;transform:translateY(-50%) rotate(90deg)}.cxv-cycle-arrow.bottom{left:50%;bottom:106px;transform:translateX(-50%) rotate(180deg)}.cxv-cycle-arrow.left{left:128px;top:50%;transform:translateY(-50%) rotate(270deg)}

/* 3. Hexagonal cluster */
.cxv-hex-cluster{height:470px;max-width:900px}.cxv-hex,.cxv-hex-center{position:absolute;display:grid;place-content:center;text-align:center;clip-path:polygon(25% 6%,75% 6%,100% 50%,75% 94%,25% 94%,0 50%)}.cxv-hex{width:210px;height:180px;background:linear-gradient(145deg,#ff8a50,#ff5b0b);color:#fff;padding:30px}.cxv-hex b,.cxv-hex span{color:#fff}.cxv-hex b{font-size:.75rem;margin-bottom:7px}.cxv-hex span{font-weight:750;line-height:1.3}.cxv-hex-center{width:150px;height:130px;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border:2px solid #ff6a17;color:#ff5b0b;font-weight:900;filter:drop-shadow(0 15px 22px rgba(17,24,39,.12))}.cxv-hex.h1{left:12%;top:8%}.cxv-hex.h2{right:12%;top:8%}.cxv-hex.h3{left:12%;bottom:8%}.cxv-hex.h4{right:12%;bottom:8%}

/* 4. Circular quadrant */
.cxv-quadrant{height:470px;max-width:920px}.cxv-q-circle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:310px;height:310px;border-radius:50%;overflow:hidden;box-shadow:0 20px 48px rgba(255,91,11,.18);background:#fff}.cxv-q-circle span{position:absolute;width:50%;height:50%;border:2px solid #fff}.cxv-q-circle .q1{left:0;top:0;background:#ff5b0b;border-radius:100% 0 0 0}.cxv-q-circle .q2{right:0;top:0;background:#ff8a50;border-radius:0 100% 0 0}.cxv-q-circle .q3{right:0;bottom:0;background:#ff6d1c;border-radius:0 0 100% 0}.cxv-q-circle .q4{left:0;bottom:0;background:#ff9b69;border-radius:0 0 0 100%}.cxv-q-circle strong{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;height:120px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#ff5b0b;z-index:3;box-shadow:0 10px 25px rgba(17,24,39,.12)}.cxv-q-label{position:absolute;width:240px}.cxv-q-label b{display:block;color:#ff5b0b;margin-bottom:6px}.cxv-q-label p{margin:0;font-size:.83rem;line-height:1.45}.cxv-q-label.q1{left:0;top:55px}.cxv-q-label.q2{right:0;top:55px;text-align:right}.cxv-q-label.q3{right:0;bottom:55px;text-align:right}.cxv-q-label.q4{left:0;bottom:55px}

/* 5. Horizontal arrow chain */
.cxv-arrow-chain{display:flex;align-items:center;justify-content:center;min-height:300px;padding:40px 0}.cxv-chain-step{position:relative;flex:1;min-height:150px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#fff;background:linear-gradient(145deg,#ff8b53,#ff5b0b);clip-path:polygon(0 0,86% 0,100% 50%,86% 100%,0 100%,14% 50%);margin-left:-20px;padding:24px 42px}.cxv-chain-step:first-child{margin-left:0;clip-path:polygon(0 0,86% 0,100% 50%,86% 100%,0 100%)}.cxv-chain-step b,.cxv-chain-step span{color:#fff}.cxv-chain-step b{font-size:.76rem;margin-bottom:10px}.cxv-chain-step span{font-weight:800;line-height:1.3}

/* 6. Circular arrow ring */
.cxv-cycle-ring{height:490px;max-width:850px}.cxv-ring-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:190px;height:190px;border-radius:50%;display:grid;place-content:center;text-align:center;background:#fff;color:#ff5b0b;font-size:1.35rem;font-weight:900;box-shadow:0 18px 40px rgba(17,24,39,.12);z-index:4}.cxv-ring-core small{font-size:.72rem;color:#707580}.cxv-ring-arrow{position:absolute;width:220px;height:120px;border:34px solid #ff6512;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%}.cxv-ring-arrow:after{content:"";position:absolute;right:-30px;top:68px;border-top:18px solid transparent;border-bottom:18px solid transparent;border-left:28px solid #ff6512;transform:rotate(22deg)}.cxv-ring-arrow.a1{left:50%;top:16px;transform:translateX(-50%) rotate(10deg)}.cxv-ring-arrow.a2{right:30px;top:50%;transform:translateY(-50%) rotate(100deg)}.cxv-ring-arrow.a3{left:50%;bottom:16px;transform:translateX(-50%) rotate(190deg)}.cxv-ring-arrow.a4{left:30px;top:50%;transform:translateY(-50%) rotate(280deg)}.cxv-ring-node{position:absolute;width:180px;padding:14px 16px;text-align:center}.cxv-ring-node b{display:block;font-size:.74rem}.cxv-ring-node span{display:block;font-weight:700;margin-top:4px}.cxv-ring-node.r1{left:50%;top:0;transform:translateX(-50%)}.cxv-ring-node.r2{right:0;top:50%;transform:translateY(-50%)}.cxv-ring-node.r3{left:50%;bottom:0;transform:translateX(-50%)}.cxv-ring-node.r4{left:0;top:50%;transform:translateY(-50%)}

/* 7. Connected circular flow */
.cxv-circle-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;align-items:center;min-height:300px}.cxv-flow-circle{position:relative;aspect-ratio:1;border-radius:50%;background:linear-gradient(145deg,#ff8b53,#ff5b0b);display:grid;place-content:center;text-align:center;color:#fff;padding:22px;box-shadow:0 18px 36px rgba(255,91,11,.18)}.cxv-flow-circle:not(:last-child):after{content:"";position:absolute;left:100%;top:50%;width:28px;height:2px;background:#ff5b0b}.cxv-flow-circle:not(:last-child):before{content:"";position:absolute;left:calc(100% + 18px);top:calc(50% - 5px);border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid #ff5b0b}.cxv-flow-circle b,.cxv-flow-circle span{color:#fff}.cxv-flow-circle b{font-size:.75rem;margin-bottom:7px}.cxv-flow-circle span{font-weight:800;line-height:1.25}

/* 8. Vertical signal tree */
.cxv-signal-tree{height:470px;max-width:850px}.cxv-tree-trunk{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:78px;height:280px;background:linear-gradient(90deg,#ff9a62,#ff5b0b,#ff9a62);clip-path:polygon(18% 100%,82% 100%,65% 0,35% 0)}.cxv-tree-trunk:before,.cxv-tree-trunk:after{content:"";position:absolute;top:20px;width:230px;height:12px;background:#ff6410}.cxv-tree-trunk:before{right:50%;transform-origin:right center;transform:rotate(-35deg)}.cxv-tree-trunk:after{left:50%;transform-origin:left center;transform:rotate(35deg)}.cxv-tree-node{position:absolute;width:210px;padding:16px 18px;background:#fff;border:1px solid #e7e8ec;border-radius:18px;box-shadow:0 14px 32px rgba(17,24,39,.08)}.cxv-tree-node b{font-size:.74rem}.cxv-tree-node span{display:block;font-weight:750;margin-top:5px}.cxv-tree-node.t1{left:0;top:38px}.cxv-tree-node.t2{right:0;top:38px;text-align:right}.cxv-tree-node.t3{left:60px;bottom:42px}.cxv-tree-node.t4{right:60px;bottom:42px;text-align:right}

@media(max-width:980px){.cxv-summary{grid-template-columns:repeat(2,1fr)}.cxv-tower{grid-template-columns:1fr}.cxv-tower-arrows{order:1}.cxv-callout{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:auto}.cxv-tower{display:grid;grid-template-columns:repeat(2,1fr)}.cxv-tower-arrows{grid-column:1/-1}.cxv-cycle-square,.cxv-hex-cluster,.cxv-quadrant,.cxv-cycle-ring,.cxv-signal-tree{transform:scale(.88);transform-origin:center top;margin-bottom:-40px}.cxv-circle-flow{grid-template-columns:repeat(2,1fr)}.cxv-flow-circle:not(:last-child):after,.cxv-flow-circle:not(:last-child):before{display:none}}
@media(max-width:680px){.cx-infographic-section{padding:72px 0}.cxv-heading{margin-bottom:36px}.cxv-summary{grid-template-columns:1fr}.cxv-tower{grid-template-columns:1fr}.cxv-tower-arrows{height:330px;gap:7px}.cxv-tower-arrow{width:58px}.cxv-cycle-square,.cxv-hex-cluster,.cxv-quadrant,.cxv-cycle-ring,.cxv-signal-tree{transform:scale(.68);width:145%;margin-left:-22.5%;margin-bottom:-110px}.cxv-arrow-chain{flex-direction:column;gap:10px}.cxv-chain-step,.cxv-chain-step:first-child{width:100%;margin:0;clip-path:polygon(0 0,92% 0,100% 50%,92% 100%,0 100%,8% 50%);min-height:100px}.cxv-circle-flow{grid-template-columns:1fr 1fr;gap:16px}.cxv-flow-circle{padding:16px}.cxv-flow-circle span{font-size:.85rem}}
@media(prefers-reduced-motion:reduce){.cxv-visual *{animation:none!important;transition:none!important}}

/* =========================================================
   V16 — REFERENCE-MATCHED WORKFLOW INFOGRAPHICS
   Removes duplicate pill summaries and uses complete, readable diagrams.
   ========================================================= */
.cx-infographic-section .cxv-summary{display:none!important}

/* Google Ads context: SWOT-inspired diamond composition */
.cxv-signal-tree{
  position:relative;
  height:560px;
  max-width:1020px;
  margin-inline:auto;
}
.cxv-diamond-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);
  width:190px;height:190px;border-radius:28px;
  display:grid;place-content:center;text-align:center;
  background:linear-gradient(145deg,#ff8c55,#ff5b0b);
  box-shadow:0 24px 55px rgba(255,91,11,.25);
  z-index:3;
}
.cxv-diamond-core>*{transform:rotate(-45deg);color:#fff}
.cxv-diamond-core small{font-size:.66rem;letter-spacing:.16em;font-weight:800;margin-bottom:8px}
.cxv-diamond-core strong{font-size:1.28rem;line-height:1.12}
.cxv-diamond-connectors{position:absolute;inset:0;z-index:1;pointer-events:none}
.cxv-diamond-connectors:before,.cxv-diamond-connectors:after{content:"";position:absolute;left:50%;top:50%;background:linear-gradient(90deg,transparent,#ff6a17,transparent);transform:translate(-50%,-50%);opacity:.8}
.cxv-diamond-connectors:before{width:72%;height:3px}
.cxv-diamond-connectors:after{width:3px;height:72%;background:linear-gradient(180deg,transparent,#ff6a17,transparent)}
.cxv-diamond-node{
  position:absolute;width:265px;min-height:170px;padding:25px 26px 23px;
  background:rgba(255,255,255,.94);border:1px solid rgba(255,91,11,.22);
  border-radius:24px;box-shadow:0 18px 42px rgba(17,24,39,.09);z-index:2;
}
.cxv-diamond-node:after{content:"";position:absolute;width:13px;height:13px;border-radius:50%;background:#ff5b0b;box-shadow:0 0 0 7px #fff1e8}
.cxv-diamond-node b{font-size:.75rem;letter-spacing:.08em}
.cxv-diamond-node h3{font-size:1.03rem;margin:8px 0 8px;color:#17181b}
.cxv-diamond-node p{font-size:.86rem;line-height:1.55;margin:0;color:#656a74}
.cxv-diamond-node.t1{left:2%;top:4%}.cxv-diamond-node.t1:after{right:-7px;bottom:26px}
.cxv-diamond-node.t2{right:2%;top:4%;text-align:right}.cxv-diamond-node.t2:after{left:-7px;bottom:26px}
.cxv-diamond-node.t3{left:2%;bottom:4%}.cxv-diamond-node.t3:after{right:-7px;top:26px}
.cxv-diamond-node.t4{right:2%;bottom:4%;text-align:right}.cxv-diamond-node.t4:after{left:-7px;top:26px}

/* Invalid traffic: connected circular SWOT-style process */
.cxv-arrow-chain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px;align-items:center;min-height:360px;padding:25px 0}
.cxv-round-step{
  position:relative;aspect-ratio:1;border-radius:50%;padding:34px 25px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(circle at 34% 30%,#ff9d70 0,#ff7350 44%,#ff5b32 100%);
  border:3px solid rgba(255,255,255,.8);
  box-shadow:0 0 0 5px rgba(255,91,50,.17),0 22px 42px rgba(255,91,11,.18);
  color:#fff;
}
.cxv-round-step:not(:last-child):after{content:"";position:absolute;left:calc(100% + 8px);top:50%;width:28px;height:2px;background:#ff6540}
.cxv-round-step:not(:last-child):before{content:"";position:absolute;left:calc(100% + 30px);top:calc(50% - 6px);border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid #ff6540}
.cxv-round-step b,.cxv-round-step h3,.cxv-round-step p{color:#fff}
.cxv-round-step b{font-size:.72rem;letter-spacing:.12em;margin-bottom:8px}
.cxv-round-step h3{font-size:1rem;margin:0 0 8px;line-height:1.2}
.cxv-round-step p{font-size:.76rem;line-height:1.42;margin:0;opacity:.94}

@media(max-width:980px){
  .cxv-signal-tree{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:20px;transform:none!important;width:100%!important;margin:0!important}
  .cxv-diamond-core{position:relative;left:auto;top:auto;transform:rotate(45deg);grid-column:1/-1;margin:22px auto 36px;width:160px;height:160px}
  .cxv-diamond-node{position:relative!important;inset:auto!important;width:auto;min-height:0;text-align:left!important}
  .cxv-diamond-node:after,.cxv-diamond-connectors{display:none}
  .cxv-arrow-chain{grid-template-columns:repeat(2,1fr);gap:28px}
  .cxv-round-step:not(:last-child):after,.cxv-round-step:not(:last-child):before{display:none}
}
@media(max-width:680px){
  .cxv-signal-tree{grid-template-columns:1fr;gap:16px}
  .cxv-diamond-core{grid-column:auto;margin-bottom:28px;width:145px;height:145px}
  .cxv-diamond-node{padding:21px 22px;border-radius:20px}
  .cxv-arrow-chain{grid-template-columns:1fr;gap:20px;padding:10px 24px}
  .cxv-round-step{aspect-ratio:auto;min-height:230px;max-width:280px;width:100%;margin-inline:auto}
}


/* =========================================================
   V17 — detailed workflow refinements and blue IP visuals
   ========================================================= */
.workflow-segment-chain{min-height:360px;padding:28px 0}
.workflow-segment-chain .cxv-chain-step{align-items:flex-start;text-align:left;padding:30px 36px 28px;gap:0}
.workflow-segment-chain .cxv-chain-step b{margin-bottom:10px}
.workflow-segment-chain .cxv-chain-step h3{margin:0 0 10px;font-size:1.24rem;font-weight:800;color:#fff}
.workflow-segment-chain .cxv-chain-step p{margin:0;color:rgba(255,255,255,.92);font-size:.95rem;line-height:1.58;max-width:230px}

.cxv-ring-node p{margin:8px 0 0;font-size:.78rem;line-height:1.46;color:#656a74}
.cxv-ring-node.r2 p,.cxv-ring-node.r4 p{text-align:right}
@media(max-width:980px){.workflow-segment-chain .cxv-chain-step p{max-width:none}}
@media(max-width:680px){.workflow-segment-chain .cxv-chain-step{padding:26px 28px;text-align:left}.workflow-segment-chain .cxv-chain-step p{font-size:.92rem}}

.ip-blue-metrics{
  padding:46px;
  border-radius:30px;
  background:linear-gradient(180deg,#0d1323 0%,#0f182c 100%);
  border:1px solid rgba(78,114,255,.22);
  box-shadow:0 28px 78px rgba(4,10,24,.42);
  color:#fff;
}
.ip-blue-metrics .section-head{display:flex;justify-content:space-between;gap:30px;align-items:flex-end;margin-bottom:30px}
.ip-blue-metrics .section-head h2{color:#fff!important}
.ip-blue-metrics .section-head p{color:#eef3ff!important;max-width:430px}
.ip-blue-arc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ip-blue-arc-card{
  min-width:0;
  padding:28px 24px 24px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(19,29,52,.98),rgba(12,20,36,.95));
  border:1px solid rgba(86,126,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 22px 46px rgba(0,0,0,.28);
}
.ip-blue-arc-card h3{margin:18px 0 10px;color:#fff;font-size:2rem;line-height:1}
.ip-blue-arc-card p{margin:0;color:#edf2ff;font-size:.98rem;line-height:1.65}
.ip-blue-arc-visual{
  position:relative;
  height:250px;
  border-radius:22px;
  background:radial-gradient(circle at 50% 100%,rgba(40,99,255,.18),transparent 46%),linear-gradient(180deg,rgba(16,25,45,.84),rgba(11,19,33,.92));
  overflow:hidden;
}
.ip-blue-topbar{position:absolute;top:0;left:50%;transform:translateX(-50%);width:54px;height:4px;border-radius:10px;background:#ff5b0b;box-shadow:0 0 18px rgba(255,91,11,.45)}
.vpn-visual .ip-blue-topbar,.proxy-visual .ip-blue-topbar{width:62px}
.ip-blue-gauge{position:absolute;left:50%;top:50%;transform:translate(-50%,-34%);width:260px;height:150px}
.ip-blue-gauge .gauge-outer{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:220px;height:110px;border-top-left-radius:220px;border-top-right-radius:220px;border:14px solid #2c67ff;border-bottom:0;box-shadow:0 0 0 10px rgba(44,103,255,.12)}
.ip-blue-gauge .gauge-inner{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:150px;height:76px;border-top-left-radius:150px;border-top-right-radius:150px;background:linear-gradient(180deg,#4780ff,#2159ee);border:1px solid rgba(255,255,255,.16);border-bottom:0;box-shadow:inset 0 10px 25px rgba(255,255,255,.14)}
.ip-blue-gauge .gauge-needle{position:absolute;left:50%;bottom:16px;width:92px;height:6px;border-radius:999px;background:#10172b;transform-origin:0 50%;transform:rotate(-26deg);box-shadow:0 2px 10px rgba(0,0,0,.45)}
.ip-blue-gauge .gauge-needle:after{content:"";position:absolute;right:-6px;top:-5px;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:15px solid #10172b}
.ip-blue-gauge .gauge-dot{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 0 0 7px rgba(33,89,238,.14)}
.ip-blue-side-copy{position:absolute;max-width:118px;color:#dbe5ff;font-size:.8rem;line-height:1.38}
.ip-blue-side-copy strong{display:block;color:#ffffff;font-size:.85rem;margin-bottom:5px}
.ip-blue-side-copy small{font-size:.78rem;color:#dbe5ff}
.ip-blue-side-copy.left-copy{left:14px;top:96px;text-align:right}
.ip-blue-side-copy.right-copy{right:14px;top:96px}

.asn-card .ip-blue-arc-visual{display:flex;align-items:center;justify-content:center}
.ip-blue-pill-row{display:flex;align-items:center;gap:14px;padding:0 12px}
.ip-blue-pill{position:relative;display:block;width:56px;height:180px;border-radius:32px;background:linear-gradient(180deg,#6fa1ff 0%,#2f68ff 60%,#1646c8 100%);box-shadow:0 18px 34px rgba(47,104,255,.28), inset 0 8px 18px rgba(255,255,255,.16)}
.ip-blue-pill:before{content:"";position:absolute;left:50%;transform:translateX(-50%);top:16px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.16);box-shadow:0 0 0 5px rgba(255,255,255,.06)}
.ip-blue-pill.p1{height:92px}.ip-blue-pill.p2{height:126px}.ip-blue-pill.p3{height:160px}.ip-blue-pill.p4{height:200px}

.ip-blue-proxy-stack{position:absolute;inset:0}
.stack-line{position:absolute;left:50%;transform:translateX(-50%);display:block;border-top-left-radius:210px;border-top-right-radius:210px;border:12px solid #2d66ff;border-bottom:0;opacity:.98}
.stack-line.line1{bottom:34px;width:220px;height:110px;box-shadow:0 0 0 9px rgba(45,102,255,.10)}
.stack-line.line2{bottom:34px;width:166px;height:82px;border-color:#4c83ff}
.stack-line.line3{bottom:34px;width:112px;height:54px;border-color:#78a4ff}
.stack-node{position:absolute;display:block;width:16px;height:16px;border-radius:50%;background:#2d66ff;box-shadow:0 0 0 6px rgba(45,102,255,.14)}
.stack-node.node1{left:42px;bottom:98px}.stack-node.node2{left:50%;transform:translateX(-50%);bottom:135px}.stack-node.node3{right:42px;bottom:98px}

@media(max-width:1100px){
  .ip-blue-metrics .section-head{flex-direction:column;align-items:flex-start}
  .ip-blue-arc-grid{grid-template-columns:1fr 1fr}
  .ip-blue-arc-card:last-child{grid-column:1/-1}
}
@media(max-width:760px){
  .ip-blue-metrics{padding:30px 22px}
  .ip-blue-arc-grid{grid-template-columns:1fr}
  .ip-blue-arc-card:last-child{grid-column:auto}
  .ip-blue-arc-visual{height:220px}
  .ip-blue-gauge{transform:translate(-50%,-30%) scale(.82)}
  .ip-blue-pill-row{transform:scale(.92)}
}
/* =========================================================
   CLICKRONIX — ORANGE FOUR-ARROW WORKFLOW
   Paste this at the END of assets/css/pages.css
   ========================================================= */

.cx-orange-loop-section {
  position: relative;
  overflow: hidden;
  padding: 96px 0 110px;
  background: #fff4ef;
  border-top: 1px solid rgba(17, 24, 39, 0.05);
  border-bottom: 1px solid rgba(17, 24, 39, 0.05);
}

.cx-orange-loop-section::before,
.cx-orange-loop-section::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0.42;
}

.cx-orange-loop-section::before {
  width: 540px;
  height: 105px;
  top: 46px;
  right: -150px;
  transform: rotate(-11deg);
  background: linear-gradient(90deg, transparent, rgba(17, 24, 39, 0.06));
}

.cx-orange-loop-section::after {
  width: 420px;
  height: 90px;
  left: -130px;
  bottom: 42px;
  transform: rotate(10deg);
  background: linear-gradient(90deg, rgba(255, 91, 11, 0.07), transparent);
}

.cx-orange-loop-heading {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: 0 auto 52px;
  text-align: center;
}

.cx-orange-loop-heading .eyebrow {
  color: #ff5b0b;
}

.cx-orange-loop-heading h2 {
  max-width: 900px;
  margin: 12px auto 18px;
  color: #111318;
}

.cx-orange-loop-heading p {
  max-width: 780px;
  margin: 0 auto;
  color: #626874;
  font-size: 1.05rem;
  line-height: 1.7;
}

.cx-orange-loop-layout {
  position: relative;
  z-index: 2;
  width: min(100%, 1060px);
  min-height: 570px;
  margin: 0 auto;
}

.cx-orange-loop-graphic {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 390px;
  height: 390px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 24px 36px rgba(255, 91, 11, 0.18));
}

.cx-orange-loop-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  width: 154px;
  height: 154px;
  transform: translate(-50%, -50%);
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(255, 91, 11, 0.24);
  box-shadow:
    0 18px 40px rgba(17, 24, 39, 0.14),
    inset 0 0 0 10px rgba(255, 91, 11, 0.045);
}

.cx-orange-loop-core strong {
  display: block;
  color: #ff5b0b;
  font-size: 1.28rem;
  line-height: 1.1;
}

.cx-orange-loop-core span {
  display: block;
  margin-top: 7px;
  color: #6c727d;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}

/*
  Each orange element is a compact bent arrow.
  The four arrows are rotated around the center to create the same
  closed-loop composition as the supplied reference.
*/
.cx-orange-loop-arrow {
  position: absolute;
  z-index: 4;
  width: 170px;
  height: 116px;
  background: linear-gradient(145deg, #ff8444 0%, #ff5b0b 58%, #e94700 100%);
  clip-path: polygon(
    0 18%,
    70% 18%,
    70% 0,
    100% 50%,
    70% 100%,
    70% 80%,
    21% 80%,
    21% 58%,
    0 58%
  );
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 16px 30px rgba(255, 91, 11, 0.22);
}

.cx-orange-loop-arrow::before {
  content: "";
  position: absolute;
  inset: 9px 14px 9px 10px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.22),
    rgba(255, 255, 255, 0.02) 54%,
    rgba(109, 27, 0, 0.12)
  );
  clip-path: inherit;
  border-radius: 14px;
  pointer-events: none;
}

.cx-orange-loop-arrow b {
  position: absolute;
  z-index: 2;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.cx-orange-loop-arrow.arrow-01 {
  left: 50%;
  top: 0;
  transform: translateX(-50%) rotate(0deg);
}

.cx-orange-loop-arrow.arrow-01 b {
  left: 72px;
  top: 47px;
}

.cx-orange-loop-arrow.arrow-02 {
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}

.cx-orange-loop-arrow.arrow-02 b {
  left: 73px;
  top: 47px;
  transform: rotate(-90deg);
}

.cx-orange-loop-arrow.arrow-03 {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) rotate(180deg);
}

.cx-orange-loop-arrow.arrow-03 b {
  left: 72px;
  top: 47px;
  transform: rotate(-180deg);
}

.cx-orange-loop-arrow.arrow-04 {
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(270deg);
}

.cx-orange-loop-arrow.arrow-04 b {
  left: 72px;
  top: 47px;
  transform: rotate(-270deg);
}

.cx-orange-loop-copy {
  position: absolute;
  width: 250px;
  color: #111318;
}

.cx-orange-loop-copy .step {
  display: inline-block;
  margin-bottom: 7px;
  color: #ff5b0b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.cx-orange-loop-copy h3 {
  margin: 0 0 8px;
  color: #111318;
  font-size: 1rem;
  line-height: 1.25;
}

.cx-orange-loop-copy p {
  margin: 0;
  color: #656b76;
  font-size: 0.84rem;
  line-height: 1.56;
}

.cx-orange-loop-copy::after {
  content: "";
  position: absolute;
  width: 72px;
  height: 1px;
  background: linear-gradient(90deg, #ff5b0b, rgba(255, 91, 11, 0));
}

.cx-orange-loop-copy::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5b0b;
  box-shadow: 0 0 0 6px rgba(255, 91, 11, 0.1);
}

.cx-orange-loop-copy.copy-01 {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  text-align: center;
}

.cx-orange-loop-copy.copy-01::after {
  left: 50%;
  bottom: -28px;
  width: 1px;
  height: 24px;
  background: linear-gradient(180deg, #ff5b0b, rgba(255, 91, 11, 0));
}

.cx-orange-loop-copy.copy-01::before {
  left: calc(50% - 4px);
  bottom: -36px;
}

.cx-orange-loop-copy.copy-02 {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding-left: 22px;
}

.cx-orange-loop-copy.copy-02::after {
  left: -74px;
  top: 25px;
}

.cx-orange-loop-copy.copy-02::before {
  left: -82px;
  top: 21px;
}

.cx-orange-loop-copy.copy-03 {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  text-align: center;
}

.cx-orange-loop-copy.copy-03::after {
  left: 50%;
  top: -28px;
  width: 1px;
  height: 24px;
  background: linear-gradient(0deg, #ff5b0b, rgba(255, 91, 11, 0));
}

.cx-orange-loop-copy.copy-03::before {
  left: calc(50% - 4px);
  top: -36px;
}

.cx-orange-loop-copy.copy-04 {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  padding-right: 22px;
  text-align: right;
}

.cx-orange-loop-copy.copy-04::after {
  right: -74px;
  top: 25px;
  transform: rotate(180deg);
}

.cx-orange-loop-copy.copy-04::before {
  right: -82px;
  top: 21px;
}

/* Tablet */
@media (max-width: 980px) {
  .cx-orange-loop-section {
    padding: 82px 0 92px;
  }

  .cx-orange-loop-layout {
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .cx-orange-loop-graphic {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 1 / -1;
    transform: none;
    margin: 0 auto 28px;
    order: -1;
  }

  .cx-orange-loop-copy {
    position: relative;
    inset: auto !important;
    width: auto;
    transform: none !important;
    padding: 22px 24px !important;
    text-align: left !important;
    border: 1px solid rgba(255, 91, 11, 0.16);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 14px 34px rgba(17, 24, 39, 0.06);
  }

  .cx-orange-loop-copy::before,
  .cx-orange-loop-copy::after {
    display: none;
  }
}

/* Mobile */
@media (max-width: 620px) {
  .cx-orange-loop-section {
    padding: 68px 0 74px;
  }

  .cx-orange-loop-heading {
    margin-bottom: 34px;
  }

  .cx-orange-loop-heading h2 {
    font-size: clamp(2rem, 10vw, 2.7rem);
  }

  .cx-orange-loop-layout {
    grid-template-columns: 1fr;
  }

  .cx-orange-loop-graphic {
    width: 310px;
    height: 310px;
    transform: scale(0.92);
    transform-origin: center;
    margin: -10px auto 12px;
  }

  .cx-orange-loop-arrow {
    width: 138px;
    height: 94px;
  }

  .cx-orange-loop-arrow.arrow-01 b,
  .cx-orange-loop-arrow.arrow-03 b,
  .cx-orange-loop-arrow.arrow-02 b,
  .cx-orange-loop-arrow.arrow-04 b {
    left: 58px;
    top: 38px;
  }

  .cx-orange-loop-core {
    width: 126px;
    height: 126px;
  }

  .cx-orange-loop-core strong {
    font-size: 1.08rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cx-orange-loop-section *,
  .cx-orange-loop-section *::before,
  .cx-orange-loop-section *::after {
    transition: none !important;
    animation: none !important;
  }
}
/* =========================================================
   CLICKRONIX ORANGE IP SPEEDOMETER INFOGRAPHIC
   ========================================================= */

.ip-speed-section {
  position: relative;
  overflow: hidden;
  padding: 100px 0 110px;
  background:
    radial-gradient(
      circle at 50% 78%,
      rgba(255, 91, 11, 0.13),
      transparent 34%
    ),
    linear-gradient(180deg, #101114 0%, #111216 100%);
}

.ip-speed-section::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -160px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 91, 11, 0.08),
    transparent 68%
  );
  pointer-events: none;
}

.ip-speed-section::after {
  content: "";
  position: absolute;
  left: -180px;
  bottom: -220px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 91, 11, 0.07),
    transparent 68%
  );
  pointer-events: none;
}

.ip-speed-section .container {
  position: relative;
  z-index: 2;
}

/* Heading */

.ip-speed-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  align-items: end;
  gap: 70px;
  margin-bottom: 56px;
}

.ip-speed-heading h2 {
  max-width: 760px;
  margin: 12px 0 0;
  color: #ffffff !important;
  font-size: clamp(2.4rem, 4.5vw, 4.7rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.ip-speed-heading > p {
  max-width: 470px;
  margin: 0;
  color: #ffffff !important;
  font-size: 1.05rem;
  line-height: 1.7;
}

.ip-speed-heading .eyebrow {
  color: #ff5b0b;
}

/* Main infographic area */

.ip-speed-infographic {
  position: relative;
  min-height: 630px;
  max-width: 1180px;
  margin: 0 auto;
}

/* Speedometer */

.ip-speed-meter {
  position: absolute;
  left: 50%;
  bottom: 55px;
  width: 650px;
  height: 360px;
  transform: translateX(-50%);
}

.meter-outer-ring {
  position: absolute;
  left: 50%;
  bottom: 56px;
  width: 570px;
  height: 285px;
  transform: translateX(-50%);
  border: 7px solid #ff5b0b;
  border-bottom: 0;
  border-radius: 570px 570px 0 0;
  box-shadow:
    0 0 0 11px rgba(255, 91, 11, 0.09),
    0 0 36px rgba(255, 91, 11, 0.2);
}

/* Main colored semicircle */

.meter-track {
  position: absolute;
  left: 50%;
  bottom: 56px;
  width: 500px;
  height: 250px;
  transform: translateX(-50%);
  overflow: hidden;
  border-radius: 500px 500px 0 0;
  background: #ff5b0b;
  box-shadow:
    inset 0 8px 22px rgba(255, 255, 255, 0.12),
    0 18px 40px rgba(255, 91, 11, 0.18);
}

.meter-segment {
  position: absolute;
  bottom: 0;
  width: 25%;
  height: 100%;
  border-right: 2px solid rgba(255, 255, 255, 0.25);
}

.segment-one {
  left: 0;
  background: #ff9a66;
}

.segment-two {
  left: 25%;
  background: #ff7c3d;
}

.segment-three {
  left: 50%;
  background: #ff651d;
}

.segment-four {
  left: 75%;
  background: #ee4800;
  border-right: 0;
}

/* White/dark center cutout */

.meter-inner-cutout {
  position: absolute;
  left: 50%;
  bottom: 56px;
  width: 285px;
  height: 143px;
  transform: translateX(-50%);
  border-radius: 285px 285px 0 0;
  background: #111216;
  box-shadow:
    0 -7px 20px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  z-index: 4;
}

/* Needle */

.meter-needle {
  position: absolute;
  left: 50%;
  bottom: 75px;
  width: 220px;
  height: 12px;
  transform-origin: 0 50%;
  transform: rotate(-24deg);
  z-index: 8;
}

.meter-needle span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffffff 0%, #f3f3f3 10%, #17181b 11%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.meter-needle span::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 25px solid #17181b;
}

/* Needle center */

.meter-center {
  position: absolute;
  left: 50%;
  bottom: 62px;
  width: 42px;
  height: 42px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #ffffff;
  border: 8px solid #ff5b0b;
  box-shadow:
    0 0 0 8px rgba(255, 91, 11, 0.13),
    0 10px 22px rgba(0, 0, 0, 0.26);
  z-index: 10;
}

/* Caption under meter */

.meter-caption {
  position: absolute;
  left: 50%;
  bottom: 0;
  min-width: 260px;
  transform: translateX(-50%);
  text-align: center;
}

.meter-caption strong {
  display: block;
  margin-bottom: 5px;
  color: #ffffff;
  font-size: 1.15rem;
}

.meter-caption span {
  color: #d9dce4;
  font-size: 0.88rem;
}

/* Four meter markers */

.meter-marker {
  position: absolute;
  z-index: 12;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ff5b0b;
  border: 4px solid #111216;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 900;
  box-shadow: 0 0 0 5px rgba(255, 91, 11, 0.13);
}

.marker-one {
  left: 22px;
  bottom: 53px;
}

.marker-two {
  left: 180px;
  top: 42px;
}

.marker-three {
  right: 180px;
  top: 42px;
}

.marker-four {
  right: 22px;
  bottom: 53px;
}

/* Text points */

.ip-speed-point {
  position: absolute;
  width: 250px;
  z-index: 15;
}

.ip-speed-point::after {
  content: "";
  position: absolute;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 91, 11, 0.15),
    #ff5b0b
  );
}

.ip-speed-point .point-number {
  display: inline-flex;
  margin-bottom: 7px;
  color: #ff5b0b;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.ip-speed-point h3 {
  margin: 0 0 8px;
  color: #ffffff !important;
  font-size: 1.05rem;
}

.ip-speed-point p {
  margin: 0;
  color: #ffffff !important;
  font-size: 0.86rem;
  line-height: 1.55;
}

.point-one {
  left: 0;
  top: 100px;
  text-align: right;
}

.point-one::after {
  left: calc(100% + 18px);
  top: 44px;
  width: 90px;
}

.point-two {
  right: 0;
  top: 100px;
}

.point-two::after {
  right: calc(100% + 18px);
  top: 44px;
  width: 90px;
  transform: rotate(180deg);
}

.point-three {
  left: 45px;
  bottom: 80px;
  text-align: right;
}

.point-three::after {
  left: calc(100% + 18px);
  top: 42px;
  width: 74px;
}

.point-four {
  right: 45px;
  bottom: 80px;
}

.point-four::after {
  right: calc(100% + 18px);
  top: 42px;
  width: 74px;
  transform: rotate(180deg);
}

/* Hover movement */

.ip-speed-point,
.ip-speed-meter {
  transition:
    transform 0.35s ease,
    filter 0.35s ease;
}

.ip-speed-point:hover {
  transform: translateY(-5px);
}

.ip-speed-infographic:hover .meter-needle {
  animation: clickronixMeterNeedle 2.4s ease-in-out infinite alternate;
}

@keyframes clickronixMeterNeedle {
  from {
    transform: rotate(-28deg);
  }

  to {
    transform: rotate(20deg);
  }
}

/* Tablet */

@media (max-width: 1050px) {
  .ip-speed-heading {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .ip-speed-heading > p {
    max-width: 720px;
  }

  .ip-speed-infographic {
    min-height: 760px;
  }

  .ip-speed-meter {
    bottom: 70px;
    transform: translateX(-50%) scale(0.86);
  }

  .point-one,
  .point-three {
    left: 0;
  }

  .point-two,
  .point-four {
    right: 0;
  }
}

/* Mobile */

@media (max-width: 760px) {
  .ip-speed-section {
    padding: 72px 0;
  }

  .ip-speed-heading {
    margin-bottom: 42px;
  }

  .ip-speed-heading h2 {
    font-size: clamp(2.2rem, 11vw, 3.25rem);
  }

  .ip-speed-infographic {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 16px;
  }

  .ip-speed-meter {
    position: relative;
    left: auto;
    bottom: auto;
    order: 1;
    width: 650px;
    height: 360px;
    margin: -35px 0 -55px;
    align-self: center;
    transform: scale(0.56);
  }

  .ip-speed-point {
    position: relative;
    inset: auto !important;
    width: 100%;
    padding: 20px 22px;
    text-align: left !important;
    border: 1px solid rgba(255, 91, 11, 0.28);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.025);
  }

  .ip-speed-point::after {
    display: none;
  }

  .point-one {
    order: 2;
  }

  .point-two {
    order: 3;
  }

  .point-three {
    order: 4;
  }

  .point-four {
    order: 5;
  }

  .ip-speed-point p {
    font-size: 0.92rem;
  }
}

@media (max-width: 430px) {
  .ip-speed-meter {
    transform: scale(0.48);
    margin-top: -55px;
    margin-bottom: -75px;
  }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
  .ip-speed-infographic:hover .meter-needle {
    animation: none;
  }

  .ip-speed-point,
  .ip-speed-meter {
    transition: none;
  }
}
/* =========================================================
   CORE IP INTELLIGENCE — BLACK SECTION
   ========================================================= */

.core-ip-section {
  background: #101114 !important;
  color: #ffffff !important;
}

.core-ip-section .section-head h2 {
  color: #ffffff !important;
}

.core-ip-section .section-head .eyebrow {
  color: #ff5b0b !important;
}

.core-ip-section .section-head p,
.core-ip-section .section-head .muted {
  color: #c8ccd5 !important;
}

.core-ip-section .grid-3 .card,
.section:not(.alt).core-ip-section .grid-3 .card {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.055),
    rgba(255, 255, 255, 0.018)
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  color: #ffffff !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22) !important;
}

.core-ip-section .grid-3 .card h3,
.section:not(.alt).core-ip-section .grid-3 .card h3 {
  color: #ffffff !important;
}

.core-ip-section .grid-3 .card p,
.section:not(.alt).core-ip-section .grid-3 .card p {
  color: #c8ccd5 !important;
}

.core-ip-section .grid-3 .card .icon {
  color: #ff5b0b !important;
  background: rgba(255, 91, 11, 0.08) !important;
  border: 1px solid rgba(255, 91, 11, 0.42) !important;
}

.core-ip-section .grid-3 .card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 91, 11, 0.55) !important;
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.3),
    0 12px 32px rgba(255, 91, 11, 0.08) !important;
}
/* =========================================================
   FINAL WHITE IP SPEEDOMETER SECTION
   Slow 01 → 02 → 03 → 04, then fast reset to 01
   ========================================================= */

section.ip-speed-section,
.section.alt.premium-flat-section.premium-flat-dark.ip-speed-section {
  position: relative;
  overflow: hidden;
  padding: 96px 0 105px;
  background: #d8d8d8 !important;
  color: #111216 !important;
}

/* Remove old dark/orange background overlays */

section.ip-speed-section::before {
  content: "";
  position: absolute;
  top: -130px;
  right: -170px;
  width: 620px;
  height: 220px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(17, 24, 39, 0.035)
  );
  transform: rotate(-11deg);
  pointer-events: none;
}

section.ip-speed-section::after {
  content: "";
  position: absolute;
  left: -180px;
  bottom: -150px;
  width: 620px;
  height: 220px;
  background: linear-gradient(
    90deg,
    rgba(255, 91, 11, 0.045),
    transparent
  );
  transform: rotate(9deg);
  pointer-events: none;
}

section.ip-speed-section .container {
  position: relative;
  z-index: 2;
}

/* =========================================================
   HEADING
   ========================================================= */

section.ip-speed-section .ip-speed-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  align-items: end;
  gap: 70px;
  margin-bottom: 48px;
}

section.ip-speed-section .ip-speed-heading h2 {
  max-width: 760px;
  margin: 10px 0 0;
  color: #111216 !important;
  font-size: clamp(2.6rem, 4.7vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

section.ip-speed-section .ip-speed-heading > p {
  max-width: 470px;
  margin: 0;
  color: #555d69 !important;
  font-size: 1rem;
  line-height: 1.7;
}

section.ip-speed-section .ip-speed-heading .eyebrow {
  color: #ff5b0b !important;
}

/* =========================================================
   INFOGRAPHIC LAYOUT
   ========================================================= */

section.ip-speed-section .ip-speed-infographic {
  position: relative;
  min-height: 590px;
  max-width: 1180px;
  margin: 0 auto;
}

/* =========================================================
   SPEEDOMETER
   ========================================================= */

section.ip-speed-section .ip-speed-meter {
  position: absolute;
  left: 50%;
  bottom: 30px;
  width: 680px;
  height: 390px;
  transform: translateX(-50%);
}

section.ip-speed-section .meter-outer-ring {
  position: absolute;
  left: 50%;
  bottom: 62px;
  width: 590px;
  height: 295px;
  transform: translateX(-50%);
  border: 7px solid #ff5b0b;
  border-bottom: 0;
  border-radius: 590px 590px 0 0;
  box-shadow:
    0 0 0 9px rgba(255, 91, 11, 0.08),
    0 16px 34px rgba(255, 91, 11, 0.16);
}

section.ip-speed-section .meter-track {
  position: absolute;
  left: 50%;
  bottom: 62px;
  width: 520px;
  height: 260px;
  transform: translateX(-50%);
  overflow: hidden;
  border-radius: 520px 520px 0 0;
  background: #ff5b0b;
  box-shadow:
    inset 0 8px 20px rgba(255, 255, 255, 0.16),
    0 18px 36px rgba(255, 91, 11, 0.17);
}

section.ip-speed-section .meter-segment {
  position: absolute;
  bottom: 0;
  width: 25%;
  height: 100%;
  border-right: 2px solid rgba(255, 255, 255, 0.32);
}

section.ip-speed-section .segment-one {
  left: 0;
  background: #ffae82;
}

section.ip-speed-section .segment-two {
  left: 25%;
  background: #ff8852;
}

section.ip-speed-section .segment-three {
  left: 50%;
  background: #ff6828;
}

section.ip-speed-section .segment-four {
  left: 75%;
  background: #ed4500;
  border-right: 0;
}

/* Inner white cutout */

section.ip-speed-section .meter-inner-cutout {
  position: absolute;
  left: 50%;
  bottom: 62px;
  width: 300px;
  height: 150px;
  transform: translateX(-50%);
  border-radius: 300px 300px 0 0;
  background: #ffffff !important;
  box-shadow:
    0 -7px 18px rgba(17, 24, 39, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  z-index: 4;
}

/* =========================================================
   NEEDLE
   Slow movement, fast reset
   ========================================================= */

section.ip-speed-section .meter-needle {
  position: absolute;
  left: 50%;
  bottom: 82px;
  width: 225px;
  height: 10px;
  transform-origin: 0 50%;
  transform: rotate(-72deg);
  z-index: 8;
  animation: clickronixNeedleSlowFast 10s linear infinite !important;
}

section.ip-speed-section .meter-needle span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #17181b !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.28);
}

section.ip-speed-section .meter-needle span::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 24px solid #17181b;
}

/*
  0%–88%:
  Slow progress from point 01 to point 04.

  88%–94%:
  Small hold at point 04.

  94%–100%:
  Fast return to point 01.
*/

@keyframes clickronixNeedleSlowFast {
  0%,
  6% {
    transform: rotate(-72deg);
  }

  30% {
    transform: rotate(-28deg);
  }

  56% {
    transform: rotate(18deg);
  }

  82%,
  94% {
    transform: rotate(68deg);
  }

  100% {
    transform: rotate(-72deg);
  }
}

/* Prevent old hover animation from replacing the loop */

section.ip-speed-section
  .ip-speed-infographic:hover
  .meter-needle {
  animation: clickronixNeedleSlowFast 10s linear infinite !important;
}

/* Center hub */

section.ip-speed-section .meter-center {
  position: absolute;
  left: 50%;
  bottom: 66px;
  width: 44px;
  height: 44px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #ffffff;
  border: 8px solid #ff5b0b;
  box-shadow:
    0 0 0 8px rgba(255, 91, 11, 0.12),
    0 8px 18px rgba(17, 24, 39, 0.18);
  z-index: 10;
}

/* Meter caption */

section.ip-speed-section .meter-caption {
  position: absolute;
  left: 50%;
  bottom: 0;
  min-width: 280px;
  transform: translateX(-50%);
  text-align: center;
}

section.ip-speed-section .meter-caption strong {
  display: block;
  margin-bottom: 5px;
  color: #111216 !important;
  font-size: 1.12rem;
}

section.ip-speed-section .meter-caption span {
  color: #59616d !important;
  font-size: 0.86rem;
}

/* =========================================================
   MARKERS
   ========================================================= */

section.ip-speed-section .meter-marker {
  position: absolute;
  z-index: 12;
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #ff5b0b;
  border: 4px solid #ffffff;
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 900;
  box-shadow: 0 0 0 4px rgba(255, 91, 11, 0.15);
}

section.ip-speed-section .marker-one {
  left: 28px;
  bottom: 58px;
}

section.ip-speed-section .marker-two {
  left: 190px;
  top: 43px;
}

section.ip-speed-section .marker-three {
  right: 190px;
  top: 43px;
}

section.ip-speed-section .marker-four {
  right: 28px;
  bottom: 58px;
}

/* =========================================================
   TEXT POINTS
   ========================================================= */

section.ip-speed-section .ip-speed-point {
  position: absolute;
  width: 255px;
  z-index: 15;
  color: #111216 !important;
}

section.ip-speed-section .ip-speed-point::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  background: #ff5b0b;
  opacity: 0.72;
}

section.ip-speed-section .ip-speed-point .point-number {
  display: block;
  margin-bottom: 6px;
  color: #ff5b0b !important;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

section.ip-speed-section .ip-speed-point h3 {
  margin: 0 0 7px;
  color: #111216 !important;
  font-size: 1rem;
  line-height: 1.25;
}

section.ip-speed-section .ip-speed-point p {
  margin: 0;
  color: #555d69 !important;
  font-size: 0.84rem;
  line-height: 1.52;
}

/* Upper-left */

section.ip-speed-section .point-one {
  left: 0;
  top: 76px;
  text-align: right;
}

section.ip-speed-section .point-one::after {
  left: calc(100% + 18px);
  width: 105px;
}

/* Upper-right */

section.ip-speed-section .point-two {
  right: 0;
  top: 76px;
  text-align: left;
}

section.ip-speed-section .point-two::after {
  right: calc(100% + 18px);
  width: 105px;
}

/* Lower-left */

section.ip-speed-section .point-three {
  left: 26px;
  bottom: 68px;
  text-align: right;
}

section.ip-speed-section .point-three::after {
  left: calc(100% + 18px);
  width: 88px;
}

/* Lower-right */

section.ip-speed-section .point-four {
  right: 26px;
  bottom: 68px;
  text-align: left;
}

section.ip-speed-section .point-four::after {
  right: calc(100% + 18px);
  width: 88px;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {
  section.ip-speed-section .ip-speed-heading {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  section.ip-speed-section .ip-speed-heading > p {
    max-width: 760px;
  }

  section.ip-speed-section .ip-speed-infographic {
    min-height: 750px;
  }

  section.ip-speed-section .ip-speed-meter {
    bottom: 55px;
    transform: translateX(-50%) scale(0.84);
  }

  section.ip-speed-section .point-one,
  section.ip-speed-section .point-three {
    left: 0;
  }

  section.ip-speed-section .point-two,
  section.ip-speed-section .point-four {
    right: 0;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {
  section.ip-speed-section {
    padding: 70px 0;
  }

  section.ip-speed-section .ip-speed-heading {
    margin-bottom: 35px;
  }

  section.ip-speed-section .ip-speed-heading h2 {
    font-size: clamp(2.15rem, 11vw, 3.25rem);
  }

  section.ip-speed-section .ip-speed-infographic {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 14px;
  }

  section.ip-speed-section .ip-speed-meter {
    position: relative;
    left: auto;
    bottom: auto;
    order: 1;
    flex: 0 0 auto;
    width: 680px;
    height: 390px;
    margin: -45px 0 -65px;
    align-self: center;
    transform: scale(0.54);
  }

  section.ip-speed-section .ip-speed-point {
    position: relative;
    inset: auto !important;
    width: 100%;
    padding: 19px 20px;
    text-align: left !important;
    border: 1px solid rgba(255, 91, 11, 0.27);
    border-radius: 16px;
    background: #f7f7f7;
  }

  section.ip-speed-section .ip-speed-point::after {
    display: none;
  }

  section.ip-speed-section .point-one {
    order: 2;
  }

  section.ip-speed-section .point-two {
    order: 3;
  }

  section.ip-speed-section .point-three {
    order: 4;
  }

  section.ip-speed-section .point-four {
    order: 5;
  }

  section.ip-speed-section .ip-speed-point h3 {
    font-size: 1.05rem;
  }

  section.ip-speed-section .ip-speed-point p {
    font-size: 0.9rem;
  }
}

@media (max-width: 430px) {
  section.ip-speed-section .ip-speed-meter {
    transform: scale(0.45);
    margin-top: -70px;
    margin-bottom: -90px;
  }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
  section.ip-speed-section .meter-needle,
  section.ip-speed-section
    .ip-speed-infographic:hover
    .meter-needle {
    animation: none !important;
    transform: rotate(18deg);
  }
}
/* =========================================================
   FINAL SPEEDOMETER POSITION + NEEDLE FIX
   Add at the absolute bottom of pages.css
   ========================================================= */

/* Give the infographic more horizontal room */

section.ip-speed-section .ip-speed-infographic {
  max-width: 1320px;
  min-height: 610px;
  padding-inline: 40px;
}

/* Keep the meter centered and slightly smaller */

section.ip-speed-section .ip-speed-meter {
  left: 50%;
  bottom: 42px;
  width: 640px;
  height: 370px;
  transform: translateX(-50%);
}

/* Meter geometry */

section.ip-speed-section .meter-outer-ring {
  bottom: 66px;
  width: 550px;
  height: 275px;
  border-radius: 550px 550px 0 0;
}

section.ip-speed-section .meter-track {
  bottom: 66px;
  width: 480px;
  height: 240px;
  border-radius: 480px 480px 0 0;
}

section.ip-speed-section .meter-inner-cutout {
  bottom: 66px;
  width: 270px;
  height: 135px;
  border-radius: 270px 270px 0 0;
}

/* =========================================================
   NEEDLE — KEEP IT INSIDE THE METER
   ========================================================= */

section.ip-speed-section .meter-needle {
  position: absolute;
  left: 50%;
  bottom: 84px;

  /* Shorter needle so it never exits the meter */
  width: 185px;
  height: 9px;

  transform-origin: 0 50%;
  transform: rotate(-72deg);
  z-index: 8;

  animation: clickronixMeterInsideCycle 11s linear infinite !important;
}

section.ip-speed-section .meter-needle span {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 999px;
  background: #17181b !important;
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.22);
}

section.ip-speed-section .meter-needle span::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 20px solid #17181b;
}

/*
  Slow:
  01 → 02 → 03 → 04

  Fast:
  04 → 01
*/

@keyframes clickronixMeterInsideCycle {
  0%,
  7% {
    transform: rotate(-72deg);
  }

  31% {
    transform: rotate(-28deg);
  }

  56% {
    transform: rotate(18deg);
  }

  82%,
  94% {
    transform: rotate(68deg);
  }

  100% {
    transform: rotate(-72deg);
  }
}

/* Stop old hover animation from overriding it */

section.ip-speed-section
  .ip-speed-infographic:hover
  .meter-needle {
  animation: clickronixMeterInsideCycle 11s linear infinite !important;
}

/* Center hub */

section.ip-speed-section .meter-center {
  bottom: 68px;
  width: 42px;
  height: 42px;
}

/* Caption */

section.ip-speed-section .meter-caption {
  bottom: 3px;
}

/* =========================================================
   POINT MARKERS
   ========================================================= */

section.ip-speed-section .marker-one {
  left: 30px;
  bottom: 62px;
}

section.ip-speed-section .marker-two {
  left: 172px;
  top: 45px;
}

section.ip-speed-section .marker-three {
  right: 172px;
  top: 45px;
}

section.ip-speed-section .marker-four {
  right: 30px;
  bottom: 62px;
}

/* =========================================================
   TEXT POSITIONING
   More room on left 01 and right 04
   ========================================================= */

section.ip-speed-section .ip-speed-point {
  width: 275px;
}

/* 01 — move farther left and higher */

section.ip-speed-section .point-one {
  left: -40px;
  top: 70px;
  padding-right: 18px;
  text-align: right;
}

section.ip-speed-section .point-one::after {
  left: calc(100% + 14px);
  width: 100px;
}

/* 02 — keep upper-right clean */

section.ip-speed-section .point-two {
  right: -20px;
  top: 70px;
  padding-left: 18px;
}

section.ip-speed-section .point-two::after {
  right: calc(100% + 14px);
  width: 100px;
}

/* 03 — move farther left */

section.ip-speed-section .point-three {
  left: -30px;
  bottom: 82px;
  padding-right: 18px;
  text-align: right;
}

section.ip-speed-section .point-three::after {
  left: calc(100% + 14px);
  width: 84px;
}

/* 04 — move farther right and add breathing room */

section.ip-speed-section .point-four {
  right: -42px;
  bottom: 82px;
  padding-left: 24px;
  text-align: left;
}

section.ip-speed-section .point-four::after {
  right: calc(100% + 14px);
  width: 84px;
}

/* Make point text easier to read */

section.ip-speed-section .ip-speed-point h3 {
  margin-bottom: 8px;
  font-size: 1.02rem;
  line-height: 1.3;
}

section.ip-speed-section .ip-speed-point p {
  max-width: 260px;
  font-size: 0.88rem;
  line-height: 1.58;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {
  section.ip-speed-section .ip-speed-infographic {
    max-width: 960px;
    min-height: 760px;
    padding-inline: 0;
  }

  section.ip-speed-section .ip-speed-meter {
    bottom: 55px;
    transform: translateX(-50%) scale(0.84);
  }

  section.ip-speed-section .point-one {
    left: 0;
  }

  section.ip-speed-section .point-two {
    right: 0;
  }

  section.ip-speed-section .point-three {
    left: 0;
  }

  section.ip-speed-section .point-four {
    right: 0;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {
  section.ip-speed-section .ip-speed-infographic {
    padding-inline: 0;
  }

  section.ip-speed-section .ip-speed-meter {
    position: relative;
    left: auto;
    bottom: auto;
    width: 640px;
    height: 370px;
    transform: scale(0.54);
    margin: -42px 0 -62px;
  }

  section.ip-speed-section .point-one,
  section.ip-speed-section .point-two,
  section.ip-speed-section .point-three,
  section.ip-speed-section .point-four {
    inset: auto !important;
    padding: 20px;
    text-align: left;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  section.ip-speed-section .meter-needle,
  section.ip-speed-section
    .ip-speed-infographic:hover
    .meter-needle {
    animation: none !important;
    transform: rotate(18deg);
  }
}
/* =========================================================
   CLICKRONIX SPEEDOMETER — FINAL FIX
   Needle remains inside meter:
   01 → 02 → 03 → 04 → fast reset to 01
   ========================================================= */

/* Main section */

section.ip-speed-section,
.section.alt.premium-flat-section.premium-flat-dark.ip-speed-section {
  position: relative;
  overflow: hidden;
  padding: 92px 0 100px;
  background: #d8d8d8 !important;
  color: #111216 !important;
}

section.ip-speed-section .container {
  position: relative;
  z-index: 2;
}

/* Heading */

section.ip-speed-section .ip-speed-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  align-items: end;
  gap: 60px;
  margin-bottom: 42px;
}

section.ip-speed-section .ip-speed-heading h2 {
  max-width: 760px;
  margin: 10px 0 0;
  color: #111216 !important;
  font-size: clamp(2.5rem, 4.6vw, 4.7rem);
  line-height: 0.99;
  letter-spacing: -0.055em;
}

section.ip-speed-section .ip-speed-heading > p {
  max-width: 470px;
  margin: 0;
  color: #565e6a !important;
  font-size: 1rem;
  line-height: 1.7;
}

section.ip-speed-section .ip-speed-heading .eyebrow {
  color: #ff5b0b !important;
}

/* Infographic area */

section.ip-speed-section .ip-speed-infographic {
  position: relative;
  max-width: 1280px;
  min-height: 600px;
  margin: 0 auto;
  padding-inline: 26px;
}

/* =========================================================
   CENTRAL METER
   ========================================================= */

section.ip-speed-section .ip-speed-meter {
  position: absolute;
  left: 50%;
  bottom: 38px;
  width: 640px;
  height: 370px;
  transform: translateX(-50%);
}

/* Outer semicircle */

section.ip-speed-section .meter-outer-ring {
  position: absolute;
  left: 50%;
  bottom: 64px;
  width: 550px;
  height: 275px;
  transform: translateX(-50%);
  border: 7px solid #ff5b0b;
  border-bottom: 0;
  border-radius: 550px 550px 0 0;
  box-shadow:
    0 0 0 9px rgba(255, 91, 11, 0.08),
    0 16px 34px rgba(255, 91, 11, 0.16);
}

/* Orange meter segments */

section.ip-speed-section .meter-track {
  position: absolute;
  left: 50%;
  bottom: 64px;
  width: 480px;
  height: 240px;
  transform: translateX(-50%);
  overflow: hidden;
  border-radius: 480px 480px 0 0;
  background: #ff5b0b;
  box-shadow:
    inset 0 8px 20px rgba(255, 255, 255, 0.15),
    0 18px 34px rgba(255, 91, 11, 0.16);
}

section.ip-speed-section .meter-segment {
  position: absolute;
  bottom: 0;
  width: 25%;
  height: 100%;
  border-right: 1px solid rgba(255, 255, 255, 0.38);
}

section.ip-speed-section .segment-one {
  left: 0;
  background: #ffad82;
}

section.ip-speed-section .segment-two {
  left: 25%;
  background: #ff8954;
}

section.ip-speed-section .segment-three {
  left: 50%;
  background: #ff6829;
}

section.ip-speed-section .segment-four {
  left: 75%;
  background: #ef4600;
  border-right: 0;
}

/* White inner cutout */

section.ip-speed-section .meter-inner-cutout {
  position: absolute;
  left: 50%;
  bottom: 64px;
  width: 270px;
  height: 135px;
  transform: translateX(-50%);
  border-radius: 270px 270px 0 0;
  background: #ffffff !important;
  box-shadow:
    0 -5px 16px rgba(17, 24, 39, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  z-index: 4;
}

/* =========================================================
   NEEDLE — CORRECT UPPER-HALF ROTATION
   ========================================================= */

section.ip-speed-section .meter-needle {
  position: absolute;
  left: 50%;
  bottom: 80px;

  /* Short enough to stay inside the meter */
  width: 188px;
  height: 9px;

  /* Needle starts at the center hub */
  transform-origin: 0 50%;
  transform: rotate(180deg);

  z-index: 8;
  animation: clickronixNeedleFinal 11s linear infinite !important;
}

section.ip-speed-section .meter-needle span {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 999px;
  background: #17181b !important;
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.22);
}

section.ip-speed-section .meter-needle span::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 20px solid #17181b;
}

/*
  CSS rotation directions:

  180deg = point 01, left
  225deg = point 02, upper-left
  315deg = point 03, upper-right
  360deg = point 04, right

  The needle never enters the lower half.
*/

@keyframes clickronixNeedleFinal {
  0%,
  7% {
    transform: rotate(180deg);
  }

  31% {
    transform: rotate(225deg);
  }

  57% {
    transform: rotate(315deg);
  }

  83%,
  94% {
    transform: rotate(360deg);
  }

  /* Quick return to point 01 */
  100% {
    transform: rotate(180deg);
  }
}

/* Prevent an older hover animation from taking control */

section.ip-speed-section
  .ip-speed-infographic:hover
  .meter-needle {
  animation: clickronixNeedleFinal 11s linear infinite !important;
}

/* Center hub */

section.ip-speed-section .meter-center {
  position: absolute;
  left: 50%;
  bottom: 64px;
  width: 42px;
  height: 42px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #ffffff;
  border: 7px solid #ff5b0b;
  box-shadow:
    0 0 0 7px rgba(255, 91, 11, 0.12),
    0 8px 18px rgba(17, 24, 39, 0.16);
  z-index: 10;
}

/* Meter caption */

section.ip-speed-section .meter-caption {
  position: absolute;
  left: 50%;
  bottom: 0;
  min-width: 280px;
  transform: translateX(-50%);
  text-align: center;
}

section.ip-speed-section .meter-caption strong {
  display: block;
  margin-bottom: 5px;
  color: #111216 !important;
  font-size: 1.12rem;
}

section.ip-speed-section .meter-caption span {
  color: #5d6571 !important;
  font-size: 0.86rem;
}

/* =========================================================
   METER NUMBER MARKERS
   ========================================================= */

section.ip-speed-section .meter-marker {
  position: absolute;
  z-index: 12;
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #ff5b0b;
  border: 4px solid #ffffff;
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 900;
  box-shadow: 0 0 0 4px rgba(255, 91, 11, 0.15);
}

section.ip-speed-section .marker-one {
  left: 30px;
  bottom: 60px;
}

section.ip-speed-section .marker-two {
  left: 172px;
  top: 45px;
}

section.ip-speed-section .marker-three {
  right: 172px;
  top: 45px;
}

section.ip-speed-section .marker-four {
  right: 30px;
  bottom: 60px;
}

/* =========================================================
   POINT COPY
   Reduced space around point 01 and point 02
   ========================================================= */

section.ip-speed-section .ip-speed-point {
  position: absolute;
  width: 260px;
  z-index: 15;
  color: #111216 !important;
}

section.ip-speed-section .ip-speed-point::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  background: #ff5b0b;
  opacity: 0.72;
}

section.ip-speed-section .ip-speed-point .point-number {
  display: block;
  margin-bottom: 5px;
  color: #ff5b0b !important;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

section.ip-speed-section .ip-speed-point h3 {
  margin: 0 0 7px;
  color: #111216 !important;
  font-size: 1rem;
  line-height: 1.3;
}

section.ip-speed-section .ip-speed-point p {
  max-width: 250px;
  margin: 0;
  color: #565e6a !important;
  font-size: 0.86rem;
  line-height: 1.55;
}

/* Point 01 — slightly closer to meter */

section.ip-speed-section .point-one {
  left: 4px;
  top: 84px;
  text-align: right;
}

section.ip-speed-section .point-one::after {
  left: calc(100% + 12px);
  width: 82px;
}

/* Point 02 — slightly closer to meter */

section.ip-speed-section .point-two {
  right: 4px;
  top: 84px;
  text-align: left;
}

section.ip-speed-section .point-two::after {
  right: calc(100% + 12px);
  width: 82px;
}

/* Point 03 */

section.ip-speed-section .point-three {
  left: 16px;
  bottom: 82px;
  text-align: right;
}

section.ip-speed-section .point-three::after {
  left: calc(100% + 12px);
  width: 74px;
}

/* Point 04 */

section.ip-speed-section .point-four {
  right: 16px;
  bottom: 82px;
  text-align: left;
}

section.ip-speed-section .point-four::after {
  right: calc(100% + 12px);
  width: 74px;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {
  section.ip-speed-section .ip-speed-heading {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  section.ip-speed-section .ip-speed-heading > p {
    max-width: 760px;
  }

  section.ip-speed-section .ip-speed-infographic {
    min-height: 750px;
    padding-inline: 0;
  }

  section.ip-speed-section .ip-speed-meter {
    bottom: 55px;
    transform: translateX(-50%) scale(0.84);
  }

  section.ip-speed-section .point-one,
  section.ip-speed-section .point-three {
    left: 0;
  }

  section.ip-speed-section .point-two,
  section.ip-speed-section .point-four {
    right: 0;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {
  section.ip-speed-section {
    padding: 68px 0;
  }

  section.ip-speed-section .ip-speed-heading {
    margin-bottom: 30px;
  }

  section.ip-speed-section .ip-speed-heading h2 {
    font-size: clamp(2.15rem, 11vw, 3.25rem);
  }

  section.ip-speed-section .ip-speed-infographic {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 14px;
  }

  section.ip-speed-section .ip-speed-meter {
    position: relative;
    left: auto;
    bottom: auto;
    order: 1;
    flex: 0 0 auto;
    width: 640px;
    height: 370px;
    margin: -42px 0 -60px;
    align-self: center;
    transform: scale(0.54);
  }

  section.ip-speed-section .ip-speed-point {
    position: relative;
    inset: auto !important;
    width: 100%;
    padding: 19px 20px;
    text-align: left !important;
    border: 1px solid rgba(255, 91, 11, 0.25);
    border-radius: 16px;
    background: #f7f7f7;
  }

  section.ip-speed-section .ip-speed-point::after {
    display: none;
  }

  section.ip-speed-section .point-one {
    order: 2;
  }

  section.ip-speed-section .point-two {
    order: 3;
  }

  section.ip-speed-section .point-three {
    order: 4;
  }

  section.ip-speed-section .point-four {
    order: 5;
  }
}

@media (max-width: 430px) {
  section.ip-speed-section .ip-speed-meter {
    transform: scale(0.45);
    margin-top: -67px;
    margin-bottom: -88px;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  section.ip-speed-section .meter-needle,
  section.ip-speed-section
    .ip-speed-infographic:hover
    .meter-needle {
    animation: none !important;
    transform: rotate(270deg);
  }
}
/* =========================================================
   INVALID TRAFFIC CIRCLE WORKFLOW — WHITE TEXT FIX
   ========================================================= */

.cx-infographic-arrow-chain .cxv-round-step,
.cx-infographic-arrow-chain .cxv-round-step * {
  color: #ffffff !important;
}

/* Numbers */

.cx-infographic-arrow-chain .cxv-round-step b {
  color: #ffffff !important;
  font-weight: 800;
}

/* Circle titles */

.cx-infographic-arrow-chain .cxv-round-step h3 {
  color: #000000 !important;
  margin: 8px 0 10px;
  font-weight: 800;
}

/* Circle paragraphs */

.cx-infographic-arrow-chain .cxv-round-step p {
  color: rgba(255, 255, 255, 0.92) !important;
  line-height: 1.55;
}

/* Keep the section heading outside the circles dark */

.cx-infographic-arrow-chain .cxv-heading h2 {
  color: #111216 !important;
}

.cx-infographic-arrow-chain .cxv-heading > p {
  color: #5d6571 !important;
}

.cx-infographic-arrow-chain .cxv-heading .eyebrow {
  color: #ff6600 !important;
}
/* ===============================
   DATA RETENTION TOWER LAYOUT
================================ */

.cxv-tower{
    display:grid;
    grid-template-columns:280px 420px 280px;
    justify-content:center;
    align-items:center;
    gap:70px;
    margin-top:70px;
    position:relative;
}

/* Center arrows */
.cxv-tower-arrows{
    grid-column:2;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    gap:8px;
    width:100%;
}

/* Left cards */
.cxv-callout.c1,
.cxv-callout.c2{
    grid-column:1;
    position:relative;
    max-width:240px;
}

/* Right cards */
.cxv-callout.c3,
.cxv-callout.c4{
    grid-column:3;
    position:relative;
    max-width:240px;
}

/* spacing */
.cxv-callout.c1{
    margin-bottom:70px;
}

.cxv-callout.c2{
    margin-top:70px;
}

.cxv-callout.c3{
    margin-bottom:70px;
}

.cxv-callout.c4{
    margin-top:70px;
}

/* Card styling */
.cxv-callout{
    background:#fff;
    padding:22px;
    border-radius:16px;
    box-shadow:0 18px 45px rgba(0,0,0,.08);
    transition:.3s ease;
}

.cxv-callout:hover{
    transform:translateY(-6px);
}

.cxv-callout b{
    display:block;
    color:#ff6600;
    font-size:.82rem;
    margin-bottom:8px;
    font-weight:700;
}

.cxv-callout h3{
    margin:0 0 10px;
    font-size:1.15rem;
}

.cxv-callout p{
    margin:0;
    color:#666;
    line-height:1.6;
}
.cxv-tower{
    position:relative;
    max-width:1100px;
    margin:80px auto 0;
    min-height:420px;
}

.cxv-tower-arrows{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    display:flex;
    gap:18px;
    align-items:flex-end;
}

/* Left side */
.cxv-callout.c1{
    position:absolute;
    left:40px;
    top:90px;
    width:240px;
}

.cxv-callout.c2{
    position:absolute;
    left:40px;
    top:240px;
    width:240px;
}

/* Right side */
.cxv-callout.c3{
    position:absolute;
    right:40px;
    top:90px;
    width:240px;
}

.cxv-callout.c4{
    position:absolute;
    right:40px;
    top:240px;
    width:240px;
}
/* ================================
   PREMIUM RETENTION WORKFLOW
================================ */

.cxv-tower{
    position:relative;
    max-width:1200px;
    height:520px;
    margin:80px auto;
}

/* ----------------
   CENTER ARROWS
---------------- */

.cxv-tower-arrows{
    position:absolute;
    left:29%;
    bottom:40px;
    transform:translateX(-50%);
    display:flex;
    align-items:flex-end;
    gap:18px;
}

/* ----------------
   CARDS
---------------- */

.cxv-callout{
    position:absolute;
    width:260px;
    padding:24px;
    background:#fff;
    border-radius:18px;
    box-shadow:0 18px 50px rgba(0,0,0,.08);
}

.cxv-callout b{
    display:block;
    color:#ff6600;
    margin-bottom:8px;
    font-size:13px;
}

.cxv-callout h3{
    margin:0 0 10px;
    font-size:20px;
}

.cxv-callout p{
    margin:0;
    line-height:1.6;
    color:#666;
}

/* ----------------
   LEFT
---------------- */

.c1{
    left:0;
    top:90px;
}

.c2{
    left:0;
    top:10px;
}

/* ----------------
   RIGHT
---------------- */

.c3{
    right:0;
    top:90px;
}

.c4{
    right:0;
    top:10px;
}

/* ----------------
   RESPONSIVE
---------------- */

@media(max-width:991px){

.cxv-tower{
height:auto;
padding-bottom:40px;
}

.cxv-tower-arrows{
position:relative;
left:auto;
bottom:auto;
transform:none;
justify-content:center;
margin:50px auto;
}

.cxv-callout{
position:relative;
width:100%;
margin:20px auto;
left:auto;
right:auto;
top:auto;
}

}
/* Analytics Journey — light card with black text */
.premium-flat-light .curve-journey{
  background:#ffffff !important;
  border:1px solid rgba(17,17,20,.10) !important;
  color:#17181b !important;
  box-shadow:0 24px 70px rgba(17,17,20,.10) !important;
}

/* Main heading and all text */
.premium-flat-light .curve-journey .curve-copy h2{
  color:#17181b !important;
}

.premium-flat-light .curve-journey .curve-copy p,
.premium-flat-light .curve-journey .curve-copy .lead{
  color:#4f5560 !important;
}

/* Eyebrow */
.premium-flat-light .curve-journey .eyebrow{
  color:#e95b0c !important;
}

/* Floating cards/chips */
.premium-flat-light .curve-journey .chip-float{
  background:#ffffff !important;
  color:#17181b !important;
  border:1px solid rgba(17,17,20,.15) !important;
  box-shadow:0 10px 28px rgba(17,17,20,.10) !important;
  font-weight:700;
}

/* Keep orange journey line visible */
.premium-flat-light .curve-journey .curve-line{
  background:linear-gradient(
    90deg,
    rgba(255,132,36,.86),
    rgba(255,102,0,.95)
  ) !important;
}
/* =========================================================
   CLICKRONIX PROVIDER WORKFLOW FLOWER
   Unique classes prevent conflicts with old cxv ring styles
   ========================================================= */

.provider-workflow-section {
  position: relative;
  overflow: hidden;
  padding: 105px 0 100px;
  background:
    radial-gradient(
      circle at 50% 58%,
      rgba(255, 102, 0, 0.055),
      transparent 28%
    ),
    linear-gradient(180deg, #fff4ef 0%, #f4f4f2 100%);
  color: #15171b;
}

.provider-workflow-section::before,
.provider-workflow-section::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0.55;
}

.provider-workflow-section::before {
  top: -95px;
  right: -100px;
  width: 470px;
  height: 240px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.8),
    rgba(238, 238, 235, 0.15)
  );
  transform: rotate(-12deg);
}

.provider-workflow-section::after {
  left: -120px;
  bottom: -130px;
  width: 420px;
  height: 270px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.92),
    transparent 67%
  );
}

.provider-workflow-section > .container {
  position: relative;
  z-index: 2;
}

/* Heading */

.provider-workflow-heading {
  max-width: 920px;
  margin: 0 auto 35px;
  text-align: center;
}

.provider-workflow-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
  color: var(--orange, #ff5b0b);
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.provider-workflow-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 999px;
  background: var(--orange, #ff5b0b);
}

.provider-workflow-heading h2 {
  max-width: 850px;
  margin: 0 auto 14px;
  color: #101216 !important;
  font-size: clamp(2.35rem, 3.7vw, 4rem);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.055em;
}

.provider-workflow-heading p {
  max-width: 790px;
  margin: 0 auto;
  color: #626773 !important;
  font-size: 1rem;
  line-height: 1.75;
}

/* Main stage */

.provider-flower {
  position: relative;
  width: min(100%, 1040px);
  min-height: 590px;
  margin: 0 auto;
}

.provider-flower-visual {
  position: absolute;
  left: 50%;
  top: 49%;
  width: 460px;
  height: 460px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 28px 30px rgba(36, 27, 21, 0.09));
}

/* Orange petals */

.provider-petal {
  position: absolute;
  width: 215px;
  height: 215px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 35% 22%,
      rgba(255, 185, 129, 0.8),
      transparent 25%
    ),
    linear-gradient(145deg, #ff8a45 0%, #ff5b0b 58%, #e84605 100%);
  border: 3px solid rgba(255, 255, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 18px 34px rgba(255, 91, 11, 0.19);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.provider-petal::before {
  content: "";
  position: absolute;
  inset: 17px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: inherit;
}

.provider-petal-one {
  left: 10px;
  top: 10px;
  border-radius: 72% 43% 20% 48%;
  transform: rotate(1deg);
}

.provider-petal-two {
  right: 10px;
  top: 10px;
  border-radius: 43% 72% 48% 20%;
  transform: rotate(-1deg);
}

.provider-petal-three {
  left: 10px;
  bottom: 10px;
  border-radius: 48% 20% 43% 72%;
  transform: rotate(-1deg);
}

.provider-petal-four {
  right: 10px;
  bottom: 10px;
  border-radius: 20% 48% 72% 43%;
  transform: rotate(1deg);
}

.provider-petal:hover {
  z-index: 5;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 25px 48px rgba(255, 91, 11, 0.3);
}

.provider-petal-one:hover {
  transform: translate(-5px, -5px) rotate(1deg);
}

.provider-petal-two:hover {
  transform: translate(5px, -5px) rotate(-1deg);
}

.provider-petal-three:hover {
  transform: translate(-5px, 5px) rotate(-1deg);
}

.provider-petal-four:hover {
  transform: translate(5px, 5px) rotate(1deg);
}

/* White icon circles */

.provider-petal-icon {
  position: absolute;
  width: 122px;
  height: 122px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 26%, #ffffff, #f4f4f1 72%);
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 12px 25px rgba(53, 38, 27, 0.12),
    inset 0 0 0 1px rgba(17, 24, 39, 0.045);
}

.provider-petal-one .provider-petal-icon {
  left: 34px;
  top: 31px;
}

.provider-petal-two .provider-petal-icon {
  right: 34px;
  top: 31px;
}

.provider-petal-three .provider-petal-icon {
  left: 34px;
  bottom: 31px;
}

.provider-petal-four .provider-petal-icon {
  right: 34px;
  bottom: 31px;
}

.provider-petal-icon svg {
  width: 61px;
  height: 61px;
  overflow: visible;
  fill: none;
  stroke: var(--orange, #ff5b0b);
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Central hub */

.provider-flower-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  width: 174px;
  height: 174px;
  padding: 20px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-align: center;
  background:
    radial-gradient(circle at 36% 24%, #ffffff 0%, #f4f4f1 76%);
  border: 3px solid rgba(255, 255, 255, 0.96);
  box-shadow:
    0 22px 42px rgba(35, 28, 23, 0.17),
    inset 0 0 0 1px rgba(17, 24, 39, 0.05);
}

.provider-flower-core span {
  color: var(--orange, #ff5b0b);
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 800;
}

.provider-flower-core small {
  display: block;
  margin-top: 7px;
  color: #676c75;
  font-size: 0.72rem;
  line-height: 1.4;
}

/* Side labels */

.provider-label {
  position: absolute;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 12px;
}

.provider-label-copy {
  min-width: 155px;
}

.provider-label h3 {
  margin: 0 0 5px;
  color: var(--orange, #ff5b0b) !important;
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 800;
}

.provider-label p {
  margin: 0;
  color: #5e646e !important;
  font-size: 0.84rem;
  line-height: 1.4;
}

.provider-label-line {
  position: relative;
  display: block;
  width: 74px;
  height: 1px;
  border-top: 2px dotted rgba(255, 91, 11, 0.72);
}

.provider-label-line i {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid var(--orange, #ff5b0b);
  border-radius: 50%;
  background: #fff4ef;
  box-shadow: 0 0 0 4px rgba(255, 91, 11, 0.09);
  transform: translateY(-50%);
}

.provider-label-infrastructure {
  left: 30px;
  top: 160px;
  text-align: left;
}

.provider-label-infrastructure .provider-label-line i,
.provider-label-support .provider-label-line i {
  right: -2px;
}

.provider-label-security {
  right: 30px;
  top: 160px;
}

.provider-label-security .provider-label-line i,
.provider-label-payments .provider-label-line i {
  left: -2px;
}

.provider-label-support {
  left: 30px;
  bottom: 154px;
  text-align: left;
}

.provider-label-payments {
  right: 30px;
  bottom: 154px;
}

/* Additional supporting cards */

.provider-workflow-points {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  max-width: 1180px;
  margin: 4px auto 0;
}

.provider-workflow-points article {
  display: grid;
  grid-template-columns: 39px 1fr;
  gap: 13px;
  align-items: flex-start;
  min-height: 180px;
  padding: 23px 21px;
  border: 1px solid rgba(17, 24, 39, 0.085);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 15px 36px rgba(17, 24, 39, 0.055);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.provider-workflow-points article:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 91, 11, 0.28);
  box-shadow: 0 22px 46px rgba(17, 24, 39, 0.09);
}

.provider-workflow-points article > span {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #ff833e, #ff5b0b);
  font-size: 0.72rem;
  font-weight: 850;
  box-shadow: 0 8px 18px rgba(255, 91, 11, 0.21);
}

.provider-workflow-points h3 {
  margin: 2px 0 8px;
  color: #17191d !important;
  font-size: 0.98rem;
  line-height: 1.25;
}

.provider-workflow-points p {
  margin: 0;
  color: #676c75 !important;
  font-size: 0.82rem;
  line-height: 1.62;
}

/* Tablet */

@media (max-width: 1050px) {
  .provider-flower {
    min-height: 610px;
  }

  .provider-label-infrastructure,
  .provider-label-support {
    left: 0;
  }

  .provider-label-security,
  .provider-label-payments {
    right: 0;
  }

  .provider-label-line {
    width: 48px;
  }

  .provider-workflow-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .provider-workflow-points article {
    min-height: 155px;
  }
}

/* Mobile and small tablet */

@media (max-width: 800px) {
  .provider-workflow-section {
    padding: 78px 0 72px;
  }

  .provider-workflow-heading {
    margin-bottom: 42px;
  }

  .provider-workflow-heading h2 br {
    display: none;
  }

  .provider-flower {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 14px;
  }

  .provider-flower-visual {
    position: relative;
    left: auto;
    top: auto;
    width: 430px;
    height: 430px;
    max-width: 100%;
    margin: 0 auto 10px;
    transform: none;
  }

  .provider-petal {
    width: 201px;
    height: 201px;
  }

  .provider-petal-icon {
    width: 112px;
    height: 112px;
  }

  .provider-petal-icon svg {
    width: 55px;
    height: 55px;
  }

  .provider-flower-core {
    width: 162px;
    height: 162px;
  }

  .provider-label {
    position: relative;
    inset: auto !important;
    width: 100%;
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 13px;
    padding: 15px 17px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.69);
    text-align: left;
  }

  .provider-label::before {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(145deg, #ff833e, #ff5b0b);
    font-size: 0.72rem;
    font-weight: 850;
  }

  .provider-label-infrastructure::before {
    content: "01";
  }

  .provider-label-security::before {
    content: "02";
  }

  .provider-label-support::before {
    content: "03";
  }

  .provider-label-payments::before {
    content: "04";
  }

  .provider-label-copy {
    min-width: 0;
  }

  .provider-label-line {
    display: none;
  }

  .provider-label-security .provider-label-copy,
  .provider-label-payments .provider-label-copy {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Small phones */

@media (max-width: 520px) {
  .provider-workflow-section {
    padding: 66px 0 62px;
  }

  .provider-workflow-heading h2 {
    font-size: clamp(2rem, 10vw, 2.65rem);
    line-height: 1.03;
  }

  .provider-workflow-heading p {
    font-size: 0.92rem;
    line-height: 1.65;
  }

  .provider-flower-visual {
    width: 330px;
    height: 330px;
  }

  .provider-petal {
    width: 155px;
    height: 155px;
  }

  .provider-petal-one,
  .provider-petal-three {
    left: 5px;
  }

  .provider-petal-two,
  .provider-petal-four {
    right: 5px;
  }

  .provider-petal-one,
  .provider-petal-two {
    top: 5px;
  }

  .provider-petal-three,
  .provider-petal-four {
    bottom: 5px;
  }

  .provider-petal-icon {
    width: 84px;
    height: 84px;
  }

  .provider-petal-one .provider-petal-icon,
  .provider-petal-three .provider-petal-icon {
    left: 25px;
  }

  .provider-petal-two .provider-petal-icon,
  .provider-petal-four .provider-petal-icon {
    right: 25px;
  }

  .provider-petal-one .provider-petal-icon,
  .provider-petal-two .provider-petal-icon {
    top: 23px;
  }

  .provider-petal-three .provider-petal-icon,
  .provider-petal-four .provider-petal-icon {
    bottom: 23px;
  }

  .provider-petal-icon svg {
    width: 43px;
    height: 43px;
    stroke-width: 2.8;
  }

  .provider-flower-core {
    width: 126px;
    height: 126px;
    padding: 14px;
  }

  .provider-flower-core span {
    font-size: 0.89rem;
  }

  .provider-flower-core small {
    font-size: 0.62rem;
  }

  .provider-workflow-points {
    grid-template-columns: 1fr;
  }

  .provider-workflow-points article {
    min-height: 0;
  }
}

/* Motion accessibility */

@media (prefers-reduced-motion: reduce) {
  .provider-petal,
  .provider-workflow-points article {
    transition: none;
  }

  .provider-petal:hover,
  .provider-petal-one:hover,
  .provider-petal-two:hover,
  .provider-petal-three:hover,
  .provider-petal-four:hover,
  .provider-workflow-points article:hover {
    transform: none;
  }
}
/* Add breathing space below the header on inner pages only */
body:not(.home-page) .page-hero {
  padding-top: 200px;
}
/* =========================================================
   SOLUTIONS WORKFLOW ARROW — EQUAL SIZE + TEXT ALIGNMENT FIX
   ========================================================= */

.workflow-segment-chain {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch !important;
  gap: 26px;
  width: 100%;
  max-width: 1120px;
  min-height: 0 !important;
  margin: 0 auto;
  padding: 34px 0 20px !important;
}

/* Make every orange arrow exactly the same size */
.workflow-segment-chain .cxv-chain-step,
.workflow-segment-chain .cxv-chain-step:first-child {
  position: relative;
  width: 100% !important;
  min-width: 0;
  min-height: 230px !important;
  height: 100%;
  margin: 0 !important;
  padding: 28px 52px 28px 28px !important;

  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-start !important;

  text-align: left !important;
  overflow: hidden;

  background: linear-gradient(145deg, #ff8247 0%, #ff5b17 100%);
  clip-path: polygon(
    0 0,
    calc(100% - 28px) 0,
    100% 50%,
    calc(100% - 28px) 100%,
    0 100%,
    22px 50%
  );

  box-sizing: border-box;
}

/* First arrow should have a straight left edge */
.workflow-segment-chain .cxv-chain-step:first-child {
  padding-left: 28px !important;

  clip-path: polygon(
    0 0,
    calc(100% - 28px) 0,
    100% 50%,
    calc(100% - 28px) 100%,
    0 100%
  );
}

/* Other arrows need extra left space because of the inward notch */
.workflow-segment-chain .cxv-chain-step:not(:first-child) {
  padding-left: 43px !important;
}

/* Number */
.workflow-segment-chain .cxv-chain-step b {
  display: block;
  margin: 0 0 10px !important;
  color: #fff !important;
  font-size: 0.7rem;
  line-height: 1;
  font-weight: 800;
}

/* Title */
.workflow-segment-chain .cxv-chain-step h3 {
  width: 100%;
  margin: 0 0 9px !important;
  color: #fff !important;
  font-size: 1.03rem !important;
  line-height: 1.25;
  font-weight: 800;
  overflow-wrap: anywhere;
}

/* Paragraph stays inside the usable area of every shape */
.workflow-segment-chain .cxv-chain-step p {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.96) !important;
  font-size: 0.82rem !important;
  line-height: 1.55 !important;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* Large tablet */
@media (max-width: 1050px) {
  .workflow-segment-chain {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 760px;
  }

  .workflow-segment-chain .cxv-chain-step,
  .workflow-segment-chain .cxv-chain-step:first-child {
    min-height: 215px !important;
  }

  /* First card of each new row gets a straight left edge */
  .workflow-segment-chain .cxv-chain-step:nth-child(odd) {
    padding-left: 28px !important;

    clip-path: polygon(
      0 0,
      calc(100% - 28px) 0,
      100% 50%,
      calc(100% - 28px) 100%,
      0 100%
    );
  }

  .workflow-segment-chain .cxv-chain-step:nth-child(even) {
    padding-left: 43px !important;

    clip-path: polygon(
      0 0,
      calc(100% - 28px) 0,
      100% 50%,
      calc(100% - 28px) 100%,
      0 100%,
      22px 50%
    );
  }
}

/* Mobile */
@media (max-width: 680px) {
  .workflow-segment-chain {
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
    max-width: 440px;
    padding: 22px 0 10px !important;
  }

  .workflow-segment-chain .cxv-chain-step,
  .workflow-segment-chain .cxv-chain-step:first-child,
  .workflow-segment-chain .cxv-chain-step:nth-child(odd),
  .workflow-segment-chain .cxv-chain-step:nth-child(even) {
    width: 100% !important;
    min-height: 180px !important;
    margin: 0 !important;
    padding: 25px 46px 25px 25px !important;

    clip-path: polygon(
      0 0,
      calc(100% - 24px) 0,
      100% 50%,
      calc(100% - 24px) 100%,
      0 100%
    );
  }

  .workflow-segment-chain .cxv-chain-step h3 {
    font-size: 1rem !important;
  }

  .workflow-segment-chain .cxv-chain-step p {
    font-size: 0.84rem !important;
    line-height: 1.55 !important;
  }
}
/* =========================================================
   LEAD GENERATION — CALL AND FORM CAMPAIGN SECTION
   ========================================================= */

.lead-campaign-path-section {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  color: #fff;
  background:
    radial-gradient(
      circle at 86% 10%,
      rgba(255, 91, 11, 0.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 8% 92%,
      rgba(255, 91, 11, 0.08),
      transparent 27%
    ),
    #101011;
}

.lead-campaign-path-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 102, 0, 0.45),
    transparent
  );
}

.lead-campaign-path-section > .container {
  position: relative;
  z-index: 2;
}

/* Header */

.lead-campaign-path-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
  gap: 70px;
  align-items: end;
  max-width: 1120px;
  margin: 0 auto 46px;
}

.lead-campaign-path-head h2 {
  max-width: 560px;
  margin: 12px 0 0;
  color: #fff !important;
  font-size: clamp(2.4rem, 3.6vw, 4rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.045em;
}

.lead-campaign-path-head > p {
  max-width: 530px;
  margin: 0 0 8px;
  color: #d0d2d8 !important;
  font-size: 1rem;
  line-height: 1.75;
}

/* Main panels */

.lead-campaign-path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 1120px;
  margin: 0 auto;
}

.lead-campaign-panel {
  position: relative;
  min-height: 445px;
  padding: 40px 38px 38px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 28px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.015)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 24px 60px rgba(0, 0, 0, 0.18);
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.lead-campaign-panel:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 102, 0, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 30px 75px rgba(0, 0, 0, 0.26);
}

.lead-campaign-number {
  position: absolute;
  top: 30px;
  right: 32px;
  color: rgba(255, 255, 255, 0.17);
  font-size: 3rem;
  line-height: 1;
  font-weight: 850;
}

.lead-campaign-panel h3 {
  margin: 0 0 14px;
  padding-right: 70px;
  color: #fff !important;
  font-size: 1.45rem;
  line-height: 1.25;
}

.lead-campaign-intro {
  max-width: 480px;
  margin: 0 0 24px;
  color: #bfc2ca !important;
  font-size: 0.93rem;
  line-height: 1.7;
}

.lead-campaign-panel ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lead-campaign-panel li {
  position: relative;
  padding: 14px 0 14px 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
  color: #e1e3e8 !important;
  font-size: 0.92rem;
  line-height: 1.55;
}

.lead-campaign-panel li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 14px;
  color: var(--orange, #ff5b0b);
  font-weight: 850;
}

/* Evidence strip */

.lead-campaign-evidence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  max-width: 1120px;
  margin: 22px auto 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.09);
}

.lead-campaign-evidence > div {
  min-height: 135px;
  padding: 25px 26px;
  background: #151517;
}

.lead-campaign-evidence span {
  display: block;
  margin-bottom: 9px;
  color: var(--orange, #ff5b0b);
  font-size: 0.71rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lead-campaign-evidence strong {
  display: block;
  color: #f3f3f5;
  font-size: 0.94rem;
  line-height: 1.55;
  font-weight: 650;
}

/* Improve the existing quadrant content */

.cx-infographic-circle-quadrant .cxv-q-label {
  width: 275px;
}

.cx-infographic-circle-quadrant .cxv-q-label b {
  font-size: 0.92rem;
  line-height: 1.3;
}

.cx-infographic-circle-quadrant .cxv-q-label p {
  max-width: 255px;
  margin-top: 8px;
  color: #626873 !important;
  font-size: 0.79rem;
  line-height: 1.55;
}

.cx-infographic-circle-quadrant .cxv-q-label.q2,
.cx-infographic-circle-quadrant .cxv-q-label.q3 {
  text-align: right;
}

.cx-infographic-circle-quadrant .cxv-quadrant {
  min-height: 525px;
}

/* Tablet */

@media (max-width: 980px) {
  .lead-campaign-path-head {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .lead-campaign-path-head h2 br {
    display: none;
  }

  .lead-campaign-path-head > p {
    max-width: 720px;
  }

  .lead-campaign-path-grid {
    grid-template-columns: 1fr;
  }

  .lead-campaign-panel {
    min-height: 0;
  }

  .lead-campaign-evidence {
    grid-template-columns: 1fr;
    gap: 1px;
  }

  .lead-campaign-evidence > div {
    min-height: 0;
  }
}

/* Existing infographic mobile layout */

@media (max-width: 760px) {
  .cx-infographic-circle-quadrant .cxv-quadrant {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    min-height: 0;
  }

  .cx-infographic-circle-quadrant .cxv-q-circle {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: 0 auto 24px;
  }

  .cx-infographic-circle-quadrant .cxv-q-label,
  .cx-infographic-circle-quadrant .cxv-q-label.q1,
  .cx-infographic-circle-quadrant .cxv-q-label.q2,
  .cx-infographic-circle-quadrant .cxv-q-label.q3,
  .cx-infographic-circle-quadrant .cxv-q-label.q4 {
    position: relative;
    inset: auto;
    width: 100%;
    padding: 19px 20px;
    border: 1px solid rgba(17, 24, 39, 0.085);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    text-align: left;
  }

  .cx-infographic-circle-quadrant .cxv-q-label p {
    max-width: none;
  }
}

/* Phone */

@media (max-width: 600px) {
  .lead-campaign-path-section {
    padding: 72px 0;
  }

  .lead-campaign-path-head {
    margin-bottom: 32px;
  }

  .lead-campaign-path-head h2 {
    font-size: clamp(2.65rem, 13vw, 4rem);
    line-height: 1;
  }

  .lead-campaign-path-head > p {
    font-size: 0.93rem;
    line-height: 1.65;
  }

  .lead-campaign-panel {
    padding: 30px 24px 26px;
    border-radius: 22px;
  }

  .lead-campaign-number {
    top: 25px;
    right: 23px;
    font-size: 2.3rem;
  }

  .lead-campaign-panel h3 {
    font-size: 1.25rem;
  }

  .lead-campaign-intro {
    font-size: 0.9rem;
  }

  .lead-campaign-panel li {
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 0.88rem;
  }

  .lead-campaign-panel li::before {
    top: 12px;
  }

  .lead-campaign-evidence > div {
    padding: 22px;
  }

  .cx-infographic-circle-quadrant .cxv-q-circle {
    width: 270px;
    height: 270px;
  }

  .cx-infographic-circle-quadrant .cxv-q-circle strong {
    width: 105px;
    height: 105px;
    font-size: 0.88rem;
  }
}

/* =========================================================
   TRUST CENTER — FINAL ORANGE WAVE TIMELINE
   Clean replacement for all previous trust-timeline rules
   ========================================================= */

.trust-timeline-section {
  position: relative;
  overflow: hidden;
  padding: 96px 0 104px;
  color: #17181b;
  background:
    radial-gradient(circle at 82% 10%, rgba(255, 102, 0, 0.07), transparent 27%),
    radial-gradient(circle at 10% 90%, rgba(255, 102, 0, 0.045), transparent 25%),
    linear-gradient(180deg, #f7f7f6 0%, #efefed 100%);
}

.trust-timeline-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.52;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), transparent 35%),
    linear-gradient(315deg, rgba(255, 255, 255, 0.38), transparent 30%);
}

.trust-timeline-section > .container {
  position: relative;
  z-index: 1;
}

.trust-timeline-head {
  max-width: 880px;
  margin: 0 auto 54px;
  text-align: center;
}

.trust-timeline-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.trust-timeline-head .eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 999px;
  background: var(--orange, #ff5b0b);
}

.trust-timeline-head h2 {
  max-width: 800px;
  margin: 0 auto 16px;
  color: #101216 !important;
  font-size: clamp(2.35rem, 3.8vw, 4rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.05em;
}

.trust-timeline-head p {
  max-width: 760px;
  margin: 0 auto;
  color: #656b76 !important;
  font-size: 1rem;
  line-height: 1.72;
}

.trust-timeline-visual {
  position: relative;
  width: min(100%, 1180px);
  height: 430px;
  min-height: 430px;
  margin: 0 auto;
  overflow: visible;
}

/* Curved line sits behind the circles only */
.trust-wave-line {
  position: absolute;
  left: 6%;
  right: 3%;
  top: 148px;
  z-index: 3;
  width: 90%;
  height: 0px;
  pointer-events: none;
}

.trust-wave-line svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.trust-wave-line path {
  fill: none;
  stroke: #ced0d5;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9));
}

/* One fixed-width timeline item at each wave position */
.trust-step {
  position: absolute;
  top: 0;
  z-index: 3;
  width: 190px;
  height: 410px;
  text-align: center;
}

.trust-step-1 { left: 8%; transform: translateX(-50%); }
.trust-step-2 { left: 29%; transform: translateX(-50%); }
.trust-step-3 { left: 50%; transform: translateX(-50%); }
.trust-step-4 { left: 71%; transform: translateX(-50%); }
.trust-step-5 { left: 92%; transform: translateX(-50%); }

/* All orange circles are identical and locked to one baseline */
.trust-step-dot {
  position: absolute;
  left: 50%;
  top: 148px;
  z-index: 5;
  width: 104px;
  height: 104px;
  margin: 0;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 34% 25%, #ff9a5d 0%, #ff6a18 46%, #f24e00 100%);
  box-shadow:
    0 16px 32px rgba(255, 91, 11, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  font-size: 1rem;
  line-height: 1;
  font-weight: 850;
}

.trust-step-year,
.trust-step h3,
.trust-step p {
  position: relative;
  z-index: 6;
  display: block;
  width: 100%;
  max-width: 190px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.trust-step-year {
  margin-bottom: 7px !important;
  color: var(--orange, #ff5b0b) !important;
  font-size: 0.68rem;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.trust-step h3 {
  margin-top: 0 !important;
  margin-bottom: 7px !important;
  color: #15171b !important;
  font-size: 0.9rem !important;
  line-height: 1.25;
  font-weight: 800;
}

.trust-step p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  color: #707681 !important;
  font-size: 0.73rem !important;
  line-height: 1.52 !important;
}

/* Top labels: text above circle */
.trust-step-1,
.trust-step-3,
.trust-step-5 {
  padding-top: 0;
}

.trust-step-1 .trust-step-year,
.trust-step-3 .trust-step-year,
.trust-step-5 .trust-step-year {
  margin-top: 0 !important;
}

/* Bottom labels: text below circle */
.trust-step-2,
.trust-step-4 {
  padding-top: 278px;
}

.trust-step-2 .trust-step-year,
.trust-step-4 .trust-step-year {
  margin-top: 0 !important;
}

/* Small connector line and dot, never crossing the text */
.trust-step::before,
.trust-step::after {
  content: "";
  position: absolute;
  left: 50%;
  z-index: 4;
  transform: translateX(-50%);
  pointer-events: none;
}

.trust-step-1::before,
.trust-step-3::before,
.trust-step-5::before {
  top: 126px;
  width: 2px;
  height: 22px;
  background: rgba(255, 102, 0, 0.44);
}

.trust-step-1::after,
.trust-step-3::after,
.trust-step-5::after {
  top: 118px;
  width: 11px;
  height: 11px;
  border: 2px solid rgba(255, 102, 0, 0.48);
  border-radius: 50%;
  background: #f6f6f4;
  box-shadow: 0 0 0 5px rgba(255, 102, 0, 0.06);
}

.trust-step-2::before,
.trust-step-4::before {
  top: 252px;
  width: 2px;
  height: 22px;
  background: rgba(255, 102, 0, 0.44);
}

.trust-step-2::after,
.trust-step-4::after {
  top: 270px;
  width: 11px;
  height: 11px;
  border: 2px solid rgba(255, 102, 0, 0.48);
  border-radius: 50%;
  background: #f6f6f4;
  box-shadow: 0 0 0 5px rgba(255, 102, 0, 0.06);
}

/* Tablet: convert the timeline to equal clean cards */
@media (max-width: 1180px) {
  .trust-timeline-visual {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    height: auto;
    min-height: 0;
  }

  .trust-wave-line {
    display: none;
  }

  .trust-step,
  .trust-step-1,
  .trust-step-2,
  .trust-step-3,
  .trust-step-4,
  .trust-step-5 {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 300px;
    padding: 26px 20px;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 16px 38px rgba(17, 24, 39, 0.06);
  }

  .trust-step::before,
  .trust-step::after {
    display: none;
  }

  .trust-step-dot {
    position: relative;
    inset: auto;
    order: 1;
    width: 90px;
    height: 90px;
    flex: 0 0 90px;
    margin: 0 auto 18px;
    transform: none;
  }

  .trust-step-year {
    order: 2;
    margin: 0 0 7px !important;
  }

  .trust-step h3 {
    order: 3;
  }

  .trust-step p {
    order: 4;
  }
}

@media (max-width: 820px) {
  .trust-timeline-section {
    padding: 76px 0 80px;
  }

  .trust-timeline-head {
    margin-bottom: 38px;
  }

  .trust-timeline-head h2 {
    font-size: clamp(2.1rem, 8vw, 3rem);
    line-height: 1.03;
  }

  .trust-timeline-visual {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .trust-timeline-visual {
    grid-template-columns: 1fr;
  }

  .trust-step,
  .trust-step-1,
  .trust-step-2,
  .trust-step-3,
  .trust-step-4,
  .trust-step-5 {
    min-height: 0;
    padding: 24px 18px 22px;
  }

  .trust-step h3 {
    font-size: 0.96rem !important;
  }

  .trust-step p {
    font-size: 0.8rem !important;
  }
}
/* =========================================================
   GOOGLE ADS PRIORITY — REFERENCE BAR CHART
   ========================================================= */

.google-priority-chart-section {
  position: relative;
  overflow: hidden;
  padding: 105px 0;
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(255, 91, 11, 0.055),
      transparent 28%
    ),
    #f3f1ed;
  color: #15171b;
}

.google-priority-chart-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.25;
  background-image:
    radial-gradient(rgba(17, 24, 39, 0.15) 0.6px, transparent 0.6px);
  background-size: 5px 5px;
}

.google-priority-chart-section > .container {
  position: relative;
  z-index: 2;
}

.google-priority-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.65fr) minmax(0, 1.65fr);
  gap: 70px;
  align-items: stretch;
  max-width: 1240px;
  margin: 0 auto;
}

/* Left editorial copy */

.google-priority-copy {
  position: relative;
  padding: 8px 0 28px;
}

.google-chart-index {
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 25px;
  margin-bottom: 22px;
  border: 1px solid rgba(17, 24, 39, 0.32);
  border-radius: 50%;
  color: #17181b;
  font-size: 0.65rem;
  font-weight: 850;
}

.google-priority-copy .eyebrow {
  display: flex;
  margin-bottom: 13px;
}

.google-priority-copy h2 {
  max-width: 420px;
  margin: 0 0 22px;
  color: #17181b !important;
  font-size: clamp(1rem, 3.2vw, 2.45rem);
  line-height: 1;
  font-weight: 780;
  letter-spacing: -0.045em;
}

.google-priority-copy p {
  max-width: 350px;
  margin: 0 0 20px;
  color: #50555e !important;
  font-size: 0.96rem;
  line-height: 1.68;
}

.google-priority-copy small {
  display: block;
  max-width: 345px;
  color: #858991;
  font-size: 0.7rem;
  line-height: 1.5;
}

/* Chart side */

.google-priority-chart {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.google-chart-legend {
  display: flex;
  justify-content: flex-start;
  gap: 28px;
  margin-bottom: 30px;
  color: #33373e;
  font-size: 0.75rem;
  font-weight: 700;
}

.google-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.google-chart-legend i {
  width: 8px;
  height: 8px;
  display: block;
  border-radius: 50%;
}

.google-chart-legend .legend-orange {
  background: #f1540c;
}

.google-chart-legend .legend-black {
  background: #17181b;
}

.google-chart-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 42px;
  align-items: end;
  min-height: 390px;
}

.google-chart-group {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  justify-content: flex-end;
}

.google-chart-bars {
  display: grid;
  grid-template-columns: repeat(2, minmax(45px, 1fr));
  gap: 10px;
  align-items: end;
  height: 275px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.28);
}

.google-chart-bar {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: flex-end;
}

.google-chart-bar strong {
  display: block;
  margin-bottom: 7px;
  color: #17181b;
  font-size: clamp(1.45rem, 2.1vw, 2.35rem);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.045em;
}

.google-chart-bar span {
  position: relative;
  display: block;
  width: 100%;
  height: var(--bar-height);
  min-height: 50px;
  overflow: hidden;
}

/* Orange blurred bar */

.google-chart-bar.orange-bar span {
  background:
    linear-gradient(
      180deg,
      #ff5a12 0%,
      #f1540c 52%,
      rgba(241, 84, 12, 0.2) 100%
    );
  box-shadow:
    0 -18px 35px rgba(255, 91, 11, 0.18),
    0 25px 40px rgba(255, 91, 11, 0.12);
}

.google-chart-bar.orange-bar span::before {
  content: "";
  position: absolute;
  inset: -10px -16px auto;
  height: 75px;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 129, 72, 0.95),
    rgba(255, 86, 18, 0.5) 42%,
    transparent 73%
  );
  filter: blur(9px);
}

/* Black blurred bar */

.google-chart-bar.black-bar span {
  background:
    linear-gradient(
      180deg,
      #17181b 0%,
      #292a2e 52%,
      rgba(23, 24, 27, 0.15) 100%
    );
  box-shadow:
    0 -15px 32px rgba(17, 24, 39, 0.14),
    0 22px 36px rgba(17, 24, 39, 0.12);
}

.google-chart-bar.black-bar span::before {
  content: "";
  position: absolute;
  inset: -10px -16px auto;
  height: 70px;
  background: radial-gradient(
    ellipse at center,
    rgba(67, 68, 72, 0.88),
    rgba(20, 21, 24, 0.5) 45%,
    transparent 73%
  );
  filter: blur(9px);
}

.google-chart-group h3 {
  margin: 18px 0 7px;
  color: #17181b !important;
  font-size: 0.91rem;
  line-height: 1.3;
  text-align: center;
}

.google-chart-group p {
  max-width: 230px;
  margin: 0 auto;
  color: #696e77 !important;
  font-size: 0.72rem;
  line-height: 1.48;
  text-align: center;
}

/* =========================================================
   GOOGLE ADS — ORANGE BLACK ANALYSIS SECTION
   ========================================================= */

.google-traffic-analysis-section {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  color: #fff;
  background:
    radial-gradient(
      ellipse at 74% 8%,
      rgba(255, 77, 0, 0.9),
      rgba(202, 48, 0, 0.42) 27%,
      transparent 58%
    ),
    radial-gradient(
      ellipse at 54% 100%,
      rgba(255, 85, 0, 0.65),
      transparent 42%
    ),
    linear-gradient(120deg, #111114 0%, #1b1110 48%, #110d0e 100%);
}

.google-traffic-analysis-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      108deg,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.22) 44%,
      rgba(255, 81, 0, 0.08) 70%,
      rgba(0, 0, 0, 0.46) 100%
    );
}

.google-traffic-analysis-section::after {
  content: "";
  position: absolute;
  left: 46%;
  top: -32%;
  width: 42%;
  height: 180%;
  transform: rotate(12deg);
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 89, 17, 0.22),
    rgba(255, 112, 43, 0.08),
    transparent
  );
  filter: blur(20px);
}

.google-traffic-analysis-section > .container {
  position: relative;
  z-index: 2;
}

.google-traffic-analysis-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  gap: 80px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}

.google-analysis-heading {
  align-self: start;
}

.google-analysis-number {
  display: block;
  margin-bottom: 50px;
  color: #fff;
  font-size: 0.78rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.google-analysis-heading .eyebrow {
  color: #ff7431;
}

.google-analysis-heading h2 {
  max-width: 520px;
  margin: 16px 0 20px;
  color: #fff !important;
  font-size: clamp(2rem, 3.3vw, 2.55rem);
  line-height: 1.02;
  font-weight: 760;
  letter-spacing: -0.045em;
}

.google-analysis-heading p {
  max-width: 430px;
  margin: 0;
  color: #dadbe0 !important;
  font-size: 0.96rem;
  line-height: 1.72;
}

/* Four-area matrix */

.google-analysis-matrix {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.google-analysis-matrix::before,
.google-analysis-matrix::after {
  content: "";
  position: absolute;
  z-index: 3;
  background: rgba(255, 255, 255, 0.38);
}

.google-analysis-matrix::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
}

.google-analysis-matrix::after {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
}

.google-analysis-cell {
  position: relative;
  min-height: 245px;
  padding: 30px 34px;
}

.google-analysis-cell > span {
  display: block;
  margin-bottom: 20px;
  color: #ff8545;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.google-analysis-cell h3 {
  margin: 0 0 18px;
  color: #fff !important;
  font-size: 1.25rem;
  line-height: 1.25;
}

.google-analysis-cell ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.google-analysis-cell li {
  position: relative;
  padding-left: 15px;
  color: #e2e3e7 !important;
  font-size: 0.82rem;
  line-height: 1.48;
}

.google-analysis-cell li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.63em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff6a19;
}

/* Evidence row */

.google-analysis-evidence {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  max-width: 1180px;
  margin: 70px auto 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.12);
}

.google-analysis-evidence article {
  min-height: 140px;
  padding: 24px;
  background: rgba(12, 12, 15, 0.72);
  backdrop-filter: blur(10px);
}

.google-analysis-evidence span {
  display: block;
  margin-bottom: 11px;
  color: #ff7840;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.google-analysis-evidence strong {
  display: block;
  color: #f4f4f5;
  font-size: 0.88rem;
  line-height: 1.55;
  font-weight: 650;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {
  .google-priority-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .google-priority-copy h2,
  .google-priority-copy p,
  .google-priority-copy small {
    max-width: 760px;
  }

  .google-priority-copy h2 {
    line-height: 0.98;
  }

  .google-traffic-analysis-layout {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .google-analysis-heading h2,
  .google-analysis-heading p {
    max-width: 760px;
  }

  .google-analysis-number {
    margin-bottom: 25px;
  }

  .google-analysis-evidence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .google-priority-chart-section,
  .google-traffic-analysis-section {
    padding: 76px 0;
  }

  .google-chart-groups {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .google-chart-group {
    max-width: 350px;
    width: 100%;
    margin: 0 auto;
  }

  .google-chart-bars {
    height: 240px;
  }

  .google-chart-legend {
    flex-wrap: wrap;
  }

  .google-analysis-matrix {
    grid-template-columns: 1fr;
  }

  .google-analysis-matrix::before,
  .google-analysis-matrix::after {
    display: none;
  }

  .google-analysis-cell {
    min-height: 0;
    padding: 28px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }

  .google-analysis-cell:last-child {
    border-bottom: 0;
  }

  .google-analysis-evidence {
    grid-template-columns: 1fr;
    margin-top: 45px;
  }

  .google-analysis-evidence article {
    min-height: 0;
  }
}

@media (max-width: 480px) {
  .google-priority-copy h2,
  .google-analysis-heading h2 {
    font-size: clamp(2.35rem, 12vw, 3.25rem);
  }

  .google-chart-bars {
    padding-inline: 30px;
  }
}
/* =========================================================
   GOOGLE ADS — REFERENCE HONEYCOMB WORKFLOW
   ========================================================= */

.google-risk-honeycomb-section {
  position: relative;
  overflow: hidden;
  padding: 100px 0 110px;
  color: #17181b;
  background:
    radial-gradient(
      circle at 50% 54%,
      rgba(255, 82, 44, 0.08),
      transparent 30%
    ),
    linear-gradient(180deg, #f9f8f6 0%, #f0efec 100%);
}

.google-risk-honeycomb-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.25;
  background-image:
    radial-gradient(rgba(17, 24, 39, 0.14) 0.6px, transparent 0.6px);
  background-size: 5px 5px;
}

.google-risk-honeycomb-section::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  top: 38%;
  height: 110px;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(17, 24, 39, 0.045),
    transparent
  );
  transform: rotate(-7deg);
}

.google-risk-honeycomb-section > .container {
  position: relative;
  z-index: 2;
}

/* Heading */

.google-risk-heading {
  max-width: 880px;
  margin: 0 auto 58px;
  text-align: center;
}

.google-risk-heading h2 {
  max-width: 780px;
  margin: 12px auto 15px;
  color: #101216 !important;
  font-size: clamp(2.2rem, 3.5vw, 2.65rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.05em;
}

.google-risk-heading p {
  max-width: 720px;
  margin: 0 auto;
  color: #626873 !important;
  font-size: 0.98rem;
  line-height: 1.68;
}

/* Main layout */

.google-risk-honeycomb {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(220px, 0.8fr)
    minmax(450px, 1.35fr)
    minmax(220px, 0.8fr);
  grid-template-rows: repeat(2, minmax(180px, auto));
  column-gap: 56px;
  row-gap: 36px;
  align-items: center;
  max-width: 1160px;
  min-height: 520px;
  margin: 0 auto;
}

/* Side content */

.google-risk-copy {
  position: relative;
  max-width: 260px;
}

.google-risk-copy span {
  display: block;
  margin-bottom: 8px;
  color: #ef5844;
  font-size: 0.7rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.13em;
}

.google-risk-copy h3 {
  margin: 0 0 9px;
  color: #ef5844 !important;
  font-size: 1rem;
  line-height: 1.25;
}

.google-risk-copy p {
  margin: 0;
  color: #6b7079 !important;
  font-size: 0.8rem;
  line-height: 1.55;
}

/* Connector line */

.google-risk-copy i {
  position: absolute;
  top: 34px;
  display: block;
  width: 74px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(239, 88, 68, 0.15),
    rgba(239, 88, 68, 0.8)
  );
}

.google-risk-copy i::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border: 2px solid #ef5844;
  border-radius: 50%;
  background: #f4f3f0;
  transform: translateY(-50%);
  box-shadow: 0 0 0 4px rgba(239, 88, 68, 0.08);
}

/* Left copy */

.google-risk-copy-1,
.google-risk-copy-3 {
  justify-self: end;
  text-align: right;
}

.google-risk-copy-1 i,
.google-risk-copy-3 i {
  left: calc(100% + 18px);
}

.google-risk-copy-1 i::after,
.google-risk-copy-3 i::after {
  right: -3px;
}

/* Right copy */

.google-risk-copy-2,
.google-risk-copy-4 {
  justify-self: start;
  text-align: left;
}

.google-risk-copy-2 i,
.google-risk-copy-4 i {
  right: calc(100% + 18px);
  transform: rotate(180deg);
}

.google-risk-copy-2 i::after,
.google-risk-copy-4 i::after {
  right: -3px;
}

/* Grid positions */

.google-risk-copy-1 {
  grid-column: 1;
  grid-row: 1;
}

.google-risk-copy-2 {
  grid-column: 3;
  grid-row: 1;
}

.google-risk-copy-3 {
  grid-column: 1;
  grid-row: 2;
}

.google-risk-copy-4 {
  grid-column: 3;
  grid-row: 2;
}

/* Honeycomb visual */

.google-risk-visual {
  position: relative;
  grid-column: 2;
  grid-row: 1 / 3;
  width: 500px;
  height: 430px;
  max-width: 100%;
  margin: 0 auto;
  filter: drop-shadow(0 20px 30px rgba(239, 88, 68, 0.13));
}

/* Shared hex */

.google-risk-hex {
  position: absolute;
  width: 178px;
  height: 158px;
  padding: 24px 21px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  clip-path: polygon(
    25% 5%,
    75% 5%,
    100% 50%,
    75% 95%,
    25% 95%,
    0 50%
  );
  text-align: center;
  background:
    radial-gradient(
      circle at 35% 23%,
      rgba(255, 155, 143, 0.75),
      transparent 27%
    ),
    linear-gradient(145deg, #ff776d 0%, #ef5844 62%, #d93e34 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 16px 28px rgba(239, 88, 68, 0.18);
}

.google-risk-hex::before {
  content: "";
  position: absolute;
  inset: 7px;
  clip-path: inherit;
  border: 1px solid rgba(255, 255, 255, 0.17);
  pointer-events: none;
}

.google-risk-hex strong {
  position: relative;
  z-index: 2;
  margin-top: 8px;
  color: #fff;
  font-size: 0.88rem;
  line-height: 1.2;
}

.google-risk-hex small {
  position: relative;
  z-index: 2;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.83);
  font-size: 0.67rem;
  line-height: 1.35;
}

/* Icon */

.google-risk-icon {
  position: relative;
  z-index: 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.26);
}

.google-risk-icon svg,
.google-risk-core-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Exact honeycomb positions */

.google-risk-hex-1 {
  left: 58px;
  top: 24px;
}

.google-risk-hex-2 {
  right: 58px;
  top: 24px;
}

.google-risk-hex-3 {
  left: 58px;
  bottom: 24px;
}

.google-risk-hex-4 {
  right: 58px;
  bottom: 24px;
}

/* Center node */

.google-risk-hex-core {
  left: 50%;
  top: 50%;
  z-index: 8;
  width: 158px;
  height: 142px;
  padding: 23px 18px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(
      circle at 38% 25%,
      rgba(255, 171, 158, 0.84),
      transparent 26%
    ),
    linear-gradient(145deg, #ff8478 0%, #ee5544 60%, #d63830 100%);
  box-shadow:
    0 20px 38px rgba(239, 88, 68, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.google-risk-core-icon {
  position: relative;
  z-index: 2;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 20px rgba(98, 25, 20, 0.2);
}

.google-risk-core-icon svg {
  stroke: #ef5844;
}

.google-risk-hex-core strong {
  font-size: 0.95rem;
}

.google-risk-hex-core small {
  font-size: 0.66rem;
}

/* Fine connecting details */

.google-risk-visual::before,
.google-risk-visual::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  background: rgba(239, 88, 68, 0.4);
  transform: translate(-50%, -50%);
}

.google-risk-visual::before {
  width: 230px;
  height: 1px;
}

.google-risk-visual::after {
  width: 1px;
  height: 190px;
}

/* Responsive */

@media (max-width: 1050px) {
  .google-risk-honeycomb {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 20px;
    min-height: 0;
  }

  .google-risk-visual {
    grid-column: 1 / -1;
    grid-row: auto;
    order: -1;
    margin-bottom: 30px;
  }

  .google-risk-copy,
  .google-risk-copy-1,
  .google-risk-copy-2,
  .google-risk-copy-3,
  .google-risk-copy-4 {
    grid-column: auto;
    grid-row: auto;
    justify-self: stretch;
    max-width: none;
    padding: 22px;
    border: 1px solid rgba(239, 88, 68, 0.14);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.68);
    text-align: left;
  }

  .google-risk-copy i {
    display: none;
  }
}

@media (max-width: 700px) {
  .google-risk-honeycomb-section {
    padding: 72px 0;
  }

  .google-risk-heading {
    margin-bottom: 38px;
  }

  .google-risk-heading h2 {
    font-size: clamp(2rem, 10vw, 2.8rem);
    line-height: 1.03;
  }

  .google-risk-honeycomb {
    grid-template-columns: 1fr;
  }

  .google-risk-visual {
    width: 360px;
    height: 325px;
    transform: scale(0.9);
    transform-origin: center top;
    margin-bottom: -10px;
  }

  .google-risk-hex {
    width: 132px;
    height: 118px;
    padding: 17px 14px;
  }

  .google-risk-hex-1 {
    left: 34px;
    top: 12px;
  }

  .google-risk-hex-2 {
    right: 34px;
    top: 12px;
  }

  .google-risk-hex-3 {
    left: 34px;
    bottom: 12px;
  }

  .google-risk-hex-4 {
    right: 34px;
    bottom: 12px;
  }

  .google-risk-hex-core {
    width: 120px;
    height: 108px;
  }

  .google-risk-icon {
    width: 38px;
    height: 38px;
  }

  .google-risk-icon svg {
    width: 22px;
    height: 22px;
  }

  .google-risk-core-icon {
    width: 42px;
    height: 42px;
  }

  .google-risk-core-icon svg {
    width: 24px;
    height: 24px;
  }

  .google-risk-hex strong {
    font-size: 0.75rem;
  }

  .google-risk-hex small {
    font-size: 0.58rem;
  }
}

@media (max-width: 420px) {
  .google-risk-visual {
    width: 320px;
    transform: scale(0.84);
    margin-left: -3px;
    margin-bottom: -35px;
  }
}
/* =========================================================
   GOOGLE RISK HONEYCOMB — ORANGE COLOR + CENTER SPACING FIX
   ========================================================= */

.google-risk-honeycomb-section {
  --risk-orange: #f8560f;
  --risk-orange-light: #ff7b3f;
  --risk-orange-dark: #d94200;
}

/* Give the central visual a little more breathing room */
.google-risk-visual {
  width: 520px !important;
  height: 450px !important;
}

/* All outer hexagons use Clickronix orange */
.google-risk-hex:not(.google-risk-hex-core) {
  width: 170px !important;
  height: 150px !important;

  background:
    radial-gradient(
      circle at 34% 22%,
      rgba(255, 169, 119, 0.72),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      var(--risk-orange-light) 0%,
      var(--risk-orange) 58%,
      var(--risk-orange-dark) 100%
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 16px 30px rgba(248, 86, 15, 0.2) !important;
}

/* Add real space between left and right shapes */
.google-risk-hex-1 {
  left: 42px !important;
  top: 28px !important;
}

.google-risk-hex-2 {
  right: 42px !important;
  top: 28px !important;
}

.google-risk-hex-3 {
  left: 42px !important;
  bottom: 28px !important;
}

.google-risk-hex-4 {
  right: 42px !important;
  bottom: 28px !important;
}

/* Smaller center node creates visible gaps on every side */
.google-risk-hex-core {
  width: 136px !important;
  height: 122px !important;
  padding: 18px 14px !important;

  background:
    radial-gradient(
      circle at 36% 23%,
      rgba(255, 177, 127, 0.84),
      transparent 27%
    ),
    linear-gradient(
      145deg,
      #ff8248 0%,
      var(--risk-orange) 58%,
      var(--risk-orange-dark) 100%
    ) !important;

  box-shadow:
    0 18px 34px rgba(248, 86, 15, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

/* Slightly smaller center icon */
.google-risk-core-icon {
  width: 46px !important;
  height: 46px !important;
}

.google-risk-core-icon svg {
  width: 25px !important;
  height: 25px !important;
  stroke: var(--risk-orange) !important;
}

/* Orange accents throughout */
.google-risk-copy span,
.google-risk-copy h3 {
  color: var(--risk-orange) !important;
}

.google-risk-copy i {
  background: linear-gradient(
    90deg,
    rgba(248, 86, 15, 0.12),
    rgba(248, 86, 15, 0.82)
  ) !important;
}

.google-risk-copy i::after {
  border-color: var(--risk-orange) !important;
  box-shadow: 0 0 0 4px rgba(248, 86, 15, 0.1) !important;
}

.google-risk-visual::before,
.google-risk-visual::after {
  background: rgba(248, 86, 15, 0.28) !important;
}

/* Keep internal lines shorter so they do not visually fill the gaps */
.google-risk-visual::before {
  width: 185px !important;
}

.google-risk-visual::after {
  height: 155px !important;
}

/* Improve separation between the orange shapes */
.google-risk-hex {
  filter: drop-shadow(0 10px 12px rgba(248, 86, 15, 0.08));
}

/* Tablet */
@media (max-width: 1050px) {
  .google-risk-visual {
    width: 500px !important;
    height: 440px !important;
  }
}

/* Mobile */
@media (max-width: 700px) {
  .google-risk-visual {
    width: 360px !important;
    height: 335px !important;
  }

  .google-risk-hex:not(.google-risk-hex-core) {
    width: 124px !important;
    height: 110px !important;
  }

  .google-risk-hex-1 {
    left: 24px !important;
    top: 14px !important;
  }

  .google-risk-hex-2 {
    right: 24px !important;
    top: 14px !important;
  }

  .google-risk-hex-3 {
    left: 24px !important;
    bottom: 14px !important;
  }

  .google-risk-hex-4 {
    right: 24px !important;
    bottom: 14px !important;
  }

  .google-risk-hex-core {
    width: 104px !important;
    height: 94px !important;
  }

  .google-risk-core-icon {
    width: 38px !important;
    height: 38px !important;
  }
}
/* =========================================================
   CENTER RISK HEX — BLACK + TEXT INSIDE FIX
   ========================================================= */

.google-risk-hex-core {
  width: 150px !important;
  height: 136px !important;
  padding: 16px 18px !important;

  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  background:
    radial-gradient(
      circle at 35% 22%,
      rgba(255, 255, 255, 0.08),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #25262b 0%,
      #15161a 58%,
      #090a0c 100%
    ) !important;

  box-shadow:
    0 20px 38px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Keep icon compact */
.google-risk-core-icon {
  flex: 0 0 44px;
  width: 44px !important;
  height: 44px !important;
  margin-bottom: 8px;
}

.google-risk-core-icon svg {
  width: 24px !important;
  height: 24px !important;
  stroke: #f8560f !important;
}

/* Keep all text inside the black hex */
.google-risk-hex-core strong,
.google-risk-hex-core small {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 112px;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
  overflow-wrap: break-word;
}

.google-risk-hex-core strong {
  margin-top: 0 !important;
  color: #ffffff !important;
  font-size: 0.9rem !important;
  line-height: 1.12 !important;
}

.google-risk-hex-core small {
  margin-top: 4px !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.58rem !important;
  line-height: 1.3 !important;
}

/* Prevent global strong/small rules from pushing text outside */
.google-risk-hex-core > * {
  flex-shrink: 0;
}
/* =========================================================
   GLOBAL CTA HEADLINE SIZE FIX
   ========================================================= */

.cta-band h2,
.cta-panel h2,
.cta-story h2 {
  max-width: 760px;
  font-size: clamp(2rem, 3.2vw, 2.35rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.04em !important;
}

/* Tablet */
@media (max-width: 900px) {
  .cta-band h2,
  .cta-panel h2,
  .cta-story h2 {
    font-size: clamp(2rem, 3.2vw, 2.35rem) !important;
    line-height: 1.05 !important;
  }
}

/* Mobile */
@media (max-width: 560px) {
  .cta-band h2,
  .cta-panel h2,
  .cta-story h2 {
    font-size: clamp(1.65rem, 8vw, 2.15rem) !important;
    line-height: 1.08 !important;
  }
}
/* =========================================================
   ECOMMERCE PROTECTION — ANIMATED EVIDENCE BUCKET
   ========================================================= */

.ecommerce-protection-bucket-section {
  position: relative;
  overflow: hidden;
  padding: 105px 0;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 50% 46%,
      rgba(248, 86, 15, 0.16),
      transparent 31%
    ),
    radial-gradient(
      circle at 92% 10%,
      rgba(248, 86, 15, 0.08),
      transparent 28%
    ),
    linear-gradient(180deg, #111214 0%, #0d0e10 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.ecommerce-protection-bucket-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.46;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.65),
    transparent 92%
  );
}

.ecommerce-protection-bucket-section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -260px;
  width: 740px;
  height: 520px;
  transform: translateX(-50%);
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(248, 86, 15, 0.17),
    rgba(248, 86, 15, 0.04) 44%,
    transparent 70%
  );
  filter: blur(10px);
}

.ecommerce-protection-bucket-section > .container {
  position: relative;
  z-index: 2;
}

/* Heading */

.ecommerce-bucket-heading {
  max-width: 900px;
  margin: 0 auto 58px;
  text-align: center;
}

.ecommerce-bucket-heading .eyebrow {
  color: #f8560f !important;
}

.ecommerce-bucket-heading h2 {
  max-width: 800px;
  margin: 12px auto 16px;
  color: #ffffff !important;
  font-size: clamp(2.15rem, 3.4vw, 3.45rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.045em;
}

.ecommerce-bucket-heading p {
  max-width: 780px;
  margin: 0 auto;
  color: #c7cad2 !important;
  font-size: 0.98rem;
  line-height: 1.72;
}

/* Three-column composition */

.ecommerce-bucket-layout {
  display: grid;
  grid-template-columns:
    minmax(230px, 0.78fr)
    minmax(480px, 1.44fr)
    minmax(230px, 0.78fr);
  gap: 46px;
  align-items: center;
  max-width: 1220px;
  margin: 0 auto;
}

/* Side benefits */

.ecommerce-bucket-copy {
  display: grid;
  gap: 18px;
}

.ecommerce-bucket-benefit {
  display: grid;
  grid-template-columns: 39px 1fr;
  gap: 14px;
  min-height: 170px;
  padding: 24px 21px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.048),
      rgba(255, 255, 255, 0.016)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 18px 44px rgba(0, 0, 0, 0.2);
}

.ecommerce-bucket-benefit > span {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(145deg, #ff7938, #f8560f);
  font-size: 0.7rem;
  font-weight: 850;
  box-shadow:
    0 8px 20px rgba(248, 86, 15, 0.23),
    0 0 0 5px rgba(248, 86, 15, 0.08);
}

.ecommerce-bucket-benefit h3 {
  margin: 3px 0 9px;
  color: #ffffff !important;
  font-size: 1rem;
  line-height: 1.3;
}

.ecommerce-bucket-benefit p {
  margin: 0;
  color: #bfc2cb !important;
  font-size: 0.82rem;
  line-height: 1.6;
}

/* Animation column */

.ecommerce-bucket-animation {
  position: relative;
  min-width: 0;
  padding: 30px 0 8px;
}

.ecommerce-bucket-glow {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 430px;
  height: 190px;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    ellipse,
    rgba(248, 86, 15, 0.27),
    rgba(248, 86, 15, 0.07) 45%,
    transparent 72%
  );
  filter: blur(18px);
}

.ecommerce-bucket-stage {
  position: relative;
  width: min(100%, 655px);
  aspect-ratio: 655 / 352;
  margin: 0 auto;
  isolation: isolate;
}

/* Animated pill */

.ecommerce-bucket-chip {
  position: absolute;
  left: 50%;
  top: 3%;
  z-index: 15;
  width: min(290px, 64%);
  min-height: 66px;
  padding: 9px 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background:
    linear-gradient(
      145deg,
      rgba(37, 38, 43, 0.96),
      rgba(18, 19, 23, 0.96)
    );
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.38),
    0 0 26px rgba(248, 86, 15, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(18px);
  transform: translate(-50%, -110px) scale(0.82);
  opacity: 0;
  will-change: transform, opacity;
}

.ecommerce-bucket-chip.is-entering {
  animation: ecommerceBucketEnter 0.85s
    cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ecommerce-bucket-chip.is-visible {
  transform: translate(-50%, 54px) scale(1.08);
  opacity: 1;
}

.ecommerce-bucket-chip.is-exiting {
  animation: ecommerceBucketExit 0.62s ease-in forwards;
}

@keyframes ecommerceBucketEnter {
  0% {
    transform: translate(-50%, -110px) scale(0.82);
    opacity: 0;
  }

  70% {
    transform: translate(-50%, 62px) scale(1.11);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, 54px) scale(1.08);
    opacity: 1;
  }
}

@keyframes ecommerceBucketExit {
  0% {
    transform: translate(-50%, 54px) scale(1.08);
    opacity: 1;
  }

  45% {
    transform: translate(-50%, 90px) scale(0.98);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, 205px) scale(0.77);
    opacity: 0;
  }
}

.ecommerce-bucket-chip-icon {
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #f8560f;
  background: rgba(248, 86, 15, 0.11);
  border: 1px solid rgba(248, 86, 15, 0.25);
}

.ecommerce-bucket-chip-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ecommerce-bucket-chip-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.ecommerce-bucket-chip-content strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 0.84rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ecommerce-bucket-chip-content small {
  overflow: hidden;
  color: #aeb2bc;
  font-size: 0.68rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Back of box */

.ecommerce-box-back {
  position: absolute;
  left: 18.9%;
  right: 18.2%;
  top: 13%;
  z-index: 1;
  height: 18%;
  clip-path: polygon(11% 0, 89% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.16),
      rgba(255, 255, 255, 0.055)
    );
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
}

/* Side flaps */

.ecommerce-box-flap {
  position: absolute;
  top: 2%;
  z-index: 3;
  width: 31%;
  height: 21%;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.28),
      rgba(255, 255, 255, 0.08)
    );
  border: 1px solid rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.14);
}

.ecommerce-box-flap-left {
  left: 6.8%;
  clip-path: polygon(20% 0, 100% 55%, 76% 100%, 0 60%);
}

.ecommerce-box-flap-right {
  right: 6.8%;
  clip-path: polygon(80% 0, 100% 60%, 24% 100%, 0 55%);
}

/* Main box */

.ecommerce-box-body {
  position: absolute;
  left: 18.9%;
  right: 18.2%;
  top: 22.5%;
  bottom: 0;
  z-index: 5;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 0 25px 25px;
  background:
    linear-gradient(
      160deg,
      rgba(37, 38, 44, 0.98),
      rgba(15, 16, 20, 0.98)
    );
  box-shadow:
    0 32px 60px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.ecommerce-box-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.055),
      transparent 34%,
      rgba(248, 86, 15, 0.05)
    );
}

.ecommerce-box-inside {
  position: absolute;
  left: 50%;
  top: 63%;
  width: 72%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.ecommerce-box-inside span {
  display: block;
  margin-bottom: 7px;
  color: #f8560f;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ecommerce-box-inside strong {
  display: block;
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.3;
}

.ecommerce-box-inside small {
  display: block;
  margin-top: 8px;
  color: #9398a3;
  font-size: 0.67rem;
}

/* Front translucent lid */

.ecommerce-box-front {
  position: absolute;
  left: 9.8%;
  right: 9.8%;
  top: 22.2%;
  z-index: 20;
  height: 33%;
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.23),
      rgba(255, 255, 255, 0.08)
    );
  border: 1px solid rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(23px);
  pointer-events: none;
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Progress */

.ecommerce-bucket-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 17px;
}

.ecommerce-bucket-progress span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  transition:
    width 0.3s ease,
    background-color 0.3s ease;
}

.ecommerce-bucket-progress span.active {
  width: 27px;
  background: #f8560f;
}

/* Bottom evidence strip */

.ecommerce-bucket-evidence {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  max-width: 1220px;
  margin: 54px auto 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.09);
}

.ecommerce-bucket-evidence article {
  min-height: 150px;
  padding: 25px 23px;
  background: rgba(18, 19, 22, 0.82);
}

.ecommerce-bucket-evidence span {
  display: block;
  margin-bottom: 10px;
  color: #f8560f;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.ecommerce-bucket-evidence strong {
  display: block;
  color: #f2f3f5;
  font-size: 0.85rem;
  line-height: 1.58;
  font-weight: 650;
}

/* Tablet */

@media (max-width: 1100px) {
  .ecommerce-bucket-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .ecommerce-bucket-animation {
    grid-column: 1 / -1;
    grid-row: 1;
    width: min(100%, 680px);
    margin: 0 auto 25px;
  }

  .ecommerce-bucket-copy {
    align-self: stretch;
  }

  .ecommerce-bucket-benefit {
    height: 100%;
  }

  .ecommerce-bucket-evidence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile */

@media (max-width: 700px) {
  .ecommerce-protection-bucket-section {
    padding: 74px 0;
  }

  .ecommerce-bucket-heading {
    margin-bottom: 38px;
  }

  .ecommerce-bucket-heading h2 {
    font-size: clamp(2rem, 9.8vw, 2.8rem);
    line-height: 1.04;
  }

  .ecommerce-bucket-layout {
    grid-template-columns: 1fr;
  }

  .ecommerce-bucket-animation {
    grid-column: auto;
  }

  .ecommerce-bucket-benefit {
    min-height: 0;
  }

  .ecommerce-bucket-chip {
    width: 70%;
    min-height: 58px;
    padding: 7px 10px;
  }

  .ecommerce-bucket-chip-icon {
    flex-basis: 37px;
    width: 37px;
    height: 37px;
  }

  .ecommerce-bucket-chip-icon svg {
    width: 20px;
    height: 20px;
  }

  .ecommerce-bucket-chip-content strong {
    font-size: 0.72rem;
  }

  .ecommerce-bucket-chip-content small {
    font-size: 0.59rem;
  }

  .ecommerce-box-inside strong {
    font-size: 0.82rem;
  }

  .ecommerce-bucket-evidence {
    grid-template-columns: 1fr;
    margin-top: 38px;
  }

  .ecommerce-bucket-evidence article {
    min-height: 0;
  }
}

/* Small phones */

@media (max-width: 430px) {
  .ecommerce-bucket-chip {
    width: 74%;
  }

  .ecommerce-box-inside {
    width: 83%;
  }

  .ecommerce-box-inside strong {
    font-size: 0.74rem;
  }

  .ecommerce-box-inside small {
    display: none;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .ecommerce-bucket-chip,
  .ecommerce-bucket-chip.is-entering,
  .ecommerce-bucket-chip.is-exiting {
    animation: none !important;
    transform: translate(-50%, 54px) scale(1.04);
    opacity: 1;
  }
}
/* =========================================================
   ECOMMERCE BUCKET — EXACT ANIMATION POSITION FIX
   Add at the absolute bottom of pages.css
   ========================================================= */

/*
 * Keep the chip centered directly above the opening.
 * JavaScript controls all vertical movement.
 */
.ecommerce-bucket-chip {
  left: 50% !important;
  top: 16px !important;
  z-index: 14 !important;

  width: 240px !important;
  max-width: calc(100% - 48px);

  opacity: 0;
  transform:
    translate(-50%, -115px)
    scale(0.8);

  transform-origin: center bottom;
  will-change: transform, opacity;
}

/*
 * Back pieces stay behind the chip.
 */
.ecommerce-box-back {
  z-index: 2 !important;
}

.ecommerce-box-flap {
  z-index: 4 !important;
}

/*
 * Main dark box.
 */
.ecommerce-box-body {
  z-index: 8 !important;
}

/*
 * The translucent front must sit above the animated chip.
 * This creates the effect of the tag falling inside the box.
 */
.ecommerce-box-front {
  z-index: 20 !important;
  pointer-events: none;
}

/*
 * The chip should remain visible above the opening before it falls.
 */
.ecommerce-bucket-stage {
  overflow: visible !important;
  isolation: isolate;
}

/*
 * Make the opening slightly lower so the pill has a visible landing point.
 */
.ecommerce-box-back {
  top: 21% !important;
  height: 13% !important;
}

.ecommerce-box-flap {
  top: 11% !important;
  height: 21% !important;
}

.ecommerce-box-body {
  top: 31% !important;
}

.ecommerce-box-front {
  top: 31% !important;
  height: 27% !important;
}

/*
 * Improve the open-box depth.
 */
.ecommerce-box-flap-left {
  transform:
    perspective(500px)
    rotateX(9deg)
    rotateZ(-1deg);
  transform-origin: right bottom;
}

.ecommerce-box-flap-right {
  transform:
    perspective(500px)
    rotateX(9deg)
    rotateZ(1deg);
  transform-origin: left bottom;
}

/*
 * A darker inner opening makes it clear where the tag falls.
 */
.ecommerce-box-back::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -19px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse,
      rgba(0, 0, 0, 0.82),
      rgba(0, 0, 0, 0.28) 56%,
      transparent 76%
    );
  filter: blur(3px);
}

/*
 * The glass front should not be completely opaque.
 */
.ecommerce-box-front {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.19),
      rgba(255, 255, 255, 0.055)
    ) !important;

  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/*
 * Remove the older class animations so they cannot conflict
 * with the new Web Animations API sequence.
 */
.ecommerce-bucket-chip.is-entering,
.ecommerce-bucket-chip.is-visible,
.ecommerce-bucket-chip.is-exiting {
  animation: none !important;
}

/* Desktop visual size */
@media (min-width: 1101px) {
  .ecommerce-bucket-animation {
    min-height: 410px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .ecommerce-bucket-stage {
    width: 560px;
    max-width: 100%;
  }
}

/* Tablet */
@media (max-width: 1100px) {
  .ecommerce-bucket-chip {
    top: 12px !important;
  }
}

/* Mobile */
@media (max-width: 700px) {
  .ecommerce-bucket-stage {
    width: 100%;
    max-width: 480px;
  }

  .ecommerce-bucket-chip {
    top: 4px !important;
    width: 220px !important;
  }

  .ecommerce-box-flap {
    top: 13% !important;
  }

  .ecommerce-box-back {
    top: 23% !important;
  }

  .ecommerce-box-body,
  .ecommerce-box-front {
    top: 33% !important;
  }
}
/* =========================================================
   PRIVACY POLICY — ORANGE PUZZLE LIFECYCLE
   ========================================================= */

.privacy-puzzle-section {
  --privacy-orange: #f8560f;
  --privacy-orange-light: #ff7a3d;
  --privacy-orange-dark: #d94400;

  position: relative;
  overflow: hidden;
  padding: 100px 0 108px;
  color: #17181b;
  background:
    radial-gradient(
      circle at 50% 54%,
      rgba(248, 86, 15, 0.09),
      transparent 29%
    ),
    linear-gradient(180deg, #faf9f7 0%, #f1f0ed 100%);
}

.privacy-puzzle-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    radial-gradient(rgba(17, 24, 39, 0.14) 0.6px, transparent 0.6px);
  background-size: 5px 5px;
}

.privacy-puzzle-section::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  top: 42%;
  height: 105px;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(17, 24, 39, 0.045),
    transparent
  );
  transform: rotate(-7deg);
}

.privacy-puzzle-section > .container {
  position: relative;
  z-index: 2;
}

/* Heading */

.privacy-puzzle-heading {
  max-width: 930px;
  margin: 0 auto 54px;
  text-align: center;
}

.privacy-puzzle-heading .eyebrow {
  color: var(--privacy-orange) !important;
}

.privacy-puzzle-heading h2 {
  max-width: 850px;
  margin: 12px auto 16px;
  color: #111318 !important;
  font-size: clamp(2.15rem, 3.35vw, 3.45rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.045em;
}

.privacy-puzzle-heading p {
  max-width: 810px;
  margin: 0 auto;
  color: #636974 !important;
  font-size: 0.98rem;
  line-height: 1.72;
}

/* Full composition */

.privacy-puzzle-layout {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(230px, 0.82fr)
    minmax(470px, 1.36fr)
    minmax(230px, 0.82fr);
  grid-template-rows: repeat(2, minmax(185px, auto));
  column-gap: 60px;
  row-gap: 38px;
  align-items: center;
  max-width: 1180px;
  min-height: 540px;
  margin: 0 auto;
}

/* Side copy */

.privacy-puzzle-copy {
  position: relative;
  max-width: 270px;
}

.privacy-puzzle-copy > span {
  display: block;
  margin-bottom: 8px;
  color: var(--privacy-orange);
  font-size: 0.7rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.13em;
}

.privacy-puzzle-copy h3 {
  margin: 0 0 9px;
  color: var(--privacy-orange) !important;
  font-size: 1rem;
  line-height: 1.28;
}

.privacy-puzzle-copy p {
  margin: 0;
  color: #676d77 !important;
  font-size: 0.8rem;
  line-height: 1.58;
}

/* Connector lines */

.privacy-puzzle-copy i {
  position: absolute;
  top: 37px;
  display: block;
  width: 78px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(248, 86, 15, 0.13),
    rgba(248, 86, 15, 0.82)
  );
}

.privacy-puzzle-copy i::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid var(--privacy-orange);
  border-radius: 50%;
  background: #f5f4f1;
  transform: translateY(-50%);
  box-shadow: 0 0 0 5px rgba(248, 86, 15, 0.08);
}

.privacy-copy-1,
.privacy-copy-3 {
  justify-self: end;
  text-align: right;
}

.privacy-copy-1 i,
.privacy-copy-3 i {
  left: calc(100% + 18px);
}

.privacy-copy-1 i::after,
.privacy-copy-3 i::after {
  right: -4px;
}

.privacy-copy-2,
.privacy-copy-4 {
  justify-self: start;
  text-align: left;
}

.privacy-copy-2 i,
.privacy-copy-4 i {
  right: calc(100% + 18px);
  transform: rotate(180deg);
}

.privacy-copy-2 i::after,
.privacy-copy-4 i::after {
  right: -4px;
}

.privacy-copy-1 {
  grid-column: 1;
  grid-row: 1;
}

.privacy-copy-2 {
  grid-column: 3;
  grid-row: 1;
}

.privacy-copy-3 {
  grid-column: 1;
  grid-row: 2;
}

.privacy-copy-4 {
  grid-column: 3;
  grid-row: 2;
}

/* Puzzle visual */

.privacy-puzzle-visual {
  position: relative;
  grid-column: 2;
  grid-row: 1 / 3;
  width: 470px;
  height: 470px;
  max-width: 100%;
  margin: 0 auto;
  filter: drop-shadow(0 24px 34px rgba(248, 86, 15, 0.14));
}

/* Dashed outer ring */

.privacy-puzzle-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 410px;
  height: 410px;
  transform: translate(-50%, -50%);
  border: 2px dashed rgba(248, 86, 15, 0.27);
  border-radius: 50%;
}

.privacy-puzzle-ring::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(248, 86, 15, 0.12);
  border-radius: 50%;
}

/* Shared puzzle piece */

.privacy-puzzle-piece {
  position: absolute;
  width: 207px;
  height: 207px;
  padding: 31px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 34% 22%,
      rgba(255, 178, 126, 0.73),
      transparent 27%
    ),
    linear-gradient(
      145deg,
      var(--privacy-orange-light) 0%,
      var(--privacy-orange) 58%,
      var(--privacy-orange-dark) 100%
    );
  border: 3px solid rgba(255, 255, 255, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 18px 32px rgba(248, 86, 15, 0.2);
}

.privacy-piece-1 {
  left: 27px;
  top: 27px;
  border-radius: 100% 9% 9% 9%;
  clip-path: path(
    "M 103 0 C 160 0 207 47 207 103 L 207 151 C 185 147 168 129 168 106 C 168 79 147 58 120 58 C 94 58 73 79 73 106 C 73 130 55 149 31 151 L 0 151 L 0 103 C 0 46 46 0 103 0 Z"
  );
}

.privacy-piece-2 {
  right: 27px;
  top: 27px;
  border-radius: 9% 100% 9% 9%;
  clip-path: path(
    "M 104 0 C 161 0 207 46 207 103 L 207 151 L 176 151 C 153 149 135 130 135 106 C 135 79 114 58 88 58 C 61 58 40 79 40 106 C 40 129 22 147 0 151 L 0 103 C 0 47 47 0 104 0 Z"
  );
}

.privacy-piece-3 {
  left: 27px;
  bottom: 27px;
  border-radius: 9% 9% 9% 100%;
  clip-path: path(
    "M 0 56 L 31 56 C 55 58 73 77 73 101 C 73 128 94 149 120 149 C 147 149 168 128 168 101 C 168 78 185 60 207 56 L 207 104 C 207 161 160 207 103 207 C 46 207 0 161 0 104 Z"
  );
}

.privacy-piece-4 {
  right: 27px;
  bottom: 27px;
  border-radius: 9% 9% 100% 9%;
  clip-path: path(
    "M 0 56 C 22 60 40 78 40 101 C 40 128 61 149 88 149 C 114 149 135 128 135 101 C 135 77 153 58 176 56 L 207 56 L 207 104 C 207 161 161 207 104 207 C 47 207 0 161 0 104 Z"
  );
}

/*
 * Browser fallback when path() clip-path is unsupported.
 * Keeps four circular puzzle-style quadrants.
 */
@supports not (clip-path: path("M 0 0 L 10 10")) {
  .privacy-piece-1 {
    clip-path: polygon(0 0, 100% 0, 100% 34%, 77% 34%, 77% 64%, 100% 64%, 100% 100%, 0 100%);
    border-radius: 100% 10% 10% 10%;
  }

  .privacy-piece-2 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 64%, 23% 64%, 23% 34%, 0 34%);
    border-radius: 10% 100% 10% 10%;
  }

  .privacy-piece-3 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 66%, 23% 66%, 23% 36%, 0 36%);
    border-radius: 10% 10% 10% 100%;
  }

  .privacy-piece-4 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 36%, 23% 36%, 23% 66%, 0 66%);
    border-radius: 10% 10% 100% 10%;
  }
}

/* Icons */

.privacy-piece-icon {
  position: relative;
  z-index: 3;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.17);
  border: 1px solid rgba(255, 255, 255, 0.32);
}

.privacy-piece-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.privacy-puzzle-piece strong {
  position: relative;
  z-index: 3;
  margin-top: 10px;
  color: #ffffff;
  font-size: 0.96rem;
  line-height: 1.2;
}

.privacy-puzzle-piece small {
  position: relative;
  z-index: 3;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.68rem;
  line-height: 1.35;
}

/* Black center */

.privacy-puzzle-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 12;
  width: 138px;
  height: 138px;
  padding: 18px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-align: center;
  background:
    radial-gradient(
      circle at 35% 22%,
      rgba(255, 255, 255, 0.08),
      transparent 31%
    ),
    linear-gradient(145deg, #25262b, #111216 65%, #07080a);
  border: 4px solid #ffffff;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.3),
    0 0 0 5px rgba(248, 86, 15, 0.12);
}

.privacy-puzzle-core span {
  color: var(--privacy-orange);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.privacy-puzzle-core strong {
  max-width: 102px;
  margin-top: 6px;
  color: #ffffff;
  font-size: 0.89rem;
  line-height: 1.17;
}

.privacy-puzzle-core small {
  max-width: 104px;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.67);
  font-size: 0.55rem;
  line-height: 1.3;
}

/* Evidence strip */

.privacy-puzzle-evidence {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  max-width: 1180px;
  margin: 56px auto 0;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 20px;
  background: rgba(17, 24, 39, 0.08);
}

.privacy-puzzle-evidence article {
  min-height: 145px;
  padding: 24px 22px;
  background: rgba(255, 255, 255, 0.8);
}

.privacy-puzzle-evidence span {
  display: block;
  margin-bottom: 10px;
  color: var(--privacy-orange);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.privacy-puzzle-evidence strong {
  display: block;
  color: #25282e;
  font-size: 0.84rem;
  line-height: 1.58;
  font-weight: 650;
}

/* Tablet */

@media (max-width: 1080px) {
  .privacy-puzzle-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 20px;
    min-height: 0;
  }

  .privacy-puzzle-visual {
    grid-column: 1 / -1;
    grid-row: auto;
    order: -1;
    margin-bottom: 30px;
  }

  .privacy-puzzle-copy,
  .privacy-copy-1,
  .privacy-copy-2,
  .privacy-copy-3,
  .privacy-copy-4 {
    grid-column: auto;
    grid-row: auto;
    justify-self: stretch;
    max-width: none;
    padding: 22px;
    border: 1px solid rgba(248, 86, 15, 0.14);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    text-align: left;
  }

  .privacy-puzzle-copy i {
    display: none;
  }

  .privacy-puzzle-evidence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile */

@media (max-width: 700px) {
  .privacy-puzzle-section {
    padding: 72px 0;
  }

  .privacy-puzzle-heading {
    margin-bottom: 38px;
  }

  .privacy-puzzle-heading h2 {
    font-size: clamp(2rem, 9.5vw, 2.75rem);
    line-height: 1.04;
  }

  .privacy-puzzle-layout {
    grid-template-columns: 1fr;
  }

  .privacy-puzzle-visual {
    width: 350px;
    height: 350px;
    transform: scale(0.92);
    transform-origin: center top;
    margin-bottom: -8px;
  }

  .privacy-puzzle-ring {
    width: 318px;
    height: 318px;
  }

  .privacy-puzzle-piece {
    width: 151px;
    height: 151px;
    padding: 20px 17px;
  }

  .privacy-piece-1,
  .privacy-piece-3 {
    left: 18px;
  }

  .privacy-piece-2,
  .privacy-piece-4 {
    right: 18px;
  }

  .privacy-piece-1,
  .privacy-piece-2 {
    top: 18px;
  }

  .privacy-piece-3,
  .privacy-piece-4 {
    bottom: 18px;
  }

  .privacy-piece-icon {
    width: 45px;
    height: 45px;
  }

  .privacy-piece-icon svg {
    width: 25px;
    height: 25px;
  }

  .privacy-puzzle-piece strong {
    font-size: 0.78rem;
  }

  .privacy-puzzle-piece small {
    font-size: 0.56rem;
  }

  .privacy-puzzle-core {
    width: 108px;
    height: 108px;
    padding: 13px;
  }

  .privacy-puzzle-core strong {
    font-size: 0.72rem;
  }

  .privacy-puzzle-core small {
    display: none;
  }

  .privacy-puzzle-evidence {
    grid-template-columns: 1fr;
    margin-top: 38px;
  }

  .privacy-puzzle-evidence article {
    min-height: 0;
  }
}

@media (max-width: 420px) {
  .privacy-puzzle-visual {
    width: 320px;
    transform: scale(0.86);
    margin-left: -2px;
    margin-bottom: -34px;
  }
}
/* =========================================================
   DIGITAL AGENCIES — THREE CHANNEL APPROACH
   Reference-inspired editorial vector infographic
   ========================================================= */

.agency-three-channel-section {
  --agency-orange: #f8560f;
  --agency-orange-light: #ff9250;
  --agency-orange-dark: #d84300;
  --agency-black: #111318;
  --agency-copy: #666c76;
  --agency-line: rgba(17, 24, 39, 0.1);

  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background:
    radial-gradient(
      circle at 22% 55%,
      rgba(248, 86, 15, 0.055),
      transparent 25%
    ),
    #efefed;
}

.agency-three-channel-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image:
    radial-gradient(
      rgba(17, 24, 39, 0.18) 0.55px,
      transparent 0.55px
    );
  background-size: 5px 5px;
}

.agency-three-channel-section > .container {
  position: relative;
  z-index: 2;
}

/* Main white canvas */

.agency-three-channel-shell {
  position: relative;
  overflow: hidden;
  max-width: 1240px;
  margin: 0 auto;
  padding: 26px 34px 34px;

  border: 1px solid rgba(17, 24, 39, 0.08);
  border-top: 5px solid var(--agency-orange);
  border-radius: 3px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.99),
      rgba(250, 250, 248, 0.98)
    );

  box-shadow:
    0 28px 75px rgba(17, 24, 39, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Top metadata row */

.agency-three-channel-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 10px;
}

.agency-three-channel-topbar > span {
  color: #6d727c;
  font-size: 0.66rem;
  line-height: 1;
}

.agency-three-channel-mark {
  position: relative;
  width: 31px;
  height: 24px;
}

.agency-three-channel-mark i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.agency-three-channel-mark i:nth-child(1) {
  left: 1px;
  top: 8px;
  background: #f8560f;
}

.agency-three-channel-mark i:nth-child(2) {
  right: 3px;
  top: 1px;
  background: #18a9a7;
}

.agency-three-channel-mark i:nth-child(3) {
  right: 3px;
  bottom: 1px;
  background: #2781ce;
}

.agency-three-channel-mark::before,
.agency-three-channel-mark::after {
  content: "";
  position: absolute;
  left: 8px;
  width: 16px;
  height: 1px;
  transform-origin: left center;
  background: #aaaeb5;
}

.agency-three-channel-mark::before {
  top: 11px;
  transform: rotate(-27deg);
}

.agency-three-channel-mark::after {
  top: 13px;
  transform: rotate(27deg);
}

/* Heading */

.agency-three-channel-heading {
  max-width: 690px;
  margin-bottom: 20px;
}

.agency-three-channel-kicker {
  display: inline-flex;
  margin-bottom: 6px;
  color: var(--agency-orange);
  font-size: 0.64rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.agency-three-channel-heading h2 {
  margin: 0 0 9px;
  color: var(--agency-black) !important;
  font-size: clamp(2.2rem, 3.5vw, 3.6rem);
  line-height: 0.98;
  font-weight: 500;
  letter-spacing: -0.05em;
}

.agency-three-channel-heading p {
  max-width: 640px;
  margin: 0;
  color: var(--agency-copy) !important;
  font-size: 0.85rem;
  line-height: 1.6;
}

/* Two-column layout */

.agency-three-channel-layout {
  display: grid;
  grid-template-columns:
    minmax(430px, 0.92fr)
    minmax(500px, 1.08fr);
  gap: 40px;
  align-items: stretch;
}

/* =========================================================
   LEFT CIRCULAR INFOGRAPHIC
   ========================================================= */

.agency-channel-wheel-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.agency-channel-wheel {
  position: relative;
  width: min(100%, 450px);
  aspect-ratio: 1;
  margin: 0 auto;
}

.agency-channel-wheel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 54%;
  width: 320px;
  height: 190px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse,
      rgba(248, 86, 15, 0.12),
      transparent 70%
    );
  filter: blur(16px);
}

.agency-channel-wheel-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Channel items */

.agency-wheel-item {
  position: absolute;
  z-index: 5;
  width: 112px;
  text-align: center;
}

.agency-wheel-icon {
  width: 45px;
  height: 45px;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(248, 86, 15, 0.2);
  box-shadow:
    0 9px 20px rgba(17, 24, 39, 0.09),
    inset 0 0 0 4px rgba(248, 86, 15, 0.035);
}

.agency-wheel-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--agency-orange);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.agency-wheel-item > span {
  display: block;
  margin-bottom: 3px;
  color: var(--agency-orange);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.agency-wheel-item > strong {
  display: block;
  color: var(--agency-black);
  font-size: 0.72rem;
  line-height: 1.28;
}

.agency-wheel-item-top {
  left: 50%;
  top: 34px;
  transform: translateX(-50%);
}

.agency-wheel-item-left {
  left: 26px;
  bottom: 54px;
}

.agency-wheel-item-right {
  right: 26px;
  bottom: 54px;
}

/* Center content */

.agency-wheel-center-copy {
  position: absolute;
  left: 50%;
  top: 51%;
  z-index: 6;
  width: 110px;
  transform: translate(-50%, -50%);
  text-align: center;
}

.agency-wheel-center-copy span {
  display: block;
  margin-bottom: 5px;
  color: #fff;
  font-size: 0.54rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.agency-wheel-center-copy strong {
  display: block;
  color: #fff;
  font-size: 0.7rem;
  line-height: 1.25;
}

.agency-channel-wheel-note {
  max-width: 400px;
  margin: 7px auto 0;
  color: #747984 !important;
  font-size: 0.7rem;
  line-height: 1.55;
  text-align: center;
}

/* =========================================================
   RIGHT CHANNEL DETAILS
   ========================================================= */

.agency-channel-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "channel-one channel-two"
    "channel-three orange-panel";
  gap: 14px;
  align-content: stretch;
}

.agency-channel-detail-card {
  position: relative;
  min-width: 0;
  padding: 18px 19px;
  border: 1px solid rgba(17, 24, 39, 0.07);
  border-radius: 3px;
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f8f8f6
    );
  box-shadow: 0 9px 24px rgba(17, 24, 39, 0.055);
  transition:
    transform 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

.agency-channel-detail-card:hover {
  transform: translateY(-4px);
  border-color: rgba(248, 86, 15, 0.28);
  box-shadow: 0 16px 34px rgba(17, 24, 39, 0.09);
}

.agency-channel-detail-card:nth-child(1) {
  grid-area: channel-one;
}

.agency-channel-detail-card:nth-child(2) {
  grid-area: channel-two;
}

.agency-channel-detail-card:nth-child(3) {
  grid-area: channel-three;
}

.agency-channel-detail-number {
  margin-bottom: 7px;
  color: var(--agency-orange);
  font-size: 0.6rem;
  line-height: 1;
  font-weight: 850;
}

.agency-channel-detail-card h3 {
  margin: 0 0 8px;
  color: var(--agency-black) !important;
  font-size: 0.88rem;
  line-height: 1.25;
}

.agency-channel-detail-card p {
  margin: 0;
  color: #686e78 !important;
  font-size: 0.67rem;
  line-height: 1.52;
}

.agency-channel-detail-card ul {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.agency-channel-detail-card li {
  position: relative;
  padding-left: 14px;
  color: #5f6570;
  font-size: 0.62rem;
  line-height: 1.42;
}

.agency-channel-detail-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--agency-orange);
}

.agency-channel-platform-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 13px;
}

.agency-channel-platform-row span {
  padding: 6px 8px;
  border: 1px solid rgba(248, 86, 15, 0.17);
  border-radius: 4px;
  background: rgba(248, 86, 15, 0.045);
  color: #5f646e;
  font-size: 0.56rem;
  font-weight: 700;
}

/* =========================================================
   ORANGE DECORATIVE PANEL
   ========================================================= */

.agency-channel-orange-panel {
  position: relative;
  grid-area: orange-panel;
  min-height: 160px;
  overflow: hidden;
  padding: 22px;
  display: flex;
  align-items: flex-end;
  border-radius: 3px;
  background:
    radial-gradient(
      circle at 68% 48%,
      rgba(255, 255, 255, 0.16),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #ff7d36,
      var(--agency-orange) 58%,
      var(--agency-orange-dark)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 13px 27px rgba(248, 86, 15, 0.17);
}

.agency-orange-orbit {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
}

.agency-orange-orbit.orbit-one {
  width: 190px;
  height: 190px;
  right: -38px;
  top: -40px;
}

.agency-orange-orbit.orbit-two {
  width: 145px;
  height: 145px;
  right: 22px;
  top: 7px;
}

.agency-orange-orbit.orbit-three {
  width: 105px;
  height: 105px;
  right: 76px;
  top: 43px;
}

.agency-orange-panel-copy {
  position: relative;
  z-index: 2;
  max-width: 235px;
}

.agency-orange-panel-copy span {
  display: block;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.56rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.agency-orange-panel-copy strong {
  display: block;
  color: #fff;
  font-size: 0.84rem;
  line-height: 1.4;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {
  .agency-three-channel-layout {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .agency-channel-wheel {
    width: min(100%, 480px);
  }

  .agency-channel-details {
    max-width: 760px;
    margin: 0 auto;
  }
}

@media (max-width: 700px) {
  .agency-three-channel-section {
    padding: 70px 0;
  }

  .agency-three-channel-shell {
    padding: 22px 20px 25px;
  }

  .agency-three-channel-heading h2 {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }

  .agency-channel-details {
    grid-template-columns: 1fr;
    grid-template-areas:
      "channel-one"
      "channel-two"
      "channel-three"
      "orange-panel";
  }

  .agency-channel-orange-panel {
    min-height: 185px;
  }
}

@media (max-width: 520px) {
  .agency-channel-wheel {
    width: 330px;
    max-width: 100%;
  }

  .agency-wheel-item {
    width: 88px;
  }

  .agency-wheel-icon {
    width: 38px;
    height: 38px;
  }

  .agency-wheel-icon svg {
    width: 20px;
    height: 20px;
  }

  .agency-wheel-item > strong {
    font-size: 0.61rem;
  }

  .agency-wheel-item-top {
    top: 23px;
  }

  .agency-wheel-item-left {
    left: 4px;
    bottom: 32px;
  }

  .agency-wheel-item-right {
    right: 4px;
    bottom: 32px;
  }

  .agency-wheel-center-copy {
    width: 84px;
  }

  .agency-wheel-center-copy strong {
    font-size: 0.58rem;
  }

  .agency-channel-wheel-note {
    font-size: 0.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agency-channel-detail-card {
    transition: none;
  }
}
/* =========================================================
   THREE CHANNEL SECTION — REMOVE OUTER BACKGROUND CARD
   ========================================================= */

.agency-three-channel-section {
  background: #f2f2f0 !important;
}

/* Remove the large white container/card */
.agency-three-channel-shell {
  max-width: 1240px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Remove the orange line previously attached to the card */
.agency-three-channel-shell::before,
.agency-three-channel-shell::after {
  display: none !important;
}

/* Keep some clean spacing inside the section */
.agency-three-channel-topbar {
  margin-bottom: 14px;
}

.agency-three-channel-heading {
  margin-bottom: 30px;
}

/* Keep the smaller right-side cards */
.agency-channel-detail-card {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(17, 24, 39, 0.08) !important;
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.06) !important;
}

/* Keep the orange block intact */
.agency-channel-orange-panel {
  box-shadow: 0 14px 30px rgba(248, 86, 15, 0.17) !important;
}

@media (max-width: 700px) {
  .agency-three-channel-shell {
    padding: 0 !important;
  }
}
/* =========================================================
   CLICK FRAUD DETECTION — THREE USE CASES
   Reference-inspired orange and white product visuals
   ========================================================= */

.detection-usecases-section {
  --duc-orange: #f8560f;
  --duc-orange-light: #ff8a45;
  --duc-orange-soft: #fff2eb;
  --duc-ink: #14161b;
  --duc-copy: #646b77;
  --duc-border: rgba(20, 22, 27, 0.09);

  position: relative;
  overflow: hidden;
  padding: 96px 0 104px;
  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(248, 86, 15, 0.055),
      transparent 32%
    ),
    #f5f5f3;
  color: var(--duc-ink);
}

.detection-usecases-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.17;
  background-image:
    radial-gradient(
      rgba(20, 22, 27, 0.16) 0.55px,
      transparent 0.55px
    );
  background-size: 5px 5px;
}

.detection-usecases-section > .container {
  position: relative;
  z-index: 2;
}

/* =========================================================
   SECTION HEADING
   ========================================================= */

.detection-usecases-head {
  display: grid;
  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(300px, 0.72fr);
  gap: 64px;
  align-items: end;
  margin-bottom: 46px;
}

.detection-usecases-head h2 {
  max-width: 770px;
  margin: 12px 0 0;
  color: var(--duc-ink) !important;
  font-size: clamp(2.4rem, 4vw, 4.25rem);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.055em;
}

.detection-usecases-head > p {
  max-width: 500px;
  margin: 0 0 6px;
  color: var(--duc-copy) !important;
  font-size: 0.96rem;
  line-height: 1.72;
}

/* =========================================================
   THREE EQUAL COLUMNS
   ========================================================= */

.detection-usecases-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.detection-usecase-card {
  min-width: 0;
  padding: 0 2px 8px;
}

.detection-usecase-number {
  display: block;
  margin: 24px 0 9px;
  color: var(--duc-orange);
  font-size: 0.68rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.detection-usecase-card h3 {
  margin: 0 0 10px;
  color: var(--duc-ink) !important;
  font-size: 1.15rem;
  line-height: 1.25;
  font-weight: 750;
}

.detection-usecase-card > p {
  min-height: 96px;
  margin: 0;
  color: var(--duc-copy) !important;
  font-size: 0.82rem;
  line-height: 1.63;
}

.detection-usecase-card ul {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.detection-usecase-card li {
  position: relative;
  padding-left: 16px;
  color: #555c67;
  font-size: 0.75rem;
  line-height: 1.45;
}

.detection-usecase-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--duc-orange);
}

/* =========================================================
   VISUAL CONTAINERS
   ========================================================= */

.detection-usecase-visual {
  position: relative;
  min-height: 255px;
  overflow: hidden;
  border: 1px solid var(--duc-border);
  border-radius: 7px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(248, 248, 246, 0.96)
    );
  box-shadow:
    0 18px 42px rgba(20, 22, 27, 0.07),
    inset 0 1px 0 #fff;
  transition:
    transform 0.35s cubic-bezier(.22, 1, .36, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.detection-usecase-card:hover .detection-usecase-visual {
  transform: translateY(-6px);
  border-color: rgba(248, 86, 15, 0.22);
  box-shadow:
    0 27px 56px rgba(20, 22, 27, 0.11),
    0 12px 30px rgba(248, 86, 15, 0.07);
}

/* =========================================================
   VISUAL 01 — WASTED SPEND
   ========================================================= */

.visual-costs {
  padding: 24px 20px;
  background:
    radial-gradient(
      circle at 50% 73%,
      rgba(248, 86, 15, 0.12),
      transparent 37%
    ),
    linear-gradient(145deg, #fff, #faf9f7);
}

.visual-browser-shell {
  height: 205px;
  overflow: hidden;
  border: 1px solid rgba(20, 22, 27, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 30px rgba(20, 22, 27, 0.08);
}

.visual-browser-top {
  display: flex;
  gap: 5px;
  height: 28px;
  padding: 10px;
  border-bottom: 1px solid rgba(20, 22, 27, 0.07);
}

.visual-browser-top i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dadce1;
}

.visual-browser-top i:first-child {
  background: var(--duc-orange);
}

.visual-browser-body {
  position: relative;
  height: calc(100% - 28px);
}

.visual-main-tile {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 145px;
  min-height: 125px;
  padding: 18px 14px;
  transform: translate(-50%, -50%);
  border-radius: 9px;
  text-align: center;
  background:
    linear-gradient(
      145deg,
      var(--duc-orange-light),
      var(--duc-orange)
    );
  box-shadow: 0 16px 29px rgba(248, 86, 15, 0.24);
}

.visual-icon-circle {
  width: 42px;
  height: 42px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
}

.visual-icon-circle svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: var(--duc-orange);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visual-main-tile span {
  display: block;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.visual-main-tile strong {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-size: 0.79rem;
  line-height: 1.3;
}

.visual-click-card {
  position: absolute;
  z-index: 5;
  width: 105px;
  padding: 12px;
  border: 1px solid rgba(20, 22, 27, 0.08);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 10px 23px rgba(20, 22, 27, 0.1);
}

.visual-click-card span {
  display: block;
  color: var(--duc-orange);
  font-size: 0.53rem;
  font-weight: 800;
  text-transform: uppercase;
}

.visual-click-card strong {
  display: block;
  margin: 4px 0;
  color: var(--duc-ink);
  font-size: 0.72rem;
}

.visual-click-card small {
  display: block;
  color: #777d87;
  font-size: 0.55rem;
  line-height: 1.35;
}

.click-card-left {
  left: 8px;
  bottom: 15px;
}

.click-card-right {
  right: 8px;
  top: 18px;
}

/* =========================================================
   VISUAL 02 — RISK INTELLIGENCE
   ========================================================= */

.visual-risk {
  min-height: 255px;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(248, 86, 15, 0.13),
      transparent 35%
    ),
    #faf9f7;
}

.risk-layer-card {
  position: absolute;
  width: 104px;
  min-height: 72px;
  padding: 12px;
  border: 1px solid rgba(20, 22, 27, 0.08);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 10px 24px rgba(20, 22, 27, 0.08);
}

.risk-layer-card span {
  display: block;
  color: var(--duc-orange);
  font-size: 0.55rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.risk-layer-card strong {
  display: block;
  margin-top: 5px;
  color: #555c67;
  font-size: 0.66rem;
  line-height: 1.3;
}

.risk-layer-back-left {
  left: 22px;
  top: 22px;
}

.risk-layer-back-right {
  right: 22px;
  top: 22px;
}

.risk-layer-bottom-left {
  left: 22px;
  bottom: 22px;
}

.risk-layer-bottom-right {
  right: 22px;
  bottom: 22px;
}

.risk-core-card {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 8;
  width: 150px;
  min-height: 150px;
  padding: 20px 16px;
  transform: translate(-50%, -50%);
  border-radius: 9px;
  text-align: center;
  background:
    linear-gradient(
      145deg,
      var(--duc-orange-light),
      var(--duc-orange)
    );
  box-shadow:
    0 20px 38px rgba(248, 86, 15, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.risk-core-icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 11px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
}

.risk-core-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: var(--duc-orange);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.risk-core-card > span {
  display: block;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.54rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.risk-core-card > strong {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-size: 0.82rem;
}

.risk-core-card > small {
  display: block;
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.53rem;
  line-height: 1.4;
}

/* =========================================================
   VISUAL 03 — REVIEWABLE EVIDENCE
   ========================================================= */

.visual-evidence {
  min-height: 255px;
  background:
    radial-gradient(
      circle at 50% 56%,
      rgba(248, 86, 15, 0.1),
      transparent 39%
    ),
    #faf9f7;
}

.evidence-report {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 210px;
  padding: 18px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(20, 22, 27, 0.09);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 17px 34px rgba(20, 22, 27, 0.12);
}

.evidence-report-head {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: flex-start;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(20, 22, 27, 0.07);
}

.evidence-report-head span {
  display: block;
  color: var(--duc-orange);
  font-size: 0.53rem;
  font-weight: 850;
  text-transform: uppercase;
}

.evidence-report-head strong {
  display: block;
  margin-top: 4px;
  color: var(--duc-ink);
  font-size: 0.72rem;
}

.evidence-report-head i {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background:
    linear-gradient(
      145deg,
      var(--duc-orange-light),
      var(--duc-orange)
    );
}

.evidence-report-line {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(20, 22, 27, 0.06);
  font-size: 0.6rem;
}

.evidence-report-line span {
  color: #6a707b;
}

.evidence-report-line b {
  color: var(--duc-orange);
}

.evidence-report-progress {
  height: 7px;
  margin-top: 13px;
  overflow: hidden;
  border-radius: 999px;
  background: #f0f1f2;
}

.evidence-report-progress span {
  display: block;
  width: 78%;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      var(--duc-orange-light),
      var(--duc-orange)
    );
}

.evidence-side-tile {
  position: absolute;
  z-index: 7;
  width: 82px;
  min-height: 76px;
  padding: 13px;
  border-radius: 7px;
  background:
    linear-gradient(
      145deg,
      var(--duc-orange-light),
      var(--duc-orange)
    );
  box-shadow: 0 14px 27px rgba(248, 86, 15, 0.22);
}

.evidence-side-tile span {
  display: block;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.55rem;
  text-transform: uppercase;
}

.evidence-side-tile strong {
  display: block;
  margin-top: 7px;
  color: #fff;
  font-size: 1.05rem;
}

.evidence-left {
  left: 18px;
  top: 33px;
}

.evidence-right {
  right: 18px;
  bottom: 28px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {
  .detection-usecases-head {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .detection-usecases-head > p {
    max-width: 720px;
  }

  .detection-usecases-grid {
    grid-template-columns: 1fr 1fr;
  }

  .detection-usecase-card:last-child {
    grid-column: 1 / -1;
    max-width: calc(50% - 9px);
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 720px) {
  .detection-usecases-section {
    padding: 72px 0;
  }

  .detection-usecases-head {
    margin-bottom: 34px;
  }

  .detection-usecases-head h2 {
    font-size: clamp(2.15rem, 10vw, 3rem);
    line-height: 1.02;
  }

  .detection-usecases-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .detection-usecase-card:last-child {
    grid-column: auto;
    max-width: none;
  }

  .detection-usecase-card > p {
    min-height: 0;
  }
}

@media (max-width: 430px) {
  .detection-usecase-visual {
    min-height: 235px;
  }

  .visual-costs {
    padding-inline: 12px;
  }

  .visual-click-card {
    width: 92px;
    padding: 10px;
  }

  .visual-main-tile {
    width: 126px;
  }

  .risk-layer-card {
    width: 88px;
    padding: 10px;
  }

  .risk-core-card {
    width: 132px;
    min-height: 140px;
  }

  .evidence-report {
    width: 185px;
  }

  .evidence-side-tile {
    width: 68px;
    padding: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .detection-usecase-visual {
    transition: none;
  }

  .detection-usecase-card:hover .detection-usecase-visual {
    transform: none;
  }
}
/* =========================================================
   COOKIE POLICY — EDITORIAL DECISION FRAMEWORK
   Replaces irregular circular arrows
   ========================================================= */

.cookie-decisions-section {
  --cookie-orange: #f8560f;
  --cookie-orange-light: #ff8743;
  --cookie-orange-soft: #fff1e9;
  --cookie-ink: #15171c;
  --cookie-copy: #656b76;
  --cookie-line: rgba(21, 23, 28, 0.09);

  position: relative;
  overflow: hidden;
  padding: 96px 0 104px;
  color: var(--cookie-ink);
  background:
    radial-gradient(
      circle at 83% 15%,
      rgba(248, 86, 15, 0.055),
      transparent 26%
    ),
    #f3f3f1;
}

.cookie-decisions-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.15;
  background-image:
    radial-gradient(
      rgba(21, 23, 28, 0.16) 0.55px,
      transparent 0.55px
    );
  background-size: 5px 5px;
}

.cookie-decisions-section > .container {
  position: relative;
  z-index: 2;
}

/* Main two-column structure */

.cookie-decisions-layout {
  display: grid;
  grid-template-columns:
    minmax(320px, 0.72fr)
    minmax(600px, 1.28fr);
  gap: 72px;
  align-items: start;
  max-width: 1240px;
  margin: 0 auto;
}

/* =========================================================
   LEFT EDITORIAL COPY
   ========================================================= */

.cookie-decisions-intro {
  position: sticky;
  top: 120px;
  padding-top: 10px;
}

.cookie-decisions-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 19px;
  color: var(--cookie-orange);
  font-size: 0.7rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cookie-decisions-label::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--cookie-orange);
}

.cookie-decisions-intro h2 {
  max-width: 460px;
  margin: 0 0 24px;
  color: var(--cookie-ink) !important;
  font-size: clamp(2.65rem, 3.6vw, 5.2rem);
  line-height: 0.92;
  font-weight: 650;
  letter-spacing: -0.065em;
}

.cookie-decisions-intro > p {
  max-width: 455px;
  margin: 0;
  color: var(--cookie-copy) !important;
  font-size: 0.96rem;
  line-height: 1.74;
}

.cookie-decisions-note {
  margin-top: 32px;
  padding: 19px 0 0;
  border-top: 1px solid rgba(21, 23, 28, 0.12);
}

.cookie-decisions-note span {
  display: block;
  margin-bottom: 8px;
  color: var(--cookie-orange);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.cookie-decisions-note strong {
  display: block;
  max-width: 430px;
  color: #444a54;
  font-size: 0.82rem;
  line-height: 1.62;
  font-weight: 600;
}

/* =========================================================
   RIGHT DECISION BOARD
   ========================================================= */

.cookie-decisions-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* Cards */

.cookie-decision-card {
  position: relative;
  min-width: 0;
  min-height: 250px;
  overflow: hidden;
  padding: 23px;
  border: 1px solid var(--cookie-line);
  border-radius: 5px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(249, 249, 247, 0.96)
    );
  box-shadow:
    0 14px 34px rgba(21, 23, 28, 0.065),
    inset 0 1px 0 #fff;
  transition:
    transform 0.3s cubic-bezier(.22, 1, .36, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.cookie-decision-card:hover {
  transform: translateY(-5px);
  border-color: rgba(248, 86, 15, 0.24);
  box-shadow:
    0 23px 48px rgba(21, 23, 28, 0.1),
    0 10px 27px rgba(248, 86, 15, 0.05);
}

.cookie-card-number {
  margin-bottom: 17px;
  color: var(--cookie-orange);
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.05em;
}

.cookie-card-content {
  position: relative;
  z-index: 4;
  max-width: 65%;
}

.cookie-card-content > span {
  display: block;
  margin-bottom: 7px;
  color: var(--cookie-orange);
  font-size: 0.6rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cookie-card-content h3 {
  margin: 0 0 9px;
  color: var(--cookie-ink) !important;
  font-size: 1.02rem;
  line-height: 1.25;
}

.cookie-card-content p {
  margin: 0;
  color: var(--cookie-copy) !important;
  font-size: 0.72rem;
  line-height: 1.56;
}

/* Shared visual positioning */

.cookie-card-visual {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 16px;
}

/* =========================================================
   VISUAL 01 — ESSENTIAL
   ========================================================= */

.cookie-visual-essential {
  width: 115px;
  height: 116px;
}

.cookie-mini-window {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(21, 23, 28, 0.09);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 13px 25px rgba(21, 23, 28, 0.09);
}

.cookie-mini-window > i {
  position: absolute;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d4d6db;
}

.cookie-mini-window > i:nth-child(1) {
  left: 10px;
  background: var(--cookie-orange);
}

.cookie-mini-window > i:nth-child(2) {
  left: 19px;
}

.cookie-mini-window > i:nth-child(3) {
  left: 28px;
}

.cookie-mini-window::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 26px;
  height: 1px;
  background: rgba(21, 23, 28, 0.07);
}

.cookie-mini-shield {
  position: absolute;
  left: 50%;
  top: 61%;
  width: 55px;
  height: 55px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 15px;
  background:
    linear-gradient(
      145deg,
      var(--cookie-orange-light),
      var(--cookie-orange)
    );
  box-shadow: 0 12px 22px rgba(248, 86, 15, 0.23);
}

.cookie-mini-shield svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   VISUAL 02 — CONSENT
   ========================================================= */

.cookie-visual-consent {
  width: 128px;
  padding: 12px;
  border: 1px solid rgba(21, 23, 28, 0.08);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 13px 26px rgba(21, 23, 28, 0.09);
}

.cookie-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(21, 23, 28, 0.06);
}

.cookie-toggle-row:last-child {
  border-bottom: 0;
}

.cookie-toggle-row span {
  color: #646a75;
  font-size: 0.58rem;
  font-weight: 700;
}

.cookie-toggle-row i {
  position: relative;
  width: 28px;
  height: 15px;
  border-radius: 999px;
  background: #e5e6e8;
}

.cookie-toggle-row i::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(21, 23, 28, 0.17);
}

.cookie-toggle-row i.active {
  background: var(--cookie-orange);
}

.cookie-toggle-row i.active::after {
  left: 15px;
}

/* =========================================================
   VISUAL 03 — ANALYTICS
   ========================================================= */

.cookie-visual-analytics {
  width: 130px;
  height: 112px;
  padding: 14px 13px 11px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 8px;
  border: 1px solid rgba(21, 23, 28, 0.08);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 13px 26px rgba(21, 23, 28, 0.09);
}

.cookie-visual-analytics::before {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 10px;
  height: 1px;
  background: rgba(21, 23, 28, 0.09);
}

.cookie-visual-analytics > span {
  position: relative;
  z-index: 2;
  display: block;
  height: var(--bar-height);
  min-height: 24px;
  border-radius: 5px 5px 1px 1px;
  background:
    linear-gradient(
      180deg,
      var(--cookie-orange-light),
      var(--cookie-orange)
    );
  box-shadow: 0 6px 12px rgba(248, 86, 15, 0.16);
}

/* =========================================================
   VISUAL 04 — PREFERENCES
   ========================================================= */

.cookie-visual-preferences {
  width: 130px;
  padding: 17px 14px;
  border: 1px solid rgba(21, 23, 28, 0.08);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 13px 26px rgba(21, 23, 28, 0.09);
}

.cookie-slider {
  position: relative;
  height: 4px;
  margin: 14px 0;
  border-radius: 999px;
  background: #e7e8ea;
}

.cookie-slider i {
  position: absolute;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--cookie-orange);
  box-shadow: 0 4px 9px rgba(248, 86, 15, 0.25);
}

.slider-one i {
  left: 65%;
}

.slider-two i {
  left: 25%;
}

.slider-three i {
  left: 48%;
}

/* =========================================================
   ORANGE BOTTOM STRIP
   ========================================================= */

.cookie-decisions-metric {
  grid-column: 1 / -1;
  min-height: 118px;
  padding: 24px 27px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  overflow: hidden;
  border-radius: 5px;
  background:
    radial-gradient(
      circle at 82% 50%,
      rgba(255, 255, 255, 0.18),
      transparent 24%
    ),
    linear-gradient(
      105deg,
      var(--cookie-orange-light),
      var(--cookie-orange) 56%,
      #df4400
    );
  box-shadow: 0 17px 34px rgba(248, 86, 15, 0.19);
}

.cookie-decisions-metric > div:first-child {
  max-width: 470px;
}

.cookie-decisions-metric span {
  display: block;
  margin-bottom: 7px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.62rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.cookie-decisions-metric strong {
  display: block;
  color: #fff;
  font-size: 1rem;
  line-height: 1.4;
}

.cookie-metric-value {
  min-width: 180px;
  text-align: right;
}

.cookie-metric-value strong {
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.06em;
}

.cookie-metric-value span {
  margin: 6px 0 0;
  letter-spacing: 0;
  text-transform: none;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {
  .cookie-decisions-layout {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .cookie-decisions-intro {
    position: relative;
    top: auto;
  }

  .cookie-decisions-intro h2 {
    max-width: 760px;
    font-size: clamp(2.7rem, 3vw, 2.6rem);
  }

  .cookie-decisions-intro > p {
    max-width: 720px;
  }
}

@media (max-width: 700px) {
  .cookie-decisions-section {
    padding: 72px 0;
  }

  .cookie-decisions-board {
    grid-template-columns: 1fr;
  }

  .cookie-decision-card {
    min-height: 235px;
  }

  .cookie-decisions-metric {
    grid-column: auto;
    align-items: flex-start;
    flex-direction: column;
  }

  .cookie-metric-value {
    min-width: 0;
    text-align: left;
  }
}

@media (max-width: 480px) {
  .cookie-decisions-intro h2 {
    font-size: clamp(2.4rem, 3vw, 2.6rem);
  }

  .cookie-decision-card {
    min-height: 310px;
  }

  .cookie-card-content {
    max-width: 100%;
  }

  .cookie-card-visual {
    right: 20px;
    bottom: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-decision-card {
    transition: none;
  }

  .cookie-decision-card:hover {
    transform: none;
  }
}
/* =========================================================
   DATA PROCESSING POLICY — BLACK ANALYSIS SECTION
   Reference-style horizontal data charts
   ========================================================= */

.data-processing-analysis-section {
  --dpa-orange: #f8560f;
  --dpa-orange-light: #ff7431;
  --dpa-bg: #08090a;
  --dpa-card: #15171a;
  --dpa-card-light: #1b1d21;
  --dpa-line: rgba(255, 255, 255, 0.15);
  --dpa-white: #ffffff;
  --dpa-copy: #b8bcc5;

  position: relative;
  overflow: hidden;
  padding: 96px 0 104px;
  color: var(--dpa-white);
  background:
    radial-gradient(
      circle at 50% 0,
      rgba(248, 86, 15, 0.12),
      transparent 28%
    ),
    linear-gradient(180deg, #090a0b 0%, #050607 100%);
}

.data-processing-analysis-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );
  background-size: 42px 42px;
}

.data-processing-analysis-section > .container {
  position: relative;
  z-index: 2;
}

/* Heading */

.data-processing-analysis-head {
  max-width: 880px;
  margin: 0 auto 58px;
  text-align: center;
}

.data-processing-analysis-head .eyebrow {
  color: var(--dpa-orange) !important;
}

.data-processing-analysis-head h2 {
  max-width: 820px;
  margin: 12px auto 16px;
  color: #fff !important;
  font-size: clamp(2.25rem, 3.8vw, 3.75rem);
  line-height: 1;
  font-weight: 750;
  letter-spacing: -0.05em;
}

.data-processing-analysis-head p {
  max-width: 760px;
  margin: 0 auto;
  color: var(--dpa-copy) !important;
  font-size: 0.96rem;
  line-height: 1.72;
}

/* Two analytical columns */

.data-processing-analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 54px;
  max-width: 1180px;
  margin: 0 auto;
}

.data-analysis-column {
  min-width: 0;
}

.data-analysis-title {
  min-height: 138px;
  margin-bottom: 18px;
}

.data-analysis-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 6px 13px;
  margin-bottom: 14px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(
    90deg,
    var(--dpa-orange-light),
    var(--dpa-orange)
  );
  font-size: 0.65rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(248, 86, 15, 0.22);
}

.data-analysis-title h3 {
  margin: 0 0 9px;
  color: #fff !important;
  font-size: 1.12rem;
  line-height: 1.3;
}

.data-analysis-title p {
  max-width: 510px;
  margin: 0;
  color: #aeb2bc !important;
  font-size: 0.8rem;
  line-height: 1.6;
}

/* Dark chart card */

.data-analysis-chart {
  padding: 29px 27px;
  border: 1px solid rgba(255, 255, 255, 0.19);
  border-radius: 7px;
  background:
    linear-gradient(
      145deg,
      rgba(30, 32, 36, 0.98),
      rgba(17, 19, 22, 0.98)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 22px 48px rgba(0, 0, 0, 0.32);
}

.data-analysis-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 44px;
  gap: 15px;
  align-items: center;
  min-height: 44px;
}

.data-analysis-label {
  color: #f3f3f4;
  font-size: 0.76rem;
  line-height: 1.3;
}

.data-analysis-track {
  position: relative;
  height: 13px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.13);
}

.data-analysis-track i {
  display: block;
  width: var(--analysis-width);
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      var(--dpa-orange-light),
      var(--dpa-orange)
    );
  box-shadow: 0 0 16px rgba(248, 86, 15, 0.22);
  transform-origin: left center;
  animation: dataAnalysisBarIn 1.1s cubic-bezier(.22, 1, .36, 1) both;
}

.data-analysis-row:nth-child(2) .data-analysis-track i {
  animation-delay: 0.1s;
}

.data-analysis-row:nth-child(3) .data-analysis-track i {
  animation-delay: 0.2s;
}

.data-analysis-row:nth-child(4) .data-analysis-track i {
  animation-delay: 0.3s;
}

.data-analysis-row strong {
  color: #fff;
  font-size: 0.72rem;
  line-height: 1;
  text-align: right;
}

@keyframes dataAnalysisBarIn {
  from {
    transform: scaleX(0);
    opacity: 0;
  }

  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* Explanatory note below chart */

.data-analysis-note {
  margin-top: 18px;
  padding: 17px 19px;
  border-left: 2px solid var(--dpa-orange);
  background: rgba(255, 255, 255, 0.025);
}

.data-analysis-note span {
  display: block;
  margin-bottom: 6px;
  color: var(--dpa-orange);
  font-size: 0.67rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.data-analysis-note p {
  margin: 0;
  color: #aeb2bc !important;
  font-size: 0.76rem;
  line-height: 1.58;
}

/* Four supporting principles */

.data-processing-principles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1180px;
  margin: 42px auto 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

.data-processing-principles > div {
  min-height: 190px;
  padding: 24px 22px;
  background:
    linear-gradient(
      145deg,
      rgba(28, 30, 34, 0.98),
      rgba(17, 19, 22, 0.98)
    );
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.data-processing-principles > div:last-child {
  border-right: 0;
}

.data-processing-principles span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 18px;
  border-radius: 50%;
  color: #fff;
  background: var(--dpa-orange);
  font-size: 0.68rem;
  font-weight: 850;
  box-shadow: 0 7px 16px rgba(248, 86, 15, 0.23);
}

.data-processing-principles strong {
  display: block;
  margin-bottom: 9px;
  color: #fff;
  font-size: 0.88rem;
  line-height: 1.35;
}

.data-processing-principles p {
  margin: 0;
  color: #aeb2bc !important;
  font-size: 0.72rem;
  line-height: 1.58;
}

/* Tablet */

@media (max-width: 980px) {
  .data-processing-analysis-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .data-analysis-title {
    min-height: 0;
  }

  .data-processing-principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .data-processing-principles > div:nth-child(2) {
    border-right: 0;
  }

  .data-processing-principles > div:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* Mobile */

@media (max-width: 620px) {
  .data-processing-analysis-section {
    padding: 72px 0;
  }

  .data-processing-analysis-head {
    margin-bottom: 40px;
  }

  .data-processing-analysis-head h2 {
    font-size: clamp(2rem, 9.5vw, 2.8rem);
    line-height: 1.04;
  }

  .data-analysis-chart {
    padding: 23px 18px;
  }

  .data-analysis-row {
    grid-template-columns: 1fr 42px;
    gap: 8px 12px;
    padding: 9px 0;
  }

  .data-analysis-label {
    grid-column: 1;
  }

  .data-analysis-row strong {
    grid-column: 2;
    grid-row: 1;
  }

  .data-analysis-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .data-processing-principles {
    grid-template-columns: 1fr;
  }

  .data-processing-principles > div,
  .data-processing-principles > div:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .data-processing-principles > div:last-child {
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .data-analysis-track i {
    animation: none;
  }
}
/* =========================================================
   CLICKRONIX FEATURES — INTERACTIVE FOUR-STAGE WORKFLOW
   ========================================================= */

.features-workflow-section {
  --feature-orange: #f8560f;
  --feature-orange-light: #ff7a35;
  --feature-black: #101114;
  --feature-text: #17181b;
  --feature-muted: #626873;

  position: relative;
  overflow: hidden;
  padding: 96px 0 102px;
  color: var(--feature-text);
  background:
    radial-gradient(
      circle at 50% 54%,
      rgba(248, 86, 15, 0.085),
      transparent 28%
    ),
    linear-gradient(180deg, #fafaf9 0%, #f1f1ef 100%);
}

.features-workflow-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    radial-gradient(
      rgba(17, 24, 39, 0.16) 0.6px,
      transparent 0.6px
    );
  background-size: 6px 6px;
}

.features-workflow-section::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  top: 43%;
  height: 130px;
  pointer-events: none;
  transform: rotate(-7deg);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(17, 24, 39, 0.035),
      transparent
    );
}

.features-workflow-section > .container {
  position: relative;
  z-index: 2;
}

/* Heading */

.features-workflow-heading {
  max-width: 920px;
  margin: 0 auto 62px;
  text-align: center;
}

.features-workflow-heading .eyebrow {
  color: var(--feature-orange) !important;
}

.features-workflow-heading h2 {
  max-width: 830px;
  margin: 12px auto 17px;
  color: #121317 !important;
  font-size: clamp(2.3rem, 3.8vw, 3.8rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.052em;
}

.features-workflow-heading p {
  max-width: 760px;
  margin: 0 auto;
  color: var(--feature-muted) !important;
  font-size: 1rem;
  line-height: 1.72;
}

/* Main grid */

.features-workflow-layout {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(280px, 1fr)
    minmax(320px, 0.82fr)
    minmax(280px, 1fr);
  grid-template-areas:
    "card1 center card2"
    "card3 center card4";
  gap: 24px 48px;
  align-items: center;
  max-width: 1260px;
  min-height: 720px;
  margin: 0 auto;
}

.feature-card-1 {
  grid-area: card1;
}

.feature-card-2 {
  grid-area: card2;
}

.feature-card-3 {
  grid-area: card3;
}

.feature-card-4 {
  grid-area: card4;
}

/* Clickable image cards */

.features-workflow-card {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr);
  min-height: 205px;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 22px;
  color: var(--feature-text);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 18px 46px rgba(17, 24, 39, 0.085),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  opacity: 0.62;
  transform: scale(0.96);
  transition:
    opacity 0.45s ease,
    transform 0.45s cubic-bezier(.22, 1, .36, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.features-workflow-card:hover,
.features-workflow-card:focus-visible,
.features-workflow-card.is-active {
  opacity: 1;
  transform: translateY(-6px) scale(1);
  border-color: rgba(248, 86, 15, 0.44);
  box-shadow:
    0 26px 65px rgba(17, 24, 39, 0.14),
    0 12px 30px rgba(248, 86, 15, 0.1);
}

.features-workflow-card:focus-visible {
  outline: 3px solid rgba(248, 86, 15, 0.24);
  outline-offset: 4px;
}

/* Image */

.features-workflow-image {
  position: relative;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #1a1b1f;
}

.features-workflow-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(9, 10, 12, 0.05),
      rgba(9, 10, 12, 0.5)
    );
}

.features-workflow-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 205px;
  object-fit: cover;
  transform: scale(1.02);
  transition:
    transform 0.6s cubic-bezier(.22, 1, .36, 1),
    filter 0.45s ease;
}

.features-workflow-card:hover .features-workflow-image img,
.features-workflow-card.is-active .features-workflow-image img {
  transform: scale(1.09);
  filter: saturate(1.08) contrast(1.03);
}

.features-image-number {
  position: absolute;
  left: 13px;
  top: 13px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background:
    linear-gradient(
      145deg,
      var(--feature-orange-light),
      var(--feature-orange)
    );
  font-size: 0.68rem;
  font-weight: 850;
  box-shadow: 0 8px 20px rgba(248, 86, 15, 0.3);
}

/* Card copy */

.features-workflow-card-copy {
  min-width: 0;
  padding: 22px 22px 20px;
}

.features-card-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--feature-orange);
  font-size: 0.65rem;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.features-workflow-card h3 {
  margin: 0 0 9px;
  color: #15171b !important;
  font-size: 1.08rem;
  line-height: 1.25;
  transition: color 0.25s ease;
}

.features-workflow-card:hover h3,
.features-workflow-card.is-active h3 {
  color: var(--feature-orange) !important;
}

.features-workflow-card p {
  margin: 0;
  color: #676d77 !important;
  font-size: 0.77rem;
  line-height: 1.57;
}

.features-card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  color: #15171b;
  font-size: 0.73rem;
  font-weight: 800;
}

.features-card-link i {
  color: var(--feature-orange);
  font-style: normal;
  transition: transform 0.25s ease;
}

.features-workflow-card:hover .features-card-link i {
  transform: translate(3px, -3px);
}

/* Central animation */

.features-workflow-center {
  position: relative;
  grid-area: center;
  justify-self: center;
  width: 360px;
  height: 360px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  isolation: isolate;
}

.features-workflow-center::before {
  content: "";
  position: absolute;
  inset: 31px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(248, 86, 15, 0.13),
      transparent 66%
    );
  filter: blur(12px);
}

.features-orbit {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.features-orbit-outer {
  inset: 0;
  border: 1px dashed rgba(248, 86, 15, 0.32);
  animation: featureOrbitClockwise 22s linear infinite;
}

.features-orbit-middle {
  inset: 36px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  animation: featureOrbitCounter 18s linear infinite;
}

.features-orbit-inner {
  inset: 78px;
  border: 1px dashed rgba(248, 86, 15, 0.26);
  animation: featureOrbitClockwise 13s linear infinite;
}

.features-workflow-progress {
  position: absolute;
  inset: 23px;
  border-radius: 50%;
  transform: rotate(0deg);
  transition: transform 0.8s cubic-bezier(.22, 1, .36, 1);
}

.features-progress-quarter {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 19px solid transparent;
}

.features-progress-quarter.quarter-1 {
  border-top-color: #ff570b;
}

.features-progress-quarter.quarter-2 {
  border-right-color: #ff8550;
}

.features-progress-quarter.quarter-3 {
  border-bottom-color: #ff6823;
}

.features-progress-quarter.quarter-4 {
  border-left-color: #ff9a68;
}

.features-workflow-center[data-active="0"]
  .features-workflow-progress {
  transform: rotate(0deg);
}

.features-workflow-center[data-active="1"]
  .features-workflow-progress {
  transform: rotate(90deg);
}

.features-workflow-center[data-active="2"]
  .features-workflow-progress {
  transform: rotate(180deg);
}

.features-workflow-center[data-active="3"]
  .features-workflow-progress {
  transform: rotate(270deg);
}

/* Number nodes */

.features-orbit-node {
  position: absolute;
  z-index: 5;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #191a1e;
  border: 4px solid #f6f6f4;
  font-size: 0.65rem;
  font-weight: 850;
  box-shadow:
    0 9px 22px rgba(17, 24, 39, 0.18),
    0 0 0 4px rgba(248, 86, 15, 0.1);
  transition:
    background 0.35s ease,
    transform 0.35s ease;
}

.node-1 {
  left: 50%;
  top: -1px;
  transform: translateX(-50%);
}

.node-2 {
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
}

.node-3 {
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
}

.node-4 {
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
}

.features-workflow-center[data-active="0"] .node-1,
.features-workflow-center[data-active="1"] .node-2,
.features-workflow-center[data-active="2"] .node-3,
.features-workflow-center[data-active="3"] .node-4 {
  background: var(--feature-orange);
}

.features-workflow-center[data-active="0"] .node-1 {
  transform: translateX(-50%) scale(1.18);
}

.features-workflow-center[data-active="1"] .node-2 {
  transform: translateY(-50%) scale(1.18);
}

.features-workflow-center[data-active="2"] .node-3 {
  transform: translateX(-50%) scale(1.18);
}

.features-workflow-center[data-active="3"] .node-4 {
  transform: translateY(-50%) scale(1.18);
}

/* Center core */

.features-workflow-core {
  position: relative;
  z-index: 7;
  width: 166px;
  height: 166px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(
      circle at 34% 26%,
      #282a30,
      #111216 72%
    );
  border: 6px solid #fff;
  box-shadow:
    0 21px 50px rgba(17, 24, 39, 0.23),
    0 0 0 7px rgba(248, 86, 15, 0.12);
}

.features-workflow-core span {
  color: var(--feature-orange);
  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.features-workflow-core strong {
  display: block;
  max-width: 130px;
  margin-top: 8px;
  color: #fff;
  font-size: 1.03rem;
  line-height: 1.2;
}

.features-workflow-core small {
  display: block;
  max-width: 125px;
  margin-top: 7px;
  color: #adb1bb;
  font-size: 0.65rem;
  line-height: 1.4;
}

/* Bottom strip */

.features-workflow-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  max-width: 1180px;
  margin: 42px auto 0;
  padding: 24px 26px;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 16px 38px rgba(17, 24, 39, 0.065);
}

.features-workflow-footer span {
  display: block;
  margin-bottom: 6px;
  color: var(--feature-orange);
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.features-workflow-footer strong {
  color: #17181b;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Animations */

@keyframes featureOrbitClockwise {
  to {
    transform: rotate(360deg);
  }
}

@keyframes featureOrbitCounter {
  to {
    transform: rotate(-360deg);
  }
}

/* Tablet */

@media (max-width: 1120px) {
  .features-workflow-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "center center"
      "card1 card2"
      "card3 card4";
    min-height: 0;
    gap: 22px;
  }

  .features-workflow-center {
    margin: 0 auto 28px;
  }

  .features-workflow-card {
    opacity: 1;
    transform: none;
  }
}

/* Small tablet */

@media (max-width: 820px) {
  .features-workflow-section {
    padding: 76px 0 82px;
  }

  .features-workflow-heading {
    margin-bottom: 44px;
  }

  .features-workflow-heading h2 {
    font-size: clamp(2.1rem, 8vw, 3rem);
    line-height: 1.03;
  }

  .features-workflow-card {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .features-workflow-image img {
    min-height: 220px;
  }
}

/* Mobile */

@media (max-width: 650px) {
  .features-workflow-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "center"
      "card1"
      "card2"
      "card3"
      "card4";
  }

  .features-workflow-center {
    width: 290px;
    height: 290px;
    margin-bottom: 20px;
  }

  .features-workflow-progress {
    inset: 18px;
  }

  .features-progress-quarter {
    border-width: 15px;
  }

  .features-workflow-core {
    width: 137px;
    height: 137px;
  }

  .features-workflow-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .features-workflow-image {
    height: 210px;
  }

  .features-workflow-image img {
    min-height: 210px;
  }

  .features-workflow-card-copy {
    padding: 21px;
  }

  .features-workflow-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Small phones */

@media (max-width: 390px) {
  .features-workflow-center {
    width: 260px;
    height: 260px;
  }

  .features-workflow-core {
    width: 122px;
    height: 122px;
  }

  .features-workflow-core strong {
    font-size: 0.88rem;
  }

  .features-workflow-core small {
    display: none;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .features-orbit,
  .features-workflow-progress {
    animation: none !important;
    transition: none !important;
  }

  .features-workflow-card,
  .features-workflow-image img {
    transition: none !important;
  }
}
/* =========================================================
   PPC MANAGERS — SIX-LAYER TRAFFIC-QUALITY WORKFLOW
   Reference-inspired stacked vector infographic
   ========================================================= */

.ppc-layer-workflow-section {
  --ppc-orange: #f8560f;
  --ppc-orange-light: #ff7b3e;
  --ppc-orange-soft: #ff9b68;
  --ppc-black: #15171b;
  --ppc-text: #666d78;
  --ppc-line: rgba(17, 24, 39, 0.12);

  position: relative;
  overflow: hidden;
  padding: 94px 0 105px;
  color: var(--ppc-black);
  background:
    radial-gradient(
      circle at 49% 57%,
      rgba(248, 86, 15, 0.09),
      transparent 30%
    ),
    linear-gradient(180deg, #fafaf9 0%, #f1f1ef 100%);
}

.ppc-layer-workflow-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.24;
  background-image:
    radial-gradient(
      rgba(17, 24, 39, 0.15) 0.55px,
      transparent 0.55px
    );
  background-size: 5px 5px;
}

.ppc-layer-workflow-section::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  top: 43%;
  height: 110px;
  pointer-events: none;
  transform: rotate(-7deg);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(17, 24, 39, 0.035),
      transparent
    );
}

.ppc-layer-workflow-section > .container {
  position: relative;
  z-index: 2;
}

/* Heading */

.ppc-layer-heading {
  max-width: 930px;
  margin: 0 auto 60px;
  text-align: center;
}

.ppc-layer-heading .eyebrow {
  color: var(--ppc-orange) !important;
}

.ppc-layer-heading h2 {
  max-width: 850px;
  margin: 12px auto 17px;
  color: #111318 !important;
  font-size: clamp(2.25rem, 3.7vw, 3.7rem);
  line-height: 1.01;
  font-weight: 800;
  letter-spacing: -0.05em;
}

.ppc-layer-heading p {
  max-width: 790px;
  margin: 0 auto;
  color: #626975 !important;
  font-size: 0.98rem;
  line-height: 1.7;
}

/* Main three-column layout */

.ppc-layer-layout {
  display: grid;
  grid-template-columns:
    minmax(245px, 0.78fr)
    minmax(390px, 1.05fr)
    minmax(390px, 1.17fr);
  gap: 38px;
  align-items: center;
  width: min(100%, 1240px);
  margin: 0 auto;
}

/* =========================================================
   LEFT LABELS
   ========================================================= */

.ppc-layer-labels {
  display: grid;
  gap: 12px;
  align-content: center;
}

.ppc-layer-label {
  position: relative;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-height: 61px;
  padding: 10px 18px 10px 10px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow:
    0 9px 24px rgba(17, 24, 39, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.ppc-layer-label:hover,
.ppc-layer-label.active {
  transform: translateX(5px);
  border-color: rgba(248, 86, 15, 0.34);
  box-shadow:
    0 14px 30px rgba(17, 24, 39, 0.08),
    0 5px 18px rgba(248, 86, 15, 0.08);
}

.ppc-layer-label > span {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ppc-orange);
  background: #fff3ec;
  font-size: 0.68rem;
  font-weight: 850;
}

.ppc-layer-label.active > span {
  color: #fff;
  background:
    linear-gradient(
      145deg,
      var(--ppc-orange-light),
      var(--ppc-orange)
    );
  box-shadow: 0 7px 17px rgba(248, 86, 15, 0.23);
}

.ppc-layer-label strong {
  display: block;
  color: #17191d;
  font-size: 0.82rem;
  line-height: 1.25;
}

.ppc-layer-label small {
  display: block;
  margin-top: 3px;
  color: #767c86;
  font-size: 0.66rem;
  line-height: 1.35;
}

.ppc-layer-label i {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  width: 38px;
  height: 1px;
  transform: translateY(-50%);
  background:
    linear-gradient(
      90deg,
      rgba(248, 86, 15, 0.75),
      rgba(248, 86, 15, 0.08)
    );
}

.ppc-layer-label i::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ppc-orange);
  transform: translateY(-50%);
  box-shadow: 0 0 0 4px rgba(248, 86, 15, 0.1);
}

/* =========================================================
   CENTRAL VECTOR STACK
   ========================================================= */

.ppc-layer-stack {
  position: relative;
  width: 410px;
  height: 535px;
  max-width: 100%;
  margin: 0 auto;
  perspective: 1050px;
  transform-style: preserve-3d;
}

.ppc-stack-shadow {
  position: absolute;
  left: 50%;
  bottom: 20px;
  width: 290px;
  height: 60px;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse,
      rgba(17, 24, 39, 0.2),
      transparent 68%
    );
  transform: translateX(-50%);
  filter: blur(12px);
  opacity: 0.54;
}

/*
  Each layer is a real CSS vector parallelogram.
  Larger vertical separation keeps every level visible.
*/

.ppc-stack-layer {
  position: absolute;
  left: 50%;
  width: 286px;
  height: 132px;
  padding: 29px 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  clip-path:
    polygon(
      50% 0,
      100% 27%,
      50% 100%,
      0 27%
    );
  transform:
    translateX(-50%)
    rotateX(57deg)
    rotateZ(-2deg);
  transform-origin: center;
  text-align: center;
  color: #fff;
  box-shadow:
    0 24px 34px rgba(17, 24, 39, 0.14);
  transition:
    transform 0.35s ease,
    filter 0.35s ease;
}

.ppc-stack-layer::before {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: -1;
  clip-path: inherit;
  border: 1px solid rgba(255, 255, 255, 0.17);
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.11),
      transparent 53%
    );
}

.ppc-stack-layer span,
.ppc-stack-layer strong {
  position: relative;
  z-index: 2;
  color: #fff;
}

.ppc-stack-layer span {
  margin-bottom: 4px;
  font-size: 0.6rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.ppc-stack-layer strong {
  font-size: 0.82rem;
  line-height: 1.25;
}

/* Bottom to top positioning */

.ppc-stack-layer.layer-06 {
  top: 351px;
  z-index: 1;
  opacity: 0.54;
  background:
    linear-gradient(145deg, #ffb490, #f8560f);
}

.ppc-stack-layer.layer-05 {
  top: 290px;
  z-index: 2;
  opacity: 0.62;
  background:
    linear-gradient(145deg, #ffad84, #f8560f);
}

.ppc-stack-layer.layer-04 {
  top: 229px;
  z-index: 3;
  opacity: 0.7;
  background:
    linear-gradient(145deg, #ff9d6c, #f8560f);
}

.ppc-stack-layer.layer-03 {
  top: 168px;
  z-index: 4;
  opacity: 0.79;
  background:
    linear-gradient(145deg, #ff9259, #f8560f);
}

.ppc-stack-layer.layer-02 {
  top: 107px;
  z-index: 5;
  opacity: 0.88;
  background:
    linear-gradient(145deg, #ff8142, #f8560f);
}

.ppc-stack-layer.layer-01 {
  top: 46px;
  z-index: 6;
  opacity: 1;
  background:
    radial-gradient(
      circle at 32% 20%,
      rgba(255, 181, 135, 0.75),
      transparent 25%
    ),
    linear-gradient(145deg, #ff7433, #e94804);
  filter: drop-shadow(0 20px 23px rgba(248, 86, 15, 0.2));
}

.ppc-stack-layer:hover {
  transform:
    translateX(-50%)
    translateY(-7px)
    rotateX(57deg)
    rotateZ(-2deg)
    scale(1.025);
  filter: brightness(1.04);
}

/* Text floating above the top layer */

.ppc-stack-top-copy {
  position: absolute;
  left: 50%;
  top: 93px;
  z-index: 12;
  width: 165px;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}

.ppc-stack-top-copy small {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.58rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.15em;
}

.ppc-stack-top-copy strong {
  display: block;
  color: #fff;
  font-size: 0.86rem;
  line-height: 1.2;
}

/* Slow floating animation */

.ppc-layer-stack {
  animation: ppcLayerStackFloat 5.2s ease-in-out infinite;
}

@keyframes ppcLayerStackFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

/* =========================================================
   RIGHT INFORMATION CARDS
   ========================================================= */

.ppc-layer-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ppc-layer-detail {
  position: relative;
  min-height: 200px;
  padding: 22px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  background: rgba(255, 255, 255, 0.76);
  box-shadow:
    0 12px 30px rgba(17, 24, 39, 0.055);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.ppc-layer-detail:hover {
  transform: translateY(-4px);
  border-color: rgba(248, 86, 15, 0.26);
  box-shadow:
    0 19px 42px rgba(17, 24, 39, 0.09);
}

.ppc-layer-detail > span {
  display: block;
  margin-bottom: 9px;
  color: var(--ppc-orange);
  font-size: 0.64rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ppc-layer-detail h3 {
  margin: 0 0 9px;
  color: #17191d !important;
  font-size: 0.94rem;
  line-height: 1.3;
}

.ppc-layer-detail p {
  margin: 0;
  color: #656b76 !important;
  font-size: 0.72rem;
  line-height: 1.55;
}

.ppc-layer-detail ul {
  display: grid;
  gap: 7px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}

.ppc-layer-detail li {
  position: relative;
  padding-left: 13px;
  color: #626873;
  font-size: 0.67rem;
  line-height: 1.4;
}

.ppc-layer-detail li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--ppc-orange);
}

.ppc-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 15px;
}

.ppc-detail-tags b {
  display: inline-flex;
  padding: 6px 8px;
  border: 1px solid rgba(248, 86, 15, 0.23);
  border-radius: 4px;
  color: #6c4b3d;
  background: #fff8f4;
  font-size: 0.59rem;
  line-height: 1;
  font-weight: 700;
}

/* Orange final panel */

.ppc-layer-benefit {
  overflow: hidden;
  color: #fff;
  border-color: transparent;
  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(255, 255, 255, 0.17),
      transparent 26%
    ),
    linear-gradient(
      145deg,
      var(--ppc-orange-light),
      var(--ppc-orange)
    );
}

.ppc-layer-benefit > span,
.ppc-layer-benefit h3 {
  position: relative;
  z-index: 3;
  color: #fff !important;
}

.ppc-layer-benefit h3 {
  font-size: 0.97rem;
  line-height: 1.42;
}

.ppc-benefit-rings {
  position: absolute;
  right: -30px;
  top: -15px;
  width: 170px;
  height: 170px;
}

.ppc-benefit-rings i {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
}

.ppc-benefit-rings i:nth-child(1) {
  width: 125px;
  height: 125px;
  left: 14px;
  top: 8px;
}

.ppc-benefit-rings i:nth-child(2) {
  width: 105px;
  height: 105px;
  right: 0;
  top: 35px;
}

.ppc-benefit-rings i:nth-child(3) {
  width: 80px;
  height: 80px;
  left: 0;
  bottom: 0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1120px) {
  .ppc-layer-layout {
    grid-template-columns: minmax(230px, 0.75fr) minmax(380px, 1.25fr);
  }

  .ppc-layer-details {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 15px;
  }

  .ppc-layer-detail {
    min-height: 215px;
  }
}

@media (max-width: 860px) {
  .ppc-layer-workflow-section {
    padding: 76px 0 82px;
  }

  .ppc-layer-heading {
    margin-bottom: 42px;
  }

  .ppc-layer-layout {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .ppc-layer-stack {
    order: 1;
  }

  .ppc-layer-labels {
    order: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ppc-layer-label i {
    display: none;
  }

  .ppc-layer-details {
    order: 3;
    grid-column: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ppc-layer-label:hover,
  .ppc-layer-label.active {
    transform: translateY(-3px);
  }
}

@media (max-width: 560px) {
  .ppc-layer-heading h2 {
    font-size: clamp(2rem, 10vw, 2.7rem);
    line-height: 1.04;
  }

  .ppc-layer-heading p {
    font-size: 0.9rem;
  }

  .ppc-layer-stack {
    width: 340px;
    height: 465px;
    transform: scale(0.9);
    transform-origin: center top;
    margin-bottom: -40px;
  }

  .ppc-stack-layer {
    width: 245px;
    height: 112px;
  }

  .ppc-stack-layer.layer-06 {
    top: 310px;
  }

  .ppc-stack-layer.layer-05 {
    top: 258px;
  }

  .ppc-stack-layer.layer-04 {
    top: 206px;
  }

  .ppc-stack-layer.layer-03 {
    top: 154px;
  }

  .ppc-stack-layer.layer-02 {
    top: 102px;
  }

  .ppc-stack-layer.layer-01 {
    top: 50px;
  }

  .ppc-stack-top-copy {
    top: 91px;
  }

  .ppc-layer-labels,
  .ppc-layer-details {
    grid-template-columns: 1fr;
  }

  .ppc-layer-detail {
    min-height: 0;
  }
}

@media (max-width: 380px) {
  .ppc-layer-stack {
    width: 310px;
    transform: scale(0.82);
    margin-left: -5px;
    margin-bottom: -75px;
  }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
  .ppc-layer-stack {
    animation: none;
  }

  .ppc-stack-layer,
  .ppc-layer-label,
  .ppc-layer-detail {
    transition: none;
  }
}
/* =========================================================
   CLICKRONIX — PPC SIX-LAYER WORKFLOW
   FINAL CONFLICT-SAFE CSS
   Replace the old PPC layer workflow CSS with this block,
   or paste this at the absolute end of pages.css.
   ========================================================= */

.ppc-layer-workflow-section {
  --ppc-orange: #f8560f;
  --ppc-orange-2: #ff6a22;
  --ppc-orange-3: #ff8650;
  --ppc-orange-4: #ffa078;
  --ppc-orange-5: #ffb99d;
  --ppc-orange-6: #ffd0bd;
  --ppc-ink: #17191d;
  --ppc-copy: #666d78;
  --ppc-border: rgba(20, 22, 27, 0.10);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 92px 0 105px;
  color: var(--ppc-ink);
  background:
    radial-gradient(circle at 50% 58%, rgba(248, 86, 15, 0.09), transparent 31%),
    linear-gradient(180deg, #fafaf9 0%, #f1f1ef 100%);
}

.ppc-layer-workflow-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.2;
  background-image:
    radial-gradient(rgba(17, 24, 39, 0.16) 0.55px, transparent 0.55px);
  background-size: 5px 5px;
}

.ppc-layer-workflow-section::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  top: 43%;
  z-index: -1;
  height: 115px;
  pointer-events: none;
  transform: rotate(-7deg);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(17, 24, 39, 0.04),
      transparent
    );
}

.ppc-layer-workflow-section > .container {
  position: relative;
  z-index: 2;
}

/* Heading */

.ppc-layer-heading {
  width: min(100%, 900px);
  margin: 0 auto 54px;
  text-align: center;
}

.ppc-layer-heading .eyebrow {
  color: var(--ppc-orange) !important;
}

.ppc-layer-heading h2 {
  width: min(100%, 820px);
  margin: 12px auto 16px;
  color: #111318 !important;
  font-size: clamp(2.15rem, 3.4vw, 3.45rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.048em;
}

.ppc-layer-heading p {
  width: min(100%, 760px);
  margin: 0 auto;
  color: #626975 !important;
  font-size: 0.98rem;
  line-height: 1.7;
}

/* Main layout — prevents cards from covering the stack */

.ppc-layer-layout {
  display: grid !important;
  grid-template-columns:
    minmax(270px, 0.82fr)
    minmax(430px, 1.15fr)
    minmax(430px, 1.18fr) !important;
  gap: 54px !important;
  align-items: center;
  width: min(100%, 1320px);
  margin: 0 auto;
}

.ppc-layer-layout > * {
  min-width: 0;
}

/* =========================================================
   LEFT LAYER LABELS
   ========================================================= */

.ppc-layer-labels {
  display: grid;
  gap: 13px;
  align-content: center;
  width: 100%;
}

.ppc-layer-label {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 66px;
  padding: 10px 22px 10px 10px;
  border: 1px solid var(--ppc-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    0 10px 25px rgba(17, 24, 39, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.ppc-layer-label:hover,
.ppc-layer-label.active {
  transform: translateX(5px);
  border-color: rgba(248, 86, 15, 0.36);
  box-shadow:
    0 15px 32px rgba(17, 24, 39, 0.08),
    0 7px 20px rgba(248, 86, 15, 0.08);
}

.ppc-layer-label > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ppc-orange);
  background: #fff1e9;
  font-size: 0.68rem;
  font-weight: 850;
}

.ppc-layer-label.active > span {
  color: #fff;
  background: linear-gradient(145deg, #ff7b3e, var(--ppc-orange));
  box-shadow: 0 8px 18px rgba(248, 86, 15, 0.24);
}

.ppc-layer-label strong {
  display: block;
  color: #17191d;
  font-size: 0.84rem;
  line-height: 1.25;
}

.ppc-layer-label small {
  display: block;
  margin-top: 3px;
  color: #767c86;
  font-size: 0.67rem;
  line-height: 1.35;
}

.ppc-layer-label i {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  width: 43px;
  height: 1px;
  transform: translateY(-50%);
  background:
    linear-gradient(
      90deg,
      rgba(248, 86, 15, 0.72),
      rgba(248, 86, 15, 0.08)
    );
}

.ppc-layer-label i::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ppc-orange);
  transform: translateY(-50%);
  box-shadow: 0 0 0 4px rgba(248, 86, 15, 0.10);
}

/* =========================================================
   CENTRAL 3D STACK
   Real slab depth instead of flat diamonds
   ========================================================= */

.ppc-layer-stack {
  position: relative !important;
  width: 430px !important;
  height: 590px !important;
  max-width: 100%;
  margin: 0 auto;
  perspective: 1300px;
  transform-style: preserve-3d;
  animation: ppcStackFloat 6s ease-in-out infinite;
}

.ppc-stack-shadow {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 320px;
  height: 72px;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse,
      rgba(24, 17, 13, 0.28),
      rgba(24, 17, 13, 0.08) 46%,
      transparent 72%
    );
  transform: translateX(-50%);
  filter: blur(14px);
  opacity: 0.66;
}

/*
  Top face = .ppc-stack-layer
  Front thickness = ::after
  Gloss highlight = ::before
*/

.ppc-stack-layer {
  --layer-top: #ff6a22;
  --layer-side-a: #e74800;
  --layer-side-b: #ff6320;

  position: absolute !important;
  left: 50% !important;
  width: 330px !important;
  height: 172px !important;
  padding: 42px 46px 53px !important;
  box-sizing: border-box;

  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  clip-path: polygon(
    50% 0%,
    97% 24%,
    97% 68%,
    50% 100%,
    3% 68%,
    3% 24%
  ) !important;

  transform:
    translateX(-50%)
    rotateX(58deg)
    rotateZ(-1deg) !important;
  transform-origin: center center;
  transform-style: preserve-3d;

  color: #fff !important;
  text-align: center;
  overflow: visible;
  isolation: isolate;

  background:
    radial-gradient(
      circle at 33% 16%,
      rgba(255, 255, 255, 0.34),
      transparent 28%
    ),
    linear-gradient(145deg, var(--layer-top), #f8560f 74%) !important;

  border: 0 !important;
  border-radius: 24px !important;

  filter:
    drop-shadow(0 17px 16px rgba(75, 30, 11, 0.18))
    drop-shadow(0 5px 4px rgba(248, 86, 15, 0.10));

  transition:
    transform 0.32s ease,
    filter 0.32s ease;
}

/* glossy top outline */
.ppc-stack-layer::before {
  content: "" !important;
  position: absolute;
  inset: 7px 10px 35px;
  z-index: -1;
  clip-path: polygon(
    50% 0%,
    100% 29%,
    50% 100%,
    0% 29%
  );
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.20),
      rgba(255, 255, 255, 0.02) 58%
    );
  pointer-events: none;
}

/* visible extruded front/side thickness */
.ppc-stack-layer::after {
  content: "" !important;
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 0;
  z-index: -2;
  height: 42px;
  clip-path: polygon(
    0 0,
    50% 78%,
    100% 0,
    100% 46%,
    50% 100%,
    0 46%
  );
  border-radius: 0 0 22px 22px;
  background:
    linear-gradient(
      90deg,
      var(--layer-side-a),
      var(--layer-side-b) 50%,
      #d93f00
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 15px 22px rgba(84, 35, 14, 0.18);
}

.ppc-stack-layer span,
.ppc-stack-layer strong {
  position: relative;
  z-index: 4;
  display: block;
  width: 100%;
  color: #fff !important;
  text-shadow: 0 2px 7px rgba(71, 26, 7, 0.28);
}

.ppc-stack-layer span {
  margin-bottom: 5px;
  font-size: 0.64rem !important;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.ppc-stack-layer strong {
  max-width: 220px;
  margin: 0 auto;
  font-size: 0.9rem !important;
  line-height: 1.22;
  font-weight: 800;
}

/* Spacing and depth: bottom to top */

.ppc-stack-layer.layer-06 {
  top: 388px !important;
  z-index: 1;
  opacity: 0.52;
  --layer-top: #ffd0bd;
  --layer-side-a: #e89875;
  --layer-side-b: #f6aa89;
}

.ppc-stack-layer.layer-05 {
  top: 316px !important;
  z-index: 2;
  opacity: 0.62;
  --layer-top: #ffb99d;
  --layer-side-a: #df7d57;
  --layer-side-b: #f3946d;
}

.ppc-stack-layer.layer-04 {
  top: 244px !important;
  z-index: 3;
  opacity: 0.72;
  --layer-top: #ffa078;
  --layer-side-a: #d9673d;
  --layer-side-b: #ee8155;
}

.ppc-stack-layer.layer-03 {
  top: 172px !important;
  z-index: 4;
  opacity: 0.82;
  --layer-top: #ff8650;
  --layer-side-a: #d95121;
  --layer-side-b: #ed6d38;
}

.ppc-stack-layer.layer-02 {
  top: 100px !important;
  z-index: 5;
  opacity: 0.92;
  --layer-top: #ff6f2a;
  --layer-side-a: #ce4000;
  --layer-side-b: #e95813;
}

.ppc-stack-layer.layer-01 {
  top: 28px !important;
  z-index: 6;
  opacity: 1;
  --layer-top: #f8560f;
  --layer-side-a: #be3500;
  --layer-side-b: #ea4b00;
  filter:
    drop-shadow(0 23px 22px rgba(101, 37, 8, 0.22))
    drop-shadow(0 7px 6px rgba(248, 86, 15, 0.15));
}

.ppc-stack-layer:hover {
  transform:
    translateX(-50%)
    translateY(-7px)
    rotateX(58deg)
    rotateZ(-1deg)
    scale(1.025) !important;
  filter:
    brightness(1.04)
    drop-shadow(0 25px 24px rgba(75, 30, 11, 0.22));
}

/* Hide legacy top-copy overlay if the labels already exist inside layer 01 */
.ppc-stack-top-copy {
  display: none !important;
}

@keyframes ppcStackFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

/* =========================================================
   RIGHT INFORMATION CARDS
   ========================================================= */

.ppc-layer-details {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-self: stretch;
}

.ppc-layer-detail {
  position: relative;
  min-width: 0;
  min-height: 205px;
  padding: 22px !important;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.10) !important;
  border-radius: 0 !important;
  color: var(--ppc-ink);
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 13px 31px rgba(17, 24, 39, 0.06) !important;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.ppc-layer-detail:hover {
  transform: translateY(-4px);
  border-color: rgba(248, 86, 15, 0.27) !important;
  box-shadow: 0 20px 43px rgba(17, 24, 39, 0.09) !important;
}

.ppc-layer-detail > span {
  display: block;
  margin-bottom: 9px;
  color: var(--ppc-orange) !important;
  font-size: 0.64rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ppc-layer-detail h3 {
  margin: 0 0 9px;
  color: #17191d !important;
  font-size: 0.96rem;
  line-height: 1.3;
}

.ppc-layer-detail p {
  margin: 0;
  color: #656b76 !important;
  font-size: 0.74rem;
  line-height: 1.56;
}

.ppc-layer-detail ul {
  display: grid;
  gap: 7px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}

.ppc-layer-detail li {
  position: relative;
  padding-left: 14px;
  color: #626873 !important;
  font-size: 0.68rem;
  line-height: 1.42;
}

.ppc-layer-detail li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--ppc-orange);
}

.ppc-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 15px;
}

.ppc-detail-tags b {
  display: inline-flex;
  padding: 6px 9px;
  border: 1px solid rgba(248, 86, 15, 0.23);
  border-radius: 4px;
  color: #6c4b3d !important;
  background: #fff8f4;
  font-size: 0.59rem;
  line-height: 1;
  font-weight: 700;
}

/* Orange outcome panel */

.ppc-layer-benefit {
  color: #fff !important;
  border-color: transparent !important;
  background:
    radial-gradient(
      circle at 86% 20%,
      rgba(255, 255, 255, 0.18),
      transparent 28%
    ),
    linear-gradient(145deg, #ff7131, var(--ppc-orange)) !important;
}

.ppc-layer-benefit > span,
.ppc-layer-benefit h3,
.ppc-layer-benefit p {
  position: relative;
  z-index: 3;
  color: #fff !important;
}

.ppc-layer-benefit h3 {
  font-size: 1rem;
  line-height: 1.42;
}

.ppc-benefit-rings {
  position: absolute;
  right: -30px;
  top: -15px;
  width: 170px;
  height: 170px;
  pointer-events: none;
}

.ppc-benefit-rings i {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
}

.ppc-benefit-rings i:nth-child(1) {
  width: 125px;
  height: 125px;
  left: 14px;
  top: 8px;
}

.ppc-benefit-rings i:nth-child(2) {
  width: 105px;
  height: 105px;
  right: 0;
  top: 35px;
}

.ppc-benefit-rings i:nth-child(3) {
  width: 80px;
  height: 80px;
  left: 0;
  bottom: 0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1220px) {
  .ppc-layer-layout {
    grid-template-columns:
      minmax(250px, 0.82fr)
      minmax(410px, 1.18fr) !important;
    gap: 44px !important;
  }

  .ppc-layer-details {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    margin-top: 12px;
  }

  .ppc-layer-detail {
    min-height: 215px;
  }
}

@media (max-width: 920px) {
  .ppc-layer-workflow-section {
    padding: 76px 0 82px;
  }

  .ppc-layer-layout {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .ppc-layer-stack {
    order: 1;
  }

  .ppc-layer-labels {
    order: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ppc-layer-label i {
    display: none;
  }

  .ppc-layer-details {
    order: 3;
    grid-column: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .ppc-layer-workflow-section {
    padding: 66px 0 72px;
  }

  .ppc-layer-heading {
    margin-bottom: 36px;
  }

  .ppc-layer-heading h2 {
    font-size: clamp(2rem, 10vw, 2.7rem);
  }

  .ppc-layer-stack {
    width: 340px !important;
    height: 505px !important;
    transform: scale(0.88);
    transform-origin: top center;
    margin-bottom: -55px;
  }

  .ppc-stack-layer {
    width: 292px !important;
    height: 151px !important;
    padding: 36px 36px 47px !important;
  }

  .ppc-stack-layer.layer-06 { top: 334px !important; }
  .ppc-stack-layer.layer-05 { top: 272px !important; }
  .ppc-stack-layer.layer-04 { top: 210px !important; }
  .ppc-stack-layer.layer-03 { top: 148px !important; }
  .ppc-stack-layer.layer-02 { top: 86px !important; }
  .ppc-stack-layer.layer-01 { top: 24px !important; }

  .ppc-layer-labels,
  .ppc-layer-details {
    grid-template-columns: 1fr !important;
  }

  .ppc-layer-label {
    min-height: 64px;
  }

  .ppc-layer-detail {
    min-height: 0;
  }
}

@media (max-width: 390px) {
  .ppc-layer-stack {
    width: 310px !important;
    transform: scale(0.80);
    margin-bottom: -95px;
  }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
  .ppc-layer-stack {
    animation: none !important;
  }

  .ppc-stack-layer,
  .ppc-layer-label,
  .ppc-layer-detail {
    transition: none !important;
  }

  .ppc-stack-layer:hover,
  .ppc-layer-label:hover,
  .ppc-layer-detail:hover {
    transform: none;
  }
}
/* =========================================================
   CLICKRONIX THANK-YOU HERO
========================================================= */

.thank-you-hero {
  position: relative;
  min-height: 660px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(
      circle at 82% 35%,
      rgba(255, 91, 0, 0.17),
      transparent 32%
    ),
    radial-gradient(
      circle at 68% 92%,
      rgba(255, 91, 0, 0.08),
      transparent 28%
    ),
    linear-gradient(
      112deg,
      #111113 0%,
      #111113 48%,
      #17100d 72%,
      #281208 100%
    );
}

.thank-you-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      rgba(255, 255, 255, 0.014) 1px,
      transparent 1px
    );
  background-size: 70px 70px;
  mask-image: linear-gradient(
    to right,
    transparent,
    rgba(0, 0, 0, 0.5),
    transparent
  );
}

.thank-you-hero-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
  align-items: center;
  gap: clamp(40px, 6vw, 110px);
  padding-top: clamp(110px, 10vw, 160px);
  padding-bottom: clamp(80px, 8vw, 120px);
}

.thank-you-hero-content {
  position: relative;
  z-index: 4;
  max-width: 860px;
}

.thank-you-hero .breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 34px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
}

.thank-you-hero .breadcrumbs a {
  color: #ffffff;
  text-decoration: none;
}

.thank-you-hero .breadcrumbs a:hover {
  color: #ff5b00;
}

.thank-you-hero .eyebrow {
  margin-bottom: 12px;
}

.thank-you-hero h1 {
  max-width: 830px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(50px, 5vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  font-weight: 700;
  text-wrap: balance;
}

.thank-you-hero .lead {
  max-width: 760px;
  margin: 26px 0 0;
  color: rgba(255, 255, 255, 0.79);
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.65;
}

.thank-you-hero .button-row {
  margin-top: 30px;
}

/* =========================================================
   MAIL VISUAL WRAPPER
========================================================= */

.thank-you-mail-visual {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
}

.cx-mail-animation {
  position: relative;
  width: min(100%, 650px);
  aspect-ratio: 720 / 620;
  transform-style: preserve-3d;
  animation:
    cxMailEntry 1s cubic-bezier(0.16, 1, 0.3, 1) both,
    cxMailFloat 5.8s ease-in-out 3.4s infinite;
}

.cx-mail-svg {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.cx-mail-glow {
  position: absolute;
  z-index: 0;
  width: 62%;
  height: 62%;
  left: 50%;
  top: 52%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  background: rgba(255, 83, 0, 0.2);
  filter: blur(70px);
  opacity: 0;
  animation: cxGlowReveal 1.6s ease 1.2s forwards;
}

/* =========================================================
   INITIAL CLOSED STATE
========================================================= */

.cx-envelope-body,
.cx-envelope-front {
  transform-box: fill-box;
  transform-origin: center;
}

.cx-envelope-flap {
  transform-box: fill-box;
  transform-origin: 50% 74%;
  transform: rotateX(0deg);
  animation: cxFlapOpen 1.15s cubic-bezier(0.45, 0, 0.15, 1)
    0.72s forwards;
}

.cx-mail-paper {
  transform-box: fill-box;
  transform-origin: center bottom;
  transform: translateY(150px) scale(0.92);
  opacity: 0;
  animation: cxPaperRise 1.45s cubic-bezier(0.16, 1, 0.3, 1)
    1.35s forwards;
}

.cx-envelope-front {
  animation: cxEnvelopeSettle 0.9s cubic-bezier(0.16, 1, 0.3, 1)
    2.1s both;
}

.cx-ground-shadow {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation:
    cxShadowEntry 1s ease forwards,
    cxShadowFloat 5.8s ease-in-out 3.4s infinite;
}

/* =========================================================
   PAPER CONTENT ANIMATION
========================================================= */

.cx-success-circle {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: cxSuccessPop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1)
    2.24s forwards;
}

.cx-success-check {
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  animation: cxDrawCheck 0.55s ease 2.65s forwards;
}

.cx-paper-title,
.cx-paper-copy,
.cx-paper-line {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(10px);
}

.cx-paper-title {
  animation: cxPaperTextReveal 0.65s ease 2.72s forwards;
}

.cx-paper-copy {
  animation: cxPaperTextReveal 0.65s ease 2.84s forwards;
}

.cx-paper-line-one {
  animation: cxPaperTextReveal 0.65s ease 2.98s forwards;
}

.cx-paper-line-two {
  animation: cxPaperTextReveal 0.65s ease 3.08s forwards;
}

/* =========================================================
   SPARKS
========================================================= */

.cx-spark {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.cx-spark-one {
  animation: cxSparkOne 1.1s ease 2.7s forwards;
}

.cx-spark-two {
  animation: cxSparkTwo 1.1s ease 2.78s forwards;
}

.cx-spark-three {
  animation: cxSparkThree 1.1s ease 2.86s forwards;
}

.cx-spark-four {
  animation: cxSparkFour 1.1s ease 2.8s forwards;
}

.cx-spark-five {
  animation: cxSparkFive 1.1s ease 2.92s forwards;
}

/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes cxMailEntry {
  0% {
    opacity: 0;
    transform:
      translate3d(70px, 30px, 0)
      rotateY(-8deg)
      scale(0.88);
  }

  100% {
    opacity: 1;
    transform:
      translate3d(0, 0, 0)
      rotateY(0)
      scale(1);
  }
}

@keyframes cxFlapOpen {
  0% {
    transform: rotateX(0deg);
  }

  46% {
    transform: rotateX(-92deg);
  }

  100% {
    transform: rotateX(-178deg);
  }
}

@keyframes cxPaperRise {
  0% {
    opacity: 0;
    transform:
      translateY(150px)
      scale(0.92);
  }

  18% {
    opacity: 1;
  }

  72% {
    transform:
      translateY(-38px)
      scale(1.012);
  }

  100% {
    opacity: 1;
    transform:
      translateY(-20px)
      scale(1);
  }
}

@keyframes cxEnvelopeSettle {
  0% {
    transform: translateY(0);
  }

  45% {
    transform: translateY(7px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes cxSuccessPop {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  70% {
    opacity: 1;
    transform: scale(1.12);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes cxDrawCheck {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes cxPaperTextReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cxGlowReveal {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes cxShadowEntry {
  from {
    opacity: 0;
    transform: scaleX(0.7);
  }

  to {
    opacity: 0.32;
    transform: scaleX(1);
  }
}

@keyframes cxMailFloat {
  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      rotateY(0deg);
  }

  50% {
    transform:
      translate3d(0, -10px, 0)
      rotateY(-1deg);
  }
}

@keyframes cxShadowFloat {
  0%,
  100% {
    transform: scaleX(1);
    opacity: 0.32;
  }

  50% {
    transform: scaleX(0.93);
    opacity: 0.24;
  }
}

@keyframes cxSparkOne {
  0% {
    opacity: 0;
    transform: translate(18px, 25px) scale(0);
  }

  40% {
    opacity: 1;
    transform: translate(-4px, -4px) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-18px, -25px) scale(0.4);
  }
}

@keyframes cxSparkTwo {
  0% {
    opacity: 0;
    transform: translate(-18px, 24px) scale(0);
  }

  40% {
    opacity: 1;
    transform: translate(3px, -3px) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(20px, -28px) scale(0.4);
  }
}

@keyframes cxSparkThree {
  0% {
    opacity: 0;
    transform: translate(-22px, 14px) scale(0);
  }

  40% {
    opacity: 1;
    transform: translate(4px, -2px) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(25px, -14px) scale(0.3);
  }
}

@keyframes cxSparkFour {
  0% {
    opacity: 0;
    transform: translate(20px, 18px) scale(0.2);
  }

  40% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-14px, -18px) scale(0.4);
  }
}

@keyframes cxSparkFive {
  0% {
    opacity: 0;
    transform: translate(-20px, 17px) scale(0.2);
  }

  40% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(16px, -16px) scale(0.4);
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
  .thank-you-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(370px, 0.82fr);
    gap: 25px;
  }

  .thank-you-hero h1 {
    font-size: clamp(48px, 6vw, 68px);
  }

  .cx-mail-animation {
    width: min(100%, 560px);
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 850px) {
  .thank-you-hero {
    min-height: auto;
    text-align: center;
  }

  .thank-you-hero-grid {
    grid-template-columns: 1fr;
    padding-top: 125px;
    padding-bottom: 70px;
    gap: 38px;
  }

  .thank-you-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .thank-you-hero .breadcrumbs {
    justify-content: center;
    margin-bottom: 24px;
  }

  .thank-you-hero h1 {
    max-width: 680px;
    font-size: clamp(44px, 11vw, 64px);
  }

  .thank-you-hero .lead {
    max-width: 650px;
  }

  .thank-you-hero .button-row {
    justify-content: center;
  }

  .thank-you-mail-visual {
    order: 2;
  }

  .cx-mail-animation {
    width: min(100%, 510px);
  }
}

@media (max-width: 520px) {
  .thank-you-hero-grid {
    padding-top: 110px;
    padding-bottom: 55px;
  }

  .thank-you-hero h1 {
    font-size: clamp(40px, 12vw, 53px);
    letter-spacing: -0.045em;
  }

  .thank-you-hero .lead {
    font-size: 17px;
    line-height: 1.6;
  }

  .thank-you-hero .button-row {
    width: 100%;
    flex-direction: column;
  }

  .thank-you-hero .button-row .btn {
    width: 100%;
    justify-content: center;
  }

  .cx-mail-animation {
    width: min(114%, 470px);
    margin-left: -7%;
    margin-right: -7%;
  }
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .cx-mail-animation,
  .cx-envelope-flap,
  .cx-mail-paper,
  .cx-envelope-front,
  .cx-ground-shadow,
  .cx-success-circle,
  .cx-success-check,
  .cx-paper-title,
  .cx-paper-copy,
  .cx-paper-line,
  .cx-mail-glow,
  .cx-spark {
    animation: none !important;
  }

  .cx-mail-animation {
    opacity: 1;
    transform: none;
  }

  .cx-envelope-flap {
    transform: rotateX(-178deg);
  }

  .cx-mail-paper {
    opacity: 1;
    transform: translateY(-20px);
  }

  .cx-success-circle {
    opacity: 1;
    transform: scale(1);
  }

  .cx-success-check {
    stroke-dashoffset: 0;
  }

  .cx-paper-title,
  .cx-paper-copy,
  .cx-paper-line {
    opacity: 1;
    transform: none;
  }

  .cx-mail-glow {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}
/* =========================================================
   THANK-YOU HERO — ALIGNMENT + ENVELOPE LAYER FIX
========================================================= */

.thank-you-hero {
  min-height: 760px;
  display: flex;
  align-items: center;
  padding: 0;
}

/* Keep hero aligned with the website header/container */
.thank-you-hero > .thank-you-hero-grid {
  width: min(1180px, calc(100% - 48px));
  max-width: 1180px;
  margin-inline: auto;

  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  align-items: center;
  gap: clamp(50px, 7vw, 110px);

  padding-top: 175px;
  padding-bottom: 100px;
}

/* Reset inherited page-hero alignment */
.thank-you-hero-content {
  width: 100%;
  max-width: 650px;
  margin: 0;
  padding: 0;
  text-align: left;
  justify-self: start;
}

.thank-you-hero .breadcrumbs {
  margin: 0 0 32px;
}

.thank-you-hero .eyebrow {
  display: inline-flex;
  margin-bottom: 14px;
}

.thank-you-hero h1 {
  width: 100%;
  max-width: 650px;
  margin: 0;
  font-size: clamp(54px, 4.6vw, 76px);
  line-height: 1.01;
  letter-spacing: -0.055em;
}

.thank-you-hero .lead {
  width: 100%;
  max-width: 640px;
  margin: 24px 0 0;
}

.thank-you-hero .button-row {
  margin-top: 28px;
}

/* Right-side visual alignment */
.thank-you-mail-visual {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
}

.cx-mail-animation {
  width: min(100%, 570px);
  margin: 0;
}

/* Keep normal SVG stacking order */
.cx-mail-svg {
  overflow: visible;
  isolation: isolate;
}

.cx-envelope-body {
  position: relative;
}

.cx-envelope-flap {
  transform-box: fill-box;
  transform-origin: 50% 74%;

  /*
   * Do not use rotateX here.
   * Browser SVG compositing can place the flap above the paper.
   */
  animation: cxFlapOpenSafe 1.15s
    cubic-bezier(0.45, 0, 0.15, 1) 0.72s forwards;
}

.cx-mail-paper {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: cxPaperRiseFixed 1.45s
    cubic-bezier(0.16, 1, 0.3, 1) 1.35s forwards;
}

/* Paper remains visibly in front while coming out */
.cx-envelope-front {
  transform-box: fill-box;
  transform-origin: center;
}

/* Safer 2D flap animation with no stacking glitch */
@keyframes cxFlapOpenSafe {
  0% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }

  45% {
    opacity: 1;
    transform: translateY(-24px) scaleY(0.15);
  }

  46% {
    transform: translateY(-28px) scaleY(-0.15);
  }

  100% {
    opacity: 0.96;
    transform: translateY(-118px) scaleY(-0.72);
  }
}

@keyframes cxPaperRiseFixed {
  0% {
    opacity: 0;
    transform: translateY(155px) scale(0.92);
  }

  15% {
    opacity: 1;
  }

  72% {
    opacity: 1;
    transform: translateY(-62px) scale(1.012);
  }

  100% {
    opacity: 1;
    transform: translateY(-45px) scale(1);
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
  .thank-you-hero > .thank-you-hero-grid {
    width: min(100% - 40px, 1050px);
    grid-template-columns: minmax(0, 1fr) minmax(370px, 0.85fr);
    gap: 35px;
  }

  .thank-you-hero h1 {
    font-size: clamp(50px, 5.8vw, 68px);
  }

  .cx-mail-animation {
    width: min(100%, 510px);
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 850px) {
  .thank-you-hero {
    min-height: auto;
  }

  .thank-you-hero > .thank-you-hero-grid {
    width: min(100% - 32px, 720px);
    grid-template-columns: 1fr;
    gap: 45px;
    padding-top: 135px;
    padding-bottom: 75px;
  }

  .thank-you-hero-content {
    max-width: 680px;
    margin-inline: auto;
    align-items: center;
    text-align: center;
    justify-self: center;
  }

  .thank-you-hero .breadcrumbs {
    justify-content: center;
  }

  .thank-you-hero h1,
  .thank-you-hero .lead {
    margin-inline: auto;
  }

  .thank-you-hero .button-row {
    justify-content: center;
  }

  .thank-you-mail-visual {
    justify-content: center;
    justify-self: center;
  }

  .cx-mail-animation {
    width: min(100%, 500px);
  }
}

@media (max-width: 520px) {
  .thank-you-hero > .thank-you-hero-grid {
    width: min(100% - 24px, 500px);
    padding-top: 115px;
    padding-bottom: 55px;
  }

  .thank-you-hero h1 {
    font-size: clamp(42px, 12vw, 54px);
  }

  .thank-you-hero .button-row {
    width: 100%;
    flex-direction: column;
  }

  .thank-you-hero .button-row .btn {
    width: 100%;
    justify-content: center;
  }

  .cx-mail-animation {
    width: 108%;
    margin-inline: -4%;
  }
}
/* =========================================================
   CLICKRONIX THANK-YOU HERO — FINAL
========================================================= */

.thank-you-hero {
  position: relative;
  min-height: 660px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: 0;
  background:
    radial-gradient(
      circle at 80% 40%,
      rgba(255, 91, 0, 0.15),
      transparent 34%
    ),
    linear-gradient(
      110deg,
      #111113 0%,
      #111113 46%,
      #17100d 70%,
      #2a1207 100%
    );
}

.thank-you-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      rgba(255, 255, 255, 0.014) 1px,
      transparent 1px
    );
  background-size: 70px 70px;
  mask-image: linear-gradient(
    to right,
    transparent,
    rgba(0, 0, 0, 0.55),
    transparent
  );
}

/* =========================================================
   HERO GRID
========================================================= */

.thank-you-hero > .thank-you-hero-grid {
  width: min(1180px, calc(100% - 48px));
  max-width: 1180px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(420px, 0.96fr);
  align-items: center;
  gap: clamp(40px, 5.5vw, 88px);
  padding-top: 122px;
  padding-bottom: 72px;
}

.thank-you-hero-content {
  width: 100%;
  max-width: 650px;
  margin: 0;
  padding: 0;
  text-align: left;
  justify-self: start;
}

.thank-you-hero .breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 15px;
}

.thank-you-hero .breadcrumbs a {
  color: #ffffff;
  text-decoration: none;
}

.thank-you-hero .breadcrumbs a:hover {
  color: #ff5b00;
}

.thank-you-hero .eyebrow {
  display: inline-flex;
  margin-bottom: 12px;
}

.thank-you-hero h1 {
  width: 100%;
  max-width: 650px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(52px, 4.7vw, 74px);
  line-height: 0.99;
  letter-spacing: -0.055em;
  font-weight: 700;
  text-wrap: balance;
}

.thank-you-hero .lead {
  width: 100%;
  max-width: 620px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.79);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.6;
}

.thank-you-hero .button-row {
  margin-top: 24px;
}

/* =========================================================
   MAIL WRAPPER
========================================================= */

.thank-you-mail-visual {
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
}

.cx-mail-animation {
  position: relative;
  width: min(100%, 550px);
  aspect-ratio: 720 / 620;
  transform-style: preserve-3d;
  animation:
    cxMailEntry 0.9s cubic-bezier(0.16, 1, 0.3, 1) both,
    cxMailFloat 5.8s ease-in-out 5.2s infinite;
}

.cx-mail-svg {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  isolation: isolate;
}

.cx-mail-glow {
  position: absolute;
  z-index: 0;
  width: 60%;
  height: 60%;
  left: 50%;
  top: 53%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.72);
  background: rgba(255, 83, 0, 0.2);
  filter: blur(68px);
  opacity: 0;
  animation: cxGlowReveal 1.5s ease 1.1s forwards;
}

/* =========================================================
   ENVELOPE ANIMATION
========================================================= */

.cx-envelope-flap {
  transform-box: fill-box;
  transform-origin: 50% 74%;
  animation: cxFlapOpenFinal 1.05s
    cubic-bezier(0.45, 0, 0.15, 1) 0.48s forwards;
}

.cx-mail-paper {
  transform-box: fill-box;
  transform-origin: center bottom;
  opacity: 1;
  transform: translateY(88px) scale(0.97);
  animation: cxPaperRiseFinal 1.55s
    cubic-bezier(0.16, 1, 0.3, 1) 1.18s forwards;
}

.cx-envelope-front {
  transform-box: fill-box;
  transform-origin: center;
}

.cx-ground-shadow {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation:
    cxShadowEntry 0.9s ease forwards,
    cxShadowFloat 5.8s ease-in-out 5.2s infinite;
}

/* =========================================================
   DOCUMENT CONTENT
========================================================= */

.cx-success-circle {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: cxSuccessPop 0.65s
    cubic-bezier(0.34, 1.56, 0.64, 1) 2.55s forwards;
}

.cx-success-check {
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  animation: cxDrawCheck 0.5s ease 2.9s forwards;
}

.cx-paper-title,
.cx-paper-copy,
.cx-paper-line {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(10px);
}

.cx-paper-title {
  animation: cxPaperTextReveal 0.55s ease 2.95s forwards;
}

.cx-paper-copy {
  animation: cxPaperTextReveal 0.55s ease 3.08s forwards;
}

.cx-paper-line-one {
  animation: cxPaperTextReveal 0.55s ease 3.2s forwards;
}

.cx-paper-line-two {
  animation: cxPaperTextReveal 0.55s ease 3.3s forwards;
}

/* =========================================================
   CONFETTI
========================================================= */

.cx-mail-confetti {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  overflow: visible;
}

.cx-mail-confetti .cf {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 9px;
  height: 17px;
  border-radius: 2px;
  opacity: 0;
  transform-origin: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  animation: cxConfettiBurst 3.7s ease-out forwards;
}

.cx-mail-confetti .cf:nth-child(odd) {
  background: #ffffff;
}

.cx-mail-confetti .cf:nth-child(even) {
  background: #ff6500;
}

.cf1 {
  --x: -190px;
  --y: -150px;
  --r: -260deg;
  animation-delay: 2.75s !important;
}

.cf2 {
  --x: -145px;
  --y: -205px;
  --r: -190deg;
  animation-delay: 2.8s !important;
}

.cf3 {
  --x: -95px;
  --y: -175px;
  --r: -225deg;
  animation-delay: 2.85s !important;
}

.cf4 {
  --x: -220px;
  --y: -90px;
  --r: -310deg;
  animation-delay: 2.9s !important;
}

.cf5 {
  --x: -45px;
  --y: -220px;
  --r: -165deg;
  animation-delay: 2.95s !important;
}

.cf6 {
  --x: 35px;
  --y: -220px;
  --r: 185deg;
  animation-delay: 3s !important;
}

.cf7 {
  --x: 95px;
  --y: -185px;
  --r: 235deg;
  animation-delay: 3.05s !important;
}

.cf8 {
  --x: 150px;
  --y: -205px;
  --r: 300deg;
  animation-delay: 3.1s !important;
}

.cf9 {
  --x: 218px;
  --y: -110px;
  --r: 255deg;
  animation-delay: 3.15s !important;
}

.cf10 {
  --x: 120px;
  --y: -95px;
  --r: 170deg;
  animation-delay: 3.2s !important;
}

.cf11 {
  --x: -125px;
  --y: -120px;
  --r: -215deg;
  animation-delay: 3.25s !important;
}

.cf12 {
  --x: 55px;
  --y: -140px;
  --r: 225deg;
  animation-delay: 3.3s !important;
}

.cf13 {
  --x: -60px;
  --y: -120px;
  --r: -150deg;
  animation-delay: 3.35s !important;
}

.cf14 {
  --x: 175px;
  --y: -150px;
  --r: 280deg;
  animation-delay: 3.4s !important;
}

/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes cxMailEntry {
  0% {
    opacity: 0;
    transform:
      translate3d(55px, 20px, 0)
      scale(0.9);
  }

  100% {
    opacity: 1;
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }
}

@keyframes cxFlapOpenFinal {
  0% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }

  34% {
    opacity: 1;
    transform: translateY(-9px) scaleY(0.56);
  }

  52% {
    opacity: 1;
    transform: translateY(-17px) scaleY(0.08);
  }

  53% {
    transform: translateY(-18px) scaleY(-0.08);
  }

  100% {
    opacity: 0.96;
    transform: translateY(-84px) scaleY(-0.6);
  }
}

@keyframes cxPaperRiseFinal {
  0% {
    opacity: 1;
    transform: translateY(88px) scale(0.97);
  }

  12% {
    transform: translateY(80px) scale(0.974);
  }

  20% {
    transform: translateY(91px) scale(0.969);
  }

  38% {
    transform: translateY(42px) scale(0.985);
  }

  72% {
    transform: translateY(-51px) scale(1.008);
  }

  100% {
    opacity: 1;
    transform: translateY(-38px) scale(1);
  }
}

@keyframes cxSuccessPop {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  70% {
    opacity: 1;
    transform: scale(1.12);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes cxDrawCheck {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes cxPaperTextReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cxGlowReveal {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes cxShadowEntry {
  from {
    opacity: 0;
    transform: scaleX(0.72);
  }

  to {
    opacity: 0.32;
    transform: scaleX(1);
  }
}

@keyframes cxMailFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -8px, 0);
  }
}

@keyframes cxShadowFloat {
  0%,
  100% {
    transform: scaleX(1);
    opacity: 0.32;
  }

  50% {
    transform: scaleX(0.94);
    opacity: 0.24;
  }
}

@keyframes cxConfettiBurst {
  0% {
    opacity: 0;
    transform:
      translate(0, 0)
      rotate(0deg)
      scale(0.35);
  }

  8% {
    opacity: 1;
    transform:
      translate(
        calc(var(--x) * 0.2),
        calc(var(--y) * 0.2)
      )
      rotate(calc(var(--r) * 0.22))
      scale(1);
  }

  35% {
    opacity: 1;
    transform:
      translate(
        calc(var(--x) * 0.78),
        calc(var(--y) * 0.78)
      )
      rotate(calc(var(--r) * 0.75))
      scale(1);
  }

  72% {
    opacity: 0.9;
    transform:
      translate(
        var(--x),
        calc(var(--y) + 36px)
      )
      rotate(var(--r))
      scale(0.92);
  }

  100% {
    opacity: 0;
    transform:
      translate(
        calc(var(--x) * 1.05),
        calc(var(--y) + 102px)
      )
      rotate(calc(var(--r) + 70deg))
      scale(0.72);
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
  .thank-you-hero > .thank-you-hero-grid {
    width: min(100% - 40px, 1050px);
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.86fr);
    gap: 30px;
    padding-top: 116px;
    padding-bottom: 68px;
  }

  .thank-you-hero h1 {
    font-size: clamp(48px, 5.7vw, 65px);
  }

  .cx-mail-animation {
    width: min(100%, 500px);
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 850px) {
  .thank-you-hero {
    min-height: auto;
  }

  .thank-you-hero > .thank-you-hero-grid {
    width: min(100% - 32px, 720px);
    grid-template-columns: 1fr;
    gap: 34px;
    padding-top: 105px;
    padding-bottom: 58px;
  }

  .thank-you-hero-content {
    max-width: 680px;
    margin-inline: auto;
    text-align: center;
    justify-self: center;
  }

  .thank-you-hero .breadcrumbs {
    justify-content: center;
  }

  .thank-you-hero h1,
  .thank-you-hero .lead {
    margin-inline: auto;
  }

  .thank-you-hero .button-row {
    justify-content: center;
  }

  .thank-you-mail-visual {
    justify-content: center;
    justify-self: center;
  }

  .cx-mail-animation {
    width: min(100%, 470px);
  }
}

@media (max-width: 520px) {
  .thank-you-hero > .thank-you-hero-grid {
    width: min(100% - 24px, 500px);
    padding-top: 94px;
    padding-bottom: 46px;
  }

  .thank-you-hero h1 {
    font-size: clamp(40px, 12vw, 52px);
  }

  .thank-you-hero .lead {
    font-size: 17px;
  }

  .thank-you-hero .button-row {
    width: 100%;
    flex-direction: column;
  }

  .thank-you-hero .button-row .btn {
    width: 100%;
    justify-content: center;
  }

  .cx-mail-animation {
    width: 108%;
    margin-inline: -4%;
  }

  .cx-mail-confetti .cf {
    width: 7px;
    height: 13px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .cx-mail-animation,
  .cx-envelope-flap,
  .cx-mail-paper,
  .cx-ground-shadow,
  .cx-success-circle,
  .cx-success-check,
  .cx-paper-title,
  .cx-paper-copy,
  .cx-paper-line,
  .cx-mail-glow,
  .cx-mail-confetti .cf {
    animation: none !important;
  }

  .cx-mail-animation {
    opacity: 1;
    transform: none;
  }

  .cx-envelope-flap {
    opacity: 0.96;
    transform: translateY(-84px) scaleY(-0.6);
  }

  .cx-mail-paper {
    opacity: 1;
    transform: translateY(-38px) scale(1);
  }

  .cx-success-circle {
    opacity: 1;
    transform: scale(1);
  }

  .cx-success-check {
    stroke-dashoffset: 0;
  }

  .cx-paper-title,
  .cx-paper-copy,
  .cx-paper-line {
    opacity: 1;
    transform: none;
  }

  .cx-mail-glow {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  .cx-mail-confetti .cf {
    display: none;
  }
}
/* Reduce gap between header and thank-you content */
.thank-you-hero > .thank-you-hero-grid {
  padding-top: 48px !important;
  padding-bottom: 54px !important;
}

.thank-you-hero {
  min-height: 560px !important;
}

.thank-you-hero .breadcrumbs {
  margin-bottom: 18px !important;
}

/* Keep content vertically tighter */
.thank-you-hero-content {
  align-self: center !important;
  transform: translateY(-10px);
}

.thank-you-mail-visual {
  align-self: center !important;
  transform: translateY(-10px);
}
/* =========================================================
   CLICKRONIX IP RADAR WORKFLOW
========================================================= */

.cx-radar-workflow {
  position: relative;
  overflow: hidden;
  padding: clamp(90px, 8vw, 135px) 0;
  background:
    radial-gradient(
      circle at 50% 58%,
      rgba(255, 91, 0, 0.08),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfbfa 100%
    );
}

.cx-radar-workflow::before,
.cx-radar-workflow::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  pointer-events: none;
  background: rgba(255, 91, 0, 0.025);
  transform: rotate(14deg);
}

.cx-radar-workflow::before {
  top: -250px;
  right: -90px;
}

.cx-radar-workflow::after {
  bottom: -270px;
  left: -130px;
}

.cx-radar-heading {
  position: relative;
  z-index: 2;
  width: min(760px, 100%);
  margin: 0 auto;
  text-align: center;
}

.cx-radar-heading .eyebrow {
  margin-bottom: 14px;
}

.cx-radar-heading h2 {
  max-width: 760px;
  margin: 0 auto;
  color: #111113;
  font-size: clamp(38px, 4.2vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.048em;
  text-wrap: balance;
}

.cx-radar-heading p {
  max-width: 700px;
  margin: 22px auto 0;
  color: #686872;
  font-size: 17px;
  line-height: 1.65;
}

/* =========================================================
   MAIN LAYOUT
========================================================= */

.cx-radar-layout {
  position: relative;
  z-index: 2;
  width: min(1120px, 100%);
  min-height: 670px;
  margin: 70px auto 0;
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(330px, 430px) minmax(230px, 1fr);
  grid-template-rows: 1fr 1fr;
  align-items: center;
  gap: 46px 60px;
}

.cx-radar-step {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  min-height: 170px;
  padding: 26px;
  border: 1px solid #e2e2e5;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 20px 50px rgba(17, 17, 19, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.cx-radar-step:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 91, 0, 0.38);
  box-shadow:
    0 28px 60px rgba(17, 17, 19, 0.11),
    0 0 0 4px rgba(255, 91, 0, 0.045);
}

.cx-radar-step::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 62px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 91, 0, 0.4),
    rgba(255, 91, 0, 0.04)
  );
}

.cx-radar-step-1::after,
.cx-radar-step-3::after {
  right: -62px;
}

.cx-radar-step-2::after,
.cx-radar-step-4::after {
  left: -62px;
  transform: rotate(180deg);
}

.cx-radar-step-1 {
  grid-column: 1;
  grid-row: 1;
}

.cx-radar-step-2 {
  grid-column: 3;
  grid-row: 1;
}

.cx-radar-step-3 {
  grid-column: 1;
  grid-row: 2;
}

.cx-radar-step-4 {
  grid-column: 3;
  grid-row: 2;
}

.cx-radar-step-number {
  position: absolute;
  top: 16px;
  right: 18px;
  color: #ff5b00;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.cx-radar-step-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 91, 0, 0.28);
  border-radius: 14px;
  color: #ff5b00;
  background: rgba(255, 91, 0, 0.06);
}

.cx-radar-step-icon svg {
  width: 23px;
  height: 23px;
}

.cx-radar-step-copy {
  align-self: center;
  padding-top: 15px;
}

.cx-radar-step h3 {
  margin: 0;
  color: #111113;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.cx-radar-step p {
  margin: 10px 0 0;
  color: #686872;
  font-size: 14px;
  line-height: 1.6;
}

/* =========================================================
   RADAR CENTER
========================================================= */

.cx-radar-center {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cx-radar {
  position: relative;
  width: min(100%, 410px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 19, 0.16);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(255, 91, 0, 0.035) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at center,
      #ffffff 0%,
      #fcf7f3 68%,
      #fff2e8 100%
    );
  box-shadow:
    0 30px 80px rgba(17, 17, 19, 0.13),
    inset 0 0 65px rgba(255, 91, 0, 0.08),
    0 0 0 10px rgba(255, 255, 255, 0.78);
}

.cx-radar::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 1;
  border: 1px solid rgba(255, 91, 0, 0.14);
  border-radius: 50%;
  pointer-events: none;
}

.cx-radar-ring {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  border: 1px dashed rgba(17, 17, 19, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cx-radar-ring-1 {
  width: 76%;
  height: 76%;
}

.cx-radar-ring-2 {
  width: 50%;
  height: 50%;
}

.cx-radar-ring-3 {
  width: 24%;
  height: 24%;
}

.cx-radar-axis {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  background: rgba(17, 17, 19, 0.09);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cx-radar-axis-horizontal {
  width: 92%;
  height: 1px;
}

.cx-radar-axis-vertical {
  width: 1px;
  height: 92%;
}

.cx-radar-sweep {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  overflow: hidden;
  transform-origin: 0 0;
  animation: cxRadarRotate 4.8s linear infinite;
  pointer-events: none;
}

.cx-radar-sweep::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 270deg at 0 0,
    rgba(255, 91, 0, 0.58),
    rgba(255, 91, 0, 0.21) 30deg,
    rgba(255, 91, 0, 0.04) 67deg,
    transparent 90deg
  );
  filter: blur(1px);
}

.cx-radar-sweep::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    #ff5b00,
    rgba(255, 91, 0, 0)
  );
  box-shadow:
    0 0 10px rgba(255, 91, 0, 0.9),
    0 0 24px rgba(255, 91, 0, 0.4);
}

.cx-radar-sweep span {
  position: absolute;
  inset: 0;
  background: rgba(255, 91, 0, 0.22);
  transform: rotate(-55deg);
  transform-origin: top left;
  filter: blur(34px);
}

.cx-radar-core {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 91, 0, 0.45);
  border-radius: 50%;
  background: #ffffff;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 8px rgba(255, 91, 0, 0.08),
    0 0 26px rgba(255, 91, 0, 0.24);
}

.cx-radar-core-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5b00;
  animation: cxRadarCorePulse 2s ease-in-out infinite;
}

/* =========================================================
   RADAR POINTS
========================================================= */

.cx-radar-points {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.cx-radar-point {
  position: absolute;
  width: 11px;
  height: 11px;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(0);
  box-shadow:
    0 0 0 4px rgba(17, 17, 19, 0.04),
    0 4px 12px rgba(17, 17, 19, 0.2);
  animation: cxRadarPointReveal 0.45s ease forwards;
  transition:
    width 0.2s ease,
    height 0.2s ease,
    box-shadow 0.2s ease;
}

.cx-radar-point:hover,
.cx-radar-point:focus-visible,
.cx-radar-point.is-active {
  width: 16px;
  height: 16px;
  outline: none;
}

.cx-radar-point.is-allow {
  background: #171719;
}

.cx-radar-point.is-risk {
  background: #ff5b00;
  box-shadow:
    0 0 0 5px rgba(255, 91, 0, 0.12),
    0 0 18px rgba(255, 91, 0, 0.34);
}

.cx-radar-point.is-new {
  animation:
    cxRadarPointReveal 0.45s ease forwards,
    cxRadarPointPing 1.8s ease-out 0.3s 2;
}

/* =========================================================
   TOOLTIP
========================================================= */

.cx-radar-tooltip {
  position: absolute;
  z-index: 20;
  min-width: 178px;
  padding: 13px 15px;
  border: 1px solid rgba(17, 17, 19, 0.13);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 40px rgba(17, 17, 19, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 16px)) scale(0.94);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.cx-radar-tooltip.is-visible {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 16px)) scale(1);
}

.cx-tooltip-status {
  position: absolute;
  top: 15px;
  left: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.cx-radar-tooltip.is-risk .cx-tooltip-status {
  background: #ff5b00;
}

.cx-radar-tooltip.is-allow .cx-tooltip-status {
  background: #171719;
}

.cx-tooltip-ip,
.cx-tooltip-label {
  display: block;
  padding-left: 16px;
}

.cx-tooltip-ip {
  color: #111113;
  font-size: 13px;
}

.cx-tooltip-label {
  margin-top: 4px;
  color: #777780;
  font-size: 11px;
}

/* =========================================================
   IP + LEGEND
========================================================= */

.cx-radar-current {
  min-width: 210px;
  margin-top: 28px;
  padding: 13px 20px;
  border: 1px solid #e2e2e5;
  border-radius: 999px;
  text-align: center;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(17, 17, 19, 0.07);
}

.cx-radar-current-label {
  margin-right: 8px;
  color: #777780;
  font-size: 12px;
}

.cx-radar-current strong {
  color: #111113;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.cx-radar-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 18px;
  color: #65656e;
  font-size: 12px;
}

.cx-radar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.cx-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.cx-legend-allow {
  background: #171719;
}

.cx-legend-risk {
  background: #ff5b00;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes cxRadarRotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes cxRadarCorePulse {
  0%,
  100% {
    transform: scale(0.85);
    box-shadow: 0 0 0 0 rgba(255, 91, 0, 0.35);
  }

  50% {
    transform: scale(1);
    box-shadow: 0 0 0 9px rgba(255, 91, 0, 0);
  }
}

@keyframes cxRadarPointReveal {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes cxRadarPointPing {
  0% {
    box-shadow:
      0 0 0 0 rgba(255, 91, 0, 0.4),
      0 4px 12px rgba(17, 17, 19, 0.2);
  }

  100% {
    box-shadow:
      0 0 0 18px rgba(255, 91, 0, 0),
      0 4px 12px rgba(17, 17, 19, 0.2);
  }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {
  .cx-radar-layout {
    grid-template-columns: minmax(210px, 1fr) minmax(300px, 360px) minmax(210px, 1fr);
    gap: 36px;
  }

  .cx-radar-step {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 22px;
  }

  .cx-radar-step-icon {
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 850px) {
  .cx-radar-workflow {
    padding: 80px 0;
  }

  .cx-radar-layout {
    min-height: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 20px;
    margin-top: 55px;
  }

  .cx-radar-center {
    grid-column: 1 / 3;
    grid-row: 1;
    margin-bottom: 25px;
  }

  .cx-radar-step {
    min-height: 175px;
  }

  .cx-radar-step-1 {
    grid-column: 1;
    grid-row: 2;
  }

  .cx-radar-step-2 {
    grid-column: 2;
    grid-row: 2;
  }

  .cx-radar-step-3 {
    grid-column: 1;
    grid-row: 3;
  }

  .cx-radar-step-4 {
    grid-column: 2;
    grid-row: 3;
  }

  .cx-radar-step::after {
    display: none;
  }

  .cx-radar {
    width: min(82vw, 390px);
  }
}

@media (max-width: 580px) {
  .cx-radar-heading h2 {
    font-size: clamp(36px, 10vw, 48px);
  }

  .cx-radar-heading p {
    font-size: 16px;
  }

  .cx-radar-layout {
    grid-template-columns: 1fr;
  }

  .cx-radar-center,
  .cx-radar-step-1,
  .cx-radar-step-2,
  .cx-radar-step-3,
  .cx-radar-step-4 {
    grid-column: 1;
  }

  .cx-radar-center {
    grid-row: 1;
  }

  .cx-radar-step-1 {
    grid-row: 2;
  }

  .cx-radar-step-2 {
    grid-row: 3;
  }

  .cx-radar-step-3 {
    grid-row: 4;
  }

  .cx-radar-step-4 {
    grid-row: 5;
  }

  .cx-radar-step {
    min-height: auto;
  }

  .cx-radar {
    width: min(88vw, 360px);
  }

  .cx-radar-legend {
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cx-radar-sweep,
  .cx-radar-core-dot,
  .cx-radar-point {
    animation: none !important;
  }

  .cx-radar-point {
    transform: translate(-50%, -50%) scale(1);
  }
}
/* =========================================================
   RADAR TOOLTIP — KEEP INSIDE RADAR
========================================================= */

.cx-radar-center {
  position: relative;
}

.cx-radar-tooltip {
  position: absolute;
  z-index: 100;
  width: max-content;
  min-width: 170px;
  max-width: 195px;
  padding: 13px 15px;

  border: 1px solid rgba(17, 17, 19, 0.12);
  border-radius: 13px;

  background: rgba(255, 255, 255, 0.98);

  box-shadow:
    0 18px 40px rgba(17, 17, 19, 0.15),
    0 4px 12px rgba(17, 17, 19, 0.06);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translate(-50%, calc(-100% - 15px))
    scale(0.96);

  transform-origin: center bottom;

  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease;
}

.cx-radar-tooltip.is-visible {
  opacity: 1;
  visibility: visible;

  transform:
    translate(-50%, calc(-100% - 15px))
    scale(1);
}

/* Tooltip arrow */
.cx-radar-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;

  width: 11px;
  height: 11px;

  border-right: 1px solid rgba(17, 17, 19, 0.12);
  border-bottom: 1px solid rgba(17, 17, 19, 0.12);

  background: #ffffff;

  transform:
    translateX(-50%)
    rotate(45deg);
}

/* Tooltip shown below a top-edge point */
.cx-radar-tooltip.show-below {
  transform:
    translate(-50%, 15px)
    scale(0.96);

  transform-origin: center top;
}

.cx-radar-tooltip.show-below.is-visible {
  transform:
    translate(-50%, 15px)
    scale(1);
}

.cx-radar-tooltip.show-below::after {
  top: -6px;
  bottom: auto;

  border-right: 0;
  border-bottom: 0;
  border-top: 1px solid rgba(17, 17, 19, 0.12);
  border-left: 1px solid rgba(17, 17, 19, 0.12);
}

/* Tooltip content */
.cx-tooltip-status {
  position: absolute;
  top: 16px;
  left: 14px;

  width: 8px;
  height: 8px;

  border-radius: 50%;
}

.cx-radar-tooltip.is-risk .cx-tooltip-status {
  background: #ff5b00;
}

.cx-radar-tooltip.is-allow .cx-tooltip-status {
  background: #171719;
}

.cx-tooltip-ip,
.cx-tooltip-label {
  display: block;
  padding-left: 16px;
  white-space: nowrap;
}

.cx-tooltip-ip {
  color: #111113;
  font-size: 13px;
  line-height: 1.35;
}

.cx-tooltip-label {
  margin-top: 4px;
  color: #777780;
  font-size: 11px;
  line-height: 1.4;
}
/* =========================================================
   CLICKRONIX 3D SECURITY LOCK
========================================================= */

.cx-lock-section {
  --cx-orange: #ff5b00;
  --cx-orange-light: #ff8138;
  --cx-orange-dark: #b62e00;
  --cx-black: #0d0d0f;
  --cx-panel: #151518;

  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(90px, 9vw, 145px) 0;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 72% 48%,
      rgba(255, 91, 0, 0.15),
      transparent 33%
    ),
    linear-gradient(
      110deg,
      #0d0d0f 0%,
      #111113 52%,
      #1b0e08 100%
    );
}

.cx-lock-background-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.5;
  pointer-events: none;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    );
  background-size: 58px 58px;
  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      rgba(0, 0, 0, 0.65) 18%,
      #000 52%,
      rgba(0, 0, 0, 0.7) 84%,
      transparent 100%
    );
}

.cx-lock-section::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  top: 50%;
  right: 6%;
  z-index: -1;
  border-radius: 50%;
  transform: translateY(-50%);
  background: rgba(255, 91, 0, 0.08);
  filter: blur(105px);
}

.cx-lock-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(520px, 1.18fr);
  align-items: center;
  gap: clamp(50px, 7vw, 110px);
}

/* =========================================================
   LEFT CONTENT
========================================================= */

.cx-lock-content {
  max-width: 610px;
}

.cx-lock-content h2 {
  max-width: 590px;
  margin: 14px 0 0;
  color: #ffffff;
  font-size: clamp(43px, 4.2vw, 67px);
  line-height: 1;
  letter-spacing: -0.05em;
  font-weight: 650;
}

.cx-lock-content > .lead {
  max-width: 590px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.7;
}

.cx-lock-steps {
  display: grid;
  gap: 12px;
  margin-top: 38px;
}

.cx-lock-step {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 18px 18px 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.065),
      rgba(255, 255, 255, 0.018)
    );
  opacity: 0.45;
  transform: translateX(-18px);
  transition:
    opacity 0.55s ease,
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s ease,
    background 0.4s ease;
}

.cx-lock-step::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--cx-orange);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s ease;
}

.cx-lock-step.is-active {
  opacity: 1;
  transform: translateX(0);
  border-color: rgba(255, 91, 0, 0.32);
  background:
    linear-gradient(
      120deg,
      rgba(255, 91, 0, 0.115),
      rgba(255, 255, 255, 0.025)
    );
}

.cx-lock-step.is-active::before {
  transform: scaleY(1);
}

.cx-lock-step-number {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  color: var(--cx-orange-light);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: rgba(255, 91, 0, 0.11);
  border: 1px solid rgba(255, 91, 0, 0.24);
}

.cx-lock-step h3 {
  margin: 1px 0 5px;
  color: #ffffff;
  font-size: 17px;
  line-height: 1.25;
}

.cx-lock-step p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1.6;
}

/* =========================================================
   VISUAL STAGE
========================================================= */

.cx-lock-stage {
  position: relative;
  width: 100%;
  min-height: 640px;
  display: grid;
  place-items: center;
  perspective: 1500px;
}

.cx-lock-ambient-glow {
  position: absolute;
  width: 54%;
  height: 54%;
  top: 48%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.72);
  opacity: 0;
  background: rgba(255, 91, 0, 0.18);
  filter: blur(85px);
  transition:
    opacity 1.2s ease,
    transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.cx-lock-stage.is-locked .cx-lock-ambient-glow {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.cx-lock-platform {
  position: relative;
  width: min(100%, 760px);
  aspect-ratio: 760 / 600;
  transform-style: preserve-3d;
  transform: rotateX(4deg) rotateY(-3deg);
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cx-lock-stage.is-locked .cx-lock-platform {
  transform: rotateX(0deg) rotateY(0deg);
}

/* =========================================================
   NETWORK
========================================================= */

.cx-lock-network {
  position: absolute;
  inset: 2% 0 auto;
  z-index: 1;
  width: 100%;
  height: auto;
  overflow: visible;
}

.cx-network-path {
  fill: none;
  stroke: url(#cxNetworkLine);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  opacity: 0;
  filter: url(#cxNetworkGlow);
}

.cx-network-dot {
  fill: var(--cx-orange);
  opacity: 0;
  filter: url(#cxNetworkGlow);
}

.cx-lock-stage.is-locked .cx-network-path {
  animation: cxNetworkDraw 1.1s ease forwards;
}

.cx-lock-stage.is-locked .cx-network-path-1 {
  animation-delay: 0.1s;
}

.cx-lock-stage.is-locked .cx-network-path-2 {
  animation-delay: 0.23s;
}

.cx-lock-stage.is-locked .cx-network-path-3 {
  animation-delay: 0.36s;
}

.cx-lock-stage.is-locked .cx-network-path-4 {
  animation-delay: 0.18s;
}

.cx-lock-stage.is-locked .cx-network-path-5 {
  animation-delay: 0.31s;
}

.cx-lock-stage.is-locked .cx-network-path-6 {
  animation-delay: 0.44s;
}

.cx-lock-stage.is-locked .cx-network-dot {
  animation: cxNodeFlash 1.8s ease 0.9s infinite;
}

@keyframes cxNetworkDraw {
  0% {
    opacity: 0;
    stroke-dashoffset: 260;
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 0.86;
    stroke-dashoffset: 0;
  }
}

@keyframes cxNodeFlash {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.75);
  }

  50% {
    opacity: 1;
    transform: scale(1.45);
  }
}

/* =========================================================
   APP NODES
========================================================= */

.cx-app-node {
  position: absolute;
  z-index: 4;
  display: grid;
  width: 78px;
  min-height: 86px;
  place-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.78);
  opacity: 0;
  transform: translateY(18px) scale(0.82);
  transition:
    opacity 0.7s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.35s ease;
}

.cx-app-node svg {
  width: 47px;
  height: 47px;
  padding: 11px;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 15px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.11),
      rgba(255, 255, 255, 0.025)
    );
  box-shadow:
    0 17px 28px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition:
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.4s ease;
}

.cx-app-node span {
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.59);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.cx-app-node:hover svg {
  transform: translateY(-4px);
  border-color: rgba(255, 91, 0, 0.46);
  box-shadow:
    0 20px 34px rgba(0, 0, 0, 0.38),
    0 0 25px rgba(255, 91, 0, 0.15);
}

.cx-lock-stage.is-locked .cx-app-node {
  opacity: 1;
  transform: translateY(0) scale(1);
  color: var(--cx-orange-light);
}

.cx-app-google {
  top: 7%;
  left: 4%;
  transition-delay: 0.05s;
}

.cx-app-analytics {
  top: 38%;
  left: 1%;
  transition-delay: 0.15s;
}

.cx-app-tag-manager {
  bottom: 3%;
  left: 6%;
  transition-delay: 0.25s;
}

.cx-app-google-ads {
  top: 6%;
  right: 4%;
  transition-delay: 0.1s;
}

.cx-app-meta {
  top: 38%;
  right: 1%;
  transition-delay: 0.2s;
}

.cx-app-microsoft {
  right: 6%;
  bottom: 3%;
  transition-delay: 0.3s;
}

/* =========================================================
   3D LOCK
========================================================= */

.cx-security-lock {
  position: absolute;
  z-index: 6;
  width: 270px;
  height: 340px;
  top: 45%;
  left: 50%;
  transform:
    translate(-50%, -50%)
    rotateY(-5deg)
    translateZ(28px);
  transform-style: preserve-3d;
  filter:
    drop-shadow(0 36px 28px rgba(0, 0, 0, 0.43));
}

.cx-lock-shackle {
  position: absolute;
  width: 164px;
  height: 170px;
  top: 0;
  left: 53px;
  z-index: 1;
  border: 28px solid #ff6712;
  border-bottom: 0;
  border-radius: 86px 86px 0 0;
  transform:
    translateY(-42px)
    rotate(-12deg);
  transform-origin: 83% 88%;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.42),
      rgba(255, 255, 255, 0.03) 22%,
      rgba(0, 0, 0, 0.2) 74%,
      rgba(255, 255, 255, 0.2)
    );
  box-shadow:
    inset 8px 0 8px rgba(255, 255, 255, 0.18),
    inset -11px 0 12px rgba(77, 15, 0, 0.25),
    0 12px 24px rgba(0, 0, 0, 0.3);
  transition:
    transform 1.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cx-lock-shackle::before,
.cx-lock-shackle::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 57px;
  bottom: -54px;
  border-radius: 0 0 10px 10px;
  background:
    linear-gradient(
      90deg,
      #ff843d,
      #ff5b00 48%,
      #ba2d00
    );
}

.cx-lock-shackle::before {
  left: -28px;
}

.cx-lock-shackle::after {
  right: -28px;
}

.cx-lock-shackle-inner {
  position: absolute;
  inset: 12px;
  border-radius: 62px 62px 0 0;
  box-shadow:
    inset 0 2px 5px rgba(255, 255, 255, 0.25);
}

.cx-lock-stage.is-locked .cx-lock-shackle {
  transform:
    translateY(0)
    rotate(0deg);
}

.cx-lock-body {
  position: absolute;
  z-index: 4;
  width: 270px;
  height: 205px;
  bottom: 0;
  left: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 38px;
  background:
    radial-gradient(
      circle at 28% 18%,
      rgba(255, 255, 255, 0.28),
      transparent 24%
    ),
    linear-gradient(
      145deg,
      #ff7a25 0%,
      #ff5b00 44%,
      #d73900 78%,
      #a52300 100%
    );
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.3),
    inset -20px -28px 36px rgba(92, 14, 0, 0.29),
    0 35px 50px rgba(0, 0, 0, 0.38);
}

.cx-lock-body::before {
  content: "";
  position: absolute;
  width: 170%;
  height: 74px;
  top: -43px;
  left: -25%;
  transform: rotate(-9deg);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.24),
      transparent
    );
  filter: blur(3px);
}

.cx-lock-body-highlight {
  position: absolute;
  width: 185px;
  height: 40px;
  top: 15px;
  left: 31px;
  border-radius: 50%;
  transform: rotate(-5deg);
  background: rgba(255, 255, 255, 0.15);
  filter: blur(16px);
}

.cx-lock-status-lights {
  position: absolute;
  display: flex;
  gap: 9px;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
}

.cx-lock-status-lights span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2b130b;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

.cx-lock-stage.is-locked .cx-lock-status-lights span {
  animation: cxLockLight 1.45s ease infinite;
  background: #ffffff;
  box-shadow:
    0 0 7px rgba(255, 255, 255, 0.85),
    0 0 18px rgba(255, 255, 255, 0.45);
}

.cx-lock-stage.is-locked .cx-lock-status-lights span:nth-child(2) {
  animation-delay: 0.18s;
}

.cx-lock-stage.is-locked .cx-lock-status-lights span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes cxLockLight {
  0%,
  100% {
    opacity: 0.38;
    transform: scale(0.82);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

.cx-lock-keyhole {
  position: absolute;
  width: 58px;
  height: 58px;
  top: 82px;
  left: 50%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transform: translateX(-50%);
  background:
    linear-gradient(
      145deg,
      #4d1405,
      #170704
    );
  box-shadow:
    inset 5px 7px 10px rgba(0, 0, 0, 0.75),
    0 2px 1px rgba(255, 255, 255, 0.16);
}

.cx-lock-keyhole span {
  position: relative;
  width: 13px;
  height: 26px;
  margin-top: 9px;
  border-radius: 4px 4px 7px 7px;
  background: #050505;
}

.cx-lock-keyhole span::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  top: -13px;
  left: 50%;
  border-radius: 50%;
  transform: translateX(-50%);
  background: #050505;
}

.cx-lock-brand {
  position: absolute;
  width: 100%;
  bottom: 25px;
  text-align: center;
  color: rgba(255, 255, 255, 0.73);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
}

.cx-lock-security-ring {
  position: absolute;
  z-index: -1;
  width: 330px;
  height: 330px;
  top: 28px;
  left: -30px;
  border: 1px solid rgba(255, 91, 0, 0);
  border-radius: 50%;
  transform: scale(0.55);
  opacity: 0;
}

.cx-lock-security-ring.ring-two {
  width: 410px;
  height: 410px;
  top: -10px;
  left: -70px;
}

.cx-lock-stage.is-locked .cx-lock-security-ring {
  animation: cxSecurityRing 2.8s ease-out 0.95s infinite;
}

.cx-lock-stage.is-locked .cx-lock-security-ring.ring-two {
  animation-delay: 1.45s;
}

@keyframes cxSecurityRing {
  0% {
    opacity: 0;
    transform: scale(0.55);
    border-color: rgba(255, 91, 0, 0.8);
  }

  18% {
    opacity: 0.72;
  }

  100% {
    opacity: 0;
    transform: scale(1.25);
    border-color: rgba(255, 91, 0, 0);
  }
}

/* =========================================================
   STATUS + BASE
========================================================= */

.cx-lock-status {
  position: absolute;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 9px;
  bottom: 7%;
  left: 50%;
  padding: 11px 17px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  transform: translateX(-50%) translateY(14px);
  opacity: 0;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(15, 15, 17, 0.77);
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  transition:
    opacity 0.7s ease 1.05s,
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.05s;
}

.cx-lock-stage.is-locked .cx-lock-status {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.cx-lock-status strong {
  font-size: 12px;
  letter-spacing: 0.015em;
}

.cx-lock-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cx-orange);
  box-shadow:
    0 0 8px rgba(255, 91, 0, 0.9),
    0 0 18px rgba(255, 91, 0, 0.5);
}

.cx-lock-base {
  position: absolute;
  z-index: 0;
  width: 380px;
  height: 85px;
  left: 50%;
  bottom: 7%;
  border-radius: 50%;
  transform:
    translateX(-50%)
    rotateX(72deg);
  background:
    radial-gradient(
      ellipse,
      rgba(255, 91, 0, 0.16),
      rgba(0, 0, 0, 0.77) 67%,
      transparent 72%
    );
  filter: blur(3px);
}

.cx-lock-base span {
  position: absolute;
  width: 58%;
  height: 42%;
  top: 24%;
  left: 21%;
  border-radius: 50%;
  background: rgba(255, 91, 0, 0.17);
  filter: blur(22px);
  opacity: 0;
  transition: opacity 1s ease 0.8s;
}

.cx-lock-stage.is-locked .cx-lock-base span {
  opacity: 1;
}

/* Lock impact */
.cx-lock-stage.is-locked .cx-security-lock {
  animation:
    cxLockImpact 1.25s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both,
    cxLockFloat 5.5s ease-in-out 2.1s infinite;
}

@keyframes cxLockImpact {
  0% {
    transform:
      translate(-50%, -50%)
      rotateY(-5deg)
      translateY(-5px)
      scale(0.97);
  }

  62% {
    transform:
      translate(-50%, -50%)
      rotateY(0)
      translateY(7px)
      scale(1.025);
  }

  78% {
    transform:
      translate(-50%, -50%)
      rotateY(0)
      translateY(-2px)
      scale(0.992);
  }

  100% {
    transform:
      translate(-50%, -50%)
      rotateY(0)
      translateY(0)
      scale(1);
  }
}

@keyframes cxLockFloat {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      translateY(0);
  }

  50% {
    transform:
      translate(-50%, -50%)
      translateY(-7px);
  }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1120px) {
  .cx-lock-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(470px, 1.1fr);
    gap: 35px;
  }

  .cx-lock-stage {
    min-height: 590px;
  }

  .cx-lock-platform {
    width: min(100%, 680px);
  }
}

@media (max-width: 920px) {
  .cx-lock-section {
    padding: 90px 0 75px;
  }

  .cx-lock-layout {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  .cx-lock-content {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
  }

  .cx-lock-content h2,
  .cx-lock-content > .lead {
    margin-inline: auto;
  }

  .cx-lock-steps {
    max-width: 680px;
    margin-inline: auto;
    margin-top: 34px;
    text-align: left;
  }

  .cx-lock-stage {
    min-height: 590px;
  }

  .cx-lock-platform {
    width: min(100%, 700px);
  }
}

@media (max-width: 650px) {
  .cx-lock-section {
    padding: 75px 0 55px;
  }

  .cx-lock-content h2 {
    font-size: clamp(39px, 11vw, 52px);
  }

  .cx-lock-step {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    padding: 15px 14px;
  }

  .cx-lock-step-number {
    width: 38px;
    height: 38px;
  }

  .cx-lock-stage {
    min-height: 500px;
  }

  .cx-lock-platform {
    width: 630px;
    max-width: none;
    transform: scale(0.74);
  }
}

@media (max-width: 440px) {
  .cx-lock-stage {
    min-height: 430px;
  }

  .cx-lock-platform {
    transform: scale(0.62);
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .cx-lock-platform,
  .cx-lock-ambient-glow,
  .cx-app-node,
  .cx-lock-shackle,
  .cx-lock-step,
  .cx-lock-status {
    transition: none !important;
  }

  .cx-security-lock,
  .cx-network-path,
  .cx-network-dot,
  .cx-lock-security-ring,
  .cx-lock-status-lights span {
    animation: none !important;
  }

  .cx-lock-shackle {
    transform: translateY(0) rotate(0);
  }

  .cx-lock-step,
  .cx-app-node,
  .cx-lock-status {
    opacity: 1;
    transform: none;
  }

  .cx-network-path {
    opacity: 0.75;
    stroke-dashoffset: 0;
  }
}
/* =========================================================
   SCROLL-DRIVEN PLATFORM PROTECTION
========================================================= */

.cx-protection-scroll {
  --cx-orange: #ff5b00;
  --cx-orange-light: #ff8138;
  --cx-panel: #151517;

  position: relative;
  min-height: 380vh;
  overflow: clip;
  isolation: isolate;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 80% 36%,
      rgba(255, 91, 0, 0.14),
      transparent 31%
    ),
    linear-gradient(
      110deg,
      #0e0e10 0%,
      #111113 52%,
      #211008 100%
    );
}

.cx-protection-grid-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    );
  background-size: 58px 58px;
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 17%,
    #000 85%,
    transparent
  );
}

.cx-protection-scroll-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 0.82fr)
    minmax(500px, 1.18fr);
  gap: clamp(50px, 7vw, 110px);
  align-items: start;
}

.cx-protection-copy {
  padding: 110px 0 130px;
}

.cx-protection-intro {
  position: sticky;
  top: 115px;
  z-index: 2;
  max-width: 610px;
}

.cx-protection-intro h2 {
  max-width: 610px;
  margin: 14px 0 0;
  color: #ffffff;
  font-size: clamp(48px, 4.6vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  font-weight: 650;
}

.cx-protection-intro .lead {
  max-width: 585px;
  margin: 25px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.7;
}

.cx-protection-steps {
  display: grid;
  gap: 68vh;
  padding-top: 88vh;
  padding-bottom: 90vh;
}

.cx-protection-step {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 17px;
  max-width: 570px;
  padding: 23px 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  opacity: 0.22;
  transform: translateX(-20px) scale(0.985);
  background:
    linear-gradient(
      125deg,
      rgba(255, 255, 255, 0.065),
      rgba(255, 255, 255, 0.018)
    );
  transition:
    opacity 0.45s ease,
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s ease,
    background 0.4s ease;
}

.cx-protection-step::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--cx-orange);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.55s ease;
}

.cx-protection-step.is-current {
  opacity: 1;
  transform: translateX(0) scale(1);
  border-color: rgba(255, 91, 0, 0.42);
  background:
    linear-gradient(
      125deg,
      rgba(255, 91, 0, 0.14),
      rgba(255, 255, 255, 0.025)
    );
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.cx-protection-step.is-current::before {
  transform: scaleY(1);
}

.cx-protection-step-number {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(255, 91, 0, 0.27);
  border-radius: 14px;
  color: var(--cx-orange-light);
  background: rgba(255, 91, 0, 0.1);
  font-size: 12px;
  font-weight: 800;
}

.cx-step-label {
  display: block;
  margin-bottom: 5px;
  color: var(--cx-orange-light);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}

.cx-protection-step h3 {
  margin: 0 0 6px;
  color: #ffffff;
  font-size: 19px;
}

.cx-protection-step p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1.65;
}

/* =========================================================
   PINNED VISUAL
========================================================= */

.cx-protection-visual-column {
  position: relative;
  min-height: 380vh;
}

.cx-protection-visual {
  position: sticky;
  top: 88px;
  width: 100%;
  height: calc(100vh - 110px);
  min-height: 620px;
  display: grid;
  place-items: center;
  perspective: 1500px;
}

.cx-protection-orb {
  position: absolute;
  width: 53%;
  height: 53%;
  left: 50%;
  top: 48%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.72);
  opacity: 0.15;
  background: rgba(255, 91, 0, 0.22);
  filter: blur(90px);
}

.cx-protection-network {
  position: relative;
  z-index: 3;
  display: block;
  width: min(100%, 820px);
  height: auto;
  overflow: visible;
  transform: rotateX(2deg) rotateY(-2deg);
  transform-style: preserve-3d;
}

.cx-platform-status {
  position: absolute;
  z-index: 10;
  top: 8%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.73);
  background: rgba(15, 15, 17, 0.7);
  backdrop-filter: blur(14px);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.cx-platform-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition:
    background 0.35s ease,
    box-shadow 0.35s ease;
}

.cx-platform-status.is-active .cx-platform-status-dot {
  background: var(--cx-orange);
  box-shadow:
    0 0 8px rgba(255, 91, 0, 0.9),
    0 0 20px rgba(255, 91, 0, 0.48);
}

/* CONNECTION LINES */

.cx-connection-path {
  fill: none;
  stroke: url(#cxLineGradient);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  opacity: 0.18;
  filter: url(#cxGlow);
}

.cx-connection-dot {
  fill: var(--cx-orange);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.cx-connection-group.is-connected .cx-connection-path {
  opacity: 0.95;
}

.cx-connection-group.is-connected .cx-connection-dot {
  opacity: 1;
}

/* PLATFORM ICONS */

.cx-platform-icon {
  color: rgba(255, 255, 255, 0.34);
  opacity: 0.25;
  transform-box: fill-box;
  transform-origin: center;
}

.cx-platform-icon-bg {
  fill: rgba(20, 20, 23, 0.9);
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 2;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.4));
}

.cx-platform-icon.is-connected {
  color: var(--cx-orange-light);
  opacity: 1;
}

.cx-platform-icon.is-connected .cx-platform-icon-bg {
  stroke: rgba(255, 91, 0, 0.58);
  fill: rgba(255, 91, 0, 0.085);
}

.cx-google-letter {
  fill: currentColor;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 46px;
  font-weight: 800;
}

/* LOCK */

.cx-main-lock {
  transform-box: fill-box;
  transform-origin: center;
}

.cx-lock-shackle-svg {
  transform-box: fill-box;
  transform-origin: 82% 92%;
}

.cx-lock-lights circle {
  fill: #2b1108;
}

.cx-lock-logo-text {
  fill: rgba(255, 255, 255, 0.78);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.4px;
}

.cx-lock-ground-shadow {
  transform-box: fill-box;
  transform-origin: center;
}

.cx-security-pulse {
  fill: none;
  stroke: rgba(255, 91, 0, 0);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
}

.cx-final-check {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.2);
}

/* PLATFORM LABELS */

.cx-platform-labels {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 10px;
  font-weight: 650;
}

.cx-platform-labels span {
  position: absolute;
  opacity: 0;
}

.label-google {
  top: 24%;
  left: 8%;
}

.label-analytics {
  top: 50%;
  left: 3%;
}

.label-tag {
  bottom: 18%;
  left: 7%;
}

.label-ads {
  top: 24%;
  right: 7%;
}

.label-meta {
  top: 50%;
  right: 5%;
}

.label-microsoft {
  right: 6%;
  bottom: 18%;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {
  .cx-protection-scroll-layout {
    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(430px, 1.1fr);
    gap: 28px;
  }

  .cx-protection-intro h2 {
    font-size: clamp(45px, 5vw, 62px);
  }

  .cx-protection-network {
    width: min(110%, 720px);
  }
}

@media (max-width: 850px) {
  .cx-protection-scroll {
    min-height: auto;
    padding: 80px 0;
  }

  .cx-protection-scroll-layout {
    grid-template-columns: 1fr;
  }

  .cx-protection-copy {
    padding: 0;
  }

  .cx-protection-intro {
    position: relative;
    top: auto;
    max-width: 700px;
    margin-inline: auto;
    text-align: center;
  }

  .cx-protection-intro h2,
  .cx-protection-intro .lead {
    margin-inline: auto;
  }

  .cx-protection-steps {
    gap: 14px;
    padding: 45px 0 0;
  }

  .cx-protection-step {
    max-width: 680px;
    margin-inline: auto;
  }

  .cx-protection-visual-column {
    min-height: auto;
  }

  .cx-protection-visual {
    position: relative;
    top: auto;
    height: auto;
    min-height: 560px;
    margin-top: 45px;
  }

  .cx-protection-network {
    width: min(112%, 700px);
  }

  .cx-platform-labels {
    display: none;
  }
}

@media (max-width: 540px) {
  .cx-protection-scroll {
    padding: 68px 0 45px;
  }

  .cx-protection-intro h2 {
    font-size: clamp(40px, 11vw, 52px);
  }

  .cx-protection-step {
    grid-template-columns: 43px minmax(0, 1fr);
    padding: 17px 15px;
  }

  .cx-protection-step-number {
    width: 40px;
    height: 40px;
  }

  .cx-protection-visual {
    min-height: 430px;
    margin-inline: -12%;
    width: 124%;
  }

  .cx-platform-status {
    top: 3%;
  }
}
/* =========================================================
   CLICKRONIX TWO-FRAME LOCK ANIMATION
========================================================= */

.cx-lock-flow {
  position: relative;
  overflow: clip;
  padding: clamp(82px, 7vw, 110px) 0;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 76% 48%,
      rgba(255, 91, 0, 0.16),
      transparent 30%
    ),
    linear-gradient(
      108deg,
      #111113 0%,
      #121012 40%,
      #26130d 72%,
      #371405 100%
    );
}

.cx-lock-flow-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.36;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px
    );
  background-size: 72px 72px;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.9),
    rgba(0, 0, 0, 0.36),
    transparent
  );
}

/* =========================================================
   HEADING
========================================================= */

.cx-lock-flow-heading {
  position: relative;
  z-index: 2;
  width: min(760px, 100%);
  margin-bottom: 58px;
}

.cx-lock-flow-heading .eyebrow {
  margin-bottom: 14px;
}

.cx-lock-flow-heading h2 {
  max-width: 720px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(44px, 5vw, 70px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.cx-lock-flow-heading p {
  max-width: 680px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 18px;
  line-height: 1.68;
}

/* =========================================================
   LAYOUT
========================================================= */

.cx-lock-flow-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    minmax(330px, 0.82fr)
    minmax(540px, 1.18fr);
  gap: clamp(45px, 7vw, 100px);
  align-items: start;
}

.cx-lock-flow-steps {
  display: grid;
  gap: 32px;
  padding-bottom: 80px;
}

/* =========================================================
   STEP CARDS
========================================================= */

.cx-lock-flow-step {
  position: relative;
  min-height: 310px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 22px;
  align-content: center;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-left-color: rgba(255, 91, 0, 0.28);
  border-radius: 24px;
  background:
    linear-gradient(
      130deg,
      rgba(255, 255, 255, 0.075),
      rgba(255, 255, 255, 0.025)
    );
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.19),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  opacity: 0.48;
  transform: scale(0.985);
  transition:
    opacity 0.38s ease,
    transform 0.38s ease,
    border-color 0.38s ease,
    box-shadow 0.38s ease;
}

.cx-lock-flow-step.is-active {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(255, 91, 0, 0.58);
  box-shadow:
    0 28px 76px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 91, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cx-lock-flow-number {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 91, 0, 0.45);
  border-radius: 17px;
  color: #ff6a00;
  background: rgba(255, 91, 0, 0.065);
  font-size: 13px;
  font-weight: 800;
}

.cx-lock-flow-label {
  display: block;
  margin-bottom: 9px;
  color: #ff6a00;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cx-lock-flow-step h3 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(23px, 2vw, 31px);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.cx-lock-flow-step p {
  margin: 15px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 15px;
  line-height: 1.65;
}

.cx-lock-flow-step ul {
  display: grid;
  gap: 9px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.cx-lock-flow-step li {
  position: relative;
  padding-left: 18px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
}

.cx-lock-flow-step li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff6500;
  box-shadow: 0 0 10px rgba(255, 91, 0, 0.45);
}

/* =========================================================
   PINNED VISUAL
========================================================= */

.cx-lock-flow-visual-column {
  position: relative;
  min-width: 0;
}

.cx-lock-flow-visual {
  position: sticky;
  top: 115px;
  min-height: 620px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 32px;
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(255, 91, 0, 0.12),
      transparent 42%
    ),
    rgba(255, 255, 255, 0.018);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 30px 90px rgba(0, 0, 0, 0.13);
}

.cx-lock-network {
  display: block;
  width: min(100%, 760px);
  height: auto;
  overflow: visible;
}

/* =========================================================
   STATUS
========================================================= */

.cx-lock-flow-status {
  position: absolute;
  z-index: 5;
  top: 26px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(12, 12, 14, 0.72);
  backdrop-filter: blur(15px);
  transform: translateX(-50%);
  font-size: 11px;
  white-space: nowrap;
}

.cx-lock-flow-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff6500;
  box-shadow: 0 0 13px rgba(255, 91, 0, 0.9);
  animation: cxLockStatusPulse 1.8s ease-in-out infinite;
}

/* =========================================================
   CONNECTIONS
========================================================= */

.cx-lock-connection path {
  fill: none;
  stroke: url(#cxConnectionLine);
  stroke-width: 2;
  stroke-dasharray: 520;
  stroke-dashoffset: 0;
  opacity: 0.72;
}

.cx-lock-connection circle {
  fill: #ff6500;
  filter: url(#cxOrangePointGlow);
}

.cx-lock-platform {
  color: rgba(255, 255, 255, 0.82);
}

.cx-lock-platform > rect {
  fill: rgba(255, 255, 255, 0.04);
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 2;
}

.cx-lock-google-g {
  fill: currentColor;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 36px;
  font-weight: 800;
}

.cx-lock-platform-labels {
  fill: rgba(255, 255, 255, 0.55);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
}

/* =========================================================
   WHITE UI LOCK
========================================================= */

.cx-ui-lock {
  transform-origin: 450px 376px;
}

.cx-ui-lock-shackle {
  transform-box: fill-box;
  transform-origin: 82% 92%;
}

.cx-ui-lock-lights circle {
  fill: rgba(255, 255, 255, 0.92);
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.65));
}

.cx-ui-lock-brand {
  fill: rgba(255, 255, 255, 0.7);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.24em;
}

.cx-lock-security-ring {
  fill: none;
  stroke: rgba(255, 91, 0, 0.22);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.cx-lock-final-check {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.cx-lock-bg-glow {
  opacity: 0.7;
}

/* =========================================================
   FRAME INDICATOR
========================================================= */

.cx-lock-frame-indicator {
  position: absolute;
  bottom: 25px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.54);
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 800;
}

.cx-lock-frame-indicator span:first-child {
  color: #ff6500;
}

.cx-lock-frame-indicator i {
  position: relative;
  width: 60px;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}

.cx-lock-frame-indicator i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #ff6500;
  transform: scaleX(var(--cx-lock-progress, 0));
  transform-origin: left center;
  transition: transform 0.4s ease;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes cxLockStatusPulse {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(0.85);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {
  .cx-lock-flow-layout {
    grid-template-columns:
      minmax(300px, 0.9fr)
      minmax(450px, 1.1fr);
    gap: 40px;
  }

  .cx-lock-flow-visual {
    min-height: 560px;
  }
}

@media (max-width: 850px) {
  .cx-lock-flow {
    padding: 80px 0;
  }

  .cx-lock-flow-heading {
    margin-bottom: 44px;
  }

  .cx-lock-flow-layout {
    grid-template-columns: 1fr;
  }

  .cx-lock-flow-visual-column {
    grid-row: 1;
  }

  .cx-lock-flow-visual {
    position: relative;
    top: auto;
    min-height: auto;
    padding: 35px 0 55px;
  }

  .cx-lock-flow-steps {
    grid-row: 2;
    padding-bottom: 0;
  }

  .cx-lock-flow-step {
    min-height: auto;
  }
}

@media (max-width: 560px) {
  .cx-lock-flow-heading h2 {
    font-size: clamp(39px, 11vw, 52px);
  }

  .cx-lock-flow-heading p {
    font-size: 16px;
  }

  .cx-lock-flow-step {
    grid-template-columns: 1fr;
    padding: 25px;
  }

  .cx-lock-flow-number {
    width: 48px;
    height: 48px;
  }

  .cx-lock-flow-status {
    top: 18px;
  }

  .cx-lock-network {
    width: 112%;
    margin-inline: -6%;
  }
}
/* =========================================================
   CLICKRONIX PREMIUM WHITE UI LOCK STORY
========================================================= */
.cx-lock-story {
  position: relative;
  overflow: clip;
  min-height: 860px;
  padding: 92px 0 82px;
  color: #fff;
  background:
    radial-gradient(circle at 72% 46%, rgba(255, 91, 0, .18), transparent 31%),
    linear-gradient(110deg, #101114 0%, #111114 43%, #24120c 74%, #321406 100%);
}

.cx-lock-story-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to right, rgba(0,0,0,.9), rgba(0,0,0,.35), transparent);
}

.cx-lock-story-wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(330px, .82fr) minmax(560px, 1.18fr);
  gap: clamp(48px, 6vw, 100px);
  align-items: start;
}

.cx-lock-story-copy { min-width: 0; }

.cx-lock-story-head { max-width: 570px; }
.cx-lock-story-head .eyebrow { margin-bottom: 18px; }
.cx-lock-story-head h2 {
  margin: 0;
  max-width: 540px;
  color: #fff;
  font-size: clamp(48px, 4.8vw, 72px);
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.cx-lock-story-head p {
  max-width: 540px;
  margin: 24px 0 0;
  color: rgba(255,255,255,.68);
  font-size: 18px;
  line-height: 1.62;
}

.cx-lock-story-steps {
  display: grid;
  gap: 16px;
  margin-top: 54px;
}
.cx-lock-story-step {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr);
  gap: 18px;
  padding: 23px 24px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  opacity: .5;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease, border-color .3s ease, background .3s ease;
}
.cx-lock-story-step.is-active {
  opacity: 1;
  transform: translateY(0);
  border-color: rgba(255,91,0,.62);
  background: linear-gradient(135deg, rgba(255,91,0,.10), rgba(255,255,255,.035));
  box-shadow: inset 3px 0 0 #ff5b00, 0 18px 55px rgba(0,0,0,.18);
}
.cx-lock-story-step-no {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,91,0,.5);
  border-radius: 13px;
  color: #ff6a12;
  font-size: 12px;
  font-weight: 800;
}
.cx-lock-story-kicker {
  display: block;
  margin-bottom: 6px;
  color: #ff6a12;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cx-lock-story-step h3 { margin: 0; color: #fff; font-size: 18px; }
.cx-lock-story-step p { margin: 8px 0 0; color: rgba(255,255,255,.67); font-size: 14px; line-height: 1.55; }

.cx-lock-story-visual-col {
  min-width: 0;
  position: sticky;
  top: 100px;
}
.cx-lock-story-visual {
  position: relative;
  width: 100%;
  min-height: 640px;
  isolation: isolate;
}
.cx-lock-status {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  color: rgba(255,255,255,.75);
  background: rgba(10,10,12,.5);
  box-shadow: 0 14px 40px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
  font-size: 11px;
  white-space: nowrap;
}
.cx-lock-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff6500;
  box-shadow: 0 0 14px rgba(255,101,0,.9);
}

.cx-lock-links {
  position: absolute;
  z-index: 2;
  inset: 66px 0 0;
  width: 100%;
  height: 520px;
  overflow: visible;
}
.cx-lock-link {
  fill: none;
  stroke: url(#cxLinkWhite);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.cx-lock-link-dot { fill: #ff6500; filter: drop-shadow(0 0 7px rgba(255,101,0,.9)); }

.cx-lock-platform {
  position: absolute;
  z-index: 8;
  width: 122px;
  display: grid;
  justify-items: center;
  gap: 9px;
  color: rgba(255,255,255,.74);
  text-align: center;
}
.cx-lock-platform strong { font-size: 11px; font-weight: 600; }
.cx-lock-platform-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.035));
  box-shadow: 0 18px 44px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter: blur(14px);
}
.cx-lock-platform-icon svg { width: 30px; height: 30px; }
.cx-lock-platform-google { left: 0; top: 106px; }
.cx-lock-platform-analytics { left: -8px; top: 268px; }
.cx-lock-platform-tag { left: 0; top: 432px; }
.cx-lock-platform-ads { right: 0; top: 106px; }
.cx-lock-platform-meta { right: -8px; top: 268px; }
.cx-lock-platform-microsoft { right: 0; top: 432px; }
.cx-lock-ms-grid { grid-template-columns: repeat(2, 12px); grid-template-rows: repeat(2, 12px); gap: 4px; }
.cx-lock-ms-grid i { width: 12px; height: 12px; background: currentColor; opacity: .9; }
.cx-lock-ms-grid i:nth-child(2), .cx-lock-ms-grid i:nth-child(3) { opacity: .55; }

.cx-ui-lock {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 150px;
  width: 250px;
  height: 340px;
  transform: translateX(-50%);
}
.cx-ui-lock-halo {
  position: absolute;
  left: 50%;
  top: 43%;
  width: 290px;
  height: 290px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,.035) 42%, transparent 68%);
  opacity: .55;
  transform: translate(-50%,-50%);
  filter: blur(2px);
}
.cx-ui-lock-shackle {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 0;
  width: 142px;
  height: 150px;
  border: 17px solid rgba(255,255,255,.88);
  border-bottom: 0;
  border-radius: 72px 72px 0 0;
  transform: translateX(-50%);
  box-shadow:
    inset 5px 0 10px rgba(255,255,255,.32),
    inset -8px 0 14px rgba(0,0,0,.14),
    0 0 28px rgba(255,255,255,.13);
  backdrop-filter: blur(12px);
}
.cx-ui-lock-shackle span {
  position: absolute;
  inset: 8px;
  border-radius: 58px 58px 0 0;
  border: 1px solid rgba(255,255,255,.3);
}
.cx-ui-lock-body {
  position: absolute;
  z-index: 3;
  left: 55%;
  top: 122px;
  width: 230px;
  height: 210px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 42px;
  background: linear-gradient(145deg, rgba(255,255,255,.19), rgba(255,255,255,.055));
  box-shadow: 0 34px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.4);
  backdrop-filter: blur(24px) saturate(140%);
  transform: translateX(-50%);
  transform-origin: 50% 60%;
}
.cx-ui-lock-glass {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 10%, rgba(255,255,255,.36), transparent 34%),
    linear-gradient(130deg, transparent 20%, rgba(255,255,255,.08) 50%, transparent 70%);
}
.cx-ui-lock-lights {
  position: absolute;
  top: 28px;
  left: 50%;
  display: flex;
  gap: 9px;
  transform: translateX(-50%);
}
.cx-ui-lock-lights i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.5); }
.cx-ui-lock-keyhole {
  position: absolute;
  left: 50%;
  top: 84px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(5,6,8,.84);
  transform: translateX(-50%);
  box-shadow: inset 0 4px 10px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
}
.cx-ui-lock-keyhole span {
  position: absolute;
  left: 50%;
  top: 31px;
  width: 18px;
  height: 36px;
  background: rgba(5,6,8,.9);
  clip-path: polygon(25% 0,75% 0,100% 100%,0 100%);
  transform: translateX(-50%);
}
.cx-ui-lock-brand {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  color: rgba(255,255,255,.82);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .28em;
  text-align: center;
}
.cx-ui-lock-check {
  position: absolute;
  z-index: 10;
  left: 55%;
  top: 204px;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 50%;
  color: #ff6500;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 45px rgba(0,0,0,.28), 0 0 34px rgba(255,255,255,.2);
  transform: translate(-50%,-50%);
  backdrop-filter: blur(16px);
}
.cx-ui-lock-check svg { width: 34px; height: 34px; }
.cx-lock-floor-shadow {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 510px;
  width: 290px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,.43);
  filter: blur(12px);
  transform: translateX(-50%);
}

@media (max-width: 1100px) {
  .cx-lock-story-wrap { grid-template-columns: minmax(300px,.85fr) minmax(500px,1.15fr); gap: 40px; }
  .cx-lock-story-visual { transform: scale(.9); transform-origin: top center; margin-bottom: -60px; }
}

@media (max-width: 900px) {
  .cx-lock-story { min-height: auto; padding: 78px 0 62px; }
  .cx-lock-story-wrap { grid-template-columns: 1fr; }
  .cx-lock-story-head { max-width: 700px; }
  .cx-lock-story-head h2 { max-width: 700px; }
  .cx-lock-story-head p { max-width: 680px; }
  .cx-lock-story-steps { margin-top: 34px; }
  .cx-lock-story-visual-col { position: relative; top: auto; }
  .cx-lock-story-visual { width: min(100%, 720px); margin: 10px auto -20px; }
}

@media (max-width: 650px) {
  .cx-lock-story { padding: 68px 0 52px; }
  .cx-lock-story-head h2 { font-size: clamp(42px,12vw,58px); }
  .cx-lock-story-head p { font-size: 16px; }
  .cx-lock-story-step { grid-template-columns: 44px 1fr; padding: 20px; }
  .cx-lock-story-visual { min-height: 560px; transform: scale(.78); transform-origin: top center; margin-bottom: -120px; }
}

@media (prefers-reduced-motion: reduce) {
  .cx-lock-story-visual { transform: none !important; }
}
/* =========================================================
   CLICKRONIX PRICING SECTION
========================================================= */

.cx-pricing-section {
  position: relative;
  overflow: hidden;
  padding: 95px 0 85px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 91, 0, .08), transparent 32%),
    linear-gradient(110deg, #101114 0%, #111114 44%, #1f120d 72%, #261308 100%);
}

.cx-pricing-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,.25));
}

.cx-pricing-head {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto 42px;
  text-align: center;
}

.cx-pricing-head h2 {
  margin: 10px 0 0;
  font-size: clamp(42px, 4.6vw, 68px);
  line-height: .98;
  letter-spacing: -.055em;
  color: #fff;
}

.cx-pricing-head p {
  max-width: 720px;
  margin: 20px auto 0;
  color: rgba(255,255,255,.68);
  font-size: 18px;
  line-height: 1.65;
}

/* =========================================================
   TOGGLE
========================================================= */

.cx-pricing-toggle {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
}

.toggle-label {
  color: rgba(255,255,255,.6);
  font-size: 14px;
  font-weight: 700;
  transition: color .25s ease;
}

.toggle-label small {
  display: block;
  margin-top: 2px;
  color: #ff7a1d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}

.toggle-label.is-active {
  color: #fff;
}

.cx-billing-switch {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.cx-billing-switch-track {
  position: relative;
  width: 62px;
  height: 34px;
  display: block;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.cx-billing-switch-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff8a2b, #ff5b00 58%, #cd3600 100%);
  box-shadow:
    0 8px 22px rgba(255,91,0,.36),
    inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .28s cubic-bezier(.16,1,.3,1);
}

.cx-billing-switch.is-yearly .cx-billing-switch-thumb {
  transform: translateX(28px);
}

/* =========================================================
   GRID
========================================================= */

.cx-pricing-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.cx-price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 24px 22px 22px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:
    0 24px 60px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.05);
  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}

.cx-price-card:hover {
  transform: translateY(-7px);
  border-color: rgba(255,91,0,.34);
  box-shadow:
    0 30px 70px rgba(0,0,0,.24),
    0 0 0 1px rgba(255,91,0,.08),
    0 0 36px rgba(255,91,0,.08);
}

.cx-price-card.is-popular {
  border-color: rgba(255,91,0,.78);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,91,0,.11), transparent 40%),
    linear-gradient(145deg, rgba(255,91,0,.11), rgba(255,255,255,.025));
  box-shadow:
    0 28px 70px rgba(0,0,0,.25),
    0 0 44px rgba(255,91,0,.08);
}

.cx-popular-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(145deg, #ff8a2c, #ff5b00);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(255,91,0,.35);
}

.cx-price-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.cx-plan-kicker {
  display: inline-block;
  color: #ff6f14;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cx-price-card h3 {
  margin: 6px 0 0;
  color: #fff;
  font-size: 24px;
  line-height: 1.05;
}

.cx-price-block {
  text-align: right;
}

.cx-price-value {
  color: #fff;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
}

.cx-price-number {
  display: inline-block;
  min-width: 46px;
}

.cx-price-period {
  margin-top: 4px;
  color: rgba(255,255,255,.72);
  font-size: 14px;
}

.cx-plan-copy {
  min-height: 98px;
  margin: 28px 0 18px;
  color: rgba(255,255,255,.72);
  font-size: 15px;
  line-height: 1.7;
}

.cx-plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cx-plan-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.8);
  font-size: 15px;
}

.cx-plan-features li::before {
  content: "✓";
  color: #ff6208;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.cx-plan-features li strong {
  color: #fff;
  font-weight: 800;
}

.cx-plan-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  margin-top: 22px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease;
}

.cx-plan-btn:hover {
  transform: translateY(-2px);
}

.cx-plan-btn-primary {
  color: #fff;
  background: linear-gradient(145deg, #ff8a2c, #ff5b00 58%, #cf3600 100%);
  box-shadow: 0 14px 34px rgba(255,91,0,.26);
}

.cx-plan-btn-primary:hover {
  box-shadow: 0 20px 40px rgba(255,91,0,.34);
}

.cx-plan-btn-secondary {
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}

.cx-plan-btn-secondary:hover {
  border-color: rgba(255,91,0,.35);
  background: rgba(255,91,0,.05);
}

/* yearly flash */
.cx-price-card.is-billing-updated {
  animation: cxBillingFlash .45s ease;
}

@keyframes cxBillingFlash {
  0% {
    transform: translateY(0) scale(1);
  }
  35% {
    transform: translateY(-3px) scale(1.02);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1180px) {
  .cx-pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .cx-pricing-section {
    padding: 72px 0 52px;
  }

  .cx-pricing-head h2 {
    font-size: clamp(38px, 10vw, 54px);
  }

  .cx-pricing-head p {
    font-size: 16px;
  }

  .cx-pricing-toggle {
    gap: 10px;
    padding: 10px 12px;
  }

  .toggle-label {
    font-size: 13px;
  }

  .cx-pricing-grid {
    grid-template-columns: 1fr;
  }

  .cx-plan-copy {
    min-height: auto;
  }
}/* =========================================================
   CLICKRONIX AI HELP CENTER
========================================================= */

.cx-ai-help {
  --cx-ai-orange: #ff5b00;
  --cx-ai-orange-light: #ff8439;
  --cx-ai-dark: #101012;
  --cx-ai-panel: #18181b;
  --cx-ai-line: rgba(255, 255, 255, 0.1);

  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(90px, 9vw, 145px) 0;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 77% 45%,
      rgba(255, 91, 0, 0.17),
      transparent 32%
    ),
    radial-gradient(
      circle at 22% 88%,
      rgba(255, 91, 0, 0.06),
      transparent 25%
    ),
    linear-gradient(
      112deg,
      #0e0e10 0%,
      #111113 52%,
      #211008 100%
    );
}

.cx-ai-help-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.032) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.032) 1px,
      transparent 1px
    );
  background-size: 60px 60px;
  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 17%,
      #000 85%,
      transparent
    );
}

.cx-ai-help-glow {
  position: absolute;
  z-index: -2;
  width: 520px;
  height: 520px;
  top: 50%;
  right: 7%;
  border-radius: 50%;
  transform: translateY(-50%);
  background: rgba(255, 91, 0, 0.12);
  filter: blur(110px);
  animation: cxAiBackgroundGlow 5s ease-in-out infinite;
}

.cx-ai-help-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 0.88fr)
    minmax(510px, 1.12fr);
  align-items: center;
  gap: clamp(55px, 7vw, 110px);
}

/* =========================================================
   LEFT COPY
========================================================= */

.cx-ai-help-copy {
  max-width: 620px;
}

.cx-ai-help-copy h2 {
  max-width: 610px;
  margin: 14px 0 0;
  color: #ffffff;
  font-size: clamp(48px, 4.6vw, 72px);
  font-weight: 650;
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.cx-ai-help-copy h2 span {
  color: var(--cx-ai-orange);
}

.cx-ai-help-copy > .lead {
  max-width: 590px;
  margin: 25px 0 0;
  color: rgba(255, 255, 255, 0.69);
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.7;
}

.cx-ai-help-benefits {
  display: grid;
  gap: 12px;
  margin-top: 35px;
}

.cx-ai-benefit {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 15px;
  align-items: start;
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 17px;
  background:
    linear-gradient(
      125deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.018)
    );
  opacity: 0;
  transform: translateX(-18px);
}

.cx-ai-benefit.is-visible {
  animation: cxAiBenefitReveal 0.65s
    cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cx-ai-benefit-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 91, 0, 0.27);
  border-radius: 13px;
  color: var(--cx-ai-orange-light);
  background: rgba(255, 91, 0, 0.09);
}

.cx-ai-benefit-icon svg {
  width: 22px;
  height: 22px;
}

.cx-ai-benefit strong {
  display: block;
  margin: 1px 0 5px;
  color: #ffffff;
  font-size: 15px;
}

.cx-ai-benefit p {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  line-height: 1.55;
}

.cx-ai-help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* =========================================================
   CHAT WRAPPER
========================================================= */

.cx-ai-chat-wrap {
  position: relative;
  display: grid;
  min-width: 0;
  place-items: center;
  perspective: 1500px;
}

.cx-ai-orbit {
  position: absolute;
  z-index: 0;
  width: min(100%, 610px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 91, 0, 0.14);
  border-radius: 50%;
  animation: cxAiOrbitSpin 22s linear infinite;
}

.cx-ai-orbit::before,
.cx-ai-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.cx-ai-orbit::before {
  inset: 12%;
}

.cx-ai-orbit::after {
  inset: 27%;
}

.cx-ai-orbit span {
  position: absolute;
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cx-ai-orange);
  box-shadow:
    0 0 10px rgba(255, 91, 0, 0.95),
    0 0 26px rgba(255, 91, 0, 0.55);
}

.cx-ai-orbit span:nth-child(1) {
  top: 13%;
  left: 22%;
}

.cx-ai-orbit span:nth-child(2) {
  top: 67%;
  right: 6%;
}

.cx-ai-orbit span:nth-child(3) {
  bottom: 4%;
  left: 38%;
}

/* =========================================================
   CHAT CARD
========================================================= */

.cx-ai-chat-card {
  position: relative;
  z-index: 3;
  width: min(100%, 590px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 30px;
  background:
    radial-gradient(
      circle at 85% 5%,
      rgba(255, 91, 0, 0.1),
      transparent 28%
    ),
    rgba(18, 18, 21, 0.92);
  box-shadow:
    0 45px 110px rgba(0, 0, 0, 0.44),
    0 0 0 1px rgba(255, 91, 0, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(24px);
  transform:
    rotateY(-4deg)
    rotateX(1deg)
    translateY(18px);
  opacity: 0;
}

.cx-ai-chat-wrap.is-visible .cx-ai-chat-card {
  animation: cxAiChatEntry 1s
    cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cx-ai-chat-header {
  display: flex;
  min-height: 84px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.018);
}

.cx-ai-agent {
  display: flex;
  align-items: center;
  gap: 13px;
}

.cx-ai-agent > div:last-child {
  display: grid;
  gap: 3px;
}

.cx-ai-agent strong {
  color: #ffffff;
  font-size: 14px;
}

.cx-ai-agent > div:last-child span {
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
}

.cx-ai-avatar {
  position: relative;
  width: 48px;
  height: 48px;
}

.cx-ai-avatar-core {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 15px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 30% 18%,
      rgba(255, 255, 255, 0.28),
      transparent 26%
    ),
    linear-gradient(
      145deg,
      #ff7c2a,
      #ff5b00 56%,
      #bd2c00
    );
  box-shadow: 0 12px 25px rgba(255, 91, 0, 0.2);
}

.cx-ai-avatar-core::after {
  content: "";
  position: absolute;
  width: 72%;
  height: 140%;
  top: -70%;
  left: -30%;
  transform: rotate(28deg);
  background: rgba(255, 255, 255, 0.18);
}

.cx-ai-avatar-core svg {
  position: relative;
  z-index: 2;
  width: 25px;
  height: 25px;
}

.cx-ai-online {
  position: absolute;
  z-index: 3;
  right: -2px;
  bottom: -2px;
  width: 13px;
  height: 13px;
  border: 3px solid #141416;
  border-radius: 50%;
  background: #42d684;
  box-shadow: 0 0 12px rgba(66, 214, 132, 0.6);
}

.cx-ai-header-button {
  display: flex;
  width: 37px;
  height: 37px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
}

.cx-ai-header-button span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
}

/* =========================================================
   CHAT MESSAGES
========================================================= */

.cx-ai-chat-messages {
  height: 335px;
  overflow-y: auto;
  padding: 22px 19px 12px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color:
    rgba(255, 91, 0, 0.35)
    transparent;
}

.cx-ai-chat-messages::-webkit-scrollbar {
  width: 5px;
}

.cx-ai-chat-messages::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 91, 0, 0.35);
}

.cx-ai-message {
  display: flex;
  width: 100%;
  gap: 10px;
  margin-bottom: 14px;
  animation: cxAiMessageIn 0.5s
    cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cx-ai-message-avatar {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 10px;
  color: #ffffff;
  background:
    linear-gradient(
      145deg,
      #ff7a26,
      #ff5b00
    );
}

.cx-ai-message-avatar svg {
  width: 17px;
  height: 17px;
}

.cx-ai-bubble {
  max-width: 78%;
  padding: 12px 14px 9px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 7px 17px 17px 17px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.045);
}

.cx-ai-bubble p {
  margin: 0;
  color: inherit;
  font-size: 13px;
  line-height: 1.58;
}

.cx-ai-bubble time {
  display: block;
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.32);
  font-size: 9px;
}

.cx-ai-message-user {
  justify-content: flex-end;
}

.cx-ai-message-user .cx-ai-bubble {
  border-color: rgba(255, 91, 0, 0.3);
  border-radius: 17px 7px 17px 17px;
  color: #ffffff;
  background:
    linear-gradient(
      145deg,
      rgba(255, 111, 24, 0.95),
      rgba(255, 76, 0, 0.96)
    );
  box-shadow: 0 13px 25px rgba(255, 91, 0, 0.13);
}

.cx-ai-message-user .cx-ai-bubble time {
  color: rgba(255, 255, 255, 0.63);
}

/* Typing indicator */

.cx-ai-typing {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding-inline: 16px;
}

.cx-ai-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.58);
  animation: cxAiTypingDot 1.1s ease-in-out infinite;
}

.cx-ai-typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.cx-ai-typing span:nth-child(3) {
  animation-delay: 0.3s;
}

/* =========================================================
   SUGGESTIONS
========================================================= */

.cx-ai-suggestions {
  padding: 12px 19px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.cx-ai-suggestions-label {
  display: block;
  margin-bottom: 9px;
  color: rgba(255, 255, 255, 0.37);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.cx-ai-suggestion-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.cx-ai-suggestion-list button {
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.026);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  transition:
    border-color 0.25s ease,
    color 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease;
}

.cx-ai-suggestion-list button:hover {
  border-color: rgba(255, 91, 0, 0.42);
  color: #ffffff;
  background: rgba(255, 91, 0, 0.08);
  transform: translateY(-2px);
}

/* =========================================================
   INPUT
========================================================= */

.cx-ai-input-form {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 43px;
  align-items: end;
  gap: 8px;
  margin: 0 19px 15px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.036);
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.cx-ai-input-form:focus-within {
  border-color: rgba(255, 91, 0, 0.5);
  box-shadow:
    0 0 0 3px rgba(255, 91, 0, 0.07),
    0 14px 35px rgba(0, 0, 0, 0.15);
}

.cx-ai-input-form textarea {
  width: 100%;
  min-height: 38px;
  max-height: 108px;
  resize: none;
  padding: 9px 4px 7px;
  border: 0;
  outline: 0;
  color: #ffffff;
  background: transparent;
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
}

.cx-ai-input-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.33);
}

.cx-ai-input-action,
.cx-ai-send {
  display: grid;
  border: 0;
  place-items: center;
  cursor: pointer;
}

.cx-ai-input-action {
  width: 37px;
  height: 37px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.48);
  background: transparent;
}

.cx-ai-input-action svg {
  width: 19px;
  height: 19px;
}

.cx-ai-send {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: #ffffff;
  background:
    linear-gradient(
      145deg,
      #ff8435,
      #ff5b00 58%,
      #cf3500
    );
  box-shadow:
    0 12px 25px rgba(255, 91, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.cx-ai-send:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 17px 30px rgba(255, 91, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.cx-ai-send svg {
  width: 19px;
  height: 19px;
}

.cx-ai-chat-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 0 20px 16px;
  color: rgba(255, 255, 255, 0.32);
  font-size: 9px;
}

.cx-ai-chat-footer a {
  color: rgba(255, 255, 255, 0.53);
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes cxAiBackgroundGlow {
  0%,
  100% {
    opacity: 0.65;
    transform: translateY(-50%) scale(0.92);
  }

  50% {
    opacity: 1;
    transform: translateY(-50%) scale(1.08);
  }
}

@keyframes cxAiOrbitSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes cxAiChatEntry {
  0% {
    opacity: 0;
    transform:
      translateY(38px)
      rotateY(-8deg)
      rotateX(3deg)
      scale(0.94);
  }

  100% {
    opacity: 1;
    transform:
      translateY(0)
      rotateY(-2deg)
      rotateX(0)
      scale(1);
  }
}

@keyframes cxAiBenefitReveal {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes cxAiMessageIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cxAiTypingDot {
  0%,
  60%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {
  .cx-ai-help-layout {
    grid-template-columns:
      minmax(0, 0.92fr)
      minmax(460px, 1.08fr);
    gap: 35px;
  }

  .cx-ai-help-copy h2 {
    font-size: clamp(45px, 5.5vw, 62px);
  }
}

@media (max-width: 880px) {
  .cx-ai-help {
    padding: 85px 0 70px;
  }

  .cx-ai-help-layout {
    grid-template-columns: 1fr;
    gap: 58px;
  }

  .cx-ai-help-copy {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
  }

  .cx-ai-help-copy h2,
  .cx-ai-help-copy > .lead {
    margin-inline: auto;
  }

  .cx-ai-help-benefits {
    max-width: 670px;
    margin-inline: auto;
    margin-top: 34px;
    text-align: left;
  }

  .cx-ai-help-actions {
    justify-content: center;
  }

  .cx-ai-chat-card {
    width: min(100%, 620px);
  }
}

@media (max-width: 600px) {
  .cx-ai-help {
    padding: 70px 0 50px;
  }

  .cx-ai-help-copy h2 {
    font-size: clamp(40px, 11vw, 52px);
  }

  .cx-ai-help-copy > .lead {
    font-size: 16px;
  }

  .cx-ai-benefit {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 15px;
  }

  .cx-ai-benefit-icon {
    width: 39px;
    height: 39px;
  }

  .cx-ai-chat-card {
    border-radius: 23px;
  }

  .cx-ai-chat-header {
    min-height: 75px;
    padding: 14px;
  }

  .cx-ai-chat-messages {
    height: 310px;
    padding-inline: 13px;
  }

  .cx-ai-bubble {
    max-width: 84%;
  }

  .cx-ai-suggestions {
    padding-inline: 13px;
  }

  .cx-ai-input-form {
    margin-inline: 13px;
  }

  .cx-ai-chat-footer {
    padding-inline: 14px;
  }

  .cx-ai-chat-footer span {
    max-width: 230px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cx-ai-help-glow,
  .cx-ai-orbit,
  .cx-ai-typing span {
    animation: none !important;
  }

  .cx-ai-chat-card,
  .cx-ai-benefit {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}
/* =========================================================
   CLICKRONIX AI HELP CENTER
========================================================= */

.cxhc-section {
  --cxhc-orange: #ff5b00;
  --cxhc-orange-light: #ff8743;
  --cxhc-orange-dark: #be3100;
  --cxhc-white: #ffffff;
  --cxhc-bg: #0e0e10;
  --cxhc-panel: rgba(24, 24, 27, 0.72);
  --cxhc-border: rgba(255, 255, 255, 0.11);

  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(90px, 9vw, 145px) 0;
  color: #ffffff;

  background:
    radial-gradient(
      circle at 83% 45%,
      rgba(255, 91, 0, 0.19),
      transparent 34%
    ),
    radial-gradient(
      circle at 18% 92%,
      rgba(255, 91, 0, 0.06),
      transparent 25%
    ),
    linear-gradient(
      112deg,
      #0d0d0f 0%,
      #111113 52%,
      #241108 100%
    );
}

.cxhc-background-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: 0.42;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.033) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.033) 1px,
      transparent 1px
    );

  background-size: 60px 60px;

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 15%,
      #000 86%,
      transparent
    );
}

.cxhc-background-glow {
  position: absolute;
  z-index: -2;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(105px);
}

.cxhc-glow-one {
  width: 520px;
  height: 520px;
  right: 4%;
  top: 50%;
  background: rgba(255, 91, 0, 0.12);
  transform: translateY(-50%);
  animation: cxhcBackgroundPulse 5s ease-in-out infinite;
}

.cxhc-glow-two {
  width: 350px;
  height: 350px;
  left: 13%;
  bottom: -18%;
  background: rgba(255, 91, 0, 0.06);
}

.cxhc-layout {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 0.88fr)
    minmax(500px, 1.12fr);

  align-items: center;
  gap: clamp(55px, 7vw, 110px);
}

/* =========================================================
   LEFT COPY
========================================================= */

.cxhc-copy {
  max-width: 625px;
}

.cxhc-copy h2 {
  max-width: 620px;
  margin: 14px 0 0;

  color: #ffffff;

  font-size: clamp(48px, 4.7vw, 74px);
  font-weight: 650;
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.cxhc-copy h2 span {
  display: block;
  color: var(--cxhc-orange);
}

.cxhc-lead {
  max-width: 590px;
  margin: 26px 0 0;

  color: rgba(255, 255, 255, 0.68);

  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.7;
}

.cxhc-feature-list {
  display: grid;
  gap: 12px;
  margin-top: 36px;
}

.cxhc-feature {
  position: relative;

  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 15px;
  align-items: start;

  padding: 17px;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;

  background:
    linear-gradient(
      125deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.017)
    );

  opacity: 0;
  transform: translateX(-20px);

  transition:
    border-color 0.3s ease,
    background 0.3s ease,
    transform 0.3s ease;
}

.cxhc-feature::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      115deg,
      transparent 0%,
      rgba(255, 255, 255, 0.045) 43%,
      transparent 65%
    );

  transform: translateX(-120%);
  transition: transform 0.7s ease;
}

.cxhc-feature:hover {
  border-color: rgba(255, 91, 0, 0.3);
  background:
    linear-gradient(
      125deg,
      rgba(255, 91, 0, 0.08),
      rgba(255, 255, 255, 0.02)
    );

  transform: translateY(-3px);
}

.cxhc-feature:hover::after {
  transform: translateX(120%);
}

.cxhc-feature.is-visible {
  animation:
    cxhcFeatureReveal 0.68s
    cubic-bezier(0.16, 1, 0.3, 1)
    forwards;
}

.cxhc-feature-icon {
  display: grid;

  width: 44px;
  height: 44px;

  place-items: center;

  border: 1px solid rgba(255, 91, 0, 0.3);
  border-radius: 13px;

  color: var(--cxhc-orange-light);
  background: rgba(255, 91, 0, 0.09);
}

.cxhc-feature-icon svg {
  width: 22px;
  height: 22px;
}

.cxhc-feature h3 {
  margin: 1px 0 5px;

  color: #ffffff;

  font-size: 15px;
  line-height: 1.3;
}

.cxhc-feature p {
  margin: 0;

  color: rgba(255, 255, 255, 0.59);

  font-size: 13px;
  line-height: 1.57;
}

.cxhc-copy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* =========================================================
   RIGHT PROMPT
========================================================= */

.cxhc-prompt-column {
  position: relative;

  display: grid;
  min-width: 0;
  place-items: center;

  perspective: 1500px;
}

.cxhc-prompt-orbit {
  position: absolute;
  z-index: 0;

  width: min(100%, 660px);
  aspect-ratio: 1;

  border: 1px solid rgba(255, 91, 0, 0.13);
  border-radius: 50%;

  animation: cxhcOrbitRotate 24s linear infinite;
}

.cxhc-prompt-orbit::before,
.cxhc-prompt-orbit::after {
  content: "";

  position: absolute;

  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 50%;
}

.cxhc-prompt-orbit::before {
  inset: 13%;
}

.cxhc-prompt-orbit::after {
  inset: 29%;
}

.cxhc-prompt-orbit > span {
  position: absolute;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: var(--cxhc-orange);

  box-shadow:
    0 0 8px rgba(255, 91, 0, 0.95),
    0 0 25px rgba(255, 91, 0, 0.48);
}

.cxhc-prompt-orbit > span:nth-child(1) {
  top: 12%;
  left: 23%;
}

.cxhc-prompt-orbit > span:nth-child(2) {
  right: 6%;
  top: 65%;
}

.cxhc-prompt-orbit > span:nth-child(3) {
  left: 38%;
  bottom: 3%;
}

.cxhc-prompt-card {
  position: relative;
  z-index: 3;

  width: min(100%, 650px);

  padding: 47px 35px 28px;

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 34px;

  background:
    radial-gradient(
      circle at 86% 1%,
      rgba(255, 91, 0, 0.13),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.075),
      rgba(255, 255, 255, 0.022)
    );

  box-shadow:
    0 48px 115px rgba(0, 0, 0, 0.43),
    0 0 0 1px rgba(255, 91, 0, 0.025),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);

  backdrop-filter: blur(28px) saturate(125%);
  -webkit-backdrop-filter: blur(28px) saturate(125%);

  opacity: 0;

  transform:
    translateY(34px)
    rotateY(-5deg)
    rotateX(2deg)
    scale(0.95);
}

.cxhc-prompt-column.is-visible .cxhc-prompt-card {
  animation:
    cxhcPromptEnter 1s
    cubic-bezier(0.16, 1, 0.3, 1)
    forwards;
}

/* =========================================================
   PROMPT HEADING
========================================================= */

.cxhc-prompt-heading {
  margin-bottom: 30px;
  text-align: center;
}

.cxhc-agent-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 17px;
  padding: 8px 13px;

  border: 1px solid rgba(255, 91, 0, 0.24);
  border-radius: 999px;

  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 91, 0, 0.07);

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.045em;
}

.cxhc-agent-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #ff6500;

  box-shadow:
    0 0 8px rgba(255, 101, 0, 0.95),
    0 0 20px rgba(255, 101, 0, 0.45);

  animation: cxhcOnlinePulse 1.8s ease-in-out infinite;
}

.cxhc-prompt-heading h3 {
  margin: 0;

  color: #ffffff;

  font-size: clamp(37px, 4vw, 54px);
  font-weight: 620;
  line-height: 1.03;
  letter-spacing: -0.05em;
}

.cxhc-prompt-heading h3 span {
  color: var(--cxhc-orange);
}

.cxhc-prompt-heading p {
  max-width: 510px;
  margin: 15px auto 0;

  color: rgba(255, 255, 255, 0.53);

  font-size: 14px;
  line-height: 1.65;
}

/* =========================================================
   MAIN PROMPT FORM
========================================================= */

.cxhc-prompt-form {
  position: relative;

  display: flex;
  flex-direction: column;

  min-height: 158px;
  padding: 12px;

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.13),
      rgba(255, 255, 255, 0.047)
    );

  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);

  backdrop-filter: blur(23px);
  -webkit-backdrop-filter: blur(23px);

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.cxhc-prompt-form:focus-within {
  border-color: rgba(255, 101, 0, 0.58);

  box-shadow:
    0 30px 78px rgba(0, 0, 0, 0.35),
    0 0 0 4px rgba(255, 91, 0, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);

  transform: translateY(-2px);
}

.cxhc-prompt-form textarea {
  display: block;

  width: 100%;
  min-height: 75px;
  max-height: 190px;

  resize: none;

  padding: 13px 15px 9px;

  border: 0;
  outline: 0;

  color: #ffffff;
  background: transparent;

  font: inherit;
  font-size: 15px;
  line-height: 1.55;

  box-shadow: none;
}

.cxhc-prompt-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.47);
}

/* =========================================================
   PROMPT TOOLBAR
========================================================= */

.cxhc-prompt-toolbar {
  display: flex;

  min-height: 49px;

  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding: 3px 4px 1px;
}

.cxhc-toolbar-left,
.cxhc-toolbar-right {
  display: flex;
  align-items: center;
  gap: 7px;
}

.cxhc-icon-button,
.cxhc-tools-trigger,
.cxhc-selected-tool,
.cxhc-send-button {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.cxhc-icon-button {
  display: grid;

  width: 39px;
  height: 39px;

  place-items: center;

  border-radius: 50%;

  color: rgba(255, 255, 255, 0.72);
  background: transparent;

  transition:
    color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.cxhc-icon-button:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.075);
  transform: translateY(-2px);
}

.cxhc-icon-button svg {
  width: 21px;
  height: 21px;
}

.cxhc-icon-button.is-listening {
  color: #ffffff;
  background: rgba(255, 91, 0, 0.16);

  box-shadow:
    0 0 0 4px rgba(255, 91, 0, 0.08),
    0 0 20px rgba(255, 91, 0, 0.28);

  animation: cxhcVoicePulse 1.2s ease-in-out infinite;
}

.cxhc-tools-wrapper {
  position: relative;
}

.cxhc-tools-trigger {
  display: inline-flex;

  min-height: 39px;

  align-items: center;
  gap: 8px;

  padding: 0 12px;

  border-radius: 999px;

  color: rgba(255, 255, 255, 0.75);
  background: transparent;

  transition:
    color 0.2s ease,
    background 0.2s ease;
}

.cxhc-tools-trigger:hover,
.cxhc-tools-trigger.is-open {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.075);
}

.cxhc-tools-trigger svg {
  width: 18px;
  height: 18px;
}

.cxhc-selected-tool {
  display: inline-flex;

  min-height: 36px;

  align-items: center;
  gap: 7px;

  padding: 0 11px;

  border-radius: 999px;

  color: #ff8743;
  background: rgba(255, 91, 0, 0.1);

  font-size: 11px;
}

.cxhc-selected-tool svg {
  width: 14px;
  height: 14px;
}

.cxhc-send-button {
  display: grid;

  width: 43px;
  height: 43px;

  place-items: center;

  border-radius: 50%;

  color: #ffffff;

  background:
    linear-gradient(
      145deg,
      #ff8d3e,
      #ff5b00 58%,
      #c93400
    );

  box-shadow:
    0 13px 28px rgba(255, 91, 0, 0.31),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);

  transition:
    opacity 0.2s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.cxhc-send-button:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.045);

  box-shadow:
    0 18px 35px rgba(255, 91, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.cxhc-send-button:disabled {
  opacity: 0.3;
  cursor: default;
  filter: grayscale(0.25);
}

.cxhc-send-button svg {
  width: 21px;
  height: 21px;
}

/* =========================================================
   TOOLS POPOVER
========================================================= */

.cxhc-tools-popover {
  position: absolute;
  z-index: 40;

  left: 0;
  bottom: calc(100% + 13px);

  width: 280px;
  padding: 9px;

  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 20px;

  background: rgba(24, 24, 27, 0.97);

  box-shadow:
    0 27px 65px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);

  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);

  animation: cxhcPopoverIn 0.23s ease both;
}

.cxhc-tools-title {
  display: block;

  padding: 7px 10px 8px;

  color: rgba(255, 255, 255, 0.38);

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cxhc-tools-popover > button {
  display: grid;

  width: 100%;

  grid-template-columns: 37px minmax(0, 1fr);
  align-items: center;
  gap: 9px;

  padding: 10px;

  border: 0;
  border-radius: 13px;

  color: rgba(255, 255, 255, 0.75);
  background: transparent;

  text-align: left;
  font: inherit;

  cursor: pointer;
}

.cxhc-tools-popover > button:hover {
  color: #ffffff;
  background: rgba(255, 91, 0, 0.1);
}

.cxhc-tool-icon {
  display: grid;

  width: 34px;
  height: 34px;

  place-items: center;

  border: 1px solid rgba(255, 91, 0, 0.2);
  border-radius: 11px;

  color: #ff7421;
  background: rgba(255, 91, 0, 0.07);
}

.cxhc-tool-icon svg {
  width: 17px;
  height: 17px;
}

.cxhc-tools-popover strong,
.cxhc-tools-popover small {
  display: block;
}

.cxhc-tools-popover strong {
  color: inherit;
  font-size: 12px;
}

.cxhc-tools-popover small {
  margin-top: 2px;

  color: rgba(255, 255, 255, 0.38);

  font-size: 9px;
  line-height: 1.35;
}

/* =========================================================
   FILE PREVIEW
========================================================= */

.cxhc-file-preview {
  display: grid;

  grid-template-columns: 58px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 10px;

  margin: 4px 5px 4px;
  padding: 8px;

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;

  background: rgba(255, 255, 255, 0.045);
}

.cxhc-file-preview img {
  width: 58px;
  height: 58px;

  border-radius: 12px;

  object-fit: cover;
}

.cxhc-file-preview-copy {
  min-width: 0;
}

.cxhc-file-preview-copy strong,
.cxhc-file-preview-copy span {
  display: block;
}

.cxhc-file-preview-copy strong {
  overflow: hidden;

  color: #ffffff;

  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cxhc-file-preview-copy span {
  margin-top: 3px;

  color: rgba(255, 255, 255, 0.37);

  font-size: 9px;
}

.cxhc-remove-file {
  display: grid;

  width: 25px;
  height: 25px;

  padding: 0;
  border: 0;

  place-items: center;

  border-radius: 50%;

  color: rgba(255, 255, 255, 0.66);
  background: rgba(255, 255, 255, 0.06);

  cursor: pointer;
}

.cxhc-remove-file svg {
  width: 14px;
  height: 14px;
}

.cxhc-prompt-footnote {
  margin-top: 14px;

  color: rgba(255, 255, 255, 0.28);

  text-align: center;
  font-size: 9px;
}

/* =========================================================
   MODAL
========================================================= */

.cxhc-modal {
  position: fixed;
  inset: 0;

  z-index: 99999;

  display: none;
  place-items: center;

  padding: 24px;
}

.cxhc-modal.is-open {
  display: grid;
}

.cxhc-modal-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(4, 4, 6, 0.78);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  animation: cxhcBackdropIn 0.3s ease both;
}

.cxhc-modal-dialog {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-rows: auto minmax(0, 1fr) auto;

  width: min(960px, 96vw);
  height: min(780px, 91vh);

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 30px;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 92% 0%,
      rgba(255, 91, 0, 0.12),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      rgba(27, 27, 31, 0.98),
      rgba(14, 14, 16, 0.98)
    );

  box-shadow:
    0 60px 150px rgba(0, 0, 0, 0.67),
    0 0 0 1px rgba(255, 91, 0, 0.025),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);

  animation:
    cxhcModalIn 0.42s
    cubic-bezier(0.16, 1, 0.3, 1)
    both;
}

.cxhc-modal-header {
  display: flex;

  min-height: 78px;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 14px 18px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  background: rgba(255, 255, 255, 0.018);
}

.cxhc-modal-agent {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cxhc-modal-avatar {
  position: relative;

  display: grid;

  width: 47px;
  height: 47px;

  place-items: center;

  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 15px;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 28% 17%,
      rgba(255, 255, 255, 0.25),
      transparent 27%
    ),
    linear-gradient(
      145deg,
      #ff8436,
      #ff5b00 58%,
      #bc2d00
    );

  box-shadow: 0 13px 28px rgba(255, 91, 0, 0.22);
}

.cxhc-modal-avatar svg {
  width: 25px;
  height: 25px;
}

.cxhc-modal-avatar > span {
  position: absolute;

  right: -2px;
  bottom: -2px;

  width: 13px;
  height: 13px;

  border: 3px solid #17171a;
  border-radius: 50%;

  background: #43d88a;

  box-shadow: 0 0 12px rgba(67, 216, 138, 0.62);
}

.cxhc-modal-agent > div:last-child {
  display: grid;
  gap: 3px;
}

.cxhc-modal-agent strong {
  color: #ffffff;
  font-size: 14px;
}

.cxhc-modal-agent > div:last-child > span {
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
}

.cxhc-modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cxhc-modal-new-chat {
  min-height: 38px;

  padding: 0 14px;

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;

  color: rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.035);

  font: inherit;
  font-size: 11px;

  cursor: pointer;
}

.cxhc-modal-new-chat:hover {
  color: #ffffff;
  border-color: rgba(255, 91, 0, 0.32);
  background: rgba(255, 91, 0, 0.08);
}

.cxhc-modal-close {
  display: grid;

  width: 39px;
  height: 39px;

  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.09);

  place-items: center;

  border-radius: 12px;

  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.035);

  cursor: pointer;
}

.cxhc-modal-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.075);
}

.cxhc-modal-close svg {
  width: 19px;
  height: 19px;
}

/* =========================================================
   CHAT BODY
========================================================= */

.cxhc-chat-body {
  position: relative;

  overflow-y: auto;

  padding: 30px clamp(18px, 5vw, 70px) 40px;

  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color:
    rgba(255, 91, 0, 0.38)
    transparent;
}

.cxhc-chat-body::-webkit-scrollbar {
  width: 6px;
}

.cxhc-chat-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 91, 0, 0.38);
}

.cxhc-chat-welcome {
  max-width: 500px;
  margin: 45px auto;
  text-align: center;
}

.cxhc-welcome-icon {
  display: grid;

  width: 60px;
  height: 60px;

  margin: 0 auto 17px;

  place-items: center;

  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 19px;

  color: #ffffff;

  background:
    linear-gradient(
      145deg,
      #ff8436,
      #ff5b00
    );

  box-shadow: 0 17px 36px rgba(255, 91, 0, 0.23);
}

.cxhc-welcome-icon svg {
  width: 31px;
  height: 31px;
}

.cxhc-chat-welcome h3 {
  margin: 0;

  color: #ffffff;

  font-size: 27px;
  letter-spacing: -0.035em;
}

.cxhc-chat-welcome p {
  max-width: 440px;
  margin: 11px auto 0;

  color: rgba(255, 255, 255, 0.48);

  font-size: 13px;
  line-height: 1.65;
}

/* Messages */

.cxhc-message {
  display: flex;

  width: 100%;

  gap: 11px;

  margin-bottom: 19px;

  animation:
    cxhcMessageIn 0.46s
    cubic-bezier(0.16, 1, 0.3, 1)
    both;
}

.cxhc-message-user {
  justify-content: flex-end;
}

.cxhc-message-avatar {
  display: grid;

  width: 33px;
  height: 33px;

  flex: 0 0 33px;

  place-items: center;

  border-radius: 11px;

  color: #ffffff;

  background:
    linear-gradient(
      145deg,
      #ff8436,
      #ff5b00
    );
}

.cxhc-message-avatar svg {
  width: 18px;
  height: 18px;
}

.cxhc-message-bubble {
  max-width: min(76%, 650px);

  padding: 14px 16px 11px;

  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 8px 19px 19px 19px;

  color: rgba(255, 255, 255, 0.77);

  background: rgba(255, 255, 255, 0.045);

  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.12);
}

.cxhc-message-user .cxhc-message-bubble {
  border-color: rgba(255, 91, 0, 0.36);
  border-radius: 19px 8px 19px 19px;

  color: #ffffff;

  background:
    linear-gradient(
      145deg,
      rgba(255, 123, 42, 0.97),
      rgba(255, 80, 0, 0.98)
    );

  box-shadow: 0 17px 34px rgba(255, 91, 0, 0.16);
}

.cxhc-message-bubble p {
  margin: 0;

  color: inherit;

  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.cxhc-message-bubble time {
  display: block;

  margin-top: 8px;

  color: rgba(255, 255, 255, 0.3);

  font-size: 9px;
}

.cxhc-message-user .cxhc-message-bubble time {
  color: rgba(255, 255, 255, 0.62);
}

/* Typing */

.cxhc-typing-message {
  display: flex;
  gap: 11px;
  margin-top: 5px;
}

.cxhc-typing-bubble {
  display: flex;

  min-width: 62px;
  min-height: 39px;

  align-items: center;
  justify-content: center;

  gap: 5px;

  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 8px 18px 18px 18px;

  background: rgba(255, 255, 255, 0.045);
}

.cxhc-typing-bubble span {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.57);

  animation: cxhcTypingDot 1.1s ease-in-out infinite;
}

.cxhc-typing-bubble span:nth-child(2) {
  animation-delay: 0.15s;
}

.cxhc-typing-bubble span:nth-child(3) {
  animation-delay: 0.3s;
}

/* =========================================================
   MODAL COMPOSER
========================================================= */

.cxhc-modal-composer-wrap {
  padding: 15px clamp(15px, 4vw, 52px) 21px;

  border-top: 1px solid rgba(255, 255, 255, 0.07);

  background:
    linear-gradient(
      180deg,
      rgba(17, 17, 19, 0.78),
      rgba(17, 17, 19, 0.97)
    );
}

.cxhc-modal-composer {
  position: relative;

  display: flex;
  flex-direction: column;

  max-width: 790px;
  margin: 0 auto;
  padding: 9px;

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.085),
      rgba(255, 255, 255, 0.035)
    );

  box-shadow:
    0 21px 55px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.cxhc-modal-composer:focus-within {
  border-color: rgba(255, 91, 0, 0.52);

  box-shadow:
    0 23px 58px rgba(0, 0, 0, 0.32),
    0 0 0 4px rgba(255, 91, 0, 0.065),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.cxhc-modal-composer textarea {
  width: 100%;
  min-height: 54px;
  max-height: 145px;

  resize: none;

  padding: 10px 12px 4px;

  border: 0;
  outline: 0;

  color: #ffffff;
  background: transparent;

  font: inherit;
  font-size: 13px;
  line-height: 1.55;
}

.cxhc-modal-composer textarea::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.cxhc-modal-composer-bottom {
  display: flex;

  min-height: 45px;

  align-items: center;
  justify-content: space-between;

  gap: 14px;

  padding: 2px 2px 0 9px;
}

.cxhc-modal-composer-bottom > span {
  color: rgba(255, 255, 255, 0.25);
  font-size: 9px;
}

/* =========================================================
   BODY LOCK
========================================================= */

body.cxhc-modal-open {
  overflow: hidden;
}

/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes cxhcBackgroundPulse {
  0%,
  100% {
    opacity: 0.62;
    transform:
      translateY(-50%)
      scale(0.92);
  }

  50% {
    opacity: 1;
    transform:
      translateY(-50%)
      scale(1.08);
  }
}

@keyframes cxhcFeatureReveal {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes cxhcOrbitRotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes cxhcPromptEnter {
  from {
    opacity: 0;

    transform:
      translateY(34px)
      rotateY(-5deg)
      rotateX(2deg)
      scale(0.95);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      rotateY(0)
      rotateX(0)
      scale(1);
  }
}

@keyframes cxhcOnlinePulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.84);
  }

  50% {
    opacity: 1;
    transform: scale(1.13);
  }
}

@keyframes cxhcVoicePulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }
}

@keyframes cxhcPopoverIn {
  from {
    opacity: 0;
    transform:
      translateY(8px)
      scale(0.97);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }
}

@keyframes cxhcBackdropIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes cxhcModalIn {
  from {
    opacity: 0;

    transform:
      translateY(25px)
      scale(0.96);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}

@keyframes cxhcMessageIn {
  from {
    opacity: 0;

    transform:
      translateY(10px)
      scale(0.985);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}

@keyframes cxhcTypingDot {
  0%,
  60%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1060px) {
  .cxhc-layout {
    grid-template-columns:
      minmax(0, 0.92fr)
      minmax(450px, 1.08fr);

    gap: 35px;
  }

  .cxhc-copy h2 {
    font-size: clamp(45px, 5.5vw, 63px);
  }
}

@media (max-width: 880px) {
  .cxhc-section {
    padding: 85px 0 70px;
  }

  .cxhc-layout {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .cxhc-copy {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
  }

  .cxhc-copy h2,
  .cxhc-lead {
    margin-inline: auto;
  }

  .cxhc-feature-list {
    max-width: 680px;
    margin-inline: auto;
    margin-top: 35px;
    text-align: left;
  }

  .cxhc-copy-actions {
    justify-content: center;
  }

  .cxhc-prompt-card {
    width: min(100%, 660px);
  }

  .cxhc-prompt-orbit {
    width: min(100%, 690px);
  }
}

@media (max-width: 620px) {
  .cxhc-section {
    padding: 68px 0 50px;
  }

  .cxhc-copy h2 {
    font-size: clamp(40px, 11vw, 53px);
  }

  .cxhc-lead {
    font-size: 16px;
  }

  .cxhc-feature {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 15px;
  }

  .cxhc-feature-icon {
    width: 39px;
    height: 39px;
  }

  .cxhc-prompt-card {
    padding: 32px 16px 20px;
    border-radius: 26px;
  }

  .cxhc-prompt-heading {
    margin-bottom: 23px;
  }

  .cxhc-prompt-heading h3 {
    font-size: clamp(35px, 10vw, 46px);
  }

  .cxhc-prompt-heading p {
    font-size: 13px;
  }

  .cxhc-prompt-form {
    min-height: 149px;
    border-radius: 23px;
  }

  .cxhc-prompt-toolbar {
    gap: 8px;
  }

  .cxhc-tools-trigger {
    padding-inline: 9px;
  }

  .cxhc-selected-tool {
    display: none;
  }

  .cxhc-tools-popover {
    width: 250px;
  }

  .cxhc-modal {
    padding: 0;
  }

  .cxhc-modal-dialog {
    width: 100%;
    height: 100%;
    max-height: none;

    border: 0;
    border-radius: 0;
  }

  .cxhc-modal-header {
    min-height: 70px;
    padding: 11px 12px;
  }

  .cxhc-modal-new-chat {
    display: none;
  }

  .cxhc-chat-body {
    padding: 22px 13px 30px;
  }

  .cxhc-chat-welcome {
    margin: 32px auto;
  }

  .cxhc-message-bubble {
    max-width: 84%;
  }

  .cxhc-modal-composer-wrap {
    padding: 11px 10px 15px;
  }

  .cxhc-modal-composer-bottom > span {
    max-width: 210px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cxhc-background-glow,
  .cxhc-prompt-orbit,
  .cxhc-agent-dot,
  .cxhc-icon-button.is-listening,
  .cxhc-typing-bubble span {
    animation: none !important;
  }

  .cxhc-prompt-card,
  .cxhc-feature {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}
/* =========================================================
   CLEAN POPUP CHAT
========================================================= */

/* Remove demo/welcome image and intro block */
.cxhc-chat-welcome,
.cxhc-welcome-icon {
  display: none !important;
}

/* Remove any old composer heading or visible label */
.cxhc-modal-composer > h1,
.cxhc-modal-composer > h2,
.cxhc-modal-composer > h3,
.cxhc-modal-composer > h4,
.cxhc-modal-composer-wrap > h1,
.cxhc-modal-composer-wrap > h2,
.cxhc-modal-composer-wrap > h3,
.cxhc-modal-composer-wrap > h4,
.cxhc-modal-composer-title,
.cxhc-modal-input-title,
.cxhc-composer-title {
  display: none !important;
}

/* Prevent old pseudo-element text */
.cxhc-modal-composer::before,
.cxhc-modal-composer-wrap::before {
  content: none !important;
  display: none !important;
}

/* Clean input positioning */
.cxhc-modal-composer {
  padding: 12px;
}

.cxhc-modal-composer textarea {
  display: block;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 12px 14px 8px;
  border: 0;
  outline: 0;
  color: #ffffff;
  background: transparent;
  font: inherit;
  font-size: 14px;
  line-height: 1.55;
}

.cxhc-modal-composer textarea::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

/* Remove extra empty space at top of messages */
.cxhc-chat-body {
  padding-top: 28px;
}

/* First message should begin cleanly */
.cxhc-chat-body > .cxhc-message:first-of-type {
  margin-top: 0;
}
/* =========================================================
   GLOBAL FIXES
========================================================= */

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================================================
   SECTION
========================================================= */

.cxhc-section {
  --cxhc-orange: #ff5b00;
  --cxhc-orange-light: #ff8743;

  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(90px, 9vw, 145px) 0;
  color: #ffffff;

  background:
    radial-gradient(
      circle at 82% 44%,
      rgba(255, 91, 0, 0.19),
      transparent 34%
    ),
    linear-gradient(
      112deg,
      #0d0d0f 0%,
      #111113 52%,
      #241108 100%
    );
}

.cxhc-background-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: 0.42;
  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.033) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.033) 1px,
      transparent 1px
    );

  background-size: 60px 60px;
}

.cxhc-background-glow {
  position: absolute;
  z-index: -2;
  width: 540px;
  height: 540px;
  right: 4%;
  top: 50%;
  border-radius: 50%;
  transform: translateY(-50%);
  background: rgba(255, 91, 0, 0.12);
  filter: blur(110px);
  animation: cxhcGlowPulse 5s ease-in-out infinite;
}

.cxhc-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 0.88fr)
    minmax(500px, 1.12fr);
  align-items: center;
  gap: clamp(55px, 7vw, 110px);
}

/* =========================================================
   LEFT CONTENT
========================================================= */

.cxhc-copy {
  max-width: 625px;
}

.cxhc-copy h2 {
  max-width: 620px;
  margin: 14px 0 0;
  color: #ffffff;
  font-size: clamp(48px, 4.7vw, 74px);
  font-weight: 650;
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.cxhc-copy h2 span {
  display: block;
  color: var(--cxhc-orange);
}

.cxhc-lead {
  max-width: 590px;
  margin: 26px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.7;
}

.cxhc-feature-list {
  display: grid;
  gap: 12px;
  margin-top: 36px;
}

.cxhc-feature {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 15px;
  align-items: start;
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;

  background:
    linear-gradient(
      125deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.017)
    );

  opacity: 0;
  transform: translateX(-20px);
}

.cxhc-feature.is-visible {
  animation:
    cxhcFeatureReveal 0.68s
    cubic-bezier(0.16, 1, 0.3, 1)
    forwards;
}

.cxhc-feature-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 91, 0, 0.3);
  border-radius: 13px;
  color: var(--cxhc-orange-light);
  background: rgba(255, 91, 0, 0.09);
}

.cxhc-feature-icon svg {
  width: 22px;
  height: 22px;
}

.cxhc-feature h3 {
  margin: 1px 0 5px;
  color: #ffffff;
  font-size: 15px;
}

.cxhc-feature p {
  margin: 0;
  color: rgba(255, 255, 255, 0.59);
  font-size: 13px;
  line-height: 1.57;
}

.cxhc-copy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* =========================================================
   PROMPT CARD
========================================================= */

.cxhc-prompt-column {
  position: relative;
  display: grid;
  min-width: 0;
  place-items: center;
  perspective: 1500px;
}

.cxhc-prompt-orbit {
  position: absolute;
  z-index: 0;
  width: min(100%, 660px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 91, 0, 0.13);
  border-radius: 50%;
  animation: cxhcOrbitRotate 24s linear infinite;
}

.cxhc-prompt-orbit::before,
.cxhc-prompt-orbit::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 50%;
}

.cxhc-prompt-orbit::before {
  inset: 13%;
}

.cxhc-prompt-orbit::after {
  inset: 29%;
}

.cxhc-prompt-orbit span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cxhc-orange);

  box-shadow:
    0 0 8px rgba(255, 91, 0, 0.95),
    0 0 25px rgba(255, 91, 0, 0.48);
}

.cxhc-prompt-orbit span:nth-child(1) {
  top: 12%;
  left: 23%;
}

.cxhc-prompt-orbit span:nth-child(2) {
  right: 6%;
  top: 65%;
}

.cxhc-prompt-orbit span:nth-child(3) {
  left: 38%;
  bottom: 3%;
}

.cxhc-prompt-card {
  position: relative;
  z-index: 3;
  width: min(100%, 650px);
  padding: 47px 35px 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 34px;

  background:
    radial-gradient(
      circle at 86% 1%,
      rgba(255, 91, 0, 0.13),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.075),
      rgba(255, 255, 255, 0.022)
    );

  box-shadow:
    0 48px 115px rgba(0, 0, 0, 0.43),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);

  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);

  opacity: 0;
  transform:
    translateY(34px)
    rotateY(-5deg)
    scale(0.95);
}

.cxhc-prompt-column.is-visible .cxhc-prompt-card {
  animation:
    cxhcPromptEnter 1s
    cubic-bezier(0.16, 1, 0.3, 1)
    forwards;
}

.cxhc-prompt-heading {
  margin-bottom: 30px;
  text-align: center;
}

.cxhc-agent-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 17px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 91, 0, 0.24);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 91, 0, 0.07);
  font-size: 10px;
  font-weight: 700;
}

.cxhc-agent-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff6500;

  box-shadow:
    0 0 8px rgba(255, 101, 0, 0.95),
    0 0 20px rgba(255, 101, 0, 0.45);
}

.cxhc-prompt-heading h3 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(37px, 4vw, 54px);
  font-weight: 620;
  line-height: 1.03;
  letter-spacing: -0.05em;
}

.cxhc-prompt-heading h3 span {
  color: var(--cxhc-orange);
}

.cxhc-prompt-heading p {
  max-width: 510px;
  margin: 15px auto 0;
  color: rgba(255, 255, 255, 0.53);
  font-size: 14px;
  line-height: 1.65;
}

/* =========================================================
   PROMPT FORM
========================================================= */

.cxhc-prompt-form {
  display: flex;
  flex-direction: column;
  min-height: 158px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.13),
      rgba(255, 255, 255, 0.047)
    );

  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);

  backdrop-filter: blur(23px);
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.cxhc-prompt-form:focus-within {
  border-color: rgba(255, 101, 0, 0.58);

  box-shadow:
    0 30px 78px rgba(0, 0, 0, 0.35),
    0 0 0 4px rgba(255, 91, 0, 0.075);
}

.cxhc-prompt-form textarea {
  width: 100%;
  min-height: 75px;
  max-height: 190px;
  resize: none;
  padding: 13px 15px 9px;
  border: 0;
  outline: 0;
  color: #ffffff;
  background: transparent;
  font: inherit;
  font-size: 15px;
  line-height: 1.55;
  box-shadow: none;
}

.cxhc-prompt-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.47);
}

.cxhc-prompt-toolbar {
  display: flex;
  min-height: 49px;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 3px 4px 1px;
}

.cxhc-toolbar-left,
.cxhc-toolbar-right {
  display: flex;
  align-items: center;
  gap: 7px;
}

.cxhc-icon-button,
.cxhc-tools-trigger,
.cxhc-selected-tool,
.cxhc-send-button {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.cxhc-icon-button {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
}

.cxhc-icon-button:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.075);
}

.cxhc-icon-button svg {
  width: 21px;
  height: 21px;
}

.cxhc-tools-wrapper {
  position: relative;
}

.cxhc-tools-trigger {
  display: inline-flex;
  min-height: 39px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.75);
  background: transparent;
}

.cxhc-tools-trigger:hover,
.cxhc-tools-trigger.is-open {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.075);
}

.cxhc-tools-trigger svg {
  width: 18px;
  height: 18px;
}

.cxhc-selected-tool {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border-radius: 999px;
  color: #ff8743;
  background: rgba(255, 91, 0, 0.1);
  font-size: 11px;
}

.cxhc-selected-tool svg {
  width: 14px;
  height: 14px;
}

.cxhc-send-button {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;

  background:
    linear-gradient(
      145deg,
      #ff8d3e,
      #ff5b00 58%,
      #c93400
    );

  box-shadow:
    0 13px 28px rgba(255, 91, 0, 0.31),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.cxhc-send-button:disabled {
  opacity: 0.3;
  cursor: default;
}

.cxhc-send-button svg {
  width: 21px;
  height: 21px;
}

.cxhc-prompt-footnote {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.28);
  text-align: center;
  font-size: 9px;
}

/* =========================================================
   TOOLS
========================================================= */

.cxhc-tools-popover {
  position: absolute;
  z-index: 40;
  left: 0;
  bottom: calc(100% + 13px);
  width: 280px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 20px;
  background: rgba(24, 24, 27, 0.98);

  box-shadow:
    0 27px 65px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.cxhc-tools-title {
  display: block;
  padding: 7px 10px 8px;
  color: rgba(255, 255, 255, 0.38);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.cxhc-tools-popover > button {
  display: grid;
  width: 100%;
  grid-template-columns: 37px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 0;
  border-radius: 13px;
  color: rgba(255, 255, 255, 0.75);
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.cxhc-tools-popover > button:hover {
  color: #ffffff;
  background: rgba(255, 91, 0, 0.1);
}

.cxhc-tool-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 91, 0, 0.2);
  border-radius: 11px;
  color: #ff7421;
  background: rgba(255, 91, 0, 0.07);
}

.cxhc-tool-icon svg {
  width: 17px;
  height: 17px;
}

.cxhc-tools-popover strong,
.cxhc-tools-popover small {
  display: block;
}

.cxhc-tools-popover strong {
  font-size: 12px;
}

.cxhc-tools-popover small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.38);
  font-size: 9px;
}

/* =========================================================
   MODAL
========================================================= */

.cxhc-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  place-items: center;
  padding: 24px;
}

.cxhc-modal.is-open {
  display: grid;
}

.cxhc-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 6, 0.8);
  backdrop-filter: blur(16px);
}

.cxhc-modal-dialog {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(960px, 96vw);
  height: min(780px, 91vh);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 30px;
  color: #ffffff;

  background:
    radial-gradient(
      circle at 92% 0%,
      rgba(255, 91, 0, 0.12),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      rgba(27, 27, 31, 0.99),
      rgba(14, 14, 16, 0.99)
    );

  box-shadow:
    0 60px 150px rgba(0, 0, 0, 0.67),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);

  animation:
    cxhcModalIn 0.42s
    cubic-bezier(0.16, 1, 0.3, 1)
    both;
}

.cxhc-modal-header {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cxhc-modal-agent {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cxhc-modal-avatar {
  position: relative;
  display: grid;
  width: 47px;
  height: 47px;
  place-items: center;
  border-radius: 15px;
  color: #ffffff;

  background:
    linear-gradient(
      145deg,
      #ff8436,
      #ff5b00 58%,
      #bc2d00
    );
}

.cxhc-modal-avatar svg {
  width: 25px;
  height: 25px;
}

.cxhc-modal-avatar > span {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 13px;
  height: 13px;
  border: 3px solid #17171a;
  border-radius: 50%;
  background: #43d88a;
}

.cxhc-modal-agent > div:last-child {
  display: grid;
  gap: 3px;
}

.cxhc-modal-agent strong {
  color: #ffffff;
  font-size: 14px;
}

.cxhc-modal-agent > div:last-child > span {
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
}

.cxhc-modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cxhc-modal-new-chat {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.035);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.cxhc-modal-close {
  display: grid;
  width: 39px;
  height: 39px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.09);
  place-items: center;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
}

.cxhc-modal-close svg {
  width: 19px;
  height: 19px;
}

/* =========================================================
   CHAT
========================================================= */

.cxhc-chat-body {
  overflow-y: auto;
  padding: 30px clamp(18px, 5vw, 70px) 40px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color:
    rgba(255, 91, 0, 0.38)
    transparent;
}

.cxhc-message {
  display: flex;
  width: 100%;
  gap: 11px;
  margin-bottom: 19px;
  animation: cxhcMessageIn 0.4s ease both;
}

.cxhc-message-user {
  justify-content: flex-end;
}

.cxhc-message-avatar {
  display: grid;
  width: 33px;
  height: 33px;
  flex: 0 0 33px;
  place-items: center;
  border-radius: 11px;
  color: #ffffff;

  background:
    linear-gradient(
      145deg,
      #ff8436,
      #ff5b00
    );
}

.cxhc-message-avatar svg {
  width: 18px;
  height: 18px;
}

.cxhc-message-bubble {
  max-width: min(76%, 650px);
  padding: 14px 16px 11px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 8px 19px 19px 19px;
  color: rgba(255, 255, 255, 0.77);
  background: rgba(255, 255, 255, 0.045);
}

.cxhc-message-user .cxhc-message-bubble {
  border-color: rgba(255, 91, 0, 0.36);
  border-radius: 19px 8px 19px 19px;
  color: #ffffff;

  background:
    linear-gradient(
      145deg,
      rgba(255, 123, 42, 0.97),
      rgba(255, 80, 0, 0.98)
    );
}

.cxhc-message-bubble p {
  margin: 0;
  color: inherit;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.cxhc-message-bubble time {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 9px;
}

.cxhc-typing-message {
  display: flex;
  gap: 11px;
}

.cxhc-typing-bubble {
  display: flex;
  min-width: 62px;
  min-height: 39px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 8px 18px 18px 18px;
  background: rgba(255, 255, 255, 0.045);
}

.cxhc-typing-bubble span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.57);
  animation: cxhcTypingDot 1.1s ease-in-out infinite;
}

.cxhc-typing-bubble span:nth-child(2) {
  animation-delay: 0.15s;
}

.cxhc-typing-bubble span:nth-child(3) {
  animation-delay: 0.3s;
}

/* =========================================================
   MODAL COMPOSER
========================================================= */

.cxhc-modal-composer-wrap {
  padding: 15px clamp(15px, 4vw, 52px) 21px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(17, 17, 19, 0.96);
}

/* Prevent any old heading text */
.cxhc-modal-composer-wrap > h1,
.cxhc-modal-composer-wrap > h2,
.cxhc-modal-composer-wrap > h3,
.cxhc-modal-composer-wrap > h4,
.cxhc-modal-composer > h1,
.cxhc-modal-composer > h2,
.cxhc-modal-composer > h3,
.cxhc-modal-composer > h4 {
  display: none !important;
}

.cxhc-modal-composer::before,
.cxhc-modal-composer-wrap::before {
  display: none !important;
  content: none !important;
}

.cxhc-modal-composer {
  display: flex;
  flex-direction: column;
  max-width: 790px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.085),
      rgba(255, 255, 255, 0.035)
    );

  box-shadow:
    0 21px 55px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.cxhc-modal-composer:focus-within {
  border-color: rgba(255, 91, 0, 0.52);

  box-shadow:
    0 0 0 4px rgba(255, 91, 0, 0.065),
    0 23px 58px rgba(0, 0, 0, 0.32);
}

.cxhc-modal-composer textarea {
  width: 100%;
  min-height: 62px;
  max-height: 145px;
  resize: none;
  padding: 11px 12px 5px;
  border: 0;
  outline: 0;
  color: #ffffff;
  background: transparent;
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
  box-shadow: none;
}

.cxhc-modal-composer textarea::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.cxhc-modal-composer-bottom {
  display: flex;
  min-height: 45px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 2px 2px 0 9px;
}

.cxhc-modal-composer-bottom > span {
  color: rgba(255, 255, 255, 0.25);
  font-size: 9px;
}

body.cxhc-modal-open {
  overflow: hidden;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes cxhcGlowPulse {
  0%,
  100% {
    opacity: 0.6;
    transform: translateY(-50%) scale(0.92);
  }

  50% {
    opacity: 1;
    transform: translateY(-50%) scale(1.08);
  }
}

@keyframes cxhcFeatureReveal {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes cxhcOrbitRotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes cxhcPromptEnter {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes cxhcModalIn {
  from {
    opacity: 0;
    transform: translateY(25px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes cxhcMessageIn {
  from {
    opacity: 0;
    transform: translateY(9px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes cxhcTypingDot {
  0%,
  60%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 880px) {
  .cxhc-layout {
    grid-template-columns: 1fr;
  }

  .cxhc-copy {
    margin-inline: auto;
    text-align: center;
  }

  .cxhc-feature-list {
    text-align: left;
  }

  .cxhc-copy-actions {
    justify-content: center;
  }
}

@media (max-width: 620px) {
  .cxhc-section {
    padding: 70px 0 50px;
  }

  .cxhc-prompt-card {
    padding: 32px 16px 20px;
    border-radius: 25px;
  }

  .cxhc-modal {
    padding: 0;
  }

  .cxhc-modal-dialog {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  .cxhc-chat-body {
    padding: 22px 13px 30px;
  }

  .cxhc-message-bubble {
    max-width: 84%;
  }

  .cxhc-modal-new-chat {
    display: none;
  }

  .cxhc-modal-composer-wrap {
    padding: 10px;
  }
}

/* ===== v21 signal-stack inner spacing ===== */
/* Keep the right-side step cards away from the outer split-panel border. */
.split-panel > .signal-stack{
  padding:24px 32px 24px 18px;
  box-sizing:border-box;
}
.split-panel > .signal-stack > div{
  padding:18px 30px 18px 18px;
  box-sizing:border-box;
}
@media(max-width:1080px){
  .split-panel > .signal-stack{padding:8px 24px 28px;}
}
@media(max-width:700px){
  .split-panel > .signal-stack{padding:6px 18px 22px;}
  .split-panel > .signal-stack > div{padding:16px 20px 16px 16px;}
}
/* =========================================================
   FINAL FIX — CREAM BACKGROUND AROUND CTA + WORKFLOW SECTIONS
   ========================================================= */

/* CTA section:
   "Stop optimizing with incomplete traffic context"
*/
.section:has(.cta-band),
section:has(.cta-band) {
    background: #fff4ef !important;
}


/* Keep CTA inner card dark */
.cta-band {
    background:
        radial-gradient(
            circle at 88% 20%,
            rgba(255,145,65,.24),
            transparent 31%
        ),
        linear-gradient(
            120deg,
            #24120b,
            #17171a 60%
        ) !important;
}


/* Workflow/platform section:
   "A protection workflow built around context"
*/
.section:has(.platform-panel),
section:has(.platform-panel),
.section:has(.platform-panel__copy),
section:has(.platform-panel__copy) {
    background: #fff4ef !important;
}


/* Keep workflow inner visual/card dark */
.platform-panel,
.platform-panel__copy,
.platform-panel__visual {
    background-color: #17181b;
}


/* Remove gray leaking from parent wrappers */
main:has(.cta-band),
main:has(.platform-panel) {
    background-color: #fff4ef;
}
/* =========================================================
   FORCE EXACT OUTER BACKGROUND
   MUST BE LAST CSS IN FILE
   ========================================================= */

body .section:has(.cta-band),
body section:has(.cta-band),
body .section:has(.platform-panel),
body section:has(.platform-panel),
body .section:has(.platform-panel__copy),
body section:has(.platform-panel__copy) {
    background-color: #fff4ef !important;
    background-image: none !important;
}
/* =========================================================
   FINAL GREY -> #FFF4EF FIX
   ========================================================= */

/* Remove the hard-coded grey section background */
section.ip-speed-section,
.section.alt.premium-flat-section.premium-flat-dark.ip-speed-section {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* CTA outer section */
body section:has(.cta-band),
body .section:has(.cta-band) {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* Platform / protection workflow outer section */
body section:has(.platform-panel),
body .section:has(.platform-panel),
body section:has(.platform-panel__copy),
body .section:has(.platform-panel__copy) {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* Keep the actual cards dark */
.cta-band {
    background:
        radial-gradient(
            circle at 88% 20%,
            rgba(255,145,65,.24),
            transparent 31%
        ),
        linear-gradient(
            120deg,
            #24120b,
            #17171a 60%
        ) !important;
}

.platform-panel,
.platform-panel__copy,
.platform-panel__visual {
    background-color: #17181b !important;
}
/* =========================================================
   FORCE THIS LIGHT CANVAS TO CREAM
   ========================================================= */

section {
    --test-bg: #fff4ef;
}

/* Target common light/grey workflow canvases */
section[style*="d5d5d7"],
section[style*="213"],
.section[style*="d5d5d7"] {
    background: #fff4ef !important;
}
/* =========================================================
   CLICKRONIX WORKFLOW SECTION — FINAL BACKGROUND FIX
   ========================================================= */

html body main section.section.workflow-magnet-section {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}

/* Inner workflow card stays dark */
html body main
section.workflow-magnet-section
.workflow-magnet-card {
    background: #171719 !important;
}
body.cx-page-features .page-hero + .section {
    background: #fff4ef !important;
    background-image: none !important;
}
/* =========================================================
   CLICKRONIX — EXACT #FFF4EF SECTION FIX
   ========================================================= */


/* 1. Evidence Model outer section */
body.cx-page-click-fraud-detection
main
section.section.premium-flat-section.premium-flat-light {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* 2. Evidence Model large INNER rounded card */
body.cx-page-click-fraud-detection
main
section.premium-flat-light
.data-halo {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* Keep the four small signal cards white */
body.cx-page-click-fraud-detection
main
section.premium-flat-light
.data-halo .callout-box {
    background: #ffffff !important;
}


/* 3. Three Traffic-Quality Use Cases section */
body.cx-page-click-fraud-detection
main
section.detection-usecases-section {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}
/* =========================================================
   EXACT SECTION FIX
   "Why traffic-quality monitoring matters for advertisers"
   ========================================================= */

html body.cx-page-invalid-traffic-detection
main > section:nth-of-type(3) {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* Remove any overlay creating the grey appearance */
html body.cx-page-invalid-traffic-detection
main > section:nth-of-type(3)::before,
html body.cx-page-invalid-traffic-detection
main > section:nth-of-type(3)::after {
    background: transparent !important;
    background-image: none !important;
}
/* =========================================================
   GOOGLE ADS PAGE — EXACT GREY TO #FFF4EF FIX
   ========================================================= */

/* Screenshot 2:
   Why Clickronix connects to Google Ads
*/
html body.cx-page-google-ads-protection
main > section:nth-of-type(2) {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* Screenshot 1:
   What is analyzed alongside Google Ads campaign context
*/
html body.cx-page-google-ads-protection
main > section:nth-of-type(4) {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* Remove any section-level grey overlays */
html body.cx-page-google-ads-protection
main > section:nth-of-type(2)::before,
html body.cx-page-google-ads-protection
main > section:nth-of-type(2)::after,
html body.cx-page-google-ads-protection
main > section:nth-of-type(4)::before,
html body.cx-page-google-ads-protection
main > section:nth-of-type(4)::after {
    background: transparent !important;
    background-image: none !important;
}
/* =========================================================
   GOOGLE ADS PAGE — OUTER + INNER CARD COLOR FIX
   ========================================================= */

/* Outer light sections */
body.cx-page-google-ads-protection
main > section:nth-of-type(4),

body.cx-page-google-ads-protection
section.cx-infographic-signal-tree {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* FIRST IMAGE — 3 INNER CARDS */
body.cx-page-google-ads-protection
main > section:nth-of-type(4) .grid-3 .card {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* SECOND IMAGE — 4 WORKFLOW CARDS */
body.cx-page-google-ads-protection
.cx-infographic-signal-tree
.cxv-diamond-node {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* Keep borders visible */
body.cx-page-google-ads-protection
main > section:nth-of-type(4) .grid-3 .card,
body.cx-page-google-ads-protection
.cx-infographic-signal-tree
.cxv-diamond-node {
    border: 1px solid rgba(255, 102, 0, 0.25) !important;
}


/* Keep text dark/readable */
body.cx-page-google-ads-protection
main > section:nth-of-type(4) .card h3,
body.cx-page-google-ads-protection
main > section:nth-of-type(4) .card p,
body.cx-page-google-ads-protection
.cx-infographic-signal-tree .cxv-diamond-node h3,
body.cx-page-google-ads-protection
.cx-infographic-signal-tree .cxv-diamond-node p {
    color: #17181b !important;
}
/* =========================================================
   TRAFFIC QUALITY ANALYTICS — FINAL #FFF4EF FIX
   ========================================================= */


/* -----------------------------------------
   1. ANALYTICS JOURNEY — OUTER SECTION
   ----------------------------------------- */

body.cx-page-traffic-quality-analytics
main > section:nth-of-type(3) {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* ANALYTICS JOURNEY — INNER LARGE CARD */
body.cx-page-traffic-quality-analytics
main > section:nth-of-type(3) .curve-journey {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* Keep floating chips/cards cream too */
body.cx-page-traffic-quality-analytics
main > section:nth-of-type(3) .chip-float {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
}


/* -----------------------------------------
   2. REPORTING CAPABILITIES — OUTER SECTION
   ----------------------------------------- */

body.cx-page-traffic-quality-analytics
main > section:nth-of-type(5) {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* 3 INNER REPORTING CARDS */
body.cx-page-traffic-quality-analytics
main > section:nth-of-type(5) .grid-3 .card {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;

    border: 1px solid rgba(255, 102, 0, 0.20) !important;
}


/* Keep headings/text readable */
body.cx-page-traffic-quality-analytics
main > section:nth-of-type(5) .card h3,
body.cx-page-traffic-quality-analytics
main > section:nth-of-type(5) .card p {
    color: #17181b !important;
}
/* =========================================================
   SOLUTIONS PAGE — USE CASES SECTION
   OUTER + ALL INNER CARDS = #FFF4EF
   ========================================================= */

/* Outer section background */
body.cx-page-solutions
main > section:nth-of-type(2) {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* All 3 inner cards */
body.cx-page-solutions
main > section:nth-of-type(2) .triple-focus .focus-card,
body.cx-page-solutions
main > section:nth-of-type(2) .triple-focus .focus-card.middle {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;

    border: 1px solid rgba(255, 102, 0, 0.20) !important;
    box-shadow: 0 16px 40px rgba(17, 17, 20, 0.07) !important;
}


/* Remove orange middle-card text styling */
body.cx-page-solutions
main > section:nth-of-type(2) .focus-card.middle h3,
body.cx-page-solutions
main > section:nth-of-type(2) .focus-card.middle p {
    color: #17181b !important;
}


/* Keep all card text dark */
body.cx-page-solutions
main > section:nth-of-type(2) .focus-card h3 {
    color: #17181b !important;
}

body.cx-page-solutions
main > section:nth-of-type(2) .focus-card p {
    color: #5c6270 !important;
}


/* Make middle arrow match the other cards */
body.cx-page-solutions
main > section:nth-of-type(2) .focus-card.middle .mini-arrow {
    color: #17181b !important;
    border-color: rgba(17, 17, 20, 0.10) !important;
    background: transparent !important;
}
body.cx-page-for-digital-agencies
main > section:nth-of-type(3),

body.cx-page-for-digital-agencies
main > section:nth-of-type(4) {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}
/* =========================================================
   DIGITAL AGENCIES PAGE
   CREAM BACKGROUND + INNER CARD COLOR
   KEEP ORANGE ELEMENTS UNCHANGED
   ========================================================= */

/* -----------------------------------------
   1) CONTROLS FOR GROWING ACCOUNT PORTFOLIOS
   ----------------------------------------- */
body.cx-page-for-digital-agencies
main > section:nth-of-type(4) {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}

/* inner 3 cards */
body.cx-page-for-digital-agencies
main > section:nth-of-type(4) .grid-3 .card {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
    border: 1px solid rgba(255, 102, 0, 0.18) !important;
    box-shadow: 0 14px 35px rgba(17, 17, 20, 0.06) !important;
}

/* keep text dark/readable */
body.cx-page-for-digital-agencies
main > section:nth-of-type(4) .grid-3 .card h3 {
    color: #17181b !important;
}

body.cx-page-for-digital-agencies
main > section:nth-of-type(4) .grid-3 .card p {
    color: #5d626d !important;
}


/* -----------------------------------------
   2) THREE CHANNEL APPROACH — OUTER BACKGROUND
   ----------------------------------------- */
body.cx-page-for-digital-agencies
section.agency-three-channel-section {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}

/* main shell background */
body.cx-page-for-digital-agencies
.agency-three-channel-shell {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* -----------------------------------------
   3) RIGHT-SIDE INNER CARDS = SAME CREAM COLOR
   DO NOT TOUCH ORANGE PANEL
   ----------------------------------------- */
body.cx-page-for-digital-agencies
.agency-channel-detail-card {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
    border: 1px solid rgba(255, 102, 0, 0.18) !important;
    box-shadow: 0 14px 35px rgba(17, 17, 20, 0.06) !important;
}

/* keep right card text readable */
body.cx-page-for-digital-agencies
.agency-channel-detail-card h3,
body.cx-page-for-digital-agencies
.agency-channel-detail-card strong {
    color: #17181b !important;
}

body.cx-page-for-digital-agencies
.agency-channel-detail-card p,
body.cx-page-for-digital-agencies
.agency-channel-detail-card li {
    color: #5d626d !important;
}

/* small tags inside right cards */
body.cx-page-for-digital-agencies
.agency-channel-platform-row span {
    background: #fff4ef !important;
    color: #17181b !important;
    border: 1px solid rgba(255, 102, 0, 0.18) !important;
}

/* IMPORTANT:
   leave this orange panel unchanged */
body.cx-page-for-digital-agencies
.agency-channel-orange-panel {
    /* no background override here on purpose */
}


/* -----------------------------------------
   4) TRIANGLE CENTER TEXT — MAKE IT FIT BETTER
   ----------------------------------------- */
body.cx-page-for-digital-agencies
.agency-wheel-center-copy {
    width: 120px !important;
    text-align: center !important;
}

/* top line: Clickronix */
body.cx-page-for-digital-agencies
.agency-wheel-center-copy span {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
}

/* bottom line: Agency evidence model */
body.cx-page-for-digital-agencies
.agency-wheel-center-copy strong {
    display: block !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    margin-top: 2px !important;
}
/* =========================================================
   AGENCY WHEEL CENTER TEXT — BELOW TRIANGLE
   ========================================================= */

body.cx-page-for-digital-agencies
.agency-wheel-center-copy {
    position: absolute !important;

    left: 50% !important;
    top: 60% !important;

    transform: translateX(-50%) !important;

    width: 180px !important;

    text-align: center !important;
    z-index: 10 !important;

    pointer-events: none !important;
}


/* CLICKRONIX */
body.cx-page-for-digital-agencies
.agency-wheel-center-copy span {
    display: block !important;

    color: #17181b !important;

    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;

    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;

    margin: 0 0 4px !important;
}


/* AGENCY EVIDENCE MODEL */
body.cx-page-for-digital-agencies
.agency-wheel-center-copy strong {
    display: block !important;

    color: #17181b !important;

    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;

    margin: 0 !important;
}
/* =========================================================
   LEAD GENERATION PAGE — 3 CARD SECTION
   OUTER + INNER CARDS = #FFF4EF
   ========================================================= */

/* Outer section background */
body.cx-page-solutions-lead-generation
main > section:nth-of-type(4) {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* All 3 inner cards */
body.cx-page-solutions-lead-generation
main > section:nth-of-type(3) .grid-3 .card {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;

    border: 1px solid rgba(255, 102, 0, 0.18) !important;
    box-shadow: 0 14px 35px rgba(17, 17, 20, 0.06) !important;
}


/* Keep text dark */
body.cx-page-solutions-lead-generation
main > section:nth-of-type(4) .grid-4 .card h3 {
    color: #17181b !important;
}

body.cx-page-solutions-lead-generation
main > section:nth-of-type(4) .grid-4 .card p {
    color: #5d626d !important;
}
/* =========================================================
   LEAD GENERATION PAGE
   MAKE ORANGE SHAPES A LITTLE SHORTER
   ========================================================= */


/* -----------------------------------------
   1) TOP ORANGE ARROW STEPS
   ----------------------------------------- */
body.cx-page-solutions-lead-generation
.cx-process-arrows .seo-process-step {
    min-height: 200px !important;   /* reduce overall height */
    padding: 30px 28px !important;  /* less vertical padding */
}

/* number circle a bit tighter */
body.cx-page-solutions-lead-generation
.cx-process-arrows .seo-process-step .num {
    margin-bottom: 14px !important;
}

/* text spacing tighter */
body.cx-page-solutions-lead-generation
.cx-process-arrows .seo-process-step h3 {
    margin-bottom: 12px !important;
}

body.cx-page-solutions-lead-generation
.cx-process-arrows .seo-process-step p {
    margin-bottom: 0 !important;
    line-height: 1.55 !important;
}


/* -----------------------------------------
   2) BOTTOM FUNNEL SHAPES
   ----------------------------------------- */
body.cx-page-solutions-lead-generation
.cx-model-funnel .seo-model-cell {
    min-height: 92px !important;     /* shorter funnel bars */
    padding: 18px 28px !important;   /* reduce height */
}

/* tighten text inside funnel bars */
body.cx-page-solutions-lead-generation
.cx-model-funnel .seo-model-cell h3 {
    margin-bottom: 8px !important;
    line-height: 1.2 !important;
}

body.cx-page-solutions-lead-generation
.cx-model-funnel .seo-model-cell p {
    margin-bottom: 0 !important;
    line-height: 1.45 !important;
}
/* =========================================================
   PPC MANAGERS PAGE — CREAM SECTION BACKGROUND
   ========================================================= */

body.cx-page-for-ppc-managers
main > section:nth-of-type(3),

body.cx-page-for-ppc-managers
main > section:nth-of-type(4) {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}
/* =========================================================
   CLICKRONIX — EXPANSION WORKFLOW SECTION
   Reference-inspired stepped chart
   ========================================================= */

.clickronix-expansion-section {
    position: relative;
    overflow: hidden;

    padding: 90px 0 80px;

    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;

    color: #17181b;
}


.clickronix-expansion-container {
    display: grid;
    grid-template-columns: 0.82fr 1.65fr;
    gap: 70px;

    align-items: stretch;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.clickronix-expansion-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-height: 530px;
}


.clickronix-expansion-left .eyebrow {
    margin-bottom: 16px;

    color: #ff5b18 !important;
}


.clickronix-expansion-left h2 {
    max-width: 470px;

    margin: 0;

    color: #17181b !important;

    font-size: clamp(2.7rem, 4.6vw, 5rem);
    line-height: 0.96;

    font-weight: 700;
    letter-spacing: -0.055em;
}


.clickronix-expansion-summary {
    max-width: 330px;

    margin-top: auto;
}


.clickronix-expansion-summary p {
    margin: 18px 0 0;

    color: #17181b !important;

    font-size: 1rem;
    line-height: 1.35;

    font-weight: 600;
}


/* 4-circle brand mark */

.clickronix-expansion-mark {
    width: 55px;
    height: 55px;

    display: grid;

    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);

    gap: 3px;
}


.clickronix-expansion-mark i {
    display: block;

    background: #17181b;

    border-radius: 70% 70% 70% 10%;
}


.clickronix-expansion-mark i:nth-child(2) {
    transform: rotate(90deg);
}

.clickronix-expansion-mark i:nth-child(3) {
    transform: rotate(-90deg);
}

.clickronix-expansion-mark i:nth-child(4) {
    transform: rotate(180deg);
}


/* =========================================================
   CHART
   ========================================================= */

.clickronix-expansion-chart {
    position: relative;

    min-height: 540px;

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 0;

    align-items: end;

    padding: 40px 65px 55px 0;
}


/* baseline */

.clickronix-expansion-baseline {
    position: absolute;

    left: 0;
    right: 65px;
    bottom: 52px;

    height: 5px;

    background: #17181b;
}


/* columns */

.clickronix-expansion-column {
    position: relative;

    height: 430px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    align-items: stretch;

    z-index: 2;
}


/* standard bars */

.clickronix-expansion-bar {
    position: relative;

    width: 100%;

    background: rgba(255,255,255,0.55);

    border-top: 2px solid rgba(23,24,27,0.30);
}


/* different heights */

.clickronix-expansion-column.column-1
.clickronix-expansion-bar {
    height: 65px;
}


.clickronix-expansion-column.column-2
.clickronix-expansion-bar {
    height: 105px;
}


.clickronix-expansion-column.column-3
.clickronix-expansion-bar {
    height: 405px;
}


.clickronix-expansion-column.column-4
.clickronix-expansion-bar {
    height: 155px;
}


.clickronix-expansion-column.column-5
.clickronix-expansion-bar {
    height: 140px;
}


/* featured orange column */

.clickronix-expansion-column.featured
.clickronix-expansion-bar {
    background:
        linear-gradient(
            to bottom,
            #ff5438 0%,
            #ff5438 80%,
            rgba(255,255,255,0.92) 80%,
            rgba(255,255,255,0.92) 100%
        );

    border-top: 3px solid #17181b;
}


/* percentage values */

.clickronix-expansion-value {
    position: absolute;

    left: 10px;

    bottom: calc(var(--bar-height, 80px) + 15px);

    color: #17181b;

    font-size: 1.25rem;
    font-weight: 800;
}


.column-1 .clickronix-expansion-value {
    bottom: 95px;
}

.column-2 .clickronix-expansion-value {
    bottom: 145px;
}

.column-3 .clickronix-expansion-value {
    bottom: 370px;

    color: #ffffff;

    font-size: 1.35rem;
}

.column-4 .clickronix-expansion-value {
    bottom: 200px;
}

.column-5 .clickronix-expansion-value {
    bottom: 180px;
}


/* small metric lines */

.clickronix-expansion-line {
    position: absolute;

    width: 100%;
    height: 3px;

    left: 0;

    background: #17181b;
}


.column-1 .clickronix-expansion-line {
    bottom: 112px;
}

.column-2 .clickronix-expansion-line {
    bottom: 163px;
}

.column-4 .clickronix-expansion-line {
    bottom: 218px;
}

.column-5 .clickronix-expansion-line {
    bottom: 198px;
}


/* bottom labels */

.clickronix-expansion-label {
    position: absolute;

    bottom: -33px;

    width: 100%;

    text-align: center;

    color: #17181b;

    font-size: 0.82rem;
    font-weight: 600;
}


/* =========================================================
   RIGHT SCALE
   ========================================================= */

.clickronix-expansion-scale {
    position: absolute;

    top: 30px;
    right: 0;
    bottom: 52px;

    width: 48px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    color: #17181b;

    font-size: 0.72rem;
    font-weight: 700;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .clickronix-expansion-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .clickronix-expansion-left {
        min-height: auto;
    }

    .clickronix-expansion-left h2 {
        max-width: 700px;
    }

    .clickronix-expansion-summary {
        margin-top: 35px;
    }

}


@media (max-width: 760px) {

    .clickronix-expansion-section {
        padding: 65px 0;
    }

    .clickronix-expansion-chart {
        overflow-x: auto;

        min-width: 780px;
    }

    .clickronix-expansion-left h2 {
        font-size: clamp(2.2rem, 10vw, 3.5rem);
    }

}
/* =========================================================
   CLICKRONIX EXPANSION SECTION
   CLOSE MATCH TO REFERENCE DESIGN
   ========================================================= */

body.cx-page-how-it-works
.clickronix-expansion-section {
    position: relative;
    overflow: hidden;

    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;

    padding: 72px 0 64px;

    color: #17181b;
}


/* =========================================================
   OVERALL TWO-COLUMN LAYOUT
   ========================================================= */

body.cx-page-how-it-works
.clickronix-expansion-container {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.72fr)
        minmax(700px, 1.75fr);

    gap: 55px;

    align-items: stretch;
}


/* =========================================================
   LEFT SIDE
   ========================================================= */

body.cx-page-how-it-works
.clickronix-expansion-left {
    min-height: 590px;

    display: flex;
    flex-direction: column;

    justify-content: flex-start;
}


/* eyebrow */
body.cx-page-how-it-works
.clickronix-expansion-left .eyebrow {
    margin: 0 0 17px;

    color: #ff5b18 !important;

    font-size: 11px !important;
    line-height: 1 !important;

    font-weight: 800 !important;

    letter-spacing: 0.18em !important;
    text-transform: uppercase;
}


/* large heading */
body.cx-page-how-it-works
.clickronix-expansion-left h2 {
    width: 100%;
    max-width: 430px;

    margin: 0;

    color: #17181b !important;

    font-size: clamp(3.3rem, 4.1vw, 5rem) !important;

    line-height: 0.91 !important;

    font-weight: 650 !important;

    letter-spacing: -0.065em !important;
}


/* bottom information */
body.cx-page-how-it-works
.clickronix-expansion-summary {
    max-width: 315px;

    margin-top: auto;
    margin-bottom: 38px;
}


/* icon */
body.cx-page-how-it-works
.clickronix-expansion-mark {
    width: 48px;
    height: 48px;

    margin-bottom: 20px;

    display: grid;

    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);

    gap: 3px;
}


body.cx-page-how-it-works
.clickronix-expansion-mark i {
    display: block;

    background: #17181b;

    border-radius: 70% 70% 70% 12%;
}


body.cx-page-how-it-works
.clickronix-expansion-mark i:nth-child(2) {
    transform: rotate(90deg);
}

body.cx-page-how-it-works
.clickronix-expansion-mark i:nth-child(3) {
    transform: rotate(-90deg);
}

body.cx-page-how-it-works
.clickronix-expansion-mark i:nth-child(4) {
    transform: rotate(180deg);
}


/* description */
body.cx-page-how-it-works
.clickronix-expansion-summary p {
    margin: 0;

    max-width: 300px;

    color: #17181b !important;

    font-size: 15px !important;

    line-height: 1.27 !important;

    font-weight: 650 !important;
}


/* =========================================================
   CHART
   ========================================================= */

body.cx-page-how-it-works
.clickronix-expansion-chart {
    position: relative;

    height: 590px;

    padding:

        22px
        68px
        54px
        0;

    display: grid;

    grid-template-columns: repeat(6, minmax(92px, 1fr));

    align-items: end;

    column-gap: 0;

    isolation: isolate;
}


/* =========================================================
   BASELINE
   ========================================================= */

body.cx-page-how-it-works
.cx-exp-baseline {
    position: absolute;

    left: 0;
    right: 68px;

    bottom: 52px;

    height: 5px;

    background: #17181b;

    z-index: 8;
}


/* =========================================================
   COLUMN
   ========================================================= */

body.cx-page-how-it-works
.cx-exp-col {
    position: relative;

    height: 470px;

    display: flex;
    flex-direction: column;

    justify-content: flex-end;

    align-items: stretch;

    z-index: 3;
}


/* =========================================================
   WHITE / PALE SUPPORT BARS
   ========================================================= */

body.cx-page-how-it-works
.cx-exp-bar {
    width: 100%;

    background: rgba(255, 255, 255, 0.56);

    border-top: 2px solid rgba(23, 24, 27, 0.28);

    position: relative;

    z-index: 3;
}


/* 01 */
body.cx-page-how-it-works
.cx-exp-1 .cx-exp-bar {
    height: 40px;
}


/* 02 */
body.cx-page-how-it-works
.cx-exp-2 .cx-exp-bar {
    height: 82px;
}


/* ORANGE FEATURED */
body.cx-page-how-it-works
.cx-exp-3 .cx-exp-bar {
    height: 435px;

    background:
        linear-gradient(
            to bottom,
            #ff5037 0%,
            #ff5037 82%,
            rgba(255,255,255,.93) 82%,
            rgba(255,255,255,.93) 100%
        );

    border-top: 3px solid #17181b;
}


/* 04 */
body.cx-page-how-it-works
.cx-exp-4 .cx-exp-bar {
    height: 87px;
}


/* 05 */
body.cx-page-how-it-works
.cx-exp-5 .cx-exp-bar {
    height: 190px;
}


/* 06 */
body.cx-page-how-it-works
.cx-exp-6 .cx-exp-bar {
    height: 170px;
}


/* =========================================================
   FEATURED 98.5%
   ========================================================= */

body.cx-page-how-it-works
.cx-exp-featured-value {
    position: absolute;

    left: 13px;
    top: 14px;

    z-index: 10;

    color: #ffffff;

    font-size: 21px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -0.03em;
}


/* =========================================================
   BLACK REFERENCE LINES + PERCENTAGES
   ========================================================= */

body.cx-page-how-it-works
.cx-exp-metric {
    position: absolute;

    width: 100%;

    z-index: 7;
}


body.cx-page-how-it-works
.cx-exp-metric span {
    display: block;

    width: 100%;
    height: 3px;

    background: #17181b;
}


body.cx-page-how-it-works
.cx-exp-metric strong {
    display: block;

    padding: 8px 0 0 11px;

    color: #17181b;

    font-size: 19px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -0.03em;
}


/* exact vertical positions */

body.cx-page-how-it-works
.cx-exp-1 .cx-exp-metric {
    bottom: 115px;
}


body.cx-page-how-it-works
.cx-exp-2 .cx-exp-metric {
    bottom: 333px;
}


body.cx-page-how-it-works
.cx-exp-4 .cx-exp-metric {
    bottom: 190px;
}


body.cx-page-how-it-works
.cx-exp-5 .cx-exp-metric {
    bottom: 275px;
}


body.cx-page-how-it-works
.cx-exp-6 .cx-exp-metric {
    bottom: 215px;
}


/* =========================================================
   BOTTOM LABELS
   ========================================================= */

body.cx-page-how-it-works
.cx-exp-label {
    position: absolute;

    left: 0;
    right: 0;

    bottom: -31px;

    text-align: center;

    color: #17181b;

    font-size: 12px;

    font-weight: 600;

    white-space: nowrap;
}


/* =========================================================
   RIGHT SIDE SCALE
   ========================================================= */

body.cx-page-how-it-works
.clickronix-expansion-scale {
    position: absolute;

    top: 15px;
    right: 0;

    bottom: 53px;

    width: 46px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    align-items: flex-start;

    color: #17181b;
}


body.cx-page-how-it-works
.clickronix-expansion-scale span {
    font-size: 11px;

    line-height: 1;

    font-weight: 700;
}


/* =========================================================
   REMOVE OLD CHART STYLING
   ========================================================= */

body.cx-page-how-it-works
.clickronix-expansion-column,

body.cx-page-how-it-works
.clickronix-expansion-baseline,

body.cx-page-how-it-works
.clickronix-expansion-value,

body.cx-page-how-it-works
.clickronix-expansion-line,

body.cx-page-how-it-works
.clickronix-expansion-label {
    /* old chart elements no longer used */
}


/* =========================================================
   DESKTOP — MAKE EVERYTHING SIT HIGHER
   ========================================================= */

@media (min-width: 1101px) {

    body.cx-page-how-it-works
    .clickronix-expansion-chart {
        transform: translateY(-8px);
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    body.cx-page-how-it-works
    .clickronix-expansion-container {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    body.cx-page-how-it-works
    .clickronix-expansion-left {
        min-height: auto;
    }


    body.cx-page-how-it-works
    .clickronix-expansion-left h2 {
        max-width: 720px;

        font-size: clamp(
            2.8rem,
            7vw,
            4.5rem
        ) !important;
    }


    body.cx-page-how-it-works
    .clickronix-expansion-summary {
        margin-top: 35px;
        margin-bottom: 0;
    }


    body.cx-page-how-it-works
    .clickronix-expansion-chart {
        height: 540px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    body.cx-page-how-it-works
    .clickronix-expansion-section {
        padding: 58px 0;
    }


    body.cx-page-how-it-works
    .clickronix-expansion-left h2 {
        font-size: clamp(
            2.4rem,
            11vw,
            3.5rem
        ) !important;

        line-height: 0.96 !important;
    }


    body.cx-page-how-it-works
    .clickronix-expansion-chart {
        width: 820px;

        min-width: 820px;

        height: 520px;

        overflow: visible;
    }


    body.cx-page-how-it-works
    .clickronix-expansion-section {
        overflow-x: auto;
    }

}
/* =========================================================
   EXPANSION SECTION — REDUCE HEADLINE SIZE
   ========================================================= */

body.cx-page-how-it-works
.clickronix-expansion-left h2 {
    max-width: 520px !important;

    font-size: clamp(
        2.2rem,
        3vw,
        3.4rem
    ) !important;

    line-height: 1.02 !important;

    letter-spacing: -0.04em !important;

    font-weight: 700 !important;
}
.cx-exp-featured-value {
    position: absolute !important;

    left: 14px !important;
    top: 10px !important;

    color: #000000 !important;

    font-size: 21px !important;
    line-height: 1 !important;
    font-weight: 800 !important;

    z-index: 20 !important;

    white-space: nowrap !important;
}
body.cx-page-how-it-works
.clickronix-expansion-section .eyebrow {
    color: #fc6823 !important;
}
/* =========================================================
   MATCH BOTH ORANGE COLORS
   ========================================================= */

/* Top featured chart bar */
body.cx-page-how-it-works
.cx-exp-3 .cx-exp-bar {
    background: #ff6600 !important;
}




/* =========================================================
   DETECTION METHODOLOGY — SIGNAL ARCHITECTURE
   LIGHT BACKGROUND + DARK CARD TEXT
   KEEP CENTER ORANGE
   ========================================================= */


/* Outer section background */
body.cx-page-detection-methodology
main > section:nth-of-type(3) {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* Main inner shell */
body.cx-page-detection-methodology
main > section:nth-of-type(3)
.method-hex-shell {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
    border-color: rgba(255, 102, 0, 0.16) !important;
}


/* Main left heading */
body.cx-page-detection-methodology
main > section:nth-of-type(3)
.method-hex-copy h2 {
    color: #17181b !important;
}


/* Left description */
body.cx-page-detection-methodology
main > section:nth-of-type(3)
.method-hex-copy p {
    color: #555b66 !important;
}


/* Keep eyebrow orange */
body.cx-page-detection-methodology
main > section:nth-of-type(3)
.method-hex-copy .eyebrow {
    color: #ff6600 !important;
}


/* =========================================================
   NORMAL HEX CARDS
   ========================================================= */

body.cx-page-detection-methodology
main > section:nth-of-type(3)
.method-hex {
    background: #fff4ef !important;
    color: #17181b !important;

    border: 1px solid #ff6600 !important;
}


/* IMPORTANT:
   old design uses ::after as the dark INNER hex
   this is what must also become cream
*/
body.cx-page-detection-methodology
main > section:nth-of-type(3)
.method-hex::after {
    background: #fff4ef !important;
}


/* Number stays orange */
body.cx-page-detection-methodology
main > section:nth-of-type(3)
.method-hex > span {
    color: #ff6600 !important;
}


/* Card titles become black */
body.cx-page-detection-methodology
main > section:nth-of-type(3)
.method-hex > strong {
    color: #17181b !important;
}


/* Card descriptions become dark */
body.cx-page-detection-methodology
main > section:nth-of-type(3)
.method-hex > small {
    color: #525863 !important;
}


/* =========================================================
   CENTER RISK MODEL
   DO NOT CHANGE ORANGE
   ========================================================= */

body.cx-page-detection-methodology
main > section:nth-of-type(3)
.method-hex-core {
    background: linear-gradient(
        145deg,
        #ff7e2f,
        #b73b08
    ) !important;

    color: #ffffff !important;
}


/* C */
body.cx-page-detection-methodology
main > section:nth-of-type(3)
.method-hex-core b {
    color: #ffffff !important;
}


/* Risk Model */
body.cx-page-detection-methodology
main > section:nth-of-type(3)
.method-hex-core span {
    color: #ffffff !important;
}
/* =========================================================
   COMPLIANCE PAGE — EXACT SECTION BACKGROUND FIX
   ========================================================= */

/* 1. Clickronix provides / Clickronix does not */
body.cx-page-compliance-statement
main > section:nth-of-type(2) {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* 2. Clear product boundaries */
body.cx-page-compliance-statement
main > section:nth-of-type(4) {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* Remove any section overlay that could keep gray visible */
body.cx-page-compliance-statement
main > section:nth-of-type(2)::before,
body.cx-page-compliance-statement
main > section:nth-of-type(2)::after,
body.cx-page-compliance-statement
main > section:nth-of-type(4)::before,
body.cx-page-compliance-statement
main > section:nth-of-type(4)::after {
    background: transparent !important;
    background-image: none !important;
}
/* =========================================================
   BLOG / RESOURCES PAGE — FINAL SECTION COLORS
   ========================================================= */


/* =========================================================
   1. EDITORIAL STANDARD
   "Useful, accurate, and policy-aware content"
   OUTER SECTION = WEBSITE BLACK
   ========================================================= */

body.cx-page-blog
main > section:nth-of-type(3) {
    background: #111113 !important;
    background-color: #111113 !important;
    background-image: none !important;
}


/* Remove anything adding grey over the black */
body.cx-page-blog
main > section:nth-of-type(3)::before,
body.cx-page-blog
main > section:nth-of-type(3)::after {
    background: transparent !important;
    background-image: none !important;
}


/* IMPORTANT:
   keep the actual split panel design unchanged
*/
body.cx-page-blog
main > section:nth-of-type(3) .split-panel {
    background: initial;
}


/* =========================================================
   2. BROWSE BY TOPIC
   "Build a useful resource library"
   SAME LIGHT STYLE AS HELP CENTER
   ========================================================= */

body.cx-page-blog
main > section:nth-of-type(4) {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* Remove grey overlays */
body.cx-page-blog
main > section:nth-of-type(4)::before,
body.cx-page-blog
main > section:nth-of-type(4)::after {
    background: transparent !important;
    background-image: none !important;
}


/* =========================================================
   INNER 3 CARDS — MATCH LIGHT HELP CENTER STYLE
   ========================================================= */

body.cx-page-blog
main > section:nth-of-type(4)
.grid-3 .card {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;

    border: 1px solid rgba(255, 102, 0, 0.18) !important;
    box-shadow: 0 16px 40px rgba(17, 17, 20, 0.07) !important;
}


/* Card heading */
body.cx-page-blog
main > section:nth-of-type(4)
.grid-3 .card h3 {
    color: #111113 !important;
}


/* Card description */
body.cx-page-blog
main > section:nth-of-type(4)
.grid-3 .card p {
    color: #5d626d !important;
}


/* Keep orange icons */
body.cx-page-blog
main > section:nth-of-type(4)
.grid-3 .card .icon {
    color: #ff5a00 !important;
}
/* =========================================================
   HELP CENTER PAGE — EXACT SECTION BACKGROUND COLORS
   ========================================================= */


/* 1. GET HELP WITH USEFUL CONTEXT
   Outer section = website black
*/
body.cx-page-help-center
main > section:nth-of-type(3) {
    background: #17171a !important;
    background-color: #17171a !important;
    background-image: none !important;
}


/* Remove any old grey overlay */
body.cx-page-help-center
main > section:nth-of-type(3)::before,
body.cx-page-help-center
main > section:nth-of-type(3)::after {
    background: transparent !important;
    background-image: none !important;
}


/* Keep the existing split card design unchanged */
body.cx-page-help-center
main > section:nth-of-type(3) .split-panel {
    background: initial;
}


/* =========================================================
   2. ANSWERS AROUND THE FULL LIFECYCLE
   Outer section = #FFF4EF
   ========================================================= */

body.cx-page-help-center
main > section:nth-of-type(4) {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* Remove grey overlay */
body.cx-page-help-center
main > section:nth-of-type(4)::before,
body.cx-page-help-center
main > section:nth-of-type(4)::after {
    background: transparent !important;
    background-image: none !important;
}


/* Inner 3 cards = same #FFF4EF */
body.cx-page-help-center
main > section:nth-of-type(4)
.grid-3 .card {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;

    border: 1px solid rgba(255, 102, 0, 0.18) !important;
    box-shadow: 0 16px 40px rgba(17, 17, 20, 0.07) !important;
}


/* Card heading */
body.cx-page-help-center
main > section:nth-of-type(4)
.grid-3 .card h3 {
    color: #17171a !important;
}


/* Card description */
body.cx-page-help-center
main > section:nth-of-type(4)
.grid-3 .card p {
    color: #5d626d !important;
}


/* Keep orange icon styling */
body.cx-page-help-center
main > section:nth-of-type(4)
.grid-3 .card .icon {
    color: #ff5a00 !important;
}
/* =========================================================
   ABOUT US — COMPANY FACTS SECTION
   ========================================================= */

body.cx-page-about-us
main > section:nth-of-type(4) {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* Remove any overlay causing grey */
body.cx-page-about-us
main > section:nth-of-type(4)::before,
body.cx-page-about-us
main > section:nth-of-type(4)::after {
    background: transparent !important;
    background-image: none !important;
}
/* =========================================================
   CLICKRONIX ABOUT — OUR JOURNEY TIMELINE
   ========================================================= */

.cx-page-about-us .cx-journey-section {
    position: relative;
    overflow: hidden;

    padding: clamp(80px, 8vw, 125px) 0
             clamp(95px, 10vw, 150px);

    background:
        radial-gradient(
            circle at 92% 70%,
            rgba(255, 89, 0, 0.52) 0%,
            rgba(255, 89, 0, 0.18) 22%,
            rgba(255, 89, 0, 0.03) 45%,
            transparent 62%
        ),
        #050505 !important;

    color: #fff;
}


/* subtle orange glow */
.cx-page-about-us .cx-journey-section::after {
    content: "";
    position: absolute;

    width: 520px;
    height: 520px;

    right: -170px;
    bottom: -230px;

    border-radius: 50%;

    background: rgba(255, 90, 0, 0.22);
    filter: blur(100px);

    pointer-events: none;
}


.cx-page-about-us .cx-journey-section .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   HEADING
   ========================================================= */

.cx-page-about-us .cx-journey-heading {
    max-width: 720px;
    margin: 0 auto 78px;
    text-align: center;
}


.cx-page-about-us .cx-journey-heading .eyebrow {
    color: #ff671f !important;
}


.cx-page-about-us .cx-journey-heading h2 {
    margin: 10px 0 14px;

    color: #fff !important;

    font-size: clamp(34px, 4vw, 54px);
    line-height: 1;
    font-weight: 800;
}


.cx-page-about-us .cx-journey-heading p {
    max-width: 650px;
    margin: 0 auto;

    color: rgba(255,255,255,.62) !important;

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   TIMELINE WRAPPER
   ========================================================= */

.cx-page-about-us .cx-journey-timeline {
    position: relative;

    display: grid;
    grid-template-columns: repeat(8, minmax(120px, 1fr));

    min-width: 1100px;
    min-height: 430px;
}


/* horizontal dotted line */
.cx-page-about-us .cx-journey-line {
    position: absolute;

    left: 3%;
    right: 3%;
    top: 50%;

    border-top: 2px dotted rgba(255,255,255,.58);

    transform: translateY(-50%);
}


/* =========================================================
   EACH TIMELINE ITEM
   ========================================================= */

.cx-page-about-us .cx-journey-item {
    position: relative;
    min-height: 430px;
}


/* marker position */
.cx-page-about-us .cx-journey-marker {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;
    gap: 5px;
}


/* big vertical milestone number */
.cx-page-about-us .cx-journey-marker strong {
    display: block;

    color: #fff;

    font-size: 37px;
    line-height: 1;
    font-weight: 800;

    writing-mode: vertical-rl;
    text-orientation: mixed;
}


/* circular dotted timeline node */
.cx-page-about-us .cx-journey-marker i {
    position: relative;

    width: 37px;
    height: 37px;

    display: block;

    border: 1px dotted rgba(255,255,255,.58);
    border-radius: 50%;
}


.cx-page-about-us .cx-journey-marker i::before {
    content: "";

    position: absolute;
    inset: 6px;

    border: 1px dotted rgba(255,255,255,.32);
    border-radius: 50%;
}


.cx-page-about-us .cx-journey-marker i::after {
    content: "";

    position: absolute;

    width: 5px;
    height: 5px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    background: #ff5a00;
    border-radius: 50%;
}


/* =========================================================
   COPY BLOCKS
   ========================================================= */

.cx-page-about-us .cx-journey-copy {
    position: absolute;

    width: 160px;

    color: rgba(255,255,255,.74);
}


.cx-page-about-us .cx-journey-copy span {
    display: block;

    margin-bottom: 7px;

    color: #fff;

    font-size: 12px;
    line-height: 1.3;
    font-weight: 700;
}


.cx-page-about-us .cx-journey-copy p {
    margin: 0;

    color: rgba(255,255,255,.62) !important;

    font-size: 10px;
    line-height: 1.5;
}


/* top copy */
.cx-page-about-us .cx-journey-item.is-top .cx-journey-copy {
    left: 50%;
    bottom: calc(50% + 72px);

    transform: translateX(-50%);
}


/* dotted vertical connector — top */
.cx-page-about-us .cx-journey-item.is-top::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 80px;

    height: calc(50% - 100px);

    border-left: 2px dotted rgba(255,255,255,.48);

    transform: translateX(-50%);
}


/* bottom copy */
.cx-page-about-us .cx-journey-item.is-bottom .cx-journey-copy {
    left: 50%;
    top: calc(50% + 80px);

    transform: translateX(-50%);
}


/* dotted vertical connector — bottom */
.cx-page-about-us .cx-journey-item.is-bottom::before {
    content: "";

    position: absolute;

    left: 50%;
    top: calc(50% + 24px);

    height: 115px;

    border-left: 2px dotted rgba(255,255,255,.48);

    transform: translateX(-50%);
}


/* =========================================================
   ORANGE FEATURED / FINAL ITEM
   ========================================================= */

.cx-page-about-us
.cx-journey-item.is-active
.cx-journey-marker strong,

.cx-page-about-us
.cx-journey-item.is-active
.cx-journey-copy span {
    color: #ff6a12;
}


.cx-page-about-us
.cx-journey-item.is-active
.cx-journey-marker i {
    border-color: #ff6a12;
}


.cx-page-about-us
.cx-journey-item.is-active::before {
    border-color: rgba(255,106,18,.8);
}


/* =========================================================
   HORIZONTAL SCROLL SAFETY
   ========================================================= */

.cx-page-about-us .cx-journey-section .container {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,106,18,.5) transparent;
}


.cx-page-about-us
.cx-journey-section .container::-webkit-scrollbar {
    height: 5px;
}


.cx-page-about-us
.cx-journey-section .container::-webkit-scrollbar-thumb {
    background: rgba(255,106,18,.5);
    border-radius: 20px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .cx-page-about-us .cx-journey-heading {
        margin-bottom: 55px;
    }

    .cx-page-about-us .cx-journey-timeline {
        min-width: 1050px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .cx-page-about-us .cx-journey-section {
        padding: 70px 0 90px;
    }

    .cx-page-about-us .cx-journey-heading {
        padding: 0 16px;
        text-align: left;
    }

    .cx-page-about-us .cx-journey-heading h2 {
        font-size: 36px;
    }

    .cx-page-about-us .cx-journey-timeline {
        min-width: 1000px;
        min-height: 390px;
    }

    .cx-page-about-us .cx-journey-copy {
        width: 145px;
    }
}
body.cx-page-about-us
main > section:nth-of-type(2) {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}
/* =========================================================
   CLICKRONIX SECURITY — NEW PRESENTATION STYLE
   ========================================================= */


/* =========================================================
   SHARED
   ========================================================= */

.cx-security-number {
    display: block;
    margin-bottom: 22px;

    color: #ffffff;

    font-size: 13px;
    line-height: 1;
    font-weight: 800;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   SECTION 1
   SECURITY MODEL — TARGET AUDIENCE INSPIRED
   ========================================================= */

.cx-security-overview-v2 {
    position: relative;
    overflow: hidden;

    padding: clamp(90px, 9vw, 145px) 0;

    background:
        radial-gradient(
            circle at 74% 48%,
            rgba(255, 83, 22, 0.96) 0%,
            rgba(220, 48, 18, 0.72) 17%,
            rgba(112, 29, 20, 0.38) 37%,
            transparent 58%
        ),
        linear-gradient(
            105deg,
            #101012 0%,
            #111113 27%,
            #261312 57%,
            #160f0f 100%
        );

    color: #ffffff;
}


.cx-security-overview-v2::after {
    content: "";

    position: absolute;
    inset: auto -10% -50% auto;

    width: 600px;
    height: 600px;

    border-radius: 50%;

    background: rgba(255, 78, 0, 0.24);
    filter: blur(120px);

    pointer-events: none;
}


.cx-security-overview-v2 .container {
    position: relative;
    z-index: 2;
}


.cx-security-overview-grid {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.85fr)
        minmax(500px, 1.15fr);

    align-items: center;

    gap: clamp(70px, 9vw, 150px);
}


/* LEFT */

.cx-security-overview-left {
    max-width: 500px;
}


.cx-security-overview-left h2 {
    margin: 0;

    color: #ffffff !important;

    font-size: clamp(44px, 5.2vw, 76px);
    line-height: 0.96;

    font-weight: 800;
    letter-spacing: -0.045em;
}


.cx-security-overview-left p {
    max-width: 450px;

    margin: 28px 0 0;

    color: rgba(255,255,255,.68) !important;

    font-size: 15px;
    line-height: 1.7;
}


/* RIGHT */

.cx-security-overview-right {
    max-width: 650px;
}


.cx-security-row {
    padding: 27px 6px 30px;

    border-bottom:
        1px solid rgba(255,255,255,.38);
}


.cx-security-row:first-child {
    padding-top: 0;
}


.cx-security-row:last-child {
    border-bottom: 0;
}


.cx-security-row-head {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 10px;
}


.cx-security-row-head span {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    border: 1px solid rgba(255,255,255,.4);
    border-radius: 50%;

    color: #ffffff;

    font-size: 10px;
    font-weight: 800;
}


.cx-security-row h3 {
    margin: 0;

    color: #ffffff !important;

    font-size: clamp(19px, 1.6vw, 24px);
    line-height: 1.15;

    font-weight: 750;
}


.cx-security-row p {
    max-width: 570px;

    margin: 0 0 0 43px;

    color: rgba(255,255,255,.70) !important;

    font-size: 14px;
    line-height: 1.65;
}



/* =========================================================
   SECTION 2
   SECURITY LIFECYCLE — REVENUE STREAM INSPIRED
   ========================================================= */

.cx-security-lifecycle-v2 {
    position: relative;
    overflow: hidden;

    padding: clamp(90px, 9vw, 145px) 0;

    background:
        radial-gradient(
            circle at 48% 85%,
            rgba(255, 82, 20, .72),
            rgba(105, 29, 21, .38) 28%,
            transparent 58%
        ),
        linear-gradient(
            110deg,
            #160f0f 0%,
            #301512 42%,
            #111113 76%,
            #0b0b0d 100%
        );

    color: #ffffff;
}


.cx-security-lifecycle-v2 .container {
    position: relative;
    z-index: 2;
}


/* HEADING */

.cx-security-lifecycle-head {
    display: grid;

    grid-template-columns:
        minmax(300px, .85fr)
        minmax(340px, .72fr);

    justify-content: space-between;
    align-items: end;

    gap: 80px;

    margin-bottom: 58px;
}


.cx-security-lifecycle-head h2 {
    margin: 0;

    color: #ffffff !important;

    font-size: clamp(44px, 5vw, 70px);
    line-height: .96;

    font-weight: 800;
    letter-spacing: -.045em;
}


.cx-security-lifecycle-head > p {
    max-width: 480px;

    margin: 0 0 6px auto;

    color: rgba(255,255,255,.68) !important;

    font-size: 14px;
    line-height: 1.65;

    text-align: right;
}


/* =========================================================
   TABLE / CARDS
   ========================================================= */

.cx-security-lifecycle-table {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.55);

    border-radius: 4px;
}


.cx-security-lifecycle-card {
    position: relative;

    min-height: 310px;

    padding: 31px 30px 30px;

    border-right:
        1px solid rgba(255,255,255,.42);

    background:
        rgba(17,17,19,.17);
}


.cx-security-lifecycle-card:last-child {
    border-right: 0;
}


/* subtle orange hover */
.cx-security-lifecycle-card::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255, 91, 17, .10),
            transparent 62%
        );

    opacity: 0;

    transition: opacity .25s ease;

    pointer-events: none;
}


.cx-security-lifecycle-card:hover::before {
    opacity: 1;
}


/* NUMBER */

.cx-security-step-number {
    margin-bottom: 45px;

    color: #ff6625;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .08em;
}


/* TITLE */

.cx-security-lifecycle-card h3 {
    margin: 0 0 20px;

    color: #ffffff !important;

    font-size: 22px;
    line-height: 1.15;

    font-weight: 750;
}


/* DESCRIPTION */

.cx-security-lifecycle-card p {
    margin: 0;

    color: rgba(255,255,255,.67) !important;

    font-size: 13px;
    line-height: 1.65;
}


/* BOTTOM LABEL */

.cx-security-step-label {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 27px;

    padding-top: 15px;

    border-top:
        1px solid rgba(255,255,255,.17);

    color: #ff6a2a;

    font-size: 9px;
    line-height: 1.2;

    font-weight: 800;

    letter-spacing: .11em;
}



/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .cx-security-overview-grid {
        grid-template-columns: 1fr;

        gap: 60px;
    }


    .cx-security-overview-left {
        max-width: 650px;
    }


    .cx-security-lifecycle-head {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .cx-security-lifecycle-head > p {
        margin-left: 0;

        text-align: left;
    }


    .cx-security-lifecycle-table {
        grid-template-columns: repeat(2, 1fr);
    }


    .cx-security-lifecycle-card:nth-child(2) {
        border-right: 0;
    }


    .cx-security-lifecycle-card:nth-child(1),
    .cx-security-lifecycle-card:nth-child(2) {
        border-bottom:
            1px solid rgba(255,255,255,.42);
    }

}


@media (max-width: 640px) {

    .cx-security-overview-v2,
    .cx-security-lifecycle-v2 {
        padding: 72px 0;
    }


    .cx-security-overview-left h2,
    .cx-security-lifecycle-head h2 {
        font-size: 42px;
    }


    .cx-security-row p {
        margin-left: 0;
    }


    .cx-security-lifecycle-table {
        grid-template-columns: 1fr;
    }


    .cx-security-lifecycle-card {
        min-height: 270px;

        border-right: 0;
        border-bottom:
            1px solid rgba(255,255,255,.42);
    }


    .cx-security-lifecycle-card:last-child {
        border-bottom: 0;
    }

}
/* SECTION 1 */
.cx-security-overview-v2 {
    position: relative;
    overflow: hidden;

    padding: clamp(90px, 9vw, 145px) 0;

    background: #111214 !important;
    background-color: #111214 !important;
    background-image: none !important;

    color: #ffffff;
}


/* Remove orange background glow */
.cx-security-overview-v2::after {
    display: none !important;
}


/* SECTION 2 */
.cx-security-lifecycle-v2 {
    position: relative;
    overflow: hidden;

    padding: clamp(90px, 9vw, 145px) 0;

    background: #111214 !important;
    background-color: #111214 !important;
    background-image: none !important;

    color: #ffffff;
}
/* =========================================================
   TRUST CENTER — FIRST + SECOND SECTION BACKGROUNDS
   ========================================================= */


/* 1. TRUST TIMELINE SECTION */
body.cx-page-trust-center
section.trust-timeline-section {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* Remove any old overlays */
body.cx-page-trust-center
section.trust-timeline-section::before,
body.cx-page-trust-center
section.trust-timeline-section::after {
    background: transparent !important;
    background-image: none !important;
}


/* =========================================================
   2. TRUST LINKS SECTION — BLACK
   ========================================================= */

body.cx-page-trust-center
section.trust-timeline-section + section.section {
    background: #111214 !important;
    background-color: #111214 !important;
    background-image: none !important;
}


/* Remove any grey overlay */
body.cx-page-trust-center
section.trust-timeline-section + section.section::before,
body.cx-page-trust-center
section.trust-timeline-section + section.section::after {
    background: transparent !important;
    background-image: none !important;
}
/* =========================================================
   CONTACT PAGE — CHOOSE THE BEST ROUTE
   ========================================================= */

body.cx-page-contact-us
main > section:nth-of-type(3) {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* Remove any overlay causing the grey */
body.cx-page-contact-us
main > section:nth-of-type(3)::before,
body.cx-page-contact-us
main > section:nth-of-type(3)::after {
    background: transparent !important;
    background-image: none !important;
}
/* =========================================================
   CLICKRONIX — EXPLAINABLE INTELLIGENCE FLOATING PATH SECTION
   ========================================================= */

.cx-floating-path-section {
  position: relative;
  overflow: hidden;
  background: #fff4ef !important;
  padding: 76px 0;
}

.cx-floating-path-section .container {
  position: relative;
  z-index: 2;
}


/* GRID */
.cx-floating-path-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(430px, 0.95fr);
  align-items: center;
  gap: 70px;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.cx-floating-path-content {
  position: relative;
  z-index: 3;
  max-width: 650px;
}

.cx-floating-path-content .seo-kicker {
  display: inline-block;
  margin-bottom: 17px;

  color: #ff642e;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;

  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.cx-floating-path-content h2 {
  margin: 0 0 20px;

  max-width: 620px;

  color: #101012;
  font-size: clamp(34px, 3.4vw, 50px);
  font-weight: 750;
  line-height: 1.03;
  letter-spacing: -0.04em;
}

.cx-floating-path-content > p {
  max-width: 610px;

  margin: 0;

  color: #645f5b;
  font-size: 15px;
  line-height: 1.7;
}


/* ORANGE CONTENT CARD */
.cx-floating-path-section .seo-pill-card {
  position: relative;

  margin-top: 22px;
  padding: 23px 26px 24px;

  max-width: 575px;

  border: 0;
  border-radius: 11px;

  background: #ff642e;

  box-shadow: none;

  overflow: hidden;
}

.cx-floating-path-section .seo-pill-card::before {
  content: "";

  position: absolute;
  top: -70px;
  right: -70px;

  width: 180px;
  height: 180px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.07);

  pointer-events: none;
}

.cx-floating-path-section .seo-pill-card strong {
  position: relative;
  z-index: 2;

  display: block;

  margin-bottom: 11px;

  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
}

.cx-floating-path-section .seo-pill-card p {
  position: relative;
  z-index: 2;

  margin: 0;

  color: #ffffff !important;
  font-size: 14px;
  line-height: 1.6;
}


/* =========================================================
   RIGHT SVG ANIMATION AREA
   ========================================================= */

.cx-floating-path-visual {
  position: relative;

  width: 100%;
  min-height: 350px;

  overflow: hidden;

  isolation: isolate;
}


/* faint ambient orange glow */
.cx-floating-path-glow {
  position: absolute;
  z-index: 0;

  left: 50%;
  top: 50%;

  width: 420px;
  height: 280px;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 100, 46, 0.09) 0%,
      rgba(255, 100, 46, 0.045) 35%,
      rgba(255, 100, 46, 0.015) 58%,
      transparent 74%
    );

  filter: blur(14px);

  pointer-events: none;
}


.cx-floating-path-svg {
  position: absolute;
  z-index: 1;

  inset: -5% -8% -5% -8%;

  width: 116%;
  height: 110%;

  overflow: visible;

  pointer-events: none;
}


/* actual SVG generated paths */
.cx-floating-path-svg path {
  fill: none;

  vector-effect: non-scaling-stroke;

  stroke-linecap: round;
  stroke-linejoin: round;

  will-change:
    stroke-dashoffset,
    opacity;
}


/* =========================================================
   SUBTLE EDGE MASK

   Makes paths visually disappear smoothly instead of being
   chopped at the animation container edges.
   ========================================================= */

.cx-floating-path-visual {
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 9%,
      #000 92%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 9%,
      #000 92%,
      transparent 100%
    );
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

  .cx-floating-path-grid {
    grid-template-columns: minmax(0, 1fr) minmax(350px, 0.9fr);
    gap: 42px;
  }

  .cx-floating-path-visual {
    min-height: 310px;
  }

}


@media (max-width: 820px) {

  .cx-floating-path-section {
    padding: 58px 0;
  }

  .cx-floating-path-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .cx-floating-path-content {
    max-width: 100%;
  }

  .cx-floating-path-content h2 {
    font-size: clamp(32px, 8vw, 43px);
  }

  .cx-floating-path-content > p {
    max-width: 100%;
  }

  .cx-floating-path-section .seo-pill-card {
    max-width: 100%;
  }

  .cx-floating-path-visual {
    min-height: 250px;
  }

  .cx-floating-path-svg {
    inset: -5% -15%;
    width: 130%;
  }

}


@media (max-width: 520px) {

  .cx-floating-path-section {
    padding: 48px 0;
  }

  .cx-floating-path-content h2 {
    font-size: 34px;
    line-height: 1.07;
  }

  .cx-floating-path-content > p {
    font-size: 14px;
  }

  .cx-floating-path-section .seo-pill-card {
    padding: 20px 20px 21px;
  }

  .cx-floating-path-visual {
    min-height: 210px;
  }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .cx-floating-path-svg path {
    animation: none !important;
    transition: none !important;
  }

}
/* =========================================================
   CLICKRONIX
   EXPLAINABLE INTELLIGENCE — SECTORS DONUT
   ========================================================= */

.cx-donut-section {
  position: relative;
  overflow: hidden;

  padding: 76px 0;

  background: #fff4ef !important;
}


/* ---------------------------------------------------------
   MAIN GRID
   --------------------------------------------------------- */

.cx-donut-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(430px, 0.95fr);

  align-items: center;

  gap: 80px;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.cx-donut-copy {
  max-width: 650px;
}


.cx-donut-copy .seo-kicker {
  display: inline-block;

  margin-bottom: 16px;

  color: #ff642e;

  font-size: 11px;
  font-weight: 800;

  line-height: 1;

  letter-spacing: 0.17em;

  text-transform: uppercase;
}


.cx-donut-copy h2 {
  max-width: 620px;

  margin: 0 0 18px;

  color: #111113;

  font-size: clamp(34px, 3.25vw, 50px);
  font-weight: 750;

  line-height: 1.04;

  letter-spacing: -0.04em;
}


.cx-donut-intro {
  max-width: 620px;

  margin: 0;

  color: #625d59;

  font-size: 15px;

  line-height: 1.72;
}


/* ---------------------------------------------------------
   ORANGE CARD
   --------------------------------------------------------- */

.cx-donut-section .seo-pill-card {
  position: relative;

  max-width: 575px;

  margin-top: 22px;

  padding: 24px 27px;

  overflow: hidden;

  border: 0;

  border-radius: 11px;

  background: #ff642e;

  box-shadow: none;
}


.cx-donut-section .seo-pill-card strong {
  display: block;

  margin: 0 0 10px;

  color: #ffffff;

  font-size: 14px;
  font-weight: 800;
}


.cx-donut-section .seo-pill-card p {
  margin: 0;

  color: #ffffff !important;

  font-size: 14px;

  line-height: 1.6;
}


/* =========================================================
   RIGHT VISUAL
   ========================================================= */

.cx-donut-visual {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;

  min-height: 360px;
}


/* subtle background glow */
.cx-donut-visual::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 380px;
  height: 300px;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 100, 46, 0.10) 0%,
      rgba(255, 100, 46, 0.04) 38%,
      transparent 72%
    );

  filter: blur(18px);

  pointer-events: none;
}


/* =========================================================
   DONUT LAYOUT
   ========================================================= */

.cx-sector-donut {
  position: relative;
  z-index: 2;

  display: flex;

  align-items: center;

  gap: 38px;

  width: max-content;

  max-width: 100%;
}


/* =========================================================
   DONUT RING
   ========================================================= */

.cx-sector-ring {
  position: relative;

  flex: 0 0 auto;

  width: 190px;
  height: 190px;
}


.cx-sector-svg {
  display: block;

  width: 190px;
  height: 190px;

  transform: rotate(-90deg);

  overflow: visible;
}


.cx-sector-arc {
  fill: none;

  stroke-width: 18;

  stroke-linecap: butt;

  cursor: default;

  opacity: 0;

  transform-origin: center;

  transition:
    opacity 350ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 350ms cubic-bezier(0.16, 1, 0.3, 1);
}


.cx-sector-arc.is-visible {
  opacity: 1;
}


.cx-sector-arc.is-muted {
  opacity: 0.22;
}


.cx-sector-arc.is-hot {
  opacity: 1;

  filter:
    drop-shadow(
      0 3px 8px rgba(255, 100, 46, 0.16)
    );
}


/* =========================================================
   CENTER CONTENT
   ========================================================= */

.cx-sector-center {
  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  pointer-events: none;
}


.cx-sector-center-dot {
  width: 8px;
  height: 8px;

  margin-bottom: 8px;

  border-radius: 50%;

  background: #ff642e;

  box-shadow:
    0 0 0 6px rgba(255, 100, 46, 0.10);
}


.cx-sector-center strong {
  display: block;

  color: #111113;

  font-size: 15px;
  font-weight: 750;

  line-height: 1.1;

  letter-spacing: 0.01em;
}


.cx-sector-center small {
  display: block;

  margin-top: 4px;

  color: rgba(17, 17, 19, 0.42);

  font-size: 9px;
  font-weight: 500;

  line-height: 1.2;
}


/* =========================================================
   LEGEND
   ========================================================= */

.cx-sector-legend {
  display: flex;

  flex-direction: column;

  min-width: 225px;
}


/* matches button behavior from React component */
.cx-sector-row {
  appearance: none;

  display: flex;

  align-items: center;

  gap: 11px;

  width: 100%;

  margin: 0 -8px;

  padding: 8px;

  border: 0;

  border-radius: 7px;

  background: transparent;

  color: inherit;

  text-align: left;

  font: inherit;

  cursor: default;

  transition:
    opacity 200ms ease,
    background-color 200ms ease,
    transform 200ms ease;
}


.cx-sector-row:hover,
.cx-sector-row:focus-visible {
  background: rgba(255, 255, 255, 0.44);

  outline: none;
}


.cx-sector-row.is-muted {
  opacity: 0.35;
}


.cx-sector-row.is-hot {
  opacity: 1;

  transform: translateX(2px);
}


/* colored square */
.cx-sector-color {
  flex: 0 0 auto;

  width: 9px;
  height: 9px;

  border-radius: 3px;
}


/* signal title */
.cx-sector-label {
  width: 145px;

  overflow: hidden;

  color: rgba(17, 17, 19, 0.66);

  font-size: 12px;

  line-height: 1.25;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* percentage */
.cx-sector-value {
  margin-left: auto;

  color: rgba(17, 17, 19, 0.48);

  font-size: 11px;

  font-variant-numeric: tabular-nums;

  white-space: nowrap;
}


/* =========================================================
   ENTRANCE ANIMATION
   ========================================================= */

.cx-sector-donut {
  opacity: 0;

  transform: translateY(12px);

  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}


.cx-sector-donut.is-ready {
  opacity: 1;

  transform: translateY(0);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

  .cx-donut-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(390px, 0.9fr);

    gap: 45px;
  }


  .cx-sector-donut {
    gap: 25px;
  }


  .cx-sector-ring {
    width: 170px;
    height: 170px;
  }


  .cx-sector-svg {
    width: 170px;
    height: 170px;
  }


  .cx-sector-legend {
    min-width: 205px;
  }


  .cx-sector-label {
    width: 128px;
  }

}


@media (max-width: 850px) {

  .cx-donut-section {
    padding: 58px 0;
  }


  .cx-donut-grid {
    grid-template-columns: 1fr;

    gap: 45px;
  }


  .cx-donut-copy {
    max-width: 100%;
  }


  .cx-donut-intro {
    max-width: 100%;
  }


  .cx-donut-section .seo-pill-card {
    max-width: 100%;
  }


  .cx-donut-visual {
    min-height: auto;
  }

}


@media (max-width: 600px) {

  .cx-donut-section {
    padding: 48px 0;
  }


  .cx-donut-copy h2 {
    font-size: 34px;

    line-height: 1.07;
  }


  .cx-donut-intro {
    font-size: 14px;
  }


  .cx-sector-donut {
    flex-direction: column;

    align-items: center;

    width: 100%;

    gap: 25px;
  }


  .cx-sector-ring {
    width: 180px;
    height: 180px;
  }


  .cx-sector-svg {
    width: 180px;
    height: 180px;
  }


  .cx-sector-legend {
    width: min(100%, 310px);

    min-width: 0;
  }


  .cx-sector-label {
    flex: 1;

    width: auto;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .cx-sector-donut,
  .cx-sector-arc,
  .cx-sector-row {
    transition: none !important;

    animation: none !important;
  }

}
/* =========================================================
   CLICKRONIX - INTELLIGENCE GROWTH SECTION
   Inspired by the reference design
   Background: #151618
   Accent: #ff570b
   ========================================================= */

.cx-intelligence-growth-section {
  background: #151618;
  padding: 90px 0;
  overflow: hidden;
  position: relative;
}

.cx-intelligence-growth-section .container {
  position: relative;
  z-index: 2;
}

.cx-intelligence-growth-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  align-items: start;
  gap: 48px;
}

/* =========================
   LEFT
   ========================= */

.cx-intelligence-growth-left {
  min-width: 0;
}

.cx-intelligence-kicker {
  display: inline-block;
  margin-bottom: 16px;
  color: #ff570b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cx-intelligence-growth-left h2 {
  margin: 0 0 34px;
  max-width: 560px;
  color: #f3f0ea;
  font-size: clamp(40px, 4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 750;
}

.cx-intelligence-graph-wrap {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  align-items: end;
  gap: 18px;
  max-width: 620px;
}

.cx-intelligence-stat {
  padding-bottom: 14px;
}

.cx-intelligence-stat-number {
  color: #ff570b;
  font-size: clamp(62px, 6vw, 92px);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.06em;
}

.cx-intelligence-stat-number span {
  display: inline-block;
  margin-left: 8px;
  color: rgba(243, 240, 234, 0.78);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.cx-intelligence-stat p {
  margin: 14px 0 0;
  max-width: 150px;
  color: rgba(243, 240, 234, 0.75);
  font-size: 13px;
  line-height: 1.55;
}

/* =========================
   GRAPH
   ========================= */

.cx-intelligence-graph {
  position: relative;
  height: 270px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  padding: 16px 12px 30px 18px;
}

.cx-graph-grid {
  position: absolute;
  inset: 0 0 30px 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 100% 25%, 20% 100%;
  pointer-events: none;
}

.cx-graph-bars {
  position: absolute;
  inset: 20px 10px 30px 20px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.cx-bar {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: end;
  height: 100%;
}

.cx-bar-fill {
  display: block;
  width: 100%;
  border-radius: 6px 6px 0 0;
  background:
    linear-gradient(
      180deg,
      rgba(255, 87, 11, 0.94) 0%,
      rgba(255, 87, 11, 0.55) 68%,
      rgba(255, 87, 11, 0.16) 100%
    );
  box-shadow:
    0 0 0 1px rgba(255, 87, 11, 0.22) inset,
    0 0 26px rgba(255, 87, 11, 0.10);
}

.cx-bar-1 .cx-bar-fill { height: 34%; }
.cx-bar-2 .cx-bar-fill { height: 45%; }
.cx-bar-3 .cx-bar-fill { height: 58%; }
.cx-bar-4 .cx-bar-fill { height: 72%; }
.cx-bar-5 .cx-bar-fill { height: 88%; }

.cx-graph-line {
  position: absolute;
  inset: 0 0 30px 0;
  pointer-events: none;
}

.cx-graph-line svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cx-graph-line polyline {
  fill: none;
  stroke: #ff570b;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(255, 87, 11, 0.18));
}

.cx-graph-labels {
  position: absolute;
  left: 20px;
  right: 10px;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.cx-graph-labels span {
  color: rgba(243, 240, 234, 0.62);
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}

/* =========================
   RIGHT PANEL
   ========================= */

.cx-intelligence-growth-right {
  min-width: 0;
}

.cx-intelligence-panel {
  background: #f2efea;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.22);
}

.cx-intelligence-panel-top {
  padding: 24px 28px 18px;
  border-bottom: 1px solid rgba(15, 18, 20, 0.12);
}

.cx-intelligence-panel-top p {
  margin: 0;
  color: #4e4b46;
  font-size: 15px;
  line-height: 1.65;
}

.cx-intelligence-item {
  display: grid;
  grid-template-columns: 38px minmax(150px, 190px) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding: 18px 28px;
  border-bottom: 1px solid rgba(15, 18, 20, 0.12);
}

.cx-intelligence-item:last-child {
  border-bottom: 0;
}

.cx-intelligence-plus {
  color: #55514d;
  font-size: 28px;
  line-height: 1;
  font-weight: 300;
  margin-top: -1px;
}

.cx-intelligence-item-title {
  color: #17191b;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
}

.cx-intelligence-item-copy {
  color: #625d58;
  font-size: 14px;
  line-height: 1.65;
}

/* =========================
   HOVER
   ========================= */

.cx-intelligence-item {
  transition: background-color 220ms ease, transform 220ms ease;
}

.cx-intelligence-item:hover {
  background: rgba(255, 87, 11, 0.05);
}

.cx-intelligence-item:hover .cx-intelligence-plus {
  color: #ff570b;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1100px) {
  .cx-intelligence-growth-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .cx-intelligence-growth-left h2 {
    max-width: 680px;
  }

  .cx-intelligence-graph-wrap {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .cx-intelligence-growth-section {
    padding: 64px 0;
  }

  .cx-intelligence-growth-left h2 {
    font-size: 38px;
  }

  .cx-intelligence-graph-wrap {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .cx-intelligence-stat p {
    max-width: 100%;
  }

  .cx-intelligence-graph {
    height: 240px;
  }

  .cx-intelligence-item {
    grid-template-columns: 28px 1fr;
    gap: 12px;
  }

  .cx-intelligence-item-copy {
    grid-column: 2 / 3;
  }
}

@media (max-width: 520px) {
  .cx-intelligence-growth-left h2 {
    font-size: 32px;
  }

  .cx-intelligence-panel-top,
  .cx-intelligence-item {
    padding-left: 18px;
    padding-right: 18px;
  }

  .cx-graph-labels span {
    font-size: 9px;
  }
}
/* =========================================================
   DATA PROCESSING POLICY — ONLY THE 2 SCREENSHOT SECTIONS
   ========================================================= */

/* 1. Legal content section */
.cx-page-data-processing-policy main > .section:first-of-type {
  background: #fff4ef !important;
}

/* Keep legal content itself transparent */
.cx-page-data-processing-policy main > .section:first-of-type .legal {
  background: transparent !important;
}


/* 2. CTA section shown in screenshot */
.cx-page-data-processing-policy .cta-panel {
  background: #fff4ef !important;
}


/* If the outer CTA section is also gray */
.cx-page-data-processing-policy .section:has(.cta-panel) {
  background: #fff4ef !important;
}


/* Remove possible gray pseudo overlays */
.cx-page-data-processing-policy main > .section:first-of-type::before,
.cx-page-data-processing-policy main > .section:first-of-type::after,
.cx-page-data-processing-policy .section:has(.cta-panel)::before,
.cx-page-data-processing-policy .section:has(.cta-panel)::after {
  background: transparent !important;
}
/* =========================================================
   DATA PROCESSING POLICY
   Change ONLY the legal section + CTA section to #fff4ef
   ========================================================= */

/* 1) Legal content section */
.cx-page-data-processing-policy main > .section:nth-of-type(1) {
  background: #fff4ef !important;
}

/* Inner legal wrapper */
.cx-page-data-processing-policy main > .section:nth-of-type(1) .container.legal,
.cx-page-data-processing-policy main > .section:nth-of-type(1) .legal {
  background: transparent !important;
}

/* 2) CTA section */
.cx-page-data-processing-policy .cta-panel,
.cx-page-data-processing-policy .cta-panel.reveal {
  background: #fff4ef !important;
}

/* CTA outer section */
.cx-page-data-processing-policy .data-processing-analysis-section + .section {
  background: #fff4ef !important;
}

/* Remove any gray overlay/pseudo backgrounds */
.cx-page-data-processing-policy main > .section:nth-of-type(1)::before,
.cx-page-data-processing-policy main > .section:nth-of-type(1)::after,
.cx-page-data-processing-policy .data-processing-analysis-section + .section::before,
.cx-page-data-processing-policy .data-processing-analysis-section + .section::after,
.cx-page-data-processing-policy .cta-panel::before,
.cx-page-data-processing-policy .cta-panel::after {
  background: transparent !important;
}
/* Legal content section background */
.cx-page-data-processing-policy main > .section:nth-of-type(1) {
  background: #fff4ef !important;
}

/* Keep inner legal wrapper clean */
.cx-page-data-processing-policy main > .section:nth-of-type(1) .container.legal,
.cx-page-data-processing-policy main > .section:nth-of-type(1) .legal {
  background: transparent !important;
}
.cx-page-data-processing-policy main > .section:nth-of-type(1)::before,
.cx-page-data-processing-policy main > .section:nth-of-type(1)::after {
  background: transparent !important;
}
/* =========================================================
   DATA PROCESSING POLICY
   EXACT LEGAL SECTION BACKGROUND FIX
   Roles → Audit Information
   ========================================================= */

html body.cx-page-data-processing-policy
main > section.page-hero + section.section {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}

/* Inner legal container */
html body.cx-page-data-processing-policy
main > section.page-hero + section.section > .container.legal {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}

/* Remove any overlay */
html body.cx-page-data-processing-policy
main > section.page-hero + section.section::before,
html body.cx-page-data-processing-policy
main > section.page-hero + section.section::after,
html body.cx-page-data-processing-policy
main > section.page-hero + section.section > .container.legal::before,
html body.cx-page-data-processing-policy
main > section.page-hero + section.section > .container.legal::after {
    background: transparent !important;
    background-image: none !important;
}
/* =========================================================
   COOKIE POLICY — EXACT GREY TO #FFF4EF FIX
   ========================================================= */

/* 1) Legal content section:
   1. What cookies are -> 8. Changes and contact
*/
html body.cx-page-cookie-policy
main > section.page-hero + section.section {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}

/* Inner legal container */
html body.cx-page-cookie-policy
main > section.page-hero + section.section > .container.legal {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}

/* Effective / updated bar */
html body.cx-page-cookie-policy
main > section.page-hero + section.section .legal-meta {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* 2) Transparent traffic protection CTA section */
html body.cx-page-cookie-policy
.cookie-decisions-section + section.section {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}

/* CTA panel itself */
html body.cx-page-cookie-policy
.cookie-decisions-section + section.section .cta-panel {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* Remove any grey overlays */
html body.cx-page-cookie-policy
main > section.page-hero + section.section::before,
html body.cx-page-cookie-policy
main > section.page-hero + section.section::after,
html body.cx-page-cookie-policy
.cookie-decisions-section + section.section::before,
html body.cx-page-cookie-policy
.cookie-decisions-section + section.section::after,
html body.cx-page-cookie-policy
.cookie-decisions-section + section.section .cta-panel::before,
html body.cx-page-cookie-policy
.cookie-decisions-section + section.section .cta-panel::after {
    background: transparent !important;
    background-image: none !important;
}
/* =========================================================
   COOKIE POLICY — COOKIE DECISION FRAMEWORK BACKGROUND
   ========================================================= */

html body.cx-page-cookie-policy
section.cookie-decisions-section {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}

/* Remove any grey/gradient overlays */
html body.cx-page-cookie-policy
section.cookie-decisions-section::before,
html body.cx-page-cookie-policy
section.cookie-decisions-section::after {
    background: transparent !important;
    background-image: none !important;
}
/* =========================================================
   CLICKRONIX — 4 LEGAL PAGES
   GREY/LIGHT SECTIONS -> #FFF4EF
   DARK/BLACK SECTIONS STAY UNCHANGED
   ========================================================= */


/* =========================================================
   1. LEGAL CONTENT SECTION
   The section directly after the page hero
   ========================================================= */

html body.cx-page-privacy-policy
main > .page-hero + .section,

html body.cx-page-terms-and-conditions
main > .page-hero + .section,

html body.cx-page-data-retention-policy
main > .page-hero + .section,

html body.cx-page-data-deletion
main > .page-hero + .section {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* Legal inner wrapper */
html body.cx-page-privacy-policy .container.legal,
html body.cx-page-terms-and-conditions .container.legal,
html body.cx-page-data-retention-policy .container.legal,
html body.cx-page-data-deletion .container.legal {
    background: transparent !important;
    background-image: none !important;
}


/* Effective / updated bar */
html body.cx-page-privacy-policy .legal-meta,
html body.cx-page-terms-and-conditions .legal-meta,
html body.cx-page-data-retention-policy .legal-meta,
html body.cx-page-data-deletion .legal-meta {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* =========================================================
   2. DATA RETENTION INFOGRAPHIC
   This is already a LIGHT section, so make it cream
   ========================================================= */

html body.cx-page-data-retention-policy
.cx-infographic-tower {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* =========================================================
   3. DATA DELETION CIRCLE FLOW
   Light section only
   ========================================================= */

html body.cx-page-data-deletion
.cx-infographic-circle-flow {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* =========================================================
   4. TERMS CIRCLE FLOW
   Light section only
   ========================================================= */

html body.cx-page-terms-and-conditions
.cx-infographic-circle-flow {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* =========================================================
   5. PRIVACY PUZZLE SECTION
   Light section only
   ========================================================= */

html body.cx-page-privacy-policy
.privacy-puzzle-section {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* =========================================================
   6. TRANSPARENT TRAFFIC PROTECTION CTA
   Change only the light outer section and light CTA panel
   ========================================================= */

/* Privacy */
html body.cx-page-privacy-policy
.privacy-puzzle-section + .section,

html body.cx-page-privacy-policy
.privacy-puzzle-section + .section .cta-panel,

/* Terms */
html body.cx-page-terms-and-conditions
.cx-infographic-circle-flow + .section,

html body.cx-page-terms-and-conditions
.cx-infographic-circle-flow + .section .cta-panel,

/* Retention */
html body.cx-page-data-retention-policy
.cx-infographic-tower + .section,

html body.cx-page-data-retention-policy
.cx-infographic-tower + .section .cta-panel,

/* Deletion */
html body.cx-page-data-deletion
.cx-infographic-circle-flow + .section,

html body.cx-page-data-deletion
.cx-infographic-circle-flow + .section .cta-panel {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* =========================================================
   7. PRODUCT FRAMEWORK LIGHT SECTIONS
   Privacy + Retention
   ========================================================= */

html body.cx-page-privacy-policy
.section:has(.cx-vector-grid),

html body.cx-page-data-retention-policy
.section:has(.cx-vector-grid) {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}


/* Keep individual cards white */
html body.cx-page-privacy-policy .cx-vector-card,
html body.cx-page-data-retention-policy .cx-vector-card {
    background: #ffffff !important;
}


/* =========================================================
   8. VERY IMPORTANT:
   DO NOT TOUCH DARK SECTIONS
   ========================================================= */

html body.cx-page-privacy-policy
.section.alt,

html body.cx-page-privacy-policy
.premium-flat-dark,

html body.cx-page-privacy-policy
.cx-final-cta,

html body.cx-page-terms-and-conditions
.section.alt,

html body.cx-page-terms-and-conditions
.premium-flat-dark,

html body.cx-page-terms-and-conditions
.cx-final-cta,

html body.cx-page-data-retention-policy
.section.alt,

html body.cx-page-data-retention-policy
.premium-flat-dark,

html body.cx-page-data-retention-policy
.cx-final-cta,

html body.cx-page-data-deletion
.section.alt,

html body.cx-page-data-deletion
.premium-flat-dark,

html body.cx-page-data-deletion
.cx-final-cta {
    /* intentionally no background override */
}
/* =========================================================
   PRICING PAGE
   INCLUDED PRODUCT CAPABILITIES SECTION
   Outer background -> #fff4ef
   Keep inner dark panel unchanged
   ========================================================= */

/* Outer section only */
html body.cx-page-pricing
main > section.section:has(.plan-comparison-panel) {
    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;
}

/* Keep the dark inner card exactly dark */
html body.cx-page-pricing
.plan-comparison-panel {
    background: linear-gradient(
        145deg,
        #17181b,
        #202126
    ) !important;

    border: 1px solid rgba(255,255,255,.09) !important;
}

/* Remove possible gray overlay from outer section */
html body.cx-page-pricing
main > section.section:has(.plan-comparison-panel)::before,
html body.cx-page-pricing
main > section.section:has(.plan-comparison-panel)::after {
    background: transparent !important;
    background-image: none !important;
}

/* Current disclosure section */
.cx-page-subprocessors main > section:nth-of-type(2) {
    background: #fff4ef !important;
}

/* Transparent traffic protection CTA section */
.cx-page-subprocessors main > section:nth-of-type(4) {
    background: #fff4ef !important;
}

.cx-page-subprocessors main > section:nth-of-type(2) > .container,
.cx-page-subprocessors main > section:nth-of-type(4) > .container {
    background: transparent !important;
}

.cx-page-subprocessors main > section:nth-of-type(4) .cta-panel {
    background: transparent !important;
}
/* =========================================================
   CLICKRONIX HOMEPAGE
   PAID TRAFFIC SIGNAL COMPARISON
   REFERENCE-STYLE DESIGN
   ========================================================= */


.cx-priority-section {
    position: relative;
    overflow: hidden;

    width: 100%;

    padding: 90px 0 98px;

    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;

    color: #fff4ef;
}


/* subtle texture */
.cx-priority-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.18;

    background-image:
        radial-gradient(
            rgba(20, 20, 22, 0.18) 0.55px,
            transparent 0.55px
        );

    background-size: 4px 4px;
}



/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.cx-priority-container {
    position: relative;
    z-index: 2;

    width: min(calc(100% - 80px), 1320px) !important;
    max-width: 1320px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: grid;

    grid-template-columns:
        340px
        minmax(0, 1fr);

    gap: 68px;

    align-items: center;
}



/* =========================================================
   LEFT COLUMN
   ========================================================= */

.cx-priority-copy {
    width: 100%;
    max-width: 340px;
}


.cx-priority-number {
    display: grid;

    width: 26px;
    height: 26px;

    place-items: center;

    margin-bottom: 28px;

    border: 1px solid #aaa8a5;
    border-radius: 50%;

    color: #1c1d20;

    font-size: 9px;
    line-height: 1;

    font-weight: 700;
}



/* KICKER */

.cx-priority-kicker {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    color: #ff5c0a !important;

    font-size: 10px !important;
    line-height: 1;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.18em;
}


.cx-priority-kicker::before {
    content: "";

    width: 27px;
    height: 2px;

    flex: 0 0 27px;

    background: #ff5c0a;
}



/* MAIN HEADING */

.cx-priority-copy h2 {
    margin: 0 0 24px !important;

    max-width: 335px;

    color: #111214 !important;

    font-size:
        clamp(
            36px,
            3.05vw,
            47px
        ) !important;

    line-height: 0.995 !important;

    font-weight: 730 !important;

    letter-spacing: -0.048em !important;
}



/* DESCRIPTION */

.cx-priority-description {
    max-width: 320px;

    margin: 0 !important;

    color: #62646c !important;

    font-size: 13px !important;

    line-height: 1.72 !important;
}



/* DISCLAIMER */

.cx-priority-disclaimer {
    max-width: 315px;

    margin: 24px 0 0 !important;

    color: #90939a !important;

    font-size: 10px !important;

    line-height: 1.55 !important;
}



/* =========================================================
   RIGHT SIDE
   ========================================================= */

.cx-priority-chart-area {
    width: 100%;
    min-width: 0;
}



/* =========================================================
   LEGEND
   ========================================================= */

.cx-priority-legend {
    display: flex;

    align-items: center;

    gap: 30px;

    margin:
        0
        0
        37px
        4px;
}


.cx-priority-legend span {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #202125;

    font-size: 11px;

    line-height: 1;

    font-weight: 600;
}


.cx-priority-legend i {
    width: 8px;
    height: 8px;

    display: block;

    border-radius: 50%;
}


.cx-priority-legend .orange {
    background: #ff5a0a;
}


.cx-priority-legend .black {
    background: #18191c;
}



/* =========================================================
   THREE CHART GROUPS
   ========================================================= */

.cx-priority-charts {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    align-items: end;

    column-gap: 36px;
}


.cx-priority-chart-group {
    width: 100%;
    min-width: 0;
}



/* =========================================================
   BAR WRAPPER
   ========================================================= */

.cx-priority-bars {
    position: relative;

    height: 285px;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    align-items: end;

    gap: 10px;

    border-bottom:
        1px solid rgba(17, 18, 20, 0.30);
}



/* middle horizontal chart line */

.cx-priority-bars::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: 53%;

    height: 1px;

    background:
        rgba(17, 18, 20, 0.07);

    z-index: 5;

    pointer-events: none;
}



/* =========================================================
   BAR COLUMN
   ========================================================= */

.cx-priority-bar-column {
    position: relative;

    height: 100%;

    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;
}



/* =========================================================
   PERCENTAGE
   ========================================================= */

.cx-priority-value {
    display: block;

    margin:
        0
        0
        8px;

    color: #111214 !important;

    font-size:
        clamp(
            31px,
            2.7vw,
            40px
        );

    line-height: 0.95;

    font-weight: 500;

    letter-spacing: -0.05em;
}



/* =========================================================
   BARS
   ========================================================= */

.cx-priority-bar {
    position: relative;

    width: 100%;

    height: var(--bar-height);

    min-height: 30px;

    overflow: hidden;

    border: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;
}



/* ORANGE */

.cx-priority-bar.orange-bar {
    background:
        linear-gradient(
            to bottom,

            #ff5707 0%,
            #ff5707 47%,

            #ff6515 57%,

            #ff7936 68%,

            rgba(255, 115, 54, 0.68) 77%,

            rgba(255, 169, 125, 0.34) 89%,

            rgba(255, 250, 247, 0.18) 100%
        );
}


.cx-priority-bar.orange-bar::after {
    content: "";

    position: absolute;

    inset:
        51%
        0
        0;

    background:
        linear-gradient(
            to bottom,
            rgba(255, 91, 8, 0),
            rgba(255, 255, 255, 0.72)
        );

    pointer-events: none;
}



/* DARK */

.cx-priority-bar.black-bar {
    background:
        linear-gradient(
            to bottom,

            #1b1c1f 0%,
            #1b1c1f 45%,

            #242529 56%,

            #3d3e42 67%,

            #747579 79%,

            #b0adae 90%,

            rgba(255, 250, 247, 0.30) 100%
        );
}


.cx-priority-bar.black-bar::after {
    content: "";

    position: absolute;

    inset:
        52%
        0
        0;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0),
            rgba(255, 255, 255, 0.64)
        );

    pointer-events: none;
}



/* =========================================================
   CAPTIONS
   ========================================================= */

.cx-priority-chart-copy {
    padding-top: 17px;

    text-align: center;
}


.cx-priority-chart-copy h3 {
    margin:
        0
        0
        8px !important;

    color: #151619 !important;

    font-size: 12px !important;

    line-height: 1.2 !important;

    font-weight: 800 !important;

    letter-spacing: -0.015em !important;
}


.cx-priority-chart-copy p {
    width: 100%;
    max-width: 235px;

    margin: 0 auto !important;

    color: #777a82 !important;

    font-size: 10px !important;

    line-height: 1.48 !important;
}



/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

    .cx-priority-section {
        min-height: 590px;

        display: flex;
        align-items: center;
    }


    .cx-priority-container {
        gap: 72px;
    }

}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .cx-priority-section {
        padding: 76px 0;
    }


    .cx-priority-container {
        width:
            min(
                calc(100% - 48px),
                1320px
            ) !important;

        grid-template-columns:
            275px
            minmax(0, 1fr);

        gap: 42px;
    }


    .cx-priority-copy h2 {
        font-size: 36px !important;
    }


    .cx-priority-charts {
        column-gap: 18px;
    }


    .cx-priority-bars {
        height: 245px;

        gap: 6px;
    }


    .cx-priority-value {
        font-size: 28px;
    }


    .cx-priority-bar {
        height:
            calc(
                var(--bar-height) * 0.82
            );
    }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .cx-priority-section {
        padding:
            64px
            0
            72px;
    }


    .cx-priority-container {
        width:
            min(
                calc(100% - 34px),
                1320px
            ) !important;

        display: block;
    }


    .cx-priority-copy {
        max-width: 520px;

        margin-bottom: 55px;
    }


    .cx-priority-copy h2 {
        max-width: 420px;

        font-size:
            clamp(
                36px,
                10vw,
                48px
            ) !important;
    }


    .cx-priority-description,
    .cx-priority-disclaimer {
        max-width: 470px;
    }


    .cx-priority-legend {
        flex-wrap: wrap;

        gap:
            14px
            22px;

        margin-bottom: 36px;
    }


    .cx-priority-charts {
        grid-template-columns: 1fr;

        gap: 52px;
    }


    .cx-priority-bars {
        width:
            min(
                100%,
                340px
            );

        height: 270px;

        margin: 0 auto;

        gap: 10px;
    }


    .cx-priority-chart-copy {
        max-width: 340px;

        margin: 0 auto;
    }


    .cx-priority-value {
        font-size: 34px;
    }

}



/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    .cx-priority-copy h2 {
        font-size: 38px !important;
    }


    .cx-priority-bars {
        height: 250px;
    }


    .cx-priority-value {
        font-size: 30px;
    }


    .cx-priority-legend span {
        font-size: 10px;
    }

}
/* ============================================
   REMOVE GRADIENT — DETECTION MODEL SECTION
   ============================================ */

body.cx-page-index
section.seo-authority-section.seo-orange-wash.cx-section-2 {
    background: #171719 !important;
    background-color: #171719 !important;
    background-image: none !important;
}
body.cx-page-index
section.seo-authority-section.seo-orange-wash.cx-section-2::before,
body.cx-page-index
section.seo-authority-section.seo-orange-wash.cx-section-2::after {
    background: transparent !important;
    background-image: none !important;
}
/* =========================================================
   CLICKRONIX — MULTI-SIGNAL HUB
   FINAL VERSION
   BACKGROUND: #FFF4EF
   6 CARDS + 6 SIGNAL LINES + ANIMATION
   ========================================================= */


/* =========================================================
   SECTION
   ========================================================= */

.cx-signal-hub-section {
    --cx-orange: #ff6600;
    --cx-orange-deep: #ff431f;

    --cx-black: #161719;
    --cx-text: #74767e;

    --cx-line: #d2d3d7;

    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        clamp(82px, 7vw, 110px)
        0
        clamp(94px, 8vw, 128px);

    background: #fff4ef !important;
    background-color: #fff4ef !important;
    background-image: none !important;

    color: var(--cx-black);
}


/* prevent old overlays */

.cx-signal-hub-section::before,
.cx-signal-hub-section::after {
    content: none !important;
    display: none !important;

    background: transparent !important;
    background-image: none !important;
}



/* =========================================================
   CONTAINER
   ========================================================= */

.cx-signal-hub-container {
    position: relative;

    z-index: 2;

    width:
        min(
            calc(100% - 64px),
            1320px
        ) !important;

    max-width: 1320px !important;

    margin: 0 auto !important;

    padding: 0 !important;
}



/* =========================================================
   HEADER
   ========================================================= */

.cx-signal-hub-head {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, .70fr);

    align-items: end;

    gap:
        clamp(
            60px,
            8vw,
            135px
        );

    margin-bottom: 58px;
}


.cx-signal-hub-head-left {
    max-width: 690px;
}


.cx-signal-hub-kicker {
    display: block;

    margin: 0 0 15px;

    color: var(--cx-orange) !important;

    font-size: 10px !important;

    line-height: 1;

    font-weight: 800;

    letter-spacing: .18em;

    text-transform: uppercase;
}


.cx-signal-hub-head h2 {
    max-width: 660px;

    margin: 0 !important;

    color: #151517 !important;

    font-size:
        clamp(
            37px,
            3.5vw,
            54px
        ) !important;

    line-height: 1 !important;

    font-weight: 720 !important;

    letter-spacing: -.047em !important;
}


.cx-signal-hub-intro {
    max-width: 520px;

    margin: 0 !important;

    padding: 0 0 4px !important;

    color: #746f6b !important;

    font-size: 14px !important;

    line-height: 1.72 !important;
}



/* =========================================================
   NETWORK STAGE
   ========================================================= */

.cx-signal-stage {
    position: relative;

    width:
        min(
            100%,
            1240px
        );

    height: 720px;

    margin: 0 auto;

    isolation: isolate;

    background: transparent !important;
}



/* =========================================================
   CONNECTION SVG
   ========================================================= */

.cx-signal-connections {
    position: absolute;

    inset: 0;

    z-index: 1;

    width: 100%;
    height: 100%;

    overflow: visible;

    pointer-events: none;
}


/* six static connector paths */

.cx-signal-base-path {
    fill: none;

    stroke: url(#cxSignalBaseGradient);

    stroke-width: 1.55;

    stroke-linecap: round;

    stroke-linejoin: round;

    opacity: .95;

    vector-effect: non-scaling-stroke;
}


/* junction dots */

.cx-signal-junction {
    fill: #d2cbc7;

    stroke: #fff4ef;

    stroke-width: 2;

    transform-origin: center;

    vector-effect: non-scaling-stroke;
}



/* =========================================================
   ORANGE TRAVELLING SIGNALS
   ========================================================= */

.cx-signal-pulse {
    fill: none;

    stroke: url(#cxSignalPulseGradient);

    stroke-width: 3;

    stroke-linecap: round;

    stroke-linejoin: round;

    stroke-dasharray:
        10
        90;

    stroke-dashoffset: 100;

    opacity: 0;

    filter: url(#cxSignalGlow);

    vector-effect: non-scaling-stroke;
}


.cx-signal-hub-section.is-active
.cx-signal-pulse {
    opacity: 1;

    animation:
        cxSignalTravel
        3.3s
        linear
        infinite;
}



/* SIX SIGNAL DELAYS */

.cx-signal-hub-section.is-active
.cx-pulse-1 {
    animation-delay: 1s;
}

.cx-signal-hub-section.is-active
.cx-pulse-2 {
    animation-delay: 1.18s;
}

.cx-signal-hub-section.is-active
.cx-pulse-3 {
    animation-delay: 1.36s;
}

.cx-signal-hub-section.is-active
.cx-pulse-4 {
    animation-delay: 1.09s;
}

.cx-signal-hub-section.is-active
.cx-pulse-5 {
    animation-delay: 1.27s;
}

.cx-signal-hub-section.is-active
.cx-pulse-6 {
    animation-delay: 1.45s;
}


@keyframes cxSignalTravel {

    from {
        stroke-dashoffset: 100;
    }

    to {
        stroke-dashoffset: 0;
    }

}



/* =========================================================
   CARDS
   ========================================================= */

.cx-signal-card {
    position: absolute;

    z-index: 5;

    width: 325px;

    min-height: 178px;

    box-sizing: border-box;

    padding:
        25px
        25px
        22px;

    border:
        1px solid
        rgba(17, 17, 20, .055);

    border-radius: 23px;

    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;

    box-shadow:
        0 7px 0 rgba(17, 17, 20, .035),
        0 14px 24px rgba(17, 17, 20, .055),
        0 28px 48px rgba(17, 17, 20, .035),
        inset 0 1px 0 rgba(255,255,255,.98);

    transition:
        transform .42s cubic-bezier(.16,1,.3,1),
        box-shadow .42s ease,
        border-color .42s ease;
}



/* =========================================================
   CARD POSITIONS
   about 65px vertical space between cards
   ========================================================= */


/* LEFT */

.cx-signal-card-l1 {
    left: 0;
    top: 25px;
}

.cx-signal-card-l2 {
    left: 0;
    top: 270px;
}

.cx-signal-card-l3 {
    left: 0;
    top: 515px;
}


/* RIGHT */

.cx-signal-card-r1 {
    right: 0;
    top: 25px;
}

.cx-signal-card-r2 {
    right: 0;
    top: 270px;
}

.cx-signal-card-r3 {
    right: 0;
    top: 515px;
}



/* =========================================================
   CARD HOVER
   ========================================================= */

.cx-signal-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(255, 102, 0, .18);

    box-shadow:
        0 8px 0 rgba(17,17,20,.03),
        0 21px 34px rgba(17,17,20,.085),
        0 35px 65px rgba(17,17,20,.045),
        0 0 35px rgba(255,102,0,.055),
        inset 0 1px 0 #ffffff;
}



/* =========================================================
   ICON BOX
   ========================================================= */

.cx-signal-icon {
    position: relative;

    display: grid;

    width: 47px;
    height: 47px;

    place-items: center;

    margin-bottom: 24px;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #2c2c2f 0%,
            #19191b 100%
        );

    box-shadow:
        0 5px 0 rgba(0,0,0,.16),
        0 10px 16px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.13);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.cx-signal-card:hover
.cx-signal-icon {
    transform:
        translateY(-3px);

    box-shadow:
        0 6px 0 rgba(0,0,0,.14),
        0 14px 22px rgba(0,0,0,.19),
        0 0 22px rgba(255,102,0,.09),
        inset 0 1px 0 rgba(255,255,255,.16);
}


.cx-signal-icon svg {
    display: block;

    width: 23px;
    height: 23px;

    fill: none;

    stroke: #ffffff;

    stroke-width: 1.65;

    stroke-linecap: round;

    stroke-linejoin: round;
}



/* =========================================================
   CARD TEXT
   ========================================================= */

.cx-signal-card-copy > span {
    display: block;

    margin:
        0
        0
        8px;

    color:
        var(--cx-orange) !important;

    font-size: 9px !important;

    line-height: 1;

    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.cx-signal-card h3 {
    margin:
        0
        0
        8px !important;

    color: #161719 !important;

    font-size: 17px !important;

    line-height: 1.2 !important;

    font-weight: 720 !important;

    letter-spacing: -.025em !important;
}


.cx-signal-card p {
    margin: 0 !important;

    max-width: 275px;

    color: #77716d !important;

    font-size: 12px !important;

    line-height: 1.55 !important;
}



/* =========================================================
   CENTER ENGINE WRAPPER
   ========================================================= */

.cx-signal-core {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 8;

    display: grid;

    width: 205px;
    height: 205px;

    place-items: center;

    transform:
        translate(
            -50%,
            -50%
        );
}



/* =========================================================
   CENTER GLOW
   ========================================================= */

.cx-signal-core-glow {
    position: absolute;

    z-index: -2;

    width: 175px;
    height: 175px;

    border-radius: 50%;

    background:
        rgba(
            255,
            102,
            0,
            .23
        );

    opacity: .66;

    filter: blur(42px);

    animation:
        cxCoreGlow
        3.4s
        ease-in-out
        infinite;
}


@keyframes cxCoreGlow {

    0%,
    100% {
        transform: scale(.85);
        opacity: .40;
    }

    50% {
        transform: scale(1.13);
        opacity: .78;
    }

}



/* =========================================================
   CENTER ORBIT
   ========================================================= */

.cx-signal-core-orbit {
    position: absolute;

    width: 181px;
    height: 181px;

    border:
        1px solid
        rgba(255, 102, 0, .12);

    border-radius: 50%;

    animation:
        cxCoreOrbit
        15s
        linear
        infinite;
}


.cx-signal-core-orbit::before {
    content: "";

    position: absolute;

    top: -4px;

    left: 50%;

    width: 8px;
    height: 8px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        var(--cx-orange);

    box-shadow:
        0 0 16px
        rgba(255,102,0,.50);
}


@keyframes cxCoreOrbit {

    to {
        transform: rotate(360deg);
    }

}



/* =========================================================
   ORANGE CENTER CARD
   ========================================================= */

.cx-signal-core-card {
    position: relative;

    display: flex;

    width: 162px;
    height: 130px;

    box-sizing: border-box;

    flex-direction: column;

    justify-content: center;
    align-items: center;

    border: 0;

    border-radius: 23px;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #ff6b1b 0%,
            #ff4f16 50%,
            #ff6600 100%
        );

    box-shadow:
        0 7px 0 rgba(198,60,0,.08),
        0 18px 29px rgba(255,102,0,.30),
        0 27px 48px rgba(255,102,0,.22),
        inset 0 1px 0 rgba(255,255,255,.25);

    animation:
        cxCoreFloat
        4.4s
        ease-in-out
        infinite;
}


@keyframes cxCoreFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

}



/* =========================================================
   CENTER TEXT
   ========================================================= */

.cx-signal-core-card strong {
    display: block;

    margin-top: 8px;

    color: #ffffff !important;

    font-size: 20px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -.035em;
}


.cx-signal-core-card small {
    display: block;

    margin-top: 5px;

    color:
        rgba(
            255,
            255,
            255,
            .80
        ) !important;

    font-size: 9px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;
}



/* =========================================================
   CENTER MARK
   ========================================================= */

.cx-signal-core-mark {
    position: relative;

    width: 54px;
    height: 32px;
}


.cx-signal-core-mark span {
    position: absolute;

    top: 0;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.96);
}


.cx-signal-core-mark span:first-child {
    left: 3px;
}


.cx-signal-core-mark span:last-child {
    right: 3px;
}


.cx-signal-core-mark span:last-child::after {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: 50%;

    background:
        rgba(255,102,0,.88);

    transform:
        translateX(-14px);
}



/* =========================================================
   INITIAL ENTRY ANIMATION
   ========================================================= */

.cx-signal-card {
    opacity: 0;
}


.cx-signal-card-l1,
.cx-signal-card-l2,
.cx-signal-card-l3 {
    transform:
        translateX(-28px)
        translateY(8px);
}


.cx-signal-card-r1,
.cx-signal-card-r2,
.cx-signal-card-r3 {
    transform:
        translateX(28px)
        translateY(8px);
}


.cx-signal-core {
    opacity: 0;
}



/* ACTIVE */

.cx-signal-hub-section.is-active
.cx-signal-card {
    opacity: 1;

    transform:
        translate(
            0,
            0
        );

    transition:
        opacity .7s ease,
        transform .9s cubic-bezier(.16,1,.3,1),
        box-shadow .42s ease,
        border-color .42s ease;
}


.cx-signal-hub-section.is-active
.cx-signal-card-l1 {
    transition-delay: .08s;
}


.cx-signal-hub-section.is-active
.cx-signal-card-r1 {
    transition-delay: .15s;
}


.cx-signal-hub-section.is-active
.cx-signal-card-l2 {
    transition-delay: .22s;
}


.cx-signal-hub-section.is-active
.cx-signal-card-r2 {
    transition-delay: .29s;
}


.cx-signal-hub-section.is-active
.cx-signal-card-l3 {
    transition-delay: .36s;
}


.cx-signal-hub-section.is-active
.cx-signal-card-r3 {
    transition-delay: .43s;
}


.cx-signal-hub-section.is-active
.cx-signal-core {
    opacity: 1;

    transition:
        opacity
        .8s
        ease
        .38s;
}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .cx-signal-hub-container {
        width:
            min(
                calc(100% - 44px),
                1320px
            ) !important;
    }


    .cx-signal-stage {
        width: 1240px;

        left: 50%;

        transform:
            translateX(-50%)
            scale(.82);

        transform-origin:
            top center;

        margin-bottom: -125px;
    }

}



/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 900px) {

    .cx-signal-hub-head {
        grid-template-columns: 1fr;

        gap: 22px;

        margin-bottom: 48px;
    }


    .cx-signal-hub-intro {
        max-width: 650px;
    }


    .cx-signal-stage {
        width: 1240px;

        left: 50%;

        transform:
            translateX(-50%)
            scale(.67);

        margin-bottom: -225px;
    }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .cx-signal-hub-section {
        padding:
            68px
            0
            75px;
    }


    .cx-signal-hub-container {
        width:
            min(
                calc(100% - 34px),
                1320px
            ) !important;
    }


    .cx-signal-hub-head {
        margin-bottom: 42px;
    }


    .cx-signal-hub-head h2 {
        max-width: 500px;

        font-size:
            clamp(
                35px,
                10vw,
                46px
            ) !important;
    }


    .cx-signal-hub-intro {
        font-size: 14px !important;
    }


    .cx-signal-stage {
        position: relative;

        left: auto;

        display: grid;

        width: 100%;

        height: auto;

        gap: 22px;

        margin: 0;

        transform: none;
    }


    /*
       SVG connector network is hidden on very small
       mobile because 6 horizontal routes would become
       unreadable.
    */

    .cx-signal-connections {
        display: none;
    }


    .cx-signal-card {
        position: relative !important;

        inset: auto !important;

        width: 100%;

        min-height: 0;

        padding:
            25px
            24px;

        opacity: 1;

        transform: none;
    }


    .cx-signal-core {
        position: relative;

        left: auto;
        top: auto;

        width: 100%;
        height: 185px;

        transform: none;

        opacity: 1;

        order: 4;
    }


    .cx-signal-card-l1 {
        order: 1;
    }


    .cx-signal-card-r1 {
        order: 2;
    }


    .cx-signal-card-l2 {
        order: 3;
    }


    .cx-signal-card-r2 {
        order: 5;
    }


    .cx-signal-card-l3 {
        order: 6;
    }


    .cx-signal-card-r3 {
        order: 7;
    }


    .cx-signal-core-card {
        width: 158px;
        height: 126px;
    }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .cx-signal-pulse,
    .cx-signal-core-glow,
    .cx-signal-core-orbit,
    .cx-signal-core-card {
        animation:
            none !important;
    }


    .cx-signal-card,
    .cx-signal-core {
        opacity: 1 !important;

        transform:
            none !important;
    }

}
/* =========================================
   CLICKRONIX - POPULAR HELP SHORTCUTS
========================================= */

.help-shortcuts-section {
  position: relative;
  width: 100%;
  padding: 72px 20px 86px;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255, 101, 24, 0.07),
      transparent 34%
    ),
    #fff5f0;
  overflow: hidden;
}

.help-shortcuts-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}


/* ===============================
   SECTION HEADER
================================ */

.help-shortcuts-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 34px;
}

.help-shortcuts-eyebrow {
  position: relative;
  display: inline-block;
  padding-left: 27px;

  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1.5px;

  color: #ff6518;
  text-transform: uppercase;
}

.help-shortcuts-eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;

  width: 18px;
  height: 1px;

  background: #ff6518;
  transform: translateY(-50%);
}

.help-shortcuts-heading h2 {
  margin: 8px 0 0;

  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -1.2px;

  color: #141414;
}

.help-shortcuts-heading p {
  max-width: 270px;
  margin: 0;

  font-size: 13px;
  line-height: 1.65;

  color: #757575;
}


/* ===============================
   GRID
================================ */

.help-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}


/* ===============================
   SHORTCUT CARD
================================ */

.help-shortcut-card {
  position: relative;

  min-height: 142px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: 14px;

  padding: 24px 18px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(255, 249, 246, 0.94)
    );

  border: 1px solid rgba(22, 22, 22, 0.10);
  border-radius: 10px;

  box-shadow:
    0 8px 22px rgba(45, 28, 20, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);

  text-decoration: none;

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.help-shortcut-card::before {
  content: "";
  position: absolute;
  inset: 0;

  border-radius: inherit;

  background:
    radial-gradient(
      circle at 50% 100%,
      rgba(255, 101, 24, 0.07),
      transparent 48%
    );

  opacity: 0;
  pointer-events: none;

  transition: opacity 0.25s ease;
}


/* ===============================
   ICON
================================ */

.help-shortcut-icon {
  position: relative;
  z-index: 1;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #ff6518;

  transition:
    transform 0.25s ease,
    color 0.25s ease;
}

.help-shortcut-icon svg {
  width: 34px;
  height: 34px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ===============================
   CARD TEXT
================================ */

.help-shortcut-card > span {
  position: relative;
  z-index: 1;

  display: block;

  font-size: 14px;
  line-height: 1.25;
  font-weight: 600;

  text-align: center;

  color: #171717;

  transition: color 0.25s ease;
}


/* ===============================
   HOVER
================================ */

.help-shortcut-card:hover {
  transform: translateY(-4px);

  border-color: rgba(255, 101, 24, 0.6);

  background: #ffffff;

  box-shadow:
    0 14px 32px rgba(255, 101, 24, 0.10),
    0 4px 12px rgba(20, 20, 20, 0.04);
}

.help-shortcut-card:hover::before {
  opacity: 1;
}

.help-shortcut-card:hover .help-shortcut-icon {
  transform: translateY(-2px) scale(1.06);
  color: #ff5a0a;
}


/* ===============================
   FOCUS / ACCESSIBILITY
================================ */

.help-shortcut-card:focus-visible {
  outline: 2px solid #ff6518;
  outline-offset: 3px;
}


/* ===============================
   TABLET
================================ */

@media (max-width: 991px) {

  .help-shortcuts-section {
    padding: 60px 20px 70px;
  }

  .help-shortcuts-heading {
    align-items: flex-start;
  }

  .help-shortcuts-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}


/* ===============================
   MOBILE
================================ */

@media (max-width: 767px) {

  .help-shortcuts-section {
    padding: 52px 16px 58px;
  }

  .help-shortcuts-heading {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 26px;
  }

  .help-shortcuts-heading p {
    max-width: 100%;
  }

  .help-shortcuts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .help-shortcut-card {
    min-height: 125px;
    padding: 20px 12px;
    gap: 10px;
  }

  .help-shortcut-icon {
    width: 38px;
    height: 38px;
  }

  .help-shortcut-icon svg {
    width: 30px;
    height: 30px;
  }

  .help-shortcut-card > span {
    font-size: 13px;
  }

}


/* ===============================
   SMALL MOBILE
================================ */

@media (max-width: 420px) {

  .help-shortcuts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .help-shortcut-card {
    min-height: 116px;
  }

  .help-shortcuts-heading h2 {
    font-size: 27px;
  }

}

/* =========================================
   CLICKRONIX SUPPORT TICKET FORM
========================================= */

.cxticket-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}

.cxticket-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cxticket-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


/* =========================================
   MODAL CONTAINER
========================================= */

.cxticket-dialog {
  position: relative;
  z-index: 2;

  width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;

  padding: 32px;

  border: 1px solid rgba(255, 102, 0, 0.42);
  border-radius: 20px;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(255, 102, 0, 0.16),
      transparent 35%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(255, 102, 0, 0.06),
      transparent 35%
    ),
    #171719;

  box-shadow:
    0 35px 100px rgba(0, 0, 0, 0.58),
    0 0 60px rgba(255, 102, 0, 0.08);
}


/* =========================================
   HEADER
========================================= */

.cxticket-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 24px;

  margin-bottom: 28px;
}

.cxticket-eyebrow {
  display: block;

  margin-bottom: 8px;

  color: #ff6600;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
}

.cxticket-header h2 {
  margin: 0 0 10px;

  color: #ffffff;

  font-size: 30px;
  line-height: 1.1;
}

.cxticket-header p {
  max-width: 540px;

  margin: 0;

  color: rgba(255, 255, 255, 0.58);

  font-size: 14px;
  line-height: 1.6;
}


/* =========================================
   CLOSE BUTTON
========================================= */

.cxticket-close {
  width: 38px;
  height: 38px;

  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.04);

  color: #ffffff;

  font-size: 25px;
  line-height: 1;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.cxticket-close:hover {
  border-color: rgba(255, 102, 0, 0.55);
  background: rgba(255, 102, 0, 0.08);
  color: #ff6600;
}


/* =========================================
   FORM GRID
========================================= */

.cxticket-form {
  width: 100%;
}

.cxticket-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;
}

.cxticket-field {
  margin-bottom: 18px;
}


/* =========================================
   LABELS
========================================= */

.cxticket-field label {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 8px;

  color: #ffffff;

  font-size: 13px;
  font-weight: 600;
}

.cxticket-field label span {
  color: rgba(255, 255, 255, 0.35);

  font-size: 11px;
  font-weight: 400;
}


/* =========================================
   INPUTS
========================================= */

.cxticket-field input,
.cxticket-field select,
.cxticket-field textarea {
  width: 100%;
  box-sizing: border-box;

  padding: 13px 14px;

  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 10px;

  outline: none;

  background: rgba(255, 255, 255, 0.045);

  color: #ffffff;

  font: inherit;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.cxticket-field input {
  min-height: 46px;
}

.cxticket-field select {
  min-height: 46px;
  color-scheme: dark;
  cursor: pointer;
}

.cxticket-field textarea {
  min-height: 140px;

  resize: vertical;

  line-height: 1.55;
}

.cxticket-field input::placeholder,
.cxticket-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.34);
}

.cxticket-field input:hover,
.cxticket-field select:hover,
.cxticket-field textarea:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.cxticket-field input:focus,
.cxticket-field select:focus,
.cxticket-field textarea:focus {
  border-color: #ff6600;

  background: rgba(255, 102, 0, 0.045);

  box-shadow:
    0 0 0 3px rgba(255, 102, 0, 0.10);
}


/* =========================================
   SECURITY NOTE
========================================= */

.cxticket-security-note {
  padding: 12px 14px;

  border: 1px solid rgba(255, 102, 0, 0.17);
  border-radius: 9px;

  background: rgba(255, 102, 0, 0.045);

  color: rgba(255, 255, 255, 0.55);

  font-size: 12px;
  line-height: 1.55;
}


/* =========================================
   STATUS MESSAGE
========================================= */

.cxticket-status {
  min-height: 22px;

  margin-top: 14px;

  font-size: 13px;
  line-height: 1.5;
}

.cxticket-status.is-success {
  color: #53d98a;
}

.cxticket-status.is-error {
  color: #ff7373;
}


/* =========================================
   BUTTONS
========================================= */

.cxticket-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  gap: 10px;

  margin-top: 16px;
}

.cxticket-cancel,
.cxticket-submit {
  min-height: 44px;

  padding: 0 20px;

  border-radius: 9px;

  font-size: 13px;
  font-weight: 600;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.cxticket-cancel {
  border: 1px solid rgba(255, 255, 255, 0.15);

  background: transparent;

  color: #ffffff;
}

.cxticket-cancel:hover {
  border-color: rgba(255, 255, 255, 0.26);

  background: rgba(255, 255, 255, 0.05);
}

.cxticket-submit {
  border: 1px solid #ff6600;

  background:
    linear-gradient(
      135deg,
      #ff7b19,
      #ff5500
    );

  color: #ffffff;

  box-shadow:
    0 10px 28px rgba(255, 102, 0, 0.22);
}

.cxticket-submit:hover:not(:disabled) {
  transform: translateY(-1px);

  box-shadow:
    0 14px 32px rgba(255, 102, 0, 0.28);
}

.cxticket-submit:disabled {
  opacity: 0.65;
  cursor: wait;
}


/* =========================================
   SCROLLBAR
========================================= */

.cxticket-dialog::-webkit-scrollbar {
  width: 6px;
}

.cxticket-dialog::-webkit-scrollbar-track {
  background: transparent;
}

.cxticket-dialog::-webkit-scrollbar-thumb {
  background: rgba(255, 102, 0, 0.42);
  border-radius: 10px;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

  .cxticket-modal {
    padding: 12px;
    align-items: flex-start;
    overflow-y: auto;
  }

  .cxticket-dialog {
    width: 100%;

    max-height: none;

    margin: 12px 0;

    padding: 22px 18px;

    border-radius: 16px;
  }

  .cxticket-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .cxticket-header {
    gap: 14px;
    margin-bottom: 22px;
  }

  .cxticket-header h2 {
    font-size: 25px;
  }

  .cxticket-header p {
    font-size: 13px;
  }

  .cxticket-field {
    margin-bottom: 15px;
  }

  .cxticket-actions {
    flex-direction: column-reverse;
  }

  .cxticket-cancel,
  .cxticket-submit {
    width: 100%;
  }

}
/* =========================================
   SELECT / DROPDOWN OPTIONS
========================================= */

.cxticket-field select {
  width: 100%;
  min-height: 46px;

  padding: 13px 42px 13px 14px;

  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 10px;

  background-color: #202023;

  color: #ffffff;

  font: inherit;

  outline: none;
  cursor: pointer;

  color-scheme: dark;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image:
    linear-gradient(45deg, transparent 50%, #ffffff 50%),
    linear-gradient(135deg, #ffffff 50%, transparent 50%);

  background-position:
    calc(100% - 18px) 19px,
    calc(100% - 13px) 19px;

  background-size:
    5px 5px,
    5px 5px;

  background-repeat: no-repeat;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}


.cxticket-field select:hover {
  border-color: rgba(255, 255, 255, 0.22);
}


.cxticket-field select:focus {
  border-color: #ff6600;

  background-color: #202023;

  box-shadow:
    0 0 0 3px rgba(255, 102, 0, 0.10);
}


/* =========================================
   DROPDOWN OPTIONS
========================================= */

.cxticket-field select option {
  background: #202023;
  color: #ffffff;

  font-size: 14px;

  padding: 12px;
}


/* Selected option */
.cxticket-field select option:checked {
  background: #ff6600;
  color: #ffffff;
}


/* Disabled placeholder option */
.cxticket-field select option:disabled {
  color: rgba(255, 255, 255, 0.38);
  background: #202023;
}


/* =========================================
   DEPARTMENT + PRIORITY SPECIFIC
========================================= */

#ticketDepartment,
#ticketPriority {
  background-color: #202023;
  color: #ffffff;
}


#ticketDepartment option,
#ticketPriority option {
  background-color: #202023;
  color: #ffffff;
}


/* =========================================
   FIREFOX
========================================= */

@-moz-document url-prefix() {

  .cxticket-field select {
    background-color: #202023;
    color: #ffffff;
  }

  .cxticket-field select option {
    background-color: #202023;
    color: #ffffff;
  }

}
/* =========================================
   REMOVE ALL SHORTCUT GRADIENTS / GLOWS
========================================= */

.help-shortcuts-section {
  background: #fff4ef !important;
}

/* Remove section orange glow */
.help-shortcuts-section::before,
.help-shortcuts-section::after {
  display: none !important;
  content: none !important;
}


/* Solid cards — no gradient */
.help-shortcut-card {
  background: #fffaf7 !important;

  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.035) !important;
}


/* Remove orange glow inside cards */
.help-shortcut-card::before,
.help-shortcut-card::after {
  display: none !important;
  content: none !important;
}


/* Keep hover clean */
.help-shortcut-card:hover {
  background: #ffffff !important;

  border-color: rgba(255, 102, 0, 0.45) !important;

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.055) !important;
}