/* "What each module does" explorer, shared (AK Nov 1): the same section as /products (#modules), for pages that do not load
   products.css (the home page). Rules copied from public/v2/products/products.css (.pd-cx) under a .pdm wrapper that carries the
   tokens. Keep the two in step. Script: public/v2/shared/modules.js. Markup: views/partials/pd-modules.ejs. */
.pdm { --gold: #FFC61E; --gold3: #FFE8A5; --ink: #110A33; --violet: #341D99; --lav: #DDD6FF; --mist: #F6F4FF; --slate: #5B6478; --white: #fff;
  --disp: "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; --ease: cubic-bezier(.23, 1, .32, 1);
  --sh-sm: 0 2px 8px rgba(17,10,51,.08); --pad: clamp(48px, 5vw, 72px); color: var(--ink); font-family: Manrope, Arial, sans-serif; }
.pdm *, .pdm *::before, .pdm *::after { box-sizing: border-box; }
.pdm :where(h2, h3, p) { margin: 0; text-wrap: balance; }
.pdm :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.pdm .pd-shell { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.pdm .pd-head { max-width: 960px; margin: 0 auto 24px; text-align: center; }
.pdm .pd-head h2 { font: 700 clamp(28px, 3.2vw, 42px)/1.12 var(--disp); letter-spacing: -.02em; color: var(--ink); }
.pdm .pd-head p { margin-top: 10px; font-size: 17px; line-height: 1.55; color: var(--slate); }
.pdm .pd-cx__ph h3 { font: 700 30px/1.1 var(--disp); letter-spacing: -.02em; color: var(--ink); }
.pdm button { font-family: inherit; }
.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-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; }

/* the home page list is narrower: long module names wrap instead of running into the type label */
.pdm .pd-cx__tab b { white-space: normal; }

/* "Built Beyond a General LLM" comparison (.pd-bx), shared for the home page (AK Nov 1), copied from public/v2/products/products.css. */
.pdm { --rule-ink: rgba(221,214,255,.16); }

/* 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); }
.pdm .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); }
.pdm .pd-bx__links a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 999px; }
.pdm .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; }
  .pdm .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; }
}


/* 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); } }

/* AK Nov 1 (home): the open row is white, like the active team pill; a quote replaces "Who uses it"; two CTAs */
.pdm .pd-cx__tab[aria-expanded="true"] { background: #fff; box-shadow: 0 2px 8px rgba(17,10,51,.08), inset 0 0 0 1px #DDD6FF; }
.pdm .pd-cx__panel { background: #fff; }
.pdm .pd-cx__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 24px 0 0; }
.pdm .pd-cx__try { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: 999px; background: #FFC61E; color: #110A33; font: 800 15px/1 Manrope, Arial, sans-serif; text-decoration: none; transition: transform .16s var(--ease); }
.pdm .pd-cx__try:hover { filter: brightness(.96); }
.pdm .pd-cx__try:active { transform: scale(.96); }
.pdm .pd-cx__try:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.pdm .pd-cx__ctas .pd-cx__go { margin-top: 0; }

/* Nov 1 round (A2, B2, B3). Rows: the name sits on one line with its "Replaces" line under it (it squeezed the name into 2 to 3 lines
   and wrapped right-aligned with lone words). Panel: "What it does" is a quiet sub-heading, not a tracked small-caps eyebrow; the
   quote leads with the person (face, name, role) and sits on the panel behind a hairline, not in a box inside the box; tighter rhythm
   so the CTAs stay above the fold at 1440x900. Phones: the team filter wraps onto two centred rows instead of being cut off. */
.pdm .pd-cx__tab { align-items: center; min-height: 60px; padding: 10px 14px 10px 12px; }
.pdm .pd-cx__tab > .pd-cx__nm { flex: 1; min-width: 0; display: grid; gap: 2px; white-space: normal; font-size: inherit; color: inherit; }
.pdm .pd-cx__tab b { flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 700 17px/1.2 var(--disp); }
.pdm .pd-cx__rp { display: block; font: 600 12px/1.35 Manrope, Arial, sans-serif; color: var(--slate); white-space: normal; text-align: left; text-wrap: pretty; }
.pdm .pd-cx__tab[aria-expanded="true"] .pd-cx__rp { color: #4A5266; }
.pdm .pd-cx__panel { padding: 28px 32px; }
.pdm .pd-cx__ph h3 { font-size: 28px; }
.pdm .pd-cx__job { margin-top: 14px; font-size: 17px; }
.pdm .pd-cx__k { margin-top: 20px; font: 800 14px/1.3 Manrope, Arial, sans-serif; letter-spacing: 0; text-transform: none; color: var(--ink); }
.pdm .pd-cx__does { gap: 8px; margin-top: 10px !important; }
.pdm .pd-cx__q { display: grid; gap: 10px; margin: 20px 0 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--lav); border-radius: 0; background: none; }
.pdm .pd-cx__q figcaption { display: flex; align-items: center; gap: 12px; font-size: 13px; line-height: 1.35; color: var(--slate); }
.pdm .pd-cx__q figcaption span { display: grid; }
.pdm .pd-cx__q figcaption b { margin: 0; padding: 0; color: var(--ink); font-size: 14px; }
.pdm .pd-cx__q figcaption span { margin: 0; padding: 0; text-align: left; }
.pdm .pd-cx__q img { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gold); }
.pdm .pd-cx__q blockquote { margin: 0; padding: 0; border: 0; font: 600 16px/1.5 Manrope, Arial, sans-serif; color: var(--ink); text-wrap: pretty; }
@media (max-width: 899px) {
  .pdm .pd-cx__filter { flex-wrap: wrap; justify-content: center; width: auto; max-width: 560px; margin-left: auto; margin-right: auto; overflow: visible; border-radius: 24px; }
  .pdm .pd-cx__list.is-js .pd-cx__panel { padding: 4px 16px 20px; }
  .pdm .pd-cx__q blockquote { font-size: 15px; }
}
/* Nov 2 (Agent B, A2 pass): at tablet widths the five team pills fit on one row; the 560px cap wrapped "Product and AI" alone (4 + 1) */
@media (min-width: 600px) and (max-width: 899px) { .pdm .pd-cx__filter { flex-wrap: nowrap; width: max-content; max-width: 100%; } .pdm .pd-cx__filter button { padding: 0 12px; } }
@media (max-width: 599px) {
  .pdm .pd-cx__tab > .pd-cx__nm { display: grid; }
  .pdm .pd-cx__filter button { padding: 0 14px; font-size: 13px; }
  .pdm .pd-cx__tab b { white-space: normal; }
}

/* AK Nov 1 (home): the comparisons take turns; tabs on top, one pane (chart + its two links) at a time */
.pd-bx__rot { display: block; }
.pd-bx__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.pd-bx__tabs button { min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px rgba(221,214,255,.35); color: var(--lav); font: 700 14px/1 Manrope, Arial, sans-serif; cursor: pointer; }
.pd-bx__tabs button[aria-selected="true"] { background: var(--gold); box-shadow: none; color: var(--ink); }
.pdm .pd-bx__tabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.pd-bx__pane { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: center; }
.pd-bx__pane[hidden] { display: none; }
.pd-bx__pane.is-on { animation: pd-bx-in .45s var(--ease) both; }
@keyframes pd-bx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 719px) { .pd-bx__pane { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .pd-bx__pane.is-on { animation: none; } }

/* Nov 1 (A5): "Good Enough or Best in Class?" on the home page. The proof leads (chart left, big numbers, caption over its bars), the four
   reasons are one quiet list on the right (no 4-up icon-cell grid), product names are plain bold links, the live tab shows a thin
   line for when it turns. Markup: views/partials/pd-beyond.ejs. Rollback: 04-build/backups/nov01-round/A5-beyond/. */
.pd-bx2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.pd-bx2__proof { display: block; padding: 32px; border: 0; }
.pd-bx2 .pd-bx__tabs { margin: 0 0 24px; }
.pd-bx2 .pd-bx__tabs button { position: relative; overflow: hidden; min-height: 40px; padding: 0 18px; font-size: 15px; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .16s var(--ease); }
.pd-bx2 .pd-bx__tabs button:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .pd-bx2 .pd-bx__tabs button[aria-selected="false"]:hover { box-shadow: inset 0 0 0 1px var(--lav); color: var(--white); } }
.pd-bx2__tick { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: rgba(17,10,51,.35); transform: scaleX(0); transform-origin: left; }
.pd-bx2 [data-bx-rot].is-turning [aria-selected="true"] .pd-bx2__tick { animation: pd-bx2-tick var(--bx-turn, 9s) linear forwards; }
.pd-bx2 [data-bx-rot].is-held [aria-selected="true"] .pd-bx2__tick { animation-play-state: paused; }
@keyframes pd-bx2-tick { to { transform: scaleX(1); } }
.pd-bx2 .pd-bx__pane { display: block; }
.pd-bx2 .pd-bx__pane[hidden] { display: none; }
.pd-bx2 .pd-bx__bars figcaption { margin: 0 0 16px; font: 700 16px/1.35 var(--disp); color: var(--lav); text-align: left; }
.pd-bx2 .pd-bx__bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "t t"; row-gap: 8px; padding: 10px 0; }
.pd-bx2 .pd-bx__lbl { grid-area: l; font-size: 15px; }
.pd-bx2 .pd-bx__bar b { grid-area: v; font: 700 clamp(28px, 3vw, 40px)/1 var(--disp); letter-spacing: -.02em; }
.pd-bx2 .pd-bx__bar.is-llm b { color: var(--lav); }
.pd-bx2 .pd-bx__track { grid-area: t; height: 14px; }
/* Nov 2 (A5, AK: bring back the bars filling left to right on every tab click). The fill was there but ran under the pane's fade and
   was 90% done in 0.2s, so it never read. Now each bar fills over 0.9s on an even ease-out, a beat after the pane shows, the general
   LLM bar 0.14s after Humantic AI's; a click on the open tab replays it from empty (is-reset snaps it back first). */
.pd-bx2 .pd-bx__bars.is-arm .pd-bx__track i { transition: transform .9s cubic-bezier(.33, 1, .68, 1) .12s; }
.pd-bx2 .pd-bx__bars.is-arm.on .is-llm .pd-bx__track i { transition-delay: .26s; }
.pd-bx__bars.is-reset .pd-bx__track i { transition: none !important; }
/* the two tabs stay on one row on phones (no lone wrapped tab) */
@media (max-width: 479px) { .pd-bx2 .pd-bx__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .pd-bx2 .pd-bx__tabs button { padding: 0 8px; font-size: 14px; white-space: nowrap; } }
@media (max-width: 359px) { .pd-bx2__proof { padding: 24px 16px; } .pd-bx2 .pd-bx__tabs { gap: 6px; } .pd-bx2 .pd-bx__tabs button { padding: 0 4px; font-size: 12px; } }
.pd-bx2 .pd-bx__links { flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.pd-bx2 .pd-bx__links a { flex: 0 1 auto; }
.pd-bx2__why { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 32px; box-shadow: inset 1px 0 0 rgba(221,214,255,.16); background: rgba(221,214,255,.04); }
.pd-bx2__why li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start; }
.pd-bx2__why svg { color: var(--gold); margin-top: 2px; }
.pdm .pd-bx2__why h3 { font: 700 17px/1.25 var(--disp); color: var(--white); }
.pd-bx2__why p { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--lav); text-wrap: pretty; }
.pd-bx2__why p a { color: var(--white); font-weight: 700; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .pd-bx2__why p a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; } }
.pdm .pd-bx2__why p a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 899px) {
  .pd-bx2 { grid-template-columns: minmax(0, 1fr); }
  .pd-bx2__why { box-shadow: inset 0 1px 0 rgba(221,214,255,.16); padding: 24px 20px; gap: 18px; }
  .pd-bx2__proof { padding: 24px 20px; }
}
@media (max-width: 479px) { .pd-bx2 .pd-bx__links a { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .pd-bx2__tick { display: none; } }

/* Nov 5 (AK + Amar): modules with a real product screen show a screenshot tour (partials/hx-tour, public/v2/shared/tour.css) in place of
   the "What it does" list and quote. The name and its two CTAs share the top row, the one-line job sits under it, the tour fills the
   rest, so the card still fits one screen at 1440x900. Phones: the CTAs go under the tour. Rollback: 04-build/backups/tours-nov05/. */
.pdm .pd-cx__panel.has-tour { padding: 24px 28px 20px; }
.pdm .has-tour .pd-cx__th { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.pdm .has-tour .pd-cx__th .pd-cx__ctas { margin: 0; flex-wrap: nowrap; gap: 14px; }
.pdm .has-tour .pd-cx__th .pd-cx__try { min-height: 44px; padding: 0 18px; }
.pdm .has-tour .pd-cx__ph { gap: 12px; }
.pdm .has-tour .pd-cx__ph img { width: 36px; height: 36px; }
.pdm .has-tour .pd-cx__ph h3 { font-size: 22px; }
.pdm .has-tour .pd-cx__type { font-size: 13px; }
.pdm .has-tour .pd-cx__job { margin-top: 12px; }
.pdm .has-tour .pd-cx__tour { margin-top: 16px; }
@media (max-width: 899px) {
  .pdm .pd-cx__list.is-js .pd-cx__panel.has-tour { display: flex; flex-direction: column; padding: 4px 16px 20px; }
  .pdm .has-tour .pd-cx__th { order: 3; margin-top: 16px; }
  .pdm .has-tour .pd-cx__job { order: 1; margin-top: 8px; }
  .pdm .has-tour .pd-cx__tour { order: 2; margin-top: 12px; }
}
@media (max-width: 399px) { .pdm .has-tour .pd-cx__th .pd-cx__ctas { flex-wrap: wrap; } }