/* ═══ /products-new — the redesigned "Every product" page (Julian, 13 Oct) ═══════════════════════════════════════════
   1. a full-screen hero: the title and both buttons centred on our own navy wave, a grid of small dots at the sides
      where labels open, type what the suite gives you, and close again (pn.js)
   2. the statement: the suite paragraph set large, its first sentence in ink and the rest in grey
   3. "Explore solutions…" and its Show me, centred
   4. the products as rows: name, headline and a black Explore on the left, the paragraph on the right; on hover the
      row greys, a dash leads the headline and the product's picture appears, smaller, in the middle. The whole row
      opens the product. Phones keep today's list under the new hero. */

/* ── 1. hero ── */
body.pn .pn-hero{position:relative;display:grid;place-items:center;min-height:calc(100svh - var(--nav-h,72px));margin:var(--nav-h,72px) 0 0;padding:clamp(72px,10vh,120px) 0;overflow:hidden;
  background:#0B1220;color:#FFFFFF;text-align:center;isolation:isolate}
/* the wave: its own layer, drifting slowly (a long, gentle zoom and sideways sway) and moved by pn.js as you scroll */
body.pn .pn-hero__bg{position:absolute;inset:-14% 0;z-index:0;background:url(/assets/img/products/new/pn-wave-2.jpg) center / cover no-repeat;
  animation:pnDrift 36s ease-in-out infinite alternate;will-change:transform,translate}
@keyframes pnDrift{from{transform:scale(1.04) translateX(-1.6%)}to{transform:scale(1.16) translateX(1.6%)}}
@media (prefers-reduced-motion:reduce){ body.pn .pn-hero__bg{animation:none} }
body.pn .pn-hero::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 46% 42% at 50% 50%,rgba(11,18,32,.34),rgba(11,18,32,0) 70%);pointer-events:none}
body.pn .pn-tags{position:absolute;inset:0;z-index:2;pointer-events:none}
body.pn .pn-hero__in{position:relative;z-index:3;max-width:1000px;padding:0 var(--gutter,24px);box-sizing:content-box}
body.pn .pn-hero__eb:not(#_){margin:0 0 22px;font-size:14px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.78)}
body.pn .pn-hero__h:not(#_):not(#_){margin:0 auto 40px;max-width:16.5em;font-size:clamp(40px,5.2vw,80px);font-weight:400;line-height:1.04;letter-spacing:-.025em;color:#FFFFFF;text-wrap:balance}
body.pn .pn-hero__acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
body.pn .pn-hero .pn-btn--solid:not(#_):not(#_){background:#FFFFFF !important;color:#0B1220 !important;box-shadow:none !important;border:0 !important}
body.pn .pn-hero .pn-btn--solid:not(#_):not(#_):hover{background:#E7E7E3 !important}
body.pn .pn-hero .pn-btn--ghost:not(#_):not(#_){background:transparent !important;color:#FFFFFF !important;border:0 !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.72) !important}
body.pn .pn-hero .pn-btn--ghost:not(#_):not(#_):hover{background:rgba(255,255,255,.12) !important}

/* the labels: a black square on a dot, a pale bar that slides out of it, the words typed into the bar */
.pn-tag{position:absolute;display:flex;align-items:center;height:26px;transform:translateY(-50%)}
.pn-tag--l{flex-direction:row-reverse;transform:translate(-100%,-50%)}
.pn-tag__sq{position:relative;flex:none;width:26px;height:26px;background:#0B1220;transform:scale(.2);opacity:0;transition:transform .18s cubic-bezier(.2,.8,.2,1),opacity .16s ease}
.pn-tag__sq::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;background:#FFFFFF}
.pn-tag.is-sq .pn-tag__sq{transform:none;opacity:1}
.pn-tag__bar{flex:none;height:26px;width:0;overflow:hidden;background:#F4F4F2;transition:width .14s cubic-bezier(.25,.8,.25,1)}
.pn-tag__t{display:block;padding:0 11px;font:400 13.5px/26px 'Roobert',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:.01em;color:#0B1220;white-space:nowrap}
.pn-tag--l .pn-tag__bar{display:flex;justify-content:flex-start}

/* ── 2. the statement ── */
body.pn .pn-say{max-width:1440px;margin:0 auto;padding:clamp(96px,12vw,184px) var(--gutter,24px) clamp(72px,9vw,132px);box-sizing:border-box}
body.pn .pn-say__p:not(#_){margin:0;max-width:1180px;font-size:clamp(30px,3.7vw,58px);font-weight:400;line-height:1.1;letter-spacing:-.022em;text-wrap:pretty}
body.pn .pn-say__a{color:#0B1220}
body.pn .pn-say__b{color:rgba(11,18,32,.42)}

/* ── 3. Explore solutions + Show me, centred ── */
body.pn .pfq:not(#_):not(#_){text-align:center}
body.pn .pfq__h:not(#_):not(#_){margin-left:auto !important;margin-right:auto !important;text-align:center !important}
body.pn .pfq__ctl:not(#_):not(#_){margin-left:auto !important;margin-right:auto !important;justify-content:center;align-items:center;text-align:left}
body.pn .pfq__lead:not(#_):not(#_){text-align:center !important;margin-left:auto !important;margin-right:auto !important}

/* ── 4. the products as rows (desktop) ── */
@media (min-width:861px){
  body.pn .prodbody:not(#_):not(#_){max-width:none !important;margin:0 !important;padding:0 !important}
  body.pn .prodgroup:not(#_):not(#_){position:relative;display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,1fr) !important;
    grid-template-areas:"nm pic ds" "hd pic ds" "ex pic ds" !important;grid-template-rows:auto auto 1fr !important;column-gap:clamp(32px,4vw,64px) !important;row-gap:0 !important;align-items:start;
    margin:0 !important;padding:clamp(40px,4.4vw,64px) max(var(--gutter,24px),calc((100% - 1440px) / 2 + var(--gutter,24px))) !important;
    min-height:clamp(340px,27vw,420px);border:0 !important;border-top:1px solid rgba(11,18,32,.14) !important;border-radius:0 !important;background:#FFFFFF !important;
    box-shadow:none !important;transition:background-color .35s ease;box-sizing:border-box}
  body.pn .prodgroup:not(#_):not(#_):hover,body.pn .prodgroup:not(#_):not(#_):focus-within{background:#F4F4F2 !important}
  /* flatten the card markup so its pieces sit on the row's grid */
  body.pn .prodgroup :is(.prodgroup__head,.prodgroup__words,.prodgroup__cards,.prodcard,.prodcard__top,.prodcard__head):not(#_):not(#_){display:contents !important}
  body.pn .prodgroup :is(.prodgroup__n,.prodcard__name,.pc-more__btn,.pc-more,.prodcard__who,.pc-foot__what):not(#_):not(#_){display:none !important}
  /* the card's picture scrim lives on the flattened head's pseudo-elements: they would land on the grid as items */
  body.pn .prodgroup :is(.prodgroup__head,.prodgroup__words,.prodgroup__cards,.prodcard,.prodcard__top,.prodcard__head):not(#_):not(#_)::before,
  body.pn .prodgroup :is(.prodgroup__head,.prodgroup__words,.prodgroup__cards,.prodcard,.prodcard__top,.prodcard__head):not(#_):not(#_)::after{content:none !important;display:none !important}
  /* the whole row is the link */
  body.pn .prodgroup .prodgroup__go:not(#_):not(#_){position:absolute;inset:0;z-index:1;display:block}
  /* left: the name, the headline, Explore */
  body.pn .prodgroup .pc-row__h:not(#_):not(#_){grid-area:nm !important;position:relative;z-index:2;margin:0 0 16px !important;font-size:13.5px !important;font-weight:400;letter-spacing:.08em;text-transform:uppercase;line-height:1.3}
  body.pn .prodgroup .pc-row__h a:not(#_):not(#_){color:rgba(11,18,32,.55) !important;text-decoration:none}
  body.pn .prodgroup .prodgroup__h:not(#_):not(#_){grid-area:hd !important;display:flex;align-items:baseline;margin:0 0 30px !important;max-width:13em;font-size:clamp(28px,2.7vw,42px) !important;font-weight:400 !important;line-height:1.1 !important;letter-spacing:-.02em;color:#0B1220 !important;text-align:left !important}
  body.pn .prodgroup .prodcard__link:not(#_):not(#_){grid-area:ex !important;justify-self:start;position:relative;z-index:2;background:#0B1220 !important;color:#FFFFFF !important;box-shadow:none !important}
  body.pn .prodgroup .prodcard__link:not(#_):not(#_):hover{background:#26324A !important;color:#FFFFFF !important}
  body.pn .prodgroup .prodcard__link:not(#_):not(#_) :is(.btn-roll,.btn-roll__t){color:#FFFFFF !important}
  /* the old picture and paragraph give way to pn.js's frame (middle) and right-hand column */
  body.pn .prodgroup :is(.prodgroup__pic,.prodcard__pos):not(#_):not(#_){display:none !important}
  /* middle: a portrait frame that opens from its centre to the sides; the picture inside settles from a slight zoom
     (and keeps easing in slowly while the row is hovered); films play */
  body.pn .prodgroup .pn-m{grid-area:pic;position:absolute;left:50%;top:50%;z-index:0;width:min(300px,20vw);aspect-ratio:1 / 1;translate:-50% -50%;overflow:hidden;background:#0B1220;
    clip-path:inset(0 50% 0 50%);transition:clip-path .45s cubic-bezier(.65,0,.25,1);pointer-events:none}
  body.pn .prodgroup .pn-m :is(img,video){display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.16);transition:transform .45s ease}
  /* films and live pictures already move: no zoom on top (Julian, 13 Oct) */
  body.pn .prodgroup .pn-m video:not(#_){transform:none !important;transition:none !important}
  body.pn .prodgroup .pn-m--contain :is(img,video){object-fit:cover;object-position:50% 50%}
  /* the heroes' live pictures, whole in the square, on their own grounds */
  body.pn .prodgroup .pn-m__vis{position:absolute;inset:0}
  body.pn .prodgroup .pn-m__vis canvas{position:absolute;inset:0;display:block}
  body.pn .prodgroup .pn-m__vis.is-torus{background:radial-gradient(120% 90% at 50% 18%,#06213F 0%,#020F22 55%,#00050E 100%)}
  body.pn .prodgroup .pn-m__vis.is-bera{background:linear-gradient(180deg,#181D23 0%,#1C2125 100%)}
  body.pn .prodgroup .pn-m__vis.is-unicepta{background:linear-gradient(225deg,#F7770A 0%,#E75605 50%,#D44304 100%)}
  body.pn .prodgroup .pn-m__vis.is-voice{background:#0B1220}
  /* per-film framing */
  body.pn .prodgroup .pn-m__vis.is-circles{background:#1B1B1D}
  body.pn .prodgroup .pn-m--fit video{object-fit:contain}
  body.pn .prodgroup .pn-m--white{background:#FFFFFF}
  body.pn .prodgroup .pn-m--white video{filter:brightness(1.08)}   /* the films' off-white ground becomes the frame's white */
  body.pn .prodgroup .pn-m--left video{object-position:24% 50%}
  body.pn .prodgroup:is(:hover,:focus-within) .pn-m{clip-path:inset(0 0 0 0)}
  body.pn .prodgroup:is(:hover,:focus-within) .pn-m img{transform:scale(1);transition:transform 7s cubic-bezier(.2,.7,.2,1)}
  /* right: the paragraph, then Who it's for and What it does */
  body.pn .prodgroup .pn-r{grid-column:3;grid-row:1 / -1;justify-self:end;max-width:440px;position:relative;z-index:3;text-align:left;pointer-events:none}
  body.pn .pn-r__p:not(#_):not(#_){margin:0;font-size:18px;line-height:1.45;color:rgba(11,18,32,.62)}
  /* the plus: Who it's for and What it does open in a small card instead of lengthening the row */
  body.pn .pn-info{position:relative;margin-top:24px;pointer-events:auto}
  body.pn .pn-plus:not(#_):not(#_){display:inline-flex;align-items:center;gap:12px;padding:0;border:0;background:none;color:#0B1220;cursor:pointer;
    font:400 13.5px/1 'Roobert',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:.08em;text-transform:uppercase}
  body.pn .pn-plus__ic{position:relative;flex:none;width:32px;height:32px;box-shadow:inset 0 0 0 1px #0B1220;background:#FFFFFF;transition:background-color .2s ease}
  body.pn .pn-plus__ic::before,body.pn .pn-plus__ic::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:#0B1220;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  body.pn .pn-plus__ic::after{transform:rotate(90deg)}
  body.pn .pn-plus:hover .pn-plus__ic{background:#E7E7E3}
  body.pn .pn-plus[aria-expanded="true"] .pn-plus__ic{background:#0B1220}
  body.pn .pn-plus[aria-expanded="true"] .pn-plus__ic::before,body.pn .pn-plus[aria-expanded="true"] .pn-plus__ic::after{background:#FFFFFF}
  body.pn .pn-plus[aria-expanded="true"] .pn-plus__ic::before{transform:rotate(45deg)}
  body.pn .pn-plus[aria-expanded="true"] .pn-plus__ic::after{transform:rotate(135deg)}
  body.pn .pn-info{display:inline-block}
  body.pn .pn-card{position:absolute;right:calc(100% + 12px);bottom:0;left:auto;top:auto;z-index:20;width:min(400px,30vw);padding:22px 24px 24px;box-sizing:border-box;background:#FFFFFF;
    box-shadow:inset 0 0 0 1px rgba(11,18,32,.14),0 18px 40px -18px rgba(11,18,32,.28);clip-path:inset(0 0 0 100%);opacity:0;translate:8px 0;
    transition:clip-path .38s cubic-bezier(.65,0,.25,1),opacity .25s ease,translate .38s cubic-bezier(.2,.7,.2,1)}
  body.pn .pn-card.is-in{clip-path:inset(0 0 0 0);opacity:1;translate:0 0}
  body.pn .prodgroup.pn-open{z-index:5}
  body.pn .pn-r__blk + .pn-r__blk{margin-top:18px;padding-top:16px;border-top:1px solid rgba(11,18,32,.1)}
  body.pn .pn-r__lab:not(#_):not(#_){margin:0 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(11,18,32,.48)}
  body.pn .pn-r__who:not(#_):not(#_){margin:0;font-size:16px;line-height:1.45;color:#0B1220}
  body.pn .pn-r__what{display:flex;flex-wrap:wrap;gap:6px 0;margin:0;padding:0;list-style:none;font-size:16px;line-height:1.45;color:#0B1220}
  body.pn .pn-r__what li:not(:last-child)::after{content:"·";margin:0 .55em;color:rgba(11,18,32,.35)}
}
@media (max-width:860px){
  /* phones: the card's picture is the same moving one as on desktop (films play while the card is on screen) */
  body.pn .pn-r{display:none !important}
  body.pn .prodgroup .prodgroup__pic:not(#_):not(#_){visibility:hidden}
  body.pn .prodgroup__head .pn-m{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0B1220;pointer-events:none}
  body.pn .prodgroup__head .pn-m :is(img,video){display:block;width:100%;height:100%;object-fit:cover}
  body.pn .prodgroup__head .pn-m--fit video{object-fit:contain}
  body.pn .prodgroup__head .pn-m--white{background:#FFFFFF}
  body.pn .prodgroup__head .pn-m--white video{filter:brightness(1.08)}
  body.pn .prodgroup__head .pn-m--left video{object-position:24% 50%}
  body.pn .prodgroup__head .pn-m__vis{position:absolute;inset:0}
  body.pn .prodgroup__head .pn-m__vis canvas{position:absolute;inset:0;display:block}
  body.pn .prodgroup__head .pn-m__vis.is-torus{background:radial-gradient(120% 90% at 50% 18%,#06213F 0%,#020F22 55%,#00050E 100%)}
  body.pn .prodgroup__head .pn-m__vis.is-bera{background:linear-gradient(180deg,#181D23 0%,#1C2125 100%)}
  body.pn .prodgroup__head .pn-m__vis.is-unicepta{background:linear-gradient(225deg,#F7770A 0%,#E75605 50%,#D44304 100%)}
  body.pn .prodgroup__head .pn-m__vis:is(.is-voice){background:#0B1220}
  body.pn .prodgroup__head .pn-m__vis.is-circles{background:#1B1B1D}
  /* the card's words stay above it */
  body.pn .prodgroup__head > :not(.pn-m):not(.prodgroup__pic){position:relative;z-index:1}
}
@media (prefers-reduced-motion:reduce){
  body.pn .prodgroup .pn-m,body.pn .prodgroup .pn-m :is(img,video){transition:none !important}
}

/* "Explore solutions to orchestrate / marketing at scale." in two lines on desktop (the phone already breaks there) */
body.pn .pn-br{display:none}
@media (min-width:861px){ body.pn .pn-br{display:inline} }
@media (prefers-reduced-motion:reduce){ body.pn .pn-card{transition:none} }

/* phones: the hero's two buttons sit side by side at the same width; the longer one takes two lines (Julian, 13 Oct) */
@media (max-width:560px){
  body.pn .pn-hero__acts:not(#_){display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:420px;margin:0 auto}
  body.pn .pn-hero__acts .btn:not(#_):not(#_){width:100%;height:auto !important;min-height:46px;padding:8px 10px !important;white-space:normal;line-height:1.2 !important;font-size:12.5px !important;text-align:center}
  body.pn .pn-hero__acts .btn .btn-roll:not(#_):not(#_){height:auto;white-space:normal;top:0}
  body.pn .pn-hero__acts .btn .btn-roll__t:not(#_):not(#_){line-height:1.2 !important;text-shadow:none}
}

/* phones: the plus and the panel it opens look like the desktop ones (Julian, 13 Oct: consistency): a square outlined
   plus with its words beside it, turning to an ink cross when open; the panel white with a hairline, square */
@media (max-width:860px){
  body.pn .prodgroup .pc-more__btn:not(#_):not(#_){display:inline-flex;align-items:center;gap:12px;width:auto !important;height:auto !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:none !important;color:#0B1220 !important}
  body.pn .prodgroup .pc-more__btn:not(#_):not(#_) svg{flex:none;width:32px;height:32px;padding:9px;box-sizing:border-box;background:#FFFFFF;box-shadow:inset 0 0 0 1px #0B1220;color:#0B1220;transform:none !important;transition:background-color .2s ease,color .2s ease}
  body.pn .prodgroup .pc-more__btn:not(#_):not(#_)::after{content:"Who it\2019s for & what it does";font:400 13.5px/1 'Roobert',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:.08em;text-transform:uppercase}
  body.pn .prodgroup .pc-more__btn[aria-expanded="true"]:not(#_):not(#_) svg{background:#0B1220;color:#FFFFFF}
  /* only the plus turns into the cross; its square stays put */
  body.pn .prodgroup .pc-more__btn:not(#_):not(#_) svg path{transform-box:fill-box;transform-origin:center;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  body.pn .prodgroup .pc-more__btn[aria-expanded="true"]:not(#_):not(#_) svg path{transform:rotate(45deg)}
  body.pn .prodgroup .pc-more:not(#_):not(#_){background:#FFFFFF !important;border-radius:0 !important;box-shadow:inset 0 0 0 1px rgba(11,18,32,.14) !important}
  body.pn .prodgroup .pc-more .pc-lab:not(#_):not(#_){font-size:12px !important;letter-spacing:.08em;color:rgba(11,18,32,.48) !important}
}
/* phones: Search+'s bar sits higher in the card, clear of the card's number and title */
/* IMAI: the timeline cropped in close (its middle years and their faces, the year line at the foot) so it reads in a square */
body.pn .pn-m--imai video:not(#_){object-fit:cover !important;object-position:50% 70% !important;transform:scale(1.15) !important;transform-origin:50% 85%}
/* phones: Newintel's pulse sits a little higher in its card, clear of the card's words */
@media (max-width:860px){ body.pn .prodgroup__head .pn-m--contain img{transform:translateY(-11%) scale(1.22) !important} }
/* desktop: a row's live picture is laid out only while the row is open (pn.js .pn-live), so the closed rows draw nothing */
@media (min-width:861px){ body.pn .prodgroup:not(.pn-live) .pn-m :is(.pn-m__vis,.nv-cover){display:none !important} }
/* IMAI and Numetrix on a soft blue: their off-white ground darkens into it, the faces keep their colours (desktop and phones) */
body.pn .pn-m--blue{background:#DCEFF6 !important}
body.pn .pn-m--blue video:not(#_){filter:none !important;mix-blend-mode:darken}
/* phones: Machine OS's mark sits higher in its card, clear of the card's words */
@media (max-width:860px){ body.pn .prodgroup__head .pc-marks--one{top:36%;width:50%;height:50%} }
/* phones: the plus stands further from the paragraph above it, three times the old 14px (Julian, 13 Oct) */
@media (max-width:860px){ body.pn .prodgroup .pc-more__btn:not(#_):not(#_):not(#_){margin-top:42px !important} }
/* desktop: the plus stands three times further from the paragraph above it (Julian, 13 Oct, as on phones) */
@media (min-width:861px){ body.pn .pn-info:not(#_){margin-top:72px} }
/* phones: the big statement splits into a title and a paragraph (Julian, 13 Oct: it took too much room). Its first
   sentence stays the title; "Our solutions extend…" becomes a paragraph like the site's others (16px, 1.3, grey) */
@media (max-width:760px){
  body.pn .pn-say__b:not(#_):not(#_){display:block;margin-top:18px;font-size:16px !important;line-height:1.3 !important;letter-spacing:0;color:rgba(11,18,32,.62)}
}
/* phones: the title's last clause in the titles' grey (Julian, 13 Oct) */
@media (max-width:760px){ body.pn .pn-say__c:not(#_){color:#8F949B} }

/* a question picked in "Show me" hides the products that do not answer it (faqs.js sets hidden); the rows' own
   display:grid kept them showing, so the filter seemed to do nothing (client, 15 Oct) */
body.pn #productsRoot [hidden]:not(#_):not(#_){display:none !important}   /* above the rows' own body.pn .prodgroup:not(#_):not(#_) */

/* Search+'s row: its hero's picture, drawn from the platform, in the phone's squarer arrangement (20 Oct) */
body.pn .pn-m__vis.is-searchplus:not(#_){background:#009CBD}
body.pn .pn-m__vis.is-searchplus svg.sx-sp{position:absolute;inset:0;width:100%;height:100%;display:block;font-family:'Roobert',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
body.pn .pn-m__vis .sx-sp__tip.is-off{display:none}