/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT PAGE — the layout the four product landing pages share (2026-09-10).
   Structure from Stagwell's "Four Ad Landing Page Definitions": logo, an
   outcome-led title, 1-2 short paragraphs, Book a Demo dominant and repeated,
   Visit Product Website secondary, the product film, 4-6 scannable sections,
   proof, and a close — which, per Julian, is the homepage's own chat.

   Everything else — tokens, bar, footer, buttons, type, the chat itself —
   comes from home.css, loaded before this file, so a product page is built
   from the homepage's kit and cannot drift from it. Classes are pp-* so
   nothing here can reach a homepage section. The pages themselves are
   generated by build-product-pages.py; edit the content there, not in the
   HTML.
   ═══════════════════════════════════════════════════════════════════════════ */

.pp-wrap{max-width:1200px;margin-inline:auto;padding-inline:var(--gutter)}

/* ── hero: the footer's gradient — navy, teal, orange at 30deg, the designer's
      own — not the near-black it first had ("too dark", client). A light navy
      veil across the top half keeps the bar and the white type readable
      where the gradient runs out into teal and orange. The film below is the
      picture, so there is no photograph here. ────────────────────────── */
.pp-hero{position:relative;overflow:hidden;background:#003349;color:#FFFFFF;text-align:center;
  padding:calc(var(--nav-h) + clamp(52px,8vh,104px)) 0 clamp(190px,24vw,340px)}
.pp-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,34,49,.38) 0%,rgba(0,34,49,.12) 55%,rgba(0,34,49,0) 100%),
    linear-gradient(30deg,#003349 0%,#009CBD 55%,#FF6D24 100%)}
/* a product's own hero picture, when it has one (client, 2026-09-10): it takes
   the place of the gradient on that page only — the rest keep the footer's
   gradient until their pictures arrive. The pictures are dark, designed
   grounds (The Machine's mark glowing in a corner, New Voices' bars at the
   edges), so the veil is only a light shade under the bar; a heavier one
   muddied the glow. The picture is set from the page as --hero-bg. */
.pp-hero--photo::before{background:
    linear-gradient(180deg,rgba(7,20,29,.32) 0%,rgba(7,20,29,.10) 38%,rgba(7,20,29,0) 70%),
    var(--hero-bg) center / cover no-repeat}
.pp-hero__in{position:relative;display:flex;flex-direction:column;align-items:center}

/* the product's own mark, above the title (the definitions ask for it there) */
.pp-logo{display:block;height:clamp(30px,3.2vw,42px);width:auto;margin:0 0 28px}
.pp-logo--screen{mix-blend-mode:screen}          /* a logo drawn on black: the black falls away on the dark ground */
.pp-logo--mark{display:inline-flex;align-items:center;gap:14px;height:auto;
  font-family:var(--display);font-weight:600;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.01em;color:#FFFFFF}
.pp-logo--mark img{height:clamp(30px,3vw,40px);width:auto;display:block}
.pp-logo--type{height:auto;font-family:var(--display);font-weight:700;font-size:clamp(18px,1.8vw,24px);
  letter-spacing:.08em;text-transform:uppercase;color:#FFFFFF}

.pp-eyebrow{margin:0 0 18px;font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;color:rgba(255,255,255,.66)}
/* two lines on a desktop where the words allow it (client): a wider measure
   and a step down in size — the longest title is 62 characters */
.pp-title{margin:0;max-width:min(100%,1020px);font-family:var(--display);font-weight:500;
  font-size:clamp(32px,min(1rem + 3vw,8.4vh),56px);line-height:1.1;letter-spacing:-.02em;text-wrap:balance;color:#FFFFFF}
/* three lines at most on a desktop, and no wider than that needs (client):
   the descriptions are the definitions' own sentences, so the measure is set
   around them rather than the copy being cut. 800px — measured: all four hold
   three lines down to 760px at 1440, 1280 and 1100; The Targeting Machine
   breaks to four at 740. */
.pp-lede{margin:22px 0 0;max-width:min(100%,800px);font-size:clamp(15px,1.1vw,17px);line-height:1.6;color:rgba(255,255,255,.84)}
.pp-acts{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:18px}   /* the site link under the button (client) */
/* the product's own site is a link, not a button: Book a demo is the page's one
   ask, and a second pill beside it competed for the eye (client). An up-right
   arrow says it leaves the page. */
.pp-site{display:inline-flex;align-items:center;gap:6px;padding:6px 0;font-family:var(--ui);font-size:14px;font-weight:500;
  color:rgba(255,255,255,.86);text-decoration:none;transition:color .25s ease}   /* no underline (client) */
.pp-site:hover{color:#FFFFFF}
.pp-site:focus-visible{outline:2px solid #FFFFFF;outline-offset:4px;border-radius:2px}
.pp-site__ic{width:14px;height:14px;flex-shrink:0;transition:transform .3s var(--ease)}
.pp-site:hover .pp-site__ic{transform:translate(1px,-1px)}

/* ── the film: rises out of the hero onto the white, 16:9, poster first; the
      video only downloads when someone presses play (preload="none"). No
      shadow and no blur on it or its play disc (client). ────────────────── */
.pp-film{position:relative;padding:0 var(--gutter);margin-top:calc(-1 * clamp(160px,20vw,300px))}
.pp-film__frame{position:relative;max-width:1160px;margin:0 auto;aspect-ratio:16/9;border-radius:24px;overflow:hidden;
  background:#000000}   /* no drop shadow (client) */
.pp-film video{width:100%;height:100%;display:block;object-fit:cover}
.pp-film__play{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
  color:#FFFFFF;background:rgba(7,20,29,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);cursor:pointer;   /* no blur (client): a darker glass reads over bright frames without it */
  transition:transform .35s var(--ease),background-color .25s ease,opacity .25s ease}
.pp-film__play svg{width:40px;height:40px;margin-left:5px}   /* a smaller disc, a bigger triangle (client); its weight sits left of its box */
.pp-film__play:hover{transform:scale(1.06);background:rgba(7,20,29,.52)}
.pp-film__play:focus-visible{outline:2px solid #FFFFFF;outline-offset:4px}
.pp-film.is-playing .pp-film__play{opacity:0;pointer-events:none;transform:scale(.9)}

/* ── how it works: the scannable sections, beside the product's picture, in
      the designer's register (a 2px-tracked teal eyebrow, 600 headings) ── */
.pp-more{padding:clamp(88px,11vw,150px) 0 clamp(72px,9vw,120px)}
.pp-more__head{max-width:760px;margin:0 0 clamp(40px,5vw,64px)}
.pp-sign{margin:0 0 18px;font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--teal)}
.pp-h2{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(30px,1rem + 2.4vw,50px);
  line-height:1.08;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.pp-h2 span{color:var(--teal)}
.pp-more__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:start}
.pp-more__media{border-radius:24px;overflow:hidden;background:var(--deep)}
.pp-more__media img{width:100%;height:auto;display:block}
.pp-more__media picture{display:block}
.pp-steps{margin:0;padding:0;list-style:none}
.pp-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 16px;padding:22px 0;border-top:1px solid var(--line)}
.pp-steps li:last-child{border-bottom:1px solid var(--line)}
.pp-steps b{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--teal);padding-top:6px}
.pp-steps h3{margin:0;font-family:var(--display);font-size:clamp(18px,1.4vw,21px);font-weight:600;line-height:1.3;color:var(--ink)}
.pp-steps p{margin:6px 0 0;font-size:15px;line-height:1.6;color:var(--ink-2)}
.pp-mid{margin:clamp(48px,6vw,72px) 0 0;display:flex;justify-content:center}

/* ── proof: the candidate figures the definitions list, flagged as such until
      the product owners approve them (the house honesty rule).
      Centred, one column per figure and capped so two figures don't sprawl
      across the page, a short bar in a brand colour over each number, the
      numbers large (client: "too simple… lines with colour, less wide, the
      numbers bigger, the alignment off"). ───────────────────────────── */
.pp-proof{background:#F5F7F8;padding:clamp(80px,10vw,128px) 0;text-align:center}
.pp-proof__head{display:flex;flex-direction:column;align-items:center;margin-bottom:clamp(44px,5vw,64px)}
.pp-proof__head .pp-sign{margin:0 0 14px}
.pp-proof__head .pp-h2{max-width:22ch}
.pp-flag{margin-top:18px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#7A5200;
  background:#FFF1D2;border-radius:999px;padding:6px 12px}
.pp-figs{margin:0 auto;padding:0;list-style:none;display:grid;justify-content:center;
  grid-template-columns:repeat(var(--n,2),minmax(0,var(--col,300px)));gap:clamp(28px,4vw,56px)}
.pp-figs--n2{--n:2;--col:320px}
.pp-figs--n3{--n:3;--col:300px}
.pp-figs--n4{--n:4;--col:250px;gap:clamp(24px,3vw,40px)}   /* four to a row: a tighter gap buys the numbers room */
.pp-figs li{display:flex;flex-direction:column;align-items:center;min-width:0}
.pp-figs li::before{content:"";width:40px;height:4px;border-radius:2px;background:var(--teal);margin-bottom:24px}
.pp-figs li:nth-child(4n+2)::before{background:var(--orange)}
.pp-figs li:nth-child(4n+3)::before{background:var(--amber)}
.pp-figs li:nth-child(4n+4)::before{background:var(--blue)}
.pp-figs strong{display:block;font-family:var(--display);font-weight:600;line-height:1;letter-spacing:-.035em;
  color:var(--ink);white-space:nowrap;font-size:clamp(56px,6.4vw,96px)}
.pp-figs--n4 strong{font-size:clamp(38px,3.8vw,56px)}   /* "20–40%" is ~4x its size wide; at 64px it overran a 229px column */
.pp-figs--words strong{font-size:clamp(24px,2.2vw,30px);line-height:1.2;letter-spacing:-.01em;white-space:normal}
.pp-figs span{display:block;margin-top:14px;font-size:15px;line-height:1.5;color:var(--ink-2);max-width:26ch}
.pp-proof__note{margin:clamp(44px,5vw,60px) auto 0;font-size:14px;line-height:1.55;color:var(--ink-3);max-width:62ch}

@media (max-width:820px){
  /* the How it works picture is 4:5 — at a phone's full width it ran ~410px
     tall above the steps; square was still too tall (client: "HD proportion") */
  .pp-more__media img{aspect-ratio:16/9;height:auto;object-fit:cover;object-position:center}
  /* the hero on a phone: tighter to the bar, a title that holds three lines
     where the words allow, the line at a reading size, and Book a demo the
     column's width, as in the close */
  .pp-hero{padding-top:calc(var(--nav-h) + 36px)}
  .pp-logo,.pp-logo--mark{margin-bottom:22px}
  .pp-eyebrow{max-width:300px;font-size:11px;letter-spacing:1.6px;line-height:1.6;text-wrap:balance}
  .pp-title{font-size:clamp(26px,7.3vw,34px);line-height:1.12}   /* 27.4 at 375: Agent Cloud's 62 characters hold three lines */
  .pp-lede{margin-top:18px;font-size:15px;line-height:1.6;text-wrap:pretty}
  .pp-acts{width:100%;margin-top:28px;gap:14px}
  .pp-acts .btn{width:100%}
  .pp-hero{padding-bottom:clamp(120px,34vw,200px)}
  .pp-film{margin-top:calc(-1 * clamp(96px,28vw,170px))}
  .pp-film__frame{border-radius:16px}
  .pp-film__play{width:56px;height:56px}
  .pp-film__play svg{width:31px;height:31px;margin-left:4px}
  .pp-more__grid{grid-template-columns:1fr}
  .pp-steps li{grid-template-columns:36px minmax(0,1fr)}
  .pp-figs,.pp-figs--n3,.pp-figs--n4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-figs--words{grid-template-columns:1fr}
  .pp-figs strong{font-size:clamp(44px,12vw,64px)}
  .pp-figs--n4 strong{font-size:clamp(34px,9vw,48px)}
  .pp-figs--words strong{font-size:clamp(22px,6vw,26px)}   /* words, not numbers: the 45px above was for figures */
}

/* ── a light hero (client, 2026-09-10) ────────────────────────────────────────
   Agent Cloud's picture is pale sky blue: white type and the transparent white
   bar would vanish on it, and a dark veil would kill the picture. So that page
   turns its hero to ink — title, line, eyebrow, the mark's name, the site link
   — keeps a thin white veil under the bar instead of a navy one, and draws the
   bar in its dark state while it floats over the picture. Set per product with
   hero_tone='light' in build-product-pages.py. */
.pp-hero--photo.pp-hero--light::before{background:
    linear-gradient(180deg,rgba(255,255,255,.40) 0%,rgba(255,255,255,.12) 40%,rgba(255,255,255,0) 70%),
    var(--hero-bg) center / cover no-repeat}
.pp-hero--light{color:var(--ink)}
.pp-hero--light .pp-title{color:var(--ink)}
.pp-hero--light .pp-lede{color:var(--ink-2)}
.pp-hero--light .pp-eyebrow{color:var(--ink-3)}
.pp-hero--light .pp-logo--mark,.pp-hero--light .pp-logo--type{color:var(--ink)}
.pp-hero--light .pp-site{color:var(--ink-2)}
.pp-hero--light .pp-site:hover{color:var(--ink)}
.pp-hero--light .pp-site:focus-visible{outline-color:var(--ink)}
/* the bar over a light hero: its own dark state, until it turns solid white anyway */
body.pp--light-hero .nav:not(.is-stuck){color:var(--ink)}
body.pp--light-hero .nav:not(.is-stuck) .nav__links a,
body.pp--light-hero .nav:not(.is-stuck) .nav__droptrig{color:var(--ink)}
body.pp--light-hero .nav:not(.is-stuck) .nav__brand,
body.pp--light-hero .nav:not(.is-stuck) .nav__burger{color:var(--ink)}
body.pp--light-hero .nav:not(.is-stuck) .btn--ink{background:var(--ink);color:#FFFFFF}
body.pp--light-hero .nav:not(.is-stuck) .nav__search,
body.pp--light-hero .nav:not(.is-stuck) .nav__search:hover{background:transparent;color:var(--ink);box-shadow:none}   /* the solid bubble in ink over the pale picture */

/* ── the close: the homepage's own "How can we help?", duplicated as it is
      (client) — the bobbing dots, the turning hint, Book a demo and Call me.
      Everything about it is home.css's; this only seats the conversation that
      opens in place of the field once someone types, and keeps the homepage
      hero's extras (the thinking field, the starting points) out of it. ─── */
body.pp .ask-end #ask{width:100%;max-width:none;margin:0;padding:0}
body.pp .ask-end #ask .chat{width:100%;margin-top:0}
body.pp .ask-end .chat__tags{display:none}
/* the thinking field under the whole section (client: "I want it back… only on
   the white section"): the section holds it, the content sits above it */
body.pp .ask-end{position:relative;overflow:hidden}
body.pp .ask-end > .hero__think{position:absolute;inset:0;width:100%;height:100%;z-index:0}
body.pp .ask-end > .ask-end__in{position:relative;z-index:1}

/* The Targeting Machine: its picture runs light cyan in the top-left, right under
   the bar's Stagwell AI mark, and the mark's teal middle bar disappeared into it
   (1.4:1). A soft navy shade from that corner only (client) — ~.6 where the logo
   sits, gone by the middle — lifts the teal to ~3:1 and the white to ~10:1. */
body.pp--targeting-machine .pp-hero--photo::before{background:
    radial-gradient(ellipse 45% 60% at 0% 0%,rgba(4,34,52,.66) 0%,rgba(4,34,52,.45) 30%,rgba(4,34,52,0) 100%),
    linear-gradient(180deg,rgba(7,20,29,.32) 0%,rgba(7,20,29,.10) 38%,rgba(7,20,29,0) 70%),
    var(--hero-bg) center / cover no-repeat}

/* The Machine's How it works picture: the mark sat small in a big dark field
   (client: "zoom it a bit, the symbol is too small" — this page only). Scaled
   from the mark's own centre; the rounded frame clips the edges. */
body.pp--the-machine .pp-more__media img{transform:scale(1.5);transform-origin:50% 48%}
@media (max-width:820px){
  body.pp--the-machine .pp-more__media img{transform:scale(1.7);transform-origin:50% 49%}
}

/* ── the hero keeps a short line; the whole description sits under the film
   (client, 2026-09-10: "compress it to two lines… put the entire paragraph
   after the video, centred, black, readable, the size of the How it works
   titles"). Centred, it closes the film and opens How it works. ─────────── */
.pp-lede{max-width:min(100%,640px);text-wrap:balance}
.pp-about{padding:clamp(64px,8vw,112px) 0 0}
.pp-about__text{margin:0 auto;max-width:820px;text-align:center;font-family:var(--display);
  font-size:clamp(18px,1.4vw,21px);font-weight:500;line-height:1.6;letter-spacing:-.005em;color:var(--ink);text-wrap:pretty}
.pp-about + .pp-more{padding-top:clamp(72px,9vw,120px)}

/* ═══ Book a demo: its own page (client, 2026-09-10) ══════════════════════════
   "Not a scroll-down something that appears suddenly": a page with the brand
   gradient (the footer's), the session's title and line on the left, and the
   form in a white card on the right; stacked on a phone. lead.js mounts the
   form into #bookForm with visible labels and the same checks and events. */
.bk-hero{position:relative;overflow:hidden;min-height:100svh;display:flex;align-items:center;color:#FFFFFF;
  padding:calc(var(--nav-h) + clamp(40px,7vh,96px)) 0 clamp(64px,10vh,120px);
  background:linear-gradient(30deg,#003349 0%,#009CBD 55%,#FF6D24 100%)}
.bk-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,34,49,.42) 0%,rgba(0,34,49,.14) 50%,rgba(0,34,49,0) 100%)}
.bk__in{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:clamp(40px,6vw,104px);align-items:center}
.bk__eyebrow{text-align:left;color:rgba(255,255,255,.78)}
.bk__title{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(36px,1rem + 3vw,62px);line-height:1.07;letter-spacing:-.02em;color:#FFFFFF;text-wrap:balance}
.bk__lede{margin:24px 0 0;max-width:500px;font-size:clamp(16px,1.15vw,19px);line-height:1.6;color:rgba(255,255,255,.9);text-wrap:pretty}
.bk__card{background:#FFFFFF;color:var(--ink);border-radius:28px;padding:clamp(24px,3vw,40px)}
.bk__card .lead__form{display:flex;flex-direction:column;gap:18px;margin:0}
.bk__card .lead__row{display:flex;flex-direction:column;gap:8px;margin:0}
.bk__card .lead__lbl{font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--ink)}
.bk__card input{width:100%;height:52px;margin:0;padding:0 16px;border:0;border-radius:14px;background:#F4F5F7;
  box-shadow:inset 0 0 0 1px var(--line);font-family:var(--ui);font-size:16px;color:var(--ink);transition:box-shadow .2s ease,background-color .2s ease}
.bk__card input:hover{box-shadow:inset 0 0 0 1px rgba(11,18,32,.3)}
.bk__card input:focus{outline:none;background:#FFFFFF;box-shadow:inset 0 0 0 2px var(--ink)}
.bk__card .lead__hint{margin:-8px 0 0;font-size:13px;color:#C2410C}
.bk__card .btn{width:100%;height:60px;margin-top:6px;border:0;border-radius:999px;background:var(--ink);color:#FFFFFF;
  font-family:var(--ui);font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:background-color .25s ease,transform .3s var(--ease)}
.bk__card .btn:hover{background:#000000;transform:translateY(-1px)}
.bk__card .btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.bk__card .modal__fine{margin:16px 0 0;font-size:12px;line-height:1.5;color:var(--ink-3);text-align:center}
.bk__card .modal__ok{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.bk__card .modal__ok h3{margin:4px 0 0;font-family:var(--display);font-size:26px;font-weight:600;line-height:1.2;color:var(--ink)}
.bk__card .modal__ok p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)}
.bk__card .modal__tick{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(0,156,189,.12);color:#009CBD}
@media (max-width:900px){
  .bk-hero{min-height:0;align-items:flex-start;padding-top:calc(var(--nav-h) + 40px)}
  .bk__in{grid-template-columns:1fr;gap:32px}
  .bk__title{font-size:clamp(32px,9vw,44px)}
  .bk__card{border-radius:22px}
}

/* ═══ the other products, /s/{id} (client, 2026-09-10) ════════════════════════
   Built like the four: the same hero on a Stagwell gradient instead of a
   picture — three, in turn: the footer's (navy → teal → orange), the Why
   section's (teal → deep → navy), and navy → deep warmed with orange — the
   product's name set as the mark, no film under it; then How it works, the
   products teams pair it with, and the homepage's close. */
.sp-hero{padding-bottom:clamp(72px,9vw,128px)}
.sp-hero--g2::before{background:
    linear-gradient(180deg,rgba(0,34,49,.34) 0%,rgba(0,34,49,.10) 50%,rgba(0,34,49,0) 100%),
    linear-gradient(20deg,#009CBD 0%,#035173 55%,#003349 100%)}
.sp-hero--g3::before{background:
    linear-gradient(180deg,rgba(0,34,49,.36) 0%,rgba(0,34,49,.10) 50%,rgba(0,34,49,0) 100%),
    linear-gradient(210deg,#FF6D24 0%,#035173 48%,#003349 100%)}
.sp-mark{margin:0 0 24px;font-family:var(--display);font-weight:600;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.01em;line-height:1.1;color:#FFFFFF}
@media (min-width:821px){ .sp .pp-more__media img{aspect-ratio:4/5;height:auto;object-fit:cover} }
.sp-tile{display:grid;place-items:center;aspect-ratio:4/5;padding:32px;background:linear-gradient(30deg,#003349 0%,#009CBD 55%,#FF6D24 100%);
  font-family:var(--display);font-weight:600;font-size:clamp(28px,3vw,44px);color:#FFFFFF;text-align:center}
.sp .pp-steps h3{font-size:clamp(19px,1.5vw,22px)}
.sp .pp-steps li{align-items:center}
.sp .pp-steps b{padding-top:0}
.sp-also{padding:0 0 clamp(72px,9vw,120px)}
.sp-also__h{margin-bottom:clamp(24px,3vw,36px)}
.sp-also__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.sp-also__item{display:flex;align-items:center;justify-content:space-between;gap:16px;height:100%;padding:18px 20px;border-radius:18px;
  background:#F5F7F8;color:var(--ink);text-decoration:none;transition:background-color .2s ease}
.sp-also__item:hover{background:#ECEFF2}
.sp-also__item:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sp-also__n{display:block;font-family:var(--display);font-size:17px;font-weight:600;line-height:1.3}
.sp-also__w{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:var(--ink-3)}
.sp-also__item svg{width:18px;height:18px;flex-shrink:0;color:var(--ink-3);transition:transform .3s var(--ease)}
.sp-also__item:hover svg{transform:translateX(2px);color:var(--ink)}
@media (max-width:820px){ .sp-hero{padding-bottom:clamp(56px,14vw,88px)} }

/* IMAI (influencermarketing.ai), client 2026-09-10: its own ground — pastel
   turquoise, green and purple, soft corners of the first and last over a wash
   of all three. The hero reads in ink on it (the light-hero rules) and the bar
   takes its dark state. The listing keeps IMAI's photograph: here the tile and
   the hero are meant to differ (client). */
.sp-hero--imai::before{background:
    radial-gradient(55% 75% at 0% 0%,rgba(150,228,220,.95) 0%,rgba(150,228,220,0) 70%),
    radial-gradient(55% 80% at 100% 100%,rgba(206,190,247,.95) 0%,rgba(206,190,247,0) 70%),
    linear-gradient(120deg,#B4EBE4 0%,#C9F0D3 48%,#D8CCF8 100%)}
.pp-hero--light .sp-mark{color:var(--ink)}
/* UNICEPTA, client 2026-09-10: pastel peach and pastel green — peach from the
   top-left, green from the bottom-right, over a wash of both; ink type */
.sp-hero--unicepta::before{background:
    radial-gradient(55% 75% at 0% 0%,rgba(255,206,178,.95) 0%,rgba(255,206,178,0) 70%),
    radial-gradient(55% 80% at 100% 100%,rgba(184,234,196,.95) 0%,rgba(184,234,196,0) 70%),
    linear-gradient(120deg,#FFDCC8 0%,#F3E6D2 45%,#CDEFD6 100%)}

/* ── Book a demo, a second pass (client, 2026-09-10: "too simple, especially
   on the desktop… maybe an image like the home page background"). The
   homepage's own still under its veil replaces the flat gradient, and the left
   side carries the demo's line as three points with icons in glass squares. */
.bk-hero{background:#07141D}
.bk-hero::before{background:
    linear-gradient(100deg,rgba(7,20,29,.74) 0%,rgba(7,20,29,.48) 50%,rgba(7,20,29,.30) 100%),
    url("/assets/img/products-hero.jpg") 50% 60% / cover no-repeat}
.bk__title{font-size:clamp(40px,1rem + 3.4vw,68px)}
.bk__points{margin:40px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:18px}
.bk__points li{display:flex;align-items:center;gap:16px;max-width:460px;font-size:clamp(16px,1.2vw,19px);font-weight:500;line-height:1.4;color:#FFFFFF}
.bk__ic{width:48px;height:48px;flex-shrink:0;border-radius:14px;display:grid;place-items:center;color:#FFFFFF;
  background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.bk__ic svg{width:24px;height:24px;display:block}
@media (max-width:900px){
  .bk__points{margin-top:28px;gap:14px}
  .bk__ic{width:42px;height:42px;border-radius:12px}
  .bk__ic svg{width:21px;height:21px}
}

/* ═══ THE MACHINE: differentiators, use cases, and what it does not do ═══════
   Drafted 2026-09-17 from the material the product team sent: the EXTERNAL
   demo deck (the three key differentiators, stated twice in it) and the Machine
   Use Case Library. The "works with" strip is the playbook's own
   does-NOT-do table, turned the right way round — it is honest positioning,
   not a disclaimer, so it reads as a list of what it connects to.
   Nothing here names a client, a price or a roadmap date. ─────────────────── */
.pp-diff{padding:clamp(72px,9vw,120px) 0 0}
.pp-diff__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px);margin-top:clamp(36px,4vw,52px)}
.pp-diff__item{border-top:3px solid var(--teal);padding-top:22px}
.pp-diff__item:nth-child(2){border-top-color:var(--orange)}
.pp-diff__item:nth-child(3){border-top-color:var(--amber)}
.pp-diff__n{display:block;font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--ink-3);margin-bottom:10px}
.pp-diff__item h3{margin:0 0 10px;font-family:var(--display);font-size:clamp(19px,1.5vw,23px);font-weight:600;line-height:1.25;color:var(--ink)}
.pp-diff__item p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)}

/* the use-case library: five groups, each a headed list. Two columns of groups
   on a desk, one on a phone — the group stays with its items either way. */
.pp-uses{padding:clamp(80px,10vw,128px) 0;background:#F5F7F8}
/* five groups of uneven length: CSS columns balance them, a grid leaves the
   fifth group stranded under a half-empty column */
.pp-uses__grid{columns:2;column-gap:clamp(40px,5vw,80px);margin-top:clamp(40px,5vw,60px)}
.pp-uses__group{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 clamp(32px,4vw,52px)}
.pp-uses__group > h3{margin:0 0 6px;font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--teal);padding-bottom:14px;border-bottom:1px solid var(--line)}
.pp-uses__list{margin:0;padding:0;list-style:none}
.pp-uses__list li{padding:16px 0;border-bottom:1px solid var(--line)}
.pp-uses__list h4{margin:0;font-family:var(--display);font-size:17px;font-weight:600;line-height:1.3;color:var(--ink)}
.pp-uses__list p{margin:5px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}

/* what it connects to rather than replaces */
.pp-with{padding:clamp(72px,9vw,120px) 0}
.pp-with__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(40px,5vw,72px);margin-top:clamp(32px,4vw,48px)}
.pp-with__grid li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:0 14px;padding:18px 0;border-top:1px solid var(--line);list-style:none}
.pp-with__grid{padding:0;margin-top:clamp(32px,4vw,48px)}
.pp-with__ic{width:20px;height:20px;margin-top:3px;color:var(--teal);flex:none}
.pp-with__grid b{display:block;font-family:var(--display);font-size:16.5px;font-weight:600;line-height:1.3;color:var(--ink)}
.pp-with__grid span{display:block;margin-top:4px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}

@media (max-width:820px){
  .pp-diff__grid,.pp-with__grid{grid-template-columns:minmax(0,1fr)}
  .pp-uses__grid{columns:1}
}