/* /product: the Heard family as numbered feature rows. */
.pd-meta{display:flex;align-items:center;gap:14px}
.pd-price{font-family:var(--body);font-size:12px;line-height:16px;padding:5px 11px;border-radius:999px;white-space:nowrap}
.pd-live{color:#4f8b43;background:#eef6ea}
.pd-soon{color:#c47a12;background:#fff3de}
.story .feat-copy .pd-tagline{color:#1c1c1a;font-weight:500;margin-top:-6px}

/* Cards: sized by their content, not the homepage's fixed ratio */
.feat-card.pd-card{aspect-ratio:auto;width:100%}
.pd-card>.pd-media,.pd-card>.pd-term-wrap,.pd-card>.pd-jarvis{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:22px;padding:28px}
.pd-media .demo-video{width:100%;border-radius:16px;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 14px 34px rgba(26,24,20,.1)}
.pd-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.story .pd-facts li{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.05);font-family:var(--body);font-size:12.5px;line-height:16px;color:#3a3a37}
.pd-facts svg{width:14px;height:14px;color:#4f8b43;flex:none}

/* Open source: terminal install card */
.pd-term{width:100%;border-radius:16px;background:#1c1c1a;color:#e8e7e2;overflow:hidden;box-shadow:0 14px 34px rgba(26,24,20,.16)}
.pd-term-bar{display:flex;align-items:center;gap:7px;padding:12px 14px;border-bottom:1px solid #2e2e2b}
.pd-term-bar i{width:10px;height:10px;border-radius:50%;background:#3d3d39}
.pd-term-bar span{margin-left:auto;margin-right:auto;transform:translateX(-25px);font-family:var(--body);font-size:11px;color:#8a8a86}
.pd-term pre{margin:0;padding:20px 22px 24px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:24px;white-space:pre-wrap;overflow-wrap:anywhere}
.pd-term code{font:inherit;color:inherit;background:none;padding:0}
.pd-term b{color:#9fcf8f;font-weight:400}
.pd-c{color:#7d7d78}

/* Jarvis: drawn command-center scene fills the card */
.pd-jarvis .jarvis-scene{width:100%;padding:0;background:none;border-radius:0}
.pd-jarvis .jarvis-tiles{grid-template-columns:1fr}
.pd-jarvis .jarvis-tiles>div{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.04)}
.pd-jarvis .jarvis-prompt{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.04)}

.story .pd-compare{max-width:1200px;margin:0 auto;padding:40px 0 0;text-align:center;font-family:var(--body);font-size:15px;line-height:24px;color:#777}
.pd-compare a{color:#222;font-weight:500;margin-left:6px}

/* FAQ heading in the display face, matching the rest of the page */
.story .page-faq h2{font-family:var(--head);font-weight:400;letter-spacing:-.04em}
@media(max-width:880px){.page-story .feat-list{padding:0}}
@media(max-width:720px){
  .pd-card>.pd-media,.pd-card>.pd-term-wrap,.pd-card>.pd-jarvis{padding:16px;gap:16px}
  .pd-term pre{font-size:11.5px;line-height:20px;padding:16px 14px 18px}
  .story .pd-facts li{font-size:12px;padding:6px 10px}
  .pd-price{font-size:11px}
  .story .pd-compare{padding:32px 0 0;font-size:14px}
  .story .jarvis-prompt p{font-size:18px;line-height:26px}
}
/* No visual stage overlaps the hero here, so drop its reserved bottom space */
.product-page .page-hero{padding-bottom:120px}
@media(max-width:720px){.product-page .page-hero{padding-bottom:88px}}