/* Media kit restructure, on top of the untouched live default.css. Direction C: approved-direction.md */
:root{--sh:0 10px 30px rgba(34,9,47,.10);--sh-low:0 2px 8px rgba(34,9,47,.06);--ink:#22092F;--magenta:#C44489;--magenta-d:#7E2A5C;--magenta-t:#FBE9F2;--violet:#8248E2;--violet-d:#4E2496;--violet-t:#F0E9FD;--teal:#00796A;--teal-d:#014C53;--teal-t:#DDF3EF;--orange:#C2410C;--orange-d:#8A2C06;--orange-t:#FDEBDF}
.c-magenta{--c:#A32C6C;--c2:var(--magenta);--t:var(--magenta-t);--g:rgba(163,44,108,.26)}
.c-violet{--c:#6A2FD0;--c2:var(--violet);--t:var(--violet-t);--g:rgba(106,47,208,.26)}
.c-teal{--c:#00695C;--c2:var(--teal);--t:var(--teal-t);--g:rgba(0,105,92,.26)}
.c-orange{--c:#B23B0B;--c2:var(--orange);--t:var(--orange-t);--g:rgba(178,59,11,.26)}
h1,h2,h3,h4{text-wrap:balance}
p,li{text-wrap:pretty}
figure{margin:0}
figure img{display:block;width:100%;height:100%;object-fit:cover}
.navbar .primary-button{color:var(--ink)!important}
.navbar.uk-sticky.uk-active .primary-button,html.hero .navbar.uk-sticky.uk-active .primary-button{background:var(--ink)!important;color:#fff!important}
/* Hero */
.hero-c.header-inverse{position:relative;background:var(--ink);padding-bottom:0;overflow:hidden;box-sizing:border-box}
.hero-full.header-inverse{min-height:min(100svh,1100px);display:flex;flex-direction:column}
.hero-grid{position:relative;z-index:1;flex:1;display:grid;align-items:center;padding:30px calc(44% + 24px) 60px max(50px,calc((100% - 1500px)/2 + 50px));box-sizing:border-box}
.hero-c .navbar{position:relative;z-index:2}
.eyebrow{font-size:20px;line-height:28px;font-weight:500;color:#fff;margin:0 0 14px}
.eyebrow.center{text-align:center}
.hero-copy{container-type:inline-size}
.hero-title.page-title>span::after{content:none}
.grad{background:linear-gradient(90deg,#FF8A47,#E76BAA 45%,#A97BF2);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-dark{background:linear-gradient(90deg,#B23B0B,#A32C6C 45%,#6A2FD0);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-title.page-title{font-size:clamp(34px,6.6cqi,54px);line-height:1.18;font-weight:600;margin:0 0 22px;color:#fff}
hr.bar-mix{border:0;height:6px;width:180px;border-radius:3px;margin:0 0 24px;background:linear-gradient(90deg,#E76BAA 0 25%,#A97BF2 25% 50%,#2BC4AE 50% 75%,#FF8A47 75% 100%)}
.hero-intro{max-width:640px;margin:0 0 34px;font-size:clamp(17px,1.35vw,21px);line-height:1.6;color:#fff}
.br-d{display:none}
@media(min-width:960px){.br-d{display:inline}}
@media(max-width:1199px){.hero-grid{padding:24px 16px 32px}}
@media(max-width:639px){.eyebrow{font-size:17px;line-height:24px}}
/* Buttons */
.btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px}
.btns.center{justify-content:center}
.btns .uk-button{font-size:18px;line-height:24px;padding:14px 28px!important;font-weight:600;margin:0!important}
.b-orange{background:#B23B0B}
.b-magenta{background:#A32C6C}
.b-violet{background:#6A2FD0}
.b-teal{background:#00695C}
.b-white{background:#fff;color:var(--ink)!important}
.uk-button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--magenta);outline-offset:3px}
.hero-c a:focus-visible,.band-ink a:focus-visible,.band-sunset a:focus-visible{outline-color:#fff}
.link-cta{display:inline-block;font-weight:700;color:var(--c)}
.link-cta::after{content:"";display:inline-block;width:7px;height:7px;margin-left:9px;border-top:2.5px solid currentColor;border-right:2.5px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:margin-left .15s ease}
.link-cta:hover{color:var(--c);text-decoration:none}
.link-cta:hover::after{margin-left:13px}
@media(max-width:639px){.btns .uk-button{width:100%;box-sizing:border-box;text-align:center;white-space:normal}}
/* Sections */
.wrap{max-width:1500px;margin:0 auto;padding:0 50px;box-sizing:border-box}
.band{padding:80px 0}
.band-tight{padding-top:10px}
.band-ink{background:var(--ink);color:#fff}
.band-sunset{background:linear-gradient(90deg,var(--orange),var(--magenta));color:#fff}
.sec-title{font-size:clamp(26px,2.4vw,38px);line-height:1.2;font-weight:700;color:var(--ink);text-align:center;max-width:1100px;margin:0 auto 18px}
.sec-title.on-ink{color:#fff}
.sec-intro{max-width:860px;margin:0 auto 44px;text-align:center;font-size:18px;line-height:1.6;color:#222A41}
.sec-intro.on-ink{color:#fff}
.sec-intro p{margin:0 0 12px}
@media(max-width:639px){.wrap{padding:0 16px}.band{padding:48px 0}.band-tight{padding-top:0}}
/* Welcome */
.welcome-card{background:#fff;border-radius:50px;box-shadow:var(--sh);padding:48px;display:grid;grid-template-columns:300px minmax(0,1fr);gap:48px;align-items:start}
.welcome-photo{position:relative;isolation:isolate;margin:0 14px 14px 0}
.welcome-photo::before{content:"";position:absolute;z-index:-1;inset:28px -14px -14px 28px;background:var(--magenta-t);border-radius:22px}
.welcome-photo img{display:block;width:100%;height:auto;border-radius:20px;box-shadow:0 16px 36px rgba(163,44,108,.22)}
.welcome-copy{max-width:900px;font-size:18px;line-height:1.6;color:#222A41}
.welcome-copy h2{font-size:clamp(26px,2.4vw,38px);line-height:1.2;font-weight:700;color:var(--ink);margin:0 0 18px}
.welcome-copy p{margin:0 0 14px}
.welcome-copy .sign-name{font-weight:700;color:var(--ink);margin:22px 0 0}
.welcome-copy .sign-role{margin:0 0 22px}
@media(max-width:959px){.welcome-card{grid-template-columns:minmax(0,1fr);padding:24px;border-radius:32px;gap:24px}.welcome-photo{max-width:220px}}
/* Stats */
.stats-block{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.stat{background:var(--t);border-radius:24px;padding:28px;display:flex;gap:20px;align-items:center;text-align:left}
.stat p{margin:0}
.stat-num{font-size:clamp(38px,3.5vw,60px);line-height:1.1;font-weight:700;color:var(--c)}
.stat-label{font-size:19px;line-height:1.35;font-weight:600;color:var(--ink);margin-top:6px!important}
.stat-note{font-size:16px;line-height:1.4;color:#222A41}
.ico-round{flex:none;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--c);color:#fff}
.ico-round svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1199px){.stats-block{grid-template-columns:minmax(0,1fr)}}
@media(max-width:639px){.ico-round{width:56px;height:56px}.ico-round svg{width:26px;height:26px}.stat{padding:20px;gap:16px}}
/* Solution boxes */
.boxes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.box{background:#fff;color:#222A41;border-radius:32px;overflow:hidden;display:flex;flex-direction:column}
.box-body{padding:24px;display:flex;flex-direction:column;flex:1}
.box-body h3{font-size:24px;line-height:1.25;font-weight:700;color:var(--c);margin:0 0 10px}
.box-body p{margin:0 0 14px;font-size:16px;line-height:1.55}
.box-body .box-lead{font-weight:600;color:var(--ink);font-size:17px}
.box-body .link-cta{margin-top:auto}
@media(max-width:1199px){.boxes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:639px){.boxes{grid-template-columns:minmax(0,1fr)}}
/* FAQs: 2 x 2 as on the live site, every answer visible; colour head with a big numeral */
hr.bar-mix.center{margin:0 auto 40px}
.faq-title{margin-bottom:18px}
.faqs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto auto;gap:0 24px}
.faq{display:grid;grid-template-rows:subgrid;grid-row:span 2;margin-bottom:24px;border-radius:32px;overflow:hidden;background:#fff;box-shadow:var(--sh);font-size:17px;line-height:1.6;color:#222A41}
.faq h3{display:flex;align-items:center;gap:20px;margin:0;padding:24px 32px;background:radial-gradient(circle at 100% 0,rgba(255,255,255,.14),rgba(255,255,255,0) 55%),var(--c);color:#fff;font-size:clamp(19px,1.55vw,23px);line-height:1.28;font-weight:700}
.faq-num{flex:none;font-size:clamp(46px,4.4vw,68px);line-height:1;font-weight:700;letter-spacing:-.03em}
.faq-q{text-wrap:balance}
.faq-body{padding:26px 32px 28px}
.faq-body p{margin:0 0 12px}
.faq-body p:last-child{margin:0}
@media(max-width:959px){.faqs{grid-template-columns:minmax(0,1fr)}.faq{border-radius:24px}.faq h3{padding:18px 20px;gap:14px}.faq-body{padding:20px}}
/* CTA */
.cta{text-align:center}
.cta h2{font-size:clamp(26px,2.4vw,38px);line-height:1.2;font-weight:700;color:#fff;margin:0 0 14px}
.cta p{max-width:760px;margin:0 auto 24px;font-size:18px;line-height:1.6;color:#fff}
/* Closing block */
#talk-to-us.closing{margin-top:0;background:var(--ink)}
.closing-card{background:#fff;border-radius:50px;padding:48px;max-width:1100px;margin:0 auto;color:#222A41}
.closing-card h2{font-size:clamp(26px,2.4vw,38px);line-height:1.2;font-weight:700;color:var(--ink);margin:0 0 10px}
.closing-card>p{font-size:18px;line-height:1.6;margin:0 0 28px}
.closing-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.opt{position:relative;display:flex;gap:18px;align-items:center;background:var(--t);border-radius:24px;padding:20px 24px}
.opt .ico-round{width:56px;height:56px}
.opt .ico-round svg{width:26px;height:26px}
.opt .link-cta{font-size:21px;line-height:1.3}
.opt p{margin:2px 0 0;font-size:16px;line-height:1.4}
.stretched::before{content:"";position:absolute;inset:0;border-radius:24px}
@media(max-width:767px){.closing-options{grid-template-columns:minmax(0,1fr)}.closing-card{padding:24px;border-radius:32px}}
footer h4{color:var(--ink)}
.footer-logo{max-width:112px}
/* Product pages: shorter hero, her sections left, sidebar right */
.hero-product.header-inverse{min-height:600px;display:flex;flex-direction:column}
.with-sidebar{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start;padding-top:70px;padding-bottom:70px}
.main-col{min-width:0}
.pa-sec{margin-bottom:64px}
.col-title{font-size:clamp(26px,2.2vw,36px);line-height:1.2;font-weight:700;color:var(--ink);margin:0 0 16px}
.col-sub{font-size:clamp(20px,1.5vw,24px);line-height:1.3;font-weight:600;color:var(--teal);margin:0 0 22px}
.prose{max-width:820px;font-size:18px;line-height:1.65;color:#222A41}
.prose p{margin:0 0 16px}
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.step{background:var(--t);border-radius:24px;padding:26px;font-size:17px;line-height:1.55;color:#222A41}
.step-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.step-num{font-size:34px;line-height:1;font-weight:700;color:var(--c);margin:0}
.step .ico-round{width:52px;height:52px}
.step .ico-round svg{width:26px;height:26px}
.step h4{font-size:22px;line-height:1.3;font-weight:700;color:var(--ink);margin:0 0 8px}
.step p:last-child{margin:0}
.ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.way{background:#fff;border-radius:32px;box-shadow:var(--sh);padding:28px;font-size:17px;line-height:1.6;color:#222A41}
.way .ico-round{width:52px;height:52px;margin-bottom:14px}
.way .ico-round svg{width:26px;height:26px}
.way h3{font-size:24px;line-height:1.25;font-weight:700;color:var(--c);margin:0 0 10px}
.way p{margin:0 0 12px}
.way .way-note{font-size:15px;font-weight:600;color:var(--c);margin:0}
.ways-after{margin-top:24px}
.pa-cta{position:relative;overflow:hidden;background:#00504A;color:#fff;border-radius:32px;padding:44px}
.pa-cta>*:not(.cta-art){position:relative;z-index:1}
.cta-art{position:absolute;top:0;right:0;bottom:0;width:58%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 55%);mask-image:linear-gradient(90deg,transparent 0,#000 55%)}
.cta-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:100% center}
.pa-cta h2{font-size:clamp(24px,2vw,32px);line-height:1.25;font-weight:700;color:#fff;margin:0 0 12px}
.pa-cta h2,.pa-cta p{max-width:62%}
.pa-cta p{font-size:18px;line-height:1.6;color:#fff;margin:0 0 20px}
.pa-cta a:focus-visible{outline-color:#fff}
.tiles{margin-top:40px}
.tile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
/* Sidebar: fits the window and never scrolls inside itself; short windows drop the lower parts */
.sidebar{position:sticky;top:96px}
.side-card{background:#fff;border-radius:24px;box-shadow:var(--sh);overflow:hidden}
.side-actions{display:grid;gap:8px;padding:14px}
.side-btn{display:flex;align-items:center;gap:12px;box-sizing:border-box;height:42px;padding:5px 14px 5px 5px;border-radius:14px;color:#fff;font-size:16px;line-height:1.2;font-weight:600;transition:transform .15s ease,box-shadow .15s ease}
.side-btn:hover{color:#fff;text-decoration:none;transform:translateY(-1px);box-shadow:0 6px 14px rgba(34,9,47,.22)}
.side-btn::after{content:"";margin-left:auto;width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);opacity:.8}
.s-magenta{background:#A32C6C}.s-orange{background:#B23B0B}.s-violet{background:#6A2FD0}.s-teal{background:#00695C}
.side-ico{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.18)}
.side-ico svg,.side-tile svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.side-head{font-size:12px;line-height:1.3;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px}
.side-pages{padding:12px 14px 10px;border-top:1px solid #EFE9F2}
.side-pages .side-head{color:#5B4A66}
.side-page{display:flex;align-items:center;gap:12px;padding:3px 6px;margin:0 -6px;border-radius:12px;color:var(--ink);font-size:15px;font-weight:600}
.side-page:hover{background:var(--t);color:var(--ink);text-decoration:none}
.side-tile{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--t);color:var(--c)}
.side-chev{margin-left:auto;width:7px;height:7px;border-top:2px solid var(--c);border-right:2px solid var(--c);transform:rotate(45deg)}
.side-articles{background:var(--ink);margin:2px 14px 14px;border-radius:14px;padding:12px 12px 8px}
.side-articles .side-head{color:#fff;margin-bottom:8px}
.side-article{display:flex;align-items:center;gap:12px;padding:5px;margin:0 -5px 3px;border-radius:12px;color:#fff;font-size:14px;line-height:1.3;font-weight:500}
.side-article:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}
.side-thumb{flex:none;display:block;width:50px;height:50px;border-radius:10px;overflow:hidden}
.side-article-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.side-article:focus-visible,.side-btn:focus-visible{outline-color:#fff;outline-offset:1px}
@media(max-height:775px){.side-articles{display:none}}
@media(max-height:560px){.side-pages{display:none}}
@media(max-height:400px){.sidebar{position:static}}
/* Download form */
.download-form{display:grid;gap:12px}
.download-form label{font-size:15px;font-weight:600;color:var(--ink);display:grid;gap:4px}
.download-form .uk-button{margin:8px 0 0!important;font-size:17px;font-weight:600}
.preview-note{font-size:16px;font-weight:600;color:var(--ink);margin:0}
.download-dialog h2{color:var(--ink)}
@media(max-width:1199px){.with-sidebar{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:48px;padding-bottom:48px}.sidebar{position:static}.side-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.steps,.ways,.tile-grid{grid-template-columns:minmax(0,1fr)}.side-actions{grid-template-columns:minmax(0,1fr)}.pa-cta{padding:24px}.cta-art{display:none}.pa-cta h2,.pa-cta p{max-width:none}}
/* Buyer behaviour */
.buyer-panel{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);background:var(--ink);border-radius:32px;overflow:hidden;color:#fff}
.buyer-copy{padding:44px}
.buyer-copy{container-type:inline-size}
.buyer-copy h2{font-size:clamp(22px,6.6cqi,38px);line-height:1.2;font-weight:700;color:#fff;margin:0 0 20px;text-wrap:initial}
.buyer-copy h2 span{display:block}
.buyer-copy h2 .buyer-turn{color:#5FE0CC}
.buyer-copy p{font-size:clamp(17px,1.3vw,20px);line-height:1.6;color:#fff;margin:0}
.buyer-photo{min-height:260px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.buyer-points{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);gap:20px;margin-top:20px}
.buyer-point{position:relative;background:#fff;border-radius:24px;box-shadow:var(--sh);padding:40px 24px 24px;font-size:17px;line-height:1.55;color:#222A41}
.buyer-point p{margin:0}
.buyer-point::before{content:"";position:absolute;top:22px;left:24px;width:44px;height:5px;border-radius:3px;background:var(--c)}
@media(max-width:959px){.buyer-panel{grid-template-columns:minmax(0,1fr)}.buyer-copy{padding:28px 24px}.buyer-copy h2{font-size:26px}.buyer-photo{min-height:200px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%)}.buyer-points{grid-template-columns:minmax(0,1fr)}}
/* Why this approach */
.why{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:48px;align-items:start}
.why-copy{font-size:18px;line-height:1.65;color:#222A41}
.why-copy>p{margin:0 0 16px}
.benefits{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.benefits li{position:relative;background:#fff;border-radius:16px;box-shadow:var(--sh-low);padding:14px 18px 14px 62px;font-size:17px;line-height:1.45;font-weight:500;color:var(--ink);min-height:30px}
.benefits li::before{content:"";position:absolute;left:14px;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;background:var(--c)}
.benefits li::after{content:"";position:absolute;left:25px;top:50%;width:12px;height:6px;margin-top:-6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg)}
.why-photo{position:relative;isolation:isolate;margin:0 16px 16px 0;--g:rgba(106,47,208,.26)}
.why-photo::before{content:"";position:absolute;z-index:-1;inset:32px -16px -16px 32px;background:var(--violet-t);border-radius:24px}
.why-photo .art{display:block;position:relative;border-radius:20px;overflow:hidden;aspect-ratio:2/3;box-shadow:0 18px 40px var(--g)}
.why-result{margin:44px 0 0;padding:28px 32px;background:var(--teal-t);border-radius:24px;font-size:clamp(19px,1.5vw,23px);line-height:1.45;font-weight:600;color:var(--ink);position:relative;padding-left:46px}
.why-result::before{content:"";position:absolute;left:22px;top:24px;bottom:24px;width:6px;border-radius:3px;background:var(--teal)}
@media(max-width:959px){.why{grid-template-columns:minmax(0,1fr);gap:36px}.why-photo{margin:0 10px 10px 0}.why-photo::before{inset:24px -10px -10px 24px;border-radius:18px}.why-photo .art{aspect-ratio:3/2}.why-result{padding:22px 24px}}
/* Article tiles */
.tile{display:flex;flex-direction:column;background:#fff;border-radius:24px;overflow:hidden;box-shadow:var(--sh);transition:transform .15s ease,box-shadow .15s ease}
.tile:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 12px 24px rgba(34,9,47,.18)}
.tile .art{height:190px}
.tile-body{position:relative;padding:20px 56px 22px 22px;flex:1}
.tile-kind{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--c);margin:0 0 8px}
.tile-title{font-size:20px;line-height:1.35;font-weight:600;color:var(--ink);margin:0}
.tile-read{position:absolute;right:22px;bottom:24px;width:9px;height:9px;border-top:2.5px solid var(--c);border-right:2.5px solid var(--c);transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){.tile,.side-btn,.link-cta::after{transition:none}.tile:hover,.side-btn:hover{transform:none}}
@media(max-width:959px){.why-photo .art{aspect-ratio:3/2}}
/* Box links: the arrow stays with the text even when it wraps */
.box-body .link-cta{align-self:flex-start}
.box-body .link-cta::after{content:none}
.lc-end{white-space:nowrap}
.lc-end::after{content:"";display:inline-block;width:7px;height:7px;margin-left:9px;border-top:2.5px solid currentColor;border-right:2.5px solid currentColor;transform:rotate(45deg) translateY(-1px)}
@media(min-width:1200px){.box-body h3{min-height:60px}}
/* Abstract art from the live kit for pages other than the landing page, as supplied, faded into its surroundings */
.art{position:relative;display:block;overflow:hidden;background:var(--ink)}
.art img{display:block;width:100%;height:100%;object-fit:cover;object-position:88% center}
.hero-art{position:absolute;top:0;right:0;bottom:0;width:66%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 42%);mask-image:linear-gradient(90deg,transparent 0,#000 42%)}
.hero-art img{object-position:100% center}
.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(34,9,47,.7) 0,rgba(34,9,47,0) 26%)}
@media(max-width:1199px){.hero-art{position:relative;width:100%;height:220px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%);mask-image:linear-gradient(180deg,transparent 0,#000 34%)}.hero-art::after{display:none}}
/* Section heads: title left, copy right */
.sec-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:64px;align-items:start;margin-bottom:48px}
.sec-head-title{container-type:inline-size}
.sec-head h2{font-size:clamp(30px,5.5cqi,46px);line-height:1.15;font-weight:700;color:var(--ink);margin:0 0 22px;text-wrap:initial}
.sec-head.on-ink h2{color:#fff}
.sec-head hr.bar-mix{margin:0}
.sec-head-intro{font-size:18px;line-height:1.6;color:#222A41}
.sec-head.on-ink .sec-head-intro{color:#fff}
.sec-head-intro p{margin:0 0 14px}
.sec-head-intro p:last-child{margin:0}
.eyebrow.pill{display:inline-block;font-size:15px;line-height:20px;font-weight:600;padding:7px 16px;border-radius:30px;border:1px solid rgba(255,255,255,.4);margin-bottom:18px}
@media(max-width:959px){.sec-head{grid-template-columns:minmax(0,1fr);gap:28px;margin-bottom:32px}}
/* Review, 2 Nov: phone headlines, rhythm, art crops, footer alignment */
.hero-title .br-d,.sec-head h2 .br-d{display:inline}
.stats-block{margin:0;padding:0}
footer .eg-container{max-width:1500px;padding:0 50px;box-sizing:border-box}
.hero-art img{object-position:100% 12%}
@media(max-width:1199px){.hero-art{height:300px}.hero-art img{object-position:84% 60%}}
@media(max-width:959px){.why-result{padding:22px 24px 22px 44px}.why-result::before{left:20px;top:22px;bottom:22px}.buyer-copy h2,.buyer-copy h2 span{text-wrap:balance}}
@media(max-width:639px){.hero-title.page-title{font-size:clamp(28px,9.4cqi,34px)}.sec-head h2{text-wrap:balance}footer .eg-container{padding:0 6px}}
@media(max-width:639px){.sec-head h2 .grad,.sec-head h2 .grad-dark{display:block;text-wrap:balance}.sec-head h2 .br-d{display:none}}
@media(min-width:2000px){.hero-product.header-inverse{min-height:740px}}
/* Product rows: real example on a colour panel, sides alternating as Helen asks */
.prod{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:40px;align-items:center;margin-bottom:64px}
.prod-copy{font-size:17px;line-height:1.6;color:#222A41}
.prod-copy h2{font-size:clamp(24px,2.1vw,34px);line-height:1.2;font-weight:700;color:var(--c);margin:0 0 14px}
.prod-copy p{margin:0 0 14px}
.prod-copy .btns{margin-top:18px}
.prod-visual{position:relative;isolation:isolate}
.prod-visual::before{content:"";position:absolute;z-index:-1;inset:32px -16px -16px 32px;background:var(--t);border-radius:24px}
.prod-flip .prod-visual::before{inset:32px 32px -16px -16px}
.prod-visual img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 0 0 1px rgba(34,9,47,.07),0 18px 40px var(--g)}
.prod-flip{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.prod-flip .prod-copy{order:2}
.pa-cta.cta-plum{background:#4A1238}
.pa-cta.cta-violet{background:#3B1A6E}
.prod-text-only{font-size:18px}
.lead-points{grid-template-columns:repeat(2,minmax(0,1fr))}
.lead-statement{margin:22px 0 0;font-size:clamp(20px,1.7vw,26px);line-height:1.35;font-weight:700;color:var(--ink)}
.format-tag{display:inline-block;margin:0 0 12px;padding:6px 14px;border-radius:30px;background:var(--t);color:var(--c);font-size:15px;line-height:20px;font-weight:700}
.brk{display:block}
@media(max-width:767px){.lead-points{grid-template-columns:minmax(0,1fr)}}
@media(max-width:959px){.prod,.prod-flip{grid-template-columns:minmax(0,1fr);gap:22px;margin-bottom:48px}.prod-flip .prod-copy{order:0}.prod-visual{margin:0 10px 10px 0}.prod-visual::before,.prod-flip .prod-visual::before{inset:24px -10px -10px 24px;border-radius:18px}}
/* Review of batch two, 2 Nov */
.lead-statement{margin:48px 0 0}
.pa-sec.lead-sec{margin-bottom:28px}
.with-sidebar.end-cta{padding-bottom:110px}
.buyer-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0,rgba(34,9,47,0) 50%)}
@media(max-width:1199px){.hero-art.pos-r img{object-position:95% 60%}}
@media(max-width:959px){.buyer-photo::after{background:linear-gradient(180deg,var(--ink) 0,rgba(34,9,47,0) 50%)}}
/* Presentation pass, 3 Nov */
.p-branding .sp-branding,.p-webinars .sp-webinars,.p-pipeline .sp-pipeline{display:none}
.uk-button.primary-button:hover,.uk-button.primary-button:focus{color:#fff!important;filter:brightness(1.12)}
.uk-button.primary-button.b-white:hover,.uk-button.primary-button.b-white:focus{color:var(--ink)!important;filter:none;box-shadow:0 6px 18px rgba(0,0,0,.25)}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* Round 3, 3 Nov, after the team presentation */
/* Hero: one scene of the digital work, in place of the photo collage */
.hero-grid{padding-right:calc(53% + 32px)}
.stage{position:absolute;top:96px;right:clamp(16px,2vw,48px);bottom:24px;width:calc(53% - 32px);display:flex;align-items:center;justify-content:center;z-index:1}
.stage::before{content:"";position:absolute;inset:6% 2%;background:radial-gradient(closest-side at 62% 42%,rgba(130,72,226,.30),rgba(196,68,137,.14) 55%,rgba(34,9,47,0))}
.stage img{position:relative;display:block;width:100%;height:auto;max-height:100%;object-fit:contain}
@media(max-width:1359px){.hero-grid{padding-right:calc(46% + 24px)}.stage{width:calc(46% - 24px)}}
@media(max-width:1199px){.hero-grid{padding:24px 16px 24px}.stage{position:relative;top:0;right:0;bottom:0;width:auto;margin:0 16px 40px}}
/* Solution boxes: generated art, and rows that line up across the four */
.box-art{aspect-ratio:3/2;background:var(--ink);overflow:hidden}
.box-art img{display:block;width:100%;height:100%;object-fit:cover}
@media(min-width:1200px){.boxes{grid-template-rows:auto auto auto auto auto}.box{display:grid;grid-row:span 5;grid-template-rows:subgrid}.box-body{display:grid;grid-row:2/-1;grid-template-rows:subgrid;align-content:start}.box-body h3{min-height:0}.box,.box-body{row-gap:0}.box-body .link-cta{margin-top:0}}
/* Sidebar: a handle at the window's edge; the panel opens over the page and the page never moves */
.with-sidebar{display:block}
.sidebar{position:fixed;top:96px;right:0;bottom:auto;z-index:1005;display:flex;align-items:flex-start;transform:translateX(320px);transition:transform .26s cubic-bezier(.22,1,.36,1) .12s}
.side-tab{flex:none;display:flex;flex-direction:column;align-items:center;gap:10px;width:44px;margin-top:20px;padding:14px 0 16px;border:0;border-radius:14px 0 0 14px;background:var(--ink);color:#fff;font:600 14px/1 Inter,sans-serif;cursor:pointer;box-shadow:-4px 6px 18px rgba(34,9,47,.28)}
.side-tab svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.side-tab span{writing-mode:vertical-rl;transform:rotate(180deg)}
.side-tab:hover{background:#3A1650}
.side-tab:focus-visible{outline:3px solid #fff;outline-offset:-5px}
.sidebar .side-card{box-sizing:border-box;width:320px;border-radius:24px 0 0 24px;visibility:hidden;box-shadow:0 18px 48px rgba(34,9,47,.32);transition:visibility 0s linear .38s}
.sidebar.open{transform:none;transition-delay:0s}
.sidebar.open .side-card{visibility:visible;transition-delay:0s}
@media(hover:hover){.sidebar:hover{transform:none;transition-delay:0s}.sidebar:hover .side-card{visibility:visible;transition-delay:0s}}
.sidebar .side-actions{grid-template-columns:minmax(0,1fr)}
@media(max-height:400px){.sidebar{position:fixed}}
@media(prefers-reduced-motion:reduce){.sidebar{transition:none}.sidebar .side-card{transition:none}}
/* Below desktop: a round button at the bottom corner; it stays clear of the text */
@media(max-width:1199px){.sidebar{top:auto;bottom:16px;align-items:flex-end;transform:translateX(min(320px,calc(100vw - 72px)))}.sidebar .side-card{width:min(320px,calc(100vw - 72px));max-height:calc(100dvh - 90px)}.side-tab{flex-direction:row;justify-content:center;width:52px;height:52px;margin:0 8px 0 -8px;padding:0;border-radius:50%}.side-tab span{display:none}.sidebar.open{transform:none}}
@media(max-width:1199px) and (hover:hover){.sidebar:hover{transform:none}}
/* Device renders: the picture has its own soft shadow, so no panel and no card */
.prod-visual.device::before{inset:12% 6% 10%;background:radial-gradient(closest-side,var(--t),rgba(255,255,255,0));border-radius:0}
.prod-flip .prod-visual.device::before{inset:12% 6% 10%}
.prod-visual.device img{border-radius:0;box-shadow:none}
.prod{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.prod-flip{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
/* Breathing space */
.band{padding:128px 0}
.band-tight{padding-top:24px}
.sec-title{margin-bottom:24px}
.sec-intro{margin-bottom:72px}
.sec-intro p{margin-bottom:16px}
.sec-head{gap:88px;margin-bottom:72px}
.sec-head h2{margin-bottom:28px}
.welcome-card{padding:72px;gap:72px}
.welcome-copy p{margin-bottom:18px}
.stats-block{gap:32px}
.stat{padding:36px;gap:24px}
.boxes{gap:32px}
.box-body{padding:32px 28px 36px}
.box-body h3{margin-bottom:14px}
.box-body p{margin-bottom:18px}
hr.bar-mix.center{margin-bottom:56px}
.faqs{column-gap:32px}
.faq{margin-bottom:32px}
.faq h3{padding:30px 40px}
.faq-body{padding:32px 40px 36px}
.faq-body p{margin-bottom:16px}
.closing-card{padding:72px}
.closing-card>p{margin-bottom:40px}
.closing-options{gap:28px}
.opt{padding:28px 32px}
.hero-product.header-inverse{min-height:680px}
.hero-grid{padding-top:48px;padding-bottom:88px}
.hero-title.page-title{margin-bottom:28px}
hr.bar-mix{margin-bottom:32px}
.hero-intro{margin-bottom:44px}
.with-sidebar{padding-top:120px;padding-bottom:120px}
.pa-sec{margin-bottom:112px}
.pa-sec.lead-sec{margin-bottom:64px}
.prod{gap:88px;margin-bottom:136px}
.prod-copy{line-height:1.65}
.prod-copy h2{margin-bottom:20px}
.prod-copy p{margin-bottom:18px}
.prod-copy .btns{margin-top:28px}
.col-title{margin-bottom:22px}
.col-sub{margin-bottom:32px}
.prose p{margin-bottom:20px}
.steps,.ways{gap:28px}
.step{padding:32px}
.way{padding:36px}
.ways-after{margin-top:36px}
.pa-cta{padding:64px}
.buyer-copy{padding:64px}
.buyer-points{gap:28px;margin-top:28px}
.buyer-point{padding:48px 32px 32px}
.buyer-point::before{top:28px;left:32px}
.why{gap:72px}
.benefits{gap:14px;margin-top:28px}
.why-result{margin-top:64px;padding:36px 40px 36px 56px}
.why-result::before{left:28px;top:30px;bottom:30px}
.tiles{margin-top:72px}
.tile-grid{gap:28px}
.tile-body{padding:26px 60px 28px 28px}
.lead-statement{margin-top:64px}
.with-sidebar.end-cta{padding-bottom:136px}
@media(max-width:1199px){.with-sidebar{padding-top:72px;padding-bottom:72px}.band{padding:88px 0}.prod{gap:48px;margin-bottom:88px}.pa-sec{margin-bottom:80px}}
@media(max-width:959px){.prod,.prod-flip{grid-template-columns:minmax(0,1fr);gap:32px;margin-bottom:72px}.sec-head{gap:32px;margin-bottom:44px}.welcome-card{padding:32px 24px;gap:32px}.closing-card{padding:32px 24px}.faq h3{padding:20px 22px}.faq-body{padding:22px}.pa-cta,.buyer-copy{padding:32px 24px}.why{gap:40px}.why-result{padding:24px 24px 24px 44px}.why-result::before{left:20px;top:24px;bottom:24px}}
@media(max-width:639px){.wrap{padding:0 16px}.band{padding:64px 0}.band-tight{padding-top:0}.stat{padding:24px;gap:18px}.box-body{padding:26px 22px 30px}.pa-sec{margin-bottom:64px}.with-sidebar{padding-top:56px;padding-bottom:64px}}
/* Round 3, second pass, 3 Nov */
/* Handle: colour, a clear icon and a word that reads straight; halfway down the window's edge, sliding in once on load */
.side-tab{gap:7px;width:64px;margin-top:max(20px,calc(50vh - 96px - 46px));padding:15px 0 13px;border-radius:18px 0 0 18px;background:linear-gradient(145deg,#A32C6C,#6A2FD0);font-size:13.500px;box-shadow:-6px 8px 26px rgba(106,47,208,.42)}
.side-tab svg{width:28px;height:28px;stroke-width:1.8}
.side-tab span{writing-mode:horizontal-tb;transform:none}
.side-tab:hover{background:linear-gradient(145deg,#B8337A,#7A3CE6)}
.sidebar{transform:translateX(320px)}
@media(prefers-reduced-motion:no-preference){.side-tab{animation:tab-in .5s cubic-bezier(.22,1,.36,1) .5s backwards}@keyframes tab-in{from{transform:translateX(64px)}}}
@media(max-width:1199px){.side-tab{width:58px;height:58px;margin:0 8px 0 -8px;padding:0;border-radius:50%;animation:none}.side-tab svg{width:26px;height:26px}.sidebar .side-card{width:min(320px,calc(100vw - 78px))}.sidebar{transform:translateX(min(320px,calc(100vw - 78px)))}.sidebar.open{transform:none}}
@media(max-width:1199px) and (hover:hover){.sidebar:hover{transform:none}}
/* Why this approach: title and copy across, then the rocket beside the list at matching heights */
.why-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:72px;align-items:start;margin-bottom:56px}
.why-intro .col-sub{margin-bottom:0}
.why-copy{font-size:18px;line-height:1.65;color:#222A41}
.why-copy p:last-child{margin-bottom:0}
.why{grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:40px;align-items:stretch}
.why-art{position:relative;margin:0;border-radius:28px;overflow:hidden;min-height:100%;background:#120618;box-shadow:0 18px 40px rgba(106,47,208,.22)}
.why-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.why .benefits{margin:0;gap:14px;grid-auto-rows:1fr}
.why .benefits li{display:block;align-content:center;min-height:84px;box-sizing:border-box;padding:16px 28px 16px 74px;border-radius:20px;font-size:clamp(17px,1.3vw,20px)}
.why .benefits li::before{left:20px}
.why .benefits li::after{left:31px}
@media(max-width:959px){.why-intro{grid-template-columns:minmax(0,1fr);gap:24px;margin-bottom:36px}.why{grid-template-columns:minmax(0,1fr);gap:24px}.why-art{min-height:0;aspect-ratio:1;max-height:420px}.why .benefits li{min-height:0;padding:14px 18px 14px 62px;font-size:17px}.why .benefits li::before{left:14px}.why .benefits li::after{left:25px}}
/* A tall device stays whole inside the window, under the fixed header. limit: its width follows window height, so a short wide window shrinks it; a fixed slot per breakpoint is the upgrade if that reads badly */
.prod-visual.device.tall img{width:min(100%,600px,calc((100vh - 130px)*0.55));margin-inline:auto}
.prod-visual.device.tall::before{inset:12% 14% 10%}
/* The closed handle keeps its own strip at the right edge, so it never sits on page text */
@media(min-width:1200px) and (max-width:1668px){.with-sidebar{padding-right:84px}}
/* Motion on still images: no video, so no added weight, and every picture stays a real image with alt text.
Transform and opacity only. With reduced motion the finished picture simply shows */
.prod-visual.device{--a:-1.6deg}
.prod-flip .prod-visual.device{--a:1.6deg}
.prod-visual.swap{display:grid}
.prod-visual.swap img{grid-area:1/1}
@media(prefers-reduced-motion:no-preference){
.m-on{opacity:0}
.m-on.in{opacity:1;animation:settle .9s cubic-bezier(.22,1,.36,1) both,lean 11s ease-in-out .9s infinite alternate}
.m-on.swap.in img+img{animation:lift-ads 11s ease-in-out .9s infinite}
.m-on:not(.run),.m-on:not(.run) img{animation-play-state:paused!important}
@keyframes settle{from{opacity:0;transform:translateY(24px) perspective(1600px) rotateY(calc(var(--a)*-2))}to{opacity:1;transform:none}}
@keyframes lean{from{transform:none}to{transform:translateY(-6px) perspective(1600px) rotateY(var(--a))}}
@keyframes lift-ads{0%,12%{opacity:0}26%,76%{opacity:1}90%,100%{opacity:0}}
}
/* Landing hero: laptop, tablet and phone take turns. The laptop is the image in the page's first paint */
.stage img+img{position:absolute;inset:7% 5%;width:90%;height:86%;opacity:0}
@media(prefers-reduced-motion:no-preference){
.stage img{animation:hero-turn 15s ease-in-out infinite}
.stage img:nth-child(1){animation-delay:-1.5s}
.stage img:nth-child(2){animation-delay:3.5s}
.stage img:nth-child(3){animation-delay:8.5s}
@keyframes hero-turn{0%{opacity:0;transform:translateX(14px) scale(.985)}6%{opacity:1}30%{opacity:1;transform:translateX(0) scale(1)}36%{opacity:0;transform:translateX(-10px)}100%{opacity:0}}
}
/* 4 Nov. Second button on a dark band */
.uk-button.primary-button.b-ghost{background:transparent;color:#fff!important;box-shadow:inset 0 0 0 2px #fff}
.uk-button.primary-button.b-ghost:hover,.uk-button.primary-button.b-ghost:focus{background:#fff;color:var(--ink)!important;filter:none}
.pa-cta h2,.pa-cta p{position:relative}
/* Sidebar, a little more air */
.side-actions,.sidebar .side-actions{gap:12px;padding:18px}
.side-pages{padding:16px 18px 14px}
.side-head{margin-bottom:10px}
.side-page{padding:6px;margin:0 -6px}
.side-articles{margin:4px 18px 18px;padding:14px 14px 10px}
/* How the programme works: white runs edge to edge. limit: box-shadow plus clip-path avoids a 100vw box and sideways scroll; a section that needs its own overflow would need a wrapper instead */
.pa-sec.works{background:#fff;box-shadow:0 0 0 100vmax #fff;clip-path:inset(-72px -100vmax);margin-top:184px;margin-bottom:184px}
.works .step{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,#fff),0 16px 34px color-mix(in srgb,var(--c) 20%,transparent)}
.works .step-num{font-size:40px}
/* The points live in the dark panel, on one line that runs through their icons */
.buyer-panel>.buyer-points{grid-column:1/-1;position:relative;margin:0;padding:0 64px 64px;gap:48px;grid-template-columns:repeat(3,minmax(0,1fr))}
.buyer-panel>.buyer-points.lead-points{grid-template-columns:repeat(2,minmax(0,1fr))}
.buyer-panel>.buyer-points::before{content:"";position:absolute;left:64px;right:64px;top:26px;height:1px;background:linear-gradient(90deg,#5FE0CC,#C44489 50%,#8248E2)}
.buyer-panel .buyer-point{position:relative;background:none;box-shadow:none;border-radius:0;padding:0;color:#fff;font-size:18px;line-height:1.6}
.buyer-panel .buyer-point::before{display:none}
.buyer-panel .buyer-point .ico-round{position:relative;width:52px;height:52px;margin-bottom:22px;box-shadow:0 0 0 8px var(--ink)}
.buyer-panel .buyer-point .ico-round svg{width:26px;height:26px}
.buyer-panel .buyer-point strong{font-weight:700;color:var(--hi)}
.buyer-point.c-teal{--hi:#5FE0CC}.buyer-point.c-magenta{--hi:#F59AC9}.buyer-point.c-violet{--hi:#C4A6FF}
.buyer-photo::after{background:linear-gradient(90deg,var(--ink) 0,rgba(34,9,47,0) 50%),linear-gradient(0deg,var(--ink) 0,rgba(34,9,47,0) 28%)}
@media(max-width:1199px){.pa-sec.works{margin-top:136px;margin-bottom:136px;clip-path:inset(-48px -100vmax)}.buyer-panel>.buyer-points{padding:0 32px 40px;gap:32px}.buyer-panel>.buyer-points::before{left:32px;right:32px}}
@media(max-width:959px){.buyer-panel>.buyer-points,.buyer-panel>.buyer-points.lead-points{grid-template-columns:minmax(0,1fr);padding:0 24px 32px;gap:28px}.buyer-panel>.buyer-points::before{display:none}.buyer-panel .buyer-point .ico-round{margin-bottom:14px;box-shadow:none}.buyer-panel .buyer-point{font-size:17px}.buyer-photo::after{background:linear-gradient(180deg,var(--ink) 0,rgba(34,9,47,0) 50%),linear-gradient(0deg,var(--ink) 0,rgba(34,9,47,0) 30%)}.pa-sec.works{margin-top:112px;margin-bottom:112px;clip-path:inset(-40px -100vmax)}}
/* 4 Nov. A colour panel runs off the page edge behind each device and is deliberately smaller than it, so the device sticks out. It hangs off the figure so its size follows the device, not the copy; the motion moves the image alone. limit: box-shadow plus clip-path as on .works; needs no 100vw box */
.prod{--p:color-mix(in srgb,var(--c) 17%,var(--t))}
.prod-visual.device::before,.prod-flip .prod-visual.device::before{display:block;inset:25% 0 25% 24%;background:var(--p);border-radius:0;box-shadow:0 0 0 100vmax var(--p);clip-path:inset(0 -100vmax 0 0 round 44px 0 0 44px)}
.prod-flip .prod-visual.device::before{inset:25% 24% 25% 0;clip-path:inset(0 0 0 -100vmax round 0 44px 44px 0)}
.prod-visual.device.tall::before{inset:25% 0 25% 24%}
@media(min-width:960px){.prod,.prod-flip{padding-block:64px}.prod .prod-visual{margin-block:-128px}}
@media(prefers-reduced-motion:no-preference){
.m-on,.m-on.in{opacity:1;animation:none}
.m-on img{opacity:0}
.m-on.in img{opacity:1;animation:settle .9s cubic-bezier(.22,1,.36,1) both,lean 11s ease-in-out .9s infinite alternate}
.m-on.swap.in img+img{animation:settle .9s cubic-bezier(.22,1,.36,1) both,lean 11s ease-in-out .9s infinite alternate,lift-ads 11s ease-in-out .9s infinite}
}
/* Phones: the panel runs edge to edge behind the device only, so its edge never crosses the copy, and the device does not lean */
@media(max-width:959px){
.prod-visual.device::before,.prod-flip .prod-visual.device::before,.prod-visual.device.tall::before{inset:25% 0;clip-path:inset(0 -100vmax)}
.m-on.in img,.m-on.swap.in img+img{animation:settle .9s cubic-bezier(.22,1,.36,1) both}
.m-on.swap.in img+img{animation:settle .9s cubic-bezier(.22,1,.36,1) both,lift-ads 11s ease-in-out .9s infinite}
}
/* 6 Nov, Rron. Explore tab: more room and a light outline */
.side-tab{gap:9px;width:76px;padding:20px 0 18px;margin-top:max(20px,calc(50vh - 96px - 46px));box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),-6px 8px 26px rgba(106,47,208,.42)}
@media(prefers-reduced-motion:no-preference){@keyframes tab-in{from{transform:translateX(76px)}}}
@media(max-width:1199px){.side-tab{width:58px;padding:0;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),-6px 8px 26px rgba(106,47,208,.42)}}
@media(min-width:1200px) and (max-width:1668px){.with-sidebar{padding-right:96px}}
/* Articles: more room, with a light rule between them */
.side-article+.side-article{position:relative;margin-top:14px}
.side-article+.side-article::before{content:"";position:absolute;left:5px;right:5px;top:-9px;height:1px;background:rgba(255,255,255,.18)}
/* Landing stats: the same edge and coloured shadow as the programme steps */
.stat{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,#fff),0 16px 34px color-mix(in srgb,var(--c) 20%,transparent)}
/* 6 Nov, batch 1: Marketing Solutions and Products. Built from the components above: tinted cards with the coloured edge, the ink panel, the CTA band */
[id]{scroll-margin-top:120px}
@media(min-width:1200px) and (max-width:1668px){.with-sidebar.no-side{padding-right:50px}}
.hero-lead{max-width:640px;margin:0 0 18px;font-size:clamp(21px,1.9vw,28px);line-height:1.35;font-weight:600;color:#fff}
/* Accordion rows, first open, as her picture shows */
.accs{display:grid;gap:24px}
.acc{background:#fff;border-radius:32px;box-shadow:var(--sh)}
.acc summary{display:flex;align-items:center;gap:24px;padding:28px 40px;cursor:pointer;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary h2{flex:1;margin:0;font-size:clamp(24px,2.1vw,32px);line-height:1.2;font-weight:700;color:var(--c)}
.acc .ico-round{width:56px;height:56px}
.acc .ico-round svg{width:26px;height:26px}
.acc-mark{position:relative;flex:none;width:44px;height:44px;border-radius:50%;background:var(--t)}
.acc-mark::before,.acc-mark::after{content:"";position:absolute;left:14px;right:14px;top:21px;height:2.500px;border-radius:2px;background:var(--c)}
.acc-mark::after{transform:rotate(90deg);transition:transform .2s ease}
.acc[open] .acc-mark::after{transform:rotate(0)}
.acc-body{padding:0 40px 40px 120px;font-size:18px;line-height:1.65;color:#222A41}
.acc-body>p{max-width:900px;margin:0 0 20px}
.acc-body .acc-looking{font-weight:700;color:var(--ink);margin:28px 0 16px}
.acc-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.acc-tile{display:flex;align-items:center;gap:16px;background:var(--t);border-radius:20px;padding:18px 20px;color:var(--ink);font-size:18px;line-height:1.3}
.acc-tile:hover{color:var(--ink);box-shadow:0 10px 24px var(--g)}
.acc-tile .ico-round{width:44px;height:44px}
.acc-tile .ico-round svg{width:22px;height:22px}
.acc-tile::after{margin-left:auto;flex:none;color:var(--c)}
/* Leadership points, four across in the ink panel */
.buyer-copy p+p{margin-top:16px}
.buyer-panel>.buyer-points.four{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.buyer-panel .buyer-point h3{font-size:20px;line-height:1.3;font-weight:700;color:var(--hi);margin:0 0 10px}
.buyer-point.c-orange{--hi:#FFB088}
/* Testimonials */
.quotes-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:28px}
.quote{flex:0 1 calc(25% - 21px);min-width:240px;box-sizing:border-box;display:flex;flex-direction:column;background:#fff;border-radius:24px;padding:32px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,#fff),0 16px 34px color-mix(in srgb,var(--c) 16%,transparent)}
.quote::before{content:"\201C";font-size:64px;line-height:.8;font-weight:700;color:var(--c);height:34px}
.quote blockquote{margin:0 0 20px;padding:0;border:0;font-size:18px;line-height:1.55;font-style:normal;color:var(--ink)}
.quote-logo{display:block;margin-top:auto;width:140px;height:auto}
/* Products: three columns, every card visible */
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;align-items:start;margin-bottom:112px}
.pcol{background:var(--t);border-radius:32px;padding:32px 28px}
.pcol-title{font-size:clamp(22px,1.7vw,27px);line-height:1.25;font-weight:700;color:var(--c);margin:0 0 10px}
.pcol-sub{font-size:17px;line-height:1.5;color:#222A41;margin:0 0 24px}
.pcards{display:grid;gap:16px}
.pcard{background:#fff;border-radius:20px;padding:24px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,#fff),0 12px 26px color-mix(in srgb,var(--c) 14%,transparent)}
.pcard h3{font-size:20px;line-height:1.3;font-weight:700;color:var(--ink);margin:0 0 8px}
.pcard p{font-size:16px;line-height:1.55;color:#222A41;margin:0 0 14px}
.pcard h3+.link-cta{margin-top:6px}
@media(max-width:1199px){.buyer-panel>.buyer-points.four{grid-template-columns:repeat(2,minmax(0,1fr))}.buyer-panel>.buyer-points.four::before{display:none}.acc-body{padding:0 32px 32px}.acc-tiles{grid-template-columns:minmax(0,1fr)}.quote{flex-basis:calc(50% - 14px)}.cols3{grid-template-columns:minmax(0,1fr)}}
@media(max-width:959px){.buyer-panel>.buyer-points.four{grid-template-columns:minmax(0,1fr)}.acc summary{padding:20px 22px;gap:16px}.acc .ico-round{width:44px;height:44px}.acc-body{padding:0 22px 26px}.acc-mark{width:36px;height:36px}.acc-mark::before,.acc-mark::after{left:11px;right:11px;top:17px}.quote{flex-basis:100%}.cols3{margin-bottom:72px}.pcol{padding:24px 18px}}
@media(prefers-reduced-motion:reduce){.acc-mark::after,.acc-tile{transition:none}}
/* Review of batch 1: fixes */
.acc-tile{transition:box-shadow .15s ease}
.acc-tile:hover::after{margin-left:auto}
.p-ms .buyer-copy h2{text-wrap:balance}
/* Quote mark drawn, not typed: Inter's bold quote reads as two slashes */
.quote::before{content:"";width:30px;height:22px;margin-bottom:14px;background:var(--c);-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
/* 6 Nov, batch 2: Audience and Engagement Data. Built from the components above: cards with the coloured edge, the landing stats, the white band, the ink panel, the CTA band */
.p-ed .hero-intro:has(+.hero-intro){margin-bottom:18px}
/* Audience: three boxes under the hero, headings prominent as Helen asks */
.keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-bottom:72px}
.key{background:#fff;border-radius:24px;padding:36px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,#fff),0 16px 34px color-mix(in srgb,var(--c) 16%,transparent)}
.key .ico-round{width:56px;height:56px;margin-bottom:22px}
.key .ico-round svg{width:26px;height:26px}
.key h2{font-size:clamp(23px,1.8vw,28px);line-height:1.2;font-weight:700;color:var(--c);margin:0 0 12px}
.key p{font-size:17px;line-height:1.55;color:#222A41;margin:0}
.sec-intro.keys-after{margin-bottom:112px}
.sec-intro.keys-after p:last-child{margin-bottom:0}
.ed-stats{margin-bottom:112px}
/* Specialisms: her two columns, read down each column */
.specs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);grid-auto-flow:column;gap:20px 28px}
.spec{display:flex;align-items:center;gap:18px;background:var(--t);border-radius:20px;padding:18px 24px;font-size:19px;line-height:1.35;font-weight:600;color:var(--ink)}
.spec .ico-round{width:48px;height:48px}
.spec .ico-round svg{width:24px;height:24px}
/* Sectors: her panel, on the white band */
.sectors-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 32px;margin:0 0 36px;padding-bottom:20px;border-bottom:1px solid #EFE9F2}
.sectors-head h3{font-size:clamp(20px,1.6vw,26px);line-height:1.25;font-weight:700;color:var(--ink);margin:0}
.sectors-head p{margin:0;font-size:16px;line-height:1.4;font-weight:600;color:#5B4A66}
.sectors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 40px}
.sector{display:flex;align-items:center;gap:18px}
.sector p{margin:0}
.sector-ico{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--t);color:var(--c)}
.sector-ico svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sector-pct{font-size:clamp(28px,2.2vw,36px);line-height:1.1;font-weight:700;color:var(--c)}
.sector .sector-name{font-size:17px;line-height:1.35;font-weight:600;color:var(--ink);margin-top:4px}
/* Title and copy across with nothing under them */
.why-intro:last-child{margin-bottom:0}
/* Ink panel: a second heading line, and the bold line on each point */
.buyer-copy .buyer-sub{font-size:clamp(20px,1.5vw,24px);line-height:1.3;font-weight:600;color:#5FE0CC;margin:-4px 0 22px}
.p-audience .buyer-copy h2,.p-ed .buyer-copy h2{text-wrap:balance}
.buyer-panel .buyer-point .point-lead{font-weight:700;margin:0 0 8px}
/* Track, Identify, Activate: the programme steps, three across */
.steps.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.step>.ico-round{margin-bottom:20px}
.step h3{font-size:22px;line-height:1.3;font-weight:700;color:var(--ink);margin:0 0 8px}
/* CTA band: a second heading line */
/* Rron, 2 Nov: a two-sentence heading breaks after the full stop */
.buyer-sub>span,.cta-sub>span{display:inline-block}
.pa-cta .cta-sub{max-width:62%;font-size:clamp(19px,1.4vw,22px);line-height:1.35;font-weight:600;color:#fff;margin:-2px 0 18px}
@media(max-width:959px){.keys{grid-template-columns:minmax(0,1fr);gap:20px;margin-bottom:56px}.key{padding:26px 22px}.sec-intro.keys-after,.ed-stats{margin-bottom:72px}.steps.three{grid-template-columns:minmax(0,1fr)}.sectors{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media(max-width:767px){.specs{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row;gap:14px}.spec{font-size:17px;padding:14px 18px;gap:14px}.pa-cta .cta-sub{max-width:none}}
@media(max-width:639px){.sectors{grid-template-columns:minmax(0,1fr);gap:20px}.sector-ico{width:48px;height:48px}}
/* 9 Nov, Rron: refinement pass on the four new pages (handover-2026-11-09.md). Every selector starts with .p-ms, .p-products, .p-audience or .p-ed, so the signed-off four cannot change */
/* Tinted boxes on the grey ground get the stat cards' edge and coloured shadow (R81): the specialism chips and the product panels */
.p-audience .spec,.p-products .pcol,.p-audience .key{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,#fff),0 16px 34px color-mix(in srgb,var(--c) 20%,transparent)}
/* Intro lines tied to what they introduce: on the content's left edge, the hero lead's size and line height, closer to the content below than to the hero */
.p-products .sec-intro,.p-audience .sec-intro.keys-after{max-width:none;text-align:left}
.p-products .sec-intro p,.p-audience .sec-intro.keys-after p{max-width:44ch;font-size:clamp(21px,1.9vw,28px);line-height:1.35;font-weight:500;color:var(--ink)}
.p-products .sec-intro{margin:0 0 40px}
/* Audience has two: the first is the lead, the second reads as body at the same line length, so seven lines of lead size do not stack up */
.p-audience .sec-intro.keys-after p+p{max-width:70ch;font-size:18px;line-height:1.6;font-weight:400;color:#222A41}
/* Products cards: the whole card is the link, "View product" sits at the foot so cards with and without a line match */
.p-products .pcard{position:relative;display:flex;flex-direction:column;transition:box-shadow .15s ease}
.p-products .pcard .link-cta{margin-top:auto;align-self:flex-start}
.p-products .pcard h3:has(+.link-cta){margin-bottom:14px}
.p-products .pcard .link-cta::before{content:"";position:absolute;inset:0;border-radius:20px}
/* Hover: the card already has a shadow, so a deeper one alone is too faint (review); the edge takes the card's colour */
.p-products .pcard:hover{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 75%,#fff),0 18px 36px var(--g)}
.p-products .pcard .link-cta:focus-visible{outline:none}
.p-products .pcard:has(.link-cta:focus-visible){outline:3px solid var(--magenta);outline-offset:3px}
/* Products columns. Wide: Branding takes two card columns, so six cards run three rows like the other two; every card is the same width and the rows line up across the panels (row subgrid), so all three end on one line. Card width (100% - 2 column gaps - 6 paddings - 1 card gap)/4. Not --g or --p: the colour classes own those */
@media(min-width:1388px){
.p-products .cols3{--col-gap:32px;--col-pad:28px;--card-gap:16px;--card-w:calc((100% - 2*var(--col-gap) - 6*var(--col-pad) - var(--card-gap))/4);grid-template-columns:calc(2*var(--card-w) + var(--card-gap) + 2*var(--col-pad)) calc(var(--card-w) + 2*var(--col-pad)) calc(var(--card-w) + 2*var(--col-pad));grid-template-rows:repeat(5,auto);column-gap:var(--col-gap);row-gap:0;align-items:stretch}
.p-products .pcol{display:grid;grid-row:span 5;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr)}
.p-products .pcards{grid-row:span 3;grid-template-rows:subgrid;row-gap:var(--card-gap)}
.p-products .pcol.c-magenta .pcards{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--card-gap)}
/* Branding's heading and line keep to one card column, so all three heads have the same shape and no hole opens above its cards */
.p-products .pcol.c-magenta>.pcol-title,.p-products .pcol.c-magenta>.pcol-sub{max-width:calc(50% - var(--card-gap)/2)}
}
/* Narrower, where a card would drop under about 260px: the panels stack full width with three cards across; phones one column as before */
@media(min-width:960px) and (max-width:1387px){.p-products .cols3{grid-template-columns:minmax(0,1fr)}.p-products .pcards{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Accordion +/- mark at the icons' weight (T9) */
.p-ms .acc-mark{width:48px;height:48px}
.p-ms .acc-mark::before,.p-ms .acc-mark::after{left:15px;right:15px;top:22.5px;height:3px}
/* Testimonials: one edge and one shadow for all seven, colour on the quote mark only; logos in one optical band (T12) */
.p-ms .quote{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 11%,#fff),0 16px 34px color-mix(in srgb,var(--ink) 9%,transparent)}
.p-ms .quote-logo{width:auto;height:var(--h,34px);align-self:flex-start;object-fit:contain;margin-bottom:calc((44px - var(--h,34px))/2)}
/* Ink panels: the rule runs through the icons in their own colour order (T10), in the hero bar's on-ink colours */
.p-ms .buyer-panel>.buyer-points.four::before,.p-ed .buyer-panel>.buyer-points.four::before{background:linear-gradient(90deg,#E76BAA 2%,#A97BF2 27%,#2BC4AE 52%,#FF8A47 77%)}
.p-audience .buyer-panel>.buyer-points::before{background:linear-gradient(90deg,#E76BAA 2%,#A97BF2 36%,#2BC4AE 71%)}
/* Four points: heading, bold line and copy start on one line across the panel (T14) */
@media(min-width:1200px){
.p-ms .buyer-panel>.buyer-points.four,.p-ed .buyer-panel>.buyer-points.four{row-gap:0}
.p-ms .buyer-points.four .buyer-point{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}
.p-ed .buyer-points.four .buyer-point{display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start}
}
/* Audience heading boxes: icons, headings and copy on shared lines (T15) */
@media(min-width:960px){.p-audience .keys{row-gap:0}.p-audience .key{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}}
/* Stats: numbers on one line across each row (T16) */
.p-audience .stat,.p-ed .stat{align-items:flex-start}
/* Audience: end band sub-heading in the ink panel's colour (T20), and its art kept clear of the copy on tablets (T13) */
.p-audience .pa-cta .cta-sub{color:#5FE0CC}
@media(min-width:768px) and (max-width:1199px){.p-audience .pa-cta .cta-art{width:44%;opacity:.6}}
/* Audience, "Reach the right HR audience": the weight of the landing section heads, with their colour bar (T19) */
/* T32, 11 Nov: Engagement Data shares it */
:is(.p-audience,.p-ed) .why-intro .col-title{font-size:clamp(30px,2.65vw,46px);line-height:1.15;margin:0}
:is(.p-audience,.p-ed) .why-intro .col-title::after{content:"";display:block;width:180px;height:6px;border-radius:3px;margin-top:28px;background:linear-gradient(90deg,#E76BAA 0 25%,#A97BF2 25% 50%,#2BC4AE 50% 75%,#FF8A47 75% 100%)}
@media(max-width:959px){.p-ms .acc-mark{width:40px;height:40px}.p-ms .acc-mark::before,.p-ms .acc-mark::after{left:12px;right:12px;top:18.5px}}
@media(prefers-reduced-motion:reduce){.p-products .pcard{transition:none}}
/* 2026-11-10, review fixes on the four new pages (R102). Signed-off pages untouched. */
/* Accordion focus ring round the whole rounded card, as on the Products cards; without :has() the old ring stays */
@supports selector(:has(*)){.p-ms .acc summary:focus-visible{outline:none}.p-ms .acc:has(summary:focus-visible){outline:3px solid var(--magenta);outline-offset:3px}}
/* Under the end band: the phone and tablet section gap, not the desktop 136px that outranked it (every end-band page since T31, 11 Nov) */
@media(max-width:1199px){.with-sidebar.end-cta{padding-bottom:72px}}
@media(max-width:639px){.with-sidebar.end-cta{padding-bottom:64px}}
/* 2026-11-11, Rron's round (R106 to R108). Dated block; the pages each rule reaches are named on it. */
/* Marketing Solutions: Education & Engagement keeps two tiles after Webinars got its own row, so they share the row rather than leave a hole */
@media(min-width:1200px){.p-ms #education .acc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* T30, Branding and Webinars: the "Enquire About" buttons hold one line below 1360 */
@media(max-width:1359px){.prod .btns .uk-button{font-size:16px;padding:14px 18px!important}}
/* T33, Marketing Solutions 1200 to 1387: tiles a little tighter, so no label takes three lines */
@media(min-width:1200px) and (max-width:1387px){.p-ms .acc-tile{padding:18px 14px;gap:12px;font-size:17px}}
/* T34, Marketing Solutions: the row header answers the pointer; its +/- mark deepens */
.p-ms .acc-mark{transition:background-color .15s ease}
.p-ms .acc summary:hover .acc-mark{background:color-mix(in srgb,var(--c) 22%,#fff)}
@media(prefers-reduced-motion:reduce){.p-ms .acc-mark{transition:none}}
/* R110, Rron 11 Nov: blue joins as a fifth colour family, an accent around the kit rather than a sea of blue. Grapevine Blue, the brand's own accent */
:root{--blue:#3A62AC;--blue-d:#24407A;--blue-t:#E7EDF8}
.c-blue{--c:#3A62AC;--c2:var(--blue);--t:var(--blue-t);--g:rgba(58,98,172,.26)}
.b-blue{background:#3A62AC}
/* R111, Products: Webinars in its own blue panel above the three objective columns, as on Marketing Solutions; three cards across, one column below 960 like the other panels */
.p-products .pcol.pwide{display:block;margin-bottom:32px}
.p-products .pwide .pcards{grid-row:auto;grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:959px){.p-products .pwide .pcards{grid-template-columns:minmax(0,1fr)}}
/* R111, Products: Education & Engagement keeps two cards; side by side they share the panel's height so all three panels still end on one line (R95), stacked they run two across */
@media(min-width:1388px){.p-products .cols3>.pcol.c-violet .pcards{grid-template-rows:1fr 1fr}}
@media(min-width:960px) and (max-width:1387px){.p-products .cols3>.pcol.c-violet .pcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* R111, Landing: Webinars as its own wide box above the four solution boxes, copy left and the live webinars art right; it stacks like the others on phones */
.box.box-wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.box-wide .box-body{grid-column:1;grid-row:1;padding:36px 40px;justify-content:center}
.box-wide .box-body h3{min-height:0}
.box-wide .box-art{grid-column:2;grid-row:1;aspect-ratio:auto}
.box-wide .box-art img{object-position:80% 50%}
@media(min-width:1200px){.box.box-wide{grid-row:auto;grid-template-rows:none}.box-wide .box-body{display:flex;grid-template-rows:none}} /* the four boxes share rows through a subgrid; the wide box sits outside it */
@media(max-width:959px){.box.box-wide{display:flex}.box-wide .box-art{aspect-ratio:2.2/1}} /* below 960 it stacks like the four, its wide art as a band */
@media(max-width:639px){.box-wide .box-art{aspect-ratio:3/2}.box-wide .box-body{padding:24px}}