/* Trial call to action: double the height of the 80px CTA banners (160px). White in light mode (under the black consultant box) and light grey in dark mode (under the orange one); the video dots are orange. */
.trial{padding:0 0 var(--cta-gap)}
.tcta{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:32px;min-height:160px;padding:28px 32px;border-radius:var(--r-card);background:var(--trial-bg);color:var(--trial-fg)}
.tc-l{flex:1;min-width:0}
.tcta h2{display:flex;align-items:center;flex-wrap:wrap;gap:0 .32em;font:700 clamp(26px,3.2vw,34px)/1.15 var(--head);letter-spacing:-.03em;color:var(--trial-fg)}
.tcta .lg{display:inline-flex;align-items:center;justify-content:center;height:1.28em;padding:0 .12em;border-radius:.28em;background:var(--orange)}
.tcta .lg img{height:.86em;width:auto;display:block}
.tcta ul{list-style:none;display:flex;flex-wrap:nowrap;white-space:nowrap;gap:8px 16px;margin-top:16px}
.tcta li{display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:500;color:var(--trial-fg)}
.tcta li svg{color:var(--trial-check);flex:none}
.tcta .cta{margin-top:0;flex:none}
.btn-k{background:var(--trial-btn-bg);color:var(--trial-btn-fg)}
.btn-k:hover{background:color-mix(in srgb,var(--trial-btn-bg) 85%,#808080)}
.btn-o{background:var(--orange);color:#0a0a0a;border-color:var(--orange)}
.btn-o:hover{background:color-mix(in srgb,var(--orange) 88%,#000)}
.tcta .btn:focus-visible{outline:2px solid var(--trial-fg);outline-offset:3px}
@media (max-width:1180px){.tcta ul{flex-wrap:wrap;white-space:normal}}   /* wraps earlier since the chip became "Free migration on yearly plans" */
@media (max-width:820px){.tcta{flex-direction:column;align-items:flex-start;padding:28px 24px}}

/* the picture: a stippled black-and-white video, multiplied into the box colour, then every black dot is turned orange by an orange layer that only lightens (it can never darken or cover the text) */
.tv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;z-index:-2;pointer-events:none}
.tov{position:absolute;inset:0;z-index:-1;background:var(--orange);mix-blend-mode:lighten;pointer-events:none}
.tc-l,.tcta .cta{position:relative;z-index:1}
.vpause{position:absolute;right:10px;top:10px;z-index:2;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:var(--trial-fg);color:var(--trial-bg);cursor:pointer}
.vpause:focus-visible{outline:2px solid var(--trial-fg);outline-offset:3px}
.vpause::after{content:"";position:absolute;inset:-4px}

/* phones only: the box colour sits behind the stacked words so they stay readable over the picture (desktop is the original, untouched) */
@media (max-width:820px){.tcta::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--trial-bg) 0%,var(--trial-bg) 58%,color-mix(in srgb,var(--trial-bg) 0%,transparent) 80%)}}