/* Hero «Бенто» (html.hero-bento) and the blocks right under it.
   The first screen is a set of plates, like the cards on bidzaar.com: a grey title plate, a pink action plate,
   a blue figure plate, a soft-pink speakers plate and, on the right, one grey plate with the story and the case.
   Small plates keep the site's skewed shape; plates with faces or long content use plain rounded corners so
   nothing is cut off. */

/* ---------- Grid ---------- */
html.hero-bento body main>.wow-hero{padding:24px 0 0!important;overflow:hidden!important}
html.hero-bento body .wow-hero-grid{grid-template-columns:1fr 1fr 1.25fr!important;grid-template-areas:"meta meta vis" "title title vis" "sub sub vis" "act stat vis" "people people vis";gap:16px!important;align-items:stretch}
html.hero-bento body .wow-hero-grid::before{content:"";grid-area:1/1/4/3;background:#f7f7f7;border-radius:36px;z-index:0;animation:hx-rise .7s .05s cubic-bezier(.2,.9,.3,1.2) backwards}
html.hero-bento body :is(.wow-copy,.hx-facts){display:contents}
html.hero-bento body .wow-copy>script{display:none}

/* Title plate */
html.hero-bento body .wow-meta{grid-area:meta;z-index:1;padding:44px 48px 0;margin:0!important;gap:8px}
html.hero-bento body .wow-meta>*{white-space:nowrap;padding:9px 18px!important;border-radius:99px;font-size:16px;line-height:1;background:#fff!important;border:0!important;color:#111!important}
html.hero-bento body .wow-meta .wow-tag{background:#ff0067!important;color:#fff!important}
html.hero-bento body .wow-hero .wow-title{grid-area:title;z-index:1;padding:22px 48px 0;font-size:72px!important;line-height:1.05!important}
html.hero-bento body .wow-hero .wow-subtitle{grid-area:sub;z-index:1;padding:0 48px 48px;margin:18px 0 0!important;font-size:26px!important}

/* Action plate (pink, skewed) */
html.hero-bento body .hx-actions{grid-area:act;display:flex;flex-direction:column;justify-content:center;gap:10px;margin:0!important;background:#ff0067;clip-path:url(#bz-side-1);padding:40px 32px;animation:hx-rise .7s .2s cubic-bezier(.2,.9,.3,1.2) backwards}
html.hero-bento body .hx-second{display:inline-flex}
html.hero-bento body main .hx-actions .btn{min-height:68px!important;font-size:21px!important;width:100%;justify-content:center;padding:0 20px!important;margin:0!important}
html.hero-bento body main .hx-actions .wow-cta{clip-path:url(#bz-narrow-1)!important;background:#fff!important;color:#ff0067!important}
html.hero-bento body main .hx-actions .hx-second{clip-path:url(#bz-narrow-2)!important;background:#e0005a!important;color:#fff!important}
html.hero-bento body main .hx-actions .btn:hover{transform:translateY(-2px)}

/* Figure plate (blue, skewed): 60 is struck out, 30 pops in. */
html.hero-bento body .hx-stat{grid-area:stat;display:flex;flex-direction:column;justify-content:center;gap:8px;background:#1f5bff;clip-path:url(#bz-side-2);padding:40px 34px;animation:hx-rise .7s .32s cubic-bezier(.2,.9,.3,1.2) backwards}
.hx-stat b{display:flex;align-items:center;gap:12px;font:400 64px/1 Eesti,Arial,sans-serif;letter-spacing:-.02em;color:#fff}
.hx-stat b i{font-style:normal;font-size:.8em;color:#fff}
.hx-stat>span{font-size:16px;color:#ffffffd9}
.hx-from{position:relative;color:#ffffff99}
.hx-from::after{content:"";position:absolute;left:-4%;right:-4%;top:52%;height:5px;border-radius:3px;background:#fff;transform-origin:left;transform:scaleX(0);animation:hx-strike .6s 1.2s cubic-bezier(.7,0,.2,1) forwards}
.hx-to{display:inline-block;color:#fff;animation:hx-pop .7s 1.7s cubic-bezier(.3,1.7,.5,1) backwards}

/* Speakers plate: rounded, roomy, faces never clipped. */
html.hero-bento body .hx-people{grid-area:people;display:flex;align-items:center;gap:20px;background:#fff2f7;border-radius:32px;padding:26px 32px;animation:hx-rise .7s .44s cubic-bezier(.2,.9,.3,1.2) backwards}
.hx-faces{display:flex;flex:none}
.hx-faces img{width:64px;height:64px;border-radius:50%;border:3px solid #fff2f7;margin-left:-16px;background:#fff}
.hx-faces img:first-child{margin-left:0}
.hx-people>span:last-child{font-size:17px;line-height:1.35;color:#111}
.hx-people b{display:block;font-weight:400;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#ff0067;margin-bottom:4px}

/* Right plate: the story and the MTS Ads case together, rounded so nothing is cut. */
html.hero-bento body .wow-visual{grid-area:vis;display:flex;flex-direction:column;background:#f7f7f7;border-radius:36px;padding:24px 24px 32px;min-width:0;animation:hx-rise .8s .12s cubic-bezier(.2,.9,.3,1.2) backwards}
html.hero-bento body .wow-visual .st{background:transparent!important;clip-path:none!important;border:0!important;border-radius:0!important;padding:4px 0 0!important;margin:0!important;max-width:none!important;flex:1;display:flex;flex-direction:column;justify-content:flex-end}
html.hero-bento body .wow-hero .wow-case.case-result{margin:20px 4px 0!important;padding:18px 20px!important;background:#fff;border:0!important;border-radius:22px;max-width:none}
html.hero-bento body .wow-hero .case-result .wow-stamp{color:#ff0067!important;margin-bottom:6px}
html.hero-bento body .wow-hero .case-result .wow-case-text{font-size:16px!important;color:#111!important}

/* ---------- Ticker of pains: a pink ribbon, slightly tilted ---------- */
html.hero-bento body .hx-ticker{display:block;position:relative;overflow:hidden;white-space:nowrap;background:#ff0067;transform:rotate(-2deg);width:110vw;margin:56px 0 24px -5vw;padding:22px 0}
.hx-track{display:inline-flex;align-items:center;gap:28px;animation:hx-run 40s linear infinite;font-size:24px;color:#fff}
.hx-track i{font-style:normal;color:#ffffffb3}

/* ---------- Keyframes ---------- */
@keyframes hx-run{to{transform:translateX(-50%)}}
@keyframes hx-strike{to{transform:scaleX(1)}}
@keyframes hx-pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes hx-rise{from{transform:translateY(40px) scale(.94)}to{transform:none}}
@media(prefers-reduced-motion:reduce){
 .hx-track,.hx-to,.hx-from::after,html.hero-bento body .wow-hero-grid::before,html.hero-bento body :is(.hx-actions,.hx-stat,.hx-people,.wow-visual){animation:none!important}
 .hx-from::after{transform:scaleX(1)}
}

/* Pieces that only the Bento hero uses stay hidden anywhere else. */
html:not(.hero-bento) :is(.hx-second,.hx-facts,.hx-date,.hx-ticker){display:none}
.hx-date{display:none}

/* ---------- Topics: the new presenter pose, no shadow ---------- */
html body .wow-topics .wt-buyer{filter:none!important;box-shadow:none!important}
html body .wow-topics .wt-center::before,html body .wow-topics .wt-center::after,html body .wow-topics .wt-podium,html body .wow-topics .wt-ring{display:none!important}

/* ---------- Phones ---------- */
@media(max-width:1100px) and (min-width:761px){
 html.hero-bento body .wow-hero .wow-title{font-size:56px!important}
 html.hero-bento body .hx-stat b{font-size:52px}
}
@media(max-width:760px){
 html.hero-bento body .wow-hero-grid{grid-template-columns:1fr!important;grid-template-areas:"meta" "title" "sub" "act" "stat" "people" "vis"}
 html.hero-bento body .wow-hero-grid::before{grid-area:1/1/4/2;border-radius:28px}
 html.hero-bento body .wow-meta{padding:28px 22px 0}
 html.hero-bento body .wow-meta>*{font-size:14px;padding:8px 14px!important}
 html.hero-bento body .wow-hero .wow-title{padding:14px 22px 0;font-size:40px!important}
 html.hero-bento body .wow-hero .wow-subtitle{padding:0 22px 30px;font-size:20px!important}
 html.hero-bento body .hx-actions,html.hero-bento body .hx-stat{padding:30px 22px}
 html.hero-bento body .hx-actions .wow-cta{display:inline-flex!important}
 html.hero-bento body main .hx-actions .btn{min-height:62px!important;font-size:19px!important}
 html.hero-bento body .hx-stat b{font-size:48px}
 html.hero-bento body .hx-people{padding:22px;gap:14px;border-radius:26px}
 html.hero-bento body .hx-faces img{width:52px;height:52px;margin-left:-14px}
 html.hero-bento body .hx-people>span:last-child{font-size:15px}
 html.hero-bento body .wow-visual{padding:18px 14px 20px;border-radius:28px}
 html.hero-bento body .hx-ticker{margin:40px 0 12px -5vw;padding:16px 0}
 .hx-track{font-size:18px;gap:20px}
}

/* ---------- Skewed plates without clipping ----------
   The skewed shape lives on a background layer (::before), so plates keep the site's uneven outline
   while faces, text and the story inside are never cut. */
html.hero-bento body .wow-hero-grid::before{border-radius:0!important;clip-path:url(#bz-side-2)}
html.hero-bento body :is(.wow-visual,.hx-people,.hx-actions,.hx-stat){position:relative;isolation:isolate;background:transparent!important;border-radius:0!important;clip-path:none!important}
html.hero-bento body :is(.wow-visual,.hx-people,.hx-actions,.hx-stat)::before{content:"";position:absolute;inset:0;z-index:-1}
html.hero-bento body .wow-visual::before{background:#f7f7f7;clip-path:url(#bz-side-1)}
html.hero-bento body .hx-people::before{background:#fff2f7;clip-path:url(#bz-narrow-2)}
html.hero-bento body .hx-actions::before{background:#ff0067;clip-path:url(#bz-side-1)}
html.hero-bento body .hx-stat::before{background:#1f5bff;clip-path:url(#bz-side-2)}
/* Room for the slanted top edge of the tall right plate. */
html.hero-bento body .wow-visual{padding:48px 26px 36px}
html.hero-bento body .wow-hero .wow-case.case-result{border-radius:0!important;clip-path:url(#bz-narrow-1);padding:22px 26px!important}
html.hero-bento body .hx-people{padding:30px 36px}
@media(max-width:760px){
 html.hero-bento body .wow-visual{padding:34px 14px 24px}
 html.hero-bento body .hx-people{padding:26px 22px}
}

/* The story sits at the top of the right plate; the case stays pinned to the bottom. */
html.hero-bento body .wow-visual .st{justify-content:flex-start!important;flex:0 0 auto!important}
html.hero-bento body .wow-hero .wow-visual .wow-case.case-result{margin-top:auto!important}
/* A taller stage fills the right plate: the buyer grows instead of leaving a gap above the case. */
@media(min-width:761px){html.hero-bento body .wow-visual .st-stage{aspect-ratio:1/1.12}}
html.hero-bento body .wow-hero .wow-visual .wow-case.case-result{margin-top:16px!important}
html.hero-bento body .wow-visual{justify-content:space-between}

/* The site's skew path is drawn for wide cards; stretched over the tall right plate its corners warp.
   Here the plate is a rounded rectangle turned slightly in perspective: still uneven, corners stay even. */
html.hero-bento body .wow-visual::before{clip-path:none!important;border-radius:44px;inset:8px 6px;transform:perspective(1600px) rotateY(-6deg) rotateZ(1.2deg);transform-origin:50% 50%}
/* The top edge runs down from left to right. */
html.hero-bento body .wow-visual::before{transform:rotate(2.2deg)!important;inset:14px 10px}

/* ---------- Problem: three pains, then the solution ----------
   Each pain is a grey skewed card with a pink numbered circle; the solution is a dark plate with a pink label. */
html body .pains{margin-top:28px;display:grid;gap:12px;max-width:720px}
html body .pain-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
html body .pain-list li{position:relative;isolation:isolate;display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:center;padding:20px 26px}
html body .pain-list li::before{content:"";position:absolute;inset:0;z-index:-1;background:#f7f7f7;clip-path:url(#bz-narrow-2)}
html body .pain-list li:nth-child(2)::before{clip-path:url(#bz-narrow-1)}
html body .pain-list b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#ff0067;color:#fff;font:400 20px/1 Eesti,Arial,sans-serif;box-shadow:0 0 0 6px #ffe0ec}
html body .pain-list p{margin:0;font-size:18px;line-height:1.4;color:#111}
html body .pain-solution{position:relative;isolation:isolate;margin-top:6px;padding:28px 32px 30px;color:#fff}
html body .pain-solution::before{content:"";position:absolute;inset:0;z-index:-1;background:#111;clip-path:url(#bz-side-1)}
html body .pain-solution-label{display:inline-block;margin-bottom:14px;padding:7px 16px;border-radius:99px;background:#ff0067;font-size:14px;line-height:1;letter-spacing:.08em;text-transform:uppercase}
html body .pain-solution p{margin:0;font-size:20px;line-height:1.4;color:#fff}
html body .pain-solution p+p{margin-top:8px;font-size:17px;color:#ffffffc7}

/* ---------- Gift: «Подарок за регистрацию» is the headline of the card ---------- */
html body .process-section .process-gift .diagnostic-card{padding:40px 36px 36px!important;gap:20px!important}
html body .diagnostic-card .gift-label{display:flex;align-items:center;gap:14px;margin:0!important;font:400 34px/1.1 Eesti,Arial,sans-serif!important;letter-spacing:-.01em!important;text-transform:none!important;color:#fff!important}
html body .diagnostic-card .gift-badge{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fff;transform:rotate(-8deg);animation:gift-wiggle 2.8s ease-in-out 2s infinite}
html body .diagnostic-card .gift-badge .icon{width:30px;height:30px;fill:none;stroke:#ff0067;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html body .diagnostic-card .diagnostic-heading{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 16px 22px}
html body .diagnostic-card .diagnostic-heading::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;clip-path:url(#bz-narrow-1)}
html body .diagnostic-card h3{color:#111!important;font-size:22px!important;line-height:1.2!important;margin:0!important}
html body .diagnostic-card .gift-symbol{width:72px!important;height:72px!important;flex:none}
@keyframes gift-wiggle{0%,100%{transform:rotate(-8deg)}6%{transform:rotate(10deg) scale(1.08)}12%{transform:rotate(-12deg)}18%{transform:rotate(-8deg)}}
@media(prefers-reduced-motion:reduce){html body .diagnostic-card .gift-badge{animation:none}}

@media(max-width:760px){
 html body .pain-list li{grid-template-columns:38px 1fr;gap:14px;padding:18px 18px}
 html body .pain-list b{width:38px;height:38px;font-size:17px}
 html body .pain-list p{font-size:16px}
 html body .pain-solution{padding:24px 22px 26px}
 html body .pain-solution p{font-size:18px}
 html body .pain-solution p+p{font-size:16px}
 html body .diagnostic-card .gift-label{font-size:26px!important}
 html body .diagnostic-card .gift-badge{width:48px;height:48px}
 html body .diagnostic-card h3{font-size:19px!important}
}
/* The section's paragraph colour is pinned with !important; the solution plate needs white on black. */
html body .process-section .cinema-copy .pain-solution p{color:#fff!important;font-size:20px!important}
html body .process-section .cinema-copy .pain-solution p+p{color:#ffffffc7!important;font-size:17px!important}
html body .process-section .cinema-copy .pain-list p{color:#111!important;font-size:18px!important;margin:0!important}
@media(max-width:760px){
 html body .process-section .cinema-copy .pain-solution p{font-size:18px!important}
 html body .process-section .cinema-copy .pain-solution p+p{font-size:16px!important}
 html body .process-section .cinema-copy .pain-list p{font-size:16px!important}
}

/* The three pains sit in one grey skewed plate, divided by thin lines. */
html body .pain-list{position:relative;isolation:isolate;gap:0;padding:14px 30px}
html body .pain-list::before{content:"";position:absolute;inset:0;z-index:-1;background:#f7f7f7;clip-path:url(#bz-side-2)}
html body .pain-list li{padding:18px 0}
html body .pain-list li::before{display:none}
html body .pain-list li+li{border-top:1px solid #e6e6e6}
@media(max-width:760px){html body .pain-list{padding:10px 20px}html body .pain-list li{padding:16px 0}}

/* Solution: a soft-pink plate, slightly turned (rounded corners, nothing clipped), a pink label and a check mark. */
html body .pain-solution{margin-top:14px;padding:30px 96px 32px 34px}
html body .pain-solution::before{clip-path:none!important;background:#fff2f7;border-radius:32px;transform:rotate(-1.1deg);inset:4px 2px}
html body .pain-solution::after{content:"";position:absolute;right:30px;top:50%;width:52px;height:52px;margin-top:-26px;border-radius:50%;background:#ff0067 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/26px no-repeat;box-shadow:0 0 0 7px #ffd6e6}
html body .process-section .cinema-copy .pain-solution p{color:#111!important}
html body .process-section .cinema-copy .pain-solution p+p{color:#4d4d4d!important}
@media(max-width:760px){
 html body .pain-solution{padding:24px 22px 76px}
 html body .pain-solution::after{top:auto;bottom:20px;right:auto;left:22px;margin-top:0;width:44px;height:44px;background-size:22px}
}

/* Pains and solution use the same skewed outlines as the hero plates (the action and figure plates),
   with enough padding that the slanted corners never touch the text. */
html body .pain-list::before{clip-path:url(#bz-side-1)!important}
html body .pain-list{padding:22px 34px 24px}
html body .pain-solution{padding:36px 100px 38px 36px}
html body .pain-solution::before{clip-path:url(#bz-side-2)!important;border-radius:0!important;transform:none!important;inset:0!important}
@media(max-width:760px){
 html body .pain-list{padding:18px 22px 20px}
 html body .pain-solution{padding:30px 24px 84px}
}

/* Pains and solution: rounded plates turned slightly in perspective, in opposite directions.
   The site's skew paths warp on wide plates (one round corner, three sharp), which reads as cut. */
html body .pain-list::before,html body .pain-solution::before{clip-path:none!important;border-radius:34px!important;inset:0!important}
html body .pain-list::before{transform:perspective(1400px) rotateY(3deg) rotate(-.9deg)!important}
html body .pain-solution::before{transform:perspective(1400px) rotateY(-3deg) rotate(.9deg)!important}
html body .pain-list{padding:20px 34px 22px}
html body .pain-solution{padding:32px 100px 34px 36px}

/* Gift: the middle is a coupon on the pink card — translucent, dashed white edge, white text, bigger map. */
html body .diagnostic-card .diagnostic-heading{padding:18px 20px 18px 24px}
html body .diagnostic-card .diagnostic-heading::before{clip-path:none!important;background:#ffffff26!important;border:2px dashed #ffffffa6;border-radius:24px;transform:rotate(-1.2deg)}
html body .diagnostic-card h3{color:#fff!important;font-size:24px!important}
html body .diagnostic-card .gift-symbol{width:92px!important;height:92px!important;margin:-14px -6px -14px 0}
html body .diagnostic-card .gift-symbol img{filter:drop-shadow(0 10px 14px rgba(120,0,40,.35))}
@media(max-width:760px){
 html body .pain-list{padding:16px 22px 18px}
 html body .pain-solution{padding:28px 24px 84px}
 html body .diagnostic-card h3{font-size:20px!important}
 html body .diagnostic-card .gift-symbol{width:76px!important;height:76px!important}
}

/* Gift coupon: the map and the button share one dashed frame. */
html body .diagnostic-card .gift-coupon{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:16px;padding:22px 22px 24px}
html body .diagnostic-card .gift-coupon::before{content:"";position:absolute;inset:0;z-index:-1;background:#ffffff26;border:2px dashed #ffffffb3;border-radius:28px;transform:rotate(-1.2deg)}
html body .diagnostic-card .gift-coupon .diagnostic-heading{padding:0 0 0 4px}
html body .diagnostic-card .gift-coupon .diagnostic-heading::before{display:none!important}
html body .diagnostic-card .gift-coupon .btn{width:100%;justify-content:center}
@media(max-width:760px){html body .diagnostic-card .gift-coupon{padding:18px 16px 20px}}

/* Gift: as tall as the pains + solution column; inside the coupon the map stays on top, the button goes down. */
@media(min-width:761px){
 html body .process-section .cinema-panel{align-items:stretch!important}
 html body .process-section .process-gift{align-self:stretch!important;display:flex!important;flex-direction:column}
 html body .process-section .process-gift .diagnostic-card{flex:1;margin-top:0!important}
 html body .diagnostic-card .gift-coupon{flex:1;justify-content:space-between;gap:48px;padding:28px 24px 26px}
 html body .diagnostic-card .gift-coupon .diagnostic-heading{flex-direction:column;align-items:flex-start;gap:18px}
 html body .diagnostic-card .gift-coupon .gift-symbol{width:150px!important;height:150px!important;margin:0!important;align-self:center}
 html body .diagnostic-card h3{font-size:28px!important}
}
@media(min-width:761px){
 html body .diagnostic-card .gift-coupon .gift-symbol{width:190px!important;height:190px!important}
 html body .diagnostic-card .gift-coupon .gift-symbol img{width:100%!important;height:100%!important;max-width:none!important;object-fit:contain}
}
@media(min-width:761px){
 html body main .process-section .process-gift .diagnostic-card .gift-coupon .gift-symbol{width:190px!important;height:190px!important;max-width:none!important}
 html body main .process-section .process-gift .diagnostic-card .gift-coupon .gift-symbol img{width:190px!important;height:190px!important;max-width:none!important;max-height:none!important}
}
/* Smaller gift: centred against the column instead of stretched, a medium map, a moderate gap to the button. */
@media(min-width:761px){
 html body .process-section .cinema-panel{align-items:center!important}
 html body .process-section .process-gift{align-self:center!important}
 html body .process-section .process-gift .diagnostic-card{flex:0 0 auto}
 html body .diagnostic-card .gift-coupon{flex:0 0 auto;gap:26px;padding:24px 22px 22px}
 html body main .process-section .process-gift .diagnostic-card .gift-coupon .gift-symbol,
 html body main .process-section .process-gift .diagnostic-card .gift-coupon .gift-symbol img{width:130px!important;height:130px!important}
 html body .diagnostic-card .gift-coupon .diagnostic-heading{gap:6px}
 html body .diagnostic-card h3{font-size:26px!important}
}

/* The MTS Ads case takes the blue plate (where 60 → 30 was): white type on blue, the figure stays bright. */
html.hero-bento body .wow-hero .hx-facts .wow-case.case-result{grid-area:stat;position:relative;isolation:isolate;display:flex!important;align-items:center;margin:0!important;padding:34px 32px!important;max-width:none!important;background:transparent!important;border:0!important;border-radius:0!important;clip-path:none!important;animation:hx-rise .7s .32s cubic-bezier(.2,.9,.3,1.2) backwards}
html.hero-bento body .wow-hero .hx-facts .wow-case.case-result::before{content:"";display:block!important;position:absolute;inset:0;z-index:-1;background:#1f5bff;clip-path:url(#bz-side-2)}
html.hero-bento body .wow-hero .hx-facts .wow-case.case-result::after{display:none!important}
html.hero-bento body .wow-hero .hx-facts .case-result .wow-stamp{display:inline-block!important;margin:0 0 12px!important;padding:6px 12px!important;border-radius:99px!important;background:#fff!important;color:#1f5bff!important;font-size:11px!important}
html.hero-bento body .wow-hero .hx-facts .case-result .wow-case-text{font-size:17px!important;line-height:1.4!important;color:#fff!important}
html.hero-bento body .wow-hero .hx-facts .case-result .wow-case-text strong{color:#fff!important;font-weight:500;background:#ffffff2e;padding:0 .2em;border-radius:6px;white-space:nowrap}
@media(prefers-reduced-motion:reduce){html.hero-bento body .wow-hero .hx-facts .wow-case.case-result{animation:none!important}}
@media(max-width:760px){html.hero-bento body .wow-hero .hx-facts .wow-case.case-result{padding:28px 22px!important}html.hero-bento body .wow-hero .hx-facts .case-result .wow-case-text{font-size:16px!important}}
/* The right plate now holds only the story; centre it vertically. */
html.hero-bento body .wow-visual{justify-content:center!important}
html.hero-bento.wow-js body .wow-hero .hx-facts .wow-case.case-result{opacity:1}
html.hero-bento body .wow-hero .hx-facts .case-result :is(.wow-stamp,.wow-case-text){opacity:1!important;clip-path:none!important;transform:none!important}
html.hero-bento body .wow-hero .hx-facts .wow-case.case-result{clip-path:none!important;overflow:visible!important}
html.hero-bento body .wow-hero .hx-facts .wow-case.case-result::before{padding:0!important;border-radius:0!important;-webkit-mask:none!important;mask:none!important;animation:none!important}

/* Tighter title plate: less air between the chips, the headline and the subtitle. */
@media(min-width:761px){
 html.hero-bento body .wow-meta{padding-top:40px!important}
 html.hero-bento body .wow-hero .wow-title{padding-top:10px!important}
 html.hero-bento body .wow-hero .wow-subtitle{margin-top:10px!important;padding-bottom:40px!important}
}
@media(max-width:760px){
 html.hero-bento body .wow-hero .wow-title{padding-top:8px!important}
 html.hero-bento body .wow-hero .wow-subtitle{margin-top:8px!important}
}
/* The plate grid has a 16px row gap that also falls between the chips, the headline and the subtitle;
   pull those rows back together. */
html.hero-bento body .wow-hero .wow-title{margin-top:-10px!important;padding-top:0!important}
html.hero-bento body .wow-hero .wow-subtitle{margin-top:-6px!important}
@media(min-width:761px){html.hero-bento body .wow-hero .wow-subtitle{padding-bottom:36px!important}}

/* Speakers moved from the hero into the solution plate. */
html.hero-bento body .wow-hero-grid{grid-template-areas:"meta meta vis" "title title vis" "sub sub vis" "act stat vis"!important}
html body .pain-solution .hx-people{display:flex!important;align-items:center;gap:14px;margin-top:20px;padding:16px 0 0!important;max-width:none;background:none!important;border-top:1px solid #ffd3e3;animation:none!important}
html body .pain-solution .hx-people::before{display:none!important}
html body .pain-solution .hx-faces img{width:52px;height:52px;border-color:#fff2f7}
html body .pain-solution .hx-people>span:last-child{font-size:16px;color:#111}
@media(max-width:760px){
 html.hero-bento body .wow-hero-grid{grid-template-areas:"meta" "title" "sub" "act" "stat" "vis"!important}
 html body .pain-solution .hx-faces img{width:44px;height:44px;margin-left:-12px}
 html body .pain-solution .hx-people>span:last-child{font-size:14px}
}

/* Pains and solution use exactly the hero outlines: pains = the grey title plate, solution = the pink action plate. */
html body .pain-list::before{clip-path:url(#bz-side-2)!important;border-radius:0!important;transform:none!important;inset:0!important}
html body .pain-solution::before{clip-path:url(#bz-side-1)!important;border-radius:0!important;transform:none!important;inset:0!important}
html body .pain-list{padding:30px 40px 30px}
html body .pain-solution{padding:40px 104px 40px 40px}
@media(max-width:760px){
 html body .pain-list{padding:24px 24px 24px}
 html body .pain-solution{padding:34px 26px 88px}
}

/* Pains and solution: slanted top and bottom like the hero plates, but every corner equally round,
   so the sides never look cut. The solution is shifted right and leans the other way. */
html body .pain-list::before{clip-path:none!important;border-radius:36px!important;inset:0!important;transform:skewY(-2.2deg)!important}
html body .pain-solution::before{clip-path:none!important;border-radius:36px!important;inset:0!important;transform:skewY(1.8deg) rotate(-.6deg)!important}
@media(min-width:761px){
 html body .pain-solution{margin-left:88px!important;margin-right:-28px;margin-top:22px!important}
}
@media(max-width:760px){
 html body .pain-solution{margin-left:18px!important;margin-top:18px!important}
}

/* Gift card: same treatment as pains and solution — a pink layer underneath with every corner equally round,
   slanted top and bottom; the card itself is no longer clipped. */
html body .process-section .process-gift .diagnostic-card{position:relative;isolation:isolate;background:transparent!important;clip-path:none!important;border-radius:0!important;overflow:visible!important}
html body .process-section .process-gift .diagnostic-card::before{content:"";display:block!important;position:absolute;inset:0;z-index:-1;background:#ff0067!important;border-radius:38px;transform:skewY(-2.4deg);clip-path:none!important;padding:0!important;-webkit-mask:none!important;mask:none!important;opacity:1!important;animation:none!important}
html body .process-section .process-gift .diagnostic-card::after{display:none!important}

/* Compact pains: less padding, tighter rows, smaller circles. */
html body .pain-list{padding:16px 30px!important}
html body .pain-list li{padding:11px 0!important;gap:14px!important;grid-template-columns:34px 1fr!important}
html body .pain-list b{width:34px!important;height:34px!important;font-size:16px!important;box-shadow:0 0 0 4px #ffe0ec!important}
html body .process-section .cinema-copy .pain-list p{font-size:17px!important;line-height:1.35!important}
@media(max-width:760px){
 html body .pain-list{padding:14px 20px!important}
 html body .pain-list li{padding:10px 0!important;gap:12px!important;grid-template-columns:30px 1fr!important}
 html body .pain-list b{width:30px!important;height:30px!important;font-size:15px!important}
 html body .process-section .cinema-copy .pain-list p{font-size:15px!important}
}

/* ---------- Layout: pains left, solution right; the gift is its own wide block below ---------- */
html body .process-section .cinema-panel{display:block!important}
html body .process-section .cinema-copy{max-width:none!important}
html body .pains{max-width:none!important}
@media(min-width:761px){
 html body .pains{grid-template-columns:1fr 1fr;gap:28px!important;align-items:stretch}
 html body .pain-solution{margin:0!important;display:flex;flex-direction:column;justify-content:center}
 html body .pain-list{display:flex!important;flex-direction:column;justify-content:center}
}
@media(max-width:760px){html body .pain-solution{margin-left:0!important}}

/* Gift: one wide pink band — the headline on the left, the coupon with the map and button on the right. */
html body .process-section .process-gift{margin-top:44px!important;max-width:none!important;width:100%!important}
@media(min-width:761px){
 html body .process-section .process-gift .diagnostic-card{display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);align-items:center;gap:40px!important;padding:40px 48px!important;min-height:0!important}
 html body .process-section .process-gift .diagnostic-card::before{transform:skewY(-1.2deg)!important;border-radius:44px!important}
 html body .diagnostic-card .gift-label{font-size:46px!important;line-height:1.05!important}
 html body .diagnostic-card .gift-badge{width:72px!important;height:72px!important}
 html body .diagnostic-card .gift-badge .icon{width:36px!important;height:36px!important}
 html body .diagnostic-card .gift-coupon{flex-direction:row!important;align-items:center;justify-content:space-between;gap:24px!important;padding:22px 26px!important}
 html body .diagnostic-card .gift-coupon .diagnostic-heading{flex-direction:row!important;align-items:center;gap:16px!important;padding:0!important}
 html body main .process-section .process-gift .diagnostic-card .gift-coupon .gift-symbol,
 html body main .process-section .process-gift .diagnostic-card .gift-coupon .gift-symbol img{width:96px!important;height:96px!important}
 html body .diagnostic-card .gift-coupon .gift-symbol{order:-1;margin:-12px 0!important}
 html body .diagnostic-card .gift-coupon .btn{width:auto!important;flex:none;padding:0 34px!important}
}
html body .pain-solution-label{align-self:flex-start}
html body .process-section .cinema-copy .pain-list p{max-width:none!important}
html body main>section.process-section{padding-bottom:40px!important}
/* Pains in the same size as the solution's main line. */
html body .process-section .cinema-copy .pain-list p{font-size:20px!important;line-height:1.4!important}
@media(max-width:760px){html body .process-section .cinema-copy .pain-list p{font-size:18px!important}}
/* Pains are marked with crosses instead of numbers. */
html body .pain-list b{font-size:15px!important;font-weight:700!important;line-height:1!important}
/* Gift band: the hero plate outline — the left side taller than the right, the top running down to the right —
   made by a slight perspective turn of a rounded plate, so the corners stay even. */
@media(min-width:761px){
 html body .process-section .process-gift .diagnostic-card::before{transform:perspective(1500px) rotateY(6deg)!important;transform-origin:0 50%!important;border-radius:40px!important}
}
@media(max-width:760px){
 html body .process-section .process-gift .diagnostic-card::before{transform:perspective(700px) rotateY(7deg)!important;transform-origin:0 50%!important;border-radius:32px!important}
}
@media(min-width:761px){html body .process-section .process-gift .diagnostic-card::before{transform:perspective(2200px) rotateY(5deg) scaleX(1.01)!important;transform-origin:50% 50%!important}}
@media(max-width:760px){html body .process-section .process-gift .diagnostic-card::before{transform:perspective(900px) rotateY(6deg)!important;transform-origin:50% 50%!important}}
@media(min-width:761px){html body .process-section .process-gift .diagnostic-card::before{transform:perspective(2200px) rotateY(5deg) scaleX(.975)!important}}
/* Gift band: the exact hero-like outline drawn by shapes.js (rounded corners, top running down to the right). */
html body .process-section .process-gift .diagnostic-card::before{transform:none!important;border-radius:0!important;clip-path:var(--shape)!important}

/* Topic tiles: more room above and below the text. */
html body .wow-topics .wt-tile{padding:40px 30px 42px!important}
@media(max-width:760px){html body .wow-topics .wt-tile:nth-child(n){padding:32px 24px 34px!important}}
html body .wow-topics .wt-tile{padding:54px 32px 56px!important}
@media(max-width:760px){html body .wow-topics .wt-tile:nth-child(n){padding:40px 24px 42px!important}}

/* Gift coupon breaks out of the pink band: a soft-pink ticket with a pink dashed edge, turned slightly,
   pushed past the band's right and bottom edges so it reads on both the pink and the white page. */
@media(min-width:761px){
 html body .process-section .process-gift .diagnostic-card{padding-right:0!important;overflow:visible!important}
 html body .diagnostic-card .gift-coupon{transform:translate(36px,34px) rotate(-2.4deg);padding:26px 30px!important}
 html body .process-section .process-gift{margin-bottom:40px!important}
}
html body .diagnostic-card .gift-coupon::before{background:#fff2f7!important;border:2px dashed #ff0067!important;border-radius:30px 38px 26px 44px!important;transform:none!important;box-shadow:0 22px 40px -22px rgba(120,0,40,.45)}
html body .diagnostic-card .gift-coupon h3{color:#ff0067!important}
html body .diagnostic-card .gift-coupon .btn{background:#ff0067!important;color:#fff!important}
html body .diagnostic-card .gift-coupon .btn:hover{background:#e0005a!important}
@media(max-width:760px){
 html body .diagnostic-card .gift-coupon{transform:translate(14px,28px) rotate(-2deg);margin-bottom:28px}
}


/* ---------- One entrance system (reveal.js) ----------
   The plates no longer pop in one by one; the whole hero rises together. Before the script runs
   (.wow-js from the head script), the parts it reveals stay hidden so nothing shows and then jumps. */
html body :is(.wow-hero-grid,.wow-visual,.hx-actions,.hx-people,.hx-facts .wow-case)::before,
html body :is(.wow-hero-grid,.wow-visual,.hx-actions,.hx-people,.hx-facts .wow-case){animation:none!important}
html.hero-bento body .wow-hero-grid::before{animation:none!important}
html.wow-js:not(.reveal-done) :is(.wow-hero-grid,.hx-ticker,.process-section .cinema-copy>h2,.pain-list,.pain-solution,.process-gift,.topics-title,.wt-center,.wt-tile,#program .section-top,#program .agenda,#program .wrap>.btn,.speakers .wrap>h2,.speaker,#materials .materials,.company-title-card,.company-mission-card,.clients-section h2,.client-logos){opacity:0}
/* Old per-element hide rules are no longer needed. */
html.wow-js body .wow-hero .wow-copy,html.wow-js body .wow-hero .wow-case,html.wow-js body .process-gift .diagnostic-card,html.wow-js body .wow-hero .st{opacity:1}

/* The coupon sticks out above the pink band (and still past its right edge). */
@media(min-width:761px){
 html body .diagnostic-card .gift-coupon{transform:translate(36px,-46px) rotate(-2.4deg)!important}
 html body .process-section .process-gift{margin-top:84px!important;margin-bottom:0!important}
}
@media(max-width:760px){
 html body .diagnostic-card .gift-coupon{transform:translate(12px,-6px) rotate(-2deg)!important;margin-bottom:0!important}
}


/* ---------- Hero plates as separate cards ----------
   The grey title plate is a real element now (.hx-title), so each plate can open on its own. */
html.hero-bento body .wow-hero-grid{grid-template-areas:"plate plate vis" "act stat vis"!important;perspective:1600px}
html.hero-bento body .wow-hero-grid::before{display:none!important}
html.hero-bento body .hx-title{grid-area:plate;position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;padding:40px 48px 36px}
html.hero-bento body .hx-title::before{content:"";position:absolute;inset:0;z-index:-1;background:#f7f7f7;clip-path:url(#bz-side-2)}
html.hero-bento body .hx-title .wow-meta{padding:0!important}
html.hero-bento body .hx-title .wow-title{padding:0!important;margin-top:6px!important}
html.hero-bento body .hx-title .wow-subtitle{padding:0!important;margin-top:4px!important}
html.hero-bento body .hx-title>script{display:none}
@media(max-width:760px){
 html.hero-bento body .wow-hero-grid{grid-template-areas:"plate" "act" "stat" "vis"!important}
 html.hero-bento body .hx-title{padding:28px 22px 26px}
}
/* Hidden until reveal.js opens them. */
html.wow-js:not(.reveal-done) :is(.hx-title,.hx-actions,.hx-facts .wow-case,.wow-hero .wow-visual){opacity:0}
html.wow-js:not(.reveal-done) .wow-hero-grid{opacity:1}

/* Gift band keeps its height; the coupon only sticks out above it and stays inside on the right. */
@media(min-width:761px){
 html body .process-section .process-gift .diagnostic-card{padding:30px 40px 30px 48px!important}
 html body .diagnostic-card .gift-coupon{transform:translateY(-44px) rotate(-1.8deg)!important;padding:18px 22px!important;margin-bottom:-44px}
}


/* ---------- Gift, rebuilt: one pink band ----------
   Left: a gift badge and «Подарок за регистрацию». Centre: the risk map, rising above the band.
   Right: the gift name in white and a white button. The skewed outline is drawn by shapes.js. */
html body .process-section .process-gift{margin-top:72px!important}
html body .gift-band{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr);align-items:center;gap:32px;padding:36px 48px;color:#fff}
html body .gift-band::before{content:"";position:absolute;inset:0;z-index:-1;background:#ff0067;clip-path:var(--shape);border-radius:36px}
html body .gift-band .gb-label{display:flex;align-items:center;gap:18px;margin:0;font:400 40px/1.08 Eesti,Arial,sans-serif;letter-spacing:-.01em;color:#fff}
html body .gift-band .gb-badge{flex:none;display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:#fff;transform:rotate(-8deg)}
html body .gift-band .gb-badge .icon{width:34px;height:34px;fill:none;stroke:#ff0067;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html body .gift-band .gb-art{width:220px;height:220px;margin:-96px 0 -40px;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(120,0,40,.35));transform:rotate(-6deg)}
html body .gift-band .gb-offer{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
html body .gift-band .gb-offer h3{margin:0;font:400 28px/1.15 Eesti,Arial,sans-serif;color:#fff}
html body main .gift-band .gb-btn{background:#fff!important;color:#ff0067!important;min-height:64px!important;font-size:20px!important;padding:0 34px!important}
html body main .gift-band .gb-btn:hover{background:#fff2f7!important}
@media(max-width:1000px){html body .gift-band{grid-template-columns:1fr 160px;}html body .gift-band .gb-offer{grid-column:1/-1}html body .gift-band .gb-art{width:160px;height:160px;margin:-70px 0 -20px}}
@media(max-width:760px){
 html body .process-section .process-gift{margin-top:56px!important}
 html body .gift-band{grid-template-columns:1fr 120px;gap:16px;padding:28px 22px}
 html body .gift-band .gb-label{font-size:26px;gap:12px}
 html body .gift-band .gb-badge{width:48px;height:48px}
 html body .gift-band .gb-badge .icon{width:24px;height:24px}
 html body .gift-band .gb-art{width:120px;height:120px;margin:-64px 0 -10px}
 html body .gift-band .gb-offer h3{font-size:22px}
 html body main .gift-band .gb-btn{width:100%;justify-content:center;min-height:58px!important;font-size:18px!important}
 html body .gift-band .gb-offer{align-items:stretch}
}
@media(max-width:760px){
 html body .gift-band{grid-template-columns:1fr!important;gap:18px;padding:30px 22px 26px}
 html body .gift-band .gb-label{padding-right:92px}
 html body .gift-band .gb-art{position:absolute;right:6px;top:-46px;width:112px!important;height:112px!important;margin:0!important}
 html body .gift-band .gb-offer{grid-column:auto}
 html body main .gift-band .gb-btn{width:100%!important;box-sizing:border-box}
}
@media(max-width:760px){html body .gift-band{grid-template-columns:minmax(0,1fr)!important}html body .gift-band>*{min-width:0}html body .gift-band .gb-label{padding-right:84px;font-size:24px}}
/* The offer (gift name + button) sits at the right edge of the band. */
@media(min-width:1001px){
 html body .gift-band{grid-template-columns:auto minmax(0,1fr) auto!important}
 html body .gift-band .gb-art{justify-self:center}
 html body .gift-band .gb-offer{justify-self:end;align-items:flex-end;text-align:right}
}


/* ---------- Gift, one low row ----------
   [gift badge] «Подарок за регистрацию» / «Карта рисков в закупках»   [button]   [map at the right edge] */
html body .gift-band.gift-row{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto 150px!important;align-items:center;gap:24px;padding:26px 40px!important;text-align:left}
html body .gift-row .gb-badge{width:64px;height:64px;transform:rotate(-8deg)}
html body .gift-row .gb-text{min-width:0}
html body .gift-row .gb-label{display:block;margin:0 0 4px;font:500 13px/1.2 Eesti,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#ffffffd9}
html body .gift-row h3{margin:0;font:400 34px/1.1 Eesti,Arial,sans-serif;letter-spacing:-.01em;color:#fff}
html body main .gift-row .gb-btn{justify-self:end;background:#fff!important;color:#ff0067!important;min-height:62px!important;font-size:20px!important;padding:0 34px!important}
html body .gift-row .gb-art{width:150px!important;height:150px!important;margin:-56px 0 -40px!important;position:static!important;justify-self:end;transform:rotate(-6deg)}
@media(max-width:1000px){html body .gift-band.gift-row{grid-template-columns:auto minmax(0,1fr) 110px!important}html body main .gift-row .gb-btn{grid-column:1/-1;justify-self:stretch;justify-content:center}html body .gift-row .gb-art{width:110px!important;height:110px!important;grid-row:1;grid-column:3;margin:-50px 0 -10px!important}}
@media(max-width:760px){
 html body .gift-band.gift-row{grid-template-columns:auto minmax(0,1fr)!important;gap:14px 14px;padding:26px 20px 22px!important}
 html body .gift-row .gb-badge{width:48px;height:48px}
 html body .gift-row .gb-badge .icon{width:24px;height:24px}
 html body .gift-row .gb-text{padding-right:70px}
 html body .gift-row h3{font-size:22px}
 html body .gift-row .gb-label{font-size:11px}
 html body .gift-row .gb-art{position:absolute!important;right:4px;top:-40px;width:92px!important;height:92px!important;margin:0!important}
 html body main .gift-row .gb-btn{grid-column:1/-1;width:100%;justify-content:center;min-height:56px!important;font-size:18px!important}
}
html body .gift-row .gb-art{max-width:none!important}
html body .process-section .gift-row h3{font-size:34px!important;line-height:1.1!important}
@media(max-width:760px){html body .process-section .gift-row h3{font-size:22px!important}}
/* Taller gift row. */
@media(min-width:761px){
 html body .gift-band.gift-row{padding:44px 44px!important}
 html body .gift-row .gb-art{width:180px!important;height:180px!important;margin:-70px 0 -50px!important}
 html body .gift-band.gift-row{grid-template-columns:auto minmax(0,1fr) auto 180px!important}
}
@media(max-width:760px){html body .gift-band.gift-row{padding:34px 20px 28px!important}}
/* Phones: no check-mark circle at the bottom of the solution plate. */
@media(max-width:760px){html body .pain-solution::after{display:none!important}html body .pain-solution{padding-bottom:30px!important}}
/* Phones: the story comes before the MTS Ads case. */
@media(max-width:760px){html.hero-bento body .wow-hero-grid{grid-template-areas:"plate" "act" "vis" "stat"!important}}

/* Hero plates: outlines drawn to their real size (shapes.js), so no edge looks cut at any width. */
html.hero-bento body .hx-title::before,html.hero-bento body .hx-actions::before,html.hero-bento body .wow-hero .hx-facts .wow-case.case-result::before{clip-path:var(--shape)!important}
/* Desktop hero plates keep their original site outlines; the size-drawn ones are for phones only. */
@media(min-width:761px){
 html.hero-bento body .hx-title::before{clip-path:url(#bz-side-2)!important}
 html.hero-bento body .hx-actions::before{clip-path:url(#bz-side-1)!important}
 html.hero-bento body .wow-hero .hx-facts .wow-case.case-result::before{clip-path:url(#bz-side-2)!important}
}
/* Phones: no story plate in the hero. */
@media(max-width:760px){html.hero-bento body .wow-hero .wow-visual{display:none!important}html.hero-bento body .wow-hero-grid{grid-template-areas:"plate" "act" "stat"!important}}
/* Topic tiles: room on the left for the icon (site.css places the icon). */
html body main .wow-topics .wt-tile{padding:54px 32px 56px 126px!important}
@media(max-width:760px){html body main .wow-topics .wt-tile:nth-child(n){padding:40px 22px 42px 96px!important}}
@media(min-width:761px){html body main .wow-topics .wt-tile{padding-left:116px!important;padding-right:26px!important}html body .wow-topics .wt-tile p,html body .wow-topics .topic-line{font-size:16px!important}}
/* Right padding in topic tiles; the text lines may wrap instead of running to the edge. */
@media(min-width:761px){html body main .wow-topics .wt-tile{padding-right:40px!important}}
html body .wow-topics .topic-line{white-space:normal!important}
/* Let the three text pieces flow as one paragraph, so wrapping doesn't leave single words on a line. */
html body .wow-topics .topic-line{display:inline!important}
html body .wow-topics .topic-line+.topic-line::before{content:" "}
html body .wow-topics .wt-tile p{text-wrap:pretty}
/* Larger tile text. */
html body .wow-topics .wt-tile p,html body .wow-topics .topic-line{font-size:18px!important;line-height:1.45!important}
@media(max-width:760px){html body .wow-topics .wt-tile p,html body .wow-topics .topic-line{font-size:17px!important}}
/* Keep tile height with the larger text: a smaller icon and less side/vertical padding give the text room. */
@media(min-width:761px){
 html body main .wow-topics .wt-tile{padding:40px 28px 40px 96px!important}
 html body .wow-topics .wt-icon,html body .wow-topics .wt-tile[data-side] .wt-icon{left:24px!important;top:38px!important;width:58px!important;height:58px!important}
}

/* One-line-style headline: the whole title in one size, no subtitle. */
html.hero-bento body .wow-hero .wow-title{font-size:52px!important;line-height:1.12!important;max-width:620px}
@media(max-width:1100px) and (min-width:761px){html.hero-bento body .wow-hero .wow-title{font-size:42px!important}}
@media(max-width:760px){html.hero-bento body .wow-hero .wow-title{font-size:32px!important}}

/* MTS Ads case: a soft-pink plate with dark text instead of blue. */
html.hero-bento body .wow-hero .hx-facts .wow-case.case-result::before{background:#fff0f6!important}
html.hero-bento body .wow-hero .hx-facts .case-result .wow-stamp{background:#ff0067!important;color:#fff!important}
html.hero-bento body .wow-hero .hx-facts .case-result .wow-case-text{color:#16121a!important}
html.hero-bento body .wow-hero .hx-facts .case-result .wow-case-text strong{color:#ff0067!important;background:#ffd9e8!important}

/* Action plate: a light grey plate (like the title plate) with the main button in brand pink
   and the programme button as a white secondary one. */
html.hero-bento body .hx-actions::before{background:#f7f7f7!important}
html.hero-bento body main .hx-actions .wow-cta{background:#ff0067!important;color:#fff!important}
html.hero-bento body main .hx-actions .wow-cta:hover{background:#e0005a!important}
html.hero-bento body main .hx-actions .hx-second{background:#fff!important;color:#16121a!important}
html.hero-bento body main .hx-actions .hx-second:hover{background:#fff0f6!important;color:#ff0067!important}

/* Button inside the title plate; the case spans the whole left column. */
html.hero-bento body .wow-hero-grid{grid-template-areas:"plate plate vis" "stat stat vis"!important}
html.hero-bento body .hx-title .wow-cta{align-self:flex-start;margin-top:28px!important;background:#ff0067!important;color:#fff!important;min-height:72px!important;font-size:22px!important;padding:0 48px!important}
html.hero-bento body .hx-title .wow-cta:hover{background:#e0005a!important}
html.hero-bento body .wow-hero .hx-facts .wow-case.case-result{padding:30px 40px!important}
@media(max-width:760px){
 html.hero-bento body .wow-hero-grid{grid-template-areas:"plate" "stat"!important}
 html.hero-bento body .hx-title .wow-cta{display:inline-flex!important;align-self:stretch;justify-content:center;margin-top:22px!important;min-height:60px!important;font-size:19px!important}
 html.hero-bento body .wow-hero .hx-facts .wow-case.case-result{padding:26px 22px!important}
}
/* The case is now a wide, low plate: the site outline would cut its left corners, so it uses the size-drawn one. */
@media(min-width:761px){html.hero-bento body .wow-hero .hx-facts .wow-case.case-result::before{clip-path:var(--shape)!important}}
/* Wide case plate: an evenly rounded plate with a slight tilt — no pinched or cut sides. */
html.hero-bento body .wow-hero .hx-facts .wow-case.case-result::before{clip-path:none!important;border-radius:32px!important;transform:skewY(-.8deg)!important}
/* No check-mark circle on the solution plate. */
html body .pain-solution::after{display:none!important}
@media(min-width:761px){html body .pain-solution{padding-right:40px!important}}
/* More room between the chips/headline and the edges of the title plate. */
@media(min-width:761px){html.hero-bento body .hx-title{padding:56px 60px 48px!important}}
@media(max-width:760px){html.hero-bento body .hx-title{padding:32px 26px 28px!important}}