/* Product glimpse (AK Nov 4): views/partials/pm-glimpse.ejs and the samples in views/partials/glimpse/. Brand colours only. */
.pmg { --ink: #110A33; --violet: #341D99; --lav: #DDD6FF; --mist: #F6F4FF; --cream: #FFF4D2; --gold: #FFC61E; --slate: #5B6478;
  padding: clamp(56px, 6vw, 88px) 0; background: #fff; color: var(--ink); font-family: Manrope, Arial, sans-serif; }
.pmg *, .pmg *::before, .pmg *::after, .pmg__dlg *, .pmg__dlg *::before, .pmg__dlg *::after { box-sizing: border-box; }
.pmg--mist { background: var(--mist); }
.pmg__in { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
/* AK Nov 4 (round 3): two columns, the words left and the sample right; the sample is the click target */
.pmg__split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 32px 56px; align-items: center; }
.pmg__words h2 { margin: 0; font: 500 clamp(36px, 3.4vw, 46px)/1.15 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; color: var(--ink); text-wrap: balance; }
.pmg__sub { margin: 14px 0 0; font: 400 clamp(18px, 1.56vw, 20px)/1.4 Manrope, Arial, sans-serif; color: var(--slate); text-wrap: pretty; }
.pmg__line { margin: 14px 0 0; font: 600 16px/1.5 Manrope, Arial, sans-serif; color: var(--ink); }
.pmg__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.pmg__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--gold); color: var(--ink); font: 800 15px/1 Manrope, Arial, sans-serif; text-decoration: none; }
.pmg__btn:hover { filter: brightness(.96); }
.pmg__peek { position: relative; display: block; width: 100%; height: 420px; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--lav), 0 18px 44px -20px rgba(17,10,51,.32); text-align: left; cursor: zoom-in; font: inherit; color: inherit; transition: box-shadow .2s ease-out, transform .2s ease-out; }
.pmg--white .pmg__peek { background: var(--mist); }
.pmg__peek::after { content: ""; position: absolute; inset: auto 0 0; height: 120px; background: linear-gradient(rgba(255,255,255,0), #fff 85%); pointer-events: none; }
.pmg--white .pmg__peek::after { background: linear-gradient(rgba(246,244,255,0), var(--mist) 85%); }
.pmg__peek-in { display: block; padding: 20px 20px 0; pointer-events: none; }
.pmg__hint { position: absolute; left: 50%; bottom: 18px; z-index: 1; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.95); box-shadow: 0 0 0 1px var(--lav), 0 4px 12px rgba(17,10,51,.1); font: 700 13px/1 Manrope, Arial, sans-serif; color: var(--violet); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .pmg__peek:hover { box-shadow: 0 0 0 2px var(--gold), 0 22px 50px -20px rgba(17,10,51,.38); transform: translateY(-2px); } }
.pmg__peek:focus-visible, .pmg__btn:focus-visible, .pmg__x:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 899px) { .pmg__split { grid-template-columns: minmax(0, 1fr); } .pmg__words { text-align: center; } .pmg__ctas { justify-content: center; } .pmg__peek { height: 340px; } }
@media (max-width: 767px) { .pmg__words h2 { font-size: 26px; font-weight: 700; } .pmg__sub { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .pmg__peek { transition: none; } .pmg__peek:hover { transform: none; } }
/* the pop-up */
html.pmg-lock { overflow: hidden; }
.pmg__dlg { margin: auto; inset: 0; --ink: #110A33; --violet: #341D99; --lav: #DDD6FF; --mist: #F6F4FF; --cream: #FFF4D2; --gold: #FFC61E; --slate: #5B6478;
  width: min(1000px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 24px; background: #fff; color: var(--ink); font-family: Manrope, Arial, sans-serif; box-shadow: 0 30px 80px -20px rgba(17,10,51,.5); overflow: hidden; }
.pmg__dlg[open] { display: flex; flex-direction: column; }
.pmg__dlg::backdrop { background: rgba(17,10,51,.6); }
.pmg__dlg-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px 14px 24px; border-bottom: 1px solid var(--lav); }
.pmg__dlg-bar p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pmg__dlg-bar b { font: 700 19px/1.2 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; }
.pmg__dlg-bar span { font-size: 13px; font-weight: 700; color: var(--slate); }
.pmg__x { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--mist); color: var(--ink); cursor: pointer; }
.pmg__dlg-body { flex: 1 1 auto; overflow: auto; padding: 24px; background: var(--mist); }
.pmg__dlg-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 24px; border-top: 1px solid var(--lav); }
.pmg__dlg-foot p { margin: 0; font: 700 16px/1.3 Manrope, Arial, sans-serif; }
.pmg__dlg-foot span { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 767px) { .pmg__dlg-body { padding: 16px; } .pmg__dlg-foot { padding: 12px 16px; } }

/* shared sample pieces (gs = glimpse sample) */
.gs { display: grid; gap: 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink, #110A33); text-align: left; }
.gs h4 { margin: 0 0 8px; font: 800 12px/1.2 Manrope, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--violet, #341D99); }
.gs p { margin: 0; }
.gs ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.gs__card { padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--lav, #DDD6FF); }
.gs__top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.gs__logo { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--ink, #110A33); color: var(--gold, #FFC61E); font: 800 20px/1 "Cabinet Grotesk", Arial, sans-serif; }
.gs__top b { display: block; font: 700 20px/1.2 "Cabinet Grotesk", Arial, sans-serif; }
.gs__top small { display: block; font-size: 13px; color: var(--slate, #5B6478); }
.gs__src { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: var(--mist, #F6F4FF); font-size: 12px; font-weight: 800; color: var(--violet, #341D99); }
.gs__chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gs__chip { padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--lav, #DDD6FF); }
.gs__chip small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--slate, #5B6478); }
.gs__chip b { font-size: 14px; }
.gs__grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gs__dot li { position: relative; padding-left: 16px; }
.gs__dot li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold, #FFC61E); }
.gs__ppl li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.gs__av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--lav, #DDD6FF); font: 800 12px/1 Manrope, Arial, sans-serif; color: var(--ink, #110A33); }
.gs__ppl small { display: block; font-size: 12.5px; color: var(--slate, #5B6478); }
.gs__disc { padding: 3px 8px; border-radius: 999px; background: var(--violet, #341D99); color: #fff; font-size: 11.5px; font-weight: 800; }
.gs__sig li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; }
.gs__sig time { font-size: 12px; font-weight: 800; color: var(--slate, #5B6478); white-space: nowrap; }
.gs__tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--cream, #FFF4D2); box-shadow: inset 0 0 0 1px var(--gold, #FFC61E); font-size: 11.5px; font-weight: 800; }
.gs__note { font-size: 12.5px; color: var(--slate, #5B6478); }
@media (max-width: 640px) { .gs__chips, .gs__grid2 { grid-template-columns: minmax(0, 1fr); } }

/* AK Nov 4: the free try box inside the sample section's left column */
.pmg__try { margin-top: 24px; padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--lav), 0 12px 32px -16px rgba(17,10,51,.25); text-align: left; }
.pmg--white .pmg__try { background: var(--mist); }

/* AK Nov 4: the heading spans the full width (one line), centred like every other section; the two columns follow */
.pmg__head2 { max-width: 1152px; margin: 0 auto clamp(28px, 3vw, 40px); padding: 0 24px; text-align: center; box-sizing: content-box; }
.pmg__head2 h2 { margin: 0; font: 500 clamp(40px, 3.9vw, 50px)/1.2 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; color: var(--ink); }
.pmg__head2 .pmg__sub { margin: 12px auto 0; max-width: 56rem; }
@media (max-width: 767px) { .pmg__head2 h2 { font-size: 26px; font-weight: 700; } }

/* Nov 5 (AK + Amar): with g.tour the right side is a screenshot tour of the real product (partials/hx-tour, tour.css) instead of the HTML
   sample. "Click to expand" sits in the tour's control row (beside the step buttons and pause) and opens the same screen in the pop-up,
   whole, with its stops numbered (hx-tour tStill). Rollback: 04-build/backups/tours-nov05/. */
.pmg__tour { min-width: 0; }
.pmg__open { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0 0 0 auto; padding: 0 16px; border: 0; border-radius: 999px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--lav); color: var(--ink); font: 700 13px/1 Manrope, Arial, sans-serif; white-space: nowrap; cursor: zoom-in; touch-action: manipulation;
  transition: box-shadow .16s ease-out, transform .16s ease-out; }
.pmg__open + .hxt__pause { margin-left: 4px !important; }
@media (hover: hover) and (pointer: fine) { .pmg__open:hover { box-shadow: inset 0 0 0 2px var(--gold); } }
.pmg__open:active { transform: scale(.96); }
.pmg__open:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.pmg__dlg-body .hxt { max-width: 1200px; margin: 0 auto; }
/* small tour boxes: the expand button takes its own row under the step buttons and pause (it pushed the steps off-screen at 320px) */
@container (max-width: 479px) { .pmg__open { order: 3; flex: 1 0 100%; justify-content: center; margin: 4px 0 0; } .pmg__open + .hxt__pause { margin-left: auto !important; } }
@media (prefers-reduced-motion: reduce) { .pmg__open { transition: none; } .pmg__open:active { transform: none; } }

/* AK Nov 7: "See ... In Action" left column = the tour's stops as a step list that drives it (views/partials/pm-glimpse.ejs, .pmg--steps),
   then the line and the CTA. The stop on screen is marked (a raised surface, an ink number) and a thin gold bar fills for as long as the
   tour stays on it (paused with the tour). Same row language as the /use-cases list (lavender hairline, 16px corners). Only in the moving
   view: reduced motion or no script shows the tour's still view with its numbered legend, and the list stays hidden.
   Wide screens: the tour's own caption and 1 2 3 buttons stand down (the list says it). Phones: the list stands down, the tour comes first. */
.pmg__steps { display: none; }
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .pmg--steps .pmg__split { align-items: center; }
  .pmg__steps { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
  .pmg__steps > li { margin: 0; padding: 0; }
  .pmg__st { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 4px 12px; width: 100%; margin: 0; padding: 16px 20px 16px 16px;
    border: 1px solid transparent; border-radius: 16px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; overflow: hidden;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: background-color 200ms cubic-bezier(.23, 1, .32, 1), border-color 200ms cubic-bezier(.23, 1, .32, 1), box-shadow 200ms cubic-bezier(.23, 1, .32, 1); }
  .pmg__st-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--lav);
    color: var(--slate); font: 800 13px/1 Manrope, Arial, sans-serif; font-variant-numeric: tabular-nums; transition: background-color 200ms cubic-bezier(.23, 1, .32, 1), color 200ms cubic-bezier(.23, 1, .32, 1); }
  .pmg--white .pmg__st-n { background: var(--mist); }
  .pmg__st-t { display: block; min-width: 0; padding-top: 2px; }
  .pmg__st-t b { display: block; font: 700 19px/1.25 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; color: var(--slate); text-wrap: balance; transition: color 200ms cubic-bezier(.23, 1, .32, 1); }
  .pmg__st-t small { display: block; margin-top: 4px; font: 500 14px/1.45 Manrope, Arial, sans-serif; color: var(--slate); text-wrap: pretty; }
  /* the stop on screen */
  .pmg__st.is-on { border-color: var(--lav); background: #fff; box-shadow: 0 2px 8px rgba(17, 10, 51, .08); }
  .pmg--white .pmg__st.is-on { background: var(--mist); box-shadow: none; }
  .pmg__st.is-on .pmg__st-n { background: var(--ink); box-shadow: none; color: #fff; }
  .pmg__st.is-on .pmg__st-t b { color: var(--ink); }
  /* how long the tour stays on it: linear (constant progress), transform only, paused with the tour */
  .pmg__st::after { content: ""; position: absolute; left: 16px; right: 20px; bottom: 0; height: 2px; border-radius: 2px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
  .pmg__st.is-run::after { animation: pmg-fill var(--pmg-d, 4100ms) linear forwards; }
  .pmg__steps.is-held .pmg__st.is-run::after { animation-play-state: paused; }
  @keyframes pmg-fill { to { transform: scaleX(1); } }
  @media (hover: hover) and (pointer: fine) { .pmg__st:not(.is-on):hover { border-color: var(--lav); } .pmg__st:not(.is-on):hover .pmg__st-t b { color: var(--ink); } }
  .pmg__st:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
  .pmg--steps .pmg__line { margin: 24px 0 0; padding: 0 16px; max-width: 34rem; font: 500 16px/1.55 Manrope, Arial, sans-serif; color: var(--ink); text-wrap: pretty; }
  .pmg--steps .pmg__ctas { margin: 16px 0 0; padding: 0 16px; }
  @media (min-width: 900px) {
    .pmg--steps .pmg__split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 48px; }
    .pmg--steps .pmg__tour .hxt__steps, .pmg--steps .pmg__tour .hxt__cap { display: none !important; }
    .pmg--steps .pmg__tour .hxt__bar { justify-content: flex-end; }
    .pmg--steps .pmg__tour .hxt--multi .hxt__scr { margin-left: 0; }
  }
  @media (max-width: 899px) {
    .pmg--steps .pmg__steps { display: none; }
    .pmg--steps .pmg__tour { order: -1; }
    .pmg--steps .pmg__line, .pmg--steps .pmg__ctas { padding: 0; margin-left: auto; margin-right: auto; }
    .pmg--steps .pmg__line { margin-top: 0; text-align: center; }
  }
}
/* a multi-screen tour, expanded: each screen whole, one after the other, named */
.pmg__scr + .pmg__scr { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--lav); }
.pmg__scr-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 12px; font: 500 14px/1.3 Manrope, Arial, sans-serif; color: var(--slate); }
.pmg__scr-h img { flex: none; width: 20px; height: 20px; border-radius: 50%; }
.pmg__scr-h b { font: 700 16px/1.3 Manrope, Arial, sans-serif; color: var(--ink); }
@media (forced-colors: active) { .pmg__st.is-on { outline: 2px solid Highlight; } .pmg__st::after { background: Highlight; } }
/* a multi-screen tour's control row keeps one line (tour.css); with "Click to expand" in it, it may wrap so the button takes its own row on phones */
.pmg__tour .hxt--multi .hxt__bar--x { flex-wrap: wrap !important; }
/* reduced motion, wide screens: the stops sit beside the still screen as a static list numbered like its markers (no buttons, nothing moves);
   the tour's own legend (and the multi tour's still captions) stay for screen readers only, so nothing is said twice on screen */
.pmg__legend { display: none; }
@media (prefers-reduced-motion: reduce) and (min-width: 900px) {
  .pmg--steps .pmg__split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 48px; }
  .pmg--steps .pmg__legend { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
  .pmg__legend > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 4px 12px; margin: 0; padding: 14px 20px 14px 16px; }
  .pmg__legend .pmg__st-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font: 800 13px/1 Manrope, Arial, sans-serif; font-variant-numeric: tabular-nums; }
  .pmg__legend .pmg__st-t { display: block; min-width: 0; padding-top: 2px; }
  .pmg__legend b { display: block; font: 700 19px/1.25 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; color: var(--ink); text-wrap: balance; }
  .pmg__legend small { display: block; margin-top: 4px; font: 500 14px/1.45 Manrope, Arial, sans-serif; color: var(--slate); text-wrap: pretty; }
  .pmg--steps .pmg__line { margin: 24px 0 0; padding: 0 16px; max-width: 34rem; }
  .pmg--steps .pmg__ctas { margin: 16px 0 0; padding: 0 16px; }
  .pmg--steps .pmg__tour .hxt:not(.hxt--still) .hxt__legend, .pmg--steps .pmg__tour .hxt__still > p > span { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* reduced motion: nothing plays, so the tour's pause button has nothing to pause (hai-pause.css showed it beside "Click to expand") */
@media (prefers-reduced-motion: reduce) { .pmg__tour .hxt__pause { display: none !important; } }