/* Hallmark · macrostructure: Index Map · tone: utilitarian-editorial · anchor hue: ink + gold
   Humantic AI · Product overview (/products), Website V2. Rebuilt Oct 19, tightened Oct 20 (AK: "I don't like it at all").
   Idea: the framework as one index board. Two rows, eight cells: the 4 intelligence types with the product behind each,
   then the 4 products that work with every one. Every cell shows a tiny real UI of what that product returns (an org
   tree, DISC badges, a visitor chip, intent meters, an email draft, Mon/Wed/Fri pills, a live stream, a verified
   contact) instead of a text block. Then a compact ink board for where it runs (3 surfaces + Kairos).
   Locked palette only; lavender only for small chips; no cream. Desktop density ~80% zoom: h2 36px at 1280+.
   Oct 20 (Krish's Paint sketch, O20-052/053): the board became a U. Two tall tiles each side (Miia, Pi | Vidar, Iriis), the
   four that work with every type as a 2x2 in the middle, the title in the open top of the U; the testimonial band moved
   under it and "where it runs" went light so two dark blocks never touch. Backup: 04-build/backups/oct20-w1-products-usecases/ */

html:has(body.pd) { overflow-x: clip; }
.pd {
  --gold: #FFC61E; --gold3: #FFE8A5; --ink: #110A33; --violet: #341D99; --lav: #DDD6FF; --mist: #F6F4FF; --slate: #5B6478; --white: #fff;
  --rule: rgba(17,10,51,.1); --rule-ink: rgba(221,214,255,.16);
  --disp: "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --sh-sm: 0 2px 8px rgba(17,10,51,.08); --sh-md: 0 12px 32px -12px rgba(17,10,51,.22);
  --pad: clamp(40px, 4.4vw, 56px);
  margin: 0; overflow-x: clip; background: var(--white); color: var(--ink); font-family: Manrope, Arial, sans-serif;
}
.pd *, .pd *::before, .pd *::after { box-sizing: border-box; }
:where(.pd main) :is(h1, h2, h3, h4) { margin: 0; text-wrap: balance; }
:where(.pd main) p { margin: 0; text-wrap: pretty; }
:where(.pd main) :is(ul, ol, figure) { margin: 0; padding: 0; list-style: none; }
.pd-shell { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.pd main a:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 12px; }
.pd .hx-btn:active { transform: scale(.97); }

.pd-head { max-width: 960px; margin: 0 auto 24px; text-align: center; }
.pd-head h2 { font: 700 clamp(28px, 2.2vw + 12px, 36px)/1.12 var(--disp); letter-spacing: -.02em; }
.pd-head p { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--slate); }
.pd-head p a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }

/* ---------- The map: the U (Oct 20) ---------- */
.pd-map { padding: clamp(48px, 5vw, 72px) 0 clamp(56px, 6vw, 80px); background: var(--mist); } /* Oct 20 (AK E6): more breathing room, spacing only */
.pd-shell--u { max-width: 1200px; }
/* 4 equal columns, 6 rows: tall tiles span 3 rows, small tiles 2, the title the top 2 of the two middle columns */
.pd-u { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 24px; }
.pd-u__list { display: contents; }
.pd-u__head { grid-column: 2 / 4; grid-row: 1 / 3; align-self: center; text-align: center; padding: 0 24px; }
.pd-u__head h2 { font: 700 clamp(28px, 2.2vw + 12px, 36px)/1.12 var(--disp); letter-spacing: -.02em; }
.pd-u__head p { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--slate); }
.pd-u__head p a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
.pd-t--agent-miia { grid-column: 1; grid-row: 1 / 4; }
.pd-t--agent-pi { grid-column: 1; grid-row: 4 / 7; }
.pd-t--vidar { grid-column: 4; grid-row: 1 / 4; }
.pd-t--intent { grid-column: 4; grid-row: 4 / 7; }
.pd-t--humanmail { grid-column: 2; grid-row: 3 / 5; }
.pd-t--signals { grid-column: 3; grid-row: 3 / 5; }
.pd-t--streams { grid-column: 2; grid-row: 5 / 7; }
.pd-t--enrichments { grid-column: 3; grid-row: 5 / 7; }
.pd-t { scroll-margin-top: 112px; min-width: 0; }
.pd-t a { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 16px; border-radius: 24px; background: var(--white); border: 1px solid var(--lav); box-shadow: var(--sh-sm); color: var(--ink); text-decoration: none; transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .pd-t a:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--ink); }
  .pd-t a:hover h4 svg { transform: translateX(3px); }
}
.pd-t a:active { transform: scale(.98); }
.pd .pd-t a:focus-visible { border-radius: 24px; outline-offset: 2px; }
.pd-cell__t { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 6px 4px; }
.pd-chip { display: inline-flex; padding: 2px 10px; border-radius: 999px; background: var(--lav); color: var(--ink); font: 700 12px/1.5 Manrope, Arial, sans-serif; }
.pd-cell__t h4 { display: flex; align-items: center; gap: 6px; font: 700 18px/1.15 var(--disp); letter-spacing: -.02em; }
.pd-cell__t h4 svg { flex: none; transition: transform .2s var(--ease); }
.pd-cell__t p { font-size: 14px; line-height: 1.4; color: var(--slate); }
/* tall tiles: the product with the most emphasis; the mini UI takes the spare height and runs a size larger */
.pd-t--big .pd-ui { flex: 1; min-height: 96px; }
.pd-t--big .pd-cell__t h4 { font-size: 24px; }
.pd-t--big .pd-cell__t p { font-size: 15px; }
.pd-t--big a { padding: 20px; gap: 16px; }

/* The tiny real UI in each cell */
.pd-ui { display: grid; place-items: center; height: 64px; padding: 8px 16px; border-radius: 12px; background: var(--mist); overflow: hidden; font-size: 12px; line-height: 1.3; }
.pd-t a:hover .pd-ui { background: var(--white); box-shadow: inset 0 0 0 1px var(--lav); }
/* the larger mini UIs in the tall tiles */
@media (min-width: 1200px) {
  .pd-t--big .pd-ui { font-size: 13px; }
  .pd-t--big .pd-ui > svg { max-width: 300px; }
  .pd-t--big .pd-disc { gap: 8px; }
  .pd-t--big .pd-disc b { width: 46px; height: 46px; font-size: 19px; }
  .pd-t--big .pd-vis { max-width: 280px; padding: 10px 14px 10px 10px; gap: 12px; font-size: 14px; }
  .pd-t--big .pd-vis__av { width: 40px; height: 40px; }
  .pd-t--big .pd-int { max-width: 270px; gap: 10px; font-size: 14px; }
  .pd-t--big .pd-int > span { grid-template-columns: 76px 1fr; }
  .pd-t--big .pd-meter s { height: 8px; }
}
.pd-ui > svg { display: block; width: 100%; max-width: 200px; height: 100%; }
.pd-ui i, .pd-ui em { font-style: normal; }
.pd-ui u { text-decoration: none; }
.pd-ui b { font-weight: 700; }
.pd-live { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); }
.pd-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(255,198,30,0); }
@keyframes pd-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,198,30,.6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(255,198,30,0); } }
/* Agent Pi: DISC badges, D lit */
.pd-disc { display: flex; gap: 8px; }
.pd-disc b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--lav); font: 700 15px/1 var(--disp); }
.pd-disc b.on { background: var(--gold); }
/* Vidar: the visitor chip */
.pd-vis { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 220px; padding: 6px 10px 6px 6px; border-radius: 999px; background: var(--white); box-shadow: var(--sh-sm); }
.pd-vis__av { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--lav); }
.pd-vis > span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pd-vis b, .pd-vis em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-vis em { color: var(--slate); }
/* Iriis: three intent meters */
.pd-int { display: grid; gap: 4px; width: 100%; max-width: 200px; }
.pd-int > span { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 8px; }
.pd-int i { color: var(--slate); font-weight: 600; }
.pd-meter { display: flex; gap: 3px; }
.pd-meter s { flex: 1; height: 6px; border-radius: 3px; background: var(--lav); text-decoration: none; }
.pd-meter s.on { background: var(--ink); }
/* Agent Emi: a draft, with the DISC type it is written for */
.pd-mail { display: grid; gap: 6px; width: 100%; max-width: 210px; padding: 8px 10px; border-radius: 10px; background: var(--white); box-shadow: var(--sh-sm); }
.pd-mail > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pd-mail u { padding: 1px 8px; border-radius: 999px; background: var(--lav); font-weight: 700; white-space: nowrap; }
.pd-mail i { display: block; height: 5px; border-radius: 3px; background: var(--lav); }
.pd-mail i + i { width: 62%; }
/* Signals: refresh days */
.pd-days { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pd-days b { padding: 3px 10px; border-radius: 999px; background: var(--lav); }
.pd-days b.on { background: var(--gold); }
.pd-days em { width: 100%; text-align: center; color: var(--slate); font-weight: 600; }
/* Streams: one live lane */
.pd-strm { display: grid; gap: 6px; width: 100%; max-width: 190px; }
.pd-strm > span { display: flex; align-items: center; gap: 8px; }
.pd-strm i { flex: 1; height: 6px; border-radius: 3px; background: var(--lav); }
.pd-strm > span:nth-child(2) i { max-width: 80%; background: var(--ink); opacity: .85; }
.pd-strm > span:nth-child(3) i { max-width: 55%; }
.pd-strm > span:not(:first-child) { padding-inline-start: 56px; }
/* Enrichments: a verified contact */
.pd-ct { display: grid; gap: 5px; width: 100%; max-width: 210px; padding: 6px 10px; border-radius: 10px; background: var(--white); box-shadow: var(--sh-sm); }
.pd-ct > span { display: flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.pd-ct i { width: 38px; color: var(--slate); font-weight: 600; }
.pd-ct svg { margin-inline-start: auto; flex: none; color: var(--ink); }

/* ---------- Where it runs (compact board; light since Oct 20 so it never sits on the dark testimonial band) ---------- */
.pd-where { padding: var(--pad) 0; background: var(--mist); color: var(--ink); }
.pd-where a:focus-visible { outline-color: var(--violet); }
.pd-surf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pd-surf__col { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: 24px; background: var(--white); border: 1px solid var(--lav); box-shadow: var(--sh-sm); scroll-margin-top: 112px; }
.pd-surf__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pd .pd-surf__col h3 { font: 700 24px/1.1 var(--disp); letter-spacing: -.02em; color: var(--ink); }
.pd-surf__col > p { font-size: 15px; line-height: 1.5; color: var(--ink); }
.pd-marks { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.pd-marks li { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--lav); }
.pd-marks img, .pd-marks svg { display: block; width: 20px; height: 20px; }
.pd-code code { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 10px; background: var(--lav); font: 600 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); }
.pd-surf__cap { font-size: 14px; line-height: 1.45; color: var(--slate); }
.pd-surf__go { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 40px; margin-top: auto; font: 700 15px/1 var(--disp); color: var(--ink); text-decoration: none; }
.pd-surf__go svg { transition: transform .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .pd-surf__go:hover { text-decoration: underline; text-underline-offset: 4px; } .pd-surf__go:hover svg { transform: translateX(3px); } }

.pd-kairos {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; margin-top: 12px; padding: 12px 24px;
  border-radius: 999px; background: var(--gold); color: var(--ink); text-decoration: none; scroll-margin-top: 112px;
  transition: background-color .2s var(--ease);
}
.pd-kairos__name { display: inline-flex; align-items: center; gap: 8px; font: 700 20px/1 var(--disp); }
.pd-kairos__name img { display: block; padding: 3px; border-radius: 50%; background: var(--ink); }
.pd-kairos__line { font-size: 15px; line-height: 1.4; font-weight: 600; }
.pd-kairos__go { display: inline-flex; align-items: center; gap: 6px; font: 700 15px/1 var(--disp); white-space: nowrap; }
.pd-kairos__go svg { transition: transform .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .pd-kairos:hover { background: var(--gold3); } .pd-kairos:hover .pd-kairos__go svg { transform: translateX(3px); } }
.pd-kairos:active { transform: scale(.99); }
.pd-where__foot { margin-top: 16px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--slate); scroll-margin-top: 112px; }
.pd-where__foot a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }

/* ---------- Shared blocks on this page: same density as the page ---------- */
@media (min-width: 1024px) {
  .pd .hxb { padding: 72px 24px; }
  .pd .hxb.hxb .hxb-h2 { font-size: 36px; }
}

/* ---------- Responsive ---------- */
/* below 1100 the U no longer fits: title, then the 4 types (2 x 2), then the 4 more (2 x 2) */
@media (max-width: 1099px) {
  .pd-u { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .pd-u__head { grid-column: 1 / -1; grid-row: auto; margin-bottom: 8px; }
  .pd-t--agent-miia, .pd-t--agent-pi, .pd-t--vidar, .pd-t--intent,
  .pd-t--humanmail, .pd-t--signals, .pd-t--streams, .pd-t--enrichments { grid-column: auto; grid-row: auto; }
  .pd-t--big .pd-ui { flex: none; height: 96px; }
  .pd-t--big .pd-cell__t h4 { font-size: 22px; }
  .pd-surf { gap: 10px; }
  .pd-kairos { grid-template-columns: minmax(0, 1fr); gap: 6px; border-radius: 24px; padding: 16px 20px; }
}
@media (max-width: 767px) {
  .pd-surf { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .pd-shell { padding: 0 16px; }
  .pd-u { gap: 16px 10px; }
  .pd-t a, .pd-t--big a { padding: 8px; gap: 8px; }
  .pd-cell__t h4, .pd-t--big .pd-cell__t h4 { font-size: 18px; }
  .pd-cell__t p, .pd-t--big .pd-cell__t p { font-size: 13px; }
  .pd-ui { padding: 6px 8px; }
  .pd-disc { gap: 4px; } .pd-disc b { width: 28px; height: 28px; font-size: 13px; }
  .pd-t--big .pd-disc { gap: 4px; } .pd-t--big .pd-disc b { width: 30px; height: 30px; font-size: 14px; }
  .pd-vis .pd-live { display: none; }
  .pd-mail > span { flex-wrap: wrap; gap: 2px 6px; } .pd-mail i + i { display: none; } .pd-mail { gap: 4px; padding: 6px 8px; }
  .pd-days { gap: 4px; } .pd-days b { padding: 2px 8px; }
  .pd-strm > span:not(:first-child) { padding-inline-start: 40px; }
  .pd-ct i, .pd-ct svg { display: none; }
  .pd-chip { border-radius: 12px; padding: 2px 8px; }
  .pd-surf__col { padding: 16px; }
}
@media (max-width: 359px) {
  .pd-u { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .pd *, .pd *::before, .pd *::after { transition-duration: .01ms !important; animation: none !important; }
}

/* Phones: inline links get a 44px tap area without moving the text */
@media (max-width: 767px) {
  .pd .pd-head a, .pd .pd-where__foot a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}

/* Oct 20 motion pass (AK: never move everything at once). The mini UIs rest finished and still. products.js plays them ONE tile at a time, from the
   left (Agent Miia, Agent Pi, Agent Emi, Signals, Streams, Enrichments, Vidar, Iriis): the tile in turn gets .pd-go for 1 s, its own parts build
   in order from its first part to its last, and everything else stands still. Same easing as the page, transform and opacity only.
   Reduced motion: nothing plays (the rule above). */
.pd-t.pd-go .pd-ui svg > g:first-child, .pd-t.pd-go .pd-ui svg > rect, .pd-t.pd-go .pd-ui svg > g:last-child,
.pd-t.pd-go .pd-disc b, .pd-t.pd-go .pd-mail > *, .pd-t.pd-go .pd-days > *, .pd-t.pd-go .pd-strm i, .pd-t.pd-go .pd-vis,
.pd-t.pd-go .pd-ct > span, .pd-t.pd-go .pd-meter s.on { animation-duration: .38s; animation-timing-function: cubic-bezier(.25, 1, .5, 1); animation-fill-mode: backwards; }
.pd-t.pd-go .pd-ui svg { overflow: visible; }
.pd-t.pd-go .pd-ui svg rect, .pd-t.pd-go .pd-ui svg g { transform-box: fill-box; transform-origin: center; }
/* Agent Miia: the root, its lines, then the three branches left to right, then their labels */
.pd-t.pd-go .pd-ui svg > rect:nth-of-type(1) { animation-name: pd-pop; }
.pd-t.pd-go .pd-ui svg > g:first-child { animation-name: pd-fade; animation-delay: .22s; }
.pd-t.pd-go .pd-ui svg > rect:nth-of-type(n+2) { animation-name: pd-rise; }
.pd-t.pd-go .pd-ui svg > rect:nth-of-type(2) { animation-delay: .36s; }
.pd-t.pd-go .pd-ui svg > rect:nth-of-type(3) { animation-delay: .46s; }
.pd-t.pd-go .pd-ui svg > rect:nth-of-type(4) { animation-delay: .56s; }
.pd-t.pd-go .pd-ui svg > g:last-child { animation-name: pd-fade; animation-delay: .62s; }
/* Agent Pi: D, I, S, C land one after another */
.pd-t.pd-go .pd-disc b { animation-name: pd-pop; }
.pd-t.pd-go .pd-disc b:nth-child(2) { animation-delay: .14s; }
.pd-t.pd-go .pd-disc b:nth-child(3) { animation-delay: .28s; }
.pd-t.pd-go .pd-disc b:nth-child(4) { animation-delay: .42s; }
/* Agent Emi: the subject and its DISC chip, then the two lines write in */
.pd-t.pd-go .pd-mail > span { animation-name: pd-rise; }
.pd-t.pd-go .pd-mail i { animation-name: pd-grow; transform-origin: left center; }
.pd-t.pd-go .pd-mail i:nth-of-type(1) { animation-delay: .25s; }
.pd-t.pd-go .pd-mail i:nth-of-type(2) { animation-delay: .45s; }
/* Signals: Mon, Wed, Fri, then what they carry */
.pd-t.pd-go .pd-days b { animation-name: pd-pop; }
.pd-t.pd-go .pd-days b:nth-child(2) { animation-delay: .16s; }
.pd-t.pd-go .pd-days b:nth-child(3) { animation-delay: .32s; }
.pd-t.pd-go .pd-days em { animation: pd-fade .3s ease-out .5s backwards; }
/* Streams: the live dot beats once, then the three lanes run out one after another */
.pd-t.pd-go .pd-strm i { animation-name: pd-grow; transform-origin: left center; }
.pd-t.pd-go .pd-strm > span:nth-child(1) i { animation-delay: .12s; }
.pd-t.pd-go .pd-strm > span:nth-child(2) i { animation-delay: .32s; }
.pd-t.pd-go .pd-strm > span:nth-child(3) i { animation-delay: .52s; }
.pd-t.pd-go .pd-live::before { animation: pd-pulse .9s var(--ease) .1s 1; }
/* Enrichments: email, then phone; each tick draws in */
.pd-t.pd-go .pd-ct > span { animation-name: pd-rise; }
.pd-t.pd-go .pd-ct > span:nth-child(2) { animation-delay: .22s; }
.pd-t.pd-go .pd-ct svg path { stroke-dasharray: 20; animation: pd-draw .3s ease-out .3s backwards; }
.pd-t.pd-go .pd-ct > span:nth-child(2) svg path { animation-delay: .52s; }
/* Vidar: the visitor chip arrives, then Live beats */
.pd-t.pd-go .pd-vis { animation-name: pd-slide; }
.pd-t.pd-go .pd-vis .pd-live::before { animation-delay: .4s; }
/* Iriis: Active, Research, Market fill their meters in turn */
.pd-int > span:nth-child(2) { --r: 1; } .pd-int > span:nth-child(3) { --r: 2; }
.pd-meter s:nth-child(2) { --m: 1; } .pd-meter s:nth-child(3) { --m: 2; }
.pd-t.pd-go .pd-meter s.on { animation-name: pd-grow; transform-origin: left center; animation-delay: calc(var(--r, 0) * 240ms + var(--m, 0) * 80ms); }
@keyframes pd-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes pd-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes pd-fade { from { opacity: 0; } }
@keyframes pd-grow { from { transform: scaleX(0); } }
@keyframes pd-slide { from { opacity: 0; transform: translateX(14px); } }
@keyframes pd-draw { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }

/* ---------- Surfaces (AK, Oct 23): Web (primary, most room) beside MCP and API ----------
   Web shows the Intelligence core flowing out to its surfaces (web app, extensions, Outlook, AI assistants) and on into the
   CRM and sales engagement tools. MCP and API: what teams build with them, then the docs domain as the link. */
.pd-sx__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 12px; }
.pd-sx__web, .pd-sx__build { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--lav); border-radius: 24px; background: var(--white); box-shadow: var(--sh-sm); scroll-margin-top: 112px; }
.pd-sx__web { grid-row: 1 / span 2; border: 2px solid var(--gold); }
.pd-sx__top { display: flex; flex-direction: column; gap: 6px; }
.pd-sx__tag { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--lav); font: 800 12px/16px Manrope, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--violet); }
.pd-sx__web .pd-sx__tag { background: var(--gold); color: var(--ink); }
.pd .pd-sx__top h3 { font: 700 28px/1.1 var(--disp); letter-spacing: -.02em; }
.pd-sx__top p { font-size: 15px; line-height: 1.5; color: var(--slate); }
/* the Intelligence core, with a line down into the surfaces */
.pd-sx__core { position: relative; display: inline-flex; align-items: center; gap: 8px; align-self: center; padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--ink); color: var(--gold); font: 700 15px/1 var(--disp); }
.pd-sx__core img { padding: 3px; border-radius: 50%; background: var(--gold); }
.pd-sx__core::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 16px; background: linear-gradient(var(--ink), var(--lav)); }
.pd-sx__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pd-sx__groups li, .pd-sx__flows { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--mist); }
.pd-sx__gname { font: 700 15px/1.2 var(--disp); color: var(--ink); }
.pd-sx__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pd-sx__logos > img, .pd-sx__app img { display: block; width: 36px; height: 36px; padding: 7px; border-radius: 10px; background: var(--white); box-shadow: inset 0 0 0 1px var(--lav); object-fit: contain; }
.pd-sx__app { display: inline-flex; align-items: center; gap: 8px; }
.pd-sx__app code, .pd-sx__go code { font: 600 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); }
.pd-sx__flows { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; border: 1px dashed var(--violet); background: var(--white); }
.pd-sx__flows .pd-sx__gname::before { content: "\2193"; margin-right: 8px; color: var(--violet); }
.pd-sx__uses { display: flex; flex-direction: column; gap: 10px; }
.pd-sx__uses li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; line-height: 1.35; }
.pd-sx__uses svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--gold); color: var(--ink); }
.pd-sx__go { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 40px; margin-top: auto; font: 700 15px/1 var(--disp); color: var(--ink); text-decoration: none; }
.pd-sx__go svg { transition: transform .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .pd-sx__go:hover { text-decoration: underline; text-underline-offset: 4px; } .pd-sx__go:hover svg { transform: translateX(3px); } }
.pd-sx .pd-kairos { margin-top: 16px; }
@media (max-width: 900px) {
  .pd-sx__grid { grid-template-columns: minmax(0, 1fr); }
  .pd-sx__web { grid-row: auto; }
}
@media (max-width: 599px) {
  .pd-sx__web, .pd-sx__build { padding: 18px; gap: 14px; }
  .pd .pd-sx__top h3 { font-size: 24px; }
  .pd-sx__groups { gap: 6px; }
  .pd-sx__groups li, .pd-sx__flows { padding: 12px; gap: 8px; }
  .pd-sx__logos > img, .pd-sx__app img { width: 32px; height: 32px; padding: 6px; }
}
/* logo with its name under it, so every mark is named */
.pd-sx__lg { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 52px; }
.pd-sx__lg small { font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--slate); text-align: center; }
.pd-sx__lg img { display: block; width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1px var(--lav); object-fit: contain; }
.pd-sx__groups .pd-sx__logos, .pd-sx__flows .pd-sx__logos { gap: 10px 12px; align-items: flex-start; }
.pd-sx__groups li { padding: 16px 18px; }
.pd-sx__flows { padding: 16px 18px; }
@media (max-width: 599px) { .pd-sx__lg { min-width: 46px; } .pd-sx__lg img { width: 34px; height: 34px; padding: 6px; } }
@media (max-width: 599px) { .pd-sx__app { flex-direction: column; align-items: flex-start; gap: 6px; } .pd-sx__app code { font-size: 12px; } }

/* ---------- Hero (AK, Oct 23): room under the nav like the other pages (the video sat 14px under it), and the customer
   logos inside the hero on its own background instead of a separate mist band ---------- */
.pd .pf-hero { padding-top: 136px; padding-bottom: 40px; }
.pd .pf-hero .hxp--plain { margin: 48px auto 0; padding: 0 40px; }
@media (max-width: 1023px) { .pd .pf-hero { padding-top: 120px; } .pd .pf-hero .hxp--plain { padding: 0 24px; margin-top: 40px; } }
@media (max-width: 599px) { .pd .pf-hero { padding-top: 100px; padding-bottom: 24px; } .pd .pf-hero .hxp--plain { padding: 0 16px; margin-top: 32px; } }
/* logos that open their install or connect page (AK Oct 23): lift and a violet ring on hover or focus, the name underlines */
.pd-sx__lg.is-link, .pd-sx__app.is-link { text-decoration: none; color: inherit; border-radius: 12px; }
.pd-sx__lg.is-link img, .pd-sx__app.is-link img { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.pd-sx__lg.is-link:hover img, .pd-sx__lg.is-link:focus-visible img, .pd-sx__app.is-link:hover img, .pd-sx__app.is-link:focus-visible img { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--violet), 0 6px 14px rgba(17,10,51,.12); }
.pd-sx__lg.is-link:hover small, .pd-sx__lg.is-link:focus-visible small, .pd-sx__app.is-link:hover code { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pd-sx__lg.is-link:focus-visible, .pd-sx__app.is-link:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

/* ---------- What each module does (AK, Oct 23): the /use-cases list pattern (use-cases.css .ucl) for the 8 modules ----------
   Team filter on top; desktop: modules left, the open one right; phones: an accordion. products.js adds .is-js. */
.pd-cx { padding: var(--pad) 0; background: var(--white); }
.pd-cx__filter { display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 24px auto 0; padding: 4px; overflow-x: auto; border-radius: 999px; background: var(--mist); border: 1px solid var(--lav); scrollbar-width: none; }
.pd-cx__filter button { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--slate); font: 700 14px/1 Manrope, Arial, sans-serif; white-space: nowrap; cursor: pointer; touch-action: manipulation; transition: background-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out; }
.pd-cx__filter button.is-on { background: var(--white); color: var(--ink); box-shadow: var(--sh-sm); }
@media (hover: hover) and (pointer: fine) { .pd-cx__filter button:not(.is-on):hover { color: var(--ink); } }
.pd-cx__list { max-width: 1040px; margin: 32px auto 0; }
.pd-cx__tab { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 16px 8px 10px; border: 0; border-radius: 16px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; transition: background-color .15s ease-out, box-shadow .15s ease-out; }
.pd-cx__tab img { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--white); object-fit: contain; }
.pd-cx__tab b { flex: 1; min-width: 0; font: 700 17px/1.2 var(--disp); }
.pd-cx__tab > span { font-size: 12px; font-weight: 700; color: var(--slate); white-space: nowrap; }
.pd-cx__chev { flex: none; opacity: 0; transition: opacity .15s ease-out, transform .2s var(--ease); }
.pd-cx__tab[aria-expanded="true"] { background: var(--mist); box-shadow: inset 0 0 0 1px var(--lav); }
.pd-cx__tab[aria-expanded="true"] .pd-cx__chev { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .pd-cx__tab:not([aria-expanded="true"]):hover { background: var(--mist); } }
.pd-cx__tab:focus-visible, .pd-cx__filter button:focus-visible, .pd-cx__go:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.pd-cx__tab[hidden], .pd-cx__panel[hidden] { display: none; }
.pd-cx__panel { padding: 32px; border-radius: 24px; background: var(--mist); border: 1px solid var(--lav); }
.pd-cx__ph { display: flex; align-items: center; gap: 14px; }
.pd-cx__ph img { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--white); object-fit: contain; }
.pd .pd-cx__ph h3 { font: 700 30px/1.1 var(--disp); letter-spacing: -.02em; }
.pd-cx__type { margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--violet); }
.pd-cx__job { margin-top: 16px; font-size: 18px; line-height: 1.45; font-weight: 600; }
.pd-cx__k { margin-top: 24px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.pd-cx__does { display: flex; flex-direction: column; gap: 10px; margin-top: 12px !important; }
.pd-cx__does li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; }
.pd-cx__does svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--gold); color: var(--ink); }
.pd-cx__uses { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; margin-top: 8px !important; }
.pd-cx__uses li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; padding: 10px 0; border-top: 1px solid var(--lav); }
.pd-cx__uses li:last-child { border-bottom: 1px solid var(--lav); }
.pd-cx__team { justify-self: start; display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--lav); font-size: 13px; font-weight: 800; white-space: nowrap; }
.pd-cx__uses li > span:last-child { font-size: 15px; line-height: 1.45; }
.pd-cx__go { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 16px; font: 700 16px/1 var(--disp); color: var(--ink); text-decoration: none; }
.pd-cx__go svg { transition: transform .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .pd-cx__go:hover { text-decoration: underline; text-underline-offset: 4px; } .pd-cx__go:hover svg { transform: translateX(3px); } }
@media (min-width: 900px) {
  .pd-cx__list.is-js { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); grid-template-rows: repeat(8, auto) 1fr; column-gap: 24px; }
  .pd-cx__list.is-js .pd-cx__tab { grid-column: 1; margin-bottom: 2px; }
  .pd-cx__list.is-js .pd-cx__panel { grid-column: 2; grid-row: 1 / -1; align-self: start; }
}
.pd-cx__list:not(.is-js) .pd-cx__tab { pointer-events: none; margin-top: 16px; }
.pd-cx__list:not(.is-js) .pd-cx__chev { display: none; }
@media (max-width: 899px) {
  .pd-cx__tab { min-height: 58px; }
  .pd-cx__chev { opacity: .6; transform: rotate(90deg); }
  .pd-cx__tab[aria-expanded="true"] { border-radius: 16px 16px 0 0; }
  .pd-cx__tab[aria-expanded="true"] .pd-cx__chev { transform: rotate(-90deg); }
  .pd-cx__list.is-js .pd-cx__tab { margin-bottom: 4px; }
  .pd-cx__list.is-js .pd-cx__tab[aria-expanded="true"] { margin-bottom: 0; }
  .pd-cx__list.is-js .pd-cx__panel { margin-bottom: 8px; padding: 4px 16px 16px; border-top: 0; border-radius: 0 0 16px 16px; }
  .pd-cx__list.is-js .pd-cx__ph { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pd-cx__job { margin-top: 8px; font-size: 16px; }
  .pd-cx__filter { margin-left: 0; margin-right: 0; width: auto; }
}
@media (max-width: 599px) {
  .pd-cx__tab > span { display: none; }
  .pd-cx__uses { display: block; }
  .pd-cx__uses li { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .pd-cx__does li, .pd-cx__uses li > span:last-child { font-size: 14px; }
}
.pd-cx__tab b { white-space: nowrap; }
.pd-cx__list { max-width: 1120px; }
/* Kairos callout under the pipeline (AK Oct 23), on the pipeline's white band */
.pd-kx { padding: 0 0 var(--pad); background: var(--white); }
.pd-kx .pd-kairos { margin-top: 0; }

/* ---------- Oct 27 restore on top of Amar's /product (his H1 and section text stay) ----------
   1. Hero: our subline under Amar's H1 (ink, Cabinet), Amar's own line under it as the quieter slate note; the hero video is the
      product video. Tighter top padding and logo gap so the hero (logos included) ends inside 1280x633.
   2. "A Day in a Seller's Life" (mist): a calendar day view, time column + one white event bar per moment + the product chip(s).
   3. "Built Beyond a General LLM" (mist band, one ink frame): four cells with hairlines, the two published accuracy bars, two links.
   4. AK Oct 27 fixes: explorer rows stack the name over its type (no overlap at any width); the pipeline's module pills keep one
      height (one line on wide screens); band rhythm: white and mist alternate so no two same-colour bands double their padding. */
.pd .pf-hero { padding-bottom: 28px; } /* the top padding is the site-wide hero rule in shell.css */
.pd .pf-hero .hxp--plain { margin-top: 32px; }
.pd .pf-hero__l { gap: 16px; }
.pd .pf-hero h1 { font-size: clamp(36px, 3.6vw + 4px, 54px); }
.pd .pf-hero__sub { margin: 0; max-width: 30ch; font: 700 clamp(19px, .8vw + 11px, 23px)/1.3 var(--disp); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.pd .pf-hero .pf-zing { max-width: 31rem; margin-top: -4px; font-size: 17px; line-height: 1.5; font-weight: 500; color: var(--slate); }
.pd .pf-hero .pf-ctas { margin-top: 4px; }
.pd .pf-vid figcaption { margin-top: 10px; }
@media (min-width: 1024px) and (max-height: 700px) { .pd .pf-hero .hxp--plain { margin-top: 24px; } }
@media (max-width: 1023px) { .pd .pf-hero .hxp--plain { margin-top: 32px; } .pd .pf-hero__sub { max-width: 34ch; } }
@media (max-width: 599px) { .pd .pf-hero { padding-bottom: 24px; } .pd .pf-hero .hxp--plain { margin-top: 24px; } .pd .pf-vid figcaption { justify-content: center; } .pd .pf-hero__sub { font-size: 19px; margin-inline: auto; } .pd .pf-hero .pf-zing { font-size: 16px; margin-inline: auto; } }

/* 2. A Day in a Seller's Life */
.pd-day { padding: var(--pad) 0; background: var(--mist); color: var(--ink); }
.pd-day__cal { display: grid; max-width: 960px; margin: 0 auto; padding: 0; list-style: none; }
.pd-day__row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; padding: 6px 0; border-top: 1px solid var(--lav); }
.pd-day__row:first-child { border-top-color: transparent; }
.pd .pd-day__t { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-variant-numeric: tabular-nums; }
.pd-day__t b { font: 700 20px/1 var(--disp); letter-spacing: -.01em; }
.pd-day__t span { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--slate); }
.pd-day__ev { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; min-height: 64px; padding: 12px 16px; border-radius: 16px; background: var(--white); box-shadow: var(--sh-sm); transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.pd-day__ev p { flex: 1 1 auto; font-size: 16px; line-height: 1.45; font-weight: 600; }
.pd-day__by { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.pd-day__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px 4px 6px; border-radius: 999px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--lav); font: 700 15px/1 var(--disp); color: var(--ink); text-decoration: none; white-space: nowrap; scroll-margin-top: 136px; transition: background-color .2s var(--ease), box-shadow .2s var(--ease), transform .16s var(--ease); }
.pd-day__chip img { display: block; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--white); object-fit: contain; }
.pd-day__chip svg { flex: none; transition: transform .2s var(--ease); }
.pd-day__chip:active { transform: scale(.97); }
.pd .pd-day__chip:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 999px; }
@media (hover: hover) and (pointer: fine) {
  .pd-day__ev:hover { box-shadow: var(--sh-md); transform: translateY(-1px); }
  .pd-day__chip:hover { background: var(--gold3); box-shadow: inset 0 0 0 1px var(--gold); }
  .pd-day__chip:hover svg { transform: translateX(3px); }
}
@media (max-width: 899px) {
  .pd-day__ev { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pd-day__by { justify-content: flex-start; }
}
@media (max-width: 599px) {
  .pd-day__row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 8px 0 2px; }
  .pd .pd-day__t { flex-direction: row; align-items: baseline; gap: 6px; }
  .pd-day__t b { font-size: 18px; }
  .pd-day__ev { padding: 12px; }
  .pd-day__ev p { font-size: 15px; }
  .pd-day__by { gap: 6px; }
  .pd-day__chip { gap: 6px; padding: 4px 10px 4px 4px; font-size: 14px; }
}
@media (max-width: 359px) { .pd-day__chip { white-space: normal; font-size: 14px; line-height: 1.2; } }
.pd-roi { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; max-width: 960px; margin: 24px auto 0; font-size: 16px; line-height: 1.5; color: var(--slate); text-align: center; }
.pd-roi a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--lav); color: var(--ink); font: 700 15px/1 var(--disp); text-decoration: none; transition: background-color .15s ease-out, color .15s ease-out, transform .16s var(--ease); }
.pd-roi a:hover { background: var(--ink); color: var(--white); }
.pd-roi a:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .pd-day__ev, .pd-day__chip, .pd-day__chip svg, .pd-roi a { transition: none; } .pd-day__ev:hover { transform: none; } .pd-day__chip:active, .pd-roi a:active { transform: none; } }

/* 3. Built Beyond a General LLM */
.pd-bx { padding: var(--pad) 0; background: var(--mist); color: var(--ink); }
.pd-bx__frame { max-width: 1120px; margin: 0 auto; overflow: hidden; border-radius: 24px; background: var(--ink); color: var(--white); box-shadow: var(--sh-md); }
.pd-bx__cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pd-bx__cells li { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 24px; border-left: 1px solid var(--rule-ink); }
.pd-bx__cells li:first-child { border-left: 0; }
.pd-bx__cells svg { flex: none; color: var(--gold); }
.pd .pd-bx__cells h3 { font: 700 18px/1.25 var(--disp); letter-spacing: -.005em; color: var(--white); }
.pd-bx__cells p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--lav); }
.pd-bx__cells p a, .pd-bx__links a { color: var(--white); }
.pd-bx__cells p a { text-decoration: underline; text-decoration-color: rgba(255, 198, 30, .7); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .15s ease-out; }
.pd-bx__cells p a:hover { text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.pd-bx__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: center; padding: 20px 24px; border-top: 1px solid var(--rule-ink); }
.pd-bx__bars figcaption { margin-bottom: 8px; font-size: 14px; line-height: 1.3; font-weight: 700; color: var(--lav); }
.pd-bx__bar { display: grid; grid-template-columns: 136px minmax(0, 1fr) 84px; gap: 12px; align-items: center; padding: 4px 0; }
.pd-bx__lbl { font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--white); }
.pd-bx__track { display: block; height: 10px; border-radius: 999px; background: rgba(221, 214, 255, .16); overflow: hidden; }
.pd-bx__track i { display: block; height: 100%; border-radius: inherit; background: var(--gold); transform-origin: left center; }
.pd-bx__bar.is-llm .pd-bx__track i { background: var(--lav); opacity: .7; }
.pd-bx__bar b { white-space: nowrap; font: 700 18px/1 var(--disp); font-variant-numeric: tabular-nums; color: var(--white); text-align: right; }
.pd-bx__bars.is-arm .pd-bx__track i { transform: scaleX(0); transition: transform .9s var(--ease); }
.pd-bx__bars.is-arm.on .pd-bx__track i { transform: scaleX(1); }
.pd-bx__bars.is-arm.on .is-llm .pd-bx__track i { transition-delay: .14s; }
.pd-bx__links { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.pd-bx__links a { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 20px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(221, 214, 255, .4); font: 700 15px/1 var(--disp); text-decoration: none; white-space: nowrap; transition: background-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out, transform .16s var(--ease); }
.pd-bx__links a svg { flex: none; transition: transform .2s var(--ease); }
.pd-bx__links a:active { transform: scale(.97); }
.pd .pd-bx__links a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 999px; }
.pd .pd-bx__cells a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) {
  .pd-bx__links a:hover { background: var(--gold); color: var(--ink); box-shadow: inset 0 0 0 1px var(--gold); }
  .pd-bx__links a:hover svg { transform: translateX(3px); }
}
@media (max-width: 1023px) {
  .pd-bx__cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-bx__cells li:nth-child(odd) { border-left: 0; }
  .pd-bx__cells li:nth-child(n+3) { border-top: 1px solid var(--rule-ink); }
}
@media (max-width: 719px) {
  .pd-bx__frame { border-radius: 20px; }
  .pd-bx__cells { grid-template-columns: minmax(0, 1fr); }
  .pd-bx__cells li, .pd-bx__cells li:nth-child(odd) { flex-direction: row; align-items: flex-start; gap: 14px; padding: 16px 20px; border-left: 0; border-top: 1px solid var(--rule-ink); }
  .pd-bx__cells li:first-child { border-top: 0; }
  .pd-bx__cells svg { width: 24px; height: 24px; margin-top: 2px; }
  .pd .pd-bx__cells h3 { font-size: 17px; }
  .pd-bx__cells p { margin-top: 4px; font-size: 14px; line-height: 1.45; }
  .pd-bx__foot { grid-template-columns: minmax(0, 1fr); padding: 16px 20px 20px; }
  .pd-bx__bar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .pd-bx__lbl { grid-column: 1; }
  .pd-bx__bar b { grid-column: 2; grid-row: 1; }
  .pd-bx__track { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-bx__bars.is-arm .pd-bx__track i { transform: none; transition: none; }
  .pd-bx__links a, .pd-bx__links a svg, .pd-bx__cells p a { transition: none; }
  .pd-bx__links a:active { transform: none; }
}

/* 4a. AK Oct 27: explorer rows. The long names ("Account Research Agent") ran into the type beside them. Each row is now a small grid:
   mark | name over type | chevron, so the two never share a line and never overlap, at any width; phones show the type too. */
.pd .pd-cx__tab { display: grid; grid-template-columns: 28px minmax(0, 1fr) 16px; grid-template-areas: "ic nm ch" "ic ty ch"; column-gap: 12px; row-gap: 2px; align-items: center; padding: 8px 12px 8px 10px; }
.pd .pd-cx__tab img { grid-area: ic; }
.pd .pd-cx__tab b { grid-area: nm; white-space: normal; text-wrap: balance; }
.pd .pd-cx__tab > span { grid-area: ty; display: block; font-size: 13px; line-height: 1.3; font-weight: 600; white-space: normal; }
.pd .pd-cx__tab .pd-cx__chev { grid-area: ch; }
@media (min-width: 900px) { .pd .pd-cx__list.is-js { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); } }

/* 4b. AK Oct 27: the pipeline's module pills (the rail above the deal stages). One pill height everywhere; long names balance onto two
   lines where a sixth of the row is too narrow, and sit on one line on wide screens (the diagram gets a little more width there). */
.pd #pipeline .pjr__mod a { text-wrap: balance; }
@media (min-width: 1101px) { .pd #pipeline .pjr__mod a { min-height: 52px; } }
@media (min-width: 1400px) {
  .pd #pipeline .pd-shell { max-width: 1320px; }
  .pd #pipeline .pjr__mod a { gap: 6px; padding: 4px 12px 4px 4px; font-size: 13.5px; white-space: nowrap; }
  .pd #pipeline .pjr__mod img { width: 24px; height: 24px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .pd #pipeline .pjr__mod a { width: 100%; min-height: 72px; }
  /* stage arrows: "Retention and Expansion" broke onto three lines in a fifth of a tablet row */
  .pd #pipeline .pjr__seg { padding-left: 22px; padding-right: 18px; font-size: 13.5px; }
  .pd #pipeline .pjr__stage:first-child .pjr__seg { padding-left: 14px; }
}

/* 4c. Band rhythm (AK Oct 27: gaps between the blocks). Bands alternate: hero, day (mist), modules (white), beyond (mist), pipeline +
   Kairos (white), CTA row (mist), voices (ink), surfaces (white), FAQ (mist). The surfaces band goes white so it no longer runs into the
   mist FAQ with two paddings stacked. */
.pd .pd-where { background: var(--white); }
/* The pipeline and the Kairos callout share one white band: the pipeline keeps a short bottom padding so the callout sits right under
   the stages instead of a 72px gap plus the callout's own (AK Oct 27, gaps between the blocks). */
.pd #pipeline { padding-bottom: 32px; }

/* AK Nov 1: two accuracy comparisons side by side (account research, people research) */
.pd-bx__charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
@media (max-width: 719px) { .pd-bx__charts { grid-template-columns: minmax(0, 1fr); } }

/* Nov 5 late (AK: "bombarded with information... it has to slowly come in"; round 2: "still feels slow", be done by the time the visitor
   arrives). The Web app rows, then the MCP and API cards, come in one after another (170ms apart, 340ms fade + 20px rise, ease-out-cubic),
   starting as the testimonials band above comes on screen. JS arms it (products.js); no JS or reduced motion = shown at once. */
.pd-sx.sx-arm .sx-step { opacity: 0; transform: translateY(20px); transition: opacity 340ms cubic-bezier(.33, 1, .68, 1), transform 340ms cubic-bezier(.33, 1, .68, 1); }
.pd-sx.sx-arm .sx-step.sx-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pd-sx.sx-arm .sx-step { opacity: 1; transform: none; transition: none; } }

/* ---------- Nov 5 late (AK: "a card, and that card flips when you click on it, and the card's backside has the information"; Krish at
   36:20, Amar "no-brainer"): "Everything Your Deal Needs, In One Platform" as 8 equal FLIP cards ----------
   Markup: views/hp2-classic.ejs (part 'platform'); behaviour: products.js ("pfx"). Each card is a 1x1 grid holding its two faces in the same
   cell, so the card is as tall as its taller face and the rows line up with no JS measuring. A flip is two transforms (front 0 to -180deg,
   back 180 to 0deg, backface hidden) on the faces; nothing in layout changes, so it holds 60fps. The flip button sits outside the faces (it
   never turns), so keyboard focus stays on it through the flip. The hidden face is visibility:hidden once the turn ends (out of the tab
   order and the accessibility tree). Hover (fine pointers) tilts the card 8deg as the flip cue. Reduced motion: a 180ms crossfade, no turn.
   No JS (.pfx without .is-js): the back sits under the front, all readable. Desktop 4 per row; 600-1023px 2 per row; phones a swipe rail
   per layer (the next card peeks). Palette: white + ink faces, lavender/mist chips and lines, gold for the CTA, checks and the hub dot. */
.pd #hp2-platform { --pf-gap: 14px; --pf-pad: 18px; --pf-dur: 560ms; --pf-ease: cubic-bezier(.6, .04, .16, 1); --pf-line: rgba(52,29,153,.2); }
.pd #hp2-platform .hp2-sec-head { margin-bottom: 32px; }
/* the cards get more width than the 1152px text column (up to 1320px, 24px sides), so the backs need fewer lines and both rows fit one screen */
@media (min-width: 1280px) { .pd #hp2-platform .hp2-container { max-width: 1368px; } }
.pd #hp2-platform .pfx { position: relative; }

/* layer labels; the second carries the Kairos hub, centred, as the one connector between the layers */
.pd #hp2-platform .pfx-label { display: flex; align-items: center; gap: 16px; margin: 0 0 12px; }
.pd #hp2-platform .pfx-tag { flex: none; font: 700 20px/1.2 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; letter-spacing: -.01em; color: #110A33; white-space: nowrap; }
.pd #hp2-platform .pfx-desc { flex: none; font: 600 15px/1.3 Manrope, Arial, sans-serif; color: #5B6478; white-space: nowrap; }
.pd #hp2-platform .pfx-line { flex: 1 1 auto; min-width: 24px; height: 1px; background: var(--pf-line); }
.pd #hp2-platform .pfx-label--hub { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0; margin: 20px 0 16px; }
.pd #hp2-platform .pfx-label--hub > .pfx-tag { grid-column: 1; grid-row: 1; justify-self: start; position: relative; z-index: 1; padding-right: 16px; background: #F6F4FF; }
.pd #hp2-platform .pfx-label--hub > .pfx-tag + .pfx-line { grid-column: 1; grid-row: 1; }
.pd #hp2-platform .pfx-label--hub > .pfx-hub { grid-column: 2; grid-row: 1; }
.pd #hp2-platform .pfx-label--hub > .pfx-hub ~ .pfx-line { grid-column: 3; grid-row: 1; }
.pd #hp2-platform .pfx-label--hub > .pfx-desc { grid-column: 3; grid-row: 1; justify-self: end; position: relative; z-index: 1; padding-left: 16px; background: #F6F4FF; }
.pd #hp2-platform .pfx-hub { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0 16px; padding: 8px 22px 9px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #DDD6FF, 0 2px 8px rgba(17,10,51,.08); text-align: center; }
.pd #hp2-platform .pfx-hub h3 { margin: 0; font: 700 16px/1.2 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; letter-spacing: -.01em; }
.pd #hp2-platform .pfx-hub a { display: inline-flex; align-items: center; gap: 8px; color: #110A33; text-decoration: none; }
.pd #hp2-platform .pfx-hub a::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #FFC61E; box-shadow: 0 0 0 3px #FFE8A5; }
.pd #hp2-platform .pfx-hub a::after { content: ""; position: absolute; inset: 0; border-radius: 999px; }   /* the whole capsule is the link */
.pd #hp2-platform .pfx-hub a:focus-visible { outline: none; }
.pd #hp2-platform .pfx-hub:has(a:focus-visible) { outline: 2px solid #110A33; outline-offset: 3px; }
.pd #hp2-platform .pfx-hub p { margin: 2px 0 0; font: 500 12.5px/1.35 Manrope, Arial, sans-serif; color: #5B6478; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .pd #hp2-platform .pfx-hub a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } }

/* the rows and the cards */
.pd #hp2-platform .pfx-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--pf-gap); }
.pd #hp2-platform .pfc { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; color: #110A33; }
.pd #hp2-platform .pfc-f, .pd #hp2-platform .pfc-b { grid-area: 1 / 1; min-width: 0; box-sizing: border-box; padding: var(--pf-pad); border-radius: 24px; }
.pd #hp2-platform .pfc-f { display: flex; flex-direction: column; background: #fff; border: 1px solid #E6E3F5; box-shadow: 0 2px 8px rgba(17,10,51,.08); }
.pd #hp2-platform .pfc-top { display: flex; align-items: center; gap: 10px; min-height: 40px; margin-bottom: 14px; }
.pd #hp2-platform .pfc-mk { flex: none; width: 40px; height: 40px; border-radius: 12px; object-fit: contain; }
.pd #hp2-platform .pfc-name { margin: 0; font: 700 22px/1.15 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; letter-spacing: -.01em; color: #110A33; text-wrap: balance; }
.pd #hp2-platform .pfc-tag { margin: 6px 0 0; font: 600 14.5px/1.45 Manrope, Arial, sans-serif; color: #5B6478; text-wrap: pretty; }   /* two lines kept, so the names line up across a row */

/* the back: ink, the name again for context, 2 points, the CTA(s), the testimonial line */
.pd #hp2-platform .pfc-b { display: flex; flex-direction: column; gap: 12px; padding-top: calc(var(--pf-pad) + 4px); background: #110A33; color: #fff; box-shadow: 0 12px 32px -12px rgba(17,10,51,.35); }
.pd #hp2-platform .pfc-bn { display: flex; align-items: center; gap: 8px; min-height: 36px; margin: 0; padding-right: 44px; font: 700 16px/1.2 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; letter-spacing: -.01em; color: #fff; }
.pd #hp2-platform .pfc-bn img { flex: none; width: 24px; height: 24px; border-radius: 7px; background: #fff; object-fit: contain; }
.pd #hp2-platform .pfc-b ul { display: block; margin: 0; padding: 0; list-style: none; }
.pd #hp2-platform .pfx.is-js .pfc-b ul::before { content: ""; float: right; width: 40px; height: 34px; margin-top: -4px; }   /* room for the flip button: the first point wraps around it */
.pd #hp2-platform .pfc-b li + li { margin-top: 6px; }
.pd #hp2-platform .pfc-b li { position: relative; margin: 0; padding-left: 20px; font: 500 13px/1.45 Manrope, Arial, sans-serif; color: rgba(255,255,255,.88); text-wrap: pretty; }
.pd #hp2-platform .pfc-b li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: #FFC61E; font-weight: 800; }
.pd #hp2-platform .pfc-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.pd #hp2-platform .pfc-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; background: #FFC61E; color: #110A33; font: 800 13.5px/1 Manrope, Arial, sans-serif; text-decoration: none; white-space: nowrap; transition: background-color 160ms ease, scale 160ms cubic-bezier(.23, 1, .32, 1); }
.pd #hp2-platform .pfc-btn:active { scale: .96; }
.pd #hp2-platform .pfc-more { color: #fff; font: 700 13.5px/1.4 Manrope, Arial, sans-serif; text-decoration: none; white-space: nowrap; }
/* the testimonial link (Krish 41:07: a small link, not the quote): face + "Name on Product", to that page's customer stories */
.pd #hp2-platform .pfc-v { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); font: 600 13px/1.35 Manrope, Arial, sans-serif; color: #DDD6FF; text-decoration: none; text-wrap: pretty; }
.pd #hp2-platform .pfc-v img { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #DDD6FF; outline: 1px solid rgba(255,255,255,.14); outline-offset: -1px; }
.pd #hp2-platform .pfc-v b { font-weight: 800; color: #fff; }
.pd #hp2-platform .pfc-v--link { font-weight: 700; }
.pd #hp2-platform .pfc-b a:focus-visible { outline: 2px solid #FFC61E; outline-offset: 3px; border-radius: 12px; }
.pd #hp2-platform .pfc-btn:focus-visible { border-radius: 999px; }
@media (hover: hover) and (pointer: fine) {
  .pd #hp2-platform .pfc-btn:hover { background: #FFE8A5; }
  .pd #hp2-platform .pfc-more:hover, .pd #hp2-platform .pfc-v:hover > span { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
}

/* the flip button: top right, never turns. On the white front a mist pill reading "Details" with the turn icon (the cue); on the ink back it is
   a 36px ring with the icon turned round ("Close details" to assistive tech). 36px tall drawn, 44px to hit. */
.pd #hp2-platform .pfc-t { display: none; }
.pd #hp2-platform .pfx.is-js .pfc-t { position: absolute; z-index: 3; left: var(--pf-pad); bottom: var(--pf-pad); display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 36px; height: 36px; margin: 0; padding: 0 10px 0 14px; border: 0; border-radius: 999px; background: #F6F4FF; font: 800 13px/1 Manrope, Arial, sans-serif; letter-spacing: 0; box-shadow: inset 0 0 0 1px #DDD6FF; color: #110A33; cursor: pointer; transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, scale 160ms cubic-bezier(.23, 1, .32, 1), opacity 200ms ease-out; }
.pd #hp2-platform .pfx.is-js .pfc-t::after { content: ""; position: absolute; inset: -4px; border-radius: 999px; }
.pd #hp2-platform .pfx.is-js .pfc[data-flipped] .pfc-t { padding: 0; left: auto; bottom: auto; top: calc(var(--pf-pad) + 2px); right: var(--pf-pad); }
.pd #hp2-platform .pfx.is-js .pfc[data-flipped] .pfc-tl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; }
.pd #hp2-platform .pfx.is-js .pfc-t:active { scale: .92; }
.pd #hp2-platform .pfx.is-js .pfc-t:focus-visible { outline: 2px solid #110A33; outline-offset: 2px; }
.pd #hp2-platform .pfx.is-js .pfc-ti { transition: rotate var(--pf-dur) var(--pf-ease); }
.pd #hp2-platform .pfx.is-js .pfc[data-flipped] .pfc-t { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); color: #fff; transition-delay: calc(var(--pf-dur) * .35), calc(var(--pf-dur) * .35), calc(var(--pf-dur) * .35), 0s, 0s; }
.pd #hp2-platform .pfx.is-js .pfc[data-flipped] .pfc-t:focus-visible { outline-color: #FFC61E; }
.pd #hp2-platform .pfx.is-js .pfc[data-flipped] .pfc-ti { rotate: -180deg; }
.pd #hp2-platform .pfx.is-js .pfc.is-turning .pfc-t { opacity: 0; transition: none; }   /* gone at once: it moves corner (front: bottom left, back: top right) while hidden */
.pd #hp2-platform .pfx.is-js .pfc:not(.is-turning) .pfc-t { opacity: 1; }

/* the first frames after the flip-card state is set: no transitions (else every back would visibly turn away on load) */
.pd #hp2-platform .pfx.pfx-noanim, .pd #hp2-platform .pfx.pfx-noanim * { transition: none !important; }
/* JS on: the 3D turn */
.pd #hp2-platform .pfx.is-js .pfc { perspective: 1400px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: opacity 420ms cubic-bezier(.23, 1, .32, 1), translate 420ms cubic-bezier(.23, 1, .32, 1), scale 160ms cubic-bezier(.23, 1, .32, 1); }
.pd #hp2-platform .pfx.is-js .pfc[data-flipped] { cursor: auto; }
.pd #hp2-platform .pfx.is-js .pfc:active { scale: .985; }
.pd #hp2-platform .pfx.is-js .pfc-f, .pd #hp2-platform .pfx.is-js .pfc-b { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* desktop: both faces of the 8 cards keep their own compositor layer (small, about 300px square), so the first turn of a card does not pay to
   build it (measured: one 58ms frame on a cold first flip without this) */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) { .pd #hp2-platform .pfx.is-js .pfc-f, .pd #hp2-platform .pfx.is-js .pfc-b { will-change: transform; } }
.pd #hp2-platform .pfx.is-js .pfc-f { transform: rotateY(0deg); visibility: visible; transition: transform var(--pf-dur) var(--pf-ease), visibility 0s linear 0s, border-color 200ms ease, box-shadow 200ms ease; }
.pd #hp2-platform .pfx.is-js .pfc-b { transform: rotateY(180deg); visibility: hidden; transition: transform var(--pf-dur) var(--pf-ease), visibility 0s linear var(--pf-dur); }
.pd #hp2-platform .pfx.is-js .pfc[data-flipped] .pfc-f { transform: rotateY(-180deg); visibility: hidden; transition: transform var(--pf-dur) var(--pf-ease), visibility 0s linear var(--pf-dur), border-color 200ms ease, box-shadow 200ms ease; }
.pd #hp2-platform .pfx.is-js .pfc[data-flipped] .pfc-b { transform: rotateY(0deg); visibility: visible; transition: transform var(--pf-dur) var(--pf-ease), visibility 0s linear 0s; }
/* the flip cue: a mouse over a card tilts it a little toward the turn (back face kept in step, so the turn never shows a gap) */
@media (hover: hover) and (pointer: fine) {
  .pd #hp2-platform .pfx.is-js .pfc:not([data-flipped]):hover .pfc-f { transform: rotateY(-8deg); border-color: #DDD6FF; box-shadow: 0 12px 32px -12px rgba(17,10,51,.22); transition-duration: 320ms, 0s, 200ms, 200ms; }
  .pd #hp2-platform .pfx.is-js .pfc:not([data-flipped]):hover .pfc-b { transform: rotateY(172deg); transition-duration: 320ms, 0s; }
  .pd #hp2-platform .pfx.is-js .pfc:not([data-flipped]):hover .pfc-t { background: #DDD6FF; }
}
/* the rows arrive once, card by card (60ms apart), as each row comes on screen */
.pd #hp2-platform .pfx.is-js .pfx-row.is-arm .pfc { opacity: 0; translate: 0 16px; }
.pd #hp2-platform .pfx.is-js .pfx-row.is-arm.is-in .pfc { opacity: 1; translate: 0 0; transition-delay: calc(var(--i, 0) * 60ms), calc(var(--i, 0) * 60ms), 0s; }

/* no JS: the back sits under the front, everything readable */
.pd #hp2-platform .pfx:not(.is-js) .pfc-f { border-radius: 24px 24px 0 0; }
.pd #hp2-platform .pfx:not(.is-js) .pfc-b { grid-area: 2 / 1; border-radius: 0 0 24px 24px; }
.pd #hp2-platform .pfx.is-js .pfc-f::after { content: ""; flex: none; height: 36px; margin-top: auto; padding-top: 16px; }   /* room for the Details button */
.pd #hp2-platform .pfx:not(.is-js) .pfc-bn { display: none; }

/* tablets: two per row */
@media (max-width: 1023px) {
  .pd #hp2-platform .pfx-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* below 900px the layer labels stack: name, then its line of description; the Kairos hub sits centred above the activation label */
@media (max-width: 899px) {
  .pd #hp2-platform .pfx-label { flex-wrap: wrap; row-gap: 2px; }
  .pd #hp2-platform .pfx-label > .pfx-line { display: none; }
  .pd #hp2-platform .pfx-desc { flex-basis: 100%; white-space: normal; font-size: 14px; }
  .pd #hp2-platform .pfx-label--hub { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2px; margin-top: 16px; }
  .pd #hp2-platform .pfx-label--hub > * { grid-column: 1 !important; grid-row: auto !important; }
  .pd #hp2-platform .pfx-label--hub > .pfx-tag, .pd #hp2-platform .pfx-label--hub > .pfx-desc { justify-self: start; padding: 0; background: none; }
  .pd #hp2-platform .pfx-label--hub > .pfx-hub { order: -1; justify-self: center; margin: 16px 0 20px; }
}
/* phones: each layer is a swipe rail (scroll-snap); the next card peeks so the rest of the layer is visible as a cue */
@media (max-width: 599px) {
  .pd #hp2-platform { --pf-pad: 18px; }
  .pd #hp2-platform .pfx-tag { font-size: 18px; }
  .pd #hp2-platform .pfx-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(84%, 320px); gap: 12px; margin: 0 -24px; padding: 4px 24px 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; scrollbar-width: none; }
  .pd #hp2-platform .pfx-row::-webkit-scrollbar { display: none; }
  .pd #hp2-platform .pfc { scroll-snap-align: start; }
  .pd #hp2-platform .pfx-hub p { white-space: normal; }
  .pd #hp2-platform .pfx-label--hub > .pfx-hub { margin: 4px auto 16px; }
  .pd #hp2-platform .pfc-b { box-shadow: 0 2px 8px rgba(17,10,51,.12); }
}
@media (max-width: 380px) {
  .pd #hp2-platform .pfx-row { margin: 0 -16px; padding-left: 16px; padding-right: 16px; scroll-padding-inline: 16px; }
}

/* reduced motion: no turn, no tilt, no arrival; the faces crossfade in 180ms */
@media (prefers-reduced-motion: reduce) {
  .pd #hp2-platform .pfx.is-js .pfc-f, .pd #hp2-platform .pfx.is-js .pfc-b,
  .pd #hp2-platform .pfx.is-js .pfc:not([data-flipped]):hover .pfc-f, .pd #hp2-platform .pfx.is-js .pfc:not([data-flipped]):hover .pfc-b,
  .pd #hp2-platform .pfx.is-js .pfc[data-flipped] .pfc-f, .pd #hp2-platform .pfx.is-js .pfc[data-flipped] .pfc-b { transform: none; }
  .pd #hp2-platform .pfx.is-js .pfc-f { opacity: 1; transition: opacity 180ms ease, visibility 0s linear 0s; }
  .pd #hp2-platform .pfx.is-js .pfc-b { opacity: 0; transition: opacity 180ms ease, visibility 0s linear 180ms; }
  .pd #hp2-platform .pfx.is-js .pfc[data-flipped] .pfc-f { opacity: 0; transition: opacity 180ms ease, visibility 0s linear 180ms; }
  .pd #hp2-platform .pfx.is-js .pfc[data-flipped] .pfc-b { opacity: 1; transition: opacity 180ms ease, visibility 0s linear 0s; }
  .pd #hp2-platform .pfx.is-js .pfc-ti, .pd #hp2-platform .pfx.is-js .pfc[data-flipped] .pfc-ti { rotate: none; transition: none; }
  .pd #hp2-platform .pfx.is-js .pfx-row.is-arm .pfc { opacity: 1; translate: none; }
  .pd #hp2-platform .pfx.is-js .pfc, .pd #hp2-platform .pfx.is-js .pfc:active { transition: none; scale: none; }
}

/* Nov 5 late, full pass of /product (AK: "think like a designer and check everything yourself"):
   - 600-1199px: the flip cards go two to a row. Four across at 1024px left ~228px cards whose backs ran tall, so the fronts showed a
     blank band above "Details".
   - up to 1199px: "Works across every surface" lists its four groups one per row (name left, logos right). Two to a row left Copilot
     (and on phones Edge and Gemini) alone on a second line and made the Web app / Outlook tiles tall and empty beside them. */
@media (min-width: 600px) and (max-width: 1199px) {
  .pd #hp2-platform .pfx-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1199px) {
  .pd-sx__groups { grid-template-columns: minmax(0, 1fr); }
  .pd-sx__groups li { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
  .pd-sx__groups .pd-sx__logos { flex-wrap: nowrap; }
}
@media (max-width: 380px) {
  .pd-sx__groups li { flex-direction: column; align-items: flex-start; }
}
/* phones: the ten "flows into" tools sit in an even 5 x 2 grid of logos (free wrapping left Teams alone on the last line at 320px, and
   at a fifth of a phone row the names broke mid-word). The names stay as each logo's alt text and tooltip. */
@media (max-width: 599px) {
  .pd-sx__flows .pd-sx__logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); justify-items: center; gap: 12px 4px; width: 100%; }
  .pd-sx__flows .pd-sx__lg { min-width: 44px; min-height: 44px; justify-content: center; }   /* a 44px tap target per logo */
  .pd-sx__flows .pd-sx__lg small { display: none; }
}
/* Nov 5 late (Krish 59:04; AK: no arrow): the footnote under the Web app card's logo tiles (they are install / connect links) */
.pd-sx__note { margin: -4px 0 0; font: 500 13px/1.45 Manrope, "Manrope Fallback", Arial, sans-serif; color: #5B6478; }