/* KlipKast UI V4 — presentation only. app.js/config.js remain unchanged. */
:root{
  --kk-bg:#020918;
  --kk-bg2:#07152c;
  --kk-panel:#0b1426;
  --kk-panel2:#111d33;
  --kk-border:rgba(170,190,225,.20);
  --kk-text:#f7f9ff;
  --kk-muted:#b9c3d6;
  --kk-purple:#8a5cf4;
  --kk-purple2:#a06cff;
}
html{scroll-behavior:smooth;background:var(--kk-bg)}
body{
  margin:0;
  background:
    radial-gradient(ellipse at 50% 28%,rgba(31,80,170,.18),transparent 36%),
    linear-gradient(180deg,#010714 0%,#041027 52%,#06142c 100%);
  color:var(--kk-text);
}
main.container{max-width:none!important;padding:0!important}

/* Header — sized like approved reference */
.site-header{
  height:80px!important;min-height:80px!important;padding:0!important;
  background:rgba(2,8,23,.95)!important;
  border-bottom:1px solid rgba(185,200,230,.15)!important;
  backdrop-filter:blur(18px);position:sticky;top:0;z-index:1000;
}
.site-header .container.row{
  width:100%!important;max-width:1480px!important;height:80px!important;margin:0 auto!important;
  padding:0 34px!important;box-sizing:border-box!important;
  display:grid!important;grid-template-columns:minmax(260px,1fr) auto auto auto!important;
  align-items:center!important;gap:30px!important;
}
.brand{display:flex!important;align-items:center!important;width:max-content!important}
.brand-logo{width:240px!important;max-width:none!important;max-height:66px!important;height:auto!important;object-fit:contain!important}
.header-nav{display:flex!important;align-items:center!important;gap:38px!important;margin:0!important}
.header-nav-item{color:#fff!important;text-decoration:none!important;font-size:.96rem!important;font-weight:700!important;white-space:nowrap!important;position:relative!important;padding:12px 0!important;background:none!important;border:0!important}
.header-nav-item::after{content:"";position:absolute;left:50%;right:50%;bottom:3px;height:2px;border-radius:3px;background:linear-gradient(90deg,#5baaff,#9f65ff);transition:.2s ease}
.header-nav-item:hover::after{left:0;right:0}
.header-cart{display:flex!important;align-items:center!important;gap:7px!important;color:#fff!important;background:none!important;border:0!important;padding:8px!important;font-weight:700!important;cursor:pointer!important}
.header-cart-icon{width:27px!important;height:27px!important;object-fit:contain!important}
.header-cart-label{font-size:.96rem!important}
.header-cart-badge{position:static!important;display:grid!important;place-items:center!important;min-width:21px!important;height:21px!important;padding:0 5px!important;border-radius:999px!important;background:#8053df!important;color:#fff!important;font-size:.77rem!important;font-weight:800!important;transform:none!important}
.header-download{display:flex!important;align-items:center!important;justify-content:center!important;min-width:145px!important;height:46px!important;padding:0 20px!important;border-radius:8px!important;background:linear-gradient(135deg,#925ff4,#7441d8)!important;color:#fff!important;text-decoration:none!important;font-weight:800!important;box-shadow:0 10px 28px rgba(120,65,215,.24)!important}
.contact-group{display:none!important}

/* Hero */
.hero{max-width:940px!important;margin:0 auto!important;text-align:center!important;padding:28px 24px 4px!important}
.hero-eyebrow{display:inline-block!important;margin-bottom:12px!important;color:#93bbf5!important;font-size:.72rem!important;font-weight:800!important;letter-spacing:.18em!important;text-transform:uppercase!important;opacity:.82!important}
.hero h1{margin:0!important;color:#fff!important;font-size:clamp(3rem,4.2vw,4.15rem)!important;font-weight:900!important;line-height:1!important;letter-spacing:-.045em!important}
.hero h1 span{background:linear-gradient(135deg,#a86fff,#7b49e2)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
.hero>p{max-width:780px!important;margin:14px auto 0!important;color:#c6cedc!important;font-size:clamp(1.05rem,1.4vw,1.28rem)!important;line-height:1.38!important}
.hero::after{content:"Use the arrows or select any preview to explore Broadcaster MAX.";display:block;margin-top:7px;color:#7f899c;font-size:.89rem;line-height:1.4}

/* Hide extra old heading so composition matches reference */
.showcase{position:relative!important;width:100%!important;margin:0!important;padding:4px 0 52px!important;text-align:center!important;overflow:hidden!important;isolation:isolate!important;background:radial-gradient(ellipse at 50% 54%,rgba(83,67,220,.17),rgba(15,38,91,.06) 40%,transparent 71%)!important}
.showcase-heading{display:none!important}

/* Critical fix: remove old 760px stage constraint that pushed carousel left */
.kk-carousel{
  position:relative!important;width:100%!important;height:520px!important;margin:0!important;
  perspective:1800px!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important;
}
.kk-carousel-stage{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;
  margin:0!important;transform-style:preserve-3d!important;perspective:1800px!important;
}
.kk-carousel::after{content:"";position:absolute!important;left:50%!important;bottom:18px!important;width:min(1140px,78vw)!important;height:110px!important;transform:translateX(-50%)!important;border-radius:50%!important;background:radial-gradient(ellipse,rgba(82,68,235,.24),rgba(0,0,0,.46) 48%,transparent 73%)!important;filter:blur(15px)!important;pointer-events:none!important}
.kk-slide{
  position:absolute!important;top:36px!important;left:50%!important;width:min(640px,42vw)!important;aspect-ratio:16/9!important;
  height:auto!important;inset:auto!important;margin:0!important;padding:0!important;transform-origin:center center!important;
  border:1px solid rgba(200,213,238,.55)!important;border-radius:13px!important;background:#080c14!important;
  box-shadow:0 30px 70px rgba(0,0,0,.67),0 0 0 1px rgba(255,255,255,.025)!important;overflow:visible!important;
  cursor:pointer!important;transform-style:preserve-3d!important;backface-visibility:hidden!important;
  transition:transform .72s cubic-bezier(.22,.72,.18,1),opacity .56s ease,filter .56s ease,box-shadow .56s ease!important;
  will-change:transform,opacity!important;outline:none!important;
}
.kk-slide img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;border-radius:12px!important;background:#090d15!important;pointer-events:none!important;user-select:none!important;-webkit-box-reflect:below 10px linear-gradient(to bottom,rgba(255,255,255,.19) 0%,rgba(255,255,255,.06) 28%,transparent 67%)!important}
.kk-slide.is-active{box-shadow:0 36px 86px rgba(0,0,0,.72),0 0 42px rgba(109,83,255,.17),0 0 0 1px rgba(255,255,255,.055)!important}

/* arrows sit beside carousel, not browser edges */
.kk-carousel-arrow{position:absolute!important;top:46%!important;z-index:90!important;width:56px!important;height:56px!important;transform:translateY(-50%)!important;border:2px solid rgba(255,255,255,.88)!important;border-radius:50%!important;background:rgba(5,8,17,.78)!important;color:#fff!important;font-size:30px!important;display:grid!important;place-items:center!important;cursor:pointer!important;box-shadow:0 0 0 5px rgba(116,84,245,.12),0 14px 35px rgba(0,0,0,.45)!important;backdrop-filter:blur(10px)!important}
.kk-prev{left:calc(50% - min(735px,47vw))!important}
.kk-next{right:calc(50% - min(735px,47vw))!important}
.kk-carousel-arrow:hover{background:rgba(105,75,220,.8)!important;border-color:#c7bcff!important}

.kk-carousel-dots{display:flex!important;justify-content:center!important;align-items:center!important;gap:11px!important;min-height:22px!important;margin-top:-20px!important;position:relative!important;z-index:95!important}
.kk-dot{width:11px!important;height:11px!important;padding:0!important;border:0!important;border-radius:999px!important;background:#d8dce5!important;opacity:.8!important;cursor:pointer!important;transition:.24s!important}
.kk-dot.active{width:28px!important;background:#8d61f5!important;opacity:1!important;box-shadow:0 0 17px rgba(141,97,245,.95)!important}
.kk-carousel-copy{position:relative!important;z-index:95!important;max-width:800px!important;min-height:106px!important;margin:17px auto 0!important;padding:0 24px!important;text-align:center!important}
.kk-carousel-copy h3{margin:0 0 8px!important;font-size:clamp(1.8rem,2.6vw,2.3rem)!important;font-weight:850!important;background:linear-gradient(90deg,#a06dff,#7d4fe2)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;letter-spacing:-.02em!important}
.kk-carousel-copy p{max-width:760px!important;margin:0 auto!important;color:#c1c9d7!important;font-size:1.03rem!important;line-height:1.52!important}

/* Pricing — same dark KlipKast palette, not white */
.plans{
  position:relative!important;width:calc(100% - 44px)!important;max-width:1500px!important;margin:0 auto 48px!important;
  padding:48px 34px 56px!important;box-sizing:border-box!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:20px!important;
  background:linear-gradient(180deg,rgba(16,29,51,.97),rgba(8,18,36,.98))!important;color:#fff!important;
  border:1px solid rgba(170,190,225,.24)!important;border-radius:30px!important;box-shadow:0 -5px 60px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.pricing-heading{grid-column:1/-1!important;text-align:center!important;max-width:790px!important;margin:0 auto 25px!important}
.pricing-heading h2{margin:0!important;color:#fff!important;font-size:clamp(2.1rem,3.15vw,3rem)!important;letter-spacing:-.04em!important}
.pricing-heading i{display:block!important;width:58px!important;height:4px!important;border-radius:4px!important;margin:12px auto 13px!important;background:linear-gradient(90deg,#7c4fe2,#a665ff)!important}
.pricing-heading p{margin:0!important;color:#b8c2d4!important;font-size:1.01rem!important;line-height:1.5!important}
.plan-wrap{min-width:0!important;background:linear-gradient(180deg,#101b30,#0b1528)!important;border:1px solid rgba(166,184,217,.20)!important;border-radius:17px!important;padding:0 0 20px!important;box-shadow:0 15px 34px rgba(0,0,0,.25)!important;overflow:visible!important;transition:.2s ease!important}
.plan-wrap:hover{transform:translateY(-3px)!important;border-color:rgba(147,104,246,.55)!important;box-shadow:0 20px 44px rgba(0,0,0,.34),0 0 30px rgba(113,70,211,.09)!important}
.plan{width:100%!important;min-height:430px!important;padding:26px 24px!important;border:0!important;border-radius:17px 17px 0 0!important;background:transparent!important;color:#fff!important;text-align:left!important;box-shadow:none!important}
.plan.selected{background:linear-gradient(180deg,rgba(129,80,224,.20),rgba(16,27,48,.14) 48%,transparent)!important;box-shadow:inset 0 0 0 2px #8758ec!important}
.plan .plan-head h3{color:#fff!important;font-size:1.28rem!important}.plan .check{background:#8959ee!important;color:#fff!important}.plan .price strong{color:#fff!important;font-size:2.22rem!important}.plan .price span,.plan li{color:#aeb9cc!important}.plan .badge{background:#8959ee!important;color:#fff!important}
.buy-widget{padding:0 20px!important;text-align:center!important}.buy-widget .btn-primary{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-height:48px!important;border-radius:9px!important;background:linear-gradient(135deg,#905ef2,#7140d5)!important;color:#fff!important;font-weight:800!important;text-decoration:none!important;box-shadow:0 10px 25px rgba(117,65,213,.2)!important}

@media(max-width:1180px){
  .site-header .container.row{grid-template-columns:auto 1fr auto auto!important;gap:18px!important}.header-nav{gap:22px!important}.brand-logo{width:205px!important}
  .kk-slide{width:min(620px,52vw)!important}.kk-prev{left:22px!important}.kk-next{right:22px!important}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:880px){
  .site-header{height:auto!important;min-height:72px!important}.site-header .container.row{height:auto!important;min-height:72px!important;grid-template-columns:1fr auto auto!important;padding-top:8px!important;padding-bottom:8px!important}
  .header-nav{grid-column:1/-1!important;grid-row:2!important;justify-content:flex-start!important;overflow-x:auto!important;gap:24px!important;padding-bottom:5px!important}.header-download{min-width:122px!important;height:42px!important;padding:0 16px!important}.brand-logo{width:185px!important}
  .hero{padding-top:28px!important}.kk-carousel{height:405px!important}.kk-slide{width:72vw!important;top:38px!important}.kk-prev{left:10px!important}.kk-next{right:10px!important}
}
@media(max-width:620px){
  .site-header .container.row{grid-template-columns:1fr auto!important}.header-download{display:none!important}.header-cart{grid-column:2!important}.header-nav{grid-column:1/-1!important}.brand-logo{width:165px!important}.header-cart-label{display:none!important}
  .hero{padding:25px 20px 4px!important}.hero-break{display:none!important}.hero::after{font-size:.78rem}.kk-carousel{height:320px!important}.kk-slide{width:82vw!important;top:38px!important}.kk-carousel-arrow{width:42px!important;height:42px!important;font-size:22px!important}.kk-prev{left:8px!important}.kk-next{right:8px!important}.kk-carousel-dots{margin-top:-2px!important}.kk-carousel-copy{padding:0 20px!important}.plans{width:calc(100% - 20px)!important;grid-template-columns:1fr!important;padding:42px 16px 50px!important;border-radius:22px!important}.plan{min-height:0!important}
}

/* V5 header logo visibility update — presentation only */
@media (min-width:1181px){
  .site-header{height:100px!important;min-height:100px!important}
  .site-header .container.row{height:100px!important;grid-template-columns:minmax(330px,1fr) auto auto auto!important}
  .brand-logo{width:310px!important;max-height:88px!important}
}
@media (min-width:881px) and (max-width:1180px){
  .site-header{min-height:90px!important;height:90px!important}
  .site-header .container.row{min-height:90px!important;height:90px!important;grid-template-columns:minmax(250px,1fr) auto auto auto!important}
  .brand-logo{width:250px!important;max-height:78px!important}
}
@media (max-width:880px){
  .brand-logo{width:220px!important;max-height:72px!important}
}
@media (max-width:620px){
  .brand-logo{width:195px!important;max-height:66px!important}
}


/* V6 — restore Sales/Support phone + WhatsApp in desktop header */
@media (min-width: 1181px) {
  .site-header{
    height:104px!important;
    min-height:104px!important;
  }
  .site-header .container.row{
    height:104px!important;
    min-height:104px!important;
    max-width:1600px!important;
    padding:0 28px!important;
    grid-template-columns:minmax(285px,1fr) auto auto auto auto!important;
    gap:22px!important;
  }
  .brand-logo{
    width:300px!important;
    max-height:92px!important;
  }
  .header-nav{gap:24px!important}
  .header-nav-item{font-size:.91rem!important}
  .header-cart{padding:7px 4px!important}
  .header-cart-label{display:none!important}
  .header-download{
    min-width:132px!important;
    padding:0 16px!important;
  }
  .contact-group{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    white-space:nowrap!important;
  }
  .contact{
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    color:#fff!important;
    text-decoration:none!important;
    padding:6px 4px!important;
  }
  .phone-icon{
    width:22px!important;
    height:22px!important;
    color:#dbe6f7!important;
    flex:0 0 auto!important;
  }
  .contact-text{
    display:flex!important;
    flex-direction:column!important;
    line-height:1.08!important;
  }
  .contact-text strong{
    color:#fff!important;
    font-size:1rem!important;
    letter-spacing:.035em!important;
  }
  .contact-text small{
    margin-top:4px!important;
    color:#9eabc0!important;
    font-size:.67rem!important;
  }
  .us-flag{display:inline-flex!important;vertical-align:middle!important;margin-left:3px!important}
  .whatsapp-btn{
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    height:42px!important;
    border-radius:50%!important;
    background:#fff!important;
    text-decoration:none!important;
    box-shadow:0 7px 20px rgba(37,211,102,.2)!important;
    transition:transform .18s ease, box-shadow .18s ease!important;
  }
  .whatsapp-btn:hover{
    transform:translateY(-2px) scale(1.04)!important;
    box-shadow:0 10px 25px rgba(37,211,102,.32)!important;
  }
  .whatsapp-btn svg{width:29px!important;height:29px!important}
}
@media (min-width: 1181px) and (max-width: 1420px) {
  .site-header .container.row{
    grid-template-columns:minmax(230px,1fr) auto auto auto auto!important;
    gap:14px!important;
    padding:0 20px!important;
  }
  .brand-logo{width:245px!important;max-height:82px!important}
  .header-nav{gap:16px!important}
  .header-nav-item{font-size:.82rem!important}
  .header-download{min-width:118px!important;font-size:.84rem!important}
  .contact-text strong{font-size:.88rem!important}
  .contact-text small{font-size:.6rem!important}
}

/* V7 — slightly larger KlipKast header logo */
@media (min-width: 1421px) {
  .brand-logo{
    width:330px!important;
    max-height:96px!important;
  }
}
@media (min-width: 1181px) and (max-width: 1420px) {
  .brand-logo{
    width:265px!important;
    max-height:86px!important;
  }
}

/* V11 SEO discovery + internal-link layer */
.seo-discovery{margin:30px auto 16px!important;max-width:1260px!important;padding:0 28px!important}
.seo-discovery-inner{border:1px solid rgba(130,102,229,.28)!important;border-radius:22px!important;padding:34px 38px!important;background:linear-gradient(145deg,rgba(14,28,54,.86),rgba(7,17,35,.92))!important;box-shadow:0 18px 50px rgba(0,0,0,.2)!important}
.seo-discovery h2{margin:5px 0 10px!important;color:#fff!important;font-size:clamp(1.65rem,2.4vw,2.25rem)!important}
.seo-discovery p{color:#b7c2d6!important;line-height:1.75!important;max-width:980px!important}
.seo-kicker{color:#9a72f5!important;text-transform:uppercase!important;letter-spacing:.14em!important;font-weight:800!important;font-size:.72rem!important}
.seo-links{display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin-top:20px!important}
.seo-links a,.seo-footer-links a{color:#c9d6ed!important;text-decoration:none!important}
.seo-links a{padding:9px 13px!important;border:1px solid rgba(139,100,236,.26)!important;border-radius:999px!important;background:rgba(74,50,130,.13)!important;font-size:.86rem!important}
.seo-links a:hover,.seo-footer-links a:hover{color:#fff!important}
.seo-footer{display:flex!important;flex-direction:column!important;gap:14px!important}
.seo-footer-links{display:flex!important;justify-content:center!important;flex-wrap:wrap!important;gap:10px 18px!important;font-size:.78rem!important}
@media(max-width:700px){.seo-discovery{padding:0 10px!important}.seo-discovery-inner{padding:25px 20px!important}}

/* V12 growth SEO, OBS/vMix, recording, FAQ and version marker */
.kk-growth,.kk-faq{max-width:1260px!important;margin:30px auto!important;padding:0 28px!important}
.kk-growth-inner,.kk-faq-inner{border:1px solid rgba(131,98,231,.28)!important;border-radius:24px!important;background:linear-gradient(145deg,rgba(13,27,52,.96),rgba(6,15,32,.96))!important;box-shadow:0 18px 54px rgba(0,0,0,.25)!important;padding:42px!important}
.kk-growth-kicker{margin:0 0 8px!important;color:#9d77f2!important;font-size:.72rem!important;font-weight:900!important;letter-spacing:.16em!important;text-transform:uppercase!important}
.kk-growth h2,.kk-faq h2{margin:0!important;color:#fff!important;font-size:clamp(1.8rem,3vw,2.7rem)!important;line-height:1.12!important;letter-spacing:-.025em!important}
.kk-growth-lead{max-width:900px!important;color:#c0cbe0!important;font-size:1.06rem!important;line-height:1.7!important;margin:14px 0 25px!important}
.kk-growth-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}
.kk-growth-grid article{border:1px solid rgba(130,104,225,.22)!important;border-radius:18px!important;background:rgba(7,18,38,.78)!important;padding:24px!important}
.kk-growth-grid h3{color:#fff!important;margin:0 0 10px!important;font-size:1.17rem!important}
.kk-growth-grid p{color:#aebbd0!important;line-height:1.65!important;margin:0!important}
.kk-growth-links{display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin-top:16px!important}
.kk-growth-links a,.kk-growth-cta>a:not(.kk-growth-primary){color:#c6d4ed!important;text-decoration:none!important;font-weight:750!important;font-size:.83rem!important}
.kk-growth-links a{padding:7px 10px!important;border-radius:999px!important;border:1px solid rgba(150,111,246,.3)!important}
.kk-growth-cta{display:flex!important;align-items:center!important;justify-content:center!important;flex-wrap:wrap!important;gap:12px 20px!important;margin-top:27px!important}
.kk-growth-primary{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:44px!important;padding:0 18px!important;border-radius:9px!important;background:linear-gradient(135deg,#9664f5,#7340d6)!important;color:#fff!important;text-decoration:none!important;font-weight:850!important}
.kk-faq details{border-top:1px solid rgba(137,155,187,.18)!important;padding:17px 0!important}
.kk-faq details:first-of-type{margin-top:22px!important}
.kk-faq summary{cursor:pointer!important;color:#fff!important;font-weight:800!important}
.kk-faq details p{color:#aebbd0!important;line-height:1.65!important;margin:10px 0 0!important}
.site-version{position:fixed!important;left:10px!important;bottom:8px!important;z-index:1200!important;color:rgba(202,213,232,.55)!important;font:700 11px/1 Arial,Helvetica,sans-serif!important;letter-spacing:.08em!important;pointer-events:none!important;user-select:none!important}
@media(max-width:900px){.kk-growth-grid{grid-template-columns:1fr!important}.kk-growth,.kk-faq{padding:0 12px!important}.kk-growth-inner,.kk-faq-inner{padding:28px 22px!important}}

/* V13: light mode + accessibility controls */
:root{--focus-ring:#ffd166}
.skip-link{position:fixed;left:12px;top:-80px;z-index:99999;background:#fff;color:#000;padding:12px 16px;border-radius:8px;font-weight:800}
.skip-link:focus{top:12px}
.display-controls{display:flex;gap:7px;align-items:center}
.display-control{min-height:42px;border:1px solid rgba(185,199,224,.38);background:#0d1a2f;color:#fff;border-radius:9px;padding:0 10px;display:inline-flex;gap:7px;align-items:center;justify-content:center;font-weight:800;cursor:pointer}
.display-control:hover{background:#172844}
.display-control .control-label{font-size:12px}
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{outline:3px solid var(--focus-ring)!important;outline-offset:3px!important}
.plan-explore{list-style:none!important;margin:3px 0 5px!important;padding-left:0!important}
.plan-explore::before{display:none!important}
.plan-explore a{color:#a9c9ff!important;text-decoration:underline!important;text-underline-offset:3px!important;font-weight:800!important}
.limit-star{color:#ffd166!important;font-size:1.05em!important;margin-left:2px!important}
.input-capacity-note{grid-column:1/-1!important;margin:2px 12px 0!important;padding:14px 16px!important;border:1px solid rgba(255,209,102,.34)!important;border-radius:12px!important;background:rgba(255,209,102,.06)!important;color:#c9d5e8!important;font-size:.82rem!important;line-height:1.55!important}
.accessibility-panel{position:fixed;right:18px;top:82px;z-index:10000;width:min(310px,calc(100vw - 36px));padding:14px;border:1px solid #536785;border-radius:14px;background:#0b172a;color:#fff;box-shadow:0 18px 55px rgba(0,0,0,.45)}
.accessibility-panel[hidden]{display:none!important}
.accessibility-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.accessibility-panel-head button{width:38px;height:38px;border:1px solid #61728d;border-radius:8px;background:#13223a;color:#fff;font-size:22px;cursor:pointer}
.accessibility-panel>button{width:100%;min-height:44px;margin:5px 0;text-align:left;border:1px solid #4a5f7e;border-radius:9px;background:#101f36;color:#fff;padding:9px 12px;font-weight:750;cursor:pointer}
.accessibility-panel>button[aria-pressed="true"]{border-color:#ffd166;background:#26314a}
.accessibility-panel p{font-size:12px;color:#b9c7dc;line-height:1.45}
html.a11y-large-text{font-size:118%}
html.a11y-underline-links a{text-decoration:underline!important;text-underline-offset:3px!important}
html.a11y-high-contrast{--focus-ring:#ffff00}
html.a11y-high-contrast body{background:#000!important;color:#fff!important}
html.a11y-high-contrast :where(.plan,.card,.kk-growth-inner,.kk-faq-inner,.seo-discovery-inner,.site-header,.accessibility-panel){background:#000!important;color:#fff!important;border-color:#fff!important}
html.a11y-high-contrast :where(p,li,small,.muted){color:#fff!important}
html.a11y-high-contrast a{color:#7fc8ff!important}
html.a11y-reduce-motion *,html.a11y-reduce-motion *::before,html.a11y-reduce-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}
html[data-theme="light"] body{background:#f5f7fb!important;color:#172033!important}
html[data-theme="light"] .site-header{background:#fff!important;border-bottom-color:#d5dcea!important}
html[data-theme="light"] .header-nav-item,html[data-theme="light"] .contact,html[data-theme="light"] .header-cart{color:#172033!important}
html[data-theme="light"] .display-control{background:#f3f6fb!important;color:#172033!important;border-color:#aab7ca!important}
html[data-theme="light"] .hero h1,html[data-theme="light"] .showcase-heading h2,html[data-theme="light"] .pricing-heading h2{color:#121a2a!important}
html[data-theme="light"] .hero p,html[data-theme="light"] .showcase-heading p,html[data-theme="light"] .pricing-heading p{color:#4a5870!important}
html[data-theme="light"] .plan{background:#fff!important;color:#172033!important;border-color:#bcc8da!important}
html[data-theme="light"] .plan li,html[data-theme="light"] .price span{color:#43516a!important}
html[data-theme="light"] .plan.selected{background:#f0ebff!important;border-color:#7d48dd!important}
html[data-theme="light"] .kk-growth-inner,html[data-theme="light"] .kk-faq-inner,html[data-theme="light"] .seo-discovery-inner,html[data-theme="light"] .card{background:#fff!important;color:#172033!important;border-color:#c7d1e0!important}
html[data-theme="light"] .kk-growth h2,html[data-theme="light"] .kk-faq h2,html[data-theme="light"] .kk-growth-grid h3,html[data-theme="light"] .kk-faq summary{color:#172033!important}
html[data-theme="light"] .kk-growth-lead,html[data-theme="light"] .kk-growth-grid p,html[data-theme="light"] .kk-faq details p,html[data-theme="light"] .seo-discovery-inner p{color:#4a5870!important}
html[data-theme="light"] .kk-growth-grid article{background:#f6f8fc!important;border-color:#cbd5e3!important}
html[data-theme="light"] .input-capacity-note{background:#fff8df!important;color:#38455c!important;border-color:#9a7b00!important}
html[data-theme="light"] .accessibility-panel{background:#fff!important;color:#172033!important;border-color:#74849c!important}
html[data-theme="light"] .accessibility-panel-head button,html[data-theme="light"] .accessibility-panel>button{background:#f5f7fb!important;color:#172033!important;border-color:#74849c!important}
html[data-theme="light"] .accessibility-panel p{color:#43516a!important}
html[data-theme="light"] .site-footer{background:#eaf0f8!important;color:#25334b!important}
html[data-theme="light"] .site-footer a{color:#214e92!important}
@media(max-width:1180px){.display-control .control-label{display:none}.display-control{width:42px;padding:0}.display-controls{gap:4px}}
@media(max-width:760px){.accessibility-panel{top:70px;right:10px}.display-controls{order:4}}

/* V14 — header logo/phone placement + light-mode visibility */
@media (min-width:1181px){
  .site-header{
    min-height:108px!important;
    height:108px!important;
  }
  .site-header .container.row{
    width:100%!important;
    max-width:1660px!important;
    min-height:108px!important;
    height:108px!important;
    padding:0 28px!important;
    display:grid!important;
    grid-template-columns:340px 235px minmax(440px,1fr) auto auto auto!important;
    grid-template-areas:"brand contact nav controls cart download"!important;
    align-items:center!important;
    column-gap:18px!important;
    row-gap:0!important;
  }
  .brand{grid-area:brand!important;align-self:center!important}
  .brand-logo{
    width:345px!important;
    max-width:345px!important;
    max-height:96px!important;
    height:auto!important;
    object-fit:contain!important;
  }
  .contact-group{
    grid-area:contact!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:9px!important;
    margin:0!important;
    padding:0!important;
    white-space:nowrap!important;
  }
  .contact{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    color:#fff!important;
    text-decoration:none!important;
    padding:7px 0!important;
    opacity:1!important;
  }
  .phone-icon{
    width:25px!important;
    height:25px!important;
    color:#f4f7fc!important;
    flex:0 0 auto!important;
    opacity:1!important;
  }
  .contact-text{
    display:flex!important;
    flex-direction:column!important;
    line-height:1.06!important;
  }
  .contact-text strong{
    color:#fff!important;
    font-size:1.12rem!important;
    line-height:1!important;
    letter-spacing:.035em!important;
    font-weight:900!important;
    opacity:1!important;
  }
  .contact-text small{
    margin-top:5px!important;
    color:#c7d2e5!important;
    font-size:.70rem!important;
    line-height:1.1!important;
    opacity:1!important;
  }
  .whatsapp-btn{
    display:grid!important;
    place-items:center!important;
    width:44px!important;
    height:44px!important;
    flex:0 0 44px!important;
    border-radius:50%!important;
    background:#fff!important;
    box-shadow:0 7px 20px rgba(37,211,102,.22)!important;
  }
  .whatsapp-btn svg{width:31px!important;height:31px!important}
  .header-nav{
    grid-area:nav!important;
    justify-content:center!important;
    gap:22px!important;
  }
  .display-controls{grid-area:controls!important}
  .header-cart{grid-area:cart!important}
  .header-download{grid-area:download!important}
}

/* Keep the transparent KLIPKAST artwork readable on a white header. */
html[data-theme="light"] .brand{
  background:#020817!important;
  border:1px solid #1b2b47!important;
  border-radius:14px!important;
  padding:7px 14px!important;
  box-shadow:0 7px 22px rgba(18,35,63,.12)!important;
}
html[data-theme="light"] .brand-logo{
  opacity:1!important;
  filter:none!important;
}
html[data-theme="light"] .contact{
  color:#111c2e!important;
  opacity:1!important;
}
html[data-theme="light"] .phone-icon{
  color:#18243a!important;
  opacity:1!important;
}
html[data-theme="light"] .contact-text strong{
  color:#111827!important;
  opacity:1!important;
}
html[data-theme="light"] .contact-text small{
  color:#39475f!important;
  opacity:1!important;
}
html[data-theme="light"] .us-flag{
  opacity:1!important;
}
html[data-theme="light"] .whatsapp-btn{
  background:#fff!important;
  border:1px solid #bfc9d8!important;
  box-shadow:0 6px 18px rgba(37,211,102,.18)!important;
}

/* Fit the full header on common desktop widths without dropping phone to row 2. */
@media (min-width:1181px) and (max-width:1540px){
  .site-header .container.row{
    grid-template-columns:285px 205px minmax(390px,1fr) auto auto auto!important;
    column-gap:12px!important;
    padding:0 18px!important;
  }
  .brand-logo{width:285px!important;max-width:285px!important;max-height:88px!important}
  .contact-text strong{font-size:1rem!important}
  .contact-text small{font-size:.64rem!important}
  .phone-icon{width:22px!important;height:22px!important}
  .whatsapp-btn{width:40px!important;height:40px!important;flex-basis:40px!important}
  .whatsapp-btn svg{width:28px!important;height:28px!important}
  .header-nav{gap:15px!important}
  .header-nav-item{font-size:.82rem!important}
  .display-control{padding:0 8px!important}
  .header-download{min-width:124px!important;padding:0 13px!important}
}

/* Tablet: keep phone visible in the header rather than below the hero. */
@media (min-width:881px) and (max-width:1180px){
  .site-header{height:auto!important;min-height:96px!important}
  .site-header .container.row{
    height:auto!important;
    min-height:96px!important;
    display:grid!important;
    grid-template-columns:245px 1fr auto auto!important;
    grid-template-areas:
      "brand contact controls cart"
      "nav nav nav download"!important;
    gap:8px 14px!important;
    padding:8px 18px!important;
  }
  .brand{grid-area:brand!important}
  .brand-logo{width:245px!important;max-width:245px!important;max-height:82px!important}
  .contact-group{grid-area:contact!important;display:flex!important;align-items:center!important;gap:8px!important}
  .contact-text strong{font-size:1rem!important}
  .header-nav{grid-area:nav!important;justify-content:flex-start!important}
  .display-controls{grid-area:controls!important}
  .header-cart{grid-area:cart!important}
  .header-download{grid-area:download!important}
}

/* Small screens: phone remains in header content and stays legible. */
@media (max-width:880px){
  .contact-group{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    grid-column:1/-1!important;
    justify-content:flex-start!important;
    padding:4px 0 2px!important;
  }
  .contact-text strong{font-size:1rem!important}
  .contact-text small{font-size:.68rem!important}
  html[data-theme="light"] .brand{padding:5px 10px!important}
}

/* V14 accessibility floating control + improved light-mode contrast */
.floating-accessibility{
  position:fixed!important;
  left:18px!important;
  bottom:18px!important;
  z-index:10050!important;
  width:62px!important;
  height:62px!important;
  padding:0!important;
  border:2px solid #ffffff!important;
  border-radius:50%!important;
  background:#ffffff!important;
  box-shadow:0 10px 28px rgba(0,0,0,.30)!important;
  display:grid!important;
  place-items:center!important;
  cursor:pointer!important;
}
.floating-accessibility img{
  width:52px!important;
  height:52px!important;
  object-fit:cover!important;
  border-radius:50%!important;
}
.floating-accessibility:hover{transform:translateY(-2px)!important}
.floating-accessibility:focus-visible{outline:3px solid #ffd166!important;outline-offset:4px!important}
.accessibility-panel{
  left:18px!important;
  right:auto!important;
  top:auto!important;
  bottom:92px!important;
}
.site-version{
  left:88px!important;
  bottom:22px!important;
}

/* Make the Free-plan Explore line read like every other checked item. */
.plan-explore{
  list-style:none!important;
  margin:0!important;
  padding-left:0!important;
}
.plan-explore::before{
  display:inline-block!important;
  content:"✓"!important;
  color:#2f93ff!important;
  font-weight:900!important;
  margin-right:10px!important;
}
.plan-explore a{
  color:inherit!important;
  text-decoration:none!important;
  font-weight:400!important;
  font-size:inherit!important;
}
.plan-explore a:hover{text-decoration:underline!important;text-underline-offset:3px!important}

/* Pricing section remains dark in both modes, so its heading must remain white. */
html[data-theme="light"] .plans{
  background:linear-gradient(180deg,rgba(16,29,51,.98),rgba(8,18,36,.99))!important;
  color:#fff!important;
}
html[data-theme="light"] .pricing-heading h2{
  color:#ffffff!important;
  text-shadow:0 1px 1px rgba(0,0,0,.12)!important;
}
html[data-theme="light"] .pricing-heading p{
  color:#e0e8f5!important;
}
html[data-theme="light"] .plan-head h3,
html[data-theme="light"] .plan .price strong{
  color:#172033!important;
}
html[data-theme="light"] .plan li,
html[data-theme="light"] .plan .price span{
  color:#344259!important;
}
html[data-theme="light"] .plan-explore a{
  color:#344259!important;
}
html[data-theme="light"] .plan.selected .plan-head h3,
html[data-theme="light"] .plan.selected .price strong{
  color:#172033!important;
}

/* Improve readability in all light-mode informational sections. */
html[data-theme="light"] .seo-discovery-inner{
  background:#ffffff!important;
}
html[data-theme="light"] .seo-discovery-inner p{
  color:#334155!important;
}
html[data-theme="light"] .seo-kicker{
  color:#5f3db2!important;
}
html[data-theme="light"] .seo-links a{
  color:#24324a!important;
  background:#f2eefb!important;
  border-color:#8f79c9!important;
  font-weight:800!important;
}
html[data-theme="light"] .seo-links a:hover{
  color:#111827!important;
  background:#e8e0f7!important;
}
html[data-theme="light"] .kk-growth-cta>a:not(.kk-growth-primary),
html[data-theme="light"] .kk-growth-links a{
  color:#263750!important;
  font-weight:800!important;
}
html[data-theme="light"] .kk-growth-links a{
  background:#f4f1fb!important;
  border-color:#9a86cd!important;
}
html[data-theme="light"] .kk-growth-kicker{
  color:#5d3aac!important;
}
html[data-theme="light"] .kk-growth-lead,
html[data-theme="light"] .kk-growth-grid p,
html[data-theme="light"] .kk-faq details p{
  color:#35445b!important;
}
html[data-theme="light"] .kk-faq summary{
  color:#172033!important;
}
html[data-theme="light"] .seo-footer-links a{
  color:#214e92!important;
  font-weight:750!important;
}

/* Floating accessibility button stays visible in both themes. */
html[data-theme="light"] .floating-accessibility{
  border-color:#d0d8e5!important;
  background:#fff!important;
  box-shadow:0 10px 26px rgba(25,42,70,.20)!important;
}
@media(max-width:620px){
  .floating-accessibility{width:56px!important;height:56px!important;left:12px!important;bottom:12px!important}
  .floating-accessibility img{width:47px!important;height:47px!important}
  .accessibility-panel{left:10px!important;bottom:78px!important}
  .site-version{left:76px!important;bottom:18px!important}
}

/* V15 — light-mode logo/phone/form readability + plan-list cleanup */

/* Remove the dark plate behind the logo in light mode. */
html[data-theme="light"] .brand{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  padding:0!important;
  box-shadow:none!important;
}
html[data-theme="light"] .brand-logo{
  opacity:1!important;
  filter:drop-shadow(0 1px 1px rgba(30,41,59,.16))!important;
}

/* Keep logo and phone separate, readable and non-overlapping. */
@media (min-width:1541px){
  .site-header .container.row{
    grid-template-columns:300px 250px minmax(430px,1fr) auto auto auto!important;
    column-gap:26px!important;
  }
  .brand-logo{
    width:300px!important;
    max-width:300px!important;
    max-height:92px!important;
  }
  .contact-group{
    min-width:250px!important;
    padding-left:8px!important;
  }
}
@media (min-width:1181px) and (max-width:1540px){
  .site-header .container.row{
    grid-template-columns:255px 220px minmax(370px,1fr) auto auto auto!important;
    column-gap:16px!important;
  }
  .brand-logo{
    width:255px!important;
    max-width:255px!important;
    max-height:82px!important;
  }
  .contact-group{
    min-width:220px!important;
    padding-left:4px!important;
  }
}

html[data-theme="light"] .contact,
html[data-theme="light"] .contact-text,
html[data-theme="light"] .contact-text strong,
html[data-theme="light"] .contact-text small{
  opacity:1!important;
}
html[data-theme="light"] .contact-text strong{
  color:#0f172a!important;
  font-weight:900!important;
  text-shadow:none!important;
}
html[data-theme="light"] .contact-text small{
  color:#334155!important;
  font-weight:700!important;
}
html[data-theme="light"] .phone-icon{
  color:#0f172a!important;
  opacity:1!important;
}
html[data-theme="light"] .us-flag{
  opacity:1!important;
}
html[data-theme="light"] .contact-group{
  filter:none!important;
}

/* License request form: strong readable light-mode colors. */
html[data-theme="light"] .form-wrap .card{
  background:#ffffff!important;
  color:#0f172a!important;
  border-color:#b8c4d6!important;
}
html[data-theme="light"] .form-wrap .card h2{
  color:#0f172a!important;
}
html[data-theme="light"] .form-wrap .card .muted{
  color:#334155!important;
}
html[data-theme="light"] .form-wrap .card a{
  color:#1d4ed8!important;
  font-weight:700!important;
}
html[data-theme="light"] .form-wrap form label{
  color:#1f2937!important;
  font-weight:700!important;
}
html[data-theme="light"] .form-wrap form input,
html[data-theme="light"] .form-wrap form textarea{
  background:#ffffff!important;
  color:#111827!important;
  border:1px solid #94a3b8!important;
  box-shadow:none!important;
}
html[data-theme="light"] .form-wrap form input::placeholder,
html[data-theme="light"] .form-wrap form textarea::placeholder{
  color:#64748b!important;
  opacity:1!important;
}
html[data-theme="light"] .form-wrap form input:focus,
html[data-theme="light"] .form-wrap form textarea:focus{
  border-color:#2563eb!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.18)!important;
}
html[data-theme="light"] .form-wrap #submit-btn{
  background:#2563eb!important;
  color:#ffffff!important;
  font-weight:800!important;
}

/* The Free-plan line is now a normal checked feature — no custom pseudo-element. */
.plan-explore,
.plan-explore::before,
.plan-explore a{
  all:unset;
}

/* Improve selected Free plan text contrast in light mode. */
html[data-theme="light"] .plan.selected li{
  color:#334155!important;
}
html[data-theme="light"] .plan.selected .plan-head h3,
html[data-theme="light"] .plan.selected .price strong,
html[data-theme="light"] .plan.selected .price span{
  color:#172033!important;
}

/* V16 — light-mode logo, phone and carousel description readability */
.brand-logo-light{display:none!important}
html[data-theme="light"] .brand-logo-dark{display:none!important}
html[data-theme="light"] .brand-logo-light{
  display:block!important;
  opacity:1!important;
  filter:drop-shadow(0 2px 2px rgba(15,23,42,.18))!important;
}
html[data-theme="light"] .brand{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
}
html[data-theme="light"] .contact-group,
html[data-theme="light"] .contact,
html[data-theme="light"] .contact-text,
html[data-theme="light"] .contact-text strong,
html[data-theme="light"] .contact-text small,
html[data-theme="light"] .phone-icon,
html[data-theme="light"] .us-flag{
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important;
}
html[data-theme="light"] .contact-group{position:relative!important;z-index:5!important}
html[data-theme="light"] .contact-text strong{
  color:#0f172a!important;
  -webkit-text-fill-color:#0f172a!important;
  text-shadow:none!important;
  font-weight:900!important;
}
html[data-theme="light"] .contact-text small{
  color:#334155!important;
  -webkit-text-fill-color:#334155!important;
  font-weight:700!important;
}
html[data-theme="light"] .phone-icon{
  color:#0f172a!important;
  stroke:#0f172a!important;
}
html[data-theme="light"] .kk-carousel-copy p,
html[data-theme="light"] #kk-carousel-description{
  color:#334155!important;
  -webkit-text-fill-color:#334155!important;
  opacity:1!important;
  font-weight:600!important;
  text-shadow:none!important;
}
html[data-theme="light"] .kk-carousel-copy h3,
html[data-theme="light"] #kk-carousel-title{opacity:1!important}

.seo-feature-image{margin:0!important;text-align:center!important}
.seo-feature-image img{
  display:block!important;width:100%!important;max-width:980px!important;height:auto!important;margin:0 auto!important;
  border-radius:16px!important;border:1px solid #2b3b59!important;box-shadow:0 18px 48px rgba(0,0,0,.28)!important
}
.seo-feature-image figcaption{
  margin:12px auto 0!important;max-width:900px!important;color:#b8c5d9!important;line-height:1.55!important;font-size:.92rem!important
}
html[data-theme="light"] .seo-feature-image img{border-color:#aebbd0!important;box-shadow:0 18px 42px rgba(15,23,42,.14)!important}
html[data-theme="light"] .seo-feature-image figcaption{color:#334155!important;font-weight:600!important}

/* V17 — complete active carousel rectangle + direct trial CTA */
.hero{
  padding-bottom:18px!important;
}
.showcase{
  padding-top:18px!important;
}
.kk-carousel{
  padding-top:0!important;
  box-sizing:border-box!important;
}
.kk-carousel-stage{
  top:0!important;
  overflow:visible!important;
}
.kk-slide{
  top:54px!important;
  border-radius:16px!important;
  overflow:hidden!important;
  background:#090d15!important;
  border:1px solid rgba(200,213,238,.66)!important;
  box-shadow:0 30px 70px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.035)!important;
}
.kk-slide img{
  border-radius:15px!important;
  clip-path:inset(0 round 15px)!important;
  overflow:hidden!important;
  background:#090d15!important;
}
.kk-slide.is-active{
  border-radius:16px!important;
  overflow:hidden!important;
}
html[data-theme="light"] .kk-slide{
  border-color:#95a3b8!important;
  background:#ffffff!important;
  box-shadow:0 24px 58px rgba(15,23,42,.20),0 0 0 1px rgba(15,23,42,.05)!important;
}
html[data-theme="light"] .kk-slide img{
  background:#ffffff!important;
}
@media(max-width:880px){
  .hero{padding-bottom:14px!important}
  .showcase{padding-top:12px!important}
  .kk-slide{top:48px!important}
}
@media(max-width:620px){
  .kk-slide{top:44px!important}
}

/* V17b — force supplied light-mode KLIPKAST logo visible at all times */
.brand-logo-light{display:none!important;visibility:hidden!important;opacity:0!important}
html[data-theme="light"] .brand-logo-dark{display:none!important;visibility:hidden!important;opacity:0!important}
html[data-theme="light"] .brand-logo-light{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important;
  pointer-events:auto!important;
  width:300px!important;
  max-width:300px!important;
  max-height:92px!important;
  height:auto!important;
  object-fit:contain!important;
}
html[data-theme="light"] .brand,
html[data-theme="light"] .brand:hover,
html[data-theme="light"] .brand:focus,
html[data-theme="light"] .brand:focus-visible{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
  opacity:1!important;
}
html[data-theme="light"] .brand:hover .brand-logo-light,
html[data-theme="light"] .brand:focus .brand-logo-light{
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
}
@media (min-width:1181px) and (max-width:1540px){
  html[data-theme="light"] .brand-logo-light{width:255px!important;max-width:255px!important;max-height:82px!important}
}
@media (min-width:881px) and (max-width:1180px){
  html[data-theme="light"] .brand-logo-light{width:245px!important;max-width:245px!important;max-height:82px!important}
}
@media (max-width:880px){
  html[data-theme="light"] .brand-logo-light{width:210px!important;max-width:210px!important;max-height:72px!important}
}

/* V18 — professional phone/tablet header */
.mobile-menu-toggle{display:none}

/* Tablet layout: two clean rows, no scattered controls */
@media (min-width:901px) and (max-width:1180px){
  .site-header{
    height:auto!important;
    min-height:0!important;
  }
  .site-header .container.row{
    display:grid!important;
    grid-template-columns:280px 1fr auto auto auto!important;
    grid-template-areas:
      "brand contact controls cart download"
      "nav nav nav nav nav"!important;
    gap:10px 16px!important;
    min-height:0!important;
    height:auto!important;
    padding:10px 18px 12px!important;
    align-items:center!important;
  }
  .brand{grid-area:brand!important}
  .brand-logo{
    width:270px!important;
    max-width:270px!important;
    max-height:88px!important;
  }
  .contact-group{
    grid-area:contact!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    min-width:0!important;
  }
  .contact-text strong{font-size:1rem!important}
  .header-nav{
    grid-area:nav!important;
    display:flex!important;
    justify-content:center!important;
    gap:30px!important;
    width:100%!important;
    padding-top:6px!important;
    border-top:1px solid rgba(140,157,187,.16)!important;
  }
  .header-nav-item{
    font-size:.9rem!important;
    padding:10px 0!important;
  }
  .display-controls{grid-area:controls!important}
  .header-cart{grid-area:cart!important}
  .header-download{grid-area:download!important}
}

/* Phone layout */
@media (max-width:900px){
  .site-header{
    position:relative!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    background:linear-gradient(180deg,#020817 0%,#061226 100%)!important;
  }
  .site-header .container.row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    grid-template-areas:
      "brand cart menu"
      "contact contact contact"
      "nav nav nav"!important;
    gap:0 10px!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    padding:12px 16px 14px!important;
    align-items:center!important;
  }

  .brand{
    grid-area:brand!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    min-width:0!important;
  }
  .brand-logo{
    width:235px!important;
    max-width:72vw!important;
    max-height:108px!important;
    height:auto!important;
    object-fit:contain!important;
  }

  .header-cart{
    grid-area:cart!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:8px 4px!important;
    margin:0!important;
  }
  .header-cart-icon{width:30px!important;height:30px!important}
  .header-cart-label{display:none!important}
  .header-cart-badge{
    min-width:24px!important;
    height:24px!important;
    font-size:.8rem!important;
  }

  .mobile-menu-toggle{
    grid-area:menu!important;
    display:flex!important;
    width:48px!important;
    height:48px!important;
    border:1px solid rgba(174,194,226,.28)!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.035)!important;
    padding:11px!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:5px!important;
    cursor:pointer!important;
  }
  .mobile-menu-toggle span{
    display:block!important;
    width:100%!important;
    height:3px!important;
    border-radius:99px!important;
    background:#fff!important;
    transition:transform .2s ease,opacity .2s ease!important;
  }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)!important}
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0!important}
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)!important}

  .contact-group{
    grid-area:contact!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    gap:10px!important;
    align-items:center!important;
    margin:10px 0 0!important;
    padding:12px 14px!important;
    min-width:0!important;
    width:100%!important;
    border:1px solid rgba(137,158,190,.20)!important;
    border-radius:15px!important;
    background:rgba(255,255,255,.035)!important;
  }
  .contact{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    min-width:0!important;
    color:#fff!important;
  }
  .phone-icon{
    width:28px!important;
    height:28px!important;
    color:#fff!important;
    flex:0 0 auto!important;
  }
  .contact-text strong{
    display:block!important;
    color:#fff!important;
    font-size:1.08rem!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  .contact-text small{
    display:flex!important;
    align-items:center!important;
    gap:4px!important;
    margin-top:5px!important;
    color:#aebbd0!important;
    font-size:.69rem!important;
    white-space:nowrap!important;
  }
  .whatsapp-btn{
    width:46px!important;
    height:46px!important;
    flex:0 0 46px!important;
  }
  .whatsapp-btn svg{width:32px!important;height:32px!important}

  .display-controls{
    display:flex!important;
    grid-area:auto!important;
    position:static!important;
    margin:0!important;
  }
  .display-control{
    width:46px!important;
    height:46px!important;
    min-height:46px!important;
    padding:0!important;
  }
  .display-control .control-label{display:none!important}

  /* move the theme toggle visually into the contact bar */
  .contact-group + .display-controls{display:none!important}
  .contact-group::after{content:none!important}

  .header-download{display:none!important}

  .header-nav{
    grid-area:nav!important;
    display:none!important;
    width:100%!important;
    margin-top:10px!important;
    padding:10px!important;
    border:1px solid rgba(137,158,190,.20)!important;
    border-radius:15px!important;
    background:#08162a!important;
    box-shadow:0 14px 32px rgba(0,0,0,.28)!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .site-header.mobile-menu-open .header-nav{
    display:grid!important;
  }
  .header-nav-item{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:44px!important;
    padding:10px 8px!important;
    border-radius:10px!important;
    color:#fff!important;
    background:rgba(255,255,255,.035)!important;
    font-size:.9rem!important;
    text-align:center!important;
  }
  .header-nav-item::after{display:none!important}

  /* Mobile hero starts cleanly below the compact header */
  .hero{
    padding-top:34px!important;
  }

  /* Keep floating accessibility button away from Safari/Chrome browser controls */
  .floating-accessibility{
    left:12px!important;
    bottom:18px!important;
    width:54px!important;
    height:54px!important;
  }
  .floating-accessibility img{width:46px!important;height:46px!important}
}

/* Put the theme toggle inside the contact strip on phones using order/layout */
@media (max-width:900px){
  .display-controls{
    position:absolute!important;
    right:76px!important;
    top:84px!important;
    z-index:5!important;
  }
}
@media (max-width:560px){
  .site-header .container.row{padding:10px 12px 12px!important}
  .brand-logo{
    width:215px!important;
    max-width:68vw!important;
    max-height:100px!important;
  }
  .mobile-menu-toggle{width:44px!important;height:44px!important;padding:10px!important}
  .header-cart-icon{width:27px!important;height:27px!important}
  .contact-group{
    grid-template-columns:minmax(0,1fr) auto!important;
    padding:11px 12px!important;
  }
  .contact-text strong{font-size:1rem!important}
  .contact-text small{font-size:.64rem!important}
  .display-controls{
    right:72px!important;
    top:80px!important;
  }
  .header-nav{
    grid-template-columns:1fr 1fr!important;
  }
}
@media (max-width:390px){
  .brand-logo{width:195px!important;max-width:66vw!important}
  .contact-text strong{font-size:.95rem!important}
  .contact-text small{font-size:.60rem!important}
  .contact-group{padding-right:64px!important}
  .display-controls{right:68px!important;top:77px!important}
}

/* V19 — rolling compatibility ticker + dark carousel frame fill in light mode */
.trust-ticker{
  width:100%!important;
  max-width:1320px!important;
  margin:28px auto 34px!important;
  padding:0 24px!important;
}
.trust-ticker-inner{
  overflow:hidden!important;
  border:1px solid rgba(131,102,229,.25)!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,rgba(12,25,48,.95),rgba(7,17,34,.98))!important;
  box-shadow:0 18px 48px rgba(0,0,0,.22)!important;
  padding:28px 0 18px!important;
}
.trust-ticker-copy{
  padding:0 34px 20px!important;
  text-align:left!important;
}
.trust-ticker-kicker{
  display:block!important;
  margin-bottom:6px!important;
  color:#9b76f1!important;
  font-size:.70rem!important;
  font-weight:900!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
}
.trust-ticker-copy h2{
  margin:0!important;
  color:#fff!important;
  font-size:clamp(1.35rem,2.2vw,2rem)!important;
  line-height:1.2!important;
}
.trust-ticker-window{
  position:relative!important;
  overflow:hidden!important;
  width:100%!important;
  mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%)!important;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%)!important;
}
.trust-ticker-track{
  display:flex!important;
  width:max-content!important;
  animation:kk-logo-marquee 28s linear infinite!important;
  will-change:transform!important;
}
.trust-ticker-window:hover .trust-ticker-track,
.trust-ticker-window:focus-within .trust-ticker-track{
  animation-play-state:paused!important;
}
.trust-logo-set{
  display:flex!important;
  align-items:center!important;
  gap:62px!important;
  padding:16px 31px!important;
  flex:0 0 auto!important;
}
.trust-wordmark{
  flex:0 0 auto!important;
  white-space:nowrap!important;
  color:#d4dbea!important;
  font-size:clamp(1.12rem,1.8vw,1.55rem)!important;
  font-weight:850!important;
  letter-spacing:.015em!important;
  opacity:.78!important;
  transition:opacity .18s ease,transform .18s ease,color .18s ease!important;
}
.trust-wordmark:hover{
  opacity:1!important;
  color:#fff!important;
  transform:translateY(-1px)!important;
}
.trust-ticker-note{
  margin:10px 34px 0!important;
  color:#8290a7!important;
  font-size:.69rem!important;
  line-height:1.45!important;
}
@keyframes kk-logo-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* In light mode, keep the actual screenshot frame dark so non-16:9 images
   do not get white side/top/bottom bars inside the rounded carousel card. */
html[data-theme="light"] .kk-slide,
html[data-theme="light"] .kk-slide.is-active{
  background:#0a101b!important;
  border-color:#75839a!important;
}
html[data-theme="light"] .kk-slide img{
  background:#0a101b!important;
}
html[data-theme="light"] .kk-carousel{
  --carousel-frame-fill:#0a101b;
}

/* Light-mode ticker remains readable but visually integrated with the page. */
html[data-theme="light"] .trust-ticker-inner{
  background:linear-gradient(145deg,#eef1fb,#e7ebf7)!important;
  border-color:#b9c3d7!important;
  box-shadow:0 16px 40px rgba(23,35,58,.12)!important;
}
html[data-theme="light"] .trust-ticker-copy h2{
  color:#172033!important;
}
html[data-theme="light"] .trust-ticker-kicker{
  color:#5f3cac!important;
}
html[data-theme="light"] .trust-wordmark{
  color:#4a556b!important;
  opacity:.78!important;
}
html[data-theme="light"] .trust-wordmark:hover{
  color:#172033!important;
  opacity:1!important;
}
html[data-theme="light"] .trust-ticker-note{
  color:#5b677c!important;
}

@media(max-width:900px){
  .trust-ticker{padding:0 12px!important;margin:22px auto 28px!important}
  .trust-ticker-inner{border-radius:18px!important;padding-top:22px!important}
  .trust-ticker-copy{padding:0 22px 16px!important;text-align:center!important}
  .trust-logo-set{gap:38px!important;padding:14px 19px!important}
  .trust-ticker-track{animation-duration:23s!important}
  .trust-ticker-note{margin:8px 22px 0!important;text-align:center!important}
}
@media(max-width:560px){
  .trust-logo-set{gap:30px!important}
  .trust-wordmark{font-size:1.05rem!important}
  .trust-ticker-track{animation-duration:21s!important}
}
@media(prefers-reduced-motion:reduce){
  .trust-ticker-track{
    animation:none!important;
    transform:none!important;
  }
  .trust-ticker-window{
    overflow-x:auto!important;
    mask-image:none!important;
    -webkit-mask-image:none!important;
  }
  .trust-logo-set[aria-hidden="true"]{display:none!important}
}

/* V20 — sticky header, larger logo, supported platforms, cleaner mobile header */

/* Header behaves like a fixed pane: content scrolls underneath it. */
.site-header{
  position:sticky!important;
  top:0!important;
  z-index:5000!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  box-shadow:0 1px 0 rgba(122,141,172,.18),0 8px 28px rgba(0,0,0,.08)!important;
}
html{scroll-padding-top:128px!important}
html[data-theme="light"] .site-header{
  background:rgba(255,255,255,.96)!important;
}
html[data-theme="dark"] .site-header{
  background:rgba(2,8,23,.96)!important;
}

/* Larger company logo on desktop/tablet. */
@media(min-width:1181px){
  .site-header .container.row{
    grid-template-columns:330px 255px minmax(430px,1fr) auto auto auto!important;
  }
  .brand-logo{
    width:325px!important;
    max-width:325px!important;
    max-height:100px!important;
  }
}
@media(min-width:901px) and (max-width:1180px){
  .brand-logo{
    width:295px!important;
    max-width:295px!important;
    max-height:94px!important;
  }
}

/* Supported server platforms */
.supported-platforms{
  width:100%!important;
  max-width:1320px!important;
  margin:28px auto 30px!important;
  padding:0 24px!important;
}
.supported-platforms-inner{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:24px 40px!important;
  align-items:center!important;
  padding:30px 34px!important;
  border:1px solid rgba(131,102,229,.25)!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,rgba(12,25,48,.96),rgba(7,17,34,.98))!important;
  box-shadow:0 18px 48px rgba(0,0,0,.20)!important;
}
.supported-platforms-copy{min-width:0!important}
.supported-platforms-kicker{
  display:block!important;
  margin-bottom:7px!important;
  color:#9b76f1!important;
  font-size:.70rem!important;
  font-weight:900!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
}
.supported-platforms-copy h2{
  margin:0!important;
  color:#fff!important;
  font-size:clamp(1.5rem,2.4vw,2.15rem)!important;
  line-height:1.15!important;
}
.supported-platforms-copy p{
  margin:11px 0 0!important;
  color:#b7c4d8!important;
  line-height:1.65!important;
  max-width:720px!important;
}
.supported-platform-logos{
  display:flex!important;
  align-items:center!important;
  gap:18px!important;
}
.supported-platform-card{
  width:180px!important;
  min-height:164px!important;
  padding:14px 14px 12px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  border:1px solid rgba(167,184,211,.25)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.96)!important;
  color:#172033!important;
  text-align:center!important;
}
.supported-platform-card img{
  width:118px!important;
  height:96px!important;
  object-fit:contain!important;
  display:block!important;
}
.supported-platform-card strong{
  font-size:.89rem!important;
  line-height:1.25!important;
}
.supported-platform-note{
  grid-column:1/-1!important;
  margin:0!important;
  padding-top:16px!important;
  border-top:1px solid rgba(144,162,192,.18)!important;
  color:#8290a7!important;
  font-size:.76rem!important;
  line-height:1.55!important;
}
html[data-theme="light"] .supported-platforms-inner{
  background:linear-gradient(145deg,#eef1fb,#e7ebf7)!important;
  border-color:#b9c3d7!important;
  box-shadow:0 16px 40px rgba(23,35,58,.12)!important;
}
html[data-theme="light"] .supported-platforms-copy h2{color:#172033!important}
html[data-theme="light"] .supported-platforms-kicker{color:#5f3cac!important}
html[data-theme="light"] .supported-platforms-copy p{color:#334155!important}
html[data-theme="light"] .supported-platform-note{color:#526078!important}

/* Mobile / phone header: clean 3-row grid with no theme/WhatsApp collision. */
@media(max-width:900px){
  html{scroll-padding-top:220px!important}
  .site-header{
    position:sticky!important;
    top:0!important;
  }
  .site-header .container.row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    grid-template-areas:
      "brand cart menu"
      "contact contact controls"
      "nav nav nav"!important;
    gap:10px!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:10px 14px 12px!important;
    align-items:center!important;
  }
  .brand{
    grid-area:brand!important;
    min-width:0!important;
    padding:0!important;
  }
  .brand-logo{
    width:245px!important;
    max-width:64vw!important;
    max-height:108px!important;
  }
  .header-cart{
    grid-area:cart!important;
    margin:0!important;
  }
  .mobile-menu-toggle{
    grid-area:menu!important;
    margin:0!important;
  }

  .contact-group{
    grid-area:contact!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-width:0!important;
    gap:10px!important;
    margin:0!important;
    padding:10px 12px!important;
    border:1px solid rgba(137,158,190,.20)!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.035)!important;
  }
  .contact{
    min-width:0!important;
    flex:1 1 auto!important;
  }
  .contact-text strong{
    font-size:1rem!important;
    white-space:nowrap!important;
  }
  .contact-text small{
    font-size:.63rem!important;
    white-space:nowrap!important;
  }
  .whatsapp-btn{
    width:44px!important;
    height:44px!important;
    flex:0 0 44px!important;
  }

  .display-controls{
    grid-area:controls!important;
    position:static!important;
    right:auto!important;
    top:auto!important;
    z-index:auto!important;
    margin:0!important;
    align-self:stretch!important;
  }
  .display-control{
    width:48px!important;
    height:100%!important;
    min-height:48px!important;
    border-radius:14px!important;
  }
  .display-control .control-label{display:none!important}

  .header-nav{
    grid-area:nav!important;
    margin-top:0!important;
  }

  html[data-theme="light"] .contact-group{
    background:#f3f6fb!important;
    border-color:#c4cfde!important;
  }
  html[data-theme="light"] .contact{
    color:#172033!important;
  }
}
@media(max-width:560px){
  .brand-logo{
    width:225px!important;
    max-width:62vw!important;
  }
  .site-header .container.row{
    grid-template-columns:minmax(0,1fr) auto auto!important;
    padding:9px 11px 11px!important;
    gap:8px!important;
  }
  .contact-group{
    padding:9px 10px!important;
  }
  .phone-icon{
    width:25px!important;
    height:25px!important;
  }
  .contact-text strong{font-size:.94rem!important}
  .contact-text small{font-size:.59rem!important}
  .whatsapp-btn{
    width:41px!important;
    height:41px!important;
    flex-basis:41px!important;
  }
  .display-control{
    width:44px!important;
    min-height:44px!important;
  }
  .header-nav{
    grid-template-columns:1fr 1fr!important;
  }
}
@media(max-width:400px){
  .brand-logo{width:205px!important;max-width:60vw!important}
  .contact-text strong{font-size:.90rem!important}
  .contact-text small{font-size:.56rem!important}
}

/* Platform section responsive */
@media(max-width:900px){
  .supported-platforms{padding:0 12px!important;margin:22px auto 26px!important}
  .supported-platforms-inner{
    grid-template-columns:1fr!important;
    padding:24px 22px!important;
  }
  .supported-platforms-copy{text-align:center!important}
  .supported-platform-logos{
    justify-content:center!important;
    flex-wrap:wrap!important;
  }
  .supported-platform-note{text-align:center!important}
}
@media(max-width:520px){
  .supported-platform-card{
    width:145px!important;
    min-height:145px!important;
  }
  .supported-platform-card img{
    width:98px!important;
    height:82px!important;
  }
}

/* V20.1 — iPhone phone-number visibility fix */
@media(max-width:900px){
  .contact-group{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 48px!important;
    align-items:center!important;
    column-gap:10px!important;
  }
  .contact{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
    overflow:visible!important;
    opacity:1!important;
    visibility:visible!important;
  }
  .contact-text{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    min-width:0!important;
    opacity:1!important;
    visibility:visible!important;
  }
  .contact-text strong,
  .contact-text a{
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    color:#111827!important;
    font-size:1rem!important;
    font-weight:900!important;
    line-height:1.15!important;
    text-decoration:none!important;
    white-space:nowrap!important;
  }
  .contact-text small{
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    color:#475569!important;
    line-height:1.2!important;
  }
  html[data-theme="dark"] .contact-text strong,
  html[data-theme="dark"] .contact-text a{
    color:#f8fafc!important;
  }
  html[data-theme="dark"] .contact-text small{
    color:#cbd5e1!important;
  }
  .whatsapp-btn{
    grid-column:2!important;
    justify-self:end!important;
  }
}
@media(max-width:430px){
  .contact-group{
    grid-template-columns:minmax(0,1fr) 44px!important;
    padding:9px 10px!important;
  }
  .contact-text strong,
  .contact-text a{
    font-size:.94rem!important;
  }
  .contact-text small{
    font-size:.58rem!important;
  }
}

/* V21 mobile header */
@media(max-width:900px){
  .site-header{position:sticky!important;top:0!important;z-index:5000!important;background:linear-gradient(180deg,#020817,#041126)!important;border-bottom:1px solid rgba(151,169,199,.18)!important}
  .site-header .container.row{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;grid-template-areas:"brand cart menu" "nav nav nav" "contact contact controls"!important;width:100%!important;height:auto!important;min-height:0!important;padding:12px 16px 14px!important;gap:12px 10px!important;align-items:center!important}
  .brand{grid-area:brand!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;padding:0!important}
  .brand-logo{width:245px!important;max-width:64vw!important;max-height:118px!important;height:auto!important;object-fit:contain!important}
  .header-cart{grid-area:cart!important;justify-self:end!important;margin:0!important;padding:4px!important}
  .header-cart-icon{width:31px!important;height:31px!important}.header-cart-label{display:none!important}.header-cart-badge{min-width:27px!important;height:27px!important;font-size:.86rem!important}
  .mobile-menu-toggle{grid-area:menu!important;display:flex!important;width:48px!important;height:48px!important;border:0!important;background:transparent!important;padding:9px!important;margin:0!important;gap:5px!important;pointer-events:none!important}
  .mobile-menu-toggle span{height:3px!important;background:#fff!important;border-radius:99px!important}
  .header-nav{grid-area:nav!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;width:100%!important;gap:4px!important;margin:0!important;padding:10px 0 2px!important;border-top:1px solid rgba(147,165,195,.18)!important;border-left:0!important;border-right:0!important;border-bottom:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
  .header-nav-item{display:flex!important;align-items:center!important;justify-content:center!important;min-height:44px!important;padding:8px 3px!important;background:transparent!important;color:#fff!important;border:0!important;border-radius:0!important;font-size:.78rem!important;font-weight:760!important;line-height:1.15!important;text-align:center!important}
  .contact-group{grid-area:contact!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:12px!important;width:100%!important;margin:0!important;padding:12px 14px!important;border:1px solid rgba(132,153,188,.24)!important;border-radius:16px!important;background:rgba(7,20,40,.86)!important}
  .contact{display:flex!important;align-items:center!important;gap:12px!important;min-width:0!important}.phone-icon{width:34px!important;height:34px!important;color:#fff!important;flex:0 0 34px!important}
  .contact-text{display:flex!important;flex-direction:column!important;min-width:0!important}.contact-text strong{display:block!important;color:#fff!important;font-size:1.05rem!important;font-weight:850!important;line-height:1.05!important;white-space:nowrap!important}
  .contact-text small{display:block!important;margin-top:5px!important;color:#77a9ff!important;font-size:.78rem!important;font-weight:700!important;line-height:1.05!important;white-space:nowrap!important}
  .whatsapp-btn{width:52px!important;height:52px!important;flex:0 0 52px!important;border-radius:50%!important;background:#fff!important;border:0!important}.whatsapp-btn svg{width:36px!important;height:36px!important}
  .display-controls{grid-area:controls!important;position:static!important;right:auto!important;top:auto!important;margin:0!important;display:flex!important;align-items:stretch!important;height:100%!important}
  .display-control{width:54px!important;height:100%!important;min-height:76px!important;padding:0!important;border-radius:14px!important;border:1px solid rgba(128,150,185,.28)!important;background:rgba(8,22,43,.90)!important;color:#fff!important}
  .display-control .control-label{display:none!important}.theme-icon{font-size:1.3rem!important}
  html[data-theme="light"] .site-header{background:rgba(255,255,255,.98)!important;border-bottom-color:#d7dfeb!important}
  html[data-theme="light"] .header-nav{border-top-color:#d9e0eb!important}
  html[data-theme="light"] .header-nav-item{color:#172033!important}
  html[data-theme="light"] .mobile-menu-toggle span{background:#172033!important}
  html[data-theme="light"] .contact-group{background:#f6f8fc!important;border-color:#c3cedd!important}
  html[data-theme="light"] .phone-icon,html[data-theme="light"] .contact-text strong{color:#172033!important}
  html[data-theme="light"] .contact-text small{color:#2563eb!important}
  html[data-theme="light"] .display-control{background:#f4f7fb!important;color:#172033!important;border-color:#bcc8d9!important}
  .hero{padding-top:44px!important}
}
@media(max-width:560px){
  .site-header .container.row{padding:10px 12px 12px!important;gap:10px 8px!important}
  .brand-logo{width:220px!important;max-width:60vw!important;max-height:108px!important}
  .header-nav-item{font-size:.70rem!important;padding:7px 2px!important}
  .contact-group{padding:11px 12px!important;gap:10px!important}
  .phone-icon{width:31px!important;height:31px!important;flex-basis:31px!important}
  .contact-text strong{font-size:.98rem!important}.contact-text small{font-size:.70rem!important}
  .whatsapp-btn{width:48px!important;height:48px!important;flex-basis:48px!important}.whatsapp-btn svg{width:33px!important;height:33px!important}
  .display-control{width:50px!important;min-height:70px!important}
}

/* V22 — uniform ticker logo cards */
.trust-logo-set{gap:26px!important;padding:14px 13px!important}
.trust-logo-card{
  width:260px!important;height:104px!important;flex:0 0 260px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:10px 14px!important;border-radius:16px!important;
  border:1px solid rgba(163,177,201,.32)!important;
  background:#fff!important;box-shadow:0 8px 22px rgba(0,0,0,.10)!important
}
.trust-logo-card img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important}
html[data-theme="light"] .trust-logo-card{border-color:#c5cfdd!important;box-shadow:0 7px 18px rgba(24,40,66,.09)!important}
html[data-theme="dark"] .trust-logo-card{background:#fff!important;border-color:rgba(205,215,231,.30)!important}
@media(max-width:900px){
  .trust-logo-set{gap:18px!important;padding:12px 9px!important}
  .trust-logo-card{width:210px!important;height:88px!important;flex-basis:210px!important;padding:8px 11px!important;border-radius:14px!important}
}
@media(max-width:560px){
  .trust-logo-card{width:180px!important;height:78px!important;flex-basis:180px!important}
}

/* V23 — stronger KLIPKAST header branding */
@media (min-width: 901px){
  .site-header .brand-logo,
  .site-header .logo,
  .header-logo,
  .brand-logo{
    width:auto!important;
    height:92px!important;
    max-height:92px!important;
    min-width:150px!important;
    object-fit:contain!important;
  }

  .site-header .brand,
  .site-header .logo-wrap,
  .header-brand{
    min-width:190px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
  }

  .header-phone .phone-number,
  .phone-number,
  a[href^="tel:"] .phone-number{
    font-size:22px!important;
    line-height:1.08!important;
    font-weight:800!important;
    letter-spacing:.25px!important;
    opacity:1!important;
  }

  .header-phone,
  .phone-contact,
  .header-contact{
    min-width:300px!important;
  }

  .header-phone .phone-label,
  .phone-contact .phone-label,
  .header-contact .phone-label{
    font-size:13px!important;
    font-weight:700!important;
    opacity:1!important;
  }
}

/* Keep branding clearly visible on phones/tablets too */
@media (max-width: 900px){
  .site-header .brand-logo,
  .site-header .logo,
  .header-logo,
  .brand-logo{
    height:82px!important;
    width:auto!important;
    max-height:82px!important;
    object-fit:contain!important;
  }

  .header-phone .phone-number,
  .phone-number,
  a[href^="tel:"] .phone-number{
    font-size:20px!important;
    font-weight:800!important;
    opacity:1!important;
  }
}

/* V24 — stronger header branding and smaller ticker cards */
@media (min-width:1181px){
  .site-header .container.row{
    grid-template-columns:390px 315px minmax(430px,1fr) auto auto auto!important;
    column-gap:22px!important;
  }
  .site-header .brand,.header-brand,.brand{min-width:350px!important}
  .site-header .brand-logo,.brand-logo,.header-logo{
    width:365px!important;max-width:365px!important;height:auto!important;
    max-height:118px!important;min-height:94px!important;object-fit:contain!important;opacity:1!important
  }
  .contact-group,.header-contact,.phone-contact{min-width:300px!important}
  .contact-text strong,.phone-number,.header-phone .phone-number{
    font-size:1.34rem!important;line-height:1.05!important;font-weight:900!important;
    letter-spacing:.025em!important;opacity:1!important
  }
  .contact-text small{font-size:.78rem!important;font-weight:750!important;opacity:1!important}
  .phone-icon{width:29px!important;height:29px!important;flex:0 0 29px!important}
  .whatsapp-btn{width:48px!important;height:48px!important;flex-basis:48px!important}
}
@media (min-width:901px) and (max-width:1180px){
  .site-header .brand-logo,.brand-logo{
    width:320px!important;max-width:320px!important;max-height:104px!important
  }
  .contact-text strong,.phone-number{font-size:1.18rem!important;font-weight:900!important}
  .contact-text small{font-size:.72rem!important}
}
@media (max-width:900px){
  .site-header .brand-logo,.brand-logo{
    width:265px!important;max-width:68vw!important;max-height:124px!important;min-height:86px!important
  }
  .contact-text strong,.phone-number{
    font-size:1.08rem!important;font-weight:900!important;line-height:1.08!important
  }
}
@media (max-width:560px){
  .site-header .brand-logo,.brand-logo{
    width:238px!important;max-width:64vw!important;max-height:114px!important
  }
  .contact-text strong,.phone-number{font-size:1rem!important}
}

.trust-logo-set{gap:18px!important;padding:10px 9px!important}
.trust-logo-card{
  width:190px!important;height:78px!important;flex:0 0 190px!important;
  padding:7px 10px!important;border-radius:13px!important
}
.trust-logo-card img{width:100%!important;height:100%!important;object-fit:contain!important}
@media(max-width:900px){
  .trust-logo-card{width:165px!important;height:68px!important;flex-basis:165px!important;padding:6px 8px!important}
}
@media(max-width:560px){
  .trust-logo-card{width:145px!important;height:60px!important;flex-basis:145px!important}
}

/* V25 — Solutions section */
.kk-solutions{width:100%!important;max-width:1320px!important;margin:34px auto!important;padding:0 24px!important;scroll-margin-top:145px!important}
.kk-solutions-inner{padding:42px!important;border:1px solid rgba(131,102,229,.27)!important;border-radius:24px!important;background:linear-gradient(145deg,rgba(11,24,48,.97),rgba(6,16,34,.98))!important;box-shadow:0 18px 54px rgba(0,0,0,.24)!important}
.kk-solutions-heading{max-width:980px!important}.kk-solutions-kicker,.kk-solutions-value-kicker{display:block!important;margin-bottom:8px!important;color:#9a73f1!important;font-size:.72rem!important;font-weight:900!important;letter-spacing:.15em!important;text-transform:uppercase!important}
.kk-solutions-heading h2{margin:0!important;color:#fff!important;font-size:clamp(1.8rem,3vw,2.65rem)!important;line-height:1.12!important;letter-spacing:-.025em!important}.kk-solutions-heading>p{max-width:940px!important;margin:14px 0 0!important;color:#b9c6da!important;font-size:1.04rem!important;line-height:1.7!important}
.kk-solutions-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;margin-top:28px!important}.kk-solutions-grid article{min-width:0!important;padding:24px!important;border:1px solid rgba(131,106,213,.22)!important;border-radius:18px!important;background:rgba(8,19,38,.78)!important}.kk-solutions-icon{font-size:1.75rem!important;margin-bottom:12px!important}.kk-solutions-grid h3{margin:0 0 9px!important;color:#fff!important;font-size:1.14rem!important}.kk-solutions-grid p{margin:0!important;color:#adbbd0!important;line-height:1.65!important}
.kk-solutions-value{display:grid!important;grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr)!important;gap:28px!important;margin-top:18px!important;padding:28px!important;border:1px solid rgba(255,209,102,.23)!important;border-radius:18px!important;background:linear-gradient(135deg,rgba(31,32,58,.88),rgba(15,28,49,.88))!important}.kk-solutions-value h3{margin:0!important;color:#fff!important;font-size:clamp(1.35rem,2.1vw,1.85rem)!important;line-height:1.25!important}.kk-solutions-value p{margin:13px 0 0!important;color:#bac6d9!important;line-height:1.68!important}.kk-solutions-value-points{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;align-content:start!important}.kk-solutions-value-points span{display:flex!important;align-items:center!important;min-height:40px!important;padding:8px 10px!important;border:1px solid rgba(157,126,229,.28)!important;border-radius:10px!important;background:rgba(7,17,34,.56)!important;color:#e2e8f4!important;font-size:.78rem!important;font-weight:800!important}.kk-solutions-disclaimer{margin:15px 0 0!important;color:#8795ab!important;font-size:.75rem!important;line-height:1.55!important}
html[data-theme="light"] .kk-solutions-inner{background:#fff!important;border-color:#c3cede!important;box-shadow:0 16px 42px rgba(22,35,59,.12)!important}html[data-theme="light"] .kk-solutions-heading h2,html[data-theme="light"] .kk-solutions-grid h3,html[data-theme="light"] .kk-solutions-value h3{color:#111827!important}html[data-theme="light"] .kk-solutions-heading>p,html[data-theme="light"] .kk-solutions-grid p,html[data-theme="light"] .kk-solutions-value p{color:#334155!important}html[data-theme="light"] .kk-solutions-grid article{background:#f7f8fc!important;border-color:#cbd4e2!important}html[data-theme="light"] .kk-solutions-value{background:#f6f3fd!important;border-color:#cdbce9!important}html[data-theme="light"] .kk-solutions-value-points span{background:#fff!important;color:#28364d!important;border-color:#bca9df!important}html[data-theme="light"] .kk-solutions-disclaimer{color:#526078!important}
@media(max-width:900px){.kk-solutions{padding:0 12px!important;margin:26px auto!important;scroll-margin-top:220px!important}.kk-solutions-inner{padding:28px 22px!important}.kk-solutions-heading{text-align:center!important}.kk-solutions-grid{grid-template-columns:1fr!important}.kk-solutions-value{grid-template-columns:1fr!important}}
@media(max-width:560px){.kk-solutions-inner{padding:24px 16px!important}.kk-solutions-value{padding:20px 16px!important}.kk-solutions-value-points{grid-template-columns:1fr!important}}

/* V29 footer compatibility ticker + content-provider disclaimer */
.site-footer .trust-ticker{margin:0 auto 18px!important;padding:0 12px!important;max-width:1480px!important;}
.site-footer .trust-ticker-inner{margin:0 auto!important;}
.service-disclaimer{max-width:1080px;margin:0 auto 12px!important;text-align:center!important;font-size:.68rem!important;line-height:1.5!important;color:#8190a8!important;}
html[data-theme="light"] .service-disclaimer{color:#6b7280!important;}
@media(max-width:900px){.kk-solutions-grid{grid-template-columns:1fr!important}.service-disclaimer{font-size:.64rem!important;padding:0 8px!important}}


/* v32 pricing-card equal height + free-trial form placement */
@media (min-width:1181px){
  .plans{align-items:stretch!important;grid-auto-rows:auto!important}
  .plans > .plan-wrap{height:100%!important;display:grid!important;grid-template-rows:minmax(0,1fr) 110px!important;align-self:stretch!important}
  .plans > .plan-wrap > .plan{height:100%!important;min-height:0!important;display:flex!important;flex-direction:column!important}
  .plans > .plan-wrap > .buy-widget{height:110px!important;margin-top:0!important;align-self:end!important}
}
/* The trial request form now sits directly below pricing and above supported platforms. */
.plans + .form-wrap{margin:0!important;padding:34px clamp(24px,8vw,140px) 36px!important;background:#071326!important}
.plans + .form-wrap + .supported-platforms{margin-top:34px!important}
html[data-theme="light"] .plans + .form-wrap{background:#f5f7fb!important}
@media(max-width:620px){
  .plans + .form-wrap{padding:28px 18px 30px!important}
  .plans + .form-wrap + .supported-platforms{margin-top:24px!important}
}

/* v33 — true equal-height pricing cards (fix Trial overflow) */
@media (min-width:1181px){
  .plans{align-items:stretch!important;grid-auto-rows:auto!important}
  .plans > .plan-wrap{
    height:auto!important;
    min-height:0!important;
    align-self:stretch!important;
    display:flex!important;
    flex-direction:column!important;
    padding-bottom:20px!important;
  }
  .plans > .plan-wrap > .plan{
    box-sizing:border-box!important;
    height:auto!important;
    min-height:0!important;
    flex:1 1 auto!important;
    display:flex!important;
    flex-direction:column!important;
  }
  .plans > .plan-wrap > .plan > ul{flex:0 0 auto!important}
  .plans > .plan-wrap > .buy-widget{
    box-sizing:border-box!important;
    height:auto!important;
    min-height:90px!important;
    margin-top:auto!important;
    padding:20px 20px 0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .plans > .plan-wrap > .buy-widget > *{width:100%!important}
}

/* v34 — restore full-width centered Free Trial form below pricing */
.plans + .form-wrap{
  width:100%!important;
  max-width:1320px!important;
  margin:28px auto 0!important;
  padding:0 24px!important;
  background:transparent!important;
}
.plans + .form-wrap .card{
  width:100%!important;
  max-width:none!important;
  margin:0 auto!important;
  box-sizing:border-box!important;
  padding:30px 34px!important;
}
.plans + .form-wrap + .supported-platforms{
  margin-top:34px!important;
}
html[data-theme="light"] .plans + .form-wrap{
  background:transparent!important;
}
@media(max-width:900px){
  .plans + .form-wrap{
    max-width:100%!important;
    margin:22px auto 0!important;
    padding:0 16px!important;
  }
  .plans + .form-wrap .card{
    padding:24px!important;
  }
}
@media(max-width:520px){
  .plans + .form-wrap{
    padding:0 12px!important;
  }
  .plans + .form-wrap .card{
    padding:20px!important;
  }
}

/* v35 — pricing cards must stay exactly the same physical height.
   The legacy global .plan.selected { transform: scale(1.05) } made the
   selected Trial card protrude above/below the other three even though the
   grid row heights were equal. Disable scaling inside the pricing grid. */
.plans .plan.selected{
  transform:none!important;
  z-index:2!important;
}
.plans .plan{
  transform:none!important;
  transform-origin:center center!important;
}

/* v40 — comparison frame + truly synchronized pricing columns */
.kk-compare{
  width:100%!important;
  max-width:1320px!important;
  margin:34px auto 38px!important;
  padding:0 24px!important;
  box-sizing:border-box!important;
}
.kk-compare-inner{
  width:100%!important;
  box-sizing:border-box!important;
  padding:38px 40px!important;
  border:1px solid rgba(131,102,229,.27)!important;
  border-radius:24px!important;
  background:linear-gradient(145deg,rgba(11,24,48,.97),rgba(6,16,34,.98))!important;
  box-shadow:0 18px 54px rgba(0,0,0,.24)!important;
  overflow:hidden!important;
}
.kk-compare-heading{max-width:980px!important;margin:0 0 26px!important;text-align:left!important}
.kk-compare-heading .kk-growth-kicker{display:block!important;margin-bottom:8px!important;color:#9a73f1!important;font-size:.72rem!important;font-weight:900!important;letter-spacing:.15em!important;text-transform:uppercase!important}
.kk-compare-inner h2{margin:0!important;color:#fff!important;font-size:clamp(1.8rem,3vw,2.55rem)!important;line-height:1.12!important;letter-spacing:-.025em!important}
.kk-compare-lead{max-width:940px!important;margin:14px 0 0!important;color:#b9c6da!important;font-size:1rem!important;line-height:1.68!important}
.kk-compare-table-wrap{
  width:100%!important;
  box-sizing:border-box!important;
  overflow-x:auto!important;
  border:1px solid rgba(131,106,213,.25)!important;
  border-radius:18px!important;
  background:rgba(8,19,38,.82)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.kk-compare-table{width:100%!important;min-width:1000px!important;border-collapse:separate!important;border-spacing:0!important;table-layout:fixed!important}
.kk-compare-table th,.kk-compare-table td{padding:18px 16px!important;text-align:left!important;vertical-align:top!important;border-bottom:1px solid rgba(131,106,213,.18)!important;line-height:1.52!important;overflow-wrap:anywhere!important}
.kk-compare-table thead th{background:#0d1a30!important;color:#f8fafc!important;font-size:.94rem!important;border-bottom:1px solid rgba(166,184,217,.28)!important}
.kk-compare-table thead th:first-child{width:16%!important}.kk-compare-table thead th:not(:first-child){width:28%!important}
.kk-compare-table tbody th{font-weight:850!important;color:#f3f6fb!important;background:rgba(255,255,255,.025)!important}
.kk-compare-table td{color:#b9c6d8!important;background:rgba(8,19,38,.46)!important}
.kk-compare-table tbody tr:nth-child(even) td,.kk-compare-table tbody tr:nth-child(even) th{background:rgba(255,255,255,.025)!important}
.kk-compare-table .kk-col-highlight{background:linear-gradient(180deg,rgba(124,58,237,.18),rgba(59,130,246,.08))!important;color:#f8fafc!important;box-shadow:inset 1px 0 rgba(150,105,246,.24),inset -1px 0 rgba(150,105,246,.24)!important}
.kk-compare-table tbody tr:nth-child(even) .kk-col-highlight{background:linear-gradient(180deg,rgba(124,58,237,.22),rgba(59,130,246,.10))!important}
.kk-compare-brand{display:block!important;font-weight:900!important;font-size:1rem!important;color:#fff!important}
.kk-compare-pill{display:inline-flex!important;margin-top:8px!important;padding:5px 9px!important;border-radius:999px!important;background:rgba(124,58,237,.30)!important;border:1px solid rgba(163,121,255,.42)!important;color:#e7ddff!important;font-size:.7rem!important;font-weight:850!important}
.kk-compare-note{margin-top:18px!important;padding:15px 17px!important;border:1px solid rgba(74,168,255,.22)!important;border-radius:13px!important;background:rgba(74,168,255,.07)!important;color:#b9c6d8!important;line-height:1.58!important}
.kk-compare-note strong{color:#fff!important}
.kk-compare-actions{display:flex!important;gap:12px!important;flex-wrap:wrap!important;margin-top:18px!important}
.kk-compare-actions a{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:11px 15px!important;border:1px solid rgba(131,106,213,.28)!important;border-radius:10px!important;background:rgba(8,19,38,.78)!important;color:#e8edf7!important;text-decoration:none!important;font-weight:800!important}
.kk-compare-actions a:hover{border-color:#8d61f5!important}
html[data-theme="light"] .kk-compare-inner{background:#fff!important;border-color:#c3cede!important;box-shadow:0 16px 42px rgba(22,35,59,.12)!important}
html[data-theme="light"] .kk-compare-inner h2{color:#111827!important}
html[data-theme="light"] .kk-compare-lead{color:#526078!important}
html[data-theme="light"] .kk-compare-table-wrap{background:#fff!important;border-color:#cbd4e2!important;box-shadow:0 10px 28px rgba(22,35,59,.08)!important}
html[data-theme="light"] .kk-compare-table thead th{background:#132039!important;color:#fff!important;border-bottom-color:#2d3e5d!important}
html[data-theme="light"] .kk-compare-table tbody th{color:#182238!important;background:#f4f6fa!important}
html[data-theme="light"] .kk-compare-table td{color:#344258!important;background:#fff!important}
html[data-theme="light"] .kk-compare-table tbody tr:nth-child(even) td,html[data-theme="light"] .kk-compare-table tbody tr:nth-child(even) th{background:#f8f9fc!important}
html[data-theme="light"] .kk-compare-table .kk-col-highlight{background:#f0ebff!important;color:#172037!important;box-shadow:inset 1px 0 #d7c8fa,inset -1px 0 #d7c8fa!important}
html[data-theme="light"] .kk-compare-table tbody tr:nth-child(even) .kk-col-highlight{background:#ebe4ff!important}
html[data-theme="light"] .kk-compare-brand{color:#172037!important}
html[data-theme="light"] .kk-compare-pill{background:#e4d7ff!important;border-color:#c9b1ff!important;color:#5d32aa!important}
html[data-theme="light"] .kk-compare-note{background:#f1f7ff!important;border-color:#bfd9f6!important;color:#425269!important}
html[data-theme="light"] .kk-compare-note strong{color:#172037!important}
html[data-theme="light"] .kk-compare-actions a{background:#fff!important;color:#25334a!important;border-color:#cbd4e2!important}

/* All four pricing wrappers use the same structure. Heights are populated by JS after Ecwid renders. */
@media(min-width:1181px){
  .plans>.plan-wrap{display:flex!important;flex-direction:column!important;height:auto!important;min-height:0!important;align-self:stretch!important;padding-bottom:20px!important}
  .plans>.plan-wrap>.plan{display:flex!important;flex-direction:column!important;flex:0 0 auto!important;height:auto!important;min-height:0!important;box-sizing:border-box!important}
  .plans>.plan-wrap>.buy-widget{box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;margin-top:0!important;padding:18px 20px!important;overflow:hidden!important}
  .plans>.plan-wrap>.buy-widget>*{width:100%!important;max-width:100%!important}
}
@media(max-width:900px){
  .kk-compare{padding:0 12px!important;margin:26px auto 30px!important}
  .kk-compare-inner{padding:28px 22px!important}
  .kk-compare-heading{text-align:center!important;margin-left:auto!important;margin-right:auto!important}
}
@media(max-width:560px){
  .kk-compare-inner{padding:24px 14px!important}
  .kk-compare-table th,.kk-compare-table td{padding:14px 12px!important}
  .kk-compare-actions a{width:100%!important}
}

/* v41 — purchase CTAs moved above pricing cards */
.pricing-cta-row{
  grid-column:1 / -1!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:24px!important;
  width:100%!important;
  margin:6px 0 16px!important;
  align-items:stretch!important;
}
.pricing-cta-cell{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.pricing-cta-cell .buy-widget{
  width:100%!important;
  min-height:64px!important;
  padding:8px 20px!important;
  margin:0!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:transparent!important;
}
.pricing-cta-cell .buy-widget>*{
  width:100%!important;
  max-width:100%!important;
}
.plans>.plan-wrap{
  padding-bottom:0!important;
  overflow:visible!important;
}
.plans>.plan-wrap>.plan{
  border-radius:17px!important;
}
@media(max-width:1180px){
  .pricing-cta-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;margin-bottom:14px!important}
}
@media(max-width:620px){
  .pricing-cta-row{grid-template-columns:1fr!important;gap:10px!important}
}


/* v42 — Time Shift spotlight + hard horizontal centering protection */
html,body{max-width:100%!important;overflow-x:hidden!important;overscroll-behavior-x:none!important}
body,.site-header,main,.site-footer,.showcase,.kk-carousel{left:auto!important;right:auto!important;max-width:100%!important}
.kk-carousel{width:100%!important;margin-left:0!important;margin-right:0!important}
.kk-timeshift-spotlight{width:100%;max-width:1320px;margin:34px auto;padding:0 24px;box-sizing:border-box}
.kk-timeshift-inner{padding:34px 38px;border:1px solid rgba(131,102,229,.26);border-radius:24px;background:linear-gradient(140deg,rgba(17,31,58,.98),rgba(8,19,39,.98));box-shadow:0 18px 48px rgba(0,0,0,.20)}
.kk-timeshift-heading{max-width:980px;margin:0 auto 24px;text-align:center}
.kk-timeshift-kicker{display:block;margin-bottom:8px;color:#9d72f5;font-size:.74rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
.kk-timeshift-heading h2{margin:0;color:#fff;font-size:clamp(1.75rem,3vw,2.45rem);line-height:1.15;letter-spacing:-.025em}
.kk-timeshift-heading p{margin:13px auto 0;color:#b8c5d8;line-height:1.65;font-size:1rem}
.kk-timeshift-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.kk-timeshift-grid article{position:relative;padding:24px 24px 22px;border:1px solid rgba(121,148,190,.22);border-radius:17px;background:rgba(255,255,255,.035)}
.kk-timeshift-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;margin-bottom:13px;border-radius:12px;background:linear-gradient(135deg,#7c3aed,#3b82f6);color:#fff;font-size:1.35rem;font-weight:900;box-shadow:0 10px 24px rgba(59,130,246,.18)}
.kk-timeshift-grid h3{margin:0 0 9px;color:#fff;font-size:1.14rem}
.kk-timeshift-grid p{margin:0;color:#b8c5d8;line-height:1.6}
.kk-timeshift-grid a{display:inline-flex;margin-top:14px;color:#a98cff;font-weight:850;text-decoration:none}
.kk-timeshift-grid a:hover{text-decoration:underline}
html[data-theme="light"] .kk-timeshift-inner{background:#fff;border-color:#cbd5e1;box-shadow:0 16px 42px rgba(23,36,61,.10)}
html[data-theme="light"] .kk-timeshift-heading h2,html[data-theme="light"] .kk-timeshift-grid h3{color:#172037}
html[data-theme="light"] .kk-timeshift-heading p,html[data-theme="light"] .kk-timeshift-grid p{color:#526078}
html[data-theme="light"] .kk-timeshift-grid article{background:#f7f8fc;border-color:#d7deea}
@media(max-width:760px){.kk-timeshift-spotlight{padding:0 12px;margin:24px auto}.kk-timeshift-inner{padding:26px 18px}.kk-timeshift-grid{grid-template-columns:1fr}}


/* v45 compact capability statement — v42 light/dark palette safe */
.hero-codec-callout{display:inline-block;margin:14px auto 0;padding:10px 18px;border:1px solid rgba(138,92,244,.35);border-radius:999px;background:rgba(138,92,244,.08);color:#101827;font-weight:800;line-height:1.4}
html[data-theme="dark"] .hero-codec-callout{color:#f7f9ff;background:rgba(138,92,244,.13);border-color:rgba(160,108,255,.45)}
@media(max-width:620px){.hero-codec-callout{display:block;border-radius:14px;font-size:.9rem}}






/* v56 — authoritative mobile pricing layout.
   IMPORTANT: Do not add nth-of-type/order rules for plan sorting.
   The HTML source order is already:
   Trial → Monthly → Annual → Lifetime.
   Mobile simply renders that source order, with each CTA inside its own plan wrapper. */
.mobile-plan-cta{
  display:none;
}

@media (max-width:760px){
  #plans{
    display:block !important;
  }

  #plans > .pricing-cta-row{
    display:none !important;
  }

  #plans > .plan-wrap{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 0 20px !important;
    order:initial !important;
  }

  #plans > .plan-wrap-trial,
  #plans > .plan-wrap-monthly,
  #plans > .plan-wrap-annual,
  #plans > .plan-wrap-lifetime{
    order:initial !important;
  }

  .mobile-plan-cta{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:100%;
    box-sizing:border-box;
    margin:0 0 14px 0;
    padding:18px 16px;
    border:1px solid rgba(140,160,190,.18);
    border-radius:18px;
    background:rgba(7,18,38,.42);
  }

  .mobile-plan-cta .buy-widget,
  .mobile-plan-cta .trial-cta,
  .mobile-plan-cta > *{
    max-width:100%;
  }

  .mobile-plan-cta .ecwid-productBrowser-details-optionPanel,
  .mobile-plan-cta .ecwid-btn,
  .mobile-plan-cta button,
  .mobile-plan-cta a{
    margin-left:auto;
    margin-right:auto;
  }

  #plans [data-plan-cta]{
    display:none !important;
  }
}