/* =========================================================================
   TTM SITE NEXT — PRODUCT ASSEMBLY (product.css)
   Product-specific styles for lab/product.html. The scene choreography
   scaffolding, header v4, closing CTA, lab panel, and reveal rules all
   come from home.css (linked, not edited). This file holds only what is
   new: the page hero, the staged Mindset HQ product window, the
   capabilities beats wrapper, and scene pacing.
   ========================================================================= */

/* ---------- page hero ---------- */
.p-hero { padding: calc(96px + 8svh) 0 10svh; }
.p-hero .display { margin-top: 14px; }
.p-hero .lede { margin-top: 18px; }

.p-intro {
  margin-top: clamp(34px, 5svh, 56px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(26px, 3.4vw, 48px);
  border-radius: 22px;
}
.p-intro-copy .h2 { margin-bottom: 14px; }

/* ---------- staged product window (same language as the home hero mockup) ---------- */
.pw-window {
  --ui-bg: #FFFFFF;
  --ui-side: #F2F4F8;
  --ui-ink: #171D27;
  --ui-muted: #5E6B7E;
  --ui-line: #E7EBF1;
  --ui-blue: #2575FC;
  --ui-green: #1F9D57;
  background: var(--ui-bg);
  color: var(--ui-ink);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px -28px rgba(2, 8, 20, 0.55), 0 0 0 1px rgba(12, 20, 34, 0.08);
  font-size: 14px;
  line-height: 1.45;
}
.pw-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 430px; }
.pw-side {
  background: var(--ui-side);
  border-right: 1px solid var(--ui-line);
  padding: 16px 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.pw-ws { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pw-tile {
  width: 24px; height: 24px; border-radius: 7px;
  background: var(--ui-blue); display: grid; place-items: center;
}
.pw-chev { margin-left: auto; color: var(--ui-muted); }
.pw-seg {
  display: flex; background: #E4E8EF; border-radius: 9px; padding: 3px;
  font-size: 12px; color: var(--ui-muted);
}
.pw-seg span { flex: 1; text-align: center; padding: 4px 0; border-radius: 7px; }
.pw-seg .on { background: #fff; color: var(--ui-ink); box-shadow: 0 1px 3px rgba(12, 20, 34, 0.14); }
.pw-navitem {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 8px; font-size: 13px; color: var(--ui-muted);
}
.pw-navitem.on { background: #E4E8EF; color: var(--ui-ink); font-weight: 600; }
.pw-label {
  margin-top: 6px; font-size: 10px; letter-spacing: 0.12em;
  color: #9AA5B4; text-transform: uppercase;
}
.pw-chat {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ui-muted); padding: 3px 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pw-chat i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pw-dock { display: flex; gap: 6px; margin-top: 2px; }
.pw-dock i {
  width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
}
.pw-main { padding: 22px 26px; }
.pw-date { margin: 0 0 4px; font-size: 10px; letter-spacing: 0.14em; color: #9AA5B4; }
.pw-hello { margin: 0 0 16px; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.pw-hello b { color: var(--ui-blue); font-weight: 600; }
.pw-prompt {
  border: 1px solid var(--ui-line); border-radius: 14px;
  box-shadow: 0 10px 30px -18px rgba(12, 20, 34, 0.25);
  overflow: hidden;
}
.pw-qbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: #F7F9FC; border-bottom: 1px solid var(--ui-line);
}
.pw-q { font-size: 11.5px; color: var(--ui-muted); }
.pw-q b { color: var(--ui-blue); font-weight: 600; }
.pw-qicons { display: flex; align-items: center; gap: 9px; color: #9AA5B4; }
.pw-qicons svg { color: #9AA5B4; }
.pw-qicons svg path, .pw-qicons svg circle { stroke: #9AA5B4; }
.pw-qicons #g-bolt, .pw-qicons [href="#g-bolt"] { fill: #9AA5B4; }
.pw-dollar { font-size: 11.5px; font-weight: 600; }
.pw-ask { margin: 0; padding: 14px 14px 4px; font-size: 14.5px; color: var(--ui-muted); }
.pw-composer {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px 12px;
}
.pw-attach { color: var(--ui-muted); display: grid; place-items: center; }
.pw-agentchip {
  display: inline-flex; align-items: center; gap: 7px;
  background: #EEF3FE; border: 1px solid #D7E4FD; border-radius: 999px;
  padding: 4px 11px 4px 4px; font-size: 12.5px; font-weight: 600; color: var(--ui-ink);
}
.pw-av {
  width: 20px; height: 20px; border-radius: 50%; background: var(--ui-blue);
  display: grid; place-items: center;
}
.pw-send {
  margin-left: auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ui-blue); display: grid; place-items: center;
}
.pw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.pw-chips span {
  border: 1px solid var(--ui-line); border-radius: 999px;
  padding: 6px 13px; font-size: 12px; color: var(--ui-muted); background: #fff;
}
.pw-appslabel { margin: 0 0 10px; font-size: 10px; letter-spacing: 0.14em; color: #9AA5B4; }
.pw-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pw-app {
  border: 1px solid var(--ui-line); border-radius: 12px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px; background: #fff;
}
.pw-apptile {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
}
.pw-app b { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.pw-run { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ui-green); }
.pw-run i { width: 6px; height: 6px; border-radius: 50%; background: var(--ui-green); }

/* ---------- scene pacing ---------- */
.cap-sec, .pil-sec, .org-sec, .sec-sec, .part-sec { padding: 9svh 0; }

/* capabilities beats wrapper: JS sets its height; the generic
   .beats-on [data-beat] rule in page-scenes.css does the absolute stacking */
.beats-on .cap-beats { position: relative; }
.cap-beat { width: 100%; }
.cap-grid-single { max-width: 620px; margin-inline: auto; }
.mini-cap { margin-top: 10px; }

/* capability / pillar cards get a hair more air than the home grid default */
.cap-sec .card .body-copy, .pil-sec .card .body-copy { margin-top: 14px; }
.cap-sec .card .card-sub, .pil-sec .card .card-sub { margin-bottom: 0; }

/* support-pillar card kicker sits above the icon, like the source layout */
.pil-sec .card { position: relative; }

/* org scene: tall, pans while pinned (home.js engine handles the pan) */
.org-sec .band-head { margin-bottom: clamp(20px, 3svh, 34px); }
.org-lane { padding-top: 8px; }

/* partners: keep the wide third card readable */
.part-sec .card-wide .body-copy { max-width: 640px; }

/* closing scene on product: same approved component from home.css */

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .p-hero { padding: calc(84px + 6svh) 0 8svh; }
  .p-intro { grid-template-columns: 1fr; }
  .pw-body { grid-template-columns: 168px minmax(0, 1fr); }
  .pw-main { padding: 18px 18px; }
  .pw-apps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pw-body { grid-template-columns: 1fr; }
  .pw-side { display: none; }
  .pw-hello { font-size: 20px; }
  .pw-apps { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- motion off: nothing extra beyond home.css's hscene/beat/reveal
   rules; the product window is already static ---------- */

/* ---------- anchor landing · #capabilities -------------------------------
   The header "Capabilities" menu item jumps to /product.html#capabilities.
   That id sits on the capabilities .hscene wrapper, but a scene's wrapper
   top is the START of its handoff lane: page-scenes.js only reaches
   handoffQ == 1 (fully opaque, unblurred, pointer-events restored) one
   ENTER_VH (0.5svh) further down. Landing on the raw wrapper top would
   drop the visitor on a half-faded, blurred, non-interactive frame.
   A negative scroll-margin moves the scroll target past the settle point
   so the jump lands on the rested first beat.
   Only applies while the scene engine is pinning: with motion off the
   scenes collapse to ordinary stacked sections and the plain top is right.
   The media query covers reduced-motion visitors before page-scenes.js
   has had a chance to add .motion-off. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-off) #capabilities { scroll-margin-top: -60svh; }
}