/* ==========================================================================
   PRODUCTS — heading, three product showcase cards, family summary.
   ========================================================================== */
.product-showcase { background: linear-gradient(180deg, #fbfcff 0%, #f8faff 100%); color: #111b3e; }

/* --- Heading ------------------------------------------------------------- */
.showcase-heading { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 72px; align-items: center; margin-bottom: 34px; }
.showcase-heading .kicker { display: flex; align-items: center; gap: 16px; color: #2563df; }
.showcase-heading .kicker::after { content: ''; height: 1px; width: 40px; background: #8392cf; }
.showcase-heading h2 { max-width: 780px; font-size: clamp(34px, 3.3vw, 52px); line-height: 1.04; letter-spacing: -.045em; color: #101735; margin: 16px 0; }
.showcase-heading p { font-size: 17px; line-height: 1.6; color: #5b6682; max-width: 68ch; margin: 0; }
.showcase-heading aside { border-left: 1px solid #8996d2; padding-left: 30px; }
.showcase-heading aside strong { display: block; font-size: 12px; line-height: 1.8; text-transform: uppercase; letter-spacing: .12em; color: #455174; }
.showcase-heading aside p { font-size: 14px; margin: 16px 0; }
.showcase-heading aside a { display: flex; align-items: center; gap: 16px; font-size: 14px; font-weight: 600; color: #111b3e; text-decoration: none; }
.showcase-heading aside a svg { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: #edf3ff; color: #2563df; transition: transform 180ms var(--ease-out), background-color 180ms ease; }
.showcase-heading aside a:hover svg { transform: translateX(3px); background: #e3edff; }

/* --- Product cards ---------------------------------------------------------
   Layers, back to front: base gradient (.pc-body) → blobs + waves (.pc-bg) →
   floating dashboard (.pc-stage) → ambient glow / cursor sheen → copy + CTA.
   Every dashboard dimension is in em, and the stage's font-size is tied to the
   card's width (cqi), so the miniature UI scales as one piece at any size.
   Motion wrappers are split so transforms never fight:
   .pc-card (reveal, hover lift) › .pc-float (idle bob) › .pc-tilt (pointer
   tilt + hover lift) › scene (static composition).                          */
.pc-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.pc-cards { --pc-ease: cubic-bezier(.22, 1, .36, 1); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.pc-card {
  --accent: #2563eb; --accent-rgb: 37 99 235; --ink: #0b1533; --muted: #5b6682;
  --base: linear-gradient(160deg, #f9fbff 0%, #f1f6ff 55%, #eaf2ff 100%);
  position: relative; min-width: 0; container: pc / inline-size;
  border-radius: 20px;
  transition: transform 480ms var(--pc-ease);
}
.pc-card--books { --accent: #16a34a; --accent-rgb: 22 163 74; --base: linear-gradient(160deg, #fbfefc 0%, #f2fbf6 55%, #ecf9f1 100%); }
.pc-card--monitoring { --accent: #7c3aed; --accent-rgb: 124 58 237; --base: linear-gradient(160deg, #fdfcff 0%, #f6f2ff 55%, #f1ebff 100%); }

.pc-body {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: clamp(500px, 107cqi, 660px);
  padding: clamp(20px, 4.8cqi, 28px);
  border-radius: inherit;
  background: var(--base);
  border: 1px solid rgb(var(--accent-rgb) / 14%);
  box-shadow: 0 1px 2px rgb(15 23 42 / 4%), 0 14px 34px -14px rgb(15 23 42 / 14%), inset 0 1px 0 rgb(255 255 255 / 90%);
  transition: box-shadow 480ms var(--pc-ease), border-color 480ms var(--pc-ease);
}
/* Ambient accent glow (top-right) — strengthens on hover. */
.pc-body::after {
  content: ''; position: absolute; z-index: 0; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(60% 50% at 88% 18%, rgb(var(--accent-rgb) / 16%), transparent 70%);
  opacity: .6; transition: opacity 480ms var(--pc-ease);
}

/* Background art */
.pc-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; transition: transform 900ms var(--pc-ease); }
.pc-blob { position: absolute; border-radius: 50%; will-change: transform; }
.pc-blob--a { width: 85%; height: 95%; right: -28%; top: 4%; background: radial-gradient(closest-side, rgb(var(--accent-rgb) / 24%), rgb(var(--accent-rgb) / 8%) 55%, transparent); animation: pc-drift-a 11s ease-in-out infinite alternate; }
.pc-blob--b { width: 70%; height: 60%; right: -10%; bottom: -18%; animation: pc-drift-b 9s ease-in-out infinite alternate; }
.pc-card--people .pc-blob--b { background: radial-gradient(closest-side, rgb(56 189 248 / 26%), transparent); }
.pc-card--books .pc-blob--b { background: radial-gradient(closest-side, rgb(250 204 21 / 26%), transparent); }
.pc-card--books .pc-blob--a { background: radial-gradient(closest-side, rgb(52 211 153 / 30%), rgb(110 231 183 / 12%) 55%, transparent); }
.pc-card--monitoring .pc-blob--b { background: radial-gradient(closest-side, rgb(232 121 249 / 18%), transparent); }
.pc-wave { position: absolute; width: 72%; height: 92%; right: -8%; top: 8%; opacity: .9; filter: blur(10px); animation: pc-wave 12s ease-in-out infinite alternate; will-change: transform; }
/* Cursor sheen — a soft light that follows the pointer (set by product-showcase.js). */
.pc-sheen { position: absolute; inset: 0; opacity: 0; background: radial-gradient(320px circle at var(--mx, 70%) var(--my, 30%), rgb(255 255 255 / 55%), transparent 60%); transition: opacity 400ms ease; }

@keyframes pc-drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-6%, 4%, 0) scale(1.06); } }
@keyframes pc-drift-b { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-8%, -6%, 0) scale(1.08); } }
@keyframes pc-wave { from { transform: translate3d(0, 0, 0) rotate(0); } to { transform: translate3d(-3%, 3%, 0) rotate(-4deg); } }

/* Top row */
.pc-top { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: clamp(16px, 4.2cqi, 24px); }
.pc-mark {
  display: grid; place-items: center; width: clamp(50px, 11.6cqi, 64px); aspect-ratio: 1; border-radius: 16px; color: #fff;
  background: linear-gradient(150deg, #4f8cff 0%, #2563eb 55%, #1d4ed8 100%);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 45%), inset 0 -2px 6px rgb(0 0 0 / 12%), 0 10px 22px -8px rgb(var(--accent-rgb) / 60%);
}
.pc-card--books .pc-mark { background: linear-gradient(150deg, #34d399 0%, #16a34a 55%, #15803d 100%); }
.pc-card--monitoring .pc-mark { background: linear-gradient(150deg, #a78bfa 0%, #8b5cf6 50%, #6d28d9 100%); }
.pc-mark svg { width: 46%; height: 46%; }

.pc-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; color: #3a4562;
  background: rgb(241 244 250 / 85%); border: 1px solid rgb(15 23 42 / 7%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%);
}
.pc-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #3a4562; }
.pc-badge--live { color: #166534; background: rgb(236 253 243 / 92%); border-color: rgb(22 163 74 / 16%); }
.pc-badge--live::before { background: #22c55e; box-shadow: 0 0 0 0 rgb(34 197 94 / 45%); animation: pc-ping 2.6s ease-out infinite; }
@keyframes pc-ping { 0% { box-shadow: 0 0 0 0 rgb(34 197 94 / 45%); } 70%, 100% { box-shadow: 0 0 0 6px rgb(34 197 94 / 0%); } }

/* Copy */
.pc-copy { position: relative; z-index: 3; width: 48%; }
.pc-copy h3 { margin: 0 0 12px; font-size: clamp(20px, 5.15cqi, 30px); font-weight: 700; line-height: 1.12; letter-spacing: -.04em; color: var(--ink); white-space: nowrap; }
.pc-copy > p { margin: 0 0 clamp(18px, 5cqi, 30px); font-size: clamp(12.5px, 2.5cqi, 14px); line-height: 1.6; color: var(--muted); }
.pc-features { display: grid; gap: clamp(12px, 3.1cqi, 17px); margin: 0; padding: 0; list-style: none; }
.pc-features li { display: flex; align-items: center; gap: 12px; font-size: clamp(12.5px, 2.65cqi, 14.5px); line-height: 1.35; color: #3c4763; }
.pc-features svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--accent); }

/* CTA */
.pc-cta {
  position: relative; z-index: 3; align-self: flex-start; margin-top: auto;
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 16px;
  border-radius: 11px; border: 1.5px solid rgb(var(--accent-rgb) / 70%);
  background: rgb(255 255 255 / 70%); color: var(--ink);
  font-size: clamp(14px, 2.9cqi, 16px); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: transform 320ms var(--pc-ease), box-shadow 320ms var(--pc-ease), background-color 320ms ease, border-color 320ms ease;
}
.pc-card--monitoring .pc-cta { color: #4c1d95; }
.pc-cta svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent); transition: transform 320ms var(--pc-ease); }
.pc-cta--solid { color: #fff; border-color: transparent; background: linear-gradient(180deg, #2f6df0, #1d58e0); box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 8px 18px -8px rgb(37 99 235 / 60%); }
.pc-cta--solid svg { color: currentColor; }
.pc-cta:hover { transform: translateY(-2px); background: #fff; border-color: var(--accent); box-shadow: 0 10px 22px -12px rgb(var(--accent-rgb) / 50%); }
.pc-cta--solid:hover { background: linear-gradient(180deg, #3a77f5, #2160e8); box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 14px 26px -10px rgb(37 99 235 / 65%); }
.pc-cta:hover svg { transform: translateX(5px); }
.pc-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Stage */
.pc-stage { position: absolute; inset: 0; z-index: 2; pointer-events: none; font-size: clamp(6.5px, 1.86cqi, 12px); color: #17203c; }
.pc-float { position: absolute; inset: 0; animation: pc-float 5s ease-in-out infinite; will-change: transform; }
.pc-card--books .pc-float { animation-duration: 5.6s; animation-delay: -1.8s; }
.pc-card--monitoring .pc-float { animation-duration: 5.2s; animation-delay: -3.4s; }
@keyframes pc-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -5px, 0); } }
.pc-tilt {
  --rx: 0deg; --ry: 0deg; --lift: 0px; --sc: 1;
  position: absolute; inset: 0; transform-origin: 75% 50%;
  transform: perspective(1400px) translate3d(0, var(--lift), 0) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--sc));
  transition: transform 520ms var(--pc-ease);
}

.pc-glass {
  position: absolute; border-radius: 1.4em;
  background: linear-gradient(180deg, rgb(255 255 255 / 94%), rgb(255 255 255 / 84%));
  border: 1px solid rgb(255 255 255 / 90%);
  box-shadow: 0 0 0 1px rgb(15 23 42 / 4%), 0 1.2em 2.8em -1em rgb(30 45 90 / 22%), 0 .3em .8em rgb(30 45 90 / 6%), inset 0 1px 0 #fff;
}
.pc-pill { display: inline-flex; align-items: center; gap: .3em; padding: .3em .65em; border-radius: 999px; font-size: .95em; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.pc-pill--up { color: #15803d; background: #e3f8ec; }
.pc-pill--violet { color: #15803d; background: #e8f8ef; }
.pc-pill--live { color: #15803d; background: #e3f8ec; font-size: .78em; padding: .3em .7em; }
.pc-pill--live::before { content: ''; width: .55em; height: .55em; border-radius: 50%; background: #22c55e; animation: pc-blink 2.4s ease-in-out infinite; }
@keyframes pc-blink { 50% { opacity: .35; } }
.pc-tag { font-style: normal; font-size: .78em; font-weight: 600; padding: .32em .7em; border-radius: .5em; white-space: nowrap; }
.pc-tag--ok { color: #15803d; background: #e5f8ed; }
.pc-tag--leave { color: #c2410c; background: #fff1e0; }

/* People dashboard */
.pp-scene { position: absolute; right: .2em; top: 7.8em; width: 27em; height: 40em; transform: perspective(110em) rotateY(-16deg) rotateX(5deg) rotateZ(3.5deg); transform-origin: 0 50%; }
.pp-window { left: 0; top: 0; width: 26em; height: 32em; display: grid; grid-template-columns: 8.4em 1fr; overflow: hidden; }
.pp-side { padding: 1.3em .7em; border-right: 1px solid #eef1f7; background: rgb(248 250 255 / 70%); }
.pp-logo { display: flex; align-items: center; gap: .45em; padding: 0 .4em 1.1em; font-size: 1.3em; font-weight: 700; letter-spacing: -.03em; color: #111b3e; }
.pp-logo img { width: 1.3em; height: 1.3em; }
.pp-side ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .25em; }
.pp-side li { display: flex; align-items: center; gap: .6em; padding: .62em .6em; border-radius: .6em; font-size: .92em; color: #5b6682; }
.pp-side li svg { width: 1.25em; height: 1.25em; flex-shrink: 0; }
.pp-side li.is-active { color: #2563eb; font-weight: 600; background: #e8f0ff; }
.pp-main { padding: 1.3em 1.2em; }
.pp-search { display: flex; align-items: center; gap: .6em; height: 2.9em; padding: 0 .9em; border-radius: .8em; border: 1px solid #e6ebf5; background: #f8faff; font-size: .95em; color: #8a94ad; }
.pp-search svg { width: 1.2em; height: 1.2em; }
.pp-kpi { margin-top: 1.5em; }
.pp-kpi small { display: block; font-size: 1.02em; font-weight: 600; color: #1e2a4a; }
.pp-kpi-row { display: flex; align-items: center; gap: .7em; margin-top: .35em; }
.pp-kpi-row b { font-size: 3.1em; font-weight: 700; letter-spacing: -.04em; line-height: 1; color: #0b1533; font-variant-numeric: tabular-nums; }
.pp-bars { display: flex; align-items: flex-end; gap: .55em; height: 5.2em; margin-top: 1em; padding-bottom: .1em; border-bottom: 1px solid #e8edf6; }
.pp-bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: .3em .3em .1em .1em; background: linear-gradient(180deg, #2563eb, #93c5fd); transform-origin: bottom; }
.pp-list { left: 6.6em; top: 19.6em; width: 19em; padding: .5em 1em; }
.pp-row { display: grid; grid-template-columns: 2.9em 1fr auto; align-items: center; gap: .75em; padding: .62em 0; }
.pp-row + .pp-row { border-top: 1px solid #eef1f7; }
.pp-av { display: block; width: 2.9em; height: 2.9em; border-radius: 50%; box-shadow: 0 0 0 .15em #fff, 0 .2em .5em rgb(15 23 42 / 12%); }
.pp-row b { display: block; font-size: 1em; font-weight: 650; color: #111b3e; white-space: nowrap; }
.pp-row small { display: block; font-size: .8em; color: #7a849c; white-space: nowrap; }

/* Books dashboard */
.bk-scene { position: absolute; right: 1.4em; top: 12.6em; width: 23.5em; }
.bk-expense { position: relative; width: 22em; margin-left: auto; padding: 1.5em 1.5em 1.1em; transform: perspective(90em) rotateY(-8deg) rotateZ(-3.5deg); }
.bk-expense > small { display: block; font-size: .95em; color: #5b6682; }
.bk-value { display: flex; align-items: center; gap: .6em; margin-top: .3em; }
.bk-value b { font-size: 2.05em; font-weight: 700; letter-spacing: -.035em; color: #0b1533; }
.bk-chart { position: relative; height: 10.5em; margin-top: 1.2em; background: repeating-linear-gradient(180deg, transparent 0 calc(25% - 1px), #eef2f0 calc(25% - 1px) 25%); border-bottom: 1px solid #e3e9e6; }
.bk-bars { position: absolute; inset: 0 .4em; display: flex; align-items: flex-end; justify-content: space-between; }
.bk-bars i { width: 1.9em; height: calc(var(--h) * 100%); border-radius: .4em .4em .1em .1em; background: linear-gradient(180deg, #22c55e, #86efac); box-shadow: inset 0 1px 0 rgb(255 255 255 / 40%); transform-origin: bottom; }
.bk-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bk-line path { fill: none; stroke: #f5b42a; stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 2px 3px rgb(245 180 42 / 35%)); }
.bk-months { display: flex; justify-content: space-between; padding: .6em .2em 0; font-size: .82em; color: #7a849c; }
.bk-summary { position: relative; width: 22.6em; margin: 1.4em 0 0 -.4em; padding: .7em 1.3em; transform: perspective(90em) rotateY(-6deg) rotateZ(-3deg); }
.bk-row { display: grid; grid-template-columns: 2.7em 1fr auto; align-items: center; gap: .9em; padding: .7em 0; }
.bk-row + .bk-row { border-top: 1px solid #eef2f0; }
.bk-row b { display: block; font-size: 1.1em; font-weight: 650; color: #111b3e; }
.bk-row small { display: block; font-size: .85em; color: #7a849c; }
.bk-row > i { font-style: normal; font-size: 1.6em; color: #4b5563; line-height: 1; }
.bk-ico { display: grid; place-items: center; width: 2.7em; height: 2.7em; border-radius: 50%; color: #16a34a; background: #e5f7ec; }
.bk-ico svg { width: 1.35em; height: 1.35em; }
.bk-ico--done { color: #fff; background: linear-gradient(150deg, #34d399, #16a34a); box-shadow: 0 .3em .8em -.2em rgb(22 163 74 / 55%); }

/* Monitoring dashboard */
.mn-scene { position: absolute; right: 1.1em; top: 7.4em; width: 25.2em; }
.mn-status, .mn-trend { position: relative; padding: 1.25em 1.3em 1.1em; }
.mn-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7em; }
.mn-head b { font-size: 1.08em; font-weight: 700; color: #111b3e; }
.mn-row { display: grid; grid-template-columns: 2.5em minmax(0, 1fr) 4.2em auto; align-items: center; gap: .7em; padding: .55em 0; }
.mn-ico { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: .7em; color: var(--c); background: var(--t); }
.mn-ico svg { width: 1.3em; height: 1.3em; }
.mn-name b { display: block; font-size: .92em; font-weight: 650; color: #111b3e; white-space: nowrap; }
.mn-name small { display: block; font-size: .78em; color: #7a849c; }
.mn-spark { width: 4.2em; height: 1.7em; overflow: visible; }
.mn-spark path { fill: none; stroke: var(--c); stroke-width: 1.6; stroke-linecap: round; }
.mn-ok { display: inline-flex; align-items: center; gap: .45em; font-size: .82em; color: #374151; white-space: nowrap; }
.mn-ok::before { content: ''; width: .62em; height: .62em; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 .2em rgb(34 197 94 / 15%); }
.mn-foot { display: flex; align-items: center; gap: .6em; margin-top: .6em; padding: .7em .9em; border-radius: .7em; background: #ecfbf2; color: #15803d; font-size: .85em; font-weight: 600; }
.mn-foot svg { width: 1.4em; height: 1.4em; color: #22c55e; flex-shrink: 0; }
.mn-trend { margin-top: .9em; padding-bottom: .9em; }
.mn-chart { display: block; width: 100%; height: 7.6em; overflow: visible; }
.mn-grid { fill: none; stroke: #eeebf7; stroke-width: 1; }
.mn-line, .mn-glint { fill: none; stroke-linecap: round; }
.mn-line { stroke: #7c3aed; stroke-width: 2.2; }
.mn-glint { stroke: #e9ddff; stroke-width: 3; stroke-dasharray: .06 .94; opacity: 0; }
.mn-days { display: flex; justify-content: space-between; padding-top: .5em; font-size: .8em; color: #7a849c; }

/* --- Hover (pointer devices only) ---------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .pc-card:hover { transform: translateY(-7px); }
  .pc-card:hover .pc-body { border-color: rgb(var(--accent-rgb) / 30%); box-shadow: 0 2px 4px rgb(15 23 42 / 5%), 0 30px 60px -24px rgb(var(--accent-rgb) / 32%), 0 18px 36px -18px rgb(15 23 42 / 16%), inset 0 1px 0 #fff; }
  .pc-card:hover .pc-body::after { opacity: 1; }
  .pc-card:hover .pc-bg { transform: translate3d(-2%, -1.5%, 0) scale(1.03); }
  .pc-card:hover .pc-sheen { opacity: 1; }
  .pc-card:hover .pc-tilt { --lift: -8px; --sc: 1.015; }
  .pc-card:hover .pc-float { animation-play-state: paused; }
  .pc-card.is-tilting .pc-tilt { transition-duration: 260ms; }
}

/* --- Entrance -------------------------------------------------------------
   Hidden only when JS is present to reveal it. The reveal uses animation with
   `backwards` fill, so once it finishes the hover transforms take over cleanly. */
.js .pc-cards:not(.is-in) .pc-card { opacity: 0; transform: translateY(35px); }
.pc-cards.is-in .pc-card { animation: pc-rise 760ms var(--pc-ease) backwards; }
.pc-cards.is-in .pc-card--books { animation-delay: 120ms; }
.pc-cards.is-in .pc-card--monitoring { animation-delay: 240ms; }
@keyframes pc-rise { from { opacity: 0; transform: translateY(35px); } to { opacity: 1; transform: none; } }

/* Dashboard details settle in after their card. */
.pc-cards.is-in .pp-bars i, .pc-cards.is-in .bk-bars i { animation: pc-bar 820ms var(--pc-ease) backwards; animation-delay: calc(var(--card-d, 0ms) + 420ms + var(--d) * 70ms); }
.pc-cards.is-in .pp-row { animation: pc-slide 640ms var(--pc-ease) backwards; animation-delay: calc(560ms + var(--d) * 90ms); }
.pc-cards.is-in .pp-list { animation: pc-pop 720ms var(--pc-ease) 380ms backwards; }
.pc-card--books { --card-d: 120ms; }
.pc-card--monitoring { --card-d: 240ms; }
.pc-cards.is-in .bk-line path { stroke-dasharray: 1; animation: pc-draw 1300ms var(--pc-ease) 900ms backwards; }
.pc-cards.is-in .bk-summary { animation: pc-pop 720ms var(--pc-ease) 520ms backwards; }
.pc-cards.is-in .bk-tick { stroke-dasharray: 1; animation: pc-draw 600ms var(--pc-ease) 1150ms backwards; }
.pc-cards.is-in .mn-row { animation: pc-slide 600ms var(--pc-ease) backwards; animation-delay: calc(560ms + var(--d) * 80ms); }
.pc-cards.is-in .mn-spark path { stroke-dasharray: 1; animation: pc-draw 1000ms var(--pc-ease) backwards; animation-delay: calc(700ms + var(--d) * 110ms); }
.pc-cards.is-in .mn-trend { animation: pc-pop 720ms var(--pc-ease) 600ms backwards; }
.pc-cards.is-in .mn-line { stroke-dasharray: 1; animation: pc-draw 1500ms var(--pc-ease) 900ms backwards; }
.pc-cards.is-in .mn-area { animation: pc-fade 1000ms ease 1300ms backwards; }
.pc-cards.is-in .mn-glint { animation: pc-glint 5.5s ease-in-out 2.6s infinite; }
.mn-ok::before { animation: pc-soft 3s ease-in-out infinite; animation-delay: calc(var(--d) * .4s); }

@keyframes pc-bar { from { transform: scaleY(.05); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes pc-slide { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes pc-pop { from { opacity: 0; transform: translateY(14px); } }
@keyframes pc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pc-fade { from { opacity: 0; } }
@keyframes pc-glint { 0% { stroke-dashoffset: 1.06; opacity: 0; } 12% { opacity: .95; } 70% { opacity: .95; } 85%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes pc-soft { 50% { box-shadow: 0 0 0 .35em rgb(34 197 94 / 6%); } }
/* bk-summary/pp-list carry static transforms; the pop keyframe omits `to` so
   it lands on whatever transform the element already has. */

/* --- Family summary ------------------------------------------------------ */
.showcase-summary { display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: center; gap: 22px; border-top: 1px solid #d7dfef; padding: 18px 16px 0; margin-top: 32px; }
.showcase-summary > div { display: flex; align-items: center; gap: 16px; }
.showcase-summary > div + div { border-left: 1px solid #d7dfef; padding-left: 24px; }
.showcase-summary-icon { display: grid; place-items: center; width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; background: #edf1ff; color: #2563df; }
.showcase-summary-icon svg { width: 28px; height: 28px; }
.showcase-infinity { font-size: 36px; }
.showcase-summary strong { font-size: 38px; line-height: 1; color: #111b3e; }
.showcase-summary > div > span:last-child { font-size: 14px; color: #56627e; line-height: 1.5; }
.showcase-summary > p { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: #7a88b4; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1350px) { .showcase-summary { grid-template-columns: repeat(3, 1fr); } .showcase-summary > p { grid-column: 1 / -1; text-align: center; } }
@media (max-width: 1199px) {
  .pc-cards { grid-template-columns: minmax(0, 1fr); max-width: 780px; margin-inline: auto; gap: 22px; }
  .pc-body { min-height: clamp(500px, 80cqi, 600px); }
}
@media (max-width: 1100px) { .showcase-heading { grid-template-columns: 1fr; gap: 24px; } .showcase-heading aside { max-width: 420px; } }
@media (max-width: 599px) {
  .showcase-heading p { font-size: 15px; }
  .showcase-summary { grid-template-columns: 1fr; gap: 20px; padding-inline: 0; }
  .showcase-summary > div + div { border-left: 0; padding: 0; }
  .showcase-summary > p { text-align: left; }
}

/* Narrow single-column cards: dashboard drops below the copy, CTA follows it.
   (The desktop row always keeps the side-by-side composition.) */
@media (max-width: 1199px) {
@container pc (max-width: 560px) {
  .pc-body { min-height: 0; }
  .pc-copy { width: 100%; }
  .pc-copy h3 { white-space: normal; }
  .pc-copy > p { max-width: 46ch; }
  .pc-stage { position: relative; inset: auto; margin: 22px -6px 18px; font-size: clamp(7px, 3.05cqi, 12px); }
  .pc-float, .pc-tilt { position: relative; inset: auto; }
  .pc-card--people .pc-stage { height: 37em; }
  .pc-card--books .pc-stage { height: 34em; }
  .pc-card--monitoring .pc-stage { height: 46em; }
  .pp-scene { right: auto; left: 50%; top: 1em; margin-left: -14em; transform: perspective(110em) rotateY(-10deg) rotateX(4deg) rotateZ(2deg); }
  .bk-scene { right: auto; left: 50%; top: 1.4em; margin-left: -11.8em; }
  .mn-scene { right: auto; left: 50%; top: .5em; margin-left: -13.5em; }
  .pc-wave { width: 110%; right: -20%; top: 30%; height: 70%; }
  .pc-blob--a { top: 30%; height: 70%; width: 120%; }
  .pc-cta { width: 100%; justify-content: center; }
}
}

/* --- Reduced motion: content appears in place, nothing moves. ------------ */
@media (prefers-reduced-motion: reduce) {
  .pc-blob, .pc-wave, .pc-float, .pc-badge--live::before, .pc-pill--live::before, .mn-ok::before, .mn-glint { animation: none !important; }
  .js .pc-cards:not(.is-in) .pc-card { opacity: 1; transform: none; }
  .pc-cards.is-in .pc-card, .pc-cards.is-in .pc-card * { animation: none !important; }
  .pc-card, .pc-card:hover, .pc-cta:hover, .pc-cta:hover svg, .pc-card:hover .pc-bg, .showcase-heading aside a:hover svg { transform: none !important; }
  .pc-card:hover .pc-tilt { --lift: 0px; --sc: 1; }
  .pc-sheen { display: none; }
}