/* /product hero: the four screens from the page as one deck.
   Final state (no JS, reduced motion, phones) is the CSS default: a gentle arc of four cards.
   With motion (html.wow, set in <head>) on screens 760px and up, the deck starts stacked and
   tilted back, and product-hero.js scrubs one number per card, --p (0 = deck, 1 = arc), from
   scroll. All geometry lives here; transform + opacity only. */

@property --p { syntax: '<number>'; inherits: false; initial-value: 1; }

.ph-track { margin-top: clamp(40px, 4vw, 52px); text-align: left; }
.ph {
  --gap: 20px; --cols: 4; --rows: 1;
  --cx: calc((var(--cols) - 1) / 2); --cy: calc((var(--rows) - 1) / 2);
}
.ph-deck { list-style: none; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); }

/* Every card shares one vanishing point: the centre of the deck, expressed from its own cell */
.ph-item {
  --col: 0; --row: 0; --i: 0;
  position: relative; z-index: calc(10 - var(--i)); min-width: 0;
  perspective: 1700px;
  perspective-origin:
    calc((var(--cx) - var(--col)) * (100% + var(--gap)) + 50%)
    calc((var(--cy) - var(--row)) * (100% + var(--gap)) + 30%);
}
.ph-item:nth-child(2) { --i: 1; --col: 1; --ry: 3deg; }
.ph-item:nth-child(3) { --i: 2; --col: 2; --ry: -3deg; }
.ph-item:nth-child(4) { --i: 3; --col: 3; --ry: -9deg; }
.ph-item:nth-child(1) { --ry: 9deg; }

.ph-card {
  display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; border-radius: 16px;
  transform-origin: 50% 60%;
  transform:
    translate3d(
      calc((1 - var(--p)) * (var(--cx) - var(--col)) * (100% + var(--gap))),
      calc((1 - var(--p)) * ((var(--cy) - var(--row)) * (100% + var(--gap)) - 36px - var(--i) * 32px)),
      calc((1 - var(--p)) * var(--i) * -36px))
    rotateX(calc(4deg + (1 - var(--p)) * 50deg))
    rotateY(calc(var(--p) * var(--ry, 0deg)))
    rotateZ(calc((1 - var(--p)) * (var(--i) - var(--cx)) * 3.5deg))
    scale(calc(1 - (1 - var(--p)) * .1));
}

/* ---- The mini app windows (the page's .ax window, compact) ---- */
.ph-win {
  display: block; flex: 1 0 auto; border-radius: 14px; background: #0b0c0f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 70px -36px rgba(0,0,0,.95);
  transition: border-color .2s var(--ease);
}
.ph-win .ax-chrome { min-height: 36px; padding: 0 8px 0 12px; justify-content: space-between; gap: 8px; }
.ph-win .ax-dots { gap: 5px; }
.ph-win .ax-dots i { width: 8px; height: 8px; }
.ph-win .ax-sample { font-size: 11.5px; padding: 4px 8px; }
.ph-body { display: block; padding: 14px 14px 16px; min-height: 212px; font-size: 12.5px; color: var(--fg-2); }
.ph-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px !important; font-size: 14.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--fg); }
.ph-title small { font-size: 12px; font-weight: 400; color: var(--muted); }
.ph-rows { display: grid; gap: 7px; }
.ph-car { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-win .num.g { color: var(--st-g); }
.ph-win .num.r { color: var(--st-r); }
.ph-win b { font-weight: 600; }

.ph-sync { display: flex; align-items: center; gap: 8px; margin-bottom: 10px !important; padding: 5px 9px; border-radius: 8px; border: 1px solid rgba(61,214,140,.28); background: rgba(61,214,140,.06); }
.ph-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) auto; gap: 8px; align-items: center; padding: 4px 0 0; border-top: 1px solid var(--line); }
.ph-row .ph-car { color: var(--muted); }

.ph-big { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px !important; }
.ph-big b { font-size: 26px; letter-spacing: -0.03em; line-height: 1; }
.ph-big span { color: var(--muted); }
.ph-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) auto; gap: 8px; align-items: center; }
.ph-bar .ax-pbar { height: 7px; }
.ph-bar .ax-pbar b { background: var(--st-g); }
.ph-bar .ax-pbar.neg b { background: var(--st-r); }

.ph-prog { display: flex; align-items: center; gap: 8px; margin-bottom: 12px !important; color: var(--muted); }
.ph-job { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ph-job .num { color: var(--muted); }
.ph-job .ax-chip { font-size: 11.5px; padding: 3px 7px; }

.ph-cal { display: grid; gap: 9px; margin-top: 4px; }
.ph-crow { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 8px; align-items: center; }
.ph-crow .ph-car { color: var(--muted); }
.ph-ctrack { display: grid; grid-template-columns: repeat(28, minmax(0, 1fr)); height: 14px; border-radius: 4px; background: rgba(255,255,255,.025); }
.ph-ctrack i { --c: var(--st-n); grid-row: 1; margin: 0 1px; border-radius: 4px; background: color-mix(in srgb, var(--c) 55%, transparent); }
.ph-ctrack i.g { --c: var(--st-g); } .ph-ctrack i.p { --c: var(--st-p); } .ph-ctrack i.b { --c: var(--st-b); }
.ph-ctrack i.o { --c: var(--st-o); } .ph-ctrack i.n { --c: var(--st-n); }

/* Label under each card: the link's name */
.ph-label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 12px 4px 0; font-size: 15px; font-weight: 500; color: var(--fg-2); transition: color .16s var(--ease); }
.ph-num { font: 500 12.5px/1 var(--mono); color: var(--blue-text); }
.ph-label .arrow { margin-left: auto; color: var(--muted); transition: transform .2s var(--ease), color .16s var(--ease); }
.ph-card:focus-visible { outline-offset: 6px; border-radius: 16px; }

@media (hover: hover) and (pointer: fine) {
  .ph-card { transition: translate .3s var(--ease-out-strong, var(--ease)); }
  .ph-card:hover { translate: 0 -6px; }
  .ph-card:hover .ph-win { border-color: #3a3d45; }
  .ph-card:hover .ph-label { color: var(--fg); }
  .ph-card:hover .arrow { color: var(--blue-text); transform: translateX(3px); }
}
.ph-card:active { scale: .985; }

/* ---- Tablet: a 2 x 2 board, flat (no arc) ---- */
@media (min-width: 760px) and (max-width: 1023px) {
  .ph { --cols: 2; --rows: 2; }
  .ph-item { --ry: 0deg !important; }
  .ph-item:nth-child(2) { --col: 1; }
  .ph-item:nth-child(3) { --col: 0; --row: 1; }
  .ph-item:nth-child(4) { --col: 1; --row: 1; }
  .ph-body { min-height: 200px; }
}

/* ---- Motion: the deck. Starts stacked; JS scrubs --p. Pinned while it fans so it settles on screen. ---- */
@media (min-width: 760px) and (prefers-reduced-motion: no-preference) {
  /* the pin length lives inside the track's content box, or sticky has no room to move */
  .wow .ph-track::after { content: ""; display: block; height: 34vh; }
  .wow .ph { position: sticky; top: max(96px, calc(50vh - var(--ph-h, 300px) / 2)); animation: phIn .8s .2s var(--ease-out-strong, var(--ease)) both; }
  .wow .ph-card { --p: 0; }
  .wow .ph.is-moving .ph-card { will-change: transform; }
  /* While stacked, only the top card takes the pointer: overlapping links are not separate targets */
  .wow .ph:not(.is-open) .ph-item + .ph-item .ph-card { pointer-events: none; }
  /* Keyboard: a focused card fans the deck out at once, so focus never lands on a hidden card */
  .wow .ph:focus-within .ph-card { --p: 1 !important; transition: --p .45s var(--ease-out-strong, var(--ease)), translate .3s var(--ease-out-strong, var(--ease)); }
  @keyframes phIn { from { opacity: 0; } to { opacity: 1; } }
}
@media (min-width: 760px) and (max-width: 1023px) { .ph { --ph-h: 640px; } }

/* ---- Phones: a tidy swipe row, no 3D, no pin ---- */
@media (max-width: 759px) {
  .ph-track { margin-top: 40px; }
  .ph-deck {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; scrollbar-width: none;
  }
  .ph-deck::-webkit-scrollbar { display: none; }
  .ph-item { flex: 0 0 min(300px, 80%); scroll-snap-align: start; perspective: none; }
  .ph-card { transform: none; }
  .ph-body { min-height: 0; }
}