/* Block 2 · platform: the selected product on the left (sticky, the wider column),
   every product as an equal tile in one block on the right, grouped into software, hardware and
   services. Uses the tokens of hero-story.css. */
.blk--platform .blk__head { min-height: 0; }
.plat { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; margin-top: 56px; }

/* Group mark + name, shared with the product pages */
.pzone__k { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); }
.pzone__d { font-size: 13.5px; color: var(--text-dim); }
.pzone__ic { width: 11px; height: 11px; border-radius: 3px; align-self: center; flex: none; }
.pzone__ic--sw { background: linear-gradient(135deg, var(--cyan), var(--violet)); }
.pzone__ic--hw { background: var(--violet); border-radius: 50%; }
.pzone__ic--sv { background: #fff; border: 2px solid var(--violet); border-radius: 50%; }

/* Left: the selected product */
.pdet {
  position: sticky; top: calc(var(--nav-h) + 24px); overflow: hidden; border-radius: 22px; background: #fff;
  border: 1px solid var(--border-strong); box-shadow: 0 30px 60px -48px rgba(10, 11, 16, .35);
}
.pdet__icon { padding: 34px 40px 0; }
.pdet__icon .pi { width: 64px; height: 64px; }
.pdet__icon .pi [class*="an-"] { animation-play-state: running; }
.pdet__body { display: grid; gap: 12px; padding: 22px 40px 36px; }
.pdet__icon, .pdet__body > * { transition: opacity .08s ease, transform .08s ease; }
.pdet.is-out .pdet__icon, .pdet.is-out .pdet__body > * { opacity: 0; transform: translateY(6px); }
.pdet__tag { font-size: 13px; font-weight: 600; color: var(--violet-ink); }
.pdet__title { margin: 0; font-size: clamp(28px, 2.4vw, 40px); line-height: 1.12; letter-spacing: -0.025em; font-weight: 600; }
.pdet__lead { margin: 0; max-width: 34em; font-size: 17px; line-height: 1.55; color: var(--text-muted); }
.pdet__pts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.pdet__pts li { position: relative; padding-left: 18px; font-size: 15.5px; line-height: 1.45; color: var(--text); }
.pdet__pts li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
.pdet__alt { margin: 4px 0 0; padding-top: 12px; border-top: 1px dashed var(--border-strong); font-size: 13px; color: var(--text-dim); }
.pdet__alt b { font-weight: 600; color: var(--cyan-ink); margin-right: 6px; }
.pdet__cta { display: flex; gap: 10px; margin-top: 8px; }

/* Right: one block with every product */
.pbox { position: relative; display: grid; gap: 0; padding: 8px 24px; border-radius: 22px; background: var(--bg-soft); border: 1px solid var(--border-strong); }
.pgrp { padding: 20px 0 22px; }
.pgrp + .pgrp { border-top: 1px solid var(--border-strong); }
.pgrp__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.ptiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }

.ptile {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 3px;
  align-items: center; padding: 11px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--border-strong);
  cursor: pointer; transition: border-color .2s ease, box-shadow .25s ease, transform .25s cubic-bezier(.16,1,.3,1), background .2s ease;
}
.ptile .pi { grid-row: span 2; width: 36px; height: 36px; }
.ptile__t { font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--text); }
.ptile__d { font-size: 12.5px; line-height: 1.4; color: var(--text-dim); }
.ptile:hover { transform: translateY(-2px); border-color: rgba(10, 11, 16, .3); box-shadow: 0 16px 30px -22px rgba(10, 11, 16, .35); }
.ptile:hover .pi [class*="an-"] { animation-duration: 1.6s; }
.ptile[aria-pressed="true"] { border-color: var(--violet); background: #fff; box-shadow: 0 0 0 3px rgba(124, 92, 255, .12); }
.ptile[aria-pressed="true"] .ptile__t { color: var(--violet-ink); }
.ptile[aria-pressed="true"] .pi [class*="an-"] { animation-play-state: running; }
.ptile:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

.blk--platform .pfoot { height: 130px; }

@media (max-width: 1100px) {
  .plat { grid-template-columns: 1fr; }
  .pdet { position: static; }
}
@media (max-width: 640px) {
  .ptiles { grid-template-columns: 1fr; }
  .pbox { padding: 4px 14px; }
}


/* Tour: the thread inside the block. A line down the left edge with a node per
   tile; the pulse (--py) moves top to bottom, the line above it fills in, and a
   short tick joins the pulse to its tile. */
.pbox { padding-left: 46px; }
.prail { position: absolute; left: 22px; top: 0; bottom: 0; width: 2px; pointer-events: none; --py: 0px; }
.prail__line, .prail__fill { position: absolute; left: 0; top: 0; width: 2px; }
.prail__line { bottom: 0; background: rgba(124, 92, 255, .22); }
.prail__fill { height: var(--py); background: linear-gradient(180deg, var(--violet) 0%, var(--cyan) 100%); transition: height var(--trip, .45s) cubic-bezier(.65, 0, .35, 1); }
.prail__node { position: absolute; left: 1px; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff;
  border: 1.5px solid rgba(124, 92, 255, .4); transition: background .3s ease, border-color .3s ease, transform .3s ease; }
.prail__node.is-past { background: var(--violet); border-color: var(--violet); transform: scale(.75); }
.prail__node.is-on { opacity: 0; }
.prail__pk { position: absolute; left: 1px; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0 18%, var(--cyan) 30%, var(--violet) 75%);
  box-shadow: 0 0 0 4px rgba(124, 92, 255, .16), 0 0 18px 2px rgba(0, 212, 255, .55);
  transform: translateY(var(--py)); transition: transform var(--trip, .45s) cubic-bezier(.65, 0, .35, 1); }
/* while it waits at a tile, a ring breathes out of it */
.prail__pk::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--cyan); opacity: 0; }
.is-touring:not(.is-held) .prail__pk::after { animation: prail-ring 1.8s ease-out infinite; }
@keyframes prail-ring { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.prail.is-instant .prail__pk, .prail.is-instant .prail__fill { transition: none; }

/* tick from the line to the selected tile */
.ptile::before { content: ''; position: absolute; left: -24px; top: 50%; width: 24px; height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, var(--cyan), var(--violet)); transform: scaleX(0); transform-origin: left; transition: transform .18s ease; }
.is-touring .ptile::before { transition-delay: .28s; }
.ptile[aria-pressed="true"]::before { transform: scaleX(1); }
.is-touring .ptile[aria-pressed="true"] { transition-delay: .25s; }

@media (prefers-reduced-motion: reduce) {
  .prail__pk, .prail__fill, .ptile::before { transition: none; }
}

/* Prism AI, the one AI product: same size as the other tiles,
   but the only one dressed as AI. Slowly drifting spectrum glow, a gradient edge, a
   gradient name and a light sweep every few seconds. Everything else on the page stays plain. */
@property --pa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.ptile--core, .ptile--core:hover, .ptile--core[aria-pressed="true"] {
  isolation: isolate; border: 1.5px solid transparent;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(43, 196, 230, .16), transparent 55%) padding-box,
    radial-gradient(120% 160% at 100% 100%, rgba(242, 162, 58, .14), transparent 55%) padding-box,
    linear-gradient(#FAF9FF, #FAF9FF) padding-box,
    conic-gradient(from var(--pa), #2BC4E6, #4C6FF0, #8E6CF5, #F2A23A, #2BC4E6) border-box;
  animation: pcore-spin 8s linear infinite;
}
.ptile--core { box-shadow: 0 14px 30px -22px rgba(76, 111, 240, .55); }
.ptile--core[aria-pressed="true"] { box-shadow: 0 0 0 3px rgba(124, 92, 255, .14), 0 18px 34px -22px rgba(76, 111, 240, .65); }
@keyframes pcore-spin { to { --pa: 360deg; } }
.ptile--core .ptile__t, .ptile--core[aria-pressed="true"] .ptile__t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ptile--core .ptile__nm { background: linear-gradient(90deg, #0089AD, #5A3FE0 55%, #B4620E); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ptile--core .pi { position: relative; }
.ptile--core .pi::after { content: ''; position: absolute; inset: -8px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(43, 196, 230, .25), transparent); animation: pcore-pulse 3.2s ease-in-out infinite; }
@keyframes pcore-pulse { 50% { transform: scale(1.25); opacity: .55; } }
/* glow and sweep live in their own clipped layer under the text, so the tile itself is not
   clipped and keeps its tick to the rail */
.ptile__shine { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; }
.ptile__shine::before { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent); animation: pcore-shine 6s ease-in-out infinite; }
/* violet glow drifting behind the content */
.ptile__shine::after { content: ''; position: absolute; width: 60%; height: 220%; top: -60%; left: 10%;
  background: radial-gradient(closest-side, rgba(142, 108, 245, .22), transparent); animation: pcore-drift 9s ease-in-out infinite alternate; }
@keyframes pcore-drift { from { transform: translateX(-30%); } to { transform: translateX(90%); } }
@keyframes pcore-shine { 0%, 70% { transform: translateX(0); } 100% { transform: translateX(400%); } }
@media (prefers-reduced-motion: reduce) {
  .ptile--core, .ptile--core .pi::after, .ptile__shine::before, .ptile__shine::after { animation: none; }
}
.prail__node.is-core { border-radius: 2px; transform: rotate(45deg); }
.prail__node.is-core.is-past { transform: rotate(45deg) scale(.8); }