/* Template additions on top of the design-system layer (site.css): placeholder slots for product
   visuals. Replace each .ph-media block with an <img> or <video> when you have the asset. */
.ph-media{ position:relative; display:grid; place-content:center; justify-items:center; gap:10px; text-align:center;
  width:100%; aspect-ratio:16/9; padding:clamp(20px,4vw,48px); border-radius:var(--r-5);
  background:linear-gradient(135deg, var(--wash-lilac), var(--wash-peri) 55%, var(--wash-pink)); color:var(--ink-900); }
.ph-media b{ font-weight:500; font-size:clamp(16px,1.8vw,22px); letter-spacing:-.01em; }
.ph-media span{ font-size:14px; color:var(--slate-600); max-width:38em; }
.seq-frame .ph-media{ border-radius:inherit; height:100%; aspect-ratio:auto; min-height:320px; }
.svc-photo .ph-media{ aspect-ratio:16/9; }

/* Platform page: animated Teams-style conversation in the "A day with" screen. Replaces the product film until one exists. */
.scene{ position:relative; aspect-ratio:16/9; min-height:380px; display:grid; place-items:center; padding:clamp(16px,3vw,40px); color:#fff; overflow:hidden; background:#06122e; }
.scene::before{ content:""; position:absolute; inset:-6%; background:url("../assets/images/agentic-hero-wide.jpg") center/cover; opacity:.95; animation:scene-pan 28s ease-in-out infinite alternate; }
.scene::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,18,46,.3),rgba(6,18,46,.72)); }
@keyframes scene-pan{ from{ transform:scale(1.05) translateX(-2%); } to{ transform:scale(1.14) translateX(2%); } }
.sc-chat{ position:relative; z-index:1; width:min(680px,100%); display:grid; gap:12px; font-size:clamp(13px,1.2vw,15.5px); line-height:1.45; }
.sc-bar{ display:flex; align-items:center; gap:8px; font:500 12px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.sc-bar i{ width:8px; height:8px; border-radius:50%; background:#2dd4a0; box-shadow:0 0 0 4px rgba(45,212,160,.2); animation:scene-pulse 1.8s ease-in-out infinite; }
@keyframes scene-pulse{ 50%{ box-shadow:0 0 0 8px rgba(45,212,160,0); } }
.sc-msg{ opacity:0; transform:translateY(10px); animation:scene-in .5s var(--ease,ease) forwards; animation-delay:var(--at,0s); border-radius:16px; padding:12px 16px; backdrop-filter:blur(10px); }
.sc-msg.sc-you{ justify-self:end; max-width:84%; background:var(--brand-action,#055efb); border-bottom-right-radius:4px; }
.sc-msg.sc-agent{ justify-self:start; max-width:92%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-bottom-left-radius:4px; }
.sc-msg .sc-who{ display:block; margin-bottom:4px; font:500 11px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.sc-steps{ display:grid; gap:6px; margin:0 0 0 2px; padding:0; list-style:none; }
.sc-steps li{ opacity:0; transform:translateX(-8px); animation:scene-in .45s ease forwards; animation-delay:var(--at,0s); display:flex; align-items:center; gap:10px; font-size:.92em; color:rgba(255,255,255,.88); }
.sc-steps .sc-sys{ flex:none; min-width:84px; text-align:center; padding:3px 9px; border-radius:999px; font:500 11px/1.4 var(--f-mono); letter-spacing:.04em; background:rgba(29,184,242,.18); border:1px solid rgba(29,184,242,.4); }
.sc-steps .sc-tick{ flex:none; width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#1db8f2; animation:scene-spin .7s linear 2 forwards; animation-delay:var(--at,0s); }
.sc-steps .sc-tick.sc-done{ animation:none; }
@keyframes scene-spin{ to{ transform:rotate(360deg); } }
@keyframes scene-in{ to{ opacity:1; transform:none; } }
.sc-typed{ display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:bottom; max-width:0; animation:scene-type var(--dur,1.2s) steps(var(--ch,30),end) forwards; animation-delay:.3s; }
@keyframes scene-type{ to{ max-width:100%; } }
.sc-msg.sc-you.wrap .sc-typed{ white-space:normal; }
.sc-chat .sc-note{ opacity:0; animation:scene-in .4s ease forwards; animation-delay:var(--at,0s); font-size:11.5px; color:rgba(255,255,255,.55); text-align:center; }
.sc-btn{ display:inline-block; margin-top:8px; padding:5px 14px; border-radius:999px; font-weight:500; background:#fff; color:#06122e; }
@media (prefers-reduced-motion:reduce){
  .scene::before,.sc-bar i{ animation:none; }
  .sc-msg,.sc-steps li,.sc-chat .sc-note{ opacity:1; transform:none; animation:none; }
  .sc-typed{ max-width:100%; animation:none; }
  .sc-steps .sc-tick{ animation:none; }
}
@media (max-width:760px){ .scene{ aspect-ratio:auto; min-height:430px; } }
/* Product team hub */
.ptools-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:20px; }
.a-totals{ color:var(--slate-500); font-size:15px; margin:6px 0 0; }
.a-table{ background:#fff; border:1px solid var(--line); border-radius:var(--r-4); overflow:hidden; }
.a-row{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 90px 90px 90px; gap:12px; padding:12px 18px; border-top:1px solid var(--line-soft); font-size:15px; color:var(--ink-900); }
.a-row:first-child{ border-top:0; }
.a-row .n{ text-align:right; font-variant-numeric:tabular-nums; }
.a-row .pg{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a-head{ font:400 12px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--slate-500); background:var(--surface-3); }
.a-bar{ position:absolute; left:18px; right:18px; bottom:4px; height:2px; background:transparent; }
.a-bar i{ display:block; height:100%; background:var(--blue-600); opacity:.5; border-radius:2px; }
.a-note,.a-foot{ color:var(--slate-500); font-size:14px; padding:14px 18px; margin:0; }
.a-foot{ padding-inline:0; max-width:46em; }
@media (max-width:560px){ .a-row{ grid-template-columns:minmax(0,1fr) 64px 64px 64px; gap:8px; padding-inline:12px; } }